Icons can be divided into two broad and narrow sense, the broad sense is worth all the reality has a clear reference to the meaning of the graphic symbols, the narrow sense mainly refers to the image symbols in the interface of the computer equipment, there is a very large coverage
Icons can be roughly divided into four major categories
Generally refers to the function of a clear, suggesting the meaning of the icon, used in navigation, diversion, etc. But the different pages of the navigation icon for the information hierarchy and operation, but also for the purpose of the navigation icon for the information hierarchy and operation.
The navigation icons on different pages have different visual style requirements due to the hierarchy of information and operational needs.
Navigation icons can be divided into tabbar icons, Vajra icons, personal center and other functional icons
Tab bar icons are routinely shown as linear, surface, line and surface combination, but there are also focus on branding, personalization, or operational activities, and the style will be close to the brand, or related to recent events
Vajra icon styles are more diverse, and generally speaking, visual hierarchies and operations require different visual styles.
The icons in the personal center and other pages are mainly decorative and explanatory, and removing the icons will not affect the overall navigation, and the icon design style is usually not overly complex, and is mostly displayed in a linear style
Decorative and explanatory illustrations are mainly used to make the visual neatness and ornamental, and to make the brand and the atmosphere feel stronger. Operational activities, VIP rights and other interfaces, visual style to follow the tone of the page
The start icon serves as a brand identity function, equivalent to the product logo design, need to be integrated into the brand tone, and due to the limitations of the use of scenarios, but also requires the start of the icon to follow the design specifications to ensure that the minimum size of the recognition of the status of the majority of the icons are displayed in the following form.
Most of the startup icons are not designed to be overly complex, also due to the fact that overly complex icons will increase the user's cognitive costs, especially in the era of the Internet information explosion, the use of flat icons can effectively reduce the user's cognitive costs, and through the enhancement of the color perception of the user's mind by strengthening the way to occupy the mind.
Activity operation icon is time-sensitive, the design theme and style of the holiday related, mainly used to increase the festive atmosphere, to enhance the click rate, etc.
The design style is not set in stone, according to different scenarios and user populations need to use different styles of icons, such as operational activities, but also need to do the relevant tone according to the operation of the style
The icon of the design style can be divided into the following categories. The design style can be roughly divided into the following categories
Here is only a list of common design forms, the specific use and whether the need for innovation depends on the specific use of the scene
Faceted icons can be divided into colorless, monochrome, multi-color, gradient color, and so on, depending on the specific use of the scene
This design style is common in some small games or H5 activities
The 3d flat style is also coming in gradually, and it is also becoming more and more important to use this style. 3d flat style also gradually into the line of sight, with the operation of the demand for improvement and designer skills progress, I believe that soon there will be more and more to see this style
In the icon design before the start of the icon specification to have a clear understanding
icon design specification to follow a few rules
icon is mostly used as a navigational and explanation of the use of icons, so the expression of clear is the basic function of the icon, for some non-common type of icon, in the production of brainstorming through the reasonable screening of keywords, and then start designing, design is also to carry out some simple tests, you can ask colleagues to ask for advice, ask the icon is not to express the meaning of the relevant, if the answer is not, you should ask for the reasons for the design of a few more programs, or and colleagues to brainstorm together. If the answer is no, you should ask why, design a few more options, or brainstorm with your coworkers.
Icon consistency can be divided into a variety of situations
Icons in the same functional area, the need to maintain the unity of the design style, if the use of linear icons, all linear icons, if the face of the icon, the unified use of the face of the icon
In the visual design of we will encounter a number of optical illusions, the following lists of common several situations and solutions. The way to maintain visual consistency is not to make the length and width of the image the same, or even the physical size of the graphic is the same, the visual weight of the feeling is not the same. Below the left image, the visual weight of the rectangle is obviously larger, there is no white space, through the blurring of the graphics can be seen, the visual weight of the triangle is obviously small, the following right image after the adjustment, you can see that the visual weight is close to unanimous, but the visual weight of the judgment needs to be more designers to observe more, more attempts.
The default center alignment of the program is often not visually balanced, and we generally need to adjust it to make it visually balanced. Additionally if one part of a graphic is much larger than the other, it makes the center of that graphic cheaper, and it has to be moved in the direction of the smaller part to create balance.
Faceted icons, take into account the proportion of positive and negative shapes, as shown below, the white area should be consistent across all shapes
Inconsistent perspective creates a sense of spatial disarray, and when drawing icons you should take into account the angle from which you are looking at the icon
Some icons add highlights or features, and in the icon design process you need to make sure that the overall character of the image is
Some icons will add highlights or features, and the icon design process needs to ensure that the overall characteristics of the image are consistent, such as the broken line style
The composition of the icon should also be consistent, to ensure that the icon is consistent in the overall rhythm and rhyme
Pixel alignment is kind of a cliché, and I personally believe that it is currently considered to be a kind of craftsmanship or the pursuit of the details of the ultimate, because it will also be used in some projects in the svg format, or the image is adapted to different screen sizes, the cut map The size may not be able to maintain pixel accuracy, but at least in the design of the draft should maintain pixel alignment
The most common communication with the development of the communication is the labeling and cut diagrams, in order to facilitate the development of the use of the cut diagram is usually given the length and width of the rectangle cut diagrams, in addition to the need to leave a certain amount of bleed space for the icon, on the one hand, to ensure that the cut of the hotspot can be set to achieve the effective range of clicks, on the other hand, can be reserved for the adjustment of the icon. On the other hand, you can reserve space for the icon to be adjusted.
The use of raster system can effectively solve the above problems, including the balance of the visual weight, cut the bleeding and so on, with the help of sketch symbol function can also make the layout more convenient, using the blue lake plug-in class directly as the size of the symbol cut the size of the map, cut the map is more convenient
With the more and more products began to homogenize the brand is also more and more important, through the integration of icons in the icon.
The method of brand gene extraction can be carried out from two aspects
Extracted from the logo
Extracted from the brand temperament, by extracting the brand's temperament to change the icon's personality
For example, NetEase Yanshou icon, by extracting the brand's temperament to design the icon's personality
To summarize the above, we can use the Blue Lake plugin to directly use the symbol size as the cutout size to make the cutout more convenient
With more and more products starting to homogenize, the brand is also becoming more and more important. p>
To summarize the icon self-check manual
1. clear function
2. clear ideology
3. consistency
4. brand tonality
Article reference:
1. "Small body, big impact! What designers should know about icon basics" (/detail/436051.html )
3. "Vegetable heart - icon self-check manual" - Vegetable heart (/p/67239eef3d43 )
Disclaimer:
Images and materials from the network, infringement and deletion