This document provides instructions for basic gestures and interactions on a touchscreen device. It explains how to press and hold to learn more, swipe to select items, slide to pan around the screen, tap for primary actions, pinch to zoom in and out, turn with two fingers to rotate items, and swipe from screen edges to access app or system commands.
54. Press and hold to
learn
Swipe to selectSlide to panTap for primary
action
Pinch to zoomTurn to rotate
Swipe from edge
for app
commands
Swipe from edge
for system
commands
Notas do Editor
Microsoft Design Language
Mouse has a language – it’s been fine-tuned over the last 25+ years. We all know how to scroll, how to command on an object etc.
For mouse we have a tangible HW device, we can see what’s possible – left/right click, scrollwheel, UI
What about touch? Touch interactions are mostly invisible, and Metro guidance is to provide content over chrome
Encarta 95 … Windows XP Media Center, Zune UI (player & desktop app) >> Phone
Looks like Windows 95 to me
It is rooted in Swiss, modern design. In particular as they are expressed in modern transportation systems, on signage and maps, where there is a focus on cleanliness and clarity. It’s about communicating essential information in an honest and beautiful way.
Modern Style – Bauhaus
International Type Style – Swiss Design (1950s, emphasis on grid, sans serif type, bold colours, real pictures)
Example here of NYC is Massimo Vignelli
Motion Design – cinematography / Saul Bass
Movie Helvetica by Gary Hustwit
Segoe; Steve Matteson Agfa Monotype
Motion Design – cinematography / Saul Bass
A skeuomorph is “an object or feature which imitates the design of a similar artefact in another material”.
1 pixel
5 pixels = 1 subunit
20 pixels = 1 unit
Between elements, 2 subunits (or 10 pixels)
Top left corner of content is always anchored on 20px grid lines (horizontally & vertically)
Padding between items is always multiples of 5px sub-units
10px between items of the same group
Padding between items is always multiples of 5px sub-units
10px between picture + text
Item height and width are also multiples of 5px
Padding between items is always multiples of 5px sub-units
80px between groups of objects
The proportional difference in padding makes the separation between the groups of items clear (you can tell that without any context that there are 2 groups here)
In addition to using the grid to determine sizing and margins of individual items, we also use the grid to guide the overall page layout
Page header is baselined at 5 units (100px) from the top
Content region has a left margin of 6 units (120px) from the left
…and aligns to 7 units (140px) from the top
These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here.
This particular one is what we provided as a base template in Visual Studio. It uses the Metro style silhouette, applies the type ramp, and all items are aligned to the 20px grid.
If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point.
However, don’t be limited by this exact layout. This is just 1 expression of the principles.
There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages.
Having visual variety is *particularly* important when designing the landing page of your app.
Treat it as the cover to your magazine.
These are just a couple different varieties of ways different content can be laid out. There are many, many possibilities here.
This particular one is what we provided as a base template in Visual Studio. It uses the Metro style silhouette, applies the type ramp, and all items are aligned to the 20px grid.
If you have multiple groups of content each with several items you’d like to highlight – which is particularly common on apps’ landing pages – this is a good starting point.
However, don’t be limited by this exact layout. This is just 1 expression of the principles.
There are many ways to leverage proportions, typography, graphical treatment to add visual variety to your pages.
Having visual variety is *particularly* important when designing the landing page of your app.
Treat it as the cover to your magazine.
We have over 2 dozens pre-designed animations.
Some are baked into the controls already. E.g. App bar
Others can be easily added to your app. You can just specify what UI elements you would like to animation using one of these animations from the library and all the motion and timing will be taken care of.
There will be a later deep dive into this topic.
Hold to learn
Mouse has a safe way to learn with hover, touch doesn’t have hover so we created a new learning interaction
Good use of a slow interaction because you hopefully only have to learn once, we don’t slow you down for the rest of your life
Examples: Rotated appbar button on Start, Shut down menu
Tap for primary action – this is pretty basic
Slide to pan
Swipe to select
Our fingers don’t have a second mouse button, so how do we do a secondary action like selection?We leverage the richness and effortlessness of a drag, all you need is a simple swipe in the orthogonal direction of panning
Example: Start
Select
Notice how commands show up automatically when I’ve selected
Can also rearrange
Pinch/stretch to zoom – both for optical and semantic zoom
Swipe from edge to show app and system UI
Turn to rotate
Use these! That’s our most basic touch pattern.
We’re not just designing for what’s on the screen, but also for how the device is held.
Key takeaway: There is not one correct grip. Users will change their posture, and different people have their favorites, preferred posture can also change based on task.
4 main postures:
One hand holding, one hand interacting
Two hands holding, thumbs interacting
Device rests, two hands interacting
Device rests, without/intermitted interaction
Notice how:
Grips are great for the edge gestures
Big screen, and a full hand is pretty much always available for interact with the screen
Try your app in different postures – make sure you can interact with it using different grips. However, some interactions might lend themselves to specific grips. For example a game with controls by the thumbs.