特殊情况下的 APP 设计①：注册登录页设计

2017-06-29 11:08:00

91助手创始人熊俊先生说过，互联网公司最大的浪费是做出了一款没有人用的产品。一款互联网产品，之所以被设计和开发出来，都是为了满足人们的需求。我们这帮互联网原住民，能用去哪儿买机票，airbnb租房，京东购买生活所需，用饿了么点外卖，还能用得到APP来进行碎片化时间的学习。这些产品都或多或少的满足了我们的需求，让生活更便捷更美好。

所以作为产品的设计人员，每天都在考虑用户需要什么，怎么样的产品功能能解决用户的需求，这个点很重要。但是我们也都知道，仅仅做到这点也是不够的，因为用户在使用产品时不止会遇到正常的流程。还会遇到没网、没内容、服务器异常、内容加载失败、token失效、加载时间过长等等一系列的问题。这些只占产品20%的特殊情况，一旦处理不当，就会降低用户体验，从而影响到公司利益。这也是我决定要写《特殊情况下的APP设计》系列文章的原因，想站在交互设计师的立场，以用户体验为设计为理念，来试图系统性的解决这些问题。

首先我们来解决为什么在产品设计阶段，考虑特殊情况下的APP设计这件事很重要。

1.这件事为什么重要？

曾经使用某个银行类APP，当点击某个button，按理说页面应该会跳转至另一个页面，但是出现在手机里的是一个空白页面，上面有个加载的小菊花。这是加载过程，只不过设计的形式让人觉得简单粗暴了点，不会有太大的问题，但是接下来的几分钟内，页面一直停留在这。而且也找不到任何取消或退出当前操作的入口，只能含恨强制退出，然后重新进入。

这是银行APP，线上做得不好，可以去线下营业厅办理业务。但是如果这是一个社交软件，或者一款UGC的APP，很多用户会毫不犹豫的卸载它，因为替代的产品太多了，看看如今的共享单车就知道了。不考虑特殊情况下的APP设计的产品，会损失目标用户。不仅如此，还会让用户在网上或线下讨论你的产品，降低了品牌和产品的用户口碑，最后直接影响公司利益。

总结一下，特殊情况下的APP设计的不好会影响用户体验，而差的用户体验会让产品损失用户；形成差的口碑，增加营销成本；最后直接影响到公司利益。你说，特殊情况下的APP设计，重不重要。

2.为什么会出现这么多的特殊情况？

完美的产品应该是没有任何异常情况，用户能够顺利的找到自己想要的信息或者功能。但是现实生活中不存在完美，互联网产品也是。设备性能不足，网速有限，网络环境多变，程序bug、token失效、服务器异常等等，都会导致产品出现特殊或异常情况。

3.存在哪些特殊情况？

只要不是用户完成自己任务需要进行的页面操作，我都把它归为特殊情况下。具体包含以下页面内容：

①APP启动页面的设计

②注册登录页面的设计

③空页面（缺省状态）的设计

④加载loading的设计

⑤未登录状态下的设计

⑥加载失败的设计

目前想到这六种特殊情况下的产品设计问题，接下来一系列的文章都会围绕这个主题在写。

(一)注册登录页面的设计

朋友说某个APP不错，下载后正准备好好体验一番，却被糟糕的注册登录页面弄的精疲力竭，无奈最终只能放弃。注册登录流程能让用户扭头就走，也能让产品获得新用户的芳心。

一个合格的注册登录页面，应该是具有清晰的操作流程，良好的交互细节和美观的视觉设计。

1.清晰的操作流程

APP的注册登录有三种流程:

①无需注册登录

常见于系统自带的工具类APP，像经常使用的闹钟、日历、计算器等等；一些简单的第三方APP：乐流，榫卯等。

这些APP的特点都是功能相对单一，比较“轻”，不需要记录用户信息或行为历史。

计算器&榫卯

②非强制登录

有注册登录的流程，但是用户不需要注册登录也能使用产品的部分功能，也就是所谓的支持游客模式。

内容类、购物类、娱乐类等都会使用这种形式。

非强制登录又有两种设计流程，一种是先展现出注册登录页，但是允许用户跳过。

网易云音乐&豆瓣

另一种是直接展示产品功能，当用户想深入使用某些功能时用户得选择注册登录。

开眼&same

③强制登录

用户必须先进行注册登录，才能正常使用产品功能。社交类、2B类、工作类的产品会使用这种流程。

强制注册登录的流程会影响用户的转化率，所以产品不是严重依赖于账号系统的话，尽量采用非强制登录的方式。

path&企业微信

2.不同的注册登录方式

①邮箱

最开始的时候注册登录是基于PC的，也就是基于网页，PC时代的互联网产品多使用邮箱作为唯一ID。所以邮箱注册成为主流，而且注册过程中需要验证邮箱也很方便，用户直接在PC端就可以完成所有操作。

现在很多APP依然保持着邮箱注册的方式。

②.手机号

随着移动互联网的到来，人们触网的主要设备已经从PC逐渐转移到智能手机。

加上手机号码的实名制、全球通业务的普及，使得手机号码也具有了唯一标示性。而且在移动互联网时代，用手机号码作为登录ID，并用短信验证码的形式来验证ID，这些操作流程都基于手机端，特别方便快捷。所以手机号码逐渐取代邮箱成为APP注册登录的主流方式。

③.用户名

早期用户名注册登录还很常见，但是随着第三方登录的普及，以及用户名登录自身的缺陷：“只能区别用户的ID，并不能获取到用户的联系信息”，用户名注册登录的方式已经退出主流。目前很多产品会将用户名作为昵称来用，而不是作为注册登录的ID来使用。

④.第三方账号

邮箱、手机号、用户名，都属于自建账号体系的方式，除此之外还有一种方式：第三方账号登录。用户不需要输入注册登录信息，直接选择第三方账号就能完成登录。国内常见的第三方账号有微博、微信、QQ、豆瓣、人人等，国外常见的第三方账号有Facebook，Twitter，Google等。

现在国内除了超级APP之外的APP基本都支持第三方账号登录，这样能简化用户注册登录的流程，提高APP的用户转化率。

这四种方式各有优劣，但总的来讲，通过手机号注册登录会更方便，通过获取验证码输入四位或六位数字就能完成注册登录。

3.注重交互细节

APP的优秀与否，由很多因素决定，而良好的交互细节是每一个优秀APP的共同品质。只有从用户场景出发，并从用户的视角来思考产品，才能设计出打动人心的APP。

①用显示/隐藏icon代替输入两遍密码

为了确保密码输入正确，很多APP需要用户输入两遍密码来确定密码输入无误，但这无疑增加了用户的工作量。替代方案是在密码输入框右侧增加一个“显示/隐藏icon”，让用户在输入完一遍密码后可以选择点开“显示/隐藏icon”来确保密码输入无误，减少用户的工作量。

issuu&in

② 弹出相对应的输入键盘

点开邮箱输入框，弹出带有@的英文输入键盘。

点开手机号输入框，弹出九宫格数字输入键盘。

点开密码输入框，弹出英文输入键盘。

这是很小的细节，虽然用户可能不知道哪里不对，但是他能体会到好不好用。一个APP注意了这点，那用户就会觉得这个APP好用。而另一个APP没有做到这点，无论点击哪个输入框弹出的都是九宫格中文输入键盘，用户就会觉得这个APP不太好用。

作为设计师，要知道用户觉得不好用的原因是什么，这样才能对症下药，改善用户体验。

③ 对手机号码进行3 4 4的分布。

这个规则不仅适用于手机号码，包括银行账号、转账金额等等。

这是因为人的短期记忆是有限的，即一次只能记住有限的东西，如果强制记住很长的东西，短期记忆就很容易出错。

所以将数字以4或者3为单位分组，有利于用户阅读、编辑、校对手机号码。

淘宝&Facebook

④ 登录时增加一键清空icon。

在登录的时候偶尔会出现输入错误，如果没有这个清除的icon，用户只能按键盘中的清除按钮，需要一直按住直到输入框为空。

一个是只需要点一次就能清空，一个需要长按一段时间或者连续按多次才能清空，孰优孰劣可想而知。

dosnap&nice

⑤清晰的错误反馈。

当用户输入错误信息时，最好利用临时框的形式提示用户。而不是不做反应让用户自己去猜到底是怎么回事。

临时框也有两种形式，一种是下图左侧的对话框形式，这需要用户点击确认才能进行下一步操作。一种是toast的形式，弹出一两秒后自动消失。个人更倾向于第二种形式，因为第一种形式相当于强制中断了用户的操作，用户需要点击确认才能回到原来的操作流程。而toast则起到了提示的效果，并且没有打扰到用户。下图右侧的airbnb，在用户输错密码时，不光有底部的临时框提示，还将整个登录页面的背景色油绿色变为醒目的橙色，这种设计在提示用户的前提下，还做到了赏心悦目，是个不错的设计思路。