web-dev-qa-db-fra.com

MockUps - Prototypage de l'interface utilisateur à l'aide d'After Effects. Est-ce que ça vaut le coup?

Je suis un concepteur visuel et travaille actuellement en tant que concepteur UI_UX dans l'entreprise pour laquelle je travaille. Je voulais demander à mes collègues ici et aux développeurs front-end votre opinion sur la présentation des animations After Effects afin de détailler comment l'interaction se fera dans certains Design. Trouvez-vous cela utile?

Dans ce lien, vous pouvez trouver un exemple de ce dont je parle:

https://www.behance.net/gallery/52672469/Animated-Mockup-APP-Merkus

Remarque: Cela prend beaucoup plus de temps que d'utiliser un autre outil de prototypage, mais je le trouve vraiment utile dans le processus de mise en œuvre car il permet une vue transparente de ce que les concepteurs veulent faire.

J'ai besoin de vos opinions, avantages et inconvénients ou tout ce que vous souhaitez partager. Merci beaucoup.

3
Calvin Gaviria

Voici mes deux cents sur la question. Je suis d'accord avec vous que le prototypage est nécessaire dans certains cas (wowing clients, expression des détails comportementaux d'une application, etc.). D'après mon expérience, le prototypage a été très utile, mais je l'ai fait de deux manières:

Rapid Prototyping (mon préféré). Nous travaillons actuellement sur une application Angular et c'est quelque chose que j'ai ramassé relativement facilement. Vous prototypez essentiellement en utilisant le framework avec lequel vos développeurs travaillent dans le même environnement que votre application existe in. Raisons (à mon avis) pourquoi cette approche est la meilleure:

  1. Haut degré de réutilisation du code (à condition que vous n'utilisiez pas de code jetable - voir Adobe Muse fabrique de code spaghetti).
  2. Capacité à démontrer le comportement vrai de l'application/fonctionnalité en utilisant le même framework que vos développeurs,
  3. Expérimentez la douleur que vous pourriez endurer vos développeurs en demandant/concevant des animations/comportements qui peuvent parfois s'avérer inutiles et coûteux à construire. Je ne dis pas que c'est le cas dans votre situation, mais cela vaut la peine d'être mentionné.

Prototypage traditionnel Je fais toujours cela pour mettre en place des fonctionnalités et des comportements plus simples qui ne nécessitent pas trop d'efforts. C'est pour moi la méthode incontournable si j'ai le temps et que la fonctionnalité n'est pas trop lourde à digérer/expliquer. J'utilise Invision pour aider à simuler le comportement et Sketch pour les conceptions.

Je ne sais pas si l'un des éléments ci-dessus fera l'affaire, mais je peux vous dire qu'ils peuvent prendre moins de temps que d'utiliser After Effects (par rapport à votre niveau de compétence en AE, bien sûr). Si vous avez déjà les conceptions prêtes et que le comportement que vous essayez d'obtenir peut être accompli avec l'un des outils suivants, je recommanderais (sans ordre particulier):

  1. Sketch Prototyping en utilisant leur plugin Craft. Proto est toujours en version bêta, mais vous pouvez leur demander un code. C'est assez solide.
  2. JustInMind
  3. Adobe XD
  4. Invision

J'espère que cela vous aidera dans votre décision.

À votre santé!

2
Stefan

Je vois deux problèmes ici.

(1) Vous signalez qu'ils prennent beaucoup de temps à faire. Les prototypes sont censés être rapides et peu coûteux à changer, car vous itérez et les changements se produisent fréquemment.

(2) Les utilisateurs de vos prototypes sont finalement les développeurs. Parlez-leur et voyez ce dont ils ont besoin. Peuvent-ils travailler à partir d'un filaire statique avec quelques notes de texte? Ont-ils besoin d'interactions approximatives (en utilisant Axure, par exemple) pour plus de clarté? Ou ont-ils besoin de véritables animations au pixel près pour faire leur travail? (Je n'ai jamais rencontré un développeur qui avait besoin de plus que des wireframes statiques.)

Les wireframes statiques Lo-fi ont toujours fonctionné pour moi, mais dans mon travail actuel, nous faisons des prototypes interactifs Axure, peut-être parce que c'est un peu amusant de les faire. Je suppose que c'est pourquoi vous travaillez dans After Effects.

0
Ken Mohnkern

Mon opinion (qui suppose des compétences intermédiaires en HTML/CSS/JS):

Si vous cherchez une réponse rapide, je dirais que AfterEffects a une valeur limitée, autre que de trouver des façons cool de présenter vos projets sur Behance. C'est fastidieux, et pour la grande majorité des animations interactives, un bon vieux CSS peut vous mener loin. Boostez cela avec la bibliothèque TweenMax de GreenSock si vous avez besoin de chaîner des animations (une bibliothèque très puissante, qui ne vous oblige pas à être un expert JavaScript), et vous vous retrouverez à créer des animations qui sont non seulement plus rapides à faire mais aussi plus facile pour les développeurs de traduire dans le code de production au niveau 1: 1. Si cela doit être super complexe, je dirais qu'il est souvent préférable de consacrer du temps à la conception des animations en collaboration avec un développeur.

0
SorenRomer