Cuando comenzamos a darle vida al prototipo; utilizaremos unos cables o «wires» que le dicen al programa de dónde a dónde corre la navegación entre las páginas diseñadas.
Cuando seleccionamos la primera página vamos a ver una pestaña azul con una flecha blanca. Al seleccionar esta flecha blanca y arrastramos el ratón de la computadora vamos a notar que arrastramos un cable azul, el cual podemos conectar en cualquier otra página u objeto.
Cuando el cable está conectado al próximo punto vamos a ver una ventana flotante en la cual básicamente podemos programar el destino; la transición; el movimiento; y la duración de la transición. Más adelante durante el proceso de programación, si deseas volver a una página a re programar algo que no te agradó; puedes seleccionar el destino o la salida del cable y cambiar estos parámetros de igual forma en que los programaste en un principio.
Notarás también que aunque tus páginas se compongan de objetos agrupados puedes utilizar la tecla de «Command» o seleccionar más de una vez con el ratón de la computadora hasta entrar al objeto deseado. En mi opinión es más fácil usar la tecla «Command» + «click«.
En la siguiente imagen acomodé la primera página un poco hacia abajo para que puedan apreciar el cable que también sale desde el logo JRVstudio y el destino de ambos cables es la siguiente página llamada «Home«. Si deseamos eliminar o cortar un cable para que no se ejecute; sencillamente lo seleccionamos y lo sacamos hacia afuera; como si desenchufaras un cable de la electricidad de la pared de tu casa.
Ahora lo que debes de realizar es jugar con interconectar el prototipo y analizar los movimientos y tiempos entre cada ventana. Como notarás, en mi diseño tuve que duplicar la página de «Password» por que para que salga el teclado debo primero seleccionar el lugar donde voy a escribir. Por tal motivo conecté un cable desde el botón de «Welcome» a una página sin teclado y luego al tocar el espacio para escribir el «Username» y «Password«; aparece por disolvencia la página de el teclado; dándonos la sensación de que solo apareció el teclado. Recuerda jugar con los parámetros del tiempo.
Si notas el menú de los segundos contiene unos parámetros pero con el teclado puedes escribir los segundos que le convenga más al movimiento. en este caso le escribí (punto-dos) .2 segundos. También recuerda que desde la primera vez que programas estos parámetros, ellos se quedan igual para los próximos y si deseas tener distintos parámetros debes de cambiarlos con cada página a programar.
Una vez programada la maqueta, presiona «Command» + «enter» para comenzar a probar el prototipo en la ventana del «Desktop Preview«. Aquí te muestro la grabación de este primer modelo. El círculo blanco transparente que notas en el video es el ratón de la computadora, comportándose como si tocaras la pantalla de tu celular con tu dedo.
En el video notarás los movimientos programados para el prototipo. Unos fueron movimientos disolventes y otros fueron movimientos de derecha o izquierda. También notarás que al momento que llegamos al final de las páginas diseñadas no tenemos un icono de retorno o no nos movemos a otras páginas debido a que no hemos continuado con el diseño de la maqueta. Nos hemos concentrado en estas primeras páginas. Una maqueta puede tener un sin número de páginas. Por el momento les deseo mostrar cómo funciona esta primera experiencia entrelazando páginas y cables. Jueguen con la programación, añadan más páginas a sus diseños y nos veremos en el próximo post donde probaremos nuestra maqueta en un iPhone.
¡Hasta luego!
JRVstudio 