Download pdf - Metro and Windows Phone 7

Transcript
Page 1: Metro and Windows Phone 7
Page 2: Metro and Windows Phone 7
Page 3: Metro and Windows Phone 7
Page 4: Metro and Windows Phone 7
Page 5: Metro and Windows Phone 7
Page 6: Metro and Windows Phone 7
Page 7: Metro and Windows Phone 7
Page 8: Metro and Windows Phone 7

Metro

Page 9: Metro and Windows Phone 7

ETRO

METRO IS OUR DESIGN

LANGUAGE. WE CALL IT METRO

BECAUSE IT’S MODERN AND

CLEAN. IT’S FAST AND IN

MOTION. IT’S ABOUT CONTENT

AND TYPOGRAPHY. AND IT’S

ENTIRELY AUTHENTIC.

Page 10: Metro and Windows Phone 7

Metro Principles

Page 11: Metro and Windows Phone 7

Principle: Clean, Light, Open, Fast

Feels Fast and Responsive

Focus on Primary Tasks

Do a Lot with Very Little

Fierce Reduction of Unnecessary Elements

Delightful Use of Whitespace

Full Bleed Canvas

Page 12: Metro and Windows Phone 7

Principle: Celebrate Typography

Type is Beautiful, Not Just Legible

Clear, Straightforward Information Design

Uncompromising Sensitivity to Weight, Balance and Scale

Page 13: Metro and Windows Phone 7

Principle: Alive in Motion

Feels Responsive and Alive

Creates a System

Gives Context to Improve Usability

Transition Between UI is as Important as the Design of the UI

Adds Dimension and Depth

Page 14: Metro and Windows Phone 7

Principle: Content, Not Chrome

Delight through Content Instead of Decoration

Reduce Visuals that are Not Content

Contents is the UI

Direct interaction with the Content Directly

Page 15: Metro and Windows Phone 7

Principle: Authentically Digital

Design for the Form Factor

Don’t Try to be What It’s NOT

Be Direct

Page 16: Metro and Windows Phone 7

Principles

Clean, Light, Open, Fast

Celebrate Typography

Alive in Motion

Content, Not Chrome

Authentically Digital

Page 17: Metro and Windows Phone 7
Page 18: Metro and Windows Phone 7

Who we design for: Anna + Miles

Anna PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.”

Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.”

Page 19: Metro and Windows Phone 7

Metro User Experience

Focuses on the individual and their tasks

Helps organize information and applications

Page 20: Metro and Windows Phone 7

Start

Glance & Go Get Me There

Page 21: Metro and Windows Phone 7
Page 22: Metro and Windows Phone 7

Metro

Page 23: Metro and Windows Phone 7

RED THREADS.

THESE ARE

THE PRINCIPLES

THAT GUIDE THE

EXPERIENCES

Page 24: Metro and Windows Phone 7

Weather

Personal Weather surfaced on the live tile in Start

Relevant Weather updated based on your location

Connected Weather for your contacts

Page 25: Metro and Windows Phone 7

Build delightful experience

Be inspired by Metro

…but look for balance between the Metro

principles and your own style

Page 26: Metro and Windows Phone 7
Page 27: Metro and Windows Phone 7

Color

Use color to delight the user

Use color to personalize experience

Use color to emphasize hierarchy

Page 28: Metro and Windows Phone 7
Page 29: Metro and Windows Phone 7
Page 30: Metro and Windows Phone 7

Typography

Make words feel welcome

Pay attention to balance,

weight & scale

Page 31: Metro and Windows Phone 7
Page 32: Metro and Windows Phone 7

Motion

Use motion to delight the user

Remember that pacing is important: the more

you use it, the less special it becomes

Page 33: Metro and Windows Phone 7

Make It Easy to Use

Familiar = Easy to use

Provide consistent and predictable experience

Page 34: Metro and Windows Phone 7

Hardware Implications

Hardware buttons

Optional landscape

keyboards

Design for one hand usage

whenever possible

Page 35: Metro and Windows Phone 7

Gestures

Page 36: Metro and Windows Phone 7

Touch

Recommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing between

elements is 2mm

Visual size is 60-100% of the touch

target size

Page 37: Metro and Windows Phone 7

Common controls

Page 38: Metro and Windows Phone 7

Application Bar + Menu

Up to 4 icons

Don’t fill all 4 slots if not needed

Swipe up the bar to bring up

the menu Trigger

Page 39: Metro and Windows Phone 7

Tabs

Separate multiple tasks

Tap or flick tabs to change them

Trigger

Page 40: Metro and Windows Phone 7

Hubs

Rich experience

Aggregate multiple sources

Page 41: Metro and Windows Phone 7

Hubs vs. Single-Page Apps

Page 42: Metro and Windows Phone 7

Iconography

Icons in the application menu

should be consistent

Test icons with users

(pay attention to context)

Page 43: Metro and Windows Phone 7

Expression Blend

Page 44: Metro and Windows Phone 7

developer.windowsphone.com

Page 45: Metro and Windows Phone 7

msdn.se/johan


Recommended