Adobe XD für Fortgeschrittene: Prototyping

Name: Adobe XD für Fortgeschrittene: Prototyping
Author: Jessica Henley

Erlernen von ZwischenFähigkeiten für das Prototyping wie Verdrahtung, Auto-Animation und Komponentenzustand

Preview the first lesson free — get full access to all 7 lessons.

Kurs: On-Demand

Hallo, mein Name ist Jessica Henley. Und in dieser Lektion zeige ich Ihnen, wie man einen verkabelt und testet Prototyp. Als Erstes klicke ich einfach mit der rechten Maustaste auf dieses Grün Zeichenfläche. Und was ich tun möchte, ist, „Kopieren, rechts“ auszuwählen Klicken Sie irgendwo außerhalb und fügen Sie ein. Jetzt werde ich es einfach verschieben. Als nächstes wähle ich einfach alle auf diesem dritten Whiteboard aus und tippe auf meiner Tastatur auf „Löschen“, weil ich neu beginnen möchte über. Ich habe es einfach dupliziert, damit die Zeichenfläche die gleiche Größe hat wie der vorherige Bildschirm. Jetzt wähle ich das Rechteck aus oder Sie können darauf tippen Buchstabe R für eine Abkürzung. Klicken und ziehen Sie das Rechteck, um das Ganze abzudecken Dritte Zeichenfläche und Auswahl einer Farbe, die bereits in meiner ist Farbmuster. Hier kann ich durch Erscheinen und Ändern eine Designänderung vornehmen die Farbe, die die Füllung ist. Oder ich klicke mit der rechten Maustaste darauf und gehe zu „Bearbeiten“. Und hier unter Bearbeiten kann ich einfach klicken und ziehen, um das auszuwählen gewünschte Farbe. Ich werde einfach weitermachen und zum Rechteck-Werkzeug wechseln. Also Rechteck, Sie können auch auf den Buchstaben R tippen. Und klicken und ziehen, und ich werde es einfach ausrichten beide Seiten. Wir werden gleich ein Raster erstellen. Jetzt habe ich ein paar Bilder von der Unterseite dieser Blumen. Ich habe diese Bilder gemacht, und das sind ein paar Blumen das ich hatte. Und eine meiner Lieblingsblumen ist dieses Bild, das ich gemacht habe. Also werde ich es einfach duplizieren. Sie können auf Strg oder Befehl D tippen, um duplizieren, oder Sie können mit der rechten Maustaste darauf klicken und es kopieren und dann einfügen. Ich werde es einfügen, weil ich diese verwenden werde Blumen mehrmals auf verschiedenen Zeichenflächen. Als nächstes werde ich einfach weitermachen und das hier hochziehen, Ändern Sie aber auch die Größe, damit es in dieses weiße Rechteck passt. Sobald das drin sitzt, gehe ich zu Text, oder Sie können es tun Tippen Sie auf den Buchstaben T, um eine Verknüpfung aufzurufen. Jetzt werde ich einfach oben auf dieser Zeichenfläche etwas eingeben. Hier werde ich einfach den Titel als Platzhalter einfügen. Und ich werde einen meiner Charakterstile auswählen, aber das ist es viel zu klein. Also gehe ich zur rechten Seite und ändere es. Jetzt werde ich einfach eine andere Nummer testen. Hier unter Text werde ich 50 eingeben, und mit dem Auswahlwerkzeug werde ich es einfach ausrichten. Ich werde auch auf das Pluszeichen klicken, um es zu meinem hinzuzufügen Zeichenstile. Auch für den Titel werde ich weitermachen und mit tippen das Textwerkzeug. Und für das Innere dieser Box nenne ich es einfach Information als Platzhalter, kurz Info. Hier habe ich 35, aber lass es mich mit 38 versuchen und 40. Ich versuche herauszufinden, welches ich behalten möchte. Das sind also 32, und ich kann einfach klicken und ziehen und das auch zu meinem hinzufügen Zeichenstil für den Fall, dass ich ihn in Zukunft verwenden möchte. Ich habe also 32 als Schriftart, und ich kann einfach die Umschalttaste gedrückt halten, um eine Mehrfachauswahl durchzuführen. Sobald alle drei Elemente ausgewählt sind, kann ich auf Wiederholen klicken Netz. Jetzt klicke ich einfach und ziehe nach unten. Jetzt können Sie auch im Bild ein sich wiederholendes Informationsraster sehen wie das lange weiße Rechteck. Ich mache einen Rechtsklick und gehe zu „Bild ersetzen“. Im Ordner „Blumen“ werde ich ein neues Blumenbild auswählen. Sie können sehen, dass es sich ändert, und ich mache einfach weiter, bis ich ganz nach unten kommen. Rechtsklick, Gehen Sie nach unten zu „Bild ersetzen“, wähle eine andere Blume, Drücken Sie Importieren. Also klicke ich mit der rechten Maustaste darauf und wähle „Bild ersetzen“. und klicken Sie auf Importieren. Jetzt habe ich also vier verschiedene Blumenbilder. Auf diesem Whiteboard werde ich Folgendes abschreiben: Klicken Sie mit der rechten Maustaste und fügen Sie es erneut ein. Ziehen Sie es dann einfach über die Seite Abstand. Und wieder alles auswählen und löschen. Nach dem Löschen ist es an der Zeit, mit der Erstellung fortzufahren das nächste Whiteboard. Klicken Sie mit der rechten Maustaste, kopieren Sie das gleiche Bild und fügen Sie es ein. Und ich werde es in dieser Zeichenfläche hervorheben Dieses Foto. Wenn der Titel ausgewählt ist, klicke ich einfach mit der rechten Maustaste und Kopieren Sie es, fügen Sie es ein und ziehen Sie es weiter. Ich kann sehen, welche Zeichenfläche ausgewählt ist, indem ich oben klicke. Anstatt die Informationen zu kopieren, muss ich jetzt einfach weitermachen und tippe das von Grund auf neu, denn wenn ich versuche, es zu duplizieren vom Gitter, Ich werde vier Infotexte haben. Ich möchte nicht vier, ich möchte nur eine Information zu diesem speziellen Thema Zeichenfläche, an der ich gerade arbeite. Jetzt füge ich nur noch ein paar gestrichelte Linien für vorgetäuschten Text hinzu. Und natürlich werde ich die Größe ändern, sobald ich fertig bin. Also tippe das einfach dort ein. Jetzt muss ich es nur noch auswählen und eine andere Schriftart auswählen. Und ich werde einfach Schwarz wählen, und versuche herauszufinden, ob mir das gefällt. Und während ich weitermache und es etwas mehr zentriere, Na, bitte. Als nächstes werde ich also einfach schleppen über diese Zeichenfläche ein wenig, und ich werde zu wechseln Prototyp. Wenn ich auf diese Zeichenfläche klicke, möchte ich sie verbinden, aber das gelingt nicht Sie möchten die gesamte Zeichenfläche auswählen. weil wir wollen, dass es dort ist, wo wir das erste Gitter auswählen, Es sollte eigentlich zur nächsten Zeichenfläche gehen, denn das sieht man die Blumen passen dazu. Also klicke und ziehe ich einfach, um es zu verbinden. Man merkt, dass es verbunden ist, und zwar die Verbindung ist auf Tippen eingestellt. Und ich werde weitermachen und dafür sorgen, dass sich das auflöst. Hier wähle ich einfach die letzte Zeichenfläche aus und verbinde sie auch zusammen. Da sieht man den Zusammenhang. Es gibt zwei Drähte, die miteinander verbunden sind. Jetzt ist es an der Zeit, es auszuprobieren. Wenn ich oben rechts auf den Play-Button klicke, Ich tippe einfach. Aber hier möchte ich eigentlich nicht anfangen. Es sieht so aus, als ob dies nicht verbunden ist, also muss ich zurückgehen und verbinde sie miteinander. Also gut, versuchen wir es noch einmal. Und ich tippe erneut, es funktioniert. Klicken Sie auf Info, Info, Info. Sie können sehen, dass dort eine kleine Hand ist. Wenn ich auf die erste klicke, kann ich sehen, dass die Seite vorhanden ist Arbeiten. In der nächsten Lektion zeige ich Ihnen, wie Sie Designänderungen vornehmen und Fehler beheben. Danke fürs zuschauen.

Mittelstufe Anbieter : Jessica Henley 7 Lektionen · 43m auf Arabisch, Deutsch, Englisch, Spanisch, Französisch, Portugiesisch, Chinese

Kursbeschreibung

Das Prototyping in Adobe XD gibt Ihnen einen Einblick in die Ausführung Ihres Designs, und diese Lektionen vermitteln Ihnen die wesentlichen Fähigkeiten, die Sie benötigen, um Ihr Projekt auf die nächste Stufe zu bringen. Eine Möglichkeit, dies zu tun, besteht darin, mehrere Bildlaufraster in verschiedene Anwendungen einzubauen, um den Benutzer auf verschiedene Bildschirme zu bringen. Eine andere Idee ist die Verwendung von Auto-Animation, um von einem Bildschirm zum anderen zu gelangen. Es gibt eine Vielzahl von Auslösern und Aktionen, die Sie für die automatische Animation einrichten können. Sorgen Sie für Ordnung und vermeiden Sie Fehler, indem Sie die Farben Ihrer Assets und Zeichenstile umbenennen, damit sie leichter zu finden sind, und stellen Sie sicher, dass die Objekte richtig geschichtet sind, um unerwartete Ergebnisse zu vermeiden.

In diesen Adobe XD Lektionen lernen Sie, wie Sie Verbindungen zwischen verschiedenen Bildschirmen herstellen, einen Prototyp testen, Designänderungen vornehmen und Fehler beheben. Sie lernen, wie man automatisch animiert, Auslöser und Aktionen festlegt und Entspannungen einstellt. In diesen Lektionen wird auch besprochen, wie man Komponentenzustände, Überlagerungen und Audio erstellt.

Was Sie lernen werden

Auto-Animate-Effekte nutzen, um von einem Bildschirm zu einem anderen zu wechseln
Die für Auto-Animation verfügbaren Trigger und Aktionen identifizieren
Mehrere ScrollGitter verwenden, um Benutzer auf verschiedene Bildschirme zu führen
Verkabelung zwischen Bildschirmen erstellen, einen Prototyp testen und Fehler beheben
Komponentenzustände, Overlays und Audio erstellen
Eases festlegen und Farben und Zeichensätze von Assets umbenennen, um organisiert zu bleiben

Wichtige Erkenntnisse

Prototyping in Adobe XD bietet Einblick in die Ausführung eines Designs und die Fähigkeiten, ein Projekt voranzubringen.
Mehrere ScrollGitter können in Anwendungen eingebunden werden, um den Benutzer auf verschiedene Bildschirme zu führen.
Auto-Animation von Übergängen zwischen Bildschirmen unterstützt verschiedene Trigger und Aktionen, die Sie einrichten können.
Das Umbenennen von Farben und Zeichensätzen von Assets macht sie leichter zu finden, und ordnungsgemäße Objektebenenierung hilft, unerwartete Ergebnisse zu vermeiden.
Die Lektionen behandeln die Verkabelung von Bildschirmen, das Testen von Prototypen, Designänderungen, Fehlerbehandlung und die Erstellung von Komponentenzuständen, Overlays und Audio.

Häufig gestellte Fragen

Was werde ich in diesem Adobe XD-Kurs lernen?

Sie lernen, Auto-Animate-Effekte einzubeziehen, Trigger und Aktionen zu identifizieren, Unterschiede für Overlays zu verstehen und ScrollGitter zu nutzen. Die Lektionen behandeln auch die Verkabelung zwischen Bildschirmen, das Testen eines Prototyps, Designänderungen, Fehlerbehandlung, das Festlegen von Eases und die Erstellung von Komponentenzuständen, Overlays und Audio.

Auf welcher Stufe befindet sich dieser Kurs?

Dies ist ein Zwischenkurs für Adobe XD-Prototyping, konzipiert, um Ihr Projekt auf die nächste Stufe zu bringen.

Wie ist der Kurs strukturiert?

Der Kurs ist in sieben Lektionen organisiert: Verkabelung und Testen eines Prototyps; Designänderungen und Fehlerbehandlung vornehmen; Auto Animate; Trigger und Aktionen; Eases und Komponenten; Komponentenzustände und Overlays und Audio.

Welche Fähigkeiten behandelt dieser Kurs?

Er behandelt Adobe XD, Adobe Dimension, digitales Prototyping, Software-Prototyping und Prototyping-Fähigkeiten.