几乎所有的登录页面看起来都很相似，输入账号和密码就可以进入，但如果你仔细想一想，你会发现每个登录页面都有自己的差异点，而这些点正是产品的相同之处。
确保为用户提供成功且无压力的登录体验需要我们不断思考。
01 登录体验如何？
登录体验是指用户通过入口进入应用程序、网站或服务并建立自己的身份。
登录过程通常由主登录过程和恢复过程组成。 主要登录过程包括填写用户名、手机号码、密码等，恢复过程包括忘记密码、重置密码等登录方式。
登录体验的目标是确保用户成功登录其帐户。
02 设计熟悉的登录流程
使用干净、通用的页面布局和文本可以帮助用户轻松执行熟悉的操作，保持设计简单也有助于将体验轻松扩展到不同的设备和屏幕尺寸。
Pinterest 采用居中对齐的重叠登录页面设计，用醒目的红色按钮突出登录操作，还支持 Google 和 Facebook 等其他登录方式。
着陆页是强调您品牌的第一个接触点。 登录操作最好放置在中心位置，页面上的其他元素应小心添加，以避免分散登录任务的注意力。
设计思路：
用户在登陆页面上花费的时间越少越好。 让用户尽快发现产品的优势和价值！
03 注重设计
登录（或恢复）操作应引起用户的全部注意力：
Facebook 保留用户的登录信息，并将恢复过程分解为逻辑步骤。
亚马逊将辅助恢复选项放在“更多帮助”中，这有助于保持主要操作的重点。
设计思路：
04 操作失败时给予明确的反馈和帮助
在登录过程的每个阶段，用户都可能会失败； 输入错误的电子邮件地址、忘记密码或网络问题，所有这些都可能导致登录意图急剧下降。
因此，清晰及时的反馈设计对于用户来说非常重要。
当信息输入错误时，会提示错误的具体原因。
当密码输入错误时，Facebook 会在下方添加“使用 Google 登录”选项。
设计思路：
05 多种登录方式提供灵活性
除了输入账户密码的登录方式外，最好额外提供一到两种登录方式供用户选择，同时防止出现因忘记密码而无法登录的情况。
添加太多登录方法会使页面变得混乱并降低登录意图，其他选项应限制为 2 或 3 种方法。
虽然Medium登录表单的设计非常清晰，但是过多的登录方式会阻碍用户的选择和判断。
Airbnb登录页面可以看到大量的辅助登录方式，过多的选项可能会给用户带来认知负担。
设计思路：
无密码登录正在迅速流行。 在许多移动应用程序中，基于电话号码的身份验证已成为常态，指纹和 FaceID 也出现在许多地方，从而实现无缝且安全的身份验证过程。
找到最适合产品的登录方式并作为主要选择，有效提高效率！
06 登录意味着信任
登录涉及用户输入敏感的个人数据，例如手机号码、电子邮件地址、密码等。用户愿意输入信息意味着他们信任该平台或产品。
虽然减少与用户的摩擦很重要，但有时网站也会提供额外的身份验证以确保用户信息的安全。
B站采用文字验证方式，增强用户账号的安全性。
设计思路：
登录表单应该代表品牌的面貌，任何视觉变化都必须慢慢进行，因为完全改变视觉设计可能会导致缺乏信任。
07 判断用户类型
登录意图是一种用户角色和类型可以包罗万象的体验。
您可以尝试以下方式来定义用户范围，以便更清楚地了解用户：
08 登录页面设计实例分析
通过分析代表性着陆页设计，展示着陆页的各种设计表达。
Google采用多阶段登录方式，分两步输入电子邮件地址和密码。 这种格式对 Google 来说具有一些安全优势，并且下一步还可以为用户提供个性化选项。
Uber的登录页面采用简洁的风格，注重用户体验，引导用户输入手机号码进行下一步。
Facebook使用右对齐的登录表单来很好地集中注意力，左侧的空间用于展示品牌的信息和形象。
亚马逊的登陆页面在视觉上看起来有些过时，但它是管理用户注意力的一个很好的例子。 黄色的“继续”按钮和干净的页面使登录看起来简单快捷。
Figma的登录页面位于屏幕中央，顶部首先显示Google登录。 这可能是 Figma 首选和推广的登录形式。 页面整体设计由线框组成，非常简单高效。
相关文章
