什么是Bento UI設計風格？含Bento案例實操分享

Sponsor

分享下近期比較流行的Bento UI或者說Bento Box設計風格，以及一個設計小案例實操。

目錄

Part.1 這是什么風格？

Part.2 風格特點

Part.3 優勢和劣勢

Part.4 如何應用

Part.5 總結

1. 這是什么風格？

Bento Box（便當盒）源自日本，指的是一餐被分成各個組成部分并裝在盒子里的飯盒。而由此命名的Bento UI或者說Bento Box設計風格，是通過將用戶界面劃分為明確的部分或區塊，類似于傳統的便當盒中的隔層，它為內容呈現提供了結構化和有組織的布局。

不管是微軟的Metro UI，蘋果的宣傳片和網頁，以及近期比較火的另一種設計風格“Linear風”的Linear官網中，都可以看到Bento Box風格的身影。

2. 風格特點

上文提到，Bento Box設計風格是一種以傳統日本便當盒為靈感的設計風格，就像便當的隔層一樣，將界面劃分為多個隔間，通常結合“卡片”的表現形式，因此具有以下特點：

分隔的布局

Bento Box設計風格通過明確的分隔和隔層來組織界面。每個隔層通常用于放置特定的內容、功能或模塊，使界面具有結構性和組織性。

清晰的分類

通過將不同類型的內容或功能放置在各自的隔層中，實現了內容的清晰分類。這樣，用戶可以更快速地找到所需的信息或功能，提高了用戶體驗的效率和直觀性。

視覺層次

視覺上一般通過大小、顏色、形狀或樣式等視覺元素來創建層次感，這種層次感可以幫助用戶理解界面中不同元素的重要性和關系，并引導他們的注意力和操作邏輯。

直觀的引導

Bento Box設計風格經常在每個隔層中提供可見的引導元素，如鏈接或按鈕，使用戶可以輕松地在不同內容之間交互、瀏覽，簡化了界面對用戶引導的方式和過程。

響應式布局

采用簡單的網格布局，可以很好的適應不同的屏幕尺寸和設備，從而在開發中實現響應式布局，提供一致的用戶體驗。

3. 優勢和劣勢

優勢

結構清晰
Bento Box設計風格通過明確的分隔和布局，為界面提供了清晰的結構，使用戶可以快速理解和導航。不同的功能和內容被組織在不同的隔層中，有助于提高信息的可讀性和可理解性。

可擴展性
Bento Box設計風格可以適應不同的屏幕尺寸和設備，因為隔層的大小和位置可以根據可用空間進行自適應調整。這種可擴展性使得界面在各種設備上都能提供一致的用戶體驗。

可視性強
每個隔層的獨立性和清晰的邊界使得界面元素更加突出和易于識別。用戶可以快速注意到不同的功能和內容模塊，從而提高了界面的可視性和可用性。

劣勢

限制設計創意
Bento Box設計風格的嚴格分隔和布局可能會限制一些設計創意和自由度。這種結構化的布局方式可能不適用于一些需要更自由、不規則或創新的設計風格（適當打破邊界的創新也許會有意想不到的效果）。

信息密集度
由于Bento Box設計風格傾向于在有限的空間中組織大量的功能和內容，界面可能會顯得信息密集。這可能導致一些界面看起來擁擠，需要仔細處理和平衡，確保用戶不會感到混亂。

適應性挑戰
由于依賴隔層的大小和位置來構建視覺的層次結構，對于不同類型的內容和功能可能需要進行仔細的權衡和調整。處理復雜的界面和內容結構時，需要更多的設計和布局的靈活性。

4. 如何應用

內容判斷

首先需要分析、判斷當前內容是否滿足設計需要。當然，形式服務于內容，盡量不要為了某一風格去強行適配；關于是否可以使用該風格，在內容維度上劃分了三個等級：完全滿足、需要處理、不符合。

完全滿足
即可以直接使用Benton Box設計風格的內容，大致有以下特點：a.內容簡潔；b.邏輯清晰；c.劃分明確。

需要處理
這種情況是遇到最多的，一般表現為內容有層級，但是比較多；有邏輯，但是比較復雜；各個模塊之間有劃分，但是邊界不清晰，此時需要我們對其進行信息處理（下面會講到實際操作方法）。

不符合
對于不符合的情況，大多內容不通順，甚至沒有邏輯，不管使不使用Bento Box的設計風格，它都存在問題，都需要對其進行信息的處理。

案例解析

OK，我們從拿到內容開始，劃分三步！um… 就拿珠峰的百度百科簡單做一個網站首頁吧。

在拿到內容后，不管是簡單的還是復雜的，都可以使用以下方式進行梳理，最近搬家時用了很多紙箱來分類、收納東西，那就叫它“紙箱歸納法”吧。

第一步：信息歸納

熟讀內容，了解信息的主次以及模塊的劃分，然后… 搬箱子！搬箱子！搬箱子！放東西！放東西！放東西！
我們可以根據已知的信息模塊，或想將信息組合成為某些模塊，繪制出一些“箱子”，然后將信息分門別類的放進去，這部分的核心在于足夠了解掌握的內容，以及設計的意圖。

第二步：設計布局

處理好信息后，就可以開始進行頁面的布局了，也就是所謂低保真原型階段。根據自己的構思，確定是100%鋪滿屏幕的形式還是做一個限定在最小寬度的，都可以。然后分好模塊的主次先后，開始繪制！

進一步處理歸納的內容，使其符合頁面的展示和交互邏輯。除了區分好內容的層級，可以構思一下“隔間”內的交互方式，以更好的表達內容，同時增加頁面的趣味性。

第三步：樣式設計
前面都做好以后，基本就差不多了，大展身手開始設計樣式吧！盡量貼合內容設計，減少不必要的元素干擾，如果是其他潮流向的風格或想更創新一些的話，可以斟酌考慮，這里僅做簡單的案例參考。

Part.5

總結

Bento UI或者說Bento Box設計風格，靈感源于便當盒，通過將用戶界面劃分為明確的部分或區塊，類似于便當盒中的隔層，它為內容呈現提供了結構化和有組織的布局。

Bento Box設計風格以其結構化的布局、清晰的分類、簡化的導航和視覺層次等特點，為用戶界面帶來了更好的組織、易用性和美觀性。同時也帶來了一些挑戰，比如在創意和自由度方面會產生一些限制，且需要平衡信息的密度和層次等。

未來一段時間我們會看到更多此類設計風格的身影，當設計趨勢到來時不免會有被濫用的風險，但Bento Box帶來的不僅僅是一個設計趨勢，還有對信息理解、組織能力的提升，趕快嘗試起來吧！

作者：NeilLeeeee
來源：站酷 (https://muzili99.zcool.com.cn/)
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。