我們?cè)谶M(jìn)行頁(yè)面設(shè)計(jì)、界面設(shè)計(jì)時(shí)，總會(huì)要求設(shè)計(jì)師做出個(gè)XX風(fēng)格的樣式出來(lái)。這就要求我們對(duì)各種設(shè)計(jì)風(fēng)格都要有所了解才行。本文介紹了Bento Box這種設(shè)計(jì)風(fēng)格的風(fēng)格特點(diǎn)和設(shè)計(jì)要點(diǎn)，希望可以幫助大家了解。

2024年上半年，在多個(gè)網(wǎng)站發(fā)布的UI/UX設(shè)計(jì)趨勢(shì)中，Bento Box（便當(dāng)盒）風(fēng)格均榜上有名。

或許你對(duì)這個(gè)名字很陌生，但相信一定見過(guò)：在Apple的發(fā)布會(huì)、小米的產(chǎn)品網(wǎng)頁(yè)、手機(jī)的操作系統(tǒng)中處處都有它的存在。這些通過(guò)看似“隨機(jī)”的方式將多個(gè)卡片組合在一起的設(shè)計(jì)，都可以稱為Bento Box設(shè)計(jì)。

因?yàn)轱L(fēng)格以“便當(dāng)盒”命名，所以很多文章都將該風(fēng)格的靈感源頭直指日本的便當(dāng)盒文化。

但僅從設(shè)計(jì)形式上看，Bento Box風(fēng)格是否源于日本便當(dāng)盒文化沒(méi)有確切答案，至少源于交通指示系統(tǒng)的Metro UI與Bento Box有著極大的相似之處，都是基于柵格化的卡片布局來(lái)傳遞信息。

然而，這并不妨礙我們透過(guò)便當(dāng)盒的視角來(lái)認(rèn)識(shí)這種設(shè)計(jì)風(fēng)格。

一、便當(dāng)盒文化

在日本，便當(dāng)盒是飲食文化的重要組成部分，也是生活方式的一種體現(xiàn)。

在繁忙的工作日，人們可以通過(guò)便當(dāng)盒方便地?cái)y帶美味的食物，日式便當(dāng)盒通常采用分隔式設(shè)計(jì)，將一餐食物放置在不同的隔層，防止不同食物的味道混合，并使食物更加整齊有序。

這種出于實(shí)用性和秩序性的訴求，也同樣構(gòu)成了Bento Box風(fēng)格的基礎(chǔ)和底色，使其成為一種注重結(jié)構(gòu)化、注重信息傳遞有效性的布局方式和設(shè)計(jì)風(fēng)格。

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

這一特點(diǎn)在Bento Box風(fēng)格中完美呈現(xiàn)：恰當(dāng)?shù)母魧娱g距、精致的模塊元素、豐富的視覺(jué)層次，體現(xiàn)了該風(fēng)格對(duì)視覺(jué)細(xì)節(jié)的強(qiáng)大承載力和表現(xiàn)力。

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

我們通過(guò)瀏覽大量的Bento Box作品，可以發(fā)現(xiàn)其設(shè)計(jì)特點(diǎn)主要如下：

1. 柵格劃分

通過(guò)柵格系統(tǒng)將界面劃分出多個(gè)非對(duì)稱卡片，每個(gè)卡片彼此獨(dú)立，但又統(tǒng)一置于規(guī)則的邊界范圍內(nèi)。

由于間隔劃分基于嚴(yán)格的柵格而非隨機(jī)，從而賦予界面布局較強(qiáng)的內(nèi)在秩序性和內(nèi)在結(jié)構(gòu)性。分割間隙讓每個(gè)卡片的“視覺(jué)能量場(chǎng)”得到控制，從源頭上削弱了各模塊定制化可能帶來(lái)的混亂感。

2. 模塊組合

每個(gè)卡片可以視為一個(gè)獨(dú)立的內(nèi)容模塊或內(nèi)容單元，可用來(lái)擺放不同類型的內(nèi)容和信息。設(shè)計(jì)時(shí)，所有模塊既可以遵循一定的視覺(jué)秩序，也可以根據(jù)內(nèi)容特點(diǎn)進(jìn)行定制化處理。

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

另外需要說(shuō)明的是：除非刻意處理，Bento Box風(fēng)格的作品往往沒(méi)有絕對(duì)的視覺(jué)中心點(diǎn)，瀏覽順序由每個(gè)用戶決定，每個(gè)模塊都能獲得相對(duì)平均的注意力分配。

3. 內(nèi)容交互

Bento Box的微交互總是能引起用戶的注意并給人驚喜，如懸停時(shí)的位移、點(diǎn)擊時(shí)的反饋等等，用戶在每次微小的互動(dòng)中體會(huì)到設(shè)計(jì)師的用心，瀏覽過(guò)程變得更加主動(dòng)。

也因?yàn)檫@些有趣且充滿“心機(jī)”的交互細(xì)節(jié)，作品呈現(xiàn)的品質(zhì)感、設(shè)計(jì)感大大增強(qiáng)。

當(dāng)然，大量動(dòng)效對(duì)電腦性能形成挑戰(zhàn)，如果在加載、滑動(dòng)時(shí)出現(xiàn)卡頓，反而不利于內(nèi)容呈現(xiàn)效果，所以動(dòng)效可以錦上添花，但不適合作為傳遞信息的唯一形式。

4. 靈活適配

采用嚴(yán)格、規(guī)范的柵格系統(tǒng)帶來(lái)的好處，就是Bento Box風(fēng)格的作品可以靈活調(diào)整比例、間距以及排版組合，超強(qiáng)的適應(yīng)性，讓用戶不管從桌面端還是移動(dòng)端都能獲得一致的瀏覽體驗(yàn)，而信息傳遞也不會(huì)減損。

由此，內(nèi)在秩序性、視覺(jué)層次感、內(nèi)容可讀性、注意力分配、微交互以及適配響應(yīng)構(gòu)成了Bento Box獨(dú)特的風(fēng)格屬性。

其實(shí)還有一點(diǎn)很重要，就是極強(qiáng)的場(chǎng)景適用性，這讓它得以在眾多設(shè)計(jì)風(fēng)格中脫穎而出并迅速流行，所以我們可以在不同的內(nèi)容類型、設(shè)備載體看到Bento Box的存在。

三、Bento Box設(shè)計(jì)要點(diǎn)

基于以上介紹以及我們?nèi)粘Ｑ哿Φ姆e累，設(shè)計(jì)一款簡(jiǎn)單可用的Bento Box作品并非難事，但為了確保設(shè)計(jì)效果，仍有幾個(gè)重要的設(shè)計(jì)要點(diǎn)需要說(shuō)明：

1. 基礎(chǔ)柵格

當(dāng)決定設(shè)計(jì)Bento Box時(shí)，首先要確定柵格的列數(shù)和列寬，以及柵格間距和邊距，形成基礎(chǔ)柵格后，根據(jù)內(nèi)容進(jìn)行卡片劃分和布局。

當(dāng)比例、空間無(wú)法調(diào)和時(shí)，可重新調(diào)整列數(shù)、列寬，切記不可過(guò)度分割和脫離柵格，否則會(huì)讓設(shè)計(jì)變得混亂。

可以說(shuō)，Bento Box完全是建立在柵格上的一種風(fēng)格，柵格是確保設(shè)計(jì)效果的基礎(chǔ)和必要條件。

2. 視覺(jué)層次

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

另外，不建議使用異形的卡片形式和“破窗”的表達(dá)手法，因?yàn)檫@兩種形式都會(huì)影響整體的視覺(jué)節(jié)奏。

3. 卡片圓角

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

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

在處理圓角時(shí)，圓角大小要適中，要與整體視覺(jué)風(fēng)格保持統(tǒng)一，不要過(guò)于夸張。

Dribbble上很多夸張圓角運(yùn)用得并不恰當(dāng)（被眾多設(shè)計(jì)師錯(cuò)誤地效仿，并放在個(gè)人作品集），要注意甄別。

當(dāng)圓角過(guò)大，卡片之間的縫隙會(huì)對(duì)瀏覽形成干擾，或者讓卡片處于近似圓但非圓的尷尬狀態(tài)。

如果你在設(shè)計(jì)一款偏嚴(yán)肅、理性的產(chǎn)品界面，圓角運(yùn)用更要克制。

4. 信息密度

卡片之間不要存在復(fù)雜的先后、父子邏輯關(guān)系，每個(gè)卡片即為一個(gè)獨(dú)立的信息單元。

在信息有效傳遞的前提下，每個(gè)“小隔間”都盡量保持信息簡(jiǎn)潔清晰，通過(guò)合理布局控制好整體信息密度，有節(jié)奏地對(duì)文字、圖像、圖標(biāo)、視頻等元素進(jìn)行搭配組合，適當(dāng)?shù)亓舭滓灿兄谥匾畔⒌某尸F(xiàn)，為用戶營(yíng)造一個(gè)輕松、有節(jié)奏的瀏覽體驗(yàn)。

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

四、最后

Bento Box和Metro UI雖名稱不同，但設(shè)計(jì)理念互聯(lián)、共通。十多年前，Microsoft高舉Metro UI，其初衷在于突出內(nèi)容，強(qiáng)調(diào)信息的傳遞效率。

早期Microsoft的設(shè)計(jì)文檔中，對(duì)基礎(chǔ)柵格、卡片類型、標(biāo)題擺放、間距、字號(hào)字體、icon等基礎(chǔ)要素，都進(jìn)行了具體且繁復(fù)的指導(dǎo)，但過(guò)度理性的界面表達(dá)并未贏得用戶的認(rèn)可。

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

也許在很長(zhǎng)一段時(shí)間里，Bento Box都將持續(xù)散發(fā)著吸引力。