Transcrições
1. Apresentação: Olá, bem-vindo à série de ganhar Figma com projetos
criativos simples Hoje, nesta aula,
praticaremos e aprenderemos como criar esse
lindo formulário de envio de avaliações. Tudo que você precisa é do seu dispositivo, da conta
Figma e dessa
classe, e pronto Esta aula será
totalmente adequada para iniciantes, com guia
passo a passo
pelas cruzes . Então, vamos começar.
2. Como entender a necessidade do usuário: Antes de iniciar nosso
projeto de criar uma interface de feedback
responsiva e interativa, deixe-me decifrar algumas
das razões básicas pelas quais a indústria precisa disso ou por que esse é um dos
pontos mais problemáticos dos usuários, marcas Com o uso intenso do aplicativo
para atividades do dia a dia, sejam compras,
roupas, mantimentos, qualquer aula,
aprendizado ou reservas, digamos que apenas esta aula, eu adoraria que você
compartilhasse
suas opiniões e me recebesse algumas
boas críticas na guia Isso será mais do que fabuloso. Mas a parte difícil é
que, muitas vezes, usuário acha chato ou
demorado abrir o formulário e passar pela o
usuário acha chato ou
demorado abrir
o formulário e passar pela coisa chata de
escrevê-lo ou preencher as estrelas, embora não
seja uma coisa muito importante,
mas, como usuário, você mesmo concordará que é
difícil e às vezes
frustrante passar essa experiência sempre mesma forma chata ou de experiência, mesmo que você esteja disposto a enviar um, mas
não consiga evitar. O desafio em um
formulário de avaliação é que tudo, até mesmo uma classificação por estrelas ou uma avaliação
escrita palavra por palavra, custe o que custar,
mesmo um pequeno passo, parece tão grande e pesado
que, na perspectiva do usuário, muitas vezes devido à WUI ou especialmente à experiência
do usuário, muitas vezes devido à
WUI ou especialmente à experiência
do usuário,
o impede de
enviar uma avaliação para você Mas, ao mesmo
tempo, como designer, acho que o desafio
é cortar
a monotonia da
experiência, de qualquer Nosso objetivo é cortar a monotonia
e alcançar o resultado. Então, eu gostaria de acrescentar
que existem algumas maneiras de fazer isso. Um, botão play. Há um botão de envio simples. Você pode simplesmente
usar uma brincadeira, torná-la interativa, animada, qualquer coisa,
ou, em segundo lugar, suas entradas de avaliação, suas estrelas,
seus Imoges,
qualquer coisa que você esteja estrelas,
seus Imoges, usando como informação sobre o que eles
vivenciam ou como vivenciam,
algo que pode ser realmente divertido, como um efeito de
quem é ou
algo parecido,
um zoom in Zoom out, qualquer coisa um zoom in Zoom out Altere o layout e
torne-o interativo, talvez uma pergunta
após a outra, em vez de uma só vez. Depende totalmente de você. Mas, ao mesmo tempo, lembre-se de
que não seja muito
criativo ou fale alto demais ao criar interações
como usar várias coisas em
um único formulário, uma
única interface de usuário. Isso também
pode prejudicar nosso lema de ser interativo e divertido para uma experiência de usuário feliz Portanto, aconselho você
a se limitar a uma ou duas coisas
interativas um formulário. Então, vamos começar.
3. Como decodificar o processo de revisão: Em seguida, antes de criar
nosso formulário de avaliação para o aplicativo, vamos entender quais são as coisas
necessárias em um formulário de avaliação. Vamos decodificá-lo um por um, usando todos esses exemplos Como na tela, você pode ver o básico
que notamos
nesses exemplos é que eles perguntam ou avaliam
em estrelas,
Imogs, em termos da experiência de compra ou
da experiência
gastronômica ou ambiental
como um todo Além disso, em alguns casos, há a seção
de texto escrito para ver suas opiniões,
ver suas avaliações. Essa é uma das coisas
essenciais. E há um
título para este formulário, talvez compartilhe sua experiência, avalie sua experiência,
qualquer coisa assim. Existe um botão de envio
para que isso seja definitivo. Então, essas são as coisas
básicas que estão incluídas em qualquer formulário de
envio de avaliação. Não com base no tipo de
nicho com o qual estamos falando. Você pode inserir todas
essas seções, essas coisas em seu formulário. Pessoalmente, gosto de
coisas mais visuais que possam agradar
aos usuários e atraí-los
, sem parecer tão pesadas. Aqui, basta pegar seu
bloco de notas ou algo assim para anotar quaisquer pontos
interativos, coisas, elementos que
você usará em
seu formulário de avaliação,
talvez uma seção de nomes, ou será
inserido automaticamente a partir dos dados do usuário que
já temos uma avaliação com estrelas
ou a opção de resposta do Imog E talvez um lugar para escrever
e um botão de envio. Essa é uma das coisas
essenciais que você deve incluir em seu formulário. Portanto, cabe a você
criar sua lista e torná-la a próxima lista para
iniciar o processo de design
4. Minhas respostas: projete o painel: Olá, estou na minha tela Figma com uma moldura pré-construída da tela
do Android Você pode selecionar rapidamente uma
e alterar a cor base
da moldura ou adicionar um retângulo colorido como plano de
fundo da moldura Eu adicionei alguns círculos que vou
usar como botões. Para a resposta do feedback
e mais um botão, que dirá enviar, você pode simplesmente dedicar
seu tempo e criar esse layout básico usando os
círculos e o retângulo no lugar ou apenas com o círculo e, em seguida, definir as cinco ou quatro respostas que você acha
que pode precisar Ajuste o tamanho dos círculos de
acordo com sua escolha, mas certifique-se de que não seja nem muito grande nem muito pequeno
para ser clicado. Segure a tecla Shift e toque em cada um
deles e selecione-os juntos, basta segurar tecla Alt e arrastar para
torná-lo uma duplicata Ou você pode simplesmente pressionar Control D para duplicar
tudo no lugar Agora selecione cada círculo um por
um e
substitua a cor de preenchimento preenchimento da
imagem e selecione sua
imagem na pasta que você
baixou essas imagens no seu
dispositivo ou qualquer coisa. Aqui está. De forma semelhante, vou adicionar
todas as respostas da mesma forma
em
cada círculo. Aqui estou tendo quatro respostas, então vou ajustar rapidamente o tamanho
do ícone de acordo. Eu reuni essas
respostas PNG a partir do arquivo EPS. Você também pode fazer isso com isso
ou simplesmente
obtê-lo do estoque da CN ou de
outras calorias vetoriais. Depois de ajustados, todos os ícones de feedback de
resposta. Agora é hora de adicionar o
texto a cada um deles. Use a ferramenta Texto, o atalho D e adicione a
legenda respectiva a cada ícone Arraste e chute a caixa de texto
e adicione seu texto aqui. Basta ajustar o tamanho
e o tipo da fonte de
acordo com sua escolha. Para mim, isso
parece ser bom. Mantenha pressionada a tecla Alt e arraste
para duplicar e colocar a legenda
abaixo de cada ícone, e estamos prontos com o conjunto básico de ícones
para o feedback Agora é hora de
fazer isso funcionar. Como clique em idiota destacado
e tudo responsivo. Vamos para a próxima lição.
5. Componente responsivo: design e configuração: Espero que você esteja pronto com
seu conjunto de ícones de feedback. Agora é hora de criar
um novo componente. Então, para isso, selecione todo
esse conjunto arrastando
e selecione-os juntos. Agora, no painel de design, selecione o ícone de diamante e escolha fazer com que ele
crie um conjunto de componentes. Agora, basta segurar e arrastar e esse componente sai
do quadro de saída desta forma. Agora, ao selecionar
o primeiro componente, clique nesse ícone de adição,
naquele ícone de diamante
com o símbolo de adição, e isso fará com que a duplicata seja a variante
dois do componente Novamente, da mesma forma, selecione a parte superior, selecione o conjunto de
componentes na parte superior
e, novamente, da mesma forma, clique
no ícone de mais diamante e isso criará novamente uma
variante próxima a ela. Da mesma forma,
continue e eu criarei mais
quatro variantes que
o componente original e o resto são quatro, porque meus ícones que estou tendo aqui, as respostas são quatro, então serão
para o padrão, e o resto são para todos os
quatro ícones individuais. Portanto, se você tiver cinco respostas, coloque as cinco variantes ao
lado da padrão. Como o número total de
variantes será seis, o número
total de componentes
definidos será seis. Está tudo bem? Agora vamos fazer alguns ajustes
em cada uma das variantes. Como quero destacar o
primeiro ícone na variante,
adicionando a
cor de fundo a esse ícone, coloque a solda aqui e, em seguida, arraste e
preencha a cor abaixo da imagem Isso faz com que o primeiro ícone se
destaque na primeira variante. Da mesma forma,
destacarei o segundo no
segundo e o terceiro
no terceiro e assim por diante. Agora estamos prontos com um design de conjunto de
componentes. Não se apresse e defina seu componente de feedback,
pronto com o design. Uma vez feito para
criá-lo responsivo, vamos para a próxima lição Agora, antes de criar
o protótipo, vamos renomear rapidamente
as variantes de
uma maneira melhor para entender
qual variante está tendo, o que eu posso destacar Mas como renomeá-lo? Simplesmente
renomeando o painel de camadas Não, um grande não. Isso apenas prejudicará todo
o design e criará
um erro em seus componentes Portanto, a maneira correta é
simplesmente selecionar uma
variante específica como essa. Então, na seção de componentes
aqui no painel de design, você verá uma propriedade lá, clique abaixo do
ícone suspenso e selecione renomear Agora, basta digitar o nome
que você deseja usar mesma forma e renomear cada
variante do componente da mesma maneira Acabei de
notar uma coisa: esqueci de
destacar o nome
desse feedback
destacado em particular Então, para isso,
vamos mudar rapidamente a cor do texto em
cada item destacado. E agora é hora de tornar isso responsivo
e interativo Mas como mudar para o painel do protótipo e
selecionar o primeiro componente, o padrão, e depois tocar
duas vezes para selecionar o primeiro ícone específico,
a primeira resposta Agora eu seguro o ícone de
adição e o arrasto, conecto à primeira
variante como esta. Para essa configuração interativa, defina-a ao toque
como gatilho. A lista é boa em animação. Selecione a
animação inteligente, gentil. Agora, da mesma forma, arraste
o ícone de adição do segundo ícone somente da variante
padrão e arraste-o até a
segunda variante. Repita o mesmo processo,
alterne e conecte
cada ícone, cada resposta do componente
padrão definido
aos respectivos
e repita o mesmo para as demais variantes
e ícones de cada um deles. Espero que você tenha sido bem
claro sobre esse processo. Caso contrário, diminua a velocidade e
pratique em seu projeto. Se ainda houver
alguma confusão ou erro,
basta fazer uma captura de e enviá-la para
a guia de discussão, e eu
adoraria ajudá-lo Se tudo estiver no lugar certo, arraste e conecte cada ícone de cada variante de componente
às respectivas
variantes de componentes com as quais trabalhar.
6. Projetando a tela e palavras finais, aula 4 feita com Clipchamp: Quando estiver pronto com a interação, agora adicione todo o componente ao quadro
do Android a partir
do painel Assets. Basta
colocá-los na tela. Você pode ajustar o
resto no lugar. E agora, para criar essa tela de aplicativo
móvel, você pode usar imagens ou
vetores como fizemos antes R Agora selecione o nome
do quadro superior, segure AlternTrag para criar
o quadro duplicado, exclua todo o resto e substitua a imagem por
outra como esta Quero que isso seja mostrado na resposta
do botão de
envio. Então, se quiser,
basta adicionar mais elementos à tela de feedback e
à tela de agradecimento. É como adicionar um logotipo para
parecer profissional. Algum
elemento de linha, cor ou forma com o qual trabalhar. Próxima etapa. É mudar nosso botão de
envio para
a página de agradecimento para que ele se torne
interativo em uma guia e essa tela apareça. Podemos fazer isso simplesmente
a partir do painel do protótipo e manter as
configurações restantes iguais Depois de concluído, vamos revisar todo o
nosso projeto. Veja como está funcionando sem problemas. Quando tocamos em cada um dos ícones, ele funciona assim
e, quando tocamos em enviar, ele revela nossa tela de
agradecimento Isso não foi divertido? Espero que tenham
gostado desta aula, da aula e de todo o
processo comigo. Se você
achou essa aula útil, envolvente e teve algo a aprender com ela, compartilhe suas palavras na seção de resenhas, pois
isso não apenas anima meu dia, mas também me motiva a
criar algo novo para
você aprender e
aprimorar criar algo novo para seus conjuntos de skins Além disso, aguardando ansiosamente por
seus projetos criativos, faça uma captura de
tela do
seu trabalho ou exporte o JPG ou apenas grave-o e faça o upload na
seção de projetos para compartilhar sua criação comigo e com
essa grande Além disso, se você achar essa aula envolvente e quiser saber mais, siga-me aqui para se manter atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
