Prevista de escritorio con Adobe XD

Screen Shot 2018-04-16 at 3.42.39 PM

En la parte superior derecha de XD existen cuatro botones importantes:

Screen Shot 2018-04-16 at 3.47.08 PM

  1. Zoom
  2. Device Preview
  3. Desktop Preview
  4. Share

Por el momento hablemos del tercer botón; el “Desktop Preview“. Cuando activamos este botón se abre una ventana flotante la cual nos muestra la maqueta de tal forma, como si estuviéramos usando el celular para interactuar con nuestra aplicación. También puedes activar esta ventana con los atajos de tu teclado “Command” + “return” o “enter“. Esta ventana tiene la habilidad de mantenerse abierta aún mientras trabajas en arreglos o cambios en la maqueta. Cada vez que tocas un “artboard“; la ventana de Preview en el escritorio nos muestra o se actualiza con la imagen de la ventana en uso y todo arreglo se actualiza al instante. La misma tiene la habilidad de grabar un video de la interactividad de la maqueta. Digamos que ya tienes tu maqueta vinculada con todos los botones enlazados y deseas grabar un video para enviarlo al cliente o amistades para que puedan apreciar cómo se comportaría la maqueta una vez un programador le da vida.

Screen Shot 2018-04-16 at 4.04.49 PM

Con la ventana de vista previa “Preview” puedes grabar las acciones de la maqueta.

Si presionas el botón superior que se encuentra al lado de los segundos 00:00; la ventana comenzará a grabar todo lo que tocas y mueves con el teclado o ratón de tu computadora. Te preguntarás; ¿Con el teclado?; Si no tienes la maqueta vinculada aún, puedes usar las teclas de flechas en tu teclado para navegar de izquierda a derecha en ambas direcciones, por toda la maqueta. En el siguiente video pueden ver como logro navegar por la maqueta usando solamente el teclado de la computadora.

 

Este video luego puede ser parte de una presentación final al momento de venderle la idea de la aplicación al cliente. Esta ventana muestra, a mi entender, muchas probabilidades de uso. Si regresamos un poco al principio de este escrito te preguntarás y que hace la sección de Zoom; Device Preview y Share? Con el botón de zoom puedes acercarte y alejarte mientras trabajas con la maqueta; y hasta puedes entrar los valores con tu teclado.

Screen Shot 2018-04-16 at 4.14.07 PM

Zoom.

Con el botón de “Device Preview” puedes ver tu maqueta usando tu celular  e interactuar con la misma como ti la misma estuviera ya programada por un “Developer” o “Programador“; siempre y cuando tengas instalado en tu celular la aplicación de Adobe XD que encuentras en Adobe.com.

Screen Shot 2018-04-16 at 4.16.12 PM

Device Preview.

Nota: Recuerda instalar esta aplicación en tu celular para los próximos escritos.

Screen Shot 2018-04-16 at 4.22.47 PM

Adobe XD para iPhone.

Con el botón de “Share” puedes enviarle una copia a tus amigos o colegas con los que estas trabajando la aplicación para que naveguen y vean tu maqueta y recibas un “Feedback” o sugerencias de ellos. Este botón usa tu espacio en la nube de Adobe.com; te suministra un “link” o vínculo para que distribuyas. Recuerda que todo aquel que obtenga el vínculo puede ver tu trabajo secreto! jejejejeje, mucho cuidado a quién lo repartes.

Screen Shot 2018-04-16 at 4.17.03 PM

Share.

¡Mañana comenzaremos a vincular nuestra maqueta!

¡Buenas noches!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s