Compacto, cómodo, espacioso: modos de densidad

Un modo de densidad es la misma disposición resuelta contra distintos valores de espaciado: los componentes, la jerarquía y la tipografía permanecen fijos, mientras que los alias semánticos de espaciado que referencian —relleno de fila, espacio entre celdas, margen interno de control— se reasignan un paso de escala hacia arriba o hacia abajo. El modo compacto encaja más en pantalla, el espacioso encaja menos, y ninguno es un rediseño: los tres modos son un mismo diseño leído contra tres puntos vecinos de la misma escala de espaciado.

Vale la pena insistir en ese marco, porque «deberíamos ofrecer una vista compacta» suena a un segundo producto y a menudo se planifica como tal. Este artículo cubre quién necesita realmente los modos de densidad, el mecanismo de alias que los convierte en un cambio de asignación en vez de una bifurcación, una fila de tabla trabajada con números reales, y el coste honesto — todo apoyado en la lógica de pasos de un sistema de espaciado.

¿Quién necesita realmente los modos de densidad?

Herramientas con muchos datos donde usuarios experimentados pasan horas al día: tablas, paneles de administración, dashboards de monitorización, IDEs. Un agente de soporte clasificando una cola o un analista cuadrando un libro contable mide la pantalla en filas por vistazo — cada fila que cabe es un scroll ahorrado, cientos de veces al día. El mismo producto casi siempre tiene superficies sin esa presión: ajustes, onboarding, facturación. Esas se quedan en cómodo, hagan lo que hagan las tablas.

La demanda es observable antes de construir nada: los usuarios reducen el zoom del navegador al 80 %, exportan tablas a hojas de cálculo «para verlo todo», o lo piden directamente. La densidad es una respuesta por superficie a una necesidad experta demostrada — una idea que conviene retener, porque la sección de costes de más abajo es real.

¿Cómo funciona un modo de densidad?

A través de la estructura de tokens de dos capas que muchos sistemas ya tienen. La capa inferior es la propia escala de espaciado: con una base de 16px, razón 2 y dos notas por duplicación, el menú va 8, 11, 16, 23, 32, 45, 64. La capa superior es semántica — alias como table-row-padding, table-cell-gap o control-inset que apuntan a pasos. Los componentes consumen solo los alias.

Un modo de densidad es una reasignación de esa capa de punteros y nada más. Cómodo apunta el relleno de fila a 16; compacto lo reapunta a 11; espacioso a 23. Ningún componente cambia y ninguna pantalla se vuelve a dibujar a mano — se intercambia una asignación, igual que un tema de color intercambia claro por oscuro.

La geometría de la escala es lo que hace que una reasignación de un solo paso se sienta coherente. Cada paso es 2^(1/2) ≈ 1,41× su vecino (el valor sin redondear por debajo de 16 es 11,31; el menú lo redondea a 11), así que bajar cada alias un paso comprime cada distancia en aproximadamente ese mismo 30 %. El espacio dentro de un componente y el espacio entre componentes se encogen en proporción, y la disposición se lee como el mismo diseño, más apretado — no como un diseño distinto.

¿Qué aspecto tiene una fila de tabla en cada modo?

Toma una tabla con texto de cuerpo de 16px con interlineado 1,5 — una caja de línea de 24px — y resuelve los mismos dos alias en los tres modos:

El compacto muestra un 30 % más de filas que el cómodo en el mismo viewport — todo el argumento de negocio en una línea — y cada valor de espaciado de la tabla proviene de tres pasos vecinos del menú corto de la escala: 11, 16, 23.

Las tres columnas son un mismo menú leído en tres desplazamientos: abre la escala de espaciado detrás de la asignación en Scale Composer — base 16, razón 2 y dos notas por duplicación generan los siete pasos, y cada alias de arriba apunta a uno de ellos.

¿El texto se hace más pequeño en el modo compacto?

Casi nunca — y esta es la idea clave de todo el patrón: la densidad es una decisión de espaciado antes que una decisión de tipografía. El espaciado se comprime; la tipografía se mantiene en gran medida. Un experto escanea la estructura más rápido que un novato, pero la experiencia no reduce el tamaño de letra que un lector puede resolver cómodamente — ese límite lo fija la vista, no la familiaridad. Apretar la tipografía también aporta poco: bajar el texto de cuerpo de 16 a 14px ahorra 2px por línea donde una reasignación de relleno ahorraba 10 por fila, y cuesta legibilidad a todos los usuarios. Algunas cuadrículas de datos sí bajan el texto secundario de celda un nivel en su modo más denso, pero es la última palanca, accionada después de que el espaciado haya hecho el trabajo.

¿Por qué pueden los usuarios experimentados leer pantallas más densas?

Porque el espacio en blanco está haciendo un trabajo de comunicación, y cuánto se necesita depende de quién lee. El espaciado es cómo una disposición enseña su estructura — qué etiqueta pertenece a qué campo, dónde termina un registro y empieza el siguiente. En el vocabulario de la psicología de la Gestalt esto es agrupación por proximidad. Un visitante primerizo se apoya mucho en esas señales. Un usuario experimentado ya ha trasladado la estructura a su cabeza; la pantalla ya no tiene que enseñarla, así que el presupuesto de espaciado puede encogerse con poco coste de comprensión.

La reasignación de un paso respeta ese mecanismo. Como cada alias baja por la misma escala geométrica, el contraste proporcional entre espacios sobrevive: el espacio entre registros sigue siendo visiblemente mayor que el espacio dentro de uno. El compacto baja el volumen de las señales sin desordenar sus relaciones. Es también por lo que las superficies orientadas a novatos — onboarding, ajustes, estados vacíos — deberían quedarse en cómodo: sus lectores todavía necesitan la enseñanza.

¿Qué cuestan los modos de densidad?

Superficie de QA, multiplicada. Cada pantalla detrás de un interruptor de densidad existe ahora dos veces — tres con el espacioso — y cada variante puede fallar por su cuenta: texto que se trunca solo en compacto, insignias y anillos de foco que caben en una fila de 56px y se recortan en una de 46px, objetivos táctiles que superan cómodamente la guía de tamaño mínimo en un modo y a duras penas en otro. La reasignación en sí es unas pocas líneas; verificar sus consecuencias es un impuesto permanente sobre cada pantalla futura. La guía de densidad de Material Design — un tratamiento publicado del patrón — trata en consecuencia dónde aplica la densidad, y dónde no debería, con la misma seriedad que cómo comprimir.

De ahí la regla de alcance del principio: añade el modo cuando un segmento demostrablemente lo necesita, en las superficies donde lo necesitan — no como una característica por defecto de cada sistema nuevo.

Prueba la reasignación compacta

El mecanismo es más fácil de juzgar en pares vecinos: donde el cómodo lee 16, el compacto lee 11; donde lee 23, el compacto lee 16. Lee el mismo menú un paso más abajo y decide cuáles de tus propias pantallas sobrevivirían al cambio — abre la asignación compacta en Scale Composer.