MODULE 13 / LESSON 01

图表选型与诚实表达

按比较、趋势、分布与关系选择图表。

49 / 60 课走向真实交付

先理解这个概念

条形图适合类别比较,折线适合有序时间趋势,散点适合两个量的关系,直方图适合分布。图表应回答一个问题。单位、范围、来源与时间窗口决定数据是否能被正确理解。

图表选择取决于比较问题。比较类别大小、随时间变化、分布、关系和部分占比,需要不同编码方式。位置与长度通常比面积和角度更容易精确比较。图形本身不能补救数据口径不一致;先明确数据是什么,再决定怎样画。

用程序员的语言说

图表是数据查询结果的视图,先定义问题再选择渲染方式。

记住这三个原则

  1. 01

    条形长度比较通常从零基线开始,避免夸大差异。

  2. 02

    折线轴可按分析需要缩放,但明确标识范围。

  3. 03

    颜色、标签与图例减少来回查找的负担。

实际设计时,分三步做

  1. STEP 01

    把问题写成一句话,例如“哪类支出最多”或“支出是否持续增长”,区分类别比较与时间趋势。

  2. STEP 02

    检查单位、时间范围、缺失值与聚合方式。类别大小可先考虑条形,连续趋势可先考虑折线,再按任务调整。

  3. STEP 03

    检查坐标轴、排序、基线和标注是否造成误解,并提供可读取的数值或表格,避免只能通过颜色和悬停理解。

一个容易理解的例子

BEFORE / 常见问题

用截断纵轴的柱状图把 98 与 100 画成巨大差距。

AFTER / 可以这样改

柱状图从零开始,或直接标注数值与 2 的差值,清楚解释比较。

视觉编码应该忠实于数据量级。

展开看:从场景到设计决定

想比较餐饮、交通和购物支出,条形图比多个圆环更容易横向比较。条形长度表达金额时通常应从零开始,否则小差异被夸大。观察每月趋势可以用折线,但缺少某个月数据时不能默认为零;应标记缺失或断开。课程示例的目的在于解释编码与问题的关系,而不是宣布某种图形永远最佳。

适用边界与取舍

折线轴不一定必须从零开始,但需要清楚刻度和语境,避免制造不成比例的波动感。饼图适合少量简单占比,复杂类别和精确比较往往需要更清楚的替代。

YOUR TURN

把这个原则用一次

先做一个小判断

月收入变化、部门人数、身高分布分别用什么图?

再完成一份设计练习

把同一组月度分类支出分别用于回答“哪个类别最多”和“总支出如何变化”,设计两张图。

容易踩的坑

不要用三维饼图制造难以比较的面积和透视差异。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

Apple Human Interface GuidelinesMaterial Design 3