APP开发中登录注册的设计详解

2021年07月23日 4593

移动互联网流量红利时代已一去不复返,无论是通过一波活动,一次营销或是若干个烧钱渠道带来了不菲的流量的,可是其中却有不少的流量没有转化成真实的用户,一款APP,不乏实现流量增长的方法,但如何留住他们?我们知道其中一个登陆注册就不知挡住了多少用户,基于此,现在就让我们从APP的登陆注册说起吧。






注册和登录,是APP产品设计中最基本,最重要同时也是最繁琐的一环。看似简单,却与相当多的产品功能用户使用场景交织在一起,受到产品类型、用户定位、业务逻辑、使用场景、用户操作等不同因素影响。绝大多数的网站已经放弃了复杂、繁复的注册流程,将用户可能会遭遇障碍、引起用户反感和烦躁的部分去除,尽可能简单的让用户完成注册和登录流程。当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验。



常用的6种登录注册模式
      Sign Up Pattern


1
手机号+密码注册和登录

优势:节省成本,只有注册时获取一次验证码,设置密码,注册成功后再次登录就无需获取验证码了;


劣势:注册和登录各是独立的页面和功能,容易忘记密码;


2
手机号+验证码注册和登录

优势:手机在手,能接收验证码就能登录;


劣势:注册和登录各是独立的页面和功能,手机验证码量比较大的时候,成本较高,每条短信4-6分钱一条;


3
微信等第三方注册和登录

优势:无需手机号,无需验证码,点击即可登录,登录和注册是同一个功能,有则登录,无则注册;


劣势:第一次需要先授权,获取手机号,绑定等操作。可对接的第三方包含:微信,支付宝,QQ,微博,钉钉,淘宝


4
微手机运营商一键注册和登录

优势:点击一次授权即可登录,登录和注册是同一个功能,有则登录,无则注册;


劣势:挑选运营商,有成本,每次授权3-4分钱,手机使用WIFI网络是无法登录,必须使用手机运营商网络


5
小程序授权注册和登录

优势:无需手机号,无需验证码,点击即可登录,登录和注册是同一个功能,有则登录,无则注册;


劣势:第一次需要先授权,获取手机号,绑定等操作


6
邮箱+验证码注册和登录

优势:节省成本,在短信不发达地区可以使用,邮箱普及率高;

劣势:邮箱容易忘记,需要打开邮箱去查看验证码,不太方便


劣势:邮箱容易忘记,需要打开邮箱去查看验证码,不太方便

邮箱验证码基本使用在国外项目中,国内很少采用


一般咱们开发时会选择2种以上的模式组合,例如最常用的组合是第一种+第二种+第三种,还可以第四种+第三种,第二种+第三种等组合。



登录注册模式的设计
   Sign Up Design


文从登录注册的流程方式、交互体验、设计细节等方面,分析登录注册这个流程的设计要点。最基本的板块包括“登录”、“注册”、“密码找回”这三大功能。其中每一项也包含有多种不同的方法。今天我们就着重说一下第三方登录的流程和要注意的事项。


1. 登录注册账号

账号有无格式的要求,如果只是手机号码,前端是否需要验证手机号码的有效性?

手机号码为纯数字,是否弹出纯数字键盘方便用户快速填写及避免用户来回切换?

手机号码的数字如何呈现?哪种格式?


2. 登录注册验证码

验证码的格式,是四/六位数字验证码,还是英文+数字验证码,英文是否区分大小写?

按钮默认显示状态、用户输入信息后按钮颜色变化效果,该如何设计比较好?

倒计时如何设置?button还是label ?用哪个好?为什么好(好在哪里)?如何设计?

验证码的倒计时一般默认采用60秒的居多,但是一般验证码的有效期为5分钟。之所以设置60秒是因为在绝大多数情况下,60秒内验证码是能够发出的,如获取不到,让用户所等待的时间又不至于太长,降低用户焦虑,提升体验。


3. 登录注册密码

最少和最多字符设置,提示文字为“位”还是“字符”?如“请输入6-16位字母或数字”;密码是否要限制特殊字符?如“空格”、“/”等,为什么要限制?有没有安全方面的考虑?密码设置好后,注册按钮如何变化?点击“注册”后,在网络较慢的情况下,页面和按钮如何响应,是否要加锁屏浮层+缓冲提示语?




登录注册设计细节
  Sign Up Details


1
用户体验方面

将邮箱和手机号输入框整合成一个,节省了空间提升了美观性,还减少了用户的操作步骤


用户名密码这些必填项未输入时,登录按钮为不可用状态,避免误操作带来的麻烦


输入框中显示提示信息的方式进一步释放了画面空间,让整个画面更加简洁。但是注意输入框和提示文字的灰度要把握好,太浅了灰难以察看


画面中核心流程按钮突出显示,其它按钮最小化显示,根据重要程度可以将颜色加以区别


输入框的获得焦点时突出显示,以便在多个输入框时辨别焦点所处的位置


错误提示直接显示在画面中,不以弹出对话框的形式或toast的形式实现。弹出对话框体验差,toast显示时间过短的话用户可能没看清

微信扫一扫
或者在 添加朋友 - 查找公众号 搜索 杭州盈软科技