Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Icon Design - 中文/Chinese

转自：http://blog.youkuaiyun.com/sirdonker/article/details/5687348

图标设计指南

图标设计Quickview

• 在一个Android应用中有很多种类型图标。
• 你的图标应该尽量遵循本文档的建议。
• Android平台提供了一批标准图标，你的应用也可以通过引用drawable资源来使用它们。

In this document

1. 桌面图标
2. 菜单图标
3. 状态栏图标
4. 标签页图标
5. 对话框图标
6. 列表项图标
7. 通用指南
8. 使用图标模板包
9. 附录
   1. 桌面图标
   2. 菜单图标
   3. 状态栏图标

参考

1. Android Icon Templates Pack »

在用户界面有统一的视感，会提升你的产品价值。流畅的图像风格也会使你的UI看起来更专业。

本文档展示了如何为你应用的UI的不同部分创建图标，来符合Android用户界面小组所设定的风格。遵循这些建议，你就能提供精致并且统一的用户体验。

为了更快地创建统一的图标，你可以下载Android图标模板包。更多详情，参考 使用图标模板包.

（文档中涉及诸多的图像处理上的术语，有些地方我就保留英文，作为对比了。）

桌面图标

桌面图标，就是显示在Android设备主屏上的图标。它是一个有固定透视的简单的3D图标。透视所需要的参数在Figure 1中。

结构

• The base of a launcher icon can face either the top view or the front view.
  基本上桌面图标的主要面应该是顶面或者前面。
• 桌面图标的主要面应该使用桌面图标调色板上的颜色。对于需要的细节和重点，可以使用一些亮色来突出特征。
• 所有的桌面图标必须有圆角，使之看起来更友好。参见Figure 2。
• 本部分的尺寸都基于矢量图像编辑器（例如Adobe Illustrator）的250x250像素的画板。
• 最终的成品图标，必须要通过点阵化图片编辑器（例如AdobePhotoshop）缩小尺寸输出为背景透明的48x48像素png图片。
• 在图标模板包中，有AdobeIllustrator和Photoshop使用的创建桌面图标的模板。

Figure 1. 桌面图标的透视角度 (90° 是垂直方向)。 1. 92° 2. 92° 3. 173° 4. 171° 5. 49° 6. 171° 7. 64° 8. 97° 9. 75° 10. 93° 11. 169° Figure 2. 桌面图标的圆角。

光线、效果和阴影

桌面图标是使用了特定光线和阴影的简单3D图标。光源放置在图标的偏左前方，于是阴影在右后方。

Figure 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 1. 边缘高亮： 白色 2. 图标阴影： 黑色 | 20像素模糊 50%不透明度 | 角度67° 3. 前部： 使用调色板中的亮渐变。 4. 细节阴影： 黑色 | 10像素模糊 75%不透明度 5. 侧边部分： 使用调色板中的中渐变。

桌面图标调色板 White/白色 r 0 | g 0 | b 0 用于边缘高亮 Light gradient/亮渐变 1:  r 0 | g 0 | b 0 2:  r 217 | g 217 | b 217 用于图标的（亮的）前部。 Medium gradient/中渐变 1:  r 190 | g 190 | b 190 2:  r 115 | g 115 | b 115 用于图标的（阴影的）侧边部分。 Dark gradient/暗渐变 1:  r 100 | g 100 | b 100 2:  r 25 | g 25 | b 25 用于图标细节部分的阴影。 Black/黑色 r 255 | g 255 | b 255 用于图标阴影的基色。

Step by step 用工具（AdobeIllustrator）创建一个基础形状，要使用桌面图标：结构 中描述的角度。形状和效果必须要能放进250x250像素的画板。 Add depth to shapes by extruding them and create the rounded corners as described for the launcher icon structure. 把这个形状进行拉伸，使之3D化，然后创建桌面图标结构中所说的圆角。 增加细节和颜色。通过渐变，表现出好像在左前方有一个光源的效果。 用正确的角度和模糊效果创建阴影。 把图标导入到工具（AdobePhotoshop）中，缩小到48x48像素，并且带透明背景。 把图标导出成为48x48有透明度的png文件。

菜单图标

菜单图标，作为菜单的图形元素，会显示在用户按MENU键弹出的菜单中。 They are drawn in a flat-front perspective. Elements in a menu icon must not be visualized in 3D or perspective. 这种图标使用正前方透视，不应该有明显的3D或者透视效果。

结构

• 为了保证连贯性，所有的菜单图标必须使用同样的主调色板和同样的效果。更多细节，参见菜单图标调色板。
• 菜单图标应该包含圆角，但是仅仅应该在符合逻辑的地方用。例如，在Figure 3中，符合逻辑的圆角是屋顶，建筑的其它部分不需要圆角。
• 本部分的尺寸，都基于有6像素边框的48x48像素的画板。
• 在光线、效果和阴影 中描述的图标的效果（泛光），在需要的时候，可以覆盖这个6像素的边框。基本形状必须放在边框内部。
• 成品图标必须导出成带透明色的png文件。
• 在图标模板包中有创建菜单图标的AdobePhotoshop模板。

Figure 4. 菜单图标的边框和圆角。图标尺寸是48x48。

光线、效果和阴影

菜单图标是平的，正面朝向用户。为了创建深度，要使用一些微小的凹陷效果和其它一些效果。

Figure 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 4. Inner bevel: depth 1% | direction down size 0px angle 90° | altitude 10° highlight white 70% opacity shadow black 25% opacity 1. 前部： 使用主调色板的填充渐变。 2. 内部阴影： 黑色 | 20%不透明度 角度90° | 距离2像素 尺寸2像素 3. 外部泛光： 白色 | 55%不透明度 扩展10% | 尺寸3像素 4. 内部浮雕效果： 深度1% | 向下尺寸0px 角度90° | 高度10° 高亮白色70%不透明度 阴影黑色25%不透明度

调色板 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 使用AdobeIllustrator建立一个基础形状。 把这个形状导入到AdobePhotoshop，把它缩放到48x48像素带透明背景，注意保证6像素边框。 添加Figure 5中描述的效果。 导出图标为48x48像素带透明色的png文件。

状态栏图标

状态栏图标用于展现从你应用发出的显示在状态栏的Notification。在图形上面，它跟菜单图标很像，但是状态栏图标更小，对比度更高。

结构

• 如Figure 7所示，状态栏图标的基础形状和细节必须包含圆角。
• 本部分的尺寸，都基于2像素宽边框的25x25像素的画板。
• 状态栏图标可以在左右两边覆盖边框，但是决不能覆盖上下边框。
• 成品图标必须导出成带透明色的png文件。
• 在图标模板包中有创建状态栏图标的AdobePhotoshop模板。

Figure 6. 状态栏图标的边框和圆角。图标尺寸是25x25像素。

光线、效果和阴影

状态栏图标是轻微下凹的，高对比度，并且（pictured face-on to）来提高小尺寸下的清晰度。

Figure 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 1. 前部： 使用主调色板的填充渐变。 2. 内部浮雕效果： 深度100% | 下方向 尺寸0px | 角度90° | 高度30° 高亮白色 75% 不透明度 阴影黑色 75% 不透明度 3. 细节： 白色 4. 不可用的细节： 调色板中的灰渐变 + 内部浮雕: 平滑 | 深度 1% | 下方向 | 尺寸 0px | 角度 117° | 高度 42° | 高亮白色 70% | 无阴影

调色板（我认为下面的填充渐变和灰渐变写反了） 只有电话相关的状态栏图标是彩色的；所有其它的状态栏图标都是单色的。 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 在AdobePhotoshop中，在透明背景的25x25像素画板上，创建一个基础形状。注意考虑边框，至少上下要留2像素。 添加Figure 6中所说的圆角。 添加Figure 7中所说的光线、效果和阴影。 把图标导出为25x25带透明色的png文件。

标签页图标（Tab icon）

标签页图标是在多标签界面中各个标签页上显示的图像元素。每个标签页图标有两个状态：未被选中的和被选中的。

结构

• 被选中的标签页图标，填充渐变以及效果跟菜单图标一样，但是没有外围泛光。（这里原文是unselected tab icon，是错的。）
• 未被选中的标签页图标看起来和未被选中的差不多，但是内部阴影更暗，它的前部渐变跟对话框图标一样。（这里原文是selected tab icon，是错的。）
• 标签页图标有1像素的边框，除了反锯齿造成的边缘以外，不能覆盖这个边框。
• 本部分的尺寸，都基于有1像素边框的32x32像素的画板。
• 成品图标必须导出成带透明色的32x32像素的png文件。
• 在图标模板包中有创建状态栏图标的AdobePhotoshop模板

	Figure 8. 未被选中的标签页图标的边框和填充渐变。图标尺寸是32x32。
	Figure 9. 被选中的标签页图标的边框和填充渐变。图标尺寸是32x32。

未被选中的标签页图标

光线、效果和阴影

未被选中的标签页图标看起来和未被选中的差不多，但是内部阴影更暗，它的前部渐变跟对话框图标一样。

Figure 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 1. 前部： 渐变填充 | 角度 90° 底部颜色: r 223 | g 223 | b 223 顶部颜色: r 249 | g 249 | b 249 底部颜色位置: 0% 顶部颜色位置: 75% 2. 内部阴影： 黑色 | 10% 不透明度 | 角度 90° 距离 2px | 尺寸 2px 3. 内部浮雕效果： 深度 1% | 下方向 | 尺寸 0px | 角度 90° | 高度 10° 高亮白色 70% 不透明度 阴影黑色 25% 不透明度

Step by step 在AdobeIllustrator中创建一个基本形状。 把形状导入AdobePhotoshop，把它缩放到32x32像素的透明背景的画板上。 添加Figure 10中所说的未被选中状态的效果。 把图标导出为32x32带透明色的png文件。

被选中的标签页图标

被选中的标签页图标，填充渐变以及效果跟菜单图标一样，但是没有外围泛光。

Figure 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 1. 前部： 使用调色板中的渐变填充。 2. 内部阴影： 黑色 | 20% 不透明度 | 角度 90° | 距离 2px | 尺寸 2px 3. 内部浮雕效果： 深度 1% | 下方向 | 尺寸 0px | 角度 90° | 高度 10° 高亮白色 70% 不透明度 阴影黑色 25% 不透明度

调色板 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 在AdobeIllustrator中创建一个基本形状。 把形状导入AdobePhotoshop，把它缩放到32x32像素的透明背景的画板上。 添加Figure 11中所说的未被选中状态的效果。 把图标导出为32x32带透明色的png文件。

对话框图标

对话框图标是放在弹出对话框中用来提示用户的。这种图标使用亮的渐变，以及内部阴影，从而和暗的背景区分开来。

结构

• 对话框图标有1像素的边框，除了反锯齿造成的边缘以外，不能覆盖这个边框。
• 本部分的尺寸，都基于有1像素边框的32x32像素的画板。
• 成品图标必须导出成带透明色的32x32像素的png文件。
• 在图标模板包中有创建对话框图标的AdobePhotoshop模板。

Figure 12. 对话框图标的边框和填充渐变。图标尺寸是32x32。

光线、效果和阴影

对话框图标是平的，并且正对用户。为了区别于暗背景，应该使用亮渐变和内部阴影。

Figure 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 1. 前部： 渐变填充 | 角度 90° 底部颜色：r 223 | g 223 | b 223 顶部颜色：r 249 | g 249 | b 249 底部颜色位置：0% 顶部颜色位置：75% 2. 内部阴影： 黑色 | 25% 不透明度 | 角度 -90° | 距离 1px | 尺寸 0px

Step by step 在AdobeIllustrator中创建一个基本形状。 把形状导入AdobePhotoshop，把它缩放到32x32像素的透明背景的画板上。 添加Figure 13中所说的未被选中状态的效果。 把图标导出为32x32带透明色的png文件。

列表项图标

列表项图标看起来更像是对话框图标，但是列表项图标使用了内部阴影效果，光源是在物体正上方。这类图标只被设计用来在ListView中显示。AndroidMarket应用的主屏，和Map应用的驾驶导航界面，就是很好的例子。

结构

• 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. 一个列表项图标一般来说有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. 本部分的尺寸，都基于有1像素边框的32x32像素的画板。
• 成品图标必须导出成带透明色的32x32像素的png文件。
• 在图标模板包中有创建列表项图标的AdobePhotoshop模板。

Figure 14. 列表项图标的边框和填充渐变。图标尺寸是32x32。

光线、效果和阴影

列表项图标是平的，面向用户，并且有向内的阴影。通过亮渐变和向内的阴影来跟暗背景进行区分。

Figure 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. 1. 内向阴影： 黑色 | 57% 不透明度 | 角度 120° | 普通混合模式 | 距离 1px | 尺寸 1px   2. 背景： 黑色 | 标准系统色 这些图标仅用在列表项上。 注意：列表项图标尺寸是32x32，没有边框。

Step by step （原文这里是乱的） 在AdobeIllustrator中创建一个基本形状。 把形状导入AdobePhotoshop，把它缩放到32x32像素的透明背景的画板上。 添加Figure 15中所说的未被选中状态的效果。 把图标导出为32x32带透明色的png文件。

通用指南

下面是一些创建图标时的“要做”和“不要做”指南。通过遵循这些指南，你就可以确定你的图标会跟Android平台UI的其它部分一致，而且必将符合用户对你应用的期望。

Do... Use a normal perspective. The depth of an object should be realistic. 所以用普通透视。物体的深度应该是逼真的。 保持简单！复杂的图标会显得意图不明，并且可读性差。 Use colors only when necessary. Mind that the base of a launcher icon should be grey and feel solid. 只有必要的时候才使用颜色。考虑桌面图标的基本应该是灰的实心的。 对于特定的图标类型使用正确的角度。	Don’t... 不要使用纯文字之类的开放元素做图标。要把文字放到一个基础形状上。（下图的youtube图标）。 不要在状态栏通知的图标使用颜色。带颜色的图标仅仅是给电话相关功能用的。

使用Android图标模板包（Android Icon Templates Pack）

Android图标模板包，包含了一系列设计模板、滤镜和设置，可以使创建符合本文档通用标准的图标变得更轻松。我们建议，在你开始设计图标之前，先下载这个包。

图标模板是通过AdobePhotoshop和AdobeIllustrator文件格式提供的，保存了我们设计标准Android平台图标时用的（the layers and design treatments）。你可以在任何兼容的图像编辑软件中读取模板文件，当然你使用这些参数的方法可能会由于你工具的不同而变化。

可以通过以下链接来下载Android图标模板包：

Download the Icon Templates Pack »

附录

标准桌面图标

以下图标是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

标准菜单图标

下面的图标是Android平台（1.5）提供的标准菜单图标。如果需要，你可以在你的应用中引用它们，但要保证它们在你的应用中代表的含义跟平台的一致。注意这并不是完整的图标列表，而且，这些图标可能由于平台的不同而看起来不同。

使用 android.R.drawable.<icon_resource_identifier>来在你的应用中引用这些图标。例如，你可以通过MenuItem的 you can call a menu item's setIcon() 方法来设置图标资源：

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

在Layout文件中，你可以通过这种方式引用： android:icon="@android:drawable/ic_menu_more">

把鼠标悬停在下面的图标上，就能看到对应的ResourceId。

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

标准状态栏图标

下面的图标是Android平台（1.5）提供的标准菜单图标。如果需要，你可以在你的应用中引用它们，但要保证它们在你的应用中代表的含义跟平台的一致。注意这并不是完整的图标列表，而且，这些图标可能由于平台的不同而看起来不同。

使用 android.R.drawable.<icon_resource_identifier>来在你的应用中引用这些图标。例如，你可以通过这种方式把一个图标设置到你的Notification上：

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

把鼠标悬停在下面的图标上，就能看到对应的ResourceId。

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