Share
La creación de prototipos debe ser una forma rápida y fácil de ganar confianza en sus diseños. Ya no se considera simplemente como una forma de rociar diseños de magia en movimiento o pulir en exceso, la creación de prototipos es una herramienta de comunicación. Ya sea que se comunique con las partes interesadas, los gerentes de diseño o los usuarios, un buen prototipo ayuda a comunicar decisiones de diseño y probar ideas.
En este tutorial, crearemos un prototipo básico de "tarjeta de embarque" en Atomic, que puede ver aquí. El prototipo comienza con un estado de carga antes de permitirle navegar por sus próximos vuelos y obtener una vista previa de su código QR de embarque. Para crear este prototipo usaremos componentes interactivos, datos, variables y transiciones de página. ¡No es para preocuparse! Te ayudaré en cada paso..
Aquí hay una demostración de lo que crearemos:
Hay algunas cosas que necesitará para seguir adelante:
atomic.ioSi en cualquier momento del tutorial tiene una pregunta, no dude en comunicarse conmigo (@femkesvs) o al equipo de asistencia de Atomic (@we_are_atomic) en Twitter.
Vamonos!
He creado un archivo de muestra con los activos que necesitará para crear su prototipo. Este archivo de muestra se completa con los recursos que usaremos, así como los componentes precompilados.
Puede acceder a los activos aquí. Para utilizar los activos, deberá copiar el prototipo en su cuenta. Puedes hacerlo haciendo clic Copiar editar en la parte inferior derecha y luego seleccione un proyecto en el que desea copiarlo. Sugiero crear un nuevo proyecto para este tutorial..
Antes de comenzar a crear nuestro prototipo, primero debemos agregar la fuente de datos a Atomic. He reunido una hoja de Google con algunos datos básicos que usaremos en nuestro prototipo..
Puedes acceder a los datos aquí. Con el origen de datos abierto, dirígete a Archivo> Agregar a mi unidad (necesitarás una cuenta de Google para esto).
A continuación, con su proyecto abierto en Atomic, seleccione el Datos lengüeta. Desde aqui haga click Datos de importacion, y localizar la fuente de datos a través de la búsqueda. Una vez localizado, seleccione la fuente de datos. Verás Atomic carga los datos en tu proyecto. Ahora se puede acceder a esta fuente de datos y utilizarla en cualquier prototipo dentro del proyecto.
Estamos listos!
Vamos a comenzar a ensamblar nuestro prototipo creando el estado de carga. Haremos esto creando una transición personalizada y una acción de página basada en el tiempo..
Primero, seleccione el componente de carga de la página Activos para copiar (CMD-C y péguelo (CMD-V) en la página 1. Será grande y, en lugar de redimensionarlo, colóquelo en su posición inicial.
Luego copie el elemento de carga que acaba de colocar en la página 1, esta vez pegándolo en la página 2. Vuelva a colocarlo en su estado final (girado en el sentido de las agujas del reloj 75 ° para que el plano se coloque del lado derecho del lienzo).
Para crear nuestra transición, vuelva a la página 1. En el panel de propiedades de la derecha, verá una sección llamada Acciones de página. Haga clic en el botón más y luego configure lo siguiente:
Avancemos y veamos nuestra transición en acción: deberías ver el plano planear de izquierda a derecha en el transcurso de dos segundos. ordenado!
Para ir más lejos, también puede copiar y pegar el logotipo de Fly tanto en la página 1 como en la página 2 (debajo del componente de carga en el panel de páginas y colocado detrás). Asegúrese de seguir la misma técnica de colocarlo en su posición inicial y final en cada página. Probablemente tengas que ajustar el orden de tus capas para que aparezca por detrás.
Por último, tendremos que crear una acción que lleve al usuario automáticamente a la página 3 de la página 2. En la página 2, agregue otra acción de página cronometrada. Esta vez usaremos las siguientes configuraciones:
Propina: si desea escalonar la sincronización de los dos elementos de animación, puede hacerlo usando el Línea de tiempo de movimiento avanzado.
A continuación, copie los elementos necesarios para la página 3 y péguelos en la página 3. Deberá hacer un poco de reorganización y ajustes para ajustar los elementos de la página según sea necesario..
Casi todos los elementos necesarios para esta página son componentes.
Los componentes en Atomic son como símbolos. Cualquier componente puede ser editado y reutilizado a lo largo de un proyecto. Cualquier edición realizada en un componente se actualizará en cada instancia. Los componentes también pueden ser interactivos y contener múltiples estados de un símbolo. Esto hace que sea realmente fácil estructurar su prototipo..
Agreguemos algo de interactividad al componente boardingPasses. Para abrir el componente, haga doble clic en el icono del componente en el panel de capas al lado del nombre de la capa. Una vez abierto, verás tres páginas; uno representando cada vuelo. Por ahora estos pases son idénticos, pronto cambiaremos esto..
Sabemos que el usuario tiene tres vuelos y nos gustaría que puedan pasar cada uno de ellos. También hay un icono de código QR que, al interactuar con él, debe mostrar su código de pase de abordar.
Si mira en el panel de capas, notará que cada página es una instancia de un componente llamado "boardingCard". Vamos a abrir el componente boardingCard ahora para ver cómo se han aplicado los datos.
El componente boardingCard es un componente incorporado en un componente. Esto nos permite crear un símbolo de tarjeta de embarque que se puede reutilizar y mostrar diferentes conjuntos de datos.
Con el componente boardingCard abierto verá dos páginas; La parte delantera y trasera del pase. Aquí es donde los datos se asignan a los elementos de texto individuales.
Datos heredados de los padresSeleccione el texto ABC y eche un vistazo a la Propiedades de texto. Notarás lo siguiente:
Posteriormente, si observa la hoja de Google de donde se extraen estos datos, verá una columna titulada "código de salida". Esto significa que el elemento de texto ABC mostrará los datos que se muestran en la columna "código de salida".
Todo el texto dinámico en este componente se ha establecido en Heredar de padre. Esto nos permite enlazar a la hoja de datos a nivel de grupo y, por lo tanto, mostrar y ordenar la fila de datos por fila. Llegaremos a esto pronto.
A continuación, configuraremos una transición basada en páginas para cambiar entre el pase y el código QR. En la portada del componente boardingCard presione H para abrir la herramienta de punto de acceso. Luego, dibuje un punto de acceso sobre el ícono del código QR en la página principal.
Los hotspots le permiten definir áreas interactivas de su prototipo. Con su zona activa seleccionada, en el panel de interacciones, configure lo siguiente:
Luego, en la página posterior, cree otro punto de acceso (H) que nos lleve de vuelta a la página principal. Esta vez dibuja sobre el cerrar Ícono y configura lo siguiente:
¡Es hora de poner a prueba tu interacción! En la esquina inferior derecha, presione Avance botón. El modo de vista previa le permite probar sus transiciones e interactuar con su prototipo a través de puntos de acceso. Intente hacer clic en la tarjeta QR o cerrar el icono; La tarjeta debe cambiar entre los dos estados. Puede cerrar la vista previa presionando X.
Tener esta tarjeta de embarque como un componente interactivo nos permite seleccionar qué datos se muestran dinámicamente, sin tener que crear múltiples estados e interacciones.
Para volver, haz clic en el morado. atrás botón arriba en la parte superior izquierda. Ahora deberías estar de vuelta en el componente boardingPasses. En este componente tenemos tres pases actualmente mostrando los mismos datos. Vamos a actualizar esto ahora.
Recuerde que dentro del componente boardingCard, los datos se configuraron para Heredar de padre? En este caso el padre es la instancia del componente..
En la página del vuelo 1, seleccione la instancia de boardingCard. En el propiedades de los componentes salir Estado como están las cosas. Debajo Datos, seleccione la fuente de datos y asegúrese de Fila se establece en la fila 1. La instancia ahora debe mostrar datos de la primera fila de la hoja de datos.
Si cambia la fila, notará que los datos mostrados se actualizan. Mantengámoslo en la fila 1 por ahora, sin embargo, en el vuelo 2 y el vuelo 3 configuramos esto para mostrar los datos de la fila 2 y la fila 3 respectivamente.
Para que los usuarios puedan deslizar sus pases de embarque, deberemos configurar algunas interacciones de barrido.
Cree y dibuje un punto de acceso (H) en el lado derecho de la página del vuelo 1 (asegúrese de dejar algo de espacio en la parte superior para el punto de acceso sobre el icono de cierre en la página posterior del componente de la tarjeta de embarque, y que no aparezca) t cubrir el código QR en la primera página). Para crear el gesto de deslizar, use la siguiente configuración:
Haga lo mismo en la página del vuelo 2 y agregue un segundo punto de acceso en el lado izquierdo del vuelo 2 y las páginas del vuelo 3 configuradas para Empuje hacia la derecha y Empujar hacia la izquierda en lugar. Siéntete libre de presionar Avance para probar e interactuar con el componente, y ajustar sus ajustes de deslizamiento en consecuencia.
Para terminar de construir el prototipo necesitaremos crear y usar una variable. Esta variable permitirá que nuestros componentes se comuniquen entre sí mientras influyen en su estado..
La variable que crearemos se utilizará para actualizar los puntos de progreso según la tarjeta de embarque que se muestra..
Para crear una variable, presione V para abrir el Variables modales. Aquí haga clic Crear nueva variable y escriba "flightDisplayed" en el Nombre campo. Deje el valor predeterminado en blanco.
Genial, tienes tu variable configurada! Cierre las variables modales presionando la tecla X o escapar en tu teclado.
Navega de regreso al prototipo. Si hacemos una vista previa ahora desde la página de inicio, debería poder deslizar entre las tarjetas y también interactuar con el código QR.
Si bien ahora podemos pasar a través de los pases, hay un par de cosas más que configurar para influir en los puntos de progreso para actualizar según la progresión de los pases de embarque.
Para hacer esto, abre el componente boardingPasses. En la página 1 creamos la siguiente acción de la página:
Repita esto en la página 2 y 3, asegurándose de que el valor esté establecido en 2 o 3 para reflejar la página en la que se encuentra.
Hemos indicado efectivamente al componente boardingPass que actualice el valor de la variable flightDisplayed, dependiendo del vuelo (página) que se muestra. Ahora podemos usar este valor para influir en el estado de los puntos de progreso..
He aquí cómo: regrese al prototipo y abra el componente progressDots.
Notará tres páginas (estados) llamadas 1, 2 y 3. Esta denominación coincide con los valores que se establecen en la variable flightDisplayed. Es importante que estos nombres de página coincidan con los valores establecidos.
Vuelve al prototipo, selecciona el componente progressDots y:
Ahora hemos conectado el componente progressDots a la variable flightDisplayed. Esto significa que cuando el valor de la variable cambia a un valor, el componente progressDots mostrará la página que coincide con el valor de la variable.
Intente previsualizar su prototipo ahora, interactuando con las pasadas de abordaje deslizando y observando si los puntos de progreso se actualizan.
Por último, puede eliminar o mover la página de Activos para asegurarse de que su vista previa compartida se abra en la página de inicio correcta. Para eliminar la página, seleccione el menú de hamburguesas en la miniatura de la página y haga clic en eliminar página.
Propina: Vea si puede averiguar cómo obtener el componente promoCard para actualizar su estado según el vuelo que se muestra. Querrás crear una nueva variable llamada cardDisplayed.
¡Ahí tienes! Su propia aplicación de tarjeta de embarque. Si descargó la aplicación iOS, intente abrir el prototipo e interactuar con él en su iPhone; Debería sentirse como la cosa real..
Bien hecho por seguir este tutorial hasta el final. Ahora deberías tener un conocimiento profundo de cómo crear tu propio prototipo en Atomic. Si tiene recursos existentes en Sketch, puede importarlos usando el Complemento Atomic para Sketch, o diseñar de forma nativa en Atomic si lo desea..
Preguntas? ¿Comentarios? Déjalos debajo o contáctame en Twitter (@femkesvs).
Accentsconagua