品牌規範

本節旨在協助您建立圖片和其他使用者介面元素,以便在 Google Pay 應用程式中呈現出良好效果。

主頁橫幅

class.heroImage 欄位會在卡片內以完整寬度的橫幅顯示。

主頁橫幅規範

以下列出有關主頁橫幅的使用者介面建議:

規範 範例
建議使用的檔案類型:PNG
建議大小為 1032x336px。請使用寬的矩形圖片,且背景為彩色,以獲得最佳效果。
長寬比:3:1 或更寬。
顯示時會佔滿卡片的完整寬度,高度則會按比例調整。

完整寬度圖片

類別或物件的 *.imageModulesData.mainImage 欄位會在展開的會員方案或優惠內容中,以完整寬度的圖片顯示。

完整寬度圖片規範

以下列出有關完整寬度圖片的使用者介面建議:

規範 範例
建議使用的檔案類型:PNG
最小尺寸:寬度 1860px,高度不定。請使用寬的矩形圖片,且背景為彩色,以獲得最佳效果。
長寬比不定。
顯示時會佔滿範本 (白色背景的「卡片」) 的完整寬度,高度則會按比例調整。
請使用標誌圖片採用的色彩配置。

條碼圖片

針對特定類別,您可以在條碼上方和下方顯示圖片。

在條碼上方顯示的圖片

以下列出條碼上方圖片的相關使用者介面建議:

規範 範例
建議使用的檔案類型:PNG  
採用最大長寬比時的高度上限為 20dp。如有兩張圖片,則建議大小的高度為 80px,寬度為 80px 至 780px。這樣一來,兩張圖片就能並列顯示。 如果兩張圖片分別為正方形和長方形,則圖片大小應為 80px x 80px 和 780px x 80px。
長寬比不限。如要達到單一圖片的高度與寬度上限 (20dp),請使用 20:1 的長寬比。 如果您只希望在條碼上方顯示一張圖片,請使用完整寬度 (不含邊框間距)。圖片大小應為 1600px x 80px。
單一圖片的顯示大小上限為高度 20dp,寬度 400dp。  

在條碼下方顯示的圖片

以下列出條碼下方圖片的相關使用者介面建議:

規範 範例
建議使用的檔案類型:PNG  
採用最大長寬比時的高度上限為 20dp。建議大小:高度 80px,寬度 80px 到 1600px。 如果是正方形,則為 80px x 80px。如果是矩形,則為 1600px x 80px。
長寬比不限。如要達到高度與寬度上限 (20dp),請使用 20:1 的長寬比。 如要以完整寬度 (不含邊框間距) 顯示圖片,圖片大小應為 1600px x 80px。
顯示大小上限為高度 20dp,寬度 400dp。  

模組

模組代表範本的特定部分所含的一組欄位。下表提供相關規範,讓您瞭解應在類別和物件中加入多少模組,以確保卡片可在 Google Pay 應用程式中正確顯示。

規範 範例
在您的類別或您建立的物件中只使用一個 imageModulesData
在您的類別或您建立的物件中使用最多兩個 infoModuleData infoModuleData 可定義使用者專屬資訊,例如「會員姓名」和「會員編號」。
在您的類別或您建立的物件中共使用最多四個 linksModuleData URI。 您可以在類別中使用兩個 linksModuleData URI,一個是網站 URI,一個是說明中心的電話號碼。您可以在物件中使用兩個 linksModuleData URI,定義使用者帳戶專屬 URI 和鄰近位置。
在類別和您建立的物件中共使用最多兩個 textModulesData 欄位。 您可以在類別中使用一個 textModulesData 來定義計劃詳情,並在物件中使用另一個 textModulesData 來定義使用者帳戶專屬詳情。

infoModuleData

InfoModuleData 包含會員和可自訂的資訊,會在展開後顯示。到期日、第二點數餘額或儲值餘額等資訊應儲存在資訊模組中。

linksModuleData

連結模組包含網頁、電話號碼和電子郵件地址的 URI。以下列出有關連結模組的使用者介面建議:

規範 範例
定義網站 URI 或 Google 地圖中的位置時,請在前方加上 http:。這個前置字串可讓消費者在輕觸連結後前往網站,或在 Google 地圖中查看該位置。此外,加上這個前置字串後,卡片說明的前方還會出現連結或地圖的圖示。 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/pay/passes/'

定義電話號碼時,請在前方加上 tel:。只要加上這個前置字串,消費者就能輕觸連結來撥打電話。此外,加上這個前置字串後,卡片說明的前方還會出現電話的圖示。 'uri': 'tel:6505555555'
定義電子郵件地址時,請在前方加上 mailto:。只要加上這個前置字串,消費者就能輕觸連結來傳送電子郵件至該地址。此外,加上這個前置字串後,卡片說明的前方還會出現電子郵件的圖示。 'uri': 'mailto:jonsmith@email.com'

標題、標籤和名稱

標題、標籤和名稱中,每一個字的第一個字母都應為大寫。

內容政策

票證中每個欄位的內容都應符合 Payments 內容政策。類別中參照的網站內容也必須符合這些政策。

儲存至 Google Pay 按鈕

設計

請使用 g:savetoandroidpay HTML 標記heightsize 欄位,修改 「Save to Google Pay」(儲存至 Google Pay) 按鈕的高度和寬度。如果您指定 textsize=large,文字大小和按鈕大小會大幅增加,很適合在導入行動服務或有特殊 UI 要求時使用。

請使用 theme 來設計按鈕的顏色。下表說明這些設定對於產生的 [儲存至 Google Pay] 按鈕有何影響。

設定 結果
themedark
themelight

位置

為確保使用者可儲存和兌換您建立的票證,以及與這些票證進行互動,建議您將儲存至 Google Pay (S2GP) 按鈕或連結放在所有相關的流程中。一般來說,這個按鈕應位在類似的使用者動作按鈕 (例如 [列印優惠券] 按鈕) 旁邊。

以下針對如何在流程中設置 [儲存至 Google Pay] 按鈕提供建議,這些做法對部分合作夥伴而言很有效。

會員卡

使用者可在您的 Android 應用程式或網站中查看您的會員編號或會員卡,建議您在這個流程中設置 [儲存至 Google Pay] 按鈕。某些合作夥伴是在使用者登入或登出應用程式後向使用者顯示按鈕,而且成效不錯。

儲值卡

使用者在您網站或應用程式中購買儲值卡後,會看到一個確認畫面,建議您在這個畫面中設置 [儲存至 Google Pay] 按鈕。您也可以將按鈕設置在儲值卡收受者所收到的電子郵件、簡訊或確認畫面中。

優惠

在向使用者提供優惠內容的網站或應用程式,或優惠宣傳電子郵件或簡訊中 (使用我們的儲存連結),您都可設置 [儲存至 Google Pay] 按鈕。

票券

使用者在您網站或應用程式中完成票券購買流程後,會看到一個畫面或收到確認電子郵件或簡訊,您可以在這些地方設置這個按鈕。建議您將 [儲存至 Google Pay] 按鈕設置在您應用程式或網站中供使用者存取票券的地方。

登機證

使用者在電腦版/行動版網站或行動應用程式中完成報到流程後,會看到一個畫面,您可以在該畫面中設置這個按鈕。此外,使用者可透過您網站或應用程式的某個頁面,或是透過報到後收到的確認電子郵件或簡訊查看登機證,您也可以將按鈕設置在這些地方。

下載

如要讓使用者透過連結下載會員卡、儲值卡或優惠,請在深層連結前方加上 Google Pay 按鈕圖片,確保使用者可享有一致的體驗。點選 [下載素材資源] 即可下載支援多種語言的 Google Pay 按鈕:

下載素材資源

合作夥伴平台資料的位置

為確保使用者可前往與票證相關的多功能應用程式或網站,請務必在票證的類別或物件 linksModuleData.* 屬性中,加入應用程式的深層連結或網站,讓使用者透過 Google Pay 中顯示的票證前往您的平台。如要瞭解這項資料的呈現方式,請參閱票證類別的「設計」部分。