2023-12-6 周周
導語
Bento box 設計風格或 Bento UI 作為一種設計趨勢正在被驗證，它近期頻繁的出現(xiàn)在大眾視野。本文中我們將討論 Bento box 設計趨勢的起源和發(fā)展，并結(jié)合設計應用案例，讓大家感受它的魅力，望此后的應用中，為設計師朋友帶來更多靈感和啟發(fā)。
1. 概念簡述
大家對便當盒(Bento box)應該很熟悉，印象最深的是日式便當盒，看上去既精致又有食欲，格子用來區(qū)分食物，極其講究組合的美感。Bento UI 就是用戶界面如同便當盒的結(jié)構(gòu)，有清晰的區(qū)塊劃分，整齊又整體的將內(nèi)容排布。
健身社區(qū) App，Purrweb UI/UX Agency
這種設計風格不僅是一個框架，它融入了極簡主義和東方傳統(tǒng)美學，將功能與美感推向一個全新的體驗。它追求簡單直接的解決方案，讓用戶能夠輕松理解并操作。
企業(yè)資源規(guī)劃客戶端，Arounda UI/UX
2. 發(fā)展的助推器
Bento UI 讓人很容易聯(lián)想到蘋果的 widget，widget 詞典釋義為"小組件"。2020 年 6 月蘋果手機推出了 iOS 14 正式版系統(tǒng)，其中討論度最高的要數(shù) Widget。蘋果強調(diào) Widget 不是進入應用的另一快捷方式，而是一種快速展示用戶關心的應用程序數(shù)據(jù)的信息展示方式。
大眾視其為新的流量入口，各大應用搶先適配，多款以時鐘、日歷、天氣功能的小組件應用多次輪番登上 App Store 應用免費榜前列。
靈動島小組件
在知乎上，一篇關于夸贊蘋果 widget 的帖子中，有用戶調(diào)侃的評論道：看來，你對 Android 手機一無所知。的確，widget 早在 2008 年的 Android 手機系統(tǒng)上就已經(jīng)廣泛應用了：信息類、集合類、控件類、混合類 widget 層出不窮。
Android 系統(tǒng) Widget
2010 年的 Windows Phone 7 引入 Metro 設計語言系統(tǒng)，這些都可以視為現(xiàn)今 Bento box 設計風格的靈感來源。我們作為設計師，追根溯源會為設計創(chuàng)意開個好頭。
Windows Phone 7
1. 設計特征
隨著被行業(yè)影響者們采用，不難看出它抓人眼球的原因，無非是設計思維和設計原則運用的恰到好處。
2. 設計思維
①基于便當盒網(wǎng)格布局的設計思維，讓用戶更專注于每個 Box 里的信息呈現(xiàn)。Bento UI 的設計美學中，核心元素是 Box，你也可以稱它為“卡片”、“組件”、“單位”...
任務管理器應用程序，Dmitry Lauretsky
②Bento UI 可以在不同尺寸的設備上，根據(jù)空間進行自適應調(diào)整，根據(jù)網(wǎng)格規(guī)則，在多端可以提供一致的用戶體驗。
圖片來自名為 Bento 的產(chǎn)品/一款鏈接聚合工具
③有組織性的對特定內(nèi)容或功能進行分化，簡約且優(yōu)雅。
品牌網(wǎng)站設計，Andriy Yurchenko
Bento UI 會給人很自我的感覺，它的每個卡片間都有清晰的邊界，使內(nèi)容更加突出，用戶能直觀的判斷出卡片類型及其功能，方便信息捕捉。
科技公司網(wǎng)站，tubik UX
蘋果連續(xù)兩年的新聞發(fā)布會幻燈片，均使用了 Bento UI 來凸顯產(chǎn)品的每個特性信息。
2023 年蘋果發(fā)布會-Apple Watch Ultra
2022 年蘋果發(fā)布會-Apple Watch Series 8
3. 設計原則
①減少干擾：使用簡單有效的設計元素
當對卡片進行操作時，按鈕、開關、點贊層作為重要的操作引導元素，無論任何形狀，在這個緊湊的空間內(nèi)，定會得到用戶一定的注意力。
加密錢包 APP，Purrweb UI/UX Agency
在緊湊的布局中，有規(guī)律和規(guī)則的添加多操作，也是對設計師能力的考驗
心里健康 App，Purrweb UI/UX Agency
單行或多行的文案根據(jù)信息級別，以線和面的視覺形式呈現(xiàn)出節(jié)奏的美感。
人工智能網(wǎng)站，Arounda UI/UX
人力資源平臺，Awsmd
②重視反饋：微交互加入必要環(huán)節(jié)
在使用中，被反饋是用戶最需要的，也是最基本的交互設計規(guī)則之一。反饋動效并非越突出越好、越多越好，也不單純是為了有趣，要根據(jù)使用場景的特征，合理的添加。下圖這個輸入框回彈動效不難看出設計師的巧思。
必要的操作反饋要講究克制，細節(jié)處打磨夠精準，才會讓用戶眼前一亮。下圖中，卡片放置之前，會顯示一個灰色格子預判位置；拖拽卡片會模擬物體失重的晃動感，非常自然又充滿趣味。
圖片來自名為 Bento 的產(chǎn)品，一款鏈接聚合工具
1. 克制的藝術
漂亮的日式便當盒最大的特征是食材豐富、食物組合極具形式美感。Bento UI 的卡片類型多樣，需要仔細處理和平衡，避免因信息密集導致的閱讀壓力問題。美感與口感的權衡，這是專屬于設計師的克制藝術。
2. 創(chuàng)意的限制
白玉微瑕，Bento UI 也并非完美。在嚴格的柵格系統(tǒng)上運行，每個單元是一個規(guī)矩的矩形，這種嚴格的布局讓異型、破窗等不規(guī)則的創(chuàng)新設計很難融入。另外，圓角也是 Bento Box 設計美學的關鍵。
3. 為你推薦
①Bento grids
如果你渴望更多靈感可以去 bento grids 看看，上面集合了豐富的 Bento UI 應用程序的創(chuàng)意案例： https://bentogrids.com/
②Chronicle
它是一款演示文稿制作工具，官網(wǎng)運用了 bento UI 的設計： https://chroniclehq.com
③Bento
強烈推薦一款比較典型的鏈接聚合工具網(wǎng)站，使用過程中你會感受到設計的細膩： https://bento.me/en/home
④Nev 的個人網(wǎng)站
一個來自愛爾蘭設計師 Nev 的個人網(wǎng)站和 Benro 的設計有異曲同工之處，當你想設計自己的網(wǎng)站時，不妨作為參考： https://nevflynn.com/
⑤Linear
Linear 的官網(wǎng)大面積暗色中流暢克制的微動效，加之無襯線體帶來鋒利又莊重的專業(yè)感，讓人驚嘆科技感也能如此打造： https://linear.app/
除了滿足當前用戶需求之外，UI 和 UX 還將承擔預測、探索、解決用戶新的痛點和期望的持久任務。隨著各端的 UI 和 UX 趨勢不斷發(fā)展，設計師需要了解設計趨勢，也有責任讓設計更進一步，以獲得更有用、更直觀、更愉快的用戶體驗。
文章來源：優(yōu)設網(wǎng) 作者： ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計(www.indbiotech.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。
關鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
