A guide to must-read icons for designers

Icon is a graphical logo, which has two concepts: broad and narrow. The broad sense refers to all graphic symbols with clear meaning in reality, and the narrow sense mainly refers to the icons in the interface of computer equipment. Graphic symbols. For UI, the main focus is on the narrow concept, which is one of the key elements of the visual composition of the UI interface. What we see through icons is not just the icon itself, but the inner meaning it represents.

Color, text Font, icon, graphic shape, picture image, and space are 6 very important elements in our graphic design. For UI design, icons can be said to be the entire The finishing touch of a product, it can even directly affect the image and temperament of a product.

Clearly, icons were not invented by interface designers. As objects of communication, they have a long and varied history, rooted in antiquity. They appear in maps, signs, schemes, manuals and many other sources of information. However, with the advent of new technologies and graphical user interfaces, icons have taken a new turn.

Historically, Xerox is credited with the first graphical user interface icon in the early 1970s: the icon was on a machine called the Xerox Alto Realized, this machine was very expensive and not really popular among the majority of users. However, this was just the beginning of a long story: In 1981, the Xerox Star was released, billed as the first consumer computer to feature icons as part of the interface. In particular, it applies the icons of folders and trash cans so far. The following are icons from the 1980s

Ideographic icons (also called explanatory icons)

Ideographic symbols refer to symbols that do not originally exist in physical form and are a symbol created during the development process. , used to express some specific meaning or operational behavior. Moreover, in the process of development, these symbols gradually inherited some characteristics of pictographic symbols, treating the symbols themselves as "real objects" and constantly evolving. For example, "arrow" has gradually evolved from the original "bow and arrow" into a specific ideographic symbol.

Interactive icons

have two-way information transmission capabilities. They can not only deliver certain information to users to guide and help users perform specific operations, but also allow users to pass control information to programs, from functions In terms of importance, its importance is the highest. For example: login and registration buttons, switch buttons, quantity buttons, likes, forwarding and sharing, etc. are all interactive icons.

Decoration and entertainment icons

are usually used to enhance the beauty of the entire interface and deepen the personalized design style, and do not have obvious functionality. This type 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 group, and enhances design affinity. Decorative icons often exhibit seasonal and cyclical characteristics. For example, online activities, user levels, empty pages, etc.

Application icons

The entrance and brand display of different digital products on various operating system platforms. It is the logo for this digital product. status symbol. In most cases, it will integrate the brand's LOGO and brand colors into the icon design. Some icons also use a combination of mascots and corporate visual identity colors. A truly excellent app icon design is actually a combination of market research and brand design. Its goal is to create an eye-catching design that users will not be able to find quickly on the screen.

Pictogram icons

The "Skeumorphic design concept" has been popular on iOS for quite some time, which is a hyper-realistic design. And it is believed that whenever possible, add a realistic and physical dimension to the application. The more similar it is to reality and the more the operations are the same, the easier it will be for users to understand the operating mode and the higher the acceptance will be. For example, Japan’s famous Mount Fuji icon shows that good design is not only beautiful, but also functional. Especially travel-related designs require people to overcome language barriers.

Metaphoric icon

The metaphorical element in an icon is very important, it allows us to know what the icon means as soon as we see it. For example, a house represents the homepage, and a cross represents an error or shutdown. When I shrink an icon, I keep the metaphorical elements in place to ensure that the icon still conveys the message accurately.

Tool icons

They are mainly classified by industry categories, have a wide range of uses, are highly recognized by the public or industry insiders, and have been used for a long time. For example: construction industry, medical industry, chemical industry, etc.

Hybrid icons

It is a combination of the first three, aiming to achieve different visual effects and application structures. The MBE thick stroke style icon that was very popular in Chaibo some time ago is the product of comprehensive icons. It mostly expresses the designer's personal design style or is suitable for certain types of software with strong design sense.

Character Icon

The word "Glyph" originated from the field of typography. Now it has gradually taken root in the field of digital design with digital design. It originated from Greece. The word means "carving". In the field of typesetting, symbol icons are usually text-like systems that contain specific meanings, specific functions, and can be expressed or written. They can be letters or graphics, and sometimes even a combination of the two.

Among this type of icon design, the more typical one is the weather icon. From a single icon to a combination of icons, it can be fully reflected.

Flat icons

Flat icons include linear, surface, line + surface, surface + surface, with various realization methods, strong scalability, more personalized, younger, and the same. Icons with the same design style can reflect and convey different information after changing the color.

Skeuomorphic icons

Skeuomorphic icons are the opposite of flat icons. As the original skeuomorphic icon designers often said, they “copy reality” and try to make the real world The shape, texture, light and shadow in it are all integrated into the design of the entire icon, and its characteristics are realism. The design trend of skeuomorphic icons almost followed the birth and evolution of Macintosh step by step, reaching the extreme, and then starting from the field of UI design, it was replaced by flat design. However, skeuomorphic icons are still widely used in different fields, especially in game design and icon design of game products. 2.5D icons and desktop application icons.

Windows, iOS, etc., Chinese version, English version and even various language versions, basically look the same before opening the menu. Many icons have been quickly recognized by most users and have even become internationally accepted icons. For example, Windows UI

When an icon can express a clear meaning, it only needs to occupy the position of one character to convey the user operation information. For example, if you scan and the email is sent successfully, it will take 3-4 words to express it in copywriting, and it may be longer in English or other languages, while using an icon to replace it only requires one character position

The + in the upper right corner of Alipay means more Function, at this time, the position of a character clearly explains its meaning; a sound wave icon under WeChat represents the voice, which is intuitive and easy to understand

Entering the era of fragmentation and entering the era of image reading are 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 of graphic images is far better than the memory of text. Therefore, when promoting your brand, picture content can be said to be worth a thousand words. Use icons to help users quickly identify information through visual guidance.

Without any text description on Tik Tok and ins, we know that the fifth tag is the personal center

It has been scientifically proven that visual information is related to other senses in the brain. Processing-related brain areas dominate, and the human brain's memory for images is much higher than that for words. Icons mostly use geometric figures and are designed with symmetrical and consistent design goals. Due to their highly concentrated characteristics, icons have simpler characteristics and are easier to remember.

The lowest level logic of icons: linear icons, surface icons, line + surface icons, surface + surface icons, 2.5D icons, skeuomorphic icons. The various icons on the Internet are visually distinguished based on these, and we need to think about it when designing icons

1. Product visual style positioning (industry field)

2. Specific application of icons

3. What is the user group for the product?

Let’s first look at a set of icons with different styles. From the different APP icons above, we can see that different industries, different scenarios, and different users have different icon designs and expressions, so you need to think before designing. You need to express the design ideas and product positioning.

1. Dismantle keywords and keyword associations

Disassemble and divergent keywords in demand information, transform them into common things in life, and release the meaning they represent. inner meaning. Synonyms, synonyms, and objects with related shapes or related associations of keywords

For example, when talking about honors, trophies, certificates, gold medals, crowns, etc. can immediately come to mind. Then, through the association of these words, we find some pictures that match the temperament to make a mood board. Through the mood board, we can feel the tone of the product, and then extract some shapes and colors from them as the main shape of the product icon

2 , Output graphics based on keyword association

Based on the words or objects disassembled in the previous step, simple basic shapes are converted into common graphics in life. The two commonly used methods are to use the AI ​​pen tool (sketch Bezier tool) or Boolean operation to draw

3. Output according to the scene

The scene here may be an actual application scene , such as the Dianping tab bar, functional area (category area), operation icons, etc. These icons need to guide users to click, so they are more visually rich; while the personal center, classification area, and details page focus more on functionality. Guidance is relatively simple and belongs to the secondary usage scenario, with mostly linear icons.

We often pay attention to more than a dozen points when analyzing each icon article, but these have no rules and logic and are difficult to remember. It is easy to forget even if you remember them for a while. These summaries are actually derived from Material Design or iOS specifications. If you carefully study these details, making icons will not be difficult

The end points of icons are divided into right angles and rounded corners. We must unify the end points of icons during the design process and maintain a consistent design language

Corners

Compared to other shapes, the human eye is more likely to recognize rounded rectangles than right-angled rectangles because the fovea centralis (fovea centralis) is the most sensitive area of ​​vision in the retina. It's fastest when processing circles, while processing rectangular edges involves more of the brain's "neuroimaging tools." So, rounded corners are easier for the human eye to process because they look closer to circles than regular rectangles.

The rounded properties of the rounded corners will give people a rounded, cute, safer and more intimate feeling. Therefore, social, entertainment, live broadcast, food and other icons often use rounded icons

Right angles will give people a sharp and aggressive feeling. The overall icon has more details and usually appears in finance and other business applications. Products with relatively strong attributes. For example: 36 Krypton, financial products, etc.

Uniform tilt angle

Inconsistency in internal space proportions can easily lead to inconsistent visual focus of the icon. As shown in the picture below, the second icon on the left is centered downward, the fourth icon is centered upward, and on the right is the tab bar icon of the early PP Assistant. The proportions of hollowed-out areas within the icons are the same, and the overall vision is harmonious and unified.

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

Thin strokes give people a more refined visual sense, while thick strokes are relatively rough. Due to the development of current fashion trends, there are often thick strokes and thin strokes. A design style that combines strokes

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

Apple, Google, IBM, and the domestic Alibaba Ant Design have all issued relevant icon grid specifications. Here, Google’s Material System icon grid is used as an explanation. In the 24*24px icon size, the top, bottom, left and right safe margins are 2px, and the four basic shapes of the key shapes are circle 20*20px, square 18*18px, vertical rectangle and horizontal rectangle 20*16px. Unify icon size and position through key shape rules to achieve visual balance

Align pixels

Clarity (perfect pixel alignment) In order to avoid distortion of the icon, you can adjust the X-axis by and Y-axis coordinates are set to integers to position the icon in pixels. When using software AI or Sketch to draw basic graphics, do not use decimal points or odd numbers, use more even numbers

Now that we understand the basic knowledge of icons, how do we judge whether our icons are appropriate and fit the entire product? We need to understand what makes a good icon. The inspection standards are also based on the standards we drew, which are: identification, standardization, overall style and brand sense.

Judging the value of something lies in its purpose. The purpose of an icon is to help users understand information, so accurate meaning (clearly and accurately conveying information) is the most important and lowest value of an icon. If you design If the icon is incomprehensible to users, no matter how beautiful it is visually, it has no value at all.

Meaning recognition: It is whether visual language replaces textual language. In short, it is to make your icon understandable to users without causing ambiguity to users. Commonly used tab bars and compasses represent discoveries, and houses represent homepages, etc.

Visual recognition: It is the size, color, and thickness of lines of icons. These factors affect visual recognition and can improve visual recognition in specific styles. .

We need to ensure the consistency of the visual size of the icons, the fullness of the icons (positive and negative shapes), follow the same rules, and the unity of details. The 4 points here have been written in great detail during 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 each product is positioned and targeted at different groups, the tone of the entire app is also different. For example, Tencent Animation’s character is biased. If you are a cartoon and cute type, then the icon design should also reflect this character trait, and try to use a cartoon and rounded method to design. An advertising slogan: In a complex world, one is enough. The entire APP from the startup icon to the overall tone is simple and clean, and the restrained use of colors conveys the tone of the product.

Brand sense means what we mentioned above must be consistent with the brand concept and convey the same feeling to users. By absorbing brand colors, extracting brand elements, and using brand mascots and brand graphics to extract brand genes .

We must try to understand it from the perspective of brand design, find the unique brand temperament of our products, and choose appropriate techniques. Then concretize these elements and integrate them into the interface design. The following products are highly integrated from product names to startup icon designs.

The basic rules of icon usability testing are derived based on icon verification

Recognition:

1. Can users understand the meaning of the icon?

2. Is it an icon familiar to users?

3. Does it conflict with the meaning of other icons?

4. Can it pass the 5-second rule?

5. How is the scalability of icons?

6. Do you need to add text labels?

Is the design unified?

1. Is the visual language unified?

2. Is the design complexity of the icons consistent?

3. Is the overall design coordinated, unified, and highly focused on the visual system?

4. Is the overall color scheme of the icon consistent?

Brand information:

Is the icon unique and able to convey brand information?

Generally, 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 image itself and cannot be flexibly modified in size. SVG is a vector format and supports lossless scaling.

Before there was SVG, because of the need to consider adapting to high-definition devices, icons needed to be cut into various multiples for adaptation. However, current development software and plug-ins all come with the function of cutting multiple images, such as Blue Lake.

JPG: Strong compatibility, comes with background, does not support scaling.

PNG: supports transparent format but does not support scaling. You need to pay attention to the size of the transparent area around the icon.

GIF: A simple dynamic icon. When the background is transparent, the edges will be jagged and there is no way to support rich colors.

SVG: lossless scaling vector graphics, small size, supports development of self-modified colors in monochrome mode, and can modify style parameters.

Another delivery method is to upload the icon in SVG format to a website like iconfont to complete the delivery of the icon. Things to note:

1. SVG does not support gradient color filling

2. SVG does not support strokes, and the strokes need to be converted into closed images

3. When the icons are of the same size, you need to add a transparent square of the same size below the icon, and export and upload it together with the icon

However, iconfont has strict requirements for icon production. When uploading, you need to pay attention to check whether your icon meets the requirements. Require.

Link

Source

UI designer wants to do a good job in icon design? Do you know the history of icons?

A brief history of iconography

"Icon Design Guide"

"Icon Utopia"

"the Ultimate Guide to an Interface Icon Set》

"SVG icon library and comparison with icon font"