本節旨在協助您建立圖片和其他使用者介面元素，並讓這些元素良好呈現於 Google Pay 應用程式中。
標誌
Google Pay 會套用遮罩，讓您的標誌在顯示時變成圓形。
標誌圖片規範
以下列出有關標誌圖片的使用者介面建議：
| 規範 | 範例 |
|---|---|
| 建議使用的檔案類型：PNG | |
| 最小尺寸：660px x 660px | |
| 圖片長寬比：1:1。圖檔長寬比：1:1。 | |
| 實際像素大小會因裝置大小而有所調整。 | |
| 標誌會套用遮罩，以符合圓形設計。請確保標誌不會超出安全區域。請勿預先為圖片套用遮罩，標誌需放在含有滿版背景顏色的正方形中。標誌周邊應保有 15% 的留白，以免套用遮罩時被切掉。 |  |
卡片背景顏色
您可以使用 hexBackgroundColor 欄位設定背景顏色。如未設定任何值，演算法會分析標誌來找出主要顏色，並使用該顏色做為卡片的背景顏色。
主頁橫幅
class.heroImage 欄位會顯示與卡片完整寬度等寬的橫幅。
主頁橫幅規範
以下列出有關主頁橫幅的使用者介面建議：
| 規範 | 範例 |
|---|---|
| 建議使用的檔案類型：PNG | |
| 建議大小為 1032x336px。請使用寬的矩形圖片，且背景為彩色，以獲得最佳效果。 | |
| 長寬比：3:1 或更寬。 | |
| 顯示大小是卡片的完整寬度，高度則會按比例調整。 |  |
完整寬度圖片
類別或物件的 *.imageModulesData.mainImage 欄位在展開的會員或優惠內容中，會以完整寬度圖片的形式顯示。
完整寬度圖片規範
以下列出有關完整寬度圖片的使用者介面建議：
| 規範 | 範例 |
|---|---|
| 建議使用的檔案類型：PNG | |
| 最小尺寸：寬度 1860px，高度不定。請使用寬的矩形圖片，且背景為彩色，以獲得最佳效果。 | |
| 長寬比不定。 | |
| 顯示時會佔滿範本 (白色背景的「卡片」) 的完整寬度，高度則會按比例調整。 | |
| 請使用標誌圖片採用的色彩配置。 |
條碼圖片
針對特定類別，您可以在條碼上方和下方顯示圖片。
在條碼上方顯示的圖片
以下列出條碼上方圖片的相關使用者介面建議：
| 規範 | 範例 |
|---|---|
| 建議使用的檔案類型：PNG | |
| 採用最大長寬比時的高度上限為 20dp。如有兩張圖片，則建議大小的高度為 80px，寬度為 80px 至 780px。這樣一來，兩張圖片就能並列顯示。 | 如果兩張圖片分別為正方形和長方形，則圖片大小應為 80px x 80px 和 780px x 80px。 |
| 長寬比不限。如要達到單一圖片的高度與寬度上限 20 dp，請使用 20:1 長寬比。 | 如果您只想在條碼上方顯示一張圖片，請使用完整寬度 (不含邊框間距)。圖片大小應為 1600 px x 80 px。 |
| 單一圖片的顯示大小上限為高度 20 dp，寬度 400 dp。 |
在條碼下方顯示的圖片
以下列出條碼下方圖片的相關使用者介面建議：
| 規範 | 範例 |
|---|---|
| 建議使用的檔案類型：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，一個是說明中心電話號碼的 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 標記的 height 和 size 欄位調整 [儲存至 Google Pay] 按鈕的高度和寬度。如果您指定 textsize=large，文字和按鈕大小會大幅增加，很適合在行動裝置上或有特殊 UI 要求時使用。
請使用 theme 設定按鈕的顏色。下表說明這些設定對於所產生的 [儲存至 Google Pay] 按鈕有何影響。
| 設定 | 結果 |
|---|---|
theme/dark |
|
theme/light |
|
刊登位置
為確保使用者可儲存和兌換您建立的票證，以及與這些票證進行互動，建議您將儲存至 Google Pay (S2GP) 按鈕或連結放在所有相關的流程中。一般來說，這個按鈕應放在用途類似的動作按鈕旁邊，例如在 [列印優惠券] 按鈕旁。
以下針對如何在流程中設置 [儲存至 Google Pay] 按鈕提供建議，這些做法對部分合作夥伴而言很有效。
會員卡
使用者可在您的 Android 應用程式或網站中查看您的會員編號或會員卡，建議您在這個流程中設置 [儲存至 Google Pay] 按鈕。某些合作夥伴是在使用者登入或登出應用程式後向使用者顯示按鈕，而且成效不錯。
儲值卡
建議您將 [儲存至 Google Pay] 按鈕設置在使用者購買儲值卡後顯示的確認畫面中。您也可以將按鈕置於發送給儲值卡收受者的電子郵件、簡訊或確認畫面中。
優惠
在向使用者提供優惠內容的網站或應用程式，或優惠宣傳電子郵件或簡訊中 (使用我們的儲存連結)，您都可設置 [儲存至 Google Pay] 按鈕。
票券
使用者在您網站或應用程式中完成票券購買流程後，會看到一個畫面或收到確認電子郵件或簡訊，您可以在這些地方設置這個按鈕。建議您將 [儲存至 Google Pay] 按鈕設置在您應用程式或網站中供使用者存取票券的地方。
登機證
您可以將按鈕放在電腦版網站及行動網站的報到流程結尾，或置於行動應用程式的報到流程結尾。按鈕也可放置於使用者在網站或行動應用程式中查看登機證的畫面上，或是報到後發送的確認電子郵件或簡訊中。
下載
如要讓使用者透過連結下載會員卡、儲值卡或優惠，請在深層連結前方加上 Google Pay 按鈕圖片，確保使用者享有一致的體驗。按一下 [下載素材資源] 就能下載 Google Pay 按鈕的 EPS 或 SVG 檔案，此按鈕提供多種語言版本：
下載素材資源 - EPS 下載素材資源 - SVG合作夥伴平台資料的位置
為確保使用者可前往與票證相關的多功能應用程式或網站，請務必在票證的類別或物件 linksModuleData.* 屬性中，加入應用程式的深層連結或網站，讓使用者透過 Google Pay 顯示的票證前往您的平台。如要瞭解這項資料的呈現方式，請參閱票證類別的「設計」部分。