行业色彩情绪映射
概述
行业色彩情绪映射是一种将产品类型与色彩方案通过情绪关键词对应起来的设计知识编码方式:颜色选择的依据不是「好看」,而是行业惯例形成的用户信任联觉 + 色彩心理学研究的结合。
关键内容
三个核心洞见
- 行业语境优先于美学偏好:金融行业用蓝色是因为几十年行业惯例形成了信任联觉,而非蓝色「好看」。
- 色彩是情绪的触发器:心理健康应用用薰衣草紫是心理学支撑的——冷紫色调降低焦虑感。
- 字体配对是层级系统:标题字体任务是「吸引 + 气质」,正文字体任务是「消失在阅读中」。
八大行业色彩情绪对应
| 行业 | 情绪关键词 | 主色区间 | 行业禁忌 |
|---|---|---|---|
| 科技 / SaaS | Professional / Trustworthy | 靛蓝 #4F46E5 / 深石板灰 | — |
| 金融 / 银行 | Trustworthy / Stable | 深海军蓝 #003087 + 财富绿 | AI 紫粉渐变(摧毁信任) |
| 医疗健康 | Clean / Caring | 医疗蓝 #0066CC + 极洁白 | 高饱和刺激色(引发焦虑) |
| 心理健康 / 冥想 | Calm / Healing | 薰衣草紫 #9B8EA8 + 暖米白 | 警告红、急迫感颜色 |
| 奢侈品 | Luxury / Exclusive | 近黑 + 哑金 #C9A84C | 廉价渐变、超饱和色 |
| 美食 / 餐饮 | Warm / Appetizing | 食欲红 #E53E3E + 暖橙 | — |
| 游戏 / 娱乐 | Exciting / Immersive | 霓虹绿 / OLED 黑 | 极简白色背景 |
| Web3 / 空间计算 | Futuristic / Bold | 暗紫 #8B5CF6 + 青色 | — |
UUPM 的实现方式(colors.csv)
product_type → 161 种类型 1:1 对应 161 套色彩方案
color_mood → 情绪描述关键词
primary/secondary/cta/background/text → 完整色值
dark_primary → 暗色模式变体
notes → 色彩使用注解(含 WCAG 合规说明)
所有方案预先验证 WCAG 2.1 AA 级对比度(正文 ≥ 4.5:1,UI 组件 ≥ 3.0:1)。
字体配对体系(57 组)
按气质分类,每组包含 Google Fonts 直链 + CSS import + 字号建议:
| 气质 | 代表配对 | 场景 |
|---|---|---|
| 权威优雅 | Playfair Display / Source Sans Pro | 金融、法律、医疗 |
| 现代专业 | Inter / Plus Jakarta Sans | SaaS、工具 |
| 奢华精致 | Cormorant Garamond / Montserrat | Spa、高端品牌 |
| 工业极简 | Space Grotesk / DM Sans | 开发者工具、初创 |
| 科幻未来 | Orbitron / Rajdhani | 游戏、科技展示 |
配对逻辑:标题用个性强字体(衬线/几何感)对比正文的中性高可读性字体(无衬线),形成层级对比张力。
来源
- raw/articles/ai-tools/claude-skills/blog-04-colors-typography.md
相关
- UI-UX-Pro-Max — 实现平台(colors.csv + typography.csv)
- 行业设计反模式系统 — 色彩禁忌是反模式系统的重要组成
- 结构化UI风格知识库 — 同为结构化设计知识编码