2023設計新趨勢:Bento UI,連Apple官網都在用!加碼製作自己Bento風格的個人頁工具

閱讀時間約 2 分鐘
取自 freepik

取自 freepik

最近在瀏覽國外的設計分享或產品時,發現將 Bento UI 加入的品牌越來越多了!

2023年的設計趨勢之一

Bento UI,也有些人稱為 Bento Box,是在今年真正開始流行起來的設計風格之一。從 Framer 範本來看,也有不少網頁都有加入 Bento UI 這個元素!

Bento 取名來源很可愛,是取自日本的「便當」,因為它第一眼看起來就像是我們常看到有隔層的便當盒(餓了)。Bento UI 即是將內容分布在不同的隔層中,透過有趣的排列,達到有組織且架構的佈局。

Apple 2023官網

Apple 2023官網

Apple 即是很早就開始使用 Bento 風格的品牌,相信大家都不陌生!不過我也有查到最先採用這種設計的是 Windows Phone 7 時引進的Metro 設計語言系統。

Bento UI 的特點

Bento UI 設計的特點在於將各個不同層次結構的卡片組織起來,使每個卡片都能保持自身的主題性,同時在視覺上呈現出一致的整體感。

1. 明確的佈局

Bento UI 透過明確的分隔來組織一個畫面,每個隔層都能放上特定內容、亮點或功能,但每個卡片隔層又扣環著主角產品,達到內容不衝突、整體醫治性非常高的設計佈局。

截自 nextjs

截自 nextjs

2. 內容的可讀性

上面第一點有提到,可以透過 Bento UI 將不同類型的內容或功能安排在各自的隔層中,可以很有效率地做到內容的分類。用戶能更迅速地找到所需的資訊或功能,進而提升用戶了解或查找的效率。

截自 bolt

截自 bolt

3. 透過視覺層次引導

Bento UI 可以透過大小、顏色等方式,把重要的東西變得更顯眼。用戶一看就知道哪些東西最重要,更容易引導視覺的注意力。

raw-image

4. 彈性高的網格設計

Bento UI 採的是簡單的網格佈局,可以輕易適應不同尺寸的螢幕,不必擔心佈局失誤或內容被遮擋的問題。同時也簡化了設計和開發的流程,節省了時間和資源。

把自己的微型網頁也加入 Bento 風格!

raw-image

在搜尋 Bento 相關資源時,發現 bento.me 這個網站可讓用戶輕鬆製作自己的 Bento 風格個人頁!

raw-image

bento.me 提供了不同的區塊主題讓用戶可以自己組合,基本的照片、自媒體和作品集都可以呈現,更進階的還有 Spotify 歌單、預約系統,現在也越來越多創作者在開發網站上的小元件,讓頁面的功能更豐富!

以上紀錄一下在研究 Bento UI 這個設計趨勢的筆記與發現,我認為 Bento UI 視覺上好看外,更重要的是在資訊理解、組織能力這塊的提升是相當有感的,期待未來有更多延伸的設計手法!

11會員
16內容數
自我成長上的小發現
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
100
川普當選,對台股是利多還是利空?川普在槍擊事件中所表現出來的英勇形象,讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意,所以要付保護費」,就讓台積電在短短三天跌掉超過100 元,台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎?未來該如何因應?  
Thumbnail
2024-07-20
67
金融科技與生活美學的融合 CUBE App實踐自我理想最近開啟了研究工作,也開始斜槓著手團購、行銷、洽談業務,慢慢想打造一條屬於自己的道路,而工作忙碌之虞,總忘記自己刷卡消費明細、信用卡繳費,還會忽略了最應該的投資理財,也常常在忙碌奔波中忘記信用卡優惠,國泰世華CUBE App給足了這些功能和服務。 日常生活與數位、科技形影不離,同時也拉近彼此距
Thumbnail
2024-07-11
22
伸縮餐枱的創新設計 | 讓你的用餐空間變得更加時尚和舒適現代生活快節奏,人們越來越重視生活品質。在家中,用餐空間是家人共聚的重要場所。如何讓這個場所既實用又時尚舒適?伸縮餐枱是一種新穎的設計,為家庭用餐帶來了很多便利和創新。本文將從品質、設計和實用性三個方面介紹伸縮餐枱的優點。 品質 伸縮餐枱的品質是使用時需要考慮的重要因素。品質好的伸縮餐桌不僅能夠
Thumbnail
2023-08-21
3
緯創資通:5G時代的天線設計有許多新挑戰與新商機掌握5G發展的趨勢,了解瓶頸是什麼並且找到突破點,就可以讓評審眼睛為之一亮。 每年通訊大賽的天線競賽都有許多團隊提出創新想法與設計,而評審們也會提醒團隊要思考如何提升使用體驗。天線設計進入到5G時代,MIMO被大量實現在目前5G終端產品之中,意謂天線的支數相較於4G時代會大幅度增加。要將大幅增加的
Thumbnail
2023-08-17
8
循環設計:環保與創新的融合聽了那麼久的循環設計到底是什麼呢⁉️ 其實台灣也曾辦過相關的展覽喔✨ 如果想知道初步了解循環設計的話♻️ 那您一定不能錯過這篇文章喔~🫶🏻
Thumbnail
甜品藝術家:創意點心設計師的展覽在一個光影交織的展覽空間中,一場充滿創意和甜蜜的外燴盛會即將開幕。這不是一般的外燴派對,而是由一群甜品藝術家共同打造的創意點心設計師的展覽。他們將甜品視為藝術的媒介,用心設計每一道點心,將繪畫與烘焙融合,帶來視覺和味覺的雙重享受。
Thumbnail
2023-07-27
0
完美結合風格與實用:揭秘更衣間設計的新趨勢隨著時代的演進和生活方式的變遷,更衣間設計也在不斷進化。當今的更衣間不僅要能滿足儲物的功能,也需要能反映出住戶的風格和個性。下面就讓我們一起來揭秘一下更衣間設計的新趨勢,看看如何將風格與實用完美結合。
2023-07-05
0
從尋常到非凡:創新更衣室設計的無限可能更衣室設計並非只有傳統的衣櫃和掛鈎,其實還有無數創新的可能性。透過運用創新的設計元素和理念,我們可以把一個尋常的更衣室變得非凡。
2023-07-05
0
尋找內心的寧靜:一次日式鄉村風室內設計的心靈之旅我們生活在一個繁忙而喧囂的世界,每天都被各種壓力和聲音所圍繞。然而,每個人內心深處都渴望有一片寧靜的天地。我們的日式鄉村風室內設計就是為了滿足這種渴望,讓您在家中就能體驗到一場心靈之旅。
2023-06-13
3
[新北旅遊]蘆葦叢中建築設計理念的現代美術館,超有震撼力園區、新北市美術館串聯三鶯區旅行動線台灣各縣市近年來都有成立縣市美術館,新北市做為台灣第一大城市,新北市美術館以當代視野進行收藏、研究、展示、教育與公眾服務,目前主體建築仍在施工中,未來一旦完工將串聯周邊地景,打造結合藝術、生態、休閒的特色園區。 新北市美術館相關資訊:: 地址: 新北市鶯歌區館前路300號 開放時間: AM10:00
Thumbnail
2023-06-01
3
沙特新設四經濟特區:布局後石油時代,產油國也學中國改革開放?4月13日,沙特王儲兼首相穆罕默德(Mohammed bin Salman)宣布,將在沙特境內設立四個經濟特區(SEZ),進一步推動國內的經濟多元化發展。
Thumbnail
2023-04-19
6
開箱設計師工作室 ₀₀₂ 何樵暐.互動設計和新媒體實踐者不追求龐大規模,而是探索著如果只有一個人,如何能把事情做好。創立 DML 工作室後,在沒有資源與案源的掙扎中走出新路。這一次,跟著何樵暐老師在創業、教學、商業案與自我成長裡,看見他身為實踐者,執著做著喜歡的事。
Thumbnail
2023-02-10
1
迎新活動「方格新手村」:新格友註冊加入方格子,知名日料吃到飽餐券送給你! 👉 還不是 vocus 的會員嗎?點此註冊,參與新手村活動 👈 近期站上也出現了不少新格友,為了歡迎各位的加入,「方格新手村」隨之登場! 即日起,只要是新註冊帳號於活動期間內發佈 3 則文章,就有機會抽獎獲得知名日料吃到飽餐券。原格友也可以一起同樂,我們準備了小任
Thumbnail
2024-06-21
100
川普當選,對台股是利多還是利空?川普在槍擊事件中所表現出來的英勇形象,讓他贏得美國總統大選幾乎已成定局。沒想到他隨口的一句話「台灣搶走美國的晶片生意,所以要付保護費」,就讓台積電在短短三天跌掉超過100 元,台股也跌掉1100點以上。台積電、台股會就此一路下跌嗎?未來該如何因應?  
Thumbnail
2024-07-20
67
金融科技與生活美學的融合 CUBE App實踐自我理想最近開啟了研究工作,也開始斜槓著手團購、行銷、洽談業務,慢慢想打造一條屬於自己的道路,而工作忙碌之虞,總忘記自己刷卡消費明細、信用卡繳費,還會忽略了最應該的投資理財,也常常在忙碌奔波中忘記信用卡優惠,國泰世華CUBE App給足了這些功能和服務。 日常生活與數位、科技形影不離,同時也拉近彼此距
Thumbnail
2024-07-11
22
伸縮餐枱的創新設計 | 讓你的用餐空間變得更加時尚和舒適現代生活快節奏,人們越來越重視生活品質。在家中,用餐空間是家人共聚的重要場所。如何讓這個場所既實用又時尚舒適?伸縮餐枱是一種新穎的設計,為家庭用餐帶來了很多便利和創新。本文將從品質、設計和實用性三個方面介紹伸縮餐枱的優點。 品質 伸縮餐枱的品質是使用時需要考慮的重要因素。品質好的伸縮餐桌不僅能夠
Thumbnail
2023-08-21
3
緯創資通:5G時代的天線設計有許多新挑戰與新商機掌握5G發展的趨勢,了解瓶頸是什麼並且找到突破點,就可以讓評審眼睛為之一亮。 每年通訊大賽的天線競賽都有許多團隊提出創新想法與設計,而評審們也會提醒團隊要思考如何提升使用體驗。天線設計進入到5G時代,MIMO被大量實現在目前5G終端產品之中,意謂天線的支數相較於4G時代會大幅度增加。要將大幅增加的
Thumbnail
2023-08-17
8
循環設計:環保與創新的融合聽了那麼久的循環設計到底是什麼呢⁉️ 其實台灣也曾辦過相關的展覽喔✨ 如果想知道初步了解循環設計的話♻️ 那您一定不能錯過這篇文章喔~🫶🏻
Thumbnail
甜品藝術家:創意點心設計師的展覽在一個光影交織的展覽空間中,一場充滿創意和甜蜜的外燴盛會即將開幕。這不是一般的外燴派對,而是由一群甜品藝術家共同打造的創意點心設計師的展覽。他們將甜品視為藝術的媒介,用心設計每一道點心,將繪畫與烘焙融合,帶來視覺和味覺的雙重享受。
Thumbnail
2023-07-27
0
完美結合風格與實用:揭秘更衣間設計的新趨勢隨著時代的演進和生活方式的變遷,更衣間設計也在不斷進化。當今的更衣間不僅要能滿足儲物的功能,也需要能反映出住戶的風格和個性。下面就讓我們一起來揭秘一下更衣間設計的新趨勢,看看如何將風格與實用完美結合。
2023-07-05
0
從尋常到非凡:創新更衣室設計的無限可能更衣室設計並非只有傳統的衣櫃和掛鈎,其實還有無數創新的可能性。透過運用創新的設計元素和理念,我們可以把一個尋常的更衣室變得非凡。
2023-07-05
0
尋找內心的寧靜:一次日式鄉村風室內設計的心靈之旅我們生活在一個繁忙而喧囂的世界,每天都被各種壓力和聲音所圍繞。然而,每個人內心深處都渴望有一片寧靜的天地。我們的日式鄉村風室內設計就是為了滿足這種渴望,讓您在家中就能體驗到一場心靈之旅。
2023-06-13
3
[新北旅遊]蘆葦叢中建築設計理念的現代美術館,超有震撼力園區、新北市美術館串聯三鶯區旅行動線台灣各縣市近年來都有成立縣市美術館,新北市做為台灣第一大城市,新北市美術館以當代視野進行收藏、研究、展示、教育與公眾服務,目前主體建築仍在施工中,未來一旦完工將串聯周邊地景,打造結合藝術、生態、休閒的特色園區。 新北市美術館相關資訊:: 地址: 新北市鶯歌區館前路300號 開放時間: AM10:00
Thumbnail
2023-06-01
3
沙特新設四經濟特區:布局後石油時代,產油國也學中國改革開放?4月13日,沙特王儲兼首相穆罕默德(Mohammed bin Salman)宣布,將在沙特境內設立四個經濟特區(SEZ),進一步推動國內的經濟多元化發展。
Thumbnail
2023-04-19
6
開箱設計師工作室 ₀₀₂ 何樵暐.互動設計和新媒體實踐者不追求龐大規模,而是探索著如果只有一個人,如何能把事情做好。創立 DML 工作室後,在沒有資源與案源的掙扎中走出新路。這一次,跟著何樵暐老師在創業、教學、商業案與自我成長裡,看見他身為實踐者,執著做著喜歡的事。
Thumbnail
2023-02-10
1