WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Design widgets for the Smart Stack on Apple Watch

Design widgets for the Smart Stack on Apple Watch

SwiftUI & UI FrameworksDesignWidgetKitwatchOS
元の動画を見る

ハイライト

watchOS 10 ではスマート スタックが導入され、ウィジェットをウォッチフェイスに直接オーバーレイできるようになりました。 6 つの標準レイアウト、カスタム カラー マッチング、信号ベースの関連性メカニズムを通じて、開発者はユーザーが手首を上げるだけで 10 秒以内に最も重要な情報を取得できるようにします。

主要内容

ウォッチフェイスからスマートスタックへ: 情報取得の進化

Apple Watch の核となる価値は、一目でわかる情報です。これまで、複雑な機能（コンプリケーション）は特定のウォッチフェイスにのみ埋め込むことができました。 Wayfinder や Modular などのウォッチフェイスは情報密度が高いですが、パーソナライズされた表現のためのスペースが犠牲になっています。

watchOS 10 のスマート スタックはこの矛盾を解決します。ユーザーがどの文字盤を選択しても、Digital Crown を回すと、関連性によってインテリジェントに分類されたウィジェットのスタックが表示されます。ユーザーはウィジェットを手動で追加、削除、固定することもできるため、スタックが動的かつ制御可能になります。

（00:14）

6 つの標準レイアウト: 一貫したデザイン言語

ウィジェットの読書体験は本をめくるようなもので、各ページのスタイル、位置、フォント サイズは一貫している必要があります。 Apple は、この目的のために 6 つの標準レイアウトを定義しています。

3 行のテキスト レイアウト — プレーン テキスト情報に適しています。タイトルと抜粋を表示するためにニュース ウィジェットによって使用されます。

色分けされたテキスト レイアウト — テキストに色の区別を追加します。カレンダーウィジェット イベント内容とカレンダーの色を同時に表示するために使用します。

棒進行状況チャートのレイアウト — 補助テキストを含むグラフィック コンテンツ。オーディオブック ウィジェットと併用して、読書の進行状況と現在の章を表示します。

円形グラフ レイアウト — 円形のデータ表示に適しています。アクティビティ ウィジェットのフィットネス リングはこのレイアウトになっており、カロリーや運動時間などの詳細を追加するテキストが含まれています。

大きなテキスト レイアウト — 単一の値またはキーワードに適しています。カレンダー月ウィジェット 日付を表示するために使用します。 「高」または「低」などのステータス単語を表示するために使用することもできます。

グラフ レイアウト — 時系列データに適しています。

（02:49）

必要な情報のみを表示するウィジェットを設計します。ユーザーは、Watch で一目でわかる情報の閲覧に 10 秒以内を費やしてください。

標準レイアウトではニーズを満たせない場合は、レイアウトをカスタマイズできますが、読みやすさを確保するためにシステム テキスト スタイル クラスを使用することをお勧めします。

色とアイコン: ウィジェットを一目で認識できるようにします

Smart Stack のウィジェットはダイヤルの色に制限されなくなり、開発者はブランドの色や情報の色をより自由に使用できるようになりました。

デフォルトでは、ウィジェットは白いテキストを持つ暗いマテリアルの背景を使用します。 Apple は開発者に対し、認識しやすい背景色を選択することを推奨しています。天気ウィジェットは動的なグラデーションを使用して気象条件を伝え、株価ウィジェットは赤と緑を使用して上昇色と下降色を区別し、オーディオブック ウィジェットはぼやけた本の表紙を使用して雰囲気を作り出しています。

アイコンについては、テキストとより調和的に一致させるために、SF シンボルまたはベクター アイコンを使用することをお勧めします。

（07:02）

セッションとウィジェットの連携

セッションは、音楽の再生、タイマーの実行、フィットネス記録の記録など、明確な開始時刻と終了時刻を持つアプリケーションのアクティブな状態です。

Smart Stack は、システムレベルのセッション制御ウィジェットを上部に自動的に生成します。したがって、ウィジェットがセッション関連 (音楽やフィットネスなど) の場合は、曲の推奨や今日のトレーニング プランの表示など、セッションの前後の補助情報に重点を置く必要があります。これにより、機能の重複が回避され、セッション中のウィジェットの有用性が維持されます。

（08:41）

関連性: 最も必要なときにウィジェットを表示させます

Smart Stack の中核となる機能は、関連性によるインテリジェントな並べ替えです。活用する価値のある 5 つの合図の瞬間を次に示します。

  • 日時が近づいています — カレンダー ウィジェットはイベント開始の 1 時間前に優先度を高めます
  • 特定の場所に到達する — GPS または推定された場所 (自宅、職場、学校) を使用してリマインダーがトリガーされます
  • ヘッドフォンが検出されました — AirPods が接続されているときにオーディオブックが固定されます
  • 起床時間または就寝時間 — 睡眠データと組み合わせる
  • 動作の開始または終了 - アクティブなワークアウトがある場合、アクティビティが促進されます

（10:01）

詳細

Smart Stack のインタラクション モデル

スマート スタック インタラクションは、次の 2 つの主要な動作によって駆動されます。

  1. システム インテリジェント ソート: 時間、場所、デバイスのステータス、その他の信号に基づいてウィジェットの順序を自動的に調整します。
  2. 手動ユーザー制御: ウィジェットの追加、削除、ピン留め

コンボ ウィジェットは、すべてのスマート スタックのデフォルト コンポーネントであり、3 つの循環コンプリケーションをサポートしています。これは円形のアプリ ランチャーに適していますが、温度、UV インデックス、空気の質を同時に表示するなど、3 つのコンプリケーションを情報の組み合わせとして使用するのがより適切です。

設計実践のポイント

ウィジェットの設計では、次の 3 つの質問に答える必要があります。

  • レイアウト: コンテンツはどの標準レイアウトに適合しますか?カスタマイズする必要がありますか?
  • 認識性: 背景色とアイコンにより、ユーザーがアプリを一目で認識できるか?
  • タイミング: 最も必要なときにウィジェットを最上位に表示させるシグナルは何ですか?

コード例: WidgetKit インフラストラクチャ

このセッションはデザイン指向であり、コード スニペットは提供されていませんが、スマート スタック ウィジェットを実装するには、次の WidgetKit インフラストラクチャが必要です。

import WidgetKit
import SwiftUI

struct SmartStackWidget: Widget {
    let kind: String = "SmartStackWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            SmartStackWidgetView(entry: entry)
        }
        .configurationDisplayName("My App Widget")
        .description("Glanceable info for Smart Stack")
        .supportedFamilies([.accessoryRectangular])
    }
}

struct Provider: TimelineProvider {
    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []
        let currentDate = Date()
        
        // 根据 relevancy 信号生成时间线
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate, relevance: nil)
            entries.append(entry)
        }
        
        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let relevance: TimelineEntryRelevance?
}

キーポイント:

  • supportedFamiliesに設定.accessoryRectangular、これはスマート スタックでサポートされるウィジェット サイズです -TimelineEntryRelevanceスタック内のウィジェットのソート優先度を制御するために使用されます。
  • プロバイダーのgetTimelineビジネスロジックに基づいて複数の時点でコンテンツを事前生成する方法

関連性を使用してウィジェットの優先順位を上げます

import WidgetKit

struct RelevantProvider: TimelineProvider {
    func getTimeline(in context: Context, completion: @escaping (Timeline<RelevantEntry>) -> ()) {
        let now = Date()
        
        // 模拟一个即将开始的事件
        let eventStart = Calendar.current.date(byAdding: .minute, value: 30, to: now)!
        
        let entry = RelevantEntry(
            date: now,
            relevance: TimelineEntryRelevance(
                score: 100,  // 分数越高，排序越靠前
                duration: 3600  // 优先级持续 1 小时
            )
        )
        
        let timeline = Timeline(entries: [entry], policy: .after(eventStart))
        completion(timeline)
    }
}

struct RelevantEntry: TimelineEntry {
    let date: Date
    let relevance: TimelineEntryRelevance?
}

キーポイント:

  • TimelineEntryRelevanceのscoreスタック内のウィジェットの相対位置を決定します。 -durationこの優先順位が持続する時間枠を指定します
  • カレンダーのイベント、場所の変更、ヘッドフォンの接続などの信号に基づいてスコアを動的に調整します

重要ポイント

  • 「会議前のリマインダー」ウィジェットを作成

    • やるべきこと: 会議開始の 15 分前にスマート スタックの上部に自動的に表示され、会議室の場所と参加者が表示されます。
    • 実行する価値がある理由: 時間関連性シグナルを使用して、「会議が近づくまでスケジュールを見ることを覚えていない」という問題点を解決します。
    • 開始方法: を使用しますTimelineEntryRelevance(score:duration:)イベントの前に高い優先度を設定します。このウィジェットは 3 行のテキスト レイアウトを使用して、会議のタイトル、時間、場所を表示します。

  • 「帰宅時に自動切り替え」ウィジェットを作成

    • 何をすべきか: ユーザーが家の近くに到着すると、ウィジェットが上部に配置され、スマート ホームのクイック コントロールが表示されます。
    • 実行する価値がある理由: 位置情報の関連性を利用して、「ホーム アプリを開く → デバイスを探す → 操作する」という 3 ステップのプロセスを、手首を上げることで一目でわかるように圧縮します。
    • 開始方法: を使用しますCLRegion家のジオフェンスを定義します。getTimeline位置ステータスに基づいてさまざまな関連性スコアを返します

  • 「運動後データ」ウィジェットを作成

    • 何をすべきか: ワークアウト終了後、このエクササイズの概要 (期間、消費量、心拍数ゾーン) が自動的に表示されます。
    • 実行する価値がある理由: システムのセッション コントロール ウィジェットを補完するもので、ユーザーがデータを最も確認する必要があるときに表示されます。
    • 開始方法: モニタリングHKWorkoutSession状態の変更、ワークアウトの終了時に渡されますWidgetCenter.shared.reloadTimelines(ofKind:)ウィジェットの更新をトリガーし、高い関連性を設定する

  • 「ヘッドフォン接続の推奨」ウィジェットを作成

    • 対処方法: ヘッドフォンの接続が検出されたら、最近完了していないポッドキャストまたはプレイリストを先頭に推奨します。
    • 価値がある理由: オーディオブックと同じ考え方により、「何を聴きたいか」の意思決定コストがゼロになります
    • 開始方法: を使用しますAVAudioSessionルーティングの変更を監視し、ヘッドセットが接続されているときの関連性メカニズムによるウィジェットの並べ替えを改善します。

関連セッション

コメント

GitHub Issues · utterances