Share
Piața mobilă a început să vizeze generațiile mai tinere într-un mod mare. Secțiunile întregi ale piețelor de aplicații sunt dedicate aplicațiilor și jocurilor destinate demografiei preșcolare. Dezvoltatorii au luat notă, iar piața a devenit din ce în ce mai aglomerată.
Când creați o aplicație care vizează cea mai tânără generație, trebuie să fiți conștienți de două lucruri cheie:
În acest articol, voi vorbi despre interfețele tipice ale utilizatorilor asociate cu cele mai multe aplicații bazate pe ecran tactil și cum să le modificați cel mai bine atunci când vă apropiați de această piață.
O temă pe care o veți observa în cadrul acestui articol este cea a lui reducerea barierelor la intrare. Cele mai multe ecrane care sunt plasate între o minte tânără și conținutul dorit, cu atât este mai probabil ca copilul să devină nerăbdător și să renunțe la aplicația dvs..
Să începem cu ceea ce majoritatea aplicațiilor își încep experiența cu: un ecran de pornire. Traversa rapidă? Nu folosiți unul. Nici un copil de doi ani pe care l-am întâlnit vreodată nu are grijă de faptul că JohnSmithDevelopment și-a construit aplicația de cântec și dans; ea sau el vrea doar să ajungă la muzică. Apoi apare deranjatul clic al butonului de acasă, iar audiența dvs. evazivă este oprită pentru a verifica altceva.
Copiii au o scurtă perioadă de atenție. Vrei să ajungi la bunurile aplicației cât mai repede posibil. Începeți muzica de fundal la pornire și nu lăsați ecrane stagnante. Plictiseala este dușmanul tău.
Deseori, următorul element prezent prezent este un "ecran de pornire". Acest ecran are de obicei titlul aplicației dvs. și un buton marcat Joaca sau start sau cu un simbol echivalent - ceva similar cu acesta:
Acest ecran rulează în mod obișnuit o animație, care răsfoiește titlul în jur sau ceva similar. Acest exemplu particular al unui ecran de pornire are o eroare flagrantă, dar pentru ao înțelege, trebuie să ne uităm mai aproape de modul în care un copil interpretează ecranul dvs..
Modul în care vizualizați conținutul pe dispozitivul nostru handheld (sau orice altceva, electronic, de pildă) este foarte diferit de modul în care copilul îl vede. Luați, de exemplu, aceste machete familiare:
Ca utilizator experimentat, te-ai uita la descrierea de pe butonul sau elementul de tabel, și găsești drumul spre conținutul dorit. Acest lucru nu este întotdeauna cazul unui copil. Tu poate vedea un buton cu cuvântul Joaca pe ea și știți instinctiv ce să facă, dar poate un cântec de un an să citească același buton și să înțeleagă în același fel? Probabil ca nu. Structurile tipice ale meniului pur și simplu nu funcționează bine atunci când se adresează celor cu adevărat tineri. Deci ce să fac?
Să ne uităm la unele structuri de meniu care sunt mai bine direcționate către copii mici:
Ceea ce am schimbat în aceste exemple este că utilizatorul este acum vizual direcționate spre calea pe care o dorim. Eliminăm nevoia ca copilul să înțeleagă ce face fiecare buton și, în schimb, să-și atragă atenția asupra obiectelor bazate pe dimensiune sau locație.
În mod normal, orice altceva este egal, vă puteți aștepta ca copilul să fie atras de cel mai mare obiect de pe ecran. Dimpotrivă, dacă se întâmplă multe lucruri pe ecran, scoaterea meniului sau a butoanelor împreună este o abordare bună, pur și simplu având nevoie de orice atingere pe ecran pentru a vă deplasa la conținutul dvs. Există argumente pro și contra pentru fiecare GUI pe care vă decideți să îl angajați.
Indiferent de modul în care vă apropiați, ori de câte ori faceți o scenă pe ecran care nu este conținutul dvs., ați creat o barieră între copil și joc.
Să aruncăm o privire la două butoane:
Iată un alt exemplu de transmitere a informațiilor vizual către utilizatorul dvs. În timp ce aceste două butoane înseamnă același lucru, butonul din stânga transmite mai bine copilului ceea ce se poate aștepta.
Imaginile înseamnă mai mult pentru un copil mic decât cuvintele. Textul este un dușman al meniului pentru copii, așa că folosiți-l cu ușurință. Acest lucru este valabil și pentru butoanele de opțiuni și pentru butoanele de navigare. "Înapoi" înseamnă mai puțin decât o grafică cu săgeți. Același lucru este valabil și pentru "Replay", "Menu" și așa mai departe.
Proiectați elementele de navigație ca și dvs. pentru o piață globală: minimizați textul și folosiți indicii grafice.
Meniurile dvs. trebuie să apară pe ecran. Există câteva tutoriale minunate pe bază de culori pe acest site pentru a vă ajuta să începeți să alegeți o paletă de culori pentru jocul sau aplicația dvs..
În ceea ce privește meniul, țineți butoanele sau obiectele interactive luminoase și vibrante, iar obiectele de fundal sunt mai silențioase. Un efect de umbrire asupra obiectelor din prim-plan le ajută să-i dați impresia de a "ieși" de pe ecran și, prin urmare, este mai probabil să atrageți atenția.
Vedeți cu cât mai mult sunt afișate butoanele atunci când graficele de fundal sunt neclare?
De asemenea, sunetul este o atracție uriașă pentru copii. Muzica ușoară și plină de muzică va avea o anumită atenție. Salvați muzica întunecată și râurile metalice grele pentru RPG-urile voastre.
De asemenea, când selectați muzică de fundal pentru aplicația dvs., aveți grijă să găsiți o melodie pe care părinții vor putea să o tolereze. Aceștia sunt cei care vor avea ultimul cuvânt de spus cu privire la faptul că aplicația dvs. are vreun fel de putere pe dispozitiv.
Avem niște instrumente puternice în arsenalul nostru, dar putem face mai bine. Până în prezent, meniul nostru este încă destul de static și plictisitor. Copiii folosesc acest dispozitiv pentru un stimulent vizual, iar meniul pe care-l oferi un anumit condiment îi va ajuta să-și mențină interesul.
Acest lucru este realizat cu câteva trucuri, și anume animații, acțiuni și efecte particulare. S-ar putea ca personajul principal să zâmbească și să fluture în colț sau să treacă un tren care trece prin partea inferioară a ecranului sau orice număr de întâmplări aleatorii care apar simultan, fie lângă, fie în spatele meniului.
Aș avertiza prea mult împotriva acestui "zgomot". Orice lucru care nu beneficiază de fapt de meniul dvs. (adică, orice este doar acolo pentru spectacol), vă va distrage atenția de la propriul GUI. În loc să adăugați acest zgomot, de ce să nu faceți niște acțiuni simple pe meniul dvs. existent pentru a atrage atenția utilizatorului și pentru a da un anumit zip la scenă în acest proces? De exemplu, dacă aveți un buton vizual în mișcare, sau creșteți și apoi se micșorează într-o secvență, este o modalitate foarte bună de a atrage atenția asupra acestuia.
Iată o simplă comparație a unui buton static cu unul pulsatoriu:
Ochiul este desenat instinctiv de butonul de mișcare. Îmi place să folosesc acțiuni pentru a crea acest efect în programele mele. Codul pentru o astfel de acțiune este afișat aici (codul este scris în Obiectiv-C, dar este ușor de adaptabil la alte limbi):
// Creați butonul care nu se mișcă ca un sprite SKSpriteNode * button1 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button1.position = CGPointMake (auto.size.width / 4, auto.size.height / 2); [auto addChild: buton1]; // Creați butonul în mișcare ca un sprite SKSpriteNode * button2 = [SKSpriteNode spriteNodeWithImageNamed: @ "PlayButton.png"]; button2.position = CGPointMake (auto.size.width * .75, auto.size.height / 2); [auto addChild: butonul2]; // Crearea acțiunilor de bază pentru scalarea în sus și în jos a imaginii SKAction * pulseOut = [Scala SKActionTo: 1.2 Durata: 0.5]; SKAction * pulseIn = [scala SKActionTo: 1.0 durata: 0.5]; // Creați o secvență a acțiunilor de scalare și repetați-le într-o buclă SKAction * sequence = [Succesiune: @ [pulseOut, pulseIn]]; SKAction * repeatSequence = [repetActionFactor repetiție: secvență]; // Rulați acea secvență de acțiune de pe butonul în cauză [button2 runAction: repeatSequence];
Lucrul grozav despre acțiuni este că nu necesită resurse suplimentare grafice. Nu există niciun efect asupra dimensiunii pachetului dvs. de aplicații și nu este necesar să angajați un artist pentru a desena o secvență de imagini pentru dvs. Acestea fiind spuse, puteți obține efecte similare cu secvențele de animație tradiționale și fișierele atlas.
Mișcarea butonului dvs. este grozavă, dar dacă am putea să-l facem să dispară chiar mai mult ecranul? Acesta este locul în care efectele particulelor pot funcționa în avantajul dvs. O particulă este pur și simplu o imagine pe care o putem folosi de nenumărate ori pentru a crea un efect.
Putem crea un alt efect extraordinar de a atrage atenția asupra butoanelor noastre, cu adăugarea unei singure imagini mici, a unui fișier descriptiv XML și a trei linii de cod. Interacțiunile din spatele efectelor și acțiunilor particulelor sunt puțin dincolo de scopul acestui tutorial, dar, din motive de finalizare, aici este codul de încărcare a fișierului:
// Creați un emițător de efect de particule cu un fișier SKEmitterNode * emitter = [NSKeyedUnarchiver unarchiveObjectWithFile: [[NSBundle mainBundle] pathForResource: @ "backHighlight" dinType: @ "sks"]]; // Poziționați nodul efectului de particule la buton, dar în spatele acestuia emitter.position = CGPointMake (buton2.position.x, buton2.position.y); emitter.zPosition = -100; // adăugați emițătorul la scena jocului [self addChild: emitter];
Iată rezultatul:
Imaginea capătă mai multă profunzime din acest efect și atrage atenția și mai mult asupra acesteia.
Deci, ce sa întâmplat cu meniul anterior?
Când i-am dat-o tânărului meu fiu pentru a testa, el a continuat să încerce să atingă titlul animat. Butonul Play era stagnant și, deși era mare și proeminent pe ecran, el continua să fie atras de titlul animat de animație. El a fost frustrat și înainte să-i pot arăta cum să ajungă la ecranul următor, el a apăsat butonul Acasă temut, căutând altceva.
Am urmat două sfaturi de sus, dar am avut un rău crucial: distragere. Am creat din greșeală o barieră în ecranul de start.
Amintiți-vă, atunci când aveți de-a face cu copiii mici, nu vă puteți aștepta atunci să aveți răbdarea pentru a rezolva cum să faceți lucrul cu aplicația. Dacă nu are sens pentru ei după două încercări, ei vor merge mai departe. Eliminați barierele și faceți-le simplă și intuitivă, astfel încât cineva fără abilități lingvistice scrise sau experiență de produs să știe ce să facă.
Având în vedere acest lucru, iată câteva indicații care trebuie luate:
Cel mai bun sfat pe care vi-l pot oferi este acesta: cel mai bun meniu pentru o aplicație sau joc destinat copiilor mici este nici un meniu.
Dacă utilizatorul dvs. trebuie să facă clic pe mai multe butoane pentru a ajunge la conținutul dvs., aveți prea multe. Singurul motiv real pentru a avea un buton în aplicația dvs. este dacă prezentați utilizatorilor dvs. mai multe activități pentru a alege. În acest caz, faceți ca fiecare activitate să aibă un buton de dimensiuni similare și evidențiate și să facă toate elementele echivalente în proeminență.
Dacă conținutul dvs. trebuie să se potrivească pe mai multe ecrane, lăsați întotdeauna o indicație vizuală utilizatorului că există mai mult conținut disponibil. În aceste cazuri, folosesc o caracteristică "peeking" pentru a afișa o parte din butonul următor, ca și în acest videoclip:
Vă mulțumim pentru lectură și sper că ați găsit această discuție înțeleaptă. Dacă aveți comentarii, vă rugăm să le lăsați mai jos. De asemenea, mi-ar plăcea să văd orice meniu pe care îl faceți pentru propriile dvs. aplicații.
Am inclus un exemplu de fișier proiect cu acest tutorial, scris în Obiectiv-C cu xCode 5 pentru platforma iOS. Acest proiect prezintă o comparație de exemplu a două butoane, una statică și alta, inclusiv pseudo-animații bazate pe acțiune și efecte de particule.
Accentsconagua