Jeśli tworzysz aplikację dla użytkowników w Rosji, używaj przycisków „Zapisz na telefonie”, ponieważ Portfel Google nie jest dostępny w tych krajach. Zapoznaj się z odpowiednimi komponentami i wytycznymi. Jeśli tworzysz aplikację dla użytkowników spoza Rosji, zaktualizuj przycisk Dodaj do Portfela Google, pobierając poniższe komponenty.
Z tej części dokumentu dowiesz się, jak tworzyć obrazy i inne elementy interfejsu, aby wyglądały dobrze w aplikacji Portfel Google.
Zasoby
Przycisk Dodaj do Portfela Google
Przycisk Dodaj do Portfela Google jest używany, gdy chcesz skierować użytkowników do zapisania karty z Twojej aplikacji lub witryny w ich portfelu. Przycisk Dodaj do Portfela Google musi wywoływać jeden z procesów Google Wallet API. Będą one powodować wyświetlenie aplikacji Portfel Google, w której użytkownicy mogą postępować zgodnie z instrukcjami, aby zapisać karty na urządzeniu z Androidem i na koncie Google. Tego przycisku można używać w aplikacjach, witrynach lub e-mailach.
Przyciski Dodaj do Portfela Google są dostępne w formatach Android XML, SVG i PNG.
Pobierz zasoby – Android XML Pobierz zasoby – SVG Pobierz zasoby – PNGPrzycisk Wyświetl w Portfelu Google
Przycisk Wyświetl w Portfelu Google służy do przekierowania użytkownika do portfela, aby mógł wyświetlić wcześniej zapisaną kartę. Tego przycisku można używać w aplikacjach, witrynach lub e-mailach.
Przyciski Wyświetl w Portfelu Google są dostępne w formatach SVG i PNG.
Pobierz zasoby – SVG Pobierz zasoby – PNGWszystkie przyciski wyświetlane w witrynie, aplikacji lub e-mailach muszą być zgodne z wytycznymi dotyczącymi marki opisanymi na tej stronie. Przykłady tych wytycznych to m.in.:
- rozmiar ustalany względem innych podobnych przycisków lub elementów na stronie;
- Nie można zmieniać kształtu ani koloru przycisków.
- Pusty obszar
Zlokalizowane przyciski
Przetłumaczone przyciski Portfela Google są dostępne na wszystkich rynkach, na których można korzystać z Portfela. Jeśli tworzysz aplikację dla użytkowników z tych rynków, zawsze używaj przycisków, do których linki podajemy powyżej. Nie twórz własnych wersji przycisków. Jeśli w Twoim kraju nie jest dostępna zlokalizowana wersja przycisku, użyj angielskiej wersji przycisku.
Przyciski Dodaj do Portfela Google są dostępne w językach: albańskim, arabskim, armeńskim, azerskim, bośniackim, bułgarskim, katalońskim, chińskim (Hongkong), chińskim (tradycyjnym), chorwackim, czeskim, duńskim, holenderskim, angielskim (Australia, Indie, Kanada, RPA, Singapur, Stany Zjednoczone, Wielka Brytania), estońskim, filipińskim, fińskim, francuskim (Francja), francuskim (Kanada), gruzińskim, greckim, hebrajskim, hiszpańskim (Hiszpania), hiszpańskim (Ameryka Łacińska), indonezyjskim, islandzkim, japońskim, kazachskim, kirgiskim, litewskim, łotewskim, macedońskim, malajskim, niemieckim, norweskim, polskim, portugalskim (Brazylia), portugalskim (Portugalia), rosyjskim (Białoruś), rumuńskim, serbskim, słowackim, słoweńskim, szwedzkim, tajskim, tureckim, ukraińskim, uzbeckim i wietnamskim.
Zlokalizowana nazwa
Aby zapewnić użytkownikom wygodę, nazwa produktu Portfel Google jest przetłumaczona na wybranych rynkach. Jeśli tworzysz aplikację dla użytkowników w tych krajach, zawsze używaj poniższej nazwy w lokalnej wersji językowej w przypadku stron internetowych, e-maili i materiałów drukowanych. Nie twórz własnej zlokalizowanej wersji nazwy „Portfel Google”. Jeśli Twojego rynku nie ma na liście poniżej, używaj nazwy „Portfel Google” w języku angielskim.
| Kraj | Nazwa |
|---|---|
| Białoruś | Google Кошелек |
| Brazylia | Carteira do Google |
| Chile | Billetera de Google |
| Czechy | Peněženka Google |
| Grecja | Πορτοφόλι Google |
| Hongkong | Google 錢包 |
| Litwa | Google Piniginė |
| Polska | Portfel Google |
| Portugalia | Carteira da Google |
| Rumunia | Portofel Google |
| Słowacja | Peňaženka Google |
| Tajwan | Google 錢包 |
| Turcja | Google Cüzdan |
| Zjednoczone Emiraty Arabskie | محفظة Google |
| Ukraina | Google Гаманець |
|
Stany Zjednoczone (hiszpański)
*Używaj tej nazwy w Stanach Zjednoczonych, jeśli interfejs jest w języku hiszpańskim |
Billetera de Google |
Rozmiar
Dostosuj wysokość i szerokość przycisku Dodaj do Portfela Google, aby pasował do układu graficznego. Jeśli na stronie znajdują się inne przyciski, przycisk Dodaj do Portfela Google musi mieć taki sam rozmiar jak reszta przycisków lub być od nich większy. Przycisk Dodaj do Portfela Google nie może być mniejszy niż inne przyciski.
Styl
Przyciski Dodaj do Portfela Google są dostępne w 2 wariantach: podstawowym i skróconym. Przycisk Dodaj do Portfela Google jest dostępny tylko w kolorze czarnym. Dostępne są zlokalizowane wersje przycisku. Nie twórz przycisków z własnym zlokalizowanym tekstem.
| Podstawowe | Wąski |
|---|---|
|
|
| Używaj przycisku głównego na białym i jasnym tle. | Użyj skróconego przycisku, jeśli nie ma wystarczająco dużo miejsca na przycisk podstawowy lub pełnej szerokości. |
Pusty obszar
Wokół przycisku Dodaj do Portfela Google zawsze zostawiaj pusty obszar o minimalnej szerokości 8 dp. Zadbaj o to, by nie nachodziły na niego grafika ani tekst.
Minimalna wysokość
Wysokość wszystkich przycisków Dodaj do Portfela Google musi wynosić co najmniej 48 dp.
Zalecenia i ograniczenia
| Dos | Nie |
|---|---|
| Tak: korzystaj tylko z przycisków Dodaj do Portfela Google dostarczonych przez Google. | Nie: twórz własnych przycisków Dodaj do Portfela Google oraz w żaden sposób nie zmieniaj czcionki, koloru, promienia przycisku ani jego wypełnienia. |
| Tak: korzystaj z tego samego stylu przycisków w całej witrynie. | Nie: przyciski Dodaj do Portfela Google nie mogą być mniejsze niż inne przyciski. |
| Tak: zadbaj o to, by rozmiar przycisków Dodaj do Portfela Google był taki sam jak rozmiar innych przycisków lub większy. | Nie: nie zmieniaj koloru przycisku. |
| Tak: zmieniając rozmiar przycisku Dodaj do Portfela Google, zachowaj proporcje. | Nie: nie skaluj swobodnie przycisku. |
| Tak: korzystaj z dostarczonej zlokalizowanej wersji przycisków. | Nie: nie twórz własnej zlokalizowanej wersji przycisku. |
Sprawdzone metody umieszczania przycisku
Wyświetlaj przycisk Dodaj do Portfela Google na ekranach potwierdzenia w aplikacji, na stronach w witrynie i w e-mailach. Podczas projektowania interfejsu użytkownika kieruj się tymi sprawdzonymi metodami.
Standardowe dokumenty
Wyświetlaj przycisk Dodaj do Portfela Google na ekranach potwierdzenia w aplikacji, na stronach w witrynie i w e-mailach. Warto też umieścić przycisk Dodaj do Portfela Google w miejscach, w których użytkownicy uzyskują dostęp do swoich kart w aplikacji lub witrynie.
Używanie nazwy produktu Portfel Google w wiadomościach tekstowych
Możesz użyć tekstu, by poinformować użytkownika, że jego karta ogólna została zapisana na jego urządzeniu.
Zapisuj „G” i „W” wielką literą
Gdy odnosisz się do Portfela Google, litery „G” i „W” zawsze trzeba zapisywać wielką literą, a resztę tekstu – małymi literami. Nie zapisuj wielkimi literami całej nazwy „Portfel Google”, chyba że będzie to pasować do typografii Twojego interfejsu użytkownika.
Nie skracaj nazwy Portfel Google
Wyrazy „Google” i „Wallet” zawsze pisz w całości.
Zachowaj spójność ze stylem interfejsu użytkownika
Nazwa „Portfel Google” powinna być zapisana taką samą czcionką jak pozostały tekst w Twoim interfejsie i mieć taki sam styl typograficzny. Nie naśladuj typografii Google.
Zawsze używaj zlokalizowanej wersji nazwy „Portfel Google”.
Zawsze zapisuj „Portfel Google” w podanej zlokalizowanej wersji.
Projektowanie
Aby zmienić wysokość i szerokość przycisków Dodaj do Portfela Google, użyj pól height i size g:savetoandroidpaytagu HTML. Użyj specyfikacji textsize=large, aby znacznie zwiększyć rozmiar tekstu i przycisków w przypadku implementacji na urządzenia mobilne 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 Dodaj do Portfela Google.
Logo
Wytyczne dotyczące obrazów logo
Na Twoje logo wyświetlane w Portfelu Google jest nakładana maska w okrągłym kształcie.
Poniżej znajdziesz zalecenia dotyczące obrazów logo w interfejsie:| Wytyczne | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Minimalny rozmiar | 660 x 660 pikseli |
| Współczynnik proporcji obrazu | 1:1 |
| Współczynnik proporcji grafiki | 1:1 |
| Rzeczywisty rozmiar piksela | Skalowanie do rozmiaru urządzenia |
| Okrągła maska logo |
Twoje logo jest maskowane, aby dopasować je do okrągłego kształtu. Logo musi mieścić się w bezpiecznym obszarze. Logo nie może być wcześniej zamaskowane. Użyj kwadratowego logo na kolorowym tle z pełnym spadem. Logo powinno mieć 15-procentowy margines, aby po zamaskowaniu nie zostało przycięte. 
|
Na Twoje logo wyświetlane w Portfelu Google jest nakładana maska w okrągłym kształcie.
Wytyczne dotyczące obrazu szerokiego logo
Obrazy z szerokim logo są obsługiwane w przypadku biletów na wydarzenia, kart pokładowych, biletów transportu publicznego z kodem QR, kart lojalnościowych, ofert, kart podarunkowych, ogólnych kart i ogólnych kart prywatnych. Poniżej znajdziesz zalecenia dotyczące szerokich obrazów logo w interfejsie:
| Wytyczne | Opis |
|---|---|
| Preferowany typ pliku |
PNG Aby uzyskać jak najlepszy efekt, użyj obrazu z kolorem tła (zalecamy użycie tego samego koloru co tło karty). |
| Zalecany rozmiar | 1280 × 400 pikseli |
| Minimalny rozmiar | 400 pikseli wysokości, szerokość jest proporcjonalna (więcej informacji znajdziesz w sekcji dotyczącej zalecanego formatu obrazu).
Używaj szerokich, prostokątnych obrazów. |
| Zalecany format obrazu |
Jeśli obraz nie ma zalecanego formatu, jego rozmiar zostanie zmieniony tak, aby pasował do formatu podanych przestrzeni nagłówka. Diagram poniżej pokazuje, jak komponent z obrazem zostanie przeskalowany w zależności od formatu obrazu. 
|
Kolor tła karty
Kolor tła możesz ustawić w polu hexBackgroundColor. Jeśli nie ustawisz wartości, algorytm przeanalizuje logo, znajdzie dominujący kolor i użyje go jako koloru tła.
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:
| Wytyczne | Opis |
|---|---|
| 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. |
| Format obrazu | 3:1 lub szerszy |
| Rozmiar interfejsu |
Pełna szerokość karty i proporcjonalna wysokość. 
|
Obrazy o pełnej szerokości
Pole *.imageModulesData.mainImage w klasie lub obiekcie wyświetla się jako obraz o pełnej szerokości na karcie.
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:
| Wytyczne | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Minimalny rozmiar |
Szerokość: 1860 pikseli, zmienna wysokość. Używaj szerokich, prostokątnych obrazów. Aby uzyskać jak najlepszy efekt, użyj obrazu z kolorowym tłem. |
| Format obrazu | Zmienna |
| Rozmiar interfejsu |
Pełna szerokość szablonu i proporcjonalna wysokość.
|
| Użyj tego samego schematu kolorów, którego używasz w przypadku 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 | Opis |
|---|---|
| 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. |
| Format obrazu |
Bez ograniczeń. 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 musi mieć wymiary 1600 x 80 pikseli. |
| Maksymalny rozmiar wyświetlanych elementów (pojedynczy obraz) | 20 dp wysokości i 400 dp szerokości. |
Obraz pod kodem kreskowym
Poniżej znajdziesz zalecenia dotyczące obrazu pod kodem kreskowym w interfejsie:
| Wytyczna | Opis |
|---|---|
| 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 muszą wynosić 1600 x 80 pikseli. |
| Maksymalny rozmiar wyświetlanych elementów 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 Portfel Google.
| Wytyczne | Opis |
|---|---|
imageModulesData
|
Użyj tylko jednego imageModulesData w klasie lub obiektach, które tworzysz.
|
infoModuleData
|
Użyj maksymalnie dwóch
Element |
linksModuleData
|
Możesz użyć maksymalnie czterech identyfikatorów URI
Klasa może zawierać dwa identyfikatory URI |
textModulesData
|
Użyj maksymalnie dwóch pól
Klasa może zawierać jeden identyfikator URI |
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 daty 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ładowe ustawienie | Przykładowy obraz |
|---|---|---|
Aby przypisać identyfikator URI do 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/wallet/'
|
|
|
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 tekstowym na 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 tekstowym na karcie.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Nagłówki, etykiety i nazwy
Nagłówki, etykiety i nazwy pisz wielką literą na początku każdego wyrazu.
Polityka treści
Zawartość każdego pola na karcie musi być zgodna z polityką treści Google Payments. Zawartość witryn, do których odwołujesz się na zajęciach, również musi być zgodna z tymi zasadami.
Umieszczanie danych o platformach partnerów
Aby umożliwić użytkownikom dostęp do Twojej rozbudowanej aplikacji lub witryny z informacjami o karcie niepłatniczej, dodaj precyzyjny link aplikacji lub witryny we właściwości linksModuleData.* klasy lub obiektu karty niepłatniczej. Dzięki temu użytkownik będzie mógł otworzyć Twoją platformę z karty, która wyświetla się w Portfelu Google. Aby sprawdzić, jak renderuje się zawartość, przeczytaj sekcje dotyczące projektowania poszczególnych kategorii kart.