Diseño de Microinteracciones en Software
Contenido del curso
Jesús Matías Mondragón
Luis Glex
Pedro Mugartegui.
Maria Jaramillo
Juan Carlos Acosta Chanamé
Pedro Isaac Aguilar
Wilber Antonio Portillo Santos
Laura Páez
Angel Hernandez
Laura Páez
Efraín Hernández García
Bryan Julio Salas
Carlos Andres Orozco Palacio
Juan Carlos Barbaran Meza
Juan Jose Vega
Antonio Alexander Estrella Gómez
JESUS IVAN MENDOZA CONTRERAS
Alejandra Osorio
JHONATAN DAVID RESTREPO HENAO
Maia Nahir Elkin Minuchin
Walter Fory
Ada Rosa Quispe Mamani
Carolina Gómez
Carolina Gómez
David Antonio Garcia Saaib
Facundo Nicolás García Martoni
Profesor
FRANCISCO J PAPALEO
Demian Arenas
Miguel A. López
Aarón González
IVANA MELCHIORI
Julio César Patiño Alvarez
Julio César Patiño Alvarez
Encontré un plugin para Sketch & XD que sirve para duplicar los elementos tales como las estrellas espero les sirva.
Genial, gracias!!
Genial, Este si no lo conocía. Gracias!!!
Las microinteracciones son respuestas que suceden cuando un usuario interactúa con tu plataforma, estas informan al usuario sobre qué está pasando a partir de la interacción entre los elementos y el usuario.
Existen interacciones de:
Acción
Creación
Borrado
Añadir
Actualizar
Las 4 Fases por las que viaja una microinteracción según Dan Saffe son:
Trigger o disparador: acciones que desencadenan la interacción, como click, time, scroll, etc. Reglas: Son los requerimientos que se necesitan para que suceda la interacción, por ejemplo tener dinero en la cuenta, llenar todos los campos de un formulario, etc. Retroalimentación o Feedback: Es la respuesta que te da de vuelta el elemento que tiene la microinteracción, por ejemplo una animación. Bucles o modos: son los ciclos que dura la interacción y, si se repiten, cómo cambia a lo largo del tiempo.
Grandioso!, se que llevarlo a la programación va a demorar pero los detalles son lo que hacen único e innovador!.
Considero que aunque implica más tiempo y trabajo por la parte de diseño y programación, no hay que olvidar que mientras más destaque nuestro producto, mejor posicionamiento en el mercado y fidelización de consumidores. Las microinteracciones y el swag (estilo visual) son dos poderosas herramientas para lograrlo.
¿Podemos exportar el prototipo en algún formato diferente a XD para que lo vea nuestro equipo o usuario?
En Adobe XD puedes exportar tus diseños en png, svg, pdf y jpg
Gracias Angel, me refería al prototipo animado ;)
Esta cool animar nuestro diseño
Solo usar Figma pero tengo que admitir que XD me solucióna más la vida, aunque recomiendo muchísimo Figma.
Excelente clase y vuelvo a decir Auto-Animate es excelente.
Si te facilita la vida
Al programador no xd
23. Definición y prototipado de microinteracciones.
Aquí mi aporte:
uU No tengo XD pero si Figma :D para practicar
Fases por las que viaja una microinteracción segun Dan Saffe: Trigger o disparador Reglas Feedback Bucles o modos
Entiendo que estas microinteracciones se pueden lograr desde XD en el prototipo, pero como se pasan al equipo de desarrollo para que las puedan poner en el producto final? O sea, hay alguna forma de exportar las indicaciones de interacciones que diseñé entre elementos, para que un developer lo entienda y lo aplique?
En esta página explica como hacerlo desde figma ! https://webdesign.tutsplus.com/es/articles/collaborative-interface-design-in-with-figma--cms-30873
Gracias, lo hice e mi XD con tu ejemplo y se ve súper.
me tardé más buscando como quitarle el fondo a las imagenes que haciendo las animaciones.
PD: lo hice en powerPoint
Por que en powerPoint D:
Lo que noto de las microinteracciones es que complican la etapa de desarrollo. Es así?
Es cierto que las microinteracciones toman algo de tiempo en la etapa de desarrollo, sin embargo lo cierto es que le agrega mayor identidad a tu sitio sí las implementas de buena manera. Tampoco es que sobrecargues tu sitio de microinteracciones pues la carga de este podría afectarse.
El efecto de animación es muy similar a la de Keynote de Apple "Movimiento mágico"
Así es :D están muy parecidos y funcionan increíble :rock
Buenas tardes, tengo una consulta: estoy usando la versión 28.5 de Adobe XD y cuando quiero seleccionar el Trigger de Tiempo sólo me lo permite hacer en la primera pantalla, luego no me aparece dentro de las opciones, por ejemplo si lo quiero hacer entre la segunda y tercera. Y otra consulta: cómo hago para adjuntar imágenes en las preguntas y comentarios? Perdón por la ignorancia jeje! 😅
Saludos!
Ivana
A tu primera duda el trigger de tiempo solo funciona si selecciona toda el artboard, es decir si tomas un elemento en concreto.
la que esta resaltada es seleccionando el artboard, pero si selecciono un elemento Xd lo va tomar como un acción por parte del usuario por eso no te va salir la opción tiempo.
y para subir una imagen solo haz esto:
Nota: en el navegador mozilla no funciona, o bueno por lo menos a mi no me funciona.
