IOS7界面设计规范
新浪微博：用户体验设计COLIN
一、为IOS7而设计
iOS7涵盖了以下3个方面的设计主题思想：
?依从：UI要帮助用户对内容进行理解和互动，但绝不能与内容产生竞争关系。
?清晰：任何字号的文字都要清楚易读，图标要精细且含义明确，装饰性元素要少而精，
且使用得当；聚焦于功能性的实现，并以此激发设计的进行。
?纵深：视觉外观的层次以及逼真的动画效果可以传达出界面的活力，使界面更容易被理
解，并提升用户的愉悦度。
天气应用，左图为iOS7，右图为iOS6。
无论你是在重新设计一款已有应用，还是在创建新产品，请考虑按照苹果官方重新设计内置
应用的方式来进行你的工作：
?首先，剥离所有的UI元素，使应用的核心功能呈现出来，并重新确认它们的相关性。
?然后，使用iOS7的设计主题去重新构建UI与用户体验。
?自始至终，要做好挑战传统惯例、质疑各种臆测的准备；将注意力聚焦在内容和功能上，
以此来推动每一个设计决策的制定。
（一）依从于内容
虽然明快而漂亮的UI以及流畅的动画效果是iOS7当中的体验亮点，但内容才是其真正的
核心。
下面这些方法将确保你的设计能够提升界面的功能性，并使其更好的依从于内容。
1．充分利用全屏空间
斟酌嵌入式结构及可视化的界面框架的用法，考虑能否将内容直接扩展至屏幕边缘。天气应
用就是个很好的例子：通过漂亮的全屏方式呈现当前的天气情况，用户能够立即发现最重要
的信息，而且每小时的气象数据也有充分的空间得以展示。
2．慎用拟物化的视觉元素
浮雕效果、渐变、阴影，这类视觉表现形式有时会使UI元素过于沉重，进而在视觉上喧宾
夺主，压倒内容。要聚焦于内容，让UI扮演辅助支援型的角色。
3．让半透明的视觉元素透露其背后的内容
半透明的视觉形式可以体现出当前操作对象周围的环境背景，使用户知道有更多的内容可
用。
（二）提供清晰的视觉效果
提供清晰的视效，这是确保使内容处于核心地位的又一种方式。下面这些方法可以使最重要
的内容及功能清晰易读、便于操作。
1．充分运用留白
留白可以使重要的内容及功能更加突出。同时，留白还可以传达出一种平静和稳定的感觉，
使应用看上去更加专注和高效。
2．通过色彩简化UI
一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息，并巧妙的暗示出元
素的可交互性。同时，它也可以为应用带来具有一致性的视觉主题。
3．使用系统字体，确保清晰易读
iOS7中的系统字体可以自动调整字间距及行高，使文字内容更加易读，在用户所选择的任
何字号下都表现良好。
4．拥抱无边框的按钮
与以往依靠浮雕效果暗示元素可交互性的方式不同，在iOS7中，我们可以选取含义准确的
标题文字，搭配一种关键色或系统色，来表达这是一个可交互的UI元素。新的通讯录应用
使用了系统提供的蓝色来告诉用户，屏幕上的多数内容是可以对交互动作做出响应的。
（三）利用纵深进行沟通
iOS7会在不同的层面上显示内容，以体现内容间的层级和位置关系，这有利于用户理解屏
幕上各种元素之间的关联。
文件夹在视觉表现形式上采用了半透明背景，并悬浮于主屏幕之上，这能使其中所包含的内
容与屏幕上的其他元素得以区分开来。
当用户在使用提醒事项应用中的某个条目时，其余的条目都会排列在界面底部的不同层面
上。要查看所有条目，用户需要展开这些层面，如下图所示。
新的日历应用当中使用了增强的动画过渡效果，可以在用户切换年、月、日视图模式时带来
到明显的纵深感。在下图所示的年份滚动视图中，用户可以立刻看到今天的日期，并能够执
行其他的相关操作。
当用户选择了某个月份后，年份视图会自动放大扩展，而月份视图则会从它的后面呈现出来。
类似的动画效果还会发生在月份与日期的切换当中：月份视图向外扩展，呈现出日期视图。
二、IOS应用解析
几乎所有的iOS应用都会用到一些由UIKit框架所定义的UI控件。对这些基本控件的名称、
角色和作用加以了解，你将能更好的在打造界面的过程中做出正确合理的设计决策。
UIKit框架提供的UI元素可以分为4大类：
?栏(Bars)：包含与上下文内容情境相关的信息，告诉用户他们在应用当中所处的位置；
同时还包含相关的导航功能，或是可以由用户发起的操作。
?内容视图(Contentviews)：包含当前应用所特有的内容，并支持相关的交互行为，例
如滚屏、插入、删除、对列表条目进行重新排序，等等。
?控制元素(Controls)：产生行为或显示信息。
?临时视图(Temporaryviews)：临时性的向用户呈现重要信息，或提供额外的功能及
选项。
除了定义UI元素以外，UIKit框架还定义了那些可以完成诸如手势识别、绘制、辅助支持、
打印支持等功能的对象。
从编程的角度来讲，UI元素可以被看做是不同类型的视图(views)，因为它们都继承自
UIView类。一个视图知道怎样将它自己输出到屏幕上，知道怎样捕获用户在它的范围内执
行的点击行为。
要在应用中管理一组或一系列具有继承关系的视图，你通常需要使用视图控制器(view
controller)。视图控制器可以协调不同视图的显示方式，在用户发起行为后执行相应的功能，
并且对界面切换时所需的动画过渡效果进行管理。
下图展示了视图和视图控制器是怎样协同工作来呈现iOS应用界面的：
虽然开发者们习惯于从视图和控制器的角度来思考问题，但用户只会将应用看做是由一个个
界面所组成的整体。从这个角度讲，每一“屏”都对应着应用中的一个明确的视觉状态或模
式。
注意：每个iOS应用都包含一个窗口(window)。与桌面应用中的概念有所不同，iOS中的
窗口没有真正的可视部分，而且不能从屏幕上的一个地方移动到另外一个地方。多数iOS
应用只有一个窗口；那些支持外接显示设备的应用会有多个窗口。
iOS界面设计规范当中会用到“屏(screen)”这个词，因为它能被多数用户所理解。作为开
发者，你可能还会在其他不同的上下文当中读到“屏”的概念，例如被用来指代UIScreen
对象(用于访问外界显示设备)。
三、启动与退出
（一）即刻启动
一般情况下，用户可以在一到两分钟内对一款应用做出评估。如果你能利用这段时间迅速地
呈现最有用的内容，就能充分激发新用户的兴趣，并且给所有用户带来出众的体验。
重要：绝不要在用户安装好你的应用之后告诉他们需要重启设备。重启需要花费时间，而且
会让你的应用看起来非常难用且不可信赖。
如果出于内存使用或其他方面原因，使你的应用确实只有在设备重启之后才能正常工作，那
么你需要首先解决这类问题。请参考iOS应用开发指南中的“高效地使用内存”。
尽可能地避免使用无意义的启动画面(欢迎画面)或其他类似的启动体验。最好让用户在启动
你的应用之后可以立刻开始使用。
推荐的模式(左图)与不推荐的模式(右图)
应用安装完成后，不要让用户必须进行设置才能使用。取而代之地：
?将解决方案聚焦在80%的用户需求上。这样，多数用户不需要进行任何设置就可以开
始使用，因为默认参数可以确保应用能够按照这部分用户所期望的那样进行工作。
?尽可能地从其他来源获取信息。如果用户在iOS内置应用或系统设置当中输入的信息
可以为你所用，那么就尽量向系统查询这些信息，不要再让用户输入一遍了。
?如果确实需要用户进行安装设置，尽量让他们在你的应用内部进行输入。然后，尽快储
存这些信息(例如在应用的设置项当中)。这样，用户在享受你的应用之前就不需要被迫
切换到iOS的设置当中了。如果他们将来需要修改这些信息，可以在任何时候进入应
用设置当中进行操作。
尽可能晚些让用户登录。比较理想的状况是，让用户在不登录的情况下也能在应用当中尽量
多的浏览内容，并使用部分功能。如果在用户上手你的产品之前就强迫他们登录，则会导致
启动流程变得累赘拖沓。
一般来说，要按照默认的屏幕定向方式启动应用。对于iPhone，竖屏是默认的定向方式，
而对于iPad来说，设备当前所处的状态就是其默认定向方式。如果你的应用只能在横屏模
式下运行，那么要始终以横屏状态启动，让用户在必要的时候自己调转设备的方向。
最好让横屏应用能够同时支持两种模式的横屏，也就是Home按键分别在左侧和右侧的状
况。如果设备当前已经处于横屏状态，那么横屏应用就应该按照当前的定向方式加载，除非
你有充分的理由不这样做。在其他情况下，可以按照Home按键在右侧的方式加载横屏应
用。
可以提供一张与应用首屏看上去几乎一致的启动图片，iOS会在应用被打开的同时即刻展现
这张图片，这可以让用户觉得你的应用加载起来非常快，降低对等待时间的感知，使真正的
内容有相对充裕的时间可以进行加载。可以参考启动图片了解相关的实现方法。
如果可能，不要让用户在初次加载应用时阅读免责声明或必须对用户协议进行确认。你可以
直接在AppStore当中展示这些内容，使人们在下载应用之前就能有所了解；不过，虽然
这种方式通常能最大限度的减少麻烦的产生，但也不是一直可行的。如果在某些情况下你必
须在应用内提供这类内容，那么要确保这些内容与整体UI保持和谐统一，与产品实际的业
务功能带来的用户体验达成平衡。
在应用重启后，要恢复到用户退出时的状态，让他们可以中断的地方继续使用。不要让用户
必须记住之前是通过怎样的步骤到达退出时的状态的。可以参考状态的维持与重置来了解相
关的实现方法。
（二）时刻准备着退出
iOS应用永远不会有用来执行关闭或退出的操作。用户退出一个应用的方式就是切换到另外
一个应用、回到系统主界面，或是使设备进入睡眠模式。
当人们从你的应用切换到其他地方，iOS的多任务机制就会将它转至背景当中，并使用其他
应用的UI替换掉当前的。为了应对这种情况，你的应用应该具备以下能力：
?及时地、尽可能频繁地保存用户数据，因为处于背景状态的应用随时都可能被终结。
?退出时，尽可能在细节层面保存当前状态，使用户回到你的应用之后不会失去之前的上
下文状态。例如，如果你的应用包含可滚动的数据列表，那么在退出时要保存当前的列
表位置。
有些应用即使处于背景状态也需要保持工作，譬如，用户会希望在查看待办事项或玩游戏时
让另外一款应用继续播放音乐。可以参考多任务来了解怎样正确而优雅的处理这种情况。
永远不要以程序化的方式自动退出iOS应用，因为用户有可能将这种情况误解为程序崩溃。
如果出于某些原因，你的应用无法按照预期正常的工作，你需要告诉用户当前的状态，并让
他们了解自己能够做些什么。取决于问题的严重性，你有两种选择：
?通过一个能够吸引用户注意力的界面描述当前问题，并提出执行建议。使用这样的界面
作为反馈，可以让用户了解到应用本身并没有出现问题。这样还可以将主动权交还给用
户，让他们决定执行矫正性的行为并继续使用应用，或是切换到其他应用。
?如果只有一部分功能不可用了，那么可以在用户用到这些功能的时候，通过一个单独的
界面或是弹出提示(alert)来告诉他们当前的情况。只在用户所访问的功能确实无法工
作的时候再使用弹出提示。
四、布局
布局所关乎的远不止“界面元素在屏幕上看上去如何”这么简单。通过布局，你可以让用户
知道哪些东西是最重要的，他们有哪些事情可做，内容之间具有怎样的关联。取决于设备类
型及横竖屏定向方式，同一款应用的界面布局也可能会有不同的模式。
确保交互元素具有足够大的尺寸，以便用户可以很容易的与内容和功能进行互动。可点击对
象的实际点击区域尽量不小于4444像素。
将重要的内容和功能放在权重更高的位置上，使用户的注意力可以更好的聚焦在主要任务
上。通常，将最重要的元素放在前半屏是比较好的做法，另外，对于阅读习惯是从左到右的
用户来说，更贴近屏幕左侧的位置也是更容易引起关注的。
利用视觉表现形式的权重和平衡，向用户展示界面元素之间的相对重要程度。尺寸较大的元
素拥有更高的权重，相比于尺寸较小的元素来说，更能吸引目光，看上去也更加重要。
通常情况下，要防止UI元素在外观上具有不统一的表现形式。尽可能让具有相似功能的元
素同时具有相似的外观。人们一旦留意到不一致的外观表现，就很容易假设这背后是有原因
的，并倾向于花费时间去搞清楚这种差异究竟代表什么。
确保界面中的主要内容在默认尺寸下可以被阅读和理解。不要让用户必须横向滚屏才能看到
完整的文字内容，或是必须执行放大操作才可以看清楚内容图片。
五、导航
人们在使用应用时，通常不会感知到导航的存在，除非导航带来的体验没有达到他们的预期。
而你的工作，就是以符合产品整体架构及目标的方式打造出不会被用户察觉到的导航机制。
总体上讲，导航可以分为三种类型，其中每一类都能很好的适用于一种特定类型的应用：
?树形信息结构的应用
?扁平化信息结构的应用
?由内容或体验所驱动的应用
某些情况下，几种不同风格的导航可以很好的整合在同一款应用当中。例如，扁平化信息结
构的应用当中，某个分类里的信息也许可以很好的通过树形结构来呈现出来。
无论采用哪种风格的导航，最重要的是，要确保用户在内容当中的行进路径符合逻辑、可以
预知、容易跟随。用户应该始终能够了解自己在应用当中所处的位置，以及怎样行进到下一
个目标位置。
通过UIKit框架当中定义的一些标准UI控件，你可以很轻松的创建树形导航或扁平化结构
的导航。此外，还有一些控件可以帮你创建以内容为中心的导航模式，例如很多图书风格或
媒体浏览方面的应用当中所使用的那样。而那些围绕着体验来打造导航的应用，譬如游戏，
通常都会使用订制化的UI元素及交互行为模式。
通过导航栏(navigationbar)，为用户提供一种能够轻松的在树形信息结构当中前后行进
的导航方式。导航栏的标题通常用来向用户展示当前界面在信息结构当中所处的位置，回退
按钮可以帮助用户回到上一级结构。请参考导航栏一节，了解更多详情。
通过标签栏(tabbar)展示整体内容或功能之下的若干个同级分类项。标签栏可以很好的支
持扁平化的信息结构，因为无论用户当前处于哪个界面，都可以直接在若干类别当中进行切
换。请参考标签栏一节，了解更多详情。
通过分页控件(pagecontrol)来暗示多个条目或内容视图的存在。该控件可以有效的向用户
展示内容单元的数量，以及当前所见的这一条在队列中的位置。请参考分页控件一节，了解
更多详情。
注意：虽然工具栏(toolbar)在外观样式上与导航栏或标签栏很相似，但它不能用来承载导
航方面的功能。要通过工具栏为用户提供那些针对当前上下文内容的功能操作。
一般来讲，最好让每个界面都有唯一的入口。如果用户可以在不同的上下文当中访问到同一
个界面，那么请考虑使用一种临时化的视图，例如模态视图(modalview)、动作表单(action
sheet)或是警告提示(alert)。请参考模态视图、动作表单、警告提示，了解更多详情。
六、模态情境
模态，一种用来承载特定内容、功能或体验的模式，有其自身的优缺点。它可以帮助用户完
成某些任务，或在不受干扰的情况下获取信息，但会暂时性的强迫用户停止与应用其他部分
的互动。
理想情况下，用户应该能够通过非线性的方式与iOS应用进行互动，所以最好尽可能的精
简应用当中的模态体验。通常，仅在这些情况下考虑创建模态情境：
?非常有必要吸引用户的注意力。
?必须完成某些任务，或明确的放弃某项操作，否则用户数据将进入不稳定的状态。
保持模态任务的简单、简短、易聚焦。不要将模态视图打造的好像是嵌在应用当中的迷你应
用。如果模态视图中的子任务过于复杂，人们很容易忘记进入模态视图之前的主任务是什么。
在创建那些包含树形视图结构的模态任务时要特别小心，因为这种形式很容易使人们产生迷
失感，忘记回退的步骤。如果你的模态任务当中必须包含那些需要通过不同的视图来呈现的
子任务，那么一定要给用户提供单一且清晰的信息结构路径，避免产生循环。请参考模态视
图一节，了解更多详情。
始终提供一种明显而安全的退出方式。要确保用户在退出模态视图时，能够对接下来要发生
的事情有明确的认知。
如果主任务需要一系列层级化的模态视图，那么要确保用户知道当他们在模态视图中点击
“完成”按钮后会发生什么。检查任务流程，以确定次级模态视图当中的“完成”按钮究竟
是用来完成一部分任务的，还是用来完成整个模态任务的。鉴于有可能产生的困惑，尽量避
免在次级模态视图中使用“完成”按钮。
使用警告框来传递那些必不可少的重要信息，通常还要提供可执行的功能选项。警告框会中
断产品的体验流程，用户必须执行一次点击才能将其关闭掉，所以一定要让用户了解到这种
干扰的出现是有正当理由的。请参考警告框一节，了解更多详情。
尊重用户对于是否接收通知信息所做的设定。在iOS的“设置”当中，用户会设定希望以
怎样的方式接收通知。要确保你的应用能够遵守这些设定，以防用户一怒之下关闭掉所有来
自你的应用的通知信息。
七、交互性与反馈
（一）用户习惯于标准手势
人们会使用诸如点击(轻按)、拖拽、开合等手势与iOS设备及应用进行互动。手势能够在人
与设备之间建立起更人性化的关联，增强用户对于直接操作(directmanipulation)的感知。
通常，人们会希望所有应用当中的手势操作模式都保持一致，例如：
?通过点击(tap)来按压或选择一个对象。
?通过拖拽(drag)来滚屏或移动对象(将其从界面一边拖向另一边)。
?通过滑动(flick)来快速滚屏或移动对象。
?使用一个手指进行轻扫(swipe)，可以展现更多内容，例如列表视图中的删除按钮、分
隔视图(iPad)中的隐藏视图，或是从界面顶端展开通知中心。另外在iPad中，可以通过
四指轻扫的手势在不同应用之间进行切换。
?通过双击(doubletap)将内容或图片放大并置于屏幕中央；如果当前内容已呈放大状
态，则将其缩小至默认尺寸。
?通过双指张开(pinchopen)或闭合(pinchclose)对内容进行放大或缩小。
?通过长按(Touchandhold)在可编辑或可选择的文字上显示放大镜，用来定位光标。
?通过摇晃(shake)机身执行撤销或重做的操作。
除了人们熟识的那些标准手势以外，iOS还定义了一些用于在系统全局层面进行操作的手
势，例如展开控制中心或通知中心。无论用户当前在使用什么应用，都可以直接通过这些手
势进行系统层面的操作。
不要为标准手势赋予不同的行为。除非你的应用是游戏，否则重新定义标准手势的用途会导
致用户产生迷惑，降低产品的易用性。
不要重复创建与标准手势具有相同作用的自定义手势。人们都习惯了标准手势的行为，他们
不会希望花时间学习新的手势却只能达到同样的效果。
可以将复杂的手势作为完成任务的快捷方式，而不是唯一的方式。尽可能为用户提供简单而
明显的方式来完成任务，哪怕需要额外的一两次点击。简单的手势可以让用户将注意力聚焦
在内容和体验上，而不是交互过程本身。
不要定义新的手势，除非你的应用是游戏。在游戏或是其他沉浸型应用当中，自定义手势可
以成为体验乐趣的一部分。但在那些帮助人们完成重要任务的应用里，最好使用标准手势，
这样人们就不需要时刻想着操作方式本身了。
对于iPad应用，要考虑使用多指手势。iPad的大屏幕带来了广阔的空间，可以更好的支持
多指手势，也就是同时使用超过一根手指进行的操作。虽然相对复杂的手势操作并不适用于
所有的应用，但对于那些人们会花很长时间来使用的，例如游戏或需要创建内容的应用来说，
多指手势是可以增强体验的。另外一定要记住，非标准手势的可发现性是较差的，不要让这
类手势成为完成任务的唯一方式。
（二）反馈有助于理解
iOS用户习惯于接收各种反馈。这些反馈可以帮他们了解应用当前的状态，发现接下来可以
做些什么，或是预计自己的操作会产生怎样的结果。UIKit框架所定义的控件和视图当中包
含了很多类型的反馈。
尽可能将状态或其他的相关反馈信息整合到UI当中。例如，邮件应用会在工具栏中显示更
新状态，如下图所示。
避免不必要的警告提示。警告是一种强力有效的反馈形式，但它只应用于传达最重要的信息，
并提供相关的后续操作选项。如果用户看惯了不包含重要信息的警告框，他们就会学会忽略
这些提示了。请参考警告框一节，了解更多详情。
（三）信息输入方式要简单易行
无论是点击控件元素还是使用键盘，输入信息都需要耗费用户的时间和注意力。如果你的应
用在帮助人们解决问题之前需要让他们进行太多的信息输入，他们就会感到受挫。
使用选择让输入更轻松。例如，你可以在某些地方使用列表视图或选择器(picker)来代替文
本输入框，因为对于多数人来说，选择比打字更容易。
在合适的情况下，从iOS获取信息。人们会在设备系统中存储很多信息，不要强迫他们再
次输入那些你能够在系统中获取到的信息，例如通讯录或日历信息。
给予用户有价值的反馈，来平衡向他们索取信息的要求。让用户了解付出与回报的关系，可
以使他们感受到产品的使用流程正在向前推进。
|
|
