课程咨询 :0731-88220936

昆明UI培训

昆明UI培训 > 达内新闻 > UI设计师该如何设计验证码?
  • UI设计师该如何设计验证码?

    发布:长沙UI培训      来源:优设网      时间:2016-10-19

  • 在一个产品中,会有多个设计师分工协作,也会由不同的设计师做设计迭代,验证码这个“不起眼”的存在很可能会被忽略,导致它在每个场景的显示逻辑不尽相同。下面,达内昆明UI培训就来聊一聊不同应用场景下的验证码。

    验证码的存在如此反用户体验,为什么还是不能缺少的呢?简而言之,就是为了证明你是个人而不是机器,我们所知的许多网络恶意攻击都是机器恶意刷导致的,为了安全就必须设个门槛将机器拒之门外。验证码通过人可以识别而机器无法识别这样的逻辑来设计,无论它以什么形式出现,都是个必要的门槛。

    一、注册

    我们通常见到它的场景是注册登录场景,注册时会出现在一般注册流程里。

    大多数网站注册页面选择一页填写完所有信息,一键提交注册完成。在绑定手机号不在主流程内时,验证码多数情况出现在最后一步填写内容。这在老式的论坛很常见。

    当绑定手机号在注册流程里时,下面一定会跟随短信验证环节。这个时候图形验证码和短信验证同时存在的设计就有几种情况了。

    首先可以确定的是图形验证和短信验证之间有逻辑相关性。他们之间的相关性一般体现在三种设计上。

    A.在同页面显示

    图形验证码放置在手机验证码之前,获取手机验证码需要正确验证图形验证码才可触发。

    B.在不同页面显示

    这种情况发生在注册本身就是分页分步骤进行的。

    图形验证会跟在输入用户名之后,一般在第一步出现。在点击下一步后会到达短信验证界面。从用户体验上来讲,运用分步设计引导性更强,一般用在需要输入多种信息的时候,用户会有比较清晰的逻辑,并且对何时完成有一个预判。这个时候,图形验证的结果就影响了用户能否顺利进入下一步短信验证。

    C.弹窗式图形验证

    这种交互逻辑是用户输入合规手机号时,点击获取短信验证码,会弹出图形验证请求,验证成功后弹窗消失,系统给用户发出验证短信。在这个逻辑里,图形验证就作为发送短信的触发条件。

    图形验证作为短信验证的触发点的设计是符合逻辑的。因为本身验证“一个人是人”和“这个人是你”是有承接关系的。如果不先验证我是人,验证我是我又有什么用呢?另外图形验证总是被诟病是不明真相的群众在看到它时,并没有发现它的出现和其他信息有什么内在联系,觉得没用而累赘。而一旦变成了短信触发时,用户就会认为它是有作用的。

    二、登录

    图形验证码在登录时有两种出现情况。一种是一开始就存在,作为顺利登录的必要填写内容。然而这种情况对用户不太友好,因为用户本身对于登录的预期并不包含输入验证码这一环节,多了这样一个“门槛”,尤其是验证码过于难识别时,就会给用户造成不好的体验。

    另一种情况就是大部分产品采用的设计,在用户输入用户名或登录密码错误超过设定次数时,验证码出现。这种设计的内在逻辑是用户输入错误多次很有可能是机器人在试数字,所以出现图形验证来挡掉机器的攻击。这种逻辑就很容易让用户理解。

    三、重置密码

    用户在登录页面时会有“忘记密码”的入口(或者“无法登录?”)。重设密码流程里也需要输入验证码。首先会要求输入已注册用户邮箱或手机号并验证图片验证码,之后才能进入找回流程。这里验证图形验证码也可视作后续步骤的触发,二者存在关联性。

上一篇:达内昆明UI培训干货:弹窗设计(下)

下一篇:产品决策的重点不是做什么,而是不做什么

最新开班日期  |  更多

UID培训免费训练营

UID培训免费训练营

开班日期:3月31日

UID培训全日制班

UID培训全日制班

开班日期:3月31日

UID培训周末班

UID培训周末班

开班日期:3月31日

UID培训高级进阶UED培训

UID培训高级进阶UED培训

开班日期:3月31日

  • 网址:http://km.ui.tedu.cn      地址:长沙市开福区芙蓉中路一段 479 号建鸿达现代城 27 楼
  • 课程培训电话:0731-88220936    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56