# 粗野主义设计风格：一些微网站url的案例

- 状态 / Status: 已发布 / Published
- 时间 / Time: 2026-04-07T00:05:28+08:00
- 作者 / Author: -
- 主题 / Topics: 建站 / Site Building
- 原文 / Source: https://mp.weixin.qq.com/s/J92MgOCMceSWQ9qmPMcncQ

---

新粗野主义（Neo-Brutalism），后现代粗野主义（Postmodern Brutalism），工业粗野主义（Industrial Brutalism），赛博粗野主义（Cyber Brutalism）

这篇文章提到的“新粗野主义”及其衍生风格，是近年来设计界（尤其是Web UI领域）对过度精致、扁平化审美的一种反叛。这种风格强调 大胆的色彩、厚重的边框、原始的版式、以及刻意为之的“不修边幅”感 。

以下是针对不同细分风格的微网站/网页设计案例（附带URL），你可以直接通过浏览器查看其视觉表现：

### 1. 新粗野主义（Neo-Brutalism）

这是目前最火的商业应用风格，特点是：高饱和度色彩、无渐变硬阴影、粗黑边框、排版不遵循传统网格。

- Gumroad
- Neobrutalism Components (设计组件库)
- Figma (部分专题页/Blog)

### 2. 赛博粗野主义 / 科技感粗野主义（Cyber Brutalism）

这种风格常用于Web3、加密货币、实验性音乐或潮流品牌。特点是：深色模式、故障艺术（Glitch）、单色调、等宽字体、极简代码感。

- Yearn.finance
- Active Theory (实验性页面)
- Poolsuite

### 3. 工业粗野主义 / 后现代粗野主义（Industrial & Postmodern）

强调原始建筑感、结构外露、巨大的字体、排版层叠，甚至有一种“未完成”的错觉。

- Balenciaga (巴黎世家)
- Cargo (个人站点聚合平台)
- Bloomberg (彭博社 - 特殊专题页)

### 4. 案例集锦平台（找灵感必看）

如果你想查看更多此类风格的微网站案例，推荐这两个专门收集此类设计的网站：

1. Brutalist Websites
2. Lapa Ninja (Brutalism 标签)

建议： 在访问这些URL时，请关注它们的 按钮形状（通常是直角） 、 阴影（无羽化） 、 字体（大号标题+等宽字体） ，你会更直观地理解Rico文中所说的设计美学。

既然你打算将这种前卫的风格应用到实际项目中，这份 SOP（标准作业程序）和风格指南（Style Guide）可以作为你快速上手的“清单”。

这份清单将重点放在最主流、最易落地的 新粗野主义（Neo-Brutalism） ，并兼顾其他变体。

## 🎨 粗野主义设计风格 SOP & 检查清单

### 1. 颜色与对比度 (Color & Contrast)

- [ ] 高饱和度主色： 摒弃低调的莫兰迪色。选择纯黄（ #FFD600 ）、亮橙（ #FF5C00 ）、荧光绿或婴儿粉。
- [ ] 纯黑描边（Total Black）： 所有容器、按钮、分割线必须使用纯黑色（ #000000 ），而不是深灰色。
- [ ] 硬对比： 确保背景色与文字、组件之间有极高的视觉对比度。

### 2. 边框与阴影 (Borders & Shadows)

- [ ] 厚重描边： 统一边框宽度（建议 2px - 5px）。
- [ ] 无羽化投影（Hard Shadows）： 绝对不要使用渐变或模糊阴影。使用 0 模糊度的偏移投影。
- [ ] 直角或极小圆角： 尽量保持直角。如果使用圆角，半径建议在 4px - 8px 之间。

### 3. 排版与字体 (Typography)

- [ ] 性格字体： 标题使用粗重的无衬线体（如 Archivo Black , Lexend , 或中文字体里的 阿里妈妈刀隶体/普惠体粗体 ）。
- [ ] 等宽字体（Monospace）： 在正文或功能性标签中使用等宽字体（如 JetBrains Mono , Space Mono ）来增加“工业感”或“代码感”。
- [ ] 超大字号： 标题要大到甚至让人感到“压迫”。
- [ ] 行高与字间距： 紧凑的行高，甚至可以尝试负的字间距（Letter Spacing）来增加视觉张力。

### 4. 布局与结构 (Layout)

- [ ] 不对称布局： 偶尔打破网格，让图片或文本稍微超出容器边界。
- [ ] 明显的分割线： 使用加粗的水平或垂直黑线直接划分模块。
- [ ] 留白（White Space）： 不要吝啬空间。粗野主义需要大量的留白来平衡沉重的线条和色彩。

### 5. UI 组件细节 (UI Elements)

- [ ] 按钮状态： 鼠标悬停（Hover）时，投影应该发生位移或改变颜色。
- [ ] 原始 Icon： 使用粗线条的线性图标，或者直接使用最简单的 emoji。
- [ ] 极简输入框： 没有任何阴影和圆角的矩形框，仅保留黑边。

## 🚀 细分风格微调指南

风格
核心关键词
建议配色
必加元素
新粗野主义
活力、商业、乐观
亮黄、粉紫、橙色
黑色厚边框、硬投影
赛博粗野主义
科技、Web3、冷酷
深黑、荧光绿、纯蓝
代码感、故障效果、等宽字
后现代粗野主义
艺术、反叛、凌乱
米色、原始黑白
重叠排版、巨大的页码
工业粗野主义
结构、原始、力量
灰色、铁锈红、水泥灰
原始纹理、裸露的网格线
## 🛠 开发建议 (Dev Tips)

- CSS 变量优先： 将边框宽度（ --border-width: 3px ）和投影偏移量设为全局变量，确保全站一致。
- SVG 优于位图： 粗野主义非常看重边缘的锐度，所有的插画和装饰尽量使用矢量图。
- 动画反差： 动作要快。避免缓慢的 Ease-in-out，使用瞬间切换或 0.1s 的线性（Linear）变换。

> 小贴士： 粗野主义的精髓在于“真实”。如果一个组件看起来太“完美”了，试着给它加个粗边或者让它偏移几像素，这种“刻意的瑕疵”才是它的灵魂。

你目前手头的项目中，哪一个最打算尝试这种高对比度的风格？