品牌宣傳指南

如要為俄羅斯境內使用者開發應用程式,請使用「儲存至手機」按鈕,因為 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 錢包」本地化版本。如果下方未列出您的市場,請使用英文的「Google 錢包」。

國家/地區 名稱
白俄羅斯 Google Кошелек
巴西 Carteira do Google
智利 Billetera de Google
捷克 Google Pennizenka Google
希臘 Π🇦?🇺?🇸? 推出的事宜括號 Google
香港 Google
立陶宛 Google 佩吉尼
波蘭 Portfel Google
葡萄牙 Google 的 Carteira da Google
羅馬尼亞 Portofel Google
斯洛伐克 Google
臺灣 Google
土耳其 Google 庫茲丹
阿拉伯聯合大公國 م Roمظة Google
烏克蘭 Google ламанец 1 種
美國 (西班牙文)
*美國的使用者介面如果語言為西班牙文,請使用這個名稱
Billetera de Google

大小

您可以根據版面配置調整「新增至 Google 錢包」按鈕的高度和寬度。如果頁面上還有其他按鈕,「新增至 Google 錢包」按鈕的大小必須大於或等於該按鈕。請勿讓「新增至 Google 錢包」按鈕小於其他按鈕。

樣式

「新增至 Google 錢包」按鈕有兩種版本:主要按鈕和密集元件。「新增至 Google 錢包」按鈕僅為黑色。提供本地化版本的按鈕。請勿以自行翻譯的文字建立按鈕。

主要 Condensed
「新增至 Google 錢包」主要按鈕 簡化的「新增至 Google 錢包」按鈕
白色和淺色背景應使用主要按鈕。 如果主要或完整寬度空間不足,請使用精簡按鈕。

周圍留空

「新增至 Google 錢包」按鈕周圍一律應至少保留 8 dp 的空間。而且周圍留空不應出現圖像或文字。

「新增至 Google 錢包」按鈕的每一邊都必須保留 8 dp。

高度下限

所有「新增至 Google 錢包」按鈕的高度下限都必須為 48 dp

「新增至 Google 錢包」按鈕的高度不得低於 48 dp。

建議做法

正確做法 錯誤做法
正確:請一律使用 Google 提供的「新增至 Google 錢包」按鈕。 錯誤做法:自行建立「新增至 Google 錢包」按鈕,或是以任何方式調整按鈕內的字型、顏色、按鈕半徑或邊框間距。
正確:在網站中一律使用相同的按鈕樣式。 錯誤:讓「新增至 Google 錢包」按鈕小於其他按鈕。
正確:確認「新增至 Google 錢包」按鈕的尺寸大於或等於其他按鈕。 錯誤:修改按鈕顏色。
正確:調整「新增至 Google 錢包」按鈕的大小時,保持按鈕比例相同。 錯誤:任意縮放按鈕。
正確:使用提供的本地化按鈕版本。 錯誤做法:自行建立本地化的按鈕版本。

按鈕位置的最佳做法

在確認應用程式畫面、網頁或電子郵件中顯示「新增至 Google 錢包」按鈕。設計 UI 時,請參閱下列最佳做法。

一般票證

在確認應用程式畫面、網頁或電子郵件中顯示「新增至 Google 錢包」按鈕。建議您將「新增至 Google 錢包」按鈕放置於使用者在您的應用程式或網站中存取票證的位置。

在文字中使用 Google 錢包產品名稱

您可以使用文字,向使用者表明他們的一般票證儲存在自己的裝置上。

字母「G」和「W」大寫

指稱 Google 錢包時,「G」與「W」一律大寫。除非必須配合 UI 的字體樣式,否則不要使用全部大寫的「Google 錢包」。

請勿使用 Google 錢包

「Google」和「錢包」一詞一律完整,

配合 UI 的樣式

設定「Google 錢包」的字型與字體樣式時,應使用與 UI 中其他文字相同的字型與字體樣式。請勿模仿 Google 的字體樣式。

一律使用本地化的「Google 錢包」版本

在提供的本地化文案中,請一律標註「Google 錢包」。

設計

請使用 g:savetoandroidpay HTML 標記的 heightsize 欄位,修改「新增至 Google 錢包」按鈕的高度和寬度。使用 textsize=large 規格,即可針對行動裝置實作或有特殊 UI 要求的情況,大幅增加文字和按鈕大小。

請使用 theme 設定按鈕的顏色。下表說明這些設定如何影響「新增至 Google 錢包」按鈕。

主角圖片

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

主頁橫幅規範

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

規範 說明
偏好的檔案類型 PNG
建議尺寸

1032x336 像素

請使用寬的矩形圖片。

為求最佳效果,請使用彩色背景。

顯示比例 3:1 以上
顯示大小

資訊卡的完整寬度和比例高度。

顯示大小應使用 3 至 1 的長寬比,或更寬。

完整寬度圖片

類別或物件的 *.imageModulesData.mainImage 欄位會在票證中以完整寬度圖片顯示。

完整寬度圖片規範

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

規範 說明
偏好的檔案類型 PNG
最小尺寸

寬 1860 px,高度可變。

請使用寬的矩形圖片。

為求最佳效果,請使用有色背景的圖片。

顯示比例 變數
螢幕大小

範本的完整寬度和比例高度。

顯示大小應使用 3 至 1 的長寬比,或更寬。
請使用標誌的色彩配置。

條碼圖片

某些類別允許在條碼上方和下方顯示圖片。

條碼上方的圖片

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

規範 說明
偏好的檔案類型 PNG
高度上限

20 dp (採用最大顯示比例)

如有兩張圖片,建議大小為高度 80 像素,寬度為 80-780 像素。這樣一來,就能並排顯示兩者。

如果一張是正方形,另一個是矩形,則圖片必須為 80x80 px 和 780x80 px。

顯示比例

不受限制。如果大小達到單一圖片的高度與寬度上限 20dp,請使用 20:1 的顯示比例。

如果只想在條碼上方顯示一張圖片,請使用完整寬度 (不含邊框間距)。圖片必須是 1600x80 像素。

最大顯示大小 (單一圖片) 高 20 dp,寬度 400 dp

條碼下方的圖片

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

規範 說明
偏好的檔案類型 PNG
高度上限

20 dp (採用最大顯示比例)

建議大小為高度 80 像素,寬度為 80-1600 像素。

如果是正方形,則為 80x80 像素。

如果是矩形,則為 1600x80 像素。

顯示比例不受限制。如要達到高度與寬度上限 20dp,請使用 20:1 的長寬比。 如要顯示完整寬度圖片 (不含邊框間距),圖片必須為 1600x80 px。
顯示大小上限為高度 20 dp,寬度為 400 dp。  

單元

模組代表範本特定區段中的一組欄位。下表提供相關指引,說明您必須在類別和物件中加入多少模組,才能確保卡片能正確顯示在 Google 錢包應用程式中。

規範 說明
imageModulesData 在您的類別或建立的物件中只使用一個 imageModulesData
infoModuleData

在您的類別或您建立的物件中使用最多兩個 infoModuleData

infoModuleData 可定義使用者帳戶專屬資訊,例如「會員姓名」和「會員編號」。

linksModuleData

在您的類別或您建立的物件中共使用最多四個 linksModuleData URI。

您可以在類別中使用兩個 linksModuleData URI,一個是網站 URI,一個是說明中心電話號碼。物件中的兩個 linksModuleData URI 可定義使用者帳戶專屬 URI 和鄰近位置。

textModulesData

在類別和您建立的物件中使用最多兩個 textModulesData 欄位。

您可以在類別中使用一個 textModuleData URI 定義計畫詳細資料,另一個則是定義使用者帳戶專屬詳細資料的物件中的 textModulesData

infoModuleData

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

linksModuleData

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

規範 設定範例 範例圖片
將 URI 指派給網站或 Google 地圖中的位置時,請使用 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' 用來傳送電子郵件的連結指標。

標題、標籤和名稱

使用首字母大寫撰寫標題、標籤和名稱,讓每個字詞都以大寫字母開頭。

內容政策

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

合作夥伴平台資料放置位置

為確保使用者可前往與票證相關的多功能應用程式或網站,請務必在票證的類別或物件 linksModuleData.* 屬性中,加入應用程式深層連結或網站。這樣一來,使用者就能從 Google 錢包中顯示的票證前往您的平台。如要查看實際呈現方式,請前往「票證」類別的「設計」部分。