微信扫码登录 | 方便安全省心
阿狸的小马甲
2020年02月21日 发布 / 707 次阅读
上一次作品是关于“国家地理”APP的重设计，改版的其中- -个模块就是增加用户账号体系，因此对登录注册流程查阅了相关资料并深入了解，但没有落实到书面上总感觉掌握不牢固，因此通过写文章的方式进行巩固,也希望对阅读这篇文章对你有帮助。
目录
1、什么是登录注册
2、为什么要登录注册
3、登录注册的方式及优缺点
4、更换设备登录注册产品设计流程
5、UI设计师在设计登录注册时应该考虑的点
6、在“国家地理”的重设计中，我为什么使用邮箱的注册登录方式
7、合理美观的视觉设计
8、上一个作品，我为什么使用邮箱注册的方式
1、什么是登录注册
登录注册流程是基于用户账号体系，用户通过手机号(或者邮箱和第三方)来创建（注册）自己的账号。账号创建成功后系统会自动按顺序分配一个数字编号，也就是我们经常讲的用户ID，说白了就是在这款APP中的“身份证”。同时用户需要设置登录密码、昵称来对自己的账号进行安全管理。
2、为什么要登录注册
首先需要说明一点，登录注册流程不是每一类APP必须具备的。是否需要，要根据自家产品的实际情况而定(像计算器、日历、闹钟很少需要登录注册)
通过登录注册流程我们创建属于自己的账号，从而记录我们的浏览历史和用户信息，例如淘宝可以根据我们的浏览记录精准的推送我们喜爱的产品、QQ音乐会通过我们的听歌记录生成年度歌单、我们可以登录自己的站酷账号看到自己发布的作品等等。因此，除了系统自带的工具类APP或者功能比较单一的APP（如榫卯）大多数APP都是需要注册登录的。
3、登录注册的方式及优缺点
在移动设备普及之前登录注册流程是围绕着邮箱来做，方式为--用户名/邮箱+密码+确认密码的方式。随着移动设备的和社交网络的普及，邮箱不再是唯一方式，出现了第三方登录和手机登录注册的方式，手机的普及和互联网的发展为手机号登录注册提供了独特的优势而且便于收集数据和运营推广等优点使之成为各大APP登录注册首选。笔者把登录注册方式进行了总结并进行举例说明：
1. 手机号+密码/验证码
2. 邮箱+密码/验证码
3. 用户名+密码
4. 第三方登录注册
5. 混合式登录
3.1 手机号+密码/验证码
智能手机在国内足够普及，通过手机号进行注册成为最常用的注册方式，也是用户乐于接受的登录注册方式。
3.1.1 优点
（1）方便快捷——当注册登录一个产品时，输入手机号-获取验证码（有的产品需要继续输入密码），整个操作连贯性强用户可以快速的完成注册登录流程。
（2）易导入社交链——通过向用户推荐手机通讯录好友的方式，让用户关注更多现实中的好朋友，类似于在微信中和我们的朋友聊天，同时也可以降低用户使用陌生感（例如下图的抖音会自动推荐通讯录好友）
（3）便于开展运营活动——通过手机号向用户推送活动提醒。
3.1.2 缺点
（1）增加企业成本——产品向用户手机发送验证码，需要向服务方支付一定的费用，从而增加了企业的成本。
3.1.3 产品设计流程
3.2 邮箱+密码/验证码
邮箱注册登录是基于PC（电脑端）的，PC时代的互联网产品多使用邮箱作为唯一ID。国外互联网发展初期智能手机未开始盛行，因此国外许多老牌互联网产品积累了大批邮箱用户，因此依然沿用邮箱的注册的方式。例如Path
这时候你可能会问，产品初期积累了一批邮箱注册的老用户，但随着手机注册越来越方便继续坚持使用邮箱注册的话会损失一部分新用户，这个时候要怎么办呢？这个时候我们可以采用邮箱登录（老用户使用），手机号注册的方式（新用户使用），这样需求和用户的便捷体验都可以满足啦~
3.2.1 优点
永久使用（只要是相对应的公司还开展这项业务），相对于更换手机号需要重新下载注册APP，邮箱在不需要更换上具有巨大的优势，邮箱最常用的有国内的网易邮箱（@163.com）、QQ邮箱(@qq.com)、新浪邮箱（@sina.com）等等，国外的谷歌邮箱（@gmail.com）、雅虎（@yahu.com）、微软(@hotmail.com)等等。
3.2.2 缺点
（1）方便度低——如果产品使用邮箱加密码的方式注册，当用户更换手机或者需要重新登录的时候，如果忘记密码则需要等过邮箱找回密码，这就需要用户记得自己的密码，毕竟产品通过邮箱给用户发送验证码不及通过手机号发送短信方便。
（2）覆盖面窄——再国外，互联网兴起时智能手机并未普及，因此很多产品使用邮箱注册。但国内不同，产品高产的年代已经有智能手机的存在，因此国内大多使用手机号码进行注册登录。但如果自家的公司产品是海外产品，那当然是邮箱注册更加适合。
3.2.3 产品设计流程
3.3 用户名+密码
使用用户名注册登录的情况较少，具体何种需求下使用需要依赖产品功能。
3.3.1 优点
个性化——用户可以起自己喜欢的名字，再上传一个个性化的头像，可以增加个人魅力。
3.3.2 缺点
记忆成本大——使用APP难免会有重新登陆的时候，用户名在我们脑海中往往没有手机号或者邮箱账号的记忆深度，毕竟我们可能在几天内需要发邮件、输手机号码，而APP重新登陆除了自己下线大多是因为更换手机，当忘记用户名密码找回时又需要耗费时间。因此用户名称需要较大的记忆成本。
3.4 第三方登录注册
国内的微博、QQ、微信、淘宝、支付宝等，国外的facebook、goole等都拥有庞大的用户群体，因此作为第三方登录的首选。
3.4.1 优点
（1）提高用户转化率——用户选择想要使用的第三方进行授权便可登录注册，流程简单，大多数用户都会使用这种方式注册登录。
（2）减少陌生感——产品可以获得用户的好友列表，从而减少用户使用产品时的陌生感，如下面QQ音乐使用QQ进行登录，产品获取了我QQ的好友列表。
3.4.2 缺点
无法获得用户的有效信息——产品无法获得用户的有效信息（如手机号和邮箱），意味着后期开展运营活动会有比较大的困难。因此现在大多数产品为了解决这一问题会在用户使用第三方登陆之后跳转到绑定手机号的界面，如“看理想”这款APP，在使用微信登录后会跳转到手机验证的流程：
3.5 混合式登录
有的产品为了给用户多种登录选择，同时也为了获取更多的用户，会采用混合式注册登录的方式，一般给用户提供用户名或者手机和第三方登录的三种方式，用户可以选择自己喜欢的方式进行登录注册。虾米采用了混合式登录的方式。默认登录采用手机号一键登录的方式，毕竟虾米作为音乐类APP需要为用户保存的数据不涉及大数额金钱,因此采用这种方式十分便捷。账号密码登录则被放在了左下方，点击用户可以使用手机号+密码的方式登录。
4、更换设备时产品设计流程
当我们更换手机或者升级系统需要重新登录账号，有一些APP支持多设备同时登录，如飞猪。QQ会进行弹窗提示，告诉你账号在另外一台设备上登录，而有一些APP则需要进行安全认证，比如微信，下面是我在自己手机登录微信的情况下，使用测试机再此进行登录微信的安全认证流程。
5、UI设计师在做登录注册需求时应该考虑的点
上面的文章内容你这写了注册-登录-更换设备的安全认证，那么登录注册的流程算是走完了。现在让我们想一下，作为UI设计师，如何辅助产品将这一流程更完美的呈现在用户面前，让用户在登录注册时更愉悦，下面是笔者对于登录注册的体验设计总结，工作中产品君需要考虑太多需求，对于一些细节的用户体验难免忘记，这时候UI设计师就需要进行讨论补充，这样也可以减少改稿次数，加快工作进程。
5.1 手机号显示方式使用344
11位手机号码不分组比分组出错的几率要高并且识别性弱，因此分组的细节可以提升用户体验。如下图：
5.2 只输一遍密码（有显示明文暗文的开关）
大家有没有这种体验，我们在注册时输入密码需要再输入一遍来减少输错的几率，但密码是暗文，当我们两次密码输入不一致时需要再次输密码，过程繁琐。加入显示明文暗文的开关可以使用户更流畅的进行注册，这里说的开关也就是我们在输入密码时的小眼睛。如下图lofter的输入密码流程：
5.3 弹出正确的键盘格式
当我们输入邮箱时，需要数字和字母切换，同时需要特殊字符，这个时候弹出26字母的键盘比9宫格的拼音键盘要合适（笔者尝试了一下，九宫格的 “@” 和 “.”比较难打出来，而26字母键盘切换一次即可 ）。如图一，输入密码需要英文数字结合或者结合特殊字符和大小写等，这个时候26键盘比九宫格要合适。图二，输入手机号弹出拼音九宫格，用户需要自己进行输入法的切换。图三微信在输入手机号码状态下，弹出数字键盘，十分的人性化，让我想起了《Don’t make me think》这本书，用户在不需要思考的情况下输入手机号，一气呵成的操作体验可能会让用户对产品产生好的印象，毕竟一个产品的易用好用是由良好的体验细节组成的。
5.4 一键清空输入的信息
不知道大家是不是和我一样，当输入账号时候，尤其是QQ这种熟记于心的账号，一气呵成，突然发现，中间错了一个数字，这个时候一个一个的删除太麻烦，而一键删除就是很友好的一种方式。
5.5 清晰的错误反馈
当我们使用已经注册过的手机号重新注册时，虾米会toast手机号已绑定其他虾米账号来明确的告诉用户这一步不能进行下去的问题点在哪。
6、邮箱注册登录时智能显示后缀
@qq.com,@163.com等邮箱后缀输入起来繁琐，这时候如果自动显示邮箱后缀用户直接选择适合自己的选项，会提高用户操作效率，提升用户体验。
7、合理美观的视觉设计
美观合理的注册登录界面可以引起用户对于产品内容的好奇心，增加产品注册用户数量。下面是笔者总结的一些吸引用户注册的视觉设计方式：
7.1 符合产品定位的摄影图片
人们喜欢通过拍照的方式记录生活美好瞬间，高质量的图片会引起用户对于产品的好奇心，因此登录注册页选择了世界各地不同类型的图片作为背景，下图的大海场景一下子把用户带入一种思绪，无法抗拒的自然摄影作品有利于提高注册率。
7.2 微交互
微交互已经成为新的设计趋势，并且一直在发展之中，下面的卡通形象会跟着我们输入的文本转头，当我们输入密码时候，卡通人物会用手遮住眼睛防止偷看，趣味性的微交互大大提升用户体验。
7.3 视频
短视频的兴起相信大家已经了解视频对于人的吸引力，生活中也确实是这样的，比如人们在平静的湖泊边上更倾向于看看风景，坐下来畅谈人生。而在飞流直下的瀑布面前更容易放开自己，采取一些实际行动来融入到环境中去。下图中的虾米在注册登录页采用了短视频的背景，视频的主角是充满活力的年轻人，传达产品态度的同时让用户有想体验一把产品的冲动。
7.4 品牌色
将品牌色运用到整个界面的背景中去，可以让用户产生非常强烈的品牌印象。
8、上一个作品，我为什么使用邮箱注册的方式
在明确产品需求和查阅了大量资料后，使用了邮箱注册的方式，原因很简单——用户使用APP最想做的事就是看图片，看到心坎的图片就想占为己有（收藏）。收集到的用户反馈中，大多数的用户反馈升级系统或者更换手机或者更换手机号之前的收藏全部丢失，因此不使用手机注册的方式。而用户名跟邮箱相比显然是邮箱更适合（各自的优缺点上面已经诠释在这里不再赘述）。
下面分别是注册和登录的流程：
第一次写文章，自己搞清楚这个知识点的同时也可以帮助到在看文章的你，虽然文章写得较初级，但对于我来说试一次进步，而且做了上次的重设计之后（现在看有好多不足~）感觉自己已经过去迷茫的阶段啦~，万事靠实践，后面我会持续性输出，感谢阅读~~~
