交互原型从零到一 · 实战手册

01 概念

原型设计概述

什么是交互原型 · 原型设计的意义 · 原型设计师的职责与技能树

前往 01 章

02 工具

工具初识

Figma 界面介绍 · 画板与图层 · 基本绘图工具

前往 02 章

03 组件

组件与样式

创建可复用的组件 · 颜色与文本样式 · 自动布局基础

前往 03 章

04 导航

页面与导航

多页面创建 · 页面链接与交互流程 · 制作简单的点击跳转

前往 04 章

05 交互

交互基础

交互面板介绍 · 点击与悬停交互 · 制作按钮状态变化

前往 05 章

06 动效

动效入门

智能动画与过渡 · 缓动函数 · 制作页面切换动效

前往 06 章

07 表单

表单与输入

输入框组件 · 单选/复选框 · 下拉菜单制作

前往 07 章

08 列表

列表与卡片

滚动列表 · 卡片式布局 · 加载更多交互

前往 08 章

09 弹窗

弹窗与提示

模态弹窗 · Toast 提示 · 底部弹出面板

前往 09 章

10 抽屉

侧边栏与抽屉

侧边栏导航 · 抽屉菜单 · 手势滑动交互

前往 10 章

11 轮播

轮播图

图片轮播 · 指示器 · 自动播放与手动滑动

前往 11 章

12 图表

图表与数据可视化

柱状图 · 折线图 · 饼图的原型制作

前往 12 章

13 地图

地图与定位

嵌入地图 · 标记点 · 位置搜索交互

前往 13 章

14 媒体

视频与媒体

视频播放器原型 · 音频控制 · 全屏交互

前往 14 章

15 手势

手势交互

滑动 · 缩放 · 长按 · 双击等手势模拟

前往 15 章

16 响应式

响应式设计

自适应布局 · 断点设置 · 多端适配

前往 16 章

17 系统

设计系统

建立设计规范 · 组件库管理 · 团队协作

前往 17 章

18 版本

版本管理

Figma 版本历史 · 分支与合并 · 多人协作冲突解决

前往 18 章

19 流程

用户流程

用户流程图 · 任务流分析 · 痛点与机会点

前往 19 章

20 线框

线框图

低保真线框图 · 高保真线框图 · 从线框到高保真

前往 20 章

21 视觉

视觉设计基础

排版 · 色彩 · 图标 · 间距原则

前往 21 章

22 规范

交互规范

iOS 与 Material Design 交互规范对比

前往 22 章

23 无障碍

可访问性

色彩对比度 · 字体大小 · 屏幕阅读器适配

前往 23 章

24 测试

原型测试

可用性测试方法 · 测试脚本编写 · 结果分析

前往 24 章

25 动效规范

动效规范

动效时长 · 缓动曲线 · 动效对用户体验的影响

前往 25 章

26 微交互

微交互

点赞动画 · 加载动画 · 空状态动画

前往 26 章

27 多状态

多状态设计

加载态 · 空态 · 错误态 · 成功态

前往 27 章

28 进阶动效

交互动效进阶

路径动画 · 遮罩动画 · 3D 翻转

前往 28 章

29 交付

原型交付

标注规范 · 切图导出 · 开发交接文档

前往 29 章

30 实战

综合实战

从需求到原型完整项目实战（电商 App 首页）

前往 30 章