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

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

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

【需求分析】

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

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

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

【原型设计】

1、拖入一个大的矩形框,作为登录框;

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

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

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

5、拖入一个矩形框,作为登录按钮;

 

【交互设计】

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

 

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

 

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

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

 

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

回复【安装】 ,获取安装程序;

回复【练习】 ,获取练习案例;

回复【高保真】,获取高保真原型;

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值