用 SwiftUI 做设计

一句话判断

两位 Maps 团队的设计师分享了他们用 SwiftUI 在设备上直接做设计的实践经验——这对设计师来说是必看的一场。

这场 Session 讲了什么

Apple Maps 设计团队的两位成员分享了他们如何用 SwiftUI 作为设计工具，重新设计 watchOS 10 的 Maps app。他们的核心观点是：SwiftUI 不仅是开发框架，也是强大的设计工具。

SwiftUI 的声明式语法让没有编程背景的设计师也能快速上手。你只需要声明想要创建什么——Button 就是 Button，Image 就是 Image。Modifiers 改变外观的方式与其他设计工具类似。Xcode 的实时 canvas 让每次修改都立即可见。

Session 强调了 SwiftUI 帮助发现设计盲点的能力。静态设计工具中隐藏的细节（图片加载状态、按钮按下效果）在动态工具中会立即浮现。他们在设计步行半径时，通过设备测试发现 Digital Crown 的缩放速度太快，需要调整灵敏度——这是静态原型无法发现的问题。

值得深挖的点

交互设计部分特别有价值。SwiftUI 提供了一流的手势、转场和动画支持。他们展示了一个滚动数字的 ticker 动画，用于在 Digital Crown 滚动时更新步行时间。这个动画是作为独立的 SwiftUI 原型开发的，然后整合到主原型中。

Session 还分享了 SwiftUI 让设计师接触到 Apple 硬件独有能力的方式：触觉反馈、音频、摄像头、手势、传感器，以及 MapKit、WeatherKit、RealityKit 等框架。这些都是传统设计工具无法触及的。

代码片段

// SwiftUI 的声明式设计方式
// 常见元素一行搞定
Button("开始导航") { /* action */ }
Image("map_pin")

// Modifiers 改变外观
Text("步行 5 分钟")
    .font(.caption)
    .fontWeight(.semibold)
    .foregroundStyle(.secondary)

// 使用系统控件
ColorPicker("选择颜色", selection: $color)
Map(position: $position) {
    Marker("目的地", coordinate: coordinate)
}

// 原型驱动设计流程
// 1. 在设备上放一个简单的 map view
// 2. 发现缩放速度问题，调整参数
// 3. 添加步行半径
// 4. 开发 ticker 动画
// 5. 整合所有原型

最佳实践

• SwiftUI 对设计师来说”降低门槛又提高上限”——常见的事容易做，复杂的事也做得出来
• 在设备上做设计，快速发现静态工具中看不到的问题
• 将复杂设计拆分为独立原型，逐步整合
• 利用 Xcode canvas 的实时预览进行快速迭代
• SwiftUI 原型可以跨 Apple 平台使用

还有什么值得关注

• Maps 团队用 SwiftUI 开发了所有 watchOS 10 的设计
• SwiftUI 让设计师能够测试触觉反馈、传感器等硬件能力
• 声明式语法降低了设计师学习编程的门槛
• 原型不是用完即弃的——它们可以直接演变为产品代码