设计更好的数据表格:从数字到背景色的全方位指南
创作时间:
作者:
@小白创作中心
设计更好的数据表格:从数字到背景色的全方位指南
引用
1
来源
1.
https://www.shejidaren.com/data-table-design.html
表格设计是数据可视化的重要组成部分,良好的表格设计能够帮助用户更快速地获取信息,理解数据。本文将从数字、对齐、标签、标题、单位、表头、分隔线和背景色等多个维度,为你详细介绍如何设计出更清晰、更易读的数据表格。
了解数字
不是所有的数字生来都是平等的。这里所说的数字类型包括旧体数字、等高数字、比例数字和表格数字。
旧体数字 vs. 等高数字:旧体数字在句子中看起来美观,而等高数字在表格中能加强栅格化结构的效果。
比例数字 vs. 表格数字:比例数字为符合字形的色彩设计,而表格数字个头相似,数列看起来整齐划一。
使用等高表格数字
处理数据表时,确保使用等高表格数字字体。Adobe产品有专门的“opentype”字体面板,CSS也提供相关语法支持。免费字体如Work Sans可免费使用等高数字。若找不到合适的等高表格数字字体,可以使用等宽字体。
对齐
遵循3½规则:
- 数字右对齐
- 文本左对齐
- 标题与数据对齐
3½. 千万不要居中对齐!
数位一致 = 更好的对齐
保持数位一致,通常小数点后的小数位数在每一列要统一。数位用得越少越好。
适当使用标签
给数据添加标签可以让表格更容易理解。
表格标题
为表格起一个清晰明了的标题非常重要,这能让表格在不同场合独立使用。
单位
数据要有单位,但不必每条都加,每列第一条加上即可。
表头
表头要简短,让读者注意力集中在数据本身。
惜墨如金
尽可能减少使用图形元素,保持简洁。
分隔线(表格边框)
分隔线要浅色,不要妨碍快速浏览。水平分隔线最好用,斑马条纹最不好用。
背景
区分不同领域数据时可设置背景色,但要避免使用过多颜色,特别是对色盲用户不友好。
小结
通过设计更有效率、更清晰、更易使用的表格,我们可以大大减少以往令人痛苦的数据分析经历,提高理解的能力。
延伸阅读与参考网站
- Five Thirty Eight:所有数据都用Decima Mono字体
- Butterick’s Practical Typography:字体排版问题的权威参考
- Edward Tufte:写作设计敏感度的权威参考
热门推荐
西柚和他汀类药物的危险组合,你知道吗?
肾上腺高血压的5大症状,这些表现要警惕
西柚与他汀类药物的致命组合:一个柚子引发的肾衰竭
柚子竟然是他汀类药物的“宿敌”?
柚子与他汀药物:一场危险的邂逅
长白山G331:串起10个边境县市的自然人文美景
河南洧川古镇:豆腐制作入非遗,传统集市变身旅游打卡地
冬游洧川:2000年豆腐飘香,万人集市重现中原古韵
河南洧川古镇:豆腐非遗传承五百载,大集市井烟火不息
河南省非遗美食:洧川豆腐领衔古镇“三宝”
长白山冬季旅游攻略:雪景、温泉、滑雪与美食全指南
“九月九”和“七仙女”字谜大揭秘:文化内涵与理性购彩指南
白雪公主带你走进《童话镇》的秘密
释悟空与孙悟空:名字背后的神秘联系
孙悟空,为何姓“孙”?菩提祖师的深意
适量服用鱼肝油有益眼睛健康,专家提醒注意风险
2024中国IP报告:网文影视化改编成效显著,出海影响力扩大
商用炉灶清洁指南:三种类型,六步搞定
《春花焰》播出效果不佳,刘学义演技获认可
刘学义演绎《春花焰》中的复仇王爷:偏执与理智的双重奏
冬日洧川古镇:大集带火千年古迹,特色美食引游人
人物性格如何在对话中体现?三原则+实战技巧
让对话活起来:对话体文章写作技巧全解析
第三人称到第一人称:卡夫卡《变形记》的叙事艺术
好莱坞环球影城:洛杉矶必打卡的电影主题乐园
全国爱耳日 | 50%听力损失可预防,专家解读防治要点
中考数学必备:胡不归模型解题秘籍
胡瑗:以教育理想诠释“胡不归”的北宋名儒
“胡不归”:从《诗经》到现代,一个成语的文化之旅
视频加速播放:提升效率的神器,你真的会用吗?