UX in 60 Sekunden Komponentenbibliotheken verwenden

Willkommen bei dieser superschnellen Einführung in die Verwendung von Komponentenbibliotheken. hilfreich für Designer, Entwickler und Benutzer. Lass uns rein springen!

Komponentenbibliotheken in 60 Sekunden

 

Jede Interaktion, auf die ein Benutzer trifft, muss er lernen, wodurch eine kognitive Belastung entsteht. Es ist besonders schwierig für Benutzer, wenn Elemente der Benutzeroberfläche vorhanden sind fast das gleiche, aber anders. Der Benutzer muss dann Fragen wie "Warum sind diese Unterschiede?" Parsen, "passiert dasselbe, wenn ich diese beiden Tasten drücke?"

Beginnen Sie mit der Identifizierung allgemeiner Objekte in Ihren Entwürfen, definieren Sie sie als Komponenten. Später (beim Erstellen von Bildschirmen) können Sie sie wieder einblenden. Dadurch werden Sie gezwungen, konsistenter zu sein. Sie werden vielleicht sogar überrascht sein, welche Kilometer Sie erreichen, wenn Sie dieselben Objekte verwenden, um verschiedene Probleme zu lösen.

Skizze verwenden

Praktisch können Sie Symbole in Ihrem Skizzenprojekt erstellen oder das Craft by InVision-Plugin verwenden. Um die Komponentenbibliothek wirklich zu nutzen, arbeiten Sie mit Ihren Entwicklern zusammen, um die gleichen Elemente zu erhalten, die auch im Code definiert sind.

  • Handwerk: Gestalten mit realen Daten
  • So organisieren Sie Ihre Skizzenstile und -symbole wie ein Profi

Es muss auch nicht rein visuell sein; Sie sollten die verschiedenen Zustände jedes Objekts und sogar komplexe Interaktionen definieren.

Bei Verwendung einer Komponentenbibliothek können Designer und Entwickler immer wieder dieselben Objekte verwenden, um verschiedene Probleme zu lösen. Und für Benutzer werden sie auf bekannte Komponenten stoßen, die weniger Zeit benötigen, um herauszufinden, wie sie Ihre App oder Website verwenden.

Empfohlene UI-Kits

Sie haben ein paar UI-Kits in diesem Video bemerkt; Laden Sie sie jetzt als Teil Ihres Envato Elements-Abonnements ab!

Einfach

Über 100 bearbeitbare und skalierbare Photoshop-Elemente, basierend auf sauberen Vektorformen. Die Ebenen sind gruppiert und gut organisiert, Elemente lassen sich einfach anpassen und anpassen sowie Farben bearbeiten.

Zoomie

Social Media Mobile App für Sketch; Alle Screen Art Boards sind gut organisiert und geschichtet.