Diseño de página
Las clases de tamaño de ventana, la escala de espaciado y cómo se adaptan los diseños entre ellas.
Tanrei describe la anchura disponible con cinco clases. Se refieren a la ventana o al contenedor en el que vive un diseño, no a un tipo de dispositivo: una tableta en vista dividida es compacta, y un teléfono desplegado no lo es.
| Clase | Anchura | Diseño habitual |
|---|---|---|
| Compacta | menos de 600 | Una columna. La navegación va en una barra en la parte inferior o detrás de un menú. |
| Media | 600–839 | Una columna con márgenes más amplios, o dos si el contenido lo permite. Se hace posible un panel de navegación contraído (una columna de iconos). |
| Expandida | 840–1199 | Dos paneles, como lista y detalle. Navegación persistente. |
| Grande | 1200–1599 | Dos o tres paneles. Es la longitud de línea, no la ventana, lo que limita la anchura del texto. |
| Extragrande | 1600 o más | Como la grande, con márgenes generosos; no estires el contenido para llenar el espacio. |
Las anchuras se expresan en unidades independientes de la densidad: píxeles CSS en la web, puntos en las plataformas de Apple, dp en Android y píxeles lógicos en Flutter.
Cuando un diseño cruza un límite, cámbialo de alguna de estas pocas maneras predecibles:
- Revelar un panel que estaba detrás de un toque, como una vista de detalle junto a su lista.
- Dividir una columna en dos.
- Redimensionar los paneles y los márgenes de forma proporcional.
- Recolocar un elemento; por ejemplo, una barra de navegación inferior que pasa a ser un panel de navegación contraído en un lateral.
- Sustituir un componente por su equivalente para pantallas más grandes, como una hoja inferior que se convierte en una hoja lateral.
Tres disposiciones cubren la mayoría de las pantallas: un feed de tarjetas en una cuadrícula adaptable, lista y detalle, y contenido con un panel de apoyo.
Los tokens de espaciado son múltiplos y fracciones de una base de 8 unidades. El número que aparece en el nombre de un token es un porcentaje de esa base, de modo que space100 es 8, space50 es 4 y space200 es 16.
| Token | Valor | Vista previa |
|---|---|---|
--tanrei-sys-space-space0 | 0px | |
--tanrei-sys-space-space25 | 2px | |
--tanrei-sys-space-space50 | 4px | |
--tanrei-sys-space-space75 | 6px | |
--tanrei-sys-space-space100 | 8px | |
--tanrei-sys-space-space125 | 10px | |
--tanrei-sys-space-space150 | 12px | |
--tanrei-sys-space-space175 | 14px | |
--tanrei-sys-space-space200 | 16px | |
--tanrei-sys-space-space250 | 20px | |
--tanrei-sys-space-space300 | 24px | |
--tanrei-sys-space-space400 | 32px | |
--tanrei-sys-space-space450 | 36px | |
--tanrei-sys-space-space500 | 40px | |
--tanrei-sys-space-space600 | 48px | |
--tanrei-sys-space-space700 | 56px | |
--tanrei-sys-space-space800 | 64px | |
--tanrei-sys-space-space900 | 72px |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/space.tokens.json
Usa los pasos pequeños dentro de los componentes, la parte media de la escala entre componentes y los pasos grandes entre secciones. El espaciado entre objetivos táctiles nunca es inferior a space100.
Mantén el texto corrido entre unos 45 y 80 caracteres por línea. En las ventanas grandes y extragrandes, limita la columna de texto y deja que los márgenes o un panel de apoyo absorban el resto.