大家对便当盒(Bento box)应该很熟悉，印象最深的是日式便当盒，看上去既精致又有食欲，格子用来区分食物，极其讲究组合的美感。Bento UI 就是用户界面如同便当盒的结构，有清晰的区块划分，整齐又整体的将内容排布。Bento UI 让人很容易联想到苹果的 widget，widget 词典释义为"小组件"。2020 年 6 月苹果手机推出了 iOS 14 正式版系统，其中讨论度最高的要数 Widget。苹果强调 Widget 不是进入应用的另一快捷方式，而是一种快速展示用户关心的应用程序数据的信息展示方式。大众视其为新的流量入口，各大应用抢先适配，多款以时钟、日历、天气功能的小组件应用多次轮番登上 App Store 应用免费榜前列。

iOS 17 Bento UI风格界面实例

Bento UI的设计结构

风格解析

1. 设计特征

打造具有视觉吸引力的层次感，结构和组织是基石 基于网格，轻松为各设备创建响应式布局 内容和功能划分清晰、轻量易用 简约优雅、现代感十足 随着被行业影响者们采用，不难看出它抓人眼球的原因，无非是设计思维和设计原则运用的恰到好处。

2. 设计思维

① 基于便当盒网格布局的设计思维，让用户更专注于每个 Box 里的信息呈现。Bento UI 的设计美学中，核心元素是 Box，你也可以称它为“卡片”、“组件”、“单位”…

任务管理器应用程序，Dmitry Lauretsky

② Bento UI 可以在不同尺寸的设备上，根据空间进行自适应调整，根据网格规则，在多端可以提供一致的用户体验。

Bento 的产品/一款链接聚合工具

③ 有组织性的对特定内容或功能进行分化，简约且优雅。

品牌网站设计，Andriy Yurchenko

Bento UI 会给人很自我的感觉，它的每个卡片间都有清晰的边界，使内容更加突出，用户能直观的判断出卡片类型及其功能，方便信息捕捉。

苹果连续两年的新闻发布会幻灯片，均使用了 Bento UI 来凸显产品的每个特性信息。

2023 年苹果发布会-Apple Watch Ultra

3. 设计原则

① 减少干扰：使用简单有效的设计元素

当对卡片进行操作时，按钮、开关、点赞层作为重要的操作引导元素，无论任何形状，在这个紧凑的空间内，定会得到用户一定的注意力。

② 重视反馈：微交互加入必要环节

在使用中，被反馈是用户最需要的，也是最基本的交互设计规则之一。反馈动效并非越突出越好、越多越好，也不单纯是为了有趣，要根据使用场景的特征，合理的添加。

Bento box 的食用须知

1. 克制的艺术

漂亮的日式便当盒最大的特征是食材丰富、食物组合极具形式美感。Bento UI 的卡片类型多样，需要仔细处理和平衡，避免因信息密集导致的阅读压力问题。美感与口感的权衡，这是专属于设计师的克制艺术。

2. 创意的限制

白玉微瑕，Bento UI 也并非完美。在严格的栅格系统上运行，每个单元是一个规矩的矩形，这种严格的布局让异型、破窗等不规则的创新设计很难融入。另外，圆角也是 Bento Box 设计美学的关键。

3. 为你推荐

① Bento grids

如果你渴望更多灵感可以去 bento grids 看看，上面集合了丰富的 Bento UI 应用程序的创意案例： https://bentogrids.com/

② Chronicle

它是一款演示文稿制作工具，官网运用了 bento UI 的设计： https://chroniclehq.com

③ Bento

强烈推荐一款比较典型的链接聚合工具网站，使用过程中你会感受到设计的细腻： https://bento.me

④ Nev 的个人网站

一个来自爱尔兰设计师 Nev 的个人网站和 Benro 的设计有异曲同工之处，当你想设计自己的网站时，不妨作为参考： https://nevflynn.com/