一份给设计 / 艺术入门新生的长效审美地图。 艺术史脉络 + 设计运动年表 + 色彩字体 + 构图 + 动效 + 游戏 UX + 跨平台 SOP + 个人风格定位。 多源交叉验证 · 实战可操作 · 跨领域覆盖 · 长效可复用。
⚠️ 定位声明：本手册以 Toreinm（@Toreinm）的设计偏好为主，鎏金/穆夏/国潮/折衷四种风格定位尤其带有强烈个人审美投射，是「个人签名式的入门地图」而非「行业共识百科」。读者应结合具体场景独立判断。
English Version · 中文
11 章、~6000 字的审美知识网络,从历史到落地,给设计 / 艺术入门新生一份能"看着不慌"的地图。
适合:网页设计、品牌视觉、游戏 UI、APP 设计、UI/UX 作品集、个人项目审美判断。
不适合:
- 期待读完立刻成为艺术家的人(手册给方向,练习给功夫)
- 寻找具体行业技法教程的人(这是审美判断框架,不是 Photoshop 教程)
| 你的目标 | 打开这个文件 |
|---|---|
| 想看完整手册(可读性强) | index.html — 单文件 HTML,带配色 swatch / 缓动 demo / 表格 |
| 想让 AI 读取结构化知识 | SKILL.md — 纯 markdown,适合作为 LLM skill 加载 |
| 想知道怎么用、改、转发 | 下面的 使用与许可 一节 |
| 想纠错 / 贡献 | 下面的 如何贡献 一节 |
直接双击 index.html 在浏览器打开即可,无需任何依赖(只通过 Google Fonts CDN 引入 4 个免费商用字体,断网时回退到系统字体)。
🌓 暗色模式:本页面跟随系统偏好。macOS 用户在「系统设置 → 外观」切到「深色」即可看到暗色版;iOS / Android / Windows 11 同样支持。不想改系统设置?Chrome / Edge 打开 DevTools (F12) → 右上 ⋮ → More tools → Rendering → 找「Emulate CSS media feature prefers-color-scheme」选
dark。
9 张关键截图,从首页到附录,围绕视觉设计、前端审美、UI/UX、字体风格四个角度展开。每张图既是内容讲解也是审美示范,教审美时自身就是审美的载体。
首页示范了高级感排版的基本结构。微缩标题加衬线大字加副标加 pill 加 11 章 TOC 卡片。配色用米色底加鎏金横线,标题 48 副标 16 卡片间距 24,跟第 3 章 60-30-10 配色原则呼应。这页本身就是知行合一,教审美时同时示范审美,整本手册都在这个逻辑里跑。
章节 marker 是个可复用的组件,80 乘 80 圆角方形,鎏金渐变,左上标罗马数字加单字。表头用鎏金色加间距加 uppercase,行 hover 变浅米色,这套组合给严肃文档用刚好。表格行高 1.7,字号 14.5,长读不累。
艺术史和设计运动是两条平行时间线,1880 年前后正式分家,艺术史管好不好看,设计史管怎么用好看。表里末列直接连到当代应用,以后看 Art Deco 风格能直接调出 1920 到 1940 的几何加金属加 chevron 关键词。
色彩三原色到 7 配色方案到 60-30-10 到鎏金 5 色,5 节递进。每个配色方案都标了适合场景和例子,直接抄作业。色温冷暖、文化差异、配色警告都塞在 callout 框里,不会漏看。
5 张色卡加 4 种组合,色卡 64 高配 hex 标签,组合是双半色块加文字说明。这是奢华感的视觉词典,听到高级感低调奢华鎏金这种词,直接套这套 5 色加 4 组合,不用凭感觉。
5 种缓动函数有实时动画对比,小球左右弹,一眼看出 linear 机械、ease-out 缓停、ease-in-out 来回。迪士尼 12 原则用卡片网格展示,每条一行中文简释。缓动值 cubic-bezier 直接抄,不用查文档。动效避坑 5 条硬规则,transform 不用 top/left(性能差 100 倍),永远支持 prefers-reduced-motion。
网页、游戏、App、品牌,4 个平台同一套审美判断,每张卡片 5 个维度,基调字体构图动效特殊。抽象的高端感具体化成主色 60% 加衬线标题加 F 模式加 300ms ease-in-out 加 Logo 留白禁区 1x 高度。拿到新项目先问网页还是 App,再调对应模板。下半部分是第九章个人风格定位标题,4 种当代主流风格待展开。
15 个核心交叉验证来源,Wikipedia、Britannica、Getty、Tate、Meggs'、Adobe Color、Google Fonts、迪士尼 12 原则、Microsoft Fluent、NN/g、鎏金工艺(田自秉、天工开物、故宫)、极繁主义、方正字库、国潮色研究。每个关键结论都附两个以上独立来源,引用可追溯。适合做 RAG 知识库。
完整许可加免责声明,CC-BY-4.0 内容加 MIT 代码,callout 警告说本手册是审美学习参考不构成专业设计建议,商业品牌举例都已模糊化只用于教学。页脚只保留核心信息,aesthetic-system、11 章综合、2026-08-05 公共版、CC-BY-4.0 / MIT、多源交叉验证。
| # | 章节 | 一句话 |
|---|---|---|
| 序 | 什么是审美体系 | 四件事:历史/语言/场景/个人化 |
| I | 艺术史脉络 | 30,000 BC – 现在 · 西方/中国/鎏金 |
| II | 设计运动年表 | 1880 – 现在 · 7 个转折点 |
| III | 色彩理论 | 60-30-10 / 鎏金 5 色 / 7 配色方案 |
| IV | 字体排印 | 5 类 / 字体人格 / 中式 4 标签 |
| V | 构图原理 | 格式塔 8 / 黄金比例 / 视觉重量 9 |
| VI | 动效设计 | 5 缓动 / 迪士尼 12 / Fluent 5 |
| VII | 游戏美术 + UX | 国产 MOBA / 二次元 / Nielsen 10 |
| VIII | 跨平台实战 SOP | 网页 / 游戏 / App / 品牌 |
| IX | 个人风格定位 | 4 主流 + 6 步定位法 |
| X | 学习路径 + 资源 | 6 月路径 / 5 类资源 / 4+1 问 |
| 结 | 体系不是枷锁,是翅膀 | + 附录(15 个交叉验证源) |
本项目采用双重许可:
-
内容(
SKILL.md全文 +index.html中的文字/表格/参数/附录等)采用 CC-BY-4.0:可自由复制、 转发、修改、商用,唯一要求是署名原作者 + 标注是否修改。 详见LICENSE-CC-BY-4.0。 -
代码(
index.html中的 HTML/CSS/JavaScript)采用 MIT:随便用,保留版权声明即可。 详见LICENSE-MIT。
在派生作品(翻译、改写、PPT 引用等)的显著位置附:
本文内容改编自 aesthetic-system 项目 (https://github.com/...),
采用 CC-BY-4.0 许可。
本手册为公共参考性教育内容,已对所有当代活跃商业品牌做模糊化处理 (如"花某子"、"某意大利奢侈品牌 A"等)。手册中提及的:
- 历史人物 / 已故艺术家——穆夏(1860-1939)、Adolf Loos(1870-1933)等, 处于公共领域,无版权争议
- 学术 / 权威源——Wikipedia、Britannica、Getty、Tate、NN/g 等,作为 事实引用
- 公开平台——Awwwards、Behance、Dribbble、Typewolf 等,作为资源推荐
- 历史著作与纪录片——《艺术的故事》《设计中的设计》《Helvetica》 纪录片等,作为学习推荐
本手册不主张对任何第三方商标 / 品牌 / 内容的所有权,也未与之建立 任何形式的合作或背书关系。
欢迎纠错和补充!提交方式:
- 发现错误 —— 在 Issue 描述错误位置 + 正确信息 + 至少 1 个权威源
- 改进措辞 —— PR,改动尽量小
- 补充章节 —— 先开 Issue 讨论,确认方向再发 PR
所有贡献将以同等条款合并入本项目(CC-BY-4.0 + MIT)。
- 加粗 = 关键概念 / 必背
- 斜体 = 哲学点 / 提醒
代码= 具体参数 / 工具名 / 文件名- 表格 = 速查 / 对照
- 💡/
⚠️ callout 框 = 要点 / 避坑
- 15 个核心交叉验证来源详见
index.html附录 /SKILL.md附录 - 鎏金工艺部分参考了《中国工艺美术史》(田自秉)与《天工开物》(宋应星)
- Google Fonts 提供免费商用字体(DM Serif Display / Cormorant Garamond / Outfit / JetBrains Mono)
本手册为审美学习参考,不构成专业设计建议。色彩参数、动效时长等具体 数值应根据项目实际场景调整,不应直接照搬。