我们使用的大多数产品,刚进入软件都需要一个登录或注册的操作,每个软件的登录页面都是相似的,但是对用户来说,一些小的细节体验是最重要的;本文小编分享了关于登录页面设计的细节和逻辑,大家一起来学习。
优漫小编:我们使用的大多数产品,刚进入软件都需要一个登录或注册的操作,每个软件的登录页面都是相似的,但是对用户来说,一些小的细节体验是最重要的;本文小编分享了关于登录页面设计的细节和逻辑,大家一起来学习。
差不多所有的登录页面看起来都是一样的,只要输入帐号和密码就可以进入,但是仔细考虑一下就会发现,每一个登录页面都有它自己的差异点,而这点就是产品的差异点。
要保证用户成功的和没有压力的登录体验,需要我们不断的思考。
01登录体验是什么?
登陆体验就是用户通过一个入口进入一个应用、一个网站或一个服务,建立身份。
通常,登录过程包括主登录过程和恢复过程,其中主登录过程包括用户名、手机号、密码等信息的填写,恢复过程包括忘记密码、重新设置密码和其他登录方式等。
登陆经验的目的是确保用户成功登陆帐户。
2.熟悉登录设计流程。
简洁明了的常用页面布局和文本帮助用户方便地执行熟悉的操作,使设计简单化也有助于方便地将体验扩展到不同设备和屏幕尺寸。
该插件采用了居中对齐的重叠登录页面设计,并带有醒目的红色按钮来强调登录操作,同时还支持Google和Facebook等其他登录方式。
登入页面是第一个接触品牌的地方。登陆操作最好在中央位置进行,页面上的其他元素也要小心增加,避免注意力从登陆任务转移。
设计理念:
登录页面花费的用户时间越少越好,要让用户尽快发现产品的优点和价值!
03年注重设计。
用户应完全注意登录(或恢复)操作:
最好的方法是把登录页面的表格放在页面中央;
无需复杂或冗长的文字说明,如可利用简单的“输入密码”提示用户完成操作;
需要用户每次只做一件重要的事,比如把密码恢复的复杂过程分解成多个步骤来执行。
脸谱保存了用户的登录信息,并把恢复过程分成了合理的步骤。
亚马逊在“更多的帮助”中加入了辅助恢复选项,这有助于集中关注主要业务。
设计理念:
采用卡片式布局;
把作业分为主要作业和次要作业;
采用大号突出的登录按钮;
将小动作的次数降到最低,避免页面混乱。
给你清晰的反馈,当操作失败时,给予帮助。
用户在登录过程的每一阶段都可能失败;输入错误的邮箱、忘记密码或网络问题等等,所有这些都可能导致登录意向的急剧下降。
所以清楚、及时的反馈设计对用户非常重要。
当信息输入错误时,会提示具体的错误原因。
如果有错误的输入密码,Facebook将在下方添加“使用Google登录”选项。
设计理念:
建议用户尝试一些合适的选择;
当登录失败时,用户被引导到一个独立的页面并组织其他的登录方法;
显示最有效的登录方式,如果出现问题,及时向用户反馈。
有多种登录方式,提供了灵活性。
除输入帐号密码这种登录方式外,最好提供一两种额外的登录方式供用户选择,同时避免忘记密码而导致无法登录。
增加太多的登录方式会造成页面混乱,降低登录目的,并且增加的选项应该被限制在2到3个。
虽然Medium登录表单的设计很清楚,但是登录方式太多会妨碍用户的选择和判断。
在Airbnb的登录页面中可以看到很多次要的登录方式,并且过多的选项会导致用户的认知负担。
设计理念:
目前,无密码登录正在迅速普及。基于手机号码的认证已经成为很多移动应用程序的常规认证方式,指纹和FaceID也在很多地方出现,使得认证过程无缝、安全。
找出最适合产品的登录方式,并以此为主选可以有效提高效率!
第六,登录意味着信任。
登陆需要用户输入敏感的个人资料,比如手机号,邮箱,密码等等,用户愿意输入信息就意味着他们信任这个平台或者产品。
尽管降低用户之间的摩擦非常重要,但有时网站还提供额外的认证,以确保用户信息的安全。
网站使用文字验证的方法来提高用户账户的安全性。
设计理念:
登入表格应代表品牌形象,任何视觉上的改变都必须缓慢进行,因为彻底改变视觉设计可能导致信任缺失。
07确定使用者类型。
登陆意向是一种体验,用户的角色和类型可以在其中得到体现。
为了更清楚地了解用户,可以用以下方法定义用户的范围:
注册通道:与PM合作,以确定注册过程中用户交互和退出的关键阶段。
进入页面:用户是通过邮箱,搜索引擎,还是通过应用程序跳到登录页面?
通用设备:手机,浏览器等设备能给用户带来个性化的体验。
使用者分组:利用年龄、地理位置等方法也可以将使用者分组成多个组别。
登入页面设计实例分析。
对典型的登录页面设计进行分析,展示了登录页面的多种设计表达。
google采用多阶段登录,分两步输入邮箱和密码。对于谷歌来说,这种格式有一些安全上的好处,下一步还可以为用户提供个性化选择。
Uber的登录页面采用了简单的风格,注重使用体验,引导用户在下一步输入手机号码。
facebook使用了右对齐的登录表格,左边的空间是用来展示品牌信息和形象的。
从视觉设计上看,亚马逊的网页有些过时,但却是一个管理用户注意力的很好例子。黄颜色的Records按钮和简洁的页面让登录看上去简单快捷。
Figma的登录页面位于图片的中心,在顶部首先显示的是以Google登录,这可能是Figma首选的推广形式,利用线框构成的页面整体设计非常简洁、高效。