Share
Mobilmarkedet har begynt å målrette de yngre generasjonene på en stor måte. Hele deler av app-markeder er dedikert til applikasjoner og spill rettet mot førskolenes demografiske. Utviklere har notert seg, og markedet har blitt stadig overfylt.
Når du oppretter en app rettet mot den yngste generasjonen, må du være oppmerksom på to viktige ting:
I denne artikkelen skal jeg snakke om de typiske brukergrensesnittene som er knyttet til de fleste berøringsbaserte applikasjoner, og hvordan du best kan endre dem når du nærmer deg dette markedet.
Et tema du vil legge merke til i denne artikkelen er at reduserer hindringer for oppføring. Jo flere skjermbilder som er plassert mellom et ungt sinn og ditt tiltenkte innhold, jo mer sannsynlig barnet kommer til å vokse utålmodig og gi opp på appen din.
La oss starte med hva de fleste apps begynner å oppleve med: en splash-skjerm. Den raske takeaway? Ikke bruk en. Ingen to år gammel jeg har noen gang møtt omsorg for at JohnSmithDevelopment bygget sin sang-og-dans-app; hun eller han vil bare komme til musikken. Deretter kommer det fryktede klikket på hjemmeknappen, og din unnvikende målgruppe er ute for å sjekke ut noe annet.
Barn har kort oppmerksomhet. Du ønsker å komme til varene i appen din så raskt som mulig. Begynn bakgrunnsmusikken ved oppstart, og ikke la noen stillestående skjermbilder. Kjedsomhet er din fiende.
Ofte er neste presentert element tilstede en "startskjerm". Denne skjermen har vanligvis tittelen på appen din og en knapp merket Spille eller Start eller med et tilsvarende symbol - noe som ligner dette:
Denne skjermen kjører vanligvis en animasjon, hopper tittelen rundt eller noe lignende. Dette bestemte eksempel på en startskjerm har en klar feil, men for å forstå det, må vi se nærmere på hvordan et barn tolker skjermen.
Måten du eller jeg ser på innholdet på vår håndholdte enhet (eller noe elektronisk, for den saks skyld) er svært forskjellig fra hvordan et barn ser det. Ta for eksempel disse kjente mock-ups:
Som en erfaren bruker, vil du se på beskrivelsen på knappen eller tabellelementet, og finne veien til ønsket innhold. Dette er ikke alltid tilfelle for et barn. Du kan se en knapp med ordet Spille på det, og vet instinktivt hva som skal gjøres, men kan en ett år gammel lese samme knapp og forstå på samme måte? Sannsynligvis ikke. De typiske menystrukturene fungerer ganske enkelt ikke bra når de er rettet mot de virkelig unge. Så, hva gjør vi?
La oss se på noen menystrukturer som er bedre målrettet til småbarn:
Det vi har endret i disse eksemplene er at brukeren er nå visuelt rettet mot veien vi ønsker. Vi fjerner behovet for barnet til å forstå hva hver knapp gjør, og i stedet trekke oppmerksomheten mot objekter basert på størrelse eller plassering.
Vanligvis er alt annet like, du kan forvente at barnet blir trukket til det største objektet på skjermen. Omvendt, hvis du har mye å gjøre på skjermen, fjerner menyen eller knappene alt sammen en god tilnærming, og du trenger bare å trykke på skjermen for å flytte til innholdet ditt. Det er fordeler og ulemper for hver GUI du bestemmer deg for å ansette.
Uansett hvordan du nærmer deg det, når du gjør en scene til skjermen som ikke er innholdet ditt, har du opprettet en barriere mellom barnet og spillet ditt.
La oss ta en titt på to knapper:
Her er et annet eksempel på å videresende informasjon visuelt til brukeren din. Mens disse to knappene betyr det samme, gir knappen til venstre bedre til et barn hva de kan forvente.
Bilder betyr mer for et ungt barn enn ord gjør. Tekst er en fiende av pjokkmenyen, så bruk den sparsomt. Dette gjelder også valgknappene og navigasjonsknappene. "Tilbake" betyr mindre enn en pil grafikk. Det samme gjelder for "Replay", "Menu", og så videre.
Design dine navigasjonsartikler som du ville for et globalt marked: minimere tekst og bruk grafiske signaler.
Menyene dine må dukke opp på skjermen. Det er noen flotte fargebaserte opplæringsprogrammer på dette nettstedet for å hjelpe deg med å komme i gang med å velge en fargepalett for spillet eller appen din.
Med hensyn til menyen, hold knappene dine eller interaktive objekter lyse og levende, og bakgrunnsobjektene dine blir dempet. En skyggende effekt på forgrunnsobjektene bidrar også til å gi dem inntrykk av å "popping" av skjermen, og derfor mer sannsynlig å trekke oppmerksomheten.
Se hvor mye mer knappene pop når bakgrunnsgrafikkene er uskarpe?
Likeledes er lyd en stor attraksjon for barn. Lett peppy musikk vil holde litt oppmerksomhet. Lagre den mørke brooding musikk og heavy metal riffs for dine RPGs.
Også når du velger bakgrunnsmusikk for appen din, må du passe på å finne en melodi som foreldre vil kunne tolerere. De er de som vil få det endelige si om appen din har noen strøm på enheten.
Vi har noen kraftige verktøy i vårt arsenal, men vi kan gjøre det bedre. Så langt er vår meny fortsatt ganske statisk og kjedelig. Barn bruker denne enheten til en visuell stimulans, og å gi menyen noe krydder vil bidra til å opprettholde sin interesse.
Dette oppnås med noen få triks, nemlig animasjoner, handlinger og partikkeleffekter. Du kan ha hovedpersonen smilende og vinkle i hjørnet, eller et tog trundling over bunnen av skjermen, eller et hvilket som helst antall tidsbestemte tilfeldige hendelser som oppstår alt på en gang enten ved siden av eller bak menyen.
Jeg vil advare mot for mye av denne "støy", skjønt. Alt som ikke egentlig fordeler menyen din (det vil si alt som bare er der for show), vil distrahere brukeren din fra din faktiske GUI. I stedet for å legge til denne støyen, hvorfor ikke kjøre noen enkle handlinger på din eksisterende meny for å trekke brukerens oppmerksomhet og gi noen zip til din scene i prosessen? For å få en knapp til å bevege seg visuelt, eller vokse og deretter krympe i en sekvens, er det en fin måte å trekke oppmerksomheten på.
Her er en enkel sammenligning av en statisk knapp til en pulserende en:
Øyet er instinktivt trukket til bevegelsesknappen. Jeg liker å bruke handlinger for å skape denne effekten i mine programmer. Koden for en slik handling vises her (koden er skrevet i Mål-C, men kan lett tilpasses til andre språk):
// Opprett den ikke-bevegelige knappen som en sprite SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (self.size.width / 4, self.size.height / 2); [self addChild: button1]; // Opprett flyttingsknappen som et sprite SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (self.size.width * .75, self.size.height / 2); [self addChild: button2]; // Lag basishandlinger for å skalere opp og ned bildet SKAction * pulseOut = [SKAction scaleTo: 1.2 duration: 0.5]; SKAction * pulseIn = [SKAction scaleTo: 1.0 duration: 0.5]; // Lag en sekvens av skaleringshandlingene, og gjenta dem for alltid i en loop SKAction * sekvens = [SKAction sekvens: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [SKAction repeatActionForever: sekvens]; // Kjør denne handlingssekvensen på den aktuelle knappen [button2 runAction: repeatSequence];
Det store med handlinger er at de ikke trenger noen ekstra grafiske ressurser. Det har ingen effekt på app-buntestørrelsen din, og du trenger ikke å ansette en artist for å tegne en rekke bilder for deg. Når det er sagt, kan du oppnå lignende effekter med tradisjonelle animasjonssekvenser og atlasfiler.
Å ha knappflyttingen din er flott, men hva om vi kunne få det til å skyte på skjermen enda mer? Det er her partikkeleffekter kan virke til din fordel. En partikkel er ganske enkelt et bilde som vi kan bruke over tusen ganger for å skape en effekt.
Vi kan skape en nydelig effekt for å trekke litt oppmerksomhet til knappene våre med tillegg av et enkelt lite bilde, en beskrivelse XML-fil og tre linjer med kode. De vanskelighetene bakpartikkelvirkninger og handlinger er litt utenfor omfanget av denne opplæringen, men for fullførings skyld er her koden for å laste filen:
// Opprett en partikkel-effekt emitter med en fil SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" ofType: @ "sks"]]; // Legg inn partikkel-effektnoden på knappen, men bak den emitter.position = CGPointMake (button2.position.x, button2.position.y); emitter.zPosition = -100; // legg emitteren til spillscenen [selvtillitChild: emitter];
Og her er resultatet:
Bildet får mer dybde fra denne effekten, og blir enda mer oppmerksom på det.
Så, hva var galt med den menyen fra tidligere?
Da jeg ga den til min unge sønn for å teste, fortsatte han å prøve å trykke på den animerte tittelen. Spilleknappen var stillestående, og selv om den var stor og fremtredende på skjermen, ble han trukket til den hoppende animerte tittelen. Han ble frustrert, og før jeg kunne vise ham hvordan han kom til neste skjerm, presset han den fryktede Home-knappen, lette etter noe annet.
Jeg hadde fulgt to av mine tips fra oven, men hadde en viktig feilstrek: distraksjon. Jeg hadde utilsiktet opprettet en barriere i startskjermbildet.
Husk at når du arbeider med småbarn, kan du ikke forvente å få tålmodigheten til å finne ut hvordan du får appen til å fungere. Hvis det ikke gir mening etter dem etter to forsøk, vil de gå videre. Fjern barrierer, og gjør det enkelt og intuitivt slik at noen uten skriftlig ferdigheter eller produktopplevelse vil vite hva de skal gjøre.
Med det i tankene, her er noen retningslinjer for å ta bort:
Det beste rådet jeg kan tilby deg er dette: den beste menyen for et program eller spill rettet mot smårollinger er ingen meny i det hele tatt.
Hvis brukeren din må klikke på mer enn en knapp for å komme til innholdet ditt, har du for mange. Den eneste virkelige grunnen til å få en knapp i appen din er hvis du presenterer brukerne dine med mer enn én aktivitet å velge mellom. I dette tilfellet gjør hver aktivitet en tilsvarende størrelse og uthevet knapp, og gjør alle elementene likeverdige i fremtredende rekkefølge.
Hvis innholdet ditt må passe på mer enn ett skjermbilde, må du alltid gi en visuell indikasjon til brukeren at det er mer innhold tilgjengelig. I disse tilfellene bruker jeg en "peeking" -funksjon for å vise en del av den neste knappen, som i denne videoen:
Takk for at du leser, og jeg håper at du har funnet denne diskusjonen innsiktig. Hvis du har kommentarer, vær så snill å la dem være under. Jeg vil også elske å se noen menyer du lager for dine egne apper.
Jeg har tatt med en prøveprosjektfil med denne opplæringen, skrevet i Objective-C med xCode 5 for iOS-plattformen. Dette prosjektet viser et eksempel på sammenligning av to knapper, en statisk og den andre, inkludert handlingsbaserte pseudo-animasjoner og partikkeleffekter.
Accentsconagua