新粗野主义 vs 粗野主义：7 个关键区别（附实例）

有段对话我不知道重复过多少遍了：

客户：「我们想要一个粗野主义风格的网站。」

我：「不错啊，粗野主义对你来说是什么意思？」

客户：「你懂的，粗边框、亮色、那种大胆的感觉。」

我：「那是新粗野主义，不是粗野主义。」

客户：「……这还有区别？」

有。而且区别很大。如果你在 2026 年要设计任何「粗野」的东西，就得清楚自己到底在做什么。

粗野主义和新粗野主义共享着同一套 DNA，但它们并不是亲兄弟——更像是走上了完全不同方向的远房表亲。一个诞生于战后建筑，另一个则来自那些受够了圆角、满身反骨的 Web 设计师。

下面就来拆解这两场大胆的设计运动之间的 7 个关键区别。

先来一堂简短的历史课（我保证有用）

在深入这些区别之前，先把背景铺垫一下。

粗野主义：当 1950 年代的建筑遇上 Web

粗野主义始于 1950 年代，最初是一场建筑运动。它的名字来自法语 béton brut，意思是「生混凝土」——这个词把粗野主义建筑的样貌形容得再贴切不过。

想想那些庞大的混凝土建筑、裸露的材料、几何形态，以及零装饰。这些建筑并不想讨人喜欢。它们功能至上、诚实，粗粝得毫不掩饰。

著名的例子：

• 伦敦的巴比肯中心
• 波士顿市政厅
• 蒙特利尔的栖息地 67

快进到 2000 年代初，Web 设计师们开始借用粗野主义的原则——原始的 HTML、极少的 CSS、刻意「丑」的排版。他们抵制那个年代过度设计、堆满 Flash 的网站。

Web 粗野主义成了一种反设计的设计。 功能高于形式。内容高于精致。诚实高于花哨。

新粗野主义：数字原生的反叛

新粗野主义大约在 2015 到 2018 年间兴起，是对千篇一律的 Web 设计的一种回应。如果说粗野主义讲究做减法，那么新粗野主义走的是完全相反的路：把一切都放大。

粗黑的边框。硬朗的投影。高对比的配色。非对称的网格。它保留了粗野主义的大胆，却又加进了玩味、色彩，以及有意为之的设计选择。

新粗野主义不是反设计——它是_大胆_的设计。它拒绝了 2010 年代盛行的那种柔和、圆润、处处粉彩的美学。

Gumroad、Balenciaga、Spotify 这样的品牌纷纷采用了它。Dribbble 和 Behance 上的设计师把它推成了潮流。那么现在呢？它已经是你能选用的最具辨识度的设计语言之一。

7 个关键区别

历史讲完了，接下来就进入真正把这两种风格区分开来的地方。

1. 目的与哲学

粗野主义：功能高于一切

粗野主义的设计根植于极简与诚实。它的哲学很简单：把结构亮出来。别藏着脚手架。别为了装饰而装饰。

在 Web 设计里，这意味着：

• 极少的 CSS
• 裸露的 HTML 结构
• 基础的排版
• 没有动画，也没有花哨的点缀
• 内容为王

**例子：**一个粗野主义的博客，可能会用默认的系统字体、除黑白之外一概无色，导航就是朴素的 <ul> 列表。它可读、实用，完全不费力去讨好眼睛。

新粗野主义：带着意图的大胆表达

新粗野主义保留了粗粝感，却又加入了个性。它不是反设计——而是自信的设计。它的哲学是：与众不同、令人难忘，但不牺牲可用性。

在 Web 设计里，这意味着：

• 精心挑选的配色（黑／白＋明亮的点缀色）
• 作为主张的排版（粗重、几何感的字体）
• 通过对比和尺寸营造的视觉层次
• 提升 UX 的微交互
• 看上去「手工打造」的设计

**例子：**一个新粗野主义的落地页，会给标题用上 Archivo Black，给每个元素加上 4px 的粗边框，配上偏移 6px 的硬投影，还有一个亮黄色的 CTA 按钮。它很大胆，但每一处选择都是深思熟虑的。

区别： 粗野主义问的是「这个我们需要吗？」；新粗野主义问的是「怎么才能让它没法被忽视？」

2. 色彩的运用

粗野主义：单色，或者干脆无色

粗野主义的设计只用黑、白和各种灰。就算出现了颜色，通常也是偶然的（比如蓝色的超链接），或者纯粹是功能性的（报错用的红色）。

为什么？因为颜色是装饰，而粗野主义拒绝装饰。

配色示例：

复制:root {
  --background: #ffffff;
  --foreground: #000000;
  --gray: #666666;
}

就这些。三种颜色。要是你想放飞一下，顶多四种。

新粗野主义：高对比的色块

新粗野主义超爱颜色——但不是那种含蓄的粉彩。我们说的是大胆、饱和、毫不客气的色调。黑与白打底，再加上一两种跳眼的点缀色。

常见的新粗野主义配色：

• 黑＋白＋霓虹黄（#FFDB33）
• 黑＋白＋亮粉（#FF006E）
• 黑＋白＋赛博蓝（#00F0FF）

配色示例：

复制:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #ffdb33;
  --accent: #ff006e;
  --border: #000000;
}

颜色不只是点缀——它们被用来强调、构建层次、注入能量。

**例子：**Gumroad 在黑色背景上用亮黄色的 CTA。Feastables 用霓虹绿和紫色。这些都不是偶然——而是品牌标识的核心。

区别： 粗野主义要么极少用色，要么完全不用。新粗野主义则用得既有策略又大胆。

3. 排版

粗野主义：系统字体与默认值

粗野主义的设计常常是浏览器自带什么就用什么：

• Arial
• Times New Roman
• 系统字体栈

为什么？因为自定义字体被视为多余的装饰。文字该做到可读，而不是好看。

例子：

复制body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

标题也许会稍大一些，但不会靠字重或样式去营造层次。它就是朴素的文字，而且是刻意为之。

新粗野主义：粗重、几何感的展示字体

新粗野主义把排版当作主角。标题巨大、粗重，常常用上有辨识度的几何字体，比如：

• Archivo Black
• Bebas Neue
• Monument Extended
• Druk

例子：

复制h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
 
body {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

排版本身就构建出视觉层次。正文保持可读，标题却在攫取注意力。

**真实案例：**去看看 Balenciaga 的网站。他们的排版巨大、粗重、无法忽视。这就是新粗野主义。

区别： 粗野主义把默认字体当作反装饰的手段。新粗野主义把大胆的排版当作一项设计特色。

4. 布局与结构

粗野主义：裸露的网格、原始的 HTML

粗野主义的布局拥抱 HTML 的默认流。你会看到：

• 单列布局
• 没有样式的列表
• 看起来就像表格的表格
• 没有花哨的网格或 flexbox 技巧

布局是功能性的，常常让人想起早期的 Web 设计（想想 GeoCities 或 Craigslist）。

**例子：**一个粗野主义的作品集，可能会把项目排成一个带时间戳的朴素 <ul>。没有卡片，没有悬停效果，除了浏览器默认值之外没有任何间距。

复制<ul>
  <li>Project 1 - 2025</li>
  <li>Project 2 - 2024</li>
  <li>Project 3 - 2023</li>
</ul>

简单。原始。除了也许调一调外边距，几乎没有别的 CSS。

新粗野主义：非对称网格与图层叠放

新粗野主义的布局会打破网格——而且是故意的。你会看到：

• 非对称的元素摆放
• 相互重叠的板块
• 「浮起」或错位的元素
• 为创意布局大量使用 CSS Grid 和 Flexbox

一切依然是功能性的，但布局本身制造了视觉趣味。

**例子：**一个新粗野主义的 hero 区块可能会有：

• 一个向左错位的大标题
• 一张带粗边框、压在标题上的图片
• 一个非对称摆放的 CTA 按钮
• 用硬投影营造出的纵深

复制<section className="grid grid-cols-2 gap-8 relative">
  <div className="col-span-2 md:col-span-1 z-10">
    <h1 className="text-7xl font-bold uppercase">Your Product</h1>
    <p className="text-xl mt-4">Bold designs for bold brands.</p>
    <Button className="mt-6">Get Started</Button>
  </div>
  <div className="absolute right-0 top-10 w-1/2 border-4 border-black shadow-[8px_8px_0_0_#000]">
    <img src="/hero.png" alt="Hero" />
  </div>
</section>

区别： 粗野主义原封不动地展示结构。新粗野主义则为了冲击力去设计结构。

5. 边框与投影

粗野主义：没有，或极少

粗野主义的设计很少用边框或投影。就算出现了，也很含蓄——顶多是一条 1px 的线，用来分隔板块。

原因呢？投影和边框都是装饰。它们会加上粗野主义想避开的视觉重量。

例子：

复制.section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}

粗野主义的装饰性，也就到此为止了。

新粗野主义：粗边框、硬投影

新粗野主义的一切都在于边框和投影。粗（3～6px）边框和硬朗的投影，就是它标志性的视觉风格。

每一张卡片、每一个按钮、输入框和图片，都会有：

• 一圈粗黑的边框（通常 3～4px）
• 一道硬朗、带偏移的投影（不模糊，就是一块纯色错开）

例子：

复制.card {
  border: 4px solid #000;
  box-shadow: 6px 6px 0 0 #000;
  padding: 2rem;
  background: #fff;
}
 
.button {
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  transition: transform 0.2s, box-shadow 0.2s;
}
 
.button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

效果一眼就能认出来——元素看起来像是被「盖章」印在了页面上。

**真实案例：**Neobrutalism 的组件全都用这种投影风格。Gumroad 的卡片。Feastables 的产品瓷砖。这就是新粗野主义的名片。

区别： 粗野主义回避视觉纵深。新粗野主义则用硬投影和粗边框拥抱它。

6. 交互与动画

粗野主义：天生静态

粗野主义的网站往往是静态的。悬停效果？极少，或者没有。动画？何必费劲。设计关乎的是内容，而不是交互。

就算有交互元素，它们的行为也和默认的 HTML 一模一样：

• 链接是蓝色的，带下划线
• 按钮看起来就是 <button> 元素
• 表单是没有样式的 <input> 字段

例子：

复制<a href="/about">About</a>

那条链接一直是蓝的。悬停时出现下划线。就这样。

新粗野主义：克制却有意图的微交互

新粗野主义用微交互来提升 UX，却又不至于浮夸。比如：

• 悬停时轻轻挪动的按钮（模拟投影在移动）
• 变色或加上粗下划线的链接
• 交互时会放大或抬起的卡片
• 顺滑的页面过渡

动画短促（100～300ms）而有目的——不会分散注意力。

例子：

复制// Framer Motion button interaction
<motion.button
  whileHover={{
    x: 2,
    y: 2,
    boxShadow: "2px 2px 0 0 #000"
  }}
  whileTap={{
    x: 4,
    y: 4,
    boxShadow: "0px 0px 0 0 #000"
  }}
  transition={{ duration: 0.1 }}
  className="border-3 border-black shadow-[4px_4px_0_0_#000]"
>
  Click Me
</motion.button>

按钮在被点击时会「按下去」，给出触感般的反馈。它有玩味，却不过火。

区别： 粗野主义静态而粗粝。新粗野主义则加入了令人愉悦、又能提升可用性的交互。

7. 美学目标

粗野主义：反美学

粗野主义拒绝传统意义上的美。它不打算在常规审美里显得好看——它想要的是诚实、实用，有时甚至带点挑衅。

它的美学目标，是剥去伪装，把底下原始的结构露出来。如果用户觉得丑，那也没关系——说不定这正是它想要的。

例子：

• Craigslist（无意间成了粗野主义）
• The Outline（有意采用粗野主义的新闻网站）
• Bloomberg 的早期改版（内容优先、零装饰）

新粗野主义：大胆的美学

新粗野主义就是想被看见。它大胆、自信、令人难忘。它的美学目标，是在保持功能性的同时脱颖而出。

它不是反对美——而是另一种美。粗粝、几何、有玩味，而且毫不客气。

例子：

• Gumroad 的产品页（大胆、直接、多彩）
• Feastables 的网站（有玩味、有活力、高对比）
• Spotify 的活动页（实验性、非对称、鲜活）

区别： 粗野主义说：「它就长这样，爱要不要。」新粗野主义说：「看看这个——我打赌你从没见过这样的东西。」

并排对比

把这些放进一张直观的表格里：

真实案例对比

来看看真实的网站，感受这些区别是怎么落地的。

粗野主义案例：The Outline

它为什么算粗野主义：

• 白底黑字，零色彩
• 全程系统字体
• 极少的 CSS，内容优先的布局
• 没有边框，没有投影，没有装饰
• 静态、实用、粗粝

设计上的取舍：

• 单列的文章布局
• 大标题，但不做样式化
• 图片自然地打破网格
• 导航就是一个简单的列表

它可读、实用，完全不费力去追潮流。这就是粗野主义。

新粗野主义案例：Gumroad

它为什么算新粗野主义：

• 黑、白、亮黄的配色
• 大胆、敦实的排版
• 每张卡片、每个按钮都有粗边框
• 用硬投影营造纵深
• 非对称布局，配上刻意安排的间距

设计上的取舍：

• 带巨大标题和黄色 CTA 的 hero 区
• 带 4px 边框和 6px 投影的产品卡片
• 悬停时会挪动的按钮
• 高对比，无法忽视

它大胆、有玩味，为脱颖而出而设计。这就是新粗野主义。

什么时候用粗野主义，什么时候用新粗野主义

那到底该选哪个？取决于你的目标。

什么时候该用粗野主义：

1. 内容就是一切

博客、新闻站、文档——如果内容才是全部意义所在，粗野主义能把焦点牢牢留在那里。

2. 你想要最强的无障碍性

默认的 HTML 无障碍性极好。粗野主义那极少的 CSS，意味着对屏幕阅读器来说更少会出岔子的地方。

3. 你想表明一种态度

粗野主义带着挑衅。如果你的品牌是反主流、DIY，或者刻意粗糙的，粗野主义就很合适。

4. 性能至关重要

极少的 CSS ＝ 更快的加载。粗野主义的网站往往不到 100KB。

什么时候该用新粗野主义：

1. 你想脱颖而出

创业公司、代理机构、创意作品集——如果你需要让人记住，新粗野主义能做到。

2. 你的品牌有个性

新粗野主义适合那些大胆、爱玩、自信或者叛逆的品牌。

3. 你在做一款产品

SaaS 仪表盘、落地页、电商——新粗野主义能在保持独特的同时，营造出视觉层次。

4. 你想要现代的美学

新粗野主义有当下感。它在 2026 年成为潮流，是有道理的。

能把两者混用吗？

当然可以。有些最出色的设计，就是从两边各取所长。

混搭做法示例：

• 沿用粗野主义内容优先的哲学
• 加上新粗野主义大胆的排版和色彩
• 布局保持简单（粗野主义），但有策略地加上边框／投影（新粗野主义）
• 动画保持克制（粗野主义），但加上悬停状态（新粗野主义）

关键在于「有意为之」。要清楚你为什么选择每一个元素，而不是照搬潮流。

常见的误区

误区 #1：把什么都叫「粗野主义」

如果你的设计有粗边框和亮色，那它是新粗野主义。粗野主义更粗粝，装饰更少。

误区 #2：把新粗野主义做成「故意丑」

新粗野主义是大胆，不是坏掉。它仍然该有层次、可读性和可用性。

误区 #3：粗野主义用力过猛

真正的粗野主义可能会很刺人。如果用户没法在你的站点里导航，或者读不了你的内容，那就是过头了。

误区 #4：新粗野主义又太保守

如果你只加了一条边框就说它是新粗野主义，那是行不通的。要对这套美学全情投入——粗边框、大胆的色彩、硬投影。

写在最后

粗野主义和新粗野主义不是一回事。它们共享着叛逆的精神，但落地的方式却天差地别。

粗野主义把一切都剥到最简。 它粗粝、诚实，功能性强到近乎偏执。它彻底拒绝装饰。

新粗野主义把一切都放大。 它大胆、多彩、自信。只要是有意为之，它就拥抱装饰。

两者各有各的舞台。粗野主义非常适合那些注重内容、需要清晰和性能的项目。新粗野主义则很适合那些需要脱颖而出、制造声势的品牌。

最糟糕的做法是什么？把两者混为一谈，或者对哪个都只投入一半。要走粗野主义，就走得彻底。要走新粗野主义，就大胆到底。

现在你知道区别在哪了。用得聪明些。🚀

想构建新粗野主义的界面？ 去看看 Neobrutalism——一个为大胆、难忘的设计而生的完整 UI 库。它的组件、区块和模板，在不牺牲可用性的前提下，尽情拥抱新粗野主义的美学。