O editor de Downcodes traz para você uma análise aprofundada do recurso mais recente do Sketch, Smart Animate! Este novo recurso empolgante traz uma experiência de design de animação sem precedentes para designers de UI. Ele simplifica o processo de criação de animação, permitindo que os designers injetem facilmente efeitos de animação vívidos e suaves em designs de protótipos, melhorem a experiência do usuário e criem interfaces interativas mais atraentes. Sem código complexo ou configurações de caminho de animação, o Smart Animate pode reconhecer automaticamente alterações de camada e gerar animações, permitindo que os designers se concentrem na própria criatividade.
Sketch mais uma vez surpreende os designers. Com o lançamento do Smart Animate, os designers de UI podem finalmente injetar facilmente efeitos de animação vívidos em designs de protótipos para tornar a interface mais atraente e interativa.
O princípio básico do Smart Animate é semelhante à função Magic Move do Keynote. Ele pode identificar automaticamente camadas com o mesmo nome em várias pranchetas e criar animações de transição suave entre essas camadas. Quando o designer ajusta o tamanho ou a posição de uma forma em diferentes pranchetas, o Smart Animate gera automaticamente o efeito de animação correspondente, eliminando a necessidade de definir manualmente caminhos de animação complexos.
A inteligência deste recurso reside na sua capacidade de reconhecer automaticamente alterações de camada. Os designers só precisam nomear as camadas, e o Smart Animate pode gerar animações com base nessas alterações, simplificando bastante o processo de design de animação. Ao mesmo tempo, os designers também podem personalizar a duração e os efeitos de facilitação da animação, como linearidade, aceleração, etc., para atender às diferentes necessidades de design.
O Smart Animate possui uma ampla gama de aplicações, desde transições de páginas após cliques em botões até expansão de menus, exibição de informações e outros cenários interativos. Ele não apenas cria efeitos visuais ricos, mas também melhora significativamente a experiência interativa do usuário. Por exemplo, quando um usuário clica em um botão, a página pode passar por uma animação suave para aumentar a dinâmica e a coerência do design.
Além de alterações básicas de tamanho, posição e transparência, o Smart Animate também oferece suporte a efeitos complexos, como rotação e alterações de cores. Isto significa que os designers podem obter efeitos de animação mais ricos e diversificados através de operações simples.
Em aplicações práticas, o Smart Animate apresenta grande flexibilidade. Por exemplo, em uma cena de transição animada, camadas ovais de tamanhos diferentes em duas pranchetas podem obter uma animação de mudança de tamanho suave. Em aplicações de animação de progresso, como o processo de verificação de impressões digitais, diferentes partes da impressão digital podem ser gradualmente preenchidas através de animação para exibir visualmente o progresso atual.
Para a interface do reprodutor de música, o Smart Animate pode exibir suavemente a lista de faixas após o usuário clicar no álbum. Cada elemento de informação será animado com base na posição e transparência da camada, o que melhora muito a experiência dinâmica do usuário. No design da página de orientação do aplicativo, as imagens e os elementos podem se mover, girar ou deformar com as operações do usuário, proporcionando um efeito de orientação mais intuitivo. Mesmo dentro do design clássico da barra lateral do macOS, o Smart Animate enriquece as interações de navegação adicionando estados de foco.
O lançamento do Smart Animate, sem dúvida, fornece uma ferramenta poderosa para designers de UI, que não apenas torna o design mais interessante, mas também melhora significativamente a experiência interativa do usuário. O surgimento desse recurso marca um passo importante para o Sketch no campo do design de interação dinâmica, abrindo mais possibilidades criativas para os designers.
Referência: https://www.sketch.com/blog/smart-animate/
Resumindo, a função Smart Animate do Sketch trouxe mudanças revolucionárias no design da UI. Ela não apenas simplifica o processo de produção de animação, mas, mais importante, oferece aos designers recursos de expressão mais poderosos, melhora a experiência do usuário e cria um design de interação Power mais atraente. Acredito que o Smart Animate se tornará uma ferramenta indispensável e poderosa para designers de UI!