總覽
這些指南的適用對象為參與我們的計劃的開發人員,為歐洲經濟區 (EEA) 境內使用者提供 Google Play 帳單系統以外的使用者帳單系統選項,無需使用者選擇。如果在歐洲經濟區發布應用程式的開發人員參與使用者自選結帳系統前測計畫,且一併提供 Google Play 結帳系統和其他結帳系統,則應依循使用者自選結帳系統的使用者體驗指南。這份使用者體驗指南的目標是維持一致的使用者體驗,因此當使用者首次進行購買交易時,開發人員必須顯示資訊畫面。您應按照下列指南,為資訊畫面實作向使用者顯示的訊息和 UI 規格。
選取語言
在以下設計規格中選取使用者的語言,即可查看對應的 UI 文字字串。
使用者參考資訊
資訊畫面可協助使用者瞭解相關異動造成的影響。
何時顯示
資訊畫面必須在使用者第一次購物時顯示。同一個使用者進行後續的購買交易時,系統無須再次顯示這則訊息。在使用者執行明確操作以進行購買交易後,請立即顯示該資訊畫面。
何時顯示價格
在顯示資訊畫面之前,系統應向使用者顯示清楚可見的購買價格。
如何顯示
資訊畫面必須顯示於一個強制回應的底部功能表中。強制回應底部功能表與強制回應對話方塊類似,會以動畫方式從畫面底部出現,並固定在底部,置於底層畫面的所有 UI 元素之上。底層畫面會由深色紗罩遮擋,不會回應使用者的任何互動。
若要進一步瞭解強制回應底部功能表的設計和實作,請參閱 Google Material Design。
使用者動作
當使用者為了進行購買交易,而輕觸應用程式中的按鈕或其他 UI 元素時,必須能觸發底部功能表。使用者可以從資訊畫面中採取兩種可能的動作:
我知道了
輕觸「我知道了」按鈕關閉資訊畫面,並在付款流程中啟動下一個畫面。
瞭解詳情
輕觸「瞭解詳情」按鈕,會在網路瀏覽器中開啟一篇 Google 說明中心文章。
關閉
如果使用者想要關閉底部功能表並返回底層畫面,可以透過下列方式關閉底部功能表:
- 輕觸底部功能表容器範圍以外的位置
- 輕觸 Android 系統的「返回」按鈕
在使用者關閉資訊畫面或輕觸「我知道了」後,就不需再顯示資訊畫面。
範例:當使用者在應用程式中輕觸購買時,按鈕會觸發資訊畫面。
設計規格
資訊畫面分為三個元件:標題、訊息和按鈕。這三項均為必要元件,必須具有本指南中明確定義的文字和 UI 元素。請勿在這個畫面中加入任何其他文字或圖片,但您可以在其他畫面中加入額外的文字和圖片。
- 標題
- 文字 1
- 文字 2
- 按鈕
- 底部功能表
- 背景紗罩
標題
Text |
選取語言
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
字型 | Roboto (適用於所有字型) | ||||||||||||||||||||||||||||||||||||||||||||||||||||
字型大小 | 18sp | ||||||||||||||||||||||||||||||||||||||||||||||||||||
字型顏色 | #202124 |
文字 1
可用於突顯重要資訊要點。
文字 |
選取語言
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
字型大小 | 14sp | ||||||||||||||||||||||||||||||||||||||||||||||||||||
行高 | 20 | ||||||||||||||||||||||||||||||||||||||||||||||||||||
字型顏色 | #5F6368 |
文字 2
用於優先順序較低的次要資訊。
文字 |
選取語言
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
字型大小 | 12sp | ||||||||||||||||||||||||||||||||||||||||||||||||||||
行高 | 16 | ||||||||||||||||||||||||||||||||||||||||||||||||||||
字型顏色 | #5F6368 |
按鈕 1
Text |
選取語言
|
||||||||||||||||||||||||||||||||||||||||||||||||||||
文字對齊方式 | 置中 | ||||||||||||||||||||||||||||||||||||||||||||||||||||
字型大小 | 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,寬度:根據容器縮放 |
如要進一步瞭解歐洲經濟區計劃非使用者自選的其他帳單方案和常見問題,請造訪說明中心。