瀑布流和便当网格怎么选？
一句话做出判断
瀑布流会把不同高度的卡片排进直列。便当网格会安排不同大小的卡片，显示内容的重要顺序。
大量独立项目高度不同时，用瀑布流。少量精选内容需要用大小分出重点时，用便当网格。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
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） 中，为真实用户流程选出最合适的界面模式。判断规则：瀑布流会把不同高度的卡片排进直列。便当网格会安排不同大小的卡片，显示内容的重要顺序。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。