IOS人机界面指南：UI设计基础2

1.8 动画（Animation）

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

传达状态和提供反馈

增强直接操作的感觉

帮助人们可视化他们的操作结果

谨慎地增加动画，特别是在那些无法提供沉浸性体验的应用中。看起来过多的无理由的动画会阻碍应用的流畅性，降低性能，还会分散用户在任务中的注意力。尤其要说的是，要有目的和限制性地使用运动效果和UI组件中的动态行为，并确保对结果进行测试。一旦被合理的使用，这些效果能提高用户的理解度和愉悦度；过度使用他们则会使应用看起来很迷惑，很难控制。

在合适的时候，使自定义的动画与内置动画保持统一。人们习惯于谨慎添加动画，尤其是在那些不能提供沉浸式用户体验的应用中。如果应用主要关注一些严肃的任务或者生产性任务，那么动画就显得多余了，还会无端打乱应用的使用流程，降低应用的性能，让用户从当前的任务中分心。

开发者的自定义动画应该切合内置iOS应用的动画。用户习惯于内置iOS 应用使用的精细动画。事实上，用户趋向于把视图之间的平滑转换，对设备方向改变的流畅响应和基于物理力学的滚动效果看作是iOS体验的一部分。除非你的应用能够给用户沉浸式的体验–比如游戏–自定义动画应该可以与内置应用的动画相媲美。

使用风格类型一致的动画。在应用中使用风格类型一致的动画非常重要，可以让用户构建基于使用应用获得的用户体验。

大多数情况下，恰当一点的做法是让自定义动画更具现实性。用户乐意于接受自由的艺术创作，但当你的动画违背物理定律和自然法则的时候，他们会感觉到非常迷惑。

1.9 品牌推广（Branding）

品牌推广并不仅仅是在应用中展示品牌的颜色和logo。理想状态下，你开发的某个特定品牌的应用应该通过创建独特的外观和感觉来为用户提供难忘的体验。

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

每个自定义的元素本身都需要具备良好的观感和功能性，但它也应该与应用中其他元素保持一致，无论应用中其他元素是自定义的还是标准的。

为了在iOS中感觉舒适，你的应用虽然不必看起来跟内置的一样，但是需要对它的遵从、清晰度和深度（如欲了解更多，参见1.1 为iOS而设计（Design for iOS））进行整合。花些时间弄清楚在你的应用中遵从、清晰和深度所代表的意味，并把它们在你的自定义元素中表达出来。

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

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

避免远离用户关心的内容。比如，在屏幕顶部展示一个二级栏目，仅用来展示品牌资产，这意味着内容没有足够的空间，可以考虑以其他低侵入性的方法无处不在地展示品牌，比如巧妙地定制屏幕的背景。

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

1.10 颜色与字体（Color and Typography）

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

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

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

注意在不同情境下的颜色对比。例如，如果在导航栏的背景与栏按钮标题之间没有足够的对比，按钮就会很难被用户看到。 依据经验的法则来说，需要区分的颜色必须至少存在50%的亮度差异。（我们）需要将设备置于不同的光照环境之中（包括晴朗的室外）来测试设备上的观感效果。

提示：一种发现需要更高对比度的区域的方法是降低UI的饱和度并在灰度模式下查看它。如果在灰度版本中你很难区分可交互与非可交互元素或背景等，你有可能需要增加这些元素之间的对比度。

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

API注释：使用浅色（TintColor）的属性值给予栏按钮颜色，使用栏浅色（BarTintColor）的属性值为栏本身赋色。欲了解更多关于栏属性的内容，可参见UINavigationBar Class Reference,，UITabBar Class Reference，UIToolbar Class Reference和 UISearchBar Class Reference。（译者注：相关章节翻译将在后续更新中放出，烦请各位耐心等候。）

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

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

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

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

1.10.2 文字应该清晰易读（Text Should Always Be Legible）

文字首先必须是清晰可辨的。如果用户不能看清楚应用中的字词，那么文字再好看也是没是无意义的。当你在你的应用中采用Dynamic Type时，你可以实现：

能自动调整文字的粗细，字母间距以及行高。

为语义上有区别的文本模块指定不同的文本样式，比如正文、脚注或者标题。

文本可以根据用户在动态文字和可访问性设置中指定字体大小的变化作出适当的响应。

注：如果你是用自定义字体，你仍然可以依据系统的字号设置来规划字体范围。当用户改变设置时，你的应用也必须响应式的配合。

就你而言，要采用Dynamic Type需要一些工作。为了学习如何使用文字样式并确保当用户改变文字型号设置时你的应用能够获取通知，可以参考Text Styles in Text Programming Guide for iOS。（译者注：相关章节翻译将在后续更新中放出，烦请各位耐心等候。）

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

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

在适当的情况下，当用户选择一个不同的文本尺寸时要调整页面布局。例如，当用户选择小的文本尺寸时，你可能想将内容由一列的布局方式改为两列。如果你决定根据不同的文本尺寸调整布局，你可以选择针对尺寸的子集来实现——如包含小，中和大尺寸——而不是对于每个可能的尺寸都进行布局的调整。

确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下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 栏图标（Bar 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%

。

你不会希望在你的应用中看到拉伸和变形的图片。可以让用户自己来选择他们是否想要缩放图片。

不要使用带有苹果符号与版权的图片。这些符号都拥有版权，并且产品的设计可能会经常改变。

1.11.3 图形（Graphics）

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

支持

Retina

显示屏。

确保你应用中的所有图片资源都提供了高分辨率规格。尤其需要注意的是，iPhone 6 Plus需要提供@3x规格的图片，而所有其他的高分辨率iOS设备都需要提供@2x规格的图片。

显示照片或图片时请使用原始尺寸，并不要将它拉伸到大于

100%

。

你不会希望在你的应用中看到拉伸和变形的图片。可以让用户自己来选择他们是否想要缩放图片。

不要使用带有苹果符号与版权的图片。这些符号都拥有版权，并且产品的设计可能会经常改变。

1.12 术语和措辞（Terminology and Wording）

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

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

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

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

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

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

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

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

修正所有的拼写、语法与标点符号错误。

这些小错误也许不会影响用户正常使用，但是可能会让他们对应用的整体品质产生负面印象。

尽量少用全大写的词汇。

虽然大写单词有时候可以吸引注意力，但是全大写的段落不适合阅读，而且会产生一种朝用户扯着嗓子吼的感觉。

可以描述

bug

修复情况。

如果你的应用新版包含用户一直期待的bug修复，那在你的软件描述中提到这一点就是个很好的做法。

1.13 与iOS的整合（Integrating with iOS）

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

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

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

尽可能使用UIKit提供的标准UI元素。多使用标准元素而非自定义元素，你与你的用户都将受益：

标准UI元素会根据iOS官方的更新而自动更新——而自定义元素不会。

标准UI元素对于你自定义外观和行为来说拥有优秀的扩展性。举个例子，iOS中所有的视图（Views）都是可自定义颜色的，它让应用配色变得很简单。想要了解更多如何给UI元素定义颜色，可以参考

iOS 7 UI Transition Guide

中

Using Tint Color

的相关章节。

用户更熟悉和习惯标准的元素，因为这对于他们来说没有学习成本，他们可以立刻明白这些元素的用途。

想要充分地利用标准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元素的属性和行为之后，这个元素仍然能完成你所希望的操作。

 

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

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

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

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

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

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

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

高度图形化。

用户通过屏幕上的缩略图就可以一目了然，快速找出自己想要的文件。

让用户用最少的动作完成自己的任务。

比如说，用户可以快速地水平滚动文件列表，然后轻点一下自己想要的文件来打开它。

包含新建文档功能。

一个图形库视图应该支持让用户点击一个新建文档的占位图便完成新建文档操作，而不是让用户通过访问别的地方来新建文档。

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

如果你的应用允许用户使用在其他应用中创建的文档，你可以通过模态文档选择视图控制器(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中会很方便。如果用户只是偶尔才会用到设置项，那么可以将其放在独立的视图中。

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

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

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

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

 出处：腾讯ISUX (http://isux.tencent.com/ios8-human-interface-guidelines.html)

PDF下载地址：http://pan.baidu.com/s/1mg27rCW