Partout où vous regardez, il y a un nouvel effet animé. Si l'animation était l'élément de conception incontournable de 2016, les effets de vol stationnaire innovants constituent la tendance montante de 2017.
Grâce en partie à la popularité de Material Design et aux directives d'animation d'Apple axées sur les petits mouvements, les effets de survol font leur retour. Mais au lieu des effets collants, clignotants, rebondissants et tournoyants du passé, les animations sont simples, nettes et ravissantes. Les meilleurs effets de survol aident l'utilisateur et améliorent l'expérience.
Les effets de survol peuvent aller d'un mouvement ayant un impact sur tout l'écran à quelque chose d'aussi petit qu'un repère ou un élément de navigation.
Mouvement de la page d'accueil
Les effets de survol peuvent être un élément clé de votre expérience d’initiation utilisateur. Avec une animation qui remplit l'écran, des effets de survol supplémentaires peuvent être très charmants.
Haus, ci-dessus, fait un travail incroyable avec des personnages de dessins animés qui se déplacent à travers l'écran. Vous ne pensez peut-être rien à l'animation, mais avec un survol, les personnages explosent en une autre action. Sans vol stationnaire, chaque personnage se contente de valser sur l'écran.
Lorsque vous travaillez avec une animation de survol plein écran telle que celle-ci, l'astuce consiste à ravir les utilisateurs, pas à les submerger. C'est un terrain d'entente assez difficile. En gardant le reste de la conception simple - un fond sombre et plat avec une police de caractères sans empattement et facile à lire en blanc - l’animation est autorisée. C’est le seul truc à l’écran qui encourage les utilisateurs à interagir avant de faire défiler les écrans suivants.
Effets de boutons
Une simple animation peut réellement inciter un utilisateur à cliquer ou à appuyer sur un bouton de la conception. Cela semble simple, non?
C'est en partie pourquoi ce type d'animation est si populaire.
Créez un effet de bouton qui aide les utilisateurs à mieux comprendre la conception pour obtenir un impact maximal. L'exemple ci-dessus de Luke Etheridge montre un état qui change de couleur et indique aux utilisateurs ce qui se passera avec un clic. Il s'agit d'une animation de survol utile, fonctionnelle et fonctionnelle.
Galeries et Diaporamas
Les pages Web regorgent de galeries et de diaporamas. Presque tous incluent plusieurs effets animés, du mouvement entre les diapositives aux flèches ou autres divots indiquant aux utilisateurs comment avancer ou revenir en arrière.
La clé pour concevoir des mouvements modernes peut être extraite directement des spécifications de Material Design.
- Le mouvement est rapide
- La motion est claire
- Le mouvement est cohésif
La motion est le coup de feu de Baptiste Dumas fait toutes ces choses. Le mouvement se fait de manière à ne pas laisser l'utilisateur se demander ce qu'il va se passer ensuite, il crée une ligne de démarcation évidente entre les éléments de contenu et tout est lié par un flux de mouvement similaire et continu.
Navigation et menus
Qu'on le veuille ou non, les styles de navigation cachés sont un élément de conception populaire. De superbes effets d'animation ou de survol peuvent aider les utilisateurs à mieux naviguer dans le contenu et à se déplacer dans la conception.
Des icônes de hamburger qui grandissent ou disparaissent avec des informations qui apparaissent ou basculent à l'écran, les éléments de menu animés peuvent servir d'outil directionnel puissant.
Oxen Made, ci-dessus, utilise les animations de survol de deux manières sur la page d'accueil pour indiquer aux utilisateurs quelles actions ils sont censés effectuer. ?Menu? change de couleur en survol pour que les utilisateurs sachent qu'il s'agit d'un élément cliquable. Le menu complet bascule alors du côté gauche de la page. Plus loin, une petite flèche triangulaire rebondit dans le coin droit, en utilisant le même jaune que le bouton de menu actif, indiquant qu'il y a plus de contenu sur le parchemin.
Ces mouvements subtils se produisent pendant la lecture d’une vidéo d’arrière-plan relativement chargée. Les mouvements plus doux contrastent juste assez avec l'arrière-plan pour attirer l'attention des utilisateurs et fournir une direction et une navigation suffisantes du site.
Formulaires et champs
Certains des meilleurs exemples d'effets de survol sont l'utilisation de formulaires et de champs. Presque tous les sites Web que vous visitez demandent une action ou une information. Plus il est facile pour les utilisateurs de fournir ces informations, plus vous aurez de chances de les collecter.
Cela ne signifie pas que les formulaires doivent être ennuyeux. Les repères visuels, tels que les info-bulles qui aident les utilisateurs à se rappeler les éléments à saisir dans un champ (et dans quel format), ainsi que la confirmation du succès sont importants.
L'exemple ci-dessus fait les deux choses. Les utilisateurs sont informés des informations à saisir, ils peuvent voir l'entrée au fur et à mesure et en cliquant sur le lien? Login? bouton une confirmation animée rapide apparaît à l'écran. Les utilisateurs n'ont pas à deviner si leurs informations ont été saisies correctement ou non et savent, grâce à cette vérification rapide à l'écran, qu'ils peuvent procéder à ce qu'ils veulent faire ensuite.
Si vous ne savez pas par où commencer avec de simples effets de survol ou des animations, les formulaires peuvent constituer un bon point de départ. Les utilisateurs s'attendent déjà à ce que cette partie du site soit interactive. Ils vont faire quelque chose avec le formulaire; fournir les commentaires appropriés avec une animation simple.
Ressources et code à essayer
Prêt à ajouter des effets animés à votre conception? Il existe de nombreuses ressources utiles qui peuvent vous aider à démarrer.
- Survolez.css: Une collection d'effets de survol optimisés par CSS3 à appliquer aux liens, boutons, logos, SVG, images en vedette, etc. Appliquez sur vos éléments, modifiez ou utilisez pour l'inspiration. Disponible en CSS, Sass et LESS.
- Effets de survol de l'image: Une collection d'effets pour vous aider à tirer le meilleur parti du survol d'images. Copiez le code et utilisez-le dans vos projets.
- Effets de survol de l'icône: Survol simple pour mettre l'accent sur les icônes circulaires.
- Effets de survol WordPress étonnants: La collection d'effets est idéale pour les utilisateurs de WordPress. Elle est composée de CSS3 pur et ne comporte aucune dépendance. La collection comprend des dizaines d'options et de styles.
- W3Schools - Transitions CSS3: Apprenez à utiliser les transitions CSS3 à partir de zéro avec ce tutoriel.
Conclusion
Les animations survolées sont l’une de ces techniques de conception qui semblent délicates et lourdes. Mais la réalité est qu'avec l'animation CSS, presque tout le monde peut facilement ajouter une animation simple. Ils sont légers et de nombreux animateurs veulent partager des extraits de code avec vous.
Gardez simplement à l’esprit la règle d’or qui consiste à utiliser n’importe quelle astuce dans votre conception: cela doit avoir un sens. Utilisez uniquement des effets de survol ou des animations lorsqu'ils ajoutent du contenu. veillez à ne pas distraire les utilisateurs des actions à entreprendre. Amuse-toi bien et bonne chance!