IOS平台UI规范(四）

响良牙

第9章定制图标和图片指南

每一个程序都需要图标和登录图片。同时也建议程序为iOS 的Spotlight 搜索结果提供图标。（有必要的话，Settings 里也要）另外，有些程序需要定制图标区代表特定的文档类型或者程序特定的功能，以及工具栏、导航栏、tab 栏的特定模式。

和程序中其他定制图片不一样，这些图标和图片必须满足特定标准，以便iOS 能妥当地展示它。表格9-1 里有图标和图片的标准汇总。

为了支持各种分辨率，你需要提供高分辨率版的图标和图片。对于如何制作高分辨率的图片，可以详见“为Retina 屏幕设计画作的技巧”。

对于图片和图标，我们推荐使用PNG 格式。标准的色深应该是24bits，外加8bits 的alpha 通道。

你不需要只使用web 安全色。虽然你可以在设计导航栏、工具栏、tab 栏图表时使用alpha透明层，但不要在程序图标中使用。

程序图标

用户会把程序图标放在桌面上，按下它可以启动程序。这应该是品牌宣传和视觉设计的完美结合，形成紧密结合的、高度可辨的、颇具吸引力的画作。每一个程序都需要程序图标。

这个图标也会被用在Game Center 中。

试图在捕获眼球与表意间寻求平衡，以便它能漂亮、真实，并能清楚地传达程序的本质目标。调查一下来自不同文化的用户如何看待你的图片和配色也会很有意思。

为不同的设备创建不同尺寸的程序图标。如果你的程序要适用于所有设备，你需要提供三种尺寸的图标。

为iPhone 和iTouch：

57×57

114×114（高分辨率）

为iPad：

72×72

当在桌面上显示你的图标时，会自动添加以下效果：

圆角

投影

高光（除非手动禁用）

例如，普通的57×57 图标是这样的：

放到桌面上后会变成这个样子：

为确保你的图标与iOS 提供的加强效果相配，你的图标应当：

有90 度角

没有高光效果

不使用透明层

程序图标的背景要清晰可见。因为iOS 自动加了圆角，所以在桌面上的图标要有清晰可见的背景才好看。iOS 加的效果可以保证桌面上的图标有统一的外观，并让用户有按的欲望。如果你的图标没有可见的背景，那么当它出现在桌面上时就看不到圆角。这样的图标看起来不能点击，与用户对桌面图标的期待不一致。

确保你的图片填满了规定区域。如果图标小于推荐的尺寸，或者使用了透明层，它看起来就会像是漂在有圆角的黑色背景上。

例如，程序提供的图标可能有透明层，就像最左侧这颗星星。当iOS 把它展示到桌面上时，它看起来就像中间这颗（没有高光效果）或者右边这颗（有高光效果）。

在设置了背景图片的桌面上，漂在黑色背景上图标看起来尤其没有吸引力。

为App Store 做一个512×512 像素版本的图标。这张图片需要能被立刻识别成你的程序图标，可以拥有更丰富的细节。这个版本的图标不会被附加任何视觉效果。

如果你正在开发ad-hoc 程序（不通过App Store 发布，只在in-house 里展示），同样需要提供512×512 像素的程序图标。在iTunes 里也会呈现这个图标。

iOS 也会在其他地方用到这个图标。例如，在iPad 程序中，如果没有提供文档图标的话，iOS 会用这个版本的大图标自动生成。

小图标

当iOS 需要在Spotlight 搜索结果里展示某个程序时，还需要一个小版本的图标。如果需要设置的话，程序还需要在“Settings”里放一个可以与其他内置程序相区分的图标这个图标应该在一列搜索结果里具有足够的可辨识性。

对于iPhone 和iPod touch，iOS 在spotlight 搜索结果和settings 里用的是同一个图标。如果你没有提供这个版本，iOS 会把程序图标压缩以做此用。对于iPhone，应该用这个尺寸的图标：

29×29 像素

58×58 像素（高分辨率）

对于iPad，要为Settings 和Spotlight 搜索结果提供专门的尺寸：

50×50 像素（为Spotlight 搜索结果准备）

29×29 像素（为Settings）

文档图标

如果你的iOS 程序定义了自己的文档类型，也应该定制一款图标用以识别它。如果没有提供定制文档图标，iOS 就会把你的程序图标改一下用作默认的文档图标。

例如，用57×57 像素的程序图标改成的文档图标是这个样子

使用114×114 像素的高清版图标是这个样子

对于iPad，使用72×72 像素程序图标生成的文档图标是这样的

或者，也可以为你的程序定制文档图标。人们会在不同的地方看到你的文档图标，所以最好把它设计得容易记，与程序图标联系紧密。这个图标应该漂亮、表意清晰、细节丰富。

等根据程序是运行于iPhone 还是iPad 上来创建不同的图标。

为iPhone 制作文档图标

对于iPhone，创建两种尺寸的文档图标

22×29 像素

44×58 像素（高分辨率）

把你画的图套在这个规定的格子里。可以居中放置，或者缩放填充。

例如，如果你提供了一个如左图所示的22×29 的图标，iOS 会自动生成右图那样的图标。

相似地，如果你做了一个44×58 像素的图标，iOS 会生成右图那样的图标。

为iPad 制作文档图标

iPad 版iOS 使用两种尺寸的图标，64×64 像素和320×320 像素。最好两种尺寸的图标都准备好，以便在任何环境中都能找到合适的尺寸。

对于两种尺寸，其中都包含了padding，留下稍小一点的安全区。要确保你的画作适合这个安全区，否则就会被裁切掉。

即使你的画作适合了安全区的尺寸，右上角也总是会被iOS 添加的卷角效果遮掉一部分。另外，iOS 还会覆盖从黑（上）到透明（下）的渐变。

为了创建64×64 像素的文档图标，应该：

1、    创建64×64 像素的PNG 图像

2、    加入如下尺寸的Margin，创建安全区

a)    顶部1 像素

b)    底部4 像素

c)    左右各10 像素

你的安全区应该是长这个样子。

3、      把你的画作放在44×59 像素的安全区里，可以居中或缩放以填充整个安全区。（注意iOS 会自动添加卷角和渐变效果）

为了创建320×320 像素的文档图标，应该：

1、    创建320×320 像素的PNG 图像

2、    加入如下尺寸的Margin，创建安全区

a)    顶部5 像素

b)    底部20 像素

c)    左右各50 像素

你的安全区应该是长这个样子。

3、    把你的画作放在44×59 像素的安全区里，可以居中或缩放以填充整个安全区。（注意iOS 会自动添加卷角和渐变效果）

响良牙

Web 快捷方式图标

如果你有web 小程序或者网站，可以定制一个图标，用户可以把它直接放在桌面上。用户可以按图标直接方位网页内容。你可以让定制的图标代表整个网站或者某个网页。

如果你的网页有独特的图片或者可识别的颜色主题，那最好应用到图标里。但是，为了确保你的图标在设备上看起来很棒，你应该遵照以下指南：

为iPhone 和iPod touch 创建如下尺寸的图标：

57×57 像素

114×114 像素

为iPad 创建如下尺寸的图标：

72×72 像素

就相对程序图标做的那样，iOS 会给图标自动添加一些视觉效果，以便于与其他桌面图标一致。添加的效果有：

圆角

投影

反射高光

例如，57×57 像素的网页图标是这样的：

添加效果后就成了这样

为了确保你的图标与iOS 添加的效果相得益彰，你的图标应该做到：

有90 度尖角

没有高光效果

导航栏、工具栏和tab 栏上用的图标

首先，你应该尽可能的使用系统提供的按钮和图标来代表标准任务。完整版本的标准按钮和图标以及使用指南可以详见“系统提供的按钮和图标”

当然，不是每一个任务都是标准的。如果你的程序包含用户经常要执行的任务，就需要创建用于导航栏和工具栏的定制图标来代表这些任务。相似地，如果你的程序用tab 栏在不同的定制内容和定制模式间切换，就需要为tab 栏定制图标。

在绘制图标之前，你需要花些时间考虑一些这些图标想表达什么。当你思考时，要让你的图标能够：

简单而富有流线感。太多的细节会让图标显得笨拙，难以辨认不容易和系统提供的图标搞混。用户应该能一眼把你的图标和标准图标分开。

易懂，容易被接受。要让你的图标能够被大多数用户理解，不会有用户抵触它。

避免使用和苹果产品重复的的图片。这些图片都是由产权保护，并且会经常变动。

在思考图标外观的时候，最好依照如下指南：

纯白色要有合适的透明度

不要包含投影效果

使用抗锯齿

如果要添加斜面效果，确保光源放在正上方。

工具栏和导航栏上的图标尺寸应如下所示：

对于iPhoe 和iPod：

大概20×20 像素

大概40×40 像素（高分辨率版本）

对于iPad：

大概20×20 像素

tab 栏上的图标尺寸应如下所示：

对于iPhoe 和iPod：

大概30×30 像素

大概60×60 像素（高分辨率版本）

对于iPad：

大概30×30 像素

不要为你的图标提供选中态或按压态。iOS 会为导航栏、工具栏和tab 栏的图标自动生成这些状态，所以就不用劳神了。因为这些效果是自动叠加的，所以也没法定制。

要让所有图标看起来一样重。要在所有图表间平衡尺寸、细节丰富度以及实心部分。一般而言，把大的小的、细致的粗糙的、空的实的图标混在一个栏上很不好看。

登录图片

为了增强登录时的体验，你必须提供至少一张登录图片。登录图片和程序开启后的第一帧很像。当用户开启程序后，iOS 立刻把它展示出来。等第一屏渲染好了，iOS 再立刻用它把登录图片替换下来。

提供登录图片提升用户体验，不要在如下情况使用它：

用作“splash”

用作“about”

用于品牌推广，除非它真的是你程序的第一屏。

因为用户经常会在程序间切换，所以你应该将登录时间尽量缩短。提供登录图片就可以缩短等待时间的主观体验。

设计与程序启动后第一帧一样的登录图片，除非：

文本。登录图片是静态的，所以其中的文本没有办法做定位。

可能会变化的界面元素。如果第一帧旋绕出来后有元素会变化，就不要在登录图片中放它了。这样用户就不会觉察到登录图片和第一帧之间的切换。

对于iPhone 和iPod touch，创建如下尺寸的登录图片（含状态栏）“

320×480 像素

640×940（960？）像素（高分辨率）

对于iPad，创建如下尺寸的登录图片（不含状态栏）“

768×1004 像素（竖屏）

1024×748 像素（横屏）

对于iPad，应该各种方向的登录图片都提供一份。

如果你觉得完全依照这些指南做出的登录图片太过朴素，恭喜你，猜对了。记住，登录图片不是为了给用户留下美观的印象，而是为了让用户觉得你的程序启动迅速，使用灵活。

接下来的例子将告诉你登录图片能多朴素：

iPhone Setting 的登录图片只有程序背景，因为这里面的内容都是变来变去的。

iPhone Stocks 的登录图片只有静态背景，因为只有这些是恒定不变的。

为Retina 屏幕设计画作的技巧

Retina 液晶屏允许你展示高精度的图标和图片。如果仅仅是放大已有的画作，就会错失提供优美、精致图片的机遇。你应该利用已有的素材重新制作大尺寸高质量的版本。

纹理丰富。例如，在高精度版的Settings 和Contacts 里，铁盒纸张的纹理清晰可见。

更多细节。例如，在高精度版的Safari 和Notes 里，你可看到更多的细节，比如指针后的刻度和上一张纸撕掉后残留的痕迹。

更加真实。例如，高精度版的Compass 和Photos 图标通过增加丰富的纹理和细节，变得像是真的指南针和照片。

虽然栏上的图标比程序或者文档图标简单，你也应该在高分辨率版本上增加细节。例如，iPad 里面的艺术家图标是一个歌手的侧面剪影。高分辨率版本的图标看起来和原版本一样，但增加了很多细节。

如下技术可以在设计高分辨率图标时帮大忙：

把原有图片放大至200%。要使用“nearest neighbor”缩放算法。如果原来的图像不是矢量图形或带有图层样式的话，这样会很管用。最后获得的会是放大的、像素化的图片。你可以在上面再添加更丰富的细节。这种方法可以帮助你节约工作量，保留原有的布局。

如果图片是矢量版的，或者有图层效果，使用默认的算法缩放就可以了。

增加细节和深度。不要急着去小元素，因为高分辨率版本给细节留下了很多发挥空间。

原来的1 像素变成了现在的4 像素。

考虑修整放大的元素。如果你原来的分割线是很细腻的1 像素，等放大后就会变粗，成为2 像素宽。但是对于某些线和元素，在放大整体尺寸后还需要再锐化或者让它保留原有尺寸。

考虑为雕刻或投影等效果增加模糊。例如文字的雕刻效果通常是把文字复制一次，然后移动1 像素。放大之后，这个移位就变成2 像素了，在高分辨率屏幕上看起来就太细腻了，不真实。为了优化，你可以让移位保留在1 像素，但是增加1 像素的模糊来柔化雕刻效果。这仍然会导致2 像素宽的效果，但是外面这层像素看起来仍然只有半像素宽，看起来也更加舒服。

天狗

感谢，从中学习很多东西，很多小的细节和用户的心理分析太有用了。虽然我一直是水果用户，但是还真没有发现这些小的发光点。