用图表设计应用体验

一句话判断

这场 Session 是 Swift Charts 的设计指南——不是教你写代码，而是教你思考什么时候用图表、用什么样的图表、以及如何让图表在应用中形成渐进式的设计系统。

这场 Session 讲了什么

来自 Apple HIG 团队的设计师 Nicholas Felton 分享了 Apple 内部设计图表的三条原则：

什么时候用图表：三种经典场景——展示历史或预测值的变化趋势、可视化整体中的部分（进度、完成度）、对比不同项目或分类。关键准则是：图表应该聚焦在最重要的信息上，不要什么都可视化。

怎么用图表：每个图表都需要一个文字描述。好的描述应该”即使单独阅读也能传达信息”，比如”过去 30 天共售出 1,234 个煎饼”比”过去 30 天销量”好得多。图表下方可以放可点击的摘要行（日均销量、工作日vs周末对比、最佳销售日），每行点击后更新图表内容。

图表的渐进式设计系统：静态小图表（Watch 复杂功能、Stocks 缩略图）-> 交互式中图表（带轴线和标签，支持滑动查看精确值）-> 深度探索大图表（完整的缩放、筛选、多维度切换）。从小图到大图的导航应该保持连续性——值、上下文和状态都要保留。

值得深挖的点

描述即信息的理念改变了很多人”图表自带说明”的误解。用户在快速浏览时往往只看文字不看图。如果你的图表标题只是”30 天销量”，用户扫一眼就走了。但如果是”30 天销量增长 12%，共计 1,234 个”，这个文字本身就是有价值的洞察，图表则是提供细节的补充。

多维度视角的设计方法让图表从”好看的装饰”变成”有用的工具”。Session 建议从宏观（总量、平均值）、中观（工作日/周末对比、按时段分析、按品类/城市分类）和微观（最大单笔、最后一笔）三个尺度观察数据。每个维度的摘要行放在图表下方，点击即切换图表内容。

图表尺寸决定交互深度这个原则很实用。小图表（Watch complication、列表缩略图）应该是静态的，不需要轴线和标签——它们是更大图表的入口。中号图表占满宽度但不是全高，需要轴线和基本交互。大图表提供完整的探索能力。用户从小图表点击进入大图表时，所见内容应该保持一致。

代码片段

图表描述文案的演进：

// 基础版（不够好）
标题: "过去30天销量"

// 改进版（自包含信息）
标题: "过去30天共售出 1,234 个煎饼"

// 最佳版（包含解读）
标题: "过去30天销量增长12%，共计 1,234 个煎饼"

摘要行交互模式：

┌─────────────────────────────┐
│ 过去30天销量增长12%          │
│ 共计 1,234 个煎饼           │
│                             │
│ ████████████████████        │  ← 柱状图
│                             │
│ > 日均销量: 41 个     [点击] │
│ > 工作日 vs 周末       [点击] │
│ > 最佳销售日: 周五     [点击] │
└─────────────────────────────┘

图表尺寸与交互对应关系：

静态小图表（< 100pt）
  - 无轴线、无标签
  - 不支持交互
  - 作为更大图表的入口

交互中图表（全宽、非全高）
  - 包含轴线和标签
  - 支持滑动查看精确值
  - 支持时间范围切换

深度大图表（全宽全高）
  - 完整探索能力
  - 多维度筛选
  - 缩放和平移

最佳实践

• 图表标题要有自包含的信息：不要只写”销量”，写”销量增长 12%，共计 1,234 个”
• 摘要行放在图表下方：日均、对比、最佳值等摘要，点击更新图表
• 小图到大图保持连续性：数值、上下文和状态要保持一致
• 只对最重要的数据做图表：不是所有数据都需要可视化，聚焦核心指标
• 图表服务于应用目标：先明确应用的核心目标，再决定展示什么图表

还有什么值得关注

• Session 使用煎饼食品车的案例贯穿全场，和 “Hello Swift Charts” 是同一个项目
• Apple 内部的图表设计参考包括 Health、Fitness 和 Weather 等系统应用
• Swift Charts 框架自动处理 Dark Mode、无障碍和动态字体，设计师只需要关注内容和布局
• 第三方标杆包括 Strava 的运动分析图表和 Duolingo 的进度图表