品牌規範

在此系列說明文件中,本部分旨在協助您建立圖片和其他使用者介面元素,讓這些元素可在 Google Pay 應用程式中良好地呈現。

主頁橫幅

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

主頁橫幅規範

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

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

完整寬度圖片

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

完整寬度圖片規範

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

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

條碼圖片

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

在條碼上方顯示的圖片

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

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

在條碼下方顯示的圖片

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

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

模組

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

規範 範例
在您的類別或您建立的物件中只使用一個 imageModulesData
在您的類別或您建立的物件中使用最多兩個 infoModuleData infoModuleData 可定義使用者帳戶專屬資訊,例如「會員姓名」和「會員編號」。
在您的類別或您建立的物件中共使用最多四個 linksModuleData URI。 您可以在類別中使用兩個 linksModuleData URI,一個是網站 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 欄位,修改 [儲存至 Google Pay] 按鈕的高度和寬度。如果您指定 textsize=large,文字大小和按鈕大小會大幅增加,很適合在行動用途或有特殊 UI 要求時使用。

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

設定 結果
theme/dark
theme/light

位置

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

以下建議為在流程中整合 [儲存至 Google Pay] 按鈕的方法,某些合作夥伴發現這些方法很有效。

會員卡

建議將 [儲存至 Google Pay] 按鈕放置在流程中,使用者會透過 Android 應用程式或網站查看您會員編號或卡片之處。某些合作夥伴是在使用者登入或註冊應用程式後向使用者顯示按鈕,成效不錯。

儲值卡

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

優惠

您可以將 [儲存至 Google Pay] 按鈕放置在網站或應用程式中使用者存取優惠之處,或放置在用於發送優惠的任何電子郵件與簡訊中。

票券

您可以將按鈕放置在使用者於網站或應用程式購買票券時所進行的購買流程結尾,或是放置在使用者於購買後收到的確認電子郵件或簡訊中。建議您將 [儲存至 Google Pay] 按鈕放置在您應用程式或網站中供使用者存取票券的地方。

登機證

您可以將按鈕放置在電腦版網站及行動網站的報到流程結尾,或是放置在行動應用程式的報到流程結尾。按鈕也可放置在網站或行動應用程式中,使用者查看登機證的地方,或是放置在報到後的確認電子郵件或簡訊中。

下載

如要讓使用者透過連結下載會員卡、儲值卡或優惠,請在深層連結前方加上 Google Pay 按鈕圖片,確保使用者可享有一致的體驗。按一下 [下載素材資源] 即能以 EPS 或 SVG 檔案格式下載 Google Pay 按鈕,此按鈕提供多種語言版本:

下載素材資源 - EPS 下載素材資源 - SVG

合作夥伴平台資料的位置

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