ps:最近在总结过去几个月从事产品工作以来的资料,上次说到要总结注册登录的设计,自己挖的坑哭着也要填完。
ps2:这些总结均源自于项目中一点一滴的总结,可能不是很完善,各位看客需留意。
一、登录从pc端到移动端
移动端的登录沿袭了pc端的很多经验,但也有其独特的演变。
1、pc端
1.1 pc端具有公共属性,输入密码是隐私,需要对密码进行保护;
1.2 pc电脑不可移动,如果是笔记本电脑可移动但使用场景也相对固定,网络环境较好设备稳定;
1.3 屏幕尺寸更大利于展示更多内容,一般全部信息在一个页面内展示;
1.4 鼠标键盘输入方便输入成本低;
2、手机端
2.1 手机设备本身具有私密性,用户在输入时,可对密码进行保护;
2.2 手机设备随身携带,网络环境不稳定因素较多;
2.3 屏幕尺寸小内容可能需要分多屏展示;
2.4 输入成本高,输入麻烦;
二、设计前思考
(目的)为什么要设计这个功能,(时机)什么时候需要注册,(必要性)是否一定需要账号体系,第二步,得了解这个功能前是什么业务,之后跳转到什么页面,从产品的整体角度回答这个问题。
三、注册登录设计的步骤
1、登录模式梳理和信息结构的设计;
2、梳理登录流程,把每一步都列出来,做好各种情况的梳理;例如:用户登录忘记密码忘记后,卖家如何找回。
3、交互设计1:画出每一步的简单线框图,对页面的元素进行初步布局;
4、交互设计2:对每个页面的页面元素、页面跳转、操作反馈、异常处理、按钮和页面的各种状态等做出设计;
5、自行检查,可以制作高办真原型;
6、输出prd;
四、设计范例
主要以一款app手机号注册为案例,对上一步中的交互设计做出详细的说明。
1、账号
1.1 账号有无格式要求,如果是手机号,前端是否需要验证手机号有效性;
1.2 手机号那种格式,3-4-4格式还是普通格式;
1.3 手机号输入键盘是否弹出?键盘是否为数字键盘;
1.4 如果为手机邮箱,是否需要输入提示?前端是否需要校验邮箱格式?
2、密码
2.1 格式:密码的字数限制?最多几位,最少几位?
2.2 有什么要求,是英文+数字还是可以包含特殊符号?如“空格”或者“@”等。是否区分大小写?
2.3 提示文字为“位”还是“字符”?如“请输入6-16位字母或数字”
3.3 密码输入框默认为密文还是明文,是否可切换
3.4找回密码和重置密码有何区别
3、验证码
3.1 验证码位数4位or6位?是数字还是英文+数字?是否区分大小写?
3.2 倒计时时长?是button还是label?
3.3 验证码输入框一般比较短。
3.4 验证码的获取上限,有效时间,超过有效时间给出什么提示?
3.5 验证码的触发,为什么有些设计为点击那妞页面跳转时获取,有些页面跳转后再次点击才能获取?为什么有不同?
3.6 验证码倒计时状态有何变化?重新获取后,原验证码怎么处理?
3.7短时间内多次获取验证码是否还要给用户发送验证码?还是提示验证码已发送请输入?
4、错误提示
4.1 报错是的报错文字是什么?提示格式是弹窗、Toast、还是在当前页面文字显示?
4.2 Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失。
4.3 弹框会阻断用户操作,需要手动点击确认以后才会消失。
4.4 在当前页面文字显示的话,提示文字摆放的位置,页面格式根据提示文字的变化,需要有怎样的视觉效果?
5、异常提示
5.1 点击【获取验证码】,检测手机号已被注册,如无置灰设置,输入框为空,手机号码无效的情况,故需提示:
5.1.1 手机号已被注册,是否提示用户登录?
5.1.2 手机号不能为空,多次为空状态点击是否给出频繁操作提示?
5.1.3 手机号码不正确,“请输入正确的手机号码”是不是比“手机号码错误”好些?
5.2 点击【注册】时,可能会有输入框为空,验证码无效等情况,如无置灰设置,故需提示:
5.2.1 短信验证码不能为空
5.2.2 验证码已被使用,然后给出什么操作呢?
5.2.3 验证码已过期,过期了给出弹窗吗?在弹窗直接获取验证码?
5.2.4 验证码错误,弱提示?
5.2.5 验证码已达到最大尝试次数,最大是多少次?
5.3网络状态不好,给出怎样的提示和反馈?
5.4手机没开wifi或者流量,是否/如何指导用户进行设置?
5.5服务器没有正常接收请求或没有回复,给出怎样的提示较好?
5.6用户所处环境网络信号不好(用户向服务器请求超时),是否需要检查用户的网络状态?还是只给出提示?
5.7注册流程中,检测到手机号码已经注册,是否可以继续获取验证码?然后验证直接登录免去页面跳转和输入密码?
5.8密码第一次错误怎么给出提示?第二次仍然输入错误提示是否需要强提示,给出找回密码的按钮?在弹窗点击找回密码,手机号码在新页面是否需要重新填写?密码连续多次输入错误是否做出禁用限制?
5.9登录时,账户是否在其他设备登录,是否允许多端同时登陆?不允许同时登陆,之前登录设备的账户是否要下线?给出怎样的提示?
6、短信验证码
6.1 短信验证码一般通过第三方通道发送,在技术侧做规避,还需要在产品规则上做一定限制;
6.2 短信验证码的文本格式,
7、邀请码
7.1 注册是否为邀请注册?如是邀请注册,邀请码格式如何设计?
7.2 邀请码错误提示,填写了邀请的用户和没填的用户,在注册成功后有何区别?有邀请码的用户是否有奖励?
8、注册成功后的提示、状态变更及跳转
8.1注册成功后同时1切换为登录状态
8.2给予注册成功的提示并跳转到原网页,原页面是否需要缓存?
8.3注册之前有第三方登录,用户注册后还需要用户绑定第三方账号吗?
9、输入框
9.1手机号账号,显示格式为3 4 4 格式还是一般格式?
9.2验证码输入框一般比较短。
9.3密码输入框默认为密文还是明文,是否可切换?需要切换
9.4其他输入框,如邮箱、邀请码、昵称、个人信息等根据使用场景的不同自行设计;
9.5 不同输入框的提示内容和显示状态
9.6是否需要一键清除按钮“x”,何时显示这个按钮?点击后虚拟键盘是否需要缩回?
10、按钮
10.1按钮的位置,长度、文字
10.2按钮的设计,不同状态也要考虑。默认灰置还是高亮?灰置的条件是什么?
10.3按钮提交反馈,文字是否需要变化
11、返回按钮
11.1 在注册、找回密码、第三方登录等操作流程中,返回时需要特别注意点击返回后的操作提示;比如注册手机的修改,验证码提交后设置密码等。
11.2 点击返回时,干扰了正常流程的操作一般需要强提示,提示弹窗注意文案和按钮文字设计
11.3 点击返回后,当前页面和目标页面状态是否变化?例如手机号码是置空还是显示已输入的手机号码?
11.4 浏览应用过程中进入登录页面,登录页面是否需要有返回按钮?
12、虚拟键盘
12.1虚拟键盘何时弹出?触发条件是啥?
12.2虚拟键盘的类型根据表单不同而不同
12.3虚拟键盘上的GO是否有变化?变成“完成”还是“登录”?
12.4键盘何时隐藏?如何隐藏?
13、第三方登录
13.1 昵称的长度设置,不同平台的账户昵称的长度要求不同,该如何获取?
13.2 绑定多个第三方账户,公开信息如何获取?公开信息不同如何处理?
13.3 用户使用第三方登录,是否还有绑定手机号码?
13.4 登陆后是否需要完善账号资料,如手机号?