Icon is one of the most important elements in interface design, and it is also a necessary skill for US UI designers. In our daily work, we often receive requests for icon design and optimization. But what exactly is a good icon? Perhaps many designers do not have a complete evaluation system, just by feeling, which will lead to unstable output, time-consuming and other undesirable consequences.
Therefore, I took this opportunity to sort out a set of evaluation system for icon design self-inspection, with a total of five dimensions. The outline is as follows:
1. Identify
2. The character
3. The brand
4. The full
5. Details
1. Identify
The value of something is what it is used for!
The purpose of an icon is to help users understand information, so “identification” is the most important and lowest value of an icon. If you design an icon that users can’t understand, no matter how beautiful it is visually, it has no root and no value at all!
Identification can be divided into two aspects, one is meaning recognition, the other is visual recognition.
First, meaning identification: Is simply your icon can be understood, of course, is not a designer I can understand is ok, but users need to decide, here share with you a I judge whether the icon is easy to identify – internal user survey method, namely random ask some internal personnel team, had better ask some more jobs, thus the result is more reliable, case is as follows:
When I was revising the icon of “topic”, I thought of the “#” of Weibo, so I combined the “#” with the bubble box, as shown below:
At this time, I found 10 internal personnel to conduct a test, and only 3 of them could understand the meaning of the icon (these 3 people are often playing weibo). Under such data, there is no hesitation, this plan is definitely not advisable.
When you do research, at least 80% of people need to understand it to prove that your solution is viable.
Visual recognition: as the name suggests, this has nothing to do with the meaning of the icon, but visual issues, such as size, background color and other factors that hinder user recognition.
Here introduce a foreign test results, it is I see in which a predecessor of the article, the test includes a set of four kinds of style icon: white with solid black icon, white with hollow ICONS, black text on a black white solid icon, black white hollow ICONS, after 10 days, 1260 participants completed a total of more than 25000 times a second icon of cognitive tests. The data obtained were divided into four groups for two-way variance analysis. Under the same statistical conditions, the time of selecting the white hollow icon with black background was 0.17 seconds slower than the other three combinations, which means that the information expression ability of this icon would be less weak, as shown in the figure below:
Therefore, with the support of such theories and data, I modified some ICONS as follows:
All the ICONS with background color are changed from linear to planar. If they are not planar (such as clocks), a bold stroke is required to improve visual recognition.
Remember, recognition is the most important value of an icon, especially if there is no text, so don’t confuse the user or you will be consuming the user experience, not empowering it!
2. The character
Imagine if a person has no character, that person has no soul, the icon is the same, no character, no soul.
How to create our own personality? We need to start from users and brands. For example, Tencent animation users are animation and cosplay fans, giving people a cute and lovely feeling, so we need to make the icon as rounded as possible:
Enlarge the rounded corners like the # 2 icon above to make the icon look more rounded and lovely.
Based on this audience, we also changed some of the original monochrome ICONS to the following color ICONS:
The goal is to make the icon’s lovely and lively character more obvious.
3. The brand
Brand is the latitude we often mention, there are many commonly used to extract brand genes, color, graphics, mascot and so on, here are two examples, one is the concrete brand gene – mascot:
We have our own brand mascot — Sunspot, so we can use it in icon design. The following picture is the “funny coin” icon designed with the image of sunspot:
Another abstract example is to extract brand genes from logos.
As the font strokes of the logo are thick, the overall impression is thick and full:
Therefore, we can extract the “fat and plump” brand gene in the brand logo without having to decide whether to use a 2px stroke or a 3px stroke in this context:
We can safely use a 3px stroke, as it fits both the brand’s DNA and the user’s personality (fat, rounded, cute).
4. The full
A lot of times we don’t make ICONS that are pretty, and one of the big reasons is that they’re not full enough.
How do you determine if your icon is full? The way I usually measure it is to add a rectangle to the icon to see if the area of the icon’s conformal can be increased.
For example, blue is positive and red is negative:
It is obvious that the conformal area of blue can be increased, for example:
This is to increase the fullness of the icon, which is how I changed the fullness of the icon.
Take a real example, our original continuation icon has a top-down structure, while the graph in the upper department is too narrow, resulting in too much blank space in the upper left corner and upper right corner (that is, too many green parts), which does not fill the rectangle, as shown below:
So I adjusted the structure of the icon to reduce the green part as much as possible, and finally achieved something like the following:
Finally, we remind you that for the fullness of the icon, but also need to be combined with the visual effect of the whole set of ICONS to debug, although the above method can solve the problem of large department ICONS full, but still need to specific scene specific analysis, remember, our goal is to make the whole set of ICONS look harmonious, unified, delicate!
5. Details
Details also include many aspects, such as:
5.1 Whether the angles are consistent or follow certain rules:
Our custom Angle specification is a multiple of 30 degrees, which greatly improves the uniformity of the icon.
5.2 Details at the end of the stroke
Here is an example of an error: one stroke ends at a right Angle and another is rounded:
We must ensure uniformity in dealing with such details.
5.3 pixels on its issues
You might think it’s ok to export ICONS of other multiples as long as one size is pixel aligned, but this is not true, because when exporting 0.5 or 1.5 multiples, pixels will easily become misaligned again.
For example, we make an icon based on a 2x graph, and then export the 3x graph uniformly. Then the 3x graph is 1.5 times the 2x graph. When exporting, the following situation occurs:
Although the 2-fold image is pixel aligned, the 3-fold image is not aligned. If the designer does not carefully check the cut image, the icon on the line will be false. Therefore, when we output the cut image, we must carefully check and adjust the error in time to avoid bad effects.
In addition to the above, there are visual size, rounded corners, stroke thickness is uniform details, of course, these are easier to understand, not one example, we must pay more attention to when doing icon design.
conclusion
Comb the five weft self-checking method can be used in logo design revision of self-examination, optimization of multiple aspects, such as, perhaps it is not comprehensive, but has a certain reference value, hoping to bring enlightenment and inspiration, and we will work harder, strive to make better work and tutorials communicate with in the design of the road you share!
Edit: Thousand front UI design
Author: Tencent Animation TCD1
Source: Zcool