Crearea unui ghid de stil UI pentru o mai bună UX

Ascultă versiunea audio a acestui articol

Asigurați un design de produs coeziv și o experiență de utilizator

În 1976, Johnny Cash a lansat One Piece at a Time , o melodie care spune povestea unui muncitor auto din Detroit care își petrece douăzeci de ani adunând piese Cadillac furate de pe linia de asamblare.

Din păcate, când muncitorul începe să-și construiască Cadillac-ul său contrabandă, el constată că multe piese sunt incompatibile, deoarece caracteristicile cheie de design s-au schimbat de-a lungul anilor. Cu puțină ingeniozitate, mașina personalizată se reunește, dar este o mizerie inestetică care inspiră ridicol oriunde s-ar duce.

De asemenea, partea din spate părea cam amuzant
Dar le-am pus împreună și când am terminat
Ei bine, atunci am observat că avem doar o înotătoare coadă.

Designerii și dezvoltatorii experiențelor digitale de astăzi se confruntă cu o provocare similară. Trecerea timpului este un dușman formidabil capabil să facă ravagii asupra continuității produselor digitale. Cu timpul, membrii echipei vin și pleacă, tendințele evoluează, iar caracteristicile se schimbă. În plus, ritmul rapid al peisajului nostru digital modern înseamnă că inovarea produselor are loc în sferturi, nu în ani.

Dacă o echipă de afaceri sau de proiectare nu are o înregistrare comună care să documenteze aspectul și senzația dorită a unui produs, vor apărea inconsecvențe vizuale și experiențiale, utilizatorii vor crește frustrați, iar reputația mărcii va fi lovită.

Ghidurile de stil UI sunt un instrument de proiectare și dezvoltare care aduce coeziune interfeței și experienței cu utilizatorul unui produs digital. În esență, ei:

• Înregistrați toate elementele de design și interacțiunile care apar în cadrul unui produs
• Enumerați componentele cruciale ale UI, cum ar fi butoanele, tipografia, culoarea, meniurile de navigare etc.
• Documentați componentele UX importante, cum ar fi stările de hover, umplerile drop-down, animațiile etc.
• Conține elemente live și fragmente de cod pe care dezvoltatorii le pot referi și utiliza

Înainte de a arunca o privire mai atentă asupra modului de asamblare a unui ghid de stil UI la nivel de expert, este important să înțelegem că nu există o abordare universală. Valoarea ghidurilor de stil se extinde dincolo de mărcile mari cu echipe mari de produse. Întreprinderile mijlocii sau mici care caută o experiență digitală consecventă beneficiază, de asemenea, atunci când Ghidurile de stil UI sunt personalizate pentru nevoile lor specifice.

Includeți aceste componente cruciale de design în ghidurile de stil UI

Designerii familiarizați cu liniile directoare privind identitatea mărcii nu ar trebui să aibă probleme la tranziția la Ghidurile de stil UI, deoarece există o suprapunere amplă cu multe dintre componentele de design esențiale care trebuie incluse.

Sfat profesionist: documentați doar componentele de design relevante. Informațiile străine fac ca ghidurile de stil UI să fie umflate și greu de lucrat.

Schema tipografiei

Tipografia este unul dintre cele mai comune elemente de proiectare a interfeței, așa că nu este suficient să enumerați doar numele fonturilor utilizate într-un produs. Ar trebui date instrucțiuni clare pentru titluri, subtitrări, titluri (H1, H2, H3), text de corp și subtitrări.

În plus, trebuie furnizate dimensiunile fonturilor, greutățile indicate și stilurile definite. Înălțimea liniilor și kerningul sunt, de asemenea, necesare și este o idee bună să alegeți un font de referință pentru a fi folosit atunci când apar circumstanțe speciale.

Aspecte receptive

Atunci când produsele digitale sunt proiectate în jurul sistemelor de rețea receptive, Ghidurile de stil UI trebuie să abordeze aspectul interfeței pe dimensiunile ecranului. Aceasta înseamnă includerea de note și exemple pentru spațiere, umplutură și plasare. De asemenea, este util să afișați suprapuneri ale sistemului de grilă al produsului în raport cu diferite dimensiuni de ecran.

Scopul mare aici este furnizarea de context suficient pentru a preveni nevoia de design unic de ecran. În timp, acestea se adună și subminează coeziunea unui produs digital.

Paleta de culori

Una dintre cele mai rapide moduri de a distruge o interfață este utilizarea inconsecventă a culorilor, astfel încât combinațiile de culori trebuie definite clar. Listarea culorilor și a valorilor acestora (HEX, UIColor) este un început bun, dar ar trebui date și împerecheri specifice și exemple de utilizare.

Dacă Ghidul de stil al UI face referire la un set de linii directoare privind identitatea mărcii, verificați dacă este disponibilă o schemă secundară de culori de accent mai deschise. Dacă nu, creați-vă propriul și documentați. O selecție de valori de gri este, de asemenea, utilă.

Butoane

Aproape fiecare interfață include butoane, așa că acordați-vă timp pentru a documenta dimensiunile, stilurile, culorile, plasarea, spația și elementele tipografice ale acestora. Dacă sunt folosite diverse butoane în contexte diferite, clarificați și acest lucru.

Componente suplimentare ale interfeței de utilizare care pot fi necesare

• Iconografie
• Sfaturi de instrumente și popovers
• Modale
• Elemente de formă
• Tabele de date
• Meniuri de navigare
• Diagrame și vizualizări de date
• Filele
• Întrerupătoare pornit-oprit
• Dialoguri
• Liste de grile de conținut
• Liste verticale
• Bare de instrumente
• Selecții de dată și oră
• Indicatori de încărcare
• Casete de selectare
• Alerte
• Meniuri derulante
• Glisoare
• Steppers
• Paginare

Organizați și contextualizați instrucțiunile de proiectare

Pe lângă componentele obligatorii ale interfeței de utilizare, există o serie de caracteristici practice care facilitează consultarea, navigarea și implementarea ghidurilor de stil de interfață de utilizare pentru companii și echipele de proiectare.

Cuprins

Un cuprins bine organizat și marcat clar este o modalitate simplă de a ajuta toată lumea să găsească rapid ceea ce se află în document.

Note de context

Este imposibil să preziceți fiecare decizie problematică de proiectare care poate apărea pe durata de viață a unui produs, astfel încât articularea rațiunii de proiectare din spatele componentelor UI utilizate des poate face scenariile neprevăzute mai ușor de rezolvat.

De exemplu:

„În esență, produsul nostru este de a prezenta cele mai bune imagini de arhitectură de pe tot globul. Din acest motiv, aspectul interfeței noastre dă prioritate imaginilor mari și pline de culoare față de text. Ori de câte ori este posibil, faceți din imagini punctul focal al produsului nostru.”

Instrucțiuni de spațiere și poziționare

Spațierea și poziționarea sunt adesea acoperite în secțiunea „Aspecte receptive”. În funcție de complexitatea produsului digital, instrucțiunile pot consta în „reguli generale” sau pot fi destul de granulare.

Ce să faci și ce să nu faci

Adesea, poate fi util să subliniezi în mod clar lucrurile de făcut și ce nu trebuie făcute în design. De exemplu:

• „ Folosiți versiunea de semn alb al logo-ului companiei noastre în subsolul interfeței.”
• „ Nu utilizați versiuni de culori alternative ale mărcii noastre de cuvinte pe fundal negru.”

Ce se poate și ce nu împiedică dezbaterea și economisește timp de proiectare și dezvoltare, dar este întotdeauna cel mai bine să oferiți o notă de context ca aceasta:

„Această listă de lucruri de făcut și de evitat acoperă o gamă largă de decizii importante de proiectare, dar nu ia în considerare orice posibilă utilizare greșită a elementelor de design ale produsului nostru. Având în vedere acest lucru, folosiți cea mai bună judecată atunci când apare incertitudine și faceți alegeri care să reflecte cu exactitate aspectul general și senzația produsului nostru.”

Elemente live și fragmente de cod

Instrucțiunile privind identitatea mărcii sunt de obicei documente statice, dar ghidurile de stil UI includ elemente live care funcționează așa cum ar fi în produsul final, ceea ce înseamnă că butoanele se comportă ca niște butoane, meniurile drop-down de fapt, iar animațiile sunt animate.

Fragmentele de cod permit dezvoltatorilor să copieze și să lipească rapid codul elementelor active în back-end-ul unui produs.

Faceți ghidurile de stil UI ușor accesibile pentru echipele de proiectare

Acum că înțelegem cum să creăm un ghid de stil și componentele și caracteristicile incluse într-un ghid de stil UI, ne îndreptăm atenția către partajare și comunicare. Mai precis, care sunt opțiunile pentru adăpostirea Ghidurilor de stil UI?

În mod tradițional, ghidurile de stil UI au existat ca pagini web. Acest lucru oferă designerilor și dezvoltatorilor acces ușor și permite elementelor de design să funcționeze așa cum ar fi în produs.

Mai recent, au apărut o mână de platforme bazate pe cloud, permițând echipelor să proiecteze, să prototipeze și să testeze produse în colaborare. Aceste platforme sunt, de asemenea, capabile să găzduiască ghiduri de stil UI și să permită membrilor echipei să facă schimb de feedback și idei în curs.

Să vedem cum câteva dintre aceste platforme își descriu abordarea față de ghidurile de stil UI.

Figma

„Creați sisteme de design cu componente legate de UI pe care întreaga echipă le poate folosi. Primiți actualizări când se fac modificări la componentele partajate”

Fază

„Biblioteci cum ar fi trebuit să fie întotdeauna: culori, proprietăți și elemente... chiar și sincronizarea tranziției — totul într-o componentă acum. Editați pe loc — totul este un maestru. Ignorați orice nu aveți nevoie, de exemplu.”

InVision

„Toate componentele de marcă și UX, inclusiv documentația de utilizare, sunt gestionate într-un singur loc. Modificările se sincronizează cu întreaga echipă, iar designerii pot trece la cea mai recentă versiune sau pot anula actualizările în orice moment.”

Material.io

„Creați-vă propria temă Material și creați o bibliotecă de simboluri de marcă aplicând modificări de stil la culoare, formă și tipografie. Partajați, încărcați și prezentați iterații de design în Galerie. Apoi utilizați modul Inspect pentru a accesa documentația dezvoltatorului.”

Ghidurile de stil UI ar trebui să fie ușor de utilizat

La asamblarea ghidurilor de stil UI, comunicarea nu poate fi considerată de la sine înțeles. Echipele de produse sunt formate din oameni din diferite discipline, medii culturale și experiențe profesionale. Utilizați aceste principii pentru a asigura claritatea și ușurința în utilizare.

Aspecte simple

Ghidurile de stil UI necesită amenajări de ecran curate și neaglomerate. Fiecare ecran trebuie să fie bine organizat, etichetat clar și foarte lizibil. Nu există niciun beneficiu în supraîncărcarea ecranelor cu informații vizuale, așa că urmăriți aranjamentele care sunt atât minime, cât și spațioase.

Instrucțiuni concise

Păstrați instrucțiunile scurte și dulci. Evitați paragrafele lungi și utilizați marcatori. Acolo unde este posibil, demonstrați cu imagini peste cuvinte.

Scenarii de utilizare informativă

Te întrebi când să folosești acest stil de glisor peste acela? „Utilizați scenarii” rezolvă acest tip de confuzie. Din nou, imaginile sunt mai puternice decât cuvintele aici, așa că oferiți exemple care demonstrează clar atât scenariul, cât și calea corectă de urmat.

Istoriile versiunilor relevante

Produsele digitale sunt actualizate frecvent. Pe măsură ce echipele de produse caută să perfecționeze fiecare detaliu al interfeței, este important să țină o evidență continuă a modului în care au evoluat componentele de design. Folosiți discreția aici — pentru întreprinderile mai mici și echipele de produse, menținerea unei biblioteci extinse de istorii de versiuni poate fi nepractică.

Ghidurile de stil UI sunt o resursă valoroasă și un instrument de proiectare puternic

Echipele contemporane de design și dezvoltare prețuiesc eficiența și colaborarea multidisciplinară, așa cum demonstrează sistemele de limbaj de design promovate de mărci mari precum MailChimp, Google și Salesforce.

Sistemele de limbaj de proiectare permit diverselor echipe care lucrează la produse digitale sofisticate să comunice folosind un limbaj vizual standardizat. Ghidurile de stil UI sunt țesute în structura sistemelor de limbaj de design și servesc ca un instrument pe care se poate baza pentru o iterație rapidă și experiențe digitale consistente.

În același timp, designul nu este o activitate rezervată doar companiilor mari. O gamă variată de echipe de produse și proiecte digitale poate beneficia de ghidurile de stil UI bine construite, dar resursele (financiare, timp și talent) variază de la o afacere la alta.

Din acest motiv, ghidurile de stil UI sunt cele mai utile atunci când sunt adaptate nevoilor companiilor individuale și ale echipelor de proiectare. Cel mai înalt obiectiv al fiecărui ghid de stil UI este un echilibru între claritate și caracter practic, care să conducă la experiențe încântătoare ale utilizatorului.

Citiri suplimentare pe Blogul Toptal Design:

• Stiluri de tipărire pentru Web și Design de imprimare
• Design receptiv – Cele mai bune practici și considerații
• De ce startup-urile au nevoie de un ghid de stil
• Cele mai bune practici de utilizare și design pentru pictograme
• Folosește-ți inspirația – Un ghid pentru Mood Boards