Bento Grid 網頁排版設計教學：創意版面配置

三分鐘搞懂 Bento Grid：把版面當便當盒來裝

使用者通常會先快速掃過頁面，再決定是否細看。當首頁塞了十幾個區塊、每一區都想搶注意力，畫面就會變成一條冗長的內容流。Bento Grid（便當盒排版）把內容拆成大小不一的方格，像裝日式便當一樣排進外框，讓重要訊息與次要資訊形成清楚層級。

這篇我要把這套排版邏輯一次講清楚：它為什麼有效、什麼時候反而會害到你、怎麼從零開始組一個不會垮的 Bento 版面、以及手機上要怎麼退化才不會破版。如果你正在做品牌官網、作品集、產品頁或一頁式活動頁，這套方法可以讓你在同一個螢幕裡塞進更多資訊，又不犧牲呼吸感。

重點摘述：Bento Grid 的核心其實是內容配重，格子只是外殼。先決定哪些訊息最重要、給它們比較大的格子，再把剩下的訊息填進小格裡，整個版面的視覺重心就會自動出來。它最適合「資訊多、但要同時被看見」的頁面，例如首頁、產品總覽、服務介紹、作品集。

便當盒是怎麼變成一種網頁排版的

Bento（弁當）這個詞來自日文的便當盒。傳統日式便當盒裡會用隔板把白飯、主菜、配菜、漬物分成一格一格，每道菜有自己的位置，打開盒蓋就能一次看到全部。把這個邏輯搬到網頁上，就是你看到的 Bento Grid：一個大容器裡，用直線切成大小不等的方塊，每個方塊裝一個獨立訊息。

會說「Apple 都愛用」不是誇飾。Apple 從 iPhone 產品頁到服務總覽頁，反覆用這種一格一格、每格自帶主圖與短文案的結構，讓使用者在一個螢幕內同時看到「這是什麼、有什麼特色、我要怎麼用」。這幾年從軟體落地頁到個人作品集，從 SaaS 後台 Dashboard 到設計師 portfolio，到處都看得到 Bento 的影子，已經變成當代網頁設計的視覺語彙之一。

但這裡有個誤解要先釐清：Bento Grid 跟早期那種死板的「九宮格」「卡片牆」不是同一件事。九宮格每格一樣大，訊息沒有輕重；Bento 的關鍵是格子大小不一，讓版面自然產生節奏與視覺層級。換句話說，沒有「配重」的 Bento，就只是一堆沒有重點的方塊。

先破除三個對 Bento 排版的迷思

Bento 這兩年被講到爛，也累積了一堆以訛傳訛的誤解。我挑三個最常聽到的來拆。

迷思一：Bento 就是把所有東西都做成圓角卡片。很多人把「圓角加陰影」直接等同於 Bento，結果把整頁的段落、標題、按鈕全部包進圓角框裡，畫面變成一鍋卡片湯。真正的 Bento 重點是格狀結構帶來的視覺層級，圓角與陰影只是其中一種表現手法。你完全可以用直角、用純色塊、甚至用留白來切格，照樣是 Bento。手法是手段，格狀層級才是本質。

迷思二：Bento 一定要做成深色底。這是被 Apple 產品頁帶起的視覺印象，深色底配上彩色方塊確實搶眼，但那只是眾多風格之一。白底、淺灰底的 Bento 一樣能做出高級感，而且對文字密集的內容更友善、在一般商業網站上更通用。配色要配合你的品牌與內容屬性，不要為了模仿某種風格而硬套深色。

迷思三：Bento 一定要很多格才算數。我看過最有效的 Bento 版面，有的只有四個方塊。格子的數量取決於你的訊息量，硬湊出十幾格只會讓每格都空。一個四格的主從型 Bento，只要配重得當，效果會勝過一個塞滿十二格但沒有重點的版本。少即是多這句話在 Bento 上特別成立。

為什麼這幾年 Bento 排版又重新流行

排版風格會紅，從來不是偶然，背後一定有使用行為的支撐。Bento 這波復興有三個現實原因。

第一個原因是手機流量。根據 Statista 的長期追蹤統計，全球網站流量中來自行動裝置的比例，過去幾年持續維持在六成上下，2026 年第一季仍約佔整體網路流量六成。Google 也早在 2023 年底正式宣告，行動優先索引（mobile-first indexing）已全面套用，也就是 Google 主要使用手機版內容進行檢索與索引。這是索引方式，不代表手機版會自動得到排名加分（見 Google Search Central Blog 的公告，2023 年 10 月）。

換句話說，這代表你的版面在窄寬的手機上必須能獨立講清楚一件事。Bento 那種「一格一訊息」的結構天生適合手機，因為每個方塊都可以單獨折疊、單獨排序，手機上退回成直式的一條龍也不會亂。

第二個原因是視覺掃描習慣。現在的讀者不「閱讀」網頁，他們「掃描」。實務經驗跟多份眼球追蹤研究都指向同一件事：使用者在決定要不要細看一個頁面之前，只會花幾秒鐘快速掃過畫面。Bento 的方格邊界提供天然的視覺邊界，讓眼睛能在格與格之間快速跳動，比一整面文字段落更容易抓住注意力。

第三個原因是卡片式設計的成熟。從 Bootstrap 到 Tailwind，從 Elementor 到 Divi，現在主流的頁面編輯器與框架都內建卡片元件，做一個帶圓角、帶陰影、帶內距的方塊幾乎不用寫程式。Bento 其實就是把這些已經很成熟的卡片元件，用格狀系統重新組織起來而已。技術門檻變低，採用自然變高。

Bento Grid 跟 Masonry 差在哪：別把兩種搞混

很多人把 Bento 跟 Masonry（瀑布流）混為一談，這兩個做出來都「一格一格」，但背後的邏輯完全相反，搞混會做出四不像的版面。Masonry 是 Pinterest 帶紅的那種排版：每個方塊的高度由內容決定，方塊像水流一樣往下填補空隙，整體高度參差不齊。Bento 剛好倒過來：每個方塊的尺寸是設計者事先決定的，固定貼齊格線，整體齊整。

比較項目	Bento Grid	Masonry（瀑布流）
方塊尺寸	設計者事先決定，固定	由內容長度決定，參差
視覺感受	齊整、有秩序、像棋盤	流動、有機、像磚牆
適合內容	事先能決定輕重的訊息	高度不一、同質性高的內容（圖片、商品）
典範	Apple 產品頁、SaaS 首頁	Pinterest、圖庫網站

判斷用哪個的關鍵問句是：你的內容能不能事先決定大小？能，就用 Bento，因為你可以把重要訊息放大、次要訊息縮小；不能（例如商品圖片比例五花八門、商品數量隨時增減），就用 Masonry，讓它自然流動。把商品目錄硬塞進 Bento，每張圖都要裁切成相同比例，會失真；把首頁價值主張塞進 Masonry，重要訊息會被淹沒在一堆等高的方塊裡。工具用錯地方，再漂亮也救不了。

別急著套用：Bento Grid 會害到你的三種情境

Bento 不是萬用解。我在協助網站健檢時看過不少「為了 Bento 而 Bento」的悲劇，通常落在三種情境。

不適合的情境	為什麼會出問題	該改用什麼
純長文內容（部落格、教學）	閱讀型內容需要的是穩定的文字欄寬與呼吸空間，硬切成方塊會打斷閱讀節奏	單欄長排版
線性步驟流程（結帳、報名）	流程型頁面要的是明確的先後順序，Bento 的並列特性會讓使用者不知道下一步該看哪	直線步驟式
訊息量極少（一個口號一張圖）	內容不夠撐起多格時，硬做 Bento 只會讓每格都空虛，反而像沒做完	滿版 Hero 加留白

判斷標準很簡單：如果你的頁面是「要被從頭讀到尾」的，不要用 Bento；如果是「要讓讀者一次看到很多選項，自己挑想看的」的，那 Bento 就很適合。相對地，需要照順序輪替的內容就交給輪播，設計階段可對照Figma 輪播設計的做法。首頁、產品總覽、服務介紹、作品集、功能比較頁，這幾種是 Bento 的主場。

把 Bento 拆成三個動作：分類、配重、組裝

接下來是這篇的核心。我把我自己組 Bento 版面的流程拆成三個動作，你照著走，就算沒有設計底子也能組出一個有節奏的版面。這套流程的精神是：先處理訊息，再處理視覺。順序不能顛倒，一顛倒就會回到「先把畫面弄漂亮再想塞什麼」的老毛病。

動作一：分類，把頁面內容分成四種角色

打開你的頁面，把所有要放上去的訊息列出來，然後分成四種角色。這一步是整個 Bento 的地基，分類沒做好，後面怎麼排都會怪。

• 主角訊息：這個頁面最重要的那一句話或那張圖。首頁的價值主張、產品頁的主視覺、作品集的代表作品。整個版面只會有一到兩個主角。
• 佐證訊息：支撐主角的細節。功能清單、數字、客戶標誌、使用者見證。它讓主角更有說服力，但不能搶戲。
• 導引訊息：要讀者採取的動作。聯絡按鈕、報名連結、了解更多。這類訊息要放在容易點到的位置。
• 氣氛訊息：純粹讓版面好看、有溫度的元素。裝飾性插圖、品牌色塊、留白格。它不傳遞資訊，但少了它版面會乾。

分類完你會發現，大部分的 Bento 排版災難都來自「想讓每個訊息都當主角」。當每格都想搶注意力，就等於沒有注意力。

動作二：配重，決定每個訊息吃幾格

分好角色之後，接著決定每個訊息在版面上佔多大空間。我用一個「格數」的概念來配重：假設你的版面是一個 4 欄 3 列的基礎網格，總共有 12 個單位格。主角訊息吃 4 格（2x2），佐證訊息吃 2 格（2x1 或 1x2），導引訊息吃 1 到 2 格，氣氛訊息吃 1 格或當留白。

訊息角色	建議格數	常見尺寸（以 4 欄網格為例）
主角訊息	4 格	2x2，或橫跨 4 欄的滿版長條
佐證訊息	2 格	2x1、1x2
導引訊息	1 到 2 格	1x1、2x1
氣氛訊息	1 格或留白	1x1、純留白

配重的時候有一個我自己很愛用的檢查法：把所有格數加起來，應該要剛好填滿你的網格總數，或留一點空給留白。如果加起來超過，代表你塞太多訊息了，回去砍；如果遠低於，代表你的版面會鬆散，要嘛放大某些格，要嘛補氣氛元素。這個「格數預算」的概念是 Bento 跟一般卡片牆最大的差別：你是在像填俄羅斯方塊一樣一格一格拼，每個訊息都有它該有的重量。

動作三：組裝，把訊息一格一格塞進版面

角色定了、重量定了，組裝就相對直覺。兩個原則：主角放左上或正中央（這是視覺起點）、導引訊息放在動線終點（通常是右下或整排最右邊）。佐證訊息圍繞主角分佈，氣氛訊息與留白用來平衡視覺重量。

組裝的時候不要追求完美對稱。很多初學者一開口就要做「完美對稱的 Bento」，結果每格都一樣大、留白也一樣多，做出來的版面反而像試算表，沒有節奏。好的 Bento 會有大小落差，讓眼睛在掃視時自然停在主角上。這就像音樂要有強弱拍才好聽，每個拍子都一樣大聲的叫節拍器，不叫音樂。

這一步如果你用視覺化工具，我會建議先在 Figma 的網格系統裡拉出灰階方塊草圖，確定配重與動線都順了，再進到實際的頁面編輯器做。在草圖階段改版面的成本最低，做到成品才發現動線不對，改起來很痛。

四種最基本的 Bento 格狀結構

組裝的時候，你會發現大部分的 Bento 版面都可以歸納成幾種基本結構。掌握這四種，你就等於有了版面的積木庫，組合變化都從這裡出發。

結構名稱	長相	適合的頁面類型
主從型	左邊或上面一個大格（主角），其餘小格圍繞	產品頁、服務介紹
棋盤型	大小相近的方格整齊排列，少數幾格放大當焦點	功能總覽、作品集
長條型	幾條橫跨全寬的長格，夾雜小方塊	首頁 Hero 區、活動頁
不規則型	刻意打破格線，大小落差大、留白多	設計感品牌頁、portfolio

新手我會建議從主從型開始練。它的視覺動線最清楚，也最不容易出錯。等你能穩定做出主從型，再挑戰棋盤型與不規則型，那是進階版，需要更強的視覺判斷力。一開始就想做不規則型的 Bento，通常會做出「看起來很亂但其實沒有設計感」的版面，那是因為還沒學會規則就先想打破規則。

用 CSS Grid 落地：grid-template-areas 是最乾淨的寫法

講完設計邏輯，來談實作。要做出 Bento Grid，目前最乾淨、最直覺的技術是 CSS Grid，尤其是它的 grid-template-areas 語法。它讓你直接用文字把版面「畫」出來，所見即所得，改版面的時候只要搬動那幾個英文字，不用重算座標。

概念長這樣：你先定義幾個區塊名稱（例如 header、hero、feature、cta），然後用字串把版面拼出來。每一列是一個字串，字串裡用空格分開每個欄位要放哪個區塊。同名稱佔多格就會自動合併成一個大格，這正是 Bento「格子大小不一」的由來。

舉個具體例子幫助理解。假設你要做一個四欄的 Bento 首頁，你可以把第一列全部填 hero（讓主視覺橫跨整排），第二列拆成 feature 加 feature 加 cta 加 news（前兩格合併給主打功能、各一格給行動按鈕跟最新消息），第三列再放三個佐證訊息各佔一格。用 grid-template-areas 寫出來就是三行字串，每行對應一列，一眼就能看出整個版面的藍圖。要調整版面時，搬動字串裡的區塊名稱就好，不用碰座標數字，這對反覆改版的行銷頁面來說是救命設計。

想讓每個方塊維持固定長寬比，還可以搭配 grid-auto-rows 設定基準列高，再用 aspect-ratio 控制方塊比例。這兩個屬性組合起來，能讓你的 Bento 在不同螢幕寬度下都保持一致的視覺節奏，不會因為視窗縮放就垮掉。記得搭配 gap 統一格與格之間的間距，這個值要全頁一致；間距不一致是 Bento 最常見的對齊翻車原因。

如果你對 CSS 還不熟，這部分不用急著自己寫，先把概念理解起來就好。實務上，現在主流的 CSS 基礎教學都會涵蓋 Grid，而 Bento 用的就是 Grid 最核心的那幾個屬性。你可以把它想成是 Box Model 那套內距、邊框、外距觀念的延伸，只是從「單一元素的盒子」升級成「整個版面的盒子排列」。

為什麼我會優先用 Grid，把絕對定位或浮動放一邊？因為 Grid 能用明確的格線與斷點管理版面，比大量固定座標更容易適應不同視窗。它也有助於預留模組尺寸、降低 Core Web Vitals 裡的 CLS（累計版面位移），但仍要替圖片與動態內容設定尺寸，不能只靠 Grid 就保證版面穩定。Google 在 web.dev 的文件裡也強調，載入速度與版面穩定度會影響使用者體驗（2026 年）。

如果你是用 WordPress 架站不想碰程式，主流的 頁面編輯器像是 Elementor Pro 或 Divi 的版型都內建格狀容器元件，拖拉就能做出 Bento 結構，背後幫你處理好 Grid 語法。工具不同，但「分類、配重、組裝」這三步邏輯是一樣的，換工具不用重新學設計。

Bento 排版的無障礙與 SEO：順序比長相更重要

Bento 用 CSS Grid 可以輕易改變方塊的視覺位置，但這裡藏著一個很多人漏看的陷阱：視覺順序跟程式碼順序（DOM order）可以不一致。你可以用 Grid 把主角方塊排在畫面正中央，但它在 HTML 裡其實是第五個出現的元素。對一般讀者沒差，因為他們看的是畫面；但對搜尋引擎爬蟲跟螢幕閱讀器來說，它們讀的是程式碼順序。

這會帶來兩個問題。第一個是語意理解：搜尋引擎會依 DOM 與標題結構理解頁面，但沒有「愈早出現，SEO 權重就愈高」這種簡單規則。第二個是無障礙：視障讀者用螢幕閱讀器瀏覽時，是依 DOM 順序朗讀，如果視覺上的主角在程式碼裡排很後面，他們會先聽到一堆次要訊息才聽到重點，體驗很卡。

解法很簡單：盡量讓 DOM 順序就等於你想讓讀者閱讀的順序，視覺上的重排只當微調用。grid-template-areas 或 order 只會改變視覺排列，不會同步改變朗讀與鍵盤焦點順序，所以重排後要用鍵盤與螢幕閱讀器測試。無障礙還有幾個基本功也別漏：每個方塊裡的圖片要有合適的 alt 文字、標題層級要連貫、顏色對比要達到可讀標準。這些細節不影響 Bento 的視覺，卻直接決定版面能不能被更多人使用、能不能被搜尋引擎正確理解。

從效能角度看，Bento 還有一個被低估的優點：固定尺寸的方塊能預留空間，避免圖片或字型載入時造成的版面位移。前面提過這對 CLS 有幫助，進一步說，它也讓 Largest Contentful Paint（LCP）的元素更好預測，因為你明確知道哪個方塊是畫面上最大的內容元素，可以優先把它的圖片或字型排在載入序列前面。這些都是 Core Web Vitals 會打分數的項目，Bento 結構本身給了你一個好起點。

手機上的 Bento：要折疊，千萬別縮小

Bento 在桌機上看起來很美，但大部分的災難都發生在手機上。最常見的錯誤是把桌面版的格狀版面整個等比例縮小，結果在手機上每個方塊變成一條條窄到看不清的長條，字小到讀不下去。

正確的做法是折疊，不是縮小。也就是說，手機上的 Bento 應該退回成直式的一條龍，把原本橫向並排的格子在手機上改成直向堆疊。順序要重新想：主角訊息放最上面，接著是佐證訊息，再來是導引訊息。不要只是機械式地把桌面版的左到右順序改成上到下，要重新用「手機使用者第一眼最需要看到什麼」來排。

這套響應式退化的邏輯，跟一般的 響應式網頁設計（RWD） 是同一套觀念：斷點之下，欄數遞減，直到單欄為止。Bento 只是讓這件事變得更單純，因為你本來就是把內容拆成一塊塊獨立的方塊，折疊時一塊一塊往下排就好，不會有文字段落被截斷的問題。

一個我會反覆檢查的小細節：手機上方塊內的按鈕與連結要有足夠的觸控範圍，44×44 CSS 像素可作為常見檢查基準，互動元件之間也要留出間距，避免大拇指誤觸。這種細節桌機上感覺不到，手機上卻會明顯影響操作體驗。

讓 Bento 看起來高級的三個微調

同一個 Bento 結構，有人做出來像 Apple，有人做出來像折價券傳單。差別通常落在三個微調，跟結構的關係反而沒那麼大。

第一個是留白。Bento 最容易犯的錯是把每個方塊都塞滿。記得：方塊裡的內容永遠要比你覺得「剛好」的再少一點。每個方塊四周留足夠的內距，格與格之間留固定的間距（gap），整個版面才會呼吸。留白不是浪費空間，留白是讓重要訊息被看見的背景。

第二個是配色。Bento 的方格邊界已經提供了視覺結構，所以配色反而要收斂。我會建議一個版面用一到兩個主色，搭配中性色（白、灰、淺米），再把品牌色用在一兩個強調格上就好。配色邏輯可以參考我們寫過的 色彩學指南跟 網站配色實戰那篇的四步驟流程。顏色一多，Bento 就會從「俐落」變成「吵雜」。

第三個是字體。Bento 裡每個方塊的文字量都很少，所以字體的質感會被放大檢視。英文建議挑一套有個性的展示字體當標題，內文用乾淨的無襯線字；中文則要注意字重與級數的層級，標題、副標、內文要有明顯落差。選字思路可以看 英文字體推薦跟 中文字體指南這兩篇的字庫。

Bento 的視覺素材哪裡找：圖片、圖示、3D 元件

設計邏輯想清楚了，下一個關卡通常是「素材」。Bento 的方塊要有視覺重量，光靠文字撐不起來，你得幫每個關鍵方塊配上合適的圖。但找素材是另一個會吃掉大量時間的坑，亂抓一通很容易踩到版權地雷，或抓回一堆風格打架的圖讓版面更亂。

我的建議是先定素材風格，再去找圖。Bento 的方塊之間會並排出現，所以所有素材的風格要統一：要嘛全部用攝影照片、要嘛全部用插畫、要嘛全部用 3D 渲染元件，不要混搭。風格統一，版面才會有品牌感；風格混搭，看起來就像拼裝車。定好風格之後，照片可以從我們整理的 商用免費圖庫裡挑，圖示從 免費圖示網站找 SVG 檔，想要更有質感的 3D 元件則可以看 3D 素材資源那篇的清單。

幾個挑素材的實戰眉角。第一，挑圖時寧可選「留白多、主體明確」的，這類圖放進方塊裡好裁切，不會把重點切掉。第二，圖示風格要一致：線條粗細、圓角大小、填色或鏤空，整組要用同一套語彙，混用線版跟面版圖示是常見的質感殺手。第三，3D 元件用得好可以瞬間拉高版面質感，但造價不便宜，建議只用在主角那一兩格，不要整頁都堆 3D，否則載入速度會被拖慢，反而抵銷了 Bento 帶來的版面穩定優勢。

如果你沒有設計資源，也不想花錢買素材，最省事的路線是用純色塊加字體來做 Bento。前面提過，Bento 的本質是格狀層級，圓角陰影照片都只是手法。用品牌色切出幾個色塊，配上大字體的標題與短文案，照樣能做出乾淨有力的 Bento 版面，而且載入快、好維護、手機上更穩。素材是加分項，不是必要條件，先把結構跟配重做對，素材再慢慢補。

Bento Grid 跟其他版面比：一張表幫你決定

用一張表把 Bento 跟其他常見版面做比較，讓你在開工前就能判斷這個頁面該不該用 Bento。沒有哪種版面絕對好，只有適不適合當下的內容與目的。

版面類型	視覺特性	最適合	最不適合
Bento Grid	格狀、大小不一、並列	資訊多且平行的總覽頁	需要閱讀動線的長文
Hero 加欄位	滿版主視覺加下方分欄	單一主打產品的活動頁	多產品並列
雜誌式排版	圖文交錯、欄寬不一	內容媒體、長篇專題	功能導向的產品頁
單欄長排	純直式、引導式閱讀	教學、部落格、說服型文案	需要快速比較的總覽

如果你的頁面同時有「想讓讀者一次看到很多選項」跟「這些選項彼此獨立、沒有強制先後」這兩個條件，那 Bento 幾乎都是首選。想看更多不同版面的實例找靈感，可以逛逛我們整理的 實用網頁排版範例與 網頁設計靈感網站，對照 當前網頁設計趨勢，看 Bento 怎麼跟其他風格混搭。如果你想從更大的框架理解這些選擇，網頁設計完整指南把 UI 原則、響應式與 SEO 友善架構串在一起，適合當配套讀。

五個我會回頭檢查的 Bento 常見錯誤

做完一個 Bento 版面，我自己會固定跑一輪檢查清單。這五個是出現頻率最高的問題，大部分的人做壞都壞在這裡。

1. 每格都想當主角。格數加起來超過網格預算，視覺重量分散，沒有焦點。回去砍訊息，讓一個頁面只有一到兩個主角。
2. 方塊內容塞太滿。每格都貪心想多放一點，結果每格都擠。記得內容要比「剛好」再少一點，留白是 Bento 的命。
3. 手機版直接等比例縮。桌面版的並排在手機上變成窄長條，讀不下去。要折疊成單欄，重新排順序。
4. 格與格的間距不一致。有的緊有的鬆，看起來就像沒對齊。固定一個 gap 值，整個版面套用同一個。
5. 導引訊息藏得太深。報名按鈕、聯絡連結被埋在小格裡，使用者找不到下一步。導引訊息要放在動線終點，夠大夠顯眼。

這份清單跟 自架網站常見錯誤裡的大原則是通的：大部分的網頁設計問題都不是出在技術，而是出在「沒有取捨」。Bento 把取捨這件事放大了，因為每個方塊的大小本身就是一個取捨的決定。更多關於按鈕與行動呼籲怎麼設計才容易被點，可以搭配 CTA 設計指南一起看。

不同頁面類型的 Bento 變形

Bento 不是一種固定版型，它是一套可以變形的骨架。同一套「分類、配重、組裝」邏輯，套到不同類型的頁面會長出不同的樣子。底下用一張表帶你看四種常見頁面各自適合的 Bento 變形，讓你知道同樣的工具怎麼按場合調整。

頁面類型	主角通常是什麼	Bento 變形重點
品牌首頁	一句價值主張加一張主視覺	主從型，主角佔左上大格，佐證（客戶標誌、數字）排周圍，右下放 CTA
作品集	最具代表性的兩三件作品	棋盤型，作品縮圖大小不一，用格數暗示作品份量，點擊進細節頁
產品總覽	主打產品或當期活動	長條型，頂部橫幅放主打，下方棋盤排列次要產品
服務介紹	核心服務項目	棋盤型，每個服務一格，圖示加短標題，點擊展開或連到專頁

作品集跟產品總覽這類頁面，方塊裡的圖片比例最好先統一。Bento 方塊的尺寸可以不同，但內部圖片若有直式、橫式與正方形混用，裁切後容易顯得零散。可以先定兩到三種圖片比例，例如寬格用 16:9、方格用 1:1，再讓素材配合這些比例。範本骨架則可參考作品集範本的挑選決策表，依作品型態、主要觀眾與更新頻率排除不適合的版型；更完整的展示類型可再看作品集範本。

另一個值得拿出來講的變形是後台 Dashboard。很多 SaaS 產品的使用者介面其實就是 Bento 的延伸：一個螢幕裡同時擺放營收數字、折線圖、待辦清單、通知，每個資訊模組各佔一格。Dashboard 的 Bento 配重邏輯跟行銷頁不同，它看的是「哪個數字使用者每天第一眼要看」，把那個放最大，次要指標圍繞周圍。同樣的骨架，換個配重邏輯就換了用途，這就是 Bento 為什麼能從蘋果產品頁一路用到企業後台的原因。

下一步：90 分鐘做出你的第一個 Bento 版面

讀完不等於會做。我幫你把流程收斂成一個 90 分鐘就能跑完的行動方案，現在就可以動手。

1. 第一步（20 分鐘）：列清單與分類。把你那個頁面要放的訊息全部列出來，分成主角、佐證、導引、氣氛四種角色。這一步用紙筆或文件就好，先別開設計軟體。
2. 第二步（20 分鐘）：配重。決定一個基礎網格（例如 4 欄 3 列），給每個訊息分配格數。加起來要貼合網格總數，超過就砍。
3. 第三步（25 分鐘）：畫灰階草圖。在 Figma 或紙上，用灰階方塊把版面組出來，不寫字不上色，只看配重與動線順不順。主角位置對不對、導引訊息容不容易被點到。
4. 第四步（25 分鐘）：套工具實作。進到你慣用的頁面編輯器或框架，用格狀容器把草圖落地。先做桌機版，再折疊出手機版。

跑完這四步，你會有一個結構清楚、不會破版的 Bento 雛形。接下來就是反覆微調留白、配色、字體，把它從「能用」打磨到「好看」。這個打磨沒有捷徑，就是多看多改，拿真實使用者的反應來校準。

有一件事要提醒你：Bento 不是做一次就永久定型的版面。隨著你的產品線擴充、活動訊息更新、新文章累積，原本配重平衡的版面會慢慢失衡，主角被擠、佐證格爆量、導引按鈕被推到角落。我自己的習慣是每季固定回頭審一次首頁跟產品總覽的 Bento，重新跑一遍「分類、配重、組裝」的流程，看哪些訊息該升格、哪些該降格或移除。把 Bento 當成需要定期保養的骨架，而不是一次性的裝潢，它才會持續替你的轉換率與使用者體驗把關。

如果你正在煩惱 Bento 該套在哪一種頁面，我會建議從兩種頁面開始：一是品牌官網的首頁，二是一頁式活動頁。這兩種頁面天生就是「資訊多、要同時被看見」，是 Bento 最能發揮價值的地方。作品集類的可以參考作品集網站設計的結構，把 Bento 拿來排作品矩陣也很適合。

Bento Grid 說到底，是一套把「取捨」具象化的排版方法。它逼你在開工前就想清楚：什麼最重要、什麼次要、什麼可以不要。當你把這個取捨想清楚了，就算不用 Bento，你的版面也不會差到哪裡去。現在，打開你那個一直覺得「哪裡怪怪的」的首頁，用這套邏輯重新看一次，你會馬上看出哪裡該放大、哪裡該砍掉。