APP commonly uses 8 navigation forms.

Although the life and death of an application is not determined by navigation, there is no doubt that the choice of navigation mode occupies a large proportion in the user experience of the product. As far as navigation itself is concerned, there is no difference between good and bad, depending on which application you are suitable for. The following are some common mobile navigation models that I have listed, and I will illustrate them one by one (note: the important models will be focused on analysis, and the rest will be short and slightly longer, and I don't like to skip them).

1, label type

Tag navigation is recognized as the most classic navigation method on the iOS platform, and almost 80% of applications on the market can know it. Tag navigation focuses on the display of parallel space. Its advantage is that it is suitable for multiple content systems and its importance is similar (peer-to-peer relationship). It can switch frequently between different pages and switch the cost base with one key. The disadvantage is that it takes up a certain height of space and the number of labels is limited, up to five.

Taobao is the standard form of tag navigation, and each tag is placed in the tag column as a navigation classification (note that it is a noun). It can be regarded as a standard deformation form (there are other deformation forms, which will be discussed later). Although there are also five tabs, the tab in the middle is not used as navigation, but a behavior call button. The behavior call button mainly emphasizes the quick use of an important function, which needs to be the core and most commonly used function of the application and has a high priority. For example, instagram, its goal is to share the pictures you capture at any time quickly, wonderfully and interestingly, with the emphasis on being able to capture them anytime and anywhere. Therefore, it is necessary to put "photo" as a behavior call button on the tab bar.

However, some applications are unreasonable for the placement of behavior call buttons. As shown in Figure 3 below, although writing an article is the core function, it seems great to use it as a button in the tab bar, which can be highlighted visually and reduce the operation load. However, it ignores an important issue. From the use environment, the writing of articles or documents needs to be carried out in a quiet and focused environment, but the mobile app naturally has many problems of interference and inattention. And it is also a painful thing to enter hundreds of words on the mobile phone. For mobile phone users of this product, it may be more important for users to consume content than to perform actions.

In addition, there is a common variant of tag navigation, which is the traditional tag+point aggregation. Here, let's talk about aggregation in detail. The most well-known point aggregation is the once classic path structure, that is, drawer navigation+point aggregation, as shown in the following figure-the schematic diagram before modification. Its purpose is to display the most frequently used core function points in the main interface, which is convenient for users to call out at any time. However, the application of point aggregation alone is becoming less and less. The connection path has adjusted this traditional point aggregation and turned it into a labeled point aggregation structure, as shown in the following figure. There are styles 1 and 2 below, which are also different manifestations of this form. They are similar in that they use the same navigation portal to perform different operations of multiple functions at the same level, most of which are 2-5 different operation options, and of course there will be more. For example, Sina Weibo in the picture below, click the "plus sign" entry, and more function options will appear, and the priority of these functions is similar.

In fact, in Android 5.0, the more common form of this point aggregation is the floating response button, which represents the most important operation in this app. However, the current application scenarios are limited and the practical application is not ideal.

Second, the drawer type

The purpose of drawer navigation is to bring users a more immersive experience. Its characteristics are that "reading" is king, there are few clicks to switch, and it focuses on the main information itself. From the form of expression, drawer navigation conforms to the "28" rule of the product, that is, only 20% of the functions in the product are commonly used, so it should be highlighted, and the remaining 80% are not commonly used, so it is hidden. It does not emphasize the switching of peer-to-peer relationship like tag navigation, but highlights important and core functions. Another advantage of drawer navigation is that side navigation can store more than five navigation labels, saving screen space. The disadvantage is that navigation switching cannot be completed quickly and the operating cost is high.

Regarding drawer navigation, there are also differences in the use of Android and ios platforms. You can read my other article "Interaction between Android and IOS", so I won't go into details here. Drawer navigation is used more frequently on Android platform than on ios. Because there is no special design specification for drawer navigation on ios, it is more casual to use and unconstrained to express.

There are three main styles based on drawer navigation and the spatial location of the home page. The first style is the floating layer, that is, the navigation drawer is on the upper layer of the home page, and the drawer is partially covered or covered by the gesture of sliding or clicking, as shown in Figure 4 below. Most of this style will appear on Android. The second type is superposition, that is, the navigation drawer is located at the bottom of the home page. After the drawer is opened, the original home page will slide to the right of the screen, and the navigation drawer will be displayed below 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 will be pushed out of the screen, as shown in Figure 6 below (note that there is no shadow at the junction of navigation and home page). The third style often has the following variation of Tu Tu 7, that is to say, when the side drawer is opened, the embedded drawer not only pushes the previous page to the right, but also pushes it back with 3D effect. Know that different styles can be used as appropriate in the design.

Third, the tab type.

Different platforms have different design rules for tab navigation. I won't say much about the Android platform. For details, please see "About the Interaction between Android and IOS". Today, I will mainly talk about the performance of tab on ios. The essence of a tab is to switch between different views or contents of a container. Although tab itself has no special specification constraints, it does not prevent designers from playing freely. At present, there are three main forms of tab in the market: segmented tab, fixed tab and sliding tab.

Segmented tab: it is composed of two or more segments with the same width, generally no more than four segments, and there are obvious stroke buttons visually. Segmentation tab is usually used as secondary navigation to classify the main navigation content again, either below the top navigation bar or directly on the navigation bar, as shown in the following figure. Tags are interrelated and can only be switched by clicking, so the operation efficiency is low.

In addition, both the fixed tab and the sliding tab can be clicked directly or slid left and right to switch options, and both primary and secondary navigation can be done. The difference is that the sliding tab can have more options, and the classification can be found directly through finger sliding navigation, which is suitable for many related applications, such as the e-commerce website shown below.

Four, the drop-down menu type

Now drop-down menu navigation is not often used. Drop-down menu, like navigation drawer, is a navigation mode that emphasizes content, and is generally located at the top of the product. Click to bring up the navigation menu. Because the navigation menu is located at the top of the screen, it is not suitable for combining gestures and has a heavy operation load, so it is not suitable for functions that need frequent switching, which can save screen space to some extent. Generally speaking, drop-down menus are easily replaced by sliding tabs, which can be combined with gestures to achieve higher efficiency, which is why drop-down menus are rarely used now, unless there is a clear priority distinction between your drop-down menu options. For example, in the following figure, the homepage of Sina Weibo in Figure 8 is selected as the default item, showing all Weibo related to users. Under normal circumstances, users only need to browse all the time, and rarely need to actively click to switch, unless they want to filter some specific Weibo content, where the priority of the content is easy to distinguish. Similarly, the same is true of fig. 9. Users are more concerned and interested in content grouping with items as dimensions, so they use drop-down menus to express it. In addition, most menus appear in the form of pop-up boxes after clicking, and some slide out from the bottom to bring up new page menus, as shown in the following figure: 10.

Verb (abbreviation of verb) palace format

Palace navigation is a navigation method similar to the mobile phone desktop application portal. Each portal website is often a relatively independent information content. After users enter a portal, they only deal with the content related to this portal. If you want to jump to another portal, you must first return to the portal common interface. This kind of navigation is often used in tool apps, and its advantage is that it has strong expansibility and can add multiple portals. The disadvantage is that a single page carries weak information and is deep in level, which is not suitable for frequent task switching. The beauty camera in the picture below is a standard palace format structure, and its functions are similar to an independent app, which is used as a first-class navigation. This form of expression is becoming less and less now. The other three diagrams belong to the variation of palace format, which I call data portal. This navigation mode, which only serves as the entrance of all kinds of big data, is now more used as a secondary navigation, especially as a platform product.

Six, list type

List navigation is also a very common navigation method. Pure list navigation is rare, and it is usually used together with other navigation methods, mostly as secondary navigation. You can put pictures, titles or detailed text in the list to display information. The list itself is an efficient carrier of information transmission, so when using the list, we should pay attention to the screen space occupied by each list and how many lists can be displayed on each screen. The figure 1- 1 shown below adopts the grouping method of lists. Every item of information in the list in Figure 2-2 may affect the user's click conversion, so as a form of lists, detailed information is very important. Figures 1-3 and 1-4 are two-level lists. Click on the small symbol on the right side of the list to expand or hide information, which is convenient for users to find information and locate it quickly. In most cases, clicking on the small symbol on the right may lead to a quick editing mode or some detailed information, which is convenient for users to edit or browse directly. Clicking on the entire list usually leads to a new detail page. So designers should pay attention when designing.

Seven, graphic types

Graphical navigation is a relatively intuitive navigation, which can update pictures in time according to the changes of page content. It is suitable for photo-based content, such as news, food, travel, video pictures, etc., and is often used for secondary navigation. Because pictures may need to be updated frequently, it is necessary to configure a fixed column or title to prevent users from finding the entrance because of the continuous updating of pictures. This form of navigation often adopts grid layout. As shown in the figure below, there are basically 1-3 graphic units in each row. Different grid layouts determine the number of icons accommodated in each screen, so the browsing efficiency and click conversion rate of users will be different.

Eight, slide.

The navigation mode of slides is suitable for the parallel display of pictures or the whole content, and users can switch the current content by sliding their fingers left and right. In general, the number of slides should not be too many, and it is best to control it within 7-8 to avoid user fatigue. As shown in the figure below, it is best to provide visual cues in the design, so that users can clearly know where they are and the number of slides, such as adding a paging identification code or a metaphor for the next picture.