Avatare – Element UI

Ce este un Avatar in UI Design?

Avatarele sunt elemente de UI design care reprezinta o miniatura (un thumbnail) a identitatii unui utilizator – fie persoana sau a unui business. Acestea pot ilustra iconite, imagini sau chiar si text, si poate fi utilizat in orice mediu online, cum ar fi platforme de social media, conturi de utilizator, si asa mai departe. 

UI avatars au devenit extrem de populare deoarece ofera o modalitate rapida de personalizare a experientei utilizatorilor prin crearea unei identitati vizuale pentru acestia in platforma digitala. Ele sunt de obicei folosite alaturi de alte elemente dintr-un UI component library precum meniuri sau chats, in loc sa fie utilizate ca elemente independente si de sine statatoare.

‍

Tipuri de UI Avatars

In UI UX design, pot fi folosite mai multe tipuri de avatar url pentru a imbunatati intreaga experienta a utilizatorului si a face interfata sa fie mai intuitiva:

1. Avatare cu Imagine

Avatarele de imagine reprezinta de obicei fotografia de profil a unui utilizator. Acestea afiseaza imagini - fie ca este vorba de o poza cu ei insisi, cu animalele de companie sau altceva - in loc de un icon sau litere. Aceste ui avatars sunt folosite in aplicatii de mesagerie, platforme de socializare si profiluri de utilizatori pentru a-i ajuta sa se identifice reciproc.

2. Avatare cu Iconite

Acest tip de avatar url sunt ilustrate prin reprezentari grafice - iconite, simboluri, emoji-uri sau alte grafice - pentru a reprezenta un utilizator fara a dezvalui identitatea lor personala. UI UX designers pot crea avarar ui elements care pot avea culori personalizate pentru fundal. De exemplu, un utilizator ar putea alege un avatar care sa reprezinte interesele lor, cum ar fi o iconita de aparat foto, daca sunt pasionati de fotografie si culoarea albastra pentru ca asta este culoarea lor preferata.

3. Avatare cu Text

Avatarele de text sau litere constau in initialele utilizatorului sau o singura litera. Acestea sunt generate automat pe baza informatiilor utilizatorului sau alese de utilizator insusi. De asemenea, si acest tip de avatar url poate avea culori personalizate pentru fundal, ca si la avatarele cu iconite.

4. Avatare Stivuite

Acest tip de avatare se folosesc atunci cand trebuie sa grupam utilizatori din aceeasi categorie si sa-i afisati ca o stiva. In UI design, acestea se pot folosi in chat UI component library, in panouri de administrare, sau cand dorim sa economisim spatiu pentru o claritate vizuala mai buna atunci cand sunt implicati mai multi utilizatori.

5. Total Avatar UI Elements

Acest tip de UI avatar elements sunt folosite atunci cand UI UX designers vor sa controleze numarul total de avatare care nu sunt afisate. 

‍

Cum sa Utilizam Avatar UI Elements

Avatarul poate fi utilizat alaturi de elemente suplimentare pentru:

• A arata statusul utilizatorului

Avatar UI elements pot fi utilizate pentru a indica cand un utilizator este online sau offline. Cea mai comuna modalitate de a afisa starea unui utilizator este adaugarea unui indicator rotund in coltul din dreapta jos al avatarului. In UI design, este indicat sa folosim culoarea verde atunci cand utilizatorul este online si culoarea gri sau forma goala atunci cand este offline.

• Story

Acest tip de UI avatar elements indica daca un utilizator a incarcat un story pe profilul lor de social media. In UI design, cel mai comun mod de a arata acest lucru este prin adaugarea unei sectiuni suplimentare de contur in jurul starii implicite a avatarului.

• Call to Action

Un avatar component poate fi folosit pentru a incuraja o anumita actiune. Utilizati butoane rotunjite cu iconite vizuale intuitive care sugereaza ce ar trebui sa faca sau sa astepte utilizatorul de la actiunea specifica. De exemplu, include un buton "Follow" cu simbolul "+" pentru a incuraja utilizatorii sa se conecteze mai usor cu altii.

‍

Dimensiuni UI Avatars si Cand Sa le Folosim

Ca si UI UX designer, se recomanda utilizarea avatarelor in una dintre urmatoarele dimensiuni:

• Extra Mic (24x24px): Ar trebui utilizate in UI design cu spatiu limitat. De exemplu, in barele de aplicatii mobile, headers etc.
• Mic (32x32px): Ar trebui utilizate in UI design unde avatarul url are o importanta redusa sau dimensiunea medie este prea mare. De exemplu, in liste, chatbots etc.
• Mediu (40x40px): Aceasta este dimensiunea implicita pentru avatare in majoritatea cazurilor.
• Mare: (60x60px): Ar trebui utilizate in UI design unde avatarul url este elementul principal. De exemplu, in profiluri, setari etc.

‍

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 UI UX design Avatar 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.