按鈕規範
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
以下指南旨在協助您在應用程式或網站中導入 Google Wallet API。
「儲存至 Google Pay」按鈕必須呼叫其中一個 Google Pay API for Pass 流程。這些流程會顯示一個畫面，使用者可將登機證、活動或大眾運輸票券、會員卡、禮物卡和優惠儲存到 Android 裝置。您可以在商家應用程式、網站、電子郵件或簡訊中使用這個按鈕。
資產
我們提供 EPS 和 SVG 檔案格式的「儲存至 Google Pay」按鈕。
下載素材資源 - EPS
下載素材資源 - SVG
網站、應用程式或電子郵件通訊中顯示的所有「儲存至 Google Pay」按鈕都必須符合本頁所述的品牌規範，包括但不限於下列規定：
- 依據其他類似的按鈕或頁面元素設定按鈕大小
- 與週邊區域的背景顏色形成對比
- 周圍留空
「儲存至 Google Pay」按鈕支援下列語言：阿拉伯文、克羅埃西亞文、捷克文、丹麥文、荷蘭文、英文、芬蘭文、法文、德文、印尼文、義大利文、日文、韓文、挪威文 (巴基斯坦)、波蘭文、葡萄牙文、俄文、簡體中文、斯洛伐克文、西班牙文、瑞典文、泰文、繁體中文、泰文、繁體中文、泰文、繁體中文。
大小
您可以根據版面配置調整「儲存至 Google Pay」按鈕的高度和寬度。如果頁面上還有其他按鈕，「儲存至 Google Pay」按鈕的大小必須大於或等於這些按鈕。切勿讓「儲存至 Google Pay」按鈕小於其他按鈕。
樣式
「儲存至 Google Pay」按鈕共有三種樣式：黑色、白色及白色帶框。提供經本地化版本的按鈕。請勿以自行翻譯的文字建立按鈕。
 |
 |
 |
| Black |
White |
白色帶框 |
| 白色或淺色背景應使用黑色按鈕，形成對比。暗色背景則請勿使用黑色按鈕。改以白色按鈕代之。 |
暗色或彩色背景應使用白色按鈕。白色或淺色背景則請勿使用白色按鈕，請改用黑色按鈕或帶有外框的白色按鈕。 |
白色帶框按鈕可以代替黑色按鈕用於白色或淺色背景上。深色或彩色背景則請勿使用這個按鈕，而應改用標準的白色按鈕。 |
周圍留空
「儲存至 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」字母大寫
提及 Google Pay 時，字首的「G」與「P」一律大寫，其他字母小寫。除非必須配合 UI 字體樣式，否則請勿使用全部大寫的「GOOGLE PAY」。
不得縮寫 Google Pay
「Google」與「Pay」字樣應完整拼寫。
配合 UI 的樣式
設定「Google Pay」字型與字體樣式時，應使用與 UI 中其餘文字相同的字型與字體樣式。請勿模仿 Google 的字體樣式。
請勿翻譯 Google Pay
「Google Pay」應一律保持英文拼寫。請勿翻譯成其他語言。
除非另有註明，否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權，程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間：2025-08-29 (世界標準時間)。
[null,null,["上次更新時間：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."]]
