然dy1am后复制一份界面构造

时间:2020-03-07 14:09       来源: 未知

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

然dy1am后复制一份界面构造

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ,未经许可,禁止转载。

  你好,请问文本框怎么设置透明啊,为什么找不到呢

  可否提供源文件啊,文章里面没有显示出来,谢谢

  以电商/社交为例,解析不同业务消息功能的关键点

  每天3块钱,补齐互联网专业知识,提升职场竞争力

  一位工作6年多的设计师自述:不要再给自己挖这8个坑了

  从运营到产品到PMO,我是如何实现职能转型的?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

娱乐八卦
频道推荐