Website Navigation Design Guide: How to make an attractive website?

The function of navigation is to make it easier for users to find the information needed, to analyze and optimize the information architecture and site search, and also to guide the users. An attractive navigation can attract users to browse more Web content, and increase the user's stay time on the site. Navigation in the site design position is important, it guides the user to browse and search, a good navigation system allows users to leave the site when the feeling of a happy journey.

　　1. Top horizontal bar navigation

The top horizontal bar navigation is one of the two most popular web site navigation menu Design patterns at the moment. It is most commonly used in the main navigation menu of the site, and is usually placed directly above or directly below the head of the site for all pages of the site. The top horizontal bar navigation is great for sites that only need to display 5-12 navigation items in the primary navigation. This is also the only option for the dominant navigation of a Single-column layout site (except for the bottom navigation typically used for level two navigation systems). This design pattern can support more links when it is combined with drop-down navigation. All the important information is fixed at the top, which is easier and more comfortable for the user to use.

　　2. Drawer type navigation design

By default, navigation menus are not displayed at all, and the first content layer opens only when you touch a small icon specified in the upper-right corner. When touching one of the columns, the second layer of content will gradually unfold, giving the user a very clear navigation of content. The use of drawer-style navigation to organize complex content is a very convenient and popular way. Often, complex web sites are designed using a drawer-style navigation.

　　3. fixed side-side bar navigation

Side bar navigation menus can be compatible with different screen sizes. For a very bright and clean layout of the site, you can do a good job and the interaction between users, so that people focus on the navigation bar at a glance. The beauty of the side navigation bar mainly shows in the space is big enough, a lot of blank lets the user feel the whole website has the place to breathe, appears very delicate and free. By having a unique design that causes the user's attention.

　　4. hidden side-Sidebar navigation

Sidebar menu will be a new trend for 2014! Side-by-side navigation gives you the impression that you're behind a peep page or you've opened a toy box lid to see what's inside. The navigation bar should always be there when it is needed, and the navigation bar should be elegantly hidden when the user wants to focus on a particular task. Hidden side navigation is very convenient to use, the mouse hover on the left side of the browser can appear, the main part of the immediate appearance of the rotation effect is also very sense, can be a good guide to the user's attention. The navigation is hidden and also the simplicity of the interface, so that the site's browsing experience is very enjoyable, because the site does not leave too much useless information to distract the user's attention.

　　5. icon-type navigation

The advantage of icon navigation is to save space and make the interface more concise. Icons can also be used for detailed classification, provide more visible visual clues, and the icon has intuitive semantic display, each icon represents each of the different events to attract the attention of users, so as to better guide user action. If coupled with excellent dynamic conversion can attract the attention of users, so that users quickly find the navigation menu.

　　6. Tab Navigation

tab navigation can be designed to any style you want, from realistic, hand-felt labels to sleek labels, and simple local-edge labels. It exists in a variety of websites and can incorporate any visual effects. Tabs have an obvious advantage over other categories of navigation: they have a positive psychological effect on the user.

　　7. Response-type navigation design

The design of responsive navigation follows the concept of responsive web design, which is often adjusted according to user behavior and device environment (System platform, screen size, screen orientation, etc.). By scaling down the element size, adjusting the layout of the page structure and optimizing the content, the users have a unique user experience on different platforms to achieve better reading effect. The advantage of responsive navigation is that it maintains the same vision and feel at different screen resolutions.

In short, Web navigation is a wide variety of generic and well-known design patterns that can be used as a basis for creating an effective information architecture for your site. The design of the navigation bar can be static, dynamic, extensible, and so on, or even just hidden in a subtle symbol. Any navigation in the site will play an indispensable role, so it is necessary to explore what kind of navigation site.