Axure的中级功能

前言：

今天是学习Axure的第二天，今天学习的内容是Axure中一些中级的功能，有助于我们对网页设计页面更好的优化和添加功能。下面我们一起来看看吧。

一、自适应：

  每个电脑、手机和浏览器打开的网页都会随着设备的不同而改变网页页面的大小尺寸，也许在设计者的电脑浏览器上打开是一个整齐有序的页面布局，但是可能在其他的浏览器打开就会打乱布局了，这时候我们就需要使用页面自适应，让我们的页面可以自动去适应不同的电脑、浏览器和手机。

1、拖拽元件进行我们自适应视图的使用

2、首先我们需要在样式区将页面尺寸设为Auto

3、添加自适应视图，新建自适应视图设置，根据你需要在不同屏幕、设备展示页面而选择。

4、在弹出的自适应视图中添加视图

 

5、在预设中会给出许多基本的视图供设计者选择，你也可以自己设置宽高。

这里我选择了三个比较常用的视图。

6、设置完成后，就可以选择你需要对应的视图使用了。 

 

1. Tips：

1. 根据屏幕宽度自适应布局，一般常用 768 phone、768 ipad、1024 Large Dsiplay（最大显示）三种格式。
2. 屏幕宽度>=1024PC 一行放五个卡片

     1024> 屏幕宽度>=PAD 一行放三个卡片

  屏幕宽度<768 phone 一行放一个卡片

二、交互-页面载入时

一般我们在进去页面时第一时间会弹出欢迎页面或者是一些登录页面又或者是广告等。

1. 首先我们要去使用事先下载好的元件：el-dialog拖拽到工作区域，设置你喜欢的样式。2.点击空白区域（即是整个页面）新建交互，选择”页面载入时”——“显示/隐藏”

3.选择元件，选中我们整个模态框dialog，同时鼠标悬停在相应的元件会有预览图。

 4.设置完后，我们只需要选中我们的模态框鼠标右击选择隐藏即可

三、动态页面

点击页面跳转到相应的页面内容，使用的是一个“动态面板”，双击该面板进入设置状态或添加状态，在各面板填入你需要的内容。

点击页面跳转到相应的页面内容，使用的是一个“动态面板”，双击该面板进入设置状态或添加状态，在各面板填入你需要的内容。

1. 拖拽“动态面板”到工作区域

大概设置成

2.双击动态面板进入编辑模式，添加状态，在相应的每个状态都插入你需要的内容。

3.关闭出来后，我们选择上面设置的矩形添加交互事件。

单击-设置面板状态-选择动态面板-状态STATE选择首页，其他页面就设置为相应的页面。

4.预览查看效果，点击菜单即可跳转到相应的页面。

 

 

四、下拉菜单栏

下拉菜单栏：

  点击菜单会自动向下弹出子菜单，并且推动第二个菜单弹出。再次点击收缩菜单。

1. 选择元件大概做成图示模样

 

2.给一级菜单添加交互事件。自上往下选择即可。

3.将子菜单设为隐藏，并使用二级菜单盖住，这样当点击菜单时二级菜单就会被出来的子菜单自动推动下去。

 

五、局部变量

例子：加法计算器。

1.拖拽输入框元件设计面板

2.给予“=”新建交互事件，自上而下选择设置。

 

3.点击fx设置函数。添加局部变量，选中相加的两个输入框

 4.插入变量

 5.在这里就可以看到我们设置好的两个局部变量了。选择他们相加。

6、我们要记得把结果框设为禁用，也就是不可输入。

7、接下来看看效果吧

答案是正确的。

六、全局变量

刚才使用了局部变量，也就是只能在指定的区域内有效使用，接下来我们学习使用全局变量，不同的是他可以在整个页面调用。

1. 老规矩，拖拽元件，随便你选择元件，这里我设置了点赞量的模样元件。

 

2.给予那个大拇指图标新建交互事件。单击-设置变量值-选择目标-添加变量

3.在弹出的全局变量框中添加全局变量，这里我设了个NiceNum。

 4.设置完后，我们再选择函数。

5.编辑文本中插入变量，可以看到我们的全局变量NiceNum，选择。

6、设置函数，让他+1。

7、设置完成后，我们给这个图标继续添加动作，设置文本-选择元件，这里选择我们要展示出来的点赞数。即是num2.

8、在进入fx函数

 

9、插入变量，选择我们的NiceNum全局变量即可。

10.最后我们看看效果吧

随着你点击的次数，数量增加，点击多少次就是多少数量。

总结：

本次学习了页面自适应、页面载入欢迎模态框、动态页面、下拉菜单栏、局部变量（加法计算器）、全局变量啊（点赞数），这些都是Axure中进阶的一下功能，需用这些元件、功能可以更有效地帮助我们设计更丰富的页面。