交互留学 | Axure图文教程：实例练习（二）

今天马克笔设计留学的May老师将会继续为大将带来有关Axure的图文基础教程，这一期主要讲的是元件的使用，如果小伙伴们对于Axure有其它任何疑问，可以随时和小编联系哦！如果你对于教程有任何建议，请给我们留言吧，会有精美礼品相送哦！

May老师同时也将担任2017年马克笔设计留学作品集特训营的专业课老师，对作品集暑期班感兴趣的小伙伴还不赶紧联系勾搭！！！

本节将以“淘宝登录页面”这个案例来介绍利用动态面板实现页面内交互。

扫码登录页面：

注：左图为一打开网页所展示给用户的页面，中图为鼠标移入二维码时的页面，右图为点击右上角二维码展示给用户的页面。

账号密码登录页面：

效果说明：
一打开淘宝登录页时，展示的为二维码登录页面，将鼠标移入二维码上会出现扫码说明效果，移出时恢复到二维码登录页面。
在二维码登录页上方点击“电脑”，则跳转到账号密码登录页。此时，账号密码登录页中用户名输入框默认选中呈现蓝色，用户可以直接输入用户名而不需要再次将光标定位到用户名输入框。密码输入框呈现灰色，获取焦点时同样呈现蓝色。
在账号密码登录面板点击右上角“二维码”，则跳转至扫码登录页面。此时该页面上部的“密码登录在这里”将消失，其他效果与初始效果一致。

思路分析：
1）登录面板在两种状态下可以通过右上角的“二维码”“电脑”切换
2）二维码登录面板中，鼠标移入二维码时，二维码自身向左移动到一定位置，手机扫码说明图片显示
移出时，二维码恢复到原来的位置，手机扫码说明隐藏。
鼠标移入且悬停在右上角“电脑”上时，二维码变色，移出时，恢复原色。
点击右上角“电脑”，动态面板状态为“账号密码登录”面板，同时，用户名输入框获取焦点，输入框外的矩形边框呈现蓝色、边框变粗。右上角由“电脑”转换为“二维码”，即此时“电脑”隐藏，“二维码”显示。
3）账号密码登录面板中，用户名/密码输入框获取焦点时，用户名/密码输入框选择，边框呈现蓝色；失去焦点时，取消选中输入框，边框呈现灰色（这一部分与上一节千图网的制作相似，可以参照）
鼠标移入且悬停在右上角“二维码”上时，二维码变色，移出时，恢复原色。
点击右上角“二维码”，动态面板状态为“二维码登录”面板，同时，上部“密码登录在这里”消失，“二维码”隐藏，“电脑”显示。

页面元件：

准备清单：
右上角“电脑”（原状态和变色状态）
右上角“二维码”（原状态和变色状态）

二维码登录面板中
二维码
扫一扫
手机说明
安全

账号密码登录面板
新浪微博和支付宝logo

效果制作：
案例中用户名及密码前面的图标都需要用到FontAwesome图标字体。

1.画布中动态面板的编辑（具体操作见图中文字说明）

2.“二维码登录”状态的编辑
按照页面元件中login动态面板二维码登录状态（quicklogin）为“quick login”添加元件。

3.“二维码登录”状态中效果制作
该状态下涉及到的效果为：鼠标移入二维码时，二维码自身向左移动到一定位置，手机扫一扫说明图片显示；移出时，二维码恢复到原来的位置，手机扫一扫说明隐藏。
【注：因为涉及到位置的移动，所以在开始前我们需要确定二维码目前的位置，并计算确定其向左移动后的位置。这里，二维码初始位置为（105,83），向左移动后的位置为（39,83）。】
鼠标移入时，效果制作步骤，如图：