McGill University - 2012-05-10 - Designing a metro style app
•Télécharger en tant que PPTX, PDF•
0 j'aime•565 vues
Recommandé
Recommandé
Contenu connexe
Plus de Frédéric Harper
Plus de Frédéric Harper (20)
Dernier
Dernier (20)
McGill University - 2012-05-10 - Designing a metro style app
- 36. City Guide City Guide Barcelona, Spain 7 night Alaska Cruise Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on double occupancy From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny
- 37. Contoso Travel Featured destinations Last minute deals My Trips Top Destinations for 2012 Barcelona, Spain 7 night Alaska Cruise Weather Attractions 7 days Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Today 54/43 Mostly Sunny Ocean View Cabins Suites Today 54/43 Mostly Sunny Upgrade from an inside cabin and save Upgrade from an inside cabin and save $43/night/person! $43/night/person! Picture windows with ocean and port views Picture windows with ocean and port view From $2,099 — only $150/night/person based on double occupancy From $2,099 — only $150/night/person do Today 54/43 Mostly Sunny
- 40. Demo
- 43. Animations demo
- 52. demo
- 56. Lorem Ipsum Lorem Ipsum dolor sit amet
- 61. Account
Notes de l'éditeur
- 8 traits of great Metro style appsI can get content from and share content with people I care about
- Content before Chrome is a core principle to Metro-styled design
- The shift in focus is crucial – it means that the users, instead of remembering how to use the software, are remembering the content – the news story they read about, the social updates from their friends, the products they are shopping for.
- Windows 8 is about putting the app on the center stage. Content is the heart of any experience, and everything else are only tools to let you consume and interact with your contentIt’s important to think about how to leverage this real estate and place content first, so that users can actually be immersed in the things they love.Where does chrome come from? LayoutCommandsNavigationLet’s look at how we handle these in a Content first world
- Content before Chrome is a core principle to Metro-styled design
- Remove lines and boxes and create openness by using whitespace Use crisp visuals and avoid unnecessary graphical effects such as blurs and gradient on visuals
- Metro is founded on clean typographyA Typographic ramp is used to establish a sense of hierarchy for the content.Only a fixed set of sizes (4) to convey hierarchical information – and each font sizes are multiples of 20px. The proportions allow users to really easily establish an understanding of the structure of the content. Beyond this size granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- Use the default stylesheetto get the styling in a pre-defined type ramp with the Segoe UI font A Typographic ramp is used to establish a sense of hierarchy for the content.Only a fixed set of sizes (4) to convey hierarchical information – and each level is proportionally larger than the previous (42pt = 80px, 20pt = 40px). The proportions allow users to really easily establish an understanding of the structure of the content. Beyond this size granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- Metro is founded on clean typographySegoe UI is the primary font for the Metro-style design languageOnly a limited set of sizes (4) to convey hierarchical information. Beyond this granularity, users will not be able to differentiate where a piece of content fits within the overall hierarchy
- On panning: Design for landscape first to cater to all form factorsIn landscape, panning along the horizontally
- When we had chrome, it formed the identity of the app (first sketch). In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the identity. The silhouette is what allows your eyes to recognize something as a Metro style app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence.
- In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Metro style app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence.
- In the absence of chrome, when users are focusing on the content, the formation of your content is what forms the silhouette. This shape is what allows your eyes to recognize something as a Metro style app, as opposed to a webpage, or a traditional app, before you even really process it. This layout allows you to provide the users with a feeling of familiarity and confidence. Align elements on a grid to create a structured and consistent layoutTop, left, and bottom margins create a ‘C’ with negative space to indicate panning directionThe headers are in the same position, use the same type treatmentConsistent type sizes are used throughout and in parallel locations: Large, medium, small
- There are specific pixel values to this layout: title is baselined at 100px, content starts 120px from the left.The easiest way is to get this layout is by starting with the templates.
- Content before Chrome is a core principle to Metro-styled design
- Integrate commands into the content
- Integrate commands into the contentRemove the “remote controls”
- Bringing up the app barBringing up the app bar programmatically: Users will know to swipe from edge. There is no need to bring up the app bar programmatically just to show that it is there. If you find yourself going back to the app bar every few seconds… While doing a specific task, you can still use a transient app bar but make it non-light-dismissedAll the time while using the app, you can set the app bar to persistent
- Leave only the most relevant elements are on screen Use the app bar to tuck away commanding chrome until needed by the usersUse the system charm for search and settings
- Contextual commandsCommands are generally on the rightNew is on the far rightWhen an item is selected, the app bar shows, and a new contextual command shows on the other side (easy to notice and differentiate)When the app bar comes up because of selection it is sticky – no longer light dismiss
- Place commands in the bottom app barErgonomically, bottom left and right are the most convenient places to touch when holding a slate. Commands can be global or contextualApp bar is great way for providing commands on-demand, so that they are not distracting users when they are not usedBy the same principle, only show commands if they are relevant to the current context
- Integrate commands into the contentLight dismiss model for transient UI such as flyouts. No need for close buttonFlyoutsFlyouts should always appear adjacent to item that the user tapped to invoke it. Users can respond to the flyout efficiently with touch and mouseThe flyout’s context as it relates to the anchor is very clearFlyouts are great as confirmation messages rather than using dialogsThe purpose of a confirmation is to make sure the user hasn’t tapped a significant command accidentally so all you need is a second tap – you should be a lightweight and unobtrusive as possible getting the confirmation since it’s likely that the user did mean to press it the first time
- Provide errors information in the focal area, inline with where to resolve.
- Content before Chrome is a core principle to Metro-styled design
- Do not recreate entry points into Search, Settings, Share in your app. Users will learn to always look to first look for them in the charms.
- Integrate navigational elements into the contentThe group headers are a part of the content and inform you of what you are viewing.Reasons why people build tabs: Want a way for people to see all the groups availableWant to quickly jump from one group to anotherBoth of these can be accomplished with semantic zoom
- UI Structure
- UI Structure
- Ex: Size of an item in the zoomed out view can show how big the group isEx: Color of an item in the zoomed out view can represent the popularity of the groupEx: Curated promotional images to attract users to different groups
- Animation Library: Animation is a core part of the Metro design language. The Animation Library is purposely scenario-centric and are designed specifically to convey information. Scenario centric - there is NO flip or rotate or spin around animations – you can see from the name that each one is designed intentionally for a scenario, to help visually illustrate what is happening. Leverage standard animations to provide your users a sense of familiarity and confidence. The motions help users know what behaviors to expect, and they help reinforce UI concepts and functionalities.
- Examples: Buttonsprovide visual change on touch down, drag away (reverse) to cancel, commit on touch up Swipe to select and rearrange – sliding interactions with item always following fingers
- RE: Actions should be reversible so users can safely explore. Example – swipe to select is reversible
- Your app can be displayed in any of the following sizes:Snapped: 320x768 (a minimum of 1366x768 is required to support snapped view)Full screen landscape / filled: minimum 1024x768Full screen portrait: minimum 768x1024Although there are an infinite number of supported sizes, it is important to verify your application in the most common application dimensions, namely:1024px by 768px1366px by 768px
- As screen’s pixel density increase, UI elements will get smallerTo maintain consistent physical sizes of UI elements for touchability and readability, the system automatically scales UI up by 1.4x or 1.8x based on DPI & resolution
- Call to action: Design your snap view to be useful so users will want to keep you on screenFor a content provider – lists/grids, then this is about relaying out.For other apps, think about the scenarios that are valuable and useful in the snapped view: Tile puzzle and Word Hunt are both great examples. They almost feel more tailored in snapped view. Example of leveraging the snapped view: In Word Hunt, in addition to the game board, provide a word list with links to definitions. Tapping on it will open the browser in filled.
- Use common system entry points, Charms, as a predictable consistent way of accessing contract functionalities so users do not have to relearn
- Keep the look and feel the same between your share target page and your primary app.
- Do not use Search for FindThe difference between Find and Search is in the scope. “Find” is looking for something that is already on the current page, but the user just need help locating it. For example, think: Ctrl+F in Word, or in IE – you would type in something that you expect to already be in the doc or the html page, and Find locates it for you. “Search” on the other hand has a much broader scope, and is looking across your application regardless of what the user is viewing (they can be anywhere within your app, or not even in your app at all!). The result of Search is usually a list of items within the app that contain the search term, and you can navigate to then navigate to view the item from the search result page (as opposed to Find, where you are already viewing the item).
- After your app has registered for the Picker File ExtensionYour app will appear in the list of locations the users can navigate toYou can specify which file types are relevant to your app
- While the central space is completely controlled by your application’s Picker Extension, the top bar is reserved for navigation and the bottom bar (also known as the basket) is reserved for tracking the user’s selections.
- Tile templates: A lot of rendering options available from Pure text to Pure images.
- 2 sizes: Small is required. Large is optional. Use Large if you have live content
- Toast notifications use the same template architecture as live tilesRich set of rendering options available
- Pride in craftsmanship: Layout, every pixel matter. Details like type size matters.Do more with less: Content before chrome. Showing less on screen to let people focus on what matters.Be fast and fluid: Designing with motion and designing for touchAuthentically digital: Being connected and alive with tiles & notifications, Leveraging the cloud to roamWin as one: Using contracts to work with other apps to complete scenarios. 1:1=3
- 8 traits of great Metro style appsI can get content from and share content with people I care about