简单使用Axure(1)

一.认识Axure

        原型：在软件开发中，一个原型是产品或者数据系统的一个基本实用模型。软件原型包括但不限于：功能、交互、UI

        软件开发工程中原型的地位：便于快速沟通，明确需求。

        Axure RP Pro能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。

    Axure软件，原型文件后缀名是*.rp。当与甲方沟通时，可以有以下三种方式来展示效果给甲方：

• *.rp文件

• 菜单栏-文件-导出图片

• 菜单栏-发布-生成HTML文件

Axure中文学习网：https://www.axure.com.cn/ 

1.菜单栏

 文件有新建、保存、导入、导出为图片等常用功能。

编辑有剪切、复制、粘贴等常用功能

视图有显示网格等常用功能

布局有置于顶层、置于低层、上一层和下一层、对齐等常用功能

发布有生成原型文件、预览等常用功能

2.工具栏

 工具可以选择选择模式来进行多选和单选，可以通过连接来使用连接线。

插入功能中的钢笔是较为常用的功能，可以通过钢笔画出多种样式。

 3.元件库

将元件库中的组件拖动到工作区域中使用

小案例

通过方框、文本框、标签、复选框、单选按钮、下拉列表框即可组合成一个表单。

 双击下拉列表框显示即可添加需要的数据到下拉框中，打勾即为默认选中。

 

可以通过网络下载其他元件库，元件库后缀名为.rplib。通过点击+号选择后缀名为.rplib的文件便可以添加新的元件库。

4.母版

作用：风格的统一、元件的复用

 将需要复用的组件多选并点击组合，然后右键创建母版输入名称，即可创建模板成功。

 同组件一般拖到工作区域即可使用。在母版中的设置将会同步到每一个模板当中。

5.自适应

 点击添加自适应视图，选择需要的自适应视图即可。

通过点击不同的自适应视图将会显示不同的网格覆盖区域。

当组件位于灰色区域时将会无法显示在预览中。

6.交互

通过组件设置成需要的样式，点击组件选择交互，新建交互，选择交互的事件和效果即可实现交互事件。

小案例

 

将组件设置成需要的样式，将其组合起来右键设置成隐藏。点击工作区域空白处即可设置交互事件。设置隐藏成功时，隐藏的组件将会呈现黄色。

 

当载入页面时显示组合组件，动画效果为淡入淡出，时间为1s。即可实现页面载入时通过动画效果显示隐藏的组件。

左边的白按钮实现点击跳转

通过设置鼠标单击事件，设置动作，链接到所需要的本地文件选择打开在当前窗口，即可实现当前窗口的页面跳转。（选择链接到外部网址时，有些网站是不能使用第三方打开的）

右边的蓝色按钮

 可以设置成隐藏面板的按钮，设置鼠标单击事件，单击时隐藏组合，选择动画效果和动画时间，即可实现点击按钮隐藏面板。

 设置一个按钮，跳转到ElEMENT UI，设置交互事件鼠标单击事件，选择打开链接事件，输入需要打开的网址，即可实现点击按钮跳转到外部网站。

动态面板的切换

在组件库中拉出所需要的组件，进行布局。

双击动态面板，点击状态1旁边的小箭头 即可新增状态。通过点击不同的状态，切换不同的状态面板。在状态1中放入方框输入状态1，在状态2中放入方框输入状态2。

 

给状态1按钮设置交互，设置鼠标单击事件，选择设置动态面板，目标元件选择动态面板，状态选择状态1，点击完成即可。（也可以加入想要的动画效果）状态2按钮同理。接下来即可在预览中实现点击按钮通过动态面板来展示不同的页面。