diagram-design 这个项目名听起来像一张设计稿，但真正做过的朋友会知道，它更像一次信息整理的手术。前一阵我在整理一套内部报表系统时，被问到最多的一个问题就是：“这些图到底在说什么？”数据全对、配色不丑、每个系列也都有标签，但阅读者盯了五秒还是答不上来。那一刻我才意识到，图表设计的核心从来不是把图画得好看，而是把信息排序做对。这一篇我完整复盘了整理图表设计规范的过程，包含信息分层、图形映射、视觉减法、实例修改和落地细节，适合正在做数据可视化、报表系统、前端图表开发的读者直接参考。
1. 先想清楚信息分层，再动手画图
1.1 “一图一主语”的检查方法
图表设计最常见的病根，是信息过载。业务方总希望把当期值、累计值、同比、环比、目标值、预警线全部塞进同一张图，结果就是一团麻。我在项目里立的第一个规矩是：每张图只能有一个主语。这个主语通常是一个问题，比如“本周销售是否达标”“哪个渠道转化率最高”“近三个月用户活跃是涨是跌”。主语一旦确定，图上的所有元素都要回答这个问题，回答不了的就拆出去。
这个原则做起来比听起来难。有一回做经营看板，对方想在一张折线图里同时展示收入、新增用户数、订单量。三个指标量纲完全不同，叠在一起只有靠多轴才能勉强显示，结果读者根本不知道眼睛该跟哪条线走。后来拆成三张独立图表，每张图一行标题直接写明结论，反而没人抱怨信息不够了。你可以用这个检查方法自测：用手遮住图表的标题和图例，如果猜不到这张图想表达什么，那它就没有主语。
1.2 主信息、次信息、参照信息的三级分离
确定主语后，把图上的所有元素分成三个层级。主信息是读者第一眼要看到的东西，必须给最强的视觉权重；次信息是辅助理解主信息的元素，比如坐标轴刻度、数据标签、图例；参照信息是帮助读者建立背景的内容，比如目标线、同期均值、行业阈值。
这里有个我在项目中反复踩的坑：参照信息经常被画得太抢眼。比如目标线用红色实线，结果读者第一眼看到的是那条红斜线，而不是实际业务的柱子。后来我约定，参照信息统一用浅灰色，线宽减细，甚至用虚线；次信息的字号控制在主信息的一半以下；只有主信息才允许使用鲜明颜色和粗线条。判断标准也很直白：把图缩成小图或者拿远看，第一眼看清楚的东西必须是主信息。
2. 图表“诚实度”：数据到图形的映射怎么选才不误导人
2.1 编码强度排序：位置和长度优先
图表设计本质上是在做数据的视觉编码，也就是把数值映射到位置、长度、角度、面积、颜色等视觉通道上。人眼对“位置差异”和“长度差异”的感知最敏锐，对“面积大小”和“颜色深浅”的分辨能力则弱得多。这也是为什么很多设计师反复强调：能靠长度比较就尽量不要靠面积，能靠位置表达趋势就尽量不要靠颜色深浅。
举个具体的例子，两个值分别是50和60，如果做成柱状图，长度差非常直观；如果做成饼图，读者需要比较两个扇形的面积和角度，感知上误差就大很多。再比如用气泡图展示数值大小，气泡半径翻倍实际面积是四倍，设计者如果直接按数值等比例映射半径，视觉上会严重夸大差异。所以我在做图前都会写一句话：“主信息用位置或长度表达，辅助信息才用颜色或面积。”
2.2 常用图表的选型对照
选型这件事很多人当成经验主义，但其实背后有一套判断逻辑。我整理过一个极简选型表，直接对照使用：
| 读者要做的判断 | 推荐图形 | 关键注意点 |
|---|---|---|
| 比较各项大小 | 柱状图 / 条形图 | 纵轴或横轴从0开始，条形图按值排序 |
| 观察随时间的变化 | 折线图 | 时间间隔保持一致，断点要标注清楚 |
| 看两个变量的相关性 | 散点图 | 样本量要足够，必要时叠加趋势线 |
| 看某部分占总体的比例 | 条形图优先 | 分类超过5个不建议用饼图 |
| 看数据分布形态 | 直方图 / 箱线图 | 组距要合理，样本量太小容易误读 |
| 看二维矩阵的强弱关系 | 热力图 | 颜色明度阶数不要超过7档 |
这张表不是公式，而是一个检查清单。我在给团队评审图表时通常会问：“读者看了这张图，需要做什么决定？”回答完这个问题，再回到上面的对照表，选型就很少出错。
2.3 双Y轴、非零基线、3D效果：尽量别碰
复盘过程中，我明确放弃了几类“看着高级但容易误导”的做法。双Y轴是最典型的一个。两个不同量纲的指标放在同一个坐标系里，等于强行建立了一种视觉相关性，读者很容易误以为两条线的走势存在因果关系。除非有非常强的业务理由，我现在的做法是拆成上下两个子图，共用X轴，各自使用独立Y轴。
非零基线也值得多说一句。柱状图的纵轴如果不从0开始，10%的增长可能被画得像翻倍，小差异被视觉放大成巨大差异。折线图有时为了突出波动确实可以裁剪Y轴范围，但必须在坐标轴或图注里明确标注“坐标不从0开始”。三维立体效果则几乎没有可取之处，透视角度会改变柱子的视觉高度，立体化也不能增加信息量，纯粹增加认知负担，我已经全部禁用。
3. 视觉减法：用最少的颜色和线条讲清楚一件事
3.1 配色不是越多越好看，而是三类就够
图表配色最稳妥的做法不是用一套五颜六色的主题色，而是把颜色分成三组：主色、强调色、中性色。主色用于主信息，一到两个就够；强调色用于异常点、重点结论，全图最多一个；中性色用灰色系，负责网格线、基线和弱化元素。
我在实际中采用的是“蓝灰组合”：主色用同一色相的蓝，通过明度区分不同系列；上期、历史或背景数据全部用灰色降级；异常或者预警才使用红色或橙色。这样做的原因是，人眼对颜色差的判断是相对的，颜色越多，每种颜色的辨识度越低。你可以在落地时测试一下：把图表转成灰度图，如果仍能分清主次结构和数据层级，说明颜色用得还算克制；如果转成灰度后一团糊，说明过度依赖颜色编码了。
3.2 网格线、坐标轴、数据标签的减法处理
很多图表“脏”是因为元素太多。背景渐变、粗重边框、垂直网格线、阴影、圆角、每个点上的数据标签，全部叠在一起，视觉噪声非常大。我的处理规则很简单：背景一律纯白或纯浅灰，不使用渐变；边框去掉，或者用极浅色细线；网格线只保留横向，用虚线，颜色非常浅；坐标轴只保留表达方向的那一条，不需要画成完整方框。
数据标签的使用要更克制。连续数值的每个点都标标签，通常没必要，尤其是在折线图上，点一多标签就会互相遮挡。我的经验是只标关键值，比如最后一个点、最高点、最低点，或者只标主系列，不标参照系列。审图的时候我会把标签全部关掉看一遍：如果去掉标签图表依然能读，说明设计成立；如果去掉标签就分不清系列，那问题不在标签，而在图形设计本身。
3.3 语义色是纪律，不是装饰
红色、黄色、绿色这类颜色自带状态含义。红色让人想到异常、下降、警告，绿色让人想到达标、增长、正常。如果把正常的数据涂成红色，读者潜意识里会去寻找“哪里出问题了”。所以我在规范里明确：状态语义色只能用于表达好与坏、达标与未达标、预警与正常这类判断，不能当作普通装饰色使用。
一个常见的反面案例是地图或热力图的配色。有人喜欢把数据从低到高排成“红-黄-绿”的渐变，但绿色通常给人的感觉是“好”，如果高值对应绿色、低值对应红色，读者第一反应会混乱。热力图应该使用单色相明度渐变，比如从浅蓝到深蓝，或者用色相连续递进的方式，并且配合图例明确说明“颜色越深代表数值越大”。
4. 一次实测复盘：把一张销售对比图从“能看”改到“易读”
4.1 初始版本的问题清单
这里分享一个完整案例。某张图原本是“门店月度销售对比图”，初版呈现为：两个系列（本期、上期）使用相近的两组亮色，分别是橙色和金色；背景带浅色渐变；X轴日期字符串太长导致标签重叠；Y轴数值直接显示到个位数；销售数据没有排序，而且明明只有一个销售额指标，却设置了左右两个Y轴。
这张图的问题不是“不够漂亮”，而是“读起来很累”。颜色相近导致本期和上期难以区分，日期标签重叠让横轴变成一堵墙，双Y轴让人怀疑是不是有什么隐藏指标。评审时我们找十个同事去读，没有一个人能在十秒内说出“哪个门店本月最好”，这张图基本可以判定为无效设计。
4.2 分步修改：每一个动作背后都有原因
修改的第一步是删除视觉噪声。去掉背景渐变，网格线改为浅灰色虚线且只保留横向，把坐标轴边框简化。这个动作不会影响任何数据准确性，但会让图形一下子“浮”出来。
第二步处理颜色。本系列改为蓝色，上系列改为灰色。为什么要用灰？因为上期数据是参照信息，视觉权重必须低于本期。灰色不会吸引注意力，蓝色自然成为视觉焦点。
第三步调整X轴标签。日期字符串改为“1月”“2月”的短格式，并设置标签间隔，保证每个标签都不会重叠。这里要注意，标签间隔要均匀，不要为了每期都显示而缩小字号导致看不清。
第四步处理坐标轴。既然只有一个指标，双Y轴直接删除，只保留左侧Y轴，把单位改成“万元”并加千分位格式。
第五步调整图形类型。因为是多个门店的月度对比，读者的核心判断是“谁高谁低”，所以改成横向条形图，并按销售额从高到低排序。排序是一个很关键的动作：人的阅读习惯是自上而下，排好序后一眼就能看到第一名和最后一名。
第六步加数据标签。只在每个条形的末端加本期值，灰色上期系列不加。这样图表既能直接读出数字，又不会因为标签过多变乱。
最后一步改标题。原作者写的是“门店月度销售对比”，这是描述型标题。改成的结论式标题是“本月销售排名：A门店领先，C门店垫底”。虽然业务方一开始觉得“标题把结论写死了不太好”，但实际效果很好——阅读者用一秒就知道这页的重点。
4.3 改版后的效果与反馈
改版后的图，让十个人重新阅读，几乎所有人在五秒内都能准确说出“A门店本月最好，C门店最差”，并且能快速注意到灰色上期与蓝色本期的差距。新图并没有增加任何新的数据，所有信息都来自原图，只是重新分配了视觉权重。这件事给我最大的触动是：图表设计的产出物不是图，而是“读者用最短时间得到正确结论”，所有设计决策都应该围绕这个目标展开。
5. 落地时容易翻车的几个细节：口径、单位、响应式
5.1 口径错了，设计得再好也没有意义
图表设计最怕的问题发生在画图之前：数据口径不一致。同样叫“销售额”，含税还是不含税，退换货扣没扣，时间按自然日还是财年计算，都会让两张图完全不可比。我在项目中专门整理过一份“指标口径表”，每一张图对应记录指标定义、统计单位、汇总周期、数据筛选条件。
这个动作在团队协作里尤其有价值。前端按接口字段画图、业务按自己的理解提需求、数据分析按脚本汇总，三方如果对口径理解不一致，出来的图表必然有争议。我建议把口径表放在图表项目的第一个里程碑，先在表格里把每一张图的“主语、指标、时间范围、对比基准”写明白，再进入视觉设计。画图过程中的大部分返工，根源都在这一环节。
5.2 单位、千分位、小数位的处理
坐标轴上的数字不能直接显示“1234567”，人眼很难快速估读。中文环境建议把大数转为“万”“亿”，或者配合适当的缩写格式。同时要注意千分位分隔符，涉及金额还要统一币种符号的位置。简洁的示例如“1,234万元”，而不是“12340000元”。
数值精度也要控制。饼图占比保留一位小数即可；坐标轴刻度尽量使用整数；折线图的数据标签不要出现“33.333333%”这种长小数。小数位越多不代表越专业，只会增加阅读负担。还有一点容易被忽略：单位变化后，坐标轴的刻度间隔要重新计算，不能直接用默认间隔，“每个刻度相差5000元”和“相差5千元”的显示效果完全不同。
5.3 响应式布局与多屏适配的坑
同一张图表经常要同时出现在大屏、PC端和移动端。图例过多是移动端最常见的问题，一横排图例在窄屏上会被挤成好几行，把绘图区压小。我通常把图例收进可展开的交互面板，或者允许点击图例来切换系列显隐，这样既节省空间，又能让读者自由控制关注点。
容器尺寸变化时，图表必须随宽度自适应。固定高度是一个常见坑，在大屏和手机端使用固定高度会拉大失真，建议高度也按比例变化，或者给最小高度限制。旋转屏幕时机更要测试，确保宽变窄后标签不重叠、图例不溢出。最后，字体大小也要跟随屏幕尺寸做分级，不能一套字号全端复用，大屏上的小字在手机上往往更小。
6. 再说点个人经验：设计图表时我最后检查的几件事
做完一轮图表规范整理后，我给自己定了一个“出图前检查清单”，每次交图前至少过一遍。
第一件是把图缩小再看，或者拿远一点看。第一眼捕捉到的东西必须是主信息，如果第一眼看到的是网格线、图例或者某个异常无关的颜色点，说明视觉层级还是乱的。第二件是把颜色去掉，转成灰度再看。如果灰度模式下系列依然分得清、趋势依然读得出，说明图形本身结构成立；如果变成灰度就一团糊，说明太依赖颜色识别了。第三件是模拟读者提问。对着图问一句“这个月最好的是谁”“是涨了还是跌了”“需不需要现在处理”，如果十秒内答不出，就回到信息分层环节重新做。
还有一件和工具关系不大但非常关键的事：无论图表做得多简洁，数据准备和口径确认永远是第一步。视觉设计的极限，取决于数据准备的上限。数据没整理干净，后面所有工作都是沙滩上盖楼。
最后分享一个小技巧：把这份检查标准固化成团队的评审流程，而不是靠个人自觉。我们后来在每次图表上线前都要过一遍“主语是否明确、编码是否诚实、颜色是否克制、标签是否可读、响应式是否正常”五个问题，成本很低，但把返工率压下来不少。图表设计的价值不在追求炫目，而在让每一个阅读者少花三秒钟就找到答案，这三秒钟累积起来的效率，才是这个项目真正值得投入的部分。
