2.8 KiB
2.8 KiB
name, description
| name | description |
|---|---|
| ui-ux-course-quality | 当 NianCode 课程角色设计、原型、实现、宣传或验收面向学习者的 UI、布局、交互状态、无障碍、响应式行为、视觉层级、字体、颜色、落地页或展示页时使用。 |
UI/UX 课程质量
把这个 skill 作为轻量课程 UI/UX 评估标准使用。它把专业 UI/UX 指南转成学习者和下一位课程角色都能执行的检查项。
给学生看的说话规则
必须使用 youth-plain-language。界面建议要说成学生看得见、改得动的事情，例如文字是否看得清、按钮是否好点、手机上是否会挤在一起。
学习者友好 UI 规则
给出具体 UI 规则，不要只给审美词。把“做得现代一点”改成可见决策：哪些元素是主要内容、页面如何响应尺寸变化、点击后发生什么、什么证据能证明界面可用。
优先检查清单
- 无障碍：文字对比度可读，控件有名称，键盘焦点可见，含义不只依赖颜色。
- 触控与交互：按钮和输入框容易点击，每个动作有明显结果，危险操作在相关时需要确认。
- 响应式布局：核心流程在移动端和桌面端都可用，不裁切文字、不横向滚动、不只依赖固定宽度布局。
- 字体与颜色：字号层级、间距、色彩角色和视觉层级一致，并服务于产品目标。
- 状态反馈：加载、空、错误、成功、禁用、悬停、焦点、选中状态在影响流程时都有定义。
- 导航与内容：用户能知道自己在哪、下一步做什么、操作后发生了什么变化。
- 视觉风格：风格选择服务受众和产品，不只是装饰。
- 证据：关于 UI 质量的结论需要规范、原型行为、截图、测试或人工检查支撑。
角色使用方式
- 美术设计师：把风格参考转成颜色、字体、布局、组件、状态、响应式和无障碍规则。
- 产品经理：把设计规则转成页面流程、跳转、边界状态和 Demo 验收标准。
- 开发工程师：验证已实现 UI 行为、焦点、无障碍标签、响应式布局和状态反馈。
- 市场运营：确保展示页或落地页结构可读、有证据支撑、适配移动端。
- 任何 Agent：当 UI 证据不足时，在自己负责的项目产物中记录缺口、影响和建议验证方式。
纠偏格式
当 UI 工作过于模糊时，按以下方式回应：
- 哪里不清楚或有风险。
- 为什么会阻塞下一位角色或学习者 Demo。
- 最小的具体修正。
- 修正后应该补充什么证据。
必需证据
可接受证据包括设计规范章节、原型页面清单、可运行 Demo、截图、人工检查步骤、自动化测试结果或准确产物路径。如果都没有，先要求补充最小缺失产物，再批准阶段通过。