Example analysis of interactive design: Design of 5 navigation models for mobile applications

Article Description: the navigation model of mobile application is analyzed.

As with websites, mobile apps have their own information architecture, according to the nature of the application and the relationship between the core function interface, to use the reasonable information structure, the navigation model of mobile application has the effect of go-between, a good navigation will make the information structure of application clear and simple and efficient. The navigation model of mobile application basically includes tile page, tab tab, tree form list, nine Sudoku, and the current more popular left list, etc., the following is a brief analysis and comparison of several common navigation models to help us choose the most suitable navigation model to enhance the mobile experience.

Model One: Tile page

Tile page, as the name implies is a piece or a pile of paper, tile display to the user, the user through the left and right blows to switch different pages, it applies to no information level, no organizational structure, and each page of the interface type consistent application, generally in the short refining of functional tool application is more common, Like the weather forecast from iOS. The advantage of the tiled page model is that the number and order of the "page" elements can be changed at will, and the page label height is only 6px, the area of the content display is large; The disadvantage is that the number of pages can not be too large, otherwise browsing up trouble, users need to remember which "point"

Model Two: Tab TAB bar

This type of navigation mode is most common, it will be the bottom of the interface as a navigation area, through the form of tab tab to 3 to 5 tags, each corresponding to different functions. This model is suitable for the application of less functional refining level and frequent switching function; Its advantage is that it can directly the most core tab interface is the most default selected state, users open the application will directly show the user's most concerned about the content of information, such as social application of the flow, mail application of the collection list, and so on, Users can switch tabs directly on most pages and easily jump pages. And clearly tell the user the main function of the application and the current function; The disadvantage is that the number of tabs is limited, IOS HIG does not recommend more than 5 tags, if more than the function menu is unified in the "more" tab; The label occupies an area of 50px height and is always present in most interfaces, occupying 10% of the information display area.

Model three: Tree-shaped list

The navigation model in the form of a tree list is more common in the mail system, which displays each level of functionality through the List form, clicking on the next level of the LIS list, and so on until the final function unfolds. The advantage of this navigation model is that the scalability is large, be able to deal with a large number of categories, functions and project applications, such as shopping classification, such a list of forms in the web is more common, users easy to understand, and can meet the needs of user-defined lists, such as the list of additions, deletions, sorting, etc. The application of the micro-letter plug-in model is also used to show the list. The disadvantage of the tree list is that the hierarchy is deep, all other lists of the parent are not visible in the child list, you must return to the previous level, return back and forth more troublesome, often from a child function to another function when switching to a long way on the road "rushing";

Model 4:9 Sudoku

Nine Sudoku is also a commonly used navigation model, it will be applied to all the first-level functions in the home page, many with a concise or exquisite icon display, at the same time with the function menu text, so the home effect is beautiful, for designers to play a large space. Nine Sudoku navigation for a number of equally important channel applications, especially all-inclusive platform-level products, such as Facebook, QQ friends, everyone, etc. but the shortcomings of the nine Sudoku is also more obvious, the number of its icons to moderate control, too many may appear left and right pagination, Too little may be to stack the menu in order to add in the first screen do not need to function; At the same time, menu icons are arranged in order to move the eye movement, if the number of too many, it will lead to frequent visual positioning, recognition rate down, not as good as the list of neat In the nine Sudoku navigation model from one child function to another to return to the main navigation interface, operating efficiency, so more and more applications by adding a quick operation to quickly return to the home page, such as Facebook click on the central area of the navigation bar to return to the home page The biggest disadvantage of nine is that you need to select features before you can use them. Unable to pursue the most rigid and the most frequent and the only thing, and let it directly to the user, nine Sudoku easy to let product designers stop doing this thinking, in contrast, tab navigation By default check the label to achieve this goal.

Model Five: Left navigation

As path appears, the left navigation can be said to be divorced from the traditional iOS interactive structure, this new navigation model is also more and more popular. It can be said that the left navigation is set the director of the home, take its essence to its dross, has unlimited function expansion, can realize user customization; interface logic clear, physical level clear, visually with exquisite icon icons, eye movements perpendicular to a single, visual burden is small, and unlike nine special home to show navigation, Left navigation will be the first page to show the stage left the most core function, it is only a "subsidiary function", on call, not distracting, but also to impress people; so we can see more and more applications using this navigation mode, such as the latest version of Facebook, QQ friends, National Parks and so on, is the current trend; Of course, the left side of the navigation in some applications are also inadequate, such as the navigation must be called to the top left corner of the "list" icon, and can not be in any interface through some kind of gesture to call.