表格|好的表格信息展示都有这三个特征( 三 )
垂直分割线在缩减元素之间的距离后也能区分不同元素,更好的强调纵向数据对比。
但只要遵循良好的对齐方式,通常不展示纵向分割线,避免信息干扰。
因而表格中通常仅使用横向分割线和底色分割,提升表格阅读效率。
文章插图
2)斑马线作用有限
斑马线即隔行(列)变色。它能让行(列)间界限更为明显,但由于与分割线的作用类似,起到的作用有限,可针对不同场景酌情考虑是否使用。
比如针对不同类型的数据(如总和、平均值)使用不同底色来区分,可以更突出强调该数据。
要注意的是,隔行(列)换色的两种颜色不能反差过大,否则看来太“跳跃”。
对同一类数据而言,分割线就已经能够明显区隔,所以可不使用斑马线,但需要给出单行的悬浮状态,强化横向导视,避免出现列数过多引起数据错行的问题。
文章插图
3. 突显重要内容的视觉重量前面我们提到表格呈现的数据信息除文本外,还有其它一些可视化数据。
可视化一方面提升了列表视觉表现力,增加差异化,另一方面让内容更加突出,提升阅读效率。
例如:数据列中数据异常时,最好可以醒目的形式突显,让用户一进入页面就能快速注意到异常状况。
文章插图
三、精简克制体验好的表格一定是克制的,克制应表现在信息的适度隐藏以及内容折行与截断展示原则。
1. 适度隐藏信息1)隐藏低频操作
当表头需要承载排序、表头筛选、提示等功能时,不建议一股脑的将所有功能展示出来。
用户对表头的诉求是定位数据指标执行操作的,因此可根据具体业务定义展示哪些操作,将其它操作隐藏。
有需求时用户主动触发再展示。
比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。
文章插图
对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。
文章插图
2)隐藏辅助信息
表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。
指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用。
但如果全部拿出来在表格列展示,会让表格变得臃肿不易读。
此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。
例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。
文章插图
再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。
文章插图
2. 设定折行与截断规则B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的。
很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。
推荐阅读
- 安九|网红安九售假雅诗兰黛,条形码无商品信息,多个平台鉴定为假货
- APP过度收集个人信息当禁止
- 考试|行业观察丨在线学习、远程考试成新趋势,信息安全需重视
- 智通财经|太钢不锈(000825.SZ)董事柴志勇因涉嫌泄露内幕信息被证监会立案
- 太钢不锈|涉嫌泄露内幕信息 太钢不锈董事柴志勇遭证监会立案
- 信息页|企业微信4.0重大版本正式发布:支持微信客服、视频号
- 出行|网约车12月份共收到订单信息68123万单,环比上升9.3%
- 个人信息|国家网信办:不得强制要求用户提供非必要个人信息
- 信息安全|2021年度IT影响中国:银核星际离盾PLUS获“2021年度最佳信创产品”奖
- 童话爸爸|山水比德:与童话爸爸、华付信息签署战略合作协议