O usuário flui para design de IU / usuário no Adobe Xd

1. Apresentação do curso: Fluxos de usuário de fluxogramas são parte realmente importante do processo de design porque dentro de fluxos de usuário, você vai definir como seus usuários vão se mover através de seu aplicativo ou site e quais são alguns passos que estão indo para tomar a fim de alcançar as metas que você ou seus clientes definiram, você pode definir uma parte dentro de seu aplicativo ou site que seus usuários vão tomar. Ou você pode definir vários caminhos que vários usuários tomarão ao mesmo tempo. E fazendo isso, você vai determinar o número de telas ou páginas que você vai precisar em seu projeto e quanto tempo você realmente vai usar e precisa para concluir este projeto. Ei designer, meu nome é Alex e nesta aula de Skillshare, vamos falar sobre fluxos de usuários, por que eles são importantes, como criá-los usando o Adobe XD. Quais são algumas diferenças entre diferentes fluxos de usuário e como usá-los em seus projetos. Eu sou um criador de produtos digitais e até agora eu criei ou um 500 produtos de design. Eu também sou um criador de cursos e até agora eu criei ou 30 cursos diferentes com mais de 50 mil alunos matriculados dentro. Nesta classe, vamos discutir o que o nosso usuário flui, diferentes tipos de fluxos de usuário. Quando eles são usados? Criar fluxos de tarefas usando o Adobe XD, trabalhar com fluxos de fio no Adobe XD e como usar diferentes modelos mais complexos. E, finalmente, como compartilhar seus fluxos com seus clientes e desenvolvedores. Seu projeto de classe para esta classe é criar um fluxo de tarefas usando o modelo que eu forneci. Basta abrir o modelo no Adobe XD ajustado quiser n basta carregar essa imagem para nossos projetos de classe. Mal posso esperar para ver o que vocês podem criar. Usando fluxos de usuário, você vai determinar a quantidade total de telas ou páginas que são necessárias para este projeto específico. E você também vai criar rotas ideais para seus usuários que eles podem tomar. Além disso, o que você pode fazer é melhorar a aparência da conversão, pois você vai otimizar a experiência dos usuários antes realmente chegar aos estágios de design do seu projeto. Você pode usá-los com novos produtos para definir seus caminhos que seus usuários vão seguir. Ou você pode usá-los com produtos existentes para refinar esses bads e criar gorduras ideais. Então eu realmente estou ansioso para vê-lo na sala de aula e vamos criar alguns fluxos de usuário. 2. O que são fluxos de usuários: Fluxos de usuário, todos os fluxogramas como às vezes são chamados de nossas partes. Seus usuários apostam ao usar um produto, eles exibem uma parte completa que seu usuário leva do ponto de entrada, certo, todo o caminho até o ponto final quando eles terminam sua jornada. Existem muitas partes diferentes que seus usuários podem tomar dependendo de como eles chegaram ao seu produto. Por exemplo, se esse site ou uma página de destino ou algo assim, talvez eles tenham chegado a essa página de destino quando clicaram dentro do link em seu e-mail ou se for a página da Shoppe pode ser uma página de produto ou algo assim, talvez eles tenham visitando nossa campanha que você teve no Facebook ou Instagram ou algo assim. Talvez eles clicaram em um link dentro de um vídeo do YouTube e coragem para a página da loja. Ou se for um aplicativo, talvez eles tenham instalado esse aplicativo usando um link ou download direto de uma loja. E então quando eles instalaram naquele aplicativo, e talvez eles o abriram e chegaram à tela inicial. Assim, os fluxos de usuários têm o nosso simples trabalho de direcionar todos esses caminhos de tal forma que seja lógico para seus usuários e super fácil de entender e otimizá-los de tal forma que eles tenham o menor número possível de cliques para alcançar esses dependendo de quem é seu cliente e do que seu produto está tentando fazer. Esses objetivos podem ser comprar um produto, reservar um serviço, baixar, um brinde, assinar um boletim informativo por e-mail e muito mais. Portanto, seu objetivo como designer usando esses fluxos de usuário é criar esses fluxos ideais e caminhos ideais que seus usuários podem tomar para realizar essas tarefas de forma que seja simples quanto possível para eles entenderem e tão rapidamente quanto possível que eles resolvam as entranhas N2 para seu objetivo final, o objetivo de seus clientes é aumentar a conversão, por exemplo. Então, usando esses fluxos de usuário, você vai chegar um passo mais perto dessa conversão melhorada, reduzindo o número de cliques, por exemplo, que seus usuários têm que tomar para atingir esses objetivos. Usando fluxos de usuário, você vai determinar a quantidade total de telas ou páginas que você vai precisar nesta fase do projeto. E isso, por sua vez, vai poupar muito tempo mais tarde, quando você realmente chegar às fases de design do seu projeto, porque ele vai melhorar sua compreensão deste projeto ou papel. E, portanto, ele vai acelerar você ainda mais nesta fase do projeto, você pode até mesmo deixar os desenvolvedores saber o que está acontecendo. E você pode até mostrá-los e esses fluxogramas, e nós vamos falar sobre isso nos estágios posteriores desta aula. Mas esse é o objetivo deste processo, é entender que este projeto é muito melhor do que começar com o design porque essa é uma abordagem realmente errada. Porque você realmente precisa começar com esses fluxos de usuário , a fim de entender quantas telas, quantas páginas você vai precisar mais tarde quando você chegar a essa parte de design do seu projeto. No próximo vídeo, vamos discutir quais são alguns tipos diferentes desses fluxos de usuários e como eles são usados. Então, vemo-nos lá. 3. Diferentes tipos de fluxo de usuários: Existem muitos tipos diferentes de fluxos de usuário, dependendo do que você está tentando resolver em seu projeto e do que você está tentando realizar. Mas, basicamente, existem três tipos principais que são usados em geral. E então, a partir desses três tipos principais, há muitos tipos diferentes que você vai encontrar durante sua carreira de design. E esses são fluxos de tarefas via fluxos e fluxos de usuário. Fluxos de mesa são o que o nome sugere e eles estão mostrando como o usuário interage com uma determinada tarefa clicando no mesmo ponto de entrada para chegar ao mesmo ponto de entrada e ao mesmo ponto final, todos os seus usuários vão fazer o mesmo viagem. E, portanto, esta jornada vai mostrar uma tarefa simples. Por exemplo, inscrever-se no nosso boletim informativo por e-mail ou comprar o produto, ou reservar um serviço com você ou algo parecido. Todos esses usuários têm que concluir a mesma tarefa. Essa tarefa tem muitas etapas diferentes, dependendo de quão complexa a tarefa é. E, portanto, esses fluxos de tarefas são usados para isso. Eles não são usados para outras coisas complexas. Por exemplo, diferentes pontos de entrada, diferentes pontos de saída. Mas todo o ponto dos fluxos de tarefas é focar em uma única tarefa e otimizar essa parte do usuário de tal forma que eles tenham o mínimo de passos possível para concluir essa tarefa, então nós temos fluxos de fio. E esses fluxos de trabalho são realmente uma combinação desses fluxos de tarefas e wireframes básicos, e é por isso que eles são chamados de fluxos de fio. E o objetivo deles é mostrar diferentes jornadas de usuários ao longo seu produto e diferentes pontos de entrada em diferentes pontos de saída. No entanto, eles não são muitos detalhes dentro. Eles só estão lá para mostrar todas essas partes diferentes que seus usuários podem tomar. Portanto, o objetivo aqui não é ficar muito detalhado, mas mostrar aos seus clientes, aos seus companheiros de equipe e aos desenvolvedores também. Muitas partes diferentes que seus usuários podem tomar. Mas usar pelo menos alguns detalhes para mostrar como essas telas ou páginas podem se parecer. E, em seguida, usar setas, por exemplo, apenas para mostrar quais são algumas partes diferentes que seus usuários podem tomar. E então, finalmente, temos fluxos de usuários próprios. Eles são realmente combinação de fluxos de tarefas e fluxos de fio. E os fluxos de usuário realmente mostram todos os fluxos diferentes que seus usuários podem tomar, todas as partes diferentes que eles podem tomar. E eles são realmente uma combinação de fluxos de tarefas e através de fluxos. O que quero dizer com isso é que eles são uma combinação desses dois elementos. E vou mostrar-vos isso nas fases posteriores desta aula. E basicamente eles estão mostrando tudo. Eles estão mostrando cada ponto de entrada, eles estão mostrando cada ponto de saída. Eles estão mostrando todas as várias partes de que seus usuários podem tomar partes certas e erradas. Eles estão mostrando caminhos alternativos e todas essas coisas, então eles são o mais detalhados possível. Então, dependendo do que você realmente precisa neste projeto e dependendo de onde você está nos estágios de design deste projeto, você vai usar um ou outro. Às vezes, os fluxos de usuários são na verdade a sua melhor aposta porque dependendo de como seu projeto está indo, dependendo de como o feedback está indo, como a pesquisa está indo, ele, eles são muito mais simples de mudar, eles são muito mais simples de editar. Em seguida, se você está apenas começando com fluxos de tarefas e lá eles estão adicionando fluxos de fio mais tarde e, em seguida, usando fluxos de usuário no final. Portanto, talvez Fluxos de Usuário seja a melhor maneira de fazê-lo. E quando nós realmente usamos esses fluxos de usuário? Vamos discutir isso no próximo vídeo. Então, vemo-nos lá. 4. Quando são usados: Os fluxos de usuários são usados no início de um projeto logo após todas as pesquisas e personas de usuários terem sido concluídas. Como ele disse anteriormente, eles são usados para determinar a quantidade de telas que você vai precisar e a ordem lógica dessas telas ou páginas de dose ordenada e como seus usuários estão realmente indo para interagir e mover através de todas estas páginas diferentes. E então você pode discutir essa ordem e todos esses fluxos com seus clientes e com seus desenvolvedores ou colegas de equipe para alcançar o melhor resultado possível e a melhor otimização possível antes realmente passar para os estágios de design deste projeto, eles são usados para criar interface intuitiva e agradável para que nossos usuários encontrem nosso produto, nossa alegria de usar, e eles também são usados para aumentar a taxa de conversão, como eu mencionei antes, porque usando esses fluxos de usuário, você vai determinar no início deste processo de design, quando seus usuários estão indo para clicar ou comprar ou comprar certas coisas dentro deste processo em vez de mais tarde no processo de design, que por sua vez vai tornar o processo de design muito mais fácil de fazer, muito mais fácil de criar. Porque você determinou todas essas coisas em seus fluxos de usuário. Você pode usá-los para criar novos produtos, ou você pode usá-los com produtos existentes para refinar as peças que seus usuários podem tomar dentro desse produto e para aumentar a otimização ou conversão ou onde quer que o objetivo deste projeto é. Então, como eu disse, eles podem ser criados para produtos novos ou existentes. E eles são realmente úteis quando você está criando componentes que mais tarde você vai usar em seus estágios de design deste projeto de design porque alguns componentes são usados principalmente, como navegação, como rodapés e dentro deste estágio de seu projeto, você pode facilmente determinar o que vai ser localizado na navegação da dívida ou rodapé. Você também pode usá-los para criar algo chamado imagens de herói, por exemplo, ou controles deslizantes ou diferentes componentes como DOS. E, mais tarde, você pode facilmente dimensionar ou redimensionar esses componentes, se você precisar deles ou não mais tarde na linha do seu projeto. Finalmente, há realmente uma ótima maneira de mostrar aos seus companheiros de equipe, clientes e desenvolvedores suas idéias sobre este projeto. Todos esses caminhos diferentes que seus usuários podem seguir. Porque a validação nesta parte do projeto é realmente importante porque como eu mencionei várias vezes já, ele vai acelerar sua parte de design deste projeto são muito mais porque nesta parte com esses fluxos de usuário, você vai determinar todos esses detalhes importantes. E mais tarde, design vai ser processo muito mais fácil e muito mais agradável de fazer, porque é apenas uma exploração de criatividade em vez de lidar com todas essas tarefas complexas que os usuários têm que resolver . Agora, falando de fluxos de usuário no próximo vídeo, vamos realmente criar fluxos de usuário usando o Adobe XD. Então, vemo-nos lá. 5. Como criar fluxos de usuários no Adobe Xd: Há muitas rotas diferentes que seus fluxos de usuário podem tomar. Existem muitas formas diferentes que você pode usar, mas há algumas formas básicas que cada designer está lá deve entender. Eles são basicamente o padrão na indústria há décadas. E eles são muito importantes de saber, especialmente se você estiver trabalhando com equipes remotas. Se você se juntar a uma agência mais tarde abaixo da linha ou se você já está trabalhando em uma agência e tentou estabelecer são certas línguas que todos podem entender. Então, neste vídeo, vou mostrar-lhe um modelo. Você será capaz de baixar este modelo e explorá-lo mais e , em seguida, construir sobre este modelo. E mais tarde na classe, eu vou mostrar alguns modelos mais complexos que você pode realmente obter se quiser, e então expandir esses modelos básicos e simplesmente construir sobre eles. Então aqui está esse modelo. É chamado de elementos de fluxo de tarefas. E se você quiser obter este modelo simplesmente baixado dos arquivos de classe, e então você pode abri-lo no Adobe XD. Então o que temos aqui são todos os elementos, todos os componentes. Então temos entrada, ação, processo, decisão e seta negativa, e estas são suas cores. Então, cor do ponto de entrada, cor branca, que é basicamente a cor do texto em todos os lugares, e passos de cor. Se você quiser alterar essas cores para a marca do seu cliente, por exemplo, basta clicar com o botão direito do mouse. Você pode copiar isso ou você pode editar e, em seguida, simplesmente alterar esta cor como quiser. Como você pode ver, eles vão atualizar em tempo real. Você pode basear seu código hexadecimal aqui. Se queremos terminar, então ele vai atualizar para a cor hexadecimal que você escolheu. Então deixe-me voltar um pouco. Então, como eu disse, este é o modelo bare-bones realmente básico e, em seguida, você pode construir sobre este modelo. Então, se ampliarmos um pouco também, todos esses elementos diferentes, eu vou mostrar a vocês o que todos eles são e o que todos eles fazem. Então, primeiro de tudo, nós temos entrada, e este é o círculo de entrada, ou o ponto de entrada geralmente é mostrado como um círculo, mas você pode mostrá-lo de muitas maneiras diferentes que você deseja. Nada disso é, na verdade, padronizar. Isso é apenas designers da indústria usando todos esses elementos e modelos por décadas. E então simplesmente venha com todas essas soluções diferentes. Então temos ponto de entrada e que também pode ser o ponto de saída. Então ponto de entrada, se você se lembrar dos vídeos anteriores que mencionei, pode ser, por exemplo, uma página de destino do seu site ou tela de login do seu aplicativo ou qualquer outra coisa. O ponto de entrada onde os usuários realmente inserem seu design, seu produto, seu aplicativo móvel, seu site, o que quer que seja. E depois disso, temos ação. Assim, os usuários podem clicar, os usuários podem navegar, os usuários podem afirmar, os usuários podem digitar todas essas coisas diferentes são ações. As ações também podem ser, se você clicar no botão seguinte dentro do seu aplicativo, por exemplo, para ir entre telas diferentes. Ou se você clicou em um determinado ícone, por exemplo, Seta para ir para a esquerda e para a direita, ou se você deslizar para usar o círculo de ação de paginação está apenas lá. E eu vou mostrar isso em apenas um segundo com este modelo realmente básico que eu encontrei on-line e apenas recriei usando esses elementos. Então, todos esses elementos são, criaram para vocês e você pode simplesmente baixar e usar este modelo. Como eu mencionei. Em seguida, temos processo. Então, o que aconteceu depois que completamos a ação certa? Então, fomos a uma página específica? Será que passamos de, por exemplo, imagem pequena para imagem de largura total difícil para o próximo slide, nós compramos o produto? Você foi para a página do checkout? Todas essas coisas realmente importam dentro do processo. Então você tem que escrever isso para que você possa entender como um designer, ou se você está trabalhando com um companheiro de equipe ou com desenvolvedores ou com o cliente, você tem que mostrar a eles este processo. Em seguida, temos em forma de diamante, que é a decisão. Então, basicamente, isso significa se o usuário se comprometeu a dizer sim ou não a um determinado processo ou a uma determinada ação. O que eu quero dizer com isso é que quando você chegar à nossa página de checkout, por exemplo, e você quer comprar um produto, isso pode ser uma decisão sim ou não. Então sim, eu quero comprar o produto e, em seguida, você vai para a página de pagamento, você vai para as páginas de pagamento, assim por diante ou se não, se eu clicar em Não, Onde isso me leva? É por isso que este diamante é realmente importante e é geralmente referido como diamante decisão. E eu vou mostrar a vocês como novo editar todos esses elementos em apenas um segundo. Mas a seguir temos flechas. Agora, essas setas preenchidas, como podem ver, temos dois tipos. Então essas setas preenchidas são basicamente setas de passo. Assim, eles movem os usuários de uma etapa para a outra. E então essas flechas são basicamente o que eu rotulei aqui. setas negativas em é quando o usuário diz, diz não, ou quando o usuário não pode concluir uma determinada tarefa. Por exemplo, se a pesquisa, mas não consegue encontrar nada, então esta seta nenhuma aparece e leva-os para uma próxima etapa ou para a etapa anterior ou algo assim. Então, basicamente, é por isso que essas setas são usadas. Agora, se eu desfazer o zoom um pouco, você pode ver esse fluxo. E basicamente eu me inspirou online e injusto recriado usando esses elementos. Como o usuário entra aqui, eles são recebidos com uma página de boas-vindas ou uma tela de boas-vindas, por exemplo. Então, a partir disso, eles podem selecionar uma tarefa. A tarefa é selecionada e, em seguida, eles podem avançar. Se estiver correto, eles podem avançar para a página de detalhes. Se não estiver correto, então isso, se eles clicarem em não, por exemplo, ele vai levá-los de volta para as tarefas selecionadas. Então este nó pode ser botão concreto quando eles clicam não, ou eles podem ser, que pode ser um X. Por exemplo. Eles querem fechar o pop-up ou como você estrutura seu layout. Basicamente, o ponto é o mesmo. Eles podem ir para a frente, então sim, ou podem ir para trás. Então não, é por isso que eles são usados. Então, vamos para esta página de detalhes, por exemplo. E da página de detalhes eu posso clicar na busca klutzy para ir para encontrar algo. E então, quando um commit para pesquisar, eu posso pesquisar itens. Se eu não encontrar nenhum item, ele vai, ele vai mostrar nenhum item encontrado. Então, neste caso, imaginei que seria um próximo ícone. Então, por exemplo, nenhum item é encontrado, e então você pode fechar para concluir uma pesquisa mais uma vez ou Para item é encontrado, meta é concluída neste caso particular porque esse é o objetivo deste item. E então você pode clicar em Encomendar. E este é o seu ponto de saída, por isso ordenado. Ou se eu não quiser pedir, talvez eu possa clicar em não ou cancelar ou algo assim. E isso vai me levar de volta a esta página de detalhes. Então você pode ver a partir deste exemplo muito rápido e fácil como esses fluxogramas são úteis. Este é basicamente um fluxo de tarefas que eu mencionei anteriormente porque ele está apenas mostrando uma única tarefa. No próximo vídeo, vamos discutir alguns modelos mais avançados e algumas etapas mais avançadas que você pode executar ao criar esses fluxos. Mas, basicamente, este é apenas um modelo bare-bones realmente básico. Mais uma vez, você pode baixá-lo, usá-lo no Adobe XD e explorado. E eu realmente encorajo você a construir sobre este modelo, para adicionar mais páginas, para adicionar mais telas e assim por diante. E uma coisa que eu não mostrei a vocês é, por exemplo, nesta tarefa aqui, eu quero ampliar e digamos que em vez de selecionar tarefa, eu quero fazer outra coisa. Você pode ver que é Open Sans, por isso é fonte gratuita do Google. Agora você pode carregá-lo em fontes do Google e fontes da Adobe, o que quer que você esteja usando, completamente gratuito. Então o que eu fiz aqui foi incluir o estofamento. O que quero dizer com isso é que se eu clicar bem ali, você pode ver que o preenchimento está habilitado neste componente. Então, se eu clicar duas vezes aqui, eu posso digitar algo, por exemplo, tornar isso mais visível e você pode ver como a caixa custa. Então, basicamente, neste caso, eu, se eu voltar, eu usei 20, como você pode ver aqui, espaçamento entre todos os meus elementos. Mas você pode usar bronzeado, você pode usar cinco. Você pode até sobrepor essas setas. Então, se uma posição está bem aqui, você pode ver o quão bem ela se sobrepõe com este passo. Então você pode realmente fazer o que quiser. Além disso, quando você estiver arrastando esses componentes, basta arrastá-los aqui. Eu quero mudar seu clique duplo dentro, por exemplo, ponto de entrada ou algo assim, ou ponto de saída, o que quer que seja. Você pode posicioná-lo aqui, você pode fazê-lo para estar em um centro selecionando esses dois elementos, posicioná-lo assim. Ou você pode simplesmente excluí-lo. Você pode fazer isso para todos esses outros elementos que são mostrados a você. E, finalmente, para essas setas, porque essas são bastante simples, você pode clicar duas vezes dentro. Você pode manter sua tecla Shift posição esta seta bem aqui. E então você pode clicar e posicionar esta forma bem aqui se você quiser tornar esta seta mais curta, por exemplo, se você não quiser que ela seja tão longa por qualquer motivo. E também para essas setas, se eu for ao meu painel Camadas e abri-las, você pode ver seta tão negativa, nós temos o rótulo, que é este nenhum rótulo dentro do qual você também pode mudar se quiser. Por exemplo, negativo OU nenhuma opção, ou esta não é uma opção ou o que você deseja escrever. E então nós temos seta esquerda, direita e nós temos esta linha de seta no meio. Então, o que você pode realmente fazer com isso? Você pode clicar na seta para a esquerda, por exemplo, mantenha pressionada a tecla Shift e mova-a mais perto. Você pode fazer o mesmo com este, ou se você quiser, você pode até mesmo movê-los mais longe. Então, digamos assim. E então você pode clicar neste centro e simplesmente estendido assim. Se você não quer que seja assim, então você pode simplesmente clicar na seta e você pode ajustar isso para que você possa ver que nós temos a cor da borda, que é esta cor. E então temos a largura do traço, temos a largura do traço. Então, basicamente, a largura entre todos esses traços diferentes, você pode ajustar o que quiser para alcançar um certo estilo que você está atrás. E basicamente isso, todo o ponto deste modelo para ajudá-lo neste processo de exploração. Então, como mencionei no próximo vídeo, vamos discutir modelos um pouco mais complexos. Vou mostrar-lhe onde você pode obter esses modelos, que na verdade são meus, e então o que você pode realmente fazer com eles. Então, vemo-nos lá. 6. Trabalhando com flowcharts em Adobe Xd: Neste vídeo, vou mostrar alguns modelos mais complexos. Esses modelos demoraram meses para serem criados. E esses modelos são, na verdade, alguns que eu e minha equipe criamos no passado. E você pode obter esses modelos, links que estarão no PDF com descontos porque estes são modelos premium. E eu vou mostrar a vocês como todos eles são criados. Mantenha-os como no Adobe XD. Você pode pegá-los se quiser. Caso contrário, você pode criar o seu próprio como quiser. Aqui está meu site chamado doador web, dotnet. Mais uma vez, link vai estar em um PDF e este é o primeiro modelo que vai ver chamado flowy. E você pode ver que você tem 108 telas, 128 elementos em diferentes papéis. Então, você pode usar esses papéis se quiser alinhar seu fluxograma e depois imprimir mais tarde para mostrá-lo aos seus companheiros de equipe, clientes ou desenvolvedores. Então, se um escleral apenas um pouco, você pode ver como alguns desses elementos se parecem. E vamos explorá-los em apenas um segundo dentro do Adobe XD. Mas basicamente, essa é a essência disso. Há muitos diferentes desses elementos e esses papéis e temos fluxogramas de fluxo de fio e estes são muito maiores. Então, temos componentes HOT 100 no total. Então 200 telas para 100 elementos e dois papéis mais uma vez, e desta vez temos versão clara e escura, então você pode até explorar isso. E você pode ver que eles são adaptáveis o que está incluído. Então, você tem três tipos de arquivos diferentes, Photoshop, Sketch e XD. Enquanto neste temos Photoshop e arquivos de esboço. Mas como o XD é criado pela Adobe, você pode simplesmente abrir um arquivo do Photoshop. Ele vai funcionar perfeitamente bem dentro do XD porque ele é integrado para fazer isso, componentes perfeitos para pixels, fontes gratuitas do Google são usadas onde quer que você encontre fontes. E se você comprar esses tutoriais em vídeo direcionalmente para ambos incluídos dentro e estrutura de camada organizada. Você vai ver isso em um segundo. Estes são os papéis para imprimir ambos os tamanhos EUA e A4, se você quiser. Variações ilimitadas e você pode ver como alguns desses elementos se parecem. Agora, se eu minimizar isso e voltar para XD, esta é a tarefa para ROD. Mostre para você, você pode ver como isso é básico. Mas se eu mostrar, por exemplo, fluído, você pode ver como ele se parece. Então eu realmente combinar esses três. Então, deixe-me aproximar isso um pouco mais. Então estes são elementos da web, estes são elementos móveis, e estes são todos os elementos adicionais. Então, se você comprar estes, eles virão em três arquivos, mas você pode combiná-los em um arquivo no XD, como você pode ver aqui, você pode simplesmente clicar duas vezes para alterar isso. Então, estes são elementos móveis, por exemplo. E o que você pode realmente fazer com esses elementos? Então você pode facilmente vir aqui para sua prancheta e criar uma prancheta que é 1920 por 1080, por exemplo. E digamos que eu queira começar com uma tela de login. Eu posso copiá-lo, eu posso colá-lo aqui mesmo. E vamos realmente mudar isso para esta cor. Então deixe-me realmente, deixe-me realmente pegar nossa cor cinza claro agradável só para que você possa ver um pouco melhor o que eu estou fazendo. E então eu posso começar com esta seta, por exemplo, bem aqui. Então copie, cole bem aqui. E talvez eu possa posicioná-lo bem aqui. Então, quando meus usuários clicam neste botão, para onde ele vai levá-los? Porque esta é uma tela de login. Talvez, como podem ver, tenhamos categorias diferentes aqui. Talvez nós vamos saltar para o e-commerce e talvez eu vá para isto e depois para isto. E então vamos ver talvez esta tela também, assim. Controle C pulando aqui, controle V para colá-los todos. E eu vou fazer isso. Então, por exemplo, eles virão para esta tela bem aqui. E então eu vou duplicar minha seta Controle C, ou Controle D, o que você quiser. E então, por exemplo, se eles clicarem em um, posicione-o no topo. Se você clicar neste produto, por exemplo, ou aqui, e temos setas diferentes aqui. Então, se eu realmente excluí este, eu posso usar esta seta, por exemplo. Assim, você pode ver por que esses modelos são importantes. Porque você pode trabalhar muito mais rápido quando está fazendo isso. Então, se um Control X, Control V posição e bem aqui, e quando o clique aqui, digamos que isso é um botão. E você pode fazer a mesma coisa que eu mostrei anteriormente. Então você pode estender estes se você quiser. E deixe-me realmente estendido para bem aqui. Eu realmente posso pular para esta tela. Então você pode ver que isso não está em linha com todos esses fluxos de tarefas anteriores porque este é um fluxo de usuário muito mais complexo porque, como você pode ver, temos dois botões, para que eles possam clicar em Cancelar, por exemplo, e nós podemos realmente duplicar esta seta. Eu posso virar, por exemplo, só para mostrar como isso poderia ser. Então talvez eu possa posicioná-lo aqui. Talvez eu possa empurrar esses dois para cima um pouco. Posso posicionar isto até aqui. Talvez eles possam clicar ali. E então esta seta vai realmente levá-los para esta primeira tela, por exemplo. Você pode até virar. E então você pode posicionar esses elementos. Vou te mostrar isso em um segundo. Então, Controle D nesta. E você pode posicioná-lo ou bem aqui, então você pode estender isso. E talvez isso pareça um pouco chato, mas é realmente importante entender esse fluxo de usuários. E daqui em diante, por exemplo, se eles realmente clicarem neste botão azul, onde isso os leva? E, na verdade, vamos fazer isso apenas para tornar um pouco mais simples navegar pelo seu caminho ao redor. Então eu vou mover isso para aqui, talvez assim, e então posicionar isso um pouco para dentro. Vou apagar este. Então você pode ver o quão rápido isso é realmente criar. Então, quando eles clicarem no botão azul, talvez eles possam vir para esta tela. E de Dan em diante, deixe-me posicionar esta flecha até o topo, bem aqui. Posicione-o aqui. E então eu posso realmente clicar aqui e mover isso assim e reorganizar isso em apenas um pouquinho. Talvez esta seja a nossa tela de confirmação ou o que seja, podemos chamá-lo assim. E então, quando eles clicam neste botão azul, eles podem realmente ir para a página de compras e eles podem realmente concluir esta etapa. Agora, o que podemos fazer com este é que podemos realmente combiná-los com os fluxos de tarefas originais que eu mostrei a vocês. Então, por exemplo, eu posso usar este círculo de entrada. E então me desculpe, porque eu tenho um monte desses abertos. Posso posicioná-lo aqui e posso movê-lo. Você pode ver que ele está vinculado porque na verdade é uma instância de um componente diferente. Então eu posso clicar com o botão direito aqui e eu posso torná-lo local. E então o que eu posso fazer é realmente saltar selecionar os dois assim, e apertar Shift controle e reduzi-lo um pouco. Também posso reduzir os meus textos. Então talvez 10, algo assim. Então podemos usá-lo como um ponto de entrada bem aqui. Mas você também pode fazer é usar estes. Então, por exemplo, esta é a nossa casa, talvez esse seja o nosso controle de ponto de entrada C. E então eu posso, em vez deste círculo de entrada, eu posso fazer parecer um pouco interessante posicionando estes. Então eu posso posicionar este para ser o meu círculo de entrada. E, por exemplo, eu posso usar essa cor se eu quiser. Posso mudar este ícone. Se eu quiser. Posso até mudar a cor do ícone. Basta clicar aqui, você pode fazer o que quiser com estes. Além disso, o que você pode ver aqui são todos esses modelos diferentes, que são basicamente ousam apenas como formas. E então você pode usar essas maquetes para mostrar, por exemplo, esta é uma visão de um aplicativo móvel e eu posso usar essa maquete simples, pode estar posicionando bem aqui no topo, talvez escrever alguns textos aqui. Mova todos esses elementos um pouco para baixo, como talvez assim e depois escreva aqui. Este é um olhar de como a versão móvel vai parecer em, por exemplo, Android ou iOS ou o que você quiser. Ou posso usar todos esses outros. Então navegador, versão laptop, versão desktop, o que for. Então, se a etapa for concluída, podemos usar este, por exemplo. Então vamos posicioná-lo bem aqui. E eu posso posicioná-lo no centro da minha flecha assim. E então eu posso realmente usar minha cor principal, por exemplo, para ver que a etapa está concluída. Ou posso posicionar isso aqui, bem ali, ampliá-lo se eu quiser. Eu posso até incluir uma borda para ele, qualquer coisa que eu possa usar uma sombra sobre ele sobre este fundo. Assim eu posso posicionar lá dentro. Portanto, qualquer que seja o seu estilo para esse fluxo de usuário específico, então você pode implementar esse estilo usando esses modelos. E você pode ver em apenas uma questão de minutos, se você não está falando como eu estou, você pode obviamente criar isso em um período muito mais curto de tempo. Então isso estava fluindo se estamos pulando bem aqui, apenas para mostrar rapidamente um Web Elements de fluxo de fio, fluxograma. E você pode ver quantos elementos diferentes temos aqui. E você pode, obviamente, criar componentes a partir desses elementos. Você pode mudar suas cores. Então, por exemplo, eu quero mudar a cor deste cabeçalho. Posso posicioná-lo aqui mesmo. Ou se eu quiser mudar a cor do meu fundo completamente, você pode mudá-lo assim. E, obviamente, se você tem cores como o nosso 3D mostrar-lhe neste modelo padrão como este. Então, se você criou suas cores, você pode simplesmente aplicar essa cor a esse elemento. Você vai trabalhar muito mais rápido dessa forma. Mas se não o fizeres, está tudo bem. Você pode pular aqui e mudar as cores mesmo disso. Então, por exemplo, isso pode ser, eu não sei, um vermelho brilhante ou algo assim. E então isso pode ser da mesma cor, então eu posso selecioná-lo assim e você pode ver como isso se parece. Então, obviamente, há muitas opções incluídas aqui e todos esses elementos são os mesmos. Você pode ver que temos muitas setas diferentes incluídas dentro. De um ponto de entrada para muitos pontos de saída. Você pode fazer o que quiser. Você pode usar o perigo, você pode usar uma atualização. E eu realmente encorajo você a usar seus próprios ícones. Você pode usar esses ícones à esquerda e à direita para as etapas, se desejar. Mas basicamente você pode ver como eles se parecem. Eles têm muito mais detalhes incluídos dentro. Em vez destes que são mostrados anteriormente para os fluxos de tarefas. Então, basicamente, você tem duas opções. Você pode usar esta versão que é extremamente leve, ou você pode usar esta versão, que é muito mais complexa, mas estes não são layout final. Estes são apenas para transmitir suas idéias muito melhor para seus companheiros de equipe, seus clientes, seus desenvolvedores. E o benefício disso é porque você tem vários pontos de entrada e saída, vários fluxos. Então, por exemplo, se eu for para o que criamos usando fluxo v, Então, assim, eu posso criar, como eu mencionei aqui. Então nós temos essas duas flechas. Por exemplo, temos um botão de fechamento aqui, por exemplo, onde esse botão de fechamento nos leva, ele nos leva de volta para a tela de login ou para esta tela. Então você pode apenas imaginar que você pode criar esses vários fluxos, fluxos complexos e mesmo como um modelo que eu estou dando a você gratuitamente. Você pode pular aqui mesmo. E você pode simplesmente ajustar todos esses elementos e torná-los menores. Se você quiser aplicar uma cor diferente, você pode fazer isso também. Então você pode usar a cor que quiser nestes. E, claro, porque há muitos, muitos desses diferentes elementos divididos em categorias de depoimentos promocionais, equipe, blog, e-commerce, e assim por diante. Para a versão móvel e desktop, seu fluxo de trabalho será muito mais rápido e seu tempo de entrega será muito mais rápido. E mais uma vez, o benefício de usar isso é que seus clientes vão entender você é muito melhor do que se você está apenas usando algo assim. Este é um ponto de partida fantástico. Mas se as coisas precisam ser um pouco mais complexas, por exemplo, como eu mostro aqui. Então você tem que criar vários fluxos, obviamente como em cada aplicativo aqui, então eu realmente recomendo usar nosso modelo premium como este, porque ele realmente vai melhorar seu fluxo de trabalho dramaticamente. E isso realmente vai permitir que você trabalhe muito mais rápido e mostre suas idéias para seus companheiros de equipe, clientes ou desenvolvedores, que eles vão entender. Porque especialmente com clientes mostrando algo assim não vai torná-los realmente fáceis de entender. Mas mostrar-lhes algo assim, por exemplo, vai fazê-los entender muito melhor porque eles vão reconhecer pelo menos alguns desses elementos em vez de apenas mostrá-los e essas formas em branco como círculos e quadrados e diamantes e coisas assim. Então, isso foi um olhar muito rápido para esses modelos premium. Mais uma vez, se você quiser obtê-los com um desconto muito grande, links estarão no PDF. Você pode simplesmente clicar nesses links e simplesmente inserir esse código de desconto que eu vou fornecer a você e, em seguida, obtê-los e usá-los no XD, você pode ver como algo assim pode melhorar seu fluxo de trabalho dramaticamente. Você ainda vai ter esse fluxo básico de tarefas de graça, é claro. E você pode baixá-lo e usá-lo. Mas se você quiser melhorar o seu jogo, se queremos mostrar suas ideias melhor maneira possível para seus clientes, colegas de equipe e desenvolvedores. Em seguida, usar esses modelos premium vai melhorar o fluxo de trabalho maciçamente. Como você viu, você pode mudar qualquer coisa, você pode ajustá-los como quiser. Você pode trabalhar tão rápido ou lento quanto quiser. Você pode usar todos os tipos de cores diferentes, todos os tipos de diferentes formas e ícones e coisas assim. Então, se você quiser usar algo assim, mais uma vez, eu vou lhe dar os links e descontos em um PDF e você pode conferi-los. No próximo vídeo, vamos falar sobre como você pode compartilhar algo assim com seus colegas de equipe, clientes e desenvolvedores. Então, vemo-nos lá. 7. Compartilhando seus fluxos: Compartilhar seus fluxos de usuários é uma parte muito importante de todo o processo, pois ele vai realmente permitir que seus clientes, colegas de equipe e desenvolvedores entendam seu processo de pensamento por trás de tudo isso. E isso realmente vai tornar a discussão muito mais simples do que simplesmente fazer isso e depois simplesmente dizer-lhes com palavras ou algo assim. Então, neste vídeo, vou mostrar algumas maneiras práticas que você pode usar para mostrar isso para seus clientes e desenvolvedores. Então o primeiro é, e eu criei isso para os meus modelos premium que são mostrados a você. Então barco para um fluxo fluído que você está vendo bem aqui, e para fluxogramas de fio. E você pode abri-los se você comprar estes, que eu mencionei em um vídeo anterior. Estes são estes papéis. Então este é o tamanho A4, este é o tamanho da letra dos EUA. E você pode simplesmente abri-los enquanto você trabalha e alinhar todos os seus elementos aqui, e então simplesmente imprimir todos eles. Você pode selecionar isso. Você pode pressionar Control ou Command E dentro do XD e, em seguida, você pode selecionar PDF aqui. Em seguida, você pode pressionar Exportar e ele vai exportar este PDF pronto para impressão. Você pode imprimi-lo e então você pode mostrá-lo para seus clientes. Ou se seus clientes estiverem trabalhando remotamente e você não estiver ao alcance deles ou algo assim, então você pode simplesmente compartilhar esses PDFs com seus clientes e, em seguida, eles podem imprimir esse vídeo no sul e deixar notas nesses PDFs. Ou melhor ainda, você pode simplesmente alinhá-los aqui, e então você pode clicar aqui para compartilhar isso com seus desenvolvedores ou clientes. Como isso funciona é que você pode simplesmente clicar aqui. E isso vai gerar esse link público. E então você pode dar um nome bem aqui. Por exemplo, digamos elemento Webflow ou fluxo de fio para um site ou algo assim. E então você pode mostrá-lo aqui mesmo. Este é o nome do link e, em seguida, você pode simplesmente copiar este link e, em seguida, você pode compartilhá-lo com seus clientes. Eles podem, em seguida, no navegador, deixar seus comentários aqui, e então você pode simplesmente mudar como este fluxo de usuário parece dentro do seu XD e, em seguida, voltar aqui dentro da guia Compartilhar. E então simplesmente atualize esse link e depois volte e compartilhe esse link mais uma vez com seu cliente. Nome do cliente, nome do projeto, prazo, número de páginas do site e número de telas do aplicativo é o que é realmente importante e o que realmente vai determinar quanto você realmente vai cobrar no final deste projeto, ou quanto tempo o projeto vai demorar. Porque geralmente, especialmente designers freelance estão cobrando por todo o projeto. Então eles sabem, por exemplo, da conversa com o cliente, se o cliente tem um projeto existente ou algo assim, eles realmente saberão quanto eles vão cobrar reunindo todas essas informações. Mas se não, você pode simplesmente trabalhar em etapas. Então você pode cobrar por esta exploração e teste de usuário, fase de pesquisa de usuário. E depois de concluir isso, você vai saber simplesmente usando esses fluxos de usuário, quantas telas você vai projetar mais tarde, quantas páginas do site você vai projetar. E a partir do número da morte, você pode então fazer um palpite educado e cobrar a quantia da dívida de dinheiro para o seu cliente. É por isso que compartilhar é realmente importante nesta fase do projeto. Porque você vai saber facilmente usando esses fluxos de usuário quanto dinheiro você realmente vai cobrar para seus clientes. Agora, este é um dos métodos e, em seguida, você pode seguir este modelo, especialmente se você comprar estes ou se não, você pode simplesmente usar algo assim. Então digamos que você criou isso. Você pode dar um nome aqui, então clique duas vezes e chame o que quiser. Então, por exemplo, fluxo novo. Claro, isso vai ser muito mais limpo quando você realmente está criando. Você pode clicar em Control ou Command E. E, em vez de PDF, você pode selecionar um JPEG ou um PNG. Você pode pressionar Exportar e, em seguida, você pode enviá-lo para um cliente dessa forma. Além disso, o que você pode fazer é conectar essas páginas. Então vamos dizer que esta é a porta número 1, esta é a nossa porta número 2. Você pode ir para o modo protótipo, conectá-los, e então você pode simplesmente compartilhar esse protótipo, como eu mencionei aqui, e então copiar esse link e compartilhá-lo com seu cliente. Agora, a vantagem de usar algo assim dentro do Adobe XD diretamente é porque você não está desperdiçando papel. Você não está desperdiçando seu tempo. Você não está desperdiçando seu tempo. Você pode simplesmente compartilhar um link. Eles podem acessar esse link, comentar esse link, voltar para você com suas alterações. Você pode alterá-lo dentro do XD, atualizar o link, enviá-lo novamente, e então eles podem deixar o novo feedback até que todos estejam satisfeitos. E depois disso, você vai começar o processo de design com instruções claras de seus clientes, com clara compreensão deles e desenvolvedores o que tem que ser feito dentro deste projeto. 8. Projeto do curso: Seu projeto de classe para esta classe é criar um fluxo de tarefas usando este modelo que eu forneci. Agora você pode posicionar esses elementos como quiser, mas o que eu recomendaria é excluir todos eles e, em seguida, simplesmente usar esses elementos principais, o que quiser, você pode clicar, arrastar e soltar em sua página e, em seguida simplesmente posicioná-los de tal forma que faça sentido para você. Você pode alterar todo o texto dentro. E o que eu realmente encorajaria você a fazer é mudar essas cores dentro e em seguida, adaptá-las ao seu cliente ideal ou dois clientes imaginários ou o que você quiser, e então simplesmente enviar isso para o seu projeto de classe. O que você pode fazer é depois de alinhar todos estes para a página, você pode selecioná-lo, pressione Control ou Command E exportado é PNG ou JPEG, o que você quiser, pressione Exportar. E isso simplesmente carrega essa imagem para o nosso projeto de classe. Estou ansioso pelo que vocês podem criar. E é por isso que estou lhe dando este modelo para praticar, basta abrir no Adobe XD e seguir estas instruções desta classe. E mal posso esperar para ver o que vocês podem criar. 9. Outro: Então lá vai você, Você chegou ao fim da aula. Eu realmente espero que essa classe tenha ajudado você a entender o que os fluxos de usuários são. Por que eles são úteis e por que são a parte realmente importante do processo de design e como usar esses fluxos de usuário pode ajudá-lo a terminar seus trabalhos de design muito mais rápido e com melhor integridade, com melhores habilidades de planejamento, com melhores habilidades, a fim de otimizar seu fluxo de usuários da melhor maneira possível. Obrigado mais uma vez por assistir. Eu realmente espero que você ache algum valor nisso. Em uma esperança realmente que você vai aplicar algumas dessas dicas e técnicas são usadas, alguns desses modelos que eu vou mostrar-lhe em seu trabalho futuro. Obrigado novamente por assistir e eu realmente espero vê-lo em algumas das minhas outras aulas. Cuide-se.