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

一、這是什么風(fēng)格？

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

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

二、風(fēng)格特點(diǎn)

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

1. 分隔的布局

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

2. 清晰的分類

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

3. 視覺層次

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

4. 直觀的引導(dǎo)

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

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

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

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

1. 優(yōu)勢(shì)

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

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

②可擴(kuò)展性

Bento Box 設(shè)計(jì)風(fēng)格可以適應(yīng)不同的屏幕尺寸和設(shè)備，因?yàn)楦魧拥拇笮『臀恢每梢愿鶕?jù)可用空間進(jìn)行自適應(yīng)調(diào)整。這種可擴(kuò)展性使得界面在各種設(shè)備上都能提供一致的用戶體驗(yàn)。

③可視性強(qiáng)

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

2. 劣勢(shì)

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

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

②信息密集度

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

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

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

四、如何應(yīng)用

1. 內(nèi)容判斷

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

①完全滿足

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

②需要處理

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

③不符合

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

2. 案例解析

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

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

第一步：信息歸納

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

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

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

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

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

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

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

總結(jié)

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

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

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