HiHuo16 · 参考来源与持续扩展
本系列包含设计分类与产品实现规范，按任务持续扩展。主题清单以总览和机器索引为准，不承诺有限篇幅覆盖所有设备、场景、配色和设计风格。
REF-01 · 区分规范与设计建议
带“规范”的条目链接到原文。正文中的间距、圆角、动效时间、主题配色、风格分类和控件选择默认值是本系列的设计建议或示例。
WCAG 的成功准则是规范要求；Understanding 文档帮助解释条款；WAI-ARIA APG 提供组件设计指导；MDN 与 web.dev 提供实现说明。它们的作用不同，不能把 APG 的一个例子说成所有产品唯一的合法实现。
本次来源核对日期：2026-11-12。平台与浏览器能力可能变化，交付具体项目时重新核对相关页面。
原始来源索引
| 来源 | 使用位置与目的 |
|---|---|
| WCAG 2.2 | 无障碍成功准则及等级、条件与例外 |
| WCAG：文字对比度 | 08：普通文字与大号文字的门槛 |
| WCAG：非文字对比度 | 08：控件和图形的必要识别信息 |
| WCAG：目标尺寸 | 03：尺寸与间距例外 |
| WCAG：拖动操作 | 03：无需拖动的单指针替代 |
| WCAG：重排 | 02、12：缩放与窄宽度内容适配 |
| WCAG：暂停、停止、隐藏 | 10：持续运动与自动更新的控制 |
| WCAG：音频控制 | 10：自动播放音频的控制 |
| WCAG：状态消息 | 12：不转移焦点的动态反馈 |
| WCAG：可访问认证 | 12：降低认证中的认知负担 |
| WAI-ARIA APG 模式 | 03、04：常见控件的语义与键盘行为 |
| APG 模态对话框 | 04、14：焦点、关闭与模态行为 |
| WAI 图片教程 | 11：按用途确定替代文本 |
| W3C 双向文字 | 12：dir 与 RTL 结构 |
| MDN 减少运动 | 10：系统偏好与媒体查询 |
| MDN 响应式图片 | 11：分辨率切换与换构图 |
| MDN dialog | 14：原生对话框能力 |
| MDN Vibration API | 10：Web 触觉能力与兼容性边界 |
| web.dev CSS 动画性能 | 10：动画属性与渲染成本 |
| Vue Composables | 18：有状态逻辑与生命周期复用 |
| MDN Intl.Segmenter | 20：字素簇计数与支持范围 |
| MDN maxlength | 20：原生长度限制采用的单位 |
| MDN AbortController | 21：取消信号与异步任务 |
| MDN setPointerCapture | 21：拖拽会话与指针捕获 |
以上是参考索引，具体主张在对应文章附近提供链接。原创原则和示例不冒称来源原文，也不依据资源列表数量证明结论。
REF-02 · 新条目按统一结构编写
# 条目标题
ID：唯一且稳定，例如 INT-05。
适用：什么任务与环境。
决策：建议采用什么，以及为什么。
反例：容易出现的具体错误。
边界：什么时候不采用；平台差异是什么。
实现：文字、代码、图示或演示，说明范围。
检查：如何进入状态并验证。
来源：原始来源、条款、核对时间；原创建议明确标注。
新增条目后更新文章内索引和 ai-context.json。新增主题页后同步目录与机器索引，避免 AI 找到失效文件。新增配色后重新生成 CSS 并计算所有声明颜色对。
REF-03 · 后续扩展按实际项目排序
| 扩展方向 | 应提供的独立内容 |
|---|---|
| 复杂表单 | 条件字段、分步保存、地址、时间范围、跨字段校验 |
| 数据可视化 | 分类与连续色阶、不确定性、零基线与尺度、交互替代 |
| 移动端与小程序 | 原生返回、软键盘、安全区、权限、平台手势 |
| 画布与媒体 | 撤销栈、选区、缩放、时间线、字幕、资源恢复 |
| 协作与 AI 代理 | 差异比较、授权范围、任务日志、暂停与恢复 |
| 设计系统 | 组件变体、尺寸、状态、设计 token 与代码映射 |
| 专项环境 | TV、手柄、空间交互、打印、现场与公共终端 |
扩展时优先记录真实失败案例和决策证据。一个经过验证的场景比十个只有名称的“完整方案”更适合 AI 参考。
本仓库的检查入口
基础一致性检查无需额外依赖：node scripts/verify-ui-ux.mjs。配色与计算代码的源文件为 docs/.vuepress/data/uiux-palettes.json 和 uiux-color.mjs；修改后用 node scripts/verify-ui-ux.mjs --write-tokens 同步公开下载文件并重建 CSS。校验器会检查组件使用的 CSS 与公开版本一致。完整站点使用 npm run build。
文本策略来源为 data/uiux-text-policy.mjs，同一命令同步下载版本。行为检查使用 node scripts/verify-ui-ux-behavior.mjs，覆盖计数单位、临界长度、迟到保存与销毁后的结果隔离，不把检查标签文字当行为验证。
浏览器检查脚本为 scripts/verify-ui-ux-browser.mjs，需要 Playwright、对应浏览器和 @axe-core/playwright。可以安装在独立目录，避免改变站点依赖：
npm install --prefix /tmp/hihuo-uiux-qa playwright @axe-core/playwright
/tmp/hihuo-uiux-qa/node_modules/.bin/playwright install chromium
python3 -m http.server 4179 --bind 127.0.0.1 --directory docs/.vuepress/dist
# 在另一个终端执行：
UIUX_QA_MODULES=/tmp/hihuo-uiux-qa UIUX_BASE_URL=http://127.0.0.1:4179 node scripts/verify-ui-ux-browser.mjs
脚本检查主题数据、状态恢复、保存重试与取消、模态焦点、静态替代和窄屏溢出，并输出截图与报告到 .cache/ui-ux-qa/。自动扫描限定在演示区域，不能用于宣称全站或完整 WCAG 合规。