数据可视化设计：从混乱到清晰

从“数据堆砌”到“故事叙述”

很多企业的数据大屏之所以不好用，不是因为数据不够多，而是因为缺少叙事结构。用户看到的是一堆 KPI，而不是一个完整的业务故事。

一套好的数据可视化，应该能够回答三个问题：现在怎样？为什么会这样？接下来该怎么做？

三层结构：监控层 / 诊断层 / 行动层

图表选型：不要从组件库开始

很多设计师一开始就在组件库里挑图表，这是错误的顺序。正确的顺序应该是：数据 → 问题 → 关系 → 图表。

// 简化版图表选型思路
type QuestionType = "对比" | "趋势" | "占比" | "构成" | "相关性";

const pickChart = (q: QuestionType) => {
  switch (q) {
    case "对比":
      return ["条形图", "柱状图"];
    case "趋势":
      return ["折线图", "面积图"];
    case "占比":
      return ["条形图（推荐）", "环形图"];
    case "构成":
      return ["堆叠柱状图", "瀑布图"];
    case "相关性":
      return ["散点图", "气泡图"];
  }
};

视觉层级：让视线自己走完路径

通过字号、颜色、对比度和留白控制视觉权重，让用户在不用思考的情况下，也能沿着你设计好的路径完成浏览。

好的数据可视化不是“炫技”，而是“善意”。它帮用户减少思考负担，把注意力放在真正重要的决策上。

总结

下次再做数据大屏时，不妨从这三个问题开始：谁在看？要做什么决策？希望 3 秒内看到什么？