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
