Produktives XD-Prototyping – Ein Tutorial zu Adobe XD-Komponenten

Das Komponentensystem von Adobe XD bietet Designern leistungsstarke Funktionen zum Erstellen von Prototypen für digitale Produkte. Es ist jedoch nicht ohne Macken und bedarf besonderer Pflege. Die Verwendung intelligenter Verknüpfungen und die Befolgung von Best Practices ermöglichen es Designern, ihre XD-Prototyping-Workflows zu optimieren.

Seit seiner offiziellen öffentlichen Einführung Ende 2017 hat Adobe XD große Fortschritte gemacht, um ein äußerst wettbewerbsfähiges Wireframing- und Prototyping-Tool für UX-Designer zu werden. Insbesondere das neue Komponentensystem erweitert die Art der Interaktionen, mit denen Designer experimentieren können. Dennoch sind Komponenten nicht ohne Macken und Nachteile. Bei der Arbeit mit XD-Komponenten ist es hilfreich, eine Reihe von Workflow-Praktiken anzuwenden, um Hektik zu vermeiden und das volle Potenzial des Systems auszuschöpfen.

Was sind Adobe XD-Komponenten?

XD-Komponenten sind wiederverwendbare Gruppierungen von Elementen wie Text, Formen oder Linien. Eine Komponente hat eine „Hauptkomponente“, die als übergeordnete Komponente dient, und „Instanzen“ oder untergeordnete Elemente, die auf der Zeichenfläche platziert werden. Wenn Sie die Hauptkomponente ändern, werden die Änderungen auf alle ihre Instanzen übertragen.

Komponenten ersetzen das frühere „Symbol“-System von XD, das einem ähnlichen Zweck diente, und bieten ein wichtiges Unterscheidungsmerkmal . Sie können mehrere Zustände haben, die auf verschiedene Eingaben reagieren, die im Prototypmodus von XD definiert sind. Beispielsweise kann eine Schaltfläche einen Standardzustand haben, aber ihr Aussehen ändern, wenn sie sich in einem Hover- oder einem angeklickten Zustand befindet. Es kann einen Ton abspielen, wenn es angeklickt wird, oder sogar sein Aussehen entsprechend den Eingaben der Spracherkennung ändern.

Das Baukastensystem spart Zeit, erfordert aber besondere Sorgfalt. Ein durchdachter Ansatz und ein sorgfältig vorbereiteter Arbeitsablauf sind erforderlich, um die Leistungsfähigkeit des Systems zu nutzen.

Vertrautheit mit Adobe XD wird empfohlen

Designer mit einem gewissen Maß an Vertrautheit mit Adobe XD werden am meisten von den folgenden Tipps und Vorschlägen profitieren. Um einen Vorsprung zu erhalten, laden Sie das Adobe XD Design Kit von der Material Design-Homepage von Google herunter. Das Kit enthält ein Adobe XD-Komponentenset zum Experimentieren und Dekonstruieren.

Tipp Nr. 1 – Berücksichtigen Sie alle Zustände, bevor Sie eine Komponente erstellen

Wenn Sie zum ersten Mal eine Komponente mit Zuständen erstellen, sollten Designer verstehen, wie sich potenzielle Änderungen an einer Komponente auf andere Instanzen auswirken können. Betrachten wir zur Veranschaulichung ein Dropdown-Menü mit mehreren Zuständen:

• Der Standardzustand : Das Menü ist eingeklappt
• Ein Schwebezustand : Die Umrissfarbe kann sich ändern, wenn sich der Mauszeiger darüber befindet
• Ein erweiterter, angeklickter Zustand : Die Dropdown-Menüoptionen werden angezeigt

Beim Bearbeiten des Standardzustands einer untergeordneten Instanz einer Dropdown-Liste werden diese Änderungen nicht auf die Zustände „Hover“ oder „Klicken“ übertragen . Es müssen Änderungen am Standardstatus in der Hauptkomponente vorgenommen werden, um die Schwebe- oder Klickstatus aller Instanzen zu aktualisieren.

Während es verlockend sein kann, direkt einzusteigen und mit der Iteration von Main Components zu beginnen, treten manchmal unerwartete Probleme aufgrund der Unterschiede im Verhalten von übergeordneten und untergeordneten Komponenten auf.

Eine bewährte Vorgehensweise besteht darin, alles Erforderliche im Standardzustand der Hauptkomponente zu berücksichtigen und vorwegzunehmen, bevor andere Zustände hinzugefügt oder die Komponente instanziiert werden – es geht sogar so weit, die verschiedenen Zustände nebeneinander anzuordnen.

Designer sollten auch bedenken, dass sie Elemente in Nicht-Standardzuständen der Hauptkomponente oder untergeordneten Instanzen hinzufügen und ändern können, ohne den Standardzustand zu beeinflussen, aber das Gegenteil gilt nicht.

Eine Empfehlung für Adobe : Geben Sie Komponentenzuständen eine Sperrfunktion, damit Designer Nicht-Standardzustände intakt halten und verhindern können, dass Änderungen am Standardzustand der Hauptkomponente weitergegeben werden.

Tipp Nr. 2 – Benennen Sie Komponenten bei der Erstellung

Beim Erstellen einer Komponente (Rechtsklick auf ein Element, dann „Komponente erstellen“ im Menü auswählen oder Cmd-K auf dem Mac/Strg-K auf dem PC drücken) wird die Komponente dem Bedienfeld „Elemente“ in der linken Seitenleiste hinzugefügt. XD gibt der Komponente den Standardnamen „Komponente XX“ (wobei „XX“ eine Zahl ist). Es ist nicht sehr aussagekräftig, daher wäre es am besten, ihm einen eindeutigen, durchsuchbaren Namen zu geben.

Warum tun? Wenn sich die Komponentenliste füllt, wird es unhandlich, wenn alle Komponenten mit demselben Standardnamen und einer bedeutungslosen Nummer beginnen. Während die Option „Kachelansicht“ hilfreich ist, enthält sie keine Textbeschriftungen, was die visuelle Identifizierung langsam und schwierig macht. Die „Listenansicht“ mit kleinen Thumbnails macht es zudem schwierig, Unterschiede zwischen Komponenten mit nicht entzifferbaren Namen zu erkennen. Komponenten können und werden verloren gehen. Wenn Sie sie durch Benennen durchsuchbar machen, sparen Sie später Zeit.

Eine Empfehlung für Adobe : Wenn Sie eine Komponente erstellen, wählen Sie sie automatisch aus und fokussieren Sie den Benutzer auf das Bedienfeld „Assets“ > „Komponenten“, um sie umzubenennen oder ein Benennungs-Popup aufzurufen. Es wäre auch hilfreich, diese Funktion in den Einstellungen umzuschalten.

Tipp Nr. 3 – Halten Sie die Hauptkomponenten organisiert

Beim Erstellen einer Komponente kann die Hauptkomponente leicht versehentlich auf einer Zeichenfläche platziert werden. Während XD Tools zum Auffinden von Hauptkomponenten bereitstellt (entweder durch Durchsuchen des Assets-Bedienfelds oder durch Rechtsklicken und Auswählen von „Hauptkomponente bearbeiten“ aus einer untergeordneten Instanz), ist es allzu einfach, unbeabsichtigte Änderungen an der Hauptkomponente vorzunehmen, während man glaubt, dass es sich um eine Instanz handelt. Dies kann zu vielen unerwünschten Änderungen auf mehreren Zeichenflächen führen.

Selbst wenn nur eine Handvoll Komponenteninstanzen auf einer Zeichenfläche vorhanden sind, können die Dinge schnell außer Kontrolle geraten, sobald eine Zeichenfläche geklont wurde. Eine versehentliche Änderung der Hauptkomponente kann zu einer vermeidbaren Reinigungszeit führen.

Es ist am besten, sich daran zu gewöhnen, Hauptkomponenten sofort nach der Erstellung von den Design-Zeichenflächen wegzubewegen . Ein idealer Weg, dies zu tun, wäre, Hauptkomponenten auf der Zwischenablage in der XD-Datei oder auf klar beschrifteten, dedizierten Zeichenflächen zu platzieren. Das macht die Dinge später effizienter.

Eine Empfehlung für Adobe : Erwägen Sie eine Eingabeaufforderung, wenn Sie Änderungen an der Hauptkomponente vornehmen, damit Designer gewarnt werden, dass die Änderungen möglicherweise auf untergeordnete Instanzen übertragen werden.

Tipp Nr. 4 – Bleiben Sie mit dem Ebenenbedienfeld organisiert

Es ist einfach, Ideen auf der Zeichenfläche auszuprobieren und in den Fluss des Gruppierens/Aufhebens der Gruppierung von Komponenten und des Änderns der Eigenschaften von Komponentenzuständen einzusteigen. Es könnte eine starke Versuchung bestehen, die linke Seitenleiste zu minimieren, um mehr Arbeitsfläche zu haben. Es besteht jedoch eine gute Chance, dass sich Komponentenzustände und -übergänge in der Flut von Iterationen nicht wie erwartet verhalten. Dies kann auftreten, weil die Organisation und Gruppierung von Unterelementen (z. B. Formen, Vektoren oder Text) von dem abgewichen ist, was erforderlich ist, damit die Übergänge richtig funktionieren.

Die Ebenenansicht bietet 100 % Transparenz in der Hierarchie und Benennung von Elementen, und ihre luftdichte Organisation ist von entscheidender Bedeutung. Wenn Sie den leistungsstarken Übergang zwischen Zuständen automatisch animieren von XD verwenden, müssen Elemente denselben Namen und dieselbe Position in der Ebenenhierarchie einer Komponente haben. Andernfalls wird der Übergang standardmäßig zu einer Überblendung anstelle einer ansprechenden Auto-Animation.

Manchmal kann es wünschenswert sein, eine Eigenschaft von der Interpolation zu unterdrücken, wenn die automatische Animation übergeht. Um dies zu erreichen, können Designer ein Element in einem anderen Komponentenstatus oder einer anderen Zeichenfläche umbenennen, um die namensbasierte Verknüpfung aufzuheben.

In beiden Fällen kann die Ebenenansicht zur Fehlerbehebung verwendet werden, wenn unerwartete Probleme auftreten . Dies sollte der erste Schritt beim Debuggen von Prototyping-Problemen sein, unabhängig davon, ob es sich um einen Übergang zwischen Komponentenzuständen oder zwischen Zeichenflächen handelt.

Tipp Nr. 5 – Verwenden Sie Alpha-Fading, um Farben zu interpolieren

Auto-Animate ist eine hervorragende Ergänzung zu XD, weist jedoch Einschränkungen und Eigenheiten auf. Eine dieser Macken wird offensichtlich, wenn die Farbe eines Elements zwischen zwei Komponentenzuständen oder Zeichenflächen mit Auto-Animate geändert wird. Anstelle einer sanften Interpolation zwischen den beiden Farben ändert es sich beim Testen abrupt.

Die aktuelle Problemumgehung ist etwas umständlich und hat Auswirkungen darauf, wie Hauptkomponentenzustände organisiert werden sollten. Dabei werden zwei Objekte mit unterschiedlichen Farben anstelle von einem hinzugefügt und dann die Alphas auf den beiden Objekten in beiden Zuständen überblendet, um einen reibungslosen Übergang zu erzielen. Der standardmäßige Fade-Übergang funktioniert möglicherweise, aber wenn Formen und Größen mit Auto-Animate interpoliert werden, reicht ein Fade möglicherweise nicht aus.

Tipp Nr. 6 – Nutzen Sie Komponenten in einem Wiederholungsraster

Das Wiederholungsraster ist eine weitere hervorragende zeitsparende Funktion in XD , die es einfach macht, Arrays ähnlicher Elemente zu organisieren und zu verwalten. Wie Komponenten haben Wiederholungsraster eine hierarchische Beziehung, bei der das erste Element in der linken oberen Ecke des Rasters das „Elternelement“ ist, das Eigenschaften für die „Kind“-Elemente definiert. (Davon gibt es Ausnahmen: Bitmaps können für ein untergeordnetes Element eindeutig sein, ebenso wie Textzeichenfolgen, aber keine Texteigenschaften.)

Bei der Verwendung von Komponenten innerhalb von Repeat Grids ändern sich die Dinge jedoch.

Wenn Sie normal mit Wiederholungsrastern arbeiten, werden Änderungen, die am übergeordneten Element vorgenommen werden, sofort an die untergeordneten Elemente weitergegeben. Änderungen an der Hauptkomponente werden jedoch nur dann an die untergeordneten Elemente in einem Wiederholungsraster weitergegeben, wenn keine lokalen Eigenschaftsüberschreibungen vorhanden sind . Mit anderen Worten, das Ändern der Eigenschaft einer Komponente im Raster „sperrt“ sie vor Änderungen, die von der Hauptkomponente ausgehen.

Um Änderungen von einem übergeordneten Element, das auch eine Komponente in einem Wiederholungsraster ist, weiterzugeben, ändern Sie die Größe des Rasters nur auf das übergeordnete Element. Dadurch werden seine Kinder entfernt. Ziehen Sie dann die Griffe wieder auf die gewünschten Abmessungen, um die untergeordneten Elemente zu aktualisieren.

Sobald Designer die Besonderheiten von Komponenten und Wiederholungsrastern umgehen können, kann das Kombinieren dieser leistungsstark sein.

Tipp Nr. 7 – Gehen Sie davon aus, dass zeitbasierte Komponentenzustandsübergänge (vorerst) nicht existieren

Beim Anwenden von Übergängen zwischen Zeichenflächen mit zeitbasierten Verzögerungen (nicht basierend auf Eingaben) ist es selbstverständlich anzunehmen, dass dies auch zwischen Komponentenzuständen möglich ist. Leider ist dies nicht der Fall. Alle komponentenbasierten Zustandsänderungen müssen auf Benutzereingaben oder Interaktionen im Prototypmodus basieren, nicht auf Zeit.

Eine Empfehlung für Adobe: Fügen Sie Komponenten eine zeitbasierte Übergangsoption hinzu, damit ihre Zustände unabhängig von Benutzereingaben animiert werden können.

Tipp Nr. 8 – Seien Sie beim Klonen von Hauptkomponentenhierarchien gründlich

Dieser letzte Tipp ist eher ein Grenzfall, auf den XD-Designer vielleicht nicht oft stoßen, dem sie sich aber bewusst sein sollten .

Nehmen wir ein Szenario an, in dem die Hauptkomponente eine Variation benötigt, die immer noch die „Eins-zu-viele“-Qualität von untergeordneten Eigenschaften beibehält, aber keine vorhandenen untergeordneten Komponenten beeinflusst. Um eine neue übergeordnete Komponentenhierarchie zu erstellen, muss eine instanziierte Komponente entgruppiert und von Grund auf neu erstellt werden. Beim Aufheben der Gruppierung von Komponenten gehen auch alle Zustände und Übergangseigenschaften verloren, die im Prototypmodus eingerichtet wurden. Hier ist eine Problemumgehung:

• Klonen Sie eine Instanz der Komponente für jeden Status in der Komponente.
• Legen Sie den Status jeder Instanz auf einen anderen Status fest.
• Gehen Sie jede Komponenteninstanz durch und heben Sie die Gruppierung auf.
• Beginnen Sie mit den gewünschten Optimierungen und Änderungen an jeder Komponenteninstanz.
• Erstellen Sie die neue Hauptkomponente neu.
• Wechseln Sie in den Prototypenmodus und erstellen Sie die zuvor eingerichteten Interaktionen und Übergangstypen neu.

Eine Empfehlung für Adobe: Wenn Sie im Bedienfeld „Elemente“ mit der rechten Maustaste auf die Hauptkomponente klicken, stellen Sie eine Menüoption „Duplizieren“ bereit.

Prototyping mit Adobe XD-Komponenten: Erfolgsrezepte

Adobe XD hat in den letzten Jahren erhebliche Verbesserungen in Bezug auf Funktionalität und Nützlichkeit vorgenommen. Es hat sich zu einer würdigen, wettbewerbsfähigen Alternative zu Sketch und anderen etablierten Prototyping-Tools entwickelt. Basierend darauf, wie sich das Tool seit seiner Einführung entwickelt hat, sind wahrscheinlich noch viele weitere Verbesserungen auf dem Weg.

Insbesondere das Adobe XD-Komponentensystem hat ein hervorragendes Potenzial zur Verbesserung und Erweiterung der Arten von Interaktionen, die Designer erstellen können.

Hier sind einige wichtige Punkte, die Sie beachten sollten:

• Verstehen Sie, wie Änderungen zwischen Hauptkomponenten und untergeordneten Instanzen weitergegeben werden.
• Achten Sie darauf, wie Komponenten mit den anderen Funktionen von Adobe XD interagieren, z. B. Auto-Animate und Repeat Grid.
• Bemühen Sie sich um konsistente Workflow-Praktiken, um Zeit zu sparen, wie z. B. das Benennen von Komponenten und das Beibehalten eines separaten Zwischenablagebereichs für Hauptkomponenten in der XD-Datei.

Wenn Sie sich der Eigenheiten der Arbeit mit Adobe XD-Komponenten bewusst sind und gleichzeitig einen disziplinierten Arbeitsablauf beibehalten, maximieren Sie die Designproduktivität. Es vermeidet unnötige Reinigung und Wartung und verschafft XD-Designern einen Effizienzvorteil beim Prototyping digitaler Produkte.

Lassen Sie uns wissen, was Sie denken! Bitte hinterlassen Sie unten Ihre Gedanken, Kommentare und Ihr Feedback.

• • •

Weiterführende Literatur im Toptal Design Blog:

• Adobe XD vs. Sketch – Showdown 2020
• Design mit Präzision – Ein Adobe XD Review
• Exploring Multimodal Design – Ein Adobe XD-Tutorial
• UX-Mythen – Prototyping, Benutzertests und UX-Ergebnisse
• Perfektionieren Sie Ihren UX-Designprozess – Ein Leitfaden für das Prototypendesign