七.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