CURRICULUM / 课程内容
一条清晰的学习路径,
八次向前的练习。
先理解,再制作;先完成,再优化。以下为拟定课程方案,具体课时与排课安排待讲师确认。
入门 → 项目实战8 个模块含练习与评价标准01认识 Figma 与设计工作流
建立文件、页面和图层的组织习惯,理解 Frame、Group 与基础编辑操作。
- 画布导航、选择与快捷操作
- Frame、图层命名和页面组织
- 形状、文字、图片与基础导出
练习产出 · 搭建一张个人介绍卡片
检查标准 · 图层结构清晰,文字可读,图片比例正确
检查标准 · 图层结构清晰,文字可读,图片比例正确
02视觉基础与界面表达
把排版、颜色和间距转化为有层次的界面。
- 字体层级与阅读顺序
- 颜色搭配、对比与留白
- 栅格、对齐及界面一致性
练习产出 · 设计一张活动介绍页
检查标准 · 视觉层级明确,间距规则一致
检查标准 · 视觉层级明确,间距规则一致
03自动布局与响应式思维
让界面适应内容变化,减少重复调整。
- Auto Layout 的方向与间距
- Hug、Fill 和固定尺寸
- 嵌套布局、约束与不同宽度适配
练习产出 · 制作可伸缩的课程卡片与列表
检查标准 · 文本变长后仍可正常排布
检查标准 · 文本变长后仍可正常排布
04组件、变体与复用
把重复元素整理为可维护的设计组件。
- 主组件与实例
- 变体、组件属性和状态
- 命名规范与复用边界
练习产出 · 建立按钮、输入框和卡片组件集
检查标准 · 状态清楚,实例修改不破坏结构
检查标准 · 状态清楚,实例修改不破坏结构
05样式、变量与基础设计系统
用统一规则管理颜色、间距和界面风格。
- 颜色与文字样式
- 变量与模式的基础用法
- 组件说明及使用规范
练习产出 · 整理一份小型 UI Kit
检查标准 · 命名一致,能够说明组件适用场景
检查标准 · 命名一致,能够说明组件适用场景
06交互原型与用户流程
让静态界面变成可演示、可检查的操作流程。
- 用户流程与页面关系
- 连接、触发条件及交互反馈
- 过渡、浮层和异常状态
练习产出 · 完成课程浏览到报名的交互原型
检查标准 · 主要路径可走通,返回与错误状态合理
检查标准 · 主要路径可走通,返回与错误状态合理
07完整项目:学习产品界面
串联需求理解、草图、界面和原型,完成一个完整案例。
- 目标用户与任务定义
- 信息架构和低保真草图
- 关键页面、高保真与迭代
练习产出 · 完成学习产品首页、详情页和学习页
检查标准 · 页面一致,能解释设计选择
检查标准 · 页面一致,能解释设计选择
08交付整理与作品讲述
把设计过程整理成别人能够理解的交付成果。
- 文件与组件整理
- 标注、资源导出与协作说明
- 案例结构、复盘及后续改进
练习产出 · 提交项目文件、原型及案例说明
检查标准 · 文件可理解,成果与问题对应
检查标准 · 文件可理解,成果与问题对应