Accordion – Element UI

Ce este un Accordion UI?

Un acordeon este un element UI (user interface) care consta intr-o lista de componente aranjate vertical, ce pot fi extinse sau restranse. Atunci cand acest element este activat in UI UX design printr-o interactiune, acest accordion element permite utilizatorilor sa afiseze sau sa ascunda continutul asociat, in functie de preferinte.

‍

Tipuri de Accordion:

UI UX designers pot folosi mai multe tipuri de accordions in design-ul lor:

1. Single Accordion

Acesta este cel mai simplu tip de acordeon, constand intr-un singur panou care poate fi extins sau restrans. Este folosit de obicei pentru a afisa informatii suplimentare sub forma "Aflati mai multe".

2. Stacked Accordion

Acordioanele stivuite sunt o colectie de mai multe acordeoane individuale aranjate impreuna. Fiecare accordion component functioneaza independent, permitand utilizatorilor sa aleaga ce acordeon sa deschida. Acordioanele stivuite dezvaluie doar panourile selectate, nu toate deodata.

3. Hierarchical Accordion  

Pentru a fi creat de UI UX designers, acest tip de accordion este format din stacked accordions care contin si subpanouri. Utilizatorii pot extinde sau restrange atat panourile principale, cat si subpanourile. Acestea elemente din UI component library sunt folosite pentru afisarea informatiilor structurate pe mai multe niveluri, cum ar fi categoriile si subcategoriile.

4. Meniu Accordion

Meniurile tip accordion component sunt des intalnite in UI UX design in navigarea pe site-uri web. Acestea sunt folosite UI UX designers pentru a afisa o lista de categorii sau elemente de meniu, iar atunci cand se face clic sau se atinge un element, acesta se extinde pentru a dezvalui subelemente sau continut conex.

‍

Anatomia unui Accordion UI Element

‍

• Header

Header-ul unui accordion component servesc drept titluri sau etichete pe care utilizatorii pot da click si cu care interactioneaza pentru a extinde sau a restrange sectiunile acordeonului. Aceste header-uri sunt fraze scurte care descriu continutul sectiunii corespunzatoare, oferindu-le utilizatorilor o idee despre ce vor gasi cand fac clic pe ele.

• Icons

Iconitele unui accordion indica natura sectiunilor acestui element UI. Ele au rolul de a oferii indicii vizuale care ii indeamna pe utilizatori sa faca click pe header pentru a dezvalui sau a ascunde continutul asociat. Acestea sunt plasate de obicei in partea dreapta sau stanga a header-urilor si sunt orientate intr-un mod care se aliniaza cu directia de expansiune.

Tocmai de aceea, putem utiliza urmatoarele seturi de iconite pentru a crea un accordion element: Chevron, sageata sus/jos, caret sus/jos, plus/minus.

• Panels

Panels UI element se refera la zonele de continut din cadrul unui accordeon care se extinde si se restrange atunci cand utilizatorii interactioneaza cu header-urile si dau click pe iconite. Acestea reprezinta informatiile ascunse sau continutul care este dezvaluit sub header.

Aceste componente pot contine diverse tipuri de continut - cum ar fi text, imagini, formulare sau elemente multimedia incorporate. Continutul din cadrul panourilor ofera informatii suplimentare sau optiuni legate de header, ajutand utilizatorii sa acceseze detaliile relevante fara a aglomera interfata.

‍

Starile unui Accordion:

Starile implicite ale unui accordeon sunt:

• 🔽 Restrans
• 🔼 Extins
• 🖱️ Pe hover
• 🔍 Concentrat
• 🚫 Dezactivat

‍

Cand se folosesc Accordions UI:

• Continut lung

Folositi acordeoane pe site-urile cu mult continut, unde informatiile este lungi si extinse, dar nu este esential pentru toti utilizatorii. De exemplu, paginile FAQ folosesc acest accordions element care le permite utilizatorilor sa parcurga lista de intrebari si sa le aleaga pe cele care ii intereseaza cel mai mult.

• Spatiu limitat

Un accordeon este deseori utilizat de un designer UI UX pe dispozitivele mobile datorita spatiului limitat disponibil. Acestea ofera o imagine de ansamblu a continutului, in loc sa le faca sa defileze la nesfarsit.

• Informatii pas cu pas

Utilizati aceste accordion UI components atunci cand prezentati informatii secvential pentru a imparti fiecare pas in parte. Aceasta metoda este utila pentru un designer UI UX in crearea de procese de integrare si onboarding, completarea formularelor etc.

• Filtre si sortare

In dezvoltarea unui design UI UX, aceste elemente de design sunt utilizate pentru filtrarea informatiilor, permitand utilizatorilor sa extinda doar sectiunile dorite fara a trece prin toate celelalte filtre. Acestea sunt componente structurale care faciliteaza accesul la continut specific, eliminand necesitatea de a interactiona cu filtre inutile, ceea ce imbunatateste experienta utilizatorului.

‍

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 Accordions in UI UX 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.