Aprenda Figma: crie o design de um UI/UX móvel completo

1. Introdução: bem-vindo ao completo mobile você aux curso com Sigma e este curso vamos aprender como podemos usar a ferramenta de design baseada em nuvem gratuita chamada Sigma para projetar belas simulações móveis para seus clientes ou até mesmo seus próprios projetos. Vamos projetar uma simulação completa de sete páginas para o nome de um cliente, Clean Kangaroo, Clean Kangaroo, que é essencialmente um serviço de entrega de lavanderia. Meu nome é Nina, e sou sua instrutora para este curso. Nos últimos 10 anos, projetei e desenvolvi dezenas de aplicativos para dispositivos móveis e web. E neste curso eu quero mostrar-lhe exatamente como projetar uma simulação móvel completa do zero . Como curso é ótimo para qualquer um. Mesmo que você seja um designer iniciante, você pode entrar e aprender a projetar belas marcações móveis. Aqui estão algumas coisas que vamos aprender neste curso. Primeiro, vamos aprender como adicionar imagens e ícones aos nossos projetos. Então vamos aprender quais são os componentes, que nos ajuda a criar designs reutilizáveis em nosso trabalho. Vamos aprender restrições que nos ajudarão a manter nossos projetos responsivos para todos os tamanhos de dispositivos móveis . Vamos até usar as crianças de design da Apple para montar algumas partes do nosso projeto. E o mais importante, vamos trabalhar com muitos textos e aprender como aplicar novos estilos de fonte e novos estilos de cores para o seu projeto também. E vamos até usar plugins para gerar coisas como mapas ou até mesmo obter dados das planilhas do Google diretamente no seu projeto de design. Nós vamos até aprender como aplicar grandes nós em todo o seu design para que seus usuários ou seus clientes usuários fiquem super felizes usando o aplicativo que você projetou. Então, se você está pronto para montar uma bela simulação móvel para seus clientes ou para seus próprios projetos que começam e eu vou vê-lo neste curso. 2. Requisitos de Mockup: Certo, então para começar esse curso, vamos pular direto para projetar nosso primeiro celular. Você eu agora isso é realmente emocionante, e eu quero mencionar que você realmente não precisa ter muita informação sobre fig mus . Se este é o seu primeiro projeto, você ainda deve ser capaz de cair junto. Mas caso contrário, se você quiser aprender algumas das coisas introdutórias para a Fig. MMA, eu recomendo que você confira meu outro curso. Os outros cursos chamaram uma introdução à Fig. MMA. Nesse curso, eu revisto muitos dos conceitos básicos, como molduras criando formas e explorando algumas das ferramentas e painéis que temos acesso no figo MMA. Mas se você quiser pular direto e aprender enquanto vamos, você também pode fazer isso. A primeira coisa primeiro é que eu recomendei você ir para a fig. MMA dot com e criar uma conta lá. A primeira coisa primeiro é que eu recomendei você ir para a fig. MMA dot com e criar uma Se você ainda não fez isso, uma vez que você está configurado e você está em figo MMA, então você está pronto para entrar neste curso. Então, para o nosso primeiro projeto aqui, vamos estar trabalhando em um celular. Você eu para esta empresa chamada Canguru Limpo. Vamos imaginar que temos um cliente que nos deu este projeto. Um, tipicamente, um cliente vai aparecer com algo semelhante onde eles vão te dar o nome deles. O que eles fazem, hum, é sempre o que eles são necessários para a simulação. Então vamos realmente tratar isso como uma simulação que vamos projetar para um cliente. Hum, que acontece de ser uma empresa chamada Clean Kangaroo Supercool. Agora, antes de eu entrar aqui, eu quero mencionar que você tem acesso a esses requisitos em um pdf. Ah, e o recurso é ir em frente e baixá-los do recurso é desta lição. Você também encontrará o link do estigma para chegar a este arquivo. Eu acho que você não vai realmente ir em frente e copiado daqui para o seu esfregão de figo, então sinta-se livre para baixar isso agora mesmo. Hum, e então vamos em frente e começar com os requisitos. Então vamos ver o que esta empresa faz aqui. Canguru limpo é um serviço de entrega de lavanderia sob demanda. Canguru limpo permite que os usuários se inscrevam e solicitem que sua lavanderia seja retirada em outro local. Essencialmente, é um serviço de entrega de lavanderia que super legal. Vamos ver o que eles têm em termos de ativos de marca. Então parece que eles querem que nós criemos um esquema de cores. Eles não têm um agora para o projeto deles. E então eles querem que nós também encontremos um dinheiro atribuído para o projeto, que é legal porque nós vamos rever cor e tipografia neste curso. então Eentãovejo que a única coisa que eles nos forneceram foi o logotipo, que novamente você pode verificar. O recurso é encontrá-lo. Agora vamos ver o que sua simulação exige em termos de páginas. Então, a primeira página é um registro barra de log na página com um botão para um tutorial. Opções de inscrição será e-mail e senha e, em seguida, atribuir com a opção Google também. Muito legal. Bastante típico para um log in página editorial para explicar como ele funciona em três etapas. Legal. Também precisamos de uma página para adicionar um cartão de pagamento, página de mapa bastante simples para permitir que os usuários definam seu endereço de retirada e entrega. Ok, isso é muito legal. Parece que há um ano de erro de digitação, então eu vou em frente e corrigir isso aqui mesmo. Muito rápido. Refresque-se para os usuários chamarem para a coleta de lavanderia de um serviço de lavanderia local de sua escolha e mostrar-lhes os preços. Está bem, parece muito fixe. Acho que esta vai ser a nossa página principal, pelo que vejo. E então temos uma página de perfil para ver todas as opções de perfil do usuário, bem como logouts . Hum, muito legal. Bem direto ali. E por último, uma página para mostrar aos usuários de sua barra atual ativa e também seus serviços de lavanderia passados e quanto eles foram cobrados faz sentido caso os usuários queiram voltar e ver quanto seu serviço custa e tudo isso. Então, sem mais delongas, vamos pular direto para configurar nossos quadros de arame e, em seguida, iniciar nosso arquivo de figment para fazer a simulação para este cliente 3. O frame: Tudo bem. Então? E a última lição que revisamos os requisitos do aplicativo para a simulação que estamos trabalhando aqui . Canguru limpo. Na verdade, eu desenhei. Ah, o que eu acho que eu quero incluir na armação de arame. Ah, e você vai descobrir que no recurso é para este projeto também. Eso da última lição se você baixou o recurso é, hum vá em frente e abra para limpar o esboço de marcação canguru. Pdf Se não, vá em frente e faça o download. O recurso é e, em seguida, vá em frente e abra este arquivo. Assim que abrir, encontrará esse pequeno desenho que eu fiz. Usou caneta e papel para criar uma armação de arame. E isso é o que chamamos de arame. E você I ou design de interface de usuário. Essencialmente, é apenas como um projeto para a nossa simulação antes de realmente saltar e projetá-lo e passar muito tempo projetando sem saber exatamente como o projeto para a obrigação vai se parecer. Então, essencialmente, é por isso que fazemos uma armação de arame, geralmente antes de entrarmos e começarmos nossa simulação. Agora, se você já tinha algumas idéias para este projeto e você começou a esboçá-las. Sinta-se livre para acompanhar e talvez fazer alguns ajustes ao longo do caminho com base no seu próprio design . Se não, vamos usar. Ah, esta armação de arame aqui está bem. Vamos nos referir muito ao esboço ao longo da concepção desta marcação. Então definitivamente tem o arquivo à mão. A incha, seus requisitos de APP, que novamente estão no recurso é pasta. Tão rápido. Vamos ver as páginas aqui que eu montei. Ah, agora você vai ver o número deles. De acordo com o quê? O cliente aqui nos deu de um a sete e todas as páginas estão cobertas aqui. Temos uma página de registro de inscrição, hum, e muito simples. Com todos os requisitos que eles se inscreveram com e-mail enviado com o Google. Hum, e então nós temos um pequeno tutorial pop-up. Eu estou pensando em apenas colocar este tutorial bem em cima da página de login e, em seguida, apenas fazendo um pequeno pop-up. Com um fundo desfocado, vamos fazer um cartão de pagamento para que eles possam ter o cartão de crédito. Com um fundo desfocado, E, em seguida, se você for para a próxima página aqui. Agora, eu criei uma página aqui para o usuário definir seu endereço em encontrar seu endereço para definir seu serviço de joias de lavanderia. Esta é a nossa página principal de pedido de barra. Hum, agora, a partir daqui, haverá mapa onde eles colocaram seu endereço de entrega que eles podem sempre tocar isso para ir para esta página e depois atualizar lá, talvez novo endereço se em algum momento eles mudaram seu endereço, então aqui embaixo, temos um toque de solicitação de lavanderia que essencialmente está sempre aberto. Ele mostrará as lojas nas proximidades. Estou pensando em fazer algum tipo de, talvez, talvez, rolar ou deslizar para a esquerda e para a direita para ir para diferentes, hum, para ver cartões diferentes para lojas diferentes. Você pode ver o que eu acho que devemos incluir aqui. Para baixo como uma espécie de desenho mais detalhado do que eu acho que deve ser incluído no cartão da loja aqui em baixo. Para baixo como uma espécie de desenho mais detalhado do que eu acho que deve ser incluído Então vamos ter uma imagem da loja, talvez, um, nome da loja, nome da loja, dólar por item, qual é o tempo de entrega deles. Então, quanto tempo eles acham que vai levar para fazer o serviço de lavanderia e então eles estão avaliando. Então, para a estrutura de navegação aqui. É assim que os usuários se estendem entre o principal, as três páginas principais aqui, que é a página principal, a página de perfil e, em seguida, o passado ou os serviços barra Solicitações Passadas Página aqui. Eu decidi ir com uma barra de navegação de toque. Então, isso é essencialmente onde você vê que você tem uma guia na parte inferior e, em seguida, você pode ir para várias páginas em dependendo de qual selecionado ele vai. Ele irá levá-lo para a página correta. Se você usar o aplicativo instagram, por exemplo, eles usam uma guia, nosso sistema, nosso sistema, onde você tem opções na parte inferior aqui e, em seguida, você alternar entre páginas diferentes. Isso é bastante comum em muitos aplicativos móveis. E como nós só temos realmente três páginas principais aqui, nós vamos continuar a usar uma guia. São e, em seguida, aqui em baixo, ele vai apenas dizer-lhe número um ou a opção superior sobre um vai levá-lo. Os serviços eram só página sete aqui. Ah, é aqui que eles veem seus serviços de lavanderia passados. Um, e novamente amore versão detalhada do que eu acho que deve ir neste tipo de lista. , Ver aqui seria o nome da loja,a data e hora em que colocaram o pedido de serviço de lavanderia . E então talvez dependendo do status deste pedido, podemos mostrá-lo aqui. Então, se já foi entregue, podemos dizer para entregá-lo. Se está sendo lavado ou seco, podemos mostrar que aqui uma ondulação na página dois será a página principal aqui. A página de lavanderia e, em seguida, a terceira página irá para uma página de perfil. A partir daqui, pensamos que podemos atualizar endereçado. Podemos permitir que eles editem seu nome. E-mail. Eles podem ir para o método de pagamento. A partir daqui, há um pouco de apoio, mas no caso de você querer entrar em contato com a equipe de canguru limpa, digamos que em um botão de logout, que é bastante típico em um perfil de página de conta de barra. Então, se isso é um pouco demais agora, não se preocupe com tudo. Uma vez que começamos a projetar, vamos dar passo a passo, página por página e realmente quebrar tudo e, em seguida, ir em frente e criar nossa marcação. O objetivo deste arame é ter uma idéia de tudo o que precisamos incluir. Para não esquecermos acidentalmente algo ou deixarmos algo de fora. Certo? Então, na próxima lição, vamos seguir em frente e realmente configurar toda Page é Ah, e então prepare-se para começar a projetar nossa simulação. 4. Configurando nossos quadros: Certo, acho que estamos prontos para montar nosso novo projeto. Ah, então vamos para Fig Mahir. Se você estiver no aplicativo para desktop, é super fácil criar um novo arquivo. Suba aqui e aperte o sinal de mais aqui. Vou abrir uma nova falta. Vamos mudar o nome para CANGURO CANGURO CANGURO. Já que esse é o projeto que estamos trabalhando aqui e agora temos uma nova câmera. Está bem na nossa frente. Ah, o que eu vou fazer é ir em frente e mudar a cor de fundo e torná-la um pouco mais escura só para ajudar a criar algum contraste entre nossos quadros. Aqui, Vamos em frente e agora configurar todos os quadros serão necessários para o nosso projeto. Então, se eu voltar ao meu esboço que eu tinha aqui, você verá que temos sete páginas que precisamos. Então vamos em frente e configurar essas páginas com os nomes apropriados, hum, e então saltar para a página de design ou login. Então, novamente você criar novos quadros brilhantes pressionando f em seu teclado. Então estamos você sabe, estamos projetando para uma simulação móvel. Ah, quando formos em frente e escolhemos o iPhone 11 pro. Isso tende a caber em muitos dos novos tamanhos de iPhone também. Só vou deixar o meu fundo um pouco mais leve. Acho que isso é bom. Então vamos em frente e criar sete dessas páginas. Assim, a maneira mais fácil de criar vários quadros a partir de um que eles já configuraram é apenas um duplicado pressionando o comando e r. Control de if seu próprio Windows. Sei que temos um total de sete páginas, então precisarei fazer isso mais seis vezes. Então vamos criar 12, três, 456 e agora temos um mercado com sete páginas. Vamos em frente e usar a opção de zoom aqui e fazer zoom para caber. O que isso vai fazer é ir em frente e apenas diminuir o zoom até que possamos ver todos os nossos quadros. Você também pode pressionar Shift 1 para alternar essa opção de zoom de qualquer lugar que você esteja. Então, se eu pressionar Shift 1 você pode ver que ele vai zoom para caber bem ali para muito útil. Vamos em frente e renomear todos os quadros e, em seguida, saltar para iniciar nossa primeira página de login , modo a renomear quadros ou camadas. Você pode clicar duas vezes aqui para que possamos fazer login. Eu posso ver que mudou aqui, ou podemos apenas ir aqui em nosso painel de camadas e vamos fazer tutorial. Este será o pagamento. Este será o mapa. Este vai ser o nosso principal poço, na verdade é um pedido de luva. Então temos ou perfil por último, não folhas. Temos a nossa página de serviços. Vamos verificar se não perdemos nada aqui. Então, faça o login. Pagamentos de tutorial, solicitações de mapa, perfil e serviços cortam solicitações anteriores. Acho que temos tudo aqui. Então, uh, agora vamos em frente e apenas focar em nossa página de login. Outra maneira legal de ampliar é apenas manter a tecla Zet no teclado e, em seguida, ir em frente e apenas arrastar sobre a área. Você quer ampliar isso? Vamos ampliar assim, então voltando para nossa página de login, precisaremos de um monte de retângulos, , especificamente um para o e-mail. Quero para o passado Ward um para o login e dois para os botões de inscrição aqui. Então isso é um total de cinco retângulos. Vamos em frente e criá-los e tentar distribuí-los de acordo para que você possa criar um retângulos pressionando nosso como aprendemos nas seções anteriores. Vamos em frente e apenas arraste um aqui. Acho que altura de 55 seria bom, e então vá em frente e solte. Acho que altura de 55 seria bom, e então vá em frente e solte. altura de 55 seria bom, Estou usando tudo até aqui só para ver onde, como está posicionado aqui. Vamos apenas ir em frente. Abaixou o tamanho aqui, também. Torná-lo 325 apenas para que ele fique uniformemente espaçado entre a esquerda e a direita. Vou usar turnos para trazer minha régua de volta. E então eu vou adicionar alguns guias à minha esquerda e direita só para tornar as coisas mais fáceis daqui para frente. Então eu vou usar o comando D quatro vezes para duplicar este retângulo. Uma maneira legal de duplicar as coisas é novamente segurar altar e depois arrastar para longe este retângulo. Vamos usar as teclas de seta para derrubá-lo. Três pixels aqui. Ah, e então, se você pressionar o comando D, ele vai realmente ir em frente e replicar o mesmo tipo de duplicata e mover que eu fiz. Vamos fazer isso mais três vezes. 123 e Agora temos cinco campos ou botões aqui que podemos usar. Vamos mover estes para baixo, também. Curva até o fundo. Vamos mover este um pouco para baixo. Vamos em frente e adicionar um pouco de estilo a este campo aqui. Vamos fazer o preenchimento branco e, em seguida, adicionar um golpe de vai torná-lo um pouco. Acho que aqui é bom. Se você quiser obter exatamente a mesma cor de traçado, vá em frente e insira essa vá em frente e insira essachave hexadecimal no seu seletor de cores para o traçado. Vamos em frente e apenas torná-lo 1,5 pixels apenas para que possamos vê-lo mais facilmente. Selecione-os novamente. Vamos em frente e arredondar os cantos para oito pixels usando aqui. Na verdade, os guisados. Seis. Parece bom. Vamos aplicar a mesma ferramenta de raio de canto destes novamente. Você pode segurar vários objetos usando shift deve ir em frente e adicionar algum texto usando o tiki. Recebi uma mensagem aqui, um tipo, um e-mail. Basta centralizar isso aqui, e então vamos esticar todo o caminho. Isso é bom o suficiente. Eu só vou duplicar segurando velho Vamos fazer senha para não se preocupar muito com as fontes e as cores porque nós vamos voltar a isso no futuro. Lições. Neste momento, só estamos a tentar preparar o básico. Vamos ir em frente e fazer caber este texto aqui para baixo para o nosso botão, e você pode centralizar o texto usando esta opção aqui, onde ele diz centro de linha de texto. Vamos fazer o login. Vamos fazer isso mais duas vezes para ou inscrever-se com e-mail. A Andi. Por último, inscreva-se no Google. Se eu voltar ao meu design, nós temos uma pequena linha aqui para apenas distinguir entre o login e, em seguida, as seções de inscrição . Vamos voltar e fazer, podemos fazer uma linha do Presidente Oh, e apenas desenhar uma direita do lado esquerdo do meu cara para a direita. As coisas bonitas sobre os guias é que quando você está chegando perto deles, eles se encaixam no lugar certo. Apenas certifique-se de que você tem o tamanho certo para o seu objeto. Uma coisa também é notar que quando você está desenhando sua linha apenas para ter certeza de que você não está indo em ângulos estranhos aqui, mantenha a mudança e vai ajudá-lo a manter as coisas na posição ângulo reto e deixar ir aqui . E temos a nossa linha aqui. Só vou deixar o dele um pouco mais leve. Vamos fazer o mesmo. C nove c nove c nove c nove. Só estou a escrever isto aqui e acho que parece bom. Vamos fazer 1,5 e grandeza. Então, eu vejo aqui que na verdade são duas linhas, uma à esquerda, uma à direita s. Então, por que não vamos em frente e duplicar isso aqui e então eu vou apenas arrastar uma enquanto segura o turno novamente para o meio e o outro para o meio é bem, então não essencialmente têm duas linhas. Então, por que não vamos em frente e usar o painel de propriedades aqui, hum, para obter o tamanho exato é que estamos indo para aqui, então por que não reduzimos isso para 1445 ? Acho que é muito pouco. Vamos fazer 1 35 e depois por esta. Vamos em frente e também fazer 1 35 e então eu vou usar Shift e então as teclas de seta apenas para mover as coisas rapidamente. As teclas Shift, uma seta ajudam você a mover tons para objetos em 10 pixels de cada vez. Caso contrário, se você apenas usar as teclas de seta, ele fará um pixel de cada vez. Então sinta-se livre para usar as teclas de mudança e seta. Mas precisamos mover as coisas rapidamente ou usar as teclas de seta para mover as coisas para baixo. Pixel por pixel. Vamos em frente e alinhá-los aqui. Lá vamos nós. Vamos adicionar outro texto apenas duplicando este e aqui, tornando-o um pouco menor tipo ou vá em frente e apenas tente isso no meio. Legal. Então agora estamos começando o básico. Se voltares ao nosso sketch, ainda estamos desaparecidos. O logotipo ainda faltava termos. Nós não temos uma imagem de fundo ou o ícone do tutorial aqui, então vamos voltar na próxima lição, realmente completar ou fazer login na página aqui 5. Imagens e sobreposições: Tudo bem, então se você tem acompanhado até agora, começamos a projetar nossa página de login aqui. A propósito, se você não seguiu nas últimas lições, , algo que você pode fazer nesta lição ou em futuras lições, você pode ir para os copos do shopping aqui, e o recurso está arquivado fora deste projeto de design que estamos trabalhando e, em seguida, você verá acordo com a lição, o mais recente arquivado a última queda Fichman que trabalhamos naquela lição. Então vá em frente e comece com isso. Se você ainda não tiver de outra forma, basta voltar para sua fama, um arquivo e continuar junto e esta lição, vamos explorar como podemos adicionar imagens na Realmente vá em frente e adicionou imagem de fundo como bolas ou logotipo da limpeza aplicativo canguru aqui também. Então, em geral, sempre que você está projetando um projeto e você está procurando fotos para usar, eu recomendo unspool ash aqui, como eles dizem, a fonte de Internet de imagens livremente utilizáveis como todos as imagens que você procura são livres para usar, Hum, eu uso esta pessoa pode projetos, e eu recomendo que você vá conferir e ver se há uma imagem lá que você quer usar para seus projetos futuros. Então eu usei no Splashed para realmente baixar uma imagem. Então, para encontrar essa imagem ir para o recurso é pasta deste projeto que estamos trabalhando e novamente, você pode encontrar isso no início desta seção. Então vá em frente e abra imagens, encontre a página de login, e então você notará que há uma imagem de fundo aqui. Nós. Vamos em frente e mudar para a Fig. MMA. Bem, tendo sua pasta aqui Então este plano de fundo J. Peg Jigme permite importar J peg PNG S V G e até pdf E a maneira mais fácil de fazer isso, é apenas ir em frente e arrastar sua imagem diretamente para o arquivo de seus dedos. Esta imagem é enorme. Então, leve algum tempo para carregar. Você vai notar que está indo completamente para fora do quadro. Então o que eu vou fazer é realmente segurar Shift e Ault, e então ir em frente e redimensioná-lo. Por agora. Você provavelmente sabe o que o turno faz. Ele manterá a proporção para que a imagem não fique distorcida. Mas o que tudo faz realmente nos ajuda a manter a posição ou a sentinela nous desta imagem para que quando eu redimensionar, ele não estava indo para o canto lá. Caso contrário, se eu largar o velho em apenas segurar o turno, você pode ver que está fora do meu quadro. Então é por isso que estamos usando turnos e coisas velhas. Isso é bom aqui. Vamos em frente e apenas trazê-lo para baixo e vamos realmente assumir um pouco mais, eu acho que isso é bom por enquanto. Uma coisa a mencionar é que você pode cortar imagens porque, como você pode ver, a imagem é enorme e está cobrindo mais espaço, e precisa. Então vamos escolher a ferramenta de corte daqui de cima. E uma vez que estamos na ferramenta de colheita, podemos ir em frente e mover esses cantos azuis aqui, e isso nos ajudará a obter o tamanho que precisamos. Parece bom encaixe perfeitamente. Hum, você também pode acessar ferramentas de imagem Mawr Aqui está bem, você pode adicionar tudo isso quando você vai aqui à direita e clicar nesta ferramenta de imagem, e a partir daí você pode ajustar o seu corte. Se cometeu um erro, e quer mudá-lo agora, ou pode fazer coisas como melhorar o contraste. Hum, você sabe, temperatura de saturação é apenas um tipo de ferramentas simples de edição de imagem que você vai ter em um monte de aplicativos de design. Ele também pode girar a imagem a partir daqui também. Uma coisa a mencionar aqui é que neste momento temos colheitas como essa porque foi assim que cortamos nossa imagem. Mas se nós preenchermos, então o que Phil vai fazer é tentar ir em frente e colocar essa imagem dentro caixa delimitadora que temos agora. Se nos encaixarmos, tentará fazer a mesma coisa proporcionalmente. Eso porque esta imagem orginalmente é, hum, neste proporcional vai tentar manter isso dentro para caber tipo aqui. Hum, você poderia fazer azulejos se você quiser fazer vários. Então isso é realmente grande. Mas se eu fizer isso, digamos que 2% ou 3% é realmente ter essa imagem se repetir. Isso pode funcionar para, talvez,um fundo de padrões. Isso pode funcionar para, talvez, Mas neste caso, acho que a colheita fará o trabalho. Então é só usar colheita e depois fechar isto aqui. Agora você vai notar minhas imagens de fundo cobrindo tudo o resto. Então, vamos selecionar a imagem de fundo aqui. Traga todo o caminho para baixo. Agora está bem debaixo de todas as minhas camadas aqui, que é o que eu quero. Eu também quero adicionar um excessivamente no topo desta imagem para que o primeiro plano aqui não se misture com o fundo que temos que adicionar uma sobreposição. Vá até onde diz, Phil, você vai ver. Agora é a imagem. Certifique-se de ter a imagem selecionada a propósito, em seguida, vá em frente e aperte o ícone de mais e Phil. E agora ele nos deu um Grady int. Então, se você quiser adicionar um Grady em sua imagem, você pode fazer isso. Mas eu quero apenas ir em frente e escolher sólido aqui, as sobreposições em cima da foto dela. Mas não podemos ver nada, então vamos trazer a corda uma cidade para que possamos ver partes da imagem. E vamos em frente e escolher uma cor mais escura. Nós ficamos negros e outra capacidade é muito alta aqui, então vamos fazer, hum, talvez 50%. Acho que isso é bom. Então, aí está. Adicionamos nossa imagem ao fundo aqui. Agora vamos em frente e não o nosso logotipo. Então, novamente, a partir do recurso é seção, você verá que temos uma pasta de logotipo aqui. Vamos ir em frente e arrastar a cor dele aqui e vamos apenas ir em frente e usar Shift Ault e redimensionar isso novamente. Acho que 80 por 80 deve ser bom. Só vou dar um zoom aqui um pouco e vamos ver. Use o centro de linha horizontal aqui, que é a segunda opção nas ferramentas de linha. Um duplo centraliza automaticamente a sua imagem dentro da sua moldura. Vou aumentar um pouco, talvez adicionar espaçamento de 70 no topo e, em seguida, usando T. Vou adicionar ah, texto para o meu logotipo. Vamos fazer um canguru limpo. Em seguida, certifique-se de selecionar tudo e, em seguida, apertou o tamanho do texto para 26. E eu acho que isso parece bom. Mude o preenchimento dois branco Aqui. Eu só ir em frente e centralizar isso, junto com o logotipo aqui, coisa que parece bom. Agora, você deve ter notado que tudo está meio flutuando por conta própria. Nada está realmente relacionado aqui, Hum, e que figura nos permite fazer nas camadas, apenas as coisas de grupo que são relevantes juntas, modo que se fizer alterações nelas ou se você quiser movê-las, por exemplo, digamos que eu queira mover esse campo de e-mail em vez de apenas mover a caixa e, em seguida, mover o texto. Eu posso simplesmente ir em frente e agrupá-los juntos e movê-los juntos ou aplicar estilos juntos em todos os tipos de coisas diferentes. Então, para fazer isso, selecione seu retângulo. Estamos a fazer turnos como a tua mensagem. Agora você pode ver que eu tenho ambos selecionados porque ambos têm este pequeno fundo colorido azul . Use o Command G ou o Windows Jeon controlado para agrupar as coisas. Vamos fazer o mesmo para a senha para o botão de login aqui. Vamos fazer o mesmo pelo separador que temos aqui no Senado com a escola de inscrição por e-mail . Acho que tudo está em grupo, exceto o meu local aqui. Então vamos fazer a mesma coisa aqui é Bem, vamos em frente e renomear tudo isso. Você pode renomear grupos clicando duas vezes no painel de camadas aqui, então vamos fazer o logotipo. Vamos em frente e apenas uma espécie de convenção seguido aqui para adicionar uma hierarquia que faz sentido. Então vamos em frente e primeiro colocar o nosso Grupo um e, em seguida, o nosso grupo para o qual é a senha Grupo três por seis. E então vamos renomear o resto e senha de e-mail login. Mas no divisor, Eu devo fazer inscrever-se botão de e-mail inscrito Google whoops, mas em ea lista. Basta ir em frente e nomear isso ou fundo. E, na verdade, vamos trancá-lo no lugar dele para não movê-lo acidentalmente. Legal. Acho que foi bom por enquanto. Agora sabemos como adicionar imagens. Vamos voltar e adicionar alguns ícones porque, como você pode ver nos meus esboços aqui, eu tenho alguns ícones para o tutorial para o e-mail e senha. E depois vamos adicionar o resto das coisas para a página de login e depois vamos em frente e terminamosna próxima lição. E depois vamos adicionar o resto das coisas para a página de login e depois vamos em frente e terminamos 6. Adição de ícones: Tudo bem, então nós adicionamos imagens em nossa página de login aqui. Então vamos em frente e adicionar os ícones. Baseado no que tenho no meu esboço aqui, vamos adicionar três ícones, um para a página editorial e outro para os campos de e-mail e senha aqui. Baseado no que tenho no meu esboço aqui, vamos adicionar três ícones, E então, por que não vamos em frente e apenas limpamos as coisas um pouco para ajudar a terminar nossa página de registro aqui? Então vamos voltar para a Fig. MMA. Agora eu quero mostrar a vocês um recurso realmente legal é para ícones que você pode obter. um Háumsite chamado “Flat Icon Dot com”. Eu uso isso para muitos dos meus projetos. Como você pode ver aqui, eles têm quase três milhões de ícones vetoriais que você pode usar em vários formatos. PNG SPG Photo shop em. Isso é ótimo porque eles são totalmente gratuitos para usar, embora eles peçam que você dê crédito ao artista agora, eles têm algumas opções de preços onde você pode se inscrever e não tem que creditá-los, e você tem acesso a muito mais ícones também. Legal. Então, usando o ícone plano, eu baixei alguns ícones para a página de login. Então, por que não vamos em frente e os encontramos? Nosso recurso é para este projeto ir para ícones, e então você verá a página de login aqui, então eles estão no formato SPG agora. Você pode definitivamente importar PNG e J escolher ícones em seu projeto é baixo, Hum, embora não seja recomendado porque você não tem muito controle sobre, por exemplo, o preenchimento ou ser capaz de até mesmo fazer ajustes nos ícones. O benefício de um tipo de ícone SVG é que você pode redimensioná-los sem ter que se preocupar com os ícones ficando pixelizados. Ao contrário de um ícone PNG, que é essencialmente rast surgiu um significado que ele tem um padrão dentro da altura. E se você tentar fazer uma Nikon maior que essa resolução, ela começará a ficar pixelizada. Então eu recomendo usar SPG, e é aí que vamos fazer para este projeto também. , Na última lição, arrastamos imagens para o nosso MMA de figo. Podemos fazer a mesma coisa aqui, mas só por causa disso, vou mostrar-lhe outro método que você pode inserir imagens também, que é muito legal. Ele funciona muito bem para ícones é baixo. Agora vamos voltar para Fig Mahir. Você também pode colocar imagens em seu figo meus arquivos indo até aqui para as ferramentas de forma e então você vê que há imagem lugar. Ou, alternativamente, você pode pressionar Shift comando K ou Shift Control K e Windows, e ele irá em frente e abrir um navegador de arquivos para você que você pode usar. Então aqui eu vejo como meus três ícones E daí? Vamos em frente e basta selecioná-los todos em uma abertura rápida. Agora, a ferramenta de imagem local oferece um monte de opções. Você pode ir em frente e colocar tudo e colocar todas as imagens aqui, hum, hum, na minha moldura. Ou eu posso alternadamente arrastar e colocá-los como eu ir muito social, Você como isso funciona. Então sinta-se livre para fazer isso apenas arrastando e novamente segure o deslocamento para restringir as proporções . E então uma coisa precisa que você pode fazer é realmente manter espaço para que, enquanto você está colocando seu ícone, você pode realmente movê-los ao redor. Então, por que não colocamos isso aqui e então vamos desenhar enquanto seguramos o turno de novo. Então este parece ser uma senha. Então vai acontecer aqui. Vamos redimensionar e mover isto depois é só para ter uma ideia de novo. Vou segurar o turno e fazer o e-mail. Um aqui é baixo. Eu só deixei ir. E aí está. Seus três ícones não foram adicionados, e então eu acho que estamos prontos para ir em frente e fazer algumas duas semanas para ambos os ícones, bem como outras coisas dentro da nossa página de arrastar. Então vamos trabalhar daqui de cima e descer logo. Vamos selecionar o nosso ícone de tutorial aqui e, em seguida, vá em frente. Aqui, você verá que não há Phil, mas sim cores de seleção. E isso é porque quando você tem um grupo que por padrão e S V. G. Ah, será um grupo de vetores aqui dentro de seu painel de camadas. É por isso que, em vez do preenchimento, ele aparecerá como cores de seleção. Ele vai fazer a mesma coisa, entanto, vá em frente e selecione isso e, em seguida, dar-lhe um preenchimento ou uma cor de seleção fora de branco. Vamos redimensionar isso para talvez 35 anos. Acho que isso parece bom. Vou em frente e adicionar um guia. Isso é, Ah, guia horizontal. Aqui você pode fazer, tipo 36. Basta ir em frente e por favor minha imagem no canto de sua Isso parece bom. Agora vamos descer. Vamos ampliar. Vamos em frente e clique duas vezes aqui. Você pode notar que quando você tem algo grupo, você terá que clicar duas vezes nele para começar a mudar elementos dentro de um grupo. Então aqui eu tenho todo o meu grupo. Mas se eu quiser mudar algo com o texto de e-mail, eu tenho que clicar duas vezes aqui e, em seguida, selecionar esse texto de e-mail. Então eu vou fazer isso. Vamos em frente e redimensionar isso para 25 talvez até 22. Agora este ícone aqui na verdade não faz parte do grupo ainda eso para fazer isso. Vá em frente e arraste este ícone para o e-mail para o grupo de e-mail aqui, e agora eu posso realmente ir em frente e segurar Shift e selecionar isso juntos e até mesmo o fundo do e-mail ou o campo de texto de e-mail e não utilizado os centros de linha vertical. E isso vai seguir em frente e centralizar tudo para mim. Eu vou mudar o texto aqui para 14 e ir em frente e mudar a cor, também. Uma cor mais clara porque esse é o texto do espaço reservado. Não é o e-mail real. Eu vou usar a cor A para um quatro para que você possa colocar este código em seu campo aqui, e isso lhe dará a mesma cor se você quiser usar isso, e então vamos apenas finalmente espaço as coisas corretamente aqui. Vamos tentar fazer 15 aqui e depois 15. Eles estão realmente vamos fazer 10 lá. Isso parece bom. Vamos fazer a mesma coisa aqui. Vamos primeiro colocar isso dentro do grupo de senhas. Certifique-se de colocá-lo dentro do grupo e não fora. Então, para ter certeza de que, por exemplo, esta camada está dentro do grupo, deve haver um pequeno recuo aqui. Se você perder por acidente, você pode simplesmente ir em frente e, hum, mouse sobre o grupo, e então ele definitivamente vai colocá-lo dentro desse grupo. É apenas o dobro rápido aqui. Mude isto para 25 também, ou tínhamos um 22. Vamos em frente e selecionar tudo aqui no centro deles. Eu só movi isso até termos Sina este aplicar preenchimento de um quatro um 484 Basta mover isso para que ele está combinando com esta posição na posição do e-mail. Parece que esqueci de mudar minha mensagem para 14. E novamente, vou centralizar isso novamente porque quando você mudar o tamanho do texto, ele mudará o alinhamento vertical. Então certifique-se de usar sempre que Lyman Tools para re apenas coisas. Se eles se moverem, vamos entrar aqui com trocos. Isto para 14 é baixo. Vamos descer aqui. Vamos em frente e capitalizar isso ou texto aqui. E para fazer isso, vá para a seção de texto fora do de suas propriedades. Clique nos três pontos e aqui em seu aviso, você tem um monte de personalização diferente que você pode fazer. Eu estava interessado na letra maiúscula aqui para fazer a maiúscula, e agora é maiúscula. Vá em frente e mude o preenchido para branco, e então eu vou selecionar as duas linhas e realmente trazer sua cidade paga para baixo para Vamos tentar 50%. Podemos até fazer algo como 35. Queríamos definitivamente ser visíveis, mas ao mesmo tempo sutis. Acho que isso é bom. Talvez apenas aumentar o tamanho do texto deste para também 14. Mantenha-se consistente. Vamos em frente e selecionar tudo aqui e também fazer sua linha. Isso parece bom. E então isso é redimensionar a peça para 14 e 14 aqui. Por fim, vamos nos certificar de que novamente alinhamos as coisas corretamente. Esqueci-me de fazer isto por alguns botões, por isso volta. Apenas certifique-se de que tudo está alinhado criticamente, e eu acho que isso parece bom aqui. Hum, então se você voltar para o esboço aqui, estamos quase terminando. Só precisamos de um botão de termos aqui ou de uma seção de termos. Então vamos mandar uma mensagem em vez de outro botão, algo assim. Já temos muitos botões aqui. Então vamos fazer Vamos em frente e apenas Presti abrir um ano de texto e termos de serviço certos. Vá em frente e mude isso para branco aqui e parece que estraguei completamente o invólucro aqui. Então lá vamos nós, termos de serviço, e podemos até fazer e política de privacidade. Isso geralmente é o que você vê para deixar certas partes do texto em negrito. Basta selecionar a parte que você deseja negrito e, em seguida, ir em frente e usar o comando. Seja como um atalho, ou você pode realmente acessá-lo a partir daqui também e torná-lo negrito. Vamos fazer o mesmo aqui com os termos de serviço. Torná-lo ousado. Parece bom. Vamos ter certeza que está centrado. Ok, isso é centrado. E vamos nos certificar de manter um espaçamento fora. 36 do fundo é baixo. Então, agora, se eu diminuir o zoom, você verá que estamos quase terminando. Próxima lição. Nós vamos voltar e falar sobre cores e em algumas cores em ano porque, como você pode ver, nós não temos nenhuma cor exceto para o logotipo eso. Vamos tentar usar a cor local, que é uma laranja, para escolher um esquema de cores agradável para o nosso up na próxima lição. 7. Escolhendo um esquema de cores: Tudo bem. Então vamos começar a escolher um esquema de cores para o nosso aplicativo porque, como eu mencionei no início da seção Ah, o cliente não especificou um esquema de cores, então vamos ajudá-los a construir um nesta lição e depois aprender um pouco mais sobre esquemas de cores e estilos de cores em figo MMA. Legal. Então incluído no recurso é desta lição será um pequeno texto arquivado que lhe dará um modelo que eu coloquei juntos para o nosso esquema de cores. Vamos usar isso em um segundo. Uma boa cor lê. Então vá em frente e dê esses artigos ou leia. Se você quiser aprender mais sobre cores e como aplicá-las em seu projeto, e isso também é muito legal. Há um monte de esquema de cores. O recurso é assim que todos esses sites ajudam você a criar um esquema de cores para o seu projeto. Sei que fico dizendo esquema de cores, e você pode não saber exatamente o que é esquema de cores, mas essencialmente, as cores vieram. Sei que fico dizendo esquema de cores, e você pode não saber exatamente o que é esquema de cores, mas essencialmente, É uma espécie de paletes, certo? Quando você é um artista, você tem uma paleta de cores diferentes que você usa em seu design ou em sua arte, então é a mesma coisa. Há tantas cores que podemos usar e que ficam bem juntos. Então é isso que um esquema de cores é, um monte de cores que podemos usar para um projeto. Nós mantemo-nos com eles e criamos consistência com eles e certificamo-nos de que também há contraste lá. Então parece bom e é legível e tudo isso. Então vamos em frente e abrir este segundo recurso aqui. Eu realmente gosto. Isso nos ajudará a criar um esquema de cores para o nosso projeto, então eu acabei de abri-lo. Aqui em cima. Chama-se cores, desde Bo. Essencialmente, ele tem um monte de diferentes paletas de cores ou esquemas de cores que você pode usar para seus projetos. Há alguns realmente bons aqui, muito nítidos e afiados, Hum, e há outros que são mais leves, dependendo do projeto que você está usando, pode definitivamente obter inspiração aqui, ou até mesmo usar as mesmas paletes em seus projetos. Eles têm um monte de outras coisas. Inspiração, , brindes, cores de marca. Se você quiser ver o esquema de cores de suas marcas favoritas e até mesmo alguns Grady Antzas realmente legal , bem , uh, nós vamos voltar para a paleta de cores toque. Vamos escolher um esquema de cores que faça sentido para o nosso projeto, já que canguru limpo tem a ver com água limpa, sabe? Então, hum, essas cores de ar geralmente associadas com a cor azul. Hum, agora eu vejo no projeto aqui. Ah, o logotipo deles já é laranja. Então azul e laranja vão muito bem juntos. Hum, sim. Um bom exemplo disso pode ser aqui onde temos um tipo de azul e laranja. Eu acho que o que eu vou fazer é usar esta paleta aqui, mas então vá em frente e adicione algumas cores personalizadas a ela também. Então vamos em frente e copiar algumas das cores. Mas antes de fazermos isso, vou abrir o link que te falei. Vá em frente e abra esse link aqui. Emitido levá-lo direito a este arquivo onde eu montar um modelo de esquema de cores que você pode usar. Ele tem acesso você tem acesso a esses links. Aqui está bem, se você pode abrir isso agora, nós estávamos apenas no segundo site aqui muito rapidamente. Esta é essencialmente a sua paleta de cores que você vai usar para o seu projeto. Temos uma cor primária que geralmente é a cor da marca, cor secundária e e, em seguida, para acentuar cores que usarão, mas não tão frequentemente quanto um secundário em cores primárias. E então podemos fazer um texto primário e secundário cores também. Então, por enquanto, vamos em frente e copiar isso. Vamos selecionar tudo aqui. Tudo já está dentro de um grupo, o que é bom. Ao ter esses grupos como aquele ir em frente e pressione o comando, ver ou controlar. Veja no Windows em e, em seguida, vá para o seu próprio projeto. Eu vou apenas colá-lo direito em cima da minha página de login por agora, mas mais tarde vai organizar isso em outra seção. Eu só vou movê-lo aqui por enquanto. Vamos apenas remover os modelos e o texto aqui, e então vamos em frente e atribuir algumas cores a ele. Então a primeira cor que eu vou atribuir ah provavelmente será uma cor que todos usados como uma cor secundária . Então vamos em frente e dobrar rápido para aqui. Também de outra forma, se você tiver um grupo como este, e você quiser selecionar Ah, um objeto dentro dele sem ter que clicar duas vezes nele. Você pode simplesmente manter o comando e, em seguida, ir em frente e selecionar um objeto dentro. Essa é uma maneira muito legal de selecionar as coisas em vez de ter que dobrar rápido o tempo todo. Então agora eu tenho este selecionado, um, o que eu estou tentando fazer aqui é atribuído este tipo de cor laranja, ou eu vejo que ele tem várias cores laranja, então nós vamos usar a cor aqui para preencher este ângulo de quebra. A maneira mais fácil de fazer isso é manter o controle, ver, e então você terá um pequeno seletor de cores que você pode até mesmo ver no canto superior direito da tela, que permitirá que você escolha. Preenche. Vamos descer aqui. Agora você vai notar que há várias laranjas aqui que podemos escolher. Então vamos em frente e vamos para aqui onde estão as pernas do canguru e escolher esta laranja. Quão legal é isso? Outra maneira que você também pode adicionar preenchimento ao usar um seletor de cores ou em I drop picker como abri-lo. E então usando isso, eu deixei cair a ferramenta daqui também. Então vamos voltar às cores. Inspo. Hum, e eu realmente gosto desses tons de azul aqui, alguém para usar isso para o resto da minha paleta de cores. Então vamos fazer a cópia aqui clicando no azul e então vamos para o primário novamente. Eu tenho que selecionado usando o comando em e escolher este ângulo direito, e aqui você vai ver bem ao lado de sua cor de preenchimento. Há um pequeno texto que é essencialmente o código hexadecimal dessa cor, então agora é branco e branco tem um código hexadecimal de seis efs. Então, se você quiser ir em frente e substituir isso usando o comando V ou controle via no Windows pressionar enter, que irá ritmo essa cor direito lá para você. Eu vou realmente mudar este texto também apenas que nós podemos usá-lo. E digamos que há um desenvolvedor que quer usar essa cor. Você sabe que código hexadecimal representa. Vamos fazer a mesma coisa para a cor laranja. Vamos apenas ir em frente e copiar este código hexadecimal para inserir aqui. Vamos voltar às cores. Inspo, pegue este azul Aqui, talvez, e adicionado a este campo aqui e também texto andan. Finalmente, eu quero fazer uma cor clara que podemos usar para talvez o fundo de certas partes do aplicativo. Basta clicar duas vezes aqui novamente e, em seguida, mudar isso também. E lá temos. Temos, ah, ah, paleta de cores agradável que podemos usar para o nosso projeto. Vamos atribuir as cores de texto secundário texano mais tarde, mas por enquanto, vamos nos concentrar em aplicar essas cores. Vamos atribuir as cores de texto secundário texano mais tarde, mas por enquanto, 8. Configurando estilos de cores: Tudo bem. Então, agora que criamos nosso esquema de cores para cima, você quer ir em frente e realmente adicionar as cores do ao que é chamado de estilo de cor, o que nos permite reutilizar as mesmas cores em todo o nosso projeto para que possamos facilmente mudar essas cores se decidimos no futuro e não ter que mudar todos os objetos associados a essa cor. Então vamos em frente e selecione a primeira cor aqui. Eu vou manter o comando aqui e clicar nele onde diz, Phil, você vai até aqui para onde este ícone de ponto aqui chamado Style. Vá em frente e clique nele e eu vou em frente e criar um estilo usando o ícone de adição e nomeá-lo Primário e eu ir em frente e criar estilo. E como você pode ver, eu tenho este estilo de cor azul. Vamos adicionar o resto das cores aqui também. Vamos usar o comando rápido nesta laranja. Agora vá em frente para o estilo Aqui, Criar estilo secundário. A mesma coisa para esta cor de sotaque. Grande sotaque estilo. Um. Você começa a idéia agora sotaque para e lá você tem isso. Eu tenho este esquema de cores agora aqui. Então agora como aplicamos isso em nossos botões? Vamos até a nossa página de login. Vamos em frente e usar o comando e clique no fundo deste aqui. Caso contrário, se você selecionar todo o grupo, você terá que adicionar a cor aqui nas cores de seleção. Então ambos funcionam. Vamos em frente e escolher o grupo inteiro. Vá até as cores de seleção e, a partir daqui, você verá estilos. Então vá em frente e abra o estilo. E aí está. Vocês têm aqui que podem usar nesse botão. Acho que aqui eu teria usado o botão principal. Vamos mudar a cor do texto branco aqui embaixo. E então vamos para o nosso próximo botão aqui. Cadastre-se com e-mail e depois aqui novamente. Mas selecione um estilo fora do primário. A mesma coisa para o texto branco para o Senado com Botão Google. Hum, eu vou ir em frente e realmente atribuir um preenchimento de apenas branco. Acho que parece muito bom. Vamos em frente e aplicar o mesmo estilo aos nossos ícones aqui para ir em frente e clicar duas vezes. Certifique-se de selecionar o quadro inteiro ou o grupo. Aqui, deixe-me ir em frente e mudar a cor de seleção usando o estilo de cor para o primário. A mesma coisa para o e-mail. Primária. Agora é aqui que a magia acontece. Então agora vamos dizer que de repente você muda de idéia e você quer ir com uma cor roxa . Você pode simplesmente escolher um dos elementos usando essa cabeça de estilo de cor aqui, vá em frente e clique nele e, em seguida, escolha o estilo de edição e você pode ir em frente e agora mudar esta cor. Vamos torná-lo talvez uma cor roxa. Agora, como você pode ver, tudo no projeto usando essa cor está mudando, e você pode imaginar como seria legal se eu tivesse várias páginas projetadas aqui. Mas mesmo aqui dentro deste grupo, isso é super legal. Podemos ir em frente e apenas brincar com esse Ah, e mudar nossa cor primária se quisermos. Mas na verdade eu vou apenas desfazer e voltar para a nossa cor principal aqui e ali nós temos isso. São estilos de cores para você. Acho que já terminamos aqui. Só vou dar uns toques para melhorar isso um pouco, se quiser. Caso contrário, na próxima lição, você também pode baixar o figo meu caiu que temos até aqui e começar com isso. Mas vamos em frente aqui e melhorá-lo. Vamos só ampliar aqui. Abaixe este botão um pouco. Vamos em frente e aumentamos o espaçamento entre eles para cinco, e nós realmente esquecemos de adicionar algo aqui. Normalmente esquecerei o botão de senha que vou adicionar como texto. Dê-lhe uma cor branca e mudou o tubo de espessura. Segure em. Vamos apenas ir em frente e colocar isso aqui que parece bom. Vou mover este divisor um pouco para cima até o ter. Talvez esteja se afastando. Vamos tentar fazer 55 pixels aqui, e então vamos bater estes e tentar obter a cena. Estou usando tudo aqui novamente para ver o espaçamento entre objetos diferentes com os que selecionei . Isso é bom. Vamos adicionar um pouco mais de espaçamento entre estes e torná-lo cinco também. Vamos diminuir o zoom. E eu acho que isso parece muito mais limpo agora. Legal. Então agora temos uma página completa de arrastar. Acho que parece muito bom. E eu acho que agora estamos prontos para começar a entrar em nossa página de tutorial, uh, e projetamos isso juntos. 9. A página de tutorial: Certo, então temos nossa página de login. Agora em diante. Vamos começar a projetar nossa página de tutorial. Vamos voltar ao meu retrato falado só para ver o que temos aqui. Então eu estava pensando em fazer um fundo de borrão desta tela bem aqui. Então, quando o usuário toca no tutorial, ele simplesmente ir em frente e borrar o fundo daqui e, em seguida, um pequeno pop-up aqui com o título e o corpo do texto aqui. Talvez um pequeno vetor que possamos usar para mostrar esse passo. Eu vou ser muito legal. Então vamos começar a projetar isso. Então, nesta lição, vamos brincar com efeitos para adicionar um tipo de desfoque de fundo a esta página e, em seguida, construir sobre isso. Ah. Então o que precisamos fazer é realmente copiar todos os elementos aqui em nosso tutorial bem, e você verá por que em um segundo, vamos em frente, toe são log e frame aqui, hum, hum, e na verdade, vá em frente e selecione tudo aqui. Vá em frente e use o comando. Ver ou controlar. Veja, para copiar, vá para a sua página editorial e certifique-se de que você tem a página editorial selecionada e, em seguida, faça o Comando V e, em seguida, vá em frente e realmente use o comando G para agrupar tudo isso em um elemento. Desta forma, temos um grupo simples aqui. Vou trancá-lo para não mover as coisas acidentalmente. E agora vá em frente e crie um retângulo pressionando o R dois do canto superior até o fundo. Assim que tiver esse retângulo aqui, vamos mudar o Phil para preto. E então vamos mudar a opacidade para, hum, vamos fazer pensar que 55% parece bom. Agora vá para efeitos, crie um novo efeito pressionando o sinal de adição aqui e clique na sombra e altere isso para um desfoque de fundo. É agora, como você pode ver, acrescenta um belo borrão de fundo ao meu ângulo direito aqui. Então o que isso faz é que ele desfoca tudo por baixo dele porque estas camadas em cima de todo o grupo que criamos a partir essencialmente desta página aqui que simplesmente foi em frente e explodiu tudo sob esse retângulo. Se ele tocar coisas em cima deste retângulo. Não vai ficar borrada, que é o que queremos. Você continua a desfocagem do seu plano de fundo clicando neste ícone aqui e alterando o número aqui. Então agora são quatro, mas podemos fazer 10 novos 15 através de mais borrão. Eu acho que para nós eu vou fazer oito por agora, eu acho que oito trabalho, hum, ou mesmo seis. Agora vamos em frente e criar um retângulo para o fundo do meu tutorial. Esse é o nosso “vamos arrastar um “sendo baseado no meu esboço. Algo assim ficaria bem. Assim como ali. Usou a ferramenta de linha aqui para ter certeza de que está centralizada. Vamos mudar a cor de preenchimento para Branco. Vamos em frente e contornar as fronteiras para Vamos fazer 25 pixels coisa que parece bom e não, precisamos de textos aqui, um para os títulos. Vamos fazer T e tipo e título quando definimos a fonte aqui para 22. Vamos selecionar os dois e usar a ferramenta Lyman. Vamos em frente e apenas duplicar este imposto segurando velho corpo aqui e vamos em frente e mudar o touro para um tamanho normal e telefone de 14. Agora você vai notar que se eu começar a digitar aqui, digitar algo aleatório aqui, o texto vai continuar acontecendo e sobre e sobre. Eu não era o que queremos para o nosso tutorial para tutorial. Queremos um pequeno tipo de parágrafo de texto aqui. Então é aqui que sua caixa delimitadora de textos entra no lugar. Se você está dimensionado ou texto aqui agora, você pode escolher qual será a largura dele. E então agora você pode ir em frente e apenas centralizar isso aqui apenas novamente, certificar-se de que todos estes centros de ar estão juntos. Agora, se eu adicionar mais texto aqui, não será vinculado por essa caixa. Então, em nosso recurso é que temos este aplicativo. Notas. Iniciar txt. Vá em frente e abra isso. Você notará que temos etapas de tutorial aqui, então o texto das primeiras etapas está aqui. Então vamos em frente e copie isso. E ouvir isso parece um pouco melhor. Vamos em frente e redimensionar isso e novamente, ter certeza de que está centrado. Vamos em frente e fazer um centro de alinhamento para o texto. Acho que podemos fazer o tamanho do telefone 16 aqui para parecer um pouco melhor. E para o título, vamos em frente e apenas configurá-lo para navegar. Vamos em frente e agrupar essa coisa toda, selecionando tudo aqui. Comando G. Certifique-se de que está centrado novamente. Vamos em frente e trazer isso um pouco para baixo. Vamos em frente e adicionar outro retângulo para o nosso mas aqui 2 55 para a altura e aquele que parece bom. Eu só quero ter certeza de que isso também combina com o do meu botão. Vou mudar o meu botão Phil para usando estilos, vou mudar o fundo do botão para azul. Agora vamos em frente e adicionar um raio de borda de oito aqui e, em seguida, ir em frente e adicionar um texto dentro. Para a próxima, Mude a cor para brancos e basta ir em frente e centro destes juntos. Agrupe-os e vamos entrar aqui e centralizar o texto aqui. Isso parece bom. Agora vamos em frente e adicionar alguns ícones vetoriais. Então, novamente, no recurso é se você ir para ícones e entrar no tutorial aqui, você verá que temos três vetores que podemos usar para nossos passos, Hum, então vamos em frente e realmente apenas arrastou todos para o meu produto arquivo aqui. Se você voltar atrás, coloque-os todos lado a lado. Qual escola? Vamos em frente e primeiro redimensionar que tem seu enorme voltar aqui. Acho que você faz um pouco maior do que isso. Vamos apenas ir em frente e tirar estes do caminho por enquanto. Agora, tenha em mente ícones vetoriais como SV G, um, aparecem como quadros em seu projeto, então certifique-se de tratá-lo como um quadro quando estiver se movendo. Então vamos em frente e encontrar este quadro para este ícone aqui e realmente arrastá-lo para dentro do nosso grupo aqui. Então, se eu rolar para baixo todos ver Tutorial e, em seguida, este é o nosso grupo, apenas por favor definir dentro daqui. E, enquanto segurava o turno, vou centrar os dois. Vou me certificar que podemos adicionar um pouco mais de espaçamento do nosso texto aqui, e acho que está começando a ficar bem. Então, o que vamos em frente e realmente adicionar estilo ao ícone aqui? Escolhendo ou cores estilos e talvez escolhendo a opção secundária e, em seguida, para o nosso título ou o texto aqui. Mudar também. O azul. Talvez. Acho que podemos fazer isso um pouco maior. Vamos tentar 24 e, em seguida, ir em frente e selecionar esses dois juntos para centrá-los e certificar-se de que tudo aqui está centrado também. Parece que é assim que você tem. é o nosso tutorial para criar os dois últimos passos quando vamos em frente e selecionar este quadro inteiro aqui e fazer o comando D duas vezes para duplicá-lo duas vezes. E então vamos diminuir o zoom assim como esses dois quadros e movê-los para baixo e fazer a mesma coisa aqui. Então, vamos em frente e renomear este tutorial 12. etapa dois renomeou este tutorial desejado Etapa três. E então, é claro, vamos fazer o tutorial. Passo um. Agora vamos em frente e mudar rapidamente o conteúdo aqui. Então vamos fazer a Vamos voltar para o nosso arquivo de texto aqui e parece que este é sobre solicitação . Cole esse texto aqui, e então vamos em frente e usar o Command X ou controlar as janelas do Exxon para cortar esse ícone e substituí-lo por este. Eu só vou clicar onde ele está e então ir em frente e apenas passear bem ali usando o Comando V ou Controle V. Agora parece que ele colocou isso dentro do quadro do outro. Então vamos em frente e secar, sair do quadro do outro ícone e, em seguida, para liderar o outro ícone. E nós ainda queremos adicionar Aplicar o Phil laranja, e isso parece bom para um passo, também. O próximo é o nosso passo três. Volte aqui novamente, renomeie este para votos limpos. Vá em frente e cole isso aqui. Vamos selecionar tudo e o texto aqui e apenas centralizar isso junto. E então, claro, vamos ao nosso último Lecter aqui e usar o Command X novamente, colar isso aqui e, em seguida, apenas certificando-se de que está fora disso, excluindo o diretor da loja e, em seguida, mudando o estilo, também. Armazenagem. Vamos em frente e mudar o texto aqui para feito porque neste ponto os usuários completaram o tutorial, então eles vão ser feitos com ele. História de distância. Então, lá temos. Aquele passo sartorial um Passo dois e até mesmo Passo três 10. Componentes: Tudo bem, então nesta lição, vamos falar sobre algo muito útil em componentes de culto de figo MMA. Até agora em nossas páginas de tutorial, criamos vários cartões essencialmente para cada etapa do tutorial, certo, como o usuário passa da etapa número um até a etapa número três. A vista, este pequeno cartão tutorial. De onde podem obter informações sobre como a APP funciona. Agora vamos dizer que eu percebo que eu quero ir em frente e mudar o nous arredondado deste fundo aqui. Então, é claro que você pode ir até aqui e digamos que a partir de 25 Begin disse que 15. Mas agora veja o que acontece. Nosso tutorial, passo número dois e passo número três ainda tem um raio de canto de 25. Isso é porque não há realmente nenhuma relação entre cada um desses cartões aqui, mas que componentes nos permitem fazer? É realmente ir em frente e criar uma instância desses cartões ou realmente qualquer coisa que vai ter um estilo muito semelhante ou configuração realmente semelhante, assim como nós fazemos aqui, certo, mesmo que o texto para cada cartão é diferente. Mas geralmente temos muito mais acontecendo aqui em termos de estilo ou como os elementos são colocados. E a menos que façamos essa mudança em cada tela individualmente, mas não seremos capazes de obtê-lo de outra forma. Então é aí que os componentes entram em jogo. Vou em frente e desfazer esse raio de fronteira aqui. Certifica-te que são 25 de novo. Lá vamos nós, e agora vamos converter isso em um componente, e então você verá como isso é útil. Então, novamente, os componentes podem ser qualquer parte do design que você deseja duplicar parede, mantendo um certo estilo ou certa característica de modo que, se em algum momento você decidiu mudar que mudou o estilo, mudou as características desse componente, você pode fazê-lo em um só lugar e não ter que fazê-lo em vários lugares. Se você assistiu a lição onde fizemos os estilos de cores, é muito semelhante aos estilos de cores onde se ele apenas fizer essa mudança aqui, todos os nossos botões e elementos usando esse estilo de cor vão mudar em vez de nós ter que ir em um por um e alterando-os. Então vamos em frente e saltar e realmente fazer um componente para começar com o cartão aqui no tutorial. Passo número um. Se você não tem seguido junto, certifique-se de ir para o recurso é pasta aqui, que você pode obter novamente a partir do início desta seção em e, em seguida, ir para cima para ir em maquetes e encontrar a lição que você está em. E você pode ir em frente e abrir o arquivo e continuar junto com a gente. Caso contrário, vamos entrar. Eu só vou ir em frente e zoom aqui. Vamos em frente e selecionar este grupo. E como você deve se lembrar, esse grupo contém o texto aqui. Pequeno título A. Zola é o Fundo. Agora eu só notei que meu botão e meu ícone aqui, meu vetor aqui estão inadequadamente dentro do grupo. Então vamos em frente aqui para o painel de camadas, hum, e vamos em frente. E em primeiro lugar, vamos agrupar o próximo botão. O retângulo é sempre o texto usando o comando G. Vamos nomear este próximo botão, e então temos o vetor aqui. Vamos em frente e selecione esses dois. Por alguma razão, eles foram agrupados, mas nós queremos realmente ir em frente e apenas separá-los e colocá-los neste grupo. Lá vamos nós. E agora temos tudo em um grupo. Eu só vou ir em frente e repedir algumas coisas. Traga esse navegador até aqui, traga isso aqui. Só disse lá em uma espécie de ordem agradável de cima para baixo. Acho que isso parece bom. Então, agora vamos em frente e selecionar todo o grupo. Certifique-se de que você tem o grupo selecionado com cada elemento dentro. Vá até aqui onde diz “criar componente”. Alternativamente, você pode fazer a opção Command K ou Ault Control K, e isso fará a mesma coisa. E agora você verá no meu painel de camadas, esse grupo de repente tem um novo ícone, e até mesmo o texto é roxo. E isso está nos dizendo que isso agora é um componente. Então agora o que eu vou fazer é ir em frente e segurar Ault e ir em frente e arrastar outra cópia para esta página. Esse tutorial Passo número dois página agora, porque eu criei meu componente a partir deste grupo aqui. Este não é o meu componente principal. O que eu fiz agora é que eu fui em frente e criei uma instância a partir desse componente mestre, que significa que este grupo aqui agora pertence às propriedades e ao estilo e tudo aqui. Então vamos passar por Toched oral Passo 2 Page. Hum, eu só vou ir em frente e levar isso para fora. Este é o cartão que estava originalmente aqui. Eu vou trazer isso para fora também. Só vou reordenar isso. Então está em cima. Certo, Certo, então agora o que queremos fazer é inserir este texto para entrar aqui Controle. Veja, para copiar Pace que sob a mesma coisa para o texto aqui em baixo Agora, para a imagem aqui, eu vou fazer algo diferente porque esta é agora uma instância desse componente mestre . Eu não posso ir em frente e apenas trazer elementos para dentro daqui, mas eu definitivamente posso adicionar coisas aqui e então escolher esconder ou esconder esconder as coisas que eu quero mostrar em cada instância dele. Então vamos em frente e clique duas vezes aqui para obter nosso ícone vetorial aqui. Eu só vou fazer uma cópia. Vamos subir aqui para o nosso componente principal aqui e colar isso agora. Vou apenas ir em frente e certificar-me de que o alinho com o meu outro ícone aqui. Lá vamos nós. Vamos descer e fazer a mesma coisa com este iPhone que ele comandava. Vês, suba aqui e depois vamos em frente e paz lá dentro. Parece que eu certamente os inseri nos outros vetores quadros para ter certeza de que você tem seus quadros independentes uns dos outros para os iPhones aqui. E agora o que podemos fazer aqui. Vamos em frente e nos livrar disso. Já que terminamos com isso e estamos no centro todo esse tempo, acho que está centrado. Vamos em frente e fora do centro ao longo do componente mestre nesta página, ou você pode simplesmente ir até aqui e pressionar os centros horizontais e verticais, e isso fará a mesma coisa. E vamos em frente e copiar isso. Vá em frente e selecione esta página de tutorial antes de colarmos aqui. Vamos em frente e vamos apenas arrastar isso para fora daqui e arrastar essas coisas incham meu grupo um pouco estranhamente no meu cartão tutorial. Vamos em frente e selecionar uma etapa territorial três e, em seguida, ir em frente e colar assim Agora temos outro. Vamos ir em frente e copiar o texto aqui e ouvir e este aqui e você vai notar este não está centrado. Então, primeiro, vamos em frente e excluir este grupo aqui e ir até o nosso componente mestre aqui. O que vamos fazer é ir em frente e esticar esse texto todo o caminho para coincidir com nossos textos corporais e, em seguida, ir em frente e clicar no centro de linha de texto. Então, agora, se eu for até aqui, isso vai ficar bom. Agora, os ícones aqui? Bem, eis o que vamos fazer. Vamos clicar duas vezes aqui. Lembra-se? Embora esta seja uma instância de um componente, você ainda tem controle sobre algumas das coisas, como o que você mostra e o que você esconde aqui. Vá em frente e selecione este grupo e vá onde temos toalhas. Temos máquina de lavar roupa e temos o ícone da loja. Então, vou esconder o ícone da loja e a máquina de lavar. Só temos as toalhas aqui, as toalhas limpas. Vamos subir aqui e fazer exatamente a mesma coisa e este, embora, vamos em embora, frente e esconder a toalha de uma loja, e então temos a máquina de lavar. E por último, mas não menos importante, aqui em cima. Agora, uma coisa que eu quero mencionar para este cartão aqui porque este é o componente massivo. Se eu fizer alguma alteração nele, mesmo que eu esconda esses ícones extras aqui, hum, ele vai realmente ir em frente e removê-lo de minhas outras páginas também. Então não é isso que queremos aqui. Normalmente, quando você cria componentes, você deseja ir em frente e colocar seus componentes e um lugar separado em algum lugar diferente em algum lugar separado, para que você possa reutilizá-los sem edição de outro lugar. Então, o que vamos em frente e arrastamos isso para fora e colocamos aqui por enquanto? E eu sei que parece um pouco organizado, e na próxima lição vamos voltar e limpar isso antes. Agora, vamos em frente e pressione comando, veja selecione. Nossa Pretória vai enquadrar aqui e fazer o Comando V. E então agora eu tenho outra instância desse componente mestre. Agora, se eu entrar aqui e esconder minhas toalhas na máquina de lavar, eu só tenho o ícone da loja, que é exatamente o que queremos. Então, por que fizemos isso lá? Eu sei que temos exatamente o mesmo resultado de antes. Agora deixe-me explicar o que é diferente se você subir para o seu componente mestre aqui, você pode identificar um componente mestre de suas instâncias olhando para o símbolo aqui. Componente mestre tem este pequeno ícone de diamante ao lado do nome. Se eu descer aqui. Uma vez que esta é uma instância desse componente mestre, eu posso ver que ele não tem isso para o ícone de diamante pequeno. Só tem um vazio. Então isso me diz que esta é uma instância desse componente mestre. Então, agora, se eu subir aqui e clicar duas vezes em meus componentes mestre até que eu selecione este retângulo aqui Não, vamos dizer que eu quero mudar meu nous arredondado para zero apenas como um exemplo aqui. Agora, se eu descer aqui para o meu passo número um ele vê que tem um raio de canto zero. A mesma coisa para o passo número dois e a mesma coisa para o passo número três. Isso é muito legal agora. Se eu voltar aqui e usar o comando, clique no meu plano de fundo e dê a bordo um raio de 20. A mesma coisa será aplicada a todas as outras instâncias. Digamos que eu decidi agora alinhar todo o meu texto à esquerda aqui. Então, se eu selecionar o meu texto e fazer uma linha esquerda aqui, só vou ter certeza que estes têm o mesmo tamanho. Ok, isso é bom. Eu só vou selecioná-los e ter certeza que eles estão no centro também. Parece que estão. Então, agora, se eu descer aqui, você verá que meu texto mudou em todas as minhas instâncias. E quão legal é isso? Em vez de ter que fazer uma mudança em todos os meus grupos aqui Agora, eu estou apenas fazendo uma mudança para o componente mestre lá. Então agora eu vou apenas ir em frente e selecionar ambos os textos aqui e centralizá-los novamente. Agora, se eu diminuir o zoom, você verá as mudanças foram feitas Aqui está bem, então vamos em frente e também renomear este grupo para dizer, cartão tutorial apenas para que nós não sabemos exatamente o que este componente mestre representa. Então agora se eu descer aqui e digamos que por alguma razão no meu passo um ou no meu passo um quadro aqui. Eu quero ir em frente e usar isso como um grupo completamente separado, sem relação com os componentes mestres, embora seja de onde nós o obtivemos. Mas digamos que você queira ir em frente e se livrar completamente dessa relação lá. Então tudo que você tem que fazer é apenas ir para o painel de propriedades aqui e, em seguida, onde ele diz cartão tutorial. Vá em frente e selecione isso. E, em seguida, você pode ir em frente e selecionar anexar instância. E então este é agora um grupo separado foram na verdade até mesmo um quadro separado. Se eu for para o meu painel de camadas que você vê agora, ele não tem o mesmo ícone que tinha antes aqui. Então, agora, se eu apenas ir em frente e saltar aqui e vamos apenas dizer mover estes ao redor e vamos ver para liderar este ícone aqui, isso não terá nenhuma relação com o componente mestre nem qualquer uma das outras instâncias. Então isso agora é completamente separado, e o que quer que façamos com ele só permanecerá nesta página em dentro deste quadro junto. Então eu vou apenas ir em frente e apertar o comando Z Bunch vezes dois voltar a tê-lo como uma instância, e você vê agora é uma instância novamente porque tem uma pequena borda roxa como ah de Bella , meu painel de camadas, é s cartão tutorial e tem um pequeno ícone que tínhamos antes. Então agora eu sei que esta é uma instância desse componente, então sinta-se livre para aproveitar os componentes onde quer que você possa. Ah, sempre que você vê que você tem vários objetos que estão relacionados ou parecem iguais, você provavelmente pode colocá-lo em um componente mestre. E então agora eu quero dar um pouco de exercício para realmente ir em frente e colocar nossos botões em um componente separado também. Na razão é, como você notou, Ah, muitos dos botões que estavam usando realmente têm um estilo muito semelhante. E novamente, se eu decidir mudar o botão de login aqui para ser negrito, meus outros botões não usarão essa propriedade porque eu só estou alterando meu registro, mas aqui. Mas normalmente queremos que nossos botões pareçam iguais ou muito semelhantes com apenas pequenos ajustes, como uma cor de fundo da cor do texto. Portanto, sinta-se livre para fazer este exercício e criar um componente mestre a partir de seus botões. Talvez colocá-los fora do seu design aqui e, em seguida, vá em frente e crie instâncias onde quer que você veja que temos esse botão usado. Uma coisa que eu quero mencionar antes de você entrar nesse exercício é que uma vez que você criar um componente mestre aqui, certifique-se de criar uma instância e colocá-lo aqui em vez de, ah, suas cartas separadas. Porque, novamente, este é um componente. Esta é uma instância desse componente. Portanto, qualquer mudança que você deseja fazer aqui, especialmente em termos do que você deseja adicionar ou remover para todo esse grupo aqui, você gostaria de fazer isso dentro do componente mestre. Se você não quer fazer este exercício, sinta-se livre para pular e então apenas pular para o próximo vídeo onde nós vamos realmente fazer isso juntos e aprender um pouco mais sobre componentes. Porque a sua super poderosa 11. Componentes de botões: Tudo bem, então vamos em frente e pular para transformar nossos botões em componentes. Então o que vamos fazer aqui é o que vamos usar um desses botões para criar componente mestre e, em seguida, criar instâncias dele em todos os lugares estavam usando o botão. Então vamos em frente e usar a opção ele ou a chave antiga e arrastar uma cópia aqui. Vamos apenas ir em frente e apenas arrastá-lo aqui e novamente. Podemos criar componentes vindo aqui e clicando. Criar componentes. E agora isso é apenas um componente que temos. É chamado de botão de login agora, porque esse é o nome que tínhamos para ele antes. Mas vamos em frente e ele mudou isso para botão. E agora o que eu vou fazer é ir em frente e selecionar minha bunda e componente aqui. Use o comando. Veja, eu vou selecionar entrar aqui o quadro e eu vou apenas ir em frente e colá-lo aqui. Vamos em frente e apenas alinhar isso com o nosso original. Mas aqui e depois, vamos em frente e apenas encontrar o botão de login em nossos quadros e deletado e eu vou apenas ir em frente e trazer isso abaixo do meu passaporte, mas dentro e o que estamos aqui . Vamos em frente e apenas mover essa senha esquecida logo após a senha e os termos de serviço todo o caminho para baixo, bem em cima do meu plano de fundo, apenas indo para reorganizar algumas de nossas camadas aqui. Você não tem que fazer isso, mas eu sempre gosto de manter minhas camadas organizadas aqui. Então agora esta é uma instância desse botão. O que podemos fazer aqui. Podemos ir em frente e usar a tecla de opção novamente para criar outra instância. E vamos em frente e mudar o nome deste ou o texto para este para se inscrever com e-mail exatamente como temos aqui em baixo. Vamos em frente e alinhar esse lento usando as teclas de seta para ter certeza que acertamos. E então vamos em frente. E da mesma forma elite estão se inscrever, mas aqui e movido para baixo este sinal para cima. Mas aqui, bem aqui, vamos em frente e fazer o mesmo com este último botão aqui. Desta vez vou usar o comando D e depois inscrever-me. É realmente fazer login com este Google? Não, eu tinha um fundo branco aqui antes. Então, para mudar minha cor, eu ainda posso ir em frente e selecionar isso. E agora tem cores primárias selecionadas. Mas se você quiser mudar isso, você pode simplesmente ir em frente e fazer estilo destacado que permitirá que você escolha sua própria cor. E então, é claro, eu preciso ir até aqui para minha fonte e ou meu texto aqui e mudá-lo para preto como tínhamos antes. E então, claro, vamos em frente e liderá-lo, excluir a outra cópia que tínhamos logo abaixo deletar e esse colapso isso e trazê-los . Traga logo abaixo do outro. Então a ordem faz sentido e lá vamos nós. Então agora se eu for para o meu mestre Mas no componente aqui, se eu ir em frente e decidir usar o comando ser eu decidir negrito no texto. Veja, meus outros botões têm um texto de touro. Agora, se eu entrar aqui, se eu voltar aqui e clicar duas vezes e escolher meu texto e vamos dizer que eu escolher o tamanho de 16 e voltar. Você vê que meu tamanho aumentou aqui. Então, por enquanto, vamos em frente e realmente em negrito. Então nós vamos ir em frente e realmente selecionar nosso texto aqui em talvez fazer uma maneira de peido médio, médio aqui e, em seguida, ir em frente e CR mudar ali. Legal. Então, agora aqui, estamos bem. Temos os nossos botões e estas são todas as instâncias. Uma coisa que quero mostrar a vocês aqui é que fizemos uma mudança em nossa assinatura com o Google aqui . Então o que nós realmente fizemos aqui é que nós substituímos essa propriedade dessa cor de fundo aqui a partir dos componentes mestre, que é azul. Ah, e depois mudamos para o branco. Então, digamos que em algum momento eu decidi fazer este botão parecer com o resto. Hum, se eu quiser mudar tudo completamente, eu posso ir em frente e selecionar, ir para o meu painel aqui, e então redefinir substituições a partir daqui. E isso vai me dar exatamente como aquele componente mestre era. Então eu posso ir em frente e mudar o texto aqui. Então vamos comandar isso aqui. Digamos que você só queira mudar o Phil de volta para a cor original. Então você pode dobrar rápido para aqui e selecionar o seu retângulo aqui, certifique-se de tê-lo selecionado, e eu faço a mesma coisa. Mas desta vez, em vez de substituições recentes, podes redefinir, Phil. E assim que só vai começar a preencher que tivemos a partir dos componentes principais. Caso contrário, você pode ir em frente e deixar isso assim. Ah, quais são as propriedades substituídas para este botão? 12. Como usar páginas para organizar: Vamos fazer coisas mais rápidas aqui só para embrulhar componentes. Nós vamos em frente e assim por aqui. Como você pode ver , está ficando um pouco confuso. Normalmente, queremos ter os nossos componentes e coisas assim. Esses jogos de um estudioso em uma página separada e nossos projetos, então não tipo de fazer o nosso espaço de trabalho ocupado aqui. Então, a Figura permite que você crie várias páginas dentro do seu arquivo, mas apenas indo até aqui para onde diz Página 1 Agora, esta é a página em que estamos. Chama-se Página Um, Um, Waken”. Vá em frente e renomeie para. Mas se você marcar ups e vamos em frente e criar outra página rapidamente no ícone Plus aqui e fazendo talvez componentes e, em seguida, vá em frente e clique em Plus e vamos apenas fazer outra para estilos. Então vamos em frente para a nossa simulação. Vamos em frente e basta selecionar o grupo de esquema de cores aqui e usar o Command X. Voltar para estilos deve ser definido aqui. Legal. E agora vamos voltar a marcar pontos. Selecione os dois componentes. Sejam fora daqui. Use o Command X novamente para cortar, em seguida, vá aqui para a nossa página de componentes e colá-los aqui. Lá vamos nós. Legal. Então agora eu quero fazer outra coisa aqui com os componentes do botão. Normalmente, os botões têm vários estados, então temos, ah, botão que pode estar desativado. Então isso pode dizer ao usuário que agora eles não podem usar esse botão. E então temos um botão, geralmente em um estado habilitado. Então, um botão como este geralmente diz ao usuário que ele está habilitado. Mas e se você quiser criar outro tipo de botão que diga aos usuários no botão está desativado? Então, para fazer isso, vamos em frente e usar a instância salt e dragon longe do componente aqui, e então , na verdade, vamos transformar essa instância em um componente criando um componente e as camadas aqui. Vamos em frente e renomear este botão para desabilitado e o outro para habilitado. Portanto, certifique-se de seguir esta convenção aqui, mas na barra direta habilitada e, em seguida, botão para a frente faixa desativada para a parte inferior aqui . Então vamos em frente e selecionar isso desabilitado. Mas aqui, vamos em frente e primeiro destacamos o estilo aqui, e depois mudar o preenchimento do botão para talvez você seja legal? Um tipo de cinza aqui funcionaria. Vamos fazer, hum, esta cor aqui, um nove, um nove e uma última coisa que eu vou fazer rapidamente aqui. Vou em frente e mudar o texto aqui. E como você pode ver agora, ele mudou no outro botão também. On A razão para isso é que nós transformamos a instância e instância deste botão em um componente. Então ele ainda está relacionado com este botão e as alterações que fazemos nele. Então, novamente, faça com que este é chamado de botão barra barra para a frente barra desativada no outro. Mas com barra habilitada, vou te mostrar em um segundo. Ora, isso é importante. Então, agora, se você voltar para os dois anos de Michael Page aqui, isso parece muito mais limpo. By the way, Agora você vai ver meu texto aqui mudou de volta para botão. Precisamos mudar isso para a lei de novo. Isso é porque não substituímos o texto para a lei novamente. Usamos o que o componente tinha. Então, quando mudamos para, mas mudou. O texto aqui está bem, mas o outro permaneceu o mesmo porque fizemos essa substituição para o texto aqui. Agora, se eu selecionar um botão e ir para o painel Instância aqui, eu poderia realmente ir em frente e escolher desabilitado ou habilitado. Quão legal é isso? Esquecemos de fazer uma última coisa aqui, e isso tem a ver com o cartão tutorial aqui. Ah, e isso é para atribuir o mesmo botão a ele também. Então vamos voltar para componentes e que Vamos ir em frente e copiar este componente e, em seguida, ir em frente dentro de uma pasta de cartão tutorial. E agora temos uma instância desse botão. Então nós vamos apenas ir em frente e substituí-los por aqui 2 a 53 pixels também. E vá em frente e coloque isso em cima do outro. E vamos em frente e excluir o próximo botão do nosso componente aqui. E então antes de avançarmos, vamos fazer o próximo aqui só porque a maioria dos meus componentes usará um próximo botão. Exceto pela última página do tutorial, vamos mudar isso para feito. Vamos fazer isso voltando para simulações e, em seguida, se eu rolar para baixo até a última página. Eu posso substituir este texto botões fazendo clicando nele e, em seguida, digitando feito. Então, agora você vê, nós temos exatamente o que queremos. Sei que aprendemos muito aqui hoje, mas estes são conceitos e invenção muito importantes. Sei que aprendemos muito aqui hoje, muito, Ferramentasmuito, muito poderosas e úteis. E eu realmente quero que você obtenha um entendimento e realmente aproveite isso em seus próprios projetos. Acho que estamos prontos para passar para nossa página de pagamento, então faremos isso na próxima lição. 13. Usando variáveis para criar grupos componentes: Muito bem, antes de entrarmos no nosso PJ de pagamento, quero mostrar-vos duas coisas rápidas que a Fema actualizou recentemente, mas são super úteis. Então, a primeira coisa é chamada de troca de instâncias. Então, se eu ir em frente e selecionar uma das incidências do botão de login que temos aqui, por exemplo, no lado direito. Agora você pode ver que há uma nova maneira de você realmente ir em frente e alterar ou trocar a instância que você deseja. Então eu posso trocá-lo por uma versão desativada do que eu quero, ou eu posso ir em frente e trocá-lo de volta para o bairro um. E se eu tiver vários botões ou vários componentes, eu posso facilmente encontrá-los por aqui e até mesmo usar uma barra de pesquisa aqui. Agora, é claro, isso será muito mais útil uma vez que você tem várias variações de botões diferentes ou vários botões ou vários componentes que você pode querer trocar largura. Porque agora só temos componentes acoplados. Pode não ser tão útil, mas definitivamente ficará mais útil à medida que você começar a adicionar mais componentes, mais variações diferentes dos botões e assim por diante. A outra coisa muito legal que eu quero mostrar a vocês que figo anunciou mais recentemente é chamado de variância. Então eu vou realmente rapidamente passar por artigo de espessura aqui sobre o que a variância faz. E então nós vamos seguir em frente e realmente aplicá-lo aos nossos próprios componentes e nossos próprios projetos. Portanto, a variância é uma ótima maneira de ser capaz de criar várias versões do mesmo componente, como o exemplo aqui que eles têm na imagem. Você pode realmente ir de cabeça e criar diferentes versões dos botões e ser capaz de realmente alterá-los ou personalizá-los em suas instâncias muito rápido e rapidamente. E vou mostrar-lhe um exemplo disso em apenas um segundo. E como você pode ver aqui nesta imagem, eles criaram várias versões dos mesmos botões. Alguns deles com a ICANN, outros sem. Eles têm versões secundárias com cores diferentes, tamanhos diferentes ou eles usaram todas essas propriedades diferentes, que você também pode ver no lado direito do painel aqui, para ser capaz de criar diferentes versões de seus botões. Mas isso fará muito mais sentido uma vez que realmente o aplicarmos ao nosso próprio projeto. Então, por que não mudamos para a FISMA e vamos para a nossa guia de componentes aqui. Certo, então de volta aqui na nossa guia Componentes aqui com a página, vemos duas versões diferentes dos botões que criamos. Um deles chamado botão e tal habilitado e, em seguida, o outro, barra de botão desabilitado. E isso é facilmente ser capaz de identificar qual estado do botão queremos. Então nós já meio que usamos a mesma idéia que o grupo variante fornece. Mas a única diferença ou o benefício aqui de usar variância é que é muito mais fácil de usar no lado da instância. Além disso, se você tiver desenvolvedores trabalhando com você ou usando seus designs, será capaz de utilizar isso melhor. E então eu vou te mostrar isso em um segundo. Então, a fim de criar uma variante, primeiro você precisa de componentes, que já temos aqui. Então vamos em frente e selecionar ambos estão aqui. E agora você verá esta nova opção chamada combinadores variantes no lado aqui. Então, vamos em frente e clicar nisso. E todos nós percebemos aqui está no máximo satisfeito nossos componentes de dois botões que tínhamos dentro desta variante de botão. E você pode ver o nome aqui porque nós estávamos usando essa convenção de nomenclatura, FISMA foi inteligente o suficiente para realmente ir cabeça e transformá-los em propriedades desse botão. Então temos a propriedade um. Então, como não há nenhum nome anexado a essa propriedade, fama foi usada apenas um nome genérico, propriedade um aqui. E, em seguida, vá em frente e use a versão desativada e habilitada. Então, se eu clicar neste, você verá a propriedade um está definida como habilitada. E para esta propriedade um está definido para desabilitar. A primeira coisa que quero fazer aqui é selecionar todo o grupo de variantes aqui. E vamos em frente e basta clicar na propriedade um para ir em frente e mudar o nome para talvez estado. Então isso é apenas algo que faz mais sentido. Agora temos uma propriedade chamada state, que pode ser desabilitada ou habilitada. Agora, é claro, podemos ir em frente e realmente criar mais estados, se você quiser. Então, para fazer isso, podemos ir em frente e fazer mais opções e, em seguida, ir em frente e adicionar uma nova variante. Então isso irá em frente e criar outra variante e ir em frente e usar o estado três, mas podemos ir em frente e nomear o que quisermos. Então, no nosso caso, por que não vamos em frente e fazer pressionado? E nós podemos até ir em frente e movê-lo para cá se você quiser, e mover este aqui para baixo. Então agora temos um estado habilitado, estado oprimido e um botão de estado desativado. E queremos ir em frente e realmente criar algo diferente aqui para o nosso prestígio. E então por que não vamos em frente e vamos até a cor de seleção aqui, separar o estilo, e talvez ir com um botão que é um pouco mais escuro. Isso é apenas para que, quando o usuário toca nesse botão, ele se transforme nesse estado de imprensa. Então agora vamos dizer que queremos outra propriedade e vamos realmente ir em frente e criar uma pequena versão do nosso botão. Então vamos em frente e clique no botão, variando grupo aqui novamente. Vá para mais opções, e vá em frente e clique em adicionar nova propriedade como um estado à direita abaixo. Agora temos uma nova propriedade. Vai pedir-nos para lhe dar um nome. Então, no nosso caso, vamos em frente e fazer o tamanho. E o valor padrão para um novo mural de propriedade é ser padrão. Então vamos em frente e realmente mudar isso para pequeno e grande em apenas um segundo. E fazer isso a maneira mais fácil é ir em frente e basta selecionar esses três botões enquanto mantém pressionada a tecla Shift. E vamos em frente e encontrar o tamanho da propriedade aqui. Vá em frente e clique neste pequeno erro aqui, e vá Adicionar novo. E eu vou, vamos em frente e renomear esse novo valor muito grande. Agora, se quisermos criar uma versão pequena de todos esses botões, vamos em frente e usar o Command D para duplicar esses botões. E vamos em frente e apenas arraste o tamanho ou a largura aqui para, vamos fazer 150. Isso é perfeito. E então agora você adivinhou que nós vamos até aqui para o tamanho. Vá em frente, clique na seta e adicionar valor novo e criativo de pequeno. Agora, como podem ver, temos seis tipos diferentes de botões. Temos um botão grande que tem um estado habilitado, um botão grande que tem um estado pressionado e um botão grande que tem um estado desabilitado. E, da mesma forma, temos um pequeno botão que tem um estado habilitado. No botão pequeno desativado e oprimir botão pequeno. Então agora você provavelmente está se perguntando, como isso é útil? Bem, para demonstrar como as palavras, vamos voltar para a nossa página de maquetes, onde podemos ir em frente aqui para a nossa página de login ou não está aqui atrás. Vamos ver. Eu quero ir em frente e mudar esta ocorrência de botão aqui para um pequeno botão pressionado para que eu possa ir em frente e selecioná-lo. E agora no lado direito do painel aqui você vê que temos nossa variante de botão aqui. E agora temos propriedades diferentes que podemos mudar. Podemos mudar o estado para, digamos, pressionado. Podemos ir em frente e mudar o tamanho para, digamos, um pequeno. E assim fema muda automaticamente isso para o tipo de botão que queremos. Digamos que mudes de ideias e queiras isso. Mas para ser grande. E mostrar a próstata. Aí está você. Você só tem que mudar uma propriedade e você tem o botão que deseja. E você pode fazer muito mais com variantes, como adicionar ícones aos botões e usar isso como um estado. Então, por exemplo, eles têm Ícone, falso e verdadeiro aqui, espero que agora você possa ver como rolamentos podem realmente nos ajudar a criar diferentes versões de seus componentes e como ele pode ser útil. Só para mostrar algumas dicas rápidas sobre variantes, você pode realmente ir em frente e clicar na variante aqui e redimensionar a janela como quiser. E você pode até ir em frente e mover seus botões ou seus componentes para diferentes lugares. Dessa forma, pode ser mais fácil para você ou para sua equipe. Portanto, sinta-se livre para organizar suas variantes de uma forma que faça sentido para você e talvez para sua equipe de design ou desenvolvimento. Sugeri fazer-te um exercício e familiarizar-te com a variância. Eu quero que você realmente vá em frente e crie uma versão dessas variantes com uma imagem também. E então vá em frente e alinhe o texto ou o texto do botão que temos para o lado esquerdo do botão para ir em frente e fazer isso para ambos são grande e pequena variação dos botões. E então iremos em frente e faremos isso juntos na próxima lição. 14. Solução de exercícios de variantes.: Então vamos em frente e criar uma variação desses botões com imagens de ícone dentro deles também. Então primeiro eu vou abrir minha pasta de ícones aqui a partir dos recursos para esta marcação. Eu só vou para Como um exemplo, vá em frente e abra os ícones e entre em login. E apenas como teste, vamos em frente e arrastar isso no envelope dot SVG aqui para R sigma. Vamos em frente e ao longo deste lado. Neste lado aqui, proporções restritas e redimensioná-lo para 25 pixels. E vamos em frente e arrastar essa moldura aqui e ter isso ali para nós. Agora vamos em frente e primeiro passo, selecione tudo o que temos aqui. Porque o que queremos fazer é ir em frente e adicionar uma versão da nossa variação que inclua todos esses diferentes tamanhos de estados. E então agora, e agora também adicionar uma variação que tem um ícone. Então a primeira coisa que queremos fazer é clicar nos botões. Variação aqui vai para o lado, e vamos em frente e adicionar e nova propriedade. Vamos seguir em frente e nomear isto com um ícone como este. Então sigma também nos permite usar valores binários dentro de propriedades privadas aqui também. Então, para isso aqui, podemos ter dois valores. Um com ícone, então um valor verdadeiro e depois um falso sem ícone. Então, para fazer isso, vamos em frente e mudar esse padrão usado clicando duas vezes aqui para true. Então agora temos um valor verdadeiro ícone de largura aqui. Então o que queremos fazer agora é ir em frente e selecionar todos esses botões aqui novamente, e então ir em frente e duplicar é segurando Alt. Certifique-se, enquanto você está duplicando, você não sair da linha tracejada roxa porque então não seria um muito int mais. Tudo bem, então eu vou apenas ir em frente e realmente redimensionar minha página variante aqui só para que pareça um pouco melhor e mais organizado. E então o que queremos fazer é usar esses seis botões e adicionar um ícone a ele e, em seguida, ir em frente e mover o texto para a esquerda. Então aqui nós vamos apenas ir em frente e selecionar nosso texto aqui. Agora lembre-se de fazer isso mais rápido, você sempre pode manter o comando e mudar juntos. Assim, você pode selecionar várias camadas dentro de outros componentes ou outros grupos para tornar as coisas muito mais rápidas para nós. Em seguida, vá em frente e use texto alinhar à esquerda. Simples assim. E agora vamos em frente e trazer nosso envelope para cá. E então vamos em frente e mudar a cor de seleção aqui para branco. Agora eu vou apenas ir em frente e duplicar isso ou segurar Alt e apenas arrastá-lo para cada componente. E vá em frente e traga para nossos pequenos ícones aqui. Enquanto se certifica de que tudo está alinhado. Lá vamos nós. Ok, incrível. Então agora o que queremos fazer é ir em frente e selecionar os seis inferiores aqui que têm ícones e ter certeza de que isso está definido como verdadeiro o que é. E então vamos em frente e selecionar aqueles que não têm ícones aqui em cima, o ícone 64 largura em vez de true, vamos em frente e adicionar novo e fazer falso. Então agora de volta aqui, podemos ir em frente e realmente mudar o estado desativado, pressionado ou habilitado. Temos o tamanho que podemos mudar para pequeno, grande. E agora para todos eles, também temos uma opção chamada ícone de largura. Então, podemos ir em frente e adicioná-lo com a ICANN e a parte bonita sobre ele usando valores verdadeiros e falsos nas propriedades da variação é que você tem este pequeno interruptor de alternância agradável aqui que apenas torna as coisas um pouco mais arrumadas. Então agora eu posso totalmente ter uma opção com ícone. Vá em frente e escolha um pequeno ícone ou um pequeno botão e, em seguida, use um estado pressionado, se eu quiser. Agora, enquanto eu mando esses, eu notei que eu tenho um pouco de um problema de alinhamento aqui. Portanto, certifique-se de manter sempre os seus ícones e botões alinhados para que eles não fiquem estranhos entre variações. Então sim, isso é variação para você. Definitivamente usá-lo em seus projetos. Agora, para o resto deste curso, eu vou estar usando componentes sem variação, mas definitivamente sinta-se livre para tentar usar variantes como nós vamos junto onde você pode. 15. A página de pagamento: Tudo bem. Acho que estamos prontos para saltar para a nossa terceira página aqui, a página de pagamento. Mas antes de fazermos isso, vamos dar outra olhada no nosso esboço aqui. Então esta é a página de pagamento. É bem simples. Só tem um título aqui, , e então temos o cartão de crédito onde o usuário pode inserir o número do cartão de crédito e todas as outras informações aqui, e então eles podem adicionar o cartão daqui e ir para a próxima página. Hum, parece bem simples. Eu não sei quanto a vocês, mas às vezes quando eu estou tentando projetar um novo projeto ou uma nova página, é um pouco difícil saber exatamente o que queremos colocar lá ou até mesmo obter alguma inspiração para um projeto e nossos próprios projetos. Claro, podemos usar APs semelhantes que estavam projetando e brincando com esses APS, mas isso poderia ser realmente entediante. Isso é assim? É por isso que vou te mostrar este site legal aqui chamado Padrões. Comece a cabeça sobre P duplo T R N s ponto com para acessá-lo, e é super legal. Essencialmente, é apenas, um, tipo de Pinterest, mas para design de aplicativos. Então ele mostra um monte de inspirações interessantes que você pode tirar de algumas das torneiras quentes no mercado. Eles até têm categorias. Aqui está para baseado na página que você está projetando. Você pode entrar aqui e se inspirar. Vamos em frente e selecione este toque de compra aqui para ver alguma inspiração de diferentes APS e diferentes empresas. , Por exemplo, há a página de pagamento do Uber aqui. Nós já temos um design em mente em termos de meu próprio esboço aqui, mas vamos em frente e ver o que precisamos. Precisamos de um número de cartão. Precisamos de uma data de validade, CVV país e CEP. Então eu acho que geralmente esses primeiros 3 campos são obrigatórios e os outros são tipo de opcional. Mas é claro, se o cliente quer que comecemos, definitivamente coloque esses em nosso design no futuro também. Mas, por enquanto, vamos nos concentrar em colocar esses três campos obrigatórios. Então vamos voltar aqui para a minha página de pagamentos aqui e figo MMA. Eu vou usar essa chave de texto Ah, e vá em frente e apenas criar algumas notas aqui. Portanto, os requisitos de pagamento. Vamos em frente e usar a linha esquerda e mover isso aqui. Precisamos do número do cartão de crédito aqui. Precisamos do CVV e depois do prazo de validade. Há uma boa maneira de fazer anotações e lembre-se de adicionar coisas à sua página aqui. Então vamos em frente e selecionar nosso quadro aqui e, em seguida, primeiro queremos Texan aqui, Então vamos fazer texto e depois vamos fazer no pagamento. Vamos em frente e selecionar o tamanho da fonte de 26 e, em seguida, basta ir em frente e mover isso aqui para cima. Você quer fazer 50? Acho que isso parece bom por enquanto. Vamos usar Vamos ampliar aqui e criar um retângulo para um cartão de crédito, e eu acho que isso é bom aqui. Quero manter o espaçamento de 40 de cada lado. Ou, na verdade, vamos fazer 43. Gaste isso aqui, também. Talvez 1 85 Vamos em frente e definir um bom Grady em Phil para nós linear para o fundo aqui, e eu vou ir em frente e trazer isso para cima um pouco aqui. Primeiro, vamos escolher cores locais, então essas são as cores que estavam usando em nosso projeto aqui. Vamos fazer este para o topo e depois a mesma coisa para o fundo. Mas vamos fazer um pouco mais escuro. Talvez, e então vamos fazer terá seu início de ano em ano. Talvez aqui. Vamos em frente e fechar isso aqui. E vamos em frente e contornar as fronteiras para talvez 18 aqui. Parece bom quando formos em frente e enviamos esta mensagem para ela aqui. Parece bom. Crie outro texto. Vamos apenas ir em frente e fazer um através de 345 Espaço 5678 Espaço 901 para Espaço 3456 Estou apenas repetindo alguns números aqui. Vou adicionar alguns espaços duplos aqui em vez de apenas um espaço, apenas em algum espaçamento entre estes quatro dígitos. Vamos em frente e selecionar todo o campo de texto e alterar o preenchido para branco. E então vamos movê-lo para cá. Vamos em frente e torná-lo em negrito e alterar o tamanho da fonte para 16. Fazer. Um espaçamento de 30 seria bom. Vamos tentar 18 para o tamanho da fonte. Isso é ainda melhor. Mova-se um pouco para cima. Vamos, na verdade, passar aqui para espaçamento de letras e adicionar alertado. Espaçamento desligado. Vamos fazer 2%. Isso parece bom, mas apenas um pouco de espaçamento entre cada um dos meus dígitos. Vou usar o comando D para duplicar isso aqui e o que queremos a seguir? Queremos a data de validade. Então vamos fazer mês, mês , ano, ano, ano, apenas como um espaço reservado aqui que move isso aqui para baixo. E então vamos continuar e duplicar. Está aqui e faça CVV. Vamos movê-lo todo o caminho para a direita. Acho que isso está começando a se juntar, só vai mexer um pouco. Mova estes para cima um pouco. Acho que isso parece bom. Tenho sentido que azul ficaria melhor para os grandes aqui. Então, o que vamos em frente e realmente mudar nossas cores? Do laranja ao azul? Lembro-me que podes sempre fazer isto com o teu design. Hum, realmente não há certo ou errado aqui. É apenas uma questão de o que parece melhor para você ir em frente e experimentar com diferentes opções. Você não tem que ficar com aqueles com quem estamos trabalhando aqui. Se você quiser usar outro tipo de página por todos os meios, vá em frente e faça isso agora. Vamos em frente e basta selecionar tudo aqui e usar o comando G para agrupá-los. Renomeie isso para cartão de crédito e vamos para o painel de efeitos aqui e adicionar efeitos. Adicionar em efeito de sombra sobre para este eu quero fazer talvez um porquê cinco. Eu devo fazer. Desliguei-a. 10. Tente 12. Fazendo uma cidade de 20% que não é muito visível. Vamos em frente e adicionar outra sombra também. Vamos fazer um borrão de 20 anos com um Y de oito. Então mude a velha cidade de pagamento para talvez 15% ou 5%. Aqui. Vamos tentar 8%. Acho que isso parece bom. Então só estamos sentindo sua falta. Mas aqui, como você se lembra, criamos nossos botões como um componente. Mas colocamos em outra página aqui na página de componentes. Você não tem que ir lá para acessá-lo. Se fores ao topo dos activos aqui, verás todos os teus componentes aqui, e eu tenho os meus botões. Tem baixa tanto a versão deficiente quanto a habilitada, hum, então quero que eu só usei o habilitado aqui por enquanto, e ele apenas lindamente aparece no lugar aqui para ter certeza que é uma linha no centro. Vamos em frente e também ter certeza de que tudo o resto está alinhado neste poço centrista e parece que ele. ISS. Vamos mudar isso, mas em texto para adicionar cartão. E vamos mudar isso para pagamento aqui para torná-lo um pouco mais simples. E então, é claro, vamos em frente e centralizá-lo. Acho que isso parece muito bom. Então, lá temos. Essa é a nossa página de pagamento. Nós definitivamente podemos voltar, líder e depois polir as coisas aqui em cima. Uma vez que terminarmos com tudo o resto. 16. Restrições: Tudo bem. Então, na última lição, juntamos nossa página de pagamento, e agora nesta lição, vamos aprender o que são restrições. Então, essencialmente, até agora, temos feito nossos designs aqui, assumindo que eles sempre serão rodados em um iPhone 11 tamanho em. Temos usado apenas um tamanho para nossos quadros aqui. Em outras palavras, temos colocado nossas camadas e objetos aqui, assumindo que ele só será executado em um monitor do iPhone 11. Então, digamos que o cliente em algum momento decide projetar ou ver seus projetos em um iPhone 11 pro Max aqui. Hum, e como você pode ver, não vai acontecer muito. O quadro só se expandirá, mas nossos projetos permanecerão do mesmo tamanho e novamente. Isso porque nós estamos projetando isso em relação a apenas um iPhone 11 tamanho pro aqui. Mas é aí que as restrições vêm. Restrições nos permitem fazer seus projetos responsivos para que eles funcionem independentemente do quadro ou do ambiente lá, a fim de adicionar restrições aqui. Primeiro, vamos em frente e desfazer isso. Então, temos o nosso tamanho original aqui, , e vamos focar na nossa página primeiro, então eu só vou ampliar Ah, usando o Zet e a escola aqui. Então vamos em frente e apenas nos concentrar em adicionar restrições a esta página em. E então vamos em frente e adicionamos em todos os outros lugares também. Mas vamos primeiro entender quais são as restrições. Assim, com qualquer objeto selecionado, você pode acessar restrições indo para o painel de propriedades aqui em, depois localizando restrições. Você pode ver agora por padrão eu tenho uma restrição fora de cima e esquerda, e você pode ver que é superior esquerdo porque estes dois marcadores aqui na restrição são azuis e os outros são apenas preto. Então este campo aqui está sendo restrito à esquerda e ao topo, que é por padrão o que acontece com cada objeto. Mas, na verdade, o que queremos fazer é ir em frente e restringi-la à esquerda e à direita aqui, modo que se o quadro ficar maior ou menor, o campo reagirá a isso. Então, agora, se eu fizer meu quadro menor, uh, o campo não vai reagir a isso. Então, a fim de fazê-lo reagir e dimensionar corretamente, dependendo do tamanho da tela aqui, vamos em frente e selecioná-lo e depois passar por aqui. Vamos remover a restrição superior. Então vamos remover a restrição superior indo aqui e apenas fazendo centro, porque queremos manter este elemento no centro da nossa página e não necessariamente limitado pelo topo. E então vamos em frente e também fazer a esquerda e a direita aqui. Então, não para realmente ver essa inação. Vou redimensionar minha moldura, tornando-a menor. Agora você vai notar que meu campo está realmente redimensionando aqui, exceto que há algo estranho acontecendo com este ícone aqui. Então vamos em frente e adicionar alguma restrição a este ícone também. Ah, os elementos de um grupo em si têm certas restrições que você também pode mudar . Então, se eu clicar duas vezes aqui para selecionar o meu ícone em e você vai notar que tem um restrito à esquerda e à direita. Mas para o ícone em si, nós só queremos fazer um restrito à esquerda porque nós só queremos restringi-lo para o lado esquerdo deste campo e não para a direita. Então, agora, se eu redimensionar meu quadro, você vê que ele funciona como deveria, então vamos fazer, vamos em frente e aplicar essas restrições a alguns dos elementos desta página , e iremos em frente e aplicá-lo a outras páginas também. Novamente, vamos trabalhar o nosso caminho de cima para baixo. Então vamos fazer este botão aqui. Queremos fazer uma restrição superior e direita aqui porque queremos isso, mas em ser constrangidos para o lado direito e não para a esquerda. Nosso logotipo aqui deve apenas permanecer no centro, e provavelmente vamos realmente fazer este centro também. Vamos para o grupo de senhas e torná-lo muitas vezes direitos e centro. E então, novamente, pule aqui e faça essa mudança para ser deixada apenas para o nosso ícone aqui. Esqueceu a senha deve ser restringida aos direitos e ao centro. O botão de login deve ter uma restrição de esquerda e direita e novamente centro em termos de restrição vertical. Vamos em frente e apenas multi-select usando shift. Hum, todos esses componentes aqui mantêm esses objetos aqui porque eles vão ter as mesmas restrições que iam fazer, esquerda e direita, e então nós vamos fazer o centro. Exceto por estes termos. Aqui, queremos ir em frente e clicar neste e fazer uma restrição inferior porque queríamos realmente ficar na parte inferior. Acho que nos esquecemos de uma coisa. Vamos abrir nosso painel de camadas aqui. Se você se lembra, bloqueamos nossa camada de fundo. Eso Não podemos editá-lo até entrarmos em nossas camadas e depois desbloqueá-lo. E para o meu passado aqui, certifique-se de tê-lo selecionado. Queremos fazê-lo restrição de esquerda e direita e superior e inferior. Assim, está preenchendo o tamanho do buraco da tela. Então eu vou trancá-lo de novo, mão vai em frente e desmoronou minha moldura. Então, agora, se o cliente , digamos, decidir usar o iPhone 11 pro Max para seus projetos aqui, ele pode fazer isso. E boom. Como você pode ver, o quadro é completamente responsivo e redimensionado para esse tamanho do iPhone. E então, se eu mudar o quadro, digamos dois no iPad. Mini mesmo e vê-lo faz funcionar, embora você provavelmente gostaria de fazer alguns ajustes. Então, basta redimensionar esses campos e botões porque isso é muito grande para um aplicativo iPad. Mas aqui estamos projetando para o Mobil. Então vamos em frente e aperte o comando Z. Em seguida, vá em frente e selecione o quadro e certifique-se de que escolhemos o iPhone 11 pro aqui. Ganhei 11 profissionais aqui, e vou colocar isso de volta aqui. Isso parece bom. Legal. Então, como um exercício, eu quero que você vá em frente e aplique essas restrições às outras páginas que temos aqui. Então vá em frente e, como um experimento, aplique essas restrições nas páginas do tutorial, bem como na página de pagamento e na próxima lição, faremos isso juntos também. 17. Solução de exercícios de restritas: Certo. Então, se você tem acompanhado até agora, adicionamos algumas restrições à nossa página de login. Aqui está agora, não importa o tamanho do quadro aqui é, se eu mudá-lo ao redor, ele irá em frente e restringir todos os elementos dentro para os lados e o topo e o fundo, modo que nos ajudará a criar algum design realmente responsivo. E então eu te dei um exercício para ir em frente e fazer isso para as outras páginas aqui. Então vamos fazer isso juntos aqui também. Primeiro, quero começar com meus passos de tutorial. Hum, mas eu vou realmente ir em frente e substituir o grupo que nós inserimos no fundo aqui. Ah, e na verdade usar uma imagem em vez disso porque isso é muito mais fácil de controlar com restrições para o propósito que estamos usando aqui em nossas simulações. Então vamos em frente e selecione a página de login aqui e, em seguida, ir todo o caminho para baixo para exportar . Vamos em frente e adicionar uma exportação aqui e apenas usar PNG para o seu tipo de arquivo e, em seguida, ir em frente e exportar login. Ele vai perguntar onde você quer salvá-lo, então eu vou apenas salvá-lo em meus downloads. Então, uma vez que eu fiz isso, eles vão seguir em frente e apenas arrastá-lo da minha pasta de downloads diretamente para esta página de tutorial. Então vá em frente e apenas centralize. E então vamos em frente e adicionar uma restrição de esquerda e direitos e superior e inferior. Desta forma, ele irá manter esta imagem anexada a todas as arestas, não importa como nós re dimensioná-lo, é claro, nós queremos ir em frente e apenas mover isso todo o caminho para o fundo onde temos o nosso retângulo logo abaixo dele. E então não precisamos mais desse grupo aqui. Então, foi deletado. E uma vez que você fizer isso, uh, eu vou seguir em frente e aplicar a mesma restrição ao retângulo Ah, que estamos usando para nosso efeito aqui, certo, o borrão. Então vamos em frente e apenas aplicar a restrição de canto superior esquerdo e direito e também superior e inferior. E então podemos ir em frente e agrupar esses dois juntos e ir em frente e trancá-lo. Torne as coisas mais fáceis. Então, agora, se eu redimensionar esta página, mas este quadro aqui, você verá que irá em frente e manter a imagem para o fundo e o lugar apropriado. Ah, mas o cartão tutorial aqui não é restringido corretamente. Então é como a instância do cartão tutorial aqui e, em seguida, em uma restrição fora do centro. Então, agora, se eu fizer a mesma coisa aqui irá em frente e manter o tamanho do ano. Vou selecionar o iPhone 11 pro novamente. Então agora isso funciona. Eu quero aplicar rapidamente as mesmas restrições aqui para as outras duas páginas de tutorial. Então vamos em frente e selecionar este grupo. Copie isso. Estou aqui para o meu tutorial para colar isso, trazê-lo aqui para liderar os outros dois. A beleza disso é que quando você copia algo, as restrições serão copiadas com ele também. Então não precisamos refazer essa parte. Vamos copiar de novo. Tutorial três. Faça a mesma coisa. Mova-o aqui, exclua os outros dois e, em seguida, tudo o que precisamos fazer é passar novamente pela instância aqui, escolher o centro. Então, usando o centro, apenas manterá o tamanho deste cartão para que não o redimensionemos. Com base no tamanho do dispositivo, vamos apenas centralizá-lo de acordo com a tela que estamos trabalhando aqui. A mesma coisa aqui. Então, agora essas páginas estão prontas. E por último, mas não menos importante, vamos passar para a nossa página de pagamento aqui. Hum, então isso vai ser super simples para este. Vamos em frente e fazer o centro e o topo para o cartão aqui. Não queremos que ele redimensione. Então, permite que você centro e centro para isso, bem como, semelhante ao nosso cartão tutorial e, em seguida, para o botão aqui queremos fazer. Vamos à esquerda e à direita e ao centro. Agora, se eu redimensionar este quadro para, digamos, um iPhone 11 pro Max aqui, eu acho que fica bem. Então, aí está. São os nossos constrangimentos. E agora tentamos em todas as páginas que projetamos até agora. Agora, para manter este curso conciso e direto ao ponto, eu não vou adicionar quaisquer restrições a cada página individual. Mas no final, vou incluir um arquivo que você pode baixar para a simulação final. Você, eu gostaria que incluísse todas as restrições aplicadas. Então, como um exercício, você pode definitivamente aplicar restrições ao longo de todo o u I e, em seguida, voltar para esse arquivo no final apenas para ter certeza de que você fez isso corretamente. 18. Usando Plugins: Tudo bem, então se você tem seguido até agora Ah, nós projetamos algumas das páginas iniciais aqui, e nós aprendemos um monte de coisas diferentes, de componentes a restrições. Ah, e agora eu acho que nós estamos prontos para saltar para a nossa página do mapa aqui se nós dermos uma olhada no nosso esboço aqui. Ah, nós vemos que temos um pequeno mapa com um botão de salvar aqui em baixo e talvez, mas dentro para nos dizer onde estamos e uma barra de pesquisa no topo. Bastante direto. Mas eu não sei quanto a você. Não tenho certeza de como colocaremos um mapa em nosso projeto. E é por isso que vamos falar sobre plugins nesta lição. plugins e a figura estão essencialmente lá para ajudar a automatizar o seu design e ajudá-lo a elevar seus designs ao próximo nível e fazer com que os designs aconteçam ainda mais rapidamente. Então, para acessar plugins. Se você estiver na web, você pode ir para a opção de menu aqui e, em seguida, ir para plugins. A partir daqui, você verá a lista de plugins instalados. Uma vez que não temos nenhum plug ins de instalação, você verá aqui Ele só diz gerenciar, plugins. Então, vamos em frente e clicar em gerenciar plugins. Então, a partir daqui vai ver um monte de plugins de recurso como o que era popular aqueles que são feitos pela comunidade. E você pode realmente usá-los a seu favor quando você está projetando seus projetos. Claro, estes ar não todos os plugins aqui. Você pode ir em frente e navegar por todos eles apenas indo para baixo aqui onde ele diz, navegar plugins. Então, como você pode ver, temos toneladas de plugins ou ir todo o caminho para cima. Eu vejo “unspool”. Ash tem que ligar. Se você se lembrar, um par de lições atrás será adicionado imagem de fundo em nosso login Page on Splash realmente tem um plug in figo MMA. Então, em vez de ir para o site de cinzas unspool, encontrar imagens, salvá-las e arrastá-las para o seu figo, meus arquivos , um, o plugue de abertura vai ajudá-lo a fazer a mesma coisa. Mas apenas em um passo, um passo, há gráficos que você pode criar usando este plug lá mais alguns ícones. Há Avatar, então se você está fazendo um apto com avatares, você pode ir em frente e usar este plug neste é realmente legal. Aqui é chamado de Google Sheets Sink. Há uma boa chance de explorarmos isso em uma seção futura. Ah, o que ele faz é que, como o nome pode sugerir é que ele vai afundar seu projetado com uma folha do Google. Então, digamos que você tenha um design com uma lista de texto diferente. Você pode realmente afundar isso com lençóis legais. Assim, à medida que você altera suas planilhas do Google, esse texto mudará dentro de seus designs. Quão legal é isso? A lista continua e continua. Eu adoraria ouvir alguns dos plugins úteis que você encontrou, e há muito para explorar. Então, se você quiser me enviar uma sugestão de um plugging que você está usando, hum, definitivamente vá em frente e compartilhe isso conosco em uma seção de Q e A, ou apenas envie para mim por e-mail. Você pode me enviar um e-mail para Olá inteligente no Gmail Dot com. Então eu vou deixar isso aqui na tela para que você possa ir em frente e me enviar alguns plugins legais que você encontrar então no topo aqui, você também pode procurar por um plugins específicos para pesquisar mapa, e então vamos usar este 2º 1 aqui e ir em frente e instale-o. Então, esta é apenas uma pequena nota para nos dizer que o plugue foi projetado por desenvolvedor de terceiros e não figo meu próprio. Então vá em frente e apenas instalou um plug in. E lá vamos nós. Conecte, instalado. Posso ver que está instalado aqui. Posso desinstalá-lo se não quiser mais usá-lo. Se você quiser saber mais sobre o que este plug in faz e como usá-lo, você pode ir em frente e apenas clicar aqui, então é onde vamos fazer. E como você pode ver, isso nos ajuda a tornar o mapa personalizado incrivelmente rápido. Legal. Só vou rolar até aqui. Você pode aplicar Google Maps ou minha caixa, então isso é muito legal. E está nos dizendo como usá-lo. Selecione qualquer camada, incluindo retângulo, lábios ou mesmo polígono e execute. Meu rosa parece bem simples, então volte para o nosso design aqui. Vamos em frente e, como diz, criar um retângulo e eu quero que este retângulo assuma todo o quadro aqui que parece bom. Não, vamos em frente e ir para esta opção aqui e ter em mente no aplicativo desktop. Você também pode acessar isso a partir de plugins. Mas se você estiver no aplicativo da Web, você pode ir aqui e fazer plugins. Agora você deve ver o criador de mapas aqui. Vá em frente e clique nele. Pode levar algum tempo para carregar. Uma vez que ele carrega, ele lhe daria É algumas opções aqui para que você possa inserir um endereço personalizado. Você pode alterar o tipo de mapa que deseja, seja um mapa de estrada, híbrido de satélite, etc. de Nívelde zoom. Então eu acho que tudo o que eu vou fazer é talvez apenas ampliar um pouco mais neste mapa. Hum, e então vamos fazer o mapa e lá está você. Temos um mapa dentro de nossos projetos. Muito legal 19. Finalizando a página de mapa: Agora o Lester está completo. O resto do desenho do nosso mapa aqui vai mudar para o meu esboço aqui. Assim, para a Página do Mapa, queremos uma pequena barra de pesquisa aqui com um pequeno ícone de pesquisa, bem como texto e, em seguida, um botão de salvar , bem como um ícone de localização atual. Então precisamos de ícones aqui e, em seguida, uma barra de pesquisa e, em seguida, em componentes de botão. Então vamos em frente e mudar para o nosso design e vamos começar do início. Vamos usar a ferramenta de retângulo. Desenhe um retângulo aqui e vamos ficar consistentes e manter o espaço de 25 pixels da esquerda e da direita. Então é claro que preciso redimensionar isso um pouco mais. Vamos em frente e mudar o preenchido para branco. Agora ainda está mal visível, então por que não vamos em frente e adicionar um traço cinza claro? Eu acho que algo assim funcionaria, e então vamos em frente e definir uma espessura de 1,5 pixels. Vamos em frente e arredondá-lo para seis pixels. Vamos, na verdade, fazer oito. Ah, e vamos em frente e também adicionar um efeito de ah drop shadow. Mude o Y 25 aqui, mude o soprador para 10 e traga a corda uma cidade para talvez 15% para Vamos realmente fazer 10%. Vamos mover o Y para dois, talvez ou três. Acho que isso está começando a se juntar. Vamos trocar por Tore Design. Aqui temos pequeno ícone de pesquisa, por isso é inserir texto aqui para Pesquisar. 16 é bom para o tamanho da fonte. Vá em frente e mude o caminho para o normal. Eu só vou em frente e adicionar um pouco de espaço para o nosso ícone que vamos adicionar. Vamos entrar e adicionar outra sombra desta vez. Vá em frente e faça o X zero e o Y zero também. Vá em frente e faça o soprador 30 são na verdade 25 no GOP City. Às cinco. Vou dopar uma cidade dos outros 1 a 20% ou 15 por isso não é muito duro. Acho que está começando a ficar melhor aqui. Agora vamos em frente. Voltar ao nosso recurso é para o projeto. Uma vez que você tem que aberto, passar por cima de dois ícones mapa e, em seguida, você vai ver que temos são dois ícones anos. Então vamos em frente e arrastá-los para dentro Só vou usar o Shift Old para redimensioná-los aqui. Apenas mova-os para cá. Vamos começar com o ícone de pesquisa aqui. Certifique-se de que você tem as proporções restritas aqui. Em seguida, faça 25 ano, modo que muda automaticamente a largura e a altura juntos. Ampliar. Coloque isso aqui bem aqui e então vamos dar um estilo de seleção do azul,a azul, menos que também vá em frente e mude a cor da seleção para o azul primário que temos . Coloque isso no fundo e dê uma gota de sombra. Sombre-nos a 20 em 20%. Isso é bom. Eu ainda não estou muito feliz com a sombra da barra de pesquisa aqui. Eu acho que é um pouco forte demais, então vamos em frente e mudar. Os 15% mudam o azul aqui para talvez 10. Acho que é um pouco melhor. Queremos mudar o texto aqui para fazer uma cor clara novamente. Já que isso vai ser espaço reservado, sinta-se livre para colocar um nove um nove um nove um nove um nove para o código hexadecimal aqui para obter a mesma cor. E acho que a última coisa aqui é o nosso botão de salvamento. Então, quando vamos em frente e vamos para nossos ativos, topo aqui e vá em frente e mover um botão habilitado para a tela aqui, apenas certifique-se de que tem espaçamento adequado, e ele faz apenas mover isso aqui para cima. Talvez também queremos mostrar ao usuário onde seus anúncios. Então, quando vamos em frente e usar uma forma oval, zoom aqui e criar talvez um círculo de 21 por 21 duplicado que está no comando D aqui que faz um maior de talvez 72 por 72 anos. Vamos voltar para o nosso painel de líderes e tentar alinhar estes, colocar o outro em cima deste e, em seguida, apenas alinhá-los juntos no centro para o maior. Aqui, vamos em frente e definir a cor do texto para nosso usando nossa cor local. Vamos escolher esta cor, e então vamos escolher o não, uma cidade de Vamos fazer 30% aqui a menos que troque os outros lábios ou o outro círculo para esta cor aqui. Acho que isso parece bom por enquanto. Podemos até fazer isso um pouco maior. Vou usar o Ault e mudar juntos para manter o centro disso. E eu acho que isso parece bom aqui. Isto é muito grande. Vamos redimensioná-lo para 35 por 35. Vamos nos certificar de que a proporção restrita está ligada e fazer 35 por 35 aqui. Bem, vamos realmente fazer 38 então vá em frente e alinhe isso aqui. E eu acho que isso parece muito bom por enquanto. Só precisamos mudar este texto para Temos aqui para salvá-lo, salvar a localização ou receber o vestido. E lá temos. Essa é a página do nosso mapa. Estamos quase lá. Nós só temos mais três páginas malvadas para ir, e então nós vamos completar isso juntos na próxima seção do curso. 20. Dicas de design de UX: até agora, temos trabalhado no usuário e frase para esta aplicação aqui. Então, se você não está familiarizado com o design da interface do usuário, este aqui é um exemplo do U I ou uma interface de usuário. A interface é com o que o usuário interage. Mas, o mais importante, temos o design da experiência do usuário, que é essencialmente como as pessoas se sentem enquanto estão usando o você I. Vamos mudar rapidamente para aprender um pouco sobre o design de UX e o que é e como podemos aplicar para o nosso projeto. Então, o que é sua experiência de usuário X, ou design de UX é um processo que as equipes de design usadas para criar produtos que fornecem experiências significativas e relevantes aos usuários. Em outras palavras, experiência do usuário. Design é uma primeira maneira humana de projetar produtos, certo? Em vez de apenas pensar em colocar certos elementos em uma página e, em seguida, ligar para você hoje, nós realmente pensamos sobre como as pessoas vão em rastreado com este produto ah, e então voltar e redesenhar e certificar-se de que nós melhorá-lo em um maneira onde as pessoas se sentem bem sobre usá-los ou até mesmo grande. Então aqui está um exemplo de um U I vs o U ex. Ah, você. Eu é o que as pessoas vêem na frente deles. A interface real, enquanto você X é como eles interagem com ela, como eles usam, como eles se sentem enquanto eles estão usando. Então, há muito mais acontecendo com você. Ex grande You X é legível para os usuários, pois isso significa um grande uso de fontes e tamanhos abaixo aqui, você pode ver um exemplo de pobre UX Um, este tipo de letra não é muito acessível ou fácil de ler. E, em geral, tente aumentar seus tamanhos de fonte e também usar fundos fáceis de ler em oposição a algo assim. Ótima. Você desculpas, cores e maneiras que aumentam um contraste melhorado. Então isso é realmente importante aqui. Você quer ter certeza de que você tem alto contraste em seus designs. , À direita,aqui podemos ver um exemplo de pobre você X, onde é difícil ler o texto porque tem baixo contraste a diferença de cor ou matiz entre o primeiro plano aqui, que é o texto e o fundo. Mas vai ser um cinza claro aqui é meio baixo, então para melhorar este texto, você pode fazer o texto um pouco mais escuro. Ou se você pode baixar o fundo e torná-lo mais leve, você pode fazer isso também Para ajudar a melhorar o contraste, espaçamento é realmente importante. Você não quer sobrecarregar o usuário com muita informação em um único local. Ah, tão bom que você desculpa espaçamento para separar o conteúdo. E então, à direita aqui, você pode ver que é meio esmagador. Há muita informação toda espremida em uma área. Hum, então isso é porque não há espaçamento entre o texto ou objetos lá e, em geral, apenas sinta a maioria do seu projetado com espaço em branco. Portanto, não é esmagador a menos que dois pedaços de conteúdo sejam relevantes. Então isso significa que, a menos que você tenha coisas que estão relacionadas entre si, tente separá-los tanto quanto você pode apenas para ajudar a melhorar o U X cool. Então o alinhamento também é muito importante. Ótima. Você desculpa o alinhamento para garantir que as coisas pareçam bem diz que você pode ver aqui à minha esquerda. Aqui, uh, tudo parece agradável, organizado e forrado, enquanto à direita, não parece certo olhar para essas formas porque elas estão completamente desalinhadas. Então, se você se lembra em todo o nosso design, nós usamos um lineman ferramentas muito como eu mencionei antes, porque isso é realmente importante. E a consistência do design ux é outra grande. Você quer ter certeza de que você se mantém consistente com suas cores. Hum, e você é você eu, a fim de melhorar seus ovos. Então, para o nosso projeto, é por isso que seria escolhido o esquema de cores para que ficássemos dentro de uma paleta de cores específica ou esquema de cores para que não confundamos os usuários à direita aqui. Podemos ver que estamos introduzindo algumas novas cores aqui à direita. Então há um verde, a menos que tenha significado. Então, por exemplo, se você quiser dizer parabéns, Então, se você quiser dar, por exemplo, por exemplo, um tipo de sucesso de texto para o usuário, é claro que você pode usar verde, mas tente não para usar muitas cores e para muitos tipos diferentes de fontes e coisas assim, e tentar mantê-lo consistente. Tente manter suas fontes geralmente do mesmo tamanho e manter o conteúdo relevante juntos, certo? Tente manter suas fontes geralmente do mesmo tamanho e manter o conteúdo relevante juntos, Então você vê que o Texas todo o caminho na parte inferior, onde, como ele deve estar mais perto do outro texto porque eles são relevantes, estamos quase terminando aqui é tão grande que você X é fácil de usar, simples como que os botões são acessível e eles são grandes o suficiente para pressionar. E, hum, eu não posso enfatizar isso o suficiente porque eu vi um monte de aplicativos onde o ou o colocar os botões em lugares muito difíceis de alcançar, especialmente em dispositivos móveis. Como você pode ver aqui à direita, geralmente, você quer evitar ter botões usados frequentemente na parte superior. Hum, também não deixe seus botões longe muito pequenos, especialmente novamente no celular, onde você está usando seus dedos para atrair com o design. Se você fizer um botão que é muito pequeno e talvez alguém tenha um tamanho maior do que a média da mão , eles provavelmente perderão esse botão. Então, definitivamente, faça seus projetos acessíveis a todos, onde tantas pessoas quanto você pode realmente, às vezes no design. É muito difícil tornar o seu design completamente acessível a todos, mas é definitivamente melhor tentar torná-lo acessível para todos usarem. Libere seus próprios usuários para que haja muito mais nisso. A adição de nós excelentes aos seus projetos leva tempo e testes para acertar tudo. Então, por favor, seja paciente com isso. Ah, mas você pode começar aplicando o rígido. Seu projeto. E é uma ótima maneira de começar. Então agora é a sua vez de fazer. Ótimo ux. Eu coloquei este pequeno show aqui. Em seu recurso é isso é algo que eu apenas juntei como um pequeno manual para o seu ux que você pode aplicar para seus projetos futuros. Então sinta-se livre para baixar o pdf e apenas tê-lo à mão em algum lugar. Então, da próxima vez que você estiver projetando seu projeto, você pode apenas lembrar-se de algumas dessas coisas. Caso te esqueças. Muito bem, então aprendemos muito sobre design de experiência de usuário, e agora, enquanto estamos projetando nossas simulações, vamos manter você X em mente e voltar para ele e certificar-se de que adicionamos todas as elementos para uma ótima experiência de usuário. 21. Modelos de design para iOS: Certo, acho que estamos prontos para começar a desenhar nosso perfil de solicitação e páginas de serviços. Mas antes de fazermos isso, eu quero ir em frente e saltar para o recurso é para esta lição aqui. Você pode ir em frente e baixar este arquivo de texto. Ah, onde há um monte de recursos é para o que é chamado de modelos em figo MMA. Então essencialmente modelos em figo Mama, assim como muitos outros aplicativos como edição de ala Softwares, permitem que você comece com Primi template s para que você não tenha que fazer um monte de coisas do zero. E não só isso, modelos irão ajudá-lo a ter acesso a componentes pré-construídos que você pode simplesmente arrastar para o seu design e especialmente útil quando se trata de Apple você I crianças para projetar. Então, é claro que eu nos 13 e qualquer outro todos nós que você trabalhou com terá certos modelos . Estamos iniciando um componente de design para ele já construído, então você não precisa ir em frente e redesenhar essa mesma coisa para o material do Google projetado aqui. Então eu incluí um monte de recursos está aqui s então vamos rapidamente passá-los apenas que você possa saber como você pode usá-los para o seu trabalho futuro. Fig MMA tem seus próprios modelos em sites. Se seus modelos de barra fig ma dot com, você será capaz de acessar este site onde eles têm um monte de modelos diferentes como Mobile You I Kits e Instagram templates e um monte de outras coisas legais que você pode usar como Venn diagramas e coisas assim, o próximo recurso aqui é fig. Mais recurso é ponto com, também muito popular. Como você pode ver, há um monte de modelos diferentes que eles têm que você pode começar com eso novamente. Isso ajuda você a entrar em seu design sem ter que começar do zero. E há toneladas de recursos da comunidade aqui, então sinta-se livre para aproveitar isso e economizar muito tempo para seus projetos. E há toneladas de recursos da comunidade aqui, Este é outro site figo, meu crash dot com. Vá em frente e confira. Eles têm um monte de recursos é e você I crianças é baixo. E, em seguida, estes dois últimos recursos é claro, como eu mencionei alguns para o recurso de design da maçã. Eso é daqui? Se você for para baixo, você pode nos ver modelos para que você possa baixar, e eu sei agora que eles não forjaram meu aqui. Mas tenha em mente que você sempre pode baixar a versão do esboço e, em seguida, importado para seus arquivos de figment. E então há um monte de outros se você estiver projetando para diferentes plataformas. Então, já que estamos projetando para um iPhone operar agora vamos em frente e baixar o esboço um aqui, então use o segundo aqui para baixar para esboço e, bem, bem, isso está baixando. Vou ao último recurso aqui. Se você está trabalhando em um aplicativo Android ou qualquer aplicativo que será executado em dispositivos Android ou até mesmo alguns aplicativos da Web, você pode definitivamente aproveitar esta página de design de material aqui do Google. Legal. Então isso são modelos para nós. Então vá em frente e abra o arquivo de desenho da íris que você baixou da Apple e napróxima lição irá em frente e usá-lo em nosso projeto Então vá em frente e abra o arquivo de desenho da íris que você baixou da Apple e na próxima lição irá em frente e usá-lo em nosso projeto 22. Trabalhando em nossas páginas principais: Tudo bem, então, se você tem acompanhado até agora, nós fomos em frente e baixamos o recurso de design da Apple para IOS. Ah, se você não fez isso, vá em frente e siga este passo em nossa última lição. E então, uma vez que você baixar isso, você deve ser capaz de abrir este arquivo aqui mesmo de onde você pode ganhar usar os arquivos de esboço IOS 13 . Acela instalou os fundos que você precisa. Ah, então não se esqueça de ir para este site aqui mesmo. Já o abri. Apple usa esses tipos de fonte ao longo de sua você I Então, é melhor se você ir em frente e baixar todos esses fundos em apenas tê-los em seu sistema. E assim, quando importarmos o arquivo de esboço Ah, não teremos nenhum problema lá. Então vá em frente e baixe essas fontes e então vamos voltar para ele. Então eu vou ir em frente e também ter certeza que eu tenho todas essas fontes e então vamos direto para ele. Eu quero mencionar rapidamente que se você estiver usando o aplicativo web da figo ma, hum, vá em frente e vá para a fig ma dot com. barra de downloads. Ah, e então vá em frente e baixe este instalador de fontes aqui. Se você tem Mac ou Windows, eles têm ambos aqui. Como você pode ver, o aplicativo de desktop não é necessário. Como você pode ver, O instalador do fundo. Mas para que você possa aplicar suas fontes instaladas em sua máquina em sua web figment up, hum, hum, em seu navegador, você precisará usar este instalador de fontes depois de instalar suas fontes. Eu recomendo que você saia do produto que parar e apenas abri-lo novamente para ter certeza que os fundos que instalamos foram aplicados. Então, agora que estamos prontos para importar são US 13 arquivo esboço aqui, vamos para figo MMA e depois voltar para os arquivos principais. A página principal aqui. Eu já o importei. Mas se você não ir em frente e abrir um esboço US 13 e, em seguida, vá em frente e apenas arraste este você I elementos projetados em mais guias direita para o seu mapa de figo. Ah, eu deveria tomar um segundo lá para convertê-lo em um arquivo de invenção, já que este é um arquivo de esboço. Mas uma vez que essa etapa é concluída, você pode ir em frente e abrir seu arquivo aqui. Então, a partir daqui você tem acesso a cores, têxteis de áreas seguras da Apple, a interface IPAD, bem como a interface do iPhone. Neste momento, estamos interessados na interface do iPhone. Aqui está, então vá em frente e abra. E então estamos olhando para aplicar algumas coisas agora. Eu só vou arrastar meu esboço de marcação aqui. Você verá daqui que nestas duas páginas, queremos ter barra de navegação aqui e nestas três páginas. As páginas principais terão uma barra de toque para alternar entre essas páginas. Então vamos em frente e arrastar na barra de navegação e em uma guia ou em nossos projetos a partir das diretrizes da AL US 13. Deixe-me ir em frente e zoom aqui, e então isso é provavelmente o que estamos procurando. Aqui temos as barras de navegação e as barras de status ar aqui em cima. Então, a maneira mais fácil de realmente aplicá-los em nossa obrigação é simplesmente ir em frente e usar componentes. Estes lá estão. Todos esses elementos já são componentes, mas bem, você pode fazer é ir em frente e usá-los em seus próprios projetos. Acho que agora só estamos interessados neste quadro específico aqui. Então, por que você não vai em frente e apenas pressione o comando, veja em todo o quadro, então certifique-se de ter tudo selecionado. Usa isto. Você elementos, barras de traço e vá em frente e copie a coisa toda. Usando o comando, veja? E então vá para o seu projeto aqui. Vamos em frente e criar uma nova página e nomeá-lo IOS você. I componentes e eu ir em frente e apenas colar isso aqui. Então agora podemos usar isso em todos os nossos projetos para que possamos usar esta barra de navegação aqui. Então por que não vamos em frente, vamos em frente e arrastamos isso para fora? Vamos em frente e também arrastar esse status para aqui. Aqui, vejo que temos as barras de cima também. Queremos três opções no nosso. Então vamos em frente e selecionar este aqui e arrastá-lo para fora também. E então vamos em frente e agora selecionar cada um deles separadamente e criar um componente a partir deles. Faça isso para a barra de status, e então vamos fazê-lo para a barra de navegação aqui e por último ou Tabor aqui. E agora, se eu pudesse voltar para a minha página de marcações aqui, vamos nos concentrar em Nossa página principal está aqui. Vamos passar para o topo ativos aqui e, em seguida, de onde temos IOS você I componentes. Vamos arrastar uma barra de status. Por favor, sente-se no topo. Vamos em frente e usar todas as cópias de arrastar em cada uma dessas páginas, e precisaremos de uma barra de navegação em nossa página de perfil. Então vamos em frente e arrastar isso para dentro Agora verá que está cobrindo minha barra de status. Então é preciso atalho na Fig Mayes que você pode usar o comando e os colchetes para mover camadas para cima e para baixo. Então, basta ir em frente e pressionar o comando e o colchete de abertura, e isso irá mover sua camada que você selecionou abaixo da outra. É isso que queremos aqui. Vamos em frente e apenas arraste isso para a direita aqui, e então novamente use o comando e o colchete de abertura para colocá-lo abaixo da camada que queremos . E por último, vamos em frente e arrastar guia ou para todas as três páginas, porque esta será a nossa estrutura de navegação . Então usamos essa barra superior para alternar entre essas três páginas. Vamos adicionar os ícones aqui na próxima lição, mas por enquanto, vamos em frente e apenas renomear nossas páginas de acordo. Então o perfil deste e os serviços deste vamos em frente e voltar para o meu esboço aqui. Sim, isso é que parece certo. Nós só temos um botão de edição aqui também. Então vamos em frente e adicionar isso também. Vamos apenas ir em frente e excluir este quadrado bem aqui, bem como o aqui. E vamos em frente e fazê-lo a partir daqui está bem e então neste aqui, vamos apenas ir em frente e adicionar e em um botão. Agora, tenha em mente, estou usando a fonte de exibição SF Pro. Essa é a frente que o IOS usa agora. Então vá em frente e escolha isso. E então vamos em frente e redimensionar isso para 24 22 anos e movê-lo para cá. Vamos mudar o Phil usando nossos estilos de cores também. O azul que temos, acho que parece bom. Então agora nós configuramos nossas barras de navegação são barras de toque e nossas barras de status também. Essa é a linha de base aqui que precisamos na próxima. Ouça, nós vamos voltar e começar a projetar nossa barra de tabulação aqui um trabalho da Zarrella em nossa página de solicitação . 23. Crie uma barra de guia para navegação: Tudo bem. Se você tem acompanhado até agora, nós configuramos nossas três páginas principais usando alguns dos componentes do Iowa. Se você não seguiu junto novamente, vá para a pasta simulada UPS e o recurso é para este projeto e, em seguida, abra marcações e vá em frente e abra a lição que está mais próxima a esta e apenas importe isso e siga junto. Certo, agora é hora de projetar nossa página de pedidos. Mas antes de fazermos isso, vamos em frente e configurar nossa guia são corretamente, então vá em frente e abra. Nosso recurso é para este projeto. Quando estiver aqui, abra a pasta Ícones e abra o Tabor. E então você verá três ícones aqui para o nosso toque nosso. Mas queremos ir em frente e realmente adicionar estes e nossos componentes em vez dessas instâncias aqui. Então vá em frente e apenas como uma das barras superiores aqui e clique. Vá para o componente mestre aqui. Depois de fazer isso, você pode ir em frente e agora arrastar esses ícones para aqui. Vamos em frente e apenas arrastá-los e, em seguida, vamos continuar e segurar shift e redimensioná-los aqui e clicar nesta proporção de restrição. E então vamos dar-lhes uma largura de 32. Vou clicar este ano e adicionar uma grade de layout e vamos escolher Kahlan em uma contagem de três. Mude a cidade de Kobe para 5%. Vamos ir em frente e fechar isso, e é aqui que está. As grades ficam à mão. Vamos em frente e apenas dobrar rápido aqui e mover esses ícones de acordo. Vamos querer Ah, nossos serviços passados aqui. Queremos trocar estes dois para que tenhamos o nosso pedido metade aqui e, em seguida, o nosso perfil aqui também . Abrir ou painel de camadas. Então vemos o que estamos fazendo aqui. Vamos nos livrar desta cor de tenda a 10ª cor neste e a cor de dezenas aqui. E então vamos em frente e apenas centralizar Estes vamos selecionar ou grade aqui e mudar a sarjeta para que é melhor e, em seguida, ir em frente e apenas centralizar aqueles junto. Isso parece bom. Vamos adicionar um texto para cada um deles tão usado T Vamos fazer tamanhos re perfil, também. cada 14 e vamos em frente e mover isso para cima eu acho que podemos mover nossos ícones um pouco para cima . São 25 pixels. A mesma coisa aqui e por último aqui. E então use o comando D aqui e mais uma vez. Certifique-se de que está alinhado. Vamos mudar o texto aqui. Faremos serviços e eu farei pedidos. Vá em frente e apenas centralize aqueles longos. A mesma coisa aqui. Vamos em frente e agora remover o layout. Bom. Aqui. Acho que parece bom. Queremos uma maneira de mostrar qual toque está ativo. Certo, para mostrar em que página estava, teremos uma cor de seleção diferente com base no toque selecionado. Então vamos ótimas três instâncias para cada uma delas que está sendo selecionada. E para fazer isso, eu vou apenas ir em frente e selecionar todo o meu componente aqui, usado velho e arrastar para longe outro aqui em baixo e, em seguida, apenas usar o comando d mais duas vezes . Então você tem o componente principal aqui e, em seguida, três instância desse componente. E então eu vou criar um componente de cada um desses componentes celestiais. E eu renomeei este para guia R barra perfil selecionado selecionar este aqui criar componentes renomeados para Barra de guia barra pedido selecionado e, em seguida, por último, aqui estamos indo para criar um componente aqui e fazer toque barra barra serviços selecionados. E lá vamos nós e um jovem estamos fazendo isso para que possamos facilmente alternar entre cada um em nossos projetos simulados. Então agora eu vou para aqui para o perfil de barra superior selecionado, e vamos em frente e selecione ou ícone aqui. Altere a cor de seleção, usando os estilos para nossa cor primária. Mesma coisa para o texto aqui e, em seguida, aplicando esta a cor primária. Vamos fazer a mesma coisa aqui, mas por solicitação. E por último, vamos fazer a mesma coisa para os serviços selecionados mais uma vez. Eu só vou entrar aqui e ter certeza de que tudo está centrado. Eu acho que agora tudo centrado perfeitamente. Vamos voltar ao nosso discurso de marcação agora e agora. Como você pode ver, eu tenho esta bela guia ou aqui mostrando páginas diferentes. Vamos em frente na nossa página de pedidos aqui. Boa palavra, diz Tab ou aqui. E então vamos mudar para Iose. Você tinha componentes tocar ou e, em seguida, fazer a solicitação selecionada. Lá vamos nós e a menos que através da mesma coisa para perfil, Vá em frente e clique nesta barra de guias e fazer placa superior. E o perfil deste foi selecionado. E por último, mas não menos importante, vamos fazer serviços Tabor selecionados. Lá vamos nós. Então, temos um painel de guias agora projetado para cada página. E então vamos em frente e pular para projetar nossa página de pedidos na próxima lição. 24. A página de solicitação: para começar em nossa página de solicitação aqui. Muito rápido. Vamos mudar para o nosso desenho aqui. Primeiro , Primeiro , queremos uma pequena recarga ou o ícone de atualização deles aqui. Queremos que o nosso pequeno trecho de mapa aqui seja capaz de tocar e ir ao nosso mapa A para definir o nosso endereço. Hum, E então vai ser bom para mostrar um pan de são atualmente selecionados endereço, eu acho. E depois queremos um pedido de lavanderia bem aqui e com um cartão de loja aqui. Ah, bem, vá em frente e desenhou o cartão da loja mais tarde. Por enquanto, vamos em frente e começar todo o layout aqui. Então vamos trabalhar nosso caminho de cima para baixo. As primeiras coisas primeiro. Quero ir em frente e criar um pequeno retângulo aqui. Basta ir em frente e escolher o tamanho de talvez 2 50 pixels aqui em termos de alturas, certifique-se de que o com está totalmente tomando o espaço horizontal aqui. Vamos inserir o mapa aqui, mas antes disso, testei o desenho da caixa do mapa. Acho que parece um pouco melhor do que o mapa do Google. Pelo menos para aplicativos iPhone, talvez um aplicativo Android. Seria bom, Mas aqui eu quero ir em frente e realmente mudar meu mapa nesta página e, em seguida, nesta página, usando um tipo diferente de mapa. Então vamos em frente e realmente rapidamente voltar para a nossa página de mapa aqui. Vamos voltar ao retângulo que está criando nosso mapa. E então vamos em frente e executar o criador de mapas. Conecte-o novamente e desta vez escolha os tablóides como caixa de mapa. Vamos fazer um nível de zoom fora de 15 e eles apenas ir em frente e fazer mapa. Acho que parece um pouco mais limpo. Eu só quero mudar a sombra aqui do meu retângulo aqui. Sim, então para a primeira conversa aqui, eu só quero mudar a cidade aberta para talvez vamos fazer 7% aqui. Está em dois fortes. Acho que parece bom. Vamos aplicar a mesma coisa aqui com o mapa. Vamos em frente e selecionar este retângulo aqui e executar o fabricante de mapas Blufgan aqui, ir para a caixa de mapa. Vamos fazer o mapa aqui. Uma coisa aqui, você vai notar que está cobrindo minha barra de status, então vamos usar o comando e o suporte de abertura aqui para movê-lo para baixo. Coisa que parece boa. E agora minhas barras de status meio que misturado com o mapa s. Eu vou criar um pequeno retângulo apenas para cobrir tipo de parte superior aqui. E vamos em frente e mover isso para baixo da minha barra de status. Vamos bloquear a camada da barra de status. Vamos em frente e fazer este retângulo talvez um pouco maior aqui. Acho que algo assim funcionaria. E então vamos em frente e mudar o Phil para branco cor aqui, dar uma cidade fora de 50% e vamos adicionar um efeito fora do borrão de fundo. Vamos bater este borrão para talvez 25. Faça 30 aqui. Isso é bom. Então agora minha barra de status está se misturando tanto com meu mapa, que é o que eu quero novamente. Isso é parte de você X. Você quer ter certeza de que seus usuários são capazes de ver sua barra de status ah sem ele se misturar em seu próprio aplicativo. Então vamos em frente e agora mudar de volta para o meu recurso é pasta uso indo para ícones entrar em solicitação. Vamos em frente e arrastar esses dois ícones e aqui primeiro vamos em frente e restringir as proporções e redimensioná-los para 38. E vamos em frente e apenas como tudo isso e trazê-lo aqui. E eu vou colocar minha dor no mapa em algum lugar por aqui e ir em frente e mudar a cor de seleção muito azul em um efeito de sombra. Talvez mudar o porquê aqui para oito. Vamos fazer 10 Blurt disse. O Borrão para 10. Talvez ele pague a cidade para 15. Vamos ver como isso fica melhor. Vamos em frente e também dar uma seleção de cor azul para minha bunda aqui. Agora vamos em frente e movê-lo para cá. E eu quero ir em frente e também dar isso de sombra. Mas desta vez fazer embora Pacenti ou o Y zero fazer o ventilador talvez 10 em. Diminuir a droga de uma cidade para talvez 15%. Eu acho que isso é bom para agora isso, mas poderia definitivamente ser um pouco mais visível agora se eu mudar para os meus projetos aqui. Queremos o pedido de lavanderia Hap aqui, então vamos em frente e criar um retângulo talvez daqui. Embora não fiquemos na minha conta ou apenas um foi a desgraça aqui e nos certificamos que não está cobrindo meu Tabor. Acho que isso é bom. Vamos trocar o Phil dois branco e esperar. Também enfraquecer. Separe nosso raio de canto aqui e faça com que este seja 20. E então podemos fazer 20 neste também. Lembro-me de uma vez que você segura Ault uma vez essencialmente você está separando seu raio de canto para cada canto para que você não precisa segurar Ault. Uma vez que você veja este pequeno círculo dentro do nosso controle de raio de fronteira aqui. Então, agora, cada canto agirá independente do outro, então você pode ir em frente e redimensioná-los sem ter que se manter velho. Vamos adicionar uma sombra de fazer menos 10 ou realmente menos seis Aqui, aumentar o borrão para talvez 15 ou mesmo 20. Eu não baixei o OPC para talvez 8%. Acho que parece bom. Eu definitivamente não gosto da minha bunda aqui, então o que eu vou fazer é realmente eu vou embrulhar isso em um oval, então vamos em frente e usar o ok. E agora estou colocando isso dentro dessa moldura, então não quero fazer isso. Então vamos em frente e fazer isso aqui 48 por 48 e então redimensionar isso, também. Vamos fazer 32 ou mesmo 30 por 30. Vamos entrar e mudar o preenchimento para este para branco, e, em seguida, certifique-se de selecionar o quadro de atualização inteiro aqui e, em seguida, movê-lo para aqui . Use o comando fechar colchete para trazê-lo para cima. Isso parece bom. Só vou usar o comando G para agrupar estes e depois colocá-lo aqui e vamos em frente e finalmente em uma sombra de zero ex e por que, em apenas um borrão de 10 nós podemos fazer o borrão 15 e obedecer. A cidade de 15 é baixa. Isso parece melhor. Vamos entrar aqui e remover essa sombra do ícone de recarga ou do ícone de atualização aqui. Só queremos que se aplique ao círculo aqui. Ah, e pensando melhor, talvez eu queira realmente aumentar. Eles vão pagar a cidade para 20%. Acho que parece um pouco melhor. Sinta-se livre para brincar com os tipos de banquete de coisas só para ver o que parece melhor. O que parece certo para você. Agora vamos em frente e adicionar um texano aqui e vamos fazer você realmente ir em frente e fazer Choose Laundry Store e mudou o tamanho da fonte ano para talvez 24 22 e movê-lo aqui. Vamos agrupar estes juntos e depois ir em frente e apenas centralizá-los junto e vamos em frente e criar um retângulo. Você quer fazer a 95 por 95 e apenas centrar isso aqui? Isso é muito bom. Uh, eu vou segurar o turno e tudo isso realmente torná-lo um pouco menor. Talvez precisemos de 75 por 75 e depois no raio da esquina de 20. Agora vamos em frente para os meus bens aqui. Vá para componentes locais, abra componentes e, em seguida, vá em frente e arraste um desses botões. E aqui o estado habilitado e centro esse tempo e, em seguida, alterar o texto para solicitar o serviço . Vamos para o painel de camadas e certifique-se de que faz parte deste botão faz parte deste grupo . Basta ir em frente e colocar dentro daqui também. Então, sim, tudo isso agora está em uma camada ou um grupo. Legal. Então, lá temos. Acho que isso é muito bom. É um bom começo. Se eu voltar, temos quase todos os elementos aqui. Se eu voltar, Vamos começar a projetar o cartão da loja na próxima lição. Então sinta-se livre para ir para a próxima lição agora para começar a projetar nosso cartão de loja ah aqui. 25. Portos de loja: Muito bem, agora estamos prontos para desenhar o nosso cartão da loja aqui. E nós vamos, claro, criar um componente para isso para que possamos reutilizá-lo e fazer vários no futuro , se você precisar. Vamos em frente e clique aqui. Comando usado, veja aqui e vá para nossos componentes. Vamos em frente aqui e colar aqui. Agora, claro, ele está se misturando com o fundo aqui, então eu vou em frente e dar-lhe um pouco de branco. Vamos clicar nele e primeiro transformá-lo em um componente. Então este é um componente agora, então vamos em frente e adicionar um retângulo dentro da coisa bem aqui seria bom. Ah, é aqui que a nossa imagem irá. Vamos ir em frente e realmente esticá-lo para talvez uma altura de 150 pixels. E eu só vou mudar o Phil para mais escuro aqui. E então vamos em frente e dar a isto um raio de fronteira de 20 também. Parece estar aqui novamente para o primeiro canto usado Ault. Para que você separe o raio da fronteira é aqui. Se você não consegue acertar, você pode sempre duas semanas que daqui está bem, então eu acho que parece bom. O que mais precisamos em nosso cartão de loja? Vamos descer aqui. Claro, este será o lugar onde a imagem vai. Precisamos de um nome de loja, um dólar por item, tempo de entrega e a classificação. Vamos trabalhar em cada um deles separadamente. Então, primeiro, vamos começar com o nome da nossa loja. Eu vou aqui, duplicar isso e fazer dólar por item. Por enquanto, vamos em frente e colocar $0 por item. Lembrem-se, isto é apenas um componente. Em cada caso, seremos capazes de mudar isso e ajustar. E vou redimensionar este também. Talvez 14. É muito bom. Nós provavelmente podemos trazer isso para baixo um pouco mais, então nós damos mais espaço para nossa imagem Muito bom. Vamos continuar e apenas duplicar este aqui e manter um espaçamento de 15 dos lados. E vamos mudar este um muito zero dias e, em seguida, usar escrever uma linha para este, então vamos esticar isso se eu quiser, nós queremos usar a linha esquerda aqui e, em seguida, ir em frente e esticar essa linha esquerda usada. Na verdade, não queremos esticar todo o caminho. Nós queríamos apenas aqui e vamos redimensionar este 12 talvez 20. Isso é melhor. Vá em frente e duplique este aqui em cima e faça zero estrelas ou na verdade zero. Isto será para a nossa classificação aqui para que possamos fazer 0.0. Então vamos em frente e apenas amplie. Então vamos em frente e criar uma estrela para a minha leitura. Aqui está bem novamente, A coisa bonita sobre figo avarento. Você pode criar uma estrela a partir das ferramentas de forma aqui. Vamos em frente e desenhar um. Will segurando turno, talvez um tamanho de 25 por 25. Eu só centralizo isso aqui junto com este ah legal, e minhas ferramentas estelares. Posso ir em frente e aumentar e diminuir a contagem. Vamos manter um cinco. Podemos ir em frente e fazer a loja ter uma proporção alta ou menor, uma indo mais nítida e também podemos mudar o raio da fronteira aqui. Agora, isso é demais. Então o que eu vou fazer, eu não quero que eu não quero ir com as bordas afiadas que ele tem agora. Então podemos ir para este lado aqui e até atribuir um raio de canto usando o decimal. Então esse ponto zero vamos tentar o seu 0.5 aqui. Acho que isso parece bom. Agora nosso começo pode ter vários estados. Pode ser ótimo, como este pode ser meio cheio, e então talvez você possa ser totalmente preenchido como um exemplo no meu esboço aqui eu tenho ah, totalmente estrela de campo. Mas se eu quiser ter apenas 1/2 estrela de enchimento, ele pode fazer isso também. Então, quando criamos componente a partir disso, mas tenha em mente, você não pode criar componentes dentro de outro componente. Hum tão me queria. Vá em frente e arraste esta estrela para fora daqui e, em seguida, vá em frente e apenas dar-lhe um preenchimento cinza mais claro. Aqui, talvez essas cores obtenham Vamos criar um componente bem aqui. Vamos em frente e só zoom. E só para ver minha estrela aqui, eu vou fazer o comando D e então apenas colocar essa instância dentro do meu componente e criar mais duas estrelas para meus outros estados. Então eu vou nomear um cheio, o outro meio cheio e o último não preenchido. Então é para o não preenchido aqui, vamos deixar como está. Então, para o meio preenchido, vamos em frente e dar-lhe uma cor de ouro aqui. Vamos em frente e criar algum tipo de cor dourada aqui. Claro, eu não posso ver isso porque é coberto pelo preenchido. Então vamos em frente e apenas esconder este aqui. E acho que algo assim funcionaria. Vou copiar o feitiço e aplicá-lo ao outro também. Então o preenchido funciona sem preenchimento. Um funciona, e então nós só queremos fazer a metade cheia. Uma vez. Vamos tirar vantagem sobre o nosso dos grupos booleanos, criando um retângulo aqui sobre a estrela como esta. Primeiro, vamos mudar a cor dos retângulos, também, esta cor aqui com um código hexadecimal de apenas sessenta, e então escolher o retângulo e 1/2 forma preenchida e usando nossos grupos de bullying, vamos clique interseção eleição. Isso parece bom. É o suficiente. Quero usar isso aqui. Vai manter velho trazer uma cópia aqui. Acho que isso parece muito bom. Eu só quero ir em frente e centralizar isso junto, e nós movê-lo um pouco aqui. Perfeito. Legal. Acho que estamos prontos para adicionar isso ao nosso design. Vamos apenas ir em frente e renomeá-lo para cartão de loja. E vamos também renomear este também. Só a loja parece boa. Vamos voltar para as nossas marcações e vamos em frente e apagar este quadrado aqui. Em seguida, passar por ativos aqui e depois. Agora você vai ver que temos este cartão da loja aqui. Vamos arrastá-lo para dentro, centralizá-lo aqui e apenas ir para as camadas. E eu quero ter certeza de que eu adicionei ao meu grupo logo abaixo. Escolha loja de lavanderia. Tudo bem, então parece que o fundo aqui está completamente misturado com o fundo aqui. Então vamos em frente e selecione nosso componente ou a instância aqui. Vá até os efeitos e vamos adicionar uma sombra. Talvez com um Y de AIDS. Vamos tentar 10 e vamos fazer um bluer off. Talvez 30 ou realmente engraçado funcionaria. Eu não vou cair o raio para talvez uma espécie de oap uma cidade aqui talvez 10% renovar 12 coisa que parece bom. Então vamos em frente e preencha os dados aqui. Vamos mudar o nome da loja aqui também. lavanderia do Jack. Estou apenas colocando nomes de lojas aleatoriamente aqui. Vamos fazer uma classificação de 3,5 e um tempo de retorno de Steve dois dias e depois mudar o orgulho do dólar . E talvez vamos fazer $1 item. Certo, então agora queremos colocar a imagem aqui neste retângulo aqui. Vamos em frente e usar a ferramenta aqui. Colocar imagem. Então vamos em frente e escolher imagens, cartões de loja, e eu vou apenas ir em frente e escolher uma dessas imagens aqui. Este parece bom. E agora, se eu passar o mouse sobre um determinado objeto ou forma aqui, como este retângulo e eu clicar, ele irá em frente e realmente colocar essa imagem dentro desse retângulo. Então não, vamos em frente e apenas duplicar isso duas vezes um vai para aqui e o outro vai para o outro lado. Aqui. Deixe-me esconder meu perfil aqui só para que possamos editar isso. Vou mudar o nome para roupa de rosas. Vamos e, em seguida, dar-lhe uma classificação de 4.5. E então podemos mudar o início aqui selecionando-o. E agora, se você clicar nisso, podemos realmente ir em frente e escolher qual deles estamos mostrando. Agora, estamos mostrando esse Intersect, mas vamos esconder isso e fazer um completo. Isso pode ser alterado tempo de retorno para um dia, e eu faço um dólar 20 por item. Vamos para este aqui também, também, e mudá-lo para a lavanderia do Bob. Dê-lhe uma loja. Eu não sei. Vamos para 2.5. Mudar o tempo de resposta dois, talvez três dias e depois mudar a loja aqui escondendo meus outros dois para os não preenchidos. Não mude o preço para talvez 80 centavos por item. Então, para substituir essas imagens, você pode apenas ir em frente e clicar duas vezes, Ir para a imagem aqui, e então escolher imagem com fazer outra imagem. Lá vamos nós e depois fazemos e depois fechamos isso e fazemos este aqui, escolhemos a imagem e depois vamos escolher esta. Lá vamos nós. Então agora vamos em frente e apenas colocar isso em nosso quadro aqui ir e ter ambos selecionados e , em seguida, arrastá-los para o pedido e, em seguida, para o grupo. E depois o quê? Nós os selecionamos. Vamos em frente e apenas restringimos as proporções e mudá-las, também. Talvez 2 55 na verdade, o começo em 2 a 45. Apenas mova-os ao redor do outro aqui. Certifique-se de que tem o mesmo espaçamento. Vamos selecionar todos estes três e certificar-se de que eles estão alinhados verticalmente e parece que eles estão. Por último, vou em frente e diminuir a sombra deste para fazer. Pode ser um Y de cinco e um borrão de 10 talvez apenas escolhendo uma cidade de 6% em vez disso. E a mesma coisa aqui. Acho que isso parece bom. Nós podemos até mesmo ir em frente e trazer este ícone de atualização para aqui e ter um conjunto ou o resto do grupo aqui. Lá vamos nós. Acho que parece melhor. Livre-se desse círculo e acho que fica melhor. Então, lá temos. Essa é a nossa página de pedido. Antes que eu me esqueça de fazer isso. Eu vou em frente e bem, primeiro, vamos em frente e desmaiei. a página de solicitação e minha página aqui. Vou até a página de serviços e certificar-me de que também desmoronou. Eu vou em frente e apenas anti-higiênico minha página de perfil. Legal. Então agora acho que estamos prontos para saltar para as próximas páginas aqui. 26. A página de perfil: Certo, então acho que estamos prontos para começar a desenhar ou uma página de perfil aqui. Parece bem simples. Temos uma pequena imagem para o usuário aqui com o nome e e-mail aqui e botão de edição aqui. E então temos um pequeno widget de mapa fora do endereço deles. Temos suporte ao pagamento e, em seguida, sair. Então vamos começar a projetar esta página aqui. Então, na página de perfil aqui, eu vou seguir em frente e primeira coisa, fazer esta edição, mas em um pouco menor, menos também. Tamanho da fonte de 20 em Alterou a maneira de fonte muito média aqui ou menos, você semi negrito, mais melhor. Então vamos em frente e primeiro a ou mais aqui para aquela foto de perfil, e nós poderíamos fazer 100 100 para o tamanho. Vamos manter um espaçamento de 25 pixels da esquerda. Vamos em frente e adicionar. É preciso o primeiro e o último para o nome deles. Basta ir em frente e arrastar uma cópia usando o antigo e, em seguida, fazer e-mail no domínio com. Vamos em frente e mova estes para baixo e isso parece bom. Vamos apenas redimensionar este 12 talvez 18 e o nome aqui para 22 para adicionar uma foto de perfil aqui. Na verdade, vou até os meus plugins aqui. Faça a gestão de plugins. Vamos procurar por todos os plugins aqui, e eu vou usar esta vinícola aqui chamada avatares. Se você pode encontrá-lo, basta ir em frente e procurar avatares e, em seguida, instalar este aqui. Uma vez instalado, podemos voltar ao nosso projeto e, em seguida, com o seu, uh, uh, círculo ou lábios selecionados, ir para plugins e, em seguida, fazer avatares legal. Então eu acho que isso parece bom. Uh, seguindo em frente. Temos a nossa opção de mapa, e daí? Vamos em frente e usar sal neste retângulo com mapa já lá dentro e trazê-lo para cá . Basta redimensioná-lo até termos espaçamento de 25 em ambos os lados. Isso parece bom. Vamos em frente e redimensionar a altura 200. Dê-lhe um raio de fronteira de 20. Vamos descer um pouco. E então vamos mover isso ou copiar este ícone para apenas colocá-lo no meio aqui um pouco acima do meio. Vamos agrupar estes juntos. Queremos também adicionar o endereço aqui. Então, por que não vamos em frente e duplicamos esta caneta aqui e então talvez torná-la, uh, claro, restrita e depois fazer 20 héteros? Isso é certo. 18 em termos de largura. Eu só vou dar zoom aqui e vamos deixar a linha aqui, fazer uma mensagem. 1234 Plano de endereço apenas como um espaço reservado. E vamos em frente e fazer uma fazenda de 18. Mova isto para cá. Acho que isso parece bom. Só vou descer um pouco. E então eu acho que nós só precisamos de pagamentos, apoio e logout aqui. Então vamos criar outro retângulo aqui e apenas fazer 325 por 55. Talvez eu faça um raio de 10 aqui. Traga um pouco para cima. Talvez um pouco mais baixo do que isso, e vamos mandar uma mensagem. E então vamos fazer o pagamento. Encontre isso aqui. Então, vamos primeiro alterar o preenchimento dois primário alterar o preenchimento do texto para Branco no ir frente e duplicar outro aqui. Faça isso maior e deixou a linha direita uma linha. Vamos fazer eu estou usando velho ou opção e, em seguida, fazer a chave oito para inserir esses pequenos círculos este novo 1234 e que tipo de representa o cartão de crédito ou a opção de pagamentos. Acho que podemos até fazer isso um pouco maior, como vamos fazer 65 aqui e depois centralizar esse tempo. Lá vamos nós. Vamos em frente e agrupá-los juntos usando Command G e vamos em frente e nomeá-lo botão Pagamento, O que é duplicado e temos suporte. Então, vamos dar apoio. Além disso, deixar o texto aqui e vamos voltar para a nossa praia de arrasto aqui. Copie isto. Volte aqui e cole isso aqui em Basit. Mas eu quero apenas ir em frente e apenas arrastar isso aqui Em vez disso, vamos em frente e redimensionar isso, também. 22 foram na verdade vamos fazer 28 e, em seguida, linha vertical e o que temos aqui temos, tipo, 20 raide. Sim, vamos fazer, uh, movê-lo até que ele esteja aqui. Vamos continuar e fazê-lo durar, mas em cópia aqui também. Hum, então vamos em frente e primeiro certifique-se de que é parte deste grupo aqui em um renomeado que grupo para apoiar Button e a menos que fazer logouts em, vamos apenas criar uma pequena seta Icahn aqui e agora você mal pode vê-lo. É muito pequeno, então vamos em frente e fazer a espessura três. Isso parece bom aqui. Vamos mudar a cor do traçado para branco. Então eu acabei de ampliar aqui. Mas como você pode ver, que estas bordas meio ásperas, enquanto aqui temos um tipo redondo de bordas agradáveis ou ou cantos. Então vamos em frente e apenas clique duas vezes nesta linha aqui para a seta. Portanto, este passo é importante. Vá em frente e selecione este ponto aqui. Eso Podemos aplicar alterações apenas a este ponto. Então vá para os três pontos aqui e depois faça uma rodada. Legal. Então isso tem um capas arredondado. Bem ali. Você pode fazer isso em qualquer linha. Bem, vamos diminuir o zoom e fugir para voltar de lá. Vamos nos certificar de que isso está realmente centrado aqui. Parece que agora está centrado. Vamos apenas ir em frente e mover a seta dentro do último botão aqui mudou o nome para logout botão, e eu acho, deixe-me ver como é o meu espaçamento. Posso movê-lo para alguns pixels. Certo? E isso é uma linha. Acho que funcionaria. Uma coisa que podemos fazer aqui, podemos ir para o nosso botão de logout e mudar a cor primária para a laranja. Aqui. Isso significa que esta é uma opção de logout? Sinta-se livre para brincar com isso e ver o que parece bom. Mas eu acho que olhando para o meu esboço aqui, nós temos muito perto do que queremos para o nosso design. Eu só vou ir em frente e zoom completamente para ver onde estamos. Sim, acho que parece bom. 27. A página de serviços: Tudo bem, estamos quase terminando nosso projeto aqui. Como você pode ver, concluímos nossa página de bagagem, nosso tutorial, nosso tutorial, pagamentos de página e página de mapa. E até passamos por nossas solicitações e página de perfil e até adicionamos restrições para nosso design, o que é ótimo. Então, agora, prontos para começar a projetar nossa última página aqui, vamos em frente e apenas ampliar aqui e vamos em frente e abrir nosso esboço que tínhamos . Então esta página é super simples. Essencialmente, só queremos uma lista. Ah, um monte de serviços ou pedidos anteriores ou pedidos que o usuário fez, ou mesmo um ativo. Então, se eles têm um serviço de lavanderia funcionando ativamente para baixo, queremos mostrar isso aqui também para que o usuário possa ver qual é o status lá fora da lavanderia. Então, como você pode ver aqui, vamos colocar isso em um tipo de formato de lista. , Para todos os serviços que eles têm então vamos dar umzoom aqui e ver o que exatamente queremos ter na nossa um lista ali. Então, queremos armazenar o nome. Queremos uma data na hora em que o pedido ocorreu. Analisamos o estado atual e, em seguida , um pouco de preço, uh, texto aqui para mostrar a eles quanto eles foram cobrados. E então nós só queremos ter um pequeno ícone de cenoura aqui. Apenas permita que eles entrem nesse pedido e talvez Seymour informações sobre isso. Ou talvez entre em contato com a loja ou um monte de outras opções que você pode adicionar para seu próprio design . Nós não vamos entrar nessa página neste curso, mas, mas, hum, vou deixar isso como um exercício para você. Então, se você quiser ir em frente e projetar uma página para que eles vejam seu pedido, por todos os meios, vá em frente e faça isso. E você pode até enviá-lo para mim por e-mail. E ficarei feliz em fornecer alguns comentários para você. Incrível. Então vamos voltar para a nossa simulação aqui em cima, e a primeira coisa que eu quero fazer é criar um componente para cada um dos meus itens na lista. Claro, eu acho que agora você sabe onde colocamos nossos componentes. Está na página de componentes aqui. Vamos até lá e vamos em frente e criar um retângulo usando o R 2. E eu estou apenas criando um retângulo primeiro. Vamos em frente e dar-lhe um preenchimento de branco. Na verdade, vamos em frente e mudar a largura para 3 75 Eu acho que é a largura do tamanho do iPhone que estavam trabalhando com aqui. Se eu não estou confundindo, sim, 375 por 812 Então vamos voltar aqui. Vamos fazer 375 e vamos fazer 100 e 10 para a altura aqui. Acho que isso é bom. Eu já tenho algum texto aqui, Então, como designer, você sempre quer reutilizar componentes ou reutilizar elementos diferentes em seu design em vez de criar novos apenas porque economiza uma tonelada de tempo. Então vamos em frente e selecione algumas coisas aqui como três textos. Talvez ainda assim eu ache que isso é bom. E, em seguida, use o comando, veja para copiá-lo e, em seguida, vá para este retângulo aqui e cole isso. E aqui agora, isso não é um componente. Vamos selecionar tudo aqui e usar a tecla de opção de comando, e isso o torna um componente. E agora enfraquecer, cavar e mover as coisas. Então acho que podemos ter o nome da loja mais perto aqui. Vamos ver o que tínhamos em nosso design ainda algo semelhante. E temos um preço e status. Então vamos fazer o preço. Vamos em frente e mover isso aqui. Basta dar um pouco de espaçamento para nossas cenouras e então vamos em frente e mover isso aqui em vez disso e em vez disso e deixar a linha. Vamos em frente e alinhar isso ali. Veja que tipo de espaçamento temos de 15 por 15 aqui em termos de espaçamento da esquerda e da parte inferior. E vamos em frente e apenas fazer o mês do dia que você é e que pode ser devido H H m m para representar horas e minutos. Parece bom. Então vamos em frente e ter certeza que isso aqui está centrado verticalmente perfeito. E então eu vou duplicar este texto usando o comando D direita. Alinhe-o e, em seguida, apenas movê-lo todo o caminho para onde eu tenho o meu cifrão Ícone. Vamos mudar o texto para status. Legal. Acho que isso é bom. Nós só queremos adicionar ou ícone de cenoura aqui. A maneira mais fácil de fazer isso é desenhar uma linha de erro, então eu vou fazer Shift L como um atalho. A maneira mais fácil de fazer isso é desenhar uma linha de erro, Crie uma linha aqui. Vamos ampliar. Vá em frente e dobre rápido para aqui. Pegue este fim da linha e traga até aqui. Então só temos um belo ícone de cenoura aqui. Eu vou usar feito aqui para sair de lá vai diminuir o zoom e, em seguida, trazer minhas cenouras cá, torná-lo um pouco maior. Talvez uma espessura de dois, talvez 2,5, e isso é bom. E então eu quero ter certeza de que eu gostei bem no centro e a menos que mudou uma cor do traçado para não posso realmente ver isso aqui, hum, isso funciona. Vamos em frente e renomear esta lista de serviços de componentes e vamos para os nossos simuladores agora e inserir esse componente indo para os ativos que vemos aqui. Temos uma lista de serviços. Vamos em frente e arrastar isso para dentro Então já disse Aiken, eu quero fazer algumas mudanças nele. Acho que podemos torná-lo um pouco menor. E então vamos em frente e adicionar um divisor também. Então nós podemos tipo de ver o próximo ver a próxima opção na lista e diferenciado entre eles. Então eu vou voltar rapidamente para os componentes. Vamos selecionar todo o componente e torná-lo 95 pixels de altura. E então eu vou trazer o nome da minha loja alguns pixels para baixo e então talvez alinhado estes aqui em vez disso, e estes também e realmente trazê-los alguns pixels para baixo e, em seguida, ir em frente e colocar este no centro novamente. Acho que isto vai funcionar. Então vamos em frente e traçar uma linha. Certifique-se de mantê-lo na rua usando o turno e tê-lo esticado todo o caminho. Use a cor do traçado. Vamos usar o controle, ver e ir em frente. E assim, cor da carruagem. Então talvez façamos, uh, talvez possamos torná-lo um pouco mais leve. Ele queria ser sutil. Acho que isso é bom. Vamos em frente e apenas selecioná-lo e trazê-lo todo o caminho para baixo. Só um pixel na parte inferior. Certo, acho que temos isso aqui. Então, agora, se você for para simulações, eu acho que fica melhor. Podemos ir em frente e usar tudo também. Traga isso para baixo e, em seguida, aperte o comando de um monte de vezes só para ver como isso seria parecido . Eu acho que isso funciona 28. Dados de amostra do Google: Agora eu vou mostrar a vocês um plug muito legal que podemos usar para realmente preencher os dados para esses serviços aqui. Hum, então vamos em frente e procurar por plugins, abrir, plugins gerenciados pelo homem, e então vamos em frente e procurar todos os plugins. E estou interessado nesta opção de pia do Google Sheets aqui. Se você não consegue encontrá-lo, pesquise no Google Sheets. Afunda bem aqui. Vá em frente e instale-o. Este plugue ins super legal. E eu acho que será útil para seus projetos futuros também. Tudo bem, então uma vez que você instalou isso e você estiver de volta aqui, nós realmente não voltaremos para nossos componentes toque aqui. Então vá em frente e completo junto com o que estamos fazendo aqui. Vá para o nome da loja e mude o texto aqui para, hum, fazer um sinal de hashtag ou um sinal de libra como este e fazer armazenar o nome sublinhado e, em seguida, para o ícone de dólar aqui. Uh, vá em frente e dê um nome. Preço sublinhado total. Certifique-se de colocar o “oi veado “ou a chave de libra aqui. Alterar este 12 datas com a hashtag antes e, em seguida, status será status hashtag e eu vou dizer-lhe por que isso é importante em apenas um segundo. Ah, uma vez que você renomear apenas vá em frente e verifique se você não fez nenhum erro de digitação lá e o que estava aqui dentro. Só quero fazer uma última coisa. Vá até aqui para o nome da sua loja e certifique-se de esticá-lo todo o caminho até talvez bem aqui e apenas certifique-se a mesma coisa com a data. Acho que parece bom. Eu quero selecionar minha data e status e trazê-los alguns pixels para baixo. E também me deixe ir em frente. E eu sinto que devemos mover estes para cima e centrá-los junto. Meu componente aqui é então vamos agrupá-los juntos e, em seguida, usar uma linha vertical. Acho que parece melhor. É agora, se eu voltar aqui. Sim, parece muito melhor. Agora veja este pequeno quadro de seus serviços ir para plugins. Eu faço o Google Folhas afundar. Vá em frente e entre. Este link, que está no recurso, é para esta lição. Então vá em frente e reserve um momento para baixar isso. Pegue esse link do arquivo de texto e coloque-o aqui. Eu já fui em frente e fez esta folha esta folha do Google com dados de amostra. Tão certo em um segundo o que isso parece. Então, se ele realmente abriu, você vai ver que eu juntei essas pequenas folhas de ghoul com meus dados com meus nomes de loja. Um par de datas, alguns preços e alguns status e itens aleatórios. Um par de datas, Há todos os dados redondos e aleatórios apenas para nos ajudar a gerar nossa tela. Hum, então com essas folhas do Google, vá em frente e use o link novamente e coloque-o aqui e, em seguida, vá em frente e escolha atualizar a página atual somente, e então use buscar e pia, como você pode ver aqui estão a página é não concluída. Ele foi em frente e usou essas folhas do Google e gerou esta página para nós. Claro que sim. É por isso que precisamos renomear nossos campos para que este plug in saiba o que pegar de onde, hum, sim, certifique-se de ler a documentação deles. Você pode fazer isso acessando o Google. Ela afundava e, em seguida, clicando neste pequeno ícone de informação aqui em baixo onde você pode realmente acessar a documentação deles e então ver como você pode usar isso para seus próprios projetos e configurar seu próprio, uh, ícone de informação aqui em baixo onde você pode realmente acessar a documentação deles e então ver como você pode usar isso para seus próprios projetos e configurar seu próprio, uh, Folhas do Google. Mas achei isso muito legal. E é por isso que eu queria incluí-lo nesta lição e dizer a vocês que vocês poderiam fazer algo assim. Lichens, que você tem acesso ao nosso super poderoso. Portanto, aproveite para gerar seus projetos e economize muito tempo. Então, com isso, acho que nossas páginas estão praticamente todas feitas aqui. Agora vamos voltar e aprender um monte de outras coisas. Eu sei que neste momento, você já tem muito conhecimento sobre Fichman. Felizmente, você é capaz de realmente usar isso e aplicar tudo o que você aprendeu em seus próprios projetos. Realmente? Isso é tudo o que este curso é sobre é experimentar com diferentes ferramentas que as invenções dadas a você para gerar alguns projetos realmente agradáveis. Então, antes de encerrarmos esta simulação aqui, vamos voltar a ele e fazer um monte de coisas para torná-la ainda melhor. Então, vemo-nos na próxima aula. 29. Encontrar fontes personalizadas para usar: Tudo bem, nós completamos nossa simulação na última lição, e eu quero tirar algum tempo para revisar nossa simulação e encontrar oportunidades e lugares onde possamos melhorá-la, começando com o texto e a tipografia. Hum, então eu vou mudar para um par de recursos. Isso incluiu Ah, nesta lição. Vá em frente e abre-os para verificá-los. Vou passar rapidamente por esses recursos eso. Sabe ao que tem acesso? Primeiro de tudo, se você está tentando usar fontes personalizadas em seus projetos de figment, certifique-se de baixar novamente este instalador de fontes aqui. Primeiro de tudo, se você está tentando usar fontes personalizadas em seus projetos de figment, Portanto, isso só é necessário se você estiver usando o aplicativo web. Se você tiver o aplicativo para desktop e estiver usando o figment em uma área de trabalho, não precisa se preocupar com a instalação deste instalador de fontes. Então, o próprio MMA da figo usa centenas de fontes acessíveis em fontes do Google. Como se você fosse para o estrangeiro. Comece o google dot com, você poderá acessar muitos fundos que estão disponíveis em Sigma. Como sempre, explore alguns outros. Eu não tenho certeza de quais fundos estão atualmente em figo MMA, mas eu tenho certeza que você será capaz de descobrir isso se você está procurando por uma fonte específica. Caso contrário, você pode definitivamente baixado de fontes do Google, que é um ótimo recurso para encontrar fontes, um, ou outro recurso de lojas, como as fontes adobe também. Acredito que este requer uma assinatura ou uma associação para a Creative Cloud. Então vá em frente e confira isso também. Você tem acesso a toneladas de fonds, então vá em frente e navegue. Esse recurso é se você estiver procurando por uma fonte personalizada. Outro site legal que eu quero mencionar é par afeiçoado Darko Ah, este site dá-lhe um monte de pares de fundos que você pode usar, um, com diferentes tipos de fontes que ficaria bem juntos em seus projetos. Há alguns fundos diferentes aqui que você pode explorar e ver qual você gosta e qual você quer usar para seus próprios projetos. Há alguns fundos diferentes aqui que você pode explorar e ver qual você gosta E esta lição vamos seguir em frente e realmente aplicar essa combinação de fonds ou par de fundos em nossa aplicação. Hum, então você pode fazer uma de duas coisas ou ir para as fontes. Paradox co e, em seguida, baixar este rube IQ e Carla fonte combinação ou par de fonte ou novamente , se você vai para o recurso é para o projeto em que estávamos trabalhando. Limpar pode agrupar, hum, e ir para as fontes. Você também será capaz de baixá-los a partir daqui é bem e instalá-los. Então eu vou em frente e instalá-los eu mesmo. Certifique-se de selecionar todos os pesos diferentes. Para esse fundo e Mac, você pode ir em frente e selecionar todos eles e, em seguida, apenas dobrar rápido para abrir, instalar todos eles. Para esse fundo e Mac, você pode ir em frente e selecionar todos eles e, em seguida, apenas dobrar rápido para abrir, E vamos fazer o mesmo por esses outros fundos. Aqui. Certifica-te outra vez. Você seleciona tudo, vá em frente e abra e roubou e tudo feito lá. Tudo bem, então vamos para o nosso MMA figo que parar novamente porque eu estou usando o aplicativo desktop aqui. Eu não preciso instalar o instalador de fontes, mas sinta-se livre para pausar aqui e passar pelo instalador frontal e certificar-se que esses fundos são aplicados na Web. A APA está bem, se estiver usando o figo. Ma subiu 30. Criando estilos de texto: Então, até agora em nosso projeto, temos usado o padrão para a fonte Roboto aqui. Então, se eu ampliar aqui como, por exemplo, em nossa página de login ou logotipo, tudo está usando essa fonte roboto até nossas páginas principais aqui, na verdade. Ah, onde começamos a usar alguns dos componentes IOS. Se você se lembra, por exemplo, para a nossa barra superior e as barras de navegação aqui, assim que começamos a usar isso, tudo mudou automaticamente para as fontes padrão que vêm para iPhones Se você se lembra, por exemplo, para a nossa barra superior e as barras de navegação aqui, assim que começamos a usar isso, . Você? Por que nós também instalado, que é sf pro display. Hum, então eu sei que isso está super bagunçado agora porque e seus projetos, você normalmente quer manter uma ou duas fontes no máximo. Você não deseja ter várias combinações de fontes. Hum, e nós também conversamos sobre isso em nossa lição de UX como ambos. Então vamos trabalhar do nosso jeito a partir da página de login. E, claro, temos a opção de entrar e mudar cada dedo do pé de texto, nossas novas fontes Ah, que baixamos. Mas eu também mostraria uma ótima maneira de você configurar estilos assim como nós configuramos estilos para nossas cores. Se você se lembra, criamos um esquema de cores. Hum, eu quero mostrar como você pode realmente usar estilos para sua tipografia e seu texto também . Então, para adicionar um estilo de tipo ao seu projeto de figment. Vamos em frente e primeiro selecione o texto. Vamos começar com este texto do logotipo aqui. Então instalamos essas duas fontes. Normalmente, você deseja usar um fundo para seus títulos, títulos eso e texto de logotipo e coisas assim. E então o corpo do texto seria para todo o resto. Neste caso, são Cabeçalho Font é Rubik e a fonte do corpo vai ser Karla s. Então vamos aplicar Rue Big aqui para isso. Texto do logotipo. Então vá até aqui para onde diz texto. Você pode alterar a fonte navegando por aqui. Hum ou você também pode simplesmente ir em frente e digitar o nome fonds. E aqui, Então eu já sei que é Rubik. Então eu vou procurar isso aqui e agora temos Rubik aplicado aqui. Vou apenas aplicar Ah, peso médio aqui. Você pode fazer outros. Como se você quiser ir muito grosso com luzes pretas ou realmente. Acho que gosto do médium aqui. Parece muito bom se destacar, e não se mistura. Então vamos em frente e usar isso. Então, às vezes o dinheiro mudou de fundos, seus alinhamentos podem ser alterados. Então vá em frente e apenas uma verificação dupla de que tudo está alinhado corretamente. E certifica-te de que vou ter a certeza que este logótipo está alinhado bem no meio do bem-estar. E certifica-te de que vou ter a certeza que este logótipo está alinhado bem no meio do Isso parece bom agora. Então agora vamos em frente e transformar isso em, ah tipo estilo que podemos usar em todas as outras páginas. E novamente, o benefício é que se você em algum momento decidir mudar essa fonte, você será capaz de fazê-lo em um só lugar, e todas as suas páginas terão essa fonte e o estilo aplicado a nós. Vamos em frente e vamos ao estilo aqui. Vamos criar um novo estilo. Eu só quero nomeá-lo, hum, cabeçalho, fazer um pequeno traço e, em seguida, apenas dar-lhe o nome dos Fonds aqui. Então é Rubik. Vamos fazer 26 pontos. É só o nome aqui. Não precisa colocar exatamente o que estou colocando aqui. Isso é apenas para mim ser capaz de identificar minha cabeça de fonte e facilmente ver o tamanho e fonte é. Então crie estilo. E então agora, como você pode ver aqui, se eu ir em frente e clicar sobre isso novamente, este texto foi anexado a este tipo de estilo de cabeçalho Rubik 26 eso para demonstrar se eu vou para este tutorial card, por exemplo . Agora, se você se lembra, esta é uma instância de um componente, então nós não queremos editar as coisas aqui porque caso contrário não seria aplicado aos outros cartões tutoriais. Então vamos em frente e ir para o componente mestre a partir daqui, e isso deve nos levar bem aqui. Agora, se eu ir em frente e clicar no título aqui e, em seguida, ir para os meus estilos aqui, eu posso aplicar o mesmo cabeçalho. Estilo Rubik 26. É o único estilo que temos agora. Mas vamos também criar um estilo corporal para este texto aqui usando nossos outros fundos, que é Carla. Vamos mudar o texto para Carla e vamos em frente e talvez aumentar o tamanho de 17. Vá em frente e crie estilo. Vamos fazer Body Dash Carla, e este foi 17 pontos grande estilo. Lá vamos nós. E agora eu tenho um corpo têxtil também. Então, enquanto estamos aqui com nossos componentes, vamos em frente e aplicar isso a todos os componentes aqui. Então vamos selecionar o nosso Mas habilitado aqui e mudar o texto para Carla também. E então eu quero ir em frente e torná-lo negrito e mudar o tamanho da fonte ano para 17 também. Só vou me certificar de que está centrado aqui. Isso parece bom. Vamos em frente e criar um estilo para o nosso mas no texto aqui também. Então eu vou. Vou fazer a Carla 17 pontos. Negrito aqui. Lá vamos nós. Então, agora que o botão tem essa célula está implícito aqui também. Porque mais uma vez, esta é uma instância do botão “Este” bem aqui. Certo, então vamos em frente e aplicar nossos gostos aos nossos dois componentes aqui, então primeiro 1 para guardar cartão. Então vamos em frente e selecione este texto aqui. Hum, nós vamos colocar para o nosso quarto grande fundo aqui e vamos fazer médio para o tamanho da coisa. Podemos fazer 22. Vamos em frente e adicionar este têxtil como sala de cabeçalho 22. Lembro-me que não tens de criar um estilo para cada fundo, mas se achas que vais reutilizar uma determinada fonte ou o estado, um certo estilo de fundo em várias páginas ou vários componentes, Eu acho que esta é a melhor maneira de fazê-lo do que mudar individualmente todos eles. Então vamos aqui e, em seguida, selecionar nossos estilos e fazer corpo Carla 17. A mesma coisa aqui, por último aqui é. Bem, vamos em frente e certificar-nos de que tudo está centrado. Vou ao centro. Todos esses estoques poderiam garantir que o ar também se centrasse. Perfeito. Vamos por aqui. Vamos para a nossa lista de serviços. Componente . Vamos em frente e mudar este para o cabeçalho Rubik 22 que configuramos. E estes serão o corpo Carlos 17. Então, com os selecionados, vamos fazer, hum, corpo Carlos 17 e então talvez fazer ousado pelo preço aqui. Então vamos desvincular isso ou separar este estilo e fazer o estilo do corpo Carlos 17 Bold. Ele fica melhor quando vamos em frente e apenas, um, trazer alguns pixels para baixo alguns pixels para cima e então vá em frente e traga o nome da minha loja aqui para baixo e tente alinhar isso com o outro texto aqui. E talvez possamos derrubar esses pixels. Acho que pode parecer melhor. Nós vamos em frente e agrupar estes dois também está no comando G em ir em frente e selecionar estes fazendo. Certifique-se de que eles estão centrados e também centralizá-los junto com o resto do componente aqui. Acho que isso é bom. Assim são componentes aqui agora têm o fundo certo. Então, por que não fazemos uma pausa rápida e depois aplicamos têxteis para o resto das nossas simulações na próxima lição? 31. Aplicando estilos de texto de maneira geral: Tudo bem. Portanto, nossos componentes agora têm têxteis aplicados. E se voltarmos às nossas simulações, já podemos ver algumas delas aplicadas, como aqui com nossos botões. , Claro,coisas como essa, esqueceu o botão de senha. Porque não é um componente que não foi aplicado. Sinta-se sempre à vontade para verificar. Volte aqui e selecione os telefones certos. Vá em frente e alinhe-os novamente. Talvez derrubar isso um pouco. Traga estes dois pouco para cima. Isso parece bom quando eu selecionar meus termos aqui e também disse que ao estilo de Body Girl of 17. Negrito. Só vou esticar todo o caminho. Agora, se você se lembra antes, nós não tínhamos este fim como, ah fonte dobrada. Então você ainda pode entrar aqui, clique duas vezes e escolher a palavra que você quer ou vários prêmios e então, ah, ah, usar o comando de atalho ser, hum e então isso vai em frente e em negrito que porta. E o que mais temos aqui? Temos o nosso pagamento. Vamos em frente e selecionar todos estes. Faça uma carla de corpo têxtil, 17 pontos. Isso parece bom. Ou, mas no nosso automaticamente tem que Carla texto. Vamos mudar este pagamento para o cabeçalho Rubik 26. Só vou esticar isso. Centralizá-lo. Isso parece bom. Vamos ver o que precisamos mudar aqui. Só precisamos mudar o texto de busca aqui, também. Deve fazer o corpo Carlos 17. E novamente, Certifique-se de centralizar as coisas linha corretamente para nossas páginas principais aqui. Vejo que meus cartões já tinham a fonte aplicada porque era um componente. Mas acho que tudo o resto, , além da navegação e dos quadros superiores aqui estão dentro da página. Então, por que não vamos em frente e primeiro fazemos a barra superior na barra de navegação? Então, vamos dobrar menos rápido em um dos componentes aqui, ou uma das instâncias da barra de navegação, ir para componentes mestre. E então aqui vamos aplicar os mesmos telefones aqui. Vamos fazer Vamos realmente ir em frente e selecionar Rubik como nossa fonte, tentando manter tudo o resto igual. E então vamos em frente e criar um novo cabeçalho. Lubick 36 pontos. Parece que cometi um erro aqui no nome. Na verdade, é uma fonte de 34 pontos, então vá em frente e edite o estilo e mude o nome aqui para 34. A partir daqui, você pode até adicionar descrição. Então, se você tem uma equipe e está trabalhando com eles, você pode dizer a eles a que este telefone deve ser aplicado. Coisas assim que eu quero ir aqui para a conta, é ter certeza que você não tem nenhum desses como esse, mas o topo é em si. Não mudei isso para Body Carla. 17. Negrito. Conserte este e este centro. Vamos fazer a mesma coisa, este turno de espera aqui e depois fazer a mesma coisa. Vamos em frente e centralizar meu ano de texto. Traga-o para baixo. Então parece que está a apenas 15 pixels do fundo. Então, vamos manter que 15 pixels da parte inferior e certificar-nos de que isso e isso também estão centrados. E parece que é. Você não precisa alterar a barra de status porque essas serão as fontes padrão lá dentro . Uh, nós não vamos ter qualquer controle sobre isso, então vamos voltar para as nossas simulações. Então a navegação e tabulações aqui agora têm a fonte certa. Exceto por este botão aqui, então vamos mudar para o Corpo Carlos 17. ousado parece bom. Então ele vai para aqui. Vamos selecionar estilo e fazer esse estilo aqui. Ou vamos realmente fazer os 22 pontos. Um, assim, então esta página parece boa. Agora vamos em frente aqui. Vamos, na verdade, fazer o e-mail. Só este aqui. Não por isso não é ousado. E então escolha este como o Carlos 17. Bold Rocky, vamos fazer ou, na verdade, não podemos nem fazer Rou Big Head ou 22. Vamos em frente e certifique-se de que eles estão centrados no ar e mudaram o endereço aqui, também. Corpo Carlos 17. Negrito mudar esses alinhados aos centros verticais. E eu vou apenas repetir o mesmo processo para os outros dois botões também. Sinta-se livre para pausar aqui e fazer isso em seus projetos. Tudo bem, então com esses aplicados, acho que quase tudo aqui tem essa nova fonte, uh, a única exceção são esses dois campos aqui. Então vamos pular aqui e ter certeza que eles também estão usando têxtil da Carla 17 e centralizar a vertical. A mesma coisa aqui, tudo bem. Com as nossas duas novas fontes aplicadas à nossa simulação. Você pode ver que as coisas parecem muito melhores agora. Ah tem um sabor único para ele. Todo o aplicativo e toda a sensação de marcação. E se eu for para a minha página de serviços, vejo que parte do texto aqui parece ser muito grande. Como, por exemplo, o carimbo de data aqui no status provavelmente pode ser um pouco menor do que isso. Então, quando vamos em frente e selecionar este ir para o componente mestre e, em seguida, para estes dois, eu estou realmente indo para desanexar o estilo e, em seguida, usar uma fonte de 14. Vamos em frente e que ela realmente mudou a cor de preenchimento também. Ah, um pouco mais tarde. Acho que isso parece bom. Então, quando você vai em frente e criar um novo estilo a partir disso e talvez fazer este como corpo Carla 14 não aplicar a mesma coisa ao nosso texto de status aqui. Então vamos mudar a fonte aqui. E quando aplicado, o mesmo preenchimento 585858 Tudo bem, modo que parece bom. Então agora eu só quero mudar rapidamente para os meus estilos aqui para o meu esquema de cores. Tenho um texano primário, um texto secundário. Então eu acho que nós não vamos realmente ir em frente e mergulhar em adicionar alguns textos primários e cores de texto secundário aqui. Mas você pode ir em frente e fazer isso e, em seguida , hum , de nossos componentes, ou onde quer que você queira adicionar cores semelhantes para os tanques que você tem aqui, em vez de ter um personalizado aqui, você pode apenas vá em frente e realmente use ah, seus estilos de cores. Mas desta vez você poderá usar o estilo de cor para o texto. Não vamos entrar nisso aqui, mas sinta-se à vontade para aplicá-los aos seus projetos. Agora, se eu voltar, as coisas parecem muito mais limpas aqui. No entanto, onde quer que você veja as coisas parecerem um pouco estranhas, sinta-se livre para ir em frente e mudar a cor como fizemos isso. Enfraquecer. Você pode aplicar as mesmas cores para ouvir uma onda, , e onde quer que você veja,você tem texto que você não quer que ele se destaque tanto quanto o outro texto, sinta-se à texto, vontade para seguir em frente e aplicar vários estilos de cores baseados em O seu texto. Então, lá temos. Isso é nossos estilos tipos aqui, muito útil e figo ma e definitivamente ir em frente e aplicá-lo e ter em mente que você tem acesso a ele a partir daqui. Sempre que você apenas selecionar sua tela aqui, você deve ser capaz de acessar seus estilos locais tanto estilos de cores e têxteis aqui e, em seguida , a partir daqui, você pode realmente ir em frente e fazê-los bem. Então, se você decidir em algum momento, digamos fazer o seu cabeçalho 30 pontos aqui, como você pode ver no meu projeto, ele vai mudar em todos os outros lugares. talvez Claro, você precise ajustar os tamanhos de algumas das caixas de texto aqui, mas sinta-se livre para fazer ajustes e aplicar isso aos seus próprios projetos também. 32. Toques finais: Tudo bem, então se você está caindo junto até agora, nós praticamente completamos nossa primeira simulação aqui em cima. Nesta lição, eu só vou aprofundar e publicar as coisas um pouco e depois adicionar algumas das coisas necessárias que precisamos. Então vamos seguir em frente aqui e fazer essas mudanças se sentirem à vontade para acompanhar. Eu também encorajo você a passar por seu painel de camadas aqui. Ah, e isso realmente garante que o nome de tudo dentro de suas camadas o agrupamento e tudo isso está correto nele faz sentido. Eu não vou fazer isso nesta lição porque provavelmente levaria muito tempo, mas definitivamente sinta-se livre para fazer isso em. Eu sempre encorajo que você se mantenha organizado com seus projetos para que não só você, mas também outras pessoas, talvez pessoas com quem você está colaborando ou você é uma equipe, hum pode entender o que está acontecendo com seu design e cada um dos seus quadros. Então a primeira coisa que eu quero fazer aqui é realmente ir em frente e aplicar a barra de status. Ah, que nós temos aqui para todas as outras páginas também. Por isso, neste momento só o temos nestas três páginas. Então, para fazer isso, , vamos em frente e começar com uma página de mapa primeiro. Vamos realmente apenas ir em frente e copiar a barra de status da página de solicitação porque seria muito semelhante em e selecionar o quadro do mapa e fazer comando V ou controle V nas janelas. Vamos em frente e trazer nossa barra de busca um pouco para baixo. Isso parece bom. E, em seguida, vamos para a nossa página de pagamento aqui para uma página de pagamento. Podemos usar uma barra de status simples como esta. Ah, porque nós não temos nada por baixo para ter que borrá-lo. Então vá em frente e copie isso e cole-o aqui. E, em seguida, para o nosso tutorial. Passo a página aqui. Vá em frente e copie aqui. Então, como você vê aqui, a barra de status é muito escura para esta página. , Normalmente,em páginas mais escuras, usamos uma barra de status branca, então vá para o nosso IOS. Você I componentes arquivo aqui, Então, se você passar por aqui, se você ainda tem isso aberto, você deve ser capaz de encontrar a versão branca dessa barra de status também. E então você pode simplesmente ir em frente e selecionar a coisa toda aqui, e você pode ir em frente e apenas copiá-lo daqui e colá-lo aqui. Vá em frente e apenas usou turno e iraquianos para movê-los para cima. E então, é claro, usando a opção de comando K ou controle alta Que nas janelas para criar isso como um componente. E vamos em frente e renomear este status 12 muito adiante barra de luz e renomeado esta barra de status 12 barra de barra de escuro. Então, desta forma, se você voltar para nossas simulações, podemos simplesmente ir em frente e simplesmente escolher isso como a versão light do site. Podemos ir em frente e copiar isso para nossas páginas de login. Bem, mova as coisas um pouco para baixo. Vou em frente e mover o meu guia para cá. Acho que isso é bom. Talvez mova isso um pouco para baixo, também, assim como tudo o resto aqui que parece bom. Agora, você deve ter notado que usamos um monte de ícones de, ah, aquele site flat icon dot com. Então, se você não tem a versão completa ou uma assinatura com ícone plano , é definitivamente necessário para você dar crédito aos autores desses ícones. Eso ir em frente ao nosso recurso é para o projeto aqui e, em seguida, abrir este aplicativo conhecido Iniciar txt E, em seguida, aqui, você verá. Ah, há alguns créditos aqui, então vamos em frente e copiar isso. Ah, e basta ir em frente e colá-lo em algum lugar do nosso projeto aqui. Hum, agora, claro, porque nós não estamos, hum, desenvolvendo este aplicativo, que é projetá-lo, hum, bem, só preciso passar isso para quem quer que seja desenvolvendo este aplicativo para certificar-se de que eles colocam esses ícones onde ele pertence em seu aplicativo. Você vai notar que a cápsula está toda maiúscula aqui. Então, por que não vamos em frente para nossas opções de texto aqui, clique nos três pontos e, em seguida, mudamos o invólucro para apenas letras minúsculas. Podemos trazer isso mais baixo aqui e em outro leva para dizer, ícone credita tanto que lá e colocá-lo aqui para quem quiser usar o's em seu projeto. Portanto, é sempre importante fazer se você estiver usando ícones que exigem atribuições. A última coisa que eu quero fazer aqui é apenas melhorou Minha página de pagamento aqui. Parece voar agora, então vamos em frente e trazer isso, mas em um pouco mais baixo. E então vá em frente e traga meu cartão de crédito um pouco mais baixo também. Eu quero ir em frente e inserir um tipo de descrição. Texto aqui em dizer, por favor cartão de crédito para sua conta. Agora, como você pode ver, meu texto está acontecendo e continua, então o que você pode fazer é ir para a opção de texto aqui, clique em três pontos e então vá em frente e faça e você pode ir em frente. Posso escolher altura automática ou tamanho fixo. Então, se você escolher corrigir os olhos aqui, podemos ir em frente e, uh, trazer nosso texto aqui e redimensioná-lo para talvez corresponder ao nosso mas aqui, então 25 pixels do lado. Vamos em frente e remover isso daqui. Isso parece bom. Vamos em frente e mover o cartão de crédito um pouco mais para baixo. Vá em frente e desanexe o estilo e mude-o para o corpo certo. Carla 17. E vamos fazer um pouco de um tipo de telefone mais leve aqui, e vamos em frente e apenas terminar este texto aqui. Adicione um cartão de crédito para sua conta para usar para seu serviço de lavanderia parece bom. Eu quero ter certeza que este é 325 e, em seguida, o centro aqui pode ser baixado um pouco. Tinha espaço para respirar para o meu projeto. Isso parece melhor. Talvez possamos centralizar isso também. Perfeito. Em algum momento. É bom adicionar esses tipos de prompts de descrição aos seus usuários para dizer a eles por que estavam coletando este cartão de crédito de pagamento aqui ou informá-los quando esse cartão de crédito pode ser usado. E isso conclui nosso projeto simulado aqui para o aplicativo móvel. Então, se você também estiver interessado em fazer um projeto Web ou um aplicativo Web projetado bem, faremos isso em seções futuras. Agora quero dar-lhe um exercício para fazer por si mesmo. Se eu ampliar a minha página de solicitação aqui, você verá que temos nossa loja de lavanderia escolher. A idéia aqui é que eles percorrem as diferentes lojas e encontrar o que eles gostam solicitar seu serviço de lavanderia desenhar e, em seguida, eles apertam este botão de serviço de solicitação. Mas realmente não há feedback para eles agora e são projetados para dizer a eles que o pedido ou o pedido aqui foi feito. Portanto, sinta-se à vontade para adicionar um estado de conclusão ou algum tipo de feedback ao nosso usuário. Talvez algum tipo de cartão que lhes diga que o seu pedido foi feito ou que o seu pedido foi feito. Hum, eles vão ser bem legais. Então vá em frente e adicione algo para dizer aos usuários que seus pedidos foram enviados. E depois que fizer isso, sinta-se à vontade para me incluir em seu projeto ou me enviar um e-mail e ficarei mais do que feliz em fornecer alguns comentários para você também. E depois que fizer isso, sinta-se à vontade para me incluir em seu projeto ou me enviar um e-mail e ficarei mais do que feliz em fornecer Ótima. 33. O que vem a seguir?: Tudo bem. Então parabéns por terminar sua primeira simulação móvel. Você, eu, isso é incrível. Juntos, trabalhamos em uma simulação móvel completa de sete páginas para o aplicativo canguru limpo. Então, o que vem a seguir daqui? Bem, há um monte de maneiras que você pode melhorar ou brincar com nosso design atual ou explorar MMA de figo, e você design de UX ainda mais. A primeira coisa que você pode fazer é ir lá fora, talvez baixar seus aplicativos favoritos e realmente se inspirar com eles. Um par mais recurso é que você pode usar on-line inclui ir para Pinterest e procurar por design de interface de usuário e design móvel, ou mesmo indo para os padrões de site dot com, que é soletrado p t tr n s dot com. De onde você pode navegar um monte de dispositivos móveis diferentes, você sábio que você pode obter inspiração e talvez aplicá-lo ao seu próprio Você que eu projetei também . A segunda coisa não fez daqui. É realmente ir em frente e criar um protótipo fora do design que nós montamos juntos. Então, o que um protótipo permite que você faça é realmente ver seu aplicativo ganhar vida e criar um protótipo interativo para que as pessoas realmente usem para clientes. Para saber se são investidores para sua própria aplicação ou qualquer que seja o caso. Você pode mostrar este protótipo para desenvolvedores e metade em Creta. Aplicação natural a partir deste. E, claro, se você quiser expandir seu conhecimento de U. S u X tentando web você eu design é definitivamente um bom próximo passo, porque ele vai lhe dar a vantagem de saber tanto móvel e Web design. E isso é realmente importante porque muitos clientes e muitas obrigações esses dias exigiam uma versão Web e móvel. Então, se você tem esse conjunto de habilidades, ele definitivamente irá ajudá-lo. Agora eu vou ter um curso foram todos cobertos, prototipagem de compartilhamento e até mesmo uma Web que eu projetei nas próximas semanas. Então sinta-se livre para verificar aqueles para fora uma vez sua vida e, como sempre, pode notar Olá, inteligente em gino dot com. Coisas como esta sinta-se livre para compartilhar qualquer design que você tem ou quaisquer perguntas que você possa ter, e eu ficarei feliz em respondê-las com isso, eu estou ansioso para vê-lo em um futuro. Claro,