Design de aplicativo de UX UI: domine mockups e protótipos de alta fidelidade

1. Bem-vindo ao Class de design de aplicativo de UX UI: Olá a todos. Se você está planejando iniciar a jornada de design UY UX Impro UY UX design skills, esta aula é sua Meu nome é Akaanka e sou designer de UY UX que gosta criar aplicativos e sites centrados no usuário Não estamos falando apenas da teoria do design UY UX, aqui estamos falando de transformar sua visão em realidade, pixel by Fixel O foco principal desta aula é aprender como criar designs de aplicativos móveis centrados no usuário que sejam fáceis de usar e tenham uma aparência incrível Imagine escolher cores sem ter problemas de acessibilidade do aplicativo Escolha telefones que melhorem a legibilidade e transmitam o tom certo para seu aplicativo Explore o mundo dos ícones e seu papel na criação de interfaces de usuário intuitivas e visualmente atraentes. Manter tudo organizado, como caixa de ferramentas rotulada, aplica princípios e perdas de UX aos designs E criando aplicativos que Gus usa e solucionando seus pontos problemáticos. Não criaremos apenas interfaces de usuário bonitas, também nos concentraremos no design de aplicativos centrados no usuário , aplicando U X ao design da interface do usuário Faremos tudo isso e muito mais. Usaremos o Freqma para criar nossas marcações de aplicativos e depois transformá-las em protótipos funcionais Estou aqui para guiá-lo passo a passo. Por isso, trabalharemos juntos para criar um aplicativo personalizado e abordar os princípios e as melhores práticas de design de UX que ajudam você a criar qualquer tipo de aplicativo pronto para melhorar seu caso de design de aplicativo de UX. Vamos embora. Te vejo dentro da aula. 2. Selecionando cores usando a psicologia das cores: Há várias maneiras de aprender sobre a psicologia das cores e encontrar a melhor cor para seu aplicativo ou sua marca. Começarei forma mais genérica e mostrarei o meu método pessoal que escolho para selecionar cores. Antes de tudo, vou ao Google e pesquisarei psicologia das cores. Agora vou ver muitos artigos. Seguindo as diretrizes do artigo, posso ter mais ideias sobre a psicologia das cores e como aplicá-la para encontrar a cor correta da marca. O azul é uma representação de confiança, lealdade, segurança e está relacionado ao setor bancário. Se você preferir as marcas mais populares relacionadas ao setor bancário, verá que o azul é uma das cores populares que a maioria das marcas usa. O primeiro método é ler esse tipo de artigo. O segundo método é usar os detalhes gerados. Você pode usar o Google Brat e o GPT para fazer perguntas sobre psicologia das cores e encontrar a melhor Meu método favorito é verificar o guia Color Emotion. Aqui está um artigo sobre a psicologia da cor no design de logotipos. Gosto de seguir este guia de emoções coloridas e selecionar a cor. A razão pela qual eu uso este guia de emoções coloridas é que posso conferir a banda popular e quais são as cores que elas usaram para criar seus logotipos. No nosso caso, vamos criar um aplicativo de entrega de comida para uma padaria A emoção e o significado da padaria são saúde, entusiasmo e entrega rápida Portanto, se verificarmos os logotipos de acordo com ou sob essa seção de otimismo e clareza, veremos os logotipos relacionados a veremos os logotipos relacionados marcas de entrega e cadeias de passaportes como Mcdonalds e como Mcdonalds Além disso, se verificarmos esta seção de crescimento pacífico e saúde, também podemos ver alguns logotipos relacionados alimentos. Neste aplicativo, eu gostaria de usar essa cor verde. Se você, se seu aplicativo estiver em um nicho ou marca diferente, poderá seguir essa emoção colorida, orientá-lo a verificar esses logotipos e encontrar o logotipo mais relacionado que você procura. A primeira parte está concluída, agora temos nossa cor verde, mas eu não tenho uma cor verde específica, então preciso encontrar a cor verde específica. E então eu tenho que encontrar a cor secundária e de destaque. Na próxima lição, usaremos a roda de cores e otimizaremos nossa cor primária. E então aprenderemos sobre a regra 603010 e descobriremos a segunda cor e a cor de destaque 3. Selecionando uma cor principal: Ok, agora selecionamos a cor da nossa marca como verde. E você selecionará cor da sua marca de acordo com seu aplicativo. Agora podemos ver as opções que podemos usar em nosso aplicativo. Então, vamos tentar encontrar a cor que combina com nosso aplicativo e nossa marca. Para fazer isso, vou até Coolers.com e clico em Explore Trending Ok, agora na barra de pesquisa, vou pesquisar em verde ou posso simplesmente clicar nessa etiqueta colorida. E agora temos diferentes tipos de paleta de cores. E usando essas paletas de cores, podemos encontrar a melhor cor para nosso aplicativo Vamos descobrir a melhor cor verde ou a melhor cor para seu aplicativo, cor primária. Gosto muito dessa cor verde, então basta clicar nela. E quando eu clicar nele, ele copiará o código de cores. Em seguida, vou para a página inicial dos refrigeradores e clico em Iniciar o gerador Agora, aqui, vou clicar nesse código de cor para selecionar a cor. Então, vou colar a cor que selecionei. E agora vou clicar nesse ícone local. Agora temos a cor primária. Na próxima lição, apresentarei a regra 603010 4. A regra 60-30-10: A regra 603010 é uma diretriz de design de interiores que os designers usam para criar A regra 603010 é o melhor método para equilibrar as cores em todo o design A regra 603010 tem três cores e cada cor ocupa uma porcentagem específica do design geral O 60% é a cor dominante, o que significa que usará 60% do design geral e 30% é a cor secundária. E essa cor será usada em 30% do design e 10% é a cor Cent. E esses 10% serão usados para destacar as partes mais importantes do objeto no design. Seguindo essa regra 603010, podemos criar paletas de cores harmoniosas e visualmente atraentes Embora as regras se apliquem ao design de interiores, podemos aplicá-las para Eu projetei para. Quando falamos sobre UX ou experiência do usuário, existe um princípio chamado chaves. Ok, eu dobro, o que significa manter as coisas simples, estúpidas. Seguindo essa regra 163010, podemos manter a simplicidade e destacar parte mais importante do design usando cores É por isso que é importante usar essa regra 60, 30 também como iniciante, esse é o melhor método para escolher a cor correta Porque se você for usar cores com muitas cores, isso arruinará seu design Se você não é bom em escolher as cores certas como eu, esta regra 603010 o ajudará a alcançá-la Vamos descobrir alguns exemplos da regra 603010 usada no design de interiores E depois disso, mostrarei dois sites que usam a regra 603010 para escolher suas cores Então, aqui está o primeiro design. Portanto, neste design, cor dominante tem 60% do interior e temos essa cor marrom no chão e a cor de destaque na decoração verde E vamos ver outro exemplo. Está bem? Neste exemplo, temos a luz como cor, como cor dominante. E é 60%. E temos uma cor secundária como esse verniz, cor de madeira E temos 10% de cor de destaque. Mas quando você olha para esse design, você verá claramente que a cor de destaque é superior a 10%. Portanto, há algumas razões para isso Como eu disse antes, 603010 é uma regra Não é uma lei de princípios. Então, podemos quebrar essas regras. Está bem? Eu vou dizer isso de novo. Podemos quebrar a regra 603010, o que significa que se há algo que precisamos mudar ou algo que temos a ver com cores, não há problema em quebrar essas regras 603010 o que significa que se há algo que precisamos mudar ou algo que temos a ver com cores, não há problema em quebrar essas regras 603010. Essa é apenas uma regra e usamos essa regra para manter nosso design simples e encontrar facilmente as melhores cores. Vamos para o próximo design. Neste design, as cores da parede são brancas e a cor do fluxo é marrom. E temos esse escuro como cor para as luzes e o caos. Então, vamos para a próxima. E nesse design, você pode ver a regra 603010 aplicada E às vezes não é fácil entender as regras do 603010 quando verificamos os interiores Até eles usam a regra 603010 para design de interiores. Eles podem usar diferentes tipos de cores e, como eu disse antes, essa é uma regra e podemos quebrá-las. Ok, agora vamos ao exemplo da vida real. E agora estou no Netflix.com No Netflix, você pode ver claramente 60% da cor escura no fundo E por trás do fundo, podemos ver os últimos filmes e séries de TV, mas ainda está escuro. E podemos ver claramente 30% da cor usada no texto e neste texto P. Agora é a barra de diversão. Você pode ver claramente quais são as chamadas à ação. Gato. O Call to Action é o elemento acionável que os usuários podem usar para clicar e ir para a próxima etapa Nesse caso, o CTA é esse grande vermelho. Obtenha o botão Iniciar. E o objetivo da Netflix é oferecer assinaturas a peebles, adicioná-las ao banco de dados e cobrar dinheiro delas Portanto, quando o usuário acessa essa página, pessoa verá claramente a mensagem que deseja ver e a chamada à ação que deseja realizar. Então, esse é um ótimo exemplo. Além disso, se eu rolar até aqui, ainda tenho cores mais escuras como 60% e 30% da cor branca e há poucas cores diferentes Se verificarmos o design geral, podemos ver claramente quais são as cores e quais são as cores 603010 Vamos para o próximo exemplo e E Slack.com No slack, você pode ver claramente o fundo roxo e é 60%. Então veremos 30% do y. E podemos ver essa cor laranja como 10%. Você pode pensar, qual é a cor azul neste botão de inscrição com Como eu disse antes, 603010 é uma regra que usamos para ver facilmente uma paleta de cores e manter o Além disso, se eu descer agora, temos 60% dessa cor creme claro e 30% da cor preta, e temos esses links na cor azul. Além disso, se eu cair, novamente, temos a cor branca como marrom preto e é 60% Então temos 30% da cor preta e 10% da cor roxa. Então, seção a seção, eles alteram a combinação de cores que escolhem e também adicionam mais cores. Então essa é a realidade. Embora selecionemos três paletas de cores, talvez os clientes queiram adicionar cores diferentes ao design Nesses momentos, temos que mudar nossos requisitos de acordo com o cliente. Então agora você conhece a regra 603010. E na próxima lição, criaremos nossa paleta de cores Como fizemos, já temos a cor dominante ou primária e agora temos que selecionar a cor secundária e de destaque. Nos vemos na próxima aula. 5. Criando a paleta de cores: Olá pessoal. Agora estou no Cools Dot Go e estamos prontos, selecione esse verde-maçã como nossa cor dominante da cor primária E agora temos mais quatro cores, mas só precisamos de três. Então, vou remover essas cores desnecessárias. Ok, agora eu tenho essas três cores e bloqueio essa cor primária, porque só precisamos escolher a cor secundária e de destaque Portanto, existem algumas maneiras de selecionar a cor secundária. O único método é usar paletas de cores. Eu vou até os refrigeradores, exploro as paletas de tendências e E você pode ver esse tipo de paleta de cores. E usamos isso para separar a cor. E você pode usá-lo para separar as cores correspondentes. Mas há mais maneiras de fazer isso, mais maneiras melhores de fazer isso. Já temos nossa cor primária, e essa cor é escura. Agora precisamos da cor clara. Para verificar a cor que combina com essa cor verde. Basta clicar aqui e pressionar o botão Espaço no teclado, e você verá uma cor diferente ao pressionar o botão Espaço. Dessa forma, você pode escolher a cor certa ou pensar na cor que deseja usar. Nesse caso, eu gostaria de usar o branco como cor secundária. E então eu clico nesse cadeado e bloqueio a cor. Agora temos que encontrar a cor de destaque. Essa cor de destaque será a cor que usamos para enviar texto. Eu gosto desse tipo de cor escura. E se eu quiser, posso conferir mais, mas gosto muito dessa cor escura. Então agora eu tenho as três cores. Então, quero lembrar que, acordo com a regra 603010, essas cores serão alteradas de acordo com as seções que significa que se a cor de fundo da seção for branca, podemos usar essa cor branca como 60% e usaremos essa cor escura como 30% E usaremos essa cor verde como 10%. Vou mostrá-la no design. Eu só quero que você use essas cores de acordo com as seções. exemplo, se uma seção Por exemplo, se uma seção tivesse a cor de fundo da macieira, usaremos a cor do texto como Y. Espero que você entenda agora que temos essas três cores Mesmo assim, ainda não terminamos, porque temos que considerar a acessibilidade, que significa que precisamos verificar o contraste dessas cores. Se você não conhece a acessibilidade no U X, a explicação simples é quando criamos um design para usuários, devemos criá-lo para que qualquer pessoa possa usá-lo sem problemas. Se você é um produto usado por pessoas com deficiências, como quem não liga cores ou pessoas com baixa visão, devemos garantir que todos possam usar este aplicativo E não estamos apenas criando uma interface de usuário bonita, também consideramos o UA. E temos que colocar o usuário na frente e no centro e criar o design para os usuários. Na próxima lição, mostrarei como verificar o contraste. 6. Verificação de acessibilidade de cor: Agora é hora de fazer a acessibilidade, então temos que verificar o contraste. Para fazer isso, eu vou tocolortadobby.com Quando você acessa o site da Adobcolor, você verá esse tipo de guia e verá as ferramentas de tocolortadobby.com Quando você acessa o site da Adobcolor, você verá esse tipo de guia e verá as ferramentas de acessibilidade. Eu apenas clico nele. E agora eu tenho a ferramenta de verificação de contraste. Além disso, também tenho uma ferramenta daltônica. Nesse caso, clico em Contrast Checker, depois admito aqui e verifico a taxa de contraste Eu seleciono essa cor e vou aqui, depois colo a cor aqui. Depois disso, também selecionarei essa cor secundária. Quando verificamos o contraste, a taxa de contraste é muito baixa e o teste falhou. Isso significa que preciso usar a cor invertida, porque se eu criar um botão com esse componente gráfico do botão colorido e usar a cor inversa, branca, isso será um problema para os agressores Altere a cor do texto para branco e a cor de fundo pois essa cor verde ainda assim obtivemos o resultado justo. Agora vamos para a paleta de cores e verificar como ela funciona com a cor de destaque. Vou colocar o texto em cores de destaque e agora ele passa o texto Vamos mudar a cor do texto e a cor do plano de fundo. Se a cor de fundo for preta, isso funcionará bem. Mas, no nosso caso, precisamos adicionar a cor do texto como preto e a cor de fundo como essa cor verde. Então, agora o que podemos fazer é mudar essa cor marrom traseira. Eu posso usar esse filtro para alterá-lo, ou posso aplicar essa sugestão de contraste desta forma. Ok, parece que essa cor está funcionando bem. E vamos mudar a cor do sabor verde e a cor de fundo para preto. E funciona bem. E o contraste Precio é muito bom e agora temos que verificá-lo com essa cor branca, então vamos examiná-lo e adicionar a cor de fundo como essa cor branca E nesse caso, ainda falhamos. Então, o que devemos fazer aqui é minha sugestão, eu uso a cor de fundo como preto. Eu faço a cor principal ou cor primária, a cor da nossa marca é verde mais escuro Então, vou aplicar esse filtro. E então branco será a cor de fundo. Então você pode ajustar esse branco se quiser. Em seguida, vamos mudar a cor de fundo para a cor do texto. E está funcionando bem no meu aplicativo Call to actions, como botões em verde e o texto desse botão em branco. E essa é a cor verde que eu tenho que selecionar. E vamos para a paleta de cores e desbloqueá-la. Então eu vou mudar essa cor. Agora vamos copiar essa cor mais escura. E vou usar essa cor como cor de texto. Mas quando eu uso essa cor de texto, meus planos de fundo serão brancos assim Portanto, se usarmos esse método, não teremos problemas de contraste de cores. E passaremos no nosso teste de acessibilidade. Portanto, jogue com esses níveis e obtenha a melhor taxa de contraste. Ok, agora encontramos nossa paleta de cores. Na próxima lição, falaremos sobre como encontrar a tipografia adequada e melhor para o site 7. Aula de bônus: maneiras fáceis de selecionar cores: Ok, vamos ver a maneira fácil e rápida encontrar as cores certas para você. Podemos encontrar cores ou nos inspirar em nossos concorrentes para que possamos criar um quadro de humor e coletar o design de nossos E reúna alguma inspiração de design de sites como Dribble Bas e Painters Então, vamos fazer isso. Antes de tudo, criarei uma moldura no Figma e aumentarei o tamanho da moldura Este será meu quadro de humor, então vou renomeá-lo como quadro de humor Mas se você não tem experiência em Fikma, não se preocupe. Mostrarei como usar o Sikma nas próximas lições. Por enquanto, veja o que eu faço. Então agora eu vou encontrar meus concorrentes. Então, meus concorrentes são outros aplicativos de entrega de comida e padaria. Então, uma coisa que eu posso fazer é ir ao Place Stow e pesquisar o aplicativo de entrega de comida Ok, agora estou em meu lugar para prestar contas. Então, vou pesquisar aplicativo de entrega de comida e vou ver esse tipo de resultado. No entanto, você precisa encontrar os aplicativos relacionados ao seu nicho ou relacionados ao seu aplicativo, que significa que seus concorrentes verificam a conta de avaliação e encontram a inspiração do design. Por exemplo, se eu for até o Apply this e aqui eu posso verificar a tela do aplicativo. Também posso instalá-lo no meu celular e verificar a tela dessa forma. A próxima coisa que podemos fazer é verificar as inspirações de design em sites como o Dribble Agora estou no Dribble.com e você pode criar facilmente uma pré-conta no Bleble, um site que designers compartilham o trabalho Então, se eu for aqui e pesquisar o aplicativo de entrega de comida e selecionar o celular no campo, verei esse tipo de aplicativo. Vamos abrir alguns deles. Ok, depois abrir esses aplicativos, obterei uma captura Press Chief Command e Poll Mac. E no Windows você pode usar a ferramenta Ni Pin. Então, vou tirar a captura de tela do topo desta. Vamos fazer a captura de tela, na verdade , aqui. Temos a cor que o criador do aplicativo escolheu para criar o aplicativo. Então, vamos obter esses detalhes. Quando encontramos inspirações de design como o Dribble, maioria das vezes obtemos designs irreais, o que significa que, se criarmos designs com esses modelos como estão, pode ser uma boa interface de usuário Mas, às vezes, a maioria desses designs é complicada e não oferece uma boa experiência do usuário. No entanto, nesse caso, usamos esses designs para obter inspiração de cores. Mas também podemos usar esses designs para obter inspiração de design. Mas quando tentamos obter inspiração para o design, precisamos verificar a usabilidade e usar a experiência desses designs É por isso que devemos conduzir análise da concorrência e encontrar os pontos fortes e fracos de nossos concorrentes e obter ideias e inspiração de nossos concorrentes Ok, agora vou para a conta Figma e adicionarei todas as capturas de tela no quadro Mood . Basta selecionar Early Screenshot e fazê-las desta forma E agora vou colocá-los na moldura. Antes de fazer isso, clico na moldura e altero a cor do campo para “Like As”, que fique mais escuro Encontraremos facilmente a inspiração que reunimos. Ok, vamos comê-los assim. Quando criamos o quadro de humor, sempre tente pelo menos 20 inspirações de design Portanto, será fácil encontrar as cores certas ou obter inspiração de design ao verificá-las. Além disso, vemos claramente que existem cores como laranja, vermelho claro e verde para as cores. Essas são as cores da marca. E preto é a cor do texto e a cor de fundo é branca. Portanto, essa é a maneira mais fácil de obter inspiração em cores. Se você não tem ideia sobre cores, pode usar esse método para selecionar cores. Mas eu recomendo fortemente que você prefira a psicologia das cores e siga esse caminho. No entanto, depois de selecionar a cor, ao finalizar a seleção de cores, crie uma moldura como essa. E pressione, ao pressionar, abrirá o seletor de cores e eu gostaria de adicionar a cor verde Então clique na cor verde. E então eu gostaria de adicionar a cor marrom traseira. É branco. Então, vou duplicar isso pressionando Alt, arrastando para a direita e selecionando-o Em seguida, pressione e selecione a cor marrom traseira como branca. Ok, e também duplique e pressione, então temos que encontrar a cor do texto A cor do texto será essa. Tudo bem, agora temos três cores. 8. Fundamentos da tipografia: Escolher a tipografia certa para o aplicativo é parte mais importante do design da UY Compreender os fundamentos classificação de tipos, do tipo de letra e da fonte é essencial para criar um design que se comunique de forma eficaz e envolva os usuários sem problemas Então, vamos falar sobre classificação de tipos. A classificação de tipos tem várias categorias, características únicas. Existem duas classificações de tipos mais importantes, essas são Serif e San Serif Na classificação do tipo serifa, tem pequenas linhas decorativas no final dos caracteres Esses pontos transmitem um campo mais tradicional e formal Por outro lado, temos a classificação do tipo sunserif E a classificação do tipo Sun Serif não tem linhas no final dos caracteres. Esses telefones são limpos e modernos, o que os torna populares para interfaces digitais. Em seguida, temos que escolher o tipo de letra e a fonte. Vamos descobrir a diferença entre tipo de letra e fonte. Um tipo de letra é um design dos caracteres, enquanto uma fonte é o estilo e o tamanho específicos desse design Por exemplo, Aerial é o tipo de letra. 42 fix bold é a fonte. Vamos ver outro exemplo. Nesse caso, o tipo de face é Roboto e o frontal é normal de 50 semanas 9. Mensagem e emoção na tipografia: Vamos descobrir como selecionar a tipografia correta para seu aplicativo Nesta lição, darei as informações básicas. E na próxima lição, usaremos o conhecimento que reunimos nesta lição para selecionar a tipografia adequada ao nosso aplicativo E usaremos sites como o Google Phone para encontrar o melhor telefone para qualquer tipo de aplicativo ou site. Cada aplicativo ou site tem uma mensagem e emoções específicas que permitem que os usuários sintam o propósito do produto. Essas emoções e mensagens são cruciais para selecionar uma tipografia eficaz Ao considerar as mensagens, podemos reconhecê-las em três partes. Aquelas eram sérias, divertidas, modernas, o luxo mais tradicional era casual Vamos falar sobre cada uma dessas mensagens. Em mensagens sérias, podemos selecionar classificações. Por exemplo , neste exemplo para jogar sinuca, pudéssemos selecionar a classificação do tipo sans serif. , neste exemplo para jogar sinuca, pudéssemos selecionar a classificação do tipo sans serif A ferrovia é o melhor exemplo, como eu disse antes. No próximo vídeo, descobriremos como verificar a fase da tipografia em sites como o Google Phone Então temos a categoria tradicional moderna. A categoria moderna tem uma classificação minimalista do tipo sanseriffont No tradicional temos a classificação do tipo serifa e, em seguida, temos luxo e casual Em mensagens de luxo, podemos obter fontes elegantes de classificação de tipo serifado para Cashewal, podemos obter pontos como manuscritas ou Além disso, podemos selecionar a tipografia correta de acordo com as emoções que transmitem no aplicativo Principalmente, existem três tipos de emoções. Esses danos foram enérgicos, a fonte era séria e o formal era informal Compartilharei a documentação que você pode consultar e aprenderei mais sobre o tipo de classificação que podemos selecionar de acordo com as emoções. Depois de entendermos a classificação de tipos do nosso aplicativo ou site, devemos priorizar a Não importa a legibilidade da sua marca, fotografe, sempre seja a principal prioridade Escolha um tipo de letra e um tamanho de fonte que sejam agradáveis à vista, especialmente para textos mais longos Na maioria das vezes, o Sons Phone costuma ser preferido para conteúdo digital devido à sua clareza e facilidade de leitura nas telas Na próxima lição, aproveitaremos nossa compreensão da seleção de tipografia para escolher o ponto perfeito para o design do nosso aplicativo 10. Como usar o site do Google Fonts: Vamos descobrir como selecionar uma fonte para nosso projeto. Portanto, existem apenas duas maneiras. O primeiro método é considerar a emoção e a mensagem da marca. E selecione uma fonte de acordo com a mensagem. E a segunda forma é fazer uma análise da concorrência e encontrar os melhores concorrentes diretos e indiretos Em seguida, verifique a tifografia que eles usam no design. Vamos fazer os dois métodos. E, a princípio, vamos descobrir como selecionar uma tifografia acordo com a marca Então, vamos dar nosso exemplo de que mensagem de um escritório de advocacia é séria, o que significa que deve ser um argumento serifado Também na emoção, a mensagem ou a emoção deve ser séria. O que significa que podemos usar a tipografia em negrito San Serif. Portanto, temos duas opções. Primeiro, vamos descobrir a tipografia de classificação de tipo serifado Então eu vou para Font.google.com e Font.dooogle.com ou o Google Font tem uma coleção de fontes ou o Google Font tem uma coleção de fontes que podemos usar em nosso projeto. Na fonte do Google, temos uma barra de pesquisa. Se você conhece uma fonte específica, pode pesquisar Kitten aqui desta forma. Então, vamos ver. Queremos encontrar o tipo de letra, Core Roboto. Então, quando eu pesquisei, recebi o telefone Roboto Ok, eu jogo fora, e então aqui podemos digitar algo que aparece na pré-visualização do texto Agora, aqui, podemos alterar o tamanho do telefone. Depois disso, temos filtros. Em nosso exemplo, temos que encontrar a classificação do tipo Serif Então eu seleciono Serif. Quando eu seleciono, obtenho esse tipo de pontos relacionados à classificação Serf Quando verificamos o telefone, isso deve ser sério. Percorra os telefones do Google e encontre o ponto. Nesse caso, eu gostaria de selecionar esse tipo de ponte. Vamos clicar no telefone e ele se abre assim. Aqui temos o nome do telefone. Aqui temos a característica do telefone. Agora eu posso ir para o teste de tipo. No teste de digitação, posso ver a pré-visualização do texto nas linhas do título e no texto do parágrafo. Para o cabeçalho, isso será muito bom, mas para o corpo do texto ou do parágrafo, não será uma boa opção porque a legibilidade não é muito boa Mas podemos ajustar o tamanho da fonte e o espaçamento entre letras e depois testá-la, funcione ou não Se eu diminuir o tamanho da fonte para 14 pixels e aumentar a altura da linha para o dobro, talvez pareça melhor, mas eu gostaria de selecionar esse cabeçalho de fonte e precisamos encontrar uma fonte diferente para o corpo do texto. Além disso, ao selecionar a fonte, sempre leia o texto sobre e descubra os detalhes dessa tipografia Porque na maioria das vezes essas fontes têm características e o desenvolvedor dessas fontes ou o designer dessas fontes as mencionam na seção sobre. Então, vamos encontrar a fonte para o corpo. Então, para fazer isso, vou para a página inicial. Ok, agora eu vou novamente para a fonte do Google para a página. E desta vez vamos encontrar texto para o corpo. Quando encontramos texto para o corpo ou para os parágrafos, devemos priorizar A classificação do tipo Sansi será melhor para o corpo do texto. Eu clico nesse filtro sansori e obtenho esse tipo de fonte Agora vou diminuir o tamanho para, digamos, 21. E agora vamos descobrir a fonte adequada para o design do Body of the Law Firm. Aqui temos uma tipografia com aparência profissional. Vou clicar nele e depois posso ver a aparência da tipografia Então, vamos ao teste de digitação. E aqui temos a prévia do texto do parágrafo e vou destacá-la. Em seguida, vamos definir a altura da linha em 1,25 e, em seguida, podemos alterar a largura da fonte Vamos fazer o Was 300, ok. Essa é uma fonte mais clara, então agora temos duas fontes. Para selecionar. A fonte, podemos apenas encontrar o telefone que estamos procurando e essa é a tipografia E este é o telefone com 300. Em seguida, clico no botão Selecionar e aqui temos todos os detalhes do telefone. Além disso, se eu for até a fonte que selecionei antes para o título, vamos para o teste de digitação. E selecionamos o tamanho como 40. Na verdade, 40 A é muito grande para o aplicativo, então vamos fazer com que seja 40 e serão 400. Então, aqui temos os detalhes rapidamente. E agora temos a fonte selecionada. E no Figma, podemos digitar esse texto na seção de fontes e selecionar a tipografia Nas próximas aulas, mostrarei como usar essas fontes no design do Figma. E na próxima lição, selecionaremos a fonte para nosso aplicativo de entrega de comida 11. Selecionando fontes para um novo aplicativo de entrega de alimentos: Ok, vamos selecionar a tipografia para nosso aplicativo de entrega de comida. Portanto, a mensagem do aplicativo de entrega de comida está relacionada à modernidade, o que significa que temos que selecionar uma classificação minimalista do tipo san serif Portanto, se verificarmos as emoções desse aplicativo de entrega de comida, ele deve ser enérgico Portanto, a classificação do tipo energético é San Serif. Então, vamos ao telefone do Google e clique em Filtrar. Em seguida, selecione Sanserif. E aqui temos a fonte. Então, vamos selecionar a fonte do nosso aplicativo. Meu plano é selecionar um telefone ou selecionar uma tipografia para todo o aplicativo Ao selecionar um ponto, lembre-se sempre de selecionar um ou dois pontos Você precisa lembrar as chaves, o princípio do design de UX, o que significa mantê-lo simples. Design estúpido de UF baixo. Eu gosto desse telefone chique. Vamos abri-lo em uma nova janela e rolar para baixo para encontrar outras opções. Eu quero um telefone que tenha um visual moderno. Eu gosto dessa fonte M mais uma, então vamos clicar nela duas. E vamos ao testador de tipos. E no teste de digitação, alterarei o tamanho da tipografia da cabeça para 32, e o tamanho do parágrafo será de 16 pixels e o normal Eu acho que isso é compatível. Então, vamos selecioná-lo. E então precisamos, estamos prontos para selecionar os dois. E agora vamos para esta fonte Molis e o teste de tipo no testador de tipos, altere o tamanho da fonte para 32, 16, o peso acabará Ok, vamos selecionar isso também. Tudo bem, agora aqui temos as fontes que selecionamos. Então, para descobrir essas fontes, basta clicar neste Car Ton. E aqui você pode encontrar a fonte. Vá também para a seção Sobre, e aqui você pode ver os detalhes Sobre. Essa fonte é uma fonte de sensor minimalista projetada para exibição e tipografia projetada para exibição e E aqui estão os detalhes. Então, eu realmente gosto desse telefone e vamos usá-lo, testar o texto do cabeçalho e do parágrafo em nosso aplicativo. Então é assim que eu seleciono o telefone. Existem telefones premium e, nos telefones do Google, você pode encontrar telefones profissionais e gratuitos. Devo dizer que não existe uma maneira certa ou errada de selecionar um ponto. A única coisa que você deve considerar é a legibilidade. Sempre priorize a legibilidade e a acessibilidade . Até você encontra uma ótima fonte e a adiciona ao seu design. Então, o contraste não corresponde e os usuários não conseguem reconhecer facilmente a mensagem que você diz, eles não conseguem lê-la. O que significa sempre tentar ajustar a fonte de acordo com o aplicativo. Você pode aumentar o tamanho da fonte, a largura da fonte e o espaçamento entre linhas para ajudar os usuários a ler facilmente a fonte, ler o parágrafo e entender a mensagem 12. Iconografia: Imagine um mundo sem barreiras linguísticas. Um mundo onde todos falam a mesma língua. Uma linguagem de símbolos. Esse é o poder da iconografia. Ícones são mais do que imagens. Eles são uma ferramenta poderosa que pode orientar os usuários, transmitir informações e tornar seu design mais envolvente Ao usar o ícone de forma eficaz, você pode melhorar a compreensão do usuário. Claro e consistente. Icon pode ajudar os usuários a navegar pela interface e entendê-la. Funcionalidade, mesmo que eles não falem o idioma do design. Aumente o engajamento. ícone bem projetado pode adicionar interesse visual ao design e incentivar os usuários a explorar diferentes recursos, economizando espaço. ícone pode transmitir muitas informações em uma pequena quantidade de espaço, tornando-os ideais para sites e aplicativos móveis, pois o espaço na tela é limitado Vamos descobrir como selecionar os ícones certos. Usar os ícones certos é essencial para maximizar sua eficácia. Aqui estão algumas coisas que você deve ter em mente ao selecionar o ícone do seu projeto. Claridade, o fator mais importante é que o ícone seja facilmente compreendido pelo seu público-alvo. Deve ser simples, familiar e facilmente interpretável Consistência. Use ícones do mesmo conjunto ou biblioteca para manter um estilo visual consistente em todo o seu design. Isso ajudará os usuários a se sentirem compatíveis e familiarizados com o contexto da interface. Considere o contexto no qual o ícone será usado. O significado do ícone pode mudar dependendo dos elementos ao redor. Acessibilidade, certifique-se de que seus ícones estejam acessíveis a usuários com deficiências. Isso pode significar usar cores rápidas, fornecer descrições de texto em LT ou alternativas e garantir que os ícones sejam grandes o suficiente para serem vistos com clareza. Agora você pode pensar que devemos encontrar ícones. Há muitos lugares onde você pode encontrar ícones de alta qualidade para seu projeto de design. Aqui estão algumas preoções populares, Pontosm, ícones do Google Material, o substantivo projeto como Pontosm, ícones do Google Material, o substantivo projeto. Aqui estão algumas versões pagas. Eu posso encontrar um site de fotografia de stock como Do Stock e Hutto Depois de escolher seus ícones, é importante usá-los de forma eficaz em seu design. Aqui estão algumas dicas. Não sobrecarregue seu design com ícones. Muitos ícones podem ser opressores e confusos para o usuário Emparelhe o ícone com o texto. Ao usar um ícone desconhecido, é útil combiná-lo com rótulo de texto para explicá-lo Ou seja, use o status de foco. Quando o usuário passa o mouse sobre um ícone, uma dica de ferramenta pode aparecer para explicar sua função Ícones de teste. É importante testar seus ícones com os usuários para garantir que eles sejam claros e compreensíveis Seguindo essas dicas, você pode usar um ícone ou gráfico para criar um design mais amigável e envolvente. 13. Sistema de design: Pense em um sistema de design como uma caixa de ferramentas para seu projeto de UF. É uma coleção de componentes reutilizáveis, como botões, ícones, layout, junto com as diretrizes de design Tudo o que você precisa para criar uma experiência visualmente consistente e fácil de usar. Então, por que você deveria investir tempo aprendendo sobre o sistema de design? Aqui estão alguns dos principais motivos. Primeiro, aumenta a consistência Imagine um site em que o botão tenha uma aparência diferente em cada página. É confuso e frustrante para os usuários. Sistema de design, garanta que sua identidade de marca permaneça consistente em todas as formas de fatos. E construir confiança e reconhecimento no final tem eficácia. Chega de pré-inventar o sistema de design real, economiza tempo e esforço valiosos ao fornecer componentes prontos que você pode facilmente adaptar e integrar ao seu projeto Fortaleça a colaboração, esqueça as falhas de comunicação. O sistema de design serve como uma única fonte de verdade. Promover uma compreensão clara e colaboração entre designers, desenvolvedores e outras Crie interfaces estelares dos EUA familiares com componentes individuais e layout consistente para facilitar navegação e a interação dos usuários com Em última análise, isso leva a uma experiência de usuário importante, agradável e envolvente Agora você pode estar pensando em criar seu próprio sistema de design do zero. Embora essa seja uma opção, ela requer tempo e recursos significativos. Em vez disso, considere explorar os vários sistemas de design existentes disponíveis, cada um com sua própria força e característica. Aqui estão alguns exemplos populares, Google Material Este sistema de design criado pelo sistema Google Material Design oferece um conjunto abrangente de componentes e diretrizes para criar interfaces modernas e bonitas. Diretriz de Interface Humana da Apple, Apples HIG, fornece especificações detalhadas para criar aplicativo que funciona em casa dentro do sistema de design Carbon do ecossistema Apple sistema de design de carbono da IBM se concentra na acessibilidade e inclusão, garantindo que seus produtos sejam utilizáveis Aprender sobre esses sistemas de design existentes e como eles funcionam não apenas aprimorará suas habilidades de X, mas também oferecerá informações valiosas sobre as melhores práticas e os padrões do setor 14. Princípios e leis de UX: Criar um aplicativo móvel não significa apenas pensar na aparência e na funcionalidade do aplicativo, mas também entender o usuário. E coloque o usuário no centro do foco, o que significa que temos que priorizar as necessidades do E projete nosso aplicativo para oferecer soluções para os pontos problemáticos dos usuários. Então, para fazer isso, temos princípios de Ux. Nesta lição, vamos aprender sobre o princípio X. O primeiro princípio é o design centrado no usuário. Imagine um mundo em que sites e aplicativos sejam projetados com suas necessidades e preferências específicas em mente. Essa é a essência do design centrado no usuário. Essa filosofia nos coloca no centro de cada decisão. Veja como funciona. Primeiro, temos que ter empatia com o usuário, o que significa que temos que trabalhar no lugar do usuário, entender suas necessidades, objetivos, frustrações modelos mentais por meio de pesquisas e Então, temos que fazer pesquisas precoces e frequentes com os usuários. Portanto, não espere até o final do projeto. Obtenha feedback durante todo o processo de design para refinar e melhorar continuamente seu produto Depois, temos que criar protótipos e testá-los com usuários reais Esse ciclo de feedback nos ajuda a identificar e resolver problemas de usabilidade desde o início Então, temos que nos concentrar em toda a jornada. Cada ponto de contato é importante, projetado não apenas para recursos individuais, mas para toda a experiência que os usuários têm com seu produto. O segundo princípio é a consistência. Isso nos ajuda a criar confiança e familiaridade de todos. Imagine entrar em um restaurante onde o layout muda toda vez que você visita. Seria frustrante, certo? A consistência na UX é como um layout familiar do seu restaurante favorito. Promove um senso de confiança e familiaridade. Facilite a navegação e a interação dos usuários com seu produto. Aqui, um aspecto fundamental da consistência, o primeiro é o design visual. Mantenha a consistência nas fontes, cores, layout e ícones em todas as interfaces. Então, devemos considerar a navegação. Portanto, mantenha a estrutura de navegação consistente em diferentes páginas e seções. Em seguida, terminologia. Use terminologia e jargão consistentes para garantir clareza e compreensão. Agora temos princípios de acessibilidade. A acessibilidade ajuda a criar um design inclusivo para todos. Imagine um mundo em que você possa acessar e aproveitar o mundo digital , independentemente das limitações. acessibilidade na UX garante que o produto seja utilizável e inclusivo para todos, incluindo pessoas com deficiências Aqui estão os aspectos essenciais da acessibilidade. Conformidade com o Wcag Siga o conteúdo da web. As diretrizes de acessibilidade são de curto prazo. Usando as diretrizes do WCAG, você pode garantir que seu site ou aplicativo seja acessível a usuários com habilidades diversas, linguagem clara e consistente Evite jargões e termos técnicos. Use uma linguagem simples e direta que todos possam entender Texto alternativo para imagens, forneça texto descritivo para imagens. Então temos Princípio Fundamental Imagine um site em que as informações são fragmentadas e desorganizadas Seria difícil processar e entender por que, aplicando esses princípios, você pode criar, visualmente atraente e usar uma interface amigável No design dos EUA, há três princípios fundamentais nos princípios do Gita Essas são semelhança, proximidade e região comum. Similaridade significa elementos relacionados ao grupo que compartilham características como cor, tamanho e formas que melhoram a clareza e A proximidade é colocar elementos relacionados próximos uns dos outros para conectá-los visualmente e orientar a atenção dos usuários. A região comum contém elementos relacionados dentro um limite compartilhado para criar um grupo distinto e aprimorar Ao combinar design centrado no usuário, consistência, acessibilidade e princípios da Gstar, você pode criar uma experiência de usuário que não seja apenas funcional e eficiente, mas também agradável, envolvente e Lembre-se de que o objetivo final da UX é tornar a vida dos usuários mais fácil e agradável Em aulas futuras, aplicaremos esses princípios em nosso design e obteremos a experiência de como esses princípios nos ajudarão nos projetos do mundo real. 15. Arquitetura de informação (IA): A dificuldade de encontrar informações em um site ou uma boa arquitetura de informações facilita que os usuários encontrem, entendam e usem o que precisam . É uma força visível por trás de uma ótima experiência do usuário. Pense na arquitetura de informações da AO como um mapa. Você precisa navegar em um novo lugar. Deve ser claro, consciente e fácil de seguir. Caso contrário, você se perderá e se frustrará. Veja por que uma boa IA é importante. Facilidade de localização, os usuários podem localizar facilmente o que precisam, seja um produto, uma postagem de bloqueio oculta ou um suporte ao cliente As informações de compreensibilidade são claras conscientes e organizadas logicamente Uso na linguagem Todos os gráficos usabilidade: a navegação é intuitiva Permitindo que os usuários realmente se movam e encontrem informações relevantes sem frustração. Então, aqui estão os princípios fundamentais do bem, é claro e simplificado. Use apenas linguagem simples e evite jargões. É uma estrutura hidráulica, que significa agrupar informações de forma lógica, começando e ramificando a partir da usabilidade e facilidade de localização específicas de Priorizando a pesquisa e o filtro nas ferramentas. Consistência e antecipação, o que significa manter um estilo e layout uniformes em todo o design E aqui está a maneira de criar um carrinho de arquitetura de informações eficaz , encurtando o conteúdo do grupo com base em como o usuário o preserva. Antes do teste, avalie como os usuários navegam na estrutura de informações. Os mapas do site fornecem uma visão geral visual da estrutura do local da onda. As razões do usuário definem seu público-alvo e suas necessidades de informação Audite o conteúdo, analise o conteúdo existente quanto à relevância, precisão e organização. 16. Prós e contras do Figma e criando uma conta no Figma: Ok, vamos criar uma conta no Figma. Então clique no link em Descrição, e você chegará ao Figma.com No Figma, clique neste botão Começar E nesse pop-up, você pode usar seu e-mail e passar ou continuar com o Google. Vou clicar em Continuar com o Google. Aqui vou selecionar minha conta do Gmail. OK. Estou aqui, posso adicionar o nome. Então, adicionarei meu nome e clicarei em Continuar. Aqui eu tenho que selecionar o tipo de trabalho que eu faço. Então eu clico em Design e depois clico em Continuar. Basta selecionar as opções necessárias e continuar. Aqui, posso convidar outros membros ou membros da minha equipe. Nesse caso, clico no botão Ignorar. Agora temos uma pergunta. O que o traz à Fima hoje? Então eu clico em Outro e clico em Continuar. Clique assim e clique em Continuar. E aqui, clique em Starter e clique em Continuar. Vou pular essa parte. Aqui criamos nossa conta Fima. Agora vou criar um design. Para fazer isso, clique nesse arquivo de design e clique em Rascunho. Tudo bem, aqui podemos criar o design que queremos. Primeiro de tudo, vou nomear esse design. Para fazer isso, clique no nome desse arquivo. Atualmente, é Sem título. Vou renomeá-lo. Primeiro, pressione Enter e agora temos opções para criar o design. Então, chamamos essa parte de tela, ou podemos chamá-la de prancheta E aqui, temos opções para selecionar e criar elementos como molduras, formas e linhas com lápis de caneta E aqui temos textos. E também temos o botão de recursos. E temos ferramentas manuais. E aqui temos o botão de comando. Então, vamos criar um quadro. Basta clicar aqui e, quando clico, obtenho os tamanhos de moldura pré-construídos. Então, neste caso, vou selecionar o tamanho como iPhone 13.14 E esta é a moldura Então, quando construímos nosso aplicativo, nós o construímos nesse quadro. Então, vou renomear esse quadro para casa. E agora vou criar um retângulo. Para fazer isso, eu clico aqui, pronto. Quando eu crio um retângulo aqui, eu tenho as propriedades do retângulo Então, podemos mudar a largura aqui e aqui desta forma. E podemos mudar a cor de preenchimento, boom aqui. Assim, podemos adicionar traços e sombras E há muitas opções. Então, agora eu crio um texto. Para fazer isso, clique neste ícone e clique aqui. Então, vamos adicionar texto pra caramba. Ok, e agora vou centralizar assim. Então aqui eu posso mudar a fonte. Vou alterá-lo como poppins e o tamanho falso será 45. Em seguida, torne-o semibold. E coloque o texto no centro, alinhe-o ao meio E aqui podemos mudar a cor. Então, aqui podemos selecionar outros tipos de formas como essa. E nesta mão, podemos verificar a tela. Se essa tela tiver muitas molduras, podemos simplesmente subir e descer e verificá-la como quisermos. Então, agora temos essa opção de comentário. O Fima é uma ferramenta colaborativa. Se você tem uma equipe e quer mencionar algo, basta clicar neste comentário e comentar. Eu quero adicionar um comentário aqui. Então eu clico aqui e adiciono o comentário como caixa de troca para teste e primeiro entro. E quando você passa o mouse sobre ele, você pode ver o comentário que você adicionou E também pode ver o membro da sua equipe. Além disso, você pode mencionar membros da equipe dessa forma e clicar aqui em Assinar e adicionar os usuários ao nome do membro da sua equipe. Nesse caso, não temos membros da equipe, vou me mencionar assim. Depois, podemos adicionar imagens e também podemos fazer upload de imagens, basta brincar com elas. E no seu lado esquerdo, você pode ver a moldura e os elementos criados. Portanto, temos esses painéis de afirmações e, em aulas futuras, examinaremos muitas dessas seções e detalhes Agora, neste botão de mais, e aqui você tem um botão de presente. Se você clicar nele, o design será aberto assim no Figma, também podemos converter essas marcações ou os designs em protótipos e veremos como eles funcionam nas próximas aulas Além disso, temos a opção de compartilhar se eu clicar neste botão Compartilhar e posso obter um link compartilhável desse design Então, essas são as coisas básicas que você deve saber sobre Figma E, em essência, você dominará o Figma e poderá criar o design do Figma facilmente 17. Layout de diagrama: Ok, agora vamos nos familiarizar com as grades. Então, vou remover esse quadro de formulário e criar três quadros. Então, vou remover esses comentários, excluí-los. E agora vou criar molduras. Então, primeiro eu clico na moldura e crio uma moldura de tamanho de formulário. E então eu crio outro quadro, e esse será do tamanho de um tablet. No tablet, ele cria esse tamanho de moldura e também cria uma moldura do tamanho de uma mesa. Tudo bem, agora temos três quadros. Quando projetamos nosso elemento de interface de usuário, devemos pensar em uma maneira de alinhar esses objetos para que possamos usar a grade de layout para fazer o alinhamento Primeiro de tudo, clico na moldura e clico neste Layout Grid Plus. E agora temos esse tipo de layout de grade. Vamos aumentar o tamanho. Aqui eu clico nessa configuração de layout de grade. Aqui, clico de cima para baixo e clico em Coluna. Esta é uma base telefônica interna. Selecionarei a contagem de colunas como cinco e adicionarei a margem como 20, o que significa que teremos 20 pixels de espaço. OK. E a calha é o tamanho entre dois elementos Então eu vou dizer sarjeta até 50, assim. E vamos fazer isso com o iPad Mini. E selecione o iPad Mini tablet Frame. E clique em Grade de layout e clique aqui. Em seguida, selecione Colunas. Aqui, definirei a contagem de colunas em seis, a margem será 30 e a medianiz será 15 OK. Você pode alterar esses espaços de acordo com seu design. Essa é a maneira que eu usei para criar o layout. Vamos ao Desktop Frame. Clique em Grade de layout. Clique aqui, Definir coluna. Em seguida, no Layout da área de trabalho, serão 12 colunas e a margem será 140. Mas será 20. Então essa é a aparência do design. Então, se eu for para a versão desktop, e agora, se eu criar um retângulo, posso alinhá-lo de acordo com essas grades É por isso que devemos considerar a criação layout de grade para entender o alinhamento do nosso design Na próxima lição, descobriremos como usar layout automático e criar facilmente nosso design. 18. Noções básicas de layout automático: Quando eu comecei a usar o layout automático, isso me confundiu. Mas há muitos benefícios em usar o layout automático. A maior vantagem é que você pode economizar seu tempo aplicando o layout automático ao seu design. Porque se não usarmos o layout automático, teremos que ajustar manualmente as posições. Além disso, depois de criarmos um design, se quisermos adicionar algum conteúdo ou mais elementos à seção do quadro, precisamos apenas do quadro inteiro para fazer isso. Mas quando usamos o layout automático, podemos simplesmente adicionar elementos conforme quisermos e o layout se adaptará de acordo com os elementos. Além disso, podemos criar um design responsivo com o layout automático, que abrange Quando alteramos o tamanho da tela, os elementos diminuem ou aumentam de acordo com a moldura Ok, vamos começar a criar um design com layout automático. Então, vou remover essas molduras e vamos criar uma moldura para o telefone. Então, vou selecionar esta moldura para iPhone 15 pro. Ok, vamos adicionar uma grade de layout a esse quadro porque será mais fácil verificar o alinhamento. Faça uma coluna, a contagem de colunas será cinco, margem será 15 e a medianiz será Ok, como primeira etapa para entender o poder do layout automático, criarei dois botões. Para o primeiro botão, não usarei a opção de layout automático. E no segundo botão vou usar o layout automático. Então, vamos criar o primeiro botão. Para fazer isso, clico no retângulo e crio uma garrafa como essa Está bem? E vamos mudar a cor de preenchimento para vermelho. E vamos adicionar cantos como 15. Esse é o plano de fundo do botão. E agora clique no texto. E vamos adicionar o texto. Clique em OK. Agora podemos adicionar texto como Roboto. No Roboto Naked Medial, o tamanho será 30 Ok, agora eu coloco esse texto no retângulo e vamos mudar a cor de preenchimento Por que destacar esses dois textos. E pressione o comando G para agrupá-lo. Em seguida, clico nesse texto e em uma linha no meio. E clique no texto, uma linha como clique no centro da linha horizontal. E agora eu clico no botão. E vamos fazer com que seja assim. E vamos pensar que precisamos adicionar o preenchimento superior 15 e o preenchimento inferior Para fazer isso, vou ajustar esse texto para 15, 15. E então vamos pensar que precisamos adicionar o preenchimento 50 à direita e à esquerda Para verificar o preenchimento, você pode clicar no elemento que deseja verificar E pressione tudo assim aqui. Precisamos fazer com que isso seja 50. Para fazer isso, temos que ajustá-lo manualmente desta forma. Nove. Ok, aqui estão 15 e então temos que fazer o mesmo. Ok, agora aqui temos uma garrafa. Então, vamos criar a mesma garrafa com layout automático. Para fazer isso, clico no teste e crio um teste chamado click Me, e agora clico em Shift A. Shift A é um atalho para criar um layout automático. Está bem? O texto acabou de se tornar um layout automático. Se verificarmos no lado direito, veremos esta seção de layout automático. E nesse layout automático, podemos alterar a posição do texto conforme quisermos. Ok, no layout automático, podemos adicionar preenchimento conforme quisermos Basta clicar nesse preenchimento individual e temos que adicionar o preenchimento esquerdo e direito como 15 E o preenchimento superior, vamos ver, o preenchimento superior 15. O preenchimento superior será 15. Antes de fazer isso, tenho que fazer assim. E agora o preenchimento superior vermelho, 15, 15 Ok, agora vamos adicionar a cor de preenchimento. A cor de preenchimento será correta e a cor do texto será preta. Ok, agora nos cantos, então os cantos serão 15. Aqui estão os dois botões, ok? Então eu clico no texto e clico aqui para torná-lo conteúdo. E também faça esse conteúdo, que significa que o tamanho será alterado de acordo com o texto. Então, vamos mudar esse texto para curtir por um. Ganhe um de graça por um. Receba um grátis. OK. Agora vamos colocar assim. E se vamos fazer o mesmo aqui, vamos fazer com um, pegar um C grátis, temos que ajustar manualmente o conteúdo desta forma. É por isso que eu digo que o layout automático é realmente poderoso e não é assim. Se quisermos alterar o preenchimento e a margem. Então, vamos fazer esse preenchimento esquerdo como 30. Só precisamos clicar aqui e podemos ajustá-lo assim. Ou quando clicarmos nele, obteremos esse tipo de pop-up. E aqui podemos adicionar os tamanhos. Podemos ir aqui e adicioná-lo a partir daqui. Está bem? OK. Nesse caso, se quisermos fazer isso, precisamos ajustá-lo manualmente dessa forma. Esse é apenas um exemplo simples. Mas, no futuro, você verá o verdadeiro poder do layout automático. Além disso, vamos adicionar layout automático a esse quadro. Para fazer isso, selecione o quadro e você pode escolher diretamente esse botão de adição do layout automático. Ou você pode pressionar Shift. Nesse caso, basta clicar nesse botão de adição. vamos ver, queremos transformar esses dois botões na horizontal. Para fazer isso, basta clicar no botão Layout Horizontal e esses dois se tornam o Horizontal. E se quisermos ser verticais, podemos simplesmente clicar em Vertical. E vamos mudar o tamanho entre esses dois objetos assim. Vamos fazer com que 20 pensem que queremos ajustar esses dois designs de acordo com a moldura. Para fazer isso, clique no item e clique no recipiente de descascamento de redimensionamento horizontal Agora você vê que nosso botão vai além da grade de margem. Para corrigir isso, podemos simplesmente alterar o preenchimento para a esquerda e para a direita. Clique aqui, podemos adicioná-lo como 15, e ele automaticamente se torna 15. Então, agora, se tivermos que mudar a posição, podemos clicar no layout e mudar a posição desta forma. Esse é um método realmente poderoso para criar projetar um bot e esse é o benefício do layout automático. No futuro, aprenderemos mais sobre o layout automático e criaremos o aplicativo de entrega de comida com esse recurso de layout automático. E eu vou analisar todas essas opções. Enquanto isso, faça sua pesquisa ou simplesmente brinque com essas opções e saiba como elas funcionam Como eu disse antes, isso foi muito complicado para mim quando comecei. Mas quando tento ajustar as opções do layout automático, fica fácil criar o design que eu trabalho para praticar. Vamos criar outra opção. Então, basta clicar aqui e alterá-lo para 60. E neste momento, vamos criar uma moldura e alterar a cor do campo da moldura para azul. Vamos fazer 15 como cantos. Agora vou duplicar esse quadro assim. Então pressione o controle C, desculpe. Basta selecionar a moldura, controlar e controlar. Ok, agora mude as cores para verde e essa ficará amarela. Ok, agora vamos pensar que queremos colocar essas três caixas na horizontal. Para fazer isso, selecione todos esses objetos e pressione Chief, e eles acabaram de ser adicionados ao layout automático. E agora eu posso clicar no layout horizontal e torná-lo horizontal. Vamos mudar o espaçamento entre esses botões para 15, vamos fazer com que seja como 30 Vamos pensar que precisamos mudar o tamanho dessas caixas. Para fazer isso, clique nessas caixas para fazer o layout e altere-as para preenchê-las. E agora selecione todas essas molduras e torne-as como recipientes de enchimento. Veja, agora podemos ajustá-lo de acordo com o design. Agora, se quisermos adicionar outro retângulo como este, podemos simplesmente criar um retângulo quadrado Desn e colocá-lo como se pudéssemos copiar um desse retângulo e colá-lo assim desse retângulo e Então vamos mudar a cor para lutar. E esse é o poder do layout automático. Espero que você entenda o básico do layout automático. E no futuro, você descobrirá muito mais sobre a colocação automática e nos veremos na próxima lição. Na próxima lição, aprenderemos como criar uma folha de adesivos E entenda o que é a folha de adesivos e como usamos a folha de adesivos para destacar nosso design Nos vemos na próxima aula. 19. Criando um logotipo de marca: Agora temos as cores e a tipografia do nosso desejo. Então não temos o logotipo da marca, só temos esse texto chamado Sweet Food. Então, vamos converter esse texto em logotipo da marca. Para fazer isso, vou fazer uma cópia e ir até a folha de adesivos Na folha de adesivos, eu apenas passo o passo, depois duplo essa cor e vamos colocar esse espaço como 90 E aqui eu mudo isso para logotipo, e agora eu posso mudar texto para cabeçalho. Então, vamos adicionar essa cor da primeira parte à cor verde e a segunda parte à essa cor escura. Se quisermos, podemos adicionar alguns ícones pequenos na frente deste texto. Para fazer isso, precisamos encontrar o ícone. Então, vou a um site como o que posso encontrar para encontrar um ícone gratuito. Agora estou no Iconfinder. Aqui, vou procurar uma padaria. Então temos esse tipo de ícone. Então, vamos selecionar algo minimalista e ficar bem nesse design Neste filtro, basta clicar em Ligar gratuitamente e vamos descobrir o ícone gratuito. Vamos adicionar um cupcake assim. Então, vou baixar esse cupcake. Tudo bem. Agora vou para o design, e aqui vou colocar o ícone do cupcake Então vou diminuir o tamanho do bolo. E vamos selecionar esses dois textos. E pressione Shift no layout automático e, em seguida, coloque-o no centro esquerdo. Ok, então vamos soltar esse ícone. Basta clicar duas vezes no ícone. E você verá esse tipo de painel aqui, faça-o recortar. E agora podemos copiar assim. Ok, é maior, vamos torná-lo um pouco menor assim. E agora vamos adicionar uma linha de preenchimento aqui. Este é apenas um ícone minimalista. Ok, esse é o design. Acho que vou mudar essa cor Pka para verde E então vou mudar essa cor Cpk para essa cor escura ou verde Acho que essa cor escura vai ficar ótima. Então, vou clicar no ícone. E agora eu clico nesta garrafa de vinho. E aqui eu aumento o tamanho em dois ovos. Portanto, essa é a opção de porta. E selecione os ícones e a porta G clk. E agora vou abrir o Potoshop e mudar a cor. Ok, basta mudar a cor. Agora eu clico duas vezes na imagem e clico neste pequeno ícone de seta. Em seguida, clique em Colocar vídeo de imagem. E abrirá meu editor de arquivos. E aqui eu vou ver o ícone, o editor de gravatas. Ok, então eu clico aqui para colar. Tudo bem, cola e este é o globo que acabamos de criar. Agora temos as cores, logotipo e a tipografia Também aqui temos placa de arame. E no próximo nível, criaremos a marcação de alta fidelidade. 20. Folha de etiquetas: folha de adesivos é uma coleção de elementos de interface de usuário predefinidos, como botões, menus, ícones e outros Portanto, a folha de adesivos é como uma folha de dicas para designers. Ele ajuda os designers a criar interfaces consistentes e fáceis com rapidez e facilidade. Então, vamos descobrir como criar uma folha de adesivos e quais são os benefícios de ter uma folha de adesivos Este é o nosso arquivo Figma. Vou para a página de marcação. E aqui vou criar uma nova moldura. Clique aqui e aumente o tamanho da moldura dessa forma. Agora vou mudar o nome desse quadro para Tika She. OK. Como eu disse antes, Tika Sheet é uma coleção de designs pré-construídos Atualmente, temos cores para nossos designs e fontes para nosso design. Assim, podemos definir as cores e a fonte na planilha Tika. Quando começamos a projetar o aplicativo, podemos adicionar esses componentes de acordo com o design. E quando criamos novos componentes e elementos, podemos adicionar a cópia desses elementos à folha de adesivos Então, vamos começar adicionando cores e tipografia. Aqui, eu pressiono para criar um texto. Eu adicionei cores semelhantes e aumentei o tamanho para 50. Mude o formulário para poppins. Eu gosto muito do Fpin que eu quero, então é por isso que eu sempre uso o Fpin Podemos criar um layout de grade simples de forma que ele seja facilmente alinhado e a margem seja 60, medianiz 20. Tudo bem. Agora alinhe-o assim Tudo bem, agora vamos verificar a paleta de cores. Eu tenho uma tela fora da paleta de cores. Então, vou arrastar e soltar essa paleta de cores aqui. Então essa é a paleta de cores. E agora vou criar três retângulos porque temos três cores Então clique aqui e retângulo, o tamanho será 150 por 150 E agora eu clico no retângulo e altero a cor de preenchimento para essa cor verde E então eu obrigo esses retângulos. pressione todos os dez Dragões e solte-os assim. Ok, vamos ajustar a posição. E agora isso será branco e essa será a cor escura. Está bem? Agora, a cor branca não apareceu no design, então vamos mudar essa cor de preenchimento para uma luz um pouco mais escura assim Ok, agora podemos criar variáveis para as cores. E podemos usar essas variáveis nosso design e isso nos ajudará a criar a consistência. Então eu clico nesse retângulo, e aqui temos a cor. eu clico nesse ícone de estilo. E agora eu clico nesse ícone de adição, e ele criará uma variável. Aqui eu posso adicionar o nome, então vou adicionar verde. E aqui podemos adicionar Descrição. Eu o deixo vazio. Em seguida, clico em Criar estilo. E agora eu clico no segundo retângulo e faço o mesmo nome, será ele E eu faço isso para o terceiro 12. OK. Também selecionamos o ponto para nosso aplicativo, então vou duplicar esse texto e colocá-lo aqui Vamos fazer o espaço entre eles, 260. Então vou mudar esse texto para tipografia. Em seguida, clicarei em Contexto e criarei um novo texto. Vamos chamar esse texto de cabeçalho. E eu destaco o texto pressionando control ou comando por comando. E então eu vou para a mensagem de texto, e o telefone que selecionamos é mais um. Então aqui está o telefone em que selecionei a fonte. Em seguida, vou mudar essa fonte para semibol. O tamanho da fonte será 350, ok? Este será o cabeçalho, telefone cinco, vamos torná-lo um centro de linha. E agora vou adicionar os detalhes desse telefone. Os detalhes serão primeiro o nome digite um, é M mais um e insira uma barra Em seguida, a largura será semicírita e o Si será de 35 pixels Ok, agora podemos criar texto, quatro parágrafos, eu apenas obrigo E vamos fazer o texto do parágrafo Si 16. E vamos alinhar o texto. Saiu assim. E vamos transformar o texto em uma linha desse texto de cabeçalho à esquerda. Em seguida, altere o semi mundo para normal e este será o texto do parágrafo Agora vamos mudar os detalhes, normal 16. Ok, precisamos principalmente de duas fontes para nosso aplicativo. Agora, a folha de adesivos tem um conteúdo reutilizável, mas atualmente definimos apenas os detalhes que usamos em nosso aplicativo para reutilizar essas Podemos criar variáveis para todas as propriedades que usamos nas cores e no sabor. Primeiro, vamos criar um estilo para essa cor principal. Podemos chamá-lo de estilo ou variável. Para criá-lo, seleciono o triângulo vermelho, depois vou para o preenchimento de preenchimento, clico depois vou para o preenchimento de preenchimento, aqui para ver o ponto e depois clico neste ciclo positivo Aqui eu posso adicionar o nome. O nome será verde. E então eu clico em Criar variável. Então eu vou para essa cor, é branca. E faça o mesmo. Clique aqui, clique no ciclo positivo e faça isso. Por quê? Em seguida, clique na variável. Na verdade, eu já criei a variável, por isso não consigo criá-la. Mas no seu caso, você pode criá-lo. Em seguida, vá para essa cor escura e clique aqui, clique em mais, ciclo. Em seguida, adicione o nome e clique em Criar variável. Ok, agora você tem variáveis para todas essas cores. Agora vamos criar uma variável para a tibografia. Para fazer isso, basta vender a tag que você deseja criar, Abs, e aqui você verá o texto. Clique neste estilo e clique neste Estilo Criativo mais Ck. E aqui, adicione o nome. Então, vou adicionar cabeçalho de nomes. E se eu quiser, posso adicionar uma descrição. Em seguida, clico em Criar estilo. Em seguida, clico no texto do parágrafo e faço o mesmo. Clique aqui, clique neste plano e adicione um parágrafo. Em seguida, clique em Estilo criativo. Tudo bem, agora temos cores reutilizáveis e tibografia. Deixe-me mostrar como reutilizar essas coisas. Para fazer isso, vou até o wireframe e o protótipo. E aqui vou criar um retângulo como este. E agora, se eu quiser mudar a cor do retângulo para a cor verde que usamos no aplicativo, basta clicar aqui e clicar na cor como esta E se eu quiser usar a cor branca, posso clicar assim ou assim. Então, vamos criar o texto. Então, vamos adicionar um texto como olá. Ok, e torne-o central. Agora vamos mudar o texto para título. Aqui está o texto do título que criamos. Então, se quisermos alterá-lo para parágrafo, basta clicar aqui e clicar no parágrafo. De qualquer forma, se precisar alterar alguns detalhes, você pode clicar nesse ícone de estilo separado E agora, aqui, você pode alterar as propriedades que deseja alterar, assim. Essa é a maneira de criar uma folha de adesivos e usar os detalhes da folha de adesivos Quando criamos componentes como botões, barras de pesquisa, cartões e outros elementos, adicionamos os componentes que criamos no design e os convertemos em componentes gratuitos e utilizáveis Em aulas futuras, mostrarei como fazer isso. 21. O que vamos projetar e onde encontrar os materiais: Vamos criar um aplicativo de entrega de comida. Na aula de wireframes e prototipagem projetados pela QY Ux, criamos esse conjunto de estruturas de arame conjunto Se você não assistiu a essa parte, pode assistir no Skillshare Vou colocar esse link na descrição. Nos vemos na seção de design visual. 22. Projetando o cabeçalho: Agora temos uma prancheta limpa e o conjunto de wireframe, então é hora de criar um Maga de alta fidelidade Vamos começar com a página inicial. Eu clico na página inicial e copio o wireframe. Então eu colo na página do Maga. Vamos aumentá-lo pressionando comando e escolhendo a roda do mouse. No Mac, agora vou criar um carrinho de bebê, clicar na moldura e selecionar o iPhone Prey Mass 13.14 Ok, agora eu renomeio o nome dessa moldura E agora vou adicionar grade. Portanto, quando adicionarmos a grade de layout, será fácil manter o alinhamento na margem Vou adicioná-lo como 15 e a sarjeta será 50. Ok, agora vamos começar com essa cabeça. Então, primeiro temos esse menu de hambúrguer. Para criar um hambúrguer, basta clicar no retângulo e usar o retângulo, ou podemos usar ícones, mas neste caso podemos simplesmente criar um menu de hambúrguer basta clicar no retângulo e usar o retângulo, ou podemos usar ícones, mas neste caso podemos simplesmente criar um menu de hambúrguer com o triângulo. Vou fazer assim, então aqui vou adicionar a largura como 50 e a alta taxa A. Agora está nos cantos 15. Vamos ver, esse é o design e os cantos serão 15. E vamos mudar a cor do campo para essa cor verde. Ok, agora vou duplicar isso. Basta pressionar Old Dragon em um item como este. Agora vou destacar esses dois retrângulos. Pressione Shift A, clique neste ícone de adição para adicionar o layout automático. Destaque-o. Pressione isso mais C. Ok, agora eu faço dela uma linha no centro superior, e o layout vertical será selecionado. Vamos fazer espaços três. Ok, agora clique no retângulo e duplique-o pressionando control e control Ok, o menu de hambúrguer está criado. E então temos que criar esse título. Nós já criamos o título, criamos o logotipo. Eu só uso esse logotipo. Antes de usá-lo, podemos realmente converter esse logotipo em um componente. Nas próximas lições, você entenderá claramente o componente. Por enquanto, vou clicar nesse ícone para criar um componente. Nas próximas lições, mostrarei os benefícios do componente e por que precisamos usá-lo. Vou renomear esse nome de componente para logotipo. Ok, agora eu venho aqui e seleciono a moldura. Então eu vou para esse menu***. E no cardápio avaliado, em mais xícaras temos esse componente. Vou apenas arrastar e soltar assim. É maior, então vamos reduzir o tamanho. Para reduzir o tamanho, basta pressionar o controle para cortá-lo e ouvir o controle para colá-lo aqui. Dessa forma, podemos facilmente fazer as alterações. Como primeiro passo, vou apenas diminuir o tamanho desse logotipo, posso torná-lo 25, 25, ok. Em seguida, precisamos alterar o tamanho do texto. Para alterá-lo, podemos alterar a variável de texto. Para alterar a variável de texto, adicionamos a variável de texto do cabeçalho aqui. Basta clicar nele e clicar aqui. Quando criamos os adesivos, mostro como criar esse tipo de variável e espero que você se lembre dela Vamos ajustar o tamanho do texto. Vamos fazer com que seja 30, mas cerca de 25 a 22. Acho que esse tamanho está melhor do que antes. Para testá-lo corretamente, clique no quadro e clique no ícone atual, e ele abrirá uma nova janela. É parecido com isso. Acho que podemos ajustar isso, apenas este texto para 25. 25 serão, fica bem no design. Ok, agora temos um logotipo e aqui eu apenas recorto esse logotipo e colo novamente na folha de adesivos Se você não entendeu, não se preocupe. Mostrarei como criar componentes e fornecerei compreensão completa do componente. Ok, agora podemos adicionar esses dois logotipos, ou seja, a tonelada do carro e o ícone Vata Para adicionar logotipos, podemos usar o Library Pontosum. Fontosum é uma biblioteca de ícones. Assim, podemos usar o Google Material Design System e os ícones no Google Material Design System. Acho que você se lembrará da lição em que falamos sobre o sistema de design. No entanto, nesse caso, vamos usar o Fontosm. Na Figma Há uma comunidade nessa comunidade, outros designers tinham seus recursos para a comunidade, e designers como nós podem usar esses recursos. Para usar esses recursos, basta clicar nesse ícone de recursos e pesquisar o item de recursos aqui. Nesse caso, são plug-ins. Nos plug-ins, vou pesquisá-lo. Fontes. Aqui está o ícone do fontosum Clique nele e ele será instalado na conta Figma. E abrirá assim. Eu já instalei o ícone do phontosum no Figma, então vou mostrar como instalar o plugin Basta clicar aqui e vamos instalar alguns. Eu posso conectar exatamente como ícones, se você não instalou o pontosum Ao passar o mouse sobre o pontosum, você o verá assim e verá este e verá este Basta clicar neste botão Executar e ele será carregado na sua conta break ma como um plug-in. Para encontrar esses plug-ins, você pode clicar aqui, e aqui temos a seção de plug-ins. Na seção de sinalização, temos todos os plug-ins que instalamos. Além disso, podemos clicar aqui, e aqui podemos clicar nos plug-ins. E nos plug-ins, temos o plug-in que instalamos. Clique no telefone ou em alguns ícones. E aqui temos que encontrar o cartão, Ticon, vou apenas pesquisar o cartão E aqui temos o ícone de cartas. Então, vou clicar nesta tonelada de cartão e adicioná-la a esse design, então eu preciso dela na página inicial, então eu apenas a arrasto e a roubo para a página inicial E também precisamos de um ícone de avatar. Então, vamos pegar o ícone do avatar. Usuário. Ok, aqui temos o ícone do usuário. Tudo bem, agora vou aumentar esse tamanho para 30 por 30. Basta clicar nessa propriedade contida e transformá-la em 30. E ele será ajustado automaticamente de acordo com o peso quando adicionarmos esse ícone de restrição de proporções Então, neste caso, vamos fazer com que seja 30. Ok, agora temos dois ícones. Então, vou mudar a cor desse ícone para verde. Acho que você se lembrará da regra 603010. Nesse caso, usaremos 60 como fundo branco e 30 como cor verde e dez como ícone de pé. Ok, agora temos um design que devemos adicionar ao cabeçalho. Agora você se lembrará do layout automático, então vamos adicionar o layout automático. Para adicionar o layout automático, destacarei todas essas seções e pressionarei Chief, pressionarei este ícone de adição no layout automático, desta forma. E agora precisamos que isso seja horizontal, assim. Para torná-lo horizontal, podemos clicar nesse layout horizontal e ele se torna horizontal. Eu vou até as camadas. Ok, agora você vê que há um problema. No ícone do carro, temos uma moldura, mas no ícone do usuário, não temos essa moldura. O motivo é que ele simplesmente se solta com a moldura. Então, vamos criar uma moldura clicando com o botão direito nela e clicando em Seleção de molduras. Ok, agora esse layout automático não se encaixava perfeitamente no design. Vamos ajustá-lo ao design. Então, para fazer isso primeiro, temos que adicionar layout automático ao quadro. Para fazer isso, clique no quadro e clique em Layout automático. Ok, no quadro, precisamos de layout vertical, o que significa que precisamos cortar os pés verticalmente assim Agora, vamos ajustar os detalhes por enquanto. Vamos adicionar a lacuna vertical como dez. E o padrão esquerdo e direito será 15. Porque adicionamos a margem como 15, que significa que os elementos terão um preenchimento de 15 entre dois cantos No topo, farei o preenchimento como dez. Ok, agora nesta seção de cabeçalho, vou mudar seu nome para cabeçalho. E então vamos adicionar o conteúdo was fill. E a vertical está dentro, será, agora vou fazer deles uma linha no centro à esquerda, assim. E agora vamos adicionar um layout de pedágio a esses dois botões porque ele tem as três colunas A primeira coluna é o menu de hambúrguer, a segunda coluna é o logotipo e a terceira coluna é a caixa. Ícone Avata Selecione esses dois ícones e pressione Shift E aqui vou mudar a lacuna horizontal para 15. Assim. Em seguida, defina-o para preencher e conter. Ok, agora eu clico no menu de hambúrguer e altero na horizontal, redimensiono para o recipiente de enchimento e também vou até o logotipo e faço o mesmo E vá até os ícones do avatar e defina-os no contêiner de campo. E agora você vai ver isso assim. Então, agora é muito fácil de fazer. Primeiro, clico no menu de hambúrguer e ele deve estar em uma linha à esquerda e uma linha no centro à esquerda Então esse ícone de avatares deve ser um centro de linha, certo? E esse logotipo deve ser um centro de linha. Então, agora temos o design centralizado corretamente. Se você verificar isso na moldura, ficará assim. Está muito, fracamente alinhado E aqui, o ícone do avatar, um pouco maior. Então, vamos redimensioná-lo e torná-lo semelhante ao ícone do carro. Ok, agora está assim. E vamos adicionar a margem superior a 15. Então, atualmente são dez. Basta clicar aqui e fazer com que seja 15. Tudo bem, agora na próxima lição aprenderemos sobre componentes , converteremos esse cabeçalho um componente e continuaremos o design. 23. Melhorando o cabeçalho: Quando verificamos esse design, o título não está centralizado com precisão, então vamos centralizá-lo. Para fazer isso, temos que ajustar os parâmetros do automóvel. Primeiro, clicaremos no Autoa principal. Em seguida, defina essa lacuna horizontal entre o item como zero. Em seguida, clicaremos no logotipo. E o logotipo será o conteúdo. E também clique neste Car Ticon, e o ícone Avata o torne contente. E no menu de hambúrguer, torne-o um contenção Tudo bem, agora o logotipo está apenas perfeitamente centralizado. Temos que ajustar o espaço entre essas duas seções. Para fazer isso, selecione o cabeçalho e ajuste o tamanho desta forma. Aumente o design também aqui. Tudo bem, agora, se verificarmos, o logotipo está centralizado com precisão, então existem maneiras de fazer alterações no design usando o layout automático Portanto, é sempre recomendável que você brinque com as configurações do layout automático. 24. Tudo sobre componentes: Ok, agora vamos criar um componente. Antes de criarmos um componente, vamos nos familiarizar com o nome para que o componente seja um elemento reutilizável que possamos reutilizar em todo o design Então, vamos converter esse cabeçalho em um componente. Para fazer isso, basta selecionar o cabeçalho. E então você verá um ícone aqui. E é criar um componente, então eu só clico nele. Ok, agora esse cabeçalho se torna um componente. Quando ele se torna um componente, o nome do elemento muda e a cor do elemento muda para a cor roxa clara. Ok, agora vamos ver os benefícios desse componente. Antes de fazer qualquer coisa, vou simplesmente recortar esse comando bipasin, um x, e colar na folha de adesivos Pegue a folha de adesivos e cole assim. Então eu vou colocá-lo aqui. Vamos nomear essa seção como elementos. Ok, agora aqui está o componente. Esse é o primeiro componente que criamos. Chamamos componente, ou chamamos esse primeiro componente de componente mestre porque podemos criar muitas instâncias usando esse componente mestre. Vamos criar um instante ou vamos criar uma cópia. Para criar uma cópia, isole a página inicial do nosso aplicativo Em seguida, vou para *** no painel de declarações, podemos ver todo o nosso componente Você se lembra que já criamos um componente para o nosso logotipo? Aqui está o novo componente e seu nome está no cabeçalho. Eu clico nele e, quando clico nele, ele diz, por exemplo, podemos clicar no botão Inserir instância ou simplesmente arrastá-lo e soltá-lo na página inicial. Agora, essa é uma instância do componente, que significa que se mudarmos esse componente principal, ele mudará o design dessa instância. Esse é um dos benefícios que temos quando criamos componentes. Por exemplo, basta clicar nesse menu de hambúrguer e mudar a cor Agora eu cliquei no componente principal, então vamos mudar a cor para preto E quando eu mudar isso, a instância desse componente também mudará. Quando selecionamos o componente, as propriedades desse componente serão listadas aqui. Aqui temos os detalhes do componente. Quando clicarmos nesse ícone, teremos a opção de desanexar a instância ao desanexar E se agora mudarmos o design do componente mestre, isso não afetará o componente que detalhamos. Além disso, podemos criar variantes desse componente. Como exemplo, vamos criar uma página diferente. Vou apenas duplicar esta página e remover essa instância do componente Agora, se formos para a página de wireframes e fototipos no Search Foods, não temos o logotipo no Search Food, temos o título chamado Então, vamos copiar a página Search Food e aqui. E agora vamos mudar esse título para Search Food. E agora aqui está a página inicial e aqui está o Search Food. A diferença é que aqui temos um título chamado Search Food, o que significa que temos que substituir esse logotipo e adicionar o título do rodapé de pesquisa. Pesquisar página de rodapé. Se simplesmente acessarmos asserts e adicionarmos esse cabeçalho aqui, esse não será o cabeçalho que queremos adicionar Para a página de rodapé de pesquisa, precisamos do texto chamado search food. Vamos fazer isso. É muito fácil porque podemos criar variantes do componente principal. Crie uma variante, selecione o componente mestre. Aqui você verá um botão chamado variante. Basta clicar nele e você poderá ver esse tipo de variante aumentar o tamanho desse quadro de variante. E vou colocá-lo aqui para tecê-lo corretamente. Vamos para o painel de camadas. E vou remover esse logotipo, porque aqui precisamos do título. Para criar o título, eu clico em Contexto e clico aqui. Agora, aqui, vou nomear isso como título da página. Ok, no título da página, usaremos o texto como cabeçalho. Então, agora temos que adicionar um layout de pedágio a esse título. Eu vou primeiro mudar A, depois vou mudar isso para ficar assim. E agora temos a variante desse componente. Em vez de usar esse componente mestre, agora podemos usar essa variante com os recursos semelhantes do componente mestre. Nesse caso, vou apenas reduzir os tecidos do título Para fazer isso, clico no título e separo os estilos do cabeçalho E vamos transformar o texto do título em 21, assim, colocá-lo no centro e no texto no centro. Ok, agora vamos para nossa página de pesquisa. Aqui. Se formos até as afirmações, veremos o cabeçalho Então clique no cabeçalho. E aqui temos a opção de selecionar o componente ou variante mestre conforme queremos adicioná-lo ao design. Nesse caso, queremos adicionar a variante. Então, basta clicar aqui, selecionar a variante e clicar em Inserir. E agora veremos esse tipo de design. E essa é a variante. Apenas remova isso. Se colocarmos assim, podemos ver as propriedades da instância desse cabeçalho. E aqui podemos selecionar a variante e ela ficará assim. Essa é a maneira de criar uma variante e adicioná-la às páginas separadas. Agora eu posso simplesmente pressionar chá e alterar esse texto para pesquisar alimentos como este. Esse é o benefício do componente de uso. Se não usarmos componentes, teremos que criar repetidamente os designs para cada seção. É por isso que precisamos usar componentes. Na face do protótipo, podemos usar esse componente para criar facilmente nosso protótipo Vou mostrar isso na seção de protótipos. Aqui, tivemos o mesmo problema que esse texto não estava alinhado corretamente. Para corrigir esse tecido de alinhamento, podemos enviar esse texto para o lado esquerdo e adicionar o espaço entre o menu de hambúrguer e o Para fazer isso, vou para o componente principal. nessa variante, selecionarei os textos que têm layout automático e farei com que fique uma linha à esquerda. E vou selecionar o texto e também fazer do texto uma linha deixada aqui. O componente principal, vou mudar o layout automático, espaço horizontal para 15, assim. E agora, se verificarmos o design, ele ficará assim e poderemos corrigir o problema do centro de texto. 25. Projetando a caixa de pesquisa: Ok, vamos criar essa barra de pesquisa. Antes de criá-lo, ocultarei esse quadro de pesquisa porque temos trabalho a fazer na página inicial. Então, selecione a página de rodapé de pesquisa e aqui eu a bloquearei, o que significa que não consigo editar o design. E então eu clico nesse ícone e ele desaparecerá. E eu farei o mesmo com a estrutura de arame também. Ok, vamos criar o livro de busca. Para criar um livro de pesquisa, clico no contexto Tangle lá Clique na moldura. E agora vou definir a altura do triângulo vermelho como 45. Em seguida, vou converter isso em layout automático, pressionar Shift e A. Em seguida, definirei o tamanho como contêiner de campo. Vou mudar o tamanho da Trang para o contêiner Field. Ok, agora vou mudar a cor desse campo para branco. E vamos adicionar o efeito de sombra. Para adicionar os efeitos de sombra, basta clicar no retângulo do efeito Clique aqui, clique no botão mais próximo. Em seguida, clique no ícone do sol. E agora eu vou fazer y como zero. Vamos aumentar isso. E agora vou mudar o desfoque para luz 15. 15 é demais, vamos torná-lo um e aumentar a opacidade para a luz 50 Está bem? Agora vou adicionar cantos. Vamos adicionar cantos à luz 25. Está bem? E as sombras são muito pretas, então vamos mudar a opacidade Está bem? Agora, se verificarmos o design, ficará assim. E se quisermos, podemos adicionar um traçado ao redor da caixa de pesquisa, mas por enquanto isso será bom. E se houver algum problema de contraste ou acessibilidade, mudaremos o design. Ok, agora temos que adicionar essa caixa de pesquisa. Para fazer isso, irei para a pesquisa fontosum e infontosal Aqui, acabei de adicionar a caixa de pesquisa e temos que adicioná-la dentro desse contêiner. Para fazer isso, seleciono a caixa de pesquisa e pressiono o comando X para recortá-la, e aqui, pressiono o comando we para colá-la. Ok, agora selecionamos esse retângulo como campo horizontal, então não há espaço para adicionar essa caixa de pesquisa É por isso que essa caixa de pesquisa é colocada abaixo da caixa de texto. Então, se eu fizer o layout como um layout horizontal, ele ficará assim. Mas precisamos adicionar essa caixa de pesquisa dentro da barra de pesquisa. Para fazer isso, selecionarei a caixa de pesquisa e, aqui, posso colocar esse conteúdo em posição absoluta. O que significa que podemos colocar esse ícone de pesquisa em qualquer lugar do design como este. Porque não depende mais desse layout automático. Podemos ajustar livremente a posição dessa caixa de pesquisa. Vamos colocá-lo aqui. E assim eu vou mudar a cor para a cor da equipe. Então, quando eu clico aqui, ele clica apenas no layout automático. Se eu quiser clicar apenas nesta caixa de pesquisa, preciso clicar duas vezes aqui, mas há um atalho, o atalho é pressionar a tecla de comando e clicar no ícone que você deseja selecionar. Por exemplo, se eu quiser selecionar esse logotipo, se eu selecioná-lo desta forma, todo o layout será selecionado. Mas se eu pressionar Command e selecioná-lo, para separar o item inferior no comando Mac no Windows, acho que deveria ser controle Basta jogar com as teclas. Ok, agora eu clico neste ícone vetorial e seleciono a cor escura como esta. Está bem? Agora, em U x, o espaçamento negativo é muito importante porque se tivermos um bom espaçamento negativo, isso ajudará os usuários a lê-lo corretamente e a entender a flexibilidade do design Para adicionar o espaçamento negativo, podemos adicioná-lo diretamente ao layout do home auto Então eu clico no quadro inicial. E aqui eu adicionarei espaçamento negativo, ou adicionarei a lacuna vertical 60 Agora, se eu verificar a marcação, ela ficará assim. OK. 26. Criando a seção de categoria - Parte 01: Agora, temos que criar essa seção de categoria para enfatizar e criar um texto chamado Categorias de categoria e, em seguida, selecionado como cabeçalho. E a cor será a cor escura. E agora temos a imagem e a descrição da imagem. A primeira imagem será Daily Special, primeira categoria será Daily Special, segunda será Paste e a terceira será bebidas. Vamos criar essas categorias. Para criá-los primeiro, precisamos criar a imagem. Por enquanto, vou usar um retângulo retangular como esse, e então precisaremos de outro texto Então, vamos criar um texto. O texto será especial diário. Ok, agora vamos mudar o texto para parágrafo. Na verdade, é melhor ter um telefone maior. Então, vamos criar uma variante diferente do telefone para duplicar essa e separar o estilo Então vamos fazer essa mídia, clique aqui, em concreto rápido. Vamos chamar isso de estilo Subheading Concrete. Tudo bem, agora vamos ao nosso design. Clique aqui e altere o texto desse estilo para subtítulo Ok, agora vou selecionar esses dois itens e pressionar Shift A. Em seguida, coloque-o no centro e o espaço será 15. E agora também clique nessas duas seções. Pressione Shift A para categorizá-lo. Aqui, adicionaremos o espaço negativo como 20 Aqui temos quatro seções. Para criar quatro seções, temos que selecionar os itens da categoria e pressionar Shift A. Em seguida, definirei o layout como layout horizontal. E agora se eu selecionar uma única categoria, pressione duplicá-la. Basta arrastar e amarrar assim. Agora, se você verificar, temos que reduzir o tamanho porque precisamos quatro itens para reduzir o tamanho antes de reduzir o tamanho. Se criarmos um uso de componente no item de categoria única, será fácil alterar o design porque, quando alteramos o componente mestre, isso também afetará a instância do componente mestre. Vou remover o componente que não vamos usar, e aqui vou converter um componente, e vamos nomear esse componente como item de categoria. Agora podemos ajustar o tamanho, vamos ajustar esse tamanho para 72 por 72. E então temos que reduzir o tamanho desse texto. Para fazer isso, basta clicar no texto e em um estilo con detach E vamos reduzir o tamanho da fonte para, para que o espaçamento seja definido como s. Ok, agora vamos até Asserts e conferir o componente que criamos E vamos adicioná-lo aqui. E vamos adicionar quatro deles. Esse é o componente principal. Crie, por exemplo. E vou colocar o componente Master na parte superior. E selecione todos esses componentes. E pressione Shift aqui para adicionar o layout. E vamos fazer com que seja um layout horizontal. E aqui temos que reduzir um pouco mais o tamanho. Vamos fazer com que seja como 65. Agora vamos reduzir o espaço entre essas duas opções. Vamos fazer com que seja como 15. Ok, aqui vamos fazer o espaço para 12. E agora podemos aumentar o tamanho desse retângulo. Pressione o comando e selecione o emaranhado. E vamos aumentar seu tamanho para 80 e torná-lo 80. Ok, agora temos quatro categorias. E agora vou cortar o componente principal. Em seguida, adicione-o na folha de adesivos assim. Então, podemos avaliar e adicionar componentes aqui. Vou mudar esse espaço para 15, ok. Se verificarmos o Moca, ele ficará assim E agora temos que encontrar imagens e adicionar essas imagens. Em seguida, temos que alterar o texto de cada item da categoria. 27. Criando a seção de categoria - Parte 02: Ok, agora temos que mudar esses títulos. Então, vamos mudá-los. O segundo título será cole isso. Então eu clico aqui, depois pressiono o comando e seleciono este texto para copiá-lo. Então eu vou aqui e colo assim. Na verdade, eu tenho que colá-lo sem estilo. Então, primeiro vou colar o texto aqui. Em seguida, pressionarei control para recortá-lo e colá-lo em nossa categoria. Em seguida, vá para Bebidas , pressione o comando e selecione os elementos. Em seguida, copie e cole na barra de URL, porque quando colocamos strict na barra de URL, poderemos remover todo o estilo, como figuras de exemplo . Ops. Aqui , o texto muda para um texto diferente Nosso texto original é mais um. É por isso que colocamos strict na barra de URL e colocamos o texto aqui. Ok, agora é hora de adicionar imagens. Para fazer isso, pressiono Command e seleciono esse retângulo. E vamos substituir esse retângulo por imagens. Para fazer isso, eu vou até o Shape to, e clico aqui. Em seguida, clique em Colocar imagens e vídeo. Agora temos as imagens. Então, adicionarei essas imagens à descrição da seção de recursos. E quando selecionamos a imagem, podemos colocá-la assim, e é na imagem pastosa, na imagem das bebidas e, finalmente, na imagem clara Ok, agora, se verificarmos o design, essas imagens não têm cantos irregulares, então vamos reduzir os cantos dessas Para fazer isso, podemos usar nosso componente principal. Então, clique no retângulo da imagem no componente Master. E vamos adicionar imagens em relevo como 15 cantos arredondados em 15. E ouça os cantos irradiados e ficará melhor. Agora temos que criar a focal do pé e a seção recomendada do pé 28. Criando alimentos populares - Parte 01: Ok, vamos criar a popular seção de pés. Primeiro, precisamos adicionar o título. Então eu pressiono e crio esse título como Popular Foods. Agora vou selecionar o estilo de texto como Cabeça. Agora, aqui, temos quatro itens alimentares em uma fileira. Mas se adicionarmos quatro alimentos no aplicativo, ele não ficará melhor. E teremos problemas de acessibilidade. Então, vamos adicionar dois alimentos para uma linha e vamos adicioná-los dois a dois. Para esta seção popular de alimentos, meu plano é criar elementos que tenham uma imagem maior do alimento e, em seguida, o nome. Então teremos o preço acima do nome. E no preço, teremos a classificação em número. Então, vamos tentar fazer isso. Primeiro, vou criar um retângulo Este recranger será a imagem da comida. Por enquanto, vamos fazer com que seja assim. E então teremos o nome da comida e o preço. Vamos criar um novo texto e adicioná-lo como nome como rótulo. Então eu vou duplicar esse texto e fazer com que esse dólar seja dois. Ok, agora vou adicionar auto a esses dois itens e criar um layout horizontal. E vou definir a lacuna horizontal entre os itens 20. E então eu selecionarei esse retângulo e criarei o automático. Aqui eu vou mudar isso, 62 15. Assim, tudo bem. Agora temos que colocar esse nome de pé no lado direito e o valor em dólares do lado do laboratório. Para fazer isso, alterarei o redimensionamento horizontal desse conteúdo para encher o recipiente Em seguida, adicionarei uma lacuna horizontal entre o item 22. Ok, agora mudou assim. E agora podemos adicionar o nome da comida conforme quisermos. Portanto, há mais ajustes. Faremos isso depois de concluirmos a seção completa. Então, por enquanto, vamos criar a estrutura. E acima desse pé, título e preço, podemos adicionar classificação por estrelas. Para fazer isso, vou apenas copiar uma estrela daqui. Vamos pegar uma estrela do nosso plug-in. Então, vamos às fontes e coisas do gênero. Estrela, aqui temos uma estrela. Então, vamos recortá-lo e colá-lo dentro desse layout automático. Vai subir desse jeito. Então, vamos redimensioná-lo para oito por oito. Em seguida, adicionarei o layout automático. E agora vou adicionar texto dentro desse layout automático. Esse texto será cinco, ok? Agora vou mudar a cor de preenchimento para escura. Vamos mudar a cor de preenchimento para escura agora. Em seguida, mudarei a saída automática para o layout horizontal. Aqui, teremos que mudar o tamanho da ponte. Vamos fazer disso um. E primeiro podemos adicionar nosso telefone a esse texto. E vamos separar o estilo e torná-lo um, vamos torná-lo médio Tudo bem, agora temos esses dois itens no meio. Temos uma lacuna de tamanho dez, mas vou reduzi-la para duas. Então eu vou colocá-lo no centro assim. Mas ainda assim não conseguimos alinhá-lo corretamente. Então, clicarei em Configurações avançadas de layout automático e clicarei na linha base Align Text Pegue assim, agora vamos alinhá-lo corretamente. Ok, agora vou reduzir esse espaço para seis. E agora vamos conferir o design na prévia. E ficará assim. Acho que devemos aumentar o tamanho da estrela e desse texto, vamos fazer com que seja 16. E vamos mudar esse texto para o texto do subtítulo. E quanto a isso? É maior. Então, acho que a ferramenta será perfeita. Ok, em um ano há uma ferramenta. Acho que 13 será perfeito. E agora vou adicionar entre Gap, como seis, e agora ficará assim. Ok, agora temos que ajustar as configurações desse nome de pé. Para fazer isso, basta clicar no nome do rodapé e adicionar estilo de texto como parágrafo. Em seguida, adicionarei esse tamanho, tamanho do texto como espaçamento Ok, agora se verificarmos o design igual a este. Então, agora vou fazer uma cópia desse design. E vamos adicionar os dois layouts automáticos, torná-los horizontais assim. Então, se adicionarmos esses dois. Automático. E agora vou adicionar o tamanho da imagem como 180 por 180. E basta remover isso, então vamos duplicar isso Ok, agora temos um problema. Se eu duplicar os alimentos, vamos criá-los como layout automático e adicionar layout automático horizontal , não conseguiremos entender o tamanho certo que devemos adicionar ao design Para corrigir isso, vou apenas criar um retângulo como esse e aumentar os sites dessa forma Ou eu posso simplesmente clicar em Preencher recipiente. E assim, com esse 360. Agora, essa é a largura dos elementos em tamanho real, mas temos que verificar a metade do tamanho desse retângulo Para fazer isso, vou clicar no retângulo. Na largura, dividirei a largura por dois. Então eu obtive a metade do tamanho do elemento. Mas ainda temos um problema. Deixe-me te mostrar isso. Antes de fazer isso, eu apenas aumento o tamanho da moldura. Basta clicar na moldura e pressionar Command no Mac e em todo o Windows. Em seguida, arraste-o assim. Ok, agora vou duplicar isso e adicionar o layout automático E adicione assim. Em seguida, remova essa lacuna horizontal para zero. Agora não temos o espaçamento intermediário. Se usarmos apenas esse tamanho de elemento como metade do item para corrigi-lo, teremos que adicionar 15% de diferença entre esses dois elementos. Podemos fazer isso facilmente adicionando essa lacuna além de 15. E clique em Dirrangle, faça-o encher o recipiente. E clique neste retângulo e faça com que ele encha o recipiente. Dessa forma, obtemos o tamanho correto. Vamos fazer o mesmo por isso. Para fazer isso, primeiro temos que selecionar a moldura. No quadro, adicionarei o contêiner de campo ts e também adicionarei esse contêiner de preenchimento. Depois disso eu clico aqui e vamos criar esse espaço entre 215 E agora só precisamos aumentar o tamanho do emaranhado da seita. Para fazer isso, podemos simplesmente selecionar o retângulo e fazer com que ele caia no recipiente e podemos fazer o mesmo com isso Ok. Dessa forma, obtemos um tamanho perfeito Agora vou remover essa parte, então temos mais mudanças a fazer. Em primeiro lugar, aumentarei a altura dessa imagem alimentar para 200 e agora posso convertê-la um componente e fazer outras alterações. Para fazer isso, clico no design e clico em Componente de concreto. Aqui, eu renomeio isso como item de comida. Ok. 29. Criando alimentos populares - Parte 02: Agora vamos fazer as mudanças. Primeiro, vou mudar essa estrela para a cor da nossa marca. A cor da marca é verde. Desculpe, eu destaco a estrela e o texto e, em seguida, adiciono cores como essa cor verde, como esta. E agora vamos imaginar que, se tivermos um nome maior, vamos tentar adicionar um nome maior. E quando adicionamos um nome maior, ele não se alinha perfeitamente Para corrigir isso, podemos facilmente fazer esse recipiente de preenchimento e agora ele se ajustará acordo com a contagem de texto. Assim. Se aumentarmos o tamanho do preço, ele também diminuirá, pois podemos adicionar preenchimento à esquerda neste texto Dessa forma, teremos um espaço entre essas duas seções. Para fazer isso, pressiono Command e seleciono o texto. E pressione Shift para convertê-lo em layout automático. Depois disso, adicionarei um acolchoamento deixado como doente, farei com que seja um abraço e um Então, se adicionarmos o nome assim, ele ficará diretamente ativo. Agora vou definir isso como corrigido com. Em seguida, pressionarei o comando X para recortá-lo e colá-lo em uma folha de adesivos como esta Ok, eu também vou remover este. Agora vou avaliar, arrastar e roubar esse item para o pé. Em seguida, pressionarei o comando para duplicá-lo. Em seguida, destacarei esses dois objetos e pressionarei Shift para no layout automático. Em seguida, faça um layout horizontal. Em seguida, altere essa lacuna para 15. O que acontecerá se ela agir? Ok, agora ficaria assim. Agora também temos o design básico . Temos que mudar os cantos. Para alterar os cantos, vou até o componente principal e adicionarei cantos. Slide 50. Não funcionou. Ok, não está funcionando para corrigir isso, vamos ao componente Master e adicionar a cor do campo. Agora podemos ver os cantos. Além disso, temos que adicionar alguns preenchimentos antes de adicionarmos os acolchoamentos Se reduzirmos os cantos desse retângulo, poderemos corrigir o problema Só precisamos reduzir os cantos superior esquerdo e superior direito. Então, vamos fazer deles 15 assim. Tudo bem, e então teremos que adicionar um pouco de preenchimento para adicionar preenchimentos aqui. Vou fazer o acolchoamento inferior como 15. E não precisamos de acolchoamento superior, mas precisamos de acolchoamento esquerdo e direito Então, basta clicar aqui e adicioná-lo como 15 ou mais. E isso foi 15. Na verdade, só precisamos adicionar preenchimento para essas duas seções Para adicioná-lo, podemos envolver esta seção, outro layout automático e agora podemos adicionar um pad a esse layout automático desta forma. Acho que 15 é demais. Vamos somar como seis. E aqui vamos nós. Se verificarmos o design , ficará assim. E agora podemos adicionar efeito de sombra. Para melhorar a adição do efeito de sombra, vá para Efeito. E agora clique no ícone do sol. E vamos fazer dois e o desfoque será dois. Ok, então podemos salvar essa sombra projetada clicando aqui. E clique neste primeiro ícone. E vamos adicionar o nome como efeito do item alimentar. Ok, agora, se verificarmos o design, ele ficará assim. Agora só temos que adicionar algumas imagens e preencher os detalhes originais. Além disso, temos que fixar o espaço entre essas duas seções entre a comida popular e esse alimento. Para fazer isso, selecionarei esses dois itens e pressionarei Chief A. Então, podemos ajustar o tamanho. Vamos ver, o tamanho que usamos aqui é 15. E vamos mudar isso para 50. Ok, agora vai ficar assim. Então, podemos simplesmente selecionar esse quadro e pressionar o comando para duplicá-lo Na próxima lição, adicionaremos detalhes reais ao item alimentar. 30. Criando alimentos populares - Parte 03: Ok, agora temos que adicionar detalhes para cada item alimentar. Então eu pego nomes de alimentos com batatas fritas. Então, eu tenho um conjunto de imagens, então agora tenho tudo o que preciso para criar alimentos reais. Vamos começar com esse. Primeiro, vou mudar o nome do pé. Vamos ver este documento do Google. Você pode encontrar os nomes e imagens dos rodapés na seção de descrição ou recursos. Vou copiar o nome e pressionar o comando e selecionar a pressão de texto para destacar o texto e colar o nome do rodapé aqui. Quando eu colo, você pode ver claramente que teremos um problema de alinhamento, o que significa que precisamos aumentar esse item de segundo pé quando o primeiro alimento ficar maior Então, como corrigir isso Primeiro, tentaremos ajustar essa instância. Acho que você se lembra que este é o componente principal do item alimentar e essas são as instâncias desse componente. Vamos ajustar esse. E quando corrigimos esse problema, podemos aplicar as alterações no componente principal. Eu pressiono o comando e seleciono o item alimentar. Então, temos um problema com a altura atual, a altura o redimensionamento vertical. Defina a tarefa. Vamos tentar configurá-lo como se fosse um contêiner de dados, acabou de ser corrigido. E vamos tentar aumentar o nome do item alimentar. Pressione o comando e selecione o texto em vermelho alto. Em seguida, pressione o comando C e cole. Poucas vezes assim. Ok, agora o item alimentar se ajusta de acordo com o outro item alimentar. Vamos começar pelos detalhes. Vou copiar os detalhes daqui e do comando passado e selecionar o texto. Pressione e depois o comando Paste Control. Em seguida, copiamos o preço. Clique assim e cole assim. Vamos para o próximo, assim. Cole, copie o preço. Cole o preço. Então vá para a próxima linha e faça o mesmo. Ok, agora temos que aumentar o tamanho do quadro. Para fazer isso, basta clicar nessa ferramenta de movimentação e selecionar a moldura. Em seguida, pressione Command no Mac e controle no Windows. Então, podemos ajustar a altura da moldura sem alterar o co-design. Vamos adicionar outros detalhes. Ok, eu pressiono Moto, agora temos os detalhes. E aqui também temos que ajustar o tamanho vertical do congelamento no contêiner de campo Ok, agora parece bom. Então é hora de adicionar as imagens. Adicionar imagens é muito fácil de fazer Esse comando facial e o flak fang image fanger Aqui, podemos clicar neste pequeno ícone suspenso e clicar no vídeo de barra de imagens planas E vamos para a pasta de imagens. Ok, aqui, selecione a imagem e clique no retângulo Ela se torna uma imagem e, em seguida, faça o mesmo primeiro com o design. Ok, concluímos essa parte com sucesso. Então, vamos pré-visualizar o design. Vamos até o presente. Aqui vamos nós. Esse é o design atual. E agora podemos alterar a classificação por estrelas como quisermos. Na próxima etapa, temos que adicionar a segunda seção, a seção de alimentos recomendados. No próximo vídeo, descobriremos como fazer isso. 31. Seção de design de alimentos recomendados: Agora temos que criar a seção de pés recomendada. É muito fácil. Basta destacar a seção de alimentos ofulares e pressionar o comando C ou controles, e apenas pressionar o comando ou controle, e você obterá a duplicata do alimento ofular Eu clico na moldura e aumento o tamanho do carrinho pressionando Command no Mac ou control em janelas como esta Vamos fazer com que seja assim. OK. E agora eu posso mudar o título. Basta ir aqui e clicar duas vezes aqui, pressionar o comando C para copiá-lo e clicar aqui e pressionar o comando way para colá-lo assim. É muito simples. Então, agora temos as duas seções. Se quiser, você pode alterar os itens alimentares. Mas, neste caso, focamos principalmente no design e, portanto, não vou mudar os alimentos. OK. Na próxima lição, criaremos a seção de busca de alimentos. 32. Página de pesquisa de design - Parte 01: Ok, agora temos que criar essa página de busca. Em um de nossos vídeos anteriores, já projetamos a parte do cabeçalho da página de pesquisa. Mas vamos começar do zero. Primeiro, desbloquearei esses dois quadros e agora selecionarei a página de pesquisa e a removerei porque preciso criá-la do zero. Então eu posso pegar essa estrutura de arame daqui. Agora vou criar uma nova moldura para fazer isso, clicar na moldura e o tamanho da moldura que selecionamos foi iPhone 13 e 14, tudo bem. E aqui, vou mudar o nome do quadro para pesquisar fortes. Ok, então eu adiciono com o layout Será a coluna cinco e cinco. A margem será de 15 e a medianiz será de 50. Na verdade, temos a grade que já usamos, e essa é a grade certa. Agora, como primeira etapa, adicionarei uma camada automática a esse quadro Simplesmente, posso pressionar if A ou pressionar este ciclo positivo do layout automático. E agora eu tenho que mudar a configuração. Portanto, o preenchimento horizontal será 15 e o preenchimento vertical também será Então, não me lembro das propriedades de layout que usei em casa. Então eu clico no quadro inicial, e aqui, temos os detalhes. Então, a lacuna vertical entre os itens será 60, então vamos fazer com que seja 60 corretamente. Agora temos que adicionar esse menu. Se você se lembra do vídeo em que criamos uma variante do nosso componente principal, criamos uma variante para essa seção de cabeçalho. Se eu for até a folha de adesivos, aqui está o componente principal do cabeçalho e aqui está a variante Ok. Agora eu posso acessar diretamente esse componente criando uma instância. Para fazer isso, eu clico no quadro e vou para esta seção de declaração. Aqui, eu posso ver a seção de cabeçalho. Eu apenas clico nela e aqui, altero a propriedade para uma variante dela, e agora clico nesta inserção inter e vou colocá-la aqui Também nesta seção de componentes, posso alterar o componente. Ou eu posso mudar a variante. Ok. Agora vou pressionar T e copiar este texto, depois vir aqui e colar o texto assim. Agora eu clico na ferramenta M. Agora nossa parte do cabeçalho está concluída e agora temos que adicionar a barra de pesquisa. Então, na barra de pesquisa, temos um texto de pesquisa chamado hambúrguer Então, se convertermos essa barra de pesquisa um componente e criarmos uma variante que criamos para o cabeçalho, podemos usar esse componente diretamente. Então, vamos fazer isso. Primeiro, vou ao painel de camadas e seleciono o componente da barra e pressionarei o comando x para ti Em seguida, vou colocá-lo na folha de adesivos. Vamos colocar isso. Aqui, agora eu o converto em um componente. Basta selecionar o elemento e clicar em criar componente. Aqui, vou mudar seu nome para barra de pesquisa. Ok. Agora que posso criar uma variante desse componente e adicionar as opções de pesquisa para fazer isso, selecionarei o componente mestre e clicarei nesse botão de variante. Agora, se eu quiser, posso renomear a variante. Nesse caso, adicionarei um termo como este. E agora eu posso adicionar esse texto aqui. Vamos copiar um texto e adicioná-lo aqui. Vamos enquadrar um texto e o nome do texto será hambúrguer Ok. Agora podemos adicionar blocos. Portanto, temos o texto anterior e, neste caso, adicionarei o texto do Parag e, em seguida, o colocarei Então, agora eu tenho que aplicar a posição absoluta a este texto. Então eu clico aqui. E agora eu posso colocá-lo em qualquer lugar que eu quiser. Nesse caso, vou colocar assim. Agora vou para a página de pesquisa de alimentos e clico em Call Act e aqui nossa barra de pesquisa basta soltar a barra de pesquisa assim. Ok. Agora eu tenho um problema porque quando tento pegar a variante, a variante não está listada aqui. A razão para isso é que eu renomeei a variante. Quando eu o renomeio, eu simplesmente removo nossas propriedades Para corrigir isso, eu posso clicar aqui e clicar em adicionar novo, e então eu posso renomear a variante Nesse caso, vamos renomeá-lo com o termo. Ok. Agora, vamos ver o que vai acontecer. Clique no instante e aqui temos a variante. Tudo bem, criamos a barra de pesquisa. Na próxima lição, teremos que criar a lista de itens. Também no início deste vídeo, eu apenas removo a barra de pesquisa e a crio como um componente. Então, vamos criar uma instância dessa barra de pesquisa e adicioná-la à página inicial. Eu vou para a página de pesquisa e aqui, eu roubo a barra de pesquisa assim 33. Página de pesquisa de design - Parte 02: Ok, vamos continuar o design. Aqui, devemos ter um texto chamado Resultado da pesquisa para Burger Portanto, o texto desse hambúrguer será alterado de acordo com o sistema que pesquisamos aqui Então, vamos criar uma caixa de texto e digitar algo como resultados de pesquisa E adicionaremos código duplo. E aqui, neste caso, usaremos o texto como palavra. Ok, agora vou destacar o texto e ir para o estilo do texto. Aqui vou dizer um subtítulo de teste como este. E agora vou destacar o sistema. E vamos mudar para verde assim. Ok, agora temos que criar esse sistema de cartões ou o sistema de resultados. No wireframe de busca de alimentos, temos três Mas, como eu disse anteriormente, se criarmos três itens alimentares para o resultado da pesquisa, isso não ajudará na acessibilidade. Então, vamos criar esse tipo de design. Agora já temos o componente do item alimentar, o que significa que podemos ir até a avaliação e simplesmente selecionar o item alimentar e incluí-lo assim. E agora vou selecionar o texto e o item alimentar. Em seguida, pressionarei Shift para criar um layout automático. Ok, há um problema quando eu adiciono o alimento , ele não foi adicionado ao quadro de pesquisa. Então, vamos removê-lo. E também adicionarei esse texto ao quadro de pesquisa desta forma. E vamos remover essa moldura. Ok, agora vamos começar de novo. Primeiro eu vou até as afirmações e apenas arrasto solto assim Em seguida, destacarei o alimento e o texto. Então eu pressiono Chief. Ok, e aqui eu tenho que reduzir o tamanho intermediário para 15. Acho que é 15. Sim, são 15. Ok, agora vou adicionar outro alimento como este. Em seguida, selecionarei esses dois alimentos e pressionarei Shift A para torná-lo um layout horizontal. Ok, parece que temos um problema. Então eu disse que o preenchimento dessa moldura era 15, mas na grade principal é diferente Então, vamos tentar verificar os parâmetros da grade principal. Oh, temos que mudar para 15. Deixe-me ver isso aqui. Sim, aqui é 15, então vamos mudar para 15. Oh, eu entendi o problema. Usamos esse layout de grade principal para o fio Pm, e no Y de alta fidelidade temos uma grade de layout diferente Então, vamos salvar esse sistema de grade e então podemos adicioná-lo à pesquisa Ford. Para fazer isso, clicarei aqui e clicarei em Plus Cycle. Então, aqui, adicionarei High Five Hi Fi, que significa design de alta fidelidade a curto prazo Em seguida, clico em Criar este estilo. Agora, se eu clicar em Pesquisar Ford, vamos remover este e clicar aqui. Então temos o sistema de rede de alta fidelidade como este. Então, se você não se lembra do sistema de grade, pode conferir o vídeo anterior sobre o sistema de grade. Agora eu tenho que duplicar esse quadro assim. Nesse caso, posso usar os mesmos alimentos para o resultado da pesquisa de alimentos. O que significa que não preciso refazer o trabalho porque eu já fiz. Vou copiar esse quadro e adicionar dados aqui. Primeiro vou copiar este. Em seguida, pressiono o controle de comando C para copiar. E eu simplesmente clico nesta moldura e fica assim. Está bem? Em seguida, seleciono o quadro do pé de pesquisa e pressiono Command e aumento o tamanho do quadro desta forma. Está bem? Agora eu posso simplesmente remover esse alimento vazio. Agora, se verificarmos o espaço entre a barra de pesquisa e os resultados da pesquisa, ele é maior e, de acordo com a lei da região comum, itens semelhantes se agruparão. O que significa que podemos transformar essas duas seções em uma única seção. Para fazer isso, clicarei nesse quadro principal do resultado da pesquisa clicarei na barra de pesquisa e pressionarei Chief para torná-lo um layout automático. Então vou reduzir esse espaço para 15. Deveria ser 15 assim. E agora temos uma página de busca. Vamos diminuir o tamanho da moldura. Ok, agora podemos conferir a prévia. Vai ficar assim. E agora temos um problema. Vamos resolver esse problema. Vamos ver se esse problema está na página inicial, se o tecido não está na página inicial, o que significa que está apenas na página de pesquisa. Isso acontece quando eu crio um layout automático com a seção inteira para corrigi-lo. Vamos fazer alguns ajustes. Primeiro, selecionarei essa moldura e faremos com que nos sintamos bem. Acabou de ser consertado. Vamos ver novamente. Ok, agora que o lenço sumiu. Tudo bem, na próxima lição iremos para a próxima interface de usuário de alta fidelidade, que significa página única de comida 34. Dica de profissional: Aqui está um protótipo para melhorar suas habilidades de design de interface do usuário e obter inspiração de design Então, se você não tem nenhuma inspiração de design ou não sabe o que criar para uma lista como essa e como o cabeçalho deve ficar vazio ou não conhece as melhores práticas e padrões, você sempre pode conferir os sistemas de design como o Google Material ou o Apple Human como exemplo Vamos ao Material Design. Então, esse é o sistema de design oficial do Google. Aqui, podemos verificar componentes em componentes. Vamos aos botões e vamos verificar os botões comuns. E aqui, eles fornecerão todos os detalhes e diretrizes que você deve seguir para criar um botão. Portanto, essas são regras padrão de UY ou designs de UY. É por isso que você deve seguir esse tipo de sistema de design se não tiver nenhuma ideia de design, se for iniciante Por exemplo, se seguirmos as diretrizes e aqui teremos os detalhes com a tela fora de um botão. Essa é uma forma de agregar ao nosso design. Aqui não fazemos seções e, quando seguimos esse tipo de sistema de design, mesmo que você não tenha nenhuma habilidade de design de UX, você pode naturalmente obter uma interface amigável. Portanto, neste caso, temos as chaves do princípio U x, mantenha-o simples. Princípio estúpido de Ux. É por isso que você deve seguir diretrizes de design como essa. Em outro exemplo, se formos até os cartões e já criamos a lista de cartões, se formos até aqui, podemos verificar as diretrizes, e aqui temos as coisas que devemos seguir. Nesta série, talvez eu não complete todos os elementos da interface do usuário, mas você sempre pode verificar esse tipo de sistema de design e entender como criar um design perfeito. Nesse caso, se você criar um aplicativo diferente, poderá seguir as diretrizes do sistema de design e criar componentes de acordo com suas necessidades. 35. Criando uma página de comida única - Parte 1: Projetamos com sucesso a página inicial e a página inicial de pesquisa. Agora temos que criar a página de um pé. Em primeiro lugar, copiarei essa estrutura de arame e colarei na página de maquete Ok, agora vou criar um novo quadro. Portanto, o tamanho da moldura será iphone 13.14 Agora vamos renomear o nome da moldura Ok, agora eu e o Layout Grid. Basta clicar aqui e aqui está a grade de layout salva, esse estilo. OK. Agora temos que nesta seção de cabeçalho, para fazer isso, podemos simplesmente ir para Act, e aqui temos a seção de cabeçalho. Só isso pode ajudar a chegar aqui. E vamos mudar a propriedade para a variante dois. Esqueci de adicionar layout automático a esse quadro. Então, vamos adicionar o, basta clicar no quadro e clicar no seno positivo no Layout automático E vamos verificar os valores. Ok, os valores serão os preenchimentos superior, inferior esquerdo e direito são 15 50 e a lacuna vertical entre os itens será Ok, agora o título do espaço deve ser alterado para o título do item alimentar. Nesse caso, selecionarei minha comida como esta. Pressione o comando e selecione o texto diretamente. Pressione Selecioná-lo e comande para tomar café no título da página. Vou passar o nome do pé. Quando eu colo assim, o estilo da fonte muda. Primeiro vou colar na barra de URL e depois colar assim. Ok, agora eu seleciono o lema. Agora temos que criar esse carozel. Este é o Rocrozel. Vamos projetá-lo. Primeiro, vou criar um retângulo e vamos aumentar o tamanho do retângulo Isso, vamos fazer com que seja 300, certo, 200, ok. Em seguida, duplicarei esse retângulo, selecionarei os dois retrângulos e pressionarei Chit Em seguida, ele cria um layout automático e, em seguida, um layout horizontal. Está bem? Agora, esse segundo retângulo não está visível. Para torná-lo visível, posso clicar nessa moldura de um único pé. E quando eu clico nele, podemos ver a caixa de seleção do conteúdo do clipe. E se eu desmarcar, se eu desmarcar, os elementos fora da moldura ficarão visíveis Está bem? Agora isso é um carrossel, que significa que ele tem a capacidade rolar horizontalmente Agora vou reduzir essa lacuna para 15, o que significa que esse é primeiro item do carrossel de cartas e esse é o segundo item do carrossel e esse é o segundo item do Está bem? Agora vou reduzir essa lacuna intermediária para 15 assim. Então eu posso adicionar o máximo de itens do carrossel, mas não vou. Vamos adicionar quatro deles. Talvez três funcionem aqui. Vamos clicar nesse primeiro retângulo e substituí-lo pela imagem Para fazer isso, vou até Place Image, e aqui tenho três imagens. Vamos adicioná-los a esses triângulos, aqueles como este. Ok, agora podemos começar o design. Primeiro vou reduzir os cantos como 15. E agora temos que adicionar o título. Adicione o título. Vou apenas pressionar isso e pressionar aqui. Em seguida, gradue-se, adicione um texto como este. Na verdade, podemos copiar o texto daqui. Copie até aqui. E agora podemos ganhar o estilo do texto. Agora vou selecionar o título deste item alimentar e esse carrossel zero e adicionar o layout automático Pressione Shift dez. Ok, agora vou mudar isso entre o ritmo e 15. Depois disso, clicarei neste e adicionarei o raio do canto como 15 Nós faremos isso por este também. Ok, agora o que eu faço é pressionar esse layout automático e pressionar Command. No Windows, deveria ser um controle antigo. Então vou diminuir o tamanho até aqui. Agora, o que eu faço é pressionar Single Food e clicar em Clip Content. Em seguida, clique aqui e clique em Conteúdo do clipe. Tudo bem, agora eu mudo essa correção para Fill Container. Agora vamos começar a adicionar esse valor em dólares e a classificação por estrelas. 36. Criando uma página de comida única - Parte 2: Vamos começar a adicionar esse valor em dólares e a classificação por estrelas. Então, vou adicionar o valor em dólares aqui e a classificação por estrelas abaixo do título. Então, vamos fazer isso. Em primeiro lugar, vou alterar tamanho do título para o tamanho do cabeçalho e, aqui, vamos adicionar o preço. Para fazer isso, vou continuar e criar o preço em dois dólares. Ok, então vamos fazer deles um layout automático. Deve ser um layout horizontal e a largura será o recipiente de enchimento. E vamos adicionar uma lacuna horizontal a uma foto como essa. Então, vamos mudar essa cor para verde. Vamos adicioná-lo assim. Agora, aqui, temos que adicionar a classificação por estrelas. Para fazer isso, posso copiar essas estrelas de um único alimento ou acessar os plug-ins no Plug in. Vá para Fonts On fonts. Aqui temos uma estrela e vamos selecionar a estrela e duplicá-la algumas vezes E destaque as estrelas daqui. E pressione Shift A. Em seguida, altere o espaço horizontal para 15. Vamos reduzir o tamanho dessas estrelas. Vamos clicar em Conc Strain Proporções e torná-las 14 corretas. E selecione-os, a lacuna horizontal ficará bem. E metade da estrela, isso muda de tamanho para 14. Coloque-o dentro do layout automático. E isso, ok, agora temos estrela. Vamos adicioná-lo na seção de um único pé, como esta. Basta cortar e colar assim. Em seguida, temos que adicionar a classificação. Para fazer isso, pressionarei e criarei uma caixa de texto. Então vamos fazer com que sejam quatro. Altere o tamanho do texto para 16 e desvincule-o. Vamos mudar para, então eu posso adicionar esse texto dentro do layout automático. Dez, cole assim. Em seguida, destaque o layout automático para alinhá-lo à esquerda, centro e vá para Configuração avançada de layout automático E clique neste stick para Align Taste Base line. Ok, agora vou mudar essa cor para a cor do tema. Tudo bem, agora podemos colocar isso dentro desse layout automático. Basta pressionar o controle X ou o comando X para cortá-lo. Dez comandos para colá-lo. Ok, então podemos reduzir o tamanho intermediário das estrelas. Vamos fazer com que sejam três. Tudo bem, agora, se conferir na análise , ficará assim. Na verdade, podemos diminuir isso entre o tamanho desse texto e o início Basta clicar em Starting Auto Layout dez. Clique em Layout automático de texto, envolva-o com outro layout automático dez. Vamos reduzir esses dois. Ok, é melhor. Agora é hora de criar esse botão e o livro didático para selecionar a contagem de itens Acho que fica melhor sem adicionar uma linha, linha base de texto. Vamos remover uma linha, testar a linha de base. OK. 37. Criando uma página de comida única - Parte 3: Ok, vamos criar o controlador de contagem e adicionar o botão de duas cartas. Primeiro de tudo, aqui vou criar uma moldura como essa. No quadro, vamos ajustar seu tamanho, como se 50 por 14135 funcionasse Bem, então vou reduzir os cantos como 15. Deixe-me adicionar um pouco de cor de preenchimento por enquanto. Ok, as curvas 15. Agora o que vou fazer é adicionar o Est, clicar em Tron, mudar a cor do traço para essa cor primária. E agora vou remover a cor de preenchimento. Ok, agora eu tenho que adicionar o sinal de mais e o sinal de menos. Então, vamos aos plug-ins de recursos, phone tosum, old phone tosum Podemos obter esses ícones, Ole search plus. Tudo bem, aqui temos o sinal de mais e também vamos obter o sinal de menos OK. Agora vou adicionar aqueles sinais de mais dez, menos dentro da moldura E aí está eu vou vender, depois vou adicionar impostos. Este texto será um deles. E há Adicionar tamanhos de texto. Selecione a cabeça, adiciona a cabeça. Tudo bem. Agora vou clicar no quadro e clicar em Shift para torná-lo layout automático. Depois disso, vou alinhar o centro. Em seguida, adicionarei essa lacuna horizontal entre dois automóveis. Agora vamos adicionar preenchimento horizontal como 15 e preenchimento vertical em quatro Tudo bem, agora vou remover essas molduras. A altura foi alterada, então vamos para uma altura fixa e vamos adicionar a altura como 40. Isso. Ok, agora o que eu posso fazer é mudar a cor desse campo para verde. E agora temos o controlador de contagem. Então, agora é hora de criar um botão. Para criar um botão, vou criar outro quadro e há um tamanho de quadro justo. A altura da moldura será 50 e a moldura será 135. Vamos dividir o raio dos cantos como 50. Na verdade, temos que combinar a radiação do canto a barra de pesquisa porque temos que manter a consistência Então será 25, então vamos fazer com que seja 25. Em seguida, adicionarei uma cor de campo assim, verde. Então, vou reduzir esses cantos de controle da libra para 25. Ok, agora o que podemos fazer é adicionar a caixa de texto a essa moldura de botão e o texto será al Agora vamos criar esse quadro como layout automático. Agora vamos adicionar preenchimento horizontal como 20 e preenchimento vertical como 50 15 é demais. Vamos verificar o tamanho dessa barra de pesquisa. Vamos fazer com que o preenchimento vertical também seja automático. Vamos definir isso como largura fixa. E vamos fazer com que a altura seja fixa. E o tamanho será adequado. Agora, vamos alterar o tamanho do rótulo para um subpreenchimento assim. Então, vamos transformá-lo em um centro de linha. Agora temos esse botão. Vamos criar um componente. E renomeie o componente como botão Ok, então carregue e vá até nossa folha de adesivos. Na folha de adesivos, vou colar assim. Ok, agora vamos pegar a instância desse botão assim. Então, vamos mudar a etiqueta para dois carros. Ok, agora o que podemos fazer é reduzir o tamanho desses detalhes no controlador de contagem, porque quando comparamos com o botão, são dois grandes. Então, primeiro vamos alterar o tamanho do subtítulo número dois. E o botão de mais e menos será bom para esse tipo de design Então, vamos selecionar esses dois quadros e adicioná-los no layout automático e tornar o layout horizontal. Depois disso, vamos mudar isso entre o tamanho e 15. E agora temos um botão de cartão perfeito para usar. Além disso, podemos adicionar esse botão At to card a esse quadro principal. Selecione a seção At to card e pressione o comando X para recortá-lo e pressione o comando V para colá-lo. Ok, então vou mudar a altura desse botão para 50. Ok, então selecione esse quadro e faça com que ele se alinhe ao centro esquerdo desta forma Vamos dar uma olhada no design , ficará assim. Na próxima lição, teremos que criar a seção de descrição e revisão. 38. Criando uma página de comida única - Parte 4: Agora é hora de adicionar uma descrição. Então, vou pegar a caixa de texto digitar algo assim. Então eu vou ao site da Ifs para colocar um texto fictício Vou apenas copiar a linha de texto neste ritmo, aquela linha de texto aqui. Depois disso, transformarei o texto em parágrafo. Você tem que reduzi-lo assim e eu vou manter apenas quatro linhas. Depois disso, adicionarei outro texto e isso será apenas uma ligação, leia mais e altere os detalhes para parar de cabeçalhar e alterar a cor de preenchimento para essa cor verde. Em seguida, vamos definir essas duas seções e pressionar Shift A. Em seguida, reduza esse tamanho intermediário para 15. Ok, aqui se quisermos, podemos adicionar um texto chamado descrição, mas vou mantê-lo assim. Depois desse texto, adicionarei a linha horizontal para separar essas duas seções, então ela será uma divisória Para criar um divisor, clicarei em Shape Tool e clicarei em Line E vamos arrastar uma linha como essa e pressionar Shift para torná-la uma linha corretamente. Agora, aqui, vou mudar essa cor para escura. E vamos fazer desse tamanho zero ponto A no design. Vai ficar assim. Se quisermos, podemos mudar essa cor mais escura para cinza escuro assim 39. Criando uma página de comida única - Parte 5: Agora, o que precisamos fazer é criar um revisável para criá-los Aumentarei o tamanho dessa estrutura de um único pé E aqui, vou criar uma nova moldura. E vamos ajustar o tamanho do quadro para isso. E vamos fazer da alta tarefa 135. Agora podemos adicionar efeito. Na verdade, não podemos adicionar efeitos diretamente ao quadro. O que precisamos fazer é criar um retângulo ao redor dessa moldura e torná-la assim Então vamos mudar a cor. Agora, o que posso fazer é criar uma camada e, em seguida, adicionar os detalhes. Primeiro, temos que adicionar as avaliações. Para fazer isso, selecionarei esta seção de revisão e a converterei em componente, e vamos renomeá-la como Review the Stars Em seguida, vou recortá-lo daqui e colá-lo na seção de elementos desta forma. Então aqui eu posso alterar o tamanho do design. Mas antes de mudar isso, vou criar uma variante. E agora podemos alterar o tamanho dessa variante. Então, para fazer isso, vou destacar todas as estrelas. E vamos mudar nós com 25, 25 é demais. Vamos fazer com que 2020 seja perfeito. E também esse tamanho de texto será 16. Vamos aumentar o número primo da variante. Ok, agora o que podemos fazer é acessar nosso design e clicar aqui. Em seguida, vá para Ativos. Em Ativos, temos estrelas de avaliação. Basta colocá-lo aqui. Na verdade, deveria estar dentro disso, assim, ok? Agora, o que podemos fazer é ir aqui e ir para ***** e com garantias como essa. OK. Agora vamos selecionar a segunda variante dessa estrela de avaliação. E agora vamos corrigir esse problema. Para corrigi-lo, clicarei no retângulo e clicarei aqui para torná-lo em posição absoluta O que significa que esse retângulo não será afetado na outra extremidade desta seção de revisão Então, vamos colocar esse retângulo na parte superior da tela. Em seguida, seleciono a moldura e aumento o tamanho da moldura. Na verdade, temos que aumentar essa largura em 300, o que significa que temos que aumentar o retângulo dois Depois disso, mudarei o efeito porque seria ótimo se o efeito tivesse ao redor do elemento, como nesta caixa de pesquisa. Para fazer isso, vou até aqui e vamos clicar no retângulo e manter esses efeitos inalterados E clique aqui. Em seguida, faça y como zero e faça b oito. E agora parece bom. Agora, o que eu tenho que fazer é adicionar um pouco de preenchimento horizontal e vertical Vamos adicionar a massa 15 por 15. Ok, agora temos a prévia. Então, vamos adicionar uma caixa de texto aqui. Por enquanto, vamos adicionar argila a um texto como este, diminuir o tamanho do texto Vamos fazer com que a tarefa preencha o contêiner. Ok, agora mude o tamanho para paraga. Temos que aumentar a altura desse design. Vamos aumentá-lo para 200. Também aumente isso. Ok, vamos fazer com que esse tamanho de lacuna seja 50. Agora, o que precisamos fazer é adicionar o Avata e o nome. Para fazer isso, vou criar um lábio, reduzir o tamanho do elif para cerca de 40 por 40 Agora, o que temos que fazer é adicionar outro livro didático e os livros didáticos serão, então vamos colocá-lo como subtítulo e colocá-lo assim Em seguida, destaque essas duas seções e converta-as um layout automático ou envolva-as com o layout automático, apenas com a tecla Shift A. Em seguida, faça um layout horizontal. Aqui temos que mudar a posição. O texto estará abaixo e o ícone do Avata estará acima. Então vamos fazer entre o tamanho dois. E vamos fazer uma linha à esquerda no centro. Agora, o que podemos fazer é aumentar a largura. Este quadro pressione o comando e aumente-o assim. Além disso, vamos aumentá-lo para os retângulos sin para realmente podermos alterar o conteúdo das alturas Aqui temos 15 acolchoamentos inferior e superior. Ele será ajustado de acordo com esta análise. Agora temos a caixa de revisão, e aqui podemos adicionar o texto chamado Revisão. Então, para fazer isso, vou clicar em e vamos fazer com que ele revise o tamanho do cabeçalho e o coloque acima desse quadro e abaixo deste Vamos cortar primeiro assim, depois selecionar esses dois elementos, primeiro deslocar A, depois fazer o tamanho 50. Ok, agora vou converter essa caixa de revisão em um componente, selecioná-la e clicar em Criar componente. Em seguida, vou renomeá-lo para Review Box. E agora vou cortar colar na folha de adesivos assim Ok, agora o que eu posso fazer é clicar no Frame e ir até Asserts. Em afirmações, temos a caixa de revisão. Vamos criar instantaneamente e colocá-lo aqui. Se eu for ao Layout e recortá-lo, podemos colá-lo assim. Depois disso, vamos criar a segunda caixa de revisão. Para fazer isso, posso simplesmente duplicar este. E vamos criar um terceiro. Em seguida, destacarei essas três caixas de revisão e as colocarei dentro do layout automático. Depois disso, vamos fazer um layout horizontal. Em seguida, clique aqui e clique em Conteúdo do clipe. E ficará assim. Então, o que podemos fazer é clicar em Clip Content. E aqui esta resenha não deve aparecer no preenchimento. Então, se formos aqui, ficará assim. Então, para fazer isso, clicarei no quadro, pressionarei o comando e ajustarei o. Gostamos disso e basta clicar no conteúdo do clipe. Tudo bem, agora temos a caixa de revisão. Então, quando eu verifico esse conteúdo, temos um grande espaçamento entre essas duas seções Então, vamos verificar isso em tempo real. Quando você vê, parece que esse espaçamento é demais porque já estamos na divisória; portanto, se diminuirmos esse espaçamento, isso não afetará Além disso, temos um problema com a sombra projetada da caixa de avaliação para corrigi-lo. Vá aqui, aqui. Vai ficar bem. Mas sim, temos um problema. Acho que devemos, sim, aumentar o tamanho dessa camada automática. Na verdade, podemos fazer a altura como recipiente. Em seguida, vamos adicionar o preenchimento 15. Ok, isso conserta. Além disso, temos que adicionar preenchimento horizontal, como 15. Acho que 15 é demais no preenchimento horizontal, faça quatro. OK. Acho que agora esse lenço sumiu. Tudo bem. Agora vou destacar essas três seções e pressionar a tecla Shift A para criar uma moldura diferente. E agora podemos diminuir o tamanho para cerca de 15 e vamos verificar. OK. Agora é olhar. OK. Também aqui temos outro problema. Porque eu já adicionei preenchimento como 15, então isso deve ser zero OK. Agora está tudo bem. Agora, o que podemos fazer é adicionar nome e avas. Então, para fazer isso, posso clicar nesse quadro e remover o conteúdo do clique. Clique também em Single Wood. Então clique em, clique em, e aqui agora eu pressiono Command e cilio este retângulo, Ciliate esta Em seguida, clique em Colocar imagem. Aqui temos avatares. Então, basta clicar nesses avatares e adicioná-los. Faremos o mesmo com o resto do design. Ok, agora vai ficar assim. Então, esses carrosséis são ações ou a rolagem horizontal Seremos criados na seção de protótipos. Por enquanto, basta criar o UY clicar no quadro de um único pé e clicar no conteúdo do clipe Em seguida, clique aqui e clique em Clique em Conteúdo e adicione a caixa de seleção E essa é a aparência do design do sofá. Agora vou reduzir esse tamanho de estrutura de um único pé assim. Agora completamos três quadros e temos que criar esse carrinho e aquela caixa pop-up, vamos fazê-los nos próximos vídeos. 40. Criando a página do carrinho - Parte 01: Agora temos que criar a página do coração. Então, vamos começar em. Conjunto de estrutura de arame. Vou copiar a moldura do coração. E vamos para a página da Moka aqui. Vou colar assim. E agora vou criar um novo quadro. Desculpe, eu tenho que selecionar o tamanho da moldura. É o iphone 13.14 Vamos gritar a moldura. Ok, agora podemos adicionar o layout vermelho. Ok, agora o que temos que fazer é adicionar a cabeça. Então, vamos aqui, vamos adicionar o cabeçalho. E o cabeçalho será a variante dois. Aqui, temos que converter esses dois, ou temos que adicionar layout automático a esse quadro. Para fazer isso, selecione o quadro e clique em Layout automático. E agora vamos definir os tamanhos. espaço vertical entre o item será 60 e o preenchimento horizontal será 15 Além disso, o preenchimento vertical será 15. Ok, agora podemos alterar esse texto para o meu cartão, copiar o texto do meu cartão e colá-lo aqui. Agora é hora de criar isso. Para criá-lo, a primeira geração cria um retângulo e esse retângulo será a imagem do item alimentar Então, vamos fazer 80 por 80. Acho que 100 por 80 será bom. Ok, agora esses cantos devem ser 15, certo? Sim, esses deveriam ser 15. Assim. E agora temos que adicionar o título e o valor, depois esse tipo de controlador de contagem. Então, vamos fazer isso. Primeiro, vou criar um texto, vamos adicionar alguns textos como este. Em seguida, selecione algum estilo de texto de título. E agora vamos copiar o nome. Vamos copiar esse nome. Cole assim. Na verdade, temos que colar apenas o texto e agora temos que adicionar esse controlador de contagem. Para fazer isso, selecionarei o controlador de contagem. Vamos ao layout. Ok, acabei de selecionar o controlador de contagem, então podemos convertê-lo em um componente, clicar em componente e vamos renomeá-lo como controlador de contagem Tudo bem, agora o que vou fazer é recortá-lo daqui e colá-lo em nossa folha de adesivos Vamos colar aqui. Ok, agora vou reconhecer esse quadro e vamos até Assist, pegar o controlador Hound e colocá-lo aqui assim Portanto, esta é uma instância do controlador de contagem. Agora precisamos desse controlador de contagem aqui. Então, vamos ajudar. E agora arraste e solte esse controlador de contagem assim. Mas, nesse caso, precisamos diminuir isso. Então, para fazer isso, podemos criar uma variante. Antes de fazermos isso, vamos adicionar a última seção. Quatro itens do carrinho serão o preço. Vamos adicionar o preço assim. Ok, agora vou selecionar todos esses itens e pressionar Shift para envolvê-los com o layout automático. Então, vamos fazer um layout horizontal. Clique aqui e vamos desmarcar isso. Clique em Conteúdo. Agora podemos ver o design. Vamos reduzir esse espaço entre os itens para 15. Vamos fazer dela uma linha à esquerda no centro. Agora podemos ajustar o design. Primeiro, vamos começar daqui. Na verdade, podemos simplesmente reduzi-lo para algo como 75. E agora clique nesse texto. E vamos transformar esse texto em tamanho de parágrafo. Ok, agora vamos criar uma variante desse controlador de contagem e tornar o chute um pouco menor. Então, aqui está nosso componente principal do controlador de contagem. Vamos clicar no componente principal e clicar nele na parte inferior da variante. E aqui temos uma variante. Agora é hora de reduzir o tamanho. Primeiro, vou reduzir o tamanho assim. Vamos fazer com que seja de 100 por 30. vamos mudar o tamanho desse sinal de mais. Vamos clicar nessa proposta de restrição e clicar no tamanho E vamos fazer com que seja como 60. Vamos reduzi-lo para 14. 14 ficam bem aqui. Nós podemos fazer o mesmo. Ok, agora vamos diminuir o preenchimento do lado esquerdo e direito. Vamos colocar como dois aqui. Também coloque como dois. Não precisamos alterar o tamanho do texto, mas se quisermos, podemos clicar no texto e alterá-lo para parágrafo, mas isso não é necessário. Ok, agora temos o tamanho diferente do controlador de contagem, então clique aqui. E aqui podemos verificar a variante e reduzir o tamanho, mas ainda assim ela parece maior. Então, o que podemos fazer é produzir mais conteúdo. Primeiro, vamos reduzir isso entre o tamanho do item para curtir, ok. Agora podemos simplesmente reduzir esse texto para o tamanho de 125 agora. Então, aqui podemos reduzir isso ainda mais. Se eu for até o design e verificar o design, na verdade, se o reduzirmos mais, ele não será amigável à acessibilidade. Então, há uma coisa que podemos fazer para manter isso como uma única linha que é reduzir o tamanho dessa caixa de texto. Então, vamos tentar reduzi-lo. Vamos fazer com que seja como 110. OK. Agora selecione isso. Então, vamos tentar adicionar entre a lacuna dois automática e ok. Agora vamos tentar aumentar esse texto. Ok, isso é bom. Vamos tentar aumentar esse texto. Na verdade, quando o aumentamos, o alinhamento é interrompido Temos que corrigir esse problema de pré-dimensionamento. que significa que, se adicionarmos números a esse valor, o tamanho aumentará e o design será desativado. Vamos consertar isso. Para corrigi-lo, vou apenas aumentar seu tamanho para 60 como largura. Então, se eu tentar adicionar mais números , não haverá problema. Então essa é a maneira de corrigir isso. E agora podemos criar o componente do item do carrinho. Vamos clicar no componente. E vamos renomear isso como For Name. E o preço será assim. Em seguida, clique aqui e clique em Criar componente aqui. Vamos mudar isso para o item For, ok, então temos que adicionar um divisor no meio Então, agora eu vou cortar este, e vamos aqui, colá-lo. Sim, assim. Ok, agora vou até a moldura do carrinho do meu carrinho e vou para*** Em ***, temos o componente do item alimentar. Na verdade, agora temos dois tipos de alimentos. Podemos renomeá-lo como se fosse um carrinho de comida. Então, vamos fazer isso como se fosse o primeiro dia. Vamos aqui e clique aqui. E vamos renomear esse item de comida de dois carrinhos. Ok, quando temos poucos alimentos, temos que adicionar um divisor. Usando o divisor, podemos separar esses alimentos dessa forma Então, vamos fazer isso. Vou até Shape Tools e clico em Linha, pressiono Shift e crio uma linha como essa. Em seguida, vamos mudar a cor para uma cor mais escura e arredondar os cantos, diminuí-la uma cor mais escura e arredondar os cantos, para 0,7. Ok, agora posso selecionar esses dois objetos e pressionar Shift para acelerar o layout automático E então aqui vou adicionar paddinessi. Ok, agora vamos tentar adicionar mais itens de comida de carrinho como este. Certamente temos que adicionar o interior desta moldura. Está bem? Em seguida, clique nesse divisor e cole assim Ok, agora parece bom. E só temos que duplicá-lo com isso, isso. Agora, na parte inferior, temos que adicionar as contagens subtotais e totais de alimentos e também o valor final do pedido Então, vamos fazer isso na próxima lição. 41. Página de carrinho de design - Parte 02: Temos que mudar o design do Meu cartão, especialmente os designs de itens alimentícios. Porque para a página padrão do cartão, deve haver uma maneira de remover itens do cartão. Portanto, nesse caso, não temos um botão para remover esses itens. Além disso, podemos adicionar a classificação que esses itens ou alimentos têm na seção Meu cartão, abaixo do nome do alimento. Então, vamos fazer isso primeiro. Vou até o componente principal, recortá-lo da folha de adesivos e colá-lo na página do cartão Tudo bem, agora isso é muito fácil. Primeiro, vou aumentar essa altura no item da carta, então, quando eu aumento, isso também afeta esses instantes Então, vou removê-los instantaneamente e agora ficará perfeito. Agora, o que estou fazendo é clicar aqui e clicar em uma linha para OK. Em seguida, adicionarei o Top Gap Pass 15, o preenchimento como 15. E então eu clico no texto e pressiono Shift 102 no layout automático. E nesse layout automático, torne-o um layout vertical. Depois disso, posso simplesmente cortar esse controlador de contagem e colocá-lo sob esse layout automático como este. Por enquanto, vamos alterar esse espaço entre a contagem 15. E agora o que eu preciso fazer é adicionar a contagem de avaliações para este item de rodapé. Para fazer isso, posso usar esse tipo de contagem de avaliações, então posso simplesmente copiá-la daqui. Vamos criá-lo para praticar. Ok, vá aqui e primeiro vamos até o ícone de plug-ins e fontes abertas aqui. Vou pesquisar estrelas. Vamos adicionar essa estrela aqui. Selecione-o nesse layout e recorte-o. Em seguida, coloque dentro dessa moldura. Certamente deveria estar aqui. E agora vamos definir o tamanho em 14. Ok, agora vou pressionar Shift e convertê-lo, ou colocá-lo dentro de outro layout automático. E eu pressiono N aqui, eu vou cinco. Na verdade, deveria ser 0,6 e agora vamos mudar seu tamanho para A. Vamos descobrir seu tamanho a partir daqui. Ok, qual é o tamanho? Deveria ser 13 e tudo bem. Agora vá aqui, e isso deve ser 13 e tamanho médio. Em seguida, clique nesses dois objetos. Na verdade, pressione Shift A e crie um layout horizontal. Aqui, o tamanho será seis. E clique nesse layout automático avançado definido em uma linha de base de texto Ok, agora temos que mudar a cor. Tudo bem, agora o que podemos fazer é remover essa lacuna entre dois. Na verdade, podemos verificar isso aqui e aplicar essa mesma configuração. Acho que acrescentamos, sim. OK. Agora, o que podemos fazer é aumentar o tamanho dois desse nome de pé aqui. E, na verdade, podemos aumentar toda a espera automática. Isso, ok. Agora eu posso aplicar o Auto Lay. Na verdade, podemos aumentar mais um ponto. Agora está perfeito. E agora temos que adicionar uma caixa de lixo ou ícone de fechamento para remover esse item do cartão Então, vamos aos Plug-Ins e aos ícones de chamadas fontosm aqui Vou vasculhar o lixo. Vou selecionar essa caixa de lixo e vamos selecioná-la Clique aqui, na verdade, podemos converter isso em layout automático. Clique neste texto e pressione Shift A. E agora vou colocar essa lixeira diretamente dentro do layout automático Agora clique no layout automático e defina-o como layout vertical. Agora vou definir o alinhamento e a horizontal entre eles O tamanho será dois. Em seguida, colocarei um recipiente para comprimidos para que os dois fiquem alinhados corretamente E vamos mudar a cor dessa lixeira para verde. Ok, agora temos um componente perfeito para alimentos para carrinhos. Vamos mudar esse preenchimento superior e inferior 7,5 porque vamos adicionar o para 7,5 porque vamos adicionar o divisor. E nessa divisória podemos definir a gordura horizontal Na verdade, gordura vertical 7.5 Ok, vamos adicioná-la, vou clicar nesta linha, pressionar Shift e colar, isso Então vamos mudar a cor para cinza claro, torná-la arredondada. Vamos adicionar 7.0 0.7 e clicar nele. Clique também neste item do cartão. Em seguida, pressione Shift dois no layout automático, e essa lacuna entre o tamanho será 7,5. Portanto, esse é o nosso componente principal. Mas também podemos adicionar essa linha a esse componente principal. Então, para fazer isso, eu tenho que envolver esse componente principal com outro layout automático. Então, deixe-me mostrar isso. Clique no componente e clique nessa linha ou no divisor Então vamos mudar a. Depois disso, podemos definir o tamanho como 7,5 Ok, agora esse é um quadro normal com layout automático e esse é o componente. Mas, na verdade, se pudermos adicionar essa linha dentro do componente, mas se a adicionarmos assim, ela não ficará perfeitamente viva. única maneira de corrigir isso é remover esse componente e criar um novo componente usando os mesmos detalhes. Para fazer isso, primeiro copiarei o nome do componente e deixarei ir para asserts. Em afirmações, criarei um componente de item alimentar. Na verdade, temos que colocá-lo fora da moldura. Então agora eu vou afirmar. Nas afirmações, vou até o cartão e, no cartão, simplesmente coloco uma instância como essa Em seguida, clico na instância e clico aqui. instância de desanexação frequente Agora, esse quadro não faz parte desse componente principal porque o separamos Então, agora eu posso simplesmente remover o componente principal. Quando eu o removo, não o veremos mais no painel de declarações porque apenas o removemos Agora, o que eu faço é ir para Layouts, e posso colocá-lo diretamente dentro do quadro, desta forma Em seguida, posso selecionar o componente principal e pressionar o botão Criar componente. vamos renomear o item de comida do carrinho de molduras desta forma Então, agora, se formos até as afirmações, posso ver o item alimentar ou o item alimentar do cartão, componente principal aqui Está bem? Agora vou cortar isso daqui e ir para a folha de adesivos E cole dentro da folha de adesivos. Na verdade, clique aqui e cole assim. Ok, passe o pote aqui. Agora vamos ao cartão. E, em resumo, podemos clicar neste item alimentar de cartão e adicioná-lo ao nosso design desta forma Ok, algo errado. Vamos afirmar. Ok, agora vamos. Tudo bem, agora o que podemos fazer é clicar no cartão Componentes do item alimentar, por exemplo. Então vamos colocar A aqui. Vou mudar isso para 15. Ok, agora podemos simplesmente adicionar itens como este. Agora temos que somar o total. E adicione o botão Fazer pedido. Então, vamos fazer isso no próximo vídeo. 42. Página de carrinho de design - Parte 03: Ok, agora aqui eu pressiono e crio uma caixa de texto. Então, essa caixa de texto será composta por alimentos, aqui temos dois, ou podemos adicionar a contagem de alimentos, neste caso, a cada quatro. E vamos mudar esse texto para subtítulo. Agora, neste lado , podemos adicionar quantidade. Então, vamos duplicar esse texto e selecionar esses dois textos. Em seguida, pressione Shift A e crie um layout horizontal e defina o contêiner do campo Ta. E agora vou adicionar essa lacuna horizontal entre dois. OK. Agora vou duplicar este assim e aqui podemos alterar os dois impostos Aqui podemos adicionar texto por enquanto, vamos adicionar zero. Nós podemos fazer a mesma coisa aqui. Agora, o que eu faço é selecionar essas duas seções e pressionar Shift para fazer a diferença no layout. E vamos adicionar o Ta. Adicione entre os tamanhos 15. Em seguida, adicionarei o divisor aqui. Vamos clicar na linha. Vamos adicionar o divisor assim. E agora vamos mudar a cor para a cor superior. Ok, agora vamos alterar o tamanho para dois e clicar nessa configuração avançada de traçado. E aqui vou adicionar isso. Ok, agora vou cortar essa divisória e colar dentro. Acenda isso. Depois, vou copiar um dos textos e colocá-lo abaixo da divisória aqui Vou adicionar isso como valor total aqui. Por enquanto, adicionaremos um zero. E agora o que podemos fazer é clicar no texto e alterá-lo para cabeçalho. Também altere esse texto para cabeçalho. Aqui vou mudar sua cor para nossa cor fina. Ok, agora abaixo disso eu estarei no botão que liga para fazer o pedido. Então, para fazer isso, aumente o tamanho da moldura e, em seguida, vá para *****, clique no botão e, nesse caso, coloque em um. Em seguida, altere essa etiqueta para fazer o pedido Nesse caso, podemos fazer desse botão a garrafa de largura total. Para fazer isso, podemos facilmente ir aqui e criar uma variante. Nessa variante aqui, eles clicam no botão ou na segunda variante. Agora vá aqui e clique neste. Em seguida, mude para a segunda variante. Depois disso, posso alterar suas propriedades primeiro, vamos alterá-lo para encher o recipiente e ele se tornar um botão de largura total. Ok, agora vou definir essas duas primeiras chances e pressionar Shift A. Então vou mudar esse tamanho para cerca de 30. Vamos fazer com que seja como 40. Estas, OK, agora nossas páginas parecem boas. Vamos dar uma olhada no design. Agora, o que precisamos fazer é adicionar um conteúdo. Então, no próximo vídeo, faremos isso. 43. Página de carrinho de design - Parte 04: Ok, vamos adicionar conteúdo real à seção do meu cartão. Então, vamos começar com o primeiro item. Então, vamos fazer do primeiro item esse item alimentar. Então, coloque o texto no café e cole o texto aqui. Na verdade, eu tenho que adiar o texto antes de engordá-lo aqui. Eu posso aumentar o tamanho. Então, para aumentar o tamanho, vou até os pais. E vamos fazer com que ele tenha esse tamanho. Ou podemos simplesmente clicar aqui e Pec caiu no contêiner. Ok, agora isso afetará todo o conteúdo. Ok. Primeiro, vamos adicionar esses alimentos mais apertados assim Ok. Agora podemos adicionar os preços. Para adicionar preços, você pode ir aqui e verificar esses preços. E aqui temos o problema. Esse texto deve estar alinhado ao lado direito. Então, vamos corrigir isso. Vou clicar no texto e corrigir esse alinhamento à direita da tecla Deve ser corrigido da mesma forma que foi corrigido. Ok, vamos adicionar outros detalhes. Ok, agora vamos alterar esses valores para. Agora, o que precisamos fazer é adicionar as imagens. Para adicionar imagens, pressiono Command e seleciono o fanger. E clique aqui para colocar as imagens. Vá para alimentos. E nas comidas aqui temos a comida. Ok, agora temos que adicionar a contagem de alimentos. São cinco. E vamos adicionar o valor total. O valor total é de $10. E aqui temos que alterar esse valor porque pedimos dois T, então ele deve ser alterado para $5 Agora vamos somar tributados como três. E aqui vamos votar o total como $13. Ok. Agora vamos verificar o design e ele ficará assim. Então, agora concluímos quatro reivindicações e agora temos que criar a caixa de mensagem pop-up e converter esses quadros em protótipos 44. Adicionar ao carrinho Popup: É hora de criar esse pop-up. Então, vamos projetá-lo. Vou apenas copiá-lo. E vamos para a página de marcação e colocá-la como aqui. Vamos colocá-lo aqui. Tudo bem, agora, como primeira etapa, vamos criar o quadro. O tamanho da moldura será do iPhone 13.14 Agora, o que vou fazer é reduzir o tamanho dessa moldura porque é um pop-up Portanto, é melhor reduzir o tamanho horizontal esquerdo e direito em cerca de 30 pixels. Então, vamos fazer isso. Principal motivo para fazer isso, se alguém clicar no botão adicionar dois cartões, o pop-up aparecerá assim. Para reduzir o tamanho, clicarei na moldura. E em Largura em largura, adicionarei -30 E agora o tamanho original da moldura era 319 Depois reduzimos 30 pixels e agora temos 360. Então, vamos tentar adicionar esse layout de grade, ok? E agora vou pressionar o comando e reduzir a altura. Basta fazer um 360. Tudo bem, agora vou mudar o nome da moldura para adicionar ao carrinho pop. Ok, agora o que temos que fazer é converter isso em um layout automático. Na verdade, adicione o layout automático. Digamos que as propriedades, vamos fazer entre os tamanhos 15 neste. Está bem? Agora, faça com que ele se alinhe ao centro Agora vamos criar a comida adicionada ao texto do carrinho. Está bem? O que acabou de acontecer, na verdade? Ok, quando eu adiciono o texto, ele fica menor porque definimos o redimensionamento horizontal e vertical Então, vamos pressionar o controle de comando para controlar e refazê-lo. E vamos fazer com a alta correção de tarefas. Agora vou adicionar texto e vamos adicionar esse texto aqui. Em seguida, vá para o estilo de texto e selecione o estilo de texto do cabeçalho. Agora temos que adicionar esse botão de cartão. Para fazer isso, irei para Asserts. Em afirmações, temos esse botão. Basta colocar isso, e vamos escrever este texto. Cole aqui, depois das imagens do botão. Ok, agora temos o botão principal. Mas será melhor se esse botão tiver mais preenchimento esquerdo do que direito Então, vamos tentar usar a variante. E na variante, temos que mudar isso como recipiente de enchimento. Então eu acho que esse look é melhor do que o anterior. Ok, agora o que precisamos fazer é criar esse botão de continuar comprando. Então, vou apenas duplicar esse botão e ele é Adicionar os impostos OK. Agora, esses dois botões são semelhantes, mas quando adicionamos dois botões, devemos ter apenas um botão ardente e o segundo botão deve ser secundário Nesse caso, o botão principal de call to action é visualizar o cartão. O botão Exibir cartão ficará assim. E vamos tornar esse botão secundário. É muito fácil fazer isso. Vou até a folha de adesivos e vou pegar um pouco de espaçamento. Acho que vamos colocá-lo abaixo agora. Vou escolher esse botão de variante de anúncio e criar um botão secundário Criar um botão secundário é fácil. Vamos renomear isso como secundário. Ok, agora vamos mudar isso para secundário. E agora podemos mudar o design. Mude o design primeiro, adicionarei um traço. Esse tamanho de traço será dois e a cor será verde. Além disso, vou colocá-lo no centro. Em seguida, removerei a cor do campo. A cor do campo será Y. Em seguida, a cor do rótulo será essa cor verde Ok, acabamos de criar a segunda refutação como esta. Agora temos o primeiro pop-up. Como próximo passo, temos que reduzir os cantos. Então, para fazer isso, vou adicionar 25 aos cantos dessa moldura e agora ficar assim. Em seguida, basta clicar nesses dois botões e pressionar Shift para torná-lo um layout automático ou adicionar o layout automático. Em seguida, selecionarei o layout automático principal e alterarei essa lacuna vertical para 30. Vamos tentar somar como 60. 60 é demais. Vamos adicionar como 30. Ok, agora temos um pop-up. E esse pop-up estará dentro do aplicativo quando convertermos as marcações em um protótipo Então, na próxima lição, criaremos esse segundo pop-up. 45. Como projetar o pop-up de sucesso de pedidos: Ok, vamos criar esse pop-up. Para fazer isso, copiarei esta seção de sucesso do pedido e acessarei o Smoke Up and 40 aqui. Ok, então o que vou fazer é criar uma nova moldura. Esse tamanho de moldura será do iPhone 13.14 e vamos reduzir o tamanho como um fixador 30 E vamos adicionar o layout da grade Agora, primeiro adicionarei o texto. Esse texto será a mensagem de sucesso do pedido. Ok, então um estilo de texto. OK. Agora, o que vou fazer é adicionar layout automático. Portanto, o layout automático será corrigido. E também a altura deve ser fixada. Altura, e aqui deveria ser 365. Ok, agora vamos mudar uma linha, no centro superior. O preenchimento será 15 e o preenchimento inferior também será E o acolchoamento lateral, ou acolchoamento horizontal, será 152 Vamos adicionar a lacuna 60. E agora vou adicionar outra caixa de texto. Essa caixa de texto indicará que seu pedido foi feito com sucesso ou você fez um pedido com sucesso. Então, vamos defini-lo como subtítulo e torná-lo um centro de linha. Agora temos o ID do pedido. Vamos duplicar este e adicionar esse texto assim. E vamos mudar a cor de preenchimento para verde. Agora temos esse botão Rastrear pedido. Vamos adicioná-lo. Vá para ***, vá para Botões > Botão de inserção. Na verdade, deveria estar aqui. Então, vamos mudar o texto para Trade Trade. Tudo bem, agora vamos para a segunda variante, e devemos ser um contêiner de campo como este. Ok, agora o que temos que fazer é diminuir o tamanho da moldura. Basta pressionar comando ou controle e retirar, digamos, As 400. Ok, agora vou selecionar esses três elementos e pressionar Shift para criar um layout automático. Em seguida, adicione uma lacuna entre os tamanhos 15 e aqui, vamos adicionar o Ta auto e ver o que acontecerá. Não, o carro não funcionará bem, então temos que mantê-lo em Tas 60. E talvez possamos diminuir esse tamanho para 360. Ok, agora temos que adicionar o botão fechar. Para fazer isso, podemos acessar os plug-ins e o Fontosum. Em Fontosum, vamos pesquisar de perto. Sim, vamos pesquisar na hora. E aqui temos o botão. Então, basta ir ao Layout e remover este. Em seguida, clique no botão e clique nesses dois elementos. Mudança rápida a e no layout automático. Em seguida, defina-o como layout horizontal. Agora devemos fazer esse pedido seja bem-sucedido na parte superior e esse ícone vetorial na garrafa. Em seguida, defina o quadro e torne-o um centro de linha. E vamos definir isso como contêiner de campo e definir isso como automático. Ok, agora vou mudar a cor desse campo para verde. Ok, agora vamos mudar a cor dessa moldura para que o pedido seja bem-sucedido, estoure e reduza a borda para 25. Ok, está muito melhor agora. E talvez possamos adicionar esse texto ao centro. É muito fácil criar esse centro. Basta clicar no texto e fazer com que pareça um recipiente. Em seguida, adicione texto em um centro de linha exatamente assim. É o centro central. E agora temos todas as molduras. E nas próximas aulas, converteremos esse aplicativo em um tipo de foto intuitivo. 46. Corrigindo problemas de UI/UX: Agora temos todo o design. Então, eu vi alguns problemas no design e, nesta lição, vamos corrigir todos esses problemas. Como primeira edição, esse menu de hambúrguer é maior E se reduzirmos o tamanho desse menu de hambúrguer , ficará ótimo Então, vou para o componente principal da nossa seção de cabeçalho. E aqui vou apenas selecionar a moldura. E vamos reduzir a altura desses retângulos. Vamos torná-los grossos. Está bem? E agora vamos ver o design. Então, agora o que podemos fazer é clicar na moldura e aumentar o tamanho intermediário. Vamos aumentar o tamanho intermediário, como quatro. E agora está muito melhor do que os anteriores. Então, podemos diminuir a largura dessas lantejoulas. Vamos fazer com que sejam 40. E defina o quadro em uma linha, na verdade aqui. Vamos definir isso como: Ok. Agora, se verificarmos o design, é muito melhor. E agora temos outro problema. Então, vamos clicar na moldura e ir para Prototype, mas não se preocupe Nas próximas lições, mostrarei como converter esse design em fotótipo Por enquanto, vamos até a configuração Mostrar propriedade e, aqui, selecionarei nossos dispositivos, iPhone 40, porque nosso tamanho de quadro é 390 Em seguida, clicarei em Pessoa. Vamos ao design. Ok, aqui está a página inicial. Nesta página inicial, o logotipo foi coberto por esta câmera. Então, o que podemos fazer para corrigir isso é um preenchimento superior. Portanto, adicionar preenchimento superior é muito fácil Então, vou desenhar e clicar na moldura. Aqui, vou mudar esse preenchimento superior 60 e vamos ver como fica Agora parece muito melhor, mas podemos definir para 30. Ok, 30 funcionarão aqui em uma volta real. Isso não será um grande problema porque o aplicativo se ajustará de acordo com o dispositivo. Ok, agora eu tenho que fazer isso para todos eles também. Mas se eu adicionar preenchimento ao componente principal, só preciso fazer isso de uma vez Então, vamos fazer isso com muita facilidade. Selecione o componente mestre e, em seguida, adicione ao preenchimento como 15, porque já adicionamos o preenchimento do quadro como Ok, agora vamos ver Clerk. Agora, a segunda edição é que temos esse menu de hambúrguer em cada página Mas deveria estar apenas na página inicial. A outra página deve ter um botão Voltar. Então, vamos consertar isso. Conserte isso. Eu vou até os tigres. E aqui temos a variante. Então, vou clicar aqui. E vamos até Plugins e selecione Ontos. Então aqui eu posso pesquisar novamente. Na verdade, temos o ícone aqui, então vamos clicar nele. E aqui temos o ícone. Eu copiei isso. E vá para a variante dois no quadro cinco neste menu de hambúrguer Eu só colo. Em seguida, removerei esses elementos adesivos. E agora eu posso aumentar o tamanho desse ícone. Na verdade, o que eu posso fazer é removê-lo desta moldura. Assim mesmo. E remova a moldura. E agora o que eu posso fazer é fazer isso parecer, então eu posso simplesmente aumentar o tamanho dessa forma , realmente controlar e restringir as proposições aqui restringir as proposições Vamos fazer com que o tipo 24 seja duas semanas, vamos fazer com que seja 18, 16, 14. Ok, 14 é muito melhor. Agora vou mudar a cor do campo para essa cor verde. Agora, se verificarmos o design, ele ficará assim. Na verdade, deveria ser 30 porque esses, porque a altura desses elementos é 30. Então, vamos copiar 10 desse quadro e colá-lo. E agora remova esse ava e coloque isso dentro da moldura. Na verdade, vou aumentar o tamanho desse vetor para 20 porque ele deve ser semelhante a esses dois. Ok, acabei de defini-los como 17 e, em seguida, verei a variante e, na parte superior, o preenchimento como 15 Ok, acho que agora parece bom. Então, agora temos outro problema. Nesta seção, temos 60 como espaço entre os espaçamentos, mas aqui temos cerca de 15 Então, devemos aumentá-lo. Para aumentá-lo, basta colocar a barra de pesquisa fora do quadro e ela mudará assim. Vamos ver a aparência, ok, agora temos uma aparência semelhante na seção. Ok, aqui também podemos tornar esta cidade assim agora. É muito melhor. Ok, esses são os problemas que eu vi no design final. Agora vou remover as estruturas de arame que obtive da página de estrutura de arame e protótipo porque já temos todo Então eu vou fazer uma linha como esta para eles. Na verdade, temos que mudar isso depois de projetarmos o protótipo Mas, por enquanto, vamos colocá-los assim. Ok, agora no próximo vídeo vamos criar um rodapé. 47. Menu de rodapé de design: Ok, agora vamos criar o menu de rodapé. Então, para fazer isso, vou aqui e clico em Corner Frame. E vamos redimensionar esse quadro assim. E vamos fazer uma moldura com a moldura mais alta de 60. E agora meu plano é criar três ícones. O primeiro ícone está em casa e o segundo são meus pedidos, e o terceiro é minha avaliação. Então, neste caso, temos três itens principais, então vamos criar três deles. Em primeiro lugar, obterei ícones para essas três opções. Então, em casa, tenha em casa. Sim, vou cozinhá-lo dentro desta moldura, e vamos adicionar otolea a esta Ok, agora o que temos é ordem. Vamos encontrar o ícone para fazer o pedido. Eu vou usar isso. Xícara de chá, Pka, xícara de café Pika Então o que precisamos é a Rebeca. Vamos verificar e talvez reiniciar o comando Ticon. Bem, então vamos adicionar esse comando Tica. Ok, agora vamos mudar isso para encher o recipiente e adicionar este como foto. O preenchimento horizontal será zero e o preenchimento vertical 15. Ok, agora devemos ter texto para cada link. Os usuários devem entender o significado do ícone. Então, vamos criar um texto. E a primeira mensagem estará em casa. Vamos mudar seu estilo para Paca. Podemos torná-lo médio e reduzir o tamanho da fonte para dois. Ok, então destaque essas duas seções e descanse o turno para criar um layout automático. E a diferença será 10 a 15 é demais. Pode colocá-lo no centro desta forma. Então seremos, e vamos fazer o mesmo com o ícone do café. Então, vou apenas duplicar este. Em seguida, corte o ícone do café e coloque-o dentro deste. E então aqui vou mudar isso para encomendar pedidos. Em seguida, duplicarei esta, substituirei a imagem e aqui a adicionaremos como resenhas Ok, agora vou reduzir essa adição superior para zero e, portanto reduzir o preenchimento inferior, agora vou mudar a cor de preenchimento para essa cor verde Então, faremos isso para este pedido. 1.12 Ok, agora temos o menu de rodapé. Portanto, esse menu de rodapé deve ficar fixo quando rolamos o design na face do protótipo Mostrarei como fazer Por enquanto. Vou fazer deste rodapé uma posição absoluta O que significa que podemos colocar esse rodapé em qualquer lugar. Não vamos, na verdade, temos que adicionar cor de preenchimento. A cor de preenchimento será branca. E agora podemos adicioná-lo em qualquer lugar que quisermos. Então, temos que adicionar um pouco de bandeja superior e acolchoamento inferior. Vamos fazer isso 6.6. OK. E selecionarei a seção de rodapé, clicarei em Criar componente e mudarei seu nome para Rodapé Vou cortá-lo agora. Vou colar na folha de adesivos assim. Ok, agora temos todo o design que podemos usar para converter isso em um protótipo Na próxima lição, conheceremos a fototipagem e seguiremos as melhores práticas para criar protótipos melhores práticas para criar protótipos 48. Prototipagem - Parte 1: Fema incorporou ferramentas para converter nossos mais copos em um protótipo Se você acessar o design da Fema, verá uma tacha chamada protótipo no painel lateral direito Basta clicar nele. Ao clicar nele, você verá esse tipo de janela. Se você não vê, basta clicar na tela e não selecionar nenhuma moldura. E aqui você pode selecionar o dispositivo. Nesse caso, selecionarei o dispositivo como iPhone 14 porque minha moldura tem esses 390 pixels Então, se formos para Prototype, vamos clicar em Canvas E aqui o iphone 14 com esse 390. Ok, então aqui podemos mudar o modelo do iPhone 14. Então, vou definir como meia-noite. E se quiser, você pode alterá-lo como quiser. Também podemos girar o dispositivo, mas neste caso eu o usarei como padrão Portanto, também podemos alterar a cor de fundo dessa forma. Então, vamos verificar isso em ação. Então, vou clicar neste botão atual. E aqui vamos para nossa página inicial. Aqui temos a moldura do iPhone 14. E podemos mudar essa cor para, vamos mudá-la como azul. E a cor principal do tamanho principal simplesmente muda para azul. Além disso, podemos mudar o plano de fundo. Vamos mudar para a cor cinza. Agora, essa é a maneira de selecionar o dispositivo para seu design. Em seguida, selecionarei a estrutura inicial porque essa é a estrutura em que iniciamos o fluxo. Quando clicarmos na página inicial, teremos um texto chamado Flow Starting Point. Aqui, clicarei neste sinal de adição no ponto de partida. Ponto de partida significa o local em que iniciamos o fluxo ou começamos a usar o aplicativo. Nesse caso, primeiro iremos para a página inicial, depois clicaremos nesse item de rodapé e, em seguida, iremos para a página de pé único. Depois disso, adicionaremos ao carrinho. Então esse é o primeiro ponto de partida. Também podemos ter outro andar. Então, no próximo andar, clicaremos no botão de pesquisa e ele irá para a página de rodapé de pesquisa. Depois disso, clicamos nesse item do pé e ele vai para o pé único. Então é disso que precisamos, ponto de partida. Mesmo que você não selecione um ponto de partida, o Fema adicionará um ponto de partida padrão Nesse caso, renomearei esse fluxo como Placeorder Place Order Nesse fluxo, quando clicamos nesse item de rodapé, ele deve nos redirecionar para a página de pé único Há algumas maneiras de criar esse fluxo. O método iniciante, não profissional ou difícil, basta clicar no elemento que você deseja redirecionar Nesse caso, é o item do pé. ao passar o mouse sobre esse elemento, você verá esse tipo de ponto E quando clicarmos nesse ponto e o arrastarmos assim, veremos uma seta. E se quisermos ir para a estrutura de um único pé, podemos simplesmente arrastá-la e soltá-la na estrutura de um único pé. Chamamos essa linha de conexão. Esse é o ponto final inicial da conexão. E chamamos isso de conexão. Observe que esta página é o ponto final da conexão. O comportamento dessa conexão. Quando o usuário clica neste alimento, o usuário é redirecionado para esta página de um pé Assim, podemos ajustar as opções da conexão. Vamos clicar na conexão, e aqui temos o pop-up. Nesse pop-up, podemos definir a ação, neste caso ao tocar, que significa que quando o usuário toca nesse item do pé, a ação deve acontecer. Aqui, nós o definimos. Navegue até uma única opção. Aqui está o quadro de saída única, e aqui podemos adicionar animare Agora vamos adicionar isso como instantâneo e vamos tentar essa ação. Para experimentá-lo, clicarei no modo atual. E aqui, se clicarmos nesse alimento, devemos redirecionar para a página de um pé Então, vamos tentar. Então, agora estamos na página de um pé. Ok, essa é a maneira de criar um protótipo, e aqui podemos adicionar animação Nesse caso, vamos adicionar essa animação push. Mas eu geralmente não uso essas animações para projetos nos testes de usabilidade, mas podemos experimentá-las. Então, vamos voltar aqui. Isso é animação? Agora, aqui está a verdadeira questão. Atualmente, temos apenas uma estrutura de um pé. Portanto, quando clicamos em um desses alimentos na página inicial, devemos redirecionar essa página de um pé na conexão Os comportamentos de conexão padrão são tocar e navegar até o quadro de pontos. Vamos tentar assim também. Vamos fazer isso por esses 12, ok? Agora, se clicarmos nesses itens, podemos simplesmente ir para a página de um pé. Agora pense que você tem 100 itens como os alimentos, que significa que temos que criar 100 conexões como essa. No entanto, se você precisar alterar a moldura, neste caso, quando clicamos nesse único alimento, se quisermos que ele vá para uma moldura diferente, como essa moldura de cartão, precisamos alterar essas conexões uma por uma. E não é uma forma profissional e levará muito tempo. No próximo vídeo, mostrarei como corrigi-lo usando o componente. 49. Prototipagem - Parte 3: Vamos ver como usar componentes para criar protótipos sem criar muitas conexões como essa Então, primeiro removerei essas conexões, porque se usarmos componentes para criar essa conexão, precisaremos criá-la apenas de uma vez. Então, agora eu tenho que encontrar o componente mestre. Se você se lembra, esse é o componente principal que criamos para esse item de rodapé. Portanto, esse componente mestre tem muitas instâncias, então todos esses itens de base são instâncias desse componente mestre. O que significa que os comportamentos dos componentes principais se aplicarão a todas as instâncias que criarmos usando esse componente mestre. O que significa que se criarmos uma conexão como essa, isso deve ser aplicado a todas as instâncias. Mais uma vez, deixe-me mostrar o que eu fiz aqui. Eu posso ir até a aba do protótipo. E quando eu vou para a aba do protótipo, passo o mouse sobre o pé principal Esse é o componente principal. Em seguida, crio uma conexão e a aponto para essa estrutura de um único pé. E as propriedades dessa conexão estão disponíveis. Navegue até um único alimento, o que significa que quando alguém clicar nesse componente principal ou instância desse componente mestre, ele navegará até único pé e teremos uma animação push. Vamos ver isso funcionar. Eu vou para o modo de apresentação. E no modo de apresentação, vou para Opção e clico em Mostrar barra lateral Aqui temos o chão. Então clique no chão, podemos simplesmente clicar aqui e clicar no ícone Apresentar. E aqui, se eu clicar em qualquer item desse rodapé, devo redirecionar para a página de um pé Então, vamos experimentar. Ok, funciona. E vamos clicar nesse. Redirecione para a página do item de rodapé porque usamos o componente mestre Então esse é o poder do componente mestre. Então, agora, se eu clicar nesse quadro, ele mostrará toda a conexão que esses componentes de item ativo da instância têm. Essa é a maneira fácil e proporcional criar o protótipo, como eu disse Agora, se quisermos alterar a conexão, neste caso, se quisermos alterar essa conexão para a placa, precisamos apenas alterar a conexão do componente mestre. E isso se aplicará a instâncias E como essa. Se adicionarmos essa conexão individualmente, teremos que reconfigurá-la manualmente na moldura do cartão quando a alterarmos Agora vamos configurá-lo para o single. Ok, agora o que temos que fazer é depois de irmos para a página de um pé, o controle deslizante não está funcionando Temos que fazer esse controle deslizante funcionar. Além disso, temos que adicionar uma ação a esse botão de adicionar ao carrinho. Além disso, devemos adicionar ação a esse botão Voltar e adicionar o rodapé Então, vamos fazer isso um por um nas próximas lições. 50. Fazendo carrossel de rolagem: Ok, na página de um pé, temos que adicionar o recurso de rolagem horizontal a esse carrossel de imagens Para fazer isso, vou até a página de um pé e, aqui, selecionarei a moldura. Portanto, esse é o quadro e atualmente não está exibido porque adicionamos o conteúdo do clipe Checkboox Basta clicar na moldura e desmarcar o conteúdo do clipe. Em seguida, selecionarei esse quadro e aqui temos a caixa de seleção do conteúdo do clipe. Agora vou colocar essa moldura de cartão aqui. Agora ainda tenho a prévia completa. Não tenho o recurso de rolagem horizontal para corrigir isso. Primeiro, eu tenho que reduzir o tamanho desse quadro. Atualmente, esse tamanho de quadro está quente, mas precisamos alterá-lo para apenas a parte que deve ser visível no carrossel Nesse caso, pressionarei o comando e reduzirei o tamanho do quadro para aqui, porque só precisamos ver esta seção Se eu for ao design, veremos apenas um slide. Agora eu ajusto essa moldura em dois tamanhos, então o que eu faço é ir para a aba Protótipo Na guia de protótipo, temos comportamento de rolagem para a posição Vou definir esse pergaminho com um bloco. que significa que quando rolamos assim, as imagens ou o carrossel também rolam com o resto do elemento Em caso de transbordamento, temos que defini-lo como horizontal. Agora, se verificarmos, a rolagem horizontal está funcionando perfeitamente. Agora, se eu verificar o design, nosso preenchimento não está alinhado corretamente . Vamos consertar isso. Para corrigir isso, basta acessar o design e selecionar a moldura. Em seguida, clico em Conter. Agora, se eu for ao design, ele ficará perfeito. Então, essa é a maneira de criar rolagem horizontal e criar um carrossel no Figma Na próxima lição, adicionaremos a seção de rodapé ao design 51. Menu de rodapé de design: Agora é hora de adicionar esse rodapé. Rodapé. Nunca acesse nossa página inicial. Para fazer isso, temos o design do rodapé aqui e o criamos em design, seção de trabalho altamente filiativa Então, vamos recortá-lo e colocá-lo na página inicial. Depois disso, vou definir isso como posição absoluta. Então o que vou fazer é configurá-lo assim. Em seguida, pressione Command e encaixe-o nos cantos. Depois disso, adicionarei o preenchimento esquerdo e direito de 15 por 15 Em seguida, para o preenchimento inferior, adicionarei a linha 30 Vamos mudar a cor de preenchimento desse design. Para fazer isso, vou deixá-lo escuro e agora vou alterar as cores dos itens como Y. Além disso, isso será Y dois, somente a seção selecionada será verde Então, depois disso, o que vou fazer é clicar no botão inferior da Aline e colocá-lo abaixo do design Então eu vou até o protótipo. No protótipo chamado comportamento, definirei essa posição como fixa, permanecerei no lugar Depois vou até a maquete e verifico o design. Vai ficar assim. E, na verdade, podemos reduzir isso para cerca de 15. Parece muito parecido com isso, talvez. Vamos configurá-lo para o teste 20 também na parte superior. Que tal dois? Teste 15. Ok, agora está tudo bem e aqui temos um problema. Então, vamos verificar isso. Ok, temos que remover esse. E eu não sei como fomos lá. No entanto, agora temos um ótimo rodapé e ele parece muito bom Agora, o que precisamos fazer é adicionar esse rodapé a cada página É muito simples, basta selecionar a impressão e acessar os perigos. Então, podemos simplesmente criar uma instância desse design. Vamos descobrir. Deve estar na página inicial, ok, com os pés assim Mas a única coisa que precisamos configurar corretamente é aumentar o tamanho da moldura dessa forma. E coloque esse rodapé na moldura. E agora clique na parte inferior da linha. Vamos produzir esse tamanho de quadro assim. Vamos ver isso em ação. Vamos até o centro de busca. Na verdade, temos que colocar o final do design assim. Então, para fazer isso, clique aqui e aumente o tamanho do design. E basta clicar no pé e clicar neste botão de linha. Vamos ajustá-lo manualmente desta forma e como 30 Okie. Vamos ver isso em ação. Temos que ir até a propriedade e definir uma estadia fixa. E agora vai funcionar assim. Então, vamos continuar com isso e fazer isso para os quadros. Ok, agora está perfeitamente configurado. E agora, na próxima lição, continuaremos esse fluxo de pedidos de colocação. Então, nos vemos na próxima lição. 52. Adicionando conexão ao Popup: Ok, no protótipo, acabamos de criar a fita adesiva. Então, quando alguém clica em um item de pé, ele vai para o pé único. Agora, o que temos que fazer é se alguém clicar neste botão de dois cartões, ele abrirá isso em dois cartões, abrirá um. Então, para fazer isso, eu clico no botão Com dois cartões clico neste carregamento de conexão e adiciono aqui. Então aqui eu tenho a maneira de mudar a propriedade. Portanto, a ação estará ao toque na transação ou a alteração será a sobreposição aberta Porque precisamos adicionar esse pop-up quando alguém clica nele em To Car. Ok, agora temos propriedades para configurar. A ação acontecerá instantaneamente. E aqui temos sobreposições. No design, o pop-up deve estar centralizado e ter a seguinte aparência E não preciso fechar isso ao clicar fora da caixa pop-up, preciso adicionar o plano de fundo. Então eu clico em um plano de fundo. E aqui cancelamos a cor escura. E vou reduzir a opacidade para 25. Ok, agora vamos verificar isso em ação. Então, vamos para a primeira página. E eu clico neste item de comida aqui. Eu clico em At To Card. Quando clico em At To Card, adiciono essa comida ao cartão pop A. Então, é melhor que o fundo seja mais escuro para ajudar a ver claramente o pop A. Então, vamos torná-lo mais escuro. Então, basta clicar na conexão nesta propriedade, em segundo plano, vou fazer com que seja como 50 aqui. Agora está muito melhor. E se mudarmos para sete? Ok, agora está muito melhor. Agora, o que precisamos fazer é adicionar ação a esses dois botões. Quando alguém clica nesse botão de visualização do cartão, essa pessoa deve redirecionar para o cartão Basta clicar no botão e clicar nesse nó de conexão e colocá-lo assim. Ele será redirecionado para o cartão quando alguém tocar em Exibir. Além disso, se alguém clicar em Continuar comprando, essa pessoa será redirecionada para essa pesquisa. Pagamento de alimentação. Ok, e agora vamos verificar o design. Agora eu clico em Exibir cartão. Eu apenas direciono para o novo cartão. Vamos verificar isso desde o início. Eu clico na comida, agora estou na página de comida. Agora eu clico na garrafa do cartão. E aqui temos um pop-up. Aqui eu posso clicar em Exibir cartão, clicar em Continuar comprando. Se eu clicar em Continuar comprando, basta enviar para a pesquisa pagar. OK. Agora, no meu carro, temos o botão Fazer pedido. Quando alguém clicar neste botão Fazer pedido, ele abrirá este pop-up de sucesso do pedido ao toque. A ação será aberta, ao toque. A ação será aberta aqui podemos configurar manualmente o pop-up conforme quisermos. Basta clicar no manual e agora posso definir como quiser, vamos configurá-lo assim e clicar em Adicionar plano de fundo. Vamos adicionar a cor de fundo 70 e vamos verificá-la em Ação. Clique aqui, clique no cartão, clique em Exibir cartão em Exibir cartão. Clique em Fazer, Pedir e aparecerá uma janela com a seguinte aparência. Mas vou configurar o pop-up como centro porque ele é colocado automaticamente no centro do design. Ok, agora temos o fluxo. Agora vamos ver o que temos que fazer. Então, aqui, se clicarmos nessa garrafa fechada, esse pop-up deve estar fechado. Para fazer isso, eu clico neste botão de fechar. E quando eu o arrasto, posso ver esse tipo de ícone no segundo ícone. Se alguém clicar nesse ícone de fechamento, a página será redirecionada para a última página nessa sobreposição de fechamento se alguém pressionar esse ícone de fechamento, o pop-up será Então, vamos tentar. Está perto, tudo bem. Agora não temos ação nesse botão Voltar, então vamos adicionar ação a esse botão. Já temos uma variante do nosso componente, então vamos apontá-la para esse botão Voltar. E quando alguém clica nesse botão Voltar, essa pessoa deveria. Volte para a página de onde ele ou ela vem. Então, vamos arrastar a conexão dessa forma e configurá-la para trás. E agora vamos verificá-lo em ação. Agora, se eu clicar no botão Voltar, ele simplesmente vai para trás. Vamos clicar nesse. Se eu clicar em Voltar, ele vai para trás. Então, temos outros itens. Nesse caso, se alguém clicar nessa tonelada de cartão, essa pessoa deverá redirecionar para a página do carrinho que acabou de apontar para a página do carrinho Se não criarmos um componente para essa seção de cabeçalho ou menu, teremos que adicionar manualmente esse tipo de conexão três vezes para obter a funcionalidade. Mas com a variante e o componente, só precisamos fazer isso de uma vez. E isso se aplicará a todas as instâncias que criamos com o componente mestre. Ok, agora vamos verificar isso em uma ação como essa. Eu posso simplesmente ir até as páginas. Atualmente, não temos pedido e página de revisão e essa será sua tarefa. Portanto, por enquanto, não adicionaremos nenhuma funcionalidade a esses itens. Mas se alguém clicar nessa página inicial, essa pessoa deverá ser redirecionada para a página inicial Para criar essa funcionalidade, precisamos colocar esse componente principal dentro da folha de adesivos Então, vamos fazer isso. Para fazer isso, pressiono o comando X para cortá-lo. E vamos aqui e colá-lo assim. Ok, agora o que vou fazer é ir para casa com ácidos. Em ácido, temos o rodapé, então vamos colocá-lo assim E agora temos que colocá-la posição absoluta da facção corretamente, depois ir até o protótipo e defini-la como fixa Ok, agora temos um problema. Temos que fazer o mesmo para cada instância porque mudamos a poção desse design Basta destacar todos eles e ir para a posição absoluta. E vamos tentar colocá-lo de volta assim. Então, temos que ajustar manualmente a posição como esta. Então, agora deve estar funcionando bem. Ok, agora acho que tudo vai funcionar bem. Então, agora vamos adicionar ação a isso. Oh Michael, é muito simples. Basta clicar nele, acessar os protótipos e criar a conexão assim E agora vai muito bem ver. Ok, agora estamos chegando mais perto do final desta seção. Então, vamos ver que mais paradas temos que fazer. Na próxima lição, vamos rolar horizontalmente, esta seção de revisão, já a criamos Então, faremos isso de novo. Além disso, mostrarei como alterar os elementos ou como alterar o componente quando clicamos em um botão como esse. Por exemplo, se clicarmos nesse botão de pesquisa, o texto aparecerá aqui. Na próxima lição, mostrarei como fazer isso. 53. Adicionando rolagem horizontal à seção de revisão: Ok, vamos adicionar rolagem horizontal para esta seção de revisão Então eu vou para o meu design, e aqui vamos para a seção de um único pé e clicamos na moldura. Eu vou para a guia de design e aqui eu seleciono esse quadro. Para fazer isso, eu tenho que ir para camadas sobre camadas. Aqui está o layout automático e aqui está a seção que precisamos adicionar, rolagem horizontal. Aqui, não adicionamos conteúdo de clipe, então vamos para a próxima seção. Nessa seção, também não adicionamos conteúdo de cliques. E o próximo? Não é a seção e esta é a seção que adicionamos. Clique no conteúdo I antique, e aqui está a resenha Então eu vou até o quadro, pressiono o comando e ajusto o quadro assim. Então eu vou para Prototype. No protótipo, vou me conectar em mais de quatro horizontais. E vamos ao Design. Agora funciona assim, é muito simples. E aqui eu só clico nesse quadro e vou para Design. Clique em Conteúdo. OK. 54. Tornando a caixa de pesquisa interativa: Agora, o que eu quero fazer é clicar nessa barra de pesquisa ou tocar nessa barra de pesquisa, um texto chamado Burger deve aparecer aqui E então, se eu clicar nessa caixa de pesquisa, ela deverá ser redirecionada para a página de pesquisa Na página de pesquisa, o texto deve ser hambúrguer e o resultado da pesquisa por hambúrguer deve aparecer Então, vamos tentar fazer isso. Para fazer isso, vou aqui porque esse é o componente principal da nossa barra de pesquisa e vou colocá-lo aqui. Em seguida, aumentarei esse invólucro e clicarei no componente Em seguida, clique em uma variante, ok? Aqui, vou alterar o nome da variante para adicionar texto. Está bem? E vou colocar esse campo de texto da página de pesquisa de alimentos aqui. Então traga esse aqui. E agora vou apertar chá e criar um texto chamado Burger Em seguida, vou colocá-lo dentro dessa variante e clicar nela. Vamos fazer com que seja uma posição absoluta. E posicione-o aqui. Está bem? Agora, o que eu quero fazer é clicar nessa barra de pesquisa; nesse caso, quando clico nessa barra de pesquisa ou toco na barra de pesquisa, isso deve aparecer para que eu clique no componente padrão e vá para Propriedade. Então, aqui, eu apenas crio uma conexão com este. Na conexão, a ação está ao toque e a reação ou a alteração deve ser alterada para alteração será um texto. E deve ser um exemplo, o que significa que quando você diz tocar na barra de pesquisa, o texto do hambúrguer deve aparecer Então, basicamente, mudou para essa barra de pesquisa. Então, vamos ver se funciona. Ou não vou para casa em casa, basta tocar na barra de pesquisa e aparece hambúrguer E agora o que eu quero fazer é que, ao tocar nesse ícone de pesquisa, ele deve estar pré-direto para o alimento de pesquisa. Então, se eu simplesmente criar uma conexão como essa, a ação não funcionará corretamente. Então, vamos para a página inicial. Na página inicial, vamos mostrar a barra lateral. E aqui, se eu clicar aqui, basta ir até a pesquisa. Mas se eu clicar aqui e clicar nesse ícone de pesquisa, nada acontecerá. Porque conectamos essa barra de pesquisa padrão à página de rodapé de pesquisa. Para corrigir isso, também podemos conectá-lo ao pé de busca. OK. Essa é uma parte muito simples que criamos. Então, agora também criamos essa parte, e parece que está tudo funcionando bem. Então, agora vamos adicionar ação a esse botão de lixo. 55. Usando variáveis para remover itens de carrinho: Nesta lição, vamos adicionar ação ou interação a esse botão de lixeira O que significa que quando o usuário clicar nesse botão de lixo, o alimento será removido do cartão Para fazer isso, podemos usar variáveis locais, então basta clicar na tela e, ao clicar nela, você verá um texto chamado variáveis locais aqui, clique neste ícone. E no Figma, temos esse novo recurso variável e, atualmente, ele está em um modo Então, vamos usar esse recurso variável e adicionar ação a essa caixa de lixo Antes de tudo, clicarei aqui e clicarei em Criar coleção. Aqui, definirei o nome da coleção como itens do carrinho. E então aqui vou clicar em Criar variável. E temos quatro tipos de variáveis. Nesses quatro tipos, selecionamos o tipo booleano aqui Vou renomear esse texto para C. Vamos adicionar o nome completo para que fique mais fácil de entender Vamos adicioná-lo assim. Diminuímos o tamanho dessa variável , abrimos e criamos a próxima. Vou criar mais dois como esse. Está bem? Em seguida, nesses nomes, definirei o valor como verdadeiro. Ok, agora criamos variáveis. Se clicarmos na tela e verificarmos as variáveis condocais, poderemos ver uma Agora, o que vamos fazer é definir essas variáveis para os itens do cartão. Aqui temos o primeiro, basta clicar nele. E nesta seção da camada, se clicarmos nela e fecharmos, a seção será fechada. Essa função deve acontecer quando clicamos nesse ícone de lixeira Para fazer isso, vou clicar com o botão direito do mouse nesse ícone. Quando eu clicar com o botão direito do mouse, eu vou ver as quatro variáveis que eu criei. Basta atribuir essas quatro variáveis. Isso é para o primeiro. Em seguida, clico no segundo item e clico com o botão direito, então é Blueberry Fpin E vamos fazer o resto do item assim. Ok, agora o que eu vou fazer é ir para o Prototype Em seguida, pressiono o comando e seleciono esse ícone de lixeira. Então eu posso ver isso, não então eu acabei de selecionar esta lixeira Agora eu clico nesse ícone de adição na interação. Aqui, selecionarei a ação ao tocar e alterarei essa opção para definir a variável. Para usar esse recurso, devemos selecionar uma resolução de equipe, clicar em Escolher equipe atualmente, definirei Tick para o projeto de equipe e clicar em Mais. Então, não podemos fazer isso no modo gráfico, então é por isso que temos que enviá-lo para a equipe. Então, vamos embora, ok. Agora eu clico em Nenhum e clico em Definir variável. Aqui vou definir a variável como a primeira e o valor será falso. E vamos fazer isso com o resto do botão. Clique na lixeira e clique em Interações. E a ação está disponível. Altere essa variável não para definir e é morfina azul. Clique nele, defina o valor booleano como falso. vamos para a próxima. Vamos para a próxima e clique na linha do caminho. Esse é o último. Ok, agora deve funcionar. Então, vamos ver se funcionou ou não. Agora estou no meu cartão. Vamos para a casa. Vamos até o cartão. E neste cartão, eu apenas clico neste botão de falha e ele simplesmente desapareceu. Então, vamos clicar neste . Ela desapareceu. E quanto a essa? Assim, podemos adicionar funcionalidade ao botão de remoção do cartão. Então, vamos para a página inicial novamente. Então, vamos até Opções e mostraremos a barra lateral, e vamos tentar novamente. Clique assim e ele simplesmente será removido. Portanto, esse também é um recurso avançado. Podemos remover esse conteúdo quando podemos alterá-lo ao clicar no botão da lixeira Em aulas futuras, mostrarei como fazer isso. Enquanto isso, tente jogar com o Fikma e aprender novos recursos Portanto, o Fema é uma ferramenta realmente poderosa e, no futuro, ajudará você a se tornar um designer de UF de sucesso 56. PROJETO DO CURSO : Olá a todos. Este é o final, e obrigado por ficar comigo. Então você tem uma tarefa. Deixe-me explicar isso até agora. Criamos marcações de alta fidelidade e convertemos essas marcações de alta fidelidade em um protótipo Portanto, sua tarefa é criar três páginas. Essas páginas são minha página de pedido e página de rastreamento de pedidos. Então, finalmente, você precisa criar um menu para este aplicativo. Depois de criar esses três designs de interface do usuário, você precisa convertê-los em um protótipo. neste projeto, quando você cria a página Rastrear pedido, ao clicar nesse botão Rastrear pedido, sua página Rastrear pedido deve aparecer. Quando você clica neste menu de hambúrguer seu menu deve aparecer Espero que você goste desta aula e obtenha detalhes valiosos que ajudem sua operadora nos EUA. Novamente, obrigado por conferir esta aula e nos vemos em outra aula.