30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. UX
Webdesign

UX en 60 secondes: Utilisation des bibliothèques de composants

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Bienvenue à cette introduction super-rapide à l'utilisation des bibliothèques de composants; utile pour les concepteurs, les développeurs et les utilisateurs. Commençons!

Bibliothèques de composants en 60 secondes

Chaque interaction qu'un utilisateur rencontre, ils doivent apprendre, ce qui crée une charge cognitive. C'est particulièrement difficile pour un utilisateur si les éléments de l'interface utilisateur sont presque identiques, mais différents. L'utilisateur doit alors analyser des questions comme "pourquoi sont-elles différentes?", "La même chose se produira-t-elle si je touche ces deux boutons"

Commencez par identifier des objets communs dans vos conceptions, définissez-les comme composants, puis plus tard (lorsque vous concevez des écrans), vous pouvez commencer à les récupérer. En faisant cela, vous vous forcez à être plus cohérente. 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.

Utilisation de Sketch

En pratique, vous pouvez créer des symboles dans votre projet Sketch ou utiliser le plugin Craft par InVision. Pour obtenir vraiment de la valeur de votre bibliothèque de composants, travaillez avec vos développeurs pour obtenir les mêmes choses définies dans le code aussi.

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

Lors de l'utilisation d'une bibliothèque de composants, les concepteurs et les développeurs peuvent utiliser les mêmes objets encore et encore, pour résoudre différents problèmes. Et pour les utilisateurs, ils vont rencontrer des composants familiers, de passer moins de temps à trouver comment utiliser votre application ou votre site Web.

Kits d'interface utilisateur en vedette

Vous aurez remarqué quelques Kits UI présentés dans cette vidéo; prenez-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 propres. Les couches sont regroupés et bien organisés, les éléments sont faciles à redimensionner et à ajuster, ainsi que les couleurs d'édition.

Simple Flat UI Kit

Zoomie

Application Social Media Mobile pour Sketch; tous les panneaux d'écran sont bien organisés et stratifiés.

Zoomie

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.