移动APP产品原型设计：玩转Axure RP

第1章 走进Axure RP世界：了解原型设计 1
1.1 什么是 Axure RP 2
1.1.1 什么是原型设计 2
1.1.2 常用原型设计工具 2
1.1.3 Axure RP能干什么 3
1.2 Axure RP软件安装、汉化与注册 4
1.3 认识Axure的软件界面 6
1.3.1 Axure工具栏 7
1.3.2 利用Axure站点地图规划栏目结构 16
1.3.3 利用部件制作原型积木 17
1.3.4 制作部件库 46
1.3.5 将Axure页面管理起来 47
1.4 Axure RP 8.0与Axure RP 7.0的区别 48
1.4.1 软件界面整体区别 48
1.4.2 菜单栏区域区别 50
1.4.3 工具栏区域区别 52
1.4.4 站点地图区域区别 52
1.4.5 部件区域区别 53
1.4.6 交互样式区域区别 55
1.4.7 部件管理区域区别 55
1.4.8 用例编辑、发布设置、发布页面区别 57
第2章 实现原型演示的功能逻辑：变量和函数 60
2.1 不可缺少的全局变量和局部变量 61
2.2 丰富的部件和页面 67
2.2.1 部件函数 67
2.2.2 页面函数 70
2.3 灵活的窗口和鼠标 71
2.3.1 窗口函数 71
2.3.2 鼠标函数 74
2.4 多变的数字和字符串 75
2.4.1 数字函数 75
2.4.2 字符串函数 76
2.5 种类繁多的数学和日期 77
2.5.1 数学函数 77
2.5.2 日期函数 77
第3章 Axure交互 79
3.1 Axure触发事件 80
3.1.1 部件触发事件 80
3.1.2 页面触发事件 81
3.2 Axure交互条件设置 83
3.3 展示丰富的交互动作 88
3.3.1 链接交互动作 88
3.3.2 部件交互动作 96
3.4 神奇的动态面板 97
3.4.1 认识动态面板 97
3.4.2 动态面板的显示与隐藏效果 101
3.4.3 调整动态面板的大小以适合内容 101
3.4.4 动态面板的滚动栏设置 101
3.4.5 动态面板固定到浏览器 101
3.4.6 100%宽度 102
3.4.7 从动态面板脱离 102
3.4.8 转换为母版 102
3.4.9 转换为动态面板 102
3.5 类数据库操作：中继器 103
3.5.1 认识中继器 103
3.5.2 中继器数据绑定操作 104
3.5.3 中继器新增数据弹出框设计 108
3.5.4 中继器新增数据操作 110
3.5.5 中继器删除数据操作 117
3.5.6 中继器修改数据操作 121
3.5.7 中继器搜索及排序操作 125
3.5.8 中继器分页功能 128
3.6 Axure母版一次制作，终身受益 132
3.6.1 创建母版的两种方式 132
3.6.2 母版的三种拖放行为 135
第4章 移动APP设计原则 138
4.1 设计原则 139
4.1.1 原则1：抓住用户的心，满足用户最真实的需求 139
4.1.2 原则2：用合适的方式展示信息 139
4.1.3 原则3：考虑移动互联网设备的特殊性 139
4.1.4 原则4：不要让用户寻找 140
4.1.5 原则5：考虑用户的使用场景 140
4.1.6 原则6：用户简单易学 140
4.1.7 原则7：如何“抄袭”竞品 141
4.2 导航布局设计 141
4.2.1 标签导航 141
4.2.2 顶部导航 141
4.2.3 抽屉式导航 141
4.2.4 九宫格导航 141
4.2.5 列表式导航 142
4.2.6 tab页签导航 142
4.2.7 混合组合导航 142
4.3 移动APP建模 143
4.3.1 模拟情景建模 143
4.3.2 真实情景建模 144
第5章 新闻类APP：腾讯新闻APP低保真原型设计 148
5.1 新闻类APP原型设计要素 149
5.2 设计内容与思路 150
5.2.1 腾讯新闻版本 150
5.2.2 设计内容 150
5.2.3 设计思路 151
5.3 标签导航母版制作 151
5.3.1 标签导航母版布局设计 151
5.3.2 标签导航选中效果设计 152
5.3.3 标签导航母版引入页面 154
5.4 “要闻”页面内容布局设计 157
5.4.1 顶部状态栏设计 157
5.4.2 “要闻”页面设计 159
5.5 “科技”页面内容布局设计 161
5.6 “新闻”模块页签切换效果设计 162
5.7 “读书”模块页面布局与交互设计 163
5.7.1 “精选书城”页面设计 164
5.7.2 “我的书架”页面设计 168
5.8 烂笔头笔记——新闻类APP 170
第6章 电商类APP：手机淘宝APP高保真原型设计 171
6.1 电商类APP原型设计要素 172
6.2 设计内容与思路 174
6.2.1 手机淘宝APP版本 174
6.2.2 设计内容 174
6.2.3 设计思路 174
6.3 底部标签导航设计 175
6.3.1 标签导航布局设计 175
6.3.2 标签导航交互设计 178
6.4 “首页”模块布局与交互设计 181
6.4.1 “首页”页面内容布局设计 181
6.4.2 海报轮播效果交互设计 183
6.5 “微淘”模块布局与交互设计 184
6.5.1 “微淘”页面内容布局设计 184
6.5.2 页签切换效果交互设计 186
6.6 “社区”模块布局设计 189
6.7 “购物车”模块布局与交互设计 190
6.7.1 “购物车”页面内容布局设计 190
6.7.2 商品列表上下滑动效果 192
6.8 “我的淘宝”模块布局设计 194
6.9 烂笔头笔记——电商类APP 196
第7章 金融类APP：支付宝APP低保真原型设计 197
7.1 金融类APP原型设计要素 198
7.2 设计内容与思路 199
7.2.1 支付宝APP版本 199
7.2.2 设计内容 199
7.2.3 设计思路 199
7.3 “支付宝”模块交互设计 200
7.3.1 九宫格导航设计 200
7.3.2 海报轮播效果设计 204
7.4 余额宝界面交互设计 205
7.4.1 界面布局设计 205
7.4.2 界面上下滑动设计 208
7.5 中继器显示余额宝转入记录设计 211
7.6 余额宝转入界面设计 214
7.7 烂笔头笔记——金融类APP 220
第8章 生鲜类APP：爱鲜蜂APP高保真原型设计 221
8.1 生鲜类APP原型设计要素 222
8.2 设计内容与思路 223
8.2.1 爱鲜蜂APP版本 223
8.2.2 设计内容 223
8.2.3 设计思路 223
8.3 “首页”模块交互设计 226
8.3.1 “首页”界面布局设计 226
8.3.2 海报轮播效果制作 227
8.4 “鲜奶即递”详情设计 228
8.5 “闪送超市”模块交互设计 233
8.5.1 界面布局设计 234
8.5.2 手风琴效果制作 235
8.6 烂笔头笔记——生鲜类APP 237
第9章 教育类APP：猿题库APP高保真原型设计 238
9.1 教育类APP原型设计要素 239
9.2 设计内容与思路 240
9.2.1 猿题库APP版本 241
9.2.2 设计内容 241
9.2.3 设计思路 241
9.3 “练习”模块交互设计 241
9.3.1 标签导航母版设计 241
9.3.2 “练习”界面布局设计 246
9.3.3 海报轮播效果制作 247
9.4 “语文”练习详情设计 248
9.5 “试卷”模块交互设计 251
9.5.1 “试卷”内容设计 252
9.5.2 界面上下滑动效果制作 253
9.6 “发现”模块布局设计 256
9.7 “我”模块布局设计 257
9.8 烂笔头笔记——教育类APP 257
第10章 娱乐段子类APP：糗事百科APP高保真原型设计 259
10.1 娱乐段子类APP原型设计要素 260
10.2 设计内容与思路 261
10.2.1 糗事百科APP版本 261
10.2.2 设计内容 261
10.2.3 设计思路 261
10.3 底部标签导航设计 262
10.4 “糗事”模块页面上下滑动效果设计 266
10.5 “糗友圈”模块页签切换效果设计 269
10.6 “发现、小纸条”模块交互设计 273
10.7 “我、登录”模块交互设计 274
10.8 烂笔头笔记——娱乐段子类APP 277
注：以下附录内容读者可扫描封底二维码下载获得。
附录A 实战：京东登录表单原型设计 279
附录A.1 新建工程与栏目页面 279
附录A.2 绘制用户名和密码输入框 280
附录A.3 登录方式设计 283
附录B 实战：简易计算器原型设计 286
附录C 实战：京东商城首页原型设计 291
附录C.1 首页布局设计 291
附录C.2 手风琴式菜单效果 294
附录C.3 导航菜单移入移出时效果 299
附录C.4 海报轮播效果 300
附录D 实战：智联招聘APP原型设计 304
附录D.1 智联招聘APP版本及设计内容 304
附录D.2 智联招聘标签导航设计 304
附录D.3 智联招聘的“职位”模块布局设计 306
附录D.4 招聘内容滑动效果 310