引言：日本人把午餐装进便当盒时，其实在做一件设计师也在做的事——在有限的空间里，让每样东西都恰到好处。隔层分隔、大小各异、色彩丰富、一目了然。这套逻辑被移植到数字界面后，演变成了近两年最火的设计风格之一：Bento UI。苹果用它做发布会，Linear 用它做产品，无数独立设计师用它做个人主页。它的核心不是圆角卡片本身，而是一种信息组织哲学——不强迫用户按顺序阅读，而是让所有内容同时可见，由用户自己决定先看哪块。
01 Apple Events Design by：Apple人机界面设计团队 苹果是 Bento UI 风格最核心的推动者，WWDC 和 Apple Events 的演讲幻灯片内部代号就叫「bento」。其设计逻辑非常明确——把繁杂信息装进圆角卡片，让每一页都像一份精致的便当盒。 苹果的渐变基因深入骨髓，从早期彩虹 Logo 就能看到。发布会幻灯片中大量使用同色系或相邻色系的渐变过渡（如蓝色→紫色→粉色），过渡极其自然，不会出现色阶断裂。每张幻灯片上的信息被拆分成大小不一的圆角矩形卡片，卡片之间留有充足间距（呼吸感），边框和背景色提供清晰的视觉边界，用户一眼就能定位所需信息。这是 Keynote 独有的页面切换动画，让卡片在页面之间丝滑位移，比传统 PPT 的淡入淡出高级得多。2024 年 WWDC 上大量使用此效果，让功能演示像电影一样流畅。使用 San Francisco 字体，图标趋向几何化、抽象化，用色彩和尺寸区分层级，而非装饰性元素。 这种风格后来直接渗透到 Apple 官网的产品页面——iPhone、Apple Watch、Vision Pro 的功能展示区，全部是 Bento 卡片布局。 Diagram（diagram.com） Design by：Diagram设计团队 03 Design by：Iconwerk团队 Iconwerk 是一个专门展示图标设计作品的网站，它用 Bento UI 解决了一个经典难题——如何让大量图标有序呈。 Iconwerk 证明了 Bento UI 在作品集展示场景中的强大适配性——当你有大量同类内容需要展示时，Bento 是最高效的布局方案。
02
Diagram 是一款 AI 生成设计工具，它的官网是 「Bento UI + 微交互」的最佳组合示范。
版权声明：【除原创作品外，本平台所使用的文章、图片、视频及音乐属于原权利人所有，因客观原因，或会存在不当使用的情况，如，部分文章或文章部分引用内容未能及时与原作者取得联系，或作者名称及原始出处标注错误等情况，非恶意侵犯原权利人相关权益，敬请相关权利人谅解并与我们联系及时处理，共同维护良好的网络创作环境，联系邮箱：603971995@qq.com】
