Design principles for Windows 8 Metro style apps
"Being a good developer, we need to have the conceptual knowledge of metro UI design principles while trying to develop a application based on windows 8 metro UI. Its a good practice to choose the right surface for the right application. Here I am giving a brief description that will help you as I hope and you might feel better"
Layout and navigation
Focus on content
When creating the Metro style app, our first goal was to remove all UI elements that were not directly relevant to the core functionality of the app. For example, the top navigation bar, pagination controls, and the bottom control bar can all be removed.
Use App bars
Outside of the app page, the app bar is the primary command interface for your app. Use the app bar to present navigation, commands, and tools to users.
Use direct manipulation to navigate
When designing the Metro style app, always use direct manipulation whenever possible, using built-in controls like Semantic Zoom, which lets users navigate more efficiently.
Use View states
People can snap your app so that they can use another app, or snap another app so they can use your app.
Commands and actions
Keep app contextual actions in the app bar
This way the app design surface isn't cluttered with controls, and no matter where a user is, they can swipe the app bar from the bottom or top of the screen to see relevant actions. All Metro style apps can use the app bar for their commands. Because users will be familiar with app bar interactions, it also increases the usability of our app and makes the whole system feel cohesive.
By using the Search contract, users can invoke the Search charm from anywhere in the system to look for content from apps that support the contract.
- The user opens the charm bar and accesses the Search charm. The Photo journal app is selected by default because the user is currently inside the app.
- When the user starts typing, the app supplies search suggestions to the pane. This way users can quickly see which terms will generate search results. After the user submits their query, they see a search results view and select the result they want.
Using Windows 8, a user can swipe from edges to access commands and navigate between apps.
- App commands are revealed by swiping from the bottom or top edge of the screen. The app bar should always be used to display app commands.
- Swiping from the right edge of the screen reveals the charms bar that contains system commands.
- Swiping from the left edge switches to previously used apps.
- Swiping from the top edge toward the bottom edge of the screen lets you dock or close apps.
Pinch and stretch to semantic zoom
Semantic zoom enables the user to zoom out to see data in related groups and provides a quick way to dive back in. Instead of providing navigation for reviewing long lists of content, use semantic zoom when possible for this type of interaction.
When redesigning the Photo journal app, we considered how the app would look in two device orientations, taking into account screen resolutions and device sizes. The grid layout makes it easy to scale the design for both portrait layout and high resolution screens
Use snap view to engage your users
Windows 8 lets users multitask by "snapping" an app next to another app. The snapped view is a great way to increase the app's time on screen and engage users for longer periods.
Unlike the notifications in iOS which have a fixed format, Metro style app tiles have a rich collection of templates for designers to choose from.
Use toasts for app notifications
It's best to let users opt-in to notifications during their first run of the app. If applicable, show recent toast notifications on tiles while they are still relevant.