Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Movimiento Auténtico - Directrices de Diseño de Google - Animación PDF
Movimiento Auténtico - Directrices de Diseño de Google - Animación PDF
Movimiento Auténtico
Al igual que la forma de un objeto indica cómo podría comportarse, viendo un
objeto se mueva demuestra si es ligero, pesado, exible, rígido, pequeña o
grande. En el mundo del diseño de materiales, el movimiento describe las
relaciones espaciales, la funcionalidad y la intención con la belleza y la uidez.
Masa y peso
En el mundo físico, las fuerzas deben ser aplicadas a un objeto con el n de que se mueva. La fuerza y la duración de estas
fuerzas dictan cómo rápidamente un objeto se acelera, desacelera, o cambia de dirección. Incluso las paradas más discordan
y arranques no son instantáneos, porque se necesita tiempo para un objeto de acelerar o reducir la velocidad. En consecuenc
cuando las animaciones tienen arranques bruscos, paradas o cambios de dirección, que aparecerá poco natural.
Movimiento en el diseño del material debe abrazar el comportamiento de la familiaridad y el mundo real de los objetos físicos
sacri car la elegancia, la sencillez y belleza.
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight 1/4
14/11/2015 Movimiento Auténtico - directrices de diseño de Google - Animación
Cuando la aceleración o
desaceleración no es lisa, el
movimiento parece mecánica. Los
cambios bruscos de velocidad o
dirección son discordante y llaman
la atención.
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight 2/4
14/11/2015 Movimiento Auténtico - directrices de diseño de Google - Animación
Entradas y salidas
El cambio de un objeto en la
velocidad a medida que entra o sale
del marco sugiere la distancia que
viaja. Por ejemplo, lo que frena al
salir llama la atención e implica el
Hacer.
objeto se detiene cerca del borde del
Los cambios en la velocidad de la pelota enfatizan su llegada al y salida desde la
marco.
reposo. Atención se minimiza cuando la pelota entra y sale del marco a una veloc
constante.
Durante las transiciones, en
particular, tener en cuenta cuál es la
parte de la entrada o salida deben
recibir la mayor atención.
No lo hagas.
Acelerar al entrar, y ralentizar al salir, puede llamar la atención no deseada y distra
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight 3/4
14/11/2015 Movimiento Auténtico - directrices de diseño de Google - Animación
Cuando se habla de curvas de tiempo, es importante comprender las de niciones que se utilizan. Los términos "aliviar en" y
"aliviar a cabo" se utilizan tanto en la animación tradicional y UX animación. Sin embargo, dependiendo del contexto, estos
términos tienen signi cados opuestos.
Tradicional animación
Técnicas de animación tradicionales expresan una secuencia de movimientos a través de dibujos de poses clave. "La facilida
cabo" en este contexto se re ere al movimiento partiendo de una postura y "facilidad en" se re ere al movimiento de entrar en
pose.
Herramientas de animación modernos expresan estas poses claves con fotogramas clave. "La facilidad de" y "facilidad a cab
este contexto se re eren al movimiento que lleva dentro y fuera de un fotograma clave.
UX animación
En el contexto UX, la exibilización se re ere a la transición entre estados. Como resultado, la "facilidad en" se re ere al
movimiento de entrar en la transición, y "facilidad hacia fuera" se re ere al movimiento de salir de la transición.
Hacer ajustes
No todos los objetos se mueven de la misma manera. Los objetos más ligeros o más pequeños pueden moverse más rápido,
que requieren menos fuerza, y los objetos más grandes o más pesados pueden necesitar más tiempo para acelerar.
Utilice el movimiento curvo y evitar trayectorias espaciales lineales. Identi car las cualidades de movimiento más adecuado a
objeto, y representar a su movimiento en consecuencia. Las curvas representan ese cambio a través del tiempo, para un rang
valores en particular. Encontrar una curva que se ajuste a ese carácter de movimiento que usted está describiendo.
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight 4/4