Diseño de UI web de Readiz
Los usuarios odian que los botones y las descripciones ocupen la pantalla. Crea una jerarquía clara y controles pequeños para que el contenido real se lea y explore de un vistazo. Aplica este estándar tanto a nuevas interfaces web como a modificaciones de las existentes. Si el usuario especifica requisitos de marca, plataforma o accesibilidad, síguelos primero.
Densidad básica
Los siguientes son valores iniciales para herramientas web sin especificación de diseño adicional. En lugar de comprimir el texto con fuerza, reduce los márgenes y los controles innecesarios.
| Elemento | Valor por defecto |
|---|---|
| Botones generales, filtros, selects | Alto 28px, texto 12px, padding horizontal 6–8px |
| Botones de icono | 26×26px, icono 14–16px |
| Controles secundarios / dentro de tablas | 24–26px |
| Espacio entre botones | 4–6px |
| Relleno interno de tarjetas | 12–16px |
| Celdas de tabla | Vertical 5–7px, horizontal 6–10px |
| Cuerpo de texto | 13–14px, altura de línea 1.5–1.7 |
- Los botones cortos se ajustan al ancho de su contenido. No crees botones grandes o anchos solo porque sean la acción principal.
- Mantén el tamaño visual compacto también en móviles. No uses una media query común para agrandar todos los botones a 38–48px. Si se detectan errores táctiles reales, ajusta el espaciado y el área de impacto de ese control específico, y verifica que no se superponga con controles adyacentes. Sigue los estándares de plataforma especificados explícitamente.
- Las filas largas de opciones múltiples o listas se estiran naturalmente según la longitud del texto. No recortes el contenido legible fijando la altura o usando puntos suspensivos. Si puedes mostrar el título actual por separado (por ejemplo, en una navegación numérica), separa el control de navegación pequeño del título del contenido.
- Prefiere los tonos azules como color de acento predeterminado. Usa fondos claros y tranquilos, bordes finos y esquinas pequeñas. Mantén la marca existente especificada y la diferenciación semántica de colores en los gráficos.
Composición de pantalla
- Coloca gráficos, tablas y contenido clave reales en el área visible inicial. No desplaces el área de trabajo con grandes títulos introductorios, subtítulos largos o insignias redundantes.
- Usa tablas para cifras repetitivas y comparaciones, listas ordenadas o pestañas cortas para la exploración de elementos, y barras de herramientas pequeñas para la manipulación de gráficos. No enumeres botones individuales como si fueran grandes tarjetas.
- Para acciones familiares, utiliza el sistema SVG/iconos existente del proyecto. Proporciona nombres accesibles y tooltips/etiquetas cortas necesarias para los iconos. No distingas selección, éxito o error solo con color.
- Mantén el resumen clave y los controles de uso frecuente visibles; coloca descripciones detalladas, fuentes, instrucciones de uso y criterios de guardado dentro de ⓘ o en un
<details>plegado por defecto. Muestra errores, fallos de guardado, resultados de ejecución y condiciones de decisión importantes solo cuando sea necesario. - No repitas el mismo estado en título, tarjeta, insignia y descripción. No obligues al usuario a leer textos largos para encontrar una función.
- Alinea el espaciado y la alineación de botones de acción, tablas y gráficos. La tabla de contenido en escritorio debe ser estrecha; en móvil, un diseño plegable que muestre la ubicación actual es adecuado.
Verifica en pantalla real
- Antes de modificar, inspecciona la altura computada, el padding, la altura de línea y la posición del primer contenido de los botones reales. No asumas que algo se ha vuelto más pequeño solo por ver una declaración CSS cambiada.
- Modifica primero las variantes y tokens de componentes existentes. Verifica que CSS común, alta especificidad, anulaciones móviles y estilos dinámicos no vuelvan a aumentar el tamaño. En lugar de acumular reglas de anulación, limpia la causa de ese tamaño.
- Pruébalo en PC, tablet y móvil representativo de 360–390 px. Verifica que los controles generales mantengan los valores por defecto, que el texto largo no se trunque, que no haya desbordamiento horizontal del documento y que no se superpongan herramientas/gráficos.
- Verifica el despliegue, la selección, el foco del teclado, el toque y las operaciones de guardar/restaurar necesarias. No cambies datos existentes, claves de almacenamiento o coordenadas de gráficos debido a cambios de diseño.
- Implementa y verifica los resultados dentro del alcance solicitado; para trabajos que incluyan despliegue, verifica también la pantalla de producción real. Esta skill en sí misma no agrega permisos de publicación o envío de mensajes.