メーソンリ vs. 弁当グリッド
短い答え
メーソンリは異なる高さのカードを列に詰め込みます。弁当グリッドは計画されたカードサイズを使用して最も重要なものを表示します。
高さの異なる多数の個別アイテムにはマソニリーを使用します。サイズが重要性を示す小さなセットには弁当グリッドを使用します。
各パターンが何をするかを見る
それぞれの例を試してみる。その後、それが作られた仕事について読む
Masonry Layout
↗ メーソンリレイアウト
Masonry Layout は、高さの違う項目を列に詰め込んでいくよ。項目は縦のスキマを埋めていって、行のラインは共有しないよ。
インスピレーションボードは、背の高いカードや幅の広いカードを、空きスペースが少ないバランスの取れた列に配置します。
- 以下の場合に使用します
- 厳密な行ごとの比較が必要ない場合に、画像閲覧に使用してください。
- 以下の場合は使用しないでください
- ソースの順序、キーボードの順序、または予想されるスキャンパスが混乱する場合は避けてください。
- コードで使用する名前
columns / masonry
Bento Grid
↗ 弁当グリッド
Bentoグリッドは、違う大きさのタイルを1つのレイアウトにきれいに詰め込むよ。大きく配置された部分は、どのコンテンツが一番大事かを示しているんだ。
製品概要は、ライブチャートに大きなタイルを割り当てるよ。重要でない数字には、小さなタイルが使われるよ。
- 以下の場合に使用します
- コンテンツに真の重要度の順序がある場合に使用してください。その順序をレイアウトで示しましょう。
- 以下の場合は使用しないでください
- タイルをランダムに並べてはいけません。読み順を壊したり、意味のないスタイルを追加することがあります。
- コードで使用する名前
grid-column: span n
クイック比較
| UIパターン | 最適 | のためではない | コードで使用する名前 |
|---|---|---|---|
| メーソンリレイアウトMasonry Layout | 厳密な行ごとの比較が必要ない場合に、画像閲覧に使用してください。 | ソースの順序、キーボードの順序、または予想されるスキャンパスが混乱する場合は避けてください。 | columns / masonry |
| 弁当グリッドBento Grid | コンテンツに真の重要度の順序がある場合に使用してください。その順序をレイアウトで示しましょう。 | タイルをランダムに並べてはいけません。読み順を壊したり、意味のないスタイルを追加することがあります。 | grid-column: span n |
出荷前に
- 01
その人が何をする必要があるかを書き留めてください。
- 02
キーボード、フォーカス、タッチ、ズーム、読み込み、空、エラー状態をテストしてください。
- 03
人々がホバーや動作なしで同じ情報を得られるようにしてください。
- 04
小さい画面と大きい画面の両方で実コンテンツを使ってテストしてください。
04
比較リクエストをコピーできます
パターンを選ぶ際にチームが助けを必要とする場合、これをコピーしてください。
実際のユーザーフローに最適なパターンをメーソンリレイアウト (Masonry Layout)、弁当グリッド (Bento Grid)から選んでください。このルールを使用してください: メーソンリは異なる高さのカードを列に詰め込みます。弁当グリッドは計画されたカードサイズを使用して最も重要なものを表示します。 タスク、コンテンツ量、フローを停止するコストを書き出してください。キーボード、タッチ、読み込み、エラー、動作軽減の挙動を確認してください。選択理由を説明し、その後、プロジェクトのデザインシステムで最小限でアクセシブルなバージョンを作成してください。