Conozca cómo crear prototipos interactivos en Adobe XD que usted u otras personas pueden usar para validar la experiencia del usuario.

Una vez que haya completado el diseño de sus pantallas, puede conectarlas entre sí para visualizar cómo los usuarios pueden experimentar su aplicación o sitio web.

Adobe XD le permite crear prototipos interactivos para visualizar la navegación entre pantallas o mallas metálicas. Puede obtener una vista previa de la interacción, para validar la experiencia del usuario e iterar en su diseño para ahorrar tiempo en el desarrollo. También puede grabar las interacciones y compartirlas con los interesados para obtener sus comentarios. Aumente/reduzca con el zoom para ver porciones específicas del prototipo en detalle.

Establecer de la pantalla Inicio

La pantalla Inicio es la primera pantalla de su aplicación o sitio web. Sus usuarios comienzan a navegar por la aplicación o el sitio web desde la pantalla Inicio.

Además, cuando obtiene una vista previa de su prototipo y no hay nada seleccionado, la vista previa comienza por la pantalla Inicio. Es decir, de forma predeterminada, la pantalla Inicio es la primera mesa de trabajo a la que se agrega un cable.

  1. Cambie a modo Prototipo.

  2. Haga clic en la mesa de trabajo que desea establecer como pantalla Inicio. Aparecerá un icono de inicio gris en la esquina superior izquierda.

  3. Haga clic en el icono Inicio. Se volverá de color azul, indicando que la mesa de trabajo o la pantalla ha quedado configurada correctamente como pantalla Inicio.

    Establecer como opción de pantalla Inicio
    Establecer como opción de pantalla Inicio
    Pantalla Inicio establecida
    Pantalla Inicio establecida

    Para establecer una mesa de trabajo diferente como pantalla Inicio, simplemente haga clic en el icono Inicio asociado con esa mesa de trabajo.

Vincular elementos interactivos a pantallas de destino

Antes de comenzar a vincular las mesas de trabajo o las pantallas, asigne nombres adecuados a las mesas de trabajo. Hacerlo así le ayudará a identificar la pantalla a la que desea vincular una pantalla determinada.

  1. Cambie a modo Prototipo.

  2. Haga clic en el objeto que desee vincular.

    Aparecerá en el objeto un controlador con una flecha. Cuando pase el ratón sobre el controlador, el cursor pasará a ser un conector.

    Vinculación de elementos interactivos a pantallas de destino
    Vinculación de elementos interactivos a pantallas de destino
  3. Haga clic y comience a arrastrar el ratón para ver el conector. Suelte con el ratón en la mesa de trabajo o la pantalla de destino.

    Al cablear el primer elemento, la mesa de trabajo de dicho elemento se configura como mesa de trabajo de inicio. 

  4. En el panel Interacción que aparece en el Inspector de propiedades, puede especificar lo siguiente:

    • Transición y duración: si desea mantener la posición de desplazamiento al realizar la transición a otra mesa de trabajo, seleccione Preservar la posición de desplazamiento. Esta opción es útil para cuando se estén creando prototipos de barras de navegación o pies de página fijos. Si el usuario se desplaza por la mesa de trabajo original, la siguiente mesa de trabajo reconoce la posición de desplazamiento desde la mesa de trabajooriginal. Al hacer clic en una mesa de trabajo o en cualquier elemento de ella, puede controlar la posición de desplazamiento para mantener el lugar original de una pantalla a la siguiente. El control evita el desplazamiento repetido hacia delante y hacia atrás en el archivo del proyecto. Por ejemplo, si un usuario se desplaza hasta la posición y = 1000 en la mesa de trabajo A, la transición a la mesa de trabajo B se establecerá de manera predeterminada con y = 1000. Si la mesa de trabajo original no tiene establecida la posibilidad de desplazamiento, la opción Preservar la posición de desplazamiento estará inactiva.
    • Superposición: si desea simular los estados o las transiciones, como menús desplegables y teclados deslizantes, seleccione Superposición.

    Presione Esc o haga clic fuera de la ventana emergente para descartarlo.

    Trabajo con superposiciones
    Trabajo con superposiciones
  5. Repita los pasos anteriores para vincular todos los elementos interactivos de su proyecto.

    SUGERENCIA:

    En modo Prototipo, para agilizar el proceso de creación de interacciones:

    • Puede copiar y pegar objetos entre mesas de trabajo. El objeto en cuestión se copiará y pegará junto con su interacción.
    • También puede copiar y pegar solo una interacción. Copie un objeto, haga clic con el botón derecho en otro objeto y luego seleccione Pegar interacción. Solo se pegará la interacción.
    • Para llevar el elemento a una pantalla diferente, haga clic nuevamente en el controlador y arrástrelo a la pantalla requerida.
    • Para ver las conexiones hacia o desde una mesa de trabajo determinada, seleccione el título de la mesa de trabajo.
    • Para eliminar una interacción, arrastre el controlador de destino del conector fuera de la mesa de trabajo de destino hasta el área de borradores.
    Elementos interactivos vinculados a pantallas de destino
    Elementos interactivos vinculados a pantallas de destino

    A. Pantalla Inicio B. Mesas de trabajo vinculadas C. Conexión saliente D. Conexión entrante 

    Adobe XD permite usar métodos abreviados de teclado y desencadenadores de mando de juego para simular aplicaciones de escritorio nativas y crear prototipos de experiencias o diseños de juego enriquecidos. Al cablear un prototipo, puede seleccionar Teclas/Mando de juego en la lista desplegable Desencadenador y asignar cualquier tecla. Estos desencadenadores pueden usarse con Tocar, Arrastrar, Tiempo y Voz para crear prototipos para diferentes casos de uso, como aplicaciones de escritorio, juegos y presentaciones.

    Nota:

    Los vínculos grises indican las conexiones salientes y los vínculos azules muestran las conexiones entrantes.

Utilizar transiciones temporizadas

La transición programada en Adobe XD le permite crear experiencias de prototipos enriquecidas, como flujos de incorporación, redirección automática a una pantalla diferente o barras de progreso. De igual manera que puede Tocar para desencadenar transiciones, puede usar Retrasar para especificar la duración de la transición. Por ejemplo, al crear flujos de trabajo de incorporación, puede utilizar la opción Retrasar para vincular y realizar transiciones entre mesas de trabajo.

Como diseñador, también puede usar el tiempo para desencadenar transiciones a otras mesas de trabajo. Por ejemplo, si está diseñando flujos de incorporación, puede utilizar la transición temporizada para comenzar con una pantalla de bienvenida de un flujo de aplicación y realizar una transición automática entre algunas pantallas de bienvenida.

Crear una transición temporizada para flujos de trabajo de incorporación

Transiciones temporizadas
Transiciones temporizadas

A. Seleccionar el desencadenador en tiempo B. Establecer un retardo de tiempo C. Seleccionar una acción en transición D. Seleccionar la mesa de trabajo de destino E. Seleccionar el efecto de animación 
  1. En XD, cambie al modo Prototipo .

  2. Para ver el conector, seleccione la mesa de trabajo y coloque el cursor del ratón sobre el controlador.

  3. Haga clic y entonces arrastre y suelte el conector desde la mesa de trabajo de origen a la mesa de trabajo de destino. Al cablear el primer elemento, la mesa de trabajo de dicho elemento se configura como mesa de trabajo de inicio.

  4. Haga clic en el conector para ver el panel de interacción del Inspector de propiedades y seleccione las siguientes opciones:

    • Desencadenador: establézcalo en Tiempo.
    • Retardo de tiempo: establezca el período de retardo de la transición en Segundos.
    • Duración: establezca la duración de la transición Segundos.
    • Acción: establézcala en Transición.
    Establecer desencadenador, retardo, duración y acción
    Establecer desencadenador, retardo, duración y acción

    A. Establecer el desencadenador en Tiempo B. Establecer el retardo en Segundos C. Establecer la acción en Transición D. Establecer la duración en Segundos 
  5. Seleccione el icono Vista previa de escritorio  para obtener una vista previa de los cambios.

Revisar el vínculo del prototipo en la Web

  1. En la aplicación de escritorio, haga clic en el botón Compartir de la parte superior derecha y elija Compartir para revisión. Una vez creado el vínculo, puede copiarlo y abrir el prototipo en el navegador. Las transiciones de tiempo se reproducen conforme se va diseñando en la aplicación de escritorio de XD.

  2. Para detener la transición de tiempo, presione la tecla de flecha hacia atrás o el botón de navegación de flecha hacia atrás, que le devolverá a la pantalla anterior.

  3. Cuando detenga la transición por primera vez, Adobe XD mostrará una notificación de que se ha detenido la transición temporal. Para reanudar, presione el botón de navegación de flecha hacia la derecha o la tecla del teclado de flecha hacia la derecha.

Vínculo a la mesa de trabajo anterior

  1. En modo Prototipo, seleccione el elemento que desee vincular. Cuando aparezca una pequeña flecha, haga clic en ella, lo que automáticamente establecerá la acción como mesa de trabajo anterior. También puede vincular el elemento a una mesa de trabajo y seleccionar Acción > Mesa de trabajo anterior.

    Seleccionar la mesa de trabajo anterior
    Seleccionar la mesa de trabajo anterior
  2. Cuando la Acción se establece en Mesa de trabajo anterior, el icono cambia.

    Establecer el destino
    Establecer el destino
  3. Utilice la ventana de vista previa para obtener una vista previa del vínculo.

Desvincular mesas de trabajo

  1. En modo Prototipo, seleccione Objetivo > Ninguno.

    También puede arrastrar el cable desde la mesa de trabajo al área de borradores (el espacio gris entre las mesas de trabajo).

    Desvincular mesas de trabajo
    Desvincular mesas de trabajo

    Nota:

    La opción Ninguna solo está disponible si la mesa de trabajo está vinculada a un destino.

  2. Vista previa de las vinculaciones en un navegador.

    Se eliminan todos los vínculos de destino previamente establecidos desde el elemento.

Obtener una vista previa de interacciones y grabarlas

Nota:

La grabación de prototipos no se admite en Adobe XD en Windows. Sin embargo, existe una solución alternativa. Presione las teclas Windows + G y use la grabadora nativa para grabar la ventana Vista previa.

Para probar el prototipo y las interacciones, puede obtener una vista previa del prototipo. También puede grabar la vista previa y guardar la grabación como archivo .mp4. Luego puede elegir compartir el archivo .mp4 con los interesados, quienes podrán ver (o revisar) la visita del prototipo y facilitar comentarios.

  1. Haga clic en el icono Vista previa de escritorio. La ventana Vista previa aparecerá, mostrando la mesa de trabajo en el foco.

    Para probar la navegación entre pantallas, haga clic en los elementos interactivos.

    Puede editar el diseño y las interacciones en su prototipo mientras realiza una vista previa en la ventana de vista previa. Los cambios quedan disponibles instantáneamente para su previsualización.

  2. Para grabar la interacción, haga clic en el icono Grabar de la ventana de vista previa. Para finalizar la grabación, pulse Esc o vuelva a hacer clic en el icono Grabar.

    Grabar interacciones en prototipos
    Grabar interacciones en prototipos
  3. Especifique un nombre y una ubicación donde desee guardar la grabación. La grabación se guarda como archivo .mp4.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea