Un tooltip dà un breve suggerimento. Un popover può contenere più testo, scelte o pulsanti.
Usa un tooltip quando poche parole sono sufficienti. Usa un popover quando una persona deve leggere o fare di più senza lasciare la pagina. Apri guidaConfronta i pattern UI che sono facili da confondere
Due schemi possono sembrare simili ma svolgere lavori diversi. Usa queste brevi regole per scegliere quello giusto.
Un modal blocca la pagina finché il compito non è finito. Un popover resta accanto al suo pulsante e lascia che la pagina continui a funzionare.
Usa un modale per un'attività che deve terminare prima. Usa un popover per dettagli extra o una piccola azione. Apri guida Menu a discesa & Menu contestuale — Pacchetto di apprendimentoDropdown & Context Menu — Learning Bundle vs. SelezionaSelect vs. Casella combinata modificabileEditable Combobox
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. Apri guidaLe schede cambiano tra sezioni di contenuto. Un controllo segmentato cambia una piccola modalità, filtro o valore nella stessa vista.
Usa tabulazioni per sezioni di contenuto separate. Usa un controllo segmentato per alcune scelte brevi che cambiano lo stesso contenuto. Apri guidaUna fisarmonica apre sezioni in una pagina e ne può mantenere diverse aperte. Le schede mostrano una sezione alla volta in un unico spazio condiviso.
Usa un accordion per domande o sezioni che le persone possono leggere insieme. Usa le schede per poche viste separate quando ne conta solo una alla volta. Apri guidaUn toast è un breve messaggio che non ferma l'attività. Un avviso resta o interrompe perché non deve essere perso.
Usa un toast per confermare un'azione completata. Usa un alert per un errore, pericolo o una scelta che richiede attenzione immediata. Apri guidaUn tooltip dà un' breve etichetta o suggerimento. Una hover card mostra un'anteprima più ricca di una persona, un elemento o un link.
Usa un tooltip quando poche parole sono sufficienti. Usa una scheda hover quando un'anteprima può evitare di andare in un'altra pagina. Deve funzionare anche con tastiera e touch. Apri guida macOS Context MenumacOS Context Menu vs. Menu a discesa & Menu contestuale — Pacchetto di apprendimentoDropdown & Context Menu — Learning Bundle
Un context menu mostra le azioni per l'elemento su cui clicchi o premi. Un menu a discesa si apre da un pulsante visibile con uno scopo chiaro.
Usa un menu contestuale come scorciatoia extra, non come unica modalità. Usa un menu a tendina quando le persone devono vedere dove si apre il menu. Apri guidaUn carousel mostra diapositive separate con dei controlli. Un marquee mantiene in movimento una riga di contenuti.
Usa un carosello quando ogni elemento richiede tempo e controlli. Usa un nastro solo per decorazioni poco importanti che possono fermarsi e interrompere il movimento su richiesta. Apri guidaUna lightbox è una modale pensata per immagini o video. Una modale normale contiene una scelta, un modulo o un breve compito.
Usa un lightbox per ingrandire immagini o video. Usa un modale quando il compito principale è agire o decidere. Apri guidaLa muratura inserisce carte di altezze diverse in colonne. Una griglia bento usa dimensioni delle carte pianificate per mostrare ciò che conta di più.
Usa il masonry per molti elementi separati con altezze diverse. Usa una griglia bento per un piccolo set la cui dimensione mostra importanza. Apri guidaUna barra laterale resta nel layout della pagina. Un cassetto scivola dentro per poco tempo e può coprire o spingere la pagina.
Usa una barra laterale per strumenti o collegamenti che le persone usano spesso quando c'è spazio. Usa un cassetto per attività meno comuni o schermi piccoli, e rendilo facile da chiudere. Apri guidaUn pulsante con tre linee apre la navigazione. Un pulsante con tre puntini apre altre azioni per un elemento vicino.
Usa tre linee per la navigazione nascosta, principalmente su schermi piccoli. Usa tre punti quando le azioni aggiuntive dell’elemento non ci stanno, e nomina il pulsante “Altre azioni.” Apri guidaLa facilità segue una curva di temporizzazione prestabilita. Una molla si muove come una molla reale e si ferma da sola.
Usa easing per dissolvenze, cambiamenti di colore e passaggi temporizzati. Usa una molla per oggetti che si muovono o seguono un trascinamento. Apri guidaUno stepper cambia un numero a passi fissi. Uno slider sceglie un punto lungo un intervallo.
Usa un selettore a step per piccole modifiche precise. Usa un cursore quando la posizione approssimativa è più importante che digitare un numero esatto. Mostra sempre il valore e supporta la tastiera. Apri guidaUn foglio appartiene a una finestra e contiene un'attività breve. Un avviso mostra un breve messaggio o una scelta che richiede attenzione ora.
Usa un foglio per impostazioni, salvataggio o un modulo breve legato a un documento. Usa un avviso per un avvertimento, un errore o un controllo in un solo passaggio. Apri guida Stato Vuoto, Errore e Successo — Pacchetto di ApprendimentoEmpty, Error & Success State — Learning Bundle vs. ScheletroSkeleton
Uno stato vuoto significa che non c'è contenuto. Uno scheletro indica che il contenuto si sta ancora caricando e se ne conosce la forma.
Usa uno stato vuoto per spiegare perché non c'è nulla e cosa fare dopo. Usa uno scheletro per un caricamento breve quando conosci il layout. Apri guidaUna barra degli strumenti mette le azioni comuni dentro una finestra. La barra dei menu tiene l'intero set di comandi dell'app in alto nello schermo.
Metti le azioni comuni su documenti o selezioni nella barra degli strumenti. Mantieni tutti i comandi, le scorciatoie da tastiera e le azioni meno comuni nella barra dei menu. Apri guida