Skeleton Screen

スケルトン・スクリーン / 2013– / Técnica / Estilos de interfaz

Es una forma de tratar la carga que renuncia al indicador giratorio y muestra antes la página vacía, para ir vertiendo la información poco a poco. Luke Wroblewski la presentó con este nombre en 2013, a partir de lo aprendido con su propia aplicación Polar. Enseña que algo avanza en lugar de enseñar que se está esperando.

Skeleton Screen — interpretación generada por IA 1 — Interpretación generada por IA, no una obra de referencia

Skeleton Screen — interpretación generada por IA 2 — Interpretación generada por IA, no una obra de referencia

Skeleton Screen — interpretación generada por IA 3 — Interpretación generada por IA, no una obra de referencia

De un vistazo

Rasgos visuales

Durante la carga no aparece ni indicador giratorio ni barra de progreso
Donde irán el texto y las imágenes ya hay campos lisos con la medida que van a ocupar
La composición queda fijada antes de que lleguen los datos, y nada se mueve cuando llegan
La información no sale de una vez, cada zona se rellena por turno

Usos idóneos

Cuando la primera carga de una lista o de una cronología debe dejar el indicador giratorio para subir la velocidad percibida
Cuando hay que arreglar una pantalla en la que los elementos saltan al llegar los datos, fijando antes posición y medida

Usar este estilo

Lleva el resumen al proyecto o entrega la especificación estructurada a una herramienta de IA.

design.md prompt de imagen API JSON MCP y acceso automático Combinar

abrir en ChatGPT abrir en Claude abrir en Google AI

Guía detallada y fuentesReglas de producción, obras de referencia, comparaciones, investigación y citas

Entrada del diccionario

Tipografía: No pongas ni una letra. Donde irán titulares y texto, alinea campos lisos ajustados a la interlínea y a la medida reales.
Composición: Reutiliza el esqueleto de la pantalla acabada. Fija primero la posición y el tamaño de cada elemento para que nada se mueva cuando entre el contenido.
Material: Usa campos neutros a un solo paso del fondo. Ajusta el radio de las esquinas y las medidas a las de los elementos reales y no añadas más color.
Precaución: Si los campos lisos no coinciden en medida con el contenido real, todo se desplaza en el momento en que llegan los datos y la pantalla queda más inquieta que con el indicador giratorio al que sustituye.
Para profundizar: 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

Entradas relacionadas

Material Design (マテリアルデザイン)Efectos compartidos: Trust / Technique.Comparar Skeleton Screen y Material Design
Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム)Misma familia: Estilos de interfaz.Comparar Skeleton Screen y Flat Design / Vector Minimalism

Más de Estilos de interfaz

Continúa con estilos de Estilos de interfaz, priorizados por sus efectos compartidos.

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

Ver todas las entradas de Estilos de interfaz

Citar esta entrada

El diccionario existe para que se enlace. Toma la forma que encaje donde estés escribiendo.

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

Volver a su posición en el índice