Figma: técnicas de prototipagem e animação para UX/UI

1. Introdução: Bem-vindos às pontuações e estas escute rápido. Nós vamos aprender como melhorar sua prototipagem em habilidades de animação na FEMA. Meu nome é Bruno nos o signatário fora que designer de feijão aprox para lá nos últimos 20 anos. E eu acredito e aprendendo fazendo isso no curso Destruidor é como você vai ser que você está indo para o pé. Vamos ver, tipo, tipo, algumas aulas teóricas e então movemos a marca do dedo do pé, como cinco amostras ou interações diferentes. - Quantos? Alguns sensíveis. Então, se você realmente sabe algo sobre prototipagem e animações, ele escolheu o meu lado. Os sqs manter os dois primeiros vídeos e, em seguida, ir diretamente para os exemplos. Então talvez você aprenda isso um pouco mais. Algo mais Foco para si mesmo se você está comprando, você não sabe como usar Pick. MMA é perfeito. Perfeitamente bem. Você pode simplesmente ir em frente e aprender um pouco sobre o lado enquanto você pousa a base fora protótipo em uma animação. Então, isto é para todos, é para as tuas vies. Para as pessoas que são essas? Não, alguma coisa. Então vamos em frente e começar para o tipo e animá-lo. Fichman. Então você é eu para o discurso. Você 2. prototyping básica: Ei, obrigado por participar deste curso, e nós vamos seguir em frente para ver um, como a guerra com integrações básicas no esfregão fictício. Ah, estigma é muito direto para, como você deve saber, ferramenta de prototipagem de design. Então vamos ver o básico sobre a prototipagem. Então, quando você clica aqui em, um, em um quadro ou em um mandril, se você vem de um esboço ou adobe 60 que você vê aqui por padrão, você teria, como, conhecido em alguma parada acontecendo aqui como interação, comportamento conhecido de transbordamento. E esta parte com este tipo de importante, eles mostram configurações de protótipo de protótipo. Tudo bem, então nós podemos ir aqui e definir qual tipo de dispositivo estamos usando se você quiser que ele seja importado mais ou paisagem mais o celular. Neste caso, vamos usar Silber, e você pode ajustar o fundo dele. Como você pode ver aqui, realmente vida, podemos ajustar o fundo, o protótipo e o quadro inicial. Como você pode ver aqui nós temos, como eu para oito mais um, e esta é a mesma obra de arte, ok, a mesma moldura. Então isso é algo que você precisa configurar na primeira vez. E uma vez que você não está, você não tem que voltar novamente. Quase nunca. , talvez, Dependendo, talvez,se você tiver protótipos diferentes no mesmo documento, você terá que vir aqui e ver se precisa mudar. no mesmo documento, Isto, por exemplo, é ter vindo aqui para outro. Então você pode ver os quadros que você tem aqui. Então é uma boa prática não ter protótipos diferentes na mesma página. Você pode ter, tipo, várias páginas, e é pago. Você pode ter. Como você pode ver, esse é o ponto de partida. Este tipo de jogo indicador azul e também se viermos aqui para este outro protótipo que você pode ver aqui é o quadro inicial. A mesma coisa aqui, e neste caso, não a tenho. Configure isso porque eu não tenho nenhuma interação aqui, ok, mas então é uma boa prática. Eu digo não colocar protótipos diferentes porque se eu duplicar estes e eu tiver este protótipo aqui em outro protótipo aqui imaginando que queremos fazer, tipo, dois protótipos na mesma página, você vai ser, , Sweeting, ouvir o protótipo do protótipo ao definir o pé-do-pé fedorento do “I blues “três. Então começa aqui, então é uma boa prática mantê-lo em páginas separadas. Tudo bem, então nós vamos fazer isso, e nós vamos começar a trabalhar com esses, uh, vamos ver o que temos aqui. Ah, estamos aqui no primeiro quadro, e eu me inscrevi como estamos aqui no primeiro quadro, e eu me inscrevi comouma interação e c aqui. E vamos ver o que acontece se eu pudesse ouvir esse tipo de empurrão, Ah, animação. E então se eu pudesse ouvir que há como uma morfina entre o nosso primeiro cofre na segunda fuga. Ok, então vamos quebrar o que está acontecendo aqui? Então, para o significado do protótipo, Fichman , o que você faz, é Você pode vender o ARB ou se você quiser, oh, todo o aeroporto para interagir. Ou você pode pressionar diferentes elementos da página que têm essas interações nesses caras . Vamos escolher isto com a selva, e como podem ver aqui, eu tenho, tipo, por cima. Então, quando você clica ou você superior você navega iPhone oito mais dois. Neste caso, você pode ver que o nome fora do mandril aqui, direita e ouvir animação como você pode ver há muito fora instituto opção. Vamos vê-los a todos. Então não se preocupe com isso. E então você pode mudar o tipo de animação que você pode ver aqui em baixo. O que está acontecendo? Você pode alterar o tipo fora do trabalhador básico de animação que ele está acontecendo. Vamos ver as diferenças entre isso. Vamos colocar como um segundo com ele, como 1000 milissegundos. Tudo bem, então vai ser um pouco mais lento agora. Então, se eu chegar rapidamente, como você pode ver, leva um segundo. Ah, aqui. Talvez seja Nós não podemos apreciar tanto o fácil de entrar e sair, hum, hum, Animation Type Corp, mas eu costumo me ver usando isso. A maior parte do tempo. Ele parecia fora. Hum, eu sugiro, nunca usado linear porque linear é tipo de dedo reto então, mas vamos ver isso em detalhes. Então vamos ver o diferencial dos russos que temos aqui. Ok, então nós temos telefone top, nós podemos ver aqui, nós chutamos e está acontecendo. Da mesma forma que podemos selecionar novamente aqui sobre drogas. Então, quando eu começar a arrastar essa coisa, a animação vai funcionar. Vamos ver se trouxe isto. O que está acontecendo? Por que não? Por que está trabalhando tão bem? Arraste-o. É para quando? Quando eu escolher thes e eu quero arrastar e eu arrastar, ele deve funcionar como você pode ver para que repetir a animação. Então, se eu pegar estes e arrastar, você pode ver que estes começam a vir. Por que abrigar? É pré acabou. Aqui está o que ele faz. Vamos ao início. Então, quando eu Khobar aqui, a animação, começa quando eu apenas sair de lá parte do Sape Obter estes anos felizes. Certo, vamos com o próximo com isso enquanto pressiona. Então, se eu pressionar isso, funciona. Quando eu soltar meu traseiro, ele volta. Então isso é bom para algumas animações. Talvez este não seja o melhor exemplo de animação para isso, Mas você pode ver direito. Hum o quê? O que? Ele faz as partes chave do jogo, ou você apenas seleciona a chave? Digamos que T, por exemplo. E quando eu pressionei ele aqui funciona, como você pode ver, ok, e meu centro, Prio Pius. Então, quando o mouse entra aqui. Então está sempre entrando porque eu tenho que clicar aqui, então, mas você tem área. Certo? Então isto é para os meus centros. A mesma coisa quando Miles vivem. Então, quando eu sair desse retângulo vai trabalhar a animação, hum, hum, isso é para baixo. Como você pode imaginar. Sim, eu pressiono apenas no som superior. Ele faz a animação e aquela loja. Mesma coisa. É quando eu libero o toque. Então a animação começa. Ok, então nós temos estes pré-jogo Kober. Vemos tudo. Todas as interações que temos uso há apenas um que aqui é desativado, como você pode ver é este é um atraso após. Vamos usá-lo agora. Então, o que faz depois de Delay não pode ser aplicado ao elemento tipo de, hum, é aplicado apenas dedo do pé, hum, dois quadros. E o que é isso? Vamos ele olhando. Queremos depois de um segundo você aqui embaixo. Vamos imaginar que temos, um , vamos colocar isso aqui. Vamos duplicar isso. E então digamos que temos, como em sua isca mais. Certo, então vamos colocar aqui como um respingo. Eu, parece ser um molde assinado. Ele disparou. Estamos a suspirar com Então imagine que temos como a nossa faísca Este plus página super fantasia, alguns que são animações de tomate. Digamos que comecemos aqui agora e temos a isca X mais, certo? E o que queremos que o usuário entra por esta página e depois de um segundo sem qualquer indireção, então passa para o próximo, hum, para o próximo quadro. Ok, então é isso que vamos fazer é ir para o protótipo depois do revezamento? Então vamos colocar esses 800 milhões de milissegundos. Está tudo bem. Então vamos dizer que navegar através do qual significa ir para o quadro superior. O que você escolher aqui, e nós vamos escolher o quadro livre, que é este. E sim, somos muito bons de olhar. Então, se viermos aqui então precisamos reiniciar o e podemos ver agora que depois de um tempo ele permanece , e então ele se anima. Ok, então você pode usar estes dedos podem arrefecer animações como se eu fosse fazer algo rápido em drash. Então o que você pode fazer aqui, isso é legal. Se você quiser simular, digamos, tipo, tipo, carregar barra alguma coisa. Então isso é Ah, sim, isso não é deletar. Um pouco para vermos o que está acontecendo aqui. O que podemos fazer aqui, é é criar um círculo. Ok, e então vamos para o letreiro de novo. E vamos colocar um derrame como eles precisam sentir. Digamos que não vamos gostar de 10. Sinto-me assim. E então uh huh vamos dizer que vamos fazer é assim, OK, OK, e descansar pré bizarro, não chique em tudo. Realmente não importa muito apenas para propósitos projetados. Tudo bem, então nós vamos duplicar esses dois elementos, então eles são nomeados o mesmo porque nós vamos ver um tipo de animação mutilar. Há aqui também . Temos Nós vamos combinar o após DelaLay depois de um segundo fora entrar nesta página. Vamos colocar um pouco mais de tempo. Digamos que, sim, é bom e isso vai ser a explosão do iPhone para ok. E o que vamos fazer aqui, é girar este elemento. O sinal de novo. Vamos girá-lo como 90 graus. Talvez não possamos apreciá-lo porque as flechas, você sabe, não as flechas. As linhas estão no mesmo caminho. Mas rodamos 90 graus, certo? Então, o que vamos fazer? Foi novamente para o protótipo. Então, já configuramos o nosso após DelaLay um que estava em 500 navigato Thesis Screen Plus Four. E nós vamos dizer nesta parte de animação, vamos colocar uma animação inteligente e este é um ajuste mais legal para a animação. Essa figura fornece. Ok, então vamos ver o que aconteceu. Vamos ser o tipo Star Brother aqui e depois de um. Você já viu depois de um segundo em começa e vê que temos aqui outro após atraso que vai para a próxima tela que já configuramos anteriormente? Podemos ver o que está acontecendo aqui. Então não vamos tocar em nada. A tela após o tempo , está girando. E então a animação está chegando. Então, essa empregada de mel inteligente, é um pé super legal. Er, você está vendo realmente aqui que quando eu pressionar aqui neste tipo de círculo eram círculo Bem, não, eu tenho que configurar isso de novo para a tela. Então, quando eu pressionar aqui e eu pressionar novamente aqui, o círculo, como você pode ver, tem outro é animado inteligente. O que ele faz são suas mudanças. Seu macaco como dedo super organicamente tornar-se esta forma. Assim como Martin emite, o que ele faz é escolher dois elementos que são nomeados o mesmo. E o que ele faz é fazer uma transição entre, ah, estas formas para esta outra forma. Vamos fazer a mesma coisa. Desde que nós já metade como aqui thes, inteligente , animado , ativado, vamos fazer este teste maior e assim podemos ver aqui como se fôssemos fazer isso e vamos colocá-lo aqui. E nós estamos indo para outra coisa, que é que ele vai girar e vai ser maior. E vai ser essa coisa enorme aqui para que possamos ver o que, um, esse tipo de animação, esse tipo de animação, essa morte inteligente de donzela de mel. Tudo bem, podemos ver que tudo fica maior, e então a outra animação começa, e então eu clico faz como uma transição, e então eu cliquei. E, em seguida, um inteligente animar estrelas novamente para que você possa obter inteligente, animar qualquer coisa que você quiser. E esta é a gravata de animação mais importante para mim E em figo, MMA ou certo? Então isso é mais ou menos do que base fora do básico fora dele. Vamos ver outro tipo de transição. Vamos ver que se mudarmos essas animação em vez fora inteligente, animar, nós tendemos toe Instant três animação está vindo a ser meio fora rápido. Então é sim, ele pop. E então ele vem aqui porque nós anteriormente temos o filme em animação. O que? Ele faz isso fora. Você pode imaginar que combina 11 estão fora, um quadro com o outro. Tudo bem, então vamos ver o que ele faz. Esperamos um pouco, e então fez, tipo, o tipo de fé de uma tela para outra. Ok, vamos ver o que está marcado nos olhos do Centro-Oeste. O Martin. Querida, já sabemos o que faz. Movendo-se como você pode ver. Ah, aqui. Você pode mudar. E você pode ver o tipo de animações que temos feijão vendo aqui. A mudança já é incrível. Certo, mas vamos ver como funciona aqui. Então, depois de um segundo, Theis plus page entra à esquerda. Ok? E este, ele está entrando de lá de baixo. Então você contém aqui. Do tipo que entra. Isso é legal quando você quer o dedo do pé. Talvez trazer um menu ou algo para a página. Ok. E há outra coisa aqui, esse comportamento de estouro. Vamos vê-lo, mas temos alguns exemplos mais tarde. Então, estes são os pré-assados é para qualquer feito que você pode em algo importante. Importante. Estou esquecendo quando você seleciona no item neste protótipo superior selecionado. Você vê que esse tipo decaixa delimitadora com este círculo aqui aparece para que você possa vir aqui e então conectado a qualquer nosso corpo. caixa delimitadora com este círculo aqui aparece para que você possa vir aqui e então conectado a qualquer Um. Tudo bem. Então, como você pode ver e quando você tê-lo conectado, você pode pressionar e selecionar o tipo de interação que você quer no topo do Dr qualquer coisa. Em seguida, selecione a animação. Na maioria das vezes, você vai se ver usando uma animação inteligente, alguns outros que você só quer, como uma animação oriental, alguns fora do exterior. Na maioria das vezes, você vai se ver usando uma animação inteligente, alguns outros que você só quer, como uma animação oriental, Eu me vejo usando o dinheiro inteligente feito para quase tudo. Mas depende do aplicativo que você está tentando fazer. Ok, então vamos para o próximo capítulo. Te vejo mais tarde. 3. Tipos de animação: Ei, então aqui é como se lembrássemos como temos protótipos dentro de Fatemeh. Eu tenho aqui uma moldura em branco de sutiã, e é uma boa prática começar o dedo do pé. Coloque suas configurações suas configurações de protótipo, então nós estamos indo apenas para ir para as configurações de protótipo. E aqui você pode ver que você tem vários dispositivos para escolher. Parece que tenho isso na mesma parte. Você pode ver a largura e a altura do nosso quadro ou quadro em configurações de protótipo. Eu sei que é um iPhone 8 mais, então eu tenho que usá-lo, e então você pode para outro. Então você pode mudar tudo isso. Você pode simplesmente colocá-lo em preto que você vai desejar. Então, para o segundo, apenas ir para um com um super que você começa fica o fundo com o seu protótipo. Se você fizer quatro apresentações ou gravar alguns vídeos, e isso é o importante é um quadro inicial. Poderíamos enviar outros quadros para lá, mas para este caso em particular, queremos animação e amostras. Ok, então isso é bom. Vamos voltar ao sinal e está tudo bem. Então eu estou indo dedo do pé, criar um retângulo, sim, para ver tipos básicos fora da animação, e eu vou duplicar este amigo para isso. Você só sabe, basta selecionar a moldura deles. E então com a tecla de desligamento, você apenas movê-lo em frente. Nós estamos indo para o pé. Eu faço isso porque para ver Tom, algumas animações em particular, elas são inteligentes, animadas. O que precisamos é ter os mesmos elementos nos quadros da tigela. Então este é o quadro inicial, e nós temos essa retórica também. E aqui no quadro, renomeando para amostras de animação. Aqueles dois Desculpe, Desculpe, temos o mesmo ângulo de respiração, então é uma boa prática ter os mesmos elementos. Então nós estamos entrando aqui em interação e o que queremos. Está em cima. Quando clicamos no que queremos, é navegar no dedo do pé. Então vamos para esta tela. Neste caso, é animação animada em amostras para, e se nós e o que queremos quando chutar aqui, ele está voltando aqui. Você pode simplesmente pressionar o círculo à esquerda e criar outra animação. Ok, então neste caso em particular, como você pode ver como Martin detento foi ativado por padrão, às vezes ele coloca instantâneo ou dissolvido. Mas nós vamos vê-los. Tudo bem. Então, para esta animação em particular para ver as transições entre um uma tela no outro, Eu só vou desde que as cores sim, selecionar sua cor não tão pesada aqui. E vamos mudar os rádios fronteiriços aqui para podermos ver a transição entre ambos . Então, agora, se eu puder ouvir e pressionar, como você pode ver, está fazendo uma transição, e é marcado animação entre o cofre na cor do cofre. Podemos fazer o mesmo com o que ela disse na tela. Então, se clicarmos aqui como você pode ver, ele se move. OK, então isso é bem simples. Isto é o que ele faz. É inteligente, animada? Então, vamos voltar aqui. Podemos aumentar o tempo. Vamos colocar como um segundo. Pode ser como 1000 milissegundos. Então, como você pode ver agora, a transição quando nós cuidamos aqui é muito. Isto é mais baixo e isto é bom. Ok, A Então podemos ver que temos aqui. A cena está fora está dentro e fora e linear isto são Vamos ver o que ele faz como você pode ver aqui. Não sabemos, está dentro. A animação não é orgânica é apenas como então nome dizer linear. Hum, bem, está em “Não desculpe”. Então vamos ver o que está nos EUA Então ele estrelar um lentamente e, em seguida, ele tipo fora obter muito mais rápido Movimento do fim, embora o oposto seria é fora para que ele vai começar. Começará como primeiro, e depois desacelera. Como podemos ver, ele começa primeiro e depois diminui no que eu costumo usar é fácil de entrar e sair, que significa estrela mais rápido do que diminui, então vai mais rápido novamente. Para mim é mais, Ah, animação orgânica e, em seguida, eles mais chato fora todos eles é linear com É só, Eu continua. Movimento não é aceleração, nenhuma aceleração é apenas isso. OK, então estes são os tipos básicos então estes são os tipos básicosfora do curso de animação. E então temos Vamos tentar outros tipos de animação para, por exemplo, o instante que ele faz é sim, você sabe, vai de um lugar para outro. Nenhuma noção transitória de fronteiras acorda qualquer coisa assim. É só fé entre esta tela do outro, então não temos nenhuma animação entre os dois se formos nos mover, , vamos ver o que ele faz. O que ele faz é que a tela entra pela esquerda. Podemos alterá-lo em fazê-lo para entrar da maneira que ele estava entrando pela direita, e então ele está entrando pela esquerda para que possamos vê-lo agora. Está vindo da esquerda e você pode imaginar o quê? O que? Isto. É assim que vem do topo e depois da fronteira. Tudo bem, então e isso é algo interessante que você pode inteligente, animar muito em camadas e também você pode verificar diferentes tipos. Claro que sim. Neste caso, eu vou usar você visto fora. Então vamos ver o que ele faz. Por isso, está a fazer isto da mesma forma. Uma coisa inteligente e animada que temos antes. Ok, então para essa animação em particular, eu poderia apenas ir com uma animação inteligente Ok, depois que nós temos que mudar isso, deixe-me apenas ir com e remover isso para que possamos ver o que ele faz. Então, como você pode ver esse tipo de transição, isso é bom. Se você quiser simular algum tipo de efeito de paralaxe, estes se movem e se movem com o trabalho. Temos o Bush. O que ele faz. É tipo fora do quadro Este vai para cima e este quadro vai para cima, então é uma espécie de carrossel em vez de fora de um quadro, hum, indo na frente, fora do outro. Então foi isso que empurrou isso e é forro. É um efeito semelhante. Mais sutil. Digamos que sim. Como você pode ver há pode tipo fora um grande Bagram quando fazemos a animação aqui. Sim, então é meio que empurrar o outro quadro, o primeiro quadro e, em seguida, estão sendo algum tipo de fundo. Então isso pode ser uma ligeira entrada e deslizar para fora. É meio que a mesma coisa. OK, então você pode ver que vem de baixo, mas engajado e obter esses fundo cinza. Então isso é trazido muito dele, e vamos ver finalmente, exemplos de Theo. Ok, todos esses tipos fora. Muito assim aplicar a alguns exemplos legais que você pode replicar para o seu portfólio e toe master Estas animações e recursos de prototipagem em Fichman. Ok, então vejo você no primeiro exemplo 4. Toggle - animação inteligente: Então vamos começar a replicar o nosso para a luz aqui. Ok? Então, para isso, eu só vou criar ah ah, frame. Vamos para o fosso de placas. E é para o iPhone 8 mais. Ok, então deixe-me perguntar para fechar esta parte e então nós vamos criar como, tango. E nós vamos apenas colocar, como um Grady dentro, como com ele lá. OK, então para algo em torno disso em vez de desculpe, digamos linear em seu caso, ele vai ser 100 e então nós vamos colocar como, eu vou mudar essas cores e então nós vamos colocar como uma laranja que ele está bem. Isto é fixe. Então eu vou apenas copiar este texto para que eu não tenha que criá-lo novamente. Apenas texto. E então eu vou criar uma palestra sobre junto, o que é uma coisa bem simples para seguir. Sim, criar algo que é. Nós colocamos um livro para os rádios como 100, mas esse Dwight, eu já criei alguns chamadores, e então vamos colocar como um círculo aqui e vamos dizer que sim, isso é legal. E a sensação do círculo vai ser o nosso principal médico, ou isso é bom. Ok, vamos fazer um pouco maior. Então temos, tipo, tipo, dentro e fora a seguir. Aqui. Ok. E eu vou replicar este texto e colocar como em, e é colocá-lo com nossa cor primária aqui, também. Ok, isso é bom. Temos Ah, vamos ver se há lugar fora disso. E nós estávamos dizendo antes que nós precisamos ter, a fim de um trabalho inteligente, animado dedo do pé. Precisamos dos mesmos elementos e vamos fazer isso um pouco mais pequeno, algo ao redor. E precisamos dos mesmos elementos à esquerda do que à direita. Certo. Então nós precisamos do texto de boa noite aqui, então eu vou lidar com isso, e eu vou colocá-lo assim e tudo bem, é bom. E precisamos aqui como um texto desligado também. Porque, como vimos aqui, temos texto suficiente que se move da esquerda para a direita. Você pode ver que eles estão chegando dois. Então vamos colocar aqui como fora. E como podemos ver, a cor é algo em torno desse pouco mais escuro. Certo, então vamos fazer isso. Tudo bem. Então, para esta tela, o que precisamos é de boa noite e fora para ser apenas nós rasgamos, ok? Precisamos comer. Não, não presente. Tipo, está lá, mas não está lá. Certo, então vamos duplicar esta tela. Temos todos os elementos. Nós caminho. Precisamos de dois para fazer esta animação. Digamos que é o filtro menial. Neste caso, vamos para o azul, digamos azul escuro e este amarelo, digamos outro azul aqui e para este do médico. Bem, este não é o mesmo pote tutorial de qualquer maneira. Então o que precisamos aqui, é ah, são mensagens de bom dia vindo para baixo e obter o dedo zero. Ok, então como você pode ver, eu tenho o meu tex anterior aqui, ali. Ah, teste de boa noite. Eu só vou selecioná-lo. E o que queremos desta mesa é vir aqui para 100 e então eu vou apenas, uh, aliá-los ao topo do ano na mesma página e o mesmo aqui. Vou alinhar isto ao fundo. Então, ambos testam-nos a nossa linha e o bom dia vai desaparecer. Ok, o texto que queremos desaparecer e ir para a direita. Eu selecionei o texto desligado, então eu vou apenas trazê-lo para cima. Ok, então eu vou apenas movê-lo como 30 pixels, algumas imagens lá e o que nós vamos fazer é mover a própria garrafa aqui, o próprio texto porque nós queremos maio para fazer a animação que vai para o outro lado, e esse é o nosso círculo vai vir aqui e vai ser doces fora. Então nós mudamos como a cor é bastante simples. E então nós estamos vindo aqui e este próximo nós vamos colocá-lo aqui e o botão ligado, digamos lá e é apenas, mas a capacidade é 20 Ok, então nós temos o nosso quadro inicial e queremos que tudo dedo do pé se mova e se transforme em estes, fazendo algumas animações. Ok, então nós temos nossos cenários de turnê ou um ponto de partida, nosso ponto final, e vamos ver como isso funciona. Então nós vamos selecionar usando nós vamos protótipo, e neste caso, vamos selecionar o iPhone um plews um Então é o nosso assento caminho quadro inicial aqui. Eleição. Mas clicamos e qualquer coisa está se movendo. Então o que queremos é quando clicarmos neste círculo, vamos fazer como aqui. Está em cima. Queremos navegar no iPhone, mais dois com a escola dele. A animação que colocamos uma animação inteligente em ordem, tudo para se mover. Vamos começar com isto. Vamos ver o que ele faz. Ok? E vamos aplicar aqui quando clicarmos no botão aqui, outra transição dissolver. Ok, em vez disso fora. Então vamos ver como isso parece. Como você pode ver, está fazendo como um desvanecimento super longo. Vai levar uma eternidade isso. O que está acontecendo? Oh , são dois segundos, digamos, uh para 200 500. E este mais 500. Vamos ver o que está acontecendo aqui. Está fazendo uma transição, mas como pode ver, a batalha não está se movendo. O fundo total. Não há barras de ouro. Tudo está meio fora. Não é ruim, mas não parece natural, certo? Então aqui vem um dinheiro inteligente feito para nos ajudar, e então vamos apenas ativar um inteligente, animado Vamos dizer 500 Eu seleciono isso para fora e vamos fazer o mesmo com isso em vez do sal. Vamos ao Smart. Animate está em sua saída em 500. É legal. Então vamos vê-lo. Como essas palavras agora, como você pode ver, tudo está funcionando. Vamos colocar vamos fazer a transição um pouco maior. Então vai ser como em câmera lenta vai ser anos de TV vai ser chato. Podemos ver o efeito acontecendo aqui, certo? Então, agora clicamos. E como você pode ver, nós temos o efeito escolar que você começa meio rápido, desacelera cada vez que você conhece, ele diminui, então vai mais rápido do que retarda novamente. E podemos ver todas as transições aqui. Os ligar e desligar estão indo de um lugar para outro, e podemos ver que este círculo está se misturando de Blue Ray e tudo está meio que funcionando. Ok, então é isso. Um inteligente. É assim que funciona um animal inteligente. Tudo bem, então vamos para o próximo exemplo 5. Contatos - Drag: Hey, bem-vindo de volta nestes tutorial tipo que vamos ver em deslizar interações e como animar essas coisas. Então eu tenho estes protótipos prontos aqui. E como você pode ver, o que nós queremos isso, como uma lista de contatos de viagem. E nós queremos, uh, uh, Khobar. E então temos, tipo, duas opções aqui. Clique novamente Stripe toe, Desfazer. Então nós temos essa indireção ou podemos clicar e fazer isso então, hum, praticamente isso. Mas temos algumas características legais aqui, então podemos fazer e replicar para nossa ciência. E você vê esse tipo de animações em nosso doce Tudo parece muito orgânico. Então vamos ver como fazer isso em um mês. Então vamos tentar replicar estes, hum, para que saibamos como fazê-lo. Está bem. Então, para o momento, sim, vamos duplicar isso diretamente. Então isso vai ser assim que eu fui OK e imagine que só temos essa lista. Como pode ver, é um rebelde. Pelo menos eu criei com um componente, mas é apenas pelo menos feito fora outro título de estrela e tudo mais, mas ok, vamos fazer usado para aquecer a partir de um zero. Então, para estes, o que fazemos é criar como um superior. Esteja por lá. OK, então sim, ela era um cooler, talvez para acender. Em seguida, crie o círculo. É colocado aqui como um sobre o nosso com o nosso sobre o nosso plugging. Então, é bom. Vamos colocar o texto e é bem fino. Bolt, talvez seis 19 escolas em campo sejam como uma coisa cinzenta escura como esta. E então podemos colocar aqui, como a data ou o número de telefone, se preferirmos. Então faça isso. Ok, para que este possa ser o número deles. E vamos mantê-lo como uma cor mais clara. Isso é hoje à noite. De qualquer forma, isso é sim, design para design, mau processo. E o que queremos aqui é criar como, hum, e vamos colocar aqui como um fundo como um fundo branco. Eu realmente gosto de fazer estes como uma prática recomendada e todos os meus projetos, porque aqui eu posso controlar a altura fora do ar significava que eu poderia fazê-lo com outro. Vamos colocar recursos de layout e tudo sobre quatro dias para dar simples. A menos que, sim, faça isso assim e vamos criar um componente e isso vai ser Plus, eu acho que tudo bem. Então eu vou apenas duplicar isso e, em seguida, pressione comum D ou controlar o se você é MPC Ok. Então, sim, estamos bem. Agora eu vou selecionar todas as minhas fotos, ir aqui para conectar e ir para a nossa água. Vai mudar. Vou inserir alguns nomes aqui. Verifica os nomes também. Bem, sim. Como então ter outro cone de conexão chamado Contra real. E aqui sim, muito bom. Está tudo bem. Quero o nome completo. Certo, então vamos nos inscrever. Temos os nossos nomes. Temos fotos. Temos tudo preparado aqui. Ok, então nada que queremos fazer é criar o botão de apagar. Então, para isso, o que precisamos é assumiu toda esta linha aqui. Acho que nosso componente anterior tem 990 de altura, então vamos criá-lo. Acho que nosso componente anterior tem 990 de altura, 90 componente de couro não foram componentes da linha para o verdadeiro comer. Eu tenho uma cor lá. Então, neste caso, neste caso, vou fazer com que pareça a noite do 89. Então é entre os grandes bares. Ok? Enviado de separado do D por lá e eu só vou copiar o texto. Então, e o ícone. Então nós temos isso aqui, e o que nós fazemos é apenas fazer um grupo com isso em Call it, lidar com isso. Então sabemos onde estamos e o que queremos fazer aqui é colocar essa batalha dentro deste quadro. Mas como você pode ver, estamos em Swipe One. E quando eu movê-lo aqui, o elemento é ah, dentro troca Swipe um. Quando eu mexo, ele fica fora de lado. Um. Então o que queremos é localizar isto aqui e colocá-lo dentro. Então eu comprei. Ok, então você tem que fazer isso manualmente ou se mover. As propriedades do X. Pode ver se coloquei no zero, e queremos no 400 14. As propriedades do X. Pode ver se coloquei no zero, Depende do curso. No quadro que você configurou, Eu tenho o iPhone oito mais, Sim, Sim, dedo do pé fazer todos os seus tutoriais com o mesmo peso. Então temos isso aqui. Então o que acontece é agora que temos o botão excluir fora quadro ladrão de Swipe um, mas está incluído dentro deste quadro. Não é como lá fora. Ok, então é meio que interagir da mesma maneira fora disso. Então vamos duplicar o nosso design e o que vamos fazer aqui e apenas vamos trazê-lo um pouco mais longe. Espere. - Sim. Então, o que queremos aqui? É fazer a mesma coisa sobre exatamente o oposto. Ok, então nós só falamos tudo e movemos para a esquerda. Como podemos ver, já que fizemos esse tipo de grupo, , está dentro disso. Decida-os. Está dentro deste branco também, por isso não temos de nos preocupar com isso. Então vamos protótipo esta parte e deixe-me tomar alterar suas configurações de protótipo em ordem toe ser Tribo ganhou o quadro inicial em Swipe um. Colocamos estes em uma partida do conjunto Swipe um que podemos ver aqui. Não temos nenhuma interação. Não podemos rolar o que for. Mas estamos interessados nesta parte. Então vamos começar um protótipo. Então temos que pensar primeiro o que queremos fazer, e queremos fazê-lo quando clicarmos aqui. Quando começarmos a dirigir aqui, queremos chegar a estes listrados para a tela. Então, pressionamos este círculo azul. Venha aqui e depois em Swipe. Desculpe pela droga. Queremos ter um cara para atacar dois, que é essa tela e também queremos que Mia faça isso um pouco menor. As coisas são para fazer. Ok, então, um, nós queremos que o dedo venha aqui, e está marcado como animar. Então temos a transição, certo? E a mesma coisa quando passarmos aqui, queremos que o dedo volte para a propriedade inicial. Então, neste caso, eu vou fazer com bem por aqui. Ah, arrastando Navegue até E neste caso de listra um, nossa tela. Então vamos ver como funciona. Como isso está funcionando até agora e temos a caminho. Espere, Warren está furtando. Você pode ver que tudo isso está realmente funcionando. E se você sabe, ele tem ele temum efeito legal. Por isso fizemos a nossa primeira parte. E o que agora o que queremos se é que se furtarmos, podemos fazer a ação do. Mas se clicarmos, queremos, um, lidar com o nosso contato e então esse vai aparecer. Ok, então nós vamos duplicar isso novamente lembrar todos os elementos tem que ser o mesmo lá nas telas. Ok, neste caso, eu quero que este texto que eu tenho nestas duas telas para vir para a direita e estes mais felizes . Então, para estes, eu só vou colocar zero no campo de opacidade. E aqui o que nós vamos fazer, é, hum torná-lo maior e talvez colocar como para algo como tipo de Bolden maciço em grande. Então nós temos estes que eu chamo Mats Boulder e o que nós vamos fazer, é tela duplicada novamente. E o que queremos aqui é livrar-nos disto e, em seguida, mover estes contactos para cá. Então vamos aplicar transições aqui e a prototipagem. Então, o que? Queremos isso quando clicarmos aqui, ele vai aqui, então faça. Neste caso, no topo, Navigato passou cinco. É marcha. Animar. Caiu 800 milissegundos e o que queremos quando entra aqui depois de um tempo, automaticamente, vai para estas telas. Então, para isso, o que fazemos é selecionar o amigo e depois do atraso o que vamos colocar como um pequeno atraso aqui. Vamos usar o mesmo atraso dos 800 milissegundos. O que queremos é navegar nas listras dos dedos. Seis novamente é a tela mais antiga aqui. Então vamos ver como isso parece. Uau, isso está funcionando bem e maneira para clique. Uau, isso é legal. Então fizemos essas antigas listas de transição reiniciadas para ver o que ele quer que nós criamos . Como você pode ver, ele tem algum tipo fora de movimentos agradáveis aqui, e ele vai clicar. Oh, isso é legal. Então esse é o nosso protótipo que drogamos. Animações e interações. Obrigado. 6. Travelopia - efeitos de hover, animação inteligente: Ei, bem-vindo de volta. E nós vamos ver, como, como, em sua direção bizantina aqui. Como você pode ver, nós vamos criar um, esses projetos onde esperamos que uma dessas três partes aqui, nós podemos ver que ele está de pé e você leva um ano que até anos isso é chamado para a ação fundo Então, . como você pode ver, é um efeito legal que você pode integrar em seus designs. Ok, então vamos ver, como podemos fazer isso? Está bem. Como você pode ver, eu tenho quatro telas aqui é o inferno. Precisamos criar isso. E temos que replicar Ah, nossa casa onde temos, tipo, tipo, três quadras. E nós temos que criar estes onde o que ele faz é sim, aumenta o seu com então estes textos. Este maior faz maior do que este texto há anos aqui. Como fazer o que parece daqui. Como você pode ver, eu tenho isso aqui como se tivéssemos opacidade serial como transparente. Então o que ele faz quando ele muda para estes enquanto porto nesta área. Ah, estes o rosto de permanência este texto se torna maior thes teste surgir e define sua capacidade para 100. Então, está ocupado. Bem, e depois uma garrafa a anos daqui a partir da esquerda. Como você pode ver, este botão, eu selecionei agora, qual é este? Descubra o Camboja, como você pode ver, é o mesmo nós aqui. Descubra o Camboja. Então nós temos, um, todos os elementos, hum, desta tela neste creme. Certo, então para o martini dele funcionar, tem que ter o dedo do pé com os mesmos elementos em um na tela do outro. Está bem, então vamos continuar. Replicar essas duas telas. Nós não vamos replicar estes porque fazer um exemplo vai ser bom o suficiente. Ok, então quarenta anos e vai apenas para duplicar esta parte. E eu vou apenas para sim, criado a partir de zero. Ok, então para esta metade como um layout criado aqui, apenas indo para o retângulo do criador, eu tenho que ver se este retângulo vai se encontrar como, sim, então algo em torno que vai ser legal. Então nós temos, hum, você sabe que são blocos livres. Vamos fazer com que possamos ver lá. Diferença. Certo, então temos nossos blocos separados de 480 pixels. A propósito, eu para isso parar a ciência. Eu costumo usar 1140 e depois 9000. É a minha típica armação. Ok, então, sim, vamos continuar com isso. Então eu só vou me livrar disso é bom. Estamos na 480. Apenas uma bala por aqui. Então, para decente vai usar em um splash, Blufgan. Então eu vou 30 ou algo assim. Natureza aleatória para Vejamos. Bem, isso é fixe. E nós vamos nos sentir aqui, e então nós vamos colocá-lo como colheita, então sim, nós podemos fazer algum corte lá dentro. Vamos criar outro retângulo do mesmo tamanho que este. Ok? E nós vamos colocar, como você pode ver aqui. Eu tenho algum, uh, linear no seu radiante em cima com alguma opacidade. Então, Gates, porque se eu colocar o texto aqui, isso é copiar e colar. Este teste, se eu paguei, é básico Aqui nesta foto, você pode vê-lo chegar, mas às vezes, um, um então podemos ver que às vezes não é muito confiável. Então, para isso, vamos criar o S Theis, um Grady linear aqui. Então vamos para linear. A tia-avó e, em seguida, estes mudam a capacidade para 102 e, em seguida, vamos até mais um pouco agradável. Bem, não sei se é muito bom, mas sim, vamos conseguir. Então temos usado a escassez A de Theis para 70% ou 60%. Você pode brincar com o que quiser. Talvez você possa tentar também multiplicar ou tela ou algo assim como esta escola. Bem, que seja. Vou deixar isso normal por normal por quatro dias. Ok, então como estávamos vendo aqui, quando nós Khobar aqui, um texto aparece e depois aparece é como um dedo do pé. Então eu vou apenas copiar esses dois elementos aqui neste design. Ok? E estes de baixo aqui e a linha de fundo vai colocá-lo aqui porque eu quero quando chegarmos à tela para estar à esquerda ou à direita. Então, se eu apenas selecionar este elemento e você pode vê-lo que nós temos aqui coisas que ele fez você 100 enviou este texto para 100 para. Como podem ver, temos todos os elementos daqui. Já o temos aqui, mas temos de ter estes elementos. Como, uh, ele não fez com a opacidade. Mova isso em torno de 20 e estamos prontos para ir. Então o que eu vou fazer a seguir, é Ah, sim, sim, eu estou indo para alguma coisa. Vou colocar esta mensagem aqui. Ok, então mais tarde, quando fizermos nossas animações e mudanças aqui vai ser um desastre. Então o que eu vou fazer é sim, agrupar isso, e eu vou chamá-lo, hum eu vou chamar o item um para que nós não tenhamos muito estresse sobre os nomes e tudo mais. Então nós temos, eu acho, também. Ideia Três. Ok, então isso é bom para ir e o que vamos fazer. É, hum, você sabe, uh, esses dois elementos colocá-los com opacidade zero, porque nós vamos mais tarde. Bem, não podemos deixar assim a partir de agora e então o que eu vou fazer é apenas dizer isso para a foto, então nós estamos vendo algo diferente. Não, as palmeiras podem ser legais de estar na praia agora. Está bem. Esta escola, e então eu vou apenas mudar esta foto para e sobre este Plus, Blufgan disse, realmente iria querer resposta para nós. Isso é só mais um Nater quer. É muito legal em algo que eu quero fazer. É uma imagem. Só disse para cortar, então mais tarde, não faz as coisas. Quando a foto ficar maior, podemos controlá-la e ingerí-la. Quando a foto ficar maior, Então, é uma boa prática, dependendo do que você quer definir isso para cortar e nós somos encontráveis. Ok, então nós temos nossa pré-casa praticamente configurada, e o que nós vamos fazer é apenas duplicar isso porque, lembre-se, nós precisamos dos mesmos elementos aqui e ali, mesmo que façamos mudanças aqui. Então o que vamos fazer é criar este efeito Camboja, uh, uh, Khobar. Então, para estes, o que vamos fazer, é algo assim, e nós vamos apenas escolher esses dois elementos e vamos trazer nosso Gamba aqui e o que vamos fazer é esticá-lo assim. Ok, eu sei que parece um pouco rápido, mas vai funcionar. Então, para isso, precisamos de um texto menor sobre, você sabe, deixá-los rodar e este texto. Vamos apenas colocar a capacidade a zero. Porque estamos bem, então, algo que eu não deveria ter feito. É também. Parece do tamanho, mas não importa honestamente, porque o importante, é esta parte esquerda. Isto vai acontecer. Não vamos ver este elemento. Então nós colocamos isso para vê-lo novamente para se livrar dele não vai dar parte relacionar, você sabe? E como você pode ver aqui nós estamos tendo algum tipo de efeitos fora no 40 Então o que eu recomendo é voltar a imagem do dedo do pé, um, fazer uma façanha, ok? Ou sentir Sentir é melhor do que crescer. E depois fomos usar a forma como queremos que isto se comporte. O mesmo se aplica ao Camboja. Bem, aqui para a nossa foto. Então nós colocamos isso para caber. Sinta Sim, cortá-lo e então nós dois, podemos para outro. Isso foi na escola. Este tipo de para aumentar a sua Então, uh , sim, estamos prontos para ir. Nós temos que fazer. Estes dois elementos já configurados. Está bem. E para estes que vamos fazer É neste caso. Eu não vou ser tão eso duro Asai estava aqui, então eu era meio que um exagero em tudo. Eu só vou embora com a foto no linear. Ah, radiante. E vamos fazer o mesmo com a foto. Tal como acontece com o antes expressar como sentir e, em seguida, cortar. Certo, então podemos selecionar. Ah, a posição das fotos que gostamos. Então, a foto fará como uma transição supercool. Provavelmente como escalar em si mesmo vai ser ótimo. Eu acho que sim. Vamos mover estes para a direita. E esses textos, esses dois textos, nós os queremos. Eu estou no centro, então você os seleciona e nós queremos nosso dedo de teste. Venha aqui. Sim, isso é bom. E nós já temos essa parte configurada, e essas estão configuradas para e isso é legal. Só precisamos do dedo do pé. Esconda isto. Então vamos colocar em Ciro. Capacidade é a mesma coisa, vai ser xarope. Vejo você de novo. Como você pode ver, Super bastante básico configurar. E agora estamos prontos para protótipos. Certo, então vamos selecionar nossa casa depois ir para o protótipo. Vamos ver as configurações do protótipo. O quadro inicial é a Noruega. Nós não queremos que nós só queremos Oh, sim, casa. Eu vou para casa e ele está, tipo, tipo, menos ou certo, então temos uma estação diferente aqui. Então, agora, se nós automaticamente nossas configurações de protótipo, você pode ver aqui nossos dispositivos tamanho personalizado porque estamos usando assim Eles pararam como ele Apenas perturbado isso. E como podem ver aqui no painel de design, uso 1140 por 900. Então nós viemos aqui para protótipo, melhorar as configurações de tempo e nós adivinhamos, colocar em tamanho personalizado este tamanho, se você estiver trabalhando com outros tamanhos é muito bom também. Você pode colocar aqui decide que você quer Sim. Certifica-te de que é o mesmo tamanho da tua moldura. Tudo bem. Ah, bem, neste caso, quero dizer, se você quiser ter um pergaminho ou é ah, página longa ou algo assim, você pode simplesmente deixar no protótipo das configurações do. E se você tiver mais conteúdo aqui, ele irá rolar. Ok, então, por enquanto, nós vamos e o que queremos. Aqui está Nós temos o nosso conjunto de protótipos, e o que precisamos é colocar alguma interação e animações neste Então, para estes, o que fazemos é sim, selecione. Este grupo é hyping One é o que queremos fazer quando nós makeover com Select segunda tela do mais. Então o que vamos fazer é, em vez disso, off on click. O que queremos é enquanto pairando, queremos que estes para navegar para o quadro de classe direita em vez disso, off instante com Vamos fazer um vamos fazer, Vamos ver como ele funciona. Como você pode ver, isso é muito difícil. É como se eu não sei, 20 anos. Só conhecê-lo. Então, vamos ao invés do dedo do pé, um inteligente, animar tudo bem. E eu quero usar a facilidade para fora. Então temos algum tipo de um lento do que acelerar, em seguida, abrandar, abrandar novamente para que possamos ver aqui um pouco. E nós vamos colocar aqui, tipo, tipo, 500 milissegundos. Então é como ir metade por meio segundo e ver como é. Ok, bem, isso está funcionando muito bem. Como você pode ver tudo, está se movendo bem. Tudo está funcionando, então é basicamente isso. Se você quer um A, então você pode ver aqui. O que você precisa fazer para a prisão lá fora fora fora fora de seus quadros é apenas fazer a mesma coisa com ele aqui. Então, para isso, você só poderia duplicar estes e depois estes. Ah, a ISS. Esta parte é mais pequena. E, você sabe, como escalar estes para cima e, em seguida, moveu estes e é pré deve muito o mesmo. Ok, então a mesma coisa que fizemos aqui, devemos fazer aqui e depois para o terceiro quadro, e estamos prontos para ir. Então é isso. Temos protótipo de supergrupo distante enquanto pairamos. 7. Cartões e rolagem: Hey, bem-vindo de volta do dedo do pé estes breve tutorial sobre como usar rolagem horizontal e vertical na maneira certa. Ouvindo Fichman, Eu tenho um exemplo aqui fora de como fazer perna tese rastejar e estes verticais Carney no caminho certo. Ok, porque eu tenho, tipo, um exemplo aqui, parece o mesmo. Mas é esta segunda tela à esquerda e você pode ver se nós não fazê-lo Bom. Nós temos vertical em um tempo recente chamando, Sim, mas é silencioso. Rapidinha. Então, vamos aprender a fazê-lo da maneira correta. Certo? Então nós temos esses tempos recentes chamando aqui e esses verticais chamando aqui com funciona perfeitamente ou Ok, então vamos criar no iPhone oito mais tela aqui, e vamos nomeá-lo como classe um. Então estamos na mesma página aqui. Eu só vou duplicar isso. Heather não é grande coisa. Não é um veado grande. É exatamente como você pode ver dentro deste grupo em ir apenas no grupo este, na verdade e colocar este retângulo aqui. - Sim. Você canta? Indo para, uh, este é o ícone, na verdade. E eu tenho o título. Temos o “eu posso ouvir a flecha”. Temos o texto e temos a perícia e os antecedentes. Nós precisamos dele. Então, quando pedimos papel Como você pode ver, o texto não fica atrás nos dados. Ok, então nós temos, tipo, um fundo branco apenas indo para o ponto amarelo. Então vemos o que está acontecendo. E para o resto, vou copiar o carro que tenho aqui. Bem , vou replicá-lo. É bem simples, na verdade. Então é um emaranhado de drovers, algo assim. Montar as classificações, Digamos por seu fundo colocando como vermelho. E eu vou apenas copiar e colar este texto aqui. Ok, então este é o nome. Este é um grande número. Ok? Eu só vou colocar isso em branco e nosso texto. Tudo bem? Nada extravagante. Basta descer para o 12. Marque a data. Está bem, Easy. Então o que vamos fazer com isso é sim. Ah, faça um grupo. Está bem. Então, sim, você primeiro. Vá lá, anda, Andy. E você tem o grupo, e o que vamos fazer é apenas duplicar isso e uma vez que a cor de fundo amarelo vamos fazer outra cópia, e vamos colocá-lo na visão primária. Ok, então estamos bem e vamos a quatro dias. Poderíamos fazer, tipo, um grupo ou algo assim, mas para isso quando eu tenho, tipo, , para esse tipo de agrupamento o que eu gosto de fazer, é realmente para cima, hum, Saiu cedo. Certo, então pressionamos a peneirar um ou clique direito para fora, então agora podemos separar os elementos do jeito que não precisaremos. E mesmo em alguns, se precisarmos criar algum espaço, alguns tendo um dia muito, muito começando. E o fim , vai ser bom. Então, para este objeto em particular, eu vou criar estes. Quero dizer, eu vou colocar, tipo, tipo, 20 aqui estão apoiando. Podíamos colocar 30, mas vinte. - Tudo bem. Então está indo para o dedo do pé. Dê-nos este espaço aqui, neste espaço ali, no início, no fim. Fora isso fora. Este objeto. Está bem. Então, mesmo que esteja colocando aqui como amigo 17, eu ainda quero colocar isso dentro de uma moldura. Está bem. Ah, vamos ver. Bem, eu não vou colocá-lo agora. Vamos, vamos ele gostaria disso. Está bem. Como podemos ver, amigo. 17 quando Fichman coloca o quadro no nome do grupo aqui é porque ele está fora do quadro real. Então, para isso, o que temos que fazer. Vem cá e arrasta para a classe 1. Como você pode ver agora, o é festas, ele mesmo assim o quê? Podemos ir ver isso. É selecionar o quadro e clipe de conteúdo, e então você será você será cotovelo para vê-lo. Está bem. E o que queremos fazer de novo. Ele não desmoronou isso, então vemos claramente o que temos aqui. Temos a nossa urze o nosso passado. Então eu vou colocar o fundo dentro da urze, na verdade. Então, está bem. Aqui. Tudo bem, agora o fundo está dentro da urze nestes que eu vou chamar. Chame isso como horizontal. Poderíamos pelo outro nome um pouco ou algo assim. Você quer um nome. E estes iam fazer tipo, nós vamos usar esta seleção de quadros. Está bem. Você está certo. Clique aqui e seleção de amigos. Por que é isso? Porque agora podemos mudar o tamanho do quadro. Como podem ver antes, vou desfazer. Não temos as alças porque é um teste de LA. Certo, então precisamos converter isso em um quadro para enquadrar essa eleição. Vai ser a nossa mosca lá. E o que nós queremos é que isso quer, Toby nós com o quadro fora. Isto é mais leve. Queremos começar a ser desde o início de x zero, rebocar este ponto aqui. Está bem. E por que isso? Vamos ver, vamos preparar o nosso protótipo para funcionar. Então, neste caso, vai ser classe um. Certo, então já temos um acordo aqui. Então, agora você vê, eu estou tentando desenhar de volta para deslizar, e não está funcionando. Deixe-me colocar isso em branco. Amarelo é demais. Então, veja, não funciona para que isso funcione. O que temos que fazer é um protótipo. Veja, nós não precisamos de nenhuma interação agora, apenas o comportamento de transbordamento. Nós só precisamos colocá-lo na rolagem horizontal Como você pode ver, temos rolagem vertical bem e horizontal ou vertical. Mas neste caso em particular, nós só queremos essas três caixas de dedo vêm junto de em Lee no eixo horizontal. Está bem. No resto destes menos isto Estas folhas vão fazer como uma vertical. Está tudo bem, mas vamos ver mais tarde. Então, já criamos isso e pegamos essa rolagem horizontal do dedo do pé e vemos. Vamos ver se funciona. Bem, agora está funcionando. Trabalhando muito bem, certo? Então eu vou trabalhar agora para copiar todas essas coisas. Sim. Deixa-me livrar-me disto. Eu tenho uma , lista enorme, então eu vou selecionar o quadro baseado nela. E o que eu vou fazer, é, ah, selecionar todos os meus elementos e estamos aqui. Você vê? Coloca misto. Basta colocá-lo à esquerda em cima. Então, quando você está tamanho, hum, este quadro, não é ah, escala ou faz coisas aqui, então tudo permanece no lugar. Ok, então, uh, sim, então agora se nós rolamos aqui como você pode ver, a rolagem vertical está funcionando e eles se apressam. Às vezes, o Curlin também está a funcionar. Ok, uma coisa interessante que eu não fiz aqui é que queremos nossa urze consertada. Então, como você faz isso por isso? Você seleciona sua urze e você apenas clica aqui posição fixa quando ele está rastejando? Então agora ele vai ficar no lugar. E nós tivemos um sui colocou como um fundo branco sob a urze. Você pode ver todo o texto agora está executando este filme. Ok, veja se nós acho que colocar isso transparente quando nós rolar vai ser como você sabe, Messi pode ser legal para alguns sites, mas não para este. Então, já temos que rolar horizontalmente Ascoli vertical. Ok, então te vejo no próximo tutorial. 8. Menu de usuário - Overlays e troca com: Hey, bem-vindo de volta a estes último tutorial vai ser rápido o que temos aqui. É tipo irmão e nós estamos indo para o pé. Tente três sobreposição e, como podemos ver aqui, a ferramenta de prototipagem de sobreposição e o que ela faz é, como o nome diz, colocar alguma sobreposição sobre o mainframe. OK, então como você pode ver, eu tenho estes sentados. Então, quando eu clicar fora desaparece quando eu venho aqui, thes overlay aparece. E quando eu faço como um Khobar State, eu sei que é mais tempo. Mas imagine que você está trabalhando em um aplicativo de desktop, então eu vou replicar isso. Como você pode ver, esta é uma descida bem direta, então vamos criar uma lista suspensa. Então, para isso, nós Drover emaranhado ok e aplicar Soundboard os rádios, digamos para oito. Então é um pouco mais por aí. Vou aplicar algum efeito neste caso. Eu vou colocar apenas o sutil que eu tenho aqui e colocar isso em branco, a cor de fundo. Então nós temos isso. Ok, então nós saímos ou estamos atrasados, mais ou menos prontos. Está em alguns itens fora aqui. Eu acho que um deles para em eu não três e eu. Eu vou me candidatar. Experimente aqui. Então eles são todos distribuídos da mesma forma. E o que eu quero é colocar algum fundo aqui em ambos elementais. Deixe-me sim. Ah, tenho um pouco pastoso. Então vem para a frente. Eu costumo fazer assim. E nesta parte, o que vou fazer é colocar isto em branco, está bem? Porque só temos que ajustar esta coisa aqui porque mais tarde, vamos mudar esta cor. E em vez de quê, vamos colocar este tipo fora da grande tela azul. OK, então, a fim de fazer essas sobreposições o que precisamos fazer, é, ah, ah, enquadrar a seleção. Está bem? Porque é como é, é como eles funcionam. Então nós vamos apenas remover isso do nosso quadro principal. E como você pode ver, nós temos aqui agora este quadro para ir para toria overlay um, porque nós estamos indo para duplicar isso no S ok para aplicar este fundo quando nós Khobar ou quando nós clicamos no item dois. Ok, então nós temos todos praticamente o top como este. E o que em Nós estamos indo para o modo protótipo agora e lembre-se, nós temos que mudar. Nosso quadro está começando. Queremos ser desta maneira vão fazer o tutorial com este. Ok, e o que nós queremos isso quando clicarmos aqui no usuário, hum, por padrão pés Myers vai dizer em Arigato. Mas como podemos ver aqui, o que está acontecendo? Se fizermos isso, ele navega, mas é horrível. Portanto, este não é o facto que estamos à procura. E o que queremos é quando clicarmos aqui as sobreposições mais felizes aqui, mas mantendo esses amigos. Então vamos fazer isso. Vamos abrir sobreposição e vamos ver. O que isso significa? Sim, começaremos quando fizermos isso. Ele aparece aqui no centro para que possamos controlar onde eles se sobrepõem anos. Então, para isso, nós vendemos aqui, e, como você pode ver, diz centro, significa que ele forneceu reboque. Aplica-se a sobreposição ao centro. A página que podemos fazer como ajustes rápidos e você pode ver onde ele vai. Você pode ver aqui que está se movendo. O que costumo fazer por estas partículas são sobreposições. É sempre para o Zeman. Além disso, posso posicionar o que eu faria neste caso. Esta posição é boa e o que eu quero isso passou pairando bem ou chutado. Vamos dizer top, Ok, quando nós estamos, hum, clicando no item para este tipo fora de fundo acima anos aqui. Então, vamos dizer. E o que queremos também é trocar essa sobreposição com essa sobreposição mais antiga. Tudo bem, então vamos colocar sobreposição em cima. Neste caso, vamos usar golpeado com parar com onde significa que é que ele muda este quadro com este outro amigo, mas mantém o excessivamente sobre. Certo, então vamos selecionar de novo. Isso e nós estamos indo para o pé. Faça isso com tutorial. Pare, pare com tutorial para este, este e a animação que queremos ser instantânea. Nós não queremos um pouco de alma para algum tipo de fora. Podemos colocar o inteligente, animar. Vamos ver o que ele faz. Ok, então está funcionando bem, mas vamos ver outras opções que estão aqui nas sobreposições é sexy. Como você pode ver, temos posição na sobreposição manualmente, e temos que boas opções aqui que o primeiro é fechar ao clicar fora. Isso significa que, se eu clicar fora vai desaparecer, que é muito bom, porque geralmente faz o comportamento que você quer em seus protótipos que se você tem em sobreposição em muitos, você iria soltar para baixo. O que você quer ver ou que respeito é isso quando você clica fora dele? Então ele desaparece e outro comedor de CUF que alimenta minha casa, é, ah, estes no fundo atrás de sobreposições. Como você deve saber, quando você está fazendo, como sobreposições ou pop up alguns menus pop-up ou alguns cartões pop-up Quando você clica aqui, eles recebem este tipo de fundo Ah, um pouco mais escuro em ordem para fazer o elemento pop pop para cima. Normalmente gosto que o dedo do pé esteja em contacto, por isso não gosto. Eu não empurro para a frente ir algo ao redor que talvez para um pop-up ou para uma janela modelo, é bom. Mas não para este tipo de elementos. Na verdade, para este tipo de elementos, eu geralmente não coloco tudo bem, porque você tem o triste Oh, então é bom o suficiente para estar em disputa. Talvez esses satélites não sejam os melhores porque estamos perdendo um pouco nossa fronteira aqui, mas tudo bem, é isso. Essas coisas são coisas projetadas. E isso é para prototipagem e animação. Certo? Então, estamos praticamente feitos aqui, então vocês podem ver que temos essa transição. Então você tem que aprender o que você pode fazer com sobreposições. Então, obrigado por se juntar a mim e vê-lo no vídeo final. Obrigado. 9. Congratulations: Parabéns. Você fez isso. Você aqui. Só quero agradecer por ir ao placar e sair do curso. Espero que você tenha aprendido algo interessante também são muito bons, como você tenta fazer alguns exemplos bundas que temos feito na aula sobre isso. Você coloca seu protótipo algum vídeo ou link para seus pés agora protótipo. Então, se você tiver alguma dúvida, eu posso ajudá-lo a revisá-lo ou como melhorá-lo ou o que quer que seja. Basta colocá-la no painel de discussão ou de comentários, e quero que nos encoraje bem, a ver todos os números que tenho. Então talvez ache algo interessante. Como você está interessado em um exterior inteligente e Sigma. Ou talvez como criar o sistema científico do zero. Faça sim. Ocupado meu perfil mental. E você tem mais curso ou sobre fiqh mente esboço para. Então talvez tenha encontrado alguns deles. Interessante. Então, obrigado pelo seu inimigo e como o seu dia