Menu design for mobile apps

Label type

Applicable: The number of entry options is not large, and users need to switch frequently between options to perform tasks.

Note: This mode is not suitable for too complex and unstable structures.

Tabbed navigation is a popular navigation mode in mobile applications, and it is suitable for frequent jumps in the middle of related kinds of information. This kind of information priority is higher, this kind of information priority is higher, the user uses the frequency also relatively high. Its hierarchical framework, general information is clearly divided into several categories, this classification according to the logic and importance, generally control within 5. The other sections are aggregated into one category label. The usual way to do this is through a collection of tabs, so that users can quickly scan and understand the core features of the app when they open the app for the first time. Tag navigation uses several tags that are always rendered on the screen as entry into a particular touch class, information is grouped by designers and is clearly divided into categories that are independent of each other. Tags can visualize the user's current position, through the metaphor of the label, the user can be very good to achieve the switch between the pages without losing direction, simple and efficient.

Radiation type

Applicable: Clear classification, the entrance is independent and fixed.

Note: not suitable for use in cross-category.

Radiometric navigation, is the application of all the information to separate classification, so that the information is mutually exclusive, the categories have their own independent entrance, the basic juxtaposition between the content, these portals are aggregated in the Center home page, which is usually the homepage. After a user enters a category branch, it can only process the contents of the branch and cannot jump between branches. If you want to jump, you must return to the center page. This approach is particularly well suited to the tool interface, where each tool has its own internal set of systems. The problem is that users need more action paths and are not suitable for multitasking.

The most common type of radiometric navigation is x Gongge.

List type

Applicable: It is more suitable to show the hierarchical structure with distinct levels.

Note: Control the number of lists and how to group them.

In a list-based navigation, the list that is generally at the top is more important than the list information that is located below. When the list of information is classified to a certain number of times, you also need to group. List navigation is a form of a table container, loaded with text or icons, and point to the relevant content of a navigational form. It categorizes the content in the form of a list, which is the title of the content to which it is directed. The caption is sometimes supplemented with an icon. List navigation combs the information into multiple entries, there is no conceptual intersection between entries, the general number is kept within 15, and more than 15 of them are best at another level. If you do not sub-level, the items can be grouped into blocks, visually processing the distinction, it is best to define a name for each group.

? ? Tiled Type ? ?

Applies To: Tile page for few but good content and freely browse the page, easy to use sliding, the interface occupies less space.

Note: You cannot jump to a non-adjacent page immediately, not for more page loading.

Tiling is a simple hierarchical framework, which is suitable for a relatively strong overall content, in an interface can fully represent a piece of content, and multiple content is a parallel relationship. The general interface is controlled within five and five of the total. This kind of navigation is similar to a panorama tiling in front of us, the interface is only a complete display of one piece of content. Tiled, layout for horizontal content, can be displayed in a linear manner, make full use of the mobile phone cable screen space, so that all the information has the opportunity to display, while allowing users to focus on the current page. The number of tiled pages can not be too much, otherwise browsing trouble. In order to allow the user to browse the overlay page to maintain a clear sense of direction, at the bottom of the tiled page to add a standard page paging control, the page indicator will be displayed as n dots in several views, from left to right, small dots represent the order of the opened view, with a different color from the other pages of the highlight represents the current view. Page indicators help users to clearly understand the number of current views and their order of arrangement.

Drawer type

Applicable: An app that is centered on the current content.

Note: Hidden navigation content requires a better way to jump out, such as gestures.

Drawer navigation is to hide the classification content in the hierarchy frame. The drawer navigation can be well compatible with various classification methods without affecting the application's interface effect. The drawer-type interface is hidden from the screen, theoretically it can be in each direction of the four sides of the screen, now the most used is the left and right side of the screen, expand the screen size of the plane.

Dot-Poly

Application: Need to extract the core points to show the characteristics of the product.

Note: After aggregation will make part of the navigation hidden, need good guidance.

When the hierarchical framework is complex, and several parallel modules have the core content that users frequently use, we will consider using point-and-click Navigation, which occupies the bottom line of the page different from the traditional tab bar, but gathers the portals through a point, which can be implemented in a more interesting way, and is not limited by the number. , and flexible, also make the interface control more open.

Menu design for mobile apps