风格图鉴

2018– · 网页与产品设计

新野兽派NEO
BRUTALISM.

粗黑描边 · 硬阴影 · 原色

进入实验室 ↗
独立制作 ↗

把想法
摆上桌。

为有主见的创作者,留一个足够醒目的位置。

01定义

用粗轮廓、无模糊的偏移阴影、大字号和鲜明色块,把界面做成一组坦率、可按压的平面物件。Neobrutalism(也写作 Neubrutalism)是近年网页与产品设计中的松散标签,不是有统一宣言的历史学派;这里的“野兽”也不指绘画中的野兽派。

01 ↗

让结构可见

用边框明确卡片、输入和操作的范围,减少猜测;只有真正可操作的物件才表现出按压反馈。

02 ↗

把个性放大

夸张标题与少数强调色建立记忆点,正文仍使用稳定字号和行距。

03 ↗

直白而有秩序

视觉可以粗粝,信息组织仍要精确。保留网格、留白、对比与键盘焦点。

02历史脉络

诞生的故事

当数字产品越来越依赖相似的卡片、圆角、柔和阴影与无衬线字体,界面变得熟悉,也更容易彼此混淆。创作者平台与独立产品需要一种能被记住、又能清楚介绍商品与操作的面孔。

网页粗野主义早已质疑精致模板:把结构、系统字体和未经修饰的内容放到前台。新野兽派借用了这种直白态度,但常保留规整布局,加入明亮色块与明确按钮,让视觉更亲近,也适合销售和交互。

Gumroad 的改版是重要参照。2022 年官方先后宣布个人页、文章与产品页更新,并强调更高对比度和可访问性。设计讨论随后把硬阴影、粗描边与强烈配色提炼为一套易于识别、容易复用的界面语言。

它回应的是“怎样在熟悉的操作结构中显露个性”。建筑粗野主义提供了名称联想,网页粗野主义提供了反精修语境,但这并不意味着三者有同一个起点或组织。鲜明外观也不能替代阅读层级与清晰反馈。

时间线

  1. 前史

    建筑粗野主义强调材料与结构的显露;数字设计借用其名称与态度,而不是照搬建筑形式。

  2. 2010s

    Brutalist Websites 汇集直接、粗粝或反常规的网页,让网页粗野主义成为可讨论的设计语境。

  3. 01 / 2022

    Gumroad 公布新版个人页与文章页,明确强调更高的视觉对比度和更易访问的代码。

  4. 03 / 2022

    Gumroad 宣布产品页改版,新的视觉语言从品牌展示延伸至真实购买流程。

  5. 2022–

    Michał Malewicz 等设计传播者分析 Neubrutalism,描边、硬阴影和鲜明色块成为常见讨论特征。

资料来源

03视觉基因

轮廓就是边界

持续出现的深色描边,把内容容器和操作区域切分清楚。粗细需要有节制,而非每一行都画框。

没有模糊的阴影

偏移但不羽化的实色阴影像剪纸叠层;按钮按下时沿同一方向移动,回应它的深度暗示。

少数鲜明色块

奶油底色搭配黄、粉或青色。强调色负责引导,深色正文负责阅读,不依赖颜色独自表达状态。

标题大胆,正文克制

厚重标题形成冲击;小字号正文不跟着挤压变形,保持清楚的段落与层级。

粗粝表面的精确网格

卡片、分隔线与大面积留白形成稳定骨架。视觉张力来自比例和对比,而不是随机摆放。

04展示载体

OPEN STUDIO↗

创作者市集

小作品,大主张。探索素材 ↗
图形 / 模板 / 灵感

创作者市集落地页

虚构的 OPEN STUDIO 市集:把主张、商品与行动入口切成清楚的大区块。这里演示组织与排版,不复刻某个品牌。

形状素材包

24 个 SVG · 教学样例

€12

虚构商店 · 交互示范

数字商品卡

一张虚构的图形素材包卡片:封面、格式、价格与操作依次可读,硬阴影帮助识别按钮的按压状态。

05让卡片有重量

调整描边和阴影,再按一按预览按钮。把参数降到零,观察识别度怎样变化;范围是教学实验,并非统一规范。

强调色

形状素材包

24 个 SVG · 教学样例

€12

焦点和按压反馈,也是视觉语言的一部分。

06代表人物

  • 01 ↗

    Gumroad 设计与开发团队

    2022

    个人页、文章与产品页改版

    实践案例:把高对比的品牌语言延伸到销售界面。团队案例不意味着某一个人发明了整个风格。

  • 02 ↗

    Michał Malewicz

    2022

    Neubrutalism is taking over the web

    分析与传播:将粗边框、硬阴影等特征放进界面设计讨论,帮助设计者辨认这种视觉趋势。

  • 03 ↗

    Pascal Deville

    2010s

    Brutalist Websites

    前史与策展:其档案展示网页粗野主义的多种面貌;不能把其中所有网站都归为彩色的新野兽派。

07正误对照

✓ 这样做

  • 让主要动作拥有明显标签与按压反馈
  • 用少数强调色和一致的硬阴影
  • 为正文保留舒适行距和留白
  • 用焦点轮廓、文字与形状共同传达状态

✗ 别这样

  • 把所有文字都变成超大粗体
  • 把可读性差的撞色当作风格要求
  • 让装饰卡片看起来比真正按钮更可点击
  • 用随机旋转与重叠遮挡价格和操作

08设计规范

色彩

  • 黄色#ffde59
  • 粉色#ff7ad9
  • 青色#5ce1e6
  • 纸白#fffdf5
  • 墨黑#111111

字体(免费替代)

Archivo 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;
}

09当代应用

  • 01

    创作者平台与数字商品市集

  • 02

    独立工具与小型产品的落地页

  • 03

    文化活动、工作坊与报名页面

  • 04

    有明确个性的编辑专题与作品集

  • 05

    品牌活动中的卡片、贴纸与社交图形

10风格关系

以下链接表示视觉参照与对照,不是单一的师承谱系。

页面示例为原创教学示意;参考图像另附来源、作者与许可信息。
← Niuance