什么是Bento box呢？其實(shí)在我們?nèi)粘Ｉ钪薪?jīng)常見，比如靈動(dòng)島的設(shè)計(jì)，讓我們來看看作者對(duì)Bento box設(shè)計(jì)趨勢(shì)介紹~

Bento box設(shè)計(jì)風(fēng)格或Bento UI作為一種設(shè)計(jì)趨勢(shì)正在被驗(yàn)證，它近期頻繁的出現(xiàn)在大眾視野。本文中我們將討論Bento box設(shè)計(jì)趨勢(shì)的起源和發(fā)展，并結(jié)合設(shè)計(jì)應(yīng)用案例，讓大家感受它的魅力，望此后的應(yīng)用中，為設(shè)計(jì)師朋友帶來更多靈感和啟發(fā)。

一、什么是Bento box？

1. 概念簡(jiǎn)述

大家對(duì)便當(dāng)盒（Bento box）應(yīng)該很熟悉，印象最深的是日式便當(dāng)盒，看上去既精致又有食欲，格子用來區(qū)分食物，極其講究組合的美感。

Bento UI就是用戶界面如同便當(dāng)盒的結(jié)構(gòu)，有清晰的區(qū)塊劃分，整齊又整體的將內(nèi)容排布。

這種設(shè)計(jì)風(fēng)格不僅是一個(gè)框架，它融入了極簡(jiǎn)主義和東方傳統(tǒng)美學(xué)，將功能與美感推向一個(gè)全新的體驗(yàn)。它追求簡(jiǎn)單直接的解決方案，讓用戶能夠輕松理解并操作。

2. 發(fā)展的助推器

Bento UI讓人很容易聯(lián)想到蘋果的widget，widget詞典釋義為“小組件”。2020年6月蘋果手機(jī)推出了iOS 14正式版系統(tǒng)，其中討論度最高的要數(shù)Widget。

蘋果強(qiáng)調(diào)Widget不是進(jìn)入應(yīng)用的另一快捷方式，而是一種快速展示用戶關(guān)心的應(yīng)用程序數(shù)據(jù)的信息展示方式。

大眾視其為新的流量入口，各大應(yīng)用搶先適配，多款以時(shí)鐘、日歷、天氣功能的小組件應(yīng)用多次輪番登上App Store應(yīng)用免費(fèi)榜前列。

在知乎上，一篇關(guān)于夸贊蘋果widget的帖子中，有用戶調(diào)侃的評(píng)論道：看來，你對(duì)Android手機(jī)一無所知。的確，widget早在2008年的Android手機(jī)系統(tǒng)上就已經(jīng)廣泛應(yīng)用了：信息類、集合類、控件類、混合類widget層出不窮。

2010年的Windows Phone 7引入Metro設(shè)計(jì)語(yǔ)言系統(tǒng)，這些都可以視為現(xiàn)今Bento box設(shè)計(jì)風(fēng)格的靈感來源。我們作為設(shè)計(jì)師，追根溯源會(huì)為設(shè)計(jì)創(chuàng)意開個(gè)好頭。

二、風(fēng)格解析

1. 設(shè)計(jì)特征

• 打造具有視覺吸引力的層次感，結(jié)構(gòu)和組織是基石
• 基于網(wǎng)格，輕松為各設(shè)備創(chuàng)建響應(yīng)式布局
• 內(nèi)容和功能劃分清晰、輕量易用
• 簡(jiǎn)約優(yōu)雅、現(xiàn)代感十足

隨著被行業(yè)影響者們采用，不難看出它抓人眼球的原因，無非是設(shè)計(jì)思維和設(shè)計(jì)原則運(yùn)用的恰到好處。

2. 設(shè)計(jì)思維

1-1 基于便當(dāng)盒網(wǎng)格布局的設(shè)計(jì)思維，讓用戶更專注于每個(gè)Box里的信息呈現(xiàn)。BentoUI的設(shè)計(jì)美學(xué)中，核心元素是Box，你也可以稱它為“卡片”、“組件”、“單位”…

1-2 Bento UI可以在不同尺寸的設(shè)備上，根據(jù)空間進(jìn)行自適應(yīng)調(diào)整，根據(jù)網(wǎng)格規(guī)則，在多端可以提供一致的用戶體驗(yàn)。

1-3 有組織性的對(duì)特定內(nèi)容或功能進(jìn)行分化，簡(jiǎn)約且優(yōu)雅。

Bento UI會(huì)給人很自我的感覺，它的每個(gè)卡片間都有清晰的邊界，使內(nèi)容更加突出，用戶能直觀的判斷出卡片類型及其功能，方便信息捕捉。

蘋果連續(xù)兩年的新聞發(fā)布會(huì)幻燈片，均使用了Bento UI來凸顯產(chǎn)品的每個(gè)特性信息。

3. 設(shè)計(jì)原則

1-1 減少干擾：使用簡(jiǎn)單有效的設(shè)計(jì)元素

當(dāng)對(duì)卡片進(jìn)行操作時(shí)，按鈕、開關(guān)、點(diǎn)贊層作為重要的操作引導(dǎo)元素，無論任何形狀，在這個(gè)緊湊的空間內(nèi)，定會(huì)得到用戶一定的注意力。

在緊湊的布局中，有規(guī)律和規(guī)則的添加多操作，也是對(duì)設(shè)計(jì)師能力的考驗(yàn)。

單行或多行的文案根據(jù)信息級(jí)別，以線和面的視覺形式呈現(xiàn)出節(jié)奏的美感。

1-2 重視反饋：微交互加入必要環(huán)節(jié)

在使用中，被反饋是用戶最需要的，也是最基本的交互設(shè)計(jì)規(guī)則之一。反饋動(dòng)效并非越突出越好、越多越好，也不單純是為了有趣，要根據(jù)使用場(chǎng)景的特征，合理的添加。下圖這個(gè)輸入框回彈動(dòng)效不難看出設(shè)計(jì)師的巧思。

必要的操作反饋要講究克制，細(xì)節(jié)處打磨夠精準(zhǔn)，才會(huì)讓用戶眼前一亮。下圖中，卡片放置之前，會(huì)顯示一個(gè)灰色格子預(yù)判位置；拖拽卡片會(huì)模擬物體失重的晃動(dòng)感，非常自然又充滿趣味。

三、Bentobox的食用須知

1. 克制的藝術(shù)

漂亮的日式便當(dāng)盒最大的特征是食材豐富、食物組合極具形式美感。Bento UI的卡片類型多樣，需要仔細(xì)處理和平衡，避免因信息密集導(dǎo)致的閱讀壓力問題。美感與口感的權(quán)衡，這是專屬于設(shè)計(jì)師的克制藝術(shù)。

2. 創(chuàng)意的限制

白玉微瑕，Bento UI也并非完美。在嚴(yán)格的柵格系統(tǒng)上運(yùn)行，每個(gè)單元是一個(gè)規(guī)矩的矩形，這種嚴(yán)格的布局讓異型、破窗等不規(guī)則的創(chuàng)新設(shè)計(jì)很難融入。另外，圓角也是Bento Box設(shè)計(jì)美學(xué)的關(guān)鍵。

3. 為你推薦

1-1Bentogrids

如果你渴望更多靈感可以去bento grids看看，上面集合了豐富的Bento UI應(yīng)用程序的創(chuàng)意案例：https://bentogrids.com/

1-2Chronicle

它是一款演示文稿制作工具，官網(wǎng)運(yùn)用了bento UI的設(shè)計(jì)：https://chroniclehq.com

1-3Bento

強(qiáng)烈推薦一款比較典型的鏈接聚合工具網(wǎng)站，使用過程中你會(huì)感受到設(shè)計(jì)的細(xì)膩：https://bento.me/en/home

1-4Nev的個(gè)人網(wǎng)站

一個(gè)來自愛爾蘭設(shè)計(jì)師Nev的個(gè)人網(wǎng)站和Benro的設(shè)計(jì)有異曲同工之處，當(dāng)你想設(shè)計(jì)自己的網(wǎng)站時(shí)，不妨作為參考：https://nevflynn.com/

1-5Linear

Linear的官網(wǎng)大面積暗色中流暢克制的微動(dòng)效，加之無襯線體帶來鋒利又莊重的專業(yè)感，讓人驚嘆科技感也能如此打造：https://linear.app/

四、結(jié)語(yǔ)

除了滿足當(dāng)前用戶需求之外，UI和UX還將承擔(dān)預(yù)測(cè)、探索、解決用戶新的痛點(diǎn)和期望的持久任務(wù)。隨著各端的UI和UX趨勢(shì)不斷發(fā)展，設(shè)計(jì)師需要了解設(shè)計(jì)趨勢(shì)，也有責(zé)任讓設(shè)計(jì)更進(jìn)一步，以獲得更有用、更直觀、更愉快的用戶體驗(yàn)。

以上就是Bento box設(shè)計(jì)風(fēng)格的一些精彩案例，敬請(qǐng)期待下期的分享，感謝你的閱讀！