Conozca cómo diseñar y crear prototipos utilizando Animación automática con gestos de arrastre.

Animación automática permite crear prototipos fácilmente, con transiciones animadas inmersivas. Simplemente, duplique mesas de trabajo, modifique las propiedades de los objetos, como el tamaño, la posición y la rotación, y aplique una acción de animación automática para crear una transición animada entre mesas de trabajo. Para utilizar Animación automática, asegúrese de que los objetos que intenta animar tengan el mismo nombre de capa entre las mesas de trabajo. Puede usar la experiencia de búsqueda mejorada para mostrar solo las capas y mesas de trabajo relevantes que contengan una palabra clave, sin la estructura de capas (por ejemplo, grupos expandidos).

¿Cómo funciona la animación automática?

Tradicionalmente, los diseñadores usaban múltiples transiciones a través de diversas mesas de trabajo para conectar sus interacciones de los prototipos.  Con Animación automática, los diseñadores pueden usar XD para crear microinteracciones entre dos mesas de trabajo en las formas siguientes:

  • Duplicando objetos entre mesas de trabajo,
  • Modificando sus propiedades, como el tamaño, la posición y la rotación. Para obtener información sobre las propiedades admitidas, consulte Propiedades admitidas para animación automática.
  • Cambiando al modo de prototipo,
  • Añadiendo la Animación automática como una nueva transición, y
  • Obteniendo una vista previa del prototipo en escritorio o móvil.

De igual manera que al usar la Pulsación para desencadenar transiciones, puede combinar Arrastrar con Animación automática para especificar microinteracciones en las mesas de trabajo. Los nuevos objetos van apareciendo y los objetos eliminados se desvanecen durante las transiciones que utilizan Animación automática.

Nota:

  • Los prototipos que utilizan Animación automática tienen ciertas limitaciones con la animación de textos. Actualmente no se admite la animación del espaciado entre caracteres, el espaciado entre líneas ni el espaciado entre párrafos en la Web.
  • No se admiten actualmente los gestos de arrastre en la Web. Los prototipos que utilicen desencadenadores por arrastre se disolverán al tocar.

¿Cómo funciona un gesto de arrastre con la animación automática?

Adobe XD ha evolucionado a partir de una aplicación basada en clics a ofrecer opciones de creación de prototipos divergentes, como Tiempo, Pulsación, Arrastre y Voz.

Puede usar un gesto de arrastre para simular experiencias de usuario, como arrastrar tarjetas o pantallas. Al seleccionar Arrastrar en la lista de desencadenadores, XD cambia automáticamente la Acción a Animación automática.

Nota:

Actualmente, la vista previa de un gesto de arrastre solo puede efectuarse en escritorio y móvil.

  1. En el modo Prototipo, modifique la posición del mismo objeto en la mesa de trabajo de destino y establezca Desencadenador en Arrastre.

  2. La posición inicial y la final de un objeto determinan la dirección del arrastre. Arrastre de izquierda a derecha en la ventana de vista previa o aplicación móvil si el objeto de la primera mesa de trabajo está a la izquierda y la posición del mismo objeto en la segunda mesa de trabajo está a la derecha. De manera similar, puede crear un evento de arrastre de derecha a izquierda, o de arriba abajo, y así sucesivamente.

  3. Para obtener una vista previa de los cambios en escritorio o móvil, seleccione el icono Vista previa.

     

    Gesto de arrastre en el trabajo
    Gesto de arrastre en el trabajo

Crear una transición de animación automática utilizando un gesto de arrastre para la incorporación de flujos de trabajo

  1. En modo Prototipo, seleccione todas las mesas de trabajo del lienzo para ver los cables a través de las mesas de trabajo.

  2. Arrastre un conector desde una capa de 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.

  3. En la pantalla elevada Desencadenar, configure las siguientes opciones:

    • Desencadenar: establece el tipo de gesto en Arrastre.
    • Acción: establézcala en Animación automática.
    • Destino: establezca el destino en la segunda mesa de trabajo.
    • Suavizado: seleccione las opciones en la lista desplegable.
    Flujo de trabajo de Animación automática
    Flujo de trabajo de Animación automática

    A. Tipo de gesto para arrastrar B. Acción para Animación automática C. Establecer la mesa de trabajo D. Seleccionar las opciones de suavizado 
  4. Para obtener una vista previa de los cambios en escritorio o móvil, seleccione el icono Vista previa de escritorio.

    Animación automática en el trabajo
    Animación automática en el trabajo

Grabar transiciones con animación automática

  1. En la aplicación de escritorio de XD, haga clic en el icono Compartir de la parte superior derecha y elija Grabar vídeo.

  2. En el modo de vista previa, use botón de grabación para grabar las animaciones.

Compartir y revisar el vínculo de prototipo en escritorio y móvil

En la aplicación de escritorio, haga clic en Compartir y elija Compartir para revisión (para Prototipo) o Compartir para Desarrollo (para especificaciones de diseño). Para obtener más información sobre cómo compartir prototipos y especificaciones de diseño, consulte Compartir prototipos y especificaciones de diseño.

Nota:

Los prototipos que utilizan Animación automática no admiten la reproducción de animaciones y se disuelven entre el inicio y el final de las mesas de trabajo cuando se ven en los siguientes navegadores:

  • Navegador IE 11
  • Edge 12

Como solución alternativa, abra el prototipo en cualquiera de los otros navegadores compatibles enumerados en los Requisitos del sistema.

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