Android はさまざまなデバイス、フォーム、画面サイズに対応しているため、特定のピクセル単位で完璧なロックアップを設計することは非効率的であるだけでなく、ユーザー エクスペリエンスに悪影響を及ぼす可能性もあります。代わりに、適応的に設計、構築、思考します。最近、適応型レイアウトの構築に役立つ、おなじみのデザイン コンセプトを導入する新しい API を導入しました。
Pawparazzi は、これらのコンセプトを紹介するサンプルアプリです。このサンプルは、Grid や Flexbox などのアダプティブ API を使用したアダプティブ デザインを強調するために設計、構築されています。
アダプティブに考えることは、ブレークポイントで設計するだけでなく、柔軟なコンテナでコンテンツを考えることでもあります。
すべてがグリッドです。
コンテンツを構造化するための基盤があると、優れた設計プラクティスに役立ち、コンテンツをどのように適応させるかを決定するのに役立ちます。Android には、すべてのコンテンツをマイクロレベルで配置できる 8 dp のベースライン グリッドがあります。
Pawparazzi では、均等なモジュラー グリッドや一方向の列グリッドではなく、階層レイアウト グリッドを使用しています。つまり、グリッドを構成する列と行は、コンテンツの階層に基づいて決定されます。
グリッドのタイプは、コンテンツに応じて決定する必要があります。アプリのコンテンツから始め、コンテンツがどのようにグループ化されているかを考えます。これにより、レイアウトの全体的な構造が決まります。ペインの考え方について詳しくは、グリッドと単位、コンテンツ構造、パソコン版のスタートガイドをご覧ください。
Pawparazzi の主な目標は、ペットの概要、ペットの詳細、ランキングされたペットなど、さまざまな方法でチームのペットを見ることでした。つまり、ペットのギャラリーがメイン コンテンツ ペインとグリッドの大部分を占め、その後にナビゲーション要素とフィルタ要素が続くことになります。スペースが空くと、ギャラリーが複数の行に広がり、複数のペットが表示され、ペットの詳細が同時に表示されます。この適応原則は、大きなレイアウトでより多くのコンテンツを表示する「開示」です。
アプリの主な目標とコンテンツを検討することで、レイアウト グリッドをいつ、どのように適応させる必要があるかを判断できました。つまり、どのウィンドウ クラスのサイズ、ヒンジの配置、デバイスの画面の向きにするかです。
レイアウト グリッドから、サブグリッドを使用してより柔軟なコンテンツ構造を構築できます。ギャラリー自体がグリッドになっています。コンパクト サイズでは、2 列のグリッドが使用されます。
グリッドは双方向のレイアウトのコンセプトであるため、コンテンツは水平方向と垂直方向の両方に流れることができます。
これを使用すると、より興味深いレイアウトを作成したり、視覚的な階層をより明確にしたりできます。たとえば、グリッドを使用して上位のペットを伝える「今週のペット」などです。グリッドは 2x4 になる可能性がありますが、最上位のスポットは 2 列と 2 行にまたがります。
これらはすべて Grid API で実現できます。
コンポーネントを柔軟に調整する
グリッドはマクロ コンテンツとマイクロ コンテンツの構造をカバーしますが、Flexbox はコンテンツに応答する必要があるコンポーネントに役立ちます。これは、水平方向または垂直方向のみが指定される一方向のコンテンツに使用されます。たとえば、フィルタチップはラベルに応答し、フィルタ領域はフィルタの数に応じて拡大します。大画面で Reveal を使用すると、より多くのフィルタを一度に表示できます。
ニュアンスのあるクエリ
レイアウト グリッドを設計し、グリッドと flexbox を使用することで、複数の画面に適応可能なレイアウトを実現し、折りたたみ式などの独自のフォームにも対応できます。しかし、ユーザーのコンテキストが異なる場合はどうでしょうか？Android ユーザーはディスプレイに接続したり、マウスを接続したりできます。MediaQuery を使用すると、あらゆるコンテキストのユーザーに対応するために、ニュアンスのあるデザインの決定を行うことができます。
Pawparazzi では、ポインタの正確な入力を活用し、ターゲット領域を小さくしてコンテンツの密度を高めました。
Android AdaptiveUI サンプル
大画面デバイス向けに最適化された、インスピレーションあふれるデザインをご覧ください。メディア、クリエイティビティ、ゲームなど、人気のアプリ カテゴリの UI/UX テンプレートを参照します。
