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

取自 freepik

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

2023年的設計趨勢之一

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

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

Apple 2023官網

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

Bento UI 的特點

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

1. 明確的佈局

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

截自 nextjs

2. 內容的可讀性

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

截自 bolt

3. 透過視覺層次引導

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

4. 彈性高的網格設計

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

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

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

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

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