Masterclass Adobe XD: faça o projeto de um aplicativo móvel e o wireframe de um site

1. Introdução do curso: Adobe X'd é uma solução tudo em um você x você I para projetar sites, dispositivos móveis, dispositivos móveis, APS e muito mais. Isso significa que você pode criar quadros de fio vivos para projetar e trabalhar através de jornadas do usuário , para criar simulações credíveis para apresentar aos clientes ou para expandir seu portfólio para incluir mais experiência do usuário e placa de interface do usuário. Como um designer gráfico criativo digital, nosso desenvolvedor Web aprender esta ferramenta pode expandir sua comercialização e ajuda você a se adaptar à alta demanda, trabalhos mais lucrativos e você x Este vidro é uma parte design gráfico, Web design e design de UX ey, pois incorporam todas as disciplinas necessárias juntas para criar projetos credíveis do mundo real nesta classe, projetarão um layout de site de desktop simples e aprenderão a usar as ferramentas de prototipagem para criar interações entre todos os relatórios de projeto. Para criar um franco wir de trabalho contínuo, que também aprendeu a ferramenta de grade de repetição para fazer a criação de layouts complicados, uma brisa no nível intermediário desta classe criará um aplicativo móvel pensará nossos personas de usuário para criar duas jornadas exclusivas do usuário para criar um layout totalmente projetado e polido. Vamos aprender os recursos de animação automática e outros recursos de transição para criar menu, deslizar para fora efeitos e botões que parecem reais e autênticos. Tudo o que você está vendo aqui você será capaz de fazer até o final desta aula. Então junte-se a mim para lições que aumentarão o seu ganho de design e lhe darão vantagem nos próximos anos e além, enquanto você X e seu Y se tornam a pedra angular do seu conjunto de habilidades de design . 2. Primeiros passos: Bem-vindo ao Adobe X'd. Você vai ficar muito confortável com este programa se você já está familiarizado com Photoshopped ou ilustrador ou mesmo em design. Uma vez que você conhece um produto adobe, é muito fácil de se adaptar a outro adobe. O orgulho no mesmo caso está aqui, e se você já está acostumado a ilustrador vir para este programa, tudo é muito simplificado. Você notará que não há muitas ferramentas em sua barra de ferramentas. Muito poucas opções aqui à direita, e é isso. É um sistema muito simples, e vai ser muito fácil. Toe aprender isso e muito rápido toe credores depois que você já aprendeu talvez um programa mais complexo , como em um ilustrador Adobe Photoshopped. Isto vai parecer uma brisa. Então eu queria. Pode dar um passeio rápido usando algo que eu já criei para uma marca que estávamos trabalhando em uma classe anterior e menos chamada Parson Dynamics, que é um conglomerado industrial. Então eu tenho o que você vê quadro de arte diferente. Então eu tenho a home page principal, que será destaque aqui na coluna da esquerda, e eu fui capaz de adicionar novas placas de arte que seriam todas as sub-categorias ou as outras páginas da Web neste site. Então você tem duas janelas principais no dhobi X você tem a janela de design que estava em agora, e isso vai mostrar Este é onde nós juntos são projetados para montar uma tipografia , foi definido nossas colunas e vamos em frente e configuramos tudo graficamente individualmente. E então você tem o que é chamado de seção de protótipos. Então, basta mudar para o modo protótipo passando por cima e alternando para o protótipo. E é assim que ligamos todas as nossas diferentes placas de arte juntas para que possamos fazer uma armação de arame vivo . Então, vou mostrar-vos um exemplo. Há um botão play aqui em cima, então eu meio que mostro a vocês o que todas essas conexões conectadas fazem. Então esta home page e eu vou mostrar a vocês tipo de, enquanto fazemos uma Web, um pouco de Web design juntos para tipo de aprender que o programa vai mostrar que você tinha um link tudo acima, e é muito fácil. Parece complicado, mas não se intimide. Este é um dos programas mais fáceis que aprendi nos últimos anos. Então, todos esses itens diferentes um link. Então esta opção tem ligado todo o caminho para esta opção. Então, quando o usuário clica em qualquer lugar neste botão, eles vão para esta página. A mesma coisa com a opção dois. opção dois vai ficar até esta página, e a opção três vai descer até essa página e a razão pela qual somos capazes de unir as coisas como poderíamos ganhar a vida, respirando fio de teia frita. Vamos em frente e clicar no botão “play”. Você vai notar que o botão play estava bem aqui no canto superior direito. Vamos pré-visualizar o nosso protótipo. Uau. Como eu disse antes, todo esse ar se uniu. Então, vou em frente e clicar na Opção um. James poderia ir direto para o comprimento que ele está ligado ao quadro de arte que está ligado a eu posso clicar no botão inicial e que também está ligado Pontos de volta para a página inicial. A mesma coisa para a opção dois, e poderia fazer para peneirar transições diferentes. Então você percebe como eu cliquei na opção para ele desliza bem para a esquerda para a direita, e você pode configurar diferentes transições para ter em vez de apenas aparecer que tem bom tipo animado de efeito suave. A mesma coisa com a opção três, e isso pode descer de cima para baixo. Então é isso que vamos criar juntos o que ele criou tudo do zero. E vamos mostrar a vocês como trabalhar com tipografia, como definir seus ativos, que são realmente importantes. Em seguida, ele está definindo seus ativos para que você não precise continuar recriando o mesmo ativo ou montar várias vezes. E eu posso mostrar-lhe como o seu global para vamos começar até mesmo abrir um novo documento e começar . Vamos arquivar. Acabamos de começar um novo documento. Poderíamos fazer isso de qualquer tamanho, mas eu vou fazer uma típica página da Web 9 20 por 10 80, e eu vou mostrar mais tarde como podemos fazer isso se adaptar a uma tela menor muito facilmente. Mas vamos seguir em frente e fazer nosso projeto baseado em um 920 por 1080 sites. Vamos em frente e clicar nesse tamanho específico, e ele vai abrir. Então ele criou este primeiro quadro de arte para nós, e nós vamos estar criando muitas placas de arte para ser capaz de modificar esta borda de arte deslocado para simplesmente clicar no nome e você é capaz de mudá-lo e então você pode diminuir o zoom . Tenho o meu track pad no meu portátil. Eu sou capaz de tipo de zoom in, anunciado para ser capaz de obter o tamanho. E isso será muito útil porque há alguns projetos da Web ou algum conjunto de aplicativos móveis terá 20 a 30 às vezes até 50 placas de arte diferentes, todos em transição e vinculação de maneiras diferentes. Por isso, é muito importante ficar confortável com várias placas de arte e ter um tipo de sistema organizado quando começamos a criar várias placas de arte. Aqui está o nosso primeiro quadro de arte. Estas podem ser as suas páginas iniciais. Nós realmente vamos nos sentir tipo de descobrir como adaptar nossa marca Parson Dynamics para a Web. Então vamos começar pelo topo. Eu gosto de projetar no topo e tipo de trabalho meu caminho para baixo, então ele está começando com o elemento mais importante, que vai ser o nosso bar de valetes. Vamos em frente e pegar uma ferramenta de forma. Vamos esfolar são uma ferramenta de retângulo. Você também tem uma ferramenta de círculo. E se você estiver familiarizado com o ilustrador, isso será uma brisa. Então apenas uma cabeça criar uma barra simples que vai ser o nosso nab nosso e eu temos aqui à direita , é onde todos os tipos de suas propriedades vão em frente e clique duas vezes. Sou o Phil, e posso mudar essa cor. Então eu quero ser capaz de adaptar algumas das minhas cores sextavadas da minha marca que desenvolvemos. Então eu vou voltar para o Illustrator estava trabalhando recentemente em um cartaz e eu vou pegar algumas dessas cores. Então aqui está um par de volta no tempo. Aqui está um pouco, um pouco de bagunça, mas eu só preciso adaptar algumas dessas cores. Aqui está um tipo de amarelo encontrado neste cartaz que nós meio que gostamos para a marca. E eu vou apenas clicar duas vezes em ratos assistindo Illustrator e eu vou pegar esse código hexadecimal. Vamos colocá-lo em X D. Você vai preencher e colocar nosso código hexadecimal. Isso vai ser amarelo, e eu só vou desenhar outra caixa. Então nós podemos colocar nosso pop roxo aqui, pegar nossa cor roxa o livreto deste relógio e ir para preenchê-lo e colocá-lo dentro Então agora temos nossas duas cores. O que é ótimo sobre isso é que podemos salvar essas cores e nosso painel de ativos, que será aqui embaixo no canto inferior esquerdo. Você verá ativos, nós vamos clicar em ativos e haverá um pequeno menu pop-up à direita. Vamos adicionar estas cores aos nossos bens. Então, vamos apenas destacar uma cor que vai clicar com o botão direito e adicionar ativos de cor do dedo do pé. Então acrescentou que são código hexadecimal roxo e agora vamos fazer o mesmo com nossa cor laranja amarela , e vamos adicionar essa cor aos ativos. Então, agora, se eu desenhar qualquer forma, eu posso ir para o meu painel de ativos aqui no canto inferior esquerdo, e eu vou ser capaz de lembrar qualquer uma das cores que eu preciso. Então, ir de cabeça e configurar seus estilos de fonte e tudo o que precisamos em seu painel de ativos realmente ajuda a fazer o processo ir muito mais rápido quando estamos fazendo muitas páginas diferentes, que você possa ver que temos nossos ativos de cores definidos para cima. Mas também há estilos de personagem. Você poderia pegar uma fonte de título particular. Se você gosta desse tamanho particular e tipo de letra, você pode salvar os estilos de caracteres e lembrar que a qualquer momento, que é ótimo se você quiser configurar todos os seus cabeçalhos e fazer o seu H um h dois h três. Se ele alguma vez fez CSS. Você estará muito familiarizado com esses termos e símbolos. Você pode desenhar símbolos e ícones e ser capaz de salvar esses símbolos e carregá-los em todas as suas placas de arte. E o que é ótimo é o seu global. Então, se eu mudar, se eu fizer um pequeno símbolo de uma casa e eu decidir mudar esse símbolo, ele vai mudá-lo em todos os diferentes quadros de arte. E quando você tem 50 quadros de arte diferentes, é muito bom ter, tipo de estilização global. Nós não temos que mudar cada símbolo uma e outra vez, e então nós vamos fazer isso como nós tipo de terminar este site. Então vamos em frente e obter este braço estilizado aqui em vez de uma barra amarela vai fazer uma barra roxa. Então, nos meus bens, painelistas pouco aqui no canto inferior esquerdo vão em frente e clicar em roxo para fazer disso uma barra roxa. E eu quero trazer o meu dedo do pé logo, tê-lo no centro ou na esquerda. Então é aqui que vamos trazer alguns dos seus bens. Assim, o logotipo, um arquivo de logotipo PNG transparente seria um recurso. E então eu sou um ilustrador, e nós fizemos um design local aqui para o nosso logotipo Parsons. E eu já tenho isso em duas placas de arte diferentes no Adobe Illustrator. Eu tenho uma versão em preto e branco, mas eu tenho, hum, trocado. Então eu tenho um tipo de cinza e, em seguida, um e branco. Então eu vou precisar daquele branco para ir em cima de uma barra de cores. Então tudo o que eu fiz foi exportar, e eu vou obter estes como um PNG transparente com o tipo este top logotipo. Poderíamos fazer um PP mais alto. Eu... isso é estrangeiro. Resolução mais alta. Isso não vai estar na web ainda, mas eventualmente temos que pensar sobre o tamanho do arquivo e não fazer um PNG muito alto e tamanho do arquivo para possamos ter certeza de que não temos tempos de carregamento super altos. Mas por agora, no conceito no processo de design, está tudo bem, vamos em frente e trazer esse ativo. Então, eu só vou trazer o meu localizador. Vamos para a área de trabalho e arrastamos esses caras. Então, aqui está o nosso 1º 1 para chegar à frente, torná-lo muito menor, e depois trazer o nosso branco. Parece que tenho que fazer um de cada vez. Vá em frente, faça-o mais pequeno e vá em frente. Certo. Clique e salve-os em meus ativos. Vou clicar com o botão direito e fazer um símbolo. Então isso vai aparecer no painel de ativos dela agora é o logotipo. Vou clicar com o botão direito e fazer um símbolo. Então este ar agora trouxe em seus símbolos e eu poderia fazer este logotipo preto e eu poderia fazer este branco local. Lembro-me do logótipo a qualquer momento, por isso não precisamos deles neste momento. Eu poderia ir em frente e trazer isso para fora e eu tenho o meu logotipo branco. Eu poderia trazer o preto se eu precisasse colocá-lo aqui para que esses bens pudessem ser recolhidos a qualquer momento. Então agora eu vou clicar duas vezes nisso e tipo de obter o tamanho certo. Isto é Nós podemos ampliar e realmente ter uma idéia de tamanhos de pixel. Então você viu como eu mandei isso por aí? Os guias inteligentes tipo de pontapé, insuportável para ver o espaçamento para ver 8 16 Isso é quantos pixels estão na margem esquerda e na margem direita? É 853 então eu posso ir em frente e tipo de centro que em talvez fazer ambos os três. E aqui é onde eu posso precisar redimensionar minha pequena imagem um pouco para ter certeza que ela vai perfeitamente. Há um tipo de nosso bar de cima. Vamos nos concentrar mais em terminar um layout. Nós confinados a encontrar para encontrar dois detalhes mais tarde para que eu pudesse usar minhas teclas de teclado de todos um empurrão-lo apenas um pixel para pixel ou dois. Eu posso pegar meu teclado, teclas de seta e meio que soco lá em cima socando para baixo. Você vai notar os diferentes pixels entre o espaçamento aqui, e você é capaz de fazer alguns pequenos ajustes que supostamente tentar arrastá-lo tipo de encaixe um pouco. Você não é capaz de obter a mesma precisão 3. Imagem de herói: Então eu reduzo o zoom e quero ter uma ideia de quão grossa eu quero que minha barra de navegação superior seja. Então, se você quiser fazer mudanças minuciosas em vez de tentar descobrir onde um determinado pixel está arrastando-o, você vai até aqui para o painel de propriedades e eu sou capaz de fazer este 100 pixels de altura e obter um pouco mais preciso colocação. Ok, então agora nós vamos tipo de fazer nossa imagem de herói é tipo de nosso tipo principal de banner ou aranha que estará em nossa página inicial. Então eu tenho uma nova imagem aqui que eu quero usar e ir para baixo para downloads. E vá em frente, lembre-se dessa imagem e apenas dragão aqui, como qualquer outro recurso. Muito bem, aqui está a minha imagem de herói. Vou em frente, arrastar isso como uma foto completa, e uma coisa que poderíamos fazer arrastou para dentro, e poderíamos redimensioná-lo assim clicando duas vezes sobre ele, sendo capaz de cortar e descobrir o tamanho certo. Mas tenho algo melhor para fazer. Vá em frente e apague isso e vamos desenhar uma caixa. Estamos basicamente desenhando onde queremos que isso seja capaz de ir. Agora que temos uma caixa, vamos conseguir arrastar nossa foto e ela vai preencher a caixa perfeitamente. Você vai lá e trazer nossa imagem de herói de novo. Basta arrastá-lo termina, vai aparecer bem e para que possamos fazer ajustes clicando duas vezes sobre ele e deslizando-o cima, deslizando-o para baixo, que já está ao máximo. Mas seríamos capazes de ir mais longe e ampliar se quiséssemos. Nós terminamos. Clique em off. Vou tentar encontrar o lugar certo para a nossa foto. E mais uma vez, confinamos certos tamanhos também. Então queremos adicionar talvez algum texto em cima da imagem, ter algum texto ao vivo que será mostrado. Então eu vou em frente e pegar a ferramenta de texto. Vamos em frente e fazer uma caixa, e eu vou fazer Ah, vamos ver, qual é o nosso slogan? Pegue nosso slogan do nosso cartaz. Certo, redesenho da indústria. Então isso é tudo o slogan é Pop de volta para a indústria X'd redesenhado Go e fazer essa caixa delimitadora um pouco maior e meio deslocado. Pegue nossa ferramenta de seta tipo de enviado para cima. Vamos clicar duas vezes e fazer deste um Phil branco, e você também tem uma opção de sombra aqui. Então, se você sentir que não está realmente saindo, indo para clicar na opção de sombra para adicionar uma sombra clara, é claro que podemos mudar a distância dessa sombra. E também o borrão aqui é para o Borrão, e também podemos torná-lo mais forte. Nós apenas clicar duas vezes no tipo de sombra tipo de caixa de transparência lá, e nós podemos torná-lo mais forte para que ele conservar 16%. Poderíamos fazer 33%. Você também pode alterar a cor da sombra como qualquer outro programa adobe. Digamos que queríamos isto desmoronado e alinhado ao centro. Poderíamos fazer isso apenas arrastando esta caixa a caixa delimitadora, tornando-a um pouco maior e, em seguida, indo para centralizar o alinhamento em nosso painel de propriedades aqui no nosso painel de propriedades de texto. E nós também poderíamos fechar a lacuna de deixar entre o espaço entre as diferentes linhas do tipo, então isso vai ser feito aqui mesmo nesta área. Então, digamos que é 141 pode estar fechado. A lacuna. Então ele só se sente um pouco mais forte e como unidade juntos, assim como com design de layout. Eu estou fazendo os mesmos fundamentos de design de layout de impressão que eu estou com Web design tipo de pensar sobre como ambos são muito semelhantes. Assim como com qualquer outro objeto, posso destacar minha foto e adicionar um pouco de sombra para que você possa ver um pouco de Ah, bela sombra que foi adicionada lá, eu vou tirar uma pequena borda. Parece que há uma pequena borda ao redor da foto, que eu apenas tirei e removi. Então agora vamos fazer três pequenas caixas que se deparam e ser e são capazes de ser ligados a outras sub-páginas. Nós também vamos acabar tendo itens de menu aparecendo lá em cima. Mas nós vamos fazer um tipo de web design muito simples apenas para começar. Vou mostrar-te um truque muito fixe. Então vamos em frente e desenvolver uma caixa exatamente como queremos, e vamos ser capazes de usar a ferramenta de grade de repetição para replicar isso repetidamente o quanto gostaríamos. Então, vamos apenas criar uma caixa. Mas vamos ser capazes de criar todas as caixas depois disso muito, muito facilmente. Então vamos em frente e pegar nossas ferramentas quadradas, fazer uma forma simples, e eu posso adicionar cantos arredondados a isso. Então lute contra o tipo de zoom in. Eu pego uma espécie de área do círculo aqui no canto e arrastá-lo para baixo para criar qualquer tipo. Onde você fez uma forma perfeita de pílula? Ou pode apenas para uma curva muito, muito ligeira, que eu acho que isso costumava ser em quando ele tinha esta maçã Caracas realmente afiada fez aquele tipo muito popular de que agradável, suave, suave, borda chanfrada arredondada. Mas com o passar do tempo, nós meio que adaptamos um pouco mais de uma curva mais nítida, onde eles quase mal são vistos . Isso é mais o que tem tendência nos dias de hoje. Então eu poderia fazer isso um preenchimento ou eu poderia fazer um pouco de sombra, ter uma sombra. Eu não quero uma borda, então eu tenho que unclip borda tipo de ver como ainda tem um pouco de uma sombra de gota e tem apenas um pouco de um chanfro no canto arredondado. Então agora vamos fazer talvez uma imagem no topo e talvez algum texto para que eles saibam o que a próxima página da Web irá vincular. Então vamos em frente e criar uma caixa que será onde nossa foto será arrastada para dentro e eu quero mostrá-lo truque rápido. Então agora, eu tenho todos os cantos tipo de curva ao mesmo tempo, e eu vou fazer isso de uma cor diferente para que você possa ver isso em ação. Então vamos torná-lo vermelho para que você possa ver como todos eles fazem isso ao mesmo tempo. Mas e se eu só quiser um como um canto arredondado? Eu vou manter pressionada a tecla de opção ou a chave antiga quando eu clicar sobre o que eu quero ser mais arredondado e eu vou clicar sobre isso, e eu poderia fazê-lo é formas independentes. Então, se eu quiser fazer este milho em torno dele e este canto, eu estou apenas segurando a opção Orochi o tempo todo que poderia apenas editar individualmente estes. Então agora eu meio que tenho mais de um tipo interessante de forma, mas eu vou manter tudo isso redondo e apenas por causa disso, então eu vou clicar neste tipo de comando Z comando tipo de voltar na minha história volta para onde estava Branco. Vamos em frente e adicionar nossa imagem. Eu vou adicionar um pequeno espaço reservado para por imagem e então eu vou fazer isso uma cor diferente para que eu possa tipo de ver o que está acontecendo, e eu quero fazer este canto coincidir com a caixa atrás dele. Então eu só vou segurar o parafuso ou a tecla opção porque eu só quero manipular este canto superior direito e eu vou combinar com o canto. Não precisamos de uma fronteira. Então, apenas uma conexão que mantenha pressionada a tecla toda tipo de correspondência com esse plano de fundo. Será aqui que nossa foto vai residir e será capaz de puxar isso para baixo e vamos em frente e arrastar um dragão fotográfico? Essas pessoas falando do cenário da indústria e lá vai você. Eu quero mudar o corte obscuro DoubleClick e eu vou ser capaz de mudar o corte dessa maneira. 4. Repetição: Vamos adicionar outra caixa de texto. Pegue a ferramenta de texto, vá em frente e digite. Vamos fazer a opção um por enquanto. Podemos descobrir detalhes mais tarde sobre o que queremos dizer. Então vamos apenas fazer um Phil e lembre-se, nós já temos nossa cor salva. Então, se vamos para o nosso estilo globo, que é aqui em baixo no canto inferior esquerdo, vamos ser capazes de lembrar em Option laranja ou pode fazer um opções roxo. Vamos fazer a nossa cor laranja amarela e trazer isso para baixo para a opção um. Deve fazer isso um pouco menor. Vamos até o nosso painel de texto e fazer 55. Isso é bem grande. Então vamos fazer com que isso continue se ajustando até que possamos encontrar o tamanho certo. E uma vez que nos sairmos bem, podemos salvar. Este é um estilo global. Bem, então vamos para baixo para os nossos estilos. Podemos clicar com o botão direito do mouse e adicionar ativos de estilo de personagem toe. Só vou adicionar este estilo de personagem. Então, se eu quiser trazer isso de novo, eu posso facilmente trazê-lo para fora com o mesmo tamanho e mesma cor. Vamos fazer isso um pouco mais longo e vamos adicionar outro pequeno corpo, cópia ou cópia de parágrafo, hum, para nossos itens. Então vamos em frente e trazer a ferramenta de texto, mas vamos clicar e arrastar e criar uma caixa de texto de parágrafo. Vou pegar um texto genérico que tenho aqui e copiá-lo e colar. Certifique-se de que minhas ferramentas de texto voltem a sair novamente. Cole. Vamos ter de mudar isto significativamente para ser a nossa cópia corporal. Vou destacar tudo o que vou para a minha estrela global do meu painel de activos e clicar no meu cinzento e vamos fazer esta ferrovia. Era o que usávamos no cartaz para as cópias do corpo. Vamos usar isso para uma cópia de parágrafo. Vamos torná-lo significativamente menor, talvez 14 ar 15 neste caso. E vamos fazer uma espera normal. São um meio neste caso Castaignos tipo de se juntar lentamente. Então agora vamos mudar o alinhamento. Poderíamos fazer um alinhamento central, ou podemos subir e fazer um alinhamento à esquerda e precisamos mudar essa abertura ou espaçamento entre o espaçamento. Então eu vou aqui mesmo nesta área e ir em frente e experimentar 18 Ver como isso funciona . Você pode ampliá-lo um pouco mais para ter um bom espaçamento, mas não muito. Então isso funciona como qualquer outra caixa de texto. E o designer ou ilustrador poderia ir em frente e colocar isso aqui embaixo. Não quero aguentar tanto tempo. Então eu vou ter que ser apenas duas frases simples. Apenas o suficiente para explicar um pouco mais o que o usuário precisa fazer ou o que estará aqui quando o usuário clicar neste botão. Acho que vou fazer um alinhamento central aqui porque não tenho muita mensagem. Então vamos fazer alinhamentos do centro de alinhamento. - Legal. Quando você tem caixas de texto menores, quanto maior for a sua caixa de texto, mais alinhamento à esquerda tende a funcionar um pouco melhor. Então eu vou mudar isso para eu não ter um órfão. Chama-se “Órfão”. Está tudo sozinho. Só uma palavra. Parece estranho. Não queremos isso. Queremos divulgar a lacuna para que não tenhamos um órfão, e também podemos alterar seus pixels está acontecendo automaticamente quando eu arrasto. Faça com que seus guias inteligentes estejam chutando em seu aviso. Esse tipo de linha azul de cor descendente significa que isto vai estar alinhado com aquela caixa branca. A mesma coisa que eu poderia ir em frente e arrastar isso até que eu pudesse obter algum alinhamento central. Estou pronto para ir. Então deixe-me ir em frente e mudar tudo sobre esta caixa porque assim que começarmos a repeti-la ,estaremos criando muitas versões diferentes desta caixa. , Então vamos deixar esta caixa perfeita. Antes de começarmos a repetir, revelou a lacuna. Você percebe como ela está adaptando automaticamente a foto para quando a tornamos de um tamanho diferente . Então eu vou diminuir o zoom para que eu pudesse ter uma boa idéia do layout para que pudéssemos até fazer quatro na parte inferior. As lições fazem três por enquanto. E acho que vou ser capaz de expandir isso um pouco mais branco. Temos que pensar em opções móveis. Então, quando isso não colapsa na opção móvel, temos design responsivo. Isto vai ser mostrado primeiro, e vai ser empilhado para que você possa ter o 2º 1 aqui no 3º 1 aqui. É por isso. Não tenho imagem para estes. Parece um pouco redundante em um desktop, mas quando você tem visualização móvel, essa imagem, juntamente com o link faz tipo de ajuda em vez de apenas ter um símbolo. Mas sim, poderíamos fazer ícones personalizados em vez de uma foto. Não precisamos de fotos, mas só para este caso, temos. Então aqui está o truque legal. Chama-se Repetir Grade. Então eu vou em frente e agrupar isso como uma unidade. Então eu apenas cliquei com o botão direito e eu agrupei, e eu tenho que ir em frente e clicar nesta grade de repetição aqui na coluna superior direita. Então agora ele vai ter esse tipo de barras que eu poderia expandir. Então eu vou expandi-lo para a direita e você vai notar que ele continua a repetir a mesma caixa repetidamente. E podes continuar a fazer 45 se quiseres, mas vamos fazer três. E o que é ótimo sobre isso é que eu posso ir para esta coluna e eu vou ser capaz de mudar o espaço de pixel entre a coluna para obtê-lo apenas direito para que pudéssemos ter 90 pixels entre as colunas e a mesma coisa acontece aqui em baixo, eu pode realmente fazer uma rosa. Eu poderia fazer muitas, muitas fileiras. Então isso é tão fácil de ser capaz de criar conceitos de aplicativos móveis quando você tem talvez, sim, você está fazendo um aplicativo móvel e você tem um monte de dados, talvez dados de usuário que você está listando e você faz isso em uma caixa agradável e estilizada. Podemos criar centenas dessas coisas muito facilmente usando esta ferramenta. Então nós só queremos ter uma linha, então basta clicar em um tipo de tamanho pior, uma estrada e estamos prontos para ir. Por isso, neste momento, estes movimentos são uma unidade. Então vamos dizer que eu quero começar a atualizar tipo de alguns objetos aqui. Como é que eu meio que desvinculado thes? Vamos clicar com o botão direito e trabalhar indo para um novo grupo de grade. Então agora vai ser tratado como elementos individuais novamente. Não estão mais ligados como estavam quando tínhamos a opção de repetição da grade ativada. Então, em nosso ele vai ser capaz de restabular clique e modificar nossas opções. Então opção dois, uma opção três E uma coisa que eu quero fazer é salvar meu estilo de personagem aqui para minha opção Um título Mas eu quero ser capaz de dizer minha cópia de parágrafo. Então, vou destacar isso. Veja se eu posso ir em frente e selecionar a caixa clique com o botão direito e você para ir para adicionar estilos de caracteres aos ativos. E agora tenho a cópia do meu parágrafo. E depois vou fazer disto o meu cabeceira. Este poderia provavelmente ser H dois cabeçalho para provavelmente terá um tamanho maior, que será este aqui em cima. É apenas o botão direito Clique fora dele rápido novamente e clique com o botão direito e vá ver adicionar estilos de caracteres aos ativos. Este pode ser o nosso H. Este será o nosso maior tamanho de cabeçalho e, em seguida, o amarelo H dois tipo de ser o nosso próximo tamanho para baixo e, em seguida, teremos um h três n h quatro Nós já fizemos codificação CSS. Você vai saber tudo sobre isso. Então eu gostaria de mudar as fotos de todos esses para que pudéssemos ir em frente e trazer nosso localizador. Você vai e encontra a foto certa para estes apenas dragão dentro Se eu quiser mudar seu corte, eu clique duas vezes e eu posso tipo de zoom em um pouco mais. Minhas fotos 5. Criação do Footer: por isso estamos fazendo aplicativo móvel ou aplicativo Web. Mock ups são simulações de produtos digitais para clientes. Queremos fazê-lo de uma forma amigável com o orçamento. Estamos apenas tentando entender como queremos que o site se pareça e como ele flui e como ele se encontra com a demografia alvo e nossos usuários que desenvolvemos. Nós realmente queremos ter certeza de que o site parece bom, mas queremos fazê-lo em tempo hábil. Não queremos gastar muito dinheiro na cara do conceito porque ainda temos que desenvolver isso. E às vezes isso significa contratar um desenvolvedor para codificar isso e fazer com que isso se torne realidade, a menos que sejamos muito bons nisso também. Mas nem sempre é esperado para nós projetar e conceber, mas também codificar. É um começo louco. Precisamos começar a nos especializar, mas de qualquer maneira, então precisamos fazer as coisas em tempo hábil. Então eu vou tentar mostrar a vocês alguns truques do comércio para meio que acelerar esse conceito em processo. Então, quando voltamos aqui, eu tenho que ir em frente para um círculo simples, manter a tecla Shift pressionada para fazer um círculo perfeito. Vamos clicar na grade de repetição. Eu só vou fazer três. Mas isso é exatamente o que acabamos de fazer aqui. Mas vou mostrar-te um pequeno truque. Então, em vez de arrastar cada foto como eu fiz, você pode acelerar o processo um pouco se você já sabe as fotos que deseja carregar e em uma determinada ordem. Então eu estou tirando três, fotos que foram destacadas no meu localizador, e eu estou atrasando-os para o primeiro círculo, e ele irá automaticamente preencher com todos eles. Então isso funciona muito bem, se você quiser tipo de fazer algumas fotos genéricas de perfil, então você talvez tenha alguns headshots ou fotos de pessoas e você tem talvez 20 pequenos círculos que ela criou a grade de repetição. Você poderia dragão 20 tipo de genérico todos os diferentes headshots arrastá-lo para lá, e eles vão preencher toda essa linha de 20 que vai realmente vir a calhar quando você está fazendo desenvolvimento de aplicativos móveis. Você teria um monte de usuários? Então, só um pequeno truque do negócio. Agora é hora de fazer um rodapé simples. Então agora estamos meio presos com esse tamanho 920, mas sabemos que há algo chamado abaixo da dobra. Então, quando você carregar uma página da web, isso é o que eles verão. Mas também há maneiras que eles podem rolar para baixo. E Seymour Então, como projetamos mais baixo do que isso quando já estamos no corte? Vamos em frente e clicar no nosso nome principal para o quadro de arte. Nós vamos descer aqui para rolar, e nós vamos ter certeza que ele está definido na vertical. E assim isso nos permitirá puxar isso para que pudéssemos fazer as coisas abaixo da dobra. Então é isso que as pessoas terão que rolar com suas bocas para ver. Coisas menos importantes, na verdade. Mas vamos fazer o rodapé. Então este vai ser o ponto em que quando eles carregaram em seu navegador, esta é a linha que termina. Vamos fazer um rodapé simples. Vamos em frente e podemos pegar aquele bar. Posso me manter velho para opção. Vá em frente e copie isso. Agora podemos torná-lo uma cor sólida. Poderíamos até fazer essa cor amarela, pedir nosso painel de estilos e torná-lo amarelo? Depende. Eu quero um. Eu acho que provavelmente parecia um pouco melhor como poderíamos fazer um cinza claro, mas eu acho que um roxo ficaria bom. Então, agora que temos um tipo de nosso painel de ativos aberto, clicamos aqui para obter nosso painel de ativos. Temos o nosso logotipo e preto e branco. Vamos em frente, preencha com o nosso logotipo branco. Tenha-o aqui em baixo quando vamos ser capazes de adicionar ou contactar informações. Então, agora que temos nossos estilos de personagem ir muito mais rápido, vamos em frente e trazer uma cópia de parágrafo. Então vamos em frente e destacar nossa caixa de texto. Vamos em frente e montar nossos pés ou colunas. Parece um tipo de texto genérico. Então texto aqui, texto aqui, texto aqui apenas tipo de ser alguns links. Eu vou, eu tenho meus estilos de parágrafo. Vamos em frente e clicar no estilo de parágrafo, mas isso vai ser sobre fundos escuros. Nós vamos ter que definir um tipo diferente de estilo de parágrafo aqui, então eu vou preencher, ir em frente e configurar isso. Como eu gosto poderia fazer colunas diferentes aqui. Vamos pegar nossas setas com arrastar alguns desses elementos, e provavelmente podemos fazer isso um pouco maior. Então vamos fazer com que 18 pontos e tamanho. Vamos mudar a lacuna aqui, então temos um pouco de uma lacuna maior. É 2 30 Está empurrando um pouco mais para 40 então este pode ser o seu tipo de texto de link. Então vamos fazer isso e arrastar aquela caixa para baixo. Vamos fazer disso um link, então vamos subir e torná-lo um médium. Vamos torná-lo líder metálico e vamos fazer uma sensação amarela vai abranger nossas cores e fazer amarelo. E uma vez que vamos fazer o link aqui, ele vai clicar duas vezes neste link. Um link para Blink três Quase fazer um link para Ok, então agora podemos clicar com o botão direito e podemos adicionar que estilos de personagem toe ativos e agora temos outro estilo de caractere stop. Vamos clicar duas vezes nisso em ah, links fundo escuro. Estes serão os seus links para um fundo escuro e que poderíamos fazer algo legal, que é grade de repetição, e podemos continuar a replicar aqueles para fazer várias colunas. Isso é um monte de links, mas estamos apenas fazendo um exemplo. Talvez nos deixe fazer. Isso faz para Ah, vamos fazer três filas bem ali. Ok, nós poderíamos fazer algum texto de cabeçalho aqui, também, então vamos em frente e em grupo esse objeto, vamos pegar essa opção. Túmulos poderiam manter pressionada a tecla de opção e foram capazes de obter esse pequeno cabeçalho aqui embaixo. E vamos fazer isso um pouco menor. Então, vamos fazer com que 25. Podemos fazer isso branco também, ou eu gosto. Eu meio que gosto de amarelo tão bom. Eu meio que faço a repetição ótima de novo, economizamos algum tempo. Vamos fazer três e então nós vamos ser capazes de ampliar e nós poderíamos obter as colunas e fazer mais largas até que eles são legais. E mesmo assim, veja o quão rápido somos capazes de fazer isso. Um ilustrador levaria muito mais tempo. Quem me dera que isso acontecesse. Algum dia. Eles vão trazer esta grade de repetição para o ilustrador e Photoshopped. Isso seria incrível. Certo, então assim, fizemos um rodapé rápido. Então vamos dizer que eu quero fazer algum tipo de foto de sobreposição gráfica legal sobre o rodapé . Vamos fazer isso a seguir. Então agora eu estou mudando anos eu estou de volta ao Photoshopped. X'd é fantástico, mas eles não têm um monte de recursos de edição de fotos. É por isso que é bom ter outro programa de edição de fotos para poder editar fotos para fazer transparências e modos de mesclagem e fazer alguns efeitos de fotos legais. Então vamos fazer isso aqui com esta foto. Eu vou ir em frente e pegar ferramenta retangular e criar uma nova camada. E eu só vou pegar a ferramenta de relógio aqui e pegar um duplo clique nele e eu tenho uma cópia e colar. Meu pequeno código hexadecimal que eu tenho para o roxo foi basicamente pegar minha amostra roxa e eu vou pegar a ferramenta balde de tinta, vá em frente e preencha isso e eu vou arrastar para baixo. Basicamente, vou fazer um modo de mistura. Estou selecionando minha foto de cor superior e estou fazendo um modo de mesclagem até luminosidade ou qualquer um que eu acho que seria o melhor. Tenho certeza que vai ser luminosidade, e eu vou fazer um tipo de efeito emplumante. Então eu estou apenas adicionando uma máscara de camada para obter a minha ferramenta Int Grady e fazendo um granulado preto e branco em. Então, quando você usar preto e branco sobre uma máscara, você será capaz de misturá-lo, ok? E eu só vou para reduzir a transparência sobre isso para que ele não compita com nenhum dos meus pés ou informações, e nós sempre poderíamos cortar anexo D. Então eu não estou preocupado com isso. Eu ia afiar. Só vou aguçar um pouco, ter uma boa afiada Kristen Crisp e uma conversa de imagem. Então agora eu estou pronto apenas para dizer que este é um J. Paige e eu vou trazer isso para Adobe X'd e ser capaz de misturar isso em Como eu gosto nós vamos pop em X'd e o que eu vou fazer é ir em frente e copiar e colar meu rodapé recipiente então eu vou segurar. Opção poderia arrastar uma cópia sobre a chamada cabeça e cortar Minha foto Como eu gostaria. Vou trazer a minha foto mais recente, este dragão e tenho um duplo clique porque não gosto de onde a cortou e vou trazê-la para a frente ou para cima. Vou arrastá-lo por cima e enviar isto para trás para o sistema de camadas. Então eu só vou fazer isso segurando o comando e o colchete esquerdo. Meu atalho. Funciona em todos os programas da Adobe, e eles são fracos. Temos o nosso pequeno rodapé com a nossa imagem de fundo pessoal legal, e eu poderia querer reduzir a transparência sobre isso. Então, eu vou continuar e fazer essa sombra de trabalho, mas vamos reduzir a transparência. Estou aqui na triagem do número de aparência que volta para não competir com informações detalhadas do link. Certo, então precisamos fazer mais uma coisa, e será capaz de começar a ligar nosso objeto. Então, uma coisa que podemos fazer é perceber isso. Vou agrupar o fundo, forma sólida e a foto que acabamos de arrastar em cima dela. Eu tenho um grupo aqueles juntos. Então, eles ficam juntos como uma unidade que eu pensei em você sabe, se eu estendesse isso aqui tipo de criação de um tipo interessante de design. Talvez se sobreponha. Então você pode ver as sombras aqui que podem funcionar. Para que pudéssemos fazer isso ou ter como ele o tinha. Eu meio que gosto desse jeito. Vamos fazer isso. Então vamos apenas tipo de um redimensionar automaticamente a foto dentro daquele recipiente redimensionar automaticamente é como você mudou mais alto, o que é realmente legal. 6. Crie nossa subpágina: Ok, então eu apenas fiz alguns pequenos ajustes e tinha esta seção inferior pode passar por cima das três caixas em vez de ter o rodapé tipo de interagir dessa maneira. Então agora eu estou pronto para fazer um pequeno ícone, um pequeno ícone de casa. Tem que ser para a parte superior, direita, direita, que não importa em que página eu estou, eu tenho este pequeno ícone de casa agradável onde eu posso coletar de volta para a página inicial. Então, se você estiver familiarizado com o Adobe Illustrator, você já estará familiarizado com a ferramenta pin E assim isso funciona exatamente da mesma maneira no Adobe X'd. Então eu vou em frente e pegar Vou fazer um pequeno ícone de casa. Então vamos em frente e fazer uma espécie de caixa simples. Vai decolar fora da fronteira. Vou fazer isso cantos arredondados, mas não muito arredondados. Então apenas cantos muito sutis e eu quero manter pressionada a tecla de opção e eu quero fazer esses cantos afiados porque vai ser para onde o telhado vai ir. Eu realmente só preciso desses cantos inferiores macios. Então eu vou pegar a ferramenta de alfinete e desenhar um telhado simples para nossa casa. Eu venho você poderia apenas ajustá-lo. E ao contrário do ilustrador, você pode clicar duas vezes sobre isso. Ele se transformará na ferramenta de curvatura apenas destacando. Eles só têm a opção de ferramenta de um pino. Então você clica duas vezes. Ele vai girar em torno dele, e você tem suas alças onde você pode ajustá-lo. Nikkan Clique duas vezes e ele volta a uma forma pontiaguda. Eu posso fazer qualquer um desses arredondados fazendo uma coisa dessas, então vamos tirar a fronteira e mudar para um Phil. Temos um pequeno ícone de casa. Podemos ajustar isto. Você também pode desenvolver isso no Adobe Illustrator, outro programa vetorial, e ser capaz de trazê-lo como um ativo. Mas você também pode criar aqui. Mas se você tem o Adobe Illustrator disponível, eu gosto de fazer tudo o meu Eu tenho um pouco melhor controle de caneta, controle ferramenta de pino e mau ilustrador de adobe, então eu vou fazer um monte de meus ícones lá e trazer isso como uma célula de caracteres. Mas a grande coisa sobre a X TV mantém-na ao vivo. Você será capaz de animar partes específicas de um símbolo de algo que você está interessado em fazer. Então eu tinha esse tipo de vida simples. Quero fazer uma porta, Glenn, criar a nossa porta. Queremos fazer disto uma forma sólida. Vamos trocar isso para preencher. Vamos fazer uma cor diferente. Íamos tirar isso, como no Adobe Illustrator. Queremos um soco para fora. Então eu vou destacar Vá em frente, agrupe esses dois elementos brancos juntos. Vou tirar isto disto, deste fundo. Então, há a ferramenta Pathfinder aqui em cima, assim como um ilustrador de adobe. Vamos clicar nisto até encontrarmos a pessoa certa. Portanto, excluir sobreposição, que é o ícone mais à direita é clicado. Isso é exatamente como a ferramenta Pathfinder. Eu esmurrei isso. Então agora eu tenho meu ícone. Então eu vou ir em frente e fazer este o tamanho certo para que ele é tipo de zoom para fora, iria manter o deslocamento pressionado e torná-lo o tamanho certo para nós. Parece que está mantendo essas curvas e impostos, modo a torná-lo menor, está adaptando essas curvas, que não é necessariamente o desejo que eu quero. Então, pode ser melhor fazer o tamanho do ícone o tamanho que ele vai ser em zoom em vez de fazê-lo maior e torná-lo menor. Mas isso não importa, porque eu posso desprepará-lo e ser capaz de fazer o mesmo efeito. Então vamos em frente e lá está a minha pequena casa. Eu Collins me certificar como o tamanho dele. Isso é bom. Vamos clicar nisto. Tenho que pegar a posição certa. Eu gostaria de alinhá-lo. Vê aquela linha rosa? Como está alinhando a esquerda do canto dos telhados está alinhado com isso. Isso é legal. É bom estar numa grelha como essa. Você poderia apenas encontrar o posicionamento certo. Então eu vou fazer este símbolo, então eu vou ampliar, selecioná-lo. Vou clicar com o botão direito e fazer um símbolo para descobrirmos por que é tão útil ter isso como símbolo aqui em breve. Então, agora que temos nossa página inicial projetada, ainda precisamos fazer um menu de navegação. Mas vamos manter um simples três opções aqui em baixo apenas para fazer nosso primeiro projeto juntos e torná-lo um web design mais simples. Então vamos precisar criar vários quadros de arte agora. Então nós estivemos nesta janela de design esse tempo todo e nós vamos estar em breve cruzando para protótipo, que requer várias placas de arte diferentes para ser capaz de ligar e realmente fazer isso um monte de arame vivo real. Então vamos criar um novo quadro de arte. Então isso é criar e as novas opções de quadro artístico aqui à minha esquerda, ele vai simplesmente clicar nele e vai adicionar uma nova opção onde eu clicar. Então ele vai ir em frente e adicionar essa opção, que não tem o rodapé. Então eu quero fazer ir em frente e arrastá-lo para baixo. Então ele tem o rodapé, então esta será a nossa primeira opção de sub-página. Então o que eu gosto de fazer é eu gosto de selecionar todos os meus elementos e copiar e colar. Ou no meu caso, vou segurar a opção e arrastar. Vá em frente e ponha isso disponível. Então agora eu poderia fazer meus sub-menus. Então, quando eu clico a opção um, este será o site para o qual ele irá. Será a nossa página de destino para o nosso primeiro link aqui em baixo, uma opção que vai manter a maioria desses elementos como a navegação superior e o rodapé permanecerá todos os mesmos. Mas não vou precisar dessas opções. O que? Precisa mais da minha foto de manchete? Vá em frente e apague tudo isso. Então agora precisamos fazer uma página de destino. Então vamos pensar sobre o layout para isso. Então eu vou desenhar uma caixa retangular para ser o recipiente para uma imagem que vai existir aqui . E eu gostaria de usar essa mesma imagem. Vamos voltar e ver se conseguimos arrastar isso aqui. Vamos baixar o City de volta. Ele não pode encontrar o mesmo cara vários arrastar isso aqui, então não pode clicar duas vezes e fazer o corte certo. E eu vou fazer um cabeçalho aqui, então eu não acho que eu vou precisar de nenhuma dessas informações, mas vamos em frente, copiar e colar algum texto genérico. Vamos fazer todo este bloco de cópia nesta caixa. Você precisa destacar tudo isso e torná-lo meu parágrafo para o meu fundo branco. E vamos fazer um para isso. Acho que os alinhamentos à esquerda vão funcionar melhor. Então vamos em frente e ampliar, fazer um alinhamento à esquerda. Vou descer aqui e fazer um alinhamento à esquerda. Ok, então agora vamos pegar um texto de cabeçalho. Bem, vamos entrar. Pegue nossa ferramenta de texto digite algo em Go genérico e realce-o e traga nossos estilos. Vamos fazer um H. Agora posso arrastar a minha caixa delimitadora para receber toda a minha mensagem para que a manchete ficasse bem aqui. Então isso é um bastante grande então quase me pergunto se eu poderia fazer em h dois ou se nós precisamos de algo no disso Então deixe-me fazer H um eu quero fazer h dois e fazer um pouco maior Vamos fazer um entre o tamanho Será bom para sub páginas Nós vamos fazer um 60 isso vai se tornar hh também. Vou clicar com o botão direito e adicionar esse personagem aos meus bens. Isto agora vai ser H dois e este será hh três. Você meio que precisava disso entre o tamanho do cabeçalho Faça essa idade também. Eu só vou replicar Traga essa caixa delimitadora aqui. Vou apenas replicar esta cópia de parágrafo. Então temos um pouco mais para trabalhar. Tudo bem. Você não precisa de pausas, então acabamos de chegar. Então, há uma espécie de nossa subpágina provavelmente trazer isso muito mais alto. Nós não temos uma grande área branca quando eles visualizaram a página da Web pela primeira vez. Porque lembre-se, este pé não vai ser visível. Eles vão ter Eles vão ser cortados bem aqui. Então precisamos pensar nisso quando estamos fazendo nosso projeto. Queremos ter certeza de que é adaptável. Então, se um realmente tinha uma manchete longa estivesse aqui, ele ainda ficaria bem, porque você não sabe o tamanho que os faróis vão ter quando você está no modo conceito . Mas ela quer ser capaz de fazer um design flexível que possa lidar com manchetes curtos e manchetes longos porque poderíamos fazer coisas que parecem bonitas. Mas podemos colocar frases curtas e longas nessa caixa e ainda funciona porque não sei quanto tempo essa frase vai durar. Então nós queremos ser capazes de fazer isso funcionar com várias manchetes, suas manchetes mais longas, vamos ir em frente e adaptar isso e torná-lo um pouco mais curto de um espaço entre as linhas para que eu possa estar preparado para colocar manchetes mais longos aqui se o cliente precisar, então isso já está preparado. Bom. Então eu talvez precise ir em frente e clicar nisso e adicionar esse personagem ao meu ativo, Tornar essa idade também. E se eu tiver um antigo que tem esse espaçamento diferente e eu não quero esse estilo de personagem apenas para a direita, clique e exclua-o e ele desaparece. Certo, então agora temos isso porque vamos copiar e colar isso para fazer em outras subpáginas. Então, certificamo-nos de que está certo, modo que quando tivermos manchetes mais longos, não nos sentamos lá e ajustamos a liderança a cada vez. Certo, então vamos fazer nosso primeiro protótipo onde ligamos grande comprimento e criamos nosso primeiro tipo de armação interativa. 7. Grade responsiva: então grades são incrivelmente importantes quando começamos a desenvolver várias placas de arte e adaptamos nosso design várias vezes e mais e mais 20 vezes diferentes antes de irmos para esse passo iria ganhar são realmente certifique-se home page e nossa primeira sub-página são realmente perfeitos em uma linha para a grade, então há algumas maneiras de fazer. Há dois tipos diferentes de grades que você pode chamar e X'd, e eu vou mostrar-lhe o atalho de teclado para que você obtenha um comando mantenha pressionado e faça cotações para puxar a grade maior, e você vai querer selecionar o quadro de arte. Antes de fazer isso, os atalhos vão selecionar o quadro de arte e o novo comando e, em seguida, minha citação, e isso vai te dar uma pequena típica grade que você verá na maioria dos outros programas adobe. E isso é realmente ótimo para layout e bloqueio. Temos um comando inteiro e fazer as cotações novamente para tirá-lo de volta, e isso é um muito útil para bloquear, Mas também há algo realmente grande para grade responsiva. Então, há uma grade responsiva, e para chamar isso, é a mesma coisa, mas você vai adicionar turno. Vamos fazer o turno de comando e a camisola, a citação. Ele vai ser capaz de puxar para cima a resposta da grade e você vai notar. E seu painel, seu painel de propriedades. Você tem uma nova opção de grade assim que recuperarmos a grade para que você possa alterar a quantidade de colunas . Então agora vai ser a sua resposta padrão 12 colum da grade. Mas você também pode mudar a calha chicotear a coluna com e você pode até mesmo ajustar as margens se você mudar para a grade de caixa aqui à direita e você pode sempre voltar para o padrão ou ele pode fazer padrão para que você possa aplicar a mesma grade toe todos os seus outros quadros de arte, então não vamos personalizá-lo significativamente. Mas vamos mudar a cor para não nos atrapalhar a tentarmos adaptá-la à grelha. Então, eu só vou reduzir a transparência do meu grande só um pouquinho. Segundo, veja meu projeto um pouco mais, e agora vamos começar a adaptar alguns desses elementos à nossa grade. Nós vamos começar com elementos específicos e tipo de trabalho meu caminho para baixo algum zoom escola e tipo de alinhado meu logotipo para tipo de onde eu acho que seria uma boa colocação na grade e usando meus guias inteligentes que eles vão me ajudar a encaixar para certos aponta e seguida, usando , como, teclas no meu teclado, minhas teclas para cima e para baixo e esquerda e direita para ajustar. Então talvez pudéssemos fazer um pequeno ícone de casa e meio que levá-lo para o final desta coluna aqui . A mesma coisa com as nossas caixas. Podemos ir em frente e agrupar essas caixas. Vai deslizá-lo por cima, recusando minhas teclas de teclado para ter um controle muito bom sobre o quanto ele desliza agrupar esse elemento. Você quer ser capaz de deslizá-lo. Poderíamos ajustar a tela se quiséssemos ir mais além não ter margens tão largas à esquerda e à direita. É mesmo com você. Que tipo de grade você gostaria de ter. Você pode ir para a grade e mudar essas opções de Magna. Slide é sobre e tem coluna igual com esquerda sobre a direita e a esquerda. Muito bem, agora vamos ter a certeza que os logótipos no topo da parte inferior estão na linha. Então eu vou selecionar o topo primeiro e selecionar objetos todo o caminho para baixo, segurando remessas, objetos relâmpagos para ter certeza de que todos eles estão centralizados. Alguns aqui no meu painel de linhas só para fazer um centro de linha. Todas essas são linhas. Vou ampliar e fazer algumas mudanças aqui. Creio que isto ainda está na grelha de repetição. Então, se eu quisesse desbloquear esses e começar a mudá-los individualmente, eu posso Onde pode mudar a coluna com para fazê-los alinhar? Ok. E eu tenho que ir em frente e clicar com o botão direito nesta grade de repetição e agrupá-la. Então agora eles vão se tornar seus próprios elementos. Então agora vou centralizar esses elementos, o cabeçalho e os links inferiores. A mesma coisa com isto. Está mantendo o turno pressionado, selecionando os dois. E agora posso alinhar isto na grelha. Então talvez eu queira que eles talvez alinhados no final desta coluna, e o mesmo acontece com esta coluna ausente. Bom espaçamento. Então, se eu estiver colocando o fim da fila ali, então talvez coloque o fim do fim. Onde May só precisa fazer um alinhamento central aqui e um alinhamento central aqui. Então, agora que tudo é realmente acabar como você gosta, podemos começar a pensar sobre nossa prototipagem e começar a vincular algumas de nossas páginas. Quero vir aqui para abastecer a rede aqui bem rápido. Vamos clicar no meu quadro de arte. Nome em. Vou fazer o meu pequeno comando, que é Come, homem citação para trazer a minha grade. Mas eu quero trazer a minha ponte responsiva. Então, eu vou fazer umturno de comando, turno de comando, citação e eu tenho o mesmo grit aplicado. Você sempre pode alterá-lo para o padrão. Então, se você alterou no 1º 1 e quiser aplicar, digamos que você altere as colunas quando quiser usar essa, basta clicar aqui e você pode fazer o padrão. E sempre que você, uh, lembrar a grade de um novo quadro de arte, ele vai fazer o que você modificou. Então, se você quiser fazer uma grade de 10 colunas e usar isso para tudo como um padrão, você pode ir em frente e adaptar isso. Uma vez que o rodapé inferior é exatamente o mesmo. Vou apenas clicar com o botão direito e agrupar este elemento e ir em frente e me livrar deste. Então por que reinventar a roda? O tempo vai manter a opção e conseguir isso. Coloque-a de volta aqui. Qualquer coisa para poupar tempo. Eu quero ter certeza de que eu poderia ir até minhas configurações para que eu possa ver que a posição Y é 10. 66 não vai clicar neste grupo, e é 10 77. Então o que vou fazer é copiar isto. Por que colocar nesta página inicial, e eu vou adaptá-la ao que eu apenas arrastei para obter uma posição perfeita de um para o outro. Então eu estou apenas colando minha colocação y, que foi empurrada um pouco para cima. Então você aperta Enter. Então agora ele vai estar exatamente alinhado um com o outro. Traga minha foto para baixo. Poderíamos arrastar a foto dela até aqui para a coluna, para que alinhasse bem a mesma coisa com a nossa tipografia, talvez pudéssemos fazê-lo no início de uma coluna. Podemos arrastá-lo até aqui. Temos muito espaço em branco e deixa-me arrastar isto até aqui, e eu também queria colocar outra pequena linha aqui alguma coisa. Pegue minha ferramenta aqui. Acho que temos muito espaço em branco. Precisamos ter algum tipo de elemento para dividir tudo e apenas entrar em meus ativos, tornando isso uma cor e tirando qualquer borda no meu anúncio por padrão. Certo, ótimo. Vou ir em frente, diminuir o zoom e desligar a grade. E também percebi que quero fazer a segunda parte. Então eu vou em frente, me livrar desses elementos. Vamos pegar essa parte de cima exatamente como gostamos. Podemos adicionar links de valete um pouco mais tarde, mas estou fazendo um site muito simples no começo, sem muitos comprimentos para mostrar como funciona a prototipagem de protesto. Vamos enviar isso para trás e o sistema de camadas que estou segurando agora. Comando colchete esquerdo segurando. Acho que temos uma imagem de herói. É por isso que isto não é perfeito. Então vamos em frente e desligue são grade responsiva. Vou manter o comando pressionado e depois mudar e depois as aspas para fazê-los desaparecer. Mas você vai precisar selecionar ambos os seus quadros de arte se você tem um ambos em. Então eu só vou fazer turno de comando e rotação. Agora os dois estão fora, e estamos prontos para começar a protótipo e ligar nossa primeira semana. 8. Criação de protótipos: Vou mover meu quadro de arte um pouco para a direita só para ver as conexões um pouco melhor. Estive no modo de design este tempo todo, mas vamos mudar para o modo protótipo. Estive no modo de design este tempo todo, Acho que estamos prontos. Vamos começar a ligar alguns destes, vamos clicar nos meus painéis de ativos. Posso ter tudo isso disponível. Então o que quero fazer é assim que vou ligar as coisas. Então, quando eu fizer uma visualização ao vivo e clicar aqui para fazer a visualização da área de trabalho, eu serei capaz de interagir com o site. Então a primeira coisa que queremos vincular é a nossa primeira sub-página, que pode ser a opção um. Então eu vou diminuir o zoom aqui e você vai notar que vê uma pequena tecla de seta. É assim que seremos capazes de ligá-lo. Vamos clicar nesta tecla de seta nesta caixa inteira quando isso é clicado, onde clicar aqui e fazer toque, que é basicamente um clipe, Um clique e um arrasto é quando você arrasta com o mouse ou com o dedo, e Vamos fazer uma transição justa. Então vai mudar deste para o próximo verde. Margaret, você escolhe um quadro de arte que vamos escolher, o único que temos disponível, e você percebe como ele liga tudo automaticamente. E vamos a uma animação que poderíamos fazer, dissolver. Podemos fazê-lo deslizar para as risadas, luz para a direita. Vamos fazer um deslize para a esquerda para que eu possa te mostrar como é. Você pode alterar a duração e torná-la realmente elegante, fazendo uma duração mais longa. Então talvez tente um 0.8 e veja se isso não é muito lento ou muito rápido. E isso é tudo. Poderíamos fazer em facilidade. Há um par de diferentes. Você poderia jogar com um par destes novos ar dentro do último mês ou dois que você pode experimentar com. Certo, então temos isso ligado. Então, agora, se formos para a pré-visualização ao vivo ou para a nossa pré-visualização, esta é a pré-visualização de um site que rolamos para baixo. Isso está ligado, então clicamos para que vai deslizar para a esquerda, e então nosso tipo de subpágina está disponível. Então, o que fazemos agora? Estamos presos. Temos um circuito fechado. Precisamos fazer disso um loop aberto que volte para a página inicial novamente. Então queremos fazer este pequeno símbolo clicável de volta para casa. Vamos criar outro link. Então, vamos até a nossa página inicial. Queremos ligar isto de volta a casa. Então, vê esta pequena linha? Vou clicar e segurar. Vá ele e clique em qualquer lugar neste quadro de arte. Clique de volta. Vamos fazer disso uma torneira, que é um clique. Vou fazer uma transição. Volte para o nosso 1º e é quando é bom nomear o seu quadro de arte, para não se confundir. Volte para o nosso 1º e é quando é bom nomear o seu quadro de arte, Então eu chamaria isso de casa, e vamos fazer um slide para a direita. Então, em vez de deslizar para a esquerda, ele vai deslizar. Certo. Então, parece que é dinâmico em que automaticamente se lembra de nossas configurações, o que é fantástico. Então agora temos dois links. Temos uma ligação aqui e uma ligação aqui. Vá em frente. Veja, todos os links dela vão rapidamente apenas clicar duas vezes nisto e escrever isto como casa e escrever isto como opção um. Só para quando eu começar a ligá-lo. Tenho nomes em vez de números aleatórios. Ótima. Então vamos para visualizar e ver nossos links e ações. Basta clicar na opção um. Simplesmente assim. Teve aquela transição agradável. Quero voltar para casa. Vou clicar e você poderá voltar para casa. E eu acho que o atraso é um pouco exagerado. Parece meio desajeitado. Então, se eu quiser editar uma conexão em particular, isso é bom. Clique na conexão. Clique duas vezes nele ou apenas rápido de uma só vez. Eles vão mudá-lo de volta para talvez um 0,4. Corte ao meio. Ok, eu vou voltar aqui e cortá-lo ao meio, também. Então agora isso iria voltar para a pré-visualização do dedo do pé. Poderíamos testá-lo. Então vamos ver se gostamos da transição. É clique. Vai deslizar. Isso é um pouco mais rápido. Fomos rápidos de volta para casa. Aqui vamos nós. Então lá vamos nós. Nós já temos uma espécie de arame de trabalho ao vivo, que é tão legal que isso levaria tanto tempo para fazer apenas alguns anos atrás. E agora olha como fomos capazes de fazer isso rapidamente. Então, da próxima vez que vamos fazer mais algumas opções, vamos clicar em todas elas juntas, e então vamos começar a fazer outro projeto depois disso. Então vamos fazer mais algumas sub-páginas e vinculá-las muito rapidamente para que possamos ter uma melhor compreensão da prototipagem e trabalhar com várias placas de arte. Então eu vou criar um par de novos quadros de arte. Vou até este ícone e fazer uns novos quadros de arte. Então eu vou apenas clicar logo abaixo e, em seguida, clicar novamente e eu vou apenas deslizar estes para cima para que eu possa estar bem abaixo dos meus menus de sub-página. E eventualmente, quando você tem 20 a 30 dessas coisas, você precisa criar um tipo de fluxo de usuário. Então você vai ter um usuário clicar em uma opção em particular, e isso vai para esta subpágina, e então você vai fazê-los percorrer algum tipo de funil para chegar a qualquer objetivo final que eles precisam estar. Então, isso acabará por se parecer com um mapa, e você verá o fluxo de usuário que é coletado de suas personas de usuário. Você pode desenvolver se você está tipo de fazer algum design UX então nós vamos apenas tipo de copiar e colar são sub-página e ser capaz de pop algumas dessas fotos. E então eu estou apenas ampliando aqui e eu vou apenas segurar a opção e arrastar. Espero que isto tenha chegado ao local certo. Então você notou que eu era capaz de arrastá-lo para baixo, mas tudo abaixo da dobra, não é visível. Então eu vou em frente e selecionar meu quadro de arte em cima e descer para ter certeza que está na vertical, e eu vou rolar todo o caminho até o fundo. Vou fazer a mesma coisa. Vou seguir em frente e mantenha pressionada a opção Arraste isso, certifique-se de que encaixe dois pontos. Então ele tem as mesmas dimensões ou os mesmos posicionamentos no quadro de arte, e parece que eu preciso ir clicar no meu quadro de arte e ir para a vertical e apenas ter certeza que eu tenho tudo abaixo da dobra, que seria o nosso rodapé. Então aqui estão nossas três opções diferentes. Podemos sempre arrastar nosso quadro de arte um pouco para dar a eles o mesmo espaçamento entre as placas de arte, que pode ser útil quando você tem um monte dessas coisas. E então vamos em frente e trocar nossas fotos. Então deixe-me ir aos downloads e trocar algumas dessas fotos com as obras de fábrica. Eu poderia arrastar esse e arrastar este aqui para dentro. Vá em frente e clique duas vezes para que eu possa ter um corte melhor. Certo, esse é cortado. Esse é cortado muito bem, e agora estamos prontos para ligar estes. Claro, todo o conteúdo acabará precisando ser alterado. Então vamos e facilidade de comprimento até o modo protótipo. Então eu só mudei para o protótipo, e nós vamos ligar estes para cima opção para clicar e arrastar para baixo. Isso vai ligar a segunda página e é memorizado Oliver configuração então não temos que mudar isso, e vamos subir até a 3ª 1 e ligar isso para baixo. Então, se você quiser ver toda a sua conexão vinculada, vá em frente e selecione o nome superior da arte. Borden's não poderia mostrar todas as conexões de cada um, e também precisamos conectar aquela casa. Eu volto para a página inicial, então vamos em frente e ir para cada ícone. Certifique-se de que estamos apenas selecionando o ícone, vinculando-o de volta e vinculando-o de volta. Um último, vamos ligar de volta, e agora temos um círculo aberto onde eles conciliam Eichel e voltam para a página inicial de cada um. Vamos selecionar todas as nossas pranchas e podemos ver todas as conexões que temos. Então agora vamos até a opção de pré-visualização e vamos conferir. Deixe-me fazer isso menor para que vocês possam ver. Então, clique na opção um. Claro, podemos rolar para baixo agora, abaixo da dobra, clicando na opção um. Temos isso chegando. Podemos voltar para a página inicial, clicar na Opção dois voltar para a página inicial e ir para a Opção três. E poderíamos voltar para a página inicial para que você possa tornar isso mais elaborado. Mas isso é apenas um ótimo começo projetado para você se acostumar com prototipagem. E vamos fazer prototipagem muito mais complexa e seremos capazes de fazer animações no próximo projeto que fazemos, que será um aplicativo da Web, conceito e eu queria repassar mais uma coisa antes de passarmos para o mais complexo projeto. E esses são os seus símbolos. Então criamos este símbolo com o próximo E. Não o trouxemos como símbolo ou como uma foto. Este é um pequeno objeto de ervas ao vivo, então eu posso realmente ir para isso. Ahbd são o símbolo. Clique duas vezes no meu símbolo e eu serei capaz de editar o símbolo em qualquer alteração que eu fizer no símbolo ou global. Então, se eu mudar este símbolo para, digamos amarelo, você vai notar que todos eles em cada página são alterados para amarelo. Então é isso que é maravilhoso sobre a atribuição de símbolos é o seu global. Então eu gosto do amarelo. Parece muito bom. Eu posso entrar com a ferramenta pin e editá-lo ainda mais e vai fazer todas as mudanças em todos estes. Então você não tem que sentar lá e copiar e colar a casa mudada para o próximo quadro de arte . É tudo global. Então é isso. Isto é algum tipo de Web design? Nós criamos uma exibição muito, muito, muito simples. Três links simples nem estavam fazendo uma barra de aplicativos, mas eu vou mostrar a você como fazer animações e pullouts, menus de hambúrguer e todas essas coisas no próximo uh, projeto, que será um desenvolvimento de aplicativos da Web quando falamos sobre a marca e incorporar isso em um tipo de experiência de usuário para um fluxo de usuário que leva um log de usuário novamente e os leva ao seu destino final. 9. Compartilhamento e dimensionamento: Então, como faço para mostrar o meu design? Há uma opção aqui chamada Compartilhar Agachamento. Clique em compartilhar e há algumas opções que podemos sempre ir até o arquivo e exportar. E podemos exportar as placas de arte como um J. Packer, PNG ou PDF. E podemos ter várias páginas pdf. Então, isso é ótimo se você ainda estiver no tipo de estágio de prototipagem e precisar do dedo do pé, faça com que um cliente marque um pdf. Isto é perfeito para eles. Mas se você quiser ter esse tipo de interação ao vivo e clicável, você vai até aqui e nós vamos publicar protótipo e você pode fazê-lo. Há algumas opções diferentes, mas vamos criar um link público, então vai levar tempo para criar um U R L que possamos enviar para outras pessoas. Agora temos uma ligação pública. Podemos ir até o ícone Link. Temos o nosso link copiado para o nosso e, em seguida, podemos copiar e colar isso em nosso navegador, e ele vai ser capaz de carregar estão trabalhando protótipo. Então agora você vai notar que tudo funciona exatamente como funciona quando estamos dentro do X T. Mas agora estamos em um navegador, e assim qualquer um pode ver o que vemos na seção de visualização de X'd, e você também pode fazer comentários. Você volta para o cliente ou outras pessoas com quem você está trabalhando, e há outra opção que vai te mostrar. Você pode clicar novamente no compartilhamento e ir para baixo para conectar as especificações de design publicadas. E então nós vamos fazer isso e ele vai ser capaz de exportar todas as nossas configurações diferentes para o nosso personagem. Estilos são símbolos e cores, que seria ótimo para compartilhar com o desenvolvedor que precisa saber os códigos hexadecimais que precisam, quem precisa saber sobre o tamanho da tipografia e ter alguns dos símbolos. Então isso é exportar Agora, uma vez que termina a exportação, vai fazer a mesma coisa, vai copiar esse link e colá-lo em um navegador. Certo, aqui está o link. O link é copiado. Vamos em frente e experimentá-lo. Então isso pode ser um pouco diferente do último. Vai ser capaz de mostrar os nossos links. Quem poderia voltar para todas as telas? Ele vai mostrar ao desenvolvedor como queremos que seu usuário clique e flua através de tudo. Então, se este era um site completo, pode haver 30 ou 40 quadros de arte diferentes, mas eles poderão ver o fluxo do usuário e como isso deve ser ligado. Você também pode clicar sobre os individuais, e temos todas as cores específicas e você pode realmente clicar em um copia o código hexadecimal . Então isso é perfeito para um desenvolvedor que só quer dedo do pé. Tenha todas as suas especificações prontas para ir. Ele mostra toda a tipografia que o tipo de letra usou e qualquer tipo de interações que mostrará um tipo de deslizamento e flexibilização. Vai deixá-los saber tudo o que precisam saber. E eles também clicam aqui e fazem comentários também. Então isso é útil quando você está trabalhando com aquele desenvolvedor ou se você, você mesmo é o único que vai desenvolver isso para torná-lo uma resposta real. Dimensionamento Obree. Esta é uma ótima adição ao Adobe X'd. Agora eu sou capaz de redimensionar minha placa de arte para um pequeno iPhone, por exemplo, e ver como ficamos no celular. Isso é muito importante para os desenvolvedores e para os clientes verem como as coisas se adaptam a tamanhos menores . Então vamos em frente e criar um novo quadro de arte. Indo clicado, crie uma nova placa de arte e vamos fazer uma placa de arte do iPhone X. Vamos arrastar isso um pouco mais para perto da página inicial dela. Vamos adaptar a página inicial primeiro. Vamos em frente e selecionar todos os elementos em casa, e vamos fazer algumas coisas primeiro antes de copiarmos e colá-los lá para que possamos selecionar todos os elementos. E se reduzirmos, ele automaticamente começará a redimensionar tudo para nós. Então vemos como a indústria redesenhada colapsa quando eu a faço um pouco menor e tudo está funcionando muito bem. As três caixas principais de ar não desmoronando. Como nós gostamos e isso é OK, redimensionar responsivo, que eu tenho aqui à direita. É clicar no dedo do pé. É muito bom, mas não é perfeito. Isso funcionará cerca de 80% do tempo, e eles ainda estão trabalhando nesse recurso e melhorando a cada vez. Mas por agora você pode ajustar principalmente como as coisas colapsam. Então, se você passar para a sua resposta de redimensionamento depois de selecionar essas três caixas que você pode unclip fixação de vínculo com. E assim, quando você faz estes menores, o com agora será responsivo quando você reduzi-lo. Se você clicar em Bennett Highlights azul, isso significa que a largura será corrigida à medida que você redimensioná-lo para baixo. A mesma coisa para penhor de alta definição. Clique com uma altura. Tanto a largura quanto a altura se ajustarão à medida que o derrubam e serão caixas menores . Então agora ele poderia trazer alguns elementos um por um tipo de dentro e ver como ele colapsa. Poderíamos destacar tudo e fazer uma cópia e tentar redimensioná-lo para aquele tamanho muito pequeno . Mas o redimensionamento responsivo não é perfeito. Não vai parecer 100%, então vamos ter que ajustar as coisas de saúde respondem. Então, podemos precisar agrupar o rodapé, agrupar isso e passar para o redimensionamento responsivo. E em vez de ter em auto, podemos precisar alterá-lo onde talvez a largura é fixa. Então, quando nós dimensioná-lo para baixo, o chicote vai ser corrigido em vez de não ser corrigido. Então tipo de teste para fora como estes reagem. Então, quando você faz trazê-lo para baixo e tem o melhor tipo de combinação de colapso e tornar-se responsivo, então auto foi ótimo, mas brincar com o manual e ver como eles colapsam e ver como você quer que ele colapse no celular. Não vai funcionar perfeitamente, mas é um cara legal para você começar. Então você não precisa redimensioná-lo para cada tamanho manualmente e tipo de fazer algumas coisas automáticas . Então eu realmente gostei de como esta parte superior funciona. Então eu vou copiar e colar minha imagem de herói e meu cabeçalho e agora longe e eu meio que gosto de como isso desmoronou. 10. Design de aplicativos para móveis - configuração e Ux/Ui: Então agora vamos passar por todo um desenvolvimento de design de aplicativo e você está vendo bem aqui perto um pouco de uma marca que eu juntei rapidamente, e você pode reconhecer os ícones se você já teve aulas anteriores ou aulas comigo. Nós desenvolvemos esses ícones todos no Adobe Illustrator, que é onde eu me encontrei agora. Então este é o tipo original que eu comecei a trabalhar com, que é, partir de Sands Black, e eu decidi arredondar os cantos para dar um tipo de aparência mais suave e jovem e meio que adicionou essa cor diferente para indicar talvez o centavo no aplicativo de mergulho. Então, qual é o aplicativo? É para jovens do milênio que querem ter um aplicativo de orçamento muito simples. Então é chamado de Dime, e eu queria ter um tipo muito simples que fosse arredondado. Isso é grosso. É o Bolden. Tão simples porque toda a idéia do APP é o seu dinheiro feito simples, que é o tipo de slogan, Então tudo vai ser simples em termos de nosso design. Vai ser um bom fluxo de usuário, muito fácil de usar. Não é complicado. Ele não sobrecarrega com muita publicidade, também, também, então eu também desenvolvi um par de malhas radiantes aqui para talvez usar elementos de fundo em nosso design APP. Não tenho certeza de usar, mas eu desenvolvi, hum, para ter esses ativos prontos. Então, algumas coisas que vamos fazer, vamos acontecer X'd e vamos pegar um par dessas cores e começar a montar alguns ativos. Então, quando começamos a projetar, não temos que pensar muito sobre essas coisas. Já está carregado no X'd. Então vamos começar a trazer essas cores. E então eu estou apenas selecionando esta primeira cor verde menta mais clara e obter uma cópia do meu código hexadecimal e colocá-la em X'd. Deixe-me fazer isso, Phil. E agora ele poderia clicar com o botão direito à frente, tirar borda fora do clique direito e adicionar cor aos ativos, a fim de fazer a mesma coisa com um pouco de uma cor verde mais escura ou o verde azul. Acho que seria poppin X'd. Vai criar uma caixa, certificar-se de que não há borda em nosso preenchimento, clique direito e adicionar ativos coloridos, e agora meus ativos estão carregados. Eu não preciso mais de nenhum desses objetos, então ele vai se livrar disso. Vamos também trazer o nosso tipo de personagem. Então vou digitar um genérico. Seria uma fonte de cabeçalho. Não vou fazer isto a partir do Sands. Então, Ese O Sands, ok. E vou adicionar isso aos meus estilos de personagem. Então eu vou em frente e selecionar com terapia, certo? Clique e adicione caracteres toe ativos e para que ele possa adicionar tamanhos diferentes. Quando começamos, desenvolvemos o aplicativo e temos uma idéia do tipo, podemos continuar a adicionar ativos. Então agora estamos prontos para começar. Só há mais uma coisa que preciso trazer. Então vamos entrar. O ilustrador. Quero trazer alguns desses gráficos. Então o que eu vou fazer é eu sou um ilustrador. Vou preparar alguns quadros de arte bem rápido para poder exportar aqueles são P e G e ter esses ativos disponíveis. Eu também vou pegar meu logotipo para, e eu não vou ter um PNG transparente quando eu trazer aqueles em dois adobe. Ok. E podemos trazê-los também, se quisermos. Então, se eu quisesse ter esse ícone e também esses pequenos ícones, eu poderia trazê-los. Quando eu estiver pronto, provavelmente vamos querer fazer um que seja branco também. Então eu vou voltar para dentro e adicionar reverter estes para fora. Deixe-me ver se eu não posso fazer todo esse branco e, em seguida, fazer um desta cor e o outro pequeno ponto do Eu seria a cor verde. Então, agora outros serão brancos em um fundo transparente. Deixe-me exportar. Vamos fazer todos esses tipos de tamanho. Achamos que vamos acabar usando-o em nós vamos guardar isso em nossos símbolos. Ok, então eu vou apenas clicar com o botão direito, clicar botão direito e apenas fazer cada um. Certo, agora tenho o meu símbolo. Eu vou fazer isso branco. Isso se chamará Azul, e isso se chamaria Verde. E quando fizermos todo esse tipo de trabalho de fundo, quando começarmos a projetar, será super rápido. Como podem ver, criei um novo quadro de arte. Poderia ser iPhone 678 Apenas tipo de ter um pouco de um tamanho menor, mais proeminente lá fora é o iPhone. O X ainda está meio que saindo. Então eu pensei que eu projetado para este tamanho e, em seguida, tipo de fazer algum tamanho re responsivo e mostrar como ele ficaria no iPhone X e outros tamanhos e um Phillips android primeiro começar com tipo de algum bloqueio básico. Temos que começar a pensar agora sobre a experiência do usuário e o fluxo do usuário. E enquanto estou desenvolvendo essa marca, estou pensando na personalidade do usuário e é aqui que nos sentamos. Mude um pouco para longe de você, eu, que é a interface do usuário, e começamos a entrar em U X, que é a experiência do usuário. Então agora estamos pensando sobre o fluxo de usuários e como eles estão se sentindo e como o produto é fácil de usar como eles passam por um tipo de funil ou o tipo de experiência lá querendo sair do aplicativo, que seria um aplicativo de orçamento. Então, como é fácil, é usar o? Podemos eliminar áreas problemáticas? Podemos eliminar áreas de frustração que podem desencorajar alguém? Podemos oferecer grandes insights imediatamente para que eles possam se sentir como o aplicativo está realmente dando a eles o que eles querem, que é uma versão muito simplificada de um aplicativo de orçamento. Então, quando pensamos no fluxo do pé do usuário, pensamos no nosso bebê. Nosso primeiro, vamos desenvolver algumas pessoas rápidas. Não vamos nos aprofundar muito em você. X foram para se concentrar um pouco mais no lado u i neste projeto particular. Mas vamos ter dois tipos diferentes de porcentagens de usuários. A pessoa ia ser jovem tem 25 anos. Ele vai ser bem educado. Ele realmente quer um aplicativo muito simples, fácil de usar. Seu profissional, ele está ocupado. Ele não tem tempo para brincar. Ele quer uma simplificação de um aplicativo. Também temos uma mulher de 28 anos que é mãe de dois filhos. Ela também não tem muito tempo. Então, ambas as personalidades compartilham um tema comum, que não é muito tempo. Portanto, precisamos capturá-los rapidamente com informações relevantes para o que eles estão procurando. Então vamos em frente e desenvolver nosso tipo de página inicial de login página como você quiser chamá-lo, porque quando você abre o aplicativo você metade do log e você tem que ter uma conta tem este aplicativo. Assim, a página de login será a nossa primeira página inicial. E então nós vamos ter que usuários que vão estar nesta página, e é quando nós vamos ter dois tipos diferentes de fluxos de usuário. Então 1% do macho vai para um lado, e a mulher vai seguir, talvez, de um jeito diferente. Temos dois tipos diferentes de fluxos de usuários neste protótipos em particular. 11. Design de aplicativos para móveis - caseiros.: Então eu já fiz um par de ativos que eu pensei que faria um bom tipo de usuário colorido login página. E então eu tenho esses dois ativos. Os dois estão radiantes. Malhas de mensagens. Criei um ilustrador de Adobe, então vou redimensionar isso. E o que eu poderia fazer é criar um contêiner. Se eu quiser que isso ocupe toda a tela do aplicativo, eu poderia apenas criar um recipiente de cores, ir em frente e remover nossa borda, e nós poderíamos seu dragão em que tornaria muito mais fácil de redimensionar. Podemos dobrar, clicar e ser capaz de arrastar isso para cores particulares que achamos que ficaria legal. Então agora vamos precisar de dois usuários. Então vamos sair e pegar alguns círculos. Temos dois usuários diferentes que você pode fazer login. Talvez eles sejam marido e mulher, e assim eles terão o APP, e você poderia ter vários usuários com vários orçamentos dependendo da sua família. Então, este pode ser um aplicativo familiar onde você é incentivado a ter o mesmo tipo de conta, e você pode fazer login com perfis diferentes, como a Netflix, onde você tem uma conta. Temos perfis diferentes e você pode fazer login como uma família. E há também uma área conjunta onde você pode ver finanças conjuntas. Então, é uma maneira muito legal para casais jovens casados ter uma espera simplificada um orçamento e trabalhar como uma equipe. Então vá para Loggins diferentes. Uma para o marido, uma para a esposa ou duas personas diferentes. E então nós vamos conseguir um jovem que iria para os downloads. Então aqui estão algumas fotos na cabeça que eu poderia descobrir quem eu acho que com melhor ajuste. A nossa pessoa de utilizador estava a pensar num rapaz jovem. Ele pode ser este, mas parece que está nos 30. Então vamos pegar esse cara. Vamos deixá-lo lá dentro. Vou manter a opção de manter o mesmo tamanho. Vou arrastar a nossa mulher aqui, jovem. Vamos clicar duas vezes e cortar o redimensionamento. Estes tiros na cabeça ficam um pouco mais perto ao redor da cabeça. Então agora eu tenho uma espécie de borda fina aqui. Deixe-me ver se eu não posso fazer isso um pouco mais leve zoom ins e tipo de Veja, isso é quando você realmente obter um zoom in e descobrir o que nós gostamos. Então eu poderia fazer uma sombra aqui para esses Loggins, para destacar os dois. E durante uma pequena sombra, teríamos nosso logotipo na tela de login. Isso é muito importante, no entanto versão branca. Isto é quando você testa coisas diferentes. Então eu estou percebendo, Oh, eu poderia precisar pegar um com o verde claro para combinar com este tipo de isso está se misturando em muito. Então deixe-me pegar minha outra versão. Então eu tenho minha outra versão aqui que usa o verde mais claro para que vai sair um pouco melhor. Eu também posso adicionar talvez uma sombra para isso também, e nós vamos precisar de algumas informações de login. Claro que temos os nomes deles. Em vez de apenas ter um tipo de pessoas sem nome flutuando por aqui, vamos pegar nossa ferramenta de texto. Poderíamos começar a definir o nosso tipo um pouco, então isso vai ter que vir acima com um nomes falsos. Vai chamá-lo de Bob. Teremos apenas um sobrenome genérico para Bob M. E este é o nosso rosto apertado Azo Sands, que está em nossos estilos de personagem. Mas vamos ter um que também é branco. Então vamos em frente e definir nosso tipo. Estava indo pegar aquela ferramenta de flecha. Traga isso para cima. Quase me pergunto se podemos fazer isso verde quando você pega a ferramenta conta-gotas de amostra ou pequena cor verde. E eu também quero adicionar aquele verde verde aqui. Basta pegar uma ferramenta quadrada e nós vamos pegar a ferramenta conta-gotas. Vou preencher esse verde. Podíamos trazer a nossa cor desta forma. Preciso trazer a terceira cor verde. Então vamos fazer disso um ativo de cores. Então lá vamos nós. Agora temos três tons verdes para trabalhar. Vamos voltar para White e talvez fazer o primeiro nome Green. E não estou gostando do Sands como letras minúsculas. Então o que eu vou fazer é experimentar com talvez uma escolha de tipo secundário que é mais fina. Então talvez vá com a Helvetica só para ter algo muito simples. Vamos preencher o sobrenome dele. Então vamos fazer um ousado Ok, nós só temos apenas ousado. Então eu me pergunto se Helvetica novo inferno o tika você vê se eu tenho uma quantidade maior de pesos? Sim. Então Helvetica novo Eu tenho um pouco mais opções de peso diferentes. Então eu vou ficar preto e então nós podemos ir ultra leve com o sobrenome ainda Helvetica New fazer ultra light. Mas isso é muito fino. Então vamos fazer magro, ver como isso funciona. Então, uma vez que estou feliz com isso, eu poderia segurar, escolher e arrastar e fazer o dela. E vamos em frente e adicionar isso aos nossos estilos de personagem vai adicionar os ativos de estilo de personagem , então ele vai adicionar todos esses pesos diferentes. Então acrescentou Bob como um estilo de personagem e Smith como outro. Então eu vou precisar renomear o. Então eu vou renomear estes muito rapidamente para que eu pudesse ser capaz de definir qual estilo de personagem é que ele foi capaz de tipo de nome. Todos os meus bens só fazem com que seja mais fácil para mim lembrar e recordá-los. Então nós também queremos tornar este apus simples é possível. Alguns estavam projetando que estamos mantendo isso em mente. Então queremos que eles saibam apenas algumas outras coisas, que é esta é uma tela de login, então faz sentido que eles clicem em seu perfil de usuário. Mas às vezes você só precisa ter um tipo visual de guia para isso. Então vamos enviar esses caras para baixo ou podemos enviá-los para cima. Isso é que vamos brincar com espaçamento um pouco. Poderíamos quebrar nossa grade para que eu pudesse fazer o comando e a citação para trazer nossa grade . Preciso selecionar meu quadro de arte. Primeiro Comando inclui ação, e isso vai nos ajudar. Ou posso alternar na minha grade responsiva fazendo a mudança de comando no trabalho de cotação para que isso possa nos ajudar a aumentar um pouco as coisas. E eu estou brincando agora com diferentes maneiras de dizer login porque faça login. Não é da minha personalidade de usuário. Há muito tempo em seu antigo termo arcaico, Wesley usa algo um pouco mais suave e amigável, então eu estou fazendo o negrito minúsculo. Mas eu também estou apenas dizendo aberto porque isso é o que nós queremos fazer é abrir o aplicativo e então nós não queremos fazer o aplicativo aberto tão grande que eles não percebem que eles precisam clicar em seu login foto. Então vamos dizer clique no perfil para carregar seus orçamentos alfandegários verdes. Ok, vou fazer isso muito menor Steuer branco claro e vamos fazer um alinhamento central. Então eu quero ter certeza que há muito espaço para respirar e espaço branco com isso, nós poderíamos até ter diamante no fundo. É aqui que acabamos de fazer uma experiência com o que achamos que seria bom. Poderíamos fazer outro bar aqui porque eu realmente quero ter um pouco de contraste com esse desejo. Clique fora da borda. Só temos um enchedor fazendo um suporte esquerdo de comando. Meio que mandando para trás e sistema de camadas. Eu poderia brincar com cores diferentes. Fazemos a nossa ganância, cor vai ter um bar para ajudar a separar este grande espaço aberto. E talvez pudéssemos ter uma pequena flecha que desce. Então vamos em frente e criar um pouco simples ou ativo que vai ser estreito, então vou pegar minha ferramenta de alfinete. Eu só vou desenhar um zero simples, e eu vou fazer isso tirar a fronteira ou realmente quero a fronteira. Vamos torná-lo um pouco mais grosso. E vamos fazer algumas bordas redondas para nossas pequenas linhas. Então agora eles são bons e arredondados. Vamos fazer com que possamos fazer isso qualquer uma dessas cores. Ok, então tem uma pequena flecha. Talvez seja quatro em vez de três. Ou podemos tê-lo aqui no White. Vou reformular este elogio, e depois vamos fazer a nossa primeira animação, por isso fique ligado. 12. Design de aplicativos para celular - animate para a página home: Então eu quero brincar com o contraste, realmente ter algo por trás das imagens do perfil. Então o espectador realmente aprimora essas imagens de perfil, e é aí que eu cresço. Pop trouxe a caixa cinza para baixo um pouco, então ele intersexual e realmente chama a atenção para o centro da tela. Que é exatamente o que eu quero que o usuário veja primeiro. Então, se este texto realmente pequeno, não é grande e esmagador, é muito suave. Quem está abrindo o aplicativo hoje? Ele tem uma seta que aponta diretamente para os dois perfis de usuário. Eu também adicionei um get lento que seu corpo fez simples. Isso provavelmente será um requisito do cliente. E provavelmente também há algumas informações de direitos autorais que eu vou precisar colocar aqui também. Então eu faço isso menor. Talvez 10. Oh, está atualizado. Certo, então temos aquela pequena informação que provavelmente será algo que devemos considerar . Isso seria um requisito. Então eu acho que isso é agradável e simples. Acho que não queria ser mais complexo do que isto. Deixe-me brincar com a ferramenta de alfinete aqui. Certifica-te de que tenho a forma certa. Eu gosto disso. Você poderia deixar isso macio. Eu poderia fazer talvez um dos seus suaves que não, é um pouco puro. Esse tipo de interface simples e agradável. Vamos tentar não ser muito complexos com isso. Ok, vamos deixar isso em paz. Temos tipo de ter nossa primeira página, e então nós vamos tipo de fazer um pouco de animação. Então nós vamos fazer em animação para que quando você passar o mouse sobre ou quando você clica no usuário, ele tipo de vem para a frente um pouco. Então você corta e tem um pouco dessa interação. Então não é apenas uma primeira página estática e obsoleta . Então vamos em frente e criar outro nosso conselho bem ao lado, e isso pode até estar em cima dele. Já que estamos fazendo uma animação. Quando faço o fluxo de usuário, quando faço animações, gostaria de empilhar. E quando eu dio progressão para cortar objetivo final forno, ele gosta de ir para a direita. Então isso será apenas uma animação. Isso é bom. E quando o usuário empurra para o próximo passo, eu gosto de ir mais para a direita. Este era o mapa como eleito, mas você poderia fazê-lo. Próprias maneiras especiais. Um, copie isto. Traga tudo isso para baixo. E é aqui que a animação vai acontecer. Vamos ter certeza que é uma cópia exata, e tudo está na mesma posição, então vou mudar isso um pouco. Então é assim que a animação vai funcionar? Eu vou ter. Esta é a primeira parte da animação, e esta é a segunda tela da animação. Por isso, aqui em baixo, vou mudar o que quero mudar. Então eu vou fazer este ser o estado final da animação. Então eu quero que ele seja um pouco maior, e eu quero que ele seja o nosso top. Então ele vai ser o primeiro a ser selecionado, então talvez eu queira mudar o nome um pouco mais. Vamos ver como isso parece. Então agora vamos animar, e vamos virar para o modo protótipo para fazer isso para que eu pudesse ir e transformá-lo protótipo. Ok, então é assim que você faz a animação quando eu estou no protótipo e eu vou selecionar o que eu quero animar. Então eu tenho isso Você tem tipo de perfil selecionado, e eu vou clicar sobre esta outra pequena peça de perfil e eu vou fazer isso ser uma animação automática. Então, a transição é passar de um clique para outro? E essas são as animações onde você clica em animar automaticamente e o destino já foi selecionado desde que o arrastamos para lá. Nós queremos que isso seja um tipo de Ah, vamos apenas manter essa animação igual e ver tipo de como ela parece. Ok, então nós vamos clicar sobre a pré-visualização e ver como a nossa animação fica. Então aqui está a nossa animação. Ok? Então, quando eu clicar em Bob Smith, ele vai em frente e trazê-lo para a frente, uma animação para o próximo slide. Então agora o que precisamos fazer é clicar em Sarah e voltar para a tela inicial. Então vamos dizer que iria clicar em Bob Smith que vai continuar em seu uso, sua jornada, e ele vai se conectar. Mas e se clicarmos nisto e quisermos dar às pessoas uma opção de clicarem na Sarah porque clicaram no errado? Então vamos dar-lhes essa opção a seguir. Agora ainda estou no modo protótipo, mas vou precisar criar um novo quadro de arte. Então eu vou projetar e criar um novo quadro de arte. Certo. Então isso será para a jornada dela, e ela vai ser um pouco maior. Ela é. Sarah Smith vai para cá. Verei como não ouvimos isso ficar na mesma linha. Você pode fazer o perfil de Sarah ir adiante, ter certeza que eles têm um tipo semelhante de acordo. Então eu vou voltar para o modo protótipo vai ser alternar para frente e para trás muito. Vou em frente e me conectar. Esta vai ser a jornada dela. Tudo vai ser o mesmo auto animar e tudo é o mesmo. Então agora, quando clicamos na pré-visualização com um clique nele, você não pode clicar para trás ainda. Nós não configuramos isso, então eles clicam para trás, nós podemos clicar nela. Então, agora precisamos fazer isso circular para que, quando estivermos no dela, ele ligue de volta ao chiado . Isso parece complicado, mas é realmente apenas ligando tudo em um loop. Então agora nós temos Vamos em frente e movê-la. É quando começamos a realmente precisar mapear para fora. Então esta pode ser a jornada dela, e esta pode ser a jornada dele. Então agora eles vão começar a se espalhar em diferentes jornadas de usuários de persona. Certo, então agora precisamos nos dissolver, só por precaução. Queremos voltar a este tipo de viagem e voltar para ela. Precisamos dar às pessoas uma chance de saírem imediatamente. Então vamos para a guerra nos modos de protótipo. E agora só precisamos ligar isso de volta. Isso pode ser um link para a próxima opção. Mas se clicarem no Bob, vamos ter um link para o Bob. Então agora isso vai apenas animar automaticamente para Bob. Então agora temos se eu ir em frente e diminuir o zoom e selecionar todos eles, eu meio que vejo como a jornada é o clique em Bob. Eles vão para a jornada bobs então eles clicam sobre ela, eles vão para a jornada dela. E se clicarem no Bob, voltará à jornada do Bob. Então temos mais um para fazer, e isso é clicar se eles clicarem em Bob. Mas eles querem realmente fazer. Sarah, quando eu clicar nisso para a jornada da Sarah. Então estamos apenas criando esse tipo gigantesco de loop aqui entre todos eles para que eles possam ter um círculo aberto e eles não estão presos em um beco sem saída. Então agora apertamos o play. Digamos que quero uma lei que abra o aplicativo hoje. Ok, Bob abriu o aplicativo Oh, espere na Sarah abrindo o aplicativo Oh, espere, espere. Bob está abrindo o aplicativo. Então agora você pode ver esse tipo de ciclo aberto e som. Agora, o que precisamos fazer é quando eles clicarem novamente, ele vai carregar na jornada do Bob. Agora vamos nos concentrar no Bob, ou você pode se concentrar na Sarah. Mas vamos em frente e focar no Bob primeiro. Então vamos continuar a entrar no design e vamos criar várias páginas diferentes . Então, vamos clicar na página inicial dele depois que ele entrar, estará bem aqui. Vamos trabalhar nisso. Vai ser muito parecido com a jornada da Sarah, então vamos fazer um novo quadro aqui ao lado, e este será o primeiro passo dele depois que ele entrar. Então agora vamos criar a tela inicial para o orçamento de Bob. Então eu só fui cabeça e copiei e colei. Vamos ter o perfil do Bob, talvez um tipo de turnos aqui em cima iria em frente e enviar a tela. Que possamos fazer esse tipo de animação aqui em cima. Poderíamos pegar o nome do Bob, fazer com que fosse listado. Só estou tentando manter um tipo de tema de design. Provavelmente não precisamos disso. Mas podemos fazer isso outra coisa. E talvez não precisemos disso também. Não tenho certeza, mas não vamos precisar da Sarah a não ser que queiramos dar a opção de voltar e entrar em algum lugar que provavelmente estará aqui embaixo. Portanto, queremos tornar esta informação provavelmente muito menor. Vamos clicar neste. Então você notou que quando tento redimensionar esse centavo, ele faz isso globalmente. Bem, eu não quero isso. Eu quero desvinculado este particular para torná-lo menor apenas nesta página. Então, como desvinculamos? Os estilos globais são símbolos globais. Vamos clicar com o botão direito e símbolo despreparado. E agora vai ser honesto e meio nivelado. Então agora eu posso fazer um pouco menor, talvez empurrá-lo para baixo para o lado. Podemos ir em frente, ampliar e ter certeza de que temos o alinhamento certo. E outra coisa que queremos fazer é ir e chamar um parque ou identidades. Então eu vou fazer um comando indo para fazer nossas grades responsivas que comandam turno e cotação . Você pode usar isso como um guia para ver como estamos fazendo com as coisas alinhadas? Isso desativaria e ativaria sempre que quiséssemos ter uma ideia. A grade. Agora precisamos descobrir o que Bob Smith pode ver nesta maçã. Deixe-me fazer o nome dele um pouco maior. Vamos fazer com que 33. Talvez não tão grande. Um atroz, vamos fazer 27. Está recebendo o tamanho certo para esta interface. Nós também queremos ser capazes de voltar para a tela inicial, então eu vou colocar um pequeno menu de hambúrgueres que vai ser capaz de deslizar para fora e ir dar algumas opções avançadas para talvez ir até o outro usuário. Vamos fazer o nosso pequeno menu de hambúrgueres ícone Pullout. Cem vai pegar algumas dessas ferramentas moldadas e começar a criar nosso pequeno símbolo. Eu não quero ter uma fronteira sobre isso estava clicando fora. Agarrei minhas alças aqui e torná-la em forma de pílula. Torná-lo um pouco mais curto. E eu tenho uma opção de segurar e obter outra opção de segurar e obter outra para que pudéssemos fazê-lo. Um simples é que podemos torná-lo estilizado e torná-lo diferentes níveis. Enfraquecer Faça um círculo aqui, meio que mantendo-o arredondado, porque de acordo com o tema do nosso logotipo, você volta aqui. Ele tem esses cantos arredondados e algum tipo de manter o tema quando eu estou desenvolvendo os ícones também. Ok, então eu tenho um grupo todos esses juntos como uma unidade agrupando-o. Vamos fazer com que seja do tamanho. Eu quero tê-lo. No final, pouco de pele, uma espécie de mudança de mão pressionada. Então todos eles tipo de escala para baixo juntos e uma vez obter alguma posição final no grupo decidindo que eu quero ter um pouco mais de espaçamento entre todos estes. Então esse pode ser o nosso pequeno ícone. Vamos agrupá-los juntos, encontrar a cor certa, você poderia fazer cal, o que iria bem com o nome dele. Então agora vamos em frente e fazer isso um tamanho, certo? Porque, você sabe, uma vez que fizermos isso, Global vai ter ingrata. Você não quer fazer isso. Isto vai estar em todas as páginas. Então vamos agrupar isso e eu estou sendo muito exigente aqui. Vou fazer o espaçamento entre cada um desses. Mesmo assim, vou selecionar cada um desses e vou até o meu painel de alinhamento. Veja, se eu tiver a ferramenta de alinhamento certa para fazer isso lá vamos nós. Então isso é horizontal distribuir centro. Ele não tem um pequeno nome pop out, mas eu sei que no Illustrator ele funciona de forma semelhante. Então você faz a mesma coisa indo para distribuir a mesma quantidade de texto entre lá, certifique-se de que está certo. Eu não sei. Parece que está um pouco desligado lá. Isso é 3.2 e isso é 4.2. Então não sei por que não está fazendo isso. Mesmo que graças a Deus por guias inteligentes. Podemos conseguir isso mesmo que eu vou selecioná-los todos novamente. Eu acho que eu finalmente estou feito clique direito grupo, obter o tamanho certo e, em seguida, eu posso adicionar isso como um símbolo e eu poderia arrastar isso para que ele é horizontal de seu nome. Isso pode parecer um pouco melhor, mas vamos ver o que mais vai acontecer aqui quando começarmos a bloqueá-lo, vamos deslocá-lo, retirar o meu turno de comando da grelha, flutuar e talvez alinhá-lo com a última coluna. Ok, então eu estou feliz com isso. Então vamos fazer disso um símbolo. Então, certo, clique e eu vou fazer um símbolo. E agora posso lembrar que, a qualquer momento, se quisermos dar uma opção na página inicial, podemos fazer disso uma opção na página inicial. Mas eu acho que é apenas um simples nós temos que saber quem estava logando primeiro. Então vamos tentar dar-lhes menos opções. O melhor 13. Design de aplicativos para móveis - tela de casa de usuário: antes de eu ficar muito animado e começar a fazer a piscina hambúrguer deslizar para fora informações. Eu provavelmente quero terminar esta página de orçamento primeiro para que eu possa copiá-lo e colá-lo e ter minha animação e ter a mesma tela mostrada. Então vamos fazer isso agora. Vamos usar a grade de repetição para fazer uma página bem rápida aqui. Então eu tenho que criar algumas formas aqui, tipo de ser o seu orçamento. Vamos deixá-lo um pouco magro, porque teremos isso bastante em uma página para não termos que rolar. Você faz um pouco de uma pílula em forma, mas não muito. O que é legal é que pode manter pressionada a tecla de opção e apenas fazer, Ah, alguns quartos. Eu não tenho que arredondá-los todos para que possamos tipo de ter essa forma se acharmos que parece legal. Mas eu meio que gosto de tudo arredondado por causa da nossa marca. Tendem a ter esse tipo de trabalho, mas vou empurrá-lo para fora. Então é uma garota muito, muito sutil. Vou manter a minha fronteira, mas vou conseguir. Vamos fazer um cinza muito, muito claro ou um cinza escuro. Vamos fazer alguma coisa. Vamos torná-lo super fino. Você já tem. Gostaria de saber se eu poderia fazer um 0,5. Eu posso, sim. Então, eu só tenho uma fronteira muito, muito magra. Podíamos fazer uma sombra, mas não sei como isso vai parecer. Isto pode ser muito pesado para este tipo de design plano simples que vamos buscar. Vamos fazer disso um cinza claro. Não é bem branco. Isso é muito gritante. Então, apenas através de um pouco de um tipo cinza de dá-lhe uma aparência agradável. E então vamos colocar nosso primeiro número de cisplatina. Bem, o que poderia ter que preencher algumas adivinhações? Aqui você colocou 12.000 porque pode ser sua conta bancária. Talvez ele seja Oh, sério? Bem, eu faço tipo de cara e vamos fazer provavelmente precisaria definir, hum, uma cor aqui para um cinza escuro. Então vamos em frente. Acho que temos um aqui, então vamos adicionar esse aos nossos estilos globais. Estou apenas a clicar no nosso cinzento e estou a adicioná-lo aos nossos activos de cor aqui, e eu poderia ser capaz de tornar o nosso tipo dessa cor. Isto vai ser o equilíbrio dele, e depois vamos aguentar. Opção. Esta será a conta bancária número um. Então agora precisamos fazer o tipo pequeno o suficiente onde podemos caber um nome de conta bancária longo. Porque se projetarmos um aplicativo e alguém tiver um nome de conta bancária muito longo, isso pode estragar todo o nosso design quando começarem a desenvolvê-lo. Por isso, temos de ser flexíveis e ser capazes de ter nomes longos em nomes curtos e ainda fazê-lo funcionar tecnicamente bem. Temos que pensar sobre o lado do desenvolvimento quando estamos fazendo esses belos projetos para que seja prático. Vamos fazer isso ainda menor. Vamos tentar 16. Há uma conta bancária. Um. Vamos tentar. Podemos ousar isso ou enfraquecer negrito. Vamos ter um pouco de contraste. Nós temos uma fina Vamos fazer isso ser ousado. Bem, que tipo de gosto? Talvez não seja uma escola. Vamos tentar um meio metálico estavam apenas experimentando com design. Vamos ter algum tipo de elemento de design que divide que poderíamos colocar uma barra aqui para separar os elementos onde podemos pegar uma caixa sólida. Tire a borda e podemos enviar isso para trás para que o tipo fique na frente dela. Tem um pouco de divisão aqui. Sabe, isso pode ser uma opção. Faça os mesmos cantos arredondados. Vá em frente, faça com que corresponda perfeitamente. Vamos trazer a fronteira de volta. Vamos torná-lo a mesma metade, meio ponto, tamanho e torná-lo mais suave ou mais escuro e apenas obter uma opção hold down. Estou apenas criando a mesma curva que a que está por trás dela. Então isso pode trazer contraste. Podemos fazer em vez de um Phil branco que poderia até fazer isso são cinza escuro, Phil. E que isto seja verde. Então pode ser, uh nós poderíamos ter uma flecha que indica que aumentou recentemente. Então vamos em frente e obter um ícone de seta lá. E assim que desenvolvermos um desses, vamos usar a grade de repetição para criar todos eles em segundos. Então estamos gastando muito tempo fazendo este primeiro bar. Mas todos os outros bares acontecerão muito, muito rapidamente. Deixe-me ir e pegar um tipo de ícone de seta, ou eu posso desenhá-lo aqui em X D. Então vamos fazer isso para que possamos praticar. Desde que a Arpin Tool estava fazendo uma flecha simples. Nada muito excitante. Vá em frente, preencha isso e destrua a fronteira. Quem poderia fazer isso arredondado? Poderíamos fazer esta forma apelativa ir com o nosso tema. Então a pequena flecha que criei aqui não teria acabado com ele “A “tornou-o verde. Eu cliquei direito e fiz dele um símbolo. Então, se precisar lembrar dessa flecha, posso ir em frente e lembrá-la. Mas eu queria pensar nos fundamentos desta página. Então esta página vai ser para o orçamento. Portanto, é bom ser menos sobre suas contas bancárias em um pouco mais sobre seu orçamento diário . Então, para ah, orçamento para orçamento de alimentos para eletricidade. Então é isso que vamos criar aqui. Então eu comecei a criar essa primeira pequena caixa onde ela residiria, e o que você tem que pensar é que você tem que pensar sobre o processo de desenvolvimento quando você está fazendo o processo de design. Então eu tenho que pensar que este $150 poderia subir para US $10.000 então precisamos ter certeza de que há espaço suficiente para essa quantidade de dígitos para caber nessa área. E a mesma coisa por aqui. Poderíamos ter muito tempo. O usuário poderá personalizar o nome do orçamento. Mas podemos sempre limitar esses personagens. Então, podemos precisar limitá-lo a quaisquer personagens de cuidados condenados nesta área. Ou podemos fazer o tipo de rosto menor e tipo de ser capaz de ter um prazo mais longo. Então nós temos que pensar sobre isso é que eu sei que muitas pessoas fazem esses belos desenhos com essa grande tipografia agradável, mas eles não estão pensando em nomes de formulários mais longos que têm que se encaixar nesses pequenos espaços. Então eu vou ir em frente e selecionar tudo isso é uma unidade e o que é ótimo sobre a resposta do redimensionamento, que é que eu tenho que clicá-lo bem aqui como eu poderia fazer isso mais longo, e ele vai automaticamente redimensionar ir em frente e torná-lo por mais tempo e veja como ele está se ajustando automaticamente. Então eu vou ter um pouco de margem à direita e à esquerda para que eu possa aproveitar o máximo de imóveis de tela possível. Então eu poderia encaixar tantos personagens para o nome aqui. Alguns apenas um agrupando esses elementos e deslizando-os de volta. Ok, então isso vai nos dar um máximo de espaço para talvez mais dois dígitos aqui. E então eu posso ter um nome bem longo aqui. Então, se eu me sentir 100% feliz com isso, podemos começar a fazer a grade de repetição. Então deixe-me obter um pouco mais de margem aqui à direita. Ok? Estou usando meu painel de alinhamento aqui para ver se tudo está alinhado. Como eu gosto. Ok, então eu vou em frente e agrupar todos os quatro juntos, certo? Clique em e agrupe. Então agora isso é uma unidade. E aqui é onde eu adoro usar para repetir grade. Então eu poderia usar a grade de repetição e ir em frente e criar tantos quantos eu acho que eles teriam no orçamento. Vou segurar as colunas e entrar em colapso que eu quiser. Eu não quero ter que apertar o espaçamento. Então, talvez por aqui, vamos fazer mais uma. Podemos sempre apagá-lo mais tarde. Ok, então agora isso é agora. Um grupo Então, se eu quiser editar estes individualmente, eu apenas clique com o botão direito e eu vou despreparar a grade. E agora eu posso voltar e mudar alguns desses dois títulos diferentes e para números diferentes ter um pouco mais de realismo. 14. Design de aplicativos em celular - tela de casa - Part2: Então eu passei alguns minutos pensando sobre a funcionalidade de cada barra em cada linha de orçamento, e eu queria tipo de criar alguns detalhes. Por isso, queremos que o orçamento permaneça, mas também queremos ter aqui o orçamento total. Queremos ter uma indicação para que alguém possa mudar o orçamento total. Mas também queremos ter uma indicação de onde eles podem clicar e mostrar quem está gastando o orçamento, a esposa do marido. Então nós poderíamos ter duas pequenas indicações diferentes ou ícones que vamos precisar criar para cada barra antes de ir para a grade de repetição e começar a repetir tudo. Quero que esta linha seja perfeita. Então eu vou e tipo de pegar a ferramenta pin, e eu talvez precise ir para o ilustrador para fazer um ícone mais elaborado em outra data. Mas vamos em frente e criar uma espécie de seta que poderia indicar que você poderia aumentar ou aumentar o orçamento. Então talvez apenas uma pequena seta, assim como criamos antes, faça girar em torno da tampa, talvez torná-la um pouco menor, apenas uma pequena indicação de onde eles podem sentir que eles podem clicar sobre ela e mudá-la. Talvez se fizermos um verde limão, ele se destaca um pouco melhor. Aquela ferramenta conta-gotas talvez pudesse provar dessa forma. Ok, então isso é uma espécie de indicação onde eles podem passar o mouse sobre e eles podem mudar o orçamento total . E agora precisamos de mais um indicador para ser capaz de clicar para que isso possa entrar em outro sistema de menu que pode mostrar todos os itens alimentares que foram gastos tanto por Bob quanto por Sarah . Então agora queremos ter transações detalhadas aqui na comida. Então só precisamos dar um pouco de espaço para os dois. Tenho que me trocar. Ele está delimitando caixas, então eles não estão ocupando tanto espaço. Mas deixe-o onde eu possa ter títulos mais longos bem aqui. A mesma coisa com o orçamento. Queremos uma linha que à esquerda aqui em baixo para que pudéssemos fazer transações detalhadas e ir em frente e pegar o símbolo. Ainda não o tornei um símbolo. Eu meio que criei o ícone. Queria torná-lo global ainda. Talvez apenas fazer um verde Eu acho que é para as fronteiras serão. Faça um preenchimento. Deixe-me fazer uma fronteira. Pegue a ferramenta conta-gotas e prove este azul. Lá vamos nós. Poderíamos fazer isso aparecer um pouco mais. Poderíamos adicionar outra casinha por baixo. Vamos fazer uma fronteira muito pequena para fazer um 0.5 novamente, e eu poderia adicionar uma sombra para efeito. Mas não sei se estou gostando muito disso. Vamos fazer a forma da pílula e vamos enviar isso para trás para o sistema de camadas. Eu realmente quero que isso apareça, então vamos ver. Tente, Alinhe. Vamos diminuir o zoom, ver como isso está parecendo. Podemos precisar fazer o tipo um pouco maior para ter um meio sem luz usando e vamos fazer oito. Eu realmente quero ter certeza que as pessoas saibam que é onde eles podem ir para transações detalhadas. Sim, vamos ver como isso parece. Vamos clicar com o botão direito. Vamos agrupar isto e vamos fazer a grelha de repetição. Vamos para a grade de repetição e vamos apenas puxar para baixo. É bom replicá-lo, e nós vamos subir aqui e mudar as colunas e vamos replicar talvez mais dois bem ali. Acho que está ótimo. Então eu vou passar alguns minutos e tipo de ajustar alguns desses diferentes aqui , para que não diga comida uma e outra vez. Tem um orçamento mais realista. Então estou começando a preencher todos os detalhes para tornar isso o mais realista possível. Então eu mudo tipo de categorias, e agora eu tenho orçamentos realistas específicos. Então eu vou querer chegar a um total aqui em baixo. Então vamos em frente e fazer este logotipo um pouco menor. Talvez coloque isso para a direita. Eu não poderia precisar de mais curso imobiliário. Também podemos clicar em nosso quadro de arte e fazer rolagem vertical e ser capaz de indicar que você não tem que manter tudo acima da dobra. Poderíamos ter uma opção de rolagem mais longa, Então não se preocupe muito com imóveis, mas eu pessoalmente, Eu gosto de caber tanto quanto eu posso em uma tela. Você não precisa rolar, então vamos ter uma área total. Então, vamos apenas ir em frente e provar. Deixe-me despreparar este. Vá em frente e segure. Opção, só vou provar o meu número total. Eu vou fazer isso branco e, claro, todo ousado. Então isso realmente se destaca entre os outros. Vamos fazer um preto condensado pode parecer legal. Vamos secar isso é tentar um ousado Vamos torná-lo um pouco maior em tamanho. Então vamos tentar 37. Vamos diminuir o zoom para que você possa ver como ele fica. Vamos torná-lo um pouco menor, talvez 32. Isto vai ser o nosso total, por isso podemos ir em frente e provar isto. Traga isso para baixo e vamos fazer isso não tão grande. Vamos fazer com que 30. Poderíamos tentar a linha apenas para ter um contraste com suas cores. Ampliar. Vai ser total. Então, vamos ter que descobrir que estamos apenas recebendo uma estimativa por enquanto. Então vamos apenas dizer que eles gastaram em torno de C 405 106 7 Soluçar cerca de US $1400 ou assim. Vamos apenas dar um palpite aqui. Poderíamos descobrir o valor real, e eu vou em frente e copiar o texto menor puxado para baixo opção. Agora nós vamos dizer que eles gastaram para 14 50 restantes fora de digamos que seu orçamento total foi de 2200 meses. Vamos precisar fazer isso maior e mais ousado. Então vamos fazer disso um peso médio. Vamos fazer 12 pontos e vamos torná-lo branco. Ok, então há a nossa primeira página de orçamento para ele para Bob. E então o que vamos fazer era fazer nossa primeira pequena animação. Vamos fazer com que este sistema seja viável. Então eles então Bob clica em, ele faz logon Esta é a tela inicial dele. E agora ele quer ter outras opções depois de ver seu orçamento. Nós também vamos vincular botões detalhados do botão de transação. Ias ao menos fazer dois deles? E isso vai clicar em uma tela diferente que terá as transações detalhadas para alimentos . E também, vamos ter mais um onde podemos mudar o orçamento. Talvez seja um controle deslizante que aparece ou algo assim, mas vamos descobrir essa jornada do usuário enquanto continuamos a projetar este 15. Design de menu de Popout: Agora vamos fazer o nosso hambúrguer animado, muitos que vão aparecer só para o caso do Bob querer fazer algo além de clicar nestes botões. Agora vamos fazer o nosso hambúrguer animado, muitos que vão aparecer só para o caso do Bob querer fazer algo além de clicar nestes Ele quer voltar para o sistema de menu, então vamos criar necessidade de criar outro quadro para ser capaz de fazer isso. Então há uma maneira fácil de fazer isso e sentar-se tendo que criar um novo e copiar e colar como eu tenho feito. Você poderia clicar com o botão direito do mouse e copiar e, em seguida, baseado Boom, exatamente assim. E temos que pensar em nossa jornada de usuário. Então este é ele seguindo em frente através de sua jornada de usuário. Então vamos ser capazes de fazer este menu de hambúrgueres deste lado. Então aqui está o truque para isso, e eu posso precisar de um pouco mais de espaço, então eu posso precisar deslizar isso para o sul para o sistema de menu. Vou seguir em frente e manter tudo isto junto. Vou clicar com o botão direito e agrupá-lo. Então, aqui está o truque para animar automaticamente. Eu vou primeiro fazer meu pequeno sistema de menu pop out e vamos em frente e fazer que ela quebra cor nós poderíamos torná-lo um pouco transparente, mas vamos apenas mantê-lo uma cor sólida por agora. Eu só vou puxar um tipo genérico aqui. Vai segurar a opção e trazê-la para cima. Este será Link um link para Link três e vamos ter apenas três links simples. Bem, vamos fazer um link para por que não preencher este menu um pouco? E vamos colocar um pouco mais de deixar ou espaçamento entre os personagens, que é bem aqui, isso será espaçamento suficiente. Então, como um link para o link três, não temos que ter o menu de hambúrgueres ir até o fim. Poderíamos tê-lo aqui em baixo, ter um pop out, e talvez também queiramos trazer nosso ícone conosco para que eles possam fechá-lo. Certo, então tem um cardápio. Então o que vamos fazer agora é agrupar tudo isso no menu, juntar um grupo e deslizar para aqui e tudo aqui. Vamos agrupar todas as telas originais. Vamos pegar um grupo e tirá-lo do quadro de arte e deslizá-lo para cima bem aqui, bem onde queremos que ele se sobreponha. Então isso vai dar a aparência de que isso está saindo e animação e deslocando aquela tela sobre, Vamos em frente e fazê-la animar. Vamos subir aqui até o topo. Isto vai ser o que inicia o deslizamento para a esquerda, e vamos clicar nele até aqui, e vamos fazer uma transição. E queremos que o conteúdo deslize para a esquerda. Então, queremos que isso faça a transição para isso, então isso vai aparecer para a esquerda. Então vamos fazer um empurrão astuto para a esquerda. Temos um empurrão à esquerda e vamos fazer um fácil de entrar e sair, o que vai ser uma boa transição. E vamos fazer isso muito rápido. Então vamos apenas fazer um 0,1 segundos e queremos este link de volta e ser capaz de recolher o menu que acabamos de trazer para fora. Então vamos trazer isso de volta aqui, e eles iam fazer a mesma coisa, mas em vez de empurrar para a esquerda ou o quê? O item para empurrar o menu de volta para a direita então, em vez de esquerda, vamos fazer, certo? Então tem que suportar conexões aqui, que vai ser um slide para a esquerda aqui, que vai ser um slide. Certo. Então, agora vou clicar aqui. Tão bom ver a minha pré-visualização a partir deste quadro de arte particular em vez de ter que voltar aos começos e clicar aqui, ser capaz de pré-visualizar a partir dessa página. Então vamos ver como isso parece. Vamos clicar que desliza para fora bem com um clique para trás e que desliza para trás. Então você tem um slide, certo? Deslize para esquerda Então, isso parece muito bom. E então nós poderíamos até pegar essa página neste quadro aqui, e nós seremos capazes de vincular essas duas páginas diferentes em todo o nosso design. Mas nós só queríamos mostrar ao cliente o tipo de como o aplicativo ficaria em termos do sistema de menus saindo, e poderíamos tornar isso um pouco bonito. Faremos isso em seguida e poderemos continuar com o design do nosso aplicativo. E eu fui em frente e baixei alguns ícones e o personalizei um pouco para nossa marca e nosso esquema de cores. Não vou usar isso como pequenos ícones de agachamentos. Essas grandes pontuações de crédito do planejador de orçamento serão este ícone mais tarde também. Um pouco menos. Enviar ícone de mensagem e alternar usuários. Eu gostaria de pegar algumas flechas de cruzamento, mas eu sempre posso substituí-las em outra hora. Só vou fazer isto um pouco mais pequeno. Agora que os estou a ver. Acho que não preciso dele tão grande. Basta ter um pequeno ícone para ajudar o usuário a quebrar essa informação e saber o que é . Então vamos ter algumas linhas divisórias. Então, vou dar uma voltinha aqui. Só vou fazer algumas linhas dividindo uma vez que eu tiver. Como eu gosto. Eu sempre posso apenas manter pressionada opção e arrastado para baixo outro espera opção. E outra coisa é, nós poderíamos criar o topo e a mensagem. E o que poderia realmente fazer uma grade de repetição sobre isso também? Então, se quiséssemos criar uma caixa e, em seguida, apenas repetir a grade todo o caminho para baixo e eu quero adicionar um pouco de contraste, então eu estou apenas mudando alguns desses Taub velho ser a primeira palavra poderia ser negrito. Então agora temos um pouco mais de um sistema de menu polido. Vamos continuar e salvá-lo e ver como isso funciona Quando jogamos, ele ainda deve permanecer o mesmo, e eu também adicionei uma sombra para fazer com que pareça que está se sobrepondo. Então você tem essa barra cinza de cima e você percebe bem aqui. Essa bela sombra ajuda a trazer alguma definição para o menu pullout. Vamos voltar aqui e ver como isso parece. É o press play, e nós vamos ter que sair e então fazê-lo estourar bonito. Então agora só precisamos criar todas essas páginas, e Lincoln provavelmente não vai fazer tudo isso nesta aula. Mas poderíamos pelo menos ligar um desses e um de cada um, talvez um dos detalhes em transações e um do orçamento restante apenas tipo de fazer alguns desses para tipo de ver como esse processo funciona e como ele poderia realmente tornar isso um totalmente funcional um protótipo 16. Menu de transmissão: Então agora temos o nosso menu de puxar para fora. Vamos em frente e fazer algumas dessas outras páginas que podem começar a vinculá-las. Então temos esse tipo de conexão. Mas e as transações detalhadas? O que acontece quando Bob ou o usuário clica em transações detalhadas? Bem, o que eu gostaria que o aplicativo para fazer é quando você clica em que mostra todas as transações recentes para alimentos. Então vamos dizer que estamos fazendo o 1º 1 e também diz quem gastou o quê. Então, Sarah gastou? Então Bob gastou? Para que quem quer que você compartilhe esse hap, você será capaz de ver quem está usando o orçamento e como isso? O que eu gostaria de fazer é enviar isto para outra página. Eu me pergunto se eu não posso fazer uma pequena caixa suspensa animada para mostrar Hum, então você não precisa sair desta página inicial. Você pode fazer algumas coisas e ver algumas coisas sem ter que mudar para outra página. Então vamos fazer algo parecido com o que fizemos com isso e fazer um tipo animado de pop out box. Então vamos pegar isso e replicar. Então eu estou clicando no quadro de arte e eu vou copiar e depois colá-lo para a direita para que nós vamos manter tudo intacto, mas nós vamos fazer um pequeno tipo de caixa que vem abaixo tipo de mostra todas as transações que aconteceu com alimentos e talvez um pequeno indicador de seta onde eles podem carregá-lo para uma nova página se eles querem ver todo o histórico. Então agora eles têm uma pequena caixa desmontável. Quero ter certeza que esta comida está em cima daquela pobre caixa. Então eu fui em frente, criei um grupo fora disso, e eu posso ir em frente e fazer o comando no dedo do pé direito. Envie-o através do sistema de camadas, colocando para fora colocá-lo em cima, ou você pode descer aqui para suas camadas e você será capaz de ver todas as suas camadas com estes objetos específicos que você verá grupo e então você pode deslizá-lo todo o caminho para cima . Então é a camada mais superior que eu poderia fazer meu pequeno atalho, e eu poderia vê-lo subindo através do sistema de camadas todo o caminho até o topo. Sim, isso vai desmoronar. Certo, então agora precisamos descobrir qual a cor que queremos fazer. Vamos trazer nosso painel de ativos e brincar. Nós poderíamos fazer isso. Ah, menu suspenso escuro e tem cores mais claras. Ou podemos tipo de amostra. Não tenho um cinza claro nos meus bens. Vamos clicar nesta cor aqui. Vou adicionar essa nota leve na minha bunda. Oh , acrescentou um monte deles. Eu realmente só quero um. Então deixe-me trazer uma caixa aqui quando fizermos isso. Phil, deixe-me pegar essa cor. Derrube a fronteira agora. Eu tenho essa amostra e clique com o botão direito e fazer adicionar cor aos ativos. Agora temos um tipo de cor cinza claro para que pudéssemos fazer essa cor sair, o que eu acho que pode parecer o melhor. Vamos fazer uma bela borda magrela 0,5 novamente. Agora vamos fazer um pouco de sombra. Acho que vamos precisar dessa sombra para realmente aparecer sobre as opções restantes. Então, esta será a sua informação detalhada. Vamos provar. Vamos em frente e eu sou o grupo isso. Vou provar esta comida. Mantenha pressionada a opção. Vamos ter um grupo mais uma vez. Bem feito. Opção arrasta. Este será o nosso primeiro alimento e vamos fazer a grelha de repetição para não termos de continuar a fazer várias e mais e mais do caranguejo uma linha aqui fazer uma espécie de caixa para a nossa primeira transação. Agora você faz isso um belo cinza claro. Então esta será a transação um. Então, digamos que foi o leão da comida. É uma mercearia onde moro. E digamos que não poderia desmoronar isso. Pegue essa opção aqui e vamos entrar em colapso para que não fique no nosso caminho. Faça isso cinza escuro. E digamos que eles gastaram 55 27 apenas alguns números aleatórios. Vamos torná-lo menor. Então há contraste entre este principal e este, então vamos torná-lo menor. Mas Boulder. Então vamos fazer 18. Mas vamos fazer um pedregulho esperar todo o caminho ficar quites. Há linha de comida, mas também precisamos ter uma indicação de quem é que gastou aquele item indo rolar para baixo aqui. E este vai ser Bob quem fez isso. Então Bob Smith fez essa transação. Mas vamos fazer isso menor e ousado. Faça a nossa mais ousada espera. Nós temos e torná-lo ainda menor, talvez 12. Vamos fazer disso uma cor que vai realmente aparecer. Vai torná-lo dessa cor. Então agora isso vai indicar que foi Bob quem gastou isso e vamos fazer um par de mais e então vamos fazer a grade de repetição deles. Então vamos ver. Pergunto-me se isso ficaria bem. Negrito. Isso é demais. Muito forte. Certo, então vamos em frente e clicar em todos esses itens. Vamos agrupar estes juntos, e vamos trapacear um pouco e fazer a nossa grelha de repetição. Nós vamos arrastar para baixo, sobre, sobre, sobre, sobre, sobre. Vamos fazer, hum poderíamos fazer cinco transações. E vamos desmoronar o espaçamento entre ele até que esteja bem aqui. E depois vamos querer ter um pouco mais de opções. Nós vamos ter isso para baixo, e eu vou fazer uma pequena caixa aqui no final, e eu não tenho certeza de que cor ainda, mas eu preciso que ele seja alto contraste. Talvez o preto e isto tenha uma flecha simples, por isso vou em frente e derrubar isto. Obter a minha ferramenta de caneta, apenas uma pequena seta para que eles possam clicar mais para obter todo o histórico das transações. Faça essa cor de limão. Vamos fazer a borda cal, não para torná-la arredondada. Capas arredondadas. Vamos torná-lo mais espesso. Não tão grosso, talvez três e talvez dois. Aí está o seu pequeno indício de que você poderia obter aquele Go centralizado alinhado. Isso é uma pequena indicação de que eles poderiam fazer mais ou você também pode brincar com cor. Poderíamos ter um pouco de fumaça ou ver todas as transações para que possamos ter um visual, bem como uma palavra. Vai derrubar isto. Vamos trazer isso para cima no sistema de camadas. Só estou segurando agora o comando e o colchete direito. Eu posso ir para camadas e fazer isso para tornar isso menor. Estes eram todos esses pequenos detalhes que temos que entender. Então veja todos os detalhes, e talvez esta seta, em vez de descer, seja para a direita. Vamos olhar isso para a direita e torná-lo menor. Vamos fazer um tallix que você não tem nenhum itálico acontecendo. Então vamos fazer, hum, metal vivo e vamos torná-lo um 10. É bom por enquanto, que eles pudessem ver todos os detalhes, então isso dá-lhe uma ideia. Então esses são Bob Smith e isso pode ser isso. Diga, esta é Sarah Smith, e vamos fazer uma cor diferente aberta. Posso precisar de um dedo diferente destes. Então, agora que estou feliz com isso, deixe-me agrupar o Grid e agora eu poderia editar cada um deles individual. Vamos fazer isso com selecionar esses dois e fazer uma sombra. Lá vamos nós. Isso faz com que pareça um pouco mais de três D e em camadas. Não tenho 100% de certeza sobre o vermelho. Realmente ajuda visualmente tê-lo destacado. Eu só estou me perguntando se é um pouco diferente demais do esquema de cores que temos indo, então nós sempre podemos mudar essas cores com bastante facilidade. Acho que preciso irritar isso para acessar para que você possa mudar isso para o limão, que você não pode ver muito bem. Eu poderia mudar para o verde, e você poderia dizer aos diferentes usuários. Vamos fazer isso. Acho que o vermelho foi um pouco demais. Bem, muito chocante. Mas é por isso que testamos as coisas para ver se funcionam. Então agora vamos fazer isso legal e animado. Então vamos entrar no modo protótipo. Então, agora que estamos em movimento protótipo, que é ir em frente e isolar este botão porque este vai ser o botão que vamos clicar para ser capaz de carregar este medo em particular. Então, o que? Este é o grupo dele juntos, então só precisamos clicar com o botão direito e agrupá-lo para termos acesso ao Justice Button. Então esse é o botão. Queremos que o usuário pressione para ser capaz de ir para o lado, para ser ir para cima e clicar aqui. E nós vamos ver se nós não podemos fazer uma animação automática e isso vai ser no clique para que o na torneira grande facilidade em entrar, facilitar para fora. Vamos testar isso e ver como fica. Vamos clicar no nosso não está entediado aqui para que possamos começar a nossa pré-visualização lá. Perfeito. Então quase parece que desliza para fora, não é? E agora tudo o que temos a fazer é ter este botão clicar de volta. Por isso, agora estou preso. Não posso me mudar para lugar nenhum. Então o que queremos fazer é ser capaz de isolar este botão e ligá-lo de volta aqui . Então vamos ver como isso parece. Vamos em frente e clique aqui e jogar. Então, agora vamos clicar sobre. Eu tenho meu menu suspenso e eu quero clicar para trás e eu estou bem, bom para ir. Então, eventualmente, teremos que clicar sobre todos os detalhes, mas provavelmente não nesta classe em particular. Mas você iria continuar a fazer o mesmo, criar outro, ficar entediado e ser capaz de enviar isso em seu caminho para aquela tela particular. Então deixe-me apenas em revisão, apenas voltar para o que eu fiz. Eu fui em frente e fiz uma animação automática naquele, e eles não facilitaram entrar e sair e em um clique e então apenas fizeram a mesma coisa de volta. Então agora vamos salvar e ver o que temos até agora para a viagem do usuário chiado e ver se tudo está ligado como nós gostamos. Então vamos ver o que temos aqui, e até agora temos a viagem de silvo. Ele começa aqui. Ele seleciona o perfil dele. Ele vai para a tela principal. Você pode clicar em transações detalhadas e ele recebe um menu pop-up. Ou ele pode subir e selecionar este menu superior e pegar uma caixa de puxar, e os próximos passos serão descobrir onde aqueles vão que não vamos fazer. Todos eles vão apenas fazer um. E então também o que acontece quando ele clica aqui embaixo ou qualquer outro botão restante que precisa ser selecionado e, claro, provavelmente preencherá o dela, que pode ser uma cópia do Hiss. Mas talvez ela tome uma direção diferente e faça algo diferente aqui embaixo com esses botões, e ela tem uma jornada de usuário diferente. Então ele faz apenas para tipo de mostrar o cliente em uma grande variedade de diferentes trilhas de usuário. 17. Sintonia e vinculação ao nosso design: então clique no jogo e vamos ver o que acontece. Então, vamos clicar no Bob. Então, dê um clique quando tivermos que entrar. E digamos que queremos fazer o menu, ver o que é Check it out. Ok, é rápido de volta e vamos descobrir quais são as transações detalhadas. Ok, excelente e ainda cozinhar de volta. Então foi isso que fizemos até agora e algumas coisas que poderíamos fazer. Então, queremos trocar. Usuários, talvez possam ter isso ligado para voltarmos para a página inicial. Poderíamos talvez fazer esse logotipo de 10 centavos clicável de volta para que não tenhamos que ir até aqui e mudar de usuários para voltar para a página inicial. Poderíamos até ter a foto do perfil Hiss clicável de volta para a tela inicial de login, ou poderia ir para configurações. Então essas são todas as coisas que vamos ter que descobrir como é esse fluxo de usuários. Então vamos dizer que queremos que Teoh tenha alternar usuários. Vamos em frente e no Grupo. Eu acho que isso ainda é todos agrupados, então vamos dizer que queremos ter este botão de usuários switch agradável. Então eu tive que separar estes deste grande grupo e tê-lo por conta própria. E eu quero ir em frente, ter isso ligado todo o caminho de volta à tela de seleção, e nós queremos apenas fazer uma transição. Só queríamos ser um simples regresso. Podemos fazer deslizar para baixo ou para cima. Vamos fazer um empurrão e ver como isso funciona. Vamos em frente e pré-visualização. Ok, estão no Bob. Vamos para a página dele. Vamos para transações detalhadas. Isso é ótimo. Vamos para o menu. Vamos mudar de usuários e voltamos para a tela e então podemos ir para a jornada dela . Então, antes de continuar, quero ter certeza de que tudo está exatamente como eu gosto. Porque se começarmos assim que começarmos a fazer mais quadros de arte estariam copiando, colando e replicando tudo isso. Queremos ter certeza de que está bom agora, então não temos que voltar e nos trocar. Muitos estão em direção a mais tarde. Então eu vou passar os próximos 10 minutos tipo de ajuste fino minhas seleções. Eu já fiz algumas mudanças aqui. Tio não tinha lhe mostrado onde meu drop down e queria ter a capacidade de mostrar aumentos no orçamento causar outro parceiro ou marido ou esposa ou quem está unido neste aplicativo com você que também está compartilhando seu orçamento. Eles poderiam aumentar o orçamento em uma determinada categoria. Então eu realmente queria destacar que como algo que foi separado de todas essas outras transações é algo especial. Então eu fiz uma espécie de contraste maior, fundo diferente do branco e meio que usei uma pequena flecha. Fizemos algumas lições atrás e depois queríamos fazer um tipo de perfil escolhido por algum tipo de personalidade. Teoh para isso para que eles pudessem Não. Ok, essa é a pessoa que aumentou o orçamento e também caiu, acrescentou um pouco mais. Solte a sombra aqui para que você pudesse vê-lo por cima um pouco melhor. E eu fui capaz de fazer uma prévia. Então, o que, aqui para compartilhar? E eu fui publicar um protótipo que eu era capaz de testá-lo no meu telefone, e eu percebi que eu preciso fazer algumas coisas um pouco maiores e música ajustar algumas cores. Também neste pequeno link é muito pequeno. Então o que eu precisava fazer é ligar toda essa seção branca ah para as transações detalhadas para obter o menu pull down em vez daquele pequenino. Mas foi muito difícil pressioná-lo com o meu dedo. Então, cisalhamento indo para o compartilhamento, compartilhando o protótipo de envio vinculado a si mesmo, Abra-o em seu telefone. Como é que funciona? Como é que se sente? Você precisa fazer botões maiores? Então você precisa voltar e fazer alguns testes vindo aqui e fazendo isso, compartilhando opções e obtendo esse link ou até mesmo exportando-os como um J peg aqui. E então você poderia apenas carregar essas fotos no seu telefone e tipo de medidor. O tamanho dos botões é muito grande ou muito pequeno. Então eu pude voltar e vincular toda esta seção em vez daquele pequeno botão para as transações detalhadas. Então agora eu sinto que esse tipo de símbolo de dinheiro ousado e o tipo de luz do tipo OC reutilizado para os numerais era muito contraste, e parece um pouco volumoso, então eu queria simplificá-lo. Então eu meio que mudá-lo para um Helvetica novo 22 em um peso médio em vez disso. E eu fiz um pouco menor para que eu pudesse ter espaço para caber em números maiores. Então eu quero ser capaz de mudar tudo isso, e isso é um pouco esmagador. Já tenho três conjuntos disto. Então vamos ver como podemos mudar um pouco mais rapidamente usando nosso painel de ativos. Então eu tenho isso exatamente como ele gosta. Então eu vou ir em frente e clicar com o botão direito, e eu vou adicionar esse estilo de personagem. Ok, então eu adicionei o estilo de personagem. Então isso vai ser agora Vamos chamar esse dinheiro na lista. Fundo escuro, o que quiser. Um título que. E eu vou ser capaz de selecionar tudo isso, e eu acho que eu sou. Agrupe-o do meu grande grupo aqui do Rose. Eu vou voltar e clicar nele, e é magicamente mudar para que eu possa ir em frente e mudar tudo rapidamente. Vou mudar tudo isso e mudá-los aqui e ali estavam prontos para seguir em frente . Eu fiz uma outra mudança como eu acabei de adicionar uma pequena caixa, pouco diferentes grandes caixas coloridas para adicionar algum contraste entre as diferentes linhas para que eles não se parecem com uma grande, longa lista que eles vêem mais como caixas. E as pessoas podem quebrar essas quatro opções melhor e parece um pouco melhor assim. Agora que sinto que também encontro tudo, vou terminar de fazer isso bem rápido, e então podemos passar para o próximo slide, que será este pequeno botão aqui. Queremos fazer isso ativo, fazer aquele slide e fazer mais um, e então nós vamos estar embrulhando para que seja capaz de selecionar tudo e mudar tudo para este estilo global aqui. Digamos que eu queira editá-lo. Eu fiz três Rose diferentes me levou uns minutos, então não me levou muito porque eu apenas selecionei. Tudo passou para o meu estilo de personagem, mas vamos dizer que eu quero mudar de novo. Tudo passou para o meu estilo de personagem, Você tem que selecioná-lo para mudá-lo novamente. Não, tudo que você tem que fazer é passar para seus estilos de personagem estão indo para a direita. Clique no e eu vou editá-lo. Este é o que estamos usando para todos esses números. Digamos que eu quero clarear, são escuros nele. Eu poderia fazer isso. Vamos pegar a ferramenta conta-gotas e provar uma cor diferente onde eu possa pegar talvez o verde . Isso é o que é tão maravilhoso. Uma vez que você liga tudo isso ao Stiles é, você não tem que sentar lá e selecioná-lo tudo novamente. Eles já estão lá para você. Então deixe-me clicar com o botão direito e editar isso novamente e podemos obter o número certo ou a sombra certa . Acho que tínhamos na sombra certa. Eu queria fazer isso ao vivo, então deixe-me pegar esse personagem e selecionar a linha. Mas também podemos mudar a largura e a altura e o tamanho. Então vamos dizer que eu quero torná-lo um pouco menor. Isso poderia torná-lo um pouco menor, que pode funcionar melhor para nós por termos certeza de que temos espaço para números mais longos, e também eu poderia voltar e clicar com o botão direito novamente. Vamos ver se consigo encontrá-lo aqui. Acho que desceu porque eu editei. Então agora, em vez de médio e talvez experimentar luz e poderíamos fazer ouro poderia vê-lo ir através de todo o meio página. Eu meio que gosto de BD hum e eu me pergunto se eu poderia mudar a lacuna. Parece que eu posso. Então eu quero mudar o espaçamento entre os números. Neste momento, há 66 pontos. Deixe-me mudar isso. Corte isso ao meio. Isso vai apertar um pouco mais o espaçamento, mais uma vez, deixando-nos mais espaço para termos números longos . Alguém, acho que algumas pessoas têm grandes orçamentos. Precisamos do dedo do pé. Pensa sempre nisso. Eu movi isso para fora do caminho para que eu possa atualizar e selecionar os números. E eu tenho este grupo faz um grande grupo e eu vou apenas deslizá-lo de volta e encontrar a posição certa porque nós não duplicamos este slide ainda. Então ainda podemos editá-lo assim que começarmos a duplicar. Vamos começar o medalhão no nosso olhar um pouco. Então este é um bom momento para fazer uma pausa. Obter alguma aprovação de alguém. O Senado aprovou as pessoas para garantir que tudo seja perfeito porque, à medida que nos aprofundarmos nisto, vai ser mais difícil mudar coisas pequenas mesmo com estilos globais. Como o posicionamento disso,não há estilo global para posicionamento. Como o posicionamento disso, Então, se tivermos isso replicado várias vezes, outros slides, teremos que mudá-lo principalmente. Não podemos realmente fazer uma posição, caráter, estilo ou ativo, então vamos acertar a posição. Podemos ter uma gota até aqui. Podemos deixá-lo cair no meio. Podemos pegar tudo para a direita, então eu meio que gosto de onde eu tinha antes. Acho que funcionou bem quando também nos certificamos de que isso está atrasado no sistema de camadas. Eu posso ir para o sistema de camadas aqui, e eu poderia mudar esse grupo porque agora ele está no topo, então eu poderia arrastá-lo para baixo para que ele estivesse abaixo da comida. Um. Vamos continuar arrastando ou eu só gosto de fazer meu pequeno comando e suporte. Mas quando você tem um monte de camadas, às vezes sendo capaz de ver visualmente todas as suas camadas, um funciona melhor para ser capaz de arrastar essas em torno Então agora eu estou pronto para ir. Sinto-me muito feliz com tudo. Vamos fazer nossos últimos dois e encerrar tudo. 18. Testando seu design no seu telefone: Então eu tenho meu link, o seu L. Eu enviei para mim e para o mensageiro, e eu fui capaz de abri-lo no meu telefone para tipo de testar os botões para ver se eles eram grandes o suficiente e apenas tipo de testar o protótipo. Isso é o que parece quando ele carregou seu navegador no seu telefone, e eu sou capaz de obter todo o sangue em opções. Então eu vou voltar para a opção de alternar usuário e, em seguida, meus muitos sistemas, vamos voltar para alternar usuário, e se você clicar duas vezes, você será capaz de ver todas as interações ao vivo. Então, se você quiser dizer a um cliente um clique duplo em um protótipo, você será capaz de fazer com que ele mostre todas as interações na página de suas vidas e vincule ervas 19. Linking de tudo: ligado um protótipo nota, e eu queria que o link quaisquer links restantes que temos disponíveis. Então eu quero ser capaz de vincular este centavo baixo, voltar para a página inicial ou voltar para a tela de opções ou algum outro tipo de tela de opções . Então sou apenas um protótipo. Modi ia arrastar e levar essas coisas de volta para a tela de login ou onde quer que seja. Eu gostaria de apontar para que tudo seja clicável, então isso pode voltar para aquele. A mesma coisa com aqui. Todos eles vão apontar para casa apenas um ponto. Não queremos que esse seja ativo. Não queremos que alguém clique acidentalmente nessa, mas as pessoas clicam intencionalmente no logotipo abaixo, então só queremos ter certeza de que eles clicam. Isso vai para algum lugar. Ou talvez não. E então vamos nos certificar de que selecionamos tudo e tudo está vinculado. Como nós gostamos parece um melhor, mas se você quebrar um por um, não é tão esmagador. Então temos essa ligação de volta. Temos este link em qualquer lugar Isso não parece que ele está ligado em qualquer lugar, então este é o nosso menu vai puxar para baixo. Este está ligado. Este é o que ligamos aqui para que ele deslize para fora. Mas também precisamos ter essa outra página como lá embaixo também. Então é aqui que poderíamos. Mapeamento é útil. Certo, então temos um empurrão. Então memorizou nossa última vida. Mas acho que para este, queremos fazer um slide. Foi o que fizemos por este. Podemos pegar um slide, um empurrão para a esquerda. Então este também será um empurrão à esquerda porque queremos replicar o mesmo empurrando esquerda o menu de hambúrguer deslizando para fora. Então empurre para a esquerda. Então essa está conectada. Agora é, eu acho que temos tudo sobre pequenas conexões e vamos fazer mais um teste. Este é Bob. Sarah, nós ainda não fizemos a Síria, então nós clicamos aqui no botão de volta aqui. Ele vai voltar. Mas fez uma espécie de deslizar para cima, então eu queria uma espécie de transição para que eu pudesse voltar e mudar que mais tarde nós vamos para Bob, clicar através e eu posso fazer isso e clicar para trás. Eu também posso viver esta tela, mas agora esta está conectada. Então, se eu quiser voltar para puxar o menu, eu posso. Então agora é tudo um ciclo completo com isso ligado. E agora acabamos de ser trocados. Usuários conectados. Então, agora, quando eu faço essa mudança de volta para a tela inicial e eu tenho um bom ciclo, por que você iria voltar para a tela inicial é clicar no logotipo e eu estou de volta. Então estamos prontos para o próximo quadro de arte. E desta vez vamos ligar um destes aqui em baixo, que vai ser a mesma mensagem. Nós queremos tipo de ir para essa idéia de. Ele passa por aqui. Ele é esse tipo de jornada que ele passa por sua personalidade de usuário. Ele meio que vem aqui. Ele olha para tudo o que quer para verificar a comida porque ele não olha. Ele tem muito restante. Ele clica em transações. Ele vai aqui. Ele vê que a esposa aumentou em 50. E ele está se perguntando por quê. Porque ele tem um grande orçamento sobrando. Então ele quer o tipo de mensageiro do dedo do pé. Então ele aparece aqui para o menu e ele quer enviar uma mensagem para tipo de comunicação sobre esse aumento de orçamento específico para que não possamos criar uma nova tela ou um novo quadro de arte. Então vamos duplicar um, vamos duplicar este. Vamos copiá-lo, para onde ir aqui e colá-lo. E ele notou que ele também copia os links do protótipo para que não tenhamos que gostar de todos eles novamente, vez de fazer a opção e arrastar. Não diz que apenas copia os gráficos, mas não copia os protótipos. Então esses protótipos de ar economizaram agora que eu era capaz de clicar na cópia do quadro de arte e, em seguida, colá-lo. Então vamos posicionar isso e parte do layout da história. Então vamos fazer isso em uma ordem. Então ele vai clicar aqui em sua página principal. Ele vai clicar em transações detalhadas primeiro, e depois vai mudar. Vamos arrastar isso por parte da jornada dele. Onde compartilhar o cliente. Coloque um pouco de espaçamento entre aqui. Ok, então ele vai clicar aqui para enviar uma mensagem, e há um bom clique na mensagem, e ele vai carregar esta tela. Então agora precisamos editar isso para ser uma tela agradável e mensagem. É 20. Tela de mensagem: maneira. Entrar muito fundo na placa. Precisamos pensar sobre o que essa página de mensagem vai implicar. Qual é o propósito deste sistema de mensagens? Bem, este é um aplicativo privado que é compartilhado um aplicativo de orçamento privado que é compartilhado entre tipos específicos de usuários. Então eu poderia ser capaz de falar uns com os outros sobre certas coisas orçamentais. E queremos ter certeza de que isso é privado e dentro do aplicativo, isso não apenas vincula fora do telefone e vai para o aplicativo de mensagens. Vai ser o seu próprio sistema único de mensagens de comunicação. E todas as mensagens de todas as mensagens serão excluídas após 24 horas para fins de segurança para que estes ar realmente grandes maneiras de enviar mensagens ao seu parceiro sobre finanças. E você não tem que se preocupar se seu telefone for levado. Não há nenhum tipo de coisa que seja sensível. Este será um aplicativo de mensagens privado. Agora que temos isso em mente, voltamos para a janela de design e começamos, então eu meio que deslizo isso para a direita, porque acho que não precisamos desses detalhes específicos . E então vamos pensar sobre o que vamos precisar. Não vou precisar disso. Talvez tenha 10 centavos aqui no meio. Nós também não vamos ser esse item. Mas o que vamos precisar é que queremos continuar a ter o nosso menu superior, ter alguma consistência com tudo aqui, ou podemos deslizá-lo para fora e ter mais espaço para mensagens. Tudo depende de como queremos projetar isso. Então, o objetivo deste aplicativo é ser muito simples. Então vamos fazer um design limpo muito simples. Basta ir em frente e fazer uma caixa de mensagem e vamos fazer alguns cantos arredondados todo o caminho ao redor. Então, basta clicar em segurar e vamos ver o que parece com um pouco de sombra. Vamos fazer mais uma sombra de elenco, então eu vou adicionar talvez um cinco e cinco. Então o eixo x e y ele vai ser mais lançado para fora, dá uma sensação de distância e tipo de borrão fora que sombra um pouco tendo em 16. Vamos fazer 11. Precisamos de uma fronteira? Não sei se ia sair da fronteira. Tente fazer isso limpo, e o que podemos fazer é quando terminarmos com esta bolha, podemos ir em frente e copiar para a próxima bolha. Vamos ter uma , conversa tipo bolha,uma dele e outra dela. Então este será um que foi anteriormente dela. E teremos um em que ele responda aqui com a resposta da nossa pequena história , onde ela aumentou o orçamento. Ele está perguntando, por que você aumentou o orçamento? Então o que podemos fazer é não precisarmos mais disso. Você sabe por quê? Porque vamos ter a bolha. Poderíamos ter algum tipo de imagem de perfil nas bolhas. Então o que poderíamos fazer é que isso poderia deslizar para cima e isso nos dará mais espaço para mensagens. Então eu ajudei a fazer um slide up animação, e talvez ele tipo de ir para o meio e manter isso no mesmo lugar exato. Teremos mais espaço para a parte das mensagens. Então esta será uma mensagem quando acabamos de dizer opções. Veja se temos Ram para uma segunda resposta. Nós também vamos querer ter uma bolha onde nós digitamos, então isso vai ter cantos arredondados. Faça disso uma pílula. Vamos precisar desenvolver alguns ícones para indicações de texto onde eles podem digitar. Ok, então esta será uma mensagem, e essa será a outra. Vamos pegar a resposta dele. Vamos em frente e fazer o comando e eu estou fazendo meu suporte traseiro direito para trazê-los para a frente. Ou tem muitas camadas acontecendo. Vá para o nosso painel de camadas e trazê-lo para o curso. Podemos agrupar tudo isso para que possamos agrupá-los em uma pasta diferente para que cada quadro de arte tenha sua própria pasta. Então nós temos todos esses diferentes para que ele possa aparecer na mensagem. E eu intitulei estes agora, então peçam menu e mensagem. Então agora eu sei qual quadro de arte é qual, como um duplo clique para entrar lá e há todas as minhas camadas e aquela nossa placa. Certo, então agora vamos descobrir o quão grande queremos que as imagens de perfil sejam? Vamos tirar a sombra disso. Acho que não precisamos disso, e precisamos tê-la. Então vamos em frente e agarrá-la. Só vou segurar a opção e arrastá-la. Faça com que ela seja do mesmo tamanho. Também queremos lembrar de separar grades de vez em quando. Então, mudança de comando, aspas. Apenas tipo de obter um bom medidor em nossa pequena grade responsiva. Aqui, cara. Deslocar entre aspas. Então o que vamos fazer é tê-lo no meio da resposta. Então o que podemos fazer é tê-lo aqui. Estas serão as respostas dele. Está se preparando. Digite talvez um pouco maior. Mantenha o turno pressionado. Então eu poderia fazer um bom, mas eu não segurar o turno para ficar meio estranho. Isso não escala dimensionalmente. Então, se um porão no navio, ele vai dimensionar as dimensões perfeitamente. Só um pequeno truque. Agora, estamos apenas fazendo algumas idéias de design. Temos uma imagem de perfil pairar acima, dar-lhe uma aparência em camadas. Então agora precisamos de alguma tipografia para voltar aos estilos e ver se eu não consigo encontrar quando eu gosto , fazer branco claro. Mas vamos fazer com que seja cinza escuro. Esta será a nossa mensagem que ela fez Então pegue um tipo de mensagem falsa e digite a mensagem falsa aqui e então faremos um par de ícones para nos ajudar a indicar que este é lugar onde ele precisa digitar sua resposta. Ok, então eu meio que digitei algumas conversas genéricas aqui e agora. Eu não poderia tipo de colocá-lo para fora. Como? Eu acho que deve olhar, então eu só vou para aqui e fazer tipo, um alinhamento à esquerda e eu meio que colocar de volta. Provavelmente teria um nome para ganhar. Pegou o nome dela. A Sarah. Isso é aqui em cima. Mantenha pressionada a opção e descrevendo o nome dela, arrastando-o para baixo para que eu não tenha que re digitá-lo. Esta será a Sarah, mas vamos querer que isto seja no cinzento escuro. E uma vez que tenhamos esse tipo correto, queremos salvar isso em nosso estilo para que possamos lembrar esse tipo de texto preto no fundo branco novamente. Então vamos ver isso para 28. E quando eu adicionar um pouco mais de espaçamento entre o tipo um pouco mais deixando como eles chamam. E assim também teríamos um carimbo de data/hora. Vamos fazer os selos de hora. Isto foi 12. Eu tenho 11 2020 e o carimbo de data/hora realmente não precisa ser tão grande apenas o suficiente para ser lido e vamos torná-lo médio. Então foi o que ela disse naquele encontro. Podemos adicionar pequenos floreios de design aqui para que possamos fazer isso um pouco de um bico de caixa escuro adicionar contraste. Você fala isso um pouco, Z man, Z man, que a linha acima como tal coincide com a curva aqui. Mas eu vou descer e segurar a opção só para fazer isso e, em seguida, segurar a opção e apenas fazer aquela. Então agora eu só tenho curvas no topo enviando isso de volta quando no sistema de camadas e eu vou agora querer fazer isso branco. Na verdade, somos uma espécie de cinza escuro ou claro. E agora que o temos em um fundo escuro, temos a chance de adicionar cores, o que sempre ajuda. Agora pode mudar o tamanho de uma foto de perfil. Temos que nos lembrar, as pessoas vão querer ver mensagens mais longas sem ter que rolar. Então é aqui que podemos precisar sacrificar alguns desses elementos lá em cima para ter certeza que mensagem pode ser lida e ser muito, muito mais tempo Então, se nossa mensagem precisa ser muito longa, porque isso pode ser conversas privadas, essas conversas privadas do ar que vão ser apagadas após 24 horas para que eles poderiam ser que poderia ser longo. Vamos em frente e segure o turno. Vamos fazer sua imagem menor, apenas tentando ser eficiente com nosso espaço e pensando sobre quando isso vai ser um aplicativo realmente ao vivo e que precisamos de um texto apenas para maior. Então é por isso que talvez este texto possa ser 16 e talvez em vez de uma espera fina, nós temos. Um peso leve seria lido um pouco melhor, e temos a chance de caber mais café e mais tipo antes que você ficou ótimo, eles disseram. Essa é a área dela. Alguns Scott copiam o dela. O grupo não são copiados, mas o grupo foi enviado mais alto, e isso será o que ele responde com. Então vamos tê-lo no meio e ter um médico no ponto como se ele ainda digitando. E vamos em frente e salvar este estilo de personagem. Salvar esse estilo de personagem neste vai ser o nosso texto de mensagem, fundo branco caído. E então agora eu posso clicar sobre isso e mudar isso para o mesmo tipo como acima. Certo, então podemos ter uma pequena indicação de um tipo, então eu coloquei, tipo, uma pequena linha aqui, talvez uma caixa. 21. Part2: uma linha fina até a direita. Quero fazer uma cor diferente porque queremos ter certeza que indicamos que isso não é uma letra. Isso não é um L. muito estranho É a indicação de que ele ainda está digitando. Queremos ter um ícone de envio, talvez uma seta para cima, para indicar o que ele precisa pressionar para enviar isto. Eu sou Então, o que vai criar um círculo simples e nós vamos torná-lo fronteira grossa. Então vamos pegar nossa fronteira e fazer um pouco mais grossa. Talvez quatro, talvez três. E poderíamos mudar a cor da borda. Podemos fazer qualquer um desses fraquezas fazer. Talvez um desses tons mais escuros bem ali uma hora para desenhar um pequeno ícone de seta enigma seta fina com este. Você cozinha lá em baixo e nós vamos fazer esta guitarra verde. Eu solto a ferramenta conta-gotas, amostra o verde e nós vamos fazer essas tampas arredondadas ou uma rodada E então o gato arredondado lá vai bem arredondado. Podemos sempre mudar uma espessura depois de desenhar a linha, Desenhar linha simples e mudar isso sobre. Está fazendo guias inteligentes, então deixe-me selecionar os dois e fazer uma linha central. Isso também não está ajudando . Então, às vezes, é por isso que eu gosto de fazer muito do meu desenvolvimento de ícones e ilustrador de adobe, porque eu me sinto como o Adobe XY. É ótimo para fazer coisas muito básicas, mas se você quiser fazer alguns símbolos complexos, há algumas pequenas coisas que meio que me incomodam. Não é possível selecionar o encaixe para criar grade como você pode no Adobe Illustrator. Então eu o fiz pulando Adobe Illustrator e obter um pouco de botão mais preciso. Há também a capacidade de tornar esta causa maior estamos retomados e um pouco para que eu possa ir em frente e escalar tão maior. Consegues alinhá-los assim? Eles teriam, você sabe, um pouco mais de controle. Agora eu também posso pegar minha ferramenta pin e editar esses pequenos pontos. Temos um centro lá vamos nós, Aiken , agrupa isso e enviamos tudo para baixo. Eu acho que eu estava ampliado tanto que estava se encaixando na grade e não me permitindo, uh, centralizá-lo como eu queria. Então vamos mudar. Vamos fazer uma fronteira com isto e vamos torná-los ambos de cor verde. Nós nos certificamos que ambos são rodada de tampas ao virar da esquina ao redor das tampas e, em seguida, torná-lo mais grosso. Vamos fazer um três. Vamos ver como isso parece ampliado. Isso é quase certo. Torná-lo um pouco menor. Agrupe esses caras. Eu poderia fazer isso montar e usá-lo em outro lugar, se eu gostar de como é. Cam também pode testar cores diferentes para que possamos testar o avião ou o azul. É azul de viagem, o azul parece um pouco melhor. Eu vou coletar esses dois grupos juntos e clique direito e torná-lo um símbolo iria aparecer sobre os meus símbolos. E se eu usar isso em qualquer outro lugar, se eu modificar ou mudar a cor, ele mudará globalmente. A menos que eu decida tipo de, ao contrário de propriedade, agrupá-lo no pouco não será mais um símbolo de link. Ok, então agora tem aquela pequena borda fina em torno de ambos. Eles combinam graficamente, e este não tem uma sombra. Então deixe-me adicionar uma sombra a esta caixa branca. Deixe-me ver se a sombra tem as mesmas configurações de 559. Isso não é assim, Steve. Cinco e cinco, você tem a mesma sombra sobre isso. Acho que isso precisa ser alterado um pouco. Então deixe-me fazer, como um torná-lo mais apertado. Deixe-me fazer um dois e um dois e, em seguida, um dois e um a um pouco de uma sombra mais apertada. Então, a parte única desta mensagem maçãs. Você tem a capacidade de excluir mensagens após 24 horas, e queremos que essa seja uma opção quando você envia uma mensagem. Então o que queremos fazer é ir em frente e mudar esta mensagem para cima. Então eu vou agrupá-lo e dar-lhe uma pequena opção de alternar para ser capaz apagar a mensagem. Depois de 24 horas, vamos fazer isso branco, e vamos torná-lo um pouco mais velho para que eles possam realmente lê-lo e torná-lo cor cinza claro. Então vamos fazer o nosso pequeno botão de alternar ou ligar e desligar ele trouxe para baixo. Lá vamos nós. Então vamos criar um símbolo que se parece muito com este para a nossa alternância. Vamos fazer com que seja o tamanho certo primeiro. E vamos recriar este botão de alternância. Claro, torná-lo nosso. Então eu vou pegar o vamos apenas fazer uma ferramenta de caixa. Vamos adicionar uma forma de pílula, está bem? E nós vamos ter Nós vamos fazer o preenchimento meio de uma cor cinza. Vamos fazer um golpe mais grosso nele. Então vamos fazer, tipo, um três e vamos fazer isso. Podemos torná-lo mais claro ou mais escuro. Vai estar num fundo escuro, por isso é melhor ficar mais escuro. Vamos fazer disso nosso. Não queremos copiar o que quer que seja. Então vamos fazer um círculo. Vamos fazer nossos pequenos botões. Mantenha o turno pressionado, faça isso. Um pequeno botão aqui que poderia deslizar. Onde fazer a mesma coisa. Nem conseguimos a ferramenta conta-gotas. Experimente algumas de nossas cores aqui. Vou deixar isto mais leve, mas não todas as luzes se movem como um escuro, e vamos fazer isso pode ser uma borda mais grossa e mais leve como essa. Torná-lo um bom declínio. Tudo bem, então agora podemos fazer outro círculo lá dentro. Este será o único que terá a nossa pequena cor para ele. Então vamos pegar a fronteira. Vamos pegar o nosso Nós poderíamos fazer o verde. Podíamos fazer o azul como o azul. Não, eu não consegui sair de uma linha mais grossa. Talvez não tão grossa. Ou talvez dividir a diferença. 2.5. Vamos fazer com que o círculo interno seja igual ao círculo cinza. Então eu só vou fazer isso seria um preenchimento. Agarrou meu conta-gotas para ele. Experimente este aqui. Esse cinza. Agora temos que descobrir como fazer sem estalar. Vamos selecionar alguns desses círculos e fazer um alinhamento central. Ok, então há o nosso pequeno único, mas podemos adicionar um pequeno efeito de sombra aqui, como este faz. Podemos descrever o traço da ferramenta por aí, então vamos fazer essa sucata. A ferramenta de pino iria adicionar como uma pequena sombra aqui, apenas fazendo a ferramenta pino. Sabe, a ferramenta de alfinete do Illustrator, você estará em casa. Eu estava fazendo uma forma de vontade mudar isso para um preenchimentos e essas formas desfazendo agora não importa . será encoberto. Eles não vão mudar isso para um Phil longe da fronteira. Vamos fazer com que seja cor de sombra. Então precisamos descobrir se queremos fazer isso. Lime do comando. Está aí atrás. Teremos que fazer disso um derrame para que o derrame possa encobrir. Então eu sou apenas fazer opção. Vou fazer uma cópia disto, e vou tirar o preenchimento. Então agora só temos um derrame, e eu vou colocar isso em cima. Poderemos cobrir um pouco de forma de sombra, mas também garantir que o botão apareça. Viu como fizemos isso? Então isso encobriu tudo. Amplie e vamos pensar na cor aqui. Queremos fazer isso também azul? Sim. E vamos também fazer isso azul. Mas vamos clicar duas vezes, Phil e torná-lo um pouco mais escuro para indicar a sombra. E eu poderia descrever minha ferramenta de alfinete. Se eu precisar editar alguma coisa, puxe a sombra um pouco, arraste-a para baixo assim. Então lá criamos nosso pequeno botão. Talvez fazer esse derrame um pouco para a fronteira, um pouco mais magro. Aqui vamos nós. Estou muito feliz com isso. Você já foi um pequeno botão deslizante? Poderia um grupo que juntos e derrubá-lo agora que ele vai residir? Isso ficaria muito bem sobre branco. Então vamos fazer duas versões. Um que fica bem sobre branco e outro que fica bem no escuro. Vou em frente e puxar isso para baixo. Então, se eu colocá-lo aqui, eu fui em frente e coloquei nosso botão aqui, e nós crescemos isso juntos. Eles poderiam clicar nele, mas ele parece desconectado da mensagem real que você precisaria fazer essa configuração . Então eu vou puxar isso para baixo um pouco e ter a opção aqui que pode ser mudar em torno de algumas coisas, mudar a cor em tamanho. Poderíamos até fazer esse alto contraste e fazer um fundo escuro. Já fizemos isso aqui. Então não vamos reinventar a roda e virar isso para baixo. Um aluno pode comandar colchete direito para trazê-lo para a frente? Agora, eu poderia fazer isso uma cor verde limão e realmente se destacar bem para baixo opção tipo de ajustar meus cantos para combinar com o abaixo. Vamos em frente e ligar nossa grade aqui. Isso pode nos ajudar a guiar um pouco desse alinhamento. Nós sempre falamos sobre a nossa outra cotação graduada para comando. Bloqueou a nossa mensagem. Nosso quadro de arte Primeiro, uma nova citação de comando teria uma grade de minutos mais. Ajude-nos com certos problemas de alinhamento. Está bem, fala tudo isso. Lembre-se, ative isso de vez em quando. Seria bom se os perfis combinassem. Ambos estavam aqui à esquerda, o que é ótimo nisso e deixam espaço para nomes longos. Então isso vai ser inteligente. Vamos fazer estes do mesmo tamanho. Ambos têm uma pequena fronteira com ele. Vamos na mesma borda, então um e essa cor no 22. Tela de mensagem Part3 - animando o botão: Certo. Então estou no modo protótipo. Vou ligar isto e fazer um pouco de animação para ligar e desligar isso. Então eu vou ir em frente, arrastar por cima porque ele queria se conectar a este estado, e nós vamos fazer uma animação automática, e vamos fazer isso na torneira. Tudo o que ele podia fazer, arrastar o que vamos fazer, tocar neste caso. Se contestarmos isso na sua área de trabalho, vamos fazê-lo. Ele está dentro e fora. Isso vai dar a ele um pouco agradável de transição suave. E temos 0,2 2ª duração. Então vamos tentar. É clicar em nosso quadro de arte e visualizar e vamos clicar em um botão. Lindo. Mas veja, agora precisamos clicar, ter o botão “click off”. Então agora temos que fazer é ligá-lo de volta ao outro estado e fazer a mesma coisa. Então agora vamos em frente e visualizá-lo, e deve ser um clique em ciclo. E quando você clica fora. Ok, então o que precisamos fazer ver tudo clicando aqui, e não está fazendo a transição de volta. Vamos olhar para o lugar onde ele está fazendo então eu acho que o que eu fiz é que Onley ligou este pequeno quadrado. Então vamos em frente e arrastar isso para fora e tipo de reiniciá-lo. Mas vamos agrupar isto para garantir que todo o bloco seja viável. Então vamos em frente e selecionar todos os nossos elementos. Lá vamos nós. Vamos agrupar isso. E agora vamos voltar ao modo protótipo. Vamos clicar nessa área inteira de volta. Ótima. Vamos certificar-nos de que isto está ligado. Essa coisa toda está ligada. Então a coisa toda é interativa, então vamos para a pré-visualização e isso deve funcionar perfeitamente. Vamos passar por todo o processo, está bem? Vamos enviar uma mensagem, enviar a mensagem, e então vamos clicar nela e ligar, e vai para frente e para trás. Lindo. O que seria realmente necessário é se não pudéssemos criar outro quadro de arte e isso seria clicável. E, em seguida, uma nova mensagem desliza para dentro. Então toda a mensagem dele acende. Então, se realmente quiséssemos continuar com isso, poderíamos mostrar todos os aspectos deste aplicativo. Se quiséssemos mesmo passar umas 20 ou 30 horas juntos construindo esta história toda , mas acho que estamos num momento em que podemos ligar mais algumas coisas. Mas podemos ir em frente e acabar com isso aqui. E eu sempre posso fazer mais lições onde nós ligamos continuar até que nós tenhamos tudo ligado e nós meio que passamos por todos esses diferentes, como o planejador de orçamento na pontuação de crédito. Mas rapidamente, vamos fazer a história dela e vai ser uma brisa, porque poderíamos copiar e colar a história dele para começar. E então só precisamos trocar fotos. Então vamos pegá-la aqui, certo? Excluindo-o, trazendo-a a bordo. Vamos voltar para o modo de design, e nós só precisamos cortar mudanças algumas coisas tela inicial vai ser exatamente para dizer certo, e o processo vai ser exatamente o mesmo. Vamos copiar e colar isto para manter todos os nossos comprimentos juntos aqui em cima. Só precisamos ter certeza de trocá-la por ele e ter certeza que está na mesma posição em cada slide. Poderíamos fazer isso entrando em nossos posicionamentos e colocando-o na mesma posição. E também Sarah Smith que precisa ser. Você vai para o modo protótipo? Vai salvar todas essas conexões. Todas essas conexões economizadas pelo ar não parecem estar salvas. Então poderíamos simplesmente gostar disso. Ligar isso de volta a através de transações ou isso vai ligar de volta a este aqui mesmo. Boom. Então vamos continuar com a história dela, mas vou parar aqui mesmo. Acho que fizemos muito juntos. Fomos capazes de desenvolver vários ícones, fazer alguma animação para alguns slidesouts. Menus realmente entrar na grade de repetição para economizar muito tempo e prototipagem e ter um link isso e ter uma visualização ao vivo indo até compartilhar publicar seu protótipo e compartilhar isso com outros. Diverti-me muito a fazer isto contigo, e agora está na hora do teu projecto estudantil. 23. Projeto de estudante: Agora é hora de seu projeto de estudante, e eu quero que você projete um aplicativo web muito simples em voz alta ou móvel com pelo menos três transições ou links. Tente pensar sobre a sua jornada de usuário e divulgue seu objetivo ou destino final. Mantenha este simples e adicione a ele como você se sentir mais e mais confortável com X D e as muitas opções de animação e transição que você tem. Você pode ir mais longe publicando um link ao vivo do seu protótipo e publicando-o na seção do projeto ou no meu grupo de estudantes no Facebook. Você pode até mesmo postar na seção da comunidade desta turma para obter feedback de outros alunos. Lembre-se de manter isso simples no início. Os melhores layouts digitais são simples e focam em tornar a experiência para o usuário o mais fácil e livre de dor possível. Sinta-se livre para entrar em contato comigo a qualquer momento, com perguntas que você pode ter ao longo do caminho e feliz criando 24. Aula de bônus - crie uma barra de deslizamento: Então agora vamos fazer um efeito de controle deslizante legal. Então eu tenho que clicar na pré-visualização para que eu possa mostrar o que eu acabei de criar. Vamos rever a história dele, mas em vez de clicar, dá gorjeta para transações? Nós vamos até aqui para que eles possam mudar o orçamento deles, e nós vamos ser capazes de clicar e ter um efeito de arrastar que pode aumentar seu orçamento. Fazíamos isto várias vezes e enumerávamos todos os orçamentos. Eles vão ensinar-te a fazer isto. Técnicas de deslizamento simples usando animação automática. Então vamos em frente e copiar. Eu tinha uma cópia. Nossa tela inicial. Vamos fazer um novo quadro de arte. Vamos arrastá-lo até aqui. Vamos entrar no modo de design e não precisamos de nenhum desses por enquanto. Vamos em frente e eliminá-los. Ainda temos este. Vamos criar uma pequena opção de controle deslizante. Então eu vou mover isso todo o caminho até aqui. Apenas criando nosso barzinho. Ainda podemos ter essa era que indicará uma maneira de voltar para a tela inicial. Podemos ter a nossa informação, mas vamos ter de ir até aqui e escurecer e tornar isto escuro também. Então agora vamos pegar esse botão e vamos trazê-lo até o outro lado . Estamos fazendo nossa pequena parte deslizante, e agora nós já criamos uma espécie de botão aqui em uma lição anterior. Vá em frente e agarre-o. Lá está ele. Vamos em frente e pegar isso em um controle deslizante, então eu vou agrupar isso da ONU. Tudo o que preciso é desta parte. Tipo, eu preciso ter um grupo isso algumas vezes. Você está certo. Clique. Agrupe isso e traga-o aqui. E talvez eu precise torná-lo um pouco menor onde eu poderia precisar mudar a fronteira lá que você possa ver um pouco melhor. Então vamos fazer isso. As mudanças fazem fronteira e ficam um pouco mais escuras. Perfeito. Vou agrupar meus elementos e adicionar um pouco de sombra que aqui, lá vamos nós. Sobre a minha opção de sombra. Eu tenho um grupo estes juntos novamente como uma unidade. Então agora vou fazer a indicação de onde estão os trenós. Precisamos fazer uma cor diferente para o bar. Então eu só tenho uma opção de segurar e copiá-lo, e eu vou torná-lo azul. Então esta será a parte que ainda não deslizou. Eu tenho um tom dois acontecendo aqui. Faça isso um pouco mais grosso. Poderíamos mudar muito disso um pouco mais tarde, então vamos fazer a parte da animação. Então vamos copiar e colar isso em um novo quadro de arte e vamos fazer a animação no slide, então ele vai ser enviado. Eu estava pegando minhas chaves direcionais e deslizando para onde eu acho que seria um bom lugar para acabar. Eu quero fazer um corte de rolagem dramática, então eu quero fazer isso muito longe e eu só vou arrastar isso para baixo. Então isso está na parte certa. Queremos mudar o valor porque é o que acontece quando deslizamos para cima é a quantidade muda, então também vamos mudar a quantidade que poderíamos fazer isso em outro momento. Você muda todos os dados é o nosso orçamento alimentar. É aqui que vai começar. E é aqui que vai acabar. Então vamos entrar no protótipo e ligar esses ups que vamos acordar ou abotoar seu botão vai ligar para este aqui. Mas vamos fazer uma animação automática, e vamos tê-lo como um arrasto em vez de um toque, então requer que você clique e arraste ou 13 seu telefone toque e arraste. Agora vamos mantê-lo na flexibilização. Vamos comer dentro e fora, ok? E nós também queríamos voltar, e queremos deslizá-lo para baixo. Então ele vai lembrar as mesmas configurações para que não tenhamos que fazer nenhuma das configurações. Nós também queremos este link de volta para a nossa página inicial para que possamos lambê-lo assim. Vamos em frente e testá-lo. Eu fui em frente e ter a mesma coisa aqui apenas um pouco mais finalizado com o tipo, e eu vou clicar neste e clicar no jogo. Então agora eu vou ser capaz de clicar e segurar, e ele notou como a quantidade muda também. Então este pequeno controle deslizante agradável. Então agora uma maneira fácil de replicar isso se eu quiser ser capaz de ter todos os orçamentos aqui, então eu vou em frente e voltar para o modo de design. Agrupe isto. Se estou 100% feliz com isso, estou me preparando para replicá-lo, então é melhor eu estar muito feliz com isso. Vou fazer a grade de repetição, e vou descer. Coloque todas as nossas rubricas orçamentais, que creio serem sete. Temos sete delas. Então agora eu vou mudar o meu com o meio para que eu possa ter todos eles lá. Então agora tudo o que eles têm que fazer a sua ligação todos estes para cima e mudar que os montantes. Então vamos apenas fazer este gás e eu vou ter estes ligados até então estes também vai DEET páginas individuais dedo do pé como até. Então o que você faz é copiar e colar o que criamos aqui e substituí-lo por gás. Então agora eu os tenho lado a lado. Eu tenho eu só fiz a grade de repetição e fiz isso e, em seguida, copiou. Então agora eu posso fazer o estado antes aqui e, em seguida, o estado após, visto como as quantidades mudam gota de comida e gás e os controles deslizantes mudaram e eu tenho ambos em seu ir Clique ter um tanto no auto, animar e arrastar. E ambos estão ligados a este. E eu vou te mostrar um pouco de Ah, eu sou uma dor de cabeça. Você pode ter que passar se você quiser animar todos esses separadamente. Então ele vai clicar aqui fora e ver como ele se parece. Vamos em frente e arrastar a comida. E ele notou que todos os controles deslizam para cima ou novos e os valores mudaram. Então é isso que queremos, mas queremos que os usuários os deslizem separadamente. Então, onde você vai ter que fazer é você vai ter que ter cada um destes para cada controle deslizante. Então você vai ter que fazer um alimento que liga a comida. Então este só mudaria a comida. Então vá em frente e mostre um exemplo. Então é como gás de volta para onde pertence, e nós teríamos apenas a opção de comida. Então precisamos copiar e colar isso e aqui nós trocamos o gás para que a comida voltasse para este estado e seria apenas gás aqui. E então você cria outro e você tem tudo de volta ao estado original e apenas mudou o outro. Então isso é um pouco de dor de cabeça se você quer mudar cada um individualmente, mas vale a pena o trabalho para ser capaz de vê-los todos se movendo individualmente, mas você tem que ter um. Vamos ver lá. Sete. Então você precisa ter sete diferentes com cada um com esse único estado mudando. Eu só quero mostrar que você tinha que fazer esse controle deslizante. Você não tem que fazer tudo independente, mas só se você quiser. Mas pelo menos você sabe como fazer uma espécie de animação deslizante em você pode ter outras coisas deslizando em torno de nós. Bem, então brinque com aquele futuro auto animado. É muito poderoso. Então agora eu tenho cada um desses. Eu tenho um para comer. Esta é a nossa casa principal. Então nós temos este é o, uh só a comida mudou neste. Só o gás mudou. E neste, apenas o seguro do carro mudou. Agora vou ligar todos no protótipo para mostrar como isso funciona. Não vou completá-los todos, mas comida. Vou em frente e ligado à comida, e isso vai ser auto animar e arrastar. Vou ligá-lo de volta à casa. Vai salvar tudo. Então este gás agora vai ligar a gás sobre este 3º 1 e então o gás vai ligar de volta. E, por último, seguro tem o seu estado, que é por aqui, e que liga de volta. E ele continuava com os outros quatro. Então, agora, uma semana aqui para jogar, vamos ver como é. Então agora cada um deles é individualmente móvel. Só trabalhei muito. Vamos nos certificar de que eles se ligam de volta a cada um liga de volta. Acho que ligamos todos de volta ao lar, então isso é bom. Então só precisamos ter certeza de que os montantes são consistentes à medida que vamos e para trás e podemos verificar isso duas vezes. Mas lá vai você. É assim que você faz um pouco de controle deslizante