登录——每页只能有一个焦点

一、新 / 老用户，登录入口的默认设定不同

上文提到有N多的登录方式，如果每页只能一个焦点，就要捋一下登录方式之间的主从关系。

对于新用户，登录方式主要有两类

• 手机号：利于用户运营；

• 第三方：简洁、自带资料（昵称、性别、头像）；

很多文章，分析这二者优劣时，都认为手机号安全、可靠、用户真实、价值高。

分析是没错，然而场景搞错了，这里是登录环节，对于常规App，一切应以登录为主。登录之后有 100 种方法来拿到手机号，此处不着急。

极端类型的：

• 例如滴滴，它必须用手机号为用户提供服务，所以只能通过手机号登录。

• 例如婚恋类，没有性别就没法向用户展示任何内容，反而最合适微信登录（自带性别）。

上面简要分析了一下各登录方式的特性，下面原型图以常规App的思路展开。

页面设计原则：

1. 每页只有一个视觉主焦点；

2. 要有不影响主焦点的平行备选方案出口，或异常解决的出口。

3. 老板说：“手机号，尽量引导一下，但也要兼顾登录转化率。”；“……”

在工作中，我学习臻龙大神，用 Axure 写 PRD。然后又集各家所长，结合自己的一些创新，形成了我自己的PRD风格，如上图（为了投稿，样式稍微优化过）。

在写了无数说明文档、画了无数流程图，电子的、纸质的都试过之后，无奈发现开发哥哥们根本不看那玩意儿~~~

开发哥哥姐姐们说：（都是真实回答）

1. 从不看产品文档，跟着UI图做，看不懂就去打PM。

2. 太多了，看的眼晕。基本是做一步看一步。

3. 哦，这样啊~，我是靠着感觉写的，那我改改。

从产品角度想，PRD的用户是开发哥哥们，人家不看说明是PRD写的有问题。遇到问题解决问题，就形成了上图右侧的文档形式。

文档用两组 if else，详解了左侧两个页面的业务逻辑。这样的说明文档，对程序员来说，效率高、逻辑清晰、兼具高可读性。这些优点，是流程图和纯文字文档是无法做到的。

当然，细节也很重要，比如：像素级的对齐、【图二】输入框中没有光标…

二、言归正传，手机号登录

如下图：

第三方登录无需页面，常见问题：第三方App未安装、App互相拉起权限、返回数据异常等等，只需服务器处理异常即可，这里只说手机号登录：

遵循平行备选方案出口原则，在用户输入手机号之后，不隐藏掉第三方登录，只弱化处理。

改进之处：

1. 用Android时，每次复制了验证码，都要长按输入框去粘贴，烦，所以我加了粘贴。

2. 手机号码分段显示、加大字号，做法不新鲜，但也不多见，个人认为很有必要。

初始登录页到号码登录页，一定要使用动效，用动效把两个页面连接起来，让用户感觉只是同一页面的微小变化，一切尽在掌握，避免产生负面情绪。

在实际PRD中，我把每个页面的内部规则也写到文档中。例如：

1. 手机号、验证码输入框，只能输入数字；

2. 检测键盘高度，防止遮挡到登录按钮；

3. 验证码为 4 位数字， 30 分钟有效。

4. 30 分钟内最多获取 3 次验证码，且内容相同。

5. 每天最多获取 10 次验证码。

6. 不同种类的验证码，分别计数。如：语音和短信验证码。

7. 不同种类的验证码，规则不同。如：登录和支付验证码。

8. ……

三、获取验证码后，超时未输入

Android的智能化越来越成熟，但是权限系统也日趋完善。

在验证码输入环节，这二者就产生冲突了。在用户首登时就弹窗索取权限，显然不太友好。但如果不授权，就无法使用自动填写验证码这样的功能。

这里根据自身情况设定，如果后续会频繁使用验证码，或判断出是老用户，则可以先要权限。

接听语音验证码，我将其定义为“解决异常情况的一个出口”，所以默认不显示，只有短信验证码超时未填写时，才会出现。兼顾页面整洁和场景需求。

四、登录模块的其他页面

选择登录方式时，主流程都未被打断过，下图这些页面当然也不能打断主流程。

图一：

• 左侧标签栏下滑可关闭弹层，右侧下滑到顶，继续下滑可关闭弹层。

• 右侧内容区域，上滑到底，继续上滑可切换左侧下一个标签。

• 双语为中文和目标国家语言。

• 国家名字太长的，用缩写。

图二：

•  iOS 和 Android 的操作列表不同。

• 点击拨打，跳转到系统拨号界面。

• 点击复制，Toast提示复制成功…。

图三：

• 用户协议，每次打开都从服务器获取网页内容，不读取本地缓存数据。

• 文本可滚动，滚动时能查看到文本区域边界。

五、登录环节的异常情况

错误提示，也要遵循一个焦点原则。

上图解释，都是自动出现的错误提示。

• 图一，是在输完 11 位号码后，自动检测号码格式错误，出现的提示，修正后才消失。

• 图二，是在自动执行登录时，服务器返回验证码错误，出现的提示，内容发生变化才消失。

上图解释，是手动触发的错误提示。

• 图一，号码格式错误 or 未输完，点击获取验证码 or 登录，出现的提示， 2 秒后消失。

• 图二，验证码为空 or 未输完，点击登录，出现的提示， 2 秒后消失。

• 图三，倒计时未结束，点击倒计时，出现的提示， 2 秒后消失。

上图解释，防作弊与两种吐司展示：

• 图一，防作弊环节，对转化率伤害还是挺大的。我在PRD中写过，如果能收到运动传感器数据，可判断为真人，可去掉校验码。（传感器这些基础权限，系统默认开启的）

• 图二，登录-Loading，不可进行其他操作；全局吐司样式， 2 秒。

• 图三，Android的SnakBar还是挺好用的，建议 iOS 手动实现一下。 2 秒。

触发安全机制导致的登录信息过期，再次登录时，需要进行两种安全验证才能登录。

此处细节还是挺多的，比如：会员时长、相册、好友、动态、资料，这些信息能否合并？合并后，被解绑的账号是真删除还是假删除？

这些细节，极特殊情况时才需要考虑，比如企业收购导致账号体系合并。

去年双十一阿里赠送的优酷会员，需使用支付宝登录优酷，然而账号不能合并。结果就是优酷新增了用户，阿里送礼长了面子，用户则一脸懵逼。

相信已经是优酷会员的，且之前未绑定支付宝的，谁也没用过阿里送的优酷会员。

你们是吗？

以上，登录环节的异常情况也就差不多了，网络异常吐司提示即可。权限获取失败，前面也提到过，尽量不要在登录环节向用户要权限。

iOS 11 暂时还没研究；Android 方面，华为市场的默认权限不统一，同一分类的App，安装后，初始权限数量不等，有的多有的少，暂时还没搞清楚原因。不知是否可以向华为花钱买初始权限，有了解的大神，可以在评论区指点一下，谢谢！

六、登录页 – 其他形态

基础功能不登录也能使用的App，使用弹层登录页更好。注意遮罩的透明度，要保证页面整洁。

临时退出，或者安全机制退出，可用生物识别登录。叠加使用更安全。

七、探索永无止境

我在PRD中，每个大功能模块下面都有一个探索页面，放不同的设计和方案，做 A/B 测试能用到。最主要的还是当做终极力量，威慑程序猿们。

需求这种武器，脑洞有多大，威力就有多大。

对于登录模块的探索，有些有意思的资料和想法：

中移动的和通行证：

1. 三个功能：一键免密登录（SDK）、本机号码校验（SDK）、二次号查询。

2. 这两套SDK，都需要“拨号”和“读取本机识别码”权限。

3. 如果你的App默认拥有这两个权限，用着很不错，手机号都不用输，一键登录。

4. 小米 MIUI 9 已经全面接入了和通行证，全体系支持一键登录。

5. 本机号码校验，可用于安全验证。

6. 客服：“目前三网都支持，但是为了保障以后的使用，建议找回各自运营商对接。”

登录页，定制键盘：

• 第三方登录、拨号盘、删除、清空、粘贴、语音输入、登录按钮，都融合在一个键盘上，一点儿也不拥挤，哈哈哈。

• 其实语音输入手机号，还是很方便的，目前还没见过有App使用。

八、完结

准备的素材基本用完了，文章结束。