Card 布局没那么神！比起视觉风格，研究布局逻辑更有价值？

时间：2025-10-05作者：admin分类：排版与出版物设计浏览：1评论：0

这种设计其实并不像国外博主们吹嘘的那么神奇，其核心思想是借助网格系统来安排界面元素，目的是让信息传递更清晰，本质上只是提供了一种新的卡片式布局方法。至于卡片里具体要放什么内容，完全由设计目标决定，并没有什么固定的视觉模式，整个设计流程也不需要什么高深莫测的技巧，怎么凭空编造出一套设计规范来？

因此,与其空谈视觉设计,不如深入探究其结构安排,这样更有意义。

▍流行轨迹

这种多卡片并排的排版方式并不新颖，在微软早期的 Metro UI 设计中就能找到相似之处，其设计思路并非来自便当风格，而是源自五十年代开始流行的瑞士风格，也就是国际印刷风格。

瑞士风格在视觉表现上具备诸多特征，例如布局不对称、画面简洁、文字无衬线、追求极简等，不过这种风格最为显著的特征在于其注重网格系统的运用，这种设计理念对平面设计领域产生了深远影响，并且对后续网页设计的发展也起到了至关重要的作用。

Apple 公司在多个方面都体现了 bento 式布局的运用，例如为 WWDC 和 Apple Events 设计的摘要幻灯片，还有产品官网部分产品展示模块的设计，以及设备端桌面小部件的组织方式，都堪称该布局手法的典范。

在电脑浏览时，Linear 和 Diagram 这类效率应用平台才是真正的前沿代表，还有我之前提过的那个 link-in-bio 工具，它的产品名称直接就是叫「Bento」。

Bento式布局为何如此契合生产力工具网页设计？难道人们都是盲目跟风吗？这确实是本文需要深入讨论的核心问题。

▍布局原理

形式源于功用，此乃路易斯·沙利文之论断。

建筑大师路易斯·沙利文倡导了「形式服从功能」这一著名设计理念，这并非要求形式必须屈从于功能，而是主张要舍弃毫无意义的造型，注重设计的实际用途。

设计风格需以实用为出发点，始终围绕实用展开。这是图形界面设计在迈向扁平化设计理念后，长期坚持的核心准则。然而当下，随着复古拟物化手法和立体视觉效果的重新兴起，产品中插画的过度使用以及动画效果的泛滥，使得“形式需服务于功能”这一原则，正逐渐沦为一句缺乏实践意义的陈词滥调。

当前的 bento 设计潮流，其构图方式颇具特色，相当于将所有卡片摊放在一个 bento 盒中，缺乏清晰的视觉引导路径，视线所及之处都是视觉焦点。

这种构造方式真的能顺利实现功能吗？暂时不用答复，咱们先分析分析它的构造思路。

如果我们需要在 1440X900 像素的范围内设计一种组合式排布，那么就必须先构建一个类似下图所示的基本结构体系

这个网格是怎么计算出来的？以 4 点网格为参照，将列与行的数量都定为 8，也可以不一样，间距都定为 20 像素，列的宽度与行的宽度无需设定，在框架中可以灵活调整适应。

那么纵向网格如下图：

横向网格如下图：

将横向网格与纵向网格叠加便形成初始基础网格，然后便能够依据需要自由安排 bento 式布局。

这非常容易理解，网格参数的确定完全根据你设计任务的需要，布局组合的灵活性很高。

但是不是一定要基于网格来设计布局呢？

我们开发常规软件时，以手机客户端为例，通常设定好页面边界，以卡片作为基本单位反复生成，采用单行或双行来排布基本可以满足需求，难以实现过于复杂的构造，多数设计师也较少采用网格系统。这种情况下基本不会出现严重问题，不过实际执行时难免会因为像素的微小差异和开发人员频繁争执，设计师出错时最常抱怨的是「负责开发的难道完全没参考我的设计稿说明吗」。

问题不在于谁偷没偷懒，而是设计思维与开发思维的不一致。

网页设计方面情况类似，起初我们负责视频网站建设，当时既没有运用网格系统，也不顾及响应式设计，而是固定单张卡片的长宽比例并反复复制，导致在不同设备上仅表现为卡片数量的增减，最终呈现效果呆板，同时多套尺寸的设计图纸维护起来极为不便，每次更新版本都仿佛在重复体力劳动。网页前端开发过程相对简单，没有移动端那么繁琐，只需要一套切图方案，实际上设计上的相似程度非常高。

总体而言，即使不借助网格系统，设计工作也能顺利进行，这种情况已经持续了很长时间。然而，在 bento 设计领域，方法需要有所改变，若缺乏网格作为布局基础，不仅设计过程难以有序推进，开发实现更会造成严重后果。

基础设计原理已经明确，接下来我们将直接探讨实际应用场景，深入观察和剖析 bento 式布局在生产力工具网站上的具体运用方式，并评估其是否能够满足功能需求，同时有效展现其使用价值。

▍用例分析

任何设计形态都是为了实现用途，传递内容。我们不能只谈理论、套用模板，设计要实际，关注点也要实际。看再多新颖的方案图也不如亲身体验成品，因为设计不是孤立工作，优秀设计也不是自我满足的产物。

经过尝试多种生产效率提升网站，我挑选了部分典型范例，归纳出模块化排版的三种普遍做法，

下面我们就一个一个展开来看：

无交互纯展示

成为产品典范的优势在于，人们很难对其某个构思的独创性提出疑问，要达到这种境界非常不易，然而 Linear 正是这种情况。

Linear 在国外的效率提升应用中始终是卓越设计的典范，其官方网站的设计就是该领域的风向标，其实完全没有必要刻意去追随什么设计潮流，平时只需打开 Linear 的官方网站浏览一下即可。

静态展示

我们以 Linear 的 Asks功能页面的「提升需求响应速度」部分为例，先来观察它的构造：

Linear官方网站中内容部分的最大版面宽度为1200像素。接下来，我们将探讨该模块在最大宽度条件下的具体排布方式，首先会注意到它运用了12格布局系统，其间距被统一设定为24像素，图表显示此区块的高度为832像素，网页设计通常不对高度进行约束，具体数值完全由设计需要决定。

这个模块分成四个卡片来展示作用好处，作用好处之间没有排序，也没有视觉主次之分，而且其构造简单明了，信息在一屏就能说明白，减少了滑动操作，也防止了用户信息接收不连贯的情况发生。

这个模块仅用于静态内容呈现，其中不包含视差滚动效果，也没有 hover 交互功能，属于最基础的 bento 式排版实现方式。

Linear 在此存在一个特殊构造，就是单个 card 中的画面能够由多个层次组成。请留意下方动画里右上方的 card，当调整网页窗口的尺寸时，图像上的（伪造）叠加层不会随整体缩放，而是单独滑动。

这也就表明，Linear 当前的展示方式是固定的，但这并不意味着每一个卡片都必须使用完整的静态图像才能完成设置。此外，每张卡片都可以单独设定 CSS 样式，示例中的这个模块包含 4 张卡片，那么在客户端代码方面就相当于创建了 4 种容器模型，再借助 CSS grid 布局以及 flexbox，就能够达成 Linear 这种 bento 布局的响应式页面效果。

因此，这个体系就像一个饭盒，一旦我们确定了当天要准备的菜品，就可以先在饭盒中预留出一些位置来盛放食物，然后每个位置里的食物都可以自由摆放，而且这个盒子的容量不受限制，一个位置里可以叠放多层食物，构思十分灵活（但需要权衡，要顾及网页的运行效率和开发所需付出的努力）。

这个线性风格的 bento 布局范例从构思到实现都十分讲究，主流的响应式规格都考虑周全，使用感受同样出色。然而，某些网站的 bento 组件实现效果却欠佳，例如 Framer 和 CREATE 这两个平台，在特定分辨率条件下，会出现模块错位幅度过大，或者信息堆叠杂乱无章的现象。

Framer

CREATE

总之，实际呈现的偏差也必须纳入初始规划考量，假如并非自行负责界面实现，那么在动工设计前务必与编程人员充分商议。

沟通充分并非仅提供网址链接，对方仅回「可行」便无需过多顾虑，结果往往与预期相去甚远。需探究对方执行思路，若对方对此类问题态度敷衍或解释含糊不清，便不必期待最终成果。当然，若对方表示「无法实施」，也不应轻易放弃，应询问具体原因。若是安排上的麻烦，便耐心等待后续的安排，倘若对方声称是技术层面的障碍，则需向其他人核实情况（毕竟对方感知到的难题，换个人或许并不觉得是问题），总之，不可糊里糊涂地着手，也不宜不明不白地就此罢休。

动态展示

Bento 式布局的动态呈现通常采用滚动视差效果或持续运行的循环动画，同时也会加入一些基础的鼠标悬停时产生的轻微交互动作。

完全不涉及互动环节，选择固定还是活动式呈现，完全由该部分需要表达的主题决定，例如 LottieFiles 官方站点上「运用 LottieFiles 平台开展动作合作」那个部分。

模块内容旨在讲解动画设计软件，运用动态效果最为适宜，借助动态图像阐释软件特性十分清晰，但不宜让所有卡片都产生动画，以免造成视觉混乱。

LottieFiles 这个模块同样由 4 个卡片构成，其中 3 个持续播放动画，内容呈现依然简洁明了。首先，它借助不同的色彩方案来区分各个卡片，其次，动画设计注重留白，播放次序井然有序，并且动画的繁简程度也做了主次之分，整体视觉体验不会让人觉得杂乱无章。

网页开发过程中，LottieFiles 运用了多种栅格方案，当屏幕尺寸超过1536像素，系统会启用五栏布局，若尺寸小于或等于该数值，则全面采用四栏布局，卡片组件也调整为标准的四格排列，当网页宽度进一步缩小至手机显示规格，卡片会转为单栏形式呈现。

制作可适应不同屏幕的网页时，可以选用好几个布局框架，本质上就是生成多种尺寸的页面样式方案。有人对使用布局框架表示反对，理由是「布局框架过于僵化，束缚设计想象力」，但实际上它在提供结构支撑功能的同时，也拥有相当大的灵活性，呆板的是应用方法，而非基本原理。

微交互纯展示

交互式 bento 设计属于高级类型，这方面设计特别突出的有 Diagram 的官方网站，这家企业专注于研发生成式人工智能的设计软件，其品牌口号是「来自未来的设计工具」，因此其网站风格极具前瞻性，但并不像 web3 类网站那样风格化。

该网站采用模块化设计来呈现其研发的设计软件，各个模块均可操作，预览效果能直接模拟成软件界面，用户无需进入软件内部，即可一边查看一边感受其使用方法。

看起来细节挺多，但大体上就是三种交互方式：

Hover 交互

这种互动在网页上非常常见，它的作用主要有两个，一是让用户知道某个部分可以点击，二是帮助传递信息，还能让页面显得更生动些。

跟手交互

主要体现在名为 Magician 的 Figma 插件的相关说明部分，这个部分最显著的特征是部分卡片展示了魔术棒和手势（光标）的互动，其构思在于通过挥动魔术棒就能迅速呈现多样内容，具体说明这款插件能够借助人工智能提示词来生成图像、图标，以及提供占位文本行等作用。

这个组件总共划分了八个卡片，现阶段它是最为复杂的 bento 式排版方案，因为过于繁复，所以不适宜设计成 Linear 那种内容区域宽高随浏览器窗口尺寸自动调整的样式。

它的规范是，当页面的横向尺寸超出九百九十二像素时，主体部分（版面核心）将维持一千二百像素的固定宽度（缺点在于，当页面宽度低于一千二百像素，主体部分就很容易出现显示不全的情况）；如果横向尺寸小于或等于九百九十二像素，布局的列数就会从四个调整为两个；在手机等移动设备上浏览时，卡片组件通常都转换成单列排列，主体部分的宽度也会相应调整。

点击交互

该模块具备点击和悬停功能，但以跟随交互为核心，Genius工具的介绍部分仅采用点击方式，看似在操作界面，实则是一种虚假互动，不会引发任何实际作用。

这个模块的特色在于，当你按下某个卡片里的按键，动画播放完毕后或许会显现出额外的按键，你可以继续进行交互，仿佛置身于真实的操作界面之中。动画执行完毕会停留在最后一幕，若点击卡片上的重置标志，能够返回到卡片的起始状态，并且伴有弹性的渐隐退出效果，做工十分精致。

这种布局方式将 bento 式设计运用得淋漓尽致，极好地展现了其布局设计的长处，对于工具类产品而言，最有效的产品宣传图便是其工具界面本身。

这种构造方式虽然构思巧妙且易于理解，却十分难以实现，要达到这种水准，不能仅用几幅图像就完成，也不是增加循环播放的动态效果就能达成，需要融入许多精巧的构思，相当于将展示单元当作一件产品来打造，是对设计师整体能力的严格检验。

另一面，早先关于 Linear 的范例也讲过要关注能耗情况，访问 Diagram 网站操作了十分钟，紧接着去烧了一壶水期间，再回来时设备中央处理器温度就急升至六十多度，通常仅三十几度，嗯……尽管设备老化因素不可忽视，但交互视觉效果确实不宜过于繁杂，优质资源还是应当集中于关键用途。

可操作功能区

所述的 bento 式布局主要用于信息呈现，网格应用十分自由，卡片组合亦可多元调整，几乎能够讲没有固定范式。

bento式布局设计原理_日本排版设计_bento式布局网页设计案例

一旦开始进行实质性的功能运用，就必须制定并遵守界面设计标准了。

先前提及过的 Bento这款 link-in-bio 工具，我曾专门撰文介绍，它拥有可灵活调整的模块化设计，支持用户无需编程即可自由构建个人数字展示页面，产品中蕴含诸多精妙构思，其细微之处交互体验十分出色，海外众多设计师常借助它来打造个人作品集，进而推动了这种布局方式在设计师群体中的广泛采用。但是它刚被 Linktree 买下，以后会怎样还不知道，挺遗憾的。

若想了解产品内部运作，可以查阅那篇文献，此处不作详述，直接剖析其结构实例。

Eike Drescher (bento.me)

通过该图可以了解到，此产品的餐盒式构造部署在右侧的主要操作区域，该区域负责呈现相关内容，每个模块均构成一个独立单元。

它的功能区网格布局不同于前述示例，不采用固定列数和间距但不受列宽行宽约束的设计，而是设定了固定宽度：在桌面版中为 820 像素，在移动版中为 380 像素，整个网格系统由 8 行 8 列构成，其间距统一为 40 像素，根据单元格规格，衍生出五种预设组件规格，供使用者安装选用。

如果细拆解一下它的网格布局原理，就如下图所示：

也就是说商品为顾客准备了五种根本的构件单元，数量不受限制，能够自由选取组合构建个人的「乐高便当」，并且这些根本构件单元又都是通过一个个相等的立方体模块组合形成的。

这五种组件的规格大体上符合支撑作用的必要条件，包括条目名称、内容区域、视觉图像、动态影像、快捷入口等，页面在垂直方向上不受组件个数的约束，使用者还能增设全宽的导航条，用以划分不同的「子便当」类别。

此外，类似于苹果产品的桌面模块，Bento 应用中的各单元也能够随意调整顺序，交互体验设计得相当出色，可以参考动画演示来理解

部件在移动时会表现出类似真实的震动效果，震动的强弱会随着拖动的距离而调整，当把部件放到某个位置，原来的部件会自动做出让步，几乎所有的动态效果都带有缓冲特性，复位时还会出现轻微的弹回现象，这种对细节的精心处理使得整体操作既顺畅又自然，给人一种被重视的印象。

这些交互设计并非全凭设计师灵光一闪，因为得益于先前合理的布局规划，以及稳固的交互逻辑支撑，交互手段和动态效果都未曾偏离 bento 式布局的范畴，各部分相互协调，才能为用户带来顺畅无阻的操作感受。这款应用自身包含诸多产品层面的精妙之处和交互层面的闪光点，若想深入了解，可前往官方网站亲自尝试，在此就不再详述。

此刻我们再审视先前探讨的议题「bento 式布局能否满足功能需求」，经由对前述数个杰出范例的剖析，我们完全能够提供一个确定的答复。

然而，只要各种类型的设计构思，只要精心制作并充分实现，不都能为实际用途提供帮助吗？关键不在于设计本身，而在于如何运用。

▍优势总结

现在可以确定，bento 式布局确实更适合用于生产力工具网站，这也是它在这类网站中广受欢迎的原因。

其优势也很多，比如：

但是从全局角度审视，这种安排方式主要用来呈现内容，若要负责关键操作环节，适用情形极为有限，并且需要具备出色的构思能力，同时其不足之处也很突出。

无论如何调整视觉成分的比重，不论运用什么方法策略，色彩协调也好，空白处理也罢，活动与静止搭配也好，都无法为这种排版规划出明确的视觉流向。

这一叠 card 排列整齐时，视线很容易被分散开来。因为 card 上的内容重要性差不多，所以可以考虑用 bento 式布局将它们整合。但如果模块要体现明确的阅读顺序或者突出执行步骤，这种排版方式就不太合适。

功能即便已经适配，你收到的产品需求文档里面，又真的有足够有价值的素材来充实模块化设计吗，总不能让设计来迁就内容的匮乏。

因此要明白，所谓流行风尚，其中掺杂的虚假成分相当多，如果不认真核实，表面上仿佛这股潮流已经席卷而来，你竟然还没能参与其中，岂不是要被淘汰出局？但实际上，流行的未必适合所有人，就算没能赶上潮流也没关系，深入分析，那些不适合你的事物，即使失去又有什么值得惋惜呢？

如今我们明白 bento 式布局为何能在效率工具网页上广受欢迎，这种布局确实非常适宜呈现工具产品的特性、界面、信息、表现力等要素。电子设备网页同样适用，比如考察 Apple 或 Google 的商品网页即可知晓，当然其应用范围并不仅限于这些站点和平台，但那些话题不在本文探讨之列。

这就圆满完成了研究探讨阶段，现在要开始期待已久的实践环节。

▍实操练习

我们已经掌握了 bento 式布局的概念，弄清了其运作方式，也观察了行之有效的方法，那么关键在于：这种布局怎样动手实现，构思过程是怎样的？

实践是检验真理的唯一途径，我们可以直接从零开始构建一个交互式的 bento 式布局网页，完成这项工作需要借助 Figma 和 Framer 这两款设计工具。

整体制作流程如下：

选定规格，划分格子，规划排布，构思运用，设定多种形态，再构思运用，最后制成页面。

但首先要注意避免一个错误做法，那就是一开始就设定网格，然后马上着手布局，这样会束缚自己的创意表达。应该先进行草图构思，等心中形成大致的布局想法后，再在网格系统中实现。

Figma 内完成设计

首先，需要设定网页的整体尺寸，这个数值可以灵活选择，我们决定将其设定为1400像素，对于自适应布局不做考虑，因此将页面主体区域直接固定在1200像素。

在后续工作中，需要对部分卡片实施悬停时的形态扩展，因此将 bento 模块的尺寸参数设定为具体数值。

接下来，开始构建网格框架，选中框架元素，在右侧的参数面板里，直接插入布局网格，首先配置垂直方向的网格，选中行数设置项，将行数调整为十行，行间距设定为十六像素，行宽采用弹性布局，其他选项按照系统默认值即可，无需额外调整。

再建立一个框架，设置横向排列的格子，选中行列特性，数量定为十二，其他选项参照垂直排列的格式。

在此务必指出，参数的配置必须依据你预先构思的整体规划，切不可只顾数值本身，否则进行界面构建便会陷入迷途。

最后，把横向网格也拖进来，让两个网格重叠，边缘要对齐。

第三步：设置矩形卡片进行布局排布，具体样式全凭个人想法，但必须注意，卡片的左右两侧必须与列宽的左右两侧保持一致，切记不要与间隔的边缘对齐，上下边缘的对齐也遵循相同原则。

现阶段整体构造已基本完成，接下来可以着手进行视觉设计工作了。每个模块都需要分别建立框架并标注序号，若需构建自适应网页，这些模块还必须采用自动布局方式。

第五步：构思交互细节，为后续在 Framer 中实现做准备，我们需先在 Figma 中完成单个卡片交互状态下的视觉表现。

这实际上相当于为模块创建了不同形态，若有若干 card 需要交互调整，模块便会衍生出多种形态。不过我们不会在 Figma 中制作交互模型，因此设计完成后，必须将形态图层合并回基础模块并加以隐藏。

第六步：先选中全部需要导出的页面，接着启用 Figma to HTML with Framer 插件，稍等片刻直至复制动作结束，最后在 Framer 文件中直接粘贴即可完成操作。

Framer 里实现网页

到这里有没有跟上呢？接下来每一步都很关键的，可不要走神。

首先，着手建立新工程，将界面尺寸设定为1400像素，接着将先前从Figma里拷贝的素材置入其中，并且把bento模块设定为可复用的单元，同时关联上相应的参数和样式

进行下一步，要留意主变体内部元素无需改动，之前已说明，每张卡片增加互动就形成一种变体，因此这次针对三张卡片开展互动，便创建了三个变体。

在修改卡牌类型时，可以事先预估扩展后卡牌的规格，随后在参数栏直接变更设定，或者将先前在 Figma 中隐藏的卡牌类型图层暂时调出当作参照，再调整原卡牌的规格以实现对齐，卡牌上的物件若需挪动，不能直接拖曳，否则容易造成偏差，一边查看效果一边在参数栏调整设定最为可靠。

第三步：加入互动效果，我选用的是鼠标经过触发，总共分为两个阶段，

光标移入：

在主版本中，需要选中要增加交互效果的卡片，注意要选中整个卡片的框架图层，不能选到单个元素图层，接着添加新的交互方式，选择鼠标进入，然后选择要关联的其他版本。

有几个 card 需要添加交互，就继续重复以上步骤即可。

光标移开：

交互过程必然有开端和结尾，鼠标指针停留在卡片上，卡片立刻作出反应，指针离开后，卡片须退回到初始状态。

因此这个环节的操作，我们采取对的方法，为卡片的不同形态赋予新的互动方式，挑选鼠标移开这个触发条件，并且将这个形态指定为主要的版本。

还是一样重复步骤即可。

第四步：进入主界面，先对内容进行查看，确认无误后，再点按公开键，即可制作出网页。

可以亲自查看演示制作的网页，这个是本次 Framer 设计的初始文件，在网页上登录就能看到并修改。

现在整个步骤已经全部完成，bneto 那种布局的构思方式就是这样的。掌握了其中的道理，理清了思考脉络，接下来就要依靠你的想象力去进行创作了。

需要寻找设计灵感时，可以参考 BentoGrids、Apple Summary Slides，以及 Best bento grid websites 这几个平台，它们专门整理了 bento 风格的设计案例，资料相当丰富，欢迎自行探索。

实际上若希望进一步提升，能够构建自适应页面，诸如 Linear 的那种样式，不过这需要投入更多时间。要实现这个效果，需要先针对 bento 布局里的所有卡片应用自动布局功能，接着要确保卡片中的每个组件都设定了明确的尺寸限制和响应式调整方式，随后在 Framer 软件中增加几个不同的显示节点，以此对各项参数进行细致调整，这个过程虽然比较耗时费神，不过如果有时间和精力投入其中，去钻研和拓展也能获得不少乐趣。

▍最后

谈到网页设计动向，国内公司特别是知名企业非常重视这些方面，一个人承担八个人的工作量已经忙得不可开交，却还要你找个什么新潮风格做个演示文稿来讲一讲，所谓的「团队沟通、内部交流」，而且「掌握设计动向」也是设计职位应聘条件中的常客。

但，了解它要干嘛？

设计流派林林总总，每年都在剧烈更迭，若有新潮出现便盲目追随，不顾自身产品特性与功能规划，生硬套用潮流风格，最终导致设计失去独特性，沦为千篇一律。应当认识到，设计潮流往往空洞无物，相比之下，立足产品本质进行设计更为关键。

何谓空谈？譬如讨论便当风格的设计是否必须采用圆角，便是空谈。

为何才算得上实际呢？倘若下次客户又递来一张图片表示「这次任务咱们也要这种样子啊！」——此时你先别急着满腔应承，而是慢慢敲出一句「呃，那咱们这次的任务核心是？」，这便是务实。

当然最后情况也许还是对方说不明白意图，我对此深有体会，而你也需要照样遵循规矩，这便是世间常理，不过我们至少还有表达立场的权利，你说呢？

原创性是那些缺乏创新精神者认为毫无价值的事物。