{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "bento",
  "name": {
    "zh": "Bento 网格",
    "en": "Bento Grid"
  },
  "page": "https://designvocabulary.com/zh/entries/bento/",
  "self": "https://designvocabulary.com/zh/entries/bento.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/bento.json",
    "en": "https://designvocabulary.com/en/entries/bento.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "sample-reviewed",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "bento-stylekit",
        "url": "https://www.stylekit.top/en/styles/bento-grid",
        "title": "StyleKit · Bento Grid",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915165025/https://www.stylekit.top/en/styles/bento-grid",
          "capturedAt": "2026-09-15T16:50:25Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.stylekit.top/en/styles/bento-grid"
        }
      }
    ],
    "lists": [
      {
        "id": "L-C",
        "edition": "classic",
        "seat": 2,
        "origin": "editorial-reconstruction",
        "page": "https://designvocabulary.com/zh/lists/L-C/",
        "json": "https://designvocabulary.com/zh/lists/L-C.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "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"
    ]
  }
}