app登录页面设计有哪些关键点？

时间：2024-02-09 14:40:01 | 来源：网站运营

时间：2024-02-09 14:40:01 来源：网站运营

app登录页面设计有哪些关键点？：

账户体系的关键点在登录注册流程上。登录注册流程看似简单，实际考量设计功力。
网上关于登录注册的综述有很多了，但是从零到一整合分析的很少，以下，将以实际的产品为例，精细分析如何设计账户体系。

文章来源：人人都是产品经理

专栏作家：@阅天

一、立项背景

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

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

如你日常体验那样，第三方登录+立刻绑定手机的方式，直接抵消了第三方登录的便利，比直接手机号注册更麻烦。

而且，设计上，手机号注册需要设置两次密码，密码需要一致；设置之后，还得进入登录界面，再次填写账号密码，正确匹配才可以进入APP。

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

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

二、需求分析

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

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

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

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

三、功能点梳理

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

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

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

四、流程图（登录注册）

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

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

五、关键页面交互设计

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

1.主界面

• 布局：主界面集合三种登录方式，将微信登录作为主方式。
• 前提：成功登录的前提条件是必须先勾选同意用户协议，否则报错。
• 授权：第三方的登录，点击微信orQQ，授权成功后，即可登录进入APP，自动获取用户的昵称性别头像信息填充社交页。

2.验证码登录/注册

（1）设计解析

• 手机账号登录，考虑简单又快速进行，突出验证码快速登录/注册，辅以密码注册。
• 密码注册的弊端是很容易忘记密码，忘记之后，找回密码流程也繁琐。
• 验证码登录，虽然对频繁换手机的用户是个噩耗，短信也有达到率的问题，但考虑到效率跟成本，特别在拉新环节，还是作为主方式。

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

（2）设计点

• 验证码登录：登录注册界面为验证码登录，附以密码登录。
• 按钮：登录注册的按钮合二为一。也就是说，用户不需要选择是登录还是注册，将判断交给了后台。只要用户的手机号码还在，直接凭验证码进入即可。比起选择密码登录之后忘记密码，或者是干脆就不记得自己是否注册过，在错误的界面输入信息之后来回切换，二合一的方式更加友好，也是本次设计的一个亮点。
• 手机号码：采用更加清晰的的3-3-4数值格式，输入框末尾配清除按钮，错误输入后可一键清除。手机号码输入框也有记忆功能，可获取前一次登录的手机账号，可以获取同一次登录注册已填过的账号信息。
• 验证码：手机号码位数输入正确类型和位数之后，才激活验证码功能。否则点击会报错。之后，验证码的激活以变色表现，这是个视觉指示。输入完成第一行，人眼会自然而言的落在第二行的开头，如无例外，用户需要寻找一番，才会觉知过来，去点击获取验证码。
• 加载指示：数据传输到服务端，判断对错，再返回结果。这个流程费些时间，用加载小菊花，表示后台正在处理，舒缓下等待的焦急。

3.密码登录

（1）设计解析

密码登录考虑到向后兼容，老用户的账号以密码登录；也是适应本期的新用户注册。

同时标配忘记密码，也可切换新用户注册，或验证码登录，这些元素的布置考虑，是基于流程的。

密码的输入，其实正如设置密码，应该做格式限制。但是因为第一版没限制，不清楚用户设置了什么，所以此处不能轻易填坑。

数据输入都该考虑下限制的，为什么？在给产品经理讲技术这书里，要是你看到黑科技SQL注入攻击也会很印象深刻的……

（2）流程

跟验证码的简单路径不一样，密码登录因重在流程上逻辑自洽，更需配流程图查看才好理解。

正常流程是：输入手机号->输入密码->点击登录->登录成功。

异常流程是：

• 输入手机号->输入密码->点击登录->提醒“未注册”->点击新用户注册or返回上一级验证码登录/注册。
• 输入手机号->输入密码->点击登录->提醒“未注册”->账号或密码不对->重新输入or忘记密码or验证码登录。

4.忘记密码

（1）设计解析

步骤：忘记密码此处分两步，一步验证，一步设置。设置完之后，直接登录进入APP，无需再重复密码登录的步骤。（记不住密码更痛苦的事情是，忘记密码刚找回来，在下一步重新登录的时候又忘记了）。

异常流程：忘记密码此处还有个异常流程，是该账号不存在。有童鞋会说，正是密码输错才会到来这界面，这么还会有账号不存在的情况？对，情理上其实不大可能发生，但是程序逻辑上有这个可能，但是又无法通过前面的步骤过滤掉，是要补充下的。

此处判断账号不存在的提醒，是点击获取验证码之后，亮点之一。这里是考虑辛辛苦苦获取验证码，填写完毕之后才来告诉用户账号不存在，有些不厚道的……

（2）设计点：

验证账号：常规的做法，先验证码验证手机号，再下一步设置密码。

有些APP会将验证账号跟设置密码放在同一个页面，其实拆开会更清晰。而且，验证手机号码步骤复用率是很高的，比如，可以复用到推广员更改绑定银行卡时，作为账号验证。

设置密码：密码设置要限定格式，之后仅需输入一次就可以直接登录进入了。

重复两次数据，再次校验肯定更稳妥，但是登录成本提高了，以我们用户的耐心，我们的产品就没必要承担这个教育成本了。如果说担心手误输错了的，可以用验证码登录的，再不济可以用找回密码的。但是大多数用户其实只考虑本次能快点进入就好。

5.新用户注册

（1）设计解析

新用户注册界面近乎跟忘记密码是一样的流程，区别在点击获取验证码，此处的异常流程是该账号已存在。此处设置优化的流程，判断是已有账号之后，会直接跳转到验证码登录/注册界面处，直接获取已填写的手机号码，验证就行，对新用户尽量友好。

经过前面的界面筛选，此处的账号不存在的发生概率很少，但是作为关键流程而言，完整性是必要的。

移动认证

文内留个悬念要谈谈移动认证，移动认证是什么？最直接的体验是，无需输入任何数据，直接点击授权就登录。是不是很黑科技？！ 但是为什么最终放弃了呢，请听细讲。

理想情况：

移动认证是运营商移动提供的，基于手机sim卡和移动网络直接认证登录的技术，米家、爱回收跟同花顺应用在了自家APP里。当时上手体验，惊艳，简直零感登录；况且移动官网也有免费的sdk，更是窃喜。以移动认证为主登录的原型设计完毕，就立刻接洽移动认证sdk的接入。

现实情况：

但是呢，很快就被开发文档打脸了，简言之，就是层层筛选之下，能一键登录的用户远没有想象的多。

移动认证的原理是基于移动网络通信的。首先基于sim卡识别本机号码，在移动网络开启的前提下传输信息以授权通过，此时可顺利登陆；但是如果没开移动网络，就没辙了；如果WiFi跟移动网络同开，以WiFi为主，那将强制占道先验证再释放WiFi。如果移动网络通信不成，那就通过短信收发来完成数据传输。

所以，这么流氓的做法苹果肯定是不乐意的；电信不参与；oppo的ROM不支持此流程……层层筛选下来，加上关闭移动网络的，能顺利使用的其实不多；而且，除非付费，否则移动认证的logo说明只能用官方的，简直是给移动打广告….这些阻力远高于收益，所以，果断放弃了，采取了本文讲述的方案。

果然，合适的才是最好的。




本文由 @阅天 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Pexels ，基于 CC0 协议

原文链接：实例分析拆解：如何设计登录注册？ | 人人都是产品经理




想学习产品、运营，或者处于职场规划期、迷茫期的应届生、转行者、技能提升者。你现在有一个免费学习的机会。我们

每周免费开设产品、运营的直播公开课，由知名老师亲述，从专业角度帮你解惑产品、运营的知识盲点

更有入门到总监的产品、运营课程，帮你实现能力的提升，想免费听课的，只需要

点击下方网址，进入起点学院官网留下你的信息，我们邀请你进群，官网链接：