登录界面之Axure原型制作

*****登录界面制作步骤*****

1、背景色：需要设定的背景色不知道色值，可以使用截图工具截取一小块粘贴到axure页面，
点击页面样式中的背景色左上角的取色器点击一下该色块，即可将背景色全部填充为需要的背景色。
2、logo位置：直接使用截图工具测量一下logo距离浏览器顶部的距离是多少，在页面中点击图片元件，
拖到页面中，选中图片即可设置菜单栏内Y的值。在元件属性一栏中，导入logo图片即可。
【裁剪工具】的使用：可以使图片的棱角变的更清晰
【分割图片】的使用：可以分为上下、左右的两部分和东南西北的四部分三种情况。
【固定边角范围】：勾选该选项后会有四个三角，将所有三角向边框外部拉伸，
将线条拉了全部覆盖图片，再来修改图片的大小可以使修改后的图片不会失真。
3、form表单：测量宽高和距离顶部的大小，使用矩形元件作为form，注意调整边框的颜色
【文本框】：光标较短小，可选中文本框后设置字体可改变闪烁光标的长度

4、元件属性中的【元件提示】即可提现提示框的效果

5、添加交互用例时，用例的执行顺序是由上至下的

6、文本框获取焦点问题：
1）当点击文本框前面的文字说明“用户名”时，光标自动定位到对应的文本框内：
给“用户名”添加交互用例：点击【鼠标单击时】--》【获取焦点】---》【对应的文本框名字】

2）打开页面时，光标自动定位到登录表单的第一个输入框即【用户名】的文本框：
【页面交互】---》【页面载入时】----》鼠标右键【添加用例】---》【获取焦点】---》【焦点在name上】
以上步骤即可实现刚打开登录界面时光标就定位在用户名的输入框内。
3）文本框的【元件属性和样式】中类型有多种，number、日期、E-mail、密码等各有各的输入特点。
其中较有特点的是【文件】，文本框属性设置为“文件”后有一个“选择文件”的按钮，单击按钮可以打开
一个选择文件的窗口。

7、按钮的条件【登录按钮】
选中登录按钮---》【鼠标单击时】----》【添加用例】----》【新增条件】
若是需要设置多个条件，可点击最右侧的“+”即可添加更多的条件（只有当用户名和密码的文本值都
为空时，点击登录按钮光标才会回到name文本框）
【满足】为“全部”时意为“and”;【满足】为“任意”时意为“or”即两者满足其一即可

*****条件********

选中要设置条件的元件---》【鼠标单击时】----》【添加用例】--》【增加条件】即可设置条件
注意：1、添加用例且增加条件的部分都是执行的if后面（即成立且为true）的语句；
2、添加用例但是没有设置条件的则是执行else的语句（即与if对立的语句）；
3、条件的执行顺序是从上至下。
4、当添加用例但是没有设置条件的用例切换为（if True）时，则将无条件执行该用例，
并将之前的所有用例覆盖，即使该用例在最后面也是如此。
5、要想用例无条件执行且不会覆盖之前设置好的条件用例，则需要在被操作的元件之后复制
一个与之相同的元件，且只设置一个不加条件的用例，并把其转换为（if True）。
6、【元件】-【设置文本】-【设置文本为】-【富文本】--【编辑文本】即可编辑文本样式

*********深入设置登录框的交互效果***********

1）当用户名和密码都不输入就点击登录：
则提示用户名和密码不能为空；且光标定位在用户名文本框内

2）当输入用户名，不输入密码就点击登录按钮：
则会提示密码不能为空，同时光标定位在密码的文本框内

3）当不输入用户名，直接输入密码，就点击登录：
则提示用户名不能为空，同时光标定位在用户名的文本框内，且清空密码文本框。

4）用户名和密码都不为空时点击登录，
则提示登录验证。

****使用变量和公式实现登录验证功能*****【用户名和密码都输入了】

1、用户名不正确，密码正确，提示用户名不存在
提示：用户名不存在，且清空用户名和密码的文本框并将光标定位到用户名的文本框。

2、当用户名正确，密码不正确，点击登录
提示[[用户名]]的密码不正确，同时清空密码文本框内容并将光标定位到密码输入框。
此处有局部变量，获取用户名的元件文字，即用户名的文本框的值

3、两者都正确则跳转登录成功页面

方法有两种：不同点在于条件设立时使用的方法不一样

法一：通过【元件文字】来设置值。

法二：通过添加全局变量【变量值】来一一对应。

******动态面板*******

1、定义：能够实现多种动态效果的多空间元件容器。

1）拖动动态面板到页面中，双击打开动态面板，双击打开state1即可看到动态面板是
一个带有虚线的编辑区，透明的但是确实存在的多空间元件，（即生成html元素在
浏览器中什么都看不到）

2）动态面板内部可以放多个基本元件，且可无限放大或缩小

3）若添加了多个状态，即state2、state3，一般情况显示第一层（state1）内部的所有元件，
若想显示第一层之外的元件则在【元件管理】内调整状态的层级，点击向上箭头即可

2、实现效果

1）表单上方的提示元件在没有点击登录按钮之前是没有显示出来的：
选中所有要操作的元件，右键【转换为动态面板】。菜单栏勾选【隐藏】取名tishi，

2）点击登录按钮后表单整体往下移，且上方显示提示元件内容
首先将要往下移的元件整体向上移并与提示元件持平。切记：必须持平否则在整个表单在往下移
的时候会出错。修改登录按钮的交互效果，双击有提示的用例，找到【组织动作】内有提示的文本，
【元件】下【显示/隐藏】---》【更多选项】--》【推动元件】--》【确定】。

3、使用动态面板须知：【推动元件*】

1）错误操作：当多个元件需要同时操作且显示一样的效果时可以使用动态面板将元件包含起来
（比如：将所有的提示元件内容使用等同大小的动态面板包含起来。
这样生成html时就是隐藏的。）。但是有个弊端：提示元件设置的有提示文字，要是但是会使设置
的文本提示失效，即（设置文字于“不明”xxx 也就是找不到）

2）正确操作：选中所有要操作的元件，右键【转换为动态面板】，菜单栏勾选【隐藏】即可。

3）修改登录按钮的交互效果，双击有提示的用例，找到【组织动作】内有提示的文本，【元件】
下【显示/隐藏】---》【更多选项】--》【推动元件】--》【确定】。
注：此时转换的动态面板大小与元件一样大，要是直接下移会与表单连在一起，所以需要调整
动态面板的高度，这样下移就能与表单有一定距离

4）切记：在整个表单在往上移的时候必须与提示元件持平。否则会出错

*******元件的移动效果*******

1、当用户名或密码其中之一没有输入，或者两者输入了但是验证不通过的时候点击登录按钮，表单都会
左右抖动：
选中整个表单元件，右键转换为动态面板，此时登录按钮已经无法操作，需要双击打开该面板，
再次打开状态1才能操作按钮

2、左右晃动的效果实现原理：【线性*】

1）绝对位置：选中元件后菜单栏里 X 和 Y 的值就是该元件的绝对位置
2）相对距离：将某元件向左移动距离N,相对距离为：X-N;(负值)
该元件向右移动距离M,相对距离为M-X（正值）

3）实现左右晃动的动画为【线性】【相对距离】
首先将元件向左移动N(负值)，则向右就要移动|2*N|（2倍的N加上绝对值为正值）,
反复操作几次后，最后一次需要返回到最开始的位置，所以一定是第一次移动的值N(负值)

4）时间单位：毫秒，值越小表示时间越快

5）注意交互用例的顺序，用例是从上至下执行的，表单抖动是在提示信息显示后并整体向下移动时
才开始左右抖动的。

6）实现左右晃动的动画为【线性】【绝对位置】坐标为（X,Y）
X值：元件左移M（实际值为：X-M）,向右移动N(实际值为：X+N)；
Y值：元件下移的值H+元件原来的坐标值Y；实际值为：H+Y