One of the principles of interface design: weigh priorities and focus on dividing the content hierarchy.

Interface design, if faced with too many elements, how to adjust the elements to satisfy the customer? Need to hold three points, that is, to comprehensively consider the priority of each element, seize the focus, highlight the most important elements, according to the order of the visitors to obtain information, the content is prioritized.

"Editor's note" Interface design, we can not emphasize all elements, otherwise there will be no focus. Just as everyone is shouting and rambling, we will not hear any information. When the interface design faces many elements, how to deploy the relationship between the elements, then need to hold three points: priority, focus, content level. "Design principles:dominance, Focal Points and Hierarchy" explains the principle in detail. Csdn the text with the following translation:

Welcome to join CSDN User Experience Exchange Group: 190426269, for industry discussion.

In the design of the interface, especially when there are multiple elements, how to adjust the elements so that customer satisfaction is a need for skill.

Priority level

For example, there are now two performance elements, then who is the focus, who is the customer's favorite, which involves priority issues. In addition to the most common size relationships, the following factors need to be taken into consideration when considering priorities:

• Size
• Shape
• Color
• Depth
• Texture
• Thickness
• Saturation level
• Direction
• Stay White
• Points of interest
• Physical relationships

What should you do if you want to express your priorities by way of direction? -You can use arrows, gradient lines and other pointing elements (multiple) to point to the elements that need to be highlighted to achieve focus.

Main elements

The main element is the foundation of our design, which determines the visual focus of the viewer. So when designing, the first thing to do is to put the main elements of performance at the top of the design. Whatever information we need to express to the user must be clear and as close to the main element as possible. But to grasp a good yardstick, for example, the other elements are covered or filled with the whole picture instead of becoming the focus.

Focus

The focus can be a collection of major elements or a primary area, but there should be the most important elements in the picture. For example, the largest and brightest dots are the most important elements in the design, and together with the other three dark red squares form the focal area.

Visible contrast is a good way to create a focus area, through size, shape, warm and cold color, location and so on.

Priority level

If the focus area consists of multiple elements, each element should have primary and secondary points, then how many layers should be divided into more appropriate? My advice is three. For the general public, the understanding of a thing is generally three degrees: the most familiar, the most unfamiliar, between the two.

• The main

Elements of this level should have the most visual weight. This is usually a single foreground element, a banner or a top chart.

• Main

The element at this level is the focus element, which is second only to the main element, but is more prominent than the minor element.

• Secondary

This level element has the smallest visual weight and acts as a backdrop against the role. This can usually be a textual representation.

If you want to add more layers, be aware that this affects the contrast between different elements, so it takes a lot more effort to design than to lead and prioritize.

Visual hierarchy

The division of visual hierarchy determines the order in which visitors get information. This helps us to convey the message we want to express, and the top level of the hierarchy (the main element) should be the first to answer questions that may be raised when the visitor first visits. The browser should then be able to get key information and page key information. Assigning more visual weights to key information is a good choice. If the visitors stay longer, we should layout the main elements and minor elements in order, so that the visitors can get richer information.

Inverted triangle Writing method

In the design of the division level with reporters writing news is similar to the wonderful. The most important news information is usually ranked in paragraph 1 or 2, which includes time, place, character, what happens, why, how, and so on.

The important information should then be written in detail. For example, a background introduction or more detailed description. The finishing touches can be summarized or summarized, but not written in detail. It can be seen that the three-layer partitioning method is the most common and safest practice.

Example analysis

An Event Apart

The main element of an Event apart website is the top image on the homepage. Image is a person in the scene of the meeting, the figure of the bold text with white display, very good contrast with the background map to cause visual attention.

The text content "site creator's design will" is to let visitors know the first time the site is to do what, confessed very clear direct.

The focus elements include the website logo, the black background of the latest news (upcoming Events) and the user reviews shown in larger bold.

If you continue browsing the site, you can see that it uses color and size comparisons primarily to add additional focus and visual levels. Important information is shown in bold large text, with pictures as a visual impact point.

Paid to Exist

Paid to exist's homepage main element is the top of the backpack picture, which occupies the largest visual weight, while due to irregular modelling and image points of interest characteristics, it is easy to distinguish with other elements.

The focus elements include the site name at the top left, the bold large text on the right side of the backpack picture, and the Green download button. The hover social sharing bar on the right side of the page is another focus area.

Looking down the page is three large dots, which arouse visual interest and stimulate reading power. Dots, different colors of the paragraph of the first, unified light gray content, not exactly in line with the aforementioned three-layer division method?

Mandy Sims

Mandy Sims is a single-page Web site. To me, the portrait of Mandy and the Mandy Sims full name of the largest font size are the main elements.

Go down the navigation bar, each point of a layer, the current level of the title of the font is the maximum font size, so this becomes the focus area, this is what I want to specifically point out.

In addition, the user comment on the right side of the page is another focus area with the background color consistent with the background color of the selected menu bar. Even if we don't look at each section in detail, we can tell from user feedback that Mandy has provided a satisfying service to the user.

Vanseo Design

The last instance is my personal blog site. The main title of the page is the main element, and I want people to read more of my article, so clearly tell the reader what he will get.

The picture also attracts attention, and even you think it's more prominent, but it doesn't have to be presented in every article.

The logo at the top left and the right-most RSS link were designed to be more visible than the text below, but I didn't use a brighter red color in order not to affect the focus.

The left side of the screen is about the introduction of the site and label information, I used a larger line spacing and bold font, so that users can see the main content and classification of the blog at a Glance. For hyperlinks, I don't want it to be a tool to force users to click, but to decide when they need it, and therefore to do special processing-- italics and blue fonts with low luminosity and low saturation .

My starting point is that when users first visit the blog or read my article, they can quickly know the main content of the article and the site information (such as the website or my name) without having to read the article from start to finish.

Written in the last

For limited page space, we have to be a steward of the role. I think the most important thing is to avoid everything, but to be targeted. The most want to express their own use of different prominent techniques to deal with the good.

But please remember to communicate with users to avoid misunderstanding.

This can be done well through the contrasting methods of different things. The three-tier partitioning method is the most common security practice that allows users to grasp the information we want to express step-by-step. Think twice and watch other people's good works to benefit us a lot. (Translator: Wu Kun Zebian: Chen)

One of the principles of interface design: weigh priorities and focus on dividing the content hierarchy.