Material 3 - Adaptive design

一言で表すと

マテリアルデザインで携帯電話やタブレットからデスクトップなど、さまざまな画面サイズに対応するように設計する方法

概要

Large screen layouts

要点

横向きと縦向きの両方のデバイスの向きに合わせて設計します。

複数列のレイアウトを採用する

レイアウトグリッドをより大きな画面に適合させる場合は、デバイスサイズ全体で人間工学的に使用できるように、コンテンツと要素を列に分割します。

Columns, gutters, and margins

Columns(2)、gutters(3)、margins(1)でグリッドを構成する

ボディーのサイズが拡大または縮小すると、それに応じてグリッド列の数​​を変化させる

https://scrapbox.io/files/62162585511259001f0daf9d.png

Breakpoints

https://scrapbox.io/files/62162650b5e5820022db16b0.png

Material measurements

ほとんどの測定値は8dpに調整する

コンポーネントは8dp刻みでサイズ設定され、各画面で一貫した視覚的リズムを確保します。

アイコンなどの小さな要素は4dpグリッドに揃えることができる

レイアウトの構造

大画面レイアウトには、3つの主要な領域が含まれます。

https://scrapbox.io/files/6216274f9f1963001d73aed1.png

1.ナビゲーション2.アプリバー3.本体

本体のサイズ

一番小さいブレークポイント(0-599)

マージンの値は16dp

レイアウトのサイズが大きくなると、画面の幅に対して本体セクションが拡大する

最初のブレークポイント(600-839)

マージンは32dp

大きいブレークポイント（840+)

幅固定でマージンを最大幅200dpまで増やしていく

マージン200dpに達した後は再び画面の幅に対して本体セクションが拡大する

ナビゲーション領域

ナビゲーションドロワーやナビゲーションレールが表示される

ユーザーがアプリ内の宛先間を移動したり、重要なアクションにアクセスしたりする

ナビゲーション領域は、展開時に256dp、折りたたみ時に72dpの一貫した幅を維持します。

レイアウトのマージンが48dp未満の場合（たとえば、画面幅600〜839dp）、ナビゲーション領域に対応するために本体領域の幅を小さくすることができます。

containment

画像やキャプションなど、コンテキストを共有する関連要素を接続するための方法

ビュー内の要素を視覚的に関連付け、関連のない要素を区別するための境界を確立する

https://scrapbox.io/files/6216298f1b4db5001d069ef9.png

暗黙的なcontainment(1)

エッジがないように見えるが、暗黙の境界またはコンテナを与えることができる

いくつかの要素に微妙にまとまりを与える

明示的なcontainment(2)

コンテナーの境界を示し、アイテムをタップできることを明確にする

関連する要素のグループにアウトラインまたはelevationを追加する

画面の他の領域を調整せずにコンポーネントを引き伸ばさない

https://scrapbox.io/files/62162a38f6b3450021923a2d.png

コンポーネントの適応

覚的な表現（パディング、サイズ、レイアウト、または配置）の変更、またはデバイスのサイズと使用例に合わせて1つのコンポーネントを別のコンポーネントに切り替える

https://scrapbox.io/files/62162aaf57603d002132edd5.png

モバイルデバイスのテキストリストでは、余白、垂直方向の間隔、または密度を調整して、タブレットなどの大画面に合わせて調整できます。

コンポーネントの交換

https://scrapbox.io/files/62162b194538c700231f25d9.png

https://scrapbox.io/files/62162b201b4db5001d06ab64.png

レスポンシブパターン

隠れてたものを出す

https://scrapbox.io/files/62162b63a0ca6a0023e339e0.png

再配置する

https://scrapbox.io/files/62162b6d36e712001daeeb50.png

Foldable devices

気になるポイント

メモ

コメント