アプリのレイアウト

Wear OS 向けにアプリを設計する場合は、アプリのレイアウトを意識的に設計してください おすすめしますWear OS は円形ディスプレイで実行され、クリッピングがより効果的であるため 一般的ですが、2 つのカテゴリの正規レイアウトがあります。 考慮すべき点を紹介します

スクロールしないアプリ レイアウト

スクロールしないレイアウトは、ひと目でわかる情報を重視し、ユーザーに価値を提供します。 やり取りがほとんどないか まったくないかを確認しますそのため、インフラストラクチャの構築は 次のレイアウトに変更できます。

ダイアログ、確認オーバーレイ、選択ツール、ステッパー、組み合わせなど

レスポンシブ非スクロール ビュー向けに作成する

  • 言語、フォント スケーリング、デバイス、変数を組み合わせてテストする 説明します。
  • スクロールできないレイアウトは、コンテンツが把握または管理されている場合にのみ使用する 特定のデザインを使用する必要がある場合に 最適です
  • レイアウトに推奨される上部余白、下部余白、推奨余白を適用します。
  • コンテンツが表示されない場所に余白をパーセンテージ値で定義する クリップされます。
  • スペースを最大限に活用するように、 さまざまなサイズのデバイス間でバランスが維持されます。

アプリ レイアウトのスクロール

1 画面に収まらない情報を含むページ より長く没入感のあるジャーニーをサポートするために必要となる、 表示されます。

例: チップリスト、混合リスト、カードリスト、ボタンリスト、下部チップと下部ボタンがあるダイアログ

レスポンシブ スクロール ビューに対応する

  • 推奨される上余白、下余白、余白を適用します。
  • 位置でクリッピングしないように、外側の余白をパーセント値で定義します。 コンテナの先頭と末尾。
  • UI 要素間に固定 DP 値でマージンを適用します。

画面サイズのブレークポイントを使用してアダプティブ スクロール ビューを作成する方法

レスポンシブ デザインの手法を採用したスクロールビューは通常、 サポートしています。ただし、特殊なケースでは、ブレークポイントを使用して、 ディメンションのオーバーライド、追加オプションを表示するレイアウトの拡張、 コンテンツを画面に合わせて見やすくしたり、次の例をご覧ください。 は、大画面で下の 2 つのボタンを大きくする方法を示しています。

大きな画面サイズのレイアウトでは、ボタンの幅が広く、リストアイテムにより多くのテキストが収まります

Figma デザインキット

デザインキットのダウンロード ページにアクセスして、組み込みの Duet AI による コンポーネント、オプション、推奨事項から、さまざまなアプリやタイルを作成できます。 ベスト プラクティスに従う設計になっています。