icon is a kind of graphical logo, which has two concepts: broad sense refers to all graphic symbols with clear pointing meaning in reality, and narrow sense mainly refers to graphic symbols in the interface of computer equipment. For UI, it is mainly aimed at the narrow concept, which is one of the key elements of visual composition of UI interface. What we see through the icon is not only the icon itself, but the inner meaning it represents.

color, Font, icon, graphic shape, image and space are six very important elements in graphic design. For UI design, icons can be said to be the crowning touch of the whole product, which can even directly affect the image and temperament of a product.

obviously, icons were not invented by interface designers. As an object of communication, they have a long and diverse history and are rooted in ancient times. They appear in maps, signs, programs, manuals and many other sources of information. However, with the emergence of new technologies and graphical user interfaces, icons have undergone a new turning point.

Historically, in the early 1971s, Xerox Company mentioned the icon of the first graphical user interface: the icon was realized on a machine named Xerox Alto, which was very expensive and did not really spread to the vast number of users. However, this is only the beginning of a long story: in 1981, Xerox Star was released, which was called the first consumer computer with icons as part of its interface. In particular, it applies the icons of folders and trash cans so far. The following are icons

ideographic icons (also known as explanatory icons) from the 1981s

ideographic symbols refer to symbols that did not exist in the original, and are created in the development process to express certain meanings or operational behaviors. Moreover, in the process of development, these symbols gradually inherited the characteristics of some pictographic symbols, and regarded the symbols themselves as "physical objects" and constantly evolved. For example, the "arrow" has been gradually derived from the original "bow and arrow" into a specific ideographic symbol.

Interactive icon

has the ability of two-way information transmission, which can not only transmit some information to users, guide and help users to perform specific operations, but also allow users to transmit control information to programs. In terms of functional importance, it is the most important. For example, login registration button, switch button, quantity button, like, forward and share are all interactive icons.

icons for decoration and entertainment

are usually used to enhance the aesthetic feeling of the whole interface and deepen the personalized design style, and do not have obvious functionality. This kind of icon caters to the preferences and expectations of the target audience, has a specific style of appearance, enhances the user's online experience, caters to the preferences of the audience, and enhances the design affinity. Decorative icons usually show seasonal and periodic characteristics. For example, online activities, user ratings, empty pages, etc.

Application icons

Logos for the entrance and brand display of different digital products on various operating system platforms, which are the identity symbols of this digital product. In most cases, it will integrate the brand LOGO and brand color into the icon design. Some icons will also use a combination of mascots and corporate visual identity colors. The truly excellent application icon design is actually a combination of market research and brand design, and its goal is to create an eye-catching design that users can't find quickly on the screen.

pictographic icon

The "Skeumorphic Design Concept" has been popular in iOS for quite a long time, which belongs to surreal design. It is believed that as long as it is possible to increase the practical and physical latitude in application, the more similar it is to reality and the more identical it is to operation, the easier it is for users to understand the operation mode and the higher their acceptance. For example, the famous icon of Mount Fuji in Japan shows that good design is not only beautiful, but also functional, especially the design related to tourism needs people to cross the language barrier.

Metaphorical icon

The metaphorical elements in the icon are very important, which can let us know what it means as soon as we see the icon. For example, a house represents the home page, and a fork represents an error or closure. When I shrink an icon, I always keep the metaphorical elements to ensure that the icon can still convey information accurately.

tool icons

are mainly classified by industry category, and they are widely used, highly recognized by the public or insiders, and have been used for a long time. For example: construction industry, medical industry, chemical industry and so on.

mixed icons

are the combination of the first three, aiming at achieving different visual effects and application structures. The MBE rough stroke style icon, which was popular some time ago, is the product of comprehensive icons, which mostly expresses the designer's personal design style or applies to some kind of software with strong design sense.

character icon

The word "Glyph" comes from the field of typesetting, and now it has gradually taken root in the field of digital design with digital design. It comes from Greek and means "sculpture". In the field of typesetting, symbol icon is usually a kind of writing system with specific meaning and function, which can express meaning and write. It can be letters, graphics, and sometimes even a combination of the two.

in this kind of icon design, the weather icon is a typical one. From a single icon to a combination icon, it can be fully reflected.

flat icons

flat icons include linear, planar, line+planar, planar+planar, which are diversified, extensible, more personalized and younger. Icons with the same design style can reflect and convey different information after changing colors.

Quasi-materialization icon

Quasi-materialization icon is the opposite of flat icon, just as the designer of the original quasi-materialization icon often said, it is "copying reality", and it is its characteristic to try to integrate the shape, texture, light and shadow in the real world into the design of the whole icon. The design trend of quasi-materialized icons almost came step by step with the birth and evolution of Macintosh, and then it was replaced by flat design from the field of UI design. However, quasi-materialized icons are still widely used in different fields, especially in game design and icon design of game products. 2.5D icon and desktop application icon.

Windows,iOS, etc., Chinese version, English version and even various language versions are basically the same before opening the menu. Many icons have been quickly recognized by most users and even become international icons. For example, when an icon in Windows UI

can clearly express its meaning, it only needs to occupy the position of one character to transmit the operation information to the user. For example, if the email is successfully sent, it takes 3-4 words to use the copy, which may be longer in English or other languages, and only one character position is needed to replace it with the icon

Alipay upper right corner+indicates more functions, and then a character position explains its meaning clearly; The next sound wave icon on WeChat represents voice, which is intuitive and easy to understand.

Entering the era of fragmentation and reading pictures is almost the same rhythm. Picture content can have a greater influence in a short time. Research shows that the speed of brain processing picture content is 61111 times faster than that of text content, and human brain's memory of graphics and images is far better than that of text. Therefore, when promoting the brand, the picture content can be said to be a picture worth a thousand words. Use icons to help users quickly identify information through visual guidance.

in the absence of any written explanation of tiktok and ins, we know that the fifth label is personal center.

Scientific proof shows that the brain area related to visual information processing is dominant in the brain compared with other senses, and the memory of the human brain for images is much higher than that of words. Icons mostly use geometric figures and are designed with symmetrical and consistent design goals. Because of its highly concentrated characteristics, icons are more concise and easier to remember.

the lowest logic of icon: linear icon, area icon, line+area icon, area+area icon, 2.5D icon and quasi-object icon. All kinds of icons on the Internet are visually distinguished on the basis of these, and when we design icons, we need to think about

1, product visual style positioning (industry field)

2, icon specific application interface

3, what kind of user population is the product?

Let's look at a group of icons with different styles. From the different APP icons above, we can see that the design and expression of icons are different in different industries, different scenes and different users, so you need to think about the design ideas and product positioning you need to express before designing.

1. Disassemble keywords and keyword association

Disassemble and disperse keywords in demand information, turn them into common things in life, and release the internal meaning they represent. Synonyms, synonyms, objects with related shapes or related associations of key words

For example, when it comes to honor, trophies, certificates, gold medals, crowns and so on can be immediately thought of. Then through the association of these words, we can find some pictures with the same temperament to make an emotional version. Through the emotional version, we can feel the tonality of the product, and then extract some shapes and colors from it as the main shapes of product icons.

2. According to the keyword association, we can output graphics.

According to the words or objects disassembled in the previous step, we can turn them into common graphics in life through simple basic shapes. The commonly used 2 methods are to draw with AI pen tool (sketch Bessel tool) or Boolean operation

3. Output according to the scene

The scene here may be a practical application scene, such as public comment tab bar, functional area (category area), operation icon and so on, which need to guide users to click, so it is more visually rich; However, the personal center, classification area and details page pay more attention to functional guidance, which is relatively simple and belongs to the secondary usage scene, with many linear icons.

We should pay attention to ten points in the analysis of common icon articles, which are hard to remember without rules and logic, and are easy to forget once remembered. These summaries are actually derived from Material Design or iOS specifications. After careful study of these details, it is not difficult to make icons.

Icon endpoints are divided into right angles and rounded corners. We should unify icon endpoints in the design process and maintain a consistent design language.

Corners

Compared with other graphics, human eyes are more likely to recognize rounded rectangles rather than right-angled rectangles, because the fovea centralis is the most visually sensitive area in the retina, which is the fastest when dealing with circles. Therefore, it is easier for human eyes to deal with rounded corners because they look closer to a circle than ordinary rectangles.

the round nature of the fillet itself will give people a rounded, lovely, safer and more intimate feeling. Therefore, social, entertainment, live broadcast, food and other icons often use rounded corners.

The right angle will give people a sharp and aggressive feeling. The overall details of the icons are more, and they usually appear in products with strong business attributes such as finance. For example: 36Kr, financial products and so on.

uniform inclination angle

Inconsistent internal space ratio easily leads to inconsistent visual focus of icons. As shown below, the second icon on the left is slightly lower, and the fourth icon has a higher center of gravity. On the right is the tab bar icon of the early PP assistant. The percentage of hollowed-out area inside the icon is the same, and the overall vision is harmonious and unified.

when drawing a stroke icon, always pay attention to whether the stroke thickness of the icon is uniform. In the design mode of @1x, if 24px is used as the grid benchmark, the commonly used icon thicknesses are 1px, 1.5px, 2px and 3px. The thickness of 1.5 requires a higher display screen (a half-unit path will lead to the blurred edges of the icon when it is finally displayed)

The thin strokes give people a more refined visual sense, and the rough strokes are relatively rough, due to the development of the current fashion trend. There is often a design style that combines rough and thin strokes

In addition to maintaining the same visual weight, the stroke width of icons should also be consistent to achieve pixel-level unity. The minimum spacing between elements should be greater than or equal to the width of strokes.

apple, Google, IBM, and domestic Ali Ant Design have all published relevant icon grid specifications. here, Google's Material System icon grid is used to illustrate. In the icon size of 24*24px, the top, bottom, left and right safety margins are 2px, and the four basic shapes of key shapes are circle 21*21px, square 18*18px, vertical rectangle and horizontal rectangle 21*16px. Unify the size and position of the icon through the rules of key shapes to achieve visual balance

Alignment of pixel points

Clarity (perfect alignment of pixels) In order to avoid distorting the icon, you can position the icon on the pixel by setting the X-axis and Y-axis coordinates as integers. When using AI or sketch software, do not draw basic graphics with decimal points and odd numbers, but with even numbers < P > We know the basic knowledge of icon, how to judge whether our icon is suitable or not and whether it fits the whole product? We need to know what is a good icon. The inspection standards are also based on the standards we draw, namely: identifiability, standardization, overall style and brand sense.

judging the value of a thing lies in its purpose. The purpose of an icon is to help users understand information, so the most important and lowest value of an icon is its accurate ideographic meaning (clearly and accurately conveying information). If you design an icon that users can't understand, even if it is visually beautiful, it has no value at all.

meaning recognition: it means whether the visual language replaces the written language, in short, it means that your icon can be understood by users without causing ambiguity. Common visual recognition

is that the compass in the label bar indicates discovery, and the house indicates the home page. It is the size, color and line thickness of the icon, which affect the visual recognition and improve the visual recognition in specific styles.

We should ensure the consistency of the visual size of icons, their fullness (positive and negative shapes), following the same law, and the unity of details. The four points here have been written in great detail in the previous drawing process.

the overall style is to pay attention to whether the character conveyed by the icon is consistent with the tone of the app. Because of the positioning of each product, the tone of the whole app is different for different people. For example, Tencent Animation is a cartoon-loving type, so the icon design should also reflect this character, and try to use cartoon-rounded methods to design. A slogan: In a complex world, one is enough, and the whole APP is simple, clean and restrained from the startup icon to the overall tonality.