Creación rápida de prototipos IOT en Protopie

1. Introducción: Oigan, chicos, estoy en el día de hoy. Vamos a estar aprendiendo a crear prototipos interactivos de Iva T rápidamente con un programa llamado Proto by. Podrás coger una descarga gratuita donde podrías obtener una licencia $100 por un año de actualizaciones, y creo que eso vale la pena el precio. Y nos meteremos en por qué es valioso más adelante. Qué es un producto I T Me gusta pensar en los productos i o T como algo con múltiples canales de comunicación. Piensa que elige un nido Philip para encender bombilla. Entonces es cualquier cosa que se esté conectando con un producto físico y una contraparte digital, y realmente es esta interacción entre la que es tan difícil de probar. Y es por eso que se necesita tanto tiempo y dinero para conseguir realmente algo tangible para obtener comentarios de los usuarios . Y esa es la razón por la que estoy haciendo este video es porque sé de una manera y proceso rápidos que la gente puede obtener retroalimentación de los usuarios temprano en el proceso para acabar con mucha de la especulación que ocurre sobre lo que la gente piensa que los productos deben hacer. Entonces una de las cosas de las que vas a salir con esta clase es cómo hacer un prototipo rápido obtener comentarios de los usuarios sobre él y terminar mucho de eso. La especulación que ocurre en el proceso de desarrollo temprano es tan un poco de fondo en mí. Soy un diseñador de productos científico digital en Atlanta, y mi experiencia está en aplicaciones móviles y sitios web, específicamente para un i ot productos. He trabajado en todo, desde herramientas eléctricas hasta productos para el hogar inteligente, y estas son todas las cosas que he aprendido a mejorar mi proceso, y espero que sean cosas que también puedan ser valiosas, así que empecemos. 2. Paso en : una creación de la entrada (alternar cambio): De acuerdo, Así que una vez que hayas abierto creíble, te darás cuenta a la izquierda. Tienes archivos de ejemplo que son útiles para referencia, pero para este será seleccionando nuevo pastel. ¿ Quién minimizará este adelanto? Y eso fue para empezar así un rápido análisis de lo que hay en la pantalla a la izquierda. Tenemos el panel de capas en medio de las tablas de arte. Aquí es donde bien, dibujar todo a la derecha está el panel de interacción, y a la derecha de eso está el panel intra paciente y como inicio, se asegurará de que nuestros tamaños de pantalla sean correctos. Entonces esto solo va a variar dependiendo para qué estés diseñando. Pero para mí, seleccionaré Android. Entonces lo primero que me gustaría crear es mi interruptor de alternancia para la bombilla. Entonces traeremos un rectángulo, y pondremos el origen al centro y anotaremos. No es realmente importante donde está el origen, siempre y cuando sea consistente con todo lo que te caigas, así que haremos esto un poco más de un rectángulo. Yo solo estoy arrastrando ahí abajo, y lo centraremos en nuestra pizarra, y luego, como es un interruptor de alternancia, hará que el radio 100 y lo primero que queremos que el interruptor de alternancia esté encendido, así que vamos a seguir adelante y hacer y a continuación vamos a hacer más. Iba a haber el interruptor y así otra vez hará que el origen sea el centro y lo dejaremos caer al medio. Y vamos a usar el cambio de opción para reducir esto. Y por aquí, del tamaño que notaste, hay un candado pequeño. Y si seleccionamos esa suerte, podemos usar estos botones para que escale uniformemente y luego usar el teclado para tocarlo sobre él, donde necesitamos Teoh y cambiará el color. Un poco está bien aquí abajo. También podemos añadir una sombra de gota y lo haré porque es un elemento que está encima de la capa de fondo. Y así ahora que tenemos nuestro interruptor de alternancia dibujado, podemos mirarlo en la ventana de vista previa y tenemos nuestro interruptor de alternancia. Entonces el siguiente paso que vamos a hacer aquí, si te das cuenta de hacer clic aquí, todavía no hace nada, y eso es porque no hemos agregado ninguna interacción. Entonces ese va a ser nuestro siguiente paso 3. Paso 2: adición de interacciones: De acuerdo, Entonces la primera interacción que vamos a agregar será mover este interruptor de alternancia hacia la izquierda, apagando efectivamente nuestra vida. Por lo que iremos a agregar gatillo y queremos tocar. Y si miras, aquí hay un montón de otras opciones, y realmente puedes conseguir algunas interacciones bastante en profundidad, pero lo estaremos manteniendo simple para esta. Entonces top y me pidió que seleccionara una capa, y tengo más de una y rectángulo uno y una nota rápida. Siempre es útil nombrar adecuadamente tus capas, porque en algunos archivos grandes, es muy fácil confundirlas. Entonces ahora, si vamos por encima, vamos a querer decirle a su interruptor, y lo que queremos cambiar a hacer se mueve hacia la izquierda, simulando que se apaga. Entonces si vamos por aquí, necesitábamos movernos por el eje X. Entonces, si haces clic en el tablero de arte, sabemos que es una posición a 7.5, y es útil anotar estos números, ya sea en notas o en papel, lo que prefieras, así que lo trasladaremos a sobre dónde debería ser para apagarse y estamos 1 53.5 no Comando Z hasta que vuelva a donde empezó. Después iremos a X, y sabemos que necesita pasar a 1 53.5 Así que ahora que tenemos esta configuración, podemos mirarla en nuestra ventana de vista previa. Entonces si seleccionamos tap, significa siempre a donde debería. Entonces el siguiente paso es que no queremos que solo se mueva. Queremos que el color cambie, que signifique que se está apagando. Entonces iremos de color de fondo y luego pondremos eso lleno para cambiarlo a Gray. Si te darás cuenta aquí, hay algunos otros ajustes de flexibilización y animación que puedes hacer para el para. El propósito de este vaso sólo será mantener es dentro y fuera en una duración de punto a. Pero si alguna vez quieres explorar, hay algunas animaciones bastante interesantes en las que puedes ajustar y algunas cosas bastante fáciles en las que meterte. Volvamos a nuestro avance. En realidad voy a bajar esto para que pudiéramos ver nuestra ventana de vista previa en la parte superior. Por lo que ahora cuando hacemos clic , también cambiará de color. Pero el problema es que cuando volvemos a hacer clic, No se moverá. Eso es lo que necesitamos para dio es poner una declaración condicional para asegurarnos de que el interruptor podría estar encendido y apagado. Entonces si nuestro switch, si sus conmutadores el valor X es igual a 1 53.5 así que ese es el valor para que esté apagado. Entonces queríamos volver a su posición on a dos de 7.5. Ahora, vamos a revisar para ver si eso funcionó. Está bien, genial. Sí funcionó. Entonces ahora te das cuenta que podemos encenderlo y apagarlo. Ahora, todo lo que necesitamos hacer es en un cambio de color de nuevo a verde para esa condición. Asegúrese de que las capas correctas seleccionadas verde. Está bien, Perfecto. Todo lo demás se ve bien. Eso es previsualizarlo una vez más. Impresionante. Entonces ahora que tenemos su archivo configurado con interacciones, lo siguiente que vamos a hacer es enviar comandos a otro prototipo 4. Paso 3: crear la salida (luz): De acuerdo, entonces ahora queremos agregar comandos de pecado a otro prototipo. Y así todo lo que significa es que cuando hablemos del interruptor de encendido y apagado, estará sentando un comando a otro prototipo para encender una luz propia casa. Entonces iremos aquí, vamos a mandar mando. Y acabamos de agregar que antes de esta condición, y sabemos que significa encender y no hay aviso se puede seleccionar canal aparece utilizamos crédito por estudios. Eso sólo significa que se va a comunicar con otro prototipo androide broadcast es algo un poco diferente. Entra más tarde, se encenderá el mensaje, y así llegará aquí abajo debajo de la declaración condicional. Agregaremos otro comando de envío para que se apague. Y es importante recordar cómo se les llama a estos porque sí tiene que ser el objetivo exacto para recordar el mando y otros depredadores. Entonces ahora que eso está hecho, podemos ir a guardar archivos, y vamos a llamar a esta entrada de switch. Eso lo diremos al escritorio, y luego podremos crear un nuevo archivo super tamaño. Voy a ponerlo su escritorio. Y la razón por la que estoy haciendo esto es porque probablemente vamos a mostrar otra computadora o una pantalla de TV o incluso posiblemente un proyector. Realmente solo depende de cómo quieras mostrarle un prototipo a un usuario. Y entonces lo que vamos a hacer es importante Aliado, no vamos a importar. Vamos a traer una imagen vamos a traer esta bombilla. Eso va a centrar en la pantalla, y luego vamos a ir rectángulo. Vamos a hacer un rectángulo que sea del tamaño del tablero de arte y notar en este panel de capas , no está apareciendo. Todo lo que puedes hacer es arrastrar y soltar para reordenar. Y vamos a hacer de este rectángulo negro para significar que la luz está apagada para que no puedas ver nada. Y luego después de que tengamos eso, iremos a agregar gatillo por aquí, ¿recibes? Y el mensaje que quiere recibir está apagado y se asegurará de que cambie el color del rectángulo toe negro y el otro mensaje que queríamos recibir estará encendido. Y queremos que el color cambie. Digamos a naranja cuando reciba el comando turn on, todo se ve bien para que podamos previsualizar que minimizan. Y así lo que podemos hacer ahora es que puedes sacar tu teléfono y bajar la app de prettify si aún no lo has hecho y podemos previsualizar este primer diseño en él. 5. Paso 4: previsión en la versión en Mobile: Entonces si investigamos jugador prettify en la tienda APP, encontraremos lo que necesitamos. Y así una vez que te abran eso, te darás cuenta en la parte superior. Hemos escaneado tipo en velocidad de Estados Unidos. Puedes usar los tres de esos para conectarte a un prototipo, y también tienes conexiones recientes. El fondo Si ya has conectado WiFi, pero ¿escanearás este? Por lo general es bastante seguro en tu primer uso, y puedes ir al dispositivo de los dos primeros para sacar ese código de barras que saben que notaron. Tu prototipo viene automáticamente a tu teléfono, y lo usaremos para el siguiente paso. 6. Paso final: ver tu interacción: Por lo que una vez que obtienes tu crédito por APP descargada, puedes escanear o usar USB para sacar el prototipo hacia arriba o usar WiFi si ya se ha conectado antes . Pero una vez que lo saquemos, podemos levantar nuestro prototipo de luz en su computadora, y te darás cuenta de que si hablamos del interruptor de encendido y apagado nuestra respuesta de luz y la belleza de este ser en una computadora a si es necesario, puedes conectarlo a un televisor o a un proyector. Si estás en una sala de reuniones con usuario, es realmente fácil tipo de burlarse de esto en un entorno un poco más profesional. Pero lo bueno de esto es que estamos empezando a probar la interacción entre un producto digital y un producto físico, y es una buena manera de dividir un poco a los usuarios enfocarse y conseguir que entiendan cómo se va a usar en contexto, un poco más que algo así como prototipos rápidos o simplemente un simple prototipo de papel y avanzando con las próximas clases. De lo que podríamos conseguir en ejecutar más prototipo de alta fidelidad con interacciones mawr y un entorno más creíble que podamos renderizar. Pero por ahora, por favor siéntase libre de intentar hacer ejercicio de clase y házmelo saber. Ustedes piensan que gracias