近年來一種名為“BentoUI”的設計風格在設計師社區內愈發流行，無論是蘋果公司的產品發布會、眾多生產力工具網站，還是 Dribbble 和 Behance 等作品集網站上，都能頻頻發現它的身影。

推薦閱讀

BentoUI 到底是怎樣一種設計風格？有什么特點？又是怎么流行起來的？我們一起來看看。

一、什么是 BentoUI

BentoUI，你可能沒聽過這個名字，但你肯定見過類似的畫面:

這些通過大大小小圓角卡片組織信息的幻燈片或網頁，應用的就是近年來非常熱門的設計風格 —— BentoUI。多個設計網站和博客預測的 2024 年設計趨勢中，BentoUI 均榜上有名。雖然這些預測也就看個熱鬧，但也一定程度反映了 BentoUI 的火熱程度。

Bento 的中文解釋為「便當」，一種源自日本的食物收納方法，將食物按種類精致地分裝在帶隔間的飯盒中，方便人們帶到公司或戶外享用。而以此為靈感而得名的 BentoUI，則指“以清晰的分區形式組織元素，多分區并列展示”的一種設計風格，其中的每個元素都有其目的與功能，類似便當里的各種食物，精致有序地排列。

這種多個卡片聚合的視覺風格并不是什么新鮮事物，早在 2010 年由微軟提出的 MetroUI 就應用了類似的樣式，但在當年此類風格的排版并沒有激起太大浪花。然而近年來，蘋果公司無論是為自家的 WWDC 和 Apple Events 設計的演講幻燈片，還是官網的產品展示模塊設計，以及設備端的小部件設計，無一例外都應用了 BentoUI。據聞蘋果公司內部就把這些幻燈片稱作「bento」。

微軟 2010 推出的 MetroUI

蘋果公司的 BentoUI 設計范例

蘋果公司的強力站臺，無疑為 BentoUI 添了一把火，越來越多的公司和設計師開始關注并將其運用到自身的設計中，從而產生了越來越多的 BentoUI 風格的作品。甚至誕生了專門收集 BentoUI 設計案例的網站，里面陳列了各種相關的圖形、網站和動畫類的案例。BentoUI 的火熱程度可窺一斑。

BentoUI 設計案例收集網站——「bentogird」

二、BentoUI 的風格特點

通過上面的圖例可以看出，BentoUI 多用于展示產品的功能、界面、數據，或是個人博客、簡介、作品集等內容。簡單來說，它很適合用來同時展示一大堆信息。下面結合案例詳細介紹一下。

特點一：分區式布局

bentoUI 最顯著的特點，就是通過清晰的分區來組織界面。繁雜的內容，經過合理的分類，再分配到按網格系統排布的卡片分區中，分區之間既獨立又相互關聯，且這種分區靈活多變，不單調死板。

特點二：和諧的視覺效果

由于 BentoUI 常常需要在有限的空間中安排大量的信息到不規則的分區里，因此設計師會通過合理分配各分區的面積、形狀、顏色、留白，微調各分區內元素的樣式、種類、排列、動態，力求使界面既能表現出信息間的層級關系，又能保持各分局之間和分區內元素的視覺均衡。

如下圖，一張介紹 macbook 配置規格的幻燈片。各個分區的內容元素種類不一，有數據、圖示、文案和照片。通過合理的排版和構圖，既突出了重點內容和交代了元素之間的關聯性，也保持了畫面的平衡。很難想象同樣的元素在同等面積的界面里，使用其他的排版方式會是什么效果。

特點三：友好的響應式設計

近年來，設備的種類和屏幕尺寸類型越來越多，為了使內容在不同設備上保持其完整性、功能性和美觀性，界面須采取響應式設計。而 BentoUI 這種多卡片聚合式設計的基因，天然就和響應式設計相契合。隨著前端技術的不斷發展，設計師在了解相關適配法則的前提下，只需花費很少的時間，就能高效地完成 BentoUI 的響應式設計適配。

BentoUI 風格的頁面在不同屏幕寬度下的效果

特點四：豐富的微交互

用戶在網站或 app 中進行的每一個操作，都應該有合理的反饋。BentoUI“樂高積木式”的卡片拼接效果，則為設計師在進行操作反饋的設計時留下很多想象的空間。

案例一，下圖是 AI 生成設計工具「Diagram」，設計師為其頁面設計了豐富的 hover 動畫，雖然只是最常見的鼠標懸浮動畫，但與 BentoUI 分區的結合，確實能激起用戶的探索欲望，增加頁面的趣味性。

案例二，下圖是名為「Bento」的網站的一個模塊設計頁。此網站整體應用 BentoUI 設計風格，在這個模塊中，設計師設置了很多反饋小動畫，方便用戶憑直覺去完成頁面交互。首先是方塊狀的模塊，暗示用戶可以嘗試拖拽；而伴隨用戶拖拽動作出現的位置提示灰塊和抖動等反饋動畫，則進一步加強了用戶反饋。

「bento」是一個個人信息集合生成網站，很多設計師用它來制作自己的主頁

類似的微交互動畫當然并非越多越好，也不是單純為了有趣，而是應該從使用場景的特征出發，按需合理地添加。

特點五：圓角

最后這個特點顯得有些無厘頭，作者看完那么多 BentoUI 的設計案例后，發現沒有一個案例使用直角卡片。也許僅僅是設計師的默契，也許是比起冰冷的直角卡片，溫潤的圓角卡片觀感上令用戶更舒適，更有安全感吧。

三、BentoUI 的應用

BentoUI 具有信息展示全面、傳達效率高的優點。將不同的功能和信息按信息邏輯分配在各個分區中，有效提高信息的可讀性，用戶可以根據分區摘要信息快速尋找內容。而且它的頁面形式感十分強烈，視覺沖擊力充足，能給人留下深刻的印象，勾起用戶興趣。因此，它很適合應用在展示商品信息、個人作品集、工具類 UI 的儀表盤等需要同時展示同類信息的設計場景。

另一方面，即使并非上述這種處理繁雜信息的設計需求，BentoUI 天然適配響應式設計的基因和豐富的微交互空間也是設計師不錯的選擇，既能提高工作效率，保證用戶在不同設備上都能獲得較一致的用戶體驗，也能為頁面增添色彩，為用戶帶來驚喜和滿足感。

然而，BentoUI 也存在比較明顯的短板，那就是視覺動線模糊。相比常見的列表布局，信息密集且平鋪的 BentoUI，無論采用何種設計方法，都很難為用戶梳理出一條清晰的視覺動線。聚合式的卡片結構，始終會使用戶的視覺焦點被分散。在信息并列展示的頁面中，這個問題或許并不明顯，但如果是遇到有明顯閱讀順序或者需要強調步驟的設計場景，BentoUI 明顯完成不了任務。

對比常規布局，BentoUI 的視覺動線確實難以預估

另外，需要避免套用 BentoUI。我們是根據內容的特點和場景需求，來決策使用何種頁面布局。而不是先決定了要使用此類風格，再強行去把內容拆分、套進一個個格子里，陷入“形式大于內容”的陷阱。

小結與思考

BentoUI 清晰的結構與直觀的視覺風格相結合，滿足了用戶對界面清晰度的要求，也能在并列展示大量信息的場景中出色發揮；憑借其天生的適應性，BentoUI 滿足了對在各種設備上無縫運行的相應式設計需求；還有其樂高積木式的拼接風格，也為設計師進行創新有趣的微交互留下廣闊空間。

同時，其局限性也較為明顯，應用場景相對單一，無法為用戶提供清晰明確的視覺動線，甚至會因為過強的形式限制設計師的創意。

當我們日常在強調清晰、簡約、一致的時候，BentoUI 似乎帶著一點叛逆的朋克味道，給人一種反其道而行之的感覺。但它似乎又有神奇的魔法，當繁雜的內容分發到一個個的分區后，再經過設計師的細致調整，結果能給人驚喜。

無論如何，BentoUI 確實是一種流行中的熱門設計風格，但流行的設計趨勢并無意義。我們日常說“形式服從功能，形式服務內容。”所以最終我們還是需要回到設計任務本身，關鍵還是看工具是否能更好地為我所用，表我所想。沒有好壞，只有合適。

最后，當你面臨合適的設計場景時，不妨考慮一下 BentoUI！

參考文章：

1. 何為 Bento 式布局，怎么生產力工具網站都在用？
   https://sspai.com/post/84628?utm_source=wechat&utm_medium=social
2. 1 分鐘帶你了解 Bento box 設計趨勢https://www.woshipm.com/pd/5954726.html
3. Bento Style & Compartmentalisation in UI Design，https://medium.muz.li/bento-style-compartmentalisation-in-ui-design-a0f82557a055
4. Bento UI: Design Examples, Trend Explanation, and Creative Tips，https://blog.depositphotos.com/bento-ui.html

歡迎關注作者微信公眾號：「We-Design」