Proiectarea interfețelor utilizator, în special a aplicațiilor de chat, poate fi o sarcină provocatoare, dar și creativă. În acest tutorial îți voi arăta cum să proiectezi eficient controlerul de chat în Sketch. Ne vom concentra în special asupra stratificării elementelor (layerelor) pentru a-ți economisi timp și a dezvolta un design curat.
Cele mai importante concluzii
- Stratul de elemente în Sketch te ajută să păstrezi o imagine de ansamblu și să implementezi rapid modificări de design.
- Utilizarea stilurilor reutilizabile economisește timp și asigură coerența în design.
- Integrarea liniilor directoare de design asigură un aspect atrăgător și profesional.
Ghid pas cu pas
În primul rând, începem cu crearea controlerului de chat. Ar trebui să fii deja familiarizat cu interfața utilizatorului Sketch, așa că vom intra direct în proiectare.
Pasul 1: Crearea controlerului de chat Deschide proiectul tău curent în Sketch și alege un nou artboard pentru controlerul de chat. Asigură-te că alegi iPhone 8 ca dispozitiv pentru a avea o dimensiune adecvată a ecranului. denumește artboard-ul „Chat” pentru o alocare mai ușoară.
Pasul 2: Copierea barei de navigare Pentru a obține un design uniform, copiază barele de navigare de la controlerul tău principal. Poziționează-le în aceeași configurație ca înainte, pentru a păstra coerența. Barele de stare și de navigare ar trebui să fie identice.
Pasul 3: Ajustarea layout-ului Setează ghiduri la o distanță de 16 pixeli pentru a te asigura că toate elementele sunt aliniate precis și ordonat. Fii atent să nu apară „erori” în aliniere, ajustând valorile prin vizualizarea inspectorului.
Pasul 4: Transferul stilurilor Dacă dorești să folosești stiluri din biblioteci externe, deschide documentul original pentru a face modificări. Poți ajusta aici culorile și fonturile care vor fi utilizate în întreaga proiectare. Aceasta îți permite să aplici rapid modificările la toate elementele conectate.
Pasul 5: Crearea bulei de chat Pentru a reprezenta mesajele, creează o nouă formă în controlerul de chat. Alege culoarea de fundal pentru noua bulă de chat. Vom crea o variantă albastră și una verde pentru mesajele primite și trimise.
Pasul 6: Inserarea textului Creează un câmp de text în bula de chat și introdu un mesaj de întâmpinare, cum ar fi „Salut, mă bucur că ești aici!” Asigură-te că ajustezi culoarea și stilul fontului, astfel încât textul să iasă în evidență și să fie ușor de citit.
Pasul 7: Crearea mai multor opțiuni de răspuns Pentru a oferi utilizatorului mai multe opțiuni de răspuns, poți folosi copii ale bulei de chat. Asigură-te că distanța dintre elemente rămâne uniformă. Poți adăuga câmpuri suplimentare de text cu sugestii de răspuns, de exemplu, „Care este obiectivul tău?”.
Pasul 8: Ajustarea elementelor Asigură-te că toate elementele au aceeași înălțime și copiază-le pentru a finaliza mai repede proiectarea. Când ajustezi, poți folosi grupurile și simbolurile pe care le-ai creat pentru a menține modificările consistente și simple.
Pasul 9: Ultimele ajustări și gruparea Grupă toate elementele pentru a crește claritatea. Poți denumi grupurile astfel încât să fie ușor de identificat, de exemplu „Bula_Chat” sau „Opțiuni_de_răspuns”.
Rezumat - Designul chatului cu straturi în Sketch: Un ghid pas cu pas
Acum ai învățat cum să proiectezi un controler de chat cu Sketch. De la alegerea artboard-ului potrivit, la crearea bulelor de chat și aplicarea stilurilor, ai învățat tehnici eficiente pentru a economisi timp și a crea un design coerent.
Întrebări frecvente
Cum pot crea stiluri reutilizabile în Sketch?Poti crea stiluri prin configurarea unui stil de text sau fundal și aplicându-l pe alte elemente.
Care este avantajul straturilor în Sketch?Straturile ajută la organizarea diferitelor elemente de design și simplifică modificările, precum și gestionarea designului.
Cum pot menține distanța uniformă între elemente în Sketch?Folosește ghidurile și uneltele de aliniere pentru a verifica și confirma distanța dintre elementele tale de design.
Care este o abordare bună pentru a lua în considerare confidențialitatea chatului?Asigură-te că designul tău include indicii clare despre politicile de confidențialitate, care sunt vizibile pentru utilizatori.
Ce rol joacă alegerea culorilor în designul chatului?Culorile pot provoca emoții și influența experiența utilizatorului. Alege culori care se potrivesc cu identitatea aplicației tale și care promovează lizibilitatea.
