これらの正規レイアウトは、画面サイズの大きいデバイスで最適なユーザー エクスペリエンスを実現する、実績のある汎用性の高いアプリ レイアウトです。
タイル
タイルを使用すると、ユーザーが作業を完了するために必要な情報とアクションにすばやくアクセスできます。ウォッチフェイスをスワイプするだけで、フィットネスの目標達成度や天気情報などを確認できます。タイルからアプリを起動したり、重要なタスクをすばやく完了したりできます。
Google のコンポーネントとスタイルを使用したカスタマイズ
ブランドのスタイルは特定のコンポーネントに適用できます。これには、プライマリ カラー、アプリアイコン、フォント、アイコン、タイルのエクスペリエンスに適用されるビジュアル アセットが含まれます。
レスポンシブ レイアウト用に作成する（固定高さの画面とマージンの割合）
コードとデザインのレイアウトをより大きな画面サイズに適応させるために、割合ベースのマージンやパディングなどのレスポンシブ動作が組み込まれるようにアップデートしました。テンプレートを使用している場合は、Tiles API を通じてこれらの更新を自動的に継承できます。必要なのは、画面サイズのブレークポイントの後にコンテンツやコンポーネントを追加したレイアウトを提供することだけです。より大きな画面サイズを活用するための詳細なガイダンスと推奨事項については、タイルのガイダンスをご覧ください。
すべてのテンプレートは、192 dp と 225 dp の 2 つのデフォルトの画面サイズブレークポイントで作成されます。行が利用可能なスペースを埋めるものの、長くなりすぎず、上下の曲線画面によってクリップされるよう、マージンは画面サイズに基づくパーセンテージ値に設定されています。タイルは画面の高さが固定されるため、不要なクリッピングを発生させることなく、限られた画面スペースを最大化するためにパディングを調整しました。
2 つの主なテンプレート（プライマリ レイアウトとエッジ コンテンツ レイアウト（進行状況リング付き））のマージンは異なりますが、デザイン レイアウトはすべてこのいずれかにマッピングされます。タイルごとに 3 つのメイン セクションがあり、それぞれに割り当てられるスロットがあります。場合によっては、ひと目で見やすくバランスの取れたデザインを維持しながら、利用可能なスペース全体にコンテンツが表示されるように、追加のマージンやパディングが追加されることがあります。
差別化されたエクスペリエンスの創出
4 つの主要な正規レイアウトがあり、それらに 80 以上の順列が組み込まれているため、実質的に無制限のカスタマイズが可能になります。タイルはスロットベースのシステムで構築されるため、正規レイアウトのスロットを任意のコンテンツに置き換えることができます。この場合は、レスポンシブ動作を維持し、設計に関する推奨事項に従ってください。
これらのカスタマイズは制限する必要があり、タイル テンプレートの構造を損なうものであってはなりません。これは、ユーザーが Wear OS デバイスでタイル カルーセルをスクロールする際の一貫性を維持するためです。
大きい画面サイズのサイズブレークポイントの後に値を追加する
大きな画面でスペースを最大限に有効活用するには、225 dp にサイズ ブレークポイントを追加します。このブレークポイントを使用すると、追加のコンテンツを表示したり、より多くのボタンやデータを含めたり、大きな画面に合わせてレイアウトを変更したりできます。
スクロールと非スクロールのアプリ レイアウト
円形の画面におけるアダプティブ レイアウトを設計する場合、スクロール ビューと非スクロール ビューには、UI 要素のスケーリングと、バランスのとれたレイアウトと構成の維持に関する固有の要件があります。
スクロールしないアプリのレイアウト
正規レイアウトとフルスクリーン コンポーネント（メディアやフィットネスを含む）
スクロールしないアプリビュー レイアウトには、メディア プレーヤー、確認ダイアログ、選択ツール、スイッチャー、進行状況インジケーターを使用する特別なフィットネス画面やトラッキング画面などがあります。任意の画面の高さを制限できるため、ユーザーはオプションのリストを参照しなくても、1 つのタスクやコントロール セットにフォーカスできます。画面サイズの小さいデバイスに対応するには、限られたサイズを念頭に置いて設計し、ひと目でわかるようにし、必要に応じて円形の画面を採用します。
対応のガイドライン（マージンの割合）
すべてのマージンをパーセンテージで定義し、中央のメイン コンテンツが利用可能な表示領域いっぱいに引き伸ばされるように垂直方向の制約を定義します。
デザイン時には、スクロールしない画面を上部、中央、下部のセクションに分割することをおすすめします。このように、上下のセクションに内側の余白を追加してクリッピングを回避し、中央のセクションは画面の全幅を活用できます。サイズが制限されている場合は、ロータリー スクロール ボタンを使用して画面の要素を制御することを検討してください。タップ操作だけでは最適なエクスペリエンスが得られない可能性があります。
差別化されたエクスペリエンスの創出
非スクロール レイアウトはカスタマイズできますが、画面に追加できるコンテンツの量と最適なコンポーネントの種類には制限があります。チップの代わりに IconButton を使用すると、限られたスペースを有効活用でき、ProgressIndicators や大きなデータポイントなどのビジュアル グラフィックによって重要な情報をグラフィカルに伝達できます。
画面のベゼルを覆う要素はすべて画面サイズに合わせて自動的に拡大するため、よりインパクトのある要素になります。
大きな画面サイズでブレークポイントの後に値を追加する方法
大きな画面サイズ用のレスポンシブ デザインを作成する場合、スクロールしないアプリのレイアウトでは、広い画面スペースを最大限に活用できます。既存の要素を拡大して追加のスペースを埋めることができるため、ユーザビリティが向上します。また、画面サイズのブレークポイントの後にコンポーネントとコンテンツを表示できます。
この動作の例を次のリストに示します。
- メディア プレーヤーには、追加のボタンや大きなコントロールを追加できます。
- 確認ダイアログでは、イラストやその他の情報を表示できます。
- フィットネス画面では、追加の指標を取得でき、要素のサイズも大きくなる可能性があります。
アプリのレイアウトのスクロール
正規レイアウト
アプリビューのレイアウトのスクロールには、リスト（ScalingLazyColumn）とダイアログが含まれます。これらのレイアウトはアプリ画面の大部分を占め、より大きな画面サイズに適応する必要があるコンポーネントのコレクションを表します。
コンポーネントがレスポンシブであることを確認します。つまり、コンポーネントが使用可能な幅いっぱいになり、画面の高さが広い場合は ScalingLazyColumn 調整を採用します。これらのレイアウトはすでにレスポンシブに構築されていますが、拡張された領域をさらに活用するための追加の推奨事項があります。
対応のガイドライン（マージンの割合）
クリッピングを回避し、要素に比例してスケーリングできるように、上、下、側面のすべてのマージンをパーセンテージで定義する必要があります。ユーザーがスクロールすると PositionIndicator が表示され、サイズに関係なく画面のベゼルを自動的に収納できます。
差別化されたエクスペリエンスの創出
スクロール ビューは高度にカスタマイズ可能で、コンポーネントを任意の組み合わせで任意の順序で追加できます。
上下のマージンは、上下に配置されるコンポーネントに応じて変わります。これは、画面の曲線の広がりによってコンテンツがクリップされないようにするためです。
大画面でブレークポイントの後に値を追加する
スクロール レイアウトでは、以前は画面スクロールしなければ見えない範囲に隠れていたものも自動的に表示されるため、付加価値を高めるために必要な作業はほとんどありません。各コンポーネントは利用可能な幅いっぱいになります。場合によっては、コンポーネントが追加のテキスト行（カードなど）を増やしたり、利用可能な幅を埋めるためにコンポーネントを拡大したり（アイコンボタンなど）することがあります。