These guidelines can help you build applications that provide an elegant experience across form factors, display sizes, and view states through consistent and predictable management of the user interface.
User experience guidelines
Provide layouts for view states
View state refers to the three ways a user can choose to display your Windows Store apps: snap, fill, and full-screen as shown in the following images.
 |
Full screen App fills entire screen. |
 |
Snapped App is snapped to a narrow region of the entire screen. |
 |
Fill App fills remaining screen area not occupied by the app in the snapped state. |
Because users can work with up to two apps at a time, you should provide layouts that are fluid and flexible enough to support all three states.
When you plan for full screen, snap, and fill views, your app's UI will reflow smoothly and gracefully to accommodate screen size, orientation, and user interactions.
Support landscape and portrait screen orientations
Users can rotate and flip their tablets, slates, and monitors, so ensure that your app can handle both landscape and portrait orientations.
Let users manipulate content
Great apps help users do what they want with the content in the UI.
When you design your app, you should consider which regions of the UI should support panning and scrolling, optical and semantic zooming, and object resizing.
Create views that let users resize and zoom in on the content of your app.
Let the UI surface overflow the screen area onto additional "pages" if necessary. In these cases, enable panning and scrolling to let users explore these large UI surfaces and discover the content on the additional pages.
Use fluid layouts
You have two options for managing your app layout: fluid and static. Fluid layouts shrink, grow, or reflow to adapt to the visual space available on a device. Static views do not. We recommend that you use fluid layouts.
Avoid static layouts
Static layouts can become stretched, shrunk, or clipped across different form factors and display sizes, as shown here:
Use flexible controls
For maximum control over the UI and minimum development effort, you should use flexible controls such as ListView and Grid wherever possible. These support flexible layouts intrinsically and can arrange and distribute their content automatically.
Grids help you account for variations in the dimensions of display devices:
- Grids can flex specific sections of your UI to fill available space depending on the screen resolution of the display device (such as 16:9 or 16:10).
- Grids can respond to dynamic changes in the view state (such as snapped or portrait) by assigning content to different cells based on the state.
Dos
Follow these guidelines when designing your app layout:
- Do use fluid layouts.
- Do use media queries (Windows Store apps using JavaScript only) to identify the view state and resolution being targeted.
- Do use layout features to adapt to display size. To learn more, see Guidelines for scaling to screens.
- Do use controls that are designed for fluid layout, like ListView.
- Do consider using vector-based UI (Scalable Vector Graphics (SVG), Extensible Application Markup Language (XAML)) for application resources.
Donts
Here are some things to avoid when designing your app layout:
- Don't use static layouts.
- Don't use absolute positioning because it constrains your UI from responding to changes in view state and orientation.
Hands-on labs for Windows 8
If you’d like to try working with app layouts and other key Windows 8 features, download the hands-on labs for Windows 8. These labs provide a modular, step-by-step introduction to creating a sample Windows Store app in the programming language of your choice (JavaScript and HTML or C# and XAML).
Related topics
Build date: 11/28/2012
