注意：本系列文章内容，均为作者结合自身经验，给出的建议性方案，作为实际应用的参考！如有不严谨或错误之处，敬请指出，不胜感激！

Axure不等于产品经理，它只是一个能够辅助产品经理工作的工具；

Axure不等于交互设计，Axure能够帮助我们直观呈现产品需求，便于沟通；

Axure不等于低保真原型，它也能够在产品论证阶段，通过交互模拟实现对功能模块的可用性测试以及用户体验测试。

Axure不等于高保真原型，Axure在产品经理手中应该有各种不同的应用；

Axure并不像大多数人想象中的样子。

从这一篇开始，我将结合一个虚拟出来的APP产品，对Axure的具体应用，给大家做详细的展示。

让大家能够知道，在产品经理的工作中，Axure的主要应用和不可忽视的作用。

不过，既然是一个APP产品，我们总要先有这个产品的结构信息，才能够在此基础上进行原型以及其他重要图表的绘制。

下面这张图就是使用Xmind整理出来的一个产品信息结构图。（因为是一个虚拟出来的产品，仅作为后面内容的基础，所以并没有过多的考虑功能是否完整，请勿在这方面过于追究。）

我将结合这张图，逐渐的深入，结合各种姿势、技巧，来满足大家的需求。

特别说明：这张图是思维导图软件Xmind中的逻辑图（向右），用这样的图表来呈现产品信息结构，结构上比较清晰，也比较适合用户从左至右、从上至下的阅读习惯。

当我们完成这样的一张图表之后，其实已经可以进行一次产品需求的沟通，例如：与决策层沟通在产品目标定位上是否匹配，是否与商业需求以及市场需求相一致；与开发部门探讨产品研发是否有障碍或难度，以及对开发周期进行粗略的评估。

当沟通得到确认之后，我们就可以着手进行下一步。

在前文中，我通过思维导图整理了一个资讯类APP的产品结构。

不过，在这篇文章中，我将这个结构进行了修正和细化，呈现了完整的产品信息结构。

大家可以对比两次的图表看一下修正与细化的内容。

通过对比，大家能够看出，思维导图软件在我们梳理产品结构的工作中，能够让我们非常容易的进行结构的修改。

这样能够大大的降低之后产品原型的错误率。

这里我把这个使用Xmind制作的思维导图源文件与大家分享，下载地址：https://pan.baidu.com/s/1C6qdXxb2erLOwP7pImIv5Q

注意：转载的文章如果直接点击不能下载，请尝试将下载地址复制到浏览器打开。

在确定了产品信息结构图之后，这里我在思维导图软件中把页面功能与元素收起，这样我们就能看到产品的框架结构。

不过，在实际工作中，我们一般的顺序是先完成产品框架结构，再在此基础上完成产品信息结构。

也就是先做好提纲，再进行细化。

下图中带有向右绿色箭头的分支主题都是页面。

当我们完成了产品信息结构图，确认了产品结构、功能、元素、关联都没有问题之后，接下来，我们就可以依据着这张图表，进行原型页面的创建、页面布局的规划以及页面功能的组织与元素的添加。

下面这张图，就是对照着产品信息结构图创建的原型页面结构。

通过这样的方式所创建的原型页面，在结构上，能够与产品框架结构保持一致，具有清晰的层级关系（图中编号表示层级），并且方便我们进行下一步的工作。

我们开始使用Axure构建页面布局，并且添加每个页面的功能、元素。

我们从第一步开始。

第一步，界定原型的尺寸。

原型的尺寸一般参考设备的逻辑分辨率（注意不是物理分辨率）。

一般来说有以下几种主流逻辑分辨率。

Android：宽度360*高度640

iPhone6/7：宽度375*高度667

iPhone6/7 Plus：宽度414*高度736

那么，我们制作原型时就可以使用这些分辨率，设定原型尺寸。

不过，如果想在手机上全屏显示，建议大家使用Axure Share APP，在应用商店中就有下载。通过F6的发布功能，上传至官方服务器，同步到手机本地后浏览。

这里需要注意，在发布之前，要在【移动设备】设置中勾选【包含视口标签】。

在确定了分辨率之后，我们先在页面中，通过创建全局辅助线，帮助我们确边界。

在页面中，点击鼠标右键，在【栅格和辅助线】的选项中，我们选择创建辅助线。

然后，我们按下图进行设置，创建全局辅助线，这个辅助线能够在所有页面中显示。

设置完辅助线之后，接下来我们进行第二步。

第二步，制作母版。

母版的内容，是多个页面中共有的内容。

这里我们要做的是顶部的状态栏。

在母版功能模块，我们添加母版，并且在母版名称上点击鼠标右键，选择【添加到页面中】。

然后，按下图设置，将母版添加至除了【加载页loading】和【引导页guide】的所有页面中。

母版设置完毕之后，就可以继续进行下一步。

第三步，创建页面。

这里我先把一级页面根据之前做好的产品信息结构图搭建出来。

一般来说，移动端的页面布局都是垂直布局，方便用户浏览。

不过，并不是所有产品都这样。

例如，移动营业厅的APP，业务分类界面中采用的是左右布局，左侧是分类，右侧是相应的内容。

我们应该根据需求，来界定布局，这样才能方便用户使用。

• 加载页（loading）

• 引导页（guide）

注：引导页是三张可切换图片，可以放在一个动态面板的三个状态中，通过交互进行切换。

• 首页（home）

注：这里以首页为例创建页面，把页面功能、元素与思维导图一一对应，之后页面也一样创建。另外，文章列表内容较长，可以放在动态面板中，并在属性中设置【自动显示垂直滚动条】，这样在移动端浏览就可以通过手指上下滑动内容。下面的页面同样处理。

• 精选页（select）

• 话题页（topic）

• 收藏页（favorite）

到这里，一级页面我们就创建完毕了。其他的页面，我们也这样逐一创建出来。

我把这个产品原型所有的页面都进行了梳理，并绘制了线框图。

在绘制过程中，对页面的结构做了一些优化调整和补充。

并且，对思维导图也做了一些细微的调整。

新的思维导图下载地址：http://downloads.iaxure.com/PM_APP_V1.2.xmind

注意：如果点击不能下载，请将网址复制到浏览器中打开。

当完成了这些工作之后，我在页面管理模块中，新增了一个Flow文件夹和一个page_flow页面（见上图）。

接下来，我使用了Axure RP 8中的页面快照元件。页面快照元件能够呈现指定页面的缩略图。

我在page_flow页面中，放入了一个页面快照元件，并且双击指定了要显示缩略图的页面。

这里，我将页面快照元件的宽高设置成了180*320。并且，为了美观，在属性中取消了缩略图四周的填充。

接下来，通过Ctrl+D，把这个元件进行复制，并且双击指向不同的页面。

这样，就把这个原型的所有页面的缩略图都放在了同一个页面中。

并且，通过连接线，将这些页面进行关联，形成了一张完整的页面流程图。

这张图，能够体现原型的整体结构、页面关系以及用户访问路径。

添加连接线，我们需要在顶部功能菜单中，点击【连接】图标。

连接线样式的设置，则是在顶部快捷功能菜单中或者【样式】模块中进行设置。

通过以上步骤，我们就结合页面快照元件以及连接线，完成了页面流程图的绘制。

我们已经完成了产品结构和页面流程、关系的处理。

这一篇，我们继续深入，从业务流程的角度，来看一下Axure能够帮助我们做什么？

首先，在产品经理书写产品需求文档时，会包含用例说明部分。

那么，什么是用例（Use Case）呢？

用例其实是对系统功能的描述，可以理解为使用场景。

在这里，我使用Axure的流程图元件，做了一个用例图，包含了当前这个产品所有的用例内容。

为了避免有些同学对英文比较晕，包含（incloud）和扩展（extend）的关系，我使用中文做了标注。另外，还有一种泛化的关系，使用的是白色的三角箭头（如：搜索文章）。

这三种用例间的关系，我是这么进行理解的。

包含：是指一个使用场景（基用例）的过程中，必须包含另外一个使用场景（子用例）；子用例可以单独存在，但如果缺少子用例，基用例则不完整。以生活场景举例，就像炒米饭的整个操作中要包含做熟米饭的操作，做熟米饭可以单独存在，炒米饭如果确少做熟米饭的操作则不完整（没有米饭可炒）。

扩展：是指一个使用场景（基用例）之后的多种可选操作（扩展用例），扩展用例为基用例添加新的行为，但扩展用例不影响基用例的操作。还是以生活场景举例，比如我们去健身，进入场馆（基用例）的这个行为之后，我们不止一种的行为可以选择，例如可以跑步（扩展用例）、也可以打羽毛球（扩展用例）。

泛化：是指子用例与父用例类似，但具有特别的行为。同样以生活场景举例，比如我们在工作时要找上级审批文件，对于审批这个行为（父用例），各种审批流程（子用例）都比较类似，但也有其特别之处，例如：请假审批、加班审批以及离职审批等。

本人用例图知识比较匮乏，以上内容如有问题，欢迎指正交流，我会进行更正。

接下来，我们可以基于用例图，进行用例说明的撰写。

在撰写用例说明的过程中，我们也可以通过Axure绘制业务流程图进行辅助说明。

这里的业务流程图，我结合页面快照元件完成。

以用户注册为例：

用户注册的主要事件流程是：打开首页--打开功能菜单--点击登录打开登录面板--切换进入注册面板--填写注册内容--提交注册

我们之前绘制的线框图，没有绘制功能菜单和注册面板。

在这里我们先通过在动态面板“MenuPanel”中放置元件组成功能菜单，并将面板隐藏。

再将登录面板的内容放入动态面板“Login_Register_Panel”中，并且添加一个新的状态“Register”，在这个状态中创建注册面板内容。

完成以上两步之后，接下来我们在一个新的页面“case01_register”中，绘制业务流程图。

第一步，根据操作流程，放入一个页面快照元件，调整成合适的尺寸，然后双击指向“home”页，并且在页面快照属性中，取消四周的填充。

第二步，将这个页面快照元件Ctrl+D进行复制，复制出来的页面快照元件在属性中添加动作，显示动态面板“MenuPanel”。这样，我们就得到了一个显示了功能菜单的首页缩略图。

第三步，再次复制快照元件，添加第三个页面“login_register”的缩略图。

第四步，再复制页面快照元件，添加第三个页面“login_register”的缩略图，并设置动作，切换面板状态为“Register”。这样就得到了第四个缩略图。

第五步，我们点中每个页面快照元件，在快捷功能区的更多功能中，找到连接点工具，为每个页面快照在用户操作的位置添加连接点，并通过连接线对页面快照元件进行连接，表达整个操作流程。

第六步，在这里我们还可以通过给页面快照元件添加动作，制作出带有不同的注册错误提示的缩略图，表达注册过程中的对用户输入内容进行验证的场景。

我继续给大家分享一些Axure的应用场景和使用方法。

1.标记与便签

当我们的线框图没有添加交互效果，又需要让沟通对象能够理解图中的每一个功能，这个时候，我们往往需要添加标注进行说明。下面就是一种添加标注，进行功能说明的方法。

我们可以通过页面快照元件，获取到页面的缩略图，并且在页面快照上添加不同编号的标记。然后，对应着标记，在缩略图的旁放入便签，进行文字说明。而且，标记和便签的颜色也可以相对应，方便用户查看。

另外，我们还可以通过旋转标记元件，让它表示页面间的跳转。例如：左侧的红色水滴形状标记元件，旋转了90度，元件中的文字“2”对应着右侧编号为“2”的缩略图。这样我们就能够知道，当我们点击标记所指向的一个列表项时，能够打开另外一个界面，继续进行浏览。

2、连线与便签

与上面的使用方法类似，我们还可以结合连线与便签元件，实现功能的说明。

这种方式能够比较直接 的对功能进行标注说明，不过因为连线不宜过多，所以，比较适合单个界面的功能说明。

3.页面区域快照

页面快照元件，可以通过属性的设置，将页面某一区域的内容呈现为缩略图，并且能够调整显示的比例。实现对界面中某一功能模块单独放大展示，并进行说明。

上图中，放大的区域也是一个页面快照元件，不过，在属性中，没有勾选【适应比例】。并且，将原有尺寸进行了120%的放大处理。

这里需要注意，显示页面区域快照，需要通过{偏移量}的调整，让页面快照元件从某一个位置开始加载页面缩略图的内容。例如上图中，第一个文章列表项，x轴坐标为0，y轴坐标为133，在属性的设置中，x轴无需偏移，但是y轴就需要向上移动133个像素的距离。所以，偏移量的设置中y轴的数值为“-133”（负数为向上）。

4.页面快照与元件说明

Axure软件自带了元件说明的功能。我们也可以将一个界面或功能模块的说明写在页面说明或者元件说明中。

这里以元件说明为例。

比如，我们对更换手机号码功能的使用场景进行说明，也就是用例说明。

首先，我们需要在说明功能中【自定义字段】。

【自定义字段】的设置，在说明模块的左上角（见下图）。设置好自定义字段之后，我们就可以点中页面快照元件，进行说明的添加。

通过这种方式添加的说明，在预览的时候能够在界面中通过点击说明的图标，将说明内容显示出来。

另外，通过这种方式添加的说明，我们还可以使用Axure自带的【生成Word说明书】的功能，将其生成到Word文档中。

如果，我们在Axure中，对每一个功能的使用情形都做了规范的说明（即用例说明），那么这些内容就可以通过【生成Word说明书】的功能生成文档后，作为产品需求文档的组成部分。

以上，就是关于产品经理对Axure应用的最后一部分内容。在这些内容中，我主要演示了绘制产品线框图的方法以及应用场景。在实际工作中，我们还可以在线框图的基础之上，对整个原型或者部分主要功能进行交互或者视觉效果的添加。这样产出的高保真原型，可以让用户或者沟通对象进行真实的视觉和操作体验，验证功能的可用性、易用性以及界面的友好性等。

最后，我把这一系列文章最终的线框图和思维导图，也分享给大家。

下载地址：

线框图：https://pan.baidu.com/s/1E8TfyGoGaJywF9sMRkAleQ

思维导图：https://pan.baidu.com/s/1bXdm5v1xu58Shu583dv-Hg

注意：如果不能直接点击下载，请讲以上网址复制到浏览器地址栏中进行下载。

希望我的分享能够给大家带来切实的帮助。