天天看點

[Android SDK 翻譯]Icon Design Guidelines (圖示設計規範)

Icon Design Guidelines

圖示設計規範

Icon design quickview

圖示設計概述

·                                 You can use several types of icons in an Android application(你能在Android應用中使用多種圖示.)

·                                 Your icons should follow the specification in this document.(你的圖示需要遵循該文檔的設計規範)

·                                 A set of standard icons is provided by the Android platform. Your application can use the standard icons by referencing them as resources.(Android平台提供了一組标準的圖示。你的應用可以引用這些标準圖示資源)

In this document

内容

1.                                Launcher icon(啟動圖示)

2.                                Menu icon(菜單圖示)

3.                                Status bar icon(狀态欄圖示)

4.                                Tab icon(标簽圖示)

5.                                Dialog icon(對話框圖示)

6.                                List view icon(清單視圖)

7.                                General guidelines(通用規範)

8.                                Using the Icon Templates Pack(使用圖表模版)

9.                                Icon appendix(圖示附錄)

1.                                                        Launcher icons(啟動圖示)

2.                                                        Menu icons(菜單圖示)

3.                                                        Status bar icons(狀态欄圖示)

See also

另附

1.                                Android Icon Templates Pack »(Android圖示模版)

Creating a unified look and feel throughout a user interface adds value to your product. Streamlining the graphic style will also make the UI seem more professional to the user.(建立具有統一的視覺效果的使用者界面會為你的産品增色不少。圖像風格的合理性能讓UI設計更加專業。)

This document shows you how to create icons for various parts of your application’s user interface that fit the style set by the Android UI team. Following these guidelines will help you to create a polished and unified experience for the user.(該文檔向你展示如何為你的應用的UI建立各種圖表,并讓它适合Android UI組圖示的風格。依照這些規範能幫助你,為你的使用者建立具有更加優秀和統一風格的體驗。)

To get started creating conforming icons more quickly, you can download the Android Icon Templates Pack. For more information, see Using the Android Icon Template Pack.(為了能更快讓你能建立統一風格的圖示,你可以先下載下傳Android圖示模版。更多資訊,請參閱’Using the Android Icon Template Pack’)

Launcher icon

啟動圖示

A launcher icon is the graphic that represents your application on an Android device’s Home screen. It is a simplified 3D icon with a fixed perspective. The required perspective is shown in Figure 1.(啟動圖示是指在Android機器主螢幕上為你的應用準備的圖示。它是一個簡單的具有固定視角的3D圖示。透視資訊需求請參見圖1)

Structure

結構

·                                 The base of a launcher icon can face either the top view or the front view.(啟動圖示的基面可以朝上也可以朝前)

·                                 The majority of a launcher icon’s surface should be created using the launcher icon color palette. To add emphasis, use one or more bright accent colors to highlight specific characteristics.(建立啟動圖示表面的時候需要使用啟動圖示色闆。強調一下,使用一種或者更多重點色來高亮特性。)

·                                 All launcher icons must be created with rounded corners to make them look friendly and simple—as shown in Figure 2.(所有的啟動圖示必須是圓角的,讓它看起來更加友好、簡單——如圖2)

·                                 All dimensions specified are based on a 250x250 pixel artboard size in a vector graphics editor like Adobe Illustrator, where the icon fits within the artboard boundaries.(所有的維數規範是基于250x250像素大小的一個圖像矩陣編輯器,比如Adobe Illustrator, 圖示能适合剪輯版的邊緣。)

·                                 Final art must be scaled down and exported as a transparent 48x48 px PNG file using a raster image editor such as Adobe Photoshop.(最終的圖示需要重定義大小,導出圖示要求是:透明 48x48 px, png 檔案, 可以使用光栅圖像編輯器,比如Adobe Photoshop)

·                                 Templates for creating launcher icons in Adobe Illustrator and Photoshop are available in the Icon Templates Pack.(使用Adobe Illustrator 和Photoshop建立啟動圖示的模版,可以在圖示模版包中找到。)

Figure 1. Perspective angles for launcher icons (90° is vertical).

圖1.啟動圖示的透視角度

1. 92°
2. 92°
3. 173°
4. 171°
5. 49°
6. 171°
7. 64°
8. 97°
9. 75°
10. 93°
11. 169°

Figure 2. Rounded corners for launcher icons.

圖2. 啟動圖示的圓角

Light, effects, and shadows(光照,效果,和陰影)

Launcher icons are simplified 3D icons using light and shadows for definition. A light source is placed slightly to the left in front of the icon, and therefore the shadow expands to the right and back.(啟動圖示是使用簡單的帶定義的光照和陰影效果的3D圖示。光源被放置在稍微偏左前方位置,是以陰影投向右後方。)

Figure 3. Light, effects, and shadows for launcher icons.

圖3. 啟動圖示的光照,效果和陰影

1. Edge highlight:(邊緣高光) white(白色)
2.

Icon shadow:

(圖示陰影)

black | 20px blur

50% opacity | angle 67°

3.

Front part:

前面闆

Use light gradient from color palette
4.

Detail shadow:

具體陰影

black | 10px blur

75% opacity

5.

Side part:

邊上部分

Use medium gradient from color palette

Launcher icon color palette

啟動圖示色闆

White

r 0 | g 0 | b 0

Used for highlights on edges.

Light gradient

1:  r 0 | g 0 | b 0

2:  r 217 | g 217 | b 217

Used on the front (lit) part of the icon.

Medium gradient

1:  r 190 | g 190 | b 190

2:  r 115 | g 115 | b 115

Used on the side (shaded) part of the icon.

Dark gradient

1:  r 100 | g 100 | b 100

2:  r 25 | g 25 | b 25

Used on details and parts in the shade of the icon.

Black

r 255 | g 255 | b 255

Used as base color in shadows.

Step by step

1.                              Create the basic shapes with a tool like Adobe Illustrator, using the angles described in Launcher icon: structure. The shapes and effects must fit within a 250x250 pixel artboard.

2.                              使用類似Adobe Illustrator等工具建立一個基礎形狀,使用在 啟動圖示:結構 中描述的角度資訊。形狀和效果必須适合250x250px 的模版。

3.                              Add depth to shapes by extruding them and create the rounded corners as described for the launcher icon structure.

4.                              使用 凸出 增加形狀的深度效果,并為啟動圖示增加圓角特性。

5.                              Add details and colors. Gradients should be treated as if there is a light source placed slightly to the left in front of the icon.

6.                              增加細節和顔色。傾斜度應該被處理成,光源在左前方的效果。

7.                              Create the shadows with the correct angle and blur effect.

8.                              建立正确的角度和模糊效果的陰影效果。

9.                              Import the icon into a tool like Adobe Photoshop and scale to fit an image size of 48x48 px on a transparent background.

10.                           将圖示導入到Adobe Photoshop,并縮放圖像到48x48px大小、使用透明背景的圖示。

11.                        Export the icon at 48x48 as a PNG file with transparency enabled.

12.                        導出48x48大小的png檔案,并使透明有效。

Menu icon菜單圖示

Menu icons are graphical elements placed in the pop-up menu shown to users when they press the Menu button. They are drawn in a flat-front perspective. Elements in a menu icon must not be visualized in 3D or perspective(菜單圖示,使用者在點選菜單按鈕時具有彈出菜單效果的圖像元件。圖示使用平面繪制前透視圖。菜單圖示不可以使用3D效果或者透視。).

Structure 結構

·                                 In order to maintain consistency, all menu icons must use the same primary palette and the same effects. For more information, see the menu icon color palette.(為了保持一緻性,所有的菜單圖示都必須使用一樣的主調色闆和一樣的效果。更多資訊,請參見 菜單圖示調色闆)

·                                 Menu icons should include rounded corners, but only when logically appropriate. For example, in Figure 3 the logical place for rounded corners is the roof and not the rest of the building.(菜單圖示應該是圓角的,但是也隻有邏輯上允許的時候。比如圖3中邏輯上的圓角位置應該是屋頂而不是這個建築的其他地方。)

·                                 All dimensions specified on this page are based on a 48x48 pixel artboard size with a 6 pixel safeframe.(頁面上所有的尺寸規格都是基于48x48 px 并包含6px的安全邊框區域。)

·                                 The menu icon effect (the outer glow) described in Light, effects, and shadows can overlap the 6px safeframe, but only when necessary. The base shape must always stay inside the safeframe.(在光照、效果和陰影一節中所描述的菜單圖示效果(外邊緣)在必要的時候可以超過6px的安全架構。基礎形狀部分必須在安全架構之内。)

·                                 Final art must be exported as a transparent PNG file.(最後的圖檔導出必須是透明的PNG 檔案)

·                                 Templates for creating menu icons in Adobe Photoshop are available in the Icon Templates Pack.(Adobe Photoshop中建立菜單圖示的模版可以在圖示模版庫中找到。)

Figure 4. Safeframe and corner-rounding for menu icons. Icon size is 48x48.

圖4.菜單圖示的安全邊框和圓角。圖示大小:48x48

Light, effects, and shadows(光照、效果和陰影)

Menu icons are flat and pictured face on. A slight deboss and some other effects, which are shown below, are used to create depth.

菜單圖示是平面的面朝上的。輕微的凹陷效果或者其他效果被用來展現層次感。

Figure 5. Light, effects, and shadows for launcher icons.

圖5.啟動圖示的光照,效果和陰影

1. Front part:前部 Use fill gradient from primary color palette
2. Inner shadow:内部陰影

black | 20 % opacity

angle 90° | distance 2px

size 2px

3. Outer glow:外發光

white | 55% opacity 

spread 10% | size 3px

5. Inner bevel: 内斜角

depth 1% | direction down size 0px

angle 90° | altitude 10°

highlight white 70% opacity

shadow black 25% opacity

Color palette(調色闆)

White

r 0 | g 0 | b 0

Used for outer glow and bevel highlight.

Fill gradient

1:  r 163 | g 163 | b 163

2:  r 120 | g 120 | b 120

Used as color fill.

Black

r 255 | g 255 | b 255

Used for inner shadow and bevel shadow.

Step by step(步驟)

1.                              Create the basic shapes using a tool like Adobe Illustrator.(使用Illustrator建立基礎圖形。)

2.                              Import the shape into a tool like Adobe Photoshop and scale to fit an image of 48x48 px on a transparent background. Mind the safeframe.(将圖形導入到photoshop中,調整到48X48 px,透明背景,注意安全邊框的問題。)

3.                              Add the effects seen as described in Figure 5.(增加圖5中所描述的效果)

4.                            Export the icon at 48x48 as a PNG file with transparency enabled.(導出48x48大小的啟動透明效果的PNG 圖示檔案。)

Status bar icon(狀态欄圖示)

Status bar icons are used to represent notifications from your application in the status bar. Graphically, they are very similar to menu icons, but are smaller and higher in contrast.(狀态欄圖示是用來在狀态欄中向使用者像是應用通知。在圖像方面來講,他們跟菜單圖示很像,但是更小,并具有更高的對比度。)

Structure(結構)

·                                 Rounded corners must always be applied to the base shape and to the details of a status bar icon shown Figure 7.(同樣,圓角是必須的。另外一些細節方面請參考圖7.)

·                                 All dimensions specified are based on a 25x25 pixel artboard size with a 2 pixel safeframe.(每個方向都是25x25 px 并帶2px的安全邊框。)

·                                 Status bar icons can overlap the safeframe to the left and right when necessary, but must not overlap the safeframe at the top and bottom.(狀态欄圖示可以在必要的時候覆寫左邊或者右邊的安全邊框,但是上下邊框是不可以覆寫的。)

·                                 Final art must be exported as a transparent PNG file.(最後導出的圖示必須是透明的png檔案)

·                                 Templates for creating status bar icons using Adobe Photoshop are available in the Icon Templates Pack.(使用Photoshop建立狀态欄圖示的模版在圖示模版包中可以找到。)

Figure 6. Safeframe and corner-rounding for status bar icons. Icon size is 25x25.

圖6.狀态欄圖示的安全邊框和圓角。圖示大小為25x25

Light, effects, and shadows(光照、效果和陰影)

Status bar icons are slightly debossed, high in contrast, and pictured face-on to enhance clarity at small sizes.

狀态欄圖示要求輕度的凹陷、高對比度效果,另外面朝上,增強小圖示的清晰度。

Figure 7. Light, effects, and shadows for status bar icons.

圖7. 狀态欄圖示的光照、效果和陰影

1. Front part:前部 Use fill gradient from primary color palette
2. Inner bevel:内斜角

depth 100% | direction down

size 0px | angle 90° |

altitude 30°

highlight white 75% opacity

shadow black 75% opacity

3.

Detail:

細節

white
4.

Disabled detail:

無效的細節部分

grey gradient from palette

+ inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | 

altitude 42° | highlight white 70% | no shadow

Color palette(調色闆)

Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.(隻有和電話功能相關的狀态欄圖示才使用全色調色闆,其他的所有狀态欄圖示都應該保持單色調色闆)

White

r 0 | g 0 | b 0

Used for details within the icons and bevel highlight.

Grey gradient

1:  r 169 | g 169 | b 169

2:  r 126 | g 126 | b 126

Used for disabled details within the icon.

Fill gradient

1:  1 r 105 | g 105 | b 105

2:  r 10 | g 10 | b 10

Used as color fill.

Black

r 255 | g 255 | b 255

Used for bevel shadow.

Step by step(步驟)

1.                              In a tool like Adobe Photoshop, create the base shape within a 25x25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free.(使用Photoshop建立一個25x25px使用透明背景的圖形。注意安全邊框,必須保持上下2個像素的空白)

2.                              Add rounded corners as specified in Figure 6.(增加圖6中的效果)

3.                              Add light, effects, and shadows as specified in Figure 7. (增加圖7中的效果)

4.                            Export the icon at 25x25 as a PNG file with transparency enabled.(導出25x25的透明png圖示檔案)

Tab icon(标簽圖示)

Tab icons are graphical elements used to represent individual tabs in a multi-tab interface. Each tab icon has two states: unselected and selected.

标簽圖示是在多标簽界面上表示單獨标簽頁的圖像元素。每一個标簽圖示都有兩種狀态:未選中和選中

Structure(結構)

·                                 Unselected tab icons have the same fill gradient and effects as menu icons, but with no outer glow.(未選中标簽圖示和菜單圖示有一樣的填充斜度和效果,但是沒有外發光。)

·                                 Selected tab icons look just like unselected tab icons, but with a fainter inner shadow, and have the same front part gradient as dialog icons.(選中标簽圖示看起來和未選中的标簽圖示很像,但是會有微弱的内部陰影,同時又有和對話框圖示一樣的前部斜度。)

·                                 Tab icons have a 1 px safeframe which should only be overlapped for the edge of the anti-alias of a round shape.(标簽圖示正常帶1像素的安全邊框,但是在安全邊框區域是要能夠反鋸齒的圓角形狀是可以的)

·                                 All dimensions specified on this page are based on a 32x32 px artboard size. Keep 1 px of padding around the bounding box inside the Photoshop template.(此頁上指定的所有尺寸都基于一個32x32像素畫闆大小。在Photoshop模版畫闆裡為每個邊保持1px的填充空隙。)

·                                 Final art must be exported as a 32x32 px transparent PNG file.(最終導出圖像必須是32x32px 透明PNG檔案)

·                                 Templates for creating tab icons in Adobe Photoshop are available in the Icon Templates Pack.(在Photoshop中建立标簽圖示的模版在圖示模版包中可以找到。)

Figure 8. Safeframe and fill gradient for unselected tab icons. Icon size is 32x32.

圖8.未選中标簽圖示的安全邊框和填充色,圖示大小32x32

Figure 9. Safeframe and fill gradient for tab icons in selected state. Icon size is 32x32.

圖9.選中标簽圖示的安全邊框和填充色,圖示大小32x32

Unselected tab icon(未選中标簽圖示)

Light, effects, and shadows(光照、效果和陰影)

Unselected tab icons look just like the selected tab icons, but with a fainter inner shadow, and the same front part gradient as the dialog icons.(未選中标簽圖示看起來和選中圖示很像,不同的是微帶内部陰影,前部填充色與對話框圖示相同。)

Figure 10. Light, effects, and shadows for unselected tab icons.

圖10.未選中标簽圖示的光照、效果和陰影

1.

Front part:

前部

gradient overlay | angle 90°

bottom color: r 223 | g 223 | b 223

top color: r 249 | g 249 | b 249

bottom color location: 0%

top color location: 75%

2.

Inner shadow:

内陰影

black | 10 % opacity | angle 90° distance 2px | size 2px
3. Inner bevel:内斜角

depth 1% | direction down | size 0px | angle 90° | altitude 10°

highlight white 70% opacity

shadow black 25% opacity

Step by step(步驟)

1.                              Create the basic shapes using a tool like Adobe Illustrator.( 使用Illustrator建立基本圖形)

)

2.                              Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.(将圖形導入到photoshop中,調整成32x32px,透明背景)

3.                              Add the effects seen in Figure 10 for the unselected state filter.(增加圖10中所描述的濾鏡效果)

4.                            Export the icon at 32x32 as a PNG file with transparency enabled.(導出32x32大小的透明png圖示檔案)

Selected tab icon(選中标簽圖示)

The selected tab icons have the same fill gradient and effects as the menu icon, but with no outer glow.

選中标簽圖示與菜單圖示具有相同的填充色度和效果,但是沒有外發光。

Figure 11. Light, effects, and shadows for selected tab icons.

圖11.選中标簽圖示的光照、效果和陰影

1. Front part:前部 Use fill gradient from color palette.
2. Inner shadow:内陰影

black | 20% opacity | 

angle 90° | distance 2px | 

size 2px

3. Inner bevel:内斜角

depth 1% | direction down | size 0px | angle 90° | 

altitude 10°

highlight white 70% opacity

shadow black 25% opacity

Color palette(色闆)

Fill gradient

1:  r 163 | g 163 | b 163

2:  r 120 | g 120 | b 120

Used as color fill on unselected tab icons.

Step by step(步驟)

1.                              Create the basic shape using a tool like Adobe Illustrator.

2.                              Import the shape into a tool like Adobe Photoshop and scale to fit a 32x32 px artboard with a transparent background.

3.                              Add the effects seen in Figure 11 for the selected state filter.

4.                            Export the icon at 32x32 as a PNG file with transparency enabled.

5.                            (同)

Dialog icon(對話框圖示)

Dialog icons are shown in pop-up dialog boxes that prompt the user for interaction. They use a light gradient and inner shadow in order to stand out against a dark background.

對話框圖示在彈出對話框中顯示,提示使用者進行互動。為了能再暗色背景上突出顯示,它使用微傾斜和内部陰影。

Structure(結構)

·                                 Dialog icons have a 1 pixel safeframe. The base shape must fit within the safeframe, but the anti-alias of a round shape can overlap the safeframe.(對話框圖示正常帶1像素的安全邊框,但是在安全邊框區域是要能夠反鋸齒的圓角形狀是可以的)

·                                 All dimensions specified on this page are based on a 32x32 pixel artboard size in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the Photoshop template.(此頁上指定的所有尺寸都基于一個32x32像素Photoshop畫闆大小,保留1px的邊緣)

·                                 Final art must be exported as a transparent PNG file.(最終導出圖像必須是透明PNG檔案)

·                                 Templates for creating dialog icons in Adobe Photoshop are available in the Icon Templates Pack.(在Photoshop中建立對話框圖示的模版可以再圖示模版包中找到。)

Figure 12. Safeframe and fill gradient for dialog icons. Icon size is 32x32.

圖12.對話框圖示的安全邊框和填充斜度。圖示大小為32x32.

Light, effects, and shadows(光照、效果和陰影)

Dialog icons are flat and pictured face-on. In order to stand out against a dark background, they are built up using a light gradient and inner shadow.(對話框圖示是平面的,并且圖檔面朝上的。為了能在暗色背景中顯得更加明顯,在它們建立的時候使用光照梯度和内部陰影。)

Figure 13. Light, effects, and shadows for dialog icons.

圖13.對話框圖示的光照,效果和陰影

1.

Front part:

前面闆

gradient overlay | angle 90°

bottom: r 223 | g 223 | b 223

top: r 249 | g 249 | b 249

bottom color location: 0%

top color location: 75%

2.

Inner shadow:

内部陰影

black | 25% opacity | 

angle -90° | distance 1px | size 0px

Step by step(步驟)

1.                              Create the basic shapes using a tool like Adobe Illustrator.使用Illustrator建立基礎圖形。

2.                              Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.将建立的圖形導入到Photoshop中,并進行縮放,得到32x32px的透明背景的圖示

3.                              Add the effects seen in Figure 13 for the proper filter.在圖示上使用圖13中描述的濾鏡

4.                            Export the icon at 32x32 as a PNG file with transparency enabled.導出一個32x32 px具有透明背景的的png檔案

List view icon(清單視圖圖示)

List view icons look a lot like dialog icons, but they use an inner shadow effect where the light source is above the object. They are also designed to be used only in a list view. Examples include the Android Market application home screen and the driving directions screen in the Maps application.

清單視圖圖示很像對話框圖示,但是他們使用光源在物體上方的内部陰影效果。他們也被設計成隻在清單視圖中使用。圖例包括Android Market 應用程式主界面和地圖應用中的駕車導航界面。

Structure(結構)

·                                 A list view icon normally has a 1 px safeframe, but it is OK to use the safeframe area for the edge of the anti-alias[91]  of a round shape.(清單視圖圖示正常帶1像素的安全邊框,但是在安全邊框區域是要能夠反鋸齒的圓角形狀是可以的)

·                                 All dimensions specified are based on a 32x32 pixel artboard size in Photoshop. Keep 1 pixel of padding around the bounding box inside the template.(所有尺寸的規定都是基于32x32大小的Photoshop畫闆。在矩形圖和模版之間保留1像素的填充區域。)

·                                 Final art must be exported as a transparent PNG file.(最終導出的是透明的PNG檔案)

·                                 Templates for creating list view icons in Adobe Photoshop are available in the Icon Templates Pack.(在Photoshop 中建立清單視圖圖示的模版能在圖示模版中找到。)

Figure 14. Safeframe and fill gradient for list view icons. Icon size is 32x32.

圖14.清單視圖圖示的安全邊框和填充梯度。圖示大小為32X32

Light, effects, and shadows(光照、效果和陰影)

List view icons are flat and pictured face-on with an inner shadow. Built up by a light gradient and inner shadow, they stand out well on a dark background.(清單視圖圖示是平面的,圖檔面朝上的并帶内部陰影的。建立的時候帶光照梯度和内部陰影,他們在暗色背景中能很明顯的區分。)

Figure 15. Light, effects, and shadows for list view icons.

圖15.清單視圖圖示的光照、效果和陰影

1.

Inner shadow:

内部陰影

black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px
2.

Background:

背景

black | standard system color 

These icons are displayed in list views only.

Note: The list view icon sits on 32x32 px artboard in Photoshop, without a safeframe.

注意:清單視圖圖示在32x32的Photoshop畫闆中沒有安全邊框

Step by step(步驟)

1.                              Create the basic shapes using a tool like Adobe Illustrator.使用Illustrator建立基礎圖形。

2.                              Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32x32 px on a transparent background.将形狀導入到Photoshop中,并縮放到32x32大小并帶透明背景。

3.                              Add the effects seen in Figure 15 for the proper filter.增加圖15中提到的濾鏡效果。

4.                              Export the icon at 32x32 as a PNG file with transparency enabled.導出一個32x32的PNG透明效果開啟的檔案

5.                             

General guidelines(通用規則)

Below are some "do and don't" guidelines to consider when creating icons for your application. By following the guidelines, you can ensure that your icons will work well with other parts of the Android platform UI and will meet the expectations of your application's users.

下面是建立應用圖示的時候一些“可以”和“不可以”的規定。通過遵循這些規定,可以保證你的圖示能很好的在Android 平台的UI上和其他部分結合并達到你的使用者群的需求。

Do...可以

·                                 Use a normal perspective. The depth of an object should be realistic.

·                                 使用正常的透視角。元件的深度應該比較真實。

·                                 Keep it simple! By overdoing an icon, it loses it purpose and readability.

·                                 保持簡單!重複的修改一個圖示會讓圖示失去意義和真實性。

·                                 Use colors only when necessary. Mind that the base of a launcher icon should be grey and feel solid.在必要的時候使用色彩。注意啟動圖示應該是灰色并固體填充的。

·                                 Use the correct angles for the specific icon types.使用正确的規格類型的角度。

Don’t...不可以

·                                 Use open elements like text alone as icons. Instead place those elements on a base shape.

·                                 Use colors for your status bar notifications. Those are reserved for specific phone-only functions.

·                                 使用類似單獨文本作為開放元件圖示,而不是使用基礎圖形。

·                                 為你的狀态欄通知使用顔色。這些都是為手機功能預留的。

Using the Android Icon Templates Pack(使用Android圖示模版包)

The Android Icon Templates Pack is a collection of template designs, filters, and settings that make it easier for you to create icons that conform to the general specifications given in this document. We recommend downloading the template pack archive before you get started with your icon design.

Android圖示模版庫包括模版設計、濾鏡和一些怎樣讓你友善的設計符合通用規則的圖示。我們建議你在開始你的圖示設計之前下載下傳這個模版封包檔。

The icon templates are provided in Adobe Photoshop and Adobe Illustrator file formats, which preserves the layers and design treatments we used when creating the standard icons for the Android platform. You can load the template files into any compatible image-editing program, although your ability to work directly with the layers and treatments may vary based on the program you are using.

圖示模版支援Photoshop和Illustrator檔案格式,并保留了一些我們為Android平台建立圖示時候的層資訊。你可以加載這些檔案到任何可相容的圖像編輯程式,因為你可能對自己正在用的這些應用程式工具有比較好的了解。

You can obtain the Icon Templates Pack archive using the link below:你可以使用下面的連結下載下傳圖示模版庫

Download the Icon Templates Pack » android-sdk-windows-1.6_r1/docs/shareables/icon_templates-v1.0.zip (SDK目錄下的一個檔案)

Icon appendix(圖示附錄)

Standard launcher icons(标準的啟動圖示)

Shown below are examples of launcher icons used by Android applications. The icons are provided for your reference only — please do not reuse these icons in your applications..以下是Android應用程式的啟動圖示樣例。僅供參考,請不要再你的應用中使用這些圖示。

Alarm Clock Browser Calculator Calendar Camcorder Camera Contacts
Dialer Email Gallery Generic application Gmail Google Talk IM
Maps Market Messaging Music Settings Voice Dialer Voice Search
YouTube

Standard menu icons (标準的菜單圖示)

Shown below are standard menu icons that are included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that the action you assign to the icon is consistent with that listed. Note that this is not a complete list of icons and that the actual appearance of standard icons may change across platform versions.以下是Android平台(比如Android 1.5)包含的标準的菜單圖示。你可以在你的應用中引用任意一個圖示資源,但是必須確定你配置設定的是相應的清單中的資源。注意這不是一個完整的圖示清單,圖示的外形可能在不同平台版本中變得不一樣。

To reference one of the icons from your code, use android.R.drawable.<icon_resource_identifier>. For example, you can call a menu item's setIcon() method and pass the resource name:

在你的代碼中引用一個圖示:

使用 android.R.drawable.<icon_resource_identifier>. 比如,你能調用一個菜單機關的 setIcon() 方法傳遞資源的名稱:

.setIcon(android.R.drawable.ic_menu_more);.

You could reference the same icon from a layout file using android:icon="@android:drawable/ic_menu_more">.

你可以在圖層檔案中引用同一個圖示:使用 android:icon=”@android:drawable/ic_menu_more”>

To determine the resource ID for an icon listed below, hover over the icon or simply look at image filenames, which use the format "<icon_resource_identifier>.png".

判斷如下清單中的圖示資源ID,檢視圖示或者通過簡單檢視圖檔檔案名稱(命名規則是“圖示_資源_辨別.png”)

Add Call Camera Clear / Close / Cancel / Discard Compass Delete Directions
Edit Gallery Help Info / details Map mode My Location More
Preferences Rotate Save Send Search Share Upload
View Zoom

Standard status bar icons(标準的狀态欄圖示)

Shown below are standard status bar icons included in the Android platform (as of Android 1.5). You can reference any of these icon resources from your application as needed, but make sure that the meaning of the icon is consistent with the standard meaning listed. Note that this is not a complete list of icons and that the actual appearance of standard icons may change across platform versions.

以下是Android平台(比如Android 1.5)包含的标準的狀态欄圖示。你可以在你的應用中引用任意一個圖示資源,但是必須確定你配置設定的是相應的清單中的資源。注意這不是一個完整的圖示清單,圖示的外形可能在不同平台版本中變得不一樣。

To reference one of the icons from your code, use android.R.drawable.<icon_resource_identifier>. For example, you can construct a simple notification that references one of the icons like this:

在你的代碼中引用一個圖示:

使用android.R.drawable.<icon_resource_identifier>. 比如,為了建構一個簡單的通知,我們這樣引用一個圖示:

new Notification(R.drawable.stat_notify_calendar, "sample text", System.currentTimeMillis());

To determine the resource ID for an icon listed below, hover over the icon or simply look at the image filename, which use the format "<icon_resource_identifier>.png".

判斷如下清單中的圖示資源ID,檢視圖示或者通過簡單檢視圖檔檔案名稱(命名規則是“圖示_資源_辨別.png”)

Bluetooth Email IM Voicemail Warning Call Call forward
Call on hold Missed call

 [91]反鋸齒