VOCABULARY / 词条

Bento 网格

Bento Grid

加入比较＋

布局与信息架构粒度：页面bento · v0.1.0

使用不同尺寸但对齐于共同网格的内容块，组织一组可概览的信息。

可操作示例 · 虚构产品 FIELDNOTES

城市手记

周末散步

沿着旧街，重新认识城市。

阅读

一家书店

日常

雨后的街角

识别特征

共享网格基线
不同跨列或跨行尺寸
每块承担相对独立的信息

概念边界

是布局，不是材质或风格；卡片大小不同也不自动构成良好的信息层级。

什么时候考虑它

展示少量不同类型的内容摘要
需要通过块面尺寸突出重点

什么时候慎用

需要逐行精确比较大量相同字段
为了拼满网格制造无意义的内容块

取舍

适合概览；视觉顺序、DOM 顺序与手机阅读顺序需要共同设计。

条件规则 · 编辑建议

当布局变为单栏必须保留语义顺序，不让视觉重排改变键盘阅读逻辑。

来源与支持范围

StyleKit · Bento Grid ↗

把 Bento 描述为以不同卡片尺寸建立层级的网格布局。

检索日期：2026-09-15

定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。

类型扩展与实现说明

能力标签只描述本演示；应用到产品时仍须重新验证。

{
  "states": [
    "wide",
    "compact"
  ],
  "a11y": [
    "DOM 顺序与内容逻辑一致"
  ],
  "motion": "无"
}

完整 Agent 条目 JSON

{
  "id": "bento",
  "type": "layout",
  "name": {
    "zh": "Bento 网格",
    "en": "Bento Grid"
  },
  "aliases": [
    "便当布局",
    "Bento Layout"
  ],
  "granularity": "page",
  "intents": [
    "overview",
    "organize-content"
  ],
  "tags": [
    "网格",
    "模块",
    "概览",
    "不同尺寸",
    "布局"
  ],
  "definition": "使用不同尺寸但对齐于共同网格的内容块，组织一组可概览的信息。",
  "boundary": "是布局，不是材质或风格；卡片大小不同也不自动构成良好的信息层级。",
  "signature": [
    "共享网格基线",
    "不同跨列或跨行尺寸",
    "每块承担相对独立的信息"
  ],
  "when": [
    "展示少量不同类型的内容摘要",
    "需要通过块面尺寸突出重点"
  ],
  "when_not": [
    "需要逐行精确比较大量相同字段",
    "为了拼满网格制造无意义的内容块"
  ],
  "tradeoff": "适合概览；视觉顺序、DOM 顺序与手机阅读顺序需要共同设计。",
  "comparison": {
    "focus": "同时概览多个信息块",
    "mechanism": "网格与块面尺寸",
    "cost": "需要保持合理阅读顺序"
  },
  "sources": [
    {
      "id": "bento-stylekit",
      "title": "StyleKit · Bento Grid",
      "url": "https://www.stylekit.top/en/styles/bento-grid",
      "claim": "把 Bento 描述为以不同卡片尺寸建立层级的网格布局。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.stylekit.top/en/styles/bento-grid",
        "status": "available",
        "checkedAt": "2026-09-15T16:49:59.361Z",
        "jobId": "spn2-af6ce4a2a4039075f81f4883a1a1197acf7145a3",
        "url": "https://web.archive.org/web/20260915165025/https://www.stylekit.top/en/styles/bento-grid",
        "timestamp": "20260915165025"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "alternative",
      "condition": "决定主浏览结构",
      "reason": "不同任务需要不同的浏览方式。",
      "basis": "editorial"
    },
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "采用规整的排版语言",
      "reason": "网格结构可以使用瑞士风格处理。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "布局变为单栏",
      "instruction": "保留语义顺序，不让视觉重排改变键盘阅读逻辑。",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "wide",
      "compact"
    ],
    "a11y": [
      "DOM 顺序与内容逻辑一致"
    ],
    "motion": "无"
  },
  "demo": "bento",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "能力标签只描述本演示；应用到产品时仍须重新验证。",
  "searchTerms": [
    "grid",
    "modules",
    "overview",
    "varying sizes",
    "layout"
  ]
}