APP commonly used 8 kinds of navigation form

While the life and death of an app is not determined by the navigation, there is no doubt that the choice of navigation mode plays a large part in the product user experience. As far as navigation itself is concerned, there is no difference between good and bad, depending on which one is suitable for your app. Below is my list of some common mobile navigation mode, the next will be one of its examples (Note: the important mode will focus on the analysis, the rest of the abbreviated, slightly longer, do not like to skip)

1, tabbed

Tabbed navigation is recognized as the most classic navigation mode on the iOS platform, look at the market, almost 80% of the apps are in the use of can be known. Tabbed navigation focuses on the display of parallel space, which has the advantage of applying to multiple content systems with similar levels of importance (hierarchical relationships), the ability to frequently switch between different pages, the bottom of the switching cost, just one click; the disadvantage is that it takes up a certain amount of space in height and the number of tabs is limited to a maximum of 5 tabs.

Taobao, is the standard form of use of tabbed navigation, each tab as a navigation category in the tab bar (note that they are nouns). It can be considered a variation of the standard form (there are other variations, more on that later), and although there are also 5 tabs, the tab in the middle is not used as navigation, but is a call-to-action button. Behavior call button mainly emphasizes the quick use of an important function, the function needs to be the core of the application and the most commonly used functions, high priority. For example, instagram, whose goal is to share the pictures you snap at any time in a fast, fabulous and fun way, focuses on being able to snap anytime, anywhere. That's why it's so important to have "take a picture" on the tab bar as a call-to-action button.

However, some apps don't place the call-to-action button in a way that makes sense. As shown in Figure 3 below, although article writing is a core function, it seems great to have it as a button in the tab bar to visually emphasize it and reduce the operational load. However, it ignores an important issue. In terms of the usage environment, article or document writing needs to be done in a quiet and focused environment, but mobile apps naturally have the problem of many interruptions and lack of focus. And typing hundreds of words on a cell phone can be a pain. For mobile users of this product, it may be more important for the user to consume the content than to perform the action.

There is also a common variant of tabbed navigation, the traditional tabbed + dot-poly. Here first specifically about the point of convergence, the most familiar point of convergence is the classic path structure, that is, the drawer navigation + point of convergence, as shown in the following figure - before the revamp of the illustration, its purpose is to the most frequent use of the user's core functionality of a number of points of convergence in the main interface to display, easy for users to use at any time to call out. However, nowadays, the applications that use point-clustering alone are less and less, even path has also adjusted this traditional point-clustering style, and turned into a point-clustering structure that depends on labels, as shown in the following figure after the revision of path. There are style 1 and style 2 in the figure below, is also a different presentation of this form. Their **** the same point is, using the same navigation portal, for multiple different operations of the same level of functionality, most of them are 2-5 different operation options, of course, there will be more, such as the figure below the Sina microblogging, click on the "plus" entry, there are more functional options, and these functions have similar priorities.

In fact, in Android 5.0, a more common manifestation of this kind of point-clustering is the hover response button, which represents the main operation of the app. It represents the main action in the app. It's just that there are limited scenarios where it can be used, and it's not ideal for real-world applications.

Second, the drawer

The purpose of the drawer navigation is to bring the user a more immersive experience. It is characterized by "reading" as the king, click to switch less, focus on the main information itself. In terms of performance, drawer navigation is very consistent with the two-eight rule of products, that is, only 20% of the product features are commonly used, so it should be highlighted, and the remaining 80% are not commonly used, so it is hidden. Instead of emphasizing the switching of hierarchical relationships like tabbed navigation, it highlights important and core functions. Some other advantages of drawer navigation are that the navigation tabs stowed in the side navigation can be 5 or more, saving screen space. The disadvantage is that the navigation switching cannot be done quickly and the operation cost is high.

Regarding drawer navigation, there is also a difference in the use of Android and iOS platforms, you can see my other article "about Android and IOS interaction on those things", I will not repeat here. Drawer navigation is more commonly used on Android than ios. Since there is no specific design specification for drawer navigation on ios, it is used more casually and the presentation is not constrained.

If the drawer navigation and the home page are judged on the basis of spatial location, there are three main styles of performance. The first is floating, that is, the navigation drawer is on the upper level of the home page, and the drawer is opened through the gesture of sliding or clicking, and the drawer partially obscures or covers the content of the original page, as shown in Figure 4, which is a style that mostly occurs on Android. The second is the overlay style, that is, the navigation drawer is located at the bottom of the home page, open the drawer, the original home page will slide to the right side of the screen, revealing the navigation drawer at the bottom of the home page, as shown in Figure 5 below, this style is very common on ios. The third is the embedded layer, that is, the navigation drawer and the home page are on the same layer, by sliding, panning or clicking to open the drawer, the original page content partially pushed out of the screen, as shown in Figure 6 below (note that there is no shadow at the interface between the navigation and the home page). The third style often has a distortion as shown in Figure 7 below, which means that when opening the side drawer, the embedded drawer not only pushes the previous page to the right, but also pushes it to the back using a 3D effect. Understanding the different styles can be used at the discretion of the design.

Third, tabbed

For tabbed navigation, different platforms have different design rules, I will not say much about the Android platform, please move to the "Android and IOS interaction on those things" have detailed instructions. Today we mainly talk about the performance of tabs on ios, the essence of tabs is to realize the switching of different views or contents within the container. Although for the tab itself, ios has no specialized specification constraints, but this does not prevent the majority of designers from free play. There are three main forms of tabs on the market today: segmented tabs, fixed tabs, and sliding tabs.

Segmented tabs: are made up of two or more segments of the same width, normally no more than 4, with a visually obvious stroke button. Segmented tabs are often used as a secondary navigation to re-categorize the content of the main navigation, either at the bottom of the top navigation bar or directly on the navigation bar, as shown in the following figure. The tabs are interconnected and can only be switched by clicking on them, which is less efficient to operate.

In addition, there are fixed tabs and sliding tabs, both of which can be directly clicked or swiped left and right to switch options, and can be used in both primary and secondary navigation. The difference is that sliding tabs can have more options and can be navigated directly by sliding your finger to find a category, which is suitable for applications with many related categories, such as the e-commerce site in the following figure.

Fourth, drop-down menu

Nowadays, drop-down menu navigation is not commonly used. Drop-down menu and navigation drawer, is to highlight the content of the main navigation mode, generally located at the top of the product, by clicking on the call-out navigation menu. As the navigation menu is located at the top of the screen, it is not suitable for combining gestures and has a large operation load, so it is not suitable for functions that need to be switched frequently and can save screen space to a certain extent. In general, the drop-down menu is easy to be replaced by a slide tab, and slide tabs can be combined with gestures, the use of more efficient, which is the reason why the drop-down menu is rarely used, unless your drop-down menu options have a very clear distinction between the priorities. For example, Figure 8 shows the Sina Weibo home page as the default selection, displaying all the user's relevant tweets. Normally, the user just needs to browse all the way through, and rarely needs to click to switch, unless they want to filter some specific tweets, which is easy to differentiate by prioritizing the content. Similarly, in Figure 9, users pay more attention to and are more interested in grouping content by item dimension, which is therefore represented by drop-down menus. In addition, most of the menu is in the form of a pop-up box after clicking, there are also some from the bottom of the slide out of a new page to call up the menu, the following figure in Figure 10.

Fifth, the Palace format

Palace format navigation, is a similar to the cell phone desktop application entry navigation. Each entrance is often a relatively independent information content, the user enters an entrance, only to deal with the content related to this entrance, if you want to jump to other entrances, you must first return to the entrance to the general interface. This kind of navigation is often used in tool apps, and it has the advantage of strong functionality expansion, which can increase multiple entrances. The disadvantage is that a single page is weak in carrying information, the hierarchy is deep, and it is not suitable for frequent task switching. The beauty camera in the following figure is the standard palace format structure, each function is similar to an independent app, and as a first level of navigation, this form of expression is now less and less. The remaining three illustrations, belonging to the palace format of a deformation, I call the data portal, this only as a variety of big data portal navigation mode is now more as a secondary navigation, especially the platform products.

Six, list

List navigation is also a very common navigation mode, pure list navigation is rare, usually with other navigation modes used together, mostly as a secondary navigation. The list can be placed in the picture, title or details of the text, etc. to display information, the list itself is a very efficient carrier to convey information, so the use of the list should pay attention to, each list of the screen space occupied by the number of lists, as well as how many lists can be displayed on each screen, and so on. Figure 1-1 shown below uses a list of grouping mode, Figure 2-2 in the list of each item of information may affect the user's click on the conversion, so such as this form of list, the details of the information is very important. Figure 1-3 and Figure 1-4 for the second level of the list, click on the list of small symbols on the right side, you can expand or hide the information, which is convenient for users to find the information and quickly locate, in most cases, click on the right side of the small symbols may appear in the shortcut editing mode or part of the details of the information, which is convenient for users to edit or browse directly. And clicking on the whole list will usually lead to a new level of detail page. Therefore, designers should pay attention when designing.

VII. Illustrative

Illustrative is a more visual navigation, it can update the picture in time according to the change of the page content, suitable for picture-based content, such as news, food, travel, video images, etc. are often used, often as a secondary navigation. As the picture may need to be updated often, so you need to configure a fixed column or title to prevent the constantly updated picture so that users can not find the entrance. This form of navigation will often use a grid layout, as shown in the figure below, each line will basically have 1-3 units of illustration, different grid layout determines the number of illustrations per screen, so the user browsing efficiency and click-through conversion rate will be different.

Eight, slide

Slide navigation, applicable to the picture or the whole piece of content side by side display, the user through the finger left and right slide to switch the current content. Under normal circumstances, the number of slides should not be too much, it is best to control the 7-8 or less, to avoid user fatigue. As shown in the figure below, it is best to provide visual cues in the design of the slide show so that users know exactly where they are and the number of slides, for example, by adding a paging identifier or a metaphor for the next picture.