人都是产品经理旗下【起点学院】推出产品经理“365天”成长计划，BAT大牛带你学产品！

一、Axure交互

Axure交互是指把静态线框图变成可点击的交互式HTML原型的功能。

每个Axure交互有三个基本的信息单元组成，即When、Where和What。

• When：什么时候发生交互动作？在Axure术语中，用事件（Events）来表示When。例如：浏览器中加载页面时，用户点击一个控件后。
• Where：交互在哪里发生？ 任何一个控件都可以建立交互动作，如矩形框、单选按钮或下拉列表，或者一个页面或模板线框图。
• What：将发生什么 在Axure中，把这是要发生的称为动作（Actions）。动作定义了交互的结果。例如，在页面加载时，将一个动态面板编程一种指定状态。

二、示例

本示例在静态线框图的基础上进行构建。

使用简单词语定义交互

用户点击 全局导航栏 上某个Tab时，会链接到对应的页面。新打开的页面将取代当前页面。使用W3C拆解上述过程。

• When：用户单击时
• Where：全局导航栏上的一个Tab矩形控件
• What：链接到相应的页面
• Condition: 没有条件

Axure交互界面

Axure事件

Axure交互由两类Axure事件触发。

• 页面或页面中的模板加载时：自动交互，在页面加载时触发。
• 用户直接与控件进行交互时：手动交互，由用户触发。

页面加载事件

OnPageLoad(页面加载)事件可广泛应用于页面和模板，很可能成为常用方法。

示例：更改默认的着陆页

打开生成的HTML原型时，总会显示站点地图区的第一个页面。然而，为了便于原型演示，可能首先打开OverView页。

交互的目标：原型加载时，让站点地图区的第一个页面重新定向到所指定的页面。使用W3C方法拆解这个交互的结构。

• When：原型加载时
• Where：站点地图中的第一个页面
• What：重新定向到另一页
• Condition：没有条件

交互设置过程：

1. 打开Use Cases页面(A)进行编辑，在Page Properties(页面属性)区中，切换到Page Interactions(页面交互)选项(B)。
2. 双击交互选项中OnPageLoad事件(C)，打开Case Editor(情景编辑器)窗口。
3. Add actions这一栏中列出了所有的Axure动作。Links这组中的交互动作用于处理导航，其中最常用的是Open Link ->Current Window动作(D)，表示在当前窗口打开链接。单击它。
4. 在Configure actions这一栏中列出了站点地图区中的所有页面。单击OverView页面(E)，将OverView页面设置为重定向目标页面。该动作会出现在Organize actions这一栏中(F)。
5. 这样就完成了交互设置。点击“确定”关闭Case Edition窗口。

全局导航Tab的OnClick事件

1. 打开编辑M Global Nav(全局导航模板)页面(A)。全局导航栏有7个Tab，他们都有相应的交互动作。这里以“指标比较”(B)为例介绍。
2. 在Widget Interactions and Notes区，单击Interactions(C)选项，可看到矩形控件包含三个事件。
3. 双击OnClick事件(D)或者单击Add Case链接，可以打开Case Editors（E）窗口。
4. 然后参照OnPageLoad事件设置。

模拟上下文导航

一种常规的用户体验需求是，通过全局导航栏，清晰告知用户当前处于哪个页面。 页面加载时，全局导航栏会变成当前选择的对应页面。使用W3C方法拆解这个交互的结构。

• When： 页面加载时
• Where： 全局导航模板
• What： 显示当前所选择的页面
• Condition： 没有条件
  很多种方法可以实现这个What：当前激活的导航栏Tab可以变大尺寸、变化页签背景颜色、加粗字体、变化字体颜色等。

设置Tab选中后(Selected)的样式的步骤：

1. 打开M Global Navigation(A)编辑页面，选择构成全局导航栏的7个Tab(B)
2. 在Widget Properties and Style(组件属性和样式)区中(C),选择Properties(D)。可以看到四中交互样式。
3. 选择Selected(E)选项，弹出Set Interaction Style对话框(F)，选择Selected选项(G).
   4.选择需要改变的样式，勾选Preview(预览)即可。

三、相关资源

作者：binarystar

来源：http://www.jianshu.com/p/0d874e1e040f

备工作：

1.下载echart.min.js,后面放出Axure中引用；

2.进入echart官网-》实例-》官方实例，选择自己需要的柱状图、饼图或者线形图等（也可以在社区-》gallery,

这里都是个人上传的可视化图，比较实用），也可以自己根据需要修改前端代码，完成自己所需要的可视化图，

注意：编辑完成后不要修改如下图所示，切换背景颜色，不然你的辛苦劳作会丢失的！！！！！

点击右下角Download下载一个html，作为后续引入axure内联框架中。

3.在axure中加入一个内联框架，如下图所示：

最后在本地生成HTML文件，将下载的echart.min.js引入到生成的HTML文件下\resources\scripts这个路径下，

同时将生成的HTML文件与在echart中官网可视化图或者自定义可视化图导出的html放在一个目录下，如下图：

然后将area-basic.html的本地路径引入axure的内联框架之中即可。

注意：查看效果不要axure预览模式查看，需要重新发布生成，查看效果

获取更多精彩可视化Axure实例，请点击下方“了解更多”

次作业为根据TIM登录界面截图，画出一副一样的原型。

以TIM登录界面为例。

一、分析

当我们手里仅有这一张截图时，怎样利用Axure做出和截图一样的原形界面呢？

首先，我们要获取到每个元件的长、宽、高、以及对应的X轴，Y轴信息

其次，我们也要知道各个元件中使用的颜色

分析截图，我们将此登录界面分为两部分，上半部为”LOGO”部，下半部分为”登录”部。

二、UI设计步骤

将截图放在工作区，将X轴，Y轴设置为0,0.

1.标记”LOGO”部的元件位置。如下：

移动图片到右边，在标记区域中添加元件。

1.1：背景区域：两个直角三角形，一个等边三角形（取色就使用拾色器取色）

1.2：LOGO,应用名称位置：根据标记线，添加LOGO,应用名称，（为什么右图的LOGO看起来是正方形，而左图为矩形呢？因为右图的LOGO下有一勾，在标记时也要将此勾作为一个整体标记。）

2.标记”登录”部的元件位置。如下：

移动图片到右边，在标记区域中添加元件。由于登录部分元件比较多，我们需要分别拆开来看。

• 头像：圆形，位于左边据X轴41px，周长81px；
• 在线标记：圆形，位于左边据X轴101px，周长12px；
• 用户名、密码输入框：文本框，位于左边据X轴133px，宽196px，高28px；
• 所有的icon：均为宽26px，高26px；
• 登录按钮：按钮（矩形），与用户名、密码输入框左右对齐，高31px；

好了，记下以上的信息之后，有了标记线，就可以基本准确的画出原形图了，如下：

三、原型交互步骤

有了以上的原形，我们做一个简单的交互。交互需求：用户点击“登录”，跳转到正在登陆界面，正在登陆界面如下：

这样看，这个交互就简单了，我们只需要将登陆界面转换为“动态面板”，点击登陆时，显示State2（正在登陆界面）即可。为了再复杂一点，我们设置用户名为“1234”，密码为“1234”，如下：

F5预览，即可

备注：大家可以根据自己的需要，添加各种用例以备后续使用。

本文由 @小甜甜不甜 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash ，基于 CC0 协议