The mobile terminal APP to design the knowledge points: the principle of icon design and innovation

As everyone knows, icon icon design occupies a large proportion in the mobile terminal app design. The personality and style of a APP can be seen from the icon.

So, icon icon design is also the most easy to test the ability of UI designer level. If you interview an APP designer, if the icon icon is not designed, chances are that your interview will be less successful.

App desktop icon design

Icon is one of the most important components of a mobile APP interface. Icon design is a skill that APP designers must pay attention to.

The 25 schools also believe that every APP designers in the design of the daily work of all have encountered such a problem:

“This icon I should use what kind of semantics, so that is clear enough, what should a good use of icon, or text?”


The use of a mobile terminal, the Icon icon APP advantage

A, mobile phone for such a small screen device, using the form of icon in most cases is certainly good; the use of icon aided text can improve the identification of most of the time.

B, improve the APP visual effects

As shown in the APP interface below:

Clean and concise APP page design for mobile phone



Two,The disadvantage of using Icon icon in mobile terminal APP

Now we use the products, functions are gradually increased, the interface is also more and more complex, the need for a button on the page is also more and more, then there will be a lot of time with an icon in the semantic is actually very difficult to achieve clear and accurate, if not clear it will need users to think and judge, increase the cognitive load in the process of the experience.

What is the use of a beautiful icon painting if it can not convey information quickly and accurately?

Let’s give you a case:

Icon interface design case

The above is a good example, when the interface of the icon is not easy to be identified, the user will subconsciously avoid them, perhaps many of your users so slowly away;

This app page in the functions of many dozens of icon accumulation on the page, most of the icon is not very fast by semantic identification, the design of individual icon does not use the user long time has accumulated inside the mind in cognitive semantics.

Here we look at the design of a better case:

Icon interface design good case

The icon in the APP design above is pretty good. Photo editing inside the operation should be specific, contrast, saturation, exposure and so on nouns, although also can stick with a icon to do that, but when so many operations on an interface, the recognition difficulty increased one by one, the use of text based, supplemented by the icon form. Ensure clear recognition of the page, reduce the user’s memory cost.


Three, so when we design icon in our own APP, we need to follow the following icon design principles

Great God summed up, I hope you good reference.

Called * 038Best principle

Don’t go dispute when the design is a good use of icon, or text, follow the following principles, can guarantee a good experience:

Icon 1. can use 100% semantic expression accurate and clear out;

The semantics of icon 2. make full use of users are already familiar with and cognition;

3. if it is difficult to use visual icon to represent text semantic, please use the form of text icon+;

4. if insufficient space cannot use icon+ text, select the text used directly;

If you are in practice, there is a better solution principle, can inform the school 25. We must do the most complete APP design of dry cargo.


Finally, talk about innovative icon icon design

Our innovative design in the design of APP, the most frequently mentioned, a lot of good APP designers are willing to make some innovation in the design of the time, feel that different design is innovation, even more is in different and different design; it is also a character designer. At the same time to give the designer’s style works APP.


The following is designed to help us collect several app together with “my” icon:

Icon enjoy my icon design


The designer for their consistent interface style, one of my “icon” will design a variety of graphics, semantic or the first few basically familiar and relatively close, can also be identified quickly, 2 icon from behind the design is indeed rich with a strong sense of design that is very unique,

But from the graphical semantics has to abstract out of the concept of “I” the cognition of our mind, if the icon alone appeared in the interface, the deviation will cause the above understanding.

Some of the views and opinions of the above is the author. You pro, these principles are not standardized. Only some of the ideas that the designer. The designer should learn to absorb the dry cargo and reference case.

The above content source: MUX Xin Yan Ali Mama, thank God for sharing 25 school.

Leave a Reply