本书内容浅显易懂,简明扼要,从交互设计动画制作的基础知识出发,详细讲述了如何使用AxureRP10制作交互设计动画,大部分知识点配有实例操作,使得学习过程不再枯燥乏味。主要介绍了AxureRP10的主要功能,AxureRP10的下载、安装、汉化与启动,AxureRP10的工作界面等内容,帮助读者快速熟悉AxureRP10软件。文件的新建和存储、文件的打开与导入,以及自动备份、还原与恢复操作等内容。了解站点、管理页面、编辑页面、自适应视图、图表类型、创建流程图、组合对象、锁定对象和隐藏对象等内容。详细介绍了每种元件的使用方法和技巧,以及钢笔工具的使用方法,并对元件在实际原型设计中的应用技巧进行了讲解。介绍了AxureRP10中元件的属性,以及应用元件样式的方法和技巧,同时详细介绍了设置各种样式的方法。介绍了母版的创建和使用方法,以及第三方元件库的创建和使用方法。介绍了向元件中添加各种交互效果的方法和技巧,并详细介绍了各种参数的设置操作,同时还对交互样式的设置方法和技巧进行了讲解。介绍了AxureRP10中变量、表达式、中继器的基本操作,以及函数的相关知识。讲解了团队项目的创建、编辑、发布,以及团队项目的检入和检出等内容。介绍了AxureRP10中的几种生成器,以生成不同格式的原型设计供客户查看。介绍了运用AxureRP10绘制PC端网页原型设计实例。介绍了运用AxureRP10绘制移动端网页原型设计实例。
第1章 熟悉Axure RP 10
1.1 关于Axure RP 10 1
1.2 Axure RP 10的主要功能 3
1.2.1 绘制网站构架图 3
1.2.2 绘制示意图 3
1.2.3 绘制流程图 4
1.2.4 实现交互设计 4
1.2.5 输出网站原型 4
1.2.6 输出Word 格式的规格文件 4
1.3 软件的下载、安装、汉化与启动 4
1.3.1 下载并安装Axure RP 10 4
应用案例——安装Axure RP 10 5
1.3.2 汉化与启动Axure RP 10 7
1.4 Axure RP 10的工作界面 7
1.4.1 菜单栏 8
1.4.2 工具栏 10
1.4.3 面板 12
1.4.4 工作区 15
1.5 自定义工作界面 16
1.5.1 自定义工具栏 16
1.5.2 自定义工作面板 17
1.5.3 使用单键快捷键 18
1.6 使用Axure RP 10的帮助资源 19
1.7 查看视图 20
应用案例——查看视图 20
1.8 使用标尺 21
1.9 参考线 22
1.9.1 参考线的分类 22
1.9.2 编辑参考线 23
1.9.3 添加参考线 24
应用案例——添加参考线 24
1.9.4 设置参考线 25
1.10 显示栅格 25
1.10.1 显示栅格的方法 26
1.10.2 栅格设置 26
1.11 设置遮罩 27
1.12 对齐/分布对象 27
1.12.1 对齐对象 27
1.12.2 分布对象 28
1.13 答疑解惑 29
1.13.1 什么是产品原型 29
1.13.2 Axure 在产品原型中主要应用在哪些方面 29
1.14 总结扩展 30
1.14.1 本章小结 30
1.14.2 举一反三——卸载Axure RP 10 30
第2章 Axure RP 10的基本操作
2.1 新建文件 32
2.1.1 新建文件的方法 32
应用案例——新建iPhone 11 Pro 尺寸的原型文件 32
2.1.2 纸张尺寸与设置 33
2.1.3 新建团队项目文件 34
2.2 存储文件 35
2.2.1 保存文件 35
2.2.2 另存文件 35
2.2.3 存储格式 35
2.3 自动备份 36
2.3.1 启动自动备份 36
2.3.2 从备份中恢复 37
2.4 打开文件 37
2.4.1 打开文件的方法 37
2.4.2 打开团队项目 38
2.5 从RP文件导入 39
应用案例——导入RP 文件素材 39
2.6 对象的操作 40
2.6.1 选择对象 40
2.6.2 移动和缩放对象 40
2.6.3 旋转对象 41
2.6.4 复制对象 42
2.6.5 剪切和删除对象 43
2.7 还原与恢复 44
2.7.1 撤销 44
2.7.2 重做 44
2.8 答疑解惑 44
2.8.1 欢迎界面的链接入口 44
2.8.2 示例文件和最近编辑文件 45
2.9 总结扩展 45
2.9.1 本章小结 45
2.9.2 举一反三——通过复制的方法制作水平导航 46
第3章 页面的管理
3.1 了解站点 47
3.2 管理页面 47
3.2.1 添加和删除页面 47
应用案例——新建网站页面 49
3.2.2 重命名页面 50
3.2.3 移动页面 50
3.2.4 搜索页面 51
3.2.5 剪切、复制和粘贴页面 51
3.2.6 重复页面 52
3.3 编辑页面 52
3.3.1 使用页面编辑区 52
3.3.2 页面样式 53
3.3.3 页面注释 57
3.4 自适应视图 59
应用案例——设置自适应视图 61
3.5 图表类型 63
3.6 创建流程图 63
应用案例——创建流程图 64
3.7 组合对象 65
3.7.1 组合对象的方法 65
3.7.2 取消组合 65
3.8 锁定对象 66
3.9 隐藏对象 67
3.10 答疑解惑 67
3.10.1 保留页面文本的旧版本 67
3.10.2 如何处理原型中的文字在不同浏览器上效果不一样的情况 68
3.11 总结扩展 69
3.11.1 本章小结 69
3.11.2 举一反三——使用元件制作一个标签面板 69
第4章 使用元件
4.1 “元件库”面板 71
4.2 基本元件 72
4.2.1 常用元件 72
应用案例——制作商品购买页 80
4.2.2 互动元件 82
应用案例——使用动态面板隐藏对象 87
应用案例——为中继器数据集添加行和列 91
应用案例——使用中继器制作产品页面 94
4.2.3 表单元件 96
应用案例——制作淘宝会员登录页 101
4.2.4 菜单和表格 102
应用案例——美化树状菜单的图标 105
4.2.5 标记元件 108
4.3 Flow(流程图)元件 110
4.3.1 矩形和矩形组 111
应用案例——制作手机产业流程图 111
4.3.2 圆角矩形和圆角矩形组 113
4.3.3 斜角矩形和菱形 113
4.3.4 文件和文件组 114
4.3.5 括号 114
4.3.6 半圆 114
4.3.7 三角形 114
4.3.8 梯形 115
4.3.9 椭圆 115
4.3.10 六边形 115
4.3.11 平行四边形 115
4.3.12 角色 116
4.3.13 数据库 116
4.3.14 快照 116
4.3.15 图片 116
4.3.16 新增流程图元件 117
4.4 Icons(图标)元件 117
4.5 Sample UI Patterns 118
应用案例——制作幻灯片效果 118
4.6 Sample Form Patterns 120
4.7 使用“钢笔工具” 120
应用案例——使用“钢笔工具”绘制图形 122
4.8 答疑解惑 124
4.8.1 如何制作树状菜单元件的图标 124
4.8.2 尽量用一个元件完成功能 124
4.9 总结扩展 125
4.9.1 本章小结 125
4.9.2 举一反三——制作一个手机展示原型 125
第5章 元件的属性和样式
5.1 转换元件 126
5.1.1 转换为形状 126
5.1.2 转换为图片 127
5.2 元件的属性 127
5.2.1 元件说明 128
5.2.2 编辑元件 128
5.2.3 元件的运算 130
应用案例——制作iOS系统功能图标 131
5.2.4 元件提示 132
5.3 使用“样式”面板 132
5.3.1 元件命名 133
5.3.2 显示/隐藏元件 133
5.3.3 对齐与分布 133
5.3.4 位置和尺寸 134
5.3.5 圆角 134
5.3.6 适应文本宽度/适应文本高度 135
5.3.7 不透明度 135
5.3.8 排版 136
5.3.9 填充 139
5.3.10 边框 142
5.3.11 阴影 143
5.3.12 边距 144
应用案例——为商品列表添加样式 145
5.3.13 数据集 146
5.4 创建和管理样式 148
5.4.1 创建元件样式 148
应用案例——创建并应用元件样式 149
5.4.2 样式的编辑与修改 150
5.5 格式刷 151
应用案例——使用格式刷为表格添加样式 152
5.6 “大纲”面板 152
5.7 答疑解惑 153
5.7.1 制作页面前的准备工作 153
5.7.2 使用字体图标而不是图片 153
5.8 总结扩展 154
5.8.1 本章小结 154
5.8.2 举一反三——制作热门车型列表页 154
第6章 母版与第三方元件库
6.1 母版的概念 156
6.1.1 母版的应用 156
6.1.2 使用母版的好处 157
6.2 “母版”面板 157
6.2.1 添加母版 157
6.2.2 添加文件夹 158
6.2.3 查找母版 159
6.3 创建与编辑母版 159
6.3.1 创建母版 159
应用案例——制作iOS 系统母版 160
6.3.2 创建子母版 161
应用案例——新建iOS 系统布局母版 161
6.3.3 删除母版 163
6.4 转换为母版 163
6.5 母版的使用情况 163
6.5.1 拖放行为 164
6.5.2 添加到页面 167
6.5.3 从页面移除 168
6.5.4 使用报告 169
6.6 使用第三方元件库 169
6.6.1 下载元件库 169
6.6.2 载入元件库 170
6.6.3 移除元件库 170
6.7 创建元件库 171
6.7.1 新建元件库 171
应用案例——创建图标元件库 172
6.7.2 元件库的图标样式 173
6.7.3 编辑元件库 174
6.7.4 导入图片文件夹 175
6.8 答疑解惑 175
6.8.1 不要复制对象,而是转换为母版 175
6.8.2 如何将较大的组合转换为母版 176
6.9 总结扩展 176
6.9.1 本章小结 176
6.9.2 举一反三——创建图标组元件库 176
第7章 简单交互设计
7.1 了解“交互”面板 178
7.2 页面交互基础 179
7.2.1 页面交互事件 179
7.2.2 打开链接 180
应用案例——打开页面链接 182
7.2.3 关闭窗口 183
7.2.4 在框架内打开链接 184
7.2.5 滚动到元件(锚链接 184
7.3 元件交互基础 185
7.3.1 元件交互事件 185
7.3.2 显示/隐藏 186
应用案例——元件的显示/隐藏 188
7.3.3 设置动态面板状态 189
应用案例——使用动态面板制作轮播图 190
7.3.4 设置文本 192
7.3.5 设置图片 193
应用案例——制作按钮交互状态 193
7.3.6 设置选中 194
7.3.7 设置选中下拉列表选项 194
7.3.8 设置错误状态 194
应用案例——制作用户名输入错误提示 194
7.3.9 启用/禁用 196
7.3.10 移动 197
应用案例——设计制作切换案例 197
7.3.11 旋转 198
应用案例——制作抽奖幸运转盘 199
7.3.12 设置尺寸 200
7.3.13 置顶/置底 200
7.3.14 设置不透明度 200
7.3.15 获取焦点 201
设置交互样式效果 202
应用案例——制作动态按钮 202
7.5 答疑解惑 204
7.5.1 如何通过“动态面板”元件实现焦点图片效果 205
7.5.2 使用“设置尺寸”动作完成进度条的制作 205
7.6 总结扩展 206
7.6.1 本章小结 206
7.6.2 举一反三——设计制作按钮交互样式 206
第8章 高级交互设计
8.1 变量 208
8.1.1 全局变量 208
应用案例——使用全局变量 209
8.1.2 局部变量 211
8.1.3 添加条件 213
应用案例——设计制作用户登录页面 216
8.2 使用表达式 219
8.2.1 运算符的类型 219
8.2.2 表达式的格式 219
应用案例——制作滑动解锁页面 220
应用案例——为滑动解锁设置情形 221
应用案例——查看滑动解锁的效果 222
8.3 中继器的组成 224
8.3.1 项目交互 224
8.3.2 中继器元件动作 224
8.4 中继器动作 225
8.4.1 设置分页与数量 225
应用案例——使用中继器添加分页 226
8.4.2 添加和移除排序 227
应用案例——使用中继器设置排序 228
8.4.3 添加和移除筛选 229
8.4.4 添加和删除项目 229
应用案例——使用中继器实现自增 229
8.4.5 项目列表操作 231
应用案例——使用中继器显示页码 231
8.5 其他动作 234
8.6 函数 235
8.6.1 了解函数 235
应用案例——使用时间函数 235
8.6.2 中继器/数据集函数 237
8.6.3 元件函数 237
应用案例——设计制作商品详情页 238
8.6.4 页面函数 240
8.6.5 窗口函数 240
8.6.6 鼠标指针函数 240
应用案例——设计制作产品局部放大效果 241
8.6.7 数字函数 244
8.6.8 字符串函数 244
8.6.9 数学函数 245
应用案例——设计制作计算器效果 246
8.6.10 日期函数 247
应用案例——使用日期函数 249
8.7 答疑解惑 251
8.7.1 尽量使用简洁的交互效果 251
8.7.2 什么情况下会使用全局变量 252
8.8 总结扩展 252
8.8.1 本章小结 252
8.8.2 举一反三——设计制作商品购买页面 252
第9章 团队合作
9.1 使用团队项目 254
9.1.1 创建团队项目 254
9.1.2 打开团队项目 256
9.1.3 加入团队项目 257
9.1.4 编辑团队项目 259
9.1.5“ 团队”菜单 261
9.2 Axure Cloud 263
9.2.1 创建Axure Cloud 账号 263
9.2.2 发布到Axure Cloud 264
9.3 答疑解惑 267
9.3.1 团队协作和使用版本管理工具的作用 267
9.3.2 Axure RP 10 共享项目的两种页面状态 267
9.4 总结扩展 267
9.4.1 本章小结 267
9.4.2 举一反三——完成团队项目的检出与检入 267
第10章 发布于输出
10.1 发布与输出 269
10.2 使用生成器 270
10.2.1 HTML 生成器 270
10.2.2 Word 生成器 272
10.2.3 更多生成器 274
10.3 答疑解惑 276
10.3.1 制作的App 原型如何在手机上演示 276
10.3.2 如何将原型导出为图片 277
10.4 总结扩展 277
10.4.1 本章小结 277
10.4.2 举一反三——发布生成一个HTML文件 278
第11章 设计制作PC端网页原型
11.1 设计制作QQ邮箱加载页面 279
11.1.1 案例分析 279
11.1.2 制作步骤 280
11.2 设计制作微博用户评论页面 284
11.2.1 案例分析 285
11.2.2 制作步骤 285
11.3 设计制作商品分类页面 288
11.3.1 案例分析 288
11.3.2 制作步骤 289
11.4 设计制作课程购买页面 291
11.4.1 案例分析 291
11.4.2 制作步骤 292
11.5 设计制作课程选择页面 294
11.5.1 案例分析 294
11.5.2 制作步骤 294
11.6 设计制作重置密码页面 297
11.6.1 案例分析 297
11.6.2 制作步骤 298
第12章 设计制作移动端网页原型
12.1 设计制作App启动页面原型 303
12.1.1 案例分析 304
12.1.2 制作步骤 304
12.2 设计制作App会员系统页面原型 307
12.2.1 案例分析 307
12.2.2 制作步骤 308
12.3 设计制作App首页原型 310
12.3.1 案例分析 310
12.3.2 制作步骤 310
12.4 设计制作App设计师页面原型 312
12.4.1 案例分析 313
12.4.2 制作步骤 313
12.5 设计制作App页面导航交互 314
12.5.1 案例分析 315
12.5.2 制作步骤 315
12.6 设计制作App注册/登录页面交互 319
12.6.1 案例分析 320
12.6.2 制作步骤 321
12.7 设计制作App主页面交互 322
12.7.1 案例分析 322
12.7.2 制作步骤 323
附录A Axure RP 10常用快捷键 327
附录B Axure RP 10与Photoshop 328
附录C Axure RP 10与HyperSnap 331