产品功能拆解（1）——Web登录

    本系列会以产品设计中的常见功能为例，从简单到深入讲解如何进行产品设计。

    登录是几乎是所有产品都会涉及到的功能，今天我们分享Web的登录，App上的登录下次分享。Web登录做法主要分为两种，进入登录和流程登录：

    （1）进入登录，也可以理解为需要用户信息的登录。

    比如QQ和微信这样的封闭式应用，不登录就无法使用；还比如京东/天猫的个人中心，当你点击链接的时候，需要先登录。这种做法的特点是，凡是与“我”有关的内容都需要登录，其实也比较好理解，不登录无法读取个人信息，自然无法使用相关功能。这种登录页的设计通常为单独的登录页，如下图：

    我们注意到这个页面有几个特点：

    a、京东头部的业务导航条不见了，整个页面引导你去做的就是那个大大的登录按钮，传达的信息就是在这个页面用户只需要完成登录这个动作就好了，如果没有账号，则去注册。总之，与账号不相关的操作，一律不引导。从产品层面提升登录的成功率，是增加网站活跃用户数的一个比较好方法。

    b、背景是一个无法点击的可替换的广告图。这是希望通过广告图传达的各种活动，勾引用户去登录/注册，减少用户在登录/注册时的犹豫时间。一定程度提升了转化率。

    c、页面元素：与登录相关的邮箱/用户名/手机号输入框、密码输入框、自动登录复选框和忘记密码链接，还有最大的登录按钮。与注册相关的是立即注册链接。最下方的第三方登录其实与登录和注册都相关（关于第三方登录和注册今天不细说）。

    从流程上说，登录流程包括三个方面：来源、验证、目标页面。例如：当我们在京东首页点击页面上方的我的京东链接时，这个动作的来源是首页，验证的动作发生在登录页，当通过验证后，跳转到目标页——我的京东。流程图如下：

    这个流程是建立在点击按钮验证的基础上，如果是文本框失去焦点验证则是另外的写法，大家可以自行尝试。

    另外，如果不点击目标页，直接点击页面右上方的登录链接，登录成功后通常会跳转回当前页。也就是在首页点击登录，登录成功后仍然跳转回首页。

    （2）流程登录

    流程登录的意思是，用户在进行某一特定流程的时候，其中一个环节需要登录。比如在电商网站上的购物流程：用户选择商品➡放入购物车➡提交订单➡支付➡支付成功。在这个流程中，从提交订单往后的环节都是需要登录的。登录流程也与进入式登录一样，都是来源、验证、目标页面。但是形式稍有不同，我们在京东上看点击去结算按钮时，看到的登录是这样的：

    登录不再是跳转到单独的登录页，而是在当前页面打开了一个登录对话框，这种处理方式叫做快速登录。这么做的原因是，用户处于一个完整的操作流程中，当进行到其中某一步的时候由于系统需要用户信息，在不打断用户操作流程（或者是将登录带来的打断流程的体验降到最低）的前提下，通常都会使用快速登录。也就是让用户越快完成登录操作越好，从而更快的进入下一个操作环节。

    今天就到这里，下次我们来分享App中的登录。