登录注册的设计
最近在接触登录注册的设计,就趁机整理下这个需求的进行步骤~因为涉及到公司的信息,所以我写的比较简单,希望从思考的步骤而言有一个整理
需求及确定(账号系统,风险等等)
首先登录注册是设计到账号系统的,那么首先要确定账号系统如何连接,是重新做一套还是和名下某软件合并。像陌陌和哈你直播的账号基本是共通的。
同时共通的方式有几点:
是否需要同步信息过去,在整个新软件设计的时候需要确定某一部分的数据是否要同步过去,比如同样关注的人,发布的消息帖子等等。
确定流程
在确定整个业务后,根据确定出来的去制定整体的流程。比如登录注册之后是否必须填资料,还是跳转到哪个页面呢,根据不同的情况会有不同的考虑
开始画原型,画原型的时候先思考包含的元素,元素的布局
画出流程图后,开始考虑涉及到页面的元素。
比如一个百度的帖子列表页面,要露出什么元素是最正确的。用户的头像、昵称、帖子的标题、摘要、图片、来自的贴吧、发帖时间和评论数。可以认真的考虑每一个因素的意义。比如为什么百度贴吧露出了用户的头像呢,而不是直接隐藏?UGC的内容表现方式有什么不同,比如图片要几张才合适,图片的大小选取怎么才能够显得质量高?当然顺便说下,整个首页展示的机制是第一步考虑的内容,是需要人工推荐还是机器推荐,算法是什么,根据哪些元素来定….等等
页面的布局也是比较重要的。比如登录注册的界面,是想突出手机登录呢还是第三方微信的登录,这个在界面布局上区别很大。比如豆瓣的登录,首先是采取界面登录方式,也不是弹框,其次主要突出手机号和邮箱的登录,第三方登录放置于最下方并且颜色不突出。同时如果登录和注册流程分开的,就加入“注册豆瓣”的入口。当然,对于采用密码登录的方式“忘记密码”入口必不可少了。
画原型的时候思考所有需求,想到风险、具体注意事项和细节,并在原型上完善各种细节(包括字数的限制体现,提示的方式,布局的优化等)
这一步是凸显产品的功底了。能不能分析到所有的具体细节是最重要的。比如【交互】一个界面涉及到哪些交互,如:登录注册页面点击输入框后,可以立即弹出数字键盘;【限制】字数限制是多少字,可不可以填汉字;【细节】如下图,一般手机号很多,当输入数字时最右侧都会有“×”的按钮用于用户全部删除;【中间状态】登录按钮点击后到登录成功这个过程中,界面怎么展示;【异常状态】如果登录的时候信息错误怎么办,网络异常怎么办….
在这里,我想要细节描述的有两个细节,这两个细节是最近学习到的:
提示和警告。提示和警告的方式有多种,不只是能采用文字提示,尤其是在移动端,不同于PC端每一个输入框后面都可以跟随提示。同时在移动端,当一个页面输入框过多的时候,在用户犯错后再给予提示,对用户来说是一件非常麻烦的事情。我们都知道,登录和注册会给用户留下很重要的印象,这个软件好不好用,靠不靠谱。所以我们一定要保障用户的行为流畅。而我们可以采取限制字数的方式来提示它,比如昵称,比如限制8个字,当用户超过8个字时,就不会再显示到输入框里,对用户来说第九个字的输入是无效的。及时反馈吧~当然这只是其中一个好的提示方式了~以后可以多积累
关于页面的布局。当做个页面的时候,可以参考很多相关的竞品。比如做页面改变,可以参考阅读类的界面分布,登录界面可以参考很多软件的分布,找到适合自己模仿的。当然这期间不能偷懒的纯抄袭,要有自己的想法分析咯~
对了,悄悄说一句,左对齐,右对齐的方式一定比居中好。这个在设计中可以小小用一下。我之前看《写给大家看的设计书》中一个对齐原则就是这么说的,只不过在这次设计中又犯错误了。
关于需求文档的写法
无论是word版的还是原型版的需求文档包括几个要素:概述(这个需求叫啥)、用户场景(包括前置条件)、用例、流程图、具体需求。
我接触过两种需求的书写方式:
word版本的需求是比较系统的,它可能适合的是大的需求。比如一个新的业务系统。可以写出用户、运营人员或者客服人员用例、也可以明确整个流程是什么,其中背后需要判断哪些。
原型的需求是比较适合研发人员看的,包括概述、主干流程的用例、需求点。若这个页面有其他拓展需求,则可以简单写。我个人觉得原型的需求是根据原型页面展开的。如下图,根据豆瓣的登录页面做得需求:
不管需求是什么形式,所有的情况都是需要产品想清楚的。可能不同公司,不同的产品各有侧重。但是产品经理的思维本质是不变的。怎么写只是技巧,写什么才是我们需要一步步踏实地积累的。