watchOS 10に向けたアプリのデザインおよび構築方法

watchOS 10に向けたアプリのデザインおよび構築方法

watchOSのデザイン原則の詳細を掘り下げ、SwiftUIを使用してアプリにそれらの原則を適用させる方法について確認します。タイムリーな情報を表示し、一目でフォーカスされたコンテンツを伝え、ナビゲーションを一貫した予測可能なものにするために、再設計されたユーザーインターフェースのアプリを構築する方法を紹介します。

関連する章
- 1:22 - Learn about the design principles of watchOS 10
- 5:54 - Design and build with NavigationSplitView
- 7:53 - Design and build with TabView
- 10:06 - Design and build for NavigationStack
- 11:19 - Layout
- 14:42 - Color and materials
リソース
関連ビデオ

WWDC23
ダウンロード

♪ ♪
Apple Design Teamのデザイナー Jennifer Pattonです私 Matthew Koonceは watchOSのSwiftUI Teamのエンジニアリングマネージャーです Jennifer: watchOSの 10回目のメジャーリリースではタイムリーな情報を表示しフォーカスされたコンテンツを一目で伝えディスプレイの形状と忠実度を称えるためにフルスクリーンのカラーとイメージを使用しナビゲーションを一貫した予測可能なものにするためユーザーインターフェイスをリデザインしました Matthew: APIも進化させました SwiftUIはまさに watchOS 10の核となるものですこのセッションではwatchOS 10のリデザインの詳細を説明しますまず重要なデザイン原則をいくつか紹介しますそしてアプリ内のナビゲーションを構成する新しい方法を見ていきますその後レイアウトシステムの進化とすべてのピクセルを活用するための APIのアップデートについて説明します最後に色とマテリアルがアプリに全く新しい次元をもたらす方法を見ていきます予定通りですか？ Jennifer: ええ！さっそく始めましょうまずはデザインの原則から Apple Watch向けにデザインする際にまず考えたいのは「私のアプリがその瞬間に人々に提供できる最も関連性の高い情報や体験は何か？」ということです例として天気予報アプリを見てみましょう Apple Watchは素早くフォーカスされたインタラクションに最適な時間計測デバイスなのでアプリを開くと最初に表示されるのは今日の地域の天気です Digital Crownを回転させるだけでその日の残りの時間の地域の天気情報が表示されその後は週間の天気情報が表示されます例えばニューヨークの天気を探している場合都市のリストはどの詳細ビューからもワンタップで見ることができます天気は私が「Apple Watchモーメント」と考えたいものを実現していますアプリをデザインするときはユーザーが手首を上げた時点で関連性のあるものだけに焦点を絞るようにしましょうウォッチエクスペリエンスは短いインタラクションのために高度に特化されるべきですもしあなたが10秒間誰かの注意を引くことができたとしたらどの情報を表示するでしょう iPhoneのニュースはコンテンツ豊富なマルチタブやマルチレベルのアプリですそしてApple Watchではニュースは 5つのトップ記事をフォーカスしていますコンテンツはフィード内で縦に積み重ねられタップするとインラインで展開されます短いインタラクションは Apple Watchのデザインで気に入っている点のひとつです数秒しか人の注意を引けないときは例えばニュースが今日のヘッドラインだけに体験を集中させるように簡潔である必要があります心拍数は有限のデータを最初に表示するためビューの大半をフルスクリーンアニメーションに充てることができますアクティビティは幅広いエクスペリエンスを 1つの焦点に絞ったビューにシンプル化しますよってアプリをデザインするときは簡潔で焦点を絞ったものにしましょう 2014年にApple Watchを発表したとき私たちはDigital Crownがディスプレイを隠すことなく使えるユニークで正確な入力デバイスであることも紹介しました watchOS 10ではDigital Crownをスクロールやページ送りと正確な調整を行うためのアプリへのアクセスやナビゲーションの手段として重視していますインタラクションは Crownに固定されるべきですが常にタッチ操作によってバックアップされるべきでもありますインタラクションをDigital Crownに結びつけるというデザイン目標を利用してアプリのナビゲーション構造とエクスペリエンスを形作ることができます watchOS向けにデザインする際は手首を上げた瞬間から人々がどのような体験をするのかを考えましょう watchOS 10の素晴らしい新機能はスマートスタックです Digital Crownを回すと一目で確認できるウィジェットがインテリジェントに並べられたスタックで画面に現れますアプリをデザインする際にはどの情報が最適なスマートスタックウィジェットになるかを考えることから始め関連性のあるタイムリーな体験を中心にデザインしてアプリを構築できます同僚のEdによる「Apple Watchのスマートスタック向けウィジェットのデザイン」もぜひチェックしてみてくださいウォッチアプリのフォーカスを今この瞬間に関連する一口サイズの情報に絞ったら次のステップはそれらの瞬間を簡単にナビゲートできる構造につなぎ合わせることです Matthewと彼のチームはみなさんが使用するための驚くべき新しいAPIの開発に懸命に取り組んできましたさあ Matthew Matthew: ありがとう Jennifer アプリ内のナビゲーションがSwiftUIでどのように更新されたか確認しましょう最初に一目で詳細なコンテンツを提供する NavigationSplitViewを見てみましょうそれからより多くのインタラクションを Digital Crownに結びつけることを可能にする TabViewのアップデートをいくつか紹介しますこれらは両方とも NavigationStackと並ぶ私たちのコアナビゲーションパラダイムですアプリを構成する正しい方法を選ぶことは基本的な決定でありそれぞれに強みがあります NavigationSplitViewから始めます watchOSの NavigationSplitViewのコンセプトは iPadOSの天気にあるような 2列のレイアウトから借用したものです watchOSではソースリストと詳細ビューが分離されその後再結合されソースリストは詳細ビューのすぐ下に格納されますこれでソースリストはタップするだけで表示されます Jennifer: NavigationSplitViewは天気予報の都市リストや株価リストのようなソースリストとそのソースリスト内のアイテムの詳細ビューがある場合に最適な選択肢ですアプリを起動したユーザーを直接詳細ビューに誘導できますどの詳細ビューを最初に表示させるかは位置情報更新頻度頻度またはその他のユーザーの意図を示す指標を使用しますタイトルが必要ないほど一目で詳細ビューがわかるようにしましょう Matthew: 私たちがSwiftUIに組み込んだ NavigationSplitViewの本当に巧妙な機能の1つは詳細ビューとソースリストの間の遷移ですリストのアイコンをタップしてもいいですし指で操作できればさらにいいですね Jennifer: そしてソースリストは比較データを表示する優れたツールですクパチーノは午前10時9分ブダペストは午後7時9分ですソースリストにタイトルを付ける必要はなくクローズボタンやナビゲーションコントロールも必要ありませんこれによりソースリストには短いナビゲーションバーが使用できより多くの比較データを一目で画面に表示することができます Matthew: NavigationSplitViewのAPIは watchOSでもほかのプラットフォームと同様ですソースリストを設定し選択で初期化することができます SwiftUIが自動的に詳細ビューに起動できるよう常に選択範囲を値に初期化します次に素晴らしい複数のアップデートを受け Apple Watchでアプリをナビゲートする私の新しいお気に入りの方法である TabViewについてお話しします TabViewはビュー間でスクロールでき watchOS 10の新しい機能として 1つのタブが必要に応じて拡大したりサイズを変更したりすることができます Jennifer: コンテンツがインラインで展開されるだけでなくデフォルトで1画面に収まるデザインで必要に応じてローカライズされたテキストや大きな文字をサポートすることもできます Matthew: アクティビティでの TabViewの使い方を詳しく見ていきますアクティビティにはリングの詳細ビューごとにタブがあり新しい「垂直ページ」スタイルが採用されていますまたアクティビティでは各タブ間に新しいぼかしのトランジションがありますこのトランジションをcontainerBackground モディファイアと組み合わせるとビュー間のシームレスなブレンドが可能になりますアクティビティ最後のページは最近終了したエクササイズのスクロールリストですこのリストの追加はリストの追加と同じくらい簡単です TabViewはスクロールするコンテンツを自動的に検出しそれに合わせて拡大しますこうしてアクティビティと同じようなレイアウトを素早く構築できますが TabViewにはもう一つトリックがあります Jennifer: 移動先のタブにスクロールしたときに発生する素敵なアニメーションにお気づきですか？アクティビティリングが左上隅にスケールアップしていく様子をご覧くださいこれはアクティビティリングが常に視界に入るようにしながらインタラクションをDigital Crownに結びつけるというデザイン目標を達成します Matthew: 「私にもできるのか？」疑問に思っているかもしれませんね答えは「できる」です見ていきましょう watchOS 10では TabViewの選択値に基づいてアニメーションを駆動できるようになりました実に巧妙なトリックのひとつはこれをマッチしたジオメトリエフェクトにフックすることですアクティビティリングはTabViewとツールバーの両方に表示されますこれら2つのビューのそれぞれにマッチしたジオメトリエフェクトを追加すると SwiftUIは1つの位置から別の位置に自動的にアニメーションします Jennifer: NavigationSplitViewと TabViewは本当に有能ですが必ずしもすべてのアプリに適するとは限りませんもしあなたのアプリが詳細とソースリストの間やいくつかの縦にページ分けされたタブ間でピボットすることによって必要なことができないのであれば NavigationStackを検討してください Matthew: その通りワークアウトやカレンダーミュージックなどの多くのアプリで NavigationStackを使っていますナビゲーションのプッシュアニメーションも一新しました選択したビューがハイライトされ移動するようになりました Jennifer: NavigationStackはビューの階層に誘導したりそこから戻ったりする最もわかりやすい方法です最初のビューには大きなタイトルを使いますが戻るボタンがあるサブビューには使いませんアプリをデザインするときはできるだけ少ないインタラクションで「Apple Watchモーメント」を達成するナビゲーション構造を選びましょう Matthew: これがwatchOS 10のナビゲーションです NavigationSplitView TabView NavigationStackはすべてのアプリで一貫した予測可能なエクスペリエンスを提供します Jennifer: アプリに最適なナビゲーション構造を選んだところでそれぞれのビューを構築するために使えるリソースについてお話しましょう Apple Watchのディスプレイとハードウェアが進化するにつれディスプレイは一貫して大きくなり丸みを帯びてきました私たちは年々丸みを帯びていくディスプレイに合わせてデザインする一方でコントロールラベルコンテンツのサイズと配置を定義する柔軟なグリッドシステムを開発しました様々なタイプのコンテンツに対応するため 3つの基本レイアウトをデザインしましたダイヤルベースビューインフォグラフィックビューそしてリストですこれらのレイアウトはすべて watchOS 10がサポートする様々なApple Watchのサイズに自動的に適応するようにデザインされていますダイヤルベースビューは密度の濃い情報を一目で把握するのに適していますフルスクリーンでカラー表示したり天気予報などの画像を使用したりすることでさらにコンテキストを追加できますダイヤルではコンテンツを隠すことなく最大4つの異なるコーナーコントロールを追加することもできますインフォグラフィックビューはチャートやグラフなどテキストやメトリクスのブロックと組み合わせたデータのビジュアライゼーションに最適ですまたリストを使えばコンテンツをスクロールして必要なものを簡単に見つけることができますグリッドはアクティブな表示領域の形状に基づいています私たちはディスプレイの曲率から始めそれを使って数学的にビュー内の要素のサイズと位置を決定しますこれらのレイアウトグリッドは Apple Design Resourcesで入手可能ですアプリのデザインに役立ててください Matthew: Jenniferとデザインチームが作成したレイアウトグリッドはwatchOS 10の基礎を形成しており多くのAPIの基盤となっています例えば文字盤ビューの構築に必要なインセットはシーンパディングで得ますまた新しい「top bar trailing」プレースメントを使用して画面右上のツールバーにボタンを追加しますこの配置を使用すると時間が邪魔にならなくなり画面の中央に表示されますナウプレイングビューはアップデートされたツールバーをうまく活用しています「top bar leading」と「trailing」のプレースメントを使用することに加えてナウプレイングはそのコントロールボタンをボトムバーに追加します SwiftUIはこれらのボタンを配置するため Jenniferの説明と同様のレイアウトグリッドを使用しています追加のパディングを加える必要はありませんまたボトムバーには一時停止ボタンがありますボタンをより大きく目立たせるために controlSizeモディファイアを使用することができますナウプレイングスクリーンを作ることはかつてないほど簡単ですツールバーの配置によって一度に多くのコントロールを画面に表示できるようになり集中したインタラクションの新たな機会が生まれます Jennifer: すべてのピクセルを活用し Apple Watchの使用体験をアプリ間でより一貫性のある予測可能なものにするためにレイアウトグリッドを開発しましたまた今後何年も素晴らしいアプリをデザインするためのヒントになれば幸いです Matthew: 次に色と充実したマテリアルがビューの階層構造の中で人々にどのような場所の感覚を与えるかについてお話ししましょう Jennifer: watchOS 10のデザイン目標のひとつはフルスクリーンのカラーと画像でディスプレイの形状と忠実度を強調することですそのため Ultra Thin Thin Regular Thickのような異なるブラーレベルで背景のコンテンツに影響を与える 4つの鮮やかなフルスクリーンのバックグラウンドマテリアルを追加しました Matthew: ほかのプラットフォームですでに使用しているものと同じSwiftUI APIを watchOSでも使用できます Jennifer: またフルスクリーンのバックグラウンドグラデーションを追加し独自のアクセントカラーで着色できるようにしましたアクティビティでは Move Exercise Standのアクセントカラーを使用して似たような3つの連続したタブを区別していますフルスクリーンカラーのもうひとつの素晴らしい使い方は Sleepの落ち着いたブルーの背景のようにトーン設定をすることです色を使って一目で情報を伝えることができます世界時計のようにソーラーグラデーションで時刻を表示するのですまたフルスクリーンの色を使って状態の変化を伝えることもできますタイマーではカウントダウン中は背景を黒にして明るいオレンジ色でエッグタイマーの終了を宣言していますフォアグラウンドの要素がこれらすべての背景で美しく見えるようにコントロールとプラッターセルには鮮やかな塗りつぶしマテリアルを追加しタイポグラフィで情報の階層を作成するために Primary Secondary TertiaryおよびQuaternaryのプロミネンスレベルで鮮やかなテキストラベルを追加しましたまたフルスクリーンの背景でも読みやすいようにすべてのシステムカラーに鮮やかなバージョンを追加しました Matthew: これら新しいマテリアルがすべて watchOSで利用できるのは素晴らしいアプリへの反映のされ方は？ノイズアプリを例にしてみましょうまずは全画面のバックグラウンドグラデーションからこれはwatchOS 10の新機能である containerBackgroundモディファイアによるものですノイズはグラデーションが適用された緑色を渡しますチャートの塗りつぶされていないバーと X軸のラベルはセカンダリのフォアグラウンドスタイルを使用していますセカンダリスタイルは鮮やかさを与え背景色が透けて見えるようにします塗りつぶされたバーと残りのテキストラベルはプライマリースタイルを使用していますこれでビューは完成です watchOS 10へのアプリのアップデートでほかの変更点にも気づくでしょうシステム全体のプレゼンテーションでフルスクリーンの薄いマテリアルが使用されるようになりアプリのどこにいるのかがわかるようになりましたこのビューのすぐ下に緑色のヒントが見えます実際 SwiftUIのすべてのコントロールラベルリストコンテンツはマテリアルの背景の上に配置されたときに驚くほど美しく見えるように更新されました Jennifer: ナビゲーションバーは美しく新しい可変ブラーを有していますこれはコンテンツがナビゲーションアイテムの下にスクロールする際に穏やかな遷移を提供します以上盛りだくさんの内容でしたデザインの原則アプリ内でナビゲートするまったく新しい方法まったく新しいレイアウトそして色とマテリアルの使い方について説明しました watchOS 10はApple Watchアプリのデザインにとって大きな飛躍です Matthew: すべての変更についてお話ししたいことがまだ多数あります Jennifer: 「watchOS 10について」で新機能の概要を「Apple Watchのスマートスタック向けウィジェットのデザイン」で美しいウィジェットのデザイン方法をご確認ください Matthew: すでに watchOSアプリをお持ちの方は「watchOS 10に向けたアプリのアップデート」をご確認くださいここで紹介したすべてのSwiftUI APIを使って既存のアプリをアップデートする手順をご説明します watchOS 10はデザインとエンジニアリングの深いコラボレーションによって実現しましたこれは始まりに過ぎません Jennifer: その通りです watchOSはかつてないほど活気のあるプラットフォームであり Apple Watchアプリのデザインや構築を行う絶好の機会です ♪ ♪

// This is an example of using scene padding to position a Circle according
// to the Dial layout grid
struct DialBasedView: View {
    var body: some View {
        ZStack {
            // Add a view to make the ZStack fill the available width, allowing the
            // Circle to position correctly. As an example, we use a rectangle.
            Rectangle()
                .foregroundStyle(Color.clear)

            // Use .scenePadding(.horizontal) on the dial to get the correct
            // width. In a ZStack with centered alignment, it is correctly
            // positioned.
            Circle()
                .foregroundStyle(Color.red)
                .scenePadding(.horizontal)
        }
        // Ignore vertical safe areas to allow the view to draw into the bottom
        // safe areas. This achieves the centering for the dial.
        .edgesIgnoringSafeArea(.vertical)
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23