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
Bienvenida
Introducción al mundo digital
Introducción al software
Historia del diseño
Heurísticos
Principios heurísticos de percepción y comportamiento I
Principios heurísticos de percepción y comportamiento II
Principios heurísticos de relación y jerarquía
Principios heurísticos de forma I
Principios heurísticos de forma II
Interacción
Básicos de User Interface
Arquitectura de la información
Tipografía
Vectores y operaciones booleanas
Usabilidad, consistencia y eficiencia
Organización, colaboración y procesos
Animación
Principios de la animación
Prototipando en Figma
Cierre
Ejemplos de portafolio de diseño
Cierre
Live Class
Live Class - UI Design: transforma ideas en experiencias
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Emilio García
Aportes 65
Preguntas 2
Conceptos:
Mis notas de clase:
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.
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
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.
Luego de completar cada lección en Duolingo, aparecen algunos de los personajes realizando algunas acciones animadas.
En este se aplican los siguientes principios:
Tengo la duda de si todos se aplican ya que son caricaturas animadas luego de dar como finalizada la lección.
** 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.
Conceptos de animacion:
Principiod de animacion:
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.
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.
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?