专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
51好读  ›  专栏  ›  微交互

表格设计深入研究——行高设定

微交互  · 公众号  · 设计  · 2017-12-04 08:24

正文

请到「今天看啥」查看全文


在这四种不同类型的表格中用户的主要目标与行为如下图所示:



从上图可以看出用户还是经常要对表格进行扫视的。因此一屏显示多少行对用户确实有所影响,它会影响用户扫视的效率。但究竟有多大的影响,还需要我们进一步研究。


2.一屏显示多少行对用户有多大影响?

虽说现在这个时代越来越趋向于大屏化,但使用笔记本的用户数量也不少。以腾讯云为例,使用腾讯云的用户的设备分辨率分布如下图所示:



可以看出虽然大屏用户占比最多,但1366x768的小屏用户也还是有一定数量的。在1920x1020的尺寸下,以腾讯云中最常见的表格为例,首屏可以显示11行。大屏用户表示,他们对一屏显示多少行并没有多少感知。

但对于小屏用户,在表头和页脚固定的情况下,一次只能看到6行左右,对扫视的效率确实有所影响。但是如果不固定表头和页脚,滚动时不限定区域而是全屏滚动的话,一屏也可以看到10行的内容。


3.如何提高用户扫视的效率

行高固然可以影响到用户扫视的效率,但并不是主要影响,为了提升扫视效率还有多种有效的方式:

(1)尽量整屏滚动,提供更大的浏览空间

正如刚刚所举的例子,固定表头和页脚后,在固定的小区域内滚动会非常局促,而且区域滚动和全屏滚动同时存在时体验也很不好。当然某些情况下确实需要固定表头以帮助用户识别信息的话,在全屏滚动上去后固定表头也不是不可以。

(2)分页组件的“每页显示n行“尽量提供更多选择

在用户操作时,滚动鼠标的成本要比点击一个按钮的成本要小,所以分页组件中“每行显示n行“的选项应包含50、100这样较大的数值,避免用户在多行内容中查找内容时需要频繁的翻页。







请到「今天看啥」查看全文