让结构可见
用边框明确卡片、输入和操作的范围,减少猜测;只有真正可操作的物件才表现出按压反馈。
把想法
摆上桌。
为有主见的创作者,留一个足够醒目的位置。
用粗轮廓、无模糊的偏移阴影、大字号和鲜明色块,把界面做成一组坦率、可按压的平面物件。Neobrutalism(也写作 Neubrutalism)是近年网页与产品设计中的松散标签,不是有统一宣言的历史学派;这里的“野兽”也不指绘画中的野兽派。
用边框明确卡片、输入和操作的范围,减少猜测;只有真正可操作的物件才表现出按压反馈。
夸张标题与少数强调色建立记忆点,正文仍使用稳定字号和行距。
视觉可以粗粝,信息组织仍要精确。保留网格、留白、对比与键盘焦点。
当数字产品越来越依赖相似的卡片、圆角、柔和阴影与无衬线字体,界面变得熟悉,也更容易彼此混淆。创作者平台与独立产品需要一种能被记住、又能清楚介绍商品与操作的面孔。
网页粗野主义早已质疑精致模板:把结构、系统字体和未经修饰的内容放到前台。新野兽派借用了这种直白态度,但常保留规整布局,加入明亮色块与明确按钮,让视觉更亲近,也适合销售和交互。
Gumroad 的改版是重要参照。2022 年官方先后宣布个人页、文章与产品页更新,并强调更高对比度和可访问性。设计讨论随后把硬阴影、粗描边与强烈配色提炼为一套易于识别、容易复用的界面语言。
它回应的是“怎样在熟悉的操作结构中显露个性”。建筑粗野主义提供了名称联想,网页粗野主义提供了反精修语境,但这并不意味着三者有同一个起点或组织。鲜明外观也不能替代阅读层级与清晰反馈。
建筑粗野主义强调材料与结构的显露;数字设计借用其名称与态度,而不是照搬建筑形式。
Brutalist Websites 汇集直接、粗粝或反常规的网页,让网页粗野主义成为可讨论的设计语境。
Gumroad 公布新版个人页与文章页,明确强调更高的视觉对比度和更易访问的代码。
Gumroad 宣布产品页改版,新的视觉语言从品牌展示延伸至真实购买流程。
Michał Malewicz 等设计传播者分析 Neubrutalism,描边、硬阴影和鲜明色块成为常见讨论特征。
持续出现的深色描边,把内容容器和操作区域切分清楚。粗细需要有节制,而非每一行都画框。
偏移但不羽化的实色阴影像剪纸叠层;按钮按下时沿同一方向移动,回应它的深度暗示。
奶油底色搭配黄、粉或青色。强调色负责引导,深色正文负责阅读,不依赖颜色独自表达状态。
厚重标题形成冲击;小字号正文不跟着挤压变形,保持清楚的段落与层级。
卡片、分隔线与大面积留白形成稳定骨架。视觉张力来自比例和对比,而不是随机摆放。
创作者市集
小作品,大主张。探索素材 ↗虚构的 OPEN STUDIO 市集:把主张、商品与行动入口切成清楚的大区块。这里演示组织与排版,不复刻某个品牌。
24 个 SVG · 教学样例
€12虚构商店 · 交互示范一张虚构的图形素材包卡片:封面、格式、价格与操作依次可读,硬阴影帮助识别按钮的按压状态。
24 个 SVG · 教学样例
€12焦点和按压反馈,也是视觉语言的一部分。
实践案例:把高对比的品牌语言延伸到销售界面。团队案例不意味着某一个人发明了整个风格。
分析与传播:将粗边框、硬阴影等特征放进界面设计讨论,帮助设计者辨认这种视觉趋势。
前史与策展:其档案展示网页粗野主义的多种面貌;不能把其中所有网站都归为彩色的新野兽派。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111Archivo Black · Inter · Noto Sans SC
.card {
background: #fffdf5;
color: #111;
border: 3px solid #111;
box-shadow: 8px 8px 0 #111;
padding: 24px;
}
.button {
background: #ffde59;
color: #111;
border: 3px solid #111;
box-shadow: 5px 5px 0 #111;
padding: 12px 24px;
cursor: pointer;
}
.button:active {
transform: translate(5px, 5px);
box-shadow: none;
}
.button:focus-visible {
outline: 3px solid #111;
outline-offset: 5px;
}以下链接表示视觉参照与对照,不是单一的师承谱系。
事件图解 · 01
建筑粗野主义强调材料与结构的显露;数字设计借用其名称与态度,而不是照搬建筑形式。
相关资料图:用于理解人物、作品或视觉背景,并非该事件的现场记录。日期与版本见图片说明。

Alison 与 Peter Smithson 设计的 Robin Hood Gardens 住宅,真实建筑照片
Alison / Peter Smithson (work); stevecadman (image source) · 图片来源 ↗ · CC BY-SA 2.0结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
事件图解 · 02
Brutalist Websites 汇集直接、粗粝或反常规的网页,让网页粗野主义成为可讨论的设计语境。
相关资料图:用于理解人物、作品或视觉背景,并非该事件的现场记录。日期与版本见图片说明。

Pascal Deville,Brutalist Websites 真实档案网站,2026-10-14 截图
Pascal Deville / Brutalist Websites · 图片来源 ↗ · © Pascal Deville / Brutalist Websites · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
事件图解 · 03
Gumroad 公布新版个人页与文章页,明确强调更高的视觉对比度和更易访问的代码。
历史作品 / 史料。拍摄日期与版本见图片说明。

Gumroad 个人页与文章页改版前后对比,官方于 2022-01-19 发布的原始截图
Gumroad design & engineering team · 图片来源 ↗ · © Gumroad · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
事件图解 · 04
Gumroad 宣布产品页改版,新的视觉语言从品牌展示延伸至真实购买流程。
历史作品 / 史料。拍摄日期与版本见图片说明。

Gumroad 产品页改版,官方于 2022-03-08 发布的原始截图
Gumroad design & engineering team · 图片来源 ↗ · © Gumroad · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
事件图解 · 05
Michał Malewicz 等设计传播者分析 Neubrutalism,描边、硬阴影和鲜明色块成为常见讨论特征。
历史作品 / 史料。拍摄日期与版本见图片说明。

Michał Malewicz 的文章封面,含作者真实肖像与新野兽派图形
Michał Malewicz / Hype4 Academy · 图片来源 ↗ · © Michał Malewicz / Hype4 Academy · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
人物与作品 · 01
个人页、文章与产品页改版 · 实践案例:把高对比的品牌语言延伸到销售界面。团队案例不意味着某一个人发明了整个风格。

Gumroad 真实网站,2026-10-14 截图(当前界面,非 2022 历史快照)
Gumroad design & engineering team · 图片来源 ↗ · © Gumroad design & engineering team · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
人物与作品 · 02
Neubrutalism is taking over the web · 分析与传播:将粗边框、硬阴影等特征放进界面设计讨论,帮助设计者辨认这种视觉趋势。

Michał Malewicz 的文章封面,含作者真实肖像与新野兽派图形
Michał Malewicz / Hype4 Academy · 图片来源 ↗ · © Michał Malewicz / Hype4 Academy · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
人物与作品 · 03
Brutalist Websites · 前史与策展:其档案展示网页粗野主义的多种面貌;不能把其中所有网站都归为彩色的新野兽派。

Pascal Deville,Brutalist Websites 真实档案网站,2026-10-14 截图
Pascal Deville / Brutalist Websites · 图片来源 ↗ · © Pascal Deville / Brutalist Websites · All rights reserved结合图片说明辨认这里展示的真实人物或作品,再与上方的创作方法和视觉规则对照。
视觉基因 · 01
持续出现的深色描边,把内容容器和操作区域切分清楚。粗细需要有节制,而非每一行都画框。
对照放大的示例与下方色板,观察这一视觉要素怎样影响识别、节奏和整体氛围。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
视觉基因 · 02
偏移但不羽化的实色阴影像剪纸叠层;按钮按下时沿同一方向移动,回应它的深度暗示。
对照放大的示例与下方色板,观察这一视觉要素怎样影响识别、节奏和整体氛围。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
视觉基因 · 03
奶油底色搭配黄、粉或青色。强调色负责引导,深色正文负责阅读,不依赖颜色独自表达状态。
对照放大的示例与下方色板,观察这一视觉要素怎样影响识别、节奏和整体氛围。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
视觉基因 · 04
厚重标题形成冲击;小字号正文不跟着挤压变形,保持清楚的段落与层级。
对照放大的示例与下方色板,观察这一视觉要素怎样影响识别、节奏和整体氛围。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
视觉基因 · 05
卡片、分隔线与大面积留白形成稳定骨架。视觉张力来自比例和对比,而不是随机摆放。
对照放大的示例与下方色板,观察这一视觉要素怎样影响识别、节奏和整体氛围。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
载体解析 · 01
虚构的 OPEN STUDIO 市集:把主张、商品与行动入口切成清楚的大区块。这里演示组织与排版,不复刻某个品牌。
先看内容如何组织,再看载体的比例与观看距离:同一种风格,在海报、封面或界面上会做出不同选择。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。
载体解析 · 02
一张虚构的图形素材包卡片:封面、格式、价格与操作依次可读,硬阴影帮助识别按钮的按压状态。
先看内容如何组织,再看载体的比例与观看距离:同一种风格,在海报、封面或界面上会做出不同选择。
#ffde59#ff7ad9#5ce1e6#fffdf5#111111先辨认主形,再看颜色、字体与留白如何配合。可回到本页实验室亲手改变这些参数。