瀑布流和便當網格怎麼選？
一句話做出判斷
瀑布流會把不同高度的卡片排進直欄。便當網格會安排不同大小的卡片，顯示內容的重要順序。
大量獨立項目高度不同時，用瀑布流。少量精選內容需要用大小分出重點時，用便當網格。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Masonry Layout
↗ 瀑布流版面
瀑布流版面會把不同高度的項目排進各欄，填滿垂直空隙，但不共用橫列線。
靈感牆把直式和橫式卡片緊密排進均衡的欄位，減少空白。
- 什麼時候用
- 內容以瀏覽圖片為主，而且不需要逐列精確比較時，可使用瀑布流。
- 什麼時候不要用
- 如果來源順序、鍵盤操作順序或掃讀路徑會變得難懂，就不要使用。
- 程式裡的名稱
columns / masonry
Bento Grid
↗ 便當網格
便當網格把不同尺寸的方塊排進同一個版面，較大的跨欄區塊可顯示哪些內容更重要。
產品總覽把即時圖表放在大方塊，次要數字則放進較小的方塊。
- 什麼時候用
- 內容確實有重要順序，而且版面能清楚呈現這個順序時，可使用便當網格。
- 什麼時候不要用
- 不要隨意讓方塊跨欄，這會破壞閱讀順序，也可能只剩造型而沒有意義。
- 程式裡的名稱
grid-column: span n
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 瀑布流版面Masonry Layout | 內容以瀏覽圖片為主，而且不需要逐列精確比較時，可使用瀑布流。 | 如果來源順序、鍵盤操作順序或掃讀路徑會變得難懂，就不要使用。 | columns / masonry |
| 便當網格Bento Grid | 內容確實有重要順序，而且版面能清楚呈現這個順序時，可使用便當網格。 | 不要隨意讓方塊跨欄，這會破壞閱讀順序，也可能只剩造型而沒有意義。 | grid-column: span n |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 瀑布流版面（Masonry Layout）、便當網格（Bento Grid） 中，為真實使用流程選出最合適的介面模式。判斷規則：瀑布流會把不同高度的卡片排進直欄。便當網格會安排不同大小的卡片，顯示內容的重要順序。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。