Web Navigation Design tips: Icon Navigation design trends

Source: Internet
Author: User

Article Description: unconsciously, many web design using the icon-style navigation (navigation)-generally using three-bar as an icon for navigation.

Unconsciously, many web design using the icon-style navigation (navigation)-generally using three-bar as an icon for navigation.
The advantage of this navigation is to save space and make the interface more concise.

Example of an icon navigation

This is YouTube's icon navigation (mobile version):

This is the Squarespace icon navigation:

Award's icon-type navigation eclectic:

Where the problem lies

The problem is that after clicking on the icon navigation, there is no change in the icon itself. In other words: Operation lacks feedback.

The buttons have different status and different styles to guide the user effectively.

Let's take the switch for example. Switch is also a kind of button, generally have two kinds of situation:

1 turn on the light;
2 Turn off the lamp;

Therefore, the operation of the icon-type navigation lacks feedback. Click on the icon to achieve two functions: Display navigation menu, close/Hide navigation menu. The icon should also have two appearances to differentiate.

Solution: Icon Conversion

This approach can be used to provide a more visible visual cue to better Guide user action.

There's a demo called Navicon Transformicons that's great to use SCSS and jquery technology, but technically it's not complicated, and you can write it if you have a heart.


The benefit is:

§ provide user visual clues;
§ icon more semantic, an icon, a state;
Excellent dynamic conversion can attract the attention of users, so that users quickly find the navigation menu.

By contrast, it's more persuasive, and I've improved on case 3 in this way:

Better guidance effect, in fact, can not only change the shape of the icon, change the icon color is also OK? Here is not much to say, give us a little imagination space.
Design without thinking, I hope you have some harvest.



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.