Przegląd
Aby zadbać o wrażenia użytkowników i ułatwić im podejmowanie świadomych decyzji, musisz wyświetlać ekran informacyjny i osobny ekran wyboru systemu rozliczeniowego, jeśli oferujesz alternatywny system rozliczeń w aplikacji zamiast systemu Google Play. Ekran informacyjny musi być wyświetlany każdemu użytkownikowi tylko przy pierwszej próbie zakupu, a ekran wyboru rozliczeń powinien być wyświetlany przed każdym zakupem. Komunikaty wyświetlane użytkownikom i specyfikacje interfejsu obu ekranów powinny być wdrażane zgodnie z tymi wytycznymi.

Informacje dla użytkowników
Ekran z informacjami pomaga użytkownikom zrozumieć kontekst zmiany i zawiera więcej informacji, które pomagają im podjąć świadomą decyzję.
Kiedy wyświetlać
Ekran informacyjny powinien być wyświetlany użytkownikom na początku pierwszego zakupu po dodaniu alternatywnego systemu rozliczeniowego w aplikacji. Ta wiadomość nie musi być wyświetlana przy kolejnych zakupach tego samego użytkownika. Wyświetl ekran z informacjami od razu po tym, jak użytkownik podejmie wyraźne działanie w celu rozpoczęcia zakupu.
Kiedy wyświetlać cenę
Zanim użytkownikowi wyświetli się ekran z informacjami lub ekran wyboru systemu rozliczeniowego, cena zakupu powinna być widoczna i zrozumiała.
Jak wyświetlać
Ekran informacji powinien być wyświetlany w modalnym arkuszu u dołu. Arkusz modalny u dołu ekranu jest podobny do okna modalnego, które pojawia się w animacji od dołu ekranu i pozostaje przypięte do jego dolnej krawędzi. Jest ona umieszczona nad wszystkimi elementami interfejsu na ekranie. Ekran pod spodem jest zasłonięty ciemną warstwą, co oznacza, że nie będzie reagować na działania użytkownika.
Więcej informacji o projektowaniu i wdrażaniu modalnych arkuszy dolnych znajdziesz w wytycznych Google Material Design.
Działania użytkownika
Plansza dolna powinna być wywoływana, gdy użytkownik kliknie przycisk lub inny element interfejsu w aplikacji, który inicjuje zakup. Na ekranie informacji użytkownik może wykonać 3 działania:
Dalej
Kliknięcie przycisku „Dalej” powoduje zamknięcie ekranu informacyjnego i wyświetlenie ekranu wyboru rozliczeń.
Więcej informacji
Kliknięcie przycisku „Więcej informacji” spowoduje otwarcie artykułu w Centrum pomocy Google w przeglądarce.
Zamknij
Jeśli użytkownicy chcą zamknąć arkusz u dołu i wrócić do ekranu bazowego, mogą to zrobić w jeden z tych sposobów:
- Kliknięcie poza kontenerem planszy dolnej
- Kliknięcie przycisku „Wstecz” w systemie Android
Ekran informacyjny nie musi być wyświetlany ponownie po jego zamknięciu lub po kliknięciu przez użytkownika przycisku „Dalej”.
Przykład: cena zakupu jest wyraźnie wyświetlana, zanim użytkownik zainicjuje zakup. Kliknięcie przycisku „Dołącz teraz” powoduje wyświetlenie ekranu z informacjami.

Specyfikacja projektu
Ekran z informacjami składa się z 3 elementów: tytułu, wiadomości i przycisków. Wszystkie 3 komponenty są wymagane i muszą zawierać dokładny tekst oraz elementy interfejsu zdefiniowane w tych wytycznych. Nie umieszczaj na tym ekranie żadnego dodatkowego tekstu ani obrazów, ale możesz to zrobić na innych ekranach.

- Tytuł
- Wiadomość
- Przyciski
- Plansza dolna
- Tło
Tytuł
| Tekst | Zmiany w opcjach płatności |
| Czcionka | Roboto (zastosuj do wszystkich czcionek) |
| Rozmiar czcionki | 18sp |
| Kolor czcionki | #202124 |
Wiadomość
| Tekst 1 | Ze względu na niedawne zmiany przepisów w Korei Południowej masz teraz więcej opcji płatności. Twój wybór wpłynie na to:
|
| Rozmiar czcionki | 14sp |
| Wysokość wiersza | 20 |
| Kolor czcionki | #5F6368 |
| Tekst 2 | Google zabezpiecza wyłącznie zakupy realizowane przez Google Play. Funkcje Google Play, takie jak karty podarunkowe Google Play, punkty Play, opcje zakupu czy zarządzanie subskrypcjami, są dostępne tylko wtedy, gdy w momencie płatności wybierzesz Google Play. |
| Rozmiar czcionki | 12 sp |
| Wysokość wiersza | 16 |
| Kolor czcionki | #5F6368 |
Przycisk 1
| Tekst | Więcej informacji |
| Wyrównanie tekstu | Wyśrodkowano |
| Rozmiar czcionki | 14sp |
| Grubość czcionki | Średni |
| Kolor czcionki | #01875F |
| Kolor tła | #FFFFFF |
| Wymiary | Wysokość:36, szerokość: dopasowana do kontenera |
| Promień zaokrąglenia | 4 dp |
| Kontur | 1dp, #DADCE0 |
| Link | Linki do artykułu pomocy Google Play |
Przycisk 2
| Tekst | Dalej |
| Wyrównanie tekstu | Wyśrodkowano |
| Rozmiar czcionki | 14sp |
| Grubość czcionki | Średni |
| Kolor czcionki | #FFFFFF |
| Kolor tła | #01875F |
| Wymiary | Wysokość:36, szerokość: dopasowana do kontenera |
| Promień zaokrąglenia | 4 dp |
| Link | Linki do ekranu wyboru systemu rozliczeniowego |
Plansza dolna
| Wymiary | Wysokość: zmienna, szerokość: 100% |
| Promień zaokrąglenia | 8dp, 8dp, 0, 0 |
| Tło | #FFFFFF |
| Wewnętrzna wyściółka | Lewy:24 dp, prawy:24 dp, górny:32 dp, dolny: 24 dp |
| Elevation | 8dp |
Poziomo
W orientacji poziomej plansza dolna jest szersza niż w orientacji pionowej, ale poza tym ma takie same specyfikacje projektowe i funkcje.

| Plansza dolna | Szerokość: maksymalnie 500 dp, wewnętrzny margines: 24 dp |
| Tytuł | Taki sam jak w widoku pionowym |
| Wiadomość | Taki sam jak w widoku pionowym |
| Przyciski | Wysokość:36, szerokość: dopasowana do kontenera |
Ekran wyboru systemu rozliczeniowego
Na ekranie wyboru systemu rozliczeniowego użytkownicy mają do wyboru 2 opcje płatności, które umożliwiają im dokonanie zakupu. Aby ułatwić użytkownikom podjęcie świadomej decyzji, przy każdej opcji usługi rozliczeniowej wyświetlamy też dostępne formy płatności. Gdy użytkownicy dokonają wyboru, będą mogli sfinalizować zakup za pomocą wybranej usługi płatności.
Kiedy wyświetlać
Jeśli użytkownik widział już ekran z informacjami, ekran wyboru płatności powinien pojawić się natychmiast po tym, jak użytkownik wykona wyraźne działanie w celu rozpoczęcia zakupu.
Jak wyświetlać
Ekran wyboru płatności powinien być wyświetlany w modalnym arkuszu u dołu ekranu i spełniać te same wymagania co ekran informacyjny.
Równa reprezentacja wizualna
Przyciski dodatkowej usługi rozliczeń w aplikacji i usługi rozliczeniowej Google Play powinny być prezentowane w sprawiedliwy i równy sposób. Obejmuje to m.in. równe rozmiary przycisków, rozmiar i styl tekstu, obszary klikalne i rozmiary ikon. Nie dodawaj dodatkowego tekstu, obrazów ani zmian stylu, które nie są określone w tych wytycznych.
Przykład: kliknięcie przycisku „Dołącz teraz” powoduje wyświetlenie ekranu wyboru płatności.

Specyfikacja projektu
Ekran wyboru płatności składa się z 4 elementów: tytułu, opisu, przycisku dewelopera i przycisku Google Play. Należy używać wszystkich komponentów, które powinny zawierać dokładny tekst i elementy interfejsu zdefiniowane w tych wytycznych. Na tym ekranie nie umieszczaj dodatkowego tekstu ani obrazów, ale możesz to zrobić na innych ekranach, które należą do Ciebie.
Materiały wizualne dotyczące Google Play i ikony płatności są dostępne pod linkami podanymi poniżej.
Przykład: w widoku pionowym arkusz u dołu ekranu powinien zajmować 100% szerokości ekranu.

- Tytuł
- Opis
- Przycisk dewelopera
- Przycisk Google Play
- Plansza dolna
- Tło
Tytuł
| Tekst | Wybierz, jak chcesz zapłacić |
| Czcionka | Roboto (zastosuj do wszystkich czcionek) |
| Rozmiar czcionki | 18sp |
| Kolor czcionki | #202124 |
Opis
| Tekst | Wybierz, kto zabezpieczy i zrealizuje Twoją płatność oraz zajmie się obsługą klienta. Korzyści i dostępne formy płatności mogą się różnić. |
| Rozmiar czcionki | 14sp |
| Kolor czcionki | #5F6368 |
| Link tekstowy | Więcej informacji |
| Miejsce docelowe linku | Link |
| Rozmiar czcionki | 14sp |
| Dekoracje | Podkreślenie |
| Kolor czcionki | #5F6368 |
Przycisk dewelopera

- Ikona aplikacji
- Nazwa aplikacji
- Ikony form płatności

- Maksymalna liczba ikon form płatności
- Nazwy form płatności zamiast ikon
- Szerokość 360 dp
- Szerokość 480 dp
Ikony form płatności
Skaluj do szerokości ekranu
Kontener przycisku
| Kontur | 1pt, #DADCE0 |
| Promień zaokrąglenia | 4 dp |
| Wewnętrzna wyściółka | 16dp, 16dp, 16dp, 16dp, |
Ikona aplikacji
| Wymiary | Wysokość: 24 dp, szerokość: zmienna |
Tytuł
| Tekst | {App Name} |
| Rozmiar czcionki | 14sp |
| Kolor czcionki | #202124 |
Formy płatności
| Wymiary | 32 dp x 20 dp |
| Promień zaokrąglenia | 2 |
| Ilość | Maksymalnie 5, jeśli dostępnych jest więcej niż 5, wyświetl dodatkowy wskaźnik |
| Dodatkowy wskaźnik | + więcej (przenosi się do następnego wiersza na wąskich ekranach) |
| Rozmiar czcionki | 12 sp |
| Kolor czcionki | #5F6368 |
Przycisk Google Play

- Ikona
- Tytuł
- Akceptowane formy płatności
- Dodatkowy wskaźnik
Kontener przycisku
| Kontur | 1pt, #DADCE0 |
| Promień zaokrąglenia | 4 dp |
| Wewnętrzna wyściółka | 16dp, 16dp, 16dp, 16dp, |
Ikona aplikacji
| Zasób obrazu | Google Play prism |
| Wymiary | 24 dp × 24 dp |
Tytuł
| Tekst | Google Play |
| Rozmiar czcionki | 14sp |
| Kolor czcionki | #202124 |
Formy płatności
| Zasób obrazu | Link |
| Dodatkowy wskaźnik | + więcej |
| Rozmiar czcionki | 12 sp |
| Kolor czcionki | #5F6368 |
Poziomo
Przykład: w orientacji poziomej plansza dolna jest szersza niż w orientacji pionowej, ale poza tym ma takie same specyfikacje projektowe i funkcje.

| Plansza dolna | Szerokość: maksymalnie 500 dp, wewnętrzny margines: 24 dp |
| Tytuł | Taki sam jak w widoku pionowym |
| Wiadomość | Taki sam jak w widoku pionowym |
| Przyciski | Taki sam jak w widoku pionowym |