Windows Phone Applications Design
of 35
-
Upload
jesus-angulo -
Category
Documents
-
view
220 -
download
0
Transcript of Windows Phone Applications Design
-
8/13/2019 Windows Phone Applications Design
1/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Windows Phone Application
Design for Developers: Metro
Design Overview,
Tips and TricksReza Alizadeh
Architect Evangelist, Microsoft
January 8- 9, 2012
-
8/13/2019 Windows Phone Applications Design
2/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Topics
General Design Principles
Design Guidelines
Real-World Transformations
Resources for Customers
-
8/13/2019 Windows Phone Applications Design
3/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Before We Begin
-
8/13/2019 Windows Phone Applications Design
4/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Rule #1
Become familiar with Windows Phone
before writing any code
-
8/13/2019 Windows Phone Applications Design
5/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Panorama/Hub Experiences
-
8/13/2019 Windows Phone Applications Design
6/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Information Architecture
-
8/13/2019 Windows Phone Applications Design
7/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Visual Designs
-
8/13/2019 Windows Phone Applications Design
8/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
General Design Principles
-
8/13/2019 Windows Phone Applications Design
9/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Be Modern
Undecorated
Free of chrome
elements
Minimally designed
-
8/13/2019 Windows Phone Applications Design
10/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Be On the Go Capable
Surface information Expedite the most
common operations
-
8/13/2019 Windows Phone Applications Design
11/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Be Clean
Use space aroundcontrols and content
Make labels succinct
-
8/13/2019 Windows Phone Applications Design
12/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Be in Motion
Animations should informuser about navigation
and operations
Make obvious what is
tappable and whatis static
-
8/13/2019 Windows Phone Applications Design
13/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Design Guidelines
-
8/13/2019 Windows Phone Applications Design
14/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Panorama & Pivot Controls
-
8/13/2019 Windows Phone Applications Design
15/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Panorama & Pivot Controls
Should have at least 2 pages
Dont use controls that compete for swipe g
Toggle switches
Sliders
Map control (unless gesture input has been locked
Browser control (unless gesture input has been loc
-
8/13/2019 Windows Phone Applications Design
16/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Panorama Controls
Incorrect
Floating buttons should be avoided. Use app bar if necessary.
Minimize interactive content Less than 5 panorama panes is recommended
Panorama panes should either scroll vertically or horizontally
Correct
-
8/13/2019 Windows Phone Applications Design
17/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Alignment
24px margins
-
8/13/2019 Windows Phone Applications Design
18/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Layout
-
8/13/2019 Windows Phone Applications Design
19/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Animations Silverlight Toolkit for Windows Phone
http://silverlight.codeplex.com/
Page Transitions
Tilt Animation on buttons, list items, and controls
Dont use color changes in place of tilt
-
8/13/2019 Windows Phone Applications Design
20/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
List Adorners
-
8/13/2019 Windows Phone Applications Design
21/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Buttons Dont add soft Back buttons
No need for close buttons users can use Back button When possible, buttons should be placed in App Bar
Incorrect Correct Incorrect Correct
-
8/13/2019 Windows Phone Applications Design
22/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Tiles
Incorrect Correct
Should not have rounded corners or 3d
elements
-
8/13/2019 Windows Phone Applications Design
23/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Touch Targets
Spacing too small
No clear connection
between list and map
Good
Good
Clear
betwe
Incorrect Correc
Minimum font size is 15pt
Recommended touch target size is
9mm
Minimum touch target size is 7mm
Minimum spacing between elementsis 2mm
Provide feedback when an item is
touched
-
8/13/2019 Windows Phone Applications Design
24/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Design Guidelines
Published by Microsoft
Adhering to design guidelines will he
with Marketplace acceptance
http://bit.ly/kJXZrB
-
8/13/2019 Windows Phone Applications Design
25/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Real World Examples
-
8/13/2019 Windows Phone Applications Design
26/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Billboard.com Initial Design
17 Panorama items
Entire application in one Panorama App positions to another Panorama for navigation
Otherwise the layout complies for the most
-
8/13/2019 Windows Phone Applications Design
27/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Billboard.com Panorama Fina
-
8/13/2019 Windows Phone Applications Design
28/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Evernote Transformation
-
8/13/2019 Windows Phone Applications Design
29/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
SoundHound Transformation
-
8/13/2019 Windows Phone Applications Design
30/35
-
8/13/2019 Windows Phone Applications Design
31/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
SoundHound Transformation
-
8/13/2019 Windows Phone Applications Design
32/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
SoundTracker Transformation
-
8/13/2019 Windows Phone Applications Design
33/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
SoundTracker Transformation
-
8/13/2019 Windows Phone Applications Design
34/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
SoundTracker Transformation
-
8/13/2019 Windows Phone Applications Design
35/35
The views expressed in this presentation do not necessarily reflect the v iews of AT&T.
Thank You
