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, and it can even directly affect the image and temperament of a product.
Obviously, icons were not invented by interface designers. As objects 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 experienced a new turning point.
Historically, in the early 1970s, Xerox 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 majority of users. However, this is only the beginning of a long story: in 198 1 year, Xerox Star was released, which is called the first consumer computer with icons as part of its interface. In particular, it uses icons of folders and trash cans so far. The following are icons from the 1980s.
Ideographic icon (also known as explanatory icon)
Ideographic symbols refer to symbols that did not exist originally, but were created in the process of development to express certain meanings or operational behaviors. Moreover, these symbols gradually inherited the characteristics of some pictographic symbols in the process of development, and regarded the symbols themselves as "physical objects" and constantly evolved. For example, "arrow" has gradually evolved from the original "bow and arrow" into a specific ideographic symbol.
Interactive icon
It has the ability of two-way information transmission, which can not only transmit some information to users and guide them to perform specific operations, but also allow users to transmit control information to programs, which is the most important in terms of functional importance. For example, the login button, switch button, quantity button, like, forward and share are all interactive icons.
Decorative and entertaining icons
It is usually used to enhance the aesthetic feeling of the whole interface and deepen the personalized design style, and it has no obvious functionality. This icon caters to the preferences and expectations of the target audience, has a specific appearance style, enhances the online experience of users, caters to the preferences of the audience, and enhances the design affinity. Decorative icons usually show seasonal and periodic characteristics. Such as online activities, user ratings, empty pages, etc.
Application icon
The entrance and brand display signs of different digital products on various operating system platforms 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 recognition 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
Ios has been popular with "Skeumorphic design concept" for quite a long time, which belongs to ultra-realistic design. It is believed that as long as the actual and physical scope of the application can be increased, the more similar it is to reality and the same as the 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 icon are very important, so we can know its meaning as soon as we see it. For example, the house represents the home page, and the cross represents an error or shutdown. When I shrink icons, I always keep metaphorical elements to ensure that icons can still convey information accurately.
Tool icon
Mainly classified by industry category, it is widely used, highly recognized by the public or insiders, and has been used for a long time. For example: construction industry, medical industry, chemical industry and so on.
Mixed icon
In other words, the combination of the first three aims to achieve different visual effects and application structure. Recently, the popular MBE style icon is the product of comprehensive icons, which mostly expresses the designer's personal design style or is suitable for some kind of software with strong design sense.
Character icon
The word "glyph" comes from the field of typesetting, and now with the development of digital design, it has gradually taken root in the field of digital design. It comes from Greek, which means "sculpture". In the field of typesetting, symbol icon is usually a writing system with specific meaning and function, which can express meaning and write. It can be letters, graphics, and sometimes even a combination of both.
In this icon design, the weather icon is a typical one. From a single icon to a combination icon, it can be fully reflected.
Plane icon
Plane icons include linear, plane, line+plane and plane+plane. Diversified, extensible, more personalized and younger icons have the same design style, and can reflect and convey different information after changing colors.
Quasi-materialized icon
The quasi-materialized icon is the opposite of the plane icon. As the designer of the quasi-materialized icon often says, it is "copying reality", trying to integrate the shape, texture and light and shadow in the real world into the design of the whole icon, which is its characteristic. The design trend of quasi-materialized icons almost came step by step with the birth and evolution of Macintosh, and later 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. The 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. Such as Windows UI.
When an icon can clearly express its meaning, it only needs to occupy the position of one character to convey operational information to the user. For example, if an email is successfully sent after scanning, it will take 3-4 words to represent its copy, and it may be longer in English or other languages, but only one character position is needed to replace it with an icon.
The+in the upper right corner of Alipay indicates more functions. At this time, a character position explains its meaning clearly; The next similar sound wave icon on WeChat represents voice, which is intuitive and easy to understand.
Entering the era of fragmentation is almost the same rhythm as reading pictures. The content of pictures can have greater influence in a short time. Research shows that the speed of brain processing picture content is 60000 times faster than that of text content, and the 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.
There is no written explanation about Tik Tok and ins, and we know that the fifth label is personal center.
Science has proved that the brain regions related to visual information processing are dominant compared with other senses in the brain, and the memory of images in the human brain is much higher than that of words. Icons mostly use geometric figures and are designed with symmetrical and consistent design goals. Because of its high concentration, icons are more concise and easier to remember.
The lowest logic of icons: straight line icon, plane icon, straight line+plane icon, plane+plane icon, 2.5D icon, simulacrum icon. All kinds of icons on the internet are visually distinguished on these bases, so we need to think about it when designing icons.
1, product visual style positioning (industry field)
2. Icon specific application interface
3. What is the user group of the product?
First look at a group of icons with different styles. As can be seen from the different APP icons above, different industries, different scenes and different users have different designs and expressions of icons, so you need to think about the design ideas and product positioning you need to express before designing.
1, disassembles keywords and keyword associations.
Disassemble and disperse the key words in demand information, turn them into common things in life, and release the inherent meaning they represent. The related association of synonyms, synonyms, objects with related shapes or keywords.
For example, when it comes to honor, you can immediately think of trophies, certificates, gold medals, crowns and so on. Then through the association of these words, find some pictures with the same temperament to make an emotional version, through which you can feel the tonality of the product, and then extract some shapes and colors as the main shapes of the product icon.
2, according to the keyword association output graphics.
According to the words or articles disassembled in the last step, they are transformed into common figures in life through simple basic shapes. The commonly used 2-in-2 method is to draw with AI pen tool (sketch Bessel tool) or Boolean operation.
3, according to the scene output
The scenes here may be practical application scenes, such as public comment tab bar, function area (category area), operation icon, etc., which need to guide users to click, so they are more visually rich; However, the personal center, classification area and details page pay more attention to function guidance, which is relatively simple and belongs to the secondary use scene, with more linear icons.
Ten points should be paid attention to in the analysis of common icon articles, but these are difficult to remember without rules and logic, and they are easy to forget once they are remembered. These summaries actually come from material design or iOS specification. If you study these details carefully, it is not difficult to make icons.
Icon endpoints are divided into right angles and rounded corners. We should unify icon endpoints and maintain a consistent design language during the design process.
corner
Compared with other graphics, it is easier for human eyes to recognize rounded rectangles instead of right-angled rectangles, because fovea is the most sensitive area in the retina of human eyes, and processing the edges of rectangles requires more "neuroimaging tools" in the brain. Therefore, it is easier for human eyes to deal with rounded corners because they look closer to a circle than ordinary rectangles.
The round shape of the fish fillet itself will give people a round, lovely, safer and more intimate feeling. Therefore, social, entertainment, live broadcast, food and other icons will use rounded icons.
The right angle will give people a sharp and aggressive feeling, and the overall details of the icon are also more, usually appearing in products with strong commercial attributes such as finance. For example: 36Kr, wealth management products and so on.
Uniform dip angle
Inconsistency in the proportion of internal space can easily lead to inconsistency in the visual focus of icons. As shown in the figure 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 datum, the commonly used icon thicknesses are: 1px, 1.5px, 2px, 3px and 1.5, which requires a higher display screen (half-unit path will cause the edges of icons to be blurred in the final display).
Fine strokes give people a more exquisite visual sense, while thick strokes are relatively rough. Due to the development of current fashion trends, there is often a design style that combines thick strokes with fine 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 stroke width.
Apple, Google, IBM and Ali Ant Design in China have all released 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 circular 20*20px, square 18* 18px, vertical rectangle and horizontal rectangle 20* 16px. The size and position of icons are unified through the rules of key shapes to achieve visual balance.
Align pixel points
Sharpness (perfect pixel alignment) To avoid distorting the icon, you can position the icon on the pixel by setting the X-axis and Y-axis coordinates to integers. When using software AI or sketch, when drawing basic graphics, don't have decimal points and odd numbers, but use even numbers.
We know the basic knowledge of icons, how to judge whether our icons are suitable or not, and whether they are suitable for the whole product? We need to know what a good icon is. The inspection criteria are also based on our standards, namely: identifiability, standardization, overall style and brand sense.
Judging the value of a thing lies in its purpose, and the purpose of icons is to help users understand information. Therefore, accurate ideographic expression (clear and accurate information transmission) is the most important and lowest value of icons. If you design icons that users can't understand, even if the visual effect is beautiful, it has no value.
Meaning recognition: whether visual language replaces written language, in short, is to make your icon understandable to users without causing ambiguity. The common label bar compass indicates discovery, and the house indicates home page.
Visual recognition: It is the size, color and line thickness of icons that affect and improve visual recognition in a specific style.
We should ensure the consistency of icons in visual size, the fullness (positive and negative shapes) of icons, and follow the same rules and the unity of details. The four points here have been written in 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. Due to the different positioning of each product, the tone of the whole app varies from person to person. For example, Tencent Animation is a cartoon type, so the icon design should also reflect this character, and try to design with cartoon rounded corners. A slogan: In a complex world, one is enough. The whole APP is simple and clean from the startup icon to the overall tonality, and the restrained color use conveys the tonality of the product.
Brand sense means that we should be consistent with the brand concept mentioned above and convey the same feelings to users. Brand genes are extracted by absorbing brand colors, extracting brand elements and using brand mascots and brand graphics. We should try to understand from the perspective of brand design, find the unique brand temperament of our products and choose appropriate methods. Then these elements are visualized and integrated into the interface design. The following products are highly integrated from product name to startup icon design.
Icon usability testing is a basic rule, which comes from icon verification.
Recognition degree:
1. Can users understand the meaning of the icon?
2. Is it an icon familiar to users?
3. Does it conflict with other icons?
4. Can you pass the 5-second rule?
5. How scalable is the icon?
6. Do I need to add a text label?
Is the design uniform?
1. Is the visual language unified?
2. Is the design complexity of icons uniform?
3. Is the overall design coordinated and highly centralized in the visual system?
4. Is the overall color matching of icons uniform?
Brand information:
Is the icon unique and can it convey the brand message?
Generally speaking, there are four delivery formats: JPG, PNG, GIF and SVG. Among them, JPG, PNG and GIF are bitmaps, which are limited by the resolution of the picture itself and cannot be modified flexibly. SVG is a vector format that supports lossless scaling.
Before SVG, icons with various multiples need to be cut to adapt to high-definition devices. But now the development software and plug-ins have their own functions of cutting multiple images, such as blue lagoon.
JPG: Strong compatibility, with its own background, and does not support zooming.
PNG: Transparent format is supported, but scaling is not supported. Note the size of the transparent area around the icon.
GIF: Simple dynamic icons are used. When the background is transparent, the edges will be jagged, so there is no way to support rich colors.
SVG: lossless scaling vector graphics, small size, support color development and self-modification in monochrome mode, and can modify style parameters.
Another delivery method is to upload the icon in SVG format to a website similar to iconfont, and then complete the delivery of the icon. It should be pointed out that:
1, SVG does not support gradient color filling.
2.SVG does not support strokes, so strokes need to be converted into closed images.
3. When the icons are the same size, you need to add a transparent box with the same size below the icon, and export and upload it together with the icon.
On the other hand, Iconfont has strict requirements for icon making, so you need to pay attention to check whether your icon meets the requirements when uploading. interconnection
data source
UI designers want to do icon design well? Do you know the history of icons?
A brief history of iconology
Icon design guide
Utopia of Icons
Ultimate Guide to Interface Icon Set
Svg logo library and its comparison with icon fonts
What gifts should I give to my parents for their birthday?