Wann sollten Sie eine Skelett-Benutzeroberfläche anstelle eines Spinners verwenden?
Verwenden Sie eine Skelett-Benutzeroberfläche (Geisterplatzhalter), wenn auf dem Bildschirm viele Datensätze angezeigt werden – Listen, Tabellen, CRM-Zeilen, Kanban-Karten oder Dashboard-Widgets. Skelette sorgen dafür, dass das Layout beim Laden der Daten stabil bleibt, sodass Benutzer die Struktur sofort scannen können. Spinner eignen sich besser für kurze, atomare Aktionen (Speichern, Senden, Hochladen einer Datei), bei denen es keine dichte Inhaltsform zur Vorschau gibt.
Skelette gegen Spinner auf dichten Bildschirmen.
| Option | Am besten für | Layoutstabilität | Herstellungskosten | Ehrlicher Kompromiss |
|---|---|---|---|---|
| Skelett-/Geister-Benutzeroberfläche | Listen, Tabellen, Feeds, Dashboards | Hoch – Platzhalter entsprechen dem endgültigen Chrom | Benötigt eine Layoutvorlage (oder einen Generator) | Falsche Skelettformen wirken falsch; Halten Sie die Rollen einfach |
| Zentrierter Spinner | Kurze Aktionen, modale Übermittlungen | Niedrig – die Seite springt oft, wenn Inhalte eintreffen | Triviales CSS | Gut unter ~1s; frustrierend bei langen Listenladevorgängen |
| Ghost Wireframe Generator | Landechrom + Ladegerüste für HTML | Exporte entsprechen Desktop-/Mobil-Layouts | Kostenlos, browserlokal | Bibliotheksmodus nur in Version 1 – noch keine SVG-von-Figma-Konvertierung |
Warum Listen und Tabellen Geister bevorzugen.
Dichte Benutzeroberflächen kommunizieren Hierarchien über Zeilen, Spalten und Karten. Ein Spinner löscht diese Hierarchie, bis die Anfrage abgeschlossen ist. Ghost-Balken und -Blöcke ermöglichen Benutzern die Orientierung – „das ist eine Tabelle mit Filtern“, „das ist ein Kanban-Board“ –, bevor echte Daten eintreffen. Aus diesem Grund versenden Produktteams Ladegerüste für CRM- und Analyseansichten, nicht nur für Marketingmodelle.
Exportieren Sie ein Ladegerüst in weniger als einer Minute.
- Öffnen Sie Ghost Wireframe Generator.
- Wählen Sie ein CRM-Tabellen-, Analyse- oder Dashboard-Layout – verwenden Sie Combo, wenn Sie Desktop + Mobilgeräte benötigen.
- Passen Sie die Farbrollen an Ihre Produktoberfläche an, dann Copy HTML (einschließlich
--ghost-*-Variablen). - Optional: Rufen Sie den Ghost Wireframe Skill für denselben Vertrag in Ihrem Editor ab.
Lesen Sie die vollständige Anleitung im Ghost Wireframe Generator-Guide.