() translation by (you can also view the original English article)
En mi último tutorial, te mostré cómo estructurar una aplicación móvil en Adobe XD. En este tutorial retomaremos donde lo dejamos y convertiremos esa estructura en un prototipo interactivo que puedes compartir con clientes, desarrolladores y otros miembros del equipo.
Continuaremos diseñando nuestra aplicación hipotética, llamada "Bucket", que permitirá a los usuarios ver y agregar una lista de cubos de su vida. Publicaremos el prototipo terminado en línea, para que cualquier persona que tenga un enlace pueda verlo e interactuar con él. También publicaremos sus "especificaciones de diseño", una excelente nueva característica que permite a los desarrolladores explorar las propiedades de tu diseño e incluso descargar recursos.
1. Comienza con un kit de interfaz de usuario (opcional)
Este no es un tutorial de diseño gráfico, por lo que obtendremos un poco de ayuda visual de un kit UI existente. Aquí hay una selección de kits de interfaz de usuario de Envato Elements, y del que voy a pedir prestados recursos se llama Profile. XD es capaz de trabajar con archivos de Sketch, por lo que sólo puedes descargar el archivo y abrirlo con XD.
Una vez que hayas abierto el Kit UI, cópialo sobre las estructuras del último tutorial y pégalas junto a las pantallas del Kit UI. Si no has podido seguir el último tutorial, no te preocupes. Puedes comenzar con las pantallas del kit UI.
Siéntete libre de copiar y pegar cualquier elemento que desees de las pantallas del kit a tu estructura. También puedes reorganizar y eliminar lo que desees.
Echa un vistazo a la captura de pantalla de abajo para ver cómo se compara la estructura original con las pantallas con las que trabajaremos durante este tutorial. Recomendaría jugar con los elementos en el kit UI y llegar a tu propia versión; esta es una buena práctica para trabajar con recursos visuales y producir algo de acuerdo a tus propias preferencias. Puedes eliminar todas las demás pantallas una vez que hayas terminado.
2. Hazlo interactivo
Vamos a conectar nuestras pantallas mediante la creación de enlaces. Haz clic en el botón Prototipo en la parte superior izquierda de tu mesa de trabajo para cambiar a la pantalla Prototipo. Haz doble clic en el botón Iniciar sesión en la nueva pantalla "Bucket" para seleccionarlo. Haz clic en la flecha azul que aparece junto a ella y arrástrala a la siguiente pantalla. Aparecerá una ventana emergente con opciones para crear el enlace entre las dos pantallas.
La versión más reciente de XD te permite usar tres tipos de desencadenantes: Toque, Arrastre y Voz. Vamos a utilizar la nueva función de voz para uno de nuestros enlaces, así como la opción de toque regular para los demás (se puede elegir de manera diferente, por supuesto!).
Selecciona Voz en el menú desplegable Desencadenante. Escribe "Iniciar sesión" como el comando. Selecciona Transición en el menú Acción y Empujar hacia arriba en el menú Animación. Para obtener más detalles sobre la interacción de voz, echa un vistazo a este video de Adi Purdila:
Repite el proceso con el botón "Añadir" y conéctalo a la tercera pantalla, pero esta vez selecciona Toque en el menú Desencadenante (esto creará un botón contextual). Conecta el botón "Hecho" en la tercera pantalla con la primera pantalla y vincula la flecha en la parte superior de la segunda y tercera pantalla con la pantalla anterior (esto te permitirá cambiar entre las pantallas cuando las previsualizas).
Bonus: Intenta ajustar las selecciones de aceleración y duración en la ventana emergente del enlace y mira qué sucede con tus transiciones una vez que comiences a previsualizarlas.
3. Vista previa de tu prototipo
Para probar nuestros enlaces, haz clic en el botón Vista previa del escritorio (el icono de reproducción en la parte superior derecha del espacio de trabajo). Se abrirá una ventana de vista previa. Para probar nuestro comando de voz para la primera pantalla, mantén pulsado el botón Espacio y di "Iniciar sesión". Suelta el botón Espacio y debería aparecer la segunda pantalla.
Pulsa en el botón Agregar para ir a la tercera pantalla y asegúrate de que todos los demás enlaces que has creado funcionan según lo esperado.
Opcional: Puedes hacer clic en el botón Grabar en la parte superior de la pantalla de vista previa para grabar un vídeo de tu experiencia.
4. ¡Comparte!
Con todo funcionando, estamos listos para compartir el prototipo. Haz clic en el botón azul Compartir de la parte superior izquierda de la pantalla. La versión actual te ofrece cinco opciones diferentes. Compartir un documento te permite invitar a un colaborador por correo electrónico para trabajar en tu proyecto (siempre que tengan XD también), Grabar vídeo te permite hacer exactamente eso (grabar un vídeo de la revisión de tu prototipo), y administrar enlaces... Te lleva en línea a tu espacio de trabajo en la nube, donde puedes ver, agregar y eliminar prototipos que ya has publicado. Echemos un vistazo más detallado a las opciones Compartir para revisión y Compartir para desarrollo.
Haz clic en Compartir para revisión.
Escribe "Bucket" como título y selecciona tus opciones. Para este tutorial, quiero la vista previa en línea para permitir comentarios, abrir en pantalla completa y mostrar sugerencias de Hotspot, pero también puedes proteger con contraseña tu prototipo en línea.
Haz clic en Crear enlace público cuando hayas terminado. Una vez procesado, verás tres iconos azules junto al texto Compartir para revisión. Elige Abrir en el navegador (el que está al extremo derecho) para ver tu prototipo en la web en tu navegador.
Vamos a probar la opción Compartir para desarrollo a continuación. Vuelve a hacer clic en el botón Compartir y selecciona Compartir para desarrollo.
Escribe "Bucket" como título y selecciona iOS en el menú desplegable Exportar para. Haz clic en el botón Crear enlace público y, una vez completado el procesamiento, abre las especificaciones de diseño publicadas en el navegador.
Deberías poder ver todas tus pantallas en el navegador ahora. Haz doble clic en cualquier elemento y mostrará sus propiedades. Esto permite a los desarrolladores explorar los flujos y las mediciones en tu prototipo y dejar comentarios.
Consejo profesional: Si deseas que los desarrolladores puedan descargar recursos (como cualquier imagen que hayas utilizado) desde la vista Especificaciones de diseño, puedes hacerlo marcándolos antes de publicar tus especificaciones de diseño.
De vuelta en XD, selecciona el botón Capas de la parte inferior izquierda y luego haz doble clic en cualquier imagen. El panel Capas resaltará el nombre del archivo de imagen. A continuación, puedes seleccionar el icono Marcar para exportación por lotes junto al nombre para que se pueda descargar en las especificaciones de diseño.
Conclusión
¡Felicitaciones! Puedes copiar tus enlaces y compartir tus prototipos con cualquier persona que desees, como usuarios potenciales, desarrolladores o tu cliente. Un método de creación de prototipos tan rápido también es ideal para compartir una idea o maqueta como parte de tu propuesta para un cliente potencial. Puedes mostrar al propietario de un negocio cómo se vería y sentiría su aplicación de manera diferente en diferentes mercados, incluso antes de que se comprometan.
Manténte atento para más tutoriales de XD. Encontrarás que está actualizado con una serie de grandes nuevas características con bastante frecuencia, por lo que seguiremos explorando en futuros tutoriales.
