Leerzustand vs. Skelett
Ein Leerzustand bedeutet: Hier ist nichts. Ein Skeleton bedeutet: Der Inhalt lädt noch, aber seine Form ist schon bekannt.
Verwenden Sie einen leeren Zustand, um zu erklären, warum nichts vorhanden ist und was als Nächstes zu tun ist. Verwenden Sie ein Skelett für eine kurze Ladezeit, wenn Sie das Layout kennen.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Leer-, Fehler- & Erfolgszustand — Lernpaket
Dieses Lernpaket behandelt drei verschiedene App-Zustände. Leer bedeutet, dass noch kein Inhalt vorhanden ist. Fehler bedeutet, dass etwas fehlgeschlagen ist. Erfolg bestätigt den Abschluss. Jeder Zustand benötigt seine eigene Nachricht und den nächsten Schritt. Das Paket ist kein standardmäßiger Zustandsbegriff.
Save a guide to keep the patterns your team uses most within reach.
Eine neue Projektliste erklärt, wie man das erste Element erstellt. Wenn das Netzwerk ausfällt, erscheint Retry und die Filter bleiben gespeichert.
- Verwenden Sie es, wenn
- Verwenden Sie diesen Leitfaden als Checkliste. Entwerfen Sie jeden Zustand für jede Ansicht, die von Daten abhängt.
- Nutze es nicht, wenn
- Lassen Sie niemals einen leeren Bildschirm oder eine Sackgasse zurück. Erklären Sie Fehler und bestätigen Sie Erfolge.
- In Code verwendeter Name
status state machine
Skelett
Ein Skeleton ist ein einfacher Platzhalter in der Form der Inhalte, die noch geladen werden.
Eine Profilseite spart Platz für Foto und Text. Das Layout bleibt ruhig, wenn die Daten ankommen.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn das Layout bekannt ist und das Warten leicht zu bemerken ist.
- Nutze es nicht, wenn
- Erfinden Sie niemals falsche Details, glitzern Sie endlos oder verwenden Sie ein Gerüst, wenn Inhalte fast sofort erscheinen.
- In Code verwendeter Name
aria-busy="true"
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| Leer-, Fehler- & Erfolgszustand — LernpaketEmpty, Error & Success State — Learning Bundle | Verwenden Sie diesen Leitfaden als Checkliste. Entwerfen Sie jeden Zustand für jede Ansicht, die von Daten abhängt. | Lassen Sie niemals einen leeren Bildschirm oder eine Sackgasse zurück. Erklären Sie Fehler und bestätigen Sie Erfolge. | status state machine |
| SkelettSkeleton | Verwenden Sie es, wenn das Layout bekannt ist und das Warten leicht zu bemerken ist. | Erfinden Sie niemals falsche Details, glitzern Sie endlos oder verwenden Sie ein Gerüst, wenn Inhalte fast sofort erscheinen. | aria-busy="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 Leer-, Fehler- & Erfolgszustand — Lernpaket (Empty, Error & Success State — Learning Bundle), Skelett (Skeleton) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Leerzustand bedeutet: Hier ist nichts. Ein Skeleton bedeutet: Der Inhalt lädt noch, aber seine Form ist schon bekannt. 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.