HiHuo15 · UI/UX 交互演示实验室
这里用同一组内容观察设计决策的变化。所有请求均在浏览器本地模拟，不会上传输入或修改业务数据；重新加载后恢复初始状态。
五个实验
- 切换 8 组配色、明暗主题与 3 种表面，观察相同内容的层级变化和颜色对比度。
- 查看正常、首次使用、无匹配、加载、失败、无权限状态，实际点击恢复或返回。
- 修改项目名，测试组合 emoji 与超长输入，再模拟保存失败，观察输入保留、取消与重试。模拟开关位于独立教学区。
- 打开模态说明，用 Tab、Shift+Tab 和 Escape 检查焦点与关闭后返回位置。
- 手动播放动效，再切为静态；系统“减少动态效果”与网站“暂停小动画”也会关闭非必要运动。
同一内容，不同视觉决定
选择配色、明暗和表面，比较层级变化。
把想法，变成可继续的工作。
集中管理项目、整理资料，随时继续未完成的工作。
- 正文 / 表面
- 17.85:1
- 次文字 / 表面
- 7.58:1
- 按钮文字 / 按钮
- 7.13:1
仅计算当前不透明色对；页面合规还需要检查真实内容与交互。
展开当前色值
--ui-bg: #F0FDF4; --ui-surface: #FFFFFF; --ui-text: #0F172A; --ui-muted: #475569; --ui-border: #64748B; --ui-primary: #166534; --ui-on-primary: #FFFFFF; --ui-accent: #DCFCE7;
状态也有内容和出口
用相同任务检查不同页面状态。
共 3 个项目
- 设计参考库收集原则、交互与真实案例
- 跨团队的季度产品体验改进与协作计划每周更新目标、负责人和进展
- 移动端首次使用流程整理新成员开始使用时需要的资料
保存失败后，工作仍在
修改名称，观察失败、重试和取消。
模态框里的焦点路径
打开后用键盘移动，关闭后回到起点。
动画是解释，结果始终可见
同一结果可以用短动效，也可以静态呈现。
准备就绪，动效不会自动播放。
应该观察什么
配色不是只有主按钮变色：文字、表面、边界与反馈也要一起工作。风格不应改变交互语义。失败状态应允许恢复；表单失败不清空；取消模拟保存不会丢弃输入；模态框关闭后返回触发按钮。示例在原生 dialog 基础上显式处理两个按钮间的首尾 Tab 循环。
动效默认不自动播放。切到静态后仍显示完成结果，不依赖动画结束事件推进业务。演示加载期间可以返回，旧计时器不会把返回后的状态重新覆盖。
代码与使用边界
实现位于仓库 docs/.vuepress/components/UiUxLab.vue，配色来自公开的 palettes.json，样式来自 tokens.css。color-utils.mjs 提供不透明 sRGB 色对的计算与 token CSS 生成函数。
名称编辑的状态与保存流程位于 components/uiux/useProjectNameDraft.mjs，模拟服务独立维护；长度策略、业务文案和教学时长位于 .vuepress/data/uiux-*.mjs。输入计数、校验和提示共享同一上限，要求支持 Intl.Segmenter，未支持时停用本项实验，不静默改用不同计量单位。可复制文本策略模块。
示例将公共控件高度、帮助文字字号等提升为语义变量，动效时长由教学策略传给局部 CSS 变量。插画坐标、局部构图比例与算法系数保留在其自身作用域，不为消除字面量而错误全局化。
演示覆盖本页的五类实验，不是组件全集。模拟保存没有真实后端、持久化、事务或授权系统；自动无障碍扫描也不能替代真实读屏和用户测试。复制前请阅读代码配方与交付验收。