¿Cómo transmitir con precisión el diseño de movimiento a los ingenieros?

Citando un artículo que vi recientemente en Zokuu, creo que es bastante bueno Dirección original: ¿Cómo comunicar con precisión el diseño de movimiento a los ingenieros? |UE|Tutorial original/autotraducido|TCWison

Con el desarrollo de software y terminales, el papel de los efectos de movimiento en el diseño de la experiencia del usuario actual se está volviendo cada vez más importante, y cada vez más diseñadores están comenzando. Intenta hacer que tu trabajo "se mueva". Pero en el trabajo real, creo que todo el mundo suele tener esta pregunta: ¿Cómo puede transmitir con precisión sus efectos dinámicos cuidadosamente diseñados a los ingenieros y evitar desviaciones en la implementación? Ahora me gustaría discutir este tema con usted basándome en mi propia experiencia.

Imagina que en una noche tranquila estás pensando mucho en la animación de transición de una interfaz. De repente, una luz de inspiración pasa por tu mente y el plan perfecto emerge frente a ti. Lo que más desea hacer en este momento probablemente no sea leer los documentos de desarrollo para estudiar los principios de implementación: "Tengo que expresarlo de inmediato".

Sí, somos diseñadores y lo que los diseñadores tienen que hacer. hacer es la visualización. Para los efectos de movimiento, describirlos de la nada siempre es un rasguño. La forma más rápida de visualizar el diseño en tu mente es el primer paso para lograrlo.

1. Visualización precisa: Demostración en video

La demostración en video es un buen comienzo. Un video que se puede reproducir repetidamente y se puede ver en la mayoría de los dispositivos permite que otros se entiendan a sí mismos rápidamente. El mejor medio para las ideas. Al hacer demostraciones en vídeo, mi herramienta más utilizada es AfterEffects. La capacidad de AE ​​para controlar y expresar efectos de movimiento no tiene rival hasta ahora. En mi opinión, es la mejor herramienta de diseño conceptual.

Además del vídeo, otra ventaja de AE ​​es que el material de fotograma de secuencia PNG que genera se puede aplicar directamente a alguna PC o incluso a software móvil para lograr efectos.

2. Experiencia operativa: prototipo interactivo

La limitación de la demostración en vídeo es que no se puede interactuar con él, y gran parte de los efectos dinámicos se activan cuando el usuario interactúa con él. la interfaz. El momento de inicio de esta parte de la animación y la relación entre ésta y el gesto no se puede transmitir con 100% de precisión simplemente confiando en la demostración en video. En este momento, si existe un prototipo interactivo, se resolverán muchos problemas.

Para los prototipos interactivos (Prototype), hay muchos artículos en Internet que lo discuten, y existen varias herramientas de producción (Flash, AdobeEdge, QuartzComposer, Keynote, Framer, Pixate, Form...), qué ¿Debemos hacer? Para esta pregunta, miro principalmente dos puntos: 1. Si el prototipo es fácil de compartir con muchas personas. 2. ¿Es posible generar directamente parámetros que puedan usarse para el desarrollo?

Basándonos en estos dos puntos, mi primera opción personal es Flash.

Por razones de Apple, la situación actual de Flash se puede considerar en declive. Pero como herramienta de creación de prototipos de movimiento, tiene algunas ventajas únicas.

Ventaja 1: Puede importar directamente materiales de fotogramas de secuencia generados por AE.

Para personas como yo que comenzaron con AE como diseño de movimiento, esto es muy importante. Significa que no hay necesidad de duplicar el trabajo. Sólo necesita agregar algunos códigos interactivos basados ​​en AS3.0 en Flash para completar la producción del prototipo y garantizar que sus ideas de diseño originales se realicen sin compromisos en la etapa del prototipo.

Ventaja 2: Puedes exportar el paquete de instalación .apk o .ipa y compartirlo con cualquier persona que tenga un teléfono móvil.

Dado que mi trabajo a menudo requiere comunicación a larga distancia, la capacidad de entrega de los prototipos es un requisito muy crítico (no puedes transmitir tu computadora a otras personas para que la vean...). La función de empaquetado y publicación de Flash resulta útil en este momento. El prototipo completo se empaqueta como un archivo apk a través de AirforAndroid, se envía por correo electrónico y se instala en el teléfono móvil de la otra parte, lo cual es fácil y divertido.

Algunas otras herramientas a las que vale la pena prestar atención incluyen Pixate y Form. Todas se pueden transferir de forma remota compartiendo archivos de proyecto, y los prototipos se pueden proyectar en teléfonos móviles para obtener una vista previa en tiempo real a través de la aplicación oficial. Solo pueden hacer algunos efectos básicos y no pueden manejar nada más innovador. Sin embargo, están iterando y actualizándose constantemente, especialmente este último, que acaba de ser adquirido por Google y puede desarrollarse rápidamente en el futuro.

Mi segunda herramienta personal es FramerStudio. Cuando le muestro el prototipo al ingeniero, a menudo me hacen esta pregunta: "¿Puede mostrarnos el código fuente? La atmósfera suele ser incómoda en este momento, porque ya sea Flash o Form, hacen que el prototipo solo pueda servir". como demostración, pero no puede generar directamente código que sea útil para el desarrollo. En este momento, además de inscribirse en una clase para aprender sobre desarrollo de Android o iOS, ¿hay alguna otra forma? La respuesta es: "¡Sí!" FramerStudio nos da un rayo de esperanza.

FramerStudio es una herramienta de creación de prototipos puramente de programación con sólidas capacidades de implementación de efectos dinámicos. Su lenguaje se basa en Coffeescript derivado de Javascript. Aunque la sintaxis es bastante diferente a la de Android\iOS, se puede resolver mucha lógica solo para la animación.

Por supuesto, su costo de aprendizaje será mayor, pero cuando muestra un fragmento del código fuente de Framer a los ingenieros, algunos de los parámetros de animación y la lógica de implementación pueden brindarles alguna ayuda práctica, por lo que el esfuerzo y la lógica de implementación. La recompensa sigue siendo directamente proporcional. Con respecto al proceso de uso de Framer, los diseñadores de Twitter compartieron su experiencia. Puede leer este artículo: "Análisis completo del proceso de diseño de funciones de video de Twitter"

Además, si se centra en la plataforma iOS, también puede hacerlo. Puede probar Origami directamente. Esta es una herramienta prototipo desarrollada por el equipo de Facebook. Opera a través de nodos de enlace sin escribir código usted mismo. En su última actualización, ya admite la exportación de código para iOS y Android. Este artículo hizo una introducción: "IntrocingOrigamiLive. "

3. Ayudar en el desarrollo: documento de parámetros

Con la demostración en vídeo y el prototipo interactivo, creo que los ingenieros han entendido lo que quieres hacer y entonces podrán realizar felizmente la animación. ¿efecto? La respuesta es: no necesariamente. Los ingenieros pueden manejar algunas animaciones simples según la experiencia. Si su diseño de movimiento es complejo e implica numerosos parámetros y cambios de velocidad, entonces puede haber desviaciones basadas únicamente en su descripción y a simple vista del ingeniero. En este momento, necesita la ayuda de documentos de parámetros.

Si desea que su diseño se implemente con precisión, debe comprender los principios de implementación. De acuerdo con el principio de implementación, escriba con precisión los parámetros correspondientes. Este es el documento de parámetros. Para los efectos de movimiento, los parámetros básicos no son más que estas tres categorías:

1. El tiempo de inicio y la duración de la animación (ración\offset)

2. rotación\ posición\escala\alfa)

3. Tasa de movimiento ()

La sintaxis del programa de iOS y Android no es la misma. Puedes ir al sitio web oficial para leerlos. Comprenda el formato de sintaxis general de los dos para la implementación de efectos dinámicos y luego marque estos parámetros en consecuencia y páselos a los ingenieros para que realmente puedan desarrollarse felizmente.

Por supuesto, la comunicación constante con los ingenieros es indispensable durante el proceso de desarrollo (algunos detalles como las posiciones de los píxeles y las proporciones de pantalla de los diferentes modelos, incluidos posibles errores), empatizar con los demás y no arrojar documentos o demostraciones al mismo tiempo. También sería irresponsable convertirse más tarde en un comerciante que no interviene.

Resumen:

En pocas palabras, hay tres pasos para comunicar con precisión su diseño.

El primer paso: visualizar rápidamente.

Puedes elegir cualquier herramienta que te convenga y presentar tus ideas de forma rápida y precisa, lo que ya es la mitad de la batalla.

Paso 2: Restaurar los escenarios de uso al máximo.

Si es PC, demostrar en el ordenador. Si es una versión móvil, muéstrala en tu teléfono. Si es operable, lo mejor es hacer un prototipo interactivo, por supuesto, si el tiempo lo permite.

Paso 3: Parametrizar el diseño para minimizar la necesidad de que los ingenieros desarrollen en función de sus sentimientos.

Créame, si no quiere que los ingenieros ajusten los colores de la interfaz de usuario según sus sensaciones, lo mismo ocurre con las animaciones. Un documento preciso es un reflejo de su profesionalismo.

Finalmente, me gustaría recordarles que este artículo menciona muchas herramientas, y las herramientas parecen tener el poder mágico de fascinar a la gente. Así que tenga cuidado de no perder el origen del diseño en la búsqueda de herramientas. Hay una frase en la película "Nightcrawler": "Si quieres ganar la lotería, primero debes ganar suficiente dinero para comprar billetes de lotería". De manera similar, nosotros somos diseñadores, si queremos que los ingenieros realicen animaciones geniales, primero debes hacerlo. que sea un diseño genial. ¡Aprovecha cada oportunidad para mejorar tus habilidades de diseño! Eso es lo más preciado.