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.
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
Entrée du dictionnaire
- 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
- 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 (マテリアルデザイン) comparer
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム) comparer
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>