5分鐘帶你快速了解Bento box設計趨勢|北京藍藍UI設計公司

2023-12-6    周周

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

導語

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

 

一、什么是 Bento box?

1. 概念簡述

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

企業(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ù)的信息展示方式。

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

大眾視其為新的流量入口,各大應用搶先適配,多款以時鐘、日歷、天氣功能的小組件應用多次輪番登上 App Store 應用免費榜前列。

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

靈動島小組件

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

Android 系統(tǒng) Widget

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

Windows Phone 7

二、風格解析

1. 設計特征

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

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

2. 設計思維

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

任務管理器應用程序,Dmitry Lauretsky

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

品牌網(wǎng)站設計,Andriy Yurchenko

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

2023 年蘋果發(fā)布會-Apple Watch Ultra

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

2022 年蘋果發(fā)布會-Apple Watch Series 8

3. 設計原則

①減少干擾:使用簡單有效的設計元素

當對卡片進行操作時,按鈕、開關、點贊層作為重要的操作引導元素,無論任何形狀,在這個緊湊的空間內(nèi),定會得到用戶一定的注意力。

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

加密錢包 APP,Purrweb UI/UX Agency

在緊湊的布局中,有規(guī)律和規(guī)則的添加多操作,也是對設計師能力的考驗

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

心里健康 App,Purrweb UI/UX Agency

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

人力資源平臺,Awsmd

②重視反饋:微交互加入必要環(huán)節(jié)

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

三、Bento box 的食用須知

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/

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

②Chronicle

它是一款演示文稿制作工具,官網(wǎng)運用了 bento UI 的設計: https://chroniclehq.com

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

③Bento

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

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

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

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

⑤Linear

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

 

 

騰訊出品!5分鐘帶你快速了解Bento box設計趨勢

結語

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

 

文章來源:優(yōu)設網(wǎng)    作者: ISUX

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

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

 

 

藍藍設計(m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(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ā)。

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔