8 façons imaginatives d'utiliser l'animation dans les applications mobiles

Page 1 sur 2: Animations de l'application au lancement et au chargement

Une bonne application mobile doit se vanter d'une excellente conception d'interface et d'une expérience utilisateur attrayante, bien sûr, mais les gens jugent également par leurs apparences. Dans un marché bondé, les développeurs doivent s'assurer que leur application est suffisamment belle pour se démarquer. Les animations peuvent aider sur tous les plans. Lorsqu'elles sont utilisées correctement, les animations de l'interface utilisateur peuvent aider à réduire la charge cognitive, attirer et diriger l'attention des utilisateurs et rendre l'expérience plus facile à suivre.

Dans mon travail à EfficaceSoft , Je conseille souvent les développeurs sur la façon d'intégrer des animations dans leurs UI afin de séduire les clients. Faites les choses correctement, et cela fonctionne vraiment. Mais utilisez trop d'animations ou utilisez-les aux mauvais endroits, et cela peut créer une expérience irritante ou bruyante.

Alors, quand les animations sont-elles appropriées? Cet article rassemble quelques bonnes pratiques pour l'utilisation de l'animation dans les applications mobiles, pour vous montrer comment créer une application interface qui fonctionne. Pour obtenir des conseils sur l'ajout de mouvement à vos interfaces, jetez un œil à ces Exemples d'animation CSS article.



01. Écrans de lancement d'applications animés

Des études montrent que les gens s'attendent à ce que les applications se chargent instantanément, mais avec des applications mobiles complexes, ce n'est pas toujours possible. Le chargement des animations peut aider à distraire les utilisateurs et rendre le temps de chargement plus court qu'il ne l'est. Il existe de nombreuses options d'animation différentes pour les écrans de chargement.

Une option simple consiste à utiliser un logo animé, comme Édouard Puginier a fait ici dans sa conception pour l'écran de lancement de Wit.

Les écrans de lancement d

Les écrans de lancement d'applications sont des emplacements privilégiés pour les animations

D'autres concepteurs aiment faire preuve de plus de créativité et associer leur animation au thème de l'application elle-même ou au reste de la marque. Dans la conception du chargeur ci-dessous, Anton Drokov a animé un vaisseau spatial voyageant vers les étoiles.

Thème vos animations pour créer de l

Thème vos animations pour créer de l'excitation pendant le chargement de votre application

02. Écrans de connexion animés

Certaines applications demandent aux utilisateurs de se connecter avant de se lancer. Ici, une superbe illustration d'arrière-plan peut aider à animer un écran de connexion et à garder les nouveaux utilisateurs de côté afin qu'ils soient prêts à prendre le temps de se connecter.

Dans l'animation de connexion ci-dessous, @ herac1es a utilisé une animation time-lapse d'une ville animée pour ajouter de l'élan au processus de connexion.

Égayez un écran de connexion avec une animation

Égayez un écran de connexion avec une animation

D'autres applications utilisent une animation pour distraire le spectateur pendant qu'elles vérifient le nom d'utilisateur et le mot de passe qui ont été saisis. Dans le concept inspiré de l'espace ci-dessous, Oliver Günther a même conçu un état d'erreur.

Se tromper de mot de passe n

Se tromper de mot de passe n'a jamais été aussi amusant

03. Écrans d'intégration animés

Les développeurs de logiciels comprennent l'importance du processus d'intégration. Cela aide les nouveaux utilisateurs à se familiariser avec l'application. Il existe un risque réel que les gens abandonnent l'application s'ils ne comprennent pas comment l'utiliser.

La présentation de diapositives statiques aux utilisateurs est une approche courante de l'expérience d'intégration, mais les procédures pas à pas animées sont beaucoup plus attrayantes, car cette animation d'intégration apaisante de Zhenya Rynzhuk prouve.

Guidez les utilisateurs à travers l

Guidez les utilisateurs à travers l'application avec une animation

04. Indicateurs de progrès et d'activité animés

Il est de notoriété publique que les gens sont impatients et détestent attendre. Les développeurs font de leur mieux pour s'assurer que leurs applications fonctionnent correctement et rapidement, mais parfois l'attente est inévitable - par exemple, lorsque quelque chose doit être chargé ou qu'un nouvel élément est installé.

Les applications utilisent souvent des indicateurs de progression ou d'activité animés pour capter l'attention des utilisateurs. Celles-ci peuvent être circulaires ou linéaires, et les développeurs ont tendance à choisir des indicateurs indéterminés pour les opérations qui sont effectuées rapidement et des indicateurs déterminés pour les actions qui prennent plus de deux à trois secondes.

Cependant, certains concepteurs d'applications rendent leurs indicateurs d'activité plus distinctifs. Par exemple, Domaso L ’indicateur de progression circulaire de l’ a été transformé en un chat mignon qui s ’étire en se déplaçant.

Quoi d

Quoi d'autre pourrait être un jeu amusant sur le rouet?

Andrey Davlikanoff a également repoussé pour une créature mignonne. Son petit escargot avance pour indiquer les progrès.

C

C'est certainement plus amusant que la plupart des indicateurs de progrès

D'autres développeurs ont choisi de puiser dans notre obsession pour la nourriture. Ces indicateurs sont un excellent choix pour les applications mobiles qui traitent de la livraison de nourriture, des recettes ou de la cuisine. Par exemple, Giedrius Butkus La conception alléchante du préchargeur de pizza conviendrait parfaitement à une application de livraison de pizza.

J

J'espère juste que vos utilisateurs n'auront pas faim

Roman Kryzhanovskyi a opté pour un design géométrique plus simple dans son écran de progression de recherche de serveur d'applications Android.

Nous adorons l

Nous adorons l'effet d'ondulation de style sonar (vous devrez peut-être actualiser pour faire jouer celui-ci)

Pour terminer, Mark Martemianov a décidé de combiner un indicateur de progression circulaire et linéaire dans son bouton d'abonnement de style Material Design.

Page suivante: Idées d'animation de l'interface utilisateur pour les boutons, les menus et les pages d'erreur

  • 1
  • deux

Page actuelle: Animations de l'application au lancement et au chargement

Page suivante Animations dans les applications