IOS 12设计规范(8-11)内容视图:表元素(Tables)

8.11      表元素(Tables)

表元素以一个可滚动的单列列列表进行展示,其中的行可以对其进行相应的分组。表元素能够以列表的形式明确有效地显示⼤量或简略略的信息。通常,表元素是基于文本格式的最佳形式,表元素常常作为一种导航⼯工具出现在分屏 视图的一侧,而与之相关的内容显示在另一侧,关于分屏窗口请查阅 Split Views。

 

iOS 定义了两种表格样式:平铺式和分组式。

IOS12设计规范

平铺式(左):行可以被分为若⼲干带标签的段落,而表格的右侧可以出现垂 直排列的索引符号(译者注:即从字⺟母 A 到 Z 的字⺟母索引条,如通讯录的联系人列表页)。页眉会在这一节的首个条目前显示,页脚会在最后一个条   目后显示。

分组式(右):行会被分成多个分组显示,每组都能够以页眉开始,页脚结束。这种类型的表格⾄少包含一个分组,每个分组中⾄少包含一行列表,分   组型列表中没有索引条。

考虑表元素的宽度:过窄的表元素会导致文本被截断或者挤到一起,用户很难快速扫浏览这些内容。过宽的表格也很难让用户快速浏览,需要用内容来 填充部分空间。

尽快呈现表元素中的内容:不要等表格相关的所有数据都加载完成才一次性显示出来,可以先在屏幕中显示文本内容,如图像等较为复杂的数据则加载 完成后再显示出来。这种技术可以让用户尽快看到有用的信息,同时也增加 了App 交互响应效率。有时,在新数据加载出来前,显示旧数据也是有用的。

请在内容加载时给予用户反馈:如果表元素中的数据需要一定时间来加载, 请显示一个进度条或动态旋转指示器器,让用户知道 App 还在运行,且在执 行数据加载中。

保持最新的表元素内容:定时更新(后台读取)并准备表元素中的最新数据, 但不要改变屏幕当前的显示情况。用户在滚动内容时才能提前做好准备,并 将新的内容添加到表的开头或结尾。有些 App 在加载完新数据时会出现一 个提示,并提供了某操作可以跳转到新数据的位置。在 App 中包含一个刷 新控件也是不错的主意,这样用户可以在任何时候手动刷新,关于刷新控件 的更多信息请查阅 Refresh Content Controls。

避免在包含右对⻬齐方式的表元素中使用索引:索引是通过⼤幅度的滑动手势来控制的,当使用手势操作时,如果其他交互元素(例如详情指示器器)停留在附近,可能系统会发⽣对操作的误判而导致启动了其他元素。

 

表行

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

IOS12设计规范

基本型(默认)(左):包含一个在行左端的图片(可选)和一个与图片右边 左对⻬齐的⽂字标题,适用于显示不需要补充信息的项目。 开发者指南,请参阅UITableViewCell 里的 UITableViewCellStyleDefault

副标题型(右):包含一个左对⻬齐的⽂字标题(一行)和在下方同样左对⻬齐的副标题,这些相似的行在一个表中可以得到很好的展示,因为副标题可以 用来区分不同的行。

IOS12设计规范

右提示(Value1)。左对⻬齐的标题与右对⻬齐的副标题在同一行中显示。请参阅 UITableViewCell 里的 UITableViewCellStyleValue1。

左提示(Value2。右对⻬齐的标题后面跟着一个左对⻬齐的副标题,并在同一行中显示。所有表元素的标准单元格样式都允许使用图形控件,例如复选标记或详情指 示器器,当然,增加这些元素后会减少标题和副标题的使用空间。

请使用简洁的文本,以避免被截断:被截断的单词和短语让用户难以阅读和理解。所有类型的表元素单元格都会⾃动截断文本,但不同的单元格样式和 截断发⽣的位置会产⽣问题。

你可以为“删除”按钮自定义一个标题:如果你自定义的标题可以让用户更   清晰地理解该操作的含义,你可以替换系统默认的 “删除” 文本。前提是这 一行支持“删除”操作。

在用户的选中操作中给予反馈:当用户在点击某个可选中的项目时,他们会 希望这个行应该有短暂的⾼高亮,点击过后,用户期望出现一个新的视图或者 有什么其它改变,例如出现一个勾选标记,以表明这个项目已经被选中或激活。

为非标准的表元素设计一个自定义单元格样式:标准样式适用于各种常⻅    场景,但有些内容或整个 App 设计可能需要一个高度自定义的表元素外观, 想了解如何创建⾃⼰的单元格,请参阅 Table View Programming Guide foriOS 里的 Customizing Cells。

文章转载请注明出处,并需展示来源网址!:淘盒子 » IOS 12设计规范(8-11)内容视图:表元素(Tables)

赞 (1) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏