iOS12界面设计指南之视图(Views)–表格(Tables)

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

表格通常以可滚动的单列多行排列的方式对数据进行分组分类进行展示。使用表格以列表的形式可以干净高效地显示大量或少量信息。一般来说,表格对于以文本为基础的内容展示是非常理想的,并且常常作为分列视图的一侧的导航工具出现,与之相关的内容显示在相反的一侧。

iOS目前包含两种类型的表格,平级和分组。

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

分组(Grouped)行以组的形式显示,可以有页眉处于其之前页脚处于其之后。这种样式的表格会至少包含一个组,每个组总是包含至少一行。分组表一般不会有索引标记。

注意表格的宽度(Think about table width. )太过狭窄的表格可能会导致文字的不连续,这样便会使用户很难去阅读且需要在垂直具体上快速浏览。同样太宽的宽表也很难读取和浏览,以及很难从内容中提取有效信息。

快速开始显示表内容(Begin showing table content quickly.)在显示前不要去等待大量的表格内容加载。及时使用文本数据去填充屏幕上的行,并在数据可用时显示更复杂的数据,如图像。这种方式可以立即给人们提供有用的信息,并提高应用程序的响应能力。在某些情况下,在新数据到达之前,显示陈旧的数据也可能是很有意义的。

内容加载搭配以进度条的进度展示(Communicate progress as content loads. )如果一个表的数据需要更多时间来加载,那么可以显示一个进度条或旋转加载器,以向人们保证您的应用程序仍在运行。

保持内容的新鲜性(Keep content fresh.)可以考虑定期去更新表的内容从而去展示及时的信息。但不要改变滚动的位置。相反,可以将内容添加到表的开头或结尾,并让人们在准备好时滚动到它。一些应用程序在添加新数据时会显示一个指示器,并提供一个跳转到它的控件。像包含一个刷新控制也是一个好主意,它可以方便用户在任何想要刷新的时候进行刷新。

避免将索引与包含在右侧已经存在其它交互控件的组合中(Avoid combining an index with table rows containing right-aligned elements.)索引一般会通过滑动手势进行控制。如果有其他交互元素驻留在附近,比如显示指示器,当出现手势时可能很难识别用户的意图,并且可能会激活错误的元素。

表格中的行

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

默认模式(Default)行的左边显示图像,后跟左对齐标题。对于显示不需要其它附加信息的项目来说,这是一个很好的选择。

子标题模式(Subtitle)一行中会有一个同样左对齐的子标题。这种样式在一行可视相似的表中工作得很好。子标题则有助于区分彼此之间的行。

模式1(Value 1)其包含一个左对齐的标题,右对齐的子标题则放在同一行上以较轻的字体呈现。

模式2(Value 2)右对齐标题,主标题紧跟在同一行上以较轻字体左对齐呈现。

所有标准表格单元格样式也同样支持图形元素,如勾选或其它控件指示。当然,添加这些元素会减少标题和字幕的可用空间。

保持文本简洁避免其显示不全(Keep text succinct to avoid clipping.)显示不全的单词和短语很难被浏览和理解。在所有表单元格样式中,文本截断是自动的,但根据您使用的单元格样式和截断的位置,它可以呈现或多或少的问题。

考虑使用自定义标题作为删除按钮(Consider using a custom title for a Delete button.)如果一个行支持删除,它有助于提供清晰性,请使用自定义标题替换系统提供的删除标题。

用户做出一个选择时给予相应的反馈(Provide feedback when a selection is made.)人们希望一行在内容被打开时突出显示。然后,人们期待一个新的观点出现了什么变化,如标记出现,表明已作出的选择。

为非标准表行设计定制的表单元格样式(Design a custom table cell style for nonstandard table rows. )标准样式在各种常见场景中很有用,但是一些内容或整个应用程序设计可能需要大量定制的表外观。