Protótipo de aplicativos para dispositivos móveis: criando interações personalizadas

1. Introdução: Oi. Eu sou Noah, e eu sou um designer de produtos atualmente morando em São Francisco, e esta classe é sobre protótipos móveis personalizados de alta fidelidade usando Framer. Nos últimos quatro anos e meio, eu liderei a equipe de design do Google trabalhando no Google app para iOS, e nosso objetivo é construir um assistente móvel diretamente no seu bolso que permita que você procure todos os tipos de informações da Pesquisa Google . Se você é como eu, e você está projetando por um tempo, quando fizemos a primeira transição para celular, havia um monte de coisas novas para pegar. Não só as pessoas esperavam informações mais rapidamente, as tarefas eram um pouco mais transitórias, como também há um novo nível de tipos de interações, incluindo deslizar, arrastar e até mesmo falar com sua voz, e ainda nós realmente não tínhamos as ferramentas de design que poderiam alcançar esse tipo de design. Então, felizmente, eu aprendi sobre o Framer alguns anos atrás e comecei a usá-lo em nosso processo para começar a definir esses tipos de interações. Isso significa que usando seu telefone diretamente para mostrar suas idéias em vez de olhar para cima em uma tela, você pode começar a ter a noção quanto mais oportunidade você teve para mudar seu design, para tornar as coisas mais fáceis de usar, e para tornar as coisas realmente deliciosas para brincar. Há três exercícios diferentes que vamos passar neste curso. Se você já fez todos os três, então você vai aprender o básico do Framer, incluindo animação, incluindo eventos como clicar, arrastar e deslizar, e tudo assim, e também incluindo Sketch importação. Uma das grandes coisas do Framer é que, se você já usou o Sketch antes, você pode importar seus designs em seu protótipo e começar a manipulá-los imediatamente. Então, para o primeiro exemplo, vamos rever os conceitos básicos da animação. Quando eu clico em um objeto, como faço para animá-lo? Isso inclui coisas como física. Eu ainda estou pensando mais sobre o tempo e as curvas que acontecem quando algo se move através da tela para basicamente dar mais detalhes lá. Para o segundo exercício, vamos passar por um passo a passo de um aplicativo móvel. Basicamente, quando você abre um aplicativo pela primeira vez, às vezes você vai notar que há algumas telas que você desliza para obter a essência do que o aplicativo é sobre. Esse é um padrão móvel bastante comum, e então, vamos passar por cima disso. Você pode até usar seus próprios exemplos nesse caso, se quiser, mas eu forneci exemplos para cada um deles para você. Para o terceiro, vamos importar um aplicativo de lista de tarefas do Sketch e aprender a deslizar algo para longe, aprender a criar uma exibição rolável. Se você fez a aula Skillshare para o Sketch, você pode realmente usar seu design desse curso e importá-lo para o Framer e torná-lo ganhar vida. Há três coisas principais que espero que tire desta aula. A primeira é que você aprenderá por que a prototipagem é importante, por que ela pode ajudá-lo em seu processo e como realmente aplicá-la ao seu trabalho diário como designer? Você aprenderá a criar protótipos de alta fidelidade, tipos personalizados de protótipos que permitem muito mais detalhes. Por último, espero que você realmente pegar se você não tiver codificado antes. Esta é uma ótima maneira de obter os conceitos básicos de codificação para baixo. Não é um requisito para este curso que você codificou para usar Framer. Isso certamente ajuda, mas você pode apenas seguir adiante, e eu acho que você vai ter um monte de novas idéias ao longo do caminho. Então, nesta aula, para esses três exercícios, você pode carregar um ou todos eles dependendo de quantos você começa a fazer. De qualquer forma, por favor, basta ir em frente e experimentá-lo porque eu estou por perto para feedback sobre esses, ou conselhos , ou se você tiver problemas, você pode mencioná-lo lá a qualquer momento ou mesmo no grupo do Facebook que eu tenho ligado no recursos. Então, apenas certifique-se de dar uma foto, talvez fazer upload de um GIF dele, se você quiser, ou uma imagem ou uma captura de tela. Uma ferramenta GIF que eu gosto de usar é chamada LiceCap, e vou mencionar mais sobre isso na discussão também. Mas definitivamente vá em frente e carregue seu projeto que inclui esses três exemplos ou novamente, qualquer que você decidir fazer. 2. Por que criar protótipos?: Uma pergunta muito comum sobre prototipagem é que existem tantas ferramentas lá fora, e como você deve descobrir qual ferramenta você deve usar. Eu vou quebrar basicamente todas as diferentes opções que estão lá fora pelo menos um grande conjunto deles para ajudá-lo a ter um framework em mente para quando você poderia usar cada um deles. Em uma extremidade do espectro, você tem um conjunto de ferramentas simples. Essas são coisas que são muito fáceis de usar e rápidas de pegar, e eles permitem que você faça coisas como cliques, eles permitem que você faça animações básicas, e essas são ferramentas como Envision e Flinto que são realmente bastante popular porque você pode começar imediatamente a usá-los para montar telas de sua interface. Na outra extremidade do espectro, temos ferramentas que são mais difíceis de aprender, mas também permitem que você faça muito mais. Estas são ferramentas de maior fidelidade, como as que estamos usando hoje, framer. Essas ferramentas podem demorar um pouco mais, mas na verdade permitem que você defina interações realmente personalizadas da próxima geração em vez de coisas que são incorporadas diretamente no seu dispositivo. Às vezes, eles também permitem que você aproveite os recursos nativos do telefone, como usar a câmera e assim por diante. Entre esse espectro, há todo um conjunto de ferramentas que não são muito difíceis de usar, eles são bastante decentes para pegar e realmente permitem que você faça algumas coisas que são personalizadas, e assim eles misturam o melhor de ambos os mundos de muitas maneiras, mas realmente depende do que você quer. Então, a próxima pergunta mais comum quando se trata de prototipagem é quando é realmente apropriado protótipo? Porque acontece que nem sempre é o momento certo para fazê-lo, e também certas partes do processo de design podem exigir ferramentas diferentes em diferentes lugares. Então, há realmente cinco tipos diferentes de coisas para pensar quando você está pensando sobre quando eu deveria protótipo. O primeiro é o processo, que é onde, ao longo da linha do tempo do seu processo de desenvolvimento, você está? Se você está no caminho final, e você já tem um aplicativo funcionando e você está realmente apenas ajustando detalhes, provavelmente não faz sentido para você usar ferramentas que lhe dão cliques de alto nível das coisas. Mas se você está no início de um processo, você provavelmente não quer gastar uma tonelada de tempo ou muito tempo em código de uma forma que pode dificultar a capacidade de apenas realmente identificar qual é o principal problema que você está tentando resolver. É melhor ter certeza de que você usa ferramentas que são rápidas e fáceis de usar e realmente permitem que você simplesmente decida em que espaço problemático você deve estar trabalhando. O segundo é constrangimentos. Com restrições que você realmente quer pensar sobre o que sua equipe de desenvolvimento, o que eles são capazes de fazer? Se é um monte de pessoas que são novas na engenharia, você pode não querer complicar as coisas ou confundi-las com interfaces de flash personalizadas da próxima geração, certo? Provavelmente é melhor manter o básico e usar os componentes embutidos. Então você pode não querer usar uma ferramenta mais avançada nesse caso. A terceira coisa a ter em mente é o tempo. Quanto tempo você tem? Se você tem uma tonelada de tempo e todos os recursos do mundo, então ótimo! Você pode criar protótipos de várias gerações de algo até que você esteja realmente feliz com ele e, em seguida, saltar para dentro e projetá-lo. Se você realmente não tem muito tempo, um truque que você pode realmente fazer é talvez se apoiar em sua equipe de engenharia para que proto-digitação que pode economizar um pouco de tempo nesse caso para que você não precise fazer o trabalho redundante de especificá-lo uma vez em si mesmo e, em seguida, o engenheiro fazê-lo novamente de qualquer maneira. A quarta coisa a ter em mente é o contexto. O que este aplicativo precisa ter? Precisa ser responsivo? Ele precisa trabalhar com dados reais? Todos esses diferentes tipos de variáveis podem afetar a ferramenta que você pode usar. Por exemplo, se você estiver usando dados reais, apenas algumas das ferramentas mencionadas permitem que você faça isso. Normalmente, aqueles que são um pouco mais difíceis de pegar de qualquer maneira. Se for algo que talvez precise de interação de voz, sua câmera, todas essas coisas podem afetar a ferramenta que você usa. O último é conforto pessoal. A verdade é que não há uma ferramenta dominante de melhor prototipagem. Não há uma ferramenta que você deveria usar para tudo. Esse não é o caso. Porque, honestamente, depende um pouco de você e do que você gostaria de usar, e eu acho que é melhor não impor um processo específico e uma maneira de fazer algo. Devias usar o que te sentires confortável. Então, cabe a você mesmo. 3. Protótipo 1: crie uma animação: Olá, e bem-vindos ao seu primeiro exercício de Framer. Caso ainda não tenha feito isso, acesse framerjs.com e baixe a avaliação gratuita para que possamos começar. Quando você tiver feito esse quadro aberto, e você notará que é recebido com uma janela de boas-vindas que tem um conjunto de exemplos comuns de componentes de interação para os quais você pode usar o Framer, além de um link para saber mais e também um link para nossa comunidade, que é realmente um ótimo lugar para fazer perguntas, ver exemplos, dar feedback, qualquer que seja. Vamos começar clicando no ícone de adição para iniciar um novo documento do Framer. Eu lhe dei uma imagem de Buzz Lightyear para isso, mas você é realmente bem-vindo para usar qualquer imagem que quiser da Internet. Isso é totalmente bom. Quando você tiver a imagem que você gostaria, arraste diretamente para o telefone, e você notará que ele aparece diretamente na tela. Quando fizemos isso, algumas coisas aconteceram. Você notará no caminho à esquerda, um trecho de código apareceu que define a largura de Buzz Lightyear, sua altura e um link para a imagem. Isso está escrito em algo chamado CoffeeScript, que é uma versão mais simples e limpa do JavaScript. Se você não codificou antes, tudo bem. Basta acompanhar, e se você tiver alguma dúvida, você pode se sentir livre para postar na discussão. Faremos o nosso melhor para respondê-las. Você vai notar no meio que há o painel de camadas que tem um link para onde a imagem é mostrada à direita, e se você tem muitas camadas, é muito útil dizer onde tudo está. Por enquanto, vamos começar renomeando a camada de imagem para Buzz, apenas para torná-la um pouco mais fácil de trabalhar, e você verá o painel de camada atualizado de acordo. Então, a primeira coisa que vamos fazer é aprender sobre algumas das propriedades que o Framer permite que você altere para suas imagens. Então, por exemplo, quando você digita buzz. O autocomplete oferece um monte de opções diferentes. Dá-lhe o seu x e y e desfoque. Dá-lhe tamanho e assim por diante, escala. Por enquanto, vamos brincar com a balança, e talvez a dobremos. Você pode ver o Buzz atualizações imediatamente à direita, o que é realmente ótimo para feedback instantâneo. Você pode torná-lo muito pequeno. Por enquanto, vamos em frente e fazer 0,8. Também queremos mudar a posição do Buzz. Podemos fazer isso sem problemas. Então, você pode ver ele se movendo um pouco para baixo. Se eu for para 500, ainda mais longe. Vamos deixá-lo perto do fundo aqui. Parece muito bom. Também podemos querer mudar sua posição x. Você pode fazer isso alterando sua posição x diretamente. Você também pode usar algo que chamamos de métodos para ajudar a acelerar o processo, se houver algo específico que você queira fazer, como centralizá-lo. Então, aqui nós centramos a posição x de Buzz horizontalmente. Você pode centralizá-lo verticalmente, ou ambos. Neste caso, só queremos centralizá-lo horizontalmente. Agora, o que queremos fazer é começar a dar vida a isto. Queremos começar a fazer o que o Framer é realmente bom, que é adicionar eventos para clicar ou arrastar, e animar, e assim por diante. Então, há tudo o que podemos fazer. Um muito divertido que eu gosto de começar às vezes é tornar o item arrastável. Tudo o que você faz para isso é definir arrastável habilitado para verdadeiro, e já você pode voar Buzz ao redor, o que é muito legal. Você vai notar que ele ainda tem impulso embutido de graça. É muito divertido. Não vamos fazer muito com arrastar este exemplo. Faremos isso mais em exemplos futuros. Mas é muito divertido para começar, por causa de como é fácil. Mas o que vamos começar é adicionar um evento, que quando eu clicar em buzz algo aconteça. Então, para fazer isso, vamos digitar Buzz.on e olhar para a série de eventos que Framer nos dá. Para este caso, vamos em frente e com um clique. Nós vamos querer mover o Buzz para o ar quando você clicar nele. Para fazer isso, podemos mudar sua posição y para algo como, sei lá, 100. Agora, se você mover o cursor para a direita, você clica no Buzz, ele salta para o ar. Mas você vai notar, ele simplesmente enlouquece, e isso não é muito interessante. Queremos animá-lo e fazer parecer que ele está voando. Na vida real, as coisas não se teletransportam de A para B, legais se o fizerem, mas não se transformam. Então, queremos animar isso, e para fazer isso, tudo o que temos a fazer é digitar Buzz.Animate e começar a dar algumas propriedades. Então, vamos, por exemplo, animar a mesma coisa. Agora ele voa no ar. Você pode pressionar o botão de recarga ou o comando R para atualizar e tentar novamente. Muito legal. Agora, uma coisa a salientar é que CoffeeScript usa algo chamado indentações para marcar quais linhas de código se referem a quê. Então, neste caso, qualquer coisa que eu escreva aqui com este x e y, refere-se ao pai mais próximo onde a linha mais próxima atrás dele que não está recuada, que neste caso são propriedades. Da mesma forma, no topo do caminho, quando especificamos a largura e a altura do Buzz, todas essas coisas se referem à própria camada. Se você usou coisas como JavaScript, você pode reconhecer coisas como colchetes que tendem a acontecer que bloqueiam coisas no lugar. É assim, só que um pouco mais limpo. Então, a próxima coisa que queremos fazer é notar que o movimento está acontecendo muito lentamente, e também está acontecendo na mesma taxa ao longo do tempo. Então, vamos primeiro definir a velocidade. Você pode ir em frente e adicionar o número de segundos que você prefere para esta animação acontecer. Então, neste caso é um segundo, um pouco melhor. Mas posso fazer meio segundo ou até um quarto de segundo, e ver como isso afeta as coisas. É divertido. Você já pode ter uma noção de como eu posso mudar apenas algumas coisas e ter uma noção de como ele se sente até que eu esteja feliz com isso. Talvez eu queira começar a adicionar mais algumas propriedades como rotação, talvez escala. Muito legal. Então, eu também mencionei que não é apenas a velocidade que queremos olhar, mas a taxa ao longo do tempo em que ele está animando. Então, para isso, temos algo chamado curvas. As curvas permitem que você especifique diferentes tipos de maneiras pelas quais deseja que sua camada seja animada. Neste caso, quero que se sinta como se fosse um objeto físico real, há algo, como se estivesse realmente afetado pelas regras da física. Então, vamos dar uma mola, e explicarei o que isso significa em um segundo. Então, agora você vai notar, quando eu clicar no Buzz, ele brota e salta para fora do topo da tela, o que é muito legal. Então, o que é isso, e como fazemos isso? Você vai notar que há três valores lá. Vamos em frente e aparecer no site do Framer para dar uma olhada no que eles fazem. Há uma pequena ferramenta que permite que você altere essas variáveis diferentes e veja como elas afetam a animação, o que é uma maneira muito divertida e rápida de decidir como você quer que sua animação se sinta. Então, à medida que mudo isso, as coisas ficam mais ou menos saltitantes. Se você quiser saber um pouco mais sobre por que isso é, uma maneira que eu gosto de pensar sobre isso é pensar sobre esses objetos como objetos reais, e pensar sobre como esses objetos se moveriam caso tivessem sido reais. Então, por exemplo, se eu jogar uma bola contra a parede, ela não vai apenas a uma taxa suave ao longo do tempo e pára no final, ele tem alguma física aplicada a ela. Certo? Quando bater na parede, pode saltar. Se é uma rocha, pode ser afetada de uma certa maneira, o peso da rocha pode mudar as coisas. Então, neste caso, essas três variáveis se referem à tensão que poderia ser vista como saltitante, novamente talvez a forma dela, poderia ser vista como fricção que talvez seja o peso do objeto e como isso afeta sua velocidade ao longo do tempo, e também velocidade que é um windup quanta força inicial você está dando no início. Na verdade, não costumo achar que precisamos usar velocidade. Você pode usá-lo se você quiser, mas eu gosto de manter as coisas simples, e apenas usar duas propriedades, o que é muito bom. Então, se isso parece com elástico, você pode apenas brincar até você estar feliz. Então, a próxima coisa que queremos fazer é dar Buzz como uma série de estados para jogar. Então, agora, ele voa no ar, mas e se quisermos que façam algumas coisas diferentes? Bem, Framer torna isso muito fácil com algo chamado estados. O que queremos fazer é definir um nome para o estado, que vamos chamar de voar, e dar-lhe um monte de propriedades. Podemos usar os mesmos que usamos lá em cima, você pode até copiá-los e colá-los se quiser. Você pode usar colchetes de comando para recuar e recuar como você gostaria também. Para chamar esse estado, tudo o que você precisa fazer é digitar states.next. Agora, quando eu clico nele, ele anima para cima e para baixo. Agora, a razão pela qual ele sabe voltar para baixo é porque os estados do Framer entendem onde o item foi posicionado inicialmente, e se lembra disso como padrão para que ele reverta de seu estado padrão para o estado que você definiu. Mas está acontecendo lentamente de novo. Então, queremos lembrar de trazer de volta a curva que usamos. Para fazer isso, tudo o que você precisa fazer é digitar as opções de animação, e dar-lhe essas propriedades. Agora, ele brota. Você pode adicionar quantos estados quiser. Então, se eu quiser adicionar outro, e eu quero começar a mudar as coisas um pouco, jogar coisas entre elas, talvez eu queira dar talvez um efeito flip, o que pode ser legal. Então, eu quero girá-lo em torno de seu eixo y, então ele vira horizontalmente. Talvez, eu queira que sua escala seja movida de alguma forma, e aí está. Três estados diferentes. Muito legal. Agora, só para torná-lo um pouco mais interessante, agora só temos uma camada. E se quiséssemos mudar o plano de fundo adicionando outra camada? Tudo que você precisa fazer é adicionar um fundo. Por padrão, ele se aplica a branco, mas você pode realmente adicionar qualquer cor que quiser. Então, neste caso, vamos em frente e adicionar um azul suave agradável. Parece muito bom. Finalmente, podemos compartilhar isso com quem quisermos com apenas um simples clique. Ao ir para o botão de compartilhamento na barra de ferramentas, ele vai pedir que você salve, o que é uma coisa boa para obter o hábito de fazer. Quando você fizer isso, temos um link para o protótipo, copiar para a área de transferência e ele já está carregado no Chrome. Você pode jogar com ele diretamente no navegador, o que é ótimo, porque você pode compartilhá-lo com amigos, ou colegas de trabalho, quem quer que apenas compartilhando esse URL. Quando você estiver olhando para o protótipo do Framer, você notará que você também pode clicar em abrir se estiver visualizando protótipo de outra pessoa para abri-lo diretamente no Framer e ver como eles o fizeram, ou baixá-lo se for o que você preferir. Você também pode visualizá-los diretamente no seu telefone, o que é realmente útil enquanto você está protótipos. Algumas pessoas gostam de clicar no botão espelho, que lhe dá um conjunto de aplicativos que você pode baixar em seu telefone e visualizá-los em tela cheia, e eles até permitem que você visualize em tempo real para que você possa fazer mudanças e ver como eles se sentem, o que é super útil. Agora, a última coisa que vou mencionar são apenas algumas dicas para o caso de você ficar preso ou algo assim. Temos na barra de ferramentas algo chamado snippets que lhe dá um conjunto de itens comumente usados nos trechos de código que são usados para criá-los. Então, hoje falamos sobre estados. Então, você pode clicar nesse, e você vai notar um monte de código é adicionado. Ele lembra como fazer essas coisas, e você pode jogar com eles diretamente à direita, que eu gosto de usar para que eu possa copiar e colar coisas se eu esquecer alguma da sintaxe. Mas outra coisa que você pode fazer é clicar na documentação, que tem tudo disponível no lado esquerdo. Você pode até procurar. Hoje, falamos sobre estados novamente. Então, aprendemos sobre opções de animação, aprendemos sobre como animar entre elas, e há até todas as outras que não usamos que você pode jogar sempre que quiser. Finalmente, enquanto você está digitando, observe que diferentes propriedades aparecem. Você pode até clicar em um pequeno atalho no canto inferior direito para ver o que essa propriedade está se referindo e o que ela faz, que é realmente útil. Então, agora você aprendeu o básico de como clicar e animar coisas, aprendeu um pouco sobre eventos e propriedades, e o painel de camadas, como compartilhar. Com todo esse conhecimento, será incrível se você for em frente e criar um projeto no Skillshare e nos mostrar o que você tem. Brincar com diferentes tipos de propriedades, animá-los, torná-lo interessante, e compartilhá-lo para que possamos falar sobre isso. 4. Protótipo 2: crie uma transição: O que vamos aprender neste exercício é como usar o esboço e importar seus arquivos diretamente para o Framer para tornar seus protótipos muito mais rápidos. Vamos fazer isso com um exemplo do Google Docs que é a experiência de integração ou primeira execução e você pode usar as imagens que quiser para isso, mas entretanto, eu forneci um documento de esboço. Se você ainda não tiver o Sketch, acesse sketchapp.com e obtenha a avaliação gratuita. Se você ainda não o usou, eu recomendo fazer curso de esboço Andrew Markandos no Skillshare, é uma ótima maneira de começar e se você não tem é totalmente bem basta seguir junto. Vamos abrir o arquivo de esboço e você notará que as imagens estão separadas em diferentes quadros de arte. Estas imagens são cada tela deslizável que você terá. Você também notará que há pontos indicadores mostrados na parte inferior. Então, com este arquivo aberto, tudo o que vamos fazer é iniciar um novo documento Framer com comando N e importar o arquivo de esboço. Framer já sabe qual arquivo de esboço está aberto, o que torna isso super rápido e fácil você basta clicar em um botão e seu arquivo já está lá. Você vai notar se você passar o mouse sobre o meio aqui que eu tenho todas as mesmas camadas que eu tinha acesso no esboço diretamente no Framer que é super legal. Está desligado por padrão todas as diferentes placas de arte que não foram as primeiras. Então, Framer apenas assume que você quer trabalhar com o primeiro imediatamente. Então, uma coisa a apontar é que essa estrutura, a hierarquia de camadas, se você quiser, o agrupamento é o mesmo no Sketch como no Framer, o que é super legal. Então, se eu fizer alterações a qualquer momento dizer que eu renomear este indicador pontos ou algo assim, é melhor não usar espaços Eu recomendo apenas mantê-lo simples, vai torná-lo mais fácil para que você não precisa digitar em sublinhados e código e quando você clicar “Salvar”, volte para o Framer e você pode usar o Command Shift I ou simplesmente clicar em “Importar” novamente o que preferir para importar o arquivo novamente e você notará que ele está atualizado. mesmo vale para quaisquer imagens ou coisas que você mudar na imagem em si, ele só vai carregar sem prejudicar o seu código em tudo o que é realmente muito bom. Então, a primeira coisa que vamos fazer é começar a brincar com algumas dessas camadas e código. Temos que prefixar qualquer camada que estamos modificando com o nome deste objeto que carrega todas essas informações e podemos nomeá-lo como quisermos, para que possamos digitar Sketch se for um pouco mais curto. Você vai notar que nós já precederam em autocomplete as camadas que eu poderia querer manipular o que é super agradável e se eu quiser mudar seu valor assim como nós aprendemos no primeiro exercício, eu posso simplesmente fazer isso. Então, eu posso movê-lo para baixo. Então, é assim que vamos modificar cada camada como precisamos. Então, a primeira coisa que queremos fazer é realmente tornar algumas dessas placas de arte visíveis. Realmente todos eles porque queremos que todos eles sejam mostrados como o usuário escaneia de página em página. Então, para fazer isso, defina visível igual a true e você notará que a camada agora é mostrada. Tudo o que precisamos fazer é copiar isso algumas vezes e certificar-se de que todas as camadas são mostradas conforme necessário. Uma coisa que é legal é quando você passa o mouse sobre eles, notar como o código à esquerda realmente realça para a camada que está usando esse código de alguma forma. Isso se torna realmente útil, especialmente para documentos mais longos, para que você possa encontrar onde você é encaminhado para cada coisa. Então, a próxima coisa que queremos fazer é fazer com que esses pontos indicadores apareçam no topo do documento para que nunca os percamos. Agora, eles são apenas mostrados escondidos dentro do quadro de arte A e então se você estivesse passando, você não os veria mais. Então, a maneira de fazer isso é digitar o nome e mudamos sua super camada referindo-se a seu pai do que era placa de arte A para todo o documento Framer. Podemos fazer isso apenas referindo-se à tela do Framer. Agora você vai notar à direita, ele é mostrado na parte superior do documento e eles estão em cima de todas as camadas, o que é realmente ótimo. A próxima coisa que queremos fazer é envolver todas essas diferentes placas de arte no que chamamos de componente de página, pense nisso como se você tivesse um encadernação para um livro e você quer colocar todas as diferentes páginas nessa encadernação para que você tenha Um livro sem costura, é o que estamos fazendo. Queremos ter certeza que o quadro de arte A, B, C, D e E envolva dentro do mesmo livro. Então, a maneira de fazer isso é digitando páginas igual ao componente página. Pages é apenas o nome que acontece de escolher para isso você pode chamá-lo realmente o que você quiser. Componente de página é o nome da referência do Framer para uma exibição de paginação deslizável, e queremos envolver a primeira placa de arte para fazer isso apenas para começar. Agora só há uma página neste livro, certo? Temos este primeiro quadro de arte, queremos realmente adicionar todos os outros a ele e fazemos isso simplesmente digitando pages.addPage e, em seguida, digite as placas de arte um de cada vez. Você notará cada vez que fizermos isso que as páginas são colocadas dentro deste invólucro no quadro de arte A. Você pode até ver se você passa o mouse sobre conteúdo da página que agora estamos configurando lado a lado. Framer faz todo o trabalho duro para você aqui, você não tem que posicionar nada sozinho. Ele só sabe com base na largura de cada imagem que você deseja que eles sejam páginas da mesma largura. Depois de adicionarmos cada página, vá em frente e tente deslizar. Muito legal, em apenas algumas linhas de códigos, temos uma vista de deslizamento, mas ainda não terminamos. Observe como cada vez que eu deslizar se horizontalmente ou verticalmente tudo é deslocado ao redor não seria estranho se isso acontecesse em seu aplicativo. Nós não queremos isso. Então, Framer nos dá apenas uma linha de código para corrigir isso. Tudo o que temos que fazer é digitar em pages.scrollVertical é igual a false e lá você tem, tudo é swipeable. Mas isso não é feito porque esses pontos indicadores na parte inferior estão ficando e queremos que eles se movam dependendo da página em que você está. Então, vamos precisar basicamente mudar algo baseado em um evento que acontece. Então, o evento que queremos ouvir neste caso é quando a página muda. Para fazer isso temos algo que chamamos de mudança página atual que é algo que podemos ouvir que nos deixe saber quando a página é alterada, que algo aconteceu. A maneira como podemos ter certeza de que funcionou é digitando uma configuração de depuração chamada print, você pode digitar o que quiser lá e, à medida que você alterar a página, observe como o Framer aparece essa pequena janela com o texto que você decidiu verifique se o evento foi acionado. Então, toda vez que eu furto, ele diz “YAY! Incrível. Você sempre pode comentar as coisas pressionando barra de comando ou digitando uma hashtag no início, o que significa que ele simplesmente não vai ser lido como código, mas é bom manter por perto como notas para que você possa lembrar o que você fez. Assim como você pode ver no topo, que este comentário nos lembra que estas são todas as camadas do Sketch importadas em uma. Então, agora o que queremos fazer é, à medida que você altera a página, precisamos atualizar esses pontos indicadores. Então, eu vou atualizar para limpar o documento de impressão e agora eu vou mudar este ponto indicador digitando Sketch.IndicatorDots mas realmente o que eu quero é mover apenas o ponto selecionado. Então, realmente vamos chamar selecionados. Tudo o que eu quero fazer é que eu quero mudar sua posição x dependendo da página em que estamos. Então, para fazer isso nós vamos mover sua posição x por agora você pode tentar algo tolo como plus igual, o que significa levá-lo de sua posição atual adicioná-lo a qualquer número que você digita em como 20. Agora, cada vez que eu for, vai se mover um pouco. Mas isso não é realmente o que queremos, certo? Porque quando eu for para a esquerda ele vai continuar indo para a frente porque toda vez que eu mudar a página, nós estamos adicionando 20, e isso realmente não vai ajudar. Então, o que eu quero tentar fazer é configurá-lo tipo de dependente de qual página estamos. Para fazer isso, eu posso basicamente procurar em que página estamos com um método simples chamado índice de página horizontal. Isso significa que, como estamos deslizando horizontalmente, queremos saber em que índice da página estamos atualmente. Mas agora, se formos, por exemplo, imprimir isso para ver o que está fazendo, você notará que nada está acontecendo. Podemos apenas ir em frente e imprimir a mesma linha e você verá que ela está realmente se movendo, mas apenas por um e como você vai para trás e para a frente de acordo, ele imprime a página em que você está. Então, vá em frente e comente isso e agora que sabemos que ele vai retornar o número de cada página, precisamos multiplicar isso basicamente pela largura de qualquer coisa entre os pontos para que ele salte para esse estado. Então, podemos pegar a largura do ponto selecionado digitando no sketch.Selected.Width e multiplicar isso pelo índice. Se você atualizar você deslizar, você vai notar que ele está quase lá, ele está se movendo para frente e para trás conforme necessário, mas não exatamente a distância certa. Isso é porque estamos nos movendo a uma distância de um ponto, mas na verdade eles estão separados por dois pontos. Então, eu tenho que fazer é multiplicar por dois e aí você tem. Então, vamos parar por aí se você quiser aprender coisas mais avançadas aqui, você pode realmente dar uma olhada no exemplo que eu forneci no quadro de discussão, que permitirá que você veja um método mais avançado que anima as coisas à medida que você estão arrastando através, mas por enquanto, isso deve ser bom o suficiente para ir, então por que você não ir em frente e tentar importar seu próprio exemplo de integração e compartilhá-lo como um projeto no curso. 5. Protótipo 3: crie uma ação para um aplicativos de tarefas: Para este último exemplo, vamos aprender como fazer um aplicativo interativo para fazer. Isso envolve pegar o que aprendemos nas duas primeiras lições sobre animação e importação de esboços e adicionar sobre como usar um componente de rolagem para ter uma lista rolável, bem como um componente arrastável que anima conteúdo como este marca de seleção enquanto arrasta. Eu já criei um arquivo de esboço de exemplo chamado feito para que possamos usar para este exercício. Se você gostaria de torná-lo ainda mais interessante, você pode realmente usar seu próprio costume para fazer design de aplicativo se você fez aula de esboço de Andrew no Skillshare. Então, para começar, vamos em frente e abrir o arquivo de exemplo e dar uma olhada em como ele está estruturado. Você notará primeiro que há um grupo chamado “Conteúdo da lista” em que isso se encaixa bem abaixo do cabeçalho na parte superior e abaixo do botão de ação flutuante na parte inferior. Você notará que cada camada é agrupada com um nome muito fácil de ler que podemos então usar para modificá-los quando saltarmos para Framer. Então, é importante manter isso limpo e arrumado. Então, com isso dito, vamos direto para Framer e ver como podemos começar a dar vida a essa coisa. Então, vamos criar um novo documento. Vou importar o arquivo de esboço que temos aberto e vamos renomear este esboço como fizemos no último exemplo, apenas para facilitar a escrita. A primeira coisa que vamos fazer é tornar o conteúdo da lista rolável. Vamos fazer isso criando um novo objeto chamado Scroll e, assim como fizemos com o componente de página no último exercício, vamos torná-lo um componente de rolagem e quebrar a camada de conteúdo da lista. Então, como você vai notar, ele já é rolável, o que é muito legal. Tudo o que tínhamos que fazer era embrulhá-lo usando a camada agrupada correta. Agora, a próxima coisa que queremos fazer é certificar-se que ele não rola horizontalmente como está fazendo agora. Se você se lembrar do último exemplo, é na verdade o mesmo pedaço de código. Então, agora só vai para cima e para baixo. Ótima. A próxima coisa que queremos fazer é animar a primeira tarefa chamada Tarefa uma chamada mãe e permitir que ela seja arrastável. Para fazer isso, nos referimos à camada e digitamos draggable.enabled é true. Você vai notar que funciona. Posso arrastá-lo por aí, mas não é bem a interação que queremos. Está voando para fora da tela, você vai notar que se eu atualizar aqui, eu posso arrastar toda a visão de rolagem e o item ao mesmo tempo, não é muito ideal. Então, há um monte de coisas que vamos querer fazer. A primeira coisa é travar e certificar-se de que você não pode rolar verticalmente porque isso é apenas redundante não funciona muito bem. Então, vamos pegar tudo isso e nos certificar de que definimos vertical como falso. Agora só podemos rolar horizontalmente. Ótima. Uma coisa que você pode notar é neste exemplo e no último, tivemos que digitar ponto de esboço antes acessar qualquer uma das camadas que importamos do Sketch. Ao longo do tempo, isso pode ficar um pouco cansativo e assim Framer realmente lhe dá um pequeno atalho para acelerar as coisas. Tudo o que você precisa fazer é chamar um utilitário chamado camadas globais e digitar o nome do objeto que contém todas as suas camadas de esboço. Agora, nós simplesmente não podemos incluir o prefixo e tudo ainda deve funcionar exatamente como ele fez. Ótimo, isso vai acelerar um pouco as coisas. Em seguida, o que queremos fazer é adicionar algo chamado bloqueio de direção, para que eu não possa arrastar duas coisas ao mesmo tempo quando eu não quero. Por exemplo, se eu estiver apenas tentando arrastar esta primeira tarefa e a lista estiver rolando em mim, isso pode não ser ótimo. Da mesma forma, se eu estou tentando rolar e eu também estou movendo a lista superior que pode se sentir estranho também. Felizmente, Framer torna isso super fácil. Tudo o que eu tenho que fazer é digitar rolagem neste caso porque esse é o componente de rolagem queremos fazer e queremos ter certeza de que quando você está arrastando, que ele está bloqueado e queremos fazer isso tanto para o scroll conteúdo e também queremos fazê-lo para o conteúdo da tarefa. O que significa que enquanto você se move, eu não posso ir de qualquer maneira aqui e como eu rolar isso, eu não posso rolar para cima e para baixo. Maravilhoso. A próxima coisa que queremos fazer é adicionar uma animação para que quando eu arrasto a tarefa, se eu não movê-la para além de um determinado limite, ela simplesmente encaixe de volta ao início. Então, para fazer isso nós vamos precisar basicamente chamar um evento uma vez que eu largue o arrasto porque ele não deve acontecer enquanto eu estou me movendo ou quando eu começar, deve acontecer quando eu liberar. Então, para fazer isso, tudo o que eu quero fazer é ouvir quando eu mudar esta tarefa. Então task1.on Eventos e novamente quando eu terminei, eu quero chamar alguma animação aqui. Então, tudo o que fazemos é animar a tarefa. Basicamente queremos que seu x seja redefinido para zero. Talvez queiramos adicionar uma pequena mola a isso para que se sinta bem. Neste caso, você pode ver que ele salta ligeiramente de volta ao lugar, o que é um bom lembrete de que esta coisa é física de alguma forma, que é algo que pode se mover. Mas não queremos que ele volte ao lugar toda vez, certo? Se você ultrapassar um certo ponto, queremos que ele anime um caminho. Então, para fazer isso, o que queremos fazer é verificar onde esta posição está enquanto você a arrasta. Para que saibamos em que ponto devemos acionar uma bandeira e dizer hey, eu estou exatamente onde eu preciso estar para fazer a transição fora e então o que podemos fazer para tornar isso mais fácil é que podemos procurar outro evento chamado drag move e este é chamado toda vez que você move um item pela tela. Então, neste caso, queremos basicamente olhar para imprimi-lo onde é a posição x desta tarefa. Você notará na parte inferior que ele está imprimindo cada valor x enquanto eu o movo pela tela. Então, você pode dizer que se é realmente longe para a esquerda, está nos negativos porque está atrás de zero. Se você movê-lo muito longe para a direita, ele vai para cima para os anos 200 e mais longe. Nós realmente queremos comercializar como completo o que você quiser e uma das coisas bonitas sobre proto-tipagem é aqui que você pode tomar essa decisão em vez de deixar isso para seus engenheiros. Você, como designer, pode ter algum impacto na maneira exata que algo realmente se sente. Então, neste caso, eu acho que algo em torno de 250 deve ser muito bom. Então, nós realmente não precisamos mais disso Eu só vou chegar a isso por agora e em vez disso, nós queremos escrever algo chamado uma declaração se. Para ver se a tarefa moveu uma certa quantidade na tela, faça algo se não for fazer outra coisa. Então, neste caso, queremos ver se ele passou de 250 pixels. Então, se for menos de 250, vamos encaixá-lo de volta e se não for assim, então vamos por agora apenas imprimir algo para que possamos ter certeza de que está funcionando. Novamente, porque o script de café usa recuo tudo o que é recuado depois disso se declaração se refere a algo que deve acontecer aqui tudo recuado depois que o outro acontece depois. Então, aqui você pode verificar se eu movê-lo muito longe através da tela, ele diz “Olá” e se eu movê-lo apenas um pouco, ele vai encaixar de volta ou mesmo se eu entrar nos negativos porque isso ainda é menos de 250. Então, ele está funcionando muito bem, mas em vez de imprimir “Olá” o que realmente queríamos fazer era deslizar para fora da tela. Então, você pode se sentir livre para copiar e colar a animação existente, mas em vez de o x ser zero, queremos que ele vá muito longe da tela. Então, eu vou escrever 750 que é a largura da tela para que, pelo menos, apaga. Vamos ver se funcionou. Então, se eu arrastar um pouco menos de 250, ele se encaixa de volta se eu for mais de 250, ele desliza para fora. Incrível, é um bom começo. Ainda há muito a fazer, certo? Queremos animar essa marca de seleção para que ela apareça enquanto você arrasta e também queremos ter certeza de que deslizamos para fora do resto dos itens. Nós queremos deslizá-los um pouco para que eles substituam o que você tinha acabado de arrastar. Vamos fazer isso primeiro. Então, o que estamos dizendo é que se ele arrastar para fora da tela, vamos adicionar um comentário para tornar isso mais claro. Então, tudo de novo que acontece neste recuo acontece depois que esta declaração else-é chamado. Então, o que queremos fazer é basicamente mover para cima todos esses objetos diferentes, tarefa dois, tarefa três, e tudo pronto e apenas movê-lo para cima. Então, para fazer isso, vamos em frente e começar com o feito primeiro. Vamos pegar feito e animá-lo. Queremos trazê-lo para cima no valor Y e queremos trazê-lo até, por enquanto, digamos sobre onde a tarefa três foi iniciada. Então, para fazer isso, nós só queremos trazer seu valor Y até onde a tarefa três está posicionada atualmente, que parece ser cerca de 380 pixels se você olhar para isso. Podemos dar-lhe uma curva se quisermos ou podemos simplesmente simplificá-la e mantê-la como uma função de tempo. Você pode até mesmo usar, se você já usou CSS antes, você provavelmente já ouviu falar de beziers cúbicos, e você pode usar qualquer um desses ou você pode até mesmo usar facilidade dentro ou fora algo assim. Neste caso, podemos apenas usar facilidade para fora, que em vez de uma mola é apenas uma função de flexibilização, para que possamos ver o que parece aqui. Então, parece que à medida que eu deslizava, esses itens se moveram para cima como eu esperava. Foi um pouco rápido demais. Então, vamos ver se eu abrandar. Melhorando, mas ainda precisamos mover as tarefas um, as tarefas dois e três. Então, vamos fazer isso. Tarefa dois, vamos animá-la. Vamos dar-lhe mais espaço aqui para que você possa ler um pouco melhor. Vamos definir seu valor Y para onde a tarefa um estava. Podemos definir o mesmo horário e vamos fazer o mesmo para a tarefa três. Queremos definir onde estava a tarefa dois. Então, enquanto eu atravesso, tudo desliza para cima. Agora, se você notar com cuidado, o espaçamento entre feito na parte inferior deste grupo não está se movendo exatamente na mesma velocidade. Parece quase que está paralaxado um pouco, que é um efeito puro, mas talvez não o que queremos. Então, eu só quero ajustar o posicionamento Y feito apenas um pouco mais para baixo e eu posso apenas usar matemática e eu posso apenas adicionar, vamos colocá-lo 20 pixels mais para baixo. Isso parece um pouco melhor, talvez até um pouco mais. Isso foi demais. Talvez, 20 estava bem. Sim, parece muito bom. Então, agora, podemos deslizar algo para fora e animar o conteúdo na tela. Mas o que queremos fazer a seguir é, enquanto você estiver arrastando o item, permitir que a marca de seleção se mova. Então, se olharmos para trás onde estávamos verificando o posicionamento X deste item chamado tarefa um, podemos descomentar isso agora e reutilizá-lo um pouco ou se você acabou de excluí-lo, tudo bem, basta digitá-lo novamente. O que queremos fazer é que queremos mudar algo sobre essa marca de seleção que é chamado de verificação concluída. Por enquanto, vamos mexer com sua opacidade. Então, por padrão, sua opacidade foi definida como um. Então, se deixarmos assim, nada mudará. Ficou em um o tempo todo. Se definirmos para zero, você percebe que sumiu. Mas o que realmente queremos é que ele se anime enquanto você está arrastando, não para fazer um ou outro. Então, para fazer isso, o que podemos realmente fazer é usar um método chamado modulate, que soa louco, mas na verdade é bem simples. Então, para saber mais sobre como ele funciona, podemos ir direto para os documentos e dar uma olhada nele. Então, parece que leva em um valor, que é a entrada do modulado, significando, o que estou alimentando isso que deve mudar ao longo do tempo. Então, você pode pensar nisso como talvez você esteja convertendo Celsius para Fahrenheit e, nesse caso, como ele se move entre zero e 100, você gostaria que Fahrenheit leia em algum lugar entre 32 e 212, então, que eles mapearam uns aos outros apropriadamente. Então, neste caso, o que queremos fazer é mapear a posição X da tarefa para um valor de opacidade entre zero e um da marca de seleção. Então, vamos experimentá-lo. Se eu tomar o valor X da tarefa um como a entrada, então se você se lembrar dos documentos, e você pode sempre olhar novamente se você quiser referi-los, nós temos dois intervalos para colocar dentro. O primeiro intervalo deve ser quando basicamente queremos começar esta animação, que deve ser, eu não sei, em algum lugar em torno de 100 a 250. Certo? Isso está se referindo à posição X da tarefa. Então queremos fazer a opacidade ir de zero para um durante esse intervalo. Então, vamos tentar. Bastante bom. Então, agora temos a marca de seleção animando com sua opacidade com sua posição de arrastar. Agora, para um último detalhe, vamos fazer a mesma coisa, mas vamos fazê-lo com o valor de escala da marca de seleção. Então, podemos copiá-lo e colá-lo, alterá-lo para dimensionar e ver o que acontece. Agora, você vai notar, ele vai muito longe enquanto eu sair e se olharmos para a documentação novamente para modular, você vai notar que há algo chamado limite. É definido como false por padrão, o que significa que realmente não há limite. Então, se você passar por este ponto, por exemplo, nessa conversão, ele ainda seria capaz de fazê-lo. Mas nós realmente não queremos isso porque nós não queremos que ele vá além da posição de você arrastando. Então, o que queremos fazer aqui é dizer, “Ei, nós realmente queremos que o limite seja real.” Então, como você percebe, ele permanece no lugar como você quer. Bastante bom. Então, isso cobre um bom pedaço de muitas dicas e truques que você pode usar para criar protótipos animados no Framer. Um outro atalho que é interessante é, você pode realmente especificar em vez de digitar todas essas curvas uma e outra vez. Você pode realmente digitar uma animação padrão, que é algo que você pode querer fazer. A maneira como você faz isso é definir padrões para sua animação, e queremos definir basicamente uma curva padrão e, neste caso, uma mola. Basta escolher um e agora você pode realmente se livrar de coisas que você especificou um por um. Observe que ele ainda é salta um pouco e se eu tirar estes também, tudo ainda anima. Vá em frente e dê uma chance. Eu adoraria ver você carregar um arquivo de projeto compartilhando-o e dessa forma, podemos dar uma olhada nele e adicioná-lo ao seu projeto. Se você quisesse enlouquecer para usar seu próprio design personalizado para o arquivo de esboço, isso seria ótimo também. Uma coisa a notar para isso é que o arquivo de esboço aqui, você vai notar se você clicar no aeroporto tem 750 pixels de largura. Se você fizer a aula de esboço, você provavelmente estará fazendo as coisas em um x então, neste caso, 375 largura. Mas o framer realmente precisa que você use a resolução exata do que você está adicionando em seu protótipo. Então, você vai querer dobrar tudo se você estiver usando essa classe mas para este caso o exemplo que eu forneci deve ser suficiente e você pode até apenas personalizar o estilo dela você mesmo e ir em frente e carregar qualquer mudança que você pode Pense, talvez você possa mudar o fundo do ... Se eu mover isso através você tem esta cor verde aqui, você poderia entrar e talvez mudar isso um pouco se você quisesse fazer algo diferente. Seja criativo e eu adoraria ver o que você tem. Sinta-se livre para postar perguntas para o grupo de discussão ou se você estiver procurando por um tempo de resposta mais rápido, eu faria facebook.com/groups/framerJS que tem uma comunidade realmente ativa onde as pessoas respondem perguntas o tempo todo muito rápido, em vez de ser apenas eu. 6. Seus protótipos finais: Então, neste ponto, espero que você tenha criado esses três exercícios que realmente ensinaram o básico de como criar um protótipo móvel de alta fidelidade diretamente no seu telefone. Com isso, você aprendeu a animar as coisas e pensar um pouco mais sobre a física da primavera, aprendeu a unir um monte de telas usando esboços e importá-las diretamente para o seu protótipo, e você aprendeu a pegar todos os tipos de entrada do usuário, de arrastar para deslizar, para paginação, e realmente incorporou isso para construir esses protótipos complexos sempre que você precisar. Então, novamente, vá em frente e carregue os projetos que você fez para que possamos falar mais sobre eles, e espero que tenha gostado da aula. 7. Explore o design na Skillshare: maneira.