详情
本书将实际的产品原型制作经验和Axure结合起来，将交互设计模式和Axure结合起来，采用全图形化方式讲解Axure的每一个功能应用。为了达到更好的学习效果，本书深刻解析每一个部件的应用场景和注意事项，抓住原型排版的关键技巧，让读者能够掌握各种动态应用效果的制作、模拟最真实的效果，真实感受到Axure的实用性。
书名：Axure RP8产品原型设计快速上手指南
ISBN：978-7-115-41996-5
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 何广明
责任编辑 杨海玲
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
目前交互设计在国内发展得如火如荼，大部分产品设计者都在用Axure制作产品原型，表达自己的想法。Axure RP是在交互设计中广泛使用的一个专业的快速原型设计工具。
为了提高原型制作的效率，本书将实际的产品原型制作经验和 Axure 结合起来，将交互设计模式和Axure结合起来，采用全图形化方式讲解Axure的每一个功能应用。为了达到更好的学习效果，本书深入解析每一个部件的应用场景和注意事项，抓住原型排版的关键技巧，让读者能够掌握各种动态应用效果的制作、模拟最真实的效果，真实感受到Axure的实用性。
本书是一本快速学习Axure的操作指南，并且基于新发布的Axure RP 8.0，适合想通过Axure RP表达自己设计思想的所有人阅读，包括产品经理、可用性专家、用户体验设计师、交互设计师、界面设计师等。
会Axure的不一定是产品经理，产品经理一定要会Axure。
当然这只是一句玩笑话，不会Axure的照样也可以做出、做好产品。Axure对于一个做产品的人究竟意味着什么，可能不同的人有不同的感受。这里说说我的Axure经历。
2011年在我还不知道什么是产品的时候，我对接一个网站改版的项目。刚开始我在和技术团队沟通时特别困难，我知道我要做成什么样子，但是无法描述出来，对接过程一度出现僵局。这个时候第一次在WebPPD论坛上接触到了Axure，说到这里要感谢WebPPD社区对Axure在国内的普及发挥了巨大的作用。
在这个社区中，我看到了很多人在分享应用Axure的经验，虽然那时候的Axure才是5.6版本，界面还没有那么美观，对它的高级交互我还不知道如何应用，但最简单的线框图加上一些链接的交互已经满足了我的整个项目的需求。从此我爱上了Axure。
在完成了整个项目之后，我开始不满足于最简单的线框图的制作，期望能够和很多高手一样制作各种趋于真实的交互效果。我开始对Axure发起了疯狂的学习，疯狂地研究各种特效，疯狂地拆解网络流程的各种原型文件，力求100%实现各种真实的动态效果。记得有一次，为了实现幻灯片移入暂停播放、移出继续播放的效果，我拆解了一个网友的原型，整整研究了一个星期。我相信有这种经历的朋友一定很多。也许还有很多人正处于这样一个阶段。
在产品设计的道路上走了3年多，看到很多新人把Axure当做了产品经理的全部，苦苦地钻研Axure各种高级动态效果，研究各种变量。每每看到这里我就问自己，究竟怎样才是真正合理地使用Axure。
看到网络上越来越多分享的课程都是针对Axure各种特效制作的，我萌生了一个想法，能不能写一本教程，不针对复杂的应用，只讲解最基础的Axure技能、技巧、应用，让更多的人有平等的权利学习和应用Axure。2012年，我开始撰写Axure的系列教程《Axure从入门到精通》，耗费了2个月的时间，写了44篇图文结合的教程，也就是本书的前身。之前这些文章都放在个人的博客中，收到大量的阅读和留言反馈（但由于备案原因，目前暂时无法打开）。后来我又将这个课程发布到“网易云课堂”，截止到2016年1月已有9437人参加了学习，期间有大量朋友向我咨询Axure的使用技巧。
一晃时间过去了3年多，今天的Axure已经升级到8.0版了。作为一个设计产品的工具，Axure本身就是一个好产品，经过不断地升级，越来越易于使用。而之前的那套网络课程也不再适应这个时代的变化了。
目前网络上Axure教程依旧非常零散，多数教程还在钻研软件的高级应用，缺乏实战性。我期望有一本书能够将实际的产品原型制作经验和Axure结合起来，提高原型制作效率，更好地表达自己的想法，于是这本书诞生了。
也许和其他人不一样，虽然我写了这本Axure的书，不过我更期望大家将Axure看淡。正如张小龙说的：“好的产品，用完即走！”我期望这本书也是这样的好产品，让我们留下更多的时间去学习什么是产品和交互。
感谢WebPPD社区创始人尹广磊对我一路上学习Axure的帮助和支持，让我对Axure了解得更深入。
感谢陈婷婷、余红艳等好友，感谢她们在百忙之中抽空帮忙审校书稿。
感谢为本书撰写书评的朋友，感谢他们在百忙之中抽空阅读书稿，撰写书评并提供宝贵意见。
最后，要感谢我的家人，感谢我的爱人让我把2015年和2016年的大部分时间都献给了这本书，没有她的理解与支持，就没有这本书。
尽管我们对书稿进行了多次修改，仍然不可避免地会有疏漏和不足，敬请广大读者批评指正，我会在适当的时间进行修订，以满足更多读者的需要。
在经历一个个漫长的beta版本之后，我们终于迎来了Axure RP8版本的正式发布，其LOGO从以极具扁平化的蓝色为主色调进化以紫色为主色调。Axure的每一次版本发布都是整个产品界瞩目的事件，从RP7版本刚发布我们就在畅想RP8版本的发布会有哪些变化。
从本次发布的版本来看，Axure RP8在整体UI方面更加扁平化，更加突出一些核心功能和灰度原型的精髓，添加和改善了一些功能。从本节开始我们会一点点介绍全新的Axure RP8，并阐述这一版本的新变化是如何改进产品原型设计，提高设计效率的。
Windows版本
Mac版本
在经历了最后一次大的版本更新之后，Axure RP8相对于之前的beta版本在UI上进行了很大的更新，其Windows版本和Mac版本界面区别弱化，统一了顶部工具栏，不过，它依旧保持简单、直观的UI界面。
Axure RP8将原来放置在软件底部的页面交互区域移动并合并到右侧部件属性区域，加大了整个软件的页面编辑区域的面积。整个软件布局变成了最经典的左中右三栏布局。
RP8将部件交互动作和备注面板、部件属性和样式面板、页面属性面板合并为检查器（Inspector）。选择某个部件时，属性面板就是该部件的属性；点击页面空白处时，属性面板就会变成页面属性。
RP8正式版对文件、剪贴板、撤销、剪裁、裁切以及连接点等操作项的图标进行了重新设计。图标按照属性进行了归类，同时将不常用的一些快捷操作隐藏到“更多”里面。我个人觉得扁平化和灰度处理过后的图标没有RP7版本的图标辨识度高。
在做交互设计的过程中，为了保证用户对信息的理解，我们会不断地对信息进行分类，将同一属性的信息放到一起。RP8正式版中对属性和样式面板进行了重组和分类，更便于查找各类部件的属性，减少上下翻页以及选项卡切换等频繁操作。
| 字母 |
对应区域 |
描述 |
|---|---|---|
| A |
页面面板 |
呈树状结构，可以添加、删除页面，也可以对设计中的页面重命名 |
| B |
部件面板 |
自带部件库，包括矩形部件、图片部件、动态面板部件等。使用方式是直接拖动部件到页面编辑区域 |
| C |
母版面板 |
在多个页面中可以共用/复用，也方便同步修改 |
| D |
检查器面板 |
1．设置整个页面加载时的交互，如页面载入时、页面滚动时 |
| E |
大纲面板 |
管理页面编辑区域内全部被使用部件，可直观浏览所有被使用的部件 |
| F |
工具栏 |
新建、保存、预览、发布等核心功能和操作，包括对页面进行编辑的一些快捷操作，主要有字体设置、大小设置、部件尺寸和Axure本身自带的一些快捷操作等 |
| G |
页面编辑区域 |
俗称画布，部件进行线框图编辑和交互的具体实施的区域 |
由Axure RP7中的站点地图发展到Axure RP8中的页面面板，更加表明该区域的主要作用：对页面的管理。页面是Axure中最高层级的元素，页面面板主要用来创建和管理页面，整个页面区域呈树状结构，可以添加页面、删除页面、重命名页面、调整页面层级、调整页面顺序。
页面面板中有两种页面类型——线框图页面和流程图页面，其中使用最多的是线框图页面。新建文件时，默认会自动生成4个页面（1个Home页面、3个Page页面）的页面地图，可以在这个基础上进行产品原型设计。
选择一个熟悉的产品，尝试在Axure中建立一个页面地图。这里我们梳理了微信的产品架构，然后在页面面板中建立了这样的信息架构。
微信的产品架构
微信产品的页面地图
Axure RP8中对页面面板的操作进行了简化，去除了原来面板中的关闭和帮助按钮。
去除了删除图标，可以单击右键选择更多操作或直接按delete键进行删除。
对页面的更多操作，可以选中某个页面，单击鼠标右键查看操作菜单，获取更多操作。
熟悉Windows系统的用户，对文件夹功能一定不陌生。在Axure RP8版本中继续保留了文件夹功能，可以将页面放置到文件夹下进行管理。
文件夹最主要的作用就是在页面数量较多的情况下，可以分多个维度对页面进行管理，如前台系统、用户中心、管理后台。甚至一些暂时无用的页面也可以统一新建一个文件夹进行管理。越是大型的系统在进行产品设计时越需要建立合理的文件夹分类来管理页面。
Axure的新建页面的名称默认为New Page 1，为了更好地对应产品架构和方便查找，需要对新建页面进行重命名。
页面命名规则建议和产品整体架构名称保持一致。例如，在产品架构图中称为“我的订单”，那么在页面中建议也命名为“我的订单”，保持页面地图和产品架构的一致性。
一个真实产品页面地图案例（图片来源网络）
无论是设计Web产品还是移动产品，页面地图都直接反应了产品的整体架构，便于后期对原型进行维护和其他人对原型的理解。如果想建立一个清晰的页面地图，建议先学习一点儿信息架构的知识。
部件面板也叫组件面板、部件库，英文为widget，还有人称之为控件面板。部件面板是Axure中最核心的组成部分。
Axure自带线框图部件（默认显示）和流程图部件、图标部件，其中的图标部件是Axure RP8中新增的。此外，还可以下载并导入第三方部件。
在绘制原型的过程中需要在线框图部件、流程图部件中切换部件库，后面还会添加许多第三方部件库，这就需要在不同部件库之间进行切换。下面我们具体看一下如何切换部件库。
拖动也许是最简单的交互行为之一，只需要拖拖拽拽就可以快速制作一个原型。Axure的易于使用就体现在这方面，哪怕是从来没有学过Axure的人，只要演示一遍也能够快速制作出一个还不错的线框图原型。
初次接触Axure的新人很喜欢下载大量的部件库，但是这么多部件库会带来一个问题，就是如何快速找到部件。Axure提供了快速的搜索功能。点击搜索图标，在文本框内输入想要找的部件名称即可。
如果你熟悉网页设计，可以看出构成整个网站的基本元素都在这里了，通过这些小部件的组合，可以得到各种组件，如文本部件和输入部件组合，可以得到一个密码输入组件。当然上述全部部件既可以组合使用，也可以单独使用，具体要依据实际情况和你对交互设计模式的理解而定。
根据制作原型的经验，笔者将全部部件分成4种类别、16种类型、40个部件。值得强调的是，RP8中增加了一个圆形部件。
不同的部件具备不同的属性，我们将会在第2章针对每一个部件进行详细讲解。
Axure自带了线框图部件、流程图和图标部件，这三类部件对日常的原型制作来说还不够，特别是针对目前移动互联网的产品设计，我们还会加载一些第三方制作的部件库，如IOS 8部件库、Android部件库等，具体步骤如下。
STEP 01 点击“选项图标”按钮，选择“下载部件库”。
STEP 02 打开本地资源管理器窗口，选择合适的第三方部件库。
STEP 03 完成载入，应用新的部件库。
在Axure中，如果同一个功能模块在超过100个页面中应用，那么一旦发生更改，我想有些读者一定会问为什么不早一点知道这个世界上还有母版这么一回事。
方法1
方法2
三种拖放行为其实是母版在页面编辑区域的三种行为表现。不同的行为具有不一样的特征，一般都是采用默认的“任何位置”。
默认显示颜色为淡红色，可以拖入线框图中任意位置，修改母版时也会同步更新，只有坐标位置在线框图中不会发生改变。这是最常使用的行为。
在页面编辑区域中会继承在母版中的坐标位置，不可以被修改。早期版本中该类型叫作“作为背景”。
从母版中拖入线框图区域后，和母版之间的关系就解除了。这有点儿类似于部件库中的自定义部件。
早期版本中，如果要在母版面板中删除一个母版，必须保证这个母版没有被任何页面使用，也就意味着这个母版必须在所有页面中被删除了，才能在母版面板中进行删除。但是，一般一个项目页面最低也在20多个，此时，这个母版被哪些页面使用，查找起来非常麻烦。现在只需要查看母版的使用报告，就可以轻松地知道母版被哪些页面使用，然后根据需要进行删除。
STEP 01 单击选中母版，单击鼠标右键，选择“使用报告”。
STEP 02 双击被使用的页面名称，进入被使用页面，然后删除要删除的母版。
在母版面板中创建好母版之后，有两种方法将其应用到页面中。
母版的常用操作与页面面板类似，这里不再重复讲解，可以直接参考页面面板基础操作的介绍。
这7种应用情景是在实际原型设计过程中最常遇到的需要不断复用的情景。依据项目的不同，需要复用的情景还有很多。建议在设计正式原型之前，先规划好整个产品需要被复用的情景，然后将其制作成母版。
前面说过RP8版本将之前版本中的页面属性和样式面板移到了右侧，和部件属性和样式面板进行了合并。当单击页面空白区域的时候，检查器面板就会切换到页面属性和样式面板，就可以对整个页面进行交互和样式的相关设置。
新版的页面属性包含页面交互和自适应视图的设置。自适应视图将在后面章节中详细介绍。
顾名思义，页面交互就是对整个页面进行的交互设置，在页面发生变化时，执行某些交互动作。在Axure中页面交互主要有三类事件。
RP8中对于页面交互增加了窗口向上滚动时、窗口向下滚动时等更多事件类型。点击交互下方的“更多事件”可查看全部页面事件类型。
通常，将产品中关于整个页面的需求描述填写在页面和母版的备注面板，方便查看和生成需求文档。
编辑中的效果
浏览器中的效果
默认页面备注只有一个备注字段，可以点击“自定义字段”创建新的备注字段。
现在设备的分辨率越来越多，如何保证设计的原型在不同设备的浏览器中查看始终是居中的效果呢？这里我们可以选择设置页面对齐为“居中”。
默认页面的背景色是白色，也可以根据需要将背景色改为其他颜色。
页面背景也可以用图片进行填充，直接点击“导入”可以将图片直接导入页面编辑区域，还可以设置图片的对齐和重复方式。
在产品早期规划阶段，为了避免过多纠结于设计细节，更关注产品本身，在进行原型设计时，往往会将绘制的原型视觉样式调整为草图样式。
在草图程度的值越高，草图效果越明显。草图效果的颜色设置项中，如果选择第二项“灰度图片”，还可以将整个原型的色彩全部去除，变成常说的灰度原型效果。
检查器面板一分二，分为页面和部件。部件面板是对前面提到的部件进行（属性、备注、样式）设置的地方，是实现交互原型效果最核心的区域。
如果要查看页面属性与样式，在空白区域单击一下即可。如果要查看一个部件的属性与样式，将其拖动到页面编辑区域，就可以看到该部件的属性、备注、样式设置选项。下图中我们看到是检查器：矩形。
RP7之后极大地丰富了事件的类型，同时也适当地优化了一些移动端的事件类型和效果。虽然还没有直接表达出手势事件类型，但也算是一种进步。同时不同的部件对应的可以创建的交互事件类型也不相同，拖动一个部件到页面编辑区域，然后点击属性面板，即可查看这个部件拥有的事件类型。
动态面板
文本框
复选框
在快速原型阶段，往往没有时间在Word中耗时撰写需求文档，更多的时候是在原型中直接进行备注。备注最直接的方式就是将备注加在所属部件上。我们可以根据交互说明需要撰写的维度，添加备注的字段。
STEP 01 拖动一个部件到页面编辑区域，然后单击备注面板。
STEP 02 单击“自定义字段”，打开自定义字段对话框。
在新增注释字段功能中，可以指定注释字段的类型（如Text、选择列表、Number、日期），其中Text（文本）是最直接和常用的类型。
| 字段类型 |
描述 |
|---|---|
| Text（文本） |
用于一些文字类型的描述或者默认值说明 |
| 选择列表 |
通过下拉选择给部件添加注释 |
| Number（数字） |
注释属性是一个数值（如版本号），此类型不常用 |
| 日期 |
用于描述日期的属性，下拉后是日历部件，方便输入 |
部件样式是设置部件的视觉效果的地方。和部件的属性一样，不同的部件拥有的视觉属性也会略有不同。主要有坐标位置和尺寸大小的设置、标题样式、填充颜色、阴影等样式属性，每个属性的具体效果，会在第2章中详解，这里先了解一下即可。你可以自己一个个尝试，看看具体的设置效果。
矩形设置样式效果之后
部件样式区域中的很多属性也可以在工具栏进行设置。Axure RP8中新增了自定义工具栏功能。
大纲面板在RP7中称为部件管理区域，是在早期版本的动态面板管理区域的基础上升级而来的，目前主要是管理当前页面编辑区域所有被使用部件。
RP8中可以通过小缩略图看到部件具体的类型是矩形、表格还是菜单。
所有在页面编辑区域被使用的部件都会在大纲面板中显示，最大的变化就是组合的部件会通过一个单独的文件夹进行管理，并且可以对文件夹进行重命名。
点击组合部件和动态面板后面的蓝色小方框，可以切换组合部件和动态面板在页面中的可视性。当页面中部件过多时，常常会将一些部件从页面中隐藏。在原型设计过程中，被隐藏的部件不会受到任何影响。
单击筛选图标可以直接筛选需要查看的页面中的部件类型，快速锁定部件。
也可以直接点击搜索图标，搜索部件的名称。如果没有对部件进行重命名，部件会直接显示部件的类型名称，如图像。
在大纲面板中可以直接看到一个动态面板拥有的状态数量，双击某个状态可以直接打开该状态的主页。
