program icon user Experience Design: Inspire users to click the Desire

Article Description: The design idea of the program icon.

The main function of the program icon is to make the program more like and easier to understand, in addition to the above role, there are better visual effects of the icon can improve the overall experience and brand, users can arouse the attention and download, arouse the user's desire to click.

expression Form

Expressing the corresponding information in a limited space, in the iOS program icon design, intuitive is the first solution to the problem, should not appear most cumbersome modification, of course, also have a good visual performance, so that users can more easily understand the practical role of this application, more easily identify this application. Here are some forms of expression.

graphic Representation

Graphics can be a good way to capture the user's eye and to show information in a graphical representation of the application.

Text Presentation

Text expression is a very intuitive way of expression, the text should be concise and clear, not cumbersome.

combining graphics and text

This form has a very good expressiveness can also be directly to inform users of the information, because there will be a certain content, so in the space layout to pay attention to density, avoid cumbersome congestion.

IOS program icon features

The iOS desktop icon is very different from the other mobile system icons. Because the iOS icon has a good integrity, good integrity can reduce the user experience of conflict, so we need to maintain some of these characteristics, so that the program can be better integrated into the system, to bring users a better application experience.

size

On the desktop of iOS systems with different devices, the size of the program icon and the default of the cosmetic effect will be different, the system by default with the cosmetic effect can make the icon to better maintain the iOS style, but many times for the actual effect, we can ask the system not to add some effect to achieve the desired effect .

Uploading to the App Store requires 512px X 512px images

In the iphone 960px X 640px Resolution
Icon display size 114px X 114px
20-pixel rounded corners
4-pixel 90-degree black projection
2-pixel 90-degree white interior projection
Default self-led high light

In the iphone 480px X 320px Resolution
Icon display size 57px X 57px
10-pixel rounded corners
2-pixel 90-degree black projection
1-pixel 90-degree white interior projection
Default self-led high light

In the ipad 1024px X 768px Resolution
Icon display size 72px X 72px
13-pixel rounded corners
2-pixel 90-degree black projection
1-pixel 90-degree white interior projection
Default self-led high light

Texture

In iOS, in order to display the texture of the icon, many times will add some light sense to make it more textured. The light comes from above, so the gradient of the transition color should be from the top down. Most of the time, for the iOS system to feel like a glass texture, the bottom of the icon will have a high brightness reflection, of course, these are the actual effects we want to draw Add.

IOS The idea of program icon design

To express the role of the application, we can make the application of the icon for many different visual effects of processing, to achieve better visual enjoyment. Different types of applications should pay attention to the performance of the effect, such as news and information should be concise, so that its application has a better sense of cleanliness, such as game classes can be designed to give users a sense of active, such as some of the day-to-day application of the class we will be a lot of it to materialization, so that users more intuitive sense of its role, This is the most common method we have.

Here is a focus on the proposed Materialization program icon, which is very much like the way to show the use of the program, but sometimes to show the elements exist a few times, in the narrow space may not be able to lay down so many elements, so to analyze the weight, light can reduce the proportion of Occupy position or remove it, heavy to make more emphasis, at the same time, To find commonalities in a variety of elements.

We just need to find the common denominator, we can conceive a good idea.

Sometimes we can use the rounded corners of the iOS icon to make some special sensory effects, such as three-dimensional, which can help the icon to have better visual impact, easier to get the user's favorite and click.

Practice Sharing

Having said so much, we're going to start by starting from scratch and drawing a beautiful iOS app icon.

Program Name: MyRange
Platform: Iphone
Version: V0.001
Publisher: Uedc
Use: Lomo camera software

First of all, the design of the method is not unique, the idea and draw the method is infinitely many , then start immediately!

Think of the camera software, the first thing you will think of is cameras, then the relative should be the software icon to draw a Lomo camera to try.

Many of us in order to make the objects of the visual effect better, we need some reference, this time I use Lycra M9 to do reference. On the basis of reference, more personalized processing.

For better visuals, I think it has a little perspective, so you can use the features of the iOS icon rounded corners to form a stereo feeling.

Then color the icons and separate the most general colors.

Draw the texture of each part, the leather and the texture of the metal, the metal can add a little noise

Strengthen light sense, light from 90 degrees downward, draw out the reflective bit and the transition between the two sides, the lens part of the detailed description, the final overall adjustment, complete!