¿Qué es una pantalla esqueleto?

La pantalla de esqueleto muestra al usuario la estructura general de la página antes de que se carguen los datos de la página y luego muestra la página hasta que se devuelven los datos solicitados para complementar la visualización del contenido de datos requerido. Comúnmente utilizado para listas de artículos, páginas de listas dinámicas y otras páginas de listas relativamente regulares.

Muchos proyectos tienen aplicaciones: por ejemplo: la versión Ele.me h5, Zhihu, Facebook y otros sitios web tienen aplicaciones.

Usemos una imagen como ejemplo:

Facebook usa el avatar fijo del usuario, el autor, la fecha y una pequeña parte de texto como esqueleto principal

Jira es El título y el logotipo se corresponden muy claramente

Se puede decir que LinkedIn no está alineado en absoluto, pero usa más diseño de esqueleto de visualización

Slack usa un estilo de carga mixto No solo eso. , slack En lugar de usar el mismo valor de escala de grises para todas las áreas, se usan diferentes colores de bloque para representar el color de fuente de esa área, que es otra forma de mejorar la suavidad del cambio.

Pero todos tienen una cosa en común, que es un diseño minimalista. Podemos usar esto como ejemplo para crear un estilo único que mejore la experiencia del usuario y fortalezca el estilo de la marca, lo cual creo que es mejor que cargar un logo.

El diagrama esqueleto se presentó brevemente arriba, hablemos de la implementación.

Primero implementemos un esqueleto simple con efecto de carga: