iOS7界面设计规范

from：http://beforweb.com/node/214

iOS7界面设计规范(1) - UI基础 - 为iOS7而设计

c7210 发表于 2013-06-15 16:07

4

今天开个新坑。其实老早就想做这事儿了。记得前一两年，苹果官方还会在开发者中心提供中文的HIG(Human Interface Guideline)，后来给没了；网上能够找到的中文版本不知是官方还是同行的自发翻译，总之要看最新的内容还是需要拿来官方的英文文档，估计多数朋友也是这样的。

那么就趁着iOS 7刚刚发布测试版本的时机，开始做这件事吧。之前一周里，到处都在传阅官方发布的新版设计文档，越来越多的人在自己的设备里安装了测试版本，可见大家的关注程度；所以说我爱这一行呢，有点大事小情的大家都能在第一时间反应起来。关于系统本身，毁誉参半吧，东西都摆在那里，建议自己玩玩看；我个人来说，只是觉得视觉风格太娘了；又能怎样呢，反正看看如今的世界，哪里不是漫山遍野的一派娘炮。扯远了。第一篇走起吧；先做着，回头整理出框架，也和《iOS Wow Factor全书自发编译》一样扔到侧边栏去做个固定的栏目好了。

重要：这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核，但并非最终版本，仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的，是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化，届时，你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。

译文最后更新时间：2013-06-15

iOS7涵盖了以下3个方面的设计主题思想：

• 依从：UI要帮助用户对内容进行理解和互动，但绝不能与内容产生竞争关系。
• 清晰：任何字号的文字都要清楚易读，图标要精细且含义明确，装饰性元素要少而精，且使用得当；聚焦于功能性的实现，并以此激发设计的进行。
• 纵深：视觉外观的层次以及逼真的动画效果可以传达出界面的活力，使界面更容易被理解，并提升用户的愉悦度。

天气应用，左图为iOS7，右图为iOS6。

无论你是在重新设计一款已有应用，还是在创建新产品，请考虑按照苹果官方重新设计内置应用的方式来进行你的工作：

• 首先，剥离所有的UI元素，使应用的核心功能呈现出来，并重新确认它们的相关性。
• 然后，使用iOS7的设计主题去重新构建UI与用户体验。
• 自始至终，要做好挑战传统惯例、质疑各种臆测的准备；将注意力聚焦在内容和功能上，以此来推动每一个设计决策的制定。

依从于内容

虽然明快而漂亮的UI以及流畅的动画效果是iOS7当中的体验亮点，但内容才是其真正的核心。

下面这些方法将确保你的设计能够提升界面的功能性，并使其更好的依从于内容。

充分利用全屏空间

斟酌嵌入式结构及可视化的界面框架的用法，考虑能否将内容直接扩展至屏幕边缘。天气应用就是个很好的例子：通过漂亮的全屏方式呈现当前的天气情况，用户能够立即发现最重要的信息，而且每小时的气象数据也有充分的空间得以展示。

慎用拟物化的视觉元素

浮雕效果、渐变、阴影，这类视觉表现形式有时会使UI元素过于沉重，进而在视觉上喧宾夺主，压倒内容。要聚焦于内容，让UI扮演辅助支援型的角色。

让半透明的视觉元素透露其背后的内容

半透明的视觉形式可以体现出当前操作对象周围的环境背景，使用户知道有更多的内容可用。

提供清晰的视觉效果

提供清晰的视效，这是确保使内容处于核心地位的又一种方式。下面这些方法可以使最重要的内容及功能清晰易读、便于操作。

充分运用留白

留白可以使重要的内容及功能更加突出。同时，留白还可以传达出一种平静和稳定的感觉，使应用看上去更加专注和高效。

通过色彩简化UI

一种关键的颜色——例如备忘录应用中的黄色——可以突出重要信息，并巧妙的暗示出元素的可交互性。同时，它也可以为应用带来具有一致性的视觉主题。

使用系统字体，确保清晰易读

iOS7中的系统字体可以自动调整字间距及行高，使文字内容更加易读，在用户所选择的任何字号下都表现良好。

拥抱无边框的按钮

与以往依靠浮雕效果暗示元素可交互性的方式不同，在iOS7中，我们可以选取含义准确的标题文字，搭配一种关键色或系统色，来表达这是一个可交互的UI元素。新的通讯录应用使用了系统提供的蓝色来告诉用户，屏幕上的多数内容是可以对交互动作做出响应的。

利用纵深进行沟通

iOS7会在不同的层面上显示内容，以体现内容间的层级和位置关系，这有利于用户理解屏幕上各种元素之间的关联。

文件夹在视觉表现形式上采用了半透明背景，并悬浮于主屏幕之上，这能使其中所包含的内容与屏幕上的其他元素得以区分开来。

当用户在使用提醒事项应用中的某个条目时，其余的条目都会排列在界面底部的不同层面上。要查看所有条目，用户需要展开这些层面，如下图所示。

新的日历应用当中使用了增强的动画过渡效果，可以在用户切换年、月、日视图模式时带来到明显的纵深感。在下图所示的年份滚动视图中，用户可以立刻看到今天的日期，并能够执行其他的相关操作。

当用户选择了某个月份后，年份视图会自动放大扩展，而月份视图则会从它的后面呈现出来。

类似的动画效果还会发生在月份与日期的切换当中：月份视图向外扩展，呈现出日期视图。

iOS7界面设计规范(2) - UI基础 - iOS应用解析

c7210 发表于 2013-06-16 00:12

7

今天再来一发，然后结束掉周六的忙碌，去吃零食，还有冰啤酒；其实现在打嗝还有小龙虾味儿呢。

第二篇更多的是从技术的角度对iOS界面组成原理进行了简单的解析，篇幅很短，可稍作了解；更多关于iOS开发入门的内容可参考“设计师应该了解的iOS应用开发基础知识”一文。另外，非常感谢各位朋友在微博上的支持与鼓励，不过有一点需要注意，目前做的这个版本(2013-06-15)并非iOS7设计规范的最终版；该版本的作用及注意事项详见下面的重要提示。

重要：这是针对于正在开发中的API或技术的预备文档(预发布版本)。虽然该文档在技术精确度上经过了严格的审核，但并非最终版本，仅供苹果开发者计划的注册会员使用。苹果提供这份机要文档的目的，是帮助你按照文中描述的方式对技术的选择及界面的设计开发进行规划。这些信息有可能发生变化，届时，你的设计开发方式需要基于最终版本的操作系统及文档进行相应的调整和测试。该文档或许会随着API或相关技术在未来的发展而进行更新。

译文最后更新时间：2013-06-15

几乎所有的iOS应用都会用到一些由UIKit框架所定义的UI控件。对这些基本控件的名称、角色和作用加以了解，你将能更好的在打造界面的过程中做出正确合理的设计决策。

UIKit框架提供的UI元素可以分为4大类：

• 栏(Bars)：包含与上下文内容情境相关的信息，告诉用户他们在应用当中所处的位置；同时还包含相关的导航功能，或是可以由用户发起的操作。
• 内容视图(Content views)：包含当前应用所特有的内容，并支持相关的交互行为，例如滚屏、插入、删除、对列表条目进行重新排序，等等。
• 控制元素(Controls)：产生行为或显示信息。
• 临时视图(Temporary views)：临时性的向用户呈现重要信息，或提供额外的功能及选项。

除了定义UI元素以外，UIKit框架还定义了那些可以完成诸如手势识别、绘制、辅助支持、打印支持等功能的对象。

从编程的角度来讲，UI元素可以被看做是不同类型的视图(views)，因为它们都继承自UIView类。一个视图知道怎样将它自己输出到屏幕上，知道怎样捕获用户在它的范围内执行的点击行为。

要在应用中管理一组或一系列具有继承关系的视图，你通常需要使用视图控制器(view controller)。视图控制器可以协调不同视图的显示方式，在用户发起行为后执行相应的功能，并且对界面切换时所需的动画过渡效果进行管理。

下图展示了视图和视图控制器是怎样协同工作来呈现iOS应用界面的：

虽然开发者们习惯于从视图和控制器的角度来思考问题，但用户只会将应用看做是由一个个界面所组成的整体。从这个角度讲，每一“屏”都对应着应用中的一个明确的视觉状态或模式。

注意：每个iOS应用都包含一个窗口(window)。与桌面应用中的概念有所不同，iOS中的窗口没有真正的可视部分，而且不能从屏幕上的一个地方移动到另外一个地方。多数iOS应用只有一个窗口；那些支持外接显示设备的应用会有多个窗口。

iOS界面设计规范当中会用到“屏(screen)”这个词，因为它能被多数用户所理解。作为开发者，你可能还会在其他不同的上下文当中读到“屏”的概念，例如被用来指代UIScreen对象(用于访问外界显示设备)。

即刻启动

一般情况下，用户可以在一到两分钟内对一款应用做出评估。如果你能利用这段时间迅速地呈现最有用的内容，就能充分激发新用户的兴趣，并且给所有用户带来出众的体验。

重要：绝不要在用户安装好你的应用之后告诉他们需要重启设备。重启需要花费时间，而且会让你的应用看起来非常难用且不可信赖。

如果出于内存使用或其他方面原因，使你的应用确实只有在设备重启之后才能正常工作，那么你需要首先解决这类问题。请参考iOS应用开发指南中的“高效地使用内存”。

尽可能地避免使用无意义的启动画面(欢迎画面)或其他类似的启动体验。最好让用户在启动你的应用之后可以立刻开始使用。

推荐的模式(左图)与不推荐的模式(右图)

应用安装完成后，不要让用户必须进行设置才能使用。取而代之地：

• 将解决方案聚焦在80%的用户需求上。这样，多数用户不需要进行任何设置就可以开始使用，因为默认参数可以确保应用能够按照这部分用户所期望的那样进行工作。
• 尽可能地从其他来源获取信息。如果用户在iOS内置应用或系统设置当中输入的信息可以为你所用，那么就尽量向系统查询这些信息，不要再让用户输入一遍了。
• 如果确实需要用户进行安装设置，尽量让他们在你的应用内部进行输入。然后，尽快储存这些信息(例如在应用的设置项当中)。这样，用户在享受你的应用之前就不需要被迫切换到iOS的设置当中了。如果他们将来需要修改这些信息，可以在任何时候进入应用设置当中进行操作。

尽可能晚些让用户登录。比较理想的状况是，让用户在不登录的情况下也能在应用当中尽量多的浏览内容，并使用部分功能。如果在用户上手你的产品之前就强迫他们登录，则会导致启动流程变得累赘拖沓。

一般来说，要按照默认的屏幕定向方式启动应用。对于iPhone，竖屏是默认的定向方式，而对于iPad来说，设备当前所处的状态就是其默认定向方式。如果你的应用只能在横屏模式下运行，那么要始终以横屏状态启动，让用户在必要的时候自己调转设备的方向。

最好让横屏应用能够同时支持两种模式的横屏，也就是Home按键分别在左侧和右侧的状况。如果设备当前已经处于横屏状态，那么横屏应用就应该按照当前的定向方式加载，除非你有充分的理由不这样做。在其他情况下，可以按照Home按键在右侧的方式加载横屏应用。

可以提供一张与应用首屏看上去几乎一致的启动图片，iOS会在应用被打开的同时即刻展现这张图片，这可以让用户觉得你的应用加载起来非常快，降低对等待时间的感知，使真正的内容有相对充裕的时间可以进行加载。可以参考启动图片了解相关的实现方法。

如果可能，不要让用户在初次加载应用时阅读免责声明或必须对用户协议进行确认。你可以直接在App Store当中展示这些内容，使人们在下载应用之前就能有所了解；不过，虽然这种方式通常能最大限度的减少麻烦的产生，但也不是一直可行的。如果在某些情况下你必须在应用内提供这类内容，那么要确保这些内容与整体UI保持和谐统一，与产品实际的业务功能带来的用户体验达成平衡。

在应用重启后，要恢复到用户退出时的状态，让他们可以中断的地方继续使用。不要让用户必须记住之前是通过怎样的步骤到达退出时的状态的。可以参考状态的维持与重置来了解相关的实现方法。

时刻准备着退出

iOS应用永远不会有用来执行关闭或退出的操作。用户退出一个应用的方式就是切换到另外一个应用、回到系统主界面，或是使设备进入睡眠模式。

当人们从你的应用切换到其他地方，iOS的多任务机制就会将它转至背景当中，并使用其他应用的UI替换掉当前的。为了应对这种情况，你的应用应该具备以下能力：

• 及时地、尽可能频繁地保存用户数据，因为处于背景状态的应用随时都可能被终结。
• 退出时，尽可能在细节层面保存当前状态，使用户回到你的应用之后不会失去之前的上下文状态。例如，如果你的应用包含可滚动的数据列表，那么在退出时要保存当前的列表位置。

有些应用即使处于背景状态也需要保持工作，譬如，用户会希望在查看待办事项或玩游戏时让另外一款应用继续播放音乐。可以参考多任务来了解怎样正确而优雅的处理这种情况。

永远不要以程序化的方式自动退出iOS应用，因为用户有可能将这种情况误解为程序崩溃。如果出于某些原因，你的应用无法按照预期正常的工作，你需要告诉用户当前的状态，并让他们了解自己能够做些什么。取决于问题的严重性，你有两种选择：

• 通过一个能够吸引用户注意力的界面描述当前问题，并提出执行建议。使用这样的界面作为反馈，可以让用户了解到应用本身并没有出现问题。这样还可以将主动权交还给用户，让他们决定执行矫正性的行为并继续使用应用，或是切换到其他应用。
• 如果只有一部分功能不可用了，那么可以在用户用到这些功能的时候，通过一个单独的界面或是弹出提示(alert)来告诉他们当前的情况。只在用户所访问的功能确实无法工作的时候再使用弹出提示

UI基础 - 布局

布局所关乎的远不止“界面元素在屏幕上看上去如何”这么简单。通过布局，你可以让用户知道哪些东西是最重要的，他们有哪些事情可做，内容之间具有怎样的关联。取决于设备类型及横竖屏定向方式，同一款应用的界面布局也可能会有不同的模式。

确保交互元素具有足够大的尺寸，以便用户可以很容易的与内容和功能进行互动。可点击对象的实际点击区域尽量不小于44*44像素。

将重要的内容和功能放在权重更高的位置上，使用户的注意力可以更好的聚焦在主要任务上。通常，将最重要的元素放在前半屏是比较好的做法，另外，对于阅读习惯是从左到右的用户来说，更贴近屏幕左侧的位置也是更容易引起关注的。

利用视觉表现形式的权重和平衡，向用户展示界面元素之间的相对重要程度。尺寸较大的元素拥有更高的权重，相比于尺寸较小的元素来说，更能吸引目光，看上去也更加重要。

通常情况下，要防止UI元素在外观上具有不统一的表现形式。尽可能让具有相似功能的元素同时具有相似的外观。人们一旦留意到不一致的外观表现，就很容易假设这背后是有原因的，并倾向于花费时间去搞清楚这种差异究竟代表什么。

确保界面中的主要内容在默认尺寸下可以被阅读和理解。不要让用户必须横向滚屏才能看到完整的文字内容，或是必须执行放大操作才可以看清楚内容图片。