Diseño de Movimiento Artesanal
El buen movimiento es invisible: dirige la atención y se aparta del camino.
Duraciones (a 30 fps)
| Movimiento | Fotogramas | Segundos |
|---|---|---|
| Micro feedback (presión de botón, resaltado) | 4 a 8 | 0.15 a 0.25 |
| Entrada o salida de elemento | 10 a 18 | 0.35 a 0.6 |
| Transición de escena | 12 a 20 | 0.4 a 0.7 |
| Movimiento grande a través de la pantalla | 20 a 30 | 0.7 a 1.0 |
| Escalonamiento entre elementos de lista | 3 a 6 | 0.1 a 0.2 |
Las salidas son más rápidas que las entradas (aproximadamente el 70 por ciento del tiempo de entrada). Más de un segundo se siente lento a menos que sea una revelación deliberada.
Easing
Elige el easing según lo que hace el objeto:
- Entrando al cuadro: ease-out (inicio rápido, aterrizaje suave).
- Saliendo del cuadro: ease-in (inicio lento, acelera al salir).
- Moviéndose entre posiciones en pantalla: ease-in-out.
- Continuo (bucles, barras de progreso): lineal.
Nunca uses lineal simple para movimiento similar a UI; se lee como robótico.
Resortes
Usa resortes críticamente amortiguados o ligeramente subamortiguados para un asentamiento natural. En Remotion, damping: 200 es suave sin rebote; amortiguación más baja (10 a 20) agrega sobreimpulso, apropiado solo para contenido lúdico. Mantén el sobreimpulso por debajo de aproximadamente el 10 por ciento.
Tiempo de lectura para texto
segundos_en_pantalla = max(1.5, palabras * 0.35 + 0.5)
Un título de 6 palabras necesita aproximadamente 2.6 segundos. Si la voz en off lee el texto, muéstralo ligeramente antes de que la voz lo diga.
Ritmo
- Elige un compás (por ejemplo, 0.5 s o un compás de la música) y alinea los cortes y las entradas a múltiplos de este. El movimiento desalineado se siente descuidado incluso si los espectadores no pueden decir por qué.
- Varía la duración de las escenas; las duraciones idénticas se sienten mecánicas.
- Corta en la acción: comienza la siguiente toma mientras el movimiento de la anterior todavía está ocurriendo.
Jerarquía
- Un elemento focal a la vez. Atenúa o desenfoca lo que no es el sujeto.
- Texto del cuerpo al menos 36 px en 1080p; títulos de 72 px o más. Los espectadores en teléfono necesitan más grande.
- Relación de contraste de al menos 4.5:1 para texto sobre fondos; agrega un velo o contorno sobre el video.
- Márgenes: mantén el contenido dentro del 90 por ciento central (área segura), 80 por ciento para video vertical.
Transiciones con una causa
Usa una transición solo cuando diga algo: un barrido para un cambio de tiempo, un empuje para el siguiente paso, un fundido cruzado para un cambio de tema suave. De lo contrario, usa un corte directo. No mezcles más de dos estilos de transición en un video.
Qué hace que un video parezca generado
Evita estos valores predeterminados a menos que se elijan a propósito:
- Todo aparece desde opacidad 0 con la misma duración.
- Texto centrado sobre un degradado oscuro con manchas flotantes.
- Un degradado púrpura-azul para cada marca.
- Cada elemento rebotando con un resorte.
- Duración de escena idéntica y la misma transición entre todas las escenas.
- Emoji genérico usado como iconos.
- Texto que aparece todo de una vez, mucho antes de que se hable.
Correcciones: usa la paleta de la marca y activos reales, varía el movimiento según el rol, escala significativamente y deja que algunas escenas simplemente corten.
Lista de verificación de revisión
- ¿Puedes pausar cualquier fotograma y ver un sujeto claro?
- ¿Algo se mueve sin una razón?
- ¿El texto es legible al tamaño de un teléfono?
- ¿Los últimos 2 segundos se mantienen quietos el tiempo suficiente para leer el llamado a la acción?