如果您為俄羅斯使用者開發應用程式，請使用「儲存至手機」按鈕，因為 Google 錢包尚未在這些國家/地區推出。請參閱 相關素材資源和規範。如果您為俄羅斯以外地區的使用者開發應用程式，請下載下列資產，更新「新增至 Google 錢包」按鈕。
在此系列說明文件中，本部分旨在協助您建立圖片和其他使用者介面元素，讓這些元素可在 Google 錢包應用程式中良好地呈現。
素材資源
「新增至 Google 錢包」按鈕
每當您引導使用者將應用程式或網站中的票證或卡片儲存至錢包時，請使用「新增至 Google 錢包」按鈕。「新增至 Google 錢包」按鈕必須呼叫一個 Google 錢包 API 流程。這些流程會顯示 Google 錢包應用程式，使用者可以按照指示將票證儲存到 Android 裝置和 Google 帳戶。您可以在應用程式、網站或電子郵件中使用這個按鈕。
「新增至 Google 錢包」按鈕提供 Android XML、SVG 和 PNG 格式。
下載素材資源 - Android XML 下載素材資源 - SVG 下載素材資源 - PNG「在 Google 錢包中查看」按鈕
「在 Google 錢包中查看」按鈕可將使用者深層連結至錢包，查看先前儲存的票證或卡片。您可以在應用程式、網站或電子郵件中使用這個按鈕。
「在 Google 錢包中查看」按鈕提供 SVG 和 PNG 格式。
下載素材資源 - SVG 下載素材資源 - PNG網站、應用程式或電子郵件通訊內容中的所有按鈕都必須符合本頁的品牌規範，這類規範包括但不限於：
- 依據其他類似的按鈕或頁面元素設定按鈕尺寸
- 請勿變更按鈕的形狀和顏色
- 周圍留空
本地化按鈕
如果市場支援 Google 錢包，系統會提供本地化 Google 錢包按鈕。如果是為這些市場的使用者開發應用程式，請務必使用上方連結的按鈕。請勿自行建立按鈕版本。 如果您的市場沒有按鈕的當地語言版本，請使用英文版按鈕。
阿爾巴尼亞文、阿拉伯文、亞美尼亞文、亞塞拜然文、波士尼亞文、保加利亞文、加泰隆尼亞文、中文 (香港)、中文 (繁體)、克羅埃西亞文、捷克文、丹麥文、荷蘭文、英文 (印度、新加坡、南非、澳洲、加拿大、英國、美國)、愛沙尼亞文、菲律賓文、芬蘭文、法文 (加拿大)、法文 (法國)、喬治亞文、德文、希臘文、希伯來文、匈牙利文、冰島文、印尼文、義大利文、日文、哈薩克文、吉爾吉斯文、拉脫維亞文、立陶宛文、馬其頓文、馬來文、挪威文、波蘭文、葡萄牙文 (巴西)、葡萄牙文 (葡萄牙)、羅馬尼亞文、俄文 (白俄羅斯)、塞爾維亞文、斯洛伐克文、斯洛維尼亞文、西班牙文 (拉丁美洲)、西班牙文 (西班牙)、瑞典文、泰文、土耳其文、烏克蘭文、烏茲別克文和越南文。
本地化名稱
為了方便使用者識別，Google 錢包產品名稱在特定市場中會經過本地化。如果您為這些國家/地區的使用者開發應用程式，請務必使用下方的當地化名稱，用於網頁、電子郵件和列印內容。請勿自行建立「Google 錢包」的本地化版本。如果你的市場未列於下方，請使用英文的「Google Wallet」。
| 國家/地區 | 名稱 |
|---|---|
| 白俄羅斯 | Google Кошелек |
| 巴西 | Carteira do Google |
| 智利 | Billetera de Google |
| 捷克 | Peněženka Google |
| 希臘 | Πορτοφόλι Google |
| 香港 | Google 錢包 |
| 立陶宛 | Google Piniginė |
| 波蘭 | Portfel Google |
| 葡萄牙 | Carteira da Google |
| 羅馬尼亞 | Portofel Google |
| 斯洛伐克 | Peňaženka Google |
| 臺灣 | Google 錢包 |
| 土耳其 | Google Cüzdan |
| 阿拉伯聯合大公國 | محفظة Google |
| 烏克蘭 | Google Гаманець |
|
美國 (西班牙文)
*如果使用者介面採用西班牙文，請在美國使用這個名稱 |
Billetera de Google |
大小
您可以根據版面配置調整「新增至 Google 錢包」按鈕的高度和寬度。如果頁面上還有其他按鈕，「加入 Google 錢包」按鈕的大小必須大於或等於這些按鈕。「新增至 Google 錢包」按鈕不得小於其他按鈕。
樣式
「新增至 Google 錢包」按鈕有兩種樣式：主要和精簡。「新增至 Google 錢包」按鈕只會顯示黑色。按鈕中的文字已有官方翻譯，請勿以自行翻譯的文字另外製作按鈕。
| 主要 | Condensed |
|---|---|
|
|
| 白色和淺色背景應使用主要按鈕。 | 如果空間不足以容納主要或全寬按鈕，請使用精簡按鈕。 |
周圍留空
「新增至 Google 錢包」按鈕各邊應一律至少留空 8 dp。周圍留空的區域當中不得出現圖像或文字。
高度下限
所有「新增至 Google 錢包」按鈕的高度下限均為 48 dp。
建議做法與應避免的做法
| 正確做法 | 錯誤做法 |
|---|---|
| 正確：一律使用 Google 提供的「新增至 Google 錢包」按鈕。 | 錯誤：自行製作「新增至 Google 錢包」按鈕，或是以任何方式變更按鈕內的文字字型、顏色、按鈕半徑或邊框間距。 |
| 正確：在網站中一律使用相同的按鈕樣式， | 錯誤：讓「新增至 Google 錢包」按鈕小於其他按鈕。 |
| 正確：確保「新增至 Google 錢包」按鈕的大小大於或等於其他按鈕的大小。 | 錯誤：變更按鈕顏色。 |
| 正確：調整「新增至 Google 錢包」按鈕的大小時保持按鈕比例相同。 | 錯誤：任意縮放按鈕的比例。 |
| 正確：使用我們提供的按鈕本地化版本。 | 錯誤：自行建立按鈕的本地化版本。 |
放置按鈕的最佳做法
在應用程式的確認畫面、網頁或電子郵件中，顯示「新增至 Google 錢包」按鈕。請參閱下列最佳做法，瞭解如何設計使用者介面。
會員卡、禮物卡、優惠
在確認畫面上顯示「新增至 Google 錢包」按鈕。 您也可以在網站或應用程式中顯示按鈕，或是在相關電子郵件中加入按鈕。
在文字中使用 Google 錢包產品名稱
您可以透過文字訊息，通知使用者系統已將優惠儲存到裝置中。
字首「G」與「W」大寫
提及 Google 錢包時，字首的「G」與「W」一律大寫，其他字母小寫。除非必須配合 UI 字體樣式，否則不要使用全部大寫的「Google 錢包」。
不得縮寫 Google 錢包
「Google」與「錢包」字樣應完整拼寫。
配合 UI 字體樣式
設定「Google 錢包」字型與字體樣式時，應使用與 UI 中其餘文字相同的字型與字體樣式。不要模仿 Google 的字體樣式。
一律使用「Google 錢包」的當地語言版本
請一律使用提供的本地化文案撰寫「Google 錢包」。
設計
請使用 g:savetoandroidpay HTML 標記的 height 和 size 欄位，修改「新增至 Google 錢包」按鈕的高度和寬度。如要大幅增加文字和按鈕大小，請使用 textsize=large 規格，適用於行動裝置或有特殊 UI 要求的情況。
請使用 theme 設定按鈕的顏色。下表說明這些設定對「新增至 Google 錢包」按鈕的影響。
票證建立指南
為確保票證外觀美觀且運作正常，請遵守下列字元限制、通知、背景顏色和主圖片的相關規範。
資訊卡背景顏色
您可以使用 hexBackgroundColor 欄位設定背景顏色。如未設定值，演算法會分析標誌，找出主要顏色並做為背景顏色。
避免使用高飽和度的「鮮豔」區域 (例如螢光綠 #00FF00 或電光青 #00FFFF)。這些顏色會造成眼睛極度疲勞，並導致文字「溢出」或消失在背景中。請改用建議的顏色。
建議顏色
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
主角圖片
class.heroImage 欄位會顯示與票證完整寬度等寬的圖片，位於票證的資料欄位下方。
如果還沒有圖片，建議新增一張。如有圖片，請務必遵守下列規格。如未選取圖片，系統會顯示票證類別的候補圖片。
以下列出有關主頁橫幅的使用者介面建議：
| 規範 | 說明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 偏好的檔案類型 | PNG。如要顯示票證的背景顏色，請使用透明 PNG。 | ||||||||
| 建議大小 | 1032x812 px | ||||||||
| 顯示比例 | 1032:812 (約 5:4) | ||||||||
| 建議做法與應避免的做法 |
|
內容
標題、副標題、欄位標籤和欄位資料：為提升使用者理解程度，請盡量縮短標題和其他欄位。以下字元數上限適用於英文，但這些內容會翻譯成其他語言，因此不同裝置和地區的使用者體驗可能有所差異。如有疑慮，請簡化內容，同時傳達重要詳細資料。
| 欄位 | 限制 |
|---|---|
| 標題標籤 | < 47 個半形字元 |
| 副標題標籤 | < 88 characters |
| 欄位/標題標籤 (例如日期、說明、艙等、乘客姓名) | < 20 個字元 |
| 欄位資料標籤 (例如：2026 年 10 月 19 日、經濟艙加價) | < 15 characters |
為確保可讀性，請盡可能將每列資料限制為兩個欄位，最多 3 列。
通知
| 欄位 | 限制 |
|---|---|
| 標題 | < 29 characters |
| 收合的本體 | < 40 個半形字元 |
| 展開式內文 | < 80 characters |
建議遵守字元限制，以免使用者在小型裝置上或使用較大字型時，看到遭截斷的文字。詳情請參閱「通知 | 行動裝置 | Android 開發人員」。
標誌
標誌圖片規範
Google 錢包會套用遮罩，讓您的標誌變成圓形。
以下列出有關標誌圖片的使用者介面建議：| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最小尺寸 | 660 x 660 像素 |
| 圖片顯示比例 | 1:1 |
| 圖檔長寬比 | 1:1 |
| 實際像素大小 | 根據裝置大小調整比例 |
| 標誌圓形遮罩 |
標誌會套用遮罩，以符合圓形設計。請確保標誌不會超出安全區域。請勿預先為圖片套用遮罩，標誌需放在含有滿版背景顏色的正方形中。標誌周邊應有 15% 的留白，以免套用遮罩時被切掉。 
|
Google 錢包會套用遮罩，讓您的標誌變成圓形。
寬標誌圖片規範
活動票券、登機證、QR code 大眾運輸票證、會員卡、優惠、禮物卡、一般票證和一般私人票證都支援寬版標誌圖片。以下列出有關寬版標誌圖片的使用者介面建議：
| 規範 | 說明 |
|---|---|
| 檔案類型 | 透明 PNG |
| 建議大小 | 1280 x 400 像素 |
| 最小尺寸 |
高度為 400 像素，寬度則依比例調整 (詳情請參閱「長寬比」一節) 請使用寬的長方形圖片， |
| 顯示比例 |
16:5 
|
| 顏色 |
如果票證背景為深色，請使用高對比的極淺色 (例如白色)。 如果票證的背景為淺色，請使用高對比的深色 (例如黑色)。 
|
其他圖片
類別或物件的 *.imageModulesData.mainImage 欄位在票證中會顯示為全寬圖片，位於主頁橫幅下方。只有在票證需要額外圖片，才能讓使用者更瞭解內容時，才使用這個欄位。
其他圖片規範
以下列出有關其他圖片的使用者介面建議：
| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最小尺寸 |
寬度 1860 像素，高度不定。 請使用寬的長方形圖片， 且背景為彩色，以獲得最佳效果。 |
| 顯示大小 |
範本的完整寬度，以及按比例調整的高度。 
|
條碼圖片
針對特定類別，您可以在條碼上方和下方顯示圖片。
在條碼上方顯示的圖片
以下列出條碼上方圖片的相關使用者介面建議：
| 基本原則 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最大高度 |
20 dp (採用最大長寬比時) 如有兩張圖片，建議尺寸的高度為 80px，寬度為 80px 至 780px。這樣一來，兩張圖片就能並列顯示。 如果兩張圖片分別為正方形和長方形，則圖片大小應為 80x80 px 和 780x80 px。 |
| 顯示比例 |
不受限制。如要達到單一圖片的高度上限 (20 dp) 與寬度上限，請使用 20:1 的長寬比。 如果只想在條碼上方顯示一張圖片，請使用完整寬度 (不含邊框間距)。圖片大小必須為 1600x80 像素。 |
| 顯示大小上限 (單一圖片) | 高度 20 dp，寬度 400 dp |
在條碼下方顯示的圖片
以下列出條碼下方圖片的相關使用者介面建議：
| 基本原則 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最大高度 |
20 dp (採用最大長寬比時) 建議大小：高度 80 像素，寬度 80 到 1600 像素。 如果是正方形，則為 80x80 px。 如果是長方形，則為 1600x80 px。 |
| 長寬比不限。如要達到高度上限 (20 dp) 與寬度上限，請使用 20:1 的長寬比。 | 如要以完整寬度 (不含邊框間距) 顯示圖片，圖片大小必須為 1600x80 px。 |
| 顯示大小上限為高度 20 dp，寬度 400 dp。 |
模組
模組代表範本特定部分的一組欄位。下表提供相關規範，讓您瞭解應在類別和物件中加入多少模組，以確保卡片可在 Google 錢包應用程式中正確顯示。
| 規範 | 說明 |
|---|---|
imageModulesData
|
在您的類別或建立的物件中只使用一個 imageModulesData。
|
infoModuleData
|
在您的類別或建立的物件中最多使用兩個
|
linksModuleData
|
在您的類別或建立的物件中最多使用四個
你可以在類別中使用兩個 |
textModulesData
|
在類別和建立的物件中最多使用兩個
您可以在定義方案詳細資料的類別中使用一個 |
infoModuleData
InfoModuleData 包含會員和可自訂的資訊，會在展開後顯示。使用這個模組儲存到期日、第二點數餘額或儲值餘額等資訊。
linksModuleData
連結模組包含網頁、電話號碼和電子郵件地址的 URI。以下列出有關連結模組的使用者介面建議：
| 基本原則 | 範例設定 | 範例圖片 |
|---|---|---|
為網站或 Google 地圖中的地點指派 URI 時，請在前方加上 http:。加上這個前置字串後，消費者只要輕觸連結就能前往網站，或在 Google 地圖中查看該地點。此外，加上這個前置字串後，卡片說明的前方還會出現連結或地圖的圖示。 |
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
定義電話號碼時，請在前方加上 tel:。加上這個前置字串後，消費者只要輕觸連結就能撥打該電話號碼，而且資訊卡文字說明的前方還會出現電話圖示。 |
'uri': 'tel:6505555555'
|
|
定義電子郵件地址時，請在前方加上 mailto:。
加上這個前置字串後，消費者只要輕觸連結就能傳送電子郵件至該地址，此外，資訊卡上的文字說明前方還會出現電子郵件圖示。 |
'uri': 'mailto:jonsmith@email.com'
|
|
標題、標籤和名稱
標題、標籤和名稱應採標題式詞首字母大寫做法，即每個字詞的第一個字母大寫。
內容政策
票證中每個欄位的內容都應符合 Payments 內容政策。類別中參照的網站，其內容也必須符合這些政策。
合作夥伴平台資料的位置
為確保使用者可前往與票證相關的多功能應用程式或網站，請務必在票證的類別或物件 linksModuleData.* 屬性中，加入應用程式的深層連結或網站，使用者可透過 Google 錢包中顯示的票證前往你的平台。如要瞭解這項資料的顯示方式，請參閱「票證類別」的「設計」部分。