Arte de Matt Rae
O Adobe XD oferece suporte a vários tipos de mídia, desde imagens e gráficos vetoriais até arquivos de música e áudio, para facilitar o design e a prototipagem de experiências digitais impressionantes.
Neste guia, você aprenderá a usar dois desses tipos de mídia, vídeos e o Lottie, para criar um protótipo de aplicativo de compartilhamento social de vídeo semelhante ao TikTok e ao Instagram Reels. Baixe o arquivo inicial e abra-o no Adobe XD para acompanhar este tutorial.
Adição de arquivos de vídeo e do Lottie ao Adobe XD
Antes de começar o tutorial, é preciso entender como os vídeos e a mídia do Lottie funcionam no Adobe XD. Assim como imagens e gráficos vetoriais, os arquivos de vídeo e do Lottie podem ser arrastados do sistema de arquivos do computador para a tela. Uma vez na tela, o arquivo pode ser movido para o local, e as configurações podem ser ajustadas no Inspetor de propriedades no modo Design.
Assim como nas imagens, arrastar um desses tipos de arquivo para uma forma vetorial ou caminho o mascara automaticamente dentro dos limites da forma, facilitando o preenchimento de formas do alocador de espaço com vídeos e conteúdo do Lottie. Isso pode ser muito útil ao preencher um layout de wireframe com ativos de alta fidelidade. Depois que um arquivo de vídeo ou do Lottie é adicionado a uma forma, clicar duas vezes na máscara permite ajustar o posicionamento do arquivo dentro da máscara.
Atualmente, o Adobe XD oferece suporte a arquivos de vídeo MP4 de 15 MB ou menos para otimizar a velocidade e o desempenho. Há suporte para os arquivos do Lottie no formato JSON, e eles podem ser baixados do LottieFiles ou exportados do Adobe After Effects usando o plug-in LottieFiles para After Effects.
Nos arquivos iniciais fornecidos acima, você encontrará uma pasta com vários arquivos de vídeo e do Lottie disponíveis para uso neste projeto de tutorial.
O arquivo inicial fornecido contém vários ativos, componentes e elementos de interface que serão usados no design e na prototipagem de uma experiência de vídeo móvel para procurar videoclipes curtos. Este guia se concentra na adição de arquivos de vídeo e do Lottie, por isso você encontrará várias páginas já configuradas e prontas para trabalhar.
Criação do fluxo de logon do aplicativo
A primeira experiência a ser criada é o fluxo de logon em que os usuários iniciarão sua jornada nessa experiência móvel. Esse fluxo começará com a animação do logotipo do aplicativo na tela inicial e continuará em uma sequência de logon, que inclui uma reprodução automática de vídeo no fundo.
Logotipo animado do aplicativo
Comece localizando o componente Animated Logo no painel de ativos do documento e arrastando uma instância para a primeira tela, substituindo o retângulo do alocador de espaço no centro da prancheta. Esse componente contém um arquivo do Lottie criado no After Effects e importado para o Adobe XD.
Para que a animação do logotipo seja reproduzida automaticamente, as configurações de reprodução precisam ser atualizadas no Inspetor de propriedades. Na seção Interactive Media, selecione Play Automatically no menu suspenso. A visualização do design mostrará que a animação do Lottie é reproduzida automaticamente quando a janela é aberta.
Como essa animação de logotipo simula o carregamento de um aplicativo, o protótipo deverá avançar para a próxima tela quando a animação terminar. Para fazer isso, selecione a animação do Lottie novamente e entre no modo Protótipo. Selecione + no menu de interações e adicione uma nova interação com o acionador End of Playback. Não substitua o acionador Tempo, pois é essa interação que aciona a reprodução automática da animação.
Com End of Playback selecionado como acionador, defina o destino como a primeira tela do fluxo de logon (Home Screen Loading). Isso permitirá que o protótipo continue quando a animação terminar.
Vídeo de fundo
A próxima etapa é adicionar um arquivo de vídeo como fundo ao fluxo de cadastro. Como há várias telas para esse fluxo de cadastro, é útil configurar o fundo em uma tela e, depois, copiá-lo e colá-lo nas outras.
Na primeira tela, selecione a camada Video Placeholder no painel Camadas e mova-a para o topo da pilha (isso facilita a adição do vídeo e pode ser feito com atalhos de teclado). Depois, arraste o arquivo HomeScreen.mp4 da pasta de arquivos de amostra e coloque-o na forma de retângulo (solte quando o retângulo ficar azul).
Clique duas vezes no retângulo para ajustar a máscara conforme necessário. Quando ele estiver na posição desejada, navegue até o Inspetor de propriedades e abra as configurações de vídeo. Neste caso, o vídeo deve ser reproduzido em loop. Então, clique no botão Loop para ativar. Selecione Play Automatically no menu suspenso de configurações de vídeo.
Agora, copie esse elemento de vídeo para a área de transferência, selecione as pranchetas restantes no fluxo de cadastro e cole o elemento de vídeo (o XD o colará automaticamente em todas as pranchetas selecionadas).
Por fim, mova cada instância de volta para o final da pilha de camadas em cada uma das pranchetas (isso pode ser feito com atalhos de teclado, ‘Shift + [’). As pranchetas nesse fluxo de cadastro já foram conectadas com a Animação automática. Então, na visualização, a ação de clicar revelará que o vídeo é reproduzido automaticamente e continua a ser reproduzido ao longo da navegação no protótipo. Nas duas últimas pranchetas, defina a reprodução do vídeo como No Playback, pois o vídeo não ficará visível nessas telas.
Criação do indicador de carregamento
Quando o cadastro estiver concluído, o aplicativo será carregado e fará a transição para a página inicial. Para criar isso, outra animação do Lottie pode ser adicionada à tela entre o cadastro e o início.
Na prancheta intitulada App Loading, arraste o arquivo do Lottie Loading Indicator dos ativos do documento para o retângulo do alocador de espaço. Usando a mesma abordagem do logotipo animado, defina a animação como Play Automatically e, após o término da reprodução, navegue até a prancheta Mid Phase, que fará a transição automática para a tela inicial.
Para criar uma transição suave da tela anterior, coloque uma cópia do indicador de carregamento na última tela do fluxo de cadastro, mas reduza o tamanho e defina a opacidade como 0%. Quando a transição de página ocorrer com a Animação automática, o indicador de carregamento parecerá se expandir quando começar a ser reproduzido.
Criação de um carrossel de vídeos vertical
Com o fluxo de cadastro concluído, a tela inicial principal do aplicativo pode ser concluída. Essa tela age como um carrossel de vídeos vertical que rola para o próximo vídeo quando a reprodução termina. Esse carrossel será criado de forma semelhante aos carrosséis de imagens usando o Adobe XD para criar um elemento interativo. No entanto, nesta situação, a reprodução de vídeo será controlada para reproduzir um único vídeo por vez e avançará automaticamente o carrossel quando um vídeo terminar.
Crie os componentes de vídeo
Os componentes deste elemento já foram criados. Localize o Componente principal na seção de componentes do arquivo de prática. Foi criada uma instância para cada um dos quatro vídeos a serem incluídos no feed.
Comece selecionando a primeira instância chamada Post Element e escolhendo o retângulo da imagem que funciona como alocador de espaço, como você fez antes. Arraste o vídeo Berg.mp4 da pasta de ativos e ajuste a máscara conforme desejado. Não se preocupe em ajustar outras configurações ainda, pois elas serão ajustadas em cada estado do componente.
Repita esta etapa com as outras três instâncias na página, adicionando os vídeos Walk.mp4, Dive.mp4 e River.mp4 a um dos alocadores de espaço de vídeo.
Por fim, compile cada um desses elementos de vídeo em um componente empilhando-os verticalmente e formando um componente chamado Video Feed.
Para este feed de vídeo, haverá uma ação de arrastar para avançar para o próximo vídeo e uma progressão automática ao final da reprodução do vídeo. Para isso, serão usadas pranchetas individuais em vez de estados de componentes, e o posicionamento do componente simplesmente mudará para cima e para baixo, com base no vídeo em reprodução.
Posicione o componente compilado
Comece pegando uma instância do componente compilado (já que cada uma terá substituições) e colocando-a na primeira prancheta do feed inicial. Com o atalho de teclado de colchete ou o painel Camada, posicione-a na parte inferior da pilha de camadas e verifique se a parte superior do componente (primeiro vídeo na pilha) está no topo.
Em seguida, clique duas vezes no componente e configure a reprodução do primeiro vídeo como Play Automatically. Para cada prancheta, somente o vídeo na visualização deve ser definido como Play Automatically. Portanto, aplique essas alterações às instâncias do componente compilado, e não ao componente principal.
Crie o protótipo das interações de vídeo
Por fim, para conectar os vídeos, você criará duas interações em cada um deles. A primeira interação será no próprio vídeo. No primeiro vídeo, selecione o vídeo no painel Camadas. No modo Protótipo, defina uma nova interação com o acionador End of Playback e o destino da próxima prancheta na série. Use a Animação automática como seu tipo de ação e selecione uma atenuação de sua escolha. Essa interação navegará automaticamente para o próximo vídeo quando a reprodução do primeiro vídeo terminar.
Nos casos em que um vídeo for longo ou o usuário quiser pular para o próximo vídeo, uma interação Arrastar poderá ser adicionada. Para fazer isso, selecione o componente de vídeo compilado e, no modo Protótipo, adicione uma interação com um acionador Arrastar. Usando a Animação automática mais uma vez, selecione a próxima prancheta na série. Agora, conforme o usuário arrastar o componente de vídeo, o protótipo animará os vídeos rolando para cima e progredindo até o próximo vídeo.
Conexão do restante do aplicativo
Pranchetas adicionais estão disponíveis na tela, repletas de vídeos incorporados. Experimente esses ativos fornecidos para criar uma visualização detalhada do vídeo na página de perfil ou crie seus próprios ativos para finalizar a experiência do aplicativo de vídeo.
Saiba mais sobre como criar protótipos com o Adobe XD e como criar outras experiências como esta com estes tutoriais de prototipagem.
