最近在读iOS10人机界面指南，目前网上最全的翻译版本来自译者@喵大神经，翻译到UI Bars部分就一直没有更新。所以我接着从UI Views部分开始翻译，英文水平有限，如有错误请指正。

7. UI视图（UI Views）

7.1 操作列表（Action Sheets）

操作列表是由一个控件或操作而触发的特定类型的警告框，展示了与当前情境相关的一系列选项。使用操作列表让用户启动任务，或者在完成一项可能有破坏性的操作前请求用户的确认。在较小的屏幕下，操作列表从屏幕底部向上浮出；在较大的屏幕下，操作列表总是以弹出层的形式出现。

左为从屏幕底部浮出的操作列表，右为以弹出层形式出现的操作列表

提供一个取消按钮如果它能使操作清晰。当用户想要放弃一项任务时，取消按钮能够灌输信心。取消按钮应该始终包含在屏幕底部的操作列表中 。

突出可能存在破坏性的选项。为这些执行破坏性或危险操作的按钮使用红色，并将其显示在操作列表的顶部。

红色破坏性选项和取消按钮

避免让用户滚动操作列表。如果一个操作列表中存在过多选项，用户必须要滚动才能看完所有操作。滚动需要花费更多的时间来做选择，并且很有可能误点其它按钮。

了解开发细节，请参阅UIAlertController中的UIAlertControllerStyleActionSheet constant。

操作列表

7.2 活动视图（Activity Views）

每个活动表示了一个作用于当前情境的任务，例如打印、添加到个人收藏、在页面上查找等等。一旦启动，活动就立即执行任务，或者在进行前请求更多信息。活动由活动视图管理，它表现为一个列表或弹出层，这取决于设备和方向。通过活动提供给用户你的应用程序可以执行的自定义服务或任务。

系统提供了若干内置的活动，如打印、转发到 Twitter、发送信息和Airplay等等。这些任务总是先出现在活动视图上并且不能被重新排序。你不需要再为这些内置任务创建自定义活动。活动视图还显示了其他应用程序的分享和动作扩展。请参阅Sharing and Actions。

设计精简的模板图标(Template image)来表示你的自定义活动。模板图标会用遮罩生成用户最终看到的图标效果。使用透明度适当的黑色或白色，进行抗锯齿处理，并且不要使用阴影。一个模板图标应该居中显示在70×70像素左右的区域里。

为你的活动设计清晰简练的文字标题。标题会出现在活动视图图标的下方。短标题效果最好。如果标题文字过长，iOS 首先会缩小文本，仍然过长的话则会被截断。一般而言，最好避免在标题中提及你的公司或产品名。

活动视图

确保活动适用于当前情境。虽然系统提供的任务不能在活动视图中被重新排序，但是如果它们不适用于你的应用，它们可以被删除。例如，为了防止用户打印图片，你可以删除打印活动。您还可以定义在任何给定时间里显示哪些自定义任务。

分享按钮

使用动作按钮来触发显示活动视图。用户习惯点击动作按钮后访问系统提供的活动。避免提供给用户完成同一件事的另一种方式，使之迷惑。

了解开发细节，请参阅UIActivityViewContoller和UIActivity。

7.3 警告框（Alerts）

警告框用于告知用户与他们的应用程序或设备相关的重要信息，并经常请求反馈。一个警告框包含标题、可选的正文文本、一个或多个按钮和一个可选的用于输入的文本字段。除了这些可配置的元素外，警告框的外观是固定不变的，不能被自定义。

减少警告框的使用。警告框会破坏用户体验，只能被用于像确认购买、破坏性操作(如删除)或告知用户问题等重要情况。警告框的少见有助于确保用户认真对待它们。确保每个警告框提供紧急的信息和有用的选项。

在不同方向上测试警告框的外观。警告框可能会在横竖屏模式下呈现不同的外观。优化警告框文本，使其在任何方向上都能被良好阅读，无需滚动。

了解开发细节，请参阅UIAlertController。

警告框

警告框标题和文本

使用简短的、描述性的多字警告框标题。用户需要在屏幕上阅读的文字越少越好。尽量精简标题，避免添加额外的文本信息。因为单个字的标题几乎不能提供任何有用信息，所以考虑使用一个问题或者短句作为标题。尽可能保证标题在一行之内。使用句子式大写(Sentence-style capitalization)和合适的标点符号构成句子。不要在句末使用结束标点。

如果你必须为警告框添加正文文本，请使用一个完整的短句。尽量保证文本足够短，使其在一到两行之间，防止滚动。使用句子式大写和合适的标点符号。

不用刻意避免使用指责的、批判的、侮辱的文案。用户理解警告框是为了告诉他们发生的问题和危险的情况。只要使用友好的语气，消极但清晰直接的文案就优于积极但晦涩间接的文案。避免使用“你”，“你的”，“我”，“我的”这类代词，有时候会被误认为是一种侮辱或冒犯。

避免详细描述文本按钮。如果你的警告文本和按钮文案是明确的，就不需要向用户解释按钮是用来做什么的。如果你一定要在按钮文案中提供指导，请使用轻击(tap)字眼，保持大写，并不要使用引号。

警告框按钮

一般情况下，使用两个按钮的警告框。两个按钮的警告框便于用户在两个选择中做决定。单按钮的警告框只是起到告知的作用，并未给予用户控制当前状态的能力。三个或更多按钮的警告框会导致复杂和强制滚动，是一个非常糟糕的体验。如果你需要在警告框中给与用户超过两个选项，可以考虑使用操作列表来代替警告框。请参阅Action Sheets。

为按钮设计简短而逻辑清晰的文案。好的按钮文案一般只有一到两个单词，描述用户点击按钮后的结果。跟其它所有按钮一样，使用标题式大写，而且不需要标点符号。尽可能使用与警告标题和文案直接相关的动词和动词词组，如查看全部(View All)，回复(Reply)和忽略(Ignore)等。可以使用OK表示简单的接受。避免使用是(Yes)或否(No)。

将按钮放置在用户期待的位置。一般来说，用户最有可能会点击右边的按钮。取消按钮应该总是放在左边。

适当地标记取消按钮。用于取消警告框操作的按钮应该总是被标记为取消(Cancel)。

识别具有破坏性的按钮。如果一个警告框按钮会导致破坏性操作，如删除内容，请将按钮的样式设置为破坏性的(Destructive)，以使系统将其变为合适的格式。了解开发细节，请参阅UIAlertAction中的UIAlertActionStyleDestructive constant。此外，提供一个取消按钮，使用户能够安全地退出破坏性操作。通过将取消按钮标记为默认按钮，让其变成粗体。

允许使用Home键取消警告框。当警告框出现的时候，按Home键将会从应用程序里切回主屏幕。Home键的效果类似于取消按钮——当用户回到应用中时，警告框消失，操作也不会被执行。如果你的警告框没有取消按钮，可以考虑当按下Home键的时候，在代码里执行取消操作。

7.4 集合视图（Collections）

集合视图用于管理一系列有序的内容，如照片集合，并以一种自定义和高度可视化的布局来呈现它们。由于集合视图的布局不是一个严格的线性布局，因此尤其适合用来展示一些尺寸不一致的项。一般来说，集合视图很理想用于展示以图片为基础的内容项。集合视图可包含背景和其他装饰视图，以从视觉上区分项的子集。

集合视图支持交互和动画。默认情况下，可以使用轻击(tap)某项以选中，长按(touch-and-hold)某项进行编辑，轻扫(swipe)用于滚动。如果应用程序需要，可以添加更多手势用来执行自定义操作。在集合视图内，当用户导入、删除或者移动项时会出现动画效果，也支持自定义动画。

当标准的行或网格布局足够用时，避免创建激进的新设计。集合视图应该提升用户体验，而不是成为关注的焦点所在。让选中一个项目变得简单。如果用户很难点中集合视图中的项，将会在得到他们想要的内容前感到挫败和丧失兴趣。在内容周围使用足够的填充以保持布局整洁，防止内容重叠。

考虑使用表格而不是集合视图来展示文本。将文本信息放在滚动列表中的时候，用户阅读和处理起来会更为简单和高效。

集合视图

当让布局发生动态变化时，请务必谨慎。集合视图的布局可以在任何时候被改变。如果在用户浏览和操作项的时候调整视图布局，请确保这个动态变化是有意义且容易跟踪的。没有明确目的就改变布局会让应用不符合预期且难以使用。如果用户此时关注的项在变化中消失了，用户会觉得这个应用超出了他们的控制能力。

了解开发细节，请参阅UICollectionView。

7.5 图片视图（Image Views）

图片视图在透明或不透明的背景下显示单张图片或者动态图片序列。在图片视图中，图片可以被拉伸、缩放、调整到适合屏幕的大小，或者固定在一个特定的位置。在默认状态下图片视图不支持用户的交互行为。

尽可能保证图片视图中的每一张图片都大小一致。如果图片大小不同，图片视图将分别调整它们。使用大小一致的图片比使用不同大小的图片更有效。甚至使用那些预改变大小的图片会更有效，不需要任何调整。

了解开发细节，请参阅UIImageView。

图片视图

TIP：

已被配置为模板图像的图像会丢弃其颜色，并采用任何色调应用到图片视图中。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。

7.6 地图视图（Maps）

地图视图允许你在应用程序中呈现地理数据，并支持系统内置地图应用所提供的大部分功能。地图视图通常以标准地图、卫星图像、或两者结合的形式来展示地理区域。它能展示单点标注(pins)和叠加图层(overlays)，并支持用户的缩放和平移。如果你的应用程序支持导航，如跑步路线追踪应用，可以使用地图视图来展示路径。

一般来说，让你的地图保持可交互。用户习惯了在系统内置地图中进行交互，因此他们会期待能在你所提供的地图中进行类似的行为。

overlays pins

使用标准的地图标注颜色。标注用于在你的地图上注明用户感兴趣的地点。用户习惯了内置地图应用的标注颜色。避免在你的应用中重新定义这些颜色的含义。红色表示目的地，绿色表示起点，紫色表示用户指定的地点。

了解开发细节，请参阅MapKit。

7.7 页面视图（Pages）

页面视图控制器提供了一种实现内容页之间线性导航的方式，例如在文档、书、记事本或日历中。页面视图控制器通过滚动(Scrolling)或翻页(Page-curl)两种样式来处理页面之间的转场。使用滚动过渡的页面视图控制器没有特定的外观，页面会流畅地滚动到下一页。而使用翻页过渡时，在屏幕上轻扫会导致页面卷曲，就像现实世界里书中的页面一样。

左为滚动过渡，右为翻页过渡

如果适当的话，实现一种非线性导航的方法。当使用页视图控制器时，页面会按顺序流动，无法在不相邻的页面之间进行跳转。如果用户在你的应用中需要不按顺序访问页面，那么就需要实现一种自定义的控制方式提供这个功能。

了解开发细节，请参阅UIPageViewController。

7.8 弹出层（Popovers）

弹出层是当用户轻点某个控件或某一区域时，浮在屏幕其它内容上的临时视图。通常，弹出层会包含一个箭头，指向其出处。弹出层更适合在大屏幕上使用，可以包含各种元素，如导航栏、工具栏、标签栏、表格视图、集合视图、图片视图、地图视图和自定义视图。当弹出层可见时，其他视图是不可进行交互的，除非弹出层消失。使用弹出层展示与当前屏幕内容相关的选项或信息。例如，许多iPad应用，当用户点击分享按钮时，会出现一个包含分享选项的弹出层。

iPad应用上的弹出层

避免在iPhone上显示弹出层。一般来说，弹出层应该被使用在iPad应用上。在iPhone应用上利用所有可用的屏幕空间，在全屏模态视图上展示信息，而不是弹出层。了解相关指南，请参阅Modality。

仅在需要确认和指引下使用关闭按钮。一个关闭按钮（如"取消"或"完成"），若能够提供清晰，就有必要被包含，比如退出或不保存更改。一般来说，一个弹出层应该在它不再需要出现时被自动关闭。大多数情况下，当用户轻击弹出层外部区域或选中其中某一项时，就应该关闭弹出层。如果选项可以被多选，弹出层应该一直存在，除非用户明确要关闭它或轻击弹出层外部区域。

确保在自动关闭弹出层时保存任务。用户很容易误点屏幕其它区域而使弹出层消失。只有当用户明确点击取消按钮时才放弃任务。

弹出层应该出现在屏幕上合适的位置。弹出层的箭头应尽可能直接地指向其出处。因为弹出层不能在屏幕上拖动，所以它不应该覆盖住用户使用弹出层时可能需要的基本内容。弹出层也不能覆盖住触发它出现的元素。

确保同一时间内屏幕上只有一个弹出层。同时显示多个弹出层会使界面变的杂乱并引起困惑。尤其应当避免同时展示一连串或者一系列弹出层，从一个弹出层中弹出另一个弹出层。如果你需要展示一个新的弹出层，请先关闭原来的那一个。

不要在弹出层上面再展示一个视图。除了警告框外，弹出层上不应当有任何视图。

可能的话，让用户可以仅点击一下就关闭当前浮出层并开启一个新的弹出层。这在若干栏按钮每个都会唤起一个弹出层的时候尤其好用，因为它减少了用户的额外点击。

避免把弹出层设计得太大。弹出层不应当占据整个屏幕。它的大小应当恰好能承载当中的内容，又能清楚地指向其出处。系统可能会调整弹出层的宽高，以让它能够更好地适应屏幕的尺寸。

确保自定义弹出层仍然长得像一个弹出层。尽管你可以自定义弹出层的多种外观，还是应当避免设计出用户可能无法辨识的弹出层外观。包含标准控件和视图的弹出层往往最好使用。

改变弹出层大小时请提供平滑过渡的效果。一些弹出层展示同样信息的精简或拓展视图。如果你要改变弹出层的大小，请使用转场动画，避免让用户觉得一个新的弹出层取代了原来的那个。

了解开发细节，请参阅UIPopoverPresentationController。

7.9 滚动视图（Scroll Views）

使用滚动视图来允许用户浏览大于可见区域的内容，例如文档中的文本或图片集合。当用户轻扫(swipe)、滑动(flick)、拖动(drag)、轻击(tap)、捏合(pinch)，滚动视图会遵从这些手势，以一种自然的方式出现或缩放内容。滚动视图本身没有外观，但当用户与之交互时会出现临时的滚动指示器。滚动视图可以应用在页模式(paging mode)中，在此模式下用户通过滚动显示一个全新内容的页面，而不是围绕当前页面移动。

适当地支持缩放操作。如果放大和缩小对于你的应用是有意义的话，可以支持用户通过捏合或者双击来对当前视图进行缩放。若支持了缩放操作，还应当设定在当前情景下有意义的允许缩放的最大值和最小值。例如，允许一个字符被放大到充满整个屏幕的话，用户会很难阅读当前内容，并没有什么意义。

在页模式下的滚动视图中，考虑使用页面控件(page control)元素。使用页面控件来让用户知道当前内容一共有多少页、屏幕、块是可见的，以及他们当前浏览的是第几个。当你在滚动视图中使用页面控件的时候，请禁用同一方向的滚动指示器(scrolling indicator)，避免混淆。了解更多指南，请参阅Page Controls。

不要在滚动视图上放置另一个滚动视图。这样做会创建一个不可预知的界面，用户很难控制。

滚动视图

一般来说，一次只展示一个滚动视图。由于用户滚动屏幕时动作幅度经常都会很大，如果在一屏中同时存在不止一个滚动视图，他们很容易会碰到另一个。如果你确实要在同屏中放两个滚动视图，可以考虑给他们设定不同的滚动方向，来避免用户想要滚动一个视图的时候误操作。例如，iPhone上的股票应用，纵向滚动上半部分会展示股票报价，横向滚动下半部分时则展示该公司的特定信息。

了解开发细节，请参阅UIScrollView。

7.10 分栏视图（Split Views）

分栏视图用于管理两个相邻内容窗格的展示，在主窗格显示固定的内容，在次要窗格显示相关的信息。每个窗格可以包含各种元素，包括导航栏、工具栏、标签栏、表格视图、集合视图、图片视图、地图视图和自定义视图。分栏视图经常用于展示筛选内容，筛选条目列表显示在主窗格中，选择条目后的筛选结果显示在次要窗格中。如果你的应用需要，主窗格可以覆盖次要窗格，也可以在不需要的时候隐藏主窗格。这在设备处于竖屏方向时特别有用，因为它允许在次要窗格上留有更多空间查看内容。

分栏视图

选择一个适合内容的分栏视图布局。默认情况下，分栏视图将屏幕的三分之一用于主窗格，三分之二用于次要窗格。屏幕也可以分成两半使用。根据内容选择适当的拆分，并确保窗格不会看起来不平衡。避免创建一个比主窗格更窄的次要窗格。

始终突出主窗格中被选中的项。尽管次要窗格中的内容会变化，但它应当始终保持着与主窗格选中项的相关性。这有助于用户理解左右窗格间的关系。

一般来说，在分栏视图的一侧窗格放置导航栏。在两侧窗格中都同时展示导航栏会让用户很难分清这两个窗格的从属关系。

提供多种获取主窗格的方式。在主窗格不显示在屏幕内的布局情况下，需要向用户提供一个按钮(通常位于导航栏上)来唤起主窗格。除非你的应用有定义轻扫的手势执行其他功能，否则应当支持用户轻扫以唤起主窗格。

了解开发细节，请参阅UISplitViewController。

7.11 表格视图（Tables）

表格视图以一个可滚动的单列多行的形式来展示数据，这些行可以被分段或分组。通过表格视图以列表的形式清晰高效地显示大量或少量的信息。一般来说，表格视图是基于文本的内容的理想选择，并经常出现在分栏视图的一侧作为导航，与之相关的内容显示在另一侧。请参阅Split Views。

iOS定义了两种表格样式：平铺型(plain)和分组型(grouped)。

平铺型

平铺型(Plain)。平铺型表格可被分为若干带标签的段落，表格右侧会出现垂直的可选索引。每个段落的首项前可以有页眉，末项后可以有页脚。

分组型

分组型(Grouped)。行以分组形式展示，可以有页眉和页脚。分组表格视图中至少含有一组列表，每一组中至少包含一行。分组型表格没有索引。

考虑给予表格适当的宽度。窄的表格可能会导致内容被截断和包裹，使其难以阅读以及在远处快速浏览。宽的表格也会很难阅读和浏览，并会占据内容空间。

快速展示表格的内容。在显示某些内容之前，不要等待大量的表格内容加载。可以首先展示文本信息，图片等较为复杂的内容则在加载完后再显示。这样可以将有用的信息立即传达给用户，同时也提高了应用的响应能力。在某些情况下，等待信息加载时，显示过期的旧数据可能会有意义。

在内容加载时请告知进度。如果表格数据加载很慢，请展示进度条或旋转的活动指示器，让用户知道加载仍然在进行。

保持表格内容的更新。考虑定期更新表格内容以展示新数据。只是不要改变滚动的位置。相反，将更新内容添加到表格的开始或尾部，当更新内容准备好时再让用户滚动。一些应用在新数据被添加后会显示一个指示器，并提供了一个跳转到那儿的控件。提供刷新控件也是一个好主意，用户可以在任何时候手动执行更新操作。请参阅Refresh Content Controls。

避免让表格上的向右元素和索引混合起来。索引通过轻扫手势控制。如果其它可交互元素在索引附近，如展开标志(disclosure indicators)，当手势发生时可能会很难识别用户的意图，并且会激活错误的元素。

了解开发细节，请参阅UITableView。

表行（Table Rows）

使用标准的表单元格样式定义表中的内容如何出现。

默认型

默认型(Default)。默认型包括行左侧的可选图片，并右跟左对齐的文字标题。默认型样式适合展示一系列无须通过附加信息便可以区分的项。了解开发细节，请参阅UITableViewCell中的UITableViewCellStyleDefault constant。

副标题型

副标题型(Subtitle)。副标题型包括一行上的左对齐文字标题，以及下方的左对齐副标题。这种样式适用于列表各项较为相似的情况。副标题能帮助用户区分列表中的各项。了解开发细节，请参阅UITableViewCell中的UITableViewCellStyleSubtitle constant。

Value 1

Value 1。在Value 1样式下，文字标题左对齐，在同一行上副标题用较细的字体右对齐。了解开发细节，请参阅UITableViewCell中的UITableViewCellStyleValue1 constant。

Value 2

Value 2。Value 2样式下，文字标题右对齐，在同一行上副标题用较细的字体左对齐。了解开发细节，请参阅fUITableViewCell中的UITableViewCellStyleValue2 constant。

所有标准的表单元格样式均支持添加图形元素，如勾选或展开标志。当然，添加这些元素会缩小标题以及副标题的可用空间。

保持文本简洁，以避免被截断。繁冗的文字和词组不方便用户浏览和理解。所有单元格样式均会自动截断文本，而文本截断所造成的问题可大可小，取决于你采用的单元格样式，以及被截断了哪一部分文字。

考虑为删除按钮自定义一个名称。如果表格行支持删除操作并能让用户清晰理解，可以创建一个自定义标题，来取代系统提供的"删除"标题。

在选择列表项时，提供反馈。当用户点击可选的列表项时，会认为被点击的项都应短暂地高亮一下。在点击后，用户期望出现新的视图或发生一些变化，例如，出现一个复选标记以表明先前点击的项已被选中。

为非标准的表行设计一个自定义的单元格样式。标准样式在各种常见场景中都使用良好，但在一些内容或应用的整体设计中可能会需要大量自定义的表格外观。了解如何创建自定义单元格样式，请参阅Table View Programming Guide for iOS中的Customizing Cells。

了解开发细节，请参阅UITableViewCell。

7.12 文本视图（Text Views）

文本视图可以展示多行带样式的文本内容。文本视图可定义为任何高度，并且当内容太多超出视图边框时支持滚动。默认情况下，文本视图会以左对齐的黑色系统字体显示。如果文本视图支持编辑，当用户轻击文本视图内部时会唤起键盘。

始终确保文字的易读性。虽然你可以以创造性的方式使用不同的字体、颜色和对齐方式，但保持文本的易读性是必要的。采用动态文本(Dynamic Type)是一个好主意，这样就算用户改变他们设备上的文字大小，文字内容也能看起来很棒。你还应使用可访问的选项来测试文字内容，如粗体文字。

展示合适的键盘样式。iOS提供了各种不同的键盘类型，以便用户输入不同类型的文本。为了简化数据输入，在文本视图的编辑过程中，应该根据输入内容的类型来指定不同的键盘类型。了解可用的键盘类型，请参阅UITextInputTraits中的UIKeyboardType constant。

了解开发细节，请参阅UITextView。

文本视图

7.13 网络视图（Web Views）

网络视图用来加载和展示丰富的网络内容，如直接在应用程序中显示嵌入式HTML和网站。例如，邮箱应用使用网络视图在消息中显示HTML内容。

如果合适，可以提供向前和向后的导航。网络视图支持向前和向后的导航，但默认情况下禁用此行为。如果用户将使用你的网络视图访问多个页面，可以启用向前和向后的导航，并提供相应的控件来启动这些功能。

不要用网络视图来创建一个网络浏览器。使用网络视图让用户不离开你的应用程序环境来简单地访问一个网站是可以的，但Safari才是在iOS上浏览网页的主要方式。试图在你的应用中复制Safari的功能是不必要和不被鼓励的。

了解更多内容，请参阅WKWebView。

网络视图