20 · Aire para ojos cansados
Layout y espaciado
Una base de 4 px, espacio generoso y una sola columna de atención. En pantallas pequeñas, lo importante sube; nada se amontona.
Escala de espacio
4
8
12
16
24
32
48
64
- Base
- 4 px. Todo espacio es múltiplo de 4.
- Uso
- 8 px entre ícono y texto; 16 px entre campos; 24 px entre bloques; 48 px entre secciones.
- Márgenes
- 16 px en teléfono, 24 px en tableta, 32 px en computador.
- Contenido
- Ancho máximo de 1120 px; texto corrido de 65 ch.
Puntos de corte
| Nombre | Desde | Disposición de la agenda |
|---|---|---|
| Teléfono | 0 px | Una columna: la lista del día; el detalle abre a pantalla completa |
| Tableta | 600 px | Lista y detalle en dos columnas |
| Computador | 960 px | Barra lateral, lista y detalle |
| Amplio | 1280 px | Igual, con el contenido centrado |
Esquema de la agenda
Navegación
Hoy
Detalle de la cita
Densidad
La densidad cómoda es la de fábrica. La compacta existe para quien revisa muchas citas, pero ninguna fila baja de 40 px, y el objetivo táctil sigue en 44 px en pantallas táctiles.
- 8:00Paciente Ejemplo AControlConfirmada
- 9:00Paciente Ejemplo BPrimera vezPor confirmar
- 10:30Paciente Ejemplo CSeguimientoConfirmada
- 11:30Paciente Ejemplo DControlCancelada
Sí
- Una acción principal por pantalla, arriba a la derecha o al final del flujo
- Los datos más importantes (hora, nombre) a la izquierda, el estado a la derecha
- Espacio vertical antes que líneas divisorias
- Tarjetas con 16 a 24 px de relleno
No
- Más de siete columnas en una tabla
- Mezclar tres tamaños de texto en una fila
- Pegar botones a menos de 8 px uno del otro
- Fijar alturas: el texto agrandado debe poder crecer