Opis
Logo jest Twoją tożsamością oraz Twoim najbardziej niezmiennym i elastycznym zasobem. Wszyscy dostawcy usług płatniczych muszą dostarczyć Google zestaw logo do wykorzystania w różnych obszarach ekosystemu Google. Na przykład logo jest wyświetlane w różnych ścieżkach użytkownika w Google Pay i Google Play, gdy użytkownik musi wybrać formę płatności. Oto przykłady:
Lista specyfikacji
Jako dostawca usług płatniczych musisz dostarczać Google zasoby spełniające każdą z 5 poniższych specyfikacji. Każda specyfikacja wpływa na rozmiar, paletę kolorów, dopełnienie obramowania i inne atrybuty, które sprawiają, że proces płatności w Google jest uniwersalny, skuteczny i ukierunkowany na człowieka. Każda specyfikacja wymaga 2 formatów plików, co daje łącznie 10 wymaganych zasobów graficznych.
Poniżej znajdziesz listę pięciu specyfikacji:
Zalecenia i wymagania
Rekomendacje
Dzięki tym zaleceniem Twoje logo jest wyraźne i ostre oraz dostosowuje się do różnych rozmiarów ekranu i motywów systemu operacyjnego (np. do trybu jasnego i ciemnego).
- Aby zwiększyć ostrość i szczegóły, wykorzystuj cały obszar zasobu, aby logo pasowało do maksymalnych dozwolonych wymiarów.
- Podczas projektowania logo zastanów się, jak będzie wyglądać na ciemniejszym tle w jasnych i ciemnych motywach na Androida i iOS. Więcej informacji znajdziesz w sekcji Uwagi na temat ciemnego motywu.
Wymagania
Niezależnie od specyfikacji logo te wymagania są ogólnym zestawem wytycznych, z którymi muszą być zgodne wszystkie logo:
- Uwzględnij przezroczystą ramkę ograniczającą (kształt o takich samych wymiarach jak wymiary w specyfikacji), bez „kreski” ani obramowania.
- Sprawdź, czy logo jednokolorowe ma tylko jeden kolor. Więcej informacji znajdziesz w uwagach dotyczących logo jednokolorowych.
- Wyeksportuj pliki o nazwach zgodnej z konwencją określoną w każdej specyfikacji logo.
Uwagi na temat ciemnego motywu
Obie wersje Androida i iOS obsługują ciemny motyw z ciemniejszą paletą kolorów dla wszystkich ekranów, widoków i menu. Natywne aplikacje Google Play i Google Pay na Androida również obsługują ten motyw i przyciemniają ich interfejsy po włączeniu. Ciemniejsze kolory na ekranie wpływają na dobór kolorów i wyglądu logo. Wielokolorowe logo mogą być częściowo lub całkowicie nieczytelne, gdy tło przyciemni się w ciemnym motywie. Oto przykład:
Na ilustracji powyżej zwróć uwagę, jak ciemnoszary tekst „Acme” na logo banku Acme prawie się rozjaśnia po przyciemnieniu tła w ciemnym motywie. Unikaj tak ciemnych kolorów w wielokolorowym logo, jeśli jest ono przedstawione w samodzielnym tekście. Listę sprawdzonych metod dotyczących projektowania logo w ciemnym motywie znajdziesz w artykule o projektowaniu wielokolorowego logo na potrzeby ciemnego motywu.
Więcej informacji o ciemnym motywie znajdziesz tutaj.
Projektowanie wielokolorowego logo na ciemny motyw
Chociaż dostosowania z automatyzacją i wprowadzone przez zespół ds. UX Google ulepszą logo w ciemnym motywie, stosowanie tych sprawdzonych metod pozwoli zminimalizować liczbę potrzebnych zmian, lepiej zachować oryginalny wygląd logo i dopasować je do innych obszarów ekranu.
- Używaj wyblakłych kolorów, takich jak pastele lub odcienie szarości i bieli. Unikaj stosowania w pełni nasyconych kolorów.
- Użyj kolorów „wł.”, takich jak biały i różnych odcieni bieli.
- Zachowaj akceptowalne proporcje kontrastu między logo a otaczającymi go obszarami. Więcej informacji o współczynnikach kontrastu znajdziesz na stronie w3.org.
- Unikaj cieni, ponieważ są słabo widoczne na ciemnym tle.
- Przetestuj projekt logo na ciemnym tle.
Uwagi na temat logo w jednym kolorze
Zmiana odcienia motywu jasnego i ciemnego
Jednokolorowe logo są barwione w celu zachowania idealnego kontrastu kolorów z otaczającym tłem. Zwróć uwagę na przykład na to, jak poniższe logo zmienia kolor w zależności od tego, czy motyw jest jasny czy ciemny:
Więcej informacji o dopuszczalnych współczynnikach kontrastu i ułatwieniach dostępu znajdziesz na stronie w3.org.
Konsekwencje zmiany rozmiaru zasobów
Powiększanie
Twoje logo musi być dostosowane do różnych rozmiarów ekranu i gęstości wyświetlacza, dlatego Google musi uzyskać największy rozmiar zasobu używany w aplikacjach i witrynach. Na przykład wymagany jest rozmiar 320 x 320 pikseli, ponieważ jest to największy rozmiar wyświetlanego logo Google Play. Mniejsze obrazy należy dopasować do swoich wymiarów, ponieważ mogłoby to spowodować rozmycie i zniekształcenie obrazu. To zamazywanie dotyczy głównie formatów innych niż wektorowe, np. png. Przeanalizujmy przykład poniżej, w którym mniejszy obraz ma wymiary do 320 x 320 pikseli. Zwróć uwagę na jej piksele i rozmycie w większym rozmiarze:
Zmniejszam rozmiar
Google może też zmniejszyć Twoje logo. Na przykład rozmiar zasobu o wymiarach 320 x 320 pikseli można zmniejszyć do 32 x 32 piksele. Zmniejszenie rozmiaru może wpływać na drobniejsze szczegóły w projekcie logo. Należy je sprawdzić przed przesłaniem zasobu do Google. Zwróć uwagę na to, jak poniższe logo zachowuje swój ogólny wygląd po zmniejszeniu:
Lista specyfikacji
Poniższa lista zawiera szczegółowe informacje o każdej z pięciu specyfikacji logo. Każda specyfikacja musi być w 2 formatach: SVG i PNG.
Kwadrat o wymiarach 320 x 320 pikseli w kolorze
Atrybuty wymagane
| Łączna liczba wymiarów | 320 x 320 pikseli |
| Wymiary logo | 320 x 320 pikseli |
| Format obrazu | 1:1 |
| Dopełnienie | brak |
| Borders | brak |
| Paleta kolorów | pełny kolor RGB |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_320x320_color_no_padding.png | acmebank_320x320_color_no_padding.png |
| SVG | [brand]_320x320_color_no_padding.svg | acmebank_320x320_color_no_padding.svg |
Kwadrat o wymiarach 320 x 320 pikseli w kolorze z dopełnieniem
Atrybuty wymagane
| Łączna liczba wymiarów | 320 x 320 pikseli |
| Wymiary logo | 200 x 200 pikseli |
| Format obrazu | 1:1 |
| Dopełnienie | 60 piks. |
| Borders | brak |
| Paleta kolorów | pełny kolor RGB |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_320x320_color_padding.png | acmebank_320x320_color_padding.png |
| SVG | [brand]_320x320_color_padding.svg | acmebank_320x320_color_padding.svg |
Podłużny prostokąt o wymiarach 1170 x 730 pikseli
Atrybuty wymagane
| Łączna liczba wymiarów | 1170 x 730 piks. |
| Wymiary logo | 1170 x 730 piks. |
| Format obrazu | 8:5 |
| Dopełnienie | brak |
| Borders | brak |
| Paleta kolorów | pełny kolor RGB |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_1170x730_color_no_padding.png | acmebank_1170x730_color_no_padding.png |
| SVG | [brand]_1170x730_color_no_padding.svg | acmebank_1170x730_color_no_padding.svg |
Kolor podłużny prostokąt o wymiarach 1170 x 730 pikseli z dopełnieniem
Atrybuty wymagane
| Łączna liczba wymiarów | 1170 x 730 piks. |
| Wymiary logo | 970 x 530 piks. |
| Format obrazu | 8:5 |
| Dopełnienie | 100 piks. |
| Borders | brak |
| Paleta kolorów | pełny kolor RGB |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_1170x730_color_padding.png | acmebank_1170x730_color_padding.png |
| SVG | [brand]_1170x730_color_padding.svg | acmebank_1170x730_color_padding.svg |
Kwadrat o wymiarach 320 x 320 pikseli, jeden kolor
Atrybuty wymagane
| Łączna liczba wymiarów | 320 x 320 pikseli |
| Wymiary logo | 320 x 320 pikseli |
| Format obrazu | 1:1 |
| Dopełnienie | brak |
| Borders | brak |
| Paleta kolorów | czarny (numer szesnastkowy #000000) |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_320x320_single_color_no_padding.png | acmebank_320x320_single_color_no_padding.png |
| SVG | [brand]_320x320_single_color_no_padding.svg | acmebank_320x320_single_color_no_padding.svg |
Kwadrat o wymiarach 320 x 320 pikseli, w jednym kolorze z dopełnieniem
Atrybuty wymagane
| Łączna liczba wymiarów | 320 x 320 pikseli |
| Wymiary logo | 200 x 200 pikseli |
| Format obrazu | 1:1 |
| Dopełnienie | 60 piks. |
| Borders | brak |
| Paleta kolorów | czarny (numer szesnastkowy #000000) |
| Kolor tła | transparent |
Pliki wymagane
| Format | Konwencja nazw plików | Przykład |
|---|---|---|
| PNG | [brand]_320x320_single_color_padding.png | acmebank_320x320_single_color_padding.png |
| SVG | [brand]_320x320_single_color_padding.svg | acmebank_320x320_single_color_padding.svg |
Przesyłanie logo
Prześlij zasoby logo za pomocą przesyłania GSP – LOGOs. Jeśli masz problemy z dostępem do formularza lub użyciem tego formularza, skontaktuj się z osobą kontaktową ds. zaangażowania technicznego lub osobą kontaktową ds. technicznych przypisaną do Twojego konta.