Präsentationsdesign mit Adobe Xd

1. Einführung Präsentationsdesign: Machen Sie immer noch Präsentationen in PowerPoint oder Keynote? Haben Sie jemals daran gedacht, Adobe XD Step zu verwenden? Ich bin Martin. Ich habe über 20 Jahre Erfahrung als Grafikdesigner, Illustrator und zertifizierter Instruktor von Adobe. Ich habe mit Unternehmen wie BBC zusammengearbeitet. Diese brauchen Google, ikea und ich kann es kaum erwarten, meine Best Practices mit Ihnen zu teilen. Dies ist ein optimierter praktischer Kurs, der auf ein reales Designprojekt konzentriert. Ich werde Sie Schritt für Schritt durch alles führen und Sie erhalten alle Übungsdateien, damit Sie mitverfolgen können , falls Sie es vorziehen, mich nicht zu kopieren. Sie können meinen Workflow auch mithilfe der bereitgestellten alternativen Assets verfolgen . Schaffen Sie etwas völlig Einzigartiges, das Sie in Ihrem kreativen Portfolio präsentieren können. Ich bin mir ziemlich sicher, dass dieser Kurs Sie dazu inspirieren wird , etwas Erstaunliches zu kreieren. Ich werde Sie durch meinen Prozess des Aufbaus einer interaktiven Präsentation führen, Adobe XD. Wir beginnen das Projekt, indem wir die Hauptnavigation, einige interaktive Komponenten erstellen und ihnen Tastenkombinationen zuweisen. Wir werden das Sticky-Menü auch mithilfe der Status - und Anker-Links der Komponente hinzufügen . Neben all den technischen Dingen werden wir auch einige wichtige Grafikdesigntheorie behandeln , die Sie in jedem Ihrer zukünftigen kreativen Projekte anwenden können . Sie können an diesem Kurs ohne Vorkenntnisse in Grafikdesign, Illustration oder Adobe-Anwendungen teilnehmen ohne Vorkenntnisse in Grafikdesign, . Um das Projekt abzuschließen, benötigen Sie jedoch Zugriff auf Adobe Creative Cloud und einen Desktop- oder Laptop-Computer, aber jetzt ist es an der Zeit, mit der Erstellung zu beginnen. Also sehe ich dich in der nächsten Lektion. 2. Hauptinteraktionen: Also hier sind wir in Adobe XD, und wie Sie sehen können, habe ich bereits ein paar Folien vorbereitet. Wir haben unsere Haupt-Startrutsche hier oben. Und dann haben wir diese drei zusätzlichen Folien unten. Aber zuerst bauen wir einfach die wichtigsten Interaktionen auf. Von dieser ersten Komponententententypografie möchte ich also auf diese nächste Art Board übergehen. Also benutze ich nur das kleine Pluszeichen und ziehe die Linie heraus. Übrigens bin ich im Prototyp-Modus. Dies ist der Zeitpunkt, an dem Sie diese Interaktionen einrichten können. Und ich benutze einfach den Trigger, um angezapft zu werden , und den Übergang kann ich später zu etwas anderem wechseln. Aber im Moment bin ich zufrieden mit der Art und Weise, wie es standardmäßig eingerichtet ist. Jetzt mache ich das Gleiche mit der Farbtheorie. Ich ziehe das hier hin und dann sollte die Komposition dorthin gehen. Beachten Sie nun, dass die Zusammensetzung etwas kleiner ist als diese anderen. Und das liegt daran, dass ich das noch nicht genau auf die gleiche Weise eingerichtet habe. Lassen Sie mich Ihnen also zuerst zeigen, wie das aussieht, wenn wir es testen. Um die Animation abzuspielen oder zu sehen, wie der Prototyp in Aktion funktioniert, ich die Befehlstaste oder die Eingabetaste. Das öffnet sich also diese Präsentationsansicht. Und hier kann ich Ihnen zeigen , dass diese beiden Elemente ich bereits als Komponenten mit Hover-Effekten erstellt habe. Und wie Sie sehen können, wurde bereits eine automatische Animation angewendet. Keine Sorge, denn ich zeige Ihnen auf diesem dritten Knopf genau, wie das geht. Aber jetzt, da wir die Interaktionen hinzugefügt haben, kann ich auch einfach schon einfach darauf klicken. Und wie Sie sehen können, sind wir mit der nächsten Folie übergegangen. Und übrigens ist diese Folie länger, also hat sie automatisch auch die Scroll-Funktion eingebaut, die ich liebe. Jetzt haben wir die Zurück-Tasten noch nicht mit der ursprünglichen Hauptfolie verbunden . Also lasst uns das einfach machen, bevor wir vergessen, ich gehe hierher, wähle diesen kleinen Pfeil aus und ziehe ihn einfach hierher zurück. Und das Gute ist, dass ich diesen Pfeil als Komponente eingerichtet habe und dieselbe Komponente auf diesen anderen Seiten verwende . Wenn ich sie auswähle, beachte, dass diese Interaktion bereits hinzugefügt wurde. Also musste ich diese Schritte nicht wiederholen. Testen wir das noch einmal. Ich gehe hier zurück, gehe zur Typografie, scrolle ein bisschen und gehe dann zurück gehe dann in die Farbtheorie ein. Ich kann mich auch bewegen und es funktioniert einwandfrei. 3. Erstelle einen Hover-Effekt: Jetzt ist es an der Zeit , diesen Hover-Effekt auf diesen dritten Button hier zu erstellen . Zunächst gehe ich also zurück in den Entwurfsmodus und zoome näher an diese Seite. Befehl oder Steuerung drei, so können Sie auf eine bestimmte Artboard zoomen. Und ich zeige Ihnen, dass diese beiden hier als Komponenten erstellt werden, einschließlich des Textes unten. Ich bearbeite auch zwei Hilfslinien unten, die mir helfen, die Animation zu erstellen. Denn wenn ich in den Hover-Status wechsle, ändert sich nicht nur das Symbol in Farbe und Größe und gleichmäßiger Ausrichtung leicht, sondern auch Text kommt etwas auf. Also vorher und nachher. Es gibt also den Normalzustand und wie unser Staat und das Beste, wenn x e ist, ist, dass alles automatisch animiert wird. Sie müssen also nur die beiden Zustände einrichten und die dazwischen liegende Animation wird mit der Funktion zum automatischen Animieren generiert. Übrigens habe ich einige Zeit gebraucht, um zu erkennen, wo die Guides in XD befinden, wenn ich sie zum ersten Mal verwende, weil es keine Lineale wie in Illustrator oder Photoshop oder InDesign gibt. Stattdessen müssen Sie nur an den Rand Ihrer Kunsttafel kommen und dann den Guide von dort herausziehen. Das Gleiche, was du von links aus tun kannst. Sie werden diese Funktionen nicht unten oder auf der rechten Seite finden . Es ist also nur links und oben. Und wenn Sie dann keine Anleitung mehr benötigen, ziehen Sie ihn einfach aus der Kunsttafel, um ihn zu entfernen. Werfen wir einen Blick auf dieses Icon hier rechts, das Kompositionssymbol. Dies ist schon eine Komponente entfernt, kann ich feststellen, dass es einen grünen Umriss hat. Normale Objekte hätten einen blauen Umriss. Alles Grüne bedeutet , dass es bereits als Komponente eingerichtet ist. Übrigens, hier auf der linken Seite unten befindet sich das Assets-Panel, in dem Sie alle Ihre Komponenten verfolgen können alle Ihre Komponenten damit Sie eine Liste davon erhalten. Und natürlich kannst du sie auch benennen. Ich habe mir nicht die Mühe gemacht, sie zu benennen, also sind es nur die Standardnamen , die mit den Symbolen einherkamen. Diese Icons stammen übrigens von Noun Project. Der Link befindet sich in der folgenden Beschreibung. Sieh es dir an. Es ist eine kostenlose Ressourcenseite mit vielen wirklich hochwertigen Symbolen. Und ich arbeite wirklich gerne mit ihnen in XD, weil ich die einfachen Animationen hinzufügen kann , die du bereits auf den anderen beiden Icons gesehen hast. Aber mal sehen, was wir hier tun können. Zuallererst hat diese Komponente noch keinen Hover-Status, daher hat sie nur den Standardstatus. Zuerst müssen wir den Hover-Status hinzufügen, aber vielleicht werde ich die SMS sogar vorher mit dieser Komponente kombinieren. Alles was ich tun muss, ist es zu schneiden. Also Befehl oder Control X, wählen Sie dann die Komponente aus, doppelklicken Sie darauf, was bedeutet, dass wir die Quelle dieser Komponente eingeben und dann Command oder Strg V drücken, um in das Taxi einzufügen, wird sich erinnern wo es war. Also ändert sich die Position eins. Aber wenn ich wegklicke und erneut zurückklicke, können Sie jetzt sehen , dass sich der Text und das Symbol in einer einzigen Komponente befinden. Komponenten funktionieren wie Gruppen in Illustrator, und wenn Sie doppelklicken, ist es fast so, als würde man den Isolationsmodus verwenden. Jetzt fügen wir den Hover-Status hinzu. Also klicken wir einfach auf dieses kleine Pluszeichen hier und wählen den Hover-Status. Und Sie können es sogar umbenennen, wenn Sie den Staat selbst wünschen , weil Sie so viele Staaten erstellen können, wie Sie möchten, aber ich werde ihn so behalten, wie es ist. Stattdessen doppelklicke ich in diese Komponente und ziehe den Text nach oben in diese Anleitung. Und dann ändere ich auch seine Farbe und benutze das Pipettenwerkzeug und wähle diese Farbe hier aus dem Text aus. Jetzt hätte ich das schon als Swatch speichern sollen, aber ich kann es immer von dort aus referenzieren. Und wenn wir dies jetzt auswählen und in den Standardstatus zurückkehren und dann die Befehlstaste oder die Eingabetaste drücken. Wir können bereits sehen , dass dieser Effekt funktioniert. Und du kannst schon sehen, wie cool diese Funktion zum automatischen Animieren ist. Wir müssen also nur die beiden Endpunkte einrichten und es erzeugt diesen Effekt. Und es nutzt sogar eine Lockerung zwischen den beiden Staaten. Jetzt ist es an der Zeit, ein bisschen mehr Interessen hinzuzufügen und das Symbol zu animieren, wie ich es auch bei diesen anderen getan habe. Gehen wir einfach hierher zurück, wählen Sie die Komponente aus, gehen Sie in den Hover-Status und doppelklicken Sie dann, um das Symbol selbst auswählen zu können . Also da sind wir, und ich werde die Größe ändern. Wenn ich also die Alt- und Umschalttaste zusammen gedrückt halte, kann ich die Größe ändern, aber Sie können sehen , dass es den Anteil der darin enthaltenen Elemente ändert . Das passiert jetzt, weil es in XD standardmäßig eine Funktion gibt , die als responsive Größenänderung bezeichnet wird. Wenn Sie also nur eine einfache Größenänderung wünschen, müssen Sie in den Standardstatus zurückkehren, und dort können Sie diese Funktion deaktivieren. Das mache ich einfach. Dann geh zurück in den Hover-Status. Doppelklicken Sie erneut, wählen Sie alle diese Elemente aus, und halten Sie dann die Alt- und Umschalttaste gedrückt, um die Größe des Symbols auf so etwas zu ändern. Vielleicht ist das ein bisschen zu groß. Und vielleicht können wir es auch leicht nach unten bewegen. Und dann noch einmal die Farbe, die ich einfach von hier auswählen werde. Okay, also wenn wir jetzt wieder in den Standardstatus zurückkehren, können wir es vorher nachher überprüfen. Das sieht gut aus, aber wir können es auch so testen. Sehr schöne einfache Animation dort. Aber ich möchte auch ein bisschen mehr Interesse daran haben. Also komme ich noch einmal im Schwebezustand rein. Aber dieses Mal werde ich diese Details nur hier in der Mitte auswählen. Und ich drehe sie einfach um, vielleicht irgendwo dort. Und vielleicht können wir es auch leicht herausziehen. Okay, jetzt, vergessen wir noch einmal nicht, in den Standardstatus zurückzukehren und dies dann zu den Standardstatus zurückzukehren und dies dann überprüfen und wir gehen in den Vorschaumodus. Und dort haben Sie die schöne Animation der Drehgrößenanpassung, Farbwechsels und des Textes, der sich nach oben und unten bewegt. Glauben Sie mir, wenn Sie solche Präsentationen machen, werden alle erstaunt sein und es fühlt sich wirklich viel professioneller an, als einfache Folien nacheinander. 4. Benutzerdefinierte Tastaturkürzel: Da wir nun die Animation haben, gehen wir zurück in den Prototypmodus und wählen diese Komponente aus, zoomen Sie heraus, um zu bieten, und ziehen Sie dann die Interaktion heraus , um zu dieser Kompositionsfolie zu gelangen. Übrigens wollte ich erwähnen, dass diese anderen kleinen Linien hier tatsächlich die Schwebeeffekte darstellen, die wir gerade mit dem kleinen Blitz gebaut haben. Das bedeutet, dass es einen Hover-Effekt auf diese Komponente gibt, der sie jedoch nicht von dieser Folie entfernen wird. Es muss ein tatsächlicher Tippen , der zur nächsten Folie übergeht. Und da wir die Interaktionen aufbauen, möchte ich Ihnen zeigen, wie Sie sogar benutzerdefinierte Tastenkombinationen verwenden können sogar benutzerdefinierte Tastenkombinationen um zwischen den Folien zu wechseln. Nehmen wir einfach an, wir fügen eine Domainfolie hinzu und möchten sehr schnell zur Type-Folie gehen. Wenn ich diesen kleinen Pfeil verwende, kann ich ihn hier auf die Typ- oder Topographiefolie ziehen. Und anstatt dieses Mal zu tippen, sage ich Schlüssel und Gamepad. Und dann können wir einfach einen Schlüssel verwenden, in diesem Fall vielleicht t, das wird zu dieser Folie weitergehen. Dann lasst uns das Gleiche nochmal machen. Also noch einmal eine weitere Interaktion, für die wir einen anderen Schlüssel verwenden werden, in diesem Fall C für Farbe. Und dann noch einmal eine für die Komposition. Nun, vielleicht al, diesmal für das Layout, da sie beide den gleichen ersten Buchstaben sind. Testen wir das also. Ich gehe in den Vorschaumodus und wenn ich T drücke, geht es dorthin. Gehen wir zurück zur Hauptfolie. C geht zur Farbtheorie, und wenn ich L drücke, geht es zur Komposition. Brillant. Wenn Sie jetzt noch fortgeschrittener sein möchten, können Sie sogar Sprachbefehle verwenden , um zwischen den Folien zu wechseln. Dies kann Ihre Präsentation wieder so unterhaltsam und cool machen . Wenn ich also noch einmal eine weitere Interaktion hinzufüge, sagen wir einfach Go Papa, statt der Tasten und des Gamepads, jetzt wähle ich Stimme, und ich kann einfach den Sprachbefehl eingeben und Farbe sehen, wenn ich drücke Geben Sie ein. Jetzt wird dies auch hinzugefügt. Und beachten Sie, dass es mir oben sagt, dass zwischen dieser Folie zwei Interaktionen, der Hauptfolie und der Farbtheorie, zugewiesen sind. Eine davon ist die Tastenkombination, die wir zugewiesen haben, und jetzt dieser Sprachbefehl. Testen wir das also. Ich gehe mehr in die Vorschau als Gan. Und unten gibt es eine kleine Notiz, die besagt, dass Sie die Leertaste gedrückt halten müssen wenn Sie Sprachbefehle aktivieren möchten. Probieren wir das also aus. Farbe. Cool, XD. habe verstanden, was ich meinte. Okay, das ist brillant. Das ist also alles, was ich dir über die Navigation zeigen wollte. So können Sie Tastenkombinationen verwenden, Sie können Ihre Sprachbefehle verwenden. Und natürlich können Sie auch Tab-Interaktionen verwenden, wie wir es zuvor gesehen haben. Wenn das nicht cool genug ist und Sie noch fortgeschrittener sein möchten, können Sie tatsächlich ein klebriges Menü erstellen. Das siehst du hier auf der rechten Seite. Also werde ich das einrichten. Dies ist zu diesem Zeitpunkt nur die Standardgrafik, aber ich werde sie irgendwo hier auf der rechten Seite ausrichten . Ja, ich denke, das wird funktionieren und lass uns wahrscheinlich besser sein, wenn wir jetzt im Design-Modus Spaß machen, da wir alle Elemente haben, die wir dafür benötigen, und ich werde dies in eine Komponente verwandeln. Es gibt also eine Verknüpfung für diesen Befehl oder diese Steuertaste. Und beachte, wie die grünen Umrisse jetzt erscheinen. Jetzt können wir dafür einen Hover-Status hinzufügen. Fügen wir das einfach hinzu und bewegen Sie es dann einfach nach unten. Wenn ich hier in den Komponentenbereich gehe hier in den Komponentenbereich und zwischen den beiden Zuständen wechsle, beachte, dass nichts passiert. Jetzt. Dies liegt daran, dass durch einfaches Verschieben der Komponente in zwei Zuständen ihre Position nicht wirklich aufgezeichnet wird. Was Sie also tun müssen, ist zuerst Ihre Standardzustandsposition einzurichten . Lasst uns einfach hier rauf gehen, wo wir es ursprünglich wollten. Wählen Sie dann den Hover-Status aus, doppelklicken Sie in diesem Zustand auf die Komponente, wählen Sie alles aus, was Command oder Control J ist, und wählen Sie dann nur Dinge darin aus. noch einmal daran, dass es wie der Isolationsmodus in Illustrator ist. Und dann halte ich die Umschalttaste gedrückt und ziehe sie irgendwo irgendwo runter. Wenn ich jetzt wegklicke, komm zurück, es wird sich jetzt an diese beiden Zustände erinnern. Der Fehler ist also, wenn es draußen ist und wenn ich dann über den Mauszeiger fahre, wird der kleine Pfeil herunterkommen. Jetzt gibt es eine weitere brillante Funktion, die ich für dieses klebrige Menü verwenden werde. Und das ist die feste Position beim Scrollen. Wenn ich das einschalte und die Befehlstaste oder die Eingabetaste drücke, um dies zu testen , können wir sehen, dass es tatsächlich oben bleibt. Egal wo ich mich in dieser Folie befinde, in diesem Fall wird sie immer dort bleiben. Aber was wir sicherstellen müssen, ist, dass wir auch hierher zurückkehren und es wieder auf den Standardzustand versetzen. Dies ist etwas, an das Sie sich immer erinnern müssen , wenn Sie Komponenten mit Animationen oder mehreren Zuständen Wenn Sie möchten , dass einrichten. Wenn Sie möchten , dass Sie sicherstellen müssen, dass Sie es wieder auf Standardstatus, bevor Sie Ihren Prototyp testen. Testen wir es also noch einmal. Jetzt sieht man, dass es oben nur ein einfacher Pfeil ist. Und wenn ich den Mauszeiger darüber fahre, fällt das Menü aus. 5. Verbinden der Folien: Jetzt müssen wir nur noch die Interaktionen einrichten. Wechseln wir also in den Prototyp-Modus. Wählen Sie dies aus, und wir befinden uns bereits im Hover-Status, was perfekt ist. Also doppelklicke ich drin. Es gibt das kleine Symbol und wir müssen es einfach auf diese andere Folie ziehen. Sie nun sicher, dass es auf Tippen und nicht auf Stimme eingestellt ist und sich immer an Ihre zuletzt verwendete Interaktion erinnert . Ich lasse es auf dem Hahn und alle zusätzlichen Einstellungen sind in Ordnung. Dann machen wir einfach dasselbe mit diesem anderen Icon. Das muss hier gehen. Weil wir also schon auf der Farbtheorie stehen, kann das vielleicht ein großartiges Alphabet dafür sein. Ich gehe zurück zu Design und reduziere vielleicht einfach die Intensität auf 50 Prozent, vielleicht sogar weniger 25. Okay, also können wir das jetzt testen. Wenn ich wieder in den Standardzustand gehe und zurück zur Vorschau gehe, wenn ich den Mauszeiger darüber fahre, kommt es auf und diese beiden funktionieren. Lasst uns einfach mit Typografie fortfahren. Das ist großartig. Noch einmal gehe ich einfach zur Farbtheorie zurück teste das andere Symbol aus, das auch perfekt funktioniert. Was wir jetzt tun müssen, ist , diese ganze Sache zu kopieren. Also wähle ich das Sticky-Menü, das wir erstellt haben, Command oder Control C und dann Command oder Control V auf dieser Seite. Und das Gleiche mache ich auch mit dieser Folie. Da gehst du. Und es wird sich an alle Einstellungen erinnern. Was wir jetzt tun müssen, ist, in den Prototypmodus zu wechseln und in den Hover-Status zu wechseln. Und hier müssen wir nur sicherstellen, dass es auch die Verbindung zur Farbtheoriefolie hat . Also doppelklicke ich einfach und weise dieser Folie eine Einführung zu. Aber wenn ich auch in den Designmodus zurückgehe, möchte ich, dass dies traurig ist. Zwei 100% Deckkraft. Stattdessen ändere ich diese auf der rechten Seite und reduziere ihn wie zuvor auf 25 Prozent. Jetzt können wir dies auf den Standardstatus zurücksetzen und Dinge testen. Wenn ich also den Mauszeiger darüber fahre, kommt es auf und wir können zur Farbtheorie gehen , wo es sich an die spezifischen Einstellungen für diese Folie erinnert. Also können wir jetzt zwischen diesen beiden wechseln , was großartig funktioniert. Und dann müssen wir immer noch die Version für Typografie einrichten . Also lasst uns einfach zu dieser Folie gehen. Ich wiederhole einfach die gleichen Schritte. Also wähle ich diese Komponente und gehe in den Hover-Status. Und in diesem Zustand werde ich sicherstellen, dass dieses Symbol hier, also Doppelklick darauf, die Deckkraft auf fünfundzwanzig Prozent reduziert wird. Und dann sollten diese anderen auf 100% zurückgesetzt werden. Und dann muss ich jetzt nur noch den Prototyp machen. Für die Farbe müssen wir also dorthin gehen und die Komposition ist bereits da, da es sich um eine Komponente handelte. Es sieht also ein bisschen kompliziert aus, aber glauben Sie mir, sobald Sie damit anfangen, wird es eine zweite Natur sein und Sie können die Dinge sehr schnell und einfach einrichten. Lassen Sie uns also noch einmal die Dinge testen. Wenn ich zurück zur Hauptrutsche komme, können wir zu dem kommen , was wir wollen. Lass uns zur Typografie gehen. Und oh ja, ich habe vergessen, dies wieder auf den Standardzustand zu versetzen. Das ist also wichtig. Wir gehen zurück, gehen in den Standardzustand, und so ist es. Wenn wir jetzt also einfach hier anfangen, kann ich den Mauszeiger darüber bewegen. Ja, sieht gut aus. Wir können zur Farbe gehen, wir können zur Komposition gehen, und wir können wieder tippen und so weiter und so weiter. Jetzt haben wir verschiedene Arten der Navigation aufgebaut. Wir haben offensichtlich die hinteren Pfeile. Wir haben unser klebriges Menü. Wir haben auch Sprachbefehle und sogar Tastenkombinationen. 6. Komponenten: Wenn dies jedoch immer noch nicht ausreicht, wenn Sie bei der Präsentation zwei Bildschirme zur Verfügung haben , können Sie auch das eigentliche Entwerfen des Hintergrunds für die Navigation verwenden . Also mache ich dieses Fenster nur ein bisschen kleiner. Und ich zeige Ihnen, dass ich auf die Hauptfolie klicke, wenn ich hier im Hintergrund auf bestimmte Folien klicke. Beachten Sie, wie schnell in meiner Präsentation dazu wechselt. Dies kann also auch verwendet werden , um sehr schnell zwischen den Folien zu wechseln. Und natürlich kann ich im Hintergrund immer noch hinein- und herauszoomen und die entsprechende Folie finden, zu der ich springen möchte. Das ist also fast wie dein Inhaltsverzeichnis. Und das funktioniert wirklich nur gut, wenn Sie zwei separate Bildschirme haben. Wenn Sie den Projektor als zweiten Bildschirm verwenden können und er nicht auf Ihren Laptop gespiegelt ist , würde ich empfehlen, diese Funktionalität auch zu verwenden. Da wir gesehen haben, wie man mit Komponenten arbeitet, habe ich hier auf dieser Folie tatsächlich ein cooles Beispiel. Wenn ich einfach weiter nach unten scrolle, die ich mit Komponenten erstellt habe, kannst du viel mehr tun, als einfach nur einfache Animationen für Schaltflächen und ähnliches zu haben . Sie können tatsächlich interaktive Spiele oder sogar Quizfragen erstellen , wenn Sie möchten. Für Kerning zum Beispiel habe ich hier einen Hover-Effekt erstellt, der vorher und nachher Texte ohne Kerning und dann mit Kerning zeigen kann , das Gleiche auch hier auf der rechten Seite. All dies ist also eine andere Komponente mit vier separaten Zeichen, die zu einer Gruppe zusammengefügt sind. Und dann haben wir einfach wieder für diese Komponente einen Standardstatus und den Hover-Status, und die Farbe ändert sich auch zwischen den beiden Zuständen. Ähnlich wie auf der Kompositionsfolie haben wir, wenn ich Ihnen dies nur schnell zeige, wenn ich Ihnen dies nur schnell zeige, einen weiteren Hover-Effekt, der zeigen kann, wie Hierarchie ein Design verbessern kann. Das ist vorher. Und wenn wir dann den Mauszeiger darüber bewegen, ist das danach. Das ist also wieder eine weitere großartige Möglichkeit, Dinge zu präsentieren. Anstatt also zwischen Folien zu wechseln, können Sie einfach Ihren Cursor verwenden, Mauszeiger darüber bewegen oder sogar Dinge wie den Sprachbefehl Sheryl verwenden, bevor Sie dort erscheinen. Und auf diese Weise können Sie mit Ihren Komponenten interagieren. Wie gesagt, können Sie mit diesen Methoden wirklich coole interaktive Quiz und Spiele erstellen . Und wenn Sie möchten, dass ich dazu ein weiteres Video aufnehme, lassen Sie es mich im Kommentarbereich unten wissen und ich werde sicherstellen, dass ich es in einem kommenden Video behandeln werde. 7. Ankerlinks: Aber bevor wir fertig sind, lass mich dir noch eine weitere Sache zeigen. Es ist ein weiteres brillantes Feature namens Ankerlinks in XD, mit dem Sie Folgendes erstellen können. Also hier in der Farbtheorie , bei der wir eine ruhige lange Rutsche haben. Und was ich hier gemacht habe, ist, dass wir diese kleinen Icons oben oder Bilder haben. Und wenn ich auf kostenlos klicke, liegt es in der Nähe des Teils innerhalb der Folie. Wenn ich auf Analog klicke, gehen wir dazu und so weiter und so weiter. Dies ist wieder eine sehr einfache Sache, die Sie bauen können. Sagen wir also einfach, ob wir dies als Ankerlink verwenden wollen , oder wir müssen zum Prototyp gehen und dann einfach auf den kleinen Pfeil klicken in diesem Fall nicht klicken und ziehen, einfach klicken und ziehen dann lassen Sie den Trigger auf, ändern Sie jedoch den Typ, um auch zu scrollen. Es gibt viele verschiedene Typen, aber dies ist der, den wir in diesem Fall benötigen. Und Sie müssen nur das Ziel festlegen, das in diesem Fall die Triade sein wird, die meiner Meinung nach diese ist, obwohl nicht die einfachste Farbe. Ja, das sind die triadischen Farben. Und wir können uns das ansehen , wie das funktioniert. Wenn ich also in den Vorschaumodus gehe und auf Triade klicke, scrolle eine direkte Schuld. Jetzt ist das einzige Problem, dass oben kein Platz vorhanden ist, also geht es vollständig in die erste Zeile davon, sodass es keinen Platz darüber gibt. Um dieses Problem zu vermeiden, gehe ich einfach zurück in den Entwurfsmodus wähle diesen Absatz aus. Und beachten Sie, dass ich das Rahmenformat oder das Bereichstextformat und keinen Punkttext verwende . Ich arbeite lieber immer mit Bereichstexten. Und damit kann ich einfach ein paar leere Leerzeichen vor diesen Zeilen hinzufügen und dort positionieren, wo ich wollte. Und wenn wir es jetzt noch einmal testen und versuchen, können Sie den leeren Platz darüber sehen. Es ist fast wie eine Top-Marge, die du in deinen Anker-Link einbaust . Und das ist alles, was ich dir in diesem Video zeigen wollte . Aber glauben Sie mir, wir kratzen buchstäblich nur an der Oberfläche was Sie mit XD machen können, wenn es um Präsentationen geht. Und ich war nie ein großer Fan von PowerPoint. Es ist jedoch auch ein gutes Werkzeug. Ich habe das Gefühl, dass XD mir so viel näher am Herzen liegt , weil ich genau so arbeiten kann , wie ich für mobile Prototypen arbeiten und dieselben Tools und Einstellungen verwenden würde , aber um Dinge in einem viel ansprechender und interaktiver. 8. Schlussbemerkung: Gut gemacht für den Abschluss dieses Kurses. Ich hoffe, du hattest genauso viel Spaß beim Durchspielen wie ich beim Aufnehmen. Und vergiss natürlich nicht das Klassenprojekt. Denn denken Sie daran, Übung macht den Meister. Ich kann es kaum erwarten, Ihre Arbeit zu sehen, also stellen Sie sicher, dass Sie sie einreichen. Und falls dir dieser Kurs gefällt und du mehr von mir lernen möchtest, dann gibt es noch viele andere Kurse, die du hier finden kannst. Geh und sieh sie dir jetzt an. Ich kann es kaum erwarten, dich in der nächsten zu treffen.