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.启动图标的透视角度
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. 启动图标的光照，效果和阴影
|
| Launcher icon color palette 启动图标色板
| 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.启动图标的光照，效果和阴影
|
| Color palette（调色板）
| 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. 状态栏图标的光照、效果和阴影
|
| Color palette（调色板） Only status bar icons related to the phone function use full color; all other status bar icons should remain monochromatic.（只有和电话功能相关的状态栏图标才使用全色调色板，其他的所有状态栏图标都应该保持单色调色板）
| 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.未选中标签图标的光照、效果和阴影
|
| 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.选中标签图标的光照、效果和阴影
|
| Color palette（色板）
| 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.对话框图标的光照，效果和阴影
|
| 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.列表视图图标的光照、效果和阴影
| ||||||||||||
| 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 |
|
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 |
|
IM |
Voicemail |
Warning |
Call |
Call forward |
|
Call on hold |
Missed call |
|
|
|
|
|
[91]反锯齿
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
