Android图标设计标准和原则
概述
本文将介绍如何在应用界面的不同部分使用符合Android 2.x系统风格的图标。遵守这些原则可以使应用程序为用户创造一个流畅统一的操作环境，而一个统一的外观，完整的用户界面会增加产品的附加价值，精炼的图形风格也使用户觉得应用更加专业。
这里有一个Android图标模板包(下载)，使用模板可以使创建图标的工作更加快速。
提供特定密度的图标集
Android系统可以在不同屏幕尺寸和分辨率的设备上运行。为应用设计图标时，必须考虑到道应用有可能在任何设备上安装运行。所以需要为Android系统提供不同尺寸的图标，以便在任何设备上应用界面都能正确显示。
一般推荐的方式是为三种普遍的屏幕密度（如表1）中的每一种都创造一套独立的图标。然后把他们储存在应用中特定的资源目录下。当应用运行时，Android平台将会检查设备屏幕的特性，并加载相应密度资源目录下的相应图标。
Android设备的基准屏幕密度是中等密度。因此，推荐的为多种屏幕密度创造图标方式如下：
- 首先为基准密度设计图标（表一为实际的像素尺寸设计的图标）。
- 把图标放在应用的默认可绘制资源中，然后在Android模拟器或HVGA设备中测试。
- 根据需要测试和调整基准图标。
- 基准密度下创建的图标调整完毕后再为其他密度创造副本：
- 把基准图标按比例放大到150％，创造一个高密度版本。
- 把基准图标按比例缩小到75％，创造一个低密度版本。
- 把图标放入应用的特定密度资源目录中。例如：
- 中密度版本放在res/drawable-mdpi/目录下（或放在默认res/drawable/目录下）。
- 高密度版本放在res/drawable-hdpi/目录下。
- 高密度版本放在res/drawable-ldpi/目录下。
- 如果需要，测试和调整高密度和低密度的图标。
关于如何创造和管理多密度图标集，参阅对设计师的建议。
表1. 三种普遍屏幕密度中,每种密度的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) | |
|---|---|---|---|
| 启动器 | 36x36px | 48x48px | 72x72px |
| 菜单 | 36x36px | 48x48px | 72x72px |
| 状态栏 | 24x24px | 32x32px | 48x48px |
| 标签 | 24x24px | 32x32px | 48x48px |
| 对话框 | 24x24px | 32x32px | 48x48px |
| 列表视图 | 24x24px | 32x32px | 48x48px |
启动器图标
启动器图标是设备主页和启动器窗口中应用程序的图标。用户可以通过点击主页底部的图标打开启动器，启动器中显示所有已安装的应用程序的图标。用户可以通过任何可用的硬件(c触摸屏，轨迹球等)选择一个应用并打开。
用户还可以把一个图标从启动器窗口中拖出来放在主页上，以便更快捷的打开应用程序。这时系统会把该应用的启动器图标显示主页墙纸，此时渲染的映射尺寸与在启动器中渲染的尺寸相同。
系统控制所有启动器图标的缩放，他们被渲染为统一的高和宽。被渲染的启动器图标的实际像素尺寸随设备屏幕像素尺寸和屏幕密度的不同而不同。为了保证图标渲染效果最佳，需要提供为低密度，中密度和高密度屏幕制作的图标。
风格
启动器图标应该符合以下原则的一般风格。这个准则并不是强制的，而是提供图标可以在其他设备上共享的普遍的办法。下图提供了例子。
启动器图标设计原则
- 干净和现代的:
- 启动器图标应该是现代的，有时有点古怪，但是他们不应该是过时和粗糙的。如果可能的话，应该避免过度使用象征性的隐喻。
- 简单和标志性的:
- Android启动器图标应该是自然的抽象表现；图标应该高度简化和夸张，以至于他们可以在小尺寸时合适显示。图标不应该过于复杂。
- 尝试用一个简单的部分作为整体的象征性的代表（例如，音乐图标以扬声器作为特征）。
- 考虑使用自然轮廓和形状，包括几何的和有机的，与现实（不是照片般的真实）映射。
- 图标不应该呈现一个对更大的图像不正确的观点。
- 触觉和质感:
- 图标应该表现为不平淡的，有质感的材料。更多信息请看下面的材料和色彩。
- 面向前方和顶部照明:
- Android 2.0和以后的平台的新规定:Android启动器图标应该面向前方，透视非常小，而且应该顶部照明。
此外，注意所有图标应该有独立的文字标签，而不是把文字设计嵌入到图标里面，把功夫用在使图标有特色和难忘上去。
更多Android系统下应用的启动器图标案例，请参阅标准启动器图标。
做什么和别做什么
- Android启动器图标是…
- 现代的，简约的，不平坦的，有触感，和质感的
- 面向前方和顶部明亮，整体而言，色彩在一定的色谱中
- Android 启动器图标不是…
- 过时的，过分复杂，光滑的，平坦的
- 旋转的, 剪裁不正的,过于深色的
质感和颜色
启动器的图标应该利用触觉，顶部照明，使用纹理材料。即使图标只是一个简单的形状，也应该尝试把它们当做真实世界的材料渲染。
平台默认应用的启动器图标用了下图所示的材料。图标可以使用下面这些材料，也可以创建新的材料。
Android启动器图标经常包括由较小的形状组成一个较大的形状，并结合成一个中立的形状和一个中立的颜色。图标可能会使用中性色彩的组合，但保持较高的对比度。如果可能的话，每个图标不应该使用超过一个原色。
启动器的图标应该使用一个有限制的调色板，包含一系列中立的颜色和原色。该图标不应该过分饱和。
推荐的启动器图标调色板应用，如下图所示。可以使用条侧板中的基本颜色和高亮元素。可以使用白色到黑色垂直线性渐变叠加一起的调色板的颜色。这产生的印象是，光从顶部照射进来，且保持颜色的低饱和度。
从简易的调色盘中取出一个高亮颜色组成材料时，可以创造自己的材料组成。图标包（icons pack）包含了一个Photoshop模板文件（Launcher-icon-template.psd），文件提供了默认的材料，颜色和梯度。
尺寸和位置
启动器的图标应该使用不同的形状和形式，而且这些必须缩被缩放和定位来创建一致的视觉重量。下图展示了图标放置在各版本中的不同的方式。目的是制造一个一致的视觉重量，并允许加入阴影，应该使图标比实际版本的范围小一些。如果图标是方形或近方形，尺寸应该更小。
- 红色框表示整个图标的大小。
- 蓝色框为推荐的实际图标边界，要小一圈，目的是以便有空间包含阴影和特殊的图标处理。
- 橙色框为对于方形图标推荐的实际图标边界。其比较小是因为要在两种类型的图表中建立同样的视觉重量。
| 高密度(hdpi)的图标尺寸: 1.全版本: 72x72px 2.图标: 60x60px 3.正方形图标: 56x56px | |
|---|---|
| 中密度(mdpi)的图标尺寸: 1.全版本: 48x48px 2.图标: 40x40px 3.正方形图标: 38x38px | |
| 低密度(ldpi)的图标尺寸: 1.全版本: 36x36px 2.图标: 30x30px 3.正方形图标: 28x28px |
使用启动器图标模板
Android图标模板包(下载)是一个包含默认图标的材料和颜色调色板的模板。该模板为psd格式，方便Photoshop或类似的图像编辑器编辑。
下载了模板包后解压缩，并在Adobe Photoshop或类似的图片编辑器中中打开Launcher-icon-template.psd，注意调色板的材料和颜色。可以使用该模板创建一个启动器的图标作为起点。
在创建图标之后，可以按照以下规范添加阴影效果。
- WVGA(高密度)屏幕的阴影:
| 1.效 果: 底部阴影 2.颜色: #000000 3.混合模式: 多重 4.不透明度: 75% 5.角度: 90° 6.距离: 2px 7.扩展: 0% 8.尺寸: 5px |
- HVGA (中密度) 屏幕阴影:
| 1.效果: 底部阴影 2.颜色: #000000 3.混合模式: 叠加 4.不透明度: 75% 5.角度: 90° 6.距离: 1px 7.扩展: 0% 8.尺寸: 3px |
添加了阴影，图标制作完成后，输出一个格式为PNG的透明文件，确保图标在高密度屏显示大小为72×72像素和在中密度屏显示大小为48×48像素。
菜单图标
菜单图标是一个图形元素，当用户按下菜单按钮时在弹出菜单里显示。他们是平面展示的。菜单图标元素不能表现为3D或者透视的。应该为低，中，和高密度的屏幕制作相应的图标集，这可以确保图标在不同屏幕的设备上正常显示。下表为建议的每种密度所对应的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) |
|---|---|---|
| 36x36px | 48x48px | 72x72px |
结构
- 为了保持一致性，所有的菜单图标必须使用相同的原调色板和相同的效果。
- 菜单图标应包括圆角，要保证逻辑正确。例如下图中，合理表现圆角的部分是房顶而不是建筑余下的部分。
- 整个图标建立在一个48×48像素的画板，6像素安全边栏的基础上。
- 图标菜单效果（外发光）在灯光，效果，阴影中描述，它在必要时可以与6px安全边栏重叠。而基础形状必须始终留在安全边栏内。
- 最后图形必须导出为一个透明的PNG文件。
- 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。
| 菜单图标中的安全栏和圆角。 图标尺寸是48×48. |
灯光，特效和阴影
菜单图标是平的。轻微凹陷和一些其他特效，如下所示，可以创造纵深感。
| 1.前部:从原色调色板中挑出颜色填充渐变 2.内投影:黑色、20%不透明度、角度90°、距离2px、大小2px 3.外发光:白色、55%不透明度、扩展10%、大小3px 4.内斜角: -深度1%、角度 90°、高度 10° -发光白色、70%不透明度 -阴影黑色、25%不透明度 |
菜单图标制作步骤
- 使用工具如Adobe Illustrator创建基本形状。
- 导入到一个类似Adobe Photoshop的工具，把它放置在48×48像素的透明的背景的图像上。注意安全栏。
- 增加如上图所描述的效果。
- 导出一个48×48像素的透明PNG格式的图标。
颜色调色盘
| 白色 r255,g255,b 255 用于外发光和斜面的高光。 | |
| 渐变填充 1:r163,g163,b163 2:r120,g120,b120 用作颜色填充。 | |
| 黑色 r0,g0,b0 用于内部阴影和斜面的阴影。 |
做什么和别做什么
状态栏图标
状态栏图标用来在状态栏中展示应用中的通知，他们与菜单图标非常相似，但是更小，对比度更高。应该为低，中和高密度的屏幕制作独立的图标集。以确保图标在不同屏幕尺寸的设备上显示正常。下表为每个密度屏幕所建议的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) |
|---|---|---|
| 24x24px | 32x32px | 48x48px |
结构
- 圆角必须始终被应用到基础的形状中和状态栏图标细节中，如下图所示。
- 整个图标建立在一个25×25像素的画板，2像素安全边栏的基础上。
- 状态栏图标可以在必要时与安全栏左右重叠，但绝不能与安全栏的顶部和底部重叠。
- 后的图形必须导出为一个透明的 PNG文件。
- 在Adobe Photoshop中制作的菜单图标模板可以在图标模板包中得到。
| 状态栏图标中的安全栏和圆角。图标尺寸是25×25. |
灯光，特效和阴影
状态栏图标略有凹凸感的，高对比度的，以加强小尺寸图形的清晰度。
| 1.前部:用原色板种颜色渐变填充 2.内部斜角: -深度100% 、方向向下 -尺寸0px、角度 90° -角度30° -高光白色 75%不透明度 -阴影黑色 75%不透明度 3.细节: 白色 4.缺失细节:色板中灰色渐变 内部斜角: -平滑、深度1% -方向向下、大小0px -角度117°、海拔 42° -高光白色70% \\-无阴影 |
状态栏图标步骤
- 在Adobe Photoshop的以及类似的工具中，创建25×25像素的透明背景的基础形状的图像。安全边栏保持上下2个像素的空白。
- 增加上图所示的圆角。
- 增加上图所示的灯光，特效和阴影。
- 输出一个PNG格式的透明图标，大小为25x25px。
颜色调色板
状态栏图标中只有与手机功能相关的使用彩色，其他所有状态栏图标应保持单色。
| 白色 r255,g255,b255 用于图标内部细节和斜面的高光。 | |
| 灰色渐变 1:r169,g169,b169 2:r126,g126,b 126 用于图标内部缺失细节。 | |
| 填充渐变 1:r105,g105,b105 2:r10,g10,b10 用于颜色填充。 | |
| 黑色 r0,g0,b0 用于斜面的阴影。 |
做什么和别做什么
标签图标
标签图标是用来表示多选项界面里单独标签元素的图形。每个标签图标有两种状态：未选中和选中。应该为低，中，和高密度的屏幕制作相应的独立图标集。以确保图标在不同屏幕尺寸的设备上正常显示。下表为建议的每种密度的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) |
|---|---|---|
| 24x24px | 32x32px | 48x48px |
结构
- 未选定的标签图标和菜单图标具有相同的填充渐变和特效，但没有外部发光。
- 被选择的标签图标，看上去像未选择的标签图标，但有一个暗淡的内部阴影，且和对话图标有着相同的前部渐变。
- 标签图标有一个1像素的安全边栏，且安全边栏只应该和抗混淆圆形的边缘重叠。
- 整个图标基于一个大小为 32×32像素的画板。在Photoshop模板内，对边缘栏保持1像素的填充。
- 最后的图像必须导出为一个32×32像素的透明PNG文件。
- 在Adobe Photoshop制作的标签图标模板可以在标签模板包中得到。
| 未选中的标签图标的安全边栏和填充渐变。图标大小为32×32。 | |
| 已选中的标签图标的安全边栏和填充渐变。图标大小为32×32。 |
未选中的标签图标
灯光，特效和阴影
未选中的标签图标看上去像以选中的标签图标, 但是有一个微弱的内部阴影, 而且和对话图标有着相同的前部渐变。
| 1.前部:渐变、角度 90° -底部颜色:r223,g223,b223 -顶部颜色:r249,g249,b249 -底部颜色位置: 0% -顶部颜色位置: 75% 2.内部投影: -黑色、10%不透明度、角度90° -距离2px、大小 2px 3.内斜面: -深度1%、方向向下、大小0px -角度90°、高度10° -高光白色 70%不透明度 -阴影黑色 25%不透明度 |
被选择的标签图标
已选择的标签图标和菜单图标具有相同的填充渐变和特效，但没有外部发光。
灯光，特效和阴影
| 1.前 部:全渐变。 2.内部投影: -黑色20%不透明度、角度 90° -距离2px、大小 2px 3.内斜角: -深度1%、方向向下、大小0px -角度90°、高度 10° -高光白色 70%不透明度 阴影黑色 25%不透明度 |
颜色调色板
| 填充渐变 1:r163,g163,b163 2:r120,g120,b120 在未选择的表现图表上填充颜色。 |
标签图标制作步骤
- 用如Adobe Illustrator或类似的工具创建基本图形。
- 导入到Adobe Photoshop或类似的工具中，在32×32像素透明背景的图片中合适放置。
- 如上图用合适的滤镜增加特效。
- 把图标导出为一个32×32像素的PNG透明文件。
对话框图标
对话框图标显示在弹出对话框中，并提示用户交互。为了在黑色背景中突出，使用光线 渐变和内部投影效果。应该为低，中，和高密度的屏幕制作相应的独立图标集。以确保图标在不同尺寸屏幕的设备中正常显示。下表为建议的为每种密度的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) |
|---|---|---|
| 24x24px | 32x32px | 48x48px |
结构
- 对话图标有一个1像素的安全边栏。基本图形必须在安全边栏内部合适放置, 但是抗混淆的圆形可以和安全边栏重叠。
- 整个图标基于一个32×32像素的画板。在Phontoshop模板中，对边栏保持保持1像素的填充。
- 最后的图片必须导出为一个透明的PNG文件。
- 在Adobe Photoshop制作的对话图标模板可以在标签模板包中得到。
| 对话图标安全边栏和填充渐变.图标大小32×32像素。 |
灯光，特效和阴影
对话框图标是平的，面向前的图片。为了在黑色背景中突出,使用光线渐变和黑色投影。
| 1.前部:渐变叠加、角度90° -底部色彩:r223,g223,b223 -顶部色彩:r249,g249,b249 -底部色彩位置:0% -顶部色彩位置:75% 2.内部投影:黑色 25%不透明度 -角度-90°、距离1px、大小 0px |
对话框图标制作步骤
- 用Adobe Illustrator或类似的工具创建基本图形。
- 导入到Adobe Photoshop或类似的工具中，把它在32×32像素透明背景的图片中合适放置。
- 如上图，用合适的滤镜增加特效。
- 把图标导出为一个32×32像素的PNG透明文件。
列表视图图标
列表视图图标看起来像对话图标，但是它们用了一个光线来源于物体上方的内部投影特效。它们也只用在列表视图中。应该为低，中，和高密度的屏幕制作相应的独立图标集。以确保图标在不同屏幕尺寸的设备中正常显示。下表为建议的为每种密度的图标尺寸。
| 低密度(ldpi) | 中密度(mdpi) | 高密度(hdpi) |
|---|---|---|
| 24x24px | 32x32px | 48x48px |
结构
- 列表视图图标通常有一个1像素的安全边栏。抗混淆的圆形可以和安全边栏重叠。
- 整个图标基于32×32像素的画板。在Phontoshop模板中，对边栏保持保持1像素的填充。
- 最后的图片必须导出为一个透明的PNG文件。
- 在Adobe Photoshop制作的列表视图图标模板可以在标签模板包中得到。
| 列表视图图标的安全边栏和填充渐变. 图标大小32x32px。 |
灯光，特效和阴影
列表视图图标是平的且面向前的图片.为了在黑色背景中突出,使用光线渐变和黑色投影。
| 1.内部投影：黑色、57%不透明度 -角度120° -混合模式 正常 -距离1px、大小1px 2.背 景: 黑色、标准系统颜色 注 意: 列表视图图标在Photoshop中32×32 像素的画板中放置，没有安全边栏。 |
列表视图图标制作步骤
- 用如Adobe Illustrator或类似的工具创建基本图形。
- 导入到Adobe Photoshop或类似的工具中，把它在32×32像素，透明背景的图片中合适放置。
- 如上图，用合适的滤镜增加特效。
- 把图标导出为一个32×32像素的PNG透明文件。
对设计师的建议
这里有一些提示，有助于创建图标或其他图形。假设使用的是Photoshop或类似的光栅图像编辑程序。
关于图标文件的命名
当文件按照字母排序的时候，有关的类型的版本应在一个目录内聚集在一起。这样有助于为每个图标类型的使用共同的前缀。 例如:
| 版本类型 | 前缀 | 例子 |
|---|---|---|
| 图标 | ic | ic_star.png |
| 启动器图标 | ic_launcher | ic_launcher_calendar.png |
| 菜单图标 | ic_menu | ic_menu_archive.png |
| 状态栏 | ic_stat_sys 或 ic_stat_notify | ic_stat_notify_msg.png |
| 标签图标 | ic_tab | ic_tab_recent.png |
| 对话框图标 | ic_dialog | ic_dialog_info.png |
注意，不需要使用任何类型的共享前缀，这样做只是为了方便。
关于文件存储
为不同屏幕密度创建多个版本集意味着制作文件的多个尺寸副本。为了保持文件多个副本的安全和方便查找，建议在工作空间创建一个目录结构来组织文件版本。例如:
assets/... ├-ldpi/... │ ├-_pre_production/... │ │ └-working_file.psd │ └-finished_asset.png ├-mdpi/... │ ├-_pre_production/... │ │ └-working_file.psd │ └-finished_asset.png └-hdpi/... ├-_pre_production/... │ └-working_file.psd └-finished_asset.png
这种目录结构与特定密度结构相同，可以在应用源文件中存储最终的版本。因为工作空间的结构与应用的结构类似，所以可以迅速确定哪些版本应该复制到应用源文 件目录下。为不同密度制作的独立版本可以根据密度检测不同的文件名，这非常重要，因为为不同密度制作的对应的版本必须有同样的文件名。
为了做比较，下面是一个典型的应用资源的目录结构：
res/... ├-drawable-ldpi/... │ └-finished_asset.png ├-drawable-mdpi/... │ └-finished_asset.png └-drawable-hdpi/... └-finished_asset.png
首先制作中密度版本
由于中密度是Android的基准，因此设计工作应该从制作中密度版本开始。如果可能，使用矢量图形或在Photoshop中建立路径，使其更容易修改版本尺寸。
更多相关文章
- Android 滑动改变标题/栏导航栏颜色、透明度
- 【转】Android -- 探究Android的多分辨率支持以及各种类型图标尺
- Android 如何在Launcher桌面创建或者删除快捷图标
- android 笔记 --- Android-图片透明度处理代码
- android 5.0以上修改SearchView的搜索图标
- Android标题栏、状态栏图标文字颜色及背景动态变化
- Android Drawable图标生成工具
- android绘图画Chrome图标
- android 4.4 电池电量显示分析（低电量提醒与电池图标）Java 层