Willkommen zu dieser superschnellen Einführung in die Verwendung von Komponentenbibliotheken. hilfreich für Designer, Entwickler und Benutzer gleichermaßen. Lass uns reinspringen!

Komponentenbibliotheken in 60 Sekunden

Jede Interaktion, auf die ein Benutzer stößt, muss er lernen, was zu einer kognitiven Belastung führt. Für einen Benutzer ist es besonders herausfordernd, wenn Elemente der Benutzeroberfläche fast gleich, aber unterschiedlich sind. Der Benutzer muss dann Fragen wie "Warum sind diese unterschiedlich?", "Wird dasselbe passieren, wenn ich diese beiden Tasten drücke?" Analysieren.

Identifizieren Sie zunächst allgemeine Objekte in Ihren Entwürfen, definieren Sie sie als Komponenten, und ziehen Sie sie später (beim Entwerfen von Bildschirmen) wieder ein. Auf diese Weise zwingen Sie sich, konsequenter zu sein. Sie werden vielleicht sogar überrascht sein, wie viele Kilometer Sie mit denselben Objekten zurücklegen können, um verschiedene Probleme zu lösen.

Skizze verwenden

In der Praxis können Sie Symbole in Ihrem Sketch-Projekt erstellen oder das Plugin Craft by InVision verwenden. Um wirklich Wert aus Ihrer Komponentenbibliothek zu ziehen, arbeiten Sie mit Ihren Entwicklern zusammen, um die gleichen Dinge auch im Code zu definieren.

• Handwerk: Entwerfen 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 vertraute Komponenten stoßen, die weniger Zeit damit verbringen müssen, herauszufinden, wie sie Ihre App oder Website verwenden.

Empfohlene UI-Kits

Sie werden einige UI-Kits in diesem Video bemerkt haben. Hol sie dir jetzt als Teil deines Envato Elements-Abonnements!

Einfach

Über 100 bearbeitbare und anpassbare Photoshop-Elemente, basierend auf sauberen Vektorformen. Ebenen sind gruppiert und gut organisiert, Elemente können leicht in der Größe geändert und angepasst sowie Farben bearbeitet werden.

Zoomie

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