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 視覺上好看外,更重要的是在資訊理解、組織能力這塊的提升是相當有感的,期待未來有更多延伸的設計手法!

留言
avatar-img
留言分享你的想法!
avatar-img
K的下班後一角
18會員
17內容數
自我成長上的小發現
K的下班後一角的其他內容
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/05/11
本文記錄 1/27~1/28 參加臺南青年職涯發展中心舉辦的 「SEO不只是入門-進階實際應用班」講座。講座內容相當扎實,包含SEO概念與內容佈局,進階SEO技術,以及數據分析應用。另外,文章也提到了SEO的工作內容和目標,以及關於SEO演算法因素和網站架構的相關資訊。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/02/27
這篇文章紀錄瞭如何透過新社群平臺Threads提升公司品牌曝光的過程,以及一些成功的策略和方法。文章分享了Threads的特點,以及一些在這個平臺上有效的行銷策略。
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
2024/01/19
以往對於macOS系統都不會追求要更新到最新版本,儘管許多人推的macOS Sonoma免費版釋出後,也遲遲沒有升級XD。 直到知道升級後就能透過App Store下載copilot使用GPT-4就衝動更新了!(有聽說部分人的網頁版就可以直接選擇GPT-4?)
Thumbnail
看更多
你可能也想看
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
在小小的租屋房間裡,透過蝦皮購物平臺採購各種黏土、模型、美甲材料等創作素材,打造專屬黏土小宇宙的療癒過程。文中分享多個蝦皮挖寶地圖,並推薦蝦皮分潤計畫。
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
小蝸和小豬因購物習慣不同常起衝突,直到發現蝦皮分潤計畫,讓小豬的購物愛好產生價值,也讓小蝸開始欣賞另一半的興趣。想增加收入或改善伴侶間的購物觀念差異?讓蝦皮分潤計畫成為你們的神隊友吧!
Thumbnail
最近在瀏覽國外的設計分享或產品時,發現將 Bento UI 加入的品牌越來越多了! Bento UI,也有些人稱為 Bento Box,是在今年真正開始流行起來的設計風格之一。從 Framer 範本來看,也有不少網頁都有加入 Bento UI 這個元素!
Thumbnail
最近在瀏覽國外的設計分享或產品時,發現將 Bento UI 加入的品牌越來越多了! Bento UI,也有些人稱為 Bento Box,是在今年真正開始流行起來的設計風格之一。從 Framer 範本來看,也有不少網頁都有加入 Bento UI 這個元素!
Thumbnail
最近在準備品牌課程內容忙得焦頭爛額,再忙都要擠出一點時間閱讀好創意,雖然沒辦法每週這麼頻繁,我盡量會做到半月更,還是很想把好創意分享給你們。 • 設計師吉田每次都能讓你驚豔 日本著名的平面設計師吉田ユニ擅長用真實拍攝的手法,結合錯視的手法,把物體組合成意想不到的畫面。這次參加迪士尼百年紀念活動,
Thumbnail
最近在準備品牌課程內容忙得焦頭爛額,再忙都要擠出一點時間閱讀好創意,雖然沒辦法每週這麼頻繁,我盡量會做到半月更,還是很想把好創意分享給你們。 • 設計師吉田每次都能讓你驚豔 日本著名的平面設計師吉田ユニ擅長用真實拍攝的手法,結合錯視的手法,把物體組合成意想不到的畫面。這次參加迪士尼百年紀念活動,
Thumbnail
台灣自從十年前開始大量接收來自西方、日本、香港的設計作品與專業知識,這五、六年以來不管是民間企業還是公部門,都可以看見設計師與客戶共同投入相當高的設計能量,使得台灣的品牌圈、設計圈百花齊放,熱鬧非凡,其中在品牌識別建立的步驟中,絕對少不了的字體環節也漸漸變成主角......
Thumbnail
台灣自從十年前開始大量接收來自西方、日本、香港的設計作品與專業知識,這五、六年以來不管是民間企業還是公部門,都可以看見設計師與客戶共同投入相當高的設計能量,使得台灣的品牌圈、設計圈百花齊放,熱鬧非凡,其中在品牌識別建立的步驟中,絕對少不了的字體環節也漸漸變成主角......
Thumbnail
Hi 我是路易大叔,我把過去在廣告業與品牌行銷打滾摸索到的能量成功地實踐在chizup!這個品牌。今天,我想把在創業、創意、行銷的一些實用的方法跟觀念,整理出來和廣告行銷人們分享,一起在工作中實踐。 天氣真好,一起來看點創意!⛱ ▾▾▾▾▾ 日本相鉄東急把廣告拍出了新境界 這個廣告動員超過200
Thumbnail
Hi 我是路易大叔,我把過去在廣告業與品牌行銷打滾摸索到的能量成功地實踐在chizup!這個品牌。今天,我想把在創業、創意、行銷的一些實用的方法跟觀念,整理出來和廣告行銷人們分享,一起在工作中實踐。 天氣真好,一起來看點創意!⛱ ▾▾▾▾▾ 日本相鉄東急把廣告拍出了新境界 這個廣告動員超過200
Thumbnail
長長的年假過完了,是不是還是覺得意猶未盡。來補充一點創意的靈感能量,抵銷一點”長假症候群”的不良反應~ 1. 上班還可以順便偷菜 2. 蔬果皮膠帶 3. Burberry要佔領地球 4. 這樣的設計看起來就很想買 5. 極簡之後的極繁風格要來了
Thumbnail
長長的年假過完了,是不是還是覺得意猶未盡。來補充一點創意的靈感能量,抵銷一點”長假症候群”的不良反應~ 1. 上班還可以順便偷菜 2. 蔬果皮膠帶 3. Burberry要佔領地球 4. 這樣的設計看起來就很想買 5. 極簡之後的極繁風格要來了
Thumbnail
手提抽屜盒新上架~ 抽屜盒加上提繩設計,更環保、更輕量的包裝,三款風格配上各式內襯,甜點餅乾、咖啡茶包都好裝,讓你的禮盒更加獨一無二!! 甜甜夢幻的甜點星球、高雅深藍的珍貴寳盒、 文藝小清新的牛奶曲奇哪個是你的最愛呢? 偷偷告訴大家一個好消息 抽屜盒訂購滿300組提供免費燙金服務喔,(第一次燙金酌收
Thumbnail
手提抽屜盒新上架~ 抽屜盒加上提繩設計,更環保、更輕量的包裝,三款風格配上各式內襯,甜點餅乾、咖啡茶包都好裝,讓你的禮盒更加獨一無二!! 甜甜夢幻的甜點星球、高雅深藍的珍貴寳盒、 文藝小清新的牛奶曲奇哪個是你的最愛呢? 偷偷告訴大家一個好消息 抽屜盒訂購滿300組提供免費燙金服務喔,(第一次燙金酌收
Thumbnail
「顏值當道」的現代,大眾對事物的「審美概念」明顯提高,無論是對個人穿搭、路過的購物網站,或某個產品包裝,我們都有對「美」的觀點與評價。 其中,產品包裝是非常值得重視的一環,許多研究都表明包裝的檔次、美感直接影響消費者的購買慾望,這也是為什麼很多知名企業品牌,投入很多資源在包裝設計上。
Thumbnail
「顏值當道」的現代,大眾對事物的「審美概念」明顯提高,無論是對個人穿搭、路過的購物網站,或某個產品包裝,我們都有對「美」的觀點與評價。 其中,產品包裝是非常值得重視的一環,許多研究都表明包裝的檔次、美感直接影響消費者的購買慾望,這也是為什麼很多知名企業品牌,投入很多資源在包裝設計上。
Thumbnail
山寨風起,天下有賊的時代,企業危機意識,是否驚醒到今日為大王,明日就可能為小嘍囉。其實,人生命只不過是想讓生活更為美好,生活也要設計的。很喜歡閱讀所謂”生活設計”類別的雜誌或MOOK,如CASA BRUTUS、&Premium、Pen(Pen+)等。 >> >> 放眼人類文明史,15世紀的歐洲,翡冷
Thumbnail
山寨風起,天下有賊的時代,企業危機意識,是否驚醒到今日為大王,明日就可能為小嘍囉。其實,人生命只不過是想讓生活更為美好,生活也要設計的。很喜歡閱讀所謂”生活設計”類別的雜誌或MOOK,如CASA BRUTUS、&Premium、Pen(Pen+)等。 >> >> 放眼人類文明史,15世紀的歐洲,翡冷
Thumbnail
回首一年多前,還在深圳負責數位產品UX的小小設計師。在面對以中國市場為主要目標的使用者體驗,大多數時團隊採取的設計策略,仍藉由參考競爭對手作為發想的起點。
Thumbnail
回首一年多前,還在深圳負責數位產品UX的小小設計師。在面對以中國市場為主要目標的使用者體驗,大多數時團隊採取的設計策略,仍藉由參考競爭對手作為發想的起點。
Thumbnail
​ 食品業尤其是包裝一向是很重要的一個環節。一個良好的食品包裝能夠讓食品加分,不只是對食品包裝有了方便性、穩定性、需求性。更對於食品包裝內容物的食品有了更棒的保存完整性,對於食品的食材味道不至於走味。時下的食品包裝公司不少,正達食品包裝公司服務的顧客群非常多。這家企業擁有多種服務內容,尤其是「變形公
Thumbnail
​ 食品業尤其是包裝一向是很重要的一個環節。一個良好的食品包裝能夠讓食品加分,不只是對食品包裝有了方便性、穩定性、需求性。更對於食品包裝內容物的食品有了更棒的保存完整性,對於食品的食材味道不至於走味。時下的食品包裝公司不少,正達食品包裝公司服務的顧客群非常多。這家企業擁有多種服務內容,尤其是「變形公
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News