导语

Bento box设计风格或Bento UI作为一种设计趋势正在被验证，它近期频繁的出现在大众视野。本文中我们将讨论Bento box设计趋势的起源和发展，并结合设计应用案例，让大家感受它的魅力，望此后的应用中，为设计师朋友带来更多灵感和启发。

一、什么是Bento box？

1.概念简述

大家对便当盒(Bento box)应该很熟悉，印象最深的是日式便当盒，看上去既精致又有食欲，格子用来区分食物，极其讲究组合的美感。Bento UI就是用户界面如同便当盒的结构，有清晰的区块划分，整齐又整体的将内容排布。

健身社区App，Purrweb UI/UX Agency

这种设计风格不仅是一个框架，它融入了极简主义和东方传统美学，将功能与美感推向一个全新的体验。它追求简单直接的解决方案，让用户能够轻松理解并操作。

企业资源规划客户端，Arounda UI/UX

2.发展的助推器

Bento UI让人很容易联想到苹果的widget，widget词典释义为"小组件"。2020年6月苹果手机推出了iOS 14正式版系统，其中讨论度最高的要数Widget。苹果强调Widget不是进入应用的另一快捷方式，而是一种快速展示用户关心的应用程序数据的信息展示方式。

大众视其为新的流量入口，各大应用抢先适配，多款以时钟、日历、天气功能的小组件应用多次轮番登上App Store应用免费榜前列。

灵动岛小组件

在知乎上，一篇关于夸赞苹果widget的帖子中，有用户调侃的评论道：看来，你对Android手机一无所知。的确，widget早在2008年的Android手机系统上就已经广泛应用了：信息类、集合类、控件类、混合类widget层出不穷。

Android系统Widget

2010年的Windows Phone 7引入Metro设计语言系统，这些都可以视为现今Bento box设计风格的灵感来源。我们作为设计师，追根溯源会为设计创意开个好头。

Windows Phone 7

二、风格解析

1.设计特征

·  打造具有视觉吸引力的层次感，结构和组织是基石

·  基于网格，轻松为各设备创建响应式布局

·  内容和功能划分清晰、轻量易用

·  简约优雅、现代感十足

随着被行业影响者们采用，不难看出它抓人眼球的原因，无非是设计思维和设计原则运用的恰到好处。

2.设计思维

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

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

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

图片来自名为Bento的产品/一款链接聚合工具

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

品牌网站设计，Andriy Yurchenko

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

科技公司网站，tubik UX

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

作者：腾讯ISUX

链接：https://www.zcool.com.cn/article/ZMTYxNjYzMg==.html

来源：站酷

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。