Ingeniería UI/UX y Sistemas Modernos de Diseño de Producto
Una guía operativa rigurosa e institucional para la ingeniería de interfaces de usuario, la arquitectura UX, los tokens de diseño, las bibliotecas de componentes y las transformaciones estéticas de productos.
1. Principios Operativos Centrales
- Densidad de Información con Espacio para Respirar: Los diseños de alta densidad (Linear, Bloomberg, Stripe, TradingView) presentan la máxima señal por píxel de viewport sin saturación. Esto se logra mediante contraste deliberado, escalas tipográficas compactas, bordes sutiles de 1px y cuadrículas de espaciado consistentes (4px / 8px).
- Pautas de Diseño de Alta Artesanía: Rechaza los valores predeterminados genéricos y sin refinar:
- ❌ Sin degradados púrpura/índigo sobresaturados.
- ❌ Sin texto gris sobre gris ilegible con bajo contraste (
text-gray-400sobre blanco otext-zinc-600sobre negro). - ❌ Sin íconos emoji en lugar de SVG vectoriales nítidos (Lucide / Radix).
- ❌ Sin tarjetas flotantes vacías y gigantes con radios masivos (
rounded-3xl) y texto pequeño desalineado. - ❌ Sin estados de enfoque de teclado faltantes o interacciones solo con mouse.
- ✔️ Usa paletas de colores con propósito, bordes sutiles de 1px (
border-slate-800), figuras tabulares monoespaciadas (font-mono tabular-nums), micro-insignias nítidas y relaciones de contraste accesibles ($>4.5:1$).
- Semántica de Color Específica del Dominio:
- En aplicaciones financieras / cuantitativas, el color tiene un significado semántico de alto riesgo.
- Verde (
#10B981/#22C55E): Alfa positivo, rentabilidad, señales de compra, crecimiento alcista. - Rojo (
#EF4444/#F43F5E): Pérdidas, reducciones, riesgos forenses, señales de venta, flujo de caja negativo. - Ámbar / Amarillo (
#F59E0B): Precaución, requiere clasificación, régimen neutral, banderas de advertencia. - Azul / Cian (
#3B82F6/#06B6D4): Estados informativos, anillos de enfoque, botones de acción primarios, tendencias neutrales. - Accesibilidad para daltonismo: Nunca te bases solo en el color. Acompaña los indicadores de color con glifos direccionales (
▲,▼,—), insignias de estado o tooltips.
- Rendimiento Percibido Predecible:
- Cero cambios de diseño (CLS < 0.1): Reserva espacio esqueleto para gráficos y tablas de carga diferida.
- Retroalimentación optimista: Estados activos instantáneos (<50ms de retroalimentación) en clics de botones y cambios de filtro.
- Esqueletos en lugar de spinners de página completa: Mantén el diseño de la página y el chrome de navegación mientras los datos se hidratan.
2. Arquitectura de Tokens de Diseño
Un sistema de diseño robusto está estructurado en tres niveles explícitos de tokens:
graph TD
Primitive["1. Tokens Primitivos<br>(Valores brutos: slate-900, emerald-500, font-size-14, 8px)"]
Semantic["2. Tokens Semánticos<br>(Intención: surface-background, text-primary, border-subtle, status-success)"]
Component["3. Tokens de Componente<br>(Alcance: table-header-bg, badge-pill-padding, chart-grid-stroke)"]
Primitive --> Semantic --> Component
2.1 Matriz de Tokens de Color (Temas Oscuro y Claro Institucionales)
| Token Semántico | Valor Modo Oscuro | Valor Modo Claro | Uso |
|---|---|---|---|
bg-app | #0B0F17 (Obsidiana Profunda) | #F8FAFC (Tinte Pizarra) | Fondo del viewport raíz |
bg-surface | #111827 (Rica Zinc/Pizarra) | #FFFFFF (Blanco Puro) | Tarjetas, paneles, diálogos modales |
bg-surface-hover | #1E293B (Azul-Gris Apagado) | #F1F5F9 (Pizarra Claro) | Hover de fila de tabla, hover de elemento de menú |
border-subtle | #1E293B (borde limpio de 1px) | #E2E8F0 | Bordes de tarjeta, divisores de tabla |
border-accent | #334155 | #CBD5E1 | Entradas enfocadas, bordes de pestaña activa |
text-primary | #F8FAFC (Alto contraste, 16:1) | #0F172A | Encabezados primarios, valores de datos de tabla |
text-secondary | #94A3B8 (Pizarra 400, 7:1) | #475569 | Etiquetas de métrica, descripciones, marcas de tiempo |
text-muted | #64748B (Pizarra 500, 4.5:1) | #64748B | Pies de página, estados deshabilitados, sugerencias de atajos |
accent-primary | #2563EB (Azul Real) | #2563EB | Botones CTA primarios, pestañas de radio activas |
status-bullish | #10B981 (Esmeralda) | #059669 | Ganancias, convicción de compra, CAGR positiva |
status-bearish | #EF4444 (Rosa/Rojo) | #DC2626 | Reducciones, descalificaciones, deuda alta |
status-caution | #F59E0B (Ámbar) | #D97706 | Datos obsoletos, necesita revisión, banderas moderadas |
2.2 Escala Tipográfica y Formato Numérico
/* Esencial para terminales financieros y tablas de alta densidad */
.tabular-numbers {
font-family: var(--font-mono), monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
- Encabezados (Display/Título): Semi-negrita / Negrita (600/700), tracking apretado (
letter-spacing: -0.03em), altura de línea 1.2. - Cuerpo y Controles: 13px–14px (
text-sm), mediana (500) para etiquetas interactivas, regular (400) para texto. - Microetiquetas e Insignias: 11px–12px (
text-xs), negrita/seminegrita (600/700), mayúsculas contracking-wider. - Números y Métricas: Fuente monoespaciada tabular (
JetBrains Mono,Roboto MonooIntercontabular-nums), alineados a la derecha en todas las tablas.
3. Terminal Financiero de Alta Densidad y Experiencia de Usuario de Tablas
Las tablas de datos son el motor central de los flujos de trabajo analíticos y financieros. Sigue estas reglas no negociables:
- Reglas de Alineación:
- Texto, símbolos y nombres de empresas: Alineados a la izquierda.
- Métricas numéricas (Precio, P/E, ROCE, CAGR, Puntuaciones, Fechas): Alineados a la derecha.
- Insignias de estado, banderas procesables, íconos: Alineados al centro.
- Encabezados de Columna Fija y Multifila:
- La fila de encabezado debe fijarse durante el desplazamiento vertical (
sticky top-0 bg-surface z-10). - Columna de identificador fijo (Nombre de empresa / Símbolo) en desplazamiento horizontal para móviles y tablas ultra anchas.
- La fila de encabezado debe fijarse durante el desplazamiento vertical (
- Estructura Visual:
- Altura de fila: Compacta (36px–40px) o estándar (44px) con rayas de cebra sutiles o bordes nítidos de 1px (
border-b border-slate-800/60). - Resaltado instantáneo al pasar el ratón por la fila (
hover:bg-slate-800/40 cursor-pointer). - Insignias de píldora en línea directas (
bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded text-xs font-semibold).
- Altura de fila: Compacta (36px–40px) o estándar (44px) con rayas de cebra sutiles o bordes nítidos de 1px (
- Controles Interactivos:
- Flechas indicadoras de ordenación (
▲ascendente activo,▼descendente activo,⇅ordenable atenuado). - Búsqueda instantánea con botón de borrar (
X), chips de recuento de filtros activos (Filtros (3)) y controles de paginación con recuento total (Mostrando 1–50 de 1.060).
- Flechas indicadoras de ordenación (
4. Arquitectura de Usabilidad e Interacción (Heurísticas de Nielsen Norman)
flowchart LR
A["Reconocimiento sobre Recuerdo<br>(Migas de pan, Encabezados fijos, Filtros guardados)"] --> B["Control y Libertad del Usuario<br>(Borrado rápido, Esc para cerrar, Deshacer)"]
B --> C["Visibilidad del Estado del Sistema<br>(UI optimista, Esqueletos de carga, Marcas de tiempo)"]
C --> D["Eficiencia de Uso<br>(Atajos de teclado, Paleta de comandos Cmd+K)"]
- Visibilidad del Estado del Sistema:
- Muestra siempre "A partir de [Fecha/Hora del Mercado]" en los datos financieros para que el usuario sepa si el mercado está en vivo o cerrado.
- Cuando las solicitudes tomen más de 100 ms, muestra esqueletos localizados en lugar de pantallas en blanco o spinners bloqueantes.
- Control y Libertad del Usuario:
- Las barras de filtro deben tener un botón de "Restablecer todos los filtros" con un solo clic cuando cualquier filtro no predeterminado esté activo.
- Los modales y paneles laterales deben cerrarse con la tecla
Escapey al hacer clic en el fondo.
- Consistencia y Jerarquía de Componentes:
- Acción Primaria: Relleno sólido de alto contraste (
bg-blue-600 hover:bg-blue-500 text-white). Exactamente un CTA primario por vista. - Acción Secundaria: Relleno sutil/con borde (
bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700). - Acción Fantasma: Transparente (
hover:bg-slate-800 text-slate-400 hover:text-slate-100). - Acción Destructiva: Advertencia teñida de rojo (
bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30).
- Acción Primaria: Relleno sólido de alto contraste (
- Accesibilidad (WCAG 2.2 AA / AAA):
- Relación de contraste texto-fondo $≥ 4.5:1$ para texto de cuerpo normal, $≥ 3:1$ para texto grande y componentes de interfaz de usuario.
- Todos los elementos interactivos deben tener anillos de enfoque
:focus-visiblevisibles (ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-900). - Objetivos táctiles mínimos cliqueables: $44 \times 44$px en dispositivos táctiles.
5. Ingeniería y Verificación de Contraste de Color WCAG 2.2 AA / AAA
El contraste no es una preferencia estética; es una especificación de ingeniería matemática. El bajo contraste causa fatiga cognitiva severa, fallos de legibilidad bajo deslumbramiento o baja luminosidad, y violaciones de cumplimiento de accesibilidad.
5.1 Especificación de la Relación de Contraste Matemática
La luminancia relativa $L$ de cualquier color sRGB se calcula utilizando la fórmula CIE: $$L = 0.2126 R_s + 0.7152 G_s + 0.0722 B_s$$ donde cada canal de color $C \in {R, G, B}$ se linealiza a partir de sRGB de 8 bits ($C_{\text{srgb}} = C_{8\text{bit}} / 255$): $$C_s = \begin{cases} \frac{C_{\text{srgb}}}{12.92} & \text{si } C_{\text{srgb}} \le 0.04045 \ \left(\frac{C_{\text{srgb}} + 0.055}{1.055}\right)^{2.4} & \text{si } C_{\text{srgb}} > 0.04045 \end{cases}$$
La relación de contraste entre un color más claro ($L_1$) y un color más oscuro ($L_2$) es: $$\text{Relación de Contraste} = \frac{L_1 + 0.05}{L_2 + 0.05} : 1$$
5.2 Umbrales de Cumplimiento Estrictos
| Categoría de Elemento | Mínimo WCAG 2.2 AA | Objetivo WCAG 2.2 AAA | Estándar de Verificación |
|---|---|---|---|
| Texto de Cuerpo Normal (< 18pt / 24px regular, < 14pt / 18.5px negrita) | $\ge 4.5:1$ | $\ge 7.0:1$ | Datos primarios, etiquetas, descripciones, filas de tabla, etiquetas de botón |
| Texto Grande y Encabezados ($\ge 18\text{pt}$ / $24\text{px}$, o $\ge 14\text{pt}$ negrita) | $\ge 3.0:1$ | $\ge 4.5:1$ | Títulos de pantalla, encabezados de sección, números métricos destacados |
| Componentes de Interfaz y Objetos Gráficos (WCAG 1.4.11) | $\ge 3.0:1$ | $\ge 4.5:1$ | Bordes de entrada, alternadores, límites de pestañas segmentadas, contornos de chip activo, anillos de enfoque |
| Uso del Color (WCAG 1.4.1) | Se requiere indicador no cromático | Se requiere codificación dual | Nunca transmitas selección o estado solo por color; acompáñalo con marcas de verificación, íconos o peso de texto |
5.3 Las 5 Trampas de Contraste Comunes y Soluciones Sistemáticas
1. La Mezcla de Pestañas Segmentadas en Modo Oscuro
- El Defecto: Una pestaña activa configurada con
--card: #111827dentro de un contenedor configurado con--tab-bg: #0F172A. La relación de contraste es 1.02:1 (un delta RGB de 2 unidades). La pestaña seleccionada se mezcla completamente con el fondo del contenedor, lo que hace imposible que el usuario determine la selección activa. - La Solución: Eleva el fondo de la pestaña activa a
--card-elevated: #1E293B, agrega un borde semántico activo de 1px (1px solid var(--accent)/#10B981), un anillo de brillo sutil (box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25)) y tiñe el ícono SVG de la pestaña activa para que coincida.
2. El Fallo de Contraste de Texto Atenuado en Modo Claro
- El Defecto: Texto secundario/atenuado predeterminado que usa Pizarra-400 (
#94A3B8) sobre blanco (#FFFFFF) o papel claro (#F8FAFC). La relación de contraste es 2.57:1, lo que falla gravemente en WCAG SC 1.4.3 ($\ge 4.5:1$). - La Solución: Oscurece el texto secundario en modo claro a al menos Pizarra-500 (
#64748B), lo que produce 4.77:1 sobre#FFFFFFy 4.54:1 sobre#F8FAFC.
3. El Fallo de la Insignia de Texto de Advertencia Ámbar
- El Defecto: Usar ámbar brillante (
#D97706/ Ámbar-600) sobre blanco puro para píldoras de estado. La relación de contraste es 3.22:1, lo que falla en el umbral de texto de 4.5:1. - La Solución: Oscurece a Ámbar-700 (
#B45309) para insignias de texto en modo claro, logrando 4.82:1 mientras se mantiene la calidez semántica.
4. Límites de Entrada y Control Invisibles en Modo Oscuro (WCAG 1.4.11)
- El Defecto: Bordes sutiles de opacidad blanca del 8%–12% (
rgba(255, 255, 255, 0.08)) sobre superficies de pizarra oscura (#111827/#0B0F17) tienen una relación de contraste de solo 1.2:1–1.4:1, violando el requisito de límite no textual de 3:1. - La Solución: Establece los bordes de entrada predeterminados en modo oscuro a al menos 18% de opacidad blanca (
rgba(255, 255, 255, 0.18)/#334155) y los estados de hover al 32% (rgba(255, 255, 255, 0.32)/#475569).
5. La Trampa de FilterChip en Modo Oscuro de Android Material 3
- El Defecto: En Material 3, el
FilterChipseleccionado predeterminado usasecondaryContainer(#37474F) contra la superficie oscura (#14181E), produciendo solo 1.83:1 de contraste. Sin un contorno o glifo, el chip falla tanto en SC 1.4.11 como en SC 1.4.1. - La Solución: Especifica explícitamente:
selectedBorderColor = MaterialTheme.colorScheme.primary(que produce un contraste de 9.88:1).selectedBorderWidth = 1.5.dp.leadingIcon = if (selected) { { Icon(Icons.Filled.Done, ...) } } else nullpara que la selección sea visible independientemente de la percepción del color.
6. Manual de Rediseño UI/UX (Ejecución por Fases)
Cuando se te asigne la tarea de rehacer o modernizar la UI/UX de una aplicación existente, sigue esta estrategia de ejecución de 4 pasos:
Paso 1: Fundación del Sistema de Diseño y Extracción de Tokens
- Establece la paleta de colores, la escala tipográfica, las variables de espaciado y la jerarquía del radio de borde en CSS/Tailwind (
globals.css/tailwind.config.js). - Introduce tokens de modo oscuro institucionales y clases de color semánticas.
Paso 2: Modernización de Primitivas de Componentes
- Refactoriza las primitivas de interfaz de usuario reutilizables centrales:
Button: Primario, secundario, fantasma, destructivo, con spinners de carga.Badge/Tag: Píldoras semánticas de color para estado, niveles e impulso.Card/Panel: Bordes limpios, esquinas redondeadas (rounded-lgorounded-xl), fondos sutiles.DataTable: Ordenación de encabezado, números alineados a la derecha, encabezado fijo, filas con hover.Modal/Drawer: Desenfoque de fondo, trampa de enfoque, animaciones de entrada suaves.Tooltip: Explicaciones informativas para métricas complejas (por ejemplo, EV/EBITDA, puntuación CANSLIM).
Paso 3: Revisión de Diseño y Navegación
- Moderniza la barra de navegación superior / barra lateral con indicadores de ruta activa claros, barra de búsqueda de empresa, indicador de estado del sistema (por ejemplo, fecha de la sesión de mercado, salud de la API).
- Elimina los tirones de diseño y los saltos de página en las transiciones de ruta.
Paso 4: Modernización de Páginas de Alto Valor
- Renueva las vistas críticas orientadas al usuario:
- Panel: Azulejos de resumen ejecutivo, pulso del mercado, principales ganadores/perdedores, mapas de calor de régimen.
- Convicción / Criba: Tabla de alta densidad con búsqueda rápida, columnas ordenables, píldoras de métrica y panel lateral de detalles rápido.
- Espacio de trabajo / Detalle de la empresa: Gráficos interactivos con píldoras de marco temporal (1M, 6M, 1A, 5A, YTD...), tabla de estados financieros con formato de alta densidad, diseño de tríptico (perfil, gráficos, tabla de pares).
7. Guía de Estilo Visual y Animación
7.1 Sistema de Sombras y Elevación
| Nivel de Elevación | Valor de Sombra | Uso |
|---|---|---|
| 0 (Predeterminado) | box-shadow: none | Superficies planas (fondos, paneles de tabla) |
| 1 (Bajo) | 0 1px 2px 0 rgb(0 0 0 / 0.05) | Botones pasivos, entradas de formulario, chips |
| 2 (Medio) | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | Tarjetas desplegables, menús de panel lateral |
| 3 (Alto) | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) | Diálogos modales, paneles de notificaciones |
7.2 Animación y Microinteracciones
| Interacción | Duración | Curva de Easing | Efecto |
|---|---|---|---|
| Hover (botón, enlace, chip) | 150ms | cubic-bezier(0.4, 0, 0.2, 1) | Transición de fondo y borde |
| Enfoque (entrada, botón) | 100ms | cubic-bezier(0.4, 0, 0.2, 1) | Aparece anillo de enfoque |
| Apertura de panel lateral / modal | 200ms | cubic-bezier(0.4, 0, 0.2, 1) | Deslizar / fundido con desenfoque de fondo |
| Cierre de panel lateral / modal | 150ms | cubic-bezier(0.4, 0, 0.2, 1) | Deslizar / fundido de salida |
| Cambio de contenido (filtro, pestaña) | 200ms | cubic-bezier(0.4, 0, 0.2, 1) | Fundido cruzado o deslizamiento |
| Tooltip | Entrada 100ms, Salida 150ms | cubic-bezier(0.4, 0, 0.2, 1) | Fundido y ligero desplazamiento hacia arriba |
8. Referencia de API de Componentes (Ejemplo con Tailwind / React)
// Componente de Botón
interface ButtonProps {
variant: 'primary' | 'secondary' | 'ghost' | 'destructive';
size: 'sm' | 'md' | 'lg';
isLoading?: boolean;
disabled?: boolean;
children: React.ReactNode;
onClick?: () => void;
}
const variantClasses = {
primary: 'bg-blue-600 hover:bg-blue-500 text-white font-medium',
secondary: 'bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700',
ghost: 'hover:bg-slate-800 text-slate-400 hover:text-slate-100',
destructive: 'bg-rose-600/10 hover:bg-rose-600/20 text-rose-400 border border-rose-500/30',
};
const sizeClasses = {
sm: 'px-3 py-1.5 text-xs',
md: 'px-4 py-2 text-sm',
lg: 'px-6 py-3 text-base',
};
// Componente de Insignia
interface BadgeProps {
variant: 'bullish' | 'bearish' | 'caution' | 'neutral' | 'info';
children: React.ReactNode;
}
const badgeStyles = {
bullish: 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20',
bearish: 'bg-rose-500/10 text-rose-400 border border-rose-500/20',
caution: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
neutral: 'bg-slate-500/10 text-slate-400 border border-slate-500/20',
info: 'bg-blue-500/10 text-blue-400 border border-blue-500/20',
};
Referencia oficial: Principios del sistema de diseño, pautas de accesibilidad WCAG y heurísticas de usabilidad de Nielsen Norman Group.