Upload
jiri-danihelka
View
11
Download
0
Embed Size (px)
Citation preview
Windows UX
Design principlesPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
A principled design approach
Pride in craftsmanship
Based on 20px grid
And a consistent silhouette
Type ramp
Swipe from edgeRight edge for charms
Left edge for running apps
From top edge to bottom to close app
From top edge to right/left for split window
From bottom edge for app bars
Interaction vs. reading areas
Interaction areas: Because tablets are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.
Reading areas: Because tablets are mostoften held along the side, the bottom corners and sides are ideal locations for interactive elements.
Most people are right-handedElements placed on the right are easier to touch
Prevents occlusion of the main UI area
Target sizes
Recommendedminimum size
40px30px 50px100%
Fat fingers?Baby’s finger Basketball
player’s finger
45px
100px
60px
Target sizesMinimum target size(heart-to-heart = 50px)
Low consequence
High consequence
Alignment to the grid
Segoe UI Type ramp
Page headers
Sub-headersBody copyTertiary info
42ptLight
20pt
LightSemilightRegular
11pt
SemilightRegularSemibold
9pt
RegularSemiboldBold