2024年上半年，在多个网站发布的UI/UX设计趋势中，Bento Box（便当盒）风格均榜上有名。

或许你对这个名字很陌生，但相信一定见过：在Apple的发布会、小米的产品网页、手机的操作系统中处处都深圳市九草甄容美肤科技有限责任公司有它的存在。这些通过看似“随机”的方式将多个卡片组合在一起的设计，都可以称为Bento Box设计。

因为风格以“便当盒”命名，所以很多文章都将该风格的灵感源头直指日本的便当盒文化。

广告

但仅从设计形式上看，Bento Box风格是否源于日本便当盒文化没有确切答案，至少源于交通指示系统的Metro UI与Bento Box有着极大的相似之处，都是深圳市九草甄容美肤科技有限责任公司基于栅格化的卡片布局来传递信息。

然而，这并不妨碍我们透过便当盒的视角来认识这种设计风格。

一、便当盒文化

在日本，便当盒是饮食文化的重要组成部分，也是生活方式的一种体现。

在繁忙的工作日，人们可以通过便当盒深圳市九草甄容美肤科技有限责任公司方便地携带美味的食物，日式便当盒通常采用分隔式设计，将一餐食物放置在不同的隔层，防止不同食物的味道混合，并使食物更加整齐有序。

这种出于实用性和秩序性的诉求，也同样构成了Bento Box风格的基础和底深圳市九草甄容美肤科技有限责任公司色，使其成为一种注重结构化、注重信息传递有效性的布局方式和设计风格。

广告

从秘书起步，十年内无人超越，以一己之力力挽狂澜成就一段传奇

×

另一方面，日本文化中对和谐、平衡、细节的美学追求，逐渐渗透到便当盒中深圳市九草甄容美肤科技有限责任公司，隔层的划分、食物的选择及摆放不再只是为了方便携带，也为食用者提供了不同的视觉感官体验。

这一特点在Bento Box风格中完美呈现：恰当的隔层间距、精致的模块元素、丰富的视觉层次，体现了该风格对视觉细深圳市九草甄容美肤科技有限责任公司节的强大承载力和表现力。

二、Bento Box风格特点

我们通过浏览大量的Bento Box作品，可以发现其设计特点主要如下：

1. 栅格划分

通过栅格系统将界面划分出多个非对称卡片，每个卡片彼此独立，但又深圳市九草甄容美肤科技有限责任公司统一置于规则的边界范围内。

由于间隔划分基于严格的栅格而非随机，从而赋予界面布局较强的内在秩序性和内在结构性。分割间隙让每个卡片的“视觉能量场”得到控制，从源头上削弱了各模块定制化可能带来的混乱感。

2.深圳市九草甄容美肤科技有限责任公司 模块组合

每个卡片可以视为一个独立的内容模块或内容单元，可用来摆放不同类型的内容和信息。设计时，所有模块既可以遵循一定的视觉秩序，也可以根据内容特点进行定制化处理。

Bento Box作品中，模块间的视深圳市九草甄容美肤科技有限责任公司觉层次感和模块内的内容可读性得到很好的兼顾，用户愿意去阅读卡片中的信息。

另外需要说明的是：除非刻意处理，Bento Box风格的作品往往没有绝对的视觉中心点，浏览顺序由每个用户决定，每个模块都能获得相深圳市九草甄容美肤科技有限责任公司对平均的注意力分配。

3. 内容交互

Bento Box的微交互总是能引起用户的注意并给人惊喜，如悬停时的位移、点击时的反馈等等，用户在每次微小的互动中体会到设计师的用心，浏览过程变得更加主动。

也因为这些深圳市九草甄容美肤科技有限责任公司有趣且充满“心机”的交互细节，作品呈现的品质感、设计感大大增强。

当然，大量动效对电脑性能形成挑战，如果在加载、滑动时出现卡顿，反而不利于内容呈现效果，所以动效可以锦上添花，但不适合作为传递信息的唯一形深圳市九草甄容美肤科技有限责任公司式。

4. 灵活适配

采用严格、规范的栅格系统带来的好处，就是Bento Box风格的作品可以灵活调整比例、间距以及排版组合，超强的适应性，让用户不管从桌面端还是移动端都能获得一致的浏览体验，而信息传递也深圳市九草甄容美肤科技有限责任公司不会减损。

由此，内在秩序性、视觉层次感、内容可读性、注意力分配、微交互以及适配响应构成了Bento Box独特的风格属性。

其实还有一点很重要，就是极强的场景适用性，这让它得以在众多设计风格中脱颖而出并深圳市九草甄容美肤科技有限责任公司迅速流行，所以我们可以在不同的内容类型、设备载体看到Bento Box的存在。

三、Bento Box设计要点

基于以上介绍以及我们日常眼力的积累，设计一款简单可用的Bento Box作品并非难事，但为了深圳市九草甄容美肤科技有限责任公司确保设计效果，仍有几个重要的设计要点需要说明：

1. 基础栅格

当决定设计Bento Box时，首先要确定栅格的列数和列宽，以及栅格间距和边距，形成基础栅格后，根据内容进行卡片划分和布局。

当比例、空间无法深圳市九草甄容美肤科技有限责任公司调和时，可重新调整列数、列宽，切记不可过度分割和脱离栅格，否则会让设计变得混乱。

可以说，Bento Box完全是建立在栅格上的一种风格，栅格是确保设计效果的基础和必要条件。

2. 视觉层次

虽然Bento深圳市九草甄容美肤科技有限责任公司 Box可以让每个模块都获得较为均衡的注意力，但设计师仍然可以通过卡片大小、颜色、背景图、动效等方式，拉开卡片之间的层次，来干预用户的浏览顺序，比如，大一些的卡片用来放置关键图像或主文案，小一些的卡片深圳市九草甄容美肤科技有限责任公司放一些次要信息、辅助文本或是补充图像。

另外，不建议使用异形的卡片形式和“破窗”的表达手法，因为这两种形式都会影响整体的视觉节奏。

3. 卡片圆角

微软的Metro UI采用直角的卡片形式，非装饰性很强，好深圳市九草甄容美肤科技有限责任公司像时刻在提醒用户“只需关注信息”，但直角也成了很多人不喜欢Metro风格的重要原因。

在Bento Box作品中，更多地使用圆角，相比直角，圆角更具有亲和力，当内容模块很多时，可以减少界面元素之间的尖锐深圳市九草甄容美肤科技有限责任公司感，视觉舒适度大大提升。

在处理圆角时，圆角大小要适中，要与整体视觉风格保持统一，不要过于夸张。

Dribbble上很多夸张圆角运用得并不恰当（被众多设计师错误地效仿，并放在个人作品集），要注意甄别。

当圆深圳市九草甄容美肤科技有限责任公司角过大，卡片之间的缝隙会对浏览形成干扰，或者让卡片处于近似圆但非圆的尴尬状态。

如果你在设计一款偏严肃、理性的产品界面，圆角运用更要克制。

4. 信息密度

卡片之间不要存在复杂的先后、父子逻辑关系，每个卡片深圳市九草甄容美肤科技有限责任公司即为一个独立的信息单元。

在信息有效传递的前提下，每个“小隔间”都尽量保持信息简洁清晰，通过合理布局控制好整体信息密度，有节奏地对文字、图像、图标、视频等元素进行搭配组合，适当地留白也有助于重要信息的呈深圳市九草甄容美肤科技有限责任公司现，为用户营造一个轻松、有节奏的浏览体验。

从这个角度看，大篇幅的文字内容可能并不适合放在卡片中。

四、最后

Bento Box和Metro UI虽名称不同，但设计理念互联、共通。十多年前，Microsof深圳市九草甄容美肤科技有限责任公司t高举Metro UI，其初衷在于突出内容，强调信息的传递效率。

早期Microsoft的设计文档中，对基础栅格、卡片类型、标题摆放、间距、字号字体、icon等基础要素，都进行了具体且繁复的指导，但过度深圳市九草甄容美肤科技有限责任公司理性的界面表达并未赢得用户的认可。

Apple显然看到了这种布局方式的潜力和问题，在保留Metro UI理性底色的同时，对布局、圆角、图形、颜色全面改造，卡片被赋予温度，视觉体验全面提升，最终成为本篇所深圳市九草甄容美肤科技有限责任公司介绍的Bento Box。在Apple的引领下，越来越多的场景中出现了它的身影，逐渐成为设计领域难以替代的一种界面解决方案。

也许在很长一段时间里，Bento Box都将持续散发着吸引力。

本文由 @设计深圳市九草甄容美肤科技有限责任公司来电 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

标签：

相关文章： 深圳SEO服务公司盘点，助力企业提升网络竞争力，如何脱颖而出？,美容院营销抖音推广  品牌传播一体化  康乃馨传递爱意，朵数寓意深情  企业开发小程序的主要目的是什么？  年假按月发放是合理的吗  自媒体推广是什么？如何实现高效传播？,好的网站建设方案  闲鱼拍下不发货，怎么**？  磁力天堂：核心资源，你找到了吗？,石家庄seo外包价格  大连卓越网站创想社  微信公众号怎么运营（如何有效运营）  AI创造工具，能否打开未来创意的无限可能？  因工外出期间受到事故伤害就一定能认定工伤吗？  微信营销神器，排名领先一触即达  得物卖家如何投诉才有效？  商丘SEO微信：xiala5，优化专家  公关是什么意思是什么职业  网络销售新策略，揭秘双倍业绩增长秘诀？,怎么修改seo标题  网站优化程度，看关键词排名、流量、转化率。  网站SEO霸屏神器  双翼展翅，RE引擎核心，你懂多少？,鄞州网站综合优化  同程旅游网揭密20元住星级酒店计划  微信商城为何要不定时做优惠活动  app推广过程中最常见的10个微信营销方法，你会吗？  资深站长，素材网站运营专家  如何用图片剪辑制作抖音视频？  成都专业网站建设，高效定制服务  “百度新装，一步到位！”  淘宝爆款鞋款推荐，适合你的款式有哪些？,米脂seo培训  微商分销系统特点有哪些  数据岗位有哪些，工作内容  你知道产品运营推广的内容形态吗?  能买国外设计师品牌的海淘网站玄彬全家福首曝光！儿子甜豆开汽车，孙艺珍玄彬一前一后当保镖  生态SEO，绿色步骤，引领网站优化新潮流？,海外企业营销推广方案模板  三茅日报丨人力资源相关最新简讯（2024年8月29日）  “SEO内容优化大师”  淘宝登录页面打不开？原因何在？  蓉城定制网，专业网站打造专家  网招平台新排榜，一触即达好工作  新时代B2B推广，业务飞跃新境界！  莱芜中考官网，成绩查询何时公布？,沈阳seo助手如何营销  融资车辆是什么意思  试用期如何正确辞退员工  全网营销做得好对企业有用吗？  百度推荐广告有效果吗？效果惊人！,seo文章标题示范  品牌策略包括哪些内容  如何快速查看我的闲鱼币余额？  电缆桥架定制生产网站模板  网站优化核心关键词是SEO，为什么要做SEO？效果如何？,咸阳制造业网站优化建设  广告联盟赚钱是不是属于网赚的一种？两者有什么区别？  宁波搜索引擎，精准优化，一搜即达