注意力稀缺時代,Bento Box設計的應對之道

0 評論 2987 瀏覽 19 收藏 12 分鐘

我們在進行頁面設計、界面設計時,總會要求設計師做出個XX風格的樣式出來。這就要求我們對各種設計風格都要有所了解才行。本文介紹了Bento Box這種設計風格的風格特點和設計要點,希望可以幫助大家了解。

2024年上半年,在多個網站發布的UI/UX設計趨勢中,Bento Box(便當盒)風格均榜上有名。

或許你對這個名字很陌生,但相信一定見過:在Apple的發布會、小米的產品網頁、手機的操作系統中處處都有它的存在。這些通過看似“隨機”的方式將多個卡片組合在一起的設計,都可以稱為Bento Box設計。

因為風格以“便當盒”命名,所以很多文章都將該風格的靈感源頭直指日本的便當盒文化。

Apple air & 小米 14 Pro

但僅從設計形式上看,Bento Box風格是否源于日本便當盒文化沒有確切答案,至少源于交通指示系統的Metro UI與Bento Box有著極大的相似之處,都是基于柵格化的卡片布局來傳遞信息。

然而,這并不妨礙我們透過便當盒的視角來認識這種設計風格。

Windows 10

一、便當盒文化

在日本,便當盒是飲食文化的重要組成部分,也是生活方式的一種體現。

在繁忙的工作日,人們可以通過便當盒方便地攜帶美味的食物,日式便當盒通常采用分隔式設計,將一餐食物放置在不同的隔層,防止不同食物的味道混合,并使食物更加整齊有序。

這種出于實用性和秩序性的訴求,也同樣構成了Bento Box風格的基礎和底色,使其成為一種注重結構化、注重信息傳遞有效性的布局方式和設計風格。

另一方面,日本文化中對和諧、平衡、細節的美學追求,逐漸滲透到便當盒中,隔層的劃分、食物的選擇及擺放不再只是為了方便攜帶,也為食用者提供了不同的視覺感官體驗。

這一特點在Bento Box風格中完美呈現:恰當的隔層間距、精致的模塊元素、豐富的視覺層次,體現了該風格對視覺細節的強大承載力和表現力。

álvaro Casta?o

二、Bento Box風格特點

我們通過瀏覽大量的Bento Box作品,可以發現其設計特點主要如下:

1. 柵格劃分

通過柵格系統將界面劃分出多個非對稱卡片,每個卡片彼此獨立,但又統一置于規則的邊界范圍內。

由于間隔劃分基于嚴格的柵格而非隨機,從而賦予界面布局較強的內在秩序性和內在結構性。分割間隙讓每個卡片的“視覺能量場”得到控制,從源頭上削弱了各模塊定制化可能帶來的混亂感。

Behance:Stephen Kelman

2. 模塊組合

每個卡片可以視為一個獨立的內容模塊或內容單元,可用來擺放不同類型的內容和信息。設計時,所有模塊既可以遵循一定的視覺秩序,也可以根據內容特點進行定制化處理。

Bento Box作品中,模塊間的視覺層次感模塊內的內容可讀性得到很好的兼顧,用戶愿意去閱讀卡片中的信息。

另外需要說明的是:除非刻意處理,Bento Box風格的作品往往沒有絕對的視覺中心點,瀏覽順序由每個用戶決定,每個模塊都能獲得相對平均的注意力分配。

The Financial OS for Web3 Teams

3. 內容交互

Bento Box的微交互總是能引起用戶的注意并給人驚喜,如懸停時的位移、點擊時的反饋等等,用戶在每次微小的互動中體會到設計師的用心,瀏覽過程變得更加主動。

也因為這些有趣且充滿“心機”的交互細節,作品呈現的品質感、設計感大大增強。

當然,大量動效對電腦性能形成挑戰,如果在加載、滑動時出現卡頓,反而不利于內容呈現效果,所以動效可以錦上添花,但不適合作為傳遞信息的唯一形式。

4. 靈活適配

采用嚴格、規范的柵格系統帶來的好處,就是Bento Box風格的作品可以靈活調整比例、間距以及排版組合,超強的適應性,讓用戶不管從桌面端還是移動端都能獲得一致的瀏覽體驗,而信息傳遞也不會減損。

Diagram

由此,內在秩序性、視覺層次感、內容可讀性、注意力分配、微交互以及適配響應構成了Bento Box獨特的風格屬性。

其實還有一點很重要,就是極強的場景適用性,這讓它得以在眾多設計風格中脫穎而出并迅速流行,所以我們可以在不同的內容類型、設備載體看到Bento Box的存在。

三、Bento Box設計要點

基于以上介紹以及我們日常眼力的積累,設計一款簡單可用的Bento Box作品并非難事,但為了確保設計效果,仍有幾個重要的設計要點需要說明:

1. 基礎柵格

當決定設計Bento Box時,首先要確定柵格的列數和列寬,以及柵格間距和邊距,形成基礎柵格后,根據內容進行卡片劃分和布局。

當比例、空間無法調和時,可重新調整列數、列寬,切記不可過度分割和脫離柵格,否則會讓設計變得混亂。

可以說,Bento Box完全是建立在柵格上的一種風格,柵格是確保設計效果的基礎和必要條件。

2. 視覺層次

雖然Bento Box可以讓每個模塊都獲得較為均衡的注意力,但設計師仍然可以通過卡片大小、顏色、背景圖、動效等方式,拉開卡片之間的層次,來干預用戶的瀏覽順序,比如,大一些的卡片用來放置關鍵圖像或主文案,小一些的卡片放一些次要信息、輔助文本或是補充圖像。

另外,不建議使用異形的卡片形式和“破窗”的表達手法,因為這兩種形式都會影響整體的視覺節奏。

Apple iPhone 15

3. 卡片圓角

微軟的Metro UI采用直角的卡片形式,非裝飾性很強,好像時刻在提醒用戶“只需關注信息”,但直角也成了很多人不喜歡Metro風格的重要原因。

在Bento Box作品中,更多地使用圓角,相比直角,圓角更具有親和力,當內容模塊很多時,可以減少界面元素之間的尖銳感,視覺舒適度大大提升。

在處理圓角時,圓角大小要適中,要與整體視覺風格保持統一,不要過于夸張。

Dribbble上很多夸張圓角運用得并不恰當(被眾多設計師錯誤地效仿,并放在個人作品集),要注意甄別。

當圓角過大,卡片之間的縫隙會對瀏覽形成干擾,或者讓卡片處于近似圓但非圓的尷尬狀態。

如果你在設計一款偏嚴肅、理性的產品界面,圓角運用更要克制。

4. 信息密度

卡片之間不要存在復雜的先后、父子邏輯關系,每個卡片即為一個獨立的信息單元。

在信息有效傳遞的前提下,每個“小隔間”都盡量保持信息簡潔清晰,通過合理布局控制好整體信息密度,有節奏地對文字、圖像、圖標、視頻等元素進行搭配組合,適當地留白也有助于重要信息的呈現,為用戶營造一個輕松、有節奏的瀏覽體驗。

從這個角度看,大篇幅的文字內容可能并不適合放在卡片中。

DJI & Apple iPhone 14

四、最后

Bento Box和Metro UI雖名稱不同,但設計理念互聯、共通。十多年前,Microsoft高舉Metro UI,其初衷在于突出內容,強調信息的傳遞效率。

早期Microsoft的設計文檔中,對基礎柵格、卡片類型、標題擺放、間距、字號字體、icon等基礎要素,都進行了具體且繁復的指導,但過度理性的界面表達并未贏得用戶的認可。

Apple顯然看到了這種布局方式的潛力和問題,在保留Metro UI理性底色的同時,對布局、圓角、圖形、顏色全面改造,卡片被賦予溫度,視覺體驗全面提升,最終成為本篇所介紹的Bento Box。在Apple的引領下,越來越多的場景中出現了它的身影,逐漸成為設計領域難以替代的一種界面解決方案。

也許在很長一段時間里,Bento Box都將持續散發著吸引力。

本文由 @設計來電 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!