审美体系手册

审美不是「我喜欢什么」的口味问题,而是一套可被学习、可被复用、可被批判的判断框架。一个成熟的审美体系至少要做到四件事:

为什么要建体系而不是攒素材? 攒 1000 张参考图,遇到新项目还是不会选。 有了体系,看任何新风格时,能在 5 分钟内拆出它用的色彩、字体、构图、动效。 自己的设计也能稳定输出,不至于一会儿极简一会儿极繁。

西方艺术史主线

中国艺术史主线

鎏金工艺 · 极简历史

中国鎏金工艺始于春秋战国(也有学者定在战国早期),汉代达到高峰,隋唐精益求精,明清登峰造极。

一句话总结每段

1 · 三层结构(必背)

• 三原色 Primary:红 / 黄 / 蓝
• 二级色 Secondary:橙(红+黄)/ 绿(黄+蓝)/ 紫(红+蓝)
• 三级色 Tertiary:原色 + 邻近二级色(如红橙、黄绿、蓝紫)

2 · 色温与心理

特别提示:颜色在不同文化里含义不同——红色在中国=好运,在南非=哀悼,在美国=危险。

3 · 7 种配色方案(记住 5 个就够用一辈子)

4 · 60-30-10 法则(万能模板)

• 60% 主色(背景、底色)—— 用中性 / 低饱和
• 30% 次色(结构、卡片、章节)—— 承担信息层
• 10% 强调色(按钮、链接、关键数据)—— 必须是高饱和或对比色

这是永远不会出错的起点。高级感从 60% 的大面积克制里来。

5 · 鎏金 5 色公式(跨文化通用)

4 种高级感组合

1 · 字体分类(5 类)

2 · 字体人格(90% 设计师忽略的关键)

字体不是「好看」,是有人格的。选错字体=让一个温柔的女生用「金刚怒吼」的语气说话。

3 · 经典搭配公式(不会出错)

• 1 个衬线标题 + 1 个无衬线正文 = 永恒(Playfair Display + Lato)
• 1 个无衬线标题 + 1 个无衬线正文(不同粗细) = 现代
• 1 个中文标题 + 1 个英文显示字体 = 跨文化高级感
• 永远不要超过 3 种字体

4 · 中式美学字体 4 大标签(2025 流行)

5 · Google Fonts 速查(全球免费商用)

• 中文:Noto Serif SC / Noto Sans SC(思源宋黑)
• 标题:Playfair Display / Cormorant Garamond / Great Vibes(花体)
• 正文:Inter / Lato / Source Sans Pro
• 等宽:JetBrains Mono / Fira Code

1 · 格式塔 8 大原理(心理学基石)

你的大脑不是「看到」画面,是「猜」画面。格式塔告诉你大脑怎么猜。

实战用法:在网页上用「接近性」分组信息,用「相似性」统一按钮样式,用「主体/背景」做英雄区(hero)。

2 · 三分法与黄金比例

• 三分法:3×3 切,4 个交叉点放主体(摄影、设计、UI 通用)
• 黄金比例 1:1.618(φ)—— 自然界最高频的比例(鹦鹉螺、向日葵、维纳斯)
• 黄金三角 / 黄金螺旋——版面的高级分割
• 维特鲁威定律——把核心元素放在「黄金分割点」

3 · 视觉层次 6 大原则

• 阅读模式:F 模式(文字密集)/ Z 模式(图片为主)
• 大小—— 最大的最先被看
• 空间和质感—— 近大远小
• 字体粗细和搭配
• 色彩和色调
• 方向—— 眼睛倾向水平 > 垂直

4 · 视觉重量 9 因素

实战:设计 Hero 区时,把核心按钮放大 + 高对比色 + 偏离中心 = 视觉焦点。

1 · 缓动函数 Easing(5 个预设)

进阶:cubic-bezier(0.68, -0.55, 0.27, 1.55)(back, 小弹跳,适合弹窗);cubic-bezier(0.16, 1, 0.3, 1)(expo out, Material Design 推荐)。

2 · 迪士尼 12 原则(动画圣经)

《The Illusion of Life: Disney Animation》1981。影视动画基石,UI 同样适用。

3 · 微软 Fluent Design 5 大元素

• Light 光感——光照随交互变化
• Depth 深度——Z 轴层次(毛玻璃、阴影、视差)
• Motion 动画——自然动效
• Material 材质——亚克力、云母等真实感材质
• Scale 缩放——响应式跨设备一致

4 · UI 转场 6 原则

1. 淡入淡出(永远不淘汰)
2. 缩放增加活力(但慎用,过度会像 PPT)
3. 保持方向一致性(从左滑入的别从右边)
4. 平衡动效速度(100-500ms 黄金区间)
5. 优先级排序和分组(一起动的归一组)
6. 建立空间关系属性(哪个在前哪个在后)

5 · 实战避坑

1 · 国产 MOBA 国风皮肤(国民级审美教科书)

2 · 某开放世界二次元游戏美术(国风 + 二次元融合典范)

• 国风融合二次元(上海某游戏厂商的招牌路线)
• 扁平 UI + 简约线条
• 「元素晶球」系统(装饰 + 叙事 + 角色个性三位一体)
• 3D 角色 + 2D 立绘补充
• 动态曲线顺滑(Live2D 风格骨骼)
• 错视设计(远近透视感的扁平 UI)
• 渐变溶解的生长动画(角色待机动作)
• 故事形式动态演绎(角色 PV)

3 · 尼尔森 10 大 UX 启发式(UX 圣经)

Jakob Nielsen 1994 提出,至今未变。

1. 可见性 Visibility——用户能看见系统状态
2. 贴近现实——说人话
3. 用户控制自由——撤销 / 重做
4. 一致性——同一控件同一样式
5. 防错——不要让用户能犯傻
6. 识别优于回忆——少让用户记
7. 灵活高效——高手可以加速
8. 极简美学——不要无关信息
9. 错误恢复——错误信息要人话
10. 帮助文档——有最好,没有也能用

4 · 摄影美学速记

• 引导线 leading lines——引导视线到主体
• 三分法——黄金分割
• 颜色和谐——配色方案
• 主题——一个明确焦点
• 故事性——让人想多看一眼
• 平衡——视觉重量均匀

4 种当代主流风格定位

A. 鎏金极繁 · 金色 + 暗调 + 满铺装饰

B. 穆夏新艺术 · 曲线 + 花 + 女性 + 平面化

C. 国潮新中式 · 汉字 + 传统纹样 + 现代配色

D. 折衷主义 · 混搭 + 个人收藏 + 时间感

怎么找到自己的风格?

1. 第 1 步:从上面 4 种里选 1-2 种最像「你」的气质。
2. 第 2 步:列 10 张你「最想做出来的」参考图(不限时期风格)。
3. 第 3 步:用第 3-6 章的工具拆它们的共性:色彩、字体、构图、动效。
4. 第 4 步:写下自己的「3 个必须 + 3 个绝不」(如:必须有鎏金细节 / 必须有衬线字体 / 必须有粒子动效;绝不用 emoji / 绝不用 Comic Sans / 绝不满屏渐变)。
5. 第 5 步:做 3-5 个小项目实战,每次只改一个变量,验证体系的稳定性。
6. 第 6 步:沉淀成自己的「设计系统文档」(DESIGN.md 格式),让 AI 和未来 6 个月后的你都能复用。

学习路径(6 个月可执行)

必读 / 必看资源

交叉验证清单(每做一次判断前过一遍)

任何「我想这样设计」的冲动,先问 4 个问题:

1. 历史:这风格属于哪个时代?那个时代在解决什么问题?跟我现在的场景对得上吗?
2. 配色:是不是符合 60-30-10?主色/次色/强调色选对了吗?鎏金用了多少 %?有没有 > 30%?
3. 字体:是不是 1-3 种?主字体的人格和我要表达的语气对得上吗?中文 + 英文搭配了吗?
4. 动效:用了 ease 而不是 linear 吗?时长在 100-500ms 吗?照顾了 prefers-reduced-motion 吗?

再加一个 5 号问题:5. 个人:这个设计 6 个月后我还喜欢吗?还是只是现在的我被某种潮流裹挟?

审美体系不是让你变成「套路机器」,而是让你在任何新风格出现时都能 5 分钟拆解它、学习它、决定要不要吸收它。

真正的审美自由 = 知道所有规则,然后在某个瞬间故意打破 1 条。

当你看完一本 1000 页的艺术史,记住的不会是所有画家的名字,而是那 3-5 个让你心跳加速的瞬间。
当你看完一份完整的审美手册,记住的不会是所有术语,而是那 1-2 个你今天就能用的招式。

本手册每个关键结论都经过 ≥ 2 个独立来源 交叉验证;数字、年代、参数(cubic-bezier 数值、百分比、毫秒)均经过多次核对。如发现错误,欢迎通过 Issue 指出修订。

核心参考来源(15 类)

• 西方艺术史:Wikipedia Art History Timeline、Britannica、Getty Museum、Tate Modern
• 设计运动:Meggs' History of Graphic Design、Design is History、Victoria & Albert Museum
• 色彩理论:Adobe Color、Color Matters、Interaction Design Foundation
• 字体理论:Google Fonts、Typewolf、Fonts.com
• 格式塔原理:Wikipedia Gestalt Principles、Laws of UX (Jon Yablonski)
• 动效设计:Disney's 12 Principles、CSS Tricks Easing Functions、Material Design Motion
• 微软 Fluent:Microsoft Fluent Design System 官方文档
• Nielsen 10 启发式:NN/g Nielsen Norman Group 官方
• 国产 MOBA 国风皮肤:该游戏官方美术站、该游戏厂商设计中心
• 开放世界二次元游戏美术:该游戏官方、玩家 Wiki
• 鎏金工艺:《中国工艺美术史》田自秉、《天工开物》宋应星(明·五金篇)、故宫博物院藏鎏金器物
• 极繁主义:Gary Stephan 原始文献、Designboom、Dezeen
• 新中式字体:方正字库《字体趋势报告》、北京服装学院
• GitHub 资源:aarondglover/awesome-design-md、Reklen/Awesome-Design-Tools、bergside/awesome-design-skills
• 国潮色:国潮色发布会、相关词牌赋新韵研究

使用与署名建议

本手册采用 CC-BY-4.0 许可(详见 LICENSE-CC-BY-4.0):

• 可自由:复制、修改、转发、商用、教学使用
• 唯一要求:署名原作者 + 标注是否做了修改 + 不得增加额外限制
• 建议:在派生作品里附上原仓库链接(本仓库地址见 README)

免责声明