顶级发布会都爱用的 BentoUI 设计风格，该如何应用？

近年来一种名为“BentoUI”的设计风格在设计师社区内愈发流行，无论是苹果公司的产品发布会、众多生产力工具网站，还是 Dribbble 和 Behance 等作品集网站上，都能频频发现它的身影。

推荐阅读

BentoUI 到底是怎样一种设计风格？有什么特点？又是怎么流行起来的？我们一起来看看。

一、什么是 BentoUI

BentoUI，你可能没听过这个名字，但你肯定见过类似的画面:

这些通过大大小小圆角卡片组织信息的幻灯片或网页，应用的就是近年来非常热门的设计风格 —— BentoUI。多个设计网站和博客预测的 2024 年设计趋势中，BentoUI 均榜上有名。虽然这些预测也就看个热闹，但也一定程度反映了 BentoUI 的火热程度。

Bento 的中文解释为「便当」，一种源自日本的食物收纳方法，将食物按种类精致地分装在带隔间的饭盒中，方便人们带到公司或户外享用。而以此为灵感而得名的 BentoUI，则指“以清晰的分区形式组织元素，多分区并列展示”的一种设计风格，其中的每个元素都有其目的与功能，类似便当里的各种食物，精致有序地排列。

这种多个卡片聚合的视觉风格并不是什么新鲜事物，早在 2010 年由微软提出的 MetroUI 就应用了类似的样式，但在当年此类风格的排版并没有激起太大浪花。然而近年来，苹果公司无论是为自家的 WWDC 和 Apple Events 设计的演讲幻灯片，还是官网的产品展示模块设计，以及设备端的小部件设计，无一例外都应用了 BentoUI。据闻苹果公司内部就把这些幻灯片称作「bento」。

微软 2010 推出的 MetroUI

苹果公司的 BentoUI 设计范例

苹果公司的强力站台，无疑为 BentoUI 添了一把火，越来越多的公司和设计师开始关注并将其运用到自身的设计中，从而产生了越来越多的 BentoUI 风格的作品。甚至诞生了专门收集 BentoUI 设计案例的网站，里面陈列了各种相关的图形、网站和动画类的案例。BentoUI 的火热程度可窥一斑。

BentoUI 设计案例收集网站——「bentogird」

二、BentoUI 的风格特点

通过上面的图例可以看出，BentoUI 多用于展示产品的功能、界面、数据，或是个人博客、简介、作品集等内容。简单来说，它很适合用来同时展示一大堆信息。下面结合案例详细介绍一下。

特点一：分区式布局

bentoUI 最显著的特点，就是通过清晰的分区来组织界面。繁杂的内容，经过合理的分类，再分配到按网格系统排布的卡片分区中，分区之间既独立又相互关联，且这种分区灵活多变，不单调死板。

特点二：和谐的视觉效果

由于 BentoUI 常常需要在有限的空间中安排大量的信息到不规则的分区里，因此设计师会通过合理分配各分区的面积、形状、颜色、留白，微调各分区内元素的样式、种类、排列、动态，力求使界面既能表现出信息间的层级关系，又能保持各分局之间和分区内元素的视觉均衡。

如下图，一张介绍 macbook 配置规格的幻灯片。各个分区的内容元素种类不一，有数据、图示、文案和照片。通过合理的排版和构图，既突出了重点内容和交代了元素之间的关联性，也保持了画面的平衡。很难想象同样的元素在同等面积的界面里，使用其他的排版方式会是什么效果。

特点三：友好的响应式设计

近年来，设备的种类和屏幕尺寸类型越来越多，为了使内容在不同设备上保持其完整性、功能性和美观性，界面须采取响应式设计。而 BentoUI 这种多卡片聚合式设计的基因，天然就和响应式设计相契合。随着前端技术的不断发展，设计师在了解相关适配法则的前提下，只需花费很少的时间，就能高效地完成 BentoUI 的响应式设计适配。

BentoUI 风格的页面在不同屏幕宽度下的效果

特点四：丰富的微交互

用户在网站或 app 中进行的每一个操作，都应该有合理的反馈。BentoUI“乐高积木式”的卡片拼接效果，则为设计师在进行操作反馈的设计时留下很多想象的空间。

案例一，下图是 AI 生成设计工具「Diagram」，设计师为其页面设计了丰富的 hover 动画，虽然只是最常见的鼠标悬浮动画，但与 BentoUI 分区的结合，确实能激起用户的探索欲望，增加页面的趣味性。

案例二，下图是名为「Bento」的网站的一个模块设计页。此网站整体应用 BentoUI 设计风格，在这个模块中，设计师设置了很多反馈小动画，方便用户凭直觉去完成页面交互。首先是方块状的模块，暗示用户可以尝试拖拽；而伴随用户拖拽动作出现的位置提示灰块和抖动等反馈动画，则进一步加强了用户反馈。

「bento」是一个个人信息集合生成网站，很多设计师用它来制作自己的主页

类似的微交互动画当然并非越多越好，也不是单纯为了有趣，而是应该从使用场景的特征出发，按需合理地添加。

特点五：圆角

最后这个特点显得有些无厘头，作者看完那么多 BentoUI 的设计案例后，发现没有一个案例使用直角卡片。也许仅仅是设计师的默契，也许是比起冰冷的直角卡片，温润的圆角卡片观感上令用户更舒适，更有安全感吧。

三、BentoUI 的应用

BentoUI 具有信息展示全面、传达效率高的优点。将不同的功能和信息按信息逻辑分配在各个分区中，有效提高信息的可读性，用户可以根据分区摘要信息快速寻找内容。而且它的页面形式感十分强烈，视觉冲击力充足，能给人留下深刻的印象，勾起用户兴趣。因此，它很适合应用在展示商品信息、个人作品集、工具类 UI 的仪表盘等需要同时展示同类信息的设计场景。

另一方面，即使并非上述这种处理繁杂信息的设计需求，BentoUI 天然适配响应式设计的基因和丰富的微交互空间也是设计师不错的选择，既能提高工作效率，保证用户在不同设备上都能获得较一致的用户体验，也能为页面增添色彩，为用户带来惊喜和满足感。

然而，BentoUI 也存在比较明显的短板，那就是视觉动线模糊。相比常见的列表布局，信息密集且平铺的 BentoUI，无论采用何种设计方法，都很难为用户梳理出一条清晰的视觉动线。聚合式的卡片结构，始终会使用户的视觉焦点被分散。在信息并列展示的页面中，这个问题或许并不明显，但如果是遇到有明显阅读顺序或者需要强调步骤的设计场景，BentoUI 明显完成不了任务。

对比常规布局，BentoUI 的视觉动线确实难以预估

另外，需要避免套用 BentoUI。我们是根据内容的特点和场景需求，来决策使用何种页面布局。而不是先决定了要使用此类风格，再强行去把内容拆分、套进一个个格子里，陷入“形式大于内容”的陷阱。

小结与思考

BentoUI 清晰的结构与直观的视觉风格相结合，满足了用户对界面清晰度的要求，也能在并列展示大量信息的场景中出色发挥；凭借其天生的适应性，BentoUI 满足了对在各种设备上无缝运行的相应式设计需求；还有其乐高积木式的拼接风格，也为设计师进行创新有趣的微交互留下广阔空间。

同时，其局限性也较为明显，应用场景相对单一，无法为用户提供清晰明确的视觉动线，甚至会因为过强的形式限制设计师的创意。

当我们日常在强调清晰、简约、一致的时候，BentoUI 似乎带着一点叛逆的朋克味道，给人一种反其道而行之的感觉。但它似乎又有神奇的魔法，当繁杂的内容分发到一个个的分区后，再经过设计师的细致调整，结果能给人惊喜。

无论如何，BentoUI 确实是一种流行中的热门设计风格，但流行的设计趋势并无意义。我们日常说“形式服从功能，形式服务内容。”所以最终我们还是需要回到设计任务本身，关键还是看工具是否能更好地为我所用，表我所想。没有好坏，只有合适。

最后，当你面临合适的设计场景时，不妨考虑一下 BentoUI！

参考文章：

1. 何为 Bento 式布局，怎么生产力工具网站都在用？
   https://sspai.com/post/84628?utm_source=wechat&utm_medium=social
2. 1 分钟带你了解 Bento box 设计趋势https://www.woshipm.com/pd/5954726.html
3. Bento Style & Compartmentalisation in UI Design，https://medium.muz.li/bento-style-compartmentalisation-in-ui-design-a0f82557a055
4. Bento UI: Design Examples, Trend Explanation, and Creative Tips，https://blog.depositphotos.com/bento-ui.html

欢迎关注作者微信公众号：「We-Design」