UI basics
Collapse the table of content
Expand the table of content

UI basics for Universal Windows Platform (UWP) apps

[ Updated for UWP apps on Windows 10. For Windows 8.x articles, see the archive ]

A modern user interface is a complex thing, made up of text, shapes, colors, and animations which are ultimately made up out of individual pixels of the screen of the device you're using. When you start designing a user interface, the sheer number of choices can be overwhelming.

To make things simpler, let's define the anatomy of an app from a design perspective. Let's say that an app is made up of screens and pages. Each page has a user interface, made up of three types of UI elements: navigation, commanding, and content elements.

Anatomy of an app

Navigation, command, and content areas of an address book app

Navigation elements

Navigation elements help users choose the content they want to display. Examples of navigation elements include tabs and pivots, hyperlinks, and nav panes.

Navigation elements are covered in detail in the Navigation design basics article.

Command elements

Command elements initiate actions, such as manipulating, saving, or sharing content. Examples of command elements include button and the command bar. Command elements can also include keyboard shortcuts that aren't actually visible on the screen.

Command elements are covered in detail in the Command design basics article.

Content elements

Content elements display the app's content. For a painting app, the content might be a drawing; for a news app, the content might be a news article.

Content elements are covered in detail in the Content design basics article.

 

At a minimum, an app has a splash screen and a home page that defines the user interface. A typical app will have multiple pages and screens, and navigation, command, and content elements might change from page to page.

The following figure shows a hypothetical app structure with an assortment of pages, each of which has a different assortment of navigation, command, and content elements:

Image of a typical app structure

Let's take a look at some common UI patterns for combining navigation, command, and content elements.

Common UI patterns

When you combine one or more elements, you create a pattern. These five UI patterns are commonly used to provide navigation, command, and content—most apps will use at least one. These UI elements can serve as the cornerstone when you build the UI for your app. (You can also combine UI patterns to provide more complex functionality.)

UI elementDescription

Active canvas

Active canvas

Element types: Command + content

The active canvas is for single-view apps or modal experiences, such as a browser, a document viewer, a photo viewer/editor, a painting app, or other apps that make use of a free-scrolling main view. It can contain top level and/or page level actions.

This design for a photo editing app highlights the use of an active canvas:

Example of a photo editing app design that uses active canvas

Master/details

The master/detail pattern

Element types: Navigation + content

The master/details pattern displays a master list and the details for the currently selected item. This pattern is frequently used for email and contact lists/address books.

This design for a stock-tracking app makes use of a master/details pattern:

Example of a stock trading app that has a master/details pattern

Nav pane

A navigation pane

Element types: Navigation + content

A nav pane allows for many top-level navigation items while conserving screen real estate. It consists of three primary components: a button, a pane, and a content area. The button is a UI element that allows the user to open and close the pane. The pane is a container for navigation elements. The content area displays information from the selected navigation item. The nav pane can also exist in a docked state, in which the pane is always shown.

This design for a smart home app features a nav pane pattern:

Example of an app that uses a nav pane pattern

Tabs and pivots

Tab navigation

Pivot navigation

Element types: Navigation + content

Displays a persistent list of links to pages that also provides a quick way to move between different pivots (views or filters), typically in the same set of data.

This design for a smart home app uses a tabs/pivots pattern:

Example of an app using tabs/pivots pattern

 

Create your own patterns

Now that you understand the basic anatomy of an app and have seen a few common UI patterns, check out our design guidelines for navigation, commands, and content. These articles will help you understand when to use which UI elements and patterns.

  • Navigation

    Learn how to design a great navigation experience by following three simple rules.

  • Commands

    Learn about command elements and how to use them to create a great interaction experience.

  • Content

    Content is what your app is all about. It's where the user's focus is the vast majority of the time they're using your app. This article provides recommendations for different types of content and content consumption experiences.

[This article contains information that is specific to Universal Windows Platform (UWP) apps and Windows 10. For Windows 8.1 guidance, please download the Windows 8.1 guidelines PDF .]

 

 

Show:
© 2017 Microsoft