() translation by (you can also view the original English article)
No início deste ano, o Sketch 49 foi lançado e, junto com ele, alguns recursos de prototipagem há muito esperados. No passo a passo de hoje, vou passar por tudo que você precisa saber sobre prototipagem no Sketch, desde atalhos indispensáveis, até obter feedback e colaborar com sua equipe em projetos e protótipos.
Novos ícones de prototipagem
Junto com o lançamento dos recursos de protoyping, surgiram quatro novos ícones na barra de ferramentas do Sketch. Talvez o mais importante seja o Hotspot que, quando selecionado, permitirá que você solte um ponto de acesso interativo na prancheta. Em seguida, clique em Vincular a uma prancheta, que permite vincular e conectar um ponto de acesso a uma prancheta ou alvo de destino. O ícone Show Prototyping permite ativar e desativar a UI de prototipagem amarela / laranja no Sketch. Isso é ótimo se você ainda estiver projetando e não quiser ver todos os links e pontos de acesso no aplicativo. Por fim, é o ícone Visualizar que permite que uma janela de visualização seja aberta para que você possa usar seu protótipo ali mesmo no Sketch. Nós falaremos sobre isso mais detalhadamente depois.
Atalhos
Naturalmente, o Sketch implementou alguns atalhos de teclado com o lançamento de seus recursos de prototipagem. Pessoalmente, adoro usar atalhos. Espero que você também os ache úteis!
- Pressione H para inserir um Hotspot
- Pressione W para adicionar um link
- Pressione Control + F para alternar para ocultar / exibir a UI de prototipagem amarela / laranja de sobreposição
- Pressione Command + P para abrir Visualizar
- Você também pode copiar e colar pontos de acesso (com links, se tiverem) entre pranchetas da mesma maneira que faria com qualquer outro elemento de design.
Pontos de acesso, links e a guia Inspetor
Para ter uma boa compreensão de como funcionam os pontos de acesso e os links, vamos analisar suas propriedades na guia Inspetor. Se você clicar em qualquer elemento, você observará uma pequena aba para prototipagem com um símbolo de mais (+) à sua direita (exatamente o mesmo que com preenchimento, bordas e sombras). Se você clicar no sinal +, ele transformará o elemento em um ponto de acesso e permitirá automaticamente adicionar um link para esse ponto de acesso também. If you click the +, it will turn the element into a hotspot, and will automatically let you add a link for that hotspot too.
As propriedades de prototipagem são relativamente fáceis, já que a prototipagem do Sketch ainda não se tornou muito complicada ou extensa.
O primeiro é o menu suspenso "Destino". É aqui que o ponto de acesso é vinculado e onde tocar no ponto de acesso o levará em seguida. O padrão é o que você já selecionou, mas você pode:
- mude para outro a bordo (eles são organizados por páginas)
- remova completamente o ponto de acesso selecionando None
- escolha Artboard anterior. Isso significa que, no fluxo do protótipo, ele o levará de volta à prancheta de onde você veio. Isso é fantástico para os botões "voltar".
A última coisa a saber sobre propriedades no Inspetor é animações. Isso determina a transição que ocorre quando o ponto de acesso é clicado. Você tem várias opções aqui:
- ❇ Sem animação
- ← Animação artboatd da direita
- ↑ Animação artboard em cima
- → Animaçao artboar a esquerda
- ↓ Animate Artboard da parte inferior
Trabalhando com pontos de acesso e símbolos
Hotspots podem ser criados de duas maneiras. Você pode criar manualmente um retângulo em uma prancheta da mesma maneira que desenhava manualmente um retângulo ou uma camada de texto. Alternativamente, você pode selecionar uma camada ou elemento específico. Qualquer elemento de design pode ser transformado em um ponto de acesso, incluindo símbolos!
Quando se trata de símbolos especificamente, um ponto de acesso pode ser colocado dentro de um símbolo, em vez de usar uma instância de símbolo como um ponto de acesso. Se você tiver um ponto de acesso dentro de um símbolo, ele será repetido em cada instância de símbolo, mas você poderá substituí-lo como qualquer outra propriedade de símbolo, como alterar uma imagem, um ícone ou texto. Você também pode substituir completamente o hotspot, removendo-o efetivamente de um símbolo. Dessa forma, você pode reutilizar os símbolos até que as vacas cheguem em casa sem se preocupar com hotspots desnecessários.
Ícone na lista de camadas
Um pequeno detalhe legal que o Sketch incluiu com o protótipo foi um ícone na lista Layers. Esse é o mesmo conceito que eles têm com Símbolos e Fatias Exportáveis. A presença de um ícone de ponto de acesso entre as camadas torna a experiência de prototipagem um pouco mais compreensível.
Rolando Artboards
Esse recurso é especialmente útil para páginas maiores de designs para dispositivos móveis. O esboço permite automaticamente a rolagem de pranchetas mais longas. No exemplo de vídeo abaixo, você verá a visualização do artigo da interface do usuário fictícia que estou usando para este passo a passo. Você não precisa se preocupar em configurar nada para que as páginas sejam deslocadas.
Configurando um "ponto inicial"
Um ponto inicial é a prancheta padrão a partir da qual seu protótipo começa. Por padrão, não há um, o que significa que, se você optar por visualizar seu protótipo, ele será aberto na prancheta que foi selecionada no momento da visualização.
Definir um ponto de partida é muito mais útil quando você está pronto para compartilhá-lo com alguém. Para selecionar um, navegue até a prancheta inicial desejada e abra-a na Pré-visualização. Na parte superior da janela de visualização, selecione o pequeno ícone de bandeira. Toda vez que você visualiza o protótipo de agora em diante, ele começará a partir dessa prancheta de ponto de partida.
Desmarque o ícone de bandeira (voltando a cinza novamente) irá removê-lo como ponto de partida, no entanto, você pode ter mais de um ponto de partida. Selecionar o ícone de bandeira em outra prancheta não a removerá de nenhuma outra!
“É provável que você queira definir um ponto de partida no início de um fluxo, mas também pode definir vários pontos de partida - um recurso que será muito útil ao criar protótipos mais complexos que contenham muitos pranchetas ou, se você só quer que os outros visualizem uma parte específica do seu Protótipo. ”- Sketch docs
Visualizando e compartilhando seus protótipos
Atualmente, você pode visualizar seu protótipo no Sketch com a ajuda do recurso Visualizar. Já discutimos isso algumas vezes. Uma janela irá aparecer sobre o seu aplicativo Sketch, e você pode clicar e ter certeza de que as coisas estão configuradas corretamente.
Existe outra maneira de visualizar seu protótipo. Se você estiver trabalhando especificamente com designs para celular, poderá usá-lo no Sketch Mirror. No seu iPhone e iPad, você pode conectar seu dispositivo ao Sketch. Você pode então visualizar o protótipo mais nativamente e em uma configuração adequada. Os hotspots estarão automaticamente lá, interativos e tudo.
Exportando e colaborando
Nem o Sketch Mirror nem a janela de visualização facilitam o compartilhamento de seus protótipos com outras pessoas. Portanto, se você quiser enviá-lo para sua equipe ou realizar um teste rápido de usabilidade, deverá fazê-lo por meio do Sketch Cloud. Um protótipo pode ser visualizado e usado através do Sketch Cloud por qualquer pessoa que tenha um link. Você não pode exportar um protótipo como faria com qualquer outro design ou elemento de dentro do aplicativo.
Você faz o upload do protótipo por padrão quando carrega o documento atual no Sketch Cloud. Ele simplesmente é exportado com o documento.
Se você definiu um ponto inicial, o protótipo será colocado sob sua própria seção de protótipo em documentos no Sketch Cloud. Esta é a única etapa extra que você precisa fazer para garantir que seu protótipo seja facilmente acessível a você por meio do Sketch Cloud. Depois de clicar no seu protótipo, ele começará naturalmente no ponto de partida e será interativo, pronto para ser usado!
Compartilhe o link para o protótipo para que qualquer pessoa possa acessá-lo e usá-lo.
Para ajudar na colaboração, você pode fazer com que as pessoas deixem comentários no seu protótipo (se você tiver comentários ativados no Sketch Cloud). Eles poderão deixar comentários para você em pranchetas individuais dentro do protótipo.
Modelo de Prototipagem
Para mais ajuda, dê uma olhada no Premade Prototyping Template do Sketch.
Está em Arquivo> Novo do Modelo> Modelo de Prototipagem e tem várias notas secundárias que explicam os recursos.
Conclusão
O novo recurso de prototipagem do Sketch é rudimentar (por exemplo, ele possui apenas quatro propriedades de animação). No entanto, deve tornar a prototipagem rápida muito mais fácil. Você não precisa mais exportar seus designs e importá-los para uma ferramenta externa, como o UXPin ou até mesmo a Marvel.
Eu acho que pode melhorar o fluxo de trabalho para designers que não precisam de nada sofisticado ou poderoso. Ele deve se encaixar perfeitamente em seus fluxos de trabalho; especialmente se eles já estiverem usando o Sketch Cloud. Se você precisar juntar rapidamente e rapidamente algo para mostrar o fluxo de usuários de seus projetos, isso definitivamente fará o truque. Isso ajudará sua equipe a realizar um fluxo inicial ou teste de usabilidade também. A essa altura, não acho que isso pode mudar a vida, mas posso me ver usando o protótipo de Sketch ao compartilhar com clientes projetos de interface do usuário para projetos futuros.
A essa altura, você pode mudar a vida, mas posso fazer uso do protótipo de Sketch ao compartilhar com os projetos de interface do usuário para projetos futuros.
