Comment optimiser les animations / transitions pour le transfert de l'équipe d'ingénierie
J'ai un prototype d'application construit à l'aide de Pixate qui montre l'ensemble du flux de l'application sur laquelle je travaille. Il existe des transitions entre les vues et les animations pour certains éléments de la page. J'ai montré le prototype aux ingénieurs qui travaillent sur le projet, mais ils aimeraient une ventilation détaillée des transitions et des animations que j'utilise. Comment communiquer au mieux ces animations dans un document de spécification? Existe-t-il des ressources ou des outils pour aider avec les spécifications d'animation?
(Voici un problème, tous les ingénieurs utilisent des machines Linux ou Windows, alors que j'utilise un mac. La solution devrait donc être multiplateforme.)
Étant donné que l'animation est de plus en plus répandue dans la conception d'applications, en particulier dans la conception matérielle, je pensais que ce serait une question facile à laquelle la recherche Google pourrait répondre, mais pas de chance. Toute aide serait incroyable. Merci d'avance.
Aaron J.
Il y a des moments où vous devez créer des spécifications pour les animations et pour ces moments, il est recommandé d'écrire l'animation en phrases. Vous pouvez créer votre propre raccourci pour communiquer vos animations aux développeurs.
Rachel Nabors, une animatrice a été interviewée sur le podcast de l'IUE. Elle suggère d'écrire des phrases pour vos animations.
"J'ai tendance à écrire mes animations avec une formule qui vous énumère l'événement de fin, la chose qui est animée, la propriété. Combien de temps dure l'animation et quel est votre assouplissement. serait en charge, la largeur passe de 25% à 100% en utilisant plus de 300 millisecondes. C'est ainsi que je l'écris dans la documentation. Cela a du sens pour les développeurs frontaux et c'est toujours lisible pour les designers aussi. " - Rachel Nabors
Lien vers le podcast: IE: Rachel Nabors - Utiliser l'animation pour améliorer votre UX
Voici un autre exemple d'annotation d'animations de étude de cas Amazon Prime Music de Simon Pan :
Comme vous pouvez le voir, cette annotation est très détaillée et serait très utile pour les développeurs.
Vous pouvez donc certainement combiner l'animation réelle avec une annotation d'animation spécifique qui peut être visuelle ou écrite sous forme de phrase pour les moments où vous devez fournir un document aux développeurs.
Comment communiquer au mieux ces animations dans un document de spécification?
Tu ne peux pas. C'est un oxymore. La meilleure façon de communiquer des animations est de montrer les animations, comme vous l'avez fait.
Toute documentation qui tente d'expliquer l'animation est déjà supprimée une fois de la source. De plus, il n'y a tout simplement aucun moyen de documenter toutes les subtilités qui s'y rattachent.
C'est comme faire un film. Vous pouvez écrire le script. Vous pouvez créer les storyboards. Vous pouvez répéter. Mais à la fin de la journée, ce qui sort à la fin n'est jamais 100% conforme à toute la documentation que vous avez créée. Pourquoi? Les choses changent. Les organisations doivent apprendre à accepter cela et à "suivre le rythme" plutôt que de forcer les équipes UX à devenir des usines de documentation.
Dans certaines organisations, les développeurs se sont habitués à ce que tout soit écrit pour eux. C'est juste une mauvaise habitude qui, espérons-le, vous aidera à vous défaire.
Je suggère un document qui dit simplement:
Faites en sorte que l'animation se comporte comme l'animation dans le prototype.
Et puis travaillez autant que possible côte à côte.
Maintenant, peut-être avez-vous déjà certains détails ... comme vous savoir c'est un fondu .5s. Ceux que vous pouvez documenter. Vous pouvez le faire dans un e-mail assez facilement.
Tout d'abord, je vous recommande d'utiliser Framer.js pour une totale liberté d'animation. Il s'agit d'un outil de prototypage basé sur le code pour mobile.
La création de prototypes est le moyen le plus efficace que j'ai jamais expérimenté lors de la transmission des spécifications d'application aux développeurs/clients. Transférez simplement votre fichier source de l'encadreur aux développeurs, ils peuvent comprendre ce qui s'y passe.
note: je ne suis pas promoteur de framer.js, juste utilisateur pro.