数据可视化设计原则

小象实战讲义 · ECharts 数据可视化

在掌握了 Python 数据分析并尝试过基础图表后，我们常常面临一个关键问题：如何让图表不仅“能看”，更要“好看”且“好用”？如何确保我们的可视化作品能清晰、高效、准确地传递信息，而非制造视觉噪音？本节将为你引入数据可视化领域的核心设计框架与原则，帮助你从“会画图”迈向“会设计图”，为后续使用 ECharts/pyecharts 制作交互图表和数据大屏打下坚实的设计基础。

💡 核心导读

• 可视化转轮 (Visualization Wheel)：理解数据可视化设计的六个核心权衡维度，学会根据场景（如科研报告 vs. 大众传播）选择设计倾向。
• 移除冗余 (Remove to Improve)：掌握“少即是多”的极简设计哲学，通过对比案例学习如何去除图表中的干扰元素，聚焦核心信息。
• 五大设计原则：将抽象理论落地为可执行的检查清单，确保你的图表具备真实性、功能性、美观性、深刻性与启发性。

一、可视化转轮：设计的六个权衡维度

数据可视化设计并非非黑即白，而是一系列连续的权衡。Alberto Cairo 在其著作《The Functional Art》中提出的 “可视化转轮 (Visualization Wheel)” 模型，为我们提供了一个绝佳的思考框架。

该转轮将可视化设计的特征分为上下两部分：

• 上半部分 (More Complex & Deeper)：代表更复杂、信息更深层的设计倾向，常用于科学、工程等需要深度分析的场景。
• 下半部分 (More Intuitive & Lighter)：代表更直观、信息更浅显的设计倾向，常用于大众传播、报告演示等需要快速理解的场景。

转轮由三组相互对立的特征构成，共六个维度：

1. 抽象 (Abstraction) vs. 具象 (Figuration)

   • 抽象：使用高度概括的图形（如箱线图、散点图）来代表数据的统计特征或分布规律。它剥离了具体事物的外观，聚焦于数据本身的关系。
   • 具象：使用与现实物体相似的图形（如用食物图片表示卡路里）来增强图表的直观性和联想性。它更贴近观众的日常经验。

2. 功能性 (Functionality) vs. 装饰性 (Decoration)

   • 功能性：图表只包含传达信息所必需的元素，没有任何多余的装饰。这种风格更接近数据的“原始”状态，强调客观与准确。
   • 装饰性：在功能性基础上，增加了艺术性和美学元素（如特殊的颜色、纹理、背景）。装饰性图表更易于记忆和传播，但需警惕装饰过度掩盖信息。

3. 深层表达 (Density) vs. 浅层表达 (Lightness)

   • 深层表达：在单一图表中融入大量数据或多维度信息，需要观众投入更多精力进行深入解读和探索。例如，一个包含多个系列、交互式提示的复杂仪表盘。
   • 浅层表达：图表只呈现最核心、最直观的信息，力求一目了然。例如，一个只显示关键KPI的指标卡。

4. 多维度 (Multidimensionality) vs. 单一维度 (Unidimensionality)

   • 多维度：图表能够同时展示数据在多个维度（如时间、类别、数值、地理）上的特征。ECharts 中的散点图（气泡图）、平行坐标系、三维图表等都是展现多维数据的利器。
   • 单一维度：图表主要展示数据在单一维度上的比较或趋势，如基本的柱状图、折线图。简单直接，易于理解。

5. 原创性 (Originality) vs. 通用性 (Familiarity)

   • 原创性：采用全新的、与众不同的视觉编码或图表形式来表达数据。冲击力强，但需要额外的解释成本，因为观众没有认知基础。
   • 通用性：采用被广泛接受和理解的图表类型（如用柱状图比较大小，用折线图展示趋势）。沟通成本低，但可能因缺乏新意而降低记忆点。

6. 新颖性 (Novelty) vs. 冗余性 (Redundancy)

   • 新颖性：每个数据点或现象只用一种视觉元素（如图形、颜色、位置）表达一次。设计简洁高效。
   • 冗余性：通过多种方式（如图形+数据标签+提示框）重复表达同一信息。虽然看起来“冗余”，但能通过多感官通道强化信息，降低理解门槛，常用于重要的数据强调。

如何应用转轮？ 设计图表前，先问自己：我的受众是谁？沟通场景是什么？如果你的目标是向科研同行汇报，你的设计可能更偏向转轮的上半部分（抽象、功能、深层、多维）。如果你是为大众媒体制作信息图，则可能更偏向下半部分（具象、装饰、浅层、通用）。你可以像绘制雷达图一样，为自己的项目在六个维度上定位，从而明确设计方向。

二、Remove to Improve：极简主义的力量

一个优秀的数据可视化，其终极目标是用最少的视觉元素，传达最完整、最清晰的信息。这就是“Remove to Improve”（通过移除来改进）原则的精髓。

让我们通过一个经典案例来理解。假设我们要比较几种快餐每100克的卡路里含量。

import pandas as pd

# 示例数据：食物与卡路里（每100克）
food_data = {
    'Food': ['French Fries', 'Bacon', 'Cheeseburger', 'Fried Chicken', 'Salad'],
    'Calories': [312, 533, 295, 280, 15]  # 单位：千卡/100g
}
df = pd.DataFrame(food_data)
print(df)

输出：

            Food  Calories
0   French Fries       312
1          Bacon       533
2   Cheeseburger       295
3  Fried Chicken       280
4          Salad        15

现在，我们来看两种可视化方式。第一种是包含了“完整”图表元素的版本（概念示意）：

【图表A：冗余设计】
标题: “Calorie Content of Various Fast Foods”
Y轴标签: “Number of Calories”
X轴标签: “Type of Food”
图例: 用颜色区分柱子，但旁边还有一个图例框重复说明。
网格线: 密集的背景网格。
柱子: 每种食物一个柱子，但数值需要对照Y轴读取。

第二种是遵循“Remove to Improve”原则优化后的版本（概念示意）：

【图表B：优化设计】
柱子: 直接在每个柱子上方或内部标注具体卡路里数值。
高亮: 将“Bacon”的柱子用显著颜色（如橙色）高亮。
去除: 移除了标题、Y轴、X轴标签、图例、背景网格。

为什么图表B更好？

• 消除冗余：图表A中，颜色已经区分了类别，图例就是冗余信息。数据值本可以直接标注，却让读者去费力对齐Y轴刻度。
• 聚焦重点：图表B高亮“Bacon”，直接引导观众关注核心事实：培根的卡路里（533）是本组最高值，也是最需要优先关注的食物。
• 降低认知负荷：图表B让信息唾手可得，观众无需进行“图形-坐标轴-数值”的多次心理转换，理解速度更快。

在 pyecharts 中实践这一原则，意味着要审慎使用每一个配置项。在添加标题、图例、坐标轴、网格线、背景色之前，先问问：这个元素对传达核心信息是必要的吗？移除它会影响理解吗？

三、五大核心设计原则总结

综合可视化转轮的哲学与“Remove to Improve”的实践，我们可以提炼出数据可视化设计中必须遵循的五大核心原则，作为我们创作时的“检查清单”：

1. 真实性 (Truthful)：图表必须准确、无歧义地反映底层数据。禁止扭曲坐标轴比例、选择性展示数据等误导行为。这是所有原则的基石。
2. 功能性 (Functionality)：图表必须能有效完成其沟通使命。它是否清晰回答了预设的分析问题？交互元素（如缩放、筛选、提示框）是否增强了探索能力，而非成为干扰？
3. 美观性 (Beauty)：这里的“美”指视觉上的清晰、有序与和谐。合理的配色、恰当的字体、均衡的布局都能提升图表的可读性和专业感。美观性与功能性相辅相成，而非对立。
4. 深刻性 (Insightful)：优秀的图表不应只是数据的“复读机”，而应能揭示数据背后的模式、趋势、异常或关联，带来观众独自看数据表时不易获得的发现。
5. 启发性 (Enlightening)：图表应能引发观众的思考，提出新的问题，或促使人们采取行动。它是分析的终点，也常常是新一轮探索的起点。

在后续使用 pyecharts 进行开发时，每完成一个图表，都可以用这五个原则来审视它：

• 我的数据映射和视觉编码是否真实？
• 图表类型和交互设计是否满足了功能需求？
• 颜色、文字、布局是否美观协调？
• 这张图是否传达了比原始数据列表更深刻的洞察？
• 它能否启发观众或我自己进行下一步思考或决策？

📝 动手练一练

1. 原则辨析：假设你要为公司的年度财报制作一张“各地区销售额占比”图表，用于内部高管会议和对外公众宣传。请分别描述，针对这两个场景，你在“可视化转轮”的六个维度上可能会做出怎样不同的选择？（例如：抽象vs具象、深层vs浅层等）

2. 优化实践：以下是一段用于生成基础柱状图的 pyecharts 代码，它包含了一些可以优化的“冗余”元素。请指出至少两处可以应用“Remove to Improve”原则进行简化的地方，并说明理由。

from pyecharts import options as opts
from pyecharts.charts import Bar

# 数据
categories = ['A产品', 'B产品', 'C产品']
values = [120, 200, 150]

# 创建图表（有待优化）
bar = (
    Bar()
    .add_xaxis(categories)
    .add_yaxis("销售额（万元）", values, color="#5470c6")
    .set_global_opts(
        title_opts=opts.TitleOpts(title="产品销售额对比", subtitle="2023年度数据"),
        legend_opts=opts.LegendOpts(is_show=True), # 此处可能冗余
        xaxis_opts=opts.AxisOpts(name="产品名称", axislabel_opts=opts.LabelOpts(rotate=0)),
        yaxis_opts=opts.AxisOpts(name="销售额", axislabel_opts=opts.LabelOpts(formatter="{value} 万元")),
        tooltip_opts=opts.TooltipOpts(trigger="axis"),
    )
    .set_series_opts(
        label_opts=opts.LabelOpts(is_show=False) # 此处可以调整以直接显示数据
    )
)
# 不渲染输出，仅打印已知输入摘要
print(f"图表类型：{type(bar).__name__}")
print(f"X轴数据：{categories}")
print(f"系列数据：{values}")

图表类型：Bar
X轴数据：['A产品', 'B产品', 'C产品']
系列数据：[120, 200, 150]

.set_series_opts(
    label_opts=opts.LabelOpts(is_show=True, position="top", formatter="{c}万元")
)

本章小结

本章我们系统学习了数据可视化的基础概念、目标、工具、流程，并在本节深入探讨了其核心设计原则。理解并应用这些原则，是区分“图表绘制者”与“可视化设计师”的关键。

📋 行动清单

• 理解权衡：回顾“可视化转轮”的六个维度，尝试为你最近做的一个图表进行定位。
• 实践简化：在你接下来的第一个 pyecharts 图表练习中，有意识地应用“Remove to Improve”原则，审视并移除至少一个非必要的图表元素。
• 清单自查：完成图表后，依据“真实性、功能性、美观性、深刻性、启发性”五项原则，对自己的作品进行一次快速评估。

设计原则是导航仪，而 pyecharts 是我们的交通工具。从下一章开始，我们将正式启程，深入学习如何用 pyecharts 这款强大的工具，将良好的设计付诸实践，创造出既美观又实用的交互式数据可视化作品。

—— 小象教研组