Wireframes – Element UI

Ce este un Wireframe in designul UI/UX?

Wireframes sunt elemente UI care comunica vizual starea de incarcare a unui component, sectiune sau pagina. Ele sunt folosite pentru a oferi o reprezentare a modului in care arata interfata utilizatorului inainte ca continutul sa apara.

Wireframe-urile afiseaza structura unui element si o versiune in proces a interfetei utilizatorului. Ele nu arata continutul real. In schimb, aceasta versiune ofera doar o idee despre layout-ul componentei sau paginii pana cand devin accesibile prin prezentarea elementelor lor in timp ce se incarca.

Daca nu cunoasteti structura paginii sau daca elementul dvs. nu are un anumit layout, incercati sa folositi un indicator de incarcare sau o bara de progres in schimb.

‍

Cand sa utilizati elementul UI Wireframe?

Utilizati wireframeuri in designurile UI/UX atunci cand:

• O operatie necesita sa ruleze in fundal pentru mai mult de o secunda.
• Datele unei pagini sau sectiuni sunt in procesare pentru prima data si vor fi finalizate in curand.
• Elementele interfetei utilizatorului contin multe informatii. Acest lucru este valabil pentru liste sau carduri.
• Un element necesita un timp indelungat pentru procesare si incarcare.
• Daca doar un singur element trebuie sa se incarce, utilizati un indicator de incarcare (loading spinner) in loc.

Cum sa utilizati componenta UI Wireframe?

1. Stilul de Animatie

Wireframe-urile vin in doua stiluri de animatie - unda si puls.

Animatia implicita este de tip unda. Ofera o simulare realista a incarcarii si un efect de tranzitie neted de la starea de incarcare la continut. Cand exista mai multe wireframe-uri sau o intreaga pagina este in procesare, este recomandat sa ramaneti la acest tip de animatie pentru a nu coplesi utilizatorul.

‍

Animatiile de tip puls pot atrage mai mult atentia asupra elementelor individuale. Ele sunt folosite atunci cand doriti sa subliniati procesul de incarcare, cum ar fi blocuri de continut specifice sau imagini.

2. Variantele Wireframe

Componenta wireframe are patru variante de forma: text, circular, rectangular sau rotunjit.

• Varianta text este varianta implicita utilizata pentru a indica linii de text simple. Poate fi ajustata prin inaltime si latime prin atributul font-size.
• Varianta circulara afiseaza un placeholder in forma circulara pentru a incarca miniaturi, avatare sau alte pictograme si simboluri pe o platforma.
• Varianta rectangulara este placeholder-ul pentru paragrafe, mesaje in chat-uri, imagini si alte elemente dreptunghiulare.
• Varianta rotunjita arata placeholder rectangulare care au colturi rotunjite pentru o aparenta mai moale.

3. Continut

Utilizati doar wireframe-urile UI pentru a pregati utilizatorii pentru informatii noi si in curs de primire. Evitati sa le utilizati pentru elemente statice ale layout-ului pe care utilizatorii le-au vazut anterior - de exemplu, antetul sau bara de navigatie in cadrul unei platforme.

4. Layout

In cazul elementelor dinamice, utilizati wireframe-urile UI pentru a afisa doar informatii de nivel inalt. De exemplu - la incarcarea unui mesaj in previzualizarea chat-ului, scheletul ar trebui sa indice doar avatarul, numele persoanei care va trimite mesajul si previzualizarea mesajului.

Nu prezentati detalii suplimentare - cum ar fi indicatorul activ sau inactiv, chiar daca acestea exista in continutul final incarcat.

‍

Inscrie-te acum la Cursul de UI UX Design de la Traction Keys

Parcurge cursul nostru de UI/UX design pentru a invata totul despre user interface si user experience. La cursul de UI UX design de la Traction Keys vei invata cum se creaza un sistem de design, cat si cum se creeaza un wireframes UI design. Stapanirea tuturor elementelor cat si a practicilor de design UI UX te vor ajuta sa devii un designer UI UX complet si iti va asigura urmatorul tau job si viitoarea cariera.