Skeleton Screen

スケルトン・スクリーン / 2013– / Technique / Styles d'interface

Un traitement du chargement qui renonce à l'indicateur rotatif et montre d'abord l'écran vide, puis y verse l'information peu à peu. Luke Wroblewski l'a présenté sous ce nom en 2013, en tirant les leçons de sa propre application Polar. Il montre que quelque chose avance, plutôt que le fait de faire attendre.

Skeleton Screen — interprétation générée par IA 1 — Interprétation générée par IA, pas une œuvre de référence

Skeleton Screen — interprétation générée par IA 2 — Interprétation générée par IA, pas une œuvre de référence

Skeleton Screen — interprétation générée par IA 3 — Interprétation générée par IA, pas une œuvre de référence

En un coup d’œil

Signes visuels

Pendant le chargement, ni indicateur rotatif ni barre de progression
Là où viendront textes et images se trouvent déjà des plages unies à la dimension qu'ils occuperont
La mise en page est arrêtée avant l'arrivée des données, et rien ne bouge quand elles arrivent
L'information ne surgit pas d'un coup, chaque zone se remplit à son tour

Usages idéaux

Quand le premier chargement d'une liste ou d'un fil doit abandonner l'indicateur rotatif pour gagner en vitesse ressentie
Quand il faut corriger un écran où les éléments sautent à l'arrivée des données, en fixant d'avance position et dimension

Utiliser ce style

Appliquez le brief concis au projet ou transmettez la spécification structurée à un outil d’IA.

design.md prompt d’image API JSON MCP et accès machine Composer

ouvrir dans ChatGPT ouvrir dans Claude ouvrir dans Google AI

Guide détaillé et sourcesRègles de production, œuvres de référence, comparaisons, recherche et citations

Entrée du dictionnaire

Typographie: Ne compose aucun texte. À la place des titres et du corps, aligne des plages unies calées sur l'interligne et la justification réels.
Composition: Reprends la charpente de l'écran fini. Arrête d'abord la position et la dimension de chaque élément pour que rien ne bouge une fois le contenu arrivé.
Matière: Emploie des plages neutres à un seul cran du fond. Aligne rayon d'angle et dimensions sur les éléments réels et n'ajoute pas de couleur.
Précaution: Si les plages unies n'ont pas les dimensions du contenu réel, tout se décale à l'instant où les données arrivent, et l'écran devient plus agité que l'indicateur rotatif qu'il remplace.
Pour approfondir: 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

Entrées liées

Material Design (マテリアルデザイン)Effets partagés : Trust / Technique.Comparer Skeleton Screen et Material Design
Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Même famille : Styles d'interface.Comparer Skeleton Screen et Flat Design / Vector Minimalism

Plus de Styles d'interface

Poursuivez avec des styles de Styles d'interface, classés par effets communs.

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

Voir toutes les entrées Styles d'interface

Citer cette entrée

Le dictionnaire est fait pour être lié. Prenez la forme qui convient là où vous écrivez.

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

Revenir à sa position dans l’index