LESSON 01
视觉体系构建：从品牌关键词到设计令牌
视觉体系不是凭感觉堆出来的，而是从品牌关键词翻译成可量化的设计令牌（Design Token）。先做品牌关键词提取，再把关键词映射到色相、明度、字重、圆角、阴影等维度，最后形成一套可以被前端直接消费的 CSS 变量。
关键步骤有三：第一，用"形容词反推法"列出 5 个品牌关键词，比如"稳重、专业、温暖、克制、精致"；第二，对每个关键词在色相轮上定位主色区间，"稳重"指向低明度暖灰，"温暖"指向原木色系；第三，把所有令牌落到 CSS 变量里，全站唯一来源。
/* 品牌视觉令牌 · 全站唯一来源 */
:root{
--wood:#B89968; /* 主色：原木，温暖+稳重 */
--wood-deep:#9A7D4F; /* 主色深：克制+专业 */
--wood-light:#D4BC95; /* 主色浅：精致点缀 */
--cream:#F7F4EF; /* 背景：温暖+呼吸 */
--ink:#2C2924; /* 文字：稳重+可读 */
--radius:14px; /* 圆角：精致而非锋利 */
--shadow:0 24px 60px -28px rgba(60,50,30,.28);
}
讲师提示：设计令牌一旦定义，全站任何组件都只能引用变量，禁止硬编码颜色值。这样后期品牌升级只改变量定义，组件无需改动一行代码。建议把令牌文件单独放在 tokens.css，组件库 import 它即可。
LESSON 02
色彩语言：建立主辅点缀三层结构
商业网站的色彩不是越多越好，而是越有秩序越好。尧图交付团队坚持"6-3-1"原则：主色占视觉面积 60%，辅色 30%，点缀色 10%。主色定调，辅色平衡，点缀色制造焦点。三层一旦混乱，页面就会失去重心。
主色用于导航、按钮、关键链接；辅色用于背景、分隔、次要文字；点缀色只用于关键 CTA、徽章、提醒。点缀色面积越小，对比越强，视觉冲击力越大，这是高转化页面的核心秘密。
/* 三层色彩应用规范 */
.btn-primary{background:var(--wood-deep);color:#fff} /* 主色按钮 */
.btn-outline{background:transparent;color:var(--wood-deep);border:1.5px solid var(--wood)} /* 辅色描边 */
.badge-hot{background:#C25A3B;color:#fff;padding:2px 8px;font-size:11px;border-radius:10px} /* 点缀色仅此处 */
.section-soft{background:var(--cream)} /* 辅色背景 */
.text-mute{color:var(--ink-mute)} /* 辅色文字 */
避坑指南：不要在同屏出现两种点缀色。如果同时有"限时优惠"和"新品上线"两个标签，请用同一点缀色 + 不同文案区分，而不是用红 + 橙双色，否则视觉焦点会被稀释。
LESSON 03
版式节奏：用栅格与间距制造呼吸感
版式节奏来自间距的有序变化，不是来自花哨的图形。尧图实战经验是：建立 4px 基础栅格，所有间距必须是 4 的倍数（4/8/12/16/24/32/48/64/96），模块内部用小间距，模块之间用大间距，视觉自然产生呼吸感。
标题与正文的间距、正文与按钮的间距、卡片之间的间距，都要遵循"内紧外松"原则：模块内部 16-24px，模块之间 40-64px。这样既保证了模块的凝聚力，又让信息层级一目了然。
/* 4px 栅格间距体系 */
:root{
--sp-1:4px; --sp-2:8px; --sp-3:12px;
--sp-4:16px; --sp-5:24px; --sp-6:32px;
--sp-7:48px; --sp-8:64px; --sp-9:96px;
}
.card{padding:var(--sp-5);margin-bottom:var(--sp-6)} /* 内紧 24，外松 32 */
.section{padding:var(--sp-9) 0} /* 大区段 96 */
.sec-head{margin-bottom:var(--sp-7)} /* 标题与内容 48 */
实战检查：用浏览器标尺量一下页面任意两处间距，如果出现 13px、17px、21px 这种非 4 倍数值，就说明节奏已经乱了。建议在 ESLint 或 Stylelint 里配置 4px 栅格校验规则，提交代码时自动拦截。
LESSON 04
图标设计：自定义 SVG 而非图标库堆砌
图标库（如 Ant Design Icons、Feather）适合做后台管理，但商业官网必须用自定义 SVG。原因有二：一是图标库的视觉风格固定，难以匹配品牌气质；二是图标库追求"通用"，而商业官网需要图标承担"隐喻品牌"的功能。
尧图自定义图标的规范：24×24 viewBox，1.5-1.8 线宽，端点圆角，与品牌主色同色系，关键节点用 currentColor 继承父元素颜色，方便主题切换。下面是一个"建站服务"图标的标准实现。
<!-- 自定义图标：建站服务 -->
<svg width="28" height="28" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
<path d="M3 21h18M5 21V8l7-5 7 5v13"/> <!-- 屋顶轮廓 -->
<path d="M9 21v-6h6v6"/> <!-- 门户隐喻 -->
</svg>
关键细节：stroke-linecap 和 stroke-linejoin 必须同时设为 round，否则线段端点和拐角会出现方角，与品牌圆角不统一。另外 stroke-width 推荐 1.6 而不是默认 2，更精致更适合高端品牌。
LESSON 05
质感打磨：阴影、过渡、玻璃感的三件套
质感不是靠装饰堆出来的，而是靠"恰到好处的阴影 + 克制的过渡 + 必要的玻璃感"三者叠加。阴影要用大模糊小偏移营造漂浮感，过渡用 cubic-bezier 而非 ease，玻璃感用 backdrop-filter 但仅在导航栏等关键位置使用。
阴影的常见错误是"黑色硬阴影"，正确做法是低饱和的暖色阴影：rgba(60,50,30,.28)。过渡曲线推荐 cubic-bezier(.22,.61,.36,1)，比 ease 更有"减速感"，符合高端品牌的克制气质。
/* 质感三件套 */
.card{
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
/* 1. 暖色柔阴影：大模糊、小偏移 */
box-shadow:0 24px 60px -28px rgba(60,50,30,.28);
/* 2. 克制过渡：cubic-bezier 而非 ease */
transition:transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 70px -28px rgba(60,50,30,.35)}
.topbar{
/* 3. 玻璃感：仅导航栏等关键位置 */
background:rgba(253,251,247,.85);
backdrop-filter:saturate(180%) blur(12px);
-webkit-backdrop-filter:saturate(180%) blur(12px);
}
性能提醒：backdrop-filter 在低端机型上有明显性能损耗，建议配合 @supports 检测，不支持时降级为纯色背景。同理，box-shadow 不要叠超过 2 层，否则滚动时会出现卡顿。
LESSON 06
作品输出：从设计稿到可交付的源码包
视觉体系的终点不是 Figma 截图，而是可交付的源码包。尧图交付标准包含三件套：设计令牌文件 tokens.css、组件库 components.css、页面示例 page-demo.html。客户拿到源码包就能直接二次开发，不绑定、不锁死。
交付前必须过一份自检清单：所有颜色值都引用变量、所有间距都是 4 倍数、所有图标都是自定义 SVG、所有过渡都用 cubic-bezier、所有阴影都引用变量。这五项任一不达标，就退回精修。
/* 交付源码包目录结构 */
project/
├─ tokens.css /* 设计令牌：颜色/间距/圆角/阴影 */
├─ components.css /* 组件库：按钮/卡片/表单/导航 */
├─ page-demo.html /* 页面示例：所有组件的实际组合 */
├─ images/ /* 图片资源：压缩后 webp + 原图备份 */
└─ README.md /* 使用说明：如何二次开发 */
/* 交付前自检清单（必须全部通过）*/
☑ 颜色值是否全部引用 var(--xxx)
☑ 间距是否全部为 4 的倍数
☑ 图标是否全部为自定义 SVG
☑ 过渡曲线是否全部使用 cubic-bezier
☑ 阴影是否全部引用 var(--shadow)
结业作业：选一个你服务过的真实客户，按本课方法重构其官网首页视觉体系，提交源码包到讲师邮箱。讲师会按上述五项自检清单批改，全过即发放结业证书，并入选尧图外包设计师备选库。
