Lightbox vs. Modal
Eine Lightbox ist ein Modal, das für Bilder oder Video gemacht ist. Ein normales Modal enthält eine Auswahl, ein Formular oder eine kurze Aufgabe.
Verwenden Sie eine Lightbox, um Bilder oder Videos zu vergrößern. Verwenden Sie ein Modal, wenn die Hauptaufgabe das Handeln oder Entscheiden ist.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Lightbox
Eine Lightbox öffnet Medien in einem größeren Betrachter und verdunkelt die Seite darum herum.
<dialog>Wählen Sie ein Foto, um eine Vollansicht mit Beschriftung zu öffnen. Es gibt Vorherige-, Nächste- und Schließen-Schaltflächen.
- Verwenden Sie es, wenn
- Verwenden Sie es, um Medien genau zu betrachten, ohne den aktuellen Platz in der Galerie zu verlieren.
- Nutze es nicht, wenn
- Verwenden Sie es niemals für eine Aufgabe, die komplexe Bearbeitung oder einen direkten Vergleich erfordert.
- In Code verwendeter Name
<dialog>
Modaldialog
Ein modaler Dialog ist ein Fenster, das im Mittelpunkt steht. Es blockiert den aktuellen Bildschirm, bis man es schließt oder fertig ist.
Bei der Kontolöschung bleibt der Tastaturfokus innerhalb des Dialogs. Wenn die Person abbricht, kehrt der Fokus zum Button zurück, der ihn geöffnet hat.
- Verwenden Sie es, wenn
- Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert.
- Nutze es nicht, wenn
- Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen.
- In Code verwendeter Name
<dialog> / role="dialog" aria-modal="true"
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| LightboxLightbox | Verwenden Sie es, um Medien genau zu betrachten, ohne den aktuellen Platz in der Galerie zu verlieren. | Verwenden Sie es niemals für eine Aufgabe, die komplexe Bearbeitung oder einen direkten Vergleich erfordert. | <dialog> |
| ModaldialogModal Dialog | Verwenden Sie es für eine kurze Auswahl oder kleine Aufgabe, die volle Aufmerksamkeit erfordert. | Öffne niemals einen Dialog über einem anderen oder benutze einen für normale, risikoarme Informationen. | <dialog> / role="dialog" aria-modal="true" |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Lightbox (Lightbox), Modaldialog (Modal Dialog) für unseren echten Nutzerfluss. Nutze diese Regel: Eine Lightbox ist ein Modal, das für Bilder oder Video gemacht ist. Ein normales Modal enthält eine Auswahl, ein Formular oder eine kurze Aufgabe. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.