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