Lightbox vs. Modale
Una 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.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Lightbox
Una lightbox apre i contenuti multimediali in un lettore più grande e scurisce la pagina intorno.
<dialog>Seleziona una foto per aprire una visualizzazione a grandezza naturale con didascalia. Ha i pulsanti Precedente, Successivo e Chiudi.
- Usalo quando
- Usalo per osservare attentamente i media senza perdere la posizione attuale nella galleria.
- Non usarlo quando
- Non usarlo mai per un compito che richiede modifiche complesse o il confronto affiancato.
- Nome usato nel codice
<dialog>
Finestra Modale
Un dialog modale è una finestra focalizzata. Blocca lo schermo attuale finché qualcuno non la chiude o la finisce.
Per la cancellazione dell'account, il focus della tastiera rimane all'interno della finestra di dialogo. Se la persona annulla, il focus ritorna sul pulsante che l'ha aperta.
- Usalo quando
- Usalo per una scelta breve o un piccolo compito che richiede piena attenzione.
- Non usarlo quando
- Non aprire mai un dialogo sopra un altro o usarne uno per informazioni normali o a basso rischio.
- Nome usato nel codice
<dialog> / role="dialog" aria-modal="true"
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| LightboxLightbox | Usalo per osservare attentamente i media senza perdere la posizione attuale nella galleria. | Non usarlo mai per un compito che richiede modifiche complesse o il confronto affiancato. | <dialog> |
| Finestra ModaleModal Dialog | Usalo per una scelta breve o un piccolo compito che richiede piena attenzione. | Non aprire mai un dialogo sopra un altro o usarne uno per informazioni normali o a basso rischio. | <dialog> / role="dialog" aria-modal="true" |
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 Lightbox (Lightbox), Finestra Modale (Modal Dialog) per il nostro reale flusso utente. Usa questa regola: Una lightbox è una modale pensata per immagini o video. Una modale normale contiene una scelta, un modulo o un breve compito. 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.