Melyik a megfelelő App Store ikonméret? Mit kell ábrázolnia az ikonján? Milyen különbséget jelent mindez? Ez az alkalmazásikonokra vonatkozó útmutató segít megválaszolni ezeket a fontos kérdéseket, tippeket ad, és hivatkozik forrásokra.
- Miért számítanak az alkalmazásikonok
- Az alkalmazás ikonja nem logó
- App Store ikon mérete: 4 kérdés, amit fel kell tenned, mielőtt elkészíted az alkalmazás ikonját
- Kérdés #1: Ki a célközönsége ennek az alkalmazásnak?
- Kérdés #2: Milyen aktuális tervezési szabványokat kell követnem?
- 3. kérdés: Hogyan utalhatok az alkalmazásom céljára?
- 4. kérdés: Milyen legyen az alkalmazásom megjelenése?
- Tippek, amelyeket szem előtt kell tartanod alkalmazásod ikonjának tervezése során
- Az App Store ikonméretén túl: alkalmazásikonok osztott tesztelése a PickFu-n
Miért számítanak az alkalmazásikonok
Az alkalmazásbolt ikonméret apró. Amikor az ikonok megjelennek az okostelefon képernyőjén, mindegyik csak egy hüvelykujjnyi helyet foglal el. De az Apple App Store-ban vagy a Google Play Store-ban az a dizájn, amit ebbe a kis alkalmazásbolt ikonméretbe pakolsz, mindent jelent.
A könyvborítókhoz vagy az Amazonon található terméklisták képeihez hasonlóan a mobilalkalmazások ikonjai is segítenek a potenciális vásárlóknak a másodperc tört része alatt gyors ítéletet hozni.
Még mielőtt elolvasnák az alkalmazás címét vagy leírását, meglátják az ikont. A mobilalkalmazás ikonjának vonzó módon kell mesélnie nekik az alkalmazásról, arra ösztönözve őket, hogy többet tudjanak meg. Ha valaki rákattint az ikonra, nagyobb valószínűséggel telepíti az alkalmazást. És ez az, amit Ön is szeretne. Alapvetően az alkalmazásod ikonja a telepítések kapuja.
Ez az, amiért nagyon fontos, hogy jól csináld.
Az alkalmazás ikonja nem logó
A legegyszerűbbnek tűnhet, ha egyszerűen csak átviszed a márka logóját az alkalmazás ikonjára, és kész. Ne tegye. Az alkalmazás ikonja nem logó. A logó az alkalmazás mögött álló márkát képviseli, igen, de az alkalmazás ikonja magát az alkalmazást képviseli.
Amint ahogyan nem használna logót a termékkép helyett egy Amazon hirdetési listán, úgy nem szabad egy logót belecsapni az alkalmazásbolt ikonméretre vonatkozó követelményeibe, és ikonnak nevezni. Ezt csak az olyan megamárkák, mint a Starbucks vagy a Target ússzák meg.
Ha azonban egy tisztességesen bevezetett és ismert márka vagy, nyugodtan hozzáadhatod a logódat valamilyen módon az alkalmazásod ikonjához, de ne ez legyen a középpontban.
A lenti példában a jól ismert Lonely Planet utazási könyvkiadó a Guides by Lonely Planet alkalmazás ikonjába beépíti a logóját. A logó azonban csak egy darabja az alkalmazás dizájnjának. A nyugtató kék szegély a meleg, sárga tónusú városképet dobja fel, meghívva a nézőt a következő kalandra.
A szlogen szerint ez az alkalmazás “kuratált városkalauzok” gyűjteménye, és az alkalmazás ikonja utal erre a funkcióra.
Aki szeret új városokat felfedezni, és aki az “útikönyvek” keresőjét futtatja az üzletben, azt vonzza ez a meleg, mégis izgalmas alkalmazásikon.
Hasonlítsa össze a Lonely Planet alkalmazást egy másik útikönyv-alkalmazással, amelyet ugyanarra a keresésre talál.
mTrip átveszi az M betűt a logójából, zöld hátteret ad hozzá, és egy hüvelykujjat ad magának, hogy az ikon felkerüljön az App Store-ba.
De az ikon semmit sem mond arról, hogy mit kap a felhasználó, és az mTrip nem elég ismert ahhoz, hogy egyetlen betű alapján is felismerhető legyen. Az alább látható Netflix szintén a logójának első betűjét veszi és használja alkalmazásikonként, de ez a márka azért tudja kihúzni, mert mindenki tudja, mi a Netflix és mit csinál.
Most, hogy már tudja, mi a különbség egy logó és egy alkalmazásikon között, nézzük meg, milyen fontos kérdéseket kell feltennie magának, mielőtt elkezdi a tervezést.
App Store ikon mérete: 4 kérdés, amit fel kell tenned, mielőtt elkészíted az alkalmazás ikonját
Az igaz, hogy az alkalmazásod ikonjának minél több szemet kell vonzania. Azt akarod, hogy kitűnjön a körülötte lévő összes alkalmazásikon közül, és az alkalmazásokkal telített világban ez nem könnyű feladat.
De van egy titok: nem kell, hogy az alkalmazás ikonja a világon mindenki számára vonzó legyen. Ehelyett koncentrálj arra, hogy a célközönségedhez tartozó emberek számára vonzó legyen.
Az első kérdés tehát a következő:
Kérdés #1: Ki a célközönsége ennek az alkalmazásnak?
Az alkalmazásod azoknak szól, akik szeretnek főzni? Kisgyerekes szülőknek? Az olyan játékok szerelmeseinek, mint a Candy Crush és az Angry Birds? Utazók? Kezdő zenészek?
Mivel már elkészítette az alkalmazást, tudnia kell a választ erre a kérdésre. De tegye ezt az alkalmazás ikontervezésének középpontjába is.
Keresd meg azt az egyszerű kifejezést, amely meghatározza a célközönségedet.
Tegyük fel például, hogy az alkalmazásod zongorázni tanítja az embereket. A “zongoratanulás” keresés a Google Play áruházban ezeket a top alkalmazásokat hozza fel.
A négy alkalmazás ikonja közül melyikre kattintana, ha többet szeretne megtudni?
Egy volt zongorista számára, aki szívesen megtanulná újra, amit egykor tudott, ez az alkalmazás nyer. Kéz a kézben.
A Flowkey alkalmazás ikonját egyáltalán nem találom vonzónak, mert nem mond semmit a zongorázásról. (Megint csak alapvetően egy logó és semmi több). A másik kettőnél zongorabillentyűk vannak az ikonon belül – talán elvárható, de teljesen rendben van.
Számomra a Real Piano Teacher győz, mert felcímkézett billentyűkön zongorázó kezeket mutat, a játszó személy előtt pedig egy kottalap van.
Zongorázni nem lehet megtanulni a kották megtanulása nélkül, és a kottaolvasás megtanulása ugyanolyan kihívás lehet, mint egy írott nyelv elsajátítása. Ez az alkalmazás már csak az alkalmazás ikonja alapján is azt ígéri, hogy segít a felhasználóknak megtanulni a kottaolvasást, és ezzel közelebb hozza őket álmuk megvalósításához, hogy saját maguk játsszanak gyönyörű dallamokat.
Itt van a bökkenő: Önnek, mint alkalmazáskészítőnek, fel kell tennie magának a kérdést, hogyan tehetem az alkalmazás ikonját még jobbá, mint az általam legjobban kedvelt (Real Piano Teacher’s).
Tervezze meg az alkalmazás ikonját úgy, hogy kiemelkedjen a legjobb versenytársak közül.
Kérdés #2: Milyen aktuális tervezési szabványokat kell követnem?
A tervezési trendek folyamatosan változnak. Elég régóta vagyok a pályán ahhoz, hogy emlékezzek a legutóbbi, 2011-es Starbucks logóváltásra. Kicsit szomorú voltam, hogy a sziréna változik, de végül a dizájn ismét a kedvenc kávézóm szinonimájává vált, és nem tudtam elképzelni, hogy visszatérjen a korábbi dizájnhoz.
Az új logót persze egyesek túl takarékosnak találják, és azzal viccelődnek, hogy végül csak egy zöld pont lesz belőle.
A viccet félretéve, fontos, hogy nyomon kövessük az aktuális designtrendeket, és hogy ezek hogyan kapcsolódnak az alkalmazásunk tervezéséhez. Mind a Google Play Store, mind az App Store naprakész irányelveket tesz közzé, amelyeket követhet (és követnie is kell).
Ezek az iránymutatások segítenek abban, hogy a lehető legmodernebb, legközérthetőbb hangulatú alkalmazásikonokat hozzon létre.
A Google Material Design alapos irányelveket kínál, amelyek a következő témakörökre terjednek ki:
- Tervezési alapelvek, beleértve a márkakifejezést és a tervezési megközelítést
- Rács és kulcsvonal formák
- Specs – az alkalmazásikonok anatómiájának és világítási előírásainak részletes lebontása
- Ikonkezelés: információk az alkalmazás színéről, a rétegről, a pontozásról, az átfedésről, a harmonikáról és a torzításról
Az anyagtervezés célja, hogy a pixelek segítségével tapintható tapintású alkalmazásikonokat hozzon létre. Ez összetett dolog, de érdemes tanulmányozni.
Az Apple Human Interface Guidelines (Emberi felhasználói felületre vonatkozó irányelvek) barátságosabban olvasható, és könnyen követhető is. Tíz tippet kínál, például “Fogadd el az egyszerűséget” és “Teszteld az ikonodat különböző háttérképekkel”, a követésükre vonatkozó utasításokkal együtt.
Ezek után az Apple tájékoztatást nyújt arról, hogyan:
- Az alkalmazásikon attribútumainak formázása
- Az alkalmazásikon többféle méretben történő előállítása
- A felhasználó által választható ikonok előállítása
- Fényszóró, beállítások és értesítési ikonok készítése az iOS számára
Míg a Human Interface Guidelines rövidebb és sok szempontból egyszerűbb, mint a Google Material Design irányelvei, az utóbbi több tervezési tippet kínál.
3. kérdés: Hogyan utalhatok az alkalmazásom céljára?
Amint azt a zongorázni tanuló alkalmazások esetében láttuk, az alkalmazás céljának kommunikálása a közönség felé kritikusan fontos.
Vessünk egy pillantást egy másik példára. Tegyük fel, hogy egy olyan alkalmazás ikonját tervezzük egy olyan alkalmazáshoz, amely segít az íróknak gondolataik és ötleteik rendszerezésében. Lehet, hogy az alkalmazásod szócélokat is kitűz, és lehetővé teszi a felhasználók számára a napi írási idő nyomon követését. Ráadásul az alkalmazásod talán idézeteket is kínál, hogy az írókat írásra ösztönözze.
Szóval, ki a célközönséged?
Az írók, természetesen. Kezdő írók. Regényírók. Szabadúszók. Újságírók. Minden írónak jól jönne az alkalmazásod!
Most vess egy pillantást a konkurenciára.
Az App Store-ban keressen rá a “apps for writers” kifejezésre, és egy sor szervezőalkalmazást fog kapni.
Fókuszálj itt az alkalmazások ikonjaira. Először is, ott van egy bajusz piros háttérrel. Ha nem látnád a címet, nem tudnád, hogy ez az alkalmazás egyáltalán íróknak szól. Még akkor sem világos, hogy az alkalmazás pontosan mit is csinál, hogy segítsen az íróknak írni.
A következő alkalmazás ikonja fehér hátterű, piros… papírrepülővel? Tollhegy? Lazacfej? Nem szuper egyértelmű.
A kis tanulmányunk utolsó alkalmazásikonja egy izzó tollat ábrázol fekete háttér előtt. Már az ikonra ránézve is az az érzésünk, hogy ez az alkalmazás segít az íróknak ötleteket formálni, és az inspiráció addig folyik, amíg könyvvé, cikké vagy verssé nem válik.
Ez az ikon, nem pedig az első kettő. Utaljon az alkalmazásod által kínált funkcióra.
Figyeljen arra, hogy a funkcióra való utalásnak különbözőképpen kell kinéznie a különböző típusú alkalmazások esetében.
Ha például egy használati alkalmazást készített – például egy borravaló-kalkulátort vagy egy zseblámpát -, az alkalmazás ikonjának azt kell éreztetnie a böngészővel, hogy már azelőtt használja az alkalmazást, hogy az ikonra kattintana.
A lenti alkalmazásikon nem éri el ezt a célt, ráadásul zsúfolt és nehezen olvasható.
Az alábbi alkalmazás ikonja ezzel szemben azt az érzést kelti, hogy gyorsan elérheti ezt a borravaló-kalkulátort, mert gyakorlatilag már nyitva van.
A mobiljátékok ikonjai is különleges kezelést igényelnek. A célod egy játékalkalmazás ikonjánál az, hogy a néző úgy érezze, máris elmerült a játék világában. Csak annyit kell tennie, hogy rákattint az alkalmazás ikonjára, és máris elkapja a dopaminlöket, hogy valami új, izgalmas és kifizetődő játékkal játszik.
Itt egy remek példa egy olyan alkalmazás ikonra, amely ezt megvalósítja:
Szinte már az alkalmazás ikonjára pillantva is érezheti a döcögős hegyoldalon való lovaglás lökését. Azért ez egy finom izgalom, ami arra késztet, hogy játszani akarj a játékkal.
Egy nem túl jó példa? Ez az alkalmazás ikonja egy kosárlabdajátékhoz.
Úgy érzed, mintha… egy kosárlabdát bámulnál. Nem pedig egy játékot játszol. Unalmas!
4. kérdés: Milyen legyen az alkalmazásom megjelenése?
Bár jó ötlet kreativitást gyakorolni az alkalmazás ikonjának megtervezésekor, ne akarja, hogy az alkalmazás felülete és az alkalmazás ikonja különböző textúrájú legyen. Egy zökkenőmentes tervezési rendszerben kell együttműködniük.
Itt van két szótömbös játék, amelyek ikonjai megfelelnek az általuk képviselt játékok megjelenésének.
A Word Stacks ikonja ugyanolyan naplementés színekkel és vaskos szótömbökkel rendelkezik, mint maga a játék.
A Woody Block Puzzle alkalmazásikonja ugyanolyan fás, mint maga a játék.
Nem akarod elhitetni a közönséggel, hogy az alkalmazásod egy fapados blokk típusú játék, de ehelyett egy naplementeszínű, habos szótömbös játékot fedezel fel. A következetlen márkaépítés rossz dizájn.
Ahogy egy blogger írja a 99designs oldalon: “Ha az alkalmazásod dizájnja lapos, az ikonodnak is laposnak kell lennie. Ha az alkalmazásod szkeuomorfizmust tartalmaz, az ikonodnak is tartalmaznia kell legalább valamilyen szkeuomorfikus elemet”.
Az alkalmazás ikonja a lehető legnagyobb mértékben tükrözze az alkalmazás színeit, textúráit és hangulatát.
Tippek, amelyeket szem előtt kell tartanod alkalmazásod ikonjának tervezése során
Most, hogy megválaszoltad a négy alapvető alkalmazás-tervezési kérdést, itt az ideje, hogy elkezdj több variációt vagy tervjavaslatot készíteni az alkalmazásod ikonjára. Kezdje egy alapvető tervezési vázlattal, majd kísérletezzen különböző színekkel, szegélyekkel és grafikákkal.
Íme néhány tipp, amely eligazítja:
- Csak két vagy három színre támaszkodjon. Háromnál több, és az alkalmazás ikonja túlságosan zsúfoltnak kezd tűnni.
- Kerülje a valódi fényképek használatát. Bár egy fényképet bármikor átalakíthatsz illusztrációvá/vektorképpé.
- Gondolkodj kicsiben. Lehet, hogy az alkalmazásod ikonja nagynak tűnik neked, miközben tervezed, de egy iPhone vagy Android képernyőjén aprónak tűnik. Győződj meg róla, hogy minden elem még az ikon legkisebb formájában is jól látható.
- Spórolj szavakat a címre és a szlogenre. Egy alkalmazás ikonjának vizuális hatást kell kifejtenie. A címben, a szlogenben és az alkalmazás leírásában szavakkal is elmondhatja, amit el kell mondania.
- Mindig tartsa be az Apple és a Google alkalmazásboltok ikonméretre vonatkozó követelményeit és irányelveit. A Google Play méretkövetelményeit itt, az Apple App Store-ét pedig itt találja. Ne feledje, hogy az alkalmazás ikonjának több változatát kell létrehoznia az egyes áruházak számára. Azt is vegye figyelembe, hogy bár az iPhone App Store lekerekített sarkokkal rendelkezik, az összes alkalmazásfájlt négyzet alakban kell benyújtania. Az Apple rendszere lekerekíti a sarkokat helyetted.
Ha már van két-három potenciális alkalmazásikonod, amelyek közül választhatsz, itt az ideje az alkalmazásikon-alkotás legfontosabb lépésének: az ikonok osztott tesztelésének, hogy megtudd, mit gondol a célközönséged.
Az App Store ikonméretén túl: alkalmazásikonok osztott tesztelése a PickFu-n
A legjobb módja annak, hogy megtudja, mit gondol a célközönség az alkalmazás ikonjáról, ha osztott tesztelést végez a PickFu-n, mielőtt ténylegesen közzéteszi az alkalmazáslistáját a Google Play Store-ban vagy az App Store-ban. Persze, csinálhatna egy alkalmazáson belüli A/B tesztet, és futtathatna több variációt magában a Store-ban, de ez egy lassú folyamat, amely elszívhatja az idejét és a pénzét.
A PickFu-n a válaszadók egy csoportján végzett osztott teszteléssel, mielőtt élőben közzéteszi az alkalmazás ikonját, megkapja a szükséges visszajelzést anélkül, hogy pénzt veszítene a folyamat során.
A PickFun mindössze néhány percet vesz igénybe egy szavazás beállítása. Emlékszel, hogy azt mondtam, hogy a közönségcélzás kulcsfontosságú? A PickFu ezt megkönnyíti számodra. A közönség tagjait megcélozhatja iOS- vagy Android-eszköz, mobiljátékosok-e, és hogy mennyit költöttek az App Store-ban, sok más hasznos tulajdonság mellett.
Egy alkalmazásfejlesztő nemrég a PickFu segítségével tesztelt két ikon között egy társkereső alkalmazáshoz.
Az első ikonon egy telefont tartó nő rózsaszín profilja, az alkalmazás címe két különböző színben, valamint vöröses és narancssárga háttér látható. Összességében ez az alkalmazás ikon körülbelül hat különböző színt tartalmaz.
A második lehetőség eltünteti a nőt, megtartja az áramvonalasabb narancsvörös hátteret, és meghagyja a szavakat, de fehér színben, egy kis szívvel az M betű hajlatába dugva. Ez az alkalmazás ikon csak három színt tartalmaz.
A válaszadók túlnyomó többségükben az egyszerűbb, letisztultabb B opció mellett szavaztak. A hagyományos élő A/B-tesztekkel ellentétben a PickFu válaszadói részletes írásos visszajelzést adnak. Így pontosan láthatjuk, hogy miért a B opció nyert.
Először is, a válaszadók értékelték a B opció egyszerűbb, professzionálisabb megjelenését, és olyan dolgokat mondtak, mint például: “Tetszik az egyszerűsége, és nem emel ki egy nemet a használatból” és “Nagyon nem szeretem az A opció élénk lila/rózsaszín színezését – nagyon megviseli a szemet.”
Az alkalmazásfejlesztő remélhetőleg a második alkalmazás ikonját választotta, amely sokkal inkább vonzza a potenciális felhasználókat, mint az A opció.
