What is a good APP icon?

a good APP icon is helpful for your APPlication to stand out among many dazzling apps, attract users' attention and guide users to click. So what is a good APP icon design and what should be paid attention to in icon design? Let's talk about my opinion

1. What is the use of icon

Everything appears to solve certain problems, so let's talk a few words first to understand what problems icon appears to solve?

This is a vegetable market. Pockmarked Wang Er has been selling baked cakes in this street for more than ten years, and no one else has been selling baked cakes. Therefore, when people come to the market, they must buy baked cakes from his family. The quality is good, and it is passed down from mouth to mouth. Because there were many things sold in the market, Pockmarked Wang found a piece of cloth, drew a circle on it, and hung it at the door to make it easier for others to find a new fat sister-in-law who sold sesame cakes. The number of people in the vegetable market gradually increased. In order to make it easier for everyone to find his home, he made a signboard and wrote "Pockmarked Wang", so that people could introduce his appearance, just saying to go to the vegetable market to find Pockmarked Wang's sesame cakes. Later, Wang Er considered that it was more troublesome for people to read. The background color was made golden yellow. Since then, the brand image of Wang Ermazi's sesame seed cake has been shaped. It is said by word of mouth that when people buy sesame seeds, they will look for the one with a little bit in the circle.

2, the history of ICON

From the above short story, we can know that the development of Wang Erma's signboard, that is, Wang Erma's icon, has gone through four stages

1. Without logo or weak logo, people are brands, mostly in the case of insufficient competition

2. Fuzzy logo, with relatively little competition, just need to distinguish between yourself and others

3. Since 199, there has been a wave of design enterprise VI in China. You can learn about the copywriting at that time, which will be helpful for icon design.

the most important purpose of ICON is to identify the product, which is easy to spread

Second, how to design the icon

Unless otherwise specified, the icon icon the following refers to the icon of the mobile APP, which is composed of colors, characters and patterns.

1. How to choose color for icon

Color: The most important function of color for icon is to attract people's attention and render the set atmosphere as the background for product image output. When people browse on the mobile APP, the screen flipping action is very fast, and the attention is also divergent. At this time, the user can only pay attention to the color, and a large color block flashes in front of his eyes, causing visual impact on the user's eyes. A good color matching will attract users to stay visually and gain valuable opportunities to open. So what kind of color will make people stay? How should we choose the color corresponding to the APP?

There are two situations to consider:

1) You are not making a new product from scratch, and your company has a certain brand color on the website and in the print media before. In this case, you should continue the previous color matching to ensure the unity of communication image, so that users can associate with the products used before when they see this color, which will lead to the idea that I click in to see what is new. ! ! Attract users to achieve _.

2) You are making a new product, so you can consider these aspects when choosing a color. What industry does your product belong to? Is there any relatively fixed color scheme in the industry? If so, please lean up as far as possible, and choosing similar colors will help users to have an impression on the product. If not, it is necessary to consider from the product function, what help your product can provide to users, whether it is an information display application or a tool application. Here, you can refer to the general theory of cold and warm colors and the color scheme of graphic design. Generally speaking, the requirement for color is different from other products, which can set off the product atmosphere, attract people's eyes and let users pay attention to the application.

2. How to design the pattern of icon

Patterns are used for communication, and make people associate with each other through specific shapes. For example, the pattern of the Red Cross reminds users of hospitals, the pattern of cars reminds users of car-related and the plane reminds users of travel-related. Using the fixed shapes of these fixed industries, users can directly understand the use scenes and functions of products, and then become interested.

There are three kinds of patterns.

One is the abstraction and extension of actual objects.

For example, the bicycle pattern on the icon in mobike makes people know at a glance that it is an application related to bicycles. The icon of Apple's native map application also belongs to this category.

the IOs operating system is upgraded to 7. , but also rejected a wave of flat icons instead of quasi-materialized icons. In fact, both quasi-materialized icons and flat icons are abstractions and extensions of actual objects. In addition, it is inevitable that planarization will replace objectification for the simple reason. When the IPHONE was first launched, it was a new thing, and it was necessary to use a more realistic objectification icon to tell users what each application was for. Later, with more and more users, and further abstract upgrade, icons don't need to represent things so vividly, just let users see the icon and understand what it represents.

The second is the distortion of industry icons. For example, the icon pattern of Ministry of Railways 1236 is a common schematic icon of railway departments, and the icon of flush is a simple K-line for users to see as an application related to the story.

the third is the deformation of characters. here are two great applications to recommend. one is the icon of tmall, and the upper part of the icon is the word tmall. only by making some deformation on the word cat, you can know what it is, and it is particularly eye-catching. Compared with JD.COM's icon, it's a bit stupid. At first glance, it's a dog. If it's a new user, it's actually stupid at first glance, and its meaning is unknown. However, with JD.COM's current popularity, there is no need for such a trivial matter as care.

The other one is the big Netease news. Look at the icon

There are two big words Netease on the red background. Here is the small product logo News.

there is also a case of distortion of the text, that is, adding some small modifications to the text can not only see the brand name, but also roughly see what the product is for. Here's an example:

The word "jingle" emphasizes the brand name, and a villain is added to it, which makes the image of a person riding a bicycle. The user probably knows that this may be a distribution-related application.

3. What words should I write on the icon

Should I write on the icon, and what words should I write if I write? In fact, it has something to do with the discussion on the use of words in the pattern mentioned above.

Patterns are used for communication, and words can give accurate information. If we want to add words to icons, the first thing to consider is what information we want to convey, and whether this information can be conveyed through our icons.

If you decide whether to add a word, you must decide where to add it. In fact, this will usually be added to the bottom of the whole icon.

What words should I write? After all, the place is not big, so I can't write a few words. The words and word combinations selected by different businesses are different, so I can't make specific suggestions. Let's compare the two icons directly.

It's foolish of you to directly put four big characters in the credit card APP of Shanghai Pudong Development Bank. A big flower in the middle also covers some words, low, stupid and speechless.

Tmall has been praised once. There is also a small mechanism in the icon design of Tmall. There is a blank area under the word Tmall and above the cat's head, and 11.11 can be stuffed in the middle. This design is really awesome.

finally, to sum up, when designing an icon, you need to choose the right color (eye-catching), the right pattern (brand image) and accurate text (information transmission) according to the product stage (new product or existing product) and the industry (e-commerce, information and games).

when designing the ICON, we must consider that when users browse and use the APP, their eyes will move from big to small and from top to bottom. Only by carefully understanding the user's habits can we design an excellent ICON.