粗野主义界面设计：为什么“丑”的 UI 正在流行？

在圆角、柔和渐变和“安全”的扁平化设计统治界面近十年之后，一种看起来“不太礼貌”的视觉语言正在持续进入主流视野：粗黑边框、零模糊的硬阴影、高饱和平涂色块，以及拒绝被柔化的排版。它常被笼统地称为“粗野主义UI”，更准确的当代形态是新粗野主义（Neo-Brutalism） 。如果只把它理解为一种“丑得刻意”的风格实验，就会错失它真正的信号：当界面设计被效率、算法和同质化推向极致时，“不光滑”反而成了一种稀缺的表达资源。

粗野主义不是一种东西：三个阶段的谱系

把粗野主义界面设计等同于“反设计”或“丑网页”，是讨论中最常见的误解。它实际上经历了三次明显不同的转向，彼此共享精神气质，却在方法与后果上截然不同。

建筑粗野主义是源头。术语来自法语 béton brut（清水混凝土），指20世纪中期那些将结构材料直接暴露、拒绝装饰性外覆层的建筑。它的核心原则不是“丑”，而是对建造方式的诚实。

网页粗野主义（Web Brutalism） 大约在2014年前后成形。它借用了建筑粗野主义的态度，却没有继承其纪律：浏览器默认字体、裸露的HTML元素、未经修饰的链接和表格，刻意营造一种“未完成”的观感。它是对彼时过度设计、Flash臃肿和模板化企业网站的反动，功能优先于形式，内容优先于抛光。但代价也很直接：它经常以牺牲可用性为代价，因此长期停留在设计师作品集和艺术项目的边缘地带。

真正进入商业界面并形成可复用系统的，是新粗野主义。它保留了“拒绝柔化边缘”的结构态度，但加入了饱和色彩、宽松字体和明确的功能可供性（affordance）。按钮重新看起来像按钮，界面响亮，但可导航。这正是商业品牌愿意采用它、而网页粗野主义未能主流化的关键区别。

视觉配方：三条规则，而不是一种“感觉”

新粗野主义之所以能在设计系统和组件库中稳定下来，是因为它的视觉语言可以被拆解为极少数可量化、可复现的规则。剥离色彩偏好之后，它的底层是三条CSS层面的决定。-6

第一，边框足够粗，粗到成为图形元素本身。典型范围在2px到5px之间，几乎总是单一平涂色，通常接近纯黑。1px的边框是分隔线；4px的边框则变成了有独立视觉权重的形状边界。

第二，阴影零模糊。传统阴影用模糊半径模拟环境光，而新粗野主义的阴影把模糊值设为0，制造的是一个与元素错位的实心色块，读起来像印刷品的硬边投影或贴纸，而不是深度。

第三，表面是平涂高饱和色，没有渐变。亮黄、荧光绿、青色、热粉在白色或暖白底上以单一色块出现。因为填充是平的，边框和硬阴影才能在其上保持清晰可读；一旦引入渐变，这套语言就开始失效。

这套配方还催生了一个标志性的交互约定：悬停或按下时，元素“进入自己的阴影” ，阴影收缩、元素位移，形成一种物理按压感，而不是发光或淡入淡出。新粗野主义并不只是静态外观，它有一套与视觉规则一致的触觉隐喻。

为什么偏偏是现在：三种结构性推力

如果新粗野主义只是“看起来不一样”，它不会在商业界面中持续扩散。它的流行对应着三个同时起作用的结构性条件。

第一，AI生成设计正在制造一种“抛光单文化”。 当布局、配色和组件可以通过提示词在极短时间内生成时，默认输出必然是“最安全”的平均值：可预测的层级、温和的对比度、不会冒犯任何人的圆角。问题不在于这些设计“难看”，而在于它们越来越难以被记住，也越来越难以传达“这是一个人做出的选择” 。在AI可以无限生产光滑表面的条件下，粗糙、不对称和刻意的不顺从反而变成了一种低成本的人性信号。粗野主义在2020年代的重新兴起，不只是审美轮回，它在某种程度上是对算法化视觉平均值的拒绝。-19

第二，界面注意力的稀缺性在加剧。 在信息流、应用商店和落地页的竞争中，一个视觉上“礼貌”的界面很容易被滑过。粗黑边框和高饱和色块在低分辨率、快速扫视的条件下具有极高的可识别性，这使新粗野主义天然适合需要被立刻看见和记住的场景：品牌落地页、创意产品、面向年轻用户的消费品和独立工具。-11

第三，它在可访问性上有一个被低估的“反向优势”。 人们通常假定响亮的风格必然牺牲可读性，但实测数据给出了相反的图景。新粗野主义签名配色在WCAG 2.1相对亮度公式下的对比度表现相当稳健：黑底白卡为21:1，黑字亮黄约为15.70:1，即使是该体系中对比度最弱的黑字热粉组合，也达到7.93:1，仍然越过AAA级门槛。作为对比，前一个设计周期中流行的新拟态（Neumorphism）阴影方案，表面与投影的对比度可以低至1.65:1，连非文本元素的3:1最低要求都无法满足。一套建立在纯黑与高饱和平涂上的视觉系统，在色彩对比这个轴向上反而很难做得不可访问。

但“丑”的代价是真实的：可用性不能靠风格抵消

到这里，如果文章停在对新粗野主义的辩护上，就会重复趋势文章最常见的错误：把视觉冲击力误认为完整的用户体验。粗野主义界面设计最需要被认真对待的批评，恰恰来自可用性研究。

一项针对粗野主义网站的系统性实证研究，使用Nielsen可用性属性问卷（NAU）、系统可用性量表（SUS）和有声思维协议，对31名参与者进行了测试。结论并不温和：参与者在粗野主义网站上出现了信息检索困难、导航问题和方向感缺失。研究的判断是，偏离可用性启发式原则对用户体验是有害的，粗野主义网站的视觉特征“虽然引人注目，但并未交付一个以用户为中心的产品”。

这一发现并不否定粗野主义的全部价值，但它划定了一条清晰的边界：视觉上的“诚实”和“冲击力”不能替代信息架构、导航清晰度和任务完成效率。 新粗野主义在商业上比网页粗野主义更成功，部分原因正是它在保留结构张力的同时，重新引入了可操作的按钮和可辨别的层级。即便如此，它在复杂信息环境中仍然需要额外的可用性投入，而不是靠风格本身“自带”好用。

它适合什么，不适合什么

新粗野主义不是一种普适的界面策略。它的适用性高度依赖产品语境与用户对“不流畅”体验的容忍度。

相对适合的场景包括：创意机构与个人作品集、面向年轻用户的消费品品牌、需要强记忆点的营销落地页、初创公司的MVP和演示界面，以及在仪表盘和后台工具中用于区分KPI卡片、数据区块和功能区域的视觉框架。在这些场景中，视觉表达本身就在传递品牌信号，用户对非标准界面的容忍度也更高。

需要审慎对待或避免的场景同样明确：医院、律师事务所、金融服务、奢侈品，以及需要建立“克制可信感”的复杂企业级SaaS核心流程。在这些语境中，粗野主义的“冷”和“硬”可能与用户对稳定、安全和低认知负荷的期待直接冲突。此外，即使在适合的场景中，也有三个可访问性陷阱需要专门处理：粗黑边框会吞没默认的焦点环，必须显式定义对比色的 :focus-visible 样式；大面积高饱和填充不适合放在长文本背后；浅色文字置于中等饱和度色块之上是最容易失效的配色组合。

结语：问题不在“丑”，在是否是被选择的

粗野主义界面设计之所以在当下持续获得关注，不是因为它证明了“丑更好用”，而是因为它暴露了主流界面设计中一个长期被光滑表面掩盖的问题：当效率、安全性和生成工具共同把界面推向平均值时，视觉上的“不合作”重新获得了一种表达功能。它是对同质化的拒绝，是对“这个界面被某人主动选择过”的信号，也是在AI可以无限抛光表面的条件下，一种低门槛、高辨识度的人性痕迹。

但它的边界同样清晰。粗野主义用视觉冲击力换取注意力的同时，并不自动解决可用性问题；它可以是一种有力的品牌语言，却不能替代信息架构和任务设计。真正值得从这场趋势中带走的，不是某组CSS参数，而是一个更根本的判断：界面风格的合法性，不在于它光滑还是粗糙，而在于它是否与产品语境、用户期待和任务目标之间形成了一致的选择。 粗野主义在适合的地方是一种信号，在错误的地方则是一种噪音。区分这两者，才是设计判断发生的位置。