On the icon design specification of Android system

Http://homepage.yesky.com/89/11620089.shtml

Now that the mobile platform is increasingly competitive, a friendly user interface can help improve user experience satisfaction, icon icons are an important part of the user interface, and today we will study and learn about the icon design specifications for Android systems. Before exploring the icon design for Android , it's important to understand how the Android interface fits into a variety of screens.

　　Suitability

Because the same UI element, such as a picture of x100 pixels, looks smaller on a high-precision screen than on a low-precision screen, there are two ways to make the images on both screens look the same:
The program scales the picture, but the effect is poor.
Provide a picture for each of the two precision screen phones.

But the parameters of the screen, if a set of icons for each precision screen, the workload is large and can not meet the compatibility requirements of the program, it is bound to the screen classification, such as on the 160dpi and 180dpi mobile phone screen with the same set of icons, When this set of icon in the 240dpi effect can not meet the design requirements, you need to do a larger set of icon.

In Android 1.5 and earlier, only the HVGA (320x480) Resolution on the 3.2″ screen is supported, and developers do not need to consider interface compatibility issues. After Android 1.6, the platform supports a variety of sizes and resolutions, which means that developers are designed to take into account the diversity of the screen.

To simplify the design and to be compatible with more mobile screens, the platform differentiates the screen according to size and resolution:

Three sizes: large, medium and small.
Three kinds of accuracy: high (HDPI), Medium (MDPI) and Low (LDPI).

The program can provide default resources for these three sizes of screens, and can also provide resources for screens of various precision, if needed. At run time, a picture of the correct size or precision is loaded according to the screen layout.

　　Android-supported screens

The Android app provides three ways to best display the results:

1. Image Zoom

Based on the accuracy of the current screen, the platform automatically loads any non-scaled, dimensioned and precision pictures. If the picture does not match, the platform loads the default resources and, after zooming in or out, satisfies the current interface's display requirements. For example, for a high-precision screen, the platform will load high-precision resources (slices), and if not, the platform will scale the medium-precision resource to high precision.

2. Automatic definition of pixel size and location

If the program does not support multiple precision screens, the platform automatically defines the pixel absolute position and size values, so that the element can show the same size as the accuracy of 160 on the screen. For example, to make the WVGA high-precision screen and the traditional HVGA screen display the same size picture, when the program does not support, the system will lie to the screen resolution of 320x533, in the (10,10) to (100,100) in the area after the drawing is completed, the system will enlarge the graphics ( 15,15) to the (150,150) screen display area.

3. Compatible with larger screen sizes

When the current screen exceeds the upper limit of the screen supported by the program, the Supports-screens element is defined so that the platform displays a black background image when it exceeds the displayed baseline. For example, WVGA in the precision screen, such as the program does not support such a large screen, the system will be lied to be a 320x480, the extra display area will be filled with black.

But in order to achieve the best display results, the best way is to design multiple sets of pictures. Then it is necessary to classify all screens according to the accuracy value (high school low), then design three sets of icon:

A set of icons for the main medium-precision screen (HVGA) is designed to determine the pixel size of the image.

Zoom the picture to 150% for a high-precision screen, and reduce the picture to 75% for a low-precision screen.

Place these three sets of resources under three folders of the program: res/drawable-mdpi/, res/drawable-hdpi/, res/drawable-ldpi/. When the program is running, the platform will adjust the appropriate icon according to the accuracy of the screen.

　　Design Guide

　　Android Standard icon

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

Keep up with current trends and avoid overuse of metaphors.

High simplification and exaggeration, small size icons can be easily identified, not too complicated.

Try to grasp the main features of the program, such as audio and video as the icon of music.

Using natural contours and shapes, it looks geometrically and organically, without losing the sense of realism.

The icon has a front view, with little perspective and a light source at the top.

Not only slippery but rich in texture.

　　The right and wrong icon

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

Launcher icon is usually a larger standard icon that contains a small icon that uses a neutral color and a primary color, and maintains a high contrast that should not be overly saturated.

　　Recommended color values

Dimensions and positioning

Launcher icons to have a variety of shapes and styles, but also to form a unified visual style, its size and positioning are unified:

(full Asset) red border is icon size

The blue border (icon) is a graphic size that is slightly smaller than the icon size and is used to display shadows and special effects outside the graphic.

The Orange border (Square Icon) is a different graphic size. Two types of graphic dimensions can achieve uniform visual weights.

Icon dimensions for high-density (hdpi) screens:

Full asset:72 x px

icon:60 x px

Square icon:56 x px

Icon Dimensions for Medium-density (MDPI) screens:

Full asset:48 x px

icon:40 x + px

Square icon:38 x 3

Icon Dimensions for low-density (ldpi) screens:

Full asset:36 x approx px

icon:30 x px

Square icon:28 x px

　　Template

Download the Android standard icon template, on this basis, draw icon, post-machine shadow effect.

WVGA (high precision) screen shadows:

Effect:drop Shadow
Color: #000000
Blend mode:multiply
opacity:75%
Angle:90°
distance:2px
spread:0%
size:5px

In addition, there are menu icon, Status bar icon, Tab icon, Dialog icon and List view icon, etc., we will introduce again in the future.

Finally, incidentally introduce the design of a little iphone icon.

　　iphone's design recommendations for icon : attractive and recognizable. Since the app is available for download by users around the world, it is also necessary to consider the different cultural backgrounds of the user at design time.

　　the design of the program icon :

57x57 pixels, right angle.

No glow effect.

No transparency.

The image is named Icon.png, placed in the program's resource bundle, and IPhone OS automatically generates an icon.

The iphone's icon design is so simple that the iphone's screen is only 320x480 pixels, so there is no compatibility problem with the app.

Reference article:

"Icon Design guidelines, Android 2.0"

"IPhone Human Interface Guidelines"

On the icon design specification of Android system