Prototipagem rápida de IOT no Protopie

1. Introdução: Ei, pessoal, estou no dia de hoje. Vamos aprender a criar protótipos interativos de Iva T rapidamente com um programa chamado Proto por. Você pode pegar um download gratuito onde você poderia obter uma licença $100 por um ano de atualizações, e eu acho que vale bem o preço. E saberemos por que é valioso mais tarde. O que é um produto I T eu gosto de pensar em i o T produtos como algo com vários canais de comunicação. Acho que elege um ninho Philip para a lâmpada. Portanto, é qualquer coisa que esteja conectando com um produto físico e uma contraparte digital, e é realmente essa interação entre eles que é tão difícil de testar. E é por isso que leva tanto tempo e dinheiro para realmente obter algo tangível para obter feedback do usuário . E essa é a razão pela qual eu estou fazendo este vídeo é porque eu sei de uma maneira rápida e processo que as pessoas podem obter feedback do usuário no início do processo para acabar com muitas especulações que acontecem sobre o que as pessoas pensam que os produtos devem fazer. Então, uma das coisas de que você vai sair com essa classe é como fazer um protótipo rápido obter feedback do usuário sobre ele e terminar muito disso. A especulação que acontece no início do processo de desenvolvimento é um pouco de fundo em mim. Eu sou um cientista digital designer de produtos em Atlanta, e minha experiência é em aplicativos móveis e sites, especificamente para produtos de um i ot. Trabalhei em tudo, desde ferramentas elétricas a produtos domésticos inteligentes, e essas são todas as coisas que aprendi para melhorar meu processo, e espero que sejam coisas que podem ser valiosas também, então vamos começar. 2. Step) Criando a entrada (Alternativa ): Certo, assim que abrires credível, vais reparar à esquerda. Você tem arquivos de exemplo que são úteis para referência, mas para este será selecionar nova pizza. Quem minimizará esta pré-visualização? E isso foi para começar um resumo rápido do que está na tela para a esquerda. Temos o painel de camadas no meio das placas de arte. Aqui é onde bem, desenhar tudo para a direita é o painel de interação, e à direita disso é o painel intra paciente e, como um começo, irá garantir que nossos tamanhos de tela sejam corretos. Então isso vai variar dependendo do que você está projetando. Mas para mim, vou selecionar Android. Então a primeira coisa que eu gostaria de criar é o meu interruptor de alternância para a lâmpada. Então vamos trazer um retângulo, e vamos colocar a origem no centro e anotar. Não é realmente importante onde a origem está, desde que seja consistente com tudo o que você derruba, então vamos fazer isso um pouco mais de um retângulo. Eu só estou arrastando para baixo, e nós vamos centrá-lo em nossa placa, e então, como é um interruptor de alternância, vai fazer o raio 100 ea primeira coisa que queremos que o interruptor de alternância para estar ligado, então nós vamos ir em frente e fazer e em seguida vamos fazer mais. Haveria o interruptor e então novamente vai fazer a origem o centro e vamos deixar isso para o meio. E vamos usar a opção Shift para reduzir isso. E aqui, o tamanho que você notou, há uma pequena fechadura. E se selecionarmos essa sorte, podemos usar esses botões para fazê-la escalar uniformemente e, em seguida, usar o teclado para bater sobre ela , onde precisamos de Teoh e vai mudar a cor. Um pouco está bem aqui em baixo. Nós também podemos adicionar uma sombra e eu vou porque é um elemento que está em cima da camada de fundo. E agora que temos nosso interruptor de alternância desenhado, podemos olhar para ele na janela de visualização e temos nosso interruptor de alternância. Então o próximo passo que vamos fazer aqui, se você notar que clicar aqui, não faz nada ainda, e isso é porque não adicionamos nenhuma interação. Então esse será o nosso próximo passo 3. Passo 2: adicionando interações: Ok, então a primeira interação que vamos adicionar será mover este interruptor para a esquerda, efetivamente desligando nossa vida. Então, vamos adicionar gatilho e queremos tocar. E se você olhar, há um monte de outras opções aqui, e você pode realmente obter algumas interações bem profundas, mas vamos manter as coisas simples para este. Então topo e me pediu para selecionar uma camada, e eu tenho mais de um e retângulo um e uma nota rápida. É sempre útil nomear suas camadas apropriadamente, porque em alguns arquivos grandes, é muito fácil misturá-las. Então, agora, se passarmos por cima, vai querer dizer ao interruptor dela, e o que queremos mudar para fazer é movido para a esquerda, simulando que está sendo desligado. Então, se formos até aqui, precisávamos nos mover no eixo X. Então, se você clicar no quadro de arte, sabemos que é uma posição para 7,5, e é útil anotar esses números, seja em notas ou no papel, o que você preferir, então vamos movê-lo para onde Deve ser desligado e nós somos 153.5 e não Comando Z até que esteja de volta onde começou. Então vamos para o X, e sabemos que ele precisa passar para 153.5 Então, agora que temos isso configurado, podemos olhar para ele em nossa janela de pré-visualização. Então, se selecionarmos toque, isso significa sempre para onde deve. Então o próximo passo é não queremos que ele se mova. Queremos que a cor mude, para significar que está desligando. Então vamos cor de fundo e então obtemos isso preenchido para mudar para cinza. Se você notar aqui, há alguns outros ajustes de facilitação e animação que você pode fazer para o para. Os propósitos deste copo será apenas manter é dentro e fora em uma duração de ponto para. Mas se você quiser explorar, há algumas animações interessantes que você pode ajustar e algumas coisas muito fáceis entrar. Vamos voltar para a pré-visualização. Na verdade, vou largar isto para vermos a janela de pré-visualização no topo. Então, agora, quando clicarmos, ele também mudará de cor. Mas o problema é que quando clicarmos novamente, ele não vai se mover. Isso é o que precisamos para dio é colocar uma declaração condicional em para garantir que o interruptor possa ser ligado e desligado. Então, se o nosso interruptor, se o valor de X é igual a 1 53.5 então esse é o valor para ele estar desligado. Então queríamos voltar para a sua posição em dois de 7.5. Agora, vamos ver se funcionou. Ok, ótimo. Ele funcionou. Agora você percebe que podemos ligá-lo e desligá-lo. Agora, tudo o que precisamos fazer é mudar de cor para verde para essa condição. Verifique se as camadas certas estão selecionadas em verde. Certo, Perfeito. Tudo o resto parece bom. Isso é pré-visualização mais uma vez. Incrível. Então agora que temos seu arquivo configurado com interações, a próxima coisa que vamos fazer é enviar comandos para outro protótipo 4. Passo 3: crie a saída (Luz): Ok, então agora queremos adicionar comandos sin a outro protótipo. E então tudo o que significa é que quando falamos sobre o interruptor ligado e desligado, ele vai estar sentado um comando para outro protótipo para transformar uma luz própria casa. Então vamos para aqui, vamos enviar o comando. E acabamos de adicionar que antes desta condição, e sabemos que isso significa ligar e nenhum aviso você pode selecionar canal aparecem usamos crédito por estúdios. Isso só significa que ele vai se comunicar com outro protótipo de transmissão android é algo um pouco diferente. Entre em mais tarde, a mensagem será ligada, e assim vai chegar aqui abaixo da declaração condicional. Adicionaremos outro comando de envio para ser desativado. E é importante lembrar o nome a eles, porque ele precisa ser o objetivo exato para recordar o comando e outros predadores. Então, agora que isso está feito, podemos ir salvar arquivo, e vamos chamar essa entrada switch. Vamos dizer isso para a área de trabalho e, em seguida, podemos criar um novo tamanho super arquivo. Vou colocar a área de trabalho dele. E a razão pela qual estou fazendo isso é porque provavelmente mostraremos outro computador ou uma tela de TV ou até mesmo um projetor. Isso realmente depende de como você quer mostrar um protótipo para um usuário. Então o que vamos fazer é importante Allied, não vamos importar. Vamos trazer uma imagem que vamos trazer esta lâmpada. Ele vai centrar isso na tela, e então nós vamos para retângulo. Vamos fazer um retângulo que seja do tamanho do quadro de arte e notar que neste painel decamada painel de não está aparecendo. Tudo o que você pode fazer é arrastar e soltar para reordenar. E nós vamos fazer este retângulo preto para significar que a luz está desligada para que você não possa ver nada. E depois de conseguirmos isso, vamos adicionar gatilho aqui, você recebe? E a mensagem que deseja receber está desativada e irá certificar-se de que muda a cor do dedo do pé retângulo preto e que a outra mensagem que queríamos receber será ativada. E queremos que a cor mude. Digamos que laranja quando ele recebe o comando turn on, tudo parece bom para que possamos visualizar que minimizar. E então o que podemos fazer agora é que você pode tirar seu telefone e descer no aplicativo prettify se você ainda não fez isso e podemos visualizar este primeiro design nele. 5. Passo 4: visualizando no móvel: Então, se a pesquisa prettify player na loja APP, vamos encontrar o que precisamos. E assim que você abrir isso, você vai notar no topo. Nós digitalizamos o tipo na velocidade dos EUA. Você pode usar todos os três para se conectar a um protótipo, e você também tem conexões recentes. A parte inferior Se você já conectou WiFi, mas você vai digitalizar para este? Geralmente é bastante seguro em seu primeiro uso, e você pode ir para os dois primeiros dispositivos para puxar o código de barras que eles sabem que notaram. Seu protótipo chega automaticamente ao seu telefone e usaremos isso para a próxima etapa. 6. Passo final: vendo sua interação: Assim que você receber seu crédito por APP baixado, você pode digitalizar ou usar USB para puxar o protótipo para cima ou usar WiFi se ele já foi conectado antes . Mas uma vez puxado para cima, podemos puxar nosso protótipo de luz em seu computador, e você vai notar que se falamos sobre o interruptor ligar e desligar nossa resposta de luz e a beleza de estar em um computador para, se você precisar, você pode conectá-lo a uma TV ou a um projetor. Se você está em uma sala de reuniões com o usuário, é realmente fácil de fazer isso em um ambiente um pouco mais profissional. Mas a grande coisa sobre isso é que estamos começando a testar a interação entre um produto digital e um produto físico, e é uma boa maneira de dividir o foco dos usuários um pouco e fazê-los entender como ele vai ser usado no contexto, um pouco mais do que algo como protótipos rápidos ou apenas um protótipo de papel simples e avançando com as próximas classes. O que poderíamos obter em executar protótipo de mais alta fidelidade com interações mawr e um ambiente mais credível que podemos renderizar. Mas, por enquanto, sinta-se livre para tentar fazer exercícios e me avise. Vocês acham que obrigado