整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导读：几乎每一个APP都需要用户登录注册，这是一个产品的基础功能。这样一个简单的基础功能，也会随着用户使用场景和产品的特性变化。本文作者对APP登录注册的细节设计发表了自己的见解，与你分享。
移动设备属于个人私密性较高的设备，用户在进行操作时，可对输入密码进行有效的保护；
移动设备随身携带，随时随地在变换位置，网络状况不稳定因素很多；
移动设备显示区域均较小，登录注册页面通常都会有3个页面（M站通常在一个页面），需要用户填写的内容要精简；
移动设备输入更多是手指触屏操作，人机交互有其独特性，例如虚拟键盘的设计，特效的设计等。
在开始设计产品之前，一定要先想清楚：
假设前面的问题都搞清楚了。那么我们来设计登录注册。
第一步：梳理脑图，梳理现有的登录模式和信息结构；（一般会用xmind，操作简单易用，最主要是免费）
第二步：梳理业务流程，把每一步操作都流程化，做好各种情况的处理方案（梳理流程非常非常非常重要）；
第三步：画出草图/线框图，对页面元素和布局进行初步设计；
第四步：交互设计，对每一项页面元素、页面跳转、操作反馈、异常处理、按钮和页面的各种状态等做出设计；
第五步：自检测试，对线框图和交互设计进行自检，最好是用Axure等交互软件进行交互设计操作，建立自己的自检清单；
第六步：输出PRD、线框图和交互设计稿。
由于每个页面都要设计很耗费时间和精力，所以我只做简单地总结。
以注册为例，注册通用流程：是填写手机号码——获取验证码——填写密码。
账号有无格式的要求，如果只是手机号码，前端是否需要验证手机号码的有效性？
手机号码为纯数字，是否弹出纯数字键盘方便用户快速填写及避免用户来回切换？
手机号码的数字如何呈现？哪种格式？
验证码的格式，是四/六位数字验证码，还是英文+数字验证码，英文是否区分大小写？
按钮默认显示状态、用户输入信息后按钮颜色变化效果，该如何设计比较好？
倒计时如何设置？button还是label ？用哪个好？为什么好（好在哪里）？如何设计？
验证码的倒计时一般默认采用60秒的居多，但是一般验证码的有效期为5分钟。之所以设置60秒是因为在绝大多数情况下，60秒内验证码是能够发出的，如获取不到，让用户所等待的时间又不至于太长，降低用户焦虑，提升体验。
最少和最多字符设置，提示文字为“位”还是“字符”？如“请输入6-16位字母或数字”
密码是否要限制特殊字符？如“空格”、“/”等，为什么要限制？有没有安全方面的考虑？
密码设置好后，注册按钮如何变化？点击“注册”后，在网络较慢的情况下，页面和按钮如何响应，是否要加锁屏浮层+缓冲提示语？
错误时的报错提示文字是什么，提示格式是弹窗、Toast、还是在当前页面文字显示？
Toast是没有焦点的，而且Toast显示的时间有限，过一定的时间就会自动消失。
弹框会阻断用户操作，需要手动点击确认以后才会消失。
在当前页面文字显示的话，提示文字摆放的位置，页面格式根据提示文字的变化，需要有怎样的视觉效果
点击【获取验证码】，检测手机号已被注册，如无置灰设置，输入框为空，手机号码无效的情况，故需提示：
点击【注册】时，可能会有输入框为空，验证码无效等情况，如无置灰设置，故需提示：
短信验证码一般通过第三方通道发送，在技术侧做规避，还需要在产品规则上做一定限制；
验证码的格式需要简单明了，如“880207，XX验证码。【XXX】。
验证码的字数限制，一般为6位纯数字。
注册是否为邀请注册？如是邀请注册，邀请码格式如何设计？
邀请码错误提示，填写了邀请的用户和没填的用户，在注册成功后有何区别？有邀请码的用户是否有奖励？
注册成功后同时切换为登录状态，登录状态账号密码保存是否设置期限？
给予注册成功的提示并跳转到相应页面，目标页面状态如何是否有缓存，是否需要缓存？
之前是在需要token的页面跳转到注册页面的话，注册成功后需自动跳转回之前的页面
注册之前有第三方登录，用户注册后还需要用户绑定第三方账号吗？
手机号码输入框，手机号码显示一般是344格式，这样便于用户检查号码是否正确，如：188 8888 8888；
对输入手机号的判断，首数字必须以1 开头，非1字符及提示错误，第二位数字必须在3到9之间（包括3到9），不在范围即提示错误等等
验证码输入框，长度一般比较短；
密码输入框，默认一般为密文显示，为了更好的交互可以设置明文显示按钮，最好只设置一次密码，为什么这样？
按钮设计，提交按钮和文字按钮的位置和主次布局设计；
按钮状态的设计，不同的状态操作都要考虑，默认置灰和高亮的条件，按钮置灰的意义何在？
按钮提交反馈，点击操作要给出响应或反馈。
验证码的格式，字母、数字、字符等，一般为数字4位或者6位；
验证码的有效时间，根据不同的产品设计不同的有效时间，在有效时间内的验证码操作需要给出明确的反馈；
验证码的获取次数上限，技术限制和产品设s计限制同步，避免被无限制获取；
验证码获取时间，一般为第三方发送，但时间最好限定在5秒内让用户获取到
验证码是怎么触发得到的？为什么有些设计为点击那妞页面跳转时获取，有些页面跳转后再次点击才能获取？为什么有不同？
触发后倒计时状态有何变化？重新获取验证码后，原验证码如何处理？
短时间内多次获取验证码是否还要给用户发送验证码？还是提示验证码已发送请输入？
在注册、找回密码、第三方登录等操作流程中，返回时需要特别注意点击返回后的操作提示；比如注册手机的修改，验证码提交后设置密码等。
点击返回时，干扰了正常流程的操作一般需要强提示，提示弹窗注意文案和按钮文字设计
点击返回后，当前页面和目标页面状态是否变化？例如手机号码是置空还是显示已输入的手机号码？
浏览应用过程中进入登录页面，登录页面是否需要有返回按钮？
登录注册的设计涉及到很多方面，是最常见也是最容易被设计者忽视的地方。每一个元素的设计都要独立思考，不能照搬全抄，也不能异想天开，需要提前理解和思考，多想几个为什么，多问自己几个为什么？而在实际设计的过程中，需要重点考虑实际的应用场景。
本文由 @一月的肖邦 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
个合格的注册登录页面，应该是具有清晰的操作流程，良好的交互细节和美观的视觉设计。
移动互联网盛行下，基本所有APP都会有注册登录功能，它不仅能让用户扭头就走，也能让产品获得新用户的芳心。
一个合格的注册登录页面，应该是具有清晰的操作流程，良好的交互细节和美观的视觉设计。
1、大部分免费使用
2、一般功能都比较单一，不会记录用户的历史行为，打开即用。
如：小工具较多、手电筒、指南针、计算器…
特征：工具类型产品盈利模式主要是靠广告盈利。
1、渴望用户的信息，对用户身份信息敏感
2、对用户账号安全有保护，注重用户的数据保护
如：社交类app、运动健身类、招聘类…
特征：这类产品的特质（功能、服务）强烈的吸引着用户，用户非常愿意使用此类用户。
1、靠内容与产品支撑，通过内容与产品的优势
2、吸引用户，促使用户转化
如：电商类、新闻类、知识类…
特征：
1、这类产品的特质（功能、服务）并未强烈的吸引着用户，需要用户体验
2、发展期、初创期的产品需要多的用户数量，所以不会在登录注册时强制执行，给用户带来困扰。
默认优先“登录页”还是“注册页”呢？
1、可体验全部功能，直接进入产品核⼼区域。
2、可获取用户信息，个性化推荐
常用于社交或定制化较强的APP，例如：QQ，微信，抖音，keep，⼩红书.... 缺点：门槛较高，还没看到整个应用的全貌就要填写个人 信息，考验⽤户耐心。
优点：
1 、所提供的内容和功能，需建立在⽤户基本信息之上
2、 产品初期成⻓长阶段，需通过强化注册⼊口提高新增⽤户量
适用场景：
1、前期在web端积累大量用户，转移到移动端时；
2、产品发展稳定期，已拥有大量的用户基础且新增用户增长较为缓慢时。
优点：方便老用户，进入应用效率较高
缺点：通常情况下，用户会选择下方的第三方一键登录，如果后期平台需要用户提交个人信息来享用更多功能时，需要谨慎引导否则引起用户反感
优点： 方便快捷，转化率高
浅色背景
1、简化了背景的视觉，突显账号区域的内容
2、聚焦注册/登录的信息录入，提高转化
品牌色背景
突出品牌信息，加深用户对品牌的认知，树立品牌在用户心中的印象。
图片视频背景
给用户营造一种产品氛围，是情感化设计的一种，应景的图片提前让用户产生代入感，促使用户融入到产品中。
品牌元素引导
目的是为了进一步强大用户对品牌的认知，让用户熟悉产品，了解产品、对产品产生足够的印象，扩大品牌效应。
当以品牌名或LOGO体现的时候，背景的设计一般会弱化。
文案引导
更有亲和力，与用户对话，同时更加聚焦每一步操作任务！
插画引导
1、使用与产品气质一致的插画，可以强化品牌感
2、同时更具有趣味性，也能让用户感受到产品设计的态度。
第三方快捷登录
以增加用户量为主要目的时，可采用快捷登录方式，它给用户提供了一种更为便捷的选择方式，无形中减少了用户的选择负担。
信息输入表单
以留存用户信息为目的时，让用户通过输入自己的账号、密码、手机号码、验证码等方式完成的登录注册操作。
1、默认状态（input&Btn）
2、激活状态（input）
3、输入状态（input&Btn）
4、校验报错（前/后端校验）
5、清除方式
6、密码可/不可见
7、验证码读秒/获取
设计方式：
1、明确注册/登录的功能定位
2、参照操作逻辑使用
Bilibili注册登录定位为一个独立模块，该模块高于其他模块。
如Bilibili：
感谢您耐心的读完，真心希望你能获得新知哦～
相关推荐：
帮你全面掌握投影设计
UI底部标签栏设计总结
UI设计师必看，作品集制作注意要点
怎么做好弹框设计？有哪些注意事项？
为你全面分析移动端APP搜索框应该怎样设计
天的主题是和注册登录相关的内容，相对比较简单，大家应该都很熟悉。
注册登录一直是应用中必不可少的一环，用户打开应用可能第一步就是登录页面，这相当于一款应用的脸面，也是用户使用产品的源头。当然也是因为不常被用到所以更最容易被忽视，它作为一项基础功能，使用场景一般是用户初次使用应用或者退出登录，又或是大版本更新和登录过期才会使用到。
注册登录的意义就在于给用户独有的个人中心，包括数据的同步，或是用户注册后会通过用户已完善的资料进行相关的内容推荐。
登录相对而言属于高频次的操作，注册、修改密码等属于相对低频次的操作，但是他们都会关联到产品内的个人资料和设置模块。几乎所有的社交应用都是需要注册登录的，用户拥有了个人账号才能继续使用产品。
当然也有一些系统的应用是不需要注册登录就可以使用的，比如：系统自带的计算器、日历、天气等或是一些第三方的轻应用，这里就不多赘述了，下面主要还是说说需要用到注册登录功能的情况。
还是先来看一下整体结构：
（以下图片来源于应用截图，仅作为学习交流使用）
这种方式比较少但是无疑是最快捷的方式，相信大家平时应该用这种方式也比较多，因为可以避免使用手机注册带来的繁琐步骤，可以节约很多时间。
你在第三方应用中进行授权后产品会直接调用接口，生成ID登录后，你的头像、昵称等个人信息甚至可能同时会获取你的好友列表，让你知道还有哪些好友也在使用产品，可以有效地减少对产品的陌生感，同时也便于应用在第三方中进行分享。
当然这种方式对产品也很有利，因为相信很多用户在不了解产品的情况下，用户可能只是想初步了解一下产品，但是又不想进行手机注册那么麻烦，所以就直接使用第三方进行注册吧，待进入应用初步使用了解后，再通过产品的用户引导（比如：红点标记或是局部引导等）功能再进行手机号/邮箱/微信/微博等账号的绑定，这样做对新用户的产生有积极作用。
我遇到过当已经使用了第三方应用注册登录了之后，会立即出现让用户绑定手机号的页面，这样做是想快速产生新用户，出发点是好的，但是我觉得用户在不了解产品的情况下，绑定手机号的可能性很低。
所以最好可以在绑定手机号页面有“跳过”功能，给用户选择的余地，不要强制用户，待初步了解产品后再通过引导进行绑定，这样做最佳。
使用手机号获取验证码是目前最常用的注册登录方式，这种方式的优势不必多说，相信大家都很熟悉流程，通过发送短信获取验证码在60-90秒内进行注册登录，这么做是为了确认用户拥有该手机号的使用权。手机号+密码是用户常用的方式，而手机号+验证码是比较简便的方式。
这里注意一点的是在输入手机号后，为了让用户查看是否输入正确，建议手机号显示样式为3-4-4模式（比如：156 5555 5555），这些都是细微之处，虽然无关大雅，但是可以看出一个产品的用心之处，比如：下图可以对比一下，明显图二更优。
手机号也是商家进行用户维护的有效手段，毕竟手机都是随身携带，可以在节假日发送祝福或是促销短信，也可以在你长期未使用产品，进行短信提示，避免你将产品遗忘，但是过度的短信轰炸则会让用户感到反感。
另外使用手机号注册登录，需要做一个判断，是否是第一次登录，是的话就跳转引导页，不是的话就跳转至首页。
这里插一句题外话，你们有没有遇到过在已经注册成功后，但是还需要重新输入账号密码登录的情况，其实这种做法个人觉得是比较多余的，可能2次输入账号密码可以加强用户的记忆。但是可能很多人用手机号注册都是用的一个同密码，因为现在的应用可选择的余地实在是太多了，如果每个应用都使用不同的密码可能很难记得住。
这种样式是最常见的，也是上面两种样式的结合，这种样式给用户留有选择的余地，自愿使用手机号或是第三方。但是一般这样的组合方式多数是希望用户使用手机号注册，所以手机注册登录比较突出，第三方注册会置于页面底部，相对弱化。
但是还有一类是希望用户使用第三方登录，弱化手机号注册登录的情况。BAT旗下的众多应用，会使用一个账号或是进行账号关联，比如：阿里旗下的应用闲鱼、菜鸟裹裹等，登录时为了用户数据之间连接，会推荐用户使用淘宝账号进行登录，从而弱化了手机号注册登录，这是出于产品属性或是战略需求考虑，无可厚非。
使用邮箱进行注册登录也是比较常用的方式，多数用于pc端，邮箱容易记忆，便于频繁使用的产品，注册后邮箱会收到验证链接，验证成功后会自动跳转进入该网页首页。因为web端屏幕较大，还是和移动端有点差别，需要填写的表单可能也会比较多，关于表单的设计可以参照我早期的文章：《进行表单设计需要注意这十点》
当然移动端也有使用邮箱注册的，可能是国外的应用居多，比如：facebook、twitter、dribbble…或是国内的应用同时拥有网页和移动端，可以将用户数据进行同步。
这种方式也很多见，一般多为阅读类、游戏类或是电商类产品，用户多为游客状态，可能只是进来逛逛，可能暂时还没有使用到添加、收藏、关注、评论、购买等功能，如果使用这些功能就必须要进行注册登录了，注意在完成注册登录后记得页面要回到之前浏览的页面，而不是回到首页。
比较少见的一种方式，通过编辑短信发送至XXX后，可获取账号和密码。这种方式属于早期的一种方式，现在基本用不到了，就不多说了。
iOS 11更新带动了新的设计趋势，大标题+留白被广泛使用，注册登录也不例外，现在很多产品都使用相对简洁的设计（下面左图），仅使用大标题和必要的线框和提示语，让用户只聚焦注册登录本身，去除多余的干扰元素，可以节省用户的时间。
相对早期的设计手法是在页面中加入logo（下面右图），好处是可以进一步强化用户对产品品牌的记忆点。两种方式各有优点，没有对错，产品可以酌情使用。
现在有很多应用是采用分步骤进行注册的，比如先输入手机号，点击“下一步”的同时，系统查询该手机号是否可以注册，通过的话则进入输入验证码页面，这样做的好处是可以及时反馈给用户，避免了用户在输完手机号和验证码之后出现错误toast的情况。
需要注意的是步骤不宜过多，建议3步以内，如果你的产品对用户来说不是非用不可，可能会有很多用户会放弃注册。
这种方式和分步骤注册类似，将注册和登录合到一起，不管你是否有注册，只要输入手机号再填写验证码，成功后即可使用产品，比如：小黄车就是使用这一方式。
输入框提示语是必不可少的，措词需要简洁，大部分的做法是点击输入框后提示语自动消失，这样做也是可以，毕竟需要填写的选项不是很多，用户不易忘记。当然更好的做法是保留提示语，比如：星巴克的登录页面，在点击输入框后，提示语会上移，依旧保留，只是这样的开发成本可能会稍大一点。
忘记密码的功能一般都是放在登录页面，因为两者有较强的关联性。使用忘记密码功能一般是通过手机号发送验证码，验证通过后再进行新密码的设置。如果起初是用邮箱注册登录的话，就要到邮箱中进行验证，验证通过后再进行新密码的设置。
这里的toast提示一般用于有错误发生的情况下，比如：账号不存在、账号已被占用、密码错误、验证码错误等，及时的反馈给用户注册登录不成功的地方在哪里，以免用户摸不着头脑，愤而离开应用。
出于安全考虑，有些应用会让用户输入图形验证码、字符验证码、旋转图片、滑动验证等方式，目的是确认是人为注册而非软件恶意注册。
用户协议看似非常的不起眼，用户也很少会去点击查看，出现在注册页面的情况居多。早期一般是默认被选中状态或是点击注册即视为同意协议条款（图一），用户填完账户密码之后点击注册就完成了。
但是前去年支付宝默认用户协议被选中导致的一系列新闻提醒我们，用户协议最好需要用户自己去点击确认，现在很多应用也开始这么做，在没有勾选用户协议之前，“注册”button是无法点击的（图二）。
出于使用场景考虑，比如：在户外或是注册登录时身边有人，为了有效保护用户的密码隐私，可在输入密码时关闭眼睛icon，只显示密码点。开启眼睛icon时是为了让用户清楚的看见自己的密码，避免密码输入错误。
这个功能是给用户在注册登录页面输入有误或是切换账户时使用，可以有效减少用户的点击次数，提升用户体验。
在用户曾登录过的情况下，应该保留用户的账户名数据，这样用户重新登录时只需填写密码或验证码即可。当然，用户如果想重新输入账户名，一键删除数据的功能也显得很有必要。
还有一点是多账户之间的登录切换，在登录时可以选择多个账号，这个功能在to C类应用比较少，一般是to B类应用可能会用到，因为企业可能会拥有多个账号，这个功能就会显得很有必要。
这种针对使用邮箱注册，比如说在用户填写账户名输入@的同时，关联出@qq.com、@163.com等，可以减少用户的输入，体验也会更好。
在注册登录时也会有一些比较多余的操作，比如：二次确认密码、完善个人资料等，这些操作最好是放置在个人中心或是设置里让用户自行填写，在注册登录页面只保留必须填写的内容。
综上所述，注册登录看似是很简单的页面布局，并且容易忽视，但是它的地位是不可忽视的，其中的交互方式和细微之处还需要我们多多考虑，不同的产品需要根据自己的属性来选择符合自己的方式。
如有遗漏，欢迎大家留言补充，一起交流~
作者：EasonZhang，公众号：Eason张UED（ID：EasonZhangUED）
本文由 @EasonZhang 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
