登录注册对于大部分app来说,都是最基础的模块,但设计一个好的登录注册系统并不轻松。本文通过对比几款APP的登录注册功能撰写了一份注册功能PRD,包括版本管理、流程图、交互设计、交互原型、文档说明,与大家分享。
登录注册几乎是所有APP都会有的功能,随着APP的发展和设计,界面形式也从拟物到扁平再到精细化发展。登录注册也有了越来越多的设计表现,同时许多APP为了获取各大平台的用户流量也使用第三方登录,减少了用户的操作复杂度。
通过对比以下几款APP的登录注册功能,按常用格式撰写了一份注册功能PRD,包括版本管理、流程图、交互设计、交互原型、文档说明。
登录注册功能需求文档【PRD】:
版本号
时间
修订内容
修订人
备注
V1.0.1
2020/09/02
注册登录
wongpeng
初稿评审
用户在使用APP的过程中,如果创建账号,可以方便对自己创建的资料和信息进行管理,如果用户不喜欢创建账号,也可以为用户开启稍后登录,在未创建账号的情况下,也可以使用产品的部分功能。
另一方面,在产品里获取用户使用产品过程中的行为数据后,可以为用户提供更好的服务,甚至是结合用户特点的个性化的服务。因此创建账号是必不可少的。
吸引一个新的用户来注册使用的过程中,如果用户遇到了阻碍,容易使新用户流失,怎样让用户方便快捷地注册账号,从而开始尝试使用产品呢。总结了其他产品的登录注册的设计方式,尝试了以下设计——将首页简化为两个重点,产品提供什么服务,通过哪些方式可以获取产品的服务。
首先在未登录的页面通过产品slogen或品牌Logo展示这是一个什么产品,可以为用户提供什么服务。其次在页面中心提供最主要的获取途径,密码登录或短信登录,第一次登录即是注册,登陆成功便跳转产品下一个信息页。最后,辅以其他更多登录方式或功能。为用户简化信息复杂度,降低用户注册负担。并且,使用过程中的每个页面,都保持页面简洁,内容第一。
不同的使用流程决定了产品不同的流程设计,不同的流程设计决定了不同的程序设计。在登录注册中,用户可以选择通过三种方式登录,用户密码登录,短信登录,第三方登录。
不同的登录方式相应地有三种不同的登录流程图。在前期预先了解产品的使用流程可以使设计和开发可以提前了解到相关信息,并考虑设计与实现,有助于团队高效协作。此外,如果遇到不能实现的功能,还可以提前商量解决,如第三方接口的协调。
登录流程图:

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

手机短信登录界面交互流程:
文档说明:
前置条件:用户点击“登录”操作首先进入“短信登录”界面,界面可选择“账号密码”登录
后置条件:完成“登录”操作,若是首次登录,进入信息资料页;若不是首次登录,进入首页
手机验证页面描述:
注:所有表单不允许录入空格等特殊符号

这里为了减少用户操作复杂度,在验证码用户点击“获取验证码按钮”后自动打开输入验证码页,该页面在用户输入正确验证码后自动跳转登陆成功后的页面。验证码可复制粘贴。
注意:若验证码已发送,在锁定期内,未输入验证码用户点击返回到获取验证码页面再点击时,不能再次触发发送验证码。
对手机号码输入的不同情况,产生不同的Toast提示,可以选以下文本提示。
手机号正确填写的情况下,对验证码输入的不同情况,产生不同的Toast提示。可以选用以下文本提示。
密码登录交互页面:

文档说明:
前置条件:用户点击“账号密码登录”,进入账号密码登录页面
后置条件:完成“登录”操作,进入首页
用户密码登录页面描述:
注:所有表单不允许录入空格等特殊符号

对手机号码输入的不同情况,产生不同的Toast提示,可以选用以下文本提示。
手机号正确填写的情况下,对密码输入的不同情况,产生不同的Toast提示。可以选用以下文本提示。
手机号正确填写,忘记密码或想要重置密码,也可以通过页面中的“找回密码”来找回。在设置密码页面,手机号和验证码都正确填写时,可以根据不同的密码输入提示用户。
文档说明:
前置条件:用户点击选择第三方登录,分别进入不同的授权页面
后置条件:完成“登录”操作,若是首次登录,进入手机号绑定页,不想绑定可有选择性点击“稍后再说”进入首页;若不是首次登录,进入首页
第三方登录页面详细描述:
在点击第三方登陆页面后,点击确认,授权第三方登录。
本文由37°5【https://www.alvinxiao.com 】【https://blog.alvinxiao.com】原创,转载请注明来源。请注意原创和打造和谐的网络环境,谢谢!
第三方登录交互页面