设计方向

「综合方向」下的设计方法与实践笔记。本方向聚焦视觉传达、界面与交互决策的方法论沉淀，回答「长什么样、怎么用着顺」；与前端技术的样式方案等页面分工互链：设计方向讲设计方法与决策依据，前端页讲 CSS 与组件层的具体实现，二者以设计令牌（token）为交接点。

已收录

设计基础与视觉 — 版式（网格与 4/8px 间距系统）、色彩（语义分层与 60-30-10、对比度先行）、字体排印（字阶模数与中英混排）、视觉层次四大原则与品牌一致性；含常见坑速查与检查清单
UI 界面与设计系统 — 设计令牌（原始 / 语义两层）与命名规范、基础组件状态全集模板（按钮示例）、do/don't 反规则、图标网格与尺寸阶梯、暗色主题映射表；与前端样式方案以令牌为交接点
交互与信息架构 — 任务分析模板与流程图约定、正常/空/加载/失败四态设计、导航与信息结构（卡片分类 / 树形测试验证）、原型三档与微交互四要素、动效时长令牌与 prefers-reduced-motion 降级
可用性与无障碍 — 可用性测试流程（出声思维、3~5 名用户）、WCAG 2.1 AA 够用清单（对比度 4.5:1、键盘焦点环、语义与 aria）、自动化（axe/Lighthouse 进 CI）与手工审计双轨
设计与开发协作 — 交付物最小标注模板与切图命名规范、开工/开发前/还原后三个协作节点、像素级走查与状态走查清单、还原度验收流程

主题	说明	状态
设计基础与视觉	版式、色彩、字体排印、视觉层次与品牌一致性	✅ 已收录（`visual-basics.md`：网格与间距单位；配色构成与 60-30-10、对比度先行的选色决策；字阶与排印规则；对比/亲密/对齐/重复与层级速查；常见坑速查与检查清单）
UI 界面与设计系统	界面规范、组件与设计令牌、图标与插画、明暗主题（实现侧与前端样式方案互链）	✅ 已收录（`design-system.md`：令牌分层与语义命名；按钮状态全集模板；反规则；图标网格与阶梯；暗色主题映射表；常见坑速查与检查清单）
交互与信息架构	任务流程与状态、导航与信息结构、原型与微交互	✅ 已收录（`interaction-ia.md`：任务分析模板与四态设计；信息架构组织命名与两种验证法；原型三档选择；微交互四要素与动效纪律；常见坑速查与检查清单）
可用性与无障碍	可用性测试、无障碍基线（WCAG）、可访问性审计	✅ 已收录（`accessibility.md`：可用性测试五步流程与记录表；WCAG 2.1 AA 够用清单；自动化+手工审计清单；常见坑速查与检查清单）
设计与开发协作	交付规范（标注 / 令牌 / 走查）、还原度验收	✅ 已收录（`design-dev-collab.md`：交付物清单与最小标注模板、切图命名；三个协作节点与版本变更；像素与状态走查清单、验收流程；常见坑速查与检查清单）

写作规范请参阅写作指南。