前言
注册&登录，是每个产品设计中最基本，最重要同时也是最繁琐的一环。看似简单，却与相当多的产品功能用户使用场景交织在一起，受到产品类型、用户定位、业务逻辑、使用场景、用户操作等不同因素影响。绝大多数的网站已经放弃了复杂、繁复的注册流程，将用户可能会遭遇障碍、引起用户反感和烦躁的部分去除，尽可能简单的让用户完成注册和登录流程。当用户完成注册之后，可以选择性地提供额外的信息，而这些信息可能会给给用户带来更加定制化的用户体验。
设计一个好的登录注册系统并不是很轻松。
申明:这篇文章是借鉴的优设和人人都是产品经理的相关文章，很多经验并非原创，再次向原作者表示感谢。
今天就从4个方面来说说登陆注册页面：
登陆注册页面出现在哪里？
登陆注册页界面的元素有哪些？
登陆注册分为哪几种情况？
登录注册页面应该注意哪些交互细节?
那废话少说，开始总结吧！
登陆注册页面出现在哪里？
登录注册界面一般来说会出现在两种地方。
一是，刚进入APP的时候，就提示用户要进行注册或是登录（如简书，MONO,Keep等）
二是，登录注册界面放在个人中心，用户进入APP的时候并不会提示登录或是注册，只有当用户使用到某些功能时才会提示登录或注册，当然用户也可以选择在这里进行登录或注册。（如淘宝，京东，蘑菇街等）
第一种方式显然没有第二种用户体验好，登录和注册毕竟是个麻烦事，如果必须要登录或注册才能使用APP，等于给用户设定了一个门槛，必然会导致用户的流失或卸载，所以如果APP采用这种方式的时候，都会有一个选项就是不注册先进app体验一番。某些内部管理型APP，必须登录才能使用的除外。
登陆注册页界面的元素有哪些？
登录注册界面要分为两个界面来分析（以手机号登录注册为例）：
1、登录界面：返回、输入手机号、输入密码、忘记密码、登录、注册、第三方登录。。。
2、注册页面：返回、输入手机号、获取验证码、输入验证码、设置密码、同意注册协议、注册、登录。。。
登陆注册分为哪几种情况？
APP的注册登录有四种情况:
1.不需要注册登录
常见于系统自带的工具类APP，像经常使用的闹钟、日历、计算器等等；一些简单的第三方APP：乐流，榫卯等。
这些APP的特点都是功能相对单一，比较“轻”，不需要记录用户信息或行为历史。
2.第三方账号登录
用户不需要输入注册登录信息，直接选择第三方账号就能完成登录。国内常见的第三方账号有微博、微信、QQ、豆瓣、人人等，国外常见的第三方账号有Facebook，Twitter，Google等。现在国内除了超级APP之外的APP基本都支持第三方账号登录，这样能简化用户注册登录的流程，提高APP的用户转化率。
3.邮箱注册
最开始的时候注册登录是基于PC的，也就是基于网页，PC时代的互联网产品多使用邮箱作为唯一ID。所以邮箱注册成为主流，而且注册过程中需要验证邮箱也很方便，用户直接在PC端就可以完成所有操作。
4.手机注册
随着移动互联网的到来，人们触网的主要设备已经从PC逐渐转移到智能手机。加上手机号码的实名制、全球通业务的普及，使得手机号码也具有了唯一标示性。而且在移动互联网时代，用手机号码作为登录ID，并用短信验证码的形式来验证ID，这些操作流程都基于手机端。所以手机号码逐渐取代邮箱成为APP注册登录的主流方式。
登录注册页面应该注意哪些交互细节?
关于提示语
一种是输入框中的提示语句，如在用户名、密码输入框等处。这种提示语句在信息层级上较为弱化，且在点击输入框或是输入内容时会消失。这样小小的细节传达给客户比较清晰的信息，给客户舒适的体验。
另一种提示语句为输入后的反馈提示，如提示密码不正确、用户名有误等。可以弹出警告对话框提示，或是直接在原先界面上提示。
关于获取验证码
看以下三种获取验证码的放置位置
A:放置在验证码输入框右侧，这也是很多app常用的方式。用户先看到输入框，然后再点击获取验证码，再回来输入验证码，验证码输入框用户看了两次；
B：获取验证码放在了左侧，操作流程上很流畅，但是按钮放在这里视觉上会显得很突兀，验证码输入框与上面的输入框的联系好像被打断了。
C：这种方式，操作流程很直，是一条线，而且也保证了上下两个输入框直接的视觉联系。
现在的手机一般会在顶部短时间显示收到的短信内容，所以用户可以不跳出APP就能看到验证码进行填写，而且有些APP还会弹出获取读取短信的请求，如果你同意，APP会自动读取验证码并填上，非常方便。如果出现了需要跳出APP去看验证码短信的情况，则用户再次进入APP时，必须是刚才填输入验证码的界面。
关于按钮状态的反馈
默认状态下，登录按钮状态是不可点击状态，只有当用户输入了有效的信息才会变成可点击状态。这里的有效信息并不是指正确信息，而是从信息的类型和长度来判断。如APP要求的密码必须是大于或是等于6位数，则当用户的输入字符长度少于六位时，登录按钮还是不可点击状态，只有当输入字符长度等于或是超过6位数时，按钮状态才变成可点击状态。
关于手机号的显示——对手机号码进行3 4 4的分布。
这个规则不仅适用于手机号码，包括银行账号、转账金额等等。这是因为人的短期记忆是有限的，即一次只能记住有限的东西，如果强制记住很长的东西，短期记忆就很容易出错。
所以将数字以4或者3为单位分组，有利于用户阅读、编辑、校对手机号码。
用显示/隐藏icon代替输入两遍密码
为了确保密码输入正确，很多APP需要用户输入两遍密码来确定密码输入无误，但这无疑增加了用户的工作量。替代方案是在密码输入框右侧增加一个“显示/隐藏icon”，让用户在输入完一遍密码后可以选择点开“显示/隐藏icon”来确保密码输入无误，减少用户的工作量。
弹出相对应的输入键盘
点开邮箱输入框，弹出带有@的英文输入键盘。
点开手机号输入框，弹出九宫格数字输入键盘。
点开密码输入框，弹出英文输入键盘。
这是很小的细节，虽然用户可能不知道哪里不对，但是他能体会到好不好用。一个APP注意了这点，那用户就会觉得这个APP好用。而另一个APP没有做到这点，无论点击哪个输入框弹出的都是九宫格中文输入键盘，用户就会觉得这个APP不太好用。
作为设计师，要知道用户觉得不好用的原因是什么，这样才能对症下药，改善用户体验。
登录时增加一键清空icon
在登录的时候偶尔会出现输入错误，如果没有这个清除的icon，用户只能按键盘中的清除按钮，需要一直按住直到输入框为空。
一个是只需要点一次就能清空，一个需要长按一段时间或者连续按多次才能清空，孰优孰劣可想而知。
清晰的错误反馈
当用户输入错误信息时，最好利用临时框的形式提示用户。而不是不做反应让用户自己去猜到底是怎么回事。
临时框也有两种形式，一种是左边的对话框形式，这需要用户点击确认才能进行下一步操作。一种是右边toast的形式，弹出一两秒后自动消失。
对于好多的小的细节还没有总结，如：忘记密码、用户协议等等
以下是自己之前的临摹：
作品的优点：比较完整的一套登录注册，不仅做了界面的设计，还做了线框图。
作品的缺点：界面设计色彩单一，小的细节用显示/隐藏icon代替输入两遍密码的小图标未表现出来等。
写在后面的话
你所遇到的问题，以后都会变成你的能力！
加油！
