Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Icon Design - 中文/Chinese
来源:互联网 发布:java函数调用数组 编辑:程序博客网 时间:2024/06/07 19:42
转自:http://blog.csdn.net/sirdonker/article/details/5687348
图标设计指南
图标设计Quickview
- 在一个Android应用中有很多种类型图标。
- 你的图标应该尽量遵循本文档的建议。
- Android平台提供了一批标准图标,你的应用也可以通过引用drawable资源来使用它们。
In this document
- 桌面图标
- 菜单图标
- 状态栏图标
- 标签页图标
- 对话框图标
- 列表项图标
- 通用指南
- 使用图标模板包
- 附录
- 桌面图标
- 菜单图标
- 状态栏图标
参考
- 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使用的创建桌面图标的模板。
光线、效果和阴影
桌面图标是使用了特定光线和阴影的简单3D图标。光源放置在图标的偏左前方,于是阴影在右后方。
桌面图标调色板
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模板。
光线、效果和阴影
菜单图标是平的,正面朝向用户。为了创建深度,要使用一些微小的凹陷效果和其它一些效果。
调色板
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模板。
光线、效果和阴影
状态栏图标是轻微下凹的,高对比度,并且(pictured face-on to)来提高小尺寸下的清晰度。
调色板(我认为下面的填充渐变和灰渐变写反了)
只有电话相关的状态栏图标是彩色的;所有其它的状态栏图标都是单色的。
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模板
未被选中的标签页图标
光线、效果和阴影
未被选中的标签页图标看起来和未被选中的差不多,但是内部阴影更暗,它的前部渐变跟对话框图标一样。
Step by step
- 在AdobeIllustrator中创建一个基本形状。
- 把形状导入AdobePhotoshop,把它缩放到32x32像素的透明背景的画板上。
- 添加Figure 10中所说的未被选中状态的效果。
- 把图标导出为32x32带透明色的png文件。
被选中的标签页图标
被选中的标签页图标,填充渐变以及效果跟菜单图标一样,但是没有外围泛光。
调色板
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模板。
光线、效果和阴影
对话框图标是平的,并且正对用户。为了区别于暗背景,应该使用亮渐变和内部阴影。
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模板。
光线、效果和阴影
列表项图标是平的,面向用户,并且有向内的阴影。通过亮渐变和向内的阴影来跟暗背景进行区分。
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应用使用的,请不要在你的应用中使用它们。 .
标准菜单图标
下面的图标是Android平台(1.5)提供的标准菜单图标。如果需要,你可以在你的应用中引用它们,但要保证它们在你的应用中代表的含义跟平台的一致。注意这并不是完整的图标列表,而且,这些图标可能由于平台的不同而看起来不同。
使用 android.R.drawable.<icon_resource_identifier>
来在你的应用中引用这些图标。例如,你可以通过MenuItem的 you can call a menu item'ssetIcon()
方法来设置图标资源:
.setIcon(android.R.drawable.ic_menu_more);
.
在Layout文件中,你可以通过这种方式引用: android:icon="@android:drawable/ic_menu_more">
把鼠标悬停在下面的图标上,就能看到对应的ResourceId。
标准状态栏图标
下面的图标是Android平台(1.5)提供的标准菜单图标。如果需要,你可以在你的应用中引用它们,但要保证它们在你的应用中代表的含义跟平台的一致。注意这并不是完整的图标列表,而且,这些图标可能由于平台的不同而看起来不同。
使用 android.R.drawable.<icon_resource_identifier>
来在你的应用中引用这些图标。例如,你可以通过这种方式把一个图标设置到你的Notification上:
new Notification(R.drawable.stat_notify_calendar, "sample text", System.currentTimeMillis());
把鼠标悬停在下面的图标上,就能看到对应的ResourceId。
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Icon Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Icon Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Activity and Task Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Menu Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Activity and Task Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Menu Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Activity and Task Design - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Responsiveness - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Seamlessness - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Performance - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Performance - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Seamlessness - 中文/Chinese
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Responsiveness - 中文/Chinese
- [Android SDK 翻译]Icon Design Guidelines (图标设计规范)
- Icon Design Guidelines-android 图标设计指导
- Icon Design Guidelines
- 25 Best Icon Sets for Application Design
- Android Dev Guide笔记
- 2011总结
- DateTimePicker控件进行时间选择与显示
- js 获取 asp.net 服务器端控件 Label 与 TextBox RadioButtonList 与 DropDownList 的值
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Performance - 中文/Chinese
- 关于圣诞节礼物的反思
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Icon Design - 中文/Chinese
- TOMCAT源码分析(启动框架)
- codeigniter中控制器(controller)的使用
- ASIHTTPRequest中HTTP请求终结者详解
- Android SDK 2.1 - Dev Guide - Best Practives - UI Guidelines - Menu Design - 中文/Chinese
- setTimeout和setInterval的使用
- 搭建Struts2开发环境
- 我对一个程序的分析(发现VC++的错误)
- Android SDK 2.1 - Dev Guide - Best Practives - Designing for Seamlessness - 中文/Chinese