Personnalisez une illustration vectorielle Adobe Stock afin de créer une superbe animation d’écran de chargement pour application mobile.

Recherche d’une illustration vectorielle pour animer un écran de chargement

Dans Adobe Stock, recherchez une illustration vectorielle personnalisable pour créer une expérience d’animation unique en son genre.

Écran de résultats d’Adobe Stock après une recherche de lettres de néon avec le filtre Vecteurs activé.

Copier-coller de lettres dans Adobe XD depuis Illustrator

Copiez des lettres depuis le fichier Illustrator et collez-les dans la mise en page Adobe XD, puis convertissez chaque lettre en composant réutilisable.

Image agrandie du fichier Illustrator avec des lettres vectorielles sélectionnées pour le copier-coller dans la mise en page Adobe XD.

Création d’un second plan de travail avec une lettre désactivée

Dupliquez le plan de travail dans Adobe XD, remplacez l’une des lettres par sa version désactivée, puis réduisez l’opacité dans le panneau Aspect.

Deux plans de travail dans Adobe XD montrant les mêmes lettres de néon avec les versions activée et désactivée dans le cadre.

Création d’une animation temporisée entre des plans de travail

Dans l’espace de travail Prototype, reliez le premier plan de travail au second avec un évènement Délai et un effet de rebond Animation automatique. Créez d’autres plans de travail en suivant le même processus avec des durées différentes.

Interface Prototype d’Adobe XD avec les deux plans de travail montrant le panneau Interaction pour la configuration de l’événement Délai et de l’effet de rebond Animation automatique.

Résolution de l’animation dans l’écran principal

Finalisez l’animation de l’écran de chargement en reliant le dernier écran de l’animation à l’écran principal de l’application mobile.

Plans de travail Prototype montrant l’expérience d’écran de chargement finalisée pour résoudre l’écran principal de l’application mobile.

Résultat final

Vous avez à présent une superbe animation d’écran de chargement qui suscite l’intérêt et propose une expérience utilisateur unique.

Deux écrans d’application mobile avec le mot « ENTER » en lettres de néon dans un cadre à gauche et l’interface de l’application mobile à droite.

 

Consultez cette collection Adobe Stock soigneusement sélectionnée, qui compte certainement plus d’images que vous ne pourrez en utiliser dans votre prochain projet.

 

02/10/2021
Cette page vous a-t-elle été utile ?