Skeleton Screen

スケルトン・スクリーン / 2013– / Technik / Interface-Stile

Ein Umgang mit dem Laden, der auf den Ladekreisel verzichtet, zuerst die leere Seite zeigt und die Information nach und nach hineinfließen lässt. Luke Wroblewski stellte das Verfahren 2013 unter diesem Namen vor, als Lehre aus seiner eigenen Anwendung Polar. Gezeigt wird nicht, dass man wartet, sondern dass es vorangeht.

Skeleton Screen — KI-generierte Interpretation 1 — KI-generierte Interpretation, kein Referenzwerk

Skeleton Screen — KI-generierte Interpretation 2 — KI-generierte Interpretation, kein Referenzwerk

Skeleton Screen — KI-generierte Interpretation 3 — KI-generierte Interpretation, kein Referenzwerk

Auf einen Blick

Visuelle Merkmale

Während des Ladens erscheinen weder Ladekreisel noch Fortschrittsbalken
Dort, wo Text und Bilder landen, stehen bereits leere Flächen in der Größe, die sie einnehmen werden
Die Anordnung steht fest, bevor die Daten kommen, und nichts verrutscht, wenn sie eintreffen
Die Information erscheint nicht auf einmal, sondern Bereich für Bereich

Geeignet für

Wenn beim ersten Laden einer Liste oder eines Verlaufs der Ladekreisel entfällt und die gefühlte Geschwindigkeit steigen soll
Wenn ein Bildschirm zu reparieren ist, auf dem Elemente beim Eintreffen der Daten springen, indem Lage und Maß vorher feststehen

Diesen Stil verwenden

Nutze das Kurzbriefing im Projekt oder übergib die strukturierte Spezifikation an ein KI-Werkzeug.

design.md Bild-Prompt JSON API MCP und Maschinenzugriff Verbinden

in ChatGPT öffnen in Claude öffnen in Google AI öffnen

Ausführliche Anleitung und QuellenProduktionsregeln, Referenzwerke, Vergleiche, Forschung und Zitate

Wörterbucheintrag

Typografie: Setze überhaupt keine Schrift. Wo Überschriften und Fließtext hinkommen, liegen leere Flächen in der wirklichen Zeilenhöhe und Zeilenbreite.
Komposition: Übernimm das Gerüst des fertigen Bildschirms. Lege Lage und Maß jedes Elements vorab fest, damit sich beim Eintreffen des Inhalts nichts bewegt.
Material: Nimm unbunte Flächen, die nur eine Stufe vom Grund abweichen. Passe Eckenradius und Maße den echten Elementen an und füge keine weitere Farbe hinzu.
Zu vermeiden: Stimmen die leeren Flächen nicht mit den Maßen des echten Inhalts überein, verschiebt sich alles im Moment des Eintreffens, und der Bildschirm wirkt unruhiger als der Ladekreisel, den er ersetzt hat.
Zum Weiterlesen: why the 2013 article attacked the spinner, and how it defines progress / what change in user reaction it reports for Polar / cases where the dimensions of the blank blocks do not match the actual content

Mehr aus Interface-Stile

Weitere Stile aus Interface-Stile, nach gemeinsamen Wirkungen geordnet.

Solarized (ソラライズド)Gemeinsame Wirkungen: Technique / Calm / Trust.
Command Palette (コマンドパレット)Gemeinsame Wirkungen: Technique / Calm / Trust.
Terminal UI (ターミナルUI)Gemeinsame Wirkungen: Technique / Calm.

Alle Einträge aus Interface-Stile ansehen

Diesen Eintrag zitieren

Das Wörterbuch ist zum Verlinken gedacht. Nehmen Sie die Form, die dorthin passt, wo Sie schreiben.

Link: https://indexstyle.org/de/styles/skeleton-screen
Markdown: [Skeleton Screen — IndexStyle](https://indexstyle.org/de/styles/skeleton-screen)
HTML: <a href="https://indexstyle.org/de/styles/skeleton-screen">Skeleton Screen — IndexStyle</a>

Zurück zur Position im Index