Content design basics for UWP apps
The main purpose of any app is to provide access to content. Since apps exist for many different purposes, content comes in many forms: in a photo-editing app, the photo is the content; in a travel app, maps and information about travel destinations is the content; and so on.
This article provides an overview of how you can present content in your app. We describe common page patterns and UI elements that you can use to display your content, whatever form it may be in.
Common page patterns
Many apps use some, or all, of these common page patterns to display different types of content. Likewise, feel free to mix and match these patterns to optimize for your app's content.
Landing pages, also known as hero screens, often appear at the top level of an app experience. The large surface area serves as a stage for apps to highlight content that users may want to browse and consume.
Hubs are designed for window shopping. Users get a good sneak peak at the content that's offered; it's all about showing a great diversity of content while keeping the amount brief. For example, Hub section 1 could contain a hero screen, Hub section 2 could contain a collection, Hub section 3 could contain another collection, and so on.
The master/details model consists of a list view (master) and a content view (detail). Both panes are fixed and have vertical scrolling. There is a clear relationship between the list item and the content view: the item in the master view is selected, and the detail view is correspondingly updated. In addition to providing detail view navigation, items in the master view can be added and removed.
When users find the content they are looking for, consider creating a dedicated content-viewing page so that users can view the page free of distractions. If possible, create a full-screen view option that expands the content to fill the entire screen and hides all other UI elements.
To adjust for changes in screen size, also consider creating a responsive design that hides/shows UI elements as appropriate.
A form is a group of controls that collect and submit data from users. Most, if not all apps, use a form of some sort for settings pages, log in portals, feedback hubs, account creation, or other purposes.
Common content elements
To create these page patterns, you'll need to use a combination of individual content elements. Here are some UI elements that are commonly used to display content. (For a complete list of UI elements, see controls and patterns.
|Audio and video
||Media playback and transport controls||Plays audio and video.|
||Flip view, image||Displays images. The flip view displays images in a collection, such as photos in an album or items in a product details page, one image at a time.|
||List view and grid view||Presents items in an interactive list or a grid. Use these elements to let users select a movie from a list of new releases or manage an inventory.|
|Text and text input
||Displays text. Some elements enable the user to edit text. For more info, see Text controls.
For guidelines on how to display text, see [Typography](../style/typography.md).
||MapControl||Displays a symbolic or photorealistic map of the Earth.|
|WebView||WebView||Renders HTML content.|