登录页面,在整款产品里看起来只占很小一块地方,但往往就是这方寸之间的设计,决定了用户是顺畅地走进去,还是烦躁地关掉窗口。一个让人感觉“懂我”的登录界面,能安安静静把新用户留下来,也能让老用户回来的时候觉得省心。下面这些设计上的取舍和细节,很多来自对实际产品的观察,未必每一条都适合你的情况,但挑着用,总能找到一些让体验变好的切入点。
首先,登录区域得一眼就能看到。别让用户满屏找入口,那种寻找的过程,每多一秒,焦躁就添一分,最后很可能直接变成离开。Gmail 的登录页是个很典型的例子:打开页面,正中央就是输入框,要填什么一清二楚,旁边还顺手放了一个“创建账号”的链接,新用户和老用户的需求都照顾到了。把登录区域做得足够明显,本身就是一种尊重——别让用户连最基础的操作都要费神。

在登录方式上,也要尽量给用户省力。让用户给每个产品都单独注册一套账号密码,对记忆和耐心都是很大的消耗。第三方登录能很好地解决这个问题,国内的石墨文档、MONO 等产品都提供了微信、QQ 等快捷登录选项,有的甚至直接采用手机验证码登录,连注册这一步都省了。不过这里有个实际矛盾:产品方往往想拿到用户的手机号,所以即便点了微信登录,有时还是会被要求再绑一次手机。从用户角度看,这当然多了一层打断,但产品对信息的诉求也真实存在,怎么平衡,就看各自的取舍了。另外,国内第三方登录在电脑端有时并不那么“高效”。比如选了 QQ 登录,如果电脑上 QQ 没在线,就得掏出手机,打开 QQ,扫码,确认……这一连串操作下来,还不如直接输密码快。反过来,像 Behance 这样的网站,如果浏览器之前登录过第三方账号,点一下按钮就直接进去了,整个过程几乎无感。好的登录体验,说到底就是让输入和验证步骤尽可能少,把账号、密码,或者手机号加验证码,再加上一个可靠的第三方选项,简单明了地摆在用户面前,别绕弯子。

新用户和老用户第一眼看到页面时,关注点完全不同,一个清晰的设计需要帮他们快速判断“我现在该做什么”。Dribbble 的做法值得看看:主区域用一个醒目的按钮引导“创建账号”,右上角则放一个不那么抢眼的“Sign in”文字链接。两者用颜色和布局拉开距离,甚至还给注册按钮加了一个微边框,让视觉层级更清楚。这样一来,新用户不会犹豫,老用户也不会找错地方。让注册和登录分开,但不要让用户分不清,这个分寸很重要。
登录信息本身,也可以做得更体贴一些。比如,忘掉用户名,直接让用户用邮箱或手机号登录。要求用户记住一个额外的用户名,其实是在增加隐形负担,很多人可能好几个平台用同一个用户名,一旦被占用,又得另起一个,时间一长根本想不起来。Instagram 的登录界面就给了用户充分的选择,既可以用手机号,也可以用邮箱,不管当初注册时用了哪种方式,都能顺利通过。
密码输入环节,也有不少细节可以优化。输错密码几乎是每个人都会遇到的事,提供一个“显示密码”的小图标,能让用户及时发现拼写错误,而不是等一长串点号输完,点登录才发现不行,又得全部删掉重来。脉脉和片刻都做了这个细节,用户按住或点击图标就能看到明文,松手又隐藏,既安全又方便。另外,密码输入框旁边如果能提示大写锁定状态,也能避免很多无谓的反复重试,Edge 浏览器在检测到 Caps Lock 开启时就会给出提醒,这类小设计成本不高,但很管用。
替用户记住该记住的,也是提升体验的关键。再次登录一个已经用过的网站,还得重新输入一遍账号密码,这件事确实挺消磨耐心。谷歌系产品在这方面做得很到位,只要你登录过,下次打开 YouTube 或 Gmail,它就会自动识别身份,基本不需要再输入。有些产品退而求其次,比如 Ally Bank,允许用户勾选“记住用户名”,下次访问时自动填入,虽然只是一小步,但体验上已经好了很多。表现形式可以灵活,让用户自己选择是否记住,或者根据安全级别决定记住哪些信息,都比完全不记要强。
密码找回的过程,也别太折磨人。忘记密码的时候,用户本身就有点懊恼,如果恢复流程再设计得复杂,负面情绪很容易放大。印象笔记处理密码重置时,会提示用户上次修改密码是多久以前,这个看似不起眼的小提醒,有时真能帮人“哦对,我当时改过”一下想起来,省去后续操作。微信公众平台的后台登录,也在账号密码输入栏旁边放了记住密码的复选框,减少重复输入的可能。关键是让用户知道,就算忘了,也能轻松回到正轨,而不是又多一层挫折感。

在移动端,无密码登录让体验更自然。现在有很多产品,尤其是金融类应用,已经开始支持指纹登录。这样做既能保持登录状态,又不牺牲安全性,用户打开 App 一按指纹就进去了,比每次都输密码流畅得多。这种无密码登录方式,对于高频使用的产品来说,体验提升尤其明显。
登录页面的设计,最终还是要回到用户的实际场景里去琢磨。上面这些思路和案例,有的适用,有的可能跟你的产品形态不太搭,这很正常。关键是理解每一个细节背后,用户到底在经历什么,然后选择那些真正能帮到他们的部分。多一点这样的考虑,用户是能感受到的。
立即登入