写点什么

什么样的登录框才优秀?

2013 年 1 月 25 日

在绝大多数应用程序中,都会存在登录框这种组件,而登录框或者登录方式的设计也千差万别。那么,什么样的登录框才称得起“优秀”两个字呢?最近 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 的读者们,你们在日常的工作和生活中也一定少不了和登录框打交道,并且也可能设计过各种系统的登录框,那么,在你的心中,什么样的登录框才优秀呢?欢迎在此分享和讨论。

2013 年 1 月 25 日 01:382789
用户头像

发布了 340 篇内容, 共 112.0 次阅读, 收获喜欢 2 次。

关注

评论

发布
暂无评论
发现更多内容

大企内部软件系统反复故障难以解决,业内人士:唯有彻底更换

Marilyn

敏捷开发 快速开发 开发工具

有一说一,大型信息化企业的软件系统,还是用自研的好

Marilyn

敏捷开发 快速开发 开发工具 软件设计

用友政务表格技术应用开发实践:预算一体化产品核心功能搭建

Geek_Willie

SpreadJS 用友

架构师训练营 1 期第 4 周:系统架构 - 作业

piercebn

极客大学架构师训练营

为了省钱,我用1天时间把PHP学完,装进DDD领域驱动设计里!

小傅哥

php 设计模式 小傅哥 架构师

低代码开发平台,来自“未来”的软件开发方案

Marilyn

敏捷开发

Go发起HTTP2.0请求流程分析(前篇)

Gopher指北

go golang HTTP HTTP2.0

JAVA代码生成器,快速开发平台之魂

Marilyn

Java 敏捷开发 快速开发 开发工具

架构师训练营第 1 期 第 4 周作业

李循律

极客大学架构师训练营

智能时代,快速开发平台将成为主流软件开发工具

Marilyn

敏捷开发

TensorFlow 篇 | TensorFlow 2.x 基于 Keras 的模型保存及重建

Alex

tensorflow keras model save model restore tensorflow hub

JAVA & VUE ,分离式开发平台建造思路

Marilyn

Java Vue 敏捷开发

Vidyo的解决方案到底是什么?有哪些特点?

dwqcmo

音视频会议 集成架构 解决方案 智能硬件

摆脱复杂烧脑的程序代码,利用快速开发平台轻轻松松做软件

Marilyn

敏捷开发 快速开发

快速开发平台,高集成易扩展,进入软件疾速开发新世代

Marilyn

敏捷开发 快速开发 开发工具

GitHub 上开源了一个很邪恶的项目!女生勿近,18香警告...

程序员生活志

Redis Sharding集群跟一致性哈希有什么瓜葛?

Man

一致性哈希 Jedis redis cluster

OpenFaas 获得 VMworld 2020 年度最佳 Startup Spotlight 大奖

donghui

Serverless OpenFaas

MySQL 建表为啥还设置个自增 id ?用流水号当主键不正好么?

程序员小航

Java MySQL 开发 工作笔记 流水号

Kubeless 快速入门 | 玩转 Kubeless

donghui

Serverless kubeless

XJR企业级软件快速开发平台规范

Marilyn

程序员 敏捷开发 软件设计

快速开发平台,程序员“老师傅”必备

Marilyn

敏捷开发 快速开发 开发工具

标本兼治,程序员用它整体提升公司效率

Marilyn

敏捷开发 快速开发

阿里面试官纯手打:金九银十跳槽必会Java核心知识点笔记整理

Java架构追梦

Java 数据库 架构 面试 微服务

区块链跨境支付系统开发,usdt支付系统搭建

WX13823153201

区块链跨境支付系统开发

商业智能(Business Intelligence)系统的使用及设计原则

Marilyn

敏捷开发 快速开发 商业智能

spring-boot-route(十三)整合RabbitMQ

Java旅途

Java Spring Boot RabbitMQ

MySQL-技术专题-性能优化—索引篇

李浩宇/Alex

架构一期第四周作业

Airs

深入分析软件快速开发平台与传统软件开发方案的优缺点

Marilyn

敏捷开发

为什么巨头都在布局SaaS生态?

ToB行业头条

SASS

微服务架构下如何保证事务的一致性

微服务架构下如何保证事务的一致性

什么样的登录框才优秀?-InfoQ