Article

网页设计风格指南:Brutalism 粗野主义

更新于:2025-06-13 8 min read

什么是网页设计的粗野主义 ?

Brutalism US: [‘bru:təlɪzəm] UK: [‘bru:təlɪzəm] 粗野主义; 野蛮主义;极简粗犷风格

  • ​粗野主义 (Brutalism)​:一种源于建筑领域的设计风格,强调原始、粗糙和反传统的美学,注重功能性而非装饰性,常使用大胆的排版、不对称布局和强烈的对比色。

Brutalism”一词源于法语术语béton brut,意为“粗混凝土”。最初,它用于描述一种在20世纪40年代末和50年代初出现的粗犷、暴露的建筑风格。1950年代兴起于英国兴起的建筑风格,其建筑特色为外露的混凝土和严峻的几何结构,并在1960年代至1970年代间扩散全球各地。

审计委员会 Tribunal de Contas / Aflalo y Gasperini 圣保罗, 1971

粗野主义是一种原始、极简的设计风格,它重视功能而非形式和美学。它往往以极其简单,几乎是极简主义的方法来处理布局和UI设计为特征。是对原始、引人注目的视觉设计的一种大胆、反直觉的诠释——并且很难用定义来界定,因为它本质上旨在挑战定义。

和大多数潮流的兴起一样,粗野主义是对之前风格的一种反动:一种想要抛弃早期繁复、难以言喻的华丽设计的愿望。

伦敦银行 Banco de Londres y Sudamérica / Clorindo Testa 布宜诺斯艾利斯, 1966

为什么粗野主义会在网页设计中兴起?

早期的网页迭代都专注于原始的功能和内容:粗暴累赘的HTML编码网站和大胆的90年代设计主题,在概念上自然类似于建筑粗犷、暴露结构的定义特征。这本身就是一个实用性问题。随着时代的发展,网页才慢慢变成了我们今天看到的样子(绝大多数)——布局合理、遵循用户体验、注重美学和色彩理论等。思想、文化、审美、需求是多元的,对于网页的追求也是,主流网页追求高级美观和完美体验,也同时有了粗野主义发展的土壤。

一些人认为主流网页高级的美学和体验,会营造一种美丽的假象,让人会下意识忽略隐藏网页背后可能存在的缺乏道德和恶意的真实意图。粗野主义网页设计的流行,或许也反映了人们希望互联网能够更透明度、更直接。人们希望网站的底层逻辑和真实意图能像粗野主义建筑展示它的原材料和社会理念一样,一目了然。

粗野主义网页设计的特点

突破常规的配色

粗野主义在建筑学领域经常大量使用灰色、黑色、棕色等冷峻氛围的配色。网页的粗野主义则不同,更多使用刺眼、冲突的色彩搭配来进行设计,和主流的网页美学及色彩理论逆道而行。

“我们并不需要所有映入眼帘的都是尽善尽美的东西。”

https://kaskadproject.com/

非标准的导航和信息层级设计

通常,UX/UI 设计师会遵循用户体验原则,以及合理的信息层级来减少用户认知负荷,并提高网站导航的便捷性。而粗野主义则相反,喜欢使用非标准的导航和粗犷的信息展示方式。

https://namespace.studio/

原始和粗粝的设计理念

从布局排版到色彩搭配,粗野主义网站有意营造出一种原始和未经打磨的环境。这可以从上世纪中叶的建筑中找到灵感和来源,由于时代背景和氛围的影响,建筑强调原始、粗糙的外观,呈现出混凝土的真实纹理,不做过多修饰。

让人想起互联网早期没有使用设计排版和美化的网页状态,是对于当前主流网页文化背对而行的设计理念,抛弃美化和装饰,展示真实而粗粝的本质。

https://en.wikipedia.org/wiki/Main_Page

重复、独特的形状和图案

粗野主义风格的网页设计通常包含重复的形状或图案,或者是二维、三维的独特图形,这保持了一种独特的视觉体验,也经常从上世纪粗野主义盛行的建筑中找到元素和灵感运用,这是对粗野主义建筑的几何特征的理念延续和模仿。

https://www.studio-job.com/

视觉冲击和压迫

粗野主义时期的建筑庞大而不加修饰和外露的清水混凝土和冷峻的几何结构,带来一种粗野巨兽般的压迫感,这种视觉体验也延续到了粗野网页设计中,并且在网页中的运用更加的大胆和自由随性。尤其在追求细腻体验和美观的主流文化对比下,粗野主义网页更显得逆反和异化。

https://src.plus/

粗野主义风格的网站灵感

butalistwebsites.com

brutalistwebsites.com 这个网站的内容和命名一样直接,收集粗野主义风格的网页。内容只有一小段介绍和案例。“在其粗犷和不关心显得舒适或轻松的特质中,粗野主义可以被视为年轻一代对当今网页设计的轻盈、乐观和轻浮的一种反叛。”

https://brutalistwebsites.com/

awwwards-brutalism

Awwwards 是一个知名的网页设计灵感与奖项平台,在合集中专门收集粗野主义风格的网页设计作品,供设计师获取灵感。这个合集在设计感和交互动画各方面都会更加的优秀。

https://awwwards.com/awwwards/collections/brutalism/

总结

粗野主义网页设计并不是说抛弃设计,而是把网站的“骨架”直接展现出来,比如用最基础的排版、按钮和链接,不做多余装饰。这样做,是想让用户一眼看清网站的结构和意图,减少误导和隐藏,让一切都“摆在明面上”。把注意力拉回到内容和功能上,让用户更容易找到自己需要的信息。

粗野主义的“粗糙感”其实是一种态度,传递出网站独特的气质和反叛精神。它挑战主流审美,不怕“看起来不完美”,反而用这种“原始感”表达真实和自我。

设计是一个循环,粗野主义从诞生到今日,如潮水般来回往复,当然在每个时代都会结合当时时代的特征和文化理念,糅合出新的设计风格和思想。

比如新粗野主义(Neo-Brutalism),后现代粗野主义(Postmodern Brutalism),工业粗野主义(Industrial Brutalism),赛博粗野主义(Cyber Brutalism)等等,都是时代追求和复古思潮融合下的产物,这些风格源于粗野主义的原始力量和功能性核心,但通过与其他审美或功能需求的结合,形成了多样化的衍生流派。

关注我的微信公众号,我在这里专注文字创作

微信公众号