Bento Grids / Bento Box 🍱
詞彙的靈感來源蠻貼近實際意象,由不同大小、設計內容的方塊組合而成,類似日式便當盒的設計風格。這種佈局的設計,其實已經存在很長一段時間,直到 Bento 流行起來後才成為一種風格趨勢。
➀ 趨勢起源👇
對於曾使用過 Windows 系統的用戶來說,一定對以下圖片有深刻印象。2010 年,微軟推出 Windows Phone7 時引入 Metro 介面設計語言,這種設計語言後來也成為 2012年 Windows 8 的主要界面風格。
但真正引起 Bento 潮流的引領者是 — Apple 🍎
Apple 2020 年開始廣泛地在宣傳影片、網頁上使用 Bento Grid ,透過大小不一的圓角方塊,以及漸變和卡片大小配置…等視覺元素,展示產品特點。Bento Grid 提供了一種結構化和有序的方式呈現內容,同時也為用戶提供了清晰的視覺導引。
Apple 在近期產品中仍持續使用 Bento Grid,例如: iPhone 14 Pro Landing Page。
➁ 更多靈感來源 💡
Bento
近期流行的 Linktree ,利用 Bento Box 風格建造個人網站。
Bento Grids
專門收集 Bento Grids 風格的網站,可藉由篩選內容(Graphic design/ Web design/ Dark Mode/ Light Mode),找出參考範例。
Godly
收集 29 個最佳 Bento Grid 風格網站。
One Page Love
在一頁式網頁中,查看 Bento Style 的網頁範例。
➂ 如何構建 Bento Grid 🛠️
觀察各個優秀的作品後,歸納出以下 3 點建議:
* 均衡的比例 & 一致的間距
確保方塊之間比例均衡,並設定一致的間距,以 Figma 為例,可利用 Layout grid 規劃佈局(圖片右側),新增 Row 和 Columns 時設定一致的 Gutter 。
🤩 Figma 有 Bento 插件囉 — Bento Grid Maker
https://www.figma.com/community/plugin/1361301034817165317/bento-grid-maker
* 利用設計元素,營造層次感
為每個方塊選擇適當的元素,例如圖像、文字、icon、圖表等,排版時思索重要層級,使用色塊或漸變色填充方塊,使其更加鮮明突出,創造出視覺引導的層次感。
* 考量多元的數位設備
如果您正在設計網頁,請確保方塊之間的互動和導航是清晰和直觀的,並考量不同螢幕尺寸、設備(Desktop/Pad/Mobile…)的響應式設計。
在構建 Bento Grid 過程中,重要的是保持設計的一致性、平衡和視覺吸引力。
最後…
如何利用程式代碼實現設計畫面?程式語言不是設計師的專業,直接附上文章讓有興趣的人參考啦~
參考資料 👀
👉 Web design trend: bento box
👉 Designing A Product Landing Page ft Bento UI Style
上述 Bento 設計趨勢只是我個人的小小筆記,如果你喜歡這次內容,請拍手給與筆者小小的回饋鼓勵 👏👏👏
如果你想知道更多產品設計 / UIUX / 敏捷設計 小知識,歡迎追蹤設計丸 IG帳號 👋👋👋