一张图表单独看很漂亮，放到整个后台里却不一定好用。同一个指标在不同页面换了颜色，相似图表的单位不一致，图例又藏在不同位置，都会让人反复学习。今天兰亭妙微分享 Nezar Mansour 在 Supernova 发布的近期图表设计系统文章。下面只选几张公开示例谈阅读方式，不逐项复述各个系统的版本与状态；应用场景为我们独立提出的设计讨论，图中的演示数据也不代表任何客户的真实业务结果。
这张折线图把数个系列放在共同时间轴里，读者可以比较它们如何变化。看这种图时，我们会先问这一屏想帮助人完成哪种比较。若关注的是变化过程，就需要清楚的时间范围；若只想找当前最高项，另一个更直接的排列方式可能更合适。
原文配图：Visma Unified Design 折线图示例，图中用不同标记和线型区分数据系列。
在一个假设的设备管理后台里，管理者既可能比较本周各设备的耗电，也可能追查某台设备在一小时内的波动。这两件事虽然使用相近数据，却需要不同的阅读入口。可以在总览帮助选择对象，再在详情展开变化，避免让一张图同时承担排名、趋势和原因解释。
图表标题也应该帮助建立这个范围。只写“趋势分析”太宽泛，补上对象、指标和时间，读者就少了一次猜测。单位与数据更新时间适合放在稳定位置，让人在截图被转发、或者从别的页面跳进来时，仍能理解这张图讨论的是哪段数据。
展示范围发生变化时，也要说明比较条件。假设读者把一天切换成一个月，累计值与日均值会产生不同含义；相同的柱体高度不能掩盖这个差别。可以在标题附近保留统计方式，让人清楚自己是在比较总量、平均水平还是某个时点，避免读完图后才发现前提已经改变。
变化图把增加和减少放在可以比较的结构中。值得观察的不只是红绿配色，还有方向和条形长度提供的线索。颜色可以帮助快速定位，但如果理解完全依赖色相，打印、低亮度显示或色觉差异都会让信息变得脆弱。
原文配图：Datadog DRUIDS 变化图示例，条形方向、长度和颜色共同表达差异。
同一后台中的颜色还应保持含义稳定。比如某条产线在总览里用蓝色，在详情里又变成橙色，人就要重新核对图例。可以为对象系列和业务状态分别安排规则，并说明颜色不足时怎样扩展，而不是每次新增一张图都凭感觉再选一组鲜艳颜色。
强调也需要控制数量。假设一个列表里只有两条记录需要跟进，就让它们获得足够的视觉区别，其余内容保留清楚但安静的层级。整屏每条数据都高饱和时，读者很难知道设计者希望他先看哪里。颜色的价值来自关系，而不是色板本身有多丰富。
图形常被当成主角，标签则在最后填进去。实际阅读时，恰恰是标签告诉人柱子和线条代表什么。文字过小、名称过长或单位缺失，会让一张形状清楚的图仍然难读。与其等布局完成后压缩字号，不如一开始就拿真实名称检查容纳方式。
原文配图：Atlassian 分类柱状图示例，可观察分类标签、图例符号及柱体之间的对应。
可以准备一个设备名称特别长的假设样本，观察截断后是否还能区分，同时说明完整名称在哪里查看。图例顺序也要和图中顺序形成关系，筛选掉一个系列后是否保留其他颜色，需要在组件规则里提前约定。这样连续比较多张图时，读者不必每次重建对应关系。
如果图表可以交互，悬浮、键盘焦点和选中状态还应提供相容的信息。静态截图只能帮助我们讨论布局，不能证明这些状态已做好。评审原型时，可以沿着同一数据点检查鼠标和键盘路径，再决定是否需要补充可访问的表格或文字摘要。
分组柱状图里，不同系列共享坐标尺度，正负值也围绕同一基线展开。把这类规则放到设计系统时，重点不是保存一张示范截图，而是说明什么情况下可用、哪些内容必须一起出现，以及数据变化后如何处理。
原文配图：Carbon 分组柱状图示例，包含共同基线、分组关系与正负数值。
比如在假设的经营分析页面中，两个部门的图如果使用不同单位或不同范围，表面相似并不意味着可以直接比较。组件可以共享外观，但页面仍需要清楚交代口径。设计系统负责提供稳定规则，业务页面负责说明当前数据的具体含义，两者缺一都会造成误读。
团队可以选产品里最常出现的一张图，把标题、单位、图例、颜色、异常值和无数据状态放在一起检查。每次新增场景时，说明沿用了什么、又增加了什么，再把确认过的变化补回组件文档。这样积累下来的图表系统，才有机会长期服务于真实页面。
导出和分享同样值得一起考虑。图表离开交互页面后，鼠标提示、筛选面板和侧栏可能都不存在了。用于分享的图片或报表需要保留足够的标题、单位和范围，让没有看过原页面的人也能理解。把这些要求提前写进组件使用说明，可以减少后来为每个导出版本临时补标签的工作。
图表设计里，最值得积累的是可重复使用的阅读规则。把问题、口径、颜色和文字说明联系起来，不同页面的数据表达才更容易保持一致，读者也能把注意力留给数据本身。
