Animaci\u00f3n autom\u00e1tica de la UI del pase de diapositivas<\/h3>\n
\u00bfSabes cuando descargas una aplicaci\u00f3n m\u00f3vil y, antes de llegar a la mercanc\u00eda, te abres paso a trav\u00e9s de una experiencia de incorporaci\u00f3n o recorrido?<\/p>\n
![\"diapositivas](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-ux-design-slider-slideshow-animation-ui-pattern.gif\")
<\/p>\n
En un recorrido te dar\u00e1n informaci\u00f3n sobre la aplicaci\u00f3n, funcionalidades clave o incluso consejos y trucos. Saber c\u00f3mo elaborar un recorrido es una habilidad muy \u00fatil que debes tener en tu arsenal de dise\u00f1o UX y es vital a medida que las aplicaciones m\u00f3viles se vuelven m\u00e1s complejas en dise\u00f1o y arquitectura. John Gruber<\/a> escribi\u00f3 que un usuario deber\u00eda ser capaz de averiguar c\u00f3mo utilizar una aplicaci\u00f3n \u00abcon s\u00f3lo mirarla\u00bb, pero hay buenas razones para utilizar un recorrido. Puede ocurrir que una aplicaci\u00f3n sea intuitiva para un usuario, pero compleja para otro. En este caso, las gu\u00edas ayudan a encontrar un equilibrio. <\/p>\n Descargar gratis<\/a><\/p>\n Informar a tus usuarios y darles sensaci\u00f3n de control puede contribuir a una mejor experiencia de usuario. La heur\u00edstica<\/a> de Jakob Nielsen esboza unas cuantas pautas que ayudan a potenciar el dise\u00f1o de la interfaz de usuario y una de ellas es la visibilidad del estado del sistema: una forma estupenda de hacer visible el estado del sistema es mediante animaciones de carga. En Justinmind, puedes a\u00f1adir animaciones<\/a> de carga utilizando paneles din\u00e1micos y creando variables para permitir bucles. Imagina que env\u00edas un formulario: esperar\u00edas ver una animaci\u00f3n de carga, o alg\u00fan tipo de se\u00f1al de que algo<\/em> est\u00e1 ocurriendo. Nadie quiere quedarse en el desierto de la experiencia de usuario, y por eso dar a tus usuarios una respuesta puede calmar su ansiedad. Puedes utilizar animaciones de carga cuando los usuarios abren una aplicaci\u00f3n por primera vez, como forma de indicarles que se est\u00e1 cargando su informaci\u00f3n. <\/p>\n Si quieres crear una experiencia m\u00f3vil que no requiera que el usuario se desplace, opta por una animaci\u00f3n de UI de validaci\u00f3n de flujo de pantalla. Cuando el usuario introduce algo, la siguiente pantalla se desliza, negando al usuario la necesidad de desplazarse. Con algunos efectos de transici\u00f3n<\/a> y gestos m\u00f3viles, puedes recrear un formulario de validaci\u00f3n de<\/a> pantalla en unos sencillos pasos con Justinmind. La validaci\u00f3n por flujo de pantalla aprovecha la animaci\u00f3n m\u00f3vil pasando a la siguiente pantalla cuando el usuario ha introducido la informaci\u00f3n solicitada. Es posible que veas validaciones de flujo de pantalla en un formulario de registro al descargar y abrir por primera vez una aplicaci\u00f3n o en la banca m\u00f3vil. <\/p>\n Descargar gratis<\/a><\/p>\n Una lista de contactos es otra oportunidad para utilizar algo de interacci\u00f3n m\u00f3vil. Las listas de contactos no son tradicionalmente la parte m\u00e1s interesante del dise\u00f1o UX, sin embargo, en Justinmind puedes a\u00f1adir un toque de interactividad para hacer la lista de contactos m\u00e1s din\u00e1mica a\u00f1adiendo algunas opciones extra en la lista. En Justinmind, puedes aprender a crear una lista de contactos interactiva<\/a> utilizando paneles din\u00e1micos y widgets de tabla. La parte interactiva es cuando a\u00f1ades eventos, como el evento \u00abAl deslizar a la izquierda\u00bb, que permite a los usuarios deslizar el contacto en la lista de contactos para revelar opciones como compartir o favorito. <\/p>\n Descargar gratis<\/a><\/p>\n Cuando se trata de divulgaci\u00f3n progresiva, un acorde\u00f3n es tu mejor amigo. Los acordeones son un peque\u00f1o y vers\u00e1til patr\u00f3n de dise\u00f1o que puede reducir la carga de trabajo y minimizar la sobrecarga cognitiva. Si est\u00e1s dise\u00f1ando una aplicaci\u00f3n m\u00f3vil y tienes demasiada informaci\u00f3n -por ejemplo, mucho contenido-, colocar esa informaci\u00f3n en un acorde\u00f3n para que los usuarios hagan clic es una forma \u00fatil de mostrar m\u00e1s informaci\u00f3n sin utilizar un espacio precioso. Dise\u00f1ar un acorde\u00f3n<\/a> en Justinmind tampoco es ciencia espacial. Con unos sencillos pasos, un par de paneles din\u00e1micos<\/a> y unos cuantos eventos, tendr\u00e1s tu acorde\u00f3n funcionando en un santiam\u00e9n. <\/p>\n Las transiciones animadas se\u00f1alan un cambio de estado al usuario. Eso puede significar se\u00f1alar un movimiento en el flujo de navegaci\u00f3n, la finalizaci\u00f3n de una tarea, la introducci\u00f3n o sustracci\u00f3n de elementos de UI en pantalla, y el cambio de posici\u00f3n en la jerarqu\u00eda de la interfaz. Con toda la complejidad de pantallas y elementos de UI que presentan las aplicaciones m\u00f3viles, los cambios bruscos pueden hacer que tus usuarios se sientan perdidos y confusos. Y ah\u00ed es donde resultan \u00fatiles las transiciones animadas. <\/p>\n Nick Babich, desarrollador de software y persona influyente en UX, define sucintamente lo que separa una buena transici\u00f3n animada de una mala en su post La animaci\u00f3n en el dise\u00f1o de UX m\u00f3vil<\/a>: Transiciones animadas eficaces: <\/p>\n En cambio, las transiciones animadas est\u00e1n mal dise\u00f1adas:<\/p>\n Las transiciones animadas pueden hacer que las UI m\u00f3viles sean m\u00e1s din\u00e1micas, atractivas y f\u00e1ciles de usar. Pero util\u00edzalas incorrectamente y tendr\u00e1n un impacto perjudicial tanto en la experiencia del usuario como en las conversiones. Por eso es importante incluir estas animaciones en tu prototipo de alta fidelidad<\/a>, para que puedas probarlas y validarlas. <\/p>\n Crear un efecto de animaci\u00f3n por debajo de lo normal puede ser un tiro en el pie. Echa un vistazo a esta lista de brillantes aplicaciones de animaci\u00f3n<\/a> para conseguir animaciones profesionales en tus prototipos. <\/p>\n<\/div>\n En Justinmind tendemos a pensar que la mejor forma de ilustrar un art\u00edculo como \u00e9ste es con algunos ejemplos extravagantes que te muestren exactamente de qu\u00e9 estamos hablando. As\u00ed que aqu\u00ed tienes 5 buenos ejemplos de animaciones UI que realmente nos gustan. <\/p>\n El sistema de animaci\u00f3n Lottie de Airbnb<\/a> pretende llevar animaciones nativas de UI a sus aplicaciones iOS, Android y web. El objetivo es que los desarrolladores puedan integrar animaciones con la misma sencillez con la que integrar\u00edan elementos est\u00e1ticos. El resultado es un conjunto de animaciones de UI agradables y alegres que se suman a la experiencia del usuario sin llegar a dominarla por completo. En el primer ejemplo, el despertador aparece con un efecto giratorio que atrae la mirada sin interrumpir la experiencia del usuario. En el segundo y tercer ejemplos, las animaciones sirven para mostrar al usuario lo que necesita, adem\u00e1s de empujarlo en la direcci\u00f3n que desea el equipo de UX. Son tan sutiles como es necesario, y tan claras como deber\u00eda ser. <\/p>\n <\/p>\n Esta aplicaci\u00f3n conceptual de exploraci\u00f3n espacial<\/a> presenta una UI animada, que utiliza transiciones suaves como la mantequilla para dar una sensaci\u00f3n real de movimiento y viaje. Optar por un dise\u00f1o de UI completamente personalizado como \u00e9ste puede ser arriesgado, pero creemos que el dise\u00f1ador Anton Skvortsov lo hizo bien aqu\u00ed. La interfaz es intuitiva y detallada, sin dejar de ser sencilla y f\u00e1cil de interactuar. Nuestros dos detalles favoritos: mira c\u00f3mo los peque\u00f1os iconos de los planetas incluyen sus lunas. Ah, y ese Tesla flotando ah\u00ed cerca del planeta Tierra. <\/p>\n En muchos casos, las animaciones de UI no necesitan a\u00f1adir brillo y glamour a tu aplicaci\u00f3n. Un poco de movimiento tras una interacci\u00f3n del usuario puede bastar a menudo para a\u00f1adir una agradable sensaci\u00f3n de \u00e9xito a la experiencia del usuario. La pantalla de ingredientes de la aplicaci\u00f3n de cocina<\/a> de Vlad Fedoseyev es un gran ejemplo. Al tocar para a\u00f1adir un ingrediente se desencadena una agradable animaci\u00f3n, y el ingrediente se acerca a la zona seleccionada. Si a\u00f1ades m\u00e1s ingredientes, aparecer\u00e1 un nuevo bot\u00f3n indicando cu\u00e1ntos ingredientes m\u00e1s se han a\u00f1adido ya, y el bot\u00f3n parpadea cada vez que se a\u00f1ade un ingrediente a la pila. Mientras tanto, la lista de ingredientes disponibles se remodela cuando se pulsa el bot\u00f3n de recetas. Todo ello con la m\u00ednima distracci\u00f3n y la m\u00e1xima claridad. Un gran trabajo de dise\u00f1o. <\/p>\n Las transiciones son realmente las animaciones de UI m\u00e1s importantes: hazlas bien y habr\u00e1s recorrido la mitad del camino. Si las haces mal -demasiado r\u00e1pidas, demasiado lentas, demasiado bruscas- corres el riesgo de crear una experiencia de usuario desagradable y discordante. El concepto de Tubik para una aplicaci\u00f3n de comercio electr\u00f3nico de vinilos<\/a> es un gran ejemplo de una animaci\u00f3n de transici\u00f3n UI bien hecha. Agradable y suave, con elementos que aparecen y desaparecen sin ninguna sensaci\u00f3n de desconexi\u00f3n o de \u00ab\u00bfd\u00f3nde ha ido eso?\u00bb. Nuestra parte favorita es cuando el disco sale de la funda; el hecho de que sea uno de nuestros discos favoritos de todos los tiempos s\u00f3lo lo hace mejor. <\/p>\n
\nDescarga ahora el ejemplo gratuito de presentaci\u00f3n autom\u00e1tica<\/span><\/h2>\n
\n<\/div>\nAnimaci\u00f3n de carga de la UI<\/h3>\n
![\"formulario](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-ui-animation.gif\")
<\/p>\nValidaci\u00f3n del flujo de pantalla Animaci\u00f3n UI<\/h3>\n
\nDescarga aqu\u00ed el ejemplo gratuito de validaci\u00f3n del flujo de pantallas<\/span><\/h2>\n
\n<\/div>\n![\"ejemplo](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-animation-ui-animation.gif\")
<\/p>\nAnimaci\u00f3n interactiva de la UI de la lista de contactos<\/h3>\n
\nDescarga aqu\u00ed el ejemplo gratuito de lista de contactos interactiva<\/span><\/h2>\n
\n<\/div>\n![\"animaci\u00f3n](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-accordion-animations-ux-design.png\")
<\/p>\nAnimaci\u00f3n acorde\u00f3n UI<\/h3>\n
\u00bfPara qu\u00e9 sirven las animaciones de UI m\u00f3vil?<\/h3>\n
\u00bfQu\u00e9 hace que una animaci\u00f3n de UI m\u00f3vil sea buena?<\/h3>\n
\n
\n
5 animaciones de UI que nos encantan<\/h2>\n
Airbnb – Sistema de animaci\u00f3n Lottie<\/h3>\n
![\"airbnb](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/airbnb-mobile-ui-animations-justinmind.gif\")
<\/p>\nAnimaci\u00f3n de la UI de la app Sistema Solar<\/h3>\n
![\"Animaci\u00f3n](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/xore-solar-system-app-UI-animations-justinmind.gif\")
<\/p>\nAnimaci\u00f3n UI de selecci\u00f3n de ingredientes en una app de cocina<\/h3>\n
![\"Animaciones](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/ingredients-app-UI-animations-justinmind.gif\")
<\/p>\nAnimaci\u00f3n de la UI de la aplicaci\u00f3n de comercio electr\u00f3nico Vinyls<\/h3>\n
![\"Vinyl](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/vinyl-shop-app-UI-animations-justinmind.gif\")
<\/p>\nAnimaci\u00f3n UI de app de red social<\/h3>\n
![\"Animaciones](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/social-app-UI-animations-justinmind.gif\")
<\/p>\n
![\"Descargar](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"