How to make users feel the simplicity of the interface has details?

Just in time, the company's internal training in the previous period. I'll tidy up the contents.

The decision to use the problem as a reason for internal training, because some colleagues found that the design of rough, lack of detail. The so-called design details, but also a kind of difficult to use rational words to express clearly things. So, it took me days to observe what my colleagues were doing and to sum up the common mistakes. In this article, I will try to use the most understandable vernacular to answer. The layman can see it, that is my purpose. So, hopefully the following content will help you.

Statement:

1. To give a rough answer to this question, the answer is to grant fishing skills, not to show the appearance of fish, so please read the key points. Therefore, also please each road language cleanliness of the word Aesthetic appreciation party cautiously enter;

2. This answer is only a summary of the general law, designed to impart personal experience in the new industry. If you think you are an industry veteran or master, please be careful to enter. In addition, please do not take an example to refute the overthrow.

Let's start by defining what the average viewer in the design will do as a detail.

Figure I:

Figure II:

After reading the above comparison, I will ask a few questions first.

First question:

You can, according to your understanding of the word "details", from the above two pictures, choose what you think is more "details" of a picture.

Second question:

No matter which one you choose, please say why you think the picture has "details". Before you jump to the "details", let's take a look at another set of comparisons. And this time the contrast, will be more complicated.

Figure III:

Figure IV:

Or the same as before. Please come and answer me a few questions.

First question:

You are still based on your understanding of the word "details" to choose which picture you think is more detailed?

Second question:

Please put the reason for the "detail" in the previous diagram, and apply it to the two graphs now, and see if the reason for the "detail" that you have defined is still there?

Now, I'm going to make a reduction in the psychological activity that you see in the previous pictures.

In these two comparisons, most people think the second "I" word is more detailed. The sense of detail here comes from the decorative elements (projections) in the screen.

A picture, our vision can stay above the point or time, relative to the more the longer, our psychological feeling will think that this picture the more details.

Take the above two pictures, the first picture, we have seen, about only 0.1 seconds less than the time, we can reflect that the picture is only a Chinese character. At this point, our vision and brain will immediately make one of the two responses that follow.

In the first response, we will immediately look for the second element in the picture that we can watch. If we cannot find it, we will immediately shift our attention from the picture.

And the second reaction is that we will immediately shift our attention from the screen and stop watching because there is nothing to see.

Next, I will use the way of the legend to let you feel the decorative elements of the impact of the details.

Figure V:

Above, is a button.

is a button without any design decoration, this button is in the most straightforward form of Chinese characters.

And then, you see figure six, is to increase the ups and downs, projection, acrylic texture, such as a variety of decorative methods of the button.

We can feel it for ourselves, which one will make us feel more detail.

Figure VI:

Or let's combine what we said before, the problem of visual retention time.

The first button, when we see it, the brain responds immediately, it's two characters, and then we start looking for a second visual stop. At this point, we will notice the gray background, and then we may notice the dark gray text. But when we look at the end of all this, when we can no longer find the point of view from the picture, we will shift our view.

And the second one is designed for the button. We will see the first text, next to see is the gray background, and then see the bulge of the button, Chamfer arc, imitation acrylic texture of the light and shadow, the superimposed projection of the text and so on. Because there are more decorative elements, so we will be more than the first picture of the stay longer, we will also think that the second picture more details. Above, is the first reason to create a sense of detail.

The duration of our vision determines whether we think the picture is more detailed. Adding decorative elements to the screen is one of the ways to enhance detail.

Next, we start to analyze the second set of contrasting graphs we saw earlier.

These two sets of contrasting graphs are both complex and messy. In combination with what we said above, the contents of the picture are rich. These rich content, whether or not from man-made design, can make our vision stay in the picture for a long time.

However, I believe many people will think that the second pair is more detailed.

And the second picture of the details, from the picture of the composition (axis-style).

This way the composition of the original color and object clutter of the screen, adding a little sense of rule. And the details we think are actually from the sense of the rules.

The first picture, although there is a lot of content to watch, but these content, whether placed in the position, or tonal, are messy. So, even if there is a lot of content available to watch, the messy layout can affect the mood of the viewer, making the viewer unwilling to watch more. and the second picture. Although it is a messy color and objects, but, because of the central axis of the symmetrical composition. Can artificially, make the viewer's visual fatigue lower. Look at the whole first, then the left, then the right. The human visual activity is guided by the composition form. So the sense of detail comes from this.

Above, is the two basic test link. As a matter of fact, I have already told you the two main elements of "detail".

The appearance of the rules of the decorative elements in the screen is another reason for the viewer to have a sense of detail.

Back to the subject.

How does the simple interface make the user feel very detail?

In the front, I mentioned that decorative elements will make the picture a sense of detail. However, these decorative elements of the stack, and simplicity in fact does not conflict.

Let's still look at the legend.

Figure VII:

Figure Eight:

Compare the two groups above. If only from the so-called "concise" point of view, it is clear that the first picture is more concise. However, we do not think that the first picture is more detailed than the second picture.

Therefore, there is no relationship between the details of decoration design and simplicity.

Some designs give people a sense of simplicity and detail. is because the design elements in the picture of a high degree of unity and harmony.

Because the question is the interface design, therefore, after the example, I will use the interface design to do the examples.

Last month, I was looking for an app to write a diary. Looking for a long time, but also see a lot of users recommended applications. But after downloading, open, I do not want to open the second time.

Because the interface design is too rough. I feel it is not responsible for my emotions to write down my mood with that kind of interface application.

Figure Nine:

The app I need is actually very simple, concise, easy to use, and can be synchronized over multiple platforms. Ability to insert pictures with Audio video.

However, some of the applications after downloading.

Figure 10:

Rough design. Where does the roughness come from? The disharmony of the elements. Low-young fonts, the entire interface of the design to pull down.

Concise, but with the details of the design. Refers to the appearance of the elements of harmony and unity.

Even the decorative design, but also in line with the overall tone of the screen, will not appear Shong elements (color, font, graphics, etc.).

Figure 10 above, even if concise, but there is a sense of shanzhai, because the elements (text font) and the picture style is not uniform. The gray background of business sense and dotted line, but with a low young sense of font.

How to design a simple, but also a sense of detail interface?

The first step: learn to do addition

Accumulate your own library of materials.

I have my own library of materials, that's my brain. I usually see a lot. It's different from what you've seen. Every time I see a good design, I will repeatedly ask myself, why do I think this is a good design? is the color of the match impressed me? Good composition? In short, I will constantly ask myself a lot of questions until I know exactly. Then, I feel good about this part of the memory down. into the material library in my head. For a long time, my mind is simply a form of headline writing, and it is no exaggeration to say that there are at least thousands of them. Then, I can develop millions of kinds of new decoration methods by arranging these design methods arbitrarily.

This part of the experience:

In my opinion, it is not the most important to buy any books to learn.

The important thing is how you look at problems and learn.

One day, I was walking along the road with a friend who works in advertising, and we observed a billboard at the roadside station. What he cared about was the structural principle of the steel structure billboard, and I was looking at the big beauty in the picture!

So my advice is to pick up the newspaper you bought and read it with thoughts and questions.

1. When you feel that reading is smoother, you should think about what makes you feel better. Is the spacing between text or text.

2. When you feel that reading is easy, you should think, what is it that makes you feel relaxed? is the font size just right, or is the text color selection compound your habit?

3. When you believe in a certain news content, you should think, in the end is the content of the article is reasonable, or the choice of the title font to make you feel comfortable and acceptable?

The following are no longer enumerated. Only you with the vision of discovery and thinking to read, even if the Xinhua dictionary will be your learning layout design of a good teacher.

With questions to observe, to learn, to remember. Put others into their own, in the brain, accumulate your own material library.

Step two: Learn to do subtraction

Learn to find problems, avoid these problems in their own design, is to do subtraction.

It's a lot to watch, and your mind will be messed up. In learning, in addition to know what to draw, but also know what to discard.

Figure 11:

A font, round smooth run, can be used in the light rejuvenation of the design, this is what we must know. But at the same time, we must also know that it cannot be used in rigorous and particularly formal business situations.

Figure 12:

Figure 13:

Knowing what not to do, and knowing what to do, is equally important!

How does the simple interface make the user feel very detail?

1. Accumulate your own library of materials so you can solve the problem of lack of detail.

2. Again through the search material (decorative design techniques) in the law, to solve the problem of simplicity.

The relationship between the material (composition, color, graphics, fonts, etc.) is harmonious and unified, and the design is naturally concise!

I hope my answer is helpful to you.