Palety kolorów dla zrzutów ekranu App Store
Większość palet zrzutów ekranu App Store zawodzi w ten sam sposób: wyglądają pięknie na 27-calowym monitorze i zamieniają się w nieczytelną plamę w rozmiarze, w jakim faktycznie wyświetla je App Store. Karuzela renderuje się w pełnej rozdzielczości na stronie produktu, ale w rozmiarze miniatur w wynikach wyszukiwania i na listach "Więcej podobnych". Jeśli twoja paleta działa tylko przy jednym z tych rozmiarów, tracisz konwersje przy drugim.
Trzy konteksty wyświetlania
Traktuj je jako trzy oddzielne ograniczenia projektowe. Paleta wygrywająca w jednym może przegrać w innym.
- Pełny rozmiar (1290 × 2796 na iPhone). Renderowanie na stronie produktu. Tu trafiają użytkownicy po stuknięciu. Subtelne przejścia gradientów, drobniejszy tekst i złożone wielowarstwowe kolory są tu czytelne. Większość projektantów testuje tylko ten rozmiar.
- Miniatura wyszukiwania (~300 × 650). Pierwsze trzy panele karuzeli renderowane obok ikon konkurujących aplikacji w wyszukiwarce App Store. Drobne szczegóły znikają. Czytelne są tylko mocne, kontrastowe bloki kolorów; subtelne gradienty spłaszczają się.
- Sąsiedni kontekst. Twój zrzut ekranu nigdy nie pojawia się w wyszukiwaniu osobno. Siedem innych aplikacji wokół niego ma własne palety. Jeśli wszyscy w twojej kategorii używają ciepłych barw, a ty też, twój zrzut ekranu znika w tle.
Zasada pięciu kolorów
Pięć kolorów to orientacyjna maksymalna liczba. Jeden dominujący kolor tła (lub gradient między dwoma), jeden podstawowy kolor tekstu, jeden akcent dla wyróżnienia, plus kolory wynikające z faktycznego zrzutu ekranu twojej aplikacji. Dodanie szóstego koloru zazwyczaj oznacza utratę jednego z pozostałych, a nie rozbudowanie palety.
Powód nie jest estetyczny — miniatury agresywnie kompresują informację wizualną, a paleta z za dużą liczbą kolorów zamienia się w jednolitą szarą masę. Cztery do pięciu kolorów to przedział, w którym każdy kolor pozostaje wyraźny przy 200 px.
Kontrast: WCAG AA nie jest opcjonalny
Tekst podpisu na tle panelu powinien osiągać WCAG AA (4,5:1 dla tekstu akapitowego, 3:1 dla dużego tekstu 24pt+). Nie dlatego, że Apple to sprawdza — bo nie sprawdza — ale dlatego, że przy rozmiarze miniatury wszystko poniżej AA staje się dosłownie nieczytelne. Użyj narzędzia do sprawdzania kontrastu dla finalnego koloru podpisu na finalnym kolorze tła przed eksportowaniem.
Typowy błąd: ciemnoszary tekst na nieco jaśniejszym ciemnoszarym gradiencie. W Figma wygląda elegancko. Przy szerokości miniatury całkowicie znika.
Konwencja kategorii jako punkt wyjścia, nie zasada
Przyjrzyj się 20 najlepszym aplikacjom w swojej kategorii App Store. Zanotuj ich dominujące kolory palety. To twoja konwencja kategorijna — paleta, którą użytkownicy kojarzą z "wiarygodną aplikacją w tej kategorii". Możesz ją naśladować (mniejsze ryzyko, mniejsze wyróżnienie) lub celowo ją łamać (większe ryzyko, większe wyróżnienie, jeśli zadziała).
Łamanie konwencji działa, gdy masz ku temu konkretny powód. Kategoria Notion (produktywność) w 2022 roku stawiała na jasne pastele; Notion wybrało prawie monochromatyczną paletę z subtelnym ciepłem i wyglądało poważniej. Kategoria Headspace (zdrowie psychiczne) była zatłoczona miękkimi pastelami; głęboko pomarańczowy gradient Headspace wyróżniał się bez agresji. Bezpieczna sekwencja: najpierw dopasuj, łam dopiero po uzyskaniu danych o instalacjach.
Audyt "sąsiada w wyszukiwaniu"
Zanim wyślesz, zrób to: wyszukaj w App Store dwa lub trzy słowa kluczowe, na które twoja aplikacja jest (lub chce być) widoczna. Spójrz na pasek zrzutów ekranu pod najlepszą aplikacją dla tych słów kluczowych. Czy twoja zaprojektowana paleta będzie się wyróżniać spośród sąsiadujących aplikacji, czy zleje się z nimi?
To jest audyt na trzydzieści sekund, który większość zespołów pomija. Paleta zrzutów ekranu, która wydawała się unikalna w izolacji, może być takim samym gradientem niebiesko-fioletowym jak pięciu konkurentów powyżej i poniżej ciebie w wyszukiwaniu. Poprawka to zazwyczaj zmiana jednego koloru akcentu.
Ciemne, jasne czy żadne
Wybierz wyraźną pozycję: przeważnie ciemne tła, przeważnie jasne tła lub spójna rodzina gradientów we wszystkich panelach. Mieszanie ciemnych i jasnych paneli w jednej karuzeli to najczęstszy błąd — sprawia, że projekt wygląda jak stworzony bez koncepcji.
Przeczytaj artykuł tryb ciemny vs jasny, kiedy każdy z nich wygrywa w danej kategorii. W skrócie: ciemny wygrywa w grach, muzyce, foto/wideo i AI; jasny wygrywa w produktywności, edukacji i zdrowiu; wszystko inne to rzut monetą — decyduje marka.
Kolor a lokalizacja
Kolory mają różne znaczenia w różnych lokalizacjach. Czerwony jest pozytywny na rynkach chińskojęzycznych (dobrobyt), bardziej negatywny w dużej części Europy. Biały jest żałobny w dużej części Azji Wschodniej. Jaskrawy zielony oznacza "do przodu" w jednych miejscach, a "zazdrosny" w innych. Dla większości aplikacji te różnice są zbyt subtelne, by przeważyły spójność marki — wybierz jedną paletę i wysyłaj globalnie. Paletą per lokalizacja martw się tylko wtedy, gdy symbolika kolorów jest istotną częścią pozycjonowania twojej marki (luksus, zdrowie, finanse) i masz dane, na których możesz działać.
Co zrobić w tym tygodniu
- Sprawdź aktualne zrzuty ekranu przy szerokości 200 px. Wszystko, co jest nieczytelne w tym rozmiarze, wymaga zmiany.
- Zweryfikuj kontrast WCAG AA każdego podpisu na tle jego panelu.
- Wyszukaj swoje trzy główne słowa kluczowe i zrób zrzut ekranu otaczającego kontekstu. Czy twoja paleta się wyróżnia?
- Jeśli projektujesz od nowa, ogranicz się do pięciu kolorów. Dodanie szóstego oznacza usunięcie jednego z pozostałych.