Also called icon or Picoto

It is a metaphor and summary of the computer world to the real world.

Represents functions and operations in software products

Shopping mall guide: checkout icons, exit icons, bathroom icons, etc.

App icon: WeChat, phone, text message, etc.

Wire

noodle

quasi-object

Iconic icons: such as application launch icons on mobile phones

Functional icons: often appear in apps or websites

Used globally

save space

Rapid positioning

contextual positioning

object → symbol

symbol → new symbol

Close to the real thing

Skeuomorphic icons and interfaces provide users with concrete guidance

advantage

shortcoming

Simplify real objects and express them through abstract, simplified, and symbolic design elements

Element boundaries are clean and neat, and the interface is neat and concise

Use more color blocks, symbolic graphics, and sans-serif fonts

advantage

shortcoming

Use flat icons or linear icons for smaller areas

For larger areas, use icons with gradients or even light textures.

The essence of design lies in the wonderful use of light

Keep light effects between "flat" and "quasi-object"

Extract the most representative text in the product name and design the font for the strokes and overall skeleton.

advantage

Notice

advantage

shortcoming

Notice

advantage

Extract English initials for design, which has both design sense and recognition.

Notice

Extract the full name of the product or a combination of the first letters of several words

Form a unique product abbreviation to facilitate users’ memory

Make application icons more visually expressive

Numbers are highly identifiable and easy to spread

Give people affinity

How to form a strong association with the brand

Make the graphics in reverse white on a dark backing board, background: solid color or gradient color

Let the graphics be filled with color on the light-colored backboard, background: solid color or gradient color

It is concise and clear, making it easy for users to quickly find the target among the numerous arrays of application icons.

Make the icons white on the dark background, background: single color or gradient color

Let the icons be filled with color on a light-colored backplane. Background: solid color or gradient color, or other visual effects.

silhouette

Linear stroke style

Face-to-face style

More texture than simple silhouette graphics

When connecting, pay attention to the contrast of hue to create a sense of space.

The colors of the background and graphics should contrast

It is common in the gaming field. Putting a brand name on the application icon can attract the user’s attention.

Display marketing events (such as Double 11) on the app icon, and discounts, promotions, etc. can attract attention

Make the core selling points appear on the app icon to attract users' attention, thereby increasing the frequency of app openings.

Festivals are usually accompanied by consumption, so e-commerce applications pay most attention to the theme design of festive atmosphere. During the Spring Festival every year, the desktop icons are almost all red, which is very festive.

Design the startup icon (1024x1024px) and cut out dozens of icons of different sizes according to the programmer's requirements

@3x on mobile phone

@2x on mobile phone

in app store

Looking for metaphors

Competitive product analysis

Extract keywords

abstract graphics

Icon Grid Line

Rich details

Multiple scene testing

Application icons will appear in different scenarios at different resolutions. For example, on the iPhone 8plus, a @3x (120px) image is required, while on the iPhone 7 settings page, a 58px image is required, so the 120px image needs to be reduced.

When reducing a large image to a small image, some details will be lost and the picture will become blurred. Therefore, designers should make subtle adjustments to small-size icons and remove unnecessary decorative elements to ensure that the application icons can be used in small-resolution application scenarios. Can also maintain clear recognition

Six types: 1024px, 512px, 144px, 96px, 72px, 48px

It is recommended to start with the largest size and gradually remove and simplify details and make smaller sizes

When drawing a stroke icon, ensure that all strokes are the same thickness, and the spacing between strokes should not be thinner than the strokes themselves.

The basic shape is a full container square -> it is recommended to use 3X rounded corners

The basic graphic is a full height (width) rectangle -> it is recommended to use 2X rounded corners

The basic graphic is a smaller (less than 1/2 width and height) rectangle -> it is recommended to use 1X rounded corners

According to the icon scene, usually the default is 1X rounded corners regardless of the angle.

Except for curve "corners" with special radian, which need to be considered separately according to the icon design.

Areas composed of closed curves are closed areas and can be filled with independent colors.

Non-closed areas composed of non-closed curves cannot be filled with independent colors in principle.

slope

Line segments and endpoints

Icon break and spacing

Icon style change

Single and double portrait sketch edges

Line segment closure

unified perspective

One color is recommended: black

No more than 3 colors

Express the outline of an object through lines

Creates a more beautiful appearance than face icons

Highly identifiable, clear, simple and easy to identify

Usage scenarios: tab bar of APP products, etc.

Icons with faces as the main form of expression

Strong expressive ability, rich details, strong sense of emotion, prominent vision, large creative space

Monochrome saturation fill icon

Solid color gradient icon

Multicolor gradient icon

Usage scenario: usually appears in the tab bar of sports and fashion applications

scenes to be used

Usually located under the search box and banner

Aggregate the entrances of various sub-sections and distribute content to guide traffic for each sub-section.

Round bottom plate 45 degree gradient white surface micro projection

45 degree gradient flat icon micro projection

simple linear

45 degree gradient opacity face icon

business_type_function_size_status

Decompose the detailed elements (rounded corners, stroke ends, etc.) in the icon, and formulate the rules for the use of detailed elements in the specification

According to the product tonality and business attributes, corresponding colors and texture styles are formulated in the specifications.

Icons with different functions (king area, tab bar, etc.) should be distinguished. Icons with similar functions, including color and texture, should be similar.

In the bottom navigation bar of the App, face-shaped icons are used in the selected state, and linear icons are used in the unselected state.

Compared with linear icons, face-shaped icons have a stronger visual information layering and are more guiding in addition to being decorative. For example, the King Kong area function icons and IOS settings interface use face-shaped icons.

Face-shaped icons are more suitable for vehicle and other system interfaces. Face-shaped icons have a larger visual area and are easier to identify in a short time.

Linear icons usually look more delicate and delicate, suitable for more delicate and concise designs or feminine product designs.

1x, 2x and 3x png files available to suit multiple devices

Export .svg file

Avoid unnecessary lines or shapes to keep it as tidy as possible

Are all lines within the standard frame?

Nucleo

Whether visual language can replace text language without ambiguity

Icon size, complexity, color, line thickness

fullness

Same rules

Unification of details

The line width and thickness of icons of the same function type should be uniform, and the lines of icons with back plates are not easy to be too thin.

Transparency (unfolding layers)

Rounded corners (rounded or right)

Broken opening (opening position)

design features

If the icons cannot be simplified, keep the ink weight of the same set of icons consistent, simplify icons that are too complex, and enhance recognition.

It is recommended to use up to two colors for flat icons