Aprenda a crear microinteracciones usando la animación automática.

Durante un tiempo, XD ofrecía solo tipos de transición básicos que imitaban las transiciones nativas de su teléfono, como empujar, deslizar y disolver. Esas ofertas eran magníficas para una sensación básica del flujo de usuario. Con la introducción de la animación automática, es posible visualizar el movimiento de contenido a través de prototipos animados.

Puede usar la animación automática para crear efectos sorprendentes, como un deslizamiento/arrastre de YouTube o interacciones de ondulación, para conseguir una experiencia de usuario final atractiva e interactiva. 

Interacciones de ondulación en un sitio web
Interacciones de ondulación en un sitio web
Efecto deslizar y arrastrar en un dispositivo táctil
Interacciones de deslizar y arrastrar en un dispositivo táctil

Sirve para crear animaciones, duplicar una mesa de trabajo, modificar las propiedades de los objetos, como su tamaño, posición y rotación, y aplicar una acción de animación automática entre mesas de trabajo. Entonces podrá reproducir o grabar estas animaciones en la ventana de vista previa, un navegador web o aplicaciones móviles y compartirlas con los interesados para revisiones colaborativas.. Esto le ayudará a contar mejor la historia de prototipo, a la vez que agrega una capa enriquecida a la experiencia general del usuario.

Antes de crear un prototipo, asegúrese de que los objetos que desea animar tengan el mismo nombre de capa en todas las mesas de trabajo. La animación automática, que viene con XD 13.0, funciona solo sobre propiedades específicas; lea Propiedades admitidas y no admitidas para obtener más información.

  1. Para crear un prototipo animado en XD, seleccione todas las mesas de trabajo del lienzo en modo Prototipo para ver los cables entre 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:

    • Desencadenador: establezca el tipo de gesto en Arrastrar, Pulsar o Voz.  Si desea simular un efecto de arrastre de tarjeta, seleccione Arrastrar.
    • 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 desencadenador para arrastrar B. Acción para la animación automática C. Mesa de trabajo de destino D. Opciones de suavizado 

    ¿Quiere añadir microinteracciones avanzadas a los diseños? Mejore los diseños en After-Effects. Vea este vídeo para realizar una visita al flujo de trabajo.

    Exportar desde Adobe XD a After-Effects (Tiempo de visualización: 1 minuto)

  4. Para obtener una vista previa de los cambios en los navegadores compatibles en el escritorio, móviles o la Web, seleccione el icono Vista previa de escritorio .

    Nota:

    XD no admite el efecto de desplazamiento mientras se realiza una vista previa de las mesas de trabajo animadas automáticamente.

  5. Para compartir el prototipo con los interesados desde la aplicación de escritorio de XD, 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.

También puede echar un vistazo a este vídeo para iniciarse con la animación automática.

Tiempo de visualización: 1 minuto.


Ejemplos

Prácticas recomendadas

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