第 1 章 初识产品原型设计
1.1 产品原型概述… …………………… 2
1.1.1 草图原型… …………………… 2
1.1.2 低保真原型… ………………… 2
1.1.3 高保真原型… ………………… 2
1.2 产品原型设计的流程… …………… 2
1.2.1 需求分析… …………………… 3
1.2.2 架构设计… …………………… 3
1.2.3 流程设计… …………………… 3
1.2.4 原型设计… …………………… 4
1.2.5 原型评审… …………………… 4
1.2.6 完善优化… …………………… 5
1.3 Axure RP 概述…………………… 5
1.4 Axure RP 的历史………………… 6
1.4.1 Axure RP 的诞生… ………… 6
1.4.2 Axure RP 的发展… ………… 6
1.5 Axure RP 的应用………………… 7
1.5.1 绘制架构图… ………………… 7
1.5.2 绘制流程图… ………………… 7
1.5.3 绘制原型图… ………………… 7
1.5.4 实现交互… …………………… 8
1.5.5 生成HTML 文件……………… 8
1.5.6 生成Word 说明书… ………… 9
1.6 AIGC 赋能产品原型设计… …… 10
1.6.1 认识AIGC…………………… 10
1.6.2 AIGC 赋能原型设计流程… 10
1.6.3 产品原型设计常用的
AI 工具……………………… 10
第 2 章 Axure RP 基础知识
2.1 欢迎界面… ……………………… 17
2.2 工作界面………………………… 17
2.2.1 标题栏… …………………… 17
2.2.2 菜单栏… …………………… 18
2.2.3 工具栏… …………………… 19
2.2.4 画布… ……………………… 20
2.2.5 “页面”与“概要”面板… 20
2.2.6 “元件库”与“母版”
面板………………………… 20
2.2.7 “样式”、“交互”与“说明”
面板………………………… 21
2.3 文件的基本操作………………… 22
2.3.1 新建文件… ………………… 22
2.3.2 保存文件… ………………… 23
2.3.3 打开文件… ………………… 23
2.3.4 导入文件… ………………… 23
2.3.5 关闭文件… ………………… 23
2.3.6 文件格式… ………………… 23
2.3.7 自动备份… ………………… 24
2.4 页面管理………………………… 25
2.4.1 添加页面… ………………… 25
2.4.2 移动页面… ………………… 25
2.4.3 删除页面… ………………… 26
2.4.4 剪切页面… ………………… 26
2.4.5 复制页面… ………………… 26
2.4.6 粘贴页面… ………………… 26
2.4.7 重命名页面… ……………… 26
2.4.8 重复页面… ………………… 26
2.4.9 图表类型… ………………… 27
2.4.10 搜索页面…………………… 27
2.5 页面设置………………………… 28
2.5.1 页面尺寸… ………………… 28
2.5.2 页面对齐… ………………… 28
2.5.3 页面填充… ………………… 29
2.5.4 低保真度模式… …………… 32
2.6 操作视图………………………… 32
2.6.1 缩放视图… ………………… 33
2.6.2 平移视图… ………………… 33
2.7 标尺、网格和辅助线…………… 33
2.7.1 标尺… ……………………… 33
2.7.2 网格… ……………………… 34
2.7.3 辅助线… …………………… 34
第3 章 元件与元件库
3.1 添加元件………………………… 39
3.1.1 课堂案例——制作企业招聘H5
岗位申请页的低保真原型… 39
3.1.2 基本元件… ………………… 43
3.1.3 课堂案例——制作中式茶业官网
联系方式页的低保真原型… 49
3.1.4 表单元件… ………………… 59
3.1.5 菜单/ 表格元件… ………… 63
3.1.6 标记元件… ………………… 66
3.1.7 课堂案例——制作家具电商
平台的购买商品流程图… … 67
3.1.8 流程图元件… ……………… 70
3.1.9 图标元件… ………………… 71
3.1.10 示例 UI 模式元件… ……… 71
3.2 管理元件………………………… 73
3.2.1 课堂案例——管理中式茶业
官网联系方式页低保真原型
的元件… …………………… 73
3.2.2 命名元件… ………………… 74
3.2.3 定位元件… ………………… 74
3.2.4 缩放元件… ………………… 74
3.2.5 旋转元件… ………………… 74
3.2.6 组合元件… ………………… 75
3.2.7 元件排序… ………………… 75
3.2.8 对齐和分布元件… ………… 76
3.3 转换元件………………………… 76
3.3.1 课堂案例——制作旅游出行App
引导页的低保真原型… …… 76
3.3.2 转换为形状… ……………… 80
3.3.3 转换为图片… ……………… 80
3.4 创建元件库……………………… 81
3.4.1 课堂案例——制作中式茶业
官网元件库… ……………… 81
3.4.2 新建元件库… ……………… 82
3.4.3 编辑元件库… ……………… 83
3.4.4 添加图片文件夹… ………… 84
3.5 使用外部元件库………………… 85
3.5.1 课堂案例——制作旅游出行App
登录页的低保真原型… …… 85
3.5.2 下载元件库… ……………… 90
3.5.3 导入元件库… ……………… 90
3.6 课堂练习——制作中式茶业官网
首页的低保真原型……………… 91
3.7 课后习题——制作企业招聘H5
关于我们页的低保真原型……… 91
3.8 AI 扩展——用ProcessOn 的
AI 功能制作旅游出行App 的
用户登录流程图………………… 92
第4 章 元件的样式与母版
4.1 设置元件属性…………………… 94
4.1.1 课堂案例——制作中式茶业
官网茶叶详情页的高保真
原型… ……………………… 94
4.1.2 不透明度… ………………… 97
4.1.3 排版… ……………………… 97
4.1.4 填充… ……………………… 99
4.1.5 线段… ……………………… 99
4.1.6 阴影… ……………………… 100
4.1.7 圆角… ……………………… 100
4.1.8 边距… ……………………… 100
4.2 创建和管理样式………………… 100
4.2.1 课堂案例——制作企业招聘H5
关于我们页的高保真原型…… 101
4.2.2 创建页面样式… …………… 103
4.2.3 创建元件样式… …………… 104
4.2.4 编辑元件样式… …………… 105
4.2.5 格式刷… …………………… 105
4.3 认识母版………………………… 105
4.4 创建和编辑母版………………… 107
4.4.1 课堂案例——创建旅游出行App
状态栏和指示器母版… …… 107
4.4.2 创建母版… ………………… 108
4.4.3 课堂案例——将中式茶业官网
底部转换为母版… ………… 109
4.4.4 编辑和转换母版… ………… 110
4.4.5 搜索母版… ………………… 111
4.4.6 删除母版… ………………… 111
4.5 添加母版到页面………………… 111
4.5.1 课堂案例——在旅游出行App
引导页中添加母版… ……… 112
4.5.2 拖放行为… ………………… 113
4.5.3 文本和图片重写… ………… 114
4.5.4 使用情况报告… …………… 114
4.6 课堂练习——制作中式茶业官网
关于品茗页的高保真原型……… 114
4.7 课后习题——将企业招聘H5 标题
转换为母版……………………… 115
4.8 AI 扩展——用妙多AI 工具制作电
商App 详情页的高保真原型…… 116
第5 章 基础交互
5.1 认识Axure RP 的交互结构…… 118
5.2 添加链接交互…………………… 119
5.2.1 课堂案例——制作旅游出行
App 的页面链接… ………… 120
5.2.2 打开链接… ………………… 121
5.2.3 关闭窗口… ………………… 122
5.2.4 课堂案例——制作中式茶业
官网的视频链接… ………… 122
5.2.5 框架中打开链接… ………… 123
5.2.6 课堂案例——制作中式茶业
官网的返回顶部… ………… 123
5.2.7 滚动到元件… ……………… 124
5.3 添加元件交互…………………… 125
5.3.1 课堂案例——制作家具电商
平台顶部导航栏的显示/ 隐藏
效果… ……………………… 125
5.3.2 显示/ 隐藏… ……………… 126
5.3.3 设置面板状态… …………… 127
5.3.4 设置文本… ………………… 128
5.3.5 设置图片… ………………… 128
5.3.6 课堂案例——制作中式茶业新闻
动态页的页码交互… ……… 129
5.3.7 设置选中… ………………… 130
5.3.8 设置列表选中项… ………… 130
5.3.9 启用/ 禁用… ……………… 130
5.3.10 移动………………………… 131
5.3.11 旋转………………………… 131
5.3.12 设置尺寸…………………… 131
5.3.13 置于顶层/ 底层…………… 131
5.3.14 设置不透明………………… 132
5.3.15 课堂案例——为家具电商App
注册页文本框获取焦点…… 132
5.3.16 获取焦点…………………… 132
5.3.17 展开/ 收起树节点………… 133
5.4 设置交互样式…………………… 133
课堂案例——设置家具电商平台底部
导航交互样式………………………… 134
5.5 自适应视图……………………… 135
5.5.1 课堂案例——设置中式茶业
官网茗茶区域自适应视图…… 135
5.5.2 创建和管理自适应视图… … 137
5.5.3 编辑自适应视图… ………… 138
5.5.4 预览和生成自适应视图… … 138
5.6 课堂练习——制作家具电商App 的
页面链接………………………… 138
5.7 课后习题——设置职业教育管理系统侧导航交互样式…………… 139
5.8 AI 扩展——用GemDesign 制作中式茶业官网导航自适应视图… 139
第6 章　动态面板
6.1 认识动态面板…………………… 141
6.2 使用动态面板…………………… 141
6.2.1 课堂案例——为旅游出行App引导页创建动态面板… …… 141
6.2.2 创建动态面板并命名… …… 144
6.2.3 管理动态面板状态… ……… 145
6.2.4 课堂案例——将家具电商平台树状侧导航转换为动态面板……146
6.2.5 转换为动态面板… ………… 148
6.3 动态面板的特殊样式……………148
6.3.1 滚动方式… ………………… 149
6.3.2 自适应内容… ……………… 149
6.3.3 课堂案例——将中式茶业官网海报设为100% 宽度……… 149
6.3.4 100% 宽度… ……………… 150
6.3.5 课堂案例——固定家具电商App 顶部… ………………… 150
6.3.6 固定到浏览器… …………… 151
6.4 动态面板的特殊事件…………… 152
6.4.1 尺寸改变时… ……………… 152
6.4.2 课堂案例——制作中式茶业官网的轮播效果… ………… 152
6.4.3 载入时… …………………… 156
6.4.4 状态改变时… ……………… 156
6.4.5 课堂案例——制作企业招聘H5 的拖动交互… ………… 157
6.4.6 拖动事件… ………………… 158
6.4.7 滚动事件… ………………… 158
6.5 课堂练习——固定职业教育管理系统顶部导航栏………………… 159
6.6 课后习题——制作美食外卖App引导页的拖动交互……………… 159
6.7 AI 扩展——用Master GO 制作家具电商平台的轮播效果……… 160
第7 章　高级交互
7.1 变量……………………………… 162
7.1.1 课堂案例——跳转到不同状态的家具电商平台购物车页… … 162
7.1.2 全局变量… ………………… 164
7.1.3 局部变量… ………………… 165
7.2 条件逻辑………………………… 167
7.2.1 课堂案例——制作旅游出行App 的不同登录状态… …… 168
7.2.2 匹配所有或匹配任何条件语句… ……………………… 171
7.2.3 用来进行逻辑判断的值… … 171
7.2.4 确定变量或元件名称… …… 172
7.2.5 逻辑判断的运算符… ……… 172
7.2.6 用来选择被比较的值… …… 172
7.2.7 文本框… …………………… 173
7.2.8 如果或否则… ……………… 173
7.3 表达式和函数…………………… 173
7.3.1 课堂案例——制作家具电商平台商品信息交互… ……… 174
7.3.2 运算符类型… ……………… 178
7.3.3 表达式的格式… …………… 179
7.3.4 常见函数… ………………… 179
7.4 课堂练习——制作职业教育管理系统的不同登 录状态…………… 185
7.5 课后习题——制作美食外卖App 的不同滚动状态…………………… 186
7.6 AI 扩展——用MasterGo 制作美食外卖App 的不同登录状态…………… 186
第8 章　中继器
8.1 认识中继器………………………188
8.1.1 课堂案例——制作家具电商App分类页的高保真原型… …… 188
8.1.2 数据集… …………………… 191
8.1.3 项目交互… ………………… 192
8.1.4 样式设置… ………………… 193
8.2 数据集的操作…………………… 195
8.2.1 课堂案例——为家具电商平台商品列表添加分页… ……… 195
8.2.2 设置分页与数量… ………… 197
8.2.3 课堂案例——为旅游出行App设置酒店排序… …………… 198
8.2.4 添加和移除排序… ………… 200
8.2.5 课堂案例——为家具电商平台添加商品筛选功能… ……… 201
8.2.6 添加和移除筛选… ………… 203
8.2.7 添加和删除中继器的项目… 204
8.3 项目列表的操作…………………204
8.4 课堂练习——制作职业教育管理系统课程列表的高保真原型……205
8.5 课后习题——为美食外卖App设置商家排序……………………205
8.6 AI 扩展——用GemDesign 制作教务管理系统学生列表的高保真原型…206
第9 章 团队项目与发布输出
9.1 Axure 云…………………………209
9.1.1 课堂案例——创建自己的Axure 云账户… …………… 209
9.1.2 创建Axure 云账户………… 210
9.1.3 发布到Axure 云 …………… 210
9.2 团队项目………………………… 212
9.2.1 课堂案例——创建中式糕点H5 团队项目… …………… 212
9.2.2 创建团队项目… …………… 213
9.2.3 加入团队项目… …………… 214
9.2.4 打开团队项目… …………… 215
9.2.5 编辑项目文件… …………… 216
9.3 发布查看原型…………………… 218
9.3.1 课堂案例——查看中式糕点H5 原型… ………………… 219
9.3.2 浏览器… …………………… 219
9.3.3 播放器… …………………… 219
9.4 使用生成器………………………220
9.4.1 课堂案例——基于中式糕点H5 原型生成HTML 文件………………… 220
9.4.2 HTML 生成器… …………… 221
9.4.3 Word 生成器… …………… 222
9.4.4 更多生成器… ……………… 225
9.5 课堂练习——创建职业教育管理系统的团队项目…………………226
9.6 课后习题——发布查看旅游出行App 原型…………………………226
9.7 AI 扩展——用Pixso 发布音乐播放器原型………………………227
第 10 章 商业案例实战
10.1 制作中式茶业官网的低保真原型……………………………229
10.1.1 项目背景…………………… 229
10.1.2 项目要求…………………… 229
10.1.3 项目要点…………………… 229
10.1.4 项目设计…………………… 229
10.2 制作企业招聘H5 的低保真原型……………………………230
10.2.1 项目背景…………………… 230
10.2.2 项目要求…………………… 231
10.2.3 项目要点…………………… 231
10.2.4 项目设计…………………… 231
10.3 制作旅游出行App 的低保真原型……………………………232
10.3.1 项目背景…………………… 232
10.3.2 项目要求…………………… 232
10.3.3 项目要点…………………… 232
10.3.4 项目设计…………………… 232
10.4 制作中式茶业官网的高保真交互原型………………………234
10.4.1 项目背景…………………… 234
10.4.2 项目要求…………………… 234
10.4.3 项目要点…………………… 234
10.4.4 项目设计…………………… 235
10.5 制作家具电商平台的高保真交互原型… ……………………236
10.5.1 项目背景…………………… 236
10.5.2 项目要求…………………… 236
10.5.3 项目要点…………………… 237
10.5.4 项目设计…………………… 237
10.6 制作企业招聘H5 的高保真交互原型… ……………………238
10.6.1 项目背景…………………… 238
10.6.2 项目要求…………………… 238
10.6.3 项目要点…………………… 239
10.6.4 项目设计…………………… 239
10.7 制作中式糕点H5 的高保真交互原型… ……………………240
10.7.1 项目背景…………………… 240
10.7.2 项目要求…………………… 240
10.7.3 项目要点…………………… 240
10.7.4 项目设计…………………… 240
10.8 制作旅游出行App 的高保真交互原型… …………………… 241
10.8.1 项目背景…………………… 241
10.8.2 项目要求…………………… 241
10.8.3 项目要点…………………… 241
10.8.4 项目设计…………………… 241
10.9 制作家具电商App 的高保真交互原型 … ……………………243
10.9.1 项目背景…………………… 243
10.9.2 项目要求…………………… 243
10.9.3 项目要点…………………… 243
10.9.4 项目设计…………………… 243
10.10 课堂练习——制作职业教育管理系统的高保真交互原型………245
10.10.1 项目背景… ……………… 245
10.10.2 项目要求… ……………… 245
10.10.3 项目要点… ……………… 245
10.10.4 项目设计… ……………… 246
10.11 课后习题——制作美食外卖App的高保真交互原型……………248
10.11.1 项目背景… ……………… 248
10.11.2 项目要求… ……………… 248
10.11.3 项目要点… ……………… 248
10.11.4 项目设计… ……………… 249
10.12 AI 扩展——用UXbot 制作家具 电商平台的高保真交互原型……………250
10.12.1 项目背景… ……………… 250
10.12.2 项目要求… ……………… 251
10.12.4 项目要点… ……………… 251
10.12.4 项目设计… ……………… 251