Tree structure is a common structure diagram in product design. Product managers will use it to shape the frame diagram of the product.
▲ Tree structure
Explained in Wikipedia:
Tree structure (English: Tree diagram), also translated Tree structure, or Tree diagram is a way to show the structural properties of hierarchical structure in the way of images. Its name comes from the relationship between structures represented by the symbol of a tree, although in the presentation of the image, it is an upside-down tree, with its root at the top as the beginning of the data, while the data below is called the leaf.
The framework structure of the product consists of a stack of navigation bars.
For a software product, the navigation bar maps the tree structure of the software system.
Similarly, a navigation bar is also a multi-nested mechanism. The navigation bar includes a secondary and tertiary navigation bar structure, and each navigation bar at the next level can be returned to the first level.
Each navigation bar makes it clear that the content or value offered behind it is completely different. The navigation bar is like the flesh and blood skeleton of the product. Only when the navigation bar is set can the design of the next sub-function be carried out.
A good navigation bar is attached to a tree structure, highlighting primary and secondary functions; At the same time, flatten the user usage path; Either function can be found in the navigation bar.
There are different navigation bar designs on both PC and APP, and product managers most want to focus on the simplest navigation bar in their work: can it be easy to develop and still be very practical?
I organized the navigation bar section under simple design, mainly for product managers who are struggling with what kind of navigation design to do, fast, less error, and easy to develop and implement navigation bar.
** Mobile navigation bar design **
Navigation bars are also limited in how they can be designed; Here I list the following eight in turn
1. Bottom navigation bar
The bottom Tab bar is the most common, and if you’re going to make a product from zero to one, you can’t go wrong with this one. The display forms include text +icon and pure icon. Most of them are text +icon, which may reduce the memory burden of users.
▲ App navigation bar design at the bottom
Advantages: The TAB navigation bar allows users to switch between different modules quickly.
** The number of bottom navigation bars needs to be strictly controlled and the order carefully considered; For example, tabs that require the user to operate frequently are placed in the middle; Applets should have no more than four tabs; You can’t have more than 5 apps. Too many will easily lead to delayed operation.
TAB navigation bar must determine the core functions and services of the product; Consider highlighting the functionality in the middle and designing the Tab separately to encourage users to use it more often. The following is baidu, Zhihu, baby tree to the core business as TAB design
▲ App navigation bar
For example, the tabs for asking questions in the community and punching in attendance are concentrated in the middle or even in the middle of the screen, which can highlight the importance and facilitate user operation to increase the click rate.
▲ Community TAB
2. Top Tab bar
If the same function has different secondary functions; Or there are subdivided contents under the content section, then the top TAB is the simplest and most direct way to divide;
Display different categories of information under the same module or screen information of different modules. General secondary navigation supports sliding left and right; In the small program can be directly click;
** Advantages: ** can facilitate quick browsing of secondary content, but also convenient for users to quickly switch operations
** Disadvantages: ** Product managers should consider the secondary order logic; At the same time, it needs to provide left and right swiping interaction after passing the screen to compensate for the scene where the content is blocked by the screen.
**3. Side (rectangular) navigation bar **
This type of navigation bar is mainly reflected in the products of immersive usage scenarios. Such as sleep, weather, map navigation, reading such products are suitable. Features the user’s main operating scene on the home screen; Few frequencies have operational requirements for sub-functions;
▲ Sidebar TAB design
Advantages: the advantages of drawer navigation is to save page display space, make the home page more concise and beautiful, so that users will focus more attention to the current page.
Disadvantages: ** is that the sub-function entrance is relatively hidden, users are not easy to find; Using the second function requires a second click, increasing the user’s cost and low conversion rate
4. Tabular navigation bar
If there are more than 5 functions classified by a large amount of text information at the same time; You can take list navigation; Present a large number of items as a list. Highlight the title of each navigation bar; Show detailed columns to users
** Advantages: ** tabular structure can be compatible with many navigation bars; Cooperate with search class to greatly improve its navigation efficiency.
** disadvantages: ** content information is too much, users digest long time; At the same time, the need to match the search function, increased the development cost.
5. Sugar gourd navigation bar
As the product gradually enters the iteration from 1.0 to 2.0, the business becomes increasingly complex and needs to provide users with various functions and operations. In order to increase the use efficiency, such navigation can be adopted. This kind of navigation has subdivided into: nine grid, sugar gourd, are belonging to this kind of navigation blue.
▲ Palace navigation bar design
The predecessor of this kind of product requires a large number of users as the basis, and its characteristics are:
(1) High frequency/uHF use, high user stickiness, the application is in a monopoly position in the market, there is almost no substitute for products (advantages brought by large ecology);
② There are many kinds of application services and they are flat (the side-by-side desktop layout mode is a must);
(3) It can be used as the mobile background of enterprises (Alipay’s services include food, clothing, housing and transportation, which can be considered as enterprise individuals), which I call “walking ERP”;
(4) formed a fixed diversity of business;
** Advantages: ** Each navigation bar has no primary and secondary, each menu occupies the same space, and it is convenient for business traffic aggregation; Multiple matrix implementations can be partitioned and merged
** Disadvantages: ** Need to consider the order of the navigation bar, and even provide users with personalized layout ability, at the same time for new users to feel the operation pressure, need more guidance prompts design
6. Card navigation bar
An extended form of card navigation that renders more information per item by increasing the level of visual content.
Using algorithms and user registration information, the card navigator can update the picture as the page content changes. Such as video playing apps, or image-based products, often serve as secondary navigation.
▲ App Store and Pico Photography card navigation
** Advantages: ** High clicks, and the conversion rate of individual items will increase accordingly.
** Disadvantages: ** This structure reduces the efficiency of finding information for users in high volume operations.
7. Toast navigation
Usually landing on a sub-navigation, used to filter operations in multiple states under the same module.
Bring toast navigation
Features: ** allows users to do more with limited screen real estate, and is a way to reduce navigation bar design.
**8. Round-robin (tiled) navigation **
It is suitable for scenarios where only simple gesture operation is required to complete functional operations. Such as tantling sliding left and right; And the TV series on B; Both increase the visual display area of content and make it easy for users to choose.
▲ Chasing drama and tantan sliding left and right
** Advantages: ** is simple to operate, and easy to use by users, and low cost of operation
** Disadvantages: ** users are likely to click on early data is not real, because it is easy to misoperate
9. Overall navigation
The floating icon is also the name given to FAB navigation, a button that many product managers use to create new entry points for laziness.
But they did not consider the business behind the function, whether the page path with overlap, blindly in the screen constantly add buttons. The result is the same dense icon below.
Bring about overall navigation
The function of the navigation bar is not only convenient for users to find the corresponding content. More importantly will be able to improve user traffic conversion in the product.
In addition to its own field properties, each navigation bar also has status properties: selected **, jump, attention, heat, etc. 台湾国
** Web navigation bar design **
For the Web side, there are also common navigation bar designs. Because the navigation bar is large on the WEB screen, many product managers will animate it.
The design of web navigation bar can be divided into two types: horizontal scrolling and vertical scrolling.
1. Vertical roll
Vertical scrolling is widely used in the official website or product introduction page, combining some interactive animation effects and vertical scrolling navigation. When you scroll down the page, you switch to a new navigation bar, which you can click to focus on an area of the page
▲ Vertical navigation bar design
Like the table of contents navigation for an article, new navigation is created when the user slides down to a page.
2. Roll horizontally
Horizontal scrolling is the interaction of the navigation bar is left and right horizontal scrolling, when the user encounters this type of site for the first time, the experience will be relatively poor, because its physical and visual movement direction and the conventional vertical scrolling is not.
And when the user uses the mouse wheel to scroll, its left and right horizontal scrolling will give the user a sense of dislocation in the interaction, which is not particularly friendly.Therefore, such websites are not suitable for official websites, but for forums, content communities, news and information, because users can browse the content of the largest regionalization台湾国
▲ Roll horizontally
3. Side navigation
Side navigation on the Web has become the mainstream navigation on many official websites because it has landed on the main focus of users. Compared with APP, side navigation on the Web side not only does not reduce conversion rate, but also guides users to operate different functions more clearly.
The side of the site also has more space to expand than the top of the site. When the site needs to be revised to add columns, the side navigation will be easier to adjust than the top navigation.
4. Animated navigation
On the WEB side, cool animations are more attractive to users. If you add animations to the navigation, it will be easier to guide the user to click and use the navigation. For example, when the mouse hovers over the navigation, let the navigation font change, background color block size change, such as small and neat differentiation is enough. For example, the following case belongs to the navigation with text and text. The foreground is the text and the background is the picture. When the mouse moves to the corresponding navigation, the static picture will change dynamically with light amplitude. Animated navigation doesn’t need to be too fancy or it will interfere with the vision.
But in the case of simple design, I hope you don’t care about animation navigation, because this is a disaster for most product managers. First, it requires animation design resources, and second, it requires a lot of trust in the previous interactive instructions, which increases development costs.
In order to provide users with a closed-loop path, the navigation bar becomes the user’s roadmap in the product. A good signpost naturally increases the chances that users will reach their destination;
Regardless of the payment situation, the navigation bar is the core path for users to find content information, and the user experience will be poor if the navigation bar is not well done.
My personal wechat: 574319420, welcome to add my wechat communication