Contenido separado

Establecer jerarquía de contenido con líneas divisorias

Los divisores se utilizan en todos los tipos de diseño para establecer una jerarquía de contenido y temas separados. Aparentemente simples, son uno de los principales contribuyentes al estilo visual de su marca.

Tipos de contenido

Comencemos con tres grados de separación de contenido estático simple:

  • El mismo contenido utiliza el tamaño, el peso, los párrafos y el espacio en blanco de la tipografía para separar múltiples puntos dentro del mismo pensamiento.
  • El contenido similar utiliza divisores de elementos cuando el contenido es similar, pero no exactamente el mismo.
  • El contenido relacionado usa divisores de sección cuando el contenido está relacionado, pero es su propio pensamiento único.
Sin divisor, divisor de artículo y divisor de sección

Interactividad

Los divisores aumentan la capacidad de que una lista se perciba como tappable porque crea contenedores visuales alrededor del texto interactivo en relación con el tamaño del objetivo del tap. También es común usar un cheurón para mejorar la llamada a la acción en iOS, pero no en Android.

Divisores vs Ninguno

Diseño visual

Tiene más opciones que solo líneas simples y utilitarias. Una empresa de muebles moderna podría usar un cambio en el color de fondo, mientras que un fabricante de relojes de lujo podría usar más ornamentación y filigrana. ¿Qué se siente bien para tu marca?

Aspectos destacados de la auditoría

Si va con líneas (nosotros también, sin juicio), aquí hay algunos factores a tener en cuenta:

Divisores de artículos

Los divisores de elementos generalmente se insertan para indicar visualmente que el pensamiento todavía está conectado.

Comience a insertar

Tanto HIG de Apple como Design Material recomiendan divisores de elementos que se alinean con el inicio del texto en el lado inicial (el izquierdo para los idiomas LTR). Creo que hacen esto para dar espacio visual a las imágenes, pero no me gusta el inicio inconsistente de la línea divisoria de elementos apunta cuando una sola pantalla está compuesta de elementos de lista de texto icónicos y simples. Hace que el grupo de elementos de la lista con iconos se sienta más conectado que el grupo sin él.

Tener el divisor de elementos siempre comienza en el mismo recuadro da la ilusión de un diseño más consistente.

Contenido vs Inicio de texto

Fin de inserción

Para elementos interactivos, ambos recomiendan divisores de elementos que van al borde de la pantalla en el lado final (el derecho para los idiomas LTR). Para elementos estáticos, Android recomienda insertar. Creo que hacen esto para delinear claramente entre elementos estáticos e interactivos, pero me pregunto si el usuario está sintonizado en una diferencia tan pequeña y trae una asimetría a la pantalla que puede no ser deseada.

Insertar los divisores interactivos y estáticos crea un diseño más simétrico y consistente.

Contenido vs borde final

Excepciones

Hay algunas excepciones al divisor de elementos de inserción igual:

  • Los botones tienen divisores de elementos de ancho completo para distinguirse de los elementos de la lista, especialmente en modales.
  • Los elementos de la lista conectados alinean el divisor al comienzo del tipo para no romper el icono conectado "columna vertebral".
  • Las listas individuales con imágenes pueden alinear el divisor al comienzo del tipo para dar más espacio a la imagen cuando es el único tipo de elemento de lista en la pantalla.
Botones, listas conectadas y listas individuales con imágenes

Divisores de sección

Los divisores de sección son típicamente de ancho completo y tienen más peso visual para indicar que el pensamiento se ha detenido. Al diseñar divisores de sección, tenga en cuenta el estilo de los encabezados y pies de página de su lista agrupada.

Los encabezados y pies de página agrupados que viven fuera del contenido de la lista en el fondo, como recomienda HIG, los desconecta visualmente. He visto aplicaciones donde el pie de página de la primera lista se confunde con el subtítulo de la segunda, ¡oof!

Soy un gran defensor de que el encabezado agrupado se adjunte a la parte superior de la lista y que el contenido del pie de página se incluya en el elemento de la lista relevante o como texto de detalle como parte del encabezado si corresponde a la lista completa. Esto crea una apariencia de "tarjeta" más editorial con jerarquías claras y agrupaciones de contenido.

Encabezado y descripción agrupados, dentro y fuera

Soy Linzi Berry, actualmente gerente de sistemas de diseño en Lyft. Sudo los detalles para que no tengas que hacerlo. ¡Por favor, suscríbete!