Transcrições
1. Trailer do curso: Neste curso da figma, você aprenderá tudo sobre
os recursos de prototipagem do figma e como aproveitá-los para criar um
protótipo real do zero. Você também
aprenderá fluxos de trabalho e dicas e recursos avançados
de prototipagem no Figma. E eu mesmo sou designer
de UI UX há mais de três anos
e uso o Figma há muitos anos. E sou
apaixonado por ensinar isso a outras pessoas que
foram todas automotivadas. E queremos levar
suas habilidades de prototipagem e Figma
para o próximo nível. E então, na segunda
parte, é claro, vamos criar um
protótipo do zero, que eu escolhi como um aplicativo
móvel da comunidade Figma. Agora vamos começar
com uma visão geral básica do que
é prototipagem no Figma e como ela funciona. Mas antes de começar a apresentar
a prototipagem figma, veremos o
processo de design para entender melhor.
2. PROCESSO DE DESIGN: Antes de começarmos com
a prototipagem, quero compartilhar com
vocês por que a prototipagem é tão importante no processo de
experiência do usuário. Então, o que é a experiência do usuário e por que a prototipagem é
tão importante? A experiência do usuário é a
emoção e a atitude de uma pessoa relação ao uso de um determinado
produto, sistema ou serviço. Quando estamos projetando produtos, é muito importante
garantir que esses produtos estejam realmente resolvendo um problema para o usuário e sejam
úteis para o usuário. Caso contrário, o usuário
não o usará. Muito simples, um protótipo. Você pode verificar isso logo
no início para ter
certeza de que está
seguindo o caminho certo. Se olharmos para trás,
muitas equipes de design usam o método em cascata. Essa é uma via de mão única,
sem muitos comentários e
prototipagem incluídos. Então, as equipes de design perceberam, durante a última década, que
precisavam ser outra maneira melhor testar as ideias primeiro e perceber logo no início do processo, se
as coisas funcionarem no final. Porque com o método em
cascata, uma
vez que uma aplicação está
em fase de teste, é muito
difícil voltar atrás e mudar o que já estava
na fase de concepção. Portanto, nenhum software funcional é produzido até o final do
ciclo de vida. Sua quantidade de risco
e incerteza. A abordagem de
design centrada no ser humano é muito diferente porque o ser humano está
no centro de todo
o processo de todo
o projeto. E ajuda lidar com o
feedback o mais cedo possível pois o usuário está envolvido
em cada etapa do processo. Então, o interessante aqui é que essa
abordagem visa melhorar
toda a experiência durante todo o processo, indo e voltando
e voltando. Assim, você inclui a pesquisa do usuário em várias etapas ao longo do
seu projeto. Então, é muito importante realmente
ouvir o usuário e entender
suas necessidades e desejos,
e realmente entender o que o
ajuda a processar uma tarefa específica ou geral, a entender
sua vida diária. Isso ajuda você, no final
das contas, a criar algo que o
usuário realmente precisa. É um método não linear. Assim, você pode voltar à
prototipagem repetidamente. Então, neste curso, vamos nos
concentrar na prototipagem ,
se é o mesmo método para qualquer meio que você use. E nos vemos
na próxima parte.
3. Criação de protótipos: Antes de começarmos
a construir nosso protótipo com nossa
ideia, temos em mente. Vamos falar brevemente sobre
os fundamentos da prototipagem. Assim, os protótipos ajudarão você a demonstrar e comunicar
suas ideias com outras pessoas. Podem ser seus
colegas, partes interessadas ou usuários para testar com usuários
e ajuda você a economizar tempo e dinheiro, pois você não precisa criar
o produto completo. Mas comece com um protótipo simples
e barato. Você pode testá-lo e aprender muito antes de realmente
criar o produto. Não se preocupe, se você
não for designer, qualquer pessoa pode construir um
ótimo protótipo rápido. Portanto, você não precisa de nenhuma habilidade
especial para isso. O que é prototipagem rápida? Portanto, a prototipagem rápida é
um processo iterativo. Isso significa que é repetitivo. O processo é usado para
visualizar a
aparência de
um site ou aplicativo para obter feedback e
validação de usuários, partes interessadas, desenvolvedores
e designers. Quando bem usada, prototipagem
rápida
melhorará a qualidade de seus projetos, aprimorando comunicação entre
as várias partes, reduzindo o risco de
construir algo que não alguém quer dizer isso
assim de forma muito simples. O que você precisa
para prototipagem? Um protótipo não foi projetado para ser uma
versão totalmente funcional de um sistema, mas serve apenas
para ajudar a visualizar
a experiência
do usuário com o produto final. Portanto, se a qualidade for muito baixa, as pessoas realmente não acreditarão que o protótipo é um produto real. E se a qualidade for muito alta, você trabalhará a noite toda e provavelmente nunca
terminará. Portanto, a qualidade não deve
ser muito alta, nem muito baixa, mas perfeita. Você pode criar protótipos
não apenas de telas, aplicativos ou sites, mas de
quase tudo. prototipagem é um excelente
método para testar projetos. Seja qual for o design que
você esteja projetando, você já pode começar a
pensar em quais tipos de telas ou interfaces você
precisa integrar ao seu protótipo e
realmente testar sua ideia.
4. Demonstração de projeto: Nesta parte do curso, escolheremos um aplicativo
móvel da comunidade Figma para aplicar diferentes tipos de prototipagem e
animações no Figma. Como você vê agora, um exemplo
de aplicativo móvel, Dr. app, que eu escolhi
para dar nosso exemplo. Este exemplo inclui
os diferentes tipos de protótipo, componentes
interativos, exemplos e animação para preparar uma demonstração
completa de um aplicativo e se tornar um aplicativo real
instalado em um smartphone. Agora vamos começar a
testar o protótipo do nosso aplicativo no qual eu
já trabalhei ontem. Como primeira etapa, clique aqui para
começar a abrir
o aplicativo. Próximo. Nós primeiro escolhemos, sim. Você volta para a
primeira tela a partir daqui, onde escolher o
outro botão aqui para escrever e-mail e senha. Inscreva-se. Nesta etapa, podemos escolher o sexo, feminino ou masculino Próximo, e selecionar a idade. Próximo. Aqui o usuário pode adicionar a
imagem de seu perfil, seja por câmera ou galeria. Clique aqui para concluir
as etapas de inscrição. É bom. Agora,
criamos uma nova conta. E é isso que
vamos
construí-lo do zero
nas próximas partes, é
claro, e nos
vemos no próximo vídeo.
5. Acrescente um protótipo: Então, agora vamos escolher
esse aplicativo
da comunidade aqui,
certo, aplicativo Dr.. E escolha com esta lista de
opções Figma. E agora vamos pesquisar em nosso aplicativo.
Sim, isso mesmo. Clique aqui. Obtenha uma cópia para colocar o aplicativo no espaço de trabalho
da sua conta. Então é isso. Nosso aplicativo está pronto para adicionar um protótipo e
animações a ele. Então, vamos agrupar essas
duas telas para
movê-las , porque não
precisamos, em nosso exemplo, vamos escolher
esse aplicativo porque vejo que ele contém diferentes tipos de
telas das quais nós pode aplicar várias ferramentas Figma. E agora eu quero
preparar o espaço de trabalho, a localização de algumas telas. Eu coloquei isso aqui e isso aqui. Em seguida, terminamos com o resto. E isso aqui, ampliamos aqui. Copie e cole para esta tela. Vamos renomeá-lo
criando uma conta. E agora selecione os
elementos e exclua-os. Usaremos essa tela
para carregar quando o usuário estiver aguardando a
criação de sua conta. Depois de mudar esse
texto para criar uma conta e movê-lo para
o centro da tela, vejo que esse lugar é o
melhor para essa frase. Além disso, pela minha experiência
, a localização dos indicadores de carregamento está sempre
no centro da
tela. Aqui mesmo. Reorganize este
um pouco para a esquerda. Comece agora a fazer a prototipagem
da primeira tela. Clique aqui no protótipo. Selecione a tela
e
vincule-a à segunda tela
para criar essa conexão
entre elas. Essa janela que apareceu contém todos os detalhes da
interação. Aqui está a natureza
da interação escolhida. E aqui está a ação
feita pelo usuário que
acionará a ação do
aplicativo ao tocar, ao arrastar enquanto pressiona. E depois do atraso,
quando o escolherá agora e alterará o atraso
para 1.500 milissegundos. Então, aqui está o tipo de animação por enquanto, escolhemos o Smart Animate. Esse é o fim da animação. Escolhemos novamente essa animação
linear e alteramos esse parâmetro de atraso de animação para
400 milissegundos. Mas você pode escolher
a interação nos detalhes da
animação que
deseja para construir seu
primeiro protótipo. Vamos tentar agora essa
primeira interação. Como você pode ver, passamos da tela de um para o outro com a
interação escolhida. Agora conclua a segunda
interação com o mesmo método. Mas para essa interação, escolhemos a animação push e alteramos o atraso para
300 milissegundos. Entre essas duas telas, usamos o mesmo tipo
de tradução e mantemos os mesmos parâmetros
da tela anterior. Agora, sim, escolhemos a tela
de login. Aqui, apenas verificando os detalhes da
interação. E, como os outros, mantenha
os mesmos parâmetros. N para n 0 inscreva-se. Aqui temos uma conexão da tela de login com este
botão para a página inicial. Nesse nível,
fazemos as interações
entre as etapas de registro da mesma forma. E desse botão
para a próxima tela. Em seguida, finalize para todas as telas
com o mesmo método. Na minha opinião, que esses
parâmetros têm links entre telas é especial
para esse tipo de aplicativo. Podemos ver em outros setores de aplicativos que o tipo de animação pode ser alterado para proporcionar outra experiência
para o usuário, por exemplo, em aplicativos de jogos, sempre as transições entre
as telas são muito mais rápidas. Além disso, alteramos a
duração para 3.000 milissegundos e escolhemos
o tipo de animação. Animação inteligente. E para essa linear, também para a duração da animação, você deve aumentar
o parâmetro para 500 milissegundos retornado. Agora no centro do espaço de trabalho. Vamos mudar para
essa interação
o tipo de animação
para animação inteligente. Linear de 500 milissegundos. Vamos testar agora o resultado
dessas interações. Clique aqui para testar. Próximo. Aqui,
adicionaremos um botão Voltar. Continue agora com essa opção
na tela de inscrição. Inscreva-se e encerre. Essa é a interação de atraso para abrir a tela inicial
do aplicativo. Volte para o espaço de trabalho e amplie aqui. Em primeiro lugar, adicionaremos o ícone de retorno às telas. Aqui, a partir do ícone, se eu inserir diretamente
neste campo, volte para pesquisar um ícone. Aqui está a lista de
ícones que podemos escolher para usar no
retorno entre as telas Escolhemos esse ícone, ícone de
importação, Ótimo, o
ícone foi adicionado com sucesso. Vamos apenas
redimensioná-lo e movê-lo. Aqui à esquerda do cabeçalho. Você pode escolher outros tipos de
ícone no ícone. Se eu fizer um plug-in, recomendo
usar esse plug-in porque ele contém muitos tipos de ícones de acordo com
os
requisitos do seu aplicativo. Mude a partir daqui
sua cor para branco. E com copiar e colar, adicionamos para os outros. Novamente, para isso, adicione o mesmo ícone e encerre as outras telas para que fique funcional e possamos
adicionar uma interação. Você deve clicar no ícone
e escolher a seleção do quadro. Agora vamos adicionar a interação de
retorno para telas que contêm ícones, mantenha as mesmas configurações aqui. E para animação,
escolhemos Aumentar a duração para 400 milissegundos e
continuamos adicionando uma interação
para essa tela. Mas não funcionou corretamente. Adicionaremos a seleção de quadros
ao resto das telas. Sempre é necessário
ativar essa opção para que os componentes possam ser usados
nas interações
entre as telas. Passamos agora à ação de
tradução e tentamos adicioná-la novamente. Mantenha as mesmas opções e
continue nas próximas telas. Não é necessário definir as configurações do link para o
restante das interações. Figma mantém automaticamente as mesmas configurações de
tela anteriores. Novamente, testaremos
o progresso
que fizemos . Muito bom Todos os ícones estão voltando ao
modo de design e ampliando aqui
nesta tela. Copie agora a tela do
painel e renomeie o painel sublinhado como uma. E os dois segundos, o
painel sublinha dois. Aqui, adicionaremos um pop-up quando clicado na
imagem do perfil. Adicione um retângulo
clicando na zona moldada. Para personalizar
uma camada preta, usaremos
uma maneira muito simples criar uma tonalidade preta
na tela principal. Portanto,
mudamos a cor
do retângulo para preto e
diminuímos a intensidade da cor dessa forma depois de ajustar o retângulo em toda
a tela. Mas esse retângulo
para o pop-up, vamos escolher neste
lugar aqui à direita, na parte superior, logo acima
da imagem do perfil. Aqui, mudamos o
raio da forma. Escolheremos uma
cor branca, é claro. Agora, adicionando os
elementos do pop-up, começando com a foto do perfil. Este link para entrar
na tela do perfil. Você também pode personalizar
o tamanho da fonte para 25 para ser legível para o usuário. Adicionar o segundo link para
entrar nas configurações do perfil. E, finalmente, o botão de sair. Aqui, para o link de desconexão, podemos escolher a cor vermelha para diferenciá-la
dos outros botões. Você também pode adicionar um
ícone de saída do plug-in. Escolheremos esse ícone para proporcionar uma boa experiência
ao usuário. Personalizamos a
altura e a largura
do ícone para que fique mais
legível no pop-up. Mudando novamente a cor para vermelho. Em suas escolhas, você
deve sempre levar em consideração qualquer
tipo de usuário que usará seu aplicativo e garantir a mesma
experiência para todos. Adicionamos o
protótipo necessário para esse pop-up. Escolheremos o estilo para
mostrar e ocultar o pop-up. Ao clicar na imagem. Para o botão de saída,
você deve ativar a seleção de quadros para usá-la na interação do protótipo. Agora, escolhemos os detalhes de
interação que são compatíveis
com nosso aplicativo. Ótimo, vamos tentar levar
nosso protótipo a esse nível. Bom. O pop-up funciona bem. Agora, voltando ao nosso espaço de trabalho para concluir o resto
do protótipo. Continue agora, adicione
um pop-up para escolher
a opção de quem pode alterar
sua foto de perfil. Primeiramente, alterei o nome
dessa tela para mudar o nome. E copie-a aqui,
onde podemos criar nossa imagem de mudança pop-up
como um nome para isso. Na tela inicial, adicionaremos um ícone aqui, o que significa que podemos
alterar a foto do perfil. Clique com o botão direito aqui. Ícone de plugins do phi. Procure aqui por um ícone de câmera. Agora podemos usar esse ícone, mas todos podem
escolher seu próprio ícone. Oh, isso é importante
nesta parte. Então, podemos colocá-lo em uma elipse, escolhendo essa parte
da elipse de formas. Agora, mova o ícone
para o centro do círculo. O ícone ficou oculto. Está abaixo do círculo. Com essa opção,
Bring to Front, ela pode se mover para cima. Explicamos exatamente o uso dessa opção
no primeiro curso. Começando com o Figma, nós o redimensionamos e movemos assim. Agrupando os dois assim
para juntá-los. Agora vamos movê-lo para dentro
de uma foto de perfil. Agora, na segunda tela, adicionaremos um pop-up
para que o usuário possa escolher a forma de
alterar sua foto de perfil, qualquer que seja, escolher uma
imagem da galeria ou tirar uma foto com
seu smartphone. Primeiro, adicionaremos
uma camada preta usando retângulo com baixa
transparência da cor preta. Vamos configurar os parâmetros de
aparência do retângulo como na tela anterior. E agora adicione um
retângulo para o papai. Vamos mudar a
cor do pop-up para branco e adicionar dois ícones, um para a galeria e
outro para a opção de câmera. Vamos personalizar esses dois
ícones aqui. No pop-up. Mudaremos a largura e altura do ícone da câmera para 30 e o mesmo para o outro ícone. Seguindo o feedback do
meu projeto anterior, você deve sempre usar
os ícones para
facilitar que o usuário
faça sua escolha rapidamente. Então, adicionaremos as palavras, câmera e a galeria com
a mesma fonte para isso. Nós os reagrupamos assim
para personalizá-los juntos. Não se esqueça de adicionar
o botão
Voltar à tela inicial. Vamos agora adicionar a
interação entre esses quadros. Mude para o modo de protótipo. Escolha esse ícone e
vincule-o à tela abaixo. Para animação,
escolhemos instantâneo. E a interação traseira
com a primeira tela. Aqui, mudamos um pouco os campos de entrada do campo
refeição e senha. Mas primeiro, testaremos nossa
última mudança de protótipo. Vamos começar. Livros. A palavra câmera
não existe no modo de protótipo. Aqui à esquerda, verificaremos a localização dessa palavra
e compararemos com as outras. Como você vê, ele deve ser movido para
cá logo abaixo da galeria. Não sei por que
ele é colocado aqui, mas sempre cada componente deve estar sob a tela
correspondente. E vamos tentar novamente. Ótimo, o pop-up
apareceu corretamente. Agora vamos voltar às
mudanças neste campo. Primeiro, ajustaremos
essa entrada de texto para a largura 300 e para a altura 40. E também alteramos
o tamanho da fonte para 14. Com o mesmo método, alteramos o segundo campo de senha. Estamos fazendo essa alteração
porque vejo que esses campos são difíceis de ler
para o usuário. Depois,
adicionaremos ícones para oferecer uma experiência melhor do que
a versão inicial. Quero mover o
e-mail e a senha para a esquerda
para adicionar ícones aqui. Então, a partir do ícone, se eu plug-in, importamos dois ícones, um para
a senha e outro para o e-mail. Quero escolher um
ícone como pessoa para o campo
masculino e uma
chave para a senha. Depois de importar os ícones, passaremos para
a esquerda do campo, mas devemos
personalizá-lo acima de tudo. Agora eu quero mudar
a cor para esperar. Ótimo. Agora, a tela
ficou melhor. Mesmo assim, você deve ajustar
essa senha esquecida. E o subtítulo da tela. Agora, selecionaremos
todas as alterações que
fizemos para copiar
na tela abaixo. Antes de excluirmos isso, coloque
os novos campos em seu lugar. Cole aqui e coloque
no centro da tela. Ao contrário do outro, nós mudamos isso. Ótimo. Agora terminamos
desta tela e nos vemos
na próxima parte.
6. Como adicionar animação inteligente: Começamos agora com esta tela para adicionar alguma animação
a essa imagem, alterada para o modo de design. Primeiro, fazemos uma
cópia para a tela. Nós o copiamos logo abaixo do outro. Sempre que quiser adicionar
uma animação em uma tela, você deve duplicar a tela inicial e fazer
as alterações na segunda. E então escolhemos a
melhor configuração e o tipo de
transição entre elas. E mudamos o nome para
on-boarding para apontar para. Agora, o que vamos fazer? Deslizamos a imagem
levemente para cima,
assim, para que a
animação em movimento apareça para o usuário quando o
mouse passa sobre a imagem. Vamos adicionar agora o link
entre essas duas telas. Então, preto, apenas a imagem
da primeira tela e vinculado
à segunda
tela, desta forma. Agora você deve alterar
a opção enquanto passa o mouse e alterar o
efeito de animação para smart animate. E também podemos
alterar o atraso da animação para 500 milissegundos. Não se esqueça de
excluir este link. Deixamos apenas os
links antigos da tela inicial. Vamos experimentar as mudanças feitas. Como você vê agora, quando
você passa o mouse sobre a imagem, a
animação começa. Passamos para a outra animação neste botão, comece. Faremos o mesmo que
a outra animação. Copie a
tela inicial e cole aqui. Altere o nome para
on-boarding 2.3. Só para
diferenciar as telas. Mudaremos a cor ou aumentaremos a saturação do azul. Assim. Da mesma forma, excluir os links
vem da tela inicial. Removemos os links
entre
as telas para fazer nossa
escolha de animação. E adicione uma nova interação entre esse botão
e a tela acima. Deixamos os parâmetros
como a primeira animação. Mas você deve adicionar o link
principal quando clicado, Começar, para passar
para a próxima tela. Muito bom. Até mesmo os parâmetros
estão configurados corretamente. Basta alterar o tipo de
animação para push e reduzir o tempo de
animação para 300 milissegundos. Aqui, cada um de vocês pode escolher sua própria configuração para fazer
outro tipo de animação. Vamos experimentar agora as alterações
feitas no botão. Ótimo. A animação
está bem configurada. Quando você passa o mouse sobre o botão. E depois de alguns milissegundos, a cor muda com
uma animação suave. Só que notei que é
necessário diminuir um pouco o
atraso dessa animação. Para esta animação
até 300 milissegundos. Tentamos em outra hora. Bom, está melhor agora
com as mudanças mais recentes. Então, agora fazemos tudo isso de novo
com a segunda tela, a animação do botão
e a imagem. Agora é bom que, depois de adicionar as animações necessárias
para essa tela, elas são semelhantes às animações da
primeira tela. Vamos tentar no modo de protótipo. Aqui, mudamos o tipo de animação em comparação com
a outra tela. Opa, eu esqueci
de adicionar o link. Quando eu clico no botão. Voltamos aqui
no modo de protótipo. Simplesmente o adicionamos como
nas outras interações. Deixamos que, por
padrão, esteja bem configurado. Apenas uma observação aqui. Sempre as configurações
das interações permanecem como a última
configuração adicionada. Verificamos agora o
resto dos links. E vamos tentar novamente. Bom, todas as interações
são parametrizadas. Na próxima etapa, adicionaremos animações
diferentes
nesses botões. Copie, inscreva-se na tela e cole aqui logo abaixo
da tela inicial. E mudou seu nome para se inscrever? Sim. Da mesma forma, passeie outra tela e a
mova abaixo dela. Aqui, mudamos o
nome para cadastrado. Não. Uma das telas para a animação quando o
usuário quer escolher? Sim. E a outra tela para
a animação de NO Choice. Como visto na demonstração do protótipo no início do curso, quando o usuário passa
o mouse sobre um
dos botões sim ou não, a cor muda
de azul para branco. Então, para começar, você precisa mudar a cor dos dois
botões para azul. Aqui escolhemos a mesma
cor dos botões, sim, com esse seletor de cores. Mas a palavra NÃO
desapareceu porque ela
era da mesma cor, azul. Então você deve
mudar a cor dele para branco e ativar este leilão. Traga para a frente. Agora
terminamos essa tela. Vamos para o próximo. Para essa tela, adicionamos
a animação do botão. Sim. Vou mudar a cor
para branco para isso. E adicione esse traçado de opção para personalizar um contorno
como o outro botão, muda de cor para azul
com a cor do seletor. Novamente, no mesmo caso, você deve mudar a cor
da palavra sim. Em segundo lugar, mudamos a cor
dos botões NÃO, para azul. E mais uma vez, Bring to Front. Vamos continuar com
a segunda tela, mudando a cor dos botões, diferentemente da tela anterior. Mas primeiro vou mudar o tamanho da
borda para ficar mais claro. Por exemplo, eu consertei um gratuito. Essa tela está quase pronta, como outro botão, só vou fixar o tamanho da
borda em três. Vamos mudar agora para o modo
de protótipo para adicionar a animação
entre as telas. Em primeiro lugar, removeremos todos os links dessas
duas novas telas. E para a
tela inicial, começamos com sim, removido daqui. E vincule a tela de login
com a tela de inscrição Sim,. Escolhemos esse tipo de
animação apenas para dominar as diferentes
ferramentas do Figma e ver mais técnicas que podem
ajudá-lo em seus próprios projetos. E agora adicionamos o link de
animação de interação: sim, com a tela logo abaixo, eu escolho, ao passar o mouse sobre o
leilão, acionar a animação e alterar
a animação para dissolver. E o mesmo vale para o botão NÃO, desvincule-o da tela de inscrição. Desça até esta tela, onde adicionamos a interação do
botão do painel. Permanecemos agora que a
conexão entre a tela inicial e a
tela abaixo se inscreveu. Não. Bem,
terminamos essas duas animações.
Vamos tentar agora. Misto. Como você observa aqui, quando você passa o
mouse sobre um
dos botões, a cor muda. Clique. Sim, direcionamos
para a tela de login. E o mesmo para o botão NÃO. Opa, notamos aqui que os campos de
e-mail e senha desapareceram assim
na tela de login. Voltamos ao nosso espaço de trabalho
para corrigir o problema. Altere o modo de design. Sempre escolhemos essa opção, seleção de
grupos, para
facilitar a movimentação dos componentes sem alterar as medidas
entre eles. Primeiro, selecionamos todos os componentes e crescemos com essa opção. Em seguida, colocarei no centro
da tela e clicarei
em trazer para a frente. E tentamos novamente. É bom agora que os campos tenham
aparecido nas duas telas. Então, continuamos adicionando outra animação sobre as
opções masculinas e femininas nesta tela. Aqui, adicionamos uma animação simples quando o usuário quer
escolher uma de suas opções, o círculo se expande um pouco, como visto na demonstração do protótipo. Como nos outros exemplos, fazemos duas cópias
da tela inicial. Aqui, basta mudar
o nome das telas para diferenciá-las. Começamos com a opção de correio. Selecione o botão e altere
a largura e a altura para 105. Agora vamos
adicionar outro tipo de animação que usei
em meus projetos pessoais. E, como eu disse,
todos podem inventar outros tipos de animações e
fantasiá-las como quiserem. Além disso, posso alterar
o tamanho da fonte deles e colocá-los
no centro do círculo. Bom. Essa tela está pronta. Podemos passar para o próximo. Por isso,
faremos o oposto. As mudanças estarão
no botão feminino. Da mesma forma, você deve alterar o tamanho do botão e o tamanho da fonte de f. Agora que as telas estão prontas, passamos para o modo de protótipo. Então, na tela inicial,
seleciono essa opção e a
vinculo à tela abaixo, onde posso escolher
enquanto passo
o mouse para ver os parâmetros de interação e modo
instantâneo da animação. Terminamos com
o leilão feminino. Vou vincular da
tela inicial à segunda tela, mantendo as mesmas configurações
para os detalhes da interação. Vamos experimentar agora essas
últimas mudanças. O botão feminino não
está funcionando. Volte ao espaço de trabalho
para verificar o problema. Eu seleciono o piscar feminino. Você deve mudar
aqui enquanto estiver pairando. Opção. Ótimo, volte agora
para conferir o protótipo. Agora, o aplicativo está funcionando bem. Aqui, apenas concluiremos as etapas até a tela inicial. Adicionaremos um spinner
aqui nesta tela, logo acima da criação da conta. É necessário, na experiência
do usuário,
adicionar um indicador como o spinner para que
o usuário saiba que há um processo em
execução no aplicativo. E nos vemos
na próxima parte.
7. Como criar um girador: Então, aqui vou
adicionar nosso spinner. Vou criar um retângulo para
ver nosso spinner também. Eu vou criar
um círculo com você. E usaremos a
maneira mais simples de preparar nosso spinner. Aqui, vou mudar a cor
do retângulo para ler e personalizar o tamanho do
círculo de 500 por 500. Então você pode ver aqui que
temos esses arcos aqui. Então, podemos vir aqui. Aqui. Vamos
fazer com que seja cerca de 65 por cento. E se você puder
deixar assim, ou se quiser criar
um raio de fronteira aqui, 43 é bom para mim. Então você pode ver que
você pode
movê-lo e, mais tarde, é
o que vamos fazer. Então esse será nosso
primeiro encontro com o spinner. Podemos renomeá-lo para
a parte superior direita do spinner. Ok, esse
será nosso primeiro estado. Agora vamos
duplicar outro. Então, o que vamos fazer
no próximo estado
será girar para baixo. Para isso,
queríamos cerca de 90 graus. Aqui vamos
mudar o nome do segundo
elemento para spinner. Parte inferior direita. Adicionamos os estados
esquerdos do girador, apressado ou outro elemento
e o separamos assim. Depois de girá-lo para 180 digiro e mudar o nome para girar para a esquerda. E terminamos agora
com o último estado aqui e mudamos sua divagação assim. Além disso, mudamos
o nome no canto superior esquerdo. Então, vamos criar um
corpo com todos esses componentes. Vamos
combiná-los como variantes. Essa
será a posição. Portanto, é importante que, quando
você vai
animar algo de forma inteligente, precise dos mesmos
nomes. Elipse 111. Vamos começar com este e
mudar para o modo de protótipo. Agora, vinculamos isso
ao elemento inferior direito
aqui nos detalhes da interação, escolhemos a opção após atraso e alteramos a duração
para um milissegundo. Deixe isso na parte inferior direita. Mas para o estilo de animação, podemos escolher a animação
inteligente e, para isso, escolher a opção
de entrada e saída fáceis. Também corrija isso para
200 milissegundos. Da mesma forma que você
precisa completar o
resto dos elementos. Mantenha as mesmas configurações aqui. Altere isso para após atraso. Mas estou voltando ao
último estado porque esqueci alterar
a duração
para um milissegundo. Concluímos agora a
interação do último elemento. Adicionamos esse tipo de animação para que, após cada arco, gire até o final de seu ciclo e, em seguida, a outra arte comece e
o mesmo para as outras. Para ter um spinner
completo. O girador está pronto, basta ir aqui no lado esquerdo e mudamos para a navegação de ativos. Mas, afinal, você deve
mudar a cor dos
elementos para preto. Altere o modo de design. Selecione os estados e escolha aqui
a cor preta. Volte aos ativos agora e faça um zoom aqui para ver a tela de
criação da conta. Arraste o componente desta forma. Mas há um pequeno
problema aqui em que você deve diminuir o
tamanho de cada componente. Agora terminamos de reduzir o tamanho de todos os componentes. Voltamos agora para a tela. Como você percebe, o
tamanho é reduzido e mais consistente com o
resto dos elementos da tela, e escolhemos a posição
superior
correta iniciar a animação. Movemos o componente
no centro desta forma. Bom. Vamos experimentar este spinner. Basta escolher essa tela
e clicar aqui para começar. Também notamos que o tamanho do spinner é ainda maior do que
os elementos na tela. Então, voltamos ao espaço de trabalho e você deve diminuir o tamanho
de todos os estados dessa forma. Bom, movemos um spinner
para o centro assim. E tente novamente. Aqui, resta apenas alterar a velocidade de movimento
de cada componente. Para ter uma animação suave, você deve
ajustar o atraso de cada interação
entre os arcos. Eu seleciono o primeiro
link e
altero a duração da animação
para 100 milissegundos. E repita o mesmo para
o resto dos estados. Acho que essa mudança nos
dará um resultado melhor. Agora é bom continuar, mas você pode escolher
outros tipos de animação e outros detalhes de
interação. Todos à sua
escolha podem adaptar o girador e há outro tipo de indicador de carregamento. Todos podem experimentar
outro tipo com o mesmo princípio de animação
inteligente
do spinner, por exemplo, carregando indicadores de
progresso linear do comprador. Terminamos o protótipo
dessa parte de um
aplicativo do Dr. e removemos
essas duas telas agora. Agora terminamos nosso
projeto a partir do qual usamos várias técnicas de prototipagem
e diferentes tipos de animações que podem
ajudá-lo em seus próximos projetos. E nos vemos
na última parte
do curso, onde
veremos o resultado final.
8. Visão geral final: Finalmente, mude para o modo
de protótipo. E vamos experimentar
nosso aplicativo. Clique, comece e continue a abrir
nosso aplicativo. Escolha essa opção para
passar para a tela de inscrição. Aqui, testando esse ícone de câmera, no qual podemos adicionar as telas
correspondentes para essas duas opções,
câmera ou galeria. Para esta etapa, o
painel é aberto, onde ele pode sair e voltar
à tela de login. Agora terminamos e nos vemos
no próximo curso.