「使用 Google 帳戶登入」按鈕 UX

按鈕轉譯

個人化按鈕會顯示第一個 Google 工作階段核准的網站資訊,以便核准您的網站。通過核准的 Google 工作階段會在您網站上提供相應的帳戶,這些帳戶之前曾登入「使用 Google 帳戶登入」。

如果系統顯示個人化按鈕,就表示使用者瞭解下列事項:

  • 至少有一個有效的 Google 工作階段。
  • 網站中有對應的帳戶。

個人化按鈕可讓使用者在點選按鈕前,快速瞭解 Google 側邊和工作階段上的工作階段狀態。這對於偶爾造訪您網站的使用者來說特別實用。 使用者可能忘記帳戶是否已建立,以及帳戶建立的方式。 設定個人化按鈕,提醒使用者先前使用過「使用 Google 帳戶登入」功能。 如此可避免在您的網站上建立不必要的重複帳戶。

如要表示工作階段狀態,系統會以下列方式顯示個人化按鈕:

  • 一個工作階段:Google 端只有一個工作階段。這個工作階段會核准客戶,且您的網站上有對應的帳戶。
顯示單一 Google 帳戶名稱的個人化按鈕。
  • 多個工作階段:Google 端有多個工作階段。這些工作階段會核准用戶端。且帳戶旁邊會顯示清單箭頭。至少有一個工作階段在您的網站上設有對應的帳戶。
含有按鈕箭頭的個人化按鈕。
  • 沒有工作階段:Google 端沒有工作階段,或者所有工作階段尚未核准用戶端。
顯示「使用 Google 帳戶登入」的按鈕,不含個人化資訊。

除非按鈕設定不允許顯示個人化按鈕,否則系統會在工作階段狀態適合時自動顯示個人化按鈕。在下列情況下,系統不會顯示個人化按鈕:

  • data-type 屬性為 icon
  • data-size 屬性已設為 mediumsmall
  • data-width 屬性的設定值小於 200px。

如果名稱或電子郵件無法顯示在按鈕內,系統會予以刪減。

個人化按鈕,帶有經過調整的名稱和電子郵件。

關鍵使用者旅程

使用者歷程會因下列狀態而異。

  • Google 網站上的工作階段狀態。以下字詞是用來表示使用者歷程開始時的不同 Google 工作階段狀態。

    • Has-Google 工作階段:在 Google 網站上至少有一個有效工作階段。
    • 非 Google 工作階段:Google 網站中沒有任何有效的工作階段。
  • 在所選使用者歷程開始時,所選的 Google 帳戶是否已核准您的網站。下列字詞是用來表示不同的核准狀態。

    • 新使用者:所選帳戶尚未核准您的網站。
    • 回訪者:所選帳戶先前已核准您的網站。

有 Google 工作階段的新使用者歷程

  1. 「使用 Google 帳戶登入」按鈕。

    顯示「使用 Google 帳戶登入」的按鈕,不含個人化資訊。

  2. 帳戶選擇頁面。

    有初始工作階段帳戶選擇工具頁面

  3. 新使用者同意聲明頁面。

    「使用 Google 帳戶登入」按鈕同意登入。

  4. 使用者確認之後,系統會將與您的網站共用的 ID 權杖。

使用者只要按一下 [使用其他帳戶] 按鈕,即可新增 Google 工作階段,請參閱下方的「無 Google 工作階段」使用者歷程。

採用 Google 工作階段的回訪者使用者歷程

  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 符記。