¿Cuál es el nombre del patrón de diseño web que muestra la forma del contenido mientras se carga el contenido real?


12

Es bastante común que los sitios de aplicación de página única (SPA) carguen y muestren el diseño del sitio antes de cargar su contenido. Últimamente, me he dado cuenta de que, en lugar de mostrar un mensaje de espera o "Cargando ...", muchos de estos sitios muestran la plantilla / diseño que el contenido se completará, con el texto y las imágenes rellenos con geometría plana formas

Ejemplo de holgura

Parece un buen patrón porque es menos discordante que tener una pequeña línea de texto de espera reemplazada por un gran volcado de mensajes o lo que sea. Me gustaría leer sobre el patrón, tal vez encontrar una biblioteca para hacerlo más fácilmente en mi sitio, pero no tengo idea de cómo llamarlo, y tengo problemas incluso para describirlo de manera sucinta como para buscar en la web de manera efectiva . El ejemplo más cercano que pude encontrar fue este viejo artículo que no le da a la práctica un nombre específico.

"Marcador de posición" es lo primero que se me ocurre, pero por supuesto las <input>etiquetas ahora tienen un placeholdleratributo real y mucha gente pregunta sobre el texto de relleno u otro contenido (Lorem Ipsum, Kitten Ipsum y similares) por lo que los resultados tienden a ser inútiles . Espero que la industria haya acordado un nombre único y descriptivo para esta práctica y todavía no lo he encontrado.


2
su artículo dice "marcador de posición de contenido"; ¿Qué hay de malo con ese nombre? No estoy seguro de que haya un "nombre oficial" para esto
Luciano

Veo algunas menciones (generalmente llamando a Facebook por su nombre) usando esa cadena específica. La mejor pista es esta biblioteca, pero no creo que encaje bien con el modelo declarativo / reactivo angular. Seguiré cavando, gracias.
Coderer

1
@Luciano El problema es que el "marcador de posición de contenido" también podría ser fácilmente Lorem Ipsum y cosas similares. Esto también es útil en diseño gráfico, por lo que el término es ambiguo.
yo

Respuestas:


18

Lo primero que se me ocurrió fue que la sugerencia de tipo que se muestra en su ejemplo se conoce como griego .

La búsqueda de "uso griego en las pantallas de carga" me llevó a varios artículos sobre esta técnica UX, y específicamente a este que se refiere al concepto como un marcador de posición de contenido .

Tan buen término como cualquiera, creo.

Entonces, específicamente aquí tienes marcadores de posición de imagen y de Grecia y, en conjunto, todo esto puede denominarse marcador de posición de contenido.


2
interesante, me pregunto cuál es el origen del término "Greeking" ...
Digital Lightcraft

1
@DigitalLightcraft Podría tener algo que ver con la expresión 'todo es griego para mí'. Para obtener más información, no dude en publicar una pregunta en inglés . SE : P
Vincent

Me alegro de poder ayudar, sí, los orígenes del "griego" son desconocidos para mí, apuesto a que es interesante.
mayersdesign

2
Parte interesante sobre el origen relacionado con lorem ipsum: "El uso del griego (también llamado texto ficticio) permite a los diseñadores de páginas colocar texto en una página sin que el contenido real actúe como una distracción. La historia del griego no está clara, pero fue utilizado por primera vez a mediados del siglo 20. El texto se basó en las palabras de Cicerón, un líder romano cuyos escritos son admirados. El idioma que hablaba y escribía era el latín en lugar del griego, por lo que el nombre de este texto falso es engañoso. " fuente
Jamie Bull

4

La palabra mágica parece ser griega (¡gracias!), Pero eso me ayudó a encontrar el término "Pantalla de esqueleto", que parece referirse a la práctica muy específica de presentar contenido simulado para obtener la forma general de la aplicación. Supongo que la teoría es que puede reducir la ansiedad sobre los tiempos de carga .


2

Algunos de sus amigos desarrolladores pueden referirse a él como el efecto de brillo de Facebook , ya que Facebook popularizó la técnica de marcador de posición de contenido con un ligero efecto de brillo y su código de fuente abierta .

El objetivo del efecto de brillo es indicar que el contenido real todavía se está cargando, para que los usuarios no piensen que la página está atascada y se actualiza.

ingrese la descripción de la imagen aquí


-1

Cuando usé este patrón, lo llamamos una página esqueleto. Súper útil para páginas grandes que generan contenido dinámico.


44
¿Cómo se agrega esto a las respuestas existentes? Parece que Coderer ya mencionó el término "esqueleto"
Zach Saucier

Bienvenido al diseño gráfico! Si tienes suficiente reputación, puedes votar la respuesta que crees que es correcta. Alternativamente, marque la pregunta como favorita y se le notificará de cualquier nueva respuesta.
Luciano

-4

Se llaman pantallas de esqueleto.


Hola NIck, bienvenido a GD.SE. No publique doble información que ya se haya mencionado en otras respuestas. ¡Gracias!
Vincent
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.