七.axure使用

七.Axure使用

7.1Axure页面布局

Axure画网页原型：低保真、高保真

低保真：只要框架结构，不需要细节

高保真：要求和网页一摸一样

网页大小结构布局：

分辨率：1024x768、1366x768（用的多）

网页大小：1348（1366-17取偶数）x768

中间内容大小：800-1200（1000使用多），多的留白，两根线之间。

7.2axure基本使用

基本原件：矩形椭圆块、图片、占位符（用于占位）、按钮、标题、文本段落、动态面板（重点）、内敛框架

表单原件：文本框、多行文本、下拉列表框、列表框、复选框、单选按钮、提交按钮

菜单和表格：树、表格、水平菜单、垂直菜单

母板：用于重复的页面头部、底部

7.3动态面板

动态面板基本使用：

一二级标题显示：

1.新建一个动态面板，然后进入一级动态面板

2.添加一个一级标题，再嵌入一个动态面板，进入二级动态面板

3.添加二级标题

4.动作：初始显示一级动态面板，隐藏二级动态面板，鼠标滑入一级动态面板时，显示二级动态面板，划出一级面板时，隐藏二级动态面板

5.操作：

5.1打开二级动态面板，勾选二级标题，勾选隐藏

5.2打开一级动态面板，鼠标划入时，勾选显示，勾选二级标题，勾选向下滑动，勾选设置尺寸，设置显示的大小

5.3鼠标划出时，勾选二级标题，勾选隐藏，勾选向上滑动

5.4打开二级动态面板，点击其中一个二级标题时，跳转另外的网页

注意！！！！！！有两个一级菜单的时后，一级菜单划入的时候，二级菜单移动为负的本身宽度

7.4动态菜单

图片放大例子：

1.新建一个动态面板，然后进入动态面板

2.添加一张图片

3动作：鼠标从图片上滑入时，显示尺寸放大，设置放大尺寸，瞄点选择中心，鼠标滑出图片时，设置尺寸为原始尺寸，瞄点选择中心

图片蒙版文字上滑例子：

1.新建一个动态面板，然后进入动态面板

2.添加一个矩形框，设置隐藏，颜色按需求，透明度按照需求调整

3.添加一张图片，设置成动态面板大小

4.添加一个矩形框，添加两个文本框，编辑文字，将这三个设置成组，命名为描述，设置为隐藏，位置在图片下。

5.动作：鼠标从图片上滑入时，设置蒙版显示动作线性，描述显示动作向上滑动，移动y为负的宽度，鼠标从图片划出时，设置蒙版隐藏动作线性，描述隐藏，移动，线性

图片放大缩小

6.在动态面板下，添加图片，设置为隐藏

7.设置动作，鼠标滑入，显示图片，设置图片大小，瞄点中心，交互随意，鼠标划出，设置隐藏，设置图片大小，瞄点选择中心，交互随意

7.5Axure导航动效

觉唯网站：1.导航条随滑动移动？2.动态面板（图片，遮罩）

1.小模块例子（动态面板强化，方便设置更多的动效，减少工作量）：

1.添加大的矩形框

2.添加动态面板，进入动态面板

3.添加图片，添加矩形（遮罩模块位置y坐标设为负数，让其在图片上不显示）

4.在动态面板中，鼠标滑过图片时，设置移动参数，选择遮罩，设置y为正数，鼠标划出图片时，设置移动参数，选择遮罩，设置y为初始值

2.导航条随滑动保持不变例子（动态面板强化，在动态面板中设置）：

1.添加导航条动态面板，进入动态面板

2.添加导航标签

3.在主页选择导航条控制面板，右键选择固定浏览器，选择左，跟上确定，就ok了

体恤网站：

1.导航条随滑动可变？

1.添加导航条动态面板，进入动态面板

2.添加导航标签，添加图片，添加点击按钮

3.在主页选择导航条控制面板，右键选择固定浏览器，选择左，跟上确定，就ok了

4.在主页什么都不选，然后选择窗口滚动时的动作，添加条件，选择值，选择fx，插入变量，选择窗口中的window scroollY,选择小于，值为50确定。

5.条件选择完之后，可以设置图片，提交按钮大小。

6.同第4步，继续添加条件，设置滚动条回去时的图片，和提交按钮大小

7.6Axure轮播图

轮播图例子：

1.实现轮播效果

1.添加动态面板，改名为轮播图，添加四个面板状态

2.达开每个面板状态，分别为其添加图片

3.添加动态面板，改名为圆圈，添加四个面板状态

4.打开每个面板状态，分别为其添加对应时刻的圆圈

5.在主页面，啥都不选择，在页面载入时，添加动作，设置面板状态，选择轮播图动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置

6.在主页面，啥都不选择，在页面载入时，添加动作，设置面板状态，选择圆圈动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置

· 2.实现点击圆圈，调转到对应的图片，在做好轮播图的基础上进行下面的操作

1.为每个圆圈添加一个热区

2.点击第一个圆圈所在热区时，添加动作，选择动态面板状态，设置圆圈动态面板状态为对应的动态面板状态，设置图片动态面板状态为对应的动态面板状态

3.点击其他中的等待动作，等待1000ms

4.再选择动态面板，设置圆圈动态面板next,向后循环，循环间隔时间，不用添加动作，同样设置轮播图动态面板和圆圈的动态面板一样

5.重复2-4步骤，为其他热区做相应的动作

· 3.实现点击图片，停止在对应的图片上，在做上面操作的基础上进行下面的操作

1.在主页添加一个热区，大小为图片大小，鼠标移入时，添加事件，选择动态面板，选择圆圈动态面板，设置为停止循环，选择图片动态面板，设置为停止循环

2.鼠标移出时，添加事件，选择动态面板，选择圆圈动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置，选择图片动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置

3.将热区向下移动，直到圆圈热区能够选中

4.实现前后按钮

1.在主页面添加矩形，添加文字字段，弄成>，组合，复制一个，改为<

2.选择>组合，点击时，选择动态面板，选择圆圈动态面板，选择next，其余项不选择，然后点击其他中的等待动作，等待1000ms，再选择动态面板，设置圆圈动态面板next,向后循环，勾选循环间隔1000ms，不用添加动作，选择图片动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置

3.选择<组合，点击时，选择动态面板，选择圆圈动态面板，选择previews，其余项不选择，然后点击其他中的等待动作，等待1000ms，再选择动态面板，设置圆圈动态面板next,向后循环，勾选循环间隔1000ms，不用添加动作，选择图片动态面板，选择next,勾选向后循环，勾选循环间隔1000ms,动画不设置

5.实现提交表单内容

1.添加个文本框，改名为username

2.添加提交按钮，点击提交时，选择全局变量，先添加全局变量名字，再设置元件文字，元件文字名字username,再选则跳转新的一个页面

3.新页面添加一个文本改名为labusername，在载入时，设置文本，选择labusername,变量值选择username