Adobe XD: Design e prototipagem de aplicativos para iniciantes

1. Introdução: Ei, pessoal, hoje vai passar por cima do Adobe X'd. Ele será projetar e prototipar nosso primeiro aplicativo. Então isso é destinado para iniciantes, mas também estar mostrando a vocês algo como processos rápidos de fluxo de trabalho e plugins que eu uso no dia-a-dia. Mas torná-lo rápido e valioso para qualquer um que quer assistir para cima nossa saída será algo parecido com isso. Então, estamos fazendo um protótipo de tela de 10 a 12 com uma fidelidade bastante alta, e eu estarei projetando cada peça ao longo do caminho. Espero que possam pegar algumas informações úteis, então vamos começar. 2. Configuração de arquivos 2: não tomar nota quando começar que temos tamanhos de dispositivo pareceu parar e porque ele vai estar fazendo um celular fora, vamos clicar aqui. OK, então uma observação rápida sobre tamanhos de arquivo você notará que a primeira decisão que você tem que tomar um adobe X'd é qual o tamanho do arquivo para projetar. Vou encorajar toda a gente quando estiveres a começar, especialmente concebido para o dispositivo que tens lá. Na verdade, eu acho que é até 24.000 dispositivos Android agora. E cerca de 27 Ah dispositivos IOS. Então você realmente pelo menos quando você está começando, não se preocupe em tentar projetar para todos os diferentes tipos de dispositivos. Encoraje todos. Basta puxar para cima o dispositivo que você tem. Hum, vai ser ótimo usar isso como referência para que você possa começar a ver a escala e o tamanho das coisas e você será capaz de brincar com as coisas na tela. E você pode realmente puxar o Adobe X'd e usar uma visualização ao vivo, o que eu super recomendo. Isso só vai deixar você muito mais familiarizado com a escala de botões e como as coisas que você está fazendo na tela realmente são porque acredite em mim, é muito diferente em um monitor do que é na tela do seu telefone. Então, todos, por favor, verifiquem se puderem. É super útil quando eu encorajá-lo para este protótipo e para este vai estar indo. Eu acho Xar, então a primeira coisa que você vai notar. Você vê, nós temos este quadro de arte bem no meio da página. Esse é o tamanho da tela do telefone, e também é chamado apenas o tamanho encontrado genérico na parte superior. O que podemos fazer é clicar duas vezes sobre isso e nomeá-lo. Splash, você percebe para a esquerda. Temos esse nome para atualizar em nosso painel de arte. Então aqui vai ser onde tudo o que desenhamos na tela aparece à esquerda. Temos todo o nosso desenho para nós e depois para a direita. Temos todo o nosso painel de configurações, então todas as opções que conseguirmos editar aparecerão todos os anos. Então, como exemplo, assim como o aeroporto e nós temos opções mortas no quadro de arte aqui, certo, e nós vamos realmente fazer a aparição. Então, o fundo preto. A próxima coisa que vamos fazer é criar um ícone para tela inicial, então vamos pegar um círculo e vamos arrastar para desenhar um círculo. Mas você percebe que quando você arrastou para desenhá-lo, ele se transforma em um oval, e ele vai para qualquer lado que você move o cursor. Mas se você segurar um turno em uma escala uniformemente e se você turno antigo em Ault, ele vai escalar a partir do meio. Este é um atalho rápido que eu gosto de usar muito, você mudando tudo com quase todas as formas que eu criar. E então, à direita lá em cima, você notará o centro de alinhamento nas ferramentas horizontais de linha. Então, essas também são algumas coisas rápidas para usar quando você precisa colocar as coisas no porto de arte e certificar-se de que eles estão centrados e realmente vai fazer isso um pouco maior. Então eu vou segurar o turno de opção de novo, e nós temos alguns caras que vêm para cima. Também pode ser útil que fazer isso um pouco maior direito sobre há um, e vamos movê-lo para lá. Então este vai ser o logotipo de uma tela inicial. O que uma tela inicial faz é que basicamente oferece um espaço reservado para dar tempo ao aplicativo para carregar . Eles nem sempre são necessários, mas é bom ter um, porque se a Europa não precisa de tempo para carregar quando é baixado e você não tem um, você só vai mostrar ao usuário uma tela preta, o que não é ideal. Então o primeiro a enfraquecer a captura é o retângulo em todos os lugares à esquerda. E nós vamos fazer uma buzina para o meio do nosso ícone porque estamos fazendo notícias e vai ser como um megafone, tipo de homenagem à velha escola como jornais gritando do lado do bem. Assim que desenharmos o retângulo, podemos ver homens que você notou que a direita está enchendo uma borda. Mas o que também podemos fazer aqui é clicar duas vezes no retângulo e compartilhar esses pontos comestíveis nos cantos. E o que podemos fazer é pegar esses dois pontos. Então eu fui selecionado o 1º 1 e segure um turno de imprensa. É como o 2º 1 e vamos puxá-lo para baixo. Volto para o topo e derrubo esse também. Eu vou fazer a mesma coisa com o ponto certo dele e basicamente, o que eu estou fazendo é apenas ficando um pouco mais de como, oh, forma de megafone para o nosso logotipo que eu vou selecionar fora disso para de selecioná-lo e então Deslize para cima. Na verdade, o que vamos fazer com isso é virar a fronteira e fazer o Phil Black. Vou clicar duas vezes mais uma vez porque queremos que este fim seja um pouco menor do que é. Então, o que? Ele é assim. Então, estavam começando a ficar um pouco de uma forma de megafone o que vai realmente saber? Em seguida, coloque um bloco aqui para o punho. Então vamos pegar o retângulo de novo. Arrastamento mínimo, e solte isso e vamos movê-lo para cima. Então é sobre o local que uma alça seria nós também vamos desligar a borda novamente e então fazer o revestimento preto. Então eu vou apertar, mudar e selecionar ambos, e nós vamos vir aqui para nossas ferramentas de combinação de caminho para que possamos selecionar este dedo, adicionar, adicionar, subtrair intersexo, excluir cada volta que usaremos aderir. Assim, o que ele faz é criar uma forma fora dos dois e podemos nomear milho, e é sempre uma boa prática nomear as coisas como você vai, porque quando você chegar até, tipo, tipo, 100 quadros de arte pode ser muito Confuso. E eu vou twittar isso só um segundo. Então eu cliquei duas vezes nisso para voltar para que eu pudesse editar esses pontos. Na verdade, vou falar um pouco disso, e depois vou voltar para a ferramenta de alinhamento do topo, certo? E certifique-se de que ambos estão centrados no ar. Vou apertar, mudar, mudar, selecionar os dois e, em seguida, comandar G. E isso vai criar um grupo desses dois. E podemos nomear o logotipo do grupo de “Seita do Diabo “só para ter certeza que está centrado aqui . Reparaste que aquele guia apareceu ao longo do meio até ti? Se você puxar em torno de qualquer forma, geralmente a vontade de Deus começa a surgir para ajudá-lo a centralizar as coisas. Então vamos para esta ferramenta de texto bem aqui. Caixa mínima de arrastar e soltar para um texto. O nome do nosso aplicativo de notícias vai ser extra, então podemos destacar isso e vamos mudar as fontes brancas da Srta. - Tudo bem. Na verdade, vou entrar em negrito em cerca de 35. Talvez assim Neste momento o texto é um texto de área. Então isso basicamente significa que ele vai continuar correndo, mas apenas mostrar a área específica. Mas se nós mudá-lo para apontar texto aqui, ele vai realmente sempre apenas caber na quantidade de texto. E a razão pela qual isso é útil é que você pode realmente dimensioná-lo assim. Então, se você está tentando se mover rapidamente e você não quer digitar exatamente como pontos de fonte, é útil, como, usar este texto ponto para realmente descobrir onde você quer uma posição coisas. Ok, então isso é quase certo. Vou arrastar isto para baixo até que ambos estejam fora do centro da página. Ok, então eles são tela inicial. Não vamos ter apenas este fundo preto. Na verdade, vamos ter uma imagem nele. Então deixe-me puxar sobre uma imagem, e eu vou incluir esta imagem para todos, mas é apenas uma imagem de jornal ah aleatória que eu tenho de Splash. Mas sinta-se livre para usar o mesmo ou outro, se quiser. Então você notou quando eu trago a imagem nele automaticamente cortada para o quadro de arte que é uma característica agradável. E, claro, temos nossos pontos de edição nos lados e a mesma coisa. Vou segurar a opção, deslocar e dimensionar isto para baixo para que ele escale para baixo uniformemente que eu vou apertar o comando shift colchete esquerdo . E o que isso vai fazer é enviá-lo todo o caminho até o fundo do painel de camadas e você pode fazer a mesma coisa aqui, mas apenas arrastá-lo. Então, se nós arrastá-lo para cima, ele está basicamente fazendo a mesma coisa. Mas é bem rápido. Use o atalho de teclado aqui. Na verdade, notei que o círculo deles tem uma borda, então vou clicar duas vezes o suficiente. Ok, nós temos o fundo da imagem, mas você vai notar que o texto é quase impossível de ver. Então nós vamos ter que ter uma sobreposição nesta imagem, então eu vou bater, estão no teclado para puxar para cima um retângulo e desenhar um todo o comprimento da nossa placa. Eu vou desligar a fronteira e então vamos torná-la preta. O Sr. Spot só arrastaria este sabre e então eu vou fazer o “A pass ity” cerca de 70. Talvez nós vamos tentar. E então o que podemos fazer é arrastar isso abaixo do nosso logotipo. E lá vamos nós. Nosso texto é muito mais visível agora, e eu vou realmente apenas nomear esperança. Então o que aconteceu lá foi acidentalmente drogá-lo para o grupo no painel de camadas, a área. Agora é fora do grupo que podemos nomear essa sobreposição. Ok, então há nossa tela inicial, e a próxima coisa que podemos fazer é copiar e colar isso e criar uma tela de login. Podemos clicar duas vezes para nomear pegar ambos e mover-se para cima. Então o que vamos fazer é criar entradas para e-mail em uma senha para que pudéssemos pegar nossa ferramenta de linha aqui e você percebe que uma vez que você começa a desenhar linhas, é meio estranho decidir onde eles vão parar para que você possa entrar e ligar a grade, e coloca uma grade padrão. Isso é um pouco para o Nero. Eu geralmente gosto de trazer isso para fora um pouco e essas coisas em torno como, 24 e então nós podemos apenas fazer isso o padrão e usá-lo em outros lugares também. Então, na verdade, vou arrastar esta linha para fora até que ela se encontre com essa borda, e então podemos desligar isso por um segundo. É muito difícil ver você, então vamos deixar a linha branca e fazer o tamanho também. Por isso, precisamos de um ano de texto por e-mail para permitir que as pessoas agora precisam inserir seu e-mail. Então, na verdade, vou copiar e colar este texto aqui em cima. Eu prefiro copiar e colar texto e, em seguida, apenas mudar as configurações a cada aqui, em vez de desenhar qualquer caixa de texto. Porque eu odeio desenhar novas caixas de texto, Eu acho que é muito mais fácil apenas copiar e colar f sobre. Também é mais rápido, mas para cada um deles. Então, o que? Aquele e-mail ali. Então eu vou pegar os dois segurando o turno. Vou copiar e colar para termos outra versão lá em baixo. E então vamos renomear essa senha em uma nota rápida para ampliar e diminuir o zoom pressionando o comando e usando a roda de rolagem. E é assim que eu amplio e diminuo o zoom. Ensine Mouse Point e eu uso a barra de espaço para obter a ferramenta pan para subir. Se a família de alguém gostaria de loja de fotos. Funciona de forma semelhante. Mas se alguma vez me vires a voar ao redor do quadro de arte, há ferramentas que estou a usar. Então nós vamos realmente também copiar e colar senha sempre. Porque se tivermos senha, temos que ter ah, esqueceu a senha. Simples. Arraste isso para que não caia. Eu tinha uma pergunta, Mark, e vamos escrever uma linha para isto selecionando isto aqui. Vou torná-lo um pouco menor. Vai descer para 14 com ele porque todos nós agora que provavelmente vai precisar disso em algum momento se este foi realmente um up porque eu não posso manter o controle de minhas senhas sem nenhuma razão. Então a próxima coisa que vamos fazer é criar nosso botão de entrada, vamos arrastar uma forma de retângulo, fazer isso um pouco menor, e nós realmente vamos pegar essa ferramenta de raio bem aqui. Então esses pequenos pontos ou para o raio e nós podemos agarrar essa extremidade e arredondar esses cantos fora, você também pode segurar a opção e apenas pegar um raio. Mas para este, vamos agarrar ambos e arredondar os cantos uniformemente os botões um pouco grandes. E este é o ponto para você onde eu encorajo todos. Teoh se acostumar com a pré-visualização e começar a entender o quão grande o você I elementos que você está criando braço. Isso também é realmente útil e por isso eu sugiro que as pessoas projetem para o dispositivo que você tem porque você pode obter uma visualização do dispositivo aparecer, e isso apenas ajuda você tipo de entender as coisas que você está construindo e vê-los em escala porque realmente muda quando você obtê-lo no dispositivo. Então vamos arrastar isso um pouco para baixo, desligar a borda, e como este é um botão, vai colocar uma sombra sobre ele e material ponto io io. Então isso é como os padrões do Google US, mas fora um monte de material bom. Muita grade de material, eu acho. Eles criaram um site para realmente explicar por que vinho, quando usar sombras e eu encorajo todo mundo. Dê uma olhada, mas os botões de longa história curta estão em um serviço de elevação e levantar a superfície. Tem sombras por baixo. Põe sempre uma sombra num botão ou numa superfície acima de outra superfície. Isso é o que é o t o d r das sombras. Não os use estilisticamente, Drop shadow são feitos para transmitir, hum, funcionalidade. Então nós podemos realmente mudar isso. Ele vai usar um verde para isso em cima, direito sobre a aparência deles. - Tudo bem. E então, se você tiver uma cor que você vai usar com frequência, você pode pressionar este botão de anúncio para salvar a cor. Isso é muito útil. Então precisamos do nosso botão para ter texto. Então eu vou pegar a ferramenta de texto e desenhar lá. Então eu vou centrá-lo, e este será o nosso login. Mas agora faça isso ousado e vai fazer 18. Eu preciso realçá-lo, e eu vou realmente mudar para apontar texto novamente. E no centro. Não isto. Torná-lo um pouco maior. Está bem. Eu menti. Na verdade, vou pré-visualizar isto e ver como fica. Parece um pouco que parece um pouco de ovos de TV estavam realmente indo para trás. Devia ter ido com um instinto. Ficou com 18. Vou fazer este botão um pouco. Alguns também estão. Então eu vou selecionar ambos, na verdade, na verdade, copiar e colar novamente porque o botão de login é para usuários existentes. Mas precisamos de um botão de login para novos usuários. Na verdade, vamos fazer disto uma fronteira. Desligue o preenchimento. Usamos a mesma mudança verde que para. E então isso vai dizer, Signador, ele vai mudar a cor do texto para esse verde, e nós podemos selecionar melhor aqueles. E então você ordena que G agrupe? E podemos nomear esta inscrição, fazer o mesmo com aquela comunidade em um botão Neymar grupo novamente. Certo, agora que temos a tela de entrada, precisamos de uma tela de inscrição. Então o que podemos fazer é selecionar isso. Vamos mover isto um pouco para cima. Vamos pegar ervilhas, encostá-los. Bem, apague a senha esquecida. Vou copiar e colar isto e ter outra linha para reintroduzir a palavra-passe. Bem, você apenas confirmação de senha, Jack. Então, e nós realmente não precisamos do nosso botão de inscrição aqui. Só precisamos de um botão de login ou criar conta. Na verdade, eu vou voltar e re nomear isso apropriadamente. Lá vamos nós e renomeamos nosso quadro. Crie uma conta também. Ok, então lá vamos nós agora, ter a tela inicial dela ou tela de login e nossa tela de criação de conta. Então a próxima coisa será passar para você é criar estão em telas de embarque 3. Telas de Onboarding: Ok, então agora que temos são telas de assinatura criadas, nós podemos realmente criar nossas telas de embarque. Então o que eu vou fazer é copiar e colar isso, vá em frente e renomear o embarque que eu realmente vou excluir tudo isso é Bryant. E eu vou voltar e realmente ajustar a cor da aparência para ser um Grady linear aqui porque nós não temos nossa imagem como um pano de fundo mais. E então você vê, eu entendo isso, como linha que aparece que me permite, tipo, tipo, editar e reposicionar o radiante no Deacon, Selecionar em cada extremidade e criar uma cor se você quiser. Você também pode selecionar na linha e criar uma nova cor no meio. Eu geralmente gosto de manter as coisas simples, entanto, e apenas manter dois pontos no New York Radiance. Então nós construímos o topo aqui e realmente queremos que isso seja como um preto, mas com, tipo, um pouco de tenda da Leah. Nada muito louco. Estar certo sobre lá é provavelmente bom. E eu adicionei para salvar essa cor e realmente quero que o fundo seja preto. Vá aqui de novo. Na verdade, é só um cabelo. Ok, então para a tela de embarque, queremos dar as boas-vindas ao nosso convidado, nosso novo convidado para marcar a contagem. Então, uma cópia e colar este texto super, realmente vai virar migrar de volta e, em seguida, também gostaria de usar sua grade de falhas. Então estamos no nível padrão que criamos anteriormente. E queremos dar as boas-vindas aos nossos novos usuários para realmente tornar isso ousado. E vamos para cerca de 24 com isso. Talvez um pouco mais 28 x cinco copiar e colar. Este Tim mudou o texto da área. Então a primeira coisa que queremos que eles façam é selecionar alguns tópicos nos quais estão interessados para suas notícias. Então podemos dar-lhes instruções aqui e isso. Ajuste este texto para ser cerca de 16 durante o nosso grande off pode realmente mudar isso um pouco para cima. Então agora o que precisamos ficar perto. Este pequeno indus. Agora, o que precisamos é realmente ter um pouco de você I para que as pessoas possam selecionar tópicos em que estão interessadas . O que vamos fazer é criar um pequeno seletor para que possamos desenhar um retângulo. Ele vai realmente trazer o raio e ao redor dos cantos. Desligue o porteiro. Faremos um cinza escuro. Posso ajustar o tamanho um pouco, e então podemos criar um círculo. Eu sou uma mudança de opção antiga novamente para escalá-lo a partir do meio. Eu seleciono o USVI para voltar à seleção para aparecer. Eu bebi a sopa aqui. Sim, aqui no Phil off Faça o porteiro branco. E com decide, Quero dizer uma cópia e colar esta área duplica eso um duplo clique lá para selecionar tudo e vamos fazer o seu tópico. A lata é um espaço reservado. Na verdade, vamos fazer este 16 e depois vamos ousar. Uma coisa para você, na verdade, eu vou trazer esta área textos em dois sobre onde o texto pode caber. Vamos fazer este círculo um pouco menor, segurando o turno de opção novamente. Arraste isso sobre apenas um fio de cabelo. E assim fazendo isso para explicar mais espaço porque nós vamos ter tópicos que provavelmente são mais de cinco letras. Talvez só um pouco. Ok. E um, as razões aqui. Eu escolhi usar a área Texas porque nós vamos estar usando plug in neste estágio para que possamos selecionar o uso e eu estou segurando turno. É como várias coisas de comando ji, o grupo que podemos nomear este seletor, e então eu vou realmente apertar repetição grade aqui em cima, certo? E se você vai notar que temos essas pequenas alças que surgem e nós podemos realmente apenas arrastar e criar cópias desse elemento de grupo, esta é na verdade uma das minhas ferramentas favoritas no Adobe X'd. Uma das razões que eu amo tanto é que este é um economia de tempo cômico de como, a alternativa para isso é apenas copiar e colar cada um e acaba tomando um monte de tempo. Mas fazer isso assim é muito mais fácil replicar essas balas de menta. E como estes estão em cima de nossos serviços de segundo plano ou algo assim, queremos usá-lo interagir com, podemos realmente clicar duas vezes em uma sombra, uma sombra. Então uma coisa a observar é que a sombra se aplica a todos esses outros. Então, se editarmos qualquer coisa em uma grade de repetição, se aplica a tudo o resto nela, que é uma característica super legal, e eu vou realmente garantir que este texto seja centralizado um pouco melhor. Lá vamos nós. Então, agora que temos nossos grãos inteiros selecionados, nós podemos realmente ir para o painel plug in aqui em baixo, à esquerda inferior. Na verdade, vamos adicionar um plugue nesse plug ins chamado repetidor. Agora, este plug in é a única razão pela qual eu não estou usando a versão mais recente do Adobe X'd. Há um pequeno bug com ele que está fazendo com que ele não funcione tão bem nas novas versões. E eu vou te mostrar porque estou literalmente executando um programa antigo para usar este plug in. Então nós temos nosso item de grade de repetição bem aqui no canto superior esquerdo, e nós obtemos os nomes de cada elemento dentro dele. E sabemos que queremos selecionar o tópico, que está aqui. E o que os repetidores nos permitem fazer é que nos dá todas essas opções para espaços reservados. Basicamente, você poderia obter textos para formas. Você pode obter imagens, mas para esta, precisamos de tópicos para nossas notícias falsas. Então vamos realmente olhar uma arena de comércio, selecionar o produto aqui, e assim podemos aplicar queijo e em próximas imunidades em toda a nossa grade de repetição, agora temos esses produtos pré-povoados e alguns deles são cortados aqui, e o que podemos fazer é realmente entrar e editar este texto um pouco só para ter certeza de que tudo se encaixa. Mude isso para 14 e ajuste estes que eles estão centrados novamente. Na verdade, vou fazer este círculo um pouco menor também. Mudança de opção de moldagem. Arraste isso para baixo um pouco e você vai notar que você pode editar qualquer instância em um crédito de repetição e alterar as outras. Então eu não tenho que sentir que você está usando o canto superior esquerdo na hora, mas os convidados deles e então temos alguns tópicos aleatórios e fizemos o teclado repetir três vezes. Por alguma razão, eu não tenho idéia por que eu iria entrar e selecionar e você de volta ao nosso texto. E vamos tentar o produto de mais vezes, fazer com que ele se aplique. Lá vamos nós. Agora só temos teclado duas vezes. Ainda assim, acho que isso vai ter que ser multado pesadamente. A pessoa está realmente interessada em teclados que passam por isso no embarque. Então lá vamos nós. Temos nosso seletor de tópicos agora, e também precisaremos de um próximo botão para que alguém possa ir em seguida depois de selecionar os tópicos em que está. Então, quando um duplo clique aqui e realmente vai fazer este cinza e aqui nós temos um conta-gotas, e eu vou ter a mesma cor cinza que os botões seletor, e isso vai ser em seguida. E porque queremos que alguém selecione esses tópicos antes que eles continuem, eu vou deixar esse botão inativo. Então você tira a sombra, e eu vou fazer a próxima capacidade de texto descer para cerca de 45. Eu vou trazer esses elementos, movê-lo um pouco para cima, porque nós vamos ter que explicar por ter um botão de pular na parte inferior. Uma coisa que você pode fazer é que você nunca pode simplesmente prender usuários, aplicá-los, dedo do pé. Ah, continuem e embarcando. Isso seria horrível. Então, vamos dar a alguém a opção de pular se eles não quiserem que vocês entrem nos tópicos em que estão interessados e vão espaçar isso um pouco. Eu que a justiça Menge. Ok. Tudo bem. Então agora podemos ir para a próxima tela de embarque. Notou que eu nomeei automaticamente no Dash um, o que é bom. Na verdade, é um nome decente para isso. Ok, então a próxima coisa que podemos fazer é querer ativar a localização. A razão pela qual estamos fazendo isso é para dar às pessoas informações relevantes para sua cidade ou cidade ou onde quer que elas morem. Para que possamos renomear esta localização da tela. Desculpe-me enquanto eu luto, lutou para dizer hoje. Portanto, queremos saber se nosso usuário gostaria de receber notícias locais e uma das razões pelas quais é bom ter Isso é como um passo de não embarque. Se você precisar de permissões, é melhor explicar por que você precisa dessas permissões se você apenas tentar aleatoriamente pedir a localização de alguém e eles não entendem por que eles não vão se sentir inclinados a dar a você. E então eu realmente vou copiar e colar isso para baixo e realmente explicar por que nós queremos serviços de localização. E isso é porque estamos dando notícias rápidas e relevantes. Na verdade, eu vou brincar com esse tamanho de fonte é um pouco aqui, fazer itálico para este e regular para este e na verdade não quero que esta vírgula seja bolada tão bem, realmente fazer que ataques a você e realmente apenas fazendo isso para adicionar ênfase em rápido e relevante é e vai dar ao usuário um pouco mais de uma explicação de por que estavam pedindo serviços de localização. Certo, então arraste isso para que você possa vê-lo e novamente, como eu disse, é sempre melhor perguntar e explicar por que você precisaria de algo como serviço de localização em vez de aparecer aleatoriamente. Mas no meio também vai precisar de algo para ir aqui também. Então não é uma tela em branco com texto e algo que é um pouco mais descritivo super banana rápido diagrama. Então Deus, a ferramenta do círculo. E eu realmente vou segurar a opção Shift para arrastar isso para fora, desligar a água, e então eu vou clicar duas vezes dentro e eu chegar lá mesmos pontos de edição que temos no retângulo antes. Mas vou arrastar isto para baixo. E se você clicar duas vezes, você vai notar que ele leva a um ponto que é muito útil para saber, dependendo do tipo de ícone que você gosta de criar. E então eu sou oprimido. E acho que é outro círculo para cima. Vamos deixá-la bem no meio disto. Na verdade, vou selecionar os dois com turno e depois bater, subtrair e eles eram convidados que temos, ah, ah, ícone de localização. E eu vou dizer isso para o canto superior esquerdo e então eu vou abaixar isso um pouco. Nós também vamos adicionar algum tipo de círculos em torno dele para você visualmente torná-lo um pouco mais interessante e um pouco melhor explicação O que está acontecendo na página. Então copie e cole isso novamente. E eu estou usando shift uma opção para dimensionar estes uniformemente Copiar e colar novamente. Aqui vamos nós. Na verdade, quando eu fiz isso para você, é apenas um pouco deste tamanho. E eu também vou até aqui para correr. Quero que um destes seja uma linha de traço, por isso vou introduzir cinco aqui mesmo. Na verdade, dá-nos uma bela linha de traço aqui para ti. Você percebe que você vai apenas a tampa e traço e, claro, tamanho da linha. Mas, na verdade , uns cinco, acho que fica muito bom na tela. Na verdade, vou colocar alguns círculos em torno destes também, e vou fazer este Phil e quero que eles sejam iguais. Raspe as linhas. Na verdade, sou uma ferramenta de conta-gotas leste. Entre e selecione isso e salve essa cor que ele vai fazer é copiar e colar alguns desses ao redor para que eles possam preencher uma linha um pouco, talvez para colocar alguma ênfase que, como, nós estamos recebendo dados de localização em torno de nossos usuários criando um pequeno sistema solar para dados ao redor poderia tornar isso um pouco menor, na verdade, que eu vou vir. Vou segurar o turno e selecionar tudo isso. Na verdade, eu vou agrupar, então comando g para grupo, e eu vou centrar isso. Oh, isso foi um pouco longe demais. Considere isso e vamos escalar um pouco de somas. Segure a opção e a escala para cima. Ok, isso parece certo e esses botões realmente ativos. Não temos que ter o mais fácil de fazer algo primeiro. Alguns do diabo clique em mudanças de volta para verde para olhar como novamente. Vamos mudar isso para habilitar a localização, ter certeza que as capacidades voltaram para cima, e então ainda manteremos a opção de pular aqui. Mas então, uma vez que ele disse assim, você teria, como a aprovação local pedido IOS nativo para vir para cima, e assim para o próximo passo vai realmente começar a criar a tela inicial. E como as telas principais dela 4. Ícones e navegação de fundo: Ok, então agora que temos nossas próprias telas de embarque feitas, podemos passar para a criação de nossa página inicial. E novamente, eu vou copiar e colar este quadro de arte, e nós realmente vamos renomeá-lo para casa. Nós vamos excluir esses botões neste ícone, e vamos nomear esta casa que levaria isso também. Na verdade, vou fazer isto um pouco maior. Ligue para a direita. Mas você está certo sobre isso. Vou fazer com que isto seja 40. Certo, agora que temos nossa página inicial, vamos criar nossa navegação inferior. Próximo. É um minuto. Desenhe um ano retangular até aqui. E também é aqui que é útil usar sua visualização. Alguém sabe e entende o tamanho que isso precisa ser. E apenas tenha em mente que o iPhone axon xar temos essa linha na parte inferior para lidar com isso. Vá. Então eu vou fazer este cinza, bem como desligar a fronteira. Experimente este cinza. Na verdade, não estou louco por isso. Vamos tentar isso bem ali, e eu poderia salvar essa mania. Will. Então o que precisamos fazer é criar quatro ícones para quatro partes principais que. Então teremos uma casa, um vídeo para descobrir uma seção de perfil. Então, o que eu gosto de didio é realmente apenas desenhar quadrado e uma mudança de moldagem para ter certeza que é mesmo quadrado e espaço para fora. Por isso, temos espaço suficiente para caber nos itens do nosso fundo agora. Então, bem no meio desta coluna, desligue a borda. Você pode realmente usar uma grade de repetição aqui. um Pode acelerar issoumpouco para suas quatro coisas e depois ter certeza que criou Isabel onde precisávamos estar, e você pode ter que brincar com isso um pouco, e então nós podemos un grade de grupo. Sim, é sobre onde queremos que nossos ícones estejam. Na verdade, eu vou Dio é selecionar tudo isso. Destrave-os. E então isso é o que vamos usar para um guia para criar nossos ícones. Então o 1º 1 que precisamos para dio é criar a nossa tela inicial calma. Então, na verdade, usou a ferramenta de retângulo aqui e vamos desenhá-lo novamente na forma que vamos obter o tamanho sobre a chuva e eu vou clicar duas vezes e eu vou criar um ponto bem no meio deste retângulo que vamos fazer é realmente arrastado isso para cima. E então nós temos o ícone de casa aqui Isso é bonito centro e realmente vai mover que nunca apenas um pouco ouvi-lo. Além disso, quando selecionamos, parece central. Então nossa casa tem que ter uma porta. Então também vamos desenhar um retângulo aqui embaixo, ter certeza de que centrado, ficar um pouco menor. Vou selecionar os dois e acertar esse sindicato para aparecer. Bem, essa foi na verdade a ferramenta errada. Eu vou colocar o subtrair dois sobre o para que algo está errado aqui por um segundo. Ok, então agora temos o nosso ícone de casa, e nós podemos realmente desligar essa borda e vamos torná-la preta só para que você possa vê-la. Vou clicar neles, destrancá-lo. Na verdade, vou torná-lo ótimo para que possamos ver atrás um pouco melhor você destravar para usar novamente. OK, então onde quer que o ícone da casa seja feito. E a próxima coisa que podemos confiar em você é lá vídeo ICOM Então começar a retirar outro retângulo. Eu realmente vou centralizar isso na tela e para este aqui porque nós estamos fazendo como um ícone de quadro de vídeo. Eu não vou até o topo. E podemos mudar isso mais tarde. Quando reduzirmos esses ícones para fazê-lo parecer um pouco mais uniforme, poderíamos pegar este botão triângulo aqui, na verdade desenhar um triângulo segurando a fuga de turno, ter um pequeno triângulo. Nós temos que excluir o deles Nós podemos girar este triângulo para que a ferramenta de rotação apareça quando você tem um direito aqui e você pode apenas segurar o deslocamento que vai girá-lo por encaixe, que é muito útil. Centro civil. Esta bem, na verdade, a mesma coisa aqui. Vamos subtrair essas duas formas. Vamos desligar a fronteira. Então, lá temos um ICOM de vídeo retângulo para que a próxima coisa que podemos fazer é criar ou descobrir ícone. Então vamos tomar este círculo no turno da opção final. Eu vou criar um retângulo aqui na verdade, sobre como este Você usa vai escrever. Coma que 45 graus. Faça este o cabo de reboque são como pesquisa, ícone Descobrir. E nós também vamos adicionar estes juntos. Aqui vamos nós. É o nosso ícone de descoberta que vai desligar a borda por segundo. Na verdade, eu acho que eu quero que este seja um fora realmente mudei de idéia. O que? Quero que este seja. Bem, na verdade, use. A criação de um grupo de caminhos está em conjunto. Em seguida, o último vai criar um perfil como em um grande círculo novamente. Vamos abaixar isso só um pouco. Na verdade, vou criar um corpo pequeno para nós. Bem, então vamos arrastar um retângulo. Então eu vou fazer o comando de deslocamento direito para trazer isso para a frente. E eu vou copiar este círculo e depois colá-lo aqui à direita e o que vamos fazer para você é realmente subtrair essas duas formas para começar a formar o corpo, desligar este porteiro. Então também podemos arrastar Isso acaba um pouco. Então eu estou apenas clique duas vezes novamente para que eu possa selecionar o raio na forma de corte que acabamos de fazer. E eu vou clicar duas vezes de novo. Na verdade, vou comer os de baixo. Aqui vamos nós. Vamos selecionar duas vezes aqui, depois arrastar isso um pouco e reduzir isso. Então temos o nosso pequeno ícone de perfil de usuário aqui. E se você está pensando a mesma coisa que eu estou pensando, estes parecem terríveis. Então nós vamos realmente entrar e o tamanho da justiça um pouco de cada um deles. E quando eles começarem a escalar e vocês notarão porque este é um caminho que vai escalar um pouco diferente, ele não está preenchido. Então estes vão parecer maiores quando eu começar a reduzi-los. Ok? Isso e escala isso também. Ok, então você pode realmente entrar, selecionar esses fundos vai desbloquear e, em seguida, excluí-los eo que precisamos para dio vamos criar algum texto para ela. As minhas armas. Isso provavelmente não vai ser um tamanho 40, mas, você sabe, ensinar a ficar em casa. E nós também gostamos disso e talvez nos leve como 12. Nós vamos realmente torná-lo regular e vai copiar e colar isso sobre e colocar um abaixo de cada nome na verdade, em um seleto todos estes e centrá-los também. E uma vez que temos casa selecionada aqui, o que vamos fazer é realmente fazer esta tigela porque vídeos não selecionados, eu vou realmente fazer isso agora em vez disso, o que podemos fazer é mudar isso para vai viajar um. Na verdade, isso é um pouco pequeno demais como estes, ambos nós também vamos fazer o mesmo para o nosso perfil. Faça com que seja muito seguro. Seu peso mexicano. Um duplo clique neste triângulo é um pouco grande demais. Consigo encontrar o limite. Essa é a minha não existir aqui atrás. Às vezes é mais fácil ser rápido e depois clicar duas vezes furiosamente como eu faço. Às vezes isso foi estranho, não é? Certo, é uma habilidade na cidade. Quem sabe o que aconteceu lá? Está acima do meu salário. E eu menti. Na verdade, vou mudar esses 21 você 1.5. Dê uma olhada. Quizzes pré-visualizando novos realmente em uma escala. Cada um sobe um pouco. Na verdade, vou largar isto. Só um cabelo para que possamos desligar isso e ver como fica. Ok? E a próxima coisa que podemos fazer é preencher nosso menu de notícias para a página inicial. 5. Telas principais: alimentação e perfil: Então, agora que temos sobre uma navegação criada, poderíamos entrar e começar a preencher nossa página inicial com nossas novas histórias para que possamos criar um cartão para isso viver em vez do grande voltar para casa que realmente queremos que eles sejam. Usamos esta cor do fundo do porteiro fora quem estava esgueirando em torno destes apenas um pouco. Certo, Jenna. Grande ofensa. Sim, isso parece e, em seguida, será uma prévia rápida apenas para ter uma idéia de como? Ok, isso deve ser bom. Então isso vai caber em alguns artigos de notícias bem ali. Então o que precisamos, precisamos de um cartão de fundo para qualquer notícia Artigos foram para cair sombra sobre isso novamente. Isso é porque há algo que estes Ercan selecionam. Está sentado em cima do fundo. Então eu vou acertar o nosso empate. Outro retângulo aqui. E o que isso vai ser é a imagem do artigo, e eu vou manter a opção aqui, então nós só poderíamos obter aquele raio de um canto e fazer a mesma coisa. Segure a opção lá e faça com que se encaixe no lado de fora. Então isto vai ser como o nosso espaço reservado de imagem, e este tamanho parece bom por enquanto. Podemos realmente ir em frente e criar outra caixa de texto. E este seria o lugar para o título de nossos artigos. Vamos tentar com cerca de 18 anos e vamos regularmente. Teremos a ousadia de ver se conseguimos algum tipo aqui. Não é, também. Página seria para alinhar a mesma diferença lá. Só precisamos de uma cópia de espaço reservado lá, por enquanto. Tinha escapado. Ser para obter o setor também. Vou fazer com que estes 18 genes se tornem normais. Obrigado, Sali. Talvez um pouco menor aqui. Vou trazer isto para baixo um pouco para fazer pequenas coisas um pouco menores. Você também pode nos trazer imagens em um pouco. Lá vamos nós. Então, este será um bom tamanho de artigo em miniatura. Você precisa apenas de algum texto de espaço reservado lá, veja como ele se parece. Então qualquer coisa de teclado aleatório funciona divertido. Vou copiar e colar isto sobre o que queremos no fundo disto é a localização e a que ele se tornou pessoal para que pudéssemos colocar o tempo aqui, na verdade, para o seu texto de área de novo. Vou fazer com que 12. Vamos escrever uma linha que eu vou explicar porque estou chocalhando direito. Alinhando isso em um segundo. Em seguida, na imprensa do ofício p para a ferramenta caneta irá desenhar linha rápida aqui. Vamos fazer este branco mais copiar e colar isto aqui e aqui. Queremos a localização para colocarmos a localização. Vamos fazer destes dois uma luz, na verdade. Certo, vamos fazer o local mostrar grego nisso. Bem, é como estes em apenas um pouco. Ok, então agora temos, tipo, tipo, um espaço reservado para o que está preenchido. O artigo vai parecer que eu acho que é um pouco maior também. Vamos fazer Dio é agrupar tudo isso e chamaremos de cartão. E se você não previu isso ainda, nós vamos usar a grade de repetição e nos arrastou todo o caminho para baixo. Então nós temos, tipo, um feed de notícias cheio de artigos, comando do Inimigo muda o colchete esquerdo, e vamos enviá-lo para trás dessa maneira, é sempre abaixo sobre isso agora. E uma vez que isso é realmente acima, nós também vamos colocar drop shadow sobre este fazer negativo três. O que isso vai fazer é inclinar a sombra para cima para lá vamos nós. Então vamos selecionar a grade de repetição e vamos voltar para esta repetição incrível novamente. E desta vez vamos realmente clicar na imagem também. E vamos dizer que vamos fazer a cidade para que possamos embaralhar estes por aí. Mas realmente qualquer cidade tiro é bom, mas nós queremos qualidade para ser alto suporte. Só isso, otimizando você se aplicará. Ok, assim que tivermos nossas imagens fornecendo, vai demorar um segundo porque ele tem que baixar cada uma dessas imagens. Podemos entrar e também podemos colocar um título. Hum, vamos tentar. Nós podemos dio Não há um perfeito para títulos de artigos genéricos. Você pode clicar e ver se alguma coisa funciona. Funciona melhor, mas apenas para ter algo que é uma espécie de um lugar mais velho vai ficar com o comércio e fazer nome do produto, porque geralmente você começa como um multi nome palavra, então aplicar isso lá também. Aqui no fundo, à esquerda para o texto de tempo. Nós também podemos colocar uma data e hora em, bem, então nós vamos selecionar para quantidade e bem, na verdade você personalizado. Então você obtém alguns exemplos de diferentes coisas personalizadas que você pode fazer. Você ouve o que realmente vai didio é este recolher h Então nós vamos ter uma hora bem ali E então nós também vamos didio um air api assim que nós mostramos uma hora e, em seguida, o tempo P m ou A M depois também vai aplicar esse Bayer E além disso, temos a nossa mensagem de localização. Podemos ir até aqui para o seu endereço e depois clicar. Você poderia a cidade aplicar a isso também e pistas? E agora, quando olharmos para fora Oops! Quando olhamos para trás aqui temos preenchido grade de repetição com, como, nosso artigo grosso títulos de artigo. Alguns deles eram muito estranhos, então alguns dos horários AM e PM não apareceram. Na verdade, vou voltar e ver se conseguimos editar isso. E também vou ver se conseguimos um título mais longo para um produto. Podemos tentar a empresa, e, como um bordão, isso provavelmente seria bom. Ou você é um negócio? Nós aplicamos isso e então desta forma ele vai nos dar apenas um mais longo para linha de direção, talvez slogan. E então ele possui tempo de verificação dupla no tempo, podemos realmente para Stephen tempo normal. Ainda tem o artigo de tempo foi postado também. Certo, então podemos abrir isso, ver como fica. Certo, vou mudar isso só um pouco. Eu estou pensando naquela escola sobre repetição grade como nós podemos realmente ir em frente e apenas arrastá-lo para fora e fazer uma página de ervas de pergaminho. Então, se clicarmos no quadro de arte e arrastar este fundo aqui será realmente capaz de rolar a página também. E a coisa é, se você notar. Então, se fizermos a página tão longa, pré-visualização rápida e escolarmos o fundo nunca escolherá com ela, e não queremos isso. Então o que, nós vamos dizer que ele realmente tem um predador. Conseguiu? E nós vamos selecionar todos esses elementos aqui, e eu trouxe um valete e será fixo posição ao rolar. E agora, se voltarmos para uma prévia, ter um bom, bom longo rolando sua página. Ok, então agora que são páginas iniciais, nenhuma. Podemos ir ao lado da nossa página de vídeo. Próximo da lista. Volte para a guia de design em irá copiar e colar este super. Chamamos isso de um vídeo, então eu só vou ser um cartão deste berço no grupo, e vamos apagar esse carboidrato de baixo. Vou apagar as imagens aqui também. Bem, na verdade, vamos manter esta mensagem, mas eu vou fazê-lo. Dano que vou desmanchar isto é. Bem, vamos sair da ficha e do menu para que possamos ver um pouco. O que está acontecendo? Vamos levar este título para o fundo porque queremos que as nossas telas de vídeo tenham muito mais espaço. Simples. Selecione a hora no local e coloque todos os anos o título do Diretor. E vamos arrastar isso para fora. Então tem um pouco mais de espaço. Vamos pressionar e desenhar outro retângulo. E isso será como nossa janela de visualização de vídeo. Vamos tentar tornar este tamanho um pouco mais realista. Vamos arrastar-nos para baixo. Não, contemplem a opção, Ault. O que quiser chamar e arrastar o raio até corresponder, desligar a água e outra vez. Vou brincar com isso um pouco até parecer certo para um vídeo de verdade para você. Certo, então vamos Grieb tudo isso juntos. Bem, basta nomear o vídeo e então você adivinhou que funcionou. Tenho que repetir. Bom. Então eu vou mudar de comando para o colchete esquerdo, e nós vamos enviar isso para trás. Apenas cerca de um valete está no topo. Ok, então agora com esta grade de repetição selecionada, podemos ir para os plebeus e repetidor rápido. Isso foi estranho, mas acho que só queria me jogar. Atirou-me para a minha área de trabalho. Certo, então podemos selecionar nossa imagem aqui. E vamos apenas Teoh, talvez câmera Stephen, pegar algum equipamento de câmera. Imagens otimizarão as imagens. Está bem, Sweet. Podemos aplicar isso. Isso é baixar danos. Então, pode levar um segundo e, em seguida, para o título iria voltar para você. Vamos fazer o nome do produto aqui, já que temos câmeras e o tempo e a cidade ainda são os mesmos. Mas se quiséssemos novas informações, poderíamos refazer desta vez para aplicar novos tempos. Também podemos aplicar a cidade. Ok, então agora temos nossa página preenchida com as janelas de visualização de vídeo deles. O único problema é que não é muito óbvio. Estes vídeos de ar, porque não há como ícone de argila ou botão no meio deste para que possamos realmente fazer é voltar e ter isso no crédito repetitivo. Então, se clicarmos duas vezes e começarmos a desenhar forma tão angustiada e colocar um círculo para cima para desenhar um ícone de círculo ali, Ele sabe que aparece no resto da grade de repetição selecionada, desligue a borda. E então o que vamos fazer é apenas criar um ícone de jogo. Se fizermos isso menor, dobraremos rápido de novo e teremos essa ferramenta triangular. Eu não memorizei o atalho para isso porque este muito novo eu tenho certeza que há mais uma burocracia isso e centrar isso dentro do nosso assunto círculo. Na verdade, vou diminuir um pouco a capacidade. Ok, então agora temos bons ícones de jogo e meio sobre um vídeo. E se quisermos mais vídeos para protótipos de uma tela de rolagem, podemos distraí-lo, e você pode voltar a repetir, para obter mais imagens para ela. Vamos dar uma olhada em como isso parece. Está parecendo bom. Até agora, vou aproximá-los um pouco mais, deixá-los distantes. O título desta página também é agora vídeo. Podemos ajustar nosso fundo tem que refletir isso também. Queremos que o nosso ano de texto seja ousado. Este pode voltar a ser regular, acredita que podemos criar. Este é Phil, e é o triângulo ficar muito pequeno porque nós ajustá-lo antes é um caminho para que possamos realmente escalar isso de volta. Então é um pouco mais de um tamanho uniforme. Parece um pouco mais com isso. Ok, é a próxima página que podemos criar. É lá descobrir página, E isso vai realmente ser muito semelhante a esta home page. Então, vou copiar e colar isto. Vamos renomeá-lo. Descobrir que nós realmente vamos pegar emprestado este ícone de pesquisa em uma cópia e colado sobre e colocá-lo aqui em cima no topo. Certo. Nós podemos realmente dimensionar isso um pouco para baixo e arrastar esta repetição para baixo porque nós vamos colocar algum filtro uma opção de filtro no topo para que pudéssemos pegar um retângulo que deveria haver. Certo, vamos arredondar, fazer este cinzento na fronteira. Então o que isso vai ser é um pequeno botão de filtro decretado filtros para procurar artigos de notícias quando uma sombra cair novamente, eu vou pegar este texto aqui e copiar e colar. Então lá temos um pequeno botão de filtro novamente. Podemos visualizar isso apenas para ter certeza de que o tamanho está OK. Onde é isso? Vamos arrastar isso agora um pouco mais. E porque esta é uma página de descoberta, nós poderíamos realmente mudar os artigos aqui e novamente. Vou pegar uma cópia e colar. Este texto em cidades será os artigos mais lidos para uma rivalidade Discovery. Na verdade, vou deixar cair este som lateral. Mostre isso ao cabelo. Certo, então vamos pré-visualizar isso. Oh, então se você pretende nós, nós copiamos e colamos isso do fundo. Então, isso ainda está consertado. Então ele ainda está em cima do costumava ser pode ir e corrigir isso. Muito rápido e furar. Olhe isso de novo. Ok. Parece bom desta vez. Então podemos causar isso. Vamos em frente e atualizar aqui em baixo. Vamos fazer este três. Na verdade, não podemos preenchê-lo porque é apenas um caminho delineado. Mas podemos reservar um pouco este ano que ele selecionou aqui, mudar o espectro fronteira regular vai torná-lo branco. E, em seguida, 1.5 como o resto deles. Ok. Então podemos chamar isso de descoberto. Ok, então o último que vai fazer é aquela tela de perfil. Então, novamente, poderíamos copiar e colar na tela inicial. Não vamos tornar este escalável, então podemos trazê-lo de volta ao topo. E apenas em Agora, você pode selecionar em um desses aeroportos l apenas para se certificar de que 896 é a altura. Então você pode voltar para isso e apenas ter certeza de que é o tipo correto porque é fácil perder um pixel ou para você lá embaixo na parte inferior. Então, eu vou realmente manter esses artigos lá por enquanto. E nós usamos isso é como uma seção de artigo favorita para que possamos criar nos lábios. Isso é tipo o nosso cabeçalho. Como a foto do perfil. Exclua este texto inicial. Anos de trabalho quebrados, na verdade, vá procurar outro plug in, e se você rolar para baixo, devemos procurar seu perfil de usuário. Podemos instalar isso. Isso vai fazer para nós é imagem de enchimento aqui. Desligue a fronteira. Eles foram usados Ramage e aparentemente nos chutar desktop de novo? Então nós automaticamente temos uma imagem para entrar para mais fácil aqui, o que é um recurso muito legal. Podemos copiar e colar esta viagem,a Srta. Leia o texto de novo. Podemos copiar e colar esta viagem, Eu desprezo ter que criar uma nova caixa de texto. Então, bem, tipo de apenas um nome aleatório para isso. E então pode haver alguma informação de perfil ou algo assim, mas será o tipo dele? Ela era membro desde 1966. Estamos no aplicativo antigo. Aqui estávamos nós os primeiros, então vamos realmente fazer este 16. E as comodidades, ainda é leve também. Então temos um bom contraste. Eu bati este aqui só para ouvir, ok? E então o que nós vamos dificar aqui é realmente mostrar on-line para quebrar essas duas seções, e isso vai ser ferido, como a maioria dos artigos gostados, ou recentemente ler cópia civil e colar este texto sobre e então nós vamos mudar isso para baixo Cerca 16. Deve ser bom. Copie e cole isso novamente. Feijão colá-lo mais uma vez. Então, haverá três seções neste perfil tão recentemente Leia curtidas que lhe enviaremos isso e preferências, e então vamos escrever uma linha que para isso, Certifique-se que isso está centrado. Então vamos virar o nosso grande só para checar tudo o que eles eram justos. E esses dois não são selecionados agora, então nós vamos realmente fazer isso que eu gostei e novamente vamos ajustar isso ligeiramente porque as seções selecionadas nós vamos realmente colocar em sublinhado também. Então isso vai acontecer. Agir é como uma barra de tabulação, e vamos colocá-la em você. Então, além disso, o perfil que a Rússia vai lançar como um menu de transbordamento, então isso pode ser algo como configurações de perfil. Suas coisas. Você pode entrar e obter, tipo, ajuda para criarmos os lábios progredindo. Ele vamos arrastar um pequeno círculo aqui na fronteira. Vamos realmente usar grade de repetição para criar. Este pequeno ícone irá arrastar para baixo e, em seguida, ajustar o tamanho criado. Na verdade, vou fazer isto um pouco mais pequeno. Talvez só ali. Vamos durante a grande volta para ter certeza que está no lugar certo. É útil para, se você gosta, você também pode trazer como o nativo você. Eu tenho a minha arma aqui, Eu posso arranjar-lhe raquetes e obter Apple IOS, IOS ou Google material. Seja o que for que você está projetando e pode realmente puxar o cabeçalho. O Eso. Você tem uma idéia de quão longe você poderia ir para isso correndo para, tipo, configurações de bateria ou WiFi? Só uma nota rápida. Nem sempre é necessário. Mas pode ser bom ter como referência. Mas agora tem que haver algum espaço no topo para isso ir. Então vamos renomear nosso perfil. Então nós também copiamos e colamos isso, e nós vamos apenas ir em frente e apenas dar uma subversão para curtidas. Então podemos arrastar isso, dimensionar isso para baixo e, em seguida, fazer nossa seção de gostos em negrito também. E podemos mudar isto para a luz. Aqui vamos nós. Então agora ela está recentemente encarnada e, como a seção está pronta para ir. É outra. Temos nosso perfil de usuário configurado. Podemos ir e eu só esse valete de baixo de novo, mudar aquele 1.5 e então destacar o arquivo do aeroporto. Não quero fazer isso de novo, então vou deletar daqui, copiar e colar. Alguma vez economizou um pouco de tempo? Ok, então nós temos nossa página inicial ou página de vídeo descobrir no perfil. Então isso disse Fowler, sobre isso. Agora, a outra coisa e a última coisa vai querer se você é como uma página de artigo simulada e tudo que eu fiz lá foi apenas pode ter aqueles aeroportos Riches disse que eles são legais, e mesmo nós podemos realmente apenas copiar e colar esta página inicial. vou apagar esta grelha Na verdade,vou apagar esta grelha. Bom. Exclua a parte inferior agora tem para você. Então isso nos levaria em uma nova página para não precisarmos do semestre inferior, mas haverá uma grande imagem no topo. Como? Copie e cole este texto e crie espaço para um título de duas páginas. Acabei de pegar uma cópia e colar esse nome ali. Só para termos uma idéia de quanto texto pode ir no espaço e, em seguida, por baixo terá quem publicou o artigo. Nós também podemos colocar, como, talvez, um autor ou algo assim, apenas uma maneira de realisticamente dar crédito aqui. Então nós podemos realmente copiar e colar de volta aqui nossa hora e localização. Ok. E por isso vamos querer fazer aqui. Na verdade, é preenchê-lo com texto para simular isso. É um artigo que você tem que fazer que mais uma vez que eu escapei acidentalmente. Então, outro plugue que podemos usar. Na verdade, é chamado ou, hum, Epsom. Então, basicamente, isso vai ser texto de espaço reservado. Você pode vender isso também, se quiser. Acho que é muito útil, e mais uma vez terei que desenhar uma caixa de texto. Então esta é parte da razão que eu odeio usar caixa de texto desenhada que preferem copiar e colar coisas sobre. Mas isso é tão estranho. Isso está me jogando para a área de trabalho. Veja, apenas mais validação dedo sempre apenas café e tecnologia. Copie e cole Texto sobre. Não suporto as configurações de texto EC edição de texto ferramenta de guisado para tornar este regulador e branco o tamanho 16. Então, agora vamos preencher isso com texto de espaço reservado. Tem que aceitar o texto de resposta. Ok, então agora temos muito texto é um espaço reservado. Um artigo pode realmente arrastar e soltar aqui e incluir outra imagem. Teoh, talvez um pouco menor Rastreou isso um pouco, então copie e cole para uma segunda parte do nosso artigo, podemos realmente ter um subtítulo também. Quero o nome dele, esta aposta. E assim, no final do nosso artigo. Nós, na verdade, eu também gostaria de colocar uma seção de artigos relacionados. Podemos fazer esse texto menor e copiar e colar isso, então teremos que arrastar isso para baixo. E você poderia fazer este pergaminho ainda mais, se você quisesse. Vamos apenas fazer dois artigos e tem um exemplo na parte inferior. Você pode pré-visualizar isso rapidamente. Tem um artigo de exemplo decente. Feche isso durante o grande off, e você pode se sentir livre para jogar em algumas imagens aqui para você. O que eu gosto de fazer dedo do pé torná-lo um pouco mais realista é que você poderia apenas pegar imagens reais de um artigo e apenas tipo de conectá-lo. Eu peguei este aqui apenas algumas imagens sobre, como imóveis em torno de Atlanta, e você pode preencher algumas dessas informações se você precisar. E novamente, este é apenas um artigo aleatório que eu essencialmente peguei da Internet. Mas vamos em frente e dar-lhe um bom título que é mais credível. Ele também nos permite colocar algumas informações publicadas do editor para possamos olhar para que uma vez que pornografia nas duas últimas coisas para adicionar será um Baquero e também talvez como um ícone de compartilhamento para que possamos transformar um grande volta em. E então eu seleciono p para a ferramenta de caneta. Vou desenhar a primeira linha em espera, mudar, desenhar a segunda. E aí vamos nós. Pode ser o nosso Baquero. Então eu vou realmente fazer este tamanho três, que nesta caixa fora escala isso um pouco para baixo. E então, se você notar que é muito difícil ver que a seta branca nos fundos da imagem iria realmente criar um relé. Então nós acertamos o nosso para um retângulo, e nós vamos fazer o Phil preto aqui. Em seguida, solte a opacidade para baixo e, em seguida, vá em frente e comando mudar o colchete esquerdo e envie para trás e certifique-se de que isso é para a frente. Bom são painel de camada para se certificar de que tudo está em ordem. Então o caminho é o topo da carta que estava. Certifique-se de que está no lugar certo. Na verdade, basta reorganizar a partida, por favor. Lá vamos nós. Isso é um pouco mais crível. Talvez um pequeno membro poderia 33 parece bom. E agora que temos o nosso euro de volta, eu também posso fazer como um pequeno ícone de compartilhamento. O que ele seria grande nos lábios será desenhado. Três círculos. Podemos realmente fazer Skopje e colar isso também. Desligue a fronteira. Ele vai fazer essas pequenas cópias menores e colar essa cópia círculo e colá-lo mais uma vez. Então vamos ajustar o tamanho disso um pouco e esticar isso. Então vamos agrupar tudo isso, reduzi-lo um pouco, temos que ter certeza de ir para editar esta linha também. Talvez dois parece OK, e então que tipo de colocá-lo em um tamanho semelhante? E eu tenho sido o grande. Certifique-se de que é um bom argumento. Agora temos um ícone de encosto e cadeira. Se alguém quiser partilhar o artigo, está bem? E então isso é praticamente tudo. Para todas as nossas telas. Na verdade, haveria muito mais telas e uma aplicação regular, mas este tipo de cobre alguns bons fundamentos. Isso fornece algumas noções básicas sobre como criar várias telas muito rapidamente, especialmente com a ferramenta repetidor. E a próxima coisa que podemos entrar é prototipar isso e depois adicionar algumas animações. Se você quiser usá-lo para, como um rolo de destaque ou algo dessa natureza 6. Criação do protótipo: Agora que temos todas as nossas telas projetadas para o seu, podemos começar a criar o protótipo em Weaken. Agora que temos todas as nossas telas projetadas para o seu, Selecione cada para este muito digitado fora do topo, e vamos começar com a nossa tela inicial e uma coisa para saber Não há realmente nenhum botão na tela, então nós vamos realmente querer uma transição de tempo para uma tela de sinal, e para fazer isso irá selecionar a placa de arte e na parte superior terá esta opção de tempo. E agora as opções de tempo de montagem rápida só estão disponíveis quando você seleciona toda a placa de arte. Não está disponível se você selecionar apenas um botão singular, mas para isso tudo bem. Então, hora da torneira. E assim queremos a sua transição para a nossa tela de login e cerca de 0,3 segundos, e a transição está bem. Entrar, dissolver. Ele está fora. Além disso, se estou assim, está tocando. Ver isso parece bem. Então é realmente muito rápido, que na realidade é bom porque você nunca iria querer tela de abertura para ficar lá mais tempo do que eu tinha que estar. Mas só para termos um melhor ideo do que parece, vamos 0,8 e olhar para ele. Mais uma vez. Ok? É uma fuga lá. E Alex Good. Até agora. Então a próxima coisa que podemos dio é conectar nossa inscrição. Mas uma vez que este fluxo o usuário não tem uma conta, vai criar conta para que possamos selecionar esse botão e temos que lidar com o meu contrato que acabou. E então aqui nós olhamos para os gatilhos toque ações, transição, o que é bom. Dissolver estes 0,3, tudo bem. Então, se olharmos para isto, é como, inscrever-se e então chegamos à próxima página, o que parece bom. Vamos recuar e minimizaremos isso por enquanto. E assim podemos usar esse processo para realmente nos conectar. Todas estas telas irão selecionar que criar o botão conta e passar para a nossa tela de boas-vindas na tela de embarque. E então tudo se verifica lá fora e um rápido agora, então queremos que as pessoas sejam capazes de realmente interagir com sua tela de embarque. Então o que vamos fazer é criar outra tela aqui para simular esses tópicos ou ser selecionado para que possamos realmente copiar e colar isso e mudar para a aba Zahn e digamos que novos usuários realmente interessados em calças? Isso parece divertido, não é? Então o que podemos realmente fazer é simular que isso foi selecionado e se você notar que eu mudei e sua própria grade de repetição. Então eu vou desfazer isso Nós vamos realmente possuir o grupo da grade aqui. E desta forma podemos editar cada seletor individual. Então vamos lá, calças. Vamos virar este verde e também para na tela de texto. E só para adicionar um pouco mais você eu para que pareça que ele está realmente selecionado. Também colocará um círculo no centro. Então impressionando ele e, em seguida, mudar opção para arrastar um círculo no centro. E então nós também preenchemos isso com verde também. E assim, uma vez que algumas coisas aqui é realmente selecionado vai fazer isso, mas ativo também. Então, vamos clicar duas vezes, fazer a tela e mudar o texto um passatempo para 100%. Então eu vou realmente selecionar todas essas tábuas de arte e mudar de volta. E então precisamos lembrar de voltar ao protótipo e nos conectar. Se o usuário seleciona calças, por que não sei por que eles estão tão interessados em calças, mas ensinar a sua própria transição para toque. Dissolver isto está tudo bem. Vamos dar uma olhada rápida nisso. Então, se formos aqui, selecionar calças que temos, nosso tópico é selecionado, ele se torna destacado e nosso botão se torna ativo. Então isso é bom. E se quisermos, também podemos adicionar mais uma tela e simplesmente replicar o mesmo processo. Porque talvez alguém esteja interessado em mais do que apenas calças. Eles também estão interessados em bacon. Sim, sempre bom. Então eu posso realmente apenas copiar e colar isso sobre e eu vou dizer um rápido e aqui colar e notei que eu cliquei duas vezes em, que realmente adicionou para o grupo específico. Se você simplesmente copiar e colar sobre o topo, ele não seria adicionado a esse grupo. Só um Newt rápido. Leve-o para o lado direito do espaço certo. Mude isso para verde também. E depois voltamos à nossa guia de protótipos, arrastámo-nos. Então podemos aliviar 0.3 que transições bem. E também podemos ir sem ter conectado ao nosso local de habilitação. Então, na verdade, é Travis do topo. Então vamos nos inscrever. Vamos criar uma conta de calças, bacon, a combinação perfeita, e então podemos ir em seguida para permitir a localização passo tão perto daqui. E depois de fazermos isso, podemos conectar nossa localização de habilitação, e isso deve nos levar à nossa página inicial. É apenas pré-visualização muito rápido, e então nós estamos em nossa página inicial escalável e nós temos nossos joelhos pés que surgiu. Ok, então a próxima coisa a fazer é conectar esta guia inferior para que você possa realmente selecionar ambos os grupos e agrupá-los juntos. E a razão pela qual eu estou agrupando sobre isso porque eu quero ser capaz de rapidamente em todo o elemento apenas uma coisa, porque se eles não eram Grupo D, eles têm que clicar no vídeo ou no ícone para fazer a metade inferior funcionar. O que queremos contar funciona juntos. Então eu vou apenas agrupar esses elementos enquanto eu ir e você vai notar é, Bem, se eu agrupá-los, eles realmente não estão mais definidos para rolar, então apenas certifique-se que é o topo voltar e vamos entrar e fazer isso para cada um. Ele vai arrastar cada uma dessas linhas sempre para a tela correspondente, e então nós podemos fazer o mesmo para o resto destes. E então somos compartilhados uma posição fixa durante a rolagem. Cada vez que fazemos isso, estou usando o comando G para cumprimentar cada um desses elementos. estou Enquanto eu for, vou me certificar de ter posição de escolha. Pode ser muito tedioso conectar como um fundo tem em todas as telas. Basta lembrar, há, tipo, tipo, pequenos elementos que você tem que lembrar de fazer cada vez, e então nós vamos chegar a este último. Bem, na verdade preciso disto ao mesmo tempo. Ok, isso deve ser bom. E um atalho rápido. Você pode pressionar o comando a e ver todas as linhas apertadas de crédito que você criou, e nós podemos dar uma olhada rápida e verificar se tudo está conectado e parece bom. Então vamos tentar isso. Pré-visualização. Sim, tudo parece bem aqui. Concordo sobre o salto e meio que simular. O que sobre isso? Agora seria como E se você se lembrasse, alguns desses elementos são apenas copiar e colar sobre ele. E se você quiser, você voltar para o repetidor e obter novos como títulos e imagens. Mas não é muito necessário. Deve ficar claro que eles são diferentes, mas se você quiser fazer isso, você pode usar os mesmos passos que fizemos antes para fazer isso muito facilmente. De modo que tudo vai fazer é conectar esta guia gosta para este e, em seguida, ler recentemente volta para aqui. Podemos fotografar isso de novo. Então, para este, nós vamos realmente atualizar esses artigos apenas para que pareça que estamos realmente clicando em uma tela diferente. Mas isso deve ser muito rápido para Dio com os plugins repetidor vai voltar para o nosso plugging menu grabber, Peter, selecionar sua borda parece bom. Então aplique sobre e o texto sem seletor aqui. Não, acho que sim. Agora temos diferentes, como, como, imagens de nome de texto de espaço reservado. Então, se entrarmos, visualizamos isso mais uma vez, obtemos algumas diferenças agradáveis, então, na verdade, parece um recall em uma tela diferente. Ok, então agora que Stone também vai conectar nosso artigo falso aqui também, e vamos fazer isso com página inicial, então eu realmente vou pegar essa imagem emprestada. Quero dizer, uma cópia e colar. Aqui, faça isso todo descontraído. Nós estamos realmente indo para ir em frente e não lidos com este bom, e eu vou substituir essa cópia e imagem colada aqui mesmo vai acabar com Greep tudo. Na verdade, vamos reduzir isso, chegar ao tamanho certo. Vou mandar isto para o topo do turno de comando, a direita, e depois vamos embora. Apareceu objeto. Eu menti. Nós não vamos fazer isso. Então o que eu fiz lá foi virar o preenchimento e torná-lo apenas uma fronteira. Parece para mim. Se for, sou apenas um mentiroso. O que Will realmente Dio é completamente passo para trás. Ok, então nós podemos realmente rever e o que vamos fazer em seguida desconectar artigo com nossa página de artigo falso aqui. E para fazer isso, eu realmente vou pegar essa imagem e apenas torná-la a mesma imagem no primeiro artigo. Então basta copiar e colar lá e nós podemos irritar esta grade e o que nós vamos querer Sr também no grupo isso e então nós vamos querer esta forma de volta. E uma vez que uma imagem já está nisso, não podemos usá-la como máscara. Mas podemos refazer a forma muito rápido. Então, uma pressão já e qualquer retângulo para cima mantenha o deslocamento para arrastá-lo através e, em seguida, combiná-lo sem forma. Bem ali e de novo. Estou segurando tudo para puxar este raio de novo no topo para levá-lo para onde precisamos. Vamos apagar essa imagem antiga, e então vamos copiar e colar essa imagem aqui. Dimensione isso até o tamanho certo, apenas um pouco. Então vamos realmente usar o comando shift colchete esquerdo para enviar isso para a parte de trás, ver o que está acontecendo. Vamos apenas pegar ir até aqui no painel de camadas, na verdade, trazer isso para cima. Há um retângulo para selecionar filmes indo objeto e forma Masco. Então lá vamos nós. Então agora temos a imagem do nosso artigo neste exemplo, e nós também podemos pegar o título para que você possa dobrar rápido aqui, copiar e, em seguida, colar o título sobre a nossa página inicial. E também mudaremos o nome da cidade para que corresponda. Então agora, quando temos um protótipo e selecionamos este carro, podemos arrastá-lo para esta página, verificar na janela de pré-visualização. Aqui vamos nós. Então agora temos nosso artigo aqui. Precisamos conectar esse herói de volta também. Ok. E então para este predador no que nós realmente vamos dio é usar a guia auto animar em vez de apenas transição. E basicamente, o que isso vai fazer com que essa imagem preencha o espaço que essa imagem ocupa. E a forma como w x d faz isso. É que porque esta imagem é nomeada a mesma coisa nesta página, ele vai apenas interpolação entre as placas de arte. Então você percebe como conseguimos mover o texto porque usamos o mesmo texto. Então queremos que a mesma coisa aconteça com uma imagem. Vamos dar uma olhada. Aqui estão as imagens realmente chamadas de grupo de massa um. Então, o que poderíamos fazer é copiar e colar que sempre e vai deslizar sobre, colocar fora do caminho aqui podemos excluir esta imagem, selecionar Dart Board e, em seguida, colar o que poderíamos fazer para escalar isso para que ele se encaixe. Vamos dobrar o fim rápido, ajustar este raio para ir até o fim, e vamos certificar-nos de que está centrado na página. E também usaremos o suporte esquerdo da nave de comando para enviar isso de volta. Arraste nossa sobreposição de volta, certifique-se de que ela se encaixa. Então vamos sentar isso também. Então eu estou apenas usando o comando do colchete esquerdo. E então eu vou enviar as coisas de volta 11 lugar em vez de deslocamento de comando colchete esquerdo que se estendeu para a parte inferior. Ok, nós vamos realmente fazer isso é mais rápido para este quadro de arte. Verifique isso mais uma vez. Certo, então o que acontece é que temos um bom efeito. A imagem deles é como um efeito agradável, como preencher o espaço agora. Mas na verdade não quero que o texto salte assim. Só quero que a imagem o faça. Então o que podemos fazer é realmente entrar e renomear este texto para ser. O título é bom e vamos precisar do mesmo Atlanta deve ser divertido, e esse tempo vai realmente mudar para o tempo. Eu menti vai mudar isso para cidade duplo clique em uma cidade. E a razão pela qual eu estou mudando esses nomes é que Debbie XY usa a nomeação de camada para realmente decidir o que ele fora de animações. Então, se eu tiver algo que é Atlanta nisso, nosso quadro e neste quadro de arte, algo também se chama Atlanta. Isso é o que ele vai animar automaticamente. Então é por isso que voltar e mudar os nomes King pode melhorar a qualidade da animação, porque às vezes você vai ter coisas que você não quer animar. Mas isso é só porque eles têm o mesmo nome. Então, um rápido de novo. Ok, lá vamos nós. Isso parece bom. E se você vai notar foram realmente ficando um pouco de como alguns foram problemas de camada acontecendo aqui como se estivesse escalando. Mas então camadas não estão vindo corretamente. Então o que podemos dio e parte disso tem a ver com o que estamos adicionando nesta página é uma sobreposição e esses ícones. Então, uma maneira de contornar isso é realmente colocar esses elementos para que nós vamos copiá-los e colá-los para você na página inicial para que possamos copiar e colar isso sobre. Mas vamos transformar a capacidade para zero. Então, se entre agora. Então, como esses elementos já estavam na página inicial, era na verdade uma animação muito mais limpa e que não temos essa distorção de camada estranha acontecendo porque as coisas eram mais tarde diferentes. Então, se você rolar para baixo, tudo está bem, podemos voltar e verificá-los com o tempo. Ok, então isso encerra tudo para uma seção de prototipagem e o que podemos realmente fazer é pegar isso do início e ter certeza de que tudo está do jeito que queremos ou se inscrever, criar uma conta. Depois escolhemos as calças e o bacon que temos a seguir. Podemos ativar a localização aqui. Apenas um rápido Agora, quando você realmente bater isso, Você começa o nativo você fora para aparecer, então você teria que ter outra tela de notificação. Podemos rolar selecionar artigo. Ele é a guia do vídeo. Prova. Oh, veja nossas pernas gastas embrulhá-lo para esta seção. 7. Compartilhando o protótipo: Certo, assim que terminarmos um protótipo, a próxima coisa vai querer fazer é compartilhar aparecer. Então, se você já ouvir que você pode fazer compartilhar para revisão ou compartilhar para desenvolvimento, vamos apenas fazer compartilhamento para revisão neste tutorial, então ele lhe dá a opção aqui em baixo. Se alguém com Lincoln ver alguém que você convidar, quem vai? Alguém com uma ligação? Você começa um par de suas opções, como comentários permitidos, mostrar mãos hot spot, controles de navegação Israel encontrar agora e ir e criar Link. E às vezes leva um segundo para terminar. E aqui em baixo podemos obter uma cópia, ligá-la a intensificá-la. Ponha isso na segunda-feira para ficarmos bem apertados. Agarre-se para vir bem, apenas tela cheia. Isto. Podemos realmente voltar para a tela inicial porque temos um tempo, a animação nele e há animações aparecerão no navegador da Web também. Então, se clicarmos em casa, aqui vamos nós e, em seguida, você pode clicar através do seu protótipo exatamente como você faria usando um em sua área de trabalho. E isso é realmente útil para ser capaz de compartilhar seu protótipo com qualquer um, hum, tudo que eles têm que ter. É como WiFi e um navegador da Web, por isso é muito bom poder compartilhar assim. Você também pode fazer com que as pessoas dependam comentários em cada tela conforme necessário. Apenas um recurso rápido e legal para enviar isso ao redor. E você também pode abrir estes no celular uma ondulação. Então, se você quiser enviar para alguém, você considera uma mensagem de texto com o Senado , e é muito legal compartilhá-la dessa maneira, e eu ainda encorajaria todos a visualizá-la no seu telefone também. 8. Outro: Certo, então isso encerra tudo. Uma vez que você colocar seu protótipo juntos e novamente, eu encorajo todos a agitar pré-visualizá-lo em seu telefone e realmente interagir com ele lá porque ele realmente muda. Muda o trabalho. Você dio você começa a vê-lo no contexto do dispositivo e realmente obter uma sensação de coisas que envolvê-lo. Mas se alguém quiser deixar algum comentário e tentar o projeto da classe, por favor, Dio. Obrigado, pessoal.