Cómo elegir la herramienta de diseño de movimiento de aplicación adecuada
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 a intentar hacer las suyas La obra "se mueve". Sin embargo, en el trabajo real, creo que todo el mundo suele tener esta pregunta: ¿Cómo puede transmitir con precisión sus efectos de movimiento cuidadosamente diseñados a los ingenieros y evitar desviaciones en la implementación? Me gustaría compartir mi experiencia y discutir este tema con usted.
Imagina que en una noche tranquila estás pensando intensamente en una animación de transición de interfaz. De repente, una luz de inspiración pasa por tu mente y el programa perfecto aparece frente a ti. En este momento, lo que más desea hacer no es leer los documentos de desarrollo y estudiar los principios de implementación, sino "tengo que mostrarlo de inmediato".
Sí, somos diseñadores, y los diseñadores lo que tenemos que hacer es visualizar. Cuando se trata de efectos dinámicos, describirlos de la nada siempre es pan comido, y visualizar el diseño que tienes en mente de la forma más rápida es el primer paso para hacerlo realidad.
Presentación precisa: presentación en video
Una presentación en video es un excelente lugar para comenzar. Un video que se puede reproducir una y otra vez y ver en la mayoría de los dispositivos es una excelente manera para los demás. para comprender rápidamente sus ideas. El mejor medio. La herramienta que uso más para crear demostraciones es After Effects, que es, con diferencia, la herramienta conceptual que mejor encuentro para controlar y renderizar efectos dinámicos.
Además del vídeo, otra ventaja de AE es que puede generar materiales de fotogramas de secuencia PNG, que se pueden aplicar directamente a alguna PC o incluso al software de un teléfono móvil como implementación de efectos.
2. Experiencia operativa: prototipo interactivo
La limitación de la demostración en video es que no se puede interactuar con él. Gran parte de la animación se activa cuando el usuario interactúa con la interfaz. El tiempo de inicio de esta parte de la animación y su relación con el gesto no se pueden transmitir con una precisión del 100 % únicamente mediante una demostración en vídeo. Si tienes un prototipo con el que puedes interactuar, muchos problemas desaparecen.
Hay muchos artículos sobre prototipos interactivos (Prototype) en Internet, y existe una variedad de herramientas de producción (Flash, Adobe Edge, Quartz Composer, Keynote, Framer, Pixate, Form...), ¿Cómo debemos elegir? ), ¿cómo debemos elegir? Respecto a este tema, parto principalmente de los dos puntos siguientes: 1. ¿Es fácil compartir el prototipo con muchas personas? 2. ¿Es posible generar directamente parámetros que puedan usarse para el desarrollo?
Basándome en estos dos puntos, mi primera opción es Flash.
Flash está en declive por culpa de Apple. Sin embargo, como herramienta de creación de prototipos dinámicos, tiene algunas ventajas únicas.
Ventaja 1: Puedes importar directamente fotogramas de secuencia generados por AE.
Esto es muy importante para personas como yo que utilizan AE como punto de partida para el diseño de movimiento. Esto significa que no hay duplicación de esfuerzos, simplemente agregue algo de código interactivo basado en AS3.0 en Flash para completar el prototipo y garantizar que su concepto de diseño original se realice completamente durante la etapa del prototipo.
Beneficio 2: Puedes exportar un instalador .apk o .ipa y compartirlo **** con cualquier persona que tenga un teléfono.
Dado que mi trabajo a menudo requiere comunicación entre diferentes ubicaciones, la capacidad de entrega de los prototipos es un requisito crucial (no puedes enviar tu computadora a otra persona para que la vea...). Aquí es donde las capacidades de empaquetado y publicación de Flash resultan útiles. Puede empaquetar su prototipo como un archivo apk a través de Air para Android, luego enviárselo por correo electrónico e instalarlo en su teléfono.
También hay algunas herramientas a las que puede prestar atención, incluidas Pixate y Form. Pueden entregar archivos de proyecto de forma remota a través de **** y también pueden proyectar prototipos en teléfonos móviles para obtener una vista previa en tiempo real. La desventaja de la aplicación oficial es que solo puede realizar algunos efectos básicos, pero no puede realizar algunas innovaciones, pero todas se están actualizando de forma iterativa, especialmente esta última, que acaba de ser adquirida por Google. Después de la adquisición de Google, es posible que se desarrolle rápidamente en el futuro.
Mi segunda herramienta personal es Framer Studio. Cuando muestro mis prototipos a los ingenieros, a menudo me preguntan: "¿Puedes mostrarnos el código fuente? En este momento, la atmósfera suele ser incómoda". Porque ya sea Flash o Form, los prototipos que producen solo pueden servir como demostración y no pueden generar código directamente para ayudar al desarrollo. En este punto, ¿no hay otra manera además de inscribirse en una clase para aprender sobre desarrollo de Android o iOS? La respuesta es: "¡Sí!" Framer Studio nos da un rayo de esperanza.
Framer Studio es una herramienta de creación de prototipos de programación pura con una gran capacidad para lograr efectos dinámicos. Su lenguaje se basa en Javascript derivado de Coffeescript. Aunque la sintaxis es bastante diferente a la de Android e iOS, en lo que respecta a los efectos dinámicos, se puede pasar mucha lógica.
Por supuesto, el costo de aprendizaje será relativamente alto, pero cuando les muestra un fragmento del código fuente de Framer a los ingenieros, algunos parámetros de animación y la lógica de implementación pueden brindarles más o menos algo de conocimiento real. por lo que el esfuerzo y la recompensa siguen siendo directamente proporcionales. Los diseñadores de Twitter compartieron su experiencia en el uso de Framer; consulte este artículo: "Proceso de diseño de funciones de video de Twitter"
Además, si se concentra en la plataforma iOS, puede intentar usar Origami. Este es un prototipo. Herramienta desarrollada por el equipo de Facebook que funciona encadenando operaciones basadas en nodos sin tener que hacerlo tú mismo. Operación del nodo de enlace, no es necesario escribir el código usted mismo. En su última actualización, admite la exportación de código para su uso en iOS y Android. Este artículo sirve como intermediario: "Presentación de Origami Live"
3. desarrollo: documentación de parámetros
Con la demostración en video y el prototipo interactivo, creo que los ingenieros ya entienden lo que quiere hacer, entonces, ¿podrán implementar efectos dinámicos con gusto? La respuesta es: no necesariamente. Los ingenieros pueden manejar algunos efectos dinámicos simples según su experiencia. Si su diseño de animación es muy complejo e involucra una gran cantidad de parámetros y cambios de velocidad, entonces puede haber desviaciones basadas únicamente en su descripción y la percepción visual del ingeniero. Aquí es donde entra en juego la documentación de parámetros.
Si desea que su diseño se implemente con precisión, debe comprender los principios de implementación. Según el principio de implementación, los parámetros correspondientes están escritos con precisión. Este es el documento de parámetros. Para la animación, solo hay tres parámetros básicos:
1. La hora de inicio y la duración de la animación (duración/desplazamiento)
2 Cambios en los atributos (rotación/desplazamiento) Posición. /proporción/alfa)
3. Tasa de movimiento (interpolador)
La sintaxis del programa de iOS y Android es diferente. Puede ir al sitio web oficial para leer los documentos de sus desarrolladores. Comprenda el formato de sintaxis general de los dos para lograr efectos dinámicos y luego marque estos parámetros en consecuencia y páselos a los ingenieros, para que realmente puedan disfrutar de la diversión del desarrollo.
Por supuesto, durante el proceso de desarrollo, es necesario comunicarse constantemente con los ingenieros (como posiciones de píxeles, proporciones de pantalla de diferentes modelos y otros detalles, incluidos posibles errores), pensar desde la perspectiva de los demás y hacer No tirar documentos ni presentaciones. Luego se lo dejan a los ingenieros, lo cual es una irresponsabilidad para con ellos.
Resumen:
En pocas palabras, hay tres pasos para comunicar con precisión su diseño.
Paso uno: Imaginación rápida.
Puedes elegir cualquier herramienta útil y presentar tus ideas de forma rápida y precisa es la mitad de la batalla.
Paso 2: Restaurar los escenarios de uso en la mayor medida posible.
Si se trata de una herramienta basada en PC, demuestre en una computadora. Si es un dispositivo móvil, haz una demostración en tu teléfono. Si está operativo, entonces es mejor hacer un prototipo interactivo, si el tiempo lo permite, por supuesto.
Paso 3: Diseño paramétrico para minimizar el desarrollo de los ingenieros por sensación.
Créame, si no quiere que sus ingenieros mezclen los colores de la interfaz de usuario según la sensación, lo mismo ocurre con los efectos de movimiento. Un documento preciso es una señal de su profesionalismo.
Finalmente, me gustaría recordarles que este artículo menciona muchas herramientas, y las herramientas parecen tener el poder de fascinar a la gente. Así que tenga cuidado de no perder de vista la intención de su diseño original al buscar una herramienta. Hay una frase en la película "Daredevil" que dice: "Si quieres ganar la lotería, debes ganar suficiente dinero para comprar el billete de lotería". Nuevamente, somos diseñadores, y si quieres que los ingenieros logren efectos dinámicos geniales, primero debes diseñarlo de manera genial. ¡Aprovecha cada oportunidad para mejorar tus habilidades de diseño! Es lo más valioso que posees.