Il dropdown e l’accordion sono 2 componenti che ci permettono di selezionare o visualizzare un valore o un contenuto da una lista.
Sono molto usati nelle interfacce web e mobile perché consentono di racchiudere un contenuto testuale più o meno lungo e di renderlo visibile solo se siamo interessati.
Come sappiamo se quel contenuto ci interessa o meno?
Guardiamo l’anatomia del componente.
Il dropdown e l’accordion sono costituiti da 2 elementi:
Li chiamerò “Header” e “Content“.
L’Header contiene 2 elementi:
1. Il titolo di quel contenuto (per esempio nella sezione FAQ di un sito troveremo una domanda comune)
2. Un’icona che funge da affordance per quel componente.
Troveremo quindi uno chevron o un “+” che indicano all’utente che quell’elemento si può aprire.
Nel momento in cui il dropdown si apre lo chevron ruota di 180 gradi ed il “+” diventa “-“.
Il content
Il content contiene appunto il contenuto quindi un paragrafo (nel caso di una domanda situata nell’header troveremo la risposta) oppure dei valori selezionabili.
In questo tutorial vi spiegherò come realizzare in modo molto semplice dropdown e accordion con Adobe Xd.
Due elementi all’apparenza molto simili che hanno in realtà una sostanziale differenza nell’interazione al click quando li apriamo.
Nel video vi spiego quale è la differenza e come si realizzano con Adobe Xd.
Vuoi imparare a disegnare un sito web da zero?
Guarda il video corso gratuito che ho realizzato per te! -> Video corso di Web Design con Adobe Xd