When we do interface design, the importance of information hierarchy is self-evident, and the priority of information can help products achieve business goals more intuitively. This time we will use two practical cases to analyze how to effectively divide the visual hierarchy.

Which picture on the left and right is more important?

The visual hierarchy shown above is straightforward, and managing these hierarchies requires consideration from understanding content and requirements to how to deal with the information hierarchy. For designers, having such a framework concept of hierarchy in mind can make the design more valid. Both content-based pages and tool-based software need to deal with the primary and secondary relationship of content, guide users’ visual focus, adjust the sense of rhythm of the page, reduce users’ understanding cost and reduce users’ visual fatigue.

I remember there was such a saying that when you are in the confused area of design, you can squint your eyes to look at your design draft, and maybe you will feel some hierarchical relationship between the front and back in the vision of atomization. The method of squinting at the design draft mentioned here is the simplest and most direct folk remedy for judging the level.

So how do you create a visual hierarchy? There are mainly the following ways of expression:

Size · Distance · Content form · color

Size: Often the most intuitive reflection of the hierarchy gap

Distance: human eyes are more likely to pay attention to information near the distance. A comfortable, calm spacing rhythm can help the text stimulate the reader’s research and stimulate his thinking.

Can you see any difference in eye flow between the two images?

Content form: This refers to the presentation of content with rhythm and variation.

For example, we see fragmentation all the time now. Users’ time is becoming more and more fragmented, and content is becoming more and more fragmented and personalized. Users lack the patience to read a whole long article, appropriate illustrations, increase the interval of paragraphs, adjust the rhythm of the whole page from the page, to avoid large sections of text caused by the user’s visual fatigue and irritability, the human eye will generally pay attention to the figure and then the text.

Color: If there are obvious differences and contrasts in saturation, contrast and lightness, an obvious hierarchy will be formed, so people will unconsciously pay attention to bright or heavy colors first.

When these rules are applied to specific design, there will often be a mix of rules.

Here’s an example of our HJQ product:

This is a product of HJenglish.com. By comparing the left and right pictures, you can clearly see the focus of the right picture. By enlarging, bolding and changing colors, we can increase the weight of the parts that need to be emphasized, achieve the purpose of information hierarchy differentiation, which helps us to see the prominent points at a glance, thus reducing the cost of reading.

By controlling the size of the picture, the size contrast of the text and the exaggerated space between the white space, we can make the magazine feel and focus on the content we want to express

These rules need to be realized through the above mentioned methods: you can weaken and abstract the graphics and colors of elements that do not need to be highlighted, magnify the information that needs to be highlighted, or adjust the position relationship between elements, etc.. In addition, do a situational analysis and refine what information needs to be highlighted on the page based on the purpose of the requirements.

To share a complete example:

This is a revision of the download page of the current application market, trying to improve the download rate of the App through visual presentation, highlight the key features of the product, and use a more abstract and cartoon style to show a lively, lively and cordial feeling, so as to create a friendly first impression on CCtalk and improve the download rate.

Competing goods research

Before starting this page, we looked at the market charts of other products. Most of them were in the form of stereotyped screenshots of the real interface, and it was difficult to experience the real usage scenarios in a short browsing time, let alone capture any important information or impression from the screenshots.

How to let users get to the focus in a few seconds of quick browsing process is our goal of this revision.

Start with the copy

The demander has given 5 groups of documents:

According to the first set of document keywords, stretched out by writing the express is a kind of link, inclusive, anytime, anywhere can access to their favorite teacher, you want to come into contact with the course of such a feeling, carrying links together the teacher, courses, the main body of each language platform or small cc robots image, to create the cc, The location on the first page of the download page is also appropriate.

Is it the image on the right that immediately comes to mind? If so, that’s right!

The page looked a bit cluttered, with too many small elements and not enough focus. The reason why I am so obsessed with these small elements is probably because I didn’t think of the concept of dealing with hierarchy in the first place.

At this time, we can use the combination of these methods mentioned above, through size contrast, color before and after the depth of field, control distance, weaken other unnecessary elements, to achieve the visual level, make the page concise and focused. The same hierarchy applies to the rest of the page, so let’s take a look at this before and after:

Although the project itself is very simple, it is important to extract the key points and deal with the hierarchy behind the simplicity. For any page, if you want to show too many things at once, nothing is important. When we do design, we should have the balance of primary and secondary relationship in mind. We should not cover up the most important things for excessive sense of form.

Write in the last

In the process of design, we often encounter such a situation: the demand content is too much, and the demander wants to display it in one screen, so as to reduce the space as much as possible. Personally do not agree with this, the product and content should have a primary and secondary, not because you row a little crowded, content put a little more, users will take a look; It’s about retaining users with great content, comfortable reading, and a smooth experience.

UED is a design team that is constantly learning and growing

Long press to identify qr code attention