Hello everyone, today I share with you the "Icon Design Details". The size of the icon in the page is small, but it contains a lot of detail. As a universal visual language, it is crucial to grasp the design details in it.
usage
In UI design, there are two main categories of icons: one is the APP startup icon, each APP is unique; the other is the system icon, with text, convenient for users to quickly understand the information, is also the focus of this article.
style
Common icon styles are linear, polygonal, colorful, realistic, 3D, etc., the selection of icons will vary due to the design style of the page, the position of the icons and other reasons, the main role is to feedback the action and attract more attention from the user.
Linearity/Surface: The most basic is also a commonly used style, widely used in page design.
Color: Usually used to feedback the user's actions or increase the user's attention.
3D/Realism: When a certain brother content in the page needs to attract the user's attention, it is used to catch the user's attention.
Tips: Now, in some of the new young products launched by Byte and Baidu, there are many exquisite 3D realistic icons, which are very personalized and well cater to the preferences of young users. At the moment when the flat style is popular, such an attempt is also a breakthrough.
weight
Simple linear icons are lightweight, look more minimalistic, and don't put too much of a visual burden on the page. For example, when the page already has a wealth of pictures and content, it is more suitable to choose a simple, lightweight linear/faceted icon to prevent the page from being too cluttered.
On the contrary, if the current page has only text and very little information, then it is more suitable to use heavy color or even 3D icons to increase the richness of the page, make the page look more designed, and bring visual pleasure to users, simple but not simple.
attribute
The elements that make up the icon include the thickness of the stroke, the square circle of the endpoints, the size of the rounded corners, the weight of the color, and so on, and the expression rules are uniform so that only the viewer is given the minimum changes required to recognize the icon.
Stroke thickness: The stroke thickness commonly used on mobile phones is 2px, 3px, and 4px. 2px looks more refined, and 4px strokes are more visually heavy and can be used as functional icons in areas with higher priority.
Endpoints/nodes: The endpoints of the icon have flat heads, round heads and square heads, and the nodes of the icons have miter connections, fillet connections, and bevel connections, and which style to use should be set uniformly according to the situation of the page.
Corner radius: The square icon corners are too sharp, the user sometimes looks uncomfortable, the rounded corner icon is more rounded, relatively easier for the user to accept. Although the use of rounded corners is more common, the specific use of which to consider the overall style of the page is still decided.
grid
The shape of the icon is round, square, triangle or even irregular shape, so it is difficult for us to completely unify the size of the icon of different shapes.
At this time, the grid plays a very key role, with the grid is equivalent to limiting the icon in advance, and flexibly adjusting the size according to the weight and center of gravity of the icon within the grid range, which will make the icons of different shapes look more uniform.
Visual correction
Due to the limitations of the design software, although some graphics have been centered and aligned, visual correction is sometimes required.
The most typical icon example is the "play" icon, which uses design software to align the middle triangle and find that the position of the triangle looks left.
After using the software alignment, we also need to confirm it with our eyes, and we can move the triangle to the right to ensure that the center of gravity of the triangle is consistent with the center of gravity of the circle, so that the whole playback icon will look more comfortable.
angle
When designing icons, our first reaction is to a two-dimensional graphic without perspective. Because we look at our phones from a heads-up view, most of the icons don't have perspective and look more concise.
Icons with perspective create a sense of space for the user and may feel cognitively dissonant. Although this kind of icon with perspective can attract user attention, it is not recommended.
proportion
Icon scales are often benchmarked using multiples of 8, such as 8px, 16px, 24px, and 32px, for smooth switching in a variety of environments. In addition, in pages with smaller screen sizes such as mobile, multiples of 4px are also used to achieve versatility.
clarity
Icons are designed using the most concise elements that the user can quickly understand. Icons are usually small in size, and to be as user-friendly as possible, some simple metaphorical designs can be used, but the meaning should not be too complicated.
A graph can illustrate the problem, there is no need to add extra graphs. Complex icons can take a long time for the user to understand their meaning, which can affect the user's actions.
detail
This is as clear as the icons just mentioned. The most important goal of icons is to quickly convey information, especially for system icons with small size, it is best to keep only the most basic content and remove excess decorative elements.
consistency
By consistency, this does not mean that all pages in a product can only use one icon style. A product has many pages, and various icon styles such as linearity and polygonality can be used together.
But in the same page scene, icons that perform the same function should remain the same style.
Familiarity
For different operating systems, such as iOS and Android, there will be differences in the icons corresponding to the same function. For different systems, we can choose icons that are familiar to most users, so that users can understand the meaning of the icons more quickly
At last
The above are the common but easy to ignore the details of icon design, I hope that through these contents can help you have a deeper understanding of icon design.
Take your time faster, hope it helps you!