Productive XD Prototyping – Un tutorial pentru componentele Adobe XD

Sistemul de componente Adobe XD oferă designerilor funcții puternice pentru a crea prototipuri de produse digitale. Cu toate acestea, nu este lipsită de ciudatenii și are nevoie de îngrijire specială. Utilizarea comenzilor rapide inteligente și respectarea celor mai bune practici le va permite designerilor să-și eficientizeze fluxurile de lucru de prototipare XD.

De la lansarea sa publică oficială la sfârșitul anului 2017, Adobe XD a făcut pași mari spre a deveni un instrument de wireframing și prototipare extrem de competitiv pentru designerii UX. În special, noul său sistem de componente extinde tipul de interacțiuni cu care designerii pot experimenta. Cu toate acestea, componentele nu sunt lipsite de ciudatenii și dezavantaje. Când lucrați cu componente XD, este util să adoptați un set de practici de flux de lucru pentru a evita munca ocupată și pentru a valorifica întregul potențial al sistemului.

Ce sunt componentele Adobe XD?

Componentele XD sunt grupări reutilizabile de elemente, cum ar fi text, forme sau linii. O componentă are o „Componentă principală” care servește ca părinte și „instanțe” sau copii care sunt plasate pe tabloul de desen. Când schimbați Componenta principală, modificările se propagă la toate instanțele acesteia.

Înlocuind sistemul anterior de „simbol” al lui XD, care a servit unui scop similar, componentele oferă un diferențiere cheie . Ele pot avea mai multe stări care răspund la diferite intrări definite în Modul Prototip al lui XD. De exemplu, un buton poate avea o stare implicită, dar își poate schimba aspectul atunci când se află într-o stare de trecere cu mouse-ul sau când se face clic. Poate reda un sunet atunci când se dă clic sau chiar își poate schimba aspectul în funcție de intrările de la recunoașterea vorbirii.

Sistemul de componente economisește timp, dar necesită îngrijire specială. O abordare atentă și un flux de lucru pregătit cu atenție sunt necesare pentru a valorifica puterea sistemului.

Familiarizarea cu Adobe XD este recomandată

Designerii cu un grad destul de familiarizat cu Adobe XD vor beneficia cel mai mult de următoarele sfaturi și sugestii. Pentru a avea un avans, descărcați Adobe XD Design Kit de pe pagina de pornire Google Material Design. Kitul va oferi un set de componente Adobe XD pentru a experimenta și a deconstrui.

Sfatul #1 – Luați în considerare toate statele înainte de a crea o componentă

Când creează o componentă cu stări pentru prima dată, proiectanții ar trebui să înțeleagă modul în care modificările potențiale ale unei componente pot afecta alte instanțe. Pentru a ilustra, să luăm în considerare un meniu drop-down cu mai multe stări:

• Starea implicită : meniul este restrâns
• O stare de trecere cu mouse -ul: culoarea conturului se poate schimba atunci când cursorul este peste ea
• O stare extinsă, făcând clic : sunt afișate opțiunile meniului derulant

Când editați starea implicită a unei instanțe secundare a unui meniu derulant, acele modificări nu se vor propaga la stările de trecere cu mouse-ul sau de clic . Trebuie făcute modificări la starea implicită din Componenta principală pentru a actualiza stările de trecere cu mouse-ul sau de clic ale tuturor instanțelor.

Deși poate fi tentant să intri și să începi să iterați pe componentele principale , uneori apar probleme neașteptate din cauza diferențelor în modul în care se comportă componentele părinte și secundare.

O bună practică este să luați în considerare și să anticipați tot ceea ce este necesar în starea implicită a componentei principale înainte de a adăuga alte stări sau de a instanția componenta - chiar și până la aranjarea diferitelor stări una lângă alta.

De asemenea, proiectanții ar trebui să țină cont de faptul că pot adăuga și modifica elemente în stări non-implicite ale componentei principale sau ale instanțelor copil fără a afecta starea implicită, dar inversul nu este adevărat.

O recomandare pentru Adobe : Oferiți stărilor componentelor o funcție de blocare, astfel încât designerii să poată păstra intacte stările care nu sunt implicite și să împiedice propagarea modificărilor la starea implicită a componentei principale.

Sfat #2 – Denumiți componentele la creare

Crearea unei componente (faceți clic dreapta pe un element, apoi selectați „Creați componentă” în meniu sau apăsați Cmd-K pe Mac/Ctrl-K pe PC) adaugă componenta la panoul Active din bara laterală din stânga. XD va da componentei un nume implicit de „Component XX” (unde „XX” este un număr). Nu este foarte descriptiv, așa că cel mai bine ar fi să îi dați un nume unic, care poate fi căutat.

De ce să o faci? Pe măsură ce lista de componente se umple, va deveni greoaie dacă toate componentele încep cu același nume implicit și un număr lipsit de sens. Deși opțiunea „vizualizare tile” ajută, nu are etichete de text, ceea ce face identificarea vizuală lentă și provocatoare. „Vizualizarea listă” cu miniaturi mici îngreunează, de asemenea, identificarea diferențelor între componentele cu nume indescifrabile. Componentele se pot pierde și se vor pierde. Făcându-le căutabile prin denumirea lor va economisi timp mai târziu.

O recomandare pentru Adobe : Când creați o componentă, selectați-o automat și focalizați utilizatorul pe panoul Active->Componente pentru a o redenumi sau pentru a afișa o fereastră pop-up de denumire. De asemenea, ar fi util să faceți posibilă comutarea acestei funcții în Preferințe.

Sfatul #3 - Păstrați componentele principale organizate

Când creați o componentă, este ușor să plasați componenta principală pe o panou de desen din întâmplare. În timp ce XD oferă instrumente pentru a găsi Componentele principale (fie căutând în panoul Active sau făcând clic dreapta și selectând „Editați componenta principală” dintr-o instanță secundară), este prea ușor să faceți modificări neintenționate în Componenta principală, crezând că este o instanță. Acest lucru poate duce la multe modificări nedorite în mai multe tablouri de artă.

Chiar dacă există doar o mână de instanțe componente pe o planșă de lucru, lucrurile pot scăpa rapid de sub control odată ce o planșă de grafică este clonată. O modificare accidentală a componentei principale poate crește timpul de curățare care ar fi putut fi evitat.

Cel mai bine este să vă obișnuiți să mutați componentele principale de pe planurile de design imediat după creare . O modalitate ideală de a face acest lucru ar fi să plasați componentele principale pe placa de bază în fișierul XD sau pe table de artă dedicate clar etichetate. Procedând astfel, lucrurile vor fi mai eficiente mai târziu.

O recomandare pentru Adobe : luați în considerare o solicitare atunci când faceți modificări la Componenta principală, astfel încât designerii să fie avertizați că modificările se pot propaga la instanțe copil.

Sfatul #4 – Rămâneți organizat cu panoul Straturi

Este ușor să încerci idei pe planșa de lucru și să intri în fluxul de grupare/degrupare a componentelor și modificarea proprietăților stărilor componentelor. Ar putea exista o tentație puternică de a minimiza bara laterală din stânga pentru a avea mai mult spațiu de lucru. Cu toate acestea, există șanse mari ca stările și tranzițiile componentelor să nu se comporte așa cum era de așteptat în rafala de iterație. Acest lucru se poate întâmpla deoarece organizarea și gruparea subelementelor (cum ar fi forme, vectori sau text) s-au îndepărtat de ceea ce trebuiau să fie pentru ca tranzițiile să funcționeze corect.

Vizualizarea Strat oferă 100% transparență în ierarhia și denumirea elementelor, iar organizarea sa etanșă este vitală. Utilizarea tranziției puternice Auto-Animate a XD între stări necesită ca elementele să aibă același nume și același loc în ierarhia stratului unei componente. În caz contrar, tranziția va fi implicit la o estompare în loc de o animație automată atrăgătoare.

Uneori, poate fi de dorit să suprimați o proprietate din interpolare atunci când tranzițiile de animare automată. Pentru a realiza acest lucru, designerii pot redenumi un element într-o stare diferită a componentei sau într-o planșă de desen pentru a rupe legătura bazată pe nume.

În ambele cazuri, vizualizarea Straturi poate fi utilizată pentru a depana atunci când apar probleme neașteptate . Ar trebui să fie primul pas atunci când depanați problemele de prototipare, fie că este vorba de o tranziție între stările componente sau între tablouri de artă.

Sfatul #5 – Utilizați Alpha Fading pentru a interpola culorile

Auto-Animate este o completare excelentă pentru XD, dar vine cu limitări și idiosincrazii. Una dintre aceste ciudatenii devine evidentă atunci când se schimbă culoarea unui element între două stări ale componentelor sau panouri de artă utilizând Auto-Animate. În loc de o interpolare lină între cele două culori, se schimbă brusc atunci când este testată.

Soluția actuală este puțin incomodă și are ramificații asupra modului în care ar trebui să fie organizate stările componentei principale. Aceasta implică adăugarea a două obiecte cu culori diferite în loc de una și apoi încrucișarea alfa pe cele două obiecte în ambele stări pentru a obține o tranziție lină. Tranziția implicită de estompare poate funcționa, dar dacă interpolați forme și dimensiuni cu Auto-Animate, este posibil ca o estompare să nu fie suficientă.

Sfat # 6 - Componentele de pârghie într-o grilă de repetare

Repeat Grid este o altă caracteristică excelentă de economisire a timpului în XD , care facilitează organizarea și întreținerea matricelor de elemente similare. Ca și componentele, Repeat Grids au o relație ierarhică în care primul element din colțul din stânga sus al grilei este „părintele” care definește proprietățile elementelor „copil”. (Există excepții de la aceasta: bitmaps-urile pot fi unice pentru un element copil, la fel ca șirurile de text, dar nu și proprietățile textului.)

Cu toate acestea, atunci când utilizați componente în Repeat Grids, lucrurile se schimbă.

Când lucrați cu Repeat Grids în mod normal, modificările aduse părintelui se propagă imediat copiilor săi. Cu toate acestea, modificările componentei principale se propagă copiilor dintr-o grilă de repetare numai dacă nu există suprascrieri ale proprietăților locale . Cu alte cuvinte, modificarea proprietății unei componente în grilă o „blochează” împotriva modificărilor care se propagă din Componenta principală.

Pentru a propaga modificările de la un părinte care este, de asemenea, o componentă a unei grile de repetare, redimensionați grila până la părinte. Aceasta îi îndepărtează copiii. Apoi, trageți mânerele înapoi la dimensiunile dorite pentru a actualiza copiii.

Odată ce designerii pot rezolva particularitățile componentelor și Repeat Grids, combinarea acestora poate fi puternică.

Sfat #7 - Presupuneți că tranzițiile de stare ale componentelor bazate pe timp nu există (deocamdată)

Când aplicați tranziții între planșele de artă folosind întârzieri bazate pe timp (nu bazate pe intrare), este firesc să presupunem că același lucru este disponibil între stările componente. Din păcate, nu este cazul. Toate schimbările de stare bazate pe componente trebuie să se bazeze pe intrarea utilizatorului sau pe interacțiunile în modul prototip, nu pe timp.

O recomandare pentru Adobe: adăugați o opțiune de tranziție bazată pe timp la componente, astfel încât stările acestora să se poată anima independent de intrarea utilizatorului.

Sfat #8 – Fii atent când clonezi ierarhiile componentelor principale

Acest ultim sfat este mai mult un caz marginal pe care designerii XD nu îl întâlnesc des, dar ar trebui să fie conștienți de .

Să presupunem un scenariu în care Componenta principală are nevoie de o variație care păstrează în continuare calitatea „unu-la-mulți” a proprietăților copiilor care moștenesc, dar nu afectează nicio componentă copil existentă. Pentru a crea o nouă ierarhie de componente părinte, o componentă cu instanță trebuie să fie degrupată și reconstruită de la zero. Degruparea componentelor va pierde, de asemenea, toate stările și proprietățile de tranziție configurate în modul Prototip. Iată o soluție:

• Clonează o instanță a componentei pentru fiecare stare din componentă.
• Setați starea fiecărei instanțe la o stare diferită.
• Parcurgeți și degrupați fiecare instanță de componentă.
• Începeți să faceți ajustările și modificările dorite pentru fiecare instanță de componentă.
• Recreează noua componentă principală.
• Intrați în modul prototip și recreați interacțiunile și tipurile de tranziție care au fost configurate înainte.

O recomandare pentru Adobe: când faceți clic dreapta pe Componenta principală din panoul Active, furnizați o opțiune de meniu „duplicare”.

Crearea de prototipuri cu componentele Adobe XD: concluzii pentru succes

Adobe XD a adus îmbunătățiri semnificative în funcționalitate și utilitate în ultimii câțiva ani. A devenit o alternativă demnă și competitivă la Sketch și alte instrumente de prototipare consacrate. Pe baza modului în care a evoluat instrumentul de la debut, sunt probabil multe îmbunătățiri pe drum.

În special, sistemul de componente Adobe XD are un potențial excelent de a îmbunătăți și extinde tipurile de interacțiuni pe care designerii le pot crea.

Iată câteva aspecte cheie de reținut:

• Înțelegeți cum se propagă modificările între Componentele principale și instanțele copil.
• Fiți conștienți de modul în care componentele interacționează cu celelalte caracteristici ale Adobe XD, cum ar fi Auto-Animate și Repeat Grid.
• Străduiți-vă să adoptați practici consecvente pentru fluxul de lucru pentru a economisi timp, cum ar fi denumirea componentelor și menținerea unei zone separate de tablă pentru Componenta principală în fișierul XD.

Fiind atent la idiosincraziile lucrului cu componentele Adobe XD, menținând în același timp un flux de lucru disciplinat, va maximiza productivitatea designului. Va evita curățarea și întreținerea inutile și va oferi designerilor XD un avantaj de eficiență atunci când prototipează produse digitale.

Spune-ne ce crezi! Vă rugăm să lăsați mai jos gândurile, comentariile și feedback-ul dvs.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• Adobe XD vs Sketch – Showdown 2020
• Proiectați cu precizie – O revizuire Adobe XD
• Explorarea designului multimodal – Un tutorial Adobe XD
• Mituri UX – prototipare, testare utilizator și produse UX
• Perfecționați-vă procesul de design UX – Un ghid pentru proiectarea prototipului