我们在使用大多产品时，刚进入软件都需要一个登录或者注册的动作，每个软件的登陆方式页面都差不多，但一些小的细节体验最能影响用户；本文作者分享了关于登录页设计细节和逻辑，我们一起来了解一下。
几乎所有的登录页看起来都大同小异，通过输入账号和密码就能够进入，但仔细思考会发现，每个登录页都有自己差异化的点，而这些点正是产品无一物二的地方。
确保用户成功且无压力的登录体验需要我们不断地思考。
01 什么是登录体验？
登录体验是指用户通过入口进入应用、网站或服务，建立自己的身份。
登录流程通常由主登录流程和恢复流程组成，其中主登录流程包括填写用户名、手机号、密码等，恢复流程包括忘记密码、重置密码、其他登录方式等。
登录体验的目标是确保用户成功登录帐户。
02 设计熟悉的登录流程
使用简洁、常用的页面布局和文字，有助于用户轻松执行熟悉的操作，保持设计简单也有助于将体验轻松扩展到不同设备和屏幕尺寸。
Pinterest采用了居中对齐的重叠式登录页设计，用醒目的红色按钮来突出登录动作，还支持Google和Facebook作为其他登录方式。
登录页是强调品牌的首要接触点。登录操作最好于中心位置，页面上的其他元素应谨慎增加，避免注意力从登录任务上移开。
设计思考：
用户花在登录页上的时间越少越好，要让用户尽快发现产品中的优点和价值！
03 专注设计
登录(或恢复)操作应引起用户的全部注意力：
- 最好将登录页表单放在页面中心位置；
- 不需要复杂或冗长的文字解释，例如可以利用简单的“输入密码”来提示用户完成操作；
- 要求用户一次只做一件重要的事情，例如将找回密码这种复杂的流程分解为多个步骤进行。
Facebook保留用户的登录信息，并将恢复流程分为几个逻辑步骤。
亚马逊将辅助恢复选项放在“更多帮助”中，这有助于使主要操作保持重点。
设计思考：
- 使用卡片式布局；
- 将操作分为主要动作和次要动作；
- 使用尺寸大而突出的登录按钮；
- 尽量减少次要操作的次数，以避免使页面出现混乱。
04 给出明确反馈并在操作失败时提供帮助
在登录过程的每个阶段，用户都可能会失败；输入错误的邮箱，忘记密码或网络问题等，所有这些问题都可能导致登录意图急剧下降。
因此清晰及时的反馈设计对用户来说很重要。
信息输入错误时会提示错误具体的原因。
密码输入有误时，Facebook会在下方增加“使用Google登录”选项。
设计思考：
- 鼓励用户尝试合适的替代方案；
- 登录失败后，将用户导航到单独页面并组织其他登录方法；
- 展示最有效的登录方法，并在发生问题时及时对用户做出反馈。
05 多种登录方式提供灵活性
除了输入账号密码这种登录方式，最好提供一种或两种附加的登录方式以便用户选择，同时防止忘记密码造成无法登录的情况。
添加过多的登录方式会使页面混乱，降低登录意图，附加选项应该限制为2或3种方式。
Medium登录表单的设计尽管很清晰，但过多的登录方式会阻碍用户的选择和判断。
Airbnb登录页能看到大量的辅助登录方式，过多的选项可能会导致用户的认知负荷。
设计思考：
当前无密码登录正在迅速普及。在很多移动App中，基于手机号的身份验证已成为常态，指纹和FaceID也出现在许多地方，从而实现了无缝和安全的身份验证流程。
找到产品最适合的登录方式，并将其作为主要选择能有效提升效率！
06 登录意味着信任
登录涉及用户输入敏感的个人数据，例如手机号、邮箱、密码等，用户愿意输入信息意味着他们信任这个平台或产品。
虽然减少与用户的摩擦很重要，但有时网站也会提供额外的身份验证来确保用户信息的安全。
B站利用文字验证方式来增强用户帐户的安全性。
设计思考：
登录表单应该代表品牌的形象，任何视觉上的变化都必须慢慢进行，因为完全改变视觉设计可能会导致缺乏信任。
07 确定用户类型
登录意图是一种体验，在这种体验中用户角色和类型可以无所不包。
可以尝试以下方式来定义用户的范围以便更清楚的了解用户：
- 登录渠道：与PM合作找出在登录流程中用户交互和退出的关键阶段。
- 登录入口：用户是通过邮箱、搜索引擎还是通过应用跳转到登录页？
- 常用设备：手机、浏览器等设备可以为用户带来个性化的体验。
- 用户群组：利用年龄或地理位置等方式也能进行分离用户群主的划分。
08 登录页设计实例分析
通过分析具有代表性的登录页设计来展示登陆页的多种设计表达。
Google采用多阶段的登录方式，邮箱和密码分两步进行输入。这种格式对谷歌来说有一些安全优势，也可以在下一步为用户提供个性化的选择。
Uber的登录页采用简单的样式，注重使用体验，引导用户输入手机号来进行下一步。
Facebook利用右对齐的登录表单很好地集中注意力，左边的空间被用来展示品牌的信息和形象。
亚马逊的登录页从视觉设计上看有些陈旧，但却是管理用户注意力的一个很好的例子。黄色的“继续”按钮和简洁的页面使登录看起来简单而快速。
Figma的登录页位于画面中心，顶部首先展示的是以Google登录，这可能是Figma首选和推广的登录形式，页面整体的设计利用线框组成，非常简洁高效。
作者：Clippp，微信公众号：Clip设计夹。
内容出处：，
声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/surface/22824.html
微信扫一扫
支付宝扫一扫
相关推荐
-
企业网站页面设计需考虑用户体验
企业网站最重要的在于为用户提供有价值的产品信息、顾客服务，以及为实现促销和在线销售等提供支持，如果过分注重外在的视觉效果，就可能适得其反。现在界面设计简陋的企业网站越来越少，但却向另一个极端发展，主要表现为网站过分注重美术效果，包括：大量采用图片，影响网页下载速度;有些网站连基本信息内容都用图片格式，影响基本信息获取;或者文字太小、文字颜色暗淡、采用深色页面背景，影响正常视觉等等。
-
企业网站问题的深层次分析
从表现形式来看，每个网站的问题可能都有所不相同，但从实质上来说，其根本原因是相似的，也就是说都具有共同的缺陷特征。从现象来看，这种状况通常被认为是企业网站运营策略失当，如网站推广不力、信息更新不及时等，但从更深入的层次上分析，则是由于缺乏对企业网站功能、企业网站的本质以及企业网站与网络营销之间关系等基本问题的深入了解所致。
-
一个小表情背后的12亿掘金之路
最近，数说君在上班路上被一群奇怪的表情包给萌到了。先感受下迷一般的画风…… 没错，这就是风靡贴吧的表情大帝——滑稽表情。 圆嘟嘟的脸萌萌哒，弧度上扬的嘴角傲而不娇，微微泛红的脸颊让…
-
2021年的前端框架选择 Angular vs React vs Vue
每个前端开发人员都听说过三个用于构建 Web 应用程序的框架：React、Vue.js和Angular。 React 是一个 UI 库，Angular 是一个成熟的前端框架，而 V…
-
企业网站建设中页面布局综述
比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面型是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。
-
微信、陌陌等著名IM软件设计架构详解
电量：对于移动设备最大的瓶颈就是电量了。因为用户不可能随时携带电源，充电宝。所以必须考虑到电量问题。那就要检查我们工程是不是有后台运行，心跳包发送时间是不是合理。 流量：对于好多国…
-
PANTONE（潘通）发布2021春夏10大流行色，设计师的配色灵感来了
不知不觉，2020仅剩两个多月 很快又要迎来新的一年了 而每逢这个时候 色彩预测权威机构PANTONE潘通 都会公布下一年的流行配色 这不，前段时间潘通大佬 发布2021春夏10大…
-
Loaders.css：纯CSS打造的免费开源加载动画，丝滑流畅高性能
一个 CSS3 loading 动画库，简单易用，动画流畅，无论是学习还是使用，都很不错。 关于 Loaders.css Loaders.css 是一个性能出色的 web 前端代码…
-
CSS美化单选框radio 、多选框checkbox和switch开关按钮
radio、checkbox和switch应该是一个比较常用的html标签，尤其是在中后台ERP系统里面更为常见。不过浏览器自带的样式不怎么好看，而且不同浏览器效果也不一样。出于美…