编辑导读：登录注册对于大部分app来说，都是最基础的模块，但设计一个好的登录注册系统并不轻松。本文作者通过对比几款APP的登录注册功能撰写了一份注册功能PRD，包括版本管理、流程图、交互设计、交互原型、文档说明，与大家分享。

登录注册几乎是所有APP都会有的功能，随着APP的发展和设计，界面形式也从拟物到扁平再到精细化发展。登录注册也有了越来越多的设计表现，同时许多APP也扩展了更多的第三方登录。

通过对比以下几款APP的登录注册功能，按常用格式撰写了一份注册功能PRD，包括版本管理、流程图、交互设计、交互原型、文档说明。

登录注册功能需求文档【PRD】：

用户在使用APP的过程中，如果创建账号，可以方便对自己创建的资料和信息进行管理，如果用户不喜欢创建账号，喜欢单机使用，也可以为用户创建游客模式，在创建账号的情况下，也可以使用产品的部分功能。

另一方面，公司获取用户使用产品过程中的行为资料后，可以为用户提供更好的服务，甚至是结合用户特点的个性化的服务。因此创建账号是必不可少的。

吸引一个新的用户来注册使用的过程中，如果用户遇到了阻碍，容易使新用户流失，怎样让用户方便快捷地注册账号，从而开始尝试使用产品呢。总结了其他产品的登录注册的设计方式，尝试了以下设计——将首页简化为两个重点，产品提供什么服务，通过哪些方式可以获取产品的服务。

首先在未登录的页面通过产品或品牌Logo展示这是一个什么产品，可以为用户提供什么服务。其次在页面中心提供最主要的获取途径，密码登录或短信登录。最后，辅以其他更多登录方式或功能。为用户简化信息复杂度，降低用户注册负担。并且，使用过程中的每个页面，都保持页面简洁，内容第一。

不同的使用流程决定了产品不同的流程设计，不同的流程设计决定了不同的程序设计。在登录注册中，用户可以选择通过三种方式登录，用户密码登录，短信登录，第三方登录。

不同的登录方式相应地有三种不同的登录流程图。在前期预先了解产品的使用流程可以使设计和开发可以提前了解到相关信息，并考虑设计与实现，有助于团队高效协作。此外，如果遇到不能实现的功能，还可以提前商量解决，如第三方接口的协调。

登录流程图：

找回密码流程图：

页面流程图：

页面流程图可以帮助明确用户在完成任务的过程中，有哪些可能的使用方式，从而使使用流程被具体化，并展示了页面之间的联系和衔接。

短信登录交互页面

文档说明：

前置条件：用户点击“短信登录”按钮，进入手机验证页面

后置条件：完成“登录”操作，若是首次登录，进入信息资料页；若不是首次登录，进入首页

手机验证页面描述：

注：所有表单不允许录入空格等特殊符号

对手机号码输入的不同情况，产生不同的Toast提示，可以选用以下文本提示。

手机号正确填写的情况下，对验证码输入的不同情况，产生不同的Toast提示。可以选用以下文本提示。

密码登录交互页面

文档说明：

前置条件：用户点击“用户登录”按钮，进入用户密码登录页面

后置条件：完成“登录”操作，进入首页

用户密码登录页面描述：

注：所有表单不允许录入空格等特殊符号

对手机号码输入的不同情况，产生不同的Toast提示，可以选用以下文本提示。

手机号正确填写的情况下，对密码输入的不同情况，产生不同的Toast提示。可以选用以下文本提示。

手机号正确填写，忘记密码或想要重置密码，也可以通过页面中的

来找回按钮。在设置密码页面，手机号和验证码都正确填写时，可以根据不同的密码输入提示用户。

第三方登录交互页面

文档说明：

前置条件：用户点击选择第三方登录，分别进入不同的授权页面

后置条件：完成“登录”操作，若是首次登录，进入手机号绑定页；若不是首次登录，进入首页

第三方登录页面详细描述：

在点击第三方登陆页面后，点击确认，授权第三方登录。

在验证原型的过程中，可以发现一些使用过程中的问题，并进行记录。最后附上两个交互原型及其使用说明。

短信登录交互原型：

使用说明

1. 点击短信登录
2. 手机号为空，点击“获取验证码”
3. 输入手机号“139”，点击“获取验证码”
4. 输入手机号“139”和验证码“456789”，点击登录
5. 点击“跳过”跳过，返回初始页面

可以按提示操作使用以下原型http://dwz.date/bNzQ。

密码登录交互原型：

使用说明

1. 点击用户登录
2. 输入手机号“139”，点击登录
3. 输入手机号“139”，输入密码12313，点击登录
4. 输入手机号“139”和密码“426152”，点击登录
5. 点击“我的”，点击“退出”返回初始页面

可以按提示操作使用原型http://dwz.date/bNzr。

本文由 @candy 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。