• 郑州建网站

    |

    郑州网站建设

    |

    郑州网站制作

    |

    APP开发

    |

    软件开发

  • 郑州网站建设电话: 15937160052
  • 实例分析拆解:如何设计登录注册?
  • 发表日期:2018-08-15   浏览:2126   关键词: 登录页面设计 注册页面设计 APP界面优化
  • QQ截图20180810091848.png

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

    一、立项背景

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

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

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

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

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

    二、需求分析

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

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

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

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

    三、功能点梳理

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

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

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

    四、流程图(登录注册)

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

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

    五、关键页面交互设计

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

    1.主界面

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

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

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

    2.验证码登录/注册

    (1)设计解析

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

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

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

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

    (2)设计点

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

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

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

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

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

  • 相关新闻
    • 如何搭建景区网站建设?
      搭建一个景区网站建设的很有必要的,因为做了网站可以增加客户对旅游景点的信任,还有一方面是能让旅游企业获得更多
      日期:2022-09-02 浏览:1288
      电商网站建设为什么要独立开发?
      线上购物的基础就来源于企业的电商网站建设,做好电商网站,才能让客户在线上购物,而且现在市面上有很多的电商网站
      日期:2022-03-24 浏览:1901
      郑州建网站细节分析说明
      郑州建网站要重视产品介绍和展示,作为网站建设,其最重要的一个特点就是能够较好的进行产品的推广和宣传
      日期:2021-12-26 浏览:2095
  • 一个企业的成长,从无到有,从一个人到一群人,从一种元素到元素集合;或多或少、都要有品牌意识的存在……