Jeśli tworzysz aplikacje dla użytkowników w Rosji, użyj przycisków „Zapisz na telefonie”, ponieważ Portfel Google nie jest dostępny w tym kraju. Zapoznaj się z odpowiednimi komponentami i wytycznymi. Jeśli tworzysz aplikacje dla użytkowników spoza Rosji, zaktualizuj przycisk Dodaj do Portfela Google, pobierając zasoby poniżej.
Ta sekcja dokumentacji pomoże Ci tworzyć obrazy i inne elementy interfejsu, które będą dobrze wyglądać w aplikacji Portfel Google.
Zasoby
Przycisk Dodaj do Portfela Google
Przycisk Dodaj do Portfela Google jest używany, gdy kierujesz użytkowników do zapisania karty lub dokumentu z aplikacji lub witryny w portfelu. Przycisk Dodaj do Portfela Google musi wywoływać jeden z przepływów interfejsu Google Wallet API. Te procesy wyświetlają Portfel Google (w aplikacji mobilnej lub w przeglądarce), gdzie użytkownicy mogą postępować zgodnie z instrukcjami, aby zapisać karty na urządzeniu mobilnym i koncie Google. Tego przycisku można używać w aplikacjach, witrynach i 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 precyzyjnego linkowania użytkownika do jego portfela, aby mógł wyświetlić wcześniej zapisaną kartę lub bilet. Tego przycisku można 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 ze wskazówkami dotyczącymi marki opisanymi na tej stronie. Oto kilka przykładów:
- rozmiar ustalany względem innych podobnych przycisków lub elementów na stronie;
- Nie wolno 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 aplikacje dla użytkowników na tych rynkach, zawsze używaj przycisków, do których linki znajdują się powyżej. Nie twórz własnych wersji przycisków. Jeśli na Twoim rynku nie jest dostępna zlokalizowana wersja przycisku, użyj wersji angielskiej.
Przyciski Dodaj do Portfela Google są dostępne w tych językach: albański, angielski (Australia, Indie, Kanada, Republika Południowej Afryki, Singapur, Stany Zjednoczone, Wielka Brytania), arabski, armeński, azerski, bośniacki, bułgarski, chiński (Hongkong), chiński (tradycyjny), chorwacki, czeski, duński, estoński, filipiński, fiński, francuski (Francja), francuski (Kanada), gruziński, grecki, hebrajski, hiszpański (Ameryka Łacińska), hiszpański (Hiszpania), indonezyjski, islandzki, japoński, kazachski, kataloński, kirgiski, koreański, litewski, łotewski, macedoński, malajski, niderlandzki, niemiecki, norweski, polski, portugalski (Brazylia), portugalski (Portugalia), rosyjski (Białoruś), rumuński, serbski, słowacki, słoweński, szwedzki, tajski, turecki, ukraiński, uzbecki, węgierski, wietnamski i włoski.
Zlokalizowana nazwa
Aby zapewnić użytkownikom wygodę, nazwa usługi Portfel Google jest przetłumaczona na wybranych rynkach. Jeśli tworzysz aplikacje dla użytkowników w tych krajach, zawsze używaj poniższej zlokalizowanej nazwy w internecie, e-mailach i materiałach drukowanych. Nie twórz własnej zlokalizowanej wersji nazwy „Portfel Google”. Jeśli Twojego rynku nie ma na liście poniżej, użyj nazwy „Google Wallet” w języku angielskim.
| Kraj | Nazwa |
|---|---|
| Białoruś | Portfel Google |
| Brazylia | Carteira do Google |
| Chile | Billetera de Google |
| Czechy | Portfel Google |
| Grecja | Πορτοφόλι Google |
| Hongkong | Google 錢包 |
| Litwa | Google Piniginė |
| Polska | Portfel Google |
| Portugalia | Carteira da Google |
| Rumunia | Portfel Google |
| Słowacja | Peňaženka Google |
| Tajwan | Google 錢包 |
| Turcja | Google Cüzdan |
| Zjednoczone Emiraty Arabskie | محفظة Google |
| Ukraina | Portfel 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 do układu. Jeśli na stronie są inne przyciski, przycisk Dodaj do Portfela Google musi być taki sam jak pozostałe przyciski lub 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 wersjach: podstawowej i skróconej. 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 | Skondensowane |
|---|---|
|
|
| Używaj przycisku głównego na białym i jasnym tle. | Użyj przycisku skróconego, jeśli nie ma wystarczająco dużo miejsca na przycisk główny lub przycisk o pełnej szerokości. |
Pusty obszar
Wokół przycisku Dodaj do Portfela Google zawsze pozostaw pusty obszar o minimalnej szerokości 8 dp. Zadbaj o to, by nie nachodziły na niego grafika ani tekst.
Minimalna wysokość
Wszystkie przyciski Dodaj do Portfela Google muszą mieć minimalną wysokość 48 dp.
Zalecenia i ograniczenia
| Dos | Nie |
|---|---|
| Zalecenie: używaj tylko przycisków Dodaj do Portfela Google dostarczonych przez Google. | Nie: nie twórz własnych przycisków Dodaj do Portfela Google ani w żaden sposób nie zmieniaj czcionki, koloru, promienia przycisku czy wypełnienia przycisku. |
| Zalecane: korzystaj z tego samego stylu przycisków w całej witrynie. | Nie: przyciski Dodaj do Portfela Google nie mogą być mniejsze niż inne przyciski. |
| Zalecenie: zadbaj o to, by rozmiar przycisków Dodaj do Portfela Google był taki sam jak rozmiar innych przycisków lub większy. | Nie: zmieniaj koloru przycisku. |
| Zalecane: zachowaj proporcje przycisku podczas zmiany rozmiaru przycisków Dodaj do Portfela Google. | Nie: nie zmieniaj rozmiaru przycisku bez zachowania proporcji. |
| Zalecane: używaj dostępnych wersji przycisków w odpowiednim języku. | Nie: nie twórz własnej zlokalizowanej wersji przycisku. |
Sprawdzone metody umieszczania przycisków
Wyświetlaj przycisk Dodaj do Portfela Google na ekranach potwierdzenia w aplikacji, na stronach internetowych i w e-mailach. Aby zaprojektować interfejs, zapoznaj się z tymi sprawdzonymi metodami.
Karty ogólne
Wyświetlaj przycisk Dodaj do Portfela Google na ekranach potwierdzenia w aplikacji, na stronach internetowych i w e-mailach. Zalecamy umieszczenie przycisku Dodaj do Portfela Google w miejscu, w którym użytkownicy uzyskują dostęp do swoich kart w aplikacji lub witrynie.
Używanie nazwy usługi Portfel Google w tekście
Możesz użyć tekstu, aby poinformować użytkownika, że jego karta standardowa jest zapisana na urządzeniu.
Zapisuj „G” i „W” wielką literą
Zawsze używaj wielkiej litery „G” i wielkiej litery „W”, po których następują małe litery, aby odnieść się do Portfela Google. Nie zapisuj wielkimi literami całej nazwy (jako „PORTFEL GOOGLE”), chyba że będzie to pasować do typografii w Twoim interfejsie.
Nie skracaj nazwy Portfel Google
Wyrazy „Google” i „Portfel” zawsze pisz w całości.
Dostosuj do stylu interfejsu
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 „Portfela 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 tagu HTML g:savetoandroidpay. Użyj specyfikacji textsize=large, aby znacznie zwiększyć rozmiary tekstu i przycisków w przypadku implementacji mobilnych lub sytuacji, w których obowiązują specjalne wymagania dotyczące interfejsu.
Użyj theme, aby ustawić kolor przycisków. W tabeli poniżej znajdziesz informacje o tym, 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 banerów powitalnych.
Kolor tła karty
Kolor tła możesz ustawić za pomocą pola hexBackgroundColor. Jeśli nie ustawisz wartości, algorytm przeanalizuje logo, znajdzie dominujący kolor i użyje go jako koloru tła.
Unikaj obszarów o wysokim nasyceniu (np. neonowej zieleni #00FF00 lub elektrycznego cyjanu #00FFFF). Te kolory powodują intensywne zmęczenie oczu i sprawiają, że tekst „zlewa się” z tłem lub w nim znika. 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.
Jeśli nie masz jeszcze obrazu, rozważ jego dodanie. Jeśli masz obraz, upewnij się, że jest zgodny z poniższymi specyfikacjami. Jeśli nie wybierzesz obrazu, wyświetlimy obraz zastępczy kategorii karty.
Poniżej znajdziesz listę zaleceń dotyczących interfejsu użytkownika w przypadku banerów powitalnych:
| Wytyczne | 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 (około 5:4) | ||||||||
| Zalecenia i ograniczenia |
|
Treść
Tytuły, podtytuły, etykiety pól i dane pól: aby ułatwić użytkownikom zrozumienie, tytuły i inne pola powinny być jak najkrótsze. Poniższe limity znaków dotyczą języka angielskiego, ale zostaną przetłumaczone na inne języki, co może skutkować różnymi wrażeniami użytkowników na różnych urządzeniach i w różnych regionach. W razie wątpliwości uprość treść, zachowując kluczowe informacje.
| Pole | Limit |
|---|---|
| Tytuł | < 47 znaków |
| Etykieta podtytułu | < 88 znaków |
| Etykieta pola/tytułu (np. data, opis, klasa, imię i nazwisko pasażera) | < 20 znaków |
| Etykieta danych pola (np.19 października 2026 r., Economy Plus) | < 15 znaków |
Aby zapewnić czytelność, ogranicz dane do 2 pól na wiersz 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 znaków |
Zalecamy przestrzeganie limitów znaków, aby zapobiec obcinaniu tekstu u użytkowników z małymi urządzeniami lub zwiększonym rozmiarem czcionki. Więcej informacji znajdziesz w artykule Powiadomienia | Urządzenia mobilne | Deweloperzy aplikacji na Androida.
Logo
Wytyczne dotyczące obrazu logo
Portfel Google maskuje logo, nadając mu okrągły kształt.
Poniżej znajdziesz listę zaleceń dotyczących interfejsu użytkownika w przypadku obrazów logo:| Wytyczne | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Minimalny rozmiar | 660 × 660 pikseli, |
| Format obrazu | 1:1 |
| Format obrazu grafiki | 1:1 |
| Rzeczywisty rozmiar piksela | Skaluj do rozmiaru urządzenia |
| Okrągła maska logo |
Logo jest maskowane, aby pasowało do okrągłego kształtu. Upewnij się, że logo mieści się w bezpiecznym obszarze. Nie maskuj wstępnie logo. Umieść logo w kwadracie z kolorem tła na spad. Logo musi mieć 15-procentowy margines, aby nie zostało obcięte po zamaskowaniu. 
|
Portfel Google maskuje logo, nadając mu okrągły kształt.
Wytyczne dotyczące szerokiego logo
Szerokie obrazy logo są obsługiwane przez bilety na wydarzenia, karty pokładowe, bilety na przejazd z kodem QR, karty lojalnościowe, oferty, karty podarunkowe, karty uniwersalne i uniwersalne dokumenty prywatne. Poniżej znajdziesz listę rekomendacji dotyczących interfejsu użytkownika w przypadku szerokich obrazów logo:
| Wytyczne | Opis |
|---|---|
| Typ pliku | plik PNG z przezroczystością, |
| Zalecany rozmiar | 1280 × 400 pikseli, |
| Minimalny rozmiar |
400 pikseli wysokości, szerokość proporcjonalna (więcej wskazówek znajdziesz w sekcji dotyczącej formatu obrazu). Używaj szerokich, prostokątnych obrazów. |
| Format obrazu |
16:5 
|
| Kolor |
W przypadku kart z ciemnym tłem użyj bardzo jasnego koloru o wysokim kontraście (np. białego). W przypadku kart z jasnym tłem użyj 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ł ją lepiej zrozumieć.
Dodatkowe wytyczne dotyczące obrazów
Poniżej znajdziesz listę rekomendacji dotyczących interfejsu dla dodatkowych zdjęć:
| Wytyczne | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Minimalny rozmiar |
1860 pikseli szerokości, zmienna wysokość. Używaj szerokich, prostokątnych obrazów. Aby uzyskać najlepsze wyniki, użyj obrazu z kolorowym tłem. |
| Rozmiar interfejsu |
Pełna szerokość szablonu i proporcjonalna wysokość. 
|
Obrazy kodów kreskowych
Niektóre branże zezwalają na umieszczanie obrazów nad i pod kodem kreskowym.
Obrazy nad kodem kreskowym
Poniżej znajdziesz listę zaleceń dotyczących interfejsu użytkownika w przypadku obrazów nad kodem kreskowym:
| Wytyczna | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Maksymalna wysokość |
20 dp (przy maksymalnym formacie obrazu) Zalecany rozmiar to 80 pikseli wysokości i 80–780 pikseli szerokości, jeśli są 2 obrazy. Dzięki temu będą obok siebie. Jeśli jeden obraz jest kwadratem, a drugi prostokątem, muszą mieć wymiary odpowiednio 80 × 80 pikseli i 780 × 80 pikseli. |
| Format obrazu |
Bez ograniczeń. Aby uzyskać maksymalną wysokość i szerokość 20 dp jednego obrazu, użyj formatu obrazu 20:1. Jeśli chcesz, aby nad kodem kreskowym znajdował się tylko 1 obraz, wykorzystaj całą szerokość (bez dopełnienia). Obraz musi mieć wymiary 1600 x 80 pikseli. |
| Maksymalny rozmiar wyświetlania (pojedynczy obraz) | wysokość 20 dp i szerokość 400 dp, |
Obraz pod kodem kreskowym
Poniżej znajdziesz listę zaleceń dotyczących interfejsu użytkownika w przypadku obrazu pod kodem kreskowym:
| Wytyczna | Opis |
|---|---|
| Preferowany typ pliku | PNG |
| Maksymalna wysokość |
20 dp (przy maksymalnym formacie obrazu) Zalecany rozmiar to 80 pikseli wysokości i 80–1600 pikseli szerokości. Jeśli jest kwadratowe, 80 x 80 pikseli. Jeśli jest prostokątny, 1600 x 80 pikseli. |
| Nieograniczony format obrazu. Aby uzyskać maksymalną wysokość i szerokość 20 dp, użyj formatu obrazu 20:1. | Jeśli chcesz, aby obraz miał pełną szerokość (bez dopełnienia), musi mieć rozmiar 1600 x 80 pikseli. |
| Maksymalny rozmiar wyświetlania to 20 dp wysokości i 400 dp szerokości. |
Moduły
Moduł reprezentuje grupę pól w określonej sekcji szablonu. W poniższej tabeli znajdziesz wskazówki dotyczące liczby modułów, które musisz uwzględnić w klasach i obiektach, aby karty wyświetlały się prawidłowo w aplikacji Portfel Google.
| Wytyczne | Opis |
|---|---|
imageModulesData
|
Używaj tylko jednego elementu imageModulesData w klasie lub w tworzonych obiektach.
|
infoModuleData
|
Użyj maksymalnie 2
|
linksModuleData
|
W klasie lub utworzonych obiektach możesz użyć maksymalnie 4 identyfikatorów URI
W klasie możesz mieć 2 identyfikatory URI |
textModulesData
|
Użyj maksymalnie 2 pól
Możesz mieć w klasie jeden identyfikator URI |
infoModuleData
InfoModuleData zawiera informacje o członkach i informacje, które można dostosować, i pojawia się w widoku rozwiniętym. Użyj tego modułu, aby przechowywać informacje takie jak daty ważności, salda punktów lub salda środków.
linksModuleData
Moduł linków zawiera identyfikatory URI stron internetowych, numery telefonów i adresy e-mail. Poniżej znajdziesz listę zaleceń dotyczących interfejsu modułu linków:
| Wytyczna | Przykładowe ustawienie | Przykładowy obraz |
|---|---|---|
Użyj prefiksu http:, gdy przypisujesz identyfikator URI do witryny lub lokalizacji w Mapach Google. Ten prefiks umożliwia klientowi kliknięcie linku i przejście do witryny lub wyświetlenie lokalizacji w Mapach Google.
Ten prefiks powoduje też wyświetlanie ikony linku lub mapy przed opisem na karcie.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Podczas definiowania numeru telefonu używaj prefiksu tel:. Ten prefiks umożliwia klientowi kliknięcie linku, aby wybrać numer. Ten prefiks powoduje też wyświetlenie ikony telefonu przed opisem tekstowym na karcie.
|
'uri': 'tel:6505555555'
|
|
Podczas definiowania adresu e-mail użyj prefiksu mailto:.
Ten prefiks umożliwia klientowi kliknięcie linku, aby wysłać e-maila na dany adres. Ten prefiks powoduje też utworzenie ikony e-maila przed opisem tekstowym na karcie.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Nagłówki, etykiety i nazwy
Nagłówki, etykiety i nazwy pisz jak nazwy własne, tak aby każde słowo zaczynało się wielką literą.
Polityka treści
Zawartość każdego pola na karcie musi być zgodna z polityką treści Google Payments. Treści witryn, do których odwołujesz się na zajęciach, również muszą być zgodne z tymi zasadami.
Miejsce docelowe danych platformy partnera
Aby mieć pewność, że użytkownicy będą mogli przejść do Twojej bogatej w funkcje aplikacji lub witryny dotyczącej karty, umieść precyzyjny link do aplikacji lub witryny we właściwości linksModuleData.* klasy lub obiektu karty. Dzięki temu użytkownik może przejść do Twojej platformy z karty, która pojawia się w Portfelu Google. Aby zobaczyć, jak jest renderowany, przejdź do sekcji dotyczących projektowania w poszczególnych branżach.