返回《iOS Human Interface Guidelines译文》

表格视图

表格视图在一列里用很多行展示大量内容。

表格视图

外观和行为

表格视图在一行行格子里展示信息,可以划分为块或进行归组。用户可以拖动内容,以显示更多行。用户可以点击选中一项,然后用控件增加或删除行,选中多拍,查看某一行的更多信息或者展开另一个表示视图。当用户选中某项目时,表格会短暂地高亮。

如果选中某项导致开始浏览新一屏内容, 那么在新一屏滑入位前这一行就会高亮。 当用户再回到原来那一屏的时候,原来被选中那一行会再次高光,提醒用户刚才选过什么。

iOS 定义两种表格视图,可以通过外观来区分:

朴素型(Plain)表格从屏幕一边开始展示表格,一直到另一边结束。一行里可以有多个内容段, 右侧可选择展示一列半透明编号栏。 每行开头可以有眉标, 尾部可以有角标。默认情况下,每行的背景是白色的。

分组型(grouped)表格包含至少一组列表。每一组总是包含至少一项。每一组起始于眉标文字,收尾于脚标文字(A group can be preceded by header text and followed by footer text.这一句真不好翻译啊) 。默认情况下,分组被放置在蓝色背景上,组内的背景是白色的。分组型表格没有编号。

iOS 提供了一些表格元素,用于拓展表格的功能。除非特别标注,这些元素仅适用于表格视图。

iOS 3 及以后的版本提供了 4 种表格视图样式,为朴素型和分组型表格提供了最常见的表格样式。每一种样式最适合的表达内容有所不同。

默认型。默认型的单元格样式包括默认左对齐的标题,每一行最左边还有可选的图片。

在默认样式的单元格里, 文本的外观暗示它代表项目的名称或标题, 左对齐也使列表容易浏览。这使得默认样式很适合展示一列不需要辅助信息就能加以辨别的项目。

副标题型。 默认型的单元格样式包括默认左对齐的标题, 每一行最左边还有可选的图片。每个标题下面还有副标题。主标题黑色,副标题字号小一点,是灰色的。

在副标题型里, 字符的显著性暗示它是项目的名称或标题, 而副标题外观暗示它包含与主标题相关的辅助信息, 左对齐也使列表容易浏览。 这种样式适合项目看起来差不多的情况,用户可以利用额外的信息来帮助区分项目。

Value1 这种样式用左对齐的黑色字体显示主标题, 用右对齐的小号蓝色字展示副标题。图片不适合这种样式。

在这种单元格里, 字符的外观暗示它是项目的名称或标题, 而副标题的外观暗示它包含与主标题相关的重要信息

左对齐和字体使列表容易浏览, 右对齐的副标题将用户的注意吸引到它提供的相关信息上。 这种布局尤其适合展示项目当前的状态, 可能是该项目对应的子列表中被选中的那一项。

Value2.这个样式展示右对齐的蓝色子标题,右边紧邻左对齐的黑色主标题。图片不适用本样式。

在 Value2 单元格中,右对齐、受限的宽度以及字体暗示这是标题,但左对齐的内容更加重要。

在这种布局下, 每一行两部分内容的相接点位置相同。 这在两列内容间创建了整齐的一列空隙,用户阅读右侧的主内容会更加轻松。

指南

你可以使用表格视图来高效地展示或多或少的信息。例如以下情景:

♦ 提供一系列可供用户选择的项目。可以使用勾选标记向用户展示以选中的内容。 当呈现用户点击表格中某一项后出现的一列选项时, 任何一种样式都适用。 当呈现用户按下按钮或其他不在表格中的元素后出现的列表时,适用朴素型。

♦ 展示层级信息。 朴素型样式尤其适合展示层级信息。 列表中的每一项都是通往各种子信息的入口。用户通过在一系列列表中的选择来浏览层级信息。这个图标暗示用户点击该项后还会有子列表。

♦ 呈现概念上可归组的信息。两种表格样式都允许在各段的分割处添加段眉和段脚,以示分组。 分组性表格的圆角可以很清晰地分割各组信息, 即使在快速滚动时效果也很好。

♦ 展示有编号栏的信息。朴素型样式支持编号,可以让用户快速找到需要的信息。编号通常是贴在屏幕右边缘的一栏字符,通常是按字母表排序的字母。用户触摸(或拖拽)编号,展示相关的区域。

如果你要用编号栏,避免在屏幕右侧边缘展示信息(比如这种图标) ,因为会与编号栏冲突。

在用户选择列表项的时候提供反馈。用户希望在点击列表项的时候它能高光一下。点击后用户期望响应的动作会立即执行:出现一个屏新东西或者项目被勾选。

有时, 即使与被选中项目相关的辅助细节或控件已经在同一屏出现了, 被选中项还处于高光态。但是,我们不鼓励这样做。因为一列项目,加上选中项,加上相关的细节或控件,会乱成一锅粥。

用动画展示用户对列表项的改变。这可以提供反馈,增强用户直接控制的感觉。在"设置"中,关闭"自动调整时间"后,列表组会慢慢展开,展示设置"时间和日期"的区域。

如果表格内容很复杂,避免等到所有信息都载入后再展示。应该立刻展示文本,然后等复杂的信息完备后再展示它们。 这种技术可以立刻给用户一些有用的信息, 增加程序的反馈性。

考虑在等待载入信息时展示原有信息。如果你的程序展示的信息不太常变,这种技术可以让用户立刻看到一些有用的信息。如果信息经常变动,那就算了吧。在决定这样做之前,调查一下信息更新的频率以及很依赖新信息的用户所占的比重。

如果数据很复杂或载入很慢,要提供信号,暗示处理进行中。如果表格包含的信息很复杂,可能无法立刻提供有用的信息。这种情况下,不要只展示空格子。因为这会暗示程序挂了。你应该在屏幕中心放一个活动指示器,配上"载入中"这样的字符。这会给用户提供反馈,让他们知道程序还在继续努力。

朴素型表格的高度不能为适应内容而变化。分组型表格的行高是可以变得,但是在朴素型表格里就看起来很乱。

Value1 和 Value2 的表格很适用于分组型。 虽然几种表格样式你可以随便用, 但 value1和 value2 与分组型表格最搭配。例如, "设置"用了 value1,iPhone 版 Contacts 用了value2。

尽量保持标题简洁,避免被截断。单词和短语被截断后很难阅读和理解。在各种表格样式中, 文本截断都是自动的。 但这可能因单元格样式和截断位置的不同而引起各种问题。

♦ 在默认样式中, 短的文本标签最好。 如果截断不可避免, 尽量把重要的词放在前面。

♦ 在副标题型样式中,短的文本标签也是最好。如果截断不可避免,尽量把重要的词放在前面。如果副标题的文字被截断了,用户可能不会太介意,因为这里的信息是辅助主标题的。

♦ 在 Value1 样式中,自动截断很难避免。因为要在同一行展示两节信息。但截断也是有必要的,否则就没办法在两节信息间留下分隔空隙了。

♦ 在 Value2 样式中,截断的字段会破坏两节文字间整齐的空隙。当行与行之间的空隙不一致时,用户会很难浏览右侧的细节信息。

可以通过增加行高来容纳更多的文字,以避免截断。但这会导致如下问题:

♦ 你需要系统地检查一遍文字是否能被栏充分地包起来。 竖屏模式和横屏模式都要检查,因为表格宽度也会有影响。

♦ 不要在一个方向上是包好的,而在另一个方向上不是

♦ 不论采用什么表格样式,自适应的行高都会影响表格的整体展示效果。

如果你想用非常规的方式展示表格,最好不要和标准样式差别太大。