,

Utilisation de jetons d’animation / motion design pour une conception plus complexe et sophistiquée (blockblog)

Photo de profil de l'auteur

@oskrhqoskrhq

Ingénieur UX autodidacte et concepteur produit.

Icône sociale LinkedIn

Fondamentalement (sans égard pour la plateforme), une animation permet à un élément de passer progressivement d’un état à un autre. Chaque animation nécessite au moins ces quatre parties:

  1. Gâchette– Qu’est-ce qui provoque l’animation (gestes, temps, etc.)
  2. Durée– combien de temps la transition devrait-elle durer
  3. Assouplissementcomment un élément transitions
  4. Biens– la caractéristique de l’élément en cours de transition (position, opacité, échelle, etc.)

En CSS, les transitions et les animations sont légèrement différentes. Les transitions sont limitées à un état initial et final, mais les animations peuvent inclure de nombreux états intermédiaires (images clés) entre l’état initial et final.

Systèmes de conception et animation

Pour tenter de standardiser certaines de ces 4 parties dans la conception d’animation (principalement l’assouplissement et la durée), la plupart des systèmes de conception utilisent des jetons de conception de mouvement.

Cependant, les donner aux concepteurs et aux développeurs présente certains défis. Pour commencer, they ne sont pas techniquement des jetons de conception; ce sont des variables. Idéalement, les jetons devraient communiquer intention dans un contexte / interaction et informer les concepteurs et les développeurs lorsque et comment pour utiliser une décision de conception particulière en lisant simplement le nom (aka jeton).

Dans les grandes organisations, avec des centaines de concepteurs et des milliers de développeurs, rendre ces variables disponibles par elles-mêmes peut créer des incohérences car chaque concepteur choisit des variables légèrement différentes pour des transitions similaires.

Problème

Deux concepteurs travaillant sur des domaines de produits différents peuvent finir par spécifier la même transition (développer ou réduire un conteneur, par exemple) avec des spécifications d’animation très différentes. Ainsi, l’utilisateur peut rencontrer des incohérences lorsqu’il se déplace entre les zones d’interface utilisateur conçues par différents concepteurs.

Solution

Créez de nouveaux jetons qui véhiculent intention.

Chaque animation sur les écrans numériques, aussi complexe soit-elle, utilise une ou plusieurs des transitions suivantes – il pourrait y en avoir plus, mais ce sont celles que je vois le plus.

🎚 Glisser vers l’intérieur et sortir

👻 Apparaître et se cacher

🕴 Planer à l’intérieur et à l’extérieur

💗 Expansion et rétrécissement

🔍 Zoom avant et zoom arrière

Encapsulant au moins le Assouplissement etDurée en un jeton qui transmet l’intention permet aux concepteurs de se soucier uniquement de la chorégraphie dans les animations. Il s’assure également que ces transitions sont évolutives et cohérentes selon les différents usages.

Voici un exemple de base de la façon dont ils sont combinés. Lors de la conception de transitions qui transmettent des actions de suppression et d’ajout, un concepteur peut vouloir affecter l’opacité (Apparaître et se cacher) et développer ou réduire un objet.

RNIFQ6kbdlTJONV1opFywCBna2T2 si2a33tf

En regardant un exemple plus complexe et exagéré, en utilisant ces jetons, le concepteur devrait simplement indiquer ce qui déclenche l’animation, quels éléments s’animent, quels jetons attribuer à chaque élément et quand chaque élément commencera à s’animer – En d’autres termes, la chorégraphie de l’animation.

Utilisation de Figma Smart Animate qui est actuellement très limitée en ce qui concerne la chorégraphie d’animation. Crier à Alex Lakas pour la configuration intelligente ci-dessus.

Remarque: comme avec n’importe quel système de conception, il peut y avoir des cas dans lesquels ces jetons peuvent ne pas fonctionner pour un cas d’utilisation spécifique, et le concepteur peut avoir à créer une combinaison spécialisée de durée et de minutage. Cependant, dans la conception de système à grande échelle pour les grandes applications, cela est très rare et dans la plupart des cas évité.

Animation principale et illustation par Stéphane Gibert

En rapport

Mots clés

Rejoignez Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.

Traduction de l’article de oskrhq : Article Original

Leave a Reply