Tymczasowe wskazówki dotyczące wygody korzystania z alternatywnych systemów rozliczeń w aplikacji

Przegląd

Aby zadbać o wygodę użytkowników i ułatwić im podejmowanie świadomych decyzji, musisz wyświetlać ekran z informacjami i oddzielny ekran wyboru systemu rozliczeniowego, jeśli oferujesz w aplikacji alternatywny system rozliczeń w aplikacji niż ten z Google Play. Ekran z informacjami powinien być pokazywany każdemu użytkownikowi tylko przy pierwszym zakupie. Ekran z informacjami o płatnościach powinien być wyświetlany przed każdym zakupem. Komunikaty widoczne dla użytkowników i specyfikacje interfejsu użytkownika na obu ekranach powinny być implementowane zgodnie z poniższymi wytycznymi.

Informacje dla użytkowników

Ekran z informacjami pomaga użytkownikom zrozumieć kontekst zmiany i zawiera więcej informacji, które pomagają im dokonać świadomego wyboru.

Kiedy wyświetlać

Ekran z informacjami powinien wyświetlić się użytkownikom na początku pierwszego zakupu po dodaniu alternatywnego systemu rozliczeń w aplikacji. Ten komunikat nie musi wyświetlać się przy kolejnych zakupach tego samego użytkownika. Wyświetlaj ekran z informacjami natychmiast po tym, jak użytkownik wykona bezpośrednie działanie w celu zainicjowania zakupu.

Kiedy wyświetlać cenę

Cena zakupu powinna być widoczna i zrozumiała dla użytkowników, zanim trafią na ekran informacyjny lub ekran wyboru formy płatności.

Jak wyświetlać

Ekran z informacjami powinien być wyświetlany w formie modalnej planszy dolnej. Modalny arkusz dolny przypomina okno modalne, które pojawia się u dołu ekranu i pozostaje przypięte na dole. Jest umieszczony wyżej nad wszystkimi elementami interfejsu na ekranie. Podstawowy ekran jest ukryty za ciemnym ekranem, co wskazuje, że nie reaguje na interakcje użytkownika.

Więcej informacji o projekcie i wdrażaniu modalnych plansz znajdziesz na stronie Google Material Design.

Czynności użytkownika

Plansza dolna powinna się uruchamiać, gdy użytkownik kliknie przycisk lub inny element interfejsu w aplikacji, który inicjuje zakup. Na ekranie z informacjami użytkownik może wykonać 3 czynności:

Kontynuuj

Dotknięcie przycisku „Dalej” zamyka ekran z informacjami i otwiera ekran wyboru sposobu płatności.

Więcej informacji

Kliknięcie przycisku „Więcej informacji” powoduje otwarcie w przeglądarce artykułu z Centrum pomocy Google.

Zamknij

Jeśli użytkownicy chcą zamknąć planszę dolną i wrócić do ekranu bazowego, mogą ją zamknąć, wykonując te czynności:

• Kliknij na zewnątrz kontenera planszy dolnej.
• kliknięcie przycisku „Wstecz” w systemie Android;

Ekran informacyjny nie musi wyświetlać się ponownie po jego zamknięciu ani po kliknięciu przez użytkownika przycisku „Dalej”.

Przykład: cena zakupu jest wyraźnie widoczna przed zainicjowaniem zakupu przez użytkownika. Kliknięcie przycisku „Dołącz teraz” powoduje wyświetlenie ekranu informacyjnego.

Specyfikacja projektu

Ekran z informacjami jest podzielony na 3 elementy: tytuł, komunikat i przyciski. Wszystkie 3 komponenty są wymagane i muszą zawierać dokładnie taki sam tekst oraz elementy interfejsu zdefiniowane w tych wskazówkach. Nie umieszczaj na tym ekranie dodatkowego tekstu ani obrazów, ale możesz umieścić dodatkowy tekst i obrazy na innych ekranach.

1. tytuł;
2. przekaz,
3. Przyciski
4. Plansza dolna
5. Siatka w tle

tytuł;

Tekst	Zmiany w opcjach płatności
Czcionka	Roboto (dotyczy wszystkich czcionek)
Rozmiar czcionki	18sp
Kolor czcionki	#202124

przekaz,

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: kto zabezpieczy i zrealizuje płatność oraz będzie przechowywać dane karty, kto zapewni obsługę klienta w zakresie tego zakupu, jakiej formy płatności możesz użyć, jakie korzyści będą dostępne w związku z zakupem,
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	12sp
Wysokość wiersza	16
Kolor czcionki	#5F6368

Przycisk 1

Tekst	Więcej informacji
Wyrównanie tekstu	Nastrojowa
Rozmiar czcionki	14sp
Grubość czcionki	Medium
Kolor czcionki	#01875F
Kolor tła	#FFFFFF
Wymiary	Wysokość:36, szerokość: odskaluj do kontenera
Promień narożnika	4dp
Kontur	1dp, #DADCE0
Link	Linki do artykułu pomocy Google Play

Przycisk 2

Tekst	Kontynuuj
Wyrównanie tekstu	Nastrojowa
Rozmiar czcionki	14sp
Grubość czcionki	Medium
Kolor czcionki	#FFFFFF
Kolor tła	#01875F
Wymiary	Wysokość:36, szerokość: odskaluj do kontenera
Promień narożnika	4dp
Link	Linki do ekranu wyboru płatności

Plansza dolna

Wymiary	Wysokość: zmienna, szerokość: 100%
Promień narożnika	8dp, 8dp, 0, 0
Tło	#FFFFFF
Wypełnienie wewnętrzne	Lewa:24 dp, Prawa:24 dp, Góra:32 dp, Dolna: 24 dp
Wysokość	8dp

Poziomo

W orientacji poziomej arkusz dolny jest szerszy niż w orientacji pionowej, ale zachowuje te same specyfikacje projektowe i funkcje.

Plansza dolna	Szerokość: maksymalnie 500 dp, Wypełnienie wewnętrzne: 24 dp
tytuł;	Tak samo jak w widoku pionowym
przekaz,	Tak samo jak w widoku pionowym
Przyciski	Wysokość:36, szerokość: odskaluj do kontenera

Ekran wyboru płatności

Na ekranie wyboru formy płatności użytkownicy mają do wyboru 2 opcje płatności, za pomocą których mogą sfinalizować zakup. Aby ułatwić użytkownikom podejmowanie świadomych decyzji, każda opcja usługi rozliczeniowej zawiera również dostępne formy płatności. Gdy użytkownicy dokonają wyboru, będą mogli nadal dokonywać zakupów za pomocą tej usługi rozliczeniowej.

Kiedy wyświetlać

Jeśli użytkownik widział już ekran z informacjami, ekran z informacjami o płatności powinien pojawić się zaraz po tym, jak użytkownik wykona bezpośrednie działanie w celu zainicjowania zakupu.

Jak wyświetlać

Ekran wyboru płatności powinien być wyświetlany w modalnym arkuszu u dołu i powinien 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ć przedstawiane w sprawiedliwy i równy sposób. Obejmuje to m.in. jednakowe rozmiary przycisków, rozmiar i styl tekstu, elementy dotykowe i rozmiary ikon. Nie dodawaj dodatkowego tekstu, obrazów ani nie zmieniaj stylu reklamy, które nie są zdefiniowane w tych wskazówkach.

Przykład: kliknięcie przycisku „Dołącz teraz” powoduje wyświetlenie ekranu z opcjami 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 i powinien zawierać dokładnie taki sam tekst oraz elementy interfejsu zdefiniowane w tych wskazówkach. Nie umieszczaj na tym ekranie żadnego dodatkowego tekstu ani obrazu, ale możesz umieścić dodatkowy tekst i obrazy na innych ekranach należących do Ciebie.

Zasoby wizualne w Google Play i ikony płatności są dostępne po kliknięciu poniższych linków.

Przykład: w widoku pionowym arkusz dolny powinien rozciągać się na 100% całkowitej szerokości ekranu.

1. tytuł;
2. Opis
3. Przycisk dewelopera
4. Przycisk Google Play
5. Plansza dolna
6. Siatka w tle

tytuł;

Tekst	Wybierz, jak chcesz zapłacić
Czcionka	Roboto (dotyczy wszystkich czcionek)
Rozmiar czcionki	18sp
Kolor czcionki	#202124

Opis

Tekst	Wybierz, kto zabezpieczy i przetworzy Twoją płatność oraz zapewni 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	Połącz
Rozmiar czcionki	14sp
Dekoracje	Podkreślenie
Kolor czcionki	#5F6368

Przycisk dewelopera

1. Ikona aplikacji
2. Nazwa aplikacji
3. Ikony form płatności

Ikony form płatności

1. Maksymalna liczba ikon formy płatności
2. Nazwy form płatności zamiast ikon

Skaluj do szerokości ekranu

3. Szerokość 360 dp
4. Szerokość 480 dp

Kontener przycisku

Kontur	1 pkt, #DADCE0
Promień narożnika	4dp
Wypełnienie wewnętrzne	16dp, 16dp, 16dp, 16dp,

Ikona aplikacji

Wymiary

Wysokość: 24 dp, szerokość: zmienna

tytuł;

Tekst	{Nazwa aplikacji}
Rozmiar czcionki	14sp
Kolor czcionki	#202124

Formy płatności

Wymiary	32 dp x 20 dp
Promień narożnika	2
Ilość	Maksymalnie 5, jeśli jest ich więcej, wyświetli się dodatkowy wskaźnik
Dodatkowy wskaźnik	+ więcej (na wąskich ekranach następuje przejście do następnego wiersza)
Rozmiar czcionki	12sp
Kolor czcionki	#5F6368

Przycisk Google Play

1. Ikona
2. tytuł;
3. Akceptowane formy płatności
4. Dodatkowy wskaźnik

Kontener przycisku

Kontur	1 pkt, #DADCE0
Promień narożnika	4dp
Wypełnienie wewnętrzne	16dp, 16dp, 16dp, 16dp,

Ikona aplikacji

Komponent z obrazem	Pryzmat Google Play
Wymiary	24 dp x 24 dp

tytuł;

Tekst	Google Play,
Rozmiar czcionki	14sp
Kolor czcionki	#202124

Formy płatności

Komponent z obrazem	Link
Dodatkowy wskaźnik	+więcej
Rozmiar czcionki	12sp
Kolor czcionki	#5F6368

Poziomo

Przykład: w widoku poziomym plansza dolna jest szersza niż w orientacji pionowej, ale jej wygląd i funkcje są takie same.

Plansza dolna	Szerokość: maksymalnie 500 dp, Wypełnienie wewnętrzne: 24 dp
tytuł;	Tak samo jak w widoku pionowym
przekaz,	Tak samo jak w widoku pionowym
Przyciski	Tak samo jak w widoku pionowym