最近打开网页时,你可能会发现越来越多的网站开始使用大胆的黑色边框、撞色设计,甚至故意保留粗糙的手绘元素。
这种风格的兴起是对光滑极简设计的反叛,创造出极具冲击力(近乎叛逆)的视觉风格。
这种被称为"新粗野主义"的设计风格正在席卷数字世界,今天就让我们来深入了解一下这个有点叛逆的潮流。
什么是新粗野主义?
Neobrutalist网站设计融合了大胆的色彩和鲜明的对比度,形成了引人注目的界面。
新粗野主义(Neobrutalism)是传统粗野主义(Brutalism)的演变,是一种以高对比度、块状布局、鲜艳色彩、粗边框和 “未打磨” 元素为特征的视觉设计趋势。
粗野主义 vs. 新粗野主义
二者均为前卫的视觉设计风格,灵感源自同名建筑运动。在数字设计中,粗野主义倾向于原始、冷峻、未完成或实用主义的外观,可能使用朴素的 HTML 元素和有限的配色方案。
案例:Drudge Report以极简 HTML 结构、等宽字体标题和严格的表格布局体现粗野主义美学,重现了前 CSS 时代的网页风格。
Drudge Report的网站采用了残酷主义风格,其精简的美学。
相比之下,新野蛮主义将野蛮主义设计风格与怀旧的90年代平面设计元素相结合。与真正的野蛮主义网页设计不同,新野蛮主义设计可能更加丰富多彩和有序。
一个引人注目的例子是Halo Lab的Look Beyond Limits,它具有超大排版、大胆的分隔线、厚重的笔触和明亮的色彩。
Halo Lab的Look Beyond Limits以其原始、结构化布局和超大排版拥抱了新残酷主义。
新粗野主义的特征
高对比度和明亮的色彩
新粗野主义设计使用大胆的原色和高对比度的组合来强调关键功能和用户界面元素。这种方法引入了醒目、对比鲜明的色调,以吸引注意力并增强视觉冲击。它还帮助用户专注于基本元素,同时创造非常规的、令人难忘的体验。
99percentoffsale.com通过大胆、高对比度的颜色拥抱新残酷主义,打造出引人注目的视觉风格。
粗线条和几何形状
大量使用粗边框、棱角分明的图形和实线,无需渐变或阴影即可构建结构感。
byooooob.com:厚实的边框、实线、鲜艳的色彩和醒目、俏皮的形状是新布鲁塔利主义视觉风格的典型。
强烈的投影
与极简主义的柔和阴影不同,新粗野主义采用醒目、单色的投影(如 4px 偏移的黑色阴影),在保持 “原始” 美学的同时增加层次感。
与通常强调平面、简单的外观和感觉的极简主义设计不同,新残酷主义通常以大胆、坚实的阴影为特色,在保留原始美学的同时创造深度。
粗字字体
使用大胆、“未打磨” 的字体,甚至带有古怪或小众风格。通过大量留白平衡字体的表现力,形成刻意设计的视觉节奏。新粗野主义中的排版既是功能元素,也是整体设计的焦点。
Tinloof的Tony's Chocolonely电子商务使用大胆、古怪的排版,强化了品牌的个性。
拟物化元素
融入早期数字界面的怀旧元素(如 Windows 98 风格按钮、等宽字体),将复古美学与现代设计结合。例如,新粗野主义设计可能会使用旧浏览器的用户界面元素,传统的标志性按钮和外观模仿早期的网络体验。
cyanbanister.com:新暴力主义将复古用户界面元素(如像素艺术和老式浏览器窗口)与现代设计元素(如当代排版和布局)相结合。
新粗野主义实践案例
许多品牌正在拥抱新粗野主义的大胆、原始的美学,通过引人注目的对比、非常规的排版和极简主义设计来创造令人难忘的体验。这种方法反映了向优先考虑目的和功能而不是过度抛光的转变,使品牌在拥挤的数字环境中脱颖而出。
Figma和Gumroad等品牌融合了大胆、高对比度的颜色和原始元素,专注于用户体验和简单性。
Figma品牌焕新后采用大胆对比和非常规字体,强调创意自由与灵活的用户体验,与其工具定位一致。
Figma大胆的几何设计反映了创作自由。
同样Gumroad作为独立创作者电商平台,以粗粝设计呼应 “赋能创作者” 的理念,剥离冗余修饰,聚焦功能与易用性。
Gumroad的原始设计赋予了创作者简单性。
新粗野主义设计最佳实践原则
虽然新册页主义在大胆的色彩、繁重的排版和鲜明的对比中蓬勃发展,但如果没有平衡,它可能会压倒用户并阻碍可访问性。这些提示有助于创建既美观又用户友好的设计。
以可用性为核心
优先考虑清晰的按钮、可读的字体和充足的空白的可用性,以保持直观和可访问的体验,即使在大胆、原始的美学中也是如此。
API世界登陆页面融合了新暴力主义美学,同时通过其清晰的搜索功能和行动号召来保持可用性。
重视对比度标准
鲜艳颜色必须符合文本对比度标准。避免搭配黄色和青色等鲜艳的色调,这些色调不会通过可读性测试。Coolors的对比度检查器等工具确保组合在保持视觉吸引力的同时保持可访问性。
尽管新残酷主义使用明亮、对比鲜明的颜色,但它仍然需要满足可读性和可访问性标准。
限制配色方案
将主色调控制在 2-3 种高对比度颜色(如黑、荧光绿、电光蓝),避免视觉过载。
bieffeforniture.it使用2种主要的高对比度颜色(电蓝色和红色)来帮助保持清晰度,避免用户不堪重负。
优先保证可读性
标题可使用粗粝无衬线字体,正文选择 Roboto 等干净中性字体,避免过度装饰或压缩字体影响跨设备阅读,
dodonut.com采用新粗野主义风格,同时仍然保持清晰的按钮、可读文本和充足的空白。
策略性使用留白
通过 24-32px 的边距为密集的几何图形和粗边框创造呼吸空间,引导用户聚焦关键内容。
新粗野布局中的内容需要足够的填充来创造空间,并将用户的注意力集中在关键元素上。
测试交互反馈
确保按钮、链接等交互元素可识别,通过悬停下划线或微妙颜色变化提示状态,如点击时霓虹按钮轻微变亮,避免依赖渐变或阴影。
新粗野主义布局中的互动元素需要明确的反馈。使用下劃线或颜色偏移来发出互动信号。
避免过度简化
通过大小变化(例如,标题是正文的两倍)和颜色强度来保留层次结构。即使在极简布局中,也要确保明确的行动号召和关键可用性元素脱颖而出,以创建无缝的用户界面。
sui.io/overflow#overview通过为标题、页面文本和按钮标签使用不同的字体大小来维护视觉层次结构,从而确保CTA和交互式元素脱颖而出。
总结
新粗野主义的叛逆美学能吸引眼球,但其成功取决于大胆风格与可用性的平衡。
设计师需以可访问性原则为基础,通过用户测试打造既醒目又实用的界面。

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。