登录注册的设计

最近在接触登录注册的设计，就趁机整理下这个需求的进行步骤~因为涉及到公司的信息，所以我写的比较简单，希望从思考的步骤而言有一个整理

需求及确定（账号系统，风险等等）

首先登录注册是设计到账号系统的，那么首先要确定账号系统如何连接，是重新做一套还是和名下某软件合并。像陌陌和哈你直播的账号基本是共通的。

同时共通的方式有几点：

1. 只是可以登录，陌陌的账号可以用于哈你直播的登录
2. 是否需要同步信息过去，在整个新软件设计的时候需要确定某一部分的数据是否要同步过去，比如同样关注的人，发布的消息帖子等等。

确定流程

在确定整个业务后，根据确定出来的去制定整体的流程。比如登录注册之后是否必须填资料，还是跳转到哪个页面呢，根据不同的情况会有不同的考虑

开始画原型，画原型的时候先思考包含的元素，元素的布局

画出流程图后，开始考虑涉及到页面的元素。

比如一个百度的帖子列表页面，要露出什么元素是最正确的。用户的头像、昵称、帖子的标题、摘要、图片、来自的贴吧、发帖时间和评论数。可以认真的考虑每一个因素的意义。比如为什么百度贴吧露出了用户的头像呢，而不是直接隐藏？UGC的内容表现方式有什么不同，比如图片要几张才合适，图片的大小选取怎么才能够显得质量高？当然顺便说下，整个首页展示的机制是第一步考虑的内容，是需要人工推荐还是机器推荐，算法是什么，根据哪些元素来定….等等

页面的布局也是比较重要的。比如登录注册的界面，是想突出手机登录呢还是第三方微信的登录，这个在界面布局上区别很大。比如豆瓣的登录，首先是采取界面登录方式，也不是弹框，其次主要突出手机号和邮箱的登录，第三方登录放置于最下方并且颜色不突出。同时如果登录和注册流程分开的，就加入“注册豆瓣”的入口。当然，对于采用密码登录的方式“忘记密码”入口必不可少了。

画原型的时候思考所有需求，想到风险、具体注意事项和细节，并在原型上完善各种细节（包括字数的限制体现，提示的方式，布局的优化等）

这一步是凸显产品的功底了。能不能分析到所有的具体细节是最重要的。比如【交互】一个界面涉及到哪些交互，如：登录注册页面点击输入框后，可以立即弹出数字键盘；【限制】字数限制是多少字，可不可以填汉字；【细节】如下图，一般手机号很多，当输入数字时最右侧都会有“×”的按钮用于用户全部删除；【中间状态】登录按钮点击后到登录成功这个过程中，界面怎么展示；【异常状态】如果登录的时候信息错误怎么办，网络异常怎么办….

在这里，我想要细节描述的有两个细节，这两个细节是最近学习到的：

1. 提示和警告。提示和警告的方式有多种，不只是能采用文字提示，尤其是在移动端，不同于PC端每一个输入框后面都可以跟随提示。同时在移动端，当一个页面输入框过多的时候，在用户犯错后再给予提示，对用户来说是一件非常麻烦的事情。我们都知道，登录和注册会给用户留下很重要的印象，这个软件好不好用，靠不靠谱。所以我们一定要保障用户的行为流畅。而我们可以采取限制字数的方式来提示它，比如昵称，比如限制8个字，当用户超过8个字时，就不会再显示到输入框里，对用户来说第九个字的输入是无效的。及时反馈吧~当然这只是其中一个好的提示方式了~以后可以多积累
2. 关于页面的布局。当做个页面的时候，可以参考很多相关的竞品。比如做页面改变，可以参考阅读类的界面分布，登录界面可以参考很多软件的分布，找到适合自己模仿的。当然这期间不能偷懒的纯抄袭，要有自己的想法分析咯~

对了，悄悄说一句，左对齐，右对齐的方式一定比居中好。这个在设计中可以小小用一下。我之前看《写给大家看的设计书》中一个对齐原则就是这么说的，只不过在这次设计中又犯错误了。

关于需求文档的写法

无论是word版的还是原型版的需求文档包括几个要素：概述（这个需求叫啥）、用户场景（包括前置条件）、用例、流程图、具体需求。

我接触过两种需求的书写方式：

1. word版本的需求是比较系统的，它可能适合的是大的需求。比如一个新的业务系统。可以写出用户、运营人员或者客服人员用例、也可以明确整个流程是什么，其中背后需要判断哪些。
2. 原型的需求是比较适合研发人员看的，包括概述、主干流程的用例、需求点。若这个页面有其他拓展需求，则可以简单写。我个人觉得原型的需求是根据原型页面展开的。如下图，根据豆瓣的登录页面做得需求：

不管需求是什么形式，所有的情况都是需要产品想清楚的。可能不同公司，不同的产品各有侧重。但是产品经理的思维本质是不变的。怎么写只是技巧，写什么才是我们需要一步步踏实地积累的。

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