Design with SwiftUI

ハイライト

Apple Maps デザインチームは、watchOS 10 用のマップアプリを再設計するための設計ツールとして SwiftUI を使用した方法を共有しています。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 を使用します。
内容: 実際のデバイスでデザインをテストします。
価値がある理由: 実際のデバイスでは、パフォーマンス、インタラクションの詳細、環境適応など、シミュレーターでは見つけられない問題が明らかになる可能性があります。
開始方法: 設計プロトタイプを実際のデバイスに展開し、さまざまな環境でテストします。
内容: 実際のデータを使用して設計をテストします。
価値がある理由: 実際のデータは、エッジケースやデータの多様性など、データマスクを理想化した問題を明らかにする可能性があります。
開始方法: 実際のデータサンプルを収集し、設計ツールのプレースホルダーデータを置き換えます。