Design an effective chart
Design 进阶 20m

设计有效的图表

Design an effective chart

2022年6月6日

在 Apple 官方观看视频

一句话判断

这是一堂关于图表设计的系统课——不是教你用什么 API 画图，而是教你”为什么用这个图表不用那个”和”如何让图表对所有人都有效”。

这场 Session 讲了什么

Apple 设计团队的 Halden 和 Lilian 以一个煎饼餐车的销售数据为例，系统讲解了设计有效图表的完整方法论。内容围绕五个核心主题展开：标记（Marks）、坐标轴（Axes）、描述（Descriptions）、交互（Interaction）和颜色（Color）。

Session 不是 Swift Charts 的 API 教程，而是一堂设计思维课。它教你如何从数据目标和用户需求出发，逐步选择合适的图表形式，并确保图表对所有用户（包括使用 VoiceOver 的视障用户）都可用。

核心观点是：有效图表应该聚焦于你要传达的信息，让人一目了然，同时对所有人都可访问。

值得深挖的点

标记类型的选择逻辑。 标记是图表的基本视觉元素——柱状图的柱子、折线图的线条、散点图的点。选择哪种标记取决于你想强调什么。以煎饼销售数据为例：点标记适合识别离群值，但在真实数据（而非理想数据）上很难看出趋势；线标记能清晰展示变化趋势，但数据中有间隔时会产生误导；柱标记最灵活，零值不会造成干扰，视觉重量直接对应数值大小。

一定要用真实数据测试设计。 Session 反复强调这一点。用平滑的理想数据设计的图表，面对真实数据时可能完全失效。点标记在理想数据上看起来不错，但在真实的散乱数据上几乎无法辨识趋势。

无障碍设计的两条路径。 第一，为 VoiceOver 设计数据导航——用户可以通过 VoiceOver 逐一浏览每个数据点的值。第二，使用音频图表（Audio Graphs）——将数据转化为声音，通过音调和节奏让用户”听到”数据趋势。Swift Charts API 自动提供了这两项功能。

坐标轴的固定范围与动态范围。 固定范围适合有明确边界的值（如电池百分比 0-100%），动态范围适合随场景变化的值（如销售量）。选择哪种取决于数据的性质和你要传达的信息。

颜色不只是装饰。 颜色可以增强清晰度——用一个强调色突出关键数据，用中性色淡化背景数据。但不要依赖颜色传达唯一信息，因为不是所有人都能区分所有颜色。

代码片段

import SwiftUI
import Charts

// Swift Charts 基本用法 - 柱状图展示销售数据
struct SalesChart: View {
    let salesData: [DailySales]
    
    var body: some View {
        Chart(salesData) { data in
            BarMark(
                x: .value("日期", data.date),
                y: .value("销量", data.count)
            )
            .foregroundStyle(Color.blue.gradient)
        }
        .chartYAxis {
            AxisMarks(position: .leading)
        }
        .accessibilityLabel("过去30天煎饼销售趋势")
        // Swift Charts 自动提供 VoiceOver 数据导航和音频图表
    }
}

// 使用线标记展示趋势
Chart(salesData) { data in
    LineMark(
        x: .value("日期", data.date),
        y: .value("销量", data.count)
    )
}

// 颜色强调：突出特定数据点
BarMark(
    x: .value("日期", data.date),
    y: .value("销量", data.count)
)
.foregroundStyle(data.isRecord ? Color.orange : Color.gray.opacity(0.5))

最佳实践

  • 先确定图表目标（要传达什么信息），再选择标记类型
  • 使用真实数据测试图表设计，不要只用理想数据
  • 柱标记是最通用的选择，当不确定时从柱状图开始
  • 为坐标轴选择合适的范围策略：固定范围 vs 动态范围
  • 始终为图表添加无障碍标签和描述
  • 使用音频图表让视障用户也能理解数据趋势
  • 颜色用来增强清晰度，但不要让颜色成为传达信息的唯一手段
  • 为图表添加标题和摘要描述，帮助用户快速理解图表内容

还有什么值得关注

  • 配套观看 “Design app experiences with charts” 了解如何在应用整体体验中嵌入图表
  • “Hello Swift Charts” Session 提供了 Swift Charts API 的完整介绍
  • WWDC 2021 的 “Bring accessibility to charts in your app” 详细讲解了图表无障碍设计
  • 音频图表是一个非常有创意的无障碍特性，值得在任何数据可视化场景中采用
WWDC 2022