Prototiparea unei aplicații de mobilitate este simplă în Sketch

Te confrunți cu provocarea de a crea un Prototyping atractiv pentru o Mobility-App. Acesta nu se referă doar la design; este vorba despre a face experiența utilizatorului eficientă încă din prima etapă, astfel încât să ajute utilizatorul să navigheze intuitiv prin aplicație. În acest tutorial, vei fi ghidat pas cu pas prin procesul de creare a unui prototip în Sketch. Să începem această călătorie fascinantă în lumea designului!

Cele mai importante concluzii

• Prototyping-ul este un pas decisiv în dezvoltarea aplicațiilor.
• În Sketch poți începe cu forme și designuri simple.
• O structură clară și o orientare a utilizatorului sunt esențiale pentru succesul aplicației tale.

Instrucțiuni pas cu pas

Începe prin a crea structura de bază a aplicației tale în Sketch. Poți folosi instrumentul de pensulă pentru a desena primele tale elemente de design. Pur și simplu accesează instrumentul de pensulă sau apasă tasta „P” pentru a-l selecta.

Crează un dreptunghi care să reprezinte ecranul aplicației tale. Ține apăsată tasta „Alt” în timp ce tragi cu mouse-ul un dreptunghi. Acest lucru va asigura că dreptunghiul rămâne proporțional. Asta arată déjà destul de bine.

Acum este timpul să creezi prima pagină a aplicației. Începe cu bara de tab-uri de jos. Folosește din nou instrumentul de pensulă și trage o linie dreaptă ținând apăsată tasta Shift, pentru a te asigura că obții o linie dreaptă.

După ce ai proiectat bara de tab-uri, adaugă trei pictograme care să reprezinte funcțiile principale ale aplicației. Cu tasta ALT poți simplu să duplici formele în timp ce le tragi la locul corespunzător.

Acum ne dedicăm barei de navigație de sus. Ține din nou tasta ALT apăsată în timp ce tragi un alt dreptunghi pentru bara de navigație.

Bulele de chat sunt următoarea parte a aplicației tale pe care dorim să o proiectăm. Folosește instrumentul de pensulă pentru a desena o bulă de chat. Aceasta va fi afișată utilizatorului imediat ca un bun venit. Adaugă un text scurt care să adreseze utilizatorul, cum ar fi „Salut și bun venit în aplicația Mobility!”

Pentru a te asigura că totul arată atractiv, poți copia și ajusta bulele. Selectează bulele și trage-le în jos cu tasta ALT pentru a adăuga un alt text de bun venit, cum ar fi „Începe cu prima ta sesiune Mobility”.

Următorul pas este adăugarea butonului video, cu care utilizatorii pot reda lecțiile lor. Desenează un buton rotund cu instrumentul de pensulă și combină-l cu un triunghi pentru a clarifica reprezentarea și funcția.

Apoi, copiază toate elementele importante ale UI – cum ar fi barele de navigație de sus și de jos – pe pagina următoare, pentru a asigura consistența în design. Poți pur și simplu să tragi o captură de ecran cu tasta ALT pentru a duplica elementele pe pagina următoare.

Pe acest nou ecran pe care l-ai creat, proiectează opțiunile pentru cursuri. Aici ar trebui să creezi o prezentare simplă a cursurilor disponibile pe care utilizatorul le poate selecta.

În vizualizarea profilului, poți crea un spațiu pentru fotografia de profil, numele utilizatorului și numărul de ore de cursuri finalizate. Aici este important să prezinți informațiile clar și concis.

Finalizând designul opțiunilor pentru cursuri și lecții, creează o prezentare generală a lecțiilor și adaugă un buton de închidere, astfel încât utilizatorul să poată închide selecția în orice moment.

Astfel, prototipul de bază pentru aplicația ta Mobility este finalizat. Acum ai un design atractiv care structurează clar orientarea utilizatorului și, în același timp, te ajută pe tine ca designer să vizualizezi clar viziunea aplicației.

Rezumat – Prototyping-ul unei aplicații Mobility în Sketch

Pe parcursul acestui tutorial, ai învățat pas cu pas cum să creezi un prototip pentru o aplicație Mobility în Sketch. De la prima idee până la ultimele elemente de design, ai reușit să îți extinzi cunoștințele și să creezi un instrument util pentru dezvoltarea ulterioară a aplicației tale.