MODULE 13 / LESSON 01
图表选型与诚实表达
按比较、趋势、分布与关系选择图表。
先理解这个概念
条形图适合类别比较,折线适合有序时间趋势,散点适合两个量的关系,直方图适合分布。图表应回答一个问题。单位、范围、来源与时间窗口决定数据是否能被正确理解。
图表选择取决于比较问题。比较类别大小、随时间变化、分布、关系和部分占比,需要不同编码方式。位置与长度通常比面积和角度更容易精确比较。图形本身不能补救数据口径不一致;先明确数据是什么,再决定怎样画。
图表是数据查询结果的视图,先定义问题再选择渲染方式。
记住这三个原则
- 01
条形长度比较通常从零基线开始,避免夸大差异。
- 02
折线轴可按分析需要缩放,但明确标识范围。
- 03
颜色、标签与图例减少来回查找的负担。
实际设计时,分三步做
- STEP 01
把问题写成一句话,例如“哪类支出最多”或“支出是否持续增长”,区分类别比较与时间趋势。
- STEP 02
检查单位、时间范围、缺失值与聚合方式。类别大小可先考虑条形,连续趋势可先考虑折线,再按任务调整。
- STEP 03
检查坐标轴、排序、基线和标注是否造成误解,并提供可读取的数值或表格,避免只能通过颜色和悬停理解。
一个容易理解的例子
用截断纵轴的柱状图把 98 与 100 画成巨大差距。
柱状图从零开始,或直接标注数值与 2 的差值,清楚解释比较。
视觉编码应该忠实于数据量级。
展开看:从场景到设计决定
想比较餐饮、交通和购物支出,条形图比多个圆环更容易横向比较。条形长度表达金额时通常应从零开始,否则小差异被夸大。观察每月趋势可以用折线,但缺少某个月数据时不能默认为零;应标记缺失或断开。课程示例的目的在于解释编码与问题的关系,而不是宣布某种图形永远最佳。
适用边界与取舍
折线轴不一定必须从零开始,但需要清楚刻度和语境,避免制造不成比例的波动感。饼图适合少量简单占比,复杂类别和精确比较往往需要更清楚的替代。
把这个原则用一次
先做一个小判断
月收入变化、部门人数、身高分布分别用什么图?
再完成一份设计练习
把同一组月度分类支出分别用于回答“哪个类别最多”和“总支出如何变化”,设计两张图。
不要用三维饼图制造难以比较的面积和透视差异。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
Apple Human Interface GuidelinesMaterial Design 3