Introduction to WIN8 Application Development (iii) UX Interactive navigation mode

Navigation mode (Windows store app)

in this article

• Layered mode
• Navigating on the canvas
• Top app Bar
• Semantic zoom
• Related Topics

Organize content in Windows store apps so that users can navigate easily and intuitively. Use the correct navigation mode to help you limit the controls that are permanently on the screen. This allows the user to focus on the current content.

Navigation in a Windows store app is based on two modes: layered and flat mode. An app can use either one or a combination of these two modes.

Layered mode

This mode makes Windows store apps fast and fluid. It is best suited for applications that have a large amount of content or many different parts of the content for users to browse. Most Windows store apps use a hierarchical navigation system.

more in-depth understanding of this feature as part of the app feature Daquan series: Hierarchical Navigation Details (HTML and XAML)

A Hub page is a user-to-app entry point. The content here is displayed horizontally in a rich panning view so that users can see what's new and what's available at a glance. The center is made up of different content, each of which is mapped to a partial page of the app. A partial page is the second level of the app. The content here can be displayed in any form, which must be able to best represent the scenario and the content contained in that part. Some pages are made up of individual items, each with its own detail page. Some pages can also take advantage of grouping and panorama style layouts. The details page is the third level of the app. The details of each item are shown here, and the destination format may vary greatly depending on the particular type of content. The details page is made up of project details or features. The details page may contain a lot of information, or it may contain a single object, a sample, or a video.

Planar mode

Many Windows store apps use flat navigation mode. Apps such as games, browsers, or document creation use this mode to allow users to move between pages, tabs, or modes that reside at the same hierarchical level. Unlike layered mode, there is usually no permanent back button or navigation stack, so moving between pages is usually done through the direct links in the content (such as the first example below) or the navigation bar (as in the second example below).

more in-depth understanding of this feature as part of the app feature Encyclopedia series: Flat navigation Details (HTML and XAML)

This mode is best used when the core scenario involves a quick switch between a small number of pages or tabs, such as in Web browser applications such as Internet Explorer, ebooks, and games.

Navigating on the canvas

1. Header and Back button

   The header can be used to mark the current page and help find the page. Use the Back button to quickly return to your location.

2. Partial or category labels

   These tags can move users to different parts or categories of content.

3. Other targets

   You can use tiles, arrows, buttons, search results, or other custom targets as navigational elements. In some games, you can find examples of navigational elements that use interesting shapes.

Top app Bar

Users can display the app bar by swiping from the top or bottom edge of the screen. The top app bar is also called the navigation bar. You can place navigation elements in the top app bar, freeing up more screen areas to display the content in your app. Or, if users often need some navigational elements when using your app, you can place them on the canvas, provided they are placed on the canvas without negatively impacting the app experience. You decide whether the navigation element is in the top bar or on the canvas.

Typically, part or category labels are in the navigation bar, as in Hulu Plus.

Many apps use the top app bar to provide a quick way. For example, in an ESPN app, users can navigate to the Gamecast page by clicking the scoreboard above some of the tabs in the top app bar.

The top app bar can also give users a preview of what's on the target page. In the following shopping app example, you can preview the product image in the app bar before entering the Product Details page.

We recommend that you use the app bar in an innovative way to improve your design level. In Fresh paint, the top app bar goes beyond its dedicated navigation and is also used as a painting toolbox.

Semantic zoom

Semantic zoom allows you to quickly and smoothly scan and move views, especially when the view is a long translation list.

For example, in a great British chefs app, the center page has a focus section followed by five visually rich, horizontally panning sections. The app makes semantic zoom, which makes it easier for users to jump to each of the five sections.

Introduction to WIN8 Application Development (iii) UX Interactive navigation mode