Introdução ao design de aplicativos móveis com Sketch

1. Introdução: Olá, sou Andrew Mercando. Sou designer de produtos digitais aqui na Skillshare. Então, como designer da Skillshare, eu começo a trabalhar em todo o processo de design, seja esboçando novos recursos, juntando alguns quadros de arame que nossa equipe de engenharia pode começar a explorar e construir, ou realmente projetar UI para, digamos, nosso aplicativo para iPhone ou um site. Então, nesta aula, vamos nos concentrar na última peça. Vou ensinar-lhe como criar rapidamente interfaces de usuário bonitas usando o Sketch. Acho que é uma ótima hora para aprender Sketch. É uma das ferramentas de design mais recentes, mas é realmente uma ferramenta que é do zero sendo construída para interfaces de usuário [inaudível]. Então, há um monte de recursos que tornam realmente fácil tirar ideias da sua cabeça e para a tela de uma maneira que você pode ver rapidamente os resultados de suas idéias e seu trabalho. Então, eu acho que esta classe é ótima para quem quer ter seu primeiro gosto de design de aplicativos móveis. Vamos abordar as noções básicas do Sketch, então coisas como criar suas primeiras formas e estilizar suas formas em seu texto para criar uma experiência muito bonita no iPhone. No final desta aula, você deve ter uma grande compreensão da ferramenta e do que ela pode fazer, e como você pode realmente aproveitá-la para fazer qualquer idéia que você tem possível. 2. Projeto: desenvolva um aplicativo de lista de tarefas.: Esta aula é realmente para iniciantes, então você não precisa de nenhuma experiência para vir para esta aula. Você não precisa conhecer nenhum outro software, nós realmente vamos começar a partir do básico do esboço e ao longo das lições realmente construir sobre esses conceitos centrais e muito rapidamente projetar nós mesmos um realmente bonito To- Fazer Lista App. Eu acho que To-Do List App é um grande primeiro projeto de design de interface do usuário, então nosso aplicativo vai ser muito simples. Não vai ser uma tonelada de telas, mas vai permitir que você seja realmente criativo com a forma como você quer projetar o To-Do List App. Eu vou orientá-lo através de projetar meu próprio To-Do List App, e você vai aprender tudo sobre os conceitos básicos de esboço e como produzir rapidamente design de interface de usuário bonito e de alta qualidade . Estou muito animada para ver o que vocês inventaram. Certifique-se de enviar seu projeto para a Galeria de Projetos Skillshare, e eu vou passar e deixar comentários e comentários sobre o que vocês criaram. 3. Formas, texto e estilo simples: Ei, pessoal, bem-vindos à sua primeira lição. Se você ainda não baixou o Sketch, acesse bohemiancoding.com. Nesta página, você poderá baixar uma versão de avaliação gratuita. Assim que você estiver configurado e instalado, vamos começar a usar um novo arquivo do Sketch. Assim que você estiver configurado e instalado, abra o arquivo Sketch que eu vinculei a você na guia do projeto de classe em skillshare.com. Neste vídeo, vamos rever alguns dos conceitos básicos de Sketch. No final, você aprenderá a criar formas como retângulos, círculos e até mesmo alguns mais complexos para criar uma foto de capa de projeto como você vê aqui. Vamos começar a recriar esta foto de capa do projeto. Então, a primeira coisa que vamos querer fazer é inserir um novo retângulo em nossa tela Sketch. Você pode inserir tudo o que quiser na tela do Sketch indo para este menu suspenso de inserção no canto superior esquerdo da interface. Aqui, você tem tudo o que você pode colocar na tela Sketch. Vamos passar pela maioria dessas coisas nesta classe, mas por enquanto, vamos começar com a forma e escolher retângulo. Você também pode usar a tecla de atalho R para acesso rápido ao retângulo. Você verá que meu cursor mudou para uma mira com um pequeno quadrado ao lado. Então, o que você vai querer fazer agora é clicar e arrastar para criar seu retângulo. Não se preocupe muito com o tamanho, porque vamos ajustar isso em um segundo. Ótimo, então você criou seu primeiro retângulo. Então, agora, vamos ajustá-lo um pouco. Se formos até aqui para o lado direito do Sketch, você verá que temos nosso painel de inspetores, e é aqui que podemos ajustar todas as várias propriedades de nossas formas ou qualquer outra coisa que selecionamos no Esboço. Então, vamos começar mudando seu tamanho. Você vai selecionar o campo de texto de largura e vamos fazer isso 800 e pressione enter. Você verá que a largura da sua forma foi atualizada assim que você clicar em enter, e agora vamos também torná-lo 450 pixels de altura. Ótima. Então, agora, temos um retângulo no tamanho exato que queremos. Então, a próxima coisa que eu vou querer fazer é realmente tornar este retângulo uma cor diferente. Então, se formos até esta seção de preenchimento no painel inspetor e clicar nesta pequena caixa cinza, você verá uma pequena dica de ferramenta que tem um monte de opções diferentes para estilizar este retângulo. Então, eu posso mudar a cor apenas selecionando a cor que eu quero deste pequeno seletor de cores. Também posso usar uma das opções de cores predefinidas do Sketch. Então vamos em frente e fazer o nosso retângulo azul. Então eu estou muito feliz com esta cor azul. Então, eu vou clicar fora para fechar o seletor de cores. Você verá logo abaixo, há outra seção chamada “fronteiras”. O que as bordas permitem controlar é o estilo do contorno da sua forma. Deixe-me tirar 10 pixels de largura para que você possa ver melhor do que estou falando. Então, a borda é basicamente apenas um contorno da sua forma. Você pode escolher onde está a posição, modo que seja dentro do centro ou diretamente fora da sua forma, e assim como preenchimentos você pode ajustar sua cor também. Eu realmente não quero uma borda nas minhas formas, então eu vou ir em frente e desmarcar isso. Então, a seguir, vamos fazer um círculo. Você pode ir para o menu suspenso de inserção ou você pode simplesmente pressionar O para criar um novo oval. Desta vez, quando clicar e arrastar, quero que mantenha a tecla Shift pressionada. O que você verá aqui é que, ao arrastar a altura e a largura do novo oval, você está criando ou permanecendo o mesmo. Vou em frente e centralizarei esse círculo. Então, você verá aqui no tamanho, criamos um oval de 230 pixels de largura por 230 pixels de altura. Porque mantemos a mudança enquanto a criávamos, as proporções desta forma são restrições. Se você seguir em frente e arrastar isso para redimensioná-lo, verá que ele permanece sempre a mesma largura e altura. Você pode desativar isso clicando neste pequeno bloqueio entre a largura e a altura no painel inspetor. Por enquanto, vou deixá-lo ligado porque quero que este seja um círculo perfeito. Vou em frente e centralizá-lo dentro do meu passado. Você verá que esta pequena diretriz vermelha aparece indicando que você agora centralizou seu círculo. Vamos estilizar este círculo. Vou desligar a fronteira e só quero torná-la branca. Então eu uso uma das cores globais do Sketch para mudar isso para branco. Incrível. Então, agora tenho um fundo e um círculo. Vamos em frente e criar nossa marca de seleção agora. Então vamos pensar sobre o que é uma marca de seleção. Basicamente, são dois retângulos sobrepostos. Então eu vou em frente e desenhá-los agora. Vamos fazer nosso primeiro retângulo de 20 pixels de largura por 100 pixels de altura, e vamos apenas fazer um segundo retângulo 20 pixels de altura, vamos torná-lo 60 pixels de largura. Ótima. Então, vamos posicionar esses dois bem em cima um do outro. Então, o que queremos fazer agora é pegar esses dois retângulos e transformá-los em apenas uma única forma. Então, o que você vai querer fazer é selecionar ambos os retângulos e ir até aqui para suas opções de forma composta. Vamos repassar o primeiro. Então, o que a união faz é que leva duas formas sobrepostas e cria uma forma combinando-as, então vá em frente e clique na união. Então, você verá agora o que você tem é apenas uma forma de nossos dois retângulos que podem ser estilizados e editados como um. Então, eu vou em frente e girar este negativo 45 graus para fazer uma marca de verificação e apenas ir em frente e posicionar isso direito sobre o círculo. Incrível. Então, vamos fazer a nossa próxima forma composta. Então, se você selecionar sua marca de seleção e seu círculo, você vai subir aqui e vamos tentar a ferramenta de subtração. Então, o que isso faz é subtrai qualquer que seja a forma superior da forma inferior. Então, o que isso realmente fez foi criar uma forma com uma marca de seleção cortada dela. Então, a próxima coisa que eu vou querer adicionar à minha foto de capa do projeto é o título do nosso aplicativo. Então, para fazer isso, vou adicionar uma camada de texto à minha tela de desenho. A tecla de atalho para a camada de texto é T e eu vou apenas ir em frente e clicar. Então, o que você vê é um texto pré-preenchido que diz digita algo e é selecionado até agora. Eu só começo a digitar o nome do meu aplicativo, Todo App, ele aparece na minha tela. Você pode clicar em escape para sair do modo de edição de texto. Incrível. Então vamos mudar o estilo do nosso texto agora. Então, no painel inspetor, você vê que eu tenho algumas opções específicas de texto aqui. O primeiro é o tipo de letra. Isso basicamente vai puxar qualquer tipo de letra que você tenha instalado em seu computador. Vou mudar o meu para Bell Gothic por enquanto e continuar estilizando meu texto. Abaixo do tipo e do peso, você tem algumas outras opções. Então, nesta pequena engrenagem, você pode fazer coisas como adicionar um sublinhado ou um tachado ou alterar seu texto para uma lista. Da mesma forma que suas camadas de forma, você pode escolher cores diferentes para o texto. Eu vou em frente e deixar o meu branco, e você também pode ajustar o tamanho do seu texto. Então eu vou fazer o meu 48. Às vezes, essas pequenas dicas de ferramentas não fecham, mas se você apenas clicar no botão de cor, ele geralmente se descarta. Então, você também tem controle do alinhamento do seu texto. Agora, o meu é deixado, então qualquer texto que eu adicionar a ele será adicionado à esquerda. Na verdade, vou querer que isto seja centralizado. Então, enquanto eu adiciono texto a este título, ele vai apenas ir em frente e centrar-se em si mesmo. A próxima opção que você tem é a largura. Então, há duas opções aqui. Se você clicar ao criar sua camada de texto, criará uma largura automática. Basicamente, isso é bom para uma única linha de texto. Se eu continuar adicionando a esta linha de texto, você vai notar que ele nunca quebra palavras. Se eu quisesse criar um parágrafo de texto, eu posso alterar isso para fixo; ou enquanto estou criando minha camada de texto, eu posso clicar e arrastar para criar uma camada de texto que é de uma determinada dimensão. Deixa-me mudar isto para preto. Enquanto eu escrevo aqui, você vai notar palavras envoltório. Então, isso é melhor se você estiver configurando um parágrafo ou uma área de texto de várias linhas. Por enquanto, vou apagar isso. Abaixo da largura, você também pode ajustar o espaço entre seus caracteres, sua altura de linha e seu espaçamento de parágrafo se você quiser criar um campo de texto de largura fixa. Eu não estou amando esse tipo de letra que eu escolhi, então eu vou realmente voltar para Avenir em seguida e não fazer isso ousado. Vou fazer disso um meio simples. Incrível. Então, temos um ótimo começo para nossa foto de capa do projeto. No próximo vídeo, aprenderemos como fazer um estilo mais avançado para criar algo realmente único que podemos enviar para o Skillshare. 4. Estilo e retoques avançados: Tudo bem. Agora que temos uma alça em alguns dos conceitos básicos do esboço, vamos fazer um pouco de estilo mais avançado. Então, a primeira coisa que quero fazer é falar sobre algumas opções de preenchimento que temos. Então, se você seguir em frente e selecionar seu fundo aqui, você saberá do último vídeo que fizemos apenas um preenchimento muito básico de azul. Sketch é bastante poderoso, porém, porque permite adicionar vários preenchimentos a qualquer objeto em sua tela de desenho. Então, se você for até aqui para a seção de preenchimento e apertar este pequeno ícone de mais, você vai notar que agora temos dois preenchimentos diferentes neste objeto. Então, o que temos aqui é um preenchimento gradiente. Com um gradiente, você pode controlar coisas como a direção do gradiente, você também pode alterar a cor do gradiente selecionando um desses pontos finais e ajustando o gradiente usando o seletor de cores. Então, deixe-me ir em frente e fazer isso um pouco mais fundo de um azul aqui, e aqui, isso parece muito legal até agora. Então, vamos explorar algumas das outras opções de preenchimento. Então, você também tem coisas como gradientes radiais, então isso nos fará um gradiente emitindo de um ponto central, gradientes angulares ou algo chamado preenchimento padrão. Então, o que preenchimentos padrão são é basicamente, esboço irá preencher sua área com uma imagem de sua escolha. Eu vou adicionar um preenchimento de fundo, mas eu vou escolher este pequeno papel gráfico olhando grade aqui. Posso ajustar a escala do meu raio de preenchimento daqui. Então, deixe-me fazer isso cerca de 55, que parece bom, e eu vou fechar o seletor de preenchimento. Agora, eu não tenho controle granular da cor desse preenchimento, mas o que eu posso fazer é mudar seu modo de mesclagem e também opacidade. Então, deixe-me ir em frente e mudar isso para uma opacidade de 20%. Vou apertar enter e, em seguida, talvez, multiplicar embora apenas deixá-lo normal provavelmente irá atender às minhas necessidades. Incrível. Então, agora eu tenho este papel grade legal olhando fundo gradiente preenchido. Então, a próxima coisa que eu quero fazer é falar sobre adicionar algumas sombras em nossos objetos. Então, se eu selecionar minha marca de seleção e descer aqui para a área de sombras no painel inspetor e adicionar um novo desses, você verá que uma pequena sombra foi adicionada à minha composição. Eu tenho controle total sobre isso, então se eu quiser fazer o x e y offset 00, então ele está diretamente sob ele, você está apenas recebendo este brilho em torno dele. Vou levantar isto para te mostrar como é. Ele realmente começa a fazer isso parecer que ele está pulando fora da tela um pouco. Dá-lhe um pouco de profundidade, isto está pairando sobre o meu fundo. Eu vou fazer isso um seis, e você também pode fazer coisas como mudar a cor real e opacidade deste fundo. Estou muito feliz com as configurações padrão, mas se eu quisesse torná-lo um vermelho, que é difícil de ver porque é tão transparente, você pode fazer isso também. As sombras podem ser aplicadas a qualquer objeto. Então, você pode realmente ir em frente e adicionar uma sombra ao seu texto também. Então, eu vou fazer este seis, e agora o texto está parecendo que está aparecendo também. Tudo bem. Então, agora que vocês sabem como contornar o esboço, o que eu quero que vocês façam é estilizar sua foto de capa do projeto como quiserem. Você pode enlouquecer um pouco. Pense nisso como uma oportunidade para realmente definir o tom e a direção da arte para o resto do seu aplicativo. Quando terminar de criar o estilo da sua foto de capa, faremos o upload dela para a Galeria de Projetos do SkillShare, você possa mostrar ao resto dos colegas o que está tentando criar. 5. Exportar e carregar: Então, agora que você tem a foto da capa do seu projeto estilizada como quiser, eu quero falar um pouco sobre camadas e boa higiene enquanto você está projetando um esboço. Então, você notará no lado esquerdo da interface de esboço que você tem uma lista de basicamente tudo o que você adicionou à tela de desenho até agora. O que esta lista permite que você faça é ordenar seu objeto para que você possa colocar as coisas na frente ou atrás um do outro. Você também pode expandir suas formas compostas para ajustar cada uma das formas que a compõem de forma granular e, o mais importante para isso, você pode realmente renomear essas camadas. Então, o que eu gosto de fazer é que eu estou projetando é apenas ficar realmente organizado e renomear minha camada para que eles sejam fáceis de encontrar e voltar para você. Então, vamos em frente e chamar este fundo. Vamos mudar o nome para marcar e podemos deixar nosso texto como ele está, esboçado por nomes padrão, suas camadas de texto, o que quer que você digita neles. Incrível. Então, agora temos um bom arquivo de design limpo. Outra característica do esboço que ajuda você a se manter organizado é o agrupamento. Então, o que eu quero dizer com isso? Então, se eu for para a minha tela e você também pode fazer isso no seu painel de camadas e selecionar todas as minhas camadas e pressionar o comando G, você verá que ele recolheu tudo em uma pasta. Então, basicamente o que é isso é um grupo e um esboço. Então, eu posso nomear este grupo, então eu vou chamá-lo de foto de capa e agora esboço vai tratar isso como um objeto. Então, se eu clicar nele ele vai selecionar o grupo e eu posso arrastá-lo por aí e tudo o que está nesse grupo vai se mover juntos. Se eu quiser selecionar coisas no grupo, eu posso manter pressionado o comando e isso vai me permitir selecionar profundamente no grupo ou eu posso clicar duas vezes em objetos e isso vai me deixar ir um nível mais fundo nos agrupamentos. Então, agora que eu tenho minha foto de capa do projeto agrupada, eu posso ir em frente e selecioná-la e se eu descer para o canto inferior direito da interface do esboço, há uma pequena área chamada tornar exportável. O que isso me permite fazer é selecionar o tamanho e o tipo de arquivo que eu gostaria de exportar este grupo para que eu possa usar esses arquivos fora do esboço. Então eu posso escolher vários arquivos de imagem de PNG para PDF para SVG. Vou deixar o meu PNG. Eu também posso fazer várias exportações das mesmas opções. Então, se eu estou projetando para iPhone e eu preciso de gráficos em 2x ou 3x, eu posso fazer isso também. Se eu precisar de ambos os PNGs e SVGs eu também posso exportar aqueles de uma só vez. Na verdade, vou apagar essas duas opções. Se você pressionar Exportar foto, verá que seu seletor de arquivos aparece e você pode simplesmente salvá-lo onde quiser. Incrível. Então, agora que você exportou sua foto de capa, vá em frente e faça login no Skillshare, comece seu projeto e carregue isso como sua foto de capa para ele e eu mal posso esperar para ver o que vocês criaram. 6. Páginas e pranchetas: Tudo bem. Então, estamos quase prontos para começar a projetar nosso aplicativo. Mas primeiro, vamos falar um pouco sobre como os arquivos do Sketch são estruturados. Então, nós aprendemos sobre a lista de camadas em grupos, mas o Sketch também tem outras ferramentas organizacionais que são realmente incríveis para quando você está projetando aplicativos, páginas da web ou o que quer que você esteja projetando com o Sketch. Então, se você notar isso, Gets Started Here ponto de exclamação, é um pouco drop-down. O que é isso é uma página no Sketch. Então, Sketch permite que você divida seu arquivo em várias páginas, cada uma com sua própria tela de desenho. O que isso permite que você faça é dividir o que estiver trabalhando em grupos que organizacionalmente faz sentido. Então, para este arquivo, eu fiz uma página para nossas telas de aplicativos principais, eu incluí outra página que tem interações e microestados, e eu incluí duas outras páginas que têm alguns outros componentes que nós vamos ser usando enquanto estamos fazendo alguma interface do usuário. Eu incluí alguns componentes básicos de interface do usuário do iOS que estaremos usando quando entrarmos em realmente projetar nosso aplicativo. Então, se você clicar no pequeno ícone, você pode expandir as páginas para ver uma lista completa do que você tem e rapidamente saltar para eles. Você também pode adicionar uma nova página diretamente a partir daqui e semelhante a grupos ou qualquer lista de camadas. Pode dar o nome que quiser. Eu vou em frente e deletar isso. Então, páginas são realmente grande ferramenta para mantê-lo organizado no Sketch. Então, vamos para uma das páginas. Vamos para as telas de aplicativos. Então, em Apps Screens, você verá que temos um monte de, basicamente, visualizações de aplicativos. Se você precisar clicar e arrastar ao redor, se você manter pressionada a barra de espaços, o cursor do mouse será bloqueado e você poderá arrastar a tela ao redor, apenas muito útil enquanto você está navegando na interface do Sketch. Então, o que eu fiz nas telas de aplicativos é que eu criei um monte de pranchetas. O que pranchetas são basicamente, são um tipo especial de grupo. Então, pranchetas são quadros fixos. Eu gosto de usá-los para representar vários estados do meu aplicativo. Então eu tenho, por exemplo, nosso ícone de aplicativo. Se você for até a lista de camadas, poderá expandir a prancheta para ver exatamente quais formas e objetos estão na parte superior dessa prancheta. Você notará, apenas como exemplo, que essas pranchetas são quadro fixo. Então, se algo estiver em sua prancheta e você arrastá-lo para fora do lado, ele vai realmente cortá-lo para você. Então, vou recentrar isso. Então, para criar uma prancheta, você pode ir para o menu suspenso Inserir ou pressionar a tecla de atalho A, e você notará que o painel Inspetor apresenta vários modelos predefinidos incluídos no Sketch. Então, se eu quisesse adicionar outra tela a esse arquivo, basta clicar no iPhone 6 e você verá que o Sketch adiciona outra prancheta ao lado da minha última prancheta. Incrível. Então, pranchetas podem ser nomeadas exatamente como qualquer outro objeto no Sketch, List View UI. As pranchetas também podem ser arrastadas e colocadas onde quiser na tela. Enquanto estamos projetando, vou apenas colocar nossas pranchetas de interface do usuário logo abaixo de nossas pranchetas wireframe. Então, eu posso rapidamente me referir de volta para os wireframes que nós mesmos definimos. Incrível. Então, esses são apenas alguns dos excelentes recursos que o Sketch tem para mantê-lo organizado e vendo enquanto você está projetando. Então, no próximo vídeo, vamos realmente começar a trabalhar em algumas da interface do usuário para o nosso aplicativo. 7. Cabeçalho: Ok. Então, agora, estamos prontos para começar a projetar a interface do usuário para um aplicativo de lista de tarefas. A primeira coisa que eu vou querer fazer é voltar para a minha foto de capa e apenas agarrá-la e trazê-la para a página de telas do meu aplicativo para que eu possa fazer referência de volta ao estilo que eu defini nele. Então, eu vou apenas ir em frente e colocá-lo bem ao lado da minha primeira tela de interface que eu tenho aqui em baixo. Então, o que eu realmente vou fazer agora é, basta ir em frente e criar as outras placas de arte para as principais seções de interface do usuário. Então, o que eu vou fazer é duplicar este quadro de arte um monte de vezes. Então, eu posso ir para a ferramenta de criação de placa de aplicativo pressionando o A ou eu posso selecionar esta placa de aplicativo e eu posso manter pressionada a opção e arrastar. O que isso vai fazer é duplicar o que eu estou arrastando aqui. Então eu vou apenas criar essas outras três placas de arte e colocar algumas bem embaixo dos wireframes que eu vou criar. Você pode ir em frente e apenas renomear estes, e um último para editar tarefa, incrível. Então, vamos ampliar e conferir nossos wireframes. Então, na Vista de Lista temos basicamente um cabeçalho onde podemos adicionar um novo item a fazer, temos uma seção para os nossos itens não feitos e temos uma listagem de nossos itens feitos. Parece que cada wireframe único que vamos fazer UI para tem um desses cabeçalhos. Então, esse é provavelmente um bom lugar para começar como a primeira coisa que vamos em frente e criar. Então, vamos começar com isso agora mesmo. Então, a primeira coisa que eu vou querer fazer é realmente criar o fundo para o meu cabeçalho. Então, eu vou pressionar R para criar um novo retângulo. Eu vou arrastar isso para ser toda a largura da minha placa de arte para um iPhone seis que é 375 pixels de largura se estamos projetando no 1X e eu vou apenas remover a borda disso. Então, o que eu vou querer fazer agora é, olhar para trás para a minha foto de capa do projeto e começar a tirar algumas dicas de estilo dele. Então, a primeira coisa que vou notar é que ele tem um fundo azul realmente rico. Então, se eu ir em frente e clicar no fundo da minha foto de capa eu posso ver o que eu tenho aqui atrás. Então, se eu for para este preenchimento, eu quero este azul para o meu cabeçalho. Então, eu posso ir em frente e copiar o valor hexadecimal aqui ou eu posso acertar este pouco mais aqui ao lado das cores do meu documento. O que isso vai fazer, é guardar essa cor para mim e permitir que eu tenha acesso rápido em qualquer um dos meus selecionadores de cores. Então, vamos selecionar o fundo do nosso cabeçalho e apenas torná-lo tão agradável azul. Então, a próxima coisa que eu vou querer adicionar a este cabeçalho é esta, barra de status iOS aqui em cima. Como eu mencionei em um vídeo anterior, Eu incluí alguns desses componentes iOS, também tenho um link nas notas de classe na descrição do projeto e basta colar isso ali. Então, agora que ele está lá, você vai querer posicioná-lo direito nivelado com a parte superior e os lados do quadro de arte, e agora você tem a barra de status do iOS. Então, isso está realmente começando a se parecer com um aplicativo de iPhone real. Então, a próxima coisa que eu vou querer fazer é apenas adicionar meu título e meus links de ação ao cabeçalho. Então, basta ir em frente e pressionar “T” para adicionar uma nova camada de texto. Para isso, você só vai querer clicar porque você não vai querer que ele corrigido com camada de texto. Vamos chamar isto de Todos, já que esta é uma lista dos nossos itens a fazer. Vou fazer isto centrado. Então, se eu quiser ajustar o conteúdo desta caixa, ele vai mantê-lo agradável e centrado, e eu vou torná-lo um pouco mais grosso, tornando-o um peso médio da fonte, só porque é um título, então deve ser muito importante. O tamanho é 18, estou muito feliz com isso por agora, então vou deixar isso. Em seguida, vamos criar a ação. Então, nós tínhamos um pequeno link novo aqui no canto superior direito do nosso cabeçalho. Então, o que eu vou fazer é selecionar meu título e clicar em “opção”, e arrastá-lo. Enquanto eu estou arrastando desta vez, eu vou segurar Shift pressionado. O que isso vai fazer é, ele vai apenas arrastar isso ao longo do eixo x ou y. Neste caso, ele está arrastando-o ao longo do x. Então, ele não vai mudar as coordenadas y dele, ele vai apenas mudar o x. Então, eu vou apenas soltar isso. Como isso é alinhado à direita, vou mudar o alinhamento para a direita e vou digitar novo aqui. Eu posso verificar a distância de quão longe este objeto está de várias coisas no cabeçalho, apenas selecionando-o e pressionando a tecla Alt. O que isso vai fazer, é trazer algumas ferramentas de medição que o Sketch fornece para nós. Então, você verá que isso está a 13 pixels de distância da borda direita da placa de arte e a caixa delimitadora desta camada x está a 27 pixels de distância da parte inferior do nosso plano de fundo. Dependendo dos montantes acima, ele vai me dar diferentes ferramentas de medição. A próxima coisa que eu quero fazer é, na verdade, fazer isso um pouco mais leve. Então, ele tem um pouco de um peso tipo diferente do título do meu aplicativo. Então este é um cabeçalho bem grande. Eu realmente acho que em algum lugar em torno meados dos anos 60 é provavelmente um tamanho de cabeçalho melhor para nós. Então, o que eu vou fazer lá é, eu vou mudar a altura disso, e então eu quero apenas centralizar isso entre a barra de status e a parte inferior do meu plano de fundo. Então, isso foi 13, então deixe-me apenas igualar isso até 10. Então, temos 10 e 11. Então, não vamos conseguir isso perfeitamente equilibrado, mas provavelmente é bom por enquanto. Então aqui, vou mudar isso para 16. Você notará que, às vezes, se você tiver um objeto selecionado e manter pressionada a tecla de opção para movê-lo, ele se moverá em um décimo de pixel. É uma coisa muito estranha que Sketch faz. Eu não sei por que alguém iria querer mover isso um décimo de pixel mas é apenas uma daquelas pequenas peculiaridades que Sketch tem, espero que um dia resolvam. Então, o que eu realmente vou fazer é ter certeza de que isso está 16 pixels de distância do lado deste quadro de arte. Legal. Agora, a próxima coisa que eu quero fazer é apenas dar este cabeçalho um pouco de profundidade. Então, um cabeçalho fica em cima de sua interface do usuário e as coisas provavelmente estarão deslizando atrás dele. Então, o que eu vou querer fazer é apenas adicionar uma pequena sombra simples aqui. Então, a sombra padrão é um pouco escura. Então, eu vou para a cor e deixe-me derrubar isso para 30% de opacidade, e eu vou fazer o borrão um pouco menos também, talvez fazer o deslocamento no eixo Y apenas um. Então, sim. Isso me dá uma bela sombra sutil. Então, vai realmente parecer que as coisas estão passando por trás dele. Então, ótimo. Agora temos o nosso cabeçalho, vamos continuar e manter-nos organizados. Então, eu vou selecionar o plano de fundo e deixe-me apenas renomear isso e todo o resto é nomeado muito corretamente, mas eu vou apenas ir em frente e agrupar estes em grupo de cabeçalho. Incrível. Então, agora, você tem um cabeçalho que pode usar no resto da tela do seu iPhone App. Então, se você apenas adicioná-lo ao Create.Task View e alterar isso para Salvar, você tem um componente realmente reutilizável que você pode usar em todo o seu aplicativo. Você terá que ir em frente e criar esse pequeno x para sair da exibição Salvar ou do ícone de volta. Então eu posso ir em frente e fazer isso agora mesmo. Então eu vou fazer dois retângulos. Então vamos fazer com que três pixels de largura e 35 pixels de altura. Mate a fronteira nele. Copiá-lo [inaudível] comando, V final basta girar que 90 graus. Parece que isto está um pouco fora do centro. Então, por que não fazemos números pares? Eu vou usar a minha ferramenta Union e então eu vou girá-los 45 graus e eu poderia colocar isso na minha cabeça agora. É um pouco grande, então eu vou baixá-lo para 20 por 20 e torná-lo uma cor branca. Legal. Então você pode ir em frente agora e estilizar seu cabeçalho como quiser e duplicá-lo em todas as placas de arte que são necessárias para o resto do seu aplicativo e eu vou vê-lo no próximo vídeo. 8. Símbolos: Então, em nossa última lição, começamos nossa interface do usuário criando cabeçalhos para cada uma das nossas telas de aplicativos. Em seguida, vamos começar criando alguns dos objetos que estão em nossa Exibição de lista. Vamos ampliar a Exibição de lista pressionando Command Plus e arrastando nossa tela mantendo pressionada a barra de espaço. O que temos neste modo de exibição em lista é um par de itens repetidos. Então, temos um cabeçalho de repetição para cada uma dessas seções, e, em seguida, dentro de cada uma dessas seções, nós não fizemos, todos, e nós temos alguns cruzados fora todos. Então, o que eu quero mostrar nesta lição é como fazer uma peça de design reutilizável. Então, vamos começar fazendo esses títulos de seção como um exemplo realmente simples. Então, Sketch tem uma ferramenta muito poderosa chamada Símbolos. Então, se eu ir em frente e criar um retângulo para o meu cabeçalho de seção, eu vou apenas ir em frente e eu vou estilizar isso, eu vou trazer isso para baixo até que ele é realmente azul-cinza claro aqui em baixo. Vou adicionar essa cor às cores do meu documento porque talvez eu queira reutilizá-la. Eu crio este pequeno fundo para o meu cabeçalho de seção e eu vou apenas ir em frente e eu vou criar um título para ele. Então, eu vou chamar este Not Done, e eu vou apenas ajustar a fonte. Na verdade, vou fazer um azul escuro. Tudo está indo com uma espécie de tom de cor azul aqui, e eu vou apenas centralizá-lo visualmente. Faça isso 16 pixels longe do lado para corresponder ao meu item de ação aqui. Ótimo, isso está parecendo um pouco grande, então eu vou derrubar isso para 14 e apenas centrá-lo lá dentro. Incrível! Então, deixe-me criar um grupo para isso e chamar isso de título de seção. Seu aplicativo pode ter vários cabeçalhos de seção. Então, temos uma seção Not Done, mas também temos uma seção Done. Agora, eu posso facilmente, da mesma forma que fizemos nossos cabeçalhos, apenas criar dois objetos como este. Mas se eu quiser mudar a cor deste, para dizer um escuro com um título claro, eu tenho que ir e fazer exatamente a mesma coisa ou recopi-lo e refazer este outro cabeçalho de seção. Felizmente, Sketch dá-lhe uma ferramenta muito impressionante chamada Símbolos onde se você apenas atualizar um, você pode atualizar o resto deles. Ele irá atualizar automaticamente o resto deles. Então, vamos experimentá-lo. Então, se você selecionar o título que deseja criar um símbolo e clicar com o botão direito do mouse sobre ele, você pode ir até esta opção Criar símbolo. Alternativamente, você também pode subir aqui no cabeçalho. Então, se você criar um símbolo, você notará que ele mudou essa pasta para esta cor roxa. Então, agora, sempre que você tiver outro título de seção nesta cor roxa, se você atualizar um desses, ambos serão atualizados, e você pode fazer isso para qualquer coisa que quiser. Então, se você atualizar seus estilos de texto, ele será atualizado. Se você atualizar os tamanhos, cores, ele só atualizará. Então, uma coisa que você deve saber, que por padrão, ele também irá atualizar o texto aqui. Então, você vai notar que eu mudei o texto e ele mudou em ambos os lugares. Mas isso não é algo que queremos. Então, o que você tem que fazer é, na sua camada de texto, ir até esta pequena marca de seleção que aparece quando sua camada de texto está em montagem, e basta pressionar Excluir valor de texto do símbolo. Então, o que isso vai agora deixar você fazer é realmente ter valores de texto diferentes aqui e o símbolo irá ignorar o que está no campo de texto, mas ele ainda vai manter todas as suas opções de estilo para que você possa permanecer consistente e manter o estilo. Outra coisa a notar é, estes dois símbolos estão ligados, mas você pode alterar o título deles independentemente se você quiser ficar organizado. Então, você pode fazer Seção Heading para esse cara e bater Concluído e então você pode fazer por aqui, Not Done. Legal, então isso é muito poderoso. Então, a próxima coisa que vamos fazer é usar Símbolos para criar as linhas da nossa lista para fazer. Então, estes são basicamente os mesmos e queremos criar símbolos. Então, se atualizarmos o estilo de um deles, todos eles mudam. Então, vamos começar a criar essa linha. Então, vamos criar o item Não Concluído para fazer. Então, eu só vou dar a ele um fundo. Vou deixar este fundo branco por agora. O que eu vou querer fazer é copiar e colar ali mesmo. Eu quero apenas fazer um curso realmente leve na parte inferior dele para que eu possa separar cada um dos meus para fazer itens. Então, eu tenho esse objeto. O que vou fazer agora é mudar a altura para um pixel de altura. Então, eu vou fazer um e você vai ver que eu agora tenho um retângulo de um pixel. Vou chamar isso de um golpe de fundo, e vou chamar esse objeto de Fundo. Então, eu quero que isso seja alinhado de fundo com o fundo, este traçado inferior e o plano de fundo para ser alinhado por baixo. Então, eu vou selecionar os dois objetos e eu vou vir aqui para essas ferramentas de alinhamento, e o que estes permitem que você faça é, você pode fazer coisas como alinhá-lo ao centro, ao topo ou ao fundo. Então, eu quero alinhar o meu ao fundo. Então, eu tenho esse pequeno derrame bem aqui. A próxima coisa que eu quero fazer é colocar uma marca de seleção vazia para indicar que este objeto ainda não foi marcado. Então, vamos voltar para a foto da capa do projeto. Nós já fizemos uma marca de seleção, então eu vou apenas ir em frente e levá-lo para a direita a partir daqui. Vou copiar e colar na minha nova linha e redimensioná-la bem ali. Eu vou fazer isso 40 pixels por 40 pixels, e então eu vou selecionar o plano de fundo, e eu vou usar minha ferramenta de alinhamento para ter certeza que ele está apenas centralmente alinhado lá. Vamos fazer isso 16 pixels longe do lado. Ótima. Antes de prosseguirmos, vou agrupar estes num grupo e chamá-lo de Tarefa - Não Concluído. Incrível. Então, eu quero mudar o estilo disso. Eu realmente vou mudar a cor para o nosso pequeno azul claro ali, e eu quero que ele pareça impresso na linha, vez de pairar sobre ele. Então, eu vou desligar a sombra e eu vou tentar uma dessas pequenas Sombras Internas. Então, faça esse zero. Mantenha um borrão de três, mas só mude para 30 para que seja um pouco mais sutil. Eu posso realmente... deixe-me tentar 20. Ótima. Então, agora temos nossa marca de seleção vazia. Parece que é algo que pode precisar ser preenchido e podemos ir em frente e apenas criar o título para isso. Então, eu vou fazer este ponto 18, eu quero torná-lo médio, e eu vou chamá-lo de Lorem Ipsum. Incrível. Ele tem o meu agradável azul escuro lá e eu sei que em alguns destes havia uma data de vencimento então eu vou apenas ir em frente e eu vou adicionar uma camada de data de vencimento. Eu vou fazer isso muito menor, talvez um 14 e eu vou fazer isso um pouco mais claro azul acinzentado e eu posso fazer isso regular. Digamos: “É amanhã às 12:00.” Incrível, e alinhe aqueles. Vocês podem projetar isso do jeito que quiserem. Brincar com o tamanho e o espaçamento até que você tenha algo que você gosta. Vou selecionar os dois e espero que não estejam no meu grupo. Então, se você quiser adicionar algo a um grupo que já existiu, basta ir até essa lista de camadas e arrastá-los para dentro e agora, eu devo ser capaz de fazer a medição longe desta marca de seleção. Ok, ótimo. Então agora, eu tenho esse 16 pixels por 16 pixels e às vezes eu gosto de também apenas alinhar coisas. Sketch dá-lhe estas ferramentas. Eles são chamados de réguas e basicamente o que estes são bons para é que você pode clicar sobre essas réguas do lado e adicionar essas diretrizes muito rapidamente ao seu arquivo. Então, o que eu poderia fazer é realmente alinhar a linha de base de que e o topo de que um. Então, tudo se encaixa perfeitamente dentro desta pequena marca de seleção. Você sempre pode se livrar dos governantes apenas arrastando-os para fora da régua. Então, é uma ferramenta muito rápida e fácil. Ok, incrível. Então, o que nós vamos querer fazer agora é selecionar todo esse grupo e vamos criar um símbolo fora dele, e então apenas certifique-se de voltar e excluir ambos os valores de texto do símbolo. Então, agora, se você copiar e colar esse cara, você quer fazer algo como mudar o texto aqui, ele mudará para todos eles. Incrível. Vou mudar isso de volta para o azul mais escuro. Eu só vou arrastar este título linha porque agora, Eu tenho meus dois itens Not Done. Então, agora, o que eu quero fazer é criar meus itens Concluídos. Mas você sabe que se eu for até aqui e eu apenas criar outra instância desse símbolo e então eu começar a preencher isso com talvez como um verde, ele vai preenchê-lo para todos eles, e isso não é algo que nós queremos. Então, o que você realmente vai querer fazer é clicar com o botão direito do mouse neste novo símbolo e você vai querer desanexá-lo. Então, o que isso vai fazer, é que ele não será mais conectado ao resto do símbolo para que eu possa ir em frente e mudar isso como eu achar melhor e meus outros símbolos não vão mudar. Mas eu também posso apenas ir em frente e criar um novo símbolo fora dele, então agora, eu posso fazer minhas linhas feitas aqui em baixo. Então, talvez eu queira que isso seja riscado. Incrível. Então, o que eu quero que você faça agora é apenas terminar o resto das telas desta página. Lembre-se, você pode usar alguns dos componentes que incluí na página de componentes do iOS ou criar coisas completamente do zero. É realmente até você como você deseja projetar seu aplicativo. Apanho-te no próximo vídeo onde falaremos sobre o microestado. 9. Microestados e ícones: Ok, espero que você tenha sido capaz de terminar de projetar as telas principais do seu aplicativo. Neste vídeo, vamos rever algumas das últimas interações dos microestados. Vamos para a página agora. Então aqui temos alguns microestados. Temos nossas interações de linha. Um estado vazio para o nosso ListView quando o aplicativo é carregado pela primeira vez ou talvez depois terminar e limpar todos os seus itens a fazer e, por último, você tem uma confirmação Excluir Tarefa. Vamos começar com essas interações de linha. Assim como quando estávamos projetando o uso principal do nosso aplicativo eu vou apenas ir em frente e adicionar um novo quadro de arte. Vou fazer um iPhone tamanho seis. Vou arrastá-lo para baixo das interações de linha e eu vou nomeá-lo interações de linha de interface. Não quero que meu quadro de arte seja branco, então tenho duas opções. Eu posso desenhar um retângulo e cobrir toda a placa de arte com uma cor retangular ou posso selecionar a placa de arte e ativar uma cor de fundo para ela. Então, deixe-me fazer isso. Vou torná-lo este azul claro que eu tenho usado em outros lugares no aplicativo. Ok, incrível. Então, agora temos nossa interação de linha. Então, a primeira coisa que eu vou querer fazer é apenas jogar uma linha de tarefas padrão no meu quadro de arte. Então, eu posso voltar para as telas do meu aplicativo e copiar e colar o símbolo que eu criei na aula de vídeo anterior ou eu posso simplesmente inserir uma instância desse símbolo. Então, se você subir aqui para o menu suspenso 'Inserir', você verá que agora você tem uma área de símbolos. Então, aqui estão todos os símbolos que criei até agora no meu aplicativo. Vamos fazer uma tarefa não feita e ele vai adicionar apenas uma instância desse símbolo diretamente no meu quadro de arte. Agora lembre-se, qualquer coisa que você mudar aqui vai mudar todas as páginas do seu arquivo de esboço. Então, se você mudar algo aqui, ele vai mudar em suas visualizações de aplicativos principais também. Apenas mantenha isso em mente. Então, temos nossa linha padrão. O próximo que vamos querer fazer é apenas adicionar uma linha. Parece que temos um pequeno ícone novo bem em cima de onde a marca de seleção está agora. Então, vamos criar isso. Então, eu vou apenas ampliar. Eu vou criar um novo oval e eu quero criá-lo exatamente do mesmo tamanho que o oval marca de seleção e lembre-se, você não quer colocar isso no símbolo porque ele vai então colocar esse oval em todas as suas fileiras. Então, eu vou em frente e eu vou fazer este branco e eu quero fazer as bordas tão bonito azul, eu vou bater em até dois e eu vou apenas adicionar a palavra nova nele. Então, eu não quero texto branco aqui Eu vou fazer este azul também e apenas ousar um pouco. Vou ajustar o meu alinhamento para centralizado. Então, se eu quisesse adicionar um ponto de exclamação ou algo assim, eu poderia fazer isso muito facilmente. Incrível, então, vou diminuir um pouco. Isso é como uma guia grande para o meu gosto. Então, vou tentar às 11. Isso é bom e, em seguida, geralmente, quando eu uso todos os textos maiúsculos eu gosto de espaçar as letras um pouco, então apenas digite um no personagem e espaço para fora essas letras. Vamos tentar dois, acho que um estava funcionando melhor. Certo, ótimo, agora temos nosso novo estado. O próximo que vamos querer fazer são algumas dessas interações de deslizamento. Então, parece que cada uma dessas interações tem um ícone bastante consistente com um rótulo e um plano de fundo. Então, eu vou realmente apenas ir em frente e criar todos os ícones de uma só vez para torná-los todos consistentes. Então, vamos ver. Temos uma marca de verificação, uma lata de lixo e um lápis. Então, vamos criar cada um deles agora. Vamos começar com a marca de verificação. Isso deve ser muito fácil para nós agora porque nós fizemos isso tantas vezes e deixe-me apenas fazer isso 25 por sete e então eu vou fazer outro retângulo sete pixels de largura por vamos fazer 50 pixels altura e eu vou em frente e ajustar isso bem ali. Certo, legal e como fizemos antes, vamos nos unir e dar uma rotação negativa de 45 graus. Bem, vamos fazer esses dois pixels de espessura e eu vou fazer isso do lado de fora. Isso parece que ele pode ser um pouco grande então vamos apenas derrubar isso para cerca de 35 pixels de altura e isso é sobre o tamanho eu vou usar para todos os nossos ícones agora, ok ótimo. Então, eu vou realmente apenas fazer pequenos guias aqui para que eu possa manter tudo relativamente dentro da mesma escala. Vamos fazer a nossa lata de lixo agora. Fazer a lata de lixo o que eu vou querer fazer é apenas criar a base de latas de lixo e a lata de lixo tem um topo mais largo do que o fundo. Então, uma maneira de fazer isso no esboço é clicar duas vezes no meu retângulo para entrar no modo de edição de caminho. O que o modo de edição de caminho me permite fazer é selecionar cada um dos pontos de ancoragem nesta forma um por um ou se eu manter pressionado shift, eu posso selecionar dois de cada vez e agora se eu mover esses pontos, você verá que eu sou capaz de apenas mover esses pontos de ancoragem enquanto o resto dos pontos de ancoragem que não estão selecionados permanecem estacionários. Então, o que realmente queremos fazer é ir em frente e selecionar aquele ponto de ancoragem inferior de cada vez e movê-lo em dois pixels para o centro. Ótimo. Agora vamos fazer o estilo do jeito que queríamos, tudo bem por enquanto e não queremos nenhum preenchimento central. Então, vamos agora criar o topo da lata de lixo. Então, se fizermos um retângulo e podemos torná-lo alguns pixels mais largos. Vamos apenas estilizar estes e vamos definir isto para o exterior. Ok, ótimo. Estou sentindo que minha lata de lixo é talvez um pouco estreita então eu vou apenas ir em frente e ampliá-lo um pouco e então arrastar isso para fora e eu vou apenas ir em frente e centralizar estes. Incrível. Então vamos apenas dar uma pequena alça, eu ampliei, eu vou diminuir o zoom criando um último retângulo e vamos fazer essa espessura dois tirar o preenchimento eo que nós vamos ter que fazer agora e nós vamos apenas sobrepor essas coisas bem em cima de cada outro. Então, temos uma pequena marca de verificação e temos uma lata de lixo e o último que vamos querer fazer é um lápis. Então, vamos começar com um retângulo simples. Vamos fazer com que cerca de sete ou oito pixels de largura. Basta ir em frente fazer a espessura dois e remover o preenchimento. Assim como fizemos com a lata de lixo, vamos clicar duas vezes nesse retângulo. Vamos selecionar os dois pontos de ancoragem superiores. Então, além de movê-los sozinhos, também podemos controlar o raio de apenas certos pontos de ancoragem. Então, aumente isso até quatro, uma vez que este tem oito pixels de largura, este deve ser basicamente um final perfeitamente redondo para este lápis. Agora queremos criar a ponta do lápis. Então, se você passar o mouse sobre essas linhas, verá que seu cursor se transforma em uma caneta pequena com um sinal positivo. O que isso vai fazer é adicionar um ponto de ancoragem aqui. Então, se você clicar você verá que eu tenho um novo ponto de ancoragem nessa forma e agora eu posso selecionar isso e posso arrastá-lo e movê-lo da maneira que eu quiser. Então, basta arrastá-lo para baixo alguns pixels para torná-lo uma ponta afiada como um lápis normal teria. Ok ótimo. Você pode querer apenas ir em frente e adicionar uma pequena linha aqui para mostrar onde a ponta do lápis começa e você pode fazer isso pressionando L para a ferramenta de linha e, em seguida, apenas arrastando uma linha direita sobre ele e você deseja posicionar que bem ali e, em seguida, apenas novamente, basta ir em frente e torná-lo uma linha de dois pixels de espessura e semelhante talvez este lápis tem uma borracha no topo, então você pode apenas ir em frente e arrastar uma linha lá em cima também. Legal. Então, agora o que queremos fazer é provavelmente vamos querer agrupar isso e chamá-lo, dar-lhe um nome para que eu vou chamá-lo de edição de ícones. Faremos o mesmo com nossa lata de lixo. Ótimo. Então, temos alguns ícones muito simples que agora podemos usar quando estamos fazendo nossas linhas. Novamente, você pode simplesmente se livrar desses governantes arrastando-os para lá. Então, vamos copiar e colar nossa linha de tarefas principal, e o que vamos querer fazer é deslizá-lo um pouco sobre e vamos fazer um retângulo que é exatamente a mesma altura que ele é. Mova sua borda e este deve ser verde para indicar que você está prestes a marcar algo fora. Vamos arrastar nosso ícone de marca de seleção bem em cima dele e centrá-lo no meio, vamos em frente e deixar este traço branco e adicionar apenas um pequeno rótulo para que as pessoas saibam o que está prestes a acontecer. Faremos ponto de exclamação feito. Novamente, vamos torná-lo branco e colocá-lo no centro e lá vamos nós. Legal e agora você pode apenas fazer a mesma coisa para as outras duas interações de linha. Então, vamos copiar isso duas vezes. Vamos mudar isso para um vermelho e vamos trazer esses ícones aqui. Provavelmente vamos querer apagar esses caras. Ponha isto no centro. Essa é a ferramenta de alinhamento. Vamos apenas fazer este negativo 45 graus e vamos querer entrar fazer tudo isso branco. Copie isto. Incrível. Então, agora temos nossas interações de linha. Então, você pode ir em frente e terminar esses estilos linhas como quiser para que eles combinem o seu aplicativo e, em seguida, quando você terminar com esses apenas terminar o resto dos microestados que temos aqui. Então, o vazio e a mensagem de confirmação. Lembre-se de que incluí uma mensagem de confirmação nos componentes do iOS. Se você quiser usar a mensagem de confirmação padrão do sistema operacional iOS ou você pode simplesmente projetar seu próprio personalizado. Cabe a você. No próximo vídeo, aprenderemos como exportar nossas telas para que possamos compartilhá-las com as pessoas. 10. Exporte pranchetas: Ok, então agora que terminamos de projetar nosso aplicativo para iPhone, vamos querer exportar nossas telas para que possamos compartilhá-los com um engenheiro que vai estar construindo nosso aplicativo ou carregá-los para a galeria de projetos Skillshare, onde podemos obter alguns comentários de nossos colegas de classe. Então Sketch torna muito fácil fazer isso. O que você vai querer fazer é selecionar cada uma das pranchetas que deseja exportar da lista de camadas no lado esquerdo do Sketch. Então, o que você vai fazer é voltar para este canto inferior direito e apertar este botão tornar exportável. Você verá uma pequena visualização de cada uma de suas pranchetas e também poderá adicionar vários tamanhos. Só para mostrar o que isso faz, eu vou ir em frente bater um plus e eu vou adicionar o tamanho 2X aqui para obter imagens de tamanho duplo dos meus originais. Então eu vou em frente e eu vou apertar exportar pranchetas, eu vou escolher a pasta para a qual eu quero exportá-los e eu vou apertar o botão exportar. Além disso, um recurso rápido e fácil que o Sketch permite é a capacidade de compartilhar diretamente para e-mail ou mesmo iMessage diretamente do Sketch. Às vezes vem a calhar. Então, agora, se eu minimizar o Sketch e navegar até a pasta onde eu salvei todo o meu aplicativo pranchetas, eu posso ver que eu tenho uma cópia de cada uma das minhas pranchetas em png em tamanho 1X e 2X tamanho. Agora estou pronto para compartilhá-los com meus amigos ou enviá-los para a galeria do projeto Skillshare. Então, o que eu quero que você faça agora é carregar sua tela principal do aplicativo para a galeria do projeto Skillshare, e eu e seus outros colegas entraremos lá e deixaremos alguns comentários e comentários sobre seu trabalho. 11. Explore o design na Skillshare: maneira.