Android设计 - 图标设计概述（Iconography）

2014-10-30 张云飞VIR 翻译自：https://developer.android.com/design/style/iconography.html Iconography 图标设计概述

一个图标是一个图像，它占据了一小部分屏幕不动产.并且为一个活动(action)，状态(status)，或者一个app提供了一个快速，直观的程序。

当你为你的app设计图标时，重要的需要留下的是，你的app可能被安装在那些提供一个范围的像素密度的多种设备中，就像 Devices and Displays 中提到的那样。但是你可以在所有的设备上通过为每个图标提供多尺寸 来为你的图标提供更好的视觉效果。当你的app运行时，安卓检查设备屏幕的特性并且加载适当的指定密度的你app中的资源文件。

因为你将为每个图标实现多个尺寸以支持多个不同的密度，下面的设计指南使用 dp 作为图标尺寸的 计量单位 ，它是以中等密度（MDPI）屏幕作为 像素尺寸的基础。

这样，要创建一个适合不同密度的图标，你应该遵守在主要的5个密度（medium, high, x-high, xx-high, and xxx-high respectively）中使用 2:3:4:6:8 缩放比例。例如，考虑到启动图标的尺寸的规范是48x48dp。这个意思是 基线（MDPI）的资源是 48x48 px，并且 高密度(HDPI)资源应该指定为1.5倍于基线的尺寸即72x72像素，并且 x高密度（x-hight 密度）资源应该是2倍于基线即96x96 px,以此类推。

注意： 安卓也支持 低密度(low-density LDPI)，但是一般情况下不要以这个尺寸创建自定义的资源，因为会有效的向下缩放 1/2 倍 你的HDPI资源来匹配期望的大小。

启动图标 启动图标是在主屏幕或者所有的app屏幕时，你的app的可视化的代表。由于用户可以更换主屏幕的墙纸，要确保你的启动图标在不同类型的背景下清晰可见。

尺寸和缩放 启动图标在移动设备中必须是48x48dp 在Google Play显示的启动图标必须是512*512像素

比例大小 完整的资源，48x48 dp

样式 使用独特的侧影，三维的，前景视图的， 使用一个轻微的透视好像从上看一样， 这样让用户的感觉有一些深度

活动栏（Action Bar） action bar 图标是一些图形按钮，它在你的app里呈现了 对用户非常重要的活动。每一个图标应该使用 一个简单的隐喻以呈现一个让很多人瞄一眼就能明白的 简单的概念，

预定义的一些图形通常用于一些 确定的普通 活动，比如 “搜索”，“分享“。下面的下载链接提供了一个 为支持多种屏幕密度的经过缩放处理的图标下载包，可以和Holo Light 和Holo Dark 主题一起使用。这个 包 里也包含了一些 未样式化 的图标，那可以修改和匹配你的主题，另外还有 Adobe® Illustrator® 的源文件以支持更多的自定义。 点击下载这个action bar 的包 Download the Action Bar Icon Pack

尺寸和缩放 手机上的action bar 图标应该是32x32dp

焦点区和尺寸 完整的资源，32x32 dp 视觉矩形区，24x24 dp

样式 象形的，扁平的，不要太详细， 使用平滑的曲线或者尖锐的图形。 如果图形是细条的，让它向左旋转45° 或者向右填满焦点空间。 笔画的厚度和负空间应该最小为2dp

颜色 颜色: #333333启用时: 60% 不透明度禁用时: 30% 不透明度

颜色: #FFFFFF启用时: 80% 不透明度禁用时: 30% 不透明度

小的/上下文关系 的图标 在你的app的内部，使用小图标去表现活动，或者为指定的项提供状态。例如，在Gmail app中，每个消息 都有一个星星的图标，这个图标标记了这个消息是重要的。

尺寸和缩放 小图标应该是 16x16 dp

焦点区域和比例 完整的资源， 16x16 dp 视觉平方区域，12x12 dp

样式 中性的，平面的，和简单的。填满的性状相对于细笔画来说是很容易看的。 使用一个简单的可视隐喻可以使用能够很容易的认出来和明白它的意图

颜色 有目的的使用少量的 非中性 的。例如，Gmail使用了黄色 的星星图标，为了指示一个做过书签的消息。如果一个图标 是活动的，选择一个和背景色形成对比的颜色。

通知图标（Notification Icons） 如果你的app产生了一个通知，提供一个 每当一个消息可用时系统可以显示在状态栏上的 图标 。

尺寸和缩放 通知图标必须是 24x24 dp

焦点区域和比例 完整的资源,24x24 dp 视觉平方区域,22x22 dp

样式 保存样式 平面和简单， 使用同样的加单，可视化的隐喻作为你的启动图标

颜色 通知图标必须是完全的白色， 系统可以向下缩放 和使图标 变黑一些。

设计提示 这里是一些你会发现的， 在你创建图标或者其他drawable资源对你的app有用的提示。这些提示假设你使用了 Adobe® Photoshop® 或者一个类似的电子栅格或者矢量图形编辑程序。

可能使用矢量图形地方 许多图形编辑程序，比如 Adobe® Photoshop® 运行你 一个组合的矢量图，和栅格层和更多效果。可能的时候，使用矢量图，那样如果 需求产生，资源可以向上缩放，而不丢失细节和脆化边缘。 使用矢量图也可以很容易的做到 对齐边缘和 角落到像素边界 的较小的解决方案。

使用大纸板开始 因为你需要为不同的屏幕密度创建资源，最好在大的多倍于目标图标尺寸的纸板上开始你的图标设计。例如，启动图标是 48,72,96，或者144像素宽度的，依赖于不同的屏幕密度（mdpi, hdpi, xhdpi, and xxhdpi, 分别的）。如果你最初在864x864 大的纸板上开始绘制启动图标，当你为了最终的资源创作向下缩放纸板到目标支持时，它将被很容易的清晰的调整图标。

当根据需要缩放，重画位图图层 如果你要从一个位图图层向上缩放一个图像，而不是从一个矢量图层开始，那些图层将需要被手动的重画而脆弱呈现在更高的密度下。例如，如果一个被绘制在 mdpi的 60x60 的圆形被显示在 hdpi下将被重画为90x90 的圆型。【译者注：大意是：将一个位图放大的话，会导致图像失真，变得模糊脆弱】

为图标资源使用公共的命名规范 尝试去为文件命名，这样的话，当它们按字母顺序排列时，相关联的的资源将会作为一组在一起存在于一个文件夹内。特别的，对于为每个图标类型使用公共的前缀来说，它是有帮助。例如：

注意： 你不需要为一些类型使用共享的前缀，仅在对你有便利时才这样做。

设置一个按密度组织文件的工作空间（working space） 至此多种屏幕密度意味着你需要为相同的图标创建多倍的版本。帮助保持多份拷贝的文件的安全和容易去找到，我们建议 在你的工作空间 创建一个 基于目标屏幕密度来组织资源文件的文件夹结构。例如： art/... mdpi/... _pre_production/... working_file.psd finished_asset.png hdpi/... _pre_production/... working_file.psd finished_asset.png xhdpi/... _pre_production/... working_file.psd finished_asset.png xxhdpi/... _pre_production/... working_file.psd finished_asset.png

因为在你的工作空间里的结构 和 你程序里结构是相似的，你可以快速的决定哪一个资源应该被拷贝到每个资源文件夹。通过屏幕密度分离的资源也帮你察觉一些跨越密度的文件名中的差异。这个是非常重要的，因为关于不同密度的相应的资源必须共享相同的文件名称。 为了比较，下面是在一个经典的应用程序中的资源文件夹的结构： res/... drawable-ldpi/... finished_asset.png drawable-mdpi/... finished_asset.png drawable-hdpi/... finished_asset.png drawable-xhdpi/... finished_asset.png drawable-xxhdpi/... finished_asset.png

关于如何在应用程序的项目中保存资源的更多信息，请参阅： 提供资源 Providing Resources.

提供一个 xxx 高密度（xxx-high-density） 的 启动图标 一些设备向上缩放启动图标多达25%。比如，如果你的最高密度的启动图标图像已经在 xx-high密度下，缩放进程将会使得它展示的较少的松脆。这样你应该提供一个更高的密度的启动图标在drawable-xxxhdpi文件夹下，这个是系统用来替代向上缩放一个较小版本的图标。 注意： drawable-xxxhdpi 这个限定词仅仅在提供一个 在xxhdpi设备上比平常能展示更大点的 启动图标时需要。你不需要去为你app的所有图像资源提供 xxxhdpi 资源。 阅读 支持多种屏幕Supporting Multiple Screens 以获得更多信息。

从最终的资源（资产asserts)中删除不需要的元数据 尽管安卓SDK工具将会自动的压缩 png图像资源（PNGs），当打包应用程序资源到二进制的应用程序时，一个好的实践是，从你的PNG资源中移除不必要的头（headers）和元数据(metadata)。这样的工具 OptiPNG 或者 Pngcrush 可以确保这样，包括 这个元数据被删除 和 你的图像资源文件尺寸被优化。