iOS平台设计规范（七）视图-Views

无论是UI、交互，还是产品经理，都应该熟读iOS平台设计规范。这对我们的产品设计，百利而无一弊。

视图（Views）

一、操作表（Action Sheets）

操作表是响应控件或操作而显示的特定警示样式，它显示一组与当前上下文相关的两个或多个选项。用户使用操作表开始执行任务，或者在用户进行潜在破坏性操作前请求确认。

在小的屏幕上，操作表从屏幕底部向上滑入；在大的屏幕（例如iPad）上，操作表则以弹出窗口的形式出现。

1、为了让操作表更好理解，可以加一个“取消”按钮

当用户想放弃这些任务时，“取消”按钮会更有安全感。“取消”按钮应展示在屏幕的底部。

2、将有破坏性的选项突出显示

使用红色按钮执行破坏性或危险操作，并在操作表的中置顶。

3、不要在操作表中启用滚动

如果操作表的选项太多的话，用户必须滚动才能看到所有选项。但滚动需要用户额外花时间来做出选择，而且很容易造成误点。

二、活动视图（Activity Views）

活动视图通常出现在当前上下文中，而活动便是一项任务，例如复制、收藏、查找。一旦启动，活动可以立即执行任务，或者在之前页面的基础上访问更多信息。活动由活动视图管理，以工作表或弹出窗口的形式显示，具体取决于设备和方向。活动被用来给用户在APP中执行一些自定义服务或任务。

iOS系统提供了许多内置活动，包括Print、Message和AirPlay。这些任务总是首先出现在活动视图中，无法重新排序。你不必为执行这些内置任务而去创建自定义活动。活动视图还显示其他APP的共享和操作扩展。

1、设计简单的模板图像来表示自定义活动

模板图像使用Mask来创建图标。使用具有适当透明度和抗锯齿效果的黑白，并且不包括阴影。模板图像应集中在约70px×70px的区域中。

2、使用简单的标题来描述你的任务

标题显示在活动视图中的图标下方。短标题最好。当标题太长时，iOS首先缩小文本，然后如果标题仍然太长直接将其截断。

一般来说，请避免在标题中包含你的公司名称或产品名称。

3、确保活动适合当前上下文

虽然系统提供的任务无法在活动中重新排序，但如果它们不适用于你的APP，则可以将其屏蔽。例如：要阻止用户打印图像，你可以屏蔽“打印”活动。你还可以定义在任何给定时间，显示不同的自定义任务。

4、通过功能按钮显示活动视图

用户习惯在点击“功能”按钮时弹出活动视图。如果换成别的方式，难免让人困惑。

三、警示框（Alerts）

警示框主要用来传达与APP或设备状态相关的重要信息，并且通常会请求反馈。警示框由标题、可选消息、一个或多个按钮以及用于收集用户输入信息的可选文本字段组成。除了这些可配置的元素外，警示框的视觉外观是静态的，无法自定义的。

1、尽量少用警示框

警示框会破坏用户体验，只在重要情况下使用，例如确认购买和破坏性操作（例如删除）或通知用户相关问题。严格控制警示框的数量，有助于让用户更认真对待它。确保每个警示框都是提供关键的信息和有用的选择。

2、两个方向都要测试警示框

在横向模式和纵向模式下，警示框可能会有所不同。优化警示框文本，使其在任何方向上都无需滚动就能很好地阅读。

警示框标题和内容

1、编写简短的描述性多字警报标题

用户在屏幕上阅读的文字越少越好。可以尝试制作一个标题并且避免添加额外的信息。因为单字标题很少会提供有用信息，因此可以考虑提问的方式或使用短句。标题尽量不要超过一行。

如果标题是完整的句子，则句子使用更大的文本，并用适当的结束标点符号。如果标题是断句，则标题使用大文本，不需要添加结束标点符号。

2、保证警示框内容的句子完整、简短

试着让信息保持足够短，保持在一行或两行以防止滚动。句子使用更大的文本和适当的标点符号。

3、避免带有指责、批判或侮辱性的词语

用户知道警示框会通知他们有关问题和危险情况的信息。但是依然要使用友好的语气，因为积极正面的态度比消极负面的态度效果好很多。避免代词，例如你、你的、我和我的，这些代词有时被理解为侮辱或不尊重。

4、避免去解释警示框按钮的作用

如果你的警示框标题和按钮文本是清晰明确的，则无需解释按钮的功能。极少数情况下，你才要给出提示，提示中使用“点击”这个词，在引用按钮时用大文本，并且不要在提示中包含按钮标题。

警示框按钮

1、使用双按钮警示

双按钮警示框给予了用户一个比较容易的双选项的选择方式。单按钮通常只是告知信息，可操作性比较低。

但如果3个或更多按钮的话，会让警示框变得很复杂并且可能需要滚动，这是一种不友好的用户体验。如果2个按钮满足不了你的需求的话，你可以考虑使用操作表。

2、警示框按钮的标题要简单、合乎逻辑

最合适的按钮标题由一个或两个字组成，用于描述选择按钮后的结果。与所有按钮标题一样，标题样式使用大文本并且没有结束的标点符号。尽可能使用与警示框标题和警示框内容直接相关的动词和动词短语。

例如：查看全部、回复或忽略。使用”好的“也可以被接受，但不要使用”是“和”否“。

3、将按钮放在用户期望的位置

一般来说，用户最有可能点击的按钮应该在右边。取消按钮应始终位于左侧。

4、给“取消”按钮合适的称呼

取消警示框操作的按钮应该始终叫“取消”。

5、识别破坏性按钮

如果警示框按钮含有破坏性操作（例如删除内容），请将按钮的样式设计为“破坏性”（例如红色字体），以便系统进行适当的格式设置。

此外，提供“取消”按钮，以便用户可以安全地退出破坏性操作。将“取消”按钮作为默认按钮，并使用粗体文本。

6、允许用户通过Home键取消警示框

在显示警示框时点击Home键，可以退出APP。同时，还应该产生与点击取消按钮相同的效果 - 也就是说，警示框被取消了且不执行任何操作。

如果你的警示框没有“取消”按钮，请考虑实现这种取消警示框的方式，该操作只在用户退出APP时启用。

四、集合（Collections）

集合主要用来管理一系列有序的内容，例如一组照片，并以可自定义和高度可视化的布局呈现。因为集合没有强制执行严格的线性格式，所以它特别适合显示大小不同的项。

一般来说，集合非常展示基于图像的内容。可以选择性地呈现背景和其他装饰性的视图，用以区分项目的子集。

集合支持交互性和动画。默认情况下，你可以点按以选择、触摸并按住进行编辑，然后滑动进行滚动。

如有需要，还可以添加更多手势来执行自定义操作。在集合中，插入、删除或重新排序项目，都可以启用动画，并且还支持自定义动画。

1、当标准行或网格布局足够时，避免创建新的设计

集合应该是用来优化用户体验的，而不是成为关注的焦点。集合应该让用户松选择项目更方便。

如果在你的集合中很难找到某个条目，用户会感到沮丧并失去兴趣。在内容周围使用足够的填充，以保持布局整齐并防止内容重叠。

2、文本信息不适合用集合的方式展示，可以用列表

一般来说，在一个可滚动的列表中去展示文本信息，更简单、更有效。

3、谨慎进行动态布局变更

集合的布局可以随时更改。如果你在用户查看和与集合交互时，动态更改布局，请确保更改是有意义的，并且易于跟踪。

无意义的布局更改可能会使APP看起来不可预测且难以使用。如果由于布局改变而导致背景丢失，用户可能会觉得没办法操控APP了。

五、图像视图（Image Views）

图像视图是在透明或不透明背景上，显示的单个图像或动画图像序列。在图像视图中，图像可以被拉伸、缩放、调整大小以适合或固定到特定位置。默认情况下，图像视图是不可进行交互的。

如果可能的话，请确保动画序列中的所有图像大小一致。

理想情况下，应对图像进行预分类以适应视图，避免系统再进行任何缩放。如果系统必须执行缩放，那么所有图像具有相同的大小和形状时，最容易实现。

六、页面视图（Pages）

页面视图控制器提供了一种在内容页面之间实现线性导航的方式，例如在文档、书籍、记事本或日历中。页面视图控制器可以使用两种样式的任意一种，来管理导航滚动或卷页期间页面之间的转换。

滚动的过渡没有特定的外观，仅仅是页面流畅地从一个滚动到下一个。当你在屏幕上滑动时，页面的卷曲过度，就像现实生活中翻书时一样。

如果合适，尽可能实现一种非线性的导航方法。

使用页面视图控制器时，页面只能按顺序跳转，而跨页面之间是无法跳转的。如果用户想要不按顺序访问页面，你可以自定义控件来实现此功能。

七、浮层（Popovers）

浮层是当用户点击屏幕上的控件或区域时，在其上方出现的瞬态视图。通常，浮层上会有个指向其出现位置的箭头。浮层分为非模态的和模态的。点击屏幕上浮层以外的部分或浮层上的按钮，可以取消/关闭非模态浮层。而模态浮层则是通过点击浮层上的取消或其他按钮来关闭/取消的。

浮层适合大屏幕上，可以包含各种元素，包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。当浮层可见时，其他视图的交互交互行为会被禁止，直到浮层被取消/关闭。浮层主要用于显示与屏幕上内容相关的选项或信息。例如：当你点击“操作”按钮时，许多iPad应用会弹出一个浮层（如下图）。

1、尽量不要在iPhone上使用浮层

一般来说，浮层主要应用于iPad上的APP(聚焦用户注意力）。在iPhone的APP中，通常会使用全屏模态视图来呈现信息，而不是弹出浮层来节省空间。

通过在全屏模式视图中显示信息而不是在弹出窗口中来利用所有可用屏幕空间。

注：关于浮层，官方规范是不推荐在iPhone的APP使用的，但是像微信、QQ、支付宝等APP右上角点击“+”图标，都会弹出浮层展示一些操作。应用还是比较广泛的，只是开发写起来稍微麻烦一点点。

2、使用“关闭”按钮仅用于确认和指导

可以使用“关闭”按钮（例如“取消”或“完成”），如果它足够清晰明确，例如退出是否保存更改。通常，若无存在的必要，弹出窗口应自动关闭。

在大多数情况下，当用户点击浮层之外的区域或浮层中的关闭/取消按钮时，浮层应该关闭。如果可以进行多次选择，则浮层还是要保持打开状态，直到用户有意识地对它进行关闭。

3、在非模态弹出窗口自动关闭时始终保持当前任务的保存

通过点击屏幕非浮层区域部分，很容易误点而关闭非模态弹出窗口。仅当用户点击取消按钮时才取消当前的任务。

4、在屏幕适当的位置显示浮层

浮层的箭头应尽可能直接指向触发它的元素。因为浮层不能在屏幕上拖动，所以浮层不能覆盖屏幕上太多内容。也不能覆盖触发它的元素。

5、一次显示一个浮层

显示多个浮层会使界面混乱不堪。永远不要显示一个有层级关系的浮层，或一个浮层接着又弹出一个浮层。如果你需要显示另一个浮层，请先关闭当前浮层。

6、不要在浮层上显示另一个视图

除了警示框，浮层上不应显示任何视图。

7、如果可能的话，让用户在一次点击中关闭一个浮层同时打开另一个浮层

避免额外的点击，尤其是需要在多个不同的项目栏中打开浮层时。

8、避免浮层太大

浮层不应该占据整个屏幕，足以显示其内容并指向触发按钮即可。请注意，系统可能会调整浮层的大小，以确保它适合屏幕。

9、确保自定义的浮层与系统提供的浮层类似

尽管可以自定义浮层，但是也应该避免创建看起来都不像是浮层的设计。当浮层接近系统浮层时，往往效果最好。

10、当需要改变浮层的大小时，提供一个平滑过渡的方案

一些浮层对于相同信息提供了精简视图和扩展视图两种展示方式。如果你调整浮层的大小，请为更改设置一些动画，以避免用户产生新浮层替换旧浮层的意识。

八、滚动视图（Scroll Views）

滚动视图允许用户浏览大于可见区域的内容，例如文档中的文本或图像集合。当用户翻阅、轻击、拖拽、点击和捏合时，滚动视图会跟随手势，并以自然的方式显示或缩放内容。

滚动视图本身没有确定的外观，但在用户与其交互时会显示瞬态滚动条。滚动视图还可以设置为分页模式，此时滚动视图便可以以页面翻转的形式进行新旧页面的切换。

1、适当支持缩放交互

确保有意义的前提下，支持用户捏合或双击放大和缩小。当滚动视图开始缩放时，请设置合适的的最大和最小刻度值。

例如：放大文本直到单个字符填满屏幕，即使可能在大多数APP中是没有意义的。

2、当滚动视图处于分页模式时，考虑显示页面控件

页面控件通常会显示有多少页面、多少屏，或者多少数量的内容是当前可用及可见的。

如果要在滚动视图中显示页面控件，则需要在同一轴上禁用滚动条以免用户混淆。

3、不要在滚动视图中放另一个滚动视图

因为这样做会产生一个难以控制且不可预测的界面。

4、一次只显示一个滚动视图

用户经常在滚动时使用非常大幅度的滑动手势，这样就会造成很难与同一屏幕上的相邻滚动视图同时进行交互。如果你一定要在一个屏幕上放置两个滚动视图，可以考虑让它们向不同方向滚动，这样的话，手势就不太可能影响两个视图。

例如：当iPhone处于纵向时，股票APP会显示股票报价，这些报价可以垂直滚动到公司特定信息的上方，而这些特定的信息则可以水平滚动。

九、列表（Tables）

列表通常通过单行或多行的形式，对数据进行分组分类展示。列表可以简洁、高效地展示大量或少量信息。一般来说，列表对于展示以文本为基础的内容是很友好的，并且常常作为分裂视图一侧的导航工具，相关的内容则显示在另一侧。

iOS有两种样式的列表，平级列表和分组列表。

平级列表。行可以被分隔为带不同标签的列表，并且在列表的右侧垂直显示索引标记（即箭头）。页眉可以出现在所有行中的第一行之前，页脚则可以出现在最后一行之后。

分组列表。行以分组的形式显示，组的上方可以出现页眉，下方则可以出现页脚。此样式的列表至少包含一个组，每个组至少包含一行。分组列表一般不包含索引标记。

1、注意列表的宽度

过于狭窄的列表可能导致文字没法连续，这样便会使用户很难阅读，并且难以在垂直方向像快速浏览。同样，过宽的列表也一样可能难以阅读和扫描，并且很难阅读到主要内容。

2、快速显示列表内容

在显示内容之前，不要让用户等待大量的列表内容加载。先用文本数据填充屏幕行，再显示更复杂的数据（如图像）。这种方式可以立即为用户提供有用的信息，并提APP的感知响应能力。某些情况下，在新数据加载出来之前，先展示之前的旧数据也是有意义的。

3、在内容加载时配以进度条指示进度

如果列表的数据需要一段时间才能加载出来，请显示进度条或旋转加载器（俗称的小菊花），以向用户保证APP仍在运行。

4、保持内容新鲜性

可以考虑定期更新表格内容，及时展示新的数据。但不要改变滚动的位置。相反，将内容添加到表的开头或结尾，让用户在准备好时滚动到它。

一些APP在加载新数据时会显示一个加载器，并提供一个直接跳转到该数据的控件。最好还包括一个刷新控件，这样用户就可以随时手动进行更新。

5、避免将索引与包含在右侧已经存在其它交互控件的组合中

索引一般通过大的滑动手势来控制的。如果附近存在其他交互元素，例如显示指示器，则在出现手势时很难辨别用户的意图，并且可能会激活错误的元素。

表格中的行

使用标准表格单元格样式来定义内容在表格行中的显示方式。

基础列表（默认）：行的左侧显示图像，其后紧跟左对齐标题。对于不需要显示其他附加信息的项目来说，这是一种很好的选择。

子标题模式：同一行中，包含左对齐标题和标题下面的左对齐文本。这种样式适用于视觉上相似的列表。而加上子标题有利于区分行与行。

右侧子标题：左对齐标题，右对齐子标题，位于同一行。

左侧子标题：右对齐标题，左对齐子标题，位于同一行。

以上所有系统提供的标准列表单元格样式，同样都支持图形元素，例如勾选图标或其他指示性控件。当然，添加这些元素会减少标题和子标题的可用空间。

1、保持文本言简意赅，避免显示不全

显示不全的文字和词语很难被阅读和理解。超长的文本被截断在所有表格单元格样式中都是自动的，只是根据你使用的单元格样式和发生截断的位置，它可能会出现或多或少的问题。

2、可为“删除”按钮自定义标题

如果某行支持删除并且有助于提供清晰性，请将系统提供的删除标题替换为自定义标题。

3、在用户做出选择时给予相应的反馈

用户在与列表进行交互时，希望被点击的列表可以突出显示。然后，用户还会期待出现新的视图或者要改变的东西，例如已勾选按钮，是表示用户已经做出了选择。

4、为非标准表行设计自定义表格单元格样式

系统提供的这些标准单元格样式，很适合在各种常见场景中使用，但某些内容或某个APP有可能需要大量自定义的单元格样式。

十、文本视图（Text Views）

文本视图主要用以显示多行样式的文本内容。文本视图可以是任何高度，并可以通过滚动的方式显示额外的内容。

默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。

1、保持文字清晰

虽然你可以使用各种类型的字体、颜色以及对齐方式，但必须保持内容的可读性。采用动态类型文本是个好办法，这样如果用户在设备上更改文字大小，你的文本内容仍然会有友好的体验。

2、显示恰当的键盘类型

iOS提供了几种不同的键盘类型，每种键盘都对应着一种具体的输入方式。为了用户可以流畅地进行数据输入，在编辑文本视图期间显示的键盘，应该适合于该字段中的内容类型。例如，输入支付密码弹出的是数字键盘。

十一、网页视图（Web Views）

网页视图可以在APP中加载和显示丰富的网页内容。例如：嵌入式HTML和网站；邮箱APP使用网页视图来在消息中显示HTML内容。

1、适当地使用前进和后退导航

网页视图支持前进和后退导航，但默认情况下这种交互行为是被禁用了的。

如果用户想通过网页视图访问多个页面，请启用前进和后退导航，并提供相应的控件来启动这些功能。

2、避免使用网页视图来构建一个网页浏览器

使用网页视图让用户在不离开APP当前页的情况下，短暂地访问网站很好，但Safari是用户在iOS上浏览网页的主要方式。所以在你的APP中提供与Safari相似的功能没有必要的，而且也不鼓励这样做。

十二、拆分视图（Split Views）

拆分视图主要用来显示两个并排的列表，主列表中的内容是固定的，而辅助列表中是主列的相关信息。每个列表都可以包含各种元素，包括导航栏、工具栏、标签栏、列表、集合、图像、地图和自定义视图。

拆分视图通常被用来展示可选择视图，主列表是可以点选的一列，根据用户所选类别相应的信息则显示在辅助列表中。如有必要，主列表也可以完全覆盖辅助列表，并且可以在不使用时进行隐藏。这种方式尤其适合设备处于纵向状态下，因为这样辅助列表中的内容可以获得更多展示空间。

1、根据内容选择合适的拆分视图布局

默认情况下，拆分视图将屏幕的三分之一用于主列表，三分之二用于辅助列表。也可以分成两半。

根据内容选择适当的拆分，并确保列表看起来是平衡的。不要创建辅助列表比主列表还窄的拆分视图。

2、主列表的内容保持高亮状态

虽然辅助列表的内容可以更改，但它应始终对应于主列表中一个清晰可辨的选项。这有助于用户理解列表之间的关系。

3、通常，将导航限制在拆分视图的一侧

如果将导航放置在拆分视图的两个列表中，将会使得用户难以明确方向，无法辨别两个列表之间的关系。（例如：上图的向右箭头图标，只在辅助列表中显示）

4、提供多种方法来访问隐藏的主列表

当主列表可能不在当前页面内时，请务必提供一个返回主列表的按钮（通常在导航栏中）。除非你使用侧手势执行了其他功能，否则让用户通过侧滑也可以访问主列表。