Princípios de animação da interface do usuário: Disney is Dead

Prevê-se que a fotografia seja a morte da pintura (início do daguerreótipo)

(Se você deseja receber meus artigos sobre animação da interface do usuário por email e ser adicionado à minha newsletter, clique aqui.)

Um novo meio

Quando Paul Delaroche encontrou um daguerreótipo por volta de 1839, ele declarou: "A partir de hoje, a pintura está morta!"

Até aquele momento, a única maneira de documentar visualmente o mundo externo era através do uso de um meio aplicado a uma superfície manualmente. Séculos de habilidade em várias disciplinas resultaram na descoberta de vários princípios e técnicas em várias mídias. Em todas as culturas e à medida que as eras progrediam, o estilo e a linguagem visual de como as representações visuais 'deveriam parecer' evoluíram - os padrões de design originais.

Os primeiros fotógrafos, tentando fazer com que suas imagens se parecessem com as pinturas populares da época, costumavam usar uma combinação de técnicas de iluminação e impressão para suavizar suas imagens e criar uma aparência de pintura. Sua compreensão do que o meio da fotografia era capaz estava intimamente ligada, influenciada e limitada pela compreensão do mundo da pintura.

Demorou quase cem anos para que fotógrafos como Ansel Adams, Imogen Cunningham, Edward Weston e outros do 'Grupo f / 64' fizessem incursões significativas na linguagem visual que diferencia a fotografia da pintura como um meio único - com seu próprio visual. linguagem e princípios e, ao fazê-lo, revolucionaram o domínio da fotografia.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney resolveu um problema diferente

Felizmente, nos encontramos em uma revolução na animação da interface do usuário.

Em 1981, Ollie Johnston e Frank Thomas lançaram Disney Animation: the Illusion of Life e introduziram o que hoje são conhecidos como os "12 princípios básicos da animação". Esses princípios resolveram o problema de como criar "movimentos realistas" que ocorrem quando corpos orgânicos mover e reagir no espaço físico (os princípios também abrangem coisas como tempo emocional e apelo ao personagem).

Animação da interface do usuário, pois parte da experiência do usuário tem apenas 20 anos e ainda está na infância. À medida que o domínio da animação da interface do usuário surgiu, as únicas ferramentas disponíveis para descrever como a interface do usuário se comporta no tempo eram os 12 princípios da animação. Assim como os primeiros fotógrafos tentaram entender a fotografia através das regras da pintura, os designers tentaram entender a animação da interface do usuário através das regras da animação da Disney.

Na superfície, isso é compreensível, pois há algum grau de sobreposição. O movimento facilitado, um dos 12 princípios de animação, reforça um senso de "correção" por meio do movimento, algo que é fundamental para a experiência do usuário. Sem diminuir, a animação da interface do usuário parece estranha e estranha.

A análise completa é aparente quando se olha mais de perto os 12 princípios no contexto da interface do usuário.

O Squash and Stretch fornece peso e flexibilidade aos objetos, algo que é a exceção e não a regra nas interfaces do usuário.

A antecipação cria a sensação de que algo está prestes a acontecer e também é quase inútil quando se trata de experiências do usuário. Funciona apenas de maneira limitada para selecionar micro interações e estados de botões.

Encenação refere-se ao layout da animação, que faz sentido para um desenho animado da Disney, porque os personagens estão constantemente em movimento, mas na experiência do usuário, isso é apenas "o design".

Ação direta e pose a pose são menos princípios do que abordagens ao processo real de desenho / animação: você pode criar uma animação mais fluida se desenhar quadros contínuos ou usar pose para posar para configurar alguns quadros-chave e preencher as lacunas. . Nas experiências do usuário, esse processo quase nem se traduz, a menos que haja uma animação quadro a quadro real. Por padrão, independentemente da ferramenta que você está usando, quase todas as animações da interface do usuário são criadas usando quadros-chave.

Ação de acompanhamento e sobreposição tem a ver com o cumprimento das leis da física e da inércia, e como os corpos físicos respondem, os quais têm pouco a ver com as interfaces do usuário, a menos que você conte com o próximo princípio, o mais útil no grupo .

Slow In e Slow Out diz que os objetos precisam de tempo para acelerar e desacelerar. Isso é extremamente relevante, pois 100% da animação da interface do usuário deve empregar esse princípio. É comumente referido como "flexibilização" e é extremamente importante.

O arco (necessário para reproduzir o movimento físico) é quase inútil para a animação da interface do usuário e também é a exceção e não a regra.

Ação secundária é útil e excelente para transições de tela e configuração de hierarquia visual.

O tempo é relevante ao desenhar personagens, mas nas interfaces do usuário, onde o movimento precisa ser nítido para se sentir responsivo, acho melhor contar com a facilidade de projetar a sensação da interação, e não a duração.

O exagero refere-se ao grau de realismo ou caricatura, novamente, pouco relevante para a animação da interface do usuário, pois o design é pré-determinado.

O desenho sólido também é discutível, já que a animação da interface do usuário lida com o comportamento dos objetos de interface ao longo do tempo, não com o design real dos próprios objetos.

O recurso também fala com o tratamento visual, mais uma vez não é relevante para o comportamento da interface ao longo do tempo.

Em conclusão

Portanto, a pergunta permanece: por que os 12 princípios básicos da animação não descrevem com precisão a animação da interface do usuário?

A análise pode ser melhor entendida pela simples observação: a animação da interface do usuário não obedece às mesmas regras nem tem os mesmos princípios que os corpos orgânicos que se deslocam no espaço físico. A animação da interface do usuário é um meio distinto, tão distinto quanto a fotografia da pintura - com características sobrepostas (fotografia e pintura são composições visuais estáticas que dependem da luz e da composição), mas são meios fundamentalmente diferentes.

Simplificando, os 12 princípios básicos da animação não se aplicam à animação da interface do usuário porque estão resolvendo um problema diferente.

Nos próximos artigos, explorarei o que são esses princípios de animação da interface do usuário, qual é o problema dos princípios de animação da interface do usuário, como os princípios são diferentes das técnicas e como você pode criar e usar a animação da interface do usuário em seus projetos atuais e futuros para impactar a usabilidade e crie experiências de usuário mais atraentes e eficazes.