Share
Ikoner er en avgjørende del av alle iOS-applikasjoner. De formidler førsteinntrykket av appen din til potensielle brukere og forblir et sentralt fokuspunkt for de som laster ned applikasjonen. Vi vet alle hvor viktig det er å skape et godt førsteinntrykk og bygge et sterkt merke med designet ditt, og denne opplæringen vil vise 8 gode måter å gjøre akkurat det!
Dette er en no-brainer i ikondesign, men hvis du går gjennom App Store, er det overraskende få ikoner som gjør dette bra. For eksempel, søk etter "tongue twisters" og du vil se et utvalg av ikoner som dette:
Hvis du tok alle ordene av disse ikonene, hvor mange ville si til deg "tunge twister"? Dette er grunnen til at du ofte hører "ikke bruk ord på ikoner" - for mange bruker det som en krykke for å beskrive hva appen handler om!
Jeg har forstørret det eneste ikonet som virkelig betyr begrepet "tunge twister" rettferdighet. Noen få forbedringer jeg vil foreslå er å skisse silhuetten av hodet og muligens gjøre det større. Dette vil gjøre den vridde tungen tydelig synlig, og omrisset vil hjelpe den til å hoppe over bakgrunnen. Med mindre alle twisters er spesifikke for Storbritannia, vil jeg miste flagget og i stedet velge en bakgrunn som legger til mer kontrast rundt illustrasjonen.
Starbucks 'primære app har et flott ikon og appdesign, men appen som sporer penger på Starbucks gavekort, svinger i sammenligning. Ikonet er knapt leselig i App Store-nettverket, og logoen er praktisk talt usynlig.
Hva annet kunne de ha gjort? Hva med å gjøre ikonet ligner et faktisk gavekort? Trekk inn varemerket grønt, gjør logoen stor og synlig, og legg til magnetkortet "gavekort" som går over det? Eller kanskje en illustrasjon av en lommebok med Starbucks-logoen?
En annen måte å legge til dybde på ditt ikon og appdesign er å gi den litt konseptuell dybde. I det overfylte utvalget av "å-gjøre" -apper er "sjekk" -merket en fin visuell metafor for "ferdig", men er overnyttet til meningen med meningsløsthet.
De eneste appene som står ut fra mengden, har laget et ekstra konseptuelt lag over det kommunikative merket.
2Do - Dette ikonet ligner en stabel med dokumenter som må vurderes. Det sømte læret er en fin kontrast til den rene, post-it notatfargen og glatt tekstur.
Sett ting av - Å sette ting av er et godt eksempel på konseptuell tenkning og design. Hvorfor lage en annen å gjøre app når de fleste av oss virkelig vil finne ut hva vi kan sette av før i morgen? Ser på et problem i det motsatte av konkurransen din, kan du gi noen ganske kreative og morsomme resultater. Illustrasjonen sier nøyaktig hva appen handler om - en innboks med en "fremover" pil, og hvis du ser på rutenett på ikoner ovenfor, fargevalg gjør det virkelig skiller seg ut fra mengden.
Taska - Taska's ikon ser ut som en haug med papirer pent stablet på et skrivebord. Selv om det ikke er et dypt konsept, er dette ikonet vakkert illustrert. Legg merke til detaljene på skyggen av trebakgrunnen som gir dybde til stabelen og skarpheten av kantene på papiret og merket. Papirene ser ut til å trekke rett ut av skjermen, noe som gjør at det kommer ut av rutenettet av foreldede merker.
Appikonet ditt er det første løftet du gjør til brukeren. Det står:
Hvis folk ser et høykvalitetsikon og appen er skit, får folk PO'd. Hvis folk tror at ikonet betyr "x" og appen faktisk utfører "y", får folk PO'd. Oppfyll appens løfte til brukeren!
En måte å sikre at du leverer på dine løfter er å sørge for at grafikken i appen samsvarer med ikonet. Utgifter er et godt eksempel på et ikon som beskriver nøyaktig funksjonen til appen (sporingskostnader) og hvordan man trekker et designkonsept fra ikon til app.
Dette er en overraskelse for mange designere som er nye til å designe iPhone- og iPad-ikoner. Måten utformingen din ser ut som det er opptatt i Photoshop eller i iPhone Simulator, er mye forskjellig fra måten det ser ut på en faktisk enhet. Hvorfor? Noen grunner:
All-in Yoga er et utmerket eksempel på en provoserende, men smakfullt illustrert silhuett som grundig beskriver hva appen handler om.
Alt i Yoga
Hvis du designer en app for et kjent merke, bruk det! Nedenfor er eksempler på apper som gjør en god jobb med å stå ute i App Store ved å vise en gjenkjennelig logo, navn eller ansikt knyttet til appen. Disse appene kan kanskje ikke fortelle deg nøyaktig hva appen gjør, men det gir en ide om innholdet du vil få basert på bildet.
Nike - sannsynligvis noe fitness relatert
NBC Nightly News - nyhetsprogrammer fra programmet
Madonna - musikk eller videoer
Jamie Oliver - oppskrifter
Mad Libs - sannsynligvis en appversjon av MadLibs?
Uansett hva du gjør, ikke kast bort gjengen til et gjenkjennbart merke! Disse kan gjenkjennes når de er blåst opp:
Men se hva som skjer når deres svake silhuetter konkurrerer med andre ikoner i det travle App Store-nettverket. Hvor er Rachel? iCarly?
Se nå forbedringen med bare noen få små tweaks:
De er mer gjenkjennelige i App Store-nettverket også:
Å tenke gjennom og utføre disse tweaks tok mindre enn en time i Photoshop:
Rachel Ray - Selv om Rachels ansikt ikke var gjenkjennelig, har hun et flott smil og øyne som tjener som et fokuspunkt for å trekke folk inn. Den gode nyheten når du designer et ikon for en kjendis, er at du har mye å jobbe med i å bruke det personens ansikt. Generelt sett er menneskets øyne først tiltrukket av menneskelige ansikter blant en gruppe generiske ikoner. Test dette selv: se bort fra bildet over et øyeblikk og se deretter tilbake. På hvilket ikon ble øyelandet ditt først? Gi meg beskjed i kommentarene!
iCarly - Admittedly, jeg ser ikke iCarly, men sunn fornuft forteller meg at hovedkarakteren til showet er sannsynligvis det beste ansiktet til funksjonen på dette ikonet, sammen med sin tweeny show-logo. Hvis barn eller foreldre er usikre på kjennetegnet krus, støtter logoen at de har funnet en app av interesse.
Eckart Tolle - Denne appen er faktisk for hans videoserie, Stillness Within. Tittelen kan sikkert skrives over bunnen på en elegant måte. Men for folk som anerkjenner Eckart, vil de sannsynligvis ikke bryr seg om tittelen. Han tiltrekker seg et svært lidenskapelig publikum, en som vil være interessert i alt han publiserer. Bare å ha bildet hans er nok.
Hello Kitty Stamp Calendar - Igjen, veldig gjenkjennelig merke som har for mye crammed inn i en liten plass. I den opprinnelige versjonen kan du knapt få frem Hello Kitty-ansiktet. Dette er synd fordi det er det internasjonalt anerkjente varemerket for merkevaren. Selvfølgelig vil et verdifullt tillegg være å legge til en stempelformet kalender, men det som må vurderes ved store merker, er hvordan man håndterer ikonografi over hele pakken av app-produkter for det merket. Er dette den eneste appen Hello Kitty vil produsere? Hvordan vil de håndtere ikoner for merkevaren som helhet?
Perez Hilton - Dette ikonet kan gå i et par forskjellige retninger. Erkjenner leserne virkelig ham eller bare navnet hans? Jeg har lest bloggen hans et par ganger og kan ikke fortelle deg noe om hans utseende. Imidlertid har han noen illustrasjoner på sin bloggoverskrift, problemet er det som ble brukt, er praktisk talt uigenkjenelig. Jeg brukte en av de andre illustrasjonene på bloggen sin, blåste den opp for en sterk silhuett, og matchet de høye fargene på nettstedet hans. Bam.
Nå som jeg har sagt at det er greit å bruke et bilde, la meg klargjøre. Dette er bare OK hvis du har å gjøre med en gjenkjennelig kjendis-type figur! Jeg vil ikke anbefale å bruke bilder av andre grunner. Følgende er noen eksempler på dårlig bruk av bilde-ikon:
Du har kanskje lagt merke til at jeg fortsetter å henvise til App Store-nettverket. Dette er det som gjør ikondesign for iPhone og iPad unikt fra skrivebords- eller webapplikationsikondesign. Handlevognen til App Store er som å lete etter en "finne" på en butikkbutikk. Det er noen nyttige og vakkert designet produkter som er omgitt av mye opprør og søppel.
"Rutenettet" gjelder iTunes Store, iPhone og iPad-butikkene, så vær sikker på å teste hvordan ikonet ditt vil se i alle disse miljøene når det står i motsetning til programmer som mest sannsynlig vil bli plassert i samme liste som din. Du må finne ut hvordan du trekker brukerens øye bort fra konkurransen og mot deg!
Gi meg en kommentar nedenfor med eksempler på ikoner du tror får det riktig!
Accentsconagua