Badges – Element UI

Ce sunt UI Badge Elements?

Badges sunt elemente de UI design care reprezinta valori mici suprapuse sau alte elemente vizuale afisate pe alte componente ale interfetei - cum ar fi avatare, butoane, pictograme etc.

Insignele sunt utilizate ca indicatori pentru a ilustra detaliile asociate cu alte elemente. Acestea sunt utilizate de obicei impreuna cu alte componente, cum ar fi avatare, butoane etc., mai degraba decat ca elemente de sine statatoare. Acestea constau in text scurt (de obicei numere), culori sau pictograme si sunt plasate langa componenta relevanta. Insignele arata notificari, evenimente sau starea unei actiuni.

‍

Tipuri de UI Badge Elements

1. Numeric Badge UI

Acest tip de badge UI afiseaza o valoare numerica pentru a indica numarul sau cantitatea legata de actiunea asociata. Acestea sunt sub forma de numar intr-un cerc mic, utilizate pentru a arata numarul de notificari, mesaje sau actualizari.

2. Text Badge UI 

Text badges sunt fraze scurte sau cuvinte folosite pentru a indica starea unei actiuni, eticheta sau statusul continutului sau pentru a organiza un element. Un UI badge design este sub forma de etichete sau nume asociate continutului.

3. Icon Badge UI 

Acest tip de badge UI component includ iconite sau simboluri grafice care ilustreaza starea elementului asociat. Acestea pot fi folosite in actualizari sau alerte, marcarea ca favorit, indicatori de stare, urmarirea progresului, gamificare, servicii de localizare, etc. Dar asigura-te ca iconitele repesective iau forma contextului in care sunt folosite in UI design.

4. Status Badge UI

Dot-only Badges sau Status Badge UI sunt puncte mici sau cercuri colorate fara valoare numerica, text sau alte iconite. Acestea sunt folosite ca indicatori vizuali pentru a atrage atentia utilizatorului asupra unui element fara a furniza informatii suplimentare, cum ar fi statusul utilizatorului in chat UI component library.

‍

Cum se Utilizeaza UI Badge Elements

• Comportament:

in utilizarea UI badge component, este important sa utilizam cuvinte simple ("Nou!"), fraze scurte ("De Platit"), valori numerice ("3" sau "99+", daca numarul este prea mare), si iconite universal recunoscute ("+"). UI Badge design ar trebui sa descrie intotdeauna clar si intuitiv starea unui obiect astfel incat utilizatorii sa inteleaga corect interfata de utilizator.

Pro Tip: Cu text badge UI, scrieti intotdeauna label-ul ca verb la trecut - "de platit", nu "plateste".

• Pozitionare:

Este important sa ne aducem aminte ca UI badge design nu sunt folosite ca elemente de sine statatoare sau independente. Acestea ar trebui sa fie plasate deasupra sau langa elementul pe care il reprezinta, astfel incat utilizatorii sa poata conecta status badge UI cu contextul sau, de exemplu in cazul de button with badge ui design. De asemenea, ele ar trebui sa fie vizibile, dar sa nu se suprapuna cu alte elemente sau sa provoace coliziuni vizuale.

• Culori

Culoarea unui new badge UI trebuie sa descrie in mod clar atentia specifica pe care trebuie sa o acorde un utilizator. De exemplu, utilizeaza culori de avertizare sau pericol daca ecusonul sugereaza o alerta care trebuie rezolvata imediat. De asemenea, foloseste modele de culori universal recunoscute, astfel incat utilizatorii sa poata recunoaste rapid nivelul de importanta al unui element.

• Dimensiune:

Mentine consecventa dimensiunilor unor badge UI component in intreaga interfata utilizator. De exemplu, evita utilizarea unor status badge UI design de dimensiuni diferite in aceeasi situatie.

‍

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 UI UX Design Badge. 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.