axure是什么软件

Axure是最常用的原型制作工作之一。无须任何HTML/CSS/JavaScript基础，你都可以使用Axure制作出具备良好交互效果的原型图。本系列笔记以金乌的《Axure RP7 网站和APP原型制作从入门到精通》一书为参考教材，系统地学习一下Axure这款原型工具软件及其背后的设计思想。

开篇之前先提几个基础问题：

（1）什么是用户体验设计？什么是交互设计？什么是视觉设计？它们之间有着怎样的关系？

（2）什么是 UE ？什么是 UX ？User Experience？Usability？衡量“用户体验”有哪些指标和要素？怎么理解“可用性”？

（3）线框图、原型、视觉稿这三者有哪些区别？使用场景是怎样的？

线框图： 低保真图，通常以“黑白灰”线条来表达，制作速度快。

原型图： 中高保真图，可以代表最终的产品，用于在利益相关者之间的沟通。

视觉稿： 高保真图，具备良好的视觉效果。

在大多数的公司中，企业对产品经理和用户体验设计师并没有明确的界限，甚至你可以把二者看成相同性质的角色。

产品经理“斡旋”于开发工程师、系统功能、视觉设计、用户、业务逻辑、项目经理、投资人之间，协调资源并推动产品的发展。作为产品经理，必须深刻理解利益相关者的视角（他们到底想要什么）并与其密切沟通，以营造无障碍的协作环境，让产品在可控范围内推进发展。

身为产品经理，我们必须综合表达许多不同的信息，而这些信息常常会相互矛盾或冲突。我们不仅要熟悉业务流程，要了解技术约束、资源约束等，要了解用户体验对软件程序性能的影响，还要反复地做用户研究和数据分析等。我们要在纷乱的多条件模式下找到至关重要的平衡，并创建出最佳的可行的用户体验。

事实上，任何工具都不过是一种为了实现产品目标的手段而已，Axure同样只是一款工具，在工作中最重要的元素恰恰不是这些工具，而是你本人和你的思想。

1、Axure工作台上常用功能区域划分

菜单栏、工具栏、站点地图、部件面板、母版面板、部件交互和注释面板、部件属性和样式面板、部件管理面板、页面属性面板（包含页面注释、页面交互和页面样式3个选项卡）。 视图 >重置视图 ，可以重置Axure工作台。

（1） 站点地图 ：用于增加、删除和组织原型中的页面。

（2） 部件面板 ：用于管理Axure内建的部件库、第三方部件库、自定义的部件库。

2、Axure有哪些内置的常用部件？

线框图就是由一系列的部件组合而成，这和前端页面是一样的，页面由一系列的UI组件组合而成。不同的部件有着不同的功能属性，绘制原型的过程中要恰当选用这些部件。

3、对Axure部件可以执行哪些操作？

4、页面样式 Page Style 有哪些常用的操作？

5、Axure中的交互基础

在Axure中创建 交互 Interactions需要包含以下3个构造模块，分别是： 事件 Events、 用例 Cases、 动作 Actions。交互是由事件触发的，事件是用来执行动作的；交互设计的目的把静态的元素变成动态的，以提升产品的用户体验。

交互是Axure中的构建模块，用来把静态的线框图转换为可交互的HTML原型。每一个 交互 都是由3个最基本的单元构成，即 什么时候When（事件） 、 在哪里Where（用例） 、 做什么What（动作） 。

（1） 事件Events（When） ：交互在什么时候发生？交互由事件Events来驱动。在Axure中的事件可以分为两大类，其一是页面事件，其二是部件事件。一个事件中可以包括多个用例，多用例根据条件判断来决定执行哪一条用例路径。

（2） 用例Cases（Where） ：用例是用户与应用程序或网站之间交互流程的抽象表达，每个用例中可以封装一个独立的路径。通常情况下，我们让原型按主路径来执行动作，但是为了响应用户的不同操作或其它条件，我们还需要制作可选路径来执行其它动作。Axure中的用例，正是用来给事件Event创建不同的执行路径。 一个事件中可以包含一个或多个用例（多用例时需要根据条件逻辑来判断执行），一个用例又包含一个或多个动作。事实上，你可以把用例看成动作Actions的容器 。

（3） 动作Actions（What） ：动作是由用例定义的对事件的响应。Axure中的动作分为六大类，分别是链接、元部伯、变量、中继器和杂项。

Pixso协同设计可以无缝衔接以往工作，支持Sketch、XD、SVG等文件导入导出，自由进行Sketch的文件格式转换。并且，文件自动保存到云端，一键回溯到任意历史版本，再也不用担心文件丢失。素材库集成众多大厂优秀的设计系统，所有 UI 设计师均可直接拖拽复用，从此省去大量模块化设计环节的重复劳动。

想要了解更多关于设计工具的相关信息推荐选择Pixso协同设计。Pixso是一款专业的在线UI/UX设计工具，内置众多大厂的优秀设计规范，提供海量设计模板和素材，集成众多大厂优秀的设计系统，所有 UI 设计师均可直接拖拽复用，从此省去大量模块化设计环节的重复劳动，本地化字体资源，及专属私有化部署。

希望通我使用“原型+流程图”的多年经验，让更多的PM也可以掌握并运用到平常的原型设计工作中。

一、流程图的通病

目前所有流程图软件都存在一个问题，那就是流程图无法关联到原型页面。

无法做到直接点击流程图里面的节点(页面、功能、操作)，展示与之相关的更多信息。这样子使用上面会很受限。

页面流程图无法查看指定页面详情

比如我们画页面流程图，展示了所有页面以及页面间的流向关系。UI设计师和开发童鞋，有时候需要查看某个页面的具体内容。

功能流程图无法查看指定功能详情

功能流程图也存在类似的问题，开发童鞋想了解某个功能的具体情况，只能问PM或者自己找对应功能的原型页面。

功能逻辑图无法显示具体控件

画一个功能具体的步骤逻辑的时候，有时候我们需要展示一下其中的控件，比如写下单流程的时候可能需要展示一下付款弹窗。

当然也可以使用原始方法，直接复制过来，第一麻烦第二修改了无法同步。

无法对流程图节点做注释

流程图是由一个个节点连接而成，有时候节点需要写几句话注释一下。不是所有的流程图软件都能支持，更主要的是没办法做到默认隐藏，点击展开注释。除非你把流程导出为html格式，但是这样子又不能导入到Axure中了。

二、Axure流程图的介绍

以上这些使用问题，都可以使用Axure的流程图来满足。接下来我会一一的来讲解如何解决。

先简单介绍一下Axure的流程图功能是什么，其实本质上是一个元件库。

含有很多种元件，用途各不相同。大家使用的时候尽量遵循其定义的通用规范。当然如果你有特殊需要，可以单独定义。

三、流程图如何关联页面

Axure提供了两种操作方法，本质上都是设置“引用页面”属性，Flow元件库中的所有元件都具备该属性。Dafault默认元件库中部分元件支持该属性。

“引用页面”除了关联了对应页面，同时集成了对应页面的标题。当你修改页面结构中的页面标题，这里也会同步更新。

拖拽页面到工作区

当你画页面流程图的时候，需要展示某个页面的详情。

那么选中Axure左方的页面结构中的该页面。

然后拖动到右边的工作区即可，效果如下图。

最终的显示效果请查看我之前的文章，以及我绘画的 页面原型图 。

其中右下角带有“蓝色矩形组”图标的矩形，代表可以点击进入该页面的线框图，查看详细的页面布局、控件、逻辑等。

设置引用页面属性

根据上图，你应该可以猜到其实拖曳页面名称到工作区，是创建了一个页面并且设置了属性“引用页面”到该页面。所以你也可以这样做。

拖动Flow元件库中的元件到工作区

设置属性“引用页面”到你所需的页面

生成原型查看效果。

四、流程图如何关联具体功能

方法有2种，大家可以按需参考。

设置“引用页面”属性到具体的功能页面，方法如上。

设置单击链接到具体的功能页面，再简单不过。

五、流程图如何显示具体控件

在画某个功能的具体逻辑时候，我们可以借助Axure的“页面快照”功能来展示一些控件。有助于技术童鞋对功能的理解和实现。

新建页面快照

从左方的Flow元件库，拖动”页面快照”到右方的工作区。

设置引用页面

方法和上面的类似，但是展示效果有点区别哦。所谓页面快照是指将引用页面的具体内容显示到该元件区域范围里。比如我引用了 闪电约首页 这个页面，那么效果如下。

修改快照参数

显示明显有问题，我们可以修改一下参数。

取消适应比例，然后把该页面快照元件的尺寸修改成375 x667，然后填充的相对坐标改成(0,0,0,0)。此时快照效果如下。

配置动作

比如你可以设置该页面隐藏一些控件，或者展示隐藏的弹框，吐司提示。

大概是这样子了，在设计商品详情、购物车、确认订单的时候，该功能特别适用。有需要的童鞋可以试下。

七、流程图如何显示节点的注释

这个其实很简单，但是很多PM没用过。

具体的可以查看我写过的旧文《 产品逻辑的常用表达法 》，《 Axure最正统的产品逻辑表达法 》。

八、总结

以上这些技巧都是Axure自带的流程图功能，只是很少有人系统的总结并分享出来。

希望通过我的文章，大家以后能善用Axure的流程图。而不是盲目的跟风使用第三方脑图软件。

适合产品经理的流程图软件就是Axure，配合强大的原型功能。绝对是双剑合璧，天下无敌。

Axure RP是一款专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

工作环境

Axure的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的线框图。不用进行编程，就可以在线框图上定义简单连接和高级交互。在线框图的基础上，可以自动生成HTML（标准通用标记语言下的一个应用）原型和Word格式的规格。

作为一款热门的原型设计工具，它可以完成很多纸和笔画不出来的事情，特别是高交互的页面，用动画效果展现让人瞬间清楚你要表达的内容。

原型：用线条、图形描绘出的产品框架，也称线框图。

原型设计在整个产品流程中处于最重要的位置，有着承上启下的作用。何出此言？原型设计之前需求或是功能信息都相对抽象，原型设计的过程就是将抽象信息转化为具象信息的过程，之后的产品需求文档（PRD）是对原型设计中的版块、界面、元素及它们之间的执行逻辑进行描述和说明。所以说，原型设计的重要性无可替代，产品经理应当要对此有绝对的控制和驾驭能力。

话说回来，原型设计虽然很重要也应当是有限度的，原型设计的作用有以下几点：

1、因为是原型是需求和功能的具象化表达，所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。

2、因为原型相较于UI稿来说修改更方便，所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。