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 条评论
登录 后参与评论

相关文章

来自专栏子勰随笔

再看Android官方文档之ActionBar和兼容性

1698
来自专栏向治洪

android 优化之布局优化

布局优化的思路很简单,尽量减少布局文件的层级,看过系统源码的都知道,Android view绘制都是逐层绘制的,所以布局的层级少了,decodeview的时候绘...

1996
来自专栏游戏开发那些事

【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一...

772
来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

1515
来自专栏数据的力量

我们来做瀑布图

1243
来自专栏腾讯大讲堂的专栏

打造H5动感影集的爱恨情仇【动画性能篇】

作者:谭照强,热爱折腾前端,喜欢新奇创意的程序员,业余喜欢玩摄影,弄咖啡。 “你听说过动感影集么?” 动感影集是QQ空间新功能,可以将静态的图片轻松转变为动态的...

20410
来自专栏七夜安全博客

python爬虫:将本人博客园文章转化为MarkDown格式

1173
来自专栏Python中文社区

高阶爬虫实战:破解极验滑动验证码

今天给大家带来的是极验验证码的selenium破解之法,是不是有点小激动呢,小伙伴们等不及了,让我们赶紧直入主题吧。

1946
来自专栏iOS开发日记

你不知道的Mac屏幕显示图像

首先从过去的 CRT 显示器原理说起。CRT 的电子枪按照上面方式,从上到下一行行扫描,扫描完成后显示器就呈现一帧画面,随后电子枪回到初始位置继续下一次扫描。为...

4377
来自专栏腾讯社交用户体验设计

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

1244

扫码关注云+社区