portaldacalheta.pt
  • Principal
  • Noticias Do Mundo
  • Lucratividade E Eficiência
  • Ágil
  • Família
Ferramentas E Tutoriais

Protótipo com facilidade - um tutorial do InVision Studio



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 .

Promessa de ferramenta de design de aplicativo InVision Studio

Uma captura de tela do site do InVision Studio prometendo a ferramenta de design de tela mais poderosa.



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.



Ferramentas de prancheta e espaço de trabalho do InVision Studio

Vídeos promocionais estimulantes destacam recursos poderosos do aplicativo 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

Visualização do tutorial do InVision Studio

Com este tutorial do InVision Studio, estaremos fazendo um protótipo animado elegante de um aplicativo móvel e nos familiarizando com o fluxo de trabalho, ferramentas e peculiaridades do software.



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.

Design da interface do aplicativo InVision Studio

O espaço de trabalho da ferramenta de design do InVision Studio pode parecer muito familiar se você tiver usado ferramentas de design de interface como Sketch e Figma. Este é um dos vários tutoriais básicos pré-construídos do InVision Studio incluídos com o software.



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.



Painel de interação do aplicativo InVision Studio

O painel de interações do InVision Studio é onde grande parte da “mágica” acontece ao criar um protótipo interativo.

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”.



Criação de uma interação no InVision Studio

Criar uma interação é tão fácil quanto selecionar uma camada e pressionar “c” no teclado.

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.

Animação de prototipagem do InVision Studio

O InVision Studio permite alguns edição avançada da linha do tempo para permitir que os designers personalizem os efeitos de atenuação, salto e outros efeitos de animação para seus protótipos.

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.

Tela em branco do bug do InVision Studio

Depois de perder horas de trabalho para os bugs do Studio (como a tela em branco acima), aprendi a salvar várias versões do meu arquivo com a mesma frequência com que 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.

Espaço de trabalho do tutorial do InVision Studio

Abra o arquivo do tutorial do InVision Studio e a área de trabalho deve ser semelhante a esta.

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.

Camadas de grupo de animação do aplicativo InVision Studio

Aqui, uma máscara é usada para ocultar a camada “Bio Text”. Na transição animada para a próxima tela, isso parecerá deslizar para baixo da imagem do bloco.

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!

Visualização de prototipagem do InVision Studio

Visualize a primeira animação de interação do protótipo.

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.

Visualização da animação do InVision Studio

Visualize o protótipo do aplicativo novamente e ele deve funcionar mais ou menos assim.

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.

Visualização do protótipo do InVision Studio

Escolha o grupo de camadas “Imagem em destaque” para acionar a interação. Defina a transição para “Movimento” por um período de 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.

Animação carrossel do InVision Studio

Escolha um gesto “Deslizar para a esquerda” para o gatilho nesta etapa e uma transição predefinida “Empurrar para a esquerda” para corresponder.

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”.

Vincule o botão Fechar de volta à tela de bio prototipagem do InVision Studio

Vincule cada botão Fechar de volta à prancheta bio individualmente. Infelizmente, o Studio não parece suportar a seleção de todos eles em diferentes pranchetas ao mesmo tempo para criar uma interação como o Sketch faz, então você terá que fazer um de cada vez.

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.

Kavanaugh muda a postura em relação aos detectores de mentira, diz que os testes do polígrafo não são confiáveis

Mundo

Kavanaugh muda a postura em relação aos detectores de mentira, diz que os testes do polígrafo não são confiáveis
Como fazer o trabalho remoto trabalhar para você

Como fazer o trabalho remoto trabalhar para você

Estilo De Vida

Publicações Populares
Quem, o quê e por quê - um guia para métodos de teste do usuário
Quem, o quê e por quê - um guia para métodos de teste do usuário
Aflição financeira em uma crise: você não pode prever, você pode se preparar
Aflição financeira em uma crise: você não pode prever, você pode se preparar
Bangladesh condena seis militantes à morte por matar dois ativistas gays
Bangladesh condena seis militantes à morte por matar dois ativistas gays
Mães solteiras na arte de criar filhos sozinhas
Mães solteiras na arte de criar filhos sozinhas
Vender uma empresa para valor máximo em um mercado desafiador de fusões e aquisições
Vender uma empresa para valor máximo em um mercado desafiador de fusões e aquisições
 
Robo-conselheiro Risco de portfólio da indústria: eficiência ou redução de cantos?
Robo-conselheiro Risco de portfólio da indústria: eficiência ou redução de cantos?
EUA: corrida para prefeito de Honolulu segue para segundo turno
EUA: corrida para prefeito de Honolulu segue para segundo turno
13 podcasts que todo designer deve ouvir
13 podcasts que todo designer deve ouvir
Vazamentos de Panama Papers podem dar a Sanders algum poder de fogo contra o rival Clinton
Vazamentos de Panama Papers podem dar a Sanders algum poder de fogo contra o rival Clinton
Com 21 anos e raízes de Kerala, é o mais jovem na lista de MBE do Queen
Com 21 anos e raízes de Kerala, é o mais jovem na lista de MBE do Queen
Publicações Populares
  • o que posso fazer com c
  • como fazer modelagem financeira
  • é meu llc an s ou c corp
  • artigos de Warren Buffett sobre Investimentos
  • taxas de contratante de TI por hora
Categorias
  • Noticias Do Mundo
  • Lucratividade E Eficiência
  • Ágil
  • Família
  • © 2022 | Todos Os Direitos Reservados

    portaldacalheta.pt