猿型库：Axure小练习-登录框自动切换

每个应用都有登录功能，而且现在的应用往往都有多种登录方式，比如账号登录和手机登录，今天我们来看如何实现实现登录。

效果查看：http://www.axurestudy.cn/pr/index.html

【需求分析】

1、登录框分成账号登陆和密码登录两个页签；

2、用户点击账号登陆，账号登录页签被选中，并且显示账号和密码输入框；

3、用户点击手机登陆，手机页签被选中，并且显示手机号码和验证码输入框；

【原型设计】

1、拖入一个大的矩形框，作为登录框；

2、拖入两个矩形框，分别命名为账号登陆和手机登录框；

3、拖入一个动态面板，状态面板对应两个状态，一个是账号登陆，一个密码登录；

4、在账号登陆状态，拖入账号和密码输入框；在手机登录框，输入手机号码和验证码输入框；

5、拖入一个矩形框，作为登录按钮；

 

【交互设计】

1、分别设置账号登陆和手机登录的交互状态，当页签被选中的时候，填充蓝色；

 

2、当点击账号登录的时候，动态面板切换到账号登录状态，并且设置账号登录页签为选中，手机登录页签为取消选中；

 

3、同理设置点击手机登录的交互事件；

4、设置页面的载入状态，当页面载入的时候，触发账号登录页签的点击事件；

 

回复【入门】 ，获取零基础Axure快速入门视频教程；

回复【安装】 ，获取安装程序；

回复【练习】 ，获取练习案例；

回复【高保真】，获取高保真原型；

关注微信公众号【猿型库】，获取更多优质Axure资源