“使用 Google 账号登录”按钮的用户体验

按钮呈现

个性化按钮会显示批准您网站的首次 Google 会话的个人资料信息。已获批准的 Google 会话在您的网站上具有相应的账号,该账号之前曾使用“使用 Google 账号登录”功能登录过。

如果系统显示个性化按钮,用户会知道以下信息:

  • 至少有一个有效的 Google 会话。
  • 您的网站上有相应的账号。

个性化按钮可让用户在点击按钮之前,快速了解 Google 端和您网站上的会话状态。这对仅偶尔访问您网站的最终用户而言特别有用。用户可能会忘记账号是否已创建及创建方式。个性化按钮可提醒他们之前用过“使用 Google 账号登录”功能。因此,这有助于防止在您的网站上创建不必要的重复账号。

为了指示会话状态,个性化按钮会通过以下方式显示:

  • 一次会话:Google 端只有一次会话。该会话会批准客户,并且您的网站上有相应的账号。

    一个个性化按钮,用于显示单个 Google 账号的名称。

  • 多个会话:Google 端存在多个会话。这些会话会批准客户端。显示的账号旁边的列表箭头表示已获批准。至少有一个会话在您的网站上具有对应的账号。

    带有列表箭头的自定义按钮。

  • 无会话:Google 端没有会话,或者没有任何会话批准客户端。

    显示“使用 Google 账号登录”且不含个性化信息的按钮。

当会话状态适合时,系统会自动显示个性化按钮,除非您的按钮设置不允许显示个性化按钮。如果出现以下情况,系统不会显示个性化按钮:

  • data-type 属性为 icon
  • data-size 属性设置为 mediumsmall
  • data-width 属性设置为小于 200px 的数字。

如果名称或电子邮件地址过长,无法在按钮内显示,系统会以省略号显示。

一个带有省略号姓名和电子邮件的个性化按钮。

关键用户体验历程

用户历程因以下状态而异。

  • Google 网站上的会话状态。以下术语用于表示用户体验历程开始时的不同 Google 会话状态。

    • Has-Google-session:Google 网站上至少有一个活跃会话。
    • No-Google-session:Google 网站上没有活动会话。
  • 用户体验历程开始时,所选 Google 账号是否已批准您的网站。以下术语用于指示不同的审批状态。

    • 新用户:所选账号尚未批准您的网站。
    • 回访用户:所选账号之前已批准您的网站。

Has-Google-session 新用户历程

  1. “使用 Google 账号登录”按钮。

    显示“使用 Google 账号登录”且不含个性化信息的按钮。

  2. 账号选择器页面。

    Has-Initial-Session 账号选择器页面。

  3. 新的用户意见征求页面。

    “使用 Google 账号登录”按钮的意见征求和登录。

  4. 用户确认后,系统会与您的网站共享 ID 令牌。

用户可以点击使用其他账号按钮,添加新的 Google 会话,请参阅下文中的无 Google 会话用户体验历程。

Has-Google-session 回访用户历程

  1. “使用 Google 账号登录”按钮。

    一个个性化按钮,用于显示单个 Google 账号的名称。

  2. 账号选择器页面。

    Google 账号选择器

  3. 用户选择返回的账号后,系统会与您的网站共享 ID 令牌。

用户可以点击使用其他账号按钮来添加新的 Google 会话,请参阅下文中的“无 Google 会话”用户体验历程。

无 Google 会话的新用户历程

  1. “使用 Google 账号登录”按钮。

    显示“使用 Google 账号登录”的按钮,但不含个性化信息。

  2. 用于添加新 Google 会话的首页。

    Google 账号电子邮件

  3. 用于添加新 Google 会话的第二个页面。

    登录 Google 账号

  4. 新用户意见征求页面。

    “使用 Google 账号登录”按钮的意见征求和登录。

  5. 用户确认后,系统会与您的网站共享 ID 令牌。

未在 Google 上有会话的回访用户历程

  1. “使用 Google 账号登录”按钮。

    显示“使用 Google 账号登录”的按钮,但不含个性化信息。

  2. 用于添加新 Google 会话的首页。

    Google 账号电子邮件

  3. 用于添加新 Google 会话的第二个页面。

    登录 Google 账号

  4. 用户点击下一步按钮后,系统会与您的网站共享 ID 令牌。