品牌推广指南

如果您正在为俄罗斯和日本的用户开发应用，请使用“保存到手机”按钮，因为 Google 电子钱包尚未在这些国家/地区推出。请参阅相关资源和指南。如果您正在为俄罗斯和日本境外的用户开发应用，请通过下载以下资源更新添加到 Google 钱包按钮。

此文档的这一部分内容旨在帮助您创建图片和其他界面元素，使其在 Google 钱包应用中呈现最佳效果。

“添加到 Google 钱包”按钮

当您指导用户将您的应用或网站中的卡券或卡保存到电子钱包时，会使用添加到 Google 钱包按钮。添加到 Google 钱包按钮必须调用其中一个 Google 钱包 API 流程。这些流程会显示 Google 钱包应用，用户可以按照其中的说明将卡券保存到 Android 设备和 Google 帐号中。此按钮可用于应用、网站或电子邮件。

素材资源

添加到 Google 钱包按钮支持 Android XML、SVG 和 PNG 格式。

下载资源 - Android XML 下载资源 - SVG 下载资源 - PNG

您的网站、应用或电子邮件中显示的所有添加到 Google 钱包按钮都必须遵守本页列出的品牌推广指南。这些准则的示例包括但不限于：

• 相对于页面上其他类似按钮或元素的尺寸
• 不得更改按钮的形状和颜色
• 留白

本地化按钮

提供 Google 钱包的所有市场均提供本地化的 Google 钱包按钮。如果您正在面向这些市场的用户开发应用，请始终使用上文链接的按钮。请勿创建您自己的添加到 Google 钱包按钮版本。如果相应市场未提供该按钮的本地化版本，请使用英文版的按钮。

<br>

本地化名称

为清楚起见，Google 钱包产品名称已在部分市场中本地化。如果您要面向这些国家/地区的用户开发应用，请始终为网站、电子邮件和打印服务使用以下本地化名称。请勿自行创建“Google 钱包”的本地化版本。如果以下列表中未列出您的市场，请使用英文“Google 电子钱包”。

国家/地区	名称
白俄罗斯	Google Коыелек
巴西	Carteira do Google
智利	Billetera de Google
捷克	彭杰恩卡 Google
希腊	Google
香港	Google 錢包
立陶宛	Google Piniginadmanager
波兰	Portfel Google
葡萄牙	Carteira da Google
罗马尼亚	Portofel Google
斯洛伐克	佩恩采卡 Google
台湾	Google 錢包
土耳其	Google 库兹丹
阿联酋	محفدة Google
乌克兰	Google Маманець
美国（西班牙语） *如果您的界面是西班牙语，请在美国使用此名称	Billetera de Google

大小

调整 Add to Google Wallet 按钮的高度和宽度以适合您的布局。如果页面上还有其他按钮，添加到 Google 钱包按钮的大小必须相等或更大。 请勿将添加到 Google 钱包按钮的尺寸设置为小于其他按钮。

要有风格

添加到 Google 钱包按钮有两种变体：主要和精简。Add to Google Wallet 按钮只有黑色。提供本地化版本的按钮。请勿以自行本地化的文字创建按钮。

主实例	Condensed
在白色和浅色背景上使用主按钮。	如果没有足够的空间来存储主图片或全宽图片，请使用精简按钮。

留白

在添加到 Google 钱包按钮两侧始终留出 8 dp 最小留白空间。确保留白空间永远不会被图形或文本破坏。

最小高度

所有添加到 Google 钱包按钮的最小高度均为 48 dp。

正确做法和错误做法

正确做法	禁忌行为
正确做法：仅使用 Google 提供的添加到 Google 钱包按钮。	错误做法：以任何方式自行创建添加到 Google 钱包按钮或更改按钮内的字体、颜色、按钮半径或填充内容。
正确做法：在整个站点中使用相同的按钮样式。	错误做法：将添加到 Google 钱包按钮的尺寸设置为小于其他按钮。
正确做法：确保添加到 Google 钱包按钮的尺寸始终大于或等于其他按钮。	错误做法：更改按钮颜色。
正确做法：调整添加到 Google 钱包按钮的大小时应保持按钮的比例不变。	错误做法：自由缩放按钮。
正确做法：使用提供的本地化按钮版本。	错误做法：创建您自己的本地化按钮。

按钮放置的最佳做法

在确认应用屏幕、网页或电子邮件上显示添加到 Google 钱包按钮。请参考以下最佳做法来指导界面设计。

会员卡、礼品卡、优惠

在确认屏幕上显示添加到 Google 钱包按钮。 您也可以在自己的网站或应用中显示该按钮，或将其包含在相关电子邮件中。

   

在文本中使用 Google 钱包产品名称

您可以使用文本向用户表明，他们的优惠会保存到其设备中。

将字母“G”和“W”大写

在引用 Google 钱包时，请务必使用大写的“G”和大写的“W”，后跟小写字母。不要将整个名称的首字母“Google 钱包”大写，除非是为了匹配您界面中的排版样式。

不要缩写 Google 钱包

请始终写出“Google”和“Wallet”字样。

匹配界面的样式

将“Google 钱包”的字体和排版样式设置为与界面中其余文本相同。不要模仿 Google 的排版样式。

始终使用“Google 钱包”的本地化版本

始终在提供的本地化副本中写入“Google 钱包”。

设计

使用 g:savetoandroidpay HTML 标记的 height 和 size 字段修改添加到 Google 钱包按钮的高度和宽度。使用 textsize=large 规范，针对具有特殊界面要求的移动实现或用例大幅增大文本和按钮的大小。

使用 theme 设置按钮的颜色。下表显示了这些设置对添加到 Google 钱包按钮有何影响。

注意：text 属性已弃用。无论选择哪种类别，该按钮都会呈现相同的效果。

徽标

Google 钱包将徽标遮罩成圆形。

徽标图片指南

以下是在用户界面中使用徽标图片的建议列表：

指南	说明
首选文件类型	PNG
最小尺寸	660 x 660 像素
图片宽高比	1:1
艺术作品宽高比	1:1
实际像素大小	缩放至设备大小
徽标圆形蒙版	您的徽标经过遮罩处理，适合圆形设计。确保您的徽标在安全区域以内。不要预先遮盖徽标。将徽标放置在背景颜色设置为全宽的正方形中。 徽标需要留出 15% 的边距，以免在进行遮罩处理时被截断。

卡片背景颜色

您可以使用字段 hexBackgroundColor 设置背景颜色。如果您未设置值，算法会分析徽标，找到主色并将其用作背景颜色。

焦点图片

class.heroImage 字段在卡正文中显示为全宽横幅。

主打图片指南

以下是在用户界面中使用主打图片的建议列表：

指南	说明
首选文件类型	PNG
推荐尺寸	1032x336 像素 使用宽幅矩形图片。 为获得最佳效果，请使用彩色背景图片。
宽高比	3:1 或更大尺寸
显示大小	卡片的完整宽度和比例高度。

全宽图片

类或对象中的 *.imageModulesData.mainImage 字段在卡券中显示为全宽图片。

全宽图片指南

以下是在用户界面中使用全宽图片的建议列表：

指南	说明
首选文件类型	PNG
最小尺寸	1860 像素宽，可变高度。 使用宽幅矩形图片。 为获得最佳效果，请使用彩色背景图片。
宽高比	变量
显示屏尺寸	模板的全宽和比例高度。
使用与徽标相同的配色方案。

条形码图片

某些行业允许在条形码上方和下方显示图片。

在条形码上方显示图片

下面列出了在界面中的条形码上方显示图片的一些建议：

Guideline	说明
首选文件类型	PNG
最大高度	20 dp（最大宽高比） 如果存在两张图片，建议的尺寸为 80 px 高 x 80-780 px 宽。这样，它们就能并排显示。 如果一张图片为正方形，另一张图片为长方形，则图片尺寸应分别为 80x80 像素和 780x80 像素。
宽高比	不受限制。如果单张图片的最大高度和宽度为 20 dp，请使用 20:1 的宽高比。 如果您只需在条形码上方显示一张图片，请使用全宽（不包括内边距）。图片大小必须为 1600x80 像素。
最大显示尺寸（单张图片）	20 dp 高和 400 dp 宽

条形码下方的图片

下面列出了在界面中的条形码下方显示图片的一些建议：

Guideline	说明
首选文件类型	PNG
最大高度	20 dp（最大宽高比） 建议的尺寸为 80 px 高 x 80-1600 px 宽。 如果图片是正方形，建议的尺寸为 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。以下是在用户界面中使用链接模块的建议列表：

Guideline	设置示例	示例图片
为网站或 Google 地图中的位置分配 URI 时，请使用 http: 前缀。此前缀让消费者可以通过点击该链接，转到相应网站或查看 Google 地图中的营业地点。 此前缀还会在卡片说明的前面生成链接或地图的图标。	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
请使用 tel: 前缀来定义电话号码。此前缀让消费者可以通过点击该链接来拨打该号码。此前缀还会在卡上的文本说明前面创建一个电话图标。	'uri': 'tel:[phone]'
请使用 mailto: 前缀来定义电子邮件地址。 此前缀让消费者可以通过点击该链接，向该地址发送电子邮件。此前缀还会在卡片上的文本说明前面创建电子邮件图标。	'uri': 'mailto:[e-mail]'

标题、标签和名称

输入标题、标签和名称，确保每个单词都以大写字母开头。

内容政策

卡券中每个字段的内容都必须遵守 Google Payments 内容政策。您在类中引用的网站内容也必须遵守这些政策。

合作伙伴平台数据展示位置

为确保用户可以访问您功能丰富的卡券相关应用或网站，请务必将您的应用深层链接或网站整合到卡券的类或对象 linksModuleData.* 属性中。这样，用户就可以从 Google 钱包中显示的卡券导航到您的平台。如需查看其呈现方式，请转到卡券类别的设计部分。

注意：如果用户仍需要安装您的应用，请确保深层链接会引导他们前往 Play 商店安装。最好在安装和登录后将用户导向至相关卡券详情的深层链接。