Human Interface Guidelines ——Tables

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Tables

Human Interface Guidelines链接:Tables

一个table将数据显示为可滚动的单列列表,这些列表可以分为多个部分或组。

 使用table可以以列表的形式干净有效地显示大量或少量信息。

 一般来说,table非常适合基于文本的内容,并且通常在split view的一侧显示为导航方式,相关的内容则显示在另一边。

iOS的两种table 样式

plain(使用较多)

行可以分为贴上标签的sections,可选索引(如通讯录右边的ABCD...)可以沿着table的右边纵向出现。 标题可以出现在section中的第一个项目之前,而页脚可以出现在最后一个项目之后。

grouped(一般用在“我的”等不常更改的页面)

行以组的形式显示,可以前面加标题,后面加页脚。 这种table样式总是包含至少一个组,每个组总是至少包含一行。一个grouped table不包含索引。

左:plain    右:grouped

使用时注意

·考虑table宽度

太窄(横向)的table可能导致截断和缠绕,使得它们很难在一定距离进行快速阅读和扫视。太宽的table也可能难以阅读和扫描,并可能从内容中夺走空间。

·开始快速显示table内容

在展示内容之前不要等待大面积的table内容加载。先立即用文本数据填充屏幕上的行,再在可行时显示更复杂的数据(如图像)。这种技术可以马上为人们提供有用的信息,并提高app的感知响应能力。在某些情况下,在新的数据到达之前,显示陈旧的数据可能会有意义。

·在内容加载时交代进展

如果表格的数据需要花费时间才能加载,请显示进度条或spinning activity indicator以向用户保证您的app仍在运行。

·保持内容新鲜

考虑定期更新您的table内容以反映更新后的数据,但不要更改用户滚动后所在的位置。作为替代,可以将新内容添加到table的开头或结尾,并让人们在准备好时继续滚动。有些app会在添加了新数据时显示一个 indicator,并提供一个control直接跳转至新数据。包含刷新control也是一个好主意,所以人们可以随时手动执行更新。

·避免将索引与包含右对齐元素的table行组合

索引是通过执行较大滑动的手势来控制的。如果其他可交互元素存在于附近(例如disclosure indicators),则可能难以在手势发生时辨别用户的意图,并且可能激活错误的元素。


Table Rows

使用标准table cell样式来定义内容在table rows中的显示方式。

基本(默认)

行左侧为可存在的图像,后跟左对齐的title。 这种方式适合展示不需要补充信息的项是一个很好的选择。 

有副标题的(Subtitle)

 一行的左对齐title,接下来是一行左对齐的subtitle。 这种风格在每行都看起来相似的table中适用。 额外的subtitle有助于将rows彼此区分开来。

左:默认    右:subtitle

下图左:左对齐的title,在同一行上有右对齐的subtitle

下图右:右对齐的title,然后是同一行上的左对齐subtitle

所有 table cell样式还允许图形元素,例如 checkmark 或 disclosure indicator(>)。当然,添加这些元素会减少可用于 title 和 subtitle 的空间。

使用时注意

·保持文本简洁以避免截断

截断的单词和短语很难扫视和辨认。文本截断在所有table cell 样式中都是自动的,它可以表现出一些问题,具体取决于使用的 cell 样式和截断发生的位置。

·考虑为删除按钮使用自定义title

如果一行支持删除并且需要提供明确性,请将系统提供的删除标题替换为自定义标题。

·在进行选择时提供反馈

当内容被点击时,人们希望一行可以简短的高亮。然后,人们期望出现新的view或一些东西进行改变,例如出现checkmark,表示已进行选择。

·为非标准table rows设计自定义table cell格样式

标准样式适用于各种常见场景,但某些内容或您的整体app设计可能需要大量定制的table外观。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端开发

微信小程序之生成图片分享

通过社交软件分享的方式来进行营销小程序,是一个常用的运营途径。小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该...

3112
来自专栏Coco的专栏

神秘的 shadow-dom 浅析

1824
来自专栏程序你好

在网站或桌面应用使用Font Awesome图标库

1492
来自专栏速成应用小程序开发平台

微信小程序开发实战教程使用开发工具从零开始无需编程步骤简单

他们也面临着两大难题:电商平台的竞争压力和服务半径的局限性。很多菜市场、超市以前试图用公众号、APP来作为引流工具,可实地测试发现,菜场环境复杂、网速较慢,顾客...

1033
来自专栏QQ音乐前端团队专栏

制作60fps的高性能动画

说到web的高性能动画,这部分内容其实已经是老生常谈的了,不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。

5234
来自专栏云飞学编程

Python爬虫!老司机详解爬虫,你想爬的都在这里

推荐下小编的Python学习群5421107414,不管你是小白还是大牛,小编我都欢迎,欢迎初学和进阶中的小伙伴。

712
来自专栏Material Design组件

Material Design — 提示框( Dialogs)

3609
来自专栏知晓程序

一个天气小程序和他们跳过的 47 个坑,你该如何避免?

1352
来自专栏编程微刊

jQuery实现多种切换效果的图片切换的五款插件

1551
来自专栏macOS 开发学习

Mac开发跬步积累(五): Dark Mode下适配你的UI界面

在macOS 10.9+ 的时候,苹果就提供了NSAppearance这个类来协助AppKit管理App的UI控件. NSAppearance决定着AppKit...

802

扫码关注云+社区