PM完成Axure原型评审后，一定不能忘记备份这些原型html，后续可能需要查询以及技术撕逼。

希望通过Axure原型的几种使用场景，让初级PM对它的来龙去脉有个清晰的了解。而不是停留在“我知道”“大概会用”的水平。

版本

PM会经常修改AxureRP源文件，然后生成不同的原型。

但是对外评审的原型应该是唯一的。

并且该版本的产品需求文档PRD就是这个原型。

请注意两者不能混为一谈。

打开

一般来说我们是在Axure生成原型Html的时候，自动在浏览器中打开了原型并查看。

但是如何打开已备份在电脑中的原型呢，很多初级PM摸不着头脑了。其实也不复杂，如果你学会一点html网页的知识。

请进入该原型对应的目录，比如APP名称V2.0版，我们会发现存在data、file、images、plugins、resources等文件夹，以及很多html网页。请找到start.html，然后双击打开就是你熟悉的原型啦。

展示

当原型评审后，PM需要将原型放到网上供所有团队成员进行设计和编程。

不管是放到内网展示，还是外网展示。其本质都是将Axure原型的所有文件都上传到服务器，包括所有的html文件，图片文件，js文件，css文件。不能缺少任何文件，否则就无法正常显示。

如果你只是修改了某个页面，也切记生成并将所有文件上传一遍，而不仅仅是该页面对应的html文件。因为其对应的js，css文件，图片文件也可能被修改

上传之后然后把对应的原型网址发给其他团队成员即可查看。

备份

由于Axure原型是由html+js+cs组成的文件，我们在生成的时候将他们放置在指定目录。

嘉定我们将该产品的所有原型存放于D://PM/APP名称，那么建议以“APP名称V1.0版”的格式命名，并生成原型。

当然你也可以继续压缩之后存起来，不过就不太方便后续的查询。

回退

有时候我们需要回退版本的时候，需要把旧版本的原型也拿出来。那么请用旧版本的原型html去替换当下的原型目录。

不过不太建议这样，还不如新增一个版本来处理。

查询

由于Axure生成的原型，是以Html文件进行索引内容的。而Html是以你在Axure中新建的页面来作为基础的。如果你画Axure原型的时候是以你产品中的页面来进行命名和创建的。那么我们可以通过搜索“页面名称”关键词去查询你想要查询的页面。

如果你使用的搜索工具支持搜索文件内内容，比如Windows下面的everthing，Mac自带的spotlight。那么可以通过搜索“页面内文字”关键词去查询你想要查询的相关页面。

不过我更建议你进入到具体版本的原型html文件夹里面进行搜索，而不是进行全局搜索。

总结

以上就是Axure原型的使用场景。请一定要理解Axure原型的本质是html+js+css，每次生成原型的时候会在本地生成目录并写入这些文件。

#专栏作家#

浪子，业务型PM，浪子PRD系列51prd.com，公众号langzisay，个人微信nuanai88。

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

题图来自 unsplash，基于 CC0 协议

人都是产品经理旗下【起点学院】推出产品经理“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

xure小白的福利又来了，本教程主要讲述查看原型的一系列基础操作以及相关设置。

希望大家边学边操作，学习效果更佳哦。

Axure RP 8 教程 – 查看原型

1.快速预览查看原型

快速原型的快捷键为“F5”。或者，单击快捷键功能中的预览图标进行预览。导航菜单“发布”-“预 览选项”中进行预览设置。

2.生成HTML查看原型。

生成原型的快捷键为“F8”。或者，单击快捷键功能中生成图标。还可以通过导航菜单“发布”-“生成原型文件”中进行生成。

3.生成部分原型界面

发布原型时，如果不需要将所有页面生成或者发布，可以在生成HTML的设置中打开“页面”的设置，取消“生成所有页面”的勾选，则可以设置生成指定的页面。注意，子级页面无法单独发布，勾选子级页面时会自动勾选父级页面。如果需要单独发布子级页面，需要在页面管理面板将子级页面的级别调整到一级页面。

4.为原型添加标志

在生成HTML的设置中有“标志”的设置，可以为原型添加图片标识或者文字标题。原型发布后会显示在工具栏的页面面板中。

5.发布原型到AxShare

发布原型到AxShare是将做好的原型发布到Axure官方提供的空间中，通过自动生成的网址进行访问。发布到AxShare的快捷键为“F6”。发布到AxShare需要注册相关账号，网址为：http：//share.axure.com/

6.移动设备设置

制作移动设备原型需要遵循规范将原型制作成标准尺寸。移动设备原型尺寸计算工具：http：//www.iaxure.com/share/yxcc/ （个别移动设备可能会有出入）。

除了制作标准原型尺寸，还需要在生成的HTML文件配置中，进行“移动设备”的设置，让生成的HTMl文件“包含视图接口标记”才可以正常显示。

7.web字体设置

当原型使用一些特殊字体时，在没有安装该字体的设备上将无法正常显示。web字体可以较好的解决这个问题。

方法一

需要网络以及在线CSS文件支持，以FontAwesome字体为例。在web字体设置中，单击“+”添加新的配置，勾选“链接到CSS文件”，将该字体官方网站提供的“.CSS”文件地址填入到超链接中即可。这样只要浏览原型时有网络支持，即可正常显示字体。

方法二

支持在线字体和本地字体，以FontAwesome字体为例，图中的src是在线字体代码。

如果是本地字体代码应该为： font-family：FontAwesome

src：url（’fontawesome-webfont.ttf’）format(‘true-type’)

注：使用本地字体需要将字体文件“.ttf”复制到生成的HTML文件中。

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