项目课 —— 用 Figma 重设计学径的一个页面

本课导读

收官实战：拿学径的一个真实页面开刀——四原则诊断现状、立一套两层 token、在 Figma 里组件化重画，学有余力的加餐是用 Motion 配一条 30 秒宣传片。选学径不是自恋，是务实：素材现成（你天天在用）、判断有依据（你就是目标用户）、产出有去处（发给站长当产品建议，这个 Track 的项目课传统）。当然，换成你工作里的产品做也完全成立，流程一字不改。预计 60 分钟起。

装配线：七步出稿

分步操作

1. 选页面，存现场

   从学径挑一个你有真实不满的页面（课程库、笔记页、/today 都是好靶子；没有不满就选你用得最多的）。整页截图存档——这是你的 before，最后对比要用。顺手写一句：这个页面最让我别扭的一点是什么？（还说不出四原则术语没关系，下一步就有词了。）

2. 四原则诊断书

   按亲密→对齐→重复→对比的顺序过截图，每条原则至少写一条例证（它做对了什么）和一条问题（含修法）。补一项硬检查：挑两处灰字量对比度，过没过 4.5:1。产出一份 8 条以上的诊断书——它是后面所有改动的依据，重设计不是"凭感觉换个样"，每一笔都要能指回诊断书的某一条。

3. 立规范：把刻度写成两层 token

   定这次重设计用的字阶（4–5 级够用）、间距（沿用 8pt 刻度）、色板（一串灰+强调色，语义色按需）。写成两层命名表：primitive（gray-900 / space-4 / text-20）→ semantic（text-primary / gap-group / title-md）。可以贴近学径现状微调，也可以大胆另起炉灶——但每个值必须在刻度上。

4. Figma 落地 token

   在第五课那个文件里（或新建）建好 Variables 两个集合和 Text Styles。纪律同上手任务：semantic 只引用 primitive，画布只挂 semantic。

5. 搭组件

   盘点这个页面需要的组件（通常 3–5 个：按钮、卡片、列表项、标签、导航条），逐个建成带 Variants 的组件。按钮必须五状态齐全；卡片至少 default 一态但要经得起改字（Auto Layout 验收三问）。

6. 重组页面

   用组件实例拼出整页。全程 Auto Layout，绝对坐标零容忍。拼完对照诊断书逐条打勾：每个问题都被修复了吗？每处修复是否引入了新问题（比如为了对比加了第二个最强强调）？把 before 截图和你的稿并排放——说得出每一处差异对应诊断书哪一条，这一步才算完。

7. 加餐（可选）：Motion 配片

   按第六课的描述词三问，给"重设计后的学径"写五句话描述词，用 Motion 生成 30 秒介绍视频，用四原则审片修改。做不做不影响项目完成度，但做了你就在一个项目里跑通了本单元全部工具。

终检清单

交稿前四问：

• 有据可查：每一处视觉决策能指回诊断书或刻度表吗？有没有"顺手就改了"的无据改动？
• 刻度合规：Dev Mode 里抽查五个元素——字号间距全在阶梯上？颜色显示的是语义变量名而不是裸色值？
• 对比度过线：所有正文文字 ≥ 4.5:1？（禁用态豁免）
• 经得起折腾：改长标题、复制卡片、改主组件——第五课验收三问全过？

交付物清单

• 一份四原则诊断书（含对比度抽查结果）
• 一张两层 token 表
• 一个 Figma 文件：Variables + 组件（含状态）+ 重组后的整页，before/after 并排
• （加餐）一条 30 秒 Motion 视频及其描述词
• 全部存进笔记；重设计稿和诊断书欢迎发给站长——首席试学官的产品建议是这个 Track 的传统保留节目，而这次你带着设计稿来

📝 随堂测验

随堂测验0 / 4 题正确

1. 为什么第 2 步要求'每一笔改动都能指回诊断书'？

A方便写工作汇报B重设计不是'凭感觉换个样'——诊断书是改动的依据，无据改动往往只是换一种毛病；这也是终检第一问'有据可查'的来源C诊断书是交付物，必须用上D防止版权纠纷

2. 第 6 步'每处修复是否引入了新问题'，最典型的新问题是？

A文件图层命名不规范B组件数量超过 5 个C为了修复'层级不清'加强调，结果一屏出现两个最强对比——对比预算超支，眼睛打架D导出图片分辨率不够

3. 终检'刻度合规'用 Dev Mode 抽查的两个信号是？

A图层数量和文件大小B帧率和加载速度C评论数量和版本历史D字号间距落在阶梯上、颜色显示语义变量名而非裸色值——前者验证刻度纪律，后者验证 token 挂全了

4. '一个页面、一套 token、3–5 个组件，做完做透'防的是什么？

A范围失控——从重设计一个页面滑向重新发明整个产品；范围层老纪律：定义做什么，更要定义不做什么BFigma 免费额度不够C组件太多导致文件卡顿D防止和站长的审美冲突

本课小结 · 单元结课

• 七步装配线：选页面存现场 → 四原则诊断 → 立 token → Figma 落地 → 搭组件 → 重组对照 → （加餐）Motion 配片
• 终检四问：有据可查、刻度合规、对比度过线、经得起折腾
• 防范围失控：一个页面做透，胜过五个半成品

这个单元走完了"原则 → 刻度 → 资产 → 工具 → 实战"的全程：四原则给了你看的能力，三套刻度和 token 给了你立规矩的能力，Figma 和 Motion 给了你产出的能力。回头看这条 Track：五层模型管想清楚，PRD 管写清楚，Onboarding 管一段旅程，本单元管界面本身——框架层和表现层那两课埋的钩子，到这里全部还清。下一站是一个新 Track：服务设计——把镜头从一块屏幕拉远，看见柜台、电话、等待和所有屏幕外的体验。