Axure RP 9实用教程：原型+高保真+交互+设计（全彩）

本书通过大量简单易懂的场景案例，采用以案例带知识点的形式，全面介绍了Axure RP9.0的使用方法和设计技巧。本书免费附赠案例源文件，方便大家参考练习。通过阅读本书，读者不仅可以全面掌握Axure RP的各项功能，而且还可以灵活地绘制出各类精美的原型图，快速成为原型设计高手。

本书的前三大章节—绘制线框图、掌握基础交互、成为交互高手，详细的讲解了Axure RP9的基础知识，对于一些高级复杂的交互运用，通过单独的节点进行专项讲解。后两章—元件案例与综合案例部分不仅带领读者完成了数字产品中常见的交互案例设，同时还原了简书App和微信App的完整交互。本书的末尾还为读者们总结了一套原型设计的规范，方便读者遵循规范进行设计。

本书适合Axure RP原型设计的新手和进阶读者阅读，同时也适合院校的同学和老师参考阅读。

祁兴华，十年互联网从业经验，曾就职于中国电信等上市公司担任高级产品经理，擅长交互设计及原型制作，能够熟练运用Axure做出各种仿真交互。同时也是简书互联网优秀作者，人人都是产品经理专栏作家，Axure中文网推荐作者。多篇原型设计类文章被各大平台官方运营转载。

本书使用Axure RP 9版本软件，从0开始系统教学，帮助小白轻松掌握Axure原型设计技术

全面详细讲解了Axure RP 9的各个模块的知识点

全书大量使用工作中的真实案例为引，帮助读者在实战中学习，在实战中提高

为什么要写本书

作为Axure RP的拥戴者与资深用户，有必要帮助Axure的初学者或者希望进一步深入学习Axure的用户做点什么。为了帮助大家能够系统性的学习Axure RP9，经过大半年的试用研究，总结编写了这份学习教程。本书有浅入深地讲解了Axure RP9的基础功能，讲解过程中结合具体的案例帮助大家加深对元件交互功能的理解。本书的最后两个章节，都是满满的干货案例，旨在通过具体的元件案例和页面制作案例，来帮助大家找到Axure R9的交互使用场景，同时也是检查并巩固理论学习的过程。理论与实践的完美结合，才能够使得我们在进行原型设计时游刃有余，从容淡定。

本书的产生过程

美国时间2018年9月5日，Axure官方博客首次对外公布了Axure RP9 Betal版的下载地址，我在第一时间体验了这一重大版本。在使用体验的过程中，每使用一个功能都会记录下来，记录的内容既有知识的分析归纳，经验的总结分享，还有一些改进建议。改进建议的部分通过官方渠道进行了反馈。体验的初期，Axure RP9的界面与交互构建器的改造对于我来说，还有些不适应，但随着对Axure RP9的深度使用，你会发现这种不适应只是出于本能的对新事务的一种抗拒，对旧事物的一种怀念而造成的。很快，我已经习惯并喜欢上了Axure RP9简洁的界面、更符合心智流程的交互构造器以及更快的交互渲染引擎。Axure RP9的普及与推广是一种必然的趋势，慢慢的会逐渐成为最主流的版本。

原本只是出于兴趣编写一些使用知识与经验技巧，分享到网络平台。但由于一次偶然的机会，本书的策划编辑安麒在简书平台发现了我编写的关于Axure RP9教程的文集，便联系到我，希望出版一本关于Axure RP9教程的书籍。在后来的合作过程中，安麒对我提供了很大的帮助，本书能够顺利出版与他们的耐心指导与辛苦付出是分不开的。在此，我想对安麒由衷的表示感谢！也感谢家人在背后的默默支持，有了他们的支持，才有更多精力投入到写作中。

什么是产品原型

要了解什么是原型，我们不妨从了解线框图、原型和视觉稿的区别开始。初学设计的读者可能会混淆这三者，搞不清楚他们之间的区别，因此在正式的学习教程之前，我们需要了解清楚这三个概念，对于后续学习教程的内容是十分有帮助的。

线框图又称低保真设计图，通常用黑白灰线条来表达界面，并在旁边标注说明一些解释性的文字。通常为产品的大纲，页面的信息结构以及交互行为描述。使用Axure RP9可以方便快捷的绘制线框图，系统提供了丰富的元件以便我们绘制线框图，当然我们也可以利用纸和笔绘制线框图。线框图的最大的优点在于“快捷高效”，绘制时不要关注一些细节的问题，完成整体结构的绘制，表达出设计思想和产品意图即可。视觉层面的元素，在这个阶段不需要过多关注，尽量简化，黑白灰是线框图的经典配色，当然我们可以使用蓝色表示超链接。

原型的保真程序介于线框图和视觉稿之间，是最终产品的模型，原型能够表达出产品的交互逻辑。本书主要讲解如何使用Axure RP这款工具制作产品原型。原型对于互联网产品来说非常重要，对于产品设计来说至关重要，主要在于原型能够做到以下5点：

1. 快速、便捷、准确的传达产品需求；

2. 降低修改成本，做到快速更新和迭代；

3. 快速有效的验证一些假设条件和早期的想法；

4. 通过可视化的方法表达产品需求；

5. 提高团队沟通的效率与质量。

原型设计需要尽可能的与最终产品保持一致。完成原型后，我们先别着急进行研发，首先我们将原型发送给项目的主要干系人进行可用性测试，大家通过体验原型，发现产品设计中的问题并提出反馈意见。根据收集的问题或建议从而调整原型，最终的原型将指导后续的视觉设计、程序开发、功能测试等项目实施工作。在原型阶段发现问题的修改成本要远远低于开发阶段。

视觉设计稿是高保真原型的静态设计图。将视觉设计稿制作成可交互的原型就是高保真原型了。视觉设计稿一般通常由团队的平面设计师或UI设计师完成，视觉设计稿可以帮助团队从视觉审美的角度审视产品，提升产品的颜值。高颜值的视觉设计稿加上符合逻辑的交互动作制作而成的高保真原型，无论是给老板、投资人看或者用于产品评审收集建议都是最佳选择。

先学点专业名词

在学习原型设计之前，我们希望大家了解下面的专业名词，因此这将有助于读者更加深刻的理解本书将要讲解的知识与经验。

UI 全称User Interface，中文名“用户界面”。

UE 全称User Experience，中文名“用户体验”。

UX 全称User eXperience，中文名“用户体验”。

UI是用户界面的简称，一般指数字化产品的用户操作界面，包含PC网页、移动终端的应用程序、智能穿戴设备等。UI设计主要指界面的样式设计、美观程度，与交互设计不同的是，UI设计领域的范围主要为静态的视觉化的界面设计。交互设计则是从使用角度上，对界面的人机交互、操作逻辑上的可用性与易用性设计。

UE与UX从中文的角度来看定义则是相同的。用户体验是指用户使用产品或服务的过程中的个人主观感受。个人的主观感受包含行为、情感、成就等各个方面。用户体验就是这些感受的整体体验，用户界面只是其中的一部分。因此用户体验则是受多方面的因素影响，包含品牌度、个人使用经验以及用户的认知等。

可用性与易用性作为衡量用户体验的两个重要指标，它们的好坏将直接影响用户体验的结果。

可用性是交互式IT产品/系统的重要质量指标，指的是产品对用户来说有效、易学、高效、好记、少错和令人满意的程度，即用户能否用产品完成他的任务，效率如何，主观感受怎样，实际上是从用户角度所看到的产品质量，是产品竞争力的核心。

易用性是一种以使用者为中心的设计概念，易用性设计的重点在于让产品的设计能够符合使用者的习惯与需求。以互联网网站的设计为例，希望让使用者在浏览的过程中不会产生压力或感到挫折，并能让使用者在使用网站功能时，能用最少的努力发挥最大的效能。

为什么需要原型

当我们掌握了原型设计的一些技能后，可以快速将心中所想的方案与创意通过可视化的界面呈现出来。如果没有直观的可视化原型界面，我们将很难向别人阐述我们的完美方案与绝妙创意。正是因为有了原型，我们能够高效、准确的向别人展示我们的想法与创意，极大地提升了我们的沟通效率与沟通质量。

当我们真正开始原型设计时，我们会对我们的产品功能与流程理解的更为深刻，甚至是发现我们最初想法的不足之处以及一些细节问题。原型设计的过程，其实也是在检验我们的产品功能。原型设计过程中，能够确定产品的结构，进一步明确需求范围；通过原型设计，还可以梳理清楚产品功能之间、页面之间内在的逻辑关联，验证业务流程的合理性。

原型作为产品上线前的仿真模型，基本与上线后的产品在功能、交互上保持一致。我们可以通过查看产品原型，来检验产品的可用性与易用性，并发现一些产品细节设计上的不足之处。通过体验产品原型，可以收集用户的反馈建议，这些用户建议对于改进我们的产品设计、提升用户使用体验，提供了很大帮助。

哪些人会看原型

投资人或者老板通过原型能够看到产品上线后的样子，根据原型进行判断项目是否值得投资，一份优秀的原型能够清晰的描绘出产品的发展蓝图，能够促使投资人尽快作出投资决策，对项目更有信心。

项目经理根据确定的原型，可以清晰的知道需要哪些资源完成项目工作，参照原型界面项目经理可以完成工作分解、任务排期、工作量评估、项目验收等项目管理工作。

有了原型，产品经理据此确认产品需求及交互逻辑，编写需求文档时插入原型图，可以更清晰的说明功能需求。原型设计一旦得到产品经理的确认后，就成为了后续工作的指导准则。

有了原型后，UI设计师们的工作将会变得轻松一些，将精力专注于视觉层面的配色及阴影等立体效果，界面的布局和信息展示在原型中已经完成。有了这样的规范流程与专业分工，最终完成的产品设计质量将会更高。

一份专业的原型能够让研发工程师清晰的了解产品需求，明确接下来的主要工作。研发人员参照原型，进行技术框架选型，设计数据库与接口、完成接口参数的定、制定数据传输规则等相关内容。

有了产品原型，测试工程师可以明确产品的功能需求并据此编写测试用例。测试工程师更关注产品功能的细节问题以及特殊场景下的使用需求，常常会在边界测试中发现原型设计的一些问题，促使我们完善原型。

谁需要学习原型

交互设计师是指参与完成对产品与它的使用者之间的互动机制进行分析、预测、定义、规划、描述和探索的过程的设计师，即定义人造物的行为方式的工作者。交互指的是产品与它的使用者之间的互动过程，而交互设计师则是秉承以用户为中心的设计理念，以用户体验度为原则，对交互过程进行研究并开展设计的工作人员。交互设计师的工作紧紧围绕着人机交互的各种行为，原型是最能够直观反应交互行为的设计载体，因此，原型成为了交互设计师的主要产出物。

很多中小型的互联网公司都没有交互设计师岗位，因此交互方面的工作都由产品经理完成，比如交互行为的分析与研究，原型的制作等。各大招聘网站对产品经理的岗位要求也明确写明了需要熟练使用Axure设计产品原型。因此在很多中小企业，原型设计已经为产品经理的必备技能。

熟练使用Axure设计产品原型已经成为交互设计师和产品经理的一个必备基础工作能力，招聘网站中各大公司对这两个岗位的任职要求我们能够看出这一趋势。如果你正在从事或即将从事这两个岗位，那么学好Axure设计产品原型已经成为必须要做的一件事。

第1章　绘制线框图
1．1　Axure RP 9的安装与汉化 2
1．1．1　下载安装包与汉化包 2
1．1．2　安装Axure RP 9 3
1．1．3　Axure RP 9汉化 5
1．2　Axure RP 9的优化与改进 7
1．2．1　界面布局改版 7
1．2．2　元件功能优化 8
1．2．3　交互设置流程优化 9
1．2．4　其他改进 9
1．2．5　小结 9
1．3　初识Axure RP 9 10
1．3．1　操作界面 10
1．3．2　自定义工作界面 10
1．3．3　菜单栏 11
1．3．4　工具栏 12
1．3．5　页面与大纲面板 13
1．3．6　元件库与母版面板 14
1．3．7　样式/交互/注释面板 16
1．4　元件说明（一） 18
1．4．1　元件概述 18
1．4．2　形状元件 18
1．4．3　图片元件 22
1．4．4　水平线和垂直线 25
1．4．5　图像热区 26
1．5　元件说明（二） 27
1．5．1　动态面板 27
1．5．2　内部框架 29
1．5．3　中继器 30
1．6　元件说明（三） 34
1．6．1　文本框 34
1．6．2　文本域 35
1．6．3　下拉列表 35
1．6．4　列表框 36
1．6．5　复选框 36
1．6．6　单选按钮 37
1．6．7　树 38
1．6．8　表格 39
1．6．9　水平菜单和垂直菜单 39
1．6．10　标记 40
1．7　元件操作 41
1．7．1　基本操作 41
1．7．2　编辑元件样式 43
1．7．3　元件专有属性 43
1．7．4　元件“样式”面板说明 45
1．7．5　元件样式管理 46
1．8　页面样式说明 46
1．8．1　页面样式 46
1．8．2　页面样式管理 48
1．8．3　标尺/尺寸/网格 48
1．8．4　辅助线 49
1．8．5　元件对齐设置 50
1．9　生成原型 50
1．9．1　概述 50
1．9．2　原型预览 50
1．9．3　生成与查看HTML文件 51
1．9．4　生成Word说明书 54
1．9．5　生成CSV报告 58
1．9．6　打印设置 59
第2章　掌握基础交互
2．1　基础交互 62
2．1．1　交互概述 62
2．1．2　交互事件 62
2．1．3　交互情形 65
2．1．4　交互动作 66
2．1．5　案例说明 68
2．2　基础交互案例 70
2．1．1　导航菜单 70
2．2．2　显示/隐藏对话框 72
2．1．3　幻灯片轮播 73
2．3　母版 74
2．3．1　母版基础知识 74
2．3．2　重写母版数据 76
2．3．3　母版引发事件 76
2．3．4　引发事件使用案例 77
2．4　动态面板 78
2．4．1　什么是动态面板 78
2．4．2　添加动态面板 79
2．4．3　动态面板事件 79
2．4．4　案例说明――发现魅力 80
2．5　流程图 83
2．5．1　流程图概述 83
2．5．2　绘制流程图 84
2．5．3　流程图标记 85
2．5．4　快照 85
2．5．5　生成流程图 86
2．6　调色板 86
2．6．1　颜色三要素 86
2．6．2　单色 87
2．6．3　线性渐变 88
2．6．4　径向渐变 89
2．6．5　颜色属性 89
2．6．6　其他说明 90
2．6．7　案例讲解 91
2．7　钢笔工具 93
2．7．1　钢笔工具概述 93
2．7．2　绘制图形 93
2．7．3　管理节点 94
2．7．4　变换形状 94
2．7．5　形状与图片的转换 95
2．7．6　案例：emoji表情 96
第3章　成为交互高手
3．1　中继器 98
3．1．1　中继器概述 98
3．1．2　中继器排序 98
3．1．3　数据筛选 99
3．1．4　分页 100
3．1．5　添加/移除中继器的项 100
3．2　中继器案例 103
3．2．1　案例：商品列表 103
3．2．2　案例2：用户信息 108
3．3　变量说明 112
3．3．1　变量概述 112
3．3．2　局部变量 113
3．3．3　全局变量 114
3．4　变量案例 115
3．4．1　案例：table标签切换 115
3．4．2　案例：登录欢迎页 117
3．4．3　小结 118
3．5　函数说明 118
3．5．1　概述 118
3．5．2　函数分类 118
3．5．3　函数使用说明 118
3．6　函数案例 123
3．6．1　案例：知乎详情导航 123
3．6．2　案例：简易计算器 125
3．6．3　案例：滑杆 127
3．6．4　案例：文字计数 130
3．7　逻辑条件 131
3．7．1　逻辑条件概述 131
3．7．2　如果或否则 131
3．7．3　条件关系――全部和
任何 132
3．7．4　运算符和表达式 133
3．7．5　多条件情形 134
3．7．6　条件逻辑案例 135
3．8　自定义元件 138
3．8．1　自定义元件概述 138
3．8．2　新建自定义元件 139
3．8．3　添加自定义元件 139
3．8．4　添加注释和交互 139
3．8．5　元件库按文件夹分类 140
3．8．6　自定义样式及属性 140
3．9　自适应视图 141
3．9．1　为什么需要自适应视图 141
3．9．2　创建自适应视图 141
3．9．3　编辑自适应视图 142
3．9．4　预览和生成自适应视图 144
3．9．5　自适应案例：文章列表 144
3．10　Axure Share 145
3．10．1　什么是Axure Share? 145
3．10．2　注册Axure Share账号 146
3．10．3　项目上传与更新 146
3．10．4　项目管理 148
3．10．5　讨论 149
3．10．6　插件 150
3．10．7　漂亮网址 151
3．10．8　重定向 152
第4章元件案例章
4．1　返回顶部 154
4．1．1　返回顶部概述 154
4．1．2　交互分析 154
4．1．3　素材准备 154
4．1．4　交互设置 155
4．2　验证码 158
4．2．1　图文验证码 158
4．2．2　滑块验证码 159
4．3　倒计时 165
4．3．1　概述 165
4．3．2　交互分析 166
4．3．3　素材准备 166
4．3．4　交互设置 166
4．4　五星好评 171
4．4．1　概述 171
4．1．2　交互分析 171
4．1．3　素材准备 171
4．4．4　交互设置 172
4．5　轮播图 177
4．5．1　概述 177
4．5．2　交互分析 177
4．5．3　素材准备 177
4．5．4　交互设置 178
4．6　评论字数限制与清空 181
4．6．1　评论概述 181
4．6．2　交互分析 181
4．6．3　素材准备 181
4．6．4　交互设置 182
4．7　百度搜索提示 183
4．7．1　概述 183
4．7．2　交互分析 184
4．7．3　元件素材准备 184
4．7．4　交互设置 185
第5章 综合案例
5．1　弹幕 188
5．1．1　弹幕概述 188
5．1．2　交互分析 188
5．1．3　元件素材准备 189
5．1．4　交互设置 190
5．2　下拉刷新 191
5．2．1　概述 191
5．2．2　以简书、知乎为代表的下
拉刷新 192
5．2．3　以微博、头条为代表的下拉
刷新 195
5．3　注册与登录 198
5．3．1　概述 198
5．3．2　注册 199
5．3．3　登录 205
5．4　购物车 209
5．4．1　购物车概述 209
5．4．2　准备元件素材 209
5．4．3　交互分析 212
5．4．4　交互设置 212
5．5　QQ音乐 229
5．5．1　概述 229
5．5．2　线框图准备 230
5．5．3　交互分析 230
5．5．4　交互设置 231
5．6　微信 235
5．6．1　概述 235
5．6．2　微信架构 235
5．6．3　交互设计 237
5．7　简书 262
5．7．1　概述 262
5．7．2　简书是什么 262
5．7．3　页面结构 262
5．7．4　交互设计 263
附录A：原型设计规范 280
附录B：Axure RP 9 快捷键 285