設(shè)計科普！幫你完整掌握流行的BentoUI設(shè)計風格

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

一、這是什么風格？

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

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

二、風格特點

上文提到，Bento Box 設(shè)計風格是一種以傳統(tǒng)日本便當盒為靈感的設(shè)計風格，就像便當?shù)母魧右粯?，將界面劃分為多個隔間，通常結(jié)合“卡片”的表現(xiàn)形式，因此具有以下特點：

1. 分隔的布局

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

2. 清晰的分類

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

3. 視覺層次

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

4. 直觀的引導

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

5. 響應(yīng)式布局

采用簡單的網(wǎng)格布局，可以很好的適應(yīng)不同的屏幕尺寸和設(shè)備，從而在開發(fā)中實現(xiàn)響應(yīng)式布局，提供一致的用戶體驗。

三、優(yōu)勢和劣勢

1. 優(yōu)勢

①結(jié)構(gòu)清晰

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

②可擴展性

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

③可視性強

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

2. 劣勢

①限制設(shè)計創(chuàng)意

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

②信息密集度

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

③適應(yīng)性挑戰(zhàn)

由于依賴隔層的大小和位置來構(gòu)建視覺的層次結(jié)構(gòu)，對于不同類型的內(nèi)容和功能可能需要進行仔細的權(quán)衡和調(diào)整。處理復雜的界面和內(nèi)容結(jié)構(gòu)時，需要更多的設(shè)計和布局的靈活性。

四、如何應(yīng)用

1. 內(nèi)容判斷

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

①完全滿足

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

②需要處理

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

③不符合

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

2. 案例解析

OK，我們從拿到內(nèi)容開始，劃分三步！um... 就拿珠峰的百度百科簡單做一個網(wǎng)站首頁吧。

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

第一步：信息歸納

熟讀內(nèi)容，了解信息的主次以及模塊的劃分，然后... 搬箱子！搬箱子！搬箱子！放東西！放東西！放東西！

我們可以根據(jù)已知的信息模塊，或想將信息組合成為某些模塊，繪制出一些“箱子”，然后將信息分門別類的放進去，這部分的核心在于足夠了解掌握的內(nèi)容，以及設(shè)計的意圖。

第二步：設(shè)計布局

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

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

第三步：樣式設(shè)計

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

總結(jié)

Bento UI 或者說 Bento Box 設(shè)計風格，靈感源于便當盒，通過將用戶界面劃分為明確的部分或區(qū)塊，類似于便當盒中的隔層，它為內(nèi)容呈現(xiàn)提供了結(jié)構(gòu)化和有組織的布局。

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

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