パソコン版を使ってみる

パソコンエクスペリエンスは最初からアダプティブであり、接続されたディスプレイやウィンドウ内のさまざまなサイズをサポートします。アダプティブ UI を作成して、幅広い Android デバイスをサポートします。アダプティブレイアウトは、ユーザーがアプリウィンドウのサイズをシームレスに変更できるようにする、デスクトップエクスペリエンスに不可欠なものです。

アプリをデスクトップエクスペリエンスに対応させるには、まずアプリの UI を適応させ、次に密度と入力操作の設計に進みます。詳しくは、アダプティブレイアウトをご覧ください。デザインラボで練習するには、アダプティブデザインラボをご覧ください。

ペインで考える

グループ化とコンテインメントを使用して、ペインベースのアプローチをレイアウトに採用します。コンテンツは、視覚的なコンテナを使用するか、ホワイトスペースによる暗黙的なグループ化を使用して整理できます。これらのペインは、拡大、制約、非表示、移動、ポップアップ表示など、柔軟な操作が可能です。ペインを使用した設計により、さまざまなモバイルデバイスで一貫性のあるエクスペリエンスを作成するプロセスが簡素化され、現在のグリッドと統合して複雑なレイアウトの配置を効率化できます。

同様のコンテンツをグループ化して、ペインとコンテインメントロジックの作成に役立てることができます。 — 類似したコンテンツをグループ化して、ペインとコンテインメントロジックの作成に役立てることができます。

すべきこと

画面ではなく、コンテンツのコンテナやペインという観点から考えます。

段階式

大画面ではコンテンツのスペースが広くなりますが、追加のスペースや、視聴距離などの人間工学的な要素を考慮する必要があります。タイポグラフィは、少し拡大して、離れた場所から見ているユーザーやキーボードで入力しているユーザーが快適に使えるようにする必要があります。

大画面での UI 要素とテキストの拡大縮小 — スペースをより効果的に活用するため、大きな見出しが選択されています。

UI 要素とタイプは、拡張ディスプレイと接続ディスプレイでスケーリングされます。画面解像度によって、スケーリングの比率が異なる場合があります。

既存のタイプスケールデザインで 1 ～ 2 段階上のステップを使用するか、デスクトップと拡張ディスプレイ用に設計された専用のタイプスケールを実装することを検討してください。デザインに意見に基づく調整を加えて、編集品質を高めることができます。

画像も拡大され、画面全体に表示されます。これにより、ユーザーは植物をより詳細に確認できますが、スペースを効率的に使用しているわけではありません。UI 要素を構造化する際は、この点を考慮してください。

コンテンツと UI 要素

コンテンツがグループ化され、スケーリングされると、ブレークポイントに合わせてコンテンツ UI の一部が移動または更新されることもあります。

コンテンツの各ペイン内で、コンテンツを適応させるかどうか、適応させる場合はその方法を決定します。コンテンツ自体を確認します。リストの行がカードに変わると、コンテンツの操作効率とスキャン可能性は低下しますか？さまざまなブレークポイントでコンポーネントに異なる動作をさせるために、幅や可視性を調整したり、コンポーネントを切り替えたりできます。

ペイン内の各 UI 要素とコピーの最大幅を決定します。UI 要素が幅全体に引き伸ばされたり、歪んだりしないようにします。ペイン内の最大パディングとマージンを設定します。行の長さを制限して、読みやすいコピーにする必要があります。短尺のコピーは 60 文字程度に制限し、長尺のコンテンツは長くてもかまいません。

すべきこと

コンテンツとコンポーネントの最大幅を設定して、全幅に引き延ばされないようにします。

段階的表示を適切に使用します。ユーザーがウィンドウサイズを大きくすると、より多くのコンテンツが表示されますか？追加コンテンツによってクリック数が減り、生産性が向上するか、混乱が生じるかを検討します。

コンパクトレイアウトでは説明が非表示になりますが、拡張レイアウトではスペースを有効活用するために説明全文が表示されます。

各ペイン内のコンテンツは、コンテンツに応じて、別の列やグリッド構造にリフローすることでレイアウトを変更できます。たとえば、カルーセル付きの縦型グリッドを、おすすめカルーセル付きのレンガ積みグリッドに更新できます。要素の垂直方向の変更を考慮し、制約とプレゼンテーションの変更と組み合わせます。コンテンツの消費によっては、このようにコンポーネントをシフトさせたくない場合もあります。

コンテインメントとレイアウトの最大幅の設定に基づいて、コンテンツコンテナをリフローするワイヤーフレームビュー。

ユーザーが読みやすさと生産性を最大限に高めるためにレイアウトを調整できるようにすることを検討してください。

コンテンツと UI 要素を適応させた後、コンテンツペインが互いに、またナビゲーション階層とどのようにやり取りするかを決定します。タップして詳細コンテンツに移動する代わりに、追加の画面スペースを使用して、詳細とサポートコンテンツを並べて表示できます。

ナビゲーションバーが使用されている場合は、使いやすさを向上させるため、ボトムバーを画面の横にあるナビゲーションレールに更新する必要があります。ボトムナビゲーションバーを伸ばさないでください。
タブなどのセカンダリナビゲーションでは、最大幅を固定して、正確に操作しやすくすることを検討してください。
アプリバーを対応するコンテンツペインに固定することもできますが、ナビゲーションの階層を混乱させないようにしてください。

コンパクトモードと展開モードでのナビゲーション — コンパクトモードと拡張モードのナビゲーション。

密度

デスクトップエクスペリエンスでは、入力の精度と画面サイズによって、インタラクション密度とビジュアル密度の両方が変化する可能性があります。

コンパクトなスマートフォンのレイアウトと比較して、ユーザーに負担をかけることなく、表データなどの視覚要素の密度を高めることができます。コンテンツ密度はオプションとみなし、レイアウト内でテキストのスケーリングを常に許可し、タイプサイズをハードセットしないでください。
コンポーネントのクリックターゲットはより正確である必要があります。コンポーネント周辺のクリックターゲットが誤クリックにつながる可能性があります。