核心洞察
Bento Grid 解决了产品展示的两大问题：信息密度和视觉层级。
2026 年 SaaS 营销页产品展示的主导布局模式。
什么是 Bento Grid
起源
灵感来自日本便当盒（bento lunch box）。
结构
- 内容组织成模块化的 "tile" 或 "cell"
- 不同大小
- 对齐底层网格系统
- 统一间距
- generous corner radius
与传统网格的关键区别
Tile 有意不对称。
| 特征 | Bento Grid | 传统网格 |
|---|---|---|
| Tile 大小 | 有意变化 | 统一 |
| 视觉层级 | 大小创建 | 需要 header/字体大小 |
| 信息处理 | 离散 chunk | 连续流 |
- 有的 tile 跨两列
- 有的 tile 跨两行
大小变化创建视觉层级：
- 大 tile → 信号更重要
- 小 tile → 提供支持上下文
普及历程
| 时间 | 事件 |
|---|---|
| 2023-2024 | Apple 产品推广视频普及 |
| 随后 | Stripe、Linear、Notion 快速采用 |
| 2026 | SaaS 营销页产品展示主导布局 |
为什么有效：科学原理
1. 匹配扫描模式
Nielsen Norman Group 研究：用户以 F 模式或 Z 模式扫描页面。
Bento Grid 利用这一点：
- 最大、最重要的 tile 放在左上角（眼睛首先落点）
- 小 tile 围绕排列
眼动研究数据：
用户看大元素的时间是小元素的 2.6 倍。
2. 通过分块减少认知负荷
大脑处理信息的方式：
- 离散 chunk >>> 连续流
每个 Bento tile 是：
- 自包含信息单元
- 访客一次处理一个 tile
- 而非同时吸收整个 section
研究数据：
Journal of Usability Studies：模块化组织页面比传统线性布局信息查找任务快 23%。
3. 无需 Header 即可编码层级
传统 feature section：
- 需要 "primary feature" 和 "secondary feature" 标签
- 或更大字体大小来传达重要性
Bento Grid：
Tile 大小就是层级。
大脑自动处理最大 tile 为最重要。
4. 自然响应式
原因：每个 tile 是自包含模块。
行为：
- 3 列 Bento Grid（桌面）→ 单列 stack（移动端）
- 最小布局逻辑
- 模块结构使响应行为基本自动
如何构建高转化 Bento Grid
网格结构
底层网格：12 列（CSS Grid 标准）。
Tile 对齐网格但跨不同列数和行数。
常见模式：
| Tile | 列数 | 行数 | 角色 |
|---|---|---|---|
| 大 tile | 6 | 2 | 主导 hero |
| 小 tile 1 | 3 | 1 | 支持上下文 |
| 小 tile 2 | 3 | 1 | 支持上下文 |
| 小 tile 3 | 3 | 1 | 支持上下文 |
| 小 tile 4 | 3 | 1 | 支持上下文 |
Tile 内容公式
每个 tile 只包含一条信息。
结构：
- 顶部：icon 或小视觉
- 粗体标题（3-6 词）
- 单行描述（<15 词）
约束强制清晰。
关键测试：
如果 15 词解释不清 feature，feature 本身就不够清晰。
Hero Tile
最重要的产品功能获得最大 tile。
内容：
- 产品截图
- 短动画
- 迷你 demo
核心问题：
"这个产品实际做什么？"
示例：Linear 用项目板截图。
视觉一致性
| 属性 | 2026 标准 |
|---|---|
| Corner radius | 16-24px |
| Padding | 24-32px |
| Tile 间距 | 16-24px |
一致性让 Bento Grid 感觉 intentional 而非 chaotic。
不一致的后果：
- Mixed corner radii → 感觉破碎
- 不一致间距 → 感觉破碎
颜色和深度
目标：让每个 tile 感觉 distinct 但不创建视觉噪音。
方法：
- 同色系微差
- 微妙边框处理
- Soft shadows
示例：
- Stripe：tile 内渐变变化
- Linear：深色背景边框处理
两者都 work。
交互设计
| 交互 | 实现 | 效果 |
|---|---|---|
| Hover | transform: scale(1.02) | 微缩放 |
| 点击/轻触 | 展开为 modal | Stripe 方式，更多细节 |
| 滚动触发 | 顺序淡入 | 感觉 alive |
关键：super alive without being distracting。
常见错误
❌ 所有 tile 同样大小
问题：
- defeats 实际目的
- 没有大小变化 = 只是圆角普通网格
- 层级来自不对称
- 每个 tile 相同 = nothing stands out
❌ Tile 太多
上限：一次最多 12-15 个 tile。
超过后：
- 组织收益消失
- Grid 变得 overwhelming
解决方案：tabs 或 pagination 组织成组。
❌ Tile 内容太多
要求：每个 tile 应 glanceable。
过多内容示例：
- 标题
- 段落
- 列表
- CTA 按钮
压缩为：标题 + 一句话。
完整细节：展开的 modal。
❌ 没有清晰 Hero Tile
要求：每个 Bento Grid 需要一个明显更大的主导 tile。
没有的后果：
- 缺乏大 focal point
- 眼睛在等大小 tile 间随机弹跳
核心结论
Bento Grid 是 2026 年的定义性布局模式，有充分理由。
解决的两大问题：
- 信息密度
- 视觉层级
做好时：
PRINTS（印钞）。
- Clear
资源
- 作者：clear_graphics (@clear_graphics)
- 原文：https://x.com/clear_graphics/status/2055715173436924279