With the continuous development of mobile Internet, the concept and strategy of “mobile – centered” are also permeated. The “short, flat, fast” of the Internet often makes designers can not stop for long time to think about usability design, and the best way to quickly find the best way is to fight for us. The “mobile end interface design pattern” is an enforceable solution based on the wisdom and attempt of a large number of designers to help us solve the vast majority of the common mobile interface design requirements. So, here I describe the design patterns of the mobile terminal and attach our common front-line mobile end products. As a case as an explanation. Hope to provide the foundation and support for the vast number of designers in the design plan.

First, the definition of navigation design

Navigation design can also be called framework design, focusing on the core points of the product (business layer), making the task path flat and user friendly as much as possible, classifying the user’s most commonly used behavior (user layer), allowing these functional elements to be obtained and used by the user in the most easy way, in the mobile world. In surface design, it is a very important module that can be bold to say: a mobile end interface design is the reasonable assembly of different types of navigation design in different ways.

At present, the navigation design of mobile interface design on the market is divided into 6 basic navigation modes (desktop, option card type, list type, side drawer type, drop-down menu type, point gathering). In order to continuously meet business and user needs, new hybrid navigation modes are poured out (rudder type, sowing type) and so on. . Designers continue to upgrade and innovate in the basic navigation mode.

Two. Type of navigation design

According to the way of operation, we can roughly divide the navigation design into three different types: global, instantaneous and mixed.

1. global navigation

Just open the application and show the various options in the navigation straightforwardly. In other words, without function, you can see and pass through various functional entries. Usually fixed in the page, occupying a certain area of the page. Commonly used include: desktop, tabular, tabular (following chart)

Skip format / Desktop

It usually occupies most of the area of the screen.

Label / option card

The commonly used navigation modes at iOS and Android are standard tab navigation and other new innovations.


More words and states of description and change.

2. instantaneous navigation

Click on an entry (icon/ title / arrow) or gesture operation to show the menu options. The entrance is relatively small. When the user needs it, it is a clever way to break the screen boundary and use the visual level of the page. Commonly used include: drawer type, menu type, point aggregation.

Drawer / side side

Click on the top left corner of the head, the left side into the function entrance.

Drop-down menu

Click add, pop down the function option.

Point polymerization

Click on an entry, scatter around it, and display the function entry.

3. mixed navigation

It has other functions that can directly display the function entry and combined with the need to operate. In other words, the combination of global navigation and instantaneous navigation usually includes rudder type, wheel type and so on.


Global navigation – bottom tab column + instant navigation – point poly = rudder navigation


Global navigation – Desktop + instant navigation – drawer type = carousel navigation

Three, the level of navigation design

Various types of design patterns in navigation design are free to combine and find a suitable combination based on business needs and user experience. We usually choose a navigation as the main framework, and other navigation as an auxiliary.

Main navigation: switching from one main category to another primary category, and switching of main categories. Secondary navigation: two level navigation in selected modules.

The level of navigation function (micro-blog: hybrid navigation rudder type as a first class navigation + hybrid navigation – rotation as the two level navigation).

Level between navigation and navigation (hungry: Global Navigation – label for first level navigation, mixed navigation – broadcast as two level navigation; salted fish: hybrid navigation – rudder for first level navigation, global navigation – desktop as two level navigation)

Four, how do we distinguish global navigation, instantaneous navigation or hybrid navigation?

Do you need hand gestures, display the function entry – Global; need to click or gesture – instantaneous; display part of the function entrance, and also need to click or gesture to expand the residual function – mixed type.


Five, what are the requirements of good navigation design?

A method of skipping different pages in an application. In a limited screen, we can’t throw the content into the user’s eyes, so the navigation design must automatically promote or guide the user’s jump behavior.

The relationship between the jump entry and the contents contained. Just providing a list of jump entries is not enough. What is the relationship between the entrance and the buttons? Do you have a focus on business functions? The information conveyed is very necessary for users to quickly understand a product and use a product.

The relationship between structured content and current browsing pages. Help users quickly understand which jump entries can best support their tasks or the goals / destinations they want to achieve.

This article is a brief introduction to the various types of navigation design in the mobile UI design mode. It is easy for designers to understand that we divide it into three major navigation modes (global, instantaneous, mixed) in a simple way, and it is not easy to make a navigation design that is close to the actual business and a good user experience.

1 thought on “A summary of the basic knowledge of the ultra comprehensive navigation design”

Comments are closed.