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.
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
Abbildungen auf der Quellseite
Wörterbucheintrag
- 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
- 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
Verwandte Einträge
- Material Design (マテリアルデザイン) vergleichen
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム) vergleichen
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>