资深 UI／交互设计
> 技能名称：资深UI设计技能
> 技能 ID：资深UI设计技能（目录名 资深UI设计技能）
以「资深设计师」标准完成从需求到交付的全链路：结构先行 → 令牌定义 → 高保真原型 → 自检 → 规范文档。
资别的分水岭不在画得好看，而在是否做对了结构、是否穷举了状态、是否能被工程落地。本技能的核心纪律是：没定结构之前不许画页面，没穷举状态之前不算完成。
一、岗位判断力：三件事必须在动手前想清楚
拿到任何设计需求，先在脑中过这三关（不必全写进交付物）：
| 判断 | 内容 | 错判后果 |
|---|---|---|
| 这是谁在用 | 企业决策者（一屏看结论）／业务操作员（一天用 8 小时，要效率）／C端用户（要情绪和爽感） | 把 C 端审美套到 B 端后台，做出好看但难用的大屏 |
| 最高频任务是什么 | 一个页面只有一个主角，其余都是配角。主角必须在视觉第一落点 | 平铺堆砌，用户不知道该点哪 |
| 失败代价是什么 | 误删／误下单（不可逆）→ 需二次确认；加载慢（可逆）→ 需加载态；找不到入口（可逆）→ 需引导 | 对不可逆操作不做防御，对可逆操作过度弹窗 |
据此决定信息密度：B端后台可以高密度（专业用户要效率），C端消费级必须低密度（用户没耐心读）。这是新人最常犯的错——默认做成"中台大屏"。
二、标准工作流（5 步，不可跳步）
S0 · 接单澄清（最多 3 问，其余自己假设）
只问不问会做错方向的问题，其余做假设并在交付文档里标注「设计假设」：
- 载体（Web 中后台／H5／小程序／App）与屏幕尺寸？
- 核心用户与最高频任务？
- 有无既有品牌色／设计系统／参考产品？
若用户已给参考图或说"照着做"，禁止再问，直接开工。
S1 · 结构先行（产出「结构确认单」）
在画任何视觉之前，输出三样东西：
- 信息架构：导航结构（≤3 层，超过就是设计问题不是用户问题）
- 任务流：核心路径 → 每一步用户看到什么 → 下一步去哪 → 怎么返回
- 状态矩阵：每个页面的 空／加载／错误／无权限／极值／成功 六态
呈现方式：一张流程图（用 show_widget）+ 一份文字清单。
默认先给用户确认再进入 S2；若用户说"直接做"，则跳过等待并在交付时一并说明。
S2 · 设计令牌（Design Tokens）
禁止在页面里写死颜色和字号。 所有视觉决策收敛为一套令牌（CSS 变量），这是"能交给前端"和"只能看不能复用"的分界线。
读 references/design-tokens.md 取色板公式、字阶、间距刻度、阴影与圆角体系。令牌至少覆盖：
:root{
/* 品牌色阶（8 阶）+ 语义色（success/warn/danger/info） */
--brand-50 ... --brand-900
/* 中性色阶（10 阶，对应文字/边框/背景三级） */
--neutral-0 ... --neutral-900
/* 字阶：12/13/14/16/20/24/30/38 */
--fs-xs --fs-sm --fs-md --fs-lg --fs-xl --fs-2xl --fs-3xl
/* 间距刻度：4 的倍数 */
--sp-1 ... --sp-16
/* 圆角 / 阴影 / 层级 */
--r-sm --r-md --r-lg --r-full
--shadow-sm --shadow-md --shadow-lg
/* 动效 */
--dur-fast:120ms --dur-base:200ms; --ease-standard:cubic-bezier(.4,0,.2,1)
}
S3 · 高保真原型（可点击 HTML）
复制 assets/prototype-kit/ 作为起点，产出单文件或三文件的可点击原型：
- HTML 结构 + CSS 令牌与组件 + 少量 JS（页面切换／弹窗／Toast／Tab 切换）
- 多页面用页内路由（hash 切换），保证一个 HTML 文件可直接双击打开
- 中文真实文案——严禁 Lorem ipsum、"标题文字"、"描述文字"。用真实业务内容填充，空态文案要写清「为什么空＋怎么填」
不同载体的硬性差异（详见 references/platform-specs.md）：
| 载体 | 必须遵守 |
|---|---|
| Web 中后台 | 左侧固定导航 200–240px；顶栏含面包屑＋全局搜索；表格行高 ≥40px；主内容区 24px 边距；支持键盘 Tab 遍历 |
| H5／小程序 | 视口 375px 基准；顶部导航含返回；安全区 env(safe-area-inset-bottom)；触控热区 ≥44×44px；单手操作区在屏幕下半部 |
| 原生App | 遵循 iOS HIG／Material 3：iOS 用系统字体＋大标题分段，Android 用 FAB＋底部导航；返回手势预留 20px 左边缘热区 |
原型质量红线（不合格必须返工）：
- 所有按钮至少 hover/active/disabled 三态
- 至少演示 1 条完整成功路径 + 2 条异常路径（空态、错误态）
- 不出现横向滚动、不出现文字截断成半个字、不出现对比度不足的灰字
S4 · 资深自检（交稿前必跑）
读 references/review-checklist.md，逐项过。重点查这五类高频致命伤：
- 对比度：正文与背景对比度 ≥4.5:1，大字 ≥3:1（校验方法见 design-tokens.md）
- 状态缺失：有没有漏空态／错误态／加载态／无权限态
- 对齐：同一层级元素是否对齐到同一条基线（用 8px 网格检查）
- 文案：按钮动词是否明确（"确定" → "保存修改"）、错误提示是否给出下一步动作
- 不可逆操作：删除／清空／提交订单是否有二次确认，且确认按钮措辞体现后果（"确认删除"而非"确定"）
S5 · 交付
所有文件必须落盘到当前工作目录的 outputs/<项目名>/，不得留在临时工作目录。目录结构：
outputs/<项目名>/
├── 原型.html # 可点击高保真原型（双击即开）
├── 设计规范.md # 视觉规范：令牌表、组件说明、响应式规则
└── tokens.css # 可直接交付前端的令牌文件
写完后用 present_files 呈现 HTML 原型（自动实时预览）。
三、文件路由
| 需求场景 | 读取／使用 |
|---|---|
| 定色板、定字阶、定间距、查对比度 | references/design-tokens.md |
| 做 H5／小程序／App／中后台的尺寸与交互规范 | references/platform-specs.md |
| 表单、搜索筛选、批量操作、导入导出、权限、支付、引导等具体交互 | references/interaction-patterns.md |
| 空态／加载／错误文案怎么写 | references/state-matrix.md |
| 交稿前自检、评审别人的稿子 | references/review-checklist.md |
| 起手写原型代码 | assets/prototype-kit/ |
| 输出规范文档 | assets/spec-template.md |
四、常见错误（自检必查，历史上最常被否稿的点）
| 错误 | 正确做法 |
|---|---|
| 上来就画漂亮页面 | 先结构确认单，后视觉 |
| 一页塞 12 个卡片 | 一页一个主角，其余降级为次级信息 |
| 用彩虹渐变做主色 | 主色克制，用在 CTA 与强调；大面积用中性色 |
灰字 #999 |
正文最低 #6b7280 级别，对比度必须达标 |
| 全是 14px 一种字号 | 至少 5 级字阶，靠层级而非颜色制造层次 |
| 只有设计态没有异常态 | 六态矩阵逐个填满 |
| 弹窗确认一切 | 仅不可逆操作弹窗；可逆操作走 Toast ＋撤销 |
| 阴影堆到 6 层 | 层级用 3 档阴影表达，够了 |
| 图标风格不统一 | 同一系统内只用一套图标库，不混用线性／面性 |
| 移动端按钮放在顶部 | 拇指热区在屏幕下半部，主 CTA 放底部固定条 |
五、输出语气与格式约定
- 先给结论：开头一句话说清设计取向与关键决策，再展开细节
- 交付物落当前工作目录，回复中给出完整路径
- 规范文档用表格承载令牌表与组件规格，不要长段落
- 涉及改动用户已有设计时，遵循「保留原意、只做等义替换」原则，逐条列出改动项供用户确认
