Wskazówki dotyczące marki

Jeśli tworzysz aplikacje dla użytkowników w Rosji, użyj przycisków „Zapisz w telefonie”, ponieważ w tych krajach Portfel Google jest niedostępny. Zobacz odpowiednie zasoby i wytyczne. Jeśli tworzysz aplikacje dla użytkowników spoza Rosji, zaktualizuj przycisk Dodaj do Portfela Google, pobierając poniższe zasoby.

Z tej sekcji dokumentacji dowiesz się, jak tworzyć obrazy i inne elementy interfejsu, aby wyglądały dobrze w aplikacji Portfel Google.

Komponenty

Przycisk Dodaj do Portfela Google

Przycisk Dodaj do Portfela Google jest używany za każdym razem, gdy prosisz użytkowników o zapisanie karty lub karty z Twojej aplikacji lub witryny w portfelu. Przycisk Dodaj do Portfela Google musi wywoływać jeden z procesów API Portfela Google. W ten sposób wyświetla się aplikacja Portfel Google, w której użytkownicy mogą zapisywać karty na urządzeniu z Androidem i na koncie Google, postępując zgodnie z instrukcjami. Tego przycisku można używać w aplikacjach, na stronach internetowych i w e-mailach.

Przyciski Dodaj do Portfela Google są dostępne w formatach XML, SVG i PNG na Androida.

Pobierz zasoby – Android XML Pobierz zasoby – SVG Pobierz zasoby – PNG

Przycisk Wyświetl w Portfelu Google

Przycisk Wyświetl w Portfelu Google służy do precyzyjnego połączenia użytkownika z portfelem w celu wyświetlenia zapisanej karty lub wcześniej zapisanej karty. Tego przycisku można używać w aplikacjach, na stronach internetowych i w e-mailach.

Przyciski Wyświetl w Portfelu Google są dostępne w formatach SVG i PNG.

Pobierz zasoby – SVG Pobierz zasoby – PNG

Wszystkie przyciski wyświetlane w witrynie, aplikacji lub e-mailach muszą być zgodne ze wskazówkami dotyczącymi marki opisanymi na tej stronie. Oto przykłady wytycznych:

  • rozmiar względem innych podobnych przycisków lub elementów na stronie;
  • Nie wolno zmieniać kształtu ani koloru przycisków
  • Pusty obszar

Zlokalizowane przyciski

Na wszystkich rynkach, na których jest dostępny Portfel Google, dostępne są zlokalizowane przyciski Portfela Google. Jeśli tworzysz aplikacje z myślą o użytkownikach na takich rynkach, zawsze używaj przycisków, do których linki znajdziesz powyżej. Nie twórz własnej wersji przycisków. Jeśli zlokalizowana wersja przycisku nie jest dostępna na Twoim rynku, użyj wersji angielskiej.

Przyciski Dodaj do Portfela Google: fiński (angielski, bułgarski, bułgarski, bułgarski, bułgarski, chiński (uproszczony fiński), francuski, hiszpański, bułgarski, bułgarski, bułgarski, chiński (angielski, litewski, litewski, litewski, litewski, francuski, hiszpański, holenderski, japoński, litewski, litewski, litewski, turecki, niemiecki, polski, portugalski, wietnamski, rosyjski, turecki, wietnamski, włoski, singapurski, turecki, wietnamski, wietnamski, włoski.

Zlokalizowana nazwa

Dla wygody użytkowników nazwa usługi Portfel Google jest zlokalizowana na wybranych rynkach. Jeśli tworzysz treści dla użytkowników w tych krajach, zawsze używaj zlokalizowanej poniżej nazwy w przypadku internetu, e-maila lub druku. Nie twórz własnej zlokalizowanej wersji „Portfela Google”. Jeśli Twój rynek nie znajduje się na liście poniżej, użyj „Portfela 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
Zjednoczone Emiraty Arabskie Google
Ukraina Google
Stany Zjednoczone (hiszpański)
*Użyj tej nazwy w Stanach Zjednoczonych, jeśli interfejs użytkownika jest w języku hiszpańskim
Billetera de Google

Rozmiar

Dostosuj wysokość i szerokość przycisku Dodaj do Portfela Google, by pasował do układu graficznego. Jeśli na stronie znajdują się inne przyciski, przycisk Dodaj do Portfela Google musi być taki sam 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 dwóch wersjach: podstawowej i skróconej. Przycisk Dodaj do Portfela Google ma kolor czarny. Dostępne są zlokalizowane wersje przycisku. Nie twórz przycisków z własnym przetłumaczonym tekstem.

Główna Wąski
Główny przycisk Dodaj do Portfela Google Skrócony przycisk Dodaj do Portfela Google
Używaj przycisku głównego na białym i jasnym tle. Jeśli nie ma wystarczającej ilości miejsca na obraz główny lub o pełnej szerokości, użyj przycisku zwiniętego.

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.

Przyciski dodawania do Portfela Google muszą mieć 8 dp miejsca ze wszystkich stron.

Minimalna wysokość

Wysokość wszystkich przycisków Dodaj do Portfela Google musi wynosić co najmniej 48 dp.

Przyciski dodawania do Portfela Google muszą mieć minimalną wysokość 48 dp.

Zalecenia i ograniczenia

Tak 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: przycisk Dodaj do Portfela Google powinien być mniejszy 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: zmieniaj koloru przycisku.
Tak: zmieniając rozmiar przycisku Dodaj do Portfela Google, zachowaj proporcje. Nie: ustaw wielkość przycisku na dowolną skalę.
Tak: użyj udostępnionej zlokalizowanej wersji przycisków. Nie: utwórz własną zlokalizowaną wersję przycisku.

Sprawdzone metody umieszczania przycisku

Wyświetlaj przycisk Dodaj do Portfela Google na ekranach aplikacji z potwierdzeniem, stronach internetowych i w e-mailach. Poniżej znajdziesz sprawdzone metody projektowania UI.

Programy lojalnościowe, karty podarunkowe, oferty

Wyświetlaj przycisk Dodaj do Portfela Google na ekranach potwierdzenia. Możesz też wyświetlać przycisk w swojej witrynie lub aplikacji albo umieścić go w odpowiednich e-mailach.

Karta podarunkowa     kawa z kartą lojalnościową

Używanie nazwy usługi Portfel Google w tekście

Możesz użyć tekstu, aby poinformować użytkownika, że oferta pracy 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 każda z nich – 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 Portfela Google

Wyrazy „Google” i „Portfel” zawsze pisz w całości.

Dopasuj do stylu 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 „Portfela Google”

W przesłanej zlokalizowanej kopii zawsze zapisuj „Portfel Google”.

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 znacząco zwiększyć rozmiar tekstu i przycisków w przypadku implementacji na urządzeniach mobilnych lub w przypadku specjalnych wymagań interfejsu.

Aby ustawić kolor przycisków, użyj theme. W tabeli poniżej pokazujemy, jak te ustawienia wpływają na przycisk Dodaj do Portfela Google.

Banery powitalne

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

Wytyczne dotyczące banera powitalnego

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 Współczynnik proporcji 3:1 lub szerszy
Rozmiar wyświetlacza

Pełna szerokość karty i proporcjonalna wysokość.

Rozmiar wyświetlacza powinien wynosić co najmniej 3:1.

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.

Wskazówki 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 wyświetlacza

Pełna szerokość szablonu i proporcjonalna wysokość.

Rozmiar wyświetlacza powinien wynosić co najmniej 3:1.
Użyj tego samego schematu kolorów, co logo.

Obrazy kodu kreskowego

Niektóre branże dopuszczają wyświetlanie obrazów nad i pod kodem kreskowym.

Obrazy nad kodem kreskowym

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

Wytyczne 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ą znajdować się obok siebie.

Jeśli jeden obraz jest kwadratowy, a drugi prostokątny, ich wymiary muszą wynosić 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 umieścić tylko 1 obraz nad kodem kreskowym, wybierz pełną szerokość (bez dopełnienia). Obraz musi mieć rozmiar 1600 x 80 pikseli.

Maksymalny rozmiar wyświetlanego obrazu (pojedynczy obraz) Wysokość 20 dp i szerokość 400 dp

Obraz pod kodem kreskowym

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

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

Nieograniczony format obrazu. Aby uzyskać maksymalną wysokość i szerokość 20 dp, użyj współczynnika proporcji 20:1. Jeśli chcesz mieć obraz o pełnej szerokości (bez dopełnienia), musi on mieć 1600 x 80 pikseli.
Maksymalny rozmiar wyświetlanego obrazu to 20 dp (wysokość) i 400 dp (szerokość).  

Moduły

Moduł reprezentuje grupę pól w konkretnej sekcji szablonu. W tabeli poniżej znajdziesz wytyczne dotyczące liczby modułów, które musisz uwzględnić 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 infoModuleData w klasie lub obiektach, które tworzysz.

Element infoModuleData może określać informacje o koncie użytkownika, takie jak nazwa użytkownika czy numer subskrypcji.

linksModuleData

Możesz użyć maksymalnie 4 identyfikatorów URI linksModuleData w klasie lub obiektach, które tworzysz.

Klasa może zawierać 2 identyfikatory URI linksModuleData: identyfikator URI witryny i numer telefonu centrum pomocy. Dwa identyfikatory URI linksModuleData w obiekcie mogą określać identyfikator URI konta użytkownika i pobliskie lokalizacje.

textModulesData

Użyj maksymalnie 2 pól textModulesData w klasie i obiektach, które tworzysz.

Klasa może mieć jeden identyfikator URI textModuleData, który określa szczegóły programu, oraz jeden obiekt textModulesData w obiekcie, który określa szczegóły dotyczące konta 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żesz przechowywać informacje, takie jak daty ważności, salda punktów i salda ś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:

Wytyczne Przykładowe ustawienie Przykładowy obraz
Przy przypisywaniu identyfikatora URI witrynie lub lokalizacji w Mapach Google użyj prefiksu http:. Dzięki temu użytkownik może kliknąć link i przejść do witryny lub wyświetlić lokalizację w Mapach Google. Prefiks powoduje też wyświetlenie ikony linku lub mapy przed opisem na karcie. 'uri': 'http://maps.google.com/?q=google' Pinezka wskazująca lokalizację na mapie.
'uri': 'http://developer.google.com/wallet/' Wskaźnik kuli ziemskiej dla witryny.
Aby podać numer telefonu, użyj prefiksu tel:. Dzięki temu użytkownik może kliknąć link, aby wybrać numer. Ten prefiks tworzy też ikonę telefonu przed tekstem opisu na karcie. 'uri': 'tel:6505555555' Wskaźnik telefonu dla linku telefonicznego.
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. Ten prefiks tworzy też ikonę e-maila przed tekstem opisu na karcie. 'uri': 'mailto:jonsmith@email.com' Wskaźnik wiadomości z linkiem do wysłania e-maila.

Nagłówki, etykiety i nazwy

Nagłówki, etykiety i nazwy powinny być pisane jak nazwy własne, 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 płatności. Zawartość witryn, do których odwołujesz się w tej klasie, również musi być zgodna z tymi zasadami.

Umieszczanie danych na platformach partnera

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. Pozwoli to użytkownikowi przejść na Twoją platformę z karty, która jest widoczna w Portfelu Google. Aby zobaczyć, jak jest renderowany, otwórz sekcje projektowania kategorii kart.