Construye prototipos con Adobe XD

[dieciséis] (Crédito de la imagen: Futuro)

Si no tiene Adobe XD, puede descargarlo e instalarlo aquí . Una vez que la instalación haya completado, abra el software y la pantalla de bienvenida le permitirá elegir un tamaño de pantalla para descargar. En este caso, elija el iPhone 6/7/8, ya que es el tamaño correcto para este proyecto, pero verá que hay una variedad de tamaños disponibles.

02. Importar la primera imagen.

Hay diferentes maneras de importar imágenes, pero en esta primera instancia vaya a Archivo & GT; Importar. Elija la carpeta 'Activos' de los archivos del proyecto y la primera imagen a la importación será 'sky.png'. Colóquelo en la parte superior de la pantalla y muévalo un solo par de píxeles hacia abajo.

03. Coloque la cabina.

La siguiente imagen para el diseño será la 'cabina.png'. Solo importe esto de la misma manera que lo hiciste en el paso anterior y luego lo colocas para llenar la pantalla. Finalmente, importe la imagen 'árboles.png' y colóquelo en la parte inferior de la pantalla con los árboles sobre el lago.

04. Trae el logo.

La razón por la que esas imágenes son capas separadas es de modo que cuando se crea una transición entre las pantallas que pueden moverse por separado. Vaya al menú Archivo y elija Importar. Esta vez, seleccione 'logo.ai', que es una imagen vectorial. Coloque esta imagen en el centro superior de la pantalla.

05. Añadir un círculo

Seleccione la herramienta del círculo y dibuje un círculo un poco más grande que el logotipo. En el panel de propiedades de la derecha, retire el golpe y haga el fondo negro. Seleccione Fondo borroso y reduzca el brillo a -30 para que el círculo siga siendo negro.

06. Reordenar los gráficos.

Ahora el círculo necesita moverse detrás del logo. Seleccione Object & GT; Organiza y envía hacia atrás. Como en otros productos de Adobe, también es Cmd / ctrl + [ para mover cualquier gráfico hacia atrás en el pedido de la capa. El uso de la corcha cuadrada derecha, mientras tanto, traerá un objeto hacia adelante en el orden.

07. Dejar caer el micrófono.

Ahora importe la imagen 'Mic.ai' y cambie el tamaño de la imagen para que sea relativamente pequeño. Coloque esto en la parte inferior de la pantalla. Dibuja un círculo alrededor de esto y desmarque el relleno para que se elimine. Luego haz que el golpe sea blanco y dos píxeles de ancho. Posición que alrededor de la imagen 'MIC'.

08. Mensaje de texto

Use la herramienta de texto para agregar las palabras 'hablar para buscar' debajo del micrófono. Haz que el texto sea blanco y cámbielo a Helvetica Neue condensada negra. En la parte inferior izquierda de la pantalla, haga clic en el icono del panel Activos para abrirlo. Con el texto seleccionado en la pantalla, haga clic en el icono '+' junto a 'Estilos de caracteres' para guardar este formato para el texto.

09. Únete a un grupo

Seleccione el icono del panel de la capa en la parte inferior izquierda de la pantalla. En la pantalla, seleccione el texto 'Buscar' y CAMBIO DE CAMBIO Para agregar el círculo y el icono del micrófono. Ve a objeto y elige grupo. En el panel de la capa, cambie el nombre de este grupo 'Búsqueda'. Es útil para nombrar grupos, especialmente al animarlos.

10. Grupo el logo

Al igual que en el último paso, seleccione el logotipo y el círculo borroso a su alrededor, luego agrupa. En el panel de la capa, cambie el nombre del 'logo' de todo el grupo 'para que sea fácilmente identificable si necesita editar esto otra vez más tarde. Por el momento el diseño para la primera pantalla está completo.

11. elementos extra

A pesar de que la primera pantalla está completa, todavía hay más elementos de diseño que deben agregarse. Así es como se crea la animación cambiando el posicionamiento de los elementos entre las pantallas. Ir a la herramienta rectangular y mantener Cambio Para agregar un cuadrado en la pantalla, haciendo que el borde blanco.

12. DIFERENTE Importación

Ahora abra la carpeta para los activos a través de su sistema operativo. Seleccione la imagen 'Cabin1.png' y arrastre esto directamente al cuadrado que creó en el paso anterior. Se enmascarará automáticamente dentro de esto. Haga doble clic para editar la posición de la imagen y asegúrese de que la cabina esté visible en el cuadrado.

13. Añadir una etiqueta

Uso de la herramienta de texto, agregue la etiqueta 'Cabaña forestal' debajo del texto y use el panel Activos para diseñar el texto en el estilo guardado desde el paso 8. Seleccione la imagen y la etiqueta y agrupa. Nombra el grupo 'Cabina izquierda' en el panel Capas.

14. Duplicar el grupo.

Normalmente, repitiendo un elemento de interfaz es el trabajo perfecto para la herramienta 'rejilla de repetición'. Sin embargo, esto va a necesitar una animación específica, que no funciona con la red repetida. Seleccione el grupo de imágenes y texto, luego copie y peguela para que se asiente junto al original, y agregue la imagen 'cabin2.png' en su lugar.

15. Cambiar nombre y luego copiar de nuevo.

Cambie el texto a 'Cabina de nieve', y en el panel Capas Nombre esta 'Cabina derecha'. Seleccione la cabina izquierda y derecha y duplíquelos, coloque los duplicados a continuación y actualice su texto e imágenes con 'cabin3.png' y 'cabin4.png'. Grupo ambos juntos y nombran la 'cabina inferior' del grupo.

16. Título del texto

Agregar texto a la página con el texto 'Resultados de búsqueda para cabañas'. Dé a este The Rockwell TypeFace y guarde esto en los estilos de caracteres en el panel Activos. Ahora coloque el grupo 'Cabina inferior' directamente en la parte inferior de la pantalla y tome la apariencia hasta cero para que sea invisible en esta pantalla.

17. Cambio de opacidad.

Ahora seleccione las cabinas izquierda y derecha, muévelas a la parte inferior de la pantalla y tome el control deslizante de apariencia a cero. Repita de nuevo para el texto de búsqueda. Cuando nos mudamos a otra pantalla, todos animarán a sus nuevas posiciones. En el panel de la capa, mueva la 'cabina izquierda' sobre todos los otros grupos de cabina.

18. Duplicar la pantalla.

Seleccione el tablero de arte haciendo clic en su nombre, luego haga doble clic en el tablero de arte y cambie el nombre a 'Inicio'. Copia y pega el tablero de arte y rename 'Búsqueda'. Ahora seleccione el logotipo y muévalo hasta casi la pantalla, luego reduzca su apariencia a cero.

19. Mueve los fondos.

Seleccione la imagen del cielo y lo empuje ligeramente en la pantalla. Seleccione la imagen de la cabina y muévala hasta que la cabina esté en la parte superior de la pantalla. Luego haga clic en la imagen de los árboles y muévala sobre la cabina. Finalmente, seleccione el grupo 'Buscar' y reduzca la apariencia hasta cero.

20. Aparecen nuevos elementos.

Seleccione los resultados de búsqueda en el panel Capa y brinde su apariencia hasta 100. Sucénelo en la pantalla. Repita esto para la cabina izquierda, cabina derecha y cabina inferior. Use la herramienta de la pluma para dibujar un botón de espalda simple y agregue un círculo alrededor de él. Haz que el fondo se desenfoque y tome el brillo de eso hasta -30.

21. Completa el botón Atrás

Seleccione la flecha hacia atrás y círculo, agrupe y nombra el botón 'BOTÓN ATRÁS' en el panel Capa. Cambie al modo 'prototipo' presionando 'prototipo' en la parte superior izquierda de la interfaz XD. Seleccione la pantalla de inicio, arrastre la flecha azul a la pantalla de búsqueda y aparecerá un panel emergente.

22. comando de voz

Cambie el gatillo a la voz y escriba la palabra 'Buscar' como el comando de voz para controlar esto. Cambie la acción para animar automáticamente y aliviarse a Snap. Hacer la duración de 1.5s. En la pantalla de búsqueda, haga clic en el botón Atrás y arrastre la flecha azul a la pantalla 'Inicio'. Solo cambia el gatillo para tocar.

23. Prueba el prototipo.

En la parte superior derecha de la interfaz XD es un botón de reproducción. Haga clic en esto y un prototipo de trabajo aparecerá ahora en la pantalla. En la página de inicio, deberá mantener presionada la barra espaciadora mientras habla el comando de voz 'Buscar'. Cuando suelte la barra espaciadora, lo llevará a la siguiente pantalla y animará la interfaz gráfica en su posición.

24. Volviendo

Una vez que la transición se ha ejecutado, puede presionar el botón Atrás para volver a la pantalla de inicio. Cierre el prototipo y haga clic en la pantalla de búsqueda, luego haga clic en la flecha azul a la derecha (no arrastre). Cambie el gatillo a tiempo, haga de los 0s de demora y establezca la reproducción de la acción en voz. Haz el discurso 'Resultados de búsqueda para cabañas disponibles'.

25. Confirmación del habla

Pruebe esto ahora con el botón de reproducción para escuchar una confirmación de voz de la búsqueda. Cierra el prototipo cuando has probado esto. Se va a crear otra pantalla, así que hagamos clic en la vista 'Design' en la parte superior izquierda de la interfaz XD. Haga clic en la pantalla de búsqueda haciendo clic en el nombre y luego copiarlo y pegarlo.

26. Escalado de la imagen

Cambiar el nombre de la nueva pantalla 'cabina'. Haga doble clic en la imagen para la capa 'Cabina izquierda'. Cambie el tamaño de las manijas de la esquina para que llena la pantalla, luego vuelva a colocar la imagen dentro para que cubra esa pantalla. Haga clic en el texto de resultados de búsqueda y tome la apariencia hasta cero para eliminarla desde la vista.

27. Nuevos elementos de pantalla.

Haga doble clic en el texto 'Cabaña forestal' ya que es parte del grupo. Amplíe el tamaño del texto a 26 píxeles y muévalo ligeramente en la pantalla. Agregue texto a la pantalla en Helvetica Neue Medium a 14 píxeles de tamaño y colóquelo a blanco para sobresalir en el fondo. Agregue una línea blanca con la herramienta de línea debajo del encabezado.

28. Crea un botón

Use la herramienta Rectángulo para dibujar un rectángulo en la pantalla en la parte inferior del diseño. Arrastre en las manijas de la esquina para dar a esta forma las esquinas redondas. Agregue la palabra 'Reservar' a esto, utilizando el estilo de carácter guardado en el panel Activos para Helvetica Neue en negrita condensada.

29. Mover al modo prototipo.

Todos los elementos de diseño están en su lugar ahora para todo el diseño de la aplicación. Muévase al modo 'prototipo' haciendo clic en la palabra 'prototipo' en la esquina superior izquierda. En la pantalla de búsqueda, haga clic en el grupo 'Cabaña forestal' de la imagen y el texto. Arrastre el mango azul de esto a la pantalla 'Cabina'.

30. Configuraciones de animación

En el panel emergente para la transición entre pantallas, elija Toque como el gatillo, luego haga que la acción esté animada automáticamente. Sigue facilitándose como SNAP, pero reduce la duración de esto a 0.6s. Esto asegura que la animación no arrastre: el movimiento de la primera pantalla a la segunda pantalla tuvo mucho movimiento que requirió una transición más larga.

31. Vincular el botón ATRÁS

Ahora seleccione el botón ATRÁS de la pantalla final y arrastre la flecha azul de esta llamada a la pantalla 'Buscar'. Todos los ajustes de la transición anterior deben recordarse. Ahora está listo para seguir adelante y probarlo haciendo clic en el botón Reproducir.

32. Auto-animado

Lo que verá con el auto-animado ahora es que la imagen se expande para llenar la pantalla, y los elementos que ya no son necesarios se desvanecerán mientras el nuevo texto se desvanecerá. El contrario ocurre al regresar. Esto proporciona una buena manera de ver el auto-animado que trabaja a través de tres pantallas.

33. Guarda el proyecto

Por defecto, su proyecto debe guardar automáticamente en la nube creativa, pero es una buena idea guardar una copia en su propio disco duro en caso de que haya problemas. Haga clic en Archivo y GT; Guarde, cambie la ubicación a su propia computadora y nombra el proyecto con un nombre adecuado.

34. Compartiendo el proyecto.

Todo el punto de prototipado es probar el proyecto en otras personas. Afortunadamente, hay un botón de acción en la parte superior derecha de la interfaz XD que hace que esto sea una brisa. Haga clic en el botón Compartir, y en el menú DROP que aparece, seleccione la opción Compartir para su revisión.

35. Publicar prototipo.

En la siguiente pantalla, se le dice que el soporte de animación automática aún no está disponible para la Web, pero viene pronto. Haga clic en Crear enlace público y luego haga clic en el enlace en la parte superior derecha para visitar el enlace público en un navegador web. Deberá sostener la barra espaciadora para usar el comando de voz con el prototipo.

36. Versión de video

Otro prototipo se puede compartir grabando la interfaz en acción. Haga clic en el botón Compartir y elija un video de grabación. Esto abrirá una ventana, y cuando cierre esto, se le solicitará que guarde una grabación de la pantalla como un archivo MP4, que también es una forma útil de compartir su prototipo.

Este artículo se publicó originalmente en la emisión 285 de la revista Creative Web Design Design Diseñador web . Comprar emito 285 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

• Diseño de la aplicación móvil: Guía de un principiante
• Cómo crear una aplicación con vue.js
• Llegue a empuñaduras con aplicación móvil a bordo