图标和图像设计

5 图标和图像设计

5.1 图标和图像尺寸

任何app都需要app图标和启动文件或者图片。除此之外，一些app需要自定义图标来代表app中导航栏、工具栏、标签栏和其他地方的特定的内容、功能或者模式。表45-1列出了这些自定义图标和图像的尺寸。

表45-1 图标和图像尺寸（以像素为单位）

注意
如果你需要为主屏幕快捷操作创建自定义图标，查看Home Screen Quick Actions了解详情。你也可以从https://developer.apple.com/design/downloads/Quick-Action-Guides.zip下载Home Screen Quick Action Icon Template。

除了AppStore的图标必须以iTunesArtwork来命名以外，你可以随意命名图标。在Xcode项目中，你可以使用图片资源目录来管理app的图标文件。如果要添加图标，可以将相应的图片添加到你的项目的图片资源目录下。在编译过程中，Xcode会将适当的键值加入到app的Info.plist文件中并且将图片打包进app中。iOS根据所要用到的位置来选择合适大小的图标。查看Asset Catalog Help了解更多资源目录相关信息。

对于所有图片和图标，推荐使用PNG格式。避免使用交错的PNG图片。

图标和图像的标准位深(bit depth)是24位。

5.2 app图标

每个app都需要一个漂亮的、容易记忆的app图标来在AppStore中吸引用户的注意并且在主屏幕上脱颖而出。iOS会在游戏中心、搜索结果、设置和代表app的文档中使用不同尺寸的app图标。

为了得到最好的效果，可以求助于专业的图形设计师。 有经验的图形设计师可以为你的app形成统一的视觉设计风格并且将这种风格应用到图标和图片中。

使用便于识别的通用图像。 通常来说，避免使用视觉元素的次要意象，或者使用意义晦涩的元素。比如，邮件应用的图标使用一个信封的图形，而不是邮箱、邮差包或者邮局标志。

拥抱简约。 尤其是避免使用大量的图像填满你的app图标。找到一个可以代表你的app精髓的单一的元素，然后以简单、独特的形状来表现这个元素。谨慎地增加细节。如果一个图标的内容或形状过于复杂，那图标的细节就会很令人费解而且在小尺寸下会显得很模糊。

提示
为了测试图标在小尺寸下的效果，可以将它移到主屏幕上的一个文件夹里。最好可以移入更多app图标，然后再看你的app图标是否好看且仍旧与众不同。

以较抽象的方式表达你app的意图。 在app图表中使用照片或者屏幕截图并不是一个好主意，因为在小尺寸下很难看清。最好进行一定的艺术处理，因为这样才能强调那些你希望用户注意到的方面。

如果一定要使用拟物化设计，一定要注意准确无误。 拟物化设计的图标必须准确地反映对象的材质例如布料、玻璃或者金属，并且要能传达对象的重量和质感。

确保在各种背景下app图标看起来都不错。 不要只在浅色或深色背景下测试你的app图标，因为你无法预知用户会使用什么样的壁纸。

避免使用透明度。 app的图标应该是不透明的。如果图标的边界小于推荐的尺寸，或者在图标内加入了透明的区域，那么图标就会浮在深色的背景上，这样在用户的漂亮壁纸上你的app图标就会缺少吸引力。

不要在你的设计中使用iOS界面元素。 你肯定不希望用户混淆你的app图标、图片和iOS的UI。

不要在你的设计中使用Apple的硬件产品标志。 Apple产品的标志受到版权保护，所以不能在你的app图标或图片中使用。通常来说，在你的设计中不要使用特定的设备标志，因为设备的设计会频繁改变，因而基于它们的设计也会很快过时。

不要在你的界面中复用苹果自带app的图标。 在系统的不同位置使用相同的图标来代表具有轻微不同的事物会使用户感到困惑。

为不同的设备设计不同尺寸的app图标。 你肯定希望app的图标在所有支持的设备上看起来都非常不错。查看表45-1，了解常用设备尺寸。

当iOS在设备的主屏幕上显示app图标时，它会自动给图标加上一个圆角的遮罩。确保你的图标是90度直角，这样加上遮罩后会比较好看。

准备一个大尺寸的app图标用于AppStore展示。 尽管这个尺寸的app图标要让用户能一眼认出，但是可以适当增加一些细节。这个尺寸的app图标不会增加额外的视觉效果。

如表45-1所示，大尺寸app图标的大小为1024×1024像素，且需要命名为iTunesArtwork@2x。（如果需要适配@1x设备，可以准备一个512*512像素大小的图标并且命名为iTunesArtwork。）查看Platform Version Information，了解更多改尺寸app图标的相关信息。

注意
iOS可能会把大尺寸图片用作其他用途。在iPad应用中，iOS会将大尺寸图片用于生成大的文件图标。

如果你开发了一个以ad-hoc方式发布的app（即内部使用，不通过AppStore），也必须提供大尺寸的app图标。这个图标将被用于iTunes。

5.2.1 文档图标

如果你的iOS app以自定义格式创建文档，你肯定希望你的用户能一眼认出政协文档。你不需要另外设计一个自定义图标，因为iOS会使用app图标来为你生成文档图标。

5.2.2 Spotlight和Setting的图标

当app的名字匹配Spotlight的搜索词时，app需要提供一个小尺寸的图标用于显示。支持设置功能的app也需要提供一个小尺寸的图标用于在系统的设置应用中显示。

这些图标必须清楚地标识你的app，这样用户才能在搜索列表或者设置应用列表中识别出你的app。比如，尽管内置应用的图标很小，但是在设置应用中很易辨识。

跟app图标一样，你也可以任意命名这些小图标，因为iOS会基于使用目的来选择尺寸合适的图标。

为所有设备分别提供用于Spotlight搜索结果和设置应用的图标。如果不提供，iOS会缩小你的app图标来用于这些位置的显示。查看表45-1，了解具体尺寸。

注意
如果你的app图标背景是白色的，不要为了在设置应用中提升加辨识度而增加灰色遮罩。iOS会给图标增加1像素的描边，这样所有图标在设置应用的白色背景下都会很好看。

5.3 启动文件

启动文件（或图片）是app启动时iOS显示的简单占位图。这样的占位图能够给用户一个app很快而且反应灵敏的印象，因为占位图是即刻出现的，而且很快会被app的第一屏取代。每个app都需要提供启动文件或者至少一张静态图片。

在iOS8或者更高的系统版本，你可以创建一个XIB或者故事板文件来取代静态的启动图片。当你在Interface Builder中创建启动文件时，可以使用尺寸类型来为不同的显示环境定义不同的布局，然后使用Auto Layout来作最少的适配。使用尺寸类型和Auto Layout意味着你只用创建一个启动文件就能适配所有的设备和显示环境。（查看Build In Adaptivity，了解显示环境和尺寸类型概览；查看Size Classes Design Help，学习如何在Interface Builder中使用尺寸环境。）

如果你需要适配早期iOS版本，除了启动文件之外，你仍旧可以提供静态的启动图片。

重要
使用XIB或者故事板文件意味着你的app在iPhone6或者iPhone6 Plus上运行。

一下设计规则同时适用于启动文件和静态启动图片。

设计简洁明了、可以提升用户体验的启动图片。 尤其注意，启动图片不适用于：

• “app启动体验”，比如闪屏
• “关于”窗口
• 品牌元素，除非它们也是app第一屏静态内容的一部分

用户会在app之间频繁切换，你需要尽可能地减少app的启动时间，你的启动图片设计应该降低用户对启动过程的感知，而不是强调这个过程。

设计与app首屏一样的启动图片， 除非：

• 文本。 启动图片是静态的，所以显示的文本没有局限性。
• 可能会改变的UI元素。 如果包含了启动完成后会改变的元素，用户可能会因为从启动图片到app首屏突然的变化而感到不愉快。

如果你认为遵循了以上规则会导致启动画面过于简单和乏味，那也无可厚非。但是要记住，启动图片并不是为了艺术表现。它只是为了强化用户对于app启动快速且打开即能使用这样一种认知。比如，设置和天气应用只是将应用的背景作为启动图片。

如果你需要使用静态启动图片，你需要为不同的设备提供不同尺寸的图片。静态启动图片需要包含状态栏。具体尺寸参见表45-1.

虽然在iPhone6和iPhone6 Plus使用启动文件是最好的，如果需要的话，你还是可以使用静态启动图片。如果你需要为这些设备提供静态启动图片，可以参考一下尺寸信息：

iPhone6：

• 竖屏:竖屏：750 x 1334 (@2x)
• 横屏:横屏：1334 x 750 (@2x)

iPhone 6 Plus:

• 竖屏:1242 x 2208 (@3x)
• 横屏:2208 x 1242 (@3x)

5.4 模板图标

你为栏或者主屏幕快捷操作自定义的图标，也称之为模板图标或图片，因为当你的app运行时，iOS会把它当作遮罩来生成你看到的图标。

iOS定义了很多标准的小图标，比如刷新、操作、增加和收藏图标。你应该尽量使用这些按钮或图标来代表app内的常用的标准任务。（查看 Toolbar and Navigation Bar Buttons 和 Tab Bar Icons，了解更多你可以在栏上使用的标准按钮和图标。）

如果你的app包含某些任务或模式没有标准图标可以代表，或者标准图标与你的app样式不匹配，你可以设计你自己的小图标。

• 简单和线性的。 过多的细节会使得图标显得很乱且难以识别。
• 不容易与系统提供的图标相混淆。 用户应该能一眼就能区别你自定义的图标和标准图标。
• 易理解且被广泛接受。 努力创造用户能够正确理解的标志，这样才不会被用户讨厌。

重要
确保不要在你的设计中使用Apple产品图片。这些标志受版权保护且产品设计会频繁改变。

不管你只使用自定义图标，还是与标准图标混用，app内所有的图标要在视觉尺寸、细节水平和视觉重量上保持一致。

比如，以下是所有的iOS栏图标，注意它们如何通过尺寸、细节和重量上的一致性传达和谐的整体感：

要想设计一套条理清楚连贯的图标，关键是一致性：尽可能地使用相同的透视和相同的线条粗细。为了确保所有图标的视觉尺寸一致，你可能需要设计一系列实际尺寸不同的图标。比如，以下这组系统图标视觉上大小是相同的，尽管收藏和语音邮件图标实际上比其他图标要大一些。

如果你正在设计自定义标签栏图标，你需要提供两个版本——未选中状态和选中状态。选中状态的图标通常是未选中状态图标填充后的样子，但有些设计需要在此基础上进行调整。

在设计带有内部细节的选中状态下的图标时（例如收音机图标），反转细节填充的颜色，这样在选中状态下细节依旧能够得到突出。键盘图标也有内部细节，但是如果对选中状态的图标填充背景，圆圈增加白色描边，那样会使得用户难以理解和识别。

有些时候，对选中状态下的图标设计进行略微调整会有更好的效果。比如，计时器和博客图标都包含一些开放区域，因此选中状态图标对线条进行压缩然后置于一个圆形背景下。

如果图标填充后变得不易识别，那选中状态图标就使用较粗的线条来描绘。比如，语音信箱和阅读列表的选中图标就是以2个点粗细的线条来绘制的，而未选中状态图标使用1点的线条。

有时，图标包含了不适合进行描边的细节。就像音乐和艺术家图标，你可以同时将填充效果用于两种状态的图标。用户可以很容易地区分这类图标的选中和未选中状态，因为选中状态的图标会加上更加深的颜色。

设计自定义小图标时，遵循以下规则：

• 使用透明度来区分图标的形状。iOS会过滤所有颜色信息，所以没有必要使用一种以上的填充色。
• 不要添加阴影效果
• 使用抗锯齿

如果你想设计类似iOS原生图标的小图标，那就使用细线条来绘制。具体来说，使用1点粗细的线条来绘制图标（@2x分辨率下为2个像素）。

不管图标的视觉样式如何，都要参照表45-1的尺寸来自定义工具栏、导航栏和标签栏的图标。如果你在为主屏幕快捷操作设计自定义的模板图标，查看Home Screen Quick Actions了解更多细节。

不要在自定义标签栏图标中加入文字。应该使用标签栏API来为每个标签设置标题（例如，initWithTitle:image:tag:）。如果你需要调整标题的自动布局，可以查看标题调节API，比如setTitlePositionAdjustment:。

5.5 Web Clip图标

如果你有一个网页app或一个网站，你可以使用Web Clip功能来创建一个自自定义图标用来显示在主屏幕上。用户通过一次点击图标就能到达你的网页。你可以设计一个图标来代表整个网站，或者只是代表单个网页。

iOS可以在Safari的收藏中显示Web Clip图标，当用户在Safari中点击URL区域或者打开一个新的标签时，图标会以格子的形式显示。

如果你的网页内容使用了熟悉的图像或者易识别的配色方案，你的图标也应该融入这样的特点。但是，为了确保图标在设备上的显示效果，你也应该遵循本章的设计规范。（查看Specifying a Webpage Icon for Web Clip，了解如何在你的网站内容中加入代码来生成自定义图标。）

查看表45-1，了解相应的图标尺寸。

注意
图标最好命名为apple-touch-icon-precomposed.png。

5.6 创建可缩放的图片

你可以创建可缩放的图片来定制一些标准UI元素的背景，比如弹出框、按钮、导航栏、标签栏和工具栏（包括这些栏上的项）。为这些元素提供可缩放的图片可以提升app的性能。

对于很多UI元素，你可以在背景基础上指定端盖。端盖定义了一张图片中不会被缩放的区域。比如，你可能会创建一张包含四个端盖的可缩放的图片，这四个端盖定义了按钮的四个角。当缩放图片来填充按钮的背景区域时，端盖定义的部分不会发生变化。

根据你提供的可缩放图片的尺寸规格，iOS会拉伸或者平铺来来填充UI元素的背景区域。拉伸图片意味着不考虑图片原始的宽高比来放大图片。拉伸具有较好的性能，但是对于拉伸后会失真的多像素图片来说通常并不可取。平铺图片就是不断重复原始图片直到能够填充满整个目标区域。平铺的性能要弱于拉伸，但这是获得纹理和图案效果的唯一途径。

通常来说，你应该提供能够达到想要效果的最小的图片（除了端盖）。比如：

• 如果你需要不包含渐变的纯色图片，可以创建一张1×1点的图片
• 如果你需要垂直渐变的图片，可以创建一张宽度为1点，高度与UI元素背景高度相等的图像。
• 如果你需要纹理图片，只需创建一张与纹理最小重复部分大小相同的图片。
• 如果你需要不重复的纹理图片，那就创建一张与UI元素背景同等大小的静态图片。