App Store Icon Size: File Requirements, Design Tips, and Best Practices

Jaki jest właściwy rozmiar ikony App Store? Co powinieneś przedstawić w swojej ikonie? Jaką to wszystko robi różnicę? Ten przewodnik po ikonach aplikacji pomoże odpowiedzieć na te ważne pytania, zaoferować wskazówki i połączyć się z zasobami.

Dlaczego ikony aplikacji mają znaczenie

Rozmiar ikony App Store jest malutki. Gdy ikony pojawiają się na ekranie smartfona, każda z nich zajmuje tylko szerokość kciuka. Ale w Apple App Store lub Google Play Store, projekt, który pakujesz do tego małego rozmiaru ikony sklepu z aplikacjami jest wszystkim.

Tak jak w przypadku okładek książek lub obrazów list produktów na Amazon, ikony aplikacji mobilnych pomagają Twoim potencjalnym klientom dokonać szybkiej oceny w ułamku sekundy.

Zanim przeczytają tytuł lub opis aplikacji, zobaczą ikonę. Twoja ikona aplikacji mobilnej musi powiedzieć im o swojej aplikacji w atrakcyjny sposób, prowadząc ich do dowiedzieć się więcej. Gdy ktoś kliknie na ikonę, jest bardziej prawdopodobne, że zainstaluje Twoją aplikację. I to jest to, czego chcesz. W zasadzie, Twoja ikona aplikacji jest bramą do instalacji.

Dlatego tak ważne jest, aby mieć to dobrze.

Ikona aplikacji to nie logo

Może się wydawać, że najłatwiej po prostu przenieść logo marki na ikonę aplikacji i nazwać to dniem. Nie rób tego. Ikona aplikacji nie jest logo. Logo reprezentuje markę stojącą za aplikacją, tak, ale ikona aplikacji reprezentuje samą aplikację.

Tak jak nie używałbyś logo w miejsce obrazu produktu na liście Amazon, nie powinieneś klepać logo do wymagań rozmiaru ikony sklepu z aplikacjami i nazywać go ikoną. Tylko mega-marki takie jak Starbucks lub Target mogą uciec z tym.

Jeśli jednak jesteś przyzwoicie ugruntowaną i znaną marką, nie krępuj się dodać swojego logo do ikony aplikacji w jakiś sposób, ale nie skupiaj się na nim.

W poniższym przykładzie, znany wydawca książek podróżniczych Lonely Planet zawiera swoje logo w ikonie aplikacji dla Guides by Lonely Planet. Ale logo jest tylko jednym z elementów projektu aplikacji. Uspokajające niebieskie obramowanie sprawia, że ciepły, żółty pejzaż miejski wyskakuje, zapraszając widza do następnej przygody.

Tagline mówi, że ta aplikacja jest kompilacją „sprawdzonych przewodników miejskich”, a ikona aplikacji wskazuje na tę funkcję.

Każdy, kto uwielbia odkrywać nowe miasta i kto prowadzi wyszukiwanie w sklepie dla „przewodników turystycznych”, będzie przyciągnięty do tej ciepłej, ale ekscytującej ikony aplikacji.

Porównaj aplikację Lonely Planet z innymi aplikacjami przewodników turystycznych, które znajdziesz pod tym samym wyszukiwaniem.

mTrip bierze M ze swojego logo, dodaje zielone tło i daje sobie kciuk w górę, aby opublikować ikonę w App Store.

Ale ikona nie mówi nic o tym, co użytkownik dostaje, i mTrip nie jest wystarczająco znany, aby być rozpoznawalny przez jedną literę. Netflix, poniżej, również bierze pierwszą literę ze swojego logo i używa jej jako ikony aplikacji, ale ta marka może to pociągnąć, ponieważ każdy wie, czym jest Netflix i co robi.

Teraz, gdy znasz już różnicę między logo a ikoną aplikacji, spójrzmy na ważne pytania, które musisz sobie zadać przed rozpoczęciem projektowania.

Rozmiar ikony sklepu internetowego: 4 pytania, które należy zadać przed stworzeniem ikony aplikacji

Prawdą jest, że ikona Twojej aplikacji musi przyciągnąć jak najwięcej oczu. Chcesz, aby wyróżniała się spośród wszystkich ikon aplikacji wokół niej, a w świecie przesyconym aplikacjami nie jest to łatwe zadanie.

Ale oto sekret: nie musisz sprawić, by ikona Twojej aplikacji spodobała się wszystkim na świecie. Zamiast tego skoncentruj się na tym, aby przemówiła do ludzi z Twojej grupy docelowej.

Więc oto pierwsze pytanie do rozważenia.

Pytanie #1: Kto jest grupą docelową dla tej aplikacji?

Czy Twoja aplikacja jest dla ludzi, którzy kochają gotować? Rodzice z małymi dziećmi? Miłośnicy gier takich jak Candy Crush i Angry Birds? Podróżników? Początkujących muzyków?

Odkąd już zbudowałeś aplikację, powinieneś znać odpowiedź na to pytanie. Ale spraw, by stało się ono głównym punktem projektu ikony aplikacji.

Szukaj prostej frazy, która definiuje Twoją grupę docelową.

Powiedzmy, na przykład, że Twoja aplikacja uczy ludzi, jak grać na pianinie. Wyszukiwanie dla „nauczyć się grać na pianinie” w sklepie Google Play przynosi te najlepsze aplikacje.

Z tych czterech ikon aplikacji, na którą byś kliknął, aby dowiedzieć się więcej?

Dla mnie, byłego pianisty, który chciałby ponownie nauczyć się tego, co kiedyś wiedziałem, ta wygrywa. Hands down.

Nie uważam ikony aplikacji Flowkey za atrakcyjną w ogóle, ponieważ nie mówi mi nic o grze na fortepianie. (Ponownie, jest to w zasadzie logo i nic więcej). Pozostałe dwa funkcje klawiszy fortepianu wewnątrz ikony – oczekiwany, być może, ale całkowicie w porządku.

Dla mnie, Real Piano Teacher wygrywa, ponieważ pokazuje ręce grające na fortepianie na oznaczonych klawiszy z arkuszem muzyki przed osobą grającą.

Nie można nauczyć się grać na fortepianie bez uczenia się notatek, a nauka czytania nut może być tak trudne, jak nauka czytania języka pisanego. Przez jego ikonę aplikacji sam, ta aplikacja obiecuje pomóc użytkownikom nauczyć się czytać notatki, przyspieszając je bliżej do osiągnięcia ich marzenia o graniu pięknych melodii na własną rękę.

Teraz tutaj jest haczyk: ty, jako twórca aplikacji, musi zadać sobie pytanie, jak mogę zrobić mój ikona aplikacji nawet lepiej niż jeden lubię najlepiej (Real Piano Teacher’s)?

Zaprojektuj ikonę aplikacji, aby wznieść się ponad wszystkie swoje najlepsze konkurencyjne wybory.

Pytanie #2: Jakie obecne standardy projektowania należy śledzić?

Trendy projektowe zmieniają się cały czas. Jestem tu wystarczająco długo, aby pamiętać ostatnią zmianę logo Starbucks w 2011 roku. Czułem się trochę smutny, że syrena się przesuwa, ale ostatecznie projekt stał się synonimem mojej ulubionej kawiarni po raz kolejny i nie mogłem sobie wyobrazić powrotu do poprzedniego projektu.

Oczywiście, niektórzy uważają nowe logo za zbyt oszczędne i żartują, że w końcu będzie to nic innego jak zielona kropka.

Żartując na bok, ważne jest, aby śledzić bieżące trendy w projektowaniu i jak odnoszą się one do projektowania aplikacji. Zarówno Google Play Store, jak i App Store publikują aktualne wytyczne, których możesz (i powinieneś) przestrzegać.

Te wytyczne pomogą Ci stworzyć ikonę aplikacji z najbardziej nowoczesnym, przystępnym stylem.

Google’s Material Design oferuje dokładny zestaw wytycznych, które obejmują następujące tematy:

• Zasady projektowania, w tym wyrażanie marki i podejście projektowe
• Kształty siatki i linii kluczowej
• Specyfikacje – szczegółowy podział anatomii ikon aplikacji i specyfikacje oświetlenia
• Obróbka ikon: informacje o kolorze aplikacji, warstwie, punktacji, nakładaniu, akordeonie i zniekształcaniu

Material Design ma na celu pomoc w stworzeniu ikony aplikacji z dotykowym odczuciem poprzez medium pikseli. To skomplikowana rzecz, ale warto ją studiować.

Wytyczne firmy Apple dotyczące interfejsu ludzkiego czyta się w bardziej przyjazny sposób, który jest również łatwy do naśladowania. Zawierają dziesięć wskazówek, takich jak „Ujarzmij prostotę” i „Przetestuj swoją ikonę na różnych tapetach” wraz z instrukcjami, jak się do nich stosować.

Po tym, Apple oferuje informacje o tym, jak:

• Formatować atrybuty ikony aplikacji
• Produkować ikonę aplikacji w kilku różnych rozmiarach

• Dostarczanie ikon wybieranych przez użytkownika
• Tworzenie ikon oświetlenia punktowego, ustawień i powiadomień dla systemu iOS

Wytyczne dotyczące interfejsu człowieka są krótsze i pod wieloma względami prostsze niż wytyczne Google dotyczące Material Design, ale te ostatnie oferują więcej wskazówek dotyczących projektowania.

Pytanie #3: Jak mogę podpowiedzieć cel mojej aplikacji?

Jak widzieliśmy w przypadku aplikacji do nauki gry na pianinie, komunikowanie celu aplikacji odbiorcom jest niezwykle ważne.

Przyjrzyjmy się innemu przykładowi. Powiedzmy, że projektujesz ikonę aplikacji dla aplikacji, która pomaga pisarzom organizować ich myśli i pomysły. Być może Twoja aplikacja wyznacza również cele związane z liczbą słów i pozwala użytkownikom śledzić dzienny czas pisania. Na dodatek, być może Twoja aplikacja zawiera cytaty, które zachęcą pisarzy do pisania.

Kto więc jest Twoją publicznością?

Pisarze, oczywiście. Początkujący pisarze. Nowelistów. Wolni strzelcy. Dziennikarze. Każdy pisarz mógłby skorzystać z Twojej aplikacji!

Teraz spójrz na swoją konkurencję.

W App Store, wyszukaj „aplikacje dla pisarzy”, a otrzymasz cały wachlarz aplikacji organizacyjnych.

Skup się na ikonach aplikacji. Po pierwsze, jest tam wąsik z czerwonym tłem. Jeśli nie widzisz tytuł, nie będzie wiedział, że ta aplikacja jest nawet skierowany do pisarzy. Nawet wtedy, to jest niejasne, co aplikacja robi, dokładnie, aby pomóc pisarzy write.

Kolejna ikona aplikacji funkcje białe tło z czerwonym… papierowy samolot? Końcówka długopisu? Głowa łososia? To nie jest super jasne.

Ostatnia ikona aplikacji w naszym małym badaniu przedstawia długopis z żarówką na czarnym tle. Tylko patrząc na ikonę, masz poczucie, że ta aplikacja pomoże pisarzom tworzyć pomysły i utrzymać tę inspirację płynącą, aż zamieni się w książkę, artykuł lub wiersz.

Emuluj tę ikonę, nie dwie pierwsze. Podpowiedz, jaką funkcjonalność oferuje Twoja aplikacja.

Zauważ, że podpowiedź dotycząca funkcjonalności powinna wyglądać inaczej dla różnych typów aplikacji.

Jeśli na przykład stworzyłeś aplikację użytkową – taką jak kalkulator napiwków lub latarka – ikona aplikacji powinna sprawić, że osoba przeglądająca stronę poczuje się tak, jakby już korzystała z aplikacji, zanim jeszcze kliknie ikonę.

Ikona aplikacji poniżej nie osiąga tego celu, a co więcej, jest zatłoczona i trudna do odczytania.

Dla kontrastu, ikona poniższej aplikacji sprawia, że użytkownik czuje się tak, jakby mógł szybko uzyskać dostęp do tego kalkulatora napiwków, ponieważ jest on praktycznie już otwarty.

Ikony dla gier mobilnych również wymagają specjalnego traktowania. Twoim celem w ikonie aplikacji do gier jest sprawienie, aby odbiorca poczuł się jak zanurzony w świecie gry już teraz. Wszystko, co muszą zrobić, to kliknąć ikonę aplikacji, a oni dostaną przypływ dopaminy z grania w coś nowego, ekscytującego i satysfakcjonującego.

Oto świetny przykład ikony aplikacji, która to osiąga:

Możesz prawie poczuć pęd jazdy w dół wyboistego wzgórza tylko patrząc na tę ikonę aplikacji. To pyszny dreszczyk emocji, choć taki, który sprawia, że chcesz grać w tę grę.

Nie tak wspaniały przykład? Ta ikona aplikacji do gry w koszykówkę.

Czujesz się jakbyś… wpatrywał się w piłkę do koszykówki. A nie grasz w grę. NUDNE!

Pytanie #4: Jaki jest wygląd i styl mojej aplikacji?

Choć dobrym pomysłem jest ćwiczenie kreatywności podczas projektowania ikony aplikacji, nie chcesz, aby interfejs aplikacji i ikona aplikacji miały różne tekstury. Powinny one współpracować ze sobą w jednolitym systemie projektowania.

Oto dwie gry typu word-block, których ikony pasują do wyglądu i stylu gier, które reprezentują.

Ikona gry Word Stacks ma takie same kolory zachodzącego słońca i duże bloki słów jak sama gra.

Ikona aplikacji Woody Block Puzzle jest tak samo drewniana jak sama gra.

Nie chcesz doprowadzić odbiorców do myślenia, że Twoja aplikacja jest grą typu Woody Block, a następnie ujawnić zachód słońca w kolorze, spienione gry bloków słownych zamiast. Niespójny branding to kiepski projekt.

Jak pisze jeden z blogerów na 99designs, „Jeśli projekt Twojej aplikacji jest płaski, Twoja ikona również powinna być płaska. Jeśli Twoja aplikacja zawiera skeuomorfizm, Twoja ikona również powinna mieć przynajmniej jakiś element skeuomorfizmu.”

Spraw, aby ikona Twojej aplikacji odzwierciedlała kolory, tekstury i odczucia Twojej aplikacji tak bardzo, jak to tylko możliwe.

Wskazówki, o których należy pamiętać podczas projektowania ikony aplikacji

Teraz, gdy odpowiedziałeś na cztery podstawowe pytania dotyczące projektowania aplikacji, nadszedł czas, aby zacząć tworzyć kilka wariantów lub proponowanych projektów ikony aplikacji. Zacznij od podstawowego zarysu projektu, a następnie eksperymentuj z różnymi kolorami, obramowaniami i grafiką.

Oto kilka wskazówek, które Cię poprowadzą:

• Polegaj tylko na dwóch lub trzech kolorach. Więcej niż trzy i ikona aplikacji zaczyna wyglądać zbyt zajęty.
• Unikaj używania prawdziwej fotografii. Zawsze możesz przekształcić zdjęcie w ilustrację/obraz wektorowy, though.
• Myśl na małą skalę. Ikona Twojej aplikacji może wyglądać na dużą podczas jej projektowania, ale jest malutka na ekranie iPhone’a lub Androida. Upewnij się, że każdy element jest wyraźny nawet w najmniejszej formie ikony.
• Oszczędzaj słowa na tytuł i tagline. Ikona aplikacji ma mieć efekt wizualny. Możesz powiedzieć, co trzeba powiedzieć w słowach na tytuł, tagline, i opis aplikacji.
• Zawsze postępuj zgodnie z Apple i Google’s App Store wymagania wielkości ikony i wytyczne. Możesz znaleźć Google Play’s wymagania dotyczące wielkości tutaj i Apple App Store’s tutaj. Należy pamiętać, że trzeba będzie stworzyć kilka wersji ikony aplikacji dla każdego sklepu. Należy również pamiętać, że nawet jeśli App Store na iPhone posiada zaokrąglone rogi, należy przesłać wszystkie pliki aplikacji w formie kwadratu. System Apple będzie zaokrąglać rogi dla Ciebie.

Odkąd masz dwa lub trzy potencjalne ikony aplikacji do wyboru, nadszedł czas na najważniejszy etap podróży ikony tworzenia aplikacji: split-testing ikony, aby dowiedzieć się, co myśli docelowej publiczności.

Poza App Store rozmiar ikony: split-testing ikony aplikacji na PickFu

Najlepszym sposobem, aby dowiedzieć się, co twój docelowy publiczność myśli o ikonie aplikacji jest split-test go na PickFu przed rzeczywiście opublikować swoją listę aplikacji w Google Play Store lub App Store. Jasne, można zrobić w-app A / B test i uruchomić kilka wariantów na samym sklepie, ale jest to powolny proces, który może ssać swój czas i pieniądze.

By split-testing do puli respondentów na PickFu przed delegowaniem ikony aplikacji na żywo, można uzyskać informacje zwrotne, których potrzebujesz bez utraty pieniędzy w procesie.

To trwa tylko kilka minut, aby skonfigurować ankietę na PickFu. Pamiętasz, jak mówiłem, że targetowanie odbiorców jest kluczowe? PickFu ułatwi Ci to. Można kierować członków widowni przez iOS lub Android urządzenia, czy są one mobilny gracz, i ile wydali w App Store, wśród wielu innych przydatnych cech.

Jeden deweloper aplikacji niedawno wziął do PickFu, aby przetestować między dwoma ikonami dla aplikacji randkowej.

Pierwsza ikona pokazuje różowy profil kobiety trzymającej telefon, tytuł aplikacji w dwóch różnych kolorach oraz czerwonawe i pomarańczowe tło. W sumie, ta ikona aplikacji zawiera około sześciu różnych kolorów.

Druga opcja eliminuje kobietę, utrzymuje bardziej opływowe pomarańczowo-czerwone tło i pozostawia słowa, ale w kolorze białym z małym serduszkiem włożonym w zakręt litery M. Ta ikona aplikacji zawiera tylko trzy kolory.

Respondenci w przeważającej większości zagłosowali za prostszą, czystszą opcją B. W przeciwieństwie do tradycyjnego testu A/B na żywo, respondenci PickFu przekazują Ci szczegółowe informacje zwrotne w formie pisemnej. Możemy więc dokładnie zobaczyć, dlaczego wygrała opcja B.

Przede wszystkim, respondenci docenili prostszy, bardziej profesjonalny wygląd Opcji B, mówiąc takie rzeczy jak: „Po prostu podoba mi się prostota tego i nie wyróżnia jednej płci do użytku” i „Naprawdę nie podoba mi się jasna fioletowa/różowa kolorystyka w Opcji A – to naprawdę trudne dla oczu.”

Mając nadzieję, że twórca aplikacji poszedł z drugą ikoną aplikacji, która jest o wiele bardziej prawdopodobne, aby przyciągnąć potencjalnych użytkowników niż Opcja A.

.