关于产品经理对Axure的应用

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

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”的缩略图。这样咱们就可以知道，当咱们点击标记所指向的一个列表项时，可以打开另一个界面，继续进行浏览。

二、连线与便签

与上面的使用方法相似，咱们还能够结合连线与便签元件，实现功能的说明。

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

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

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

但愿个人分享可以给你们带来切实的帮助。