Transcrições
1. Apresentação: OK. Como você está? Eu acabei de me divertir com este jogo Mozi fofo e engraçado por
um segundo este jogo Mozi fofo e engraçado por
um segundo. Você também gosta? E se eu disser tudo é feito em sigma E sim, isso também,
sem nenhum plug-in. Você gostaria de se juntar
a mim e criar este jogo divertido como seu
projeto de classe para esta aula? Olá, bem-vindo à
próxima lição
da divertida série de
filmes didáticos com projetos simples e
criativos Hoje, nesta aula, praticaremos
e aprenderemos como
fazer esse fofo jogo de Tap
and play. Isso pode ser qualquer coisa,
qualquer jogo de aprendizagem de emojis
ou aprendizado de números, lentes de
animais ou mais Tudo o que você possa imaginar, você pode colocá-lo com diversão. Essa aula consiste em encontrar seus
recursos no local e, em
seguida, projetar o layout do jogo, projetar
os elementos, torná-los interativos e componentes para o
projeto final do jogo. Para esta aula, tudo o que você
precisa é do seu dispositivo, uma conta Figma e dessa
aula, e você está pronto para começar Esta aula será
totalmente adequada para iniciantes,
com todo o guia passo a passo e durante todo
o processo. Então, vamos começar
2. Analisando o conceito de design para usuários de aplicativos: Antes de iniciar
o projeto de design, gostaria de
seguir alguns conceitos básicos. O design de aplicativos não é apenas projetar e colocar
seus elementos no lugar certo. É uma interface de usuário, um rosto com o qual as pessoas
interagirão. Portanto, você tem algumas
responsabilidades como designer em relação à interface
do aplicativo que
você está criando. O número um é facilitar
a navegação e o entendimento. Ser muito técnico ou sofisticado é um grande não quando
se trata de um bom Y. O próximo é falar muito alto
em design Às vezes, alguns
designers usam seu alto espírito criativo para que o design supere o simples e básico da experiência
do usuário E o design desmorona em vez de se tornar uma coruja, ele se torna uma coruja. Lembre-se de seu fator surpreendente e meu grande conselho antes de começar é manter as coisas simples
neste projeto Talvez um tema de uma única cor ou brinque
com tons dele, escolha um único tom
e contorne seus tons para manter seu aplicativo de
design como um todo, de forma monotônica, mas simples,
atraente
e atraente
e Portanto, lembre-se de que a cor de destaque
ou destaque pode ser usada para a fonte
ou qualquer coisa, o ícone Ok, então claro. Então, vamos começar.
3. Design de tela inicial: Estou na minha skin figma, pronto para começar a trabalhar com o quadro do Android por padrão
como um quadro predefinido Mude a cor de fundo para algo de sua escolha. Como meu tema é emoji e eu quero torná-lo
enérgico e feliz, vou usar o amarelo como fundo
selecionado dessa forma Agora, usando uma
ferramenta de retângulo, atalho, arraste e teclado MC aqui, onde colocamos todos os ícones que queremos
tocar e usar Faça as bordas dos cantos arredondadas
e a partir do painel de design e,
em seguida, recolora-as Além disso, você pode
diminuir a transparência. Agora, faça um retângulo
menor e
altere o preenchimento para o
preenchimento da imagem na área de trabalho, selecione a imagem
dela no dispositivo e ajuste a
transparência para 100 Você pode redimensioná-lo e
colocá-lo na tela
da maneira que achar melhor para
continuar Em seguida, segure e arraste a
opção K e arraste para duplicá-la, ou você pode usar o Controle ou o
Comando D para duplicá-la novamente da mesma
forma para criar a E então aqui vou usar 12 ícones porque vou ter 12
caras de rato para o jogo Você pode adicionar adequadamente
e definir sua grade aqui. Agora vamos adicionar um pouco de
título e texto
à tela, como jogar
o título do jogo. Você pode escolher o tamanho da
fonte, o estilo da fonte de sua escolha e nomear seu jogo
do seu jeito. Estou bem com o kit Emo. Você pode ter outra coisa. Em seguida, adicione mais um pouco na
tela da página inicial. Agora, vamos criar
mais detalhes na tela do aplicativo na
próxima escuta.
4. Personalize o design da tela inicial: Agora pronto para o
layout básico da tela inicial, é hora de ajustar rapidamente
as novas imagens e ícones. Para o nosso botão Imog, estou usando essas
imagens no formato PNG Você pode obtê-lo
do estoque vetorial, outra
galeria de imagens de estoque ou de qualquer coisa, ou pode até mesmo criá-lo
sozinho ou usar o Canva para obter seus ícones e
exportá-los como formato PNG Substitua todas
as imagens e ícones da mesma forma para
todos os 12 botões. E usando 12, você pode
usar qualquer número, até nove ou qualquer coisa
que você esteja pronto para usar. Agora é hora de ajustar um
pouco
o design ou, se você estiver
feliz, está bem Vamos passar para a
próxima lição para criar vários
jogos de tela para o nosso jogo.
5. Dicas para projetar a tela do aplicativo: Avançando com
o
design adicional da tela e o processo da web. Eu gostaria de me aprofundar
nessa etapa de projetar sua presença como
um projeto web ou em particular, como um aplicativo
na interface do jogo. Na minha opinião, existem
algumas coisas que fazem andra sua imagem como aplicativo
ou jogo para os usuários. Portanto, a dica número um é usar
os pontos de contato do usuário. Refere-se a qualquer coisa
que o usuário toque para comandar ou dar como o próximo
passo em seu jogo. Por exemplo, são essas 12 fases de emoji
que teremos criado Portanto, um alinhamento adequado da rede
é o que precisamos. E isso não apenas o tornará
visualmente atraente,
mas também será colocado aleatoriamente na tela, como se um
alinhamento adequado das necessidades fosse mais atraente visualmente
para o usuário, mas também
destruiria o caos
visual
e o
campo perturbador do usuário,
aumentando sua experiência com o aplicativo e suas habilidades de design se
você fizer isso visual
e o
campo perturbador do usuário,
aumentando sua experiência com o aplicativo e suas design se
você E se você mantiver as
coisas limpas, arrumadas e devidamente alinhadas,
seu jogo está A dica dois é o tamanho. Sim, o tamanho desses
pontos de contato é importante porque não importa quão visualmente atraentes ou bem
ilustrados sejam, mas se forem pequenos demais para serem notados ou muito próximos um do outro,
isso significa que há uma área muito
clara
para isso significa que há uma área muito
clara Porque, meu querido amigo, você ou nosso usuário terão que
aproveitá-la como uma experiência, sem se esforçar para encontrar maneiras de tocar nos
pequenos pontos de contato Mantenha o tamanho de cada botão
grande o suficiente e, ao mesmo tempo,
certifique-se de
que grande o suficiente e, ao mesmo tempo,
certifique-se não seja grande demais para
sobrecarregar e quebrar o design como um todo e
o espaço Sim, um
botão com espaço saudável é a
vantagem tanto para o usuário
quanto para o designer Lembre-se ao
abrir a outra tela. Por enquanto, minha dica final é manter seu texto legítimo para
o usuário, pois é isso que ele quer
fazer ou lerá Se parecer confuso, com pouca
opacidade ou não estiver claro, qualquer coisa desse tipo, isso apenas
evitará que eles usem seu aplicativo tão
fantástico Portanto, certifique-se de que
seus comandos de texto sejam grandes o suficiente para serem visíveis
para o usuário entender. Além disso, reserve um tempo, revise seu
layout básico, no design, e certifique-se de
seguir todas essas
etapas para inserir, criar, criar seu aplicativo, seu design e alcançar a experiência do usuário
muito mais do que outras.
6. Como personalizar e desenvolver o design de telas de jogos: Agora que estamos prontos com
a tela inicial básica, agora é hora de
criar telas para todos os Imoges individualmente para que cada um seja destacado
em cada um deles. Para isso, selecione a moldura e faça com que a
moldura inteira seja duplicada. Você pode segurar todas
as teclas de opção do teclado e arrastá-las
para criar um Toklic Revise a guia e
o texto do gramado aqui, e eu apenas adicionarei um texto
a ela como seu nome. Apenas o nome desse Imog
em particular destacou um e apenas a cor e o tamanho do
tipo do texto Agora repita o mesmo
processo e crie telas
individuais para
cada um dos imogi Estou fazendo isso rapidamente para você. Você pode tomar seu tempo, pausar o vídeo, a aula e depois continuar todo
o processo Se você quiser algo confuso, você quer
entender melhor, você pode simplesmente repetir dedicar seu tempo e
praticar mais ou pode me avisar
na guia de discussão se algo
estiver ocorrendo
ou se algo confuso estiver ocorrendo algo confuso Então, basta substituir o Imoge nos respectivos
e o texto da mesma forma Além disso, você pode editar o nome do quadro
conforme destacado para cada
um deles, ou você pode apenas usar um, dois, três para renomeá-lo de uma
maneira melhor Uma vez feito isso, estamos prontos para dar o próximo passo
na próxima lição.
7. Protótipos e palavras finais: Para o meu esquema FIGMA, e vamos começar a
conectá-los. Se você
me acompanhou em alguma das minhas aulas da AREA ou tem experiência
prática no FIGMA, você conhecerá o processo de prototipagem de
cada imagem, segurando-a no ícone de
adição e
conectando-a à respectiva moldura,
e pronto Mas para 12 molduras
e uma página inicial, há
botões tottel, uma página inicial, e cada um deles, para cada anel, você pode ver que é muito E com o tempo, pode
parecer opressor, como uma rede
maior de coisas Então não se preocupe,
eu te apoio. Aqui está o truque da prototipagem. Digamos, com o switch
e conecte-o ao próximo,
mas o Imog está chocado Portanto, essa não é a
tela correta para ser vinculada. Portanto, ele deve estar vinculado
à moldura chocada. Então, basta tocar no plugue aqui e selecionar a moldura
correta nas configurações
aqui na tela. Essa não é uma
maneira muito melhor de
unir cada ícone de cada
elemento ao lugar correto sem simplesmente arrastá-lo
aqui e ali na tela
e ficar confuso
se o link está correto ou não Da mesma forma, basta definir o nome correto do quadro e
você estará pronto com a configuração do
protótipo Repita o mesmo processo
para o resto dos ícones. Agora, para a próxima tela, como destacamos, o primeiro ícone neste quadro, não
precisamos de nenhuma
interação para esse ícone, mas para interpretá-lo visualmente, podemos ajustar a opacidade inferior, a transparência e diminuir um
pouco o dom para que
pareça que não está destacado Isso deixará visualmente
claro para o usuário
entender onde
criptografar e onde não Agora repita o que
fizemos anteriormente o restante dos botões
desse quadro e continuaremos esse
processo até o final. Sei que é um momento difícil e pode parecer
difícil de fazer, mas prometo que o resultado
será mais do que incrível e limpo
com um truque simples Você pode pausar este
vídeo a qualquer momento, reserve um tempo para conectar
todos os botões do jogo, de todo
o quadro,
aos quadros correspondentes, interconectados como a E uma vez feito isso, seu espaço de trabalho
deve parecer uma web, mas não se preocupe,
você fez a parte boa Agora é hora de
ver seus resultados. Vamos dar uma prévia e ver como todo o seu
jogo está funcionando de
forma criativa Não é esse? Espero que agora
você também esteja pronto com seu lindo jogo latino realmente
super divertido para jogar comigo ou jogar
no seu tempo livre. Se você realmente gostou
desta aula comigo,
por favor, deixe-me saber em
sua seção de resenhas suas palavras doces
e gentis e compartilhe com
seus amigos também, que podem achar
interessante e útil. Além disso, compartilhe seus
projetos realmente incríveis na tag do projeto, faça upload de uma gravação
de tela do resultado final como imagem MP4 ou JPG
da tela de trabalho Faça seus projetos
em voz alta aqui, esperando ansiosamente por você
e seus projetos incríveis Também quero aulas mais
interessantes e
aulas com projetos tão
envolventes para trabalhar comigo. Siga-me aqui e fique atualizado.
Shivangi Dubey, Graphic Designer | Web Designer | Artist
