App Store Icon Size: Tiedostovaatimukset, suunnitteluvinkit ja parhaat käytännöt

Mikä on oikea App Storen kuvakekoko? Mitä sinun tulisi kuvata kuvakkeessasi? Mitä eroa sillä kaikella on? Tämä opas sovelluskuvakkeista auttaa vastaamaan näihin tärkeisiin kysymyksiin, antaa vinkkejä ja linkittää resursseihin.

Miksi sovelluskuvakkeilla on väliä

Sovelluskaupan kuvakekoko on pieni. Kun kuvakkeet näkyvät älypuhelimesi näytöllä, ne vievät kukin vain peukalon leveyden verran tilaa. Mutta Applen App Storessa tai Google Play Storessa tähän pieneen sovelluskaupan kuvakekokoon pakkaamasi muotoilu on kaikki kaikessa.

Kuten kirjan kannet tai Amazonin tuotelistauskuvat, mobiilisovellusten kuvakkeet auttavat potentiaalisia asiakkaitasi tekemään pikaisen arvion sekunnin murto-osassa.

Ennen kuin he lukevat sovelluksen otsikon tai kuvauksen, he näkevät kuvakkeen. Mobiilisovelluskuvakkeesi on kerrottava heille sovelluksestasi houkuttelevalla tavalla, mikä saa heidät haluamaan lisätietoja. Kun joku on klikannut kuvakettasi, hän todennäköisesti asentaa sovelluksesi. Ja sitä sinä haluat. Sovelluksen kuvake on periaatteessa portti asennuksiin.

Sentähden on ratkaisevan tärkeää saada se oikein.

Sovelluskuvake ei ole logo

Voi tuntua helpoimmalta vain siirtää brändilogosi sovelluskuvakkeeseen ja päättää asia. Älä tee niin. Sovelluskuvake ei ole logo. Logo edustaa kyllä sovelluksen taustalla olevaa brändiä, mutta sovelluskuvake edustaa itse sovellusta.

Aivan kuten et käyttäisi logoa tuotekuvan sijasta Amazonin listauksessa, sinun ei pitäisi lätkäistä logoa sovelluskaupan kuvakkeen kokovaatimuksiin ja kutsua sitä kuvakkeeksi. Vain megabrändit kuten Starbucks tai Target voivat selvitä tästä.

Jos olet kuitenkin kohtuullisen vakiintunut ja tunnettu brändi, voit vapaasti lisätä logosi sovelluskuvakkeeseen jollain tavalla, mutta älä tee siitä keskipistettä.

Oheisessa esimerkissä tunnettu matkakirjojen kustantaja Lonely Planet sisällyttää logonsa Guides by Lonely Planetin sovelluskuvakkeeseen. Logo on kuitenkin vain yksi osa sovelluksen suunnittelua. Rauhoittava sininen reunus saa lämpimän keltaisen sävyisen kaupunkikuvan ponnahtamaan esiin ja kutsuu katsojan seuraavaan seikkailuun.

Sloganin mukaan tämä sovellus on kokoelma ”kuratoituja kaupunkioppaita”, ja sovelluskuvake vihjaa tähän toimintoon.

Kuka tahansa, joka rakastaa tutustua uusiin kaupunkeihin ja joka suorittaa kaupassa haun hakusanalla ”matkaoppaat”, ihastuu tähän lämpimään ja samalla jännittävään sovelluskuvakkeeseen.

Vertaile Lonely Planet -sovellusta toiseen matkaoppaiden sovellukseen, jonka löydät samalla haulla.

mTrip ottaa M-kirjaimen logostaan, lisää siihen vihreän taustan ja antaa itselleen peukut pystyyn, jotta se voi lähettää kuvakkeen App Storeen.

Mutta kuvake ei kerro mitään siitä, mitä käyttäjä saa, eikä mTrip ole tarpeeksi tunnettu ollakseen tunnistettavissa yhden kirjaimen perusteella. Alla oleva Netflix ottaa myös ensimmäisen kirjaimen logostaan ja käyttää sitä sovelluskuvakkeena, mutta tämä brändi onnistuu siinä, koska kaikki tietävät, mikä Netflix on ja mitä se tekee.

Nyt kun tiedät logon ja sovelluskuvakkeen eron, katsotaanpa tärkeitä kysymyksiä, jotka sinun on kysyttävä itseltäsi ennen suunnittelun aloittamista.

Sovelluskaupan kuvakkeen koko: 4 kysymystä, jotka kannattaa kysyä ennen sovelluskuvakkeen luomista

On totta, että sovelluskuvakkeesi on houkuteltava mahdollisimman monen silmää. Haluat sen erottuvan kaikista ympärillä olevista sovelluskuvakkeista, ja sovellusten kyllästämässä maailmassa se ei ole helppo tehtävä.

Mutta tässä on salaisuus: sinun ei tarvitse tehdä sovelluskuvakkeestasi kaikkia maailman ihmisiä kiinnostavaa. Sen sijaan keskity siihen, että se vetoaa kohderyhmäsi ihmisiin.

Tässä on siis ensimmäinen kysymys, jota kannattaa pohtia.

Kysymys #1: Kuka on tämän sovelluksen kohderyhmä?

Onko sovelluksesi ihmisille, jotka rakastavat kokkaamista? Vanhemmille, joilla on pieniä lapsia? Candy Crushin ja Angry Birdsin kaltaisten pelien ystäville? Matkailijoille? Aloitteleville muusikoille?

Koska olet jo rakentanut sovelluksen, sinun pitäisi tietää vastaus tähän kysymykseen. Mutta tee siitä myös sovelluksen kuvakkeiden suunnittelun painopiste.

Hae yksinkertainen lause, joka määrittelee kohderyhmäsi.

Sanotaan esimerkiksi, että sovelluksesi opettaa ihmisiä soittamaan pianoa. Haku Google Play -kaupassa hakusanalla ”opettele pianonsoittoa” tuo esiin nämä suosituimmat sovellukset.

Neljästä sovelluksen kuvakkeesta, mitä napsauttaisit saadaksesi lisätietoja?

Minulle, entiselle pianistille, joka haluaisi oppia uudelleen sen, mitä kerran osasin, tämä voittaa. Hands down.

En pidä Flowkeyn sovelluskuvaketta lainkaan houkuttelevana, koska se ei kerro minulle mitään pianonsoitosta. (Taas se on periaatteessa logo eikä mitään muuta). Kahdessa muussa on pianonäppäimet kuvakkeen sisällä – ehkä odotettua, mutta täysin ok.

Minulle Real Piano Teacher voittaa, koska siinä näkyy kädet soittamassa pianoa merkityillä näppäimillä ja nuottilevy soittajan edessä.

Pianonsoittoa ei voi oppia soittamaan oppimatta nuotteja, ja nuottien lukemisen oppiminen voi olla yhtä haastavaa kuin kirjoitetun kielen lukemisen oppiminen. Pelkästään sovelluskuvakkeensa avulla tämä sovellus lupaa auttaa käyttäjiä oppimaan nuottien lukemista, mikä nopeuttaa heitä lähemmäs unelmansa saavuttamista kauniiden sävelten soittamisesta omin avuin.

Nyt tässä on juju: sinun on sovelluksen luojana kysyttävä itseltäsi, miten voin tehdä sovelluskuvakkeestani vieläkin paremman kuin se, josta pidän eniten (Real Piano Teacher’s)?

Suunnittele sovelluskuvakkeesi niin, että se nousee kaikkien muiden kilpailijavaihtoehtojesi yläpuolelle.

Kysymys nro 2: Mitä nykyisiä suunnittelustandardeja minun pitäisi noudattaa?

Suunnittelun trendit muuttuvat koko ajan. Olen ollut alalla tarpeeksi kauan muistaakseni viimeisimmän Starbucksin logomuutoksen vuonna 2011. Minusta tuntui hieman surulliselta, että sireeni oli siirtymässä, mutta lopulta muotoilusta tuli jälleen kerran synonyymi suosikkikahvilalleni, enkä voisi kuvitella sen palaavan entiseen muotoiluunsa.

Joidenkin mielestä uusi logo on tietysti liian säästeliäs ja he vitsailevat, että lopulta se on pelkkä vihreä piste.

Vitsien lisäksi on tärkeää seurata nykyisiä muotoilutrendejä ja sitä, miten ne liittyvät sovelluksen suunnitteluun. Sekä Google Play Store että App Store julkaisevat ajantasaisia ohjeita, joita voit (ja kannattaa) noudattaa.

Nämä ohjeet auttavat sinua luomaan mahdollisimman modernin ja helposti lähestyttävän sovelluskuvakkeen.

Googlen Material Design tarjoaa perusteelliset ohjeet, jotka kattavat seuraavat aiheet:

• Suunnitteluperiaatteet, mukaan lukien brändi-ilmaisu ja suunnittelun lähestymistapa
• Ruudukko- ja avainviivamuodot
• Specs – yksityiskohtainen jaottelu sovelluskuvakkeen anatomiasta ja valaistusmäärittelyistä
• Kuvakkeiden käsittelyt: tietoa sovelluksen väristä, kerroksellisuudesta, pisteytyksestä, päällekkäisyydestä, harmonikasta ja vääristymästä

Materiaalisuunnittelun tavoitteena on auttaa sinua luomaan sovelluskuvake, jolla on tuntuma pikseleiden välityksellä. Se on monimutkaista tavaraa, mutta sitä kannattaa opiskella.

Applen käyttöliittymäohjeet (Human Interface Guidelines) lukee ystävällisemmällä tavalla, jota on myös helppo seurata. Se tarjoaa kymmenen vinkkiä, kuten ”Embrace simplicity” ja ”Testaa kuvakettasi eri taustakuvia vasten”, sekä ohjeita niiden noudattamiseen.

Tämän jälkeen Apple tarjoaa tietoa siitä, miten:

• Muotoile sovelluskuvakkeen attribuutit
• Tuota sovelluskuvake useassa eri koossa

• Tarjoa käyttäjän valittavissa olevia kuvakkeita
• Tuo iOS:n valokeila-, asetus- ja ilmoituskuvakkeet

Human Interface Guidelines on lyhyempi ja monin tavoin yksinkertaisempi kuin Googlen Material Design -ohjeet, mutta jälkimmäinen tarjoaa enemmän suunnitteluvinkkejä.

Kysymys #3: Miten voin vihjata sovellukseni tarkoituksesta?

Kuten näimme pianonsoittoa opettelevien sovellusten tapauksessa, sovelluksen tarkoituksen viestiminen yleisölle on ratkaisevan tärkeää.

Katsotaanpa toista esimerkkiä. Sanotaan, että suunnittelet sovelluskuvaketta sovellukselle, joka auttaa kirjoittajia järjestämään ajatuksiaan ja ideoitaan. Ehkä sovelluksesi asettaa myös sanamäärätavoitteita ja antaa käyttäjien seurata päivittäistä kirjoittamisaikaa. Tämän lisäksi sovelluksesi tarjoaa ehkä potkua kirjoittajien kirjoittamiseen antavia sitaatteja.

Kuka on siis kohderyhmäsi?

Kirjailijat, tietenkin. Aloittelevat kirjoittajat. Kirjailijat. Freelancerit. Toimittajat. Jokainen kirjailija voisi käyttää sovellustasi!

Katsokaa nyt kilpailijoitanne.

Etsi App Storesta ”apps for writers”, ja saat joukon organisointisovelluksia.

Keskity tässä sovelluskuvakkeisiin. Ensin on viikset punaisella pohjalla. Jos et näkisi otsikkoa, et tietäisi, että tämä sovellus on edes suunnattu kirjoittajille. Silloinkin on epäselvää, mitä sovellus tarkalleen ottaen tekee auttaakseen kirjoittajia kirjoittamaan.

Seuraavassa sovelluskuvakkeessa on valkoinen tausta, jossa on punainen… paperilentokone? Kynän kärki? Lohen pää? Se ei ole super selvä.

Pienen tutkimuksemme viimeisessä sovelluskuvakkeessa on hehkulamppukynä mustaa taustaa vasten. Pelkästään kuvaketta katsomalla saa sen käsityksen, että tämä sovellus auttaa kirjoittajia muodostamaan ideoita ja pitämään inspiraation virtaa, kunnes se muuttuu kirjaksi, artikkeliksi tai runoksi.

Emmentoi tätä kuvaketta, ei kahta ensimmäistä. Vihjaa sovelluksesi tarjoamasta toiminnallisuudesta.

Huomaa, että toiminnallisuuteen vihjaamisen tulisi näyttää erilaiselta erityyppisten sovellusten kohdalla.

Jos olet luonut esimerkiksi hyötysovelluksen – kuten tippilaskurin tai taskulampun – sovelluskuvakkeen tulisi saada selaava henkilö tuntemaan, että hän käyttää sovellusta jo ennen kuin hän edes klikkaa kuvaketta.

Oheinen sovelluskuvake ei saavuta tätä tavoitetta, ja kaiken lisäksi se on ahdas ja vaikealukuinen.

Oheinen sovelluskuvake sen sijaan antaa tunteen, että tähän tippilaskuriin pääsee nopeasti käsiksi, koska se on käytännössä jo auki.

Kännykkäpelien kuvakkeet kaipaavat myös erityiskohtelua. Pelisovelluksen ikonin tavoitteena on saada katsoja tuntemaan, että hän on jo uppoutunut pelin maailmaan. Hänen tarvitsee vain napsauttaa sovelluskuvaketta, ja hän saa dopamiinihuuman pelatessaan jotain uutta, jännittävää ja palkitsevaa.

Tässä on hyvä esimerkki sovelluskuvakkeesta, jolla tämä onnistuu:

Voit melkeinpä tuntea huuman, joka syntyy, kun ratsastat kuoppaista kukkulaa pitkin jo pelkästään tätä sovelluskuvaketta katsomalla. Se on kuitenkin herkullinen jännitys, joka saa pelaamaan peliä.

Ei niin hyvä esimerkki? Tämä koripallopelin sovelluskuvake.

Tuntuu kuin… tuijottaisi koripalloa. Etkä pelaa peliä. Tylsää!

Kysymys #4: Millainen on sovellukseni ulkoasu?

Vaikka on hyvä käyttää luovuutta sovelluskuvaketta suunnitellessa, et halua, että sovelluksen käyttöliittymällä ja sovelluskuvakkeella on eri tekstuurit. Niiden pitäisi toimia yhdessä saumattomassa suunnittelujärjestelmässä.

Tässä on kaksi sanalohkopeliä, joiden kuvakkeet vastaavat niiden edustamien pelien ulkoasua.

Word Stacksin kuvakkeessa on samat auringonlaskun värit ja muhkeat sanapalikat kuin itse pelissä.

Woody Block Puzzlen sovelluskuvake on yhtä puinen kuin itse peli.

Et halua johdattaa yleisöäsi luulemaan, että sovelluksesi on puupalikkatyyppinen peli, mutta paljastat sen sijaan auringonlaskun värisen, vaahtoavan sanapalikkapelin. Epäjohdonmukainen brändäys on huonoa suunnittelua.

Kuten eräs bloggaaja kirjoittaa 99designs-sivustolla: ”Jos sovelluksesi muotoilu on litteä, myös kuvakkeesi pitäisi olla litteä. Jos sovelluksesi sisältää skeuomorfismia, myös kuvakkeessasi pitäisi olla ainakin jonkinlainen skeuomorfismin elementti.”

Saa sovelluskuvakkeesi kuvastamaan mahdollisimman paljon sovelluksesi värejä, tekstuureja ja tuntumaa.

Vinkkejä, jotka kannattaa pitää mielessä sovelluskuvaketta suunniteltaessa

Nyt kun olet vastannut neljään olennaiseen sovellussuunnittelukysymykseen, on aika alkaa luoda useita variaatioita tai malliehdotuksia sovelluskuvakkeelle. Aloita perussuunnittelun hahmotelmasta ja kokeile sitten eri värejä, reunuksia ja grafiikkaa.

Tässä on muutama vinkki opastukseksi:

• Luota vain kahteen tai kolmeen väriin. Enemmän kuin kolme ja sovelluksen kuvake alkaa näyttää liian kiireiseltä.
• Vältä oikean valokuvan käyttöä. Voit kuitenkin aina muuttaa valokuvan kuvitukseksi/vektorikuvaksi.
• Ajattele pienellä. Sovelluskuvakkeesi saattaa näyttää sinusta suurelta, kun suunnittelet sitä, mutta se on pieni iPhonen tai Androidin näytöllä. Varmista, että jokainen elementti on selkeä myös kuvakkeen pienimmässä muodossa.
• Säästä sanoja otsikkoa ja taglinea varten. Sovelluskuvakkeella on tarkoitus olla visuaalinen vaikutus. Otsikossa, taglineissa ja sovelluksen kuvauksessa voit sanoa sanoin sen, mitä sinun tarvitsee sanoa.
• Noudata aina Applen ja Googlen sovelluskaupan kuvakkeiden kokovaatimuksia ja ohjeita. Google Playn kokovaatimukset löydät täältä ja Applen App Storen vaatimukset täältä. Muista, että sinun on luotava useita versioita sovelluskuvakkeestasi kutakin kauppaa varten. Huomaa myös, että vaikka iPhonen App Storessa on pyöristetyt kulmat, sinun on lähetettävä kaikki sovellustiedostosi neliön muotoisina. Applen järjestelmä pyöristää kulmat puolestasi.

Kun sinulla on kaksi tai kolme potentiaalista sovelluskuvaketta, joista valita, on aika ottaa sovelluskuvakkeiden luomisen tärkein vaihe: kuvakkeiden jakotestaus, jotta saat selville, mitä kohdeyleisösi ajattelee.

Muutakin kuin App Storen kuvakekoko: sovelluskuvakkeiden jakotestaus PickFussa

Paras tapa tietää, mitä kohdeyleisösi ajattelee sovelluskuvakkeestasi, on testata se jakotestein PickFussa, ennen kuin julkaiset varsinaista sovelluslistaa Google Play Storessa tai App Storessa. Toki voit tehdä sovelluksen sisäisen A/B-testin ja ajaa useita variaatioita itse kaupassa, mutta tämä on hidas prosessi, joka voi imeä aikaa ja rahaa.

Testaamalla jaetun testauksen PickFun vastaajaryhmälle ennen sovelluskuvakkeesi julkaisemista livenä saat tarvitsemaasi palautetta menettämättä rahaa prosessissa.

Kyselyn perustaminen PickFussa vie vain muutaman minuutin. Muistatko, kun sanoin, että yleisön kohdentaminen on ratkaisevan tärkeää? PickFu tekee siitä helppoa sinulle. Voit kohdentaa yleisön jäsenet iOS- tai Android-laitteen mukaan, sen mukaan, ovatko he mobiilipelaajia ja kuinka paljon he ovat käyttäneet rahaa App Storessa, monien muiden hyödyllisten ominaisuuksien ohella.

Eräs sovelluskehittäjä käytti hiljattain PickFu:ta testatakseen kahden kuvakkeen välillä deittisovellusta varten.

Ensimmäisessä kuvakkeessa näkyy vaaleanpunainen, puhelinta pitelevän naisen profiili, sovelluksen otsikko kahdella eri värillä sekä punertava ja oranssi tausta. Kaiken kaikkiaan tässä sovelluskuvakkeessa on noin kuusi eri väriä.

Toisesta vaihtoehdosta poistetaan nainen, säilytetään virtaviivaisempi oranssinpunainen tausta ja jätetään sanat, mutta valkoisina, ja pieni sydän on työnnetty M-kirjaimen kupeeseen.Tässä sovelluskuvakkeessa on vain kolme väriä.

Vastaajat äänestivät ylivoimaisesti yksinkertaisemman ja siistimmän vaihtoehdon B puolesta. Toisin kuin perinteisessä suorassa A/B-testissä, PickFun vastaajat antavat yksityiskohtaista kirjallista palautetta. Voimme siis nähdä tarkalleen, miksi vaihtoehto B voitti.

Aluksi vastaajat arvostivat vaihtoehdon B yksinkertaisempaa ja ammattimaisempaa ulkoasua ja sanoivat muun muassa seuraavaa: ”Pidän tämän vaihtoehdon yksinkertaisuudesta, eikä se erottele yhtä sukupuolta käytöstä.” ja ”En todellakaan pidä vaihtoehdon A kirkkaasta violetista/vaaleanpunaisesta värityksestä – se on todella raskas silmille.”

Toivottavasti sovelluksen kehittäjä päätyi toiseen sovelluksen kuvakkeeseen, joka houkuttelee potentiaalisia käyttäjiä paljon todennäköisemmin kuin vaihtoehto A:ta.