La relación entre la animación de Disney y los efectos dinámicos de la interfaz
1) Apretar y estirar
Apretar y estirar se refieren a la deformación de objetos. Por ejemplo, si lanzas una pelota, ésta se apretará cuando toque el suelo y se estirará cuando rebote. Esta técnica aparece a menudo en las animaciones de Disney, como el aterrizaje/salto de personajes, combinada con técnicas exageradas, para hacerlos más poderosos y vívidos. En la interfaz persona-computadora, el contenido o los controles de la interfaz son relativamente rigurosos, mecánicos y de vitalidad débil. Apretar y estirar adecuadamente puede aumentar el interés y la viveza.
2) Prepárate para la acción
El diseño de acción de Disney a menudo incluye acciones inversas, que se utilizan para mejorar la tensión de las acciones directas y permitir que la audiencia prediga las acciones del personaje. Como se muestra en la imagen a continuación, los brazos del Pato Donald se mueven hacia atrás, lo que permite a las personas darse cuenta rápidamente de que está a punto de comenzar. La anticipación es un principio importante en el diseño de interfaces hombre-computadora. Cumple con las expectativas de los usuarios en cuanto a cambio de página/operaciones de control/transiciones dinámicas, haciéndolo natural y cómodo. Como se muestra en la figura siguiente, el control deslizante rebota durante su caída. Este detalle enfatiza la inestabilidad del control deslizante y está en línea con la percepción que tiene la gente sobre el paradero de los objetos.
3) Diseño de actuación
La actuación en animación es la actuación de los personajes en cada plano (expresión/representación de acción), y el diseño es la presentación del contenido de cada plano. La posición de los personajes debe organizarse y diseñarse cuidadosamente para evitar demasiados movimientos y cambios triviales al mismo tiempo, lo que hace que el espectador pierda la concentración. Los efectos dinámicos en la interfaz hombre-máquina también deben priorizar y centrar la atención visual del usuario en el presente. Muchos interruptores de efectos dinámicos en Material Design brindan un enfoque visual, por lo que los usuarios pueden encontrar fácilmente áreas que necesitan atención en la interfaz.
4) Método de acción continua y método de acción clave
La animación es una imagen dinámica compuesta por una serie de imágenes continuas, como las comunes 1s/24 fotogramas, lo que significa que es se muestra en 1 s 24 imágenes consecutivas. El método de acción continua es capturar cada fotograma, y el método de acción clave es seleccionar algunos fotogramas clave, y los fotogramas clave se completan interpolando fotogramas. La acción del "Taichi Chuan" se muestra a continuación. La imagen de arriba captura cada movimiento del Tai Chi y la imagen de abajo muestra los movimientos clave del Tai Chi. El método de acción clave se utiliza a menudo en los efectos dinámicos de las interfaces hombre-computadora.
5) Más rápido y más lento.
El movimiento de un objeto tiene un proceso de aceleración y desaceleración. No se detiene repentinamente sino que se acelera instantáneamente. Será más probable que la gente acepte que el movimiento en la animación sigue leyes físicas y que se pueden lograr efectos de movimiento complejos a través de curvas de Bézier en interfaces hombre-computadora.
6) Acciones siguientes y acciones superpuestas
La explicación de Disney sobre los objetos en movimiento es que el movimiento de un objeto es una parte tras otra. Por ejemplo, al darse la vuelta, el cuerpo humano se completa primero y luego la ropa del cuerpo se da la vuelta. Aquí, el movimiento de la ropa es la acción de abajo. Además, existe una superposición entre los objetos y su movimiento. Por ejemplo, cuando un coche adelanta a otro, sus movimientos se superpondrán en el proceso. Seguir y superponer acciones puede crear diferencias de tiempo visuales y aumentar la autenticidad y el interés de la acción.
7) Acciones auxiliares
Las acciones auxiliares en animación se refieren principalmente a acciones delicadas que se adjuntan a la acción principal, como algunas acciones de accesorios de personajes (barba, falda). Cuando el foco principal aparece en la interfaz hombre-máquina, se pueden realizar acciones auxiliares. Por ejemplo, cuando cambia el orden de la lista, otras listas se pueden mover hacia adelante después de que se haya producido la acción principal de arrastrar.
8) Trayectoria del arco
En la vida real, excepto en el caso de la maquinaria, la mayoría de las trayectorias de movimiento son arcos. Esto es aún más cierto en el caso del movimiento en la animación. Por ejemplo, cuando una persona camina, las trayectorias de movimiento de varias partes del cuerpo tienen forma de arco. En las interfaces hombre-computadora, el uso de trayectorias de arco puede hacer que la interfaz parezca más vívida y humanista. Por ejemplo, en MAC OS X, las ventanas minimizadas utilizan curvas, que son vívidas y potentes.
9) Control de tiempo
El tiempo es un elemento importante de la animación. Su función es controlar el ritmo y el peso de los movimientos y movimientos de los personajes.
Como se muestra en la imagen, el ratón se levanta, se frota los ojos, bosteza y se estira. El control del tiempo entre las acciones es diferente, dando al espectador diferentes sensaciones. El tiempo juega el mismo papel en la dinámica de las interfaces hombre-computadora. Como se muestra en la figura siguiente, debido a las diferentes configuraciones de tiempo, el efecto de inversión del control deslizante muestra diferentes ritmos.
10) Exageración
La exageración es una forma de expresión muy importante en la animación. Puede interpretar hábilmente personajes y tramas y estimular las emociones de la audiencia. En la interfaz persona-computadora, el grado de exageración se puede determinar en función de la forma del producto y las emociones psicológicas del usuario.
11) Habilidades hábiles para dibujar a mano
Este es un principio muy básico e importante en la animación y la interfaz persona-computadora. Un buen rendimiento visual es un pavimento importante para una animación fluida y maravillosa. efectos dinámicos.
12) Atractivo
El atractivo es una forma importante de evaluar la expresividad de una imagen. El atractivo de la animación reside en personajes imaginativos, imágenes llenas de personalidad y detalles, etc. El mismo efecto dinámico en la interfaz hombre-máquina puede promover la marca, hacer que los usuarios sientan empatía y crear un encanto único en el producto.
Resumen
Veamos nuevamente los principios de Disney Animation 12 y clasifíquelos a través del análisis anterior. Resulta que la animación es un arte que utiliza diferentes métodos de expresión para expresar las acciones y movimientos de los personajes controlando el tiempo. Entonces, para las interfaces persona-computadora, también podemos pensar en el diseño de efectos dinámicos de la interfaz desde tres perspectivas: movimiento y acción, duración y características de los elementos.
Artículos de referencia
Cinco principios del diseño de experiencia de usuario que aprendí del diseño de animación de Disney
Doce principios de la animación de Disney (más 2 artículos)
Principios del diseño de efectos dinámicos: desde la animación de dibujos animados hasta los efectos dinámicos de la interfaz de usuario
Doce principios de la animación online
Enlace original