设计风格指南
什么是 Müller-Brockmann Grid?

约瑟夫·米勒-布罗克曼证明了网格并非束缚,而是一种力量——一套数学系统,使视觉传达拥有巴赫赋格曲般的必然性。
Müller-Brockmann Grid 速览
米勒-布罗克曼网格,是指瑞士设计师约瑟夫·米勒-布罗克曼所发展并系统化的版面与视觉组织方法。他1981年出版的《平面设计中的网格系统》成为全球结构化排版领域的权威参考。这套方法将任何印刷或数字表面划分为一套精确的栏、行与页边距网络。每个元素——标题、正文、图片、图注、分割线——都以理性的对应关系置于这一不可见的建筑之中。没有游移,没有目测。网格即论点,每一处排布都是这个论点中的一句话。
在视觉上,这套系统产生出具有非凡严谨性与平静权威感的作品。色板通常缩减至近乎极端:纯黑置于白底,或白字置于黑底,以单一强调色——历史上通常是一种饱和的纯色——克制地标记页面上最关键的元素。字体以一种几何无衬线字体家族的多级尺寸排印,仅凭大小与字重的对比建立层级。没有装饰性分割线,没有渐变填充,没有柔化的阴影。留白并非空洞——它是网格的呼吸,与其所框定的内容一样出于结构性的深思熟虑。
这种风格属于更广泛的瑞士国际排印风格(Schweizer Typografie),但米勒-布罗克曼的独特贡献在于使底层网格变得显性且可教授。其他人凭经验与品位摸索出平衡的版面,他却给了设计师一套可重复、可迁移的系统。由此产生的视觉语言同时兼具谦逊——它从不炫耀自身的机巧——与命令感,因为每一个决定都可以被其背后的数学追根溯源。
Müller-Brockmann Grid 从何而来?
约瑟夫·米勒-布罗克曼1914年生于瑞士拉珀斯维尔,在苏黎世师从设计师恩斯特·凯勒和沃尔特·卡赫,这两位老师灌输给他一个信念:设计必须是逻辑性的、普遍性的、无关个人表达的。1936年他在苏黎世开设自己的设计工作室,同年开始为苏黎世音乐厅设计海报。这些音乐会海报成为他网格方法论的实验室,在最严苛的约束下被检验:以纯粹的抽象几何传达音乐的情感性格。
他为音乐厅创作海报的鼎盛时期,大约在1955至1965年间,产生了一批至今仍是二十世纪平面设计中最具辨识度的图像。贝多芬海报——同心圆从密集的中心向外扩展——并非贝多芬音乐的插图,而是其几何等效物:以数学间隔组织的结构性能量波。当代音乐(Musica Viva)系列则用扩展的方形与弧线,为现代作曲的时间结构赋予视觉形态。这些作品确立了一个将定义他整个职业生涯的原则:受数学支配的纯粹抽象结构,能够以最精密的具象图像所具有的力量进行传达。
其思想根基来自更广泛的苏黎世语境。米勒-布罗克曼与理夏德·保罗·洛泽、卡洛·维瓦雷利、汉斯·纽堡是同代人——这四位设计师1958年创办了杂志《新平面》(Neue Grafik),那是瑞士风格的理论喉舌。巴塞尔设计学院的埃米尔·鲁德则在发展关于排版韵律与比例的平行思想。这不是由一个人发明的运动,而是对同一问题的集体追问:视觉设计如何在不牺牲传达力的前提下,达到数学的客观性与普遍性?米勒-布罗克曼的答案是结构化网格,而他1961年出版的《平面艺术家及其设计问题》是第一次系统性地将其表述出来的尝试。
1981年出版的《平面设计中的网格系统》(Rastersysteme für die Visuelle Gestaltung)将数十年的实践提炼为一本全球设计师可直接应用的手册。该书以德英双语写成,配有大量图解,不仅说明网格是什么,更展示如何从第一原则构建网格——如何从字体行宽确定栏宽,如何将间隔与栏的比例对应,如何在文字网格内嵌套图像网格。这本书恰好在桌面出版开始使版面设计民主化的时刻问世,成为一代设计师驾驭这一新格局的标准参考。米勒-布罗克曼持续工作与讲学,直至1996年辞世,而他所整理的方法论已经比此后数十年间的每一种风格潮流都更为持久。
Müller-Brockmann Grid 的视觉特征是什么?
数学网格
这套系统的核心特征是网格本身:一套精确计算的竖向栏与横向字段网络,其间距与页边距由与字体行宽相同的比例逻辑推导而来。每一个版面都从构建这个不可见的支架开始,每一个元素——无论其性质——都必须与之对齐。网格不是建议;它是建筑。偏离网格的做法必须是经过深思熟虑且有充分理由的,因为任何无视网格的元素都隐含地主张网格是错误的。
简化色板与单一强调色
色彩处理方式建立在极度克制之上。底面接近纯白或全黑;所有正文与结构元素处于相反的极端。在这一高对比度的画面中,引入单一强调色——通常是饱和的纯色,历史上常以具有紧迫感与权威感的红色为主——仅用于标记构图中最关键的单个元素。其他一切元素凭借明度对比而非色相对比赢得自身位置。由此产生的效果是:克制使用的强调色携带了超乎比例的视觉重量,并立即引导视线。
几何无衬线排版
文字以单一几何无衬线字体家族排印——米勒-布罗克曼本人的作品中历史上使用Akzidenz-Grotesk或Helvetica。这一选择并非随意:几何无衬线字体与网格共享相同的构成主义逻辑,将字形简化至其结构上必要的组成部分,不作任何装饰性添加。字体层级完全通过尺寸对比与字重对比建立,而非通过混用字体家族。标题可能比副标题大数倍,副标题本身又与正文明显区分——三个层级无需任何额外装饰便不言自明。
功能性留白
网格系统版面中的留白并非剩余——它与其所环绕的内容一样经过精确计算。页边距足够宽,使文字区域具有被容纳的精确感;栏间距足够窄,使栏与栏之间的关系清晰,但又足够充裕,以防止视觉上的融合。区块之间的负空间由与字体间距相同的网格间隔支配,使整个版面拥有单一的底层韵律。无目的的装饰——任何不服务于结构或传达的元素——全部缺席,因为留白本身已经完成了那项工作。
客观的图像放置
网格系统版面中的图像不是自由浮动的——它们像其他所有元素一样吸附于网格,恰好占据一栏、两栏、半个字段或完整跨度。图像的尺寸由其与周围文字的信息关系决定,而非由其单独的视觉吸引力决定。照片在使用时,通常是高对比度且裁剪紧凑的,被当作平面几何块而非大气场景处理。当图像的结构作用能为之辩护时,可以使用出血;否则图像遵守与文字相同的页边距系统。
结构性规则线
水平与垂直规则线——用于划分或强调区块的细线——在必要时用于使网格逻辑可见。这些不是装饰性边框;它们是被提升至设计表面的网格线。将标题与正文分开的规则线确认了网格字段的边界。栏间的垂直规则线使栏结构清晰显现。规则线的使用讲求经济:每个构图中一两条可见的网格线通常已经足够;过多使用会将结构性手段转化为装饰。
系统性一致
也许最容易被低估的特征,是这套系统在每一页面与每一版面上对一致性的坚持。支配标题页的同一网格,必须同样支配正文页、索引页与附录页。决定第一页标题大小的同一比例,同样决定第八十页的标题大小。这不是机械的重复——而是将单一底层原则贯穿所有实例的应用。在多页文档中,正是这种一致性使整体感觉像一个被设计的对象,而非一组被设计的页面的集合。
谁塑造了 Müller-Brockmann Grid?
米勒-布罗克曼(1914—1996年)是核心人物。他为苏黎世音乐厅创作的系列音乐会海报、他的奠基性著作,以及他为IBM、雀巢等客户从事企业视觉设计数十年的实践,共同确立了网格系统作为一种美学立场与职业标准的地位。他1961年出版的《平面艺术家及其设计问题》阐述了客观设计的哲学依据,而1981年的《平面设计中的网格系统》则提供了实践方法论。他还担任《新平面》杂志的联合创办人与编辑——正是这份杂志赋予了瑞士国际风格理论上的声音。
鲁德(1914—1970年)在巴塞尔设计学院与米勒-布罗克曼并行工作,将瑞士风格的排版维度发展为一套完整的教学法。他1967年出版的《字体排印》将网格如何支配的范畴,从栏结构扩展至字体本身的韵律——行长、行距与文字块视觉密度之间的关系。鲁德的教学与写作培育了整整一代瑞士设计师,他们将这门纪律带往欧洲、北美与日本的各大设计学院。
洛泽(1902—1988年)从纯艺术而非应用设计的方向接近同样的数学系统化命题。他的序列与模块绘画——探索色彩与几何形态如何以严格的数学规则而非表现性直觉加以组织——赋予了瑞士风格在构成主义逻辑上更深层的理论根基。作为与米勒-布罗克曼共同创办《新平面》的联合发起人,他帮助构建了这样一个知识论点:基于客观性与系统性的设计,不是一种技术约束,而是一种哲学立场。
吉川静子(1934—2021年)是米勒-布罗克曼的伴侣、合作者与最终的妻子,她对工作室作品的贡献长期以来未获应有的认可。她将对日本视觉文化的深刻理解带入瑞士网格方法论,证明这套系统的底层逻辑——精确的比例、对负空间的尊重、装饰服从于结构——并非欧洲文化所特有,而是与东亚排版和构图传统有着深厚的亲缘关系。她在苏黎世工作室的存在,为网格方法论的国际传播做出了重要贡献。
霍夫曼(1920—2020年)在巴塞尔设计学院执教数十年,成为二十世纪最具影响力的设计教育家之一。他对网格的处理方式不像米勒-布罗克曼那样严格数学化,而是更多植根于视觉感知与格式塔心理学——但其成果同样具备相同的手段经济性、相同的对装饰的拒绝,以及相同的信念:视觉结构必须是理性的且可被证明的。他的学生散布欧洲与北美,将巴塞尔纪律带入下一代设计教育。
今天怎么用 Müller-Brockmann Grid?
米勒-布罗克曼网格可以直接而有力地运用于演示文稿设计——缺乏结构化系统,正是视觉混乱最常见的根源之一。对于一套幻灯片,网格方法在放置任何内容之前就已开始:建立统一的栏结构——通常是四列或十二列等宽栏——并承诺将每个元素对齐于其上。在封面幻灯片上,标题应占据一个明确的网格区域(通常是左侧三分之二或下半部分),留白在其余区域承担结构性工作。单一的强调元素——一条粗规则线、一个粗体数字、一个强调色的几何形——提供唯一的视觉重点。对于内容页,以明显对比尺寸设置的两到三个排版层级,在没有任何装饰处理的情况下承载所有信息层级。数据页获得一种示意图式的权威感:图表成为对齐于网格的几何对象,强调色仅用于最重要的数据系列。
对于网络与数字界面,这套系统尤其适合仪表板、数据分析平台、定价页面与文档网站——凡是信息密度与层级清晰度是首要设计问题的地方。建立严格的列网格(十二列在网络框架中现已成为标准),以几何无衬线字体设置阅读舒适尺寸的正文,并将黑白以外的所有色彩保留给交互状态与关键提示。卡片与面板应具有清晰的矩形边框而非柔和阴影;输入框应有明确边框而非幽灵样式。导航是字体性的——标签与字标,而非图标密集的菜单。由此产生的界面感觉权威而精确:每个元素赢得其像素,因为每个元素都可以被追责。
编辑与营销应用能回报这套系统的海报式大胆感。以这些原则设计的长篇文章,使用窄文字列配以充裕的外侧页边距——页边距成为引用语、脚注或页眉的容身之所,全部对齐于同一网格。区块分隔以网格字段边界处的粗水平线标记,而非装饰性元素。营销页面适合交替的全宽区块:奶油底深色字,然后深色底浅色字,强调色一致地用于单一的行动号召元素。字体尺度的大胆感——感觉如纪念碑般宏大的标题——完成了插图本应完成的工作,使构图保持平面图形而非摄影的性格。
在品牌视觉识别系统中,网格方法论产生的物料能在每种格式之间保持连贯性,无需设计师每次都做出全新决策。品牌标准文档定义栏结构、排版尺度、页边距比例与强调色应用规则。其后的一切——名片、信头纸、环境标识、数字模板——都是对这些规则的忠实应用。结果不是单调,而是一致性:每件物料都无误地感觉是同一系统的组成部分,同时又适合其自身的格式与功能。
使用这套系统时最常见的错误,是将网格当作背景选项而非承重结构。设计师会定义列网格,然后将元素放置在任何看起来正确的地方,无意图地跨越列边界,在字段中间漂浮没有对齐逻辑的对象。这产生出具有这种风格视觉简约感但缺乏其底层智识的版面——看起来空洞而非精确。一个相关的错误是强调色的表面化应用:同时在多个元素上使用它,为视觉多样性而非标记层级而应用它,或选择一种柔和或复杂的色调而非干净饱和的纯色。强调色只有在唯一且无误时才有效——一旦它出现在三个元素上,它就不再是强调,而成了噪音。
Müller-Brockmann Grid · 常见问题
米勒-布罗克曼网格与普通网格设计有何区别?
每个版面都有某种隐性网格,即使它从未被有意识地构建。米勒-布罗克曼方法的区别在于系统的严格性与可推导性:网格从第一原则出发构建——栏宽由所用字体与字号的最优行长推导而来,间距与栏成比例,页边距与二者成比例——然后毫无例外地贯彻执行。还有一个哲学维度:网格不是实现视觉平衡的工具,而是一种声明——客观的数学秩序是所有视觉传达的正确基础。普通网格使用是机会主义的;米勒-布罗克曼方法是有原则的。
这套系统是否只能使用黑、白和一种强调色?可以用更宽泛的色板吗?
米勒-布罗克曼本人的历史作品使用极度简化的色板——通常只有黑、白与单一浓烈的红色或黄色。其根本原因不是美学偏好,而是逻辑必要性:网格系统通过层级的清晰度获得权威性,每增加一种颜色都会争夺注意力并稀释那种层级。在当代应用中,更宽泛的色板是可能的,但需要相应增加结构性纪律。如果使用两种强调色,它们在角色上必须有明确区分——一种用于主要动作,一种用于次要状态——且两者都不应在同一构图中作为装饰元素出现。三种或更多强调色通常会超出这套系统在不使版面开始显得随意的前提下维持层级的能力。
这种风格如何处理摄影与复杂图像?
在米勒-布罗克曼版面中,摄影被当作几何块而非自然主义场景处理。图像被裁剪以适应网格——即吸附至一栏、两栏或更多列宽,以及定义的字段高度——而非根据其画面内容调整尺寸。包含大量大气复杂性或色调渐变的照片,往往与周围的高对比度排版产生视觉张力;这种风格更适合具有清晰简洁几何结构的图像:纯色背景上的单一对象、强烈的水平或垂直构图、高对比度的双色调复制品。抗拒裁剪与几何约束的图像可以使用,但需要仔细处理,通常是将其作为出血的全宽区块,与排版网格区域明确分隔。
这种风格适合希望传达温暖感或亲切感的品牌吗?
网格系统的视觉性格是精确、权威与客观——对于将自身定位为专业、可信赖、分析性或严格现代性的品牌而言,这些品质真正有价值。但这些不是感官或情感意义上的温暖品质。依赖温暖感、有机质感或个人亲密感的品类品牌——食品、健康、儿童产品、手工艺品——会发现这种风格与其核心传达目标相悖。可以通过选择读感温暖而非临床的强调色,对这种风格略作柔化——焦糖琥珀色的读感与印刷红截然不同——但这是边际调整,而非性格上的根本转变。对于任何以用户的舒适感或愉悦感为首要目标的品牌,不同的基础美学将更为有效。
我如何判断自己是在正确地应用网格,而不仅仅是让版面看起来整洁?
测试在于可推导性:你能通过引用网格来解释每一个放置决定吗?如果你将标题略向左移是因为看起来更平衡,你就不在网格上——你在目测。如果你能说标题占据第一栏至第五栏,其顶边与第四个水平字段对齐,你就在网格上。一个次要测试是一致性:你是否将相同的网格间隔应用于正文到标题的间距,以及图像到图注的间距?如果版面中不同的关系由不同的逻辑支配,网格就没有真正承担结构性工作——它是背景存在而非承重建筑。真正的网格纪律在你习惯之前感觉几乎过于僵硬;柔化来自于理解留白与比例正在完成美学工作,因此单个元素不需要这样做。