Design de aplicativos para Android nível Profissional com Adobe XD e design de materiais da Google

1. ♥ é menor neste curso de design do Adobe XD para design para Android: Olá, todo mundo. Bem-vindo ao meu curso sobre design de material Android usando Adobe X'd E nós estaremos olhando para todas as especificações de design de material dadas pelo Google Material projetado para Point e eu vou mostrar-lhe quais são as diferentes especificações fora diferentes lista de botões como você pode projetar usando as diretrizes e restrições de design de material do Google e criar APS de aparência incrível. Então, vamos discutir todas as possibilidades que funcionam mesmo no material do Google projetado para apontar, que é a versão mais recente do design de material do Google. Agora as ferramentas que usaremos são que obedecem X'd. Se você é um grande feito em Adobe X'd, você deve fazer meus outros cursos ou quaisquer outros cursos sobre Toby X'd, porque eu não vou te ensinar o básico oferecido mais de 60. Então, se vamos usar Adobe X'd para projetar principalmente e para entregar projetado para desenvolvedores, estaremos usando Siplin Deus é você. E também estaremos usando fumaça ou outras ferramentas on-line para gerar nove ativos de patch para o seu android. APS. Se você não sabe sobre nove passes, não se preocupe. Vamos aprender todas essas coisas neste curso. E se você está familiarizado com a Adobe, na verdade, você deve ser capaz de projetar abdominais android olhando incrível e nós estaremos projetando e aplicativo android, que é basicamente um aplicativo android real para médicos em juke-lo. Então é isso que vamos projetar o exercício. E antes disso, vou investigar muitos detalhes sobre diferentes especificações. Como você pode usar cores diferentes, como você pode criar esquemas de cores e agrupamento de cores, que é uma nova adição ao material do Google projetado para apontar, que é chamado de agrupamento. Então nós vamos estar juntos sobre AB usando toda a cor, primária secundária todas as suas coisas. Então eu vou te ensinar um monte de coisas neste curso. Então, se você tiver alguma dúvida ou qualquer curies sobre o que são quaisquer problemas em relação a este curso, você pode me contatar. Você pode me enviar um e-mail, você pode me enviar uma mensagem. Estou muito respondido. Eu realmente nasci em menos de 24 anos, então você precisa saber. Não te preocupes com o desporto que te vou dar. Então nós também estaremos criando mais lições se você tiver algum problema ou você tiver alguns pedidos criar qualquer outra lição, eu vou criar isso para você. Então vamos começar a projetar APS Android sobre como podemos entregar nosso aplicativo Android. Desenvolvedores da loja Vamos aprender isso juntos. Vejo você em breve dentro deste curso. 2. Você ’ ♥ Como assistir neste curso?: Então esta é a parte importante. Se você já viu o meu design android com curso de loja de fotos, então você vai pular um monte de exercícios e um monte de lições diferentes porque eles são duplicados neste curso extra. Então as palestras ao vivo e eles têm o coração e o início do título deles, você vai assistir no Lee. Estes este é específico para apenas os alunos que viram o meu ou já viram a minha classe, que é ah, design de material android usando para a loja. Então, uh, se você viu aquele vidro inteiro você fez aquele vidro perfeitamente. Então você vai pular as palestras. Assim, as únicas palestras que você está indo para ver o nosso que tem algum ícone duro no início seu título. Então você pode ver na barra direita com os títulos da palestra são você precisa dedo do pé Basta ver as lições onde eles têm o coração. Eu fui no começo, então eu vou te mostrar minha tela. O que significa esse ícone de coração e como você está indo dedo do pé? Basta ver esses ícones rígidos. Se você já viu meus e direito tribunais de design material com loja de fotos porque alguns fora das palestras eles são os mesmos 50%. Quase o material. Como o que é o design de material do Google? Como todas essas coisas funcionam. Eles são os semelhantes. Estes são os conteúdos semelhantes a bordo dos cursos. Então não quero desperdiçar seu tempo. Se você já viu meu curso, então você vai pular as palestras e ver apenas as palestras com o coração. Ok, então este é o propósito desta lição. Então, vou mostrar a minha tela. O que é esse ícone duro parece. Então vamos mudar para a tela. Está bem. Então, hum, como você pode ver, eu estou agora, adicionando essas lições na minha opinião de professores do Sr. Dror. E você pode ver isso. Há um coração pequeno. Eu vou no início desta lição. Então é isso que eu quero dizer. Então, se você vê isso difícil, eu tenho isso significa que é a nova lição e está listada. O que obedecer X'd. E se você já comprou minha outra classe, esta é a lição diferente da outra. Então você precisa assisti-lo assim, se você tem. Se você está começando esta aula do zero e você não lavou nenhum dos meus outros cursos ou minhas outras aulas no fim são projetados, então você pode apenas assistir normalmente. Espero que tenha entendido o conceito deste coração e como eu sou. Você precisa lavar essa aula. Vamos passar para a próxima lição. 3. O que é resolução e densidade da tela: agora nesta seção, nós estamos indo dedo do pé. Comece com as densidades de tela de resolução diferente fora da tela. O que é a resolução de tela DP I e o que é a controladora de armazenamento? Pixels escaláveis e densidade DP Porcos independentes é assim Estes são todos os termos que você precisa dominar antes de entrar na loja de fotos ou adobe X T ou até mesmo esboço para começar a projetar seus abs android. OK, agora, neste menos e primeiro nós estamos indo para o pé, cuidar da resolução da tela versus densidade da tela. Ok, então nesta lição, nós vamos cobrir esses dois. Vamos seguir o nosso primeiro slide. Agora. Primeiro, vamos ver qual é a diferença entre a densidade da tela e a resolução da tela . A resolução da tela está sempre em pixels, que é que meu celular é 9 20 pixels por ou 10 80 pixels por 9 20 pixels, que é resolução Full HD ou 12 80 pixels por 7 20 ou 5 40 pixels por 9 60 imagens. Então estes são porcos diferentes, resoluções ruins de que quantos porcos estão na sua tela? Ok, então é o número total de pixels em um dispositivo de exibição. Poderia ser a sua tela de LED ou poderia ser o seu I fazer cinco k tela, então haverá uma contagem de pixels que estes muitos pixels thes muitas portas dardos digitais estão presentes nesta tela. Ok, agora, sobre a densidade da tela significa quão densa esta tela é com o número de porcos escaparam. Então é o número de contagem fora de fotos dentro de uma polegada fora da tela. Ok, então para gostar, você pode ver aqui no lado direito, há duas telas do mesmo tamanho. OK, então eles são ambos, como telas de cinco polegadas ou quatro polegadas aplicativos móveis telas de aplicativos móveis e você pode ver o número fora de pixels neles são diferentes. Isso é mais do que o direito é mais denso do que o esquerdo esquerdo. Um tem o mesmo tamanho de exibição de polegadas, mas tem menos pixels. Assim, as imagens nesta tela esquerda serão menos nítidas. Ok, então em diante E as imagens aqui na tela direita serão mais nítidas e terão mais resolução e mais pixels. Então é exatamente como você pode ter ouvido fora do termo em você quando você imprime algo que este é um 300 dp I imprimir ou 600 peopie I imprimir Então é basicamente pontos de dinheiro casa que a impressora imprimiu em uma polegada fora do papel. OK, então se for 600 peopie I ou 600 polegadas da porta do FBI, vai imprimir $600 nesse único centímetro. Ok, então ele vai ter mais cores e vai viver mais natural e ter mais crocante. Você pode dizer experiência. Então, aqui você pode ver há exemplo de que 10 80 pixels por 9 20 resolução e densidade é 401 polegada de ponto escuro ou DP. Eu acho que você entendeu o que isso realmente significa. Agora eu vou mostrar exemplos de minhas duas telas móveis diferentes e sua resolução real e sua densidade. Ok, agora você pode ver do lado direito que eu tenho este introspecto. É um aplicativo móvel, aplicativo Android. Você pode instalá-lo em seu telefone Android. E, na verdade, se você for para esta guia de exibição, você pode ver tamanhos diferentes aqui. Ok, agora ou vamos para esta densidade horizontal e densidade vertical. Você pode ver que é 403.41 db I Então este é o dp real I, que é ponto escuro polegada fora da tela. É tela de resolução muito alta na parte superior. Aqui, você pode ver 10 80 pixels e no lado esquerdo você pode ver 1920 pixels. Portanto, é uma atividade quase. SD display Foon. E é basicamente da Samsung. E esta é, na verdade, a tela do meu próprio dispositivo móvel que estou usando. Então o tamanho da tela 5,46 polegadas. Ok, então é basicamente essa distância diagonal. Na verdade, isso é uma distância diagnosticada. Não é a distância da direita para a esquerda ou o todo muito largo que é. Então, com base nesses cálculos, na verdade, o que eu fiz foi dividir meu número total de pixels dividido pelo meu dp. Eu e eu tiramos o tamanho da minha tela. OK, então se minha tela tem 10 80 pixels de largura, eu vou dividi-lo pela porta Spottings Rdp I 403.41 e ele vai me dar 2,67 polegadas, por isso é quase 2,7 polegadas de largura. Ok, então é assim que estamos indo. Obtenha a relação entre a resolução de tela e os olhos DP fora das densidades de tela. Aqui está outro exemplo. Este é o meu telefone Android telefone Samsung antigo, e você pode ver o que Aqui ele tem quase cinco polegadas tela quase, eu acho, metade menos do que a tela anterior. Mas você pode ver aqui a densidade horizontal é quase metade a 21 GPS. Assim, as imagens na tela que você pode ver aqui mesmo esta tela curta está olhando um pouco pixilated e não é tão clara quanto uma tela anterior. Então esta é uma diferença diferente entre DP I. Se você está comprando algum telefone celular e rifle, você precisa saber o quanto dp i desportando. Neste momento, existem alimentos que estão suportando 6 40 db I. Então eles são muito alta resolução e imagens muito precisas. Você pode ver os vídeos e cores e tudo mais preciso do que este. Eles são mais densos com exilados com cores, então aqui você pode ver a tela. Mas eu calculei que é 2,44 polegadas e é tamanho real de pixel. 5 40 imagens por 9 60 imagens. Então eu espero que você tenha indústria essa densidade versus resolução. O que é resolução e o que é densidade? Além disso, se você vai para os painéis de LED ou a maioria dos monitores, você pode ver que existem dois. Ok, são quatro K's e telas cheias na verdade. Eles têm diferentes resoluções e densidade de saída diferente é dispositivos Apple, mesmo se você estiver usando um Mac livro pro ou eu americano e eu faço a sua densidade é sempre quase o dobro do Windows ou telas normais ou telas de PC, embora existam muitas novas alergias e monitores que estão chegando e eles têm mais densidade e mais resolução e criam pixels e pixels de dança em espaços menores. Não, espero que você tenha entendido essa diferença entre densidade e resolução de tela e densidade de tela . Espero que gostem desta lição. E não se esqueça de instalar este introspect Abit é gratuito e passar para esta guia de exibição e ver o que seus dispositivos estão esportivos. Qual é a densidade do seu dispositivo? Quais são os porcos é resolução de pixel fora do seu dispositivo e espero vê-lo em breve na próxima lição 4. Relacionação de DP e PX: nesta lição, vamos falar sobre o que é DP, que é densidade, pixels independentes e o que é realmente pixels. Então, qual é a diferença entre esses dois e como você pode usar e converter esses dedos uns com os outros? Se você estiver usando para a loja ou quaisquer porcos l projetos baseados fora Ok, então vamos começar agora. Na tela, você pode ver que existem três dispositivos diferentes com três densidades diferentes. 1º 1 é 1 60 dp, que é muito menos denso e muito tem um número muito baixo de mingau exulta. Em seguida, há 2 40 p A, que é um dp médio I e, em seguida, temos a rua quando TDP I ou alta definição extra alta definição e ponto escuro em sua tela de definição veio. Agora você pode ver que há um botão ou na parte inferior. Por aqui. Você pode ver que este é um botão azul e um botão azul escuro, e é do mesmo tamanho em todos esses três dispositivos. E se o tamanho está em pixels agora você pode ver nesta tela esquerda que temos menos pixels. Então ele está procurando criar. Agora, na tela do meio, temos mais pixels. E agora esse mesmo exercício parece um pouco pequeno. Agora, nesta tela, temos muitas fotos. Então temos esta tela é densa com exilados apoiados por porcos. Então, se estamos usando alguns porcos doentios de Meyer, isso vai acontecer com isso. Então, se eu criar um botão e eu quero que ele seja preciso em todas essas três telas, o que devo fazer? Eu deveria criar outro monumento. São outra escala dos meus anos. Então vai ser independente da densidade, então não depende da densidade. Então agora você pode ver que seria aqui, se eu definir este botão em DP são imagens independentes de densidade, meus programadores são ele vai olhar o mesmo em todos esses dispositivos. OK, então ele vai escalar 1 50% sobre este 1 200% ou este e vai ser ele vai resolver todos os meus problemas. Então é por isso que android, um design de material. Eles vieram com este pixel milhões unidade, que é DP dist densidade imagens independentes. Então esses pixels, esses monumentos, se você der seus aposentos que meu botão será 200 dp vazio por 36 TB de altura. Ele vai permanecer o mesmo proporcional ao seu tamanho de tela em todos esses três dispositivos , ele vai parecer o mesmo. Certo, então esse é o problema. Por que eles criaram DP em vez de pixels. Porque os pixels vão parecer menores quando chegarmos a Ah, tela de maior densidade. Não, vou mostrar-vos um exemplo do mesmo aplicativo introspecto que instalei no meu dispositivo Android . E você pode ver se você olhar para o topo aqui os porcos, a arte do mal e 80 pixels. Parte avert em DP é 3 60 db. E agora, se você olhar para esta tela, nossos pixels são diferentes, mas os pixels independentes de densidade são os mesmos. É 3 60 dp vazio. Ok, então se você definir um botão como um 300 DP para a tela, você quer que ele tome como, 300 DP, ele vai olhar o mesmo nesses dois dispositivos, mesmo que sua resolução de tela ou o número de pixels são diferentes. Então é assim que vamos usar DP. Nossos tamanhos serão os mesmos e ah, o principal monumento DP para qualquer tela de aplicativo móvel. Se você estiver usando o sistema Android e escrever design de material, será 3 60 dp por 6 40 dp Ok, então basta manter isso em mente e nós vamos cuidar de todos os seus varia nas próximas lições. Não se confunda com a forma como vou usar esses DP na minha loja de fotos ou em qualquer outro software de design . Ok, então vamos avançar e nos vemos em breve na próxima lição. 5. Ferramentas de conversão de em IP: neste s e eu vou mostrar-lhe algumas ferramentas on-line com você pode facilmente converter pixels em seu DP em. E este é um dos porcos. Porcos doentes colocam a cidade e você pode ver aqui nesta parte inferior você pode inserir os pixels. 48 pixels. Estes são os pixels. Você sabe, DPS PMM polegadas pontos qualquer meu ano significava que você quer converter toe dp ok, e você está indo para selecionar este mtp I Agora eu estou indo para cuidar disso em outra lição. Estes são exult e baldes de cidade e manter este estas configurações como eles são e você pode ver se eu mudá-lo para 100 e agora você pode ver se começamos com este MDP I Meus 100 pixels vão ser os mesmos que 100 dp também neste DVD p I é 1 33 porcos é o mesmo 100 db em telas HDB I. Serão 150 imagens em excesso de DP I estas telas de densidade Atmore, elas têm maior densidade. Você pode ver que este é 200 pixels o dobro do tamanho do tamanho real. Isto é 100 pixels. Mas neste X db I é o dobro do tamanho. Então triplicou o tamanho que tem quatro vezes o tamanho. É por isso que chamamos essas telas 1,5 x dois x três x quatro X s. Então é por isso que nós as chamamos assim porque eles são o dobro do tamanho ou 1,5 do tamanho ou algo assim. Então é assim que você pode converter. Você também pode selecionar nesses diferentes ícones de lançamento de um APP. Estes são tamanhos diferentes. 36 48 imagens e estes são todos tamanhos de pixel. 1 44 96 Barra de ação Pequenos tamanhos contextuais, ícones de notificação 24 fotos e você pode ver em XX dp i Este 24 fala. ALS vai ter multiplicado por três porque é três x tela. 72 pixels é o tamanho e em quatro saída é 96 imagens porque temos mais pixels e telas mais densas na resolução mais alta ou telas DPS mais altas. Agora vamos olhar para outro banco, que vai ser mais simples do que esse. Agora você pode ver que eu vou verificar esta linha de base Este é o 1.60 MDP Itis indo para a linha de base de seus todos os diferentes projetos são para design de material Android. Agora, se eu selecionar como 50 pixels fora do tamanho, você pode ver que em L d P i, que é o som de ponto cinco x é basicamente multiplicado por 50.75 Então 50 db será 37.50 Porcos é agora. Eu não acho que haverá talvez quatro ou cinco pessoas em todo o planeta que estava usando este LDP. Então, nós estamos indo para o pé. Cuide de todas essas forças para cinco resoluções ao norte desta. Então os olhos mdb basicamente Avanex, que é a linha de base padrão. Então, todos os mais profundos serão iguais as mesmas ficções do que nós realmente temos P I, que vai ser 1.5 tão multiplicado por 1,5 é 75 pixels, então você pode ver que você está obtendo a relação entre DP e pixels em diferentes estes densidades e resoluções de telas e você pode ver aqui para sair vai ser multiplicado por dois, que é para ex sdp I e, em seguida, XX sdp I três x multiplicado por 31 50 triplo X HDP I Ele vai ser multiplicado por quatro, e você pode ver aqui temos 200 pixels, então 50 DP vai ser 200 pixels nesta tela essas telas thes telas grandes ou de alta densidade e o mesmo para outros. Espero que não tenha destruído essa relação sobre como calcular os diferentes tamanhos de pixel para diferentesDP em diferentes resoluções de densidade de tela. Espero que não tenha destruído essa relação sobre como calcular os diferentes tamanhos de pixel para diferentes Um trabalho extra, três x e quatro x. Vamos falar mais sobre STP XXV p A. nas próximas lições. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 6. O que são baldes densidades?: Agora vamos falar sobre o que nossos baldes de densidade e por que precisamos deles? E por que queríamos criar nossos ativos gráficos? Nossa Grã-Bretanha é nossos ícones em várias versões diferentes de cada mapa de bits que vamos criar . Ok, Então, se você está projetando um botão ou um ícone para o seu aplicativo móvel Android, você vai extrair o mesmo ícone no reboque quase três ou quatro tamanhos diferentes. E por que precisamos disso? Porque vamos dar suporte a dispositivos diferentes. Um tem mais pixels. Densidade misturadora. Um tem menos um e outro um que é muito alta densidade. Então precisamos de ícones separados tamanhos separados fora botões para cada um fora deles. Caso contrário, o que é que ele vai fazer? O sistema Android vai escalar sua única imagem? Se você estiver usando apenas uma única imagem, ele vai escalar sua imagem e ele está indo borrão do dedo do pé. Sangue vai ocorrer na sua tela. Muito bem, tão pixelizada que vai parecer embaçada e pixelada, por isso não precisamos disso. Então vamos estudar que diferentes baldes de densidade e há como toneladas diferentes dispositivos que têm porcos diferentes, revoluções doentes e baldes de densidade. E nós estamos indo para o pé. Categorize-os em três ou quatro neste baldes diferentes. OK, então vamos ver. O que são estes? Ok, agora na tela há cinco baldes de densidade diferentes. Um que eu omiti, que é LDP, que eu não acho que você precisa de design do dedo ou desenvolvido para. Ok, então este é o PMM de base deles. Ganhei 60 GPS. Então, qualquer dispositivo que tenha resolução ou densidade que esteja mais perto deste 1660 vai cair neste balde do que qualquer dispositivo que tenha 240 p por r mais perto deste 20 dedos 210. Eles vão estar nesta densidade, em seguida, telas de alta densidade extra. Este é dois X, todas as telas que têm algo mais próximo de 3 20 Eles vão cair nisso. Em seguida, temos 40 db i ou XX sdp I três x tela e todas as telas diferentes que têm telas de alta definição extra alta definição. Eles vão estar aqui, densidade, densidade, então contra as telas. E então nós temos este extra extra extra telas de alta densidade que vão ser 6 40 db I e eles vão cair nesta categoria. Agora você pode ver que eu mostrei a mesma caixa azul ou com tamanhos diferentes na tela. A razão é que este é o mesmo tamanho de pixel fora da mesma carga que vai aparecer em telas diferentes como esta. Ok, então se nós temos este botão que é deste tamanho, são impostos de consumo como talvez 200 por 100 pixels. Vai ser 350 imagens como esta um pouco maior, 1,5 vezes maior na tela para Buda. Duas vezes maior neste, três vezes maior neste e quatro vezes maior neste. Então você pode ver como podemos criar ativos diferentes para todas essas telas. Precisamos de um ativo, e precisamos de vários tamanhos diferentes desse ativo para exibir todas essas telas DPS diferentes . Agora vamos olhar para um exemplo Agora você pode ver esta é a imagem tirada do material do Google projetar sua própria documentação de linha, e você pode ver ou ouvir eles mostraram como diferentes tamanhos e como diferentes ícones ou imagens eles estão indo toe ter diferentes resoluções ou escalas em diferentes olhos DP ou telas de densidade. Agora você pode ver que esta é a nossa linha de base. Então, se um ícone é como 48 por 48 pixels neste tamanho de linha de base, ele vai ficar um pouco maior. 1,5 vezes ligado, Http. I do que em X em X HDP I telas de altura extra e densidade os próximos dois pele de alta densidade extra para que você possa ver como esse tamanho é. Habilizando um x 1,5 x dois x três X e quatro x Então isso é que você precisa manter esses pontos em sua mente que estamos projetando talvez projetando para este, ou vamos usar um modelo que estávamos. Nós vamos projetar para pescoços e vamos exportar nossos gráficos para todos esses tamanhos diferentes, onde você pode fazer isso para a loja e obedecer X t esboço em qualquer software que você está usando. Então não precisa se preocupar com isso. Nós vamos cuidar e tirar isso nas próximas lições. Espero que você tenha entendido entendido, menino diferente este olhos DP, baldes, baldes tensamente têm e por que nos preocupamos com eles e como podemos. Vamos esperar tamanhos diferentes de imagens diferentes para exibir todas essas telas de densidade e densidade de alta densidade. Espero que gostem desta lição. Vamos passar para a próxima lição. 7. Ferramenta online para resolução da tela, tamanho da dispositivo e densidade: Ok. Agora eu vou mostrar a vocês uma ferramenta muito simples, que é de material de design material dot io dispositivos de barra, e você pode ver aqui você pode ver todas as diferentes alturas e pixels escritos. DP em pontos proporções fora de seus dispositivos, polegadas e centímetros, dimensões da tela e da plataforma, e também você pode ver no lado direito, diz Densidade. Então, se eu clicar nele, você pode ver que estas são as telas com um mdb I ou dispositivos de densidade média. Chromebook 11 Chromebook 30. Estas são dimensões muito grandes, você pode ver que são polegadas, e se formos para o dedo do pé, eu faço você ver que tem tamanhos diferentes. E se você navegar por isso, você pode ver se você vai para este três X, você pode ver que existem dispositivos de 5,1 polegadas, e você pode ver aqui nós temos Sony Xperia e Itis 5.2 e 2.5 é a aldeia e 4,5 polegadas a altura fora seus dispositivos. Então estas são todas as resoluções diferentes, e você pode ver aqui está a resolução da tela. Aqui está o cirurgião em DP, e também você pode ver que existem diferentes dimensões DP para outros dispositivos como Google Pixel Excel Order. Então, se você está projetando para algum dispositivo específico como Nexus cinco para Nexus seis como você pode ver ou ouvir a seguir um seis ou seis p, eles têm DP dimensional quatro limão por 7 31 Mas eles vão cair em 3.5 XXX como dp I. Então estes são basicamente tomando que conjuntos deste balde de densidade, e há tamanhos diferentes. Você pode navegar por aí, se quiser. Se você está procurando um dispositivo específico, você pode olhar o aspecto do aspecto. Rácios. DP Hide A resolução de tela em porcos também é densidade de tela, tela, dimensão e polegadas e centímetro, e também a plataforma sobre o que eles estão trabalhando. Então isso é tudo sobre isso. Dispositivos de design de material esquiado, e você pode olhar para fora para todos os tamanhos diferentes, se você quiser. Espero que tenha gostado desta lição. Vamos passar para a próxima lição 8. O que são tipos de SP no design de materiais do Android Design?: agora neste s e vamos falar sobre pixel escalável ou SP. Esta é outra unidade que o design de material android está usando, mas para fins diferentes. Agora todos vocês já ouviram e falamos sobre densidade DP pixels independentes para sua resolução de tela e layouts e diferentes tamanhos diferentes botões e afirmações. Mas este SP é quatro força como semelhante como BB. É para nós para a força e ele vai salvar todas as quatro configurações no design de material suportado . Então, sempre que você estiver indo para dar seu tamanho é seus quatro tamanhos para seus desenvolvedores, você vai falar em sp e pixels escaláveis. Então seus desenvolvedores sabem que esse designer realmente sabe minhas coisas. Ok, então a principal diferença é que SP ndp eles são realmente os mesmos. Mas SP vai salvar todas as configurações. Você, portanto, define o quão grande ele é. Muito é ousado ou norte ou algo assim. Então este vai ser um dedo relativo do seu tamanho de tela. Então, se você estiver usando SP em seus quatro tamanhos, ele vai ser relativo à sua tela e densidades, e ele vai para o mesmo tamanho, Ele vai aparecer no mesmo tamanho em diferentes dispositivos. Agora vou mostrar-vos um exemplo de 20 s antes disso em diferentes densidades. Então temos nossos próximos 1,5 x dois x três x e quatro x telas. Agora você pode ver que eu acho divertido 20 pixels que está em mtp I porque em MDP I este é o rastreado e stevia. Meus pixels de tela reais serão iguais ao SP ou DB real. Ok, então 20 s p é igual a 20 pixels no meu mtp I que é a nossa densidade de linha de base. Então temos 1.5, então você pode ver 20 multiplicar por 1,5 30 30 pixels. Agora você pode ver que esta borda está basicamente mudando porque basta tomar um exemplo como este é um fardo e este é um texto no botão. Agora, se você vê neste tamanho a amargura pequena, então o texto pequeno parece ótimo, mas neste tamanho, esse texto se você usar os mesmos porcos mal valor fora do texto aqui ele vai parecer muito pequeno e vai ser ilegível. A habilidade de chumbo sofrerá muito. Também a legibilidade. Então o que vamos usar é que vamos usar a realidade quatro tamanhos, que são SP. Então isso vai ser 30 porque na verdade é e ele está indo toe traduzir SP, que é igual a 20 s, ser multiplicado por 1.5 30 20 múltiplo sempre para físico, 40 e 20 múltiplo sempre três é igual a 60 pixels e 20 multiplicar antes 80 picaretas é. Então, se você estiver projetando para três dispositivos X ou duas semanas dispositivos de 1,54 X, você precisa multiplicar seus quatro tamanhos com essa taxa de densidade e quando você estiver indo para falar com seus desenvolvedores sobre isso, você não vai dar a eles tamanhos em pixels. Você vai falar com o Espy agora. Esta é realmente a escala tipográfica diferente fora design material android, que é de você pode ver aqui temos o botão, todas as tampas 14 sp, tamanho médio. Eles estão usando um robô pagar. Isto é basicamente roboto e você pode ver que este é o tamanho das legendas. Tamanho normal do corpo 20 sp, um tamanho do corpo, também. Você pode usar 14 SP regular. Tudo o que você pode usar médio 14 SB ou SP médio para desktop. Então, se você está projetando para desktop usando design de material para o cromo aplicativos de parada ou algo assim, você vai usar esses três valores. Então temos títulos que podem ver média 20 SP Headlines vai ser 24 SP e acima. Você pode ver este jogo um também está dirigindo Desesperado foi maior direção exibir árvores muito maior direção e exibir para é muito, muito grande cabeçalho. Então isso é basicamente chamado escalas tipográficas e eu falei muito sobre elas tipográfico, ritmo radical e escalas tipográficas no meu curso tipografia para designers e desenvolvedores . Então é assim que eles desenvolveram este SP. Ele vai permanecer o mesmo porque não é dependente de pixels. São pixels capazes. Basicamente, espero que você tenha entendido o conceito fora das escalas tipográficas de material de SP e ah andróide e como vamos usar diferentes tipos de tipos e tamanhos para diferentes exibição de em exibição. Duas subposições de títulos, corpos, basicamente para parágrafos, legendas e encargos. Espero que tenha gostado desta lição. Vamos passar para a próxima lição 9. ♥ Como a unidade DP: Está bem agora à distância. E vamos falar sobre design seco no uso do Adobe X'd. Que tamanho de arquivo ou modelo são placa de arte que vamos usar. Este é Adobe X T. E nesta tela, esta tela de boas-vindas você pode ver lá nós temos este Android móvel, e você vai clicar nele e ele vai começar com e direito livro de coração móvel. Então, é muito fácil nisso, então seja extra porque não é Ah, porcos, software baseado mal. É um software baseado em vetor, e é mais fácil de projetar nele. Ok, então apenas arraste e elipse assim, e, uh, Jack, alguma imagem aqui, e você vai criar algo semelhante ao mesmo botão de novo, e eu estou vai criar algo aqui. Então, se você não sabe como usar este adobe x t, você pode tomar meu curso adobe X'd, eu tenho ah,curso eu tenho ah, pleno direito da grandeza em direção ao nível de Marte tudo o que eu discuti dentro deste curso. Então, se você não sabe como usá-lo, você pode ir e verificar esse curso. Ou você pode até me mandar uma mensagem para pegar o curso em um desconto ou algo assim de novo. Então vamos usar algum texto aqui. Este sou eu. Algo assim. Este é o mesmo exercício que estou fazendo para Ah, na loja de fotos. Eu não fiz loja de fotos no anterior Ouça o que você vai fazer aqui, e eu vou usar este veículo ou aqui assim, e você pode usar alguma coisa. Contrate-me algo assim. Então eu vou tirar essa imagem da minha filha. E você pode ver o quê? Aqui, esta imagem e um deck aqui. E também o seu nome. Sim. Vê, ou algo assim. E eu vou cuidar do resto. Está bem? Então crie algo assim em Edo, Android Mobile e Ah, mais uma coisa. Eu gostaria de se você clicar nesta borda de arte com tamanho. Aqui é 3 60 por 6 40 Se você quiser aumentar a pele ou você quer projetar para algo como 411 e ah, 411 com e 700 algo 1937 foi a altura para próximos seis ou maiores dispositivos como, Ah, Samsung s Oito ou algo assim, você pode especificamente projetado para eles, se você quiser. Você pode usar algo assim Agora há mais uma coisa que eu gostaria de discutir aqui , que é diferente da loja de fotos. É que em um não b x d Você está sempre indo para projetar em um X. Ok, Então, se você passar por aqui e ir para exportar exportação sobrecarga e selecionado, você pode ver se você vai para Android, você está indo para selecionar qual MDP I você estava usando. Ok, então você está indo sempre para selecionar este 100 MDP I e apenas indo para exportar todos os seus ativos com isso? Nós vamos falar mais tarde sobre essas afirmações e esses problemas agora eu quero que você crie algo assim e faria no meio. Ok, algo assim e apenas exportado são tirar uma captura de tela de seu este projeto e cúpula nesta tarefa. Está bem? Você também pode enviar seu trabalho por meio de respostas a perguntas, se quiser. Oh, então se você não pode enviar usando atribuição ou você pode ter ignorado atribuições, você pode fazer isso mais tarde. Então eu espero que você tenha gostado desta lição, como você vai criar diferentes placas de arte em que tamanho X ou densidade você está projetando, indo para projetar. Isso vai ser X'd. Vamos passar para a próxima lista. 10. ♥ Primeiro projeto para estudantes: Agora, esta é a hora da sua primeira missão, e vai ser muito simples. Você precisa abrir o seu Adobe X'd e criar um novo documento que vai ser o quadro de arte fora do Android Mobile, que é 3 60 por 6 40 Você já sabe como abrir este modelo. E se você não sabe, você pode clicar sobre as placas de arte e deixe-me o selecionado e você pode ver aqui nós temos este Android móvel e você também pode excessos a partir da primeira tela fora deste adobe X t. E agora o que precisamos fazer é você precisa dedo do pé. Use sua imagem se quiser. Oh, se você não quiser usar seu e-mail, você pode usar qualquer outra imagem. Mas eu prefiro que você use sua imagem como você pode ver. Esta é a minha imagem. Use algo como esta imagem de avatar. Então você pode dizer algo essências ou, um, dem bases ou qualquer que seja o seu nome. Ok, então você vai escrever um texto introdutório sobre você, talvez. O que você está fazendo? Que trabalho você está fazendo? O que você está procurando em quais são as coisas que você gosta O quê? Quais são as coisas que você gosta de ler? Como você pode ver aqui, eu mostrei meus interesses, e no final, você vai usar esse fardo. Uh, dedo do pé tem alguma sombra nele e texto branco. E vai ser tudo tampas porque a maioria dos botões no design de material android eles são todos tampas. Agora, sobre o tamanho é esta coisa vai ser 10 por 10 dp que é na verdade o mesmo tamanho em adobe x t. Então, apenas 10 por 10 isso vai ser 20 sp ou ah, porcos escaláveis mal. Então isso também vai ser 16 tamanho e este é este texto neste botão também vai ser 16. O tamanho do botão será 200 por 48 BP Então, por que eu estou recebendo dando a você esta tarefa apenas para torná-lo familiarizado com todos esses tamanhos em que tamanhos de mergulho e tamanhos usados na desculpa adobe Eles vão ser o mesmo que você está projetando para Avanex. Depois de concluir esta tarefa, você vai tirar uma captura de tela deste. Você também pode usar este cabo de software gratuito para encurtar sua tela. E uma vez que é como no início, você pode selecionar sobre isso e você pode Foi algo assim. Tela de captura cortada e carregada. E mostre-me seus projetos. Jogo outra maneira fora Extraindo seu este designers de materiais android goto exportar todos os furos de arte e nós vamos selecionar este android e selecionar um quatro pastas onde você deseja exportar e exportar nossos touros de arte. Ok, agora nós vamos procurar na pasta de exportação se você clicar duas vezes nele e você pode ver aqui nós temos isso. E ah, vamos usar algo no meio, talvez excesso dp eu uso esse tamanho e basta fazer o upload, OK? E eu vou revisá-lo. Então, apenas para garantir que, você sabe, entenda algumas das coisas e como você pode facilmente começar a projetar com o Adobe X'd. Então, se você tiver dificuldade em usar e obedecer X t, você pode fazer meu outro tipo de curso de protótipo de design X T em Colaborated, que vai cobrir todos os conceitos básicos. Ok, então estou ansioso para ver sua tarefa, seu rosto, seus gostos e desgostos e o que você está planejando no futuro? Espero ver seus projetos em breve. Vamos começar a fazer sua primeira tarefa agora. 11. Regiões de interface para interface de Android: Não. Antes de entrar em nosso projeto, vamos nos familiarizar com o que são diferentes estruturas e água. As diferentes regiões da interface do usuário. E quais são seus nomes fora do design de materiais Android? Porque precisamos nos familiarizar com isso porque vamos falar com nossos desenvolvedores sobre isso. E quando estávamos projetando, precisamos saber o que esse nome de região é no sistema projetado Android. Então vamos começar. OK, agora, primeiro, vamos ver esta imagem aqui. Este é material são suas diretrizes e você pode ver o que? Aqui. Este é o nosso Akbar, que é que você pode ter visto muito fora do título APS aqui na Primary Toolbar. Esta é a área de conteúdo. Esta é a barra inferior onde temos navegação inferior aqui. Alguns ícones, talvez três ou quatro. Isto é basicamente esta cor azul claro do tipo Seoane. Isso é chamado de botão de ação flutuante. Agora, à esquerda, você pode ver que este é o lado nunca, que também é chamado de navegação desenhada. Gaveta de navegação. Valete desenhar. Certo, então é à esquerda. E se você tocar aqui no ícone do menu do hambúrguer, ele vai deslizar por aqui. Agora você pode ver que isso está certo. Navegação. Vai expandir algumas das áreas. Se você tocar em algum lugar, ele vai deslizar para dentro. Mas você pode ver que há um pouco de diferença entre os lados. Nunca. E agora o lado nunca tem mais prioridade. Vai levar toda a tela. Considerando que esta navegação direita, ele vai deixar a barra de status. Certo, então a de cima, que é a área mais escura, é chamada de barra de status. Ok, agora, se você olhar para a estrutura estabelecer, também é a mesma coisa. Só um pouco gasto. Não vamos projetar agora para tablet. Mas se você está projetando para tablet e que parar, você precisa vê-los porque há mais algumas opções disponíveis aqui. Como você pode ver. O que? Aqui e desktop mais. Temos uma barra de ferramentas secundária ou outra barra de ferramentas com a ferramenta primária, mas porque temos mais espaço. Então este design de material de design é realmente incrível. Está se expandindo com seu de tamanhode tela. Certo, então vamos para a próxima. Ok, então vocês agentes, vocês podem ver divisórias verticais. Como eles estão usando isso Este é divisor horizontal. Aqui no topo. Este é o divisor vertical. Apenas perguntou linha cinza e ah, separando a área esquerda da direita. Ok, então eles disseram que se você quiser criar algo assim, você precisa usar espaço em branco em vez de, você sabe, criar muitas regiões diferentes. Não tente criar muitas regiões, apenas uma região e use espaço em branco para separar outros elementos, como carros e outras coisas. Ok, então vamos falar sobre agora. Barras de ferramentas. Agora todos viram as barras de banquinho no topo. Eles têm ferramentas diferentes como estas. Ah, esses ícones. São três dardos, o que é muito mais. Eu só ia te mostrar mais itens. E este é o título aqui. Estes são chamados de barras de ferramentas e você pode ver que existem muitas variações para essas barras de ferramentas. Existem barras de ferramentas finas, barras de ferramentas de provedor bit. E depois há barras de ferramentas que se destacaram. Estes são para exibições de tablet e desktop. Esta é outra barra de ferramentas chamada barra de ferramentas do cartão. Você sabe, você pode ver aqui eles têm usado algum estilo de cartão fora do caminho interfere para criar esta barra de ferramentas. Esta é barra de ferramentas flutuante e esta é destacada. OK, então eu não quero entrar em ah muitos detalhes, mas você precisa saber que estes são contados barras esta é barra de ferramentas inferior porque muitas vezes seu designer, eles estão indo para falar com seus desenvolvedores e eu acho eles devem estar no mesmo ritmo. Eles pelo menos sabem como sobre o que chamar diferentes elementos e como eles estão indo para interagir. Ok, agora o principal, vamos falar sobre este ar. Mas isso é muito importante porque todo aplicativo vai ter este Akbar. E uma vez que vamos começar a projetar, vamos olhar para suas diferentes especificações. Mas agora vamos olhar para o que são diferentes porções. São ícones de ação. Estes nunca são ícone, que vai deslizar para cima da nossa gaveta de navegação. Estes são muitos ícones para ver mais opções de menu. Isso é tal e estes são mais ícones de ação. Você pode colocar um ou dois ícones aqui. Ok, então aqui estão diferentes variações das equipes claras e escuras. Você pode ver por aqui. Isto é como ele. Fale com ele. Você também pode ver que a sombra é um pouco mais clara no nosso aqui de um mais escuro aqui. Ok, então há mais uma coisa. Você também pode torná-lo transparente. Então, qualquer cor que está no fundo fora do seu aplicativo em toda a tela, ele está indo dedo do pé mesclar neste. Então, estas são opções diferentes. Estes são outro aplicativo. Cores abstratas como eu tenho esta cor azul e um pouco mais escuro azul para esta barra de status. E não vamos olhar para essas especificações de design agora. Ok, agora você pode ver aqui nós temos ah, menus. E ah, você pode ver que estes são menus. Quando você pisar aqui, você vai ver isso ou local tocar nesta área. Este é um ícone de filtro. Este é o filtro de seta para baixo. Chama-se greve. E se você clicar neste, ele vai mostrar isso. Ok, então um pouco sobre como esta barra de status vai se parecer e como você vai, você sabe, usá-lo no sistema de design android. Ok, agora você pode ver que vai ser no topo, e é ihsaa eu não vou para os tamanhos Nós vamos para os tamanhos estão em DP na próxima lição. Agora, estamos apenas, você sabe, olhando para o que são diferentes áreas e como podemos representá-las ou como elas podem variar em diferentes aparências. Ok, então eu vou descer agora. Você pode ver por aqui. Aqui está outra cor baseada em conteúdo que eles tiraram deste plano de fundo. Este é um pouco transparente, mas é preto. 000 20% 0 de volta. Ok, então eles têm Jean. Eles estão mudando a opacidade Eu realmente amo como eles, você sabe, mudar as coisas lá em sistema de design seco ou design de material android. Agora aqui você pode ver que temos a parte do status das ações. Este estado está impedido de tirar a cor daqui. Esta é a barra de status de vida 70% branco f f f. Portanto, há muitas variações que você precisa dedo do pé. Mantenha sua mente aberta que se você está projetando algo no design de material android, você pode ter muitas variações para este título policial. Mas agora esta é a barra de navegação Android. Ele está presente em alguns fora dos telefones. Principalmente telefones do Google, eu acho. E vai ser escuro e claro. Seja qual for. Você pode usá-lo se quiser. Oh, ok. Então vamos falar sobre o lado. Nunca se sabe que o lado nunca vai ocupar tanto espaço e deixar alguns fora do espaço aqui. Ele vai se sobrepor em todos os elementos por trás dele. Ok, então estes são exemplos diferentes. Deixa-me mostrar-te. Este é o exemplo da esquerda. Nunca. E vamos ver o quê? Seu exemplo fora do agora. Ok, então eu vou tocar isso. Então este é agora você pode ver o deslizamento dentro apenas na área de conteúdo. Então é mais sobre esta imagem. Então eles abriram a imagem que você pode liderar. Você pode voltar. Ok, então isso é apenas agora está agindo como homens adicionais. Homens, homens vocês por esta imagem. Ok, então essa é a diferença. Se você está se perguntando por que há agora, mas nunca deixou o lado. Nunca. Esta é a diferença. Isso vai levar a tela inteira, e você não pode fazer nada aqui mostrando alguns fora da tela atrás. Mas ele está indo para o agora vai pegar a tela inteira, e ele vai mostrar mais opções sobre a mesma área de conteúdo. Ele vai apenas ocupar a área de conteúdo, não a tela inteira. Ok, agora estes são quadros brancos ou cartões, eu acho. Ok, então é apenas, hum apenas tenha em mente que a maioria do conteúdo no Android seu sistema de design é 100 material design. Está na forma fora destes cartões, e eles vão ser assim. Tenha um pouco de sombra. Este é o botão ligado. E temos vários cartões. Tome um excessivamente outros carros como esse e você pode ver o que aqui cardado conteúdo e se expande e colapsa. E este é um focado seu bar em móveis e outras coisas. Então, estes são todos os elementos cartões, barras de navegação, barra de status ou sistema, área de conteúdo da barra de ferramentas primária, barra inferior. Certo, então vou te dar outro exemplo. Como eu te mostrar isso é um bar inferior. Você pode ver aqui é a navegação e navegação, e no topo fora dela, você pode ver que temos favoritos explorar uma conta de forma semelhante, este e este aqui são três equipes e estes são basicamente a navegação inferior que será global para todo o aplicativo. Global significa que vai ficar. Manter este fundo durante toda a aplicação ou parte oferecida. Então isso é, eu acho, tudo sobre todas as diferentes regiões que você estudou todos os cartões barra de status Parar em uma barra conteúdo de navegação inferior à esquerda nunca ou desenhar jarra esquerda e navegação direita e ação flutuante botão. Ok, então eu espero que você tenha gostado desta lição. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 12. Como o design de materiais: Ok, vamos olhar para o que é a equipe ou o básico fora do design de material Android. Agora, este design de material android é baseado em empilhamento de papel um sobre o outro. Agora, você pode ver neste diagrama à direita há dois elementos. Um é este papel, papel branco. E há outro botão ou e um papel de forma arredondada em cima dele. Você pode ver que isso é excesso de Z. Portanto, tudo no design do seu material é elevado com fácil acesso. Ok, então cada elemento tem ah, espessura de material fora de um dp. Certo, assim como as pessoas, as pessoas têm uma espessura muito leve. Papel muito fino, mas tem alguma espessura. Ok, então papel e coisas em cima um do outro, apenas papel semelhante empilhando no topo, fora um do outro, como origami. Você pode Você está criando alguns design ou interfaces, colocando botões diferentes. Barras de ar diferentes em cima. Fora da base estão o papel base. Sabe o quanto mais distante? Um elemento é de outro vai ser atolado em excesso Z. Quanto é? Elevada da base. Ok, então elementos diferentes têm diferentes animações e sombras, mas agora vamos falar sobre isso na próxima lição sobre elevação e sombras. Sombras materiais diferentes. Agora precisamos ver e entender. Este é o excesso de eixo y e excessos coisa que quanto é uma espessura fora? Algo como você pode ver sua cabeça aqui é um smartphone e sua doença está atolado em Z OK, OK,z excesso que vai estar tomando Ele vai ter alguns três forma d. Se removermos este fácil acesso do que é, basta fazer o ou bidimensional. Então, para fazer este efeito três d e esses botões e sombras, eles estão usando basicamente duas sombras. Então aqui temos, ah, uma sombra da luz chave uma luz e a sombra da luz ambiente. Luz ambiente significa que vai ser luz muito afiada e você pode ver que tem sombras suaves ao lado. E há nós temos iluminar sombras escuras porque a luz está em algum lugar aqui no topo e combinando ambos eles têm essa sombra mista, que é basicamente a sombra andróide. Ok, então tudo isso está trabalhando com o eixo Z para que você possa ver este papel. São este botão ou este elemento é elevado a partir deste fundo usando esta sombra. Então eles são, você pode dizer, fingindo ser como três elementos D e usando a sombra e esta elevação. Na próxima lição, estamos indo para o pé. Veja o que são diferentes. Sombras e elevações e água, diferentes elevações para diferentes elementos. Ok, então cada elemento tem elevação diferente, quanto maior é e quanto elevado é da base. Então vamos passar para a próxima lição. 13. Sombras materiais: Ok, agora, neste é dentro, nós vamos olhar para o design de material Android, sombras e elevação e como eles realmente funcionam um com o outro. Ok, agora, antes de entrar em mais detalhes, você pode ir para esta filha material, suas diretrizes de barra barra barra recursos vida barra sombras filha CML e não, você pode ver aqui nós temos esboço ilustrador e para o arquivo show. E você também pode abrir esse arquivo de esboço no Adobe X'd. Então, se você tiver um não, seja extra, você pode usar este. Ok, então eles têm que sombras umbra e penumbra de um é mais escuro. Sombra este aqui. E este é mais leve ou macio. Shero e ah, eles têm todos diferentes, sabe? Ah, diretrizes para quanto ou quanto vai espalhar quanto OPEP é, quanto sangue vai ter. Então, estas são todas configurações diferentes. Mas não vamos nos lembrar de nada disso porque já podemos baixar esses três para um show, arquivar nosso arquivo ilustrador ou arquivo de esboço e usá-los. Ok, agora vamos para este efeito de elevação. Está bem? Agora elevação significa que quanto na distância no eixo Z é de um elemento para outro . Então, se um elemento como este está na parte inferior, você pode ver que ele tem que dp elevação. Tem alguma sombra e você pode ver que é elevada a partir desta base. Esta é a grande base do Eric. Aqui é para DP elevado a partir da base. Por isso, tem uma sombra muito suave, não algo. Quando algo vai ser mais elevado, ele vai ter mais sombra e mais espalhado fora da sombra. Ok, então é muito natural. Agora você pode ver aqui nós temos este é o diagrama. Aqui temos o eixo Z E se ZX está se movendo no topo e a distância entre esses dois elementos é 60 p Então basicamente a elevação deste e este é 60. Ser elevação significa que a distância do topo fora de um elemento este inferior, os dois com medo assim este. Ok, então a distância entre este e este vai ser a elevação. Mas quanto? Este papel de parada é elevado a partir do da parte inferior. Ok, então se você tem, você é você tem duas mãos. Basta sobrepor o no topo e ver o quanto as distâncias entre a porta fora deles. Esta é basicamente a elevação. Agora você pegou a idéia da elevação. Toda esta elevação é controlada pela sombra. Se você Se algo é mais elevado, ele tem mais sombra espalhada em torno dele e tem mais sombra, sombras mais escuras. Isso é tudo o que precisamos de nos lembrar. E você pode ver. Aqui estão as elevações que prendem de diferentes elementos. Agora, se algo é mais elevado como você pode ver elevação e DPS 24 isso significa que ele vai estar no topo de todos os outros elementos. Então, se algumas caixas de diálogo aparecerem ou algum seletor de cores algo estiver aparecendo na tela, você não poderá fazer mais nada. Então isso vai ser ter mais elevação e ter mais sombra arredondada do que temos Navegação desenhar Rij. Nossa folha inferior modelo de 12 dp é barra de ação flutuante. Você já os viu muitas vezes o circulado rebocado em e, em seguida, temos sub menu. Então temos este fundo. São cartões manuais barrados. Eles têm um DB fora da elevação e depois temos a barra de seis botões de ação flutuante. E depois temos um lanche da Abbott. Mas é basicamente parte de status um pouco de staters, que algo foi feito ou seu e-mail seus e-mails foram excluídos ou algo assim . Então temos este re indicador fresco País rápido Tal barra tal matéria que tudo isso tem três elevação off. Três DP. Então temos a elevação da carta descansando, botões corridos, elevação prendendo. Estes são os botões que têm ah, prendendo significa que eles não estão sendo pressionados ou eles não estão sendo tocados. Então, uma vez que eles são pressionados, eles vão ter algum efeito diferente de sombra. E este é o interruptor. Ele tem um dp então quase não tem sombra. Ok, então aqui temos o diagrama onde você pode ver o que Aqui, 24 estas são as elevações então e isso é basicamente fácil acesso de baixo para cima. E este está no topo mais. Isso está sobrepondo tudo o resto. Isso está sobrepondo todos esses elementos, e isso está sobrepondo todos os elementos abaixo dele. Então é assim que esta elevação e esta, hein? As sombras de design de material Android estão funcionando agora. Você pode ver aqui que temos essa ação flutuante, mas este é um bom exemplo. E então nós temos este AARP são agora você pode ver na barra é um pouco abaixo na elevação, então ele tem sombras mais claras, OK? E se você olhar para esta barra extra flutuante, ele tem mais propagação e mais médico em torno dele, ele tem mais propagação. Então ele está no eixo Z, então ele tem mais sombra. Então é assim que vai funcionar. Então temos esta gaveta app valete no lado esquerdo. Você pode ver o que ele tem elevação Mawr contendo ambos botão de ação flutuante em uma barra. Por isso, está a sobrepor-se a ambos. Sua sombra está sobrepondo todos os elementos por trás dela. Ele tem elevação off 16 para que você possa ver ação flutuante. Mas está por trás disso. Um corpo também está por trás dele. Então, estes são mais alguns exemplos de como essas sombras vão funcionar. Eles disseram que esta ação flutuante tem alguma boa sombra porque é elevada. Deve mostrar elevado aqui porque isso você pode ver esse Ah abaaoud na parte de trás. Ele também tem alguma sombra para que você possa ler tudo isso. O que são sombras diferentes e quais são valores diferentes. Mas não vamos nos lembrar de tudo isso. Você pode ver que estamos aqui para DP prendendo botão e pressionado Estado é que vai ser um DP significa que o botão vai ser elevado mais. Uma vez que você pressioná-lo e interagiu com ele, ele vai aparecer no eixo Z. Da mesma forma, este você pode ver o que aqui? Uma vez que algo é pressionado, ele vai ter mais elevação e sombra mais suave. É mais para cima. Você pode ver que a próstata é o dobro do estado de repouso. Estado de repouso significa botão normal que não é pressionado ou no trânsito e interagiu com. E uma vez que você pressioná-lo, ele vai dedo do pé, mover para cima ou para baixo e ter algumas diferenças de sombra. Aqui temos este cartão de cartão é basicamente este este este cartão de informação e ele tem descansando . Dever encarado ser investido. 80 ser Não, você pode ver que tem mais sombra porque ele é levantado e, em seguida, temos esses menus sub menus . Eles têm mais. Você pode ver o submenu tem mais sombra porque ele está no topo deste menu. Então temos esses diálogos. Eles vão estar no topo mais. E então temos esta gaveta de pressão 16 DP compartilhou aqui à direita. Esta é a folha de fundo mortal. Chama-se. Você pode ter visto quando você tenta compartilhar algo de algum aplicativo como Facebook ou algo assim. Oh, nosso compartilhar sua imagem e tentar clicar no compartilhamento, mas E ele vai mostrar que você está indo para compartilhar Gmail. Sair o Google ou o que for. Então é chamado de folha de fundo mortal. Em seguida, temos este três indicador fresco três dp É também botão e, em seguida, temos estes país tais código de barras. Você pode ver que este é tal bar e tem uma palavra a dizer duradoura para ferrar Estado três dp neste é snack-bar. Isto é basicamente apenas uma única ação de linha. Algo como aquele indicador na barra de indicação 60 p, então temos o interruptor. Este é o interruptor e tem uma elevação dp desligada. Então eu acho que é tudo sobre isso. Elevação e sombras. Vou mostrar-te como tenho estas sombras. Eu baixei material Io arquivo PST E agora você pode ver aqui nós temos todas as sombras então eu não preciso lembrar todas as configurações para talvez três d p Eu tenho todas as sombras comigo Deixe-me mostrar-lhe estas são todas as camisas, Sombras à direita você pode ver E nós temos ah, quatro DP. E há basicamente duas sombras porque as luzes eram duas luzes, há então há duas sombras. Um deles é este 176 e 10 24% que é Ah, um pouco de sombra clara. Lembre-se, eu acho. E este aqui é Sempra, e eu não tenho certeza se essas são palavras francesas, então eu posso não estar pronunciando-as. Certo. Ok, então é assim que eles têm múltiplos efeitos de multiplicação, porque essas sombras vão se misturar para que você possa baixar vá em frente e baixar essas sombras materiais dos recursos. Acha que vou apoiar todos os links de recursos para que você possa baixar estes e experimentar com eles. Espero que tenham entendido este conceito de elevação e sombra material. E eu realmente quero que você aprenda isso porque eu tenho Eu não vi nenhum curso ou ninguém pregando todas essas coisas diferentes. Então eu pensei que eu deveria fazer o curso mais detalhado sobre design de materiais, então eu espero que você aproveite a sessão. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 14. Grade de oito pontos no Adobe XD e design material: Árvore Vou mostrar-lhe o que é o sistema de grade de oito pontos e por que o design Android Mobile ou o design material do Google o usa. Ok, então agora eu estou no Adobe Exit E e, ah, você pode criar um novo quadro de arte, e nós vamos usar este Android móvel, e eu vou mostrar a vocês as grades quadradas grade e layout para e escrever mais mordidas. Está bem? - Não. Primeiro vamos para esta coalhada, certifique-se de que você selecionou este quadro de arte, e as colunas estavam indo para usar nossos seis, e em ambos os lados estavam indo para deixar margem fora 16 pontos. Então esta é a sua nota básica para o layout. Então, seis colunas em ambos os lados. 16 margem de coluna escrita é 48 espaço Qatar entre diferentes colunas. É isso? Então isso está lá. Basicamente. Agora vamos replicar isso pressionando a tecla arte ou opção. E agora vamos mudar para a praça. Ok, então tamanho quadrado você pode usar ou usá-lo porque não ganância é baseado em oito pontos sistema de grade . Então vamos dividir as notas da sua ou de cada caixa. Esta cada caixa de tradução do dedo do pé. Oito pontos são os oito pontos. Acho que sim. Agora, vou usar quatro. Agora. Por que eu estou usando para Porque eles são grau tipográfico ou sua linha de base tipográfica é senhora dedo do pé com esta linha de base de quatro db. Ok, então eles estão usando quatro linhas DP, você sabe, alinhar sua tipografia e separar o imposto um do outro ou a distância entre duas linhas em qualquer deck. Está bem , deixa-me mostrar-te um exemplo. Essa zona e eu vou digitar algo aqui com este tamanho de 16 e eu vou usar uh, Roberto, eu quero Vamos dizer olá, querido. Ok, então agora você pode ver o terno deles para bordo sobre. Ok, agora, você pode ver se você olhar para bombordo fora destas cartas, eles estão sentados nestas linhas fora quatro DP. Ok, então você pode ver aqui a linha está sentada aqui. Então há uma lacuna em quase duas caixas aqui. Então, uma lacuna DB entre ambos fora deles e, em seguida, esta linha também está tocando isso na parte inferior. Então é assim que eles estão mentindo vai ficar sentado assim. Ok, Então, se eu vou usar 16 mesmo se eu estiver indo para usar 16 pontos e, em seguida, vamos usar 24 que está lá deitado altura. Então você pode ver isso é como ele está indo dedo do pé como tão espaçamento de linha. Você precisa do dedo do pé. Sempre certifique-se de que é um múltiplo off quatro. Então, se eu for para 20 ele vai voltar a sentar-se nas linhas aqui. Então é assim que seu alinhamento de texto nossa linha de base de texto está funcionando. Você também pode usar algo assim para que você também pode soltar botões aqui em. Eles vão ser traduzidos de novo semelhante ao DP. Por isso, neste momento, o tamanho do meu saldo é 10 dp total de largura e 36 dp de altura. Então certifique-se de que você estava usando algo assim. Ok, então vamos diminuir o zoom e ver como ele está olhando S O. Esta é a grade. Você canoas pisar em uma linha em meus anos, seus elementos de acordo com a lá, oito dp creed ou quatro DP pixel. Ótima. Ok, então isso é basicamente quatro representado que eu estou usando é igual em reboque. Oito. Ou é semelhante ao ADP porque quatro é um múltiplo off. Ok, então o nosso múltiplo dos anos oitenta de quatro. Então eles são ambos quatro é basicamente metade fora dele. Então isso faz sentido. OK, então para se você está projetando no Adobe X T, eu acho que você deve tentar usar este grande couro quadrado do que este. Talvez este que você pode usar para o layout, mas eu deixo adoraria ver usando este direito Uma grade quadrada fora do quadrado, tamanho quatro dp e usar o Android Mobile Art Board E isso é tudo que você precisa. Ok, então eu espero que você tenha gostado desta nota layout e oito DPP excel Maior 40 pessoas celebrar e como eu tenho colocado para fora em Adobe X'd. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 15. Matrices e espaçamento vertical no design de aplicativos para Android: - Não. Você já entendeu o que é uma linha de grade DP ou um sistema atual de oito pontos e como projeto de material Enright é construído sobre ele. Agora vamos entrar em mais detalhes sobre espaçamento vertical, como diferentes elementos têm alturas diferentes, como essas alturas foram mantidas e por que todo esse design de material parece único e elegante quando qualquer aplicativo é projetado nele. Agora tudo é baseado no dimensionamento vertical, nas linhas e no espaçamento, e todo esse sistema, ele vai funcionar junto com seu oito pontos ou um crédito DP. Então vamos começar. Vou mostrar-lhes este é o documento que baixei do Google Material Design e está no Adobe Illustrator. E agora você pode ver que é sobre mais linhas de chaves móveis e espaçamento. Agora, há algumas coisas que você quer entender. ADP é o menor bloco ou o quatro DP é o menor tamanho de bloco no design de material android . Agora, sempre que você constrói algo, mesmo se você está construindo uma casa, deve haver pequenos blocos e deve haver alguns blocos maiores. Por exemplo, todas as suas janelas terão o mesmo tamanho. Então este é um bloco maior. Não é igual ao tamanho do tijolo que você está usando. Então, todos os tijolos, eles são o menor tamanho, que vai ser um TBI, por exemplo, e, por exemplo, por exemplo, o tamanho do bloco do segundo tamanho. Você quer usar um bloco maior, você quer usar 56 db para isso? Então, no design de material andróide, se você olhar para aqui, fixo, incremental, determinar, determinar com off estrutural você elementos. Então, principalmente os elementos U. Eles têm seu tamanho de 50 60 p inclement, então eles estão usando essa quebra maior para seus elementos U. Depois, há a segunda coisa, que é a chave de dimensionamento vertical. Agora, como diferentes elementos serão dimensionados. Qual será a distância entre eles? Ele é construído em todos esses blocos de tamanhos diferentes. ADP A chave de cor é este Um profundo é o tamanho 16 dp do que 24 48 64 56 70 para 80 um idiota. Então todo o design do material android é baseado nesses blocos de construção. Temos 123456789 tipos de diferentes tamanhos de tijolos, e vamos usá-los para construir nosso design de material android. Agora, dimensionamento vertical também está indo para o dedo do pé. Determine os tamanhos de diferentes elementos. Além disso, as margens horizontais serão por aqui. Então eu vou te mostrar. Deixe-me ligar o tamanho das teclas aqui. Agora você pode ver que eu tenho ah habilitado minhas linhas de chave verticais e você pode ver que eles estão basicamente mostrando as margens e as pinturas agora à esquerda e à direita. Se você se eu ampliar, você pode ver na esquerda e na direita. Há uma margem fora 16 db em ambos os lados. É igual margem e todo o texto que está aqui à esquerda. Ele está alinhado com 72 dp fora da distância da borda do lado esquerdo. Assim, o texto tem um petting ou margem off 72 ambos os lados têm 16 dp off margens em ambos os lados. Ok, vamos ver outras coisas. Você pode ver como isso vai ficar ótimo em todos os dispositivos diferentes. Agora você pode ver por aqui. Há margem dupla de 16 e 32 usada neste aplicativo de telefone onde eles têm mais ícones aqui alinhados aqui. Então agora você pode ver que há duas margens aqui 16 e 32. Então eles deram um pouco mais cabelo marginal quando há um melhor nem aqui. Então eles deram um pouco mais de espaçamento para este conteúdo dentro desta área aqui. Está bem. Da mesma forma, você pode ver aqui. Esta é a gaveta de navegação, e você pode ver aqui temos 56 tamanho dp, que é outro tamanho de tijolo, nosso tamanho principal elemento. E o resto é quase o mesmo. 16. 70 para 16. Depois de entender isso, você pode facilmente projetar APS com excelente aparência. E não será um mistério para você que como projetar usando o designer de materiais Coogan design. Certo, agora vamos voltar a essa chave de tamanho de partículas, e vou destacar o que são diferentes. Esconda este, e eu vou destacar este tamanho de tinta. Agora, se você olhar para essas cores, eles vão estar presentes neste ou 80 aqui. Agora você pode ver que este vermelho era igual a um DP. Então, uma distância lateral dp entre esses dois elementos, então temos oito e 8 16 db e entre nós temos uma linha separada. Deixa-me resolver isto e mostrar-te. Você pode ver que você sabe como o espaçamento está funcionando perfeitamente. Isso é chamado de ritmo vertical. Eles criaram um ritmo vertical agradável e bonito usando estas linhas chave e blocos de dimensionamento de teclas verticais. E agora, se você olhar para este aqui, este é roxo. Deixe-me ver. Este é 72 DP de tamanho em Hyde. Isso é vertical com eles. Então, tudo é. O tamanho está na vertical Agora isso é Ah, azul pálido. Vamos ver. O que é um azul pálido azul pálido é 48 dp. Então isso é, uh isso é 40 anos DP. Então este é 48 dp Uma cor azul afiada que é 50 60 p que é a sua barra de ar. Está em 50 60 p. Então, se você tiver este arquivo, você pode facilmente calcular todo o sistema de dimensionamento diferente fora do design do material e será um pedaço de bolo para você. Você pode ver que isso é um pouco roxo. Isto é azul, então estes também são explodidos. Significa que acho que esta é uma ou duas linhas de tuberculose aqui. Vamos abrir as margens horizontais agora. Estes são os mesmos que discutimos antes dos 16 anos. 72. Todas estas linhas são 16 dp largura e toda esta distância é daqui para aqui É 72 db eo texto está alinhado no 72. Eles estão do lado. Ok, Então eu espero que você tenha gostado desta lição e você tenha entendido o que faz este tamanho vertical e o que é os esquis? Estes são todos os blocos de construção de diferentes tamanhos para design de material android. Mais uma coisa que eu quero mencionar aqui há um nasci caixas delimitadoras para cada elemento que você pode ver, mesmo que cada elemento é diferente esses ícones em torno dele ou algo assim . Mas eles são caixa delimitadora, que é o tamanho real neste design material android é diferente. Então este é 56 por 56 DP. O cabelo é o botão. E eu acho que este é ah, talvez 48 DP, eu acho. E esses ícones são 2040 pessoas iriam falar sobre esses ícones mais tarde na próxima lição. Espero que tenha entendido esta chave. Linhas verticais, ritmo vertical, espaçamento vertical. Se você não sabe o que é item vertical, eu tenho um curso completo sobre tipografia, vertical deles e todas essas coisas. Se você quer levar isso, você pode levar isso. Espero que tenha gostado desta lição. Vamos passar para a próxima. 16. Visão e de botões e ícones para design para Android aplicativos: neste. Ouça, vamos falar sobre botões, ícones e tamanhos de alvo de toque. E quais são as pinturas aplicadas nos ícones em dispositivos Android e design de material. Agora há padrão para qualquer alvo de toque porque você é ícones e seus botões, eles serão interativos. Então, se alguém vai bater no dedo do pé sobre eles, eles devem ser igual dedo do pé do tamanho do dedo. Ou pelo menos é mais fácil para eles tocá-lo. Então os tamanhos padrão 48 antes do A.D.B. A.D.B A.D.B E é baseado na pesquisa de que o tamanho do dedo cada dedo é de 7 a 10 milímetros. Então, acordo com isso, seu tamanho é quase nove milímetros escrevendo 48 dp então eles estão usando nove milímetros para seu padrão. Então, se você está projetando seu aplicativo em design móvel android ou qualquer tipo fora aplicativo móvel, você deve cuidar do tamanho estrela Stargate para os nossos EUA EUA Eu acho que é um pouco diferente, mas para Android é 48 dp. Então agora você pode ver do lado direito Há essa ação. Ícones estão no Anbar e depois temos Ah, aqui temos áreas mais capazes com são as imagens que você pode tocar neles. E ah, tem esse ícone de mais aqui. Isso também é interativo. E agora você pode ver Deixe-me mostrar-lhe o que é como eles estão usando diferentes seções aqui . Então este é o seu ícone aqui? Tem que cair fora rebatendo em torno dele. Você pode ver a área branca. Tem algum espaço. Portanto, é basicamente dp sobre e sobre. Isso você pode ver de novo. Há quase dois dp em todos os lados ou talvez quatro, eu acho. Então você pode ver ao redor que eles têm mais acariciando ou espaçamento nesta área rosa você pode ver o quê? Aqui. Então este é o seu ícone e em todos os lados é um quatro dp off pendente. Portanto, tenha isso em mente que se o seu ícone tiver 48 dp de tamanho, deve haver se você estiver projetando Você é um designer de ícones para o Android Mobile Labs. Seus ícones devem ter um carinho ou quatro dp em todos os lados. Você pode ver o que acertou Este é um alvo de toque. Então, neste caso, o ícone tamanhos reais 40 db Mas eles são tamanho capaz ou alvo toque área alvo é 48 dp Agora este é um ícone que é ícones pequenos padrão. São 24 porcos enfermidades ou 24 mergulhos ou DP. E se você olhar para ele, você pode ver. Mas eles são alvo de toque. L será sempre 48 dp e a distância entre essas ferramentas para áreas. Deixa-me mostrar-te. Você pode ver o que ouvir todos os ícones de pontos. 40 DP Estes são desviar nossos ícones. Eu chamo os pequenos, pequenos ícones que vão ser 24 dp Touch Target estará em ambos serão 48 mergulhos ou DP . E também há mais uma coisa que a distância entre fazer essas áreas capazes do dedo deve ser igual a 80 peças. Então o intervalo ADP entre eles para que você possa ver ou ouvir, ouvir. Temos uma profunda lacuna entre eles e novamente nesta seção. Estamos aqui você pode ver, discordar e concordar que há um limite de um DP entre eles. Então esta é a área de toque deles. Esse é o alvo, e a lacuna é um debate entre eles. Para que esse usuário não sinta falta de homens, Srta . Hábito. Eu acho que isso seria um pouco errôneo e clique em outro lugar se você quiser. Se ela quiser clicar em Discordou, ela pode não acabar batendo aqui. Então aqui temos outra vez. O tamanho dos botões, que é 30 60 p, é a altura mínima da carga. Esta é a altura mínima qualquer botão que você está projetando e escrever designer móvel Android modelo design 30 60 p é a altura e 48 db é realmente o alvo toque, então você deve ter algum preenchimento em torno dele para gerenciar este tamanho. Então você está acariciando blefe. O fardo deve ser 48 DP. Certo, mais uma coisa. Esses ícones aqui são chamados de ícones do sistema, seus ícones do Android. E se você quiser esses ícones, você pode ir para este um material ponto io ícones barra. Você pode procurar por qualquer ícone ou você pode navegar por todos esses ícones. Basta clicar em qualquer fora deles para que ele será selecionado e você pode ver na parte inferior você verá DP 24 dp 32 db 48. Seja qual for o tamanho que você quiser em preto ou branco e escolha o SPG. Eu acho que é a melhor coisa se você quiser P e G ou formulários ícone que pode gerar para você. Você pode selecionar qualquer um desses ícones. Na verdade, eu uso esses ícones no meu AP no exercício final desta lição, então certifique-se de que você pode baixar a partir deles material dot ru ícones barra e você pode baixar esses ícones. E agora eu vou seguir este aqui para mostrar alguns fora do estado fora de seus botões e como diferentes tipos de fardos têm. Então temos um botão de ação flutuante. Ele tem este simples afirmado e isso realmente sugeriu onde eles têm ele tem uma sombra ID mais propagação . Então temos este botão plano. Isto é organizado uma reta. Então isso é normal. Mas nesta é uma área alvo de toque, esta é novamente o botão normal em. Tem alguma sombra ao redor. Então estes são dois estilos de patentes. Então temos o mesmo botão, oprimido e incapacitado. Agora, no caso fora deste, a próstata terá uma borda arredondada como esta camisa cinza e desabilitada terá isso desativado, mas irritá-lo. Então estas são duas equipes diferentes, escuras e claras. E há mais uma coisa. Ok, agora eu vou te mostrar outro tipo de ícones que são chamados de aplicativo lançador. Ícones de ícones de produtos do design do Google material vai design de material e todos esses ícones que você pode ver esta é a tela tirada do meu dispositivo Samsung Android dispositivo, e você pode ver aqui estes são todos os ícones que eles estão em 48 DP. Eu tenho um curso completo sobre a criação desses ícones de aplicativo lançador de ícones de produtos Se você quiser, você pode projetar seu próprio ícone APS lá. Se você fizer o que puder, confira esse curso para que estes sejam outros ícones. Então os ícones reais, que vamos usar em nossa maçã chamados ícones do sistema e estes são chamados ícones do produto. Então, se você quiser mais detalhes sobre diferentes sistemas de grade e orientar seu uso para desenvolver esses sistemas de ícones, você pode ir para estas diretrizes de design realmente projetar diretrizes, estilo e ícones. Eu vou ligar isso vai mostrar-lhe este link compartilhar este link com você, e eu espero que você tenha gostado deste tamanho ícone, tamanhos botões e todas essas coisas fora usabilidade que o alvo de toque que precisamos? Se tiver alguma pergunta para me fazer, vamos para a próxima lição 17. Guias de materiais: nesta lição. Vamos olhar para as marcas do design de material andróide e por que as usamos. Quais são os tipos diferentes dessas facadas? E quais são as métricas e especificações de design? Quais são os tamanhos em DB ou dips para essas etapas? Certo, então vamos começar. - Não. Primeiro vamos ver quais são os componentes das facadas. São dois tipos. Existem dois tipos de guias. Um são passos fixos que você pode ver neste nesta área de sexta-feira, há três guias e eles não são ervas escolares. Então, se você tem, tipo, aqui quatro ou cinco toques, então eles vão sair da tela e você pode rolar entre quatro ou cinco guias diferentes. Abs fixos, eles vão ser três. Corrigir torneiras e você pode simplesmente rolar entre estes três, pisar sobre eles e mover o dedo do pé que seção. Agora haverá rótulos de tabulação presentes neles. Você pode usar qualquer cor fora de sua própria marca ou seu próprio site, ou seu próprio aplicativo, ou qualquer cor que você quiser em suas guias móveis. E isso é tudo. Está bem. Agora, por que os usamos? Esta é a segunda questão basicamente as abas. Eles vão ajudá-lo a agrupar seu conteúdo e ele fornece os recursos para exibir conteúdo do grupo. Agora, aqui você pode ver que existem diferentes tipos de aplicativos de guia. Onde você pode aplicar faz e como você pode aplicar Aqueles há um à esquerda você pode ver padrão sua barra mais fixo lá. Mas isto é um bar. Este será o título paginado ou o título do seu aplicativo. Então temos outro. Outra aplicação fora que estendeu no bar e fixo no bar. Você pode ver aqui nós temos apenas três itens. É por isso que eles são chamados fixos e você pode ver ou ouvir. Em seguida, temos este beliscar barras de guia de conteúdo escola beliscar. Não há um bar no topo e apenas três seções estavam aqui e então nós temos ah tal barrado com essas malditas barras. Então nós temos Estas são as ervas pergaminho suas barras. Agora você pode ver que a diferença entre rebeldes parafuso e fixo é que fixo vai começar a partir da borda fora desta seção. Ok, então borda fora toda a sua tela ou aplicativo Android, e ele vai começar longe disso. Acho que vai ser quase 72 db de distância daqui. Você pode ver que isso está alinhado corretamente com cada um fora deles. O texto deste item Um e o título da paz. Da mesma forma, você pode ver aqui temos com ícones, as mesmas guias com ícones. E estes são os que vamos usar em nosso design de aplicativos em com loja de fotos e Adobe X'd. Isto é o que eu usei. Isto é com o ícone e o título aqui. Ok, então cada facada tem título, que vai ser em todas em maiúsculas, todas em maiúsculas . Você pode ver favoritos nas proximidades de três desde a todas as maiúsculas. Então, esses ar para guias de desktop, Se você está projetando para desktop talvez ou tablet, talvez você possa ver estes. Vou incluir o link. Ok, agora há algumas coisas que você precisa considerar ao usar estes buzz maldito primeiro é que eles estão indo toe grupo conteúdo semelhante. Ok, então se você está familiarizado com clientes de design, que é o que eu tenho discutido na minha experiência de usuário design para escolas maiores, você pode vê-lo aqui no lado esquerdo Música, filmes, Livros, jogos. Então eles são categorias fora de uma loja. Portanto, existem diferentes categorias e você pode comprar deles. Agora, aqui do lado direito, este exemplo é um pouco errado. Então eles desesperaram que você não pode fazer algo assim. Os avistamentos de expressões do perfil ajudam porque são todos diferentes. São todas categorias diferentes, então você pode ver seu cabelo. São todas categorias diferentes, Não é absolutamente entre os destinos são muito importantes dentro da loja. Portanto, estes não estão relacionados uns com os outros. Estes são basicamente o agrupamento fora deste conteúdo. Assim, os filmes são agrupados em um conteúdo, uma seção, uma guia. Então este é o seu Você primário da mesma forma aqui você pode ver que você só precisa aliá-los assim. Você não pode usá-los. Ah, empilhados verticalmente um em cima do outro. Há mais uma coisa. Não há algum menu são o sub seu bar. Você não pode fazer algo assim. Existe apenas uma categoria importante. Isto é basicamente navegação patrons design eso precisa que você precisa para cuidar deles. Da mesma forma, há mais um aplicativo que se você estiver usando ah, nome muito grande que você está indo para usar algo assim. Recém-chegados e filha Dort. Você não pode usar o mundo inteiro assim. E você também pode. Você deve minimizar o tamanho quatro. Acho que os quatro tamanhos são diferentes por aqui. Está bem. Está bem. Então isso é tudo isso é a guia de correção. Três itens do que temos guias diferentes. Certo, então é isso que queremos discutir aqui. Especificações, guias fixas. Está bem. Agora você pode ver os tamanhos da torneira. 40 ano DP, que é um tamanho de torneira padrão que todos os elementos capazes onde você precisa tocar, mas seu dedo Eles devem ser 48 db de altura. Não é verdade para os botões. Botões têm 40 30 60 purificados. Mas eles têm estofamento incluído com eles. Então eles estão novamente indo para ser 48 basicamente. Ok, então você pode ver que cabelo 20 dp é o acolchoamento inferior deste texto. Então você precisa mover o seu texto 20 dp da linha inferior fora destes dabs 12 bp é a margem entre as guias em ambos os lados, margens direita e esquerda vai ser 12 dp. E isso é tudo o que penso. Ok, agora há mais algumas coisas como eu. Ok, então eu quero este dedo porque nós vamos usar este. Então você precisa pegar o quê? Na verdade, os monumentos são para estas barras de abas com ícones. Agora você pode ver aqui os decks inferiores é 16 db longe do fundo. E há um intervalo de 10 dp entre este ícone e este texto para o ícone. Eu cancelo nosso padrão 24 dp para todos os ícones do sistema como você pode ver aqui. Este é um ícone desse tipo. Este é mais ícone de menu icona. Eles são todos 24 DP toda a altura desta facada. Incluindo o ícone aqui é 72 TB. Então é isso que vamos, você sabe, usar em nosso aplicativo. Então você precisa do dedo do pé. Acha que quais são as especificações? Você precisa ter isso em mente. 16 profunda do fundo 10 db sobre a distância entre o ícone e este que vamos usar clientes já feitos e vamos usá-lo como ele. Então você não precisa se lembrar de tudo isso Não pense que você vai se lembrar de todos estes de forma semelhante aqui coração. Mais especificações. 40 anos DP 24 db 12 BP da parte inferior para os ícones e mais algumas especificações que você pode ver aqui . Estes são para as abas, que vão ser inescrutáveis. Dançar. Você pode ver seu cabelo escola guias Herbal tem um 72 D p off margem esquerda, que está indo dedo do pé alinhar este texto com este e você pode ver que é um pouco fora. A barra amarela está fora desta, então eu acho que vai ser algo como 56 ou 64 por aqui. E isso parece uma lacuna de 16 bebês aqui. Então é assim que ele vai jogar um jogo 20 dp da parte inferior 12 dp 12 db em ambos os lados e ah, há mais algumas especificações Você pode lê-los ou ouvir o máximo. O que é um tamanho máximo de DP para cada etapa para 64 dp E qual é o mínimo? Ok, então isso é tudo o que eu quero que você veja. Você não precisa memorizar todos eles. Mas se você está projetando algo específico para desktop ou tablet, talvez você precise dar uma olhada neles. Ok, então isso é tudo sobre abas. Quais são os diferentes tipos de guias corrigir e escola sobre? Qual é uma diferença distinta entre eles? Um está dividindo a aba inteira em três. E um é a partir de, uh, daqui. Está bem. Então você pode ver o que bateu. Então esta é a grande diferença. Há diferenças um pouco fora entre as especificações. Espero que tenha gostado desta lição. Vamos passar para a próxima lição. 18. Tamanho e especas no Google Material Design: nesta lição. Vou mostrar-te quais são as mágicas no Bar? Porque o Abbott estava indo para o pé. Tome cuidado com este de novo e de novo. Vamos projetar todos os aplicativos que terão. Quase todos os aplicativos teriam isso no bar na parte superior. Então agora você pode ver que nós vamos para os colchões fora desta água. A distância está tudo bem? Então já discutimos em 16 pixels É a margem em ambos os lados e 72 é a margem esquerda para o nosso preenchimento para este título ou o texto? Então agora você pode ver nos dois exemplos isso é um pouco gasto à parte e isso é um pouco curto e bar. Em ambos os casos, a distância da esquerda é 72 dp e a altura fora da barra de ar é 8 56 Será sempre 56. Você pode ver que esta é a área onde temos este 56. E estes são os ícones 24 ícones de banco de dados. E eles têm esse estoque tanto. É o alvo 48 DP em torno deles. Você pode ver que estas são as caixas azuis aqui. E se você olhar para aqui. Você pode ver de novo. Temos 16 pp na margem esquerda para estes ícones e ah, a cama inferior para o texto será 20. Então, isto é isto. Você precisa atender. Jake morreu pensando que seu título será de 20. DP está longe deste fundo. Ok, então neste caso, o expandido. A altura total da parte aérea é de 28 pontos e, neste caso, é de 50 60. Agora, vamos olhar para um exemplo muito bom fora de um projeto de aplicativo real título do projeto Monumental, descrição do aeroporto. Agora você pode ver neste exemplo ele está mostrando que como todo este sistema fora da linha e métricas de colchão bagunçado deve ser usado. Então você pode ver que este é o 56. Este é um mas, em seguida, temos este 80 para esta área e tp olhos usar para o acariciar. Agora 80 mais oito é igual a 88, que é seu maior tamanho de bloco. Você pode ver o que eu estou chegando agora novamente, você pode ver o próximo é 72 DP para esta descrição fora deste projeto. Mas, novamente, eles usaram 16 DP fora apostas. Agora 72 mais 16 é novamente 88 então estes dois blocos são 88. Mas eles são. Eles têm distâncias de criação usando as diferentes margens e camas em torno deles na parte inferior, e você pode ver que é assim que eles criaram este belo layout. Agora você pode ver todo este sistema se você entender todo este sistema, que como você pode gerenciar estes e limpar diferentes blocos com roupas de cama e alturas diferentes . Usando este sistema de grupo de oito pontos e oito linhas chave de ponto e colchões, você pode criar um belo ritmo vertical, e eu crio APS olhando incrível. Agora, se você está se perguntando qual é o tamanho fora do status? Mas é 24 DP. Então, se eu esqueci de mencionar isso como barra de status superior onde nós temos este tempo de bateria sinais, ele tem a altura fora 24 DP. Acho que isso é tudo para mim. Se tiver perguntas ou problemas, pode me perguntar. Então você viu na próxima lição 19. Listas no design de materiais: Ok, agora, nesta lição, vamos falar sobre listas. Você viu essas listas em sua caixa de entrada do Gmail e muitos outros APS, como seus contatos em todos esses tipos de talvez não, listas têm o bit igual e eles têm regras. Você pode ver o que aqui. E eles estão chamando um azulejo basicamente, porque eles estão indo muito em tamanhos diferentes. Ok, então se você tem um conteúdo menor, você vai usar um bloco menor, e se você tem um conteúdo maior, você vai usar um tamanho de pneu maior. Então estas são basicamente regras que você pode ver aqui. Vamos diretamente para as especificações e todos esses tamanhos diferentes. Ok, então este é o básico à direita e à esquerda. Este item de lista, toda a sua área de lista, ele vai ter um petting ou margens fora 16 e 16 aqui, então o texto, que é o padrão 72 será o alinhamento da esquerda. Ele terá 72 dp e ah, casamentos do item da lista serão 16 em ambos os lados. Isso é o mesmo que você pode ver aqui. Ok, então mais uma coisa em que eu realmente quero que você pise. Quem é este? Ok, então você pode ver aqui. Este é o primeiro marginal aqui para toda a lista. Então vai ser oito DP antes de começar a lista. A altura total desta lista será de 48. É o mínimo. Então, se você tem uma única linha de item lista única onde você só tem uma linha de texto que você vai usar este pequeno um pequeno bloco que é 48 eo próximo eu vou deixar eu mostrar-lhe o próximo estilo. Ok, então aqui está o próximo tamanho de estilo, que vai ser 56. Então, se você se lembra em meus colchões de palestra e ritmo vertical, eles têm estilos diferentes. Para o último 1 foi 48 do que este em 6 56 e o próximo vai ser 72. Então tenha isso em mente que o topo de leitura está usando uma tenda para toda a lista. Então eles têm 56 56 56 para todos estes. Agora vamos para o próximo. E aqui você pode ver que eles têm alguns ícones de ação à direita. Então, a configuração esquerda é a mesma. Então temos o ícone de seção aqui, que será 24 dp e todo o item de lista única tamanho do item é 56. Tamanho tátil é 56 a margem nos lados da placa fora deste ícone, por exemplo, se você tem alguma caixa jack ou algo assim, é 16 e 16 em ambos os lados. Então isto é, se você tiver alguma ação, estamos aqui e deixe-me ir para o próximo, que usaremos em nosso projeto. É para linha item e isso vai ser item de lista fora de duas linhas e o tamanho da telha será 72 Teepees preenchimento e tudo é o mesmo. Só vamos usar este. Então, estas são todas diferentes duas linhas, elementos de linha única fora deste design de material que são itens de lista chamados mostradores. Sua estrutura é quase a mesma. Apenas os tamanhos são diferentes para diferentes conteúdos. Então, se você tem ah, conteúdo grande ou duas linhas, então você vai usar essas peças maiores, que é 72. Esta é a mesma estrutura com algum ícone 72 tamanho da telha, até mesmo ver o que aqui Agora, esta é uma lista de três linhas. Você pode ver que o tamanho do bloco agora é 88 porque temos mais conteúdo, então precisamos de mais espaço entre eles. Este é o exemplo aqui do lado direito. Caixa de entrada do Gmail. Ele está usando uma Nikon aqui Você pode ver por aqui e será 24 tamanho 16 pelo menos da direita e da esquerda. E esse azulejo tamanhos 88 dp. Então eu acho que nós estaremos projetando usando este 88 dp em nossos projetos. E este é o layout deles. Como é tudo colocado para fora em sua vertical eles na tipografia é em uma linha de base de quatro g p. Então você pode ver que eles estão mostrando que 44 você está vivendo um pé profundo seu cabelo então, Ah, quatro db aqui entre essas duas linhas. Acho que estão usando algo assim. Então eles também estão mostrando como o texto é basicamente alinhado em seu ritmo vertical. Então eu acho que isso é tudo sobre essas três linhas. Duas linhas, listas de linhas únicas. Se você quiser ter mais os dias que puder. Vou ligar esta página aqui para ver todas as especificações. E isso é tudo. Se você, se você realmente quer dedo do pé, ver a grande lista, que estão em imagens imagem boa lista, que eu não vou entrar em todos os detalhes deste design material porque é de qualquer grande sistema. Espero não dizer quem está usando todas essas especificações, mas acho que você deve pelo menos obter uma posição sobre eles ou dar uma olhada neles. Então eu espero que você tenha gostado desta lição lista. Se tiver alguma pergunta, me pergunte. Vamos passar para a próxima lição. 20. Base de Navbar no design de materiais: Há muitos componentes fora do design de material Android, mas eu vou apenas olhar para uma visão geral sobre Lee, aqueles que são judeus, principalmente na maioria da abside. E eu os vi muitas vezes designers ou desenvolvedores usando-os uma e outra vez. Então hoje eu vou falar sobre navegação inferior Agora navegação inferior. Há duas ou três coisas que você precisa ter em mente que na navegação inferior, ele vai estar fornecendo o acesso direto a parte do seu aplicativo. Em segundo lugar, haverá 3 a 5 destinos de nível superior, então haverá apenas 3 a 5 itens de navegação inferior que você não pode exceder de cinco. Então tenha em mente que 3 a 5 há mais uma coisa que a altura fora desta navegação inferior você pode ver aqui Este é o único e deve ser 56 db eo tamanho do ícone que é tudo já o padrão vai ser 24 por 24 dp. Mais uma coisa é que o máximo com off qualquer off este fora deles você pode ter 1 68 db e mínimo off. Agora deixe-me ir para baixo e você pode ver por aqui. Aqui temos barra de navegação inferior. Esta é basicamente a barra de navegação do sistema Android Mobil e esta é a barra de navegação . E ele está indo toe ter rastreado o acesso a três porções próximas favoritos e recente. Ok, então mais uma coisa é que o texto com eles deve ser muito curto. Então não use seus favoritos de todos os tempos ou algo assim. Você precisa ser muito conciso. Por quê? Usando o texto aqui? Ok, Agora, quando devemos usar esta navegação inferior quando você quer que seu usuário tenha acesso a qualquer parte fora da parte abs instantaneamente no dia são de igual importância e você quer que eles para acessá-los de qualquer lugar no aplicativo você pode ter esta navegação inferior eso você pode ver o que aqui? 3 a 5 estacion de nível superior de importância semelhante. Então este é o objetivo principal desta parte da navegação também você pode ver aqui temos mais alguns exemplos fora desta barra de navegação inferior fixa. Há também quando você tenta escola para cima ou para baixo, ele vai aparecer quando vamos rolar para cima. Há em qualquer missão ou aqui deixe-me mostrar-lhe. Ok, então sobre as cores você pode colori-las assim. Mas não tente usar meticuloso assim. Se você tem ah fundo colorido para toda a aba são você pode usar luta em cima é se ele tem ah, cor mais escura e você pode ver que este é muito em branco puro E os outros ícones, eles são um pouco fora Ah, transparente. Então talvez 70% ou 60% transparente e eles são misturados no fundo dele. Então é assim que você vai usar ou projetar isso de outra maneira. É esta uma barra branca com a cor para o destacado um e outros serão aumentados. Então, estes são dois estilos. Deixa-me mostrar-te. Estes são dois vídeos que você pode ver ou ouvir. Eles estão mostrando como vai parecer. Então, uma vez que você rola para cima ou para baixo. Ok, então eu rolou para baixo e de qualquer rolagem para cima, ele vai aparecer. Então é assim que vai mudar o dedo do pé a qualquer minuto. Então este design material android é muito, muito específico no uso e todas as animações e tudo mais. E eu realmente amo essa coisa sobre isso. Porque esta é a animação desgastada de desvanecimento cruzado sobre como você pode usar essas dabs. Você pode ver quando a guia ativa está presente. Você pode ver a mensagem e eu chamo no barco. Mova para cima. Certo, então o inativo está no meio e o outro está subindo. Então você pode ver que esta é a animação. É por isso que parece muito legal. Porque as abas ativas, eles estão se movendo para cima no ar na direção. Ok, ok , agora vamos olhar para as especificações desta navegação inferior. Este é um fixo. Ele vai ficar o mesmo aqui, incluindo todo o aplicativo. E você pode ver a altura é 50 60 p que já discutimos. E agora há a questão de como nós estamos indo para o pé projetado esta parte. Não, o Deb ativo para isso você pode ver a distância do fundo é 10 dp e do topo , é 60 p para este ícone. Você pode ver isso. É sempre será 24 dp porque é um tamanho padrão de ícones do sistema para design de material android . E você pode ver agora que esta diferença entre este estado inativo e este estado ativo é a força olhos Você pode ver os quatro tamanhos diferentes Além disso, você pode ver o ícone é colorido e ícone é movido para cima Então você pode ver aqui para o tamanho maior. Assim que o tamanho do telefone for aumentado, temos menos espaço aqui. Então eles mudaram para cima para que você possa ver agora ele tem 60 ser top cama marginal superior, eo um estado inativo tem oito db cobertura que você pode ver aqui é qualquer missão como ele parece . Parece muito legal quando eles, você sabe, mudam de um estado para outro. Muito bom feedback. Se você não sabe o que é feedback, você precisa ver meu curso de design de experiência de usuário. De qualquer forma, você pode ver aqui é o máximo é um acariciando fora 12 dp em ambos os lados. Eu acho que isso é padrão entre o seu design aplicativo 12 db 12 dp em ambos os lados e ah, isso é tudo. Se você quiser olhar para os outros pontos de vista como visualizações de tablet, você pode ir em frente e olhar para eles e também você pode ver aqui temos novamente os mesmos acontecimentos, o mesmo que você pode ver este é apenas o ícone. Então as especificações um pouco diferente 16 dp do fundo E este é novamente o ícone com o texto e ele tem a mesma distância de mais uma coisa é que ícone dedo do pé A distância entre o ícone eo texto é 60 p Então esta é outra coisa também você pode ver ativo você pássaro mínimo 90 db Isto é com ícone eo máximo de texto foi para este e máximo ativo você Poderia ser este. Ok, então o mini membro se você tiver, você pode ver aqui nós temos as pequenas dabs. 123 Estes são um pouco menores, então o britânico mínimo é para eles. Mas apenas o ícone é 56. Então, se você está planejando usar quatro ou cinco aqui, você precisa usar este padrão em vez de usar apenas o texto e ícones ambos fora deles Então você pode usar este para que eles possam facilmente caber neste espaço. Então, isso é tudo o que eu acho, se você quiser, que você possa ir em frente e ver todas essas especificações. Está bem. E agora há mais uma coisa que eu gostaria que você mostrasse. Esta é uma barra de navegação inferior. Qual é a elevação dele e por que eles estão usando essa elevação? Você pode ver o quê? Aqui? Aqui temos lanchonete, botão de ação flutuante e conteúdo flutuando uma lanchonete geral. Eles têm a mesma elevação, que é 60 B. Se você não sabe a elevação, você deve ver a palestra de elevação que eu falei antes. Elevação significa que quanto alto, maior será na hierarquia no índice Z. Assim, você pode ver os corpos de navegação inferior ADP para picar sobre o botão de ação flutuante da barra de lanche porque geralmente precisa aceitar acessá-lo e ir para diferentes partes dentro do seu aplicativo. Essas caixas disseram BP porque será a parte A fora do seu conteúdo. Najjar vai tomar conta de todos os porque vai ser 16 dp em elevação. Então, mantenha essas coisas em mente. Este é um sistema muito bom Off Z índice e diferentes sombras. E qual elemento está se sobrepondo? Qual deles? Então, isso é tudo sobre barra de navegação inferior. Vamos passar para a próxima lista 21. Nav no design de materiais: Agora vamos falar sobre o lado. Nunca isso. Esta será uma palestra muito curta. Então o lado nunca vai aparecer. Você toca neste Ah, ícone de hambúrguer ou aqui e você pode ver que este é o nosso lado. Nunca. Agora há poucos colchões e regras que vão guiar-nos o tamanho deste lado. Mas agora o tamanho deste tamanho máximo será 3 20 dp Porque precisamos ter algum espaço sobrecarga para que os usuários possam tocar e ele vai desaparecer. Então tela com a regra simples é tela com menos 50 60 Seja assim que eles estão vivendo como 50 60 b aqui. Então você pode usar novamente toque ou aqui e ah, ter isso desapareceu. Então isso é tudo o que eu penso. Tenha isso em mente que você é. Se você estava usando algo como este, você está dimensionando corretamente. Portanto, não tente assumir toda a tela para que os usuários terão problemas de pisar aqui. Então a regra básica é esta 11 mais coisa que você quer toe Considere o que aqui está Ele vai sobrepor em todas as suas telas anteriores. Tem uma elevação de 16 dp. Então ele vai estar no topo de todo o seu conteúdo, sua navegação inferior, sua navegação superior, seus dabs. Ou aqui vai o dedo do pé. Sobreposição a todos eles. Além disso, você pode ver na barra de ônibus de status aqui. Quando ele se mover para cá, a barra de status vai estar no topo desta. E será, ah, parte transparente e parte opaca. Então isso vai acontecer quando você sobre essa gaveta sair. Isto vai acontecer assim. Então você pode ver que este é o fundo. E há um fundo escuro no topo que é multiplicado neste fundo. Então ele tem Ah, um pouco de transparência, como talvez 30 40% de transparência. Então eu acho que é tudo sobre esta navegação lateral e ah, eu espero que você tenha gostado desta lição. Vamos passar para a próxima lição. 22. Escala tipográfica do Adobe XD: cobrimos o básico de cores e todos os jogos próximos nas últimas lições. Agora vamos ver como a tipografia vai desempenhar um papel e qual escala e tamanhos estou usando no meu aplicativo. Agora, há apenas cinco tamanhos que eu estou usando, que são da escala de tipografia de design do Google Material eo levou 34 ponto é o principal cabeçalho o maior título que eu estou usando para o meu título nome fora do meu aplicativo na tela frontal . Então eu estou usando 20 pontos para o meu título no APP, título aplicativo APP dentro do aplicativo de design de material e eu estou usando médio 4 para 8 com 20 e este é o meu corpo de texto que é 16 pontos regulares Roberto e, em seguida, o pequeno texto Roberto 12 pontos regulares e você também pode usar o meio aqui se você quiser. Então, ele vai se parecer com este. Ele faz. Ok, então isso é uma coisa, então eu estou usando 14 pontos para os links. Este também é um meio para, por isso é um pouco ticker do que o Ford regular. Então, estas são todas as forças. Estou a utilizá-los em todas as definições que estou a utilizar. Estou também a utilizar 14 pontos para o texto mais pequeno. Alguns lugares em alguns lugares. Então deixe-me mostrar meu design real no Adobe X'd para mostrar como estou usando todos esses tamanhos . Ok, agora você pode ver aqui nós temos o design real e você pode ver aqui se eu clicar neste título. Clique duas vezes. Isto é 20 robôs médios. Então este é o título adequado que estou usando. Isto é ah, 14 pontos médio porque é as especificações do design de material do Google eso estas barras de desafio. Eles têm todas as tampas. 14 pontos médios. Então, se você olhar para este, este é o corpo decks médio 16 pontos médio e o texto menor. Se você clicar duas vezes sobre ele, é 12 pontos normal Roberto. Então também aqui, vocês podem ver que são 14 pontos robôs regulares médios, e isso é Ah, eu acho que estes são todos os tamanhos que estou usando. Então, hum, se você se mover para ver a tela adotiva, ok. Então aqui temos esta primeira tela, eu vou ampliar um pouco. Está bem. Agora você pode ver aqui nós temos a tela cheia e este telefone é basicamente 34 agonia extra ousada . E esse é todo o tamanho do telefone que estou usando. Isto é novamente 16 pontos para os campos pilhas que você pode ver ou ouvir 16 pontos regulares Roberto . Então, basicamente 16 pontos é o meu corpo formado e é usado principalmente na maioria dos lugares nos botões aqui. E este é novamente o pequeno telefone, que é 12 fronteira regular 12. E é assim que você vai criar essa tipografia incrível, elementos diferentes. Eles vão ficar ótimos juntos porque precisamos criar uma hierarquia tipográfica . tipografia tinha a nossa chave aqui. Algumas coisas devem ser maiores com a importância, e algumas coisas devem ser menores, com as menos que são menos importantes. Então isso é tudo sobre esta tipografia e como eu estou usando dentro do meu aplicativo. Então vejo você em breve na próxima seção e ah, vamos projetar um criar olhando para cima 23. Esquema de cores principal no design de materiais 2.0: Agora, se você quer ser um grande designer, há apenas duas coisas que você precisa dominar. Um é a tipografia e o segundo é o esquema de cores. Agora, se você quiser construir um ótimo esquema de cores fora do design de material, você precisa entendê-lo. E há poucos princípios básicos e há poucos princípios que você precisa seguir. E seu esquema de cores será incrível. Ok, então aqui estão duas ou poucas coisas que eu vou te dar. Está bem. Então, para qualquer bom esquema de cores, acho que você precisa nos matar. E se você selecionar aqueles dois assassinos criar, você pode acabar com eles. Você pode adicionar algumas variantes claras e escuras que a construção do dedo do pé da menina aparece. Esquema, esquema de cores. Agora aqui você pode ver que esta é a paleta de design de material e eles mostraram que esta é a sua cor primária, que vai ser sobre a cor principal. E este é o segundo regular. Agora você pode ver o principal Mikola que eles selecionaram no meio. Não é muito claro, nem escuro. Mas o segundo regular que eles selecionaram vai ser um pouco No lado mais leve, há mais duas coisas que você precisa ver. Se você olhar atentamente sobre isso, seja primário. Está escrito convite. E se você olhar para o secundário, está escrito com cor preta. Agora o que isso significa é que significa que a relação de contraste entre o texto e o plano de fundo . Aqui você pode ver o texto e o plano de fundo A taxa de contraste é criar. Será facilmente visível e legível. Então estas são algumas coisas que você precisa ter em mente. Estas são configurações diferentes para a mesma cor. claros, escuros, tons mais claros. Em Dhere, temos partes mais leves e escudos mais escuros e maçantes. Vamos passar no dedo do pé palete esquema de cores real onde eles estão mostrando todas as instruções. Está bem. Agora, se você entender este gráfico ou esquema de descoloração, você pode criar qualquer esquema de cores com seu design de material ou design de aplicativo Enright ou qualquer outro AB. Agora você pode ver aqui que temos dois assassinos. Este é o nosso auge. Irregular. Esta unidade e isto acabou. Segundo regular. Agora você pode ver que esta é a cor primária à esquerda. Então temos a variante primária, que é uma cor mais escura, que vamos usar para nossas barras de status e abastecer os elementos aqui que temos. Ah, muito luz compartilhada fora da variante primária. Aqui temos menos saturados. Temos er muito local e é um pouco do lado vital ou do lado da luz. Certo, então temos um segundo regular muito afiado e o segundo Revere Ian um pouco mais escuro. Então, na verdade, eles estão usando apenas duas cores. E estas são as variações dessas cores verdadeiras. Ok, então isso é uma coisa. Ok? Agora, a segunda coisa é que a cor que você vai usar como um texto nessas cores. Você pode ver nelas duas cores mais escuras ou mais nítidas. Eles estão usando branco como texto e em todas essas cores eles estão usando preto. Ok, então o que isso significa é se você olhar para o lado de baixo aqui nos últimos 80. Aqui, no primário, no secundário, no fundo, na superfície, nele. Isto é basicamente mostrando que cor vamos usar em qual fundo ou qual cor Primerica ou assim se ele estava usando química, Como você pode ver em meios primários que vamos usar cor branca. Você pode ver aqui no auge. Mikola. Então, todas as variantes dessas cores primárias que esses dois vilões eles vão usar esse valor f f f no secundário. Você pode ver que estas são duas rebeliões secundárias e segunda estavam usando preto. Este é o segundo permanece no secundário. Você vai usar preto um pouco em qualquer segundo regular em enter. Nós vamos usar F f f porque no local é vermelho brilhante Então nós vamos usar cor branca sobre isso Você pode ver ou ouvir que eles estão usando vital ou ele e na superfície na superfície significa todos os fundos usados no design do material. Então, se o seu aplicativo tem algum plano de fundo e o conteúdo está rolando sobre esse plano de fundo, ele vai chamar superfície. Então, naturalmente, a superfície é basicamente branca em todos os projetos de materiais e o fundo vai ser Oops. OK, então a superfície é basicamente suas cartas. Então, se você tem alguns protetores de design de material fluindo, eu vou te mostrar em apenas um segundo. Então, todos os carros, todas as informações em cima de seu fundo, vai gravar superfície de superfície é basicamente você todos os cartões de informação ou qualquer, hum, hum, blocos de informação em seu design de material de aplicativo móvel aplicativo. Então eles vão ser brancos onde eles são devido por padrão, seu branco Além disso, o fundo é branco e eles estão dizendo que na superfície vamos usar esta cor como um texto no fundo. Vamos usar esta cor. Então, basicamente, sua idéia principal por trás de todo esse esquema de cores é a taxa de contraste. Assim, você pode ver que eles estão mantendo uma boa taxa de contraste entre o texto e o plano de fundo . Então, esse é o objetivo principal por trás de todos esses esquemas de cores. Não, se olharmos para estes esquemas de cores, você pode ver que esta é a cor primária e eles estão mostrando como você pode fazer um esquema de cores diferente usando esses acres primos. Ok, então este é um exemplo Este é outro exemplo onde eles estão usando a terceira luz compartilhada fora da mesma Primerica aproveita este publicar uma cor clara e vamos ver a interação entre este regular primário e segundo. Você pode ver aqui nós temos primário na segunda primária escura para a barra de status e então este é forte abundante. Então você pode ver agora ele está olhando grande porque nós temos mais cores e vamos ver aqui o seu exemplo. Temos mais cores aqui, então uma cor, que é nossa segunda regularmente, será para nossas ações primárias. Aqui temos o editor lá mostrando como você pode usar outros. E é assim que a outra cor é usada e a cor em que você pode ver a cor em branco . Você pode ver na edição Luta em segundo plano. Este é o fundo branco. Este é o nosso cartão, hum você pode ver. Esta é a carta elevada. Tem sombra. Também é branco, e a cor nele está usando é preto. Então é assim que ele está mostrando que esta é a acessibilidade. Assim que você passar para a sombra mais clara, você usará alerta preto para manter a taxa de contraste entre o fundo e a cor do primeiro plano. Está bem. Agora, se você quiser verificar a taxa de contraste entre colapso, você pode verificar com esta ferramenta de taxa de contraste on-line, e eu acho que é contraste com realmente emitido ou calmo. E você pode usar cores aqui como você pode ver. Eu adicionei assassinos de um esquema de cores. Um é este dois E. Dewey para o texto. E isso é para o fundo e você pode ver aqui que temos um bom problema de contraste. Deve estar acima de quatro. Então é assim que você pode verificar suas taxas de contraste. Agora eu vou mostrar a vocês uma paleta de design de material de cédula muito antiga, que foi trazida em 2000 e 14. E estes são os principais assassinos básicos para todas essas pelotas. Agora, você pode usar em material projetado para apontar ou qual é a versão mais recente. Você pode equipe seu aplicativo com sua cor personalizada para que você não precise limitar seus sites ou nosso design de material Android usando esta paleta de cores. Agora, na lição menos, vamos ver a ferramenta de cores, que é dada pelo design de material Android. Então vamos passar para a próxima escuta. 24. Ferramentas de cores no Google: Está bem, agora nisto. Ouça, eu vou falar sobre este material material material de design, e é assim que podemos usá-lo. E é on-line dedo por design de material. E você pode ver que este é o paladar deles. E eles têm o roxo listrado e o azul índigo roxo luz Gussie ligado. Então eles têm as cores específicas. Então, como você pode usar isso é primeiro clique neste primário, e você pode ver aqui eu criei alguns dos outros esquemas, Então clique no primário e selecione o seu particular. Então você pode ver agora eu selecionei esta cor primária no meio deste esquema de cores, você também pode usar este. Ok, então esta é a minha cor primária. Tão bem. Em seguida, clique no secundário e ah, vamos selecionar este como o meu segundo regular. Ou talvez este. Oops. Não gosto deste, por isso vou mudar para este. Não, vamos selecionar algo. Bourbon. Talvez um tipo roxo. Ok, então quaisquer cores que você escolher, eu vou para esta cor amarela, e você pode ver agora este é um bom olhar um bom esquema de cores com este vermelho e amarelo e está em um pouco fora Pincus compartilhado. Então é assim que você pode criar. E ele vai mostrar alguns problemas de acessibilidade como você pode ver essas telas diferentes, como suas guias vão olhar, e é assim que o texto e outros elementos vão olhar. Esta é a sua barra lateral. Nunca. Estes são os seus guardas de texto. E esta é a lista, eu acho. E é assim que se você se mover para essa acessibilidade, você pode ver que ele vai mostrar a você que o texto preto não é visível ilegível neste aqui, também o preto. É por isso que o teste não é elegível, não é elegível. Então estes são alguns problemas, e eu acho que eles serão porque cada cor não é visível em todas as outras cores. Então você precisa selecionar se quer preto ou qualquer através de texto para o propósito de legibilidade que você pode ver aqui. Estes são todos negros compartilhados, então eles são realmente visíveis neste, e estes são dois brancos, e esta é outra camisa leve, como compartilhada. Vai usar preto. Então isso é você pode, como você pode construir seu esquema de cores e também, você pode exportá-lo. Toe e Reid são dos EUA ou da corte, Ben. Eu não sei muito sobre isso, porque eu acho que ele vai ser em material examinar arquivo, mas eu não tenho certeza talvez seus aposentos ou desenvolvedores sabem mais sobre ele. Além disso, se você acessar essa guia personalizada, poderá selecionar qualquer cor que desejar. Por exemplo, se eu quiser usar algo assim para o segundo regular e para a cor primária, eu quero algo, uh, assim. Está bem. Então você pode selecionar qualquer cor personalizada que você quiser, então deixe-me voltar e ver como minhas cores e itens estão olhando. Então secundário é um grande maçante. Então eu vou movê-lo para aqui em algum lugar. Então agora você pode ver que selecionei as duas cores personalizadas para a minha cor primária e secundária. Eu realmente não gosto de experimentar dentro desta ferramenta. Não tenho certeza, mas como designer, gosto da minha loja de fotos. Ou talvez o Adobe X'd onde eu possa experimentar taxas de contraste e esquemas de cores sozinho. Então isso é apenas para doar alguma idéia de que como seu aplicativo vai olhar como agora eu vou mudar para o meu o B x d Mas eu vou mostrar a vocês como eu experimentei este esquema de cores . Agora você pode ver aqui no meu adobe x t eu tenho este esquema de cores prime e algumas combinações seguintes foram aqui. Eu estou usando novamente um telefone para o título fora desse aplicativo e Roberto para todos os outros lugares Este é o estilo de ligação 14 pontos, 18 pontos para o texto de criação e agora você pode ver essas outras cores para o cinza. Este é o grande assassino Esta é uma cor de texto primário Não é preto completo é comer para comer, comer e você pode ver aqui Se você olhar de perto, há uma linha preta sobre este reto um círculo e Thies, eu tenho usado como meu status é este é o tom mais escuro e eu estou usando cor clara sobre ele apenas para melhorar a acessibilidade. Da mesma forma, aqui eu estou usando o Starker compartilhado fora deste como minha barra de status. Esta é a minha cor primária. Este é o meu segundo tom adulto regular para a Grã-Bretanha fora do mesmo segundo regular. Ah, e eu estou usando vital onde ele e ah, a acessibilidade realmente é uma droga para este aqui, mas eu acho que é bem visível. Então eu estou ficando na base baseado em meus olhos. Ok, então esta é a cor dos meus links. E esta é a minha cor de erro. Agora você pode ver que é assim que eu experimento construindo o esquema Michael. Agora, se você olhar para isso, estes são basicamente graça azul. Eles não são puros vidrados cria Eles são construídos a partir desta cor primária. E também você pode ver este sculler se eu for a este uma circular. Construí com base nesta cor azul. Então, se você clicar nesta cor azul e mover todo o caminho até o normal, você vai criar outro regular para este esquema de cores. Ok, então é assim que eu consegui criar esta sombra mais escura fora deste normal para outros estados . Novamente. A cor da ONU para esses outros estados será branca como esta. E, ah, isso é tudo. Eu acho que você pode entender como eu criei esse esquema de cores. Vou compartilhar esse arquivo com você, então não se preocupe. Você pode abri-lo em adobe X t. Eu não tenho nenhum arquivo para a loja, mas eu acho que eu vou na pré-visualização de imagem morta fora deste aqui, então você pode se relacionar com isso. Então, isso é tudo sobre esses esquemas de cores e como você pode usar diferentes ferramentas e como você pode experimentar dentro do seu para a loja e Adobe ferramentas extras. Se você tiver a compreensão básica sobre cores e cores primárias e secundárias, você pode criar qualquer esquema de cores. Espero que estas lições ajudem. Você está muito agitado, e se tiver alguma pergunta para me fazer, vamos passar para a próxima lição. 25. Confira o kit de interface de materiais da Adobe XD para o Adobe XD: Não. Vamos usar o Adobe X T para criar design de material e o design do meu aplicativo. E antes de começarmos a fazer isso, vamos baixar alguns ativos ou kits I, que vamos usar para desenvolver rapidamente esse design. Ok, então agora, como você sabe, aquele material andróide projetado para apontar ou versão mais recente do design original foi perdido. Eso Existem poucos tiros adesivos que estão faltando. Então eu vou mostrar o que você precisa baixar. Você precisa baixar este android. Eu comprar grande história simples A. Esta é a alegria incrível que você pode baixar. Depois, há esta folha de adesivo componentes que estavam presentes antes deste material android projetado para apontar. Oh, e agora não está disponível. Mas eu vou compartilhar o link Minha condução do Google para que você possa baixar este principalmente. Vamos usar este e ler o seu g y por um simples passeio. Você. Então deixe-me mostrar onde você pode baixá-lo. Material projetado para obter ponto com barra e direito no caminho. Isto é por grande estúdio simples e você pode baixar Adobe X t figura para a loja CC Onda esboço 40 dedo 4.2 ou 42. Isto é que você pode ouvir que você pode baixar. E uma vez que você tenha baixado isso, deixe-me mostrar-lhe É um monte de arquivos muito grande. Você pode baixar a divisão X se quiser. Você também pode baixar o para compradores e se você quiser, Mas vamos precisar deste. Então, uma vez que você tenha baixado e extraído esses arquivos, você terá este arquivo. E Reggie, por quê? Por riachos e pastoralmente? Se eu clicar duas vezes e abri-lo, vou mostrar que ele tem todos os componentes, até mesmo a folha de adesivos e tudo nele. Então não precisamos do segundo. Ninguém cabeça. Deixe-me diminuir o zoom. E agora você pode ver no topo. Eles têm todos os componentes aqui. Guardas, itens de menu diferentes, menus estendidos, barras de ar diferentes, guias diferentes em diferentes costas ou chamá-los. Certo, então é tudo o que precisamos. Basta baixar este, e nós vamos usar esses componentes dedo do pé, arrastá-los para nossas telas e copiá-los e usá-los para criar um design incrível que é este. Certo, então, , vamos começar e ter certeza de baixar tudo isso. Além disso, há mais uma coisa que vamos usar. Vou usar bibliotecas CC abertas por bibliotecas de nuvem da adobe. E o que você pode fazer aqui é que eu gerei isso na minha loja de fotos. Basicamente, esta biblioteca da cidade. Se você não quiser usá-lo, certifique-se de que você criou todo este esquema de cores antes de começar a projetar qualquer coisa. Ok, então o que você vai fazer é você está indo para o pé. Deixe-me mostrar-lhe o caminho. Então, na próxima lição, vamos criar o primeiro modelo e eu vou mostrar a vocês como você pode usar todas essas cores e criar o esquema de cores antes de começar neste design. Então vamos passar para a próxima lição. 26. Você design de login parte de site - Aplicativo médico para Android: antes de começarmos a projetar dentro e sobre um x t. Vou dizer-lhe algumas coisas que são muito necessárias. número um é que o Adobe Extra é uma tude vetorial. Então, no Adobe X certifique-se de que você está projetando em Vanek. Então, o que você está projetando seu tamanho de placa de arte será de 3 60 por 6 40 db e é realmente em debates. Assim, cada monumento é como é, conforme especificado no design de material android. Então você não precisa se preocupar em convertê-lo para estão multiplicando dois ou três X se você estiver usando para a loja. Então é assim que vamos começar nossos projetos. Então eu vou criar um novo arquivo e clique aqui e nós temos este Android móvel clique nele e você pode ver aqui nós temos este arquivo. Este é o nosso quadro de arte inicial. Você pode ver aqui que temos o quadro de arte. Se você não sabe muito sobre Adobe, Ecstasy deve fazer o meu curso, que é um grande curso de enfermeiros a nível especialista para Adobe X'd, um protótipo não b x d projetado pessoa, quero dizer, colaborou com desenvolvedores que é o nome ou título fora desse curso. Então, primeiro, vamos criar nossa tela de login. Então esta é uma tela de login. É 3 60 por 6 40 mergulhos ou DP e nossa cor de preenchimento ou cor de fundo é luta. Não precisamos de nenhum e muito fora. Se você quiser, você pode usar o layout de grade quadrada, que vai dedo do pé tem sobre ele. Tamanho oito. Pode usar isso se quiser. Oh, este. Pode usar algo assim se quiser, mas agora vou escondê-lo. Certo, primeiro precisamos do nosso histórico aqui. Então, vamos arrastar nossa imagem de fundo da nossa pasta de ativos. Então aqui temos nossa pasta de ativos. Vamos arrastar esta imagem de fundo para aqui e vamos passar para esta e soltá-la aqui assim. Certo, então vamos usar algo assim. Vamos torná-lo um pouco maior. Ok? Agora, o que vamos fazer é sobrepor um retângulo aqui que vai para o mesmo tamanho deste quadro de arte. Vamos sair da fronteira em torno dele, pressione TV e selecionado, e vamos usar este jogador de fundo. Então os vales do brilho de Bagram serão cinco, não a opacidade. O que? Este? Vou usar cinco aqui. Oops. Não sei qual é o problema com isso. Basta clicar uma vez cinco vai ser quantidade. O brilho vai ser oito, e a opacidade vai ser de 30%. Então precisamos de algo assim, que é um pouco fora de luz porque nosso texto deve ser visível o suficiente aqui . Então este é o nosso passado agora. Você pode selecionar os dois, e acho que devemos trancá-los para não movê-los acidentalmente por aqui. Ok, agora vamos arrastar o nosso logotipo para o nosso arquivo. Isso arrastou o logotipo e solte-o aqui. É muito grande. O tamanho que vou usar é de 120 dp Oops. Maravilha e tamanho do PIB deste tamanho. Vou usar aqui. Vamos alinhá-lo no meio e do topo. Vai ser 72 mergulhos na peça. Agora vamos usar algum texto, que vai ser agonia. Então vamos mudar a agonia do dedo do pé GP vai Quem está bem Então nós vamos mudar grávida novamente e o tamanho vai ser 634 p. T. T. Então este é o mesmo tamanho que é e placa extra. Então aqui temos o nosso texto. Não, vamos usar texto para a segunda linha. Eu vou arrastar algo assim e nós vamos para o pé. Copie esse texto daqui. Há roupas, os arquivos extras. Ok, então aqui está o nosso texto da tela de login. Vamos tentar arrastá-lo para cima, ver o que acontece. Vamos fazer isso agora. Ok, então nossa mensagem para Israel aqui, vamos mudar a força do dedo Roberto Eleitor regular. E vai ser 14 pontos. Algo assim. Então eu vou usar assim. Acho que copiou a primeira linha. Então precisamos copiar o resto da linha central de você. Pressione V. Vamos alinhar novamente. Você sabe disso, 15. 15 agora em um o b x d. Você está indo para pressionar a tecla de opção Artur. Então, se você quiser ver as distâncias entre dois elementos por isso é sete. Eu vou conseguir. Oito aqui mergulha a diferença entre ser comprado deles. Agora vamos arrastar alguns para fora dos campos do nosso kit projetado. Precisamos destes. Então eu criei o Lee personalizado. Então eu criei a mim mesmo. Mas agora vou arrastá-lo da Ana. Você gosta? Nós baixamos. Então vamos abrir isso. Eu entendo que isso é um balde. Vamos descobrir que esses campos de texto são longos e taxas. Então aqui temos os medos de entrada que ampliam. Ok, este é o campo de entrada ativo e este está inativo. Então temos que campos de texto, texto oculto. Precisamos focar um. E precisamos deste. Precisamos deles para Basicamente, também podemos precisar deste que está focado no centro como este, porque em alguns lugares, estamos basicamente sentindo sobre o campo de texto. Então vamos copiar tudo isso. Vamos lá, vê? E nós estamos indo para o nosso arquivo baseado com um cabelo assim. Então, esses são tamanhos padrão, então não precisamos nos preocupar com layouts diferentes e tudo louco. OK, então aqui temos, vamos chamá-lo de Boss Word. E esta vai ser a minha senha Ok, então não precisamos disto ou aqui. Ok? Então eu vou remover este Dilute. Isso também discutido, senhor, nós vamos tê-lo aqui e, uh, cores. Nós vamos lidar com eles mais tarde porque nós vamos ter alguma cor gerada aqui porque nós precisamos de todas as cores desta biblioteca CC que eu criei em Vidin para a loja. Esta é a nossa biblioteca da cidade. Então agora vamos fazer é eu vou selecionar este movimento para a biblioteca da cidade, clique neste texto preto. Isto é para Ito ego e No. Junto com isso, você pode usar da mesma forma. Você pode fazer o mesmo, certo? Clique e adicione cor aos ativos. Então, se você seguir esta área SX, você pode ver agora esta cor do texto foi adicionada. Agora, se formos de novo, dedo do pé, vamos como este. E se formos de novo, teremos outra cor, que é status de cinza azul. Acho que isto é para esta textura. Você pode usar este meio cinzento azul. Então agora este desgaste cor novamente vai adicioná-lo aqui. Você pode fazer isso manualmente. Você pode apenas criar alguns. A ligação é aqui com a mesma cor. Ok, Então, se você sabe qual é a cor, por exemplo, para Ito você pode usar que tem um valor decimal. Este é o método manual que vou mostrar a vocês. Ok, então você pode usar algo assim. Então não, é essa cor que você pode clicar com o botão direito e artigo agora. Ele já foi adicionado. Por isso, não está a mostrar-me a opção. Assim, você pode criar diferentes caixas fora que são criar todo o seu esquema de cores antes iniciar este design e adicionado às suas cores. E, em seguida, você pode apenas clicar aqui e aplicar que Philip em vez de usar biblioteca CC. Então, se você não sabe como usar bibliotecas U C C ou iniciá-las, você pode usar algo assim. Ok, então isso está feito. Este é o nosso e-mail. Ok, então isso vai ser o correio. Algo assim. Ok, então isso é basicamente desativado. Sinto que estou indo dedo do pé, use este em vez de este. Ou talvez possamos usar essa senha 1 e 4. Vamos usar esta doença. Ok. Deixa ele sair. Este. Temos basicamente de alimentos. E a cor deste bar vai ser o assassino, que é a nossa cor ativa, segunda reativa. Então esta é a nossa cor ativa destruindo que esta parte é o nosso aqui. Vamos passar para estas camadas e ver com a marca do tipo que vou esperar por aqui. Algo assim, e vai usar a mesma cor. Então primeiro rejeita, adicione esta cor aos nossos ativos e mova as afirmações e selecione esta e use esta cor. Certo, então temos o campo de texto pronto. Há uma coisa que não está presente porque é a versão mais antiga fora desses medos tecnológicos, que está no topo pequeno rótulo, que, como você pode dizer, etiqueta flutuante, que é o nome real off que o patrono que estão usando em dois pontos. Além disso, vamos adicionar um e-mail de cabelo, algo assim, e vamos usar a mesma cor, esta. Então este é um novo quarto que tem sido entre, uh, este novo material projetado para apontar. E se eu ver a distância, vai ser 16. Isso é criar. Agora você pode ver que este é o layout real que devemos estar procurando. Vamos ver, qual é a distância entre estes dois? Vamos fazer um pouco menos. Ok, então eu acho que está ótimo. Só precisamos de representar que é assim que deve parecer. Vamos movê-lo um pouco para cá. Ok? Então também, eu acho que isso é muito fino, então eu vou fazer a altura para, Então é um pouco visível no topo fora que também, eu estou indo dedo do pé, hum, usar o dedo hum, do pé de preenchimento, tem algo como 40% porque parece pronto. Muito feito sobre isso de volta. 27. Tela de login do ♥ Design parte: Ok, então passe Virginie para entrar. Isto é e-mail. Tudo feito. Vamos gerar um botão aqui, então vamos criar o fardo. Então o botão será 42 DP altas esperanças eu preciso 42 aqui, e ele vai usar 80 escolhido. Então, se você quiser aumentar, você pode aumentar para 90 algo. Acho que isto parece melhor. Remova a borda e nossa cor primária. WAAS este aqui. Ok, então eu vou usar este azul primário neste botão. Isto é o que usamos e Breast V e vamos bem, nós não ouvimos. Ok, então eu preciso ter 24. Vamos usar 24 diferença entre estes dois. Ok, agora vamos adicionar o texto de login aqui, o que é muito fácil. Logan 14 não será o tamanho que vamos usar. Vamos usar 16 ou aqui para o fardo, e regular e branco será o texto. Certo, vamos alinhar no turno do meio. M. C. E é uma mentira no vamos adicionar alguns cantos arredondados para descartar cruwness e aceitar alguma sombra por aqui. Só vai ser dois e seis e a cor da sombra. Podemos usar a mesma cor de sombra como esta, que é nossa coleção primária. Além disso, adicione esta cor aqui nas cores do documento e ah, isso é adicionar isso como uma sombra. Ok, agora podemos usar algo como 50%. Certo, então é assim que vamos moldar nossas sombras. Está bem, está bem. Então, isto está feito. Vamos ao ar. Esqueci a senha aqui. Esta vai ser uma cor de link, que era diferente. Era uma cor azul. Então vamos alinhar no meio com isso. Algo assim. Agora vou pisar de novo. Abre a minha biblioteca de maricas com a minha biblioteca de maricas. Próximo. Fechado este arquivo Não salvar. Ok, então biblioteca C C, vamos abrir a biblioteca cc novamente, e então eu vou usar este link Brugler. Ok, então esta é a nossa senha esquecida. E, hum, se você quiser, você pode movê-lo um pouco, poderia cabeça, ou talvez mantê-lo aqui assim. Então não se preocupe com isso. Ok, então mais uma coisa que precisamos aqui, que é uma nova porta G B próxima. Ver caminho. A cor é esta. Então, vai usar o seletor de cores, dedo do pé pegar esta cor. Ok, este é o nosso convés. Cor Neutra Chipotle está aqui. Vá. Então essa cor de conta de criação será basicamente alertas de link. Adicione isso às cores do nosso documento aqui e também ao nosso Essex, você sabe, vamos alinhá-lo no meio. Selecione este texto. Ele estava descolorido. Ok, então terminamos com isso. Se você quiser sublinhar apenas isso, você pode usar isso aqui assim em um txt. E agora está sublinhado. Isto é o que usamos em nosso design de loja de fotos. Ok, então eu acho que isso é ótimo. Vamos alinhar no meio. Tudo. Alinhe no meio. Certo, esquecemos de adicionar alguma sombra nele. Então vamos adicionar um pouco de sombra e a cor da sombra será algo. Disse-lhe isto. Vamos movê-lo para 50%. Algo assim. Está bem. Olhando ótimo. Nossas sombras estão ótimas. Se você quiser adicionar o estado superior de pequeno, você pode adicioná-lo ou vamos escondê-lo em uma tela de login. Então, se você quiser adicioná-lo, você pode arrastá-lo desta área para aqui. E vamos ver se temos uma parte do status preto escuro. Certo, então aqui temos. Se você ampliar este, é basicamente ter esta barra de status e podemos copiá-lo e básico lá. Próximo. Melhor ou aqui está. Vamos tornar este filme transparente. E é assim que vamos usar esta tela. Então, o preenchimento que os corpos de status transparentes e nós temos algum tempo e tudo mais aqui. Então nossa tela foi concluída. Tronco e pele. Espero que tenham gostado desta lição. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 28. Tela de inscrição do ♥ para aplicativo médico para Android: Ok, Agora vamos criar tela de inscrição. E antes de passarmos para a tela de inscrição, há poucas coisas que eu quero. Oh, te digo aqui, qual é? Esta etiqueta de e-mail vai ser 12 pontos ou 10 pontos. Na loja de fotos, usamos 10 pontos, e aqui vamos usar 12 pontos porque eles estão parecendo muito pequenos e alinhá-lo com esta sobrecarga de texto. Ok, mais uma coisa que usamos e eu posso vir aqui um cheque. Mark, eu continuo se quiseres. Tobe, traga esse ícone aqui. Você pode fazer isso e ir para os ícones. E esta é a nossa linha de base. Vamos movê-lo para dentro. Nosso que será um documento extra e movê-lo para cá assim. Vamos movê-lo para dentro. E deve ter alguma luta aqui, que vai ser 12 deste. Então eu vou usar esta cor das minhas afirmações esta cor para este. Então eu vou selecioná-lo e clicar nesta cor. Então aqui temos esse cheque. Mark, se quiser um dedo, faça algo assim. Ok, agora esta tela está completa. Vamos seguir em frente. para a tela de inscrição. Vou duplicar este. Estou pressionando arte e clique no nome. E é assim que você completa obtê-lo inscrito. Tela de inscrição. Ok, agora nosso status, mas vai ser mudado porque temos um pouco de cabelo AB Ottawa. E essas coisas vão se mover porque não precisamos dessa senha, e isso vai ser mudado. Toe, hum, eu já tenho uma conta, e isto vai ser log-in? Não, algo assim. Ok, então também, este botão vai ser alterado para criar conta, então nós vamos mudar este botão suspira. Em seguida, torná-lo um pouco maior. Essa é a linha central de L.A . Ele muda. Vês? Ok, então nós temos essa conta de criação e tudo aqui fundo. Vai ser o mesmo. Vamos torná-lo um pouco menor. Em seguida, faça 100. As abelhas e nós vamos mover tudo para cima. Talvez aqui, porque precisamos de mais um campo de texto aqui, que será o número de decisão da América. Então vamos mover isso para baixo. Isto vai ser no meio. Isso é grupo eles controle ou comando G toe, agrupe eles e nós estamos indo para o pé. Diga o nome bonito. Agora. Se você quiser criar símbolos fora destes botões, você pode clicar com o botão direito e criar este perdão como um símbolo faz símbolo. Mas agora vou deixar assim. Certo, então temos esse e-mail focado. Mongie, este é o nosso e-mail. Esta é a nossa senha. E precisamos de mais um campo, que vai ser Oh, bem aqui. E vai ficar tudo bem. Próximo. Veja a distância entre eles. Eu acho que as distâncias não menos. Então vamos movê-lo para cá assim. Então eu estou usando uma distância de 16 dp que você pode ver no lado esquerdo. Está a mostrar-me a distância entre todos estes e aqui estou eu a usar 24 aqui. Ok, então entre o botão e o campo de texto 24 DPs agora eu vou jogar tudo aqui em uma forma kwon ji. E este é o nosso formulário de inscrição na fazenda. Certo, então, não, podemos movê-los assim. Então isso é mais fácil para mim, você sabe, controlar. Certo, então temos algo aqui. É isso. Jane, o texto para Ok, agora vamos arrastar a barra superior. Então vamos deletar essa , barra de status, e vamos pegar outra aqui e colocá-la aqui. Ok, então nós vamos para isso, você vai? Dou a este judeu incrível um miúdo que está a tornar a nossa vida mais fácil. Então vamos para o topo. Onde teremos os airpars ano que vem é o bar que precisamos aqui. Certo, Certo, então talvez possamos usar este porque tem o botão Voltar e talvez precisemos voltar. Volte para a tela de login. Então vamos gastar usar este aqui. Esta é a barra de ferramentas e que falou é esta? 12344 escrita. Ok, então isso é para amanhã e veja tudo que você pode usar este um dedo cinco. Vamos usar os 500. Vamos lá. E agora vamos baseá-lo aqui, e a magia vai acontecer. Oops. Então não acontece aqui. OK, então movendo-se para o topo e a cor para este. Se você se lembra, vai ser barra de ferramentas. BG. Vamos ver, qual é a cor desta? Então vamos usar essa cor para isso, e o topo vai ser status. Parte B G vai ser descolorir cor mais escura. Então vamos ver o que está acontecendo. Ok, então isso é um pequeno problema aqui. Vamos mudar para nossos ativos, e não adicionamos essa cor. Esta é a nossa cor azul primária. Vamos adicionar descoloração. Adicione cor aos ativos e também precisamos de outra cor, que era esta cor brilhante neste 118 a 9 40 Então vamos e esta cor 18 a 94 D. Ok, então vamos adicionar aqui. E também vamos clicar com o botão direito e cor para o SX. Agora temos duas cores aqui. Uma é uma cor um pouco mais escura, e outra é uma cor mais clara. Então vamos, , novo,para o bar de banquetas. Esta é uma ferramenta sobre fundo, e este é o nosso regular principal. Acho que esta foi a nossa cor primária. E se mudarmos para este, vamos ver o que está acontecendo aqui. Então esta é basicamente a cor. Ah, isso é mais leve. Na parte superior do status, isso vai ser mais escuro. Ok, então agora você pode ver que temos o mesmo acordo aqui. Vamos, hum, mudar de título. Vamos alterá-lo para se inscrever com as ferramentas GP. Ok, agora você pode ver que precisamos mover nossas coisas um pouco para baixo. Se você quiser o dedo do pé, remova a sombra em torno disso. Esta é a sombra. Se você quiser se mover, a sombra removeu a sombra. Se quiser manter a sombra, pode ficar com ela. Mas vou usar esta equipa. Eles são suaves. As coisas são quaisquer coisas para baixo, Então eu vou usar 80 80 peças para este ícone. Não quero que seja muito grande. Eu preciso de mais espaço aqui porque os judeus já são conhecidos que ele está neste aplicativo está usando este aplicativo. Ok, então vamos mover isso um pouco para cima aqui porque eu não quero, você sabe, mudar. Ah, dimensionando este. Eu queria ser o mesmo 80 aqui porque se eu movê-lo para baixo, será difícil se adaptar com o Tom faria aqui. Mais uma coisa estamos indo para o centro. Alinhe este Perdão assim. Mesmo se você quiser mantê-lo aqui, eu não acho que vai ser Ah, grande problema ou aqui. Ok. Então eu acho que nosso design para esta tela está completo, se você quiser. Oh, fique com as sombras. Pode ficar com as sombras. Vamos usar as sombras aqui. Ok, então nossa tela de inscrição está completa. Se você tem alguma dúvida ou alguma sugestão ou qualquer coisa sobre a escola para que você não entenda nada você pode me fazer perguntas, quaisquer perguntas, até mesmo número perguntas são perguntas simples? Tocha seja tímida. Tenta perguntar-me sempre que tiveres algum problema, está bem? Então você pode ver o nosso para telas. Cadastre-se e o registro está completo. Vamos passar para a próxima lição onde vamos fazer mais sobre isso e, ah, vamos criar nossa tela de painel 29. Design de tabuleiros no ♥ painel no design de materiais: Ok, agora, nesta lição, vamos criar esta tela de painel. Mas antes de entrarmos na tela do painel, precisamos desta facada com ícones aqui agora, no meu barco você gosta, é que eu tenho tal e eu não fui capaz de encontrar este patrono ou aqui porque eu acho que eles esqueceram . Ou talvez eles eu não adicionei em sua versão gratuita. Então o que eu vou fazer é nós vamos usar esses três itens aqui, e ah, nós vamos combiná-lo com algo assim aqui. Está bem , deixa-me mostrar-te um pouco. As especificações a esconder são para estas barras de ar fixas são 72 dp 12 dp é um marginal superior aqui. Então temos 24 ícone dp do que nós. Nosso texto vai estar sentado na parte inferior fora 20 dp block ou 20 db baseline. E esta linha é basicamente para DP para que possamos criá-la nós mesmos. Então vamos fazer isso nesta lição. Então vamos começar com a criação desta facada estão nisto. Ouça, aqui temos nossos arquivos, então eu vou apenas replicar críquete. Este é o Drop Shin Ki, e eu vou arrastá-lo até aqui para criar outra tela ou aqui, e eles ainda estão comendo o fundo. Então, não, não precisamos desses fundos. Retângulos de tese. Vou destrancá-los. Então nós vamos excluir isso e também vamos excluir isso. Não precisamos do logotipo agora. Talvez as pilhas. Não precisamos desses telefones que não precisamos. E este aqui e este eu estou apenas mantendo este texto aqui. Ok, então se usarmos este aqui, esta é a nossa barra de ferramentas. É um pouco diferente. Então o que precisamos aqui é de algo mais próximo disso. Então é a barra de ferramentas número 1234 Então eu vou copiar isso agora e talvez vamos ver se temos alguma coisa. Certo, ótimo. Copie isso. E nós vamos rebocá-lo aqui e vamos diluir este. A barra de banquinhos. Vamos apagar também os livros. Também a parte de status que precisamos excluir Este é o nosso quatro. Então eu vou movê-lo para cima assim. Mudaríamos as cores mais tarde. Então agora nós estamos apenas indo dedo removido as sombras para que eu não remova as sombras desta camada aqui. Certo, então as sombras foram removidas. Agora vamos mover isso. Ah, item aqui, parece Oops. Ok, então eu vou subir. Para cima, para cima, para cima, para cima aqui. Ok, então nós temos este terceiro bar pai e vamos lá, vê? E eu vou rebocá-lo aqui. Isso é algo assim. Ok, agora o que nós vamos fazer é fazer isso um pouco movê-lo um pouco para baixo aqui. E se eu clicar duas vezes sobre este fundo, estes são os limites. Eles são basicamente 48 dp, mas para a guia com a qual queremos que é 72 db. Então vamos aumentar o tamanho para 72 DP. Isso aumentou a altura assim, e vamos movê-lo. Então o nosso indicador está no fundo deste como este. OK, então nós temos você fez um fundo muito bom que zoom em 200%. Vamos mover isso um pouco para cima. Certo, vamos mudar de cor. Então é mais fácil para nós, você sabe, definir que estamos projetando algo em algo assim. Além disso, este vamos preenchê-lo com descoloração e em troca, descolorir o nosso azul primário. Ok, então isso é mais como a maneira de projetar algo ao longo destas linhas. Certo, então precisamos do nosso ícone aqui. Antes disso, vamos criar um bloco de 12 DP. Ok, então a altura vai ser 12 porque precisamos colocar nosso Icahn abaixo disso. Ok, então olha, use algo assim. Vou usar a cor vermelha só para ter certeza de que essas são nossas diretrizes. E isso é ícones arrastados até aqui. Este é o nosso painel. Esta é uma nuvem um Plourde. E havia mais uma atividade em que suas atividades. Oops. À frente. Então eu vou pegar tudo isso, arrastá-lo para o meu arquivo Photoshopped, Alps realmente arquivo, e eu vou deixá-los lá fora assim. Então aqui temos isso. Esta é a nossa nuvem. Este é o nosso painel. E estas são as nossas actividades, por isso vou alinhar com esta linha. Você pode ver como é mais fácil agora para nós fazer algo assim. Este vai ser o nosso painel. Oops. Tudo deve estar nas lacunas. Bash, Senhor. E isto é um D. Estamos todos fartos de criar isto. Espero que tenha gostado disso. Como usamos as especificações dadas pelo Google Material Design e nós as usamos para criar algo assim. Agora, há mais uma coisa. Acho que deveria estar no meio. O mesmo. Este. Isto deve ser no meio. Ok, então agora eles estão procurando criar. Vamos alinhar este ícone com grupos. Há uma linha que este ícone Lexie com estes ícones são, na verdade, então nós vamos arrastá-los para aqui quando temos este indicador e tudo mais. Então agora temos Ok, então, uh, uh, a partir deste painel de camadas, você pode selecionar este, e você pode selecionar arquivos de sincronização. E agora você pode facilmente organizá-los em vez de, você sabe, lutar com eles. Certo, então aqui temos o painel assim. E se eu tentar combinar o painel, vamos ver se isso combinado Há algo estranho acontecendo com este arquivo SPG. Então eu não vou combinar nada. Apenas deixe assim. Ok, então é assim que você vai alinhar tudo. Seu painel vai ser indicador. Este é o nosso indicador. E se eu quiser aumentar o tamanho fora sobre o dedo indicador três DP. Acho que vou usar este três d p. Tamanho do indicador. Vamos movê-lo junto com esta linha. Vamos remover isto. Este é sobre este foi o nosso guia de troca descolorir este fundo para o nosso azul primário , que foi este. E também para este, precisamos da mesma cor. E para a barra de status B. G. Vamos usar um tom mais escuro, que é este. Ok, agora você pode ver nosso pai. Pod está completo. Este será o título do nosso AARP em vez da experiência do usuário. Projeto GP Ferramentas Ano Talon 18. Ok, não, nós criamos esta barra superior, barra navegação ou guia são basicamente esta é a nossa barra de ar com guias fixas três Debs, e nós vamos usar isso em nosso projeto uma e outra vez. Está bem. Espero que tenham gostado desta lição. Vamos passar para a próxima lição em que vamos criar o conteúdo deste painel . Em seguida, renomeie o painel. Então vejo-te em breve no próximo 30. Personalizar e gráficos de ♥ Doctor, e: Agora nesta lição, vamos criar a parte superior aqui. Temos a imagem do Everton do médico e uma mensagem do médico. É aumentar a atividade. E então, em seguida, temos aqui um pequeno espectrógrafo de barras circulares. Ok, então vamos começar a pegar algo aqui. Então vamos usar um título de médico. Doutor, desculpe este título. Eu vou usar este texto porque ele está em apenas texto pequeno não é um texto muito grande. Vamos limpar outra linha. Vamos deixar a linha. - Ele. E para isso, eu vou usar, hum 12 pontos como este. E para este, vou usar 16 pontos, 16 pontos. Próxima cidade na cor será nossa cor do texto, que é eu acho que esqueci de adicionar aqui. Então esta é a nossa cor do texto, e esta vai ser a nossa cor cinza. Se você quiser usar isso rapidamente, você pode usar este. Este é o nosso texto. Curricular, na verdade. Ok, então agora o que nós vamos fazer é precisamos elipse, e, hum, nós vamos usar 58 a peça que foi usada no dedo da loja. Então aqui temos 50 anos por 58, vamos replicá-lo aqui. Estou pressionando não são a tecla opção para replicá-lo. E agora eu vou fazer é eu vou dedo habilitar minha grade quadrada. Ok. Por que eu fiz. Eu vou mostrar a vocês que eu vou deixar 16 margem daqui 16 a partir daqui. E é mais fácil para mim alinhar coisas assim. E agora está no meio. Tudo parece ótimo. Meu alinhamento está feito. E agora eu vou pegar a imagem dos médicos, que é, uh, aqui em minhas imagens de ativos, médico, feminino, feminino, feminino. E eu vou deixar tudo aqui assim. Agora eu vou fazer é eu vou torná-lo um grande menor e nós vamos selecionar ambos fora deles, clique direito e mesquita com navio. Que isso é muito apropriado. Faça isso porque às vezes eu tenho que mudar de imagem. E agora acho que conseguimos. E para a fronteira, eu vou usar, um quatro aqui e agora eu acho que eu não posso usar a fronteira então o que eu vou fazer aqui é que eu preciso de outro círculo como este abaixo deste aqui para ter alguma fronteira. Então eu vou criar alguma fronteira fora quatro oops comida que mostra o peituda 100%. Não sei por que não é visível. Ok, então o problema é que a fronteira é dentro, então eu vou movê-la para fora. Centra Stroke. Exterior traço exterior qualquer coisa para fora. Por isso, agora está visível. Mova-o para dentro. Eu acho semelhante. A mesma coisa estava acontecendo aqui, então me mudei para fora. Ele vai mostrar, por isso não está mostrando porque não é mascarado. Então vamos usar esta fronteira. E a cor que estamos usando para esta borda é um pouco diferente, que é, eu acho, esta discreta para a borda. Acho que precisamos usar a mesma cor para a fronteira. Vamos adicioná-lo para que possamos usar esta cor algo como que usar a borda para porque ele está olhando muito grande. Ok, agora nosso dia a dia nossa imagem está feita. Vamos criar o gráfico aqui. Ok. Agora, para criar este gráfico circular de barras, vamos passar por um processo. Então eu vou duplicar este, e nós vamos remover a borda, Jane, o Jane, campo para azul e nós vamos replicar o dedo do pé novamente, esta tecla de opção de arte pressionada. E eu vou mudar sua cor do dedo do pé branco ou talvez algo mais como isso e torná-lo um pouco menor, movendo-se no meio desta. Selecione ambas as formas e o assunto. Não, temos esta nave gritante. Isto é apenas um bar, e há muitas maneiras de escondê-lo agora que o assunto que eu vou usar é que eu vou usar outra forma para esconder, cortar a metade do lote deste aqui. Então eu vou movê-lo assim. Mova-se. Este no meio assim e selecionando ambas as formas novamente. Íamos nos submeter, e ficamos com esta nave. Então este vai ser o nosso gráfico. Ok, então esta é a nossa barra de progresso circular. E, , para este, vamos esconder a fronteira e a sombra, e vocês podem ver aqui que temos o mesmo efeito. Agora, se você quiser mudar a cor fora do curso, nós vamos mudar a cor para esta. Isto e agora você pode ver que este é o nosso, hum, gráfico. OK, agora vamos colocar algum texto aqui, que será 50% completo e o tamanho será 10 10 pontos. Vamos movê-lo no meio assim e vamos usar 11 para a altura da linha e a cor do texto será este. Vamos falar e ver como está. Está parecendo um pouco ticker. Então, se você quiser criar linha elástica, você pode fazer o mesmo. E também há muitas maneiras de fazer isso. Você também pode movê-lo ou cabelo ou talvez adicionar um pouco de sombra a este, algo assim para torná-lo mais elegante. Então vamos esconder este painel um bom aqui e deixe-me mostrar-lhe como isso parece para que você possa adicionar alguma sombra que vai ser esta cor azul ou talvez o mesmo azul aqui dedo do pé. Tenha um pouco de luz em torno dele e você também pode fazê-lo como 50%. Então vai parecer 35% melhor em 35% e mais algumas coisas. Você também pode usar um pouco fora de porcarias deste azul ou aqui como isso para a sombra. Acho que a nossa parte está completa. Nós fizemos isso. Ok, agora, se você quiser alguns cantos arredondados em torno desta forma, isso não é muito possível porque nós precisamos desenhá-lo usando caneta então e eu não vou. Não quero perder tempo com a caneta, então acho que esta técnica é boa. Você, Se você quiser adicionar algumas sombras, você pode adicionar sombra a este ou na forma abaixo dele. Cabe a você. Ok. Então também podemos adicionar algo como este menos dois. Então sombra está aparecendo deste lado menos cinco. Sombra é agora. Neste momento, aqui deste lado. Então também, cinco para este. Certo, então é assim que estou usando duas sombras e criando esse efeito, mas acho que vou esconder essa sombra e usar essa no Lee. Ok, então agora nós completamos nossa seção superior. Vamos passar para a próxima seção na próxima lição onde vamos projetar o primeiro guarda na tela 31. Design de seção do cartão do painel: Está bem agora em perigo. E nós vamos criar este cartão aqui, que é suas atualizações de avaliação e tudo mais por aqui. Vá para a prisão ano, e na próxima lição, vamos criar isso com o fardo civil. Certo, então vamos começar. Vamos rever os documentos que deixamos. E agora vamos criar um emaranhado aqui. Hum, fora do tamanho fora, o tamanho vai ser 192 mergulhos fora de altura e 328 vai ser o OK, então vamos alinhá-lo no meio assim. E não vamos usar a fronteira desta vez. Se você quiser usar borda, você pode usar alguma borda de luz descolorir norte. Mas se formos para nossas bibliotecas C C C, acho que tínhamos essa cor da borda é a cor da borda. Estas são as cores da borda, basicamente aros. Então vamos ao ar esta cor e usá-la como nossa fronteira. Você pode remover o campo agora mesmo. Ok. Então, mais uma coisa que eu esqueci é que no fundo do quadro do esconderijo, nossa cor é diferente, que é F algo clica ver o que era. A cor foi descolorir. F sete F nove f e solar ensinando o fundo F sete F nove f Já está alterado. Ok, então este vai ser branco. Isso parou um retângulo de parada. Vai ser branco branco. Certo, então temos algo mais perto disso. Ah, e nós vamos usar quatro dp off round nestle aqui você pode usar para se você quiser dedo do pé, eu vou diminuir o zoom para ver como ele está olhando. OK, então parece ótimo. Certo, antes disso, vamos dar o pé. Movam-se algumas coisas a reboque. Diferentes áreas e seções. Isto vai estar no topo da tenda. Então, se eu me escondi vamos ver o que está fora deste aqui. Então esta é a parte nove. Vamos movê-lo para o conteúdo superior. Estes dois também estão lá fora. Pode ir movê-lo para dentro ou ter 50% vai ser topo. Vamos escondê-lo. Certo, então temos esse conteúdo aqui. Este é o nosso top. Vamos lá. Jeet é o nosso corpo. Esta é a nossa Margie. Vai ser a nossa guarda. Ok, então tudo vai estar dentro deste grupo. Então vamos criar este BG. Isto vai ser de fundo. Certo, então temos isso alinhado. Vamos usar esta linha como um separado ou estamos aqui algo assim. E ele vai ter a mesma cor como esta também, se você quiser usar alguma sombra em torno dele com a sombra. Certo, então esse é o problema. DoubleClick e o vídeo de sombra que estou usando é um e três para três para o borrão e 16% preto. Algo como isto. Então está parecendo um cartão agora. Certo, então precisamos arrastar algum ícone aqui. Uma mensagem aqui e um botão aqui. Então eu vou morrer o texto e pular isso rapidamente. Ok, então o texto está pronto, eu estou indo dedo do pé, torná-lo texto de área, e eu vou agarrá-lo assim. Deixou uma linha, e vamos usar algo assim. Então aqui temos o próximo Não vai ser feito. Vai ser 16, então certifique-se que é 16 e este vai ser 24. Acho que vamos fazer isso 2016. 20. E a próxima cor vai ser esta. Vamos até aqui expirado. Descolorido porque estamos usando de novo e de novo. Também esta cor é também a nossa cor de texto grande cor X. Ok, então nós temos isso sob controle e eu vou deixar 12 do topo. Vamos criar o fardo agora. Então o fardo vai estar aqui assim. Sem fronteira. A sensação vai ser a nossa cor primária secundária. Basicamente, vou adicioná-lo aqui novamente. E acho que usamos um segundo regular diferente, que era este. Então eu vou adicionar este aqui novamente, e também vou adicioná-lo. Os dedos do pé são seculares por aqui? Certo, então temos coisas básicas definidas. Talvez possamos torná-lo um pouco maior porque temos menos rosto no topo. Algo assim que vamos usar para BB da NUS em alguma sombra em torno dele. E a cor da sombra pode ser esta ou esta ou esta, esta aqui. Então eu vou usar algumas sombras muito claras 40%. Algo assim. Tem um pouco de Dexter aqui. Linha central. Vamos usar a cor branca para este texto. Isso é algo que você algo assim. Alinhe no meio assim. E eu acho que precisamos de um pouco mais de Grã-Bretanha porque temos, haja margens e camas de ambos os lados. Ok. Então também podemos usar algo como 14 aqui porque faz mais sentido. É uma espécie de status. Certo, então temos. Então vocês são os designers. Você pode mudar algumas coisas aqui e ali se quiser. 12. Certo, então temos 12 aqui. Qual é o problema com isso? Porque eu acho que isso está no nível de sub-pixel 0,5. Vamos remover 0,5. Vamos usar para 27 e ver qual é a distância. Eles são pequenos por 20 anos, e serão 16 porcos fanáticos por 16 pontos no fundo. Ok, então nosso texto em tudo isso tudo o resto está feito. E se você quiser, você também pode usar 15 Roberto, e vamos usar isso algo assim. E acho que o 14 está melhor porque temos mais? Hum, você sabe, mais espaço aqui, e parece melhor. Ok, então agora vamos replicar este texto aqui. Certo, então temos essa mensagem aqui. Vamos fazer um texto de linha, e eu vou alinhá-lo aqui assim. Vamos fazer isso um pouco maior na cor do texto. Vou usar isto. Criar, ext, porque é uma espécie de estudioso. E vamos graham sobre ícones e colocá-los aqui. Estas são afirmações thes ícones animais. Quando tivemos este, outro é este. Agarre-os e prenda-os aqui. Arrastou-os um por um. Mova-o para dentro. Por aqui. Como isso. Também este. Agora vou aumentar seus tamanhos. Então vai ser 36 e este é Vamos manter este como está. Ok, então nós vamos usar o ER físico para ser algo assim. Cor do texto também para este centro. Alinhe-o com este, Na verdade, qual é a distância entre este e a fronteira 12 também para este, Na verdade, você deve cuidar de seus, colocando alguns 24 grande vendedor 24 bloco dp aqui. Então a maneira correta é que se você quiser, você pode usar algo assim. 24.24. Mas vá em frente. Ok, então não é basicamente 24. Então vamos usar um bloco fora 36. Vamos usar um quarteirão 40. Algo como aquela porta aqui para este. Vamos trancar o fundo do guarda porque não precisamos mover um afogamento. Vamos tirar os dois deles e movê-los para cá assim. Ok, então basicamente, você precisa fazer algo assim. Mas não vamos usar isto assim. Estamos usando nossos olhos para, você sabe, para alinhar as coisas. Então eu vou acreditar que este retângulo como este, e eu acho que eles estão olhando muito bem em não sente nenhum problema ao ver isso. E agora, se eu tiver tudo o que parece, mova tudo isto para dentro deste cartão, e se eu quiser movê-lo para cima, eu posso movê-lo. Algo assim. Este ícone está olhando um pouco o fundo e não se alinha com este. Há uma linha para completar este texto. Ok, então eu acho que está olhando. Criar Se você quiser mover este ícone ou torná-lo um pouco maior desta vez, bicicleta nesta digitalização polegar, você pode usar 36 por 36 algo assim e mudar a cor do dedo do pé. Este talvez este. Então isso parece ótimo. Também alinhou as bordas esquerdas desses ícones, este neste como aquele. Ok, então na próxima lição, nós vamos criar o próximo conteúdo, que é o nosso próximo cartão. Então vamos passar para a próxima lição. 32. Design de cartão do painel no ♥: Antes de criarmos a segunda parte deste cartão, eu vou te mostrar algumas coisas que eu fiz, que eu transformo para isso. Ok, então a primeira coisa é que eu ajustei o tamanho deste texto para 16 pontos, que é basicamente sobre a festa quatro lados, então eu não quero mexer com isso como 14 é basicamente um tamanho menor que estamos usando. Então este é o 14. Este é o 16. Além disso, este ícone é 36 este eu mudei para 28 DP. Ok, então isso vai ser continuado até 28. Ou aqui também fez o tamanho desta altura e largura de 1 98. Deve ser 328. Não sei por que é. Veja 100 final 20. Certo, então três e 28. Ok, então este é o tamanho. Ok, agora vamos replicar este, este cartão, e vamos ver onde este cartão está bem, então aqui temos. Eu vou concordar, Mandy e nós temos esse outro cartão, e eu vou arrastar até aqui, e nós precisamos não precisamos de poucas coisas, então eu vou deletá-los assim. Ok, então eu apaguei as coisas desnecessárias. Vou redimensioná-lo e arrastar o novo que eu trouxe aqui, Jane, os decks. Então eu vou acelerar. Não. Vamos usar o botão e mudar sua cor para o botão desativado, que era a nossa nesta cor aqui. Desativado. Carregado. Ok, então eu vou clicar isso removeu a sombra, e isso é tudo. Vamos mudar o dedo do pé do texto. Hum, não há necessidade de centrar. Alinhe do nosso turno. Veja em. E está no meio. Acho que para o sistema operacional Mac. Os atalhos são um pouco diferentes, eu acho. Março, se C ou r talvez controlar a cigana. Eu não me lembro. Ok, então você pode verificar isso, ou você pode usar apenas uma porta folga fora deles e usar esses controles aqui. Ok? Não, se você quiser fazer alguns pequenos ajustes como você pode ver aqui, este ícone está olhando muito perto deste lado esquerdo. Sim, acho que é só ter. Depois a distância. Eu vou usar 12 dp e mais alguns ajustes como você pode reduzir o tamanho deste um dedo 140 algo assim e mover este botão de sincronização de carga para aqui. Um grande topo também nos verificou margens direita e esquerda, por isso deve ser 12 DP. Estou usando 12 em torno das margens, que é, eu acho, o padrão para design de materiais, Google Material Design. E eu acho que é isso. Se você quiser mudar qualquer outra coisa, a distância entre esses dois é 12 DP. Se você queria aumentar o 16 profundo é que você pode fazer isso e ele vai se parecer com isso também. Se você quiser, remova as sombras , você pode remover as sombras, e será a mesma prova. Esta vai ser a mesma eleição das Sombras. É basicamente o efeito que projetamos para um choque, porque esse botão não é elevado e isso é sinalizado para isso significa que isso é, uh, isso é basicamente interativo. Então, isso é tudo sobre a criação deste painel. Espero que tenham gostado desta lição. Vamos passar para a próxima lição 33. Tela de atividades no ♥ Design: antes de projetar a tela de atividade estão se movendo para a próxima coisa. Vou te dar algumas dicas aqui para organizar. Oh, estão fazendo melhor uso do espaço de luta em seu projeto. Ok, então agora se você olhar para aqui, nós temos 16 pontos de margem em ambos os lados para segurar esses carros. E estes elementos não. Tenho certeza que você pode estar se perguntando que esses elementos parecem um pouco diferentes do passado Exemplo. . Porque estas linhas aqui, você pode ver que este, uh, texto e esta imagem eu quero movê-lo mais para dentro da cidade. Está bem, então o que estamos a tentar fazer é deixar-me mostrar-te. Vamos ligar a grelha. , Quadrado, Greg. Ok, então vamos ampliar e eu vou te mostrar. Você pode ver aqui que temos esse conteúdo e está começando a partir de 1234 quase aqui e aqui temos o conteúdo, que está começando por isso, e ele também está olhando para fora desta área. Então eu vou fazer é eu vou movê-lo para dentro assim aqui. Ou talvez pelo menos aqui, onde combinam um com o outro. Ok, então também, nós vamos fazer o mesmo por isso. Parecia o que temos ou aqui. Ok, então vamos agrupá-los juntos. Isto é uma armadilha. Então lá nós temos alguns fora dos problemas desses elementos extras, então eu vou movê-lo mais dentro desta também esta diversão. Oops. Talvez eu ache que preciso mover esses dois um com o outro assim. Ok, agora nós também podemos mover esses dois. Eu escolhi mais aqui. Ou talvez 24. Ok, então isso parece melhor. Certo, então vamos sair daqui e terminar essa nota e ver os resultados. Agora você pode ver que eles estão parecendo mais alinhados. Mais melhor metro espaçado. Mesmo que você queira mover isso um pouco mais perto disso. Oh, aqui. Assim, você consegue. E agora você pode ver que eles estão parecendo mais alinhados um com o outro. Ok, então isso é apenas uma simples ponta dos pés. Alinhe seu você um elementos de design. - Não. Vamos mover esta tela de atividade. Vamos replicar esse painel e nomeá-lo atividades. - É. Agora vamos até Habilitar isso na área superior do painel. Ok, então para habilitá-lo, nós vamos para DoubleClick. DoubleClick e nós vamos usar a nossa capacidade, preencher o seu usando 70%. Vamos usar 100%. Também este ícone. Vamos fazer um grande 100% dele e fazer o resto por este. Vamos desativá-lo ou vamos usar. Ah, um pouco menos transparência aqui. Então vamos usar algo como 2%. Por isso, está a usar 70%. - Claro. Vamos usar 70% para o próximo. Vamos usar 70%. Basta mover este indicador de quê? Cabelo? Selecione barco fora deles ossos e indicador. E vamos alinhar no meio assim. Certo, então isso está ativado. Não, fizemos alguma coisa. Nós estamos aqui. E por isso, vamos remover tudo isso. Só este neste. Talvez fiquemos com este. Não precisamos deste gráfico. Então você vai deletar? E também estamos indo toe Relacionar estes? Acho que sim. Vamos diluir este. E também este. Não, este texto vai servir como o nosso texto superior, que é para os nossos itens de lista foram basicamente criando itens de lista. Vamos ao grupo no início. Está bem. Então, neste exemplo, eu vou usar três linhas fora do texto aqui, e este é o nosso círculo principal. Vou reduzir o tamanho deles para 40, o que é realmente o tamanho dos tratamentos globais. Então eu vou usar 40 para este. Certo, então temos dois elementos aqui. Precisamos de mais uma coisa, que é o nosso ícone de seta. Vamos arrastar o ícone de seta para cá. Este é o nosso ícone de seta, e vamos arrastá-lo para o Adobe X'd. Tudo bem, vá em frente. É uma linha que é assim para alguns. Próximo dentro dele. Então 01 Algo como aquele dedo do pé wiki. Faça uma linha no meio do barco de folga fora deles assim. Aliando no meio. Acho que o nosso texto e tudo os olhos quase alinhados. Vamos aproxima-lo deste. Porque a distância deve ser, eu acho, quase. Oops. Então temos dois overs aqui. Vamos mover a fronteira em torno dela. E agora são exatamente 40 DP. Ok, então este é o tamanho exato que o Google recomenda para alguns status ou imagens ou aqui. Então eu estou usando este aqui. Agora estamos indo para o pé. Aproxime isto e vai ser 16 db longe daqui. Estas são as especificações exatas. Além disso, isso vai ser 16 para estar longe daqui. Ok, então temos tudo quase alinhado. Vamos mudar a cor do dedo do pé deste azul, que é a nossa cor ativa. E o que nós precisamos aqui é de algum retângulo com er vital. Ou talvez possamos usar outra coisa. Vamos usar. Ok, então vamos usar um retângulo fora da altura 88 e mover a borda. Phil vai lutar, e nós vamos movê-lo para baixo de tudo. Ok, então nós terminamos com este aqui. Vamos lá no meio disto. Então o que vamos fazer é agrupá-los, então vamos agrupá-los. Estes são os nossos alunos, algo assim. E vamos alinhá-lo no meio disso. Além disso, estes dois iam agrupá-los para o próximo. Há permitir isso no meio deste, e também este. Ok, então nós estamos quase terminando isso. Lexie, Qual a distância daqui? Vamos fazer 24 em vez de 25. Ok, então isso está feito. Precisamos de mais uma linha na parte inferior para um separador. Então eu vou cair on-line, e nós vamos usar descolorir esta cor de borda muito fraca, que vai ficar muito agradável aqui. E vamos alinhá-lo na parte inferior disto. Ok, então agora você pode ver que temos tudo aqui. Agora, vamos para UN agrupar este texto porque vamos atualizá-lo usando um arquivo de texto. Não, vamos fazer um grupo com tudo isso, e vamos criar ganância repetida, ou vamos usar uma repetição. Estranho. Então eu vou selecionar todos eles. Clique em Repetir. Bom. E esta é a nossa repetição. Bom. - Não. Desligue a magia, vai ser extra. Então vamos criar uma grande lista de repetição como essa. 3456 itens. Eu acho que você vai precisar de seis itens aqui como este. E agora vá no meio disso e tente reduzir o tamanho mover para cima, e vai ser zero dedo do pé. Torná-lo perfeito. Está bem. Então você pode ver, nenhuma outra lista está completa. Terminamos com essas atividades. Se você quiser mudar alguma coisa, você pode clicar duas vezes e Jane as cores desta. Antes disso, vamos fazer mais uma coisa. Ok, então nós vamos atualizar essas avaliações de texto. Então eu já fiz um arquivo de texto, e isso é para atividades. Então eu vou arrastar este arquivo e eu vou soltá-lo nesta presença, então ele vai mudar tudo agora. O problema é que eu acho que meu texto estava alinhado no meio, então isso criou alguns problemas. Então, antes disso, vamos voltar para o primeiro passo e um barco como este e torná-lo alinhado à esquerda também este. Faça-o deixar uma linha. Agora, novamente, crie eso. Repito, já está lá, então vou repetir novamente. Reduza o tamanho no meio. Está bem. E agora vamos largar o próximo, ou aqui agora você pode ver que não substitui nossa expedição de mudança. Ok, então você também pode mentalmente e isso aqui, como zero dedo do pé algo assim. Se você quiser e mais algumas coisas. Por exemplo, se eu quiser mudar alguma coisa aqui, talvez eu queira que a cor fora deste seja mudar o dedo este este azul espera. Então, antes disso, eu estou indo para o grupo un minha grade. Ok, então eu vou mudar minha cor fora no Lee este item. Então isso vai ser branco, e isso vai ser também branco. E vamos continuar a descolorir o mesmo, está bem? E não, este podemos usar. Ah, talvez alguma outra cor. Talvez este. Então este é um esquema de cores diferente do que antes, mas eu acho que eu realmente gosto muito afiado. Muito agradável. Então isso é apenas para garantir que algo é muito importante acontecendo aqui. Ou talvez algo assim ou usuário precisa de atenção para este, ou isso é possível ou algo assim. Outro esquema de cores que você pode ir com é este. Você pode usar este fundo assim, e para este, você pode ir com uma cor mais escura, que é este, algo assim. E para isso você também pode ir com essa cor mais escura. Então, na verdade, eu usei este porque esta é a nossa cor primária. então eu não quero que ele seja usado dentro do meu aplicativo muito. Então esta tela está completa. Esta é a magia da nota repetida, e agora vamos duplicar a tela, seguir outra e limpar a tela da pia na próxima lição. 34. Tela de sincronização do ♥ Design: Ok, agora neste ouvir, vamos criar tela de canto, e vamos replicar este porque é muito semelhante a esta tela. Então, primeiro, vamos usar essa facada e ativar esses arquivos de sincronização aqui em vez dessas atividades. Então eu vou entrar e fazer o mesmo. Faça isso 70% ou 60%. E este texto vai ser de 70%. E isso está indo para o pé. Isso é basicamente sentir. Então, vou perder este. E este é o nosso Este é o nosso ícone. Há este ícone. Certo, então aqui temos. Vamos fazer com que seja 100%. E essa barra de linha vai se mover. Então este é ativado para perguntar, desativado. E agora o que vamos fazer é apagar isto. Excluir isso Realmente isso eu acredito nisso e liberar isso Agora nós também estamos indo para o grupo da ONU isso, então eu vou pisar no grupo. Então temos todas essas camadas. Agora vamos novamente grandes criadores de classe B. E agora precisamos de apenas quatro itens de 123 e mais um assim. Não, estou bem. Realmente usar o espaço para zero novamente. Movendo para cima zero. Perfeito. E vamos deixar cair de novo. O arquivo aqui. Arquivo de texto Se você não sabe como essa mágica realmente acontece, estes são Este é basicamente um arquivo de texto em quatro linhas e eu já digitei. Então eu vou arrastar e soltar no meu Lear, que eu quero mudar este. E agora você pode ver que foi alterado muito em 44 arquivos, Quatro entradas. Se quiser mudar algo aqui, pode fazer isso. Os homens eram liderados por clicar duas vezes, clicar duas vezes e entrar por aqui. Então eu vou usar isso como minha tela desativada. Então vamos fazer isso em dezembro. Ok? Então, primeiro nós vamos fazer é nós estamos indo para a notícia da opacidade e fazer esta capacidade de texto para 60%. Oops. Então precisamos desembrulhar isso basicamente primeiro sob grade. Onde está a nossa rede? Esse filho agrupa porque estamos mudando os estilos ou aqui, então capacidade, reduzindo a opacidade da capacidade de texto para 60% assim. Vamos mudar sua cor para outra coisa assim. Ou talvez algo assim. E também este. Vou usar alguma coisa. Vamos usuário sculler toe opacidade isso Vamos usar opacidade s então eu vou fazer 60%. Agora você pode ver que isso parece claramente inativo ou desativado porque não podemos usá-lo. E se você quiser alterar o status, por exemplo, minhas imagens para baixar nossas como 10 imagens, então eu também posso fazer mais uma coisa. Eu posso mudar sua cor para este aqui. Algo assim. Ou talvez uma sombra mais escura deste. Vamos abrir nossas bibliotecas e ver que temos outras cores aqui, então não, vou usar um assassino de mães da Biblioteca de Assis. Vou escolher o dedo do pé. Eu selecionei este. Vamos abrir este. E eu vou usar essa cor mais escura para enfatizar que isso é importante. Certo, algo parecido com algo assim. Então, Então, é assim que você usa sua ganância repetida. E se você quiser obter algo dentro dele, você pode fazer isso na Adobe. Na verdade, acho que é mais fácil as coisas mudaras coisas. Vou afundar arquivos. Vamos renomeá-lo. Precisamos de mais um botão e status aqui para que possamos fazer uma coisa que limpe esta avaliação de garrafa como um símbolo. Faça disso um símbolo. Vá para a biblioteca de símbolos e eu vou arrastar e soltá-lo aqui assim. Sabe, vou clicar com o botão direito, e vou desembrulhar o dedo do pé. Este grupo é e um símbolo de grupo, porque eu vou mudar algumas das muito 10 caminhadas. Então aqui temos de afundar à nuvem. Vamos ver se ele vai caber no mesmo tamanho. Vou arrastar o ícone até aqui, recheado por aqui em algum lugar. Vamos arrastá-lo para dentro. Este zoom in looks vem, mais ism in, e precisamos alinhá-lo no meio disso. Então eu vou usar isso. Está permitindo isso por aqui. Então eu vou para 11 tau 12.12 pontos ou 12 dp daqui e também o texto, e este vai ter abelhas de qualidade. Parece ótimo. Vamos levar isto para o meio. Esperanças afundar tudo a nuvem, mas fazer um fardo maior. É mais fácil colete ou clique por qualquer usuário espera. Vamos fazer algo assim de novo. Vamos ver. Qual é a distância entre? Deve estar acima de 12. Isso parece ótimo. Vou dar o dedo do pé. Alinhe no meio. Oops. Próximo grupo ID Comando G e Alinhado Ilimitado. Vamos adicionar o status aqui no carrinho de passeio aqui na parte inferior. Então vamos tirar a cor deste dedo. Vamos mudar isso para que este crie um ext alinhado no meio. Não vou usar o boto médio 14. Vou usar o 14 regular aqui. Algo assim. É muito baixo na parte inferior. Então, eu estou indo dedo do pé, chegar mais perto deste aqui. Então isso parece ótimo. Seria a distância entre estes dois. Uh, OK, então eu acho que este está feito. Se você tem alguma dúvida ou quer saber mais sobre as especificações, é tudo o que eu usei aqui? Isto é basicamente 88 DP. Eu não tenho certeza por que ele está mostrando o um pixel mais, mas se você clicar duas vezes sobre ele, você pode ver que é 3 60 por 88 DP, que é uma especificação para três. Linha A três linhas Um item de lista do design de material do Google. Ok, então nós criamos isso com sucesso. Nós temos uma tela esquerda, que está na facada aqui é a guia nesta tela. Acho que esqueci de adicionar a guia. Então vamos usar algum ícone dab aqui para mostrar as telas esta navegação na gaveta esquerda ou aqui. Então vamos passar para a próxima lição onde vamos criar a última tela, que é deixado de navegação desenhada. 35. Tela de gaveta do ♥: Ok, antes de começarmos a desenhar esta queda de narração nós tínhamos ganhado alguns apenas querendo consertar, que era este. Então nós vamos copiar este ícone de hambúrguer aqui menu de hambúrguer, e nós vamos colá-lo. Entendido, e nós vamos colá-lo em todos esses desenhos no lugar fora daqui. Então, estou apenas a clicar duas vezes para chegar a este. Controle V. OK, então você pode ver que ele superou no lugar. Então nós estamos indo toe usar outro recurso off em o B x D. Então nós estamos indo toe klik e selecione com deslocamento clicando em todas as diferentes placas de arte que queremos dedo trabalhar com e controle ou comando re. Está bem. Então você pode ver que eu superei este elemento várias vezes em todos esses livros de arte. Então este é um truque muito legal se você quiser fazer isso. Ok, então agora vamos Esta é a nossa barra de tabulação. E ouvimos algo aqui que está no conteúdo da barra de ferramentas. Nós vamos excluí-lo de forma semelhante e vamos com este, então nós só precisamos excluir essas setas de trás. Ok, então todos nós terminamos com esses, uh, hambúrgueres homens, você sabe, nós vamos criar o lado. Nunca. E, ah, nós vamos usar este painel como nosso plano de fundo, então eu vou replicá-lo. Controle de comando, De. Então nós temos outra tela ou aqui agora eu vou nomeá-lo, Nunca desenhar. E o que vou fazer é esconder tudo, exceto o estado da faísca. R Então eu vou mover o status, mas no topo como este e menu de hambúrguer e todas as outras coisas, eu vou agrupá-los em um grupo, uh, são chamados de fundo. Ok, então eu vou trancá-lo agora mesmo para que nós não movamos por engano este fundo. Agora vamos para o nosso “você “e “Reggie “por um grande estúdio simples, e nós vamos fazer caranguejo esta tela e o que realmente precisamos é ir para este painel de camadas . Precisamos desta navegação desenhar navegação lateral desenhar redoubt esta barra de status. Mesmo que você queira copiar a parte de status, você pode copiá-la. E também este fundo. Certo, então o que não precisamos é que essa espera, então temos algum problema. Estamos aqui com qualquer esperança. Ok, então vamos selecionar isso agora mesmo. Controle ou comando comandado. Vês? E nós vamos colá-lo na parte de cima deste. Ok, então agora você pode ver uma navegação. A corrente de ar está aqui. Vamos ver, qual é o outro mais cedo aqui, qual é este? Este é o fundo. E isto é, vamos copiar este fundo e baseá-lo aqui. Ok, então agora vamos mover esta sobreposição para trás. Mas o corpo de status vai estar no topo assim, e o que vamos fazer é usar alguma capacidade para isso 50%. Vamos fazer com que 50% de capacidade assim. Ok, então isto é por aqui, e agora vamos conseguir. Vamos desenvolver, clicar nele e usar este fundo, e eu vou pisá-lo aqui e torná-lo cheio dele. Certo, então a pele está cheia. Agora, nós montamos nossas principais coisas aqui. Vamos Gleaton os que não precisamos. Ok, então talvez nós não precisamos que é isso é basicamente uma lista eso Eu vou selecionar tudo abaixo disso Nós só precisamos de três fora deles. Ok, então vamos usar um é mudar de perfil ou talvez selecionar. Ah, ano de avaliação. Também por aqui. Vamos usar o nome do nosso médico. Vamos usar este e-mail como o que quer que seja por aqui. Vamos ver. Coloque esta imagem aqui, cada alcatrão e eu vou mudar o grande mapa aqui para aquela imagem de médicos retardatários. Você estava aqui imagens, e este é o nosso bonito Dr. Há um lugar tudo aqui como este, e eu vou remover este grande mapa, dimensioná-lo e clicar em outro lugar. E você pode ver agora que ele já cortou. Então eu vou clicar duas vezes e selecionar este filme. Afogou-se. Vamos torná-lo um pouco menor assim. Ok, então isso parece bom. Eu não tenho certeza, mas eu acho que este aqui parece muito perto desta fronteira, então eu vou movê-lo para baixo. Ok, então vamos ver. O que? Onde está o tamanho deste? Então esta é a nossa lista, então acho que devemos mudar de lista. Pelo menos, hum é DP para baixo. Então, algo assim. Agora, deixe-me ver qual é a distância. 10. Ok, então agora ele está olhando melhor porque eu acho que o material design do Google material projetado eles têm alguma separação entre lista e outros itens fora de um DP, pelo menos. Então agora nós temos incentivar a separação, e nós só precisamos mudar nossos ícones aqui. Ok, então eu vou arrastar ícones para cá. Além disso, se você puder, você pode alterar esse plano de fundo, que é essa imagem de máscara. Então podemos mudá-lo aqui assim. E eu vou trazer este fundo da minha pasta SS, e eu vou substituir por este aqui. Eu só arrastei a imagem para cima desta. Ok, então se eu me mudar agora para fora disso, vai ser algo assim. Ok, então mais uma coisa, se você quiser, você também pode sobrepor algumas coisas em cima dele como este, e eu vou preenchê-lo com a descoloração, e eu vou usar alguma capacidade como essa . Talvez algo assim leve para fora e você pode ver que este é o mesmo efeito que estávamos procurando. Certo, então vamos arrastar essa imagem para o meio. Oops. Algo assim. Certo, agora vamos substituir esses ícones. Então vamos a isto. Os ícones da última tarefa. E aqui temos o ícone. Este é um perfil 1. E esta é a cabra da lei. E a mudança aqui é esta. Então eu vou pegar todos eles, arrastá-lo para o meu arquivo, baseá-los no melhor quadro, para que eles não se confundam aqui. E o que eu vou fazer é copiar e ir para o ícone da caixa de entrada da função baseado aqui. Não, eu vou alinhá-lo em cima disso. Eu fui e apenas deixá-los chave de ícone caixa. E agora o que vou fazer é mudar a cor para esta cor de destaque, que era o nosso “isto”. Ah, cor de destaque secundária. Então é assim que vai parecer. E para este, você pode ver que eles usaram um pouco de cor sobre o cabelo, que é deixe-me mostrar-lhe qual é a cor deste aqui? 54% de capacidade para Phil cor preta. Então eu vou fazer está tudo bem, então estamos todos bem. Há mais uma coisa. Se você quiser fazer isso, você pode mover este logotipo na parte inferior e colocar alguma separação de linha. Então, lei, cabra é diferente de tudo isso. Mas se você quiser mantê-lo aqui, isso é até você sabe, eu vou ler todos esses ícones, e eu acho que outro desenho de navegação está feito. Esta parte vai estar no topo. A parte do status vai estar no topo. Está tudo bem? Porque tem mais elevação e depois as duas coisas. Ok, então isso é tudo sobre este design. Eu lhe mostrei como completar completamente projetado todos estes. Vamos selecionar e movê-los. Ou aqui, vamos movê-lo para dentro Estes. Ok, então nós projetamos seis telas e ah, obrigado por tomar seu tempo e construir comigo em todos esses longos exercícios. Espero que você tenha gostado desta lição e aprendido o design do Google Madrid especificações de design e aprender a usá-lo. Eu posso construir rapidamente o seu projeto. Ok, então o que estamos fazendo aqui é que estamos apenas cheios. Ah, com base em cores e tipografia e alguns dos elementos, tamanhos e distâncias usando material, diretrizes de design de material do Google, e espero que tenham gostado desta lição. A próxima lição. Vamos usar o recurso de exportação em lote aqui, que está na exportação de emblema de exportação para exportar todos os nossos ativos em diferentes buckets de resolução . Para xxx dp i xx e p i três obras extras um próximo 1.5 x e todas essas diferentes resoluções que são suportados pelo design de material do Google. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 36. ♥ atribuição final: Ok. Até saber que você aprendeu tudo sobre o design de material Android e como você pode usar material Android projetado para projetar APS impressionante aparência. Agora, você me viu fazendo um exercício para você. Agora, eu quero que você crie outra tarefa. Esta vai ser a tua última missão. Então você vai criar Ah, aplicativo de mensagens muito simples para mim. E eu só quero que você crie três telas. Então deixe-me mostrar o que e quais telas você vai me mostrar para suas tarefas finais . Criar uma equipe ah, esquema de cores. E aplique isso ao design de materiais. Usou seus filhos e tenta trazer essa vida. Você pode usar suas próprias idéias se quiser. Você pode usar sua própria força personalizada se você quiser dedo do pé. Mas quero três telas de você. Ok, então eu vou mudar para a minha área de trabalho e vamos ver o que eu realmente quero de você. Ok? Ok. Agora você pode ver que eu estou neste aplicativo de mensagens mais SMS e você pode ver que eu só quero essas três telas de um. É esta caixa de entrada que tem todos os contatos diferentes e todas as mensagens diferentes enviadas de seus amigos e a data e talvez a hora aqui. E estamos usando três guias fixas aqui que você pode ver no topo, e a próxima tela será a tela de mensagens onde as diferentes mensagens aparecem e você fala com seus amigos e então a última rainha será contato. Ok, então, SMS eu queria que você desenhasse sm ists, contatos e chamadas. Se você quiser ignorar a chamada, você pode usar este SMS e duas telas, na verdade abortar. Ok, então três telas. Um deles é com este SMS onde você está conversando ou conversando com seus amigos. Um com todos esses contatos e um esta caixa de entrada onde você tem todos esses smmes. Então tente usar seus filhos brancos. Eu forneci a você durante os resultados. Tente reinventar a roda. Então vá em frente e projetou este exercício. Eu vou rever este exercício e eu vou dar-lhe dicas sobre quente. Melhore suas habilidades de design. Tire a captura de tela dos shorts. Seus projetos estão exportá-los como perigo. Você pode projetar em três x dois x ou quatro x xxx sdp I, mas certifique-se de criar boa aparência, tela de placa de arte de bom tamanho, onde eu posso facilmente visualizá-los. Não tente enviar para arquivos grandes, então será difícil para mim visualizá-los separadamente. Ok, então certifique-se que as imagens que você vai exportar de seus quadros de arte para me mostrar embutido. Pode usar mais um copo, se quiser. Você pode baixar qualquer Samsung ou qualquer android como simulação de telefone e colocar essas telas em três marcações diferentes e enviar isso para mim. Essa é uma boa maneira de apresentar seus projetos. Ok, então eu espero e vejo longe vendo para a frente e esperando por suas tarefas que começam a projetá-los agora. 37. Bens de exportação do Adobe XD no Adobe XD: Está bem. Agora, nesta lição, vamos cuidar da parte de extração de ativos do nosso projeto. Agora, extração de ativos é basicamente que precisamos dar aos nossos desenvolvedores todas as diferentes resoluções para os próximos dois x três x Então uma imagem vai ser como duplicada 45 vezes. Então, temos que dar cinco ou quatro arquivos para suportar todos os diferentes baldes de densidade que o Google Android tem olhos suportados está suportando agora. Então o que vamos fazer é que há uma função muito criativa no Adobe X'd. Então, vamos clicar nisso e torná-lo lote para Mark para exportações de patches. Então este é o nosso logótipo. Certifique-se de que você vai nomeá-lo local grande, algo assim. E também este local. Vou chamá-lo de Logo Pequeno, algo assim. Então eu vou apenas marcar isso, então isso vai ser na exportação de crachá. Além disso, este aqui. Vou marcar como uma exportação de crachá. Além disso, se você quiser, use este registro aqui, você pode selecionar ambos fora deles. Venha G e use isso como um bar Bt e Logan e também mercado como exportação de crachá. Então você estava indo para exportar todos esses ativos também isso, mas eu sei aqui, e este é o nosso fardo. Cadastre-se. Então eu vou para o mercado como meu ativo. Então continue fazendo isso por todos os ativos que você usou. Você também pode marcar estes ícones ah, aqui. Está bem. Então você pode usar esses ícones e marcá-los, ou você está deixando seu design nossos desenvolvedores fazer o resto. Está bem? Então você eles podem obter esses ícones do sistema. Eu causo de desenhos materiais. Então você não precisa se preocupar em extrair todos esses ícones. Ok, então talvez este botão, nós precisamos desta patente Subedi em um Brasil. Vou ao mercado. Esta é a nossa pia de madeira. Ok, então eu vou chamá-lo de pia, então certifique-se de que você está nomeando-os corretamente. Você também pode conversar com seus desenvolvedores sobre convenções de nomenclatura, o que eles estão usando, seja usando traço ou sublinhado. Oh, é algum outro método de nomear seus fogos algo assim. Certo, então talvez possamos esperar por isso. Ok, então este botão, eu vou ser a nuvem n Sync. Algo assim. Ok, então, uma vez que você tenha selecionado todo o seu extrato e todos os ativos que você deseja extrair. Só estamos indo para este menu aqui Exportar e lote. Então, ele vai exportar todos os ativos que marcamos, então certifique-se que você os marcou corretamente. Ok, então nesta tela de exportação, vamos selecionar o Android e nós projetamos 100% MDP. Eu nunca mudo isso. Esta é a pasta que selecionei. Você pode exportar para qualquer pasta que desejar. Formá-lo. Sempre tente usar BMG porque ele pode apoiar a transparência aqui. Ok, então, não, eu vou clicar na exportação. Vai exportar todos os bens. Vamos ver, onde estão essas afirmações e como elas foram exportadas para vários tamanhos diferentes. Ok, Agora eu estou na minha pasta de exportação e você pode ver que criou toda a resolução diferente. Suportado afirma todos os ativos que entram em seu aplicativo. Eles vão estar nessas pastas. Tribal sdvi triable, ldb I m d b a x DPS xdb I e triplo X HD via Então, se abrirmos este, você pode ver os tamanhos são muito grandes, você pode ver os botões são muito grandes. O logotipo é muito grande, então se formos para este, você pode ver que todos os ativos são um pouco de tamanho médio para telas extra de alta definição e, em seguida, estes e, em seguida, menores para este. Então, se clicarmos nisso, você pode ver onde o minúsculo tronco na Grã-Bretanha. Então normalmente eu acho que nós não estamos indo para o pé. Precisa desses dois LDP e STP I vamos precisar de X m x x x x triplo X. Então é assim que você usa seu adobe X'd para extrair todos os ativos usados em seu aplicativo e dá-lo para seus desenvolvedores. Na próxima lição, vamos aprender a usar Zeppelin vestido. Extraia todas as cores, desfiladeiro e tudo usando seu Adobe X'd e dê para seus desenvolvedores. E ele vai ajudar seus desenvolvedores rapidamente construir o esquema de cores e tipografia ou seu fora seu aplicativo, ou até mesmo ver as especificações que verruga botão sobre o tamanho fora da carga em DP. Quais são as distâncias de diferentes botões e elementos de feitiço em DP? Então esta é uma ferramenta muito boa. Então, na próxima lição, vamos usar Zeppelin. Então, para isso, eu vou para o meu Mac. Eso próxima gravação de tela será do meu I Mac eso Vejo em breve na próxima lição. 38. ♥ usando Zeplin e Android Adobe XD no MAC: Ok, agora neste ouvir, vamos usar Zeppelin dot io para extrair todos os nossos ativos e todas as especificações de desenvolvedores diferentes e todos os nossos protetores de estilo e todas as nossas distâncias entre diferentes elementos usando Zeppelin dot io Se você tomou meu ah, será curso extra ou fluxo de trabalho mais do que representar chamadas. Você pode já estar familiarizado com Zeppelin dot io. Então saiba o que você precisa fazer é se inscrever grátis e baixar Zeppelin dot io para seu sistema operacional. Neste momento, ele está funcionando com o aplicativo Mac. Você pode ver aqui temos o aplicativo Mac e há também um aplicativo do Windows, mas no O b x d Apenas suporte agora no aplicativo Mac para usuários do Mac. Então, se você é um usuário de Mac, eu acho que você está com sorte. Você pode facilmente extrair todos os seus ativos e tudo usando isso. Ok, então baixe este aplicativo, instale-o, e você vai iniciar este aplicativo. E uma vez que você lançá-lo, ele vai mostrar algo como isso. Certo, então aqui temos esse Zeppelin. Eu excluí meus projetos anteriores, então haverá apenas 13 projetos. Então você está em um livre mais para que você só pode manter um projeto. Então eu vou criar um projeto divertido e vai ser android. E eu vou pressionar o dedo do pé, criar. Está bem. Então eu posso mudar o nome, ferramentas Toe GP, algo assim. Está bem. E extensões. Eles já acrescentaram que ele vai usar examinar. Agora você pode ver aqui eles também têm o guia. Se você clicar nele ou txt, eles vão mostrar-lhe que você precisa ir para Exportar e Zeppelin para esboçar sobre bx deficit. Mente para as lojas. Fácil. Então estes são os quatro APS completos que eles estão suportando agora, então eu vou mudar para o meu Adobe X'd e você pode ver aqui. Aqui está o arquivo que foram projetados. Eu o compartilhei usando minhas bibliotecas CC na nuvem. Então, como? Eu abri este aberto e eu fui para os arquivos da Creative Cloud, e este é o meu extra na sala de aula e arquivo de gravação. Então eu abri aqui, e agora o que nós vamos fazer é selecionar todos os furos de arte ir para exportação de arquivo em CEPAL em. Ok, então este é o projeto que não vamos substituir por importação. E nós o projetamos MMD p I porque é o Von X. Então vamos selecionar este, então mude e clique aqui, e ele começará a carregar telas diferentes. Se alguma tela falhar, você pode clicar aqui e tentar novamente mais uma vez. Certo, então temos todas as telas carregadas. Agora podemos nos misturar com eles e escolher diferentes cores e tipografia e tudo mais. Ok, então primeiro eu vou para ir com esta tela de logon de tela. Agora eu abri esta tela e você pode ver se eu clicar aqui ele está me mostrando o tamanho em DP. Ok, então a distância entre esses dois é 21 db e ah, isso é ah as distâncias de ambos os lados. 101101 dia ser de tapetes. 213 DP. E se você olhar para o lado direito aqui nós temos este painel onde podemos adicionar nossos tipos de letra. Estes são os fardos onde podemos adicionar a cor. Então, se você quiser adicionar esta cor ao nosso guia de estilo, clique aqui e ele é adicionado. OK, Da mesma forma, se eu quiser adicionar o rosto Styx ou o estilo, eu vou chamá-lo de Ah significa nome AP algo assim. Pressione Enter. E isso é tudo. Ok, agora você pode ver no fundo há um exemplo de tribunal, que seus designers vão adorar. Amor de verdade. Ok, você pode compartilhar esses desenvolvedores de vídeo e ah, eles estão indo para o pé. Obter o conteúdo que você pode ver Aqui está ah, conteúdo tippy dedos. Eles podem copiá-lo daqui. Além disso, este aqui é Ah, texto aqui. Eles podem copiar novamente. Você pode adicionar todas essas cores. Estas são mais cores que você pode adicionar estes Este é no estilo que eu posso ver como sub cabeçalho 14 sp. Ok, algo assim. Ok, então agora eu estou adicionando todo o meu retorno diferente em cores diferentes. Você pode ver Aqui está a minha cor. Minha entrada está ativa em seguida? Algo parecido com isto. Então temos esta senha esqueceu Senha. É um elo. Então, vou chamá-lo de link a seguir. Algo como isto. Então é assim que você vai construir seu Steiger juicing ferramenta de ira de dardos Zeppelin. Ok, então mais uma coisa isso é nossos ativos agora você pode ver que você pode baixá-lo em cinco agricultores diferentes do BND. Então seus desenvolvedores, eles estão indo para o dedo do pé, Basta clicar neste e ele vai baixar todos os ativos para esta pasta. Então este é o quatro seco criado Zeppelin para que você possa exportar para esta pasta assim e você pode ver se eu clicar neste botão. Ele está me mostrando o tamanho deste, mas eu estou apenas pressionando minha tecla aqui 90 dp por 42 db Então isso é realmente bom. Seus desenvolvedores, eles precisam dos tamanhos em DP Ok, não das fotos. Da mesma forma, se você for para outras telas, você pode ter ícones diferentes aqui. Estes são ícones do sistema também os tamanhos fora. Estes você pode ver este é 80 80 p alta e 3 60 db vied. Então, para este, é um três db de altura. Então tudo isso você pode ter os que estão aqui. Ok, também, se você clicar duas vezes aqui, você pode ver aqui nós temos a cor, então eu posso eu vou adicionar esta cor primária. Este também é o assassino para a barra de status. Então, vou acrescentar isto. Ok, então vamos chamar isso de barra de status. Então eu sei que a descoloração pertence ao estado de um lugar. Além disso, esta cor que você pode adicionar no final como F bar, algo assim. Então seus desenvolvedores podem saber que isso pertence a Amber. Então você está indo toe Adicionar todas as cores diferentes e todos os têxteis diferentes. Este é o seu 12 pontos ou 12 SB um próximo algo assim. Este é o seu texto branco. Então você também vai usar esta luz branca. Próximo seu prêmio A médium. É para a nossa barra de ar. Então eu vou usar uma garrafa aqui. Algo assim. Para trás. Volte para o painel. Então você ia continuar fazendo isso para todo o seu aplicativo e selecionar cada estilo têxtil que você usou todas as cores que você usou. E então nós vamos para o guia de estilo e você pode ver aqui nós temos todo o médico feito automaticamente. Aqui temos todas as cores Longo, cinza, preto como talvez link roubar um preto azul escuro barra de ação cinza. Então nós temos todas essas cores e no lado direito, você pode ver se eu compensá-lo para qualquer um deles. Você pode ver que este é o android e desenvolvedor marcou para seus têxteis e suas paletas de cores . Então, todas as paletas de cores e pilha têxtil serão gerados automaticamente e eles podem simplesmente copiar e colar esse frio aqui. Ok, então isso é tudo sobre como você pode usar Zeppelin. Se você quiser adicionar mais extensões ou quiser compartilhar isso com alguém que você pode adicionar, convide outras pessoas como clicar aqui, convidar por e-mail ou usar um nome. Além disso, você pode adicionar a folga em. Este é o link. Você pode copiar o link e ah, mais uma coisa é que se você quiser oh, adicionar mais extensões ou se você está desenvolvendo em qualquer outra linguagem seus desenvolvedores são eles não estão usando Androids disse. Então você pode ir para explorar extensões, e ele vai mostrar-lhe outras extensões que têm bean desenvolvido por Zeppelin ou eles são desenvolvidos código aberto. Você pode ver o seu cabelo rápido exame Objetivo C, Ill rápido e objetivo C é para, um, Mac ou iOS iPhones. CSS less s é para Web. Um CSS também é estilista para Web. O nativo do ovo é outro. Então, se você quiser adicionar você pode nosso ar para Zeppelin Você pode escolher suas ferramentas gp produto e você pode adicionar a Zeppelin. E é assim que você pode usar sua outra extensão aqui. Está bem. Então, quando eu terminar, eu vou clicar no dedo do pé aqui. Você pode ver que estes são um que eu posso escolher qualquer um. Posso desativar qualquer um, se quiser. Se eu quiser reagir tribunal nativo. Eu vou pegar isso s então aqui nós temos off hoops eso aqui nós temos o Oops direto. Então aqui temos todos os tribunais nativos reagem. Não é diferente, então você pode ver cores e conteúdo constantes. Têxteis. Isto é totalmente diferente. Guia de estilo diferente em padrão de corda diferente. Você pode ver no topo lá dizendo que ele é reacendido Se você quiser mudar algo ou algumas configurações fora deste você pode usar o inferno que assumir um grande ser em si mesmo ou o que quer que seja. Então você pode dizer aos seus desenvolvedores que este é o aplicativo com o qual vamos trabalhar e será mais fácil para você colaborar com seus desenvolvedores neste projeto de design de material android . Espero que tenham gostado desta lição. Se eu conseguir esse tempo, vou fazer o vídeo usando o já marcado. Este é outro software ou aplicativo para colaborar com seus desenvolvedores em qualquer projeto aéreo ou qualquer projeto. E, ah, isso é tudo. Se você tem alguma pergunta, você me perguntou, vamos passar para a próxima lição. 39. ♥ patch do Adobe XD: Agora eu vou falar sobre um conceito muito diferente que é chamado nove ferramenta de patch e nove gerador de ferramentas passado. Há muito fora para diferentes ferramentas on-line onde você pode usá-los como um dedo do pé designer. Crie nove obras de arte de patch para seus desenvolvedores. Saber o quê? Na verdade nove significa patch é realmente, Por exemplo, se você viu botões em seus dispositivos Android ou ah, em seus tablets android. Ok, Então, se você viu esses botões, você pode ver que se esse mesmo fardo está em um dispositivo móvel, por exemplo, deixe-me mostrar-lhe esta pia para tudo, mas pode ser expandido usando nove obras de arte patch. Ok, Então, por exemplo, se você está normalmente mudando para o modo tablet ou está usando um dispositivo tablet para acessar o seu ah, este ah, aplicativo o que ele faz esta imagem, esta imagem nove patch, O que ele vai fazer é expandir este botão automaticamente para acomodar na próxima tela. Então, se o botão da tela do tablet é maior, vamos usar apenas um elemento gráfico para produzir vários botões de tamanho que serão gerados automaticamente pelo estúdio Android e gravação. Ok, então o conceito é muito simples. O que vamos fazer é só precisamos deste fundo na parte de trás, que é este retângulo quatro. E eu vou clicar com o botão direito e exportá-lo. Exportar por exportação, selecionado à direita. E eu vou exportá-la para a minha pasta. Ok? Não, vou acessar minha pasta e você pode pegar qualquer um desses eso. Eu vou pegar este x HDP I, e eu vou arrastá-lo e soltá-lo aqui. Ok, então esta é uma ferramenta muito simples. E agora você pode ver aqui nós temos alguns fora dos limites aqui em cima fora dele e ah, deixe-me selecionar este xx STP. Eu fui selecionado, na verdade. Certo, então selecione esse ato. A resolução para a qual você projetou desta imagem. Ok, então o que ele vai fazer é você está indo para você está vendo algumas linhas por aqui. Estas são poucas linhas pretas à esquerda e à direita. E de cima e de baixo. Primeiro, vamos entender o que essas linhas realmente significam. Então, a linha superior e a esquerda Ok, então a linha de parada e a linha esquerda. Isso significa que esta seção toda esta seção desanimada de cima para baixo, incluindo esta sombra. Ele vai ser repetido se o botão vai se expandir na direção horizontal. Ok, então isso vai se repetir, Repetir . Estes porcos vão repetir aqui, aqui ou aqui, e estes cantos serão afastados. Ok, então neste tipo de ato fora, o que eles estão tentando fazer é que eles estão expandindo o fardo, mas os cantos e esta sombra, eles não vão, você sabe, hum, ficar pixelado ou distorcido. Ok, então esta parte e esta parte vai ser isto vai ser vai ser repetido. Então é por isso que ele é chamado Patch nove Batch. Ele está repetindo este patch de novo e de novo. Ok, então ok, agora isso é sobre a repetição repetida fora das seções deste gráfico. Agora, estas duas linhas à direita e estão na parte inferior. Isso significa o conteúdo acariciando. Então, onde o conteúdo ou o texto neste botão vai cair? Se ele vai levar deste para todo este botão nesta área de sombra. Não, não vai aguentar. Pegue esse espaço. Então nós vamos para ir para a cama de conteúdo e nós vamos para o pé exatamente assim. E precisamos do nosso conteúdo ou do texto do botão aqui dentro do espartano. Então agora você pode ver essas linhas foram Não, Estas linhas são menores e eles foram encurtados porque nós corrigimos adicionar conteúdo lutando aqui. Ok, então agora você pode ver estas são diferentes resoluções para MDP I extra ph d p i xx sdp I e triplo X HDP I Ok, então ele está indo toe gerar todos os gráficos para todas as resoluções diferentes. E nós vamos dar apenas um arquivo este fundo com sombra incluída, e seus desenvolvedores vão beijar suas mãos que podemos usar este gráfico simples e ah, uh, em qualquer sistema, Qualquer tablet, qualquer coisa. OK, então ele vai expandir por conta própria. Portanto, esse é o principal conceito por trás disso. Ah, um gerador de blocos nove. Ossos ópticos é eu acho, a costa re visível, talvez algo assim, mas eu não sei muito sobre isso. E você não precisa se preocupar com isso. Apenas certifique-se de que as suas regiões de trecho e apostas de conteúdo estão perfeitamente definidas. Certo, uma vez que você terminar com isso, você vai clicar nesta cidade. Lorde Zip e ele está indo para o pé. Baixe o arquivo. Deixe-me extrair esse arquivo e vamos abri-lo. E estas são a resolução 45 que vai suportar STP MDP I resolução tudo diferente que se você for desenvolvido, nós podemos abri-lo. Você pode ver essas linhas neste gráfico, ok? E seus aposentos, eles podem usar isso e eles podem gerar qualquer tipo ou tamanho fora deste perdão sem distorcer sua sombra ou seus cantos. Certo, então esse é o segredo por trás disso. Então agora você sabe como você pode extrair seus botões ah. Esses gráficos são tipo fora desses nove gráficos de patch daqui? E mais uma coisa é, é convenção de nomes. Você pode ver no final fora do nome deste arquivo há anexado ponto nove ponto PNG . Então, cada arquivo que você está indo nome do dedo do pé, você está indo para o pé. Nome-o e o e você vai anexar porta para nove. Então é basicamente dizendo ao seu sistema que é nove arquivo de patch. Espero que tenham gostado desta lição. Você pode e fazer este tipo de nove patchwork com todos os fardos. Eu acho que você só precisa produzir um para todos esses fardos e talvez um para este botão azul mais escuro e você está feito, você não precisa criar como centenas de arquivos. Basta criar para esses nove ativos gráficos de patch, e então eles vão servir todos os botões diferentes em seu dispositivo. Espero que tenham gostado desta lição. E se você tiver alguma dúvida sobre nove regra Pashto ou o que você pode me perguntar sobre Android, que design material, Espero que você tenha gostado desta lição. Vamos seguir em frente e aprender algo mais. 40. Whats novo design de materiais 2.0: Ok, então aqueles alguns que estão vagando que Por que eu não disse nada sobre material projetado para apontar ou a última versão de design de material. Se você olhar para as diretrizes de design de materiais, eles os renovaram totalmente, e eles mudaram totalmente tudo. Mas a maioria dos 90% das especificações ou especificações de design, eles são os mesmos. Então eu vou mostrar a vocês nessas duas ou três lições que o que é novo no design de materiais e como você pode obter benefícios ou ler ou obter orientação dessas novas diretrizes de design de materiais . Ok, então vamos começar com o que há de novo. Então eles adicionaram algumas coisas novas. São três campos de texto coisas novas. Eles têm um patrono diferente. Agora, o padrão do campo de texto é diferente. Há duas pessoas que eles estão seguindo com base em sua pesquisa baseada em evidências é então nós temos esta extensão B Eu vou mostrar a todos vocês para você. Certo, então temos essa densidade de camada. Então, em vez de usar horas de jogo no desktop e camadas móveis ou de alta densidade, eles mudaram para baixo densidade e alta densidade. camadas móveis ou de alta densidade, Então, se você estiver trabalhando em uma tela maior onde os usuários podem ter um mouse para clicar. Então eles chamam de alta densidade ou ah, uma tela que é muito, muito alta densidade, como 600 BB I ou tela muito densa, onde você pode usar tamanhos DP menores dedo do pé. Você sabe, o usuário pode facilmente tocar que os lados dp porque é muito denso. Certo, então vamos começar. Vou mostrar-lhe algumas coisas. Primeiro, vou mostrar esses campos de texto que bebês F estendidos do que essa coisa de layout de densidade . Certo, então aqui temos o novo Leo. Este é basicamente um antigo patrono que está ficando muito popular com o Este título se move para cima e você pode ver que este é o novo campo de texto, que é melhor, eu acho que a partir do anterior em termos fora da experiência do usuário e seguindo o padrão este é, na verdade, um campo de texto. Por isso vou mostrar-te onde é que eles têm. Isso é basicamente dois tipos de alimentos. Um é este. Este é o nosso campo de cliente com a etiqueta. Este é o campo com o contorno. Onley é derrame no fundo? Ok, então isso é normal e isso são atividades. Então, uma vez que alguém clique nele, ele está indo para o pé. Mova o rótulo para cima e a entrada de entrada será destacada assim. Então eu vou mostrar a vocês a interação real. Ok, então você pode ver que há interação. Então, se você quiser qualquer se você quiser usar algum fora disso estes em seu design você pode usá-los em seu design e eles vão interagir assim. Então eu realmente amo este, este novo patrono e ah, este é você sabe Ah, e se você quiser saber as especificações que você pode e ir abaixo e há mais algumas alterações que você pode ver aqui, você pode equipe de acordo com o seu aplicativo, você pode ver aqui. Na verdade, eu disse que o que é este primário na superfície e resposta para scullers significa Então você pode ver que eles estão usando apenas uma cor vita em diferentes variações. E para mostrar esses campos de texto, você pode ver aqui eles têm esse repleto. Então, na verdade, nesta nova versão fora do design de material. Você pode unir seu aplicativo a cor que quiser. Então isso é realmente, eu acho, muito bom para os designers, e eles não estão limitando-os e você pode ver aqui tem outro exemplo lá eles estão usando tipos de letra personalizados com agrupamento personalizado. E ah, se eu descer abaixo, você pode ver Aqui estão as especificações do campo de texto 56 esconder para 80. Estes são quase o mesmo 16 uma linha DP e, em seguida, temos 12 dp 12 dp em ambos os lados. Esta é a sua luta padrão para eu acho que este tipo de coisas onde há algum texto dentro de algum recipiente. Então, se você quiser oh, veja mais você pode ir em frente e clicar nas especificações e você pode esconder roupa de cama e dimensões e linha de base de texto. Então linha de base do texto é que o texto vai ficar nesta linha e sua linha de base é baseada em quatro linhas de base de texto db. Então certifique-se se você não sabe sobre linha de base, você deve ver o meu curso tipográfico para você são designers. Agora eu estou indo para o pé, para trás. Ok, então esta é a nova, uh, coisa que é juntar e esses dois novos clientes para campos de texto. Agora vamos ver o que eles têm este fabuloso. Eu fui lá um material projetado para apontar ou ok, Então aqui está o Fab, que é cartão de ação flutuante, mas E ele vai dedo tem clientes diferentes. Deixa-me mostrar-te. OK, então aqui está em uma direção que ele pode executar. Se você clicar neste botão de ação justo, mas flutuante, ele vai mostrar mais ações padrão que você pode fazer com esta tela. Você pode ver aqui que este é o novo deles. Você pode ver qualquer missão por trás disso. Está tendo alguma luz, pavor, cor e emissão. E esse ícone está se movendo e se movendo de volta para uma transição. Então, estas são poucas coisas. Além disso, eles estão mostrando as interações em que É contexto urso. Então, se você tentar alternar entre dois itens no topo, eles vão mudar isso. Ah, eu posso aqui. Ok, então você pode ver que eu cheguei o dedo do pé mudou. Então, estes são poucos comportamentos. Eles acrescentaram mais algumas coisas e mostraram que você não vai usar mais de cinco aqui. Então, se você está usando algo assim, este não é um bom padrão para usar. Está bem? Além disso, você pode ver que você pode fazer isso. Você pode fazer isso. E então esta é uma interação muito nova. Eu acho que eles estão adicionando mais algumas coisas como você pode ver o que aqui. Este é totalmente diferente Composto, novo e enviado para todos os. Além disso, você pode ver que você não pode adicionar muitos itens são muito poucos itens. Então, se você quiser um, ele vai ser esportivo como tratar quatro ou cinco, talvez itens máximos. Então esta é a sua nova e fabulosa Grã-Bretanha. Ele também vai mostrá-lo neste fab estendido. Isso é estendido fab e ele vai mostrar neste rótulo e ícone mais. Então ele vai experimentar algo assim. Então vai flutuar por cima de tudo em Cardiff. Você está navegando em e commerce projeto R E commerce app. Vai mostrar algo assim. Você também pode expandi-lo aqui. Se você se lembra das margens de ambos os lados, são 16 DP, então não. Então, tenha isso em mente. Aqui temos que você não pode usar duas linhas. Você precisa do dedo do pé, faça algo assim. Não use muito fora de texto grande neste tipo de botão de ação flutuante da Grã-Bretanha ou fabs. Ok, então isso é sobre o botão de ação flutuante. Eles adicionaram mais algumas instruções e uma emissão. Eu realmente os amo. Ok, agora vamos falar sobre a densidade que eles estavam falando. O que é um tuk denso? Assim, você pode ver que a densidade padrão é que a forma de suportar grandes alvos de toque inicial e margens. Por isso, é mais fácil para o usuário tocar. OK, mas na alta densidade, vamos usar coisas menores se melhorar a experiência dele. Então, isso significa que há alvos menores sobre isso. Estas telas de alta densidade. Ok, então o que? Eu tenho indústria. Então aqui está um exemplo muito simples. Você pode ver que isso está na lista fora de itens e você precisa verificá-los para que seu padrão mínimo seja 48 DP para qualquer alvo de toque ou qualquer coisa com que você precisa interagir. Não, mas na tela de alta densidade, você pode reduzir o tamanho de 30 dedos. Então isso significa que você pode ver que este é o meu cursor do mouse, e eu posso facilmente tocar nele ou clicar nele usando minha boca. Mas para um dedo , deve ser algo assim. Da mesma forma, este é thes. Nosso texto significa 44 56. Este é o padrão deles e você pode ver aqui. Aqui estão os botões de ação. Eles estão na parte inferior, como feito ou talvez ver arquivo ou algo assim Você pode ver ou ouvir o toque. Alvo alvo alvo é basicamente 52. Esta é a área definida para estes dois 36 aqui temos 24. Então é assim que você pode usar e aplicar que poucas coisas que você precisa dedo do pé Ah, largo é se algo está focado tarefa como algum f ou algo assim. A parte fora do aplicativo está pedindo alguma entrada. Você não vai usar alta densidade. Aplicar tem a alta densidade. Você sempre vai usar baixa densidade. Certo, então isso é uma coisa. Então há outro exemplo aqui você pode ver que esta é uma tela de alta densidade e eles estão usando margens muito amplas. Ok, então menor cru e as margens são muito vício para que ele possa ter mais espaço porque temos tamanho de tela maior Não, em um tamanho de tela menor, talvez um tablet ou tablets menores. Você pode ver que eles estão usando margens estreitas menores e a altura de cada verdade é um pouco maior. Então isso é realmente eles estão acomodando para o espaço e, ah, a resolução. Agora estes Isto é sobre especificações de alvo de toque. Estes são os mesmos. 36 é a altura do peso mínimo, mas é um alvo de torneira vai ser 48. Da mesma forma, um ícone é 24, mas um passo agonista 48 dp. Da mesma forma, para esses ícones maiores do sistema, o 48 é o tamanho do toque. Este é o tamanho mínimo. Ok, então novamente, estes são homens. Há muitos exemplos para todos esses itens relacionados à densidade. Altura da linha. Você também pode alterar a altura da linha para densidades de tipografia como você pode ver aqui temos ah, tela maior ou tela de alta densidade onde podemos encurtar nossa linha alta para que você possa ver ou ouvir. Isso está sentado na altura da linha 20 linha de base 20 Seja um sinal e aqui você pode ver que temos 30 dedos, então essas duas linhas são duas separadas uma da outra. Então aqui temos tela de baixa densidade e aqui temos alta densidade pedindo que você pode ver que eles são baseados Sinal é o mesmo para a linha Pickard. Então isso é tudo sobre essas três coisas novas que eles têm, eles estão oferecendo. Espero que tenham gostado desta lição. Vou explicar mais alguns itens nas próximas duas lições, então vamos passar para a próxima lição. 41. Novas opções para criar novas: algumas coisas emocionantes que eu gostaria de discutir aqui sobre material projetado para apontar ou nova versão, que é que eles estão apoiando mais alguns elementos de design como cantos curvos e bordas e cantos arredondados. Então você pode ver aqui temos este exemplo em seu site brilho aplicativo. Se você ainda não assistiu o Google Material Design Conference, eu acho que isso é apenas você precisa saber. Ok, então você pode ver aqui há uma superfície afiada aqui e este recipiente ou aqui tem alguma borda no lado esquerdo porque o santuário deles é o que eu saí do brilho é este diamante? Então eles estão usando essa garota para mostrar um pouco de forma de diamante. Ok, então por diante também lá, você pode ver o que ele adicionar ao carrinho Ícone em. Há uma borda aqui. Ok, então isso é muito diferente. Eles estão apoiando todas essas coisas novas. Se você olhar para este, você pode vê-lo aqui no Este é o mesmo aplicativo e é em um tamanho de tablet. E aqui eles estão mostrando que como você pode mostrar o seu ou transformar todo o seu material projetado em um novo nível inteiro em diferentes linhas de grade e diferentes dispositivos móveis e tablets desktop . E ah, você pode ver aqui eles têm o botão Spartan adicionar ao carrinho. Você pode ver que está realmente bonito. As sombras também são muito leves e eles não estão olhando como sombras duras de design de material 1.0 e também o uso fora deste tipo de texto personalizado de quatro estilos. Isso está fazendo olhar este site realmente legal. Ok, então você pode ver que o texto que eles estão usando é luz Rubik estes Esta é a sua escala tipográfica . 34 24 2014 16 14 14 12 14 96 é a sua maior manchete. Então este é realmente bom designers Brie e nossos desenvolvedores, ambos têm algumas opções para, você sabe, ele usou sua criatividade em mais maneiras além de ter ah, street edge ou aqui. Então há outro exemplo Este, este é o ecrã E se você olhar para ele, isso também é ter alguns cantos arredondados que você pode ver ou ouvir. Oh, aqui. Então isso é muito legal. Eu gosto disso. Temos mais opções para trabalhar. Temos mais áreas são mais que você pode ver por aqui. Esta é a guia deles Tab AB são você pode ver que é totalmente diferente do que nós projetamos aqui . Então, somos muito livres para, você sabe, projetar algo assim. Então ele está olhando muito legal nele não está olhando totalmente design material. Está olhando que eles têm alguns dado alguns que você pode dizer espaço para trabalhar com. Então eles deram mais algumas opções aos designers para explorar sua criatividade. Então eu realmente amo isso. Estas novas opções que você pode ver aqui na parte inferior de nossos carros. Estes estão tendo alguns cantos arredondados. Eles estão muito bonitos. Muito legal. Então tenha isso em mente se você está projetando algo, você está agora aberto para projetar algumas coisas assim. Se você é designers são seus desenvolvedores Desculpe. Se forem desenvolvedores, digam que não podemos projetar isso. Isso não é possível no design de materiais que você possa mostrar-lhes esses exemplos em diretrizes de design de materiais . Ok, então isso é tudo sobre este novo alguma abertura em opções de design para designers e até mesmo desenvolvedores. Espero que tenham gostado desta lição. Vamos passar para a próxima lição. 42. Espaçamento da grade no material 2.0: como eu mencionei antes na minha lição que seu método de espaçamento e seu guia de linha e como você vai usar colchões de linha chave em seu design maduro. Esta é basicamente a base principal para entender o design do material e como você pode usá-lo. Agora você pode ver aqui tudo está alinhado ao ADP. Eu estou passando rapidamente por isso porque eu já discuti isso. Quatro grau D B Para texto, você pode ver as caixas pequenas. Quatro db Este maior 12 caixas é ADP. Então, Eddie, seja acolchoado de margem superior no fundo 12 Deep Eat. Isto é para a navegação partum. Aqui você pode ver sua parte da linha de navegação antes DP cred. E se você olhar para aqui no botão Abbott e Ação Flutuante alinhado a nível ADP . Então, para linguagem baseada em DP para texto que você pode ver ou ouvir aqui temos Kevin e bom dia. Você pode ver que eles estão se alinhando com isso. Estas pequenas linhas ou cabelo linhas vermelhas, eles são basicamente cada linha é quatro dp separados ou quatro mergulhos separados uns dos outros. Então aqui temos novamente quatro db mesmo se você estiver usando quatro d B ou um D. P. Eles são múltiplos uns dos outros então tudo vai alinhar. Se você alinhado com um profundo, ele também vai alinhar com quatro DP Então aqui você pode ver em. Então temos esta lista e 48 dp para um único item e você pode ver na parte superior Eles deixaram três linhas, por isso significa 12 dp fora de preenchimento superior ou margem. Então, tenha isso em mente. Eles estão usando 12 DP muitas vezes fora como sua margem que você pode ver aqui. Então isso é isso que está fazendo sentido. Você vai conectar todos os itens uns com os outros. Então, isto é o mesmo. O título para todos estes vai para o pé tem 72 dp fora da margem da esquerda. Então, isto é tudo a mesma coisa. Você pode ir em frente e você pode olhar para tudo isso. Ok, então agora você pode ver que eles têm isso. Ah, há tamanho do bloco 64 para isso é para outras telas, mas termina e tudo isso. Ok, então você pode verificar este método de espaçamento. Mostrei a base do método de espaçamento. Isto é o mesmo. Mas eu pensei que eu deveria explicar isso novamente porque eles mudaram seu guia de design de material . E olha, talvez você possa se confundir com o que está acontecendo aqui? Agora você pode ver aqui que temos este alvo de toque. Eu já tenho nojo, Então eu espero que você tenha gostado desta lição. Se você tem alguma pergunta para me fazer, vamos para a próxima lição. 43. Tipos e estados de botões: Ok. Agora, nesta lição, eu vou explicar nosso revisado você mais sobre a Grã-Bretanha. Existem alguns tipos diferentes de mas e este é um texto simples, mas e isso é delineado, mas e este é um recipiente, mas e este é outro botão, que é botão de alternância. Então estes são quatro tipos diferentes de armas. Ok, então há mais uma coisa que está relacionada com este botão. Este botão mostra a ênfase mawr. É mais forte. Tem um recipiente mais pesado. Isso tem menos ênfase. Então seus olhos são mais atraídos por este do que por este. Então, mais uma coisa. Todo o texto é maiúsculo. Este é outro. Eu acho que você não usou isso no meu design, mas eu acho que você deveria usá-lo assim, mas não tinha todas as tampas. E é assim. Ok, então essa ênfase é basicamente do conceito de design visual que as coisas que precisam de mais atenção, elas devem ter algum visual mais vívido. Espere, então eles estão usando isso muito corretamente. Ok, então você pode ver que estes são os princípios de design deles. Se você não sabe o que eles são identificáveis encontrável claro. Portanto, certifique-se de que seus botões são claros, eles são facilmente encontráveis O usuário pode facilmente vê-los. Este é um quatro danças e significantes, se você se lembra da minha lição de experiência do usuário projetado para iniciantes identificáveis. E eles podem ser facilmente um separadamente de outros elementos que isso é um fardo. Ok, então essas são algumas coisas que eu queria te mostrar antes de eu mover o dedo do pé, você sabe, mais algumas próximas lições, e então nós temos essa hierarquia em posição novamente. Eles têm mostrado mídia de alta ênfase. Memphis é baixa ênfase. Então, se você estiver usando uma cor muito afiada, isso significa alta ênfase. Ok, então aqui está você pode ver estes são alguns itens aqui, e ah, este botão vai ser mais tendo a maior ênfase porque ele é realçado e também elevado e maior em tamanho. Então é isso que eles estão mostrando aqui contido. Mas e isso também tem alta ênfase. Este tem a maior ênfase do que este e depois este. Ok, então essa coisa de ênfase, eu acho que eu esqueci de falar sobre isso, e eu acho que eles mostraram em seu material projetado para apontar ou guiar, pronto, sério, e agora você pode ver por aqui. É assim que esses botões estão sendo usados lá, mostrando que você deve usá-los assim ou não. Ok, então não use muito texto grande para este tipo de pais como Ezard Table neste café. E também, eu acho que isso não é capitalizado. Então, eles estão lhe dando a cautela de que, embora não seja um outro muito grande, mas você não deve fazê-lo. Espero que tenham gostado destas lições. Estes são alguns estados diferentes que foram focados mama. Isto vai dar o dedo do pé. Faça alguma animação. Isto está desativado. Eu acho que o uso desativado usando opacidade para 50%. Ok, então, uh, isso é tudo. Eu acho que você precisa conhecer esses estados, e você precisa saber qual é a ênfase desses botões e como usá-los. Espero que tenham gostado desta lição. Se tiver alguma pergunta para me fazer, vamos para a próxima lição. 44. Crie itens no material 2.0: Agora vamos falar sobre material projetado para apontar ou listar. Você pode ver aqui é a equipe de material do guindaste. E eles têm essas listas, essas imagens e esses lugares e eles são propriedades disponíveis. Ok, então, mesma forma, eles têm especificações de combustível. Aqui, há três tipos fora de listas de on-line, e então temos duas linhas aqui. Você pode ver linha dupla, e então nós temos três linhas. Ok, então se você quiser ver as especificações de cada um deles, você pode clicar aqui e o carinho em ambos os lados é 16 para estes. Ok, 16 para este item da lista. Vamos esconder as carícias. Agora temos Dimension desligado. 88 por duas linhas. São 72 DP e forçando uma linha. Acho que é 56. Deixe-me ver. Está bem. Sim. Forçando a linha. É 56. Ok, então se você quiser ver qualquer uma das especificações, você pode clicar aqui e deixe-me mostrar-lhe o exemplo de duas linhas. E aqui temos o 64. Este é outro 164 com duas linhas. Eu acho que eles estão usando isso. E o Gmail, eu acho. Lendo seu 2016 em ambos os lados. 28. Acho que é uma questão de cabelo extra. Por exemplo, há dois minutos ou algo assim. Então eles estão usando este bloco. Nós estamos aqui. Então temos 28 das principais linhas de base de 28 DP. Ele vai ficar na linha de 28 DP aqui. Está bem. E para este texto, vai ser 20 no DP Blow este. Então, basicamente, a altura da linha está tentando DP aqui entre estes dois impostos aqui. Ok, então isso é tudo sobre isso. Você pode ver o tamanho da imagem aqui. Este é 40 DPS, que eu usei no meu curso. E se você quiser incluir algum ícone aqui, você pode ver se eu escondê-lo. Há um ícone, pequeno ícone Bluetooth. Ele é usado por 24 por 24 dp e 32 dp é a distância entre o pequeno ícone e as linhas. E se você tiver maior, eu vou embora. A distância é 16. Então, por exemplo, talvez alguma imagem conjugal para a pessoa que lhe enviou um e-mail. Então você pode usá-los para formar um quadrado ou círculo, ou você pode usar a imagem fora 100 por 50 60 peças aqui. Ok, então estas são as novas especificações que eles estão procurando criar. E eu realmente amo como eles implementaram esse conceito de linha de base nele. Aqui temos a margem inferior superior ADP e ADP ou acariciando Você pode ver para os itens da lista. Ok, então eu acho que é isso. Ok, então isso é para o colapso. Um item de lista expandido. Então, se temos algo assim, eles têm 48 DP. O menor 24 é o ícone gasto item, e isso é o mesmo para tudo. 72 dp Onde o texto está indo dedo do pé de uma linha ou aqui no lado esquerdo. Então 72 dp da esquerda é a nossa primeira linha vertical onde o texto está indo aliando os dedos. Ok, então isso é tudo sobre listas. Então eu espero que você tenha, como, este Guia de Design de Material 2.0, para as listas. A maioria das especificações. 90% do mesmo. Eu acho que talvez mais de 90% eu se eu acho que eu acho que é 95%. Ok, se você tem alguma pergunta para me fazer, vamos passar para a próxima lição 45. Guia de baixo e superior: Ok, então eu estava navegando por este design de material dois pontos ou diretrizes, e eu vi algo novo, que é um fundo de barra. Então esta é uma nova tendência. Basicamente, é baseado no design da experiência do usuário, e é tal que qualquer coisa que facilita a ação deve ser mais perto do dedo onde você estava indo, dedo do pé pressionado ou toque na tela. Então, na maioria dos usuários, eles vão usar o termo. E este tipo de navegação que vai facilitar o uso vem mais facilmente. usuário pode tocar nesta barra de pesquisa também este ícone de hambúrguer e também esta ação flutuante, mas em um fab e também este muitos. Mas ok, então este é outro novo patrono. O que datou é que eles realmente implementaram o mesmo na parte inferior. Ok, então mais uma coisa é que você também pode fazer algo assim aqui. É flexível. Ok, então aqui eles têm algumas fora das diretrizes que não apenas usá-lo para uma ação ou aqui tentar viciar Lee armazenar três ações. Então, no fundo todo mundo vai fornecer três ações como a barra de menu e essa barra. Isso mais eu posso. Esses dois fora deles. Ok, então isso é uma coisa nova, que eu acho que veio para este aqui. E você pode ver por aqui. Este é este é estes são mais alguns clientes foram centrados no cabelo Fab Britain. Então eles têm isso e fab no botão de ação flutuante de um lado está à direita e são as outras ações estão na parte inferior como este. Então este é o novo patrono. Se você quiser ver mais sobre o que você pode aprender sobre ele e o que você pode ver, este é outro padrão. Eu realmente amo esse inseto fabuloso. Então, há um monte de coisas novas que estão vindo para designers neste material projetado para apontar e você pode ver vamos ver o que é a interação e como eles se parecem. Então vamos ver dessa maneira, então gosto muito. Ok, então para trás. E, em seguida, novamente mostrando a introdução para que você possa ver agora esta caixa de entrada está usando poucas ações. Quando alguém pressiona o e-mail, este botão justo ou este botão de ação flutuante, ele muda o botão de resposta do dedo do pé e mais algumas ações. Eu realmente amo esse novo. Interação e comportamento. Eu realmente amo isso. Ok, então você pode usar esse tipo de coisas em seu novo APS usando material projetado para apontar. E vamos voltar para os nossos velhos bares que estavam no topo. Então você pode ver que você já sabe que como eles vão estar lá, vai ser consistente. Estes princípios projetados pelo ar que você precisa seguir. São do tipo normal, Deb. E então temos essas barras de ação extra contratuais que eles têm. Tipo, se você abrir uma foto ou algo assim refletiu algo que vai mostrar diferentes ações mais tarde. pé daquele item ali. Está bem. Está bem. Então vamos ver o que temos também aqui. Estes são poucos navegação. título de Icahn sobre o menu de estouro à direita. Este 5º 1 acho que já discutimos isso. Então, novamente, se você quiser ir para as especificações, você vai para não muito. Muito, muito no final. E você vai ver todas essas especificações. Ok, então se você clicar nele, você pode ver essas outras especificações. As imagens ainda estão aprendendo, então vamos voltar. Certo, então aqui temos. Certo, então se clicarmos nele. Você pode ver estes são novamente as especificações 32 deste ícone 24 olhos altura ícone eso 24 DPS é o ícone ícone ícone 24 24 24 Então você pode ver as lacunas entre eles é 24 dp e ah, temos 16 margem dp em ambos os lados para estes ícones 16 dp superior e inferior roupa de cama e 20 dp é a linha de baixo onde eles estão indo para sentar e onde seu texto vai se sentar linha de base Então, se eu esconder isso, você pode ver isso é linha de base de verão e também você pode usar esses textos e qual é o tamanho das pilhas? Você pode ir a partir daqui e ver quais são as especificações. 20 dp Branco. Isto está na cor do texto. Se você se lembrar com precisão, então este é estendido Tobar e eu não tenho certeza por que eles não mostraram as guias. Talvez as guias estejam em sua seção de caminho em outra seção. Espero que tenham gostado desta barra de ar. Uma nova interação e comportamento inferiores. Se você tem alguma pergunta para me fazer, vamos para a próxima lição 46. Guias 2.0: Ok? - Não. Eu vou revisar um pouco sobre dabs usando a nova diretriz de design de material dois pontos. Ok, então aqui temos as guias. E se você clicar no lado esquerdo, você pode ver que há uso, não eu. Colocação de comportamento , abs fixos guias credíveis, seus estados cheios de especificações e implementação para desenvolvedores. Ok, então primeiro você precisa saber qual é o comportamento? Então, se você clicar nele, você pode ver que eles estão se movendo para a esquerda e para a direita. Assim, o movimento também é visto nesses comportamentos. E eu realmente amo isso tudo. Eles têm se movido isso e você pode ver aqui você também pode movê-los com furto assim. Então isso é que eu acho que perdi em Ah, minhas outras lições. É assim que eles vão se comportar. Então eu realmente amo como eles organizaram tudo como comportamento de todos esses elementos de interação e não de mim. Vamos voltar às especificações. E acho que vai levar algum tempo para o Senhor, acho que já discutimos isso quando o projetamos. Então isso é muito básico. 48 40 anos, 72 24 ícone tamanho 20. A maioria de seus tamanhos são os mesmos 12 12 na parte inferior e superior. Então, se você quiser olhar para as especificações, você pode ir até aqui. As especificações são quase as mesmas que as anteriores. Em vez disso, acho que há apenas uma atualização. Eu não tenho certeza sobre isso, mas eu acho que este 52 não era 52 antes dele. Waas talvez 56? Acho que sim. Então. Eles mudaram isso para 52 em vez de 56 a partir da esquerda. Não tenho certeza sobre isso, mas você pode. Acho que não há como voltar a verificar. Talvez você possa ver minha maior lição do que cheque. Eles estão OK. Então isso é tudo sobre isso. Ah, ok, então não há muita mudança. Tudo. Olhos quase parecidos. Estes são os princípios de design escalável, informativo Pierce Pierce significa que eles estão indo toe agir como aparece. Eles têm, como duas ou três abas em vez de apenas uma. Então eles vão trabalhar em combinação com outras guias. Informativo. Eles estão indo para mostrar categorias de informação. Basicamente, ele é usado para diferentes categorias que vão ficar no topo. Escalável significa que podemos ter fixo e rolar capaz tanto. Ambos tiram esses passos. Ok, então se você tem alguma pergunta para me fazer e vamos para a próxima lição. 47. Cartão de materiais 2.0: Agora nisto. Ouça, vamos discutir um pouco mais sobre cartões usando material projetado para apontar ou novas diretrizes. E eles são quase os mesmos. Mas as poucas coisas como não eu, eles introduziram como se eu não tivesse discutido este que há uma imagem Avital. Este número, este é o contentor inteiro. Isto é chamado de recipiente fora deste cartão. Então temos o conteúdo dentro dele do que no conteúdo que temos cada vez. Seu título de texto secundário. Esta é uma mídia, qualquer imagem ou talvez vídeo. Então temos este texto de apoio no fundo aqui do que temos ação. Mas então temos algumas ações de ícones de suporte ou ouvir ícones opcionais para direções. Então é assim que é. Ele vai continuar. Este é outro que você pode ver aqui Temos mídia rica, O topo intitulado Segundo, título textos de apoio e ações. Então esta é uma arte que eu aqui podemos ver. Você também pode usar alguns fora dos divisórias. Ok, então este é novamente o cartão, mas é dividido em duas coisas como este é o bloco de informações. E aqui temos as opções de disponibilidade que você pode selecionar. E então você pode clicar na reserva para reservar este café ou o que quiser. Reserva. Ok, então vamos ver a interação. Oops. Certo, então colapse e expanda. Estes carros também podem entrar em colapso e expandir. Ok, então você pode ver que este é o comportamento deles realmente bom? Animação muito legal, transições simples. Vamos ver mais deles. Sim. Então, aqui temos. Contratação e expansão tão pequeno, guarda, apenas para mostrar algumas das informações. Se você é industrial, você pode abrir todo o contato assim. Então, Então, vamos seguir a iconografia. E onde estão as especificações? Vou voltar às especificações. Então aqui temos algumas das especificações. Esta pequena imagem 80 dp 3 44 é o tamanho máximo e por isso é porque eles estão vivendo algumas fora das margens em ambos os lados. Então, 3 60 dp é o tamanho real e 16 comeram e comeram sua vida em ambos os lados. Ok, estes são botões de ação. 16 db aqui. Então, basicamente, o air dp é uma distância daqui para a área capaz e 16 dp é a linha para alinhar todos esses, hum este texto e todas as diferentes ações dentro. Certo, então 16 DP é a margem de todos os lados. Pare à direita, à esquerda. E eu acho que no fundo também é um 16. Mas a margem real para a área capaz é oito. Lutar contra o DP's 148 é a altura da pequena guarda. Você pode muito essa altura. Isso não acontece. Não há um problema muito grande. Então você vai se certificar de usar esta altura que eu acho que eu não usei. Estou usando um pouco mais. Sou ou talvez menos. Eu não sou. Não me lembro agora. De qualquer forma, aqui temos este 1 94 db para este, o maior, maior tamanho deste cartão. E aqui temos em segundo lugar texto e as distâncias entre eles onde eles estão sentados na linha de base do texto 24 30 para 26, em seguida, 24 é a lacuna entre este dext de suporte on-line separado e texto . Então temos novamente o 36 bloco 36 db fora de linha de base de bloco aqui Então temos 32 debates para esses itens que são aplicáveis. ADP é a distância entre eles ADP no lado esquerdo para este botão de ação porque ele está alinhado aqui com todo esse texto. E, na verdade, é de um 16 dp. Então, ação, esse texto vai ser 16 dp longe daqui. Então estes são todos tipos diferentes fora de carros. Você pode ver que estes são chamados de cartas de contorno e estes são cartas elevadas. Ok, então eu acho que nós usamos algo assim. Nossa guarda de avião em nossos projetos, não usamos sombras, então podemos usar algo assim sobre a manchete e algo desse tipo de presença. Então eu acho que um padrão que nós não estamos usando em nossos carros é que eu estou usando ah, botão regular aqui no cartão. Eu não tenho certeza se é possível ou não em suas especificações atuais. Eu acho que é possível que eu tenha visto isso na seção de fardos. Então aqui temos o botão. Usamos um botão aqui no lado direito em vez do lado esquerdo. Acho que estão a usar à esquerda, e estávamos a usá-lo à direita. Ok, então, de qualquer maneira, estas são as especificações. Certifique-se de que você estava usando 16 pontos são 16 DPS basicamente DP margem em todos os lados. Então vamos usar mais uma coisa. Este é o cartão. A largura máxima do cartão é 3 44 Isto é o que você precisa. Dedo. Cuide-se. OK, então estas são duas diretrizes principais. Espero que tenham gostado desta lição. Se você tiver alguma dúvida sobre este layout de cartão e tudo o que você pode me perguntar ou você pode ir fundo nessas diretrizes de design maduro. Espero que tenham gostado desta lição. Se tem alguma pergunta para me fazer, vamos para a próxima lição. 48. Typescale no look: Agora vamos revisar o novo sistema fora do sistema de tipo de design de material. Não há como chamar um sistema de tipo, escala e tipo, e é quase o mesmo. Mas eu acho que eles atualizaram seu layout. E lá você pode ver as explicações. Eles são mais precisos agora. Você pode ver que este é o caso. Sentença da sentença. Você pode usá-los na frase, mas no botão, você pode ver se você vai para este botão. Por aqui. O Roberto. Médio 14 tamanho 14 sp. Todas as lacunas e 140,75 Allegis está colocando? Então é isso que eles estão usando. Ok, então temos na legenda 12.4 overline. É também uma sentença. Você pode usar uma frase longa na legenda, mas em botões você precisa manter o seu pior ou dois ou três. Ou talvez quatro. O Max. Acho que sim. Esta é a sua nova escala. Você pode conferir. 96 é o maior tamanho. Além disso, se você quiser usar qualquer telefone personalizado, você pode ir com isso. Eles mostraram alguns exemplos aqui. Deixe-me mostrar. Estes são alguns telefone personalizado 60 regular 60. Então eles chocaram três, que é um roteiro formal Patriota para 48 regular. E há mais alguns exemplos. Como você pode ver Roberto Condensado 20. E este é legendado Verrill por volta do Outono. Este é outro do Google Force, e Ah, OK, então é assim que eles são. Eles mostraram muitos exemplos diferentes de como você pode usá-los. Como você pode ver, você grande médio, 14 bonés, todos os bonés olhando realmente gracioso neste, uh, aplicativo seria aqui. E acho que é só isso. Se você tiver algum problema ou você precisa calcular coisas que você pode ver eles também mostraram algumas fora das conversões em seu rastreamento. Ok, então para o tamanho e rastreamento de pixel do esboço dividir por OK, então, na verdade, eles mostraram aqui um arquivo de esboço. Deixe-me mostrar-lhe o material projetado, tipo, escala e esboço. Você pode baixar isso e você pode abrir no adobe axity facilmente. E lá você verá todos os diferentes quatro tamanhos e tudo mais. Então vamos baixar este e realmente abri-lo para fazer mais sentido aberto. E eu vou navegar para a minha área de trabalho e abrir este. Ok, então isso foi aberto 14 desaparecidos. De qualquer forma, não precisamos nos preocupar com o forte. Ok, então aqui temos todos os tamanhos diferentes. Está bem? E informe sobre a luz 96. Assim que os títulos estão ficando maiores, você pode dizer que eles estão usando telefone leve, uma vez que eles estão indo é de tamanho normal. Há usando o título regular relatado 34 regular regular. E quando eles são um pouco, você sabe, nas linhas menores de escala menor, eles estão usando médio ou ajudar a tomar por ok. Além disso, você pode ver que o espaçamento é um pouco diferente. É mais espaçado na carga, por isso é mais fácil de ler em tamanhos menores. É tudo o que penso que estão a usar. Basicamente, escolha-me. Ampliar. Então esta é a sua escala de tipos. Eu realmente amo isso. Onda. É mais fácil para mim abrir no Adobe Eckstine. Oh, então não se preocupe. Se algo está no esboço nosso arquivo de esboço, você pode abri-lo facilmente com adobe X t. Espero que você tenha gostado deste novo tipo de escala, material projetado escala tipo. Se você tem alguma pergunta para me fazer, vamos para a próxima lição.