本頁說明「使用 Google 帳戶登入」按鈕的使用者體驗 (UX)。
按鈕顯示
個人化按鈕會顯示首個 Google 工作階段的個人資料資訊,該工作階段會核准你的網站。已核准的 Google 工作階段會在您的網站上找到對應的帳戶,且該帳戶曾使用「使用 Google 帳戶登入」功能登入。
如果系統顯示個人化按鈕,使用者會知道以下資訊:
- 至少有一個有效的 Google 工作階段。
- 你的網站上有對應的帳戶。
使用者在點選按鈕前,可以透過個人化按鈕快速瞭解 Google 和網站的工作階段狀態。這對偶爾造訪網站的使用者特別有幫助。他們可能會忘記是否已建立帳戶,以及建立帳戶的方式。系統會顯示個人化按鈕,提醒使用者曾使用「使用 Google 帳戶登入」功能。因此,這有助於避免在網站上不必要地建立重複帳戶。
為了顯示工作階段狀態,系統會以以下方式顯示個人化按鈕:
一個工作階段:Google 端只有一個工作階段。該工作階段會核准客戶,且您的網站上會有對應的帳戶。
多個工作階段:Google 端有多個工作階段。這些工作階段會核准用戶端。核准狀態會以清單箭頭表示,並顯示在所選帳戶旁邊。至少有一個工作階段在網站上有對應的帳戶。
沒有工作階段:Google 端沒有工作階段,或是所有工作階段都尚未核准用戶端。
系統會在工作階段狀態適當時自動顯示個人化按鈕,除非按鈕設定不允許顯示個人化按鈕。系統不會顯示個人化按鈕,如果:
data-type
屬性為icon
。data-size
屬性設為medium
或small
。data-width
屬性已設為小於 200 像素的數字。
如果名稱或電子郵件地址過長,無法顯示在按鈕中,系統會顯示省略號。
主要使用者歷程
使用者歷程會因下列狀態而異。
Google 網站上的工作階段狀態。下列術語用於指示使用者歷程開始時的不同 Google 工作階段狀態。
- Has-Google-session:Google 網站上至少有一個有效的工作階段。
- No-Google-session:Google 網站上沒有有效的工作階段。
在使用者歷程開始時,所選 Google 帳戶是否已核准您的網站。我們會使用下列字詞來表示不同的核准狀態。
- 新使用者:所選帳戶尚未核准你的網站。
- 回訪者:所選帳戶曾核准過你的網站。
Has-Google-session 新使用者歷程
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
新的使用者同意聲明頁面。
使用者確認後,系統就會將 ID 權杖分享給您的網站。
使用者可以按一下「使用其他帳戶」按鈕,新增 Google 工作階段,請參閱下方的無 Google 工作階段使用者歷程。
Has-Google-session returning user journey
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
使用者選擇回復帳戶後,系統會將 ID 權杖分享給您的網站。
使用者可以按一下「使用其他帳戶」按鈕,新增 Google 工作階段,請參閱下方的「無 Google 工作階段」使用者歷程。
無 Google 工作階段的新使用者歷程
「使用 Google 帳戶登入」按鈕。
新增 Google 工作階段的第一個頁面。
新增 Google 工作階段的第二個頁面。
新的使用者同意聲明頁面。
使用者確認後,系統就會將 ID 權杖分享給您的網站。
無 Google 工作階段的回訪者歷程
「使用 Google 帳戶登入」按鈕。
新增 Google 工作階段的第一個頁面。
新增 Google 工作階段的第二個頁面。
使用者按下「Next」按鈕後,系統就會將 ID 權杖分享給您的網站。
Family Link 帳戶主要使用者歷程
您仍可沿用上一節中介紹的一般重要使用者歷程。以下是登入時,系統會針對孩子的 Google 帳戶顯示額外流程的畫面。
No-Google-session
「使用 Google 帳戶登入」按鈕。
新增孩童 Google 工作階段 (孩童 Google 帳戶電子郵件) 的第一個頁面。
新增孩子的 Google 工作階段 (孩子的 Google 帳戶密碼) 的第二個頁面。
第一頁:向家長申請核准,以便新增新的 Google 子帳戶。
請家長核准新增孩子的 Google 工作階段。
第三頁:取得家長核准,可為孩子新增 Google 工作階段。
第一頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
第二頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
第三頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
最後一個畫面,家長必須核准孩子登入應用程式的 Google 帳戶。
家長按一下「繼續」按鈕後,系統就會將 ID 權杖提供給您的網站。
Has-Google-session
「使用 Google 帳戶登入」按鈕。
帳戶選擇器頁面。
第一頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
第二頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
第三頁:取得家長核准,讓孩子登入應用程式的 Google 帳戶。
最後一個畫面,家長必須核准孩子登入應用程式的 Google 帳戶。
家長按一下「繼續」按鈕後,系統就會將 ID 權杖提供給您的網站。