Espaciado

Un sistema de espaciado simplifica la creación de diseños de página y de interfaz de usuario.

El uso coherente e intencional de un sistema de espaciado crea una experiencia más armoniosa para el usuario final. Un sistema de espaciado también sienta las bases para un diseño adaptable y una densidad de interfaz de usuario personalizable en el futuro, lo que mejorará la calidad general y la accesibilidad de nuestros productos.

Unidad base de 8 píxeles

Nuestro sistema de espaciado se basa en una unidad base de 8 píxeles. Esta unidad base determina la escala de espaciado y garantiza la coherencia visual en todos los productos.

Escala

Partiendo de la unidad base de 8 px, el fundamento principal de nuestro sistema de espaciado es la escala de espaciado. Esta escala es un conjunto limitado de valores de espacio que se pueden utilizar para diseñar elementos de la interfaz de usuario de manera uniforme.

Cada valor de espaciado es un múltiplo de la unidad base y varía de 0 px a 80 px para permitir flexibilidad y al mismo tiempo mantener la consistencia en diferentes diseños.

Space tokens

La unidad base de 8px también constituye la base de nuestro sistema de fichas espaciales, ya que la unidad base es space.100. Cada ficha espacial es un múltiplo de esta unidad base, y el sufijo numérico representa el porcentaje de la unidad base.

Por ejemplo, space.200 es el 200% del tamaño de la unidad base, por lo tanto representa 16px.

Cada token de espacio debe utilizarse en lugar de los valores de píxeles o REM sin procesar al agregar espacio entre componentes u objetos en una página. A continuación se detallan algunos ejemplos de uso.

Token	Base unit multiplier	REM	Pixels	Visual representation
space.0	0×	0rem	0px
space.025	0.25×	0.125rem	2px
space.050	0.5×	0.25rem	4px
space.075	0.75×	0.375rem	6px
space.100	1×	0.5rem	8px
space.150	1.5×	0.75rem	12px
space.200	2×	1rem	16px
space.250	2.5×	1.25rem	20px
space.300	3×	1.5rem	24px
space.400	4×	2rem	32px
space.500	5×	2.5rem	40px
space.600	6×	3rem	48px
space.800	8×	4rem	64px
space.1000	10×	5rem	80px

Valores negativos

Nuestro sistema de tokens de espacio también incluye valores negativos de space.negative.025a space.negative.400(-2px a -32px) disponibles en el código. Estos pueden ser útiles para romper el relleno de un contenedor o para elementos superpuestos. Antes de buscar tokens negativos, vea si puede usar el primitivo Bleed , que está diseñado específicamente para manejar espacios en blanco negativos.

Uso del espaciado

Los distintos casos de uso requieren distintos rangos de unidades de espaciado para lograr los mejores resultados. Nuestra escala de espaciado se puede dividir en tres rangos de tamaño diferentes:

Valores pequeños: 0 px a 8 px

Utilice los tokens de space.0 a space.100 (0px a 8px) para piezas de interfaz de usuario pequeñas y compactas.

EJEMPLOS

• Espacio entre los íconos pequeños y el texto
• Relleno de contenedores de componentes pequeños (es decir, insignias, botones de íconos, celdas de tablas)
• Espacio entre elementos repetidos (es decir, grupos de botones)
• Relleno dentro de los componentes de entrada
• Espaciado vertical entre elementos de una tarjeta (es decir, un título y una descripción, una descripción y acciones)
• Espacio entre el disparador y el elemento elevado (es decir, entre el botón desplegable y el menú)

Valores medios: 12 px a 24 px

space.150 Utilice los tokens space.300 (de 12 px a 24 px) para piezas de interfaz de usuario más grandes y menos densas.

EJEMPLOS

• Relleno de contenedores de componentes más grandes (por ejemplo, botones)
• Espacio entre el avatar/icono grande y el contenido (es decir, los mensajes de la sección)
• Espaciado vertical entre elementos en tarjetas
• Espaciado entre elementos en componentes menos densamente empaquetados o de mayor tamaño

Valores grandes: 32 px a 80 px

space.400 Utilice los tokens space.1000 (32 px a 80 px) para las partes más grandes de la interfaz de usuario y para los elementos de diseño.

EJEMPLOS

• El espacio entre el contenido de la página (es decir, el espacio entre la parte superior de la página y el encabezado)
• Alineación dentro de piezas de contenido más grandes (es decir, alineación de contenido en Flag)

Pautas de diseño

Un diseño se compone de elementos y componentes de la interfaz de usuario, así como del espacio entre ellos. La aplicación de estas pautas ayuda a los clientes a comprender rápidamente la relación entre los elementos, lo que les permite analizar y asimilar el contenido de la página con facilidad.

Utilice estas pautas en combinación con tokens de espacio para crear diseños que sean consistentes y fáciles de entender.

Agrupar por similitud

Los usuarios esperan que los elementos estén agrupados semánticamente, o de tal manera que proporcionen un mayor contexto en torno a la información proporcionada.

El uso de un espaciado uniforme alrededor de los elementos les otorga una similitud visual que ayuda al usuario a comprender su relación semántica. Por ejemplo, una tabla o lista de elementos debe tener un espaciado uniforme para crear la sensación de una unidad o colección cohesiva.

Hacer

Agrupe elementos similares usando un espaciado similar.

No

Agrupe elementos similares de forma diferente.

Agrupar por proximidad

La distancia entre los elementos crea un significado semántico, los elementos que se colocan cerca uno del otro se supone que están relacionados.

Utilice este principio para crear significado colocando más objetos relacionados entre sí y más separados los que no lo son. Por ejemplo, coloque los elementos que forman parte del mismo flujo o acción del usuario más cerca para que los usuarios puedan comprender su relación.

Hacer

Agrupe los elementos relacionados para que los usuarios puedan escanear el contenido más fácilmente.

No

Agrupar elementos relacionados que se encuentren muy separados.

Crear orden y jerarquía

Los usuarios buscan un orden en la información visual para reducir el esfuerzo mental que requiere escanear y procesar los datos. Por lo tanto, el orden de los elementos en una página puede utilizarse para animar a los usuarios a seguir un determinado flujo o recorrido.

La jerarquía se utiliza para clasificar elementos e influir en el orden en que los usuarios los ven. El tamaño de los diferentes elementos otorga más importancia a los elementos más grandes, ya que atraen la atención, y menos a los elementos más pequeños. De manera similar, se puede utilizar la variación de la cantidad de espacio en blanco alrededor de un elemento para agruparlos o separarlos y darles mayor importancia.

Hacer

Utilice la escala y el espacio en blanco para clasificar los elementos

No

Dale a cada elemento la misma importancia visual

Utilice el ajuste óptico

Si bien el uso de un sistema de espaciado mejora la coherencia, la armonía visual de una página puede no ser perfecta la primera vez. El peso visual de un elemento afecta el tamaño y el espaciado que pueden requerirse para crear equilibrio en la página, y puede desviarse de los patrones de espaciado estándar. Se deben utilizar ajustes ópticos para corregir estos desequilibrios y mantener el flujo de la página.

Los ajustes ópticos requieren el uso de las unidades de escala de espaciado y la intuición visual para realizar cambios pequeños en el espaciado entre los objetos con el fin de crear armonía visual.

Hacer

Ajuste el espaciado para crear equilibrio visual

No

Utilice el espaciado estándar sin tener en cuenta su alineación con otros elementos