Mobile app Design: An excellent app navigation design format

Article Description: the design of the navigation is worth pondering in the development of the APP design, because of the limited screen size of the mobile device, especially the smartphone, designers usually leave the screen space as far as possible to the main content, and the excellent navigation design makes the user easily reach the destination without interfering and confusing the user.

"Guide" in order to display more content in the range given by the mobile phone screen, excellent navigation bar design will play a key role, for different operations also when the local choice of different design options.

The design of the navigation is worth pondering in the development of the APP design, because of the limited screen size of the mobile device, especially the smartphone, designers usually leave the screen space as far as possible to the main content, and the excellent navigation design makes the user easily reach the destination without interfering and confusing the user.

　　Classic Navigation: Tabbar

It is unknown who invented the Tabbar navigation, but I believe everyone agrees that Apple will spread it. Not only do many Apple's official apps use this design, but Apple also strongly recommends that app developers take this approach first. In some ways, Tabbar is basically the standard design of navigation.

Tabbar's advantage is obvious, the user completes the switch the cost is very low, only needs one clicks the operation, but puts at the bottom of the screen to the main content the visual impact may say is smallest, so the user will not be able to browse the main content to be subjected to excessive interference. As for the disadvantage is also obvious, that is subject to screen width restrictions, usually 4 to 5 functional items of the switch will be more appropriate, too many words will significantly improve the user's switching costs.

　　Excellent challenger: drawer-style navigation

Tabbar is not perfect, it does not apply to too many toggle items. The drawer-type navigation solves this problem by vertically arranging the toggle items. However, it also means that it cannot appear on the screen with the subject content at the same time.

In most designs, the switch is called by clicking on the button in the upper-left corner of the screen, and some can be done by sliding the finger to the right. A simple sliding animation, like pulling out a drawer, "drawer-style navigation" this name should be derived from this. Breakthrough the number of restrictions, to a greater extent, the release of the main space, but also increased operating costs. In the author's personal sense, if the main functional items can be organized in 4 to 5 items, Tabbar design method may be better, otherwise, should be a priority in the drawer-type navigation.

　　Design for frequent operation: Sliding navigation

Navigation does not necessarily occur only between feature items. For example, a news class application needs to be toggled between different categories of news. Generally speaking, the frequency of this switch is higher than the function switch, the number of switches will be more, like the common News category has 7, 8 kinds. I remember in the "NetEase News" early version of IOS using the "drawer-style navigation" mode of the news category of the switch, this way in high frequency switching requires too many operations, when the need for continuous switching between adjacent categories is a lack of continuity of operation. The new IOS version of "NetEase News" has redesigned the news category switch.

Users can switch between different categories by sliding their fingers around the content page. This way the user experience has improved a lot, especially in the continuous switching mode of continuity is relatively strong, the main page of the transition is more smooth, will produce a more fluid experience. Of course, there will be some flaws, such as a slide can only switch to adjacent categories, to directly switch to the corresponding category can be clicked on the top of the list of categories, but because of too many categories, sometimes you may need to slide the list of categories to complete the operation. Overall, however, this design approach is well worth the reference when there is a need for frequent switching between similar attribute categories.

　　How to go farther?

The iOS system uses small dots to mark the current screen, cool iOS version of this design, and apply it creatively to the subject content navigation. It says that, like Tabbar, the design of a horizontal toggle is limited by the width of the phone's screen, and by using a smaller footprint, Youku breaks the limit, and when the finger touches the dot chart, the category hint is displayed and, because it cannot be seen directly, it may not be able to press to the correct category. You usually need to move your fingers, but in terms of the author's experience, the process experience for this category of search is very smooth and basically doesn't bother you. Only the category hints are small, and some visual angles may be blocked by the manipulated fingers, and if you can display the category hints in a more visible place, such as displaying an indication in the title, you may be able to further enhance the user experience.

Youku's innovative approach to navigation has a good effect on the switching of categories, does it also apply to switching to functional items, and is it possible to replace "drawer" navigation in some way? features and categories, relative to the "movie", "TV", " Sports News "This user is already very familiar with the vocabulary, functional description usually has a higher cognitive cost, if it is replaced by the indicator, will undoubtedly further increase the cognitive cost." and features often do not have similar properties, the use of the same icon to replace it does not conform to the cognitive habits, and the use of different icons will make the interface too messy. There seems to be a lot of problems and we need to think more.