Przegląd
Program pilotażowy systemu rozliczeniowego opartego na wyborze użytkownika umożliwia deweloperom testowanie oferowania rozliczeń alternatywnych oprócz systemu rozliczeniowego Google Play. Celem programu jest przeanalizowanie sposobów oferowania tego wyboru użytkownikom. Te wskazówki mają na celu zapewnienie użytkownikom spójnej obsługi i podjęcie świadomej decyzji.
Jeśli bierzesz udział w programie pilotażowym, musisz wyświetlić ekran z informacjami i oddzielny ekran z opcjami płatności. Ekran z informacjami powinien być widoczny tylko dla każdego użytkownika przy pierwszym zakupie. Ekran z informacjami o płatnościach musi być wyświetlany przed każdym zakupem. Wiadomości widoczne dla użytkowników i specyfikacje interfejsu na obu ekranach muszą być implementowane zgodnie z poniższymi wytycznymi.
Wybierz kraj i język
Wybierz kraj i język użytkowników, aby wyświetlić odpowiednie ciągi tekstowe UI w specyfikacjach projektowych poniżej.
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 musi być widoczny dla użytkowników na początku pierwszego zakupu po dodaniu alternatywnego systemu rozliczeniowego. Ta wiadomość nie musi być wyświetlana przy kolejnych zakupach tego samego użytkownika. Wyświetlaj ekran z informacjami natychmiast po tym, jak użytkownik wykona wyraźne działanie mające na celu zainicjowanie zakupu.
Kiedy wyświetlać cenę
Cena zakupu musi być widoczna i zrozumiała dla użytkowników, zanim zostaną im przekierowani na ekran informacyjny lub ekran wyboru formy płatności.
Jak wyświetlać
Ekran z informacjami musi być wyświetlany w formie modalnej planszy dolnej. Modalne okno dolne przypomina okno modalne, które pojawia się u dołu ekranu i pozostaje przypięte na dole. Jest umieszczony w górę nad wszystkimi elementami interfejsu na ekranie bazowym. Podstawowy ekran jest ukryty za ciemnym panelem, co oznacza, ż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ę wyświetlać, gdy użytkownik kliknie przycisk lub inny element interfejsu w aplikacji, który inicjuje zakup. Na ekranie informacyjnym użytkownik może wykonać 3 czynności:
Kontynuuj
Dotknięcie przycisku „Dalej” zamyka ekran z informacjami i otwiera ekran wyboru metody 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: gdy użytkownik kliknie, aby kupić coś w Twojej aplikacji, spowoduje to wyświetlenie ekranu z informacjami.
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 tekst oraz elementy interfejsu zdefiniowane w tych wytycznych. Nie umieszczaj na tym ekranie dodatkowego tekstu ani obrazów, ale możesz umieścić na innych ekranach dodatkowy tekst i obrazy.
- tytuł;
- Tekst 1
- Tekst 2
- Przyciski
- Plansza dolna
- Siatka w tle
tytuł;
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Czcionka | Roboto (dotyczy wszystkich czcionek) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #202124 |
Tekst 1
Służy do wyróżniania kluczowych punktów, które są uznawane za informacje kluczowe.
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Wysokość wiersza | 20 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 |
Tekst 2
Służy do zapisywania informacji dodatkowych, które mają niższy priorytet.
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Wysokość wiersza | 16 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 |
Przycisk 1
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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, U dołu: 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 metody płatności użytkownicy widzą 2 opcje płatności, za pomocą których mogą sfinalizować zakup. Aby ułatwić użytkownikom podjęcie świadomej decyzji, każda opcja usługi rozliczeniowej zawiera również dostępne formy płatności. Gdy użytkownik dokona wyboru, będzie mógł kontynuować zakup przy użyciu tego systemu rozliczeniowego.
Kiedy wyświetlać
Jeśli użytkownik widział już ekran z informacjami podczas poprzedniego zakupu, ekran wyboru sposobu rozliczania 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 musi być wyświetlany w modalnej planszy dolnej i musi być zgodny z tymi samymi specyfikacjami co ekran z informacjami.
Równa reprezentacja wizualna
Przyciski alternatywnego systemu rozliczeniowego i systemu rozliczeniowego Google Play powinny być przedstawiane w sprawiedliwy i równy sposób. Dotyczy to m.in. jednakowych rozmiarów przycisków, rozmiaru i stylu tekstu, elementów dotykowych i rozmiarów ikon. Nie dodawaj dodatkowego tekstu, obrazów ani zmian stylu, które nie zostały zdefiniowane w tych wskazówkach.
Przykład: gdy użytkownik kliknie, aby dokonać zakupu w aplikacji, spowoduje to wyświetlenie ekranu wyboru sposobu płatności tylko wtedy, gdy podczas poprzedniego zakupu wyświetlił się ekran z informacjami.
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 muszą 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 masz możliwość umieszczenia dodatkowego tekstu i obrazów na innych ekranach należących do Ciebie.
Zasoby wizualne w Google Play i ikony płatności są dostępne pod poniższymi linkami.
Przykład: w widoku pionowym arkusz dolny powinien rozciągać się na 100% całkowitej szerokości ekranu.
- tytuł;
- Opis
- Przycisk dewelopera
- Przycisk Google Play
- Plansza dolna
- Siatka w tle
tytuł;
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Czcionka | Roboto (dotyczy wszystkich czcionek) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 18sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #202124 |
Opis
Tekst |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Link tekstowy |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Miejsce docelowe linku | linki do Centrum pomocy Google Play. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 14sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dekoracje | Podkreślenie | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 |
Przycisk dewelopera
- Ikona aplikacji
- Nazwa aplikacji
- Ikony form płatności
- Dodatkowy wskaźnik
- Maksymalna liczba ikon formy płatności
- Szerokość 360 dp
- Szerokość 480 dp
Ikony form płatności
Skaluj do szerokości ekranu
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 | Wysokość: 32 dp, szerokość: 20 dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Promień narożnika | 2dp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Ilość | Maksymalnie 5, jeśli jest ich więcej, wyświetli się dodatkowy wskaźnik | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dodatkowy wskaźnik |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 |
Przycisk Google Play
- Ikona
- tytuł;
- Akceptowane formy płatności
- 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 | Wysokość: 24 dp, szerokość: 24 dp |
tytuł;
Tekst | Google Play, |
Rozmiar czcionki | 14sp |
Kolor czcionki | #202124 |
Formy płatności
Komponent z obrazem | Link | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Dodatkowy wskaźnik |
Wybierz kraj i język
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rozmiar czcionki | 12sp | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Kolor czcionki | #5F6368 |
Poziomo
Przykład: w widoku poziomym plansza dolna jest szersza niż w widoku pionowym, 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 | Tak samo jak w widoku pionowym |
Więcej informacji o programie pilotażowym systemu rozliczeniowego opartego na wyborze użytkownika oraz odpowiedzi na najczęstsze pytania znajdziesz w Centrum pomocy.