# 策展 · X (Twitter) 🔥🔥

> 作者：clear (@clear_graphics) · 平台：X (Twitter) · 日期：2026-05-17

> 原始來源：https://x.com/clear_graphics/status/2055715173436924279

## 中文摘要

# 新創公司網頁設計中「Bento Grid」的崛起

現在前 100 大 SaaS 網站中，有許多都使用了 Bento Grid（便當盒網格）。

在這篇文章中，我將向你展示它們是什麼、為什麼有效，以及如何打造一個能帶來轉換率的設計……

---

## 什麼是真正的 Bento Grid：

Bento Grid 是一種基於卡片的佈局，靈感來自日本的便當盒。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778976701839-iaHIZvWpOWgAAA1ZBjpg.jpg)

內容被組織成模組化的「磁磚」或「儲存格」，大小各異，全部對齊底層的網格系統，並具有一致的間距和寬裕的圓角。

它與傳統網格的關鍵區別在於，這些磁磚是「刻意」不對稱的。

有些磁磚橫跨兩欄，有些則橫跨兩列。

這種大小的變化創造了視覺層級（較大的磁磚代表重要性較高，較小的磁磚則提供輔助資訊）。

Apple 在 2023 到 2024 年間的產品宣傳影片中推廣了這種模式，以 Bento 風格的網格展示 iPhone 的功能。Stripe、Linear、Notion 以及數百家其他公司都以極快的速度採用了它。

到了 2026 年，這已成為 SaaS 行銷頁面上產品展示的主流佈局模式。

---

## 為什麼 Bento Grid 有效：（科學原理）

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1778976701560-iaHIZvNmzXoAAhARTjpg.jpg)

- 它們符合人們實際瀏覽頁面的方式

Nielsen Norman Group 的研究顯示，使用者會以 F 型或 Z 型模式瀏覽頁面。

Bento Grid 利用了這一點，將最大、最重要的磁磚放在左上角（視線最先落下的地方），並在周圍安排較小的磁磚。

眼動追蹤研究顯示，使用者傾向於優先關注視覺焦點較大的元素，這種佈局能有效引導使用者的視覺路徑。

- 它們透過「分塊」減少認知負荷

大腦在處理資訊時，將其拆解成獨立的區塊，會比處理連續的資訊流更有效率。

每個 Bento 磁磚都是一個獨立的資訊單元，訪客會一次處理一個磁磚，而不是試圖同時吸收整個區塊。

相關研究指出，模組化的資訊呈現方式有助於提升使用者處理資訊的效率，相較於傳統線性佈局，能更直觀地引導使用者完成資訊搜尋任務。

- 它們無需標題即可編碼層級

在傳統的功能區塊中，你需要「主要功能」和「次要功能」標籤，或是使用較大的字體來傳達重要性。

但在 Bento Grid 中，磁磚的大小「就是」層級。

訪客的大腦會自動將最大的磁磚視為最重要的。

- 它們天生具有響應式

因為每個磁磚都是一個獨立的模組，它們在行動裝置上可以優雅地重新堆疊，而不會失去邏輯連貫性。

桌面端的 3 欄 Bento Grid 在行動裝置上會變成單欄堆疊，且只需極少的佈局邏輯。

模組化結構使得響應式行為基本上是自動完成的。

---

## 如何打造一個能轉換的 Bento Grid：

網格結構：使用 12 欄的底層網格（CSS Grid 中的標準）。

磁磚會貼合此網格，但橫跨不同數量的欄與列。

常見的模式是一個大磁磚（橫跨 6 欄和 2 列），搭配四個較小的磁磚（每個橫跨 3 欄和 1 列）。

這會給你一個主導的 Hero 磁磚，以及提供輔助資訊的磁磚。

磁磚內容公式：每個磁磚應包含一項資訊。

頂部放置一個圖示或小型視覺元素、一個粗體標題（3-6 個字），以及一行描述（15 個字以內）。

這種限制「強迫」你保持清晰。

如果你無法用 15 個字解釋一個功能，那麼該功能本身就不夠清晰。

Hero 磁磚：你最重要的產品功能應獲得最大的磁磚。

這個磁磚可以包含產品截圖、短動畫或迷你演示（但請記住，它非常重要）。

它應該讓人一眼就能回答「這個產品到底是做什麼的？」這個問題。

例如，Linear 就用它來展示專案看板的截圖。

!

## 標籤

Web, 教學資源, 產業趨勢, SaaS