LESSON 01
间距系统：8pt 栅格与内紧外松原则
间距是页面精修的第一道关。尧图采用 8pt 栅格系统：所有间距必须是 8 的倍数（8/16/24/32/48/64/96），不允许出现 13px、17px 这种"随意值"。8pt 栅格源自人眼对 8 像素差异的辨识阈值，小于 8 的差异感知不到，大于 8 的差异形成节奏。
间距分配遵循"内紧外松"原则：组件内部用小间距（8-16px），组件之间用中间距（24-32px），区块之间用大间距（64-96px）。这样既保证组件凝聚力，又让信息层级一目了然。
/* 8pt 栅格间距令牌 */
:root{
--sp-1:8px; /* 组件内最小 */
--sp-2:16px; /* 组件内标准 */
--sp-3:24px; /* 组件间小 */
--sp-4:32px; /* 组件间标准 */
--sp-5:48px; /* 区块间小 */
--sp-6:64px; /* 区块间标准 */
--sp-7:96px; /* 区块间大 */
}
/* 内紧外松：组件内 16，组件间 32，区块间 96 */
.card{padding:var(--sp-2)} /* 内 16 */
.card-list{display:flex;gap:var(--sp-4)} /* 间 32 */
.section{padding:var(--sp-7) 0} /* 区 96 */
精修对比：未精修的页面常出现 12px、15px、20px 混用，视觉上"碎"；精修后统一为 8/16/24/32，视觉上"整"。差异不是单点看出来的，而是整页扫视时感知到的"秩序感"。建议用 Stylelint 配置 8pt 校验规则，提交时自动拦截非 8 倍数。
LESSON 02
对齐原则：12 列栅格与视觉重心校准
对齐不是"差不多齐"，而是"像素级齐"。尧图采用 12 列栅格系统：容器宽度 1240px，列宽 88px，列间距 24px，所有元素必须吸附到列边缘或列中心。这样无论页面多复杂，视觉重心都在一条隐形的轴线上。
视觉重心校准是进阶技巧：图标与文字混排时，图标视觉中心要对齐文字 x-height 中心，而不是几何中心。圆角图标视觉偏上，需要向下偏移 1-2px 才能"看起来齐"。这种 1px 级的调整，就是精修与普通的分水岭。
/* 12 列栅格系统 */
.grid-12{
display:grid;
grid-template-columns:repeat(12,1fr);
gap:24px; /* 列间距 */
max-width:1240px;
margin:0 auto;
padding:0 28px;
}
.col-4{grid-column:span 4} /* 1/3 宽 */
.col-6{grid-column:span 6} /* 1/2 宽 */
.col-8{grid-column:span 8} /* 2/3 宽 */
/* 视觉重心校准：图标与文字对齐 */
.icon-text{display:inline-flex;align-items:center;gap:8px}
.icon-text svg{
width:18px;height:18px;
position:relative;top:1px; /* 视觉下移 1px 校准 */
}
检查方法：用浏览器 DevTools 的"测量工具"量任意元素左边缘到容器左边缘的距离，所有同级元素这个距离必须相等。如果出现 28px、30px、32px 混用，就说明对齐已经乱了。建议用 Figma 的"智能参考线"做设计阶段校验，从源头杜绝。
LESSON 03
层级构建：字号、字重、颜色三位一体
视觉层级不是靠字号堆出来的，而是字号、字重、颜色三个维度协同。尧图层级规范：H1（36px/700/墨色）、H2（28px/700/墨色）、H3（20px/700/墨色）、正文（15px/400/墨软色）、辅助（13px/400/灰mute色），五层各有定位。
常见错误是"字号分层但字重不分层"：H2 用 700，正文也用 700，结果层级靠字号硬撑，视觉上还是平。正确做法是字号越大字重越重，字号越小字重越轻，配合颜色从深到浅，三层维度同步递进。
/* 三位一体层级系统 */
.h1{font-size:36px;font-weight:700;color:var(--ink); /* 最重 */
line-height:1.2;letter-spacing:.3px}
.h2{font-size:28px;font-weight:700;color:var(--ink); /* 重 */
line-height:1.28}
.h3{font-size:20px;font-weight:700;color:var(--ink); /* 中重 */
line-height:1.4}
.body{font-size:15.5px;font-weight:400;color:var(--ink-soft);/* 轻 */
line-height:1.75}
.meta{font-size:13px;font-weight:400;color:var(--ink-mute); /* 最轻 */
line-height:1.6}
/* 字体栈：标题用衬线，正文用无衬线 */
--serif:Georgia,"Songti SC","Source Han Serif SC",serif;
--sans:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
字体搭配：标题用衬线字体（Georgia/思源宋体）传递"工匠感"，正文用无衬线（PingFang/苹方）保证可读性。两种字体混搭比单一字体更有层次，是高端品牌官网的通用做法。注意中文字体必须用系统中文字体而非 Web 字体，避免首屏闪烁。
LESSON 04
留白节奏：用空白引导视觉动线
留白不是"空着"，而是"主动的设计元素"。尧图留白三原则：重点元素周围留白要大（凸显）、次要元素周围留白要小（紧凑）、留白必须对称（平衡）。一个 CTA 按钮上下留白如果是 64px，左右就必须也是 64px，否则视觉失衡。
留白节奏要"疏密交替"：信息密集区（如表单）周围必须是大留白，信息稀疏区（如标题）周围可以是小留白。这种疏密交替形成视觉呼吸感，让眼睛在浏览时有"停歇点"，避免疲劳。
/* 留白节奏：疏密交替 */
.section-dense{
/* 信息密集区：内部紧凑 */
padding:48px 0;
}
.section-dense .form{
display:grid;gap:16px; /* 内部小留白 */
padding:32px;
background:var(--paper);
border-radius:14px;
}
.section-sparse{
/* 信息稀疏区：外部大留白 */
padding:96px 0;
}
.section-sparse h2{
margin-bottom:48px; /* 标题周围大留白 */
}
/* CTA 按钮：上下左右对称留白 */
.btn-cta{
padding:16px 36px; /* 上下 16，左右 36 视觉对称 */
border-radius:30px;
}
留白陷阱：留白不是越多越好。如果整页都是大留白，会显得"空"而非"高级"。尧图经验：单屏留白比例控制在 40-60% 之间，低于 40% 显得拥挤，高于 60% 显得空洞。用浏览器全屏截图，灰度化后用 Photoshop 直方图查看白色像素占比，即可量化。
LESSON 05
动效细节：克制的过渡比花哨的动画更高级
高端品牌的动效哲学是"克制"：宁可没有，不要花哨。尧图动效三原则：时长 200-400ms（低于 200ms 感知不到，高于 400ms 显得拖沓）、曲线用 cubic-bezier 而非 ease（更有减速感）、幅度用 transform 而非 left/top（不触发重排）。
常见动效类型：hover 上浮（translateY(-4px)）、点击按压（scale(.98)）、入场渐显（opacity + translateY）、滚动视差（translateY 跟随滚动）。每种动效都要有明确目的：上浮表示"可交互"，按压表示"已响应"，渐显表示"刚出现"，视差表示"有层次"。
/* 克制动效三件套 */
.card{
transition:transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.card:hover{
transform:translateY(-4px); /* 上浮 4px，足够感知 */
box-shadow:0 30px 70px -28px rgba(60,50,30,.35);
}
.card:active{
transform:translateY(-2px) scale(.99); /* 按压反馈 */
}
/* 入场动效：opacity + translateY，不触发重排 */
.reveal{
opacity:0;
transform:translateY(28px);
transition:opacity .8s cubic-bezier(.22,.61,.36,1),
transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{opacity:1;transform:none}
/* 尊重用户偏好：减少动效 */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
}
性能底线：所有动效必须用 transform 和 opacity，绝不用 left/top/width/height/margin，否则触发重排，60fps 无法保证。可以用 will-change:transform 提前声明，但不要滥用，只在确实会动画的元素上加，否则反而增加内存占用。
LESSON 06
质感跃升：阴影、边框、玻璃感的精修叠加
质感跃升是精修的最后一公里。尧图质感公式：暖色柔阴影 + 1px 半透明边框 + 必要时玻璃感。三者叠加，普通卡片立刻有"漂浮感"和"精致感"。关键是阴影颜色要用品牌暖色（rgba(60,50,30,.28)）而非黑色，边框要用品牌色低透明度（rgba(155,125,79,.18)）而非纯灰。
精修前后对比：未精修卡片是"白底 + 灰边 + 黑阴影"，看起来"平"；精修后是"纸色底 + 木色半透明边 + 暖色柔阴影"，看起来"浮"。差异在每一个像素的选择里，没有捷径，只能逐项调优。
/* 精修前后对比 */
/* 未精修：白底 + 灰边 + 黑阴影（平）*/
.card-raw{
background:#fff;
border:1px solid #ddd;
box-shadow:0 4px 12px rgba(0,0,0,.1);
}
/* 精修后：纸色 + 木色边 + 暖阴影（浮）*/
.card-polished{
background:var(--paper); /* #FDFBF7 纸色 */
border:1px solid var(--line); /* rgba(155,125,79,.18) */
border-radius:14px;
box-shadow:0 24px 60px -28px rgba(60,50,30,.28); /* 暖色大模糊 */
transition:transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.card-polished:hover{
transform:translateY(-4px);
box-shadow:0 30px 70px -28px rgba(60,50,30,.35);
border-color:var(--wood); /* hover 边框点亮 */
}
/* 玻璃感：仅用于导航等关键位置 */
.topbar-glass{
background:rgba(253,251,247,.85);
backdrop-filter:saturate(180%) blur(12px);
}
结业作业：选一个你认为"能用但不够精致"的页面，按本课六步方法逐项精修，提交前后对比截图与精修清单。讲师会按间距、对齐、层级、留白、动效、质感六维度打分，全过即发放结业证书，优秀作业入选尧图案例库。
