返回时间线 / Back to timeline 主题归类 / Topic catalog
已发布 / Published 2026-04-07T00:05:28+08:00

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

建站 / Site Building
原文链接 / Source link


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


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

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

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

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

  • Gumroad

    • URL:https://gumroad.com/

    • 特点： 全球公认的新粗野主义UI鼻祖。大量使用亮紫色、粉色、黄色，搭配极粗的黑色描边和无模糊的投影。

      图片

  • Neobrutalism Components (设计组件库)

    • URL:https://neobrutalism.dev/

    • 特点： 这是一个专门展示新粗野主义UI组件的网站，完美复刻了这种风格的交互感和原始感。

      图片

  • Figma (部分专题页/Blog)

    • URL:https://www.figma.com/blog/

    • 特点： Figma的设计语言深受此影响，大量使用非传统布局和大胆的色块拼接。

      图片

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

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

  • Yearn.finance

    • URL:https://yearn.fi/

    • 特点： 典型的Web3审美。界面极简，使用类似蓝底白字的DOS系统感，没有多余的装饰，纯粹的功能导向。

      图片

  • Active Theory (实验性页面)

    • URL:https://activetheory.net/

    • 特点： 将赛博空间与粗野主义结合，大量使用3D模型与原始的排版文字。

      图片

  • Poolsuite

    • URL:https://poolsuite.net/

    • 特点： 怀旧复古科技风格。模拟了80年代操作系统的界面，是赛博与复古粗野主义的完美融合。图片

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

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


  • Balenciaga (巴黎世家)

    • URL:https://www.balenciaga.com/

    • 特点： 奢侈品界粗野主义的领头羊。网站极其简陋（甚至像90年代的文档），大量留白，没有任何修饰，传达出极致的高级感和反主流态度。

      图片

  • Cargo (个人站点聚合平台)

    • URL:https://cargo.site/

    • 特点： 这个平台的模板中心有大量后现代粗野主义案例。它鼓励打破常规排版，文字相互重叠，图像原始。

      图片

  • Bloomberg (彭博社 - 特殊专题页)

    • URL:https://www.bloomberg.com/graphics/

    • 特点： 彭博社的数据可视化专题经常使用极粗的线条和醒目的排版，带有强烈的“媒体粗野主义”色彩。

      图片

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

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

  1. Brutalist Websites

    • URL:https://brutalistwebsites.com/

    • 简介： 全球最著名的粗野主义网站收集站，涵盖了从“原始丑陋”到“先锋时尚”的所有分支。

      图片

  2. Lapa Ninja (Brutalism 标签)

    • URL:https://www.lapa.ninja/category/brutalism/

    • 简介： 精选的商业化新粗野主义落地案例，非常适合UI/UX设计师参考。

      图片

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


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

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

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

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

  • [ ] 高饱和度主色： 摒弃低调的莫兰迪色。选择纯黄（#FFD600）、亮橙（#FF5C00）、荧光绿或婴儿粉。

  • [ ] 纯黑描边（Total Black）： 所有容器、按钮、分割线必须使用纯黑色（#000000），而不是深灰色。

  • [ ] 硬对比： 确保背景色与文字、组件之间有极高的视觉对比度。

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

  • [ ] 厚重描边： 统一边框宽度（建议 2px - 5px）。

  • [ ] 无羽化投影（Hard Shadows）： 绝对不要使用渐变或模糊阴影。使用 0 模糊度的偏移投影。

    • CSS 示例：box-shadow: 4px 4px 0px 0px #000000;

  • [ ] 直角或极小圆角： 尽量保持直角。如果使用圆角，半径建议在 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）变换。

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

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