APP-登陆页面-整理分析
因为公司产品涉及到登陆界面的设计,所以调研了解一下现在市场的APP产品的登陆界面和流程都是怎样设计的,有哪几种类型和方式
不是大神,这是初次写文章,肯定和一定有很多不足的地方,出现了问题欢迎随时指正,一定虚心接受,但是遇到观点不和的地方请不要恶意抨击哦,一枚玻璃心,碎起来粘好也是需要花费不少时间。
这一次体验了几款常用的APP产品,有微信、支付宝、淘宝、京东、豆瓣、知乎、网易云音乐、keep、大众点评等等,主要是想看一下目前市场上主流的一些产品的登陆界面以及登陆流程的设计。
通过体验产品,在登陆设计上,我整理了四个比较常见的登陆类型:
独特技术登陆、注册登陆二合一、优先验证码登陆、常规密码登陆
一.独特技术登陆
主要是指一些针对自己产品本身技术特点,所设计采用的登陆方式。主要代表是支付宝和微信。
举例1 支付宝-刷脸登陆
支付宝因为有刷脸支付的技术支持,所以在登陆上,为了方便快捷等原因,给出了最直接的“刷脸登陆”作为最直接重要的登陆入口。
支付宝登陆方式共有三种:1.刷脸登陆 2.账户密码登陆 3.短信验证码登陆,点击“切换登陆方式”,可以用密码或短信验证码登陆。
有意思的是,登陆页面的“注册”入口,在ios系统层级被隐藏在了2级,点击“更多”,出现“注册”入口,一般放置注册控件的底部以及页面有右上角,分别换成了“切换登陆方式”和“语言”。这样设定的原因我猜是因为,支付宝会检测当前是否有账号曾经登陆,有登陆,调用之前的账号数据,展示登陆界面,那么此时的重点在“如何让用户登陆”的问题上,所以右上角,为了方便用户登陆,变成了语言的入口,把“注册”入口调到了二级操作里。
亮点:支付宝的刷脸登陆,真的是超级便捷,省了很多步骤和时间,并且辨识度很快,正面眨眼,基本上在2s内可以完成登陆,操作负荷和成本都很低。
唯一担心的一点就是,这样的刷脸登陆,在便捷的同时是否会有一些安全隐患,因为检测的时间真的特别快,正面一眨眼就马上进入识别登陆了,当然这个要很多极端测试才能得出最终结论,我在这里也只是开了一个小脑洞。
举例2 微信-声音锁登陆
微信共4种登陆方式:1.声音锁登陆 2.微信密码登陆 3.短信验证码登陆 4.用微信号/QQ号/邮箱号登陆(针对切换账号登陆才有此选项)
微信代表是语音,所以,登陆会采用“声音锁登陆”做主要登陆入口放在重要位置。
语音也是比较快捷的一种登陆方式,但是比起刷脸登陆,我认为刷脸登陆的使用场景的效率会更高一些。例如,在测试时,因为在办公室,周围很安静,用声音锁登陆就很不方便,只能跑到走廊楼道里才能用声音锁登陆,但是刷脸的话就没有这个问题。
3.有趣的一点是,使用短信验证码登陆时,输入正确验证码登陆后,会直接跳转到”设置微信密码“界面。让用户设置新的微信密码,手动点击取消才能回到登陆后的微信主界面。
这样做的原因,我猜想,是因为用户登陆微信后出现退出登录的比率相对较小,退出登陆与上次登陆时间相隔较长,如果账号再次登陆选择用短信验证码登陆,有一定概率是因为用户忘记了自己的登陆密码,所以设计这样一个操作,让用户登陆后第一时间先设置微信密码,保证账号的安全性。当然,这也只是我体验时的一个小猜想而已,具体是不是可能也有其他方面的理由。
亮点: 在登陆页面底部,有”紧急冻结“入口,点击进入页面后可以选择冻结微信号,防止盗号或手机丢失,这一点感觉设计很好,微信作为人人标配的产品,涉及了很多方面(信息和资金),账号的安全性尤为重要,这样设计,能在用户出了异常情况时,快速的对自己微信号进行紧急处理,及时止损。
二.登陆注册二合一
举例1 知乎
1.知乎登陆方式:三种方式。1.手机验证码登陆 2.密码登陆 3.使用其他APP登陆,目前支持微信,QQ,微博。
2..知乎采用登陆注册一体的方式,直接展示登陆界面(验证码登陆),检测手机号,已注册手机输入验证码进入账号主页,未注册手机验证后直接注册并自动登陆。这样的设计,可以促进新用户的驻入,因为在一定程度上降低了新用户的注册成本。
亮点:知乎的输入验证码,做了一个单独的界面,给出相应的6个验证码输入框和数字键盘,并且支持发送语音验证码。这样设计,让我觉得整体个流程更加简单舒服,比起在手机号同一界面,给一个输入栏显示,这样的设计减少了单调,让输入页面更加性感,让人更有欲望去输入验证码。
三.优先验证码登陆
举例1 智联招聘
智联招聘:三种登陆方式,1. 验证码登陆 2.密码登陆 3.其他应用快捷登陆
智联招聘的登陆,优先选了验证码登陆的方式。在“登陆”控件左下角有切换“密码登陆”的入口。
优先选择用验证码登陆,这样设计的原因,我觉得是因为现在市场上应用比较多,用户需要记住很多密码,密码登陆的话,需要花费时间去思考原密码并手动输入,而手机验证码,则只需要输入手机号然后把收到的短信验证码数字填写上去,虽然从步骤来看,验证码登陆并没有减少很多步骤(反而多了“获取验证码”),但是从操作成本上,验证码登陆让用户减少思考,操作负荷会比密码输入要低。
亮点:智联招聘的登陆页面整体交互体验非常流畅,界面简洁清晰,动效流畅自然
特别是在页面顶部,显示“欢迎来到智联招聘”以及开头的笑脸会有一个旋转的小动效,即加强了用户当前登陆页面的认知,也涉及了部分情感设计。体验加分。
四.常规密码登陆
举例1 Keep运动
1.keep有三种登陆方式:手机密码登陆,手机验证码登陆(支持语音验证码),其他应用登陆。
2.keep采用了比较普遍的登陆方式,优先采用密码登陆,也提供验证码登陆选项,在登陆的功能上面比较常规。
3.但是keep还是做了一些细节的变动,密码登陆和验证码登陆做了顶部同级展示,而不是像其他常规密码登陆,把验证码登陆的入口放在“登陆”控件的下方,占位较小。
亮点:虽然keep的登陆方式做的相对常规,但是,页面的交互体验我认为做的很好。
1.一致性非常高:整个登陆与注册的界面与整体产品的一致性非常符合,包括在色调和控件上的设计,背景色用了keep主色,控件用了产品的重点色,字体也与产品其他主页面一致,并且字号的主次清晰,这些在细节上的功夫提升了整体的品质,能够加强用户对整个产品的产品认知,体验很好。
2.入口清晰:keep在登陆页面上,没有一开始就把登陆细节页面展示出来,而是做了拆分,先是登陆方式选择,有一个明显清晰的“手机登陆”入口,底部展示其他方式登陆的入口,主次分明,入口非常清晰。选择“手机登陆”,进入到登陆细节页面,可以选择密码登陆还是验证码登陆,字体比较突出,并且入口切换选择设计在了顶部,也是非常清晰,重要的控件“获取验证码”和“登陆“也做了重点色突出,且控件都做的比较大和显眼,减少操作负荷。整体的体验感很流畅,页面做的简洁清晰,虽然做了一个拆分,操作上多加了一步,但其实相比传统常规的登陆界面,操作体验上更加简单明确了。
举例2 网易云音乐
网易云音乐的登陆就比较传统和常规了,登陆方式只有两种1.密码登陆 2.其他应用方式登陆 ,暂不支持验证码登陆。
登陆方面,网易云音乐感觉没有花太多的心思在上面,采用的比较常规的登陆方式和界面,中规中距,目前不支持验证码登陆,但是可以在重设密码哪里,是要发送验证码去验证确认的,所以是有这个服务,但是却没有在登陆里面加入验证码登陆的方式。
在登陆界面,网易云的登陆和注册的比重是一样的,入口控件做了同样大小。
亮点:网易云音乐的登陆界面,有一个”游客试用“的入口,点击可以先去体验产品,这个设计我觉得在用户体验上是个小亮点,给用户在注册前有一个缓冲,不必强制注册登陆后才能体验产品功能服务,也算是在一定程度上提高新用户的注册转化率的方法。
举例3 京东
京东的登陆页面,就是大部分产品经常会用的常规的登陆样式。支持三种方式登陆:1.密码登陆 2.手机验证码登陆 3.其他应用快捷登陆
京东优先密码登陆,登陆控件左右下角,分别是验证码登陆以及新用户注册的入口,页面底部是其他登陆方式选择。
这样的登陆页面设计中规中矩,算是非常常规的一种登陆页面设计了,能满足登陆方面的所有需求,能够流畅使用,但在体验和设计上没有什么大的亮点和魅力值。
总结:
体验了这么多款产品的登陆设计和流程后,发现市场上大部分产品,在登陆方式上,一般提供三种登陆方式:1.密码登陆 2.手机验证码登陆 3.其他应用快捷登陆。
在登陆设计和流程上,大部分产品一般都是采用类似京东这样的常规密码登陆,但是相当一部分产品开始使用优先验证码登陆像智联招聘这样的形式。
在登陆效率上,我认为,刷脸登陆>声音锁登陆>验证码登陆=其他应用便捷登陆>密码登陆
其他应用快捷登陆,比如说使用微信快捷登陆,在正常情况下,确实比较快,但是需要账号之前绑定过相关微信,不然就会出现用微信快捷登陆,登陆后是一个新的账号,或者授权登陆后还需要绑定手机号这一步,所以遇到这种情况,步骤和流程就会比较繁琐,并不见得比验证码登陆要快捷。
登陆板块作为每个产品几乎必备的页面,虽然页数不多,但是涵盖的功能和逻辑流程以及交互体验其实并不简单,我觉得在设计登陆板块时,最好可以跟自己产品的特点相结合,在满足大的商业产品战略的条件下,去进行个性化的一个优化,比如keep或者智联招聘,虽然它们在登陆方式上没有什么大创新,但是在页面设计和交互体验上做了自己的设计和协调,优化了整个登陆的流程,而不是按照市场大多数的版式设计照搬过来。
初次写文,文笔欠佳,初衷只是想分享一下自己这次收集的信息和观点,如果有哪些不对的或是错误的地方欢迎随时指证。
