移动APP产品原型设计

本书精准定位于用Axure进行移动APP的原型制作，从翔实的基本操作、实用的设计原则和精炼的应用实战等方面展开图书的架构和行文逻辑，知识讲解与实践案例紧密融合，相辅相成，帮助读者夯实知识点，透彻理解原型设计理念。6个完整移动APP项目案例的清晰解读和实践操作，帮助读者把前面所学知识做到融会贯通，大幅缩短理论到实践的距离。

刘刚，研究生学历，不错项目管理师、中级项目监理师，曾就职于中国擎天软件公司、北京神州软件技术有限公司，软件项目研发、设计和管理经验丰富；负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据项目、中施企协项目等的设计开发和项目管理工作；同时在教育教学方面有丰富的授课经验，作为极客学院、北风网的兼职培训讲师，教授Axure、用户体验、软件重构、项目经理等等方面的课程；出版畅销书《原型设计大师：Axure RP网站与APP设计从入门到精通》和《Axure原型设计简明图解案例教程》，入驻各大校园，深受学生的喜爱。

第1章走进AxureRP世界：了解原型设计1
1.1什么是AxureRP2
1.1.1什么是原型设计2
1.1.2常用原型设计工具2
1.1.3AxureRP能干什么3
1.2AxureRP软件安装、汉化与注册4
1.3认识Axure的软件界面6
1.3.1Axure工具栏7
1.3.2利用Axure站点地图规划栏目结构16
1.3.3利用部件制作原型积木17
1.3.4制作部件库46
1.3.5将Axure页面管理起来47
1.4AxureRP8.0与AxureRP7.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.1Axure触发事件80
3.1.1部件触发事件80
3.1.2页面触发事件81
3.2Axure交互条件设置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.6100%宽度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.6Axure母版一次制作，终身受益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.6tab页签导航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烂笔头笔记——新闻类APP170
第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烂笔头笔记——电商类APP196
第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烂笔头笔记——金融类APP220
第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烂笔头笔记——生鲜类APP237
第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烂笔头笔记——教育类APP257
第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烂笔头笔记——娱乐段子类APP277
注：以下附录内容读者可扫描封底二维码下载获得。
附录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

在移动互联网越来越火爆的今天，用户更倾向于使用手机中安装的移动APP软件所提供的服务，从而摆脱PC电脑端的束缚。现在移动APP软件涉及各行各业，在市场上已经占有一席之地。移动APP软件从开始的需求到最终的产品，都要经历移动APP软件原型设计，Axure是一款专业的原型设计工具，是交互设计师、产品经理非常青睐的一款软件，它可以快速地挖掘用户的真实需求，通过产品原型设计，绘制软件原型，与用户和团队成员进行沟通，获取用户的真实需求，提高与团队成员的沟通效率。目前图书市场上利用Axure绘制移动APP软件原型方面的图书不少，但是很少有能做到真正从实际应用出发，通过各种典型模块和项目案例来指导读者提高移动APP软件原型的设计能力。为了方便广大读者学习，作者结合自己多年的产品原型设计心得和培训经验编写了本书。本书的特点1. 图文结合，逐步讲解为便于读者理解本书内容，提高学习效率，作者通过图文结合，逐步讲解，演示操作，便于用户理解，不至于枯燥乏味。2. 由浅入深、理论与实战相结合本书主要分为基础篇和实战篇，基础篇首先介绍工具的使用，从简单操作过渡到复杂操作、高级交互效果，最后作者结合自己的经验讲解移动APP的设计原则。实战篇通过6个不同类型的主流APP软件，从实践角度出发，细细剖析设计思维和经验。3. 实战驱动，应用性强本书每一章节都会有一个实战案例，通过在制作案例过程中的操作方法，加深对Axure的使用及了解Axure在原型设计过程中的思路。4. 项目案例典型，实战性强，有较高的应用价值本书提供了6个移动APP项目实战案例。都是当今比较主流的移动APP软件，是软件原型设计过程中经常会使用的软件类型，具有很高的应用价值和参考性。研究这些案例的原型制作过程，可以从不同类型的原型中了解不同的设计思路。5．电子材料齐全本书提供各个章节实战所用到的电子材料（扫描封底二维码即可下载获得），包括实战的图片、实战生成的HTML文件以及实战的RP文件，在学习过程中可以直接使用这些电子材料进行原型设计。6. 提供完善的技术支持和售后服务本书提供了专门的技术支持邮箱：yuan_kevin_525@126.com。读者在阅读本书的过程中有任何疑问都可以通过该邮箱获得帮助。 移动APP产品原型设计：玩转Axure RP本书的内容安排本书分为两篇，共10章，主要章节规划如下。第一篇（第1章~第4章）Axure RP 原型设计工具的基础讲述了Axure RP原型设计的软件安装、软件介绍、交互设计、设计原则等基础知识。第二篇（第5章~第10章）移动APP案例实战通过6类行业中具有典型代表性的案例讲述了移动APP软件原型设计的案例实战，通过介绍移动APP软件原型的实际操作，既复习了前面学习的知识，也了解了移动APP原型设计的流程和技巧。关于版本的想法首先提出策划本书时的总原则：突出设计理念、积累设计经验，淡化工具版本。在当前的移动产品原型设计应用中，Axure RP 7.0与8.0两个版本平分秋色，除了界面有一些不同，大部分的功能后者是作为前者的延续和补充，差异不大；但是我们也收到了不少读者的反馈，Axure RP 8.0版本中的内容会出现兼容问题，为了兼顾大部分读者需求，本书讲解的大部分案例以Axure RP 7.0版本为主，同时在本书的开篇章节中对Axure RP 7.0与8.0两个版本的差异做了非常翔实地讲解，让读者可以做到在两个版本之间自由切换。