iOS11人机交互指南(八)- 视图(Views)- 下
八、浮出层(Popovers)
浮出层是一种临时视图,会在用户点击控件或特定区域时触发,高于其他页面层级。通常,浮出层包括指向它出现位置的箭头。它可以是非模态(罗列信息)或是模态(进行信息操作)。非模态浮层通过点击屏幕的另一部分或弹窗按钮来关闭;模态浮层通过点击取消或其他按钮即可解除浮层。
浮出层在大屏设备上最合适,可以包含各种元素,包括导航栏、工具栏、标签栏、制表符栏、集合视图、表格、图像、地图和自定义视图。当一个浮层可见时,其他视图的交互通常被禁用,直到浮层关闭。使用浮层显示与屏幕内容相关的选项或信息。例如,当用户点击按钮操作时,许多 iPad 应用会显示一个共享选项的浮层。
避免在 iPhone上显示浮出层。一般来说,浮出层应该保留在 iPad 应用中使用。在 iPhone 应用中,在全屏模式视图中呈现信息,而不是在浮层中,利用所有可用的屏幕空间。
使用关闭按钮进行确认和引导。应包含关闭按钮,例如 取消、完成。可以是另一种形式,例如退出或不保存更改。一般来说,浮层应在不需要时自动关闭。在大多数情况下,当用户点击其边界之外或选择一个在浮层中的项目时,浮层应该关闭。如果可以进行多项选择,则浮层应保持打开状态,直到用户明确将其关闭。
当自动关闭非模态浮层时,经常进行保存。轻按屏幕的另一部分就会无意中关闭非模态浮层,只有当用户点击取消按钮时才放弃本次操作。
指向触发位置。浮层箭头应该尽可能直接指向触发它的元素,由于浮层不能移动,浮层不应该遮挡可能需要看到的基本内容,当然也不应该覆盖触发它的元素。
一次显示一个浮层。显示多个浮层使界面变得混乱并引起用户迷惑。不要显示一个级联或层次结构,例如其中一个从另一个弹出。如果需要一个新的浮层,请先关闭打开的那个。
请勿在浮层上再展示另一个视图。除了弹窗,浮层中不应有任何视图。
尽可能关闭现有的浮层后才能打开新的。当多个不同的按钮会触发不同浮层时,避免额外的注释很重要。
避免浮层太大。浮层不应占用整个屏幕,只显示足够大的内容并指向触发元素。要注意,系统可能会调整浮层的大小以确保它适合屏幕。
确保自定义浮层看起来像个浮层。虽然可以定制浮层样式,但要避免用户可能无法识别为浮层的设计。当内容包含标准控件和视图时,浮层往往最有效。
更改浮层大小时平滑过渡。一些浮层提供了相同信息下的视图缩放,如果你需要调整浮层大小,请使用动效平滑过渡,以避免给用户一种新浮层替换旧浮层的印象。
开发指导请参阅 UIPopoverPresentationController。
九、滚动视图(Scroll Views)
滚动视图允许用户浏览大于可见区域的内容,例如文档中的文本或图像集合。随着用户滑动、轻拂、拖动、点按和捏住,滚动视图会沿着手势以一种自然感的方式显示或缩放内容。滚动视图本身没有外观,但是与其用户交互时它会显示临时滚动指示器。它还可以配置为寻呼模式,其中滚动显示全新的内容页面,而不是移动当前页面。
支持适当缩放。如果在应用中有意义,请支持捏住或双击放大和缩小的手势。启用缩放时,设置有意义的最大和最小比例值。比如,放大文本直到单个字符填满屏幕,这就在大多数应用中没有意义。
滚动视图处于寻呼模式时,考虑显示页面控制元素。页面控件显示有多少页面、屏幕或其他内容块是否可用,并指示当前可见的内容。如果使用滚动视图显示页面控件,请禁用同一轴上的滚动指示符,以避免混淆。更多指导请参阅Page Control。
请勿在滚动视图中再放滚动视图。这样做会难以控制,界面交互不可预测。
一般来说,一次显示一个滚动视图。滚动时,用户通常会进行大量的滑动操作,并且可能难以避免与同一屏幕上的相邻滚动视图进行交互。如果需要在一个屏幕上放置两个滚动视图,请考虑允许它们在不同的方向滚动,因此一个手势不太可能影响这两个视图。例如,当iPhone处于纵向时,股票类应用会显示股票报价,垂直滚动到特定信息后水平滚动。
开发指导请参阅 UIScrollView。
十、分屏视图 (Split Views)
分屏视图管理两个并排的内容窗格显示,主窗格中的常驻内容和辅窗格中的相关信息。每个窗格可以包含各种元素,包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。分屏视图通常与可过滤内容一起使用。主窗格显示过滤器类别列表,所选类别的过滤结果将显示在辅窗格中。如果应用需要,主窗格可以覆盖辅窗格,并且在不使用时可以隐藏屏幕。这在设备处于纵向方向时特别有用,因为它允许在辅窗格中查看内容的空间更大。
选择适合内容的分屏视图布局。默认情况下,分屏视图将三分之一的屏幕用于主窗格,三分之二用于辅窗格。当然也可以平均分配。根据内容选择适当的布局拆分,确保窗格显示平衡。避免创建比主窗格窄的辅窗格。
突出主窗格任务选择。虽然辅窗格内容可以更改,但它应始终对应主窗格中可清晰识别的选择。有助于用户了解窗格之间的关系。
通常导航只在一侧。如果在分屏视图的两个窗格中放置导航,会使用户难以保持导向及辨别两个窗格之间的关系。
开发指导请参阅 UISplitViewController。
提供多种方式呼出隐藏的主窗格。在主窗格可能不在屏幕上的布局上,请务必提供一个按钮(通常位于导航栏中)以显示窗格。除非您的应用程序使用滑动手势来执行其他功能,否则让用户从屏幕侧面滑动即可访问主窗格。
十一、表格视图(Tables)
表格视图以一个可滚动的单列多行的形式来展示一段或一组数据。用一个表格以列表的形式,简洁高效地显示大量或少量的信息。一般来说,表格最好用来展示文字内容,而且经常以导航的方式出现在分屏视图的一侧,另一侧显示相关内容。请参阅 Split Views。
iOS采用两种表格,平铺型和分组型。
平铺型(图左)。平铺型表格可被分为若干带标签的段落,表格右侧边缘可能会出现垂直的表格索引。每行开头可以有页眉,尾部可以有页脚(也可以没有)。
分组型(图右)。表格行以分组形式展示,可以有页眉和页脚。分组表格视图中至少含有一组列表,而每一组中至少包含一项内容。与平铺型不同,分组型表格没有索引。
考虑列表宽度。细小的表格可能导致截断和缠绕,使得它们很难在远处快速读取和扫描。 宽表也可能难以阅读和扫描,并可能从内容中夺走空间。
快速显示列表内容。如果表格的内容庞大而且复杂,不要在所有数据都加载完之后才一起显示出来。可以首先展示文本信息,图片等较为复杂的内容则在加载完后再显示。这样可以将有用的信息立即传达给用户,同时也提高了应用的响应能力。在等待信息加载的时候,可以考虑展示“过期”信息。
反馈加载进程。如果信息加载速度很慢或者非常复杂,需要提供一个进度条或者扫描控件告诉用户加载正在进行中。
保持内容更新。通过定期更新的数据来反映更新的列表内容。不要改变滚动位置,而是在列表的开头或结尾添加更新的内容,刷新时符合用户的预期。当新的数据被添加时,一些应用程序显示一个指示器,同时提供了一个对它的控件。一个好的方式是添加一个刷新按钮,这样用户就可以随时手动刷新。更多详情请查阅 Refresh Content Controls.
避免将索引与包含右对齐元素的表格行组合。大面积的滑动手势控制一个索引。如果其他交互元素设置在附近,如展开按钮,一个手势激活错误元素时,可能很难辨别用户的意图。
开发指导请参阅 UITableView。
表行
您使用标准表格单元格样式来定义内容在表格行中的显示方式。
基本(默认,图左)。 行左侧为可选图像,跟着是左对齐的标题。 显示不需要补充信息的项目是一个很好的选择。 有关开发人员指南,请参阅 UITableViewCell 中的 UITableViewCellStyleDefault。
副标题(图右)。 一行为左对齐标题,下一行为左对齐的副标题。 这种风格在行视觉上相似的表格中效果良好。 额外的副标题有助于将行彼此区分开来。 有关开发人员指南,请参阅 UITableViewCell 中的 UITableViewCellStyleSubtitle。
右侧细节(值1)。 左对齐的标题,在同一行上有右对齐的字幕说明。 有关开发人员指南,请参阅 UITableViewCell中的 UITableViewCellStyleValue1。
左侧细节(值2)。 右对齐的标题,然后是同一行上的左对齐字幕。 有关开发人员指南,请参阅 UITableViewCell 中的 UITableViewCellStyleValue2 。
所有标准表格单元格样式也允许图形元素,例如复选标记或公开指示符。 当然,添加这些元素会减少可用于标题和字幕的空间。
保持文本简洁以避免裁剪。 截断的单词和短语很难扫描和理解。 文本截断在所有表格单元格样式中都是自动的,但它会显示出或多或少的问题,具体取决于您使用的单元格样式和截断发生的位置。
考虑为删除按钮使用自定义标题。 如果一行支持删除并且有助于提供清晰度,请将系统提供的删除标题替换为自定义标题。
在进行选择时提供反馈。 当内容被点击时,用户期望这一行可以突出显示。 此外,用户期望出现新的视图或某些改变,例如出现复选标记,表明已进行选择。
为非标准表格行设计自定义表格单元格样式。 标准样式适用于各种常见场景,但某些内容或您的整体应用设计可能需要大量定制的表格外观。 要了解如何创建自己的单元格,请参阅 Table View Programming Guide for iOS 中的 Customizing Cells 。
开发指南请参阅 UITableViewCell。
十二、文本视图(Text Views)
文本视图可以展示多行、多风格文本内容。文本视图可以是任何高度,当内容超出文本边框时可以滚动。 默认情况下,文本视图会以左对齐的黑色系统字体显示。如果文本是可以编辑的,当用户轻击文本视图内部时,将唤起键盘。
确保文本易读。虽然你可以使用不同的字体、字色和对齐方式,但保持文本的可读性是必要的。最好是采用动态文本(Dynamic Type),这样当用户改变设备上的文字大小时仍能很好的显示。你也应该测试你的功能选项内容是否启用,如粗体文本。
使用合适的键盘样式。iOS提供了各种不同的键盘类型,以便用户输入不同类型的文本。为简化数据输入,键盘应在文本视图的编辑过程中显示适当的字段内容的类型。有关可用键盘类型的完整列表,请参阅 UITextView 中的 UIKeyboardType。
开发指南请参阅 UITextView。
十三、网络视图(Web Views)
网络视图加载并显示丰富的网络内容,如直接在应用中嵌入的 HTML 和网站。例如,邮件中使用的网络视图,信息中显示的 HTML 内容。
合适位置添加向前向后导航。网络视图支持向前和向后导航,但是这种行为在默认情况下禁用。如果用户使用网络视图访问多个页面,启用向前和向后导航,并提供相应控件来启动这些功能。
请勿用网络视图创建浏览器。使用网络视图让用户不用跳出应用就能简单地访问一个网站,但 Safari 是用户在 iOS 中浏览网页的主要方式。因此试图在应用中复制这个功能是不必要的。
开发指南请参阅 WKWebView。