品牌指南

此文档的这一部分内容旨在帮助您创建图片和其他界面元素，让其在 Google Pay 应用中能完美呈现。

主打图片

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

主打图片指南

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

指南 示例
首选文件类型：PNG
建议尺寸为 1032 x 336px。使用长方形宽幅图片。为获得最佳效果，请使用彩色背景图片。
宽高比为 3:1，或更宽。
显示尺寸为卡的全宽 x 按比例缩放的高度。

全宽图片

类或对象中的 *.imageModulesData.mainImage 字段在扩展后的会员卡或优惠中显示为全宽图片。

全宽图片指南

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

指南 示例
首选文件类型：PNG
最小尺寸为 1860px 宽 x 可变高度。使用长方形宽幅图片。为获得最佳效果，请使用彩色背景图片。
可变宽高比。
显示尺寸为模板（白色背景“卡”）的全宽 x 按比例缩放的高度。
使用与徽标图片相同的配色方案。

条形码图片

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

在条形码上方显示图片

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

指南 示例
首选文件类型：PNG  
最大高度为 20 dp（最大宽高比）。如果同时显示两张图片，建议的尺寸为 80 px 高 x 80 px–780 px 宽，以便这两张图片可以并排显示。 如果一张图片为正方形，另一张图片为长方形，则图片尺寸应分别为 80 px x 80 px 和 780 px x 80 px。
不限制宽高比。如果单张图片想要达到 20 dp 的最大高度和最大宽度，请使用 20:1 的宽高比。 如果您只需在条形码上方显示一张图片，请使用全宽（不包括内边距）。 图片尺寸应为 1600 px x 80 px。
单张图片的最大显示尺寸为 20 dp 高和 400 dp 宽。  

在条形码下方显示图片

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

指南 示例
首选文件类型：PNG  
最大高度为 20 dp（最大宽高比）。建议的尺寸为 80 px 高 x 80 px-1600 px 宽。 如果图片是正方形，建议的尺寸为 80 px x 80 px。如果图片是长方形，建议的尺寸为 1600 px x 80 px。
不限制宽高比。如需达到 20 dp 的最大高度和最大宽度，请使用 20:1 的宽高比。 如果您希望将图片显示为全宽（不包括内边距），图片尺寸应为 1600 px x 80 px。
最大显示尺寸为 20 dp 高 x 400 dp 宽。  

模块

模块是指模板某个特定部分中的一组字段。您应根据下表中的指南，在类和对象中使用相应的模块数量，以确保您的卡在 Google Pay 应用中正常显示。

指南 示例
在您创建的类或对象中仅使用一个 imageModulesData。
在您创建的类或对象中最多使用两个 infoModuleData。 infoModuleData 可以定义具体的用户帐号信息，例如“会员名称”和“会员资格 #”。
在您创建的类或对象中最多使用四个 linksModuleData URI。 类中可以包含两个 linksModuleData URI；一个指向您的网站的 URI，另一个指向帮助中心的电话号码。对象中可以包含两个 linksModuleData URI，用于定义具体用户帐号的 URI 和附近的位置。
在您创建的类和对象之间最多使用两个 textModulesData 字段。 类中可以包含一个用于定义活动详细信息的 textModulesData，对象中可以包含另一个用于定义具体用户帐号详细信息的 textModulesData。

infoModuleData

InfoModuleData 包含会员和可自定义的信息，并显示在扩展视图中。失效日期、第二积分余额或储值余额等信息应存储在信息模块中。

linksModuleData

链接模块包含指向网页、电话号码和电子邮件地址的 URI。以下是在用户界面中使用链接模块的建议列表：

指南 示例
请使用 http: 前缀来定义指向网站或 Google 地图中的位置的 URI。此前缀让消费者可以通过点击该链接，导航到该网站或查看 Google 地图中的位置。此前缀还会在卡说明的前面生成链接或地图的图标。 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/pay/passes/'
请使用 tel: 前缀来定义电话号码。此前缀让消费者可以通过点击该链接，拨打该电话号码。此前缀还会在卡说明的前面生成电话图标。 'uri': 'tel:6505555555'
请使用 mailto: 前缀来定义电子邮件地址。此前缀让消费者可以通过点击该链接，向该地址发送电子邮件。此前缀还会在卡说明的前面生成电子邮件图标。 'uri': 'mailto:jonsmith@email.com'

标题、标签和名称

标题、标签和名称中每个单词的第一个字母应遵循首字母大写原则（每个单词的首字母大写）。

内容政策

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

保存到 Google Pay 按钮

图形

使用 g:savetoandroidpay HTML 标记的 height 和 size 字段，可以修改保存到 Google Pay 按钮的高度和宽度。如果您指定 textsize=large，文字和按钮的大小会显著增大，非常适合移动设备或具有特殊界面要求的情况。

使用 theme 设置按钮的颜色。下表介绍了使用不同的设置将会产生怎样的保存到 Google Pay 按钮。

设置 结果
theme/dark
theme/light

展示位置

为确保用户可以保存、兑换和使用您开发的卡券，我们建议将保存到 Google Pay (S2GP) 按钮或链接放置在所有相关流程中。该按钮通常应放置在具有类似用途的操作按钮旁（如打印优惠券按钮）。

按照下列建议，将保存到 Google Pay 按钮集成到一些合作伙伴认为效果不错的流程中。

会员卡

您可以考虑将保存到 Google Pay 按钮放置在以下流程中：用户在您的 Android 应用或网站中查看会员卡号或卡的位置。一些合作伙伴发现，在用户登录或注册应用后向其显示此按钮的做法非常有效。

礼品卡

您可以考虑将保存到 Google Pay 按钮放置在用户在您的网站或应用中购买礼品卡后会出现的确认界面中，或是礼品卡收件人接收的电子邮件、短信或确认界面中。

优惠

您可以将保存到 Google Pay 按钮放置在用户获取优惠的网站或应用中，或是用于发布优惠的电子邮件或短信中（使用我们的安全链接）。

门票

该按钮可以放置在购买流程（用户在您的网站或应用中购买门票）结束之际，或放置在购买完成后的确认电子邮件或短信中。您可以考虑将保存到 Google Pay 按钮放置在用户在应用或网站中获取门票的同一位置。

登机牌

您可以将此按钮放置在桌面和移动网站或移动应用中的办登机手续流程的结束之际；也可以放置在用户在网站或移动应用中查看登机牌的界面上，或是登记手续办理后的确认电子邮件或短信中。

下载

当用户通过链接下载会员卡、礼品卡或优惠时，深层链接前面的 Google Pay 按钮图片可确保为用户提供始终如一的优质体验。点击下载资源，将多种语言提供的 Google Pay 按钮下载为 EPS 或 SVG 文件：

下载资源 - EPS 下载资源 - SVG

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

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