用户体验设计

登录体验是应用中最重要的用户体验之一。优质的登录体验可实现 90% 以上的转化率,并鼓励用户提高参与度和贡献更多盈利。

嵌入 Facebook 登录后,用户可以快速轻松地开始使用您的应用,并享受更加个性化和有意义的体验。在本文档中,我们将提供一些技巧和注意事项,以助您使用 Facebook 登录打造出色的用户登录体验。

  1. 首先彰显价值
  2. 避免不必要的步骤
  3. 按钮设计
  4. 权限
  5. 提供退出方法
  6. 测试和衡量

1.首先彰显价值,然后提示用户登录

确定在用户体验的哪个阶段提示用户登录时,思考一下用户何时会认为应用提供的内容足以让他们放心提供信息。

这通常会受到用户下载应用之前的体验影响,但您可以借助应用中的设计多方面加深影响。

以下设计技巧能吸引更多登录用户:

  • 简明扼要地说明应用提供的功能
  • 提供用户登录后所获得的内容一览
  • 提供全新的用户体验
  • 允许用户不使用帐户体验应用

简明扼要地说明应用提供的功能

提供简明扼要且引人注目的应用功能说明。用户可能是在很久之前下载的应用,或是在应用商店看到的应用介绍。

提供用户登录后可获得的内容一览

在登录前向用户提供内容一览,例如下例中的背景照片。内容不需要很详细,即使是 Pinterest 钉板的模糊图片也能鼓励更多用户登录 Pinterest。

提供全新的用户体验

如果您的应用需要借助额外的培训信息来提供最佳体验,您可以在“登录”按钮上方提供多步骤演示。用户可以选择详细了解或是在准备好时立即登录。

允许用户在登录前体验应用

如果可以,允许用户先体验您的应用,然后再提示他们登录。例如,许多电子商务应用(如 Zulily)会等到用户准备结账时才要求登录。

2.避免不必要的步骤

减少不必要的步骤是提高转化率最有效的方法之一。

避免让用户先轻触“登录”或“注册”来访问 Facebook“登录”按钮。使用 Facebook 登录功能时,这是多余的步骤。用户甚至不需要停下来想自己是否有帐户。

另外,用户通过 Facebook 登录后,不要提示他们创建帐号或密码。用户通过 Facebook 登录的一个最普遍的原因是“整个过程简单快速,并且我不用输入密码”。用户通过 Facebook 登录后,尤其不愿意创建帐号或密码。

3.Facebook“登录”按钮

SDK 附带的“Facebook 登录”按钮易于集成,并包含内置说明,可确保设计与体验的一致性。

如要启用帐户创建和 Facebook 登录功能,需要根据上下文来决定首选标签是“使用 Facebook 继续”还是“使用 Facebook 登录”。

已批准的“使用 Facebook 登录”的使用方法

已批准的“使用 Facebook 继续”的使用方法

已批准的“以 [Name] 的身份登录并继续”的使用方法

请优先使用上述登录设计,我们的审核人员将会对其进行审核。然而,如需针对您的需求构建特定版本,请务必遵循以下指导方针。

徽标

为获得认可和信任,请始终使用由 Facebook 品牌资源中心提供的已批准的“f”徽标

在登录按钮设计中使用“f”徽标时,此徽标应出现在行动号召前。请勿将该徽标用作行动号召的一部分,比如“使用“f”徽标登录”。

颜色

颜色是让人们快速识别事物的最佳方法。就可用性而言,用户越能快速识别按钮及其用途,就越会快速轻触按钮,从而形成更加顺畅的使用体验。

按钮颜色为白色和 Facebook 蓝:5890FF。在世界各地,当人们提到 Facebook 登录时,经常会称之为“蓝色按钮”。如果您无法使用 Facebook 蓝,请恢复到黑色和白色。

FACEBOOK 蓝的颜色值

  • 四色印刷铜版纸:83 / 52 / 00 / 00
  • 四色印刷胶版纸:77 / 36 / 00 / 00
  • PMS 2727C
  • PMS 2382U
  • Hex #1877F2
  • R = 24 G = 119 B = 242

文本

请根据上下文来决定首选标签是“使用 Facebook 继续”还是“使用 Facebook 登录”。同时使用“f”徽标与行动号召时,请使用由 Facebook 品牌资源中心提供的可下载的官方版本。

请将行动号召文字置于登录按钮内,并确保该文字不会出现在按钮之外。

选择最适合应用的字体、字体粗细和字距,但保持内容清晰易读。

版位

登录按钮应易于快速识别和轻触。在移动设备上,这意味着要靠近大拇指并且足够大,能够轻松轻触。大按钮的转化率比小按钮的高,这是简单而不争的事实。

我们提供有多种尺寸的“f”徽标,以便满足按钮缩放需求,但比例和排版样式必须保持一致。

注意事项

  • 请务必使用由 Facebook 品牌资源中心提供的经批准的“f”徽标,并遵循使用守则。

  • 请务必根据上下文,在登录按钮上使用首选标签“使用 Facebook 继续”或“使用 Facebook 登录”,并确保将文字嵌入到按钮设计中。

  • 请勿以任何方式修改“f”徽标,如更改设计样式、大小、颜色或任何其他自定义变体。如果因技术限制而无法使用正确的颜色,则建议使用黑色和白色。

  • 请勿于无合适的行动号召时,在按钮上使用“f”徽标,最好是使用“使用 Facebook 继续”或“使用 Facebook 登录”

  • 请勿将行动号召文字(如:使用 Facebook 继续)置于登录按钮之外。

4.权限

仅请求获得您需要的权限

请求的权限越少,用户越容易欣然授予。经验告诉我们,请求的权限越少,通常转化率越高。

在用户有机会试用您的应用后,您可以随时请求其他权限。

请求获取较少的权限还有另一个好处,您可能无需提交应用进行登录审核。只有当您请求获取除 public_profileemail 以外的权限时,才需要提交应用进行登录审核。

视情况请求权限并解释原因

当用户了解到为什么应用需要该信息来提供更好的体验时,更容易接受权限请求。当用户尝试在您的应用中完成需要特定权限的操作时,您借此触发权限请求比较适宜。

例如,在 Facebook 应用中,只有当用户更新状态时明确轻触位置按钮,应用才会请求定位服务。

5.提供退出方法

用户登录后,您还需要提供退出帐户、断开帐户连接或彻底删除帐户的方法。这不仅是为了尊重用户,也是开发者登录政策的要求。

例如,在约会应用 Tinder 中,用户可以选择隐藏个人资料卡(防止被其他人找到)、退出或彻底删除帐户。

6.测试和衡量

即便是最好的设计师也无法一次就将登录流程做得尽善尽美。良好的登录体验通常是深思熟虑的设计和测试外加多次反复修改的结果。

发布应用前,请执行定性可用性测试,了解用户对所见内容的反应。测试不必太正式、太讲求有效性,但一定要观察用户体验整个流程。

除了定性测试,还建议您使用分析工具来了解用户是否完成了流程及他们的整体转化率。采用最佳实践的应用可以获得超过 90% 的转化率。