Neubrutalisme Figma：指南完整版，打造大胆设计风格

2025年1月24日 • 7 min • Mickael Saidi

Exemple de maquette Neubrutaliste conçue dans Figma, illustrant l'usage de palettes criardes et de layouts non conventionnels

引言

在一个通常由极简主义和简洁界面主导的数字环境中，一种激进的美学正在兴起并打破常规：新粗野主义。这一运动源自20世纪50年代的粗野主义建筑，如今在界面设计领域崭露头角，推崇原始、大胆和出人意料的设计风格。

对于UX/UI设计师而言，掌握这一趋势不仅仅是风格问题；这是在饱和市场中创造令人难忘且独具特色用户体验的机会。

新粗野主义的特点在于拒绝光滑的表面处理和人为的完美。它依赖于鲜艳的色彩搭配、非对称网格和"未打磨"的外观来吸引用户。在注意力成为稀缺资源的背景下，这种方法能够捕捉目光并强化品牌识别度。

> 关键启示：新粗野主义不等于混乱。其有效性依赖于视觉大胆度与可读性之间的刻意平衡，这需要通过Figma中的细致规划来实现。

理解新粗野主义：超越原始美学

起源与建筑灵感

新粗野主义从粗野主义建筑中汲取灵感，后者强调如混凝土等原始材料的使用，不加修饰。在数字设计中，它转化为一种"原始"且未经过滤的美学，其中不完美成为一种力量。

与极简主义的根本区别

与极简主义试图最大限度简化界面不同，新粗野主义拥抱复杂性和异质性。它可以整合以下元素：

粗边框和突出轮廓
夸张的投影效果
挑战标准的粗体字体
刻意不平衡的非对称构图

新粗野主义的战略价值

这种方法不仅是美学上的任性；它回应了对真实性和差异化日益增长的需求。习惯于千篇一律界面的用户，可能会被敢于打破常规的设计所吸引并产生互动。

新粗野主义设计的基本支柱

大胆的色彩搭配

新粗野主义偏爱鲜艳且有时不协调的色彩组合，这些色彩能够吸引注意力并创造强烈的视觉识别度。这些特点包括：

饱和且充满活力的色调
鲜明的对比以产生冲击效果
打破常规的非传统组合
激进使用的主色调

非传统的网格与布局

放弃对称和僵化的网格。新粗野主义拥抱不对称和不可预测的页面结构，这可以使界面更加动态和吸引人。

富有表现力的字体设计

粗体且有时不规则的字体很常见，用于强化设计的"原始"特性，同时引导用户的视线。

独特的交互元素

交互组件呈现出意想不到的风格：

带有粗边框的按钮
夸张的悬停效果
简单但有力的动画
强烈对比的视觉状态

在Figma中实现新粗野主义：分步指南

设计系统配置

首先在Figma中定义您的基础元素：

色彩样式用于您的大胆调色板
富有表现力和粗体的字体
可重复使用的组件用于按钮和卡片
标准化的效果和边框

创建自定义网格

Figma允许创建自定义网格。测试非传统结构：

破碎网格以产生动态效果
出人意料的排列让用户感到惊喜
策略性使用留白空间
元素的有意叠加

使用效果和边框

整合特征性视觉元素：

明显的投影效果
粗重且可见的边框
纹理效果以强化原始美学
轻微变形以获得有机外观

交互原型制作

使用Figma的原型工具，模拟元素如何响应用户操作：

简单但有力的动画
强化粗野特性的过渡效果
即时且夸张的视觉反馈
令人惊喜的微交互

新粗野主义的挑战与最佳实践

保持可读性

主要陷阱之一是可读性。解决方法包括：

文本与背景之间的足够对比度
在不同光照条件下测试
清晰的可视层次尽管风格大胆
适应高对比度的字体大小

确保可访问性

过于混杂的设计可能带来可访问性问题：

使用内置工具检查对比度比例
确保键盘导航的可行性
遵守网页可访问性标准
使用屏幕阅读器进行验证测试

避免感官过载

为防止视觉疲劳：

大胆元素与休息空间之间的平衡
明显混乱中的一致性
早期用户测试以验证体验
策略性放置的呼吸空间

新粗野主义的竞争优势

显著的差异化

在充斥着相似界面的市场中，新粗野主义提供：

立即可识别的视觉识别度
增强的用户体验记忆性
强大且独特的品牌定位
在竞争中即时识别

增强的用户参与度

粗野主义方法可以产生：

好奇心和界面探索
更强的情感连接
通过惊喜改善的参与率
显著界面的社交媒体分享增加

Figma中的具体应用案例

着陆页设计

以新粗野主义风格创建首页：

带有元素叠加的非对称页眉
带有粗边框的超大按钮
对比鲜明且充满活力的色彩区域
非传统但功能性的导航

移动应用设计

为新粗野主义适配移动端：

适应触摸屏的灵活网格
夸张但直观的触摸交互
保持大胆风格的同时保留视觉层次
尽管有视觉效果仍保持性能

Figma组件实践示例

可重复使用组件库

在Figma中创建有组织的库，包含：

带有4-6px边框的主按钮
直角分明的内容卡片

优化的色彩系统

在Figma中组织您的调色板：

饱和且对比鲜明的主色调
用于文本和背景的灰色调
用于交互元素的强调色
用于警告消息的状态调色板

优化设计工作流程

初步规划

在开始Figma设计前，明确定义：

项目特定的设计目标
目标受众及其期望
需要遵守的技术限制
具有启发性的视觉参考

迭代与验证

采用迭代方法完善您的设计：

快速原型测试概念
定期用户反馈
基于反馈的渐进调整
通过全面测试进行最终验证

设计风格比较

| 特征 | 新粗野主义 | 极简主义 | 拟物化 |

|---------------------|-------------------|-----------------|-------------------|

高级实施指南

Figma中的样式配置

为优化您在Figma中的新粗野主义工作流程：

创建色彩样式并使用一致的命名（主色、辅色、强调色）
为每个层级定义文本样式
为重复元素建立组件
使用清晰部分组织您的库

高级构图技巧

掌握这些技巧以创建有力的新粗野主义设计：

控制透明度的元素叠加
使用蒙版创建复杂几何形状
组合多个网格以产生动态效果
使用大胆过渡效果为组件添加动画

新粗野主义中应避免的常见错误

过度视觉负担

避免这些常见陷阱：

过多元素争夺注意力
过于刺激眼睛的色彩
混乱或难以辨认的视觉层次
元素之间缺乏休息空间

忽视用户体验

牢记这些原则：

功能先于美学 - 设计必须服务于用户
尽管外观颠覆但仍保持直观导航
尽管有效果仍优化加载时间
严格测试多设备兼容性

新粗野主义启发项目

数字设计成功案例

探索新粗野主义的成功实施：

设计师作品集网站使用饱和色彩和破碎网格
具有刻意颠覆性界面的网络应用
通过视觉大胆度吸引注意力的着陆页
挑战可用性惯例的移动界面

具体案例分析

分析这些项目如何成功实施：

保持可读性的对比度策略
尽管不对称仍保持视觉层次
带有视觉效果的性能优化
验证整体体验的用户测试

新粗野主义验证清单

在Figma中最终确定设计前，检查这些基本要点：

✅ 色彩对比度足以保证可读性
✅ 视觉层次清晰尽管不对称
✅ 直观导航得以保持
✅ 性能针对所有设备优化
✅ 可访问性经过测试和验证
✅ 视觉识别度一致且独特

新粗野主义优化策略

Figma 性能优化

为确保复杂视觉效果下的最佳性能：

使用组件 以减少重复
优化图像 和图形资源
限制复杂原型上的实时效果
在不同设备上测试 以验证性能

与团队工作流程集成

采用以下最佳实践以实现高效协作：

创建清晰文档 用于您的设计系统
培训团队 掌握新粗野主义的特性
建立一致的命名 规范
使用团队库 以保持一致性

测试与验证方法

针对新粗野主义的用户测试

实施以下测试以验证您的设计：

可读性测试 针对不同年龄段群体
视觉疲劳评估 在长时间使用场景下
参与度测量 与传统设计对比
转化率分析 针对商业界面

需要监控的性能指标

监控以下关键指标：

图形组件加载时间
不同设备上的动画性能
复杂界面上的放弃率
交互后用户满意度

掌握新粗野主义的高级技巧

大胆与功能性之间的平衡

要在 Figma 中成功实施新粗野主义：

测试每个决策 使用真实用户
衡量对业务目标的影响
逐步调整 效果强度
记录您的选择 以保持一致性

适应技术限制

考虑以下关键技术方面：

浏览器兼容性 针对高级 CSS 效果
移动端性能 处理复杂动画
SEO 优化 尽管视觉风格具有颠覆性
后端集成 与设计组件

结论：掌握大胆与功能性之间的平衡

新粗野主义代表了界面设计领域的一次有益突破，为传统方法提供了充满活力和令人难忘的替代方案。通过掌握其原则并巧妙地在 Figma 中集成，设计师可以创造出吸引用户并增强参与度的体验，同时彰显强烈的品牌个性。

这种实施的成功依赖于大胆与功能性之间的微妙平衡。通过精心规划您的设计系统，严格测试可访问性，并持续关注用户反馈，您可以充分发挥新粗野主义的潜力，同时不损害整体体验。