Design de aplicativos e sites com o Adobe Xd

1. Aplicativo de introdução e design web: Você está planejando criar um site ou aplicativo? Mas deixe-me mostrar como você pode fazer as duas coisas rapidamente usando o Adobe XD. E, Martin, tenho mais de 20 anos de experiência como designer gráfico, ilustrador e instrutor certificado pela Adobe Trabalhei com empresas como BBC, Disney, Google, Ikea e mal posso esperar para compartilhar minhas melhores práticas com Este é um curso prático simplificado com foco em um projeto de design da vida real Eu explicarei tudo passo a passo, e você receberá todos os arquivos de exercícios para acompanhar. Caso você prefira não me copiar. Você também pode acompanhar meu fluxo de trabalho usando ativos alternativos fornecidos e criar algo completamente exclusivo que possa ser exibido em seu portfólio criativo Tenho certeza de que este curso o inspirará a criar algo incrível. Abordaremos todos os recursos importantes do DOB XD ao criar nossos protótipos de aplicativos e sites, incluindo componentes, pranchetas, interações totais, animações, sobreposições, rolagem paralaxe Ao final deste curso, você estará confiante em conhecer o DOBXC e pronto para criar protótipos complexos e envolventes para seus pronto para criar protótipos complexos e envolventes para protótipos complexos e envolventes Além de todo o material técnico, também abordaremos algumas teorias importantes do design gráfico que você poderá aplicar em qualquer um de seus futuros projetos criativos. Você pode participar deste curso sem nenhum conhecimento prévio em ilustração de design gráfico ou aplicativos DOB, mas para concluir o projeto, você precisará acessar o AOB Creative Cloud e um computador desktop ou laptop Mas agora é hora de começar a criar, então nos vemos na próxima lição. 2. Visão geral do design do aplicativo: Estaremos construindo um aplicativo e um protótipo de site. Eu criei esse tema de autoconsciência, então o aplicativo está ajudando a nos conhecermos com base em alguns perfis simples no início E, como a maioria dos protótipos aqui, na verdade não ajustaremos os conselhos ou as respostas com base no que as pessoas escolheram no início Mas esse tipo de lógica pode ser adicionado posteriormente quando o desenvolvedor começar a trabalhar com nosso design. Obviamente, neste projeto, nos concentraremos apenas no design, mas criaremos um protótipo totalmente funcional que pode ser compartilhado com nosso cliente e, posteriormente, também com o desenvolvedor Então, deixe-me mostrar como será a aparência do aplicativo. Esta demonstração começa com a tela alcum e, em seguida, teremos a opção alterar esses poucos atributos Então, dependendo do que pensamos de nós mesmos, podemos escolher essas opções e, se quisermos, também podemos obter ajuda sobre o que essas palavras significam, se você não estiver familiarizado com isso Mas uma vez que selecionamos o que acreditamos que somos, podemos obter nossas respostas , isso nos dá algumas dicas, e também há algumas animações divertidas aqui Podemos ir para a próxima dica. Novamente, uma pequena animação lá em cima, e então podemos passar para a próxima novamente. E mais um no final. E também temos um pequeno menu aqui na parte superior, com o qual podemos alternar entre os conselhos. Também podemos voltar para casa e depois brincar com isso. Agora, como eu disse, nesta pequena seção de perfil aqui, a seleção que escolhemos não muda realmente o conselho aqui neste protótipo No entanto, você tem a opção de estender neste aplicativo. Então, se você quiser ficar bom no DOB XD, projeto desta semana é a oportunidade perfeita para você continuar e talvez ter mais telas adicionadas para este aplicativo E, como sempre, você não precisa usar exatamente os mesmos ativos com os quais vou trabalhar. No entanto, eu tenho todos eles preparados e prontos para uso, o que economizará seu tempo e permitirá que nos concentremos no fluxo de trabalho do XD. No entanto, se você estiver interessado origem desses ativos , os recursos originais estão todos listados e vinculados no quadro de ativos, para que você possa encontrá-los lá. Até vinculei o site onde encontrei a cópia que usei neste protótipo e até incluí algumas referências ou exemplos do estilo que eu estava escolhendo com meu design E voltando ao XD, também quero mostrar que no final, criaremos uma versão para site e também do mesmo aplicativo de autoconhecimento E isso também será um protótipo funcional, que poderemos testar E é uma única página que rola com um menu fixo na parte superior e também com alguns links âncora com os quais podemos navegar na E também volte para casa. E, novamente, o seletor funciona da mesma forma que no aplicativo. Então, espero que você esteja animado para começar este projeto. E não se preocupe se você não estiver familiarizado com esse OBXD, porque eu vou orientá-lo passo a passo, desde o início, projetando as coisas e, no final, criando o protótipo totalmente funcional 3. Tela de boas-vindas: Você pode baixar o arquivo de exercícios que eu preparei para começar com este projeto, que já inclui todos os recursos. É um único arquivo XD. E depois de abri-lo no XZ, você terá a opção de salvá-lo como um documento na nuvem, o que permitirá que você também possa acessá-lo de diferentes computadores Então, depois de abri-lo, você sempre pode escolher Salvar como documento na nuvem. Atualmente, para mim, é um documento local porque já é um documento na nuvem. Esse pequeno ícone indica o status. Ao abrir esse arquivo, você notará que eu tenho a prancheta de ativos com todos os elementos e cópias com os quais trabalharemos Mas no painel da biblioteca, que você pode abrir clicando neste ícone aqui, você também encontrará cores e estilos de caracteres que eu já configurei. Então, usaremos esses gradientes e essa cor também E também estou trabalhando com duas famílias de fontes da Adobe, Dan, 2014 e Nunito Eu recomendo usar as duas famílias de fontes inteiras para elas No entanto, depois de abrir o arquivo XD, ele deve absorver automaticamente esses fundos selecionados. Neste primeiro vídeo, vamos nos concentrar nas duas primeiras telas, a boas-vindas e a tela de arquivos profissionais, onde podemos escolher nossas características pessoais Então, vamos começar com a tela de boas-vindas. Observe que estou no modo de design no momento. E aqui já temos uma prancheta, configurada para o tamanho de tela do iPhone 12 e 12 pro Vou clicar duas vezes primeiro aqui e renomear esta página de boas-vindas Gosto de usar letras maiúsculas para nomes de pranchetas que são telas reais no aplicativo e, normalmente, uso maiúsculas e minúsculas para sobreposições, que criaremos posteriormente Mas nesta primeira prancheta, já precisaremos de algum texto Então, vou usar a ferramenta de digitação, clique aqui, e vou digitar o crescimento. Esse é o nome que eu criei para este aplicativo. Então, vou mudar isso já aqui à direita para o tipo de letra to e, na verdade, vou definir isso em negrito Agora, depois de pressionar Escape, posso usar esse pequeno círculo no meio para aumentar o tamanho do texto. E com a ferramenta de seleção, também podemos movê-la e alinhá-la ao centro Acho que em algum lugar por aí, vai funcionar. Em seguida, altere a opção, clique e arraste para duplicar isso. Vamos reduzir o tamanho desse texto para 20, talvez 25 seja melhor. E então o texto aqui é: conheça a si mesmo na próxima linha com uma quebra de linha para fazer as coisas. Ponto de exclamação e, em seguida, pressionarei novamente a tecla Escape, centralizarei esse texto Então talvez possamos mudar um pouco a liderança. Portanto, a distância entre as linhas pode ser 25 ou 30. Sim, acho que 30 parece bom. Isso não precisa ser ousado. Talvez possamos torná-lo médio. E também podemos usar novamente o círculo para reduzir o tamanho do texto. E nós apenas o colocamos abaixo do título principal. Agora, vamos até os ativos. Primeiro, vou apenas duplicar esse elemento Novamente, clique e arraste com a ferramenta de seleção e, em seguida, vamos girá-la, mantendo pressionada a tecla Shift, alinhando-a Vou arrastá-lo para baixo. Também alinhe esse canto aqui na parte superior e talvez apenas estique-o um pouco Vou selecionar isso e clicar com o botão direito mouse em Enviar para trás para garantir que nosso texto esteja no topo. E então vamos mudar a cor do texto, a cor do campo para branco. E, finalmente, só precisamos de uma imagem, e eu vou usar essa. Mais uma vez, eu prefiro manter todos os ativos aqui nesta prancheta, e eu sempre duplico o que precisamos Então clique e arraste, e então vamos aumentar o tamanho disso. Você não precisa manter pressionada a tecla shift, ela mantém automaticamente as proporções iguais. No entanto, enquanto você está redimensionando, às vezes acontece que as camadas não se alinham perfeitamente Portanto, a sombra do carro está em uma camada separada do modelo principal. Então, talvez precisemos ajustar isso um pouco. Mas primeiro, quero ter certeza de que está no lugar certo. Eu gostaria de ter a personagem em algum lugar no centro da tela e fazer parecer que ela está encostada na borda da tela Sim, acho que está perto, talvez um pouco menor, e depois arraste-o de volta para dentro. Quando eu clico fora da prancheta, posso ver como ela será cortada Eu acho que isso funciona muito bem. Então, se quisermos refinar o alinhamento aqui na sombra, podemos clicar duas vezes e selecionar a sombra ou o caractere Podemos usar as teclas de seta do teclado e apenas ajustá-las ou empurrá-las até que estejam perfeitamente alinhadas E então, quando clicamos do lado de fora, agora está configurado, e isso é tudo o que precisávamos fazer para a tela de boas-vindas. Essa é definitivamente a tela mais fácil que tivemos que criar. O próximo será muito mais complexo, o que vamos montar no próximo vídeo. 4. Como criar a tela do perfil: Então, continuando, vamos usar a ferramenta de prancheta. E com isso, basta clicar aqui ao lado da prancheta anterior Ele cria automaticamente o mesmo tamanho de prancheta de antes E isso chamaremos de perfil. Novamente, estou usando letras maiúsculas porque essa é uma tela importante Então, nesta tela, usaremos alguns elementos. Em primeiro lugar, usaremos todos esses ativos, então vou selecioná-los. E, como antes, vou clicar e arrastá-los até aqui e, em seguida, movê-los para a prancheta Então, também precisaremos de algum texto. Então, vou usar a ferramenta de digitação e apenas digitar e descrever a si mesmo. Mas para esse texto, eu já tenho o estilo do caractere configurado, então vamos usar esse aqui. Então, ele o formata automaticamente para a versão de que precisamos, e eu simplesmente a coloco lá. E também precisaremos de um ícone, o qual preparei novamente esse ponto de interrogação. Vamos apenas copiar isso com o Command C, também podemos copiar. Clique na prancheta e o Command V a colará Então, vamos mover isso aqui, por enquanto, no canto superior direito. Mais tarde, também precisaremos de um botão. Mas primeiro, vamos configurar essas imagens. Agora, eles serão usados para uma alternância visual. Portanto, temos três opções diferentes, permitindo que os usuários escolham suas características pessoais Então, o primeiro é o seletor otimista pessimista. O que você precisa fazer é alinhar essas duas cabeças uma em cima da outra E eu prefiro ter a feliz no topo, essa será a nossa versão otimista, e abaixo dela está a passimista Se mudarmos para o painel de camadas com o comando Control Y, também podemos ver que essas imagens já estão nomeadas Então essa é a imagem feliz. E se eu escondê-lo por baixo, há também a cara triste Então, vou ligar isso novamente e posso mover os dois juntos agora. Precisaremos de uma cópia adicional aqui, então vou usar esta ou uma cópia da que está na parte superior, e vou digitar otimista e talvez aumentar um pouco o tamanho do local Aqui, e também vou definir isso como leve ou médio, ou talvez o normal seja o melhor para nós. E então, novamente, nós apenas duplicamos esse texto. Certifique-se de que esteja alinhado com o acima e, em seguida, vou digitar pessimista Ok. Então, está praticamente pronto para começar. Então, vamos preparar o próximo seletor. Vou colocar uma em cima da outra a engrenagem e a lâmpada Esse será o seletor entre personalidade criativa e metódica, que é representada pela engrenagem Vou colocá-los um em cima do outro, alinhá-los aproximadamente na cabeça por enquanto, e depois copiarei os dois objetos de texto e os renomearei Isso vai ser criativo, e esse é metódico Ok, então eu posso ver que precisamos mover isso um pouco para a esquerda, para ter certeza de que todos se encaixam. Dentro. E então o próximo seletor é provavelmente o mais exclusivo, porque aqui não há duas imagens separadas entre as quais faremos a transição Em vez disso, tenho essas formas que usaremos junto com algumas máscaras e o recurso de animação automática Essencialmente, o que eu quero criar aqui é que vamos alternar entre essa forma de cilindro e a esfera. E eles se moverão entre esse anel, que é quase como se estivesse lá para mudar de uma forma para outra. E esse é apenas um pequeno exemplo divertido do visual interessante das direções que você pode criar no XD. Mas, por enquanto, vou colocar isso aqui de lado. E, novamente, vou copiar esses objetos de texto. Agora, aqui, só precisamos digitar firme, e o outro é flexível. Por enquanto, vou mover isso para o lado e, mais tarde, podemos alinhar melhor as coisas O que vou fazer é selecionar tudo isso. E aqui no lado direito, certifique-se de desativar a opção de redimensionamento responsivo Então, basta colocar isso no lado esquerdo, para que não tenha restrições E então, quando você pressiona a tecla shift durante o redimensionamento, isso garante que tudo permaneça do mesmo jeito que precisamos Sim, acho que isso vai funcionar melhor. E, mais tarde, podemos sempre aproximar o texto. 5. Interações para a tela do perfil: Agora que os temos prontos, vamos configurar a primeira interação. Então, esse será muito fácil. Tudo o que precisamos fazer é selecionar todos esses elementos aqui na parte superior. Então, há duas imagens uma em cima da outra e os dois objetos de texto e os transformam em um componente. A maneira mais curta de fazer isso é pressionar comando ou o controle k no teclado, e será indicado com uma caixa delimitadora verde que esse é um componente, e também é importante que, no canto superior esquerdo, se você vir uma estrela verde no campo , isso significa que esse é o Então, caso você duplique isso, então esse será o pai e os outros serão os filhos Portanto, todas as alterações feitas no componente principal serão refletidas nas instâncias, mas não vice-versa. Usaremos cópias ou instâncias para a versão do site deste aplicativo. É por isso que é importante lembrar que esse é o componente principal. Agora, a razão pela qual precisamos criar um componente em primeiro lugar é para poder adicionar estados, e temos um estado padrão criado aqui na parte superior, mas precisaremos criar um estado adicional. Vou escolher um novo estado, e vou chamá-lo de pessimista Agora, no momento, não há diferença entre os dois, e estou mudando para cá, mas o que precisaremos fazer é ir para o estado pessimista e, a partir do painel de camadas, que, novamente, você pode revelar pressionando o Comando Y no teclado, você poderá encontrar Novamente, podemos renomear isso apenas para que possamos achá-lo mais fácil. Seletor tão otimista e pessimista. Podemos até mesmo colocar o seletor inicial para que possamos encontrá-lo mais rápido Então, este pode ser aberto e, dentro dele, podemos ver todos os elementos como camadas em um grupo. E aqui podemos simplesmente esconder a fase feliz. Então, agora podemos ver a fase definida. E agora, se alternarmos entre os dois estados, podemos ver como a transição acontece. Mas para ter certeza de que está indicado ainda melhor, alterne entre os dois. Também vou mudar um pouco o texto. Então, vou clicar duas vezes aqui para selecionar otimista, e se eu definir como ousado e pessimista, vou reduzir a opacidade em até vou reduzir a opacidade em Agora está claro qual deles foi selecionado e, em seguida, podemos mudar para o estado pessimista E aí, eu vou reverter isso. Então, vou selecionar otimista, definir isso como normal e 30% de opacidade e, em seguida, fazer isso até 100% e defini-lo Agora, se alternarmos entre os estados, a formatação da imagem e do texto muda Seguindo em frente, temos que fazer exatamente a mesma coisa aqui. Então, eu vou ser um pouco mais rápido agora. Vou selecionar tudo isso junto, pressionar Commando Control K, que cria o componente Novamente, renomearei esse seletor e digitarei as duas opções criativa e metódica, e então criaremos um novo E isso vai ser o metódico. E então, no estado padrão, não precisamos ver a engrenagem, então vou esconder isso e precisamos garantir que o criativo seja selecionado e definido em negrito, enquanto o metódico pode ser reduzido em até metódico pode ser reduzido E agora podemos selecionar todo o componente, voltar ao metódico, o segundo estado em que podemos voltar a engrenagem e desligar a lâmpada E então só precisamos alterar a formatação do texto da mesma forma que antes Isso é normal, com até 30% de visibilidade, e o outro volta para 100 e volta para negrito. Mais uma vez, não se esqueça de voltar ao estado padrão e, em seguida, basta verificar a transição entre os dois. Eu acho que isso parece ótimo. E vamos mantê-lo na primeira opção criativa por enquanto. E então vamos descer para este aqui. Como eu disse, essa é a mais complicada porque aqui temos duas máscaras separadas e teremos que adicionar uma animação tanto para o cilindro quanto para a Então, vamos criar esses grupos de máscaras primeiro. Eu já criei as formas com as quais faremos as máscaras. Então, este aqui no topo será usado com cilindro e este outro será usado com a esfera. Então, vamos selecionar este e o cilindro primeiro. Eu apenas uso a tecla Shift para selecioná-los juntos. E, em seguida, subindo ao menu de objetos, podemos escolher essa opção chamada máscara com forma. Vamos comandar o Shift M a partir do teclado. E depois de fazer isso, observe que aqui no painel de camadas, agora temos um grupo de máscaras. Vou renomear esse cilindro de máscara e vamos fazer a mesma coisa com a esfera Selecionamos os dois com a tecla shift e, em seguida, com a máscara de objeto com forma e, em seguida, renomeamos a esfera da máscara Mais uma vez, vamos verificar o que alcançamos. E aqui, a esfera real atualmente não está visível. Mas quando a movermos para aquela região, que é criada com a máscara, começaremos a vê-la. Então, eu vou mostrar isso rapidamente. Se eu tiver a esfera selecionada, uma vez que ela entre nessa região, ela aparecerá. Mas vou mantê-lo aqui por enquanto. E agora que temos as máscaras no lugar, podemos mover o texto de volta aqui e alinhá-lo aos outros objetos de texto acima, e então podemos selecionar tudo isso junto e transformar isso em um componente Esse é o controle de comando K, e eu vou renomeá-lo aqui também, chamá-lo de seletor firme e flexível, e também criar o estado para ele, novo estado e digitar Primeiro, o que podemos fazer é entrar no estado padrão e configurar os objetos de texto. Portanto, isso deve estar em negrito na configuração padrão e deve ser reduzido para 30% de visibilidade. E então percebo que eu sempre clico do lado de fora, seleciono o componente inteiro novamente e posso alternar entre os estados. Porque quando você clica duas vezes para fazer alterações nos elementos, você está dentro do componente e não consegue ver a opção de estado. É por isso que eu sempre clico e seleciono novamente. Você também pode usar o painel de camadas para alternar entre os elementos dentro do componente e o próprio componente. Então, selecionei o texto flexível, redefino para 100% e, em seguida, escolhemos negrito. E esta é a última vez que temos que fazer isso. Então eu escolho normal e digito 30. Isso é ótimo. Então, agora vamos dar uma olhada nisso. Alternamos entre padrão e flexível. Funciona bem. Mas agora temos que criar aquela animação que eu mencionei. Então, aqui, em vez de apenas uma transição simples entre os elementos ou imagens, queremos que esse cilindro caia pelo anel e se transforme em uma esfera. Foi assim que criei a representação da diferença entre alguém ser firme ou flexível. Portanto, um cilindro parece muito mais firme do que uma esfera. Portanto, a esfera representa flexibilidade, enquanto o cilindro representa firmeza. Para poder criar a animação, precisaremos trabalhar com esses elementos dentro dos grupos de máscaras. Mas eles já estão configurados da maneira que deveriam estar no estado padrão. Então esse é o estado firme. Então, tudo o que precisamos fazer é ir para o estado flexível. E dentro disso, temos que mudar um pouco as coisas. Vou abrir os elementos. Então, primeiro, vamos mover o cilindro. Então, eu vou encontrar esse objeto. E uma vez selecionada, posso girá-la levemente e começar a arrastá-la para baixo e perceber que, quando ela passar por baixo do anel, ela realmente desaparecerá, então já podemos visualizar que a visibilidade será completamente zero quando chegar a essa parte, porque aquela forma que criamos originalmente, essa forma máscara é única área em que o cilindro estará visível. Então, ao movê-lo para cá, ele desaparecerá. Observe como eu ainda tento mantê-lo no centro desse anel. Então, horizontalmente, ele ainda está alinhado. Mas agora vou mudar para a outra máscara e selecionar esse grupo. Novamente, em cada grupo de máscaras, você veria a máscara na parte superior e o objeto embaixo Se você quiser achá-los mais fáceis mais tarde, recomendo nomeá-los também. Então eu chamo isso de máscara e aí está a esfera. Como na outra, tínhamos novamente a máscara e abaixo dela, tínhamos o cilindro. Então, voltando para a esfera, depois de selecioná-la, posso usar a tecla shift e soltá-la em algum lugar ao redor. E isso é tudo o que precisávamos fazer. Agora, clique fora e selecione o componente completo novamente. Eu posso alternar entre os dois. E isso é exatamente o que eu queria. No entanto, ainda não vemos uma animação, porque ela só será exibida quando adicionarmos as interações e começarmos a usar recursos como animação automática Mas antes de fazermos isso, quero ter certeza de que todos os elementos estão prontos nessa tela. 6. Buttons e fundo para a tela do perfil: Na verdade, precisaremos de um botão aqui, que nos levará para a próxima tela. Então, para esse botão, vou usar a ferramenta retangular ou quadrada E com isso, podemos simplesmente desenhar um retângulo aqui na parte inferior e manter a cor do campo em branco E, por enquanto, vou manter a borda para que possamos ver onde está nosso botão. Mas vou arrastar esses cantos rígidos para baixo, então é um botão totalmente arredondado E então, com a ferramenta de seleção, clicarei e arrastarei esse texto. Mova-o aqui e, em seguida, clique com o botão direito sobre ele e traga-o para a frente, e eu vou alinhá-lo ao botão, clicar duas vezes nele e, em seguida, digitar, obter suas respostas Também vou mudar isso para médio. Não precisa ser ousado, alinhe-o ao centro do botão e, com tudo selecionado junto, também pode alinhá-lo ao centro da tela Além desses elementos, também precisaremos de alguns detalhes coloridos no fundo. Então, vamos copiar este primeiro. Vou clicar e arrastá-lo, trazê-lo até aqui e enviá-lo para trás. Esse é um atalho que eu uso com bastante frequência. Esse é o comando Control Shift, colchete esquerdo. Se você achar isso difícil de lembrar, sempre pode clicar com o botão direito do mouse e memorizar esses atalhos Eles são extremamente úteis e funcionam da mesma forma em todos os aplicativos da Adobe. Portanto, são atalhos de arranjo universal. Então, esse elemento já está no lugar. Vamos trazer este, clicar e arrastar novamente, trazê-lo até aqui. E então eu vou arrastar isso para cima, aumentando o tamanho e provavelmente colocando-o em algum lugar por aí. Novamente, o mesmo atalho para enviá-lo para trás. E então eu vou duplicar isso novamente. Então, isso é pressionar a tecla de opção e arrastar. Mas desta vez, vou girá-lo horizontalmente com esse ícone à direita e vou ajustar levemente suas cores clicando na amostra de cores do campo, e lá podemos Então, vou selecionar essa cor e apenas reduzir sua intensidade, torná-la mais brilhante e menos saturada Algo assim, eu acho que vai funcionar. Essencialmente, eu só quero ter certeza de que há contraste suficiente entre essas formas. Assim, posso colocá-lo aqui e arrastá-lo até algum lugar próximo e , em seguida, usar o atalho para enviá-lo para trás E acho que há contraste suficiente entre essa forma e aquela. Então, isso vai funcionar. Mas só para isso, temos um pouco mais de diferença. Também vou selecionar essa cor amarela e torná-la um pouco mais brilhante desse jeito Agora, deixe-me selecionar essa outra forma, e podemos torná-la maior. Vou apenas redimensioná-lo. Então, cabe aqui um pouco melhor. Sim, acho que é uma boa composição. A propósito, você pode desenhar essas formas com a ferramenta caneta aqui no XD ou pode trazê-las do Illustrator E só para você saber como fazer isso. Se você quiser fazer alterações em uma forma, basta selecioná-la e clicar duas vezes nela, e então você pode encontrar pontos de ancoragem individuais, pontos canto e também esses pontos suaves onde você tem as alças, e você pode ajustá-los como no Illustrator quando trabalhamos com peças Voltando à nossa tela de perfil. Agora temos todos os elementos no lugar. No entanto, precisamos garantir que essas formas de fundo também estejam conectadas aos nossos três botões E a forma como podemos fazer isso funcionar é que teremos que colocá-los dentro dos componentes que criamos. Então, vamos começar com este aqui na parte inferior. Vou selecionar essa forma e, em seguida, usar o comando Control X para cortá-la Você também pode usar a opção de edição de corte, selecionar esse componente e clicar duas vezes nele, o que significa que agora estamos dentro dele. É como o isolamento no Illustrator. E então, se eu usar o Commando Control V, ele colará essa forma de volta onde estava em termos de seu lugar na tela ou na prancheta Mas em termos de arranjo, terei que enviar isso para a parte inferior ou traseira do componente. Então esse era o comando Control Shift, colchete esquerdo. E agora que está colocado lá, podemos clicar em av, selecionar esse componente novamente. E verifique se a forma permanece visível em nossos dois estados. E isso aparece em ambos, então isso é perfeito. E a razão pela qual o colocamos aqui é porque também gostaríamos de ver um pouco de animação nessas formas quando estamos alternando entre as opções. Mas isso é algo que vamos configurar mais tarde, por enquanto. Tudo o que eu quero ter certeza é que essas formas estão todas conectadas a esses togos Então, agora podemos selecionar a segunda forma e recortá-la. Clique duas vezes no componente, cole e envie para trás. Clique em v. Vamos verificar novamente também. Os dois estados funcionam bem. Então, vamos selecionar essa forma. Por fim, novamente, comande x para recortá-lo, clique duas vezes no componente, cole com o comando Control V e envie-o para trás Clique em e verifique os dois estados. Sim, funciona perfeitamente. Agora temos tudo pronto. É hora de finalmente configurar as primeiras interações e ver as coisas legais que podemos conseguir com o recurso de animação automática 7. Interações de alternância: Para adicionar interações, precisamos mudar para o segundo módulo com xD, que é chamado de protótipo Observe que há um atalho com qual você pode alternar facilmente entre eles Do design, que é alterar a opção um, podemos usar a opção de alteração dois para mudar para o protótipo Definitivamente, vale a pena lembrar porque alternaremos bastante entre esses dois Agora estamos no modo protótipo. Podemos selecionar nosso primeiro componente. E dentro disso, eu gostaria de clicar duas vezes para entrar nele. E aí, eu gostaria que você selecionasse a imagem e a outra imagem abaixo dela, ou seja, a tecla shift da camada SpanelhApp e junte, e também os objetos e Portanto, você deve ter essas quatro coisas selecionadas. O caminho por trás deles não é necessário para essa seleção. E vamos transformar isso em um grupo, que podemos conseguir pressionando o comando ou o controle G no teclado. E a razão pela qual fazemos isso é que isso criará a área à qual poderemos atribuir nossa direção. Assim, você pode ver a seleção do grupo. Temos essa pequena seta aqui à direita. E simplesmente clicando nela uma vez, já temos nossa primeira interação pronta, e o gatilho para isso será o toque. Então, basta clicar nele ou tocar nele na tela para acionar a ação, que, neste caso, será uma transição simples Temos que garantir que o destino esteja definido para o segundo estado desse componente, que é a opção pessimista Para a animação, vou manter o recurso de dissolução com o qual podemos criar uma boa transição sutil. E, mais tarde, podemos decidir como queremos fazer a flexibilização. Mas acho que relaxar pode ser bom. E a duração é, por padrão, definida para 0,3 segundos, o que eu acho muito bom. Mas já podemos testar isso pressionando o ícone play aqui no canto superior direito. Então, se eu clicar em qualquer lugar na imagem ou nos dois objetos de texto ou mesmo entre eles, já posso mudar para o segundo estado. Mas, como você pode ver, ainda não temos como voltar para a outra opção. Então, funciona de uma maneira por enquanto. Mas é uma solução fácil. Tudo o que precisamos fazer é selecionar o componente. Então, primeiro clique em um peso , selecione o componente, mude para o segundo estado e clique duas vezes. Certifique-se de que o grupo esteja destacado. Clique na pequena seta à direita e, em seguida, configuraremos isso novamente da mesma maneira. Portanto, faça a transição para o estado padrão desta vez. E o XD é muito inteligente. Eu sempre me lembro de suas últimas configurações de uso, então você não precisa se preocupar em configurá-las. E agora podemos simplesmente clicar e selecionar o componente, verificar se ele voltou ao estado padrão e depois podemos testá-lo. Então, novamente, usando o botão play à direita, agora podemos tocar nele e voltar. Portanto, temos nosso primeiro design de alternância. Neste ponto, vale a pena mencionar que, se você conectar o telefone ao computador enquanto usa um OBXC e tiver o aplicativo XD no telefone, poderá ver a visualização ao vivo do seu projeto atual, e é uma ótima maneira de realmente testar tudo e ver como é, se as áreas são grandes o suficiente para tocar ou qualquer problema com o entalhe na parte superior, ocultando alguns detalhes, como o texto Isso é algo que você quer ver aqui na pré-visualização para desktop. É mais fácil vê-lo ao vivo no seu telefone. Apenas certifique-se de baixar o aplicativo Adobe XD e entrar com os mesmos detalhes da conta da Creative Cloud. Dessa forma, o documento na nuvem em seu desktop poderá sincronizar e se conectar ao aplicativo em seu telefone. Adoro a forma como o ADB XD tem esse recurso de prototipagem ao vivo Isso realmente torna todo o processo de design muito intuitivo e divertido. Mas, para seguir em frente, não vamos esquecer essa forma no fundo desse componente. Então, eu também quero que isso mude quando os usuários estiverem tocando neste togo Então, para poder fazer isso, primeiro, no estado padrão, quero que a forma esteja onde está. Mas no estado pessimista, eu quero que ele se mova um pouco Então eu primeiro mudo o estado. Em seguida, toco duas vezes no interior. E tendo essa forma selecionada, precisamos alterar seu tamanho e suas cores. Mas isso é algo que só podemos fazer voltando ao modo de design. Então essa é a primeira opção. E dentro disso, posso facilmente alterar o tamanho dele. Talvez desça até aqui e, para mudar a cor rapidamente, pressionarei Command Shift Y ou Control Shift y, o que traz a guia de ativos do documento à esquerda. É claro que você também pode acessá-lo com este ícone aqui. E então, a partir daqui, eu vou escolher talvez essa cor. Então, um gradiente mais frio, só para combinar com aquela cor fria ou azulada na cabeça E o melhor é que isso é tudo o que precisamos fazer , porque tudo já está configurado com as interações. Todos os elementos alterados em um componente que usa essas interações também devem ser atualizados automaticamente. Então, se eu clicar e clicar novamente aqui, agora posso ver que a forma também está mudando. Mas se jogarmos isso, não será uma transição suave. É apenas um salto rápido entre os dois. Isso ocorre porque atualmente estamos usando apenas uma transição de dissolução normal que desaparece de um estado para outro No entanto, no OBX D tem o recurso mais legal chamado animação automática, que pode criar os intermediários dessas animações e transformar um estado de um objeto em dessas animações e transformar outro, que será capaz de criar uma transição suave muito boa entre os dois estados da forma, tanto as cores quanto a tanto as 8. Auto-animar e alternar interações: Para poder configurar isso, voltamos ao modo protótipo e primeiro tocamos duas vezes no primeiro estado ou estado padrão desse componente E aqui, tudo o que precisamos fazer é alterar a transição para a animação automática. Então essa é a interação que já configuramos. Estamos apenas alterando o tipo, mas ele lembrará todo o resto das configurações. Portanto, não precisamos nos preocupar com isso. Vou clicar para sair, clicar em voltar, mudar para o outro estado e lembrar que precisamos garantir que ele esteja configurado nas duas direções. Então, vou tocar duas vezes, selecionar o grupo e também alterá-lo para animação automática Agora, podemos clicar em av, selecionar o componente, configurá-lo de volta ao estado padrão e é hora de testá-lo. Então, vamos ver. Agora temos a ótima opção de animação automática, criando aquela animação ou transição suave na forma à direita Isso realmente não afetou a transição visual aqui na imagem e no texto, mas mesmo isso ficou um pouco mais sutil na minha opinião. Portanto, se você prestar muita atenção ao texto, porque estamos alternando entre dois pesos em negrito e normal, em vez de simplesmente um estado se dissolver em outro, ele realmente se transforma entre os Portanto, as letras estão aumentando gradualmente em espessura e também diminuindo gradualmente. É uma coisa muito sutil, especialmente porque nossa animação é muito rápida em 0,3 segundos, mas ainda ajuda a criar transição suave que eu queria. Agora, você precisará executar exatamente as mesmas etapas nos outros dois seletores Mas só para ter certeza de que você sabe o que precisa fazer, vou analisar isso muito rapidamente. Então, primeiro de tudo, vou selecionar esse segundo componente. Toque duas vezes e selecione todos os elementos que precisamos aqui. Usando meu painel de camadas, também me certifico de que a engrenagem atualmente oculta esteja incluída nesse grupo Vou agrupá-los e atribuir a primeira interação, que usará animação automática, mudando para metódica Veja como ele já se lembra de todo o resto das configurações Em seguida, clico, mudo para metódico, toco duas vezes adiciono a outra interação, que voltará ao estado padrão Além disso, vou selecionar essa forma aqui, alternar para o modo de design e arrastá-la para baixo. E, novamente, use uma das opções de cores salvas, talvez essa, ou podemos usar outra apenas para ter alguma variedade aqui. Agora podemos clicar , clicar em voltar, voltar ao estado padrão e já podemos testar isso. Há uma bela animação automática em ação, alternando entre as duas imagens, texto e a forma no fundo Agora, para a última alternância na tela, teremos que corrigir um problema, e isso é algo que eu deixei lá intencionalmente para mostrar o que acontece caso você se esqueça de configurar algo, e esse é um recurso chamado Portanto, para poder criar uma transição suave entre os dois estados de forma, o cilindro e a esfera, e poder ver esse interessante recurso de animação automática neles, eles também precisariam se tornar um componente dentro desse componente maior Mas só para que você possa ver como funciona sem ele. Vamos ver a prévia novamente. Então, quando trocamos, há a transição simples. E mesmo se eu mudar isso para animação automática, isso não vai melhorar Então, deixe-me mostrar isso para você. Em primeiro lugar, vou mudar para o estado flexível, toque duas vezes aqui. E no modo de design, vou apenas mudar a forma desse caminho aqui, e também vamos mudar sua cor para talvez esse gradiente, e depois mudá-lo um pouco para que não entre em conflito com o outro Vou deixar isso um pouco mais laranja. Acho que isso já começa a se destacar mais. Eu posso torná-lo um pouco mais escuro. Acho que isso vai funcionar muito bem. Então, agora, se voltarmos ao estado padrão, esse é o togo onde podemos testá-lo. Ao clicar nele, ele tem aquela transição de dissolução porque ainda não temos a opção de animação automática ativada Mas se eu clicar duas vezes aqui e voltar ao protótipo, posso alterar o tipo de transição para animação automática e manter o resto das configurações, depois volto ao componente, alterno para o estado flexível, toco duas vezes novamente e altero isso também para animação automática Agora, quando voltarmos ao estado padrão, podemos testar isso tocando nisso Você pode ver como agora temos uma animação suave no caminho em segundo plano, mas não nessas formas E isso porque isso precisaria se tornar também um componente ou componente aninhado para que funcionasse 9. Componentes aninhados: Não, não se preocupe, se isso parecer muito complicado, você não precisa criar esse componente aninhado A forma como está configurado atualmente já parece boa, então você pode pular para o próximo vídeo e continuar com o resto do design do aplicativo. No entanto, se você se sentir confiante de que já entendeu todos os conceitos até agora , deixe-me mostrar essa solução de criar esse componente aninhado Então, tudo o que precisamos fazer é voltar aos primeiros anos, garantir que vejamos o que vamos selecionar e, em seguida, precisamos entrar no modo de design. Clique duas vezes para primeiro inserir o componente. E dentro disso, temos esse grupo. Então, vou clicar duas vezes novamente. E dentro desse grupo, poderei agora selecionar o anel, o cilindro e o juramento E enquanto tenho isso selecionado, eu posso pressionar o comando control k, que vai transformar isso em um componente Mas observe que, como esse é um componente aninhado, então ele foi criado dentro de outro componente, ele não será considerado o componente principal para isso Objeto, então não está preenchido aqui no canto superior esquerdo. Então, quando eu quiser fazer algumas alterações nesse componente, XD vai gerar o componente principal fora dos meus quadros de arte. Então, deixe-me mostrar como isso funciona. Tudo o que preciso fazer é clicar com o botão direito do mouse e escolher Editar componente principal. E aí está, esse é o novo que é gerado para mim. Agora, não se preocupe em ter isso fora de suas pranchetas, porque tudo o que você atribuir a essa versão também se aplicará à outra instância na tela Então, para esta versão do componente principal, podemos adicionar agora um novo estado. Eu só chamo isso de esfera. E aqui, temos que repetir o que fizemos antes abrindo o componente e também os grupos de máscaras, selecionando o cilindro, girando-o levemente, arrastando-o para baixo e, em seguida, selecionando a esfera e arrastando-a para baixo Então esse é o nosso segundo estado para esse componente, e esse é o primeiro. E para que isso funcione e se atualize aqui nessa interação que criamos. Só precisamos voltar a isso, mudar para o estado flexível e observar como o componente aninhado ainda não está mudando Mas agora que estamos nesse estado, podemos tocar duas vezes e tocar duas vezes novamente. E aí está nosso componente aninhado, que podemos mudar para esfera E quando voltarmos para fora, podemos voltar ao estado padrão e podemos testá-lo agora, e a boa notícia é que não precisamos fazer mais nada. Portanto, a animação automática agora está funcionando totalmente na imagem de alternância, bem como nessas formas e na forma de fundo, que já estava Mas lembre-se, para que isso funcionasse, tivemos que criar esse componente aninhado E, a propósito, você pode economizar muito tempo planejando seus componentes com antecedência. Então, se criássemos esse componente antes de criar o componente maior, não seria necessário ter esse componente principal fora da tela, e as coisas teriam sido um pouco rápidas e fáceis de configurar Como eu disse, isso pode ser um pouco confuso e um pouco mais complexo Mas é muito importante entender como você trabalha com componentes em geral no XD. E à medida que você avança um pouco mais no uso dessa ferramenta, você usará cada vez mais componentes aninhados , como este Então, só para manter as coisas organizadas, vou mover esse componente, que é nosso principal componente desse elemento, na prancheta de ativos, e também vou renomeá-lo e chamá-lo Mas a boa notícia é que agora temos esse seletor de perfil totalmente funcional Então, tudo está mudando bem As animações estão lá e podemos mudar tudo independentemente um do outro E as únicas coisas que atualmente não estão conectadas ou configuradas são o menu Ajuda e o botão Mas adicionaremos isso depois de criarmos todas as telas adicionais no próximo vídeo. 10. Como criar a tela de conselhos: Em comparação com a tela do perfil, todo o resto será bastante simples Então não se preocupe, caso você ache isso um pouco complexo e confuso Acho que você achará o resto do processo muito mais simples. Então, vou voltar ao modo de design e, usando a ferramenta de prancheta, vou criar uma nova prancheta e vou renomeá-la para E para isso, primeiro de tudo, precisamos de algum texto, que vou colar aqui. Também podemos usar o recurso daqui na outra prancheta Isso é realmente o que precisamos. As metas estabelecidas podem alinhar isso em algum lugar no centro. Em seguida, também precisaremos desse ícone inicial, que eu apenas arrasto aqui mantendo pressionada a tecla alter option. Então, precisaremos do elemento montanhas e dessa imagem, desse balão de fala ou quadro de texto, e também de uma forma, que vou configurar mais tarde Mas sim, esses são todos os elementos que precisaremos no começo. No entanto, também precisaremos criar alguns elementos aqui. Em primeiro lugar, precisaremos de um pano de fundo para esse ícone apenas para torná-lo um pouco mais interessante Para isso, vou usar a ferramenta de elipse e, com isso, vou desenhar um círculo perfeito Ao manter pressionada a tecla Shift, posso ter certeza de que esse é um círculo perfeito. E vou usar as cores salvas no painel de bibliotecas que é Commando Control Shift Y, e esse amarelo é o que eu gostaria de usar para a cor do campo E eu não preciso de uma borda, então eu posso removê-la. Vou me certificar de que ele seja enviado para trás usando o atalho ou clique com o botão direito do mouse em Enviar para trás E então vamos selecionar as montanhas, e eu vou redimensioná-las um pouco Mas tenha cuidado ao redimensionar, talvez seja necessário desativar primeiro a opção de redimensionamento responsivo e depois manter pressionada a tecla Shift para garantir que os elementos desse grupo sejam mantidos no mesmo local Vou colocar isso em algum lugar por aqui e garantir que o círculo e a montanha estejam alinhados em algum lugar aqui no centro Então, podemos selecionar essa forma aqui, girá-la horizontalmente. E depois mova-o para baixo e, provavelmente, teremos que abrir mais espaço aqui. Então, basta tocar duas vezes na prancheta e arrastá-la um pouco para baixo E observe que há um ponto de corte aqui. Então esse é o tamanho original da tela. E quando você aumenta o tamanho verticalmente, isso significa que uma rolagem vertical será ativada automaticamente Agora podemos mover essa forma até aqui, aumentar seu tamanho e, em seguida selecionar a imagem e garantir que ela fique na frente. Então, traga-o para a frente. Vamos apenas aumentar o tamanho disso. Novamente, certifique-se de que a opção de redimensionamento responsivo esteja desativada e mantenha pressionada a tecla shift enquanto a redimensiona, para que isso possa aparecer em algum lugar aqui E então o balão de fala, na verdade, eu também quero estar na frente, que possa estar em algum lugar lá Agora, tudo pode subir um pouco e, em seguida, a prancheta também pode ser movida um pouco para cima. Em algum lugar por aí. Agora, há um recurso que eu gostaria você ativasse para essa forma. É a posição fixa ao rolar. Então, quando você liga isso e testa essa tela, você verá que essa forma não está se movendo para cima e para baixo, o que eu gosto bastante. Mas há outras coisas que teremos que corrigir aqui, especialmente para o menu. Mas, por enquanto, gostaria apenas de ter certeza de que temos todos os elementos necessários para a tela, e esse botão inicial deve ser um pouco menor. Então, vou redimensionar isso. E alinhe-o aqui no canto. E então precisamos também de um menu à esquerda, para o qual vou usar a ferramenta de linha. Mantendo pressionada a tecla shift, posso desenhar uma linha reta, aumentar a espessura para dois pontos, alterar a cor da borda para preto e adicionar capas redondas e, em seguida, aproximar o zoom Posso garantir que tenhamos três desses. Então, clique e arraste uma vez e depois novamente, certificando-se de que temos a mesma distância entre eles. Você pode precisar de uma forma um pouco mais espalhada como essa. E sempre que eu crio ícones, eu sempre gosto de criar uma forma vazia por trás deles, que vai ajudar a criar uma região maior na qual podemos tocar em vez de confiar apenas nessas pequenas linhas finas Então observe como eu criei essa forma aqui, mas ela será invisível. Vou desativar o preenchimento e as cores das bordas. Mas então eu seleciono tudo aqui, então as três linhas que se esvaziam formam e transformo isso em um componente pressionando o comando Control K. Todos os ícones que você usa em várias telas devem sempre ser configurados como Porque dessa forma, você pode facilmente voltar ao seu componente principal, fazer algumas alterações simples e ver as atualizações refletidas em todas as outras telas Sem falar no fato de que você só precisará criar a interação do menu uma vez, e isso também se repetirá em todas as telas. Então, isso está pronto como um componente. E eu vou fazer o mesmo com o ícone inicial. Então, mais uma vez, vou usar o retângulo, desenhar aqui e ter certeza de que está alinhado com essa outra Em seguida, desligo as cores da borda e do campo, mas me certifico de que o ícone inicial e a forma ao redor dele selecionados e, em seguida, pressiono o comando ou controle K e o transformo também em um componente. Agora, esses componentes aparecerão na área de ativos do documento e você poderá chamá-los de home e menu. 11. Como finalizar a tela de conselhos: E, finalmente, também precisamos criar uma seta aqui no lado direito, para a qual vou usar a ferramenta caneta, toque em uma. Em seguida, clique em algum lugar aqui no lado direito e, em seguida, clique novamente aqui, tente torná-lo igual em tamanho. No entanto, você sempre pode ajustar isso posteriormente. Mas, por enquanto, estou feliz com a aparência, então posso aumentar a espessura disso talvez até três ou cinco pontos. Coloque tampas redondas e juntas redondas também. A cor da borda deve ser preta, e essa é a seta que precisávamos. Vou apenas redimensionar isso um pouco. Assim como antes, para isso, vou criar uma caixa delimitadora ao redor dela apenas para facilitar a interação com esse ícone Alinhe-o um pouco mais perto e depois desligue a visibilidade, selecione-os todos juntos, selecione-os todos juntos, agrupe-os primeiro como Commando Control G e duplique-o no lado esquerdo, vire-o E agora podemos criar um componente para cada uma dessas direções. Então, o da esquerda e o da direita. Então, cada um está usando o Commando Control K, e vou chamar esse de direito e aquele era o esquerdo E, na verdade, não precisaremos da esquerda nesta primeira tela. Vamos remover isso mais tarde, mas, por enquanto, ele pode ficar lá. E agora que temos tudo pronto, podemos simplesmente duplicar essa prancheta pressionando opção Alter e arrastar com a ferramenta de seleção e, em seguida, nossa segunda prancheta será AMH. Esse é será AMH. Esse Pode alterar o texto que já está aqui. Mire alto. Podemos manter o círculo no lugar, excluir a imagem e derrubar o ativo com a opção de alteração de dardos, arrastá-lo até aqui, podemos aumentá-lo em tamanho após remover opção de redimensionamento responsivo e, mantendo pressionada a tecla shift, podemos alinhá-lo Então, podemos excluir todas essas coisas na parte inferior e, em vez disso, precisaremos dessa imagem aqui. Já podemos redimensioná-lo. E então precisamos desse texto. E eu vou usar essa forma. Basta girá-lo horizontalmente. Observe que a posição fixa ao rabiscar já está ativada Vou fazer isso maior, mandar para trás e vou aplicar essa cor nele. Quero ter certeza de que não há tangentes, como se esse balão de fala alinhado exatamente na borda dessa Então, queremos ter certeza de que há uma boa separação e um bom contraste. Isso parece perfeito. Vamos seguir em frente, criar a próxima prancheta Novamente, estou apenas duplicando isso. Esse, eu vou chamar de boost. O texto já pode mudar aqui. Digite boost yourself, pode remover os dardos e remover todos esses elementos E nesse caso, precisaremos do foguete Então eu apenas dupliquei isso, alinhei aqui no meio Precisamos dessa imagem. Precisamos da cópia e precisamos da mesma forma que usamos aqui, mas virada para o outro lado e alterada para esse gradiente Então, deixe-me ampliar um pouco mais para garantir que tudo esteja configurado corretamente. Portanto, isso pode ser maior colocado na frente e configurado em algum lugar ao redor. Eu acho que isso parece muito bom. O foguete também pode ser um pouco maior. Apenas certifique-se de desativar o redimensionamento responsivo, manter pressionada a tecla Shift e redimensioná-la um pouco Então, só sai um pouquinho desse círculo. E por último, temos mais uma tela. Novamente, basta copiar isso e renomear a prancheta real e chamá-la de share it O mesmo texto está aqui, compartilhe. Mais uma vez, podemos excluir esses elementos. E coloque o megafone em um lugar que aqui possa aumentá-lo um pouco Então precisamos dessa forma, aumente-a em tamanho. Certifique-se de que a posição fixa ao rolar esteja ativada. Então, precisamos que essa imagem também aumente em tamanho e, em seguida, o último quadro de texto. Então, agora estamos nos aproximando disso. Podemos alinhar as coisas novamente, garantir que a imagem esteja na parte superior, mas não cubra o texto no quadro de texto, e essa forma pode ser talvez um pouco mais larga e simplesmente recortada do lado de fora desta forma assim que foi rápido e fácil configurar essas telas adicionais. Obviamente, ter todos os recursos visuais e a cópia prontos nos economizou muito tempo. Mas no próximo vídeo, configuraremos algumas interações divertidas para essas imagens, e também a interação para poder passar da tela de perfil para as telas de conselhos e também para poder se mover entre essas telas. 12. Como configurar animações: Vamos começar criando a primeira interação nessa tela de metas. Primeiro, gostaria que você selecionasse a forma no fundo e a imagem da montanha e a transformasse em um componente. Esse é o Commando Control K. Agora podemos criar um novo estado para isso clicando no sinal de mais, e o novo estado pode ser renomeado ou apenas mantê-lo como estado padrão dois Mas o mais importante é que precisamos clicar duas vezes dentro dela para poder selecionar a montanha. E então, pressionando Commando Control Y nas camadas, poderemos abrir esse grupo E você notará que, na verdade, há mais elementos aqui. Novamente, isso é algo que eu preparei no photoshop Embora fosse uma imagem renderizada achatada, separei a bandeira e até criei duas versões dela Temos uma versão roxa e uma versão verde, todas configuradas em camadas separadas. Então, nesse novo estado, o que eu quero é a bandeira roxa e a verde sejam levantadas. Então, eu apenas os selecionei e, usando o shiftpero, posso arrastá-lo para cima até que ele saia do círculo, mas ainda apareça atrás da montanha, então você não quer levantá-lo muito alto até Mas, sim, acho que vou comprá-lo em algum lugar por aqui. E então, quando os dois estiverem levantados, certifique-se de desligar a visibilidade da bandeira roxa. É importante que as duas bandeiras sejam levantadas primeiro e somente depois desligue a visibilidade, pois isso é necessário para que a animação automática suave funcione Mas agora podemos simplesmente clicar fora, selecionar esse componente e voltar ao estado padrão e alternar entre esses dois estados, apenas verificando sua aparência. Estou feliz com isso. Mas para que isso realmente funcione. Voltando ao estado padrão, posso alternar para o modo de protótipo e clicar em uma dessas pequenas setas aqui e mantê-la ativada. Animar automaticamente para o estado dois Em seguida, mudamos para o estado dois. E também atribua outra interação, que voltará ao estado padrão com as mesmas configurações. Então, agora vamos voltar ao estado padrão e pressionar o comando control enter para pular rapidamente para a visualização prévia, onde já podemos testar isso, e ele vai nas duas direções Quão legal é isso? Então, vamos fazer a mesma coisa aqui com as outras imagens. Mais uma vez, começo selecionando-os e transformando-os em um componente. Voltando ao modo de design, podemos adicionar o novo estado a ele. E depois que esse novo estado for criado, podemos tocar duas vezes. Primeiro, vamos selecionar dentro desse grupo o quadro, e podemos simplesmente redimensioná-lo Novamente, mantendo pressionada a tecla shift para garantir que não estraguemos as proporções Além disso, vou girá-lo um pouco. E então esse dardo também pode ser girado e depois descer para o centro dessa forma Então, agora, se clicarmos fora, podemos verificar o estado padrão e o outro estado. Acho que parece muito bom. E agora, mudando para o modo de protótipo, adicionamos a animação automática ao estado dois E para o estado dois, também queremos adicionar a animação voltando ao estado padrão. Agora podemos testar isso e funciona perfeitamente. Vamos fazer a mesma coisa na terceira tela de conselhos. Mais uma vez, selecionamos todos esses elementos e, no modo de design, eu os transformarei em um componente adicionarei o novo estado a ele. E no novo estado, quero que o foguete saia um pouco da estrutura e talvez gire, e a fumaça também possa girar e sair de lá ou talvez um pouco para lá O foguete também pode ser um pouco maior. Então parece que está vindo em nossa direção. Então, vamos ver isso rapidamente antes e depois. Sim, acho que funciona bem. E então, mudando para o modo de protótipo, atribuímos a primeira interação para mudar para o estado dois Então, do estado dois, queremos poder voltar ao estado padrão e, novamente, testá-lo rapidamente. Aí está. Efeito. E então, por último, mas não menos importante, gostaríamos de transformá-los também em um componente. No entanto, aqui, eu também gostaria adicionar alguns elementos usando o pano. Então, tudo que você precisa fazer é desenhar uma pequena forma como essa, usando o pano. Então é como um pequeno raio. Mas não precisamos da cor da borda. Em vez disso, queremos usar uma cor vermelha. Estou usando a ferramenta hidroper e amostrando uma cor do Então, essa será a forma que precisaremos. E vamos duplicar isso uma vez e outra vez. O do meio, podemos virar verticalmente, e então podemos girá-los, talvez redimensioná-los um pouco, talvez redimensioná-los um pouco, e então eu quero Aproximadamente onde eles vão acabar. Mas agora, vou selecionar todos os três e, usando o colchete esquerdo do controle de comando, vou movê-los até que fiquem atrás do Então, eles estão na frente da forma, aquele círculo amarelo, mas atrás do megafone, e muito bem e Agora, com tudo isso selecionado em conjunto, podemos criar nosso componente e adicionar um novo estado para ele. E nesse novo estado, eu gostaria de mudar um pouco as coisas. Então, primeiro de tudo, eu gostaria que essa imagem aumentasse de tamanho, talvez também girasse. E depois selecionar essas peças. Podemos simplesmente retirá-los e talvez aumentar um pouco seu tamanho. Então, vamos voltar ao estado padrão e alternar entre os dois estados, podemos ver uma prévia rápida de como isso vai ficar. Mas para adicionar o recurso de animação automática, mudamos para o protótipo clicamos neste estado de seleção dois E então, para o estado dois, queremos adicionar outra interação, e o destino dessa vez é o estado padrão. Mais uma vez, se fizermos uma prévia disso, funcionará perfeitamente. 13. Interações entre telas: Agora é hora de configurar as interações entre essas telas e, na verdade, não precisarei de uma seta nesse lado. Além disso, eu não preciso dessa seta no lado esquerdo. Então, basta pressionar o espaço para trás enquanto os seleciono, e podemos começar com esta seta. No modo protótipo, clicamos e arrastamos a seta azul para configurar uma interação com o destino na segunda prancheta E para o tipo de animação aqui, eu gostaria de usar a transição. E para a animação, eu gostaria de usar push left em vez de dissolver. A duração e a flexibilização podem ser as mesmas por padrão. Mais uma vez, se eu apenas visualizá-lo, acho que é rápido o suficiente e acho que funciona bem. Agora que temos essa configuração, podemos continuar com a outra seta para a direita criar a interação para a próxima tela. Observe que ele usará as mesmas configurações novamente. Assim, podemos configurar rapidamente esse e mover a interação para a última tela. Então, estou apenas verificando se todos estão indo na direção certa. E então vamos começar com este. Então essa é a transição para trás. A partir daqui, queremos ir para lá. E em vez de empurrar para a esquerda, queremos usar o push para a direita, as mesmas configurações se aplicam. Então, este pode ir lá novamente, com as mesmas configurações. E, finalmente, este pode ir lá com as mesmas configurações. Agora, se testarmos isso, você pode ver como podemos alternar entre as quatro telas de aconselhamento. Então isso funciona perfeitamente. E cada uma dessas animações também podemos testar Eles ainda funcionam do jeito que queríamos. E, finalmente, precisamos também garantir que, na tela do perfil, possamos entrar na primeira tela de conselhos. Então, primeiro de tudo, certifique-se ter o botão e o texto selecionados juntos. Você pode transformá-lo em um grupo ou componente. Isso é Commando Control G, se você quiser transformá-lo em um grupo ou Commando Control K, se você quiser transformá-lo em um componente A principal diferença entre os dois é que, se você criar um componente, sempre poderá atribuir estados a ele ou à animação, além de aplicar uma interação. Então, isso realmente não importa aqui, porque eu não vou fazer nenhuma animação no botão, mas vou criar a interação rapidamente na primeira tela de conselhos. E neste caso, eu quero usar push left. Então, vamos testar esse também. Ao clicar em qualquer uma dessas opções, ainda podemos alterar os botões E quando estivermos satisfeitos com a seleção, clicando em obter suas respostas, entraremos na primeira tela de conselhos que criamos. E como temos todas as nossas pranchetas prontas, vamos também conectar a tela de boas-vindas Então, tendo este selecionado, este é o que queremos configurar como nossa tela inicial. Então, clicando nesse pequeno ícone aqui no modo protótipo, configuraremos nosso primeiro fluxo Este pode ser renomeado para app. E, a partir daqui, quero criar um gatilho de tempo para a próxima tela. Então, vou arrastar essa flecha até lá. E em vez de tocar, vou definir isso como horário e talvez configurá-lo para 3 segundos. E a animação, dessa vez, pode ser configurada para aumentar, e talvez a duração possa ser definida para 1 segundo. Então, vamos ver isso, se testarmos isso depois de 3 segundos, ele vai cair. Acho que a facilidade de saída deve ser alterada para facilitar a entrada. Vamos testar isso novamente. Sim, isso é muito melhor. Mas a duração pode ser talvez ainda maior 1,5 segundos, mais um teste. Sim, isso é muito melhor e mais suave. Agora podemos ver todos os quadros de arte ou todas as telas que criamos. E no próximo vídeo, adicionaremos todas as opções de navegação adicionais como o menu principal, conectaremos o ícone inicial e também adicionaremos a opção de ajuda para a tela do perfil 14. Menus adesivos: A primeira coisa que precisamos corrigir é garantir que nosso menu esteja sempre visível. Deixe-me mostrar o que quero dizer. Se eu visualizar isso e rolar, o menu desaparecerá na parte superior, então será difícil alternar sem precisar rolar para cima novamente. Então, eu quero manter esse menu sempre visível aqui, e normalmente chamamos isso de menu fixo. E para poder fazer isso, primeiro lugar, no modo de design, vou desenhar um retângulo atrás desses elementos Vou me certificar de que fique até a parte de trás por enquanto. Arraste isso para cima, talvez em algum lugar por aqui. E, a propósito, estou mantendo o texto aqui porque sei que há um entalhe no telefone, então não deveria estar se sobrepondo Mas para essa forma, não quero usar uma borda, apenas um campo branco. Mas ative essa opção chamada desfoque de fundo. Podemos refinar as configurações para isso posteriormente. Mas, por enquanto, eu também gostaria de selecionar tudo aqui no topo e agrupá-los com o comando Control G. E quando eles se transformarem em um grupo, podemos fixar sua posição ao rolar Isso o transforma em um menu fixo. Então, agora, se ele testar isso, quando estou rolando, você pode ver que todos eles estão lá no topo, e temos aquele recurso interessante de desfoque de fundo configurado naquele ângulo Se quisermos, podemos sempre voltar, clicar duas vezes nele e ajustar as configurações. Eu poderia reduzir a exposição e talvez aumentar a opacidade da forma em si para 20% Então, vamos testar isso. Sim, acho que parece um pouco melhor. Talvez a exposição possa ser aumentada. Vamos dar uma olhada novamente. Sim, um pouco melhor. Eu acho que isso parece bom. E, na verdade, precisamos fazer a mesma coisa nessas outras telas. Mas, para economizar tempo, vou configurá-los, na verdade, quando tivermos esse primeiro menu totalmente funcional. Então, na verdade, vou deletar esses ventiladores. Então, todos esses elementos que preparamos aqui, podemos simplesmente retroceder e excluí-los. Nós sabemos disso. Nós os adicionaremos lá, mas vamos voltar à primeira instância e mudar para o modo protótipo Clicando duas vezes sobre isso. Eu posso selecionar o ícone inicial. E isso será vinculado à tela do perfil. E nesse caso, eu só gostaria de ter uma transição normal de dissolução, que é como um desvanecimento Facilitar e sair para relaxar é bom. Mas a duração talvez possa ser definida para 0,6 segundos. Então, podemos testar isso, ver como é. Eu acho que isso é bom. Pode ser um pouco lento demais, então podemos voltar aqui novamente, selecionar isso e descer para 0,4 segundos. Vamos fazer isso mais uma vez. Sim. Eu acho que está tudo bem. Mas esse foi o mais fácil de configurar. Para o menu real, também precisamos criar um quadro de arte separado que hospedará nossos itens de menu. Então, será como um menu suspenso ou pop-up. E para isso, vou criar essa nova prancheta logo acima dessas outras pranchetas Então, no modo de design, mudando para a ferramenta de prancheta, primeiro vou criar uma prancheta, mas ela não precisa ser uma prancheta de altura total, então pode ser um pouco mais curta Assim. E eu vou chamar esse menu, e podemos ampliar um pouco mais. E primeiro de tudo, vou criar uma forma aqui, que será o menu em si. Podemos adicionar cantos arredondados. Mas não precisamos de cantos arredondados em todos os lados. Então, aqui nas opções, podemos clicar nesse pequeno togo e encontrar o raio de todos os cantos Quero colocar o canto superior esquerdo e direito em zero. Então, esses são os primeiros e os segundos, precisam ser definidos como zero. Há uma indicação sutil de qual canto você está afetando ao selecionar um número. Então, aquela pequena linha azul indica que você está trabalhando com o canto superior esquerdo ou superior direito. Ou você também pode esperar um pouco e receberá a dica da ferramenta informando qual é qual. Mas agora que temos a configuração, removerei a cor da borda. Vou manter a cor do campo ativada. Mas depois adicionarei uma sombra projetada e aumentarei a visibilidade ou opacidade dela clicando na amostra e arrastando-a cima, E então o desfoque, eu também vou definir para 15, então ele cria uma borda um pouco mais suave como Talvez 50% seja um pouco severo demais. Então, vamos reduzi-lo para 30%. Sim, isso é um pouco mais sutil. Acho que parece melhor. Agora, vou copiar o texto daqui. Então, precisamos de todos os quatro, duplique-os e alinhe-os todos à esquerda E então vamos mover isso para baixo. Mova essa para cima. Portanto, a ordem deve ser definir suas metas primeiro, depois mirar alto, depois se impulsionar e, finalmente, compartilhá-las. Então, depois de fazer essa ordem, posso colocar o texto aqui e talvez possamos reduzir o tamanho um pouco para 18 pontos. Acho que vai se encaixar melhor. Mais uma vez, deixei uma linha e, em seguida, podemos simplesmente alinhá-la dentro dessa lista suspensa. E só precisamos de um ícone X aqui, que já preparamos nos ativos. Eu posso simplesmente arrastar isso para baixo novamente aqui. Configure-o em algum lugar lá, e esse x pode ser um componente. Então eu pressiono o comando ou controle K, mas o menu inteiro também deve ser um componente. Então, eu seleciono tudo junto. E, novamente, pressione o comando ou controle K. Então, neste caso , como criamos primeiro um componente para um elemento que estará dentro do componente principal, o aninhamento foi configurado na ordem correta Lembre-se de que, quando estávamos com dificuldades para criar esse componente aninhado antes, você pode ver que a ordem correta é sempre começar a criar um componente primeiro, que depois será agrupado em outro componente E você pode ter até mesmo vários níveis de componentes aninhados uns nos outros E contanto que você comece com o menor elemento e depois vá avançando, criando os componentes adicionais, não terá problemas em configurá-los adequadamente 15. Sobreposição de menu: Agora que temos esse menu, precisamos conectá-lo às outras telas. Então, vamos mudar para o modo de protótipo. E aqui, vou clicar duas vezes até poder selecionar o ícone do menu e arrastá-lo para esta prancheta Por padrão, essa será uma transição normal, mas gostaríamos de alterá-la para sobreposição, que transformará essa linha sólida em linha tracejada É assim que o XD indica o que estamos fazendo. E também observe que temos uma prévia de onde essa sobreposição vai aparecer E isso, na verdade, é algo que podemos arrastar até aqui. É aí que eu quero que apareça. E a animação, eu gostaria de ser deslizada para baixo. Podemos entrar e sair com facilidade. Talvez 0,4 segundos seja bom, e podemos apenas testar isso. Vamos ver como isso funciona. Se clicarmos nele, o menu descerá. Se eu clicar em algum lugar externo, ele desaparece novamente, desce, desaparece e, a propósito, é um comportamento padrão no Sempre que você clica em AA em um elemento de sobreposição, a animação original é revertida automaticamente No entanto, eu sempre gosto de ter um para fechá-lo, assim como este aqui. E o bom é que você não precisa atribuir nenhuma interação a isso, porque enquanto não houver nenhum elemento ativo aqui, ao clicar nele, também fecharemos esse menu, assim como clicaremos em qualquer outro lugar, além dos elementos ativos, que configuraremos nesses objetos de texto. Então, para fazer isso, tudo que eu tenho que fazer é voltar ao nosso menu. Clique duas vezes, selecione o primeiro texto e arraste-o para essa tela. Mas desta vez, você precisa ter o cuidado de voltar e alterar a opção de sobreposição para transição Portanto, a sobreposição só é necessária para abrir esse menu flutuante Mas, a partir desse menu flutuante, você gostaria de fazer a transição para essas telas com uma transição normal, não com uma sobreposição motivo pelo qual a sobreposição estava surgindo por padrão é porque essa foi a última ação ou tipo de ação usada Portanto, certifique-se de não esquecer de mudar isso para a transição. E então, com o menu, eu recomendo usar dissolver, e você provavelmente pode usar como fora e talvez 0,3 segundos. Então, vamos configurar o mesmo para as outras três telas. Não precisamos mudar nada aqui. Agora, novamente, ele lembra as últimas configurações e, desta vez, não é uma sobreposição É a transição, então a opção correta. Então, para compartilhar, temos o último lá. Agora, esse menu está totalmente conectado, então podemos testá-lo. Clicamos aqui, descemos, pulamos para o alto e podemos voltar aqui novamente, selecionar inicializar você mesmo, ir para o lugar certo e depois compartilhar também. E, mais uma vez, também podemos navegar entre eles com facilidade. Mas agora também podemos adicionar esse menu fixo em todas essas telas Então, podemos simplesmente duplicar isso. A maneira mais rápida de fazer isso seria pressionar o comando ou o controle C para copiar e, em seguida, selecionar a próxima prancheta Pressione Commando Control V, colamos exatamente no mesmo lugar, a mesma coisa aqui, a mesma coisa ali E observe como ele já tem tudo conectado. Então, o ícone inicial volta para a tela do perfil. O menu exibe essa sobreposição, e a única coisa que precisaremos mudar são os títulos Então, vamos clicar duas vezes e digitar um h. Para este, eu quero usar o boost yourself. E aqui, digite compartilhe e pronto. Mais uma vez, podemos testar isso. Você pode usar o menu para ir para a próxima tela. Podemos rolar para cima e para baixo para testar nosso menu fixo na parte superior com esse recurso de desfoque de fundo Também temos nossas animações. O menu funciona aqui como antes. Podemos pular para a próxima tela, rolar para cima e para baixo funciona, a animação funciona. As flechas também devem funcionar. Mas vamos testar o menu, compartilhá-lo no lugar certo. A rolagem também funciona, e o ícone inicial também deve funcionar em qualquer uma dessas telas 16. Configuração da tela do menu de ajuda: Como estamos de volta à tela de perfil, não vamos esquecer de configurar o menu Ajuda, que funcionará de forma muito semelhante a esse outro menu que criamos. Vou apenas diminuir o zoom novamente, tirar os ativos do caminho e criar uma nova prancheta no modo de design, usando a ferramenta de prancheta Acabei de criar essa nova prancheta e vou renomeá-la e chamá-la Pode colocar isso em algum lugar por aqui. E agora podemos simplesmente reutilizar esse outro elemento. De dentro desse componente, criamos um duplo clique, selecionamos essa forma, copiamos e colamos aqui, vamos apenas girá-la, arrastá-la para cima e colocá-la neste canto Provavelmente teremos que torná-lo mais longo e, em seguida, podemos simplesmente copiar esse componente x e colocá-lo no canto superior direito. Novamente, não precisaremos realmente vincular isso. Apenas certifique-se de que está lá e, em seguida, copiaremos esse texto que eu preparei e simplesmente o colaremos aqui, talvez precisemos de um pouco mais de espaço para isso. E sim, acho que parece bom. Agora posso simplesmente arrastar isso um pouco para cima. E isso é tudo o que precisávamos para essa outra sobreposição que criamos Mas é importante que essa prancheta desative a cor do campo no plano de fundo Caso contrário, vai encobrir completamente o que está por baixo Também há algo que, para o menu, é importante garantir que você faça. Mas, por padrão, o XD removerá o arquivo assim que você criar a interação de sobreposição Para o qual, se você se lembra, só são necessárias duas coisas. Antes de tudo, certifique-se de que, nessa nova prancheta, todos esses elementos estejam agrupados em um componente Esse é o comando Control K. E então, dentro da opção de protótipo, quando selecionamos o ponto de interrogação, queremos ter certeza de que ele está conectado a No entanto, se você se lembra, sempre que eu uso ícones, sempre gosto de criar uma caixa delimitadora maior ao redor deles Então, isso é apenas algo que eu não quero esquecer de adicionar aqui também. Vou apenas desenhar essa forma, deixando muito mais espaço para poder tocar nela , porque não há nada mais irritante do que ter que tocar algumas vezes em algum lugar para poder iniciar a interação Então, vou desligar a borda e o preenchimento, mas selecionar tudo isso junto e transformar isso em um componente E agora que é um componente, posso voltar ao protótipo, conectá-lo a essa nova prancheta e configurá-la também como uma transição de sobreposição Desta vez, a animação pode ser deslizada para a esquerda porque vem da direita, então ela vai deslizar para a esquerda. E o alinhamento disso já está bom. Como eu uso exatamente o mesmo tamanho de prancheta, não precisei fazer nenhum posicionamento manual aqui E em vez de apenas relaxar, acho que entrar e sair é melhor , talvez 0,5 segundos para isso. Então, vamos testar isso. Se eu clicar na ajuda, ela entra, e não importa onde eu clique, ela vai escondê-la. Então eu posso clicar nele novamente, clicar em qualquer outro lugar, e assim por diante. E, a propósito, se você quiser que os detalhes do fundo fiquem um pouco desfocados, você sempre pode adicionar outro retângulo aqui na prancheta de ajuda Sem a borda, basta sentir a cor. Verifique se está totalmente definido em segundo plano e, em seguida, basta clicar no desfoque do fundo Então, agora, se voltarmos aqui, quando eu fizer isso, vai ter aquele borrão aparecendo lá O único problema é que ele também desliza nesse desfoque de fundo em vez de fazer uma boa transição Então, vamos ver antes e depois. E, claro, existem maneiras de corrigir isso, mas não quero complicar demais as coisas Então, vou excluir essa forma e acho que funciona bem do jeito que está. E a boa notícia é que o aplicativo está funcionando totalmente agora. Todos os elementos estão e todas as navegações estão prontas, para que possamos fazer um teste final partir da tela de boas-vindas Temos nossa animação interacional cronometrada. Temos nossos togos com os quais podemos brincar. E então também podemos verificar nossa ajuda. Em seguida, vá até as respostas, role para cima e para baixo, pule por elas. Confira as animações aqui também. Volte para a página inicial ou volte para as respostas e use o menu. E parece que tudo está funcionando como deveria. Então, agora que o aplicativo está completo, no próximo vídeo, vamos transformá-lo em um protótipo de site de página única 17. Web design: A boa notícia é que montar este site será muito mais rápido do que criar o aplicativo. Como já temos todos os elementos projetados diretamente aqui no XD, podemos rapidamente reutilizar todos eles nesse novo formato, começaremos criando uma nova prancheta E desta vez, vou usar o b 12 80, e podemos colocar isso aqui e simplesmente renomeá-lo também para website E eu já vou estendê-lo porque sei que precisamos de mais espaço abaixo dele, e esse ponto de corte marca nossa primeira dobra no site, que é a que será visível pela primeira vez na maioria das telas. Agora, vamos começar copiando as coisas. Então, vou selecionar tudo nesta tela de boas-vindas, clicar e arrastar, colocando-os aqui. E então eu vou mudar as coisas com bastante rapidez porque eu realmente não preciso mais explicar as etapas. Acredito que fará sentido o que estou fazendo. Então, estou redimensionando para que o crescimento seja nosso cardápio. Isso faz parte do menu. A imagem pode estar aqui à direita, talvez aumentada em tamanho. Um pouco. Assim. Nesse caso, o texto pode ser alinhado à direita e aumentado um pouco de tamanho Se você tiver coisas que se sobreponham, como neste caso, seria difícil selecionar o texto Em vez de mover esta imagem av, você pode simplesmente abrir o painel de camadas. Dessa forma, você pode selecionar rapidamente as coisas que estão escondidas e, em seguida, basta usar as teclas de seta do teclado, mantendo pressionada a tecla Shift , você também pode movê-las mais rápido, e acho que será um bom posicionamento para o texto. Portanto, está bem alinhado com a cabeça. Então, vamos duplicar esse texto aqui, e eu vou digitar metas Vou definir isso em maiúsculas com esse ícone, alterá-lo para normal e também reduzir o tamanho arrastando-o Na verdade, pode ser melhor no meio, e eu o alinho no centro do texto, e então podemos simplesmente duplicar isso e começar a digitar um alto novamente, duplicar o aumento de digitação e depois duplicar o aumento de digitação e E, a propósito, é aqui que a configuração de um estilo de personagem seria útil. Portanto, se entrarmos nas bibliotecas ou nos ativos do documento, selecionando um ou todos eles, podemos tocar no sinal de mais aqui nos estilos de caracteres. E agora ele o salvou. Dessa forma, será muito mais fácil fazer alterações em todos esses quatro elementos ao mesmo tempo. Simplesmente acessando o estilo do personagem, escolha editar. Se eu digitar, digamos, 35 para o tamanho, você verá imediatamente que todos eles serão atualizados. Portanto, esse é um recurso muito útil, eu recomendo usar estilos de caracteres Assim como nos outros aplicativos DOB , você pode economizar muito tempo E vou usar uma pequena linha entre elas para separá-las. Então, deixe-me traçar essa linha. Eu configurei isso para capas redondas brancas, e o tamanho talvez seja de três pontos, e então apenas arrasto um pouco para cima e dupliquei Então, queremos outro lá e outro lá. Ok, então esse é o nosso menu. Isso também pode ser um pouco maior. E, na verdade, a coisa toda pode subir um pouco mais. Basta selecioná-los juntos. Movendo-os para cima. Então, vamos trazer os elementos adicionais de que precisamos. Então, precisamos desse texto de descrição de si mesmo, que podemos colocar aqui, e então todos esses componentes, podemos copiar e colar nesta prancheta Mas não precisaremos das formas nesse caso, então podemos separá-las primeiro e removê-las rapidamente. Clique duas vezes em Excluir, clique duas vezes em Excluir, clique duas vezes em Excluir. E você não precisa se preocupar em estragar suas outras versões porque elas são os componentes principais ou componentes principais E esses são apenas exemplos deles. Portanto, essas substituições que fazemos aqui não afetarão as originais Mesmo assim, caso façamos alterações na original e isso afete, digamos, o texto ou essas imagens, elas ainda estarão conectadas e atualizadas nesta versão do site. Então, vou colocar essas três opções aqui, e já podemos testar isso com o comando Control Enter, e vemos as formas aparecendo no segundo estado, então isso é algo que também precisamos corrigir Vou apenas selecionar essas opções para o segundo estado. E clique duas vezes em excluir, excluir, excluir. Em seguida, certifique-se de que eles sejam redefinidos para o estado padrão. Então, mais uma vez, podemos verificar se funciona ou não. Sim, isso funciona, isso também funciona. Tudo bem. Perfeito. Então, a primeira dobra está pronta. Agora, trata-se de copiar o resto. Então, vamos começar com eles. Vou copiá-los, cole-os aqui. A forma que não precisaremos por enquanto. Esse componente pode estar aqui. O texto pode estar no meio e a imagem à direita. Também podemos copiar o texto do seu conjunto de metas, que nesse caso, como temos uma tela maior, podemos tornar maior, novamente, outro que vale a pena salvar como estilo de personagem. E, a propósito, vale a pena nomear seus estilos de personagens também, para que você saiba onde usá-los. Então, vou renomear isso e chamá-lo de seções do site. Enquanto este outro é o menu do site. Por isso, definimos suas metas. Temos nossa imagem lá. E, nesse caso, podemos clicar duas vezes em e excluir esse triângulo do balão de fala Porque aqui, eu só quero o texto sozinho. E talvez essa imagem possa ser maior mantendo pressionada a tecla Shift. Vou apenas redimensioná-lo. E então vamos repetir a mesma coisa para essas outras telas. Então, vou acelerar um pouco as coisas antes concluirmos com alguns retoques finais no site 18. Como adicionar interações ao design de sites: Então essa é a versão final do site. Como você pode ver, eu criei um padrão alternativo aqui. Portanto, temos as imagens alternando com os quadros de texto. Então, temos um ziguezague criado apenas para torná-lo um pouco mais dinâmico Além disso, também temos essas formas, uma à esquerda e outra à direita, reutilizadas e reutilizadas a partir do aplicativo E se já testarmos esta página, também devemos ter essas pequenas interações funcionando aqui. que, no caso de um site, pode ser um efeito de paralaxe, algo que podemos comunicar facilmente com o desenvolvedor e o cliente Mas, para adicionar algumas interações adicionais aqui, gostaria de garantir que o menu permaneça fixo, mesma forma que fizemos no aplicativo Mas para isso, primeiro, terei que criar outro retângulo em algum lugar por aí Certifique-se de que ele use o mesmo gradiente que está por trás dele. Vou apenas mudar a cor do campo para gradiente linear E então vou amostrar essas cores, então precisamos dessa cor à esquerda e precisamos dessa cor à direita. E só precisamos ter certeza de que os dois limites de gradiente também estejam alinhados Então, agora ele desapareceu quase completamente. Mas agora que isso está pronto, podemos simplesmente selecionar tudo aqui na parte superior exceto aquela forma grande no fundo. Basta clicar com a tecla Shift e clicar nele. E agrupando-os com o Commando Control G, podemos garantir que isso seja corrigido durante Então, agora, se eu vier aqui, quando eu estiver rolando para baixo, você pode ver que está lá no topo. E a única coisa que temos que ter certeza que fazemos é que ela esteja totalmente colocada no topo. Então, todo o resto está por baixo disso. Então, tendo esses grupos selecionados, apenas nos certificamos de trazer isso para a frente. Então, agora testando isso, funcionará perfeitamente. E isso é, aliás, algo que você também precisa garantir com esses menus. Então, é claro, eles também terão que estar acima de todo o resto. Especialmente se você planeja aumentar o comprimento dessas telas, o menu deve estar sempre acima de todo o resto. Mas, como criamos nosso menu, também devemos adicionar algumas interações nele. Então, vamos para a opção de protótipo. Clique duas vezes dentro desse grupo e, começando com o logotipo e o nome do site, podemos simplesmente pegar essa pequena seta e arrastá-la para essa forma grande aqui no fundo. Também podemos simplesmente arrastá-lo aqui para garantir que a forma seja selecionada. E então observe como o XD já entendeu que queremos rolar até isso com um toque. Isso é importante porque temos um menu fixo. Então, se eu descer, digamos que aqui, uma vez que eu clico nele, ele simplesmente volta para cima imediatamente. E agora, para essas outras opções aqui, faremos o mesmo, então eu seleciono metas e desço para atribuí-las a esse item. Mais uma vez, vamos testar isso. E vai até lá, mas o problema é que o menu fixo está encobrindo esse texto Portanto, temos que ter certeza de que há algo que crie um deslocamento em relação a esse texto E, da mesma forma que fiz antes em torno de ícones, precisamos criar uma área segura, que criará esse deslocamento Então, vou voltar ao modo de design, usar a ferramenta retangular E basta desenhar algo assim, certifique-se de que fique na parte de trás e não tenha bordas e cores de toque. Mas, selecionando isso junto com o texto, podemos criar um grupo. E a mesma coisa que vou usar para os outros também. Então, vou copiar essa forma movê-la para baixo, certificando-me de que haja espaço suficiente acima dela. E, novamente, vamos manter a borda ativada por enquanto, para que eu possa ver essas formas. Tem outro lá. importa o quão largo seja. O que importa é a quantidade de espaço que mantemos acima dele. Eu acho que isso vai funcionar. Então, vamos configurar tudo isso como grupos, e eu vou remover a cor do traçado mais tarde. Portanto, só precisamos ter certeza de que essa opção de compartilhamento também está selecionada e agrupada Então, agora, no modo protótipo, podemos conectar as coisas. Então, para metas, queremos rolar até esse grupo aqui, para uma alta, queremos rolar mais para baixo até esse outro grupo. E antes de prosseguir, vou testar isso. Então, vamos ver as metas. Teremos que aumentar a altura desse retângulo, uma altura A mesma coisa acontece aqui. E o alto na verdade, agora acabou ficando no topo do menu porque criamos aquele grupo que chegou ao topo. Então, vamos corrigir isso já agora. Então eu seleciono o menu adesivo, coloco até a frente, que fixa o alinhamento, e então podemos selecionar essas formas, clicar duas vezes e depois no modo de design Posso apenas estendê-lo um pouco mais, e o mesmo que precisaremos nesses outros. Nós podemos estender e ampliar. E já que estamos aqui, vamos também desativar a borda dessas formas. Eu apenas clico duas vezes a cada vez para entrar nos grupos. E agora podemos voltar ao menu e, no modo protótipo, seleciono a palavra boost Desça para impulsionar seu grupo e, em seguida, compartilhar, desça até lá. Então, vamos testar isso mais uma vez. Aumenta o alinhamento perfeito. Isso também é perfeito. Impulsione a si mesmo e compartilhe. Não há mais conteúdo aqui na parte inferior, então ele não pode rolar mais do que isso. Mas também temos nossa opção de casa , com a qual podemos voltar ao topo. E foi assim que foi rápido criar um protótipo de site totalmente funcional, reaproveitando todos os elementos que usamos para E nos próximos vídeos, criaremos outra versão do protótipo do site mostrando a rolagem paralaxe 19. Rolagem em paralaxe: E, como você pode ver, eu sempre gosto de começar com a versão estática final dessa única página de rolagem que eu posso duplicar e começar a adicionar todos os movimentos e alterações necessários para o efeito de rolagem paralaxe alterações necessários para o efeito de rolagem paralaxe Infelizmente, atualmente, no NDBXD, a criação desses efeitos de paralaxe só é possível com a criação dessas pranchetas duplicadas Mas, no futuro, eles poderão adicionar alguns recursos que facilitarão esse fluxo de trabalho. Mas, por enquanto, como eu disse, teremos que criar pranchetas duplicadas Mas primeiro, deixe-me mostrar este site. Então, se eu apenas mostrar a prévia, é o comando enter de controle para acessar rapidamente a visualização Isso já tem alguns elementos que funcionam Então, esses são botões simples que eu edito neles, e eles são configurados como componentes com estados separados E então, se eu rolar para baixo, também temos alguns componentes mais abaixo com os quais já podemos interagir. Mas, como você pode ver no momento, essa é apenas uma simples página de rolagem Uma coisa que eu já me certifiquei é que o menu sempre permaneça no topo, e esse é um recurso muito simples que você pode encontrar no XD. Apenas certifique-se de selecionar esse grupo ou elemento, que é o seu menu. E então aqui nas opções, basta escolher a posição fixa ao rolar Então, se eu tirar isso e testar novamente, o menu sairá da tela, o que, obviamente, neste caso, não queremos, então, vamos ativá-lo novamente. No entanto, essa opção não será realmente necessária para a forma como configuraremos nossas várias pranchetas, para as quais, o mais importante é garantir que esse menu seja configurado como um componente Então, no momento, é apenas um grupo simples, posso conferir aqui nas camadas. É só um grupo. Então, o que vou fazer é pressionar o comando Control K para transformá-lo em um componente Portanto, isso será necessário quando tivermos várias pranchetas, mas ainda queremos garantir que as interações que atribuímos a cada um desses itens de menu sejam aplicadas em todas as nossas pranchetas Mas voltaremos a isso mais tarde. Por enquanto, lembre-se tudo o que você precisa como componente, portanto, todos os elementos interativos, como botões, menus e ícones, devem ser criados primeiro como componentes. E então, a segunda e mais importante coisa que você precisará fazer antes de começar a duplicar sua prancheta é selecionar tudo nessa E então agrupe-os, então esse é o comando ou Controle G. Então, isso vai realmente tornar a seleção coisas um pouco mais complicada, porque você sempre terá que clicar duas vezes para entrar no grupo e depois mover as coisas Mas isso é necessário para a animação de rolagem do paraax. Sem tudo agrupado no início, você terá muitos problemas mais tarde Portanto, lembre-se de fazer isso logo no início. Mas agora estamos prontos para começar com as animações de introdução que gostaríamos de adicionar ao site Portanto, essa ainda não é a rolagem do paradaxe. Essas são apenas as animações da primeira dobra. Então, para isso, eu já vou duplicar a prancheta Então eu uso a ferramenta de seleção e, no modo de design, apenas mantenho pressionada a tecla alter option e a arrasto para a direita. Certifique-se de ter espaço suficiente à direita da prancheta original, pois você adicionará muitas delas dependendo da complexidade do site Além disso, gosto de manter um bom espaço entre as duas pranchetas porque pode haver alguns elementos sobrepostos e pode ser um pouco confuso trabalhar com elas Então, às vezes, eu até aumentava esse espaço. E mais tarde, talvez os aproxime apenas para arrumar as coisas. Então, primeiro de tudo, eu gostaria de ter uma boa animação no elemento de fundo, essa bela curva que temos aqui. Então, eu realmente não preciso desse caractere ou do texto ou mesmo do menu, e na verdade vou até mesmo excluí-los. Então, eu apenas os seleciono e os excluo. Então, só temos essa forma lá. E o que vou fazer com isso é realmente ampliá-lo, então vou torná-lo maior E então, clicando duas vezes nele novamente, posso acessar os pontos de ancoragem dentro dele e até movê-los Então, o que eu quero criar aqui é uma boa animação quando essa curva será ajustada. Então, eu me certifico de que ele cubra toda a tela. E você pode ver que nesta prancheta, já temos a altura da janela de visualização definida como 800 Então essa é a linha tracejada indicada aqui. Isso significa que sempre que eu testar isso, a janela mostrará apenas essa área. Agora, atualmente, não podemos ver nenhuma animação. Podemos ver como será esse belo gradiente suave Mas quando mudamos para o modo de protótipo e selecionamos toda a prancheta Isso é muito importante. Portanto, você não quer atribuir a animação a elementos individuais. Certifique-se de que toda a prancheta esteja selecionada e seguida, arraste essa pequena seta para a prancheta duplicada. Lá, podemos escolher a que queremos que a animação seja atribuída. Então, nesse caso, eu realmente o ajusto para o tempo e me certifico de que o atraso seja definido como zero segundo. Isso significa que ele será acionado automaticamente diretamente como A assim que o testarmos como um protótipo E em vez de transição, eu quero que isso seja animado automaticamente, porque eu gostaria de ver aquela animação legal que será criada na forma como ela se transforma de um estado para E para tornar a animação ainda mais suave, vou adicionar es de entrada e saída e talvez aumentar a duração para 0,8 segundos. Então, agora vamos testar isso. Já podemos ver como ele é animado. Se isso acontecer muito rápido, o que você pode fazer é voltar, selecionar aquela pequena seta e alterar o atraso para talvez 0,4 segundos. Dessa forma, temos um pouco mais desse plano de fundo visível antes de ser animado. E se você quiser reproduzir rapidamente a animação, basta pressionar o mesmo atalho novamente, Comando E sim, estou feliz com a aparência. E se você quiser atrasar os elementos dessa animação de introdução, o que você pode fazer é já ter outra configuração de prancheta Então, o que vou fazer é duplicar isso mais uma vez em nossa opção drag E mais uma vez, exclua as coisas que eu ainda não quero revelar. Precisamos clicar duas vezes e depois excluir as coisas. Vou deletar o personagem e o slogan. E talvez apenas anime esses pequenos detalhes aqui. Então eu vou mover esse texto para a esquerda, então este para a esquerda e depois este mais para fora. Você já pode ver que estou criando um pequeno padrão aqui. Então, tudo o que eu gostaria que aparecesse primeiro está mais próximo da borda da prancheta e, em seguida, as coisas que eu afastar aparecerão um pouco mais tarde Portanto, é uma forma de atrasá-los. E então, este aqui, podemos simplesmente descer. Vamos movê-lo para lá. E então vou selecionar todos eles e até mesmo reduzir sua opacidade para 0%. E então, na próxima tela, vamos vê-las aparecendo, mas também precisamos garantir que haja uma interação entre essas duas pranchetas Então, da mesma forma que antes, eu uso o modo protótipo e ainda vou usar a opção de tempo Aqui, vou definir esses 20 segundos, e o resto das propriedades da ação devem ser as mesmas de antes, para ação devem ser as mesmas de antes, que eu não precise redefini-las. Então, vamos testar isso novamente. Eu volto até o começo. Então, na primeira prancheta, use o atalho para testá-la Já podemos ver como todos os elementos à esquerda entraram um por um e tinham uma pequena animação neles. Enquanto todos os outros elementos aqui que excluímos simplesmente apareceram. A razão para isso é porque, é claro, entre as duas pranchetas, não havia instâncias na primeira A única coisa que o OBXD poderia fazer lá é simplesmente desaparecê-los e fazê-los aparecer. Já para esses elementos aqui na parte inferior, havia um estágio de antes e depois e poderia criar uma boa ação de animação automática entre os dois estados Ou, se estivermos pensando em termos de animação, podemos até mesmo chamar esses quadros-chave Então, vamos testar isso novamente. As duas etapas da nossa animação estão prontas. Mas não vamos parar por aí. Vamos adicionar mais uma prancheta para essa animação de introdução Então, vou duplicar isso ainda mais. E desta vez, em vez de excluir qualquer coisa, vou vir aqui, selecionar o menu clicando duas vezes nele, arrastando-o para selecionar o menu clicando duas vezes nele, arrastando-o cima e selecionando o caractere, arrastando-o para a direita e, em seguida, selecionando esse texto, e talvez voltando ao modo de design, eu posso até girá-lo mantendo pressionada a tecla shift, certifique-se de que esteja exatamente 90 graus, mova-o para algum lugar aqui, mova-o para algum lugar e talvez só para este texto, eu vou reduzir a opacidade para 0% Não precisei fazer isso com os outros dois elementos porque eles já estão fora da tela. Agora, se voltarmos ao protótipo, podemos selecionar toda a prancheta arrastá-la para a outra Ainda usando o tempo, o atraso foi ajustado para zero segundo. Mas desta vez, em vez disso, vou usar a atenuação instantânea e talvez definir a duração para 1 segundo Mais uma vez, agora temos quatro pranchetas. Vamos voltar ao primeiro e pré-visualizá-lo. Então você pode ver que houve um pouco de oscilação para frente e para trás tanto no slogan para frente e para trás tanto no slogan no menu e no personagem, graças à animação instantânea que usamos Então, mais uma vez, vamos testar isso. Aí está. Muito sutil, muito bom. E, claro, ainda temos nossas animações do Togo aqui e ainda podemos continuar rolando Mas agora que criamos essa bela construção para a primeira folha do site, podemos continuar nos concentrando no resto do site e adicionando todos esses efeitos de rolagem paralaxe 20. Ajustes à rolagem do Parallax: Então, estamos de volta ao XZ, e vou duplicar essa prancheta, renomeá-la e chamá-la de paralaxe 1 Dessa forma, saberei que é aqui que a rolagem começa Então, a primeira e mais importante coisa que temos que fazer é deslocar todo esse grupo e garantir que ele aproximadamente alinhado aqui, onde está nossa próxima dobra Então, esta será a seção sobre como definir suas metas. Vou garantir que nosso menu fique aqui na parte superior, então vou arrastá-lo para baixo e que todos esses outros elementos que não queremos ver estejam fora da tela. Então, vou arrastar isso para baixo, não a forma, e então podemos nos concentrar nos elementos em nossa janela de exibição Ainda assim, lembre-se de que a linha tracejada mostra a janela de visualização e agora podemos começar a mover as coisas e até mesmo a escalar os elementos para cima e Então, se eu selecionar esse item aqui, posso aumentá-lo, movê-lo um pouco para a direita e, em seguida, mover esse quadro de texto para baixo. E eu sempre tento evitar criar tangentes ou beijos entre os Isso basicamente significa que você quer evitar colocá-los de uma forma em que seja difícil dizer o que está na frente e o que está por trás. Então, quando está perfeitamente alinhado aqui, no poste e na borda do quadro de texto, parece estranho Então, queremos ter certeza de que tem um pouco mais de sobreposição do que isso A mesma coisa com esse elemento, eu não o colocaria aqui. Novamente, parece estranho, você quer ter certeza de que há pelo menos um pouco mais de sobreposição entre eles Agora, se voltarmos à opção de protótipo e selecionarmos a prancheta anterior, podemos adicionar a interação, e vou mantê-la ativada, animá-la automaticamente com facilidade e com as mesmas configurações Então, podemos testar isso e, se eu tocar em qualquer lugar da tela, já veremos a animação. Se eu quiser testá-lo novamente, basta pressionar o comando control enter e vamos ver Parece bom, mas não é tão interessante neste momento. Então, o que vou fazer é selecionar essa forma aqui na prancheta anterior E como está fora da janela de exibição, podemos brincar com ela no modo de design Então, por exemplo, eu posso esticá-la até o fim, e então eu posso tocar duas vezes para selecionar pontos de ancoragem individuais, e eu posso criar uma forma completamente diferente, curvando-a dessa forma, e então talvez até esse ponto aqui possa aparecer Então, quase preenchendo essa área. Então, o texto definido pode ser movido para a esquerda. Estou pressionando a tecla shift enquanto a arrasto e, em seguida, essa forma pode diminuir. O texto pode aparecer e essa ilustração pode ir para a direita. Observe como estou movendo tudo em direções diferentes, pois isso tornará a animação de paralaxe mais interessante Então, vamos testar isso. Vou selecionar essa prancheta, pois não quero ver toda a animação de introdução no momento Estou apenas focando nesse primeiro detalhe de paralaxe. E sim, isso já parece muito melhor. Vamos testá-lo novamente. Eu gosto disso. Muito bom, tanto a forma como anima quanto todos os outros elementos E, neste ponto, vale a pena mencionar que, se você estiver apresentando a um cliente e quiser realmente mostrar a animação de paralaxe e se concentrar em como as coisas estão passando de uma dobra para a outra, há uma maneira interessante de tornar isso um pouco mais fácil para você mostrar a animação de paralaxe e se concentrar em como as coisas estão passando de uma dobra para a outra, há uma maneira interessante de tornar isso um pouco mais fácil para isso um pouco mais Então, em vez de usar o gatilho de toque, você pode alternar para arrastar, que significa que, ao testar isso, você pode simplesmente começar a arrastar da direita para a esquerda para ver a transição E com isso, você pode controlar a velocidade e até mesmo ir e voltar. Portanto, enquanto estiver pressionando e arrastando, você pode realmente se concentrar em todos os elementos e em como eles se movem Mas lembre-se de que, depois de soltar, ela ficará na última prancheta Portanto, para poder voltar, você ainda precisará pressionar o comando enter do controle. Para uma demonstração rápida, é sempre mais fácil configurar a guia. Mas se você quiser desacelerar as coisas e realmente se concentrar em cada detalhe, lembre-se de usar o gatilho de arrastar. Mas, neste exemplo, vou voltar a tocar. E então vamos continuar criando mais uma duplicata dessa prancheta Então, vou manter pressionada a tecla alter option e arrastá-la para a direita. Diminua um pouco o zoom, selecione o grupo inteiro arraste-o para cima até que a próxima dobra esteja em nossa janela de exibição Novamente, certifique-se de que o menu fixo permaneça onde deveria estar e que todos esses outros elementos ainda não se revelem na janela de exibição E, assim como antes, o que vou fazer aqui é começar a brincar com esses elementos no modo de design, então vamos aumentar essa forma. Novamente, toque duas vezes nele, altere sua curvatura também E, novamente, assim como evitar tangentes, eu também gosto de evitar ter, tipo, uma linha nítida ao redor do pescoço dos personagens Parece um pouco estranho mais uma vez. Colocá-lo em algum lugar aqui parece muito mais agradável. E então podemos até mesmo mover esses detalhes Se não gostarmos do posicionamento, podemos colocar o texter à direita, talvez um pouco mais alto E então esse personagem pode ser maior. Depois, basta voltar ao modo protótipo, conectar as duas pranchetas usando as mesmas configurações de interação de antes, entrar e Então, se testarmos isso da dobra anterior, isso é o que vemos na próxima. E, geralmente, quando tenho tudo configurado no novo quadro de arte, eu volto e refino de onde as coisas estão vindo Então, uma alta pode vir da direita. Esse texto pode vir de baixo. O personagem pode vir de cima, e talvez com um pouco de transição ou desvanecimento, e então essa forma pode vir da esquerda Então, vamos testar isso novamente. Clique e, em seguida, podemos ver como funciona. Mais uma vez. Sim, parece muito bom. Agora, talvez a transição dos personagens não seja a melhor, então eu vou voltar aqui, aumentar a opacidade e arrastá-la Vamos testá-lo dessa forma. Sim, isso é melhor. Eu não queria criar essa mistura entre o plano de fundo e o personagem Agora isso está corrigido e já parece muito melhor. Agora, a partir de agora, vou acelerar as coisas porque vou repetir as mesmas etapas de antes, para adicionar todas as animações de paralaxe para o resto das dobras na página E vamos seguir em frente e nos concentrar em configurar a navegação do nosso menu fixo. 21. Menus e navegação para site: Agora temos tudo pronto, quatro pranchetas para a introdução e quatro pranchetas para o pergaminho de paralaxe Vamos ver como funciona. Portanto, nossa animação de introdução funciona bem. Se eu tocar em qualquer lugar, rolamos para baixo, tocamos em qualquer lugar, novamente , rolamos para baixo, continuamos rolando e chegamos à última dobra Então, agora é hora de configurar o menu fixo e a navegação, porque, é claro, atualmente, da forma como esse protótipo está configurado, não podemos simplesmente rabiscar para cima e para baixo porque, é claro, nessas dobras ou pranchetas, não temos Portanto, está completamente escondido da janela de exibição. É por isso que é importante incluir um menu fixo para esse tipo de protótipo de site Agora, como configuramos nosso menu fixo como um componente, vou abordar essa instância E eu posso dizer do canto superior esquerdo que esse não é realmente o componente principal. É apenas um exemplo disso ou um filho do original. Portanto, se quisermos ter certeza de que as interações serão atribuídas em todas as pranchetas, vale sempre a pena escolher a opção de edição do componente principal Agora, como clicamos ou excluímos essa, ela precisará ser gerada separadamente fora de uma de nossas pranchetas Mas a partir disso, agora podemos clicar duas vezes e selecionar metas e, no modo protótipo, podemos arrastá-las para a prancheta Usando o mesmo para animar o toque com a facilidade de entrar e sair e em 1 segundo, acho que vai funcionar Em seguida, vamos selecionar o compartilhamento que deverá ser exibido no último quadro inicial. E vou mover isso aqui no meio que seja mais fácil selecionar todos os elementos. O impulso precisa entrar nessa, e uma alta precisa ir aqui. E, finalmente, queremos o crescimento, que é o nome desse produto. Para voltar à página ou prancheta, onde já temos todos os elementos no lugar Portanto, não queremos continuar reproduzindo a animação intra. Nós vemos isso uma vez. Mas depois disso, queremos voltar à primeira parte, onde já está tudo no lugar certo. Então, agora que configuramos isso, podemos simplesmente acessar qualquer uma dessas páginas e testar as coisas. Então, vamos pular para aumentar e depois voltar para uma alta. E você pode ver que estou indo intencionalmente de uma forma não linear, para que possamos ver que toda a vinculação funcionará Compartilhando, depois volte para as metas, depois pule talvez novamente para mirar alto e depois volte para a primeira dobra. Graças ao nosso componente, tudo funciona conforme o esperado e não precisamos repetir todas essas interações para cada um dos quadros de arte duplicados Trabalhar e utilizar componentes no OBXZ é Portanto, se você ainda não começou a usá-los, certifique-se de fazê-lo, pois isso realmente acelerará seu fluxo de trabalho e fará com que você trabalhe com mais eficiência. E se você gostou deste tutorial e quer aprender como eu também criei a versão do aplicativo deste projeto e como construí tudo do zero, todos os elementos, lembre-se de que você pode aprender que, desde nosso design gráfico, comece no boot camp, para o qual, mais uma vez, o link está na descrição abaixo. 22. Como compartilhar seu protótipo: Você tem algumas opções diferentes quando se trata de compartilhar seu protótipo que você criou no AdobeXD Mas, provavelmente, primeiro, o mais importante é configurar dois fluxos separados , caso você tenha um aplicativo e um site no mesmo documento. Mas no caso de projetos mais complexos em que talvez você também queira ter uma versão para tablet ou uma versão com orientação retrato e paisagem para seu aplicativo, você deve ter vários fluxos configurados Aqui, temos apenas um fluxo no momento, que é para o aplicativo. Mas quando eu entro no site e estou no modo de protótipo, agora posso clicar neste ícone inicial O que criará um novo fluxo para mim. Então, eu posso chamar isso de um site. E isso é importante para nossa próxima etapa, porque no módulo de compartilhamento, poderemos compartilhar separadamente esses dois fluxos. Então, quando o enviarmos para o cliente , ele receberá um link para o site e um link para o aplicativo. E você sempre pode recomendar que eles abram o link do aplicativo no telefone. Embora sejam do site, eles devem verificar em um computador desktop ou laptop. Então, atualmente, tenho o fluxo do site selecionado e o link já está nomeado adequadamente. Mas eu posso digitar aqui I growth website, e posso escolher entre as seguintes configurações de visualização a partir das quais a revisão do design é recomendada. Se você quiser compartilhar isso com as partes interessadas, como o cliente ou seus colegas, por que você deve escolher o desenvolvimento quando se trata de compartilhá-lo com o desenvolvedor. Além disso, a apresentação é útil se você estiver apresentando pessoalmente algo do XD. Mas, neste caso, vou me limitar à revisão do design. E, finalmente, você deve decidir sobre as permissões. Então, por padrão, qualquer pessoa com o link poderá acessar esse protótipo Então, eles poderão ver isso. Obviamente, eles não poderão editá-lo, mas poderão comentar sobre ele. E caso você queira que seu projeto seja um pouco mais protegido. Você pode dizer que somente pessoas convidadas terão acesso a ele. Nesse caso, você terá que adicionar seus endereços de e-mail aqui. E, finalmente, você também pode atribuir uma senha para restringir o acesso ao protótipo Por enquanto, vou mantê-lo com qualquer pessoa com o link para acessá-lo e, quando eu clicar em criar link, ele o gerará em um servidor da Adobe. E ele mostra esse URL para mim, que eu posso copiar ou até mesmo obter seu código de incorporação se eu quiser colocá-lo em um site, por exemplo, e é assim que ele aparece no navegador Então, temos tudo aqui. Funciona da mesma forma que vimos no XD. Nós podemos pular por aí. Também temos nossos pequenos botões que criamos e, o mais importante, as pessoas convidadas ou que receberam o URL poderão começar a comentar sobre isso, seja fazendo comentários gerais ou fixando comentários em partes específicas Digamos que eles queiram mudar alguma coisa aqui quando fizerem um comentário, alterarem o texto ou as palavras Depois de enviar isso, ele será editado lá, e quem estiver lendo isso sempre terá um pequeno destaque onde ele é colocado no design Agora, quando você começa a ter muitos comentários, você sempre pode resolvê-los, editá-los ou excluí-los. E também há opções na parte inferior para ocultar anotações, apenas para ver o design sem elas, e você também pode filtrar comentários com base em várias opções diferentes Também é uma maneira rápida de convidar outros colaboradores ou revisores com esse botão aqui na parte superior E também há outro recurso interessante, que veremos quando exportarmos o outro fluxo. Então eu selecionei o aplicativo e tenho todas as mesmas configurações aqui à direita. Acabei de criar o link e abri-lo no navegador. Mais uma vez, temos as mesmas interações aparecendo. Podemos analisar tudo da mesma forma que vimos no XD. Além disso, também temos outra maneira de navegar pelas pranchetas, com esses ícones na parte inferior Também posso voltar para a primeira tela. E se isso não for suficiente, podemos até clicar nesse ícone aqui no canto superior esquerdo, com o qual podemos ter uma visão geral de todas as pranchetas que foram usadas neste projeto E se eu quiser ir direto para este, posso simplesmente clicar nele e continuar testando as coisas. Caso você tenha várias telas em um projeto, por padrão, você verá todos os comandos do aplicativo. No entanto, se você quiser filtrar e mostrar somente os comandos atribuídos à tela atual ou à tela atualmente visível, você também pode usar esse pequeno botão E há uma última coisa que eu queria mencionar. Depois de voltarmos para o XD, observe que, para esses dois fluxos, temos o pequeno ícone de link visível. E caso você volte e faça algumas alterações depois de receber seu feedback. Digamos que movamos esse texto um pouco para baixo. Você verá que essa pequena etiqueta aqui ficou cinza. Indicando que você precisará se lembrar de atualizar seu protótipo compartilhado voltando ao módulo compartilhado, certifique-se de que o fluxo do aplicativo esteja selecionado e escolha o link Atualizar Então, isso atualizará o protótipo compartilhado, e quem estiver fazendo a revisão verá imediatamente essas alterações atualizadas em seu navegador Isso é tudo que eu queria cobrir para este projeto. Espero que você tenha achado divertido trabalhar nisso e que isso o ajude a decidir se UX e web design são a direção em que você gostaria de se especializar Mas mesmo que essa não seja a direção que você deseja seguir, essas habilidades e a capacidade de usar esse DB XD serão incrivelmente úteis para mostrar em seu currículo e portfólio 23. Conclusão: Parabéns por terminar este curso. Espero que você tenha se divertido tanto assistindo isso quanto eu me diverti gravando. E, claro, não se esqueça do projeto da turma. Porque lembre-se, a prática leva à perfeição. Mal posso esperar para ver seu trabalho, então não deixe de enviá-lo. E caso você goste deste curso e queira aprender mais comigo , há muitos outros cursos que você pode encontrar aqui. Vá e dê uma olhada neles agora. Mal posso esperar para te conhecer na próxima.