Transcrições
1. Introdução Visão geral do curso: Ei, eles são
designers experientes ou que acabaram de começar ou
querem começar suas carreiras? Inovadores e criadores. Sou Kate e fui designer
de produtos
nos últimos dez anos. Bem-vindo à minha aula exclusiva
sobre design de experiência do usuário. Nesta aula, vamos experimentar e ver como
a criatividade encontra a tecnologia para moldar futuras
experiências digitais. Quero mostrar como
você pode esboçar rapidamente
fluxos de usuário para qualquer aplicativo do zero e
iniciar um novo projeto em
apenas 20 minutos? Tenho certeza que você já esteve lá. Você tem uma ideia ou recebeu os primeiros requisitos
de um cliente. Você está sentado
olhando para o computador ou papel e pensando por onde
devo começar. Mas você sabe o que? Esse problema não
existe mais. Com tecnologias comuns
e ferramentas de ajuda de IA, você sempre tem
algo em suas mãos. Você não precisa de nenhuma experiência em UX ou UI projetada
para esta classe. Ao mesmo tempo, acredito
que aqueles que já trabalham no setor também
receberão algumas dicas legais. Ok, o que
vamos fazer juntos? Exploraremos como a inteligência
artificial e grandes modelos de linguagem podem contribuir e acelerar
nosso processo de design, permitindo-nos gerar fluxos de
usuários e estruturas de arame. Com apenas algumas instruções simples, vamos verificar várias ferramentas de IA e recursos gratuitos
básicos Para começar imediatamente, você aprenderá a escrever bons adereços para obter os resultados
esperados Depois de termos nossos fluxos de
usuário gerados por escrito, é hora de arregaçar as mangas e dar vida a eles
usando o software Figma Não se preocupe se você
nunca vai usá-lo antes. Eu vou guiá-lo em cada
passo do caminho. Você dominará como criar estruturas de arame de
baixa fidelidade para criar fluxos de
usuários com base nas ideias
geradas Na última etapa desse processo, conectaremos
as telas ao caminho. O rascunho do conceito do
aplicativo está quase pronto. Uma última dica: vou te dar alguns conselhos sobre como
testar sua ideia, já que a IA não
é um ser humano real. Ainda não. Espero que tenhamos que
testar nossos protótipos e usá-los com pessoas reais para entender os problemas
e o que fizemos, certo ou errado, como projeto No final da aula, você criará uma ideia ou
recurso para um aplicativo móvel usando ferramentas de
IA e um conjunto de
componentes para
armação de fios no Figma Esses componentes, eu os
darei de presente para que você possa usá-los
no futuro em seus
projetos e portfólio. Você não precisa
criar o seu próprio. Ok, pessoal.
Mal posso esperar para começar. E estou muito curioso
sobre quais ideias e aplicativos você
criará no final da aula. Feliz design e
bem-vindo à minha aula.
2. Visão geral das ferramentas e plataformas de IA gratuita: Bem-vindos de volta, designers
e inovadores. Neste vídeo, estamos
entrando no
mundo existente das ferramentas de IA Estamos prestes a
explorar algumas plataformas
revolucionárias que
ajudarão nossos processos
de design de diferentes ângulos. Agora você pode estar pensando: onde eu
começo com as ferramentas de IA? Não se preocupe, eu tenho tudo o que
você precisa hoje. Vou apresentar a
você três plataformas de IA
disponíveis e totalmente
gratuitas. Você pode criar uma conta
em apenas três cliques usando a conta do Google ou
configurá-la com um e-mail Primeiro, temos o Cha GPT, o primeiro e super popular, tenho certeza que você já ouviu falar dele Com char GPT, você pode
mergulhar no mundo do processamento de linguagem
natural e gerar fluxos de usuários,
personas, cenários, guias para entrevistas com usuários, agendas de
workshops e basicamente tudo o
que você precisa para um bom processo de UX usando
apenas alguns É como conversar
com seu assistente de trabalho. O próximo da nossa lista é o
Gemini, do Google. Ele tem os mesmos
recursos e você pode usá-lo para a mesma tarefa
que mencionei anteriormente. É poderoso e descobri que tem menos
alucinações inesperadas de IA nos resultados Por último, mas não menos importante,
temos perplexidade. Uma joia escondida no
mundo das ferramentas de IA. Gosto muito desse modelo, pois ele também fornece uma lista de
referências e recursos. Ele dá uma ideia de
onde ele criou os resultados e onde você pode ir e ler mais informações
sobre os resultados. Na verdade, acho que é
ótimo e deve ser feito por todas as
ferramentas de interface do usuário, na minha opinião. Agora tem uma parte legal. Por que não tentar o mesmo prompt em diferentes plataformas
que mencionei e comparar os resultados. Você pode usar tudo o que
foi mencionado anteriormente e ver onde os resultados serão mais satisfatórios para suas necessidades Seja o que for que você esteja usando um
GPT, Gemini ou perplexidade, nunca
houve
um momento melhor para aproveitar o poder da IA
em seu processo de design, mas não é Vamos criar um
aviso significativo no próximo vídeo.
3. Criar um prompt enriquecido: Agora você pode estar
se perguntando o que exatamente é um aviso e por que isso
importa? Quando penso em escrevê-lo, sempre imagino a situação quando estou conversando com
meu colega, marido
ou até com minha mãe Estou explicando a tarefa para a ferramenta de
IA de uma forma
que eu explicaria para um ser
humano. O prompt deve
conter uma boa quantidade de detalhes
importantes e também responder às
perguntas previsíveis. Solicitar como criar e
anotar fluxos de usuário para um aplicativo node definitivamente não
será suficiente para um bom resultado. Em que você deve se concentrar primeiro e quais são os requisitos de
alto nível
para qualquer solicitação. É clareza, especificidade
e imaginação. Primeiro, vamos
esclarecer
o propósito
e o público-alvo de nossos aplicativos, seja uma ferramenta de produtividade
ou uma plataforma social
para amantes de animais de estimação. Nosso aviso deve
refletir a essência do nosso aplicativo e atender diretamente
às necessidades de nossos usuários. A seguir, vamos pensar
em algum contexto. Pense no cenário em
que seu aplicativo será usado. Estamos resolvendo um
problema, realizando um desejo ou simplesmente adicionando um toque de alegria ao dia de alguém Quanto mais contexto fornecermos, melhor nosso corpo de IA
poderá adaptar sua resposta Finalmente, vamos deixar
espaço para a criatividade. Não tenha medo de
pensar fora da caixa e injetar um pouco de
personalidade em sua mensagem Afinal, não estamos apenas
projetando um aplicativo, estamos criando uma experiência Vamos tentar a abordagem de perguntas para o futuro.
Trabalhe com instruções. Eu preparei várias perguntas
respondendo a elas. Você gerará e escreverá
um prompt muito bom, que poderá ser passado
para a ferramenta de IA. A primeira pergunta, qual
é o enredo ou a
história principal da ideia de seu aplicativo?
Qual é o propósito? Por exemplo, eu
gostaria de criar um aplicativo móvel simples
para rastrear despesas. É benéfico
mencionar que a plataforma está fazendo isso para web ou dispositivos móveis. A próxima pergunta, quem
vai usar o aplicativo? Por exemplo, o aplicativo será usado por um público amplo. principalmente jovens e de
meia idade Trabalham principalmente jovens e de
meia idade que
desejam controlar seus gastos e planejar seu orçamento e
ver como
economizar mais dinheiro e ser melhores. Próxima pergunta. Que tipo de funcionalidades podem estar
na primeira
versão simples? Simplifique. Não liste centenas de funcionalidades
diferentes. Seja muito preciso
, mas também eficaz. Você também pode perguntar
sobre monetização,
mas, novamente, está adicionando Vamos ficar simples. exemplo pode ser algo como as principais funcionalidades
seriam registrar, adicionar e remover despesas
recorrentes regulares por dia Ter diferentes categorias
de despesas, calendário, configurações
da conta,
painel, algumas análises quais o usuário pode ver um resumo
de todas as despesas passadas. Em seguida, a próxima pergunta. Por último, como apresentar
um resultado das ideias de IA. Seja preciso. Por exemplo, por favor, a tarefa real da IA. Crie fluxos de usuário para o aplicativo
que acabei de descrever, para que eu possa usá-los para projetar estruturas de
arame para testar o
aplicativo com futuros usuários. No final, como mencionei, temos três a quatro perguntas
simples. O que, quem e como. Resuma todas as respostas dessas perguntas e
também divida um parágrafo. Isso ajuda a obter melhores resultados quando você recebe sua solicitação,
vamos experimentar. No próximo vídeo,
mostrarei como plataformas diferentes geram três resultados diferentes
com o mesmo prompt. E então escolheremos um
deles e usaremos mais.
4. Como gerar fluxos de usuários com IA: Nesta lição,
usaremos o exemplo de prompt que eu lhe dei
no vídeo anterior para finalmente ver os resultados
gerados pela IA. Como eu disse, vou usar as três plataformas para comparar os resultados e escolher
o melhor deles. O primeiro é char GPT. Estou usando uma conta gratuita,
copiando e colando meu prompt e quero gerar fluxos de
usuário para um aplicativo
caro e impressionante Estou fornecendo todos os
detalhes, o propósito, o público, as
minhas funcionalidades e a tarefa em si Conforme expliquei
na lição anterior, vamos ver os resultados. O que vamos ter aqui. Temos um
fluxo curto de integração, bem como um login. Que é um bom painel
com um resumo como fluxo na tela inicial para adicionar
despesas com alguns detalhes, visualizar suas
despesas, análises, sair da conta de
usuário Em geral, o resultado é bom,
mas para criar os designs eu precisaria de
um pouco mais de detalhes Sempre podemos regenerar
a resposta posteriormente, mas eu também gostaria de experimentar
outras ferramentas O próximo é Gêmeos. Estou usando o mesmo
prompt e basta copiá-lo e colá-lo
novamente. Vamos ver N, vejo que temos um pouco mais de
detalhes para nosso trabalho futuro, que é que o Great Gemini
divide tudo em vários fluxos principais, como fazer login e adicionar uma
despesa, e assim por diante E até mencionou
mensagens de erro que são úteis. Certo. O que eu gosto
é que vemos descrições de
telas e
até botões e rótulos de
campos de texto Isso é muito bom.
OK. O que mais? O aplicativo exibe os campos da tela de
despesas para inserir o valor, categoria, a data
e o nó opcional. É disso que precisamos
para nossa prototipagem. Perfeito. OK. A última que eu gostaria de
experimentar é a perplexidade A ferramenta é desenvolvida com o
open eye e também fornece muitas referências
adicionais da referências
adicionais da Internet para
o tópico relacionado. Como mencionei antes, estou fazendo a mesma ação, adicionando meu prompt preparado
para ver o resultado. Ok, o que
vamos ter aqui? O resultado tem menos detalhes
do que a ferramenta anterior. Aqui podemos ver um alto nível de falha com uma breve
descrição de cada tela Não acho que seja
suficiente realmente começar a projetar
a
conta do usuário com um pouco mais de informação também
a capacidade de gerenciar a
identificação. Agora, gostaria de voltar
à ferramenta anterior Gemini e pedir para adicionar mais
detalhes à resposta Preciso de mais informações para construir o
I usando componentes de
estrutura de incêndio preparados, algo como botões, campos de
texto e assim por diante. Ok, vamos ver. O resultado parece que ele está pensando
profundamente. Sim, X não é tão fácil, certo? Oh, uau, isso parece
promissor e incrível. Agora temos tudo para
imitar essas ideias na interface
do usuário Vamos copiar as respostas
e adicioná-las ao figma. Nos vemos na próxima lição, onde
começaremos o design real.
5. Criar telas no Figma com base nos fluxos de usuários de IA fornecidos: Bem-vindo à
parte Figma da aula. Nos próximos 10 minutos, você aprenderá a
criar estruturas de arame com base nos fluxos gerados por IA. Se você ainda não
tem uma conta, precisará de uma para usar
o
conjunto gratuito de estruturas de arame que preparei especificamente
para esta aula. Veja como acessar
o arquivo, acesse o site
da comunidade Figma e pesquise um kit de projeto de wireframe Como alternativa, você pode
usar o link fornecido na descrição
da classe na página do arquivo
compartilhado da comunidade. Clique no botão Abrir
no Figma. Isso criará uma
cópia do arquivo em seus rascunhos pronta
para você usar Eu já vou abrir o arquivo
para a demonstração. Vamos explorar o que está dentro. A primeira página contém uma breve descrição e
alguns exemplos de tela. Você pode navegar até o arquivo usando o
painel no lado esquerdo. O arquivo é organizado
em três páginas principais, descrição,
componentes e capa. Também criei uma
página adicional chamada Meu projeto. Sinta-se à vontade para
nomeá-lo de forma diferente. Nesta página,
estaremos construindo nossas falhas. Você pode criar novas páginas
clicando no ícone de adição aqui. A página Componentes contém todos os blocos de construção de que você precisa para projetar suas estruturas de arame. Alguns componentes
têm espaços reservados, enquanto outros têm
textos pré-preenchidos para títulos e botões para acessá-los. Navegue
rapidamente até o painel esquerdo e
vá até a guia Ativo, onde você verá uma lista de
componentes Ok, bom. Agora vamos mudar para nossa página
recém-criada, meu projeto. Eu já copiei e colei a
resposta gerada pela IA do vídeo anterior
e
a dividi em seções representando telas
diferentes Essa estrutura
também foi fornecida pela IA. Como você lembra,
começaremos com
a tela de login. Para adicionar
elementos à tela, abrirei o painel de ativos e procurarei o componente de
tela apropriado. Lembre-se de que você pode personalizar
essa experiência nomeando suas páginas e explorando os componentes para
adaptá-los ao Vamos começar nossa rápida
prototipagem e enquadramento de fios. Estou pegando a tela do lado esquerdo
da interface Figma a partir dos Vamos verificar rapidamente o que
eu forneci para nós. A tela de login
consistirá em campo de texto, legenda e
alguns botões O primeiro campo é o nome de usuário, AI, também recomendado,
e a senha. Claro, vamos procurar por botões. Precisamos do login do
botão principal. Também precisamos de um
botão secundário para se inscrever, como de costume, que você pode encontrá-lo em quase todos os aplicativos
ao iniciar. Além disso, a
inteligência artificial recomenda que você tenha um botão de esquecimento da senha, o
que é compreensível Vamos pegar o cabeçalho da tela e usá-lo para
fornecer um título. Estou removendo o plano de fundo, não
precisamos dele, e os ícones na parte superior mostram
como é fácil fazer isso no painel de controle do
componente no lado direito Chamamos isso de login e talvez possamos torná-lo um pouco mais
personalizado e adicionar alguns. Segure a parte superior apenas
para que pareça um pouco mais que o início da
jornada do usuário do aplicativo. Estou fazendo alguns ajustes
no layout. Obviamente, não estamos fazendo nenhum design perfeito em pixels aqui. Em vez disso, estamos apenas coletando
todos os itens na tela. Não estou medindo nada e verdade, não
estou fazendo isso. Até mesmo colocando tudo isso
na moldura e nomeando a moldura que
precisaríamos para o futuro. Prototipagem e conexão de
todas as telas. Ok, a primeira tela está pronta. Vamos ver o que mais
podemos fazer aqui. Painel de controle? Sim, provavelmente
precisamos continuar com a tela inicial que
chama painel de controle nesta tela. Texto da IA. Novamente, estamos
procurando uma tela
no painel de ativos para começar a
criar o fluxo do usuário. O que mais precisamos?
Claro, o cabeçalho. Como é uma tela inicial, precisaríamos de algo
como um ícone para abrir um menu com outras
opções para o usuário. Provavelmente um calendário. Também vimos isso nos detalhes fornecidos pela
IA. Sim, vamos chamar isso de minhas despesas. Acho que estava chamando isso de
algo diferente, como minhas finanças, mas acho que
despesas soam melhor. Além disso, na descrição, mencionei que podemos
adicionar mais algumas. Sim, precisamos do botão Adicionar, que eu também pego
do painel Sim, vamos usar um
espaço reservado
apenas para mostrar que
pode haver mais detalhes Também havia um resumo na descrição
do fluxo de IA. Valor do resumo que
gastamos ou gasto pelo usuário. Precisamos mostrar a tela
de também. Ok, vamos dar uma olhada. Hmm, despesas recentes em segundo lugar,
mas com mais detalhes. Ok. Podemos ignorá-lo por enquanto E vamos ver, como
já temos um item da lista, você pode clicar na lista e seguida, a página de detalhes
será aberta. Eu acho que isso parece bom. Vamos fazer alguns pequenos
ajustes no layout. Acho que essa tela
está pronta, pois já criamos o
botão Adicionar às minhas despesas. Vamos fazer essa tela
com uma nova despesa. Não se esqueça de ligar para seus quadros para que possamos
conectá-los posteriormente
à tela de fluxos com despesas. Provavelmente vou usar um componente de
pano de fundo para isso, mas também pode ser
uma tela separada Precisamos agrupar o plano de fundo porque
a tela inicial se tornou um plano de fundo aqui. Indo para o painel de ativos,
pesquise um componente de pano de fundo. Tenho certeza de que você viu isso muitas vezes
em diferentes aplicativos. Agora, é muito
popular usá-lo e quase todos os sistemas o têm. Ok, vamos mudar o
título e a despesa. Acho que podemos remover
esses elementos, pois
adicionaremos nossos próprios
campos de texto. Aconselhei adicionar também a
seleção da categoria para despesas como mercearia ou casa
ou algo parecido Vou começar com
isso e com os
campos de texto. Isso é bom, nesses componentes, pois nesses componentes,
mesmo sendo wireframes, podemos ver alguns rótulos para que possamos realmente comercializar para
testes futuros com usuários reais Os usuários entenderão
o que isso significa, o padrão primário adicional. Além disso, com o rótulo,
acho que precisamos
adicionar a quantidade que estava
na sugestão de IA. Alguns títulos, como o nome
da lista suspensa de despesas com todas as categorias
da lista. Também é aconselhável
ter alguns, uma nota para cada despesa. Sim, podemos ignorá-lo
muito detalhadamente por enquanto. E talvez apenas o tenha como
texto reservado. Obviamente, precisamos
do seletor de calendário porque precisaríamos
configurar as despesas, dependendo do dia, dos
meses e do ano Como já fizemos a tela de despesas com
anúncios, acho que também podemos criar uma página detalhada da despesa. Vamos verificar rapidamente se
não perdemos nada. Estou copiando a tela. Acho que a página
de detalhes da despesa será basicamente a mesma que a
despesa com anúncios em segundo plano. Estou mudando o título. Ok, vamos
verificar rapidamente o que temos. Basicamente, todos esses campos que
acabamos de adicionar às despesas com anúncios. Precisamos
convertê-los em rótulos. Aconselhei excluir
dois botões e adicionar faz sentido. usuário pode excluir a
despesa ou adicionar alguns detalhes e depois ir para a
tela anterior que criamos. Nós apenas copiamos todos os campos
que temos da tela anterior. Da despesa com anúncios, precisamos da categoria, mas ela já foi
selecionada pelo usuário. Precisamos do valor da
despesa e de algum título ou nome. Vamos chamar isso de festa de aniversário. Sim. E onde está a data de envio? Isso é 21 de fevereiro de 24. Sim. Basicamente, todas as
informações de que precisamos para o primeiro rascunho
da tela estão aqui. Vamos fazer alguns pequenos
ajustes,
mesmo que não seja
necessário, porque, novamente , é um quadro secundário e estamos apenas testando a falha e a
ideia,
não devemos pensar no layout em geral, pois
podemos alterá-lo posteriormente Ok, vamos verificar o que temos. Expanda detalhes, categoria data mantendo um
nó. Sim, parece bom. Vamos continuar até a próxima. Não esqueço de mudar
o título das molduras. É fácil navegar mais tarde , pois gostaríamos de
criar mais conexões
entre as telas. Vamos adicionar rapidamente o
pop-up e, para excluir despesas, quando você clica no botão
excluir, podemos mostrar esse
pop-up e, se você clicar nele, podemos mostrar a tela anterior. Eu continuaria com o menu. Como eu aconselhei, ter
vários itens
no aplicativo, como análises calendário
e
alteração de categoria. Definitivamente, precisamos de um menu. Existe um componente para isso. É uma gaveta de navegação desenhada. Sim, vamos mudar o ícone. Como você pode ver, é muito
rápido e rápido com as configurações de
um componente, conforme
sugerido no texto. Vamos ter categorias de
análise doméstica, orçamento, conexão, banco. Sim, isso pode ser um
recurso interessante no meu perfil. Sim, os ícones
não se encaixam um pouco nos rótulos, mas tudo bem, pois, novamente, nossos rascunhos de wireframes Acho que seria bom
ter também uma tela de calendário. E também o temos em nossa
descrição, porque temos esse
ícone no canto superior direito. Você clica lá e
abre um calendário. Sim, também pode estar em
um pano de fundo. Acho melhor
ter um componente semelhante, um comportamento
semelhante para ações
semelhantes. No aplicativo
desta página, há um calendário simplesmente
adicionado aqui para que você possa alternar entre os dias e ver
as despesas de cada dia Também há uma sugestão
do texto de que
vamos ter
categorias e adicioná-las, o que também acho que faz sentido. Você gostaria, como usuário, adicionar mais algumas categorias, não apenas como uma padrão, tendo a sua própria, por exemplo, para sair, talvez estudar
ou qualquer outra coisa. Vamos falar rapidamente, estamos usando o mesmo
título de componente da lista e, sim, vamos alterar alguns rótulos
para esse propósito. Ainda precisamos do botão de adição, o botão de adição. Bem, criamos todas
as telas que foram fornecidas pela IA para
adicionar ao fluxo. Acho que essas são as
telas principais para
o aplicativo de pequenas despesas ou de rastreamento de
despesas. Claro, pode haver
muito mais detalhes, mas para o primeiro,
para o primeiro arquivamento, definitivamente
é o suficiente Vamos conectar todas as
telas aos fluxos
no próximo vídeo e tentar testá-las com os usuários
e ver como elas funcionam. Nos vemos no próximo vídeo.
6. Como conectar telas em caminhos: Gente, essa é a última
aula dessa aula. Nesta lição, gostaria de
mostrar como você pode rapidamente, usando a
ferramenta de protótipo do Figma, conectar todas as
telas que criamos Faltava uma tela na aula do vídeo
anterior. É uma despesa adicional
e eu simplesmente copio uma tela de despesas e
altero o rótulo do botão porque é
basicamente a mesma tela. Eu poderei conectar o botão auxiliado na página
de detalhes As ferramentas do protótipo
aparecem aqui à direita. Você clica aqui e, em seguida, o recurso parece
que você
seleciona um dos componentes e com pequenas setas,
conecta as telas Como aqui no login, o
usuário aparece na tela inicial quando faz
login no aplicativo e
fornece sua credencial ele pode ver imediatamente Depois disso, ele pode ver imediatamente a
tela inicial que criamos Não
esqueceremos a senha
porque não criamos a tela para isso com o botão
às custas Nós nos conectamos com a
tela às custas. Então, ao
clicar no botão de coleta você aparece novamente
na tela inicial. O que mais podemos conectar? Vamos fazer o menu clicando no menu
Burger Camburger usuário abre a gaveta do menu
e, claro, ele pode fechá-la e voltar para
a tela inicial Também vamos conectar a visualização do
calendário na parte superior, para que toda a navegação superior
seja feita na tela do calendário. Ao clicar em, selecionando um
dos itens da lista, usuário abre a página de detalhes conforme a
projetamos
na lista anterior. Claro, ele pode voltar
para a tela inicial novamente. Quase todas as nossas telas
levam à tela inicial. Depois de usá-lo, conectamos dieta com a tela de pontos, excluímos. Conectamos a exclusão
à tela de exclusão. Exclua o pop-up. A partir daqui, você pode basicamente
excluir a despesa. E depois disso, o usuário acessa a tela inicial e
o botão de cancelamento. Vamos fechar
o pop-up e você mostra a tela anterior,
que é a página de detalhes. O que mais podemos
ter no menu, podemos conectar novamente
a tela inicial à
nossa tela de minhas despesas. E a partir desse menu, também
criamos uma tela de categoria na qual você altera as categorias ou as
remove da tela da
categoria. Novamente, você pode voltar
à tela principal
com a visão geral. Sim, esqueci de conectar a visualização
do calendário à tela inicial para que
o usuário possa voltar e fechar
o calendário Acho que
será mais fácil se adicionarmos esse botão cruzado a cada um dos componentes do
pano de fundo quando formos
testá-lo para o usuário Será mais fácil
entender como você pode fechar essa tela e
voltar ao estado anterior. Acho que esses itens da lista
também são bastante enganadores. Vamos fornecer
pelo menos um texto aqui mostrando
que os usuários enviam algumas despesas para a festa de
aniversário, mas caso contrário, podemos digitar comida de gato. Talvez alguns livros que
comprei recentemente, creme para as
mãos, pareçam
um pouco mais naturais. Sim, quando você
seleciona a ferramenta de protótipo, todas
essas flechas parecem
opressoras Mas, na verdade, quando
você começar a fazer isso, verá e descobrirá
que é muito fácil. Você só precisa conectar todos
os componentes interativos a algumas telas e depois testar
seu protótipo primeiro, é
claro, você prefere
testá-lo sozinho Eu vou te mostrar
como fazer isso no Figma. Você pode
abri-lo em uma janela separada, que parece um telefone pequeno. Aqui, você clica
no botão play, experimenta, clica em todos
os botões que conectamos
e vê como funciona. Se necessário, a tela aparecerá, se funcionar conforme o esperado. O que mais você pode fazer com o Figma? Você pode baixar o
aplicativo Figma para o seu celular e abrir esse protótipo
com muita facilidade no seu celular, que terá quase a
mesma aparência de um aplicativo real E dê a alguns de seus amigos para testar
seu protótipo e ver o
que fazer, basta dar
aos participantes uma tarefa Crie uma despesa ou altere a categoria novamente
para o aplicativo. E então você vê
imediatamente o que está faltando ou o que não está
realmente claro para o usuário. Você observa como o usuário se comporta, no que ele quer
clicar ou o que não consegue encontrar E então você
vê imediatamente os pontos fracos
do seu aplicativo. Essa foi a última etapa
desta lição, a aula. Agora, vamos entrar
no projeto e criar fluxos de
usuário e experiência de usuário
para aplicativos móveis. Com a ajuda da IA, vamos mergulhar no vídeo de descrição do
projeto.
7. PROJETO: Percorremos um longo caminho em nossa jornada de design de UX
e agora é hora de
colocar nossas novas habilidades em um projeto para nosso projeto final. Estou lhe dando uma
missão que libertará seu inovador interior e
mostrará tudo o que você
aprendeu até agora nesta aula.
Você está pronto? Aqui está. Você criará um fluxo de usuário para um aplicativo
móvel ou um recurso dentro de um
aplicativo usando o poder dos fluxos de usuário
gerados. Pense em qualquer aplicativo, talvez você tenha
uma ótima ideia nova ou possa simplesmente usar
qualquer recurso conhecido ou aplicativo móvel que já
esteja usando. Não importa, pois
estamos praticando aqui. Em seguida, você precisará
criar um bom aviso que resuma a
essência da ideia Depois de ter seu Pront, é hora de
colocá-lo na IA e gerar fluxos de usuários para seu aplicativo móvel
ou um recurso Em seguida, pegue seus resultados e adicione-os ao Figma Use componentes que eu compartilhei
com você para criar telas. Lembre-se de que não se trata
apenas de criar telas
bonitas ou estruturas de arame altamente
perfeitas. Trata-se de criar um simulador de experiências
intuitivas para o usuário. Não tenha medo de iterar e
refinar após o primeiro
ou o segundo resultado Se quiser,
conecte telas com o recurso de prototipagem do Figma e teste com sua
família Você já recebeu minha dica sobre como executar testes de
usuário eficazes. Adicione seus projetos como uma captura de tela nesta classe Estou muito feliz em
comentar e dar
um conselho. Obrigado por estar
aqui até o fim. Feliz design e nos
vemos do outro lado. Tchau tchau.