“Dry goods” web page end, mobile navigation design mode full solution

The component design in the interface has a lot of common interactive design models.

「干货」网页端、移动端导航设计模式全解

Product navigation, as the most common component on the interface, also has a variety of design models that are well known. Modified components are convenient and effective applications provided by product managers to quickly and effectively create product interfaces and build information architecture.

Next, let’s see what are the common navigation design patterns on the web page and mobile end:

Navigation mode in different areas of web interface

「干货」网页端、移动端导航设计模式全解

1. Top area navigation

The header of the interface is called the first or top area of ​​the page.

Navigation in the top area is crucial to the user experience of a product. According to the user’s browsing habits: from left to right, from top to bottom browsing order, the top navigation at the top of the product is what they see first.

The top horizontal column navigation is the main mode of the top area navigation. It is often used as a product -led flight and placed in the top of all interfaces of the product.

Some product managers believe that there is nothing to designed at the top content. It is nothing more than a combination of logo and some text links. But this is not the case.

First of all, let’s take a look at the content often contained in the top area:

L brand logo

「干货」网页端、移动端导航设计模式全解

L menu

l search box

l prompt message

L login / register

l contact information

l language switch

l other products or mobile app download links

l Behavior call link (I want to submit, I want to post)

These are common elements in the top area, and they choose according to the actual situation of the product itself.

Among these contents, the menu in the form of navigation is particularly important. The common navigation design patterns are divided into two types:

Model 1: Burger Navigation

The top area is small, and there are many content in navigation. What should I do? Of course, the navigation design must be completed through the choice of content.

「干货」网页端、移动端导航设计模式全解

The choice means retaining and abandonment. Discarding in interactive design does not mean not certain content, but hides some content, and then displayed after the user initiates interaction. This hidden reflects the principle of viewing on demand, and it is displayed in front of the user when the user needs it.

Burger navigation is the navigation mode of this typical thinking.

「干货」网页端、移动端导航设计模式全解

Common burger navigation consists of three horizontal lines, like a burger bag like two layers of meat, so we call it burger navigation.

Burger navigation can save the space of the interface by hiding some secondary information, so that the top area is more refreshing and simple, and users can better concentrate on important information.

Burger navigation is frequently used in the web interface navigation design. Users are familiar with this navigation mode and will not increase the user’s learning cost.

When designing the burger navigation design, the burger button is easy to be ignored by users, so when designing, it is necessary to properly guide the user through the design of the buttons. In other words, the burger button design must be clearly displayed without occupying too much space.

Mode 2: Horizontal Barn Navigation

The top horizontal column navigation design mode is sometimes accompanied by the drop -down menu, and when the mouse moves to a certain item, the secondary sub -navigation item is popped up.

General features of the top horizontal column navigation

Navigation items are text links, buttons shape, or tab shape

The horizontal column navigation is usually placed directly in the place where LOGO is adjacent to the website

It is usually located on the folding

Disadvantages of the top horizontal column navigation

The biggest disadvantage of the top horizontal column navigation is that it limits the number of links you can contain without using sub -navigation. For only a few pages or categories, this is not a problem, but for websites with very complex information structures and many modules, if there is no sub -navigation, this is not a perfect leading navigation menu choose.

When to use the top horizontal column navigation

The top horizontal column navigation is very good for websites that only need to display 5-12 navigation items in the main navigation. This is also the only choice for the dominant navigation of the websites (except for the bottom navigation of the secondary navigation system). When it is combined with the drop -down navigation, this design mode can support more links.

「干货」网页端、移动端导航设计模式全解

2. sidebar/vertical navigation

Model 1: Side vertical navigation

The navigation items of the sidebar navigation are arranged in a single column, one on one item. It is often on the upper left corner, before the main content area -based on the availability of navigation mode from left to right, the vertical navigation bar on the left is better than the vertical navigation on the right.

The sidebar navigation design mode can be seen everywhere, almost existing on various websites. This may be because vertical navigation is one of the most common models, which can adapt to a large number of links.

It can be used with the sub -navigation menu and can be used alone. It is easy to use to dominate the website with many links. The sidebar navigation can be integrated in almost any type of layout.

「干货」网页端、移动端导航设计模式全解

General features of sidebar navigation

Text links are very common as navigation items (including or without icons)

「干货」网页端、移动端导航设计模式全解

Rarely use tabs (except for stacking label navigation mode)

「干货」网页端、移动端导航设计模式全解

Vertical navigation menu often contains a lot of links

Vertical/sidebar navigation disadvantages

Because a lot of links can be processed, users may sometimes be drowned when the vertical menu is too long. Try to limit the number of links you introduced, and replace it. You can use the flying -out navigation menu to provide more information on the website. At the same time, consider putting links in intuitive categories to help users quickly find links that are interested.

When to use vertical/sidebar navigation

Vertical navigation is suitable for almost all types of websites, especially suitable for websites with leading navigation links.

导3.

Model 1: Settings

Portal navigation is usually used for secondary navigation, and may include links that are not in the dominant navigation, or include simplified website map links.

Visitors usually check their foot navigation when they are not found.

「干货」网页端、移动端导航设计模式全解

General features of foot navigation

Portal navigation is usually used to place navigation items that are not available in other places

Usually use text links, occasion

Usually linking is not such a critical page

Disadvantages of foot navigation

If your page is long, no one is willing to roll to the bottom of the page just for navigation. For longer pages, foot navigation is best as a place for repeated links and simple website maps. It is not suitable for dominating forms.

When to use the footprint navigation

Most websites have such foot navigation, even if it just repeats the links elsewhere. Considering what is useful there, and what your visitor may want to find the most.

Common navigation mode on the web & mobile terminal

1.Web often see navigation mode

Mode 1: tab voyage

The tab navigation can be designed as any style you want at will, from realistic, hand -felt labels to smooth labels, and simple local tags. It exists in various websites and can be included in any visual effect.

The tab has an obvious advantage over other categories: they have a positive psychological effect on users. People usually associate navigation and tabs, because they once saw the tabs in the notebook or folder and associated them to a new chapter. The metaphor of this real world makes the tab navigation very intuitive.

The general features of the tab voyage

It looks like a tab of the real world (just like the folder, the notebook, etc.)

Generally in the horizontal direction but sometimes vertical (stack label)

Disadvantages of tab voyage

The biggest disadvantage of the tab is that it is more difficult to design than the simple top horizontal column. They usually need more labels, picture resources, and CSS, depending on the visual complexity of the label. Another disadvantage of the tab is that they are not suitable for a lot of links, unless they are arranged vertically (even if they are too much, they still look inappropriate).

When to use the tab voyage

The tab is also suitable for almost any dominant navigation, although they have restrictions on the displayed links, especially in the horizontal direction. It is a good option to use large websites to use a large website with different styles of navigation.

Mode 2: bread crumb navigation

The name of the bread crumbs is from the story of Hansel and Gretel. They sow the bread crumbs along the way to find the way to add a family, which can tell you the current position of the website. This is a form of secondary navigation that assisted the dominant navigation system of the website.

Bread crumbs are particularly useful for websites with layered structures in multiple levels. They can help visitors to understand where they are currently in the entire station. If the visitors want to return to a certain level, they only need to click the corresponding bread crumbs navigation items.

General features of bread crumbs

The general format is a horizontal text link list, usually in the middle of the two items with the left arrow to indicate the layer and the relationship

Never need to be dominated

「干货」网页端、移动端导航设计模式全解

Disadvantages of bread dandruff navigation

Bread dandruff is not suitable for shallow navigation websites. When the website does not have a clear level and classification, it may also cause confusion. When to use bread crumb navigation. Bread crumb navigation is most suitable for websites with clear chapters and multi -level classification content. There is no obvious chapter, and the use of bread shall be lost.

Mode 3: Tag Navigation

Tags are often used for blogs and news websites. They are often organized into a label cloud, and navigation items may be arranged in the order of letters (usually linked in different sizes to represent how much content this label is), or arranged according to the degree of popularity.

「干货」网页端、移动端导航设计模式全解

The label is excellent secondary navigation and is rarely used to dominate. He can improve the foundability and exploration of the website. Tag clouds usually appear in the borderbar or bottom. If there is no label cloud, the label is usually included in the meta -information at the top or bottom of the article. This design makes it easier for users to find similar content.

General features of label navigation

The label is the general feature of the content -centered network (blog and news station) station

「干货」网页端、移动端导航设计模式全解

Only text links

When in the label cloud, the links are usually different to identify the popularity

Often in the meta information included in the article

「干货」网页端、移动端导航设计模式全解

Disadvantages of label navigation

People usually connect labels and blogs and news websites (sometimes it may be e -commerce websites), so if your website is essentially different from these websites, it may not help you. The label will also bring a certain amount of work to the content creator, because in order to make the label system valid, each article needs to be labeled accurately.

When to use the label

If you have a lot of themes, it is very beneficial to make keyword marks for the content. If you have only a few pages (maybe your website is a company website), you may not need to label the content. Whether to combine the label cloud or only depends on your design in the meta -information.

Model 4: out -of -type menu and drop -down menu navigation

The outlet menu (used with vertical/sidebar navigation) and drop -down menu (usually used with the top horizontal column navigation) is a good way to build a strong navigation system. It makes your website look neat as a whole, and makes the deep chapters easily access.

They usually combine the level, vertical or tab navigation together as part of the website leading navigation system.

「干货」网页端、移动端导航设计模式全解

The general features of the outlet menu and drop -down menu navigation

Used for multi -level information structure

「干货」网页端、移动端导航设计模式全解

Use JavaScript and CSS to hide and display the menu

「干货」网页端、移动端导航设计模式全解

The link displayed in the menu is the sub -item of the main menu item

「干货」网页端、移动端导航设计模式全解

The menu is usually activated when the mouse hovers on it, and sometimes it may be activated when the mouse is clicked

Disadvantages of navigation disadvantages for navigation and drop -down menu

Unless you place some signs (usually arrow icons) on the side of the dominant navigation link, the visitors may not know that the drop -down or out -of -the -style menu containing sub -navigation items is obviously very important. At the same time, the outlet menu and drop -down may make it very difficult to use navigation on mobile devices, so ensure that your mobile style table is processed.

When to use the outlet menu and drop -down menu navigation

「干货」网页端、移动端导航设计模式全解

If you want to hide a large or complicated navigation level visually, the outlet menu and drop -down are a good choice, because it makes users decide what they want to see and when to see them. They can be used to display a large number of links on demand without messing up the webpage. They can also be used to display sub -pages and local navigation, and they do not need users to click on the new page first.

Model 5: Double menu menu

The style of the double -layer menu has also been favored by designers in the recent top column design. Because with the continuous increase and improvement of product functions, some single -layer menus cannot be solved, that is, too much content that needs to be displayed on the top column, and certain specific functions do not belong to the same level. In order to better cope with this situation,

Designer

We creatively use the two -layer menu.

The above website is an example. The upper menu has a link to social networks (Facebook, Instagram, and Twitter), corporate logo, search box, shopping cart and burger button. There are product types, business outlets, news, news, and contact us.

In this case, if this information is displayed in the traditional one -line menu, it will inevitably not be put, causing excessive crowded on the top column.

Double -layer menu design points

Most users do not read the information in the page by word, they are “scan” reading. Therefore, the text design on the top bar is first considered readability, so that users can obtain this information in a short time. Therefore, our text should be highlighted from the background, and when necessary, we can bold the font style.

Model 6:: Fixed Top Navigation

The fixed top column represents another design idea: no matter what the user performs, the top column is visible for users. The top column of this type is suitable for more page content, and users need to continuously pull down and slide a website.

「干货」网页端、移动端导航设计模式全解

This interactive mode can improve the ease of use in the top column, but this is based on the sacrifice part of the page space, so we must be cautious when we use it.

I have always emphasized that the design of the top column should be concise and clear, so that users can understand at a glance. Because the top column is part of the navigation system, it is to avoid users from getting lost and helping them use products better. In the final analysis, the user uses your product for the content or services you provided, not to see the cumbersome top column. Therefore, we can’t stand upside down, and we do too fancy on the top column, and then disperse the user’s attention.

In addition, minimalist style is very suitable for response design, and you can pursue the same user experience on multiple devices.

Another major advantage of simple design is that designers often encounter temporary iteration needs. The leader suddenly allows you to add a button here to add a text tag. The simple design provides operating space for this sudden iteration needs.

2. Common navigation mode of mobile terminals

Model 1: TAB/Subscribe control navigation bar

TAB switch the top navigation bar and the top navigation bar at the top of the segmented control, all of which have multiple navigation columns on the top. They are divided into selected titles and uns selected titles, as shown in the figure below:

There are generally 2 to 5 options at the top navigation bar at the segment control, and cannot slide left and right. The options for switching on the top navigation bar on the left and right of the TAB can be extended a lot (such as the TAB switch on the top page of iQiyi’s homepage), and can switch to the left and right to switch. Font color changes, font size amplification, etc. (multiple combinations can highlight the selection title), as shown below: below:

Model 2: Pass Pass Navigation Bar

The background layer of the passage navigation is generally opened with the module below. It looks more uniform visually and can save the interface space to a certain extent. As shown below:

The navigation bar is often used in the interfaces of e -commerce, tourism and other interfaces that are complicated or needed to set the atmosphere (mostly accompanied by background treatment), and some will also be placed on the top of the top of the banner to save space and reduce the sense of separation.

There are generally three background processing methods of the navigation bar:

1. Special background processing: remained consistent with the overall style of the module below, and adopts the picture background that is consistent with the same below;

2. Color and gradient background: use solid color or gradient background, commonly in the interface of the card style;

3. Black transparent gradient mask layer: The use of a layer of gradient mask is common on the picture banner to ensure the recognition of the navigation bar text.

Model 3: Mini Program Navigation Bar

WeChat’s applet navigation bar, there is a TitleBar button that cannot be removed or edited at the top right of the top to the right. WeChat is equipped with two shallow styles.

When converting from APP to small programs, pay attention to adjust the position of the top navigation bar at the top of the APP and the size of the search box to avoid being blocked by TitleBar, as shown below:

「干货」网页端、移动端导航设计模式全解

In the figure above, the top navigation bar of Princess Pea moved downward, and reduced the height of the search box to increase the utilization rate of the screen.

Several thinking about navigation design

1. How to make a navigation bar for the marketing department?

Baidu captures website data through layers of navigation. The important point of the navigation bar is that website navigation usually appears at the top of the website, so if the navigation bar is promoted by the network, the flow weight can be passed to the directory page.

A clear navigation system is an important goal of website design, which has an important impact on website information architecture and user experience. When designing the navigation bar, network promotion has become more and more factor that needs to be considered.

From the perspective of SEO, you should pay attention to the following points in the website navigation bar?

L website navigation contains keywords

Generally speaking, website navigation generally includes core keywords and long tail keywords. In order to make the page look concise and beautiful, usually only one keyword is selected instead, and the title tag is used to express the complete keywords. Of course, what needs to be reminded here is that in order to increase the density of a certain keyword, some corporate websites have added keywords to the website navigation and deleted the hyperlink. Although this is a strategy, it is still suspected of cheating.

「干货」网页端、移动端导航设计模式全解

L reasonable use of the H2-H3 tags in the website navigation

In addition to the special SEO single -page optimization, multiple H1 tags will appear. Generally speaking, each independent page of the regular website basically only contains one independent H1. Therefore, when designing the navigation bar, the label H2-H3 needs to be reasonably distributed. Give the corresponding column to increase importance.

L

Avoid the conflict between the content page and the website navigation keywords

The anchor text of the website is set up by each network promotion personnel, but here we often ignore a small detail. Generally speaking, search engines only record keywords that are linking in the country. Based on the climbing order of search engines, from top to bottom, from left to right, if the keywords appear in the navigation bar, try not to use them on the content page. To this anchor text with the same link, you can use the word -related words.

2. From a user perspective, what problems do navigation design be solved?

l Question 1: Where is I?

Users can enter the website from any internal page, and sometimes they can enter from the homepage. After clicking multiple links, the user has forgotten how to reach the current page. The navigation system needs to clearly tell users which part of the overall structure of the website is now. The unity of page design style, the use of bread crumb navigation, and the outstanding display of the current category of the dominant navigation system can help users judge their position now.

「干货」网页端、移动端导航设计模式全解

l Question 2: Where to go next?

Sometimes users know what he wants to do, and the navigation design of the page tells the user where to click to achieve his goal. Sometimes users do not know what they should do. Website navigation needs to give users a national advice to guide users to reach the website goals to complete the page. Reasonable navigation and category names, related links in the text, guide users to put the product into the shopping cart, related product recommendations, website maps, website search boxes, etc. help users click to enter the next step.

You may also like...

Popular Posts