Design and build apps for watchOS 10

ハイライト

watchOS 10 は、SwiftUI をコアとして Apple Watch インターフェイスを再設計し、2 つの新しいナビゲーション パラダイム、NavigationSplitView と TabView の垂直ページめくりを導入し、全画面の背景素材、鮮やかな塗りつぶし、テキスト ラベルと組み合わせて、アプリケーションが最小の画面で最も焦点を絞った情報を表示できるようにします。

主な内容

10秒ルール

Apple Watch ユーザーが手首を上げると、わずか 10 秒しかかかりません。天気アプリを開くと、その日の現地の天気が直接表示されます。 Digital Crown を回すと次の数時間が表示され、次に回すと次の数日間が表示されます。iPhone のニュースは、複数のタブ、複数レベルのリッチ コンテンツです。ウォッチには 5 つの見出しのみが表示され、クリックするとインラインで展開されます。

このデザインアイデアは「Apple Watch Moment」と呼ばれています。ユーザーが手首を上げた瞬間に最も関連性のある情報は何ですか? [心拍数] には、まず現在の心拍数の値が表示され、次に全画面アニメーションを使用して傾向が表示されます。アクティビティは、複雑なデータを単一の焦点を絞ったビューに分割します。時計アプリをデザインするときは、次のことを自問してください: 時間が 10 秒しかなかったら、何を表示するでしょうか?

Digital Crown 優先ナビゲーション

2014 年に Apple Watch が発売されたとき、Digital Crown は画面を遮らない高精度の入力デバイスとして定義されていました。watchOS 10 では、このアイデアを極限まで取り入れています。スクロール、ページング、正確な調整はすべてリューズに固定されており、タッチはバックアップとして機能します。

スマートスタックはこのアイデアを具現化したものです。Digital Crown を回すと、スマートに分類されたウィジェットが次々と表示されます。アプリケーションを設計するときは、まずどの情報がスマート スタック ウィジェットに最適であるかを考えてから、これらの「現在関連性のある」エクスペリエンスを中心にアプリケーション アーキテクチャを構築します。

3 つのナビゲーション パラダイム

NavigationSplitView は、詳細ビューの下にソース リストを非表示にし、ワンクリックでアクセスできるようにします。天気 その日の天気の詳細を直接入力し、リストアイコンをクリックして都市を切り替えます。ソース リストにはタイトル、閉じるボタン、ナビゲーション コントロールは必要なく、より対照的なデータを表示するために短いナビゲーション バーを使用します。

TabView では、新しい垂直方向のページめくりスタイルが追加され、スクロールするコンテンツに合わせて 1 つのタブを拡張できます。アクティビティの 3 つのエクササイズ リングはそれぞれタブになっており、最後までスクロールするとエクササイズ履歴のリストが表示されます。タブ切り替え時の matchedGeometryEffect アニメーションをサポートし、アクティビティ リングが TabView から左上隅までスケールします。

NavigationStack は、ワークアウト、カレンダー、音楽などの深いレベル用に予約されています。プッシュ アニメーションが更新され、選択した項目が強調表示されて移動し、ナビゲーション関係がより明確に表現されます。

＃＃詳細

NavigationSplitView の実装

（05:56）

NavigationSplitView {
    List(cities, selection: $selectedCity) { city in
        Text(city.name)
    }
} detail: {
    WeatherDetailView(city: selectedCity)
}

キーポイント:

• API は他のプラットフォームと一致していますが、watchOS ではソース リストが詳細ビューの下に表示されません。
• selectedCityデフォルト値を初期化する必要があり、アプリケーションは起動時に直接詳細ビューに入ります。
• 詳細ビューにはタイトルは必要ありません。情報自体が一目で明確である必要があります
• ソースリストには閉じるボタンは必要ありません。リストアイコンをクリックするか、スライドして切り替えます。

TabView の垂直方向のページめくりと展開

（07:53）

TabView {
    MoveRingView()
    ExerciseRingView()
    StandRingView()
    RecentWorkoutsList() // 自动检测滚动内容并展开
}
.tabViewStyle(.verticalPage(transitionStyle: .blur))
.containerBackground(.green.gradient, for: .navigation)

キーポイント:

• .verticalPagewatchOS 10で追加された新しいタブビュースタイルです
• .blurトランジションにより、タブ間のぼやけた切り替え効果が作成されます
• containerBackground全画面のグラデーション背景をナビゲーション コンテナに追加します
• TabViewの自動検出Listスクロールするコンテンツが拡大して収まるまで待ちます

一致したジオメトリ エフェクトによるアニメーション

（09:12）

@Namespace private var animationNamespace
@State private var selectedTab = 0

TabView(selection: $selectedTab) {
    MoveRingView()
        .matchedGeometryEffect(id: "rings", in: animationNamespace)
}
.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        ActivityRingsView()
            .matchedGeometryEffect(id: "rings", in: animationNamespace)
            .opacity(selectedTab == 0 ? 0 : 1)
    }
}

キーポイント:

• matchedGeometryEffect2 つのビューを接続すると、SwiftUI が位置アニメーションを自動的に処理します
• [移動] タブまでスクロールすると、リングがツールバーから TabView 内の位置に合わせて拡大縮小されます。
• 合格opacityターゲット ビューの表示/非表示を制御して、レンダリングの繰り返しを回避します。
• このアニメーションは、主要な情報を常に表示しながら、インタラクションを Digital Crown に固定します。

ダイヤルベースのレイアウト

（13:26）

struct DialBasedView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundStyle(Color.clear)

            Circle()
                .foregroundStyle(Color.red)
                .scenePadding(.horizontal)
        }
        .edgesIgnoringSafeArea(.vertical)
    }
}

キーポイント:

• scenePadding(.horizontal)ウォッチフェイスのレイアウトグリッドに基づいて正しいマージンを計算します
• edgesIgnoringSafeArea(.vertical)ビューを下部の安全領域まで拡張してダイヤルを中央に配置します
• 透明な長方形により、ZStack が利用可能な幅を埋めることができるため、円を正しく配置できます。 ・緻密な情報表示に適したダイヤルレイアウト、四隅に操作ボタンを追加可能

ツールバーの新しい配置場所

（13:30）

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button(action: {}) {
            Image(systemName: "ellipsis")
        }
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) {
            Image(systemName: "pause.fill")
        }
        .controlSize(.large)
    }
}

キーポイント:

• .topBarTrailingボタンを右上隅に置くと、時間が自動的に中央に変わります
• .topBarLeading左上のボタンを配置します
• .bottomBar下部のコントロール ボタンを配置すると、SwiftUI がレイアウト グリッドに従って自動的にボタンを配置します。
• .controlSize(.large)主要な操作に適したボタンを大きく目立つようにする

全画面背景素材

（17:01）

.containerBackground(.green.gradient, for: .navigation)

キーポイント:

• containerBackgroundwatchOS 10 の新しい修飾子です
• サポート.ultraThinMaterial、.thinMaterial、.regularMaterial、.thickMaterial
• などのカラーグラデーションもサポートしています。.green.gradient
• システム ポップアップは、階層コンテキストを提供するためにデフォルトで全画面の薄いマテリアルを使用します。

鮮やかな前景スタイル

（16:22）

Text("Decibels")
    .foregroundStyle(.secondary)

Text("85 dB")
    .foregroundStyle(.primary)

Chart { ... }
    .foregroundStyle(.secondary) // 未填充部分

キーポイント:

• .primary、.secondary、.tertiary、.quaternary4 つのレベルの情報階層を提供します
• これらのスタイルには鮮やかな効果があり、背景色が透けて見えるようになります。
• フルスクリーンの背景でも読みやすいように、システムカラーには鮮やかなバージョンも用意されています
• リストのコンテンツとコントロールが更新され、マテリアルの背景に適切に表示されるようになりました。

重要ポイント

1. 手首のリフトで天気アプリを利用可能

• やるべきこと: シンプルな時計天気アプリケーションを作成し、それを開いて現在の場所の天気を直接表示し、デジタル クラウンを回して時間ごとに表示し、次に回して次の 5 日間を表示します。
• 実行する価値がある理由: NavigationSplitView を使用すると、戻るボタンを必要とせずに、ワンクリックで都市リストにアクセスできるようになり、情報密度が最大化されます。
• 開始方法: を使用しますNavigationSplitViewビルド、詳細ビューではダイヤル レイアウトを使用して温度と風速を表示し、ソース リストではList(selection:)

2. スポーツ データ ダッシュボード

• 手順: TabView を使用してページを垂直にめくると、心拍数、歩数、カロリーの 3 つのインジケーターが表示されます。各タブは、全画面のグラデーションの背景によって区別されます。
• 実行する価値がある理由:matchedGeometryEffectこれにより、タブを切り替えたときに主要なインジケーターが視覚的な連続性を維持できるようになります。.verticalPageDigital Crown によって完全にナビゲーションが駆動されるようにする
• 開始方法: 定義@Namespace、同じものをTabViewとツールバーに配置しますmatchedGeometryEffect見る、使うcontainerBackground異なるグラデーションを設定する

3. フォーカスタイマー

• やるべきこと: ポモドーロ アプリケーション、全画面の背景色がタイミング ステータスに応じて変化します - 集中しているときは落ち着いた青、休憩しているときは柔らかい緑、終了すると明るいオレンジになります。
• 価値がある理由: watchOS 10 の全画面背景素材と鮮やかなテキストにより、ステータスの変化が一目でわかり、現在の段階を知るために数値を見る必要はありません。
• 開始方法: を使用しますcontainerBackground動的な色を設定し、.primary/.secondaryテキストレベルを制御し、デジタルクラウンでタイミングの長さを調整します

4. スマートスタッキングウィジェット

• 内容: 既存の iOS アプリ用の watchOS スマート スタック ウィジェットを設計して、最も関連性の高いリアルタイム データを表示します。
• 実行する価値がある理由: スマート スタックは、watchOS 10 の中心的な入り口です。ユーザーは、アプリを開くよりも速く、Digital Crown を回すことでそれを確認できます。
• 開始方法: WidgetKit で作成された「スマート スタックのウィジェットのデザイン」セッションを参照してください。accessoryRectangularまたはaccessoryCircularスタイル付きウィジェット

関連セッション

• watchOS 10 の紹介 — watchOS 10 のすべての新機能の概要
• Apple Watch のスマート スタックのウィジェットをデザインする — スマート スタック ウィジェットのデザインの詳細な説明
• watchOS 10 用にアプリを更新する — 既存のアプリを watchOS 10 に移行するための完全なガイド