Website user experience design: navigation design that is "a little interesting"

 

This article is reproduced from Baidu UEO, Author: @ bean paste -. Navigation is an indispensable part of web design. It is a fast way for website visitors to obtain the required content.

Navigation allows the website hierarchy to be clearly displayed in a organized manner, and guides users to locate and manage information without any effort. At the same time, the navigation is located in the upper-right area of the webpage and the central area of the vision. While maintaining its reasonable functions, a good navigation design is the finishing touch of the entire web design!

Navigation is always an important element when a designer designs a webpage in layout and overall planning. We will consider:

What form of navigation is displayed?

Can I give full play to my function of organizing the website structure and effectively transmitting information?

Is it possible to work with the design style of the entire page?

Is it possible to make it stand out and reflect the characteristics of the website without affecting its functionality?

Can we keep improving as an essential part of the entire web page design?

Let's share and analyze some carefully crafted navigation designs.

Navigation is designed based on the Basic category, attributes, and features of the website.

Here, I have selected some non-system, portal, and other types, including brand and topic websites with clear features, user positioning, products, and brand characteristics. For these websites, the navigation design will break through the common horizontal navigation bar or vertical navigation, which will be more interesting and interesting, it is a "somewhat interesting" navigation design that allows designers to expand their design creativity and thinking!

　A. Material class. Add materials to the navigation bar!

Material navigation is the most commonly used Design Method for color navigation and adding navigation. Websites with special targeting and user orientation are widely used by designers.

This fast, simple, and effective design method can quickly present product features and designer's ingenuity. In addition, the navigation design of the material class often does not have to break the basic form of navigation, which can well maintain the navigation function and the uniformity of page layout.

Therefore, the product features can be flexibly expressed in the structure and position of a fixed web page prototype. Designers can sculpt internal materials as they wish to create different meaningful navigation and become a small highlight of the entire page.

　　

 

　B. Quasi-item, so navigation is more than just navigation!

How can we make a page look as immersive and integrated into the world of the website's products? Therefore, we need to make the user's visual experience truly feel the existence of the product features.

At this time, a general and rigid navigation is far from meeting the design needs of the page.

Even if the product images are attractive, a cold navigation without an integrated atmosphere will not only disappoint people on the page, but also damage the expected atmosphere. As a result, more and more designs make navigation an exciting task, enhancing the webpage and product atmosphere! Quasi-thing navigation, like a chameleon, captures and adapts to the characteristics of the environment in the Web Design of different positioning, and thus becomes part of the environment.

Navigation of quasi-things can be drawers, cloth bars, trees, or anything you can think of and create! To break all the established rules, you don't have to take things long, and you don't have to make the layout uniform. The navigation of the proposed items can bring the initiative of the designer to the extreme!

Such a navigation design can achieve another level of functionality in the entire web page, that is, to help improve the strong visual recognition of the product to the user, and no detailed information of the product has been found, you can feel what it is, what style it has, and what kind of pursuit it has in advance. Make navigation more than just navigation!

　　

 

　C. navigation class. design the navigation in another shape!

If you ask what the navigation is like, most people will immediately come up with several basic shapes and styles, the horizontal bar on the top and the vertical bar on the side. Even if it is tall, thin, colorful, and made of different materials, most navigation will not cross the basic boundaries.

So do navigation have to follow the "rule" of shape? The answer is yes. Although users are used to the "rule" of navigation, the alternative navigation design undoubtedly gives users a new perspective. The original navigation can also be "unlimited "!

So can we change the form design of navigation at will? The answer is no. Designers always have to remember the fundamental attributes and purposes of navigation, this prevents navigation from being independent of its core role in page design.

If you are a bold designer and have novel design concepts and product requirements, you may wish to make a great adjustment and design the navigation in another shape!

　　

 

　　D. Integration class, "Harmonious Development" navigation design!

There will also be low-key and harmonious navigation guys who are eager to gain the limelight.

In some webpage designs, the demand orientation requires that the navigation be weakened to a certain extent to highlight the main content of the product.

So how should designers choose this part of navigation design? Is it a simple listing of text? Or is the navigation left at the corner? How can we make the weakened navigation still have a sense of design, or even help highlight the main content?

At this time, the processing and Design of navigation can better reflect a designer's control over the overall situation, as well as local control over the details, so that the whole part can be obeyed, but it is not rough, but exquisite! The weakening does not require no design, but harmony does not hide or disappear.

When dealing with such situations, many excellent design works usually combine navigation and webpage subject backgrounds. Color Matching, style feelings, Association of background images, and wireframes can all be processed and designed. Let the navigation appear naturally, as if it is a part of the subject, and leave more visual focus to the subject content. So as to perfectly maintain its functionality, and can "develop in harmony" with the overall page "!

　　

 

　　E. Extended class, more possibilities of navigation design!

The design is constantly improving. With the improvement of user experience, the expansion of user recognition, the diversity of product requirements, and the continuous exploration and updating of designer concepts, we believe that, there will be more possibilities for navigation design! Maybe the next new design was born between you and me! More and more research and exploration on navigation design will bring new visual and user experience to users!

Navigation Design http://ueo.baidu.com /? P = 917