このページは Cloud Translation API によって翻訳されました。

アダプティブレイアウトスタートガイド

Wear OS エコシステムは、さまざまな画面サイズのデバイスで構成されています。すべてのユーザーに高品質のエクスペリエンスを提供するには、アダプティブ UI の原則の活用が不可欠です。

アダプティブ UI とは

アダプティブ UI は、レンダリングされる画面のサイズに関係なく、利用可能な画面スペースを最大限に活用できるように、引き伸ばされたり変化したりします。

アダプティブ UI は、レイアウトロジックに直接組み込まれたコンポーネントとメソッドを使用して、レスポンシブに変化します。また、これらのレイアウトでは画面サイズのブレークポイントを利用して、画面サイズに応じて異なるデザインを適用し、より豊かなユーザーエクスペリエンスを実現しています。

新しいエクスペリエンスを設計する際に留意すべき重要な参照サイズについて学びます

円形の画面でアダプティブレイアウトを設計する場合、スクロールビューと非スクロールビューには、UI 要素のスケーリングと、レイアウトと構成のバランスの維持に関する固有の要件があります。

スクロールビュー
クリッピングを回避し、要素に比例してスケーリングできるように、上下の余白、左右の余白はすべてパーセンテージで定義する必要があります。

非スクロールビュー
すべてのマージンをパーセンテージで定義し、中央のメインコンテンツを利用可能な領域いっぱいに引き伸ばせるように垂直方向の制約を定義する必要があります。

以下の画像は一般的な候補です。例は説明のみを目的としています。各コンポーネントまたはサーフェスページでは、コンテキストに応じたレスポンシブガイダンスの詳細を確認できます。

一目でわかるコンテンツ
レスポンシブレイアウトでは、1 つの画面に収まるように、より多くのチップ、カード、テキスト行、ボタンを表示できます。

表示されるコンテンツ要素の増加
定義された画面サイズのブレークポイントで適用される新しいレイアウトを利用して、可能であれば新しいコンテンツを導入できるため、画面サイズが大きいデバイスでユーザーに付加価値を提供できます。

ひと目でわかる改善
追加の画面スペースを使用して、コンテナの大型化、文字の大きさ、太いリングの表示、データの可視化を細かく行い、ひと目で把握しやすくします。

ユーザビリティの向上
追加の画面スペースを使用してタップターゲットを大きくし、視覚的な階層を増やし、コンテンツアイテム間のスペースを増やして、インターフェースをより簡単かつ快適に操作できるようにします。

合成の最適化
更新されたコンポーネントとテンプレートを利用して、あらゆる画面サイズで UI のデザインを改善します。

Google の品質に関するガイドラインは 3 つのレベルで構成されています。3 つの階層すべてのガイドラインを遵守することで、可能な限り最良のユーザーエクスペリエンスを実現します。

あらゆる画面サイズに対応
アプリがあらゆる画面サイズで質の高いエクスペリエンスを提供できるようにします。アプリの利用可能なスペースをフル活用するレイアウトを作成します。

レスポンシブで最適化
可能なデバイスでより多くのコンテンツをユーザーに配信し、さまざまな画面サイズに自動的に適応するレスポンシブレイアウトを利用できます。

アダプティブで差別化
ブレークポイントを利用して、広いスペースを最大限に活用し、小さな画面のデバイスでは不可能な、大きな画面で新しい優れたエクスペリエンスを提供します。

確立された正規レイアウトを使用して、さまざまなデバイスサイズに UI がスムーズに適応できるようにします。

Google の正規レイアウトは、あらゆる画面サイズで高品質のエクスペリエンスを提供するように、慎重に開発されました。