Bento 网格设计：2026 年 UI 布局指南

三栏式的功能介绍栏已经过时了。它已经过时两年了，但大多数设计师仍然沿用旧方法。

你肯定见过这种布局：三个大小相同的栏目，每个栏目包含一个图标、一个标题和一个段落，在移动设备上堆叠排列。2018 年至 2023 年间搭建的每个 SaaS 网站都用过这种布局。它兜售了一个谎言：你的产品由三个功能组成，每个功能都恰好占据 33% 的注意力。注意力从来都不是均等的，读者早在 TikTok 让他们意识到“密度才是王道”的那一年就停止阅读这些栏目了。

Bento 网格布局最终胜出，因为它承认了功能介绍栏从未承认过的事实：有些内容比其他内容更重要，读者应该一眼就能看出这一点。想要了解其背后的深层原理，请参阅 视觉层级。Apple 的 Mac 页面是这种布局在实际应用中最简洁的实例。

什么是便当网格布局

便当格 是一种布局模式，它将一个版块分割成大小不一的矩形单元格，每个单元格包含不同的内容，整体布局使整个网格看起来浑然一体。

这种布局模式的名称来源于日本的便当盒。不同大小的隔间，每个隔间都包含不同的内容，整体布局使其在视觉上保持平衡。它不是一排相同的列，也不是一堆叙述性的章节，而是一个具有精心设计的内部层级的单一构图。

这种布局模式有三个基本特征。首先，单元格大小不一，通常基于三列或四列的网格，有些单元格跨越多列或多行。其次，每个单元格的内容各不相同（例如，一个单元格包含图表，另一个单元格包含插图，第三个单元格包含指标，第四个单元格包含用户评价）。第三，整体视觉上的连贯性，通常通过统一的背景处理、一致的边框半径和克制的色彩运用来实现。

它不是什么：CSS Grid 的演示。砌体式布局。Pinterest 信息流。卡片的随机排列。Bento 布局注重构图，而非算法。

Bento 网格布局是一种压缩。功能行是叙述。大多数产品都需要压缩。

它为何取代功能行

三个原因。其中两个显而易见。一个原因使这种模式得以保留。

原因一：停留时间。 Apple 在营销页面上的内部测试表明，Bento 网格布局的访客停留时间比同等功能行布局长约 47%。原因并不神秘，读者可以快速浏览 Bento 网格布局。没有强制的阅读顺序。他们进入页面，选择感兴趣的单元格，然后停留。

原因二：密度高，但文字不多。 一个设计精良的 Bento 网格布局可以在传统布局只能容纳三个信息的空间内传达六到八个信息。由于单元格包含不同类型的内容（视觉、统计数据、文案、用户评价），读者不会感到内容过于密集。

原因三（真正的原因）：它符合现代产品的实际销售方式。 2026 年的大多数 SaaS 产品并非只有三个功能。它们是一个平台，包含一个核心功能、三到五个辅助功能、一个集成案例、一个论证点，以及可能一个值得单独提及的特定功能。这种布局并不适合三列行，而更适合 Bento 布局。布局与内容完美契合。

| 模式 | 适合此案例 | 不适合此案例 |

|---------|-----------------|------------------|

| 三列功能行 | 三个同等重要的功能，叙事型产品 | 功能权重不均的平台 |

| 功能堆叠（全宽行） | 深入的功能解释 | 需要一目了然地展示功能广度 |

| Bento 网格 | 平台、套件、仪表盘、论证页面 | Linear 教程，分步流程 |

目前最佳的三种实际应用

Apple (apple.com/mac)。如上所示。从 2022 年末开始，所有 Mac 产品页面都使用 Bento 布局。M 系列芯片部分采用最简洁的布局：一个主要单元格用于展示芯片，较小的单元格用于展示基准测试和用例。共享深色背景、共享圆角半径和一致的内部边距。芯片始终是视觉上的主导。这是编辑的选择，而非网格布局本身的问题。

Linear (linear.app/features)。开发者工具页面也使用 Bento 布局。功能页面由 4 列 Bento 堆叠而成，其中核心功能（问题跟踪、规划、构建）占用一个 2x2 的单元格，而较小的功能则占用 1x1 或 1x2 的单元格。 Linear 的版本以其克制著称：仅使用产品截图，不使用库存图片，标签采用等宽字体。它刻意营造出产品规格表的效果。

Vercel (vercel.com). Vercel 的首页布局是混合版本。部分单元格是插图，部分是产品截图，部分是纯文本。它们证明，只要每个单元格都遵循相同的视觉语言（相同的背景、相同的半径、相同的内部间距节奏），就可以在同一个布局中混合使用不同的媒体，而不会显得不协调。

三个不同的行业，三种不同的风格，却有着相同的基本模式。这种模式并非时尚潮流，而是为了解决特定的沟通问题而设计的布局：“我们做很多事情，这里一目了然，您可以选择您感兴趣的内容。”

网格布局（比看起来更简单）

大多数 Bento 网格布局都使用以下两种基本结构之一。

三列 Bento 网格布局 适用于篇幅较短的版块、客户评价和产品亮点展示。典型布局：

• 一个 2x1 的主图单元格（跨越两列，一行）

• 一个 1x1 单元格（一列，一行）

• 第二行中的两个 1x1 单元格

• 一个 1x2 单元格，用于突出垂直方向的内容

四列 Bento 网格布局 更适合篇幅较长的完整版块。典型布局：

• 一个 2x2 的主单元格

• 两个并排的 1x1 单元格

• 一个横跨底部的 2x1 单元格

• 一个 1x1 单元格作为行尾

您可以在 CSS Grid 中用大约二十行代码构建一个 Bento 网格：

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 240px;
  gap: 16px;
}
.bento-cell-hero { grid-column: span 2; grid-row: span 2; }
.bento-cell-wide { grid-column: span 2; }
.bento-cell-tall { grid-row: span 2; }
.bento-cell-default { grid-column: span 1; grid-row: span 1; }

将类应用于子元素，网格就会自动排列。计算就是这么简单。Bento 的难点不在于网格本身，而在于如何决定哪些单元格应该占据重要位置。

不会崩溃的响应式规则

桌面版 Bento 很容易实现。移动版 Bento 才是大多数实现失败的地方。

错误在于：保持网格形状并缩小所有元素。在 390px 宽的情况下，一个 4 列的 Bento 会变成四个 90px 的列，这毫无意义。单元格无法容纳实际内容。

规则：重新排版，而非缩小。 在移动设备上，Bento 网格会折叠成单列，但单元格顺序会改变以保持层级关系。

• 醒目的单元格会移至顶部（在移动设备上视觉冲击力最大的单元格会优先显示）

• 2x1 宽的单元格会变成全宽的单列单元格

• 1x2 高的单元格会变成标准高度的单元格，不会垂直拉伸

• 在桌面端，单元格顺序会根据重要性而非视觉位置重新确定

CSS Grid 通过 grid-template-areas 和媒体查询轻松实现此功能。或者，在 Tailwind 中：使用 lg: 前缀仅在大屏幕上应用 Bento 跨度，并让默认的移动堆栈自行处理。

| 断点 | 网格行为 |

|------------|---------------|

| 桌面端 (1280px+) | 完整的 Bento 网格，4 列，跨度可变 |

|平板电脑（768-1279像素）| 简化版 Bento 布局，双列，带一些跨列 |

| 移动设备（低于 768像素）| 单列布局，按内容优先级重新排序 |

测试：在 390 像素高度下，每个单元格的高度必须足够高，使得其中的内容无需缩放或水平滚动即可阅读。如果达不到要求，则说明单元格布局有问题，而不是视口的问题。

如果您想了解更多布局细节，请浏览 Brainy 论文 的其余部分。如果您需要一个 着陆页 来避免访客被过多的功能行淹没，请浏览 聘请 Brainy，我们将为您提供真实的布局、真实的文案和真实的转化率。

当 Bento 网格布局不适用时

Bento 并非万能的解决方案。使用不当，你会把内容硬塞进原本需要留白的单元格里。

Bento 布局在以下情况下会失效：

• **你的内容是顺序性的。**例如，分步教程、新手引导流程、叙述性案例研究等，都需要线性顺序。Bento 会破坏阅读顺序。

• **每个部分的重要性相同。**如果你确实有三个同等重要的功能，三列的布局仍然适用。Bento 布局需要内部层级结构。将它们扁平化到 Bento 单元格中，会让同等重要的内容看起来像是随机排序的。

• **每个单元格都需要深度。**如果你的功能需要 200 字来解释，它就不适合放在 Bento 单元格里。应该把它写成一个章节，而不是一个单独的单元格。

• **你没有强大的视觉素材。**当单元格包含视觉元素（图表、产品图片、插图）时，Bento 网格的阅读体验最佳。纯文本的 Bento 布局看起来就像拥挤的报纸版面。

决策表：

| 你的内容是…… | 使用 |

|--------------------|-----|

|功能权重不均的平台 | Bento 网格 |

| 三个权重相等、并列的功能 | 三列行 |

| 叙述性说明 | 功能堆叠（全宽行） |

| 循序渐进的流程 | 编号章节 |

| 仪表盘式校对页面 | Bento 网格 |

| 深入剖析一个功能 | 主标题 + 辅助章节 |

设计师的入门模式

以此为基础。在此基础上进行编辑，不要从零开始构建。

章节结构：

1. 网格上方的全宽标题（一行，醒目）

2. 四列网格，共 3 到 5 行

3. 一个主标题单元格（2x2），视觉上最强的元素

4. 四到六个辅助单元格，内容类型多样

5. 可选的全宽结束单元格，用于 CTA 或校对

单元格内容规则：

• 每个单元格最多一句话。如果需要一段文字，则说明单元格太小。

• 每个单元格仅包含一个素材（图表、插图、屏幕截图、指标、用户评价、Logo）。

• 保持一致的内边距（通常为 24-32 像素）。

• 保持一致的圆角半径（通常为 12-16 像素）。

• 克制使用颜色。大多数单元格共享一个背景。一两个单元格可以反转背景或使用强调色。

移动端布局顺序：首先是主图单元格，然后是三个最重要的辅助单元格，最后是其余单元格。

在您的下一个落地页上添加一个 Bento 布局部分。您会感受到它的不同。

常见问题

Bento 网格布局只是一种潮流吗？

不是。潮流通常持续一到两年。自 2022 年以来，Bento 网格布局一直是主要产品页面的主流布局，并且至今仍然如此。它是一种针对特定沟通问题的布局模式，而这个问题不会消失。

我可以在博客或内容网站上使用 Bento 网格布局吗？

很少。Bento 网格布局适用于产品和营销页面。博客文章是按顺序排列的。文章中心或特色内容网格可以使用 Bento 风格的不等高单元格，但文章正文内容不应使用。

Bento 网格和瀑布流有什么区别？

瀑布流是算法式的。单元格根据内容高度自动放置。Bento 网格是构图式的。单元格由设计师根据重要性有意放置。瀑布流适用于 Pinterest。Bento 网格适用于产品展示。

Bento 网格适用于仪表盘吗？

是的，当仪表盘中的组件大小不均匀时。例如，一个主要指标、几个次要指标、一个图表、一个日志、一个近期活动动态。这正是 Bento 网格的形状。参见：Linear 的项目视图，Vercel 的部署仪表盘。

Bento 网格应该有多少个单元格？

四到八个。少于四个单元格就不像网格了。超过八个单元格就像一堵墙了。七个单元格是一个常见的最佳数量。

停止构建功能列表

浏览过去三年内构建的任何 SaaS 网站。数一数你看到的三列功能列表。数一数你看到的类似 Bento 布局的版块。你会发现，这些数字每年都在变化。

原因很简单。功能列表的布局是为了讲述一个我们不再讲述的故事——“三个同等重要的功能”。现代产品不再只有三个同等重要的功能。它们包含一个平台、一个核心功能、一系列辅助功能、一个证明点和一个最终行动号召 (CTA)。这种布局更适合 Bento 布局，而不是一行。

在你当前的网站上选择一个仍然包含功能列表的页面。将该版块重新设计成 Bento 布局。将最强大的功能放在核心功能格中。将证明点放在辅助功能格中。将一句话差异化信息放在另一个格中。然后发布。

观察用户停留时间的增加。观察跳出率的降低。观察页面真正发挥作用。

停止构建功能列表。