Ghidul de design UI final

Conţinut

• 01. Alegeți tipografia
• 02. Alegeți paleta potrivită
• 03. Linkuri și butoane de stil
• 04. Creați-vă componentele
• 05. Documentați și colaborați

Ce este proiectarea interfeței cu utilizatorul? O întrebare mai bună ar fi, ce intră de fapt în proiectarea unei interfețe cu utilizatorul? Estetică? Utilizare? Accesibilitate? Toti? Cum se unesc toți acești factori pentru a permite o experiență optimă pentru utilizator și care ar trebui să fie pe primul loc?

Accesibilitatea ar trebui să fie întotdeauna pe primul loc, punând bazele pentru o utilizare optimă (folosirea unui constructor de site-uri de top va ajuta aici). Și apoi, atunci când o interfață este accesibilă și utilizabilă, ar trebui să arate deja decent în ceea ce privește estetica (instrumentele de proiectare a interfeței vor ajuta aici). Apoi, pentru a vă asigura că designul dvs. funcționează la toate nivelurile, va trebui să-l testați temeinic, ceea ce puteți face cu selecția noastră a celor mai bune instrumente de testare a utilizatorilor. Să aruncăm o privire mai atentă asupra elementelor fundamentale ale majorității proiectelor și a ceea ce se poate face pentru a asigura coerența vizuală.

01. Alegeți tipografia

Tipografia excelentă (ca multe aspecte ale designului) se reduce la accesibilitate. Designul vizual se adaugă cu siguranță experienței generale a utilizatorului, dar la sfârșitul zilei, utilizatorii interacționează cu interfața de utilizare, nu o privesc ca pe o artă. Literele lizibile duc la claritate, iar cuvintele lizibile sunt cele care îi ajută pe utilizatori să digere eficient conținutul. Ambele sunt mai importante decât orice estetică vizuală.

Cu toate acestea, tipografia bine concepută poate fi încă satisfăcătoare din punct de vedere estetic. Helvetica alb-negru (sau un font similar) poate fi un lucru frumos după doar câteva îmbunătățiri tipografice simple. Prin îmbunătățiri, înțelegem modificarea dimensiunii fontului, înălțimea liniei, spațierea literelor și așa mai departe - nu fontul sau culoarea textului.

Tipografia „frumoasă” este de fapt urâtă când nu poate fi citită, deoarece frustrarea depășește întotdeauna estetica. Designul excelent este echilibrat și armonios.

La fel ca multe aspecte ale designului UI, reglarea vizuală pentru a echilibra accesibilitatea și estetica nu este provocarea. Provocarea constă în menținerea consecvenței pe tot parcursul proiectării. Coerența stabilește o ierarhie clară între elementele de importanță variabilă, care la rândul său îi ajută pe utilizatori să înțeleagă mai rapid o interfață de utilizare și chiar să digere conținutul mai eficient.

Când vine vorba de lizibilitate și lizibilitate, dimensiunea minimă acceptabilă a fontului, așa cum este definită de Ghidul de accesibilitate a conținutului web WCAG 2.0, este de 18 puncte (sau 14 puncte aldine). Cea mai bună dimensiune a fontului de utilizat depinde în mare măsură de fontul în sine, dar este important să fii atent la ierarhia vizuală și la modul în care această dimensiune de bază se distinge de rezumate și titluri (adică h1>, h2>, h3>).

Cu instrumentul dvs. de design UI la alegere (vom folosi InVision Studio), creați o serie de straturi de text (T) și apoi ajustați toate dimensiunile pentru a se corela cu următorul șablon:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

Cu InVision Studio (și toate celelalte instrumente de proiectare UI), acest lucru se realizează prin ajustarea stilurilor folosind panoul Inspector din partea dreaptă.

Apoi alegeți fontul, dar aveți grijă, deoarece ceea ce ați putea observa cu unele fonturi este că 18px p> și 22px h3> nu arată atât de diferit. Avem două opțiuni: modificarea dimensiunilor fontului sau luarea în considerare a unui font diferit pentru titluri. Mergeți cu acesta din urmă dacă anticipați că designul dvs. va fi greu de text.

Ține minte că:

• Proiectarea vizuală a interfeței de utilizare este adesea o abordare de tip gut-feeling
• Nimic nu este decis; totul poate fi schimbat

Inaltimea liniei

Înălțimea optimă a liniilor asigură faptul că liniile de text au suficientă distanță între ele pentru a atinge niveluri decente de lizibilitate. Acest lucru devine din ce în ce mai recunoscut ca „standard”; Instrumentul Google Lighthouse Audit îl sugerează chiar ca o verificare manuală (sau chiar un semnalizator dacă textul conține legături care pot fi prea apropiate ca urmare a înălțimii liniei suboptime).

Încă o dată, WCAG ne ajută cu acesta, declarând că înălțimile liniei ar trebui să fie de 1,5x dimensiunea fontului. Deci, în instrumentul dvs. de design UI sub „Linie” (sau similar), înmulțiți pur și simplu dimensiunea fontului cu - cel puțin - 1,5. De exemplu, dacă textul corpului este de 18 px, atunci înălțimea liniei ar fi de 27 px (18 * 1,5 - puteți executa, de asemenea, operația de matematică direct în Inspector). Din nou, totuși, fiți atenți - dacă 1.6x se simte mai bine, utilizați 1.6x. Amintiți-vă că diferite fonturi vor genera rezultate diferite.

Este prea devreme să ne gândim la utilizarea datelor reale în proiectarea noastră, dar, cel puțin, ar trebui să folosim în continuare date oarecum realiste (chiar lorem ipsum). InVision Studio are o aplicație nativă de date reale pentru a ne ajuta să vedem cum ar putea arăta de fapt tipografia noastră.

Spațierea paragrafelor

Spațierea punctelor nu este un stil pe care îl putem declara folosind Inspectorul InVision Studio. În schimb, va trebui să aliniem manual straturile folosind Ghiduri inteligente (⌥). Similar cu înălțimea liniei, multiplicatorul magic este de 2x (dublul dimensiunii fontului). De exemplu, dacă dimensiunea fontului este de 18 px, atunci ar trebui să existe cel puțin 36px înainte de a intra în următorul bloc de text. Distanța dintre litere trebuie să fie de cel puțin 0,12.

Cu toate acestea, nu trebuie să ne facem griji cu privire la acest lucru până când nu începem să creăm componente.

Stiluri partajate

Dacă instrumentul dvs. de proiectare a interfeței de utilizare îl acceptă (InVision Studio încă nu), luați în considerare transformarea acestor stiluri tipografice în „Stiluri partajate” pentru a le face reutilizabile rapid, asigurând în același timp consistența vizuală. Acest lucru se realizează de obicei prin intermediul inspectorului.

02. Alegeți paleta potrivită

Selectarea culorilor perfecte pentru designul dvs. depășește mult estetica: poate informa întreaga ierarhie a site-ului dvs.

Când vine vorba de designul UI, culoarea este în mod obișnuit unul dintre primele lucruri cu care ne bucurăm să ne ocupăm, dar suntem învățați că scufundarea directă în designul vizual este un lucru rău. Acest lucru este cu siguranță adevărat, cu toate acestea, atunci când vine vorba de consistența vizuală, culoarea ar trebui să fie o preocupare majoră, deoarece joacă alte roluri.

Culoarea în designul interfeței de utilizare poate fi extrem de eficientă, dar din moment ce unii utilizatori (mulți, de fapt) suferă de diferite tipuri de dizabilități vizuale, nu este întotdeauna de încredere. Acestea fiind spuse, nu este neapărat vorba despre culoarea specifică utilizată, ci mai degrabă despre tipul de culoare. Acest lucru poate să nu fie adevărat atunci când vine vorba de branding, deoarece culoarea este utilizată pentru impactul emoțional în acest sens, dar, în proiectarea interfeței de utilizare, culoarea este folosită și pentru comunicarea intenției, semnificației și, desigur, ierarhiei vizuale.

01. Puternic
Pluginul Stark este compatibil cu Sketch și Adobe XD și vă ajută să verificați contrastul culorilor și să simulați orbirea culorilor direct din pânză. Asistență pentru Figma și InVision Studio în curând.
02.Culori
Culori este un set de 90 de combinații de culori care au cantitatea adecvată de contrast de culoare pentru a satisface Orientările WCAG 2.0 - unele dintre ele reușesc chiar să îndeplinească standardul AAA.
03. Proiectul A11y
Proiectul A11y este un hub masiv pentru toate lucrurile legate de accesibilitate. Acesta include resurse, instrumente, sfaturi, tutoriale și este creat de producătorul pluginului Stark și primește finanțare de la InVision.

Cele trei tipuri de culoare

Culorile au sens, deci este important să nu aveți prea multe dintre ele. Prea multe semnificații au ca rezultat mai multe lucruri pe care utilizatorul trebuie să le înțeleagă și să le amintească - ca să nu mai vorbim de mai multe combinații de culori pentru care să ne facem griji. În general, acesta ar fi formatul recomandat:

• O culoare de îndemn (de asemenea, culoarea principală a mărcii)
• O culoare închisă neutră (mai bună pentru elementele UI sau modul întunecat)
• Pentru toate cele de mai sus, o variație ușor mai deschisă și mai întunecată

Aceasta permite următoarele:

• Modul întunecat va fi ușor de realizat
• Culoarea noastră CTA nu va intra niciodată în conflict cu alte culori
• În orice scenariu vom putea sublinia și de-sublinia

Configurați-vă paleta

Cu instrumentul dvs. de design UI la alegere, creați o tablă de lucru destul de mare (atingeți A) pentru fiecare culoare (denumită „Brand”, „Neutral / Light” și „Neutral / Dark”). Apoi, în fiecare planșă de creație, creați dreptunghiuri suplimentare mai mici care afișează variațiile mai întunecate și mai deschise ale culorii, precum și celelalte culori în sine.

Am considera puțin mai deschise și mai întunecate ca fiind 10% în plus alb și respectiv 10% extra negru. Când ați terminat, afișați o copie a stilurilor tipografice pe fiecare planșă. Culoarea acestor straturi de text ar trebui să fie neutră, cu excepția panoului de lucru cu lumină neutră, unde ar trebui să fie neutru întunecat.

Contrast

În continuare, va trebui să ne verificăm culorile pentru un contrast optim al culorilor. Există o varietate de instrumente care pot face acest lucru, de exemplu pluginul Stark pentru Sketch și Adobe XD sau Contrast pentru macOS - cu toate acestea, o soluție online, cum ar fi Contrast Checker sau Color Contrast Checker, va merge bine.

Verificați contrastul culorilor pentru fiecare combinație și modificați culorile în consecință. Dacă nu sunteți sigur ce culori utilizați, încercați să folosiți recomandările Color Safe.

03. Linkuri și butoane de stil

mărimea

Butoanele și legăturile, la fel ca tipografia, ar trebui să aibă câteva variante. La urma urmei, nu toate acțiunile au un nivel egal de importanță și, așa cum am discutat mai devreme, culoarea este o metodă de comunicare nesigură, deci nu poate fi principala metodă de influențare a ierarhiei vizuale. De asemenea, trebuie să ne jucăm cu mărimea.

Un test de accesibilitate vizuală este un test de utilizare utilizat pentru a determina dacă obiectivele de atingere par a putea fi făcute clic. Sincronizați designul de la Studio la Freehand (⌘⇧F), trimiteți URL-ul rezultat testerilor și solicitați-i să înconjoare elementele pe care consideră că pot fi făcute clic.

Utilizatorii non-InVision Studio pot folosi și Freehand, dar utilizatorii InVision Studio își pot lansa proiectele în Freehand fără probleme de la InVision Studio, care este cel mai rapid și mai eficient mod de a obține feedback vizual de la utilizatori.

În general, vă recomandăm ca textul butonului să fie declarat 18px (la fel ca textul corpului), dar butoanele în sine să aibă trei variații de dimensiune:

• Normal: 44 px înălțime (colțuri rotunjite: 5 px)
• Mare: 54 px înălțime (colțuri rotunjite: 10 px)
• Foarte mare: 64 px înălțime (colțuri rotunjite: 15 px)

Acest lucru ne permite să facem ca anumite butoane să pară mai importante fără a depinde de culoare și, de asemenea, să cuibărim butoanele (de exemplu, utilizați un buton într-un câmp de formular cu aspect minim).

Adâncime

Indiferent dacă ținta de atingere este un buton sau un câmp de formular, umbrele ar trebui utilizate pentru a crește adâncimea și, prin urmare, sugerează interactivitatea. Un stil unic de umbră pentru toate variantele de butoane și câmpuri de formular este în regulă.

Interactivitate

Fiecare tip de buton are nevoie de o variantă pentru a indica starea de plutire. Acest lucru îi clarifică utilizatorului că ceea ce a încercat să facă este complet bine și se asigură că continuă fără întârziere.

Acesta este de fapt unul dintre aspectele mai complexe ale menținerii consistenței vizuale, deoarece culoarea este adesea stilul preferat de schimbat atunci când vine vorba de crearea unei stări. Din fericire, aceste modificări de stare pot fi relativ subtile, deci este bine să schimbi culoarea în variația ei ușor mai deschisă sau mai întunecată - pentru asta sunt destinate. Acest lucru se aplică și linkurilor.

Decizia împotriva acestui lucru ne va face să folosim o culoare care fie are deja o semnificație semnificativă, ceea ce va duce la confuzia utilizatorilor, fie va decide să vină cu o altă culoare. Decizia de a folosi o culoare secundară este complet bună, dar ar trebui să fie salvată mai degrabă pentru imagini de marketing decât elemente de interfață. Mai puțin este mai mult (și mai ușor).

Nu uitați să repetați acest pas pentru fiecare planșă de lucru. Nu includeți butoanele CTA de marcă pe planșa de lucru a mărcii - mai târziu vom acoperi ce se întâmplă atunci când anumite combinații nu funcționează.

04. Creați-vă componentele

Componentele economisesc foarte mult timp și toate instrumentele de proiectare a interfeței de utilizare oferă această caracteristică (de exemplu, în Sketch, se numesc simboluri). În Studio putem crea componente selectând toate straturile care ar trebui să alcătuiască componenta și folosind ⌘K scurtătură.

Utilizarea componentelor

Cadrele de sârmă sunt foarte utile, nu numai pentru proiectarea interfețelor UI de mare utilizare, ci și pentru a afla ce va necesita interfața noastră de utilizare pe termen lung. Este ca o dovadă de viitor.

Aceasta nu înseamnă că trebuie să proiectăm o mulțime de componente sau să fim pregătiți pentru orice scenariu posibil, dar înseamnă că trebuie să folosim o atitudine „Ce se întâmplă dacă?”.

De exemplu, dacă wireframe-ul nostru solicită o componentă 3x1, dar știm că conținutul nu este pus în piatră, o mică contemplare ne-ar putea determina să ne întrebăm: „Ce se întâmplă dacă aceste componente ajung să fie 4x1?”. Regula generală este: proiectează doar pentru nevoile utilizatorului care există deja, dar încearcă să facă soluțiile relativ flexibile. În caz contrar, vom termina cu niște „datorii de proiectare” foarte dezordonate mai târziu.

Acum putem reutiliza această componentă trăgând-o pe pânză din Biblioteci> Document din partea stângă, deși rețineți că acest flux de lucru poate diferi în funcție de instrumentul dvs. UI.

Această metodă de creare a ghidurilor de stil (și în cele din urmă de a crea designul în sine) funcționează deosebit de bine cu aspectele modulare / bazate pe carduri, deși „zonele comune” precum anteturile, subsolurile și navigațiile sunt, de asemenea, candidați excelenți pentru o componentă.

La fel cum am făcut cu stilurile, culorile și butoanele noastre tipografice, trebuie să ne amintim să ne organizăm cu atenție componentele.

Folosind regulile noastre

Mai devreme am făcut o remarcă despre faptul că nu se utilizează butoane CTA de marcă deasupra culorii mărcii, deoarece butoanele CTA de marcă trebuie evident să se evidențieze printre toate celelalte. Deci, cum ne putem ocupa de a crea o componentă de marcă, în timp ce putem folosi un buton CTA de marcă? La urma urmei, dacă folosim butoane întunecate neutre pentru, să zicem, butoane de navigare sau pur și simplu butoane mai puțin importante, nu ar fi o opțiune, nu?

Dreapta. Deci, aceasta ar fi o oportunitate ideală pentru a crea o componentă - în mod specific, o combinație antet + text + buton. Observați cum am creat un fundal „card” cu lumină neutră pentru a permite utilizarea butonului de marcă. În mod similar, câmpul de formă de lumină neutră (câmpurile de formă sunt de obicei albe datorită modelului mental sinonim din punct de vedere istoric cu formele de hârtie) nu arată uimitor pe fundalul de lumină neutră, deci pot fi utilizate doar pe fundalul întunecat neutru - fie direct, fie în interior o componentă întunecată neutră. Acesta este modul în care ne flexibilizăm designul, respectând în același timp regulile și păstrând coerența.

Testare stresanta

În mod ideal, cel mai rapid și mai eficient mod de a asigura robustețea în proiectarea noastră este testarea la stres. A pune la încercare un design înseamnă a fi crud. Să presupunem că avem o navigație cu X cantitate de articole de navigație, deoarece aceasta era cerința; pentru a asigura cu adevărat flexibilitatea, încercați să modificați aceste cerințe adăugând mai multe elemente de nav sau, pentru a arunca cu adevărat o cheie în lucru, încercați să adăugați și un element de nav cu o ierarhie vizuală mai mare decât celelalte. Regulile noastre privind dimensiunea, tipografia și culoarea permit așa ceva? Sau, pentru a oferi o utilizare optimă, avem nevoie de o altă regulă?

Rețineți că există o diferență între adăugarea de reguli și îndoirea regulilor. Mai multe cazuri de margine înseamnă o consistență mai mică, deci de cele mai multe ori este mai bine, din motive de utilizare, să regândim pur și simplu componenta.

05. Documentați și colaborați

Cum facem fișierele noastre de proiectare mai ușor de utilizat atât pentru noi, cât și pentru alți designeri care ar putea folosi fișierul nostru de proiectare? Ei bine, păstrarea acestora în condiții de siguranță stocate într-un spațiu de stocare cloud partajat și fiabil este importantă, după cum veți afla.

Culori

Primul pas este să salvați toate culorile în specimenul „Culori document” dacă nu am făcut-o deja - acest lucru le va facilita accesul atunci când trebuie să le aplicăm în designul nostru.Pentru aceasta, deschideți widgetul de selectare a culorilor din Inspector, alegeți „Document Colors” din meniul derulant și apoi faceți clic pe pictograma + pentru a adăuga culoarea la specimen. Acest lucru funcționează la fel în majoritatea instrumentelor UI.

Biblioteci partajate

Apoi, trebuie să ne convertim documentul - complet cu stiluri tipografice, culori, butoane, zone comune și componente de bază - într-o bibliotecă partajată.

În esență, acest lucru înseamnă că fiecare element trebuie să fie o componentă, chiar dacă este format dintr-un singur strat. Faceți clic pe butonul + ‌ din bara laterală Biblioteci din partea stângă și apoi importați chiar acest document într-un document nou. Așa este: documentul nostru este acum o bibliotecă și este gata să fie utilizat pentru a proiecta interfețe UI cu consistență garantată.

InVision Studio este oarecum limitat, în sensul că nu se sincronizează încă cu instrumentul oficial de proiectare InVision, dar este suficient de ușor să găzduiești biblioteca în Dropbox pentru ca alți designeri să le poată utiliza și actualiza în timp. Când se face o modificare (local sau de la distanță), fiecare fișier Studio care folosește biblioteca (din nou, local sau de la distanță) vă va întreba dacă doriți să actualizați culorile și componentele. Acesta este modul în care bibliotecile de proiectare sunt întreținute între echipe.

Când vine vorba de proiectarea interfețelor de utilizator care sunt vizibile, reutilizați totul. Creați butoane, apoi utilizați butoane pentru a crea componente ale butoanelor, apoi utilizați
pentru a crea alte componente, cum ar fi alerte și dialoguri.

Pur și simplu nu creați componente care nu sunt necesare. Amintiți-vă, construirea unei biblioteci este un efort continuu, de colaborare. Nu trebuie completat dintr-o dată, completat de tine singur sau completat vreodată. Trebuie doar să transmită un limbaj.

Proiectare la scară

Pe măsură ce un design se extinde, gestionarea acestuia devine mai dificilă. Există diverse ajustări pe care am putea dori să le facem pentru a le menține eficiente și menținute, mai ales că DSM-ul InVision nu funcționează încă cu Studio.

De exemplu, am putea dori să folosim straturi de text pentru a adnota biblioteca noastră ca mijloc de explicare a cazurilor de utilizare a diferitelor elemente. Pentru stilurile tipografice, am putea chiar edita textul pentru a fi mai descriptiv (de ex. "H1> / 1.3 / 44px"). Aceasta spune că h1>s ar trebui să aibă 44 px și să aibă o înălțime a liniei de 1,3.

Design Handoff

Instrumentele de transmitere a proiectelor afișează diferitele stiluri utilizate de fiecare element din design, astfel încât dezvoltatorii să poată construi aplicația sau site-ul web. Aceste instrumente includ o prezentare generală a stilurilor și, de asemenea, o copie a specimenului „culorile documentului”. Dezvoltatorii pot chiar să copieze aceste stiluri sub formă de cod, ceea ce este excelent dacă ați decis să creați orice documentație scrisă de proiectare și doriți să includeți reprezentări de fragmente de cod ale componentelor.

Dacă vă faceți griji cu privire la depanarea și gestionarea unui site web, vă veți ajuta să vă asigurați că ați obținut serviciul de găzduire web potrivit, dar pentru sistemul dvs. de proiectare, instrumentul de predare a designului InVision, Inspect, este lucrul de utilizat. Pentru a-l utiliza, facem clic pe butonul / pictograma „Publicați în InVision” din InVision Studio, deschidem adresa URL rezultată și apoi atingeți pentru a comuta la modul Inspectare. Este foarte comod.

Acest conținut a apărut inițial în revista net.