Transcrições
1. Trailer: Eu sou [inaudível] e sou designer de produtos aqui na SkillShare. Hoje, alguns dos maiores desafios enfrentados pelos designers de UI/UX estão lutando contra inconsistências em seu aplicativo ou site, além de tentar simplificar seu fluxo de trabalho de design e desenvolvimento para criar produtos muito mais rapidamente. Quando há uma falta de ativos de design reutilizáveis, os designers tendem a criar cada componente do zero, que é realmente difícil de dimensionar. Ele também cria muitas inconsistências em todo o site. Isso pode levar a muita confusão do usuário. Quando há muitos padrões ou elementos visuais, os usuários não têm certeza do que esperar quando estão interagindo e passando por fluxos de usuários diferentes em um site. Recentemente, muitas equipes de design têm adotado sistemas de design muito maiores, mais complexos e escaláveis que ajudarão a combater esses problemas. Estes podem incluir cores simples, tipografia e documentação de padrões diferentes, mas também podem incluir componentes
muito mais complexos que são específicos para esse aplicativo exato. Por exemplo, no SkillShare, temos componentes muito repetitivos para indicar cartões de classe. Esses sistemas projetados são adaptáveis e reutilizáveis. Ele torna seu processo de design muito mais eficiente e aumenta a consistência em um aplicativo grande, ou mesmo conjunto de produtos. Bem, estes se tornaram muito populares nas corporações, eu acho que há um grande uso para eles, seja você um freelancer,
um designer trabalhando em um projeto por conta própria, ou até mesmo uma pequena equipe de designers. Esses sistemas podem ser facilmente colocados juntos e podem realmente agilizar o fluxo de trabalho de qualquer designer. Nesta aula, vou mostrar como você pode criar rapidamente
um guia de estilo personalizado personalizado para usar em um aplicativo. Este pode ser um aplicativo em que você está trabalhando pessoalmente, ou um aplicativo que você decidiu olhar mais de perto, você vai obter uma perspectiva de insider sobre o fluxo de trabalho de um designer de UI/UX. Bem, este pode ser um pouco nicho assunto soando. Isso é definitivamente algo que qualquer um pode usar em seu fluxo de trabalho de design, se você está apenas começando no setor ou realmente procurando aperfeiçoar algumas de suas habilidades de esboço. Tudo o que você precisa para esta aula pode ser baixado online gratuitamente ou para uma avaliação gratuita. Então não se preocupe se você é novo em qualquer uma dessas ferramentas. Vamos começar essa aula identificando e documentando os padrões de design existentes em seu aplicativo. Em seguida, usaremos um modelo personalizado que eu forneci para qualquer pessoa que frequentasse esta classe para realmente iniciar o processo de guia de estilo. Em seguida, estamos passando para a criação de componentes personalizados no esboço por conta própria. Estes serão exclusivos para qualquer aplicativo em que você decidiu trabalhar. Finalmente, vamos compartilhar um pouco mais sobre como usar esses sistemas em equipes ou até mesmo em computadores
diferentes se você for um freelancer ou um designer independente. Meu objetivo para quem estiver fazendo este curso é incorporar um sistema de design em seu fluxo de trabalho UI/UX. Seguindo com esta classe, você verá o quão simples pode ser configurar este sistema de design, e você vai acabar com um guia de estilo bastante abrangente que você será capaz de trabalhar fora imediatamente após este curso. Estou tão animado para ajudar cada um de vocês a aproveitar o poder do esboço, para criar um guia de estilo personalizado que ajudará a acelerar seu fluxo de trabalho, além de eliminar inconsistências em seu aplicativo ou site. Espero que se junte a mim.
2. O que é um sistema de designs?: Eu queria levar apenas um minuto para descrever algumas das diferenças entre guias de estilo, sistemas
projetados e um monte de outros buzzwords que são usados na indústria agora. No passado, guias de estilo eram produzidos mais como um artefato. Depois que todos os estilos de interface do usuário foram finalizados, um designer foi responsável por passar e realmente documentar todos os elementos visuais que foram incluídos nos projetos iniciais. Porque este era um artefato
do processo de design e não realmente parte do próprio processo. Esses guias de estilo tornaram-se rapidamente desatualizados e realmente não referenciados muito além de sua criação inicial. Hoje houve uma mudança nas pessoas usando esses sistemas de design como uma parte mais integrada de seu fluxo de trabalho de design. Então, em vez de apenas documentar o design inicial, eles se tornam a única fonte de verdade do que os designers são capazes de extrair em seus projetos que eles estão criando. Então, quando um designer está criando uma nova maquete, em vez de projetar cada coisa por conta própria, eles terão esse sistema de design integrado ao fluxo de trabalho de esboços. Que eles serão capazes de puxar elementos pré-fabricados que são flexíveis e responsivos, que se adequarão a qualquer necessidade que eles possam ter para essa situação de design. Ao trabalhar a partir deste sistema unificado, as alterações de
design são refletidas em todo o aplicativo ou em todo o site. Isso torna o processo muito mais fluido para designers e desenvolvedores, já que os desenvolvedores também são capazes de referenciar os mesmos elementos e saber que há consistência em todas as instâncias no aplicativo ou site. Airbnb, Shopify, IBM e muitas outras grandes empresas têm sistemas de design muito bem documentados e interessantes que são ótimos para olhar, apenas
para ver o potencial desses tipos de sistemas e o que você pode ser capaz de fazer em uma empresa maior. Incluirei links para estes abaixo na classe descreve que esses tipos de sistemas podem ser ótimos para toda a sua equipe, designers
e desenvolvedores, e realmente qualquer outra pessoa que possa estar tocando seu produto no futuro. Como esses estilos são predefinidos e repetidos, há muito mais consistência para todos na equipe. Você não precisará mais anotar cada instância, cada maquete ou qualquer outro padrão de interface do usuário em seus designs. Os desenvolvedores já estão acostumados a esses componentes e padrões e sabem como implementar seus projetos, logo ao vê-los. Também é muito menos eficiente. Você é capaz de projetar muito mais rapidamente ao ser capaz de ver todas as suas opções de diferentes elementos que podem entrar em seus designs. Melhor consistência é definitivamente uma ótima maneira de ter melhor UX em seu site. Os sistemas projetados variam desde uma simples documentação de cores e tipografia até o sistema que documenta conteúdo editorial e diretrizes de implementação, e até mesmo sistemas de design totalmente integrados alinhados com as bibliotecas de front-end de desenvolvedores que eles usam para criar e manter aplicativos enormes. Para esta classe, no entanto, vamos nos concentrar mais no sistema de design para designers. Então algo que documenta completamente todos os estilos e componentes no aplicativo. Mas esta será uma ferramenta que é usada apenas pelos designers ou equipe de design. Agora que entendemos o que
são os sistemas de design e como eles diferem dos guias de estilo do passado. Acho que estamos prontos para começar nosso projeto. Vejo-te na próxima lição.
3. Como criar um inventário de interface: Criar um sistema de design é uma ótima maneira de ajudar a acelerar seu fluxo de trabalho e criar menos inconsistências em seu aplicativo. O primeiro passo para fazer a mudança para a criação de um sistema de design é criar um inventário de design. O que isso significa é que vamos
passar pelo estado existente do seu aplicativo ou site e tirar uma visão muito mais ampla de como as coisas estão funcionando agora. Vamos capturar capturas de tela de todos os diferentes elementos e componentes em seu site. Quando eu digo elementos, estou me referindo aos menores pedaços de projetar seu site. Estes podem incluir cor e topografia. Os componentes referem-se a elementos muito mais independentes e repetíveis no site. Este pode ser o cartão de classe no Skillshare ou a listagem inicial no Airbnb. Algo que é dinâmico e o conteúdo muda, mas como um todo o design é repetido em todo o site. O inventário de interface é realmente uma ferramenta fenomenal para mostrar os problemas de design que estão existentes no aplicativo atual. Esta é uma ótima maneira de obter o buy-in das partes interessadas, bem como apenas para que
os designers entendam a escala completa dos problemas com os quais estão lidando. Dito isto, isso definitivamente pode ser os passos mais demorados, então não se decepcione se você estiver gastando muito tempo procurando seu aplicativo existente e encontrando muitas inconsistências que você precisa documentar. Primeiro precisamos selecionar um aplicativo ou site com o qual vamos trabalhar para este projeto. Esta decisão será realizada para o resto de seus projetos. Definitivamente, selecione algo que você não se importa de passar algumas horas trabalhando. Eu vou estar trabalhando junto com o design deste aplicativo Skillshare iOS. Eu encorajo qualquer um que é um pouco mais novo para Scratch ou mais novo para
símbolos e esboço a seguir junto comigo, pois pode torná-lo um pouco mais fácil. Algumas outras grandes opções seriam aplicativos bem conhecidos, como Medium, Airbnb, Apple Music, algo que você realmente admira o design e consistência de. Seu também definitivamente bem-vindo para usar um projeto pessoal, mas eu avisaria que ele deve ser algo que é
muito longo e tem um guia de estilo estabelecido já para que você não está criando novos elementos de design como você trabalha através do projeto. Depois de selecionar seu aplicativo, você pode ir em frente e baixar o modelo de apresentação de inventário de interface que
incluí na seção de recursos de classe abaixo. Isso vai apenas ir em frente e dar-lhe uma estrutura onde você pode começar a soltar diferentes screenshots de todos os elementos em categorias específicas. Isso lhe dará uma visão geral de um lugar para adicionar botões, um lugar para adicionar diferentes designs de formulários, realmente apenas ajudá-lo a organizar e estruturar seu inventário de interface. Você deseja identificar todos os diferentes projetos e coisas que ocorrem com freqüência no site. Você não precisa necessariamente capturar a tela de cada instância de um botão, mas você vai querer procurar especificamente um botão que pode ter canto afiliado versus um canto quadrado, ou talvez ícones e botões versus não-ícones. Você pode identificar todos os estilos existentes com os quais você precisa trabalhar. Assim que todos esses elementos estiverem documentados e prontos para serem corrigidos, obsoletos ou incluídos em seu projeto, estamos prontos para dar o próximo passo. Precisaremos decidir qual estilo visual faz mais sentido para seu aplicativo específico. Algo que funciona bem em um aplicativo pode não ser a melhor opção para o seu projeto. Pense nos seus usuários quando estiver fazendo essa etapa e
pense em como deve ser a experiência do seu site. Em seguida, você terá que decidir quais estilos você deseja adotar seguindo em frente. Você definitivamente quer eliminar qualquer redundância. Deve haver apenas um botão primário, por exemplo. Depois de tomarmos decisões sobre quais estilos vão
avançar conosco para as próximas fases deste projeto, estamos prontos para começar a construir nosso guia de estilo.
4. Introdução aos símbolos do Sketch: Para aqueles de vocês que são novinhos em folha para esboçar, eu vou dar uma rápida visão geral
da interface para que você possa acompanhar o resto da lição. Se você estiver interessado em mergulhar um pouco mais, eu vou fornecer alguns links abaixo para os ativos esboço em seu site. Eles têm alguns excelentes vídeos introdutórios que realmente ajudarão a impulsionar seu conhecimento e fazer você se mover muito rapidamente. Se você tem mais experiência com esboço, isso pode ser uma pequena revisão para você. Você é bem-vindo para avançar ou ficar conosco e apenas obter um pouco mais de atualização na interface e como usar algumas dessas diferentes ferramentas. Então, quando você vai baixar o Sketch pela primeira vez, é muito fácil. Você pode baixar uma versão de avaliação gratuita. Há também uma opção de licença muito acessível. Eles tornam muito fácil começar quando você abre esboço pela primeira vez, você vai ver uma interface semelhante a esta. Obviamente, todo esse conteúdo é pessoal para mim. Anos será apenas um Canvas em branco, mas agora vamos nos concentrar
nos diferentes elementos da interface do esboço. À direita, você vai encontrar o inspetor. O Inspetor permitirá que você ajuste as configurações para qualquer camada selecionada atual ou para as opções para a ferramenta atual que você está usando. Quando você tiver uma camada selecionada, verá que o inspetor se divide em várias seções. Estes incluem propriedades de alinhamento, dimensionamento,
estilo, bem como algumas opções de exportação para essas camadas ou elementos individuais. À esquerda, você encontrará o painel Camadas. Esta é uma lista de camadas que contém quaisquer camadas na página atual, você pode visualizar quaisquer atributos de camadas, como se ele está oculto ou bloqueado, bem
como ser capaz de organizar seu documento reorganizando e renomeando camadas. Finalmente, no topo, você vai encontrar a barra de ferramentas. Sketch faz um ótimo trabalho de realmente ilustrar o que cada ferramenta faz e facilitando o acompanhamento. Especialmente se você já usou o Illustrator ou o Photoshop no passado, você já estará bastante familiarizado com muitas das ferramentas que o esboço fornece. Ao clicar com o botão direito do mouse na parte superior da página, há uma opção de personalizar a barra de ferramentas, que abrirá um prompt que permite arrastar e soltar diferentes ferramentas que você gostaria que incluísse na barra de ferramentas. Por enquanto, as configurações padrão estão bem, mas é ótimo quando você começar a usar o Sketch com mais freqüência para personalizar isso e economizar ainda mais tempo. Agora vamos analisar como criar símbolos, inseri-los e usá-los em todo o documento. Vamos começar com um exemplo muito simples, apenas explorando algumas formas básicas. Mas isso realmente ajudará a ilustrar o poder dos símbolos e símbolos aninhados e como estes podem ser usados em um projeto real. Vou começar com este documento simples com apenas um par de formas. Você pode baixar isso e acompanhar comigo e os recursos da turma. Você pode vê-lo criado várias páginas, que pode ser feito pressionando o botão de adição aqui, que irá criar uma página completamente em branco que você pode trabalhar fora quando você estiver pronto para iniciar uma nova seção. Por enquanto, estamos começando nesta primeira página chamada Introdução aos símbolos. Você pode ver que criou várias formas geométricas muito básicas. Através de Inserir, Forma, retângulo ,
oval, estrela, tudo o que você está com disposição para criar agora. Então vamos começar fazendo deste retângulo verde um símbolo que poderemos usar em todo o nosso projeto. A primeira coisa que vamos fazer é clicar selecionar este retângulo
e, em seguida, apertar o botão Criar símbolo. Ele permite que você digite o que você quiser para um nome. Por enquanto, vou manter este chamado retângulo. À primeira vista, não parece que muita coisa tenha acontecido. Mas se você clicar duas vezes neste retângulo, você pode ver que ele me levou a uma página chamada símbolos. Este retângulo está agora na página de símbolos. Se quisermos adicionar outra instância
deste retângulo agora está disponível para nós na biblioteca de símbolos. Eu tenho alguns outros símbolos que estão aqui para as próximas lições, mas você pode ver que nosso símbolo retângulo foi adicionado a esta seção também. Se eu selecionar a opção de retângulo, agora
tenho outra instância do retângulo para adicionar ao meu projeto. Isso se torna realmente interessante quando você gostaria de
fazer alterações em qualquer um desses na estrada. Então digamos que eu estava trabalhando em um projeto e eu queria mudar esse retângulo para ser roxo. No passado, isso poderia ser bastante complicado, cavando através de um aplicativo inteiro ou todos os meus mock-ups e realmente encontrar todos os exemplos deste retângulo e certificando-se de que atualizamos cada um para ser uma nova cor. Mas com este novo processo de símbolos de esboço, eu posso simplesmente voltar para o símbolo original e atualizar a cor para amarelo, e então quando eu voltei para a minha página original, você pode ver que ambas as instâncias ficaram amarelas. Então, a próxima coisa que eu quero rever é como organizar seus símbolos e garantir que eles são fáceis de encontrar, mesmo que você esteja trabalhando sozinho. Mas ainda mais importante, se você estiver trabalhando com uma equipe de designers, ser capaz de encontrar rapidamente muitos símbolos diferentes é realmente importante. Digamos que eu tenha outro símbolo que eu quero criar, que é outro retângulo, mas é uma versão de contorno em vez da inversão preenchida aqui. Então, quando eu vou criar símbolo, digamos que eu gostaria que esses dois símbolos fossem agrupados em uma pasta. Talvez eu queira que a pasta seja chamada de retângulo. Vou começar com retângulo
e, em seguida, adicionando uma barra invertida e outro nome que irá adicionar este símbolo em uma pasta chamada retângulo. Vamos nomear este, contorno retângulo. Quando clicarmos
nisso, nos levará aqui também. Como eu já nomeei esse retângulo original, vou precisar entrar no meu painel Camadas aqui para editá-lo. Mas tudo o que preciso fazer é adicionar a palavra preenchida. Seria retângulo, barra invertida, preenchimento retângulo. Agora, quando eu vou para os meus símbolos cair aqui, você pode ver que eu tenho uma pasta chamada retângulo e duas instâncias dentro dela que representam esses diferentes retângulos. Vamos fazer a mesma coisa com estas duas ovais. Flash oval, preenchimento oval e contorno de barra oval. Agora, vou mostrar-vos a parte divertida e é aí que os símbolos aninhados se tornam realmente importantes. O que vamos fazer é criar outro retângulo, um maior, e devolver as bordas deste painel inspetor aqui. Vamos criar um símbolo a partir disto. Vou dar um nome a este cartão. Digamos que este é um design de cartão que eu tenho em um aplicativo que eu estou trabalhando. Dentro deste cartão, há alguns elementos diferentes que mudam de instância para instância, mas o design geral é o mesmo a cada vez. Quando clicar duas vezes sobre isso, eu posso então entrar e projetar meu cartão para ser muito mais dinâmico. Posso inserir um símbolo dentro de outro símbolo, o que me permitirá ter substituições. Deixa-me mostrar-te como isto funciona. Então é um pouco mais simples de entender. Quando eu vou e eu posso inserir um símbolo dentro deste símbolo de cartão. Talvez eu queira um retângulo de preenchimento para descer neste canto aqui. Eu gostaria de um contorno oval para subir aqui neste canto. Quando eu voltar para a minha instância deste cartão, agora você pode ver que há essas duas opções de substituição que não estavam lá anteriormente. Isso é porque há esses dois símbolos dentro deste símbolo em si. Neste menu suspenso, agora
posso selecionar entre todas as minhas formas diferentes para escolher. Você pode ver como isso seria realmente poderoso enquanto você está criando elementos no esboço. Se você estiver criando uma lista de casas, por exemplo, no Airbnb, você pode querer que a imagem mude de cartão para cartão, mesmo o nome ou o avatar do usuário que foi o host. Ao criar este símbolo do cartão, você pode colocar outros símbolos dentro dele que podem ser atualizados
dinamicamente em todas as instâncias do seu site. Algumas coisas para anotar antes de seguirmos em frente. Esses símbolos estão disponíveis como opções de substituição porque cada um desses quatro símbolos tem o mesmo tamanho de quadro artístico. Se este nosso conselho foi encolhido para estes apenas um pouco menor. Você veria que agora, nem todas essas opções estão disponíveis como substituições. Então isso é definitivamente algo para notar. Se você estiver incluindo muitas substituições em seus designs,
certifique-se de que cada nossa pasta seja realmente dimensionada apenas para elementos que você deseja que apareçam neste painel de substituições. Outra ótima coisa a observar é ver como esses nomes aparecem no painel de substituições. Se você tem incidências em que você tem 30 opções de substituição diferentes, você quer ter certeza de que eles são nomeados e ordenados de uma maneira realmente estratégica. É fácil editar seus componentes. Se quisermos olhar neste design do carro, talvez
eu queira nomear esta camada aqui, objeto 1 e este, objeto 2. Agora, quando eu voltar para a minha instância original, você pode ver rapidamente uma edição, qual eu vou editar. Uma última coisa a observar é pensar sobre quais elementos em um componente não vão mudar de instância para instância. Você pode ter um cartão onde há um símbolo. Digamos que é o nosso contorno oval. Ele está sempre presente neste canto superior esquerdo em cada instância, apenas para que você não obtenha um painel de substituições muito inchado e difícil de seguir. Você vai querer ir em frente e bloquear esta camada. Ao clicar com o botão direito do mouse sobre ele e bater camada de bloqueio. Agora, quando você voltar ao seu símbolo original, você pode ver que esse objeto não está aparecendo no painel de substituições. Esta é definitivamente uma ótima ferramenta quando você está construindo componentes
muito mais complexos para aproveitar e lembrar. Agora que entendemos o básico do esboço e sabemos um pouco mais detalhadamente como criar, editar
e manipular símbolos, bem como utilizar o poder de símbolos aninhados e substituições de símbolos, estamos prontos para mover para criar alguns elementos mais personalizados específicos para o aplicativo que você selecionou para o seu projeto.
5. Como personalizar seu modelo: A coisa mais importante sobre ter um sistema de design é realmente ter tudo o que você precisa em um arquivo, então você está pronto para ir e capaz de se concentrar em coisas
mais importantes do que coletar todos os elementos da interface do usuário para começar a criar maquetes. Hoje, eu incluí um modelo para você começar e realmente saltar para a criação de um guia de estilo muito rapidamente. O modelo pode ser encontrado nos recursos da classe abaixo e incluirá muitos dos ativos que você
precisará para começar a criar seu aplicativo ou site. Isso é algo que pode ser usado uma e outra vez ao iniciar projetos. É especialmente ótimo para freelancers ou pessoas que muitas vezes trabalham com
diversos sistemas e querem criar guias de estilo rapidamente para seus projetos. Isso pode ser um ótimo valor agregado para os clientes e pode realmente ser útil para agilizar seu processo de design. Quando você baixar esse modelo dos recursos de classe, você vai querer ir em frente e abri-lo. Aqui, você verá que há três páginas que eu criei. A primeira é uma página de símbolos. Não fique muito sobrecarregado quando estiver olhando para isso pela primeira vez. Estes são todos os símbolos que eu já criei para você que serão atualizados
dinamicamente à medida que personalizamos o guia de estilo do seu aplicativo em que você está trabalhando. Vou entrar em um pouco mais de detalhes sobre todos esses componentes individualmente, mas primeiro, vamos começar focando nesta seção aqui que diz configuração inicial. Aqui, eu criei um sistema que será muito fácil de atualizar e pode iniciar todo o seu processo de design. Na primeira etapa, vamos avançar e atualizar as cores em nosso aplicativo. Você pode ver aqui que essas cores são símbolos, você pode dizer pela escrita roxa que está no topo. Além disso, quando você selecionar um, você verá que há esse ícone ao lado do nome da camada, que indica que é um símbolo. Estes conteúdos abaixo vão ser o que está realmente nesse símbolo em si. Só poderia haver um elemento, mas como tocamos antes, símbolos
aninhados vão incluir vários símbolos dentro desse símbolo. Você verá vários elementos abaixo deste nome de símbolo que incluem quaisquer símbolos que estão aninhados dentro dele. Para este exemplo, vamos avançar e selecionar esta caixa aqui. Você verá no inspetor que há uma cor de preenchimento aplicada que corresponde à cor desta caixa. Essa cor é, na verdade, a cor Skillshare. Mas eu vou seguir em frente e fazer algumas alterações apenas para que você veja como isso pode afetar o design geral de todos os componentes neste modelo. Digamos que a cor do aplicativo que eu estava construindo era, tal esta cor vermelha aqui? Instantaneamente, você pode ver que todos esses botões e elementos diferentes aqui foram atualizados para refletir a mudança que eu fiz. Isso pode ser muito útil se você precisar fazer alterações em todo o aplicativo, ou quiser personalizar algo rapidamente com base no feedback de outro membro da equipe ou de um cliente. Vá em frente e atualize todos esses elementos aqui e como você faz cada um, você vai querer ir em frente e sincronizar esta cor. O que isso faz é sincronizar a cor em seu paladar em todo o modelo para que ele esteja lá para sua referência no futuro. Eu vou mudar isso de volta, já que queremos seguir o guia de estilo
Skillshare e eu vou continuar e atualizar isso. Você pode ver que tudo voltou para a nossa cor azul. Vá em frente e cuide disso. Você não precisa usar cada um deles. Eu incluí o que eu pensei que seria um número bastante típico de cores, mas você não precisa utilizar todas essas opções. A próxima coisa que vamos fazer é personalizar o nosso tipo de letra. Você pode ver à esquerda desta tela que eu incluí todos os estilos de fonte que estão incluídos neste modelo. Você sempre pode adicionar mais ou usar menos, mas eu pensei que este era um bom ponto de partida para nós ter uma noção de como os estilos de
tipo funcionam e como podemos aplicá-los em todo o nosso design. Se você quiser adicionar mais, você pode fazer isso no futuro. Por enquanto, vamos começar selecionando todos esses estilos de tipo. Você pode ver aqui que há um lugar para tipografia. Aqui, você poderá selecionar qual tipo de letra deseja que todas as fontes estejam em seu site. Para mim, eu sei que o Skillshare usa o Proxima Nova. Vou em frente e selecionar Proxima Nova e apertar o botão de sincronização. Agora, você pode ver qualquer texto aqui foi atualizado para estar na fonte
Proxima Nova e que será
consistente em qualquer aplicação de imposto em todo o meu aplicativo. A próxima coisa que podemos fazer é selecionar cores de fonte específicas. Digamos que quero que meu texto primário seja verde. Podemos ir em frente e sincronizar esses estilos. Você pode ver que isso é um pouco mais difícil porque não
há todas as aplicações de têxteis em todos esses componentes, mas em qualquer lugar que esse texto foi aplicado, agora
você será capaz de ver essas mudanças em todo o aplicativo. Eu vou ir em frente e desfazer isso, já que eu quero que meu texto seja azul, mas você pode atualizar qualquer um desses estilos para atender às suas necessidades. Eu diria que no geral, é definitivamente a melhor prática ter, pelo menos, uma ou duas versões de uma fonte cinza ou preta que você pode usar em todo o aplicativo, bem
como algo que é branco em cada tamanho para que você possa aplicar aqueles em mais escuro ou uma interface de usuário mais escura. Agora que personalizamos nosso tipo e sincronizamos esses estilos no aplicativo, também
podemos personalizar bordas. Este é definitivamente um passo opcional porque eu já incluí opção afiliada, uma opção arredondada, bem como uma opção quadrada de fronteira. Mas se houver algo personalizado que você queira incluir, vá em frente. Selecione todas essas bordas e faça as alterações que você queira no raio, na espessura da borda ou em qualquer outra coisa que você possa achar adequado para seu aplicativo específico. Você realmente não sabe ou você não tem certeza do que você quer fazer, não se preocupe com este passo por agora. Isso está ficando um pouco mais no nitty corajoso e pode ser útil quando você estiver trabalhando em outro projeto no futuro. último passo é adicionar seu logotipo. Este exemplo, eu apenas uso o Google rapidamente. Você pode usar adicionar em seu logotipo para o seu aplicativo. Você definitivamente quer ter certeza de que as bordas externas do seu logotipo estão indo todo o caminho para os lados deste tabuleiro de arte ou recipiente de símbolos aqui. Temos um lugar para você ter o seu logotipo branco, bem como o seu logotipo escuro. Você pode ver que estes são nomeados na estrutura que mencionei anteriormente. Eles vão aparecer em uma pasta de logotipo com ambas as opções disponíveis. Você também pode adicionar diferentes opções de cores ou variantes do seu logotipo lá, dependendo de quais são suas necessidades. Agora, fizemos todo esse trabalho para personalizar nosso modelo aqui. Podemos jogar com alguns desses símbolos que eu adicionei em apenas para ter uma idéia do poder de todos esses símbolos aninhados e personalização que fizemos neste modelo. Um grande exemplo é esta forma. Você pode ver que há opções para alterar a cor do texto com todos os diferentes estilos de texto que configuramos anteriormente. Se eu quiser que o texto seja a minha cor azul, você pode ver aqui que agora está atualizado. Também é muito fácil editar este texto. Você pode dizer, Título do Formulário, e isso vai atualizar muito rapidamente. Você também pode atualizar alguns dos estilos aqui. Se você quisesse um tipo de formulário diferente, talvez, você quisesse um ícone lá, seria muito rápido adicionar isso também. Você também pode ver que meu texto está sendo cortado um pouco. Felizmente, este componente é responsivo para mim, que vamos aprender a fazer em futuras lições, mas eu sou capaz de clicar e arrastar e ter certeza de que todo o meu texto está se encaixando. Eu também posso personalizar este texto e fazer quaisquer outras opções que eu possa querer a partir daqui. Se eu quiser que minha borda seja azul também, ou minha cor de fundo seja azul também, isso é muito fácil de editar. A mesma coisa com este botão. Você pode ver que agora eu sou capaz de realmente fazer mudanças rapidamente. Estas serão a forma como você está atualizando rapidamente instâncias de símbolos em seu aplicativo. Depois de personalizar este modelo, tenho certeza que você agora tem uma compreensão muito melhor de como
esses sistemas de design podem ser poderosos com todas as ferramentas de símbolos aninhados que estão nas novas versões do Sketch. Espero que você esteja tão animado quanto eu estou sobre todas essas ferramentas e pronto para avançar com a construção de alguns elementos mais personalizados para o aplicativo que você está trabalhando.
6. Como usar símbolos em seu fluxo de trabalho: Eu só vou correr rapidamente e mostrar um pouco mais sobre alguns
desses diferentes componentes que eu
já criei para você usar em seus projetos futuros. Tentei manter as coisas bem básicas. Você definitivamente não quer criar esses sistemas de design de uma forma que você acabe com tantos elementos e tantos símbolos em seu arquivo que é realmente difícil gerenciar e manter o controle de todas as diferentes opções. Eu incluí o que eu pensei que você vai precisar para começar, você é obviamente bem-vindo para remover e adicionar coisas conforme necessário. Vou percorrer na próxima lição, como criar componentes personalizados. Por enquanto, eu lhe dei opções para complementos como cursores, alguns avatares, muitos botões e emblemas. Estes são definitivamente elementos de interface do usuário muito comuns que vão aparecer frequentemente em todo o seu aplicativo ou site. Eu também incluí muitas formas que são muito comuns também. Opções de configurações, como rádios, caixas de seleção e outros sistemas de rotulagem, bem
como itens de lista e menu que aparecem com frequência, especialmente em aplicativos iOS e Android. Também ter elementos de navegação, como cabeçalhos, barras de status e outras coisas que aparecerão frequentemente como uma barra de abas que aparece na parte inferior de um aplicativo. Outra coisa a observar é, todos esses estilos de texto que são mostrados aqui como elementos. Se você quiser que seus estilos de texto sejam editáveis, você precisará que eles sejam adicionados a um componente
como um símbolo em vez de apenas como um estilo de texto. Se você quiser que o texto sempre tenha um determinado tamanho, peso e cor, então você não precisa necessariamente que ele seja montado. Mas se você quiser ser capaz de substituir texto branco para preto em um botão diferente de instância para instância, é importante adicionar isso ao seu símbolo como outro símbolo. Por exemplo, nesses botões, você pode ver que estes são realmente símbolos de texto. Olhando aqui no seu painel de camadas, você pode ver este pequeno ícone que indica que é um símbolo de texto. Isso me permitirá substituí-lo com quaisquer outros símbolos de texto que são do mesmo tamanho. Isso é definitivamente útil para botões, mas também há instâncias como em formulários e outros itens de cabeçalho e navegação que você vai às vezes querer usar textos pretos, às vezes usar branco, e você não quer ter que criar um símbolo diferente para cada cor de texto. Isso seria redundante e definitivamente derrotaria o propósito de substituições de símbolos e esboços. O mesmo se aplica para diferentes cores e preenchimentos de botões. Porque seus diferentes elementos de interface do usuário podem variar de cor de instância para instância. Você deseja garantir que essas cores estejam disponíveis como substituições de
símbolo nesse símbolo específico. Você definitivamente verá isso entrar em jogo mais tarde no processo. Mas mesmo em casos como seus ícones ou tags diferentes, você vai querer que a cor desse plano de fundo na tag seja editável. Você pode ver aqui que o recipiente, é na verdade um símbolo e que me permite editar o preenchimento da interface para ser cores diferentes dependendo da instância que estou usando. Digamos que queríamos entrar e adicionar outro estilo de texto aqui deste ponto 20. Vou mostrar-lhe este exemplo no texto, mas você é definitivamente bem-vindo para fazer este processo semelhante para outros elementos
nesta página ou em outros componentes simples do bloco de construção como estes, em qualquer lugar que você sinta que eles são necessários para seu aplicativo. Se formos em frente e copiarmos este símbolo, tudo o que estou a fazer é manter o controlo e a arrastar. Você também pode simplesmente selecionar o símbolo e clicar em 'Command D', que irá duplicá-lo para você. Qualquer uma dessas são ótimas opções. Aqui, você pode ver que é uma duplicata porque tem a palavra 'Copiar' no final. Mas provavelmente vou querer renomeá-lo. Digamos que este vai ser primário, que indicará que é a minha cor primária, que aqui é azul e vai ser ousado. A cor de fundo neste símbolo é preta, apenas para que você veja que este texto branco está aqui. Não precisamos disso, já que a minha mensagem vai ser azul. Então eu vou ir em frente e desligar isso, mas eu vou selecionar este texto e eu vou criar um novo estilo, e isso vai ser chamado 20 móvel normal e então novamente, primário, negrito. Tudo o que eu preciso fazer é entrar e atualizar isso para ser minha cor azul e clicar em 'Sync'. Agora temos um símbolo que é minha cor azul primária e vai ser intercambiável com qualquer um desses outros símbolos quando eles são usados em símbolos aninhados. Para testar isso, podemos ir em frente e criar rapidamente uma nova página. Vamos inserir o meu símbolo. Se formos para símbolos e, em seguida, sob texto 20,
normal e, em seguida, primário negrito. Este era um símbolo que acabamos de criar. Você pode ver que agora isso é intercambiável entre todos esses diferentes elementos. Isto é definitivamente ainda mais útil se estiver aninhado dentro de outro símbolo. Se eu voltar para a minha página de símbolos, vamos em frente e testar como isso pode ser usado. Digamos que, Eu sei que este tamanho 20 estilo é usado no meu botão, símbolos grandes. Vamos em frente e criar uma nova página clicando neste sinal de adição. Isto é apenas um exemplo para não precisarmos nomeá-lo. Vamos em frente e inserir um símbolo e ele vai ser o nosso símbolo de botão grande. Vamos fazer um botão esquerdo aqui. Eu quero que meu texto seja, oh, lá está, texto 20 pontos normal negrito primário. Esse é o símbolo que acabamos de criar e você pode ver que agora é intercambiável em dinâmica dentro deste símbolo aninhado. Uma vez que eu selecionar isso, provavelmente quero um fundo diferente. Você pode ver já agora eu sou capaz de selecionar entre todas essas novas cores de fundo. Talvez eu queira um fundo cinza claro. Agora, você pode ver por ter todas essas opções diferentes, eu criei um sistema realmente dinâmico para criar estilos de botões. Com sorte, agora você pode ver todo o poder dos símbolos
aninhados e como criar um guia de estilo rapidamente, que irá realmente acelerar seu fluxo de trabalho. Na próxima lição, vamos passar pela criação de alguns componentes mais personalizados e complexos para você usar no design do seu aplicativo.
7. Como criar componentes personalizados com símbolos: Para fazer uma recapitulação rápida, os componentes podem ser considerados como elementos maiores que são compostos de elementos pequenos e
simples dentro da interface do usuário. Este pode ser um botão que é feito de um estilo de texto, uma cor de fundo. Também poderia ser itens muito mais complexos. Um cartão de classe no Skillshare ou uma listagem de casa no Airbnb são ambos ótimos exemplos. Também pode haver elementos mais gerais que são usados em todos os designs de interface de usuário, como formulários ,
modelos e outros elementos que você normalmente verá em sites e aplicativos. Quando você fez seu inventário de interface, você provavelmente notou muitos desses componentes em toda a sua interface de usuário, e provavelmente tem uma boa idéia de alguns deles que podem ser uma coisa boa para você construir e esboçar. Ao construí-los como componentes dinâmicos e flexíveis, você poderá usar um único elemento várias vezes ao longo de seu design de esboço e economizar muito tempo em vez de construir uma edição de cada símbolo. Em seguida, ter que voltar e atualizar cada um individualmente se quaisquer alterações precisam ser feitas. Vamos em frente e selecionar 1-3 componentes que você gostaria de construir e esboçar. Eles seriam úteis para você ao criar sua interface em seu guia de estilo. Para começar, eu sugeriria escolher algo bastante simples com apenas alguns elementos. Em seguida, podemos construir em algo mais complexo que tem atualizações
mais dinâmicas que precisam ser feitas em toda a interface. Vá em frente e pense em algo que você viu comumente em toda a sua interface que você gostaria de construir como um componente. Se você pensar em um exemplo como Airbnb que temos discutido, eles têm este componente muito comumente repetido que é uma listagem de um aluguel específico. Este elemento em si não muda, mas as coisas dentro dele são atualizadas de instância para instância. Você pode ver aqui, muitas opções diferentes de listagem inicial que são todas do mesmo componente, mas são muito dinâmicas para refletir as necessidades de cada oferta individual. Alguns exemplos mais que você pode ver aqui do Airbnb mostram quantos componentes são realmente usados em toda uma interface. Você pode ter centenas de componentes diferentes que são dinâmicos e flexíveis o suficiente para criar telas completas em todo o seu aplicativo. Ao olhar para o aplicativo Skillshare, identifiquei três componentes que gostaria de criar como componentes de esboço flexíveis. Tentei escolher coisas que não eram muito complicadas só para ilustrar como poderíamos construí-las muito rapidamente. Mas então eu também queria construir algo mais complexo, como uma linha de várias classes que seria capaz de ser inserido muito rapidamente,
personalizado, e se sentir como um aplicativo real ao vivo. Para começar, eu queria construir este estado vazio do nosso aplicativo. Isso ocorre frequentemente em todo o design do aplicativo, mas o ícone, texto e o botão, o estilo e o conteúdo podem ser diferentes em cada instância. Este é um ótimo exemplo de algo que você pode querer construir como um símbolo aninhado. A primeira coisa que faremos quando começarmos a pensar sobre a construção desses componentes é, olhar para quais elementos mudam e quais elementos são consistentes em todo o projeto. Para nós realmente, tudo vai mudar neste exemplo específico, exceto talvez o espaçamento entre cada elemento e a largura geral. Eu fui em frente e copiei alguns desses elementos de baixo apenas para retirar apenas os itens específicos com os quais vamos trabalhar. Como mencionamos antes, um símbolo aninhado é apenas um símbolo que contém outros símbolos dentro dele. Vamos começar criando um símbolo que
simplesmente tem todo o conteúdo deste elemento aqui. Simplesmente crie símbolo. Por enquanto, podemos chamá-lo de Estado Vazio. Mais tarde, à medida que começamos a construir mais componentes, nós definitivamente queremos estar mais conscientes de como estamos nomeando isso, e como ele vai caber na estrutura de arquivos do resto de nossos símbolos. Quando eu clicar duas vezes sobre
isso, ele vai me levar de volta para nossa página de símbolos, e você pode ver que ele é criado um símbolo aqui. Se ele acabar em um grupo, você é bem-vindo para desagrupar lá para que você possa ver o que é tudo está aqui. Para mim, eu já estava usando um ícone para este design específico, que é ótimo porque agora eu sou capaz usar o painel substituições para selecionar outros ícones nesta opção. Se você não estiver usando ícones ou quaisquer outros símbolos aqui, você gostaria de ir em frente e responder essas coisas como símbolos. Por exemplo, você vê que esse botão é, na verdade, apenas um grupo. Não é um símbolo de botão, então vamos querer substituir isso por um símbolo de botão para
que possamos substituí-lo dinamicamente em diferentes instâncias. Se formos para o nosso menu suspenso Símbolos e vamos para Button, eu vou ir em frente e selecionar um botão Pequeno e Centrado. Você pode ver que o estilo é um pouco diferente. Isso realmente ilustra o propósito de ter um guia de estilo. Este design de botão realmente não foi incluído no meu guia de estilo, que significa que era um design singular que não estava alinhado com o resto da interface do usuário no aplicativo. É muito importante ter certeza de que você está mantendo um bom inventário de seus estilos e não deixando o sistema ficar muito inchado à medida que seu aplicativo cresce. Nós vamos em frente e realmente apenas remover este velho botão já que temos este aqui agora. Neste painel de substituições, eu sou capaz de atualizar o conteúdo, talvez eu só queria dizer botão de exemplo por enquanto. Uma vez que estamos projetando isso como um componente que vai ser usado em todo o meu design, ele não precisa ser específico para este estado vazio. Eu posso ir em frente e adicionar isso aqui. Precisamos pensar sobre como esse estado vazio vai ser usado. Será que este texto vai precisar mudar o seu estilo? Poderíamos querer um cinza claro em alguns casos, um cinza escuro em alguns, talvez fosse azul às vezes. Eu não tenho certeza, mas só para ser seguro, eu quero ir em frente e usar um símbolo de texto aqui para que ele seja muito mais flexível na estrada. Novamente, este é o tamanho 17. Eu vou ir em frente e dizer, “Símbolos”. Nós vamos para o Texto 17, e será Centrado, e nós queremos um cinza. Agora temos nosso texto de título, e eu vou em frente e adicionar uma cópia de espaço reservado, e vamos fazer com que a largura total disso, e vamos colocar isso bem ali. Agora, podemos apagar aquele original. Então queremos também ter os nossos subtextos. Vamos adicionar outro símbolo que é Texto, e este é tamanho 14. Vamos fazer a centralização, e talvez começar com o segundo grau. Qualquer opção de estilo que você selecionar originalmente será a opção padrão que aparece quando você inserir este símbolo na estrada, mas você não está preso a esse design. Normalmente, eu só tento selecionar o estilo que eu acho que vou usar mais comumente, mas a partir daí, você pode editá-lo em cada instância. Vá em frente e atualize isso para que seja a altura correta. A próxima coisa que queremos fazer é realmente utilizar um plug-in para o Sketch que realmente vai torná-lo muito mais fácil para organizar esses itens de uma forma que eles podem ser diferentes alturas em diferentes instâncias e ainda têm o mesmo espaçamento . Diga esta lista suspensa para ser três linhas ou uma linha em vez de duas linhas. Com a forma como ele está atualmente projetado, este botão não seria responsivo a essa alteração e assim você teria alguns problemas de espaçamento. O que vamos fazer é baixar um plugin chamado Launchpad for Sketch. Estou incluindo um link para isso abaixo nos detalhes
da aula, mas é gratuito e é muito fácil de instalar,
basta baixar, clicar duas vezes, e ele vai ser instalado automaticamente no Sketch para você. Uma vez instalado, ele aparecerá no canto inferior direito da tela e você verá algumas funcionalidades adicionais. A funcionalidade que vamos revisar agora é essa funcionalidade de layout automático, mas o resto pode ser explorado através do site dos aplicativos. Em seu novo componente que você criou, você vai seguir em frente e selecionar todas as camadas diferentes, e isso vai lhe dar muitas opções
adicionadas que não estão incluídas no Sketch para começar. Neste momento, queremos alinhar verticalmente todos os nossos elementos. Outras opções seria deixado forro, mas vamos ficar com uma linha vertical e, em seguida, ele vai permitir que você especifique o espaçamento entre cada elemento. Talvez queiramos 15 pixels entre cada elemento, não importa quantas linhas de texto estejam em cada uma delas ou o tamanho do ícone. Nós também, enquanto ainda estamos em nosso símbolo, queremos ter certeza de que a camada deste objeto é de
uma forma lógica que possamos
entender quando estamos olhando para os painéis de sobreposições. Por exemplo, neste momento esta manchete está no fundo. Talvez um pouco confuso já que este botão é na verdade o último elemento. Queremos ir em frente e mover isso para cima para estar bem abaixo do ícone, e então nós vamos ter o subtexto aqui, e nós podemos querer até mesmo nomear isso para que possamos querer renomear esta camada, Subheader, e então vamos nomear esta camada de cabeçalho, e, em seguida, vamos nomear este CTA. Ótimo, então agora quando voltamos aos nossos componentes, podemos ver que o cabeçalho e o subcabeçalho claramente rotulados para que não tenhamos que adivinhar quais textos devemos editar. Talvez queiramos que o nosso Subcabeçalho seja apenas uma linha. Você pode ver que o botão foi movido automaticamente para cima para acomodar essa alteração no espaçamento, de modo que nosso espaçamento seria corrigido independentemente das instâncias em. Esta é uma ótima ferramenta para usar quando você está criando esses símbolos mais dinâmicos que você realmente não tem certeza de quanto tempo cada elemento de texto vai ser ou quão grande elementos gráficos diferentes pode ser que vai permitir muito mais espaçamento consistência em todo o aplicativo. A próxima coisa que eu vou fazer é executar através de mais um exemplo de um componente um pouco mais complexo que
seria usado com muita frequência no aplicativo Skillshare iOS. Aqui você pode ver o modelo completo de uma página de classe bastante padrão no Skillshare. Isso é definitivamente usado quando você está navegando, quando você está pesquisando, quando você está descobrindo novos conteúdos ou mesmo quando você está olhando para o conteúdo recomendado em sua página inicial. Este é um elemento usado com muita frequência que definitivamente queremos ser realmente reutilizável, fácil de atualizar e personalizável para diferentes páginas de um site. Vou guiá-lo através de um pouco da lógica de como eu poderia construir um elemento como este. Começaria por analisar quais partes são flexíveis e em mudança,
e quais podem ser mais consistentes ao longo de cada instância. Você vê esta linha do cabelo, isso é algo que vai ser em todos os casos este componente. Quando você olha para baixo, você pode ver que ele é aplicado a quase todas as linhas de aulas. Neste caso, e realmente em todas as nossas páginas. Obviamente, algo que não atualizaria. Também ser capaz de ver todas as classes, isso é provavelmente algo que vai ser em cada instância. Pensaríamos nisso mais como um elemento estático. O texto das classes de tendência é algo que estaria em cada elemento, mas pode ou não mudar na medida em que a cópia vai. Gostaríamos que isso fosse flexível, mas sempre teríamos isso como uma opção nesse componente. Para cada classe individual, gostaríamos sempre de exibir a hora, mas o tempo real escrito lá pode variar de instância para instância. Assim como o título, artista e imagem de fundo da capa da turma. A maneira que eu pensaria sobre construir isso seria começar por construir um único elemento de uma classe e, em seguida, construir um único elemento
deste cabeçalho e, em seguida, ser capaz de compilar isso em um maior, mais símbolo aninhado que pode ser aplicado como uma linha de classe geral. Eu já fui em frente e preparei isso um pouco, mas eu vou orientá-lo através de alguma lógica aqui. Eu comecei criando este elemento de classe única, e ele realmente é composto de apenas quatro coisas específicas. Uma sendo essa imagem de fundo da turma, uma sendo a hora, e então temos o título e os artistas, e então temos o título e o professor. Nós definitivamente queremos pensar sobre isso. Estes são três itens específicos, mas já avançamos e os agrupamos em um grupo chamado Tempo. Nós também fomos em frente e agrupamos a imagem da classe e o Tempo juntos, já que eles estão realmente no mesmo objeto e queremos mantê-los aninhados juntos. Também nos certificamos de usar um estilo de texto específico. Vamos em frente e usar o tamanho 12, normal e vamos em frente e fazer branco negrito aqui. Agora que é um estilo conjunto que vai combinar com tudo o resto em nosso aplicativo. Também usamos um ícone específico neste design para que ele possa ser editado e atualizado para ser outros ícones se alguma vez precisarmos dessa funcionalidade no futuro. Isso também mantém a consistência. Se quisermos atualizar o ícone do relógio em todo o site, será muito fácil atualizá-lo em um único local em nosso sistema de design. Queremos fazer a mesma coisa com o título da turma e o professor. Para isso, vamos em frente e aplicar estilo de texto, bem como para o professor. Há uma configuração aqui que permite ajustar o conteúdo deste cartão para se ajustar ao tamanho da prancheta. Quando eu deveria devolver isso, se estamos sempre ajustando o tamanho geral da prancheta aqui. Vou desligar isso apenas para editar isso, e então podemos ativá-lo novamente para que o símbolo esteja adotando sempre que alteramos o tamanho da instância. Vou abordar isso mais detalhadamente na próxima lição, mas é importante ao editar esses símbolos. Eu também fui em frente e apliquei nossa funcionalidade de grupo empilhado, e você pode ver quando eu acerto minha camada de grupo empilhado, eu posso entrar e exibir as configurações novamente para que eu possa sempre
editá-lo para estar mais perto ou mais distante. Vamos voltar para a minha prancheta geral e olhar mais para esta composição. Você pode ver que teríamos duas instâncias deste objeto de classe, e então teríamos uma instância deste item de cabeçalho. Eu acho que a próxima coisa que eu faria é construir este cabeçalho. Eu já comecei isso na minha biblioteca de símbolos como você pode ver. Eu comecei criando um componente simples que tem dois estilos de texto aqui. Um sendo o ver todos e um sendo classes populares, bem
como esta linha horizontal, e como eu mencionei antes, essas linhas horizontais consistentes em todas as instâncias. Vou em frente e trancar esta camada. Isso vai escondê-lo do painel de substituições e apenas tornar tudo um pouco mais fácil de trabalhar. Agora, quando eu voltar para os meus símbolos, você pode ver isso em “Conteúdo”, que é como eu aninhado estes. Agora eu tenho uma opção para um cabeçalho de seção, bem como uma única classe. Eu vou ir em frente e adicionar meu cabeçalho de seção aqui, e eu posso excluir esses objetos que não são mais montar. Você pode ver que eu agora tenho três símbolos onde costumava ser uma lista completa de camadas. Muito mais simples de ver no meu painel de camadas e entender o que estou olhando. A próxima coisa que eu faria aqui seria criar um símbolo de todos estes três. Isso não é necessariamente algo que você teria que fazer, mas eu sei que uma vez que esta linha vai ser usado muitas, muitas vezes no aplicativo, eu prefiro ter todos estes estar juntos em vez de sempre ter que inserir três símbolos. Para mim, isso faz mais sentido neste caso. Eu fui em frente e criou este componente de linha de classe de conteúdo que tem duas classes, bem como este cabeçalho de seção que criamos anteriormente. Você pode ver neste objeto, há um grupo empilhado já criado e ele vai ter o cabeçalho bem
como um grupo que tem duas classes nele. Quando você cria um grupo, a funcionalidade de grupo empilhado realmente contará esse grupo como um item. Como nós agrupamos estes primeiro, estes são capazes de ser diretamente adjacentes um ao outro. Os estilos do layout automático não serão aplicados a cada um desses componentes individualmente. Agora temos um componente bastante flexível que pode ser usado repetidamente. Agora quero mostrar a vocês como esses componentes podem ser flexíveis. Quando voltarmos para nossa página original, você pode ver que temos algumas instâncias que eu talvez queira aplicar este novo objeto. Se formos para o nosso “Símbolo” e vamos para a nossa seção “Conteúdo” e olharmos para uma linha de classe. Eu posso ir em frente e inserir isso aqui, colocá-lo no mesmo posicionamento, e então apenas ir em frente e apagar o antigo. Agora temos uma linha completa com todo o mesmo conteúdo de antes, mas agora podemos substituir e personalizar rapidamente todas essas opções sem ter que manipulá-las individualmente em grande escala. Isto é definitivamente útil. Se você quiser fazer alterações ou fazer algo que se pareça com uma maquete
muito realista sem ter que fazer tanta personalização. Mesmo escolhendo uma imagem de classe aqui nós podemos entrar e eu tenho alguns salvos, entrar e atualizá-los muito rapidamente, e você pode ver, em vez de ter conteúdo falso, você pode realmente fazer as coisas parecerem convincentes, o que é ótimo para os clientes, mesmo apresentando aos detentores de participações se você trabalha em uma empresa maior. Isso definitivamente vem a calhar ao apresentar seu trabalho a outros. Uma última coisa que quero mostrar nesta lição é como
fazer mudanças nesses símbolos complexos pode ser uma economia de tempo. Ao entrar e clicar em nosso símbolo, você também pode clicar duas vezes em um símbolo dentro de assemble para levá-lo a esse símbolo. Isso será muito útil se você não tiver certeza de onde está esse símbolo no seu arquivo. Basta clicar duas vezes irá saltar
diretamente para o símbolo e deixá-lo editá-lo a partir daí. Digamos que eu decidi que, em vez de ter esse texto preto, nós realmente queríamos mudar isso, um dos meus clientes, digamos que me peça para atualizar isso para ser um texto azul e negrito. Eu posso apenas atualizar isso neste único local, e agora você pode ver que ele é atualizado
neste símbolo, bem como também está sendo atualizado na maquete final. Se eu tivesse isso aplicado 100 vezes no meu projeto, eles agora estão todos atualizados, economizando muito tempo de ter que ir e localizar cada instância e atualizá-los individualmente. Esperemos que isso esteja realmente ilustrando os recursos de energia e economia de tempo desses símbolos e componentes aninhados no Sketch.
8. Configurações de redimensionamento do Sketch: Você quer aprender um pouco mais sobre configurações de redimensionamento, que podemos tornar nossos componentes ainda mais flexíveis e responsivos. Isso é realmente útil, especialmente se você estiver projetando para vários tamanhos de tela ou dispositivos. As configurações de redimensionamento podem ser um pouco complicadas quando você começa,
mas eu incluí alguns recursos excelentes no Arquivo de esboços de Recursos de Classe, na Descrição da Classe abaixo, que podem abrir e ter uma ótima idéia de muitos as opções e como eles funcionam em aplicativos reais. Olhando para este arquivo de esboço nas configurações de redimensionamento aqui, você pode ver que há um exemplo com quatro aplicativos muito simples, mas diferentes configurações de redimensionamento. No primeiro exemplo, você pode ver que não há configurações de redimensionamento aplicadas. Isto significa que esta caixa branca vai simplesmente esticar para caber a mesma proporção e proporções que o próprio grupo geral. Então, quando eu vou para este grupo geral e eu vou para redimensioná-lo, você pode ver que esta caixa branca está simplesmente esticando para ajustar a mesma proporção que eu estou arrastando o objeto geral hoje. O segundo exemplo tem diferentes configurações de redimensionamento aplicadas. Este tem todos os quatro cantos de pintura. Isso significa que o número de pixels entre a borda externa desta caixa verde e esta caixa branca em todos os quatro lados, permanecerá consistente, independentemente do tamanho total deste objeto. Quando eu vou redimensionar todo esse grupo, você pode ver que o espaçamento nas laterais do objeto e do topo são consistentes. No terceiro exemplo, você pode ver que aplicamos uma largura fixa e uma altura fixa a esta caixa branca. Isso significa que quando eu clicar no grupo geral e ir para redimensionar, a caixa branca realmente não muda de tamanho, não importa o tamanho do grupo geral. No quarto exemplo aqui, configurações
semelhantes são aplicadas, mas também estamos aplicando pino no canto superior direito. Então está preso à direita e no topo aqui. Você pode ver que algo semelhante está acontecendo exceto que o objeto agora está fixado no canto superior direito. Compreender esses quatro tipos de configurações, é definitivamente realmente útil quando começar e aplicar configurações de redimensionamento para objetos em seus componentes. Para ver alguns exemplos mais complexos, você pode ver aqui vários grupos de objetos que juntos compõem uma galeria maior, potencialmente com um avatar e alguns impostos ou objetos diferentes aqui. Pode ser aplicado de maneiras diferentes. Para se familiarizar com a forma como algumas
dessas configurações de redimensionamento funcionariam nesses grupos maiores, você pode ir em frente e começar a jogar com esse grupo de amostra à direita. Ao fazer algumas alterações no tamanho e proporção desse objeto
e, em seguida, rereferenciando essas configurações aplicadas aqui, você terá uma melhor compreensão de como elas funcionam em componentes
reais e como elas podem ser aplicadas aos seus componentes específicos para o design do seu aplicativo. Para dar alguns exemplos um pouco mais realistas, mas ainda bastante simples, eu quero fazer referência a este item de menu aqui, bem
como este campo de formulário que eu apliquei neste arquivo. Este é um ótimo exemplo porque formulários são definitivamente algo que é usado em diferentes dispositivos e muitos aplicativos diferentes com restrições diferentes. Então esta instância parece estar funcionando muito bem aqui, mas vamos dizer que queremos fazer uma cópia disso. Se fôssemos aplicar esse mesmo design em dispositivos móveis, poderíamos estar limitados na largura de nossos objetos. Se eu ir em frente e encolher isso, você pode ver agora que o texto está se estendendo em duas linhas. Isto pode ser definitivamente um problema. Não é muito legível e não é muito realista procurando como isso ficaria em um aplicativo ao vivo. Se eu for ajustar a altura aqui, você pode ver que eu configurei isso para que o campo em si tenha uma altura flexível responsiva, mas esses outros objetos, como este pequeno ícone aqui são uma largura fixa e uma altura fixa e eles têm configurações de redimensionamento diferentes. Ao aplicar essas configurações de maneiras estratégicas, você pode tornar cada item muito adaptável e personalizado para suas necessidades específicas. Para mais um exemplo, para este item de menu aqui, se fôssemos diminuir a largura para ser muito mais estreito, você pode ver que agora meu texto está sendo cortado. Eu posso querer aumentar a altura para que seja mais legível e mais realista olhando, mas você percebe que meu avatar tem configurações que foram largura fixa, altura
fixa em pino a canto, enquanto alguns desses outros itens são mais responsivos e capaz de contornar texto sem alterar qualquer proporção do componente geral. Agora eu quero ir em frente e voltar para o nosso outro arquivo de esboço com nosso modelo aqui, e mostrar como algumas dessas configurações podem ser aplicadas ao nosso componente de estado vazio que fizemos na última lição. Olhando componente em nosso arquivo original, você pode ver quando eu vou redimensioná-lo, que há definitivamente alguns problemas que provavelmente não são ideais. Você pode ver que nosso botão está realmente apenas esticando para ajustar o tamanho do componente geral que eu estou adaptando, mas ele não está realmente funcionando bem para o imposto ou a legibilidade de qualquer um desses objetos. Além disso, eu acho que este ícone
na parte superior poderia ser melhor se fosse um tamanho consistente. Eu realmente não estou amando como ele está se adaptando, crescendo e encolhendo com o componente como eu mover isso ao redor. Então eu vou dar um duplo clique e voltar para a página de símbolos e fazer alguns ajustes. A primeira coisa que vou fazer é lidar com este botão. Eu definitivamente queria ser uma largura fixa, eu não quero que ele seja capaz de ficar tão estreito que o texto não se encaixa mais no botão. Eu também quero consertar a altura. Se eu tiver que arrastar para fora a altura deste objeto em geral, eu não quero que meu contêiner de botão esteja crescendo e encolhendo. A segunda coisa que vou fazer é adicionar uma largura fixa e uma altura fixa ao meu ícone aqui. Então, agora, quando eu voltar para a minha página original e você sempre pode dizer, definir para o tamanho original como uma opção, o que é uma ótima coisa para ter. Agora você pode ver quando eu voltar e dimensionar o tamanho disso, o botão é muito mais consistente e o ícone é um tamanho consistente também, que é o que eu estava procurando com este componente. Assim, você pode ver que ao fazer essas pequenas alterações
nas configurações desses itens individuais dentro de um componente, eles se tornam muito mais personalizados e flexíveis para seu aplicativo específico, bem como dinâmicos, se você estão projetando para diferentes dispositivos ou tamanhos de tela diferentes. Esperemos que isso esteja ajudando a tornar seus componentes e seus projetos muito mais flexíveis e utilizáveis para sua aplicação.
9. Como compartilhar seu guia de estilo: Agora que temos um sistema de design muito mais abrangente estabelecido, incluindo componentes responsivos e dinâmicos que são criados apenas para um aplicativo específico. Acho que é hora de aprendermos a compartilhar esse Sistema com outras pessoas da nossa equipe, ou até mesmo com computadores. Mesmo que você seja apenas um Freelancer trabalhando sozinho, é uma ótima ideia ter o Sistema armazenado em vários dispositivos e com fácil acesso caso você esteja pulando ou queira compartilhar com os clientes. A primeira ferramenta que vamos olhar é um plugin chamado Craft by InVision. Alguns de vocês podem conhecer o InVision como um software de prototipagem grego. Eles também têm alguns grandes plugins para esboço. Há vários que eles oferecem, mas o que vamos tocar hoje chama-se Biblioteca. Você vai baixar Craft online. Realmente fácil, ferramenta gratuita que você pode baixar e instalar muito rapidamente. Ele vai dar-lhe Craft Manager instalado em sua barra de ferramentas onde você pode ver todas as diferentes opções para instalar, bem
como quando você tem atualizações como eu faço atualmente, você seria capaz de atualizar diretamente a partir daqui. Como eu já o tenho instalado, você verá um painel ao lado meu inspetor que me permite acessar rapidamente as ferramentas que eles fornecem. Esta segunda opção para baixo é uma ferramenta Biblioteca. Quando você clica nisso, você verá uma interface bem simples que permite importar uma biblioteca ou criar uma nova. Neste caso, já que somos nós que estamos criando o guia de estilo, vamos criar uma nova biblioteca. Pode dar o nome que quiser. Eu vou ir em frente e chamar o meu Compartilhamento de Habilidades. Então você vai precisar escolher um destino. Eu só vou escolher meu desktop por enquanto, mas você vai querer escolher um lugar como Dropbox ou uma pasta compartilhada se você
vai compartilhar isso entre várias equipes ou até mesmo vários computadores. Basta clicar em Create Library e agora você verá uma interface que permite adicionar itens. Quando entrarmos em nosso, eu vou para a minha página Símbolos para que eu possa ver todo o conteúdo que eu gostaria de adicionar aqui. Bibliotecas de artesanato, definitivamente uma ótima ferramenta para armazenar todas as suas configurações de tipo, todas as suas cores, qualquer coisa que seja mais uma configuração de estilo que você vai querer ver em todos os dispositivos, esta é uma ótima ferramenta para isso. Quanto ao armazenamento de componentes gerais, vou tocar nisso na próxima ferramenta que eu compartilhar na próxima lição. Por enquanto, vamos adicionar algumas cores à nossa biblioteca Craft. Quando você clica em “Adicionar novo item”, você pode ver que você recebe uma caixa de diálogo para pegar cores diferentes da sua tela. Você pode simplesmente pegar diretamente de sua página de símbolos e começar a adicionar todas essas cores em sua biblioteca Craft. Uma coisa que é uma ótima idéia a fazer é depois de adicioná-los enquanto você os adiciona, vá em frente e dê a eles um nome que corresponda à forma como você se refere à cor em suas equipes. Isso pode ser, no entanto, seus desenvolvedores se referiram à cor em sua base de código, ou pode ser apenas como você deseja
lembrá-la em todas as referências do guia de estilo. Depois de adicionar todos esses, você também pode ir em frente e adicionar seus estilos de texto. Uma ótima maneira de fazer isso, vai ser apenas selecionar todos esses têxteis que
tínhamos como referência antes e clicar em “Adicionar novo item”. Pode levar um minuto, só um minuto se estiver fazendo múltiplos ao mesmo tempo. Mas você pode ver muito rapidamente agora eu tenho todos os meus estilos de texto como um ponto de referência na minha biblioteca Craft. Neste ponto, é realmente fácil compartilhar isso entre, como eu mencionei, vários computadores ou com colegas de equipe. Além disso, o que precisamos fazer para usar as mesmas bibliotecas, você seria ter essa mesma pasta acessível a elas. Recomendo a sincronização do Dropbox como uma ótima opção, mas há muitas maneiras de compartilhar esses arquivos entre equipes. Quando alguém está indo para a biblioteca de Ava para seu painel de artesanato, ele simplesmente selecionava, “Adicionar nova biblioteca”, “Importar biblioteca”, e então seria capaz de escolher rapidamente o mesmo local. Isso permite que você atualize a biblioteca Craft e tenha essas alterações refletidas em um computador de colegas de equipe ou em seu computador doméstico, caso você tenha feito alterações no trabalho. Definitivamente uma ótima maneira de ficar na mesma página com toda a sua equipe, certificando-se de que as mudanças são refletidas em todos os computadores e todas as instâncias desses símbolos. A próxima ferramenta que vou compartilhar com vocês hoje é nova no esboço versão 47, que é a versão mais recente do Sketch. Isso permitirá que você adicione todos os seus símbolos em uma única biblioteca que pode ser referenciada de todos os seus arquivos de esboço. Novamente, isso é ótimo para equipes, mas também é ótimo para quem trabalha em vários arquivos que deseja compartilhar o mesmo guia de estilo em todos esses arquivos ou vários computadores que desejam ter a mesma referência de biblioteca. O que vamos fazer para usar as bibliotecas do
Sketch é que vamos para as nossas “preferências do Sketch”. e vamos clicar na guia da biblioteca. Isso facilita muito a adição de novas bibliotecas na pasta de bibliotecas compartilhadas. Tudo o que você vai fazer é selecionar “Adicionar biblioteca” e selecionar um arquivo real para usar como biblioteca. Nesse caso, convém selecionar o arquivo no qual estamos trabalhando agora como sua biblioteca do Sketch. O que isso vai fazer, se você fosse selecionar um,
eu tenho um exemplo do meu outro guia de estilo para a versão desktop de compartilhamento de habilidades. Eu adicionei que aqui como um guia de estilo de exemplo, e o que você pode ver é que agora todos os meus símbolos do meu guia de estilo versão desktop estão disponíveis para mim aqui. É uma ótima maneira de reduzir o tamanho do arquivo e torna os símbolos muito mais fáceis de acessar porque eles não são realmente armazenados neste arquivo que estamos trabalhando fora eles são armazenados no arquivo da biblioteca. Nós não precisamos ter todos os símbolos listados em nossa página de símbolos, podemos ter um grande arquivo de referência que está segurando todos esses símbolos para nós. Isso também nos permite fazer alterações na biblioteca de símbolos uma vez, e isso é refletido em qualquer arquivo de esboço que esteja fazendo referência a essa biblioteca. Se eu tivesse um arquivo no qual trabalhei seis meses atrás, mas tivesse essa mesma biblioteca embutida, quando eu abrir esse arquivo novamente, ele me alertaria que todos os meus estilos seriam atualizados para refletir as mudanças que foram feitas naquela biblioteca de símbolos. Esta é definitivamente uma boa ferramenta, especialmente para equipes maiores, se alguém é responsável por fazer mudanças, eles estão fazendo atualizações para essa biblioteca de símbolos, isso torna nosso trabalho muito mais fácil porque eles só precisam fazer um só lugar e todos serão atualizados automaticamente, que eles precisam ressincronizar com a biblioteca. Como você pode ver, definitivamente as convenções de nomenclatura e ferramentas de organização que eu ensinei em lições
anteriores foram uma ótima maneira de ajudar
a manter todos na mesma página e permitir que todos trabalhem fora da mesma biblioteca. Espero que essas ferramentas tenham realmente ajudado você, seja você um freelancer trabalhando em vários computadores ou trabalhando em uma grande equipe para realmente tornar seu fluxo de trabalho mais eficiente e manter guias de estilo mais consistentes em todos os seus arquivos.
10. Recapitulação: Quero que todos se lembrem que este sistema deve funcionar para você. Este não é definitivamente um tamanho adequado a todos e sinta-se à vontade para ajustar este processo, ou até mesmo abordar melhor as necessidades do seu projeto ou do seu estilo de trabalho. Estou muito animado para ver alguns dos trabalhos que vocês produzem e eu adoraria ter todos postar projetos e capturas de tela na seção do projeto abaixo nesta classe. Definitivamente, eu adoro ouvir quaisquer perguntas que vocês têm, problemas que você encontrar, ou qualquer outra coisa que você gostaria de saber sobre a criação guias de
estilo e sistemas de design para seus projetos. Definitivamente há muita informação para aprender sobre este tópico. Há muitas pessoas que são muito ativas na comunidade com
as quais eu gosto de me manter atualizado. Vou publicar alguns recursos abaixo, especialmente de grandes empresas que estão fazendo coisas realmente de
ponta com sistemas de design, e realmente empurrando a indústria para ser muito mais bem adaptada
ao maneira como os desenvolvedores trabalham e a maneira como as equipes de
design e desenvolvedores devem trabalhar juntos no futuro. Muito obrigado por fazer essa aula. Eu realmente espero que tenha sido útil para mostrar a você como criar esses sistemas de design personalizados e dinâmicos que podem realmente ajudar a evoluir seu processo de design, bem
como tornar seu aplicativo geral ou site mais coeso.
Rye B., Product Design @ Skillshare
