WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Design with SwiftUI

Design with SwiftUI

SwiftUIDesignwatchOS
观看原视频

Highlight

Apple Maps 设计团队分享了他们如何将 SwiftUI 作为设计工具来重新设计 watchOS 10 的 Maps 应用。SwiftUI 的声明式语法和实时预览让设计师能够快速迭代，在真实设备上验证设计概念，从而发现静态设计工具无法暴露的细节问题。

核心内容

SwiftUI 作为设计工具

SwiftUI 不仅是开发框架，也是强大的设计工具。它的声明式语法让设计师能够直接描述界面，而不需要深入理解底层实现。Xcode 的实时 Canvas 让每次修改都立即反映在预览中，大大缩短了设计迭代周期。

Apple Maps 设计团队强调，SwiftUI 帮助他们在真实设备上验证设计概念，从而发现静态设计工具无法暴露的问题。例如，在设计步行半径时，通过设备测试发现 Digital Crown 的缩放速度太快，需要调整灵敏度。

在真实设备上测试

在真实设备上测试设计能够暴露许多在模拟器或设计工具中无法发现的问题：

  • 性能问题：复杂的动画在真实设备上可能卡顿
  • 交互细节：Digital Crown、手势等输入设备的灵敏度需要微调
  • 环境适应：阳光下的可读性、不同光线条件下的对比度

使用真实数据

使用真实数据测试设计能够暴露理想化数据掩盖的问题。例如，在测试海拔图表时，使用旧金山（多山）的数据看起来很好，但使用纽约（平坦）的数据时，图表看起来过于夸张，需要调整 Y 轴比例。

创建设计工具

SwiftUI 可以快速创建参数化的设计工具，帮助探索不同设计变体。例如，创建一个可以调整线宽、透明度和混合模式的工具，来测试步行半径在不同地图环境下的表现。

详细内容

声明式语法

SwiftUI 的声明式语法让界面描述变得直观：

// 描述一个按钮
Button(action: {
    // 按钮动作
}) {
    Text("Tap me")
        .font(.title)
        .foregroundColor(.blue)
}

// 描述一个图片
Image("map-icon")
    .resizable()
    .scaledToFit()
    .frame(width: 100, height: 100)

实时预览

Xcode 的 Canvas 提供了实时预览功能：

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("Apple Watch Series 8")
    }
}

动画和交互

SwiftUI 提供了强大的动画和交互支持：

// 使用 Digital Crown 控制缩放
@State private var zoomLevel: CGFloat = 1.0

Map()
    .focusable()
    .digitalCrownRotation($zoomLevel, from: 0.5, through: 3.0, by: 0.1)

核心启发

  • 做什么：将 SwiftUI 作为设计工具融入设计流程

    • 为什么值得做：SwiftUI 的声明式语法和实时预览让设计师能够快速迭代，在真实设备上验证设计概念
    • 怎么开始：学习 SwiftUI 基础语法，使用 Xcode Canvas 进行实时预览

  • 做什么：在真实设备上测试设计

    • 为什么值得做：真实设备能够暴露模拟器无法发现的问题，如性能、交互细节和环境适应
    • 怎么开始：将设计原型部署到真实设备，在不同环境下测试

  • 做什么：使用真实数据测试设计

    • 为什么值得做：真实数据能够暴露理想化数据掩盖的问题，如边缘情况和数据多样性
    • 怎么开始：收集真实数据样本，替换设计工具中的占位数据

关联 Session

评论

GitHub Issues · utterances