大作业 --APP 的注册与登录
题目
挑一个产品，想一个你想做的新功能，然后写个相对完整的文档。
我选择设计「APP 的注册登录」功能。因为基本上大部分软件都会涉及到这个部分。
一句话描述 ：将注册于登录功能合二为一
1. 思维导图
2. 流程图
3. 核心功能介绍
3.1 注册/登录的方法
1. 通过手机号码/邮箱地址进行「注册」或者「登录」
如果账号不存在，页面会转到注册页面。
如果用户选择用手机注册，则会向手机发送一个 4 位数的验证码。
如果用户选择用电子邮件注册，则会发送一个验证链接到电子邮件。
一旦用户输入 4 位数验证码或点击链接，账户就会自动创建。
如果账户存在，页面会转到登录页面。用户可以选择用「电子邮件+密码」或「手机号码+验证码」登录。
2. 第三方账号登录
有 3 种方式可以进行第三方登录。微信、QQ、邮箱。
3.2 安全问题
1. 验证码/验证链接
注册时需要验证码，防止有些人用别人的手机/邮件注册。
2. 密码
在输入密码时，会有一个互动的 "眼睛 "图标，让用户决定是否显示密码。当用户用手机注册/登录时，不需要密码。
其智能手机中的系统可能会为用户记住密码。
3. 用户协议
用户注册或登录时，用户协议是必须的。 用户点击继续按钮即表示同意安全协议。
3.3 通知
1. Toast 信息将不以独立的对话框显示。它们将显示在页面上，以确保用户可以在任何不正确的情况下继续他们正在做的事情。
密码不正确。"请输入正确的密码"。
不正确的账户格式。"请输入正确的邮箱/电话"
没有互联网连接。"没有互联网连接"
密码过于简单。"请创建一个长度为 8-16 的密码，密码中包含数字、特殊字符、大写字母和小写字母"。
2. 如果是很重要的流程，将以提示框提醒用户，例如“忘记密码的重置邮件提示框”
3.4 其他
1. 保存账户。用户注销时将保存账户。
2. 删除账户。用户可以在删除列表中的旧账户信息。
4. Axure 原型展示
点击以下链接即可查看原型文件，原型文件已经加入大量交互动画，可以点击各按钮进行体验。
https://lanhuapp.com/url/lPphO
5. 页面功能介绍
5.1 登录注册首页
该页面是为用户提供登录或注册功能的第一页面，是所有其他功能的开端。具体功能如下：
当用户在文本框中输入信息时，文本框最右侧才出现“×”，点击“×”将清空所有输入的信息，用户可以重新输入。
当用户点击“继续按钮的时候”，将会触发以下功能：
确定用户是输入邮箱还是手机号，并跳转到不同的页面。
判断账号是否存在，存在的话跳转到登录页面，不存在的话跳转到注册页面。
验证用户输入的信息格式是否正确，如果格式不正确，则在屏幕最上方给出 toast 提示“当前邮箱地址不正确”或者“当前手机号码不正确”。
如果用户未输入任何信息，则在屏幕最上方给出 toast 提示“请输入合法邮箱/手机号”
如果用户输入合法账号，则根据本文「2. 流程图」，跳转到对应的页面
点击第三方软件的图标后将显示软件登录提示框，此提示框为最顶层，此时其他交互都不能点击。提示框提供两个功能：点击图标表示确认、点击文字“取消”退出提示框。
5.2 邮箱注册
该页面的主要功能是实现邮箱注册，具体功能如下：
第一个文本框
用户在「登录注册首页」输入的电子邮件地址应直接显示在第一个输入框中，如果用户发现输入框中存在错误，他们可以直接在文本框中更改。
当用户单击文本框时，文本框的右侧将显示一个“×”，用于清除用户输入的所有信息。
第二个文本框
用户可以在第二个文本框中输入密码。当用户输入密码时，小眼睛的图标将出现在第二个文本框的右侧，单击图标将密码显示从纯文本点切换到小数点。
用户可以通过单击蓝色字体"PortalHiker 的条款"和"隐私政策"跳转到相应的页面。
注册按钮
当用户单击"注册"按钮时，需要验证密码是否与以下格式匹配，如果没有，则在屏幕顶部给出 Toast 提示。
密码必须包含至少 8 个字符，包括以下至少两个字符：大写字母、小写字母、数字和符号。
如果用户填写的密码和电子邮件正确，则跳转到软件主页。
此页面还提供第三方登录。
5.3 手机号码注册
该页面的主要功能是实现手机号码注册，具体功能如下：
第一个文本框
用户在「登录注册首页」输入的电话号码应直接显示在第一个输入框中，如果用户发现输入框中有错误，他们可以直接在此页面中更改。
电话号码以 xxx-xxxx-xxxx 格式显示。
当用户单击第一个文本框时，文本框的右侧将显示一个“×”，用于清除用户输入的所有信息。
当用户单击"发送顶点代码"时，应用程序在屏幕给出 Toast 提示，提示用户已发送验证码，按钮上的文本更改为 60 秒倒计时。
用户可以在第二个文本框输入验证码。
用户可以通过单击蓝色字体"服务协议"和"隐私政策"跳转到相应的页面。
点击“注册”按钮
如果验证码未填写，则在屏幕顶部显示 Toast 提示。
用户会验证已填写的验证码是否正确，如果没有，则在屏幕顶部显示 Toast 提示。
如果验证代码正确，将跳转到软件主页。
更改按钮的颜色以表示用户已成功单击该按钮。
此页面还提供第三方登录。
5.4 邮箱登录
该页面的主要功能是实现邮箱登录，具体功能如下：
第一个文本框
用户在「登录注册首页」输入的电子邮件地址应直接显示在第一个输入框中，如果用户发现输入框中存在错误，他们可以直接在此页面中更改。
当用户单击第一个文本框时，文本框的右侧将显示一个“x”，用于清除用户输入的所有信息。
第二个文本框
用户可以在第二个文本框中输入密码。
当用户输入密码时，小眼睛的图片将出现在第二个文本框的右侧，单击图标将密码显示从纯文本点切换到小数点。
单击"忘记密码"，警报框将弹出屏幕中间，用户将单击警报框上的"确认"按钮发送电子邮件以重置密码。
点击“登录”按钮
更改按钮的颜色以表示用户已成功单击该按钮。
验证密码是否正确，如果没有，则在屏幕顶部显示 Toast 提示。
当用户的电子邮件和密码正确时，将跳转到软件主页。
此页面还提供第三方登录。
5.5 手机号码登录
该页面的主要功能是实现邮箱登录，具体功能如下：
第一个文本框
用户在「登录注册首页」输入的电话号码应直接显示在第一个输入框中，如果用户发现输入框中有错误，他们可以直接在此页面中更改。
电话号码以 xxx-xxxx-xxxx 格式显示。
当用户单击第一个文本框时，文本框的右侧将显示一个“×”，用于清除用户输入的所有信息。
当用户单击"发送顶点代码"时，应用程序在屏幕给出 Toast 提示，提示用户已发送验证码，按钮上的文本更改为 60 秒倒计时。
点击“登录”按钮
如果验证码未填写，在屏幕顶部显示 Toast 提示。。
用户验证填写的验证码是否正确，如果没有，则屏幕顶部会发出烤面包提示。
如果验证代码正确，就跳转到主页。
当用户单击"登录"按钮时，更改按钮的颜色以表示用户已成功单击该按钮。
此页面还提供第三方登录。
5.6 服务协议
该页面的主要功能是告知软件的服务协议，用户可以滑动页面查看所有协议细节。
5.7 隐私协议
该页面的主要功能是告知软件的隐私协议，用户可以滑动页面查看所有协议细节。
6 问题总结
功能介绍的粒度要把握到什么程度，我这种作法是否会过于细节？
功能设计是否需要给出详细的具体实现？因为是开发背景出身，我设计的时候就会想到某个功能应该放在哪个按钮，也许是可以放在其他按钮上实现。那么，我要不要在就在文档中写出自己的想法呢？我的想法会影响开发吗？
7 打个小广告
大家好，我是一凡，目前是复旦大学的计算机专业研究生。感谢二爷的课，让我这段时间受益匪浅。我建了一个免费的知识星球「产品新人大本营」，希望借助这个星球，大家能够一起分享产品经理工作中的实用工具和书单等。
如果你已经是产品人，可以在这里和大家一起讨论做产品的方法和心得。
如果你是想入门或者想转行的新手，我们也可以一起讨论有趣的话题，分享面试技巧和岗位的招聘信息。
分享一些星球的精华文章，希望对你有帮助
「 产品经理，需求分析师，项目经理的区别 」
「 有哪些让人很舒服的沟通技巧？」
「 有哪些好用的研报网站推荐？」
「 有哪些好用的网站推荐？ 」
「 产品经理画图工具推荐 」
版权声明: 本文为 InfoQ 作者【王一凡】的原创文章。
原文链接:【http://xie.infoq.cn/article/35c63b7d0036de06e73820d0d】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2018.08.01 加入
还未添加个人简介
评论