Conceptos:
- Duración y Velocidad
- Tamaño importa
- Móvil
- Tablets y relojes inteligentes
- Movimiento:
- Comprensión y Extensión
- Anticipación
- Puesta en Escena
- Seguimiento y Acción Superpuesta
- Entrada y Salida
- Acción Secundaria
- Tiempo
- Exageración
Intro
Fundamentos de Diseño UI con Figma para Principiantes
Fundamentos del Diseño Digital: Pantallas y Color
Fundamentos de Figma para el Diseño Digital
Historia y Evolución del Diseño Gráfico e Industrial
Heurísticos
Principios Jurísticos en Diseño de Interfaz: Percepción y Comportamiento
Principios Heurísticos de Percepción y Comportamiento
Principios Heurísticos de Relación y Jerarquía en Diseño
Principios Heurísticos de Diseño: Forma y Función (Parte 1)
Principios Heurísticos de Forma: Iconos, Remarcar y Proporción Áurea
Principios Heurísticos de Interacción en Diseño Digital
Básicos de User Interface
Arquitectura de la Información para Productos Digitales
Tipografía en Diseño Digital: Anatomía y Uso en Figma
Vectores y Operaciones Booleanas en Figma
Usabilidad y Eficiencia en Sistemas de Diseño Digital
Organización de Equipos y Archivos en Entornos de Trabajo Remoto
Animación
Principios de Animación Aplicados al Diseño Digital
Prototipado básico con Figma: Interacciones y animaciones
Cierre
Exploración de Portafolios en Figma para Inspiración Creativa
Diseño Digital: Principios, Herramientas y Colaboración en Figma
Live Class
Conceptos Básicos de Diseño de Interfaces (UI)
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Principios de Animación Aplicados al Diseño Digital
16/20Recursos
¿Cuáles son los principios clave de la animación en el diseño digital?
Los principios de animación no solo son fundamentales en el cine o en los dibujos animados, sino que también juegan un rol crucial en el diseño digital contemporáneo. Estos principios mejoran la experiencia del usuario al aportar realismo y dinamismo a las interfaces. Abordaremos conceptos esenciales como comprensión y extensión, anticipación, y puesta en escena, entre otros, para que puedas aplicarlos efectivamente en tus proyectos.
¿Qué rol juegan la compresión y extensión en la animación?
El principio de comprensión y extensión es crucial para ofrecer una apariencia de peso y flexibilidad a los objetos animados. Se puede visualizar fácilmente en objetos como una pelota que rebota, donde al tocar el suelo, la pelota se comprime ligeramente antes de saltar de nuevo. Este concepto también se extiende a construcciones más complejas, como la musculatura en el rostro humano, imitando los matices del movimiento natural y añadiendo una capa de realismo.
¿Cómo impacta la anticipación en la percepción del movimiento?
Anticipación es el término usado para describir el preludio a una acción principal. Su propósito es preparar a la audiencia para lo que va a ocurrir, haciendo que la acción se perciba como más realista. Un excelente ejemplo es un bailarín antes de saltar: primero realiza un pequeño movimiento de flexión en las rodillas, generando esa expectativa en el espectador.
¿Por qué es importante la puesta en escena en el diseño digital?
La puesta en escena se centra en dirigir la atención del usuario a lo más significativo de una pantalla o animación. Esto es especialmente importante en el diseño digital, donde múltiples elementos comparten espacio y pueden abrumar al observador. Las decisiones estratégicas en la puesta en escena aseguran que el foco de atención esté siempre dirigido al evento o mensaje central.
¿Cómo se aplican seguimiento y acción superpuesta con éxito?
Estas técnicas logran que el movimiento parezca mucho más realista, sugiriendo que los objetos o personajes obedecen leyes físicas, como la inercia. No solo se muevan linealmente, sino que incorporan aceleraciones y desaceleraciones. Esto es crucial en los entornos digitales donde se busca replicar la realidad o adaptar sus principios para crear experiencias inmersivas.
¿Qué influencia tiene el principio de entrada y salida?
En el mundo real, cualquier movimiento, ya sea de cuerpos humanos, animales o vehículos, requiere de tiempo para iniciar y frenar. La animación refleja este fenómeno a través del principio de entrada y salida, donde se dibujan más imágenes al inicio y al final de una acción. Esto genera una sensación de movimiento más gradual y, por tanto, más veraz.
¿Cuál es el papel de la acción secundaria en la animación?
La acción secundaria otorga profundidad a la acción principal, enriqueciendo la escena y contribuyendo a un sentido más completo de vivacidad. Imagina una persona caminando, puede hacerlo mientras balancea los brazos, guarda las manos en los bolsillos o incluso silba. Estas acciones secundarias añaden una dimensión adicional a la narrativa visual.
¿Cómo influyen el tiempo y la exageración en la animación?
El concepto de 'tiempo' en animación no se refiere solo a la duración de una acción, sino también a su sincronización en relación con las leyes físicas, haciendo que movimientos y acciones se perciban de manera realista. Por otro lado, la exageración rompe con el realismo extremo, destacando particularidades que llaman la atención y capturan la esencia del movimiento. Un personaje caricaturesco puede mantener un pie estirado cómicamente al correr, aumentando su atractivo y humor.
Implementar estos principios ofrece un atractivo visual en el diseño digital, mejorando la interactividad y el entendimiento de la interfaz por parte del usuario. Te invito a practicar observando animaciones en tus aplicaciones favoritas, identificando estos principios, y experimentando con ellos en tus propios proyectos. La animación es una herramienta poderosa cuando se aplica con intención y conocimiento, ¡anímate a seguir aprendiendo y explorando su potencial!
Aportes 70
Preguntas 2
Ordenar por:
Mis notas de clase:
- Añadir sensación de peso y flexibilidad
- Anticipación para ser cercano al movimiento real
- Puesta en escena: dejar claro qué es lo más importante de una escena.
- Seguimiento y acción: Representar el movimiento cercano a las leyes físicas (inercia, aceleración o desaceleración).
- Entrada y salida: los movimientos necesitan tiempos para entrar o salir.
- Acción secundaria: aportar naturalidad al movimiento por medio de otras acciones que acompañen a la principal.
- Tiempo: velocidad el a acción
- Exageración: los movimientos estrictamente cercanos a la realidad puede parecer estáticos y aburridos. Va a depender de la intensión.
Un ejemplo del principio acción secundaria y exageración es la micro-animación del botón de like en Youtube.
En la app de Nequi en Colombia identifique la entrada y salida: mientras ejecutas una orden, y la app esta procesando, el icono de Nequi que son dos cuadrados superpuestas uno del otro y redondeados en las puntas, se mueven en direcciones contrarias, una como las manecillas del reloj y el otro de manera opuesta, estas acciones dan la sensacion de espera mientras que la accion sucede. y produce una sensacion de distraccion que evita la ansiedad sobre la transaccion financiera.
Mi ejemplo sería el pajarito de Duolingo cuando uno llega a una meta de racha, que brinca y gira y se vuelve dorado y es todo muy épico, jaja. Tendría los principios de anticipación, puesta en escena, entrada y salida y exageración.
Principios de la animación
- Duración y velocidad
- Tamaño importa
- Móvil
- Tablets y relojes inteligentes
- Movimiento
Compresión y extensión: Necesitamos darle una sensación de peso y flexibilidad a los objetos que se dibujan
Anticipación: Hay que preparar la audiencia para una acción para que parezca mucho mas realista
Puesta en escena: Dirigir la atención de una audiencia y dejar claro que es lo más importante en una escena
Seguimiento y acción superpuesta: Ayuda a representar el movimiento en una forma muy realista, no solo incluyendo un movimiento linear sino agregando diferentes velocidades, suavidad, etc
Entrada y salida: El movimiento de objetos en la vida real necesita tiempo para acelerar y desacelerar
Acción secundaria: Agregar acciones secundiarias a la acción principal le da más vida a la escena
Tiempo: La cantidad de Dibujos o Fotogramas para una acción determinada = la velocidad de la acción
Exageración: Utíl para no aburrir al usuario ya que los movimientos humanos suelen verse repetitivos dentro de un diseño, se debe definir el tipo de ecageración que se quiere implementar
meta cumplida en app de salud
Principio de acción secundaria:
En Candy Crush, cuando se juntan 3 caramelos o más, se genera la animación de explosión que viene acompañado de otros destellos y movimiento de los caramelos con el fin de darle más vida a la escena y a la acción.
Principio de exageración (no estoy segura):
En la aplicación móvil de Canva, cuando estámos descargando el diseño creado, se muestra una animación de carga que va en crecimiento.
En la app de weverse para móvil, en la sección de artist lo primero que vemos son una secuencia de historias de cada perfil de los miembros del grupo, acá podemos destacar el principio de Seguimiento y acción superpuesta, ya que posee un movimiento lineal al momento de ir deslizando las historias de izquierda a derecha.
cuando guardas un pin en pinterest ademas de aparecer la confirmacion de que ha sido guardado hay un sonido de notificacion, eso podria ser un ejemplo de acción secundaria
En la app de Pinterest, cuando se carga el contenido,la acción secundaria de una rueda dando vueltas respalda la idea de que se está cargando nuevo contenido al feed.
En Notion cuando subes y bajas dentro de la app no solo está el efecto de Aceleración, sino que también se “choca” cuando subes muy rápido la barra choca con la app se vuelve pequeña y después se expande
**Clase 16 - Principios de la animación.**
* **¿Qué conceptos debemos de tener en cuenta en la animación?**
* Duración y velocidad.
* El tamaño importa.
* Móvil
* Tablets y relojes inteligentes
* Movimiento.
* **¿Cuáles son los principios de la animación?**
* Comprensión y extensión.
* Anticipación.
* Puesta en escena.
* Seguimiento y acción superpuesta.
* Entrada y salida.
* Acción secundaria.
* Tiempo.
* Exageración.
* **¿En qué consiste el principio de comprensión y extensión de la animación?**
* Esto nos dice que debemos de dar una sensación de peso y flexibilidad a los objetos dibujados.
* **¿En qué consiste el principio de anticipación de la animación?**
* Esto nos dice que debemos preparar a la audiencia para que la acción que realiza la animación tenga más realismo.
* **¿En qué consiste el principio de puesta en escena de la animación?**
* El propósito de este principio es dirigir la atención de la audiencia y dejar claro que es lo más importante en la escena.
* **¿En qué consiste el principio de seguimiento y acción superpuesta de la animación?**
* Esto nos dice que se debe representar el movimiento de una manera realista y esto ayuda que la animación siga las leyes de la física.
* **¿En qué consiste el principio de entrada y salida de la animación?**
* Este nos habla del tiempo que necesita el objeto para acelerar y desacelerar. Por esta razón se dibujan más imágenes al principio y final de una acción con el fin de crear movimientos realistas.
* **¿En qué consiste el principio de acción secundaria de la animación?**
* Esto nos habla de que cuando agregamos acciones secundarias a la acción principal obtenemos más vida en la escena e importancia a la misma.
* **¿En qué consiste el principio del tiempo de la animación?**
* Esto representa la cantidad de dibujos/fotogramas que usamos para realizar una acción determinada.
* **¿En qué consiste el principio de exageración de la animación?**
* Esto nos habla de la no búsqueda de movimientos acordes a la realidad ya que estos podrían hacer que la animación se vea aburrida y estática. El nivel de exageración depende del estilo que se busca transmitir.
App Tinder, cuando se abre la app, se ingresa y se muestra el nombre de la aplicación con un fondo color uinforme caracteristico de la app, luego se muestra un icono de una llama que esta decorada con simbolos diversos a su alrededor como si explotase una piñata, luego aparece la foto de uno con un eco de circulos que se expande alrededor de la foto y esto da la sensación de busqueda, mientras carga información de los prospectos para deslizar (segun como funcinona la app).
Principio de Acción secundaria en la animación al darle me gusta al botón de Youtube
Que tal las reacciones en facebook.
Cumpliría con la exageración y acción secundaria.
### Principio #1: Comprensión y extensión
Deseamos dar una sensación de peso y flexibilidad a los objetos dibujados. Y esto puede aplicarse a objetos simples como: Una pelota que rebota, o a construcciones mucho más complejas como: la musculatura del rostro humano
### Principio #2: Anticipación
Hay que preparar a la audiencia para que la acción parezca mucho más realista. Por ejemplo, un bailarin que salta del suelo y primero tiene que doblar las rodillas
### Principio #3: Puesta en escena
Dirigir la atención de la audiencia y dejar claro que es lo más importante de una escena
### Principio #4: Seguimiento y acción superpuesta
Estas técnicas ayudan a representar el movimiento de una manera muchísimo más realista y ayudan a dar la impresión de que los personajes siguen las leyes de la física incluyendo el principio de inercia. No son simplemente un movimiento en línea, sino que van con aceleración, desacelación y demás.
### Principio #5: Entrada y salida
Se dibujan más imágenes cerca al principio y final de una acción, creando un efecto de entrada y salida lento para lograr movimientos muchísimo más realistas
### Principio #6: Acción Secundaria
Agregar acciones secundarias a la acción principal le da más vida a la escena y puede ayudar a respaldar y dar más importancia a la acción principal.
### Principio #7: El Tiempo
Se refiere a la cantidad de dibujos o fotogramas para una acción determinada.
### Principio #8: Exageración
Los movimientos animados que buscan una imitación perfecta de la realidad pueden parecer estáticos y aburridos.
Mi app elegida es Pinterest, de aquí pode analizar los siguientes principios de animación:
1. Anticipación 
2. Puesta en escena
3. Seguimiento y acción superpuesta
4. Tiempo: las animaciones son extremadamente rápidas.
5. Acción secundaria / además de la notificación suena una campanita particular que te indica que se ha ejecuta la acción. 
Luego de completar cada lección en Duolingo, aparecen algunos de los personajes realizando algunas acciones animadas.
En este se aplican los siguientes principios:
- Comprensión y extensión.
- Puesta en escena.
- Entrada y salida.
- Acción secundaria.
- Exageración.
Tengo la duda de si todos se aplican ya que son caricaturas animadas luego de dar como finalizada la lección.
Acción y exageración, en la presentación de amazon de una manera amplia me muestra las ofertas y me invita a continuar con las compras.
Seguimiento y Acción superpuesta:
![]()
La animación del microfono de whasapp, tiene lo siguiente:
Mi ejemplo, es la App del Banco de guayaquil, cuando se realiza la transferencia, se desliza el botón "transferir" y luego hace un sonido muy agradable mientras aparece el visto de transferido.
Otro que me gusta mucho son las reacciones de zoom.
Aqui comparto un link complementario de los principios de la animació. Me ayudo muchisimo a enteder mas el tema que dijo el profesor
<https://blog.talentgarden.com/es/blog/design/ux-funcional-animaciones-guia-disenador-ui>
la app tenpo tiene acción secundaria en estos botones finales. Cambian de color y se mueven cuando se les toca 
### **Puntos Importantes de la Clase**
1. **Comprensión y extensión:** Sensación de peso y flexibilidad en los objetos.
2. **Anticipación:** Preparar a la audiencia para que la acción parezca más realista.
3. **Puesta en escena:** Dirigir la atención de la audiencia hacia lo más importante.
4. **Seguimiento y acción superpuesta:** Representar el movimiento realista siguiendo las leyes de la física.
5. **Entrada y salida:** Movimiento requiere tiempo para acelerar y desacelerar, generando efectos más realistas.
6. **Acción secundaria:** Acciones adicionales que enriquecen la acción principal.
7. **Tiempo:** Cantidad de fotogramas que determinan la velocidad de la acción.
8. **Exageración:** Aumentar la intensidad de los movimientos para evitar la estática y mantener el interés.
Viendo algunas de las aplicaciones que utilizo gracias a esta clase, puedo definir los principios de animación que manejan estas páginas:
Por ejemplo, Un ejemplo más conocido de Seguimiento y Acción superpuesta es Google Maps. Al arrastrar el mapa, los elementos, como marcadores y rutas, se mueven de manera suave y realista, siguiendo principios de inercia. Por ejemplo, si deslizas el mapa rápidamente, los marcadores y la vista se desaceleran al detenerse, creando una sensación de movimiento natural y fluido. Esto mejora la experiencia de navegación y hace que la interacción sea más intuitiva.
Creo que el principio de anticipación se ve muy seguido en muchas páginas. Un ejemplo claro es Spotify: cuando interactúas con los botones y pasas el cursor por encima, ya hay un movimiento que anticipa la acción, lo que da a entender al usuario que está disponible.
El "like" en Twitter se relaciona principalmente con el Principio de Comprensión y Extensión. Al hacer clic en el ícono de "like", el cambio visual inmediato y el cambio de color proporcionan una sensación clara de que la acción ha sido registrada, ayudando al usuario a entender que su interacción ha tenido un efecto.
También el principio de entrada y salida se utiliza mucho en Netflix. Cuando miras el catálogo de series y películas, los elementos se mueven y desaparecen, creando una experiencia agradable y fluida que invita al usuario a seguir navegando.
Piensen en sus queridos amigos compañeros, frontend developers 😢
Duolingo una de mis apps favoritas, contiene el efecto de animación Entrada y salida cuando cambio de una lección a otra.
Me ha encantado esta clase!
Siento que Pinterest utiliza muchos de estos principios de animacion, como el sonido de la campanita cuando se guarda un pin, la ruedita de cargue, el seguimiento y accion superpuesta
Elegí la aplicación de Duolingo, podemos encontrar el principio de exageración al terminar una actividad, ya que se ve a los personajes celebrando de manera efusiva por haber terminado velozmente.
** Reto **
En Spotify un principio de animación podria ser laa anticipación, que implica preparar al espectador para una acción próxima. Cuando el usuario hace clic en el botón de reproducción (play) o pausa, puede haber una breve anticipación visual, como una animación sutil en el botón para indicar que se ha realizado la acción.
Me encontré con una animación sutil y hermosa en threads, al dar like a un post salía una flor de Sakura
Conceptos de animacion:
- Duracion y velocidad
- Tamaño importa
- Movil
- Tablets y relojes inteligentes
- Movimiento
Principiod de animacion:
- Comprension y extension. dar sensacion de peso y flexibilidad a los objetivos dibujados
-anticipacion: preparar la audiencia para que la sensacion sea mas realista. - puesta en escena:
- seguimimiento accion superpuesta
- entrada y salida
-accion secundaria. agregarla a la principal da mas vida - tiempo: cantidad de dibujos/fotogramas
- exageracion: imitar la realidad o artista.
En Kayak pude encontrar dos principios 1.Comprension y extension porue atraves de la grafica y sus picos altos y bajos puedo entender que se trata de precios diferentes. 2. Anticipacion: Atraves de la grafica de precios en Kayak me prepara para ver las cantidas de precios segun el sitio de la grafica donde situe mi cursor. 
En Kayak pude encontrar dos principios 1.Comprension y extension porue atraves de la grafica y sus picos altos y bajos puedo entender que se trata de precios diferentes. 2. Anticipacion: Atraves de la grafica de precios en Kayak me prepara para ver las cantidas de precios segun el sitio de la grafica donde situe mi cursor. 3.
En la app Period Tracker, se puede observar una animación inicial donde aparece la mano de una chica buscando fechas en su calendario menstrual. Esta animación cumple con algunos de los principios de la animación:
1. Tiene el principio de animación, puesto que se muestra a la chica mientras coge el celular y luego comienza a utilizar su pantalla táctil.
2. Se utiliza el principio de puesta en escena, puesto que se observa la relevancia de esta imagen ocupando toda la pantalla.
3. Utiliza también el principio de seguimiento y acción superpuesta, debido a que los movimientos se perciben naturales y familiares.
4. 
1. **Duración y velocidad**: Implica dar una sensación de peso y flexibilidad a los objetos dibujados, desde una pelota que rebota hasta la musculatura de un rostro humano.
2. **Anticipación:** Preparar a la audiencia para una acción para que esta parezca más realista. Por ejemplo, un bailarín que primero dobla las rodillas antes de saltar.
3. **Puesta en escena:** Dirigir la atención de la audiencia y destacar lo más importante en una escena.
4. **Seguimiento y acción superpuesta**: Ayuda a representar el movimiento de manera más realista y a cumplir con las leyes de la física, como la inercia.
5. **Entrada y salida:** Los objetos en el mundo real necesitan tiempo para acelerar y desacelerar, creando un efecto de entrada y salida lenta para movimientos más realistas.
**Además de estos principios, hay otros elementos a considerar:**
* **Acción secundaria:** Agregar acciones secundarias a la principal para dar vida a la escena y respaldar la acción principal, como el movimiento de brazos mientras camina una persona.
* **Tiempo:** La cantidad de dibujos o fotogramas para una acción determinada, lo que afecta la velocidad de la acción y la percepción de realismo.
**Exageración:** Un efecto útil para la animación que puede hacerla más dinámica y evitar que parezca estática o aburrida, dependiendo del estilo deseado.
Algunos ejemplos de animaciones:
Reacciones de fb, donde cada reacción tiene un movimiento para representar mejor la emoción.
Las animaciones de like en X, cuando hay eventos muy famosos crean animaciones especiales y exageradas para esas ocasiones.
***Principios de animación***
* Tiempo,
* Entrada y salida,
* Compresión y extensión,
* Exageración,
* Puesta en escena.
* Principios de animación, conceptos claves:
* Duración de la velocidad:
* Tamaño importa.
* Móvil
* Tablets y relojes inteligentes.
* Movimiento.
* Compresión y extensión: Dar una sensación de peso y visibilidad a los objetos dibujados, esto se puede poner a objetos simples como una pelota o complejos como un rostro humano.
* Anticipación: Preparar a la audiencia para que la acción parecza más realista, ejemplo, un bailarín que salta de el suelo primero tiene que dolar las rodillas, esta acción nos genera anticipación de lo que va a pasar.
* Puesta en escena: Dirigir la atención de la audiencia y dejar claro que e slo más importante en una historia.
* Seguimiento y acción superpuesta: Dos técnicas muy relacionadas que ayudan a representar el movimiento de una forma realista como si siguieran las leyes de la física.
* Entrada y salida: Movimientos en el mundo real necesita tiempo, por esta razón se dibuja más final y principio para hacer más realista todo.
* Acción secundaria: Agregar acción secundaria a la acción principal, da más respaldo a la acción principal, una persona que camina por ejemplo, mueve los brazos.
* Tiempo: Número de fotogramas, esto traduce a la velocidad y la acción de la película. Estos objetos realmente parecen obedecer a las leyes naturales de la física.
* Exageración: La realidad exacta puede parecer estática,asi que se puede tomar el estílo de caricatura o algún artista específico y acomodarlo a nuestros objetos interactivos.
Tarea: busca una animación e identifica algunos de los principios
La app de Shein muestra un ícono de llama para aquellos productos que están ultra rebajados (puesta en escena), tiene además un cronómetro para los descuentos (seguimiento y acción superpuesta) da la impresión de que tienes poco tiempo
En en banner con el mensaje de descuento, hay una animación con el porcentaje de descuento, lo cual es un principio de seguimiento y acción superpuesta que hace maps realista el banner, como si ingresaras a una tienda con un letrero luminoso
En Beek para pc hay una barra de carga para ir a la página principal. Es el principio de Anticipación ya que nos prepara para ir a la página de inicio. Tambien tiene aceleración correspondiente al tiempo asi que va con seguimiento y acción superpuesta.
En X (ex twitter) cuando le pones mg a un tweet, hay ocasiones donde esa animacion de mg cambia de forma y puede ser otra forma
buenas noches, elegi la app yputube music
las animaciones son:
1. seguimiento y accion superpuesta
2. accion secundaria
3. tiempo
4. . exageracion
Buenas tardes, eligo la **app spotify para los cuales observe las animaciones de:**
1.Seguimiento y acción superpuesta
2.Acción secundaria
3.Tiempo
En el sitio de Banco Falabella en Colombia, cuando ingresas te muestra el icono de Whatsapp y durante la navegación se desplaza a la izquierda ampliado la información "asesoría inmediata por Whastaap".
Maneja los principios de tiempo, entrada y salida
No me gustan las animaciones. Es algo personal de que quiero que las páginas me carguen y hagan lo que quiero en el momento. Si las uso es porque los demás las usan y a la gente en general les gustan.
* Comprensión y Extensión: Dar una sensacion de peso y flexibilidad a los objetos dibujados.
* Anticipación: Preparar a la audiencia para una accion para que la accion parezca muchisimo mas realista.
* Puesta en Escena: Dirigir la atencion de la audiencia y dejar claro que es lo mas importante de una escena
* Seguimiento y Acción Superpuesta: Representar el movimiento de forma mas realista y ayudan a dar la impresion de que los personajes siguen las leyes de la fisica incluyendo el principio de la inercia, aceleracion, desaceleracion.
* Entrada y Salida: Se dibujan imagenes cerca del principio y el final de una accion creando un efecto de entrada y salida lenta para lograr movimientos muchisimo mas realistas
* Acción Secundaria: Agregar acciones secundarias a la accion principal puede dar mas vida a la escena y ayudar dar mas importancia a la accion principal
* Tiempo: La cantidad de dibujos o fotogramas para una accion determinada, lo que se traduce como en la velocidad de la accion de la pelicula.
* Exageración: Es util porque los elementos de imitacion perfecta a la realidad pueden pareceer estaticos o aburridos
El like en los comentarios de platzi, no solo cambia de color si no igual muestra otras particulas a su alrededor 👉💚
En Tiktok al dar like a un video no solo se pinta de rojo sino hay una animación de destellos alrededor, este sería un caso de acción secundaria
Actividad
En la app clash of clan:
En la comprensión y extensión si cumple con este fundamento con iconos de selección se vuelven más grandes para saber en que sección te encuentras.
Anticipación:si cumple con este fundamento ya que al momento de eliminar algún objetivo se torna un color más oscuro para saber que objeto deseas eliminar o mover.
Puesta en escena: si cumple con este fundamento ya que al ingresar al juego me deja en claro que lo más importantes son las aldeas también sucede que al dirigirnos a la aldea nocturna nos da un primer plano de la aldea secundaria y al regresar nos da igual un primer plano de la aldea principal.
Seguimiento y acción superpuesta: si cumple con este fundamento, en el carrusel vertical de eventos se desplaza y desacelera dependiendo de cuando desees desplazar dando la sensación de que son más pesadas las fuentes de información.
Entrada y salida: tal como en el aanterior fundamento si se cumple también esta ley.
Acción secundaria: si cumple con este fundamentopues tiene animaciones secundarias en varios aspectos dell juego como decoración.
Teimpo: En algunas opciones si sucede esto en otras opciones son aparición repentina de la información; pero si cumple este fundamento.
Exageración:En este caso sin cumple con este fundamento pero con un estilo particular en el apartado de guerra de clanes vemos un zoom exagerado para ver nuestra aldea principal en guerra con el enemigo.
Cuando das like en un vídeo de TikTok el corazón tiene un acción secundaria que hace que se vea como si el corazón ❤️ se expandiera y volviera a la normalidad
Excelente explicación, me ayuda mucho abordar mejor estos principios sin utilizar muchos en conjuntos en un solo proyecto
Este seria claro ejemplo de anticipiàcion en el que los usuarios deben escoger su cuenta o perfil para poder obtener una puesta de escena en la sigueinte pagina. Ademas añade una reaacion emocional al usuario al utilizar este tipo de herramientas o procesos digitales.
Realmente me encanto esta clase!
Gracias
Olvidé mencionar que la llama de fuego azul en la primera imagen va aumentando ,
Esta App se llama Busuu esta genial. 😃
Esta es una App para aprender idiomas por niveles, tiene demasiados recursos y formas de interactuar con nativos, aprendiendo en esta clase me he podido de cuenta como puedo identificar lo aprendido. he notado varias animaciones.
Por ejemplo cuando hacer un ejercicio sin equivocarte sale este trofeo , aumenta de tamaño, se mueve y tiene una pequeña explosión de serpentina.
de igual manera al inicio de la App cuando se abre carga la macaba , aumenta de tamaño igual que el resto de elementos gráficos. realmente estoy muy feliz de por identificar lo aprendido.
Las opciones de entornos como Figma, canva o incluso PowerPoint tienen un aspecto de la anticipación muy interesante, ya que al intentar manipular un objeto entre escenas este debe estar declarado en las que queremos que participe (suena un poco lógico, pero es mas interesante que sólo eso) y se debe especificar las propiedades de este en todo el recorrido por dichas escenas
Un ejemplo de entrada y salida en la pantalla de splash de la app de Bancolombia
Un ejemplo de anticipación mostrando que lo página se está cargando y que próximamente aparecerá habilitada la interfaz para continuar con el proceso
Usando la interfaz del juego angry birds podrás observar un buen ejemplo de buen uso de todos los principios de animación mencionados aplicados a las ventanas emergentes, los botones , los elementos visuales de la interfaz y los personajes. Da la sensación de un universo caricaturezco y flexible, sumando a su experiencia entretenida y agradable.
Otro elemento importante que complementa las animaciones para elevar aun más la experiencia es el sonido que se reproduce cuando interactuamos con los elementos y personajes: Ejemplos: Al hacer tap en un botón, la entrada de una ventana emergente y por supuesto el sonido del lanzamiento de los pajaritos con la resortera. Los sonidos te hacen sentir más inmerso en la experiencia del juego.
En mi celular cada vez que lo desbloqueo la animacion es como cuando presentas algo y sale de los costados de la pantalla, es la accion secundaria, ya que la principal es prender el telefono.
La animación del botón de suscruburse y darle cllic en la campanita, hace animación pero también sonido, acción ppal del botón de suscruburse y secundaria campanita
Sin duda mis animaciones favoritas de una app son las de Duolingo porque me parecen geniales y muy atractivas, lo cual hace que se vuelva más ameno y entretenido, ya que como usuario “quedas enganchado” utilizando el producto digital una y otra vez.
El logo de platzi al iniciar cada clase , es animacion de tipo exageracion. Es muy buena!
Bumble:
Anticipación: Aparece el logo con una animación como si estuviera cargando.
Entrada y salida cuando deslizas hacia la izquierda o derecha, a la vez la exageración, haciendo la animación como si fuera que estuvieras escogiendo cartas.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?