make-interfaces-feel-better

Haz que las Interfaces se Sientan Mejor

Usa esta habilidad para los pequeños detalles de diseño-ingeniería que se acumulan para lograr una interfaz más pulida.

Fuente: rescatado del PR #1659 de la comunidad por linus707.

Cuándo Usarlo

• El usuario dice que la interfaz se siente rara, plana, genérica, apretada, entrecortada o inacabada.
• Estás construyendo controles, tarjetas, listas, paneles, navegación, formularios o barras de herramientas.
• Un componente necesita estados de hover, activo, foco, entrada, salida, carga o vacío.
• Una revisión de frontend necesita recomendaciones específicas de antes/después.

Principios Centrales

Radio Concéntrico

Para superficies redondeadas anidadas cercanas:

radio exterior = radio interior + padding

Si el padding es grande, trata las capas como superficies separadas en lugar de forzar la fórmula. El objetivo es la coherencia óptica, no la adoración a la fórmula.

Alineación Óptica

El centrado geométrico no siempre es el centrado visual. Los botones de icono, los triángulos de reproducción, las flechas, las estrellas y los iconos asimétricos a menudo necesitan un pequeño desplazamiento. Arregla el SVG cuando sea posible; de lo contrario, ajusta con un cambio de margen o padding a nivel de píxel.

Sombras y Bordes

Usa bordes para la separación y anillos de enfoque. Usa sombras en capas cuando una tarjeta, botón, menú desplegable o popover necesite profundidad. Las sombras deben ser transparentes y lo suficientemente sutiles para funcionar en diferentes fondos.

Ajuste de Texto

• Usa text-wrap: balance en encabezados y títulos cortos.
• Usa text-wrap: pretty en texto de cuerpo corto a mediano, pies de foto, descripciones y elementos de lista.
• Evita ambos en prosa larga, código y contenido preformateado.
• Usa font-variant-numeric: tabular-nums para contadores, temporizadores, precios, tablas y otros números que se actualizan.

Suavizado de Fuentes

En macOS, aplica el suavizado de fuentes antialiased en el diseño raíz cuando el proyecto no lo haga ya:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Contornos de Imágenes

Las imágenes a menudo necesitan un contorno interior sutil para que sus bordes no se difuminen con la superficie.

img {
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

@media (prefers-color-scheme: dark) {
  img {
    outline-color: rgba(255, 255, 255, 0.1);
  }
}

Usa contornos alfa neutros negros o blancos. No tintes los contornos de las imágenes con la paleta de la marca.

Animación

Usa transiciones CSS para cambios de estado interactivos porque pueden redirigirse cuando el usuario cambia de intención a mitad de la animación. Reserva los keyframes para entradas únicas escenificadas o secuencias de carga.

Buenos valores predeterminados de animación:

• Entrada: combina opacidad, un pequeño translateY y, opcionalmente, desenfoque.
• Salida: más corta y más silenciosa que la entrada, generalmente 150ms.
• Presión: scale(0.96) para botones táctiles, con una forma de desactivarlo cuando el movimiento distrae.
• Intercambio de iconos: fundido cruzado con opacidad, escala y desenfoque en lugar de alternar la visibilidad instantáneamente.

Alcance de la Transición

Nunca uses transition: all. Especifica las propiedades cambiadas:

.button {
  transition-property: transform, background-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

Usa will-change solo para el tartamudeo del primer fotograma en propiedades compatibles con el compositor como transform, opacity y filter. Nunca uses will-change: all.

Áreas de Contacto

Los controles interactivos deben tener un área de contacto de al menos 40x40px, idealmente 44x44px donde el diseño lo permita. Expande con un pseudo-elemento cuando el icono visible sea más pequeño, pero no permitas que las áreas de contacto expandidas se superpongan.

Revisión de Salida

Al revisar un pase de pulido de la interfaz de usuario, informa los cambios concretos en filas de antes/después:

Principio	Antes	Después
Radio concéntrico	Mismo radio en padre e hijo	El radio del padre tiene en cuenta el padding
Números tabulares	El contador se desplaza al cambiar los dígitos	El contador usa tabular-nums
Alcance de la transición	transition: all	Propiedades de transición explícitas

Incluye las rutas de archivo y las propiedades cuando no sean obvias a partir de los fragmentos. Omite los principios que verificaste pero no cambiaste.

Lista de Verificación

• Los elementos redondeados anidados son ópticamente coherentes.
• Los iconos están centrados visualmente.
• Los botones, tarjetas y popovers usan bordes o sombras por la razón correcta.
• Los encabezados y el texto corto evitan ajustes incómodos.
• Los números dinámicos usan numerales tabulares.
• Las imágenes tienen contornos neutros donde sea necesario.
• Las animaciones de entrada y salida están divididas, son sutiles e interrumpibles cuando corresponda.
• Los botones tienen estados activos táctiles sin movimiento exagerado.
• transition: all y will-change: all están ausentes.
• Los controles pequeños aún tienen áreas de contacto utilizables.