Edges

Applies to Windows only

Sound Recorder app

 

Edges are a powerful and beautiful interaction tool that is integral to Windows. The design of edges is based on the principle Do more with less. The edges give you an array of options for doing more with less. They let you move elements off the canvas if they are not directly related to the content that is currently displayed. They provide users with reliable, intuitive ways of navigating that feel natural on any device.

Edges in Windows

App bars

app bars in Finance app

 

The top app bar is also called the navigation bar because apps typically place navigation controls in this bar.

The bottom app bar is also called the command bar because apps typically place commands in this bar.

The app bars are yours to design. They do not interact with the system. You can choose to place other contextually relevant information in the top or bottom app bar instead of, or in addition to, navigation controls and commands. For example, in a shopping app, you could place the contents of the user's shopping cart in the top app bar. This placement allows the user to focus on shopping but enables quick reference to the cart and the check out procedure. In a music app, you could place media controls, such as play, pause, and advance, in the bottom app bar. These controls are hidden until the user selects a song, at which point the controls become contextually relevant.

 

Charms

Finance app and charms

 

The charms are the most iconic use of edges. The charms initiate system interactions. A user invokes the charms by swiping from the right edge of the screen or by pointing to the top or bottom right corner. For more info, see Charms and contracts.

 

Left edge

list of recent apps

 

The left edge is the user's command center for viewing recently used apps, switching apps, and placing multiple apps on the screen side by side.

Innovation with edges

We encourage you to find new and innovative ways to use the edges in your app design. You can even choose to not implement app bars or to use them minimally. For example, the Xbox Music app includes most commands on the canvas and places very few controls in the app bar.

The standard controls and typical placement are just the starting point. Think creatively about what you can do with edges in your app.

Examples of edges

In the following example, the app uses the top app bar for displaying related videos and uses the bottom app bar for commands that are related to the video that is currently playing.

 

Vevo app with app bars

 

In the NatureSpace app, the bottom app bar is very subtle and does not span the entire width of the canvas, yet it still provides a valid command surface for the user to control the current track.

 

NatureSpace app with bottom app bar

 

App bars don’t need to look like those in the standard templates. You can design them to be beautifully tailored to your brand. In this example from Disney, the app bar looks like part of the storybook.

 

Disney Princess Dress-up Sticker Book app with bottom app bar

 

Related topics

Navigation patterns
Command patterns

 

 

Show:
© 2014 Microsoft