大家好,我是讯享网,大家多多关注。
编辑导语:我们在使用大多数产品的时候,第一次进入软件的时候,需要一个登录或者注册的动作。各软件的登录方式页面大同小异,但一些小细节体验最能影响用户;作者分享了登陆页的设计细节和逻辑,大家来看看吧。
确保用户获得成功、无压力的登录体验需要我们不断思考。
01 什么是登录体验?
登录是指用户通过门户进入应用、网站或服务,建立自己的身份。
登录过程通常由主登录过程和恢复过程组成,其中主登录过程包括填写用户名、手机号和密码,恢复过程包括忘记密码、重置密码等登录方式。

登录体验的目标是确保用户成功登录帐户。
02 设计熟悉的登录流程
使用简洁和常用的页面布局和文本有助于用户轻松执行熟悉的操作。保持简单的设计也有助于轻松地将体验扩展到不同的设备和屏幕尺寸。

Pinterest采用居中对齐的重叠登陆页面设计,用醒目的红色按钮突出登陆动作,同时也支持谷歌和脸书等其他登陆方式。
登陆页面是强调品牌的第一个接触点。登录最好放在中心位置,页面上的其他元素也要小心添加,以免分散对登录任务的注意力。
设计思维:
用户花在登录页面上的时间越少越好。让用户尽快发现产品的优势和价值!
03 专注设计
登录(或恢复)操作应引起用户的充分注意:
最好将登录页表单放在页面中心位置;不需要复杂或冗长的文字解释,例如可以利用简单的“输入密码”来提示用户完成操作;要求用户一次只做一件重要的事情,例如将找回密码这种复杂的流程分解为多个步骤进行。

保留脸书用户的登录信息,并将恢复过程分为几个逻辑步骤。

亚马逊将次要恢复选项放在“更多帮助”中,这有助于保持主要操作的专注。
设计思维:
使用卡片式布局;将操作分为主要动作和次要动作;使用尺寸大而突出的登录按钮;尽量减少次要操作的次数,以避免使页面出现混乱。04 给出明确反馈并在操作失败时提供帮助
在登录过程的每个阶段,用户都可能失败;邮箱输入不正确、忘记密码或网络问题等。,所有这些都可能导致登录意愿大幅下降。
因此,清晰及时的反馈设计对用户来说非常重要。

当信息输入不正确时,会提示错误的具体原因。

当密码输入错误时,脸书会在底部添加“登录谷歌”选项。
设计思维:
鼓励用户尝试合适的替代方案;登录失败后,将用户导航到单独页面并组织其他登录方法;展示最有效的登录方法,并在发生问题时及时对用户做出反馈。05 多种登录方式提供灵活性
除了输入账号密码的登录方式外,最好还能提供一到两种额外的登录方式供用户选择,同时防止因为忘记密码而无法登录的情况发生。
添加过多的登录方式会使页面混乱,降低登录意图。附加选项应限制为2或3种方式。

虽然介质登录形式设计清晰,但是过多的登录方式会阻碍用户的选择和判断。

Airbnb登录页面可以看到大量的辅助登录方式,过多的选项可能会导致用户的认知负荷。
设计思维:
目前,无密码登录正在迅速普及。在很多手机app中,基于手机号码的认证已经成为常态,指纹和FaceID也出现在很多地方,从而实现了无缝、安全的认证过程。
找到最适合产品的登录方式,并以此为主要选择,可以有效提高效率!
06 登录意味着信任
登录涉及用户输入敏感的个人数据,如手机号码、电子邮件地址、密码等。用户愿意输入信息,说明他们信任这个平台或产品。
虽然减少与用户的摩擦很重要,但有时网站也会提供额外的认证来保证用户的信息安全。

哔哩哔哩文本验证用于增强用户帐户的安全性。
设计思维:
登录形式要代表品牌的形象,任何视觉上的改变都要慢慢来,因为完全改变视觉设计可能会导致信任感的缺失。
07 确定用户类型
登录意图是一种用户角色和类型可以包罗万象的体验。
您可以尝试以下方式来定义用户范围,以便更好地了解用户:
登录渠道:与PM合作找出在登录流程中用户交互和退出的关键阶段。登录入口:用户是通过邮箱、搜索引擎还是通过应用跳转到登录页?常用设备:手机、浏览器等设备可以为用户带来个性化的体验。用户群组:利用年龄或地理位置等方式也能进行分离用户群主的划分。08 登录页设计实例分析
通过分析具有代表性的登陆页面设计,展示了登陆页面的多种设计表现形式。

Google采用多阶段登录方式,分两步输入邮箱和密码。这种格式对于Google来说有一定的安全优势,下一步也可以为用户提供个性化的选择。

优步的登录页面采用简洁的风格,注重用户体验,引导用户输入手机号码进行下一步操作。

使用脸书的右对齐的登录形式可以很好的集中注意力,左边的空房间用来展示品牌的信息和形象。

亚马逊的登陆页面在视觉设计上有点老,但它是管理用户注意力的一个很好的例子。黄色的“继续”按钮和简洁的页面使登录看起来简单快捷。

Figma的登录页面位于屏幕中央,最上方第一个显示的是Google login,这可能是Figma首选和推广的登录形式。页面整体设计由线框构成,非常简洁高效。
作者:clipp,微信微信官方账号:Clip design clip。精选每周设计文章,重点分享关于产品、交互、UI视觉的设计思想。
本文由@ Clippp翻译发布。每个人都是产品经理。未经作者允许,禁止转载。
题目来自Unsplash,基于CC0协议。
本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://51itzy.com/21900.html