按钮指南
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
这些指南旨在帮助您在应用或网站中实现 Google Wallet API。
保存到 Google Pay 按钮必须调用其中一个 Google Pay API for Passses 流程。这些流程显示在一个屏幕上，用户可以在其中将登机牌、活动门票或公交票卡、会员卡、礼品卡和优惠保存到他们的 Android 设备。此按钮可用于商家应用、网站、电子邮件或短信。
资产
保存到 Google Pay 按钮以 EPS 和 SVG 文件的形式提供。
下载资源 - EPS
下载资源 - SVG
在您的网站、应用或电子邮件中显示的所有保存到 Google Pay 按钮都必须遵守我们在本页介绍的品牌推广指南。它们包括但不限于：
- 大小与页面上其他类似按钮或元素相关
- 与周围区域的背景颜色形成鲜明对比
- 留白
保存到 Google Pay 按钮支持以下语言：阿拉伯语、克罗地亚语、捷克语、丹麦语、荷兰语、英语、芬兰语、法语、德语、印度尼西亚语、意大利语、日语、韩语、挪威语（博克马尔）、波兰语、葡萄牙语、俄语、简体中文、斯洛伐克语、西班牙语、瑞典语、泰语、繁体中文和乌克兰语。
大小
调整保存到 Google Pay 按钮的高度和宽度以契合您的布局。如果页面上还有其他按钮，保存到 Google Pay 按钮的大小必须大于或等于这些按钮的大小。不要将保存到 Google Pay 按钮设置为小于其他按钮。
风格
保存到 Google Pay 按钮有三种版本：黑色、白色和带有黑色边框的白色。系统还提供包含本地化文本版本的按钮。
请勿以自行本地化的文字创建按钮。
 |
 |
 |
| 黑人 |
白人 |
带边框的白色 |
| 在白色或浅色背景上使用黑色按钮来形成对比。请勿在深色背景上使用黑色按钮。请改用白色按钮。 |
在深色或彩色背景上使用白色按钮。请勿在白色或浅色背景上使用白色按钮。请改用黑色按钮或带边框的白色按钮。 |
在白色或浅色背景上使用带有边框的白色按钮来替代黑色按钮。请勿在深色或彩色背景上使用此按钮；请改用标准白色按钮。 |
留白
在保存到 Google Pay 按钮四周始终留出至少 8 dp 的留白空间。确保留白空间永远不会被图形或文本破坏。
最小高度
所有保存到 Google Pay 按钮的最小高度必须为 36 dp。
正确做法和错误做法
| 正确做法 |
禁忌行为 |
| 正确做法：仅使用 Google 提供的保存到 Google Pay 按钮。 |
错误做法：不要以任何方式自行创建保存到 Google Pay 按钮或更改按钮内的字体、颜色、按钮半径或填充内容。 |
| 正确做法：在整个网站中使用相同的按钮样式。如果背景颜色发生变化，按钮颜色可能会调整。 |
错误做法：不要将保存到 Google Pay 按钮设置为小于其他按钮。 |
| 正确做法：确保保存到 Google Pay 按钮的大小始终大于或等于其他按钮。 |
错误做法：按钮颜色不要使用与背景类似的颜色。例如，不要在白色背景上使用白色按钮。 |
| 正确做法：确保选择与背景形成对比的按钮颜色。 |
错误做法：不要随意缩放按钮。 |
| 正确做法：调整保存到 Google Pay 按钮的大小时应保持相同的按钮比例。 |
|
要想尽可能多地显示已保存对象的数量，请在应用、网站或电子邮件中突出显示保存到 Google Pay 按钮。您需要遵循以下最佳做法才能获得 Google 的品牌审批。
会员卡
我们建议您将保存到 Google Pay 按钮放在应用、网站或电子邮件中的用户体验附近，也就是显示当前客户忠诚度信息的位置。当用户在您的应用或网站中注册会员回馈活动后，立即在显示的确认屏幕上显示此按钮也很有用。
礼品卡
我们建议您在用户在应用或网站中购买礼品卡后显示的确认屏幕上放置保存到 Google Pay 按钮。在发送给礼品卡收件人的任何电子邮件中显示该按钮也是一个好办法。
优惠
我们建议您将保存到 Google Pay 按钮放置在应用或网站中供用户获取优惠的屏幕或页面附近。为了获得更好的效果，我们强烈建议您在有关优惠的电子邮件中添加该按钮。
活动门票和公交票卡
在购买流程结束时或在确认应用屏幕、网页或电子邮件中显示保存到 Google Pay 按钮。我们建议您在用户在应用或网站中访问其票券的位置设置保存到 Google Pay 按钮。
登机牌
在购买流程结束时或在确认应用屏幕、网页或电子邮件中显示保存到 Google Pay 按钮。您还可以在乘客在网站或应用上办理登机手续或查看登机牌的位置显示此按钮，或将其添加到相关电子邮件中。
以文本形式使用 Google Pay 产品名称
您可以使用文本告知用户，其登机牌、活动门票或公交票卡、会员卡、礼品卡或优惠已保存到其设备。
以大写形式显示字母“G”和“P”
始终使用大写的“G”和大写的“P”后跟小写字母的形式来表示 Google Pay。不要将整个名称全部大写（“GOOGLE PAY”），除非这种形式与您的界面中的排版样式相匹配。
不要缩写 Google Pay
始终写出“Google”和“Pay”字样。
与界面中的样式保持一致
将“Google Pay”的字体和排版样式设置为与界面中其余文本相同。请勿模仿 Google 的排版样式。
不要翻译 Google Pay
始终以英文显示“Google Pay”。不要将其翻译成其他语言。
如未另行说明，那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可，并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情，请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC)：2025-08-29。
[null,null,["最后更新时间 (UTC)：2025-08-29。"],[[["\u003cp\u003eThese guidelines provide instructions for implementing the Google Wallet API to enable users to save passes to Google Pay within apps or websites.\u003c/p\u003e\n"],["\u003cp\u003eThe "Save to Google Pay" button must adhere to specific brand guidelines, including size, style, and clear space requirements, and should be used consistently.\u003c/p\u003e\n"],["\u003cp\u003eStrategic button placement is crucial, with recommendations for optimal placement near loyalty information, purchase confirmations, and offer displays to maximize saved objects.\u003c/p\u003e\n"],["\u003cp\u003eWhen referring to Google Pay in text, ensure to capitalize "G" and "P", avoid abbreviations and translations, and maintain consistency with your overall UI style.\u003c/p\u003e\n"]]],["The guidelines detail how to use the \"Save to Google Pay\" button within apps, websites, or emails. These buttons, available in EPS and SVG formats, must adhere to specific size, style, and clear space requirements. They must link to Google Pay API flows, be equal to or larger than other buttons, and contrast with the background. The button is available in black, white, or white with outline. The name \"Google Pay\" should be used as described and must remain untranslated. Proper button placement near loyalty information, offers, and ticket confirmations is also key.\n"],null,["# Button guidelines\n\nThese guidelines are meant to help you implement the Google Wallet API within your\napps or websites.\n\nSave to Google Pay button\n-------------------------\n\nThe **Save to Google Pay** button must call one of the Google Pay API for\nPasses flows. These flows surface a screen where users can save boarding passes, event or\ntransit tickets, loyalty cards, gift cards, and offers to their Android device. This button\ncan be used in merchant apps, websites, emails, or SMS.\n\n### Assets\n\nThe **Save to Google Pay** buttons are available as EPS and SVG files.\n\n[Download assets - EPS](/static/wallet/download-assets/Save_to_Google_Pay_eps.zip)\n[Download assets - SVG](/static/wallet/download-assets/Save_to_Google_Pay_svg.zip)\n\nAll **Save to Google Pay** buttons displayed on your site, app, or email\ncommunications must adhere to our brand guidelines, which are described on this page.\nThey include, but aren't limited to, the following:\n\n- Size relative to other similar buttons or elements of the page\n- Contrast with the background color of the surrounding area\n- Clear space\n\nThe **Save to Google Pay** buttons are available in the following languages: Arabic,\nCroatian, Czech, Danish, Dutch, English, Finnish, French, German, Indonesian, Italian,\nJapanese, Korean, Norwegian (Bokmal), Polish, Portuguese, Russian, Simplified Chinese,\nSlovak, Spanish, Swedish, Thai, Traditional Chinese, and Ukranian.\n\n### Size\n\nAdjust the height and width of the **Save to Google Pay** button to fit your layout. If\nthere are other buttons on the page, the **Save to Google Pay** button needs to be equal\nin size to or larger than these buttons. Do not make the **Save to Google Pay** button\nsmaller than other buttons.\n\n### Style\n\nThe **Save to Google Pay** buttons are available in three variations: black, white, and white\nwith a black outline. Buttons with localized versions of the text are provided.\nDo not create buttons with your own localized text.\n\n|---------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| | | |\n| Black | White | White with outline |\n| Use the black button on white or light backgrounds to provide contrast. Do not use the black button on dark backgrounds. Instead, use the white button. | Use the white button on dark or colorful backgrounds. Do not use the white button on white or light backgrounds. Instead, use the black button or the white button with an outline. | Use the white button with an outline as an alternative to the black button on white or light backgrounds. Do not use this button on dark or colorful backgrounds; use the standard white button instead. |\n\n### Clear space\n\nAlways maintain the minimum clear space of 8 dp on all sides of the **Save to Google Pay**\nbutton. Ensure that the clear space is never broken with graphics or text.\n\n### Minimum height\n\nAll **Save to Google Pay** buttons need to have a minimum height of 36 dp.\n\n### Dos and don'ts\n\n| Dos | Don'ts |\n|-----------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|\n| Do: Use only the **Save to Google Pay** buttons provided by Google. | Don't: Don't create your own **Save to Google Pay** buttons or alter the font, color, button radius, or padding within the button in any way. |\n| Do: Use the same style of button throughout your site. Button color may adapt if the color of the background changes. | Don't: Don't make the **Save to Google Pay** buttons smaller than other buttons. |\n| Do: Ensure that the size of the **Save to Google Pay** buttons remains equal to or larger than other buttons. | Don't: Don't use a button color that's similar to the background. For example, don't use the white button on a white background. |\n| Do: Ensure that you choose a button color that contrasts with your background. | Don't: Don't free scale the button. |\n| Do: Keep the button ratio the same when resizing the **Save to Google Pay** buttons. | |\n\nBest practices for button placement\n-----------------------------------\n\nTo maximize the number of saved objects, display the **Save to Google Pay** buttons\nprominently within your app, website, or email. You need to adhere to the following best\npractices in order to receive brand approval from Google.\n\n### Loyalty cards\n\nWe recommend that you place the **Save to Google Pay** button near user experiences\nin your app, site, or email communication where you display current customer loyalty\ninformation. It's also useful to display the button on confirmation screens that surface\nright after users sign up for your loyalty program in your app or website.\n\n### Gift cards\n\nWe recommend that you place the **Save to Google Pay** button on the confirmation\nscreen that surfaces after a user purchases a gift card in your app or website. It's\nalso a good idea to display the button in any email communication delivered to the\ngift card recipient.\n\n### Offers\n\nWe recommend that you place the **Save to Google Pay** button near screens or pages\nin your app or website where users access offers. For better results, it's highly recommended\nthat you include the button in any email communication about the offer.\n\n### Event and transit tickets\n\nDisplay the **Save to Google Pay** button at the end of your purchase flow or on\nconfirmation app screens, web pages, or emails. We recommend that you place the\n**Save to Google Pay** button where users access their tickets in your app or website.\n\n### Boarding passes\n\nDisplay the **Save to Google Pay** button at the end of your purchase flow or on\nconfirmation app screens, web pages, or emails. You can also display the button where\npassengers check in to their flights or view their boarding passes on your website or\napp, or include it in relevant emails.\n\nUse of the Google Pay product name in text\n------------------------------------------\n\nYou can use text to indicate to the user that their boarding pass, event or transit\nticket, loyalty card, gift card, or offer has been saved to their device.\n\n### Capitalize the letters \"G\" and \"P\"\n\nAlways use an uppercase \"G\" and an uppercase \"P\" followed by lowercase letters to\nrefer to Google Pay. Don't capitalize the full name \"GOOGLE PAY\" unless it's to match\nthe typographic style in your UI.\n\n### Don't abbreviate Google Pay\n\nAlways write out the words \"Google\" and \"Pay.\"\n\n### Match the style in your UI\n\nSet \"Google Pay\" in the same font and typographic style as the rest of the text in your UI.\nDo not mimic Google's typographic style.\n\n### Don't translate Google Pay\n\nAlways write \"Google Pay\" in English. Do not translate it to another language."]]
