Guidelines for layouts (Windows Store apps)

15 out of 23 rated this helpful - Rate this topic

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 view state

Full screen

App fills entire screen.

Snap view state

Snapped

App is snapped to a narrow region of the entire screen.

Fill view state

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.

Landscape and portrait layouts

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.

A region that supports resizing

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.

Panning multiple pages of content

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:

Static layouts with stretched, shrunk, or clipped content

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

Quickstart: Defining app layouts
Guidelines for scaling to screens

 

 

Build date: 11/28/2012

Did you find this helpful?
(1500 characters remaining)
© 2013 Microsoft. All rights reserved.