问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

设计更好的数据表格:从数字到背景色的全方位指南

创作时间:
作者:
@小白创作中心

设计更好的数据表格:从数字到背景色的全方位指南

引用
1
来源
1.
https://www.shejidaren.com/data-table-design.html

表格设计是数据可视化的重要组成部分,良好的表格设计能够帮助用户更快速地获取信息,理解数据。本文将从数字、对齐、标签、标题、单位、表头、分隔线和背景色等多个维度,为你详细介绍如何设计出更清晰、更易读的数据表格。

了解数字

不是所有的数字生来都是平等的。这里所说的数字类型包括旧体数字、等高数字、比例数字和表格数字。

  • 旧体数字 vs. 等高数字:旧体数字在句子中看起来美观,而等高数字在表格中能加强栅格化结构的效果。

  • 比例数字 vs. 表格数字:比例数字为符合字形的色彩设计,而表格数字个头相似,数列看起来整齐划一。

使用等高表格数字

处理数据表时,确保使用等高表格数字字体。Adobe产品有专门的“opentype”字体面板,CSS也提供相关语法支持。免费字体如Work Sans可免费使用等高数字。若找不到合适的等高表格数字字体,可以使用等宽字体。

对齐

遵循3½规则:

  1. 数字右对齐
  2. 文本左对齐
  3. 标题与数据对齐
    3½. 千万不要居中对齐!

数位一致 = 更好的对齐

保持数位一致,通常小数点后的小数位数在每一列要统一。数位用得越少越好。

适当使用标签

给数据添加标签可以让表格更容易理解。

表格标题

为表格起一个清晰明了的标题非常重要,这能让表格在不同场合独立使用。

单位

数据要有单位,但不必每条都加,每列第一条加上即可。

表头

表头要简短,让读者注意力集中在数据本身。

惜墨如金

尽可能减少使用图形元素,保持简洁。

分隔线(表格边框)

分隔线要浅色,不要妨碍快速浏览。水平分隔线最好用,斑马条纹最不好用。

背景

区分不同领域数据时可设置背景色,但要避免使用过多颜色,特别是对色盲用户不友好。

小结

通过设计更有效率、更清晰、更易使用的表格,我们可以大大减少以往令人痛苦的数据分析经历,提高理解的能力。

延伸阅读与参考网站

  • Five Thirty Eight:所有数据都用Decima Mono字体
  • Butterick’s Practical Typography:字体排版问题的权威参考
  • Edward Tufte:写作设计敏感度的权威参考
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号