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


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

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

表格|好的表格信息展示都有这三个特征
文章插图
2. 去除视觉杂音,强调对比关系1)正确使用分割线,实现对表格行与列的强调
横向分割线可强调行内信息的连续性。

推荐阅读