Download - Windows UX
![Page 1: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/1.jpg)
Windows UX
![Page 2: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/2.jpg)
Design principlesPride in craftsmanship
Be fast and fluid
Authentically digital
Do more with less
Win as one
![Page 3: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/3.jpg)
A principled design approach
![Page 4: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/4.jpg)
Pride in craftsmanship
![Page 5: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/5.jpg)
Based on 20px grid
![Page 6: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/6.jpg)
And a consistent silhouette
![Page 7: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/7.jpg)
Type ramp
![Page 8: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/8.jpg)
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
![Page 9: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/9.jpg)
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.
![Page 10: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/10.jpg)
Most people are right-handedElements placed on the right are easier to touch
Prevents occlusion of the main UI area
![Page 11: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/11.jpg)
Target sizes
Recommendedminimum size
40px30px 50px100%
![Page 12: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/12.jpg)
Fat fingers?Baby’s finger Basketball
player’s finger
45px
100px
60px
![Page 13: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/13.jpg)
Target sizesMinimum target size(heart-to-heart = 50px)
Low consequence
High consequence
![Page 14: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/14.jpg)
Alignment to the grid
![Page 15: Windows UX](https://reader036.vdocument.in/reader036/viewer/2022062503/58a472c61a28aba34c8b573b/html5/thumbnails/15.jpg)
Segoe UI Type ramp
Page headers
Sub-headersBody copyTertiary info
42ptLight
20pt
LightSemilightRegular
11pt
SemilightRegularSemibold
9pt
RegularSemiboldBold