Buttons – Element UI

Ce sunt buttons UI?

Buttons in UI este unul dintre cele mai comune elemente de UI UX design care permit utilizatorilor sa efectueze o actiune si sa faca alegeri. Actiunile principale indicate de UI buttons sunt Salvare, Adaugare, Anulare si inchidere. Tocmai de aceea, buttons sunt utilizate in toate site-urile web si aplicatiile, iar designul lor ar trebui sa indice clar utilizatorului care va fi rezultatul daca alege sa apese pe el.

‍

Types of Buttons UI – Ce tipuri de Buttons UI sunt?

‍

1. Pe baza importantei:

Aceasta ierarhie se bazeaza pe importanta unor bootstrap buttons pe o pagina, aratand gradul de accent vizual pe care il necesita un buton:

• Primar
• Secundar
• Actiuni Tertiare

‍

2. Pe baza aspectului vizual

Pe baza aspectului lor vizual, exista 9 types of buttons UI pe care le putem intalni:

• Elevated Buttons - accent mediu
• Buttons UI Complete - accent mare
• Buttons Tonal Complete - accent mediu
• Buttons de tip Text - accent redus
• Buttons de tip Icon - accent redus
• Button Outlined - accent mediu
• Floating Action Buttons - accent ridicat
• Extended Floating Action Buttons - accent ridicat
• Button Segmentat - accent redus

‍

Cand sa folosesti butoane in designul UI/UX

• Elevated Buttons: Acest type of buttons UI au o culoare mai deschisa decat fundalul si au o umbra care le face sa iasa in evidenta. De obicei, sunt folosite pentru actiuni precum vizualizarea unei liste de articole, adaugarea articolelor in cos sau raspunderea la anumite mesaje sau actiuni.
• Buttons UI Complete: Butoanele complete sunt UI elements cu accent ridicat datorita culorii lor contrastante si izbitoare. Deoarece ies in evidenta atat de mult, sunt folosite pentru actiuni precum Salvare si Terminat.
• Buttons Tonal Complete: Aceste buttons UI sunt mai putin izbitoare decat butoanele complet. Au o culoare de fundal mai deschisa alaturi de o culoare mai inchisa pentru eticheta si sunt folosite pentru actiuni similare cu cele ale butoanelor complet.
• Buttons de tip Text: Butoanele text au un impact redus si ar trebui folosite pentru actiuni care nu au o prioritate ridicata. Actiunile comune in care sunt folosite aceste butoane sunt Afla mai multe si Vezi tot.
• Buttons de tip Icon: Butoanele cu iconite sunt mici si subtile, facandu-le potrivite pentru actiuni care nu sunt urgente, cum ar fi Imprimare si Adaugare la Favorite.
• Button Outlined: Aceste butoane au aceeasi culoare ca fundalul, dar vin cu un outline (contur), ceea ce le face potrivite pentru actiuni secundare, cum ar fi Vezi tot.
• Floating Action Buttons: Cunoscute si sub numele de FABs, ele sunt UI components implicite pentru actiunea principala a unui ecran. Acestea sunt usor de observat si sunt de obicei implementate pentru actiuni precum Creare si Compozitie.
• Extended Floating Action Buttons: Acestea sunt similare cu FABs, dar de obicei adaugam aceste butoane la paginile mai mari, deoarece sunt potrivite pentru ecrane mai mari.
• Button Segmentat: Aceste bootstrap buttons prezinta diferite optiuni pe care utilizatorul le poate alege si sunt considerate a fi actiuni tertiare.

‍

Cum se folosesc butoanele in designul UI

• Structura: UI buttons primare ar trebui sa fie usor de distins de restul si sa nu fie folosite in exces. in cazurile in care este nevoie de mai mult de un button sau folosite mai multe types of buttons UI, ar trebui folosite culori, contururi si transparente diferite pentru a le diferentia.
• Text: Label-ul pentru UI buttons este crucial pentru butoane deoarece ajuta utilizatorii sa inteleaga rapid scopul lor. Tocmai de aceea, limbajul ar trebui sa fie accesibil si direct.
• Modele comune: Un site web sau o aplicatie ar trebui sa fie consistenta cu butoanele lor - daca o actiune care indica completarea utilizatorului este etichetata cu Terminat, atunci fiecare actiune similara ar trebui sa fie etichetata la fel.
• Culori: Culorile au diferite semnificatii si pot influenta puternic modul in care utilizatorii interactioneaza cu butoanele. De exemplu, nu am folosi verde pentru un buton care este destinat sa arate o eroare.

‍

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 Buttons. 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.

‍