新粗野Neo-Brutalism
你可能会说
粗黑边框、大色块、硬阴影，特别张扬有个性的那种。
新粗野是一种用粗描边、硬阴影和高对比色建立强烈识别的视觉风格它常见于活动页、数字商品和独立产品，也会配合大号粗体与按压位移。视觉冲击不能盖过核心任务，描边、阴影和字重也要随组件尺寸调整。
左右滑动查看完整示例
WED. 22 JULY今天，把作品
＋ 发布新商品 ↗
今天，把作品
卖出去。
RECENT ORDERS刚刚卖出的作品
查看全部 →商品顾客金额状态
NSNotion 创作系统@lulu¥129已交付
FGFigma 组件模板@mango¥69已交付
WB独立开发手册@zoe¥49待交付
TOP 01NOTION
创作系统
创作系统
设计原则 · Principles
- 粗描边建立直接轮廓：按钮、卡片和输入框可以共用同一尺度，粗细按尺寸与主题调整
- 无模糊硬阴影：用纯色位移制造拼贴感，偏移量不应盖住相邻内容
- 高对比配色有主次：荧光色是常见示例，也可以用低饱和色；文字对比和状态含义仍要清楚
- 大号粗体承担海报感：字重和紧排需要根据字体能力、中英文和换行测试
- 交互状态覆盖鼠标、键盘和触屏：悬停可移动阴影，按下与焦点也要有明确反馈
什么时候用
- 独立产品官网，需要鲜明而直接的品牌态度别想了，先上线。独立开发者的不服和直给
- 数字商品页面，用高对比突出内容和价格电子书 ¥29Gumroad 式数字商品
- 活动和黑客松页面，需要较强参与感黑客松 202648 小时
- 局部表达反精致方向，建立视觉辨识度「反精致」也是一种态度
什么时候不用
- 金融和医疗核心流程只追求视觉冲击银行 App（黑粗边 + 荧光粉）金融医疗要信任感，粗野显得不靠谱
- 企业工具把每个区域都做成高强度海报企业工具需先保证可信度、扫描效率和状态清晰
- 正式办事页面让装饰压过信息和操作政务办事大厅（撞色版）正式服务场景应优先庄重、稳定和易操作
- 全站持续使用撞色，造成长期视觉疲劳× N 页
组成结构 · Anatomy
纯黑描边 2-3px
硬阴影
高饱和撞色
Aa900 粗黑标题
按压位移
用统一尺度建立剪纸般轮廓，颜色和粗细按主题与组件尺寸调整
无模糊纯色位移形成拼贴感，偏移量按空间和控件大小设定
示例用荧光粉、明黄和亮蓝；实际色板要有主次并通过对比测试
大号粗体建立视觉态度，中英文需要分别处理字重、字距和换行
悬停、焦点和按下状态都要提供反馈，不能只照顾鼠标
AI 提示词 · Prompt
做一个创作者经营后台，突出本周收入、订单和发布新商品。可以用直接、有冲击力的边界和色彩表达个性，但数字、状态和主要操作必须便于快速扫描。只读取项目现有数据，尚未接入的指标显示“待接入”，不要编造收入或订单。
典型使用场景
创作者经营工作台
左右滑动查看完整示例
MO
MAKER OFFICECREATOR OS
■ 商店营业中
01 经营概览
02 我的商品03 订单管理04 顾客名单
JULY GOAL 68%还差 ¥3,820
今天，把作品
卖出去。 ＋ 发布新商品 ↗
卖出去。 ＋ 发布新商品 ↗
本月收入¥16,180
今日订单38
转化率8.7%
刚刚卖出的作品查看全部 →
Notion 创作系统@lulu¥129
Figma 组件模板@mango¥69
独立产品发布工具
左右滑动查看完整示例
黑客松活动管理
左右滑动查看完整示例
创作者个人商店
左右滑动查看完整示例
延伸阅读 · 权威出处