本文作者：Micoxx
转载地址：https://sspai.com/post/84628
导语
接近年底，各种设计趋势前瞻总结只会迟到是不会缺席，但这些总结一向也没什么权威性，看个新鲜罢了，也没想到 bento 风设计竟也能被算作 2024 年网页设计的一大趋势。
印象中这股风可刮了有段时日了，今天咱就来说道说道。
风格源起
维基百科上讲「bento」就对应日语中「弁当」，主要指代日式便当，其形式与功能兼顾的盒内格子布局就是 bento 式设计的灵感所在。
摄影图源：https://japanobjects.com/features/bento-box
若往前追溯，「弁当」其实源于我国南宋的俗语「便当」，就是方便的意思。到今天我们吃盒饭也不过是图省事，但在日本就演变成了一种精致饮食，尤其寿司便当，花里胡哨很是吸引美食荒漠之地人们的眼球。单从这个角度来看，bento 能成为国外产品设计的灵感缪斯之一也不算意外。
但这种设计本身并没有国外博主们宣传的那么神乎，其原理就是基于网格来组织 UI 布局以有效传达信息，说白了就是多了种 card 布局思路。至于 card 上的内容要怎么设计？那还是取决于设计需求本身，没有特定的一种视觉定式，设计过程也不需要什么神乎其技，哪里就生造出一堆设计原则来？
所以比起空谈视觉风格，我觉得好好研究下其布局逻辑更有价值一些。
流行轨迹
这种多 card 平铺式布局没什么新鲜的，在 Microsoft 早期的设计语言 Metro UI 已可窥见一二，只不过其灵感不是源于 bento，而是上世纪 50 年代兴起的 Swiss Style（瑞士风格/国际印刷风格）。
Swiss Style 的视觉特点有：非对称、留白多、无衬线字体、极简主义等，但其最突出的特点就是讲究运用网格系统排版，这种风格在设计界的影响并不仅限于平面设计领域，也对后面网页设计的发展起了关键性作用。
往近了说，Apple 公司无论是每年为 WWDC 和 Apple Events 设计的摘要幻灯片，还是产品官网部分产品展示模块设计，以及设备端桌面小部件的组织形式，都是 bento 式布局的最佳实践。
但在网页端，Linear、Diagram 这些生产力工具网站才是真正引领风向的弄潮儿，以及我以前介绍过的一个 link-in-bio 工具，其产品名甚至就叫做「Bento」。
Bento 式布局怎么就这么适配生产力工具网页设计？总不见得大家都是跟风？这就是本文真正想要探讨的议题。
布局原理
Form follows the function。——Louis Sullivan
「形式服从功能」是建筑大师路易斯·沙利文提出的著名设计原则，它不是一句强调从属关系的教条规训，而是意指要摒弃空洞的形式。
形式要体现功能，要服务好功能。它也是 GUI 进入扁平化时代后，界面设计所一贯遵循的基本原则之一。但时下，随着轻拟物以及 3D 风格的再度流行，插画及动画在产品层面的滥用，所谓「形式服从功能」则越来越像一句空洞的口号。
现在刮起的这阵 bento 设计风，其布局形式感又极强，等于是把所有的 card 都平铺在一个 bento box 里，没有一条明显的视觉动线引导，目之所及皆为重点。
那采用这样的设计形式能服务好功能吗？不急着回答，我们先来尝试拆解一下这种布局的设计原理。
假如说我们要在一个 1440X900 像素的框架内添加 bento 式布局，那首先要有一个下图这样的基础网格：
这个网格如何得出的？我们可以基于 4 点网格，把列数和行数皆设为 8（也可以不一致），间隔均设置为 20 像素，列宽和行宽不必设定，在框架内弹性自适应就可以了。
那么纵向网格如下图：
横向网格如下图：
再把横、纵向两套网格交叠就可以得到一开始的基础网格，接下来，你就可以根据需求随意设定 bento 式布局了。
就是这么简单，而且网格参数的设定完全取决于你设计需求的复杂度，布局组合的自由度也很大。
但是不是一定要基于网格来设计布局呢？
我们设计普通应用的时候，拿手机移动端来举例，一般定好页边距，以一个 card 为基准不断复制，以单/双列来布局基本就够用了，做不了太复杂的布局，设计师大多也都没有运用网格的习惯。这样确实不会有什么大问题，但落地时免不了因为像素一二之差和开发不断扯皮，设计师走差时抱怨最多的一句话就是「这个开发是不是根本不看我的设计稿标注啊？」。
问题不在于谁偷没偷懒，而是设计思维与开发思维的不一致。
网页设计也是同样，早期我们做视频门户网站，没有网格思路也不考虑自适应布局，都是定死单张 card 的长宽比再不断复制，不同响应式下就只会有 card 显示数量的变化，落地效果死板且多套尺寸设计稿维护起来非常低效，每次改版都等于在模拟搬砖。只不过网页前端实现时没有移动端那么复杂，切图也就一套，其实设计还原度都大差不差。
整体来说，在设计层面不运用网格也不会有什么大问题，这么多年都是这么过来的。只不过到了 bento 设计这里，思路就得变一变，如果不基于网格规划布局，不但设计层面难以把控好节奏，开发落地也将是灾难级别。
好，基础设计原理已知，下一步我们就直奔现实应用案例，来仔细体验并分析到底 bento 式布局在生产力工具网站中是如何应用的，以及它能否服务好功能，并有效发挥其价值。
用例分析
任何设计形式都是为了承载功能，传达信息。我们不能空讲概念、硬套风格，设计要落地，着眼点也要落地。看再多的酷炫飞机稿也不如切实地去体验一下落地产品，因为设计不是单机任务，好的设计也不是自嗨产物。
所以在体验了一系列生产力工具网站后，我选出了几个比较有代表性的案例，梳理出了 bento 式布局的三种常见应用：
- 无交互纯展示
- 微交互纯展示
- 可操作功能区
下面我们就一个一个展开来看：
无交互纯展示
产品设计成为行业标杆的好处就是，你不会轻易质疑它某个设计的先创性，做到这一步尤其难，但 Linear 就是这样的存在。
Linear 在国外的生产力工具中一直是极致设计的代表，其官网设计就是这个领域的流行方向标，其实何必费心去追逐什么设计趋势，没事打开 Linear 的官网看看就差不多了。
静态展示
我们以 Linear 的 Asks 功能页面的「比以往更快地响应需求」模块为例，先来看一下其布局：
Linear 官网的内容区域（版心）最大宽度是 1200 像素。我们就分析下该模块在最大宽度下的布局规格，首先会看到它采用了 12 列网格，间距固定设置在 24 像素，图例中的模块高度是 832 像素（网页设计对高度一般不设限，定多少完全取决于你的设计需求）。
该模块被分割成 4 个 card 来阐明功能优势，功能优势之间没有先后顺序，不存在视觉优先级，而且其设计简约直观，内容用一屏即可交代清楚，节省滚动操作次数的同时也避免了用户获取信息不连贯的风险。
模块为纯静态展示，没有滚动视差动画，没有 hover 动效，是最基本的 bento 式布局应用。
不过 Linear 这里有一点特殊设计，就是单张 card 里的图像可以是多层。注意看下面动图内右上的 card，当拖拽网页视窗宽度变化时，图像上的（伪）浮层并未跟随缩进，而是独自平移。
这也就说明，虽然 Linear 这里是静态展示，但不代表每个 card 都必须要配置整张的静态图才行。而且每个 card 内又都可以单独配置 CSS 样式，示例中这个模块有 4 个 card，那么在前端代码层面就等于是封装了 4 种 box model，再运用 CSS grid layout 以及 flexbox，即可实现 Linear 这种 bento 布局的响应式网页。
所以，这个框架就是一个便当盒，一旦我们定好了今日菜单，就可以先在便当盒里放入一些格子以承载食物，接下来每个格子里的食物就可以随意归置了，而且这个盒子的深度没有限制，一个格子里可以堆好几层食物，设计灵活度非常之高（但要有所取舍，考虑网页性能以及开发的工作量）。
Linear 这个 bento 式布局案例从设计到落地都很用心，响应式主流尺寸都覆盖到位，体验也很好。但有些网站的 bento 模块落地就不甚完美，比如 Framer 和 CREATE，部分视窗尺寸下会出现模块位移跨度过大或者内容拥挤重叠等问题。
Framer
CREATE
总之，落地效果的误差也是要考量进前期设计方案的，除非自己兼职前端，不然着手设计前就应该跟开发同学沟通到位。
所谓沟通到位不等于只要提供一个参考链接，对方回复说「能做」你就大可放手去设计了，这种大概率最终落地效果都跟你想象的不一样。要问 TA 实现逻辑，如果对方对这种问题不耐烦或者完全解答不清楚，那你也就不要奢求什么落地效果了。当然，如果 TA 回复「做不了」，你也别轻易放弃，问清楚为什么做不了？如果是排期的问题那就等下个排期，如果 TA 说是技术问题，那就再多方求证（因为对 TA 来说可能是问题，也许换一个人就不一定了），总之，不能懵懵懂懂的开始，也最好不要稀里糊涂就放弃。
动态展示
Bento 式布局的动态展示一般就是设置滚动视差动画或者常态播放循环动画，包括一些简单的 hover 微动效。
依旧涉及不到交互层面，采用静态还是动态展示，完全取决于该模块要体现的内容，比如 LottieFiles 官网「使用 LottieFiles 平台进行运动协作」模块。
因为模块本身就是介绍动画制作工具，采用动态展示就恰如其分，通过动态图来演示自己的软件功能也非常直观。只不过不建议让整个 bento 式布局上所有的 card 都动起来，那到时何止是一个眼花缭乱。
LottieFiles 这个模块也是分割成了 4 个 card，而且有 3 个都在循环播放动画，但信息传达依旧简约。因为首先它用不同配色给 card 做了明显区分，其次动画部分留白较多，有次第播放顺序不说，且动画复杂程度也分主次，整体观感上不会给人留下混乱印象。
网页实现上，LottieFiles 采用了多套网格系统，网页宽度大于 1536 像素时，使用的是 5 列网格，小于等于这个区间就全部应用了 4 列网格，card 也重新布局成规矩的四宫格，网页宽度再缩小到移动端尺寸时，card 就是单列布局了。
设计响应式网页是可以采用多个网格系统的，无非就是输出多套尺寸设计方案。听到过一些抵触运用网格的声音，比如「网格系统死板，限制创意发挥」，但其实它在合理发挥架构支撑作用的同时也具备很大的自由度，死板的从来不是原理，是运用它的思路。
微交互纯展示
可交互 bento 设计算是进阶版，这方面设计比较出彩的要属 Diagram 的官网，这家公司主要开发基于生成 AI 的设计工具，其定位是「Design tools from the future.」，所以其官网设计充满未来感，只是不似 web3 网站风那般极端。
官网用 bento 式布局来展示其开发的各种设计工具，其中每一个 card 都可交互，预览设计直接模拟成工具界面，让你无需进入到工具，边预览边体验其操作。
看起来细节挺多，但大体上就是三种交互方式：
Hover 交互
这种交互在网页端太过普遍了，其主要功能有两种，一是提醒用户该元素可点击，再就是作为信息展示辅助，同时给页面增加些灵动感。
跟手交互
也是主要体现在 Magician 这款 Figma 插件的介绍模块，该模块最突出的就是有几个 card 上带有魔术棒跟手（光标）交互，创意表现为挥一挥魔术棒即刻变出丰富内容，指代该款插件是可以用 AI 提示词生成图片、图标，占位文本行等功能。
但该模块一共分割了 8 个 card，目前来看是最复杂的一款 bento 式布局，由于太复杂所以不适合设计成 Linear 那种内容区域宽高跟随网页宽度自适应变化。
它的规则是当网页宽度大于 992 像素之后，内容区域（版心）就保持在 1200 像素的定宽（弊端就是当网页宽度小于 1200 像素，内容区域就难免显示不全）；若小于或等于 992 像素，网格就由四列变为两列；在手机移动端网页宽度下，card 基本都变为是单列布局，内容区域的宽度自然也会跟着变化。
点击交互
上面讲的模块本身也包括点击和 hover 交互，只是跟手交互才是重点。然后 Genius 工具这个介绍模块就完全都是点击交互，看起来好像就是在操作页面，但实际上是一套伪操作，不触发任何真实功能。
这个模块有意思的是，当你点击某个 card 中的按钮，随即播放完动画可能还会出现新的按钮，你可以继续点击，就像在真实的操作页面。动画播放结束后会停在当前帧，点击 card 上的恢复图标，回退到 card 初始画面时还伴有弹性缓出退场动效，细节到位。
Diagram 算是把 bento 式布局玩出了花，比较充分利用并发挥出了这种布局设计的优势，对于工具产品来说，最好的产品宣传图就是工具界面本身。
但它这种设计形式虽然很聪明很直观，却也很不好设计，因为要做到这种水平，不能单纯放几张图了事，也不是添加了循环播放动画就可以了，要有很多设计巧思在里面，等于是把展示模块当成了一个产品来设计，考验的是设计师的综合能力。
另一方面，前面 Linear 的示例也提到过要注意功耗问题，打开 Diagram 官网试用了十分钟，然后我去煮了壶热水的功夫，回来设备 CPU 显示温度就飙到六十几度，平时也就三十几度的样子，嗯……虽然跟设备老化也有关，但交互动效确实不易过多，好钢还是考虑用在刀刃上。
可操作功能区
上面讲的 bento 式布局都是做信息展示用，网格运用比较灵活，card 组合也可以有各种变化，几乎可以说没有什么规范限制。
可一旦涉及到真正的功能性操作，就需要严格制定并遵循 UI 规范了。
前文提到我写 文章 专门介绍过的 Bento 这款 link-in-bio 工具，这款产品提供了可操作的定制化 bento 式布局架构，允许用户零代码随意定制自己的电子主页。其产品细节有很多巧思，微交互做得也很优秀，国外不少设计师用它制作个站，也催化了 bento 式布局在设计圈的流行。但其不久前被 Linktree 收购，后续走向不甚明了，有点可惜。
对产品幕后感兴趣可以去读下那篇文章，这里不多介绍了，还是直接分析布局用例。
从上图我们可以看到，该产品的 bento 式布局是应用在右侧的核心功能区，也就是链接内容展示区域，其中每个 card 都是一个小部件。
它的功能区网格系统并非像前文那些用例，固定列数和间距但不限制列宽和行宽，而是设置成了定宽：桌面端是 820 像素，移动端是 380 像素，网格系统为 8 行 8 列，间距固定在 40 像素，以单元格尺寸为基准，按倍数扩展出了五种固定部件尺寸，以供用户添加和选择。
如果细拆解一下它的网格布局原理，就如下图所示：
就等于说产品给用户提供了五种基础的积木块，数量不限，你可以随意拿来拼装自己的「乐高便当」，而这些基础积木块又都是由一个个等大的正方块拼接而成。
这五种部件尺寸基本就满足了承载功能所需，不管是标题、文本段、图片、视频、链接预览等，而网页纵向上也没有部件数量添加限制，用户还可以添加通栏标题栏以区隔归类「子便当」。
另外像 Apple 设备的桌面小部件一样，Bento app 这里的部件之间也是可以拖拽换位的，而且交互细节做得很好，我们可以看一下动图：
部件被拖拽时模拟了物理晃动，晃动幅度还会根据拖拽移动幅度变化，拖动到任何区域，该区域原部件都会主动「让位」，所有动效基本都添加缓动，归位后都有轻微回弹动效。在这种细节上用心的结果就是体验真实流畅、自然灵动，会给用户一种自己有被尊重的感觉。
当然这些交互设计也不是纯靠设计师的灵感乍现，因为有了前面的合理布局，有了扎实的交互逻辑，交互方式和动效没有脱离出 bento 式布局框架，一切相辅相成，才会给用户以行云流水般的操作体验。这款应用本身还有很多的产品细节和交互亮点，感兴趣可以去官网自行体验，这里就不过多展开了。
现在我们回到前面提出的问题「bento 式布局可以服务好功能吗？」，通过对以上几款优秀用例的分析，我们完全可以给出一个肯定的答案。
但话又说回来，任何形式创意，做好了做到位，不都可以服务好功能吗？问题不在形式本身，还是看你怎么利用。
优势总结
到这里，首先我们可以明确，bento 式布局在生产力工具网站上应用确实更为合适，所以它才会在此类网站上流行。
其优势也很多，比如：
- 形式感强，视觉冲击力足
- 展示全面，有效传达信息
- 结构扎实，突出交互质感
- 网格灵活，布局随意拓展
- 易于实现，网页落地方便
- 逻辑严谨，体现专业水准
但整体来看，该布局的应用还是以展示信息为主，想承载核心功能操作的话，应用场景少且非常考验创新能力，而且其缺点也很明显。
毕竟不管你如何分配视觉元素占比，采用何种原则手段，配色一致也好，留白取舍也好，动静结合也罢，都没有办法给这样的布局梳理一条清晰的视觉动线。
单就说这一堆 card 平铺在一起，视觉焦点就注定会分散个七七八八。至少这些 card 的信息权重是相对平级的，才有可能采用 bento 式布局把它们组织在一起。如果模块所承载功能需要有明显的阅读顺序或强调步骤，那么这种布局就不适配。
可就算功能适配，你拿到的 PRD 里又是否有那么多有效内容可以来填满 bento 式布局？总不能内容不够就形式来凑。
所以你看，设计趋势这种东西水分也很大的，若不仔细求证，看起来似乎这风已经刮得那么大，你竟还没赶上趟，岂不落于人后？但事实上，流行的未必就是普适的，不赶趟就不赶趟了，细究起来，不适合你的东西，错过了又有什么可惜？
至此，我们已经理解为什么 bento 式布局可以在生产力工具网站上流行了，而这种布局也确实很适合用来展示工具产品的功能、界面、数据、性能等内容。当然数码产品网站也很适配，看看 Apple 或者 Google 的商品官网对吧，当然也并不只局限于在这些网站和平台应用，但那些就不在本文的讨论范围内了。
就这样愉快的结束研究分析部分吧！接下来进入保留节目——动手环节。
实操练习
我们已经了解了什么是 bento 式布局，理解了其原理，也看过了最佳实践，那么问题来了：这种布局该如何制作，设计思路是怎样的？
唯有实践出真知，我们就干脆从头开始做一个可交互的 bento 式布局网页，这里需要用到的设计工具是 Figma 和 Framer。
整体制作流程如下：
确定尺寸——添加网格——设计布局——设计交互——添加变体——添加交互——生成网页。
但首先我们注意不要陷入一个误区，那就是一上来先拉个网格然后就开始拉布局，那必然会限制住自己的创意发挥。最好先从草图构思开始，当心中有了大概布局思路了，再去网格系统里落实。
Figma 内完成设计
第一步：确定好网页宽度，这个就随意，我们可以把宽度设置为 1400 像素，这里不考虑做响应式，就直接把版心固定在 1200 像素即可。
因为后面我们要给部分 card 添加 hover 时的扩展变体，所以 bento 模块的宽高我们都设为固定值。
第二步：设置网格系统，选中 frame，直接在右侧属性栏添加 layout grid，先添加纵向网格，点选 colums 属性，列数（count）设为 10，间距（gutter） 设为 16 像素，列宽弹性适应，其他参数默认就好不用管；
再新建一个 frame，给它添加横向网格，点选 rows 属性即可，行数设为 12，其他参数和纵向网格一致。
这里要特别强调一下，参数的设定取决于你心中所规划的布局，不要唯参数论，那样做界面设计属于走火入魔。
最后，把横向网格也拖进来，让两个网格重叠，边缘要对齐。
第三步：添加矩形 card 拉布局，全看自己的创意发挥，只是要记住，card 的左右边缘一定是跟列宽的左右边缘对齐，不要去对齐间距的边缘，同理，上下边缘对齐也是一样逻辑。
第四步：到这里基本布局就做好了，后面就可以开始进行你的视觉加工了。然后每一个 card 都要单独创建 frame 并且命名编号（如果想要做响应式网页，那么每个 card 还需要做成 auto layout）。
第五步：设计交互效果，为了方便后面在 Framer 里制作，我们在 Figma 里就把单张 card 交互后的样式设计完。
其实就等于给模块加了变体，有几个 card 需要有交互变化，模块就有几种变体。但我们不在 Figma 里做交互原型，所以设计完还是要把变体图层并回原模块并隐藏。
第六步：导出设计图到 Framer，先全选要导出的页面，再点选 Figma to HTML with Framer 插件，等待复制完成，然后在 Framer 文件里直接粘贴就可以了。
Framer 里实现网页
到这里有没有跟上呢？接下来每一步都很关键的，可不要走神。
第一步：创建新项目，网页宽度改为 1400 像素，把前面在 Figma 复制的内容贴进来，然后把我们 bento 模块创建为组件（⌥ + ⌘ + K）。
第二步：添加变体，记住整个过程中不需要去动主变体（primary）内元素，前面也讲了，每个 card 的拓展交互都是一种变体，我这里就给其中 3 张 card 添加交互，所以就添加 3 个变体即可。
调整变体时，你可以提前算好 card 扩展后的尺寸，然后直接在属性栏修改参数，也可以把已经隐藏的前面在 Figma 里做的 card 变体图层临时打开作为参照，再去调整原 card 尺寸以对齐，card 上的元素如果需要位移，不可直接拖拽，不然会产生错位，一边预览一边在属性栏调整参数最为稳妥。
第三步：添加交互，这里我设计的是鼠标 hover 交互，一共两个层次：
- 光标移入 mouse enter
- 光标移开 mouse leave
光标移入：
我们要在主变体（primary）里选中需要添加交互的 card （注意要选中整个 card 的 frame 图层，不要选到单个元素图层），添加 new interaction，选择 mouse enter，然后选择要关联的变体。
有几个 card 需要添加交互，就继续重复以上步骤即可。
光标移开：
合理的交互行为一定是有始有终的，当光标悬浮在 card 上时，card 即刻发生变化，待光标移开时，card 就应该恢复原状。
所以这一步的设置，我们正好反过来，给 card 变体添加 new interaction，选择 mouse leave，然后关联变体选为主变体（primary）。
还是一样重复步骤即可。
第四步：回到主页，可以先预览一下，没有问题的话就可以点击发布按钮生成网页了。
可自行体验下 演示生成的网页，另外，这是本次 Framer 设计源文件，网页端登录即可查看编辑。
好了，至此整个流程走完了，bneto 式布局的制作思路就是如此这般。理解了原理，梳理好了思路，剩下就是发挥你的创造力了。
如果你需要创作灵感，BentoGrids、Apple Summary Slides、Best bento grid websites 这些网站专门收集 bento 式设计，内容丰富，可自行查看。
其实如果再要进阶一些，还可以做成响应式网页，比如实现 Linear 那种效果，只是需要花点时间。思路就是先把 bento 布局中的每个 card 都设置成 auto layout，然后 card 内每个元素都需要设置好约束规则以及跟随状态，再在 Framer 里添加几个 breakpoint，细调参数，属于慢工磨细活，但有时间精力的话，去拓展拓展也会乐在其中。
最后
说回网页设计趋势，国内团队尤其大厂特别在意这些东西，一个人当八个人用忙到团团转还没事非要你找个什么趋势风格做个 PPT 来讲上那么一讲，所谓「团队交流、内部分享」，而且「了解设计趋势」这一项也是设计招聘要求中的钉子户。
但，了解它要干嘛？
设计风格千千万，每年都在疯狂变，如果出来一种我们就跟风一种，也不管自己是什么产品调性是什么功能逻辑，硬把风格往产品头上套，那么设计同质化最终的结果就是——没有设计。总之，没必要太过迷信所谓设计趋势，趋势难免务虚，而做产品设计务实些总归更重要。
怎么算务虚？比如争论 bento 式设计是否必须用圆角就是务虚。
怎么才务实？假如下次需求方又抛个截图给你说「这次需求咱们也要这种风格哈！」——这时你先不忙满口答应，而是先缓缓打出一句「噢，那咱们这次的需求目的是啥？」，这是务实。当然最终结果可能是对方依旧讲不清楚需求目的（别问我为什么知道），而你也仍旧必须照搬风格（问就是人间常态），但至少，我们仍有表明态度的自由……你说，是吧？
独创性正是那些没有独创性的人感到没有用处的东西之一。——约翰·穆勒《论自由》
【END】
