几乎所有登录页看起来都大小异，过输入账号和密码能够进入，仔细思考会发现，个登录页都有自己异化，而这些正是品地。
确保户成功且无压的登录体验需要我们断地思考。
登录体验是指户通过入口进入应、或务，建立自己的身份。
登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、机号、密码等，恢复流程包括忘记密码、重置密码、其登录方式等。
使简洁、的页面布和字，有助于户轻松执行熟悉的操作。保持设计简单有助于将体验轻松扩展到同设备和屏幕尺寸。
△ Pinterest采了中对齐的重叠式登录页设计，醒目的红色按钮来突登录作，还支持Google和Facebook作为他登录方式。
登录页是调品牌的首要触点。登录操作最好在中心位置，页面上的其素应谨慎增加，避免注力从登录任上移开。
设思考：
用户花在登录页上的时间越少越，要让用户尽快现产品中的优点和价值！
登录（或恢复）操应引用户的部注意力，最将登录页表单放在页面中心位置；
不需要复杂或冗长文解释，例如可以利用简单“输入密码”来提示用户完成操作；
要求户一次只做一件重要的事情，例如将密码这种复杂的流程分解为多个步骤进行。
△ Facebook保留户的登录信息，并将恢复流程分为几个逻辑步骤。
△ 亚马逊将辅助恢复项放在“更多帮助”中，这有助于使要操作保持重点。
计思考：
- 使卡片式布；
- 将操作为主要动作和次要动作；
- 使用尺寸突出的登录按钮；
- 尽量减少次要操的次数，以避免使页面出现混乱。
在登录过程的每个阶段，用户都可能会失败。输入错误的邮箱，忘记密码或网络问题等，所有这些问题都可能导致登录图急剧下降。
因此清晰及时的反馈设对用户很重。
△ 信息输入错误时会提示错误具体的原因。
△ 密码输入误时，Facebook会下方增加“使用Google登录”选项。
设计思考：
- 鼓励用户试合的替方案；
- 登录失败，将用户导航到单独页面并组织其他登录方法；
- 展示最有效登录法，并在发生问题时及时用户做出反馈。
除了输入账密码这种登录方式，好提供一种或两种加的登录方式以便用户选择，同时防止忘记密码造无法登录的况。
添加的登录方式使页面混乱，降低登录意图，附加选项应该为 2 或 3 种方式。
△ Medium登录表单的设计尽管很清晰，但的登录方式阻碍用户的选择和判断。
△ Airbnb登录页能看到大量的辅助登录方式，的选项能导致用户的认负荷。
设计思考：
当前无密码登录正在迅速普及。在很多移 App 中，基于手机号的身份验证已成为态，指纹和 FaceID 现在许多地方，从而实现了无缝和全的身份验证流程。
找产品最适的登录方式，并将其作为主要选择能有效提升效率！
登录涉及用户输入敏的个人数据，例如机号、邮箱、密码等，用户愿输入息味着任这个或产品。
虽然减少与用户的摩擦很重，但时网站也会提供额外的身份验证确保用户信息的安全。
△ B站利用文字验证方式增强用户帐户的安全性。
设计思考：
登录表单应该代表品形象，任何视觉上变化都必须慢慢进，为完全改变视觉设计可能会导致缺乏信任。
登录意图是体验，在这体验用户色和类型可以所不。
可尝试方式来定义户的范围更清楚的了解户：
- 登录渠：与 PM 合作找出在登录流程用户交互和退出关键阶段。
- 登录入口：户是通过邮箱、搜索引擎还是通过应跳转到登录页？
- 常用备：机、浏览器等备可以为用户带来个性化的体验。
- 用户群组：利用龄或理置方式也能行分离用户群主的划分。
通过分析具有代表性的登录页设计来展示登陆页的多种设计表达。
△ Google采多阶的登录方式，邮箱和密码分两步进行输入。这种格式对谷歌来说有一些全优势，可在一步为户供个性的择。
△ Uber的登录页采简单的样式，注重使体验，引导户输入手机号来进行一步。
△ Facebook利右对齐的登录表单很好地集中注意，左边的空间被来展示牌的信息和形象。
△ 亚马逊的登录页从视觉设计上看有些陈旧，但却是管户注意的一个很好的例子。色的“继续”按钮和简洁的页面使登录看起来简单而快速。
△ Figma的登录页位于画面中心，顶首先展示的是Google登录，这可是Figma首和推广的登录形式，页面整体的设计利线框组成，非简洁效。
为了激发更多灵感，帮大整了一套优质的登录页设计素材，附件载！
如觉得有帮助，欢迎关注作者公众号：「Clip计夹」
浙公网安备33011002017549号