Bottom Sheet – Element UI

Ce este Bottom Sheet UI Design?

Un bottom sheet UI este un overlay plasat in partea de jos a ecranului, care contine informatii suplimentare, detalii sau actiuni. Bottom sheets sunt folosite pentru a mentine o experienta focalizata pe vizualizarea principala, fiind ancorate in partea de jos a ecranului.

Bottom sheet design UI components sunt elemente versatile care pot afisa o gama larga de informatii si layout-uri, cum ar fi elemente de meniu, pot declansa actiuni, dar si continut suplimentar.

‍

Tipuri de Bottom Sheet UI Design

1. Standard Bottom Sheets

Standard Bottom sheets co-exista cu vizualizarea principala a ecranului. Acest element ofera utilizatorului posibilitatea de a interactiona simultan cu ambele ecrane. Tocmai de aceea, standard bottom sheets sunt folosite pentru a mentine o functie secundara disponibila pe ecran, in timp ce utilizatorii interactioneaza cu designul principal.

2. Modal Bottom Sheets

Modal bottom sheets apar peste continutul unui ecran sau sectiune a unei aplicatii, dezactivand functiile acesteia pana cand bottom sheet-ul este inchis. In UI design, utilizatorii pot interactiona cu aceste modal bottom sheets – fie sa faca o actiune din continutul acestuia sau chiar si sa-l inchida. Tocmai de aceea, comportamentul unui bottom sheet design UI este potrivit pentru un meniu, oferind utilizatorilor posibilitatea de a se concentra numai pe optiunile disponibile si nu altceva din ecran.

‍

Cand sa folosesti Bottom Sheets UI Design

• Comportament

Putem folosi bottom sheets cand dorim sa prezentam informatii suplimentare sau actiuni simple. Un bottom sheet permite utilizatorilor sa vada in mod constant vizualizarea principala, ajutandu-i sa interactioneze in timp ce contextul original ramane disponibil.

• Interactiune

Standard Bottom Sheets: Acestea raman pe ecran in timp ce utilizatorul interactioneaza cu designul principal, permitand derularea prin continutul principal. Trebuie sa includa o icoana de colapsare atunci cand atentia utilizatorului se muta pe bottom sheet.

Modal Bottom Sheets: Acestea trebuie sa fie interactionate sau inchise pentru a recastiga accesul la designul principal. Acest tip de bottom sheet design UI ar trebui folosit atunci cand sunt oferite multiple optiuni si actiuni, ajutand utilizatorul sa se concentreze mai usor pe sarcini. Modal bottom sheets pot fi de asemenea utilizate pentru a prezenta actiuni suplimentare. Ele apar atunci cand utilizatorul declanseaza o actiune si trebuie sa fi inchise ulterior..

‍

Cum se folosesc un Bottom Sheet UI Design

• Creaza bottom sheet design UI in asa fel incat sa fie compacte si de dimensiuni medii.
• Continutul disponibil pe un bottom sheet UI trebuie sa fie secundar, nu sa contina informatia principala.
• Utilizatorul trebuie sa aiba posibilitatea de a inchide un bottom sheet UI pentru a interactiona mai bine cu continutul principal.
• Pentru a oferi acces la interactiunile principale, starea initiala a unui modal bottom sheet trebuie sa fie limitata la 50% din inaltimea ecranului.

‍

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 Bottom Sheets. 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.

‍