axure10激活码怎么用(axure免费注册码)

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

axure10激活码怎么用(axure注册码最新使用方法)

知乎——与世界分享你的知识、经验和见解。

这是知乎精神,今天我们来分享一下它的注册与登录界面原型,小小功能却是最常见的应用场景。

axure10激活码怎么用(axure注册码最新使用方法)

可以到知乎网站zhihu.com直接体验一下,然后再来体验一下下面的原型。

我们来拆分一下首页的功能结构。

1、一个LOGO,一个中文slogan。

2、注册页面

输入提示框,未输入时显示的是输入提示,有输入时提示信息隐藏

随机验证码生成

注册校验,如果输入的信息不合法,会在当前输入框的右侧滑动显示提示信息,很有趣

鼠标移动到验证码上,提示可刷新,单击后可生成新的随机码

3、登录页面

登录与注册界面基本没有差别,只是少了姓名输入框,按钮标题变成了登录

4、社交帐号登录列表,包括微信、微博和QQ(这部分没有去做了)

5、交互效果

单击注册与登录链接,在注册与登录界面之间切换,并动态移动蓝色线条表示当前选中的功能。

输入错误时,注册或登录时提示错误信息

登录界面点击“无法登录”时弹出帮助提示

参照上面的功能点说明,开始动手做原型。

一、界面布局

注册和登录,两个功能,界面基本差不多,首先想到的自然是使用动态面板的两个状态来分别表示注册和登录状态,先处理注册界面,然后复制一份界面布局,作为登录界面,稍作修改就可以了。

输入框这里的提示信息有一点点小技巧,因为输入框不支持设置默认提示信息,所以为了能在焦点落入输入框后能仍然看到提示信息,使用了两个部件,一个矩形框,一个文本框,文本框样式设置为无边框且透明的,这样就能 看到后面的矩形框,这样看起来就像是文本输入框的外边框,其实不是它的边框。

axure10激活码怎么用(axure注册码最新使用方法)

给输入框添加事件,在输入的文本的长度大小0.表示有输入文本,这时候就可以设置后面矩形框文本的提示信息为空,如果不断删除文本的内容到空时,则重新设置后面的矩形框文本为提示信息。

axure10激活码怎么用(axure注册码最新使用方法)

其它手机号、密码、验证码都是一样的文本输入框,直接复制第一个姓名的组合输入框后,改改里面的提示信息就行了。

添加注册知乎按钮、社交帐号的图标,这里偷懒了,直接截图了,因为后面不打算处理社交帐号登录部分。

二、随机验证码的生成

随机验证码是显示在一个模糊背景上的四位随机字母和数字,这里只需要从26个大写英文字母和10个数字中随机获取一位字符,四个字符拼成一个随机验证码。设置一个变量,变量的值就是26个大写英文字母和10个数字,使用字符串截取函数及数学的随机函数来获得随机字符:

[[random_str.substr(random_str.length*Math.random(),1)]] random_str=ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

重复以上[[]]之间内四个值就生成了四位随机验证码。

axure10激活码怎么用(axure注册码最新使用方法)

三、“注册知乎”按钮事件

给“注册知乎”按钮添加处理事件,做了简单的规则校验,如果四个输入框都没有输入,则水平滑动提示用户需要如何填写,再次单击输入框时,隐藏提示信息,当然,也是带滑动效果。

axure10激活码怎么用(axure注册码最新使用方法)

四、登录界面

复制登录界面布局,删除第一个姓名输入框,修改登录按钮的事件中各个提示信息文本的初始位置,及移动的目标位置,到这里基本改动不多了。

axure10激活码怎么用(axure注册码最新使用方法)

五、添加“无法登录”的弹出提示

这是个弹出窗口,因此将它放在最外层,设置好布局样式。外边框设置阴影效果,调整阴影大小,模拟阴影边框。添加两个按钮“找回密码”和“使用手机验证码登录”,单击这两个按钮和右上角的关闭按钮后隐藏这个弹出窗口。

axure10激活码怎么用(axure注册码最新使用方法)

显示和隐藏这个弹出窗口使用了淡入淡出效果+移动效果。

axure10激活码怎么用(axure注册码最新使用方法)

大功告成,串起来跑一下看看效果吧!

注:教程里并不会详细说明每个事件里的设置,需要你自己下载源文件研究一下哦,教程的目的主要是提供思路和方法,如果有不清楚的,欢迎找我交流哦。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)

相关推荐

  • ai放射线怎么做(ai放射状图形)

    今天,我们给大家带来一篇Illustrator实例教程,教大家制作漫画风爆炸放射线效果。 首先,我们新建一个画板,绘制一个矩形,填充径向渐变作为背景。 接下来,我们绘制一个圆,填充…

    2023年12月5日
  • ai导入ps保留图层分层(ai怎么放到ps还可以编辑图层)

    最近画图需要使用到AI比较多,总是在AI中做好图的形状然后再导入PS中,但是做完后发现自己保存的图片导入到PS中时竟然没有分层,还得重新比较做,研究过一番后发现AI中可以保存psd…

    2023年12月5日
  • 自媒体行业有前途吗

    自媒体运营主要分为三类,即个人自媒体、企业自媒体和政府自媒体。个人自媒体运营在于快速开通流量主、接广告或者产品等形式的自媒体变现;企业自媒体就是为企业做宣传,为产品做推广;而政府自…

    2024年1月1日
  • 最容易涨粉的短视频素材(容易吸引粉丝的短视频类型)

    好像每一种短视频都很能吸引粉丝,那么自己究竟应该选择哪种短视频做呢? 别急,今天我们就来分享三种容易吸引粉丝的短视频类型,小白们可以参考一下,根据自己的实际情况选择适合的短视频类型…

    2023年10月7日
  • 音频采样频率是什么意思(人耳采样率)

    每一帧音频或视频都有一个持续时间:duration: 采样频率是指将模拟声音波形进行数字化时,每秒钟抽取声波幅度样本的次数。 。正常人听觉的频率范围大约在20Hz~20kHz之间,…

    2023年11月5日
  • 个人自媒体有哪些平台?自媒体6大平台

    随着自媒体的兴起,越来越多的人开始通过自媒体平台来表达自己的观点和想法。然而,对于新手来说,如何选择适合自己的自媒体平台,以及如何管理和分发自己的文章和视频动态是一项非常具有挑战性的任务。

    2023年6月14日
  • 短视频剪辑如何做

    5G时代的到来,让短视频创作成为了一股不可阻挡的潮流。越来越多的人选择用短视频来娱乐和消遣,这使得短视频在未来的发展前景将远超于现在。曾经,拍剪视频是专业人员的专属工作,但现在,一…

    2024年1月17日
  • ai闪退是什么原因造成的

    大家都知道Adobe 2020已经官方发布了 Photoshop 2020(21.0.0.37) Premiere Pro 2020(14.0.0.571) Illustrator…

    2023年12月5日
  • 可以同时多平台发布自媒体文章吗?注意事项是什么

    如何一键发布多个自媒体平台?
    2023-06-14 10:48·乐观凯利4l1

    自媒体平台已经成为许多个人和公司发布内容的主要渠道之一。然而,发布一篇优秀的文章或视频需要耗费大量的时间和精力,而且经常需要手动管理多个平台。如果有一个一键发布多个自媒体平台的工具,将会大大简化这个过程,提高效率。

    2023年6月15日
  • c4d轴心不在物体上(c4d如何将轴心归于物体中间)

    C4D使用对齐小妙招 1.直接修改参数属性 看要对其坐标的值,记下,输入给即将对其的对象,可以选择多个对象一起对齐 2.父子级对齐 将要对齐的对象选中,拖拽给其中一个对象当子级 然…

    2023年12月7日