表格|好的表格信息展示都有这三个特征( 二 )


文章插图
横向『偷取』屏幕外空间、行高模数设定当压缩列宽也无法在有限空间内展示大量的数据指标列时,我们可以借助横向滚动来『偷取』屏幕外更多空间。
横向滚动需用户拖动滚动条进行浏览,有一定操作成本,所以要结合业务实际情况选用是否利用屏幕外横向空间。
随着行和列的增加,用户的瞬时记忆会达到极限,超过“7±2原则”的范围。
3)用户需要依靠辅助信息去阅读表格内的数据,防止遗忘某列数据的意义
因而当表格数据列较多横向滚动时,建议为用户固定重要信息列,如标题列、操作列。
同时用户浏览表格时是符合F型扫视原则的,建议固定列显示在表格左侧,方便用户从左至右浏览数据、从上至下对比数据时能够清晰定位当前所浏览数据的主体是什么,同时可根据需要快速发起操作。
表格|好的表格信息展示都有这三个特征
文章插图
同理,用户拖拽纵向滚动条来阅读数据时,可固定表格的表头,帮助用户在阅读过程中清晰知晓单元格数据的意义。
表格|好的表格信息展示都有这三个特征
文章插图
用户自定义展示信息针对需展示大量数据的情景,我们除了【偷取】屏幕外空间外,可以根据B端产品提供的数据表格是覆盖全部用户角色的全量数据的特点,让不同用户角色来自定义想要浏览的信息,从而提升表格的可读性。
下图为百度信息流推广平台的自定义列功能,用户可根据需要选择展示的数据列,系统将在用户完成选择后,主动帮用户保存自定义内容,下次登录后,表格依然按照用户定义的数据来展示。
表格|好的表格信息展示都有这三个特征
文章插图
二、高效扫视无论是在表格中要明确的定位数据,还是顺序阅读,高效扫视都是B端用户一个很重要的诉求,我们在设计表格时可尝试一些有效手段提升用户浏览获取信息的效率。
1. 合理的对齐方式数据信息本身包含多种格式,可遵守一个基本原则即文字左对齐,符合从左到右的阅读习惯;数据信息右对齐,方便数据大小的直观对比。
具体对齐方式可参考我们建议的方式:

  • 文本字段:可点击字段、普通文本类、数字、字母等,长短参差不齐,左对齐;
  • 格式化字段:日期、时间、部分枚举类等,字符数一致且较短的,左对齐;
  • 数据字段:金额、数据、百分比。带小数点等数据,方便对比为主,右对齐。

表格|好的表格信息展示都有这三个特征
文章插图
2. 去除视觉杂音,强调对比关系1)正确使用分割线,实现对表格行与列的强调
横向分割线可强调行内信息的连续性。
垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。
但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。
因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。
表格|好的表格信息展示都有这三个特征
文章插图
2)斑马线作用有限
斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。
比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。
要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。
对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。
表格|好的表格信息展示都有这三个特征
文章插图
3. 突显重要内容的视觉重量前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。
可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。
例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。
表格|好的表格信息展示都有这三个特征
文章插图
三、精简克制体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。
1. 适度隐藏信息1)隐藏低频操作
当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。
用户对表头的诉求是定位数据指标执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏。