A menos que você tenha dormido no primeiro semestre de 2018, provavelmente você estava bastante ciente da ansiedade febril no comunidade de design interativo levando ao lançamento do InVision Studio aplicativo. A InVision é mais conhecida por seus Conjunto de plugins Sketch e Photoshop como Craft e por ser a plataforma ideal para transformar rapidamente designs de interface estática em protótipos clicáveis e compartilháveis. Em um passo ousado no ano passado, eles anunciaram o desenvolvimento de seu próprio software de design digital para competir com favoritos da indústria, como Esboço e Figma .
O produto foi considerado revolucionário e fez algumas promessas de peso para um fluxo de trabalho perfeito de design para protótipo, funcionalidade de interação complexa, animação de transição de tirar o fôlego— e seria grátis . A InVision lançou alguns vídeos teaser e demonstrações empolgantes para obter designers bombeado. A expectativa aumentou ainda mais à medida que a versão beta inicial foi adiada mais do que algumas vezes no início do ano.
À medida que mais designers começam a brincar com o software, mais e mais tutoriais e guias estão surgindo para demonstrar os fundamentos da ferramenta de design de interface de aplicativo. InVision também criou um poucos próprios para integrar os usuários às noções básicas do InVision Studio.
Mesmo que as versões de acesso iniciais sejam recebendo críticas mistas , O Studio tem alguns recursos interessantes e muito potencial. Este tutorial tem como objetivo orientar os primeiros a adotar os princípios básicos da prototipagem do InVision Studio e adicionar algumas animações básicas de protótipo.
Crie um protótipo interativo com transições animadas elegantes rapidamente, acompanhando este tutorial do InVision Studio!
que tipo de ataques de aplicativo de servidor da web introduzem uma nova entrada para explorar uma vulnerabilidade
O tour do níquel pelo espaço de trabalho do InVision Studio
Muito do Studio deve estar familiarizado com Designers de IU e qualquer pessoa que esteja usando um software de design digital como o Sketch. Grande parte da área de trabalho pega emprestadas dicas da IU do Sketch, com o painel do lado esquerdo abrigando páginas, camadas e grupos; o painel lateral direito para inspetores; e uma barra de ferramentas contextual na parte superior.
Você também encontrará muitas das mesmas ferramentas, embora algumas funcionalidades tenham nomes diferentes. Por exemplo, um “símbolo” de Sketch é chamado de componente no Studio.
O Painel de Interações
Para os fins deste tutorial, nos concentraremos na utilização de ferramentas de interação para criar pontos de acesso interativos entre as telas e criar transições suaves entre elas. Grande parte da mágica estará acontecendo no “painel de interações” no lado direito da área de trabalho do Studio.
A maneira simples de criar interações é selecionar uma camada ou grupo de gatilho e pressionar “c” no teclado (ou clicar no ícone de raio na barra de ferramentas superior), que inicia um chicote azul com o qual selecionar uma tela de destino. O Studio então solicitará que o designer selecione o gesto ou a entrada do usuário que aciona o evento e escolha entre um conjunto de transições predefinidas ou uma transição de “movimento”.
Animação do InVision Studio
Existem muitos elementos para um ótimo design de interação, mas o uso correto de transições animadas e microinterações em uma interface de usuário é mais do que apenas fachada.
Eles aumentam a usabilidade e podem significar a diferença entre um produto amado e uma bagunça confusa.
Ao longo deste tutorial, usamos uma combinação de transições predefinidas e transições de movimento para criar nosso protótipo de aplicativo. As transições predefinidas são bastante diretas e familiares aos usuários do Plataforma de protótipo online InVision .
As regras que governam como as transições de movimento funcionam entre as telas são um pouco mais misteriosas. Embora existam muitas considerações de designer óbvias levadas em conta na construção da ferramenta - por exemplo, a vinculação automática de elementos entre telas - é necessário um pouco de tentativa e erro para obter certos efeitos ao adicionar movimento às transições. Esperançosamente, este tutorial ajudará os designers a se sentirem um pouco mais confortáveis experimentando o que o InVision Studio tem a oferecer.
Coisas para manter em mente
O Studio promete muitas funcionalidades inteligentes em torno das animações. Por exemplo, ele pode criar transições de movimento entre objetos duplicados de uma prancheta para outra quando conectados por meio de uma interação. Os designers podem ajustar essas animações conforme desejado para obter alguns belos efeitos de atenuação e outros efeitos de movimento. Aprender as excentricidades de como isso funciona ao tentar fazer a transição de uma pilha de objetos em uma sequência específica pode exigir paciência e um pouco de prática.
As transições de movimento funcionam melhor com objetos em pranchetas que foram duplicados uns dos outros. O recurso de animação é 'inteligente', pois reconhece objetos duplicados com os mesmos nomes de camada, portanto, tome cuidado para não remover ou renomear camadas-chave entre as telas (o que é uma maneira frustrantemente fácil de arruinar uma ótima animação).
Tenha em mente que o Studio ainda está em sua infância, então designers deve estar preparado para encontrar uma quantidade justa de bugs. Por exemplo, o botão 'visualizar' inicia uma visualização interativa do protótipo, mas às vezes as interações não são acionadas, caso em que você precisará salvar e reabrir o arquivo.
Enquanto aprendia o software, tive mais de um arquivo que parecia estranhamente corrompido - excluindo todas as pranchetas e tornando todos os painéis de ferramentas inacessíveis. Eu relatei o bug e aprendi a salvar várias versões dos meus arquivos para não perder muito trabalho.
Enfim, sempre ajuda estar organizado. Ao criar um protótipo em qualquer plataforma, seja Studio ou Sketch ou Marvel, manter o controle de objetos e rótulos de camada economizará tempo e frustração, especialmente se você estiver trabalhando com uma equipe ou entregando o arquivo em algum momento. Anote a ordem das camadas e dos grupos de camadas ao criar interações; isso geralmente faz uma grande diferença na obtenção do efeito de animação desejado.
O tutorial!
Vamos começar! Se ainda não o fez, vá para InVision Studio para baixar uma versão de acesso antecipado do aplicativo Studio. Depois de ter o InVision Studio em seu computador, baixe os arquivos do tutorial aqui . Depois de iniciar o software Studio, escolha abrir o arquivo de onde você o salvou.
Etapa 1: abra o arquivo e dê uma olhada
Este protótipo interativo será para um aplicativo móvel sobre artistas modernos do final do século 19 ao início do século 20. Todas as telas foram criadas com antecedência usando a duplicação cuidadosa da prancheta, que é necessária para o uso adequado do recurso de transição de movimento.
A hierarquia tem 3 níveis de profundidade, começando em 'Casa', depois na biografia de cada artista individual e, finalmente, em um carrossel de quatro exemplos do trabalho do artista. Você notará que a prancheta “Home” tem um pequeno ícone de uma casa, que designa a prancheta inicial para o protótipo.
O tutorial se concentrará na criação de caminhos de navegação simples que conectam esses três níveis de profundidade. Faremos uso das ferramentas de interação e transição do Studio para fazer com que o protótipo pareça um aplicativo apropriadamente interativo.
Etapa 2: conectar o bloco do artista à biografia do artista
Vá para a primeira prancheta. Reserve um momento para expandir o grupo de camadas “Artist Tile 1”. Você notará três grupos aninhados: um para o nome do artista, um para uma imagem em destaque e uma terceira camada contendo 'Texto bio'.
Olhando para a tela da prancheta, o terceiro grupo de camadas não é imediatamente visível por causa da maneira como o Studio lida com as transições de movimento - o que veremos em um momento. Apenas anote isso por enquanto.
Selecione o grupo de camadas que contém todos estes elementos: “Artist Tile 1”. Com este grupo selecionado, pressione “c” em seu teclado (ou clique no ícone de raio na barra de ferramentas superior) para iniciar a ferramenta de interação. Seu cursor será seguido por uma barra de seleção azul para escolher a tela de destino para sua interação.
Selecione a prancheta imediatamente à direita intitulada “Artista Bio 1” e você será solicitado a escolher o gatilho e o tipo de transição. Para o gatilho, escolha “Tap” e então escolha “Motion” como a transição. Você pode então escolher a duração da transição. Vamos definir essa transição para 2 segundos e clicar em “Salvar”.
Clique no botão play para visualizar o protótipo. Você viu como as coisas se movem ao longo da tela e como a bio camada deslizou para baixo da imagem? Parabéns, você criou uma transição de interação muito inteligente!
Etapa 3: conecte um botão Voltar à tela inicial
Agora devemos dar aos usuários uma maneira de voltar à tela inicial. Vá para a prancheta “Artist Bio 1” e selecione o componente “btn_back” no canto superior esquerdo. Crie um gatilho aqui pressionando “c” e selecionando a prancheta “Home”.
Mais uma vez, vamos definir o gatilho para 'Toque', a interação para 'Movimento' e a duração para 2 segundos. Clique em Visualizar e delicie-se com as transições de abertura e fechamento que você acabou de criar. Observe como a animação acionada pelo fechamento do bloco é uma reversão da animação reproduzida ao abrir o bloco.
Etapa 4: conecte a galeria
Se você estiver observando os nomes das camadas na primeira e na segunda pranchetas, poderá notar que eles são idênticos. Isso ocorre porque, como mencionado antes, as animações do Studio vinculam automaticamente camadas duplicadas de uma prancheta para a próxima se elas compartilharem um nome. Alterar o nome dessas camadas quebrará o link de animação e a transição será padronizada para um fade simples - especialmente desafiador para aqueles obcecados por rótulos de camada significativos.
Queremos aplicar mais uma transição de movimento elegante para abrir a galeria carrossel de imagens. A prancheta intitulada “Artista 1 - Imagem 1” contém elementos duplicados da prancheta “Artist Bio 1”, redimensionada para mostrar mais da imagem de exemplo.
Comece clicando na camada “Artist Bio 1” para selecionar o grupo “Featured Image”. Este será o gatilho para abrir a galeria. Crie uma interação 'Toque' aqui, conectando-se à primeira prancheta na galeria e selecione 'Movimento'. Desta vez, defina a duração para ser um pouco mais rápida: 1 segundo.
Para criar uma boa transição para o fechamento da galeria, basta selecionar a camada do botão Fechar na prancheta “Artista 1 - Imagem 1” e conectá-la de volta à prancheta “Artista Biografia 1”, com as mesmas configurações de antes.
Visualize esta animação e maravilhe-se com o quão bem as transições do protótipo da tela da biografia do artista para o carrossel de imagens e vice-versa. Agora conectamos a navegação por meio de três níveis de hierarquia do nosso aplicativo!
Etapa 5: conectar todas as imagens da galeria
Fizemos a maioria das transições de movimento que precisaremos fazer e agora começaremos a usar algumas das predefinições de animação para o resto da galeria.
O padrão de interação aqui para nosso usuário folhear este carrossel de imagens será um gesto familiar de deslizar. A boa notícia é que esta última parte é muito simples e não levará nenhum tempo usando as predefinições de animação do Studio.
Selecione a prancha de arte “Artista 1 - Imagem 1” e crie uma interação que leva à próxima prancheta, “Artista 1 - Imagem 2”. Desta vez, defina o gatilho para “Deslizar para a esquerda”. Para a transição, selecione “Preset” e escolha “Push Left” no menu suspenso.
Para criar uma interação reversa, selecione a prancheta “Artista 1 - Imagem 2” e conecte-a à prancheta anterior, mas desta vez usando um gesto de “Deslizar para a direita” e a transição “Empurrar para a direita”.
Repita esse padrão com as próximas pranchetas, conectando as pranchetas da imagem 2 à imagem 3 e da imagem 3 à imagem 4. Fácil!
Para tornar isso ainda mais realista, vamos fechar o loop entre a Imagem 1 e a Imagem 4. Selecione a prancheta para a Imagem 4 e conecte-a à Imagem 1. Escolha um gatilho “Deslizar para a esquerda” e “Empurrar para a esquerda” da mesma forma que faria para o próxima imagem de uma série. Conecte a prancheta da Imagem 1 à Imagem 4 com o reverso e pronto - você criou uma galeria em loop!
Por fim, selecione cada um dos componentes “btn_close” nas pranchetas da galeria de imagens e vincule-os de volta à prancheta bio. Você pode escolher a transição que quiser aqui, mas optei por “Empurre para a direita”.
Agora você tem um caminho de navegação bem sequenciado para mostrar. Clique em visualizar e experimente; seu protótipo deve funcionar muito como o gif do início deste tutorial. Dê a si mesmo um tapinha nas costas bem merecido.
Etapa 6: Repita
Agora que você vinculou todas as telas do primeiro exemplo do artista com interações inteligentes, repita as etapas para os outros dois conjuntos de telas no arquivo do tutorial. Eles são organizados de maneira semelhante e é uma boa prática para se acostumar com a forma como o Studio funciona.
Próximos passos
Esperançosamente, este tutorial forneceu uma introdução a alguns dos recursos interessantes da prototipagem do InVision Studio. Enquanto pega o jeito do Studio, você deve tentar ajustar as transições usando as ferramentas de animação avançadas. Experimente as outras ferramentas na área de trabalho e tente seguir alguns outros tutoriais do InVision Studio por aí. Com a prática, você pode se tornar um dos líderes Design do InVision Studio gurus.
Você pode ter encontrado alguns bugs ou comportamento inesperado ao longo do caminho, mas essa é a natureza de experimentar um novo software. O pessoal da InVision tem respondido muito bem aos comentários e com certeza continuará a melhorar o Studio, tornando-o cada vez mais estável e útil.
Studio é uma ferramenta divertida de experimentar - e não há razão para não experimentar uma ferramenta gratuita de prototipagem de aplicativos. Embora não seja provável que substitua um software comum como o Sketch na comunidade de design hoje, ele tem muito potencial.
• • •Leituras adicionais no Blog de design do ApeeScape:
- Perfect Your UX Design Process - Um Guia para o Design de Protótipo
- O poder do Figma como ferramenta de design
- Prototipagem com dados reais - um tutorial de Framer
- O guia fundamental para a usabilidade em dispositivos móveis
- Melhores práticas e erros de design de aplicativos móveis
Compreender o básico
O que é protótipo de IU?
Um protótipo de IU é criado com o objetivo de demonstrar e testar uma interface de usuário. Ferramentas como InVision Studio, Sketch e Figma estão disponíveis para designers para fazer protótipos interativos sem a necessidade de escrever código.
O que é InVision?
InVision é uma plataforma para criar e compartilhar protótipos clicáveis para web e celular. Nos últimos anos, a InVision expandiu sua plataforma para incluir ferramentas de compartilhamento e colaboração mais robustas, plug-ins e agora seu próprio aplicativo de design de interface.
como obter tweets da API do Twitter em python
O que é um protótipo de aplicativo móvel?
Um protótipo de aplicativo móvel é um protótipo criado com o propósito de demonstrar e / ou testar um aplicativo móvel. Os protótipos podem variar em complexidade, dependendo do aspecto do aplicativo que precisa ser testado.
O que é um protótipo clicável?
Um protótipo clicável é um protótipo que possui alguma interatividade. Freqüentemente, eles são criados impondo “pontos de acesso” interativos a elementos projetados, como botões, e vinculando-os a telas em uma progressão.
Por que é importante ter um protótipo?
Existem muitas razões para ter protótipos de designs de interação. Os protótipos permitem que os designers e seus colaboradores vejam e validem como algo deve funcionar, parecer e sentir-se frequentemente sem a necessidade de uma versão totalmente desenvolvida.
