Aprende Experience Design CC

Definir flujo de navegación en Adobe XD

¡Prueba gratis durante 10 días

nuestros 1242 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una vez tenemos nuestro prototipo creado, podemos definir el flujo de navegación que realizarán los usuarios para enseñárselo a nuestros clientes de una forma dinámica. Podemos definir una acción por cada elemento de nuestro lienzo o agrupar elementos para trabajar con zonas más amplias.

Transcripción

Hemos abierto el Archivo-2 del curso y una vez que tenemos nuestro diseño realizado, deberemos definir ese flujo o ese recorrido del usuario a lo largo de nuestra aplicación, qué ocurre cuando aprieta la estrella o qué ocurre cuando envía el formulario. Lo primero que haremos será agrupar aquellos elementos que tienen una misma acción para no tener que repetir acciones, por ejemplo, las estrellas, cuatro veces la misma acción. Entonces seleccionaremos con la tecla "Shift" para seleccionar varios elementos y desde "Objeto" vamos a decir "Agrupar". Podemos hacer lo mismo aquí abajo, cuando hacemos clic sobre la casilla, pero también sobre el texto y con el botón derecho veremos que también nos va a permitir agrupar directamente. Si vamos al apartado de Prototipo, lo primero que haremos será definir cuál es la página principal, dónde empieza la acción. En este caso empieza en esta ventana de aquí, así que activamos que esto es la casilla inicial. Si hacen un clic sobre las estrellas, sobre las cuatro primeras estrellas, queremos que nos muestre esta página. Además lo va a hacer, por ejemplo, empujando directamente hacía arriba, y en lugar de suavizar la salida, vamos a hacer que sea suave la entrada y la salida. Vamos a decirle un segundo que nos permita previsualizar esa animación, y si ahora hacemos clic sobre el icono de la parte superior, veremos que al seleccionar cualquiera de las cuatro primeras estrellas, automáticamente nos va a empujar hacía arriba, y nos va a mostrar la siguiente ventana. A esta ventana de aquí para poder volver atrás, le diremos que si hacen clic sobre la ventana directamente sin enviar el formulario, nos devuelva hacía atrás. Y lo va a ser empujando hacía abajo para que sea justo al revés de lo que teníamos anteriormente. Ocurrirá lo mismo cuando hagan clic sobre me he equivocado, queremos que vaya hacía atras, entonces le decimos que cuando hagan clic, automáticamente vuleva hacía aquí. Vamos a dar "Play", comprobamos que está funcionando correctamente. Y si hago clic, vuelve. ¿Qué ocurre si hacemos clic en la quinta estrella? Directamente va a ir al "Store", y aquí vamos a decir que en lugar de empujar haga un "Slide". Entonces no va a empujar la hoja que tenemos debajo. Y que una vez que el usuario nos haya dado la valoración, deberemos mostrarle un mensaje de agradecimiento, entonces automáticamente, y nos mantiene la última transición que hemos aplicado. Podemos modificar la velocidad para que sea algo más rápido este tipo de transición. Si hacemos clic en "Play", vamos a comprobar que funciona. Efectivamente. Aquí para poder hacer un ciclo le diremos que si hacemos clic, automáticamente nos devuelva a la primera. De esta manera el cliente va a poder probar de forma cíclica todo el tiempo el recorrido de la aplicación. Nos queda marcar la última opción que es qué ocurre cuando enviamos el formulario. Debidamente nos va a devolver también ese mensaje de agradecimiento. Todo ello nosotros vamos a poder grabarlo en video para enviárselo al cliente por si no quiere ver la interacción directamente publicada en "Creative Cloud" porque no tiene conección o por cualquier motivo podemos grabar un video de todo el recorrido y enviarle el video directamente a nuestro cliente.

Aprende Experience Design CC

Descubre esta novedosa herramienta que pone Adobe a tu disposición, Adobe XD, para trabajar la experiencia de usuario y todo el diseño UX e UI de tus aplicaciones y webs.

52 min (18 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:2/12/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.