Design an effective chart

Highlight

Apple 设计团队以煎饼餐车销售数据为例，从标记选择、坐标轴设计、描述文案、交互方式和颜色运用五个维度，讲解了如何设计既聚焦信息又对所有用户可访问的图表。

核心内容

图表设计的第一步：明确目标

（01:35）

很多开发者拿到数据后，第一反应是选一个”好看”的图表类型。但有效的图表设计应该从问题出发：你要传达什么信息？

Session 用一个煎饼餐车的案例贯穿始终。餐车老板想知道”过去 30 天销售情况如何”——这个简单的问题可以拆解为多个洞察方向：趋势波动、数值范围、具体某天的销量、异常值、不同地点的对比。

有效的图表只聚焦少数关键信息。这个案例中，设计者选择了三个优先级：pattern（趋势）、range（范围）、values（具体数值）。

标记选择：从真实数据出发

（03:13）

标记（Marks）是图表的视觉元素——柱状图的柱、折线图的线、散点图的点。

设计者首先尝试了散点图。理想数据下，点图看起来清晰。但用真实数据测试后，点图无法呈现任何可辨识的趋势。

接着尝试折线图。折线擅长展示变化率，趋势清晰。但考虑一个现实场景：餐车有 5 天交替休息。折线连接了相隔很远的数据点，连线本身比数据更抢眼。

最终选择了柱状图。柱状图更灵活——零值清晰可见，不会分散注意力，视觉重量直接对应销售总量。一个柱子是另一个的两倍高，销量就是两倍。

这个选择过程的关键教训：用真实数据测试设计，不要只用理想数据。

坐标轴：范围与密度

（08:25）

坐标轴为标记提供参考框架。垂直轴的范围策略有两种：

• 固定范围：如电池图表始终 0-100%，一眼看出满电、空电或中间状态
• 动态范围：如步数图表没有固定上限，动态调整让波动更明显

煎饼销售没有上限，所以采用动态范围。但底部固定为 0，保持柱子高度的可比性。

网格线的密度需要平衡。太多会分散注意力，太少又难以估算中间数值。这个案例选择了约 4 条水平网格线，使用 20 的整数倍，30 天周期用 7 天为步长。

描述文案：降低理解门槛

（12:14）

图表不是独立的，它嵌在应用的界面中。屏幕标题”Total Sales”和分段控制器”30 Days”已经提供了部分上下文。

但垂直轴的单位仍需要明确——是金额还是煎饼数量？解决方案是用图表标题直接说明：“Pancakes sold”。

更好的做法是在标题中总结关键结论：“Total Sales: 1,234 Pancakes”。这个具体数字让用户立刻抓住最重要的信息。

天气应用中的降水图表也用了类似方法：“Light Rain Forecasted — Light rain is expected to start in 9 minutes and last for 36 minutes”。

交互设计：多种输入方式

（15:37）

触摸交互需要足够大的触控目标。不要把触控区域限制在柱子本身，应该扩展到整个图表高度，包括柱子上方的空白区域。

但交互设计不能只考虑触摸。键盘、语音控制、Switch Control 和 VoiceOver 都需要同等支持。焦点指示器要足够大，与触控目标保持一致。

VoiceOver 导航图表时，标签设计遵循几个原则：

• 简洁，不重复坐标轴名称
• 使用完整单词，不用缩写（“June” 而不是 “Jun”）
• 上下文信息在前（日期在前，数值在后）
• 让用户快速定位特定值

颜色运用：增强而非唯一

（19:32）

颜色可以增加个性，也可以增强清晰度。但颜色应该作为辅助手段，不能是传达关键信息的唯一方式。

Session 展示了对比两个城市销售的折线图。只用颜色区分两条线，色盲用户无法分辨。正确做法是先添加形状标记（圆圈和方块），再用颜色增强差异。

选择颜色时需要考虑：

• 颜色在不同文化中的含义（如中国股市红涨绿跌，与美国相反）
• 视觉重量平衡，避免暗示主次关系
• 颜色之间的对比度，确保可读性
• 色盲友好性，用滤镜检查
• 适配 Dark Mode 和 Increase Contrast 设置

详细内容

Swift Charts 的无障碍支持

（06:08）

Swift Charts 自动为标记生成可自定义的无障碍标签，并内置音频图表（Audio Graphs）支持。音频图表将数据趋势转化为声音，让视障用户”听到”图表。

VoiceOver 可以：

• 导航图表的数据值（“May 8th. 54 pancakes.”）
• 交互切换时间范围（“Selected: one year, two of two.”）
• 播放音频图表（“Play audio graph.”）
• 描述坐标轴（“The x-axis is time. The y-axis is sales.”）

音频图表的数据摘要

（14:45）

音频图表提供多种数据摘要，包括一个可自定义的摘要。坐标轴描述对非视觉传达至关重要——如果无法使用音频图表，也要通过无障碍文本标签提供这些信息。

不同场景的标记策略

（18:42）

Maps 应用中的骑行路线海拔图展示了另一种标记策略。图表不显示单个数值，而是展示海拔升降的模式。柱子太多，无法逐个导航。 accessibility label 设计为：“From 3.6 miles to 4.4 miles: Climb 100 feet, descend 5 feet”。

如果图表是按钮内的缩略预览，可以用一个标签概括整个按钮：“Weekly activity summary, tap to view details”。

核心启发

• 做什么：为健康类应用设计步数趋势图表

• 为什么值得做：用户需要快速理解自己的活动模式，好的图表设计让数据一目了然

• 怎么开始：确定核心信息（趋势 vs 目标完成度），选择柱状图或折线图，添加”本周平均 X 步”的摘要标题

• 做什么：在财务应用中加入支出分类可视化

• 为什么值得做：颜色+形状的组合让色盲用户也能区分不同支出类别

• 怎么开始：使用 Swift Charts 的 SectorMark 或 BarMark，为每个类别分配独特的形状标记，再用颜色增强

• 做什么：为天气应用设计降水量预测图表

• 为什么值得做：Session 中天气应用的描述文案模式可以直接复用

• 怎么开始：在图表上方添加一句话摘要（“Rain starting in 9 minutes”），使用动态范围的垂直轴，用颜色强度表示降水强度

• 做什么：构建数据仪表板的图表系统

• 为什么值得做：单个图表的设计决策需要在整个系统中保持一致

• 怎么开始：先定义图表设计系统（颜色、网格线密度、标签格式），确保所有图表遵循相同的规则

关联 Session

• Hello Swift Charts — Swift Charts 入门
• Swift Charts: Raise the bar — Swift Charts 进阶
• Bring accessibility to charts in your app — 图表无障碍支持