Android vs iPhone icon design guide

Before researching the icon design for Android, it's important to understand how the Android interface fits into a variety of screens.

Adaptability

As mentioned in a previous blog post, because the same UI element (such as a 100 × 100 pixel image) looks smaller on a high-precision screen than on a low-precision screen, in order for the two on-screen pictures to look The effect is similar, you can use the following two methods:

Program to zoom the picture, but the effect is poor. Provide a picture for each of the two precision screens.

However, the parameters of the screen are varied, and a set of icons are designed for each screen with high precision. The workload is heavy and can not meet the requirement of program compatibility. Therefore, it is inevitable to classify the screen, for example, using the same set of screens on 160dpi and 180dpi mobile phones icon, when the icon in the 240dpi effect can not meet the design requirements, you need to do a second larger icon.

In Android 1.5 and earlier, only HVGA (320x480) resolution on 3.2 "screen is supported, http://www.aliyun.com/zixun/aggregation/7155.html"> Developers also do not need Consider the adaptability of the interface. From Android 1.6, the platform supports a wide range of device sizes and resolutions, which means that developers have to take into account the diversity of screens when designing.

In order to simplify the design and compatible with more mobile phone screen, the platform in accordance with the size and resolution of the screen to distinguish between:

Three sizes: big, medium and small. Three kinds of precision: high (hdpi), medium (mdpi) and low (ldpi).

The program can provide default resources for screens of these three sizes and, if needed, provide resources for screens of various accuracies. At run time, the system loads a picture of the correct size or precision based on the screen layout.

Android supported screen

At run time, the program provides three ways for optimal display:

Picture zoom

Based on the accuracy of the current screen, the platform automatically loads any unscaled images of limited size and precision. If the picture does not match, the platform will load the default resources and zoom in or out to meet the display requirements of the current interface. For example, the current high-resolution screen, the platform will load high-precision resources (such as pictures), if not, the platform will be medium-precision resources scaled to high precision.

2. Automatically define the pixel size and location

If the program does not support a variety of precision screen, the platform will automatically define the pixel absolute position and size values, etc., so as to ensure that the element and the same precision 160 screen can show the same size effect. For example, to make a WVGA high-resolution screen display the same size of a picture as a traditional HVGA screen, when the program does not support it, the system panics to a screen resolution of 320 × 533, at (10,10) to (100, 100), the system will enlarge the graph to (15,15) to (150,150) screen display area.

3. Compatible with bigger size screen

When the current screen exceeds the maximum screen size supported by the program, the supports-screens element is defined so that the platform displays a black background image when it is outside the displayed baseline. For example, on a precision screen in WVGA, if the program does not support such a large screen, the system will pretend to be a 320 × 480, and the extra display area will be filled with black.

But in order to achieve the best display, the best way is to design multiple sets of pictures. Then it is necessary for all the screen based on the accuracy of the value of grading (high school low), and then design three sets of icon:

First for the mainstream of the accuracy of the screen (HVGA) design a icon, determine the pixel size of the picture. Zoom to 150% for high-resolution screens and 75% for low-resolution screens. Put these three sets of resources into the program's three folders: res / drawable-mdpi /, res / drawable-hdpi /, res / drawable-ldpi /. Program is running, the platform will be based on the accuracy of the screen to retrieve the appropriate icon. Design guide

Android standard icon

Launcher Icon is the function icon on the main interface of the program, Android has certain requirements for the style of each icon:

Meet current trends and avoid overuse of metaphors. Highly simplified and exaggerated, small size icons can also be easily identified, not too complicated. Try to grasp the main features of the program, such as audio and video as music icon. Use the natural silhouette and shape, looks geometric and organic, without losing the sense of reality. Icon with front view, almost no perspective, the light source at the top. Not smooth but full of texture.

Correct and wrong icon

In addition, all the icons have text labels, do not put the text in the design icon.

The Launcher Icon is usually a small standard icon with a small icon, using a neutral color and a main color, and maintain a high degree of contrast, should not be over-saturated.

Recommended color value

Size and positioning

Launcher icons come in a variety of shapes and styles, yet form a unified visual style that is uniform in size and positioning:

(Full Asset) The red border is the icon The blue border is the graphic size, slightly smaller than the icon size, and the space outside of the graphic is used to display shades and special effects. (Square Icon) Orange border is another graphic size. Both types of graphic sizes achieve a uniform visual weight.

Icon dimensions for high-density (hdpi) screens:

Full Asset: 72 x 72 pxIcon: 60 x 60 pxSquare Icon: 56 x 56 px

Icon Dimensions for medium-density (mdpi) screens:

Full Asset: 48 x 48 pxIcon: 40 x 40 pxSquare Icon: 38 x 3

Icon Dimensions for low-density (ldpi) screens:

Full Asset: 36 x 36 pxIcon: 30 x 30 pxSquare Icon: 28 x 28 px template

Download Android standard icon template, based on this icon, but also with the shadow effect later.

WVGA (high precision) screen shading:

Effect: Drop ShadowColor: # 000000Blend Mode: MultiplyOpacity: 75% Angle: 90 ° Distance: 2pxSpread: 0% Size: 5px

In addition, Menu icon, Status bar icon, Tab icon, Dialog icon and List view icon design tutorial please see the original bar.

Very detailed icon design tutorial, a program to place three sets of icons, as well as Android hardware is better, otherwise the memory burst.

iPhone

iPhone Design Ideas for Icons: Attractive and recognizable. Since app software is available for download to users worldwide, it is also important to consider the different cultural backgrounds of users in the design.

Program icon design:

57 × 57 pixels, right angle. No luminous effect. No transparency.

The picture named Icon.png, placed in the program's resource kit, iPhone os will automatically generate an icon.

iPhone icon design is so simple, iPhone's screen is only 320 × 480 pixels, so the program does not fit the problem.

Reference article:

Icon Design Guidelines, Android 2.0

"IPhone human interface guidelines"

Source: http://daichuanqing.com/index.php/archives/1140