Axure rp 8 基本用法图解之一

[Axure rp 8 基本用法图解之一]

(Axure 简介)
Axure快速产品原型设计工具，可以用来制作高保真原型图和流程图。Axure rp 8的下载和安装请访问官网地址：http://www.axure.com。
Axure与墨刀的区别：
墨刀是一款在线设计编辑原型的工具，内置了很多移动端的素材库，可以免费3个项目，3个以后就需付费，特点短平快，上手非常容易，适合频繁迭代的产品，优点协同办公效率比较高。
Axure功能齐全，交互方式多样，模板资源最丰富，适合在制作PC端软件，有破解版或免费试用1个月，可以离线工作。缺点吗？就是上手难一点，不过也比较简单。
总结：通常轻量级移动用墨刀，PC端产品用Axure。
推荐一个获取图标资源的地址：https://www.iconfont.cn 里面有丰富的图标。

1,单选按钮组

[Axure rp 8 基本用法图解之一]

单选按钮，顾名思义一般情况下只做单选。但是，有时会有多个单选按钮在一起，只能选择一项.如下图所示：

实现步骤如下：
第1步，在元件库里找到单选按钮，拖曳2个到编辑面板上，并修改文本内容分别为“Man”和“Female”，并将Radio Butto的名字分别命名为M1和F1。

第2步，设置默认值,假设默认为“Man”，选中“Man”选项鼠标右键后弹出的菜单中选择“Selected”，如下图所示：

第3步，设置每个单选按钮选中和取消选中的用例，单击“Man”，在右面的交互方法里双击“OnClick”，在弹出的点击事件菜单中，选择“Selected”，勾选对应的元件名（如M1）,把其状态值改成“ture”,按如下标注步凑操作。

“Female”按同样的操作
第4步，设置选项组名称
将这2个radio button都选上，鼠标右键，选择“Assign Radio Group”，将组名称设置为“SEX GROUP”。

这样在右边的交互方法里就能看到组名称，如下图所示：

第5步，点击Preview按钮，预览该设计原型页面，并点击单选按钮，结果是只能选中一个，如下图所示：

2,开关切换按钮

[Axure rp 8 基本用法图解之一]

第1步，在元件库里找到Elipse椭圆元件，拖曳1个到编辑面板上，改变其形状和大小，找到Box1元件，拖曳1个到编辑面板上，改变其形状和大小，调整位置，同时选中这2个元件，鼠标右键，选择组合，将组名改为off(名称可随便，只是为了区别).如下图。

第2步,复制第1步的组合件，更改填充颜色，将组名改为on. 背景颜色的设置按图标1和2所示。

第3步,同时选中on和off组件. 位置重叠。
第4步,同时选中on和off组件. 鼠标右键，点击“Convet to Dynamic Panel”转换成动态面板，更改面板名称为“mydp”.
第5步,同时选中on和off组件. 鼠标双击，添加面板的2个状态，分别取名为on和off。如有更多状态，可点击“+”继续添加。

第6步,先单击“PROPERTIES”,再双击交互方法里的Onlick。

在弹出的菜单里添加触发条件，点击“Set Panel State”，再点击“Add Condition”。

点击“Add Condition”后进行设置条件如下图所示

设置触发动作，如下图所示：

第7步,重复第6步的方法，设置CASE2的动作，如下图所示，这次的状态值应该与第6步的状态值不一样。## 标题

第8步，预览该设计原型页面，并点击按钮，结果如下图所示：

3,热区Hot Spot的使用

[Axure rp 8 基本用法图解之一]

热区实现点击之后跳转页面的功能
第1步，在元件库里找到Hot Spot元件，拖到编辑区，移动到需要的地方，改变区域大小。

第2步，选中热区，双击交互方法里的Onlick,在弹出的菜单里点击“ Open Link”，按标注2所示选取要跳转的页面。

第3步，页面跳转过去后，如何返回呢？
在跳转后的页面，选择需要返回的地方，重复上述步骤1和2，在步骤2时直接勾选“Back to previous page” 即可。
另外，如果要跳转到外部网页，也可勾选“Link to an external url of file”,然后填入外部的URL地址即可。

4,播放本地视频

[Axure rp 8 基本用法图解之一]

第1步，在元件库里找到Inline Frame元件，拖到编辑区，移动到需要的地方，改变区域大小.
第2步，选中刚拖入的内联帧，选中交互方法（标注1），将”Inline Frame Name”改成“AVplay” ，在Preview Image勾选“video”, 鼠标滚动到“Frame Taget”,点击它，

在打开的”Link Properity”页面勾选勾选“Link to an external url of file”，填写本地视频文件名Wildlife.mp4(相对路径，格式为mp4). 如果是链接网络视频，直接在标注2处填上网络视频的URL即可。

视频文件的路径设置如下图所示：
点击“Publish”, 点击“Generate HTML File”,

弹出的页面按如下操作：
1，选取输出HTML文件的路径，本地视频文件必须与这个路径一致。
2，设置对应的浏览器类型
3，点击“Generate”，产生对应的HTML文件
这样设置就完成了，preview后提示发现无法找到视频文件，注意，此种方法无法使用preview来播放视频，只能进入到上面设置的路径，直接打开html文件来自动播放视频。

5,页面滚动功能的实现

[Axure rp 8 基本用法图解之一]

大多时候，一个页面显示不完全内容，因此需要滚动，使用Inline Frame实现。
如直接使用”Edit List Box”，添加ITEM后，间距无法调整，这里可借助“Table”表格来实现控制间距大小。
第1步，在元件库里找到“Table”元件，拖入编辑器，调整所需的行列，并写入相关的文本。
第2步，在元件库里找到“Inline Frame”元件，拖入编辑器，调整大小。
第3步，将上面俩个元件摆放到同一位置，将“Inline Frame”元件放到下层（右键后在order里send to back）。
第4步，同时选中俩个元件，鼠标右键，点击“Convet to Dynamic Panel”转换成动态面板即可。