Drawer – Element UI

Ce este un Drawer in UI UX Design?

‍

Drawers sunt elemente de UI UX design care gliseaza din marginea ecranului pentru a dezvalui infromatii suplimentare. Drawers pot fi intalnite drept meniuri slide-in, unde utilizatorii pot accesa informatii suplimentare sau pot naviga diferite categorii din interfata UI UX a designului creat. Drawerele sunt elemente de UI design care pot fi deschise si inchise in functie de interactiunea utilizatorului.

Un meniu de tip drawer poate fi activat simplu prin glisare, alunecare sau atingere a elementului de design, pentru a vedea ce interactiuni sunt disponibile pentru navigare. Este utilizat in general in cazurile in care utilizatorii doresc sa efectueze o actiune fara a parasi pagina curenta.

Un meniu de tip sertar (drawer) poate fi intalnit in designul unei pagini web sau aplicatii, avand scopul de a organiza continutul si de a sustine un design UX/UI mai curat. Un meniu de navigare de tip sertar ofera posibilitatea de a activa mai multe actiuni de navigare, cum ar fi trecerea prin diferite categorii sau alegerea unei categorii pe blogul tau de stiri.

Navigarea laterala ofera, de asemenea, oportunitatea de a gestiona cu usurinta contul, deoarece poti avea acces usor si incorpora linkuri catre setarile generale, detaliile profilului, conturile utilizatorilor si diferitele sectiuni ale unei aplicatii. 

Cu un meniu de tip drawer, designul tau poate fi mai organizat si poate sustine un loc unde mai multe functii pot fi accesate cu o navigare mai rapida.Un meniu de tip drawer creeaza o experienta mai buna a utilizarilor datorita acesibilitatii oferite.

Tipuri de UI UX Drawers

1. Drawer Permanent

Asa cum sugereaza numele, permanent drawers sunt intotdeauna vizibile pe pagina. Sertarele de navigare permanente (permanent drawers) nu pot fi inchise si nu sunt optiuni viabile pentru UI UX designul unui ecran mic. Sunt cele mai potrivite pentru desktopuri deoarece ocupa un spatiu semnificativ pe ecran. 

Un sertar de navigare lateral permanent poate face viata utilizatorului mai usoara atunci cand vine vorba de functii complexe ale unei aplicatii sau categorii care trebuie sa fie intotdeauna afisate pe ecran pentru acces facil. Acest tip de navigare laterala este intalnit in aplicatii sau designuri web axate pe informatii si are scopul de a genera o experienta de utilizare impecabila.

2. Persistent Drawer

Al doilea tip de drawer lateral se restrange ca stare initaiala si poate fi deschis si inchis de utilizatori. Una dintre principalele sale caracteristici este ca, atunci cand este deschis, modifica restul continutului de pe pagina sa se ajusteze la dimensiunea sa. Un drawer persistent este memorat atunci cand se acceseaza un UI UX design in sesiuni multiple, ajustat la ecranul pe care este intalnit. 

Totusi, utilizarea unui drawer persistent intr-un design de aplicatie mobila nu este recomandata deoarece creeaza un design aglomerat, care poate fi responsabil pentru o experienta de utilizare neplacuta. Este potrivit pentru ecrane mai mari, unde un design curat poate fi mentinut.

3. Mini Variant Drawer

Mini Variant Drawer sunt similare cu persistent drawers deoarece nu sunt afisate permanent pe ecran. Totusi, diferenta dintre mini variant UI UX drawers este ca acest tip de drawers nu determina restul continutului sa se adapteze atunci cand sunt deschise. Acest lucru le face potrivite pentru ecrane mai mici. Un UI drawer de tip mini-variant extins are aceeasi interfata vizuala ca un sertar lateral persistent. UI drawer de tip mini-variant este creat pentru ecrane mai mici, deoarece ofera posibilitatea de a selecta si accesa rapid elementele dorite. Un drawer UX este intalnit de obicei in designul web sau de aplicatii pentru telefon.

4. Temporary Drawer

Aceste UI drawers sunt intalnite in designul aplicatiilor mobile, avand capacitatea de a se deschide si se inchide deasupra intregului continut disponibil pe pagina. UI UX temporary drawers au capacitatea de a se inchide si deschide prin comutare. Temporary drawers sunt de obicei intalnite cu o optiune de inchidere implicita. Cu un sertar temporar, fereastra se deschide pentru o perioada de timp si apare deasupra unei alte sectiuni de continut. Sertarul poate disparea atucni cand utilizatorii nu interactioneaza cu elementul UI. 

‍

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