The purpose of navigation design is to highlight the core of the product and flatten the task path of users. Let users navigate products smoothly, and let users always know their position in the application and how to reach the destination page.
Product navigation system is a way to show the product information structure on the user interface. There is no best design for mobile product navigation, only the most suitable design. Take the most suitable navigation design according to your product.
Looking at the APP in the application market, the navigation design mode is always a combination of several. Let's take a look at several common navigation design patterns.
Description:
1. When the whole experience process of the product is infiltrated by several commonly used functional modules (generally no more than five), it means that users need to switch back and forth between multiple label portals; In order to ensure the efficiency of switching, the modules running through the whole product experience are tiled in the tab position, which ensures the flattening of the user's task path.
2, iOS original App podcast, 5Tab.
Advantages:
1, with good visibility, obvious location and easy to find, allows users to intuitively understand the core functions of the APP;
2, the operability is good, the user can easily touch this area, and can quickly switch between several tags without losing the direction, which is simple and efficient;
3, in line with habits, ios native controls, simple development;
4, high priority, frequent use by users, independent of each other.
Disadvantages:
1, the number of seats is limited, usually up to five (otherwise, other methods need to be combined to use hierarchy and retraction).
2, occupy a slightly larger height space, generally in the form of text+icon.
Description:
Top tab is a navigation mode proposed by Google. In order to be different from iOS, because it is difficult for fingers to reach the top, Google correspondingly proposed a solution of gesture operation: switch tabs by sliding left and right on the screen.
In practical projects, the top and bottom are often used together. Actually, it's an article by holo.
Advantages:
Good scalability: there is no upper limit on the number of tags, but if there are too many, the more pages behind, the lower the penetration rate;
Small occupied space: Compared with the bottom tab, the top tab generally occupies less space (because you don't need to consider finger clicking, you can narrow down the area, just choose icons or words), so you can arrange more space for content display.
Gesture operation is very convenient.
Disadvantages:
Less visibility: This is the result of the smaller space occupied.
Description:
1, point aggregation, aggregation of multiple core functions to the main interface for display, convenient for users to call out. It will appear with other navigation styles (such as labels) and become rudder navigation.
2. Similar to tab navigation, click the combination of integrated navigation and tab navigation, in which one navigation tab contains more operation options, and it can also be understood that the tab contains more secondary navigation tabs. This APP navigation mode can be used when the page has several main contents at the same level and needs a very important and frequently operated entrance.
Advantages:
1, put the main function buttons of similar production content in the middle, and the labels are more prominent;
2. At the same time, the main function label is expanded, which adds some personalized highlights to the design.
Disadvantages:
1, which occupies a slightly larger height space, is generally in the form of text+icon.
Description:
When your application information is flat enough, you can try carousel navigation;
Advantages:
It can ensure the simplicity of the application page to the greatest extent and the most convenient operation;
Disadvantages:
Unable to quickly locate the corresponding paging content;
Description:
1, palace navigation is widely used in the central page of each platform system;
2. Used as a graphic form of content list in secondary pages, or as a collection of a series of toolbar items;
3. The probability of frequent user switching is relatively low;
4, in different articles may be called: springboard (icon card), tiled.
Advantages:
1, which is very extensible and easy to combine different information types (operation bit, advertising bit, content block, settings, etc.). );
2. There are many function entrances that can be displayed within the field of vision, so that users can understand the services provided by the APP as a whole and choose the services they need;
3. The combination of motion and static can display rich information while maintaining visual unity;
4. Cross-platform is not limited by platform.
Disadvantages:
1, each cell is independent of each other, and there is no intersection between their information, so they cannot jump and communicate;
2. When there are too many arrangements, users are easily dazzled and have great pressure to choose;
Description:
1 is a variant of grid navigation, which can be used to present real-time content, such as news, recipes, articles or photos, and can be displayed in grid layout (such as live broadcast and ins) or roulette layout (such as Guevara movies) or in slide mode.
2. Gallery-style design mode is most suitable for presenting frequently updated, visually intuitive and independent content.
Advantages:
1. Compared with list navigation and palace navigation, pavilion navigation has richer forms of expression and more random combination effects (waterfall flow, etc. ) and rich dynamic effects (roulette and slide form).
2. Visually display all contents.
Disadvantages:
1, which is not suitable for displaying top-level portal frames;
2. Too much content is easy to form an interface, which is chaotic;
3. The design effect is easy to be dull.
Description:
1, drawer type is also a navigation method proposed by Google. Because of the existence of virtual buttons, using the bottom Tab on Android will result in a double bottom bar and poor visual experience.
2. Generally, it is used to put functions or cores not commonly used by users into products, or applications that do not need to switch content frequently, such as hiding settings, information, personal information, etc.
3. More used in the design of information flow products, focusing on the display of core content, the user's task path is relatively simple, almost all used to browse the core content of products; As for other low-frequency module entrances, they will be hidden behind the current interface to avoid redundant modules grabbing users' attention;
4. It may be called: extended menu, side navigation, Hamburg navigation in different places;
5. The "2/8" rule tells us that 80% users only use those 20% functions, which is the core function in information flow; If those 80% functions that are not commonly used also occupy the most important position, then users will be disturbed, feel bloated and even give up using the product.
Advantages:
1, saving page display space and allowing users to focus more on the current page;
2. Because the navigation interface is hidden outside the screen, the whole page after expansion is navigation menu content, so there is a lot of room for expansion and personalization;
3. Good scalability, and there is no upper limit on the number of navigation.
Disadvantages:
1, users are hard to find, and the use of secondary functions requires two clicks, which brings operating costs to users to switch functions;
2. The visibility is poor, and the user has not been able to connect the menu key of Hamburg with the sidebar, so the sidebar has low permeability;
3. Not intuitive, not suitable for the main navigation, in the case of frequent operation, the user's experience of constantly opening and closing drawers is not good.
Description:
1, like the purpose of drawer navigation, is to highlight the content. Generally located at the top of the product, click to bring up the navigation menu;
2. It is usually used to filter different types of information under the same information module, or to quickly start some commonly used functional modules without frequent page jumps;
3. The corresponding control in 3.Android is spinner control, but this control is used to switch between different views in the same category, instead of jumping to completely different views. The drop-down menu in iOS is a custom control that can be switched between different categories.
4. There is also a variant of drop-down navigation, that is, two or more levels are displayed in the drop-down menu, which is common in e-commerce products because there are many categories and many filtering conditions.
Advantages:
1, the coherence between menu and interface is better than that of drawer, which is convenient for users to perceive the current position;
Disadvantages:
2. Located at the top of the screen, it is relatively hidden and cannot be combined with gestures, so it is not suitable for frequent switching functions;
3. Considering that the available area of the navigation menu is small, the menu content is generally displayed in the form of a list.
Description:
1, as an information organization framework, is an indispensable information bearing mode in our product design.
2. It is suitable for displaying long titles or titles with secondary text content, and more information can be integrated in each line.
3, similar to grid navigation, often used in secondary pages, by default will not display any substantive content, so usually the app will not be used on the home page;
4. Both 4.ios development and android have ready-made list layout plug-ins and templates.
Advantages:
1, the top-down view conforms to the habit;
5, clear structure, easy to understand, calm and efficient, and can help users quickly locate and go to the corresponding page.
Disadvantages:
1, too many items or unreasonable distribution, making it difficult for users to find them;
2. Not suitable for occasions that need frequent task switching.