UX en 60 secondes utilisation de bibliothèques de composants

Bienvenue dans cette introduction très rapide à l’utilisation des bibliothèques de composants; utile pour les concepteurs, les développeurs et les utilisateurs. Sautons dans!

Bibliothèques de composants en 60 secondes

Chaque interaction rencontrée par un utilisateur doit être apprise, ce qui crée une charge cognitive. Il est particulièrement difficile pour un utilisateur si des éléments de l'interface utilisateur sont presque le même, mais différent. L'utilisateur doit alors analyser des questions telles que «pourquoi sont-elles différentes?», «La même chose se produira-t-elle si je clique sur ces deux boutons?

Commencez par identifier les objets communs dans vos conceptions, définissez-les en tant que composants, puis plus tard (lors de la conception d'écrans), vous pourrez les récupérer. En le faisant, vous vous obligerez à être plus cohérent. Vous pourriez même être surpris par le kilométrage que vous pouvez obtenir en utilisant les mêmes objets pour résoudre différents problèmes..

Utiliser Sketch

En pratique, vous pouvez créer des symboles dans votre projet Sketch ou utiliser le plug-in Craft by InVision. Pour tirer vraiment parti de votre bibliothèque de composants, collaborez avec vos développeurs pour obtenir les mêmes choses définies dans le code..

• Artisanat: concevoir avec des données du monde réel
• Comment organiser vos styles et symboles d'esquisse comme un pro

Il n'a pas besoin d'être purement visuel non plus; vous devez définir les différents états de chaque objet et même les interactions complexes.

Lorsqu'ils utilisent une bibliothèque de composants, les concepteurs et les développeurs peuvent utiliser les mêmes objets à plusieurs reprises pour résoudre différents problèmes. Et pour les utilisateurs, ils rencontreront des composants familiers et devront passer moins de temps à comprendre comment utiliser votre application ou votre site Web..

Kits d'interface utilisateur en vedette

Vous aurez remarqué quelques kits d'interface utilisateur présentés dans cette vidéo; récupérez-les maintenant dans le cadre de votre abonnement Envato Elements!

Simple

Plus de 100 éléments Photoshop modifiables et redimensionnables, basés sur des formes vectorielles épurées. Les couches sont groupées et bien organisées, les éléments sont faciles à redimensionner et à ajuster, ainsi que les couleurs à modifier.

Zoomie

Application mobile de médias sociaux pour Sketch; tous les tableaux d'art de l'écran sont bien organisés et en couches.