Como criar um aplicativo móvel do zero usando o Figma

1. Introdução: Oi, pessoal. Bem-vindo de volta e parabéns. Eu sou Mazi Eike hindu da Bag Zenet Productions. Estou muito empolgada em apresentar nosso curso abrangente de design de UI UX sobre como criar um aplicativo fintech do zero usando o Figma Este curso é feito sob medida para aspirantes a designers e profissionais que desejam mergulhar no mundo em rápida evolução da Equipando você com as ferramentas e técnicas necessárias para criar um aplicativo perfeito centrado no usuário do início ao fim, ou devo dizer, do zero Então, pessoal, o que vocês aprenderão nesse curso? Neste curso, você começará entendendo os princípios de design de fintech, que envolvem o domínio dos requisitos visuais e de UX exclusivos que são específicos do setor de fintech O próximo passo é entender a pesquisa e as personas dos usuários. Nesse estágio, você descobrirá como identificar o público-alvo, conduzir entrevistas com usuários e também criar personas que orientem o processo de design Em seguida, vem o wireframe e a prototipagem. Neste curso, você aprenderá a criar wireframes e protótipos interativos para visualizar as principais funcionalidades de sua tecnologia fina Em seguida, estão as técnicas de design de interface do usuário. Aqui, você teria a oportunidade se aprofundar na tipografia, nas teorias das cores, nas iconografias e nos designs de componentes personalizados designs de componentes de se aprofundar na tipografia, nas teorias das cores, nas iconografias e nos designs de componentes personalizados para produtos financeiros. Em seguida, vem o teste de usabilidade e a iteração. Nesse estágio, você adquiriria experiência prática com testes de usabilidade para refinar designs com base no feedback real do usuário Então, pessoal, por que é importante que vocês escolham esse curso? Agora, com a expansão das fintechs, há uma demanda por designers qualificados que entendam como criar ferramentas financeiras seguras, fáceis de usar e visualmente atraentes Ao final deste curso, você definitivamente terá um design fintech up completo em seu portfólio e a confiança para abordar novos projetos de fintech Então, pessoal, quem deve participar desse curso? Agora, este curso é ideal para designers de todos os níveis, desde iniciantes até profissionais experientes de UIUX que desejam se expandir para Agora, nenhuma experiência anterior com fintech é necessária. Eu vou guiá-lo em cada etapa do caminho. 2. Como entender as etapas do fluxo de trabalho (novo): Oi, pessoal. Bem-vindo de volta e parabéns. Neste curso, mostrarei como criar um aplicativo móvel do zero. Agora, esse aplicativo móvel será um aplicativo móvel de investimento em ações que os usuários poderão usar para investir em ações de empresas nas quais adorariam investir Agora, antes de começarmos a projetar isso, eu adoraria detalhar os estágios do nosso fluxo de trabalho para este projeto, para que você possa entender o processo de execução de criar produtos que sejam soluções comerciais reais. Então, pessoal, aqui estão as etapas do nosso fluxo de trabalho. Em primeiro lugar, as partes interessadas deste projeto, ou devo dizer, os proprietários do projeto, ou mesmo a empresa para a qual trabalhamos, nos apresentarão um problema para o qual gostariam que projetássemos. Agora, quando eles nos apresentarem esse problema, eles também nos falarão sobre os usuários, quais são as pessoas que enfrentam o problema para o qual querem que criemos. Então, pessoal, depois disso, as partes interessadas declararão suas metas esperadas para o projeto. Agora, depois que as partes interessadas apresentarem um problema e declararem as metas esperadas para nós, a próxima etapa do nosso fluxo de trabalho será nós, designers de UX, simpatizemos com os usuários Então pessoal, depois de simpatizarmos com os usuários que enfrentam o problema, vamos criar uma declaração do problema E depois de criar essa declaração do problema, a próxima etapa do nosso fluxo de trabalho será a fase em que teremos que apresentar ideias que possam ser as melhores soluções comerciais para os problemas identificados na declaração do problema. Agora, quando finalmente conseguirmos ter uma ideia dos problemas na declaração do problema, a próxima ação será projetar essa ideia em um protótipo testável E depois de projetar essa ideia em um protótipo testável, testaremos o design para ter certeza que esse design é capaz de resolver os problemas na declaração do problema E isso é lindo, pessoal. Então, pessoal, vamos trabalhar. 3. Detalhando as etapas do fluxo de trabalho (novo): Oi, pessoal. Bem-vindo de volta e parabéns. Agora é hora de detalharmos as etapas do fluxo de trabalho desse projeto. Então, pessoal, vamos trabalhar. Agora, eu viria aqui na Figma e usaria um arquivo FIG jam para trabalhar em todas as partes analíticas do nosso fluxo de Então, vamos criar um arquivo Fig Jam. E para fazer isso, tudo que você precisa fazer é vir aqui e clicar neste botão de arquivo Fig Jam aqui. E ao fazer isso, você criou com sucesso um arquivo Fig Jam. É tão fácil quanto isso, pessoal. Então, pessoal, se você é novato no Figma, é importante entender que você não precisa se preocupar com nada É realmente uma ferramenta simples de usar. E posso garantir que, ao final deste curso, você seria muito bom em usar o Figam, desde que seguisse este curso Agora, a próxima coisa que farei depois de criar um arquivo Fi Jam é dar um nome ao arquivo Fike Jam Então, vou encerrar isso porque não vamos trabalhar com IA. Vamos seguir em frente e seguir esse projeto passo a passo. Então, vamos encerrar isso. Agora, vou chamar isso de investimento em ações de Fig Jam. Você pode chamá-lo do nome que achar adequado dependendo do que você está projetando ou em qual projeto você está trabalhando. Então, eu viria aqui e escreveria Fig Gam, investindo em ações Fig Gam, investindo em E tudo bem. Agora, depois de fornecer esse arquivo Fig Jam, a próxima coisa a fazer é descrever os estágios do nosso fluxo de trabalho aqui no fig jam. Gente, vamos fazer isso. Em primeiro lugar, eu vinha aqui e depois aumentava o zoom. Depois disso, eu vinha aqui e selecionava um navio quadrado para anotar o título do nosso fluxo de Essa é a forma quadrada quando eu a seleciono, e então eu a solto aqui e depois a ajusto. E tudo bem. Então, eu clicaria nessa ferramenta de texto aqui para que pudéssemos anotar nosso texto, e eu diria estágios do fluxo de trabalho. E tudo bem. Então, pessoal, a próxima coisa que eu faria é ter uma nota adesiva onde descreveria as etapas do nosso fluxo de trabalho Portanto, para criar uma nota adesiva em geleia grossa, tudo o que você precisa fazer é vir aqui e selecionar as notas adesivas Você pode ver onde meu mouse também está ligado e depois fazer com que ele fique aqui e depois ajustá-lo para caber. E tudo bem. Então, pessoal, vamos mudar a cor das nossas notas adesivas para isso E então vamos clicar nesse espaço reservado para texto artístico aqui para que possamos anotar todas as etapas do fluxo de trabalho sobre as quais falamos Então, pessoal, eu gostaria de fazer disso uma lista e gostaria que fosse uma lista abolada Então, eu viria aqui para selecionar a propriedade da lista Bleted E então eu escrevia rapidamente o primeiro estágio do fluxo de trabalho, que é esse. Diz que os proprietários da empresa apresentam um problema e os usuários enfrentam o problema. Agora, eu criaria outro item da lista, que será o próximo estágio do nosso fluxo de trabalho, e esse será o estágio em que a parte interessada terá que definir as metas desse projeto Eu diria que defina metas. Vamos criar um espaço aqui, e tudo bem. Agora, depois que as metas são definidas, nós, designers de UX, simpatizamos com os usuários, que é a próxima etapa do nosso fluxo de trabalho Então, pessoal, eu diria que simpatizem e depois criaria um espaço aqui mesmo Agora, depois que os designers de UX tiverem simpatizado com os usuários, a próxima etapa do nosso fluxo de trabalho será a etapa em que escreveremos ou, devo dizer, criaremos uma declaração do problema Então, eu viria aqui e diria criar uma declaração de problema. E então eu daria um espaço aqui. E tudo bem. Então, pessoal, vamos usar nossa propriedade de ferramenta manual para mover nossa tela. Para que possamos ver claramente o que estamos fazendo aqui. E tudo bem. Agora, depois de termos criado uma declaração do problema, a próxima etapa do nosso fluxo de trabalho seria a fase em que apresentaremos uma ideia que possa resolver os problemas listados na declaração do problema. Então, pessoal, vamos dizer a ideia. Vamos criar um espaço aqui mesmo. E tudo bem. Agora, depois de termos apresentado a melhor ideia que possa resolver os problemas listados na descrição do problema, o próximo estágio do nosso fluxo de trabalho será o estágio em que projetaremos essa ideia em um protótipo testável Então, pessoal, vamos anotar a próxima etapa do nosso fluxo de trabalho, que é o protótipo de design Tenha um espaço aqui, tudo bem. Agora, vamos usar nossa propriedade de ferramenta manual para mover essa tela para que possamos ver o que estamos fazendo aqui. E tudo bem. Agora, depois de projetarmos essa ideia em um protótipo testável, passaremos para a próxima etapa do nosso fluxo de trabalho Quit será o estágio em que testaremos a ideia que criamos. Eu venho aqui e depois digo teste, vamos ter um espaço aqui. E tudo bem. Então, pessoal, descrevemos com sucesso os estágios do nosso fluxo de Então, vamos destacar rapidamente tudo isso e, em seguida, torná-lo ousado, só para ver mais claro e de uma forma mais organizada Tudo bem. E tudo bem. Então, pessoal, vamos voltar atrás. Para que possamos ver tudo o que fizemos. Fantástico. Eu amo isso. Agora, vamos usar nossa propriedade de ferramenta manual para mover nossa tela aqui. E tudo bem. Então, pessoal, agora que descrevemos com sucesso todos os estágios do nosso fluxo de trabalho, o próximo passo seria descrevermos , ou devo dizer, anotar todas as ações que seriam tomadas em cada um desses estágios do fluxo de Em outras palavras, vamos detalhar cada um desses estágios do fluxo de trabalho, um após outro, para que possamos saber quais ações tomar em cada estágio e como otimizar nossos resultados. E isso é lindo, pessoal. E para fazer isso, eu viria aqui, e então eu teria essa ferramenta quadrada selecionada, certo? E eu gostaria que ficasse aqui. E então o que eu vou escrever nesta ferramenta de formato quadrado será a primeira etapa do nosso fluxo de trabalho, que é isso. Então, eu copiaria isso e colaria aqui e depois ajustaria isso, vamos manter isso de fora. E tudo bem. Essa é a primeira etapa do nosso fluxo de trabalho, certo? Então, eu viria aqui e selecionava uma nota adesiva para que pudéssemos anotar o que vai acontecer nessa primeira etapa do nosso fluxo de Então, vamos ajustar isso para caber. Então, pessoal, vamos também mudar a cor dessa forma para que possamos diferenciá-la dessa Também podemos mudar a cor dessa nota adesiva para essa , para que possamos diferenciá-la dessa E tudo bem. Então, pessoal, eu escreveria o que vai acontecer nessa etapa, que é a primeira etapa do nosso fluxo de trabalho. Agora, esse é o estágio em que as partes interessadas nos apresentarão um problema e também nos informarão sobre os usuários para os quais desejam que projetemos. Então, pessoal, listando, neste curso, eu gostaria que assumíssemos que temos uma parte interessada em algum lugar, ou devo dizer, uma organização ou empresa para a qual trabalhamos que deseja que criemos um aplicativo que os usuários possam usar para investir em ações para eles, Então, vou escrever isso nesta nota. Diz que os usuários que são investidores em ações no Sudeste têm dificuldade em investir em ações usando os aplicativos de investimento disponíveis devido excesso de informações e apresentação complicada das informações no aplicativo Então, pessoal, quem são os usuários? Os usuários são investidores em ações no Sudeste. Então, pessoal, ter isso aqui significa simplesmente que as partes interessadas nos apresentaram um problema e os usuários estão enfrentando o problema. Agora, esse é o primeiro estágio do nosso fluxo de trabalho, e vimos o que vai acontecer nesse estágio. Vamos dar uma olhada rápida na próxima etapa. É o estágio em que as partes interessadas, ou devo dizer, a organização para a qual estamos trabalhando , terão que definir a meta do projeto. Vou duplicar isso e fazer com que fique aqui . Duplicar é o Controle D. Se você estiver usando um MAC é o Comando D. Eu gostaria que você ficasse aqui E tudo bem. Agora, eu também duplicaria isso e faria com que você ficasse aqui E tudo bem. Agora, eu destacaria e retiraria tudo isso e, em seguida, diria que definiria metas pelas partes interessadas. E tudo bem. E eu também vinha aqui com nossas notas adesivas e depois tirava tudo isso Então, pessoal, vamos supor também que temos uma parte interessada em algum lugar que nos enviou isso como sua meta Diz: faça uma pesquisa e ajude os usuários a simplificar todas as tarefas necessárias para que um investimento em ações seja bem-sucedido. E isso é lindo, pessoal. Então, pessoal, o que temos aqui até agora é isso. Os proprietários do projeto nos apresentam um problema e os usuários enfrentam o problema. E eles também definiram a meta esperada para o projeto. Então, qual é a meta esperada. Então, pessoal, o objetivo esperado é que eles queiram que pesquisemos e ajudemos os usuários a simplificar todas as tarefas necessárias para que um investimento em ações seja bem-sucedido. Então, pessoal, vamos passar para a próxima etapa do nosso fluxo de trabalho, que é uma fase em que nós, designers de UX, temos que simpatizar com os usuários que enfrentam o problema Então, pessoal, eu viria aqui e depois duplicava isso, assim como temos feito E então eu faria com que ficasse aqui . E tudo bem. E eu também continuaria duplicando isso e fazendo com que ficasse aqui E tudo bem. E então, vamos eliminar tudo isso. E eu diria que simpatizem E isso é perfeito, pessoal E nesse estágio de empatia, esse é realmente o estágio em que nós, designers de UX, começaremos a Então, pessoal, quais são exatamente as ações a serem tomadas nesta fase? Assim, podemos dizer com segurança que simpatizamos adequadamente com os usuários que enfrentam o problema Então, o que vamos fazer é entrevistar os usuários cara a cara ou até mesmo enviar pesquisas digitalmente aos usuários Então, vamos tirar tudo isso. Então, pessoal, o que vamos fazer é isso. Vamos entrevistar os usuários, ou devo dizer, perguntar aos usuários cara a cara ou simplesmente enviar pesquisas digitalmente aos usuários E isso são caras lindos. Então, pessoal, o único objetivo disso é entendermos os problemas da perspectiva dos usuários que enfrentam o problema. Agora, depois disso, vamos criar o que chamamos de persona de usuário, tudo sob esse estágio de empatia Então, pessoal, eu faria disso uma lista com marcadores para que possamos organizá-la adequadamente E então eu diria que crie uma persona de usuário. Vamos ter um espaço aqui. E tudo bem. Então, pessoal, quando terminamos o estágio de empatia, realizando essas duas ações aqui, entrevistando os usuários, ou devo dizer, perguntando pessoalmente aos usuários ou simplesmente enviando uma pesquisa digital e também criando uma persona de usuário, próxima linha é passar para a próxima etapa do C é simplesmente um estágio em que teremos que criar uma declaração do problema. Então, eu viria aqui e duplicaria isso, assim como temos feito E eu vou fazer com que fique aqui. E tudo bem. Também vou duplicar isso e fazer com que fique logo abaixo E isso é lindo, pessoal. Então, pessoal, eu tirava tudo isso e depois dizia criar uma declaração de problema. Então, pessoal, neste estágio, você precisa, como designer de UX, criar uma declaração de problema. Agora, o que você fará é simplesmente definir os problemas dos usuários com tudo o que você coletou do estágio anterior, que é a tag de empatia Então, eu viria aqui e tiraria tudo isso. E então eu diria estados ou devo dizer que descreva os problemas dos usuários com tudo o que você coletou do estágio anterior. E isso é lindo, pessoal. Então, pessoal, isso significa que depois entrevistar os usuários para entender os problemas de sua própria perspectiva e também criar uma persona de usuário para cada usuário, o que você fará é usar todos os dados coletados para declarar com precisão os problemas que os usuários estão enfrentando Agora, quando você tiver criado com sucesso a declaração do problema , você está definindo os problemas corretamente. A próxima coisa que você faz é passar para o próximo estágio do nosso fluxo de trabalho, que é o estágio da ideia. Então, pessoal, vou usar nossa propriedade de ferramenta manual para mover nossa tela para que tenhamos um espaço aqui. E tudo bem. Agora, vamos duplicar isso exatamente como estamos fazendo Eu quero que fique aqui, e tudo bem. Eu também duplicaria isso para que ficasse aqui. E tudo bem. Então, pessoal, eu tirava tudo isso, e então eu dizia ideia. Agora, quando você chegar ao estágio da ideia, tudo o que você precisa fazer é, antes de tudo, iniciar uma sessão de brainstorming E durante essa sessão de brainstorming, vote na melhor E quando você finalmente votar na melhor ideia, selecione a ideia com a maior votação. Então, eu viria aqui e depois tirava tudo isso. E então eu diria que lance uma sessão de brainstorming. E depois de eu ter lançado uma sessão de brainstorming, o próximo na fila seria eu votar na melhor Então, pessoal, eu gostaria de fazer essa lista resumida para poder votar na melhor ideia Então, vamos ter um espaço aqui. E depois de termos votado na melhor ideia, o próximo passo é obter a melhor ideia, ou devo dizer, selecionar a ideia com a maior votação. Eu diria que tenho uma melhor ideia. Vamos ter um espaço aqui. E isso é lindo, pessoal. Agora, neste estágio, você teve a ideia que agora pode passar para o próximo estágio do nosso fluxo de trabalho, que é um estágio em que vamos projetar a melhor ideia em um protótipo testável Então, pessoal, com nossa ferramenta manual, vamos mudar nossa tela. E tudo bem. Agora, vamos duplicar isso e fazer com que fique aqui, assim como temos feito Tudo bem. E também podemos duplicar essa nota adesiva e fazer com que ela fique aqui Então, pessoal, vamos tirar tudo isso e depois vamos ter a próxima etapa do nosso fluxo de trabalho, que é a fase do protótipo de design Eu diria que protótipo de design. E tudo bem. Então, pessoal, quando você chega a esse estágio, quais são as ações que você precisa realizar para projetar adequadamente um protótipo viável Gente, as ações que vamos tomar para projetar adequadamente o protótipo são essas Vamos tirar tudo isso. Em primeiro lugar, vamos criar uma arquitetura de informações. Eu diria que crie uma arquitetura de informação. Mas e tudo bem. Então, pessoal, eu gostaria de fazer essa lista abolada. Então, eu clicaria na propriedade da lista Bleted. Agora, depois de criarmos uma arquitetura de informações, a próxima coisa que faremos é criar um protótipo de menor fidelidade da melhor ideia Eu diria, crie um protótipo de menor fidelidade da melhor ideia Vamos ter um espaço aqui. Tudo bem. Agora, depois de termos criado um protótipo de baixa fidelidade da melhor ideia, a próxima na fila é testar o protótipo de baixa fidelidade Eu viria aqui e depois diria para testar o protótipo de baixa fidelidade. Vamos criar um espaço aqui. Tudo bem. Gente, depois de testarmos o protótipo de baixa fidelidade, a próxima linha é criar um protótipo de alta Eu diria, crie um protótipo de alta fidelidade. Vamos ter um espaço aqui. E isso é lindo, pessoal. Então, pessoal, isso se traduz em isso. Em primeiro lugar, vamos criar uma arquitetura de informação para a melhor ideia que derivamos do estágio da ideia. E depois disso, vamos usar essa arquitetura de informação para criar um protótipo de baixa fidelidade da melhor ideia Agora, depois de criarmos esse protótipo de baixa fidelidade, vamos testar esse protótipo de baixa fidelidade Então, quando o teste for bem-sucedido, vamos criar um protótipo de alta fidelidade ou devo dizer que essa é a melhor ideia que obtivemos desde o E isso são lindos, caras. Agora, depois de criarmos o protótipo de alta fidelidade, passaremos para a próxima etapa do nosso fluxo de trabalho, que é uma etapa em que, eventualmente, teremos que testar o protótipo de alta fidelidade Então, pessoal, vamos usar nossa ferramenta manual para mover nossa tela para ter um espaço aqui. Agora, vamos duplicar isso exatamente como temos feito e fazer com que fique aqui. Tudo bem? Então, vamos também duplicar isso e fazer com que fique aqui Então, pessoal, vamos tirar tudo isso e depois dizer teste. E tudo bem. E também, vamos eliminar tudo isso. E aqui, eu diria simplesmente testes de usabilidade E isso é lindo, pessoal. Então, pessoal, o que temos aqui é um detalhamento adequado do estágio do nosso fluxo de trabalho. Vamos voltar ao zoom. E então, com nossa ferramenta manual, vamos mudar isso e colocá-lo aqui. E é importante entender que essas páginas devem fluir uma após a outra, que significa que é importante conectá-las usando nossa ferramenta de conectores, que está aqui Tudo bem? Porque com essa ferramenta de conector, podemos conectar todas essas páginas uma após a outra. Então, pessoal, eu selecionaria nossa ferramenta de conectores, clicaria nela e arrastaria. E eu farei isso em todas essas etapas. Está bem? Clique nesse ponto e, em seguida, segure e arraste até esse ponto. E isso é lindo, pessoal. Então, pessoal, em essência, isso significa que vamos projetar nosso projeto seguindo o detalhamento do nosso fluxo de trabalho, e isso é lindo. Então, pessoal, agora que descrevemos e detalhamos todos os estágios do nosso fluxo de trabalho, o próximo passo é começar a executar cada uma das ações que descrevemos aqui em nosso E isso é perfeito, pessoal. Agora, vamos trabalhar. Te vejo em breve. 4. Configurando uma pesquisa digital: Oi, pessoal. Bem-vindo de volta e parabéns. Agora concluímos com sucesso o estágio de empatia Enviamos com sucesso pesquisas digitais aos usuários, e os usuários, por sua vez, enviaram suas respostas. E por meio de suas respostas, pudemos criar personas de usuário E tudo bem. Agora, a próxima linha é criar uma declaração do problema, que consiste em estabelecer os problemas dos usuários com tudo o que coletamos, ou devo dizer que reunimos do estágio de empatia, que é o estágio anterior Tudo bem? Agora, B por tudo o que reunimos na fase de empatia, posso simplesmente dizer que minha declaração de problema afirma que os usuários do aplicativo de investimento existente enfrentam dificuldades ao investir em ações devido ao excesso de informações no aplicativo e às etapas complexas que são tomadas antes que alguém possa investir com sucesso em uma Essas dificuldades e desafios geralmente afetam negativamente a experiência do usuário. Então, pessoal, vamos criar uma declaração do problema. Eu viria aqui e, em seguida, clicaria neste texto também na propriedade e , em seguida, faria com que ele ficasse aqui. Posso simplesmente dizer que minha declaração de problema afirma que os usuários do aplicativo de investimento existente enfrentam dificuldades ao investir em ações devido ao excesso de informações no aplicativo e às etapas complexas que são tomadas antes que alguém possa investir com sucesso em uma E essas dificuldades ou desafios geralmente afetam negativamente a experiência dos usuários. E isso é lindo, pessoal. Agora, eu destacaria tudo isso e o tornaria ousado. E tudo bem. Então, pessoal, essa é a minha declaração de problema, e esse é o problema que vou tentar resolver aqui neste curso. Então, pessoal, quando você observa criticamente rolando para cima até o detalhamento dos estágios do nosso fluxo de trabalho, você percebe que concluímos com sucesso o estágio de empatia E também criamos uma declaração do problema, que acabamos de fazer agora. Você pode ver isso aqui, ok? Agora, o próximo estágio do nosso fluxo é o estágio morto. é o estágio em que teríamos que ter uma ideia que pudesse resolver o problema listado na declaração do problema. São lindos, caras. Então, pessoal, quais são as ações que devem ser realizadas aqui no estágio Ida? Então, no estágio Ida, a primeira coisa que vamos fazer é organizar uma sessão de brainstorming Quich é literalmente uma época que convidaremos outros designers, gerentes de produto, gerentes de negócios, engenheiros de software, advogados e assim por diante Agora, quando finalmente terminarmos de convidar todas essas pessoas, apresentaremos a elas informações suficientes sobre os problemas na declaração do problema e também pediremos que apresentem ideias que possam resolver os problemas na declaração do problema Agora, quando todas essas pessoas tiverem uma ideia a próxima coisa a fazer é ler todas essas ideias para todos e depois votar na melhor ideia. E isso são lindos, caras. Agora, a ideia com a maior votação deve ser selecionada e, quando isso for feito, significa que você está pronto para passar para a próxima etapa do nosso fluxo de trabalho, que é a fase em que você terá que projetar essa ideia em um protótipo testável Agora, depois de terem votado na melhor ideia, a próxima linha é selecionar a ideia com a maior votação. Agora, a ideia com os votos mais altos deve ser selecionada e, quando isso for feito, significa que estamos prontos para passar para a próxima etapa do nosso fluxo de trabalho, que é a fase em que teríamos que projetar essa ideia em um protótipo testável Gente, antes de passarmos para esse estágio aqui, vamos descer aqui e depois duplicar isso e fazer com que fique aqui E então eu diria que o palco do IDed. Vamos tirar tudo isso e dizer estágio IDed. Agora, como essa será uma fase de sessão de brainstorming, é importante entender que obviamente não posso ter uma sessão de brainstorming aqui Porque será algo que você configurará com as pessoas com quem deseja configurá-lo, seja no Skype, Zoom, Discord ou até mesmo na vida real De qualquer forma, você quer configurá-lo. Tudo bem. Gente, vamos vir aqui e depois duplicar isso e fazer com que fique logo abaixo Assim mesmo. Está bem? E então vamos vir aqui e depois mudar o tamanho da fonte para médio. E tudo bem. Então, pessoal, vamos vir aqui e duplicar isso e fazer com que fique aqui, desse jeito E então eu usaria minha propriedade de ferramenta manual para mover nossa tela. E tudo bem. Agora, presumi que tive uma sessão de brainstorming offline ou devo dizer que conduzi uma sessão devo dizer que conduzi de brainstorming offline apenas para que pudéssemos Eu também diria que durante aquela sessão de brainstorming, chegamos a uma Então, pessoal, digamos uma ideia selecionada. Agora, eu vinha aqui e depois mudava a cor desse texto. Para isso. Isso é bom. Então eu diria que foi uma ideia selecionada. Agora, quais são as ideias selecionadas às chegamos durante nossa sessão de brainstorming Agora, vou duplicar isso novamente e depois fazer com que fique aqui Então eu virei aqui e depois mudarei o tamanho da fonte para médio. Agora, essa é a ideia selecionada para esta lição. Diz, crie um investimento onde os gráficos são representados com texto Onde os usuários terão a opção de adicionar dinheiro às suas contas ou carteiras por meio de transferência bancária ou cartão de débito Crie um aplicativo de investimento em que histórico de transações recentes seja facilmente acessível. Cria um aplicativo de investimento em que inglês puro e simples será usado. E isso são lindos, caras. Agora, eu faria uma lista. Agora, ao examinar atentamente esse estágio da ideia, você verá que essa ideia resolve os problemas que temos na declaração do problema Tudo bem E essa declaração do problema foi extraída de tudo o que aprendemos durante o estágio de empatia E pudemos aprender tudo o que aprendemos durante esse estágio porque criamos um formulário de pesquisa e o enviamos aos usuários. Então, pessoal, vocês podem ver como cada etapa se conecta. E isso é lamentável, pessoal. R Então, pessoal, agora que temos uma ideia que podemos usar para resolver os problemas na declaração do problema, o próximo estágio do nosso fluxo de trabalho seria o estágio do protótipo de design. Então, pessoal, agora que temos uma ideia que podemos usar para resolver os problemas na declaração do problema, o próximo estágio do nosso fluxo de trabalho seria o estágio do protótipo de design Agora, quais são as ações que precisam ser tomadas nesse estágio? As ações que seriam tomadas nesta fase são todas essas. Você pode ver onde meu mouse so está ligado. Tudo bem? Essas são as ações que serão tomadas na fase de design do protótipo Em primeiro lugar, precisaremos criar uma arquitetura de informações para a melhor ideia que foi selecionada durante a fase idealizada Então, pessoal, vamos rolar para baixo aqui. E então duplique isso e faça com que fique logo abaixo E então eu usaria minha propriedade de ferramenta manual para deslocar minha tela. E então eu diria arquitetura da informação. E tudo bem. Agora, antes de criarmos uma arquitetura de informações, vamos entender o que é uma arquitetura informações e por que é importante criá-la. Então, pessoal, a arquitetura de informações de um aplicativo móvel é simplesmente a maneira como você organiza e organiza as informações no aplicativo móvel que ajudará o usuário desse aplicativo móvel a realizar com êxito sua tarefa nesse aplicativo móvel sem uma experiência ruim. A arquitetura da informação é como um modelo, uma representação visual da infraestrutura, dos recursos e da hierarquia do produto O nível de detalhes depende do designer. Portanto, a arquitetura da informação também pode incluir navegação, aplicação, função e comportamentos, conteúdo e fluxos. Não há limite definido para o tamanho ou a forma da arquitetura da informação. No entanto, ele deve abranger a estrutura generalizada do produto para que qualquer pessoa, teoricamente , possa que qualquer pessoa, teoricamente lê-lo e entender como Portanto, é na arquitetura da informação que você decidirá quais recursos e quais informações existirão em cada página do aplicativo e em cada etapa do aplicativo. Então, pessoal, vamos em frente e vamos criar uma arquitetura de informação para essa ideia. Então, pessoal, a maneira de começar a criar sua arquitetura de informações é, antes de tudo, definir as metas dos usuários que usarão o aplicativo e, em seguida, definir a tarefa que os usuários devem a tarefa que os usuários devem concluir para atingir suas metas no aplicativo. Eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui E então eu mudaria a cor disso para isso, e então eu diria metas. Agora, qual é o objetivo do usuário? Simplificando, o objetivo do usuário é investir em uma boa experiência. Eu duplicaria isso e depois faria com que ficasse aqui e depois mudaria o tamanho da fonte para médio E então eu diria, invista em uma boa experiência. Vamos mudar a cor disso para isso. Agora, quais ações os usuários tomarão para atingir esses objetivos? Em primeiro lugar, o usuário precisará se inscrever ou fazer login e, em seguida, também precisará depositar fundos na conta ou na carteira. E depois que o usuário depositar fundos na conta ou na carteira, o usuário investirá em ações. Gente, eu viria aqui e depois duplicava isso e fazia com que ficasse aqui E então eu diria tarefa do usuário. E tudo bem. Agora, vamos demonstrar nossa tarefa de usuário usando esses navios. Então, eu viria aqui e depois selecionaria esta nave e a deixaria aqui. E então eu me ajustava e fazia com que ficasse aqui. E então eu diria que se inscreva ou faça login. Agora, depois disso, eu também viria aqui e depois duplicava isso e depois fazia com que ficasse aqui E então eu tirava tudo isso. E então eu diria contas de fundos ou carteiras. E tudo bem. Agora, depois disso, eu também duplicaria isso e faria com que ficasse aqui E então eu tirava tudo isso e diria que investiria. E isso é lindo, pessoal. Agora, eu usaria nossa ferramenta de conectores para conectar tudo isso. E tudo bem. Então pessoal, assim como eu disse anteriormente, a tarefa do usuário aqui são as ações que os usuários devem realizar para atingir esse objetivo, que é investir em uma boa experiência. Sim. Agora, quais são as tarefas, ou devo dizer, quais são as ações? Essas são as ações. O usuário teria que se inscrever no aplicativo como um novo usuário ou fazer login como um usuário existente. E depois disso, o usuário também teria que adicionar dinheiro ou, devo dizer, financiar a conta ou carteiras e depois usar o dinheiro da conta ou carteira para investir em qualquer patrimônio de sua escolha E é por isso que conectei tudo isso para mostrar que é um processo. Então, se eles conseguirem realizar essa tarefa, treinadores, para se inscrever ou fazer login, essa tarefa é treinada para financiar suas contas ou E então essa tarefa orienta o investimento, significa que eles alcançaram seu objetivo, orienta a investir com uma boa experiência no aplicativo Então, depois de definir as metas do usuário e declarar a tarefa que o usuário concluir para atingir suas metas, vamos criar nossa arquitetura de informações para o fluxo desse aplicativo Então, vamos fazer isso. Mas antes de prosseguirmos com isso, eu viria aqui e faria fosse médio, para que pudéssemos ver com mais clareza E tudo bem. 5. Criando personas de usuário (novo): Ei, pessoal, bem-vindos de volta e parabéns. Agora, é hora de criarmos uma persona de usuário. Agora, depois criar seu serviço e enviá-los, e os usuários, ou devo dizer, as pessoas você os envia enviarem suas respostas, você cria o que chamamos personas de usuário para cada usuário que envia suas respostas Então, pessoal, nesta fase, eu gostaria que a gente visse como criar uma persona de usuário Mas atenção, pessoal, criar uma persona de usuário é uma ação que você realiza enquanto está no estágio de empatia Agora, só para entender isso melhor, esse é o estágio da empatia. É o estágio em que você conhece melhor os usuários e também entende suas dificuldades ou devo dizer melhor suas frustrações E isso porque é somente quando você entende melhor um problema que você pode encontrar uma solução melhor para esse problema. Então, pessoal, vamos simplesmente ver como criar uma persona de usuário para cada usuário que envia uma resposta à nossa pesquisa Então, pessoal, em primeiro lugar, é importante rotularmos nosso trabalho aqui em seções diferentes para que possamos entender facilmente o que está acontecendo aqui. Então, eu vinha aqui e depois aumentava o zoom. E quando eu faço isso, eu usaria minha propriedade handsol para mudar nossa tela aqui E então eu vinha aqui e selecionava propriedade da ferramenta de texto e , em seguida, fazia com que ela ficasse aqui. E então eu diria personas de usuários. E então eu viria aqui para alterar o tamanho da fonte do nosso texto de pequeno para grande, para que pudéssemos ter uma visão melhor do que escrevemos aqui. E então eu destacaria tudo isso e o tornaria ousado, e tudo bem. E eu também viria aqui para mudar a cor desse texto para isso. E tudo bem. Então, pessoal, essas serão nossas personas de usuário. Então, pessoal, vamos continuar duplicando isso e duplicar é o Controle D. Se você estiver usando um MAC é o Comando D, e então eu gostaria que isso ficasse aqui logo acima desse estágio do fluxo E então eu diria que falha no fluxo de trabalho. Você pode decidir chamá-lo qualquer nome que achar adequado. E tudo bem. Então, pessoal, vamos usar nossa propriedade handhold para mover nossa tela para que possamos ter uma visão melhor do que estamos fazendo aqui Agora, a primeira coisa que eu faria aqui neste estágio de persona do usuário é ter a imagem do usuário para o qual eu quero criar uma persona Então, eu vinha aqui e selecionava a ovelha quadrada e a deixava aqui. Então, pessoal, aqui nesta nave quadrada, vou colocar a imagem do usuário para quem eu quero criar uma imagem pessoal. Agora, isso é necessário, independentemente de o usuário enviar uma imagem ou não. Você pode simplesmente ter esse dia aqui. Se o usuário não enviar uma imagem, deixe isso em branco e faça o resto. Mas se o usuário enviar uma imagem, você poderá colocá-la aqui. Então pessoal, existe uma maneira simples de colocar uma imagem em uma forma aqui na figma Tudo o que você precisa fazer é manter essa forma selecionada e clicar com o botão direito nela , acessar plug-ins e usar os plug-ins splash para isso Agora, quando o plug-in é lançado, tudo o que preciso fazer é vir aqui e digitar Ebo woman, por exemplo, para que eu possa ver a imagem de uma mulher Ebo aparecer Vamos estragar tudo. E tudo bem. Tudo bem. Vamos encerrar isso. Então, vamos usar nossa propriedade de ferramenta manual para mover essa tela para que possamos ver claramente o que estamos fazendo aqui. Então, pessoal, a próxima coisa a fazer é ter todos os detalhes sobre essa pessoa que tem essa imagem aqui, assim como reunimos na pesquisa que acabamos de realizar. Então, vou começar escrevendo o e-mail dela. Então, pessoal, vamos vir aqui e clicar nessa propriedade textual e fazer com que ela fique aqui E tudo bem. Agora, eu diria e-mail. O endereço de e-mail dela é Sarah 851 78@gmail.com. E tudo bem. Mao, a próxima linha é o nome completo dela. O nome completo dela é Sarah Green. Então, eu diria nome completo, Sarah Green. Mas a próxima linha é seu país e cidade de residência. Eu diria país e cidade de residência. Seu país e cidade de residência são o estado de Imo, na Nigéria. Então, eu diria que MangeriaEMO States. Então, deixe-me esticar isso um pouco. E tudo bem. Então, a próxima na fila é a idade dela. Então, eu diria idade. Quantos anos tem Sarah Green? Sarah Green tem 23 anos de idade. Então, eu diria 23. E tudo bem. Agora, a próxima na fila é a profissão dela. Então, eu diria profissão. Então, pessoal, qual é a profissão dela? Ela é contadora, então eu diria contadora Agora, a próxima pergunta que fizemos a Sarah Green foi você já investiu em ações a partir de um aplicativo móvel E a resposta dela foi sim. E isso é lindo, pessoal. Agora, vamos esticar isso um pouco. E tudo bem. Então, pessoal, vamos deixar esse texto em negrito para que possamos diferenciá-lo da resposta real M. Vamos usar nossa propriedade handol para mover essa tela. E tudo bem. Então, pessoal, em resumo, podemos dizer que Sara Green é uma contadora residente no estado de Imo, Nigéria, e Sarah Green também é uma investidora de ações que investe em ações com investimentos existentes na parte sudeste da E tudo bem. E tudo bem. Então, vamos selecionar tudo isso e, em seguida, colocá-lo em negrito. E isso é lindo, pessoal. Então, pessoal, isso é como um resumo da personalidade dela. Então, pessoal, vou destacar seus desafios com o aplicativo de investimento existente que ela usou no Sudeste. E eu também destacaria as metas que ela pretende alcançar com um aplicativo de investimento. Então, pessoal, eu viria aqui e depois usaria nossa propriedade de ferramenta manual para mover essa tela para que pudéssemos continuar com o que estamos fazendo aqui. Agora, eu viria aqui e depois usaria nossa propriedade de ferramenta de texto para anotar seus objetivos. Então, eu diria em negrito. E então eu o tornaria ousado. E então eu mudaria o tamanho da fonte para grande, e tudo bem. E eu gostaria que ficasse aqui. E eu também duplicaria isso e faria com que ficasse aqui E então eu chamaria isso de desafios. E tudo bem. Então, pessoal, eu duplicaria isso e faria com que ficasse aqui E então eu mudaria o tamanho da fonte para médio. E tudo bem. Então, pessoal, o primeiro objetivo que ela adoraria alcançar é economizar tempo. Então, eu diria que economize tempo. E tudo bem. Agora, a segunda meta que ela adoraria alcançar é avaliar o histórico de transações com facilidade Eu diria que avalie o histórico de transações. Com facilidade. E tudo bem. Agora, o próximo objetivo que ela adoraria alcançar é adicionar dinheiro à carteira com mais de uma opção. Então, eu diria que adicione dinheiro à minha carteira com mais de uma opção. E tudo bem. Agora, o último objetivo que ela adoraria alcançar é investir primeiro. Então, eu diria que invista primeiro. Então, pessoal, eu destacaria tudo isso e depois faria uma lista resumida só para organizá-la adequadamente. E tudo bem. Agora, aqui, o que temos aqui é isso? Essas são as coisas que ela gostaria ter como experiência com um aplicativo de investimento. Então, pessoal, vamos vir aqui e depois enfrentar os desafios dela. Então, eu traria isso aqui. E então eu duplicava isso e fazia com que ficasse logo abaixo E então eu mudaria o tamanho da fonte para médio. E tudo bem. Então, pessoal, quais são os desafios dela? Alguns de seus desafios incluem gráficos complicados e irrelevantes Então, eu diria gráficos complicados e irrelevantes. E tudo bem. Agora, a próxima dificuldade que ela geralmente encontra é muita informação para entender Então, eu diria que há muita informação para entender. E tudo bem. Agora, a próxima dificuldade é a interface de usuário amigável. Então, eu diria que é uma interface de usuário amigável. E tudo bem. Agora, a próxima dificuldade que ela encontra é muita dificuldade em adicionar fundos à carteira Então, eu diria que é muito trabalhoso. Ao adicionar fs à carteira ou conta. E tudo bem. Então, pessoal, eu destacaria tudo isso e depois faria uma lista resumida E tudo bem. Então, pessoal, todos esses são os detalhes que obtivemos das respostas que coletamos do formulário de pesquisa. Então, pessoal, essas são as dificuldades atuais que ela experimenta. Então, pessoal, vamos criar outra persona de usuário para o outro usuário que respondeu à pesquisa E esse indivíduo será Noah Benjamin. Então, eu viria aqui e depois selecionaria essa nave quadrada E então eu faria com que ficasse aqui. Está bem? Então, vamos combinar isso com isso. E tudo bem. Agora, selecionarei isso e, em seguida, clicarei com o botão direito do mouse sobre ele, assim como fizemos anteriormente com Sarah Grains, e depois clicarei no plugue inicial para iniciar Agora, quando o plugin é lançado, eu viria aqui e depois digitava Eboman Então, pessoal, vamos rolar para baixo para selecionar uma foto adequada. Então, isso é bom. E tudo bem. Agora, a próxima coisa a fazer é ter todos esses detalhes sobre essa pessoa, assim como obtivemos na pesquisa. Então eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui Tudo bem? E então eu começaria anotando o e-mail desse usuário. Seu endereço de e-mail é Nua 147967@gmail.com. Seu nome completo é Noah Benjamin. Assim como obtivemos na pesquisa. Então, eu diria Noah Benjamin. Seu país e cidade de residência são Nigeria Engate. Então, pessoal, vamos clicar nesse Hanslepperty Então, eu diria Nigeria Engstate. Agora, quantos anos tem Noah Benjamin? Noah Benjamin tem 45 anos. Então, eu diria 45. Agora, qual é a profissão dele? Noah Benjamin é palestrante. Então, eu viria aqui e diria palestrante. Você já investiu em ações a partir de um aplicativo móvel? Noah Benjamin diz que sim. Então, pessoal, vamos editar tudo isso. Então, pessoal, Noah Benjamin é professor, residente nos La Benjamin também é uma investidora em ações que investe em ações com investimentos em ações existentes na parte sudeste da Nigéria E tudo bem. Então, pessoal, em essência, isso é um resumo de sua personalidade. Agora, vamos destacar seus desafios com o aplicativo de investimento existente que ele usa no Sudeste. Além disso, gostaria de destacar as metas que ele pretende alcançar com um aplicativo de investimento. Gente, eu viria aqui e depois teria isso duplicado, então eu faria com que ficasse aqui Eu também viria aqui e teria isso duplicado. Então eu vou fazer com que fique aqui. Além disso, eu viria aqui e teria isso duplicado e depois faria com que ficasse aqui E também, vou duplicar isso e depois vou fazer com que fique aqui E tudo bem. Então, pessoal, quais são os objetivos dele? Seu primeiro objetivo é economizar tempo ao usar um aplicativo móvel para investir em ações. Seu segundo objetivo é acessar o histórico de transações com facilidade. Seu terceiro objetivo é adicionar dinheiro à carteira com mais de uma opção, e seu quarto objetivo é investir primeiro. E isso é lindo. Então, pessoal, quais são alguns dos desafios dele? Alguns de seus desafios incluem ter gráficos complicados e irrelevantes, ter muitas informações para entender interface de usuário amigável e também muita dificuldade em adicionar telefones à carteira ou E, finalmente, investir é demorado. Então, eu viria aqui e diria que investir é demorado. E tudo bem. Então, pessoal, vamos recuar um pouco para que possamos ver o que temos aqui. E isso são lindos, caras. Então, pessoal, o que temos aqui é isso. Realizamos uma pesquisa e enviamos essa pesquisa aos usuários. E as pessoas para quem os enviamos enviaram suas respostas. E então criamos uma persona de usuário de cada usuário que enviou suas respostas Foi assim que obtivemos todas essas informações aqui. Então, pessoal, entendam que esse é o estágio de empatia e terminamos com o estágio de empatia, que é o estágio em que você conhece os usuários e depois entende melhor suas frustrações entende Assim como dissemos anteriormente, porque somente quando você entende melhor um problema é que você pode encontrar uma solução melhor para esse problema. Então, pessoal, vamos simplesmente passar para a próxima etapa do nosso fluxo de trabalho. Que é o estágio em que temos que criar uma declaração do problema. Eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui Então eu diria que crie uma declaração de problema. E tudo bem. 6. Criando uma declaração de problema (novo): Oi, pessoal. Bem-vindo de volta e parabéns. Agora concluímos com sucesso o estágio de empatia Enviamos com sucesso pesquisas digitais aos usuários, e os usuários, por sua vez, enviaram suas respostas. E por meio de suas respostas, pudemos criar personas de usuário E tudo bem. Agora, a próxima linha é criar uma declaração do problema, que consiste em estabelecer os problemas dos usuários com tudo o que coletamos, ou devo dizer que reunimos do estágio de empatia, que é o estágio anterior Tudo bem? Agora, B por tudo o que reunimos no estágio Empati, posso simplesmente dizer que minha declaração de problema afirma que os usuários do aplicativo de investimento existente enfrentam dificuldades ao investir em ações devido ao excesso de informações no aplicativo e às etapas complexas que são tomadas antes que alguém possa investir com sucesso em uma Essas dificuldades e desafios geralmente afetam negativamente a experiência do usuário. Gente, vamos criar uma declaração do problema. Eu viria aqui e, em seguida, clicaria neste texto também para que ele ficasse aqui. Posso simplesmente dizer que minha declaração de problema afirma que os usuários do aplicativo de investimento existente enfrentam dificuldades ao investir em ações devido ao excesso de informações no aplicativo e às etapas complexas que são tomadas antes que alguém possa investir com sucesso em uma E essas dificuldades ou desafios geralmente afetam negativamente a experiência dos usuários. E isso é lindo, pessoal. Agora, eu destacaria tudo isso e o tornaria ousado, tudo bem. Então, pessoal, essa é a minha declaração de problema, e esse é o problema que vou tentar resolver aqui neste curso. Então, pessoal, quando você observa criticamente rolando para cima até o detalhamento dos estágios do nosso fluxo de trabalho, você percebe que concluímos com sucesso o estágio vazio E também criamos uma declaração do problema, que acabamos de fazer agora. Você pode ver isso aqui, ok? Agora, a próxima etapa do nosso fluxo de trabalho é a fase da ideia. é o estágio em que teríamos que ter uma ideia que pudesse resolver o problema listado na declaração do problema. São lindos, caras. Então, pessoal, quais são as ações que devem ser realizadas aqui no estágio Ida? Então, no estágio Ida, a primeira coisa que vamos fazer é organizar uma sessão de brainstorming Sair é literalmente um momento que convidaremos outros designers, gerentes de produto, gerentes de negócios , engenheiros de software, advogados e assim por diante. Agora, quando finalmente terminarmos de convidar todas essas pessoas, apresentaremos a elas informações suficientes sobre os problemas na declaração do problema e também pediremos que apresentem ideias que possam resolver os problemas na declaração do problema Agora, quando todas essas pessoas tiverem uma ideia a próxima coisa a fazer é ler todas essas ideias para todos e depois votar na melhor ideia. E isso são lindos, caras. Agora, a ideia com a maior votação deve ser selecionada e, quando isso for feito, significa que você está pronto para passar para a próxima etapa do nosso fluxo de trabalho, que é a fase em que você terá que projetar essa ideia em um protótipo testável Agora, depois de terem votado na melhor ideia, a próxima linha é selecionar a ideia com a maior votação. Agora, a ideia com os votos mais altos deve ser selecionada e, quando isso for feito, significa que estamos prontos para passar para a próxima etapa do nosso fluxo de trabalho, que é a fase em que teríamos que projetar essa ideia em um protótipo testável Então, pessoal, antes de passarmos para esse estágio aqui, vamos descer aqui e duplicar isso e fazer com que fique aqui E então eu diria que o palco do IDed. Vamos tirar tudo isso e depois dizer iDed Sage. Agora, como essa será uma fase de sessão de brainstorming, é importante entender que obviamente não posso ter uma sessão de brainstorming aqui Porque será algo que você configurará com as pessoas com quem deseja configurá-lo, seja no Skype, Zoom, Discord ou até mesmo na vida real De qualquer forma, você quer configurá-lo. Tudo bem. Gente, vamos vir aqui e depois duplicar isso e fazer com que fique logo abaixo Assim mesmo. Está bem? E então vamos vir aqui e depois mudar o tamanho da fonte para médio. E tudo bem. Então, pessoal, vamos vir aqui e duplicar isso e fazer com que fique aqui, desse jeito E então eu usaria minha propriedade de ferramenta manual para mover nossa tela. E tudo bem. Agora, presumi que tive uma sessão de brainstorming offline ou devo dizer que conduzi uma sessão devo dizer que conduzi de brainstorming offline apenas para que pudéssemos Eu também diria que durante aquela sessão de brainstorming, chegamos a uma Gente, digamos que uma ideia selecionada. Agora, eu vinha aqui e depois mudava a cor desse texto. Para isso. Isso é bom. Então eu diria que foi uma ideia selecionada. Agora, quais são as ideias selecionadas às chegamos durante nossa sessão de brainstorming Agora, vou duplicar isso novamente e depois fazer com que fique aqui Então eu virei aqui e depois mudarei o tamanho da fonte para médio. Agora, essa é a ideia selecionada para esta lição. Diz, crie um investimento onde os gráficos são representados com texto Onde os usuários terão a opção de adicionar dinheiro às suas contas ou carteiras por meio de transferência bancária ou cartão de débito Crie um aplicativo de investimento em que histórico de transações recentes seja facilmente acessível. Cria um aplicativo de investimento onde o inglês puro e simples será usado. São lindos, caras. Agora, eu faria uma lista. Agora, ao examinar atentamente esse estágio da ideia, você verá que essa ideia resolve os problemas que temos na declaração do problema Tudo bem E essa declaração do problema foi extraída de tudo o que aprendemos durante o estágio de empatia E pudemos aprender tudo o que aprendemos durante esse estágio porque criamos um formulário de pesquisa e o enviamos aos usuários. Então, pessoal, vocês podem ver como cada etapa se conecta. E isso é lamentável, pessoal. R Então, pessoal, agora que temos uma ideia que podemos usar para resolver os problemas na declaração do problema. A próxima etapa do nosso fluxo de trabalho seria a fase de design do protótipo Agora, quais são as ações que precisam ser tomadas nesse estágio? As ações que seriam tomadas nesta fase são todas essas. Você pode ver onde meu mouse Coso está ligado. Tudo bem? Essas são as ações que serão tomadas na fase de design do protótipo Em primeiro lugar, precisaremos criar uma arquitetura de informações para a melhor ideia que foi selecionada durante a fase de escritura Então, pessoal, vamos rolar para baixo aqui. E então duplique isso e faça com que fique logo abaixo E então eu usaria minha propriedade de ferramenta manual para deslocar minha tela. E então eu diria arquitetura da informação. E tudo bem. Agora, antes de criarmos uma arquitetura de informações, vamos entender o que é uma arquitetura informações e por que é importante criá-la. Então, pessoal, a arquitetura de informações de um aplicativo móvel é simplesmente a maneira como você organiza e organiza as informações no aplicativo móvel que ajudará o usuário desse aplicativo móvel a realizar com êxito sua tarefa nesse aplicativo móvel sem uma experiência ruim. A arquitetura da informação é como um modelo, uma representação visual da infraestrutura, dos recursos e da hierarquia do produto O nível de detalhes depende do designer. Portanto, a arquitetura da informação também pode incluir navegação, aplicação, função e comportamentos, conteúdo e fluxos. Não há limite definido para o tamanho ou a forma da arquitetura da informação. No entanto, ele deve abranger a estrutura generalizada do produto para que qualquer pessoa teoricamente possa que qualquer pessoa teoricamente lê-lo e entender como Portanto, é na arquitetura da informação que você decidirá quais recursos e quais informações existirão em cada página do aplicativo e em cada etapa do aplicativo. Então pessoal, vamos em frente e vamos criar uma arquitetura de informação para essa ideia. Então, pessoal, a maneira de começar a criar sua arquitetura de informações é, antes de tudo, definir as metas dos usuários que usarão o aplicativo e, em seguida, definir a tarefa que os usuários devem a tarefa que os usuários devem concluir para atingir suas metas no aplicativo. Eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui E então eu mudaria a cor disso para isso, e então eu diria metas. Agora, qual é o objetivo do usuário? Simplificando, o objetivo do usuário é investir em uma boa experiência. Eu duplicaria isso e depois faria com que ficasse aqui e depois mudaria o tamanho da fonte para médio E então eu diria, invista em uma boa experiência. Vamos mudar a cor disso para isso. Agora, quais ações os usuários tomarão para atingir esses objetivos? Em primeiro lugar, o usuário precisará se inscrever ou fazer login e, em seguida, também precisará depositar fundos na conta ou na carteira. Depois que o usuário depositar fundos na conta ou na carteira, o usuário investirá em ações. Gente, eu viria aqui e depois duplicava isso e fazia com que ficasse aqui E então eu diria tarefa do usuário. E tudo bem. Agora, vamos demonstrar nossa tarefa de usuário usando esses navios. Então, eu viria aqui e selecionaria este navio e o deixaria aqui. E então eu me ajustava e fazia com que ficasse aqui. E então eu diria que se inscreva ou faça login. Agora, depois disso, eu também viria aqui e depois duplicava isso e depois fazia com que ficasse aqui E então eu tirava tudo isso. E então eu diria contas de fundos ou carteiras. E tudo bem. Agora, depois disso, eu também duplicaria isso e faria com que ficasse aqui E então eu tirava tudo isso e diria que investiria. E isso são lindos, caras. Agora, eu usaria nossa ferramenta de conectores para conectar tudo isso. E tudo bem. Então, pessoal, assim como eu disse anteriormente, a tarefa do usuário aqui são as ações que os usuários devem realizar para atingir esse objetivo, que é investir em uma boa experiência. Sim. Agora, quais são as tarefas, ou devo dizer, quais são as ações? Essas são as ações. O usuário teria que se inscrever no aplicativo como um novo usuário ou fazer login como um usuário existente. E depois disso, o usuário também teria que adicionar dinheiro ou, devo dizer, financiar a conta ou carteiras e depois usar o dinheiro da conta ou carteira para investir em qualquer patrimônio de sua escolha E é por isso que conectei tudo isso para mostrar que é um processo. Então, se eles conseguirem realizar essa tarefa, treinadores, para se inscrever ou fazer login, essa tarefa é treinada para financiar suas contas ou carteiras e, em seguida, essa tarefa é para investir, isso significa que eles alcançaram seu objetivo, treinadores para investir com uma boa Então, depois de definir as metas do usuário e declarar a tarefa que o usuário concluir para atingir suas metas, vamos criar nossa arquitetura de informações para o fluxo desse aplicativo Então, vamos fazer isso. Mas antes de prosseguirmos com isso, eu viria aqui e faria fosse médio, para que pudéssemos ver com mais clareza E tudo bem. 7. Criando uma arquitetura da informação (novo): Oi, pessoal. Bem-vindo de volta e parabéns. Pessoal, vamos começar com o ponto inicial do fluxo, que é onde o usuário inicia o aplicativo. Eu viria aqui e depois selecionava o navio quadrado e depois fazia com que ficasse aqui. Eu usaria minha propriedade de ferramenta manual para movê-la , depois derrubaria esse navio quadrado e depois o ajustaria. Então eu mudaria a cor dessa forma para essa. Eu viria aqui e depois diria tela de inicialização. Isso é bom. Agora, eu também viria aqui e depois usaria nossa propriedade de caça para mudar nossa tela. Então eu ainda vou deixar isso vir aqui. E tudo bem. Então, pessoal, o que acontece depois que o usuário inicia, ou devo dizer, depois que o usuário inicia o aplicativo? Agora, depois que o usuário iniciar o aplicativo, ele terá duas opções, que são fazer login como usuário existente ou se inscrever como novo usuário. Então, vamos fazer a inscrição e o fluxo de login aqui. Então eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui Então eu tiraria tudo isso, e então eu diria que se inscreveria. Isso é bom. Depois disso, eu duplicaria isso e também faria com que ficasse aqui Então eu tirava tudo isso e depois dizia login. Isso é bom. Vamos ajustar isso para caber e tudo bem. Então eu virei aqui e selecionarei a ferramenta de conexão para conectar esses três itens aqui. Vou vir aqui e colocar essa ferramenta de conector aqui. Você pode ver que os pontos já estão destacados. Então, eu clicaria nesse ponto e arrastaria até esse ponto. E eu farei a mesma coisa com esse login. E então eu clicaria nesse ponto e depois arrastaria até esse ponto. E isso são lindos, caras. Então, pessoal, assim como apontamos anteriormente, quando o usuário inicia o aplicativo, ele ou ela vê duas opções para continuar Uma é se inscrever e a outra é fazer login. Então, pessoal, vamos continuar com o fluxo de inscrição. Agora, vamos pensar logicamente se o usuário estiver tentando se inscrever, quais seriam os dados necessários para o usuário pudesse prosseguir para a próxima etapa Essa é uma pergunta que você deve se perguntar como designer. Tudo bem. Agora, como esse é um novo usuário, seria importante solicitar seu endereço de e-mail, número de telefone e senha antes que ele possa prosseguir com o processo de registro. Isso é bom. Então, o que eu simplesmente faria é vir aqui e depois duplicar isso E então faça com que fique aqui. Está bem? Em seguida, retire tudo isso e diga digitar o endereço de e-mail. E tudo bem. Agora, eu também viria aqui e depois duplicaria isso e faria com que ficasse aqui E então eu tirava tudo isso e dizia digitar o número do telefone. São lindos, caras. Agora, eu também continuaria duplicando isso e fazendo com que ficasse aqui Vamos levar isso um pouco mais longe e depois ter essa estadia aqui e também ter essa estadia aqui. Isso é bom. Agora, vamos diminuir um pouco o zoom para que possamos ver claramente o que estamos fazendo aqui. Agora, eu também vinha aqui e depois tirava tudo isso e dizia digitar a senha. E tudo bem. Então pessoal, vamos também vir aqui para mudar a cor dos objetos. Para isso. Agora, após essas etapas, é importante que o número de telefone seja verificado. Eu viria aqui e depois duplicava isso e depois fazia com que ficasse aqui Então eu retirava tudo isso e dizia verificação do número do celular. E isso é lindo, pessoal. Então, pessoal, eu viria aqui e selecionava a ferramenta de conexão para poder conectar todos esses objetos da maneira que deveriam estar conectados. Então, eu clicava e segurava, e depois arrastava até esse ponto. E então eu também viria aqui para clicar e arrastar até esse ponto, tudo bem. Eu também viria aqui para clicar e arrastar até este ponto, tudo bem. Novamente, eu também viria aqui e depois conectaria todos esses objetos a essa verificação de número de celular. Eu também clicaria nisso e me conectaria a isso. Além disso, eu também clicaria aqui para me conectar a isso. E isso são lindos, caras. Então, pessoal, vamos clicar na propriedade da ferramenta manual para mover nosso Canvas. E isso é lindo, pessoal. Agora, vamos também destacar tudo isso e reduzi-lo para que possamos ter um espaço aqui. E então vamos também usar nossa propriedade de ferramenta manual para deslocar nossa tela para que possamos ver o que está acontecendo aqui. Então, pessoal, depois que o usuário for verificado com sucesso, o novo usuário será direcionado para a página inicial do aplicativo. E quando o novo usuário acessar a página inicial do aplicativo, o novo usuário terá a chance de interagir com opções como ícones de menu, saldo da conta, contas de fundos, transações recentes, banners de referência, páginas de investimento e transações, tudo na Então eu vou vir aqui e depois duplicar isso e fazer com que fique aqui E isso são lindos, caras. Vou vir aqui e depois tirar tudo isso e dizer página inicial, tudo bem Eu também mudaria a cor desse objeto para isso. E isso são lindos, caras. Agora, vou usar minha propriedade de ferramenta manual para deslocar nossa tela aqui, tudo bem. Agora, eu usaria minha ferramenta de conector para conectar a página de verificação do número do celular à página inicial. Então, eu clicaria nesse ponto e arrastaria até esse ponto. E tudo bem. Gente, o que temos aqui é isso. Um usuário inicia esse aplicativo, se inscreve nele, insere seu endereço de e-mail, número de telefone e senha e, em seguida, esse usuário é verificado. E quando esse usuário é verificado, é direcionado para a página inicial do aplicativo Agora, depois que o usuário acessar a página inicial do aplicativo, quais são as ações que o usuário executaria? Vou vir aqui e depois duplicar isso e fazer com que fique aqui E então eu usaria minha propriedade de ferramenta manual para mover nossa tela para que pudéssemos ver o que está acontecendo aqui. Vamos ajustar isso e fazer com que fique aqui. Gente, eu vinha aqui e depois tirava tudo isso e depois dizia ícone do menu. E então mude a cor desse objeto para isso para que possamos diferenciá-lo disso Está bem? E tudo bem. Agora, esse ícone de menu, ou devo dizer, esse botão de menu assume a forma de um ícone que geralmente consiste em três linhas horizontais paralelas que sugerem uma lista Geralmente, ele está localizado no canto direito de um aplicativo. E ao pressioná-lo, você obterá uma lista de opções específicas para os aplicativos. São lindos, caras. Agora, eu também viria aqui e duplicaria isso e depois faria com que ficasse aqui Então eu tirava tudo isso e depois dizia saldo da conta. Porque é importante que usuário avalie o saldo de sua conta Está bem? Lembre-se de que estamos projetando nosso fluxo de arquitetura de informações. Novamente, eu duplicaria isso e faria com que ficasse logo abaixo E então eu tirava todo esse texto e dizia conta de fundos. E tudo bem. Além disso, é importante ter esse botão aqui para que os usuários possam financiar suas contas ou carteiras Eu também duplicaria isso e depois faria com que ficasse aqui E então eu retirava tudo isso, e então eu diria transação recente. E isso são lindos, caras. Agora, é importante ter esse botão aqui, porque todo usuário que investe ou faz uso desse aplicativo gostaria de saber sobre seu histórico de transações E é por isso que é importante que tenhamos esse botão aqui. Então, pessoal, eu também continuaria duplicando isso e depois faria com que ficasse aqui E então eu tiraria tudo isso. E então eu diria banner de referência. E tudo bem. Fique na página inicial porque é importante que um usuário possa indicar outros usuários Agora, depois disso, eu vinha aqui e depois usava minha propriedade portátil para mover minha tela, depois eu vinha aqui para duplicá-la, e então eu a deixava logo abaixo dela, então eu tirava tudo isso e então eu diria depois usava minha propriedade portátil para mover minha tela, depois eu vinha aqui para duplicá-la, e então eu a deixava logo abaixo dela, então eu tirava tudo isso e então eu diria investir. E tudo bem. Esse botão é importante porque quando um usuário acessa a página inicial deste aplicativo, ele deve investir livremente clicando nesse botão para investir Agora, isso também é importante porque o usuário terá que investir depois de ter entrado ou se cadastrado para entrar neste aplicativo. Agora, essa rota de investimento, ou devo dizer, esse botão de investimento é muito importante porque essa é a essência de acessar este aplicativo em primeiro lugar para investir. O usuário deve simplesmente vir aqui e clicar neste botão Investir e prosseguir com o investimento. Então, eu também viria aqui e depois duplicava isso e depois fazia com que ficasse aqui Isso é bom. Eu tiraria todo esse texto e diria transacionar Isso é lindo, pessoal. Pessoal, é importante conectar tudo isso da página inicial usando nossa ferramenta de conectores Eu vinha aqui e clicava nessa seta, arrastava e conectava a ela. E então eu também vinha aqui, clicava nessa seta, arrastava para baixo e depois me conectava a ela. E eu faria o mesmo todas essas formas aqui. E isso é lindo, pessoal. Então, pessoal, conectamos com sucesso todos esses botões à página inicial. Tudo bem? Agora, quais opções ou devo dizer quais páginas você acha que deveriam ser incluídas aqui no ícone do menu? Agora, o botão do menu deve conter ações ou páginas críticas ou, devo dizer , estratégicas os usuários possam navegar facilmente. Páginas como a página de transações recentes devem ser encontradas para que os usuários possam explorar facilmente suas transações recentes e ver o que foi realizado. Vou duplicar isso e gostaria que ficasse aqui. E então eu vou retirar tudo isso, e eu vou dizer transação recente. E isso são lindos, caras. Então, pessoal, vamos usar nossa propriedade de ferramenta manual para mudar nossa tela para que possamos ver o que está acontecendo aqui. Então, vou mudar isso para este lado, e tudo bem. Estamos tentando criar um espaço para o ícone do nosso menu e as propriedades que ele contém. E tudo bem. Agora, no menu bothen, também é importante que tenhamos uma página de gerenciamento de cartões para que os usuários possam gerenciar facilmente seus cartões Eu clicaria nisso e depois duplicaria isso e faria com que ficasse aqui Então eu vou tirar tudo isso, e então eu diria gerenciamento de cartões. E isso são lindos, caras. Agora, ainda no botão do menu. Portanto, quando o usuário clica no ícone do menu, ele deve ser capaz de avaliar sua carteira de investimentos, que é uma página muito importante para acessar quando quiser , tudo bem Eu duplicaria isso e faria com que ficasse aqui. E então eu tiraria tudo isso. E então eu diria carteira de investimentos. E isso são lindos, caras. Agora, fique no botão do menu. Quando o usuário clica nesse ícone do menu, ele deve poder solicitar seu extrato, que deve ser sua visão geral detalhada de toda a transação, ou devo dizer, seu investimento no aplicativo Então, eu duplicaria isso e faria com que ficasse aqui. E então eu tirava tudo isso, e eu diria que solicitava a declaração. E isso são lindos, caras. Agora, fique no botão do menu pois é importante que, quando o usuário clicar no ícone do menu, ele consiga realizar algumas configurações Eu viria aqui e depois selecionaria tudo isso, e então mudaria isso um pouco. Eu viria aqui e depois duplicaria isso e depois faria com que ficasse aqui Agora, vamos ajustar isso para caber. E isso é perfeito. Então eu vinha aqui e depois tirava tudo isso, e então eu dizia configurações. Então, pessoal, vamos usar nossa ferramenta de conectores para conectar o ícone do menu a essas páginas. Eu clicava nesse ponto e depois arrastava e deixava que ficasse aqui. Eu também viria aqui, clicaria neste ponto e depois faria com que ficasse aqui. Eu farei o mesmo com todo esse objeto. Assim mesmo. E isso é perfeito, pessoal. Agora, temos nossos ícones de menu conectados a todas essas páginas para que quando um usuário clicar nesse ícone de menu, o usuário possa interagir com sua transação recente, gerenciar seu cartão, verificar sua carteira de investimentos, solicitar seu extrato de contas e também realizar algumas configurações Então pessoal, vindo aqui na página de saldo da conta, quando o usuário clica nesta página, o usuário deve ser capaz de avaliar disponível, portanto, o saldo da conta Eu vinha aqui e duplicava isso e depois fazia com que ficasse aqui , tirava tudo isso e dizia saldo disponível E então eu mudaria a cor desse objeto para isso. E tudo bem. E então eu usaria essa ferramenta de conector para me conectar a isso. que significa que quando um usuário clica no saldo dessa conta, ele ou ela deve ser capaz de ver o saldo disponível Isso é perfeito, pessoal. Agora, chegando aqui na rota da conta de fundos, é importante que, uma vez que o usuário clique nesta página, ele possa escolher um método pelo qual possa financiar a conta ou a carteira Isso ou devo dizer adicionar dinheiro à conta deles? Então, automaticamente, isso significa que devemos ter duas páginas aqui. A primeira página é escolher o método para financiar a conta ou carteira, e a segunda página é para financiar a conta. Então, eu clicaria nisso e duplicaria isso e , em seguida, faria com que ficasse aqui E então eu tirava tudo isso, e então eu diria escolha o método. E tudo bem. Então, eu também continuaria duplicando isso e fazendo com que ficasse aqui E então eu tirava tudo isso, e então eu diria conta inicial. E tudo bem. Então eu vinha aqui e depois mudava a cor para isso e também vinha aqui e mudava essa cor para essa só para diferenciar essas ações OK. E então eu usaria nossa ferramenta de conector para conectar isso deste ponto a este ponto e também conectar isso deste ponto a este ponto. E isso são lindos, caras. Agora, isso é importante para a experiência do usuário porque, a partir de nossa pesquisa com usuários, ficou claro para nós que os usuários realmente querem uma experiência em que possam financiar suas contas com mais de uma opção. E tudo bem. Agora, a próxima na fila é a transação recente. Então, vou usar minha propriedade handhold para mover nossa tela para que possamos ver o que está acontecendo aqui Então, digamos que o usuário interaja com essa rota. Está bem? O que eles devem ter ao interagir com essa rota. Agora, como esta é uma página de transação recente ou, devo dizer, uma transação recente, eles devem ser capazes de avaliar os detalhes da transação recente Eu viria aqui e duplicaria isso, e então eu faria com que ficasse aqui E então eu retirava tudo isso e depois dizia detalhes da transação. E isso é lindo, pessoal. Agora, vamos mudar a cor desse objeto para isso. E então vamos também conectar nossos objetos usando essa ferramenta de conexão. E então vamos usar nossa ferramenta de conectores e, em seguida, conectá-la deste ponto a este ponto. Agora, vamos ajustar isso e, em seguida , vamos conectar isso também deste ponto a este ponto. São lindos, caras. Agora, a próxima linha é a opção de banner de referência. Gente, o que vem à mente quando você ouve a palavra referência? Agora, por indicação, significa que você pode indicar o aplicativo a outros amigos ou usuários enviando um link de indicação ou um código promocional que, quando clicarem, serão direcionados diretamente para o aplicativo. Isso significa que os usuários devem poder acessar o código promocional de referência sempre que clicarem ou, devo dizer sempre que acessarem esse banner de indicação. Então eu viria aqui e depois duplicava isso e depois fazia com que ficasse aqui E então eu tiraria tudo isso. E então eu diria código de referência. E tudo bem. Agora, vamos ajustar isso e depois vou mudar a cor desse texto para isso. E então eu viria aqui para usar essa ferramenta de conector e me conectar com ela. E tudo bem. Agora, temos a opção de investir, pessoal. Tudo bem? Então, vamos usar nossas poucas propriedades para mudar nossa tela Agora, quando um usuário clica nessa propriedade de investimento, isso significa que o usuário deve ter acesso à lista de ações nas quais gostaria de investir e também ver seus ativos patrimoniais, ou devo dizer, a carteira de ações que investiu Eu duplicaria isso e depois faria com que ficasse aqui E então eu retirava tudo isso, e então eu diria lista de patrimônio líquido. E tudo bem. E eu também duplicaria isso e faria com que ficasse aqui E então eu tirava tudo isso, e então eu diria carteira de ações. E tudo bem. Então eu viria aqui e mudaria a cor desse objeto para isso. E então eu também faria o mesmo com isso. Isso é bom. Eu usaria nossa ferramenta de conector e depois clicaria e arrastaria e depois soltaria, então eu também viria aqui, clicaria e arrastaria até este ponto. E isso são lindos, caras. E então eu também duplicaria isso e faria com que ficasse aqui. Tudo bem. E eu retirava tudo isso, e então eu diria ativos patrimoniais. Que é uma coleção de investimentos que um usuário fez até agora neste aplicativo. Agora, depois de avaliar a lista de investimentos em ações que você pode fazer, é importante que, como usuário, você também possa visualizar os detalhes do patrimônio líquido. Portanto, você tem uma lista de ações. Isso significa que cada patrimônio deve ter um detalhe. Eu duplicaria isso e faria com que ficasse aqui. E isso é perfeito, pessoal. E então eu retirava tudo isso, e eu diria detalhes de equidade. E tudo bem. Vamos ajustar isso e fazer com que fique aqui. Então, pessoal, uma vez que o usuário possa ver os detalhes do patrimônio, ele ou ela investirá. Eu duplicaria isso e faria com que ficasse aqui. E então eu diria que invista. E tudo bem. Então, vamos conectar essa rota do Invest com todos esses objetos aqui. Então, eu clicaria nessa rota de investimento, pressionaria e seguraria e arrastaria até esse ponto. Eu também faria o mesmo arrasto até agora, tudo bem. Agora, eu também viria aqui, já que esta é a lista de ações e quando você clica na lista de ações, você deve ser capaz de ver os detalhes desse patrimônio em que você clicou E depois de ver os detalhes desse patrimônio, agora você pode investir. E isso é perfeito, pessoal. Agora, vamos usar nossa propriedade de ferramenta manual para deslocar nossa tela para que possamos ver o que está acontecendo aqui. Agora, a próxima linha é o canal de transação. E por transação, um usuário deve depositar ou sacar. Depositar significa simplesmente financiar a conta E depois que a conta for financiada, os saques podem ser feitos Eu simplesmente viria aqui e duplicaria isso e depois faria com que ficasse aqui Tudo bem. E então eu retirava tudo isso e depois dizia depósitos. Isso é bom. Eu também duplicaria isso e faria com que ficasse aqui E então eu tirava tudo isso e depois dizia: retire. E tudo bem. Então, eu mudaria a cor disso para isso e também mudaria a cor disso para isso. E então eu usaria essa ferramenta de conector dessa rota de transação até esse ponto E então eu também faria o mesmo conectando nossa página de saques. E isso é perfeito, pessoal. Então pessoal, se vocês se lembram, estamos na fase de inscrição ou devo dizer a rota de inscrição? Agora, vamos para a rota de login. Agora, vamos usar nossa propriedade de ferramenta manual para mover nossa tela, ok? E tudo bem. Agora, a página de login, ou devo dizer, a rota de login ainda é a mesma. Tudo o que um novo usuário precisará fazer é inserir um endereço de e-mail e senha, como um novo usuário registrado fará. E depois, ele ou ela será canalizado para a página inicial do aplicativo Eu vinha aqui e depois duplicava isso e depois fazia com que ficasse aqui OK. E então eu também viria aqui, duplicava isso e fazia com que ficasse aqui E então eu tirava tudo isso, e então eu dizia, insira o endereço de e-mail. E tudo bem. Além disso, eu também vinha aqui e depois retirava tudo isso, e depois dizia Digite a senha. E então eu vinha rapidamente aqui e, em seguida, clicava nessa ferramenta de conector e a conectava a esta. E eu também clicaria nessa ferramenta Connector e me conectaria a este ponto. E depois disso, também é importante que eu conecte esses dois botões a esta página inicial Eu clicaria neste botão ou nesta página e depois o arrastaria até esta página inicial Eu também faria o mesmo com essa senha de digitação e a arrastaria até esta página. E isso é perfeito, pessoal. Agora, vamos diminuir o zoom para ver tudo o que fizemos aqui. Usarei minha propriedade de ferramenta manual para mudar nossa tela para que possamos ver a bela arquitetura de informações que projetamos juntos. Isso é perfeito, pessoal. Então, pessoal, esse é apenas o fluxo básico da arquitetura de informações para este aplicativo. Está bem? E sim, é claro, é muito importante criar essa arquitetura de informações para que você entenda, organize e organize todas as etapas que o usuário executará neste aplicativo. Além disso, também é importante ter esse fluxo de arquitetura de informações para que você também possa refinar ou simplificar os principais recursos que cada página do seu aplicativo terá Está bem? E isso são lindos, caras. Então, pessoal, vocês também podem criar uma arquitetura de informação melhor. Está bem? Por causa desta lição, isso é tudo o que podemos inventar. Do seu lado, você pode decidir criar algo melhor. Eu confio em você para isso. Eu amo isso. Isso é maravilhoso, pessoal. Parabéns. Nos vemos na próxima aula. Permaneça abençoado. 8. Como introduzir um protótipo de baixa fidelidade: Ei, pessoal, bem-vindos de volta e parabéns. Agora, criamos com sucesso o fluxo da arquitetura de informações para esse projeto. E se você tiver alguma dúvida sobre esse fluxo de arquitetura de informações, faça bem em chamar minha atenção e terei prazer em responder. Agora, se voltarmos à nossa análise de fluxo, no estágio de protótipo de design, você perceberá que criamos com sucesso o fluxo da arquitetura de informações para este projeto Portanto, a próxima ação nesse estágio é criar um protótipo de baixa fidelidade da melhor ideia usando o fluxo de arquitetura da informação que acabamos Tudo bem. Mas, pessoal, antes de prosseguirmos com a criação do protótipo w Fidelity da melhor ideia, eu adoraria explicar o que é um protótipo de fidelidade Portanto, um protótipo de baixa fidelidade é um diagrama simples de um conceito de design em estágio inicial As equipes de design de UX os utilizam para testar rapidamente uma ideia, identificar lacunas e armadilhas e também descartar designs de produtos que não ressoam É uma etapa importante no processo de design thinking. prototipagem de baixa fidelidade impulsiona criação de ideias e a inovação para layout, conteúdo, organização e fluxo de usuários básicos de páginas conteúdo, organização Em outras palavras, um protótipo de baixa fidelidade é uma versão fictícia do design final de um aplicativo Agora, a pergunta mais importante a se fazer é essa? Por que precisamos criar uma versão fictícia? Agora, é isso, pessoal. Projetar uma versão fictícia, ou devo dizer, prototipagem de baixa fidelidade é importante e pode ter um grande impacto na experiência geral do usuário Nesse estágio de tentar descobrir tudo, seu design e seu processo de design podem estar sujeitos a muitas mudanças e contribuições das partes interessadas ou, devo dizer, dos proprietários da empresa Além disso, a prototipagem de baixa faz parte do processo de design e desenvolvimento do produto Envolve criatividade, versões iniciais de um produto ou design usando métodos baratos e rápidos. Esses protótipos geralmente são rudimentares e básicos e são usados para testar e avaliar ideias antes de finalmente se comprometer com projetos mais detalhados e polidos novos protótipos de instalações geralmente são criados usando materiais simples, esboços ou estruturas de arame e não incluem todos os recursos e funcionalidades do funcionalidades Gente, é disso que trata um protótipo de baixa fidelidade. E é por isso que é importante criarmos, ou devo dizer, termos um protótipo de baixa fidelidade e, em seguida, levar esse protótipo e, em seguida, levar de baixa fidelidade às partes interessadas para correção e mudanças e assim por diante Agora, quando o protótipo de baixa fidelidade aceito e acordado, você poderá projetar o aplicativo real em si, que é o protótipo de alta fidelidade E isso é lindo, pessoal. Então, pessoal, vamos em frente e depois vamos ver como criar um protótipo de baixa fidelidade da nossa E vamos fazer isso usando um arquivo de design Figma. 9. Tarefa de inscrição ou login: Então, estamos aqui em nossa tarefa de usuário. E se você vier aqui, perceberá que nossa tarefa de usuário para este aplicativo é primeiro se inscrever ou fazer login e depois depositar fundos em sua conta ou carteira. E depois, você investiria em ações. E isso são lindos, caras. E isso significa que se um usuário realizar toda essa tarefa, ou seja, se inscrever ou fazer login, financiar contas ou carteiras e, finalmente, investir, significa que o usuário deve ter alcançado seu objetivo neste aplicativo, que é investir, então, pessoal, vamos projetar nossa tela de baixa fidelidade Então, vamos retornar rapidamente ao nosso arquivo de design Figma e ver o que é criar uma tela de baixa fidelidade. Agora, tudo o que você precisa fazer é selecionar a propriedade da ferramenta de moldura. Ao descer aqui, você pode ver onde meu mouse está ligado e depois clicar nele. E ao fazer isso, você pode vir aqui para selecionar o modelo de telefone de sua escolha, seja iPhone 14 e 15 Promax iPhone 14 e 15 P, iPhone 13 e 14, seja iPhone 14 plus, iPhone 13 Mini, iPhone SE, iPhone oito plus, iPhone oito, Android pequeno ou até Android grande Então, para este projeto, eu usaria o Android Large porque estou apaixonado por um telefone Android. Está bem? Então, vamos clicar nele. E agora temos uma ferramenta de molduras para Android aqui. Está bem? Agora, eu ampliaria um pouco para que pudéssemos ver o que está acontecendo aqui. E tudo bem. E então eu clicaria na letra H no meu teclado para selecionar minha propriedade de ferramenta manual para que eu pudesse mover nossa ferramenta de moldura. Você pode ver como ele está sendo movido. E tudo bem. Agora, a próxima linha é vir aqui e clicar nessa propriedade de texto e fazer com que ela fique aqui. E então eu diria BX, P, que significa produções de Bag Zinet Então, vamos vir aqui e depois aumentar o tamanho da fonte. Para isso. E tudo bem. Então pessoal, já que essa será a tela de inicialização deste aplicativo, é importante que esse logotipo fique aqui. E então vamos vir aqui para alinhá-lo ao centro. Vamos subir. Então, vamos vir aqui e depois alinhá-lo ao centro horizontalmente e também ao E tudo bem. Então, pessoal, vamos criar a tela de login. Mas, em primeiro lugar, geralmente gosto de segmentar minhas telas em categorias usando a tarefa do usuário. Então, eu viria aqui e depois com nossa propriedade de texto. Eu vou vir aqui e depois dizer autenticação. Vamos aumentar nosso tamanho de fonte para isso. E tudo bem. O que significa que esta seção deve ser para tarefas de tela de autenticação, tudo bem. Agora, a próxima tela que precisamos ter aqui é a tela de login e inscrição. Então, vamos duplicar isso e fazer com que fique aqui. Duplicar é o Controle D. Se você estiver usando um MAC é o comando D. Vamos encerrar isso E então vamos tirar isso, vamos também usar nossa propriedade de ferramenta manual clicando na tecla H no teclado e, em seguida, movendo nossa tela. E isso é lindo, pessoal. Agora, isso aqui é a tela inicial deste aplicativo. Este aqui é o logotipo que acabamos de criar. Então, pessoal, vamos também aumentar o tamanho da fonte desse logotipo. 32 é muito bom. E tudo bem. Então, pessoal, como vocês podem ver, já temos a tela inicial do aplicativo, que é essa? Tudo bem. Portanto, também podemos renomear nossas telas. Então, vamos chamar isso de tela inicial. Agora, após a tela inicial, temos essa tela em que o usuário teria que escolher sua ação de autenticação, que é fazer login ou se inscrever Vamos chamar essa ação de autenticação de tela. E tudo bem. Agora, para criar um login nos dois aqui, você não precisa de um layout automático nem nada disso. Tudo o que você precisa fazer é vir aqui e selecionar a ferramenta retangular como essa e colocá-la aqui E então vamos ajustá-lo. E tudo bem. Agora , o próximo passo é selecionar a propriedade de texto e, em seguida, mantê-la aqui. E então eu diria que faça login ou inscreva-se , dependendo de qual deles você deseja que apareça primeiro. Claro, vamos começar com o login. E então vamos fazer com que fique bem no centro, e tudo bem. Aqui, pessoal, nesta fase, você nem precisa inventar uma cor ao criar sua tela de baixa fidelidade E isso porque o uso de cores em suas telas pode distrair sua parte interessada ou, devo dizer, os proprietários da empresa quando você está apresentando telas de baixa fidelidade Portanto, neste estágio, tudo o que você deve focar é na experiência do usuário. Em outras palavras, ter cores na tela de baixa fidelidade pode distrair as partes interessadas da experiência do usuário Agora, vamos fazer o mesmo com o botão de inscrição. Agora, vamos continuar duplicando isso. E então vamos ficar aqui. E tudo bem. Agora, vamos também duplicar nossa ferramenta de texto e, em seguida, vamos ficar aqui E então eu diria rapidamente que se inscreva. E então eu o ajustava para caber e tudo bem. Então, pessoal, vamos passar para a próxima tela. Que será a tela de login. Lembre-se de que já temos a tela inicial. Temos a tela de ação de autenticação e agora a próxima linha é ter a tela de login, que é onde teríamos um campo de entrada, que é o campo de entrada de e-mail e senha. Além disso, passamos a ter um botão de login. Então, pessoal, eu viria aqui e depois duplicava esse quadro também. E então eu também vinha aqui, clicava na tecla H do meu teclado para mudar nossa tela. E isso é lindo, pessoal. Em primeiro lugar, eu viria aqui para alterar o rótulo dessa tela e diria tela de login. E tudo bem. Então, pessoal, eu virei aqui. Como já temos nossa forma de retângulo aqui, tudo o que precisamos fazer é vir aqui e, em seguida, retirar esse texto e selecionar essa forma de retângulo Venha aqui e, em seguida, adicione um traço e, em seguida, retire a cor completa vindo aqui onde você vê um sinal de menos, e depois remove E tudo bem. Vamos vir aqui e, em seguida, selecionar nossa propriedade de ferramenta de texto e fazer com que ela fique aqui. E então eu diria e-mail. Então, vamos ajustar isso e fazer com que fique aqui. Agora, vamos duplicar isso para ter nosso próximo campo de texto. Então, vou clicar nisso e depois duplicar isso. Vamos anotar isso. Lembra que duplicamos isso, certo? Agora, vamos também duplicar isso e fazer com que fique aqui E então eu diria senha. E tudo bem. Então, pessoal, o próximo é o botão de login. Então, eu faria a mesma coisa aqui. Tudo bem? Como já temos uma forma de retângulo aqui, tudo o que preciso fazer é vir aqui e depois tirar esse texto, e então eu diria login E tudo bem. Vamos ajustar isso para corrigir. E tudo bem. Então, pessoal, vamos passar para a próxima tela. Que será a tela de inscrição. E essa tela de inscrição seria composta por um campo de entrada de e-mail, um campo de entrada de número de telefone e também um campo de entrada de senha Então, finalmente, também teremos um botão de inscrição. Tudo bem. Então, vamos continuar duplicando essa tela Tudo bem? Lembre-se de que já temos a tela inicial, que é a primeira tela Prosseguimos com a tela de ação de autenticação e, em seguida, também com a tela de login. Agora, a próxima será a tela de inscrição. Então, pessoal, vamos continuar duplicando isso. E então vamos clicar na tecla h no teclado e selecionar nossa propriedade de ferramenta manual para que possamos deslocar nossa tela e ver o que está acontecendo aqui. Então, pessoal, agora, essa será a nossa tela de inscrição. Então, eu vou vir aqui e depois mudar o rótulo para a tela de inscrição. E tudo bem. Então pessoal, lembre-se que dissemos que essa tela de inscrição é composta por três campos de imputação, que são o campo do e-mail, o campo do número de telefone e o campo da senha Mas, no momento, não temos um campo de número de telefone. Então, tudo que eu vou fazer agora é duplicar um desses campos, e então eu vou fazer com que ele fique aqui Eu também continuaria duplicando este texto e fazendo com que ele ficasse aqui Certifique-se de que esteja alinhado. Agora, eu faria disso um campo de número de telefone. Então, eu diria número de telefone. E tudo bem. Então eu também vinha aqui e depois alterava esse login para inscrição, já que essa é uma tela de inscrição, isso é lindo, pessoal Gente, ainda vamos ter outra tela, que é a tela de verificação do celular. Tudo que eu teria que fazer é vir aqui e selecionar esta tela e , em seguida, duplicar Tudo bem E eu também pressionaria o botão Hkey para ter nossa propriedade de ferramenta manual e, em seguida, moveria nossa tela para que pudéssemos ver o que está acontecendo aqui E agora eu vinha aqui e depois dizia tela de verificação do número do celular. E tudo bem. Eu virei aqui e depois eliminarei os campos imputados Porque não vamos precisar deles, certo? Tudo o que precisamos aqui é apenas esse campo de imputação e esse botão aqui E então eu vinha aqui e inseria um texto que diz: Insira o código de verificação. E tudo bem. E então eu também viria aqui e depois alterava esse texto de inscrição para verificar. E tudo bem. Então, pessoal, vamos retroceder e depois ver o que temos aqui. Então, pessoal, toda a tela, da tela inicial até a tela verificação do número do celular para a tarefa de autenticação Está bem? Você pode ver a tela inicial, a tela de ação de autenticação, a tela de login, que inclui o campo de e-mail, o campo de senha e o botão de login. Está bem? Você pode ver a tela de inscrição, que inclui o campo de entrada de e-mail, o número de telefone, o campo de entrada, uma senha, um campo de entrada e um botão e Além disso, também temos uma tela de verificação de número de celular na qual temos uma verificação chamada campo de imputação e também uma caixa de verificação E isso é lindo, pessoal. Então, pessoal, vamos passar para a próxima tarefa. O Coach será a tarefa da carteira de fontes. 10. Tarefa de carteira de fundos: Oi, pessoal. Bem-vindo de volta e parabéns. Gente, vamos passar para a próxima tarefa. O treinador será a melhor tarefa da carteira. Tudo o que devo fazer é ter outra tela logo abaixo dessas Mas primeiro, vamos vir aqui e depois duplicar esse texto e depois fazer com que ele fique aqui Então eu diria página inicial. E então eu vinha aqui e selecionava propriedade da ferramenta de moldura, depois vinha aqui e clicava em Android Larch E quando eu faço isso, eu viria aqui e, em seguida, derrubaria essa propriedade da ferramenta de moldura aqui. Tudo bem. E tudo bem. Então, vamos ampliar para ver nosso trabalho com clareza e, em seguida, usarei minha propriedade de ferramenta manual para mudar nossa tela. Então, pessoal, lembrem-se que essa é a página inicial do aplicativo. Está bem? Então, pessoal, em primeiro lugar, já que esta é a página inicial do aplicativo, devemos ter um ícone de menu Portanto, um menu Bothen assume a forma de um ícone. E isso geralmente consiste em três linhas horizontais paralelas sugestivas de uma lista e geralmente está localizado no canto direito de um aplicativo E ao pressioná-lo, você obterá sua lista de opções específicas para os aplicativos. Agora, vamos colocar nosso ícone de menu aqui. Fazer isso aqui é muito simples. Agora, vamos vir aqui e depois renomear isso para casa. Deixe-me ficar em casa. E tudo bem. Agora, vamos ver nosso ícone de menu. E fazer isso é muito fácil. Tudo o que você precisa fazer é clicar com o botão direito do mouse e rolar para baixo até plug-ins e, em seguida, vir aqui onde diz ícone de pena e selecioná-lo E você pode ver nosso ícone de menu aqui, onde meu mouse está, e então selecioná-lo, fechá-lo e fazer com que ele fique aqui. Tudo bem. Agora, a próxima linha é ter um texto aqui embaixo desse ícone, que diz equilíbrio Então, vamos selecionar uma ferramenta de texto e, em seguida, deixá-la aqui. E então eu diria equilíbrio. E então eu me certificaria de que isso fosse ajustado. Eu o selecionaria e depois viria aqui e alteraria o tamanho da fonte para 20, e tudo bem. E logo abaixo desse equilíbrio, eu também teria outro texto, que é uma quantia presumida Então, vou duplicar isso e depois vou fazer com que fique aqui E então eu diria 35.000. E tudo bem. Agora, o próximo passo é ter um botão de conta de fundos logo abaixo desse texto aqui na página inicial, assim como temos em nosso fluxo de arquitetura de informações Tudo bem? Então, pessoal, todos vocês já sabem como criar um botão. Tudo o que você precisa fazer é vir aqui e selecionar esse navio retangular e fazer com que ele fique aqui. Tudo bem? E tudo bem. Então, vamos adicionar um texto também para que possamos escrever nosso texto. E então eu diria conta de fundos. Então, vamos ajustar isso para caber E tudo bem. Agora, a próxima linha é ter um texto que diz transação recente, que é a opção de transação recente. Então eu viria aqui e depois duplicava isso e fazia com que ficasse aqui E então eu retirava tudo isso, e então eu diria transações recentes. E tudo bem. Então, vamos ajustar isso. E tudo bem. E então eu viria aqui, e então eu a tornava ousada. E tudo bem. Então, logo abaixo desse texto, eu teria um retângulo com uma redução de canto de Então, vamos duplicar isso e então eu vou fazer com que fique aqui Mas tudo bem. Então eu expandiria isso para essa lente. E então eu continuaria duplicando isso também e fazendo com que ficasse aqui. E tudo bem. Agora, vamos dar a ele um raio de canto de 16 px. Eu virei aqui e direi 16. E tudo bem. Eu também viria aqui e diria 16. E isso são lindos, caras. Agora, vamos usar nossa bela propriedade para mudar nossa tela. Agora, a próxima linha é o banner de referência. E para fazer isso, tudo o que você precisa fazer é vir aqui e selecionar a forma do retângulo e deixá-la aqui e depois expandir E então eu diria, clique para se referir. E tudo bem. Vamos ajustar isso E tudo bem, pessoal. Agora, vamos usar nossa propriedade de ferramenta manual para mover nossa tela. Aqui mesmo. Agora, é hora de ter uma seção de navegação logo abaixo desta nave e, em seguida, ter um plano de fundo selecionando forma do retângulo e, em seguida, posicionando-a assim E então venha aqui para mudar a cor do campo para isso. Tudo bem. A próxima linha é selecionar uma forma de retângulo e mantê-la aqui Tudo bem. Então, eu usaria nossa propriedade têxtil para escrever sobre casa. Agora, vamos destacar e alterar o tamanho da fonte para 16. E tudo bem. Então, vou ajustar isso para caber. E tudo bem. Além disso, vamos ter outro botão de navegação aqui. Então, tudo o que preciso fazer é vir aqui e depois duplicar isso e fazer com que fique aqui Eu também duplicaria isso e faria com que ficasse aqui. Então eu tiraria tudo isso e diria que investiria. Então, vamos também duplicar isso e fazer fique aqui para que possamos ter outra navegação em ambos Então, vou duplicar isso novamente, assim como fizemos, e gostaria que ficasse aqui E eu também continuaria duplicando isso e fazendo com que ficasse aqui E então eu tirava tudo isso e então eu diria transacionar e isso é lindo, pessoal Então, pessoal, vamos voltar rapidamente ao botão da conta de fundos, porque é importante tenhamos uma tela pop-up aqui quando um usuário clica nesse botão de contas de fundos Assim, quando um usuário clicar nesse botão de conta de fundos, ele ou ela verá uma tela pop-up para que ele escolha o método que gostaria de usar para financiar sua conta Então, pessoal, vamos colocar outro quadro logo abaixo da tela da página inicial . Tudo bem? Então, eu vinha aqui na propriedade da ferramenta Frame, clicava nela e selecionava o Android Large, então eu o deixava logo abaixo da tela da página inicial Tudo bem. E então eu prosseguiria para redimensioná-lo. Tudo bem? E então eu teria uma ferramenta de texto aqui, e então eu a deixaria aqui e então eu diria conta de fundos. Eu destacaria isso. Vá em frente para alterar o tamanho da fonte para isso e , em seguida, torne-o regular. E então eu também mudaria o rótulo da tela para que a conta de fundos apareça. E tudo bem. Agora , a próxima linha é ter dois botões dentro dessa moldura. E um dos botões será um botão de transferência bancária e o outro será um botão de cartão de débito Quais são os dois métodos que um usuário pode usar para financiar sua conta. Eu vinha aqui e depois selecionava uma forma de retângulo e depois fazia com que ficasse aqui Então eu ajustaria isso. E tudo bem. Agora, eu prosseguiria com uma redução de canto de 16 px. Então eu viria aqui, e então eu diria 16. E tudo bem. E então eu vinha aqui, selecionava nossa propriedade de ferramenta de texto e, em seguida, fazia com que ela ficasse aqui. E então eu diria transferência bancária. Vamos ajustar isso. E então vamos continuar para torná-lo ousado. E tudo bem. Então, vamos continuar duplicando isso. E então vamos fazer com que fique aqui. Então, vamos também duplicar isso e fazer com que fique aqui E então eu tirava tudo isso, e então eu diria cartão de débito Vamos ajustar isso para caber. Tudo bem. Então pessoal, essa tarefa está completa. Temos um botão de conta de fundos aqui, que quando um usuário clica nele, ele ou ela faz com que esse pop-up apareça assim Pedir que escolham uma transferência bancária ou um método de cartão de débito que gostariam de usar para financiar sua conta Agora, vamos passar para o próximo imposto em nosso aplicativo, que é a tarefa de investimento. 11. Tarefa de investimento (Nova): Oi, pessoal. Bem-vindo de volta e parabéns. Então, pessoal, vamos passar para a próxima etapa do nosso design, que é a fase de investimento. Antes de tudo, indique que esta é a seção Investir. E para fazer isso, eu primeiro voltaria para 100%. Então, eu viria aqui e voltaria para 100%. E então eu clicava no botão hkey do meu teclado para mover nossa tela E é isso aqui mesmo. O que vou fazer é primeiro duplicar isso e depois fazer com que fique logo abaixo deste cartão, certo, para que eu possa escrever Eu diria apenas que invista. E tudo bem. Então, pessoal, vamos continuar duplicando essa página. Tudo bem. E para duplicar é o Controle D. Se você estiver usando um MAC é Comando D. Então eu clicaria nesta página para duplicar E tudo bem. Agora, vamos renomear essa página inicial para investir. Está bem? Então, digamos que invista. E tudo bem, pessoal. Agora, vamos retirar tudo isso, e então eu diria uma lista de ações para investir E tudo bem, pessoal Novamente, eu vinha aqui e depois retirava essa conta de fundos e depois dizia pesquisar. E então eu também retirava tudo isso. E tudo bem. Agora, vamos ajustar isso um pouco, e tudo bem. Depois disso, eu retiraria a cor do campo. E então, quando eu fizer isso, eu viria aqui e adicionaria um traço a ele. E tudo bem. E então eu continuaria esticando isso para que chegasse a esse ponto. E então eu daria a ele uma raiz angular de oito pixels Então, eu diria apenas oito, e tudo bem. Agora, vamos tirar tudo isso e , em seguida, vamos ter um retângulo aqui Tudo bem? Com minha propriedade de ferramenta manual, vou mudar minha tela. O que eu vou fazer é tirar tudo isso e adicionar um retângulo aqui Está bem? Agora, vamos vir aqui e, em seguida, vamos selecionar essa forma retangular e fazer com que ela fique aqui Vamos ajustá-lo para corrigir. E tudo bem. Agora, vamos dar a isso uma redução de canto de 16 pixels. Eu diria 16, e tudo bem. Então, eu diminuiria um pouco essa cor. Assim mesmo. Tudo bem. Em seguida, selecionarei nossa propriedade de ferramenta de texto e , em seguida, farei com que ela fique aqui, e então eu diria veículos inocentes. E então eu ajustava isso para caber. Tudo bem, pessoal. E então eu também adicionaria esse número aqui, que representa o ID do patrimônio líquido. Eu diria zero, zero, um, zero, um, um, tudo bem. Gente, vamos tirar isso, tudo bem. Agora, vamos mudar tudo o que temos aqui para surgir. E tudo bem. Agora, vamos duplicar isso e fazer com que fique aqui. E tudo bem, pessoal. Agora, eu tirava tudo isso e dizia um. E logo abaixo, eu teria a identificação desse patrimônio Então eu diria zero, zero, um, 012. Você pode ir em frente e ter qualquer nome ou qualquer lista de ações que desejar, ok? E tudo bem. Além disso, vamos duplicar isso e fazer com que fique logo abaixo disso, assim Para que pudéssemos ter outra lista e então eu tiraria tudo isso, e então eu diria grupos Ibetal Então, pessoal, vamos também obter o ID desse patrimônio, que será 001013, tudo Tudo bem? Você pode dar a ele qualquer nome ou o que achar melhor. Lembre-se de que esta é a lista de ações nas quais um usuário pode investir Agora, vamos também duplicar isso e fazer com que fique aqui Agora, a próxima linha é Coty's Cbs. Vou tirar tudo isso e diria CotsKS. Então, eu daria uma identificação a esse patrimônio. Então vai ser zero, zero, um, 014, tudo bem Então, pessoal, essa é a lista de ações nas quais um usuário pode investir ou a lista de ações nas quais um investidor gostaria de investir E isso são caras lindos. Agora, vamos mudar nossa tela para que possamos ver o que está acontecendo aqui. A próxima linha é ter outra seção que diga sua carteira de ações. Então, vou duplicar isso e, em seguida, quero que fique aqui E então eu diria que sua carteira de ações. Agora vamos falar um pouco sobre isso para que possamos ter algum espaço logo abaixo dela Vamos também trazer isso à tona. Tudo bem. Agora, vamos deixar isso aqui, tudo bem. Gente, vamos continuar ajustando isso até que tenhamos espaço suficiente aqui Vamos abordar isso um pouco. Então vamos ficar aqui. Então, pessoal, vamos duplicar isso e deixar que fique logo abaixo disso , desse jeito Tudo bem? E então vamos também duplicar isso E então vamos fazer com que fique ao lado disso e isso são lindos, caras. Então, pessoal, vamos voltar para 50%. Agora, podemos ver o que temos aqui. Tudo bem? Agora, vamos também duplicar essa página. Está bem? Agora, vamos vir aqui e seguida, digamos, detalhes patrimoniais. Então vamos pegar essa barra de pesquisa que temos aqui, ok? E então vá em frente para retirar todos esses itens que temos aqui. Então vou deixar só isso, ok? Vamos expandir isso, tudo bem. Então, eu também tiraria tudo isso. Nós não precisamos deles. Agora, ainda com os detalhes do patrimônio, eu viria aqui e escreveria esse ID do patrimônio, ok? Então eu duplicaria isso, e então eu faria com que ficasse aqui E então eu escreveria o ID do patrimônio líquido. Está bem? Agora, vamos tirar isso, tudo bem. Agora vamos ficar aqui, tudo bem. Então, aqui, eu vou ter o ID do patrimônio, que é zero, zero, um, zero duplo um, tudo bem. Agora, isso é tudo sobre os detalhes do patrimônio, eu também gostaria de ter um capital social de 20.000 Eu diria capital social. 20.000 Nyra. E tudo bem. Então, pessoal, eu também gostaria de contratar um. Você pode inserir qualquer coisa que achar melhor, ok? Eles mantiveram o ganho desse patrimônio específico, digamos, 4.000 E tudo bem. Então, pessoal, vamos também ter um lucro líquido e um dividendo Então, eu virei aqui e diria lucro líquido e dividendos Então, digamos 5.000. Você pode imputar qualquer figura que achar melhor, ok? Isso ainda está nos detalhes do patrimônio em que você está prestes a investir, ok? E tudo bem. Então, pessoal, eu faria isso ser ousado, ok? Além disso, vou fazer com que seja ousado, para que possamos diferenciá-los da figura real Vamos ajustar isso, tudo bem. Além disso, vamos ter algumas informações sobre esse patrimônio específico. Então, eu viria aqui e duplicava isso. E então eu faria com que ficasse aqui. E então eu diria sobre inocentes. E tudo bem. Então, pessoal, eu também continuaria duplicando isso, e então eu faria com que ficasse logo abaixo Então, posso começar a dizer veículos inocentes, de fabricação limitada. É um automóvel nigeriano. Está fabricando em M Southeast. Foi fundada pelo chefe Innocent Tacoma. E tudo bem, pessoal. Então, vou fazer essa semi placa. Está bem? Vamos também fazer essa semi placa, ok? Então, pessoal, vamos ajustar tudo isso. Tudo bem? Vamos ajustar isso para caber. Está bem? Então, pessoal, precisamos de mais espaço. Então, vamos ajustar tudo isso. W, tudo bem. Agora, eu viria aqui e selecionaria a forma do retângulo, e eu faria com que ela ficasse aqui Tudo bem? Eu o ajustaria. E tudo bem. Agora eu vinha aqui e depois selecionava a propriedade de texto e depois investia. Então eu o tornaria ousado. E tudo bem. Agora, esse é o detalhe dessa equidade aqui. Está bem? Em primeiro lugar, você teria o logotipo da empresa proprietária do patrimônio e também o ID do patrimônio. Além disso, você passaria a ter o capital social desse patrimônio, os lucros acumulados, o lucro líquido e o dividendo E então você também teria as informações sobre essa empresa. Você pode ver onde meu mouse so está ligado. Então, finalmente, você tem o botão Investir aqui. Agora, quando o usuário clica no botão Investir, deve ser levado a uma página na qual teria que inserir o valor que deseja investir Então, vamos ver essa página aqui. E para fazer isso, tudo o que temos que fazer é vir aqui e depois duplicar isso e deixar que fique aqui E tudo bem. Agora, vamos eliminar tudo isso. Está bem? E então vamos duplicar isso E então vamos fazer com que fique aqui. E tudo bem. Agora, vamos adicionar um traçado e depois tirar a cor do campo. E tudo bem. Agora, vamos ter um texto dentro que diz Inserir valor. Então, eu vou até aqui, seleciono a propriedade de texto e, em seguida, faço com que ela fique aqui, e então eu diria Insira o valor. Vamos nos ajustar. E tudo bem. Agora, se o usuário clicar no botão investir após inserir o valor que deseja investir nesse patrimônio, o usuário deve acessar uma página que exibe o resumo do investimento que deseja fazer Então, pessoal, vamos duplicar isso e depois vamos ficar aqui E então, com nossa propriedade de ferramenta manual, vamos mudar nossa tela. E tudo bem. Então, pessoal, vamos eliminar esse campo de entrada aqui. Está bem? Não precisamos mais disso. Agora, vamos adicionar o valor que o usuário deve ter inserido, então eu diria o valor. Agora, vamos também vir aqui e depois vamos tirar tudo isso e, em seguida, digamos que continue. E tudo bem. Agora, quando o usuário concordar com o que tem aqui, o usuário clicará no botão Continuar. E quando o usuário faz isso, ele deve ser levado a uma página indicando que o investimento foi bem-sucedido. Então, pessoal, vamos duplicar isso e deixar que fique aqui, ao lado. Tudo bem. Tudo bem. Agora, vamos usar nossa propriedade de ferramenta manual para deslocar nossa tela para que possamos ver o que está acontecendo aqui. Então, pessoal, vamos tirar tudo isso. Não precisamos mais disso. Então vamos derrubar isso. Então eu viria aqui e depois faria com que ficasse aqui, tudo bem. E então eu vou tirar tudo isso e eu diria que o investimento foi bem-sucedido. E tudo bem. Então, eu ajustaria isso. E então eu faria com que ficasse aqui. E isso é lindo, pessoal. Agora, eu também tiraria tudo isso e depois ficaria em casa. E então eu ajustava isso para caber. Tudo bem. O que significa que o usuário terá a opção de voltar à página inicial ao clicar no botão Voltar à página inicial E quando eles fazem isso, significa que a tarefa está concluída. Ou seja, a tarefa de investimento está concluída. São lindos, caras. Agora, vamos retroceder Então, pessoal, vamos também renomear cada tela para que possamos ter um rótulo adequado para elas, ok? Então, vamos chamar isso de investimento bem-sucedido. E então vamos também chamar isso de resumo da equidade, digamos. Uma vez que esse é o resumo do patrimônio em que o usuário deseja investir. Está bem? Agora, vamos chamar esse valor de capital próprio. E então, vamos também chamar isso de detalhes patrimoniais. E isso são lindos, caras. Além disso, vamos chamar essa lista de ações. E isso são lindos, caras. Pessoal, que apresentemos adequadamente uma tela de baixa fidelidade como essa para testar a ocorrência e tudo Para fazermos isso adequadamente, isso significa que precisamos fazer um protótipo dessas telas de baixa fidelidade que possamos apresentá-las adequadamente para testes e contribuições das Então, vamos em frente e vamos fazer isso. Então, vou diminuir o zoom, ok? Agora eu viria aqui no protótipo e depois clicava nele, fechava começava com a tela inicial do aplicativo Vamos clicar na tela inicial aqui para selecioná-la. E quando estiver selecionado, clique neste ponto aqui e arraste-o para a tela de destino como esta. E tudo bem, porque eu gostaria que os usuários passassem da tela de inicialização do aplicativo para essa tela aqui, que é a tela de ação de autenticação Quando eu fizer isso, um cartão pop-up com detalhes da interação aparecerá para que possamos definir o clima de nossas interações. Então, aqui, temos o evento on tap, e a ação para esse evento on tap é navegar para a ação. Você pode ver onde meu mouse também está ligado. Então, o que isso significa é que quando a tela inicial ou devo dizer a tela de inicialização é clicada, vamos navegar até essa tela, que é a tela de ação de autenticação Está bem? Então, pessoal, também é importante que vocês renomeiem essas telas de acordo com a forma que quiserem , pois essa é a melhor maneira de fazer isso Portanto, isso significa principalmente que quando a tela de inicialização é tocada ou, devo dizer, clicada em navegue até a tela de ação de autenticação Está bem? E tudo bem. Agora, aqui, ainda temos uma seção de animação onde podemos definir a animação dessa transição. Ou devo dizer animação. Atualmente, está configurado como instantâneo, certo? Mas eu posso vir aqui e vou configurar isso para animação inteligente. Você pode ver onde meu mouse está ligado e , em seguida, configurá-lo para dentro e para fora. Eu também definiria o tempo de atraso da animação para, digamos, 800 milissegundos. Vou dizer apenas 800. E então vamos pressionar a tecla enter em nosso teclado e, em seguida, Figma, apenas adicionamos os milissegundos Agora, essas configurações de animação são opcionais. O mais importante aqui é que definimos o evento e a ação que seria acionada por esse evento. Está bem? E então definimos o quadro de destino para essa ação, e tudo bem. Agora, vamos ampliar um pouco. Então, pessoal, a próxima coisa que eu faria é vir aqui e clicar nesse botão, e eu diria que, quando um usuário clica nesse botão de login, ele ou ela deveria ser levado para a tela de login Está bem? Eu sou isso. Então, eu clicava nisso e depois fazia que ficasse aqui. E tudo bem. Agora, para o botão de inscrição, é importante entender que quando um usuário clica nesse botão de inscrição, ele ou ela deve ser direcionado para a página de inscrição aqui, ok? E tudo bem. Agora, na página de login, quando o usuário digita o endereço de e-mail e a senha, ele precisa clicar no botão de login. Quando eles fizerem isso, eu gostaria que eles fossem direto para a página inicial , que está aqui Eu clicava nele e depois o soltava aqui . E tudo bem. Então, pessoal, lembrem-se, para um usuário fazer login, isso significa que ele já é um usuário existente. E agora, quando o usuário seleciona a opção de inscrição, isso significa que o usuário é um novo usuário e o usuário teria que inserir seu endereço de e-mail, seu número de telefone e sua senha E quando eles fazem isso, isso significa que eles teriam verificar o número de telefone primeiro. Portanto, quando o usuário clica no botão de inscrição, ele deve ser direcionado para essa página de verificação do número de celular E quando o número de telefone do usuário for verificado, o usuário será direcionado para a página inicial Está bem? Então, vamos levar o usuário à página inicial assim que seu número de telefone for verificado E isso são lindos, caras. Agora, você viu que criamos o fluxo de autenticação, certo? Agora, vamos para a página inicial e, em seguida, vamos trabalhar na próxima tarefa. Está bem? Então, vamos usar nossa propriedade de ferramenta manual para mudar nossa tela aqui. E tudo bem. Então pessoal, a próxima tarefa aqui é financiar a conta, para financiar a conta, o usuário terá que clicar no botão da conta de fundos aqui. E quando eles fizerem isso, gostaríamos que um pop-up aparecesse na tela, e esse pop-up deveria mostrar esse cartão aqui, ok? Um cartão que exigirá que o usuário escolha o método com o qual deseja financiar sua conta. Vamos clicar nessa conta de fundos e, em seguida , deixá-la aqui. Então, vamos aqui mesmo em nosso cartão de detalhes de interação. Agora, aqui está o evento on tap, tudo bem. Agora, aqui também, temos a opção de navegar até. Tudo bem. Mas isso não é exatamente o que queremos aqui. Queremos que um pop-up apareça na mesma tela aqui. Está bem? Não queremos que o usuário saia da página em que está. Tudo bem. Então, pessoal, como podemos tornar isso possível? O que vamos fazer é isso, certo? Vamos mudar isso de navegação para sobreposição aberta. E então também vamos vir aqui onde diz posição e, em seguida, garantir que esteja configurado como centralizado, porque eu quero que esse pop-up fique no centro da tela aqui Tudo bem? E então eu também me certificaria de que isso fosse selecionado. Diz, feche ao clicar do lado de fora. Além disso, eu também manteria essa mesma opção selecionada. Esse é o plano de fundo por trás da opção de sobreposição. Então, eu clicaria aqui e selecionaria. Tudo bem, eu manteria a opacidade em 25%, ok? E aqui, você ainda pode configurá-lo para instantâneo, ou pode prosseguir para alterá-lo para qualquer opção, seja dissolvido ou ainda pode deixá-lo instantaneamente. Tudo bem? Então, pessoal, concluímos com sucesso a tarefa da conta de fundos. A próxima tarefa é a tarefa de investimento, e essa tarefa acontecerá e essa tarefa acontecerá na página inicial, pois é quando o usuário acessa a página inicial que ele clica no botão Investir aqui Tudo bem que eles sejam direcionados à página inicial para investir em ações Então, pessoal, vamos ampliar para 50%. E então vamos usar nossa propriedade de ferramenta manual para mudar nossa tela. Vamos ajustar isso, e tudo bem. Como ainda estamos no protótipo, eu vinha aqui e depois clicava nesse botão e criava uma conexão com esse pino Tudo bem. E tudo bem. Isso significa que quando um usuário clica neste botão Investir na seção de navegação da página inicial, ele ou ela será direcionado para a página Investir, tudo bem, onde o usuário verá uma lista de ações nas quais pode investir e Então, com nossa propriedade de ferramenta manual, vamos mudar nossa tela. E tudo bem. Pessoal, se o usuário chegar a esse argumento de investimento, a tarefa que queremos que ele conclua é investir. Vamos supor que o usuário queira investir nesse patrimônio aqui mesmo. Eu o selecionaria e, em seguida, criaria uma conexão como essa. que significa que, quando um usuário clica nesse patrimônio, ele acessa a página de detalhes do patrimônio, onde o usuário verá os detalhes desse patrimônio no qual deseja investir E quando o usuário concorda com os detalhes do patrimônio que vê, ele clica no botão Investir aqui, certo? E ao fazer isso, o usuário vai para a próxima página, onde terá a oportunidade de inserir o valor com o qual inserir o valor deseja investir nesse patrimônio. E quando o usuário insere os valores com os quais deseja investir, o usuário clica em Aqui deve ser o próximo, ok, e não investir. Devemos ter um próximo botão aqui em vez do botão de investimento. Desculpe pelo erro, ok? Agora, vamos voltar ao protótipo. Agora, quando o usuário insere o valor com o qual deseja investir, ele clica no botão Avançar aqui, o que o levará a esta página, onde o usuário verá um resumo dos investimentos que deseja fazer. E quando o usuário concorda com tudo que vê aqui, ele o clica no botão Continuar. E então isso significa que a tarefa está concluída. E isso é lindo, pessoal. Agora, vamos retroceder. Vamos ampliar para ajustar, e tudo bem. Então, o que temos aqui é isso. Terminamos de criar nossa tela de baixa fidelidade e podemos apresentar nossa tela de baixa fidelidade 12. Testando o protótipo de baixa fidelidade (Novo): Oi, pessoal. Bem-vindo de volta e parabéns. Então, pessoal, o que temos aqui é que terminamos de criar nossas novas telas de fidelidade. E agora podemos apresentar nossas novas telas de fidelidade para testes Então, pessoal, como fazemos isso? Em primeiro lugar, eu viria aqui e selecionava a tela de inicialização ou devo dizer a tela inicial Porque essa é a primeira tela e, claro, é daí que tudo começa. Agora, quando eu o seleciono, eu viria aqui e clicaria neste botão de apresentação aqui, para que possamos apresentá-lo. E quando eu fizer isso, uma nova guia será lançada para isso. Então, pessoal, essa é a apresentação que eu apresentaria às partes interessadas, que são as proprietárias deste aplicativo. Então, vou levar esta apresentação para eles a fim de demonstrar a experiência do usuário que eu criei, que permitirá que os usuários realizem suas tarefas neste aplicativo. Então, pessoal, primeiro de tudo, eu clicaria nessa tela. E quando eu fizer isso, vou acessar essa tela aqui mesmo. E nessa tela, eu explicaria às partes interessadas que os usuários existentes podem clicar no login enquanto os novos usuários podem clicar na inscrição Tudo bem. Então, pessoal, vou demonstrar isso como um novo usuário faria. Eu diria, ok, quando um novo usuário clica na inscrição, tudo bem, o novo usuário teria que inserir seu e-mail, número de telefone e senha E então eles clicavam no botão de inscrição E quando fizessem isso, eles teriam um código de verificação enviado para o número de telefone que eles inseriram. Tudo bem. E quando eles inserirem esse código de verificação e clicarem em Verificar, eles serão direcionados para a página inicial do aplicativo, que é essa. Tudo bem. Agora, se eles querem investir, significa que precisam financiar a conta, certo? Então, eu clicaria no botão da conta do fundo. E quando eu fizer isso, um pop-up aparecerá. Agora, eu demonstraria às partes interessadas que, neste caso, temos um método de transferência bancária e um método de cartão de débito, certo? Então, vou explicar a eles que, se o usuário prosseguir o financiamento da conta com qualquer um dos métodos , isso significa que os usuários estão prontos para investir com este aplicativo. Agora, para eles investirem, eles viriam aqui e depois clicariam no botão Investir. E quando fizerem isso, acessarão a página Invest aqui. Você pode ver esta página aqui, onde eles veriam uma lista das ações nas quais podem investir E se o usuário optar por investir em qualquer uma dessas ações, por exemplo, ao clicar nesse patrimônio, o usuário será levado automaticamente para a página de detalhes desse patrimônio específico E quando o usuário estiver satisfeito com os detalhes do patrimônio, ele clicará no botão Investir aqui. E quando o usuário fizer isso, será direcionado para a página onde deverá inserir o valor que deseja investir. E quando o usuário fizer isso, ele clicará no próximo botão. E quando o usuário fizer isso, verá um resumo do investimento que está prestes a fazer. E se o usuário estiver satisfeito com o investimento, ele clicará no botão Continuar. E quando o usuário faz isso, significa que o usuário acessará esta página. Está bem? E quando o usuário acessa essa página, significa que concluiu o investimento. E quando o usuário terminar o investimento, ele clicará em Voltar à página inicial e retornará à página inicial do aplicativo Então, pessoal, uma demonstração como essa, ou devo dizer, uma apresentação como essa, na verdade revelará a experiência que o usuário terá usando esse aplicativo ou produto. Agora, se seu protótipo de fidelidade foi aceito pelos proprietários da empresa, ou devo dizer pelas partes interessadas, isso significa que agora é hora de você prosseguir e iniciar o processo de criação do seu protótipo de alta fidelidade, que é a versão de design do E é nesse estágio que você se concentrará em coisas como cores, tipografias, efeitos, biblioteca de componentes, estilo, biblioteca e assim por diante Então, pessoal, neste curso, vamos supor que as partes interessadas nos tenham aprovado esse protótipo de baixa fidelidade e também que as partes interessadas queiram que projetemos a versão real do produto Então, o que vamos fazer é isso. Vamos voltar aqui e depois clicar neste botão de design. E depois vá até aqui e crie um novo argumento de venda, certo? E então chame isso de Alta Fidelidade. E isso é lindo, pessoal.