Summary of five mobile application navigation design

The figure below is a screenshot of the "Mobile application UI design pattern", which lists some of the navigation patterns that are appropriate for the navigation.

Among them, springboard navigation, list navigation and tabbed navigation is most common, instrumentation navigation and metaphorical navigation is generally in the physical design or tools of the app is more common, super menu now will use less. Because the industry is growing fast, there are also some books that are not listed in the book, but now also very common navigation mode, such as the appearance of the Android side drawer design, is now widely used in iOS. The Pull-down menu will also appear as the leading navigation.

The following figure shows some of the patterns in the book that are suitable only for secondary navigation:

For example: page-roulette, picture-roulette, and inline extensions in a list, and some hyper-menu navigation is also used as a secondary navigation.

　One: Springboard type navigation

The feature of Springboard navigation is that the menu option in the login interface is the starting point to enter each application. There are no special requirements for the operating system and good performance on all kinds of equipment. It is also sometimes referred to as the "Quick Launch Board" (Launchpad).

Generally use the master navigation, commonly used layout mode 3*3 (often said nine Sudoku layout) 2*3, 2*2 and 2*1 grid. However, it is not necessary to adhere to the grid, but also in order to different priorities, zoom in or out of the grid, to highlight the level of content.

The United States Mito use is the 2*3 Springboard navigation mode, through the top and bottom, paging to highlight priority.

ASM uses an irregular grid of springboard navigation to highlight the priority of the content.

In the use of Springboard navigation and other navigation, it is usually used as secondary navigation, common collocation mode: Tabbed + Springboard

The first page of Ctrip is the use of the main navigation with the tab-guided Springboard navigation mode

　　Two: List-type navigation

One of the most common leading navigation modes can be divided into grouped lists, personalized lists, inline extension lists (which are typically used for secondary navigation) and enhanced lists (which are created after a simple list menu that adds functionality such as search, browsing, or filtering).

List menus are ideal for displaying headings that are longer or have secondary text content.

The iOS Setup uses a grouped list.

Photo Sticker in the home page with a personalized list of ways

The iOS version of the impression notes uses the design of the list navigation hybrid springboard navigation, where the grouped list and the extended list are used in the list navigation.

Pinterest's secondary navigation in search is the enhanced list.

　　Three: Tabbed navigation

Almost all apps use this navigation model as the dominant route. Depending on the operating system, the tab location and design are different. The iOS tab is at the bottom, while Android is at the top.

Other navigation modes and tabbed navigation are used in combination with secondary navigation.

Polyvore's iOS version uses the bottom tab to navigate:

Keep's iOS also uses the bottom tabbed navigation.

Flickr's Android version uses the standard Android tab at the top of the design.

Forever 21 uses tabbed navigation with picture-roulette navigation. Where the picture-roulette navigation is secondary navigation.

Wanelo is used in tabbed navigation with tabbed navigation, which is generally seen in apps.

Snapette uses the leading navigation for tabbed navigation with Pull-down navigation.

Snapette uses the secondary navigation as a drop-down, where the Drop-down navigation is arranged in a list.

The hunt uses the dominant navigation for tabbed navigation with roulette mode.

RIVER Island adopts the leading navigation for tabbed navigation with pavilion and drawer style.

　　Four: museum-style Navigation

The pavilion style is designed to be navigated by displaying items on a flat surface, mainly for displaying articles, recipes, photos, products, etc., which can be laid out as roulette, grid, or slide show.

BBC News's homepage navigation mode

Taobao two hands of the leading navigation using the pavilion-style navigation, the second navigation using the drawer-type navigation.

Taobao used in the secondary navigation is the drawer-style navigation, in the drawer-type navigation has taken the springboard-type navigation 2*3 design.

　　Five: Drawer-type navigation

A navigation pattern originating from Android that is often seen later in iOS. Usually in Android with the master navigation, in iOS often with the other main navigation mode to do the secondary guidance.

The Android version of the impression notes uses the navigation mode of the side drawer.

Foursquare's iOS version uses the side-drawer navigation mode.

　　Six-meter navigation

Instrumentation navigation provides a way to measure whether critical performance indicators (key performance INDICATORS,KPI) meet the requirements. After design, each metric can display additional information. This major navigation model is useful for business applications, analysis tools, and sales and marketing applications.

The perfect wardrobe in the statistics of the secondary navigation in the use of instrumentation navigation.

Instrumentation navigation in Mint and ego applications (examples in the book)

　Seven metaphorical expressions

This kind of navigation is characterized by the use of Web pages to simulate the use of metaphorical objects. This kind of navigation is mainly used in games, but can also be seen in the application of helping to guide people to organize things (such as diaries, books, etc.) and classify them.

Candy Crush in the selection of the use of the metaphor.

　　Eight-Super Menu navigation

This navigation mode is less used in the current app design and is generally used for classification retrieval de secondary navigation. In the mobile Web site navigation design is more common.

In this app, Super menu navigation is used as the secondary navigation. (Sorry to forget the name of this app ...) (☆_☆))

　　Nine down-pull navigation

This navigation pattern is more common in mobile web sites, and navigation in app is not very common.

The iOS version in Iivingsocial is the only navigation with a drop-down navigation.

　　Summarize:

In the future trend of individual think is to dilute the differences between the various platforms, as far as possible through a set of design to seamlessly connect the various applications in different equipment experience, but also save the human and material resources. It is not difficult to find that the design differences between the two systems are converging and shrinking gradually. Therefore, in the selection of navigation should not only be limited to the "standard design", but should be based on the "content" as the first thought to consider.