恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
网页设计风格指南:粗野主义 Brutalism
0.0°
2025-06-18 原创文章 设计趋势 举报 74 0 0 0

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

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


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

“Brutalism”(粗野主义)一词源自法语术语 béton brut,意为“裸露混凝土”、"清水模"或“清水混凝土”,指未经修饰、直接暴露的混凝土表面。这一术语最初用于描述20世纪40年代末至50年代初在英国兴起的一种建筑风格。粗野主义建筑以其裸露的混凝土结构、严峻的几何形体和强调建筑材料本身的质感为主要特征,并在20世纪50年代至70年代间传播到世界各地。

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


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

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

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


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


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

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


粗野主义网页设计的特点


突破常规的配色


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

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

kaskadproject.comkaskadproject.com


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

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

namespace.studionamespace.studio


原始和粗粝的设计理念


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

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

wikipedia.orgwikipedia.org


重复、独特的形状和图案


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

studio-job.comstudio-job.com


视觉冲击和压迫


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

src.plussrc.plus


粗野主义风格的网站灵感


Butalist Websites


brutalistwebsites.com  这个网站的内容和命名一样直接,收集粗野主义风格的网页。内容只有一小段介绍和案例。

"In its ruggedness and lack of concern to look comfortable or easy, Brutalism can be seen as a reaction by a younger generation to the lightness, optimism, and frivolity of today's web design." —— Brutalist Websites

“在其粗犷和不关心显得舒适或轻松的特质中,粗野主义可以被视为年轻一代对当今网页设计的轻盈、乐观和轻浮的一种反叛。”

brutalistwebsites.combrutalistwebsites.com


Awwwards/collections/brutalism/


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


awwwards.com/awwwards/collections/brutalism/
awwwards.com/awwwards/collections/brutalism/


总结


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

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

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

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

                 

Powered by Froala Editor

更新:2025-06-18

收藏

0人已收藏

Rico的设计漫想

写代码的网页设计师

  • 10

    作品

  • 6

    粉丝

  • 4

    关注

  • 设计师的个人作品网站
  • 3D 图标资产 - 情人节
  • 模特品牌网站-Model Agency Website
  • Blender 3D UI 图标资产库

    猜你喜欢

      2025-06-18 原创文章 设计趋势 举报 74 0 0 0

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

      0.0°

      你确定要举报网页设计风格指南:粗野主义 Brutalism

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2025年06月16日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      0
      0
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录