Adobe XD: trabalhando com microinterações

Introdução e princípios - Introdução

Bem-vindos a mais um curso aqui da Alura. Meu nome é André Lisboa e sou designer focado em interfaces. Significa que no meu dia a dia eu trabalho criando telas para sites, para sites responsivos, para aplicativos, para admins e para tudo que envolve o mundo do design digital. Este aqui é o vídeo que inaugura o nosso curso de Adobe XD Microinterações.

Se vocês ainda não conhecem muito bem o universo do designer digital, nem do Adobe XD, eu aconselho primeiro vocês darem uma olhada no curso de Adobe XD básico e posteriormente no Adobe XD intermediário.

Nesse curso de Adobe XD intermediário é onde criamos todas as telas, todos os layouts que vamos utilizar nesse projeto nesse curso aqui de interações. Então este curso aqui é bem focado em criar interações entre as telas. Criar um protótipo navegável que dê uma boa experiência do usuário, que complemente todos os layouts contando uma história e ajudando na experiência do usuário para que seja mais agradável para ele.

Então vamos focar bastante nos princípios da microinteração e interações em tempo real, em tempo não real. Vamos ver bastante também como é criar essas animações, tudo dentro dentro do Adobe XD utilizando a ferramenta deles de auto animate que é auto animação também.

É uma ferramenta nova nessa plataforma e que tá sendo muito útil para complementar já os protótipos. Para criar uma experiência do usuário melhor para o nosso usuário final.

Eu vou dar uma navegada aqui e a gente pode ver o que vamos aprender ao longo desse curso. Já criamos aqui a essa tela de splash. Então vamos mostrar como criar animações como esse fundo, como fazer essa movimentação de uma tela para outra, como criar login. Vamos fazer aqui um onboarding mostrando que contando a história de como que funciona o aplicativo.

Exemplo a cadeira sai do celular e vai para uma caixa. Da caixa ela vai para um caminhão, onde vai ser entregue essa encomendas até o local final. Vamos aprender tudo isso ao longo desse curso.

Como fazer aqui horizontal, mudando aqui, vamos aprender a fazer uma mudança de valor. Estão vendo aqui que quando a gente muda aqui os números vão mudando para não ficar uma informação estática e virar uma informação dinâmica. Enfim, vamos aprender diversos princípios de como fazer animação e tudo dentro do mesmo Adobe XD.

Então vamos continuar clicando aqui para dar uma navegada maior pelo protótipo. Podemos ver aqui, que vamos aprender a como mexer em tudo isso, adicionar ao carrinho. Vamos ver aqui o carrinho. Vamos aprender também a como fazer esse carregamento e a mudar os elementos de posição.

Vamos fazer essa transferência de informações na tela, esse elemento que estava simbolizando alguma coisa antes, agora ele simboliza algo um pouco menor mexendo na hierarquia dele. Vamos finalizar aqui. Onde está mexendo aqui em todo o protótipo, vemos tudo que vamos aprender ao longo desse curso aqui.

Espero que vocês tenham gostado de todo o conteúdo que está preparado. Vejo vocês na próxima aula, onde vamos explicar um pouco melhor de toda a ementa desse curso. Tudo que a gente vai aprender, destrinchar um pouco passo a passo de todas as etapas desse curso. Eu espero que vocês tenham gostado e vejo vocês na próxima aula.

Introdução e princípios - Overview

Bem-vindos a mais um vídeo aqui da Alura. Nesta aula daqui vamos entender um pouco sobre o que que vamos construir ao longo desse curso aqui de Adobe XD microinterações.

Existe um cliente que nos chamou e contratou para construir um aplicativo de e-commerce para uma loja de móveis. Móveis para casa, chamado Casa e Cadeira. Nesse aplicativo, o usuário pode comprar cadeiras, sofás, peças para banheiro, pias, enfim, diversos elementos para casa mesmo. Móveis para casa.

Desenvolvemos de uma maneira que foi feito pensando na melhor experiência do usuário possível. Então, existe todo um fluxo de navegação entre as telas.

É aí que a gente entra com a microinteração, para criar narativas para o nosso usuário para ele ter uma melhor experiência do usuário. Podemos ver aqui que todas as áreas já foram construídas, que é a tela do splash com login, temos aqui um onboarding que conta uma história de como funciona o aplicativo.

Temos a tela inicial, onde ele pode navegar por diversos produtos diferentes para fazer a compra com filtros aplicados aqui, o filtro que ele quiser escolher. Temos aqui, a tela do detalhe do produto que podemos favoritar. Criar e adicionar o produto aos favoritos.

Ele pode adicionar o carrinho e efetivamente realizar a compra dele. Realizar o pagamento e ao final, nós temos aqui o fluxo de pagamento, onde o usuário pode ver o carrinho dele e tudo que está adicionado no carrinho e finalizar a compra dele. Esses aqui são os passos do nosso o aplicativo Casa e Cadeira.

Ao longo deste curso aqui, eu já deixei anotado tudo que vamos aprender. Então, na aula 1, vamos começar a aprender antes de meter a mão na massa, vamos ver sobre os princípios da microinteração. Vamos entender quais são todos os princípios, quais são os tipos de animações que existem. Vamos ver tudo isso, durante a aula 1 que vai ser mais teórica mesmo.

Na aula 2, vamos começar a meter a mão na massa, e já vamos construir essas áreas que acabamos de navegar. Vamos construir um home com essa navegação do swipe, nós vamos construir a parte de detalhe do produto, que vai ser favoritar o produto, adicionar o carrinho, etc.

Vamos também aqui na aula 2, criar o fluxo de pagamento que acabamos de ver também como ele funciona: "que chega o usuário, adicionar no carrinho e tal..." Vai ter uma preparação, adicionar os campos do cartão de crédito dele e finalizar esse fluxo de carrinho.

Na aula 3, nós vamos começar a criar umas telas, umas navegações um pouco mais complexas. Vamos criar o Splash com login, que já vimos que entra animaçãozinha com fundo, depois entra o logo e depois, aparece as informações de login.

Vamos criar o filtro que tem aquela mudança de valor que quando o usuário vai puxando o preço mínimo que quer pesquisar, vai mudando valor. Isso é bem interessante também! E vamos aprender fazer onboarding. Vamos contar essa história aqui, dizendo, mostrando como funciona o aplicativo para o usuário.

Na aula 4, vamos pegar todos essas partes que vamos prototipar e linkar uma com a outra para não ficar tudo solta. Aqui só tem uma página navegação, aqui só tem a parte de onboarding: vamos juntar tudo para fazer um fluxo coerente. Ao final de tudo, vamos ver como exporta esse projeto, como cria um vídeo, como mostra para o nosso usuário final, para o nosso cliente, como esse protótipo funcional, ele funcionando.

Ao final de tudo, vamos ter um protótipo funcional que vamos abrir no celular e como está funcionando no celular. Criar um vídeo e mostrar esse vídeo para o usuário. Então, vamos pegar tudo do início ao fim da interação. E, ao final, vamos ter algo completo e apresentável.

Espero que vocês tenham gostado desse material que está preparado para vocês ao longo deste curso. Vou deixar aqui na descrição abaixo um link para o fórum, onde nesse fórum vou criar uma thread e lá vocês vão poder criar as perguntas de vocês, deixar qualquer dúvida que vocês tiveram ou algo a complementar.

Acho muito interessante que vocês também, caso tenho alguma não só dúvida, mas algo complementar mesmo, tipo discussões para aqui ao longo do curso. Acho muito interessante, enriquece também nosso conhecimento. Qualquer dúvida vocês podem escrever nesse fórum, nesta thread. Espero vocês na próxima aula, vamos começar a criar, a ver os princípios da microinteração. Espero vocês lá pessoal!

Introdução e princípios - Princípios da microinteração 1

Bem-vindos a mais um vídeo que da Alura e nessa aula daqui vamos ver um pouco sobre os princípios da microinteração. Antes de começar a falar dos princípios, quero comentar que a interação é muito poderosa para nós como designers porque por meio dela, conseguimos nos comunicar melhor com nosso usuário final.

A gente consegue criar, contar a história que eles vão entender. Criar narrativas. E por meio dela conseguimos ter uma comunicação muito mais eficiente e acaba a retendo melhor esse usuário, trazer a intenção dele para onde realmente importa. Muitos designers vêem como apenas algo para para tornar a interação sendo algo para tornar mais divertido, mais bonito na nossa plataforma, mas ela é muito mais eficiente o que somente isso.

E antes de começar aqui vamos separar em dois grupos que vão ser interações em tempo real e em tempo não real. Vou começar a falar sobre interação em tempo real que são interações que acontecem quando o usuário está interagindo com essa plataforma.

Nesse caso estamos vendo um swipe que é isso, como é o nome dessa interação quando o usuário vai e mexe para o lado sabendo que a interação acontece ao mesmo tempo que ele está manuseando essa plataforma. Então é uma interação em tempo real. A outra é só interações tempo não real, que por exemplo, seria o usuário clicando no botão e depois que ele executa essa ação, acontece uma animação que prende usuário de outra forma.

Então existe essas duas categorias que nós vamos separar os princípios. Então esse aqui são os tipos de habilitação vamos aprender. Vamos aprender sobre a suavização, deslocamento e atraso, parentesco, transformação, mudança de valor, máscara, sobreposição, clonagem, obscurescimento, parallax, dimensionalidade e Zoom e Dolly.

São bastante princípios aqui, que eu vou dividir em dois vídeos. Esses esse primeiro vídeo, até a máscara e após isso nós vamos trazer para o próximo vídeo.

Então vamos começar lá no primeiro princípio que eu vou comentar aqui com vocês é da suavização. Os nossos componentes em uma animação de interface, são movimentos que acontecem no espaço temporal, um espaço de tempo e suavização tende a naturalizar esse movimento.

Então vocês podem ver nesse exemplo aqui que eu trouxe que a caixa sai com uma velocidade quando ela está parando, ela vai diminuindo e novamente sai em disparada. Ela não vem com movimento todo paradão assim todo reto.

Porque pensa no mundo real, como os movimentos acontecem quando a gente vai andar. Damos um pique inicial que é mais rápido que o outro, uma explosão e depois vamos andando numa velocidade mais constante e ao final a gente para, dá uma paradinha para frente. Então a gente se movimenta dessa maneira e a suavização, tenta trazer um ar de mais naturalidade para os movimentos da interface.

Aqui eu tenho um exemplo de um movimento linear que foi o que comentei com vocês e a gente olhando lá, parece que tem alguma coisa errada. Que não está muito certo, que ele vem tudo com uma velocidade constante ao invés de dar uma aceleração e uma parada e depois acelerar novamente. Então, é muito bacana de utilizar a suavização em nossos projetos para dar essa sensação mesmo de algo mais natural.

Um outro aqui é o movimento elástico, esse aqui já levado ao extremo onde vem super rapidão para assim dar uma pulada. É bem bacana também utilizar.

A suavização, existe diversos tipos de suavizações diferentes que a gente pode utilizar em nossos projetos e cabe a nós designers escolher qual é o melhor para o nossa plataforma para o nosso usuário final que estamos projetando. Qual o tipo de plataforma e aí analisando todos poréns, enfim, nós designers somos encarregados de fazer essa escolha.

O próximo princípio que eu vou comentar é o deslocamento e o atraso. Esse princípio é muito poderoso. Vendo o exemplo podemos notar que só pelo movimento, a gente já nota aqui que os dois elementos do topo que estão separados de baixo, porque eles vieram juntos e o elemento de baixo veio em um outro momento.

Então só por meio do movimento, a gente já consegue contar uma história para o nosso usuário. É muito poderoso e muito importante que a gente já consegue antecipar antes mesmo do usuário bater na tela e ver que elementos são esses, ele já sabe que estão em grupos de diferentes.

Eu trouxe este exemplo aqui para a gente ver para o botão, quando clica no botão aparece aparece outros três botões tempos diferentes . Podemos ver que são elementos que estão separados antes mesmo de saber que você é um texto, imagem ou vídeo, a gente sabe que são três elementos separadamente. Então é muito poderoso isso.

O próximo a princípio que eu vou comentar é o parentesco. O parentesco é para gente, relacionar os objetos e relacionar a hierarquia deles. Então conseguimos ver o que nessa movimentação um elemento está atrelado ao outro.

Por exemplo: aqui eu vejo que quando um movimento se mexe leva com ele outro elemento junto, podemos ver que esses dois elementos estão relacionados um com outro e também por meio do peso, qual é maior que o outro e podemos dizer qual consegue comunicar o nosso usuário, olha para cá primeiro e olhando para cá primeiro, você sabe que esse elemento está ligado a ao outro, então, é muito poderoso também para se comunicar com o nosso usuário.

Eu trouxe um exemplo aqui, é um parentesco atrasado. Então vocês podem ver depois que o usuário movimenta, acontece em uma animação. Então se lembra de animação, das interações em tempo real e tempo não real?

Esse aqui seria em tempo não real, onde o usuário se mexe um pouquinho, ele mexe em uma propriedade de um elemento e um pouquinho depois, acontece animação em outro uma animação em tempo real dessa seria se o usuário tivesse mexendo algum local, estivesse tudo mudando ao mesmo tempo. Existem esses dois tipos de animação para o parentesco.

O nosso próximo princípio que é o da transformação. Princípio da transformação é muito fácil de identificar. É um dos primeiros que a gente consegue identificar porque a gente já vê o círculo mudando para um retângulo e dessa maneira é muito interessante que a gente consegue contar uma história para o nosso usuário, a gente consegue prender a atenção do nosso usuário para para algo que é importante, contar uma história para ele e depois concluir.

Eu vou mostrar aqui mesmo para vocês, vamos deixar começar a animação do início submit é um botão para para enviar algo, aí clica e ele já se transforma em algo. Ele clicou ali no submit, estou enviando e ao terminar ele se transforma para um elemento no círculo enviado.

Então segurou nossa atenção, contou uma história que tá rodando, a minha mensagem que eu estou enviando e ao final, ele concluiu falando enviado. Então a gente consegue também se comunicar com o nosso usuário dessa maneira.

O que nos dava aqui, agora, para o nosso próximo princípio, a mudança de valor. Esse princípio é muito bacana, porque a gente consegue trazer um pouco mais de realidade para os usuários por trás dos números, porque os números eles não são algo estático.

Geralmente os números são algo mutável, que se muda mesmo e dessa maneira quando a gente utiliza isso, a gente consegue ver e dizer para o nosso usuário: Isso aqui é estático, isso você pode mudar a qualquer momento.

Se você criar mais vendas, por exemplo, num aplicativo de vendas, se você vender mais esse número aqui, sua poupança vai crescer, então a gente pode trazer o movimento de trazer velocidade de movimento mesmo para os números que não são algo estático. São algo que tem movimento, que você pode alternar os números a qualquer momento e é bem bacana dar um dinamismo para interface.

Trouxe aqui um exemplo: Quando o usuário vai mexendo os números vão mexendo. Então mostra que se você levar para um outro tempo dessa timeline, dessa linha, o valor é outro ele não muda simplesmente. Não mudou de número para outro, ele vai mudando aos poucos o que mostra que tem um dinamismo por trás desses números o que nos leva aqui agora ao nosso último princípio desse vídeo daqui: máscara.

A máscara é muito conhecida também por nós designers, designers de interface mesmo, que não usam muito motion como sendo um objeto que está contido dentro de outro. Até aprendemos no nosso curso de XD2, XD3 e todos esses nós usamos máscaras. A máscara no motion, é exatamente isso, mostra também uma narrativa para o usuário.

Um exemplo: um aplicativo de música. Então ele tem um círculo, ele muda indo para o topo da página como um banner mesmo. Então isso é muito bacana também porque que a gente mostra uma narrativa para nossos usuários.

Tudo isso que estamos comentando, não sei se repararam, é tudo para conseguirmos comunicar melhor, aproveitar as animações para contar uma história, para criar uma narrativa e é muito poderoso tudo isso nas microinterações. O que nos leva aqui para próxima aula, onde vamos aprender o resto dos princípios que ficaram faltando, vamos comentar na próxima aula e eu espero vocês lá.

Sobre o curso Adobe XD: trabalhando com microinterações

O curso Adobe XD: trabalhando com microinterações possui 97 minutos de vídeos, em um total de 30 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Introdução e princípios
• Primeiras interações no XD
• Interações mais complexas no XD
• Exportação e conclusão