Highlight
Apple 在 WWDC22 推出了 Swift Charts 框架，同时发布了一套图表设计原则，帮助开发者在应用中用图表更清晰、更有吸引力地传达数据。
核心内容
什么时候该用图表
（01:53）
你的应用里可能有很多数据可以展示，但把所有数据都做成图表只会让用户迷失。图表的核心作用是引导注意力，让用户快速抓住最重要的信息。
三种适合用图表的场景：
- 展示历史或预测值：时间序列数据用图表能直观呈现变化趋势
- 展示部分与整体的关系：进度、完成度、剩余量等状态信息
- 比较不同项目或类别：让用户一眼看出差异
Apple 用一个煎饼餐车 App 举例。这个 App 原本只有订单录入和交易记录两个标签页。交易记录只是一张列表，餐车老板需要从中自己提炼信息。通过图表，可以把这张列表变成可操作的洞察：近期销售额、什么口味最受欢迎、每天去哪个位置生意最好。
如何描述图表
（03:29）
图表不能只放一个标题。标题只标注了图表元素，没有传达任何信息。
把标题改成自包含的描述：
- 基础版：“过去 30 天共售出 1,234 个煎饼”
- 进阶版：“过去 30 天销售额上涨 12%，共售出 1,234 个煎饼”
第二种方式帮助用户判断数据是高是低、是涨是跌，对不熟悉的数据尤其有用。
从多个视角丰富数据
（05:06）
一张图表可以从三个层面增加细节：
- 宏观：整个数据集的汇总，如总计、平均值
- 中观：数据子集，如工作日 vs 周末、不同口味、不同城市
- 微观：单个数据点，如最后一笔交易、最大单笔销售额
在煎饼餐车 App 中，可以在销售图表下方添加几行可点击的汇总数据。点击”日均销售额”，图表叠加平均线；点击”工作日 vs 周末”，图表高亮对比；点击”最佳销售日”，图表跳到那一天。
图表尺寸与交互层级
（06:42）
图表按尺寸和交互深度分为三级：
静态小图表：Watch 表盘 complication、Stocks 的缩略图、Health 的趋势卡片。它们通常作为入口，点击后进入更大的图表。小图表不需要网格线、标签或交互，因为用户预期点击后能看到详情。
交互式中等图表：通常是视图全宽，占不满全高。需要坐标轴和标签，支持触摸查看精确数值，可以切换时间范围。
大型深度图表：占据大量垂直空间，支持深度数据探索。功能应该渐进式展开，让用户自己选择信息密度。
从小图表到完整图表的过渡要保持连续性：形状不变、已显示的数字保留。可以添加信息，但不能换成完全不同的内容。
图表设计系统
（10:01）
当应用中有多个图表时，就形成了一个图表设计系统。
使用熟悉的图表形式。柱状图和折线图是大多数人日常接触的形式。散点图相对少见，需要额外引导。如果你想做独特的图表（如 Activity 圆环），它应该是应用的核心，而不是附属功能。
差异是有意义的信号。当两个图表展示不同信息时，设计上的差异帮助用户注意到这一点。Apple 演示了从”近期销售”到”过去 12 个月销售”的演变：
- 只改描述 —— 变化容易被忽略
- 给第二个图表不同颜色 —— 更容易注意到这是不同的图表
- 改变数据表示方式（从柱状图变成展示每月销售范围的图表）—— 配合描述和样式变化，确保用户注意到主题、时间范围和指标都不同了
详细内容
Swift Charts 框架
（01:22）
WWDC22 新推出的 Swift Charts 框架让在 Apple 设备上制作图表变得简单。虽然本场 session 聚焦设计原则，但框架本身提供了声明式 API，与 SwiftUI 深度集成。
图表描述的最佳实践
// 不好的做法：只标注元素
Text("Sales in the Past 30 Days")
// 好的做法：自包含的描述
Text("Sales in the past 30 days totaled 1,234 pancakes.")
// 更好的做法：解读数据
Text("Sales for the past 30 days are up 12%, totaling 1,234 pancakes.")关键点：
- 描述应该独立阅读时也有信息量
- 对不熟悉的数据，用完整句子降低理解成本
- 加入趋势解读（涨跌百分比）帮助用户判断数据意义
渐进式展开复杂度
// 小静态图表作为入口
SalesChart(data: last7Days)
.frame(height: 80)
.onTapGesture {
// 点击进入完整图表
showDetailChart = true
}
// 完整图表保留相同数据上下文
DetailSalesChart(data: last30Days)
.frame(height: 300)
// 添加交互：时间范围切换、精确数值查看关键点：
- 小图表和完整图表展示相同数据形状
- 小图表中可见的数字在完整图表中仍然可见
- 可以添加信息，但不能替换为完全不同的内容
设计差异化的图表
当应用中有多个图表时，通过以下方式创造有意义的差异：
- 颜色：不同主题的图表使用不同主色
- 方向：横向柱状图 vs 纵向柱状图区分不同数据类型
- 样式：实心柱 vs 范围柱表示不同的指标含义
// 近期销售 —— 纵向柱状图，主色调
BarChart(data: recentSales)
.foregroundStyle(.blue)
// 热门口味 —— 横向柱状图，强调对比
HorizontalBarChart(data: popularFlavors)
.foregroundStyle(.green)
// 城市销售趋势 —— 折线图，展示变化
LineChart(data: citySales)
.foregroundStyle(.orange)核心启发
1. 给健身 App 加趋势图表
- 做什么：把用户的训练记录从列表变成周/月趋势图
- 为什么值得做：Swift Charts 让这件事的代码量从几百行降到几十行，用户能直观看到进步曲线
- 怎么开始：用
Chart视图包裹训练数据，选择合适的标记类型（BarMark或LineMark）
2. 给记账 App 加消费分析
- 做什么：按类别展示消费占比，按时间展示消费趋势
- 为什么值得做：用户记账的核心诉求是”钱花哪了”，图表比数字列表直观得多
- 怎么开始：用
SectorMark做饼图展示类别占比，用BarMark做月度对比
3. 给习惯追踪 App 加完成度可视化
- 做什么：用环形图或进度条展示本周/本月习惯完成率
- 为什么值得做：进度可视化是行为心理学中有效的正向反馈机制
- 怎么开始：用
SectorMark的innerRadius参数创建环形进度图
4. 给天气 App 加温度趋势
- 做什么：展示未来 24 小时温度变化曲线，叠加降水概率
- 为什么值得做：温度数字列表不如曲线直观，叠加信息让一张图表传递更多信息
- 怎么开始：用
LineMark画温度曲线，用AreaMark叠加降水概率区域
关联 Session
- Hello Swift Charts — Swift Charts 框架入门与基础用法
- SwiftUI on iPad: Organize your interface — iPad 界面组织与导航设计
- What’s new in SwiftUI — SwiftUI 年度新特性概览
评论
GitHub Issues · utterances