超赞的IOS 8人机界面指南(1)：UI设计基础

 

　　今天这篇长文让人激动到手发抖，腾讯译者糖箔糊的心血译作，整篇2万多字，源自官方超详细的IOS 8人机界面指南，非常用心的作品，文字到位，逻辑清晰，保证任何一个细节读起来都能明白晓畅，趁着IOS 8 刚刚发布，赶紧提前学起来，千万记得收藏呦!

　　小技巧：Word 2013会自动检测目录，阅读模式下学习非常方便!

　　1.1 为iOS而设计（Designing for iOS）

　　iOS 的革新关键词如下：

　　遵从 ：UI能够更好地帮助用户理解内容并与之互动，但却不会分散用户对内容本身的注意力。

　　清晰 ：各种大小的文字应该易读，图标应该醒目，去除多余的修饰，突出重点，很好地突显了设计理念。

　　深度 ：视觉的层次和生动的交互动作会赋予UI新的活力，不但帮助用户更好理解新UI的操作并让用户在使用过程中感到惊喜。

　　无论你是重新设计一个现有的应用或是重新开发一个，请尝试下列方法：

　　首先，去除了UI元素，让应用的核心功能呈现得更加直接并强调其相关性。

　　其次，直接使用iOS的系统主题让其成为应用的UI，这样能给用户统一的视觉感受。

　　最后，保证你设计的UI可以适应各种设备和不同操作模式，这样用户可以在不同场景下舒适地享用你的应用。

　　在整个设计过程中，时刻准备着推翻先例，假设问题，并以重点内容和功能(为目标)来驱动每个细节设计。

　　1.1.1 以内容为核心（Defer to Content）

　　虽然明快美观的UI和流畅的动态效果是iOS体验的亮点，但内容始终是iOS的核心。

　　这里有一些方法，以确保你的设计能够提升你的应用功能体验并关注内容本身。

　　充分利用整个屏幕

　　天气应用是最好的例子：漂亮的天气图片充满全屏，呈现用户所在地当前天气情况这最重要的信息，同时也留出空间呈现了每个时段的气温数据。

　　尽量减少视觉修饰和拟物化设计的使用

　　 UI面板、渐变和阴影有时会让UI元素显得很厚重，致使抢了内容的风头。应该以内容为核心，让UI成为内容的支撑。

　　尝试使用半透明底板

　　半透明的控件——比如控制中心——关联了使用场景，帮助用户看到更多可用的内容，并可以起到短暂的提示作用。在iOS中，透明的控件只让它遮挡住的地方变得模糊——看上去像蒙着一层米纸一样——它并没有遮挡屏幕剩余的部分。

　　1.1.2 保证清晰度（Provide Clarity）

　　保证清晰度是另一个方法，以确保你的应用中内容始终是核心。以下是几种方法，让最重要的内容和功能清晰，易于交互。

　　使用大量留白

　　留白让重要内容和功能显得更加醒目。此外，留白可以传达一种平静和安宁的视觉感受，它可以使一个应用看起来更加聚焦和高效。

　　让颜色简化UI

　　一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个应用一个统一的视觉主题。内置应用使用家族化的系统颜色，无论在深色和浅色背景上看起来都干净，纯粹。

　　通过使用系统字体确保易读性

　　iOS的系统字体自动调整行间距和行的高度，使阅读时文本清晰易读，无论何种大小的字号都表现良好。无论你是使用系统或是自定义字体，务必使用动态型，这样你的应用可以在用户选择不同字号时做出应对。

　　使用无边框的按钮

　　默认情况下，所有bar上的按钮都是无边框的。在内容区域，无边框按钮以文案、颜色以及操作指引标题来表明按钮功能。当按钮被激活时，该按钮呈现高亮的浅色状态来作为操作响应。

　　1.1.3 用深度来体现层次（Use Depth to Communicate）

　　iOS经常在不同的层级上展现内容，用以表达分组和位置，并帮助用户了解在屏幕上的对象之间的关系。

　　通过使用一个在主屏幕上方的半透明背景浮层来区分文件夹和其余部分的内容。

　　备忘录以不同的层级展示，如插图所示。用户在使用备忘录里的某个条目时，其他的条目被收起在屏幕下方(译者按：其实这个视觉提示使用起来很隐晦)。

　　日历有较深的层级，当他们在翻阅年、月、日的时候，以及增强的交互动画给用户一种层级纵深感(循序切换的层次，从年到月到日)。在滚动年份视图时，用户可以即时看到今天的日期以及其他日历任务。当用户处于月份视图时，点击年份视图按钮，月份会缩小至年份视图中的所处位置。

　　今天的日期依然处于高亮状态，年份出现在返回按钮处，这样用户可以清楚地知道他们在哪儿，他们从哪里进来并且知道如何返回。

　　类似的过渡动画出现在用户选择一个日期时：月份视图从所选位置分开，将当前的周日期推向屏幕顶端并翻转出以小时为单位的当天时间视图。这些动画加强了日历上年月日之间的关系的感知度。

　　1.2 iOS应用解析（iOS App Anatomy）

　　几乎所有的iOS 应用都应用了UIKit framework中定义的组件。了解这些组件的名字，作用和构成能够帮助你设计应用过程中做出更好的决定。

　　UIKit提供的UI组件大致分成以下4种大类：

　　Bars ： 包含了导航信息，告诉用户他们所在的位置并包含了一些能帮助用户浏览或启动某些操作的控制按钮。

　　内容视图： 包含了应用的主体内容以及某些操作行为，比如滚动、插入、删除、排序等等。

　　控制按钮： 展示信息或者控制动作。

　　临时视图： 短时间出现，给用户重要信息或者额外的选择或者其他功能。

　　除了定义UI组件，UIKit也定义对象实现的功能，例如手势识别、绘图、辅助功能和打印支持。

　　从编程的角度来说，UI组件被认为是不同类别的视图，因为他们从UIView得到继承。视图能绘制屏幕内容并且知道用户何时触摸了屏幕。视图的所有类型有：控件(比如按钮和滑块)，内容视图(比如集合视图和表格视图)，以及临时视图(如警告提示和动作菜单)。

　　要在应用中管理一组或者一系列的视图，通常需要使用一个视图控制器，它能协调视图的显示内容，实现与用户交互的功能并能在不同屏幕内容之间切换。比如，“设置”使用了一个导航控制器来展示其视图层级。

　　下面是一个例子，关于视图与视图控制器如何结合并呈现iOS 应用的UI。

　　虽然开发者认为真正起到作用的是视图和视图控制器，但一般用户感知到的iOS应用是不同屏幕内容的集合。从这个角度来看，在应用里，屏幕内容一般对应于一个独特的视觉状态或者模式。

　　注：一个iOS应用程序包含一个窗口。但是，不同于计算机程序中的窗口，iOS窗口没有可见的部分并且不能在屏幕上被移动到另一个位置。很多iOS应用程序只有一个窗口;可以支持外部显示设备器的应用程序可以有不止一个窗口。

　　在iOS Human Interface Guidelines中，screen这个词和大部分用户理解的一样。作为一个开发者，你也许需要读一下其他与UIscreen相关的章节，这样你可以更好的了解如何关联外部屏幕。

　　1.3 适应性和布局（Adaptivity and Layout）

　　1.3.1 为自适应而开发

　　人们通常想随心所欲地使用自己喜欢的应用程序。在iOS 8及未来的版本中，你可以使用不同分辨率和自动布局来帮助你定义屏幕布局视图，视图控制器以及需要随显示环境改变的视图(显示环境display environment的概念指的是设备的整个屏幕或者其中一部分，比如一个跳出菜单区域或一个分视图控制器的主视图部分)。

　　iOS定义了两个尺寸类别(size class)，常规的(regular)和压缩的(compact)。常规尺寸有着较易拓展的空间，而压缩尺寸约束了空间的使用。想要定义一种显示环境，你需要定义横纵尺寸类型。如你所想，iOS设备可以有横屏竖屏两种不同的使用模式。

　　iOS能随着显示环境和尺寸类别变化而自动生成不同布局。举个例子，当垂直尺寸从压缩变为常规时，导航栏和工具栏会自动变高。

　　当你靠尺寸类别来驱动布局变化时，你的应用在任何显示环境时都能显示得很好。关于如何在Interface Builder中更好的使用尺寸类别，你可以查阅 Size Classes Design Help。

　　注： 在一种尺寸类别中，持续使用Auto Layout进行小的布局调整，比如拉伸或压缩内容。

　　下面的实例可以帮助你理解尺寸类型是如何适配不同设备的显示环境。例如：iPad在长宽和横屏竖屏时都使用常规尺寸类型。换句话说，iPad显示环境一直处于垂直和水平的常规状态。

　　iPhone的显示环境可根据不同的设备和不同的握持方向而改变。

　　竖屏时，iPhone6 Plus使用的是常规高度和压缩宽度类型。

　　横屏时，iPhone6 Plus使用的是压缩高度和常规宽度类型。

　　其他iPhone型号，包括iPhone6使用相同的尺寸类型设置。

　　竖屏时，iPhone 6，iPhone 5 和iPhone 4S使用的是压缩宽度和常规高度。

　　横屏时，这些设备在宽高上使用的都是压缩类。

　　1.3.2 在不同环境提供良好体验

　　当你使用自适应来开发UI时，你可以保证UI跟随显示环境变化而适当地响应。遵照这些指南，你可以给用户良好的设备响应体验。

　　在所有环境下都保持对主体内容的专注

　　这是最高优先级。人们使用应用时，与感兴趣的内容发生互动。当使用环境变化的同时，改变专注点会让用户感觉到迷失方向，丧失了对应用的控制。

　　避免布局上不必要的变化

　　在所有环境中类似的使用体验让人们在旋转设备或在不同设备上运行你的应用时维持使用模式。例如，如果你使用一个网格在水平的常规模式下显示图像，你无需在一个列表中展示与压缩模式下相同信息，虽然你可能调整了网格的尺寸。

　　如果你的应用 只在一个方向上运行，那么请直接一点

　　人们希望在各种握持方式下都可以使用你的应用，能满足这个期待是最好的。但是，如果你的应用只在一个方向下运行，那么以下几点请务必注意：

　　避免提示人们旋转设备的提示UI出现。让应用清晰地运行在支持的方向下，让用户明白应该旋转设备，而不是添加不必要的引导性混乱。

　　支持同一个方向上的变化。例如，如果一个应用只能垂直运行，用户无论用左手或是右手握持时都能触及到home键。如果用户在使用应用时180度旋转设备，那最好应用内容也能及时响应并旋转180度。

　　如果你的应用 将设备方向翻转视为用户输入（的一种指令），那么就按照程序设定的方式来响应设备翻转

　　举个例子，一个游戏让用户利用设备翻转来移动游戏中的部件，那么这个游戏应用本身(的UI)不能对翻转屏幕产生响应。在这种情况下，你必须关联两个需要变化的方向，并且允许人们在这两个方向切换直到他们开始(了解并执行)应用的主体任务。一旦人们开始执行主要任务，那就开始按程序设定的那样来响应设备的动作吧。

　　1.3.3 使用布局来沟通（Use Layout to Communicate）

　　布局包含的不仅仅是一个应用 屏幕上的UI 元素外观

　　你的布局，应该告诉用户什么是最重要的，他们的选择是什么，以及事物是如何关联起来的。

　　提升重要内容或功能，让用户容易集中注意在主要任务上

　　有几个比较好的办法是在屏幕上半部分放置主要内容，以从左到右的习惯，从靠近左侧的屏幕开始。

　　使用视觉化的重量和平衡向用户展示相关的屏显重要元素

　　大型控件吸引眼球，而比小的控件更容易在出现时被注意到。而且大型控件也更容易被用户点击，这让它们在应用中更加有用——就像电话和时钟(上面的按钮)——用户经常在容易分心的环境中能(正常)使用它们。

　　使用对齐来让阅读更舒缓，让分组和层次之间更有秩序

　　对齐让应用看起来整洁而有序，也让用户在专注于屏幕时更有空间，从而专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰，也让用户更容易找到某个控件。

　　确保用户能明白处于默认尺寸的首要内容的含义

　　例如，用户无需水平滚动就能看到重要的文本，或不用放大就可以看到主体图像。

　　准备好改变字体大小

　　用户期望大多数应用能有设置字号大小的功能。为了适应一些文本大小的变化，你也许需要调整布局;想要得到更多文本显示相关的信息，你可以查阅章节Text Should Always Be Legible.

　　尽量避免UI 上不一致的表现

　　在一般情况下，有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因，而且他们倾向于花时间去尝试(译者按：因此为了避免用户做无用的尝试所以建议类似功能外观一样)。

　　给每个互动的元素充足的空间，从而让用户容易操作这些内容和控件

　　常用的点按类控件的大小是44 x 44点(points)。