Protótipo no Figma em 60 minutos | Projeto do mundo real

1. Protótipos no Figma - O que você precisa saber: Bem vindo de volta. Prototipar Figma significa simplesmente tornar o É como se o projeto já estivesse codificado e pudéssemos usá-lo Então, vamos começar e conversaremos mais sobre isso em um minuto. Então, aqui estão duas telas de aplicativos móveis. Podemos nos registrar ou fazer login. Fantástico. Vamos mudar para o modo de protótipo clicando aqui. Não mudou muita coisa, mas tudo bem. Agora, vamos selecionar login na tela à esquerda. Ao passar por cima, você verá esse símbolo de adição. Clique e segure e arraste uma conexão para a outra tela. Imediatamente, vamos ver esse pop-up, e isso nos permite ajustar a interação. Resumindo, queremos o seguinte. Quando clicamos em Login, então esse é o gatilho, queremos navegar. Essa é a ação, e o destino já está definido porque arrastamos essa seta para aquela tela específica. Então, estamos todos bem. E em termos de animação, animação inteligente é perfeita O resto realmente não importa. Ok, vamos fazer isso de novo, mas na outra tela. Então clique em Registrar e encontre o símbolo de adição. Agora, arraste uma conexão para a tela inicial. Observe como há uma borda azul. Isso é ótimo. Mesmas configurações de antes, tudo bem. E sim, parabéns. Temos nosso primeiro protótipo. Portanto, sinta-se à vontade para fechar esta janela. Ok. E para testá-lo, vamos usar esse botão play aqui. Agora, protótipos maiores podem levar um segundo para serem carregados, mas esse é bem rápido E podemos clicar e ver isso em ação. É como se o aplicativo tivesse sido codificado como se estivesse ativo. Dê uma olhada no cursor, onde há uma ação disponível, obteremos o ícone da mão em vez da seta. Em poucas palavras, isso é prototipagem, e há apenas alguns outros recursos que você realmente precisa conhecer, e eu vou guiá-lo Mas aqui está o ponto essencial. A prototipagem não é uma questão de design. Não se trata de torná-lo elegante e interativo, então fica melhor nas mídias sociais para conseguir mais curtidas Não, feche a aba e vamos voltar ao nosso projeto. Agora, clique na seta A para abrir as configurações de animação, para que você entenda o que quero dizer. E se mudarmos de Smart animate para move in? Agora temos mais algumas opções aqui. Digamos que ele se mova pelo lado direito. Vamos experimentá-lo. Agora, é claro, isso é interessante, um efeito legal, mas a outra aba ainda permanece no Smart animate Então, vamos voltar. Se desta vez, trocamos para “deslizar para dentro”. Então, isso é outra coisa. Então, isso pode parecer ainda mais legal. E então talvez vamos mudar a duração para, digamos, 600. E uma mudança final, vamos mudar a curva para outra coisa. Vamos alterá-lo para facilitar a entrada e a saída. Fantástico. Agora vamos clicar em Play e testar as coisas. Agora, estou me apressando, mas espero que você esteja começando a identificar um problema Sim, isso parece interessante. É uma sensação boa. Mas talvez possamos torná-lo ainda melhor. Talvez isso precise ser definido em 4:50, talvez um tipo diferente de curva, certo E esse é, na verdade, o maior problema com a prototipagem. Isso te suga. Isso leva muito tempo. É muito demorado como nada mais. E o problema é que parece que você está progredindo, certo? Como se estivesse trabalhando em algo nobre. Você está aprimorando o aplicativo. Você está fazendo com que pareça especial, certo? Mas, como fundador de uma empresa de estúdio de design de aplicativos que dirigi por mais de cinco anos, posso dizer isso sem hesitar, sem dúvidas Tudo o que você vai fazer, tudo o que fizemos aqui não será codificado, como o projetamos Então, 450 ou 600 milissegundos, esse não é o caso. Mova-se, deslize para dentro, esse não é o caso. Animação inteligente e assim por diante. Agora vou explicar por que esse é o caso com mais detalhes na próxima lição. Mas, por enquanto, faça o download do projeto. Você o anexou e vincula essas duas telas, como eu mostrei há um minuto. O motivo pelo qual estamos usando telas de design de aplicativos em vez de um site normal é devido ao tamanho delas. Eles são menores, então há menos espaço. Não precisamos nos movimentar dentro do grande projeto. Imagine 20 telas de desktop. Isso é muito zoom e panorâmica, então é por isso que escolhi as telas móveis da Lapa Mas sim, vá em frente, experimente, veja como você se sai e, em seguida, certifique-se de continuar assistindo à próxima aula, porque é muito importante. Divirta-se 2. A prototipagem é essencial, mas tem uma falha importante: Bem-vindo de volta. A prototipagem é empolgante Você viu quantas opções temos com nossas configurações, e isso é apenas a ponta do iceberg Agora, imagine o quão intrincados polidos podemos fazer nossos designs pareçam e se sintam E isso certamente vai funcionar bem nas redes sociais. Vai receber muitas curtidas, comentários e muitas solicitações de trabalho, certo? Meus projetos, certo? Uh, não, na verdade, não, não realmente. Lembre-se de que eu era o CEO da minha empresa de design de aplicativos, então eu poderia simplesmente pedir aos meus programadores que combinassem minha prototipagem individualmente. Mas o problema é o seguinte. Eu não fiz. E por que esse é o caso? Porque programar é muito caro. Pense nisso dessa forma. Digamos, 1 hora de codificação, a codificação IOS custa, digamos, 100 dólares, um número aleatório, um número aleatório 100 dólares por hora. Agora, o desenvolvedor diz que fazer esse formulário de registro funcionar do ponto de vista da funcionalidade leva cerca de 15 horas, apenas um número aleatório Então são $1.500, ok? 500 dólares. Isso é pura funcionalidade, sem animações, certo? Você então pergunta sobre as animações, e ele diz que são 10 a 30 horas extras. Então, isso é algo em torno de $1000-3 mil a mais. Ele não tem certeza porque são muitos ajustes finos, muitas idas e vindas. Pode levar mais tempo, mas definitivamente não menos. Agora, você diz sim? Você aceita esse custo enorme? E lembre-se de que outras partes do projeto precisam de codificação. Portanto, sua melhor aposta é tornar o aplicativo funcional e, se tiver tempo, volte e adicione algumas animações aqui e ali após o lançamento do aplicativo Então, o que isso significa para prototipagem? Tem que ser básico. Está lá para ajudar o cliente e ajudar o programador a entender o fluxo Dê uma olhada rápida aqui. Vamos supor que seja a primeira vez que você está vendo esse projeto, ok? Agora, você conhece todas as formas possíveis de começar a usar este aplicativo? Deixe-me explicar isso bem rápido. Assim, você pode digitar sua localização aqui, seu endereço. Esse é o número um. Ou você pode clicar nesse ícone aqui para identificar automaticamente seu endereço Então essa é uma tela separada, então essa é a ação potencial número dois. Você pode simplesmente pular esta etapa e simplesmente ver todos os restaurantes listados no aplicativo, e essa é a ação potencial número três, ok, três fluxos diferentes E, finalmente, você pode registrar qual login, e essa é a ação número quatro. Você não pode presumir que um cliente ou vários programadores escolherão todas essas quatro opções Então, em vez de presumir que, em vez de fazê-los pensar, em vez de fazê-los pensar, você mostrará a eles todos os possíveis caminhos que mostrar é fantástico porque não deixa espaço para a imaginação, Então, isso significa que os protótipos são incríveis para mostrar como um site, um aplicativo ou qualquer coisa intermediária deve funcionar E aqui está o porquê. Os protótipos são uma ferramenta essencial ao procurar programadores Está bem? Então, um cliente normalmente contrata um designer e, com um protótipo completo, ele começa a receber cotações dos desenvolvedores O protótipo está lá para que a equipe de desenvolvimento possa entender o projeto com precisão saber tudo sobre ele Por meio do link FiGMA, eles podem ver a interface do usuário, o design real, mas também podem ver mas também podem ver os muitos fluxos dentro do aplicativo, como você pode se registrar , como pagar por um pedido, como adicionar ou remover produtos do cartão, etc Agora, por exemplo, observe que não há login de mídia social nessa tela. Isso é muito importante. Todos esses pequenos detalhes alteram o escopo do projeto. Digamos que adicionamos algo como fazer login com o Facebook ou Google ou qualquer outra coisa. Então, isso pode levar mais dois dias de desenvolvimento, e isso pode adicionar, digamos, 1.500 dólares de custo extra É por isso que os protótipos são absolutamente essenciais. Quando o cliente está procurando programadores, ter um protótipo interativo e um design completo são É assim que você obtém cotações e estimativas precisas porque, novamente, a empresa de codificação pode ver tudo É assim que eles podem ser precisos. Mas voltando ao nosso trabalho, ninguém se importa com animações sofisticadas 400 milissegundos, 600 deslizam, entram. Não, eles se preocupam ver todas as opções dentro do aplicativo. Então é assim que você deve abordar a prototipagem. Portanto, não é uma ferramenta de design para conseguir mais curtidas. Não, do ponto de vista da funcionalidade, você quer mostrar os recursos do aplicativo Estou insistindo muito porque você verá muitas animações sofisticadas em drible e Be hands, e você pode pensar que é isso que os clientes estão procurando, mas não é o caso E você não precisa confiar em mim. Basta pesquisar esses projetos que você vê nas redes sociais. Eles foram implementados dessa forma? Vá e baixe esses aplicativos. Você consegue ver todas aquelas animações sofisticadas e complexas que você vê em Be hands or dribble Em qualquer aplicativo ou site, isso não importa. Nove em cada dez vezes, o projeto real é super simplificado. Sem animações ou muito pequenas. E isso porque custa muito tempo e dinheiro. Muito poucas empresas podem realmente pagar por isso. E aqui está a coisa. Pegue seu telefone, veja as maiores empresas do mercado. Veja seus aplicativos, Netflix, Uber, Amazon, qualquer coisa. Por que eles não têm todas essas animações sofisticadas? Porque é uma distração. Então, poucas empresas realmente se beneficiam desse tipo de coisa. Então, neste capítulo, vou mostrar como criar protótipos, mas não vou perder seu tempo 99% dos seus clientes vão querer um protótipo funcional, não um superpolido , quando você passar meio dia fazendo algumas transições Esse não é o ponto. Vamos garantir que clientes reais se beneficiem de seu trabalho. Então, vamos entrar nisso. 3. Usar a prototipagem para encontrar erros e falhas: Bem-vindo de volta. A prototipagem é uma ótima maneira de encontrar erros, coisas que você esqueceu ou talvez o Agora, um tipo de falha é esse. Digamos que o usuário deixe de inserir seu endereço e simplesmente queira ver os restaurantes que estão dentro do aplicativo Ok, em um nível, isso faz sentido, certo? Ele quer dar uma olhada. Não vamos colocar nenhuma barreira para que o usuário possa explorar o aplicativo e, então, talvez ele tenha mais chances de se inscrever. Faz sentido, certo? se esse aplicativo funcionar em um país enorme como os Estados Unidos, de que adianta mostrar restaurantes que estão a milhares de quilômetros de distância? Portanto, isso é algo que o cliente deve considerar, e seu protótipo destacará essa falha potencial Não é seu trabalho mudar a forma como o aplicativo se comporta ou faz com que ele seja procurado Mas se você puder mostrar possíveis problemas, você será muito apreciado Agora, voltando a essas telas, fizemos um protótipo muito simples Podemos nos mover entre as guias. Mas o que acontece quando você pressiona esse botão? Nada acontece e isso não é o ideal. Então, no modo protótipo, vamos clicar no botão e, no lado direito, podemos ver essa parte aqui chamada interações Clique no símbolo de adição. Isso vai nos mostrar várias opções, mas estou procurando enquanto estou passando o mouse Então, vamos supor que este seja um site, não um aplicativo em que você normalmente não tem um estado de foco dentro do telefone celular, certo? Mas enquanto passamos o mouse, queremos que o botão mude para e tenhamos um estado No momento, está configurado como ativo, ok? É laranja, então faz sentido. O botão está disponível e você pode pressioná-lo, ok? Mas vamos mudar o estado para pairar e aqui está a coisa Só temos outro chamado deficiente. Isso não é bom. Então, estamos perdendo o estado de foco, e isso não é aceitável Isso é um erro da nossa parte. É exatamente assim que você deve aproveitar os protótipos É assim que você encontrará erros usando o modo protótipo. Acabamos de descobrir que estamos perdendo um estado, o estado flutuante Então, vamos voltar ao modo de design. Nossos ativos estão aqui, então não há necessidade de procurá-los. E aqui estão os dois botões, mas precisamos do terceiro. Então, clique nesse símbolo de adição e criaremos uma variante. Você verá que o nome já está destacado aqui. E em vez do estado três ou qualquer coisa aleatória, vamos escrever com o mouse E, claro, temos que mudar o design, mas vamos mantê-lo simples. Vamos desvincular a cor da ação e escolher um tom mais escuro de laranja, algo assim Ok, coisas boas. Agora, volte ao modo de prototipagem e agora podemos Então, selecione o botão e, em interações, queremos o seguinte. Ao passar o mouse, mude para passar o mouse. Quanto à animação, eu normalmente escolho a animação inteligente na maioria dos casos Ótimo. Agora vamos experimentar. E, claro, vai funcionar sem problemas. Isso é fantástico. Então, é assim que você verifica seus projetos antes de entregá-los. Isso não é o fim do mundo, esse erro. Mas se você somar cinco desses, dez , 20 desses erros , o desenvolvedor ficará chateado. Ele dirá ao cliente que o cliente não está apenas feliz, então ele enviará uma mensagem para você talvez em algumas semanas, talvez em alguns meses. Você provavelmente está ocupado com um projeto diferente. Então, como você pode imaginar, todo mundo está chateado. Então, por favor, não trabalhe dessa maneira. Se você criar um protótipo, poderá identificar rapidamente esses erros e corrigi-los em poucos minutos. Mas e os campos? Bem, primeiro, existe uma maneira de realmente ser capaz digitar algo dentro deles dentro de um protótipo, certo? Mas isso realmente ajuda? Não, de jeito nenhum. É por isso que não vamos fazer isso. Em vez disso, vamos pensar nesses estados. Então esse é o estado da dica. Meu nome não está realmente preenchido. Esse é apenas um exemplo, uma dica, uma maneira pela qual dizemos ao usuário o que deve ser digitado e de que forma Isso é muito útil no campo do número de telefone, por exemplo, onde, em meu país específico, você poderia escrevê-lo algumas maneiras diferentes. Então é assim que você pode escrever um número no meu país. Então, isso pode ser um pouco confuso, mas adicionando uma dica, é um texto auxiliar, certo? É fantástico. Agora, nessa situação, está claro que esse texto é apenas uma dica, um texto auxiliar que desaparecerá quando você realmente clicar nele Não, na verdade não. Está muito escuro. É por isso que devemos realmente mudá-lo para algo um pouco mais desbotado. Você pode até mesmo colocá-lo em itálico. O que importa é que isso deve ser visto como uma dica. Tem que ser claramente uma dica. Você pode até escrever EG ou dica e, em seguida, o nome real ou qualquer outra coisa É assim que você fala com o desenvolvedor por meio sua prototipagem, por meio de seu trabalho de design Agora precisamos de outro estado em que o texto seja realmente preenchido, onde o usuário realmente digitou algo, certo? E então, nesse caso , tem que ser muito diferente da dica. Estou falando de forma mais sombria, mais ousada, então não há confusão sobre Agora, estou seguindo os passos bem rápido , mas espero que você entenda o raciocínio Esse é o objetivo desta palestra. Você projeta algo e acha que está tudo bem. Mas quando você se aprofunda nele por meio de um protótipo, entende que não é bom o suficiente Então você tem que voltar e fazer todas essas mudanças. Os designers que realmente enviaram produtos conhecem todas essas situações e lidam com elas desde o início Mas se você não tem essa experiência, não é um problema, use o modo de prototipagem Em seguida, vá para todos os campos, todas as telas e veja se você esqueceu alguma coisa, porque esses pequenos detalhes podem não ser entendidos desde o início Mas quando você configura tudo dessa maneira , o problema é o seguinte. Os desenvolvedores vão adorar você, e há uma chance maior de você trabalhar mais com esse cliente, receber uma ótima avaliação ou ambas. Então, para concluir, meu conselho, não perca seu tempo tornando os campos editáveis, certo, digitando algo dentro do protótipo . Isso não ajuda. Mas certifique-se de incluir estados separados para os botões, para os campos da maioria dos seus elementos, ok? Você tem que se certificar de que tudo está claro como cristal. Se você quiser levar esse protótipo para 100%, você pode criar um estado em que o campo esteja desativado, que o botão esteja desativado, talvez o campo também esteja desativado Talvez algo mais precise acontecer antes que esse campo específico esteja disponível. Então é assim que você pode levar isso para o próximo nível. Agora, como você prototipa esses estados, seja por meio de cliques, seja por meio de estados de foco, da animação que você coloca, essas coisas realmente não importam Mais do que isso, você não precisa fazer isso para cada campo em um projeto de 100 telas. Em vez disso, você faz exatamente o que eu fiz aqui. Você trabalha no componente mestre. Então, no lado esquerdo está o campo original. Lá, tenho um estado padrão em que a dica aparece e outro estado que criamos juntos, que o usuário digitou algo e o texto fica em negrito e escuro Coisas boas. Agora, depois de ter esses estados, entre no modo protótipo e conecte um a três e três a um aqui do lado esquerdo, dos componentes principais originais Ok, basicamente agora, ao clicar neles, você poderá alternar entre os estados Ao trabalhar nos campos originais, todas as cópias do lado direito, todas elas seguirão o exemplo. Então, se o projeto tiver 500 campos, eles ainda agirão assim. Você não precisa vinculá-los manualmente . Isso faz sentido? Então, novamente, criando uma interação no componente original e usando cópias em todo o projeto, com tudo pronto de uma vez, tudo funcionará em todo o processo. E caso você esteja curioso, o que está acontecendo com esse outro estado? Essa é uma opção que fiz caso o fundo seja branco e a etiqueta precise ser preta. Você pode ignorá-lo. Isso não é importante. Então é assim que você realmente prepara um projeto para codificação, para desenvolvimento Ok, agora, vá em frente e resolva esses problemas sozinho. E quando estiver pronto, continue. Muito obrigado. 4. Sobreposições em seus protótipos (pop-ups): Bem-vindo de volta. Os pop-ups são uma ótima maneira de transmitir o significado de mostrar muitas informações em apenas uma tela Isso é útil para todos, o cliente, para o desenvolvedor, mas, é claro, para o usuário final também. O usuário final significa simplesmente o cliente do cliente. Então, as pessoas reais que usarão o aplicativo ou site. Então, veja como isso funciona. Percebi que não tínhamos uma tela pop-up, que às vezes é chamada de modelo. Então, aqui está a coisa. Eu fiz um rapidamente, certo? Então, depois de criar uma conta, quero que o usuário faça login automaticamente Então, no modo protótipo, vamos arrastar uma seta desse botão para esse quadro A diferença é que, ao clicar, não usaremos o Navigate two. Não, em vez disso, vamos usar a sobreposição aberta. Agora, para a animação, vamos usar o move in, embora isso realmente não importe. Agora, por enquanto, vamos testá-lo desse jeito. Então clique no protótipo do Play e vamos vê-lo em ação Agora, eu quero que você note o fundo vermelho não cobre a tela inicial, e isso porque o pop-up é na verdade, bem mais curto do que todas as outras telas. O quadro em si é menor. Então, vamos ver o que está acontecendo. Gosto de usar o Control W para fechar meus protótipos e voltar rapidamente ao projeto Para ajustar qualquer tipo de conexão, basta clicar aqui e você obterá as mesmas configurações de antes. Agora, o problema é o seguinte. Desta vez, vamos adicionar um fundo, algo como azul ou qualquer outra cor marcante. Agora vamos clicar em Play e você verá que isso funciona, mas aqui está o problema. Só funciona na parte superior e inferior. O fundo vermelho ainda permanece. Agora, a conclusão é esta: para pop-ups para modais, não adicione um toque Então, vamos voltar ao modo de design e podemos ocultá-lo ou removê-lo completamente Ok, ótimo. Agora, uma dica. Se apertarmos o botão play aqui, o protótipo nos mostrará o modelo, não a tela inicial Por quê? Porque isso está selecionado. Observe a borda azul. Então, como você pode ver, quando eu pressiono lay, isso não é realmente útil. Portanto, lembre-se sempre de desmarcar e clicar em OK. Ok, vamos ver nosso fundo azul. E sim, funciona muito bem. Agora, a posição do pop-up é irrelevante na maioria das situações, mas eu quero mostrar uma faixa de UX Agora, no pop-up de configurações, podemos mudar a posição do centro para praticamente qualquer outra coisa. Agora, a lista é bem grande. Você pode examiná-los rapidamente e verá que é bem simples Nada muito sofisticado, mas às vezes pode ajudar. Agora, o truque real, o truque da UX, é esse. Mude a posição para manual. Agora você obterá uma sobreposição na tela e poderá reposicioná-la em um local muito preciso Agora, nessa situação, quero que o botão continuar esteja bem próximo ao botão original da Conta Creighton. E por que isso? Como o usuário já tem o dedo ou o cursor nessa região mantendo o foco naquele ponto específico, o aplicativo flui bem Em termos complicados, isso reduz a carga cognitiva. Você não hesita. Você sabe que, se vir laranja, pode clicar nela e que maioria das ações está disponível na parte inferior da tela. E se você permanecer consistente em todo o aplicativo com todas essas coisas, todos ficarão muito mais felizes Agora, os usuários podem não perceber por que o aplicativo parece bom, mas esse é um dos grandes motivos para isso. Ok, sinta-se à vontade para testá-lo e estaremos prontos para começar. A próxima coisa sobre a qual quero conversar é sobre roupas ao clicar do lado de fora. Agora, em certos casos, isso faz maravilhas. Você quer que as pessoas possam navegar rapidamente pelo seu protótipo, certo? Portanto, não os force a clicar em pequenos ícones ou botões porque isso parece cansativo. Certo? Agora, eu sei disso com certeza: ao contratar pessoas, os designers criavam protótipos que não poderiam avançar a menos que eu marcasse uma pequena caixa Agora, essa fração não é ideal, especialmente quando você vê muitas e muitas telas, certo? Então, por favor, não bloqueie seus protótipos. Não force o usuário a fazer certas coisas. Agora, voltando aqui, habilitar esse recurso não faz sentido nesse caso. Você cria uma conta e recebe uma mensagem de sucesso. Se você simplesmente fechá-lo clicando em algum lugar aleatório na parte de trás, você voltará para a tela de registro. Então isso seria um loop. Então isso não é bom. Nesse caso, não o use. Em outras situações, mais tarde em outras aulas, opte por isso, pois isso torna a experiência de navegação mais rápida. Então, vamos recapitular Portanto, ao criar pop-ups, modais, você pode manter o tamanho da moldura bem pequeno, mas não adicionar um preenchimento. Não adicione um plano de fundo. Você pode manter o modelo centralizado, mas também pode posicioná-lo manualmente para uma experiência mais rápida E por falar em velocidade, normalmente use a opção de fechar ao clicar do lado de fora para que as pessoas possam navegar rapidamente pelo seu projeto. Mas faça isso somente em situações em que faça sentido. Aqui, esse não é o caso. Ok, vamos continuar. 5. Cronômetros em protótipos: Bem-vindo de volta. Gosto de ensinar os clássicos em termos de técnicas de prototipagem que são realmente úteis em praticamente qualquer ambiente, mas não exigem muitas habilidades Os temporizadores são uma dessas coisas. Então, acabamos de criar uma conta, certo, e recebemos esse pop-up. Agora, a questão é: precisamos 100% clicar nesse botão para poder continuar e não. A resposta é não. Menos cliques significam clientes mais satisfeitos, clientes mais satisfeitos. Temos que mostrar uma mensagem de sucesso para informar ao usuário que algo aconteceu, com certeza, mas não queremos causar atrito. Queremos que o usuário faça um pedido o mais rápido possível. Menos cliques, clientes mais satisfeitos. Então, temos que fazer isso. Vinculamos o botão Continuar à próxima tela dessa forma. O básico, nada muito complicado. Agora, na seção de interação, vamos adicionar outra. Desta vez, usaremos o delay. Então, o primeiro está no clique, depois o outro é o atraso porque, sim, você pode empilhá-los. Você pode ter vários. E é assim. Depois de um tempo de, digamos, 2000 milissegundos, que é 2 segundos, navegaremos até o quadro X, este aqui Então, vamos experimentar. Então, ao criar uma conta, apertamos o botão e agora vemos o pop-up. Se estivermos com pressa, podemos clicar no botão ou simplesmente esperar 2 segundos. Então isso é incrível. Essa é uma ótima experiência. Se você quiser um mais rápido, pode reduzi-lo para 1.500 milissegundos Mas o problema é o seguinte. Não mostre coisas e as leve embora. Eu seria cauteloso com isso. Algumas pessoas podem começar a ler o texto e, se você ocultá-lo mostrando uma nova tela, isso pode incomodar algumas pessoas Este é o complicado jogo de equilíbrio entre, você sabe, velocidade versus dar aos usuários controle total e, basicamente, desacelerar tudo. Normalmente, quando você desacelera as coisas, a receita diminui. Agora, o que eu sugiro é que você tenha uma interface de usuário incrível. Se o design estiver correto, se a tipografia for ótima, você se sairá muito melhor Por exemplo, texto curto e agradável, então redação, isso é correto. Você está logado e, em seguida, uma marca de seleção verde, que faz maravilhas Então, a ideia é guiar o usuário inconscientemente. Ele vê uma marca de verificação verde, ele sabe que está bem. Ele vê que está logado, estamos prontos para ir. Agora, o texto secundário na verdade, nem importa nesse momento. Ok, agora é hora de um exercício. Quero que você recrie o seguinte efeito. Essa é uma contagem regressiva depois de criar uma conta. Comece um novo projeto e veja como você pode gerenciar. Você não tem nada anexado. Você tem que fazer isso do zero. Comece com um quadro de 720 por 12.80, mas, para ser honesto, isso realmente não importa Faça o possível para refazer algo assim. Não precisa ser perfeito, então não há pressão. Apenas se divirta com isso. E quando terminar, compartilhe o link do protótipo assim Clique aqui e agora você está procurando essa opção. Se você não conseguir, não se preocupe, você pode gravar o vídeo com seu telefone e publicá-lo. Quais métodos você experimenta com esse recurso de atraso com esse cronômetro. Este é o único exercício em que vamos nos divertir com durações, curvas e outros enfeites Mas, sim, no resto do tempo, vamos nos concentrar em funcionalidades e coisas que são realmente úteis. Isso é só para se divertir, para nos divertirmos. Ok, vamos em frente. 6. Rolando nos protótipos: Bem vindo de volta. Vamos falar sobre rolagem em nossos protótipos Isso é para fins de UX, mas os clientes geralmente apreciam esses detalhes. Digamos que estamos nessa tela e queremos rolar para baixo e ver mais entradas. Então vá para o modo protótipo, e aqui, temos o comportamento de rolagem Mude isso de sem rolagem para vertical, e isso obviamente faz sentido Clique no ícone play e dê uma olhada. Agora, funcionalmente, isso faz sentido. Mas aqui está uma UX. Ter o menu superior visível o tempo todo realmente ajuda os usuários. Então, podemos fazer isso. Selecione a barra da Verizon e dê uma olhada aqui. Em vez de rolar com o pai, altere-o para fixo. Em seguida, faça o mesmo com a barra de ação, onde você pode realmente selecionar a cidade. Portanto, defina isso como corrigido também. Ok, incrível. Agora, vamos experimentá-lo. Eles realmente mantêm sua posição, então o usuário sempre pode usar o recurso de pesquisa, o sistema de filtro, abrir a navegação e assim por diante, isso é útil. Mas, para ser justo, o bar da Verizon realmente não se sustenta . Então, vamos mudar isso de volta. Então, em vez de ser corrigido, vamos alterá-lo novamente para rolar com o pai. Ok, agora, vamos ver como isso se parece. E o fato é que, sim, não está mais corrigido, mas agora temos essa lacuna feia aqui acima de São Francisco Mas é aí que a outra opção realmente nos ajuda. Então feche o protótipo, selecione a barra de ação e altere-a para adesiva, que soa semelhante a fixo, mas se você continuar lendo, diz: pare na borda superior Agora vamos dar uma olhada nisso. E sim, é isso que estamos procurando. Isso é perfeito. Então, faça uma pausa agora e experimente. Ok, quando estiver pronto, vamos mudar para um site, no modo Desktop. Novamente, primeiro, selecionamos o quadro grande e colocamos a rolagem na vertical. Em seguida, vamos selecionar o logotipo e alterá-lo para fixo. Ok, coisas divertidas, a barra do logotipo, é claro. Em seguida, faça o mesmo com o quadro do menu principal. Essa é a abordagem mais básica, mas experimente e certifique-se de obtê-la. E, claro, ter os mesmos problemas de antes, ter o logotipo sempre exibido com os ícones de mídia social, isso não faz muito sentido. Não é tão útil, você sabe, então estamos descartando conteúdo valioso, isso não é bom Então, vamos voltar para que ele role. E para o menu principal, faça com que ele pare na borda. E, no geral, sim, essa é uma experiência muito melhor. Isso é coisa de UX, experiência do usuário. Agora, vamos mudar para a rolagem horizontal, que vai nos ajudar a entender algo Então comece com uma moldura aleatória, algo assim, branco puro, retrato, nada extravagante, ok? Agora, vamos adicionar um retângulo aleatório como tecla de atalho R. Você poderia usar qualquer outra coisa. Realmente não faz diferença. Estou mantendo as coisas o mais simples possível. Agora vamos usar a tecla Shift A. Ok, mude-a para abraçar a partir da área de redimensionamento no lado direito E porque estamos aqui, vamos mudar o fluxo. Estamos procurando por esse aqui. Ok, horizontal. Ótimo material. Agora, vamos selecionar o retângulo em si. Ok, então aperte o retângulo e pressione Control D várias vezes para que tenhamos cópias suficientes Faça o suficiente para que eles saiam da moldura, assim. Agora, esse seria um caso perfeito para uma rolagem horizontal, certo? Então, vamos mudar para o modo de protótipo e selecionar o quadro de layout automático Esse aqui. Então, não o grande, mas esse que contém os retângulos, ok? E a partir daqui, altere o transbordamento para horizontal. E você pode esperar que este seja um negócio fechado, certo? Mas não, se clicarmos em lay, o que você verá é que não funciona. E por que isso? Bem, esse ícone nos mostra a situação. Diz que o conteúdo precisa ser maior que o quadro. Então, isso significa o seguinte. Volte para o modo de design. Isso é essencial. Você não pode pular isso. E agora redimensione o quadro para algo assim. Então, sobre a largura da tela. Agora você pode clicar em Play e pronto. Funciona muito bem. Então, para recapitular, o conteúdo pode sair da moldura, mas a moldura em si precisa ficar dentro da tela Essa é a chave. Essa fronteira nos diz a maneira certa de fazer isso. Ok, vamos voltar ao site para desktop e tentar novamente. Então, vamos pegar os três primeiros itens, essa linha inteira, e agora usar o Shift A. Vamos fazer isso devagar e devagar. Em seguida, selecione um cartão e faça várias cópias. Portanto, isso exigiria rolagem. Bom trabalho. Coisas boas. Agora, selecione o quadro de layout automático e, no modo de protótipo, altere o estouro Se você clicar em play agora, não funcionará. Vá em frente e experimente. Isso não está acontecendo, certo? Não é bom. Agora volte para o modo de design e redimensione a moldura dessa forma Está bem? Então, está dentro da tela real. Faça uma pausa quantas vezes precisar para poder trabalhar junto. Ok, agora você pode clicar em Play. E aí está. Isso é um progresso sólido. É assim que você faz a rolagem. Obviamente, isso também se aplica à rolagem vertical. Agora, para o seu exercício, eu quero que você faça isso. Quero que você use essa tela e faça uma rolagem horizontal para os endereços que estão disponíveis. Então, adicione três ou quatro, um pouco mais, e adicione um pergaminho horizontal. Se você não conseguir, use minha abordagem retangular Então, uma tela totalmente nova e , em seguida, refaça meus passos. Em seguida, volte para a tela de meus endereços e experimente novamente. O problema é o seguinte. Nessa situação, talvez seja necessário alterar algumas coisas para cada cartão. Você pode alterar a largura. Você pode alterar o método de redimensionamento. Você pode mudar muitas coisas. Então, vou deixar isso para você. A ideia é que você tenha total liberdade. Quando terminar, faça o mesmo com a rolagem vertical Então, novamente, imagine que você tem cinco ou seis, talvez sete endereços no total na vertical, e você precisa rolar Lembre-se do que eu te ensinei sobre a coisa horizontal , porque ela também se aplica verticalmente Divirta-se e faça as duas coisas. Horizontal e vertical. Obrigada 7. Crie protótipos mais inteligentes com este método: Bem-vindo de volta. Protótipos são úteis e projetos maiores com fluxos podem ser bastante complicados, mas projetos maiores podem ser difíceis de prototipar devido ao grande número de telas Felizmente, podemos trabalhar de uma forma mais inteligente. Ao vincular telas, sabemos que selecionamos um item e arrastamos uma conexão dessa forma, certo? Para se registrar e fazer login, isso é muito fácil. Eles estão próximos um do outro, e isso faz sentido, certo? Mas como gerenciamos a seta para trás? Para onde devemos vinculá-lo? O fato é que isso pode ser bastante complicado porque você pode chegar em uma tela de vários locais. Então, como você sabe para onde enviar o usuário de volta? Mas o problema é o seguinte. Felizmente, há um recurso integrado no Figma Então você seleciona a instância dessa forma, não a seta, mas a instância. Em seguida, você adiciona uma interação ao clicar em Voltar. E é isso. Figma sabe de onde você veio e está tudo pronto, automaticamente nada mais a fazer Agora, outra dica rápida. Dentro do grande protótipo, você sempre pode reiniciá-lo pressionando R. Isso o levará ao início do fluxo Mas como você define o ponto de partida? Como você define o ponto de partida do fluxo? Então você seleciona o quadro. No meu caso, é esse aqui e depois o modo protótipo Neste painel, você verá o ponto de partida do fluxo. E é isso. Agora, quando você joga um protótipo, mas desceu demais e não tem certeza do que está acontecendo, basta pressionar R e você basta pressionar R e você será levado de volta à tela original Além disso, você sempre pode configurar fluxos para diferentes situações. Novo cliente versus cliente recorrente, só como exemplo. Mas vamos nos concentrar na seta para trás mais uma vez. Temos muitas flechas traseiras aqui. Aplicamos manualmente a mesma ação em cada tela, uma por uma, ou copiamos e colamos? Não, você pode realmente se concentrar no componente principal aqui ao lado. Defina este com esse comportamento, e esse é o problema. Estamos prontos para o rock and roll. Então você aplica essa interação no mestre do componente, e todos esses caras são clones de cópias Por causa disso, eles seguirão o exemplo. Então, novamente, como esse design foi feito com instâncias com clones desse componente original, isso instâncias com clones desse componente original, significa que eles funcionarão conforme o esperado Assim, você pode definir determinadas ações por meio desses recursos. Por exemplo, vamos adicionar um link para o logotipo. Está bem? Então, selecione-o e defina o seguinte. Ao clicar, abra um link. Vou colocar meu site, mas, obviamente, isso não importa. Isso é útil caso desejemos mostrar ao cliente ou ao desenvolvedor uma página específica que talvez já esteja ativa. Talvez seja um painel de administração ou talvez um determinado subdomínio oculto do público E sim, funciona exatamente assim. Uma última coisa. Vamos fazer o menu lateral funcionar. Portanto, isso deve ajudar todas as partes interessadas. Em primeiro lugar, identifique essa moldura. Ok, parece que é esse aqui. Observe que a largura é a mesma das outras telas. Isso não é o ideal. Então, vamos corrigir isso rapidamente. Então, vou reduzir a largura de 720 para, digamos, 640 ou algo parecido O logotipo pode se mover, mas isso é uma solução fácil. Quero mostrar que esse é um menu lateral, não uma tela completamente diferente. Portanto, é importante que vejamos algo por baixo dela. Certo. Esse é o quadro que devemos ter em mente. Agora, vamos voltar ao componente original. Se você está acompanhando meus cursos, sabe que eu recomendo que você tenha todos os seus ativos em uma estrutura separada, assim, ao lado. Ok, adicione a conexão, mas não há necessidade de arrastar uma linha porque sabemos o nome. Sabemos o nome dessa moldura. Então, vamos fazer isso. Abra a sobreposição e agora esta é a moldura que estamos procurando Posição, vamos para o canto superior esquerdo, e queremos essas duas caixas marcadas. Quanto à animação, sim, entre. É aqui que faz todo o sentido. E vamos definir essa direção. Ok, incrível. Vamos testá-lo. Lembre-se de que, quando quiser iniciar seu protótipo a partir de uma tela específica, basta selecionar a moldura e pronto Ok, sim, isso é incrível. Talvez o With seja um pouco demais. Talvez 580 ou algo assim, nada ware funcionaria um pouco melhor, mas tudo bem Isso transmite o ponto. Mas, sim, estamos prontos para ir. Vá em frente e experimente. Então, por favor, continue. 8. criando um menu suspenso interativo: Bem vindo de volta. Vamos fazer uma lista suspensa interativa usando tudo o que aprendemos até agora. Mas lembre-se de que, ao voltar ao básico, estamos nos concentrando na funcionalidade ajudar o cliente e o programador a descobrir coisas, não em tornar o design 100% totalmente Agora, aqui está a informação. Então, quando você clica em San Francisco, você recebe uma lista de CDs que estão disponíveis dentro do aplicativo, ok? Então, vamos começar com o seguinte. Digite dois, tecla de atalho T e escreva algo como o nome da cidade. Vamos manter as coisas simples. Mude o texto para preto ou algo parecido e, em seguida, adicione todo o layout com o Shift A, os clássicos estão indo bem rápido aqui Para as configurações, não diga semi negrito, 28, o que for. E quanto ao preenchimento, vamos com 60 e depois dez Estou correndo porque quero que você se concentre no protótipo real, não no lado do design Mas é claro que é melhor seguir o estilo que já configuramos no aplicativo, então siga a mesma linguagem de design. Uma borda preta simples também pode funcionar bem para essa lista suspensa Mais uma vez, estou ampliando. Ok, agora vamos transformá-lo em um componente assim. Coisas boas. E para torná-lo um pouco mais útil, incluiremos um estado de foco e, em seguida, um estado selecionado Está bem? Agora, a melhor maneira de fazer isso, rápida e rápida, é por meio da variação. Então, adicione o primeiro clicando aqui e chame-o de passar o mouse ou algo semelhante Está bem? Ótimo material. E então adicione outro, então temos três no total. Desta vez, chame-o de selecionado ou inativo ou o que você quiser. Agora, para um design muito rápido, o estado Hover deve ter uma cor de fundo ligeiramente diferente Vou escolher qualquer coisa aleatoriamente, mas você deve seguir o estilo do projeto. E para o estado selecionado, novamente, aqui está algo rápido, agradável e rápido. Vamos usar laranja com talvez um texto em branco puro. Está bem? Se você quiser aprender a criar figma, é claro, tenho outros capítulos sobre isso Tudo isso tem a ver com prototipagem. Ok, ótimo. Agora, vamos fazer o menu suspenso real. Então arraste uma cópia Alt e arraste. Essa é a opção de arrastar em um Mac. E vamos adicionar um layout automático Shift A, mas teremos que remover todo o preenchimento Então é zero e depois zero. Mas o problema é o seguinte: a diferença também será zero. Então, três zeros no total. A propósito, na seção de fluxo, verifique se você selecionou esta opção. Vamos escolher a vertical. Ok. Agora, vamos selecionar a instância. Esse aqui, ok? Faça uma pausa quantas vezes você precisar. Use o Controle D várias vezes. Portanto, temos quatro ou cinco opções no total. Agora, você pode ver uma boa mensagem útil aqui da Figma. O programa quer nos ajudar a fazer com que o aplicativo pareça real. Por isso, está nos oferecendo a opção de obter automaticamente alguns nomes de cidades, o que é muito legal, então vamos usá-lo. Ok, até agora, sem prototipagem. Isso era apenas um material de design que você talvez já conheça. Mas agora vamos mudar para o modo protótipo. Então arraste uma linha do primeiro botão para o segundo. Eles estão bem próximos, mas tudo bem. Para o gatilho, continue com o mouse enquanto passa o mouse e depois mude para o Quanto à animação, a animação inteligente é perfeita. E isso está feito. Agora, a partir do segundo botão, arraste uma linha até a terceira. Nada complicado ao clicar, mude para selecionado. E, finalmente, vincule o terceiro ao primeiro e você verá que as opções já estão configuradas corretamente. Isso é uma coisa incrível. Então, vamos testá-lo, mas completamente isolado. Então, selecione esse quadro aqui. Portanto, é o quadro que contém todas essas instâncias. Agora aperte o botão Play. Então, vamos dar uma olhada. Ok, então o estado de flutuação funciona muito bem Está bem? Que tal clicar? Sim, isso também é sólido. Parabéns. Concluímos a primeira etapa. Agora, volte para o projeto, San Francisco. Para ser justo, o menu de hambúrguer deve ser separado desse item, mas vamos nos concentrar no nome da cidade e na seta suspensa Então, vamos vincular esses dois ao menu da seguinte forma. E para as configurações, queremos que o gatilho esteja ao clicar, embora o mouse também possa funcionar da mesma forma E para a ação, queremos uma sobreposição aberta. É aqui que esse recurso faz todo o sentido. Feche ao clicar do lado de fora. Isso é incrível, útil aqui. Sem plano de fundo, mas queremos uma posição personalizada. Então clique e mude para manual. Agora, às vezes você pode não ver a prévia, mas pressione Escape ou feche a janela , clique na conexão e poderá vê-la. Ok, coloque o menu suspenso em algum lugar abaixo do nome da cidade, escreva uma linha, se possível. Coisas boas, sim. Ok, estamos prontos para o rock and roll. Então clique nesta tela específica aqui, e vamos jogar o protótipo Sim. Ok, estou muito feliz com isso. Então, voltando ao que eu comecei esta lição. Também devemos fazer de um estado uma situação em que São Francisco mude para outra coisa, Nova York ou com base no que o usuário seleciona E então devemos alterar a lista de restaurantes para cada opção nesta lista suspensa para torná-la 100% Então é aqui que os designers enlouquecem e passam muitas horas sem um bom motivo. Lembre-se de que criamos essa lista suspensa para que a equipe de desenvolvimento possa ver o estado de foco, o estado de inatividade Eles podem ver que não há campo de entrada, não há campo de texto em que o usuário possa digitar algo e assim por diante. Basicamente, isso os ajuda a definir o escopo do projeto. E, claro, talvez o cliente dê uma olhada e esclareça as coisas, certo? Talvez essa seja apenas a lista recente de citações que o usuário realmente usou anteriormente Talvez seja apenas aqui que o aplicativo esteja realmente funcionando. Mas se forem 100 cidades, essa redução faz sentido? Claro que não? Então, como você pode ver, todos esses detalhes estão fora do nosso nível salarial. Esse não é o nosso trabalho, certo? Nós não tomamos essas decisões. Mas por meio desse protótipo, podemos levantar uma bandeira Podemos dar às partes interessadas a oportunidade de discutir e decidir a direção do aplicativo. Então, podemos voltar e implementar essas instruções. Do jeito que está, na verdade não sabemos, então fizemos o nosso melhor. Se a empresa planeja morar em 100 cidades, uma lista suspensa não faria sentido. Provavelmente, precisa ser um campo na parte superior, onde o usuário possa digitar algo, além de talvez uma lista de cidades recentes ou talvez uma lista classificada em além de talvez uma lista de cidades recentes ou ordem alfabética ou porque, por exemplo, talvez esteja limitada a Então, novamente, não faz sentido mostrar uma lista suspensa, talvez apenas mostrar o endereço atual do usuário. É por isso que trabalhar nesses tipos de projetos exige muita comunicação. Mas todos esses esforços e reuniões exigem absolutamente um protótipo Se você não precisa ver isso para usar, não tem certeza se está na mesma página. Ok, agora é sua vez. Vá em frente e faça essa lista. Divirta-se com isso. 9. Exercício final — crie um protótipo completo: Bem-vindo de volta. Agora você sabe como criar um protótipo interativo por um motivo específico para ajudar o cliente e sua equipe de programação Você não está criando protótipos para curtidas. Você não está tornando absolutamente todos os itens clicáveis. Não, isso seria uma perda de tempo. Agora, em vez disso, você está criando protótipos para encontrar erros, tanto telas que você perdeu erros lógicos ou de fluxo que o cliente precisa esclarecer Agora, há muitas outras coisas que eu poderia te mostrar? Por exemplo, como alterar o estado de uma caixa de seleção, como usar variáveis, como fazer com que o protótipo pareça ainda mais Claro, é claro, mas eu quero prepará-lo para projetos do mundo real, e essas são as habilidades que você vai usar 90% do tempo, o que eu ensinei, então, dito isso, esta é sua lição Você tem esse arquivo anexado, importe-o. Em seguida, comece a prototipagem Sempre que você encontrar um erro ou uma tela ausente, vincule esse item a uma sobreposição que diga: Está faltando Você vai ter que criar isso sozinho, essa sobreposição Agora, onde isso se aplicaria? Por exemplo, esqueci a senha, não temos uma tela para isso Agora, por que isso é importante? Talvez ele nos peça um e-mail, mas talvez peça o nome de usuário e um e-mail. Talvez e-mail e telefone. Você não tem ideia de como o cliente abordará sua segurança. Então isso pode ser uma vulnerabilidade. Então, na verdade, é muito importante. Mas como não está aqui, temos que mostrar esse erro Então, vincule-a a uma nova moldura que você vai criar, configure-a para sobrepor e defina-a para que ela feche quando você clicar Ao final deste exercício, você deve ter um ótimo protótipo e compartilhar o link na plataforma para obter feedback Idealmente, você também pode ver o que outros alunos fizeram e ver seus erros. Não se trata de fazer ninguém se sentir mal. Trata-se de entender como o cliente e seus programadores examinarão seu trabalho, como verificarão tudo e identificarão os e Em minha carreira como professora, isso é algo que eu ouvi 1 milhão de vezes. Ah, Chris, eu acabei de esquecer isso. Claro, mas como designer, você tem que ser minucioso. Não tornar o protótipo 100% realista é totalmente normal. Sem saber que estão faltando telas essenciais, isso não é bom. Então vá em frente, comece e divirta-se com isso. Espero que você use essas habilidades de prototipagem em todos os seus projetos para poder aprimorar seus protótipos e trabalhar mais Agora, lembre-se, você tem que se divertir com isso. Se precisar de ajuda com alguma coisa, basta perguntar. Estou aqui para ajudar. Aqui é Chris Barron saindo no momento. Aproveite.