總覽
使用者自選帳單系統前測計畫可讓參與的開發人員測試 Google Play 帳單系統以外的替代帳單選項，有助我們分析如何向使用者提供這個選項。本使用者體驗指南旨在維持一致的使用者體驗，協助使用者做出明智的決定。
如果您參加前測，必須顯示資訊畫面以及獨立的結帳選項畫面。只需要在每個使用者第一次進行購買交易時向他們顯示資訊畫面即可，而結帳選項畫面則必須在每次購買交易前顯示。請根據以下指南，為這兩個畫面實作符合規格的使用者訊息和 UI。
開發人員應用程式 |
使用者的資訊螢幕 |
結帳選項畫面 |
選取國家/地區和語言
請選取使用者的國家/地區和語言，在以下設計規格中查看對應的 UI 文字字串。
- 顯示所有國家/地區
- 選取國家/地區
- 歐洲經濟區 (EEA)
- 澳洲
- 巴西
- 印度
- 印尼
- 日本
- 南非
- 美國
- 顯示所有語言
- 選取語言
- 斐文
- 阿薩姆文
- 孟加拉文
- 保加利亞文
- 加泰隆尼亞文
- 克羅埃西亞文
- 捷克文
- 丹麥文
- 荷蘭文
- 英文
- 愛沙尼亞文
- 芬蘭文
- 法文
- 德文
- 希臘文
- 古吉拉特文
- 印度文
- 匈牙利文
- 冰島文
- 印尼文
- 義大利文
- 日文
- 卡納達文
- 拉脫維亞文
- 立陶宛文
- 馬拉雅拉姆文
- 馬拉地文
- 挪威文
- 奧里雅文
- 波蘭文
- 葡萄牙文 (巴西)
- 葡萄牙文 (歐洲)
- 旁遮普文
- 羅馬尼亞文
- 斯洛伐克文
- 斯洛維尼亞文
- 西班牙文
- 瑞典文
- 泰米爾文
- 泰盧固文
- 祖魯文
使用者參考資訊
資訊畫面可協助使用者瞭解相關異動的背景資訊，並提供更多資訊協助使用者做出明智的選擇。
何時顯示
資訊畫面必須在您新增替代帳單系統後，於使用者第一次進行購買交易時顯示。同一個使用者進行後續的購買交易時，系統無須再次顯示這則訊息。請在使用者執行明確操作開始購買交易後，立即顯示該資訊畫面。
何時顯示價格
在顯示資訊畫面或結帳選項畫面之前，系統必須向使用者顯示清楚可見的購買價格。
如何顯示
資訊畫面必須顯示於一個強制回應的底部功能表中。強制回應底部功能表與強制回應對話方塊類似，會以動畫方式從畫面底部出現，並固定在底部，置於底層畫面的所有 UI 元素之上。底層畫面會被深色紗罩遮擋，不會回應使用者的任何互動。
若要進一步瞭解強制回應底部功能表的設計和實作，請參閱 Google 質感設計。
使用者動作
當使用者輕觸應用程式中的某個按鈕或其他 UI 元素進行購買交易時，就應觸發底部功能表。使用者可以從資訊畫面中採取三種可能的動作：
繼續
輕觸「繼續」按鈕關閉資訊畫面，並啟動結帳選項畫面。
瞭解詳情
輕觸「瞭解詳情」按鈕，會在網路瀏覽器中開啟一篇 Google 說明中心文章。
關閉
如果使用者想要關閉底部功能表並返回底層畫面，可以透過下列方式關閉底部功能表：
- 輕觸底部功能表容器範圍以外的位置
- 輕觸 Android 系統的「返回」按鈕
在使用者關閉資訊畫面或輕觸「繼續」後，就不需再顯示資訊畫面。
範例：當使用者在應用程式中輕觸購買時，按鈕會觸發資訊畫面。
設計規格
資訊畫面分為三個元件：標題、訊息和按鈕。這三項均為必要元件，必須具有本指南中明確定義的文字和 UI 元素。請勿在這個畫面中加入任何其他文字或圖片，但您可以在其他畫面中加入額外的文字和圖片。
- 標題
- 文字 1
- 文字 2
- 按鈕
- 底部功能表
- 背景紗罩
標題
| Text |
選取國家/地區和語言 |
| 字型 | Roboto (適用於所有字型) |
| 字型大小 | 18sp |
| 字型顏色 | #202124 |
文字 1
可用於突顯重要資訊要點。
| Text |
選取國家/地區和語言 |
| 字型大小 | 14sp |
| 行高 | 20 |
| 字型顏色 | #5F6368 |
文字 2
用於優先順序較低的次要資訊。
| 文字 |
選取國家/地區和語言 |
| 字型大小 | 12sp |
| 行高 | 16 |
| 字型顏色 | #5F6368 |
按鈕 1
| 文字 |
選取國家/地區和語言 |
| 文字對齊方式 | 置中 |
| 字型大小 | 14sp |
| 字型粗細 | 中 |
| 字型顏色 | #01875F |
| 背景顏色 | #FFFFFF |
| 尺寸 | 高度：36，寬度：根據容器縮放 |
| 圓角半徑 | 4dp |
| 外框 | 1dp，#DADCE0 |
| 連結 | Google Play 說明文章的連結 |
按鈕 2
| Text |
選取國家/地區和語言 |
| 文字對齊方式 | 置中 |
| 字型大小 | 14sp |
| 字型粗細 | 中 |
| 字型顏色 | #FFFFFF |
| 背景顏色 | #01875F |
| 尺寸 | 高度：36，寬度：根據容器縮放 |
| 圓角半徑 | 4dp |
| 連結 | 結帳選項畫面的連結 |
底部功能表
| 尺寸 | 高度：可變化，寬度：100% |
| 圓角半徑 | 8dp、8dp、0、0 |
| 背景 | #FFFFFF |
| 內部邊框間距 | 左：24dp，右：24dp，頂端：32dp，底部：24dp |
| 高度 | 8dp |
橫向
在橫向檢視畫面中，底部功能表比縱向檢視畫面中要寬，但其他方面均遵循相同的設計規格和功能。
| 底部功能表 | 寬度：最大 500dp，內部邊框間距：24dp |
| 標題 | 與縱向檢視畫面相同 |
| 訊息 | 與縱向檢視畫面相同 |
| 按鈕 | 高度：36，寬度：根據容器縮放 |
結帳選項畫面
結帳選項畫面向使用者顯示用於完成購買交易的兩個結帳選項。為了協助使用者做出明智的決定，每個結帳服務選項還會顯示可用的付款方式使用者做出選擇後，即透過該結帳服務完成購買交易。
何時顯示
如果使用者在上次購買時已看過資訊畫面，系統應在使用者採取明確動作進行購買交易後，立即顯示結帳選項畫面。
如何顯示
帳單選項畫面必須顯示在強制回應底部功能表中，並採用與資訊畫面相同的規格。
均等的視覺呈現方式
其他帳單系統和 Google Play 帳單系統的按鈕應以公平、均等的方式呈現。這包括但不限於相同的按鈕大小、文字大小/樣式、輕觸目標和圖示大小。請不要加入本指南中未定義的任何其他文字、圖片或樣式變更。
範例：使用者在應用程式中輕觸購買後，唯有使用者已在上次購買時看過資訊畫面，購買按鈕才會觸發結帳選項畫面。
設計規格
結帳選項畫面包含四個不同元件：標題、說明、開發人員按鈕和 Google Play 按鈕。所有元件均需用到，並且應包含本指南中定義的確切文字和 UI 元素。請勿在這個畫面中加入任何其他文字或圖片，但您可以在其他畫面中加入額外的文字和圖片。
您可以透過下方的連結查看 Google Play 的視覺素材和付款圖示。
範例：在縱向檢視畫面中，底部功能表應延伸至與螢幕的總寬度同寬。
- 標題
- 說明
- 開發人員按鈕
- Google Play 按鈕
- 底部功能表
- 背景紗罩
標題
| Text |
選取國家/地區和語言 |
| 字型 | Roboto (適用於所有字型) |
| 字型大小 | 18sp |
| 字型顏色 | #202124 |
說明
| Text |
選取國家/地區和語言 |
| 字型大小 | 14sp |
| 字型顏色 | #5F6368 |
| 文字連結 |
選取國家/地區和語言 |
| 連結目的地 | Google Play 說明的連結 |
| 字型大小 | 14sp |
| 裝飾 | 底線 |
| 字型顏色 | #5F6368 |
開發人員按鈕
- 應用程式圖示
- 應用程式名稱
- 付款方式圖示
- 其他指標
- 付款方式圖示數量上限
- 寬度：360dp
- 寬度：480dp
付款方式圖示
根據螢幕寬度進行縮放
按鈕容器
| 外框 | 1pt，#DADCE0 |
| 圓角半徑 | 4dp |
| 內部邊框間距 | 16dp、16dp、16dp、16dp |
應用程式圖示
| 尺寸 | 高度：24dp，寬度：變數 |
標題
| Text | {應用程式名稱} |
| 字型大小 | 14sp |
| 字型顏色 | #202124 |
付款方式
| 尺寸 | 高度：32dp，寬度：20dp |
| 圓角半徑 | 2dp |
| 數量 | 最多 5 個，如果超過 5 個則顯示其他指標 |
| 其他指標 |
選取國家/地區和語言 |
| 字型大小 | 12sp |
| 字型顏色 | #5F6368 |
Google Play 按鈕
- 圖示
- 標題
- 接受的付款方式
- 其他指標
按鈕容器
| 外框 | 1pt，#DADCE0 |
| 圓角半徑 | 4dp |
| 內部邊框間距 | 16dp、16dp、16dp、16dp |
應用程式圖示
| 圖片素材資源 | Google Play 稜鏡 |
| 尺寸 | 高度：24dp，寬度：24dp |
標題
| Text | Google Play |
| 字型大小 | 14sp |
| 字型顏色 | #202124 |
付款方式
| 圖片素材資源 | 連結 |
| 其他指標 |
選取國家/地區和語言 |
| 字型大小 | 12sp |
| 字型顏色 | #5F6368 |
橫向
範例：在橫向檢視畫面中，底部功能表比在直向檢視畫面中要寬，但是會採用相同的設計規格和功能。
| 底部功能表 | 寬度：最大 500dp，內部邊框間距：24dp |
| 標題 | 與縱向檢視畫面相同 |
| 訊息 | 與縱向檢視畫面相同 |
| 按鈕 | 與縱向檢視畫面相同 |
如要進一步瞭解使用者自選帳單系統前測計畫和常見問題，請造訪說明中心。