什么是 Bento Grid UI？
苹果2022年 iPhone 14 产品页，把一整套大小不一的圆角方块网格，变成了这十年间被模仿最多的网页版式——它的名字与分格逻辑，都借自日式便当盒。
Bento Grid UI 速览
便当格栅是一种版式模式，而非一套色板：一整套紧凑的网格中，容纳着大小、跨度各不相同的方块，每个方块都是一个自成一体的圆角矩形，承载一个功能点、一项数据或一个想法。少数几个大格承载着最核心的信息，若干小格则容纳辅助性的细节。这个名字直接来自它所形似的日式便当盒——一个托盘，被整齐地分隔成若干格，每一格盛放各自的内容，却又共同拼合成一个连贯的整体。
随着苹果产品营销一同流行开来的深色变体，底色是近乎全黑的画布，而非纯白。各个方块与这块画布、以及方块彼此之间的区分，主要靠微妙的表面明度差异来实现——一个方块靠明度本身，就能读出略微凸起或略微凹陷的感觉——而不是靠生硬的边框或厚重的投影。这种克制是刻意为之的：整套网格应当读起来沉静、高级，而非拥挤忙乱。
字体承载了这套视觉体系中大部分的自信感。较大方块内的标题，字号大、字距收紧，在深色底面上毫不掩饰地采用醒目的粗体；辅助性文案则保持小而安静。单一的强调色——通常是一种饱和的蓝色——几乎只保留给交互元素使用：按钮、链接、激活状态，这样它每一次难得出现，读起来都是「这里可以操作」，而非泛泛的装饰。
Bento Grid UI 从何而来？
「便当」（bento）一词指的是一种分格的日式午餐盒，而把这个词用来指代网页版式，其实是一个相当晚近的说法——它是2020年代设计圈里的一种简称，而非印刷或界面设计史上早已确立的专业术语。尽管如此，把不同内容组织进一套模块化、格子大小各异的网格这一底层理念，在编辑与印刷设计中却有着远为古老的谱系——设计师长期以来都在用模块化网格，为一页或一个跨页上分量不均的内容，赋予视觉秩序。
一个更直接的数字先祖，是微软大约在2010至2012年间随 Windows Phone 与 Windows 8 推出的 Metro 设计语言，它把开始屏幕组织成一套扁平、色彩鲜艳、大小不一的方块网格，分别代表应用与实时内容。Metro 确立了这套概念模板——同一网格内非对称的方块尺寸，每个方块自成一体——尽管它建立在扁平饱和色块之上的视觉呈现，与如今这个词通常所指的那种克制、近乎单色的调性，看起来相当不同。
这个词的现代用法，在2022年9月定型——当时苹果的 iPhone 14 产品页，把相机、芯片、卫星紧急信息、碰撞检测等功能亮点，组织成一套大小不一的圆角方块网格，其中几格足够大，能承载一句标题与一张图片，另一些格则小到只容纳一项参数。这个页面几乎立刻在 Dribbble、Twitter/X 等平台的设计圈内被广泛注意到并被模仿，「便当格栅」这个词，也开始特指这种克制的、以方块为单位、苹果式的处理方式，而非泛泛指代模块化网格。
此后的普及速度相当快。链接聚合产品 Bento 大约在同一时期上线，把整个个人页面的格式，完全建立在字面意义上的便当格分隔之上，帮助把这个词汇固定进了设计圈的日常语言。进入2023年，软件与 AI 初创公司以惊人的速度，把便当格栅用到了着陆页与定价页上，把这种模式当作「高端、有技术可信度」的速记符号——以至于到了2024年，设计评论者已经开始把便当格栅描述为初创公司营销中一种被过度使用的陈词滥调，即便如此，只要执行时保有真正的层级与克制，而不是套用模板，这种版式依然确实有效。
Bento Grid UI 的视觉特征是什么？
非对称方块网格
所有方块共享同一套底层网格，却在其中占据不同的跨度——有的横跨多列或多行，有的则是单独的小格。这种非对称是刻意为之、且具有层级含义的：方块尺寸直接传达重要性，最大的方块被留给这个版面最想让人注意到的想法。
表面明度分层
方块主要靠与画布、以及彼此之间微妙的明度差异来区分，而非依赖边框或厚重的投影。一个方块之所以能被读作一个独立的物体，是因为它比周围环境浅一度或深一度，这样得到的是一种沉静、统一的表面，而非一页明显被方框圈住的卡片。
自信的展示字体
较大方块内的标题文字字号偏大、字距收紧，字母紧密相邻，形成一个紧凑、自信的文字块，而非松散排布的展示文案。这种紧凑的排布方式，正是这套版式带来那种高级、精工感的部分原因。
单一强调色纪律
整个版式中只出现一种强调色，而且几乎只保留给交互元素使用——按钮、激活状态的链接、开关控件。其余一切都留在中性的画布与文字色板之内，这样，这唯一的强调色才始终承载着意义，而不会沦为背景噪音。
统一的圆角语言
无论尺寸大小，每一个方块都共享同一种圆角处理方式，正是这一点，把一套容纳着截然不同内容类型的网格——一个大的主视觉方块、一个小的数字标注、一个纯图标方块——在视觉上统一成同一个家族的物体，而不是一堆拼凑起来、彼此不搭的碎片。
充裕的留白
方块之间的间隙保持宽阔且一致，任何一个方块内部的内容都不会顶到边缘。正是这份呼吸空间，让一套容纳着许多离散信息碎片的网格，不至于读起来杂乱——密度是靠间距上的自律来管理的，而不是靠把每个方块本身缩小来实现的。
谁塑造了 Bento Grid UI？
苹果的内部营销设计团队，打造了2022年9月那个把现代便当格栅模板定型的 iPhone 14 产品页——非对称圆角方块、近黑或纯白画布，以及单一强调色——并几乎在一夜之间，把它变成了当代网页设计中被引用最多的版式之一。
苹果更广义的界面设计传统——自信的大号字体、充裕的留白、一种克制的单一强调色，以及始终如一的圆角语言——为便当格栅这股潮流提供了几乎被整体借用的视觉语法，这也是为什么即便是与苹果毫无关系的公司使用这种版式，它依然读起来「高端科技」的部分原因。
微软在2010至2012年间推出 Windows Phone 与 Windows 8 的 Metro 设计语言的团队，确立了便当格栅在概念上的先祖：一个由单一网格构成的开始屏幕，方块尺寸非对称、各自自成一体。Metro 那种扁平、饱和色块的视觉呈现，与如今克制的现代便当美学看起来相当不同，但其底层的方块网格逻辑，是一个直接的先例。
这家链接聚合类初创公司，大致在苹果那个页面走红的同一时期上线，把整个产品都建立在字面意义上的便当盒式个人页面之上。由于它直接以这个概念为自己命名，也帮助把「便当格栅」固定为设计与创业圈内普遍接受的说法。
进入2023年，大量开发者工具与 AI 初创公司，以惊人的速度把便当格栅用到了着陆页与定价页上，把这种版式当作技术可信度与高端定位的视觉速记。正是这种大规模的采用，把这种风格从苹果专属的一个个案，推成了一个可被辨识、有时甚至被过度依赖的独立类型。
今天怎么用 Bento Grid UI？
在演示文稿中，便当思维可以直接转化为一页功能概览：与其罗列要点列表，不如把同样的信息排成一套方块网格——一个大方块承载核心能力，若干小方块承载辅助功能。封面页可以用一个占主导地位的主视觉方块承载整份文稿的标题，呼应原始网页版式中大方块锚定整体的方式。
这种风格并不适合真正叙事性或情感性的封面时刻——它那分格化的逻辑想要的是离散的事实，而非一句气势磅礴的陈述，所以应把它留给那些任务是「这里有几件各自独立的事情」，而非「这里有一个宏大想法」的页面。
对于网页界面，这几乎是一种天然的契合：仪表板可以把各项指标组织成大小不一的方块，把最重要的数字放进最大的格子里；定价页面则可以把各档位呈现为大小不同的便当格，让推荐档位明显占据更多空间，而不是依赖一个徽章去暗示其重要性。单一强调色的纪律，在这两种场景中都能直接映射到行动号召按钮上。
在编辑与营销内容中，这种版式适合产品营销页、作品集与链接聚合页，以及任何一页「你需要知道的一切」概览页面——前提是内容本身确实是一组离散的事实，而非一段连贯的论述。它并不适合长篇编辑写作，因为读者需要的是连贯的阅读流，而非被切割成一格一格的碎块。
最常见的错误，是搭建一套完全没有主导方块的网格——当每一格大小都差不多时，版式就失去了让便当格栅可读的那种层级，开始显得像一堆无差别的卡片。第二个常见错误，是把强调色用在了许多方块上，而不是只保留给一两处真正的交互时刻，这会抹平那种克制原本要制造的信号。第三个错误，是忽视底层的网格纪律——如果方块没有真正对齐到一致的列线与行线，读起来就会显得潦草，而非刻意为之的非对称。
Bento Grid UI · 常见问题
便当格栅和 Pinterest 式的瀑布流网格是一回事吗？
不是，而且这个区别很重要。瀑布流网格把高度各不相同的项目，排列进随内容动态变化的流动列中，不存在一套固定的底层网格去规定任何一项该落在哪里。便当格栅恰恰相反：每一个方块都落在一套固定、预先确定的网格上，它的尺寸是一个刻意的设计决定，而非取决于内容碰巧有多高的副产品。瀑布流给人的感觉是有机、不可预测的；便当格栅给人的感觉则是经过工程设计、刻意为之的。
便当格栅界面只能用在深色模式下吗？
不是——苹果自己在不同产品页面上，也会在同一套底层版式的浅色版本与深色版本之间交替使用。近黑的深色变体往往读起来更高端、更具科技感，这也是它在 AI 与开发者工具营销中占主导地位的原因，但同样一套非对称方块、单一强调色的逻辑，在浅色或纯白画布上同样适用——只是方块的区分，会靠非常浅的底色或细微的边框，而非明度差异来实现。
便当格栅这股潮流是不是已经被用滥了——应该避免使用吗？
在某些品类中，尤其是 AI 与开发者工具的着陆页里，它确实已经成为一种可被一眼认出的陈词滥调，有时被当作模板套用，却没有真正考虑过层级关系。但这种「用滥了」批评的是懒惰的执行方式，而非这套版式本身——一套真正建立起方块尺寸层级、间距自律、并保有单一克制强调色的便当格栅，依然能够清晰传达信息。真正该避免的，是团队默认地套用这种版式，而非因为内容本身确实由若干离散、分量相当的信息碎片构成。
一套版式至少需要多少个方块，才能被读作一个像样的便当格栅？
没有一个固定的数字，但这种版式需要足够多的方块——通常至少五到六个——才能建立起真正的尺寸层级，其中至少有一个明显占主导地位的方块，以及若干更小的辅助方块。少于这个数量，版式读起来更像是一次简单的功能对比或一排基本卡片，而非一套分格化的便当构图；整个效果都依赖于眼睛能够比较出方块之间明显不同的尺寸与重要性。
便当格栅和经典的瑞士风格或编辑类模块化网格有什么区别？
两者都依赖一套底层网格来组织分量不均的内容，在这个结构性的意义上，便当格栅确实是瑞士编辑设计长期使用的模块化网格传统的直系后代。区别在于侧重点：经典的模块化网格通常统摄的是一整页连续的文字与图像，网格本身对读者而言大多是隐形的；而便当格栅则把这些格子本身变成了可见的主体——每一个方块都被读作一个独立的物体，拥有自己的圆角边界，而不是隐藏在流动内容之下的一副看不见的骨架。
