如果您要为俄罗斯境内的用户开发应用,请使用“保存到手机”按钮,因为 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 Wallet”。
| 国家/地区 | 名称 |
|---|---|
| 白俄罗斯 | Google 钱包 |
| 巴西 | Carteira do Google |
| 智利 | Billetera de Google |
| 捷克 | Peněženka Google |
| 希腊 | Πορτοφόλι Google |
| 香港 | Google 錢包 |
| 立陶宛 | Google 钱包 |
| 波兰 | 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 钱包按钮:用户在应用或网站中访问其票证的位置。
使用文本形式的 Google 钱包产品名称
您可以使用文本为用户显示已保存到其设备中的活动门票。
以大写形式显示字母“G”和“W”
始终采用大写的“G”和“W”后跟小写字母的形式来表示 Google 钱包。不要将整个名称全部大写(“Google 钱包”),除非这种形式与您的界面中的排版样式相匹配。
不要缩写 Google 钱包
请始终完整拼写“Google”和“Wallet”字样。
匹配界面的样式
设置“Google 钱包”的字体和排版样式时,应与界面中的其余文本保持一致。不要模仿 Google 的排版样式。
始终使用本地化版本的“Google 钱包”
在提供的已本地化文案中,始终以“Google 钱包”显示。
设计
使用 g:savetoandroidpay HTML 标记的 height 和 size 字段可修改添加到 Google 钱包按钮的高度和宽度。使用 textsize=large 规范可显著增加移动实现或具有特殊界面要求的用例的文本和按钮大小。
使用 theme 设置按钮的颜色。下表显示了这些设置对添加到 Google 钱包按钮的影响。
卡券创建指南
为确保您的卡券外观精美且功能正常,请遵循以下有关字符数限制、通知、背景颜色和主打图片的准则。
卡片背景颜色
您可以使用 hexBackgroundColor 字段设置背景颜色。如果您未设置该值,算法会分析徽标,找到主色,并将其用作背景颜色。
避免使用高饱和度的“鲜艳”区域(例如,霓虹绿 #00FF00 或电光青 #00FFFF)。这些颜色会造成严重的眼睛疲劳,并导致文本“溢出”或消失在背景中。请改用推荐的颜色。
推荐颜色
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
焦点图片
class.heroImage 字段会以全宽图片的形式显示在卡券的数据字段下方。
如果您还没有图片,请考虑添加一张。如果您有图片,请务必遵循以下规范。如果您未选择图片,我们将显示卡券类别的后备图片。
以下是针对主打图片的界面建议:
| 准则 | 说明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 首选文件类型 | PNG。如果您希望卡券的背景颜色能够透出来,请使用透明 PNG。 | ||||||||
| 推荐尺寸 | 1032x812 像素 | ||||||||
| 宽高比 | 1032:812(约 5:4) | ||||||||
| 注意事项 |
|
内容
标题、副标题、字段标签和字段数据:为了提高用户的理解能力,请尽可能缩短标题和其他字段。以下字符数限制适用于英语,但这些内容会被翻译成其他语言,从而导致不同设备和地区的用户体验有所不同。如果不确定,请在传达关键细节的同时简化内容。
| 字段 | 限制 |
|---|---|
| 标题标签 | < 47 个字符 |
| 字幕标签 | < 88 个字符 |
| 字段/标题标签(例如日期、说明、舱位、乘客姓名) | < 20 个字符 |
| 字段数据标签(例如:2026 年 10 月 19 日,超级经济舱) | < 15 个字符 |
为确保清晰易读,请将数据限制为每行两个字段,并尽可能限制为最多 3 行。
通知
| 字段 | 限制 |
|---|---|
| 标题 | < 29 个字符 |
| 已收起正文 | < 40 个字符 |
| 展开后的正文 | < 80 个字符 |
建议遵守字符数限制,以防止在设备较小或字体大小增加的用户界面中出现截断。如需了解详情,请参阅通知 | 移动 | Android 开发者。
徽标
徽标图片指南
Google 钱包会将您的徽标遮盖成圆形。
以下是针对徽标图片的界面建议:| 准则 | 说明 |
|---|---|
| 首选文件类型 | PNG |
| 最小尺寸 | 660 x 660 像素 |
| 图片宽高比 | 1:1 |
| 封面图片宽高比 | 1:1 |
| 实际像素尺寸 | 根据设备尺寸缩放 |
| 徽标圆形遮罩 |
您的徽标会被遮盖,以适应圆形设计。确保徽标位于安全区域内。请勿预先遮盖徽标。将徽标置于方形中,并采用全宽背景颜色。 徽标需要有 15% 的外边距,这样在遮盖时才不会被剪裁。
|
Google 钱包会将您的徽标遮盖成圆形。
宽版徽标图片指南
活动门票、登机牌、二维码交通通票、会员卡、优惠、礼品卡、常规卡券和常规私人凭证支持宽徽标图片。以下是针对宽幅徽标图片的界面建议:
| 准则 | 说明 |
|---|---|
| 文件类型 | 透明 PNG |
| 推荐尺寸 | 1280 x 400 像素 |
| 最小尺寸 |
高度为 400 像素,宽度按比例缩放(如需更多指导,请参阅“宽高比”部分) 使用宽幅矩形图片。 |
| 宽高比 |
16:5
|
| 颜色 |
对于深色背景的卡券,请使用对比度高的浅色(例如白色)。 对于浅色背景的卡券,请使用对比度高的深色(例如黑色)。
|
其他图片
类或对象中的 *.imageModulesData.mainImage 字段在卡券中显示为全宽图片,位于主打图片下方。仅在您的卡券需要额外图片以便用户更好地理解时使用。
其他图片指南
以下是针对附加图片的用户界面建议列表:
| 准则 | 说明 |
|---|---|
| 首选文件类型 | PNG |
| 最小尺寸 |
宽度为 1860 px,高度可变。 使用宽幅矩形图片。 为获得最佳效果,请使用带有彩色背景的图片。 |
| 显示大小 |
模板的全宽和等比例高度。
|
条形码图片
某些行业允许在条形码上方和下方添加图片。
条形码上方的图片
以下是针对条形码上方图片的界面建议:
| 指南 | 说明 |
|---|---|
| 首选文件类型 | 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
|
在类或创建的对象中最多使用两个
|
linksModuleData
|
在您的类或您创建的对象中,总共最多可以使用四个
您的类中可能有 2 个 |
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'
|
|
标题、标签和名称
以词首字母大写形式编写标题、标签和名称,使每个单词都以大写字母开头。
内容政策
卡券中每个字段的内容都必须遵守 Google Payments 内容政策。您在课程中引用的网站内容也必须遵守这些政策。
合作伙伴平台数据放置
为确保用户可以访问您功能丰富的应用或网站,请务必将应用深层链接或网站纳入卡券的类或对象 linksModuleData.* 属性中。这样,用户就可以从 Google 钱包中显示的卡券前往您的平台。如要查看其呈现方式,请前往卡券类别的设计部分。