Axure RP8网站与App原型设计经典实例教程（超值版）

Axure RP8网站与App原型设计经典实例教程：超值版/朱传明编著.--北京：人民邮电出版社，2019.10

ISBN　978-7-115-50545-3

Ⅰ.①A…　Ⅱ.①朱…　Ⅲ.①网页制作工具—教材　Ⅳ.①TP393.092.2

中国版本图书馆CIP数据核字（2019）第084602号

◆编著　朱传明

责任编辑　张丹阳

责任印制　马振武

◆人民邮电出版社出版发行　北京市丰台区成寿寺路11号

邮编　100164　　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

大厂聚鑫印刷有限责任公司印刷

◆开本：787×1092　1/16

字数：560千字　　2019年10月第1版

印数：1－2500册　　2019年10月河北第1次印刷

内容提要

原型设计是互联网行业产品设计过程中不可缺少的环节，也是检验互联网产品经理能力的重要指标。本书通过丰富的实例展示了Windows系统下流行的快速原型设计工具Axure强大的原型设计能力。

本书分为12章。第1章讲解原型设计的基本知识。第2章介绍Axure的工作空间。第3章介绍原型设计的操作技巧。第4章讲解如何随时查看设计效果。第5章介绍的变量与函数是第6章“事件处理”的基础。第6章讲解的“事件处理”知识是Axure原型设计的精髓，配合第7章讲解的动画效果，可令原型更加生动。第8章介绍动态面板的使用方法。第9章介绍的中继器是一个有趣且有用的元件。第10章详细介绍如何设计自己的元件库。最后两章以实际案例为基础，针对不同的场景，全面介绍如何使用Axure工具，涵盖了Axure的大部分知识点，其中，第12章更是将多场景完整衔接，读者可以通过练习学会如何在实际项目中综合应用软件。

随书附赠教学资源，包括书中实例的源文件与操作演示视频，读者可结合视频进行学习，提高学习效率。

本书适合互联网和移动互联网产品经理，以及需求分析师、UI/UE设计师、交互设计师学习和使用。

前言

我在很早就接触了Axure，当时是Axure RP 6.5版本，我很欣喜能接触到这样的工具，于是便尝试做些实例，体验它的功能。随着版本不断升级，它的功能也越来越完善，输出原型时也更加快速和专业。凭借简单易学、快速设计和入门门槛低的优势与特性，Axure已经成为互联网产品经理必会使用的工具之一。

此前，作为开发人员、标准的程序员，我学习Axure有一定的优势，因为Axure涉及的变量、函数和事件等是开发人员最熟悉的概念，这有助于我进行更深入的学习。我对交互设计和UI/UE（用户界面/用户体验）方面的内容特别感兴趣，因此对原型界面的布局和交互便有着更深入的研究，原型也做得相对更专业一些。

很多人说Office工具可以用于原型设计，但是我发现它的功能还是有一定的局限性，只能做出一些简单的线框图和静态的内容，涉及页面交互的内容时基本无能为力，毕竟它不是一款专门为原型设计而“诞生”的工具。虽然其他类型的原型设计工具也有各自的特色，但Axure可以满足从Web页面设计到手机App原型设计的要求，并且支持元件库的设计，即实现了第三方元件扩展。

Axure只是一个设计工具，我们始终要牢记它是用来提高生产效率的，不需要刻意去追求一些原型设计技巧。如果某种效果确实不好实现，没有必要花费太多时间去研究到底如何实现，否则会偏离快速原型设计的本意，只需要在演示的时候适当解释一下，大家就能明白。因为这些效果对于开发人员来说，可能很容易实现，并且从严格意义上来讲，满足实际演示需要的原型才是最好的原型。

在学习的过程中，尤其是在向别人请教之前，建议先自己多思考、多实践。因为别人能给的往往是思路上的引导，最终还是要你自己去实现，同时你要学会如何简要地提出问题，这样才能让别人了解你的需求，并快速有效地帮助你。多想、多练，相信你一定能做得更好！

感谢人民邮电出版社编辑认真、细致和负责的工作，没有他们的指导和配合，我将无法如期完成本书的写作。同时感谢为此书抽出宝贵时间撰写推荐语的朋友，在此向你们致以真诚的感谢和敬意！

因个人经验不足以及能力有限，书中难免有不足之处，敬请予以谅解，并欢迎指正。

推荐语

也许有人说Axure只是产品经理必备的工具，但全方位的设计师还是有必要学习一下的。一名优秀的设计师不应仅仅注重视觉上的表现，还需要对产品原型制作有所了解，而这本书的作者不仅讲到了软件的使用，还非常用心地将软件操作与案例结合起来，让读者能更好地将软件运用到实际项目中，这对于希望轻松并系统地学习原型设计的人来说无疑是最有效的一种帮助。也希望读到此书的朋友能更深入地理解产品原型的重要性，设计出更优秀的作品。

在互联网时代背景下，越来越多的专业人士投身到互联网这个大行业当中。

无论你是产品经理还是设计师，这本书都能让你告别为了画原型满世界找教程的尴尬，它以当下流行的设计为案例，让原型无限接近实际场景。

如果你从未接触过Axure也没有关系，本书也能让你如鱼得水，从零开始，画出高水准的原型，为你的成长助力。

学习是有门槛的，再简单的知识也需要有人点拨；教学是有难度的，难在要让受众既能听懂又能体会到学习的乐趣。在重重的困难之下，依然有人愿意这样系统、细致地讲解Axure的一些应用技巧，着实是原型设计者的福利，希望每位读者都好好把握这样的机会。

独立开发者开发App是从0到1的创造过程，而Axure RP8正是一个绝佳的起点，它能将我脑海里的想法快速变成可见的原型，极大地提高了开发效率。这本书的特点是以丰富的商业项目为案例，由浅入深地将如何利用Axure进行原型设计娓娓道来。这些商业项目的一切交互形式都经过了长时间的打磨，对这些项目进行“临摹”，无论是对交互设计师还是初学者来说，都是一种极好的学习方式。

与传明相识已久，得知他在编写有关Axure原型设计的书之后，我并不感到意外和突然。在这几年的工作生涯中，我亲眼见证他从一名需求分析新手变成产品原型设计师。他有着系统的理论知识和丰富的实战经验，目前公司里系统化的Axure培训课件都出自他手，他总是能把枯燥的内容用形象的案例清晰地讲解出来，也很懂得如何教学才能让初学者更易懂，并明白设计的深义。此书值得一看。

Axure是目前行业内普及度很高的原型设计软件，不只是产品经理和交互设计师，程序员、UI设计师、测试和运营等人员也应该对该软件有所了解。本书不仅详细深入地介绍了Axure的使用方法，更搭配了大量的实例进行讲解，是希望系统和深入地学习Axure的人士的不二之选。

——《动静之美——Sketch移动UI与交互动效设计详解》作者，交互设计师黄方闻

工欲善其事，必先利其器。Axure是当前交互设计师必不可少的设计工具之一。交互设计的过程总避免不了反复修改，所以学好Axure有助于提高我们的设计效率。本书通过网站与App常见的设计场景解析Axure的使用技巧，帮助初学者养成良好的画稿习惯。

本书由数艺社出品，“数艺社”社区（www.shuyishe.com）为您提供后续服务。

书中案例的源文件

“数艺社”社区平台，为艺术设计从业者提供专业的教育产品。

我们的联系邮箱是 szys@ptpress.com.cn。如果您对本书有任何疑问或建议，请您发邮件给我们，并请在邮件标题中注明本书书名及ISBN，以便我们更高效地做出反馈。

如果您有兴趣出版图书、录制教学课程，或者参与技术审校等工作，可以发邮件给我们；有意出版图书的作者也可以到“数艺社”社区平台在线投稿（直接访问 www.shuyishe.com 即可）。如果学校、培训机构或企业想批量购买本书或数艺社出版的其他图书，也可以发邮件联系我们。

如果您在网上发现针对数艺社出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接通过邮件发给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。

人民邮电出版社有限公司旗下品牌“数艺社”，专注于专业艺术设计类图书出版，为艺术设计从业者提供专业的图书、U书、课程等教育产品。出版领域涉及平面、三维、影视、摄影与后期等数字艺术门类，字体设计、品牌设计、色彩设计等设计理论与应用门类，UI设计、电商设计、新媒体设计、游戏设计、交互设计、原型设计等互联网设计门类，环艺设计手绘、插画设计手绘、工业设计手绘等设计手绘门类。更多服务请访问“数艺社”社区平台：www.shuyishe.com。我们将提供及时、准确、专业的学习服务。

01 原型设计的基本知识

1.1 Axure RP 介绍

Axure RP（Rapid Prototyping，快速原型）是美国Axure Software Solution 公司的旗舰产品，该原型设计工具可以帮助用户专业、快速地设计产品和需求原型图、流程图，并能导出用于最终演示的HTML页面以进行产品和需求交流。

Axure RP已被很多国内外的原型制作公司所采用，该软件凭借其专业性、快速性和高效性在软件行业迅速流行起来，得到了产品经理、交互设计师、用户体验设计师以及视觉设计师等专业人员的一致青睐。

1.1.1 当前版本

Axure RP的当前版本为8.0，相比7.0版本来说有所升级，在交互动作上增加了如旋转、设置尺寸以及设置透明度等重要的操作功能，极大地增强了交互设计的效果。

如图1-1所示，从左往右分别为Axure RP的6.5、7.0和8.0这3个重要版本的启动界面，这3个版本在Logo的设计上有着明显的变化，且随着版本的不断升级与变化，成熟度也越来越高。

由于版本的升级与变化，Axure RP8.0版本的源文件不能在8.0以下的版本中正常打开，但8.0版本以下的源文件可以在8.0版本中正常打开，但部分文件需要做适当的修改才行。

1.1.2 主要功能

作为原型工具，原型设计是Axure RP的主要功能，其常用的元件库分为基本元件、表单元件、菜单和表格，以及标记元件4大类，如图1-2所示。在原型设计中，除了可以使用Axure元件库提供的标准元件外，也可以自定义元件，在网络上也有很多免费的第三方元件库可供下载，提升了原型设计的元件丰富性。

在操作与使用过程中，Axure RP 除了具备“原型设计”这一主要功能，还提供了“业务流程图绘制”功能，避免用户在使用Axure RP时又要使用Visio来绘制业务流程图。同时，元件库里的流程库还提供了原型的基本形状，可以满足业务流程的基本需要，如图1-3所示。

1.1.3 其他原型设计工具

除了Axure RP外，还有很多快速原型设计工具，如下。（详细信息请查阅相关资料）

以上罗列的均为专业的快速原型设计工具，有的还是针对移动端研发的。除了这些专业的原型设计工具以外，还有一些原型设计的辅助方法和工具。

■ 笔和纸：作为一种重要的绘制方式，一些设计师更喜欢手绘原型，这样易于修改，方便交流，在手绘原型基本成型后，可以进一步通过快速原型设计工具来完成设计。

■ Photoshop：在专业的快速原型设计工具出现之前，Photoshop无疑是进行原型设计的重要工具，随着专业工具的出现，它在该领域的地位逐渐下降，因为它缺少原型中最重要的交互设计部分。

■ Visio、PPT：在原型设计工作当中，Office办公软件是常用的软件，其中Visio和PPT（全称Microsoft Office PowerPoint，一款演示文稿制作软件）可以为用户提供一些图形，适当加工即可用于设计原型，也可以直接用它们来进行设计。

1.2 原型设计的概念

什么是原型设计？我们不需要用多么专业的术语来解释，只需要了解以下几个关键点即可。

第一，原型设计中所说的“原型”并不是最终的产品，它只能用于演示产品的作用，不能作为最终需求上线和发布的产品来看待与使用。

第二，原型设计中所说的“原型”是用来进行产品需求沟通的，这也是它存在的主要价值。

第三，在原型设计过程中，产品经理需要快速、高效地创建原型，“快速”是原型设计的基本要求，如果在设计中不能做到这一点，那么原型设计也就失去其存在的意义。

结合原型设计的概念，我们来看一看关于原型设计的一些具体例子。

在以下原型示例中，图1-4所示为低保真原型，图1-5和图1-6所示为保真度相对高一点儿的原型。而无论是低保真原型，还是高保真原型，在产品设计中能达到沟通与交流的目的都是好的原型。

1.3 原型设计的重要性

原型设计在整个产品的设计与实现过程当中非常重要。在产品实现的过程中，它可以有效降低沟通成本，直观地演示该产品会是什么样的，清晰地表达出要实现的需求和目标。在演示过程中，人们可以很容易发现产品或需求中存在的问题，以便及时修正设计，让产品更加符合用户的需求。

这里介绍一个作者身边的例子。

在某次“需求会”上，项目经理要求需求人员讲解需求场景和业务流程。为了更清楚地说明需求，需求人员准备了几种文档，包括一份标准的需求分析文档、数张设计效果图和一个PPT文档。在讲解过程中，需求人员在PPT文档、设计效果图和需求分析文档之间来回切换，解释需求点。在场人员抛出各种各样的问题，需求人员忙于解释，讲解的屏幕也在不断地切换。虽然最后大家基本弄清楚了需求是什么，但消耗的时间成本太多，而且最终也没有直接看到需求的交互流程。

而作为原型的基本特点，界面布局和交互流程能让我们直观地看到效果，一段冗长的解释可能不如几步简单的操作来得更为直接，即使在参会人员较多的情况下，利用原型也能很好地传达用户需求和产品效果。因此，在产品设计中，我们推崇基于原型设计的产品开发和需求交流。

1.4 我该如何着手学习

对于原型设计来说，一些初学者总会有这样或那样的疑问，有时甚至不知道从哪里开始着手学习才比较合适。下面针对不同学习阶段的人群应该如何学习原型设计进行简单分析。

如果你从来没有接触过原型设计，也对Axure如何操作一无所知，那么也不要担心。Axure作为一款Windows系统下的原型设计应用软件，它的一些标准化操作方法和Windows系列办公软件的操作方法几乎完全一致，因此只要接触过设计类软件，上手该软件并不困难。

＊有一定的开发经验

如果你有一定的原型开发经验，那么学习起来会相对轻松一些。在原型设计中，一些高级技巧会涉及编程方面的逻辑判断，但是不用担心，因为Axure是一款“设计”软件，图形化操作占绝大部分，在设计中即使涉及一些逻辑判断也是以图形化操作方式来进行处理，所以易于理解。

＊对用户交互和用户体验有一定的了解

Axure作为专业的快速原型设计工具，自然会对产品的交互和用户体验有一定的要求。在原型设计中，要求原型交互流程符合常规，不能与用户使用习惯相悖，界面布局需符合一般性的设计原则，如此，原型效果才会理想。相关知识需要长期积累，所以希望大家在平日勤加学习，并总结经验。

＊会一点儿Photoshop技巧更好

在原型设计的过程中，有时候需要借助一些图片来进行设计。但符合要求的图片并不好找，往往需要我们对图片做一些简单的处理，最直接的方式便是自己动手，这就需要掌握一些Photoshop技巧。

1.5 组件化的设计思路

当你的工作涉及越来越多的原型设计项目时，你就会发现很多设计是有规律可循的。例如，App设计中所涉及的按钮、搜索输入框和弹出框等都有统一的设计规范。

在Axure软件的操作过程中，我们不仅可以使用软件本身提供的标准化元件库进行设计，还可以自行设计元件库，以组件化、规范化的方式高效地完成设计。团队项目越大，模块越多，这种“组件化”的设计就越能提高工作效率。如果前期将公共元件都设计好，那么后期就可以直接使用，避免大量重复性的工作，设计人员便可将主要精力放在逻辑设计方面。

在网络上有很多免费元件库，如针对移动端的Android元件库和iOS元件库，且这些元件在Axure标准元件库里是没有的。

综上所述，组件化设计的意义在于设计共享和团队协作，统一同一产品的设计风格，提高工作效率。

1.6 学习路径

关于Axure原型设计工具的学习路径如图1-7所示。

（1）从认识工作区域开始，熟悉工作环境是使用工具的第一步。

（2）了解常用元件的用法，可以拖动各种元件到设计区域，查看它的属性和样式。

（3）将元件拖到设计区域后，需要第一时间了解最终是什么效果，那么就要了解预览和发布方式。

（4）原型设计最主要的交互是对事件的处理，掌握事件的用法是真正开始原型的重要一步。

（5）变量是用来存储计算过程的中间值，因此在涉及计算和赋值方面的交互时会非常有用。

（6）函数和变量一样，对于一些高级交互，需要借助函数来完成判断和计算。

（7）为了提高原型设计的效率和质量，可以尝试应用一些高级技巧。

当然，学习的过程并没有固定的模式，只要是适合自己的方法都是好的方法，不必拘泥于此。

1.7 小结

原型设计是互联网应用需求分析和产品设计过程中必不可少的环节，通过原型可以快速地展示产品功能和检测产品的最终效果是否满足需求，有效降低沟通环节中的成本。因此，原型设计能力也被当作产品经理岗位必备的基础技能之一。