Axure制作验证码登录页面原型怎么做?

如题所述

移动端产品经理经常需要绘制APP各页面的原型图,在绘制页面原型图时要注意什么?下面为大家分享了一个使用Axure的实用验证码登录页面的原型,不要错过~学Axure,先学基础再学交互最后就是动手实操!在,就可以获取到专业全面的Axure自学视频课展开综合学习~专业讲师教学,知识点满满,学会可自主实操设计原型~

Axure制作验证码登录页面原型教程:

手动制作或挑选使用手机背景。以下为小编手动绘制手机背景:

绘制任意跳转首页面,以下为小编手动绘制首页:

完成准备后将首页置于空白页下方。

选择两个文本标签,输入“输入验证码”、“验证码已发送至手机+86185____9905”等文字,可根据需要调整文字内容、大小,布局,色彩等。

文字下方放置6个大小相同的文本框及横线(文本框需分别命名,以便交互时区分)。示例如下:

制作一个验证码弹窗,需注意验证码6个数字部分需加不同矩形框且分别命名(以便交互时区分及随机抽取数字使用)。示例如下:

给验证码弹窗“复制验证码”按钮制作交互(文1等名称是手机背景页面六个文本框的命名,该步骤是为了将验证码弹窗内数字验证码获取至手机页面文本框内,等待是为了有延迟效果,设置页面状态是为了六个文本框验证码都加载完成后将手机首页置顶显示),交互如下:

设置全局变量random_str,该步骤是为了等会验证码弹窗自动抽取数字。

点击验证码弹窗,给6个验证码框增加交互动作,交互动作含义为在页面载入时random_str是0123456789,然后6个验证码文本框分别抽取其中1位数字。抽取的变量为[[random_str.substr(random_str.length*Math.random(),1)]]。

选择一个按钮输入“获取验证码”文字调整大小后,将模块设置为动态面板,在动态面板内增加一个state2,将按钮复制粘贴至state2并修改文字为60(本文中state页面名称错误,理解用意即可)。

在“获取验证码”按钮设置交互动作,该交互是为了点击获取验证码按钮后弹出验证码弹窗,并切换动态面板至倒计时页面,交互如下:

在“60”state页设置交互动作,该交互动作是为了让60每秒向后倒计时-1,=0时文本变为重新获取,点击重新获取后文字变60继续循环。

载入时情形1为:

载入时情形2为:

单击时情形1为:

完成以上操作后,将手机首页输入验证码文本框框线取消,即可完成操作

以上就是关于“Axure制作验证码登录页面原型怎么做?”的全部内容分享了,怎么样?你学到了吗?Axure学习讲究方法与技巧,如果你觉得你的理解学习能力强,不妨继续浏览更多Axure相关文章~当然,如果你需要更加系统精准地学习Axure,那么我建议你选择我们的Axure自学视频课哦~最后点赞、留言+收藏,下次学习更方便哦~

温馨提示:答案为网友推荐,仅供参考
相似回答