UI/UX 设计
设计与创意 · 预计 5-6 周 · 4 阶段
UI/UX 设计不止是画图，更是一套「以用户为中心」的决策系统。路线图从设计基础（配色/排版/间距）开始，掌握组件规范、交互设计原则与可用性评估，最终产出一套完整作品集项目。
学后可投：UI 设计师UX 设计师产品设计师
学习进度：已完成 0 / 4 阶段0%
下一阶段目标：设计基础（完成当前阶段后自动推进）
学习路线图按顺序学完每一阶段
点击阶段节点直达学习内容；绿色=已完成，彩色=当前阶段
1
当前阶段设计基础
2-3 天难度 入门
核心知识点
配色原理与色彩心理学排版与字体层级间距系统与 8pt 网格对比度与可读性
本阶段学习内容
要点速记
- 60-30-10 配色：主色 60% / 次色 30% / 强调色 10%
- 正文与背景对比度 ≥ 4.5:1（WCAG AA）
- 8pt 网格：间距/尺寸用 8 的倍数，小元素用 4
- 别只靠颜色传达信息（色盲友好）
本阶段练习题（点击选项作答）
1. 8pt 网格的作用是？
2. 只靠颜色区分状态的问题？
练习任务
- 用 Figma 重绘 3 个知名 App 的首页
- 做一个 8pt 网格的组件间距规范
本阶段验收标准
用 Figma 重绘 3 个知名 App 首页，产出 8pt 网格间距规范
2
组件与设计规范
3-5 天难度 初级
核心知识点
按钮/输入框/卡片等组件设计设计系统（Ant Design / Material）图标与插画组件状态（hover/disabled/loading）
本阶段学习内容
要点速记
- 设计系统 = 令牌 + 组件 + 规范，改版只改令牌
- 组件必须覆盖状态：默认/hover/禁用/loading/错误/空态
- 漏 loading 和空态是最常见的交付坑
- 先学 Ant Design/Material 规范再自建
本阶段练习题（点击选项作答）
1. 设计交付最常被漏掉的组件状态是？
练习任务
- 用设计系统做一套组件库页面
- 设计 20 个业务图标并统一风格
本阶段验收标准
用设计系统做一套组件库页面，设计 20 个统一风格图标
3
交互与可用性
4-7 天难度 中级
核心知识点
交互设计原则（尼尔森 10 条）信息架构与导航设计用户流程与状态流转可用性测试基础
本阶段学习内容
要点速记
- 尼尔森原则核心：状态可见、用户控制、一致性、防错
- 先画用户流程再画界面；关注最短路径
- 可用性测试：真实任务 + 观察卡点 + 不引导
- 5 人一轮足够发现主要问题
本阶段练习题（点击选项作答）
1. 「操作有反馈」对应尼尔森哪条原则？
2. 可用性测试的正确做法是？
练习任务
- 为一个 App 画完整用户流程图
- 做一次 5 人可用性测试并输出问题清单
本阶段验收标准
为 App 画完整用户流程图，执行一次 5 人可用性测试
4
作品集与交付
5-10 天难度 高级
核心知识点
设计交付（标注/切图/规范文档）作品集结构（背景-问题-方案-验证）设计案例包装与开发协作流程
本阶段学习内容
要点速记
- 作品集讲决策过程：背景 → 角色 → 研究 → 方案 → 结果 → 复盘
- 交付：设计稿 + 切图（SVG）+ 动效说明 + 令牌
- 2-3 个完整项目胜过 10 张散图
- 动效规范：弹窗 200ms / hover 150ms
本阶段练习题（点击选项作答）
1. 作品集最应该展示的是？
练习任务
- 完成一个完整产品设计项目（含研究→方案→规范）
- 用 Behance/站酷发布作品集
本阶段验收标准
完成一个含研究-方案-规范的完整设计项目并发布作品集
怎么学
学习方法与实操建议，配合路线图按阶段推进
- 1用「临摹 → 拆解 → 原创」三步法练习，每天临摹一个 Dribbble 优秀界面
- 2设计系统（Ant Design / Material）是最好的规范教材
- 3每个设计决策都要能说出理由（对比度/间距/层级）
- 4作品集是最终目标：做 2-3 个完整项目胜过 100 张零散图
学完能做什么
- 用 Figma 完成中高保真设计
- 遵循设计系统规范产出组件
- 独立完成产品设计全流程项目
面试常见问题6 题
常见误区
- 1只临摹不思考设计决策
- 2不学交互原则，只做视觉
- 3不跟开发对齐，交付即返工
- 4作品集只有效果图没有过程
学习节奏建议
预计 5-6 周，共 4 个阶段。
每阶段按标注时长安排：先读参考文档掌握核心知识点，再完成练习任务，通过 验收标准后标记完成进入下一阶段。
当前为游客模式，进度保存在本设备；登录后可云端同步、多端续学。
当前进度
0%
0 / 4 阶段
进行中
进行中
下一阶段：设计基础