求是设计会

以下内容来自华梅立的个人博客，汉斯·古格洛特生平与设计作品，由华梅立和其学生费妍、俞俊琛协同翻译完成，华梅立校对。 版权声明：文章英文原版版权归原作者所有，译文版权归原作者和求是设计会共同拥有。译文首发于华梅立的个人博客，转载时请以超链接形式标明文章原始出处和作者信息。

注：改版本基于android1.5，新的2.0设计导引以发布，请猛击此处，查看。

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 Android Icon Templates Pac 使用Android图标模板包
9. Icon appendix 图标附录
   • Launcher icons 启动图标
   • Menu icons 菜单图标
   • Status bar icons 状态条图标

See also

Android Icon Templates Pack »图标模板包

详细正文

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.

建立统一的外观和体验贯穿于用户界面，以提升产品的价值。简约高效的图形样式，亦会使用户界面显得更专业。

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.

本文档旨在说明如何为应用程序用户界面的各个部分创建相应的图标以符合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图标模板包，更多信息点击上面的链接。

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 250×250 pixel artboard size in a vector graphics editor like Adobe Illustrator, where the icon fits within the artboard boundaries.
• 使用矢量图形编辑器诸如Adobe Illustrator等绘制,所有尺寸的制定都需在250×250像素点图板尺寸内，并使图标适合于该图板的边框。
• Final art must be scaled down and exported as a transparent 48×48 px PNG file using a raster image editor such as Adobe Photoshop.
• 使用光栅图形编辑器诸如Adobe Photoshop,将最终设计必须缩放并导出为48×48像素点带透明图层的PNG文件。
• Templates for creating launcher icons in Adobe Illustrator and Photoshop are available in the Icon Templates Pack.
• 创建启动图标的AI和PS文件，可在图标模板包里获得。

Figure 1. 图1 Perspective angles for launcher icons (90° is vertical). 启动图标的透视角度（90°为垂直 ） 92° 92° 173° 171° 49° 171° 64° 97° 75° 93° 169° Figure 2. 图2 Rounded corners for launcher icons.> 启动图标倒角. 16px

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.图3 Light, effects, and shadows for launcher icons. 启动图标的光影效果 Edge highlight: 边缘高光 white 白色 Icon shadow:图标阴影 black | 20px blur | 50% opacity | angle 67° 50%透明度的黑，20px模糊，67度倾斜 Front part:前部 Use light gradient from color palette 使用色板中的淡过渡 Detail shadow:细部阴影 black | 10px blur | 75% opacity 75%的黑，10px模糊 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 inLauncher icon: structure.

   The shapes and effects must fit within a 250×250 pixel artboard.

   使用矢量创建基本形态，根据规范倒角并确保形状适合于250×250像素的图板中。

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

   拉升出形态纵深，并注意根据规范角。

3. 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.

   增加细节和颜色。注意影响渐变的光源点在左前方向。

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

   增加阴影，并注意角度规范和添加模糊效果。

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

   输出图标到诸如PS等软件中，设置透明背景并编辑使之适合于48×48像素的尺寸。

6. Export the icon at 48×48 as a PNG file with transparency enabled.

   输出图标为透明背景，48×48像素的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 4 the logical place for rounded corners is the roof and not the rest of the building.
• 菜单图标在条件许可下应倒角。例如，图4中倒角的位置是屋顶部分而不是其他部位。
• All dimensions specified on this page are based on a 48×48 pixel artboard size with a 6 pixel safeframe.
• 所有的尺寸制定都需在48×48像素点图板尺寸内，包括一个6像素点的安全框架（出血）。
• 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.
• 菜单图标的光影特效等效果处理（外发光），在必要情况下可以与6像素的安全框架重叠，但是基本形必须总是位于安全框架内部。
• 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.
• 创建菜单图标的PS文件，可在图标模板包里获得。

Figure 4. Safeframe and corner-rounding for menu icons. Icon size is 48×48. 图4.菜单图标的安全框架和图标倒角，图标尺寸为48×48。

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.启动图标的光影效果处理 Front part:正面 Use fill gradient from primary color palette 从基本色彩调色板里使用渐变填充 Inner shadow:内阴影 black | 20 % opacity | angle 90° | distance 2px | size 2px 黑色/20%不透明度、角度90°/距离2px 尺寸2px Outer glow:外发光 white | 55% opacity | spread 10% | size 3px 白色/55%不透明度，扩展10%/尺寸3px Inner bevel:内斜面 depth 1% | direction down size 0px | 深度 1%/方向 下/尺寸0px angle 90° | altitude 10° | highlight white 70% opacity | shadow black 25% opacity 角度 90°/高度 10°/高光 白色 70% 不透明度/阴影 黑色 25% 不透明度

Color palette 色彩调板

	White r 0 | g 0 | b 0 Used for outer glow and bevel highlight. 白色 r 0 | g 0 | b 0 用于外发光和斜面高光
	Fill gradient 1: r 163 | g 163 | b 163 2: r 120 | g 120 | b 120 Used as color fill. 渐变填充 1: r 163 | g 163 | b 163 2: r 120 | g 120 | b 120 作为色彩填充
	Black r 255 | g 255 | b 255 Used for inner shadow and bevel shadow. 黑色 r 255 | g 255 | b 255 用于内阴影和斜面阴影

Step by step 步骤

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

   使用Adobe Illustrator工具 创建基本形态。

2. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 48×48 px on a transparent background. Mind the safeframe.

   将基本形态导入到PS，调整比例为48×48 像素，背景透明的图形，留意安全框架。

3. Add the effects seen as described in Figure 5.

   添加效果如图5所描述。

4. Export the icon at 48×48 as a PNG file with transparency enabled.

   导出图标为48×48像素，背景透明的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 25×25 pixel artboard size with a 2 pixel safeframe.
• 所有尺寸制定需在25×25像素点图标尺寸内，包括一个2个像素点的安全框架。
• 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.
• 创建启动图标的AI和PS文件，可在图标模板包里获得。

Figure 6. Safeframe and corner-rounding for status bar icons. Icon size is 25×25. 图6.状态栏图标的安全框架和圆角，图标尺寸为25×25.

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 launcher icons. 图7.启动图标的光影效果处理。 Front part 正面： Use fill gradient from primary color palette 使用基本调色板的渐变填充 Inner bevel 内斜面： depth 100% | direction down 深度100%/方向向下 size 0px | angle 90° | altitude 30° 大小 0px/角度90°/高度30° highlight white 75% opacity 高光：白色 75%不透明度 shadow black 75% opacity 阴影： 黑色 75%不透明度 Detail 细节: white 白色 Disabled detail 未生效部分的细节: grey gradient from palette + inner bevel: smooth | depth 1% | direction down | size 0px | angle 117° | altitude 42° 黑色渐变+内斜面：平滑/深度1%/方向向下/大小 0px/角度117°/高度42°/ highlight white 70% 高光：白色 不透明度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: 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 25×25 px image on a transparent background. Mind the safeframe, and keep the upper and lower 2 pixels free.

   在PS里创建一个25×25像素，背景透明的基本图形，留意安全框架,保证最上面和最下面有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 25×25 as a PNG file with transparency enabled.

   导出图标为25×25，背景透明的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.
• 标签图标有一个像素的安全框架，只有圆形的锯齿边缘可以与其重叠。
• All dimensions specified on this page are based on a 32×32 px artboard size. Keep 1 px of padding around the bounding box inside the Photoshop template.
• 所有的尺寸制定须在32×32 像素点图标尺寸内，保持模板内的填充边框周围有1像素的内边距
• Final art must be exported as a 32×32 px transparent PNG file.
• 最终作品必须以32×32像素，背景透明的PNG文件格式导出。
• Templates for creating tab icons in Adobe Photoshop are available in the Icon Templates Pack.
• 创建标签图标的PS文件，可在图标模板包里获得。

Unselected tab icon 未被选择的标签图标

	Figure 8. Safeframe and fill gradient for unselected tab icons. Icon size is 32×32. 图8.未被选择的标签图标的安全框架和渐变填充，图标大小为32×32。
	Figure 9. Safeframe and fill gradient for tab icons in selected state. Icon size is 32×32. 图9.被选择图标的安全框架和渐变填充，图标尺寸为32×32。

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.为被选择的标签图标的光影效果 Front part 正面: gradient overlay | angle 90° 渐变覆盖/角度90° bottom color: r 223 | g 223 | b 223 底部颜色 top color: r 249 | g 249 | b 249 顶部颜色 bottom color location: 0% 底部色彩位置：0% top color location: 75% 顶部色彩位置：75% Inner shadow 内阴影: black | 10 % opacity | angle 90° distance 2px | size 2px 黑色/10%不透明度/角度 90° 距离 2px/大小 2px Inner bevel 内斜度: depth 1% | direction down | size 0px | angle 90° | altitude 10° 深度 1%/方向向下/大小0px/角度90°/高度10° highlight white 70% opacity 高光模式：白色 70%不透明度 shadow black 25% opacity 暗调模式：黑色 25%不透明度

Step by step 步骤

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

   用AI创建一个基本形态。

2. Import the shape to a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.

   将形态导入到PS中，调整大小为32×32，背景透明的图形文件。

3. Add the effects seen in Figure 10 for the unselected state filter.

   给未被选择的图标添加效果，如图10所示

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

   导出图标为 32×32 像素，背景透明 的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.被选择图标的光影效果 Front part 正面: Use fill gradient from color palette. 从调色板中选择渐变填充。 Inner shadow 内阴影: black | 20% opacity | angle 90° | distance 2px | size 2px 黑色/20%不透明度/角度90°/距离 2px/大小2px Inner bevel 内斜面: depth 1% | direction down | size 0px | angle 90° | altitude 10° 深度 1%/方向向下/大小 0px/角度 90°/高度 10° highlight white 70% opacity 高光：白色 70%不透明度 shadow black 25% opacity 阴影：黑色 25%不透明度

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.

   使用AI创建一个基本形态。

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

   将形态导入到PS中，调整大小为32×32像素，背景透明的图形。

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

   为被选择标签图标添加效果，如图11所示。

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

   导出图标为32×32，背景透明的PNG格式文件。

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 32×32 pixel artboard size in Adobe Photoshop. Keep 1 pixel of padding around the bounding box inside the Photoshop template.
• 所有的尺寸制定须在32×32像素点图标尺寸内，保持模板内的填充边框周围有一个像素的内边距
• 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.
• 创建对话图标的PS文件，可在图标模板包里获得。

Figure 12. Safeframe and fill gradient for dialog icons. Icon size is 32×32. 图12.对话图标的安全框架和渐变填充，图标大小为32×32.

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.对话图标的光影效果处理 Front part 正面: gradient overlay | angle 90° 渐变覆盖/角度 90° bottom 底部: r 223 | g 223 | b 223 top 顶部: r 249 | g 249 | b 249 bottom color location 底部颜色: 0% top color location 顶部颜色：75% Inner shadow 内阴影: black | 25% opacity | angle -90° | distance 1px | size 0px 黑色/25%不透明度/角度90°/距离1px/大小0px

• 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 of a round shape.
• 一个目录查看图标通常只有一个像素的安全框架，圆形抗锯齿边缘可以与安全框架重叠。
• All dimensions specified are based on a 32×32 pixel artboard size in Photoshop. Keep 1 pixel of padding around the bounding box inside the template.
• 在PS中所有的尺寸制定在32×32的像素点图板尺寸内，保持模板内的填充边框周围有一个像素的内边距
• 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.
• 创建目录查看图标的PS文件，可在图标模板包里获得。

Step by step 步骤

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

   使用AI创建一个基本形态。

2. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.

   将形态导出到PS，并调整大小为32×32 px背景透明的图形。

3. Add the effects seen in Figure 13 for the proper filter.

   添加效果，如图13所示。

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

   导出图标为 32×32 背景透明的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市场应用软件的主屏上和地图应用型程序的导航屏上。

Structure 结构

Figure 14. Safeframe and fill gradient for list view icons. Icon size is 32×32. 图14.目录查看图标的安全框架和渐变填充。图标尺寸为32×32.

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.目录查看图标光影效果处理 Inner shadow 内阴影: black | 57 % opacity | angle 120° | blend mode normal | distance 1px | size 1px 黑色/57%不透明度/角度120°/混合模式：正常/距离 1px/大小 1px Background 背景: black | standard system color These icons are displayed in list views only. 黑色/目录查看图标一般使用标准的系统色。 Note: The list view icon sits on 32×32 px artboard in Photoshop, without a safeframe. 注意：目录查看图标在PS中设定在32×32 像素点图板上，没有安全框架。

Step by step 步骤

1. Add the effects seen in Figure 15 for the proper filter.

   添加效果，如图15所示

2. Export the icon at 32×32 as a PNG file with transparency enabled.

   导出图标为32×32像素，背景透明的PNG格式文件。

3. Create the basic shapes using a tool like Adobe Illustrator.

   用AI创建基本形状。

4. Import the shape into a tool like Adobe Photoshop and scale to fit an image of 32×32 px on a transparent background.

   将图形导入到PS中，调整大小为32×32像素，背景透明的图形。

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界面中其他部分保持协调并且可以满足您用户的期望。

Do… 对的	Don’t… 错的
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. 为不同种类的图标选择适宜角度。	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 Pac 使用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的文件形式呈现，以便保留它的图层和路径。您还可以加载模板到任何兼容的图像编辑程序文件。不过对于图层的处理能力还要取决于你使用的软件。。

You can obtain the Icon Templates Pack archive using the link below:

Download the Icon Templates Pack »

您可以从以下链接获取图标模板包

下载图标模板包

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 Gmail	Google Talk google聊天	IM 即时通讯
Maps 电子地图	Market 股市	Messaging 信息	Music 音乐	Settings 设置	Voice Dialer 语音拨号	Voice Search 语音搜索
YouTube (视频）

Standard menu icon 标准菜单图标

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界面程序中的菜单图标范例（参见Android1.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:

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

要引用您的代码的图标之一，就使用:android.R.drawable。<icon_resource_identifier>

例如,您可以新建一个名为”setIcon  method”菜单目录 ,并且通过原名称

.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”.

为了确定下列图标的来源地址，可以将鼠标停旋在图标上，它将显示图标的文件名.文件名使用的格式是”<图标_出处_识别码>.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.

如下展示的是在Andaoid界面中的标准状态条图标（详见android1.5），您可以参照您的需要，但请确保图标表达的含义必须与实际意义相关联。请注意，这不是一个完整的图标列表，而实际的标准图标的外观可能会改变整套图标的版本。要引用您的代码的图标之一，就使用android.R.drawable.<icon_resource_identifier>.

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:

例如，您可以构建一个简单的告示引用其中这样一个图标：

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

新告示(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”.

为了确定下列图标的来源地址，可以将鼠标停旋在图标上，它将显示图标的文件名.文件名使用的格式是”<图标_出处_识别码>.png”.

Bluetooth 蓝牙	Email 电子邮件	IM 即时信息	Voicemail 语音邮件	Warning 注意事项	Call 通话中	Call forward 来电转移
Call on hold 来电等待	Missed call 未接来电