什么是 Bento Grid？
Bento Grid（便当盒布局）得名于日本便当盒——在一个有限的空间内，通过大小不一的格子将多种食物有序排列，每格各司其职，整体却和谐统一。在界面设计中，它是一套以非对称卡片网格为基础的信息密度布局系统。
2022年9月，苹果在 iPhone 14 和 Apple Watch 的发布活动中大量使用了这套布局形式，将产品功能用大小各异的卡片展示在同一屏内，信息密度极高却不显拥挤。此后，Figma、Linear、Notion、Vercel、Framer 等顶尖产品的官网和功能页纷纷跟进，Bento Grid 迅速成为 2023—2025 年 SaaS 作品集和产品展示的主流视觉系统。
"Bento Grid 不是一种排版风格，而是一种信息架构哲学——每个格子都在回答'为什么这条信息要出现在这里'。"
— Layout Design Trends, Awwwards 2024为什么这个趋势值得关注？
传统的卡片列表、标准 12 列网格已经无法满足现代用户的信息消费习惯。用户在同一时间处理的信息越来越多，但注意力窗口越来越短。Bento Grid 解决了一个核心矛盾：如何在有限屏幕内传达更多信息，同时保持视觉清洁度。
对于 UX/UI 设计师而言，Bento Grid 是展示设计认知深度的最佳工具之一——它要求你真正理解信息层级、视觉重量、空间节奏，而不是简单地"堆卡片"。作品集中能用好 Bento Grid 的设计师，往往能在面试中脱颖而出。
Bento Grid 正确的打开方式是：先建立信息层级，再决定卡片尺寸——而不是先摆格子再塞内容。
核心设计原则
最重要的信息占最大的格子。主功能卡片（Hero Card）至少占 2×2 单元，次要功能 2×1 或 1×2，辅助信息 1×1。卡片面积直接传达了"这件事有多重要"。
建立固定的卡片尺寸系统：Full（2×2）主 Hero、Wide（2×1）横向内容、Tall（1×2）纵向内容、Square（1×1）数字/图标。统一基础单元（如 280px），整体就会自然和谐。
不同卡片用颜色区分功能域：强调卡深色/彩色，次要卡浅色/半透明，辅助卡纯白/线框。颜色不只是装饰，它是信息分类的语言。避免超过 3 种主色系同时出现。
圆角半径与卡片尺寸成正比——大卡片大圆角（24px），小卡片小圆角（8px）。间距保持统一（16px 或 20px），整体才有节奏感。圆角不是设计选择，是系统规则。
代表案例与参考
以下是目前市场上 Bento Grid 应用最具代表性的产品和页面，每一个都值得深入拆解学习。
其他值得参考的案例：Vercel 仪表盘（数据类 Bento）、Notion AI 功能页（内容类 Bento）、Raycast 官网（工具类 Bento）。在 Dribbble 搜索 "bento grid UI" 可以获取大量设计灵感。
如何应用到你的设计中
Step 1 — 信息梳理：先列出所有需要展示的信息点，按重要程度分为 3 档（核心/次要/补充），这决定了卡片大小。
Step 2 — 建立基础网格：在 Figma 中建立 12 列基础网格，定义 4 种卡片尺寸（1×1、2×1、1×2、2×2），所有卡片都从这 4 种中选取。
Step 3 — 排列组合：先放最大的卡片（Hero Card），再填入中等卡片，最后用 1×1 小卡片填充空隙。保持整体矩形无空洞。
Step 4 — 颜色分层：Hero 卡用强调色（深色/渐变），次要卡用浅色背景，辅助卡用线框或半透明。不超过 3 种颜色层次。
Step 5 — 动效收尾：每张卡片进入时错开 50ms 的 delay，加上 spring 弹性进入动效（stiffness 200, damping 20），整体瞬间有生命力。