How to face the visual error when designing the interface?

Source: Internet
Author: User

The recent "Blue Black-and-white gold" event is very fire, causing the people to think about the visual error. For the students who do "visual design", visual error is also worth studying. As the saying goes: "Ears to listen to the virtual, seeing for the real", can not be denied that the eyes are the most direct sensory organs, the most reflective of the original things. But is the eye to see whether it must reflect the objective facts? In fact, not necessarily. Human eyes, has its unique imaging principles and information processing process. Just like all computer programs, the more sophisticated programs will have bugs, so sometimes the eye will also have an illusion, and even the subjective feelings of different people will have subtle differences.

What we need to summarize as visual designers is: How do we deal with these visual bugs when we meet them?

Let's take a look at some of the classic visual error cases to feel it.

An ice-Sith hallucination.

Yellow-green circles and purple circles are actually the same size, but the former looks smaller, isn't it amazing?

Toransken Curved Illusion

Guess which is the largest diameter of these three circles? It's all the same o_o

Parallel illusion

are actually parallel lines (⊙_⊙)?

In the design work, it is unavoidable to encounter the scene of the existence of visual errors. In general, the way we handle visual errors in interface design can be divided into three areas:

1, sometimes we need to avoid creating visual error design

For example, "process bar", designers must be not unfamiliar, it can help users very clearly understand the completion of a goal of the whole process and the current position, then we look at the following "Process bar" design

This design should also be very common, but the individual does not like this form, read the above classic visual error case students should notice, it and the third "parallel Line illusion" shape, "parallel" with ">>" may cause visual errors, people feel that the parallel lines are not parallel. will give a person uncomfortable feeling, have compulsive disease person to see more can not stand? ~>_<~+, although the illusion is not so obvious, but I will avoid using this form.

Another example: interface design, often encounter the partition of the module, will use the color block and wireframe, look at the picture below, you will feel the black line is convex out, normal people like to Zima, then see this will feel uncomfortable, in fact, look at the enlarged parts, in fact, objectively see they are really aligned, Because the illusion of the human eye leads to a misalignment of feelings, so we want to avoid this color block and wireframe contact design, if the need for such a form, then we also have methods, it is to reduce the "color block" and "line" of the difference between the light and shade to ease the visual error: (see the right side of the figure) is not feeling much better

2, sometimes we need to use visual error

Visual error objectively exists, then we have to follow its rules, understand it to control it. For example, pixel painting:

Early in the red and white machine era, pixel painting swept the world, it has its own unique advantages: Small file bytes, accounting for small memory, very suitable for the year "Turtle Speed Network" and "inefficient CPU." But to draw a good pixel painting, you need to have some expertise.

For lines, points, curves, three-dimensional, perspective, and so there are standard rules, the pixel draw closer to see, in fact, are some pixels, only to see the whole of the overall can be seen the final effect (a bit like oil painting).

Zoom in and look at the whole, pixel painting to the feelings of the difference is very large, there are "visual error", then these pixel painting "rules", in fact, is based on the visual error of the "use", if not the rules, make out the pixel painting that will be miserable, all kinds of sawtooth.

Pixel painting in the performance of the thickness of the line also pay attention to, because the pixel painting 1 pixel lines and 2 pixel line visual thickness difference is very large, then in the performance of thickness, more is the color of the light and shade to express. In pixel painting you can use tints to express "thin lines", which is to use the visual error. In addition, "expansive color", "contraction Color", are visual error performance, designers can use its characteristics, in their own works better visual information transmission.

3, in the face of visual error, we follow a principle of "to your feelings as a standard"

There are many causes and types of visual errors, and I find it difficult to enumerate how we should deal with them if we have to face them. And look at the following examples:

To do icon is a very rigorous thing, we look at the above picture, the first case, see the Guide line, they are highly consistent, but the shape of the icon is not the same, the third icon shape is a circle, "round" in fact can give people "full, swelling" of the visual feeling, clearly the same high width, the circle will give people a "bigger" feeling , then we encounter this situation, will respect our eyes, the "circle" relatively narrow some, that is, we see the third situation, this is not more comfortable?

Well, that's it for sharing.

In short, visual designers need to pay attention to and understand the impact of "visual error", think how to better deal with the pursuit of "perfect" to increase the weight. You are welcome to explore.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

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: and provide relevant evidence. A staff member will contact you within 5 working days.