Share
Începeți de la zero de fiecare dată când machetați un design este o pierdere de timp, mai ales când se construiește pe lângă un produs existent. Pe Envato Market avem deja un aspect vizual stabilit și lucrăm la un ghid de stil pentru a colaționa toate elementele noastre de interfață.
Ceea ce avem nevoie este o modalitate ușoară de a crea un prototip clickabil folosind biblioteca noastră de interfață. Un șablon cu toate piesele Lego deja acolo, gata să fie construit.
În cursul acestui tutorial voi folosi propriile mele experiențe cu Envato Market pentru a demonstra acest proces. Cu toate acestea, toate tehnicile discutate vor fi aplicabile situației dvs..
Primul pas în cazul meu a fost de a crea șablonul care să imite ghidul nostru de stil.
Am inceput prin adaugarea tuturor fonturilor noastre de pictograme: Avand in vedere ca am avut un font cu pictograme pe care vroiam sa il folosim in desenele noastre Sketch, mai intai trebuie sa fie instalat fontul de pictograme:
Cea mai bună modalitate de a aborda acest lucru este să deschideți fontul din Cartea de fonturi. "Vizualizare repertoriu" (⌘ + 2) trebuie să fie activă pentru a vedea toate glifurile disponibile. Copiați fiecare glif și adăugați-le în tabloul de bord din schiță.
Apoi am realizat manual toate elementele UI diferite. Fiecare element a fost adăugat la propriul tablou de artă și ulterior a fost salvat ca simbol:
Îi dau fiecăruia un nume. Numele se întâmplă să coincidă cu clasele folosite în construirea reală, dar depinde de modul în care vă apropiați de aceasta:
Lovit introduce. Terminat.
Am repetat acest proces pentru fiecare tip de element UI major pe care l-am catalogat în prezent în ghidul de stil. Rezultatul acestei lucrări laborioase a fost crearea a 89 de simboluri în total.
Ultima piesă a puzzle-ului a fost tipografia. Avem 17 variații tipografice diferite, astfel încât fiecare dintre ele a fost transformat într-un stil de text în cadrul Sketch.
Faceți acest lucru adăugați o casetă de text și stilul textului utilizând opțiunile din bara laterală:
Apoi, transformați-l într-un stil de text:
Când suntem cu toții, ne salvăm prin a merge Fișier> Salvare ca șablon ...
Acum suntem gata să facem rock 'n' roll!
Odată ce am avut toate icoanele, elementele majore ale UI și tipografia pregătită, am fost gata să începem să batem lucrurile.
Crearea unui nou fișier utilizând șablonul Ghid de stil Envato Market ne oferă toate tablourile de bord, simbolurile, fonturile pictogramelor și stilurile tipografice pe care le-am creat.
Pentru a începe un nou machete, mai întâi pot elimina toate tablourile de bord. Simbolurile create anterior vor fi în continuare accesibile, deoarece sunt încorporate în șablon. Eu folosesc Font Book pentru a copia rapid orice pictograme pentru a fi utilizate în mockup. Împreună, aceasta înseamnă că pot începe cu o artă curată și încă am acces rapid la toate bunurile de care am nevoie. Fericire Zen!
Apoi adaug un nou tablou de arta:
Acum sunt gata să încep să adăugăm blocurile noastre.
Boom! Iata:
Mutați-o în poziție:
Apoi adăugați subsolul pentru a finaliza configurarea paginii goale. Voila!
Acum, să însămânțăm pagina falsă cu un formular care face legătura către o pagină de confirmare. Mai târziu, vom adăuga acest lucru la un proiect InVision, unde putem obține feedback de la colegi și vom testa fluxul prin trimiterea unui link către utilizatorii care testează noua interfață.
Acest lucru ia în cel mai scurt timp și cel mai bun lucru este că niciunul dintre aceste elemente nu trebuie să fie proiectat personalizat pentru interfață. Este vorba doar de utilizarea blocurilor pe care le-am făcut în șablon.
Acum, să le exportim ca imagini prin selectarea tablourilor de bord și a merge la Fișier> Exportați:
Ultimul și cel mai important pas este încărcarea machetelor în InVision și partajarea link-ului cu colegii și testarea utilizatorilor pentru a obține feedback.
Aici am creat un nou proiect InVision și mi-am încărcat machetele mele exportate. Faceți clic, de exemplu, pe pagina de destinație pentru ao deschide:
Utilizând instrumentul de creare, creez un hotspot pentru a face legătura către pagina de confirmare:
În sfârșit, împărtășesc prototipul cu alții spunând ceva de genul:
"Hei, dacă ai o secundă, mi-ar plăcea să vă aud opinia cu privire la acest nou flux al paginii de confirmare la care lucram. Verificați-l pe http://invis.io/RG1XC6XPA "
Da, puteți urmări acel link pentru a juca cu macheta.
Asta e! Primul nostru ciclu de feedback este complet.
Acesta este cel mai bun proces pe care l-am descoperit până în prezent cu privire la obținerea rapidă a unui prototip pe ecranul cuiva.
Spunând asta, încă nu este ideal. Imediat ce Biblioteca UI schimbă cineva (în prezent eu) trebuie să actualizeze manual șablonul Sketch. Procesul ideal ar fi unul în care să putem folosi HTML și CSS pentru a crea simboluri Sketch, care să permită menținerea ghidului de stil și a șablonului Sketch în sincronizare perfectă.
Accentsconagua