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

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

アダプティブ UI とは

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

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

主な画面サイズ

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

画面サイズ

レイアウトの種類

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

スクロール ビュー
クリッピングを回避し、要素に比例してスケーリングできるように、上下の余白、左右の余白はすべてパーセンテージで定義する必要があります。
非スクロール ビュー
すべてのマージンをパーセンテージで定義し、中央のメイン コンテンツを利用可能な領域いっぱいに引き伸ばせるように垂直方向の制約を定義する必要があります。

アダプティブ レイアウトとデザイン プラクティスを通じて価値を付加する

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

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

一目でわかるコンテンツ
レスポンシブ レイアウトでは、1 つの画面に収まるように、より多くのチップ、カード、テキスト行、ボタンを表示できます。
表示されるコンテンツ要素の増加
定義された画面サイズのブレークポイントで適用される新しいレイアウトを利用して、可能であれば新しいコンテンツを導入できるため、画面サイズが大きいデバイスでユーザーに付加価値を提供できます。
ひと目でわかる改善
追加の画面スペースを使用して、コンテナの大型化、文字の大きさ、太いリングの表示、データの可視化を細かく行い、ひと目で把握しやすくします。
ユーザビリティの向上
追加の画面スペースを使用してタップ ターゲットを大きくし、視覚的な階層を増やし、コンテンツ アイテム間のスペースを増やして、インターフェースをより簡単かつ快適に操作できるようにします。
合成の最適化
更新されたコンポーネントとテンプレートを利用して、あらゆる画面サイズで UI のデザインを改善します。

アプリの品質

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

品質に関するガイドライン

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

使ってみる

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

始める

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

使ってみる

確立された正規レイアウトを利用する

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

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

正規レイアウト