Comparison and summary of APP navigation design

2018-07-29

Comparison and summary of APP navigation design

Author: two O 17  

The purpose of navigation design is to highlight the core of the product and to flatten the user’s task path. So that users can smoothly navigate in the product, allowing users to always know where they are in the application, and how to go to the destination page.

Product navigation system is the way to display the information structure of the product on the user interface. The design of mobile terminal product navigation is not the best, only the most appropriate way to take the most appropriate navigation design according to your product.

Looking at the APP in the application market, the mode of navigation design is always used in several combinations. Let’s take a look at several common navigation design patterns.

01 bottom label (Tab) navigation

Description:

  1. When the entire experience flow of the product runs through several common functional modules (generally not more than 5), it means that the user needs to switch back and forth between the multiple label entrance; in order to ensure the efficiency of the handover, the module that runs through the whole experience of the product is spread in the Tab Bar position, ensuring the flat of the user’s task path.
  2. IOS is original App Podcast, 5Tab.

Comparison and summary of APP navigation design

Advantage:

  1. Its visibility is good, its location is obvious and easy to find. It enables users to understand the core functions of APP intuitively.
  2. Good operation, users can easily touch the area, and can quickly switch in several labels, and will not lose direction, simple and efficient.
  3. In accordance with the habit, IOS primary control, the development is simple;
  4. Priority is higher, users are frequently used, and they are independent of each other.

Shortcomings:

  1. The number of accommodating is limited, and there are generally five.
  2. Occupying height space is slightly larger, usually in the form of text + icon.

Comparison and summary of APP navigation design

02 top label (Tab) navigation

Description:

The top Tab is raised by Google. In order to distinguish a navigation mode from iOS, because the finger is hard to touch at the top, Google correspondingly proposes a gesture operation solution: switch the label by sliding around the screen.

In actual projects, the top and bottom are well used.

Comparison and summary of APP navigation design

Advantage:

  1. Scalability is good: there is no upper limit for the number of tags, but too much, the lower the permeability of the back page will be.
  2. Occupying small space: compared to the bottom Tab, the top Tab generally occupies less space (because you do not need to consider the finger click, so you can reduce the area, only icons or text can be used), so that more space can be arranged for the content.
  3. Hand gestures are very convenient.

Shortcomings:

Visibility is slightly worse: This is the consequence of smaller space occupying areas.

Comparison and summary of APP navigation design

爱上海419论坛 爱上海