【腾讯ISUX】版权全部，IXDC获受权发布ios
译者注：本章是iOS Human Interface Guideline的最后一章，文末附上全文PDF下载地址。译文若有任何疏漏之处，或任何意见或建议，请不吝指出，翻译组感谢你们长久以来的关注和支持！xcode
5.1 图标与图像尺寸(ICON AND IMAGE SIZES)app
每一个app都须要icon，以及启动画面，此外一些app须要一些自定义图标用于导航栏、工具栏和标签栏中，来表明app特有的内容、功能或模式。表格45-1所罗列出来的尺寸能够为自定义图标和图片作参考。ide
表格45-1 ：自定义图标和图像的尺寸(像素)工具
注意：若是你须要在主屏幕快捷操做上建立自定义icon，请参考主屏幕快捷操做 。布局
除了AppStore的icon，你必须把命名为iTunesArtwork以外，你能够任意命名你的icon。在xcode工程中可使用图片资源目录来组织你的图片icon文件。若是要添加icon，在工程图片资源目录下添加对应的图片文件。在编译时，xcode添加合适的密钥到你的应用Info.plist文件中而且把图片打包进应用中。iOS会根据设备尺寸选择一个合适的icon。关于asset catalogs想要知道更多，能够查阅Asset Catlog Help。性能
全部的图片和icon建议使用png格式，避免使用交错的png。icon和图像的标准位深(bit depth)是24位。测试
5.2 应用图标(APP ICON)优化
每个app都须要一个精美、辨识度高的icon来让本身在App Store和用户桌面中脱颖而出。在iOS中，各个不一样尺寸的icon将被用于Game Center，搜索结果，设置之中，还会用于表明由这个app建立的文档。
为了让icon达到最好的效果，你能够求助于专业设计师。一个有经验的设计师能够为你的app创建统一的视觉风格，同时把这种风格延续和浓缩到icon的设计中。
使用通用的易于辨识的图形。通常来讲，避免使用意义不明的视觉元素，或者使用元素的次要含义。举个例子，邮件App会使用信封做为icon元素，而不会用邮箱、邮递员的邮包、或者邮局的标志。
追求简约。尤为是避免把一大堆不一样的图形都塞到你的icon中去。找到一个简单的、能够表明你的app精髓的元素，而后把它设计成一个简单而独特的图形。添加细节时请慎重，若是一个icon的样式或形状过于复杂，它的细节可能会让用户迷惑，在小尺寸的icon中更可能会显示模糊。
注意：想要测试你的图标在小尺寸下的显示效果，能够把它移动到主屏的文件夹下。最好是再往文件夹中多放几个不一样的icon，而后看看你的app icon好看是否好看和突出。
在icon中为你的app设计一个抽象释义。在icon设计中照片或者截图效果一般都会很糟糕，那是由于这些相片级的细节在小尺寸中很是难以辨识。所以，咱们最好以艺术的方式来诠释现实，由于这样可以让用户很容易领悟到你想他们注意到的方面。
若是你坚持彻底拟物化，请务必作到十分精确。表明真实物品的icon或者图像应该精确地描摹出实物的特征，如织物、玻璃、纸张、金属等等，还要能表达实物的重量和质感。
保证你的icon在不一样的背景图中都是好看的。不要只是单一在浅色或者深色背景中测试你的icon效果，由于你没法预料你的用户会使用什么样的墙纸。
避免使用透明度。App icon必须是不透明的。若是icon的边界小于推荐尺寸，又或者你建立了透明区域，那么你的icon下面就会出现黑色背景，你的icon将会浮于黑背景之上，这在用户所用的漂亮壁纸上看起来不美观。
不要在图标中使用iOS的界面元素。你必定不但愿用户会把你的app icon或图形与iOS的系统UI搞混。
不要在icon中使用苹果的硬件产品标志。表明苹果产品的各个标志都是受版权保护的，不容许复用到你的icon或者图形中。通常来讲，要避免在你的icon中复用任何特定设备标志，由于这些标志的设计经常变化，而基于这些设计的icon和图形很容易就会过期。
不要在你的界面中复用iOS自带的app icon。一样的icon含义却有轻微不一样，还同时出如今整个系统的不一样位置之中，这会让用户很是困惑。
为不一样设备准备不一样大小的icon。你须要确保你的应用icon支持全部的设备。对于不一样设备应该选用的icon尺寸，能够参考表格45-1。
当icon出如今iOS桌面上的时候，它会自动叠加圆角。请保证你的icon四个角都是90°，这样它们在圆角处理后仍然很好看。举个例子：
建立一个大尺寸的app icon，用于显示在App Store上。虽然让你的用户能轻易认出你的icon这点很重要，但相比以前这些尺寸，这个尺寸的icon容许你添加更多精巧的细节。这个尺寸的app icon显示在App Store上时将再也不额外添加任何视觉效果。
如同表格45-1所示，更大尺寸1024×1024像素的icon应该被命名为
iTunesArtWork@2x(若是须要支持@1x的设备，建立一个大小为512×512像素的icon，而且命名为iTunesArtWork)
注意：iOS可能会把大尺寸icon用于其它用途。好比在iPad app中，iOS会用大尺寸icon来生成大的文档图标。
若是你正在开发一个临时发布的App(也就是说，它只是内部发布没有放在Appstor上)，你必须提供一个大尺寸的App icon,这个icon将会提升它在iTunes中的辨识度。
5.2.1 文档图标(DOCUMENT ICONS)
若是你的iOS app会建立自定义类型的文件，而你但愿用户一眼就能看出这些文件是由你的app生成的。你不须要为这些文档从新设计图标，由于iOS会自动把你的app icon来做为这些文档的图标。
5.2.2 用于SPOTLIGHT和设置的图标(SPOTLIGHT AND SETTINGS ICONS)
每一个app都应该提供一个小尺寸的图标，用于在spotlight搜索结果中展现。一样地，每一个app都应该提供一个小尺寸的图标，用于在系统内置的设置页面中展现。
这些icon应该易于辨识，方便用户在搜索结果列表或者设置页的app列表中一眼就能够看出来。举个例子，在下图设置界面中，这些icon虽然很小，但每个都清晰可辨：
和app icons同样，你能够任意命名这些小icon，由于iOS在使用的时候一般会照惯例自动选择合适尺寸的icon。
对于全部的设备，请分别为Spotlight搜索结果和设置界面单独提供icon。若是你没有提供这些icon，在这些位置iOS可能会缩小你的应用icon。表格45-1显示了不一样尺寸的详细信息。
注意：若是你的icon底色是白色的，不须要增长灰色遮罩来加强app在设置界面的可见度。iOS会自动为icon增长1像素的描边，来保证在白色背景的设置界面中全部icon都能达到良好的显示效果。
5.3 启动画面(LAUNCH FILES)
启动画面是在你的应用启动时展现的简单占位图。因为启动画面会在用户启动你的app时马上出现，而且很快地被app的首屏取代，它会让用户认为你的app运行和响应的速度都很是快。每个应用都要提供一个启动文件或至少一张静态图片。
在 iOS8 之后，你可使用一个 XIB 或故事板文件来替代静态的启动图片。
在 Interface Builder 中建立启动文件后，使用尺寸归类来为不一样的界面环境定义不一样的层，你还可使用自动布局来进行细节调整。利用尺寸归类和自动布局，你能够只建立一个启动文件，就能够在全部设备里都有不错的呈现。(若是要了解呈现环境和尺寸归类的概览，参见1.3.1 为自适应而开发 ；了解如何在 Interface Builder 中使用尺寸归类，可参见Size Classes Design Help 。)
若是你须要支持早期的 iOS 版本，除启动文件外能够继续使用静态启动图片。
重要：使用 XIB 或故事板的文件，表示你的应用程序在iPhone 6 Plus 或 iPhone 6上运行。
如下的设计规范，适用于启动文件及静态图片：
简单的启动图片能够提高用户体验。一般状况下，启动图片不须要提供以下内容：
“进入应用的过程”，例如载入进程图。
带有“关于信息”的窗口。
品牌元素，除非它们是 app 第一屏的静态内容。
因为用户会在 app 之间频繁地切换，因此你应该尽量地缩短加载时间，经过设计下降用户对启动过程的感知，而不是加剧用户对启动的印象。
咱们也能够设计一个与APP首屏同样的启动画面。除非：
文本。启动图片是静态的，因此启动图片中的任何文本都不会有局限。
可能会变化的 UI 元素。若是 app 启动完成后有元素发生可见的变化，用户可能会对启动画面和第一屏之间的变化感到不适应。
若是你认为遵循这些规范，每每只会设计出平凡而乏味的启动图片，倒也没说错。请记住，启动图片不意味着须要你在里面炫技，它的目标只是加强用户对应用能够被快速启动并开始使用的感觉。例如系统设置和天气应用都仅仅提供了一个至关于背景的启动图片。
系统设置的启动图片
天气应用的启动图片
若是你须要使用静态启动图片，你须要准备尺寸不一样的启动画面以适应不一样的设备，且全部设备上的静态启动图片都必须包含状态栏的区域。具体尺寸请查阅表格 45-1 。
虽然最好在 iPhone 6 和 iPhone 6 Plus 上使用启动文件，但须要的话，你也能够替换为静态启动图片。若是你须要为 iPhone 6 和 iPhone 6 Plus 建立静态启动图片，请使用如下尺寸：
For iPhone 6:
纵向： 750 x 1334 像素(@2x)
横向： 1334 x 750 像素(@2x)
For iPhone 6 Plus:
纵向： 1242 x 2208 像素 (@ 3X)
横向： 2208 x 1242 像素 (@ 3X)
5.4 模板图标(TEMPLATE ICONS)
你为工具栏或主屏幕快速操做建立的自定义图标，也就是模板图标或图片，由于当你的 app 运行时，iOS 将它做为一个 mask(iOS的一个开发相关名词)来介绍你所看到的图标。
iOS 定义了不少标准的小图标，例如刷新、操做、增长及收藏等。若是可能的话，你应当使用这些按钮和图标来表示 app 里的常规任务。(了解更多可使用的标准按钮及图标，可参见4.1.4 工具栏与导航标准按钮和4.1.6 标签栏标准图标章节。)
若是你的app中包含标准按钮图标不能表明的任务或者模式——又或者标准按钮与你的app风格相差太远——你能够设计本身的栏按钮图标。以更高的要求来看，你应该如下列几点为目标来设计icon：
简单明了。太多的细节会令图标看起来过于草率且识别度低。
不容易与系统图标混淆。用户应该一眼就在你的图标和系统图标中区分出来 。
易于理解并被普遍接受。尝试创造多数用户都能正确理解的标志，并不让它们感到攻击性。
重要：确保你的设计中没有复用苹果官方产品的图形。这些标志受版权保护，并且相关产品的设计会频繁变化。
不管你是只使用本身设计的图标，或者是与系统标准图标混用，全部你的app中出现的图标都应该看起来属于同一种风格：它们看起来拥有一样的尺寸、细节精度以及视觉权重。
举个例子，下图中的iOS栏标准图标，你会注意到他们之间在尺寸、细节和重量上都拥有很高的类似性，从而造成了一个协调的联合体：
想要设计一套风格协调连贯的图标，一致性是关键：尽可能让每一个图标都使用相同的透视和粗细相同的线条。为了保证全部的icon尺寸视觉上统一，你可能须要设计一些实际上尺寸并不相同的icon。举个例子，下面这组系统标准图标看起来大小一致，但实际上收藏夹和语音邮箱的icon比其它三个略大一些。
若是你在设计用于标签栏的图标，你应该提供图标的两种状态——未选中态和选中态。一般选中态是非选中态填充了颜色的样子，但有些设计须要在此方法的前提下进行一些变化：
建立有内部细节的图标的选中态版本时(例如收音机图标)，将内部细节反过来填充，以确保这些细节在选中态依然突出。键区图标虽然也拥有一些内部细节，但若是对选中态的背景进行填充，并在圆圈上增长白色边线，就会令用户感到混淆。
有时候给予选中态一些细微的变化令其有更好的显示效果。例如计时器和播客的图标都包含一些开放的区域，因此选中态将其描边略微缩小并放在了一个圆圈内。
若是图标在填充后会让人难以辨认，好的替代方案就是使用更重的描边来表示选中态。例如语音邮箱和阅读列表的图标的选中态就是使用了 2 点的描边，而未选中态是用 1 点来描边的。
有些图标因为形状细节的关系，增长描边后看起来并很差。例如这几个案例——音乐和艺术家的图标——两种状态都使用填充效果。用户很简单就能分辨出选中态和未选中态，由于选中态有颜色，视觉表现更重一些。
设计模板图标时，须要遵循如下规则：
使用带的透明度的纯色来绘制图标。iOS会去除全部的颜色信息，因此不须要使用超过 1 种填充色。
不要使用阴影。
图形须要平滑无锯齿。
若是你要设计一个看起来足够有 iOS 原生感的图标，你可使用细描边来绘制它。具体来讲，使用 1-point 描边(也就是在 @2x 分辨率下是 2 像素描边)
无论图标的是怎样的视觉风格，都须要按照尺寸表表格 45-1来建立自定义工具栏、导航栏以及标签栏的图标。若是你设计的是主屏幕快速操做的模板图标，详情参见3.1.2 主屏幕快捷操做 。
不要在自定义标签栏图标中包含文本，而是使用标签栏的 API 来为每个标签设置标题(例如initWithTitle:image:tag: )。若是你须要调整标题的自动布局，你可使用标题 API 例如setTitlePositionAdjustment: )。
5.5 网页图标(WEB CLIP ICONS)
对于网页应用或网站，你能够提供一个定制图标，让你的用户经过网页剪辑(Web clip)将你的app展示在主屏幕上。用户只须要点击这个icon即可直接获取你的网页内容。你能够建立一个能够表明你的整个网站或某个单独网页的图标。
iOS也会在Safari的收藏夹中展现网页图标，当用户点击Safari的URL栏或者打开一个新的网页标签时，这些网页图标就会以矩阵的形式出现。
若是你的网页内容使用了经常使用的图像或容易辨认的配色方案，你的icon也应该融入这些特征。然而，为了确保图标在设备中更加漂亮，你应该同时遵循如下这些指南：(想要了解如何在你的网页内容中增长代码来提供自定义图标，请参考Specifying a Webpage Icon for Web Clip)。
对于的尺寸的图标，请参考表格 45-1。
注意：尽可能避免把你的icon命名为apple-touch-icon-precomposed.png.
5.6 建立可缩放图片(CREATING RESIZABLE IMAGES)
你能够经过制做可缩放图片来定制一些标准UI元素的背景，如弹窗，按钮，导航栏，标签栏等，还包括这些栏上的项。提供这些元素的可缩放图片会优化app的总体性能。
对于许多界面元素，你可使用端盖来替代背景。端盖可定义图像内的一个不被放大或缩小的区域。例如，你能够建立一个包含 4 个端盖的可拉伸图片，将其做为一个按钮的 4 个角。当图片被缩放来适应按钮大小时，被端盖指定的四个角则不会发生变化。
据你所提供的可缩放图片，iOS会进行拉伸或者平铺，直到图片能够正确填充当前UI元素的背景区域。拉伸指的是在不考虑图片原始比例的状况下放大图片。拉伸图片的性能较高，但对于多像素图片来讲，会出现失真现象。平铺指的是按照图片的原始尺寸屡次复制图片，直到填充目标区域。平铺的性能较低，但它是可以准确实现纹理和图案的惟一方法。
通常来讲，提供一张不包含端盖的最小尺寸可缩放图像便可达到想要的效果，好比：
若是你须要不包含渐变的实色图，制做1×1像素的图片。
若是你须要垂直简便的效果，制做一个宽度为1像素，高度与UI元素背景区域高度相等的图像。
若是你须要重复的纹理效果，你须要制做一个尺寸与纹理最小重复部分尺寸相等的图像。
若是你须要不重复的纹理效果，你须要制做一个与你的UI元素背景区域大小相等的静态图像。
出处：腾讯ISUX (https://isux.tencent.com/ios9-guideline-ch5.html)
本章英文原文访问地址：iOS Human Interface Guidelines