最新iOS平台设计规范四｜3大界面要素：视图(Views)

晓吾 2023-07-29 11:57:37

iOS是运行于iPhone、iPad和iPod touch设备上、最常用的移动操作系统之一。作为互联网应用的开发者、产品经理、体验设计师，都应当理解并熟悉平台的设计规范。这有利于提高我们的工作效率，保证用户良好的体验。

本文是iOS设计规范系列第4篇，介绍3大界面要素（栏、视图、控件）中的视图（Views）。首先让我们回顾一下iOS的3大界面要素。

3大界面要素(Interface Essentials)：

大多数iOS应用都是由UI Kit中的组件构建的。UI Kit是一种定义通用界面元素的编程框架，这个框架不仅让APP在视觉外观上保持一致，同时也为个性化设计留有很大空间。

UI Kit提供的界面组件有三类：栏（Bars），视图（Views），控件（Controls）。

栏（Bars）：

栏，可以告诉用户在APP中当前在所在的位置、能提供导航，还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种：导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。

视图（Views）：包含用户在APP中看到的基本内容，例如：文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。

控件（Controls）：控件，是用于触发操作并传达信息的。例如：按钮、开关、文本框和进度条，都属于典型的控件。

iOS的12种视图（Views）：

一、动作表单（Action Sheets）

动作表单是一种特定的警示样式，它表示与当前上下文有关的两个或多个选择。在较小的屏幕上，动作表单会从屏幕底部向上滑动。在较大的屏幕上，动作表会以弹出框的形式同时出现。

在执行潜在的破坏性操作之前，请使用操作表请求确认。如果是非破坏性的操作可以使用下拉菜单（控件的一种，后面会讲到）。
提供“取消”按钮，使人们可以重新考虑破坏性操作。“取消”按钮应出现在动作表单的底部。
突出显示破坏性选择。将红色用于执行破坏性或危险操作的按钮，并将这些按钮显示在动作表单的顶部。
避免让操作表滚动。如果表单选项太多，用户必须滚动才能看到所有选项。但滚动需要用户额外花时间来做出选择，而且很容易造成误点。

二、活动视图（Activity Views）

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

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

设计简单的模板图像来展示自定义的活动。模板图像使用Mask来创建图标。使用具有适当透明度和抗锯齿效果的黑白，并且不包括阴影。模板图像应集中在约70px×70px的区域中。
使用简单的活动标题来描述你的任务。标题显示在活动视图中的图标下方。短标题最好。当标题太长时，iOS首先缩小文本，然后如果标题仍然太长直接将其截断。一般来说，请避免在标题中包含你的公司名称或产品名称。
确保活动适合当前上下文。虽然系统提供的任务无法在活动中重新排序，但如果它们不适用于你的APP，则可以将其屏蔽。例如：要阻止用户打印图像，你可以屏蔽“打印”活动。您还可以定义在给定的时间内显示哪些自定义任务。
使用“操作”按钮显示活动视图。人们习惯于点击“操作”按钮来访问系统提供的活动。用户习惯在点击“功能”按钮时弹出活动视图。所以如果必是必须，尽量不要使用其他方法。

三、警示框（Alerts）

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

尽量少用警示框。警示框会破坏用户体验，只在重要情况下使用，例如确认购买和破坏性操作（例如删除）或通知用户相关问题。严格控制警示框的数量，有助于让用户更认真对待它。确保每个警示框都是提供关键的信息和有用的选择。
两个方向都要测试警示框。在横向模式和纵向模式下，警示框可能会有所不同。优化警示框文本，使其在任何方向上都无需滚动就能很好地阅读。

警示框标题和内容：

尽可能写一些短小的、描述性比较强的多文本警告标题。屏幕上需要阅读的文字应该越少越好，可以尝试编写一个标题并且避免添加额外的信息。因为单字标题很少会提供有用的信息，所以可以考虑以问问题或使用短句的方式，尽可能的将标题保留在同一行上。通过大小写及标点符号来共同完成文本语句，而且需要注意不要在句子中间使用结束标点符号。
如果你必须提供信息，尽可能写简短完整的句子。尽量保持消息足够短，尽量保持在一两行之内避免滚动，注意语句大小写及标点符号。
避免使用带有指责、批判、或侮辱性的词语。人们知道警告会告诉他们问题的紧急和危险情况，所以依然要使用友好的语气，因为直接正面的态度要比消极负面的态度有效果的多。避免使用代词，如你，你，我，和我的等，它有时会比较容易被误解为侮辱或不尊重。
避免去解释警告按钮的作用。如果的的警告文本和按钮标题是明确的，那么就不需要去解释按钮是做什么的。除非在极少的情况下，必须提供指导，那么可以用“点击”这个词，在引用按钮时保持大写，不要在引号中包含按钮标题。

警示框按钮：

使用双按钮警示。双按钮警示框给予了用户一个比较容易的双选项的选择方式。单按钮通常只是告知信息，可操作性比较低。但如果3个或更多按钮的话，会让警示框变得很复杂并且可能需要滚动，这是一种不友好的用户体验。如果2个按钮满足不了你的需求的话，你可以考虑使用动作表单（Action Sheets）。
警示框按钮的标题要简洁明了、合乎逻辑。最合适的按钮标题由一个或两个词语组成，用于描述选择按钮后的结果。对于所有的按钮标题，使用标题样式的文字且不需要标点符号。尽可能使用与警示框标题和警示框内容直接相关的动词和动词短语。例如：查看全部、回复或忽略。使用”好的“也可以被接受，但不要使用”是“和”否“。
将按钮放置在人们期望的位置。一般而言，人们最有可能点击的按钮应位于右侧。取消按钮应始终位于左侧。
正确标记取消按钮。取消警报操作的按钮应始终标记为“取消”。
识别破坏性按钮。如果警示框按钮含有破坏性操作（例如删除内容），请将按钮的样式设计为“破坏性”（例如红色字体），以便系统进行适当的格式设置。此外，提供“取消”按钮，以便用户可以安全地退出破坏性操作。将“取消”按钮作为默认按钮，并使用粗体文本。
允许用户通过退出APP到主屏幕来取消警示框。当警示框出现时，退出到主屏幕可以退出APP。这个操作产生与点击取消按钮的效果是相同的。即警示框被取消，且不执行任何操作。如果你的警示框没有“取消”按钮，至少要保留这种取消警示框的交互方式。

四、集合（Collections）

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

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

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

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

当标准行或网格布局足够时，避免创建新的设计。集合应该是用来优化用户体验的，而不是成为关注的焦点。集合应该让用户松选择项目更方便。如果在你的集合中很难找到某个条目，用户会感到沮丧并失去兴趣。在内容周围使用足够的填充，以保持布局整齐并防止内容重叠。
集合的方式不适用于文本信息，文本信息可以用列表。相对于集合，文本信息展示在一个可滚动的列表中，浏览起来会更简单和有效。
谨慎进行动态布局变更。集合的布局是可以随时更改的。但需要注意的是，如果你是在用户进行查看集合或者正在与之进行交互时来更改动态布局的话，请确保更改是有意义的且是易于跟踪的。

无意义的布局更改可能会使APP看起来不可预测且难以使用。如果由于布局改变而改变了用户的使用语境，用户可能会觉得迷失。

五、图像视图（Image Views）

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

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

六、页面视图（Pages）

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

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

七、浮层/弹出视图（Popovers）

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

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

尽量不要在iPhone上使用浮层。一般来说，浮层主要应用于iPad上的APP(聚焦用户注意力）。在iPhone的APP中，通常会使用全屏模态视图来呈现信息，而不是弹出浮层来节省空间。通过在全屏模式视图中显示信息而不是在弹出窗口中来利用所有可用屏幕空间。
使用“关闭”按钮仅用于确认和指导。如果传达的含义足够清晰明确，可以使用“关闭”按钮（例如“取消”或“完成”），例如退出是否保存更改。若无存在的必要，弹出窗口应自动关闭。当用户点击浮层之外的区域或浮层中的关闭/取消按钮时，浮层应该关闭。如果可以进行多次选择，则浮层还是要保持打开状态，直到用户有意识地对它进行关闭。
自动关闭非模式弹出窗口时，请务必保存当前任务。通过点击屏幕非浮层区域部分，很容易误点而关闭非模态弹出窗口。仅当用户点击取消按钮时才取消当前的任务。
在屏幕适当的位置显示浮层。浮层的箭头应尽可能直接指向触发它的元素。因为浮层不能在屏幕上拖动，所以浮层不能覆盖屏幕上太多内容。也不能覆盖触发它的元素。
一次只显示一个浮层。显示多个浮层会使界面混乱不堪。永远不要显示一个有层级关系的浮层，或一个浮层接着又弹出一个浮层。如果你需要显示另一个浮层，请先关闭当前浮层。
警示框除外，不要在浮层上显示其他视图。除了警示框，浮层上不应显示任何视图。
如果可能的话，让用户在一次点击中关闭一个浮层，同时打开另一个浮层。避免额外的点击，尤其是需要在多个不同的项目栏中打开浮层时。
避免浮层太大。浮层不应该占据整个屏幕，足以显示其内容并指向触发按钮即可。请注意，系统可能会调整浮层的大小，以确保它适合屏幕。
确保自定义的浮层与系统提供的浮层类似。尽管可以自定义浮层，但是也应该避免创建看起来都不像是浮层的设计。当浮层接近系统浮层时，往往效果最好。
当需要改变浮层的大小时，提供一个平滑过渡的方案。一些浮层对于相同信息提供了精简视图和扩展视图两种展示方式。如果你调整浮层的大小，请为更改设置一些动画，以避免用户产生新浮层替换旧浮层的意识。

八、滚动视图（Scroll Views）

滚动视图主要被用户用来去浏览那些像文档中的文本，集合中的图像等比显示区域要大的内容。当用户进行翻阅、轻击、拖拽、点击以及缩放等交互行为时，滚动视图会随之进行放大缩小等与之对应的变化。

滚动视图本身没有可视化界面，但是其会随着用户的滚动显示滚动条。同时滚动视图也可以被设置为页面模式，此时滚动视图便可以以页面翻转的形式进行新旧页面间的切换。

恰当的支持缩放交互行为。在确保有意义的前提下，支持用户通过缩放或双击进行缩放。当滚动视图的缩放选项被打开时，设置比较合适的最大及最小值。例如：放大文本直到一个单一的字符充满整个屏幕，即使其可能对于大部分应用来说是没有意义的。
当滚动视图处于页面模式时考虑显示页面控制元素。页面元素通常会显示有多少页面，多少屏，或者多少数量的内容是当前可用及可见的。如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。
不要在一个滚动视图中放置另一个滚动视图。这样做带来的后果主要为会产生一个不可预期的用户界面，从而控制起来会变得非常困难。
同一时刻只显示一个滚动视图。用户经常会在滚动时使用非常大幅度的动作，如此便会非常难以避免在同一屏幕中对相邻的滚动视图进行交互操作。所以如果你需要在一个屏幕中放置两个滚动视图时，尽量考虑允许它们在不同的方向进行滚动，如此可能对其相互间的影响是最小的。

例如：当iPhone处于水平方向时，股票类应用程序会在垂直方向支持滚动来展示特定公司的股票行情。

九、分列视图（Split Views）

分列视图管理应用程序顶层的分层内容的呈现。分列视图由一个两列或三列的界面组成，分别显示一个主列，一个可选的补充列和一个辅助内容窗格。主列中的更改将导致可选补充列中内容的更改。分列视图对于浏览内容层次结构的多个级别很有用，例如通过横穿收件箱列表和邮件，来查看每个邮件的内容。

分列视图可以显示各种内容，但是许多系统应用程序（例如Mail）都使用拆分视图来创建基于边栏的界面。在这种类型的界面中，主要列显示侧边栏，可选补充列显示列表视图，辅助内容窗格显示有关所选内容的详细信息。

在iPad上，使用拆分视图而不是标签栏。拆分视图提供与选项卡栏相同的快速导航，同时更好地利用了大屏幕。
为每种类型的列选择适当的样式。对于显示侧栏的主列，请使用侧栏外观。此外观适用于应用程序级导航和集合列表，例如Mail中的邮箱。对于显示列表视图的补充列，请使用普通边栏外观。这种外观适合于单个内容的列表，例如邮箱中的消息。
在主要和补充列中持续突出显示任务选择。尽管辅助窗格的内容可以更改，但它应始终与其他列中可清楚识别的选择相对应。这种选择有助于人们理解列之间的关系并保持自己的方向。
如果合适，允许人们在列之间拖放内容。由于拆分视图提供了对多个层次结构的访问权限，因此人们可以通过在列之间拖放项目来将内容从应用程序的一个部分快速移动到另一部分。

十、表单（Tables）

表单通常通过单行或多行的形式，对数据进行分组分类展示。表单可以简洁、高效地展示大量或少量信息。一般而言，表格是基于文本的内容的理想选择，并且通常作为导航视图显示在拆分视图的一侧，而相关内容显示在另一侧。

表单分类iOS有三种样式的列表，平级、分组、插入分组。

平级。行可以被分隔为不同标记的部分，并且会有索引标记显示在屏幕右侧。页眉可以出现在一节中的第一项之前，页脚可以出现在最后一项之后。

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

插入分组。行以具有圆角的组显示，并从父视图的边缘插入。这种样式的表始终包含至少一组，并且每组始终包含至少一行，并且可以在其后跟一个页眉和一个页脚。插入分组表不包含索引。插入的分组样式在常规宽度的环境中效果最佳。因为在紧凑的环境中空间较小，所以插入的分组表可能会导致文本换行，尤其是在内容本地化时。

设计规范：

注意列表的宽度。过于狭窄的列表可能导致文字没法连续，这样便会使用户很难阅读，并且难以在垂直方向像快速浏览。同样，过宽的列表也一样可能难以阅读和扫描，并且可能占用内容空间。
快速显示列表内容。在显示内容之前，不要让用户等待大量的列表内容加载。先用文本数据填充屏幕行，再显示更复杂的数据（如图像）。这种方式可以立即为用户提供有用的信息，并提APP的感知响应能力。某些情况下，在新数据加载出来之前，先展示之前的旧数据也是有意义的。
在内容加载时配以进度条指示进度。如果列表的数据需要一段时间才能加载出来，请显示进度条或旋转加载器（俗称的小菊花），以向用户保证APP仍在运行。
保持内容新鲜性。可以考虑定期更新表格内容，及时展示新的数据。但不要改变滚动的位置。相反，将内容添加到表的开头或结尾，让用户在准备好时滚动到它。一些APP在加载新数据时会显示一个加载器，并提供一个直接跳转到该数据的控件。最好还包括一个刷新控件，这样用户就可以随时手动进行更新。
避免将索引与包含右对齐元素的表单结合在一起。索引一般通过大的滑动手势来控制的。如果附近存在其他交互元素，例如显示指示器，则在出现手势时很难辨别用户的意图，并且可能会激活错误的元素。

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

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

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

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

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

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

保持文本言简意赅，避免显示不全。显示不全的文字和词语很难被阅读和理解。超长的文本被截断在所有表格单元格样式中都是自动的，只是根据你使用的单元格样式和发生截断的位置，它可能会出现或多或少的问题。
可为“删除”按钮自定义标题。如果某行支持删除并且有助于提供清晰性，请将系统提供的删除标题替换为自定义标题。
在用户做出选择时给予相应的反馈。用户在与列表进行交互时，希望被点击的列表可以突出显示。然后，用户还会期待出现新的视图或者要改变的东西，例如已勾选按钮，是表示用户已经做出了选择。
为非标准表行设计自定义表格单元格样式。系统提供的这些标准单元格样式，很适合在各种常见场景中使用，但某些内容或某个APP有可能需要大量自定义的单元格样式。

十一、文本视图（Text Views）

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

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

保持文字清晰。虽然你可以使用各种类型的字体、颜色以及对齐方式，但必须保持内容的可读性。采用动态类型文本是个好办法，这样如果用户在设备上更改文字大小，你的文本内容仍然会有友好的体验。还应该在启用了辅助功能选项（例如粗体文本）的情况下测试内容单显示情况。
显示恰当的键盘类型。iOS提供了几种不同的键盘类型，每种键盘都对应着一种具体的输入方式。为了用户可以流畅地进行数据输入，在编辑文本视图期间显示的键盘，应该适合于该字段中的内容类型。例如，输入支付密码弹出的是数字键盘。