我們在進行頁面設計、界面設計時，總會要求設計師做出個XX風格的樣式出來。這就要求我們對各種設計風格都要有所了解才行。本文介紹了Bento Box這種設計風格的風格特點和設計要點，希望可以幫助大家了解。

2024年上半年，在多個網站發布的UI/UX設計趨勢中，Bento Box（便當盒）風格均榜上有名。

或許你對這個名字很陌生，但相信一定見過：在Apple的發布會、小米的產品網頁、手機的操作系統中處處都有它的存在。這些通過看似“隨機”的方式將多個卡片組合在一起的設計，都可以稱為Bento Box設計。

因為風格以“便當盒”命名，所以很多文章都將該風格的靈感源頭直指日本的便當盒文化。

但僅從設計形式上看，Bento Box風格是否源于日本便當盒文化沒有確切答案，至少源于交通指示系統的Metro UI與Bento Box有著極大的相似之處，都是基于柵格化的卡片布局來傳遞信息。

然而，這并不妨礙我們透過便當盒的視角來認識這種設計風格。

一、便當盒文化

在日本，便當盒是飲食文化的重要組成部分，也是生活方式的一種體現。

在繁忙的工作日，人們可以通過便當盒方便地攜帶美味的食物，日式便當盒通常采用分隔式設計，將一餐食物放置在不同的隔層，防止不同食物的味道混合，并使食物更加整齊有序。

這種出于實用性和秩序性的訴求，也同樣構成了Bento Box風格的基礎和底色，使其成為一種注重結構化、注重信息傳遞有效性的布局方式和設計風格。

另一方面，日本文化中對和諧、平衡、細節的美學追求，逐漸滲透到便當盒中，隔層的劃分、食物的選擇及擺放不再只是為了方便攜帶，也為食用者提供了不同的視覺感官體驗。

這一特點在Bento Box風格中完美呈現：恰當的隔層間距、精致的模塊元素、豐富的視覺層次，體現了該風格對視覺細節的強大承載力和表現力。

二、Bento Box風格特點

我們通過瀏覽大量的Bento Box作品，可以發現其設計特點主要如下：

1. 柵格劃分

通過柵格系統將界面劃分出多個非對稱卡片，每個卡片彼此獨立，但又統一置于規則的邊界范圍內。

由于間隔劃分基于嚴格的柵格而非隨機，從而賦予界面布局較強的內在秩序性和內在結構性。分割間隙讓每個卡片的“視覺能量場”得到控制，從源頭上削弱了各模塊定制化可能帶來的混亂感。

2. 模塊組合

每個卡片可以視為一個獨立的內容模塊或內容單元，可用來擺放不同類型的內容和信息。設計時，所有模塊既可以遵循一定的視覺秩序，也可以根據內容特點進行定制化處理。

Bento Box作品中，模塊間的視覺層次感和模塊內的內容可讀性得到很好的兼顧，用戶愿意去閱讀卡片中的信息。

另外需要說明的是：除非刻意處理，Bento Box風格的作品往往沒有絕對的視覺中心點，瀏覽順序由每個用戶決定，每個模塊都能獲得相對平均的注意力分配。

3. 內容交互

Bento Box的微交互總是能引起用戶的注意并給人驚喜，如懸停時的位移、點擊時的反饋等等，用戶在每次微小的互動中體會到設計師的用心，瀏覽過程變得更加主動。

也因為這些有趣且充滿“心機”的交互細節，作品呈現的品質感、設計感大大增強。

當然，大量動效對電腦性能形成挑戰，如果在加載、滑動時出現卡頓，反而不利于內容呈現效果，所以動效可以錦上添花，但不適合作為傳遞信息的唯一形式。

4. 靈活適配

采用嚴格、規范的柵格系統帶來的好處，就是Bento Box風格的作品可以靈活調整比例、間距以及排版組合，超強的適應性，讓用戶不管從桌面端還是移動端都能獲得一致的瀏覽體驗，而信息傳遞也不會減損。

由此，內在秩序性、視覺層次感、內容可讀性、注意力分配、微交互以及適配響應構成了Bento Box獨特的風格屬性。

其實還有一點很重要，就是極強的場景適用性，這讓它得以在眾多設計風格中脫穎而出并迅速流行，所以我們可以在不同的內容類型、設備載體看到Bento Box的存在。

三、Bento Box設計要點

基于以上介紹以及我們日常眼力的積累，設計一款簡單可用的Bento Box作品并非難事，但為了確保設計效果，仍有幾個重要的設計要點需要說明：

1. 基礎柵格

當決定設計Bento Box時，首先要確定柵格的列數和列寬，以及柵格間距和邊距，形成基礎柵格后，根據內容進行卡片劃分和布局。

當比例、空間無法調和時，可重新調整列數、列寬，切記不可過度分割和脫離柵格，否則會讓設計變得混亂。

可以說，Bento Box完全是建立在柵格上的一種風格，柵格是確保設計效果的基礎和必要條件。

2. 視覺層次

雖然Bento Box可以讓每個模塊都獲得較為均衡的注意力，但設計師仍然可以通過卡片大小、顏色、背景圖、動效等方式，拉開卡片之間的層次，來干預用戶的瀏覽順序，比如，大一些的卡片用來放置關鍵圖像或主文案，小一些的卡片放一些次要信息、輔助文本或是補充圖像。

另外，不建議使用異形的卡片形式和“破窗”的表達手法，因為這兩種形式都會影響整體的視覺節奏。

3. 卡片圓角

微軟的Metro UI采用直角的卡片形式，非裝飾性很強，好像時刻在提醒用戶“只需關注信息”，但直角也成了很多人不喜歡Metro風格的重要原因。

在Bento Box作品中，更多地使用圓角，相比直角，圓角更具有親和力，當內容模塊很多時，可以減少界面元素之間的尖銳感，視覺舒適度大大提升。

在處理圓角時，圓角大小要適中，要與整體視覺風格保持統一，不要過于夸張。

Dribbble上很多夸張圓角運用得并不恰當（被眾多設計師錯誤地效仿，并放在個人作品集），要注意甄別。

當圓角過大，卡片之間的縫隙會對瀏覽形成干擾，或者讓卡片處于近似圓但非圓的尷尬狀態。

如果你在設計一款偏嚴肅、理性的產品界面，圓角運用更要克制。

4. 信息密度

卡片之間不要存在復雜的先后、父子邏輯關系，每個卡片即為一個獨立的信息單元。

在信息有效傳遞的前提下，每個“小隔間”都盡量保持信息簡潔清晰，通過合理布局控制好整體信息密度，有節奏地對文字、圖像、圖標、視頻等元素進行搭配組合，適當地留白也有助于重要信息的呈現，為用戶營造一個輕松、有節奏的瀏覽體驗。

從這個角度看，大篇幅的文字內容可能并不適合放在卡片中。

四、最后

Bento Box和Metro UI雖名稱不同，但設計理念互聯、共通。十多年前，Microsoft高舉Metro UI，其初衷在于突出內容，強調信息的傳遞效率。

早期Microsoft的設計文檔中，對基礎柵格、卡片類型、標題擺放、間距、字號字體、icon等基礎要素，都進行了具體且繁復的指導，但過度理性的界面表達并未贏得用戶的認可。

Apple顯然看到了這種布局方式的潛力和問題，在保留Metro UI理性底色的同時，對布局、圓角、圖形、顏色全面改造，卡片被賦予溫度，視覺體驗全面提升，最終成為本篇所介紹的Bento Box。在Apple的引領下，越來越多的場景中出現了它的身影，逐漸成為設計領域難以替代的一種界面解決方案。

也許在很長一段時間里，Bento Box都將持續散發著吸引力。