Cómo usamos Principio para crear prototipos de nuevas características y diseños experimentales.

Las herramientas de creación de prototipos para el trabajo de UI / UX se han vuelto increíblemente sofisticadas en los últimos años. Hay muchas herramientas diferentes entre las que puede elegir, como Framer.JS o Flinto, pero en Vimeo Principle para Mac es nuestra opción.

Lo bueno de Principle es que no requiere experiencia de codificación o conocimiento de codificación, y tiene una curva de aprendizaje relativamente superficial. En cuestión de minutos, puede convertir sus archivos de bocetos estáticos en prototipos vivos. Y son extremadamente convincentes: es difícil saber qué es un prototipo y qué es una aplicación real.

Principio ha sido un sueño para nuestros desarrolladores; les encanta lo fácil que es comunicar las interacciones de diseño y cómo les da una mejor idea de la implementación de la interfaz de usuario que un archivo de boceto. También ahorra el tiempo de ida y vuelta (valioso tiempo de desarrollo) de probar diferentes interacciones que pueden parecer geniales en el boceto, pero no tan geniales en la realidad.

Voy a hablar sobre algunos proyectos para los que hemos utilizado recientemente el Principio, y cómo lo hemos incorporado a nuestro proceso de diseño y transferencia de desarrollo.

Los archivos principales (.prd) se incluyen debajo de cada video.

Floreciente

Trabajar con Android TV fue una experiencia de aprendizaje increíble tanto para el diseño como para el desarrollo. Un sistema de diseño importante dentro de Android TV son los estados celulares. Hay una tonelada: una celda enfocada, que está dentro de una fila enfocada. Una celda que está desenfocada dentro de una fila enfocada. Una celda que está desenfocada en una fila desenfocada. Entonces tienes la navegación. Las células tienen un estado colapsado vs expandido.

En cualquier momento, un usuario debe saber dónde está enfocado y qué sucedería si usa el control remoto arriba, abajo, izquierda o derecha. Ah, y todo vuelve al foco central tanto vertical como horizontalmente.

Para dar sentido a todo esto, hemos creado nuestro propio sistema de diseño, llamado Blooming, para estados de enfoque celular que se integra en la parte superior de Leanback de Android y ayuda a proporcionar claridad al usuario. También proporciona un sistema de diseño sólido que se puede aplicar en toda la plataforma Android Leanback.

Se llama Blooming, porque a medida que te acercas a la celda enfocada, se presenta o florece más información para el usuario. Esto incluye la cantidad de texto que se muestra, la información presentada, el color y el eje z (sombras).

Cuando diseñamos esto, parecía que tenía mucho sentido, pero probarlo, era anterior al principio, requeriría una construcción de desarrollo real o días en After Effects. El tiempo de desarrollo es extremadamente valioso, por lo que hacer cambios y reelaborar detalles una y otra vez no es la situación más ideal.

En principio, ponemos una versión en bloque de cómo se verían las células Blooming para tener una idea inicial de ello.

Todo el equipo estaba encantado con el prototipo, así que lo construimos. A continuación se muestra la implementación de desarrollo real que nuestro equipo creó en base al Principio, ¡incluyendo las mismas curvas de animación! Es perfecto. ¡Tenemos grandes desarrolladores y estamos contratando más!

Interacciones de entrada

Las interacciones de entrada parecen ser uno de los diseños más comentados entre nuestro equipo durante la crítica. Tenemos sesiones de crítica dos veces a la semana en las que todos los diseñadores de Vimeo se reúnen para recibir comentarios. Todo, desde un boceto en una hoja de papel, hasta prototipos terminados, campañas de marketing, todo está ahí.

Las interacciones de entrada se mostraron recientemente durante la crítica y pasamos por un montón de opciones de estado de error. Usando los componentes de Principios, pudimos pasar por 15 estados de error diferentes y uno por uno da un Yay o Nay. Todo creado sin una sola línea de código. El equipo de Iris en Vimeo está actualizando toda la biblioteca de componentes en Vimeo: las interacciones de entrada son una de ellas

Iris se compone de patrones encontrados dentro del diseño que pueden reutilizarse y estandarizar un sistema que permita la escalabilidad. En otras palabras, Iris es el lenguaje codificado creado para el Sistema de diseño de Vimeo.

El equipo de Systems Systems también conocido como equipo Iris en Vimeo está a cargo de construir componentes reutilizables y escalables a partir de patrones examinados por los equipos de diseño y desarrollo. El objetivo es crear un trabajo hermoso que se ajuste a las necesidades de los desarrolladores que lo usan y también cumpla con los estándares de los diseñadores que elaboraron esos patrones

A continuación se muestra un prototipo de otros diversos campos de formulario. Estos incluyen estados de desplazamiento, estados de clic, estados vacíos, botones activos / inactivos, etc. Desde aquí, el equipo de Iris puede echar un vistazo y proporcionar comentarios al instante, con cualquier pregunta o pensamiento sobre cómo construirlo.

Day Tripper Loader

Day Tripper es una aplicación para Android recientemente lanzada que hará que tu próximo viaje sea más entretenido. Mire videos seleccionados, seleccionados especialmente para usted y su viaje. Day Tripper comenzó como un Vimeo Jam; un hackathon dos veces al año, 3 días, donde podemos trabajar en cualquier cosa. ¡De hecho, esta publicación de blog es un proyecto de Vimeo Jam!

Si bien generalmente creamos prototipos de interacciones complejas y llamativos, a veces las mejores animaciones son las sutiles.

Para Day Tripper, queríamos una buena manera de presentar el contenido seleccionado por el personal y la transición de una manera que alentara a los usuarios a tocar. Con eso, creamos un prototipo que demostró la pantalla de carga a la pantalla de la lista de reproducción. Tenemos una copia en la pantalla de carga que pasa a la copia de la lista de reproducción (y tuvo que ser perfecta). El contenido aparece desde la parte inferior y se instala. Con un ligero retraso, sigue el botón de reproducción.

El equipo de Android una vez más se recuperó y clavó la animación. Echa un vistazo a Day Tripper aquí.

Incorporación de camafeos

Este prototipo fue uno de los más complejos que hemos creado. Queríamos una experiencia de incorporación atractiva y emocionante para los nuevos usuarios cuando descargan Cameo. Seguimos la configuración paginada tradicional en la que desliza para avanzar, pero la enfocamos en una historia, más que en características aleatorias.

A medida que avanzas en el recorrido, sigues la historia de estos clips. Comenzamos con una prueba de animación. La primera fue una experiencia con imágenes separadas que desliza hacia la izquierda y hacia la derecha (y aparecen desde la derecha). Esto funciona y puede verse genial con buenas ilustraciones, pero queríamos hacer algo que tuviera un poco más de jazz.

Pensamos en mantener un elemento que viaja a través del tutorial y los elementos interactuarían a su alrededor. Para decidir si este fue un buen movimiento o no, antes de pasar al desarrollo completo, construimos los prototipos de deslizamiento.

Después de mostrarle esto al equipo y hablar con los desarrolladores sobre la animación de elementos, entramos en el diseño completo y creamos el prototipo anterior.

Estamos refinando constantemente nuestros procesos y herramientas. En 2014 todavía estábamos usando Photoshop y Sketch era un misterio. Ahora estamos todos en Sketch. Zeplin para transferencia de desarrolladores, Invision para flujos y Principio para prototipos.

Si le gusta en qué estamos trabajando y está interesado en unirse a nuestro equipo de diseño, o si desea obtener más información sobre en qué estamos trabajando, consulte la página de trabajos o envíeme un correo electrónico directamente. ¡Estoy feliz de discutir nuestro proceso y el equipo de diseño en Vimeo!

Stephen M Levinson
Diseñador principal, Entretenimiento
[email protected]