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
Przycisku Dodaj do Portfela Google używaj zawsze, 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 będą mogli 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 przekierowywania użytkownika do portfela, aby mógł wyświetlić wcześniej zapisaną kartę. Można go używać w aplikacjach, witrynach i 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łasnej 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 usługi 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 internetu, 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żyj 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 używaj innych napisów na przyciskach.
| 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łnowymiarowy. |
Pusty obszar
Zawsze zostawiaj pusty obszar o minimalnej szerokości 8 dp wokół przycisku Dodaj do Portfela Google. Postaraj się, 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: używaj dostarczonych zlokalizowanych 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. Aby ułatwić sobie projektowanie interfejsu, zapoznaj się z tymi sprawdzonymi metodami.
Bilety na wydarzenia
Wyświetlaj przycisk Dodaj do Portfela Google na końcu procesu zakupów lub na ekranach potwierdzenia w aplikacji, na stronach w witrynie i w e-mailach. Zalecamy umieszczenie przycisku Dodaj do Portfela Google w miejscach, w których użytkownicy uzyskują dostęp do swoich biletów w aplikacji lub witrynie.
Używanie nazwy usługi Portfel Google w wiadomościach tekstowych
Możesz wysłać użytkownikowi wiadomość tekstową, by poinformować go, że bilet na wydarzenie został zapisany 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 przycisk Dodaj do Portfela Google.
Wytyczne dotyczące tworzenia kart
Aby mieć pewność, że karty będą wyglądać dobrze i działać prawidłowo, przestrzegaj tych wytycznych dotyczących limitów znaków, powiadomień, kolorów tła i obrazów głównych.
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.
Unikaj stref „Żywe” o wysokim nasyceniu (np. neonowa zieleń #00FF00 lub elektryczny cyjan #00FFFF). Takie kolory powodują silne zmęczenie oczu i sprawiają, że tekst „rozmazuje się” lub znika na tle. Zamiast tego użyj jednego z zalecanych kolorów.
Zalecane kolory
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
Banery powitalne
Pole class.heroImage wyświetla się jako obraz o pełnej szerokości pod polami danych karty.
Rozważ dodanie obrazu, jeśli jeszcze go nie masz. Jeśli masz obraz, upewnij się, że jest on zgodny ze specyfikacjami podanymi poniżej. Jeśli nie wybierzesz obrazu, wyświetlimy obraz zastępczy kategorii karty.
Poniżej znajdziesz zalecenia dotyczące banerów powitalnych w interfejsie:
| Wytyczna | Opis | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Preferowany typ pliku | PNG Jeśli chcesz, aby kolor tła karty był widoczny, użyj przezroczystego pliku PNG. | ||||||||
| Zalecany rozmiar | 1032 x 812 pikseli | ||||||||
| Format obrazu | 1032:812 (w przybliżeniu 5:4) | ||||||||
| Zalecenia i ograniczenia |
|
Treść
Tytuły, podtytuły, etykiety pól i dane w polach: aby zwiększyć zrozumienie użytkowników, tytuły i inne pola powinny być jak najkrótsze. W przypadku języka angielskiego obowiązują te limity znaków, ale zostaną one przetłumaczone na inne języki, co spowoduje różnice w sposobie korzystania z usługi na różnych urządzeniach i w różnych regionach. W razie wątpliwości uprość treść, zachowując najważniejsze informacje.
| Pole | Limit |
|---|---|
| Etykieta tytułu | < 47 znaków |
| Etykieta podtytułu | < 88 znaków |
| Etykieta pola lub tytułu (np. Data, Opis, Klasa, Imię i nazwisko pasażera) | < 20 znaków |
| Etykieta danych z pola (np.19 października 2026 r., Economy Plus) | < 15 znaków |
Aby zapewnić czytelność, ogranicz dane do 2 pól w wierszu i maksymalnie 3 wierszy, jeśli to możliwe.
Powiadomienia
| Pole | Limit |
|---|---|
| Tytuł | < 29 znaków |
| Zwinięta treść | < 40 znaków |
| Rozwinięta treść | < 80 characters |
Zalecamy przestrzeganie limitów znaków, aby zapobiec obcinaniu tekstu w przypadku użytkowników korzystających z małych urządzeń lub większych rozmiarów czcionek. Więcej informacji znajdziesz w artykule Powiadomienia | Mobile | Android Developers.
Logo
Wytyczne dotyczące obrazu 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:| Wytyczna | 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 musi 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 okresowych 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:
| Wytyczna | Opis |
|---|---|
| Typ pliku | Przezroczysty plik PNG |
| Zalecany rozmiar | 1280 × 400 pikseli |
| Minimalny rozmiar |
400 pikseli wysokości, szerokość jest proporcjonalna (więcej informacji znajdziesz w sekcji dotyczącej współczynnika proporcji). Używaj szerokich, prostokątnych obrazów. |
| Format obrazu |
16:5 
|
| Kolor |
W przypadku kart z ciemnym tłem używaj bardzo jasnego koloru o wysokim kontraście (np. białego). W przypadku kart z jasnym tłem używaj bardzo ciemnego koloru o wysokim kontraście (np. czarnego). 
|
Dodatkowe obrazy
Pole *.imageModulesData.mainImage w klasie lub obiekcie wyświetla się jako obraz o pełnej szerokości na karcie poniżej banera powitalnego. Używaj tylko wtedy, gdy karta wymaga dodatkowego obrazu, aby użytkownik mógł lepiej ją zrozumieć.
Dodatkowe wytyczne dotyczące obrazów
Poniżej znajdziesz zalecenia dotyczące dodatkowych obrazów w interfejsie:
| Wytyczna | 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. |
| Rozmiar interfejsu |
Pełna szerokość szablonu i proporcjonalna wysokość. 
|
Obrazy kodów kreskowych
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świetlania (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ś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 Portfel Google.
| Wytyczna | 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, 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 Portfelu Google. Aby sprawdzić, jak renderuje się zawartość, przeczytaj sekcje dotyczące projektowania poszczególnych kategorii kart.