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.
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
Imágenes en la página de origen
Entrada del diccionario
- 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
- 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 (マテリアルデザイン) comparar
- Flat Design / Vector Minimalism (フラットデザイン / ベクターミニマリズム) comparar
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>