实例分析拆解:如何设计登录注册? - 站长之家

实例分析拆解:如何设计登录注册?

QQ截图20180810091848.png

最近对我们的APP的账户体系进行了改版,研究了各类产品的设计。账户体系虽然几乎是通用标配功能,但是各APP的都有差别,都是针对当前的产品形态、发展阶段和用户量级做出了符合自己的设计。账户体系的关键点在登录注册流程上。登录注册流程看似简单,实际考量设计功力。网上关于登录注册的综述有很多了,但是从零到一整合分析的很少,以下,将以实际的产品为例,精细分析如何设计账户体系。

一、立项背景

我们的产品第一版账户体系由于历史原因,做的比较生硬。

初期主攻社交,希望可以沉淀用户信息,手机账号会是第一优先选择,当时的方案是手机号注册+账号密码登录/第三登录+立刻绑定手机账号。

如你日常体验那样,第三方登录+立刻绑定手机的方式,直接抵消了第三方登录的便利,比直接手机号注册更麻烦。而且,设计上,手机号注册需要设置两次密码,密码需要一致;设置之后,还得进入登录界面,再次填写账号密码,正确匹配才可以进入APP。

总的来说,用户进入APP的路径相当长,步骤多,用户体验低分。

近况是,产品方向探索,将重点落在商城上。完成交易的流程本身就多步骤,再叠加原来的登录注册,路径过深,对拉新损耗大,急需改进。

二、需求分析

从业务发展趋势来看,微信会是重要的用户来源,后续会布局更多的微信运营活动,和商城小程序,设计引流到APP,需重点突出微信登录。

而商城交易需要保证安全性,同时兼容老用户,手机注册密码登录必不可少。考虑到用户文化水平,和互联网产品使用习惯,需要在常规的基础上做简化。

第三方登录需要在关键点绑定,商城推广员提现时变更银行卡,需加以验证身份。

新用户刚进来,可以先浏览熟悉产品内容,在需要身份信息时,再进行引导登录。

三、功能点梳理

登录注册流程:微信/QQ第三方登录、验证码登录/注册、密码登录、找回密码。

账户体系配套:关键点引导绑定手机、关键点强制绑定手机、验证码验证账号、账号相互绑定。

细节功能点见下方的账户体系功能点梳理图。

四、流程图(登录注册)

未登录用户,到达需要获取用户身份信息的界面(为了平衡效率和体验,一般是除一级界面以外的),则触发注册登录流程。用户完成注册登录之后,才可使用和操作绝大部分的功能。

本流程图需要配合页面交互原型理解。

五、关键页面交互设计

登录注册体系将包含五个部分,主界面、验证码登录/注册、密码登录、忘记密码和新用户注册,在实际流程操作中会根据用户的选择,和系统的判断进行切换。账户体系的配套将会略过,以下是登录注册的页面交互设计、设计考量和功能点介绍。

1.主界面

  • 布局:主界面集合三种登录方式,将微信登录作为主方式。

  • 前提:成功登录的前提条件是必须先勾选同意用户协议,否则报错。

  • 授权:第三方的登录,点击微信orQQ,授权成功后,即可登录进入APP,自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

(1)设计解析

  • 手机账号登录,考虑简单又快速进行,突出验证码快速登录/注册,辅以密码注册。

  • 密码注册的弊端是很容易忘记密码,忘记之后,找回密码流程也繁琐。

  • 验证码登录,虽然对频繁换手机的用户是个噩耗,短信也有达到率的问题,但考虑到效率跟成本,特别在拉新环节,还是作为主方式。

其实基于验证码到达率和安全性,我考虑过换移动认证,就是手机号码一键登录,无需密码跟验证码。可惜实际接洽的时候行不通,而放弃了,文本会介绍下这个事情。

(2)设计点

  • 验证码登录:登录注册界面为验证码登录,附以密码登录。

  • 按钮:登录注册的按钮合二为一。也就是说,用户不需要选择是登录还是注册,将判断交给了后台。只要用户的手机号码还在,直接凭验证码进入即可。比起选择密码登录之后忘记密码,或者是干脆就不记得自己是否注册过,在错误的界面输入信息之后来回切换,二合一的方式更加友好,也是本次设计的一个亮点。

  • 手机号码:采用更加清晰的的3-3- 4 数值格式,输入框末尾配清除按钮,错误输入后可一键清除。手机号码输入框也有记忆功能,可获取前一次登录的手机账号,可以获取同一次登录注册已填过的账号信息。

  • 验证码:手机号码位数输入正确类型和位数之后,才激活验证码功能。否则点击会报错。之后,验证码的激活以变色表现,这是个视觉指示。输入完成第一行,人眼会自然而言的落在第二行的开头,如无例外,用户需要寻找一番,才会觉知过来,去点击获取验证码。

  • 加载指示:数据传输到服务端,判断对错,再返回结果。这个流程费些时间,用加载小菊花,表示后台正在处理,舒缓下等待的焦急。

声明:本文转载自第三方媒体,如需转载,请联系版权方授权转载。协助申请

相关文章

相关热点

查看更多