移动app登录和注册功能观察

移动app登录和注册功能观察

字数4936 阅读4698 评论0 喜欢12

收藏文章 分享

现在在智能机上下载一个apps是再简单不过的事了，而安装完后首次打开app时，用户首先看到的就是登陆注册页了，当然，不排除有一些非账号登录的小众应用等。

登陆注册页往往还会和应用引导页揉在一块，之前看到有文章说进入应用主界面前的引导页往往没有达到预期的效果，在我看来，这种硬塞式的引导，对于急着去把玩应用的用户来说，确实是有阻碍的。但我们今天只谈登陆注册流程。

我收集了一些自己觉得做得各有特色，兼具代表性的app登录注册流程，同时写了点自己的看法。

1、Evernote

evernote首次打开时，没有splash screen,而是直接到了登陆注册页，对于一个工具型应用，必须登录账号才能看到和编辑你的信息。值得注意的是，这里只有一个输入框，你不用纠结是注册还是登录，也就是说不用另外去分辨登录和注册的入口在哪里。

输入一个账号，然后点击下一步，此时app向EverNote的服务器上传这个账号的信息，请求服务器确认是否已注册。

这里我随便拿了一个邮箱测试了下，这个账号应该是没注册过的，所以点击下一步后看到的是”创建新账户“的提示，自然的，它就会提示你给这个新账号设置一个密码。最后点击创建账户，就能进入主面板，可以开始写笔记了。同时常见的”同意服务条款和隐私条款“的复选框，我们也没看到，可以说这一步，给了我去选择的麻烦，两步直接到位，同时一句”点击创建账户，表示你同意服务条款和隐私条款“也省去了复选框的抢占焦点，让我集中注意力在唯一的一个输入框中。

当然，如果最后服务器返回的结果是这个账号已注册，那么就会出现上图，它提示你正在以该账号登录印象笔记，只要你再输入登录密码，那你就能直接登录了。

可以说这个登录注册的流程处理的非常简单高效。但是我们也有必要注意这个产品本身的背景，单纯的从交互上说，登录注册流程是简单高效，但是我们还要尝试理解这样做背后的意图，为设么这么设计？我们可以直接借鉴过去吗？首先，evernote是一个笔记记录工具，作为工具型产品，本身的内容是来自用户自己生成，而且隐私性很强。所以一个简单的账号和密码就够了，它不用像一些有社交元素和个性化推荐元素的产品，需要通过在登陆注册的时候，多弄几个信息选项，来收集记录分析你的资料，从而给你推荐服务。它只要保证简单，高效和安全就行了。因此它可以只有三步，用户不用思考太多，照做就行。

2、饭本(旧版本，ios）

饭本是国内的一款通过好友推荐饭店，来帮你解决吃饭问题的app。既然是以推荐和社会化关系来驱动的产品，那么它的注册应该就不能像EverNote那样简单一个账号和密码，而是会多收集一些用户信息，以便更好的完成推荐服务。

图中是饭本的登录首页，可以看到这一屏将登录和注册放在两个平级按钮上。用户输入完账号和密码后，可以选择登录或者立即注册。由于截屏离我写这篇文章有一段时间，而手机上的饭本已经更新到了新版本，所以对上图中的输入完账号和密码后的按钮交互印象不清了。可能是：app检测到文本框第一次都输入完毕，且格式无误时，立即将数据传到服务器验证，若返回的结果是该账号已注册且密码无误，则高亮登录按钮；若账号未注册，则高亮立即注册按钮，以提示用户下一步操作。同时提供了两个第三方登录入口，这是必须的，社交网络账号能大幅简化登录和注册的流程，当然，这一点严格点来看，我们得区分Android和iOS平台，因为安卓平台上应用间通信做的比ios好，比方说点击上图中的新浪微博登录，在安卓上可能就是在新页面中走一个授权的操作，但放在ios上，很有可能是弹出个小页面，你得再输入账户和密码，登录微博后再点击授权，再返回应用。

我们说产品最重要的是解决问题，那么这种登录注册的设计主要是解决了什么问题呢？是更快速简单的登录注册流程，如果你用第三方账号登录的话。但是，我觉得这个问题解决的还不够好，登录和注册还是分离的，如果你中途注册到一半，厌烦了，想用第三方账号登录，还得返回上一界面---点击第三方登录按钮---授权登录---返回饭本。当然，我看了下安卓上的饭本后，那边就通过fixed tabs解决的比较好。

另外就是，安卓上谷歌给的SDK比较多，而且也更开放，比如饭本拿到了一个检测用户在这个手机上的登录邮箱，然后直接将该邮箱放到登录页里，省去用户再输入一遍的麻烦。

或者对于 Google+, 还有一个独特的好处就是, 如果你提供了 Google+ 登录的话, Play Store 能够提供 OTA 登录的能力, 特就是说当你的应用被安装到用户的手机上时, 就已经登录好了他的账号, 而无需用户再去登录一遍.

同时饭本的设计师@stephen dat 提到了很重要的一点，就是登录和注册的互通，简单来讲就是降低跳出率，必须要考虑到登录时能一眼看到快捷的第三方登录，注册的时候万一嫌麻烦了，能一眼看到还能用第三方登录。http://www./blog/?p=622

刚才写到我猜测的登录按钮和立即注册按钮可能的一种交互，如果深入点去想，就得计算怎样跟服务器通信，是先验证用户名，再验证密码还是用户名和密码一并提交验证？所以，登录注册的流程还真是不太简单，要考虑的细节很多。

在我输入了一个曾经在饭本上使用过的账号后，登录按钮高亮，这时比较容易就是点击登录按钮了。如果点击登录，提示密码错误也是有可能的，这时我可能就会有点捉急了，看到下面有第三方登录，很有可能就是点击新浪微博登录。

如上图所示，在iOS上用QQ登录饭本的时候，会先跳到手机QQ的界面上去，走一个授权流程。授权并登录后，再返回到饭本。可以说，是有点麻烦的。有趣的是，我在新版的饭本中看到了改善，它们加了两个网页来解决这个问题，通过网页来传递数据，这样省去了在两个应用中跳来跳去的麻烦。下面我将会讲到。

3、饭本（新版，iOS)

上图是饭本的新版，跟旧版相比，简化了登录界面的元素，弱化了注册，通过对比进一步强化了第三方社交账号登录。邮箱输入框，只要检测到输入@符号，确定二字高亮，然后输完密码后点击确定，即登录。若点击立即注册，则会跳到注册界面。

昵称性别等注册信息填完后，点击确定即注册成功了。

点击第三方账号登录，qq和微博，都是在应用中嵌进了两个网页，输完账号和密码后，就到了授权登录了。跟旧版饭本相比，省去了在两个应用中跳来跳去的麻烦。

4、支付宝

支付宝跟其它非阿里系app不同的是，它不提供第三方登录，一方面可能是出于安全性考虑，另一方面可能是加强自家账号的长期稳定性，从而达到跟踪和分析广大用户的数据，为大数据做准备。

由于支付宝获得了访问我手机通讯录的权限，加之检测本机号码应该也不是个难题，同时我之前已经登录过一次，头像缓存在本地，所以它的登陆页，直接显示头像和手机号，只要输入密码即可登录。同时，它提供了多种登录方式，当然都是阿里系的。注册按钮在底部，支付宝的注册流程就是手机号注册，一步一屏，很简单，收到一个验证码，输入验证即可注册。这里我特别实验了下，拿已经注册过的手机号尝试注册了下，再输入完短信验证码点注册时，它弹了个窗提示该手机号已是支付宝用户，是否立即登录，点击立即登录即可跳转到最开始的登录界面，点击”换手机号注册“即重新跳到手机号注册界面。

使用手机号登录时，如果输入本机号码，则点下一步后，直接提示你输入登录密码，也就是说账号和密码输入分离开了，怎么说呢，从使用流程上来说，这样是没问题的，因为正常场景下，就是这样输入的，如果说账号和密码的输入框放在一屏，交互和提示还是不能少，但是不太好组织信息展示，所以干脆做成多屏，这对操作成本来说并没有增加多少。

如果输入的不是本机号码，那么应用会提示考虑到安全性，我们将会对这个手机号进行验证，我们将发送短信验证码到这个手机上。

值得一提的是，支付宝提供了多种登录方式，但只有手机号登录时，下面仍然放了用其他方式登录和注册的入口。考虑到使用支付宝的用户分布广泛，较为大众，年轻人还好，如果给上了点年纪的中年人要记住个邮箱或许会麻烦点，但手机号还是容易记住一些。

下面是支付宝的注册流程

首先，用手机号注册，填完手机号后，点下一步就到了确认短信验证码，值得注意的是，它不是在你输入一个手机号后就开始验证该号有没有注册过，而是在输入完验证码后再检测。若已注册，然后就弹出了上图的toast，换手机号注册或去登录页面。

5、手机淘宝

当点击注册时，会重新走一遍输入手机号--短信验证码--检测是否已注册，若已注册，则会弹出一个toast，可点击直接登录，返回登录界面。也可以换一个手机号注册。这一点和支付宝一致。

手机淘宝跟支付宝做的不太一样。首先手机淘宝的目标用户更为大众，它的登录注册界面做了两个特色功能，一个是没有密码时，用短信登录，一个是密码的明暗文切换。首先我验证了下没有密码短信登录的流程，淘宝这个登录页考虑的比较周全，常用的找回密码功能放在登录按钮左下侧，而当用户想用手机淘宝购物却发现没有注册，而注册流程自己又不清楚怎么操作时，就可以点击“没有密码?用短信登录”点击之后，首先切换到输入手机号的界面，同样，输完手机号点下一步会收到短信验证码，当输入完验证码，此时服务器会检测是否已注册，有一点我觉得淘宝做的不太好的是，在我用已注册的手机号验证时，它直接提示我"为确保账号安全，请验证您的淘宝登录密码“，这里它想表达的意思应该是我已经注册，可验证密码直接登录，用鼓励的语气，而不是莫名其妙的提示。没有试过未注册的号码，也不知道到时是怎么提示。

另外一点就是密码的明暗文切换，这里可能有以下情况：主要要考虑淘宝的用户数和用户特征，中老年用户用淘宝输到一半忘记输到哪了，有没有输错。当然，对一部分年轻人也适合，特别是家庭主妇；不用输完后，点登陆提示密码错误，导致多次登录，减小服务器压力？（YY。。。）

6.EyeEM

EyeEM是国外的一款图片拍照分享应用，类似instagram。它的把功能引导页和登录注册入口放在一块确实不错，很多应用在你首次打开后，是得不断左滑好几次，才能来到登录注册页，而且效果往往不好，因为用户急着看这个应用到底有什么内容，当然，这里也涉及到登陆注册的一个设计，就是在合适的时候才会跳出登录或注册窗口，平常不会干扰你参与到app中去。

嗯，前面提到的饭本，借鉴了这个设计。这种应用最适合图片app,将内容，功能结合的恰到好处。

作为一款社交化的拍照分享app，接入第三方登录是必须考虑的一个问题，eyeem提供了facebook的第三方登录入口，而且将其放在了普通账号的上面，浏览顺序最先看到，做了一定的强化设计。你也可以用eyeem自家的账号登录。

如果你点击加入，就到了注册的页面。可以从上图中看到的是，如果直接注册，要输入四项内容，姓名，用户名，邮箱密码，还得上传个头像。考虑到注册流程确实稍长，所以eyeem在注册页也提供了使用facebook直接登录的入口。

整体上eyeem做的比较好的一点是，它自始至终，在登录和注册页都提供了明显的第三方登录入口。

7、lofter

Lofter是一个轻博客app,浏览优质内容是核心需求，社交是辅助。因此在打开app后，虽然你能看到注册和登录的两个入口，但右下角向左来回滑动的渐变箭头还是提醒你，可以左滑，左滑之后就能直接浏览lofter上显示的默认内容。这里注册的按钮用了黑色，用来强化，当用户首次安装打开lofter时，考虑到用户可能来自两方面：一是Lofter网站上已有的用户，他们要登录的话，还是可以找到登录入口的，这样登录稍弱化也是没关系的。二是从appstore上下载下来，而之前未曾注册过lofter的用户，对他们的强化注册就很有必要。总之，这跟lofter早期吸引用户注册的策略是有关系的。

当用户左滑进入浏览内容的界面时，此时如果他想评论或分享等，就会从窗口底部弹出登录和注册的引导窗口，这种设计也是有人推荐过的，因为当你浏览到喜欢的内容想继续下一步操作时，这时的引导登录或注册或许是效果比较好的；二是我们不会在你刚装完打开app时，就用麻烦的注册或登录流程来妨碍你快速浏览内容的需求；三是lofter本身就不是一个非得登录才能使用的app，未登录时的浏览默认内容也是一个需求点。

点击登录时，除了常见的邮箱/网易通行证登录外，作为一个社交化轻博客应用，使用第三方登录，借以更多的了解你是很有必要的，因此提供了微博和qq以及可能是目标用户之一的大学生常用的人人网账号。

注册这里，强化了第三方账号注册，弱化了用邮箱注册，和上面一样的道理。

8、豆瓣小组

豆瓣小组基本上和lofer是一致的，不过它一进来的首屏就是内容展示，够直接。同样是app内引导登录和注册。

注册时需要激活码，第一眼看没看明白，以为是要向好友索要，其实就是短信验证码，嗯，这里是一个网页。

9、百度云

百度云提供了多种登录方式，并强化用自家账号登录，一来保证安全性，二来好管理。

比如我自己就有一次不知道是串号还是账号被盗了的经历，走百度自家账号得人工申诉的过程还是效率挺高的。

登录页的右上角是注册页，这里的注册只有手机号注册，并且不需要验证码。值得一提的是百度云的登陆保护功能做得不错，PC网页上需要输入验证码才能登录，手机上使用百度云，则是先要短信回复Y验证后，才能登录。

写到这，移动端的登录注册体验就写完了。总体来说，各有特点，主要还是看各自要解决的问题，和应用本身的特征。

是否有社交元素，需要获取更多用户的数据？是，则提供第三方登录入口/在注册页增加几个资料选项。

是否必须登录才能使用？否，则提供应用内引导登录或注册，因为未登录时浏览内容也是个需求点。

做成多屏滑动切换还是单屏切换tab？需要看登录的验证流程是怎样的，像支付宝，evernote那种就做成了多屏，而百度云这种则做成了单屏。

登录和注册流程如何顺畅走通？是全部填完后验证，还是填一个切换到下一项时就已经验证完毕，还是先验证完后，再决定下一项怎么显示，是提示你直接登录，还是提示可以注册。

流程和交互，实现成本和操作便捷是要持续考虑的问题。

移动app登录和注册功能观察

字数4936 阅读4698 评论0 喜欢12

收藏文章 分享

现在在智能机上下载一个apps是再简单不过的事了，而安装完后首次打开app时，用户首先看到的就是登陆注册页了，当然，不排除有一些非账号登录的小众应用等。

登陆注册页往往还会和应用引导页揉在一块，之前看到有文章说进入应用主界面前的引导页往往没有达到预期的效果，在我看来，这种硬塞式的引导，对于急着去把玩应用的用户来说，确实是有阻碍的。但我们今天只谈登陆注册流程。

我收集了一些自己觉得做得各有特色，兼具代表性的app登录注册流程，同时写了点自己的看法。

1、Evernote

evernote首次打开时，没有splash screen,而是直接到了登陆注册页，对于一个工具型应用，必须登录账号才能看到和编辑你的信息。值得注意的是，这里只有一个输入框，你不用纠结是注册还是登录，也就是说不用另外去分辨登录和注册的入口在哪里。

输入一个账号，然后点击下一步，此时app向EverNote的服务器上传这个账号的信息，请求服务器确认是否已注册。

这里我随便拿了一个邮箱测试了下，这个账号应该是没注册过的，所以点击下一步后看到的是”创建新账户“的提示，自然的，它就会提示你给这个新账号设置一个密码。最后点击创建账户，就能进入主面板，可以开始写笔记了。同时常见的”同意服务条款和隐私条款“的复选框，我们也没看到，可以说这一步，给了我去选择的麻烦，两步直接到位，同时一句”点击创建账户，表示你同意服务条款和隐私条款“也省去了复选框的抢占焦点，让我集中注意力在唯一的一个输入框中。

当然，如果最后服务器返回的结果是这个账号已注册，那么就会出现上图，它提示你正在以该账号登录印象笔记，只要你再输入登录密码，那你就能直接登录了。

可以说这个登录注册的流程处理的非常简单高效。但是我们也有必要注意这个产品本身的背景，单纯的从交互上说，登录注册流程是简单高效，但是我们还要尝试理解这样做背后的意图，为设么这么设计？我们可以直接借鉴过去吗？首先，evernote是一个笔记记录工具，作为工具型产品，本身的内容是来自用户自己生成，而且隐私性很强。所以一个简单的账号和密码就够了，它不用像一些有社交元素和个性化推荐元素的产品，需要通过在登陆注册的时候，多弄几个信息选项，来收集记录分析你的资料，从而给你推荐服务。它只要保证简单，高效和安全就行了。因此它可以只有三步，用户不用思考太多，照做就行。

2、饭本(旧版本，ios）

饭本是国内的一款通过好友推荐饭店，来帮你解决吃饭问题的app。既然是以推荐和社会化关系来驱动的产品，那么它的注册应该就不能像EverNote那样简单一个账号和密码，而是会多收集一些用户信息，以便更好的完成推荐服务。

图中是饭本的登录首页，可以看到这一屏将登录和注册放在两个平级按钮上。用户输入完账号和密码后，可以选择登录或者立即注册。由于截屏离我写这篇文章有一段时间，而手机上的饭本已经更新到了新版本，所以对上图中的输入完账号和密码后的按钮交互印象不清了。可能是：app检测到文本框第一次都输入完毕，且格式无误时，立即将数据传到服务器验证，若返回的结果是该账号已注册且密码无误，则高亮登录按钮；若账号未注册，则高亮立即注册按钮，以提示用户下一步操作。同时提供了两个第三方登录入口，这是必须的，社交网络账号能大幅简化登录和注册的流程，当然，这一点严格点来看，我们得区分Android和iOS平台，因为安卓平台上应用间通信做的比ios好，比方说点击上图中的新浪微博登录，在安卓上可能就是在新页面中走一个授权的操作，但放在ios上，很有可能是弹出个小页面，你得再输入账户和密码，登录微博后再点击授权，再返回应用。

我们说产品最重要的是解决问题，那么这种登录注册的设计主要是解决了什么问题呢？是更快速简单的登录注册流程，如果你用第三方账号登录的话。但是，我觉得这个问题解决的还不够好，登录和注册还是分离的，如果你中途注册到一半，厌烦了，想用第三方账号登录，还得返回上一界面---点击第三方登录按钮---授权登录---返回饭本。当然，我看了下安卓上的饭本后，那边就通过fixed tabs解决的比较好。

另外就是，安卓上谷歌给的SDK比较多，而且也更开放，比如饭本拿到了一个检测用户在这个手机上的登录邮箱，然后直接将该邮箱放到登录页里，省去用户再输入一遍的麻烦。

或者对于 Google+, 还有一个独特的好处就是, 如果你提供了 Google+ 登录的话, Play Store 能够提供 OTA 登录的能力, 特就是说当你的应用被安装到用户的手机上时, 就已经登录好了他的账号, 而无需用户再去登录一遍.

同时饭本的设计师@stephen dat 提到了很重要的一点，就是登录和注册的互通，简单来讲就是降低跳出率，必须要考虑到登录时能一眼看到快捷的第三方登录，注册的时候万一嫌麻烦了，能一眼看到还能用第三方登录。http://www./blog/?p=622

刚才写到我猜测的登录按钮和立即注册按钮可能的一种交互，如果深入点去想，就得计算怎样跟服务器通信，是先验证用户名，再验证密码还是用户名和密码一并提交验证？所以，登录注册的流程还真是不太简单，要考虑的细节很多。

在我输入了一个曾经在饭本上使用过的账号后，登录按钮高亮，这时比较容易就是点击登录按钮了。如果点击登录，提示密码错误也是有可能的，这时我可能就会有点捉急了，看到下面有第三方登录，很有可能就是点击新浪微博登录。

如上图所示，在iOS上用QQ登录饭本的时候，会先跳到手机QQ的界面上去，走一个授权流程。授权并登录后，再返回到饭本。可以说，是有点麻烦的。有趣的是，我在新版的饭本中看到了改善，它们加了两个网页来解决这个问题，通过网页来传递数据，这样省去了在两个应用中跳来跳去的麻烦。下面我将会讲到。

3、饭本（新版，iOS)

上图是饭本的新版，跟旧版相比，简化了登录界面的元素，弱化了注册，通过对比进一步强化了第三方社交账号登录。邮箱输入框，只要检测到输入@符号，确定二字高亮，然后输完密码后点击确定，即登录。若点击立即注册，则会跳到注册界面。

昵称性别等注册信息填完后，点击确定即注册成功了。

点击第三方账号登录，qq和微博，都是在应用中嵌进了两个网页，输完账号和密码后，就到了授权登录了。跟旧版饭本相比，省去了在两个应用中跳来跳去的麻烦。

4、支付宝

支付宝跟其它非阿里系app不同的是，它不提供第三方登录，一方面可能是出于安全性考虑，另一方面可能是加强自家账号的长期稳定性，从而达到跟踪和分析广大用户的数据，为大数据做准备。

由于支付宝获得了访问我手机通讯录的权限，加之检测本机号码应该也不是个难题，同时我之前已经登录过一次，头像缓存在本地，所以它的登陆页，直接显示头像和手机号，只要输入密码即可登录。同时，它提供了多种登录方式，当然都是阿里系的。注册按钮在底部，支付宝的注册流程就是手机号注册，一步一屏，很简单，收到一个验证码，输入验证即可注册。这里我特别实验了下，拿已经注册过的手机号尝试注册了下，再输入完短信验证码点注册时，它弹了个窗提示该手机号已是支付宝用户，是否立即登录，点击立即登录即可跳转到最开始的登录界面，点击”换手机号注册“即重新跳到手机号注册界面。

使用手机号登录时，如果输入本机号码，则点下一步后，直接提示你输入登录密码，也就是说账号和密码输入分离开了，怎么说呢，从使用流程上来说，这样是没问题的，因为正常场景下，就是这样输入的，如果说账号和密码的输入框放在一屏，交互和提示还是不能少，但是不太好组织信息展示，所以干脆做成多屏，这对操作成本来说并没有增加多少。

如果输入的不是本机号码，那么应用会提示考虑到安全性，我们将会对这个手机号进行验证，我们将发送短信验证码到这个手机上。

值得一提的是，支付宝提供了多种登录方式，但只有手机号登录时，下面仍然放了用其他方式登录和注册的入口。考虑到使用支付宝的用户分布广泛，较为大众，年轻人还好，如果给上了点年纪的中年人要记住个邮箱或许会麻烦点，但手机号还是容易记住一些。

下面是支付宝的注册流程

首先，用手机号注册，填完手机号后，点下一步就到了确认短信验证码，值得注意的是，它不是在你输入一个手机号后就开始验证该号有没有注册过，而是在输入完验证码后再检测。若已注册，然后就弹出了上图的toast，换手机号注册或去登录页面。

5、手机淘宝

当点击注册时，会重新走一遍输入手机号--短信验证码--检测是否已注册，若已注册，则会弹出一个toast，可点击直接登录，返回登录界面。也可以换一个手机号注册。这一点和支付宝一致。

手机淘宝跟支付宝做的不太一样。首先手机淘宝的目标用户更为大众，它的登录注册界面做了两个特色功能，一个是没有密码时，用短信登录，一个是密码的明暗文切换。首先我验证了下没有密码短信登录的流程，淘宝这个登录页考虑的比较周全，常用的找回密码功能放在登录按钮左下侧，而当用户想用手机淘宝购物却发现没有注册，而注册流程自己又不清楚怎么操作时，就可以点击“没有密码?用短信登录”点击之后，首先切换到输入手机号的界面，同样，输完手机号点下一步会收到短信验证码，当输入完验证码，此时服务器会检测是否已注册，有一点我觉得淘宝做的不太好的是，在我用已注册的手机号验证时，它直接提示我"为确保账号安全，请验证您的淘宝登录密码“，这里它想表达的意思应该是我已经注册，可验证密码直接登录，用鼓励的语气，而不是莫名其妙的提示。没有试过未注册的号码，也不知道到时是怎么提示。

另外一点就是密码的明暗文切换，这里可能有以下情况：主要要考虑淘宝的用户数和用户特征，中老年用户用淘宝输到一半忘记输到哪了，有没有输错。当然，对一部分年轻人也适合，特别是家庭主妇；不用输完后，点登陆提示密码错误，导致多次登录，减小服务器压力？（YY。。。）

6.EyeEM

EyeEM是国外的一款图片拍照分享应用，类似instagram。它的把功能引导页和登录注册入口放在一块确实不错，很多应用在你首次打开后，是得不断左滑好几次，才能来到登录注册页，而且效果往往不好，因为用户急着看这个应用到底有什么内容，当然，这里也涉及到登陆注册的一个设计，就是在合适的时候才会跳出登录或注册窗口，平常不会干扰你参与到app中去。

嗯，前面提到的饭本，借鉴了这个设计。这种应用最适合图片app,将内容，功能结合的恰到好处。

作为一款社交化的拍照分享app，接入第三方登录是必须考虑的一个问题，eyeem提供了facebook的第三方登录入口，而且将其放在了普通账号的上面，浏览顺序最先看到，做了一定的强化设计。你也可以用eyeem自家的账号登录。

如果你点击加入，就到了注册的页面。可以从上图中看到的是，如果直接注册，要输入四项内容，姓名，用户名，邮箱密码，还得上传个头像。考虑到注册流程确实稍长，所以eyeem在注册页也提供了使用facebook直接登录的入口。

整体上eyeem做的比较好的一点是，它自始至终，在登录和注册页都提供了明显的第三方登录入口。

7、lofter

Lofter是一个轻博客app,浏览优质内容是核心需求，社交是辅助。因此在打开app后，虽然你能看到注册和登录的两个入口，但右下角向左来回滑动的渐变箭头还是提醒你，可以左滑，左滑之后就能直接浏览lofter上显示的默认内容。这里注册的按钮用了黑色，用来强化，当用户首次安装打开lofter时，考虑到用户可能来自两方面：一是Lofter网站上已有的用户，他们要登录的话，还是可以找到登录入口的，这样登录稍弱化也是没关系的。二是从appstore上下载下来，而之前未曾注册过lofter的用户，对他们的强化注册就很有必要。总之，这跟lofter早期吸引用户注册的策略是有关系的。

当用户左滑进入浏览内容的界面时，此时如果他想评论或分享等，就会从窗口底部弹出登录和注册的引导窗口，这种设计也是有人推荐过的，因为当你浏览到喜欢的内容想继续下一步操作时，这时的引导登录或注册或许是效果比较好的；二是我们不会在你刚装完打开app时，就用麻烦的注册或登录流程来妨碍你快速浏览内容的需求；三是lofter本身就不是一个非得登录才能使用的app，未登录时的浏览默认内容也是一个需求点。

点击登录时，除了常见的邮箱/网易通行证登录外，作为一个社交化轻博客应用，使用第三方登录，借以更多的了解你是很有必要的，因此提供了微博和qq以及可能是目标用户之一的大学生常用的人人网账号。

注册这里，强化了第三方账号注册，弱化了用邮箱注册，和上面一样的道理。

8、豆瓣小组

豆瓣小组基本上和lofer是一致的，不过它一进来的首屏就是内容展示，够直接。同样是app内引导登录和注册。

注册时需要激活码，第一眼看没看明白，以为是要向好友索要，其实就是短信验证码，嗯，这里是一个网页。

9、百度云

百度云提供了多种登录方式，并强化用自家账号登录，一来保证安全性，二来好管理。

比如我自己就有一次不知道是串号还是账号被盗了的经历，走百度自家账号得人工申诉的过程还是效率挺高的。

登录页的右上角是注册页，这里的注册只有手机号注册，并且不需要验证码。值得一提的是百度云的登陆保护功能做得不错，PC网页上需要输入验证码才能登录，手机上使用百度云，则是先要短信回复Y验证后，才能登录。

写到这，移动端的登录注册体验就写完了。总体来说，各有特点，主要还是看各自要解决的问题，和应用本身的特征。

是否有社交元素，需要获取更多用户的数据？是，则提供第三方登录入口/在注册页增加几个资料选项。

是否必须登录才能使用？否，则提供应用内引导登录或注册，因为未登录时浏览内容也是个需求点。

做成多屏滑动切换还是单屏切换tab？需要看登录的验证流程是怎样的，像支付宝，evernote那种就做成了多屏，而百度云这种则做成了单屏。

登录和注册流程如何顺畅走通？是全部填完后验证，还是填一个切换到下一项时就已经验证完毕，还是先验证完后，再决定下一项怎么显示，是提示你直接登录，还是提示可以注册。

流程和交互，实现成本和操作便捷是要持续考虑的问题。

移动app登录和注册功能观察

字数4936 阅读4698 评论0 喜欢12

收藏文章 分享

现在在智能机上下载一个apps是再简单不过的事了，而安装完后首次打开app时，用户首先看到的就是登陆注册页了，当然，不排除有一些非账号登录的小众应用等。

登陆注册页往往还会和应用引导页揉在一块，之前看到有文章说进入应用主界面前的引导页往往没有达到预期的效果，在我看来，这种硬塞式的引导，对于急着去把玩应用的用户来说，确实是有阻碍的。但我们今天只谈登陆注册流程。

我收集了一些自己觉得做得各有特色，兼具代表性的app登录注册流程，同时写了点自己的看法。

1、Evernote

evernote首次打开时，没有splash screen,而是直接到了登陆注册页，对于一个工具型应用，必须登录账号才能看到和编辑你的信息。值得注意的是，这里只有一个输入框，你不用纠结是注册还是登录，也就是说不用另外去分辨登录和注册的入口在哪里。

输入一个账号，然后点击下一步，此时app向EverNote的服务器上传这个账号的信息，请求服务器确认是否已注册。

这里我随便拿了一个邮箱测试了下，这个账号应该是没注册过的，所以点击下一步后看到的是”创建新账户“的提示，自然的，它就会提示你给这个新账号设置一个密码。最后点击创建账户，就能进入主面板，可以开始写笔记了。同时常见的”同意服务条款和隐私条款“的复选框，我们也没看到，可以说这一步，给了我去选择的麻烦，两步直接到位，同时一句”点击创建账户，表示你同意服务条款和隐私条款“也省去了复选框的抢占焦点，让我集中注意力在唯一的一个输入框中。

当然，如果最后服务器返回的结果是这个账号已注册，那么就会出现上图，它提示你正在以该账号登录印象笔记，只要你再输入登录密码，那你就能直接登录了。

可以说这个登录注册的流程处理的非常简单高效。但是我们也有必要注意这个产品本身的背景，单纯的从交互上说，登录注册流程是简单高效，但是我们还要尝试理解这样做背后的意图，为设么这么设计？我们可以直接借鉴过去吗？首先，evernote是一个笔记记录工具，作为工具型产品，本身的内容是来自用户自己生成，而且隐私性很强。所以一个简单的账号和密码就够了，它不用像一些有社交元素和个性化推荐元素的产品，需要通过在登陆注册的时候，多弄几个信息选项，来收集记录分析你的资料，从而给你推荐服务。它只要保证简单，高效和安全就行了。因此它可以只有三步，用户不用思考太多，照做就行。

2、饭本(旧版本，ios）

饭本是国内的一款通过好友推荐饭店，来帮你解决吃饭问题的app。既然是以推荐和社会化关系来驱动的产品，那么它的注册应该就不能像EverNote那样简单一个账号和密码，而是会多收集一些用户信息，以便更好的完成推荐服务。

图中是饭本的登录首页，可以看到这一屏将登录和注册放在两个平级按钮上。用户输入完账号和密码后，可以选择登录或者立即注册。由于截屏离我写这篇文章有一段时间，而手机上的饭本已经更新到了新版本，所以对上图中的输入完账号和密码后的按钮交互印象不清了。可能是：app检测到文本框第一次都输入完毕，且格式无误时，立即将数据传到服务器验证，若返回的结果是该账号已注册且密码无误，则高亮登录按钮；若账号未注册，则高亮立即注册按钮，以提示用户下一步操作。同时提供了两个第三方登录入口，这是必须的，社交网络账号能大幅简化登录和注册的流程，当然，这一点严格点来看，我们得区分Android和iOS平台，因为安卓平台上应用间通信做的比ios好，比方说点击上图中的新浪微博登录，在安卓上可能就是在新页面中走一个授权的操作，但放在ios上，很有可能是弹出个小页面，你得再输入账户和密码，登录微博后再点击授权，再返回应用。

我们说产品最重要的是解决问题，那么这种登录注册的设计主要是解决了什么问题呢？是更快速简单的登录注册流程，如果你用第三方账号登录的话。但是，我觉得这个问题解决的还不够好，登录和注册还是分离的，如果你中途注册到一半，厌烦了，想用第三方账号登录，还得返回上一界面---点击第三方登录按钮---授权登录---返回饭本。当然，我看了下安卓上的饭本后，那边就通过fixed tabs解决的比较好。

另外就是，安卓上谷歌给的SDK比较多，而且也更开放，比如饭本拿到了一个检测用户在这个手机上的登录邮箱，然后直接将该邮箱放到登录页里，省去用户再输入一遍的麻烦。

或者对于 Google+, 还有一个独特的好处就是, 如果你提供了 Google+ 登录的话, Play Store 能够提供 OTA 登录的能力, 特就是说当你的应用被安装到用户的手机上时, 就已经登录好了他的账号, 而无需用户再去登录一遍.

同时饭本的设计师@stephen dat 提到了很重要的一点，就是登录和注册的互通，简单来讲就是降低跳出率，必须要考虑到登录时能一眼看到快捷的第三方登录，注册的时候万一嫌麻烦了，能一眼看到还能用第三方登录。http://www./blog/?p=622

刚才写到我猜测的登录按钮和立即注册按钮可能的一种交互，如果深入点去想，就得计算怎样跟服务器通信，是先验证用户名，再验证密码还是用户名和密码一并提交验证？所以，登录注册的流程还真是不太简单，要考虑的细节很多。

在我输入了一个曾经在饭本上使用过的账号后，登录按钮高亮，这时比较容易就是点击登录按钮了。如果点击登录，提示密码错误也是有可能的，这时我可能就会有点捉急了，看到下面有第三方登录，很有可能就是点击新浪微博登录。

如上图所示，在iOS上用QQ登录饭本的时候，会先跳到手机QQ的界面上去，走一个授权流程。授权并登录后，再返回到饭本。可以说，是有点麻烦的。有趣的是，我在新版的饭本中看到了改善，它们加了两个网页来解决这个问题，通过网页来传递数据，这样省去了在两个应用中跳来跳去的麻烦。下面我将会讲到。

3、饭本（新版，iOS)

上图是饭本的新版，跟旧版相比，简化了登录界面的元素，弱化了注册，通过对比进一步强化了第三方社交账号登录。邮箱输入框，只要检测到输入@符号，确定二字高亮，然后输完密码后点击确定，即登录。若点击立即注册，则会跳到注册界面。

昵称性别等注册信息填完后，点击确定即注册成功了。

点击第三方账号登录，qq和微博，都是在应用中嵌进了两个网页，输完账号和密码后，就到了授权登录了。跟旧版饭本相比，省去了在两个应用中跳来跳去的麻烦。

4、支付宝

支付宝跟其它非阿里系app不同的是，它不提供第三方登录，一方面可能是出于安全性考虑，另一方面可能是加强自家账号的长期稳定性，从而达到跟踪和分析广大用户的数据，为大数据做准备。

由于支付宝获得了访问我手机通讯录的权限，加之检测本机号码应该也不是个难题，同时我之前已经登录过一次，头像缓存在本地，所以它的登陆页，直接显示头像和手机号，只要输入密码即可登录。同时，它提供了多种登录方式，当然都是阿里系的。注册按钮在底部，支付宝的注册流程就是手机号注册，一步一屏，很简单，收到一个验证码，输入验证即可注册。这里我特别实验了下，拿已经注册过的手机号尝试注册了下，再输入完短信验证码点注册时，它弹了个窗提示该手机号已是支付宝用户，是否立即登录，点击立即登录即可跳转到最开始的登录界面，点击”换手机号注册“即重新跳到手机号注册界面。

使用手机号登录时，如果输入本机号码，则点下一步后，直接提示你输入登录密码，也就是说账号和密码输入分离开了，怎么说呢，从使用流程上来说，这样是没问题的，因为正常场景下，就是这样输入的，如果说账号和密码的输入框放在一屏，交互和提示还是不能少，但是不太好组织信息展示，所以干脆做成多屏，这对操作成本来说并没有增加多少。

如果输入的不是本机号码，那么应用会提示考虑到安全性，我们将会对这个手机号进行验证，我们将发送短信验证码到这个手机上。

值得一提的是，支付宝提供了多种登录方式，但只有手机号登录时，下面仍然放了用其他方式登录和注册的入口。考虑到使用支付宝的用户分布广泛，较为大众，年轻人还好，如果给上了点年纪的中年人要记住个邮箱或许会麻烦点，但手机号还是容易记住一些。

下面是支付宝的注册流程

首先，用手机号注册，填完手机号后，点下一步就到了确认短信验证码，值得注意的是，它不是在你输入一个手机号后就开始验证该号有没有注册过，而是在输入完验证码后再检测。若已注册，然后就弹出了上图的toast，换手机号注册或去登录页面。

5、手机淘宝

当点击注册时，会重新走一遍输入手机号--短信验证码--检测是否已注册，若已注册，则会弹出一个toast，可点击直接登录，返回登录界面。也可以换一个手机号注册。这一点和支付宝一致。

手机淘宝跟支付宝做的不太一样。首先手机淘宝的目标用户更为大众，它的登录注册界面做了两个特色功能，一个是没有密码时，用短信登录，一个是密码的明暗文切换。首先我验证了下没有密码短信登录的流程，淘宝这个登录页考虑的比较周全，常用的找回密码功能放在登录按钮左下侧，而当用户想用手机淘宝购物却发现没有注册，而注册流程自己又不清楚怎么操作时，就可以点击“没有密码?用短信登录”点击之后，首先切换到输入手机号的界面，同样，输完手机号点下一步会收到短信验证码，当输入完验证码，此时服务器会检测是否已注册，有一点我觉得淘宝做的不太好的是，在我用已注册的手机号验证时，它直接提示我"为确保账号安全，请验证您的淘宝登录密码“，这里它想表达的意思应该是我已经注册，可验证密码直接登录，用鼓励的语气，而不是莫名其妙的提示。没有试过未注册的号码，也不知道到时是怎么提示。

另外一点就是密码的明暗文切换，这里可能有以下情况：主要要考虑淘宝的用户数和用户特征，中老年用户用淘宝输到一半忘记输到哪了，有没有输错。当然，对一部分年轻人也适合，特别是家庭主妇；不用输完后，点登陆提示密码错误，导致多次登录，减小服务器压力？（YY。。。）

6.EyeEM

EyeEM是国外的一款图片拍照分享应用，类似instagram。它的把功能引导页和登录注册入口放在一块确实不错，很多应用在你首次打开后，是得不断左滑好几次，才能来到登录注册页，而且效果往往不好，因为用户急着看这个应用到底有什么内容，当然，这里也涉及到登陆注册的一个设计，就是在合适的时候才会跳出登录或注册窗口，平常不会干扰你参与到app中去。

嗯，前面提到的饭本，借鉴了这个设计。这种应用最适合图片app,将内容，功能结合的恰到好处。

作为一款社交化的拍照分享app，接入第三方登录是必须考虑的一个问题，eyeem提供了facebook的第三方登录入口，而且将其放在了普通账号的上面，浏览顺序最先看到，做了一定的强化设计。你也可以用eyeem自家的账号登录。

如果你点击加入，就到了注册的页面。可以从上图中看到的是，如果直接注册，要输入四项内容，姓名，用户名，邮箱密码，还得上传个头像。考虑到注册流程确实稍长，所以eyeem在注册页也提供了使用facebook直接登录的入口。

整体上eyeem做的比较好的一点是，它自始至终，在登录和注册页都提供了明显的第三方登录入口。

7、lofter

Lofter是一个轻博客app,浏览优质内容是核心需求，社交是辅助。因此在打开app后，虽然你能看到注册和登录的两个入口，但右下角向左来回滑动的渐变箭头还是提醒你，可以左滑，左滑之后就能直接浏览lofter上显示的默认内容。这里注册的按钮用了黑色，用来强化，当用户首次安装打开lofter时，考虑到用户可能来自两方面：一是Lofter网站上已有的用户，他们要登录的话，还是可以找到登录入口的，这样登录稍弱化也是没关系的。二是从appstore上下载下来，而之前未曾注册过lofter的用户，对他们的强化注册就很有必要。总之，这跟lofter早期吸引用户注册的策略是有关系的。

当用户左滑进入浏览内容的界面时，此时如果他想评论或分享等，就会从窗口底部弹出登录和注册的引导窗口，这种设计也是有人推荐过的，因为当你浏览到喜欢的内容想继续下一步操作时，这时的引导登录或注册或许是效果比较好的；二是我们不会在你刚装完打开app时，就用麻烦的注册或登录流程来妨碍你快速浏览内容的需求；三是lofter本身就不是一个非得登录才能使用的app，未登录时的浏览默认内容也是一个需求点。

点击登录时，除了常见的邮箱/网易通行证登录外，作为一个社交化轻博客应用，使用第三方登录，借以更多的了解你是很有必要的，因此提供了微博和qq以及可能是目标用户之一的大学生常用的人人网账号。

注册这里，强化了第三方账号注册，弱化了用邮箱注册，和上面一样的道理。

8、豆瓣小组

豆瓣小组基本上和lofer是一致的，不过它一进来的首屏就是内容展示，够直接。同样是app内引导登录和注册。

注册时需要激活码，第一眼看没看明白，以为是要向好友索要，其实就是短信验证码，嗯，这里是一个网页。

9、百度云

百度云提供了多种登录方式，并强化用自家账号登录，一来保证安全性，二来好管理。

比如我自己就有一次不知道是串号还是账号被盗了的经历，走百度自家账号得人工申诉的过程还是效率挺高的。

登录页的右上角是注册页，这里的注册只有手机号注册，并且不需要验证码。值得一提的是百度云的登陆保护功能做得不错，PC网页上需要输入验证码才能登录，手机上使用百度云，则是先要短信回复Y验证后，才能登录。

写到这，移动端的登录注册体验就写完了。总体来说，各有特点，主要还是看各自要解决的问题，和应用本身的特征。

是否有社交元素，需要获取更多用户的数据？是，则提供第三方登录入口/在注册页增加几个资料选项。

是否必须登录才能使用？否，则提供应用内引导登录或注册，因为未登录时浏览内容也是个需求点。

做成多屏滑动切换还是单屏切换tab？需要看登录的验证流程是怎样的，像支付宝，evernote那种就做成了多屏，而百度云这种则做成了单屏。

登录和注册流程如何顺畅走通？是全部填完后验证，还是填一个切换到下一项时就已经验证完毕，还是先验证完后，再决定下一项怎么显示，是提示你直接登录，还是提示可以注册。

流程和交互，实现成本和操作便捷是要持续考虑的问题。