Wskazówki dotyczące marki

Z tej części dokumentu dowiesz się, jak tworzyć obrazy i inne elementy interfejsu, aby wyglądały dobrze w aplikacji Google Pay.

Banery powitalne

Pole class.heroImage wyświetla się jako baner o pełnej szerokości w części głównej karty.

Wytyczne dotyczące banerów powitalnych

Poniżej znajdziesz zalecenia dotyczące banerów powitalnych w interfejsie:

Wytyczna Przykład
Preferowany typ pliku: PNG.
Zalecany rozmiar: 1032 x 336 pikseli. Używaj szerokich, prostokątnych obrazów. Aby uzyskać jak najlepszy efekt, użyj obrazu z kolorowym tłem.
Współczynnik proporcji: 3:1 lub szerszy.
Szerokość wyświetlanego obrazu dostosowuje się do szerokości karty, a wysokość jest skalowana proporcjonalnie.

Obrazy o pełnej szerokości

Pole *.imageModulesData.mainImage w klasie lub obiekcie wyświetla się jako obraz o pełnej szerokości na rozwiniętej stronie programu lojalnościowego lub oferty specjalnej.

Wytyczne dotyczące obrazów o pełnej szerokości

Poniżej znajdziesz zalecenia dotyczące obrazów o pełnej szerokości w interfejsie:

Wytyczna Przykład
Preferowany typ pliku: PNG.
Minimalna szerokość: 1860 pikseli, zmienna wysokość. Używaj szerokich, prostokątnych obrazów. Aby uzyskać jak najlepszy efekt, użyj obrazu z kolorowym tłem.
Zmienny współczynnik proporcji.
Szerokość wyświetlanego obrazu dostosowuje się do szerokości szablonu (karty z białym tłem), a wysokość jest skalowana proporcjonalnie.
Użyj tego samego schematu kolorów, który występuje na obrazie logo.

Obrazy kodu kreskowego

Niektóre kategorie dopuszczają zamieszczanie obrazów nad kodem kreskowym i pod nim.

Obrazy nad kodem kreskowym

Poniżej znajdziesz zalecenia dotyczące obrazów nad kodem kreskowym w interfejsie:

Wytyczna Przykład
Preferowany typ pliku: PNG.  
Maksymalna wysokość: 20 dp (przy maksymalnym współczynniku proporcji). W przypadku dwóch obrazów zalecany rozmiar to 80 pikseli (wysokość) i 80–780 pikseli (szerokość). Dzięki temu mogą być wyświetlane obok siebie. Jeśli jeden obraz jest kwadratowy, a drugi prostokątny, ich wymiary powinny wynosić odpowiednio 80 x 80 pikseli i 780 x 80 pikseli.
Współczynnik proporcji nie ma limitu. Aby uzyskać maksymalną wysokość i szerokość 20 dp jednego obrazu, użyj współczynnika proporcji 20:1. Jeśli chcesz zamieścić tylko jeden obraz nad kodem kreskowym, wybierz pełną szerokość (bez dopełnienia). Obraz powinien mieć rozmiar 1600 x 80 pikseli.
Maksymalny rozmiar jednego wyświetlanego obrazu to 20 dp (wysokość) i 400 dp (szerokość).  

Obraz pod kodem kreskowym

Poniżej znajdziesz zalecenia dotyczące obrazu pod kodem kreskowym w interfejsie:

Wytyczna Przykład
Preferowany typ pliku: PNG.  
Maksymalna wysokość: 20 dp (przy maksymalnym współczynniku proporcji). Zalecany rozmiar: 80 pikseli (wysokość) i 80–1600 pikseli (szerokość). Kwadrat: 80 x 80 pikseli. Prostokąt: 1600 x 80 pikseli
Współczynnik proporcji nie ma limitu. Aby uzyskać maksymalną wysokość i szerokość 20 dp, użyj współczynnika proporcji 20:1. Jeśli chcesz zamieścić obraz o pełnej szerokości (bez dopełnienia), jego wymiary powinny wynosić 1600 x 80 pikseli.
Maksymalny rozmiar wyświetlanego obrazu to 20 dp (wysokość) i 400 dp (szerokość).  

Moduły

Moduł określa grupę pól w sekcji szablonu. W poniższej tabeli znajdziesz wytyczne dotyczące tego, ile modułów powinno znajdować się w klasach i obiektach, aby karty były wyświetlane poprawnie w aplikacji Google Pay.

Wytyczna Przykład
Użyj tylko jednego imageModulesData w klasie lub obiektach, które tworzysz.
Użyj maksymalnie dwóch infoModuleData w klasie lub obiektach, które tworzysz. Element infoModuleData może określać informacje o koncie użytkownika, takie jak nazwa użytkownika lub numer subskrypcji.
Możesz użyć maksymalnie czterech identyfikatorów URI linksModuleData w klasie lub obiektach, które tworzysz. Klasa może zawierać dwa identyfikatory URI linksModuleData: identyfikator witryny i numeru telefonu centrum pomocy. Obiekt może zawierać dwa identyfikatory URI linksModuleData: identyfikator konta użytkownika i pobliskich lokalizacji.
Użyj maksymalnie dwóch pól textModulesData w klasie i obiektach, które tworzysz. Klasa może zawierać jeden obiekt textModulesData z informacjami o programie. Obiekt może zawierać jeden obiekt textModulesData z informacjami o koncie użytkownika.

infoModuleData

InfoModuleData zawiera informacje o użytkowniku oraz informacje wybrane przez użytkownika. Wyświetla się w widoku rozwiniętym. W tym module można zapisać takie dane jak data ważności, stan punktów na drugim koncie lub stan środków przedpłaconych.

linksModuleData

Moduł linków zawiera identyfikatory URI stron internetowych, numerów telefonów i adresów e-mail. Poniżej znajdziesz zalecenia dotyczące modułu linków w interfejsie:

Wytyczna Przykład
Aby podać identyfikator URI witryny lub lokalizacji w Mapach Google, użyj prefiksu http:. Dzięki temu użytkownik może kliknąć link i otworzyć witrynę albo zobaczyć lokalizację w Mapach Google. Prefiks powoduje też wyświetlenie ikony linku lub mapy przed opisem na Twojej karcie. 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/pay/passes/'
Aby podać numer telefonu, użyj prefiksu tel:. Dzięki temu użytkownik może kliknąć link i wybrać numer. Prefiks powoduje też wyświetlenie ikony telefonu przed opisem na Twojej karcie. 'uri': 'tel:6505555555'
Aby podać adres e-mail, użyj prefiksu mailto:. Dzięki temu użytkownik może kliknąć link i wysłać e-maila na podany adres. Prefiks powoduje też wyświetlenie ikony e-maila przed opisem na Twojej karcie. 'uri': 'mailto:jonsmith@email.com'

Nagłówki, etykiety i nazwy

Pierwsze litery wyrazów w nagłówkach, na etykietach i w nazwach powinny być pisane jak nazwy własne (wielka litera na początku każdego wyrazu).

Zasady dotyczące treści

Zawartość każdego pola na karcie musi być zgodna z polityką treści Google Payments. Zawartość witryn przywoływanych w klasie również musi być z nią zgodna.

Przycisk Zapisz w Google Pay

Wygląd

Aby zmienić wysokość i szerokość przycisków Zapisz w Google Pay, użyj pól height i size tagu HTML g:savetoandroidpay. Jeśli wybierzesz textsize=large, rozmiar tekstu i przycisków znacznie się zwiększy. Może to być przydatne na urządzeniach mobilnych lub w przypadku specjalnych wymagań interfejsu.

Aby ustawić kolor przycisków, użyj theme. W poniższej tabeli zobaczysz, jak te ustawienia wpływają na wyświetlany przycisk Zapisz w Google Pay.

Ustawienie Efekt
theme/dark
theme/light

Miejsce docelowe

Aby umożliwić użytkownikom zapisywanie i wykorzystywanie Twoich kart oraz interakcję z nimi, zalecamy umieszczenie przycisków lub linków Zapisz w Google Pay (S2GP) we wszystkich procesach kontekstowych. Zwykle przycisk powinien znajdować się obok przycisków podobnych poleceń, takich jak Drukuj ofertę.

Poniżej znajdziesz metody integracji przycisku Zapisz w Google Pay z procesami, które sprawdziły się u niektórych partnerów.

Karty lojalnościowe

Spróbuj umieścić przycisk Zapisz w Google Pay w tym momencie płatności, kiedy użytkownik widzi numer Twojego konta lojalnościowego albo dane Twojej karty lojalnościowej w Twojej aplikacji na Androida lub witrynie. W przypadku niektórych partnerów dobrym rozwiązaniem okazało się pokazanie przycisku użytkownikom po tym, jak zalogowali lub zarejestrowali się w aplikacji.

Karty podarunkowe

Rozważ umieszczanie przycisku Zapisz w Google Pay na ekranach potwierdzenia pojawiających się po tym, jak użytkownik kupi kartę podarunkową w Twojej aplikacji lub witrynie. Możesz też umieścić go w e-mailu lub SMS-ie albo na ekranie potwierdzenia u odbiorcy karty podarunkowej.

Oferty specjalne

Możesz umieścić przycisk Zapisz w Google Pay w takim miejscu witryny lub aplikacji, w którym użytkownik otwiera ofertę, albo w e-mailu lub SMS-ie dotyczącym oferty (przy użyciu linków zapisu).

Bilety

Możesz umieścić przycisk na końcu procesu zakupów w miejscu, w którym użytkownik kupuje bilet w Twojej witrynie lub aplikacji, albo w e-mailu lub SMS-ie z potwierdzeniem zakupu. Spróbuj umieścić przycisk Zapisz w Google Pay w takim miejscu aplikacji lub witryny, w którym użytkownik otwiera bilet.

Karty pokładowe

Możesz umieścić przycisk na końcu procedury odprawy w witrynie na komórki i komputery lub w aplikacji mobilnej. Możesz go też umieścić na ekranie witryny lub aplikacji, na którym użytkownik widzi kartę pokładową, albo w e-mailu lub SMS-ie z potwierdzeniem po odprawie.

Pobierz

Jeśli umożliwiasz użytkownikom pobranie karty lojalnościowej, karty podarunkowej lub oferty za pomocą linku, umieść przycisk Google Pay przed precyzyjnym linkiem, aby zapewnić spójny wygląd. Kliknij Pobierz zasoby, aby pobrać przyciski Google Pay, które są dostępne w wielu językach jako pliki EPS lub SVG:

Pobierz zasoby – EPS Pobierz zasoby – SVG

Umieszczanie danych o platformach partnerów

Aby umożliwić użytkownikom dostęp do Twojej rozbudowanej aplikacji lub witryny z informacjami o karcie, dodaj precyzyjny link aplikacji lub witryny we właściwości linksModuleData.* klasy lub obiektu karty. Dzięki temu użytkownik będzie mógł otworzyć Twoją platformę z karty w Google Pay. Aby sprawdzić, jak renderuje się zawartość, przeczytaj sekcje dotyczące projektowania poszczególnych kategorii kart.