交互设计中的细节：注册和登录

《交互设计中的细节：注册和登录》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、交互设计中的细节：注册和登录　　注册登录的重要性不言自明，注册&登录是一个网站的门户，它的设计姿态就是对待客人的态度。虽然用户可能每次都只花极少的时间在注册&登录互动，但是这个“瞬间”却举足轻重，用户与注册&登录之间的交互关系承上启下的一个节点。注册&登录所有的细节影响了能否完成产品战略定位所设定的最基本任务去吸纳其所希望的用户的使命。基于很多交互设计前辈的研究，作了一些细节中的细节分析。分享给更多的朋友们。　　1、注册流程剖析对比：　　1.1、注册和登陆用户体验偏重：　　：确保注册信息安全(长远)　　：用户注册过程简单迅速(即时)　　1.2、注册流程剖

2、析对比　　①财付通：选择注册方式>填写账户详细资料>邮箱验证>注册完成(可以使用)　　财付通背靠QQ这种超级庞大的用户群体，对超大信息流量的处理技术经验丰富，很自信不担心用户注册过程不顺畅或者失败的情况。对它来说迅速抢占海量用户才是首位，将注册过程集中在一个页面完成，效率最高。　　②百付宝：填写基本注册信息>注册完成(不可使用)>邮箱验证>填写账户详细资料(关联银行卡)>可以使用　　百付宝只需要填写用户名、密码、确认密码、邮箱、验证码即可注册账户，但并不能立刻使用支付，需要一系列验证和账户绑定才能真正使用其支付功能。是产品刚投入市场大量新用户注册情况下分

3、散流量的暂时性策略，减少用户注册过程不顺畅或者失败的情况。但对用户的使用过程来说几重不同分区的操作略显繁杂。　　③支付宝：填写基本注册信息>手机验证+邮箱验证>填写账户详细资料>关联银行卡>注册完成(可以使用)　　支付宝的流程安全关卡特别严谨，因为它用户非常庞大的用户群体，可以将吸引用户的所有精力投入到产品去。体验支付宝很自信的态度着力于用户长远的信息安全体验。　　④Tumblr:填写:邮箱、密码、域名>验证码、确认密码>邮箱验证>注册完成(可以使用)　　Tumblr的轻博客定位本身就较为垂直，希望注册的用户是真的希望以后更多和更持久地使用，所以它的注册

4、流程的特点在确认密码与验证码一起放在第二个注册页面，让用户缓一会再确认密码，将账户密码记得印象更深。　　⑤需要邀请码的：填写帐号、邮箱、个人信息>等待邀请码>验证邀请码>注册完成　　需要邀请码的很多都是初期时候内测的网站如前一段时间的乐活网;还有就是很垂直的社区网站，如Pinterest、雪球等，他们需要通过邀请码筛选用户群体，确保用户类型符合预期。　　⑥使用SNS帐号注册：选择SNS门户>SNS帐号登录>确认连接>注册完成　　使用SNS帐号注册可以迅速引导大量SNS用户来注册，在产品初期迅速占领市场的情况效果会显著，但是对长远来说不利于培养自己独有的用

5、户群体。　　⑦新浪微博/迅雷网络/华为网盘：填写基本注册信息(信息要求不同)>注册完成>(邮箱验证)　　没有特殊要求的话最普遍的注册流程都是直接填写基本信息和邮箱确认就注册完成，一气呵成，流畅自信。它很可能本身就有海量用户。　　总结：交互流程关联的因素是多方面的，注册&登录需要根据自身和所处环境量身定做，适时调整。　　2、注册&登录表单的整体框架分析：　　2.1、注册&登录表单区域分析：　　注册表单包含7各部分：　　①视觉聚焦。引导用户填信息。　　②标签。输入域应填何种信息。　　③输入提示。提示输入域信息如何填。　　④输入域。包括文本输入框、密码输入框、

6、多选框、下拉列表、单选框和滑块等。　　⑤操作区。包括链接、按钮、切换验证码、展开提示或协议。　　⑥验证。所输信息可用性和给用户的判断和建议反馈。　　⑦流程指示。让用户知道交互预期。　　登陆框的分区差不多,只是一般流程只需一步,就没有”⑦流程指示”。　　2.2、视觉界面：　　2.2.1、视觉聚焦导视层级关系：　　一级为必选项，蛋是要注意适应浏览器，可能有些浏览器本身可实现，否则需要CSS;二级为可选项，当文字提示内容比较多的时候使用可以明显聚合用户视觉焦点，更加整体的体验。　　2.2.2、引导性视觉凸显：　　利用视觉手段凸显某部分，需要吸引用户区注意，引导

7、和鼓励用户做某些事：　　知乎的申请注册通道入口按钮区域做得特别大，去吸引新用户注册。但是色彩又调得跟周围环境恰到好处，视觉上并没有为突出按钮而太干扰整体登录框视觉。　　2.2.3、造型语义：　　除了操作交互外，有一点不应该忽略的是：情感交互。　　“设计”的独有性质是通过“造型语义”的手段解决某些逻辑操作解决不了的问题。　　例如新浪邮箱注册表单右上角吉祥物小浪大眼睛前竖起一个手指，像是在说：“嘘…注意资料安全哦!”　　登录框嵌在一个围脖上，寓意“微博”，带来一丝丝温馨的感觉。　　2.3、反应动作方式分析：　　2.3.1、出错或者确认提示方式:　　2.3.2

8、、提示信息区位:　　①就近原则　　②某一位置集中显示　　2.3.3、提示信息的干