VOCABULARY / 词条
Bento 网格
Bento Grid
使用不同尺寸但对齐于共同网格的内容块，组织一组可概览的信息。
可操作示例 · 虚构产品 FIELDNOTES
周末散步
沿着旧街，重新认识城市。
一家书店
雨后的街角
识别特征
- 共享网格基线
- 不同跨列或跨行尺寸
- 每块承担相对独立的信息
概念边界
是布局，不是材质或风格；卡片大小不同也不自动构成良好的信息层级。
什么时候考虑它
- 展示少量不同类型的内容摘要
- 需要通过块面尺寸突出重点
什么时候慎用
- 需要逐行精确比较大量相同字段
- 为了拼满网格制造无意义的内容块
取舍
适合概览；视觉顺序、DOM 顺序与手机阅读顺序需要共同设计。
条件规则 · 编辑建议
当布局变为单栏必须保留语义顺序，不让视觉重排改变键盘阅读逻辑。
相关词条
主从布局 ↗条件替代 · 决定主浏览结构
不同任务需要不同的浏览方式。
瑞士国际主义 ↗可以配合 · 采用规整的排版语言
网格结构可以使用瑞士风格处理。
来源与支持范围
定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
能力标签只描述本演示；应用到产品时仍须重新验证。
{
"states": [
"wide",
"compact"
],
"a11y": [
"DOM 顺序与内容逻辑一致"
],
"motion": "无"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。