Espaciado
El espaciado uniforme crea armonía visual, mejora la legibilidad y ayuda a los usuarios a comprender las relaciones entre el contenido de una página.InsureKidsNow.gov sigue los estándares de espaciado del Sistema de Diseño Web de los Estados Unidos (USWDS) para garantizar que nuestro sitio web sea accesible, previsible y fácil de navegar. El uso de un sistema de espaciado compartido ayuda a los diseñadores y desarrolladores a crear páginas que tengan una apariencia y un comportamiento coherentes. Tanto USWDS como CMS recomiendan usar unidades de espaciado basadas en múltiplos de 8 pixeles y exponerlas como tokens de diseño.
Por qué es importante mantener un espaciado uniforme:
- Mejora la legibilidad: el espaciado adecuado entre el texto y los elementos facilita la lectura y comprensión del contenido.
- Crea jerarquía visual: los diferentes valores de espaciado ayudan a los usuarios a distinguir entre encabezados, texto del cuerpo y elementos de la interfaz de usuario.
- Mejora la accesibilidad: el espaciado adecuado entre los elementos interactivos facilita su selección, especialmente para usuarios con discapacidades motoras.
- Mantiene la coherencia de la marca: emplear los mismos valores de espaciado en todas las páginas crea una experiencia profesional y coherente.
- Simplifica el desarrollo: un conjunto limitado de valores de espaciado reduce la toma de decisiones y acelera el diseño y el desarrollo.
El sistema de unidades base 8px
Lo ideal sería que InsureKidsNow.gov usara un sistema de espaciado basado en múltiplos de 8 pixeles (8px). Este enfoque, recomendado por USWDS, garantiza la coherencia visual y facilita la creación de diseños adaptables que funcionan en todos los dispositivos.
¿Por qué 8px?
- El número 8 es fácilmente divisible (8, 4, 2, 1) antes de alcanzar unidades subpíxel.
- Muchos tamaños de pantalla populares son divisibles entre 8
- Ofrece suficiente flexibilidad para diversas necesidades de diseño, manteniendo al mismo tiempo la coherencia.
Escala de espaciado
Se deben usar los siguientes valores de espaciado para los márgenes, el relleno y los espacios entre elementos. Todos los valores son múltiplos de 8px, con algunos valores más pequeños (1px, 2px, 4px) para ajustes precisos.
Descripción general de las unidades de espaciado de IKN
| Valor (px) | Valor (rem) | Múltiplo de 8 | Cuándo usar |
|---|---|---|---|
| 1px | -- | -- | Bordes, detalles finos |
| 2 px | -- | -- | Bordes, separadores |
| 4 px | 0.25 rem | 0.5x | Espacio reducido, huecos pequeños |
| 8 px | 0.5 rem | 1x | Unidad base - Espacio compacto |
| 12 px | 0.75 rem | 1.5x | Pequeño espacio entre elementos relacionados |
| 16 px | 1 rem | 2x | Espaciado predeterminado: uso más común |
| 20 px | 1.25 rem | 2.5x | Espaciado medio |
| 24 px | 1.5 rem | 3x | Espacio entre secciones |
| 32 px | 2 rem | 4x | Gran separación entre componentes |
| 40 px | 2.5 rem | 5x | Espacio extragrande |
| 48 px | 3 rem | 6x | Espaciado de secciones |
| 56 px | 3.5 rem | 7 veces | Espaciado de la sección principal |
| 64 px | 4rem | 8x | Espaciado de secciones grandes |
| 72 px | 4.5 rem | 9x | Espacio entre secciones extragrandes |
| 80 px | 5 rem | 10x | Espacio máximo entre secciones principales |
Cómo emplear los valores de espaciado
Nota sobre los tokens de diseño: Actualmente, InsureKidsNow.gov no emplea tokens de diseño. Hasta que se implementen los tokens de diseño, los desarrolladores deben usar los valores de pixeles (px) o rem directamente en CSS. Cuando se agreguen tokens de diseño en el futuro, estos valores permanecerán iguales; solo cambiará el método de implementación.
Pautas de espaciado según el caso de uso
Espaciado pequeño (4px - 8px) - uso para:
- Espacio entre íconos y texto
- Relleno en el interior de botones o insignias pequeñas.
- Espacio entre elementos estrechamente relacionados
- Listas o tablas compactas
Espaciado medio (12px - 24px) - uso para:
- Relleno interior de botones y campos de formulario
- Espacio entre las etiquetas del formulario y los campos de entrada
- Espacio vertical entre párrafos
- Espacio entre las cartas en una cuadrícula
- Espacio mínimo entre elementos interactivos (para accesibilidad)
Espaciado amplio (32px - 80px) - uso para:
- Espacio entre las secciones principales de la página
- Márgenes por encima y por debajo de los encabezados
- Espacio alrededor de las secciones principales
- Márgenes de página y relleno del contenedor
Espaciado tipográfico
Al espaciar los elementos de texto, tenga en cuenta el tamaño del encabezado y ajuste el espaciado en consecuencia:
Tipografía de unidades de espaciado IKN
| Tamaño del encabezado | Espacio debajo del encabezado | Ejemplo |
|---|---|---|
| H1 (32px+) | 48px - 56px | Título de página principal |
| H2 (28px) | 40px - 48px | Encabezado de sección |
| H3 (24px) | 32px - 40px | Encabezado de la subsección |
| H4 (20px) | 24px - 32px | Encabezado pequeño |
| Texto del cuerpo | 32 px entre párrafos | Pequeño espacio entre elementos relacionados |
Consejo: Los títulos más grandes necesitan más espacio debajo para mantener la jerarquía visual.
Consideraciones de accesibilidad
Elementos interactivos: mantenga un espacio mínimo de 24 px (1.5 rem) entre elementos en los que se puede hacer clic como botones y enlaces para cumplir con los estándares de accesibilidad.
Elementos interactivos: en dispositivos móviles, asegúrese de que los elementos interactivos tengan un relleno adecuado (tamaño total mínimo de 44 px × 44 px).
Espaciado entre párrafos: use 32 pixeles (2 rem) entre párrafos para mejorar la legibilidad.
Indicadores de enfoque: asegúrese de que los contornos de enfoque tengan el espaciado adecuado y no se superpongan con los elementos cercanos.
Implementación futura: tokens de diseño
Los tokens de diseño son una mejora futura para InsureKidsNow.gov. Una vez implementadas, proporcionarán una forma más fácil de gestionar los valores de espaciado en todo el sitio web.
¿Qué son los tokens de diseño? Los tokens de diseño son variables con nombre que almacenan valores de diseño (como espaciado, colores y tipografía). En lugar de codificar valores fijos como 16px, se usaría un token como spacing-2 o --spacer-2.
Beneficios de los tokens de diseño:
- Más facilidad en la actualización de los valores de espaciado en todo el sitio
- Mayor coherencia entre componentes
- Comunicación más clara entre diseñadores y desarrolladores
- Temas y personalización simplificados
Cuando implementemos tokens de diseño, los valores de espaciado permanecerán iguales; solo cambiará la forma en que los referenciamos en el código.