Color color, text Font, icon, graphic shape, image, space, space, is a very important 6 elements of graphic design, and for UI design, the icon can be said to be the finishing 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 an object of communication, they have a long and varied history, rooted in antiquity. They appear in maps, signs, programs, manuals, and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons have undergone a new twist of progress.
Historically, Xerox mentioned the first icons for graphical user interfaces in its credits back in the early 1970s: the icons were implemented on a machine called the Xerox Alto, which was very expensive and didn't really reach a wide audience. However, this was only the beginning of a long story: in 1981, the Xerox Star was released, which is known as the first consumer computer to use icons as part of its interface. In particular, it applied the icons that have been used to date for folders and trash cans. Here are icons from the 80s
Icons of Representation (also known as interpretive icons)
A symbol of representation is a symbol that did not originally exist in a physical form, and is a symbol that is created in the course of development to express some specific meaning or operational behavior. And in the process of development, these symbols gradually inherited some of the characteristics of pictograms, taking the symbol itself as a "physical object" and evolving. For example, the arrowhead has gradually evolved from the original "bow and arrow" into a specific ideogram.
Interactive icons
have the ability to convey information in both directions, not only to convey certain information to the user, to guide and help the user to perform specific operations, but also to allow the user to convey control information to the program, which is the most important in terms of functional importance. For example, login and register buttons, switch buttons, quantity buttons, likes, retweets and shares are all interactive icons.
Decorative and Entertainment Icons
These icons are usually used to enhance the aesthetics of the interface and to personalize the design style, and do not have any obvious functionality. These icons cater to the preferences and expectations of the target audience, have a specific style of appearance, enhance the user online experience, cater to the preferences of the audience, and enhance the affinity of the design. Decorative icons are usually characterized by seasonality and periodicity. For example, online activities, user levels, empty pages, etc.
Application Icons
An application icon is a logo that is used as an entry point for different digital products on various operating system platforms and for branding, and is a symbol of the identity of the digital product. In most cases, the brand's logo and brand colors are integrated into the icon design. Some icons also use a combination of mascot and corporate visual identity colors. A truly great app icon design is a combination of market research and branding, and the goal is to create an eye-catching design that users won't be able to quickly find on the screen.
Pictogram icons
ios has been popular for quite some time with the "Skeumorphic design philosophy", which is hyper-realistic. And it is believed that as long as it is possible to increase the realistic and physical latitude in the application, the more similar it is to the reality and the more identical the operation, the easier it is for the user to understand the mode of operation and the higher the acceptance. For example, the famous Mt. Fuji icon in Japan shows that good design is not only aesthetically pleasing, but also functional, especially when it comes to travel-related design, which requires people to cross the language barrier.
Metaphorical icons
The metaphorical element in an icon is important so that we know what it means as soon as we see it. For example, a house means home, and a cross means error or closed. When I downsize an icon, I keep the metaphorical elements in place to make sure the icon still conveys the message accurately.
Tool icons
are categorized primarily by industry, are widely used, are highly recognizable to the general public or insiders, and have been used for a long time. For example: construction industry, medical industry, chemical industry and so on.
Mixed icons
That is, the combination of the first three, the purpose is to achieve different visual effects and application structure. The MBE style icon that was very popular a while ago is a product of the composite icon, which expresses the designer's personal design style or applies to a certain type of software with a strong sense of design.
Character icons
The word "Glyph" originated in the typography field, and now it has gradually taken root in the digital design field with digital design, which is derived from the Greek word meaning "to carve". In typography, a symbolic icon is usually a text-like system that contains a specific meaning, a specific function, and can be either alphabetic or graphic, or sometimes even a combination of the two.
In this type of icon design, the more typical is the weather icon. From a single icon to a combination of icons, it can be fully realized.
Flat icons
Flat icons contain linear, surface type, line + surface, face + surface, the realization of a variety of ways, expandability, more personalized, youthful some, the same, the same design style of the icon, after the replacement of the color can be embodied and conveyed different information.
Anthropomorphic icon
Anthropomorphic icon is the antithesis of the flat icon, just as the original anthropomorphic icon designers often say, it is "copying the reality", as far as possible, the shape of the real world, texture, light and shadow into the whole icon design, anthropomorphism is really the characteristics of it. The design trend of anthropomorphic icons almost followed the birth and evolution of Macintosh step by step, to the extreme, and then from the field of UI design, replaced by flat design. However, anthropomorphic icons are still widely used in different areas, especially in game design and iconography for gaming products. 2.5D icons and desktop app icons.
Windows, iOS, etc., Chinese and English versions, and even various language versions, all look basically the same until you open the menu. Many of the icons have become quickly recognizable to most users, and have even become internationally accepted. For example, the Windows UI
When an icon can express its meaning clearly, it only needs to take up one character to convey operational information to the user. For example, a sweep, mail sent successfully, with the text that requires 3-4 words, English or other languages may be longer, and use the icon instead of only one character position
Alipay upper right corner + indicates more functions, at this time, a character position to explain the meaning of a clear explanation; WeChat the next similar sonic icon indicates voice, intuitive and easy to understand
Into the era of fragmentation and enter the reading of graphic era, almost the same rhythm. Picture content can have a greater impact in a short period of time. Research shows that the brain processes picture content 60,000 times faster than text content, and the human brain's memory for graphic images is much better than its memory for text. Therefore, when promoting a brand, picture content can be said to be a picture is worth a thousand words. Use icons to help users quickly recognize information through visual guidance.
Tik Tok and ins without any text description, we know that the 5th tab is the personal center
Science has proved that in the brain relative to other senses related to visual information processing brain area dominates, the human brain for the image of the memory is much higher than the text. Icons are mostly geometric and designed with symmetry and consistency as the design goal. Due to their highly condensed nature, icons have a more concise character and are easier to remember.
Icons of the lowest logic: linear icons, surface icons, line + surface icons, surface + surface icons, 2.5D icons, anthropomorphic icons. Online a variety of icons are based on these visual distinction, and when we design icons need to think
1, the product visual style positioning (industry sector)
2, the interface of the specific application of the icon
3, the product face of the user population is how?
First look at a group of icons without style, by the above different APP icons can be seen in different industries, different scenes, different users, icon design and expression is not the same, so the design needs to be thought before you need to express the design ideas and positioning of the product.
1, disassemble the keywords and keyword associations
The keywords in the demand information are disassembled and dispersed, and transformed into common things in life, releasing the intrinsic meaning it represents. Keyword synonyms, near-synonyms, shape-related or related associations of objects
For example, when talking about honor, trophies, awards, gold medals, crowns, etc. immediately come to mind. Then through these word associations, to find some temperamentally compatible pictures to create emotional version, through the emotional version can feel the tone of the product, and then extract some shapes and colors as the main shape of the product icon
2, according to the keyword association output graphics
According to the previous step of the word or object disassembled through the basic shape of the simple to turn into a common graphic in life. Commonly used in 2 ways is to use the AI pen tool (sketch Bezier tool) or Boolean operation to draw
3, according to the scene output
Here the scene may be the actual application of the scene, such as the popular Dianping tab tab bar, the functional area (category area), the operation of the class icon and so on these icons need to guide the user to click on it, so visually richer! While the personal center, classification area, details page focuses more on the function of the guide, relatively simple, belongs to the second level of use of the scene, line icon mostly.
We commonly analyze each icon article should pay attention to more than a dozen points, and these are not regular and logical difficult to remember, a moment to remember is also easy to forget. These summaries are actually from Material Design or iOS specifications. Seriously study these details, icon production will not be difficult
Icon endpoints are divided into right angles and rounded corners, we have to unify the icon endpoints in the design process, to maintain a consistent design language
Corners
Relative to other graphics, the human eye is more likely to recognize rounded rectangles rather than straight rectangles, because the human in the physiological construction of the eye on the central concave (fovea The human eye recognizes rounded rectangles more easily than straight rectangles because the fovea centralis (the most visually sensitive area of the retina) is physiologically constructed in the human eye to be the fastest at processing rounded shapes, whereas the processing of rectangular edges requires the involvement of more "neuroimaging tools" in the brain. So, the human eye processes rounded corners more easily because they look closer to a circle than a regular rectangle.
The rounded nature of rounded corners gives people a sense of roundness, loveliness, and greater security and intimacy. Therefore, social, entertainment, live, food and other icons will use rounded icons
Right angle will give a sharp, aggressive feeling, the icon overall details more, usually in the financial and other business attributes of the product is relatively strong. For example, 36Krypton, financial products, etc.
Tilt Angle Uniformity
The inconsistency of the proportion of the internal space easily leads to the visual focus of the icon is not uniform. As shown in the figure below, the second icon on the left is tilted to the bottom, the fourth icon is tilted to the top, and on the right is the label bar icon of the early PP Assistant, the ratio of the icon's internal hollowing area is the same, and the overall visual harmony is unified.
When drawing stroke icons, always pay attention to whether the icon stroke thickness is unified. In the @1x one-fold graph design mode, with 24px as the grid reference, the icon thickness often used are: 1px, 1.5px, 2px, 3px, 1.5 thickness is more demanding on the display (half a unit of the path will lead to blurred edges of the icon when the final display is unclear)
The fine strokes are more delicate, and the coarse strokes are relatively more rugged, due to the development of current trends. Due to current trends, there is often a combination of thick and thin strokes
In addition to maintaining the same visual weight, the width of the icon's strokes should also be consistent to achieve pixel-level uniformity. The minimum spacing between elements should be greater than or equal to the width of the stroke.
Apple, Google, IBM, domestic Ali Ant Design have come out with relevant icon grid specification, here to Google's Material System icon grid to illustrate. In the 24*24px icon size, the top, bottom, left, and right safe margins are 2px, and the four basic shapes of the key shape are circle 20*20px, square 18*18px, vertical rectangle, and horizontal rectangle 20*16px. Through the rules of the key shape to unify the size and position of the icon and to achieve visual balance
Aligning the pixels
Sharpness (pixel perfect) 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 the software AI or sketch to draw the base graphic do not appear decimal points and odd numbers, more even
We understand the basics of icon, how to judge whether our icon is appropriate, whether to fit the whole product? We need to understand what makes a good icon. The test is also based on the criteria we drew, which are: recognizability, standardization, overall style, and sense of branding.
The value of a thing is judged by what it is used for, and the purpose of an icon is to help the user understand the information, so the accurate representation (clear and accurate communication of the information) is the most important, the lowest level of value of the icon, if you design an icon that the user can not understand, even if it is visually beautiful, it does not have any value to speak of.
Meaning recognition: whether the visual language to replace the text language, in short, so that your icon can be understood by the user, will not allow users to produce ambiguity. Common on the label bar compass indicates that the discovery, the house indicates that the home page, etc.
Visual recognition: is the size of the icon, the color, the thickness of the line, these factors affecting the impact of visual recognition, in specific styles to improve visual recognition.
We want to ensure that the icon in the consistency of the visual size, icon fullness (positive and negative shape), follow the same law, the details of uniformity. Here are 4 points in the previous drawing process has been written in great detail.
The overall style is to pay attention to the character of the icon conveyed with the tone of the app is consistent, each product because of the positioning of the target group is different, the tone of the whole app is not the same, for example, Tencent animation, its character is partial cartoon cute type, then the icon design to reflect this character features, try to use the cartoon mellow method to design. An advertising slogan: in a complex world, one is enough, the entire APP from the start icon to the overall tone is simple and clean, restrained use of color to convey the product tone.
Brand sense is what we talked about above to be consistent with the brand concept, conveying the same feeling to the user, by drawing on the brand color, extracting the brand elements, using the brand mascot and the brand graphic method to extract the brand gene. We should try to understand from the perspective of brand design, look for the unique brand temperament of our products, and pick the right technique. Then visualize these elements and integrate them into the interface design. The following products are highly integrated from the product name to the launch icon design.
Icon usability testing is the basic rule is based on icon validation deduction
Recognition:
1, whether the user can understand the meaning of the icon?
2. Is the icon familiar to the user?
3. Does it conflict with the meaning of other icons?
4. Does it pass the 5-second rule?
5. How scalable is the icon?
6. Do I need to add text labels?
Is the design unified
1. Is the visual language unified?
2. Is the design complexity of the icons unified?
3, the overall design is coordinated, unified, highly concentrated visual system?
4. Is the overall color scheme of the icons unified?
Brand message:
Is the icon unique and can it convey the brand message?
In general, there are four delivery formats: JPG, PNG, GIF, SVG. Among them, JPG, PNG, GIF are bitmap, limited by the resolution size of the image itself, and cannot be flexibly modified in size. SVG is a vector format that supports lossless scaling.
Before SVG, because of the need to adapt to high-definition devices, you need to cut a variety of times the icon to adapt. But now the development software and plug-ins come with the ability to cut multiples, such as Blue Lagoon.
JPG: Strong compatibility, comes with a background, does not support scaling.
PNG: supports transparent format, does not support scaling, need to pay attention to the size of the transparent area around the icon.
GIF: Simple to use dynamic icons, transparent background will have jagged edges, there is no way to support rich colors.
SVG: Non-destructive scaling vector graphics, small size, monochrome mode to support the development of their own color changes, you can modify the style parameters.
Another delivery method is to upload the icon in SVG format to a website similar to iconfont to complete the delivery of the icon. Note that:
1, SVG does not support gradient color fill
2, SVG does not support stroke, you need to stroke into a closed image
3, the icon is the same size, you need to add a transparent square of the same size under the icon, with the icon together with the export and upload
The iconfont icon production requirements are strict. You need to check whether your icon meets the requirement when you upload it.
Source
UI designers want to be good at icon design? Do you know the history of icons?
A brief history of iconography
The Icon Design Guide
Icon Utopia
The Ultimate Guide to an Interface Icon Set
The svg icon library and a comparison with icon font