Nav Bar – Element UI

Ce este un Nav Bar UI?

Bottom navbars (barele de navigare de jos) sunt elemente de UI design care reprezinta arhitectura structurala pentru toate aplicatiile mobile. Acestea afiseaza controalele de navigare in aplicatie si sunt reprezentate de un rand responsiv plasat in partea de jos a ecranului.

Bottom navbars au rolul de navigare in user interface al unei aplicatii mobile datorita amplasarii lor convenabile si naturale. Fiecare destinatie este indicata de un icon relevant, impreuna cu un text optional. Cand un utilizator apasa pe un UI element de navigare, actiunea este imediat declansata, iar pagina se schimba, lasand celelalte pagini inactive.

‍

Tipuri de Navbars

1. Navbars Statice

Navbars statice raman fixe in partea de jos a ecranului. Ele isi mentin pozitia constanta – indiferent daca utilizatorii comuta intre tab-uri sau sectiuni sau chiar deruleaza.

2. Navbars Dinamice

Navbars dinamice sunt, de asemenea, in partea de jos a ecranului, dar se ascund atunci cand utilizatorii deruleaza sau comuta intre elementele de navigare.

‍

Cand se folosesc Bottom Navbars UI?

Bottom navbars ar trebui folosite in UI Design in urmatoarele cazuri:

• Atunci cand este necesar sa se ofere acces la o gama de trei pana la cinci pagini de destinatie.
• Pentru destinatii de nivel superior care trebuie accesate de oriunde din aplicatie (de exemplu, Home, Account, si asa mai departe).
• Pe ecrane mai mici – cum ar fi ecranele de mobil sau tableta.
• Nu este indicat sa fie folosite in UI design pentru destinatii unice.
• Nu le folosi daca actiunile principale ale destinatiilor se vor schimba pe intreaga platforma.
• Este important ca UI UX designers sa nu creeze bottom navbars derulabile. Ele trebuie sa fie statice.

Cele mai bune practici pentru Navbars

• Comportament

Cand un utilizator selecteaza un alt element din navbar-ul de jos (diferit de elementul initial), aplicatia ar trebui sa navigheze imediat la pagina de destinatie pe care a declansat-o noul element. Acest lucru se face printr-un model de tranzitie si lasa celelalte pagini inactive.

Daca utilizatorul selecteaza acelasi element din navbar-ul de jos pe care se afla in prezent, aplicatia ar putea reveni la locul initial al ecranului (de obicei partea de sus). Dar ar putea, de asemenea, sa lase elementul complet inactiv, iar actiunea nu declanseaza nimic pe pagina, lasand ecranul asa cum este.

• Anatomie

Un NavBar UI element contine urmatoarele UI components:

1. Container pentru Navbar
2. Icons Relevante
3. Text (optional)
4. Indicator pentru Stare – Activ/Inactiv
5. Badge de Notificare Mare (optional)
6. Badge de Notificare Mic (optional)

‍

• Icons

Bottom navbars ar trebui sa includa intotdeauna in UI design un icon relevant pentru pagina de destinatie. Este recomandat ca UI UX designers sa foloseasca icons si simboluri recunoscute universal, astfel incat destinatia si actiunile din cadrul acesteia sa fie clare pentru fiecare utilizator. Asociaza aceste icons cu un text clar si scurt care reprezinta destinatia si ce ar putea astepta utilizatorii. Acest lucru este util in UI design daca acel icon nu este suficient de intuitiv sau evident pentru utilizatori.

• Stare

Un navbar UI element are doua stari: activ si inactiv.

Acest UI element devine activ atunci cand un utilizator apasa pe componenta UI de navigare. Starea activa reprezinta faptul ca utilizatorul se afla in prezent pe pagina de destinatie pe care a declansat-o elementul. Pentru a indica vizual starea unui element dintr-un navbar, icon-ul trebuie  fie evidentiata – asa ca este indicat ca UI UX designers sa schimbe culoarea acestuia sau contururile sale devin umplute.

Starea inactiva a unui UI component din navbar-ul de jos indica faptul ca utilizatorii nu au interactionat cu elementele respective. Acestea sunt estompate sau gri pentru a sugera vizual ca aceste optiuni nu sunt utilizate in prezent.

‍

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

‍