[ISUX转译]iOS 9人机界面指南（一）下篇：UI设计基础 - 腾讯ISUX

1.8 动画（Animation）

细微、精美的动画遍布iOS的用户界面，他们使应用的体验更具吸引力，更具动态性。适当的动画可以：

• 传达状态和提供反馈
• 增强直接的操纵感
• 将用户的操作可视化

（译者注：以上为视频截图，完整视频请点击观看）

谨慎地增加动画，特别是在那些无法提供沉浸式体验的应用中。过多和无理由的动画会阻碍应用的流畅性，降低性能，还会分散用户在操作中的注意力。

尤其是要有目的地，合理地应用动效和UIKit中的动态控件，并确保对结果进行测试。合理地使用动效可以提升用户的理解程度和愉悦感；应用过度使用动效会给用户带来迷惑和难以掌控的感觉。

如果可以，保持自定义动画和内置动画的一致性。用户习惯于内置iOS应用使用的精细动画。事实上，用户倾向于把视图之间的平滑切换，对设备方向改变的流畅相应和基于物理的滚动效果看做是iOS体验的一部分。除非，你的应用要给用户提供类似游戏应用的沉浸式体验，这种情况下自定义的动画可以区别于内置动画。

使用风格类型一致的动画。自定义动画之间也需要保持一致性，这样可以让用户在使用应用以之前建立的经验为基础。

一般来说，自定义的动画要考虑动画的现实性和可信性。人们乐意接受自由的艺术创作，但是当动效不合理或者违反物理学时，用户会感到困惑。例如，当你从屏幕顶部下滑拖出一个视图的时候，你也要上滑将它收起，因为这么做可以帮助用户记住这个视图从何而来。如果你下滑到屏幕底部关闭这个视图，用户关于从屏幕上方呼起的心理模型就会被打破。

1.9 品牌推广（Branding）

成功的品牌推广不仅仅包括在应用中添加品牌元素。优秀的应用应该通过创建独特的外观和感觉来为用户提供愉悦、难忘的体验。

在iOS系统之下可以很容易地使用自定义的图标、颜色和字体来创建区别于其他应用的UI。当你进行这些元素的设计时，牢记以下两点：

• 每个自定义的元素本身都需要具备良好的观感和功能性，但它也应该与应用中其他元素保持一致，无论应用中其他元素是自定义的还是标准的。
• 为了在iOS中感觉舒适，你的应用虽然不必看起来跟内置的一样，但是需要对它的遵从、清晰度和深度（如欲了解更多，参见1 为iOS而设计（Design for iOS））进行整合。花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味，并把它们在你的自定义元素中表达出来。

当你需要让用户意识到你的品牌时，你应该遵循以下几点：

以精致优雅不唐突的方式植入品牌元素。用户使用你的应用来完成事务或者进行娱乐，他们不希望被强迫着去观看广告。为了获得最好的用户体验，你可以通过字体、颜色和图像的设计来潜移默化地地提醒用户你的品牌身份。

避免远离用户关心的内容。不要像上图中的反例那样将仅有品牌意义的内容放在屏幕顶部二级栏上持续展示，使正文内容空间被压缩，而是考虑以其他低侵入性的方法无处不在地展示品牌，如使用自定义颜色、字体，或巧妙地定制屏幕的背景。

抵抗住诱惑，不要把你的logo贯穿整个应用。移动设备的屏幕多数相当小，logo的每一次出现都会占据空间，从而将用户与他们想看的内容隔离开。而且，在应用中显示logo并不能像在网页中显示logo那样达到相同的目的：对于用户来说通常会很容易在不知道网页所属的情况下访问一个网页，但却极少有用户会在完全不看一个iOS系统中的应用图标的情况下就打开它。

1.10 颜色与字体（Color and Typography）

1.10.1 色彩有助于增进沟通（Color Enhances Communication）

在iOS系统中，颜色会用于表明交互，传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色，并辅以或亮或暗的背景组合。

如果你要创建多样的自定义颜色，要确保它们能够和谐共存。例如，如果你的应用的基本风格是柔和的色调，你就应该创建一个协调的柔和色调的色板用于整个应用。

注意在不同情境下的颜色对比。例如，如果在导航栏的背景与栏按钮标题之间没有足够的对比，按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中（包括晴朗的室外）来测试设备上的颜色是否具有足够的对比度。

虽然在设备上查看你的应用能够在一定程度上帮助你找到需要调整的地方，但这仍代替不了能产生可靠结果的更科学客观的方法。这种方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。

当你使用自定义的栏颜色时，着重考虑半透明的栏和应用内容。当你需要创建能匹配特别颜色的栏颜色时（比如一个已有品牌中的颜色），可能在你获得你想要的结果之前，你需要用各种颜色进行实验。栏的显示将会同时受到iOS系统所提供的半透明栏与藏在栏后面的应用内容的呈现所影响。

API注：使用浅色（tintColor）的属性值给予栏按钮颜色，使用栏浅色（barTintColor）的属性值为栏本身赋色。欲了解更多关于栏属性的内容，可参见UINavigationBar Class Reference,，UITabBar Class Reference，UIToolbar Class Reference和 UISearchBar Class Reference.

注意颜色的盲区。多数色盲的人很难区分红色与绿色。需要对你的应用进行测试以确保在其中你没有将红色与绿色作为区分两个不同状态或值的唯一方式，一些图像编辑软件或工具能够有效的帮你验证颜色的盲区。通常意义来说，使用多种方式来表征原色的交互性是非常好的（需要了解更多关于在iOS系统中表征交互性的信息，请参阅Interactive Elements Invite Touch）。

考虑选择一种基准色颜色来表征交互性与状态。内置的应用里的基准色包括比如备忘录中的黄色，和日历中的红色等等。如果你定义一种用于表征交互和状态的基准色，要确保你的应用中的其他颜色不会与它发生冲突。

避免给可交互和不可交互的元素使用相同的颜色。色彩是表明UI元素交互属性的方式之一。如果可交互和不可交互的元素使用相同的颜色，用户将会难以判断哪些区域是可点的。

色彩可以向用户传达信息，但不一定会以你希望的方式。每个人眼中的色彩是不一样的，不同的文化为色彩赋予的意义也是不相同的。花时间来研究如何使用色彩才可能会被其他国家或者文化接受。你要尽可能确定应用中运用的色彩向用户传达了恰当的信息。

大多数情况下，不能让颜色喧宾夺主，让用户分心。除非色彩是应用的目的和本质所在，通常情况下色彩应该用来从细微细节之处提升用户体验。

1.10.2 优秀的排版提供清晰的传达（Great Typography Enables Clear Communication）

Apple为全平台设计了San Francisco字体以提供一种优雅的、一致的排版方式和阅读体验。在iOS 9及未来的版本中，San Francisco 是系统字体。

San Francisco搭配Dynamic Type，可以为您提供：

• 一系列的字号大小，在任何用户设置，包括可访问性设置下，可获得优质的清晰度和极佳的阅读体验。
• 自动调整文字的粗细，字母间距以及行高的能力。
• 为语义上有区别的文本模块指定不同的文本样式，比如正文、脚注或者标题。
• 文本可以根据用户在字号设置和可访问性设置中指定字体大小的变化作出适当的响应的能力

下载San Francisco可访问 https://developer.apple.com/fonts/.（注意：iOS9中的San Francisco字体取名为SF-UI）。当你在你的app中采用San Francisco时，你可以调整模拟器>设置中的值来测试在不同尺寸下你的app的文本。

注：如果你是用自定义字体，你仍然可以采用Dynamic Type或根据系统的字号设置来规划字体范围。当用户改变设置时，你的应用也必须响应式的配合。如需了解如何使用文字样式并确保当用户改变文字型号设置时你的应用能够获取通知，可以参考Text Styles.

San Francisco 有两类尺寸: 文本模式（Text）和 展示模式（Display）。 文本模式适用于小于20点（points）的尺寸，展示模式适用于大于20点（points）的尺寸。当你在你的app中使用San Francisco时，iOS会自动在适当的时机在文本模式和展示模式中切换。

注：如果你使用应用程序如Sketch或Photoshop来生成你的设计，那么当你设置的字体不小于20点的时候，你需要切换到展示模式。iOS会根据字体大小为San Francisco自动调整字间距。（字间距是以用作于修改文字间距）。表格10-1 和 10-2分别是文本模式(Text)和展示模式(Display) 在不同字号下的间距值。

为了突出某些文字或者为了在内容块之间建立视觉关联，你可以依赖由Dynamic Type支持的语义化样式，如标题、正文，你也可以指定字体权重，如细体或者半粗。使用 Dynamic Type样式使得你的内容能更好地表达含义，但如果你想要对你的设计有更好的把控能力，你可以对特定的文字设置特定的权重。（想要了解更多关于调整字体权重， 可以参阅UIFont Class Reference.）

例如，你可能想要增加某些文字的权重，来帮助用户可视化你的内容的层次结构，或者把用户的注意力吸引到特定的词或短语。另外，你可以通过增加较小文字的权重和减小较大文字的权重，在多个不同字号的、相邻的标签中建立视觉凝聚。字体权重在内容的整体风格和表达中有重要影响，因此你可以选择特定的权重来达到设计目的。

文本尺寸的响应式变化需要优先考虑内容。并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时，他们是想要使他们关注的内容更容易阅读；他们并不总是想要屏幕上的每个单词都更大。

例如，当用户选择具备更大易用性的文本尺寸时，邮件将会以更大的尺寸显示邮件的主题和内容，而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。

确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如：

• 文本永远都不应该小于11点（points），即使是用户选择极小的文本尺寸。相较而言，内容样式使用17点的字号作为大尺寸，这也是默认的文本字号。
• 通常来说，字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式，它们在极小、小和中尺寸的设置中均使用相同的字号、行距和字距。
• 在最小的三种文本尺寸中，字间距相对较大；而在最大的三中文本尺寸中，字间距相对紧凑。
• 标题和内容的样式使用相同的字体尺寸，同时，为了区分标题与内容样式，标题样式使用更重的值。
• 导航控制栏的文本使用相同的字号，而内容文本的样式则使用大尺寸的设置（值为17点）。
• 文本总是使用常规或者中重，一般不适用轻或者加粗。

通常情况下，应用中整体应该使用单一字体。多种字体的混杂会使你的应用看上去支离破碎和草率。相反，使用一种字体和少数样式。根据语义用途，使用UIFont类的API来定义不同文本区域的样式，比如正文或者标题。

1.11 图标和图形（Icons and Graphics）

1.11.1 应用图标（The App Icon）

每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象，并以此评判应用的品质、作用以及可靠性。

以下几点是你在设计应用图标时应当记住的。当你确定要开始设计时，请参考App Icon来获取更详细的设计规格与指导。（译者注：App Icon处在iOS Human Interface Guidelines的Icon and Image Design部分，翻译将在后续更新中放出，烦请各位耐心等候。）

• 应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事，以及与用户建立情感连接的机会。
• 最好的应用图标是独特的，整洁的，打动人心的，让人印象深刻的。
• 一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能让图标在小尺寸时变得不清晰。

1.11.2 小图标（Small Icons）

iOS提供了一系列小的icon，用以代表各种常见任务与操作，它们常用在标签栏（Tab Bar）、工具栏（Toolbars）与导航栏（Navigation Bar）中。用户通常都已经了解这些内置图标的含义了，因此可以尽可能的多使用它们。

如果需要自定义动作或者内容，你也可以设计自定义图标。设计这些小的线性图标与设计应用图标有很大的区别，请参考Bar Button Icons来了解更多内容。（译者注：Bar Button Icons章节处在iOS Human Interface Guidelines的Icon and Image Design部分，翻译将在后续更新中放出，烦请各位耐心等候）

请注意，你有时候也可以用文字来代替工具栏和导航栏的图标。 就像iOS的日历里面，工具栏上便是使用”今天”,”日历”和”收件箱”来代替图标进行表意的。

想要决定在工具栏和导航栏中到底是用图标还是文字，可以优先考虑一屏中最多会同时出现多少个图标。同一屏幕中图标的数量过多可能会让整个应用看起来难以理解。使用图标还是文字还取决于屏幕方向是横向还是纵向，因为水平视图下通常会拥有更多的空间，可以承载更多的文字。

1.11.3 图形（Graphics）

iOS应用大多数图形丰富。无论是你需要展示用户的照片，还是需要创建自定义图片，以下这些需求都应该遵守：

• 支持Retina显示屏。确保你应用中的所有图片资源都提供了高分辨率规格。尤其需要注意的是，iPhone 6 Plus需要提供@3x规格的图片，而所有其他的高分辨率iOS设备都需要提供@2x规格的图片。
• 显示照片或图片时请使用原始尺寸，并不要将它拉伸到大于100%。你不会希望在你的应用中看到拉伸和变形的图片。可以让用户自己来选择他们是否想要缩放图片。

不要使用从苹果系列产品中复制的图形。这些图形均受版权保护，而且产品的设计可能会频繁改变。

不要将苹果的应用图标，图像或者截图用于你的设计中。所有苹果的设计均受版权保护并且不允许出现在你的UI中，除非它们是由系统直接提供的。

1.12 术语和措辞（Terminology and Wording）

你在应用中呈现的每一个字都是与用户进行对话的一部分。把握这样的对话机会，为你的用户提供清晰的表意与愉悦的体验。

设置是面向全体用户的一个基础应用，因此它使用了简明扼要的语言来描述用户可以进行的操作。举个例子，设置→勿扰模式（Do Not Disturb）就没有使用难以理解的复杂技术术语，而是用了简单的语言，给用户描述了里头的一系列操作。

保证你使用的术语是用户能理解的。根据你对用户群的理解来决定在应用中使用什么样的词汇。举个例子，在一款针对小白用户的应用中使用技术术语是不合适的，但对于针对高端用户的应用来说，使用技术术语是很自然的事情。

使用非正式的友好语气，但不需要太过卑微。避免太正式太僵化，或者太过嘻嘻哈哈，傲慢无礼。请记住，用户可能会反复阅读这些文本，因此有些起初看上去很俏皮的语句，多看几次之后可能会显得烦人。

像新闻编辑一般遣词造句，避免不必要的冗余语句。当你的文案足够简明扼要，用户就可以很轻松地阅读和理解它。确定最重要的信息，精炼它并且突出它，让用户不需要读一大段文字才能了解他们在找什么，以及下一步要做什么。

给控件加上短标签或者容易理解的图标。让用户只扫一眼就能知道这个控件是干什么的。

描述时间时要注意准确性。今天和明天这些词汇确实显得比较友好，但有时候会让用户费解，因为你可能没有办法确定用户当前的时区和时间。举个例子，假如有一项活动会在半夜12点前开始，对于在同一个时区的用户而言，这个活动是在今天开始的，但对于那些在早一点的时区里的用户而言，这个活动在昨天就已经开始了。

为你的应用写一则漂亮的App Store描述，最大程度地把握住这个与潜在用户沟通的绝佳机会。除了准确描述你的应用、强调应用的品质与亮点以外，你还需要：

• 修正所有的拼写、语法与标点符号错误。这些小错误也许不会影响用户正常使用，但是可能会让他们对应用的整体品质产生负面印象。
• 尽量少用全大写的词汇。虽然大写单词有时候可以吸引注意力，但是全大写的段落不适合阅读，而且会产生一种朝用户扯着嗓子吼的感觉。
• 可以描述bug修复情况。如果您的应用新版包含用户一直期待的bug修复，那在你的软件描述中提到这一点就是个很好的做法。

1.13 与iOS的整合（Integrating with iOS）

与iOS整合，指的是在当前平台上给用户提供一种舒适的、宾至如归般的体验，当然这并不意味着我们要把每一个应用做的和内置应用一模一样。

最好的与iOS整合的方式便是深刻地了解iOS的主题与核心——这一部分在上文为iOS而设计（Designing for iOS）部分中已有详细描述，并寻求出如何在你的应用中融合与表达这种主题。当你这么做的时候，遵循本章中的指引可以帮助你为你的用户提供他们想要的体验。

1.13.1 正确使用标准UI元素（Use Standard UI Elements Correctly）

尽可能使用UIkit提供的标准UI元素是一个好主意。多使用标准元素而非自定义元素，你与你的用户都将受益：

• 标准UI元素会根据iOS官方的更新而自动更新——而自定义元素不会。
• 标准UI元素对于你自定义外观和行为来说拥有优秀的扩展性。举个例子，iOS中所有的视图（Views，从UIView中继承的对象）都是可以使用TintColor属性来定义颜色的，它让应用配色变得很简单。
• 用户更熟悉和习惯标准的元素，因为他们可以立刻明白你的应用中这些元素的用途。

想要充分地利用标准UI元素的优点，有一些关键点需要特别注意：

严格遵循每个UI元素的设计规范。当你应用中的UI元素的外观与功能都是用户所熟悉的，他们可以很容易地根据先前的经验来使用他们，进而更好地使用你的应用。你可以从这些章节中找到各种UI元素的设计规范：Bars, Content Views, Controls, Temporary Views.

（译者注：上文提到的章节均处在iOS Human Interface Guidelines的第4章，翻译将在后续更新中放出，烦请各位耐心等候。若有需要，亦可先参考先前已翻译的iOS7 UI Elements章节：上，下。）

不要混用不同版本的iOS里的UI元素。你一定不希望让用户觉得你的UI元素来自于与当前用户的设备版本不同的iOS系统。

大体来说，请避免创造自定义UI元素来表现标准交互行为。先问问你自己为什么一定要创建一个与标准UI元素行为完全相同的自定义元素。如果你只是想改变标准UI元素的外观，可以考虑使用UIKit外观定制API(UIKit appearance customization APIs)，或者给元素填充别的颜色。如果你需要定义一个与标准控件稍有不同的行为，请确保你在改变了这个UI元素的属性和行为之后，这个元素仍然能完成你所希望的操作。如果你需要完全自定义一个行为，最好是设计一个与标准元素完全不相像的自定义元素。

提示：Interface Builder让获取标准UI元素，使用外观定制API（the appearance customization APIs），获取属性，以及在你的应用里使用自定义和系统自带图标变得很简单。想要了解更多Interface Builder的内容，请参阅Xcode Overview.

不要用系统自带的按钮和图标表达其他含义。iOS提供了多种可用的按钮和图标。请确认你了解它们的准确表意；不要单纯凭借你看到这些图标样式的猜测和理解来解读和使用它们。（你可以在Toolbar and Navigation Bar Buttons和Tab Bar Icons中了解到这些按钮和图标的准确含义。）

如果你所需要的功能无法用系统提供的按钮和图标来表现，你也可以设计自定义按钮。自定义按钮的设计可以参考 Bar Button Icons.

（译者注：上文提到的章节均处在iOS Human Interface Guidelines的第4章，翻译将在后续更新中放出，烦请各位耐心等候。若有需要，亦可先参考先前已翻译的iOS7 UI Elements章节：上，下。）

如果你的app是沉浸式体验，那么创造全新的自定义UI是合理的。因为你在创造一个统一的体验环境，让用户在其中能够有所期待并探索如何控制应用。

1.13.2 弱化文件和文档处理（Downplay File and Document Handing）

iOS应用可以帮助用户创建和处理文件，但这并不意味着用户需要过分考虑iOS设备的文件系统如何运作。

如果你的应用中支持用户创建和编辑文档，那么提供一个清晰的图形库视图(document library view)让用户能够方便地打开或者新建文档是一个好的做法。理想状况下，这样的图形库视图拥有以下特征：

• 高度图形化。用户通过屏幕上的缩略图就可以一目了然，快速找出自己想要的文件。
• 让用户用最少的动作完成自己的任务。比如说，用户可以快速地水平滚动文件列表，然后轻点一下自己想要的文件来打开它。
• 包含新建文档功能。一个图形库视图应该支持让用户点击一个新建文档的占位图便完成新建文档操作，而不是让用户通过访问别的地方来新建文档。

举个例子，Pages的图形库视图里面，既展示了用户已存在的文档，也加入了便捷的新建文档操作。

提示：你可以使用Quick Look Preview功能来让用户预览你的应用中的文件，哪怕你的应用不能打开这些文件。想要了解如何在你的应用中提供这个功能，请参阅Quick Look.

如果你的应用允许用户使用在其他应用中创建的文档，你可以通过模态文档选择视图控制器（modal document picker view controller）来帮助用户触达它们。这个控制器可以提取用户在iCloud中的文档，还可以通过文档提供者扩展（Document Provider extensions）来提取在其它应用中创建和储存的文件。想要了解更多文档提供者扩展的内容，可以参考Document Provider Extensions; 想要了解更多文档提取视图控制器，请参考Document Picker Programming Guide.

给用户足够的信心，让他们相信除非主动取消或者删除，他们的成果会被随时妥善保存。如果你的应用帮助用户创建于管理文档，不能要求用户每次都能及时保存。无论是打开另一个文档或切换应用的时候，iOS应用都应当承担起帮助用户保存输入内容的责任。

如果你的应用的主要功能不是创造内容，但又允许用户查看或编辑信息，这种情况下你需要询问用户是否要保存修改。在这种场景下，比较好的做法是提供“编辑”按钮，点击后进入编辑状态，同时编辑按钮变成“保存”和“取消”按钮，这种变化可以提示用户当前处于编辑模式。“保存”可以保留修改内容，“取消”则退出编辑模式。

1.13.3 必要时提供可配置选项（Be Configurable If Necessary）

某些应用需要用户手动安装或设置选项，但是大部分应用不需要如此。一个好的应用可以让大部分用户快速上手，并通过主界面给用户提供便捷的调整体验的方式。

当你的应用在默认状态下就能满足大部分用户的期望，用户对设置的需求就减少了。如果你需要储存用户的基本资料，可以优先向系统请求和拉取相关信息，而不是上来就让用户自己填写它。如果你一定要提供用户鲜少用到的设置项，请参考App Programming Guide for iOS中的The Setting Bundle部分来了解如何在代码中定义它们。

尽可能在主UI中提供设置选项。如果这个设置项代表着用户一个基本任务，又或者用户在进行主线任务时有可能频繁改变设置，那么将设置项放在主UI中会很方便。如果用户只是偶尔才会用到设置项，那么可以将其放在独立的视图中。

如果应用内相关设置需要在系统设置中改变，帮助用户直接访问系统设置。尤其是，如果你要用一段文字来描述如何改变这个设置，比如“设置>隐私>定位服务”，倒不如直接放置一个按钮，点击后即可到达设置中的定位服务。想要了解如何实现，请参考 Settings Launch URL.

1.13.4 充分利用iOS技术（Take Advantage of iOS Technologies）

iOS提供了丰富的技术方式来支持用户完成他们所期望的各种任务和场景。这意味着在绝大多数情况下，将系统提供的技术整合到你的应用中，往往比自定义一种新的技术更为可靠。

某些iOS技术，比如多任务并行（Multitasking）与语音向导（VoiceOver）等等，是所有应用都应该包含的系统级特性。而另外一些技术是否整合到应用中，则取决于应用本身的功能性。比如处理门票和礼品卡的应用（Wallet）支持用户在应用内内购（In-App Purchase），展示应用内置广告（iAd Rich Media Ads）则可以整合 Game Center，同时支持iCloud.

本章英文原文访问地址：iOS Human Interface Guidelines

本章中文翻译PDF下载：点此下载

感谢你的阅读，本文由 腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。

注明出处格式：腾讯ISUX (http://isux.tencent.com/ios9-guideline-ch1.html)