watchOSデザインの最新情報

こんにちは WWDCへようこそ “watchOSデザインの最新情報” “watchOSデザインの最新情報”の セッションへようこそ 私はジェニファー･パットン Apple DesignチームのWatchデザイナーです このセッションでは 今年Watchのネイティブアプリケーションに 新しい機能を追加したいくつかの方法と 同じ機能の一部をwatchOSアプリケーションに 導入する方法についてご説明します その過程で学んだことを 皆さんと共有できることを非常に嬉しく思います さあ 始めましょう いくつかの指針となる原則から始めます Watchアプリケーションを設計する時は アプリケーションを軽量にする 必要があることに注意してください ご覧のSleep Cycleのように 時間がかかるインタラクションは制限して 機能に関しては慎重に選択してください 理想的には画面を一目見ただけで すべての情報を取得できることです アプリケーションに機能を追加する時は すぐに使用可能なものにしてください Wikilocのリストビューには フィルタオプションがあります フィルタリングは ユーザーインタラクションを あなた自身に関連させる優れた方法です 最後に アクションがエクスペリエンスにとって 重要であると判断したら そのアクションを見つけやすくします これは 操作するための 明確な視覚的なボタンを示す― BearというWatchアプリケーションです 今年はwatchOSでオペレーティングシステムと ネイティブアプリ全体の すべてのジェスチャーベースの コンテキストメニューの審査を行いました 以前のwatchOSバージョンでは アクションはジェスチャーベースの コンテキストメニューに配置されていました watchOS 7では より直感的な エクスペリエンスを実現するために すべてのアクションを アプリケーションに移動しました

その過程で これまでにない優れた 新しいインタラクションを Watchに作成しました これらの新しいパターンをあなたが どのように開発されるかを楽しみにしています 設計プロセスでは ３つのゴールを念頭に置いていました まず インタラクションは見つけやすいもので 予測可能でなければなりません

次に 関連するアクションは 常に表示される必要があります

３つ目に 機能を削除せずに ジェスチャーベースの コンテキストメニューを削除します これらの感性をデザインに取り入れていくと 表示したいアクションの多くが 実際にはセカンダリアクションの カテゴリに分類されることがわかりました 本日お話ししたいインタラクションは Watchアプリケーションを使用している 主な理由ではありません 代わりに機能を追加または強化し 重要ではあるが 二次的なアクションを提供したり 既にビューにあるプライマリアクションを フィルタ ソート またはその他の方法で 操作する方法をご提供します アプリケーションのアクションを 楽しいWatchエクスペリエンスに 不可欠なものに絞り込んだら セカンダリアクションを表示する いくつかの方法があります

長いリストを ナビゲートしやすくするのに役立つ― ソートやフィルタメニューなどの 一般的なアクションについてご説明します まずはスワイプアクションです 主要なセカンダリアクションに 簡単にアクセスできます

さらにオプションを配置する場所 スクロールビューの下部にアクションを 追加することの価値 そして 新しいツールバーボタンは 長いリスト内で 重要なアクションを提案します

また アプリケーション内の 目的地を変更するために 階層ナビゲーションモデルについても ご説明します

ソートとフィルタから始めましょう 長いスクロールリストは 現在の自分に関連する情報だけを ソートして フィルタリングする機能があれば より使いやすく パーソナルなものになります watchOS 7では Activityアプリケーションの Activity Sharingリストの一番上に ボタンを追加しました 長いリスト上の友人や家族と 自分の活動を共有しています 今日 最も運動をした人を 確認してみたいと思います 上部のソートボタンを タップするだけで モーダルビューが表示されます リンクされたテーブルビューで リストを１回のタップでソートでき 代わりに Exerciseを選択します モリーね　まだお昼前なのに

これがもう１つの例で これをビュースイッチャーと呼びます コンテンツのフィルタリングとは 少し異なり― 別のデータセットを表示しています

Stocksではフォローしている すべての株を一覧で確認できます もしこの情報が 今はあまり必要ないとしたら？ リストの上部にあるボタンをタップして Pointsを選択してみましょう ほら ずっといいですね リストのパーセンテージではなく ポイントを表示しています これは 私が探していた情報です

ソートとフィルタのメニューは 長いリストを絞り込むための 軽量で 実用的な方法であり ナビゲートが簡単になり より今の自分に関連しやすくなります ソート フィルタリング またはビューの 切り替えのメニューを作成するには SwiftUIのListに Pickerを入れ子にするだけです リストで使用できる別のAPIは スワイプアクションです 私たちはiOSでこれらのアクションを 常に使用しており リストビューに アクションを表示するために watchOSで今まで以上に 使用し始めています World Clockにはリストビューでの セカンダリアクションの素晴らしい例があります 私の都市リストでは テーブルの行を右から左にスワイプして 都市をリストから すぐに削除できる― 明確で認識可能な プロンプトを表示できます リストの下部にある Add Cityボタンを使用すると いつでも簡単に再追加できます

スワイプアクションAPIは onDeleteモディファイアと呼ばれ 現在SwiftUIで使用できます

リストへの機能の追加について ご説明しました しかし スクロールせずに 一目でわかるビューに 表示する必要があるオプションが 他にもある場合はどうでしょうか マップの例では画面全体が アクティブな領域です 地図を指で動かして移動したり 現在地ボタンをタップして現在地に 戻ることができます

ただし スクロール無しで 一目でわかるビューに 表示する必要がある追加アクションも いくつかあります そこで 右下に別のボタンを追加しました これらのアクションを表示できる アプリケーションのキーカラーに 省略グリフが付いています これはMoreボタンです

Moreボタンをタップすると 地図のこのエリアを検索したり トランジットとスタンダードビューを 切り替えたりできます このコンテキストメニューのオプションは 地図の表示可能領域に機能を追加します それはこの瞬間に 私がやっていることに関係があり 見つけやすくで信頼性があります

モーダル内で このようなシンプルな アクションのセット またはカメラのような より複雑なアクションのリストを表示できます Watchでカメラを開くと Watchをリモコンとして使用して iPhoneで写真を撮ることができます

ちなみにデフォルトでは ３秒シャッターに切り替えたので Watchを上から見ている間に 写真が撮られることがないので それはかなりの改善だと思います

次に iPhoneをすべてセットアップし 別の全身の自撮りを撮影する 準備ができたとしましょう フラッシュの設定を変更したり Live Photosを オンまたはオフに切り替えたり その他の一般的なアクションを Watchから直接実行したいとします 画面右下のMoreボタンをタップすると カメラ設定のオプション満載の モーダルテーブルビューが表示されます

これは かなりロバストなオプションの リストを持つシートAPIの例です

もう少しMoreボタンの デザインに注目しましょう

SFシンボル“ellipsis”が 中央に配置された― 単純な円形のコンテナ要素を使用して 独自のMoreボタンを作成できます 各Watch画面サイズの 推奨ヒット領域については AppleのHuman Interface Guidelinesを 参照してください 快適にタップできるように 必要に応じてボタンの周囲に 透明なパディングを追加してください

これでカメラのMoreボタンには かなりの数のオプションがありますが では 提供する必要のあるセカンダリアクションが １つある場合はどうでしょうか この写真アプリケーションを例にします

watchOS 7では 左下にボタンを追加して Watchの写真アプリケーションから 直接 文字盤を作成できるようにしました

ここでは 省略記号の代わりに アクションが１つしかないため Apple文字盤グリフを設計しました 独自のアプリケーションのグリフ言語を使用して ファミリーに適したグリフを設計したり SFシンボルで使用可能なグリフを 利用したりできます

このMoreボタンは非常に暗い背景と 非常に明るい背景で機能する必要があります このボタンをどのような背景でも 読みやすくするために 不透明度85％で白い円形のコンテナと 不透明度50％で1ポイントの black outer glowを使用しました

Moreボタンは現在表示している コンテンツに関連する― セカンダリアクションのメニューを 表示する最適な方法です Moreボタンの使用を検討する時は プライマリアクションをセカンダリ アクションから分離することが特に重要です プライマリアクションをMoreメニュー内に 配置しないでください また 提供するセカンダリアクションも 慎重に選択してください 一目でわかる全画面表示 またはカルーセルリストで Moreボタンを使用します ご覧のWorkoutなどの例です コンテキストオプションを提供する 必要があるけれども 十分なスペースがない場合です

詳細ビューの下部にあるActionボタンは アプリケーションでアクションを表示する 最も見つけやすく直感的な方法です カレンダーの例を見てみましょう 私が招待された このカレンダーイベントでは イベントの詳細の下部に 招待の送信者に 電子メールを送信できるボタンを 追加しました 詳細ビューの下部にあるアクションは 常にその上のビューのコンテンツに 適用される必要があります これは別のカレンダーイベントです このイベントは私が作成しました 自分で作成した カレンダーイベントの詳細の下部に ボタンを追加して このイベントをカレンダーから 私の手首で簡単に削除できるようにしました

混乱を避けるために このイベントの詳細にある 実行できない情報は 黒い背景に直接表示されます

下部のコンテナーにある ボタンのみがタップ可能に見えます ボタンに赤いテキストラベルを使用して 破壊的なアクションであることを示します 削除される情報が 簡単に取り戻せない場合は 確認アラートを追加します 次に ツールバーボタンと呼ばれる 新しいAPIをご紹介します Watchにおける特定のインタラクションニーズに 応えるためデザインしました メッセージとメールの作成ボタンです

待って どこにあるのでしょうか？ ナビゲーションバーの下に隠れています 新しいメッセージを作成するために Watchを使うことはあまりありません 代わりに ここに移動する主な理由は 届いたばかりの 新しいメッセージを読むことです しかし 新しいメッセージスレッドを 始める場合は 作成ボタンで可能です 不要になれば元に戻すことができます このツールバーボタンAPIは SwiftUIにあります スクロールビューでのみ使用してください スクロールは このボタンを 見つけやすくするものです そして アプリケーションの 機能に不可欠でも ビューのプライマリアクションではない 可能性がある― アクションに対しては 慎重に使用してください これまで さまざまな種類のボタンを使用して Watchアプリケーションに機能を 追加する方法について ご説明してきました watchOS 7ではボタンでは うまくいかない問題を 解決しなければならない 別のケースがありました 必要なのは別のナビゲーションモデル― 階層ナビゲーションです 場合によっては １つの階層のみで 事足りるケースもあります 例は ここメールで行います メールを開くと All Inboxesビューになっており 最新の電子メールを読む準備ができています しかし ナビゲーションバーの backボタンをタップすると アプリケーションの最上階にいるので Appleまたは個人のＥメールの 受信ボックスにアクセスできます AppleのＥメールを チェックしてみましょう ナビゲーションバーのタイトルにより 現在読んでいる受信ボックスがわかります また backボタンで いつでも戻って切り替えることができます 階層ナビゲーションモデルでは 次回アプリケーションを開いた際 同じ階層を記憶している必要があります インタラクションが その階層の永続性を必要としない場合 これはおそらく使用に適する モデルではありません 今年watchOSに追加した もう１つの例はホームです Watchでホームを開くと 家のデバイスリストに移動します しかし 左上をもう一度タップすると 目的地の最上位リストに移動します ここから デザインスタジオに 切り替えるだけで そこにあるデバイス操作できます ナビゲーションバーのタイトルが変更され 現在の目的地が示されています また タップすると画面が戻り― 常に同じ目的地のリストに 戻ることができます この“What's New in WatchOS Design” セッションによって Watchに役立つ機能を 取り入れることを心から願っています watchOS 7用のWatchを設計 または更新する時は ナビゲーションを改善するための 様々な方法を使って コンテキストメニュー内に何を配置するか 特に慎重になってください 楽しいWatchエクスペリエンスに 欠かせないアクションを選択してください また 提供するアクションを決定したら ジェスチャーベースのメニューを避け 視覚的なボタンまたは予測可能な インタラクションパターンを提供してください

これらのシンプルな設計ゴールを 念頭に置くことで そのアプリケーションを使いたいと思う すべての人にとって 適切でナビゲートしやすいものになります 追加情報については Appleデベロッパアプリケーションの 画面の下にリストされている リソースを必ず確認してください ありがとうございました