Adobe XD lernen

Interaktion im Prototyp-Modus erzeugen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video erfahren Sie, wie beliebige Objekte einer Zeichenfläche als Navigationsobjekte eingesetzt werden können und wie diese Verbindungen konfiguriert werden. Ebenso geht der Trainer auf die Bedeutung der Startseite bzw. der "Home-Zeichenfläche" ein.

Transkript

Haben wir bereits mit dem Wiederholungsraster erste Interaktionen bauen können, so geht es in diesem Video darum, die einzelnen Navigationsobjekte des Designs mit Leben zu füllen. Die Auswahl, welche Schaltfläche oder welches Objekt mit einer Aktion verbunden werden soll, ist maßgeblich entscheidend für das spätere Gefühl der Usability, also der Benutzerfreundlichkeit und Bedienbarkeit der App. Um mit der Zuweisung von Aktionen zu beginnen, müssen Sie von der Design-Ansicht in die Prototyp-Ansicht wechseln. Das finden wir hier links oben am oberen Fensterrand. Wenn wir diese Auswahl tätigen, dann fällt auf, dass die Werkzeugleiste verschwindet, mit Ausnahme des Auswahlwerkzeuges, und auf der rechten Seite die Werkzeugpaletten. Gleichzeitig taucht hier an einer Zeichenfläche so eine blaue Nase auf und die schauen wir uns mal genauer an. Scrollen wir mal hinein. Diese blaue Nase, die hat so ein weißes Häuschen. Und die Symbolik deutet schon darauf hin, dass es sich hier um die Home-Zeichenfläche handelt, um die Start-Zeichenfläche. Aktivieren Sie eine weitere Zeichenfläche, sehen Sie, dass jede dieser anderen Zeichenflächen zwar ausgegraut ist, aber auch diese Option erhalten kann. Sobald ich diese Option bei einer zweiten Zeichenfläche auswähle, verschwindet die Zuordnung von der zuvor eingestellten, was auch logisch ist, weil eine Startseite gibt es halt nur einmal. Es können nicht zwei oder drei Seiten Startseiten sein. So, ich stelle das wieder auf den Welcome-Screen zurück. Die Auswahl, welche Seite die Startseite ist, ist schon wichtig für das Navigationskonzept und auch natürlich für den Einstieg, wenn die Applikation gestartet wird etc. Wir wollen ja weitere Objekte mit Interaktionen belegen oder für Interaktionen aktivieren. Und mein Navigationskonzept sieht vor, dass ich hier ganz übersichtlich drei einzelne Schaltflächen am unteren Bereich der Applikation habe. Und die erste Verbindung, die ich aufbauen muss, ist hier zu dieser Registrierungsinformation. Und das Ganze soll über diesen Schraubenschlüssel stattfinden. Das sind die Informationen über die Rallye-Strecken und das logischerweise die Informationen über die Fahrzeuge. Es ist allerdings, wenn ich nun ein Objekt auswähle, so, dass hier eine blaue Nase entsteht mit einem weißen Pfeil. Und wenn Sie ein anderes Objekt auswählen, egal, was das ist, ob das Text ist, ob das Flächen sind, Grafiken sind, ich gehe jetzt mal hier hin, da sieht man z. B. Text. Sie können jedes beliebige Objekt aktivieren, sogar hier so eine Hintergrundgrafik. Dem Programm selber, Adobe XD, ist das egal. Allerdings muss einem bewusst sein, dass ja der Benutzer später auch erkennen muss, hier habe ich einen Button, hier klicke ich drauf. Es mag sicherlich sein, dass ich vielleicht mal auf die Idee komme, auch hier auf eine Grafik zu klicken. Aber ich käme ganz bestimmt nicht auf die Idee, hier auf den Text zu klicken z. B. Wir starten diese Verbindung tatsächlich über diesen Schraubenschlüssel. Und ich klicke jetzt nur einmal auf diese blaue Fahne mit dem weißen Pfeil. Einmal drauf klicken und dann öffnet sich ein Dialog. Und hier habe ich die Möglichkeit, Ziel, Übergang und Easing, das finde ich auch witzig, zwei deutsche und einen englischen Begriff, sowie die Dauer einzustellen. Ja, das Ziel, glaube ich, erklärt sich von selbst. Wenn Sie hier drauf klicken, öffnet sich eine Liste mit allen verfügbaren Zeichenflächen. Da wird auch nochmal deutlich, wie wichtig das ist, dass man die korrekt benannt hat, denn wenn die Liste mal größer ist, sind Sie dankbar, dass es wirklich eindeutig beschrieben ist. Man kann das auch mit Nummern etc. beschreiben, also die Möglichkeiten, die haben Sie. So, ich möchte das Ganze tatsächlich hier von dort ausgehend verbinden mit der Registrierungsinformation, also der im ersten Einstieg. Und im Hintergrund sehen Sie, öffnet sich bereits diese Linie oder verbinden sich diese beiden Fenster miteinander und signalisieren, dass es hier einen Übergang geben wird. So, und genau diesen Übergang, den kann ich nun noch definieren, nämlich einmal komplett ohne Effekt oder mit ausblenden und verschiedenen Bewegungsoptionen, also nach links, nach rechts, nach oben, nach unten. Was ich jetzt erreichen möchte, ist, ich wähle "Nach links hineinbewegen" aus und das bedeutet, ausgehend von dieser Zeichenfläche wird sich die nächste verbundene Zeichenfläche nach links, also von hier aus kommend nach links hineinbewegen. So ist das gemeint. Das macht sicherlich Sinn, wenn man sich das so von der Navigation her vorstellt. Ich klicke drauf und dann kommt von rechts etwas nach links hinein. Und ja, für mich ist das so von einem Blättern-Effekt auch schon sehr gut nachvollziehbar. Dann haben wir das Easing. Und das Easing ist eine Art, ich sage mal, Dämpfungs- oder Beschleunigungseinstellung, wenn man so will. "Ease-in" bedeutet, dass es langsam losgeht und schnell endet, und entsprechend analog dazu das "Ease-out". Ich finde genau diese Ease-in-Geschichte sehr interessant, weil so bekomme ich auch mit: "ah, Moment es tut sich was" und es geht dann aber schnell aus. Das Ganze kann ich auch mit "Ease-in-out" machen. Das bedeutet, es startet langsam, geht dann vom Effekt her schnell weiter und stoppt aber auch wieder langsam. Wie auch immer, probieren Sie die Einstellungen einfach mal aus. Dann haben wir hier die Dauer. Und die Dauer kann ich einstellen. Ich nehme jetzt hier tatsächlich mal 1 Sekunde. Für die Praxis später würde ich das aber wahrscheinlich nicht so lange einstellen, denn hier geht es ja um einen Effekt. Und gerade bei einer Navigation, wenn ich irgendwo drauf klicke, möchte ich eigentlich, dass das zügig ausgeführt wird. Wenn ich da jedes Mal Kaffee trinken gehen kann, wenn ich beim Blättern warten muss, dann wird das einfach nur störend. Und hier muss man auch am besten auf dem Device selber später ausprobieren, welchen Zeitraum welchen Effekt am besten auch rüberkommen lässt. Ich lasse das jetzt hier zur Verdeutlichung mal auf 1 Sekunde stehen. So, und damit haben wir die erste Verbindung hergestellt von dieser Schaltfläche auf die zweite Zeichenfläche. Von hier oben links aus kann ich auch wieder zurückgehen und damit zeige ich Ihnen die zweite Möglichkeit. Ich kann also hier drauf klicken und dann anstatt nun hier einfach eine Zeichenfläche auszuwählen, kann ich auch die vorherige Zeichenfläche auswählen. So, und das ist natürlich besonders interessant, wenn ich eine chronologische Verbindungsreihenfolge habe. Dann brauche ich da nicht mehr großartig nochmal was zu definieren, sondern ich sage einfach, "Vorherige Zeichenfläche auswählen". Das wäre denkbar. Ich möchte das aber optisch sehen, ich mache das jetzt mal, denn wenn man das auswählt, dann sieht man, dass so ein kleines Symbol definiert wird. Und das möchte ich vermeiden, denn ich möchte wirklich die Verbindung sehen und ich möchte vor allen Dingen diese Einstellungen definieren können. Wenn ich nun sage, das Ganze beim ersten Klick soll sich nach links hineinbewegen, macht es jetzt sicherlich Sinn, wenn ich wieder zurückgehe, dass das Ganze nach rechts raus geht. Das, finde ich, hat einen ganz netten Effekt. Ease-in lasse ich stehen und auch auf 1 Sekunde. Ja, und jetzt haben wir den ersten Kreislauf. Man sieht, ich komme von hier aus dorthin und von hier aus oben wieder zurück zu der ersten Seite. Vielleicht noch ein kleiner Hinweis zur Auswahl meiner Schaltfläche. Ich habe ja hier so einen kleinen, grünen Kreis. Natürlich kann ich auch den wählen. Das ist jederzeit möglich, Sie sehen das. Ich könnte jetzt auch beide wählen, um ganz sicher zu sein, ist aber nicht relevant, weil ich habe mich jetzt einfach für die größere Fläche entschieden im Untergrund, weil man die einfach besser mit dem Daumen trifft. Je kleiner die Auswahl ist, desto genauer müssen Sie mit dem Finger da drauf, und das kann gerade bei der Demo manchmal nicht so gut ausgehen. Schauen wir uns nun diese Verbindung an, inklusive der Animation, indem ich die Desktop-Vorschau starte. Das finde ich hier rechts oben. Ich klicke drauf, so. Und ja, die erste Verbindung, das sehe ich, wenn ich hier mit der Maus drüber streiche. Hier ist alles noch inaktiv, außer der Schraubenschüssel. Sie sehen, da haben wir die Hand, den Finger von der Maus, und wenn ich nun hier drauf klicke, dann kommt es von links rein, startet langsam, endet schnell. Und dieser Prozess dauert genau 1 Sekunde. Und genau hier, Sie sehen, kann ich auch wieder zurück, nur dass es jetzt genau andersrum passiert. Das ist für mich durchaus auch von der Animation her eine logische Reihenfolge, die ganz klar signalisiert, wohin ich mich bewege und woher ich komme. Also, ich finde es ganz passend. Das einzige, was ich nun gerade auf die Schnelle noch ändere, ist die Geschwindigkeit, weil das ist mir wirklich zu lange. Ich glaube, das ist ganz angenehm, so. Macht einen netten Effekt und damit bin ich zufrieden. Und somit wissen Sie nun, wie Sie beliebige Objekte in Ihrem Mock-up mit Aktionen belegen können oder, anders ausgedrückt, wie Sie beliebige Zeichenflächen miteinander in Verbindung bringen können.

Adobe XD lernen

Lernen Sie die Funktionen des Adobe Experience Design, kurz Adobe XD, anhand eines kompletten Praxisworkshops.

3 Std. 20 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Exklusiv für Abo-Kunden
Erscheinungsdatum:31.01.2017
Aktualisiert am:17.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!