BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

什么样的登录框才优秀?

| 作者 侯伯薇 关注 0 他的粉丝 发布于 2013年1月26日. 估计阅读时间: 5 分钟 | 如何结合区块链技术,帮助企业降本增效?让我们深度了解几个成功的案例。

在绝大多数应用程序中,都会存在登录框这种组件,而登录框或者登录方式的设计也千差万别。那么,什么样的登录框才称得起“优秀”两个字呢?最近torres知乎上提出了这个问题,引起了大家广泛的讨论。

torres在提出这个问题之后,先做了一下“自问自答”,提供了他自己在豆瓣上同标题日记的链接,其中对几大SNS和社区类网站——包括新浪微博、腾讯微博、网易微博、淘宝网、凡客诚品、街旁网、嘀咕网、知乎和37signals——的登录框做了比较,得出的结论是:优秀的登录框需要简单明了的告诉用户 “我该怎么做”,按钮需要重点突出。他还具体总结了三点:

  1. 紧密性——界面上的文字按内容清晰分开,避免用户阅读混淆。
  2. 复用——复用同一种颜色或者素材,能够使网站风格保持一致,从而引领用户去点击。
  3. 对齐——必须条件。

向翔也根据自己的经验,给出了自己对于优秀登录框的看法:

  1. 在合适的时候出现。至少登录过就应该不出现,不抢视觉焦点。
  2. (需要用户付出的)时间短,包含几个方面,用户输入的少,tab顺序,回车响应,但很多大网站不注意的一个细节是用户在切换输入法,这个对于用户来说比较麻烦,特别是在输入验证码的时候,这个问题在百度统计的登录界面显示得特别不友好。(用户名是中文,tab到密码框式默认屏蔽输入法,但到了输入法界面就成了纯英文,但当前输入法还是中文)。验证码要容易辨别,经常看到不少验证码,后台不做智能处理,一定要让用户肉眼来区分O和0,1和l,这些都是让用户最容易输入错误的,都应该在后台屏蔽,允许用户输错o和0.
  3. 安全性,使用https,使用验证码,如果能和谷歌一样,自动检测危险,必要时才加入验证码是最好不过。
  4. 不要和老版新浪一样,一个礼拜没有登录访问你的页面的时候就变成注册引导框了,明明是用户想登录,却跳转来注册界面。
  5. 多种登录方式,支持大部分联合登录,登录相关链接都出来,比如找密码,注册,登录几次不成功后的提示。
  6. 登录成功后跳转到该去的地方。特别是有些网站记录的是referror,导致用户还需要交互一次。比如购物车页面去结算提示登录,登录完又跳到购物车页面了,这就是问题,用户还要点一次。

雷鸣又补充了几点:

  1. 支持一键清除,对大写状态要给出提示
  2. 不管是什么阅读习惯,登录页只做登录页,啥也不要放了,弹出浮层也不错,总之登录页的焦点只有一个。要想焦点只有一个,就是除了登录功能,别的都不放。
  3. 邮箱≠用户名,什么方式登录就提示什么,有几种方式就提示几种,不要多也不要少 。多次听到"邮箱就是用户名"这样的傻缺想法,金山词霸登录页中使用邮箱登录,可前面提示却是用户名,一段时间没用后,再登录的时候第一反应八成是输入用户名 。
  4. 如果使用邮箱登录的话,还是把输入框做大点吧。

Rubi的想法认为更应该关注的是登录方式:

最好的登录框是没有框。

我的思路不针对现在,我想要的登录框是一个可以多种方式登录的。它含有的功能为:

  • 基础输入登录,就是键盘输入。
  • 脸部识别登录,扫描我一下就要以登录。
  • 声音识别登录,喊一声,就可以登录了。
  • 指纹识别登录,扫描一下指纹就可以登录了,现在很多公司都是这样。但识别不高。

石孟宸也表达了自己对最好登录方式的想法:

登录为何要“框”,这明显是拿“技术模型”去映射“心理模型”,而且在天天谈用户体验的今天还没有根本性改变。你可知为何app如此好用,就是因为app默认记住了N多的用户名与密码,扫清了用户与产品的第一道门槛。

这就如同开门要拿着钥匙找锁眼,试问谁明白锁芯是如何工作的?为何要使用如此不人性化的东西。

所以最好的登录方式,应该是“设备主动识别人”。

目前来讲我觉得比较好的是IBM的指纹识别系统。

从讨论中我们可以看出,登录框并不是一个简单的、可以随意设计的组件,而是需要考虑到很多方面。

盛大创新院的庄表伟也曾经在QCon的演讲《开放平台时代的登录系统设计》中讲述过他在登录框设计方面的经验。

各位InfoQ的读者们,你们在日常的工作和生活中也一定少不了和登录框打交道,并且也可能设计过各种系统的登录框,那么,在你的心中,什么样的登录框才优秀呢?欢迎在此分享和讨论。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

by Lin NetPuter

这文章写得……连知乎链接都没有,就一堆人名。

Re: 无 by 侯 伯薇

不好意思,忽略了,接受批评,加上了知乎的链接。谢谢!

Re: 无 by Lin NetPuter

赞~

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

3 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT