What's new in watchOS design

ハイライト

watchOS 7 は、元々ジェスチャーベースのコンテキスト メニューに隠されていた二次操作を可視インターフェイスに移動し、ピッカーを提供します。onDelete、その他のボタン、下部の操作、ツールバー ボタン、階層ナビゲーション、および機能を保持するその他のモード。

---

主要内容

ウォッチ上のアプリは簡単に重くなりすぎてしまいます。画面が小さく、手首を上げる時間が短い。長押し、深く押す、非表示のメニューなどの操作は見逃されがちです。 10171 このセッションでは、まず 3 つの制約が与えられます。Watch アプリは軽量である必要があります。機能は現時点で動作可能である必要があります。また、キー操作はユーザーに見える必要があります。 (00:37)

watchOS 7 の変更は、これらの制約をシステム アプリに実装することです。 Apple は、watchOS とネイティブ アプリのジェスチャーベースのコンテキスト メニューの監査を実施し、もともとジェスチャーに隠されていた操作をアプリのインターフェイスに戻しました。目標は、機能を維持しながら、操作をより直観的で安定させ、すべてのユーザーが見つけやすくすることです。 (01:33)

この話は主に二次的な操作についてです。ユーザーはメッセージを読むためだけにメッセージを開くこともできますが、それでも新しいメッセージ エントリが必要です。ユーザーは主に現在位置を確認するために地図を開くことができますが、それでも現在のエリアを検索したり、交通ビューを切り替えたりする必要があります。ユーザーがカレンダーの詳細を確認すると、招待者に電子メールを送信するか、イベントを削除する必要がある場合があります。設計タスクは、現在のインターフェイスの主要なタスクを奪うことなく、これらの操作を適切な場所に配置することです。 (02:38)

Apple が提供するパターンは非常に具体的です。長いリストの先頭で並べ替え、フィルター、またはビュー スイッチャーを使用します。スワイプ アクションを使用してリスト項目を公開および削除します。スクロールしない全画面コンテンツには「その他」ボタンを使用します。現在のコンテンツにバインドされた操作を詳細ページの下部に配置します。ツールバー ボタンを使用して、必要だがメインではないパス エントリをスクロール リストに配置します。目的地を長期間覚えておく必要がある場合にのみ、階層ナビゲーションを導入してください。 (03:25)

---

詳細

まず、操作をメインタスクとサブタスクに分割します。

(02:14) watchOS 7 には 3 つの設計目標があります。インタラクションは発見可能で予測可能でなければなりません。関連する操作はアプリに表示される必要があります。また、ジェスチャーベースのコンテキスト メニューを削除する場合、機能は削除できません。ここで重要なのは、ユーザーがこのインターフェイスを開く主な理由が操作であるかどうかを最初に判断することです。

たとえば、メッセージの主なタスクは通常、新しいメッセージを読み取ることです。 Compose は重要な機能ですが、このリストの主な読み取りパスではありません。カレンダー イベントの主なコンテンツはイベント情報であり、下部にある電子メールの送信または削除ボタンは、現在の詳細にバインドされた二次的な操作です。この分類は制御位置を直接決定します。

キーポイント:

• メインタスクはインターフェイスの最も直接的な位置に表示され、ユーザーが手首を上げるとすぐにタスクを完了できるようにする必要があります。
• 二次的なタスクは、特にアクセシビリティと発見のしやすさに影響を与える可能性のある入り口など、目に見えないジェスチャに隠すことはできません。
• More メニューに入れることができるのは、現在のコンテンツに関連する補助的な操作のみであり、メインの操作を詰め込むことはできません。
• 目的地を頻繁に切り替える操作が必要な場合は、ボタンよりも階層ナビゲーションの方が適しています。

ピッカーを使用して、長いリストの先頭でビューを並べ替え、フィルタリングし、切り替えます

(04:08) アクティビティ共有とストックの例はどちらも同じ問題を扱っています。リストが長すぎて、現在の並べ替えや表示サイズがユーザーの現在のニーズを満たしていない可能性があります。 watchOS 7 では、リストの先頭に入り口が配置され、ユーザーはモーダル ビューに入り、ワンクリックで並べ替えやビューを切り替えることができます。

List {
    Picker(selection: $viewing
           title: Text("Viewing")) {
       // Viewing options
    }
    // Stocks
}

キーポイント:

• Listこれは外部コンテナであり、このモードがスクロール可能なリストを提供することを示します。 -Picker(selection:title:)並べ替え、フィルタリング、または表示スイッチャーをホストするためにリストの先頭に配置されます。 -selection: $viewingユーザーが現在の表示次元に直接バインドすることを選択できるようにします。 -title: Text("Viewing")ユーザーが何に切り替えようとしているのかを理解できるように、入り口に明確なセマンティクスを与えます。
• このコードは株式の例に対応しています。ユーザーはパーセンテージやポイントなどのデータ ビューを切り替えることができます。

リスト項目を削除するために使用されますonDeleteスワイプアクションを公開する

(05:48) World Clock は、リスト行に適した二次操作を示しています。ユーザーは都市を左にスワイプすると、削除プロンプトが直接表示されます。この操作は現在の行にバインドされており、視覚的なフィードバックが明確です。削除した後は、リストの一番下にある「都市の追加」から再度追加することもできます。

List {
    ForEach(model.locations) {
        ClockCell(location: $0)
    }
    .onDelete { deleteClock(index: $0) }
}

キーポイント:

• ForEach(model.locations)各都市行の生成を担当します。 -ClockCell(location: $0)リストの主な内容をシンプルにして、行自体には依然として都市情報が最初に表示されます。 -.onDeleteちょっとまってForEachこれは、削除動作がこのリスト項目のグループに属することを示しています。 -deleteClock(index: $0)システムによって渡された位置を使用して、対応する都市を削除します。
• スピーチでは、このスワイプ アクション API が呼び出されることを明確に述べています。onDelete修飾子であり、当時すでに SwiftUI で利用可能でした。

スクロールしない全画面コンテンツでは、[その他] ボタンを使用してコンテキスト アクションを実行します。

(06:36) マップ自体のマップ ビューが主な操作領域であり、ユーザーはマップをパンするか、現在の場所に戻る必要があります。このようなインターフェイスは、上部に多くのコントロールを詰め込むのには適していません。 watchOS 7 の機能は、右下隅に [その他] ボタンを配置することです。クリックすると、現在地の検索、交通表示、標準表示の切り替えなどの操作が表示されます。

カメラリモートも同じモードです。ユーザーの主なタスクは、iPhone をリモート制御して写真を撮ることです。 [詳細] ボタンには、フラッシュ、Live Photo、その他のカメラ設定が含まれています。講演では、これを、単純なアクションまたはより複雑なオプションのリストを表示できるシート API として説明しています。 (07:46)

キーポイント:

• [その他] ボタンは、一目でわかる全画面表示、特にすべての操作を表示するのに十分なスペースがないインターフェイスに適しています。
• ボタンは SF シンボルが中央に配置された円形コンテナを使用できますellipsis構成します。
• Apple は、ヒューマン インターフェイス ガイドラインでさまざまな Watch サイズのヒット領域を参照し、必要に応じてボタンに透明なパディングを追加することを推奨します。
• 明るい背景と暗い背景の両方が可能ですが、プレゼンテーションの例では、読みやすさを確保するために、85% 不透明な白い丸いコンテナと 50% 不透明な 1pt の黒い外側のグローを使用しています。
• [詳細] メニューでは、現在表示されているコンテンツに関連する二次的な操作のみが行われます。

詳細ページの下部にあるボタンは、上のコンテンツにバインドされている必要があります

(11:10) カレンダーの詳細ビューでは、下部にあるボタンを使用して現在のイベントに関連する操作を処理します。招待状を受け取ったイベントの下部では、開始者に電子メールを送信でき、作成したイベントの下部では招待を削除できます。ボタンはさらに後方に配置されていますが、ユーザーが一番下までスクロールすると自然に目に入るコントロールが表示されます。

キーポイント:

• 下部の操作は、ユーザーが内容を読んでから操作するかどうかを決定するため、詳細ビューに適しています。
• 非運用情報は黒い背景に直接配置されます。誤解を招くのを避けるために、クリック可能な操作のみがコンテナーに配置されます。
• 破壊的な操作には赤いテキストを使用します。
• 削除したコンテンツを簡単に取得できない場合は、確認アラートを追加します。

スクロール リスト内の必要なエントリにはツールバー ボタンを使用します

(12:22) ツールバー ボタンは、メッセージとメールの作成ボタン用に watchOS 7 で設計された新しい API です。ボタンはナビゲーション バーの下に一時的に非表示になります。ユーザーは、新しいメッセージを作成する必要があるときにスクロールしてメッセージを見つけることができ、不要なときはメッセージをしまっておくことができます。

.toolbar {
    Button(action: newMessage) {
        Label("New Message",
              systemImage: "square.and.pencil")
    }
}

キーポイント:

• .toolbarSwiftUIのツールバー領域にボタンを配置します。 -Button(action: newMessage)新しいメッセージ アクションを明示的にバインドします。 -Label("New Message", systemImage: "square.and.pencil")テキストアイコンとシステムアイコンの両方が提供されます。
• この講演では、ツールバー ボタンはスクロールするビューでのみ使用すべきであると強調しています。これは、スクロール自体によってボタンが発見可能になるためです。
• 必要ではあるが、必ずしも現在のビューの主要なタスクではない操作に適しており、悪用することはできません。

階層ナビゲーションは、目的地を長期間覚えておく必要がある場合にのみ使用してください。

(13:39) Mail と Home は別の問題を解決します。ユーザーは一連の宛先を切り替える必要があり、そのような選択は長期的にはアプリを開いた後のエントリ ポイントに影響します。 「メール」を開いたら、「すべての受信トレイ」に直接入力できます。 「戻る」をクリックすると、ユーザーは Apple メールボックスまたは個人メールボックスに切り替えることができます。ホームを開くと、現在の家のデバイスリストに直接入ります。 「戻る」をクリックすると、別の家またはスタジオに切り替えることができます。

キーポイント:

• 階層ナビゲーションは「目的地」の選択に適していますが、1 回限りのフィルタリングには適していません。
• 最後に選択した目的地でアプリを開くことができるため、ユーザーの手順が 1 つ減ります。
• ナビゲーション バーのタイトルには、現在の目的地が表示されている必要があります。
• 戻るボタン 同じ宛先リストのセットに確実に戻ります。
• インタラクションにこの永続性が必要ない場合、講演ではこのモデルを使用しないことをお勧めします。

---

重要ポイント

• Apple Watch の株式またはフィットネス データのビュー スイッチャーを作成します: 内容: 「パーセンテージ、ポイント、アクティビティなど」を提供します。長いリストの先頭にあるビュー スイッチ。実行する価値がある理由: Session は、ソート、フィルター、ビュー スイッチャーを長いリストの先頭に明示的に配置し、ユーザーが小さな画面で情報を探すのに費やす時間を短縮します。開始方法: SwiftUI の場合List上部の埋め込みPicker(selection:title:)、選択内容をリストの並べ替えフィールドまたは表示フィールドにバインドします。

• 削除可能な watchOS リストにスワイプ アクションを追加: 対処方法: 世界時計、お気に入りの場所、To Do アイテムなどのリストで左スワイプの削除をサポートします。実行する価値がある理由: 世界時計の例は、削除が典型的な行レベルの二次操作であることを示しています。ユーザーは明確なプロンプトを確認でき、誤って削除した後にエントリを追加することで復元できます。開始方法: 使用するForEach同じリスト項目セットに追加されたデータ行をレンダリングします。.onDelete、削除関数は受信インデックスのみを処理します。

• 全画面コンテンツ ページの [その他] ボタンをデザインします: 対処方法: 地図、カメラのリモコン、画像プレビューなどの非スクロール インターフェイスの右下隅にコンテキスト操作エントリを配置します。実行する価値がある理由: これらのインターフェイスのメイン コンテンツが画面いっぱいに表示され、[詳細] ボタンで現在の領域の検索、ビューの切り替え、設定の調整などの二次的な操作を行うことができます。開始方法: 丸いコンテナを使用し、SF シンボルを追加しますellipsis、HIG を押してタッチ領域を調整し、シートを使用して簡単なアクションまたはオプションのリストを表示します。

• スクロール リストのツールバーに「新規」タイプのエントリを追加します: 対処方法: メッセージ、電子メール、およびメモのリストに新しいボタンを提供します。ただし、読み取り作業に負担をかけないようにしてください。実行する価値がある理由: セッションは、ツールバー ボタンの設計動機を説明しています。ほとんどの場合、ユーザーはコンテンツを読みますが、新しいエントリを作成する必要があることはほとんどありません。開始方法: SwiftUI スクロール ビューでの使用.toolbar、テキストとSFシンボルを入れますButton。

• 固定目的地切り替えを階層ナビゲーションに変更: 対処方法: 複数のメールボックス、複数のファミリー、複数のワークスペースを持つ Watch アプリを開いたときに、戻る切り替え入り口を保持したまま、頻繁に使用する目的地を入力できるようにします。実行する価値がある理由: Mail と Home の例は、永続的な宛先が 1 回限りのフィルターで表現するのに適していないことを示しています。開始方法: ユーザーが最後に選択した目的地を記録し、アプリを開いたときに対応するリストを入力し、ナビゲーション タイトルを使用して現在位置を表示し、戻るボタンを使用して目的地リストに戻ります。

---

関連セッション

• iOS ピッカー、メニュー、アクションを使用したデザイン — iOS 14 のピッカー、メニュー、およびアクションのデザイン選択は、watchOS の二次操作デザインとの比較に適しています。
• iOS ピッカー、メニュー、アクションを使用したビルド — UIKit でのメニュー、ピッカー、UIAction、およびその他のコントロールの実装を示します。
• SwiftUI の新機能 — SwiftUI 2020 の新しいコントロール、ツールバー、リスト、クロスプラットフォーム機能を紹介します。
• Apple Watch のコンプリケーションを作成する — Apple Watch のコンプリケーションの情報プレゼンテーションとタイムライン実装について説明します。
• watchOS のショートカットを使用したクイック インタラクションを作成する — アプリのインテントとショートカットを Apple Watch に導入する方法、およびインテントのルーティングとプレゼンテーション インターフェイスを理解する方法について説明します。