Tipps zum Prototyping in XD
Von Jonas Wir fassen hier zusammen, welche Fragen uns zum Prototyping in XD am häufigsten gestellt werden.
Animation nicht auswählbar
Wenn in Adobe XD der Animationstyp von einer Zeichenfläche zu einer anderen nicht auswählbar ist, sondern ausgegraut auf der Einstellung »Ausblenden« steht, stimmen die Größen der Viewports bzw. Zeichenflächen nicht überein. Adobe XD kann Übergange nur animieren, wenn der Viewport der Start- und Ziel-Zeichenfläche identisch ist.
Mehrere Trigger
Es ist möglich mehrere Trigger gleichzeitig zu nutzen. Beispielsweise soll der Prototyp per Klick und per Tastatur steuerbar sein. Um einen zweiten Trigger hinzuzufügen, klickt auf die blaue Prototyping-Linie des 1. Triggers und fügt einen zweiten hinzu. Im Eigenschaften-Inspektor rechts, stehen dann die verschiedenen Trigger zur Auswahl.
Auto-Animationen
Mit Auto-Animationen können Veränderungen an Objekten zwischen zwei Zeichenflächen animiert werden. Folgende Fehler führend dazu, dass Auto-Animate nicht bzw. nicht gut funktioniert:
- Wenn ein Objekt nicht auf allen an der Animation beteiligten Zeichenflächen vorhanden ist, entsteht häufig ein unerwünschter Effekt. XD kann nur dann eine saubere Animation erstellen, wenn Start- und Endzustand des Objekts definiert sind. Wenn Elemente also aufgefahren oder eingeblendet werden sollen, kann es helfen die Deckkraft auf 0% zu reduzieren bzw. in Höhe oder Breite auf 1px zu reduzieren und die Farbe anzupassen. Das Element wird somit im Ursprungszustand optisch unsichtbar – ist aber technisch auf der Zeichenfläche vorhanden.
- Die Ebenennamen aller an Auto-Animate beteiligten Objekte müssen in allen an der Animation beteiligten Zeichenflächen identisch sein.
- Es ist nicht möglich Objekte unterschiedlicher Art in einander zu überführen. Ein Dreieck kann beispielsweise nicht – ohne Anpassung – in einen Kreis überführt werden. Es hilft, beide Objekte in einen Pfad zu konvertieren.
- Pfade müssen in allen an der Animation beteiligten Zeichenflächen die identische Anzahl an Pfadpunkten besitzen.
Zeitgesteuerte Übergänge
Zeitgesteuerte Überhänge beginnen selbstständig nach einer festgelegten Wartezeit. Der Trigger »Zeitgesteuert« steht nur zur Verfügung, wenn die gesamte Zeichenfläche markiert wurde. Zeitgesteuerte Übergange für Einzelelemente stehen nicht zur Verfügung.
Overlays im Prototyp positionieren
Im Prototyping-Modus kann nicht nur von einer Zeichenfläche zu einer anderen navigiert werden – eine Zeichenfläche kann auch als Overlay verwendet werden. Wenn das Overlay kleiner ist als die Zeichenfläche vor der es positioniert werden soll, kann es über die grünen Anfasser positioniert werden.
Zur »vorherigen Seite« im Prototyp verlinken
In vielen Prototypen kommt es vor, dass ein gestalteter Screen von mehreren Ausgangspunkten aus erreichbar ist. Es wäre beispielsweise denkbar in einem Online-Shop von verschiedenen Unterseiten aus den Warenkorb zu betreten. Wenn man nun den Warenkorb wieder schließt, möchte man voraussichtlich zu der Seite zurückkehren von der aus man den Warenkorb geöffnet hat. Der Schließen-Button des Warenkorbs muss dazu in Adobe XD mit der »vorherigen Seite« verlinkt werden. Eine manuelle Verlinkung mit einer bestimmten Zeichenfläche führt hier nicht zum Erfolg.
Bitte beachtet, dass die Verlinkung zur »vorherigen Seite« in der Adobe XD-Vorschau nicht funktionieren kann, wenn zuvor keine Seite besucht wurde.
Startseite für einen Flow festlegen
Wenn die Vorschau gestartet wird, beginnt die Präsentation mit dem Screen, der als Startpunkt festgelegt wurde. Im Prototyping-Modus kann über das Haus-Icon oben links an der Zeichenfläche der Startpunkt eines Flows bestimmt werden. Ein Flow ist eine zusammenhängende Bewegung im Prototypen.
Der Flow kann anschließend per Doppelklick auf den Namen benannt werden. Im Modus »Freigeben« können die verschiedene Flows ausgewählt und einzeln als Link geteilt werden.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
