App- und Website-Design mit Adobe Xd

1. Einführung App- und Webdesign: Planen Sie, eine Website oder eine App zu entwerfen. Aber lassen Sie mich Ihnen zeigen, wie Sie mit Adobe XD beide schnell erledigen können . Und Martin, ich habe über 20 Jahre Erfahrung als Grafikdesigner, Illustrator und zertifizierter Adobe-Dozent Ich habe mit Unternehmen wie BBC, Disney, Google, Ikea zusammengearbeitet und kann es kaum erwarten, meine Best Practices mit Ihnen zu teilen Dies ist ein optimierter praktischer Kurs, der sich auf ein echtes Designprojekt konzentriert Ich werde Sie Schritt für Schritt durch alles führen, und Sie erhalten alle Übungsdateien damit Sie weitermachen können Falls du es vorziehst, mich nicht zu kopieren. Sie können meinen Arbeitsablauf auch anhand der bereitgestellten alternativen Ressourcen verfolgen und etwas völlig Einzigartiges kreieren, das Sie in Ihrem kreativen Portfolio präsentieren können. Ich bin mir ziemlich sicher, dass dieser Kurs Sie dazu inspirieren wird , etwas Tolles zu kreieren. Wir werden bei der Entwicklung unserer App- und Website-Prototypen alle wichtigen Funktionen von DOB XD behandeln , darunter Komponenten, Zeichenflächen, Gesamtinteraktionen, Animationen, Overlays, Animationen, Overlays, Parallax-Scrolling Am Ende dieses Kurses werden Sie sicher sein, dass Sie sich mit DOBXC auskennen und bereit sind, komplexe und ansprechende Prototypen für Ihre Kunden zu erstellen . Neben all den technischen Dingen werden wir auch einige wichtige Theorien des Grafikdesigns behandeln , die Sie in jedem Ihrer zukünftigen kreativen Projekte anwenden können jedem Ihrer zukünftigen kreativen Projekte Sie können an diesem Kurs ohne Vorkenntnisse in Grafikdesign, Illustration oder DOB-Anwendungen teilnehmen Grafikdesign, Illustration oder DOB-Anwendungen Um das Projekt abzuschließen, benötigen Sie jedoch Zugriff auf AOB Creative Cloud und einen Desktop- oder Laptop-Computer Aber jetzt ist es an der Zeit, mit dem Kreieren zu beginnen, also sehen wir uns in der nächsten Lektion 2. Überblick über das App-Design: Wir werden eine App und einen Website-Prototyp erstellen. Ich habe mir das Thema Selbstbewusstsein ausgedacht. Die App hilft uns also dabei, uns selbst kennenzulernen, indem wir am Anfang ein paar einfache Profile erstellen Und wie bei den meisten Prototypen hier passen wir die Ratschläge oder Antworten nicht an das an, was die Leute am Anfang wählen Diese Art von Logik kann jedoch später hinzugefügt werden, sobald der Entwickler mit der Arbeit an unserem Design beginnt. Natürlich werden wir uns bei diesem Projekt nur auf das Design konzentrieren, aber wir werden einen voll funktionsfähigen Prototyp erstellen einen voll funktionsfähigen Prototyp , der mit unserem Kunden und später auch mit dem Entwickler geteilt werden kann und später auch mit dem Entwickler Lassen Sie mich Ihnen zeigen, wie die App aussehen wird. Dies ist die Demo, die mit dem Alcum-Bildschirm beginnt, und dann haben wir die Wahl , diese wenigen Attribute zu ändern Je nachdem, was wir von uns selbst halten, können wir diese Optionen wählen, und wenn wir wollen, können wir uns auch Hilfe dazu holen, was diese Wörter bedeuten, falls Sie damit nicht vertraut sind Aber sobald wir ausgewählt haben, was wir glauben zu sein, können wir unsere Antworten bekommen und dann gibt es uns ein paar Tipps, und hier gibt es auch ein paar lustige kleine Animationen Wir können zum nächsten Tipp übergehen. Wieder eine kleine Animation da oben, und dann können wir wieder zum nächsten übergehen. Und noch eine am Ende. Und dann haben wir hier oben auch noch ein kleines Menü , mit dem wir zwischen den Ratschlägen springen können. Wir können auch zurück nach Hause springen und dann damit herumspielen. Nun, wie gesagt, dieser kleine Abschnitt zur Profilerstellung hier, die Auswahl, die wir wählen, ändert nichts an den Ratschlägen hier in diesem Prototyp Sie haben jedoch die Möglichkeit , diese App zu erweitern. Wenn du also in DOB XD gut werden willst , ist das Projekt dieser Woche die perfekte Gelegenheit für dich, weiterzumachen und vielleicht weitere Bildschirme für diese App hinzuzufügen Und wie immer musst du nicht genau dieselben Ressourcen verwenden , mit denen ich arbeiten werde Ich habe sie jedoch alle vorbereitet und einsatzbereit, was Ihnen Zeit spart und es uns ermöglicht , uns auf den XD-Workflow zu konzentrieren. Wenn Sie jedoch interessiert sind, woher diese Ressourcen stammen, werden die ursprünglichen Ressourcen alle aufgelistet und vom Assets-Board aus verlinkt, sodass Sie sie dort finden können. Ich habe sogar die Seite verlinkt, auf der ich die Kopie gefunden habe, die ich für diesen Prototyp verwendet habe, und ich habe sogar ein paar Referenzen oder Beispiele für den Stil beigefügt , den ich mit meinem Design gewählt habe . Und zurück zu XD Ich möchte nur zeigen, dass wir am Ende auch eine Website-Version derselben App zur Selbsterkenntnis zusammenstellen werden . Und das wird auch ein funktionierender Prototyp sein , den wir testen können. Und es ist eine einzelne Seite , die scrollt, mit einem Sticky-Menü oben und auch mit einigen Ankerlinks, und auch mit einigen Ankerlinks mit denen wir auf der Seite navigieren können Und geh auch zurück nach Hause. Und wieder funktioniert der Selektor genauso wie in der App. Ich hoffe, Sie freuen sich darauf, mit diesem Projekt zu beginnen. Und machen Sie sich keine Sorgen, wenn Sie mit diesem OBXD nicht vertraut sind, denn ich werde Sie Schritt für Schritt von Anfang an durch das Entwerfen Dinge führen und dann am Ende den voll funktionsfähigen Prototyp erstellen am Ende den voll funktionsfähigen Prototyp 3. Willkommensbildschirm: Sie können die Übungsdatei herunterladen, die ich für den Einstieg in dieses Projekt vorbereitet habe die bereits alle Ressourcen enthält. Es ist eine einzelne XD-Datei. Sobald Sie es in XZ geöffnet haben, haben Sie die Möglichkeit, es als Cloud-Dokument zu speichern , sodass Sie auch von verschiedenen Computern aus darauf zugreifen können auch von verschiedenen Computern aus darauf zugreifen Sobald Sie es geöffnet haben, können Sie jederzeit Als Cloud-Dokument speichern auswählen Derzeit heißt es für mich lokales Dokument , da dies bereits ein Cloud-Dokument ist. Dieses kleine Symbol zeigt den Status an. Sobald Sie diese Datei öffnen, werden Sie feststellen, dass ich die Assets-Zeichenfläche mit allen Elementen und der Kopie habe die Assets-Zeichenfläche mit , mit denen wir arbeiten werden Aber im Bibliotheksfenster, das Sie öffnen können, indem Sie hier auf dieses Symbol klicken, finden Sie auch Farben und Zeichenstile, die ich bereits eingerichtet Also werden wir diese Farbverläufe und auch diese Farbe verwenden und auch diese Farbe Und ich arbeite auch mit zwei Adobe-Schriftfamilien, Dan, 2014, und Nunito Ich empfehle, für diese beiden Schriftfamilien die gesamte Version zu Sobald Sie jedoch die XD-Datei öffnen, sollte sie diese ausgewählten Gelder automatisch versenken In diesem ersten Video konzentrieren wir uns auf die ersten beiden Bildschirme, den Begrüßungsbildschirm und den Pro-File-Bildschirm, auf dem wir unsere persönlichen Eigenschaften auswählen können Fangen wir also einfach mit dem Willkommensbildschirm an. Beachten Sie, dass ich mich gerade im Designmodus befinde. Und hier haben wir bereits eine Zeichenfläche, die für die Bildschirmgröße von iPhone 12 und 12 Pro eingerichtet ist Ich doppelklicke hier zuerst und benenne dieses Willkommen Ich verwende gerne Großbuchstaben für Zeichenflächennamen , bei denen es sich um tatsächliche Bildschirme in der App handelt, und ich verwende normalerweise Groß-/Kleinschreibung für Überlagerungen, die wir später erstellen werden Aber auf dieser ersten Zeichenfläche benötigen wir bereits etwas Text Also werde ich einfach das Textwerkzeug verwenden, klicken Sie hier, und ich werde einfach Wachstum eingeben Das ist der Name, den ich mir für diese App ausgedacht habe. Dann werde ich das schon hier auf der rechten Seite auf die Schriftart to ändern , und ich werde das tatsächlich auf fett setzen Sobald ich die Esc-Taste gedrückt habe, kann ich einfach diesen kleinen Kreis in der Mitte verwenden , um den Text zu vergrößern Und mit dem Auswahlwerkzeug können wir es auch verschieben und an der Mitte ausrichten. Ich denke, irgendwo da in der Nähe wird es funktionieren. Und dann die Option ändern, klicken und ziehen, um das zu duplizieren. Lassen Sie uns die Größe dieses Textes auf 20 reduzieren , vielleicht sind 25 besser. Und dann lautet der Text hier: Lerne dich selbst kennen, nächste Zeile mit einem Zeilenumbruch , um die Dinge zu erledigen. Ausrufezeichen, und dann drücke ich wieder die Escape-Taste und zentriere den Text Dann können wir vielleicht die Führung ein bisschen ändern. Der Abstand zwischen den Linien kann also 25 oder 30 betragen. Ja, ich finde, 30 sieht gut aus. Das muss nicht gewagt sein. Vielleicht können wir es mittelgroß machen. Und wir können auch einfach wieder den Kreis verwenden , um die Größe des Textes zu reduzieren. Und wir platzieren es einfach unter dem Haupttitel. Kommen wir nun zu den Assets. Zuerst werde ich dieses Element einfach duplizieren. Auch hier klicken und ziehen wir mit dem Auswahlwerkzeug, und dann drehen wir es, Umschalttaste gedrückt richten es an den Ich werde es nach unten ziehen. Richten Sie diese Ecke auch hier oben und dehnen Sie sie vielleicht einfach ein wenig aus. Ich wähle das aus und klicke dann mit der rechten Maustaste auf An zurück senden, um sicherzustellen, dass unser Text oben steht. Und dann ändern wir die Farbe des Textes, die Feldfarbe in Weiß. Und dann brauchen wir endlich nur ein Bild, und ich werde dieses verwenden. Auch hier ziehe ich es vor, das gesamte Material hier auf dieser Zeichenfläche zu behalten , und ich dupliziere einfach immer die Dinge, die wir brauchen. Also klicken und ziehen, und dann lassen Sie uns das Ganze vergrößern. Sie müssen die Umschalttaste nicht gedrückt halten, die Proportionen bleiben automatisch gleich. Beim Ändern der Größe kommt es jedoch manchmal vor, dass die Ebenen nicht perfekt ausgerichtet sind kommt es jedoch manchmal vor, dass . Der Autoschatten befindet sich also auf einer separaten Ebene als Hauptmodell. Also müssen wir das vielleicht ein bisschen anpassen. Aber zuerst möchte ich sichergehen, dass es an der richtigen Stelle ist. Ich möchte die Figur irgendwo in der Mitte des Bildschirms haben und es so aussehen lassen, als würde sie sich an den Bildschirmrand lehnen Ja, ich denke, das ist nah dran, vielleicht nur ein bisschen kleiner, und dann ziehe es wieder hinein Wenn ich auf eine Stelle außerhalb der Zeichenfläche klicke, kann ich sehen, wie sie zugeschnitten wird Ich finde, das funktioniert ganz gut. Wenn wir also die Ausrichtung hier auf dem Schatten verfeinern wollen, können wir doppelklicken und dann entweder den Schatten oder das Zeichen auswählen. Wir können die Pfeiltasten auf der Tastatur verwenden und sie einfach anpassen oder bewegen, bis sie perfekt ausgerichtet sind Und wenn wir dann nach draußen klicken, ist es jetzt eingerichtet, und das ist alles, was wir für den Willkommensbildschirm tun mussten Das ist definitiv der einfachste Bildschirm, den wir erstellen mussten. Der nächste wird viel komplexer sein , den wir im nächsten Video zusammenstellen werden. 4. Erstellen des Profilbildschirms: Wenn wir weitermachen, werden wir das Zeichenflächen-Tool verwenden. Und damit klicken Sie einfach hier neben der vorherigen Zeichenfläche Es erstellt automatisch eine Zeichenfläche in derselben Größe wie zuvor Und das werden wir Profil nennen. Auch hier verwende ich nur Großbuchstaben , weil dies ein wichtiger Bildschirm ist. Auf diesem Bildschirm werden wir also einige Elemente verwenden. Zuallererst werden wir all diese Ressourcen verwenden, also werde ich sie auswählen. Und wie zuvor werde ich sie hier anklicken und nach unten ziehen, und dann verschieben wir sie einfach auf die Zeichenfläche Dann brauchen wir auch etwas Text. Also werde ich das Textwerkzeug verwenden und einfach beschreiben Sie sich selbst eingeben. Aber für diesen Text habe ich den Zeichenstil bereits eingerichtet, also werden wir diesen hier verwenden. Es formatiert ihn also automatisch auf die Version, die wir benötigen, und ich platziere ihn einfach dort. Und wir werden auch ein Symbol benötigen, das ich wieder dieses Fragezeichen vorbereitet habe. Kopieren wir das einfach mit Command C, wir können es auch kopieren. Klicken Sie auf die Zeichenfläche und Befehl V wird sie einfügen Also lass uns das vorerst hier oben rechts verschieben. Später werden wir auch einen Button benötigen. Aber zuerst richten wir diese Bilder ein. Jetzt werden sie für ein visuelles Umschalten verwendet. Wir haben also drei verschiedene Schalter, mit denen die Benutzer ihre persönlichen Eigenschaften auswählen können Der erste ist also der pessimistisch-optimistische Selektor. Was Sie tun müssen, ist, diese beiden Köpfe übereinander auszurichten Und ich bevorzuge es, die glückliche Version oben zu haben, das wird unsere optimistische Version sein, und darunter die passimistische Wenn wir mit dem Befehl Strg Y zum Ebenenfenster wechseln, können wir auch sehen, dass diese Bilder Das ist also das glückliche Bild. Und wenn ich es darunter verstecke, ist da auch das traurige Gesicht. Also werde ich das wieder einschalten und ich kann die beiden jetzt zusammenbringen. Wir benötigen hier eine zusätzliche Kopie, also werde ich einfach diese oder eine Kopie der obigen Version verwenden , und ich gebe Optimist ein und vergrößere die Stelle vielleicht etwas Hier, und ich werde das auch auf Leicht oder Mittel einstellen, oder vielleicht ist Normal das Beste für uns Und dann duplizieren wir einfach diesen Text. Stellen Sie sicher, dass er mit dem obigen übereinstimmt , und dann gebe ich einfach pessimist Okay. Also das ist so ziemlich startklar. Also lasst uns den nächsten Selektor vorbereiten. Ich werde das Zahnrad und die Glühbirne übereinander legen und die Das wird der Selektor zwischen kreativer Persönlichkeit und methodischem Denken sein , was durch das Zahnrad repräsentiert wird Ich lege das einfach übereinander , richte es vorerst ungefähr am Kopf aus und dann kopiere ich die beiden Textobjekte und benenne sie um beiden Textobjekte und benenne Das wird kreativ sein, und das ist methodisch Okay, also ich sehe, dass wir das etwas nach links verschieben müssen, um sicherzustellen, dass sie alle passen. Rein. Und dann ist der nächste Selektor wahrscheinlich der einzigartigste, denn hier gibt es keine zwei separaten Bilder zwischen denen wir wechseln werden. Stattdessen habe ich diese Formen, die wir zusammen mit einigen Masken und der automatischen Animationsfunktion verwenden werden zusammen mit einigen Masken und der automatischen Animationsfunktion Im Wesentlichen möchte ich hier erstellen , dass wir zwischen dieser Zylinderform und der Kugel wechseln Und sie werden sich zwischen diesem Ring bewegen, was fast so ist, als ob sie dort von einer Form zur anderen wechseln würden. Und das ist nur ein lustiges kleines Beispiel für die coole visuelle Darstellung von Wegbeschreibungen , die du in XD erstellen kannst. Aber vorerst werde ich das hier zur Seite legen. Und wieder werde ich diese Textobjekte kopieren. Nun, hier müssen wir nur fest eintippen, und das andere ist flexibel. Im Moment werde ich das einfach zur Seite legen, und später können wir die Dinge besser aufeinander abstimmen. Ich werde das alles auswählen und hier auf der rechten Seite sicherstellen, dass Sie die Option zur responsiven Größenänderung ausschalten Stellen Sie das einfach auf die linke Seite ein, damit es keine Einschränkungen gibt Und wenn Sie dann beim Ändern der Größe die Umschalttaste gedrückt halten, wird sichergestellt , dass alles so bleibt, wie wir es brauchen. Ja, ich denke, das wird besser funktionieren. Und später können wir den Text immer näher rücken. 5. Interaktionen für den Profilbildschirm: wir diese nun fertig haben, richten wir die erste Interaktion ein. Dieser wird also sehr einfach sein. Alles was wir tun müssen, ist all diese Elemente hier oben auszuwählen . Es gibt also zwei Bilder übereinander und die beiden Textobjekte und machen sie zu einer Komponente. Der kürzeste Weg, das zu tun, besteht darin, die Befehlstaste oder die Strg-Taste K auf der Tastatur zu drücken , und es wird durch ein grünes Begrenzungsfeld angezeigt, dass es sich um eine Komponente handelt, und es ist auch wichtig, dass , wenn Sie in der oberen linken Ecke ein Feld mit ein grünes Begrenzungsfeld angezeigt, dass es sich um eine Komponente handelt, und es ist auch wichtig, dass , wenn Sie in der oberen linken Ecke einem grünen Stern sehen , das bedeutet, dass es sich um die Hauptkomponente handelt Falls Sie das also duplizieren, dann wird das das Elternteil sein und die anderen werden die Kinder sein Alle Änderungen, die Sie an der Hauptkomponente vornehmen, wirken sich also auf die Instanzen aus, aber nicht umgekehrt. Wir werden Kopien oder Instanzen für die Website-Version dieser App verwenden. Deshalb ist es wichtig, sich daran zu erinnern, dass dies die Hauptkomponente ist. Der Grund, warum wir zunächst eine Komponente erstellen müssen , ist, um Status hinzufügen zu können, und wir haben hier oben einen Standardstatus erstellt, aber wir müssen einen zusätzlichen Status erstellen. Ich werde einfach einen neuen Staat wählen und diesen einen Pessimist nennen Im Moment gibt es keinen Unterschied zwischen den beiden, und ich wechsle hier, aber was wir tun müssen, ist, in den pessimistischen Zustand zu wechseln und dann vom Ebenenfenster aus, das Sie wieder durch Drücken von Command Y auf der Tastatur öffnen können, die finden Auch hier können wir sie umbenennen, damit wir sie leichter finden können. Also optimistischer pessimistischer Selektor. Wir können sogar einfach den Anfangsselektor setzen , damit wir Dieser kann also geöffnet werden, und dann können wir darin alle Elemente wie Ebenen in einer Gruppe sehen Und hier können wir die glückliche Phase einfach verstecken. Jetzt können wir also die festgelegte Phase sehen. Und wenn wir jetzt zwischen den beiden Zuständen wechseln, können wir sehen, wie der Übergang abläuft. Aber um sicherzugehen, dass es noch besser angezeigt wird, wechseln Sie zwischen diesen beiden. Ich werde den Text auch ein wenig ändern. Also doppelklicke ich hier, um Optimist auszuwählen, und wenn ich das auf Fett und Pessimismus setze , reduziere ich die Deckkraft auf Jetzt ist klar , welcher ausgewählt ist, und dann können wir in den pessimistischen Zustand wechseln Und da drin werde ich das rückgängig machen. Also wähle ich Optimist, setze das auf Normal und 30% Opazität, und dann mache ich das auf 100% und setze es auf Fett Wenn wir jetzt also zwischen den Status wechseln, sowohl die Bild- als auch die Textformatierung Wenn wir weitermachen, müssen wir hier genau dasselbe tun. Also werde ich jetzt einfach ein bisschen schneller sein. Ich wähle das alles zusammen aus drücke Commando Control K, wodurch die Komponente erstellt wird Auch hier werde ich diesen Selektor umbenennen und die beiden Optionen kreativ und methodisch eingeben, und dann erstellen wir einen neuen Und das wird methodisch sein. Und im Standardstatus müssen wir das Zahnrad nicht sehen, also werde ich es ausblenden und wir müssen sicherstellen , dass das Creative ausgewählt und fett markiert ist , während methodisch die Sichtbarkeit auf 30% reduziert werden kann Und jetzt können wir die gesamte Komponente auswählen und zurück zum methodischen Modus wechseln, dem zweiten Zustand, in dem wir das Zahnrad zurückdrehen und die Glühbirne ausschalten können zurückdrehen und die Glühbirne ausschalten Und dann müssen wir nur noch die Formatierung des Textes ändern , ähnlich wie zuvor Das ist normal, wenn die Sichtbarkeit auf 30% reduziert wird, und die andere Einstellung geht zurück auf 100 und wird wieder fett Vergessen Sie auch hier nicht, zum Standardstatus zurückzukehren, und dann können Sie einfach den Übergang zwischen den beiden überprüfen . Ich finde das sieht toll aus. Und wir werden es vorerst bei der ersten Option kreativ lassen. Und dann kommen wir hier zu diesem Thema. Wie gesagt, das ist die kniffligste weil wir hier zwei separate Masken haben und wir eine Animation sowohl für den Zylinder als auch für die Kugel hinzufügen müssen sowohl für den Zylinder als auch für die Kugel Lassen Sie uns also zuerst diese Maskengruppen erstellen. Ich habe bereits die Formen erstellt , mit denen wir die Masken machen werden. Also dieser hier oben wird mit Zylinder verwendet und dieser andere wird mit der Kugel verwendet. Wählen wir also zuerst diesen und den Zylinder aus. Ich benutze einfach die Umschalttaste, um sie zusammen auszuwählen. Und dann gehen wir zum Objektmenü und können diese Option namens Maske mit Form auswählen. Lassen Sie uns Shift M über die Tastatur befehlen. Und wenn Sie das getan haben, stellen Sie fest, dass wir hier im Ebenenbedienfeld jetzt eine Maskengruppe haben. Ich werde diesen Maskenzylinder umbenennen und das Gleiche für die Kugel tun. Wir wählen beide mit der Umschalttaste und dann die Objektmaske mit Form aus, und dann benennen wir die Maskenkugel um. Lassen Sie uns noch einmal überprüfen, was wir erreicht haben. Und hier ist die eigentliche Kugel derzeit nicht sichtbar. Aber sobald wir sie nach unten in die Region bewegen, die mit der Maske erzeugt wurde, werden wir beginnen, sie zu sehen. Also werde ich das einfach schnell zeigen. Wenn ich die Kugel ausgewählt habe, erscheint sie, sobald sie sich in diese Region bewegt. Aber ich werde es vorerst hier behalten. Und jetzt, wo wir die Masken eingerichtet haben, können wir den Text wieder hierher verschieben und ihn an den anderen Textobjekten darüber ausrichten Dann können wir all das zusammen auswählen und daraus eine Komponente machen. Das ist die Befehlssteuerung K, und ich werde sie auch hier umbenennen, sie als Selektor fest und flexibel bezeichnen und auch den Status dafür erstellen, neuen Status und den Typ flexibel Zunächst können wir in den Standardstatus wechseln und die Textobjekte einrichten In der Standardeinstellung sollte dies also fett gedruckt und die Sichtbarkeit sollte auf 30% reduziert werden. Und dann merke ich, dass ich immer nach draußen klicke, dann die gesamte Komponente erneut auswähle und dann zwischen den Zuständen wechseln kann. Denn wenn Sie einmal doppelklicken um Änderungen an Elementen vorzunehmen, befinden Sie sich innerhalb der Komponente und die Statusoption wird nicht angezeigt. Deshalb klicke ich immer weg und wähle es dann erneut aus. Sie können auch das Ebenenbedienfeld verwenden, um zwischen den Elementen innerhalb der Komponente und der Komponente selbst zu wechseln den Elementen innerhalb der Komponente . Ich habe also den flexiblen Text ausgewählt, Wert wieder auf 100% gesetzt, und dann wählen wir Fett. Und das ist das letzte Mal, dass wir das tun müssen. Also wähle ich einfach regulär und tippe 30. Das ist großartig. Also lass uns das jetzt einfach überprüfen. Wir wechseln zwischen Standard und Flexibel. Funktioniert gut. Aber jetzt müssen wir die Animation erstellen, die ich erwähnt habe. Anstatt nur einen einfachen Übergang zwischen den Elementen oder Bildern zu schaffen, wollen wir, dass dieser Zylinder durch den Ring fällt und sich in eine Kugel verwandelt. diese Weise habe ich mir ausgedacht, den Unterschied darzustellen , ob jemand fest oder flexibel ist. Ein Zylinder fühlt sich also viel fester an als eine Kugel. Die Kugel steht also für Flexibilität, während der Zylinder für Festigkeit steht Um die Animation erstellen zu können, müssen wir mit diesen Elementen innerhalb der Maskengruppen arbeiten diesen Elementen innerhalb der Maskengruppen Sie sind jedoch bereits so eingerichtet, wie sie im Standardstatus sein sollten. Das ist also der feste Zustand. Alles, was wir tun müssen, ist, in den flexiblen Staat überzugehen. Und innerhalb dessen müssen wir die Dinge ein wenig verschieben. Ich werde die Elemente öffnen. Lassen Sie uns also zuerst den Zylinder bewegen. Also werde ich das Objekt finden. Und sobald es ausgewählt ist, kann ich es leicht drehen und dann anfangen, es nach unten zu ziehen . Sobald es unter den Ring geht, wird es tatsächlich verschwinden, sodass wir bereits eine Vorschau haben können, dass die Sichtbarkeit komplett Null sein wird , sobald es diesen Teil erreicht hat, denn die Form, die wir ursprünglich erstellt haben, diese Maskenform, ist der einzige Bereich, in dem der Zylinder sein wird Wenn Sie es also hierher verschieben, wird es verschwinden. Beachten Sie, dass ich immer noch versuche, es in der Mitte dieses Rings zu halten. Also horizontal, es ist immer noch ausgerichtet. Aber jetzt wechsle ich zur anderen Maske und wähle diese Gruppe aus. Auch hier würdest du in jeder Maskengruppe die Maske oben und das Objekt darunter sehen. Wenn Sie diese später leichter finden möchten, empfehle ich, diese auch zu benennen. Ich nenne das für Maske und da ist die Kugel. Wie in der anderen hatten wir wieder die Maske und darunter hatten wir den Zylinder. Also zurück zur Kugel, sobald ich sie ausgewählt habe, kann ich die Shift-Taste benutzen und sie einfach irgendwo in der Nähe ablegen. Und das war alles, was wir tun mussten. Klicken Sie nun nach draußen und wählen Sie erneut die gesamte Komponente aus. Ich kann zwischen den beiden wechseln. Und das ist genau das , was ich wollte. Wir sehen jedoch noch keine Animation, da diese erst angezeigt wird, wenn wir die Interaktionen hinzufügen und Funktionen wie automatische Animation verwenden Aber bevor wir das tun, möchte ich sicherstellen, dass alle Elemente auf diesem Bildschirm bereit sind 6. Schaltflächen und Hintergrund für den Profilbildschirm: Wir benötigen hier tatsächlich eine Schaltfläche , mit der wir zum nächsten Bildschirm gelangen. Für diese Schaltfläche verwende ich also das Rechteck- oder Quadratwerkzeug. Und damit können wir hier unten einfach ein Rechteck zeichnen und die Feldfarbe weiß lassen. Und vorerst behalte ich einfach den Rand bei, damit wir sehen können, wo sich unser Button befindet. Aber ich werde diese Eckstarren nach unten ziehen, sodass es sich um eine vollständig abgerundete Schaltfläche Und dann klicke ich mit dem Auswahlwerkzeug auf diesen Text und ziehe ihn Verschieben Sie ihn hierher und klicken Sie dann mit der rechten Maustaste darauf und bringen Sie ihn nach vorne Ich werde ihn einfach an der Schaltfläche ausrichten, darauf doppelklicken und dann eingeben, um Ihre Antworten zu erhalten. Ich werde das auch auf Medium umstellen. Muss nicht fett sein, richten Sie es an der Mitte der Schaltfläche aus, und wenn Sie alles zusammen ausgewählt haben, können Sie es auch an der Mitte des Bildschirms ausrichten Neben diesen Elementen benötigen wir auch einige farbenfrohe Details im Hintergrund Also lass uns diesen zuerst kopieren. Ich werde es anklicken und ziehen, es hierher bringen und es nach hinten schicken. Das ist eine Abkürzung, die ich ziemlich oft benutze. Das ist Commando Control Shift linke eckige Klammer. Wenn Sie sich das schwer merken können, können Sie jederzeit mit der rechten Maustaste klicken und sich diese Abkürzungen merken Sie sind äußerst nützlich und funktionieren in allen Adobe-Anwendungen auf die gleiche Weise Es sind also Abkürzungen für universelle Arrangements. Also dieses Element ist bereits vorhanden. Lassen Sie uns einfach dieses einfügen, klicken und ziehen Sie es erneut, um es hierher zu bringen. Und dann ziehe ich das nach oben, also vergrößere und habe es wahrscheinlich irgendwo da drüben. Auch hier dieselbe Abkürzung, um es nach hinten zu schicken. Und dann werde ich das noch einmal duplizieren. Also das ist Optionstaste machen und ziehen. Aber dieses Mal werde ich es horizontal drehen, mit diesem Symbol auf der rechten Seite, und ich werde seine Farben leicht anpassen , indem ich auf das Feldfarbenfeld klicke, und dort können wir den Farbverlauf finden Also wähle ich diese Farbe aus und reduziere einfach ihre Intensität, mache sie heller und weniger gesättigt Ich glaube, so etwas wird funktionieren. Im Wesentlichen möchte ich nur sicherstellen, dass zwischen diesen Formen ein ausreichender Kontrast besteht . Also kann ich das hier platzieren und es nach oben ziehen und es dann mit dem Shortcut nach hinten verschieben . Und ich denke, es gibt genug Kontrast zwischen dieser und jener Form. Also das wird funktionieren. Aber nur damit wir ein bisschen mehr Unterschied haben. Ich werde auch diese gelbe Farbe wählen und sie ein bisschen helleres Gelb machen. Lassen Sie mich nun diese andere Form auswählen und wir können sie vergrößern. Ich werde nur die Größe ändern. Also passt es hier ein bisschen besser rein. Ja, ich finde, das ist eine nette Komposition. Übrigens können Sie diese Formen mit dem Stiftwerkzeug hier in XD zeichnen , oder Sie können diese Formen aus Illustrator importieren Und nur damit du weißt, wie das geht. Wenn Sie Änderungen an einer Form vornehmen möchten, wählen Sie sie einfach aus und doppelklicken Sie darauf Dann finden Sie einzelne Ankerpunkte, Eckpunkte und auch diese glatten Punkte an den Griffen, und Sie können sie anpassen, genau wie in Illustrator, wenn wir mit Teilen arbeiten Kehren Sie zu unserem Profilbildschirm zurück. Jetzt haben wir alle Elemente an Ort und Stelle. Wir müssen jedoch sicherstellen, dass diese Hintergrundformen auch mit unseren drei Schaltern verbunden sind mit unseren drei Schaltern verbunden Und damit das funktioniert, müssen wir sie innerhalb der Komponenten platzieren, die wir erstellt haben sie innerhalb der Komponenten platzieren, die wir erstellt Fangen wir also mit diesem hier unten an. Ich wähle diese Form aus und schneide sie dann mit Commando Control X Sie können auch die Option „Ausschneiden bearbeiten“ verwenden, dann diese Komponente auswählen und darauf doppelklicken, was bedeutet, dass wir uns jetzt darin befinden Es ist wie Isolation in Illustrator. Und wenn ich dann Commando Control V verwende, wird die Form wieder an der Stelle eingefügt, an der sie sich auf dem Bildschirm oder der Zeichenfläche befand Stelle eingefügt, an der sie sich auf dem Bildschirm oder der Zeichenfläche Aber was das Arrangement angeht, muss ich es an den unteren oder hinteren Rand der Komponente schicken oder hinteren Rand der Komponente Also das war Commando Control Shift linke eckige Klammer. Und jetzt, wo es dort platziert ist, können wir auf av klicken und diese Komponente erneut auswählen Und überprüfen Sie, ob die Form in unseren beiden Bundesstaaten sichtbar bleibt. Und es zeigt sich in beiden, das ist also perfekt. Und der Grund, warum wir es hier eingefügt haben, ist, dass wir auch gerne ein bisschen Animation auf diesen Formen sehen würden auch gerne ein bisschen Animation auf diesen Formen wenn wir zwischen den Optionen wechseln. Aber das werden wir vorerst später einrichten. Ich möchte nur sichergehen, dass diese Formen alle mit diesen Togos verbunden sind Jetzt können wir also die zweite Form auswählen und sie ausschneiden. Doppelklicken Sie auf die Komponente, fügen Sie sie ein und senden Sie sie zurück. Klicken Sie auf ein V. Lassen Sie uns das auch noch einmal überprüfen. Die beiden Staaten funktionieren einwandfrei. Dann wählen wir diese Form aus. Schließlich ist das wieder der Befehl x, um es auszuschneiden, doppelklicken Sie auf die Komponente, fügen Sie sie mit dem Befehl Control V und senden Sie sie dann nach hinten Klicken Sie auf a und überprüfen Sie die beiden Zustände. Ja, funktioniert perfekt. Jetzt haben wir alles an seinem Platz. Es ist an der Zeit, endlich die ersten Interaktionen einzurichten und zu sehen welche coolen Dinge wir mit der automatischen Animationsfunktion erreichen können mit der automatischen Animationsfunktion 7. Interaktionen ein- und ausschalten: Um Interaktionen hinzuzufügen, müssen wir mit xD zum zweiten Modul wechseln, das als Prototyp bezeichnet wird Beachten Sie, dass es eine Abkürzung gibt , mit der Sie einfach zwischen diesen wechseln können. Ausgehend vom Design, also Alter-Option Eins, können wir Alter-Option 2 verwenden , um zum Prototyp zu wechseln. Daran sollten wir uns auf jeden Fall erinnern , denn wir werden ziemlich oft zwischen diesen beiden hin- und herwechseln . Jetzt befinden wir uns im Prototypmodus. Wir können unsere erste Komponente auswählen. Und darin möchte ich doppelklicken, um hinein zu gehen. Und dort möchte ich, dass Sie das Bild und das andere Bild darunter auswählen , das ist die Umschalttaste aus der Ebene SpanelHapp und zusammenstellen, und auch die Sie sollten also diese vier Dinge ausgewählt haben. Der Pfad dahinter wird für diese Auswahl nicht benötigt. Und wir werden daraus eine Gruppe machen, was wir erreichen können, indem wir Befehl oder Strg G auf der Tastatur drücken . Und der Grund, warum wir das tun , ist , dass dadurch ein Bereich entsteht , dem wir unsere Richtung zuweisen können . Sie können also sehen, dass die Gruppe ausgewählt wurde. Wir haben diesen kleinen Pfeil hier auf der rechten Seite. Und wenn Sie einfach einmal darauf klicken, haben wir bereits unsere erste Interaktion bereit, und der Auslöser dafür wird Tippen sein. also einfach darauf klicken oder auf dem Bildschirm darauf tippen , wird die Aktion ausgelöst, was in diesem Fall ein einfacher Übergang sein wird Wir müssen sicherstellen , dass das Ziel auf den zweiten Status dieser Komponente gesetzt ist , was die pessimistische Option ist Für die Animation werde ich die Auflösungsfunktion beibehalten , mit der wir einen schönen subtilen Übergang erzeugen können Und wir können später entscheiden, wie wir die Lockerung machen wollen. Aber ich habe das Gefühl, dass eine Lockerung gut sein könnte. Und die Dauer ist standardmäßig auf 0,3 Sekunden eingestellt, was ich für ziemlich gut halte. Aber wir können das schon testen, indem wir hier oben rechts auf das Play-Symbol drücken. Wenn ich also irgendwo auf das Bild oder die beiden Textobjekte oder sogar dazwischen klicke , kann ich schon in den zweiten Zustand wechseln. Aber wie Sie sehen, haben wir noch keine Möglichkeit, zur anderen Option zurückzukehren. Also funktioniert es vorerst in eine Richtung. Aber es ist eine einfache Lösung. Alles was wir tun müssen, ist die Komponente auszuwählen. Klicken Sie also zuerst auf ein Gewicht, wählen Sie dann die Komponente aus, wechseln Sie in den zweiten Status und doppelklicken Sie dann. Vergewissern Sie sich, dass die Gruppe markiert ist. Klicken Sie auf den kleinen Pfeil auf der rechten Seite, und dann werden wir das auf die gleiche Weise wieder einrichten. Gehen Sie also diesmal in den Standardstatus über. Und XD ist wirklich schlau. Ich erinnere mich immer an Ihre Einstellungen, die Sie zuletzt verwendet haben, sodass Sie sich keine Gedanken darüber machen müssen, sie einzurichten. Und jetzt können wir einfach wegklicken und die Komponente auswählen, sicherstellen, dass sie auf den Standardstatus zurückgesetzt ist, und dann können wir sie testen. Also nochmal, mit der Play-Schaltfläche auf der rechten Seite können wir jetzt darauf tippen und dann auf Zurück tippen. Wir haben also unser erstes Toggle-Design. An dieser Stelle ist es erwähnenswert, dass Sie, wenn Sie Ihr Telefon an Ihren Computer anschließen , während Sie einen OBXC verwenden , und die XD-App auf Ihrem Telefon haben, sehen können die Live-Ansicht Ihres aktuellen Projekts sehen können. Das ist eine großartige Möglichkeit, wirklich alles auszuprobieren und zu sehen, wie es sich anfühlt, ob die Bereiche groß genug sind, um darauf zu tippen , oder ob Probleme mit der Kerbe auf der Oberseite, bei der einige Details wie der Text ausgeblendet Das ist etwas, das Sie hier in der Desktop-Vorschau sehen möchten hier in der Desktop-Vorschau Es ist am einfachsten, es live auf Ihrem Handy zu sehen. Stellen Sie einfach sicher, dass Sie die Adobe XD-App herunterladen und sich mit denselben Creative Cloud-Kontodaten anmelden . Auf diese Weise kann das Cloud-Dokument auf Ihrem Desktop synchronisiert und mit der App auf Ihrem Telefon verbunden werden. Ich liebe die Art und Weise, wie ADB XD über diese Live-Prototyping-Funktion verfügt Es macht den gesamten Designprozess wirklich so intuitiv und Aber um fortzufahren, sollten wir die Form im Hintergrund dieser Komponente nicht vergessen . Deshalb möchte ich auch, dass sich das ändert , wenn Benutzer auf dieses ToGo tippen Um das tun zu können, möchte ich zunächst im Standardzustand, dass die Form dort ist, wo sie ist Aber im pessimistischen Zustand möchte ich, dass sie sich leicht bewegt Also wechsle ich zuerst den Status. Dann tippe ich zweimal hinein. Und wenn wir diese Form ausgewählt haben, müssen wir ihre Größe und ihre Farben ändern. Dies können wir jedoch nur tun indem wir wieder in den Designmodus wechseln. Das ist also Option eins. Und innerhalb dessen kann ich die Größe leicht ändern. Es kann vielleicht bis hier runtergehen, und um die Farbe schnell zu ändern, drücke ich die Befehlstaste Umschalt-Y oder die Strg-Umschalt-Y-Taste, wodurch Sie auf der linken Seite die Registerkarte mit den Dokumentenressourcen aufrufen. Sie können natürlich auch mit diesem Symbol hier darauf zugreifen. Und dann werde ich von hier aus vielleicht diese Farbe wählen. Also ein kühlerer Farbverlauf, einfach passend zu der kühlen oder bläulichen Farbe auf dem Kopf Und das Beste ist, dass das alles ist, was wir tun müssen , weil alles mit den Interaktionen bereits eingerichtet ist mit den Interaktionen bereits eingerichtet Alle Elemente, die Sie in einer Komponente ändern, die diese Interaktionen verwendet, sollten ebenfalls automatisch aktualisiert werden. Wenn ich also wegklicke und wieder hierher klicke, kann ich jetzt sehen, dass sich auch die Form ändert. Aber wenn wir das spielen, wird es kein reibungsloser Übergang sein. Es ist nur ein schneller Sprung zwischen den beiden. Das liegt daran, dass wir derzeit nur einen normalen Auflösungsübergang verwenden nur einen normalen Auflösungsübergang , der von einem Zustand in einen anderen übergeht Bei OBX D gibt es jedoch die coolste Funktion namens Auto Animate, die Zwischenräume für diese Animationen erzeugen und einen Zustand eines Objekts in einen anderen verwandeln kann diese Animationen erzeugen und einen Zustand eines Objekts in einen anderen verwandeln , wodurch ein sehr schöner, fließender Übergang zwischen den beiden Zuständen der Form erzeugt werden kann fließender Übergang , sowohl den Farben als auch der Position der Form sowohl den Farben als auch der Position der 8. Interaktionen automatisch animieren und einschalten: Um dies einrichten zu können, wir in den Prototypmodus zurück und tippen zuerst zweimal auf den ersten Status oder Standardstatus dieser Komponente Und hier müssen wir nur den Übergang zur automatischen Animation ändern den Übergang zur automatischen Animation Das ist also die Interaktion , die wir bereits eingerichtet haben. Wir ändern gerade den Typ, aber es wird sich an alle anderen Einstellungen erinnern. Darüber müssen wir uns also keine Sorgen machen. Ich werde wegklicken, auf Zurück klicken, zum anderen Status wechseln und daran denken, dass wir sicherstellen müssen, dass es in beide Richtungen eingerichtet ist. Ich tippe also zweimal, wähle die Gruppe aus und ändere sie auch auf Automatisch animieren Jetzt können wir auf av klicken, die Komponente auswählen, sie auf den Standardstatus zurücksetzen und es ist Zeit, sie zu testen Also lass uns sehen. Jetzt haben wir die coole automatische Animationsoption , die eine sanfte Animation oder einen Übergang auf der Form auf der rechten Seite erzeugt , die eine sanfte Animation oder Übergang auf der Form auf der rechten Seite Es hatte keinen wirklichen Einfluss den visuellen Übergang hier auf dem Bild und im Text, aber selbst das wurde meiner Meinung nach etwas subtiler Wenn Sie also genau auf den Text achten, denn wir wechseln zwischen den beiden Gewichten fett und normal, anstatt dass sich einfach nur ein Zustand in einen anderen auflöst, er verändert sich tatsächlich zwischen den Die Buchstaben nehmen also allmählich an Dicke und nehmen auch allmählich ab . Das ist eine sehr subtile Sache, vor allem, weil unsere Animation mit 0,3 Sekunden sehr schnell ist , aber sie hilft trotzdem dabei , den reibungslosen Übergang zu schaffen , den ich gesucht habe. Jetzt müssen Sie genau die gleichen Schritte für die anderen beiden Selektoren Aber nur um sicherzugehen, dass Sie wissen, was Sie tun müssen, werde ich das sehr schnell durchgehen Also werde ich zunächst diese zweite Komponente auswählen. Tippen Sie zweimal und wählen Sie alle Elemente aus, die wir hier benötigen. Mithilfe meines Ebenenfensters stelle ich außerdem sicher, dass das aktuell versteckte Zahnrad in dieser Gruppe enthalten ist Ich werde sie gruppieren und der ersten Interaktion, die automatische Animation verwenden wird, zuweisen und auf methodisch umschalten Sehen Sie, wie es sich bereits an alle anderen Einstellungen erinnert bereits an alle anderen Einstellungen Dann klicke ich weg, wechsle zur Methode, tippe zweimal füge die andere Interaktion hinzu, wodurch wieder in den Standardstatus zurückgeschaltet wird Außerdem wähle ich diese Form hier aus, wechsle in den Designmodus und ziehe sie nach Und wieder verwenden Sie eine der gespeicherten Farboptionen, vielleicht diese, oder wir können eine andere verwenden , nur um hier etwas Abwechslung zu haben. Jetzt können wir wegklicken, auf Zurück klicken, zum Standardstatus zurückkehren und das können wir bereits testen. Es ist eine wunderschöne automatische Animation in Aktion, die zwischen den beiden Bildern, dem Text und der Form im Hintergrund wechselt Text und der Form im Hintergrund Nun, für den letzten Schalter auf dem Bildschirm, müssen wir tatsächlich ein Problem beheben, und das ist etwas, das ich absichtlich dort gelassen habe, nur damit ich Ihnen zeigen kann , was passiert, falls Sie vergessen, etwas einzurichten, und das ist eine Funktion, die als verschachtelte Komponente bezeichnet Um also einen reibungslosen Übergang zwischen den beiden Formzuständen, dem Zylinder und der Kugel, zu schaffen einen reibungslosen Übergang zwischen den beiden Formzuständen, dem Zylinder und der Kugel, Zylinder und der Kugel, und diese coole automatische Animationsfunktion auf ihnen sehen zu können , müssten sie auch zu einer Komponente innerhalb dieser größeren Komponente werden . Aber nur damit du sehen kannst, wie es ohne sie funktioniert. Schauen wir uns einfach noch einmal die Vorschau an. Wenn wir also wechseln, gibt es den einfachen Übergang. Und selbst wenn ich das auf automatische Animation umstelle, wird sich das nicht verbessern Also lass mich dir das zeigen. Zuallererst werde ich in den flexiblen Status wechseln , zweimal hier tippen. Und im Entwurfsmodus ändere ich hier einfach die Form dieses Pfads und lass uns auch einfach seine Farbe ändern, und lass uns auch einfach seine Farbe ändern vielleicht auf diesen Farbverlauf, und ihn dann einfach leicht ändern , damit er nicht mit dem anderen kollidiert. Ich werde das ein bisschen oranger machen. Ich denke, das fängt schon an, mehr herauszustechen. Ich kann es etwas dunkler machen. Ich denke, das wird ganz gut funktionieren. Wenn wir jetzt wieder in den Standardstatus wechseln , können wir es testen man darauf klickt, hat es den Übergang zum Auflösen , weil wir die automatische Animationsoption noch nicht aktiviert haben Animationsoption noch nicht aktiviert Aber wenn ich hier doppelklicke und zum Prototyp zurückkehre, kann ich den Übergangstyp auf Automatisch animieren ändern und die restlichen Einstellungen beibehalten. Dann gehe ich zurück zur Komponente, wechsle in den flexiblen Status, wechsle in den flexiblen Status, doppeltippe erneut und ändere auch hier die Option Automatisch animieren Wenn wir jetzt zum Standardstatus zurückkehren, können wir das testen, indem wir darauf tippen. Sie können sehen, dass wir jetzt eine glatte Animation auf dem Pfad im Hintergrund haben , aber nicht auf diesen Formen. Und das liegt daran, dass dies auch eine Komponente oder eine verschachtelte Komponente werden müsste , damit das funktioniert 9. Verschachtelte Komponenten: Nein, keine Sorge, wenn sich das zu kompliziert anfühlt, müssen Sie diese verschachtelte Komponente nicht erstellen Die Art und Weise, wie es derzeit eingerichtet ist, sieht bereits gut aus, sodass Sie zum nächsten Video springen und mit dem Rest des App-Designs fortfahren Wenn Sie sich jedoch sicher sind, dass Sie bereits alle Konzepte verstanden haben, lassen Sie mich Ihnen diese Lösung für die Erstellung dieser verschachtelten Komponente zeigen die Erstellung dieser verschachtelten Komponente Wir müssen also nur zu den Anfangsjahren zurückkehren, sicherstellen, dass wir sehen, was wir auswählen werden, und dann müssen wir in den Entwurfsmodus wechseln Doppelklicken Sie, um zuerst die Komponente aufzurufen. Und darin haben wir diese Gruppe. Also mache ich nochmal einen Doppelklick. Und innerhalb dieser Gruppe kann ich jetzt den Ring, den Zylinder und den Fluch auswählen . Und während ich das ausgewählt habe, kann ich die Befehlstaste K drücken, wodurch daraus eine Komponente wird Beachten Sie jedoch, dass es sich um eine verschachtelte Komponente handelt, die also in einer anderen Komponente erstellt wurde, sie nicht als Hauptkomponente betrachtet wird Hauptkomponente Objekt, also ist es hier in der oberen linken Ecke nicht gefüllt. Wenn ich also einige Änderungen an dieser Komponente vornehmen möchte, generiert XD die Hauptkomponente außerhalb meiner Zeichenflächen. Lassen Sie mich Ihnen zeigen, wie das funktioniert. Ich muss nur mit der rechten Maustaste klicken und Hauptkomponente bearbeiten wählen. Und los geht's, das ist das neue, das für mich generiert wurde. jetzt keine Gedanken darüber, ob Sie das außerhalb Ihrer Zeichenflächen haben , denn alles, was Sie dieser Version zuweisen , gilt auch für die andere Instanz auf dem Bildschirm Für diese Hauptkomponentenversion können wir jetzt einen neuen Status hinzufügen Ich nenne es einfach Sphäre. Und hier müssen wir wiederholen, was wir zuvor getan haben, indem die Komponente und auch die Maskengruppen öffnen, den Zylinder auswählen, ihn leicht drehen, nach unten ziehen und dann die Kugel auswählen und diese ebenfalls nach unten ziehen Das ist also unser zweiter Status für diese Komponente, und das ist der erste Und damit das hier in dieser Interaktion, die wir erstellt haben, funktioniert und aktualisiert wird. Wir müssen nur darauf zurückkommen, den flexiblen Status wechseln und feststellen, dass sich die verschachtelte Komponente noch nicht ändert Aber jetzt, wo wir uns in diesem Zustand befinden, können wir zweimal und wieder zweimal tippen Und da ist unsere verschachtelte Komponente, der wir zur Sphäre wechseln können Und sobald wir wieder nach draußen tippen, können wir das wieder in den Standardzustand versetzen, und wir können das jetzt testen, und die gute Nachricht ist , dass wir nichts weiter tun müssen Die automatische Animation funktioniert jetzt also auch bei diesen Formen und der Form im Hintergrund voll funktionsfähig auch bei diesen Formen und der , was schon vorher funktioniert hat Aber denken Sie daran, damit das funktioniert, mussten wir diese verschachtelte Komponente erstellen Übrigens können Sie sich viel Zeit sparen, indem Sie Ihre Komponenten im Voraus planen Wenn wir also diese Komponente vor der Erstellung der größeren Komponente erstellt hätten, wäre es nicht notwendig, diese Hauptkomponente außerhalb des Bildschirms zu haben, und die Einrichtung wäre ein bisschen schneller und einfacher gewesen . Wie gesagt, das kann etwas verwirrend und etwas komplexer sein. Es ist jedoch sehr wichtig zu verstehen, wie Sie in XD generell mit Komponenten arbeiten. Und je weiter Sie mit der Verwendung dieses Tools vertraut sind, desto mehr verschachtelte Komponenten wie diese werden Sie verwenden verschachtelte Komponenten wie diese also Ordnung zu halten, werde ich diese Komponente, die unsere Hauptkomponente für dieses Element ist, auf der Zeichenfläche für Elemente verschieben die unsere Hauptkomponente für dieses Element ist, auf der Zeichenfläche für . Außerdem werde ich sie umbenennen und sie Formen nennen Aber die gute Nachricht ist, dass dieser Profilwähler jetzt voll funktionsfähig ändert sich also alles gut, die Animationen sind da und wir können alles unabhängig voneinander ändern unabhängig voneinander Und die einzigen Dinge, die derzeit nicht angeschlossen oder eingerichtet sind, sind das Hilfemenü und die Schaltfläche Aber wir werden das hinzufügen, nachdem wir im nächsten Video alle zusätzlichen Bildschirme erstellt haben im nächsten Video alle zusätzlichen Bildschirme 10. Erstellen des Beratungsbildschirms: Im Vergleich zum Profilbildschirm wird alles andere ziemlich einfach sein. Sie sich also keine Sorgen, falls Sie das etwas komplex und verwirrend fanden . Ich denke, Sie werden den Rest des Prozesses viel einfacher finden . Also werde ich zurück in den Entwurfsmodus wechseln und das Zeichenflächenwerkzeug verwenden, eine neue Zeichenfläche erstellen und diese in Advice Calls umbenennen Und dafür benötigen wir zunächst etwas Text , benötigen wir zunächst etwas Text , den ich hier einfügen werde Wir können das Asset auch von hier aus auf der anderen Zeichenfläche verwenden von hier aus auf der anderen Zeichenfläche Das ist eigentlich das, was wir brauchen. Die gesetzten Ziele können das irgendwo in der Mitte ausrichten. Wir benötigen dann auch dieses Home-Icon, das ich einfach hierher ziehe und dabei die Alter-Optionstaste gedrückt halte. Dann benötigen wir das Berg-Element und dieses Bild und diese Sprechblase oder diesen Textrahmen und dann auch eine Form, die ich später einrichten werde. Aber ja, das sind alle Elemente, die wir am Anfang benötigen werden. Wir müssen hier jedoch auch einige Elemente entwerfen. Zuallererst benötigen wir einen Hintergrund für dieses Symbol, um es ein bisschen interessanter zu machen. Dafür verwende ich das Ellipse-Werkzeug und zeichne damit einfach einen perfekten Kreis Wenn ich die Umschalttaste gedrückt halte, kann ich sicherstellen, dass es sich um einen perfekten Kreis handelt Und ich werde die Farben verwenden, die im Bibliotheken-Bedienfeld gespeichert sind, also Commando Control Shift Y, und dieses Gelb möchte ich für die Feldfarbe verwenden Und ich brauche keinen Rand, also kann ich ihn entfernen. Ich werde sicherstellen, dass es an die Rückseite gesendet wird, indem ich die Tastenkombination verwende oder mit der rechten Maustaste auf An zurück senden klicke. Und dann wählen wir die Berge und ich werde ihre Größe ein wenig Seien Sie jedoch vorsichtig bei der Größenänderung Möglicherweise müssen Sie zuerst die Option für die dynamische Größenänderung deaktivieren und dann die Umschalttaste gedrückt halten , um sicherzustellen, dass die Elemente in dieser Gruppe an derselben Stelle bleiben Ich werde das irgendwo hier platzieren und sicherstellen, dass der Kreis und der Berg irgendwo hier in der Mitte ausgerichtet Dann können wir diese Form hier auswählen und sie horizontal drehen. Und dann bewegen wir es nach unten, und wahrscheinlich müssen wir hier etwas mehr Platz schaffen. Also tippen wir einfach zweimal auf die Zeichenfläche und ziehen sie ein wenig nach unten Und beachten Sie, dass es hier einen Grenzpunkt gibt. Das ist also die Originalgröße des Bildschirms. Und sobald Sie die Größe vertikal erhöhen, bedeutet dies, dass automatisch ein vertikales Scrollen aktiviert wird . Jetzt können wir diese Form nach unten verschieben, vergrößern und dann das Bild auswählen und sicherstellen, dass es nach vorne kommt. Bringen Sie es also nach vorne. Lass uns das einfach vergrößern. erneut sicher, dass die Option zur responsiven Größenänderung deaktiviert ist und Sie die Umschalttaste gedrückt halten , während Sie die Größe ändern, damit das hier irgendwo auftauchen kann Und dann die Sprechblase, ich möchte eigentlich auch vorne sein, damit das irgendwo da sein kann Jetzt kann alles etwas nach oben kommen, und dann kann die Zeichenfläche auch etwas nach oben verschoben werden . Irgendwo da in der Nähe Nun, ich möchte , dass du eine Funktion für diese Form aktivierst. Es ist die feste Position beim Scrollen. Wenn Sie das also einschalten und diesen Bildschirm testen, werden Sie feststellen, dass sich diese Form tatsächlich nicht auf und ab bewegt, was mir sehr gut gefällt Aber es gibt noch andere Dinge, die wir hier korrigieren müssen, insbesondere für das Menü. Aber vorerst möchte ich nur sicherstellen, dass wir alle für den Bildschirm erforderlichen Elemente haben, und diese Home-Taste sollte etwas kleiner sein. Also werde ich die Größe einfach ändern. Und richte es hier in der Ecke aus. Und dann brauchen wir auch ein Menü auf der linken Seite, für das ich das Linienwerkzeug verwenden werde . Wenn ich die Umschalttaste gedrückt halte, kann ich eine gerade Linie zeichnen, deren Dicke auf zwei Punkte erhöhen, die Rahmenfarbe auf Schwarz ändern und runde Kappen hinzufügen und dann näher zoomen Ich kann sicherstellen, dass wir drei davon haben. Also klicken und ziehen Sie einmal und dann wieder, um sicherzustellen, dass wir den gleichen Abstand zwischen ihnen haben. Möglicherweise benötigen Sie eine etwas breitere Form wie diese. Und wenn ich Symbole erstelle, möchte ich immer eine leere Form dahinter erstellen, was dazu beiträgt, einen größeren Bereich zu erstellen, auf den wir tippen können, anstatt uns nur auf diese kleinen dünnen Linien zu verlassen. Beachten Sie also, wie ich diese Form hier erstellt habe, aber sie wird unsichtbar sein. Ich werde die Füll- und Randfarben ausschalten. Aber dann wähle ich hier alles aus, also die drei Linien, die die Form leeren, und verwandle diese in eine Komponente, indem ich den Befehl Strg K drücke Alle Symbole, die Sie auf mehreren Bildschirmen verwenden , sollten immer als Komponenten eingerichtet werden Denn auf diese Weise können Sie ganz einfach zu Ihrer Hauptkomponente zurückkehren, einige einfache Änderungen vornehmen, und Sie werden sehen, wie sich die Aktualisierungen auf allen anderen Bildschirmen widerspiegeln Ganz zu schweigen von der Tatsache , dass Sie die Interaktion des Menüs nur einmal erstellen müssen die Interaktion des Menüs nur einmal erstellen und dies auch auf allen Bildschirmen wiederholt wird. Das ist also als Komponente fertig. Und ich werde dasselbe mit dem Home-Icon machen. Also werde ich wieder ein Rechteck verwenden, hier zeichnen und sicherstellen, dass es an dieser anderen Form ausgerichtet ist. Und dann schalte ich die Rahmen- und Feldfarben aus, aber sicher, dass sowohl das Startsymbol die Form um es herum ausgewählt sind, und drücke dann Befehl oder Strg K und verwandle das auch in eine Komponente. Jetzt werden diese Komponenten in Ihrem Bereich für Dokumentenressourcen angezeigt , und dort können Sie sie einfach Startseite und Menü nennen. 11. Den Beratungsbildschirm abschließen: Und schließlich müssen wir hier auf der rechten Seite auch einen Pfeil erstellen, für den ich das Stiftwerkzeug verwenden werde. Tippen Sie auf einen Klicken Sie dann irgendwo hier auf der rechten Seite und dann erneut hier, versuchen Sie, die gleiche Größe zu erzielen. Sie können dies jedoch später jederzeit anpassen. Aber im Moment bin ich mit dem Aussehen zufrieden, also kann ich die Dicke erhöhen vielleicht auf drei oder fünf Punkte. Stellen Sie auch runde Kappen und runde Fugen ein. Die Randfarbe sollte schwarz sein, und das ist der Pfeil, den wir brauchten. Ich werde die Größe nur leicht ändern. Genau wie zuvor werde ich dafür einen Begrenzungsrahmen um ihn herum erstellen, um es einfacher zu machen mit diesem Symbol zu interagieren Richten Sie es etwas näher und schalten Sie dann die Sichtbarkeit aus, wählen Sie sie alle zusammen aus, gruppieren Sie sie zuerst als Commando Control G und duplizieren Sie es auf der linken Seite, drehen Sie es Und jetzt können wir für jede dieser Richtungen eine Komponente erstellen für jede dieser Richtungen Also der nach links und der nach rechts. Also benutze ich jeweils Commando Control K, und ich nenne diesen einfach rechts und den anderen links Und wir werden die linke Seite auf diesem ersten Bildschirm nicht wirklich brauchen. Wir werden das später entfernen, aber vorerst kann es dort bleiben. Und jetzt, wo wir alles an seinem Platz haben, können wir diese Zeichenfläche einfach duplizieren, indem wir mit dem Auswahlwerkzeug die Alter-Taste drücken und ziehen, und dann wird unsere zweite Zeichenfläche AMH sein. Das ist der Titel Kann den Text schon hier ändern. Ziele hoch. Wir können den Kreis an seiner Position belassen, das Bild löschen und das Objekt mit der Option „Darts ändern“ herunterfahren, es hierher ziehen, es vergrößern, nachdem wir die Option zur dynamischen Größenänderung entfernt und die Umschalttaste gedrückt gehalten haben, können wir es irgendwo dort ausrichten Dann können wir all diese Dinge unten löschen, und stattdessen benötigen wir dieses Bild hier Wir können die Größe bereits ändern. Und dann brauchen wir diesen Text. Und ich werde diese Form verwenden. Drehe es einfach horizontal um. Beachten Sie, dass die feste Position beim Kritzeln bereits aktiviert ist Ich mache es größer, schicke es nach hinten und trage diese Farbe darauf auf Ich möchte sichergehen, dass es keine Tangenten gibt, Beispiel, dass diese Sprechblase gerade genau am Rand dieser Form ausgerichtet ist dass diese Sprechblase gerade genau am Rand dieser Form ausgerichtet Wir wollen also sicherstellen, dass es dort eine schöne Trennung und einen schönen Kontrast gibt Das sieht perfekt aus. Lass uns weitermachen und die nächste Zeichenfläche erstellen Nochmals, ich dupliziere das nur. Das hier nenne ich Boost. Der Text kann sich hier schon ändern. Geben Sie Boost selbst ein, können die Pfeile entfernen und all diese Elemente Und in diesem Fall brauchen wir die Rakete Also kopiere ich das einfach und richte es hier in der Mitte aus. Wir brauchen dieses Bild. Wir brauchen die Kopie, und wir brauchen dieselbe Form, die wir hier verwenden, aber auf die andere Seite gedreht und zu diesem Farbverlauf gewechselt Lassen Sie mich einfach etwas näher heranzoomen , um sicherzugehen, dass alles richtig eingerichtet ist Das kann also größer nach vorne gestellt und irgendwo dort aufgestellt werden. Ich finde, das sieht ganz nett aus. Die Rakete kann auch etwas größer sein. Stellen Sie einfach sicher, dass Sie die dynamische Größenänderung deaktivieren, halten Sie die Umschalttaste gedrückt und ändern Sie die Größe ein wenig Es kommt also nur ein bisschen aus diesem Kreis heraus. Und als letztes haben wir noch einen Bildschirm. Nochmals, kopiere das einfach und benenne das eigentliche Art Board um und nenne es share it. Derselbe Text steht hier, teile ihn. Auch hier können wir diese Elemente löschen. Und bring das Megaphon rein , das kann es hier ein bisschen vergrößern Dann brauchen wir diese Form, vergrößern Stellen Sie sicher, dass die feste Position beim Scrollen aktiviert ist. Dann brauchen wir dieses Bild ebenfalls vergrößert und dann den letzten Textrahmen Also zoome jetzt näher heran. Wir können die Dinge wieder ausrichten, sicherstellen, dass das Bild oben ist, aber es den Text auf dem Textrahmen nicht verdeckt, und die Form kann vielleicht etwas breiter sein und einfach so nach außen zugeschnitten So schnell und einfach war es , diese zusätzlichen Bildschirme einzurichten Da wir alle visuellen Elemente und Texte bereit hatten, haben wir natürlich viel Zeit gespart. Aber im nächsten Video werden wir einige unterhaltsame Interaktionen für diese Bilder einrichten, und auch die Interaktion, um vom Profilbildschirm zu den Beratungsbildschirmen zu wechseln und auch zwischen diesen Bildschirmen wechseln zu können. 12. Animationen einrichten: Beginnen wir mit der Erstellung der ersten Interaktion auf diesem Zielbildschirm. Zunächst möchte ich, dass Sie die Form im Hintergrund und das Bergbild auswählen Hintergrund und das Bergbild und daraus eine Komponente machen. Das ist Commando Control K. Jetzt können wir dafür einen neuen Status erstellen, indem wir auf das Pluszeichen klicken, und den neuen Status können Sie umbenennen oder ihn einfach als Standardstatus zwei beibehalten Aber was noch wichtiger ist, ist, dass wir darauf doppelklicken müssen doppelklicken müssen , um den Berg auswählen zu können Und wenn wir dann in den Ebenen Commando Control Y drücken, können wir diese Gruppe öffnen Und Sie werden feststellen, dass es hier tatsächlich mehr Elemente Das ist wieder etwas, das ich im Photoshop vorbereitet habe . Obwohl es sich um ein flaches gerendertes Bild handelte, habe ich die Flagge getrennt und sogar zwei Versionen davon erstellt Wir haben eine violette Version und eine grüne Version, alle auf separaten Ebenen angeordnet Ich möchte also, dass in diesem neuen Staat sowohl die lila als auch die grüne Flagge gehisst werden. Also habe ich sie einfach ausgewählt, und dann kann ich sie mit Shiftpero nach oben ziehen, bis sie sich knapp außerhalb des Kreises befindet, aber immer noch hinter dem Berg zu sehen ist, sodass Sie sie nicht zu hoch heben möchten , bis sie hoch heben möchten , bis Aber ja, ich glaube, ich werde es einfach irgendwo hier haben Und wenn beide gehisst sind, stellen Sie sicher, dass Sie die Sichtbarkeit der lila Flagge ausschalten . Es ist wichtig, dass zuerst beide Flaggen gehisst werden und erst danach die Sichtbarkeit ausgeschaltet wird, da dies erforderlich ist , damit die automatische Animation reibungslos funktioniert Aber jetzt können wir einfach nach draußen klicken, diese Komponente auswählen und zum Standardstatus zurückkehren und zwischen diesen beiden Zuständen wechseln, indem wir nur überprüfen, wie sie aussieht Damit bin ich zufrieden. Aber damit das tatsächlich funktioniert. Wenn ich zum Standardstatus zurückkehre, kann ich in den Prototypmodus wechseln und einfach auf diesen kleinen Pfeil hier klicken und die automatische Animation gedrückt halten , um in den zweiten Status zu wechseln Dann wechseln wir zu Status zwei. Und weisen Sie dort auch eine weitere Interaktion zu, die mit den gleichen Einstellungen in den Standardstatus zurückkehrt . Kehren wir nun zum Standardstatus zurück und drücken Commando Control Enter , um schnell zur Vorschau zu springen , wo wir das bereits testen können, und es geht in beide Richtungen Wie cool ist das? Also lass uns hier dasselbe mit den anderen Bildern machen. Ich beginne erneut damit, diese auszuwählen und sie in eine Komponente umzuwandeln. Wenn wir zurück in den Entwurfsmodus wechseln, können wir ihm den neuen Status hinzufügen. Und sobald dieser neue Status erstellt ist, können wir zweimal darauf tippen. Wählen wir zunächst innerhalb dieser Gruppe das Board aus, und wir können es einfach in der Größe ändern Halten Sie auch hier die Umschalttaste gedrückt, um sicherzustellen , dass wir die Proportionen nicht durcheinander bringen Außerdem werde ich es leicht drehen. Und dann kann dieser Pfeil auch gedreht werden und dann so nach unten in die Mitte bewegt Wenn wir jetzt nach draußen klicken, können wir den Standardstatus und den anderen Status überprüfen Ich finde, das sieht wirklich gut aus. Und jetzt wechseln wir in den Prototypmodus und fügen dem zweiten Zustand die automatische Animation hinzu Und für den zweiten Status möchten wir auch die Animation hinzufügen, die zum Standardstatus zurückkehrt Jetzt können wir das testen und es funktioniert perfekt. Machen wir dasselbe auf dem dritten Beratungsbildschirm. Wir wählen erneut all diese Elemente aus, und im Entwurfsmodus verwandle ich sie in eine Komponente füge dann den neuen Status hinzu. Und im neuen Zustand möchte ich, dass die Rakete ein bisschen aus dem Rahmen herauskommt und sich vielleicht auch dreht, und der Rauch kann sich auch drehen und nach draußen gehen oder vielleicht nur leicht in diese Richtung. Die Rakete kann auch etwas größer sein. Es fühlt sich also an, als würde sie auf uns zukommen. Also lass uns das vorher und nachher schnell sehen. Ja, ich denke, das funktioniert gut. Und dann wechseln wir in den Prototypmodus und weisen der ersten Interaktion zu, in den zweiten Zustand zu wechseln. Dann wollen wir vom zweiten Zustand zum Standardstatus zurückkehren und ihn dann erneut schnell testen können. Da ist er. Wirkung. Und zu guter Letzt möchten wir diese auch zu einer Komponente machen. Hier möchte ich jedoch auch einige Elemente hinzufügen, indem ich das Pano verwende Alles, was Sie tun müssen, ist, mit dem Pano eine kleine Form wie diese zu zeichnen mit dem Pano eine kleine Form wie diese Es ist also wie ein kleiner Blitz. Aber wir brauchen die Randfarbe nicht. Stattdessen wollen wir eine rote Farbe verwenden. Ich verwende das Hydroper-Tool und probiere eine Farbe aus dem Megaphon Das wird also eine Form sein, die wir brauchen werden. Und lassen Sie uns das ein und ein anderes Mal duplizieren. Die in der Mitte können wir vertikal drehen, und dann können wir sie einfach drehen, vielleicht die Größe etwas ändern, und dann möchte ich sie ausrichten Ungefähr dort, wo sie landen werden. Aber jetzt wähle ich alle drei aus und verschiebe sie dann mit der linken Klammer der Kommandosteuerung, bis sie hinter das Megaphon kommen Sie befinden sich also vor der Form, dem gelben Kreis , aber hinter dem Megaphon, und das ist einfach schön und v und das ist einfach schön und Nachdem wir nun alle zusammen ausgewählt haben, können wir unsere Komponente erstellen und ihr dann einen neuen Status hinzufügen Und in diesem neuen Zustand möchte ich die Dinge ein wenig verschieben. Zuallererst möchte ich, dass dieses Bild größer wird, vielleicht auch rotiert. Und dann diese Teile auswählen zu lassen. Wir können sie einfach herausnehmen und sie vielleicht ein wenig vergrößern. Lassen Sie uns also zum Standardstatus zurückkehren und zwischen den beiden Zuständen wechseln Wir können uns nur eine kurze Vorschau davon ansehen , wie das aussehen wird. Aber um die automatische Animationsfunktion hinzuzufügen, wechseln wir zum Prototyp und klicken auf diesen ausgewählten Status zwei Und dann wollen wir für Status zwei eine weitere Interaktion hinzufügen, und das Ziel ist diesmal der Standardstatus Noch einmal, wenn wir eine Vorschau darauf machen , funktioniert es perfekt. 13. Interaktionen zwischen Bildschirmen: Jetzt ist es an der Zeit, die Interaktionen zwischen diesen Bildschirmen einzurichten , und ich brauche eigentlich keinen Pfeil auf dieser Seite. Außerdem brauche ich diesen Pfeil auf der linken Seite nicht. Also drücke ich einfach die Rücktaste, während ich sie ausgewählt habe, und wir können mit diesem Pfeil beginnen. Im Prototypmodus klicken und ziehen wir den blauen Pfeil, um eine Interaktion mit dem Ziel auf der zweiten Zeichenfläche einzurichten eine Interaktion mit dem Ziel auf der zweiten Zeichenfläche Und für die Art der Animation hier möchte ich Transition verwenden Und für die Animation möchte ich Push Left anstelle von Dissolve verwenden. Die Dauer und die Lockerung können so sein, wie sie standardmäßig sind. Noch einmal, wenn ich nur eine Vorschau davon ansehe, habe ich das Gefühl, dass es schnell genug ist, und ich denke, es funktioniert gut Nachdem wir diesen eingerichtet haben , können wir mit dem anderen Rechtspfeil weitermachen die Interaktion bis zum nächsten Bildschirm erstellen. Beachten Sie, dass es wieder dieselben Einstellungen verwenden wird. Also können wir diesen einfach sehr schnell einrichten und die Interaktion auf den letzten Bildschirm verschieben. Also überprüfe ich nur, ob sie alle auf dem richtigen Weg sind. Und dann fangen wir mit diesem an. Das ist also der Rückwärtsübergang. Von hier aus wollen wir dorthin gehen. Und statt Push Left wollen wir Push Right verwenden, es gelten die gleichen Einstellungen. Dann kann dieser wieder dorthin gehen, dieselben Einstellungen. Und dann kann dieser endlich mit den gleichen Einstellungen dorthin gehen. Wenn wir das jetzt testen, können Sie sehen, wie wir zwischen den vier Beratungsbildschirmen wechseln können . Das funktioniert also perfekt. Und jede dieser Animationen können wir auch testen. Sie funktionieren immer noch genau so, wie wir es wollten. Und schließlich müssen wir auch sicherstellen, dass wir vom Profilbildschirm aus zum ersten Beratungsbildschirm springen können. also zunächst sicher, dass Sie die Schaltfläche und den Text zusammen ausgewählt haben. Sie können daraus entweder eine Gruppe oder eine Komponente machen. Das ist Commando Control G, wenn du daraus eine Gruppe machen willst , oder Commando Control K, wenn du es zu einer Komponente machen willst Der Hauptunterschied zwischen den beiden besteht darin, dass Sie, wenn Sie eine Komponente erstellen, ihr oder einer Animation neben der Anwendung einer Interaktion auch immer Status zuweisen können Animation neben der Anwendung einer Das ist hier also nicht wirklich wichtig, weil ich keine Animation auf der Schaltfläche erstellen werde, sondern nur die Interaktion schnell bis zum ersten Hinweisbildschirm erstellen werde. Und in diesem Fall möchte ich Push Left verwenden. Also lasst uns das auch testen. auf eine dieser Optionen klicken, können wir die Schalter immer noch ändern Und wenn wir mit der Auswahl zufrieden sind und auf Antworten erhalten klicken, auf Antworten erhalten klicken, gelangen wir zum ersten Bildschirm mit Ratschlägen, den wir erstellt haben Und da wir alle unsere Zeichenflächen fertig haben, schließen wir einfach auch den Willkommensbildschirm Nachdem wir diesen ausgewählt haben, möchten wir diesen als Startbildschirm einrichten also im Prototypmodus auf dieses kleine Symbol klicken , richten wir unseren ersten Flow ein. Dieser kann in App umbenannt werden. Und dann möchte ich von hier aus einen Zeitauslöser für den nächsten Bildschirm erstellen. Also werde ich diesen Pfeil einfach dorthin ziehen. Und anstatt zu tippen, stelle ich das auf Zeit und stelle es vielleicht auf 3 Sekunden ein. Und die Animation kann diesmal auf Push Up eingestellt werden, und vielleicht kann die Dauer auf 1 Sekunde eingestellt werden. Schauen wir uns das mal an, wenn wir das nach 3 Sekunden testen , wird es runter gehen. Ich denke, der Ease Out sollte auf Ease In Out geändert werden. Lassen Sie uns das noch einmal testen. Ja, das ist viel besser. Aber die Dauer kann vielleicht noch länger sein 1,5 Sekunden, noch ein Test. Ja, das ist viel schöner und flüssiger. Jetzt können wir alle Kunsttafeln oder alle Bildschirme, die wir erstellt haben, durchsuchen Und im nächsten Video werden wir alle zusätzlichen Navigationsoptionen wie das Hauptmenü hinzufügen alle zusätzlichen Navigationsoptionen wie das , das Home-Symbol anschließen und auch die Hilfeoption für den Profilbildschirm hinzufügen 14. Sticky-Menüs: Das erste, was wir korrigieren müssen, ist sicherzustellen, dass unser Menü immer sichtbar ist. Lass mich dir zeigen, was ich meine. Wenn ich eine Vorschau davon ansehe und scrolle, verschwindet das Menü oben, sodass es schwierig sein wird, zu wechseln, ohne erneut nach oben scrollen zu müssen. Deshalb möchte ich, dass dieses Menü hier immer sichtbar ist, und wir nennen es normalerweise ein Sticky-Menü. Und um dies tun zu können, zunächst im Designmodus werde ich zunächst im Designmodus ein Rechteck hinter diesen Elementen zeichnen. Ich werde dafür sorgen, dass es vorerst ganz nach hinten geht. Zieh das nach oben, vielleicht irgendwo hier in der Nähe. Übrigens, ich behalte den Text hier, weil ich weiß, dass da eine Kerbe am Telefon ist, also sollte er sich nicht überschneiden. Aber für diese Form möchte ich keinen Rand verwenden, sondern nur ein weißes Feld Aber habe diese Option aktiviert , die als Hintergrundunschärfe bezeichnet wird. Wir können die Einstellungen dafür später verfeinern. Aber vorerst möchte ich auch alles hier oben auswählen und sie mit Commando Control G gruppieren . Und sobald sie zu einer Gruppe werden, können wir ihre Position beim Scrollen Das macht es zu einem Sticky-Menü. Wenn es das jetzt testet, wenn ich scrolle, kannst du sehen, dass sie alle oben bleiben, und wir haben diese coole Funktion zur Hintergrundunschärfe auf diesem Bildschirm eingerichtet Wenn wir wollen, können wir jederzeit zurückgehen, darauf doppelklicken und dann die Einstellungen anpassen Ich könnte die Belichtung reduzieren und vielleicht die Deckkraft der Form selbst auf 20% erhöhen Also lass uns das einfach testen. Ja, ich finde, das sieht ein bisschen besser aus. Vielleicht kann die Exposition erhöht werden. Schauen wir es uns noch einmal an. Ja, etwas besser. Ich finde, das sieht gut aus. Und wir müssen tatsächlich dasselbe auf diesen anderen Bildschirmen tun. Aber um Zeit zu sparen, werde ich sie tatsächlich einrichten sobald dieses erste Menü voll funktionsfähig ist. Also werde ich diese Lüfter tatsächlich löschen. Also all die Elemente , die wir hier vorbereitet haben, können wir einfach mit der Rücktaste drücken und sie löschen. Das wissen wir Wir werden sie dort hinzufügen, aber lassen Sie uns einfach zu dieser ersten Instanz zurückkehren und in den Prototypmodus wechseln. Doppelklicken Sie darauf. Ich kann das Home-Symbol auswählen. Und das wird mit dem Profilbildschirm verknüpft. Und in diesem Fall hätte ich einfach gerne einen normalen Auflösungsübergang , der wie ein Verblassen ist. Easing and out for easing ist gut. Aber die Dauer kann vielleicht auf 0,6 Sekunden eingestellt werden. Also können wir das testen und sehen, wie es sich anfühlt. Ich finde das gut. Es könnte ein bisschen zu langsam sein, also können wir einfach wieder hierher zurückkehren , das auswählen und auf 0,4 Sekunden herunterfahren. Lass uns das noch einmal machen. Ja. Ich denke, das ist in Ordnung. Aber das war einfacher einzurichten. Für das eigentliche Menü müssen wir außerdem eine separate Kunsttafel erstellen , auf der unsere Menüelemente gespeichert werden. Es wird also wie ein Dropdown- oder Popup-Menü sein. Und dafür werde ich diese neue Zeichenfläche direkt über diesen anderen Zeichenflächen erstellen neue Zeichenfläche direkt über diesen anderen Zeichenflächen Im Entwurfsmodus, wenn ich zum Zeichenflächenwerkzeug wechsle, erstelle ich zunächst einfach eine Zeichenfläche, aber das muss keine Zeichenfläche mit voller Höhe sein, also kann sie etwas kürzer sein So wie das. Ich rufe dieses Menü und wir können ein bisschen näher heranzoomen. Und zuallererst werde ich hier eine Form erstellen, die das Menü selbst sein wird. Wir können runde Ecken hinzufügen. Aber wir brauchen keine runden Ecken auf allen Seiten. Also hier in den Optionen können wir auf dieses kleine ToGo klicken und wir können den Radius für alle Ecken finden Ich möchte oben links und rechts auf Null setzen. Also das sind die ersten und die zweiten, müssen auf Null gesetzt werden. Es gibt einen subtilen Hinweis darauf , welche Ecke Sie beeinflussen , wenn Sie eine Zahl auswählen. Diese kleine blaue Linie dort zeigt Ihnen also, dass Sie mit der oberen linken Ecke oder der oberen rechten Ecke arbeiten. Oder Sie können auch einfach ein bisschen warten und Sie erhalten den Tooltip, der Ihnen sagt, welcher welcher ist. Aber jetzt, wo wir das eingerichtet haben, werde ich die Randfarbe entfernen. Ich werde die Feldfarbe eingeschaltet lassen. Aber dann füge ich einen Schlagschatten hinzu, und ich werde die Sichtbarkeit oder Opazität erhöhen , indem ich auf das Farbfeld klicke und es einfach nach oben ziehe , wahrscheinlich Und dann die Unschärfe, werde ich ebenfalls auf 15 setzen, sodass ein etwas weicherer Rand entsteht Vielleicht sind 50% ein bisschen zu hart. Also lass es uns einfach auf 30% reduzieren. Ja, das ist etwas subtiler. Ich finde, das sieht besser aus. Jetzt kopiere ich den Text von hier. Also brauchen wir alle vier, duplizieren sie und richten sie alle links aus. Und dann lassen Sie uns das einfach nach unten verschieben. Schieb das nach oben. Die Reihenfolge sollte also darin bestehen, zuerst Ihre Ziele festzulegen, dann hohe Ziele zu setzen, dann sich selbst zu steigern und sie dann endlich zu teilen. Sobald ich diese Reihenfolge habe, kann ich den Text hier einfügen, und vielleicht können wir die Größe etwas reduzieren, auf 18 Punkte. Ich denke, das wird besser passen. noch einmal eine Linie, und dann können wir sie einfach in diesem Drop-down-Menü ausrichten. Und wir brauchen hier nur ein X-Symbol, das wir bereits in den Assets vorbereitet haben. Ich kann das hier einfach wieder runterziehen. Stellen Sie es irgendwo dort auf, und dieses X kann eine Komponente sein. Also drücke ich Befehl oder Strg K, aber das gesamte Menü sollte auch eine Komponente sein. Also wähle ich alles zusammen aus. Drücken Sie erneut die Befehlstaste oder die Strg-Taste K. Da wir in diesem Fall also zuerst eine Komponente für ein Element erstellt haben , das sich innerhalb der Hauptkomponente befinden wird, wurde die Verschachtelung in der richtigen Reihenfolge eingerichtet Denken Sie daran, als wir zuvor Probleme hatten , diese verschachtelte Komponente zu erstellen, können Sie sehen, dass die richtige Reihenfolge immer darin besteht, zuerst mit der Erstellung einer Komponente zu beginnen, die dann in eine andere Komponente eingebunden wird Und Sie können sogar mehrere Ebenen von Komponenten ineinander verschachteln Und solange Sie mit dem kleinsten Element beginnen und sich dann nach außen vorarbeiten und die zusätzlichen Komponenten erstellen, die zusätzlichen Komponenten erstellen, werden Sie keine Probleme haben, sie richtig einzurichten 15. Menü-Overlay: Jetzt, wo wir dieses Menü haben, müssen wir es mit den anderen Bildschirmen Wechseln wir also in den Prototypmodus. Und hier doppelklicke ich, bis ich das Menüsymbol auswählen und es auf diese Zeichenfläche ziehen kann das Menüsymbol auswählen und es auf diese Zeichenfläche ziehen Standardmäßig ist dies ein normaler Übergang, aber wir möchten dies in Overlay ändern, wodurch diese durchgezogene Linie in eine gestrichelte Linie umgewandelt wird Auf diese Weise zeigt XD an, was wir tun. Beachten Sie auch, dass wir eine Vorschau darauf erhalten , wo dieses Overlay angezeigt wird Und das ist tatsächlich etwas, das wir bis hierher hochziehen können Dort möchte ich, dass es auftaucht. Und die Animation würde ich gerne runterrutschen. Wir können bequem rein und raus gehen. Vielleicht sind 0,4 Sekunden gut, und wir können das einfach testen. Mal sehen, wie es funktioniert. Wenn wir darauf klicken, erscheint das Menü. Wenn ich irgendwo draußen klicke, verschwindet es wieder, kommt runter, verschwindet und ist übrigens ein Standardverhalten in XD. Immer wenn Sie in einem Overlay-Element auf AA klicken, wird die ursprüngliche Animation automatisch umgekehrt Allerdings möchte ich es auch immer gerne schließen, wie dieses hier Und das Gute ist, dass Sie dem eigentlich keine Interaktion zuweisen müssen , denn solange es hier kein aktives Element gibt, schließen wir durch Anklicken auch das Menü, genau wie wenn Sie irgendwo anders klicken, Ausnahme der aktiven Elemente, die wir für diese Textobjekte einrichten . Um das zu tun, muss ich nur zu unserem Menü zurückkehren. Doppelklicken Sie, wählen Sie den ersten Text und ziehen Sie ihn auf diesen Bildschirm. Diesmal müssen Sie jedoch vorsichtig sein, um zurückzugehen und die Overlay-Option auf Übergang zu ändern Das Overlay ist also nur erforderlich, um dieses schwebende Menü aufzurufen Von diesem schwebenden Menü aus möchten Sie jedoch mit einem normalen Übergang zu diesen Bildschirmen wechseln, nicht mit einem Overlay Der Grund, warum es standardmäßig mit Overlay angezeigt wurde, liegt darin , dass dies die zuletzt verwendete Aktion oder der zuletzt verwendete Aktionstyp war Stellen Sie also sicher, dass Sie nicht vergessen, dies für den Übergang zu ändern Und dann, was das Menü angeht, empfehle ich die Verwendung von Dissolve, und du kannst es wahrscheinlich als Out und vielleicht 0,3 Sekunden verwenden. Lassen Sie uns einfach dasselbe für die anderen drei Bildschirme einrichten. Wir müssen hier nichts ändern. Jetzt merkt es sich wieder die letzten Einstellungen, und dieses Mal ist es kein Overlay Es ist der Übergang, also die richtige Option. Also, um es zu teilen, wir haben den letzten da. Jetzt ist dieses Menü vollständig angeschlossen, sodass wir es testen können Wir klicken hier, kommen runter, wir springen auf ein Hoch und wir können wieder hierher zurückkehren, wieder Boot selbst auswählen, geht an die richtige Stelle und dann können wir es auch teilen Und auch hier können wir problemlos zwischen diesen navigieren. Aber jetzt können wir das Sticky-Menü auch auf all diesen Bildschirmen hinzufügen. Also können wir das einfach duplizieren. Der schnellste Weg, dies zu tun, besteht darin, zum Kopieren die Befehlstaste oder die Ctrl-Taste zu drücken und dann die nächste Zeichenfläche auszuwählen Drücken Sie Commando Control V, wir fügen es genau an derselben Stelle ein, dasselbe hier, dasselbe Und beachten Sie, dass bereits alles angeschlossen ist. Das Home-Symbol kehrt also zum Profilbildschirm zurück. Das Menü zeigt dieses Overlay an, und das einzige, was wir ändern müssen, sind die Titel Doppelklicken wir also auf die Eingabe eines h. Für dieses möchte ich Boost selbst verwenden Und hier, gib share it ein und fertig. Wir können das noch einmal testen. Sie können das Menü verwenden, um zum nächsten Bildschirm zu springen. Wir können nach oben und unten scrollen, um unser Sticky-Menü oben mit dieser Funktion zur Hintergrundunschärfe zu testen unser Sticky-Menü oben mit dieser Funktion zur Hintergrundunschärfe Wir haben auch unsere Animationen. Das Menü funktioniert hier genauso wie zuvor. Wir können zum nächsten Bildschirm springen, nach oben und unten scrollen funktioniert, Animation funktioniert. Die Pfeile sollten auch funktionieren. Aber lass uns einfach das Menü testen und teilen, dass es an der richtigen Stelle ist. Das Scrollen funktioniert auch, und das Home-Symbol sollte auch von jedem dieser Bildschirme aus funktionieren 16. Einrichtung des Bildschirms im Hilfe-Menü: Da wir wieder auf dem Profilbildschirm sind, sollten wir nicht vergessen, das Hilfemenü einzurichten, das sehr ähnlich wie das andere Menü funktionieren wird , das wir erstellt haben. Ich zoome einfach wieder heraus, verschiebe die Elemente aus dem Weg und erstelle im Entwurfsmodus mithilfe des Zeichenflächenwerkzeugs eine neue Zeichenfläche Ich erstelle einfach diese neue Zeichenfläche, und ich werde sie umbenennen und sie Hilfe nennen Ich kann das irgendwo hier platzieren. Und jetzt können wir dieses andere Element einfach wiederverwenden. Aus dieser Komponente heraus haben wir einen Doppelklick gemacht, diese Form ausgewählt, sie kopiert und dann hier eingefügt Wir werden sie einfach drehen, also ziehen wir sie nach oben und platzieren sie in dieser Ecke. Wir müssen es wahrscheinlich länger machen, und dann können wir einfach diese X-Komponente kopieren und sie in die obere rechte Ecke platzieren. Auch hier müssen wir das nicht wirklich verknüpfen. Stellen Sie einfach sicher, dass es da ist, und dann kopieren wir diesen Text, den ich vorbereitet habe, und fügen ihn einfach hier ein, vielleicht brauchen wir dafür etwas mehr Platz. Und ja, ich finde, das sieht gut aus. Ich kann das jetzt einfach ein bisschen nach oben ziehen. Und das ist alles, was wir für dieses andere Overlay brauchten , das wir erstellt haben Für diese Zeichenfläche ist es jedoch wichtig, die Feldfarbe im Hintergrund auszuschalten Andernfalls wird das, was sich darunter befindet, vollständig verdeckt was sich darunter befindet, vollständig verdeckt Es gibt auch etwas für das Menü, es ist wichtig, dass Sie sicherstellen, dass Sie es tun. Aber XD entfernt die Datei standardmäßig , sobald Sie die Overlay-Interaktion erstellt haben Wofür, wenn Sie sich erinnern, nur zwei Dinge notwendig sind zunächst sicher, dass auf dieser neuen Zeichenfläche all diese Elemente in einer Komponente zusammengefasst sind Das ist Commando Control K. Und dann in der Prototyp-Option wenn wir dann in der Prototyp-Option das Fragezeichen auswählen, wollen wir sicherstellen, dass es mit dieser Zeichenfläche verknüpft ist Wie dem auch sei, wenn ich Symbole verwende, möchte ich immer einen größeren Begrenzungsrahmen um sie herum erstellen einen größeren Begrenzungsrahmen Das ist also einfach etwas, das ich nicht vergessen möchte, hier auch hinzuzufügen Ich werde einfach diese Form zeichnen, sodass viel mehr Platz um darauf zu tippen, denn es gibt nichts Ärgerlicheres , als ein paar Mal irgendwo tippen zu müssen, um die Interaktion starten zu können. Also werde ich Rahmen und Füllung ausschalten, aber das alles zusammen auswählen und daraus eine Komponente Und jetzt, wo es sich um eine Komponente handelt, kann ich zurück zum Prototyp wechseln, es in diese neue Zeichenfläche einbinden und auch als Overlay-Übergang einrichten Diesmal kann die Animation nach links verschoben werden , weil sie von rechts kommt, also wird sie nach links verschoben. Und die Ausrichtung ist schon gut. Da ich exakt dieselbe Zeichenflächengröße verwende, musste ich hier keine manuelle Positionierung vornehmen. Und anstatt einfach zu entspannen, denke ich, dass Ease In Out besser ist und vielleicht 0,5 Sekunden dafür Also lass uns das einfach testen. Wenn ich auf die Hilfe klicke, kommt sie rein, und egal, wo ich klicke, sie wird sie verstecken. Also kann ich wieder darauf klicken, irgendwo anders klicken, so weiter und so fort. Übrigens, wenn Sie möchten, dass die Details im Hintergrund etwas unscharf sind, können Sie hier auf der Hilfe-Zeichenfläche jederzeit ein weiteres Rechteck hinzufügen hier auf der Hilfe-Zeichenfläche jederzeit ein weiteres Rechteck Ohne den Rand, nur eine Wohlfühlfarbe. Stellen Sie sicher, dass es vollständig im Hintergrund angezeigt wird, und klicken Sie dann einfach auf Hintergrundunschärfe. Wenn wir also wieder hierher kommen, wenn ich das mache, wird dort diese Unschärfe auftauchen Das einzige Problem ist, dass es auch in dieser Hintergrundunschärfe gleitet , anstatt gut überzugehen Schauen wir uns also vorher und nachher an. Und natürlich gibt es Möglichkeiten, das zu beheben, aber ich möchte die Dinge nicht zu kompliziert machen Also werde ich diese Form einfach löschen und ich denke, sie funktioniert gut, so wie sie ist Und die gute Nachricht ist, dass die App jetzt voll funktionsfähig ist. Alle Elemente sind vorhanden und alle Navigationen sind bereit, sodass wir ab dem Begrüßungsbildschirm einen letzten Test durchführen können Begrüßungsbildschirm Wir haben unsere zeitgesteuerte Interaktionsanimation. Wir haben unsere Togos, mit denen wir herumspielen können. Und dann können wir auch unsere Hilfe überprüfen. Gehen Sie dann zu den Antworten, scrollen Sie auf und ab und springen Sie durch sie. Schauen Sie sich auch hier die Animationen an. Gehen Sie zurück zur Startseite oder gehen Sie zurück zu den Antworten und verwenden Sie das Menü. Und es scheint, als ob alles so funktioniert, wie es soll. Jetzt, da die App fertig ist, werden wir sie im nächsten Video in einen einseitigen Website-Prototyp umwandeln. 17. Webdesign: Die gute Nachricht ist, dass das Zusammenstellen dieser Website viel schneller sein wird als das Erstellen der App. Da wir bereits alle Elemente direkt hier in XD entworfen haben direkt hier in XD entworfen und wir sie alle sehr schnell in dem neuen Format wiederverwenden können , werden wir zunächst eine neue Zeichenfläche erstellen Und dieses Mal werde ich die B 12 80 verwenden, und wir können sie hier platzieren und sie auch einfach in Website umbenennen Und ich werde es bereits erweitern, weil ich weiß, dass wir mehr Platz darunter benötigen, und dieser Grenzpunkt markiert unsere erste Falte innerhalb der Website, die auf den meisten Bildschirmen zuerst sichtbar sein wird . Fangen wir nun damit an, Dinge zu kopieren. Also wähle ich alles auf diesem Willkommensbildschirm aus, klicke und ziehe es und platziere es hier. Und dann werde ich die Dinge ziemlich schnell ändern , weil ich die Schritte nicht mehr wirklich erklären muss . Ich glaube, es wird Sinn machen, was ich tue. Ich ändere also die Größe, damit Wachstum unser Menü sein wird. Das ist Teil der Speisekarte. Das Bild kann hier rechts sein, vielleicht vergrößert. Ein bisschen. So wie das. Text kann in diesem Fall rechtsbündig ausgerichtet und etwas vergrößert werden. Wenn Sie jemals Dinge haben , die sich überlappen, wie in diesem Fall, wäre es schwierig, den Text auszuwählen. Anstatt dieses Bild nach vorne zu bewegen, können Sie einfach das Ebenenfenster aufrufen. Auf diese Weise können Sie sehr schnell Dinge auswählen, die versteckt sind , und dann einfach die Pfeiltasten auf der Tastatur verwenden , und dann einfach die Pfeiltasten auf der Tastatur die Umschalttaste gedrückt halten Sie können sie auch schneller verschieben, und ich denke, das wird eine schöne Platzierung für den Text sein. Es ist also gut am Kopf ausgerichtet . Dann lassen Sie uns diesen Text einfach hier duplizieren und ich gebe Ziele ein. Ich setze es mit diesem Symbol auf Großbuchstaben ändere es auf normal und reduziere die Größe, indem ich es nach oben ziehe Vielleicht ist es besser in Medium, und ich richte es an der Mitte des Textes aus, und dann können wir das einfach duplizieren und dann wieder anfangen, ein Hoch zu tippen, Tipp-Boost duplizieren und dann noch einmal teilen Übrigens, hier wäre es nützlich, einen Zeichenstil einzurichten . Wenn wir also in die Bibliotheken oder Dokumentressourcen gehen und eines oder alle ausgewählt haben, eines oder alle ausgewählt haben, können wir hier in den Zeichenstilen auf das Pluszeichen tippen. Und jetzt ist es gespeichert. Auf diese Weise wird es viel einfacher sein, Änderungen an allen vier Elementen gleichzeitig vorzunehmen. Gehen Sie einfach hier zum Charakterstil und wählen Sie Bearbeiten. Wenn ich, sagen wir, 35 für die Größe eintippe, siehst du sofort, dass alle aktualisiert werden. Das ist also eine sehr praktische Funktion. Ich empfehle dringend, Zeichenformate zu verwenden. Genau wie bei den anderen DOB-Anwendungen können Sie damit viel Zeit sparen Und ich werde nur eine kleine Linie dazwischen verwenden , um sie zu trennen. Lassen Sie mich einfach diese Grenze ziehen. Ich habe das so eingerichtet, dass weiße runde Kappen und die Größe vielleicht drei Punkte beträgt, und dann ziehe ich es einfach ein wenig nach oben und dupliziere es dann. Also wollen wir noch einen da und noch einen da. Okay, das ist also unser Menü. Das kann auch etwas höher sein. Und tatsächlich kann das Ganze ein bisschen höher gehen. Wählen Sie sie einfach zusammen aus. Sie nach oben bewegen. Dann bringen wir die zusätzlichen Elemente ein, die wir benötigen. Also brauchen wir diesen Text „ Beschreibe dich selbst“ , den wir hier platzieren können, und dann all diese Komponenten, wir kopieren und auf diese Zeichenfläche einfügen können In diesem Fall benötigen wir die Formen jedoch nicht, also können wir sie einfach zuerst trennen und diese Formen schnell entfernen Doppelklicken Sie auf Löschen, doppelklicken Sie auf Löschen, doppelklicken Sie auf Löschen. Und Sie müssen sich keine Sorgen machen, dass Sie Ihre anderen Versionen durcheinander bringen, da es sich um die Hauptkomponenten oder Masterkomponenten Und das sind nur Beispiele dafür. Diese Überschreibungen, die wir hier vornehmen, wirken sich also nicht auf die ursprünglichen aus. Falls wir jedoch Änderungen am Original vornehmen und dies, sagen wir, den Text oder diese Bilder betrifft , sie weiterhin verbunden und werden auch auf dieser Website-Version aktualisiert Also werde ich diese drei Optionen hier platzieren, und wir können das bereits mit dem Befehl Control Enter testen , und wir sehen, dass die Formen im zweiten Status angezeigt werden, also müssen wir das auch korrigieren Ich werde diese einfach auswählen, um in den zweiten Status zu wechseln Und doppelklicken Sie auf Löschen, Löschen, Löschen. Und stellen Sie dann sicher, dass diese auf den Standardstatus zurückgesetzt sind. Wir können also noch einmal überprüfen, ob es funktioniert oder nicht. Ja, das funktioniert, dass das auch funktioniert. In Ordnung. Perfekt. Der erste Fold ist also fertig. Jetzt geht es darum, den Rest zu kopieren. Fangen wir also mit diesen an. Ich werde sie kopieren und hier einfügen. Die Form werden wir vorerst nicht brauchen. Diese Komponente kann hier sein. Der Text kann in der Mitte und das Bild rechts sein. Wir können auch den Text mit den Zielen kopieren . In diesem Fall können wir, da wir einen größeren Bildschirm haben, da wir einen größeren Bildschirm haben, einen weiteren Text vergrößern, der es wert ist, als Zeichenstil gespeichert zu werden. Übrigens lohnt es sich, auch deine Charakterstile zu benennen, damit du weißt, wo du sie verwendest. Also werde ich das umbenennen und es Seitenbereiche nennen. Während dieser andere Seitenmenü ist. Also haben wir uns Ihre Ziele gesetzt. Wir haben dort unser Image. Und in diesem Fall können wir einfach darauf doppelklicken und wir können dieses Sprechblasendreieck löschen. Denn hier will ich nur den Text für sich haben. Und vielleicht kann dieses Bild größer sein, wenn Sie die Shift-Taste gedrückt halten. Ich ändere einfach die Größe. Und dann wiederholen wir einfach dasselbe für diese anderen Bildschirme Also werde ich die Dinge nur ein bisschen beschleunigen, bevor wir mit den letzten Feinarbeiten an der Website fertig werden. 18. Hinzufügen von Interaktionen zum Website-Design: Das ist also die endgültige Version der Website. Wie Sie sehen können, habe ich hier ein abwechselndes Muster erstellt. Wir haben also, dass sich die Bilder mit den Textrahmen abwechseln. Also haben wir einen Zick-Zack erstellt , nur um es ein bisschen dynamischer zu machen Außerdem haben wir auch diese Formen, eine auf der linken und eine auf der rechten Seite, die in der App wiederverwendet und wiederverwendet Und wenn wir diese Seite bereits testen, sollten diese kleinen Interaktionen auch kleinen Interaktionen Was im Fall einer Website Parallax-Effekte sein könnten, die wir problemlos mit dem Entwickler und dem Kunden kommunizieren können mit dem Entwickler und dem Kunden kommunizieren Aber um hier ein paar zusätzliche Interaktionen hinzuzufügen , möchte ich sicherstellen, dass das Menü übersichtlich bleibt, ähnlich wie wir es in der App gemacht haben Aber dafür muss ich zuerst irgendwo dort ein weiteres Rechteck erstellen . Stellen Sie sicher, dass es den gleichen Farbverlauf verwendet wie dahinter. Ich werde nur die Feldfarbe auf linearen Farbverlauf umstellen . Und dann probiere ich diese Farben aus, also brauchen wir diese Farbe auf der linken Seite und wir brauchen diese Farbe auf der rechten Seite. Und wir müssen nur sicherstellen, dass die beiden Farbverlaufsstopps ebenfalls ausgerichtet sind. Jetzt ist es fast vollständig verschwunden. Aber jetzt, wo das an Ort und Stelle ist, können wir einfach alles hier oben auswählen, außer der großen Form im Hintergrund. Klicken Sie einfach mit der Shift-Taste darauf. Und wenn wir diese zusammen mit Commando Control G gruppieren, können wir sicherstellen, dass dies beim Scrollen behoben wird Wenn ich jetzt hierher komme und nach unten scrolle, kannst du sehen, dass es dort oben ist Und das Einzige, was wir sicherstellen müssen , ist, dass es ganz oben steht. Also alles andere ist darunter. Also, wenn wir diese Gruppe ausgewählt haben, stellen wir sicher, dass wir das in den Vordergrund stellen. Wenn wir das jetzt testen, wird es perfekt funktionieren. Und das müssen Sie übrigens auch bei diesen Menüs sicherstellen. Also müssen diese natürlich auch über allem anderen stehen. Insbesondere für den Fall, dass Sie planen, die Länge dieser Bildschirme zu erhöhen, sollte das Menü immer über allem anderen stehen. Aber da wir unser Menü erstellt haben, sollten wir ihm auch einige Interaktionen hinzufügen. Gehen wir also zur Prototyp-Option. Doppelklicken Sie in diese Gruppe und beginnen Sie mit dem Logo und dem Namen der Site Wir können einfach diesen kleinen Pfeil nehmen und ihn auf diese große Form hier im Hintergrund ziehen . Wir können ihn auch einfach hierher ziehen , um sicherzustellen, dass die Form ausgewählt ist. Und dann fällt auf, dass XD bereits verstanden hat, dass wir beim Tippen zu dieser Seite scrollen wollen . Das ist wichtig, weil wir ein Sticky-Menü haben. Wenn ich also runterkomme, sagen wir hier, sobald ich darauf klicke, scrollt es einfach sofort wieder nach oben Und jetzt, was die anderen Optionen hier angeht, werden wir dasselbe tun, also wähle ich Ziele aus und weise sie dann dem Punkt dort zu Lassen Sie uns das noch einmal testen. Und es geht da runter, aber das Problem ist, dass das Sticky-Menü diesen Text verdeckt. Wir müssen also sicherstellen, dass es etwas gibt , das einen Offset zu diesem Text erzeugt. Und ähnlich wie bei der Technik, die ich zuvor mit Symbolen gemacht habe, müssen wir einen sicheren Bereich erstellen , der diesen Offset erzeugt. Also gehe ich einfach zurück in den Entwurfsmodus und verwende das Rechteckwerkzeug. Und zeichne einfach so etwas, achte darauf, dass es hinten ist und keinen Rand hat und Farben anfühlen. Aber wenn wir das zusammen mit dem Text ausgewählt haben, können wir eine Gruppe erstellen. Und das Gleiche werde ich auch für die anderen verwenden. Also kopiere ich einfach diese Form, verschiebe sie dann nach unten und stelle sicher, dass oben genug Platz ist. Und dann lassen wir den Rand vorerst einfach an, damit ich diese Formen sehen kann. Da ist noch einer. Es spielt keine Rolle, wie breit es ist. Es ist nur wichtig, wie viel Platz wir darüber haben. Ich denke, das wird funktionieren. Lassen Sie uns diese einfach alle als Gruppen einrichten, und ich werde diese Strichfarbe später entfernen. Wir müssen also nur sicherstellen, dass wir diese Option zum Teilen ebenfalls ausgewählt und gruppiert haben . Jetzt, im Prototypmodus, können wir die Dinge miteinander verbinden. Was Ziele angeht, wollen wir hier zu dieser Gruppe scrollen, für ein Hoch wollen wir weiter nach unten zu dieser anderen Gruppe scrollen. Und bevor ich weitermache, werde ich das einfach testen. Sehen wir uns also Ziele an. Wir müssen die Höhe dieses Rechtecks erhöhen , ein Hoch. Das Gleiche gilt hier. Und High jetzt tatsächlich ganz oben auf der Speisekarte, weil wir die Gruppe erstellt haben , die an die Spitze kam. Also lass uns das jetzt schon beheben. Also wähle ich das Sticky-Menü aus, bringe es ganz nach vorne, das fixiert die Ausrichtung, und dann können wir diese Formen auswählen, doppelklicken und dann im Entwurfsmodus. Ich kann es einfach ein bisschen weiter ausdehnen, und das Gleiche werden wir auch für die anderen benötigen. Wir können erweitern und erweitern. Und da wir schon mal hier sind, sollten wir bei diesen Formen einfach auch schon den Rand abschalten . Ich doppelklicke jedes Mal, um in die Gruppen zu gelangen. Und jetzt können wir zum Menü zurückkehren, und im Prototypmodus wähle ich das Wort Boost. Kommen Sie runter, um sich selbst zu stärken, und dann teilen, kommen Sie den ganzen Weg runter. Lassen Sie uns das noch einmal testen. Geht bis zur perfekten Ausrichtung hoch. Das ist auch perfekt. Steigern Sie sich selbst und teilen Sie. Hier unten gibt es keinen Inhalt mehr, es kann also nicht weiter gescrollt werden. Wir haben aber auch unsere Home-Option , mit der wir ganz nach oben zurückkehren können. Und so schnell war es, einen voll funktionsfähigen Website-Prototyp zu erstellen, bei dem alle Elemente, die wir für die App verwendet haben , wiederverwendet wurden Und in den nächsten Videos werden wir eine weitere Version des Website-Prototyps erstellen, die Parallax-Scrolling zeigt. 19. Parallax-Scrolling: Und wie Sie sehen können, beginne ich immer gerne mit der endgültigen statischen Version dieser einzelnen scrollenden Seite, die ich dann duplizieren und alle notwendigen Bewegungen und Änderungen für den Parallax-Scrolling-Effekt hinzufügen kann alle notwendigen Bewegungen und Änderungen für den Parallax-Scrolling-Effekt Leider ist es in NDBXD derzeit nur möglich, diese Parallax-Effekte zu erzeugen , indem diese doppelten Zeichenflächen möglich In Zukunft könnten sie jedoch einige Funktionen hinzufügen, die diesen Arbeitsablauf vereinfachen werden Aber vorerst müssen wir, wie gesagt, doppelte Zeichenflächen erstellen Aber lassen Sie mich Ihnen zuerst diese Website zeigen. Wenn ich dir also nur die Vorschau dafür zeige, ist es Commando Control Enter um schnell zur Vorschau zu gelangen. Diese hat schon einige Elemente, die funktionieren Das sind also einfache Schalter , die ich an ihnen bearbeite, und sie sind als Komponenten mit separaten Zuständen eingerichtet Und wenn ich dann nach unten scrolle, haben wir hier weiter unten auch einige Komponenten , mit denen wir bereits interagieren können Aber wie Sie im Moment sehen können, ist dies nur eine einfache Scrollseite Eine Sache, für die ich bereits gesorgt habe , ist, dass das Menü immer oben bleibt, und das ist eine sehr einfache Funktion , die Sie in XD finden können Stellen Sie einfach sicher , dass Sie die Gruppe oder das Element auswählen, das Ihr Menü ist. Und dann wählen Sie hier in den Optionen beim Scrollen einfach eine feste Position Wenn ich das also abnehme und erneut teste, verschwindet das Menü aus dem Bildschirm, was wir in diesem Fall natürlich nicht wollen, also schalten wir es einfach wieder Diese Option wird jedoch für die Art und Weise, wie wir unsere verschiedenen Zeichenflächen einrichten werden, nicht wirklich notwendig für die Art und Weise, wie wir unsere verschiedenen Zeichenflächen einrichten werden , Viel wichtiger ist es, sicherzustellen , dass dieses Menü als Komponente eingerichtet ist Im Moment ist es also nur eine einfache Gruppe, ich kann das hier in den Ebenen überprüfen Es ist nur eine Gruppe. Also werde ich den Befehl Strg K drücken, um daraus eine Komponente Das wird also notwendig sein sobald wir mehrere Zeichenflächen haben, aber wir wollen trotzdem sicherstellen, dass die Interaktionen , die wir jedem dieser Menüelemente zuweisen jedem dieser Menüelemente all unseren Zeichenflächen angewendet werden Aber darauf werden wir später zurückkommen. Denken Sie zunächst an alles, was Sie als Komponente benötigen. Daher sollten alle interaktiven Elemente wie Schaltflächen, Menüs und Symbole zunächst als Komponenten erstellt werden. Und dann ist die zweite und wichtigste Sache Sie tun müssen, bevor Sie mit dem Duplizieren Ihrer Zeichenfläche beginnen , alles auf dieser Zeichenfläche auszuwählen Und dann gruppieren Sie sie zusammen, das ist Befehl oder Strg G. Das macht die Auswahl von Dingen also etwas schwieriger, weil Sie immer doppelklicken müssen, um in die Gruppe zu gelangen, und dann die Dinge Dingen also etwas schwieriger, weil Sie immer doppelklicken müssen, um in die Gruppe zu gelangen , und dann die Aber das ist für die Paraax-Scroll-Animation notwendig. am Anfang nicht alles zusammengefasst ist, werden Sie später viele Probleme haben Denken Sie also daran, dies ganz am Anfang zu tun. Aber jetzt sind wir bereit, mit den Intro-Animationen zu beginnen , die wir der Site hinzufügen möchten Das ist also noch nicht das Paraax-Scrolling. Das sind nur die Animationen im ersten Fold. Dafür werde ich die Zeichenfläche bereits duplizieren Also verwende ich das Auswahlwerkzeug und halte im Entwurfsmodus einfach die Alter-Optionstaste gedrückt und ziehe es nach rechts Stellen Sie sicher, dass Sie rechts neben Ihrer ursprünglichen Zeichenfläche genügend Platz haben , da Sie je nachdem, wie komplex Ihre Site ist, ziemlich viele davon hinzufügen werden ziemlich viele davon hinzufügen je nachdem, wie komplex Ihre Site ist Außerdem möchte ich einen gewissen Abstand zwischen den beiden Zeichenflächen beibehalten , da sich einige Elemente überlappen können und es etwas verwirrend sein kann, damit zu arbeiten Manchmal würde ich diesen Raum sogar vergrößern. Und später bringen Sie sie vielleicht näher, nur um die Dinge aufzuräumen Zuallererst hätte ich gerne eine nette Animation auf dem Hintergrundelement, dieser schönen Kurve, die wir hier haben. Also brauche ich dieses Zeichen oder den Text oder gar das Menü nicht, und ich werde sie sogar löschen. Also wähle ich sie einfach aus und lösche sie. Also haben wir dort nur diese Form. Und was ich damit machen werde, ist es wirklich zu vergrößern, also werde ich es vergrößern. Und wenn ich dann erneut darauf doppelklicke, kann ich auf die darin enthaltenen Ankerpunkte zugreifen und sie sogar verschieben. Was ich hier also erstellen möchte, ist eine nette Animation, wenn diese Kurve angepasst wird. Also stelle ich sicher, dass es den gesamten Bildschirm abdeckt. Und Sie können sehen, dass wir auf dieser Zeichenfläche bereits die Höhe des Viewports auf 800 eingestellt haben Das ist also die hier angegebene Strichlinie. Das bedeutet, dass jedes Mal, wenn ich das teste, im Fenster nur dieser Bereich angezeigt wird. Derzeit können wir keine Animation sehen. Wir können einfach sehen, wie dieser schöne weiche Farbverlauf aussehen wird. Aber sobald wir in den Prototypmodus wechseln und die gesamte Zeichenfläche auswählen Das ist ziemlich wichtig. Sie möchten die Animation also nicht einzelnen Elementen zuweisen. Sie möchten sicherstellen, dass die gesamte Zeichenfläche ausgewählt ist, und dann diesen kleinen Pfeil auf die doppelte Zeichenfläche ziehen Dort können wir wählen, wem die Animation zugewiesen werden soll In diesem Fall stelle ich es also tatsächlich auf Zeit ein und stelle sicher, dass die Verzögerung auf Null Sekunde eingestellt ist. Das bedeutet, dass es automatisch direkt bei A ausgelöst wird, sobald wir das als Prototyp testen. Und statt eines Übergangs möchte ich, dass das automatisch animiert wird, weil ich gerne diese coole Animation sehen würde , die auf der Form erzeugt wird, wie sie von einem Zustand in einen anderen verwandelt Und um die Animation noch flüssiger zu machen, werde ich es ein- und herausnehmen und vielleicht die Dauer auf 0,8 Sekunden erhöhen Also lass uns das jetzt testen. Wir können bereits sehen, wie es animiert ist. Wenn es zu schnell passiert, können Sie zurückkommen, dort den kleinen Pfeil auswählen und die Verzögerung auf vielleicht 0,4 Sekunden ändern . Auf diese Weise ist ein bisschen mehr von dem Hintergrund sichtbar, bevor er animiert wird Und wenn Sie die Animation schnell erneut abspielen möchten, drücken Sie einfach erneut dieselbe Tastenkombination , Commando Und ja, ich bin zufrieden damit, wie das aussieht. Und wenn Sie Elemente in dieser Intro-Animation verzögern möchten , können Sie bereits ein anderes Zeichenflächen-Setup haben Also werde ich das noch einmal mit unserer Option Drag duplizieren einmal mit unserer Option Und noch einmal, lösche die Dinge , die ich noch nicht preisgeben möchte. Wir müssen doppelklicken und dann Dinge löschen. Ich werde den Charakter und den Slogan löschen. Und vielleicht animieren Sie einfach diese kleinen Details hier. Also werde ich diesen Text nach links verschieben, also diesen nach links und dann diesen weiter nach außen Ihr seht schon, dass ich hier ein kleines Muster erstelle. Was auch immer ich zuerst erscheinen lassen möchte, ist dem Rand der Zeichenfläche am nächsten, und dann kommen die Dinge, die ich weiter nach außen verschiebe , etwas später rein Es ist also eine Möglichkeit, sie zu verzögern. Und dann dieser hier, wir können einfach runter gehen. Lass es uns einfach da runterbringen. Und dann werde ich all diese auswählen und sogar ihre Opazität auf 0% reduzieren Und dann werden wir sie auf dem nächsten Bildschirm sehen, aber wir müssen auch sicherstellen, dass es eine Interaktion zwischen diesen beiden Zeichenflächen gibt es eine Interaktion zwischen diesen beiden Zeichenflächen Also ähnlich wie zuvor verwende ich den Prototypmodus, und ich werde immer noch die Zeitoption verwenden Hier werde ich diesen Wert auf 20 Sekunden einstellen, und die restlichen Eigenschaften für die Aktion sollten dieselben sein wie zuvor, sodass ich sie nicht zurücksetzen muss. Also lass uns das einfach noch einmal testen . Ich gehe zurück zum Anfang. Also die erste Zeichenfläche, benutze die Tastenkombination, um sie auszuprobieren Wir können schon sehen, wie alle Elemente auf der linken Seite nacheinander reingekommen sind und eine kleine Animation darauf hatten Alle anderen Elemente hier, die wir gelöscht haben, sind einfach erschienen. Der Grund dafür ist , dass es zwischen den beiden Zeichenflächen auf der ersten natürlich zwischen den beiden Zeichenflächen keine Instanzen gab Das einzige, was OBXD dort tun könnte, ist, sie einfach einzublenden und erscheinen zu lassen. Für diese Elemente hier unten gab es eine Vorher- und Nachherphase, und es konnte eine nette automatische Animationsaktion zwischen den beiden Zuständen erzeugt zwischen den beiden Oder wenn wir in Animationsbegriffen denken, können wir diese sogar Keyframes nennen Also lasst uns das noch einmal testen. Die beiden Phasen unserer Animation sind fertig. Aber lassen Sie uns damit nicht aufhören. Lassen Sie uns noch eine weitere Zeichenfläche für diese Intro-Animation hinzufügen noch eine weitere Zeichenfläche für diese Intro-Animation Also werde ich das weiter duplizieren. Und dieses Mal werde ich, anstatt etwas zu löschen, hierher kommen, das Menü auswählen, indem ich darauf doppelklicke, es nach oben ziehen und das Zeichen auswählen, es nach rechts ziehen und dann diesen Text auswählen und vielleicht zurück in den Entwurfsmodus wechseln. Ich kann es sogar drehen, indem ich die Umschalttaste gedrückt halte, sicherstellen, dass es genau 90 Grad ist, es irgendwo hierher verschieben, und vielleicht werde ich nur für diesen Text die Deckkraft auf 0% reduzieren. anderen beiden Elementen musste ich das nicht tun, weil sie sich bereits außerhalb des Bildschirms befinden Wenn wir jetzt zurück zum Prototyp wechseln, können wir die gesamte Zeichenfläche auswählen und sie auf die andere ziehen Die Zeit wird immer noch verwendet, die Verzögerung ist auf Null Sekunde eingestellt. Aber dieses Mal werde ich stattdessen das Snap Easing verwenden und die Dauer vielleicht auf 1 Sekunde einstellen Wir haben jetzt wieder vier Zeichenflächen. Kehren wir zur ersten zurück und schauen uns eine Vorschau an. Man konnte also sehen , dass sowohl im Slogan als auch im Menü und beim Charakter ein wenig hin - und hergeschwenkt wurde Slogan als auch im Menü und beim Charakter ein wenig sowohl im Slogan als auch im Menü und beim Charakter ein wenig hin , und das ist der Snap-Animation zu verdanken , die wir hier verwendet haben. Lassen Sie uns das noch einmal testen. Da hast du's. Sehr subtil, sehr nett. Und natürlich haben wir immer noch unsere Togo-Animationen hier, und wir können immer noch weiter nach unten scrollen Aber jetzt, wo wir diesen schönen Aufbau für die erste Folie der Seite erstellt haben , können wir uns weiter auf den Rest der Seite konzentrieren und all diese Parallax-Scrolling-Effekte hinzufügen diese Parallax-Scrolling-Effekte 20. Anpassungen beim Parallax-Scrollen: Wir sind also wieder in XZ, und ich werde diese Zeichenfläche duplizieren, und ich werde sie umbenennen und sie Parallax One nennen Auf diese Weise werde ich wissen, dass das Scrollen hier beginnt Das Erste und Wichtigste, was wir tun müssen, ist also , diese ganze Gruppe nach oben zu verschieben und sicherzustellen, dass sie ungefähr hier ist , wo unsere nächste Gruppe ist Das wird also der Abschnitt sein, in dem es darum geht, deine Ziele festzulegen. Ich werde sicherstellen, dass unser Menü hier oben bleibt, also ziehe ich es nach unten und dass all diese anderen Elemente, die wir nicht sehen wollen, nicht auf dem Bildschirm sind . Also ziehe ich das einfach nach unten, nicht die Form, und dann können wir uns auf die Elemente in unserem Viewport konzentrieren Denken Sie jedoch daran, dass die gestrichelte Linie das Viewport zeigt. Jetzt können wir damit beginnen, Dinge zu verschieben und sogar Elemente nach oben und unten zu skalieren Wenn ich dieses Element hier auswähle, kann ich es vergrößern, es etwas nach rechts verschieben und dann den Textrahmen nach unten verschieben Und ich versuche immer , Tangenten oder Küsse zwischen den Elementen zu vermeiden Tangenten oder Küsse zwischen den Elementen zu Das bedeutet im Grunde nur, dass du vermeiden willst , sie so zu platzieren , dass es schwierig ist zu sagen, was vorne und was hinten ist Wenn also hier die Stange und der Rand des Textrahmens perfekt ausgerichtet sind, fühlt es sich komisch an. Wir möchten also sicherstellen, dass es etwas mehr Überlappungen gibt. Das Gleiche gilt für dieses Element, ich würde es hier nicht platzieren. Auch hier fühlt es sich unangenehm an, Sie möchten sicherstellen, dass es zumindest ein bisschen mehr Überschneidungen zwischen Wenn wir jetzt zur Prototyp-Option zurückkehren und die vorherige Zeichenfläche auswählen, können wir die Interaktion hinzufügen, und ich lasse sie aktiviert automatisch animieren , einfach und mit den gleichen Einstellungen Wir können das einfach testen, und wenn ich auf eine beliebige Stelle auf dem Bildschirm tippe, sehen wir bereits die Animation Wenn ich es noch einmal testen möchte, drücke einfach Commando Control Enter und lass uns sehen Es sieht gut aus, ist aber momentan nicht so interessant . Also werde ich diese Form hier auf der vorherigen Zeichenfläche auswählen diese Form hier auf der vorherigen Zeichenfläche Und da sie sich außerhalb des Viewports befindet, können wir im Designmodus damit herumspielen Ich kann es zum Beispiel ganz ausdehnen und dann zweimal tippen, um einzelne Ankerpunkte auszuwählen, und ich kann eine völlig andere Form erstellen, sie auf diese Weise krümmen, und dann kann vielleicht sogar dieser Punkt hier auftauchen Ich fülle den Bereich also fast aus. Dann kann der Text Set Your Goes vielleicht nach links verschoben werden. Ich halte die Umschalttaste gedrückt, während ich es ziehe, und dann kann diese Form nach unten gehen Der Text kann angezeigt werden, und diese Abbildung kann nach rechts Beachten Sie, dass ich alles in verschiedene Richtungen bewege , weil das die Parallaxenanimation interessanter macht Also lass uns das testen. Ich werde diese Zeichenfläche auswählen, da ich jetzt nicht die gesamte Intro-Animation sehen möchte jetzt nicht die gesamte Intro-Animation Ich konzentriere mich nur auf dieses erste Parallaxendetail. Und ja, das sieht schon viel besser aus. Lass es uns noch einmal testen. Das gefällt mir. Ganz nett, sowohl die Form wie sie animiert, als auch all die anderen Elemente Und an dieser Stelle ist es erwähnenswert, dass es eine coole Möglichkeit gibt, Ihnen das ein bisschen zu erleichtern, wenn Sie einem Kunden eine Präsentation präsentieren und ihm wirklich die Parallax-Animation zeigen und sich darauf konzentrieren möchten und ihm wirklich die Parallax-Animation zeigen und , wie sich die Dinge von einer Falte zur anderen von einer Falte zur von einer Anstatt also den Tipp-Trigger zu verwenden, können Sie zum Ziehen wechseln, was bedeutet, dass Sie, wenn Sie das ausprobieren, einfach anfangen können, von rechts nach links zu ziehen , um den Übergang zu sehen. Und damit können Sie die Geschwindigkeit kontrollieren und sogar hin und her gehen Solange Sie also gedrückt halten und weiter ziehen, können Sie sich wirklich auf alle Elemente konzentrieren und darauf, wie sie sich bewegen Aber denken Sie daran, wenn Sie einmal loslassen, bleibt es bei der letzten Zeichenfläche Um also zurückkehren zu können, müssen Sie immer noch einfach den Befehl und die Eingabetaste drücken Für eine schnelle Demonstration ist es immer einfacher , den Tab einzurichten. Wenn Sie jedoch die Dinge verlangsamen und sich wirklich auf jedes Detail konzentrieren möchten , denken Sie daran, stattdessen den Drag-Trigger zu verwenden. Aber in diesem Beispiel werde ich zurück zum Tippen wechseln. Und dann fahren wir fort, indem wir ein weiteres Duplikat dieser Zeichenfläche Also werde ich die Alter-Optionstaste gedrückt halten und das Ganze nach rechts ziehen Zoomen Sie ein wenig heraus, wählen Sie die gesamte Gruppe aus und ziehen Sie sie nach oben, bis sich die nächste Falte in unserem Viewport befindet Sie auch hier sicher, dass das Sticky-Menü dort bleibt, wo es sein soll, und dass all diese anderen Elemente noch nicht sich all diese anderen Elemente noch nicht im Viewport zeigen Und genau wie zuvor fange ich hier an, mit diesen Elementen im Designmodus herumzuspielen , also lassen Sie uns diese Form einfach vergrößern Tippen Sie erneut zweimal darauf und ändern Sie auch die Krümmung. Und wieder, ähnlich wie beim Vermeiden von Tangenten, vermeide ich auch gerne, dass Figuren eine scharfe Linie um den Hals haben Figuren eine scharfe Linie um den Hals Es fühlt sich einfach wieder ein bisschen seltsam an. Es fühlt sich viel angenehmer an, es hier irgendwo hinzustellen. Und dann können wir diese Details sogar verschieben , wenn uns die Platzierung nicht gefällt Wir können den Texter auf der rechten Seite haben, vielleicht auch etwas höher Und dann kann dieser Charakter größer sein. Und dann müssen wir nur noch in den Prototypmodus zurückkehren, die beiden Zeichenflächen mit den gleichen Interaktionseinstellungen wie zuvor verbinden , ist rein und raus Wenn wir das also aus dem vorherigen Fold heraus testen, sehen wir das beim nächsten Und wenn ich alles auf dem neuen Zeichenbrett eingerichtet habe, komme ich normalerweise alles auf dem neuen Zeichenbrett eingerichtet habe, zurück und verfeinere, wo die Dinge herkommen. Ein Hoch kann also von rechts kommen. Dieser Text kann von unten kommen. Der Charakter kann von oben kommen, vielleicht mit einem leichten Übergang oder Verblassen, und dann kann diese Form von links kommen. Lassen Sie uns das also noch einmal testen. Klicken Sie, und dann können wir sehen, wie es funktioniert. Noch einmal. Ja, es sieht ganz nett aus. Nun, vielleicht ist der Übergang der Charaktere nicht der beste, also werde ich zurückkommen, die Deckkraft erhöhen und sie nach unten ziehen Testen wir es auf diese Weise. Ja, das ist besser. Ich wollte diese Mischung zwischen dem Hintergrund und dem Charakter nicht schaffen diese Mischung zwischen dem Hintergrund und dem Charakter Jetzt ist das behoben und es sieht schon viel besser Ab diesem Zeitpunkt werde ich die Dinge beschleunigen, weil ich einfach die gleichen Schritte wie zuvor wiederholen werde, um alle Parallax-Animationen für die restlichen Falten auf der Seite hinzuzufügen für die restlichen Falten auf der Seite Und wir werden weitermachen und uns darauf konzentrieren die Navigation für unser Sticky-Menü einzurichten 21. Menüs und Navigation für die Website: Jetzt haben wir also alles an seinem Platz, vier Zeichenflächen für das Intro und vier Zeichenflächen für den Parallax-Scroll Schauen wir uns einfach an, wie es funktioniert. Also da ist unsere Intro-Animation, die gut funktioniert. Wenn ich irgendwo tippe, scrollen wir nach unten, tippen erneut auf eine beliebige Stelle, scrollen nach unten, scrollen weiter und dann kommen wir zum letzten Jetzt ist es an der Zeit, das Sticky-Menü und die Navigation einzurichten, denn so das Sticky-Menü und die Navigation einzurichten, wie dieser Prototyp derzeit eingerichtet ist, können wir natürlich wie dieser Prototyp derzeit eingerichtet ist, nicht einfach auf und ab kritzeln, weil wir auf diesen Faltungen oder Zeichenflächen natürlich auf diesen Faltungen oder Zeichenflächen natürlich keine weiteren Details zu sehen haben Es ist also komplett außerhalb des Viewports versteckt. Aus diesem Grund ist es wichtig, für diese Art von Website-Prototypen ein Sticky-Menü einzufügen für diese Art von Website-Prototypen ein Sticky-Menü Da wir nun unser Sticky-Menü als Komponente eingerichtet haben, werde ich zu dieser Instanz kommen. Und ich kann an der oberen linken Ecke erkennen, dass dies eigentlich nicht die Hauptkomponente ist. Es ist nur ein Exemplar davon oder ein Kind des Originals. Wenn wir also sichergehen wollen, dass die Interaktionen allen Zeichenflächen zugewiesen werden , lohnt es sich immer, die Option „Hauptkomponente bearbeiten“ zu wählen Option „Hauptkomponente bearbeiten“ Da wir nun auf diese Schaltfläche geklickt oder sie gelöscht haben, muss sie separat außerhalb einer unserer Zeichenflächen generiert werden separat außerhalb einer unserer Zeichenflächen Aber von dort aus können wir jetzt doppelklicken und Ziele auswählen, und im Prototypmodus können wir sie auf diese Zeichenfläche ziehen animieren das Tippen mit Leichtigkeit ein- und auszuschalten Ich denke, es wird funktionieren, indem wir dasselbe verwenden, um das Tippen mit Leichtigkeit ein- und auszuschalten und innerhalb von 1 Sekunde zu Dann wählen wir das Teilen aus , das auf der letzten Starttafel erscheinen muss Und ich werde das hier in die Mitte verschieben , damit es einfacher ist, alle Elemente auszuwählen. Der Schub muss in diesen Bereich fließen, und hier muss ein Hoch her. Und dann wollen wir endlich das Wachstum, das ist der Name dieses Produkts. Um zur Seite oder Zeichenfläche zurückzukehren, auf der alle Elemente bereits vorhanden sind Wir wollen die Intra-Animation also nicht immer wieder abspielen . Das sehen wir einmal Aber danach wollen wir zur ersten Falte zurückkehren, wo bereits alles an seinem Platz ist. Jetzt, wo wir das eingerichtet haben, können wir einfach auf eine dieser Seiten gehen und die Dinge testen. Also lass uns einfach auf Boost springen und dann wieder hoch gehen. Und Sie können sehen, dass ich bewusst nicht linear vorgehe , nur damit wir sehen können, dass die gesamte Verknüpfung funktioniert. Teilen, dann zurück zu Zielen springen, dann vielleicht wieder springen, um hohe Ziele zu setzen, und dann zurück zur ersten Fold. Dank unserer Komponente funktioniert alles wie erwartet, und wir mussten all diese Interaktionen nicht für jede der doppelten Kunsttafeln wiederholen . Arbeiten und Verwenden von Komponenten in OBXZ ist äußerst wichtig Wenn Sie sie also noch nicht verwendet haben, stellen Sie sicher, dass Sie dies tun, da dies Ihren Arbeitsablauf erheblich beschleunigt und Sie effizienter arbeiten Und wenn Ihnen dieses Tutorial gefällt und Sie erfahren möchten, wie ich auch die App-Version dieses Projekts erstellt die App-Version habe und wie ich alles von Grund auf neu gebaut habe, alle Elemente, dann denken Sie daran, dass Sie das von unserem Grafikdesign-Start im Bootcamp lernen können , wofür der Link wiederum in der Beschreibung unten steht. 22. Deinen Prototyp teilen: Sie haben verschiedene Möglichkeiten, Ihren Prototyp, den Sie in AdobXD erstellt haben, mit anderen zu teilen Aber wahrscheinlich zuerst ist es am wichtigsten, zwei separate Abläufe einzurichten, falls Sie sowohl eine App als auch eine Website im selben Dokument haben sowohl eine App als auch eine Website im selben Aber bei komplexeren Projekten, bei denen Sie vielleicht auch eine Tablet-Version haben möchten oder ob Sie sowohl eine Version im Hoch- als auch im Querformat für Ihre App haben möchten auch im , sollten Sie mehrere Flows einrichten Hier haben wir im Moment nur einen Flow, und zwar für die App Aber wenn ich auf die Website komme und mich im Prototypmodus befinde, kann ich jetzt auf dieses Home-Icon klicken. Dadurch wird ein neuer Ablauf für mich eingerichtet. Also kann ich diese eine Website nennen. Und das ist wichtig für unseren nächsten Schritt, denn im Share-Modul werden wir beide Datenflüsse getrennt teilen können. Wenn wir es also an den Kunden senden, erhält er einen Link für die Website und einen Link für die App. Und du kannst ihnen immer empfehlen, den Link für die App auf ihrem Handy zu öffnen. Während es der für die Website ist, sollten sie auf einem Desktop-Computer oder einem Laptop nachschauen. Derzeit habe ich den Website-Flow ausgewählt, und der Link ist bereits entsprechend benannt. Aber ich kann hier „Meine Wachstumswebsite“ eingeben und aus den folgenden Einstellungen auswählen, von denen aus eine Entwurfsprüfung empfohlen wird, wenn Sie diese mit Stakeholdern wie dem Kunden oder Ihren Kollegen teilen möchten . Warum sollten Sie sich für Entwicklung entscheiden, Warum sollten Sie sich für Entwicklung entscheiden wenn es darum geht, es mit dem Entwickler zu teilen. Außerdem ist eine Präsentation nützlich, wenn Sie persönlich etwas von XD präsentieren. Aber in diesem Fall bleibe ich bei der Designüberprüfung. Und schließlich sollten Sie sich für die Berechtigungen entscheiden. Standardmäßig kann also jeder mit dem Link auf diesen Prototyp zugreifen. Sie werden es also sehen können. Natürlich werden sie es nicht bearbeiten können, aber sie werden es kommentieren können. Und falls Sie möchten, dass Ihr Projekt ein bisschen besser geschützt ist. Sie können sagen, dass nur eingeladene Personen Zugriff darauf haben. In diesem Fall müssen Sie ihre E-Mail-Adressen hier hinzufügen. Und schließlich können Sie auch ein Passwort vergeben, um den Zugriff auf den Prototyp einzuschränken. Vorerst werde ich es behalten, damit jeder, der den Link hat, darauf zugreifen kann, und wenn ich dann auf Link erstellen klicke, wird er auf einem Adobe-Server generiert . Und es spuckt mir diese URL aus, die ich kopieren oder sogar ihren Einbettungscode abrufen kann , wenn ich sie zum Beispiel auf einer Website platzieren möchte , und so sieht sie im Browser Wir haben also alles hier. Es funktioniert genauso, wie wir es in XD gesehen haben. Wir können herumspringen. Wir haben auch unsere kleinen Schalter, die wir erstellt haben, und am wichtigsten ist, dass wir erstellt haben, und am wichtigsten ist, die eingeladenen Personen oder diejenigen, die die URL erhalten haben , anfangen können, Kommentare dazu abzugeben, indem sie entweder allgemeine Kommentare abgeben oder Kommentare an bestimmte Teile des Designs anheften Nehmen wir an, sie möchten hier etwas ändern, wenn sie ihren Kommentar abgeben, Wortlaut oder die Wörter ändern Sobald ich das eingereicht habe, wird es dort bearbeitet, und wer das liest, bekommt immer ein kleines Highlight, wo es auf dem Design platziert ist Wenn du jetzt viele Kommentare hast, kannst du sie jederzeit lösen, bearbeiten oder löschen. Und unten gibt es auch Optionen zum Ausblenden von Anmerkungen, nur um das Design ohne sie zu sehen Außerdem können Sie hier Kommentare nach vielen verschiedenen Optionen filtern hier Kommentare nach vielen verschiedenen Optionen oben können Sie auch schnell andere Mitarbeiter oder Rezensenten einladen andere Mitarbeiter oder Rezensenten Mit dieser Schaltfläche hier Und es gibt noch eine weitere coole Funktion, die wir sehen werden, sobald wir den anderen Flow exportiert haben Also habe ich die App ausgewählt und habe hier auf der rechten Seite dieselben Einstellungen. Ich erstelle einfach den Link und öffne ihn im Browser. Wieder einmal werden dieselben Interaktionen angezeigt. Wir können alles genauso durchgehen , wie wir es in XD gesehen haben. Aber zusätzlich haben wir auch eine andere Möglichkeit, durch die Zeichenflächen zu navigieren, mit diesen Symbolen unten Ich kann auch zum ersten Bildschirm zurückkehren. Und wenn das nicht genug ist, können wir sogar auf dieses Symbol hier oben links klicken , um uns einen Überblick über alle Zeichenflächen zu verschaffen , die in diesem Projekt verwendet wurden Und wenn ich direkt zu diesem springen möchte, kann ich einfach darauf klicken und dann die Dinge weiter testen Falls Sie mehrere Bildschirme in einem Projekt haben, werden Ihnen standardmäßig alle Befehle für die App angezeigt. Wenn Sie jedoch nur Befehle filtern und anzeigen möchten , die dem aktuellen Bildschirm oder dem aktuell sichtbaren Bildschirm zugewiesen sind, können Sie diesen kleinen Schalter auch hier verwenden Und es gibt noch eine letzte Sache, die ich erwähnen wollte. Sobald wir wieder zu XD zurückkehren, stellen Sie fest, dass für diese beiden Flows das kleine Linksymbol sichtbar ist. Und falls du zurückgehst und einige Änderungen vornimmst, nachdem du dein Feedback erhalten hast. Sagen wir einfach, wir verschieben diesen Text etwas nach unten. Sie werden sehen, dass dieses kleine Etikett hier grau geworden ist. Geben Sie an, dass Sie daran denken müssen, Ihren geteilten Prototyp zu aktualisieren , indem Sie zum gemeinsam genutzten Modul zurückkehren, sicherstellen, dass der App-Flow ausgewählt ist, und klicken Sie auf Link aktualisieren. Dadurch wird der geteilte Prototyp aktualisiert, und wer auch immer die Überprüfung durchführt, sieht sofort , dass diese Änderungen in seinem Browser aktualisiert werden. Das ist alles, was ich für dieses Projekt behandeln wollte. Ich hoffe, es hat Ihnen Spaß gemacht, daran zu arbeiten, und es wird Ihnen helfen zu entscheiden, ob UX und Webdesign die Richtung die Sie sich spezialisieren möchten Aber auch wenn das nicht die Richtung ist, die Sie einschlagen möchten, werden diese Fähigkeiten und die Möglichkeit, diese DB XD zu nutzen, unglaublich nützlich sein , um sie in Ihrem Lebenslauf und Portfolio zu präsentieren 23. 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.