Menu a discesa vs. Seleziona vs. Casella combinata
Un menu a discesa avvia delle azioni. Una select permette di scegliere da un elenco fisso. Una combobox permette anche di scrivere o cercare.
Usa un menu per le azioni. Usa una selezione per un elenco fisso breve. Usa una casella combinata per un elenco lungo o ricercabile.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Menu a discesa & Menu contestuale — Pacchetto di apprendimento
Questo pacchetto di apprendimento confronta i menu in base a come si aprono. Un menu a discesa si apre da un controllo. Un menu contestuale appartiene a un oggetto e spesso si apre al puntatore. Il pacchetto non è un unico termine standard per i menu.
DropdownMenu / ContextMenuIl pulsante Altro apre azioni generali. Fare clic con il tasto destro su un file apre azioni solo per quel file.
- Usalo quando
- Scegli un menu il cui trigger e oggetto corrispondono al compito. Quindi costruisci il comportamento della tastiera.
- Non usarlo quando
- Non mettere mai campi di un modulo o la navigazione principale del sito all'interno di un menu comandi.
- Nome usato nel codice
DropdownMenu / ContextMenu
Seleziona
Una lista di selezione apre un elenco fisso e permette di scegliere un solo valore.
Un campo per il Paese mostra un elenco fisso e rifiuta i valori esterni.
- Usalo quando
- Usalo quando la lista è fissa, non troppo lunga, e la pagina ha poco spazio.
- Non usarlo quando
- Non usarlo mai per una lista lunga che le persone devono cercare. Usa invece una combobox.
- Nome usato nel codice
<select> / role="listbox"
Casella combinata modificabile
Una casella combinata modificabile è un campo di testo collegato a un elenco che filtra mentre scrivi.
Digita “Tai” per mostrare Taipei e Tainan. Poi usa i tasti freccia per scegliere.
- Usalo quando
- Usalo per lunghe liste ricercabili, completamento automatico o scelte che permettono una risposta personalizzata.
- Non usarlo quando
- Non chiamare mai un menu semplice o un select nativo una combobox perché funzionano in modo diverso.
- Nome usato nel codice
role="combobox" + aria-controls
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Menu a discesa & Menu contestuale — Pacchetto di apprendimentoDropdown & Context Menu — Learning Bundle | Scegli un menu il cui trigger e oggetto corrispondono al compito. Quindi costruisci il comportamento della tastiera. | Non mettere mai campi di un modulo o la navigazione principale del sito all'interno di un menu comandi. | DropdownMenu / ContextMenu |
| SelezionaSelect | Usalo quando la lista è fissa, non troppo lunga, e la pagina ha poco spazio. | Non usarlo mai per una lista lunga che le persone devono cercare. Usa invece una combobox. | <select> / role="listbox" |
| Casella combinata modificabileEditable Combobox | Usalo per lunghe liste ricercabili, completamento automatico o scelte che permettono una risposta personalizzata. | Non chiamare mai un menu semplice o un select nativo una combobox perché funzionano in modo diverso. | role="combobox" + aria-controls |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Menu a discesa & Menu contestuale — Pacchetto di apprendimento (Dropdown & Context Menu — Learning Bundle), Seleziona (Select), Casella combinata modificabile (Editable Combobox) per il nostro reale flusso utente. Usa questa regola: Un menu a discesa avvia delle azioni. Una select permette di scegliere da un elenco fisso. Una combobox permette anche di scrivere o cercare. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.