Sketch mais uma vez surpreende os designers. Com o lançamento do recurso Smart Animate, os designers de UI finalmente podem adicionar facilmente efeitos de animação vibrantes aos seus protótipos, tornando as interfaces mais atraentes e interativas.
O princípio fundamental do Smart Animate é semelhante ao recurso Magic Move do Keynote. Ele consegue identificar automaticamente camadas com o mesmo nome em diferentes artboards e criar transições de animação fluidas entre elas. Quando um designer ajusta o tamanho ou a posição de uma forma em diferentes artboards, o Smart Animate gera automaticamente o efeito de animação correspondente, sem a necessidade de definir manualmente caminhos de animação complexos.
A inteligência desse recurso reside na sua capacidade de identificar automaticamente as mudanças nas camadas. O designer só precisa nomear as camadas, e o Smart Animate gerará animações com base nessas mudanças, simplificando enormemente o processo de design de animação. Além disso, o designer pode personalizar a duração e o efeito de suavização da animação, como linear, aceleração etc., para atender às diferentes necessidades de design.
A gama de aplicações do Smart Animate é bastante ampla, desde transições de páginas após cliques em botões e expansão de menus até a apresentação de informações em vários 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 fazer uma transição suave com animação, adicionando dinamismo e coerência ao design.
Além das mudanças básicas de tamanho, posição e transparência, o Smart Animate também suporta efeitos complexos como rotação e mudança de cor. Isso significa que os designers podem criar efeitos de animação mais diversos e ricos com operações simples.
Na aplicação prática, o Smart Animate demonstra grande flexibilidade. Por exemplo, em cenários de transição de animação, camadas elípticas de tamanhos diferentes em dois artboards podem realizar 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ão digital, as diferentes partes da impressão digital podem ser preenchidas gradualmente por meio de animação, mostrando intuitivamente o progresso atual.
Para a interface de um reprodutor de música, o Smart Animate pode exibir a lista de faixas de forma suave após o usuário clicar em um álbum; os vários elementos de informação serão exibidos com animação de acordo com a posição e transparência da camada, aumentando significativamente a experiência do usuário dinâmica. No design de páginas de orientação de aplicativos, imagens e elementos podem se mover, girar ou deformar com as ações do usuário, fornecendo um efeito de orientação mais intuitivo. Até mesmo no design clássico da barra lateral do macOS, o Smart Animate pode enriquecer a interação de navegação adicionando um estado de suspensão.
O lançamento do Smart Animate, sem dúvida, fornece aos designers de UI uma ferramenta poderosa que não apenas torna as obras de design mais deslumbrantes, mas também melhora significativamente a experiência interativa do usuário. O surgimento desse recurso marca um passo importante do Sketch no campo do design de interação dinâmica, abrindo mais possibilidades criativas para os designers.
Referências: https://www.sketch.com/blog/smart-animate/
