Axure实例——主流登录/注册原型

1.设置动态面板:


首页 注册/登录页 密码登录页 成功页 试用页

2.首页(动态面板状态:shouye):

  • 登陆/注册


  • 试用一下


3.注册/登录页(zhuce)

  • 手机号/验证码
    文本框元件,元件属性里设置:文本框类型、提示文字、最大长度和隐藏边框,如图:


  • 生成6位随机验证码:
    在动态面板右侧合适位置(如下图)插入矩形,并命名为“yzm”,设置为隐藏:


    获取随机数字的方法不只1种,本次只举一例:
    思路:[[Math.random()]]函数可以获取一个随机数字(0~1之间),[[Math.random()*1000000]]就可以获得一个整数部分为6位随机数的数字,再将其取整[[.toFixed(0)]]。

    操作:项目—>全局变量—>添加全局变量“OnLoadVariable”

  • 登录/注册
    在“动态面板”合适位置插入一个矩形,去掉边框,设置背景色为#6f6f6f,透明度为80%,命名为“tanchuang”,并将其至于对底层。



    然后思考登录/注册时遇到的几种情况:(手机号通过是否为11数字来判定是否正确)

手机号 验证码 输出结果
请输入手机号
非空 请输入短信验证码
填写非11位数字 非空 手机号格式不对
填写11位数字 不正确 验证码不正确
填写11位数字 验证码对 跳转至chenggong,并获取手机号


然后对手机号短信验证码 两个文本框添加用例

4.成功页(chenggong)

  • 设置密码
    操作:项目—>全局变量—>添加全局变量“yonghu”

5.密码登录(mimagdenglu)

  • 与注册页类似
手机号 验证码 输出结果
请输入手机号
非空 请输入短信验证码
填写非11位数字 非空 手机号格式不对
未注册的11位数字 非空 手机号未注册
已注册的11位数字 密码不正确 密码错误
已注册的11位数字 验证码对 跳转至chenggong,并获取手机号


在线预览:http://uzl6up.axshare.com
网盘: https://pan.baidu.com/s/1pLfRafL 密码: npzk

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容