Axure教程:一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博、微信、QQ、支付宝登录页面,注册页面,用户协议和隐私条款。该原型使用简单,交互完善。喜欢该原型的小伙伴们可以在评论处给我留言哦。
原型预览及下载地址:
https://axhub.im/pro/0040d2844250a334
效果图如下:
制作方法
1. 本机号码登录页
登录首页为本机号码登录页,里面有交互如下:
- 本机号码一件登录,鼠标单击时,设置动态面板跳转到首页;
- 其他手机登录:鼠标单击其他手机登录时,设置动态面板跳转到其他手机号登录页面;
- 注册:鼠标单击注册按钮时,和上面其他手机登录一致,登录和注册页面一致,方便客户注册;
- 账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页;
- 三方登录:鼠标单击不同图标(支付宝、微博、微信、QQ),设置动态面板跳转至对应页面。
2. 其他手机号码登录页面
其他手机号码登录页面,也是注册的页面,里面有交互如下:
- 手机号码输入框获取焦点时,弹出密码键盘,密码键盘制作方式可以参考我之前的文章《axure教程:手机键盘》。
- 获取短信验证码按钮默认禁用,当验证到手机号无误时,启用,启用后,鼠标单击时设置动态面板跳转至短信验证码页面。
- 手机号码判断方式,我们判断国内的手机号码,做了一个简单的验证,第一,输入必须是数字,第二,字符长度为11,第三,首位数是1。
- 刷脸登录:点击刷脸登录按钮,设置动态面板跳转至,刷脸登录页面。
- 三方登录:鼠标单击不同图标(支付宝、微博、微信、QQ),设置动态面板跳转至对应页面。
- 账密登录:鼠标单击账密登录时,设置动态面板跳转到账号密码登录页。
- 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
3. 短信登录页面
短信登录页面,里面有交互如下:
(1)模拟生成短信验证码,利用random函数生成6为随机验证码,具体公式:[[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]][[Math.floor(Math.random()*10),1]]
(2)设置动态面板状态改变时事件,即动态面板进入该页是,弹出显示短信验证码,5秒后自动隐藏短信验证码。鼠标下滑时,弹出显示。
(3)通过键盘输入验证码,原理和上面手机号码输入一致,输入框一定要是数字框,然后控制6位数字,输入6位数之后,需要进行判断,输入的6位数和验证码一致,则登录成功,设置动态面板跳转至首页;如果输入的6位数和验证码不一致,则清空输入的验证码,弹出提示,验证码错误。
(4)重新获取验证码,每次获取验证码之后,有60秒倒计时,60秒后,显示重新获取验证码按钮,点后后,重新发送并显示验证码。倒计时用动态面板做,设置2个state不断循环,循环间隔为1s,状态改变时,设置文本,target.text=target.text-1,if target.text>0。
(5)复制:点击复制按钮:设置输入的6位数=验证码。
(6)返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
短信验证码输入错误时:
短信验证码输入正确时:
短信验证码复制黏贴功能:
短信验证码60秒后重新发送:
4. 人脸登录页面
这里做了一个简单的模拟页面,交互如下:
- 在其他手机登录页面通过点击人脸登录,如果手机号码输入正确,设置动态面板跳转到人脸登录页;如果输入不正确,提示重新输入。
- 进入页面后会有动态提示文字,例如,没有识别到人脸等。设置文字多少秒后显示即可。
- 识别失败:等待n秒后,会弹出提示,识别失败。点击再来一次按钮,设置动态面板重新进入该页面即可,点击退出,设置动态面板回到之前的页面
- 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
没有输入手机号码或者手机号码不正确时:
5. 账密登录页面
账密登录页面,交互如下:
- 账号和密码输入框获取焦点时,弹出密码键盘,密码键盘制作方式可以参考我之前的文章《axure教程:手机键盘》
- 密码输入框设置2个,可转为动态面板。一个可见,一个可见,点击右边的显示、隐藏密码的按钮时,分别显示对应的输入框即可。这里需要注意,任意一个输入框文本变化时,需要设置另外一个输入框与该输入框的文本一致。
- 账号和密码验证:设置一个中继器,里面有两列,一列账户名、一列为密码。点击登录按钮后,进行账号的帅选,如果中继器可见数据条数为0,显示错误弹窗;如果不为0,对比中继器密码和输入密码是否一致,如不一致,显示错误弹窗,如果一致,设置动态面板跳转至首页。
- 登录按钮:默认禁用、如果账户输入框和密码输入框均不为空,则启用。
- 验证码登录:鼠标单击验证登录码时,设置动态面板跳转到其他手机号登录页面。
- 注册:鼠标单击注册按钮时,和上面验证码登录一致,登录和注册页面一致,方便客户注册。
- 返回:鼠标单击返回按钮时,设置动态面板回到之前的页面。
账号密码错误时:
账号密码正确时:
6. 三方登录页面
支付宝登录页面,交互如下:
- 点击支付宝图标时,设置动态面板跳转至支付宝登录页面。这里需要做一个相识的页面。
- 点击授权按钮,设置动态面板跳转至首页。
- 点击用户协议,设置动态面板跳转至支付宝用户协议。
- 返回:鼠标单击返回或暂不授权按钮时,设置动态面板回到之前的页面。
微博登录页面
逻辑和支付宝登录页面一致:
微信登录页面
逻辑和支付宝登录页面一致:
QQ登录页面
逻辑和支付宝登录页面一致:
7. 用户协议和隐私条款
鼠标单击用户协议按钮时:设置动态面板跳转至用户协议页。
鼠标单击隐私条款按钮时:设置动态面板跳转至隐私条款页。
返回:鼠标单击返回按钮时,设置动态面板回到之前的页面
今天的分享到这里就结束了,有问题的小伙伴们可以在下方评论处给我留言哦,我们下期见。
Axure教程:一个通用的app注册/登录页相关推荐
- 云闪付持卡人认证信息失败_云闪付app注册登录常见问答
云闪付app注册登录常见问答 1.如何注册成为云闪付App用户? 持卡人可通过以下方式注册成为云闪付APP用户: (1)通过持卡人服务网站(www.95516.com): (2)通过云闪付App. 通 ...
- APP注册登录那点事
转载地址:http://www.woshipm.com/pd/206667.html?utm_source=tuicool APP注册登录那点事 2015/09/21 阅读 3.2万 评论 6 收藏 ...
- 设计灵感|APP注册登录页面的设计形式
注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注 册登录页面弄的想怒摔手机,最终都 ...
- 以小见大:如何设计注册登录页?
一个合格的注册登录页面,应该是具有清晰的操作流程. 朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃.注册登录流程能让用户扭头就走,也能让产品获得新 ...
- UI设计灵感|挑战经典!不一样的注册登录页
登录注册页对于大部分产品来说都是比较基础的模块,它看似简单却与产品功能与用户使用场景密不可分,受到产品定位.用户操作.业务逻辑等不同因素的影响.登录注册页是链接用户跟产品中间的纽带,连接产品与用户.不 ...
- 产品策划三:App注册登录系统策划方案
注册登录系统,是app最基础的系统模块之一.账号id是用户的唯一标识,基于这个账号记录用户行为,为用户提供各种各样的个性化服务.没有这个账号系统,后面的一切都是空话.当然,如果你是做一个纯粹的工具,比 ...
- 产品策划四:App注册登录系统策划方案
注册登录系统 注册登录系统,是app最基础的系统模块之一.账号id是用户的唯一标识,基于这个账号记录用户行为,为用户提供各种各样的个性化服务.没有这个账号系统,后面的一切都是空话.当然,如果你是做一个 ...
- Facebook APP 注册 登录
一.前言 1.说明Facebook App 注册创建流程. 2.使用JavaScript.Java抓取Facebook会员信息. 3.一些常用Facebook常用帮助链接. 二.创建Fa ...
- 鸿蒙OS应用开发之——实现APP注册登录功能
一.功能简介 注册登录页面作为基础模块,具体包括了注册.登录.登录后界面的策划设计. 1.1注册 注册包括用户名,密码,确认密码三个流程,密码现在是明码显示的方式.这个模块中设置了判断"确认 ...
最新文章
- 分布式概念-中心化副本控制机制
- PHP自动搜索框post,php搜索框提示(自动完成)实例代码_PHP教程
- bitnami-redmineserver迁移
- matlab 连续显示,请教下MATLAB一个问题啊 我想检测一行数据里面出现连续出现0的次数,...
- 【vue】vue.config.js
- Lintcode99 Reorder List solution 题解
- VTune工具使用心得
- 矩阵手册(四)—— 增广矩阵
- 2011蓝桥杯--神秘的三位数
- 分享一款国外的优化IE9浏览器的软件感觉很好用兼容win7
- Kali Linux进阶篇:Nmap扫描网络空间存活主机技巧
- java混淆器最好_使用混淆器,保护你的java程序
- 溢出的文字如何省略号显示
- 电磁波传播matlab程序,电磁波在不同介质中传播的 MATLAB 仿真教学实践论文
- PostgreSQL的hook机制初步学习
- MyExcel.net 使用手册
- 使用HEXO搭建个人博客时遇到的问题日志 PART.1
- python怎么导出_Python 数据分析(三):数据的导入导出
- 数据库JDBC(知识点整理)
- 410款INTEL CPU详细技术资料速查表
热门文章
- 宝洁面试经典八大问题(附答案范例)
- K8S 自动部署工具
- Unity 动态切换天空盒
- uniapp使用 Ucharts2.0绘制图形
- Kotlin - 静态方法
- Educoder--Java面向对象(第四章)String类
- Java源码阅读学习后的浅析和感悟(JDK篇)(持续更新)
- 密码键盘常用(加解密,链接,MAC,PINBLOCK)算法介绍-资料整理
- c语言实验报告范例,C语言实验报告范例.doc
- Paper intensive reading (十一):Nuclear localization of Zika virus NS5 contributes to suppression