導(dǎo)語(yǔ)

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ì)師朋友帶來(lái)更多靈感和啟發(fā)。

 

一、什么是 Bento box？

1. 概念簡(jiǎn)述

大家對(duì)便當(dāng)盒(Bento box)應(yīng)該很熟悉，印象最深的是日式便當(dāng)盒，看上去既精致又有食欲，格子用來(lái)區(qū)分食物，極其講究組合的美感。Bento UI 就是用戶界面如同便當(dāng)盒的結(jié)構(gòu)，有清晰的區(qū)塊劃分，整齊又整體的將內(nèi)容排布。

健身社區(qū) App，Purrweb UI/UX Agency

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

企業(yè)資源規(guī)劃客戶端，Arounda UI/UX

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

Bento UI 讓人很容易聯(lián)想到蘋(píng)果的 widget，widget 詞典釋義為"小組件"。2020 年 6 月蘋(píng)果手機(jī)推出了 iOS 14 正式版系統(tǒng)，其中討論度最高的要數(shù) Widget。蘋(píng)果強(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)榜前列。

靈動(dòng)島小組件

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

Android 系統(tǒng) Widget

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

Windows Phone 7

二、風(fēng)格解析

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

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

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

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

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

任務(wù)管理器應(yīng)用程序，Dmitry Lauretsky

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

圖片來(lái)自名為 Bento 的產(chǎn)品/一款鏈接聚合工具

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

品牌網(wǎng)站設(shè)計(jì)，Andriy Yurchenko

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

科技公司網(wǎng)站，tubik UX

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

2023 年蘋(píng)果發(fā)布會(huì)-Apple Watch Ultra

2022 年蘋(píng)果發(fā)布會(huì)-Apple Watch Series 8

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

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

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

加密錢(qián)包 APP，Purrweb UI/UX Agency

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

心里健康 App，Purrweb UI/UX Agency

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

人工智能網(wǎng)站，Arounda UI/UX

人力資源平臺(tái)，Awsmd

②重視反饋：微交互加入必要環(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)感，非常自然又充滿趣味。

圖片來(lái)自名為 Bento 的產(chǎn)品，一款鏈接聚合工具

三、Bento box 的食用須知

1. 克制的藝術(shù)

漂亮的日式便當(dāng)盒最大的特征是食材豐富、食物組合極具形式美感。Bento UI 的卡片類(lèi)型多樣，需要仔細(xì)處理和平衡，避免因信息密集導(dǎo)致的閱讀壓力問(wèn)題。美感與口感的權(quán)衡，這是專(zhuā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. 為你推薦

①Bento grids

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

②Chronicle

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

③Bento

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

④Nev 的個(gè)人網(wǎng)站

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

⑤Linear

Linear 的官網(wǎng)大面積暗色中流暢克制的微動(dòng)效，加之無(wú)襯線體帶來(lái)鋒利又莊重的專(zhuān)業(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)。

 

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者： ISUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開(kāi)發(fā)、軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)。