020-29815005
预约专线时间:09:00-23:59

登录页要注意到的设计细节和逻辑

新闻来源:本站 日期:2021-05-05
我们使用的大多数产品,刚进入软件都需要一个登录或注册的操作,每个软件的登录页面都是相似的,但是对用户来说,一些小的细节体验是最重要的;本文小编分享了关于登录页面设计的细节和逻辑,大家一起来学习。
    优漫小编:我们使用的大多数产品,刚进入软件都需要一个登录或注册的操作,每个软件的登录页面都是相似的,但是对用户来说,一些小的细节体验是最重要的;本文小编分享了关于登录页面设计的细节和逻辑,大家一起来学习。

    差不多所有的登录页面看起来都是一样的,只要输入帐号和密码就可以进入,但是仔细考虑一下就会发现,每一个登录页面都有它自己的差异点,而这点就是产品的差异点。

    要保证用户成功的和没有压力的登录体验,需要我们不断的思考。


ui设计培训


    01登录体验是什么?

    登陆体验就是用户通过一个入口进入一个应用、一个网站或一个服务,建立身份。

    通常,登录过程包括主登录过程和恢复过程,其中主登录过程包括用户名、手机号、密码等信息的填写,恢复过程包括忘记密码、重新设置密码和其他登录方式等。

    登陆经验的目的是确保用户成功登陆帐户。

    2.熟悉登录设计流程。

    简洁明了的常用页面布局和文本帮助用户方便地执行熟悉的操作,使设计简单化也有助于方便地将体验扩展到不同设备和屏幕尺寸。

    该插件采用了居中对齐的重叠登录页面设计,并带有醒目的红色按钮来强调登录操作,同时还支持Google和Facebook等其他登录方式。

    登入页面是第一个接触品牌的地方。登陆操作最好在中央位置进行,页面上的其他元素也要小心增加,避免注意力从登陆任务转移。

    设计理念:

    登录页面花费的用户时间越少越好,要让用户尽快发现产品的优点和价值!

    03年注重设计。

    用户应完全注意登录(或恢复)操作:

    最好的方法是把登录页面的表格放在页面中央;

    无需复杂或冗长的文字说明,如可利用简单的“输入密码”提示用户完成操作;

    需要用户每次只做一件重要的事,比如把密码恢复的复杂过程分解成多个步骤来执行。

    脸谱保存了用户的登录信息,并把恢复过程分成了合理的步骤。

    亚马逊在“更多的帮助”中加入了辅助恢复选项,这有助于集中关注主要业务。

    设计理念:

    采用卡片式布局;

    把作业分为主要作业和次要作业;

    采用大号突出的登录按钮;

    将小动作的次数降到最低,避免页面混乱。

    给你清晰的反馈,当操作失败时,给予帮助。

    用户在登录过程的每一阶段都可能失败;输入错误的邮箱、忘记密码或网络问题等等,所有这些都可能导致登录意向的急剧下降。

    所以清楚、及时的反馈设计对用户非常重要。

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

    如果有错误的输入密码,Facebook将在下方添加“使用Google登录”选项。

    设计理念:

    建议用户尝试一些合适的选择;

    当登录失败时,用户被引导到一个独立的页面并组织其他的登录方法;

    显示最有效的登录方式,如果出现问题,及时向用户反馈。

    有多种登录方式,提供了灵活性。

    除输入帐号密码这种登录方式外,最好提供一两种额外的登录方式供用户选择,同时避免忘记密码而导致无法登录。

    增加太多的登录方式会造成页面混乱,降低登录目的,并且增加的选项应该被限制在2到3个。

    虽然Medium登录表单的设计很清楚,但是登录方式太多会妨碍用户的选择和判断。

    在Airbnb的登录页面中可以看到很多次要的登录方式,并且过多的选项会导致用户的认知负担。

    设计理念:

    目前,无密码登录正在迅速普及。基于手机号码的认证已经成为很多移动应用程序的常规认证方式,指纹和FaceID也在很多地方出现,使得认证过程无缝、安全。

    找出最适合产品的登录方式,并以此为主选可以有效提高效率!

    第六,登录意味着信任。

    登陆需要用户输入敏感的个人资料,比如手机号,邮箱,密码等等,用户愿意输入信息就意味着他们信任这个平台或者产品。

    尽管降低用户之间的摩擦非常重要,但有时网站还提供额外的认证,以确保用户信息的安全。

    网站使用文字验证的方法来提高用户账户的安全性。

    设计理念:

    登入表格应代表品牌形象,任何视觉上的改变都必须缓慢进行,因为彻底改变视觉设计可能导致信任缺失。

    07确定使用者类型。

    登陆意向是一种体验,用户的角色和类型可以在其中得到体现。

    为了更清楚地了解用户,可以用以下方法定义用户的范围:

    注册通道:与PM合作,以确定注册过程中用户交互和退出的关键阶段。

    进入页面:用户是通过邮箱,搜索引擎,还是通过应用程序跳到登录页面?

    通用设备:手机,浏览器等设备能给用户带来个性化的体验。

    使用者分组:利用年龄、地理位置等方法也可以将使用者分组成多个组别。

    登入页面设计实例分析。

    对典型的登录页面设计进行分析,展示了登录页面的多种设计表达。

    google采用多阶段登录,分两步输入邮箱和密码。对于谷歌来说,这种格式有一些安全上的好处,下一步还可以为用户提供个性化选择。

    Uber的登录页面采用了简单的风格,注重使用体验,引导用户在下一步输入手机号码。

    facebook使用了右对齐的登录表格,左边的空间是用来展示品牌信息和形象的。

    从视觉设计上看,亚马逊的网页有些过时,但却是一个管理用户注意力的很好例子。黄颜色的Records按钮和简洁的页面让登录看上去简单快捷。

    Figma的登录页面位于图片的中心,在顶部首先显示的是以Google登录,这可能是Figma首选的推广形式,利用线框构成的页面整体设计非常简洁、高效。