Val Head offre un cours intensif en motion design pour le web.

Motion design est une compétence nécessaire pour le web moderne. Avec des animations web à partir vraiment trouvé son rythme, tout le monde de designers UX pour les développeurs frontend a besoin d’une appréciation pour ce mouvement peut ajouter à leur travail. Interactions animés sont déjà monnaie courante dans nos applications natives et systèmes d’exploitation. Le web peut être derrière ces plates-formes dans ses capacités d’animation en ce moment, mais nous rattrape rapidement son retard grâce à l’amélioration constante de la prestation et le soutien des options d’animation Web de navigateurs. Bientôt, le caractère et l’énergie que le mouvement apporte une interface seront la norme sur le web aussi. Le mouvement est en train de trouver son chemin dans notre processus de conception de sites Web et d’être reconnu comme un outil de conception d’interaction précieuse. Ce sont des moments passionnants !

Un de mes préférés de sources de motion design inspiration! 

Art du titre dispose pannes et des études de cas à gogo Alors que l’animation a beaucoup à offrir dans tous les aspects de la conception, je ne vais pas aller trop dans le détail sur la façon dont l’animation soutient UX ici (je couvre quelques exemples de ce List Apart article). 

Cet article est tout au sujet de l’élaboration d’un œil pour le mouvement et de mettre les principes de l’animation traditionnelle en pratique. Grande animation d’interface est utile, transmet de l’information et le fait avec retenue et style. Voilà un défi de taille, mais il est pas hors de portée. Retenue et le style est où les compétences de conception de mouvement entrent en jeu. Bien conçu mouvement maintient notre public axé sur l’expérience de la qualité au lieu de les distraire avec cloches et de sifflets maladroits.

Les principes d’animation classiques La bible de l’animation, si il y avait une, serait l’illusion de la vie par des animateurs de Disney Ollie Johnston et Frank Thomas.

Ce livre présente les 12 lignes directrices qui permettent Disney imité la vie dans ses films d’animation. Ces principes sont éprouvés par le temps et même si elles sont écrites pour un milieu tout à fait différent, nous pouvons les appliquer à des interactions animées avec d’excellents résultats.

Apprendre à identifier chacun de ces principes vous aidera à développer un œil pour l’animation et vous donner une base pour l’évaluation et la conception d’interactions. 

Les 12 principes classiques sont: le squash et le tronçon, l’anticipation, la mise en scène, tout droit et posent à poser, suivre à travers, lent et ralentir sur, arcs, action secondaire, le calendrier, l’exagération, dessin solide et d’appel.

Elles ne concernent pas tous également à nos efforts en matière d’animation de l’interface, mais il est toujours utile de savoir ce que chacun implique. Nous allons jeter un œil de plus près les trois principes qui sont particulièrement clé pour interfacer animations: timing, action secondaire et le suivi.

Moment et l’espacement : Il est vraiment tout

La motion gonflable des points en points transmet une espièglerie énergique et crée l’élan Mon professeur d’improvisation nous dit toujours que le moment est la clé à la comédie. 

Comme il arrive, le timing est aussi la clé de l’animation. 

Dans l’animation, le timing est tout au sujet de la durée d’une action prend.

Dans le texte classique, il est dit que bon timing fait apparaître un objet d’obéir aux lois de la physique. Il donne des indices quant au poids d’un objet et qui forces ont agi sur elle. Quand il vient à l’interface d’animation, notre objectif est de répliquer pas toujours le monde physique, cependant. Nous avons tendance à mettre l’accent sur l’aspect de la synchronisation qui établit «personnalité» d’un objet. Tant de choses peuvent être communiquées par le calendrier!

Pour l’animation web, l’espacement se résume à l’assouplissement (la fonction de synchronisation) que nous appliquons à une propriété d’animation. Assouplissement détermine comment les changements de vitesse se produisent dans la durée d’une animation. Voilà comment nous indiquons humeur et votre personnalité. La durée d’une animation joue également un rôle ici, mais l’assouplissement fait le plus parlé. Calendrier gonflable forte, comme le mouvement des points dans le Dots jeu, transmet, une sensation ludique énergique. Il peut souvent se sentir encore un peu enfantin à la fois. Faites défiler la liste sur le site du jeu pour une courte animation et examiner de près la façon dont les points se déplacent – quand ils tombent en place, ils rebondissent un peu. Le rebond est courte, ce qui nous informe les points ont un certain poids à eux.

L’objet d’animation se déplace à la même distance dans chaque trame, pour donner une vitesse constante À l’autre extrême, l’assouplissement linéaire apparaît mécanique et manque de vie. Mouvement linéaire est titulaire d’une vitesse constante sur toute la durée du mouvement ; il n’y a pas ralentir ou accélérer à tous. Cela est impossible dans le monde réel, grâce à des choses comme la gravité ! Assouplissement linéaire ne communique rien d’utile à propos de la masse ou la nature de l’objet en mouvement. Le plus drôle est une question de timing que malgré son potentiel de communiquer, et de tous les efforts que nous pourrions consacrer à la choisir, toutes les animations doivent se produire rapidement. Un des plus grands crimes de conception de mouvement là-bas est de faire vos animations de l’interface trop lente. Il faut de la pratique pour obtenir bon moment, mais plus vous le faites, plus vous obtiendrez. Prototypage animations est très efficace pour obtenir votre timing bas.

Action secondaire : L’acteur de soutien

La rotation 3D partie de l’animation de la forme en expansion dans le flux de Commander est un exemple d’action secondaire Action secondaire est l’animation supplémentaire qui complète, ou se produit comme une réaction à, l’animation principale. Dans l’animation traditionnelle, cela pourrait être quelque chose comme un personnage en sifflant ou en déplaçant ses bras autour de tout elle marche. Dans les interfaces, il est comment les éléments voisins se déplacent en réaction à la motion principale. Les sites Web et les applications ne peuvent pas sifflent ou déplacent leurs bras, de sorte que les possibilités d’action secondaire ne sont pas toujours aussi évident. Cependant, ils ne présentent des éléments et des éléments connexes qui se déplacent ensemble. Ce sont les premiers candidats à action secondaire. Animation de cœur comme de Twitter est un bon exemple de l’action secondaire. L’action principale est le cœur élargissement en vue. Les cercles et les petites particules qui volent autour, il y a des actions secondaires qui améliorent l’effet du cœur.

Suivez à travers : Dépassement juste un peu

Suivez grâce et de l’action de recouvrement sont deux concepts très étroitement liés qui traitent de la façon dont un objet est à l’arrêt. Suivez à travers est le mouvement de dépassement de la destination finale par une petite quantité puis revenir à régler en place. Dans le changelog calendrier diapositives, chaque élément de la liste jaillit un peu plus loin que sa destination avant de revenir à un arrêt. Voilà suivre à travers en action. De même, l’action se chevauchent est le concept que toutes les parties d’un objet à une butée viennent en même temps. Par exemple, oreilles tombantes d’un chien continuer à avancer même après leur corps est venu à un arrêt. Sauf si vous travaillez avec une sorte de moteur physique, vous serez semblant ou approchant ces concepts avec des choix d’assouplissement ou de placement de l’image clé. Il n’y a rien de mal à cela. Faisant allusion à ces concepts familiers avec tout type d’animation va un long chemin à la création d’un sentiment plus réaliste.

Mettre en pratique

Pour commencer, tout dans notre exemple déplace et anime à la fois, comme un objet connecté solide Il est amusant de lire sur ces principes, mais ils sont plus utiles quand on les met en action. Jetons un coup de couteau à mettre ces techniques en pratique avec une certaine animation CSS. Pour cette partie, je suppose que vous avez une certaine expérience dans l’animation d’image clé CSS. Si vous avez besoin d’un recyclage, ce poste par Rachel Cope vous permettre de devenir rapidement en peu de temps. Notre exemple est une boîte d’alerte d’animation qui confirme votre réservation dans un café de chat fictif. Il anime sur l’écran pour nous faire savoir notre tâche de réservation a été complété avec succès. Voir notre point de départ ici. Pour le moment il est un peu, eh bien, manquant. Notre boîte d’alerte fait le strict minimum: il anime en vue, puis sur le bouton associé, qui se fane en dessous. Il n’y a rien tout ce que convaincante à ce sujet … du moins pas encore.

Un ligne de synchronisation

Ceci est l’assouplissement notre exemple commence avec, en utilisant le mot-clé de la facilité en CSS

Cela contraste avec notre assouplissement de la facilité-out. La courbe se prolonge après le sommet, la création de la suivre à travers Le timing est toujours une bonne chose pour commencer. Notre boîte d’alerte utilise la facilité sur la fonction de synchronisation, de sorte qu’il arrive à une vitesse plus élevée, puis ralentit en place dans une sorte de façon discrète. 

Pas mal, mais il est encore un peu terne compte tenu de la tâche à accomplir. Ceci est la dernière étape dans notre transaction. Nous venons de terminer notre tâche et nous avons réservé quelque chose d’amusant et excitant (au moins, si vous aimez les chats). Un peu plus d’énergie et l’excitation est en ordre à cette situation! Un changement à notre assouplissement permettra de prendre soin de cela. Nous allons garder la sensation générale d’une facilité de départ, mais nous allons Ampit up avec une fonction de Bézier cubique personnalisé créé sur cubic-bezier.com. Nous aurons notre nouvelle assouplissement shoot out-delà du point d’extrémité et puis cliquer de nouveau en place. Notre nouvelle animation se lit maintenant:

1. animation : cubes de Bézier slideIn (0,175, 0,885, 0,320,1,275) à la fois, fadeIn 0,25s facilité à la fois;

Avec ce changement, nous avons accompli deux choses: Nous avons créé suivi par l’action ayant notre boîte dépasser son destinataire. Nous avons fait la motion sentir plus énergique en utilisant une courbe avec plusieurs changements de vitesse drastiques. Voir notre exemple maintenant. Il est encore trop lente, mais nous allons aborder à la fin.

Certains action secondaire

Notre bouton est un candidat de choix pour une action secondaire. Il est lié à notre boîte d’alerte principale, et il peut sembler légèrement par la suite. Ses notes de fade-in retardé à une action secondaire, mais nous pourrions créer un effet plus dramatique en le faisant glisser hors de sous le corps de la boîte d’alerte, comme si elle était glissant en place en réaction à un mouvement vers le haut de la boîte d’alerte. Pour ce faire, nous allons ajouter un ensemble d’images clés pour que l’action glisser vers le bas:

1. keyframes slideDown {
2. de {transformer:translateY (-120px)}
3. à {transformer:translateY (0)}
4. }

Ajouter que l’animation à notre touche en plus de son entrée en fondu, avec de légers retards sur les deux si elles se produisent lorsque la motion principale a surtout complété:

1. bouton {
2. animation:cubes de Bézier .425s slideDown (0,03, 0,16,0,39, 0,99); à la fois, cube-Bézier .5s .6s fadeIn(0,550, 0,085, 0,680, 0,530) à la fois;
3. }

Il est déjà à la recherche comme une animation beaucoup plus sophistiqué et énergique!

Ajout d’un certain chevauchement

Tout le contenu au sein de notre zone d’alerte se déplace à la même vitesse, comme il est un morceau plat de verre avec le texte gravé sur elle. Cela ne cadre pas avec notre objectif de créer une ambiance de plaisir énergique avec la motion. Animer le texte à l’intérieur de la boîte séparément permettra de créer une action de recouvrement pour donner le mouvement plus de vie et créer l’effet de transfert d’énergie d’un élément à un autre. Pour ce faire, je vais ajouter un ensemble de plus d’images clés pour une diapositive moins prononcée. Je vais les appliquer aux h2, h3 et le paragraphe intérieur de la boîte, chacun avec un retard. Le nouvel ensemble d’images clés est une version abrégée de notre slideIn animation:

1. keyframes slideInShort {
2. de {transformer:translateY (80px);}
3. à {transformer:translateY (0);}
4. }
5. animation:slideInShort 0.3s cubes Bézier (0,03, 0,16,0,39, 0,99); à la fois, fadeIn 0.15s cubes Bézier(0,550, 0,085, 0,680, 0,530) à la fois;

Les trois éléments sont affectés que l’animation avec des retards variables :

Notre exemple commence vraiment à prendre forme

maintenant. Sass les variables de gérer les retards et les durées

Sass peut vous faire économiser quelques maux de tête quand il vient à ajuster les durées et les retards liés. Je tiens à mettre mes durées connexes et les retards par rapport à une variable globale Sass – comme $ DUR: .6s, par exemple – puis multiplier cette variable que nécessaire pour les retards et les durées connexes. Il est un gain de temps énorme.

Les touches finales et accélérer le tout jusqu’à

Dans notre version finale, le conteneur de boîte d’alerte, le contenu et le bouton Animer le texte avec le mouvement gratuit

Nous avons tendance à garder animations lent que ce qu’ils ont besoin d’être alors que nous sommes de leur conception. 

Et pour une bonne raison: nous avons besoin de voir ce qui se passe afin de rendre nos décisions de conception. Il prend beaucoup moins de temps pour «lire» une animation qu’il ne le fait pour le concevoir, cependant.

 Nos yeux et nos cerveaux fonctionnent très rapidement lors de la lecture mouvement, afin d’accélérer nos animations est presque toujours nécessaire – parfois aussi radicalement que la moitié de la vitesse.

 Ne soyez pas timide dans hacher ces durées bas.

Pour finir notre exemple, nous allons couper les durées et ajuster les retards en conséquence.

 Eventuellement, nous pouvons également ajouter certaines variables Sass pour les valeurs et les durées de Bézier cubes pour ranger les choses. Voir notre exemple dans son état ​​final ici.

Après ces quelques modifications, notre animation de boîte d’alerte est à la recherche beaucoup plus poli. Tout le mouvement impliqué a été aligné sur le message que nous voulions transmettre, en utilisant quelques-uns des principes d’animation classiques. Ces techniques, ainsi que les huit autres dans la liste, peuvent être appliquées à pratiquement toutes les tâches d’animation Web. Plus nous les mettons en pratique, mieux nos compétences en conception de mouvement deviendront.

Est-ce l’année de l’animation Web?

Beaucoup des «tendances du design sur le Web pour 2015» listes inclus mouvement comme quelque chose qui est à la hausse. Je suis entièrement d’accord avec personne mettant l’animation sur leur liste. Navigateurs deviennent plus rapides et plus cohérente avec chaque nouvelle technologie d’animation web qui émerge. 

Ceci est une grande partie de la raison pour laquelle l’animation web commence à vraiment saisir l’attention des concepteurs. Il est pas la seule raison que – je l’ai aussi remarqué un changement dans l’attitude de l’industrie vers l’animation. Lors des conférences et des ateliers, je remarque que les questions les plus courantes je suis très demandé commencent à changer de «Pourquoi devrais-je? ‘ à «Comment puis-je utiliser ce bien?

Nous ne sommes plus à la recherche de façons de justifier une animation comme outil de conception. Au lieu de cela, nous cherchons des moyens de le faire bien. Pour créer des animations de l’interface avec un but et style. High Fives tout autour pour ça! Il ya beaucoup de concepteurs de sites Web talentueux là-bas et je suis impatient de voir ce que le proche avenir pour l’animation Web!

Mots: Val HeadDesigner Val Head est bien connu pour son travail avec animation web. Elle anime des ateliers sur l’animation d’interface, a écrit le guide de poche CSS Animations et parlait au Générer New York en Avril 2015. Cet article a été publié dans le numéro 265 du magazine net, et a été mis à jour par l’auteur dans Novemeber 2015.Aimé cela? Lisez-les!

• 3 techniques d’animation UX designers doivent savoir
• Utiles et inspirants modèles de fidélisation
• Télécharger textures gratuites: haute résolution et prêt à utiliser dès maintenant