如果您為俄羅斯使用者開發應用程式,請使用「儲存至手機」按鈕,因為 Google 錢包尚未在這些國家/地區推出。請參閱 相關素材資源和規範。如果您為俄羅斯以外地區的使用者開發應用程式,請下載下列素材資源,更新「新增至 Google 錢包」按鈕。
本節旨在協助您建立圖片和其他使用者介面元素,讓這些元素可在 Google 錢包應用程式中良好地呈現。
素材資源
「新增至 Google 錢包」按鈕
每當您引導使用者將應用程式或網站中的票證或卡片儲存至錢包時,請使用「新增至 Google 錢包」按鈕。「新增至 Google 錢包」按鈕必須呼叫一個 Google Wallet 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 Кошелек |
| 巴西 | 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 錢包」按鈕的高度和寬度。如要在行動裝置上或有特殊 UI 要求時使用,請使用 textsize=large 規格大幅增加文字和按鈕大小。
請使用 theme 設定按鈕的顏色。下表說明這些設定對「新增至 Google 錢包」按鈕的影響。
標誌
標誌圖片規範
Google 錢包會套用遮罩,讓您的標誌在顯示時變成圓形。
以下列出有關標誌圖片的使用者介面建議:| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最小尺寸 | 660 x 660 像素 |
| 圖片顯示比例 | 1:1 |
| 圖檔顯示比例 | 1:1 |
| 實際像素大小 | 根據裝置大小調整畫面 |
| 標誌圓形遮罩 |
標誌會套用遮罩,以符合圓形設計。請確保標誌不會超出安全區域。請勿預先為標誌套用遮罩,標誌需放在含有滿版背景顏色的正方形中。標誌周邊應有 15% 的留白,以免套用遮罩時被切掉。
|
Google 錢包會套用遮罩,讓您的標誌在顯示時變成圓形。
寬標誌圖片規範
活動票券、登機證、QR code 大眾運輸票證、會員卡、優惠、禮物卡、一般票證和一般私人票證都支援寬版標誌圖片。以下列出有關寬版標誌圖片的使用者介面建議:
| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 |
PNG 為獲得最佳效果,請使用有背景顏色的圖片 (建議使用與票證背景顏色相同的顏色) |
| 建議大小 | 1280 x 400 像素 |
| 最小尺寸 | 高度為 400 像素,寬度則依比例調整 (詳情請參閱「建議長寬比」一節)
請使用寬的長方形圖片。 |
| 建議長寬比 |
如果圖片未設為建議的顯示比例,系統會調整圖片大小,以符合所提供標題空間的顯示比例。下圖詳細說明圖片素材資源會如何根據顯示比例調整大小。
|
卡片背景顏色
您可以使用 hexBackgroundColor 欄位設定背景顏色。如未設定值,演算法會分析標誌,找出主要顏色並做為背景顏色。
主角圖片
class.heroImage 欄位會顯示與卡片完整寬度等寬的橫幅。
主頁橫幅規範
以下列出有關主頁橫幅的使用者介面建議:
| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 建議大小 |
1032x336 px 請使用寬的長方形圖片。 且背景為彩色,以獲得最佳效果。 |
| 顯示比例 | 3:1 或更寬 |
| 顯示大小 |
卡片的完整寬度和按比例調整的高度。
|
完整寬度圖片
類別或物件的 *.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 錢包中顯示的票證前往你的平台。如要瞭解這項資料的顯示方式,請參閱「票證類別」的「設計」部分。