Domínio da experiência do usuário com IA: de prompts a protótipos Figma | Katerina Liebich Blik | Skillshare
Pesquisar

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Domínio da experiência do usuário com IA: de prompts a protótipos Figma

teacher avatar Katerina Liebich Blik, UI & Product designer | UX researcher

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução Visão geral do curso

      3:25

    • 2.

      Visão geral das ferramentas e plataformas de IA gratuita

      2:36

    • 3.

      Criar um prompt enriquecido

      4:49

    • 4.

      Como gerar fluxos de usuários com IA

      3:43

    • 5.

      Criar telas no Figma com base nos fluxos de usuários de IA fornecidos

      16:32

    • 6.

      Como conectar telas em caminhos

      7:00

    • 7.

      PROJETO

      2:14

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

825

Estudantes

16

Projetos

Sobre este curso

Para oferecer uma ótima experiência ao usuário como designer, você precisa criar telas, fluxos de usuários e protótipos para testar ideias.

Às vezes, é difícil começar o projeto do zero e elaborar os fluxos de usuário para o aplicativo, mesmo para um designer de UX experiente. Ao mesmo tempo para designers jovens e júnior, torna-se um desafio projetar protótipos rápidos não mergulhar nos detalhes da interface do usuário e permanecer focado no esboço dos primeiros conceitos para teste.

Neste curso, você vai aprender como aproveitar o poder da IA para gerar fluxos de usuários e entrar no Figma para aplicá-los como wireframes com apenas algumas instruções simples. Você vai mergulhar em várias ferramentas de IA para obter uma descrição detalhada do conceito de design de UX.Os designers de UX em todo o mundo estão usando ferramentas de IA para vários fins.

  Nos dias atuais, todos estamos entrando em uma nova era das ferramentas de IA.  Não perca isso para melhorar seus processos de design!

Você quer começar a usar ativamente a IA para seu processo de design e se beneficiar disso?Você
está interessado em nivelar as técnicas de prototipagem?
Você é um designer criativo ansioso para começar seu primeiro projeto de UX?


O que você será capaz de fazer após a conclusão do curso:

  • Conhecer e usar várias ferramentas de IA gratuitamente
  • Escrever um prompt complexo abrangente para obter a melhor resposta da IA
  • Com facilidade começando com o Figma usando o conjunto de componentes de wireframe fornecido
  • Criar fluxos de usuários com base em ideias fornecidas por IA
  • Como conectar telas em caminhos para testar seu projeto de ideia com usuários reais


Qual é o fluxo do usuário?
Um fluxo de usuário é um roteiro visual que mostra como os usuários navegam por um produto, como um aplicativo ou site. Ele mapeia as etapas que um usuário leva para concluir uma tarefa específica, do início ao fim. Isso ajuda os designers a entender como os usuários interagem com o produto e a identificar áreas para melhoria.

Se estamos usando IA para nosso projeto de protótipos, ainda por que o teste de usuários com pessoas reais é importante?O teste de usuários
é crucial porque permite que você veja seu produto pelos olhos dos seus usuários. Isso ajuda a identificar quaisquer aspectos confusos ou áreas onde os usuários ficam presos. Ao entender o comportamento real do usuário, você pode corrigir problemas cedo e projetar um produto fácil e agradável de usar. Isso leva a clientes mais felizes e a um produto mais bem-sucedido em geral.

Ferramentas. Vamos usar as plataformas de IA gratuitas:

Chat GPT

Gemini

Preplexidade

Biblioteca de componentes

preparado por mim para esse curso, onde você vai encontrar tudo o que precisa para uma prototipagem rápida. Por favor, use-o também para seus próprios projetos :)

Kit de Blueprint Wireframing  

Conheça seu professor

Teacher Profile Image

Katerina Liebich Blik

UI & Product designer | UX researcher

Professor

I'm a product designer, a hunter of harmony and a user experience researcher.


For me, design is life thinking. It's not just a profession. I love colours and fonts, I love hand drawings and photography, and I love shapes and lines. I can see layouts in everything. It doesn't matter whether I'm doing: a poster, branding, mobile app, or maybe picking a couch for my room.



On another hand, I'm a researcher and I have worked in software and the IT industry for more than 10 years. From a UI designer to a UX Lead in a Product company, I'm designing successful Software Products from scratch and keeping users at the centre of my design processes. I'm using data-proven decisions to develop the smoothest user experience.

Follow me if you want to know about... Visualizar o perfil completo

Habilidades relacionadas

Figma Design Design de UI/UX Prototipagem
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

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.