Proiectarea sistemelor UI modulare prin dezvoltare bazată pe ghiduri de stil

Utilizarea unui ghid de stil pentru a stimula dezvoltarea este o practică care câștigă multă tracțiune în dezvoltarea front-end - și din motive întemeiate. Dezvoltatorii vor începe în ghidul de stil prin adăugarea de cod nou sau actualizarea codului existent, contribuind astfel la un sistem UI modular care este ulterior integrat în aplicație. Dar pentru a implementa un sistem UI modular, trebuie să abordăm designul într-un mod modular.

Designul modular ne încurajează să gândim și să proiectăm un UI și UX în modele. De exemplu, în loc să proiectăm o serie de pagini sau vizualizări pentru a permite unui utilizator să îndeplinească o sarcină, am începe procesul de proiectare prin înțelegerea modului în care este structurat sistemul UI și a modului în care componentele sale pot fi utilizate pentru a crea fluxul de utilizator.

Citiți suplimentare despre SmashingMag:

• Cum să faci un ghid de stil eficient
• O privire de ansamblu aprofundată asupra instrumentelor ghid pentru stilul de viață
• Automatizarea dezvoltării bazate pe ghiduri de stil
• Set de pictograme pentru ghiduri de stil gratuit pentru scriitori și editori

În această postare, voi explica valoarea modularității în designul UI și modul în care aceasta se leagă de procesul de dezvoltare bazată pe ghiduri de stil, care îmbunătățește implementarea aplicațiilor flexibile și ușor de utilizat, ajutând în același timp designerii și dezvoltatorii să colaboreze mai productiv.

Design modular în interfața de utilizare

Designul modular se referă la descompunerea unui design în părți mici (module), crearea lor independent și apoi combinarea lor într-un sistem mai mare. Dacă ne uităm în jurul nostru, vom găsi multe exemple de modele modulare: Mașinile, computerele și mobilierul sunt toate modulare. Datorită modularității lor, părți ale acestor sisteme pot fi schimbate, adăugate, îndepărtate și rearanjate. Acest lucru este grozav pentru consumatori, deoarece pot personaliza sistemul pentru a se potrivi nevoilor lor . Vrei o trapă, un motor mai puternic, scaune din piele? Ai inteles! Designul modular al mașinilor permite aceste tipuri de personalizări și multe altele.

Un alt exemplu minunat este mobilierul IKEA. În ilustrațiile de mai jos, puteți observa că modularitatea designului nu este doar în forma bibliotecii, ceea ce îi permite să fie așezat în diferite direcții, sau prin aceea că puteți adăuga inserții în deschiderile sale, ci și în chiar piese care fac piesa în sine, care sunt dreptunghiuri de dimensiuni diferite, repetând același model.

Din punct de vedere al producției, designul modular este, de asemenea, eficient din punct de vedere al costurilor. Un aspect important al acestui lucru este că construirea unor piese simple mici care pot fi conectate mai târziu este mai ușoară și mai ieftină decât construirea unei piese complexe mari deodată. În plus, soluția poate fi reutilizată din nou și din nou, maximizând productivitatea.

Obiectivele în crearea unui design UI sunt similare. În calitate de designeri, dorim să creăm un sistem UI care este eficient atât în ​​construcție, cât și în exploatare. Când găsim o soluție la o problemă, dorim să putem reutiliza soluția în multe locuri. Acest lucru nu numai că economisește timp, dar stabilește și un model pe care utilizatorii îl pot învăța o dată și îl pot aplica din nou în alte zone ale aplicației. De asemenea, dorim să putem personaliza sistemul pentru anumite scenarii fără a fi nevoie să restructurăm totul.

Acesta este exact ceea ce modularitatea aduce designului UI: conduce la un sistem flexibil, scalabil și eficient din punct de vedere al costurilor , dar și personalizabil, reutilizabil și consistent .

Exemple de proiectare modulară

Câteva exemple de design modular al interfeței de utilizare pot fi văzute în modele, cum ar fi grilele receptive, designul ferestrelor de faianță și designul cardurilor . În toate, modulele sunt utilizate în mod repetat pentru a oferi un aspect flexibil care se adaptează cu ușurință la diferite dimensiuni de ecran. În plus, modulele acționează ca containere pentru componente, permițându-ne să inserăm diferite tipuri de conținut și funcționalitate, la fel ca inserțiile care pot fi adăugate unui dulap IKEA.

Este aceasta omogenă?

Dacă proiectarea modulară se referă la proiectarea unui sistem, iar sistemele UI cuprind în mare parte aceleași părți (butoane, fonturi, pictograme, grile etc.), atunci s-ar putea să vă întrebați:

• Modelele modulare nu vor arăta toate la fel?
• Cum va afecta acest lucru identitatea mărcii?
• Cum se poate face interfața de utilizare a unui produs să fie unică?

Aceste întrebări, deși sunt valabile, ridică o întrebare de bază: unde se află inovația și unicitatea în designul produselor? Această dezbatere s-a reluat în ultima vreme (vezi „Omogenitatea insuportabilă a designului” și „În apărarea designului omogen”), dar aș spune că, deoarece designul vizual este ceea ce vedem mai întâi, avem tendința de a crede că inovația și unicitatea stau în felul în care arată un design. Cu toate acestea, designul vizual este doar o parte din asta. Inovația și unicitatea în proiectarea produsului trebuie să fie luate în considerare în întregul produs: în valoarea intrinsecă pe care o oferă și în modul în care oamenii îl experimentează, care include aspectul său. Luați un scaun. Este necesar să fie un scaun, dar nu toate modelele de scaune arată, simt sau funcționează la fel. De fapt, designul scaunelor a fost istoric un domeniu de inovație în design și materiale. În mod similar, interfețele de utilizator au propriile cerințe, iar utilizarea modelelor care s-a dovedit a funcționa nu înseamnă sacrificarea inovației și unicității. Dimpotrivă, inovația și unicitatea vor fi necesare pentru a rezolva problemele particulare pe care le au clienții tăi. Frumusețea designului modular este că ne încurajează să abordăm aceste soluții ca pe un sistem de părți care sunt interconectate, mai degrabă decât să găsim soluții originale într-un mod izolat, de dragul de a fi diferit. Cu alte cuvinte, un design inovator aplicat unui control UI nu va rămâne retrogradat într-un singur loc în aplicație, ci va pătrunde în întregul sistem, menținând coeziunea și îmbunătățind gradul de utilizare.

Modularitatea ghidului de stil-Drive Development

Din punct de vedere al implementării, dezvoltarea bazată pe ghiduri de stil este, de asemenea, foarte modulară. Pentru început, procesul începe cu o fază de descoperire : înțelegerea problemei care trebuie rezolvată, colectarea cerințelor și iterarea prin soluții de proiectare. În timp ce soluțiile de proiectare sunt de obicei prezentate ca un întreg pachet sau caracteristică, ele ar trebui să fie într-adevăr o combinație a numeroaselor părți ale sistemului documentate în ghidul de stil. Unele părți ale designului ar putea fi noi, dar ar trebui să fie create în continuare ca module. Ideea este să folosiți ghidul de stil pentru a determina ce module sunt disponibile în sistemul UI care pot fi reutilizate sau extinse pentru a crea designul.

(Dacă nu există un ghid de stil? Nu vă supărați! Vă voi arăta în secțiunea următoare cum să proiectați într-un mod modular, chiar dacă nu utilizați un ghid de stil.)

Următorul pas în dezvoltarea ghidată de stil este faza de abstractizare , care este practic exercițiul de împărțire a soluției de proiectare în părți mai mici. În această fază, designerii și dezvoltatorii lucrează împreună pentru a discerne designul propus și pentru a identifica elementele și componentele (adică modulele) care vor fi fie utilizate, fie îmbunătățite, fie care vor trebui create pentru implementare.

Faza de abstractizare servește și la trasarea unui plan pentru următorul pas: implementare și documentare . În această fază, modulele sunt fie construite, fie îmbunătățite izolat de restul modulelor existente. În dezvoltarea web, aceasta înseamnă construirea unei componente sau definirea stilurilor pentru un element independent de aplicație. Acesta este un aspect important al modularității, deoarece vă ajută să identificați orice probleme la începutul procesului, prevenind dependențele neprevăzute cu alte părți ale sistemului. Rezultatul sunt părți mai stabile care sunt mai ușor de integrat în întreg.

Ceva unic în ceea ce privește dezvoltarea bazată pe ghiduri de stil este că, în timp ce implementarea progresează, documentarea are loc, mai degrabă decât o gândire ulterioară. Acest lucru este posibil deoarece atunci când se folosește un generator de ghid de stil, documentația devine un ghid de stil viu , servind atât ca cadru cât și ca sandbox pentru implementare:

• Ghidul de stil de viață servește ca un cadru de definiții pentru elementele UI (cum ar fi titluri, liste, legături, controale de intrare etc.) și ca o bibliotecă de componente (cum ar fi sisteme de navigare, bare de instrumente, instrumente de căutare, tabele grilă etc.). ) care sunt disponibile pentru utilizare. Aceasta înseamnă că dezvoltarea nu este începută de la zero de fiecare dată. În schimb, se bazează pe definițiile existente în sistemul UI și contribuie la acesta.
• Este, de asemenea, un sandbox deoarece servește ca spațiu demonstrativ pentru a construi și a testa implementarea. Exact aici are loc dezvoltarea înainte de a fi integrată în aplicație.

Ultimul pas al dezvoltării bazate pe ghiduri de stil, faza de integrare , seamănă cu pasul de asamblare în proiectarea modulară. Elementele sau componentele UI care sunt necesare au fost dezvoltate și sunt gata să fie integrate în aplicație. Ceea ce rămâne este să le configurați și să le personalizați. În timpul integrării, ghidul de stil este ca orice manual de instrucțiuni bun care este folosit pentru a asambla un design modular fizic.

Acum că am identificat conceptele fundamentale ale designului modular și ale dezvoltării bazate pe ghiduri de stil, să le folosim.

Proiectare într-un mod modular

Imaginează-ți asta: ai creat un flux de utilizatori grozav, ai creat machete și prototipuri pentru a ilustra interacțiunile și ai documentat fiecare parte. Sunt șanse ca modelele tale să urmeze deja un ghid de stil, ceea ce te-ar putea aduce la un mare avantaj. (Dacă nu, nu vă transpirați!) Doar faceți un pas înapoi și începeți să mapați principalele părți ale soluției dvs. de proiectare la un nivel înalt. Aceste părți ar putea fi punctele de interacțiune în care se realizează anumite lucruri. De exemplu, un flux de plată ar putea arăta astfel:

Dar țineți armele! Acestea nu sunt încă module. Pentru a ajunge acolo, trebuie să identificăm elementele UI care sunt persistente în flux, cum ar fi:

• indicatorul pașilor de finalizare a achiziției,
• elemente de formular utilizate pentru a introduce informații,
• reprezentarea produselor în coș,
• reprezentarea produselor conexe pe care alții le-au cumpărat,
• politici privind achiziția,
• text de ajutor,
• mesaje și alerte.

Săpând puțin mai adânc, vom găsi și stiluri și modele de interacțiune:

• Stiluri:

• culorile folosite pentru a desemna:

  • mesaje de eroare, succes, avertizare și informare;
  • acțiuni primare versus secundare;
  • stări inactive versus selectate versus stări dezactivate;
  • link-uri versus text obișnuit;
  • branding;

• tipografie folosită pentru a desemna diferite tipuri de conținut:

  • dimensiunea fontului pentru aranjarea ierarhică a informațiilor;
  • tipuri de fonturi pentru evidențierea mesajelor sau furnizarea de informații suplimentare;
  • liste pentru a rezuma informațiile;

• iconografie pentru a transmite sens vizual și pentru referire rapidă la acțiuni comune.

• Modele de interacțiune:

  • afișarea pașilor următori (dezactivat);
  • afișarea pașilor anteriori (activat astfel încât informațiile să poată fi editate);
  • afișarea rezumatelor care pot fi editate;
  • validarea informațiilor odată ce utilizatorul a făcut clic în afara câmpului;
  • furnizarea de text de ajutor la rulare;
  • actualizarea coșului odată ce a fost făcută o selecție.

Odată ce designul a fost împărțit în toate aceste piese mai mici, vom avea în sfârșit modulele noastre. În acest moment, este mai ușor de observat că multe dintre ele se aplică nu numai procesului de plată, ci și multor alte zone ale aplicației. Cu o abordare de proiectare modulară, aceste module pot fi create astfel încât să fie utilizabile în acest design special, precum și în cele viitoare.

Designul atomic merită menționat ca o metodologie care poate accelera acest proces de creare a design-urilor modulare. Această metodologie analizează relațiile dintre diferitele părți ale sistemului și modul în care acestea se interrelaționează, folosind chimia ca analogie. Parcurgerea pașilor este aproape inversul exercițiului nostru anterior:

1. Pornim de la atomi , care sunt cele mai mici module din sistem (în exemplul nostru, butoanele, tipografia și iconografia).
2. Modulele cresc în complexitate, legându-se împreună în molecule , care oferă mai multă funcționalitate (în exemplul nostru, indicatorii pașilor de finalizare a achiziției și modulul de produse aferente).
3. Apoi, există organisme , care sunt molecule care sunt grupate împreună în aplicație (în exemplul nostru, antetul aplicației și diverse forme).
4. Lăsând analogia chimiei, următorul nivel este șabloanele , care sunt structuri predefinite în care sunt plasate organismele.
5. În cele din urmă, există pagini , care sunt exemple de șabloane.

Piesa care lipsește aici este o modalitate de a documenta modulele care au fost identificate. Aceasta nu este doar o chestiune de a crea un document de specificații pentru a surprinde modul în care modulele trebuie construite sau de a scrie linii directoare care surprind definiții de nivel înalt, cum ar fi culorile mărcii și familiile de fonturi (care sunt tipice pentru orice ghid de stil standard). Mai degrabă, documentația trebuie să fie mai sofisticată și mai dinamică, astfel încât atunci când aceste module se schimbă (și știți că se vor schimba!), documentația să nu devină învechită. Acesta este exact locul în care ghidurile de stiluri de viață completează golul!

Folosind un ghid de stil de viață

Un ghid de stil de viață poate fi foarte util în timpul procesului de proiectare, deoarece oferă mai multe lucruri.

O bază pentru a lucra

În loc să pornești de la zero de fiecare dată, ghidul de stil oferă direcția vizuală și modulele pe care ar trebui să le folosești pentru a crea designul.

Deoarece un ghid de stil de viață este generat din codul real, acesta reflectă cea mai recentă și cea mai bună versiune a designului implementat.

Documentarea soluțiilor de proiectare

Cunoștințele care au fost dobândite pentru a rezolva o anumită problemă de UI sau UX pot fi trimise pentru utilizare ulterioară.

Acest lucru ajută la menținerea coerenței în implementare, încurajându-vă să integrați orice soluție nouă într-o parte a designului actual.

Veți dezvolta modele cu care utilizatorii se pot familiariza, îmbunătățind astfel gradul de utilizare.

Ușurința comunicării

Ghidul ajută la comunicarea designului oferind cea mai actualizată reprezentare a interfeței de utilizare (spre deosebire de machetele statice, care devin depășite rapid).

Este dezvoltat un limbaj comun UI, deoarece trebuie să denumiți diferitele elemente din ghidul de stil. Acest lucru necesită colaborare nu numai între designerii UI, ci și între designeri și dezvoltatori, ceea ce este un mare avantaj atunci când trebuie să comunicați cum ar trebui implementat un design.

Indiferent dacă aveți un ghid de stil existent sau plănuiți să creați unul, automatizarea procesului vă va pune în direcția corectă, conducând procesul de proiectare într-un mod modular. Deci, dacă sunteți gata să cumpărați un generator de ghiduri de stil de viață, atunci aș recomanda următoarele resurse:

• „O privire de ansamblu aprofundată asupra instrumentelor ghid pentru stilul de viață”, Robert Haritonov, Smashing Magazine
• „Prezentare generală asupra generatoarelor de biblioteci de modele”, David Hund, GitHub
• „Style Guide Generator Roundup”, Susan Robertson, A List Apart

Nu o duce la extrem!

Acum că ne-am uitat la modul de ajustare a procesului de proiectare pentru a încorpora modularitatea, precum și avantajele unui ghid de stil de viață, haideți să explorăm câteva dintre capcanele comune pe care le puteți întâlni pe parcurs.

Ghidul de stil nu înlocuiește lucrările de proiectare

Nu este neobișnuit să auzim de la manageri că, odată ce ghidul de stil de viață este pus la punct, cea mai mare parte a lucrărilor de proiectare este finalizată. În timp ce o mare parte din munca repetitivă și trivială este făcută (cum ar fi prototiparea diferitelor stări ale unui buton din nou și din nou), luați în considerare că:

• noi caracteristici vor trebui construite în mod continuu,
• găsirea unei soluții implică luarea deciziilor de proiectare.

Deci, da, a avea un ghid de stil de viață și a urma dezvoltarea bazată pe ghid de stil îmbunătățește fluxul de lucru, dar nu îl scoate pe designer din ecuație. A avea un instrument care accelerează fluxurile de lucru și stimulează comunicarea este avantajos atât pentru designeri, cât și pentru dezvoltatori. Dar lucrul grozav al acestei abordări este că permite mult spațiu pentru personalizarea interfeței de utilizare, îmbunătățind astfel experiența utilizatorului - și a da seama că face parte din rolul designerului.

Nu urmați tiparele până la extrem

Ar trebui să ne străduim întotdeauna să folosim modele într-o aplicație. De exemplu, utilizarea consecventă a culorilor și a dimensiunilor fontului poate indica rapid elementele utilizatorului din interfața de utilizare cu care poate fi interacționat. Cu toate acestea, evitați să utilizați un model doar pentru că a fost implementat înainte; mai degrabă, folosește-l pentru că rezolvă cu adevărat problema la îndemână.

De exemplu, dacă ați stabilit modelul de afișare a barelor de instrumente în partea de sus a ecranului, acest model va funcționa în majoritatea cazurilor, dar vor exista momente în care prezentarea unei bare de instrumente contextuale, mai aproape de locul în care utilizatorul ia măsuri, are mai mult sens. . Deci, întrebați-vă întotdeauna dacă reutilizarea unui model dă prioritate ușurinței implementării față de experiența utilizatorului.

Nu treceți cu vederea iterarea designului

Acest lucru se leagă puțin de punctul anterior. Nu trece cu vederea valoarea iterației și inovației atunci când încerci noi modele și găsești modalități de a proiecta o interfață, chiar dacă la prima vedere nu respectă ghidul de stil. Ghidul de stil nu ar trebui să fie un frâu pentru efortul dvs. de a crea cea mai bună experiență de utilizator posibilă. Mai degrabă, după cum sugerează și numele, ar trebui să fie un ghid, un punct de plecare care să vă ajute să rezolvați problemele, exploatând munca și experiența anterioară. Iterația în timpul fazei de proiectare ar trebui să continue să fie la fel de importantă ca niciodată și ar trebui să vă stimuleze să îmbunătățiți tiparele stabilite.

Sarcina de întreținere

Dintre milioanele de lucruri pe care le implică munca ta, menținerea ghidului de stil ar trebui să fie ultimul lucru care se simte ca o povară. Pentru a depăși acest lucru, consider utile următoarele practici:

• Găsiți un sistem de documentare ușor de instalat și ușor de interacționat în mod regulat.
• Faceți actualizările documentației o parte a fluxului dvs. de lucru, mai degrabă decât o gândire ulterioară, odată ce implementarea este deja lansată. Documentați-vă pe măsură ce mergeți!
• Stabiliți linii directoare care să faciliteze contribuția tuturor la documentație. Acest lucru va distribui volumul de muncă și va crește sentimentul de proprietate.

Proiectați modular pentru a construi modular

Crearea unui sistem UI flexibil care este consistent și ușor de personalizat, în același timp scalabil și eficient din punct de vedere al costurilor, depinde nu numai de modul în care este construit, ci și de modul în care este proiectat. O bibliotecă de componente are foarte puțină valoare dacă fiecare design nou este creat independent, ignorând standardele și modelele stabilite.

Pe de altă parte, nu este vorba despre realizarea de interfețe de tăiat prăjituri care reutiliza aceleași stiluri și modele pentru că este convenabil. Un design bun este eficient nu datorită unicității sale, ci pentru că combină atât forma, cât și funcția pentru a crea o experiență grozavă . Acest obiectiv ar trebui să fie întotdeauna de prim rang, iar utilizarea unei metode precum dezvoltarea bazată pe ghiduri de stil pentru a aduce modularitate atât în ​​proiectare, cât și în dezvoltare ar trebui să vă ajute să creați un sistem UI coeziv care să atingă acest obiectiv.