品牌宣傳指南

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

如果您正在俄羅斯和日本的使用者開發應用程式,請使用 [儲存至手機] 按鈕,因為 Google 電子錢包並未在這些國家/地區推出。請參閱相關資產和規範。如果您要開發俄羅斯和日本以外的使用者,請下載下列資產來更新「新增至 Google 錢包」按鈕。

本節旨在協助您建立圖片和其他使用者介面元素,並讓這些元素在 Google 錢包應用程式中呈現最佳效果。

[新增至 Google 錢包] 按鈕

當您引導使用者將應用程式或網站中的票證或卡片儲存至錢包時,系統會使用 [新增至 Google 錢包] 按鈕。「新增至 Google 錢包」按鈕必須呼叫其中一個 Google Wallet API 流程。上述流程會顯示 Google 錢包應用程式,使用者可以按照操作說明,將票證儲存至自己的 Android 裝置和 Google 帳戶。您可以在應用程式、網站或電子郵件中使用這個按鈕。

素材

「新增至 Google 錢包」按鈕有 Android XML、SVG 和 PNG 格式。

下載資產 - Android XML 下載資產 - SVG 下載資產 - PNG

網站、應用程式或通訊電子郵件中顯示的所有「新增至 Google 錢包」按鈕都必須符合本頁所述的品牌宣傳指南,這些規範包括但不限於:

  • 必須根據頁面上其他類似的按鈕或元素設定按鈕大小。
  • 按鈕的形狀和顏色不能修改
  • 周圍留空

本地化按鈕

凡是提供 Google 錢包服務的市場,都會提供本地化的 Google 錢包按鈕。如果您要為這些市場的使用者開發應用程式,請一律使用上方連結的按鈕。請勿自行建立「新增至 Google 錢包」按鈕版本。如果您的市場並未提供本地化版本按鈕,請使用英文版按鈕。

「儲存至 Google Pay」按鈕 、

本地化名稱

為了方便使用者識別,Google 錢包產品名稱在某些市場均已本地化。如果您要為這些國家/地區的使用者開發應用程式,請務必在網站、電子郵件和列印中使用下列本地化名稱。請勿建立本地化的「Google 錢包」版本。如果您的市場未列於下方,請使用英文的「Google 錢包」。

國家/地區 名稱
白俄羅斯 Google Кошелек
巴西 Carteira do Google
智利 Billetera de Google
捷克 Peněøenka Google
希臘 Πà一份ヶרλλ Google
香港 Google 技巧包
立陶宛 Google 拼音
波蘭 Google PortPortel
葡萄牙 Google 的 Carteira da Google
羅馬尼亞 Google 專屬攜碼轉移程序
斯洛伐克 Peňa 資安 enka Google
臺灣 Google 技巧包
土耳其 Google 庫茲丹
阿拉伯聯合大公國 محفكة Google
烏克蘭 Google \tаманець
美國 (西班牙文)
如果 UI 是西班牙文,請在美國使用這個名稱
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 錢包」按鈕。 Don't:建立自己的「新增至 Google 錢包」按鈕,或以任何方式變更按鈕內的字型、顏色、按鈕半徑或邊框間距。
正確:在網站中一律使用相同的按鈕樣式, Don't:讓「新增至 Google 錢包」按鈕小於其他按鈕。
正確:確保「新增至 Google 錢包」按鈕的大小大於或等於其他按鈕。 Don't:變更按鈕顏色。
正確:調整「新增至 Google 錢包」按鈕的大小時保持按鈕比例相同。 Don't:自由縮放按鈕。
正確:使用所提供按鈕的本地化版本。 Don't:自行建立按鈕的本地化版本。

放置按鈕的最佳做法

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

會員卡、禮物卡、優惠

在確認畫面上顯示 [新增至 Google 錢包] 按鈕。您也可以在網站或應用程式中顯示按鈕,或將按鈕納入相關電子郵件中。

禮物卡     咖啡會員卡

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

您可以透過文字訊息,通知使用者系統已將會員卡儲存至他們的裝置。

「G」和「W」字首大寫

「Google 錢包」只能加上大寫的「G」和「W」大寫英文字母,後面再接上小寫的英文字母「G」。除非必須配合 UI 字體樣式,否則不要使用完整的全名「Google 錢包」。

不要使用 Google 錢包縮寫

說出「Google」和「錢包」。

配合 UI 字體樣式

設定「Google 錢包」字型與字體樣式,設定與 UI 中的其餘文字相同。不要模仿 Google 的字體樣式。

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

請一律使用我們提供的本地化文案「Google 錢包」;

設計

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

請使用 theme 設定按鈕顏色。下表列出這些設定對「新增至 Google 錢包」按鈕的影響。

主角圖片

class.heroImage 欄位會在卡片內文中以全寬度橫幅顯示。

主頁橫幅規範

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

規範 說明
建議使用的檔案類型 PNG
建議大小

1032x336 像素

使用廣角矩形圖片。

為獲得最佳效果,請使用彩色背景的圖片。

長寬比 3:1 以上
顯示大小

資訊卡的全寬度和比例高度。

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

完整寬度圖片

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

完整寬度圖片規範

以下為完整寬度圖片的使用者介面建議清單:

規範 說明
建議使用的檔案類型 PNG
最小尺寸

寬度為 1860 像素,高度可變。

使用寬幅矩形圖片。

為獲得最佳效果,請使用彩色背景的圖片。

長寬比 變數
螢幕大小

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

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

條碼圖片

特定產業允許在條碼上方和下方上傳圖片。

在條碼上方顯示的圖片

下方是條碼上方圖片的使用者介面建議清單:

規範 說明
建議使用的檔案類型 PNG
高度上限

最大 20 dp (最大長寬比)

如有兩張圖片,建議尺寸為高度 80 像素,寬度為 80 至 780 像素。並排顯示。

如果一張正方形是正方形,另一張是矩形,則圖片大小必須是 80x80 像素和 780x80 像素。

顯示比例

不受限制。如要達到單一圖片的高度和寬度上限 (20 dp),請使用 20:1 的長寬比。

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

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

在條碼下方顯示的圖片

以下是條碼下方圖片的使用者介面建議清單:

規範 說明
建議使用的檔案類型 PNG
高度上限

最大 20 dp (最大長寬比)

建議大小為 80 像素高和 80 至 1600 像素寬度。

正方形圖片,尺寸為 80x80 像素。

如果是矩形,1600x80 像素。

長寬比不受限。如果高度和寬度上限為 20 dp,請使用 20:1 的長寬比。 如要採用完整寬度圖片 (不含邊框間距),圖片尺寸必須為 1600x80 像素。
顯示大小上限為高度 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' 傳送電子郵件連結的連結指標。

標題、標籤和名稱

在標題大小寫中撰寫標題、標籤和名稱,讓每個字詞皆以大寫字母開頭。

內容政策

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

合作夥伴平台資料的位置

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