Tymczasowe wytyczne dotyczące UX dla programu pilotażowego systemu rozliczeniowego opartego na wyborze użytkownika

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.

Aplikacja dewelopera

Ekran z informacjami dla użytkowników

Ekran wyboru płatności

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.

  • Pokaż wszystkie kraje
  • Wybierz kraj
  • Europejski Obszar Gospodarczy (EOG)
  • Australia
  • Brazylia
  • Indie
  • Indonezja
  • Japonia
  • Republika Południowej Afryki,
  • Stany Zjednoczone
  • Pokaż wszystkie języki
  • Wybierz język
  • afrikaans
  • asamski
  • bengalski
  • bułgarski;
  • kataloński
  • chorwacki
  • czeski
  • duński
  • duński
  • angielski
  • estoński
  • fiński
  • francuski
  • niemiecki
  • grecki
  • gudżarati
  • hindi,
  • węgierski
  • islandzki
  • Muzyka indonezyjska
  • włoski
  • japoński
  • kannada
  • łotewski
  • litewski
  • malajalam
  • marathi
  • norweski
  • orija
  • polski,
  • portugalski (Brazylia)
  • portugalski (Europa)
  • pendżabski
  • rumuński
  • słowacki
  • słoweński
  • hiszpański
  • szwedzki
  • tamilski
  • telugu
  • zulu

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.

  1. tytuł;
  2. Tekst 1
  3. Tekst 2
  4. Przyciski
  5. Plansza dolna
  6. 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.

  1. tytuł;
  2. Opis
  3. Przycisk dewelopera
  4. Przycisk Google Play
  5. Plansza dolna
  6. 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

  1. Ikona aplikacji
  2. Nazwa aplikacji
  3. Ikony form płatności
  4. Dodatkowy wskaźnik

    Ikony form płatności

  1. Maksymalna liczba ikon formy płatności
  2. 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 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

  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 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.