来起点学院，BAT总监带你学产品运营！附iOS指南及下载地址

走进起点学院，人人都能成为产品经理。这里汇聚了来自百度、阿里巴巴、腾讯等知名企业的实战派产品总监，他们将亲自指导，系统地教授你产品与运营的知识。

文章索引

本章为iOS人机界面指南的终章，文末附有全文的PDF下载链接。若在翻译过程中出现误差，或若有任何宝贵意见或建议，敬请不吝赐教。翻译团队对大家一直以来给予的关注与支持表示衷心的感谢！

5.1 图标尺寸与图像规格

每个应用程序都配备有图标和启动画面，而且部分应用还需额外设计特定的图标，这些图标将应用于导航栏、工具栏以及标签栏，用以象征应用独有的内容、功能或操作模式。表格45-1中所列出的尺寸规格，可为自定义图标和图片的设计提供参考依据。

表格45-1：自定义图标和图像的尺寸(像素)

注意：

若您打算在主屏幕的快捷操作区域定制图标，请查阅有关主屏幕快捷操作的相关内容。

除了AppStore的图标之外，你还需要将一个名为iTunesArtwork的图标添加进去，而你的图标名称则可以自由选择。在Xcode工程中，你可以通过图片资源目录来对图片图标文件进行整理。若需添加图标，只需在工程图片资源目录中插入相应的图片文件即可。在编译过程中，Xcode需将适当的密钥添加至应用的Info.plist文件，并将图片资源打包至应用内。iOS系统会依据设备尺寸自动选择一个恰当的图标。如需深入了解asset catalogs的相关信息，请参阅Asset Catalog Help文档。

所有图片及图标推荐采用PNG格式，应尽量避免使用交错格式的PNG。图标与图像的规范位深应为24位。

5.2 应用图标(App Icon)

每个应用程序都应配备一个设计精巧、易于辨认的图标，以便在App Store及用户桌面上独树一帜。在iOS系统里，这些图标的不同尺寸会应用于Game Center、搜索结果以及设置界面，同时，它们还将作为由该应用生成的文档的标识。

为了确保图标展现出最佳效果，您不妨寻求专业设计师的帮助。经验丰富的设计师能够为您的应用程序塑造一致的视觉形象，并将这一形象巧妙地融入图标设计中，使其得以传承与凝练。

在设计中应采用普遍识别度高的图形。通常情况下，应尽量避免采用含义模糊的视觉符号，亦或是元素的非主要含义。以邮件应用程序为例，它通常选用信封作为图标，而非邮箱、邮递员的包裹或邮局的标识。

简约至上。尤其是要避免将众多多样的图形堆砌在你的图标之中。应当挑选一个简洁的、能够体现你应用核心价值的元素，并将其精心设计成一款既简单又独特的图形。在添加细节时务必谨慎，因为一个图标若样式或形状过于繁复，其细节可能会让用户感到困惑，尤其是在小尺寸图标中，细节更易显得模糊。

注意：

为了检验你的图标在较小尺寸下的呈现效果，可以将图标放置至手机主屏幕的相应文件夹中。同时，建议在文件夹内添加数个不同样式的图标，进而观察你的应用图标是否既美观又显眼。

为你的应用图标绘制一个具有象征意义的图案。在图标设计中，直接使用照片或截图往往效果不佳，这是因为这类细节在较小的尺寸下难以辨认。鉴于此，我们建议采用艺术手法来表现现实，这样做可以方便用户迅速把握你希望他们关注的重点。

若你执意追求极致的拟物化效果，那么务必追求极高的精确度。用以象征实际物品的图标或图形，需细致地还原实物的具体特征，诸如布料、玻璃、纸张、金属等，同时还要传达出物品的重量与触感。

确保你的图标在各种背景图案下均能展现出良好视觉效果。切勿仅限于在浅色调或深色调的背景上进行效果测试，毕竟你无法预知用户会选用何种壁纸。

确保图标无透明度。图标需保持不透明状态。若图标尺寸低于建议标准，或存在透明区域，则图标下方将呈现黑色背景，导致图标浮于其上，这在用户选用的精美壁纸中显得不够和谐。

图标设计时请勿采用iOS风格的界面元素，以免用户将您的应用图标或图形与iOS操作系统的用户界面产生混淆。

图标设计时不得采用苹果硬件产品的标识。苹果产品相关标识均享有版权，不得用于你的图标或图形创作。通常情况下，应避免在图标中复制特定设备的标识，因为这类标识的设计经常更新，依赖这些设计的图标和图形很容易变得陈旧。

请勿在您的界面中采用iOS系统内置的应用图标。尽管这些图标在含义上略有差异，但它们却频繁出现在系统各个角落，容易造成用户混淆。

为适配不同设备，需准备相应尺寸的图标。务必保证应用图标适用于所有设备。关于不同设备应采用的图标尺寸，请参照表格45-1。

当图标于iOS桌面显现时，系统会自动为其添加圆角效果。为确保图标在经过这一处理仍保持美观，请确保其四个角均为直角，即90度。以下可作参考：

设计一款大型的应用图标，以便在App Store中展示。确保用户能够轻松识别图标是至关重要的，然而，相较于之前的尺寸，此尺寸的图标能够容纳更多的精致细节。当这款应用图标以该尺寸展示在App Store上时，将不再需要额外的视觉效果。

正如表格45-1所展示，对于尺寸更大的1024×1024像素的图标，其命名应采用iTunesArtWork@2x格式。若需适配支持@1x分辨率的设备，则需额外创建一个512×512像素的图标，并命名为iTunesArtWork。

注意：

iOS系统可能会将较大尺寸的图标应用于其他功能。例如，在iPad上的应用程序中，iOS会选择较大的图标来创建较大的文档图标。

若你正在制作一款仅限内部推广的App（换句话说，这款App并未在App Store上架），那么你务必准备一个较大尺寸的应用图标，这样的图标有助于提升该App在iTunes平台上的识别度。

5.2.1 文档图标(Document Icons)

若您的iOS应用程序能够生成特定类型的文件，并且您期望用户能够迅速识别这些文件源自您的应用，那么您无需对这些文件的图标进行特别设计。iOS系统会自动将您应用的图标作为这些文件的图标展示给用户。

5.2.2 针对Spotlight搜索功能和系统设置的专用图标

每个应用程序均需配备一个迷你图标，以便在spotlight搜索结果的界面中呈现。此外，每个应用程序还应附有一个小图标，以便在系统自带的设置界面中展示。

这些图标设计应便于识别，以便用户在搜索结果列表或应用设置页面中，能够迅速辨认。以设置界面为例，尽管这些图标尺寸不大，但每个图标都十分清晰，易于区分。

与app图标无异，您可为这些小图标自由取名，鉴于iOS在应用过程中通常会遵循常规，自动选取恰当的图标尺寸。

针对各类设备，需为Spotlight搜索结果及设置页面各自配备独立图标。若未提供相应图标，iOS系统在此处可能对您的应用图标进行缩小处理。具体尺寸信息详见表格45-1。

注意：

若你的图标背景色为纯白，无需额外添加灰色边框以提升应用在设置页面中的辨识度。iOS系统会自动为图标添加0.01像素的轮廓，确保即便在白色背景的设置页面中，所有图标亦能呈现出优异的显示效果。

5.3 启动画面(Launch Files)

应用启动时呈现的初始界面为一种基础占位图案。此画面在用户打开应用后迅速显现，随后迅速被首屏内容所覆盖，从而给用户留下应用运行流畅、响应迅速的印象。每个应用均需配备启动文件，或至少提供一张静态图像。

自 iOS8 版本起，用户得以采用 XIB 或故事板文件来替换传统的启动画面。通过 Interface Builder 构建启动文件，并运用尺寸分类功能，为不同界面环境设定各自的层级；同时，还可借助自动布局技术进行细致调整。通过尺寸分类与自动布局的结合，只需构建一个启动文件，便能在各类设备上呈现出良好的效果。若需掌握展示环境和尺寸分类的概览信息，请参阅1.3.1节中关于为适应性开发的内容；如欲了解在Interface Builder中如何运用尺寸分类，请参考Size Classes设计指南。

若您需兼容较早的iOS系统版本，除了启动文件之外，仍可继续采用静态的启动图片。

重要：

通过XIB或故事板设计的文件，可以表明你的应用在iPhone 6 Plus或iPhone 6设备上得以运行。

以下的设计规范，适用于启动文件及静态图片：

启动画面设计得当有助于增强用户的使用感受。一般而言，启动画面无需包含以下信息：

鉴于用户在应用间频繁切换使用，因此务必努力减少加载时长，通过优化设计减轻用户对启动环节的感受，避免加深用户对启动过程的负面印象。

我们也可以设计一个与APP首屏一样的启动画面。除非：

若你认定恪守这些准则，往往只会打造出平庸无奇的启动画面，此言亦无不可。需牢记，启动画面并非要求你在此处展示技艺，其核心目的仅在于提升用户对应用启动迅速且易于使用的认知。以系统设置和天气应用为例，它们所提供的启动画面，实则只是充当了背景的角色。

系统设置的启动图片

天气应用的启动图片

若您打算运用固定启动图像，务必准备多款不同尺寸的启动画面，以便适配各类设备；同时，确保所有设备展示的静态启动图像均需涵盖状态栏部分。详细尺寸信息可参考表格45-1。

尽管在 iPhone 6 及 iPhone 6 Plus 设备上使用启动文件为佳，但在必要时，您同样可以选择使用静态启动图片进行替换。若您打算为 iPhone 6 和 iPhone 6 Plus 设计静态启动图片，请确保图片尺寸符合以下要求：

For iPhone 6:

For iPhone 6 Plus:

5.4 模板图标(Template Icons)

您为工具栏或主屏幕上的快捷操作所设定的个性化图标，亦即模板图标或图片，在您的应用运行期间，iOS系统会将之视为一个遮罩（这是iOS开发中的一个术语），用以展示您所看到的图标。

iOS 设定了众多通用的图标，诸如刷新、操作、增加以及收藏等。在条件允许的情况下，建议您采用这些图标和按钮来展示应用中的常见功能。如需了解可用的标准按钮和图标，请参阅4.1.4节“工具栏与导航标准按钮”及4.1.6节“标签栏标准图标”。

若你的应用程序中存在那些标准按钮图标无法充分展现的任务或模式——亦或是标准按钮与你的应用界面风格存在较大差异——那么，你可以考虑设计专属的栏按钮图标。从更高标准出发，在设计图标时，你应当将以下要素作为设计目标：

重要：

在设计过程中，务必避免对苹果公司官方产品图案进行复制。此类图案均受到版权法的保护，同时，相关产品的设计亦会经历频繁的更新与调整。

无论你仅采用自创图标，抑或将其与系统预设图标相结合，你app中展示的所有图标均需呈现出一致的视觉风格：它们应具备相同的尺寸规格、精细的细节处理以及均衡的视觉重要性。

以图示为例，你将观察到这些iOS系统标准图标在尺寸、细节以及重量方面均展现出高度的一致性，进而构成一个统一的整体。

为了打造一套风格统一且连贯的图标系列，一致性至关重要；每个图标应尽量采用一致的透视角度和粗细均匀的线条。为确保所有图标在视觉上尺寸一致，有时不得不设计出实际尺寸有所差异的图标。以这组系统标准图标为例，尽管它们在视觉上大小相同，但实际上收藏夹和语音邮箱的图标相较于其他四个略大。

在设计标签栏图标时，务必提供两种不同的图标样式——一种是未选中状态，另一种是选中状态。一般情况下，选中状态的图标会在非选中状态的基础上增加颜色填充，然而，某些设计可能需要在保持这一基本方法的基础上，进行相应的调整和创新。

在制作带有内部细节的图标选中效果版本，比如收音机图标时，需将内部细节进行反向填充，这样即便在选中状态下，这些细节也能清晰可见。然而，对于键区图标，尽管它们同样包含内部细节，但若在选中态时填充背景并给圆圈加上白色边框，可能会让用户感到困惑。

有时对选中态进行微小的调整，可以提升其显示质量。比如，计时器和播客的图标中存在一些未被填充的空间，因此我们对其描边进行了轻微的减小，并将其置于一个圆形轮廓之内。

若填充后的图标变得难以辨识，那么一个不错的选择是采用更粗的线条来标识选中状态。比如，语音邮箱和阅读列表的图标在选中时采用了两点粗细的线条，而在未选中时则使用了单点粗细的线条。

某些图标因形状及细节特征，即便加上了描边，观感依旧不佳。比如，音乐与艺术家图标的设计，无论是选中还是未选中，都采用了填充形式。用户可以轻易地区分它们的状态，因为选中状态下的图标有特定的颜色，且视觉效果更为突出。

设计模板图标时，需要遵循以下规则：

若欲打造一款颇具iOS原生风格的图标，不妨尝试运用细腻的轮廓线条进行绘制。具体而言，可以采用1点粗细的线条（即在@2x分辨率中相当于2像素的线条粗细）。

无论图标的视觉风格如何，都必须依照表格45-1中的尺寸要求来制作自定义的工具栏、导航栏和标签栏图标。若所设计的是主屏幕上的快速操作模板图标，请参考3.1.2节关于主屏幕快捷操作的内容。

在自定义标签栏图标时，请勿将文字嵌入其中，而应利用标签栏的API为每个标签指定标题，如通过initWithTitle:image:tag:方法实现。若对标题的自动布局进行调整，可借助标题API进行操作。

setTitlePositionAdjustment:)。

5.5 网页图标(Web Clip Icons)

针对网页应用或网站，您可以为用户设计一个专属图标，借助网页剪辑功能，用户便能在主屏幕上展示您的应用。用户只需轻触该图标，即可直接访问您的网页内容。您还可以打造一个能全面体现您的网站形象或突出某个特定网页的图标。

在Safari浏览器中，iOS系统还会在收藏夹里显示网站的小图标，用户在点击URL栏或者新开一个网页标签页时，这些图标便会以网格状的形式呈现出来。

若你的网页呈现了常见图像或易于识别的色调搭配，那么你的图标亦应与之相协调。但为了使图标在各类设备上更显美观，你需同时遵守以下指导原则：若想了解如何在网页内容中添加代码以实现自定义图标，请参阅《为网页剪辑指定图标》的相关内容。

对于的尺寸的图标，请参考表格 45-1。

注意：

尽量避免把你的icon命名为

禁止使用apple-touch-icon-precomposed.png文件。

5.6 设计可调整尺寸的图像（Designing Images with Variable Dimensions）

您可以通过制作可调整大小的图像来个性化设计一系列常用用户界面组件的背景，例如对话框、按键、导航栏、标签栏及其包含的项目。这些组件背景图像的缩放功能将有助于提升应用程序的整体运行效率。

在众多界面组件中，端盖可以用来替换背景。这种端盖能够设定图像中的一个区域，该区域在图像缩放时保持不变。比如，你可以制作一个包含四个端盖的可扩展图像，并将它用作按钮的四个角落。当图像根据按钮尺寸进行缩放时，由端盖指定的四个角落将保持原有的形状和大小。

根据您提供的可调整尺寸的图片，iOS系统会执行拉伸或铺展操作，直至图片能够准确覆盖当前用户界面元素的背景空间。拉伸操作即在不考虑图片原始宽高比的前提下进行放大。这种拉伸方式性能较好，但针对高像素图片，可能会出现图像变形的情况。铺展操作则是按照图片的原始尺寸进行多次重复，直至达到所需填充的目标区域。平铺的性能较低，但它是能够准确实现纹理和图案的唯一方法。

通常情况下，只需提供一张不含端盖的最小尺寸可调节图像，便能够实现预期的效果，例如：

本章的英文版本访问链接为：iOS人机界面准则

中文翻译PDF下载：

密码：eo5v

继续浏览有关 iOS图标设计产品运营学习 的文章