Adobe XD: Animationen | Matt Ward | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Adobe XD: Animationen

teacher avatar Matt Ward, Product Designer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Intro: Adobe Intro:

      0:43

    • 2.

      Grundlegende Animationen

      5:02

    • 3.

      Sign

      5:31

    • 4.

      Sign

      4:11

    • 5.

      Inbox: Rute und Scrollen

      4:43

    • 6.

      Sent: Raster und Button

      3:19

    • 7.

      Einstellung: Überlagerung und Button

      4:07

    • 8.

      Einstellungen: Slider

      8:13

    • 9.

      Neue E-Mail: Notification

      5:14

    • 10.

      Neue E-Mail: Mikro-Interaktion

      5:57

    • 11.

      Outro / Abmoderation

      0:12

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

1.624

Teilnehmer:innen

2

Projekte

Über diesen Kurs

In diesem Kurs werden wir die auto-animate Funktion in abode XD durchgehen, um Animationen für unser gefälliges auto-animate zu erstellen: Snail Mail. Dieser Kurs deckt eine Vielzahl von animation und Tricks, die auf andere a anwenden können. Ich habe sowohl die „Start“ und "start" für den Kurs aufgenommen. Nach, was du unten erlernen kannst:

Lade die Startdatei hier: Snail – Start

Fertigste Datei: Snail - fertig

Slider

Mikro-Interaktionen:

Text

Button / Staaten:

Triff deine:n Kursleiter:in

Teacher Profile Image

Matt Ward

Product Designer

Kursleiter:in

Skills dieses Kurses

Design UX/UI-Design
Level: Intermediate

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Intro: Adobe Intro:: Hey, Jungs heute werden einige der wjxt Tipps und Tricks für ihre automatische Animationsfunktion durchgehen , also wird dies nützlich sein, wenn Sie es für einen Benutzertest verwenden Jungs heute werden einige der wjxt Tipps und Tricks für ihre automatische Animationsfunktion durchgehen , also wird dies nützlich sein, wenn Sie es für einen Benutzertest verwendenmöchten und Sie einen Prototyp bei einem höhere Wiedergabetreue und starten Sie den Test. Mikro-Interaktionen ließen Zeug realistischer aussehen. Dies ist auch für Präsentationen wertvoll. Wenn Sie etwas wie eine Brutzelrolle oder etwas erstellen möchten, das einen Kunden wirklich aufgeregt wird . Eso entweder einer von denen wird gut dafür sein. Es ist am besten, wenn Sie einige funktionierende Kenntnisse über die Dhobi X'd hier haben, haben, aber ich werde und löschte die Start- und Enddateien für Sie. Wenn Sie nicht so viel Erfahrung haben, sich keine Sorgen. Sie können immer nur verlangsamen und taggen entlang. Ähm, ja, ich glaube, das war's. Also lasst uns loslegen 2. Grundlegende Animationen: Okay, Also, um zu beginnen, können wir die Schneckenmail-Animationsdatei öffnen, aber ich habe für alle enthalten könnte den Bildschirm zu maximieren. Also habe ich das gemacht, nur damit wir keine Zeit damit verschwenden müssen, eine Reihe von Elementen zu entwerfen. Und das kann wirklich über Tipps und Tricks von Auto Feind sein. Das erste, was wir tun können, ist, diese anderen Kunsttafeln unten zu ziehen, denn das, was mit beginnen wird , ist das Gesetz und der Bildschirm genau hier. Also ist nur ein schneller Hintergrund darüber, was Auto Animate macht und warum es so nützlich ist, ist es im Grunde nur die Elemente zwischen unseren Boards ändert. Wenn wir also eine Kopie unseres Kunsttafel-Logs in einem machen, haben wir diese Schnecke genau hier. Und wenn du auf diesen Flughafen zurückblickst, heißt er genau das Gleiche. Aber wenn wir es so bewegen und dann haben wir einen Prototyp bekommen, der Multi-Act diese auf jemals tippen Übergang, wir wollten die Zehe stattdessen animieren und die Wirbelsäulendauer verwenden . Ordnung. Dennoch, für den vorherigen, den Sie klicken, werden Sie feststellen, dass wir den Auto-Feind bekommen. Und so einer der größten Vorteile dieses Programms ist, dass Sie das wirklich super schnell machen können und Sie es mit den gleichen Elementen auf unserem Board tun können. Sie müssen nichts entwerfen, was Sie diesen Monat löschen werden. Also ging ich irgendwie durch einige grundlegende Animationen und richtete einige in dieser Datei ein, die entweder für einen Benutzertest verwendet werden könnten oder sie in einer Präsentation verwendet werden könnten. Kallakis ist ein Rial, um die Leute über Ihre Arbeit zu begeistern, aber wir werden diesen Flughafen noch einmal duplizieren. Und so sagen wir, wir wollen, dass diese Elemente ein wenig nach oben rutschen, richtig, wenn jemand auf den ersten Bildschirm kommt, damit wir das herunterklappen können. Wir können das A Pastie fallen lassen, wird es auf Null ändern. Alles, was Sie über diese Elemente bearbeiten können, sind Dinge, die automatisch animiert werden könnten. So können Sie eine Vergangenheit tun, ein Sie könnten Grenze tun. Sie machen eine Füllfarbe, Sie könnten Größe tun. Du bekommst jede Art von Freiheit wie diese. , Wir sind nur hilfreich,sich daran zu erinnern, ob es etwas gibt, das ich hier nicht behandelt habe, Sie können es wahrscheinlich automatisch animieren. , Ich will eigentlich,dass diese Schnecke hier anfängt. Ich kopiere und füge das auch ein, weil ich noch nicht schnecken möchte, um sich zu bewegen. Also, was passierte genau da an unserem Board? Wenn Sie also auf Prototyp klicken, ist der gesamte Feind 0.2 in der Regel darüber, wo ich gerne mit den meisten Animationen bleiben. Das ist irgendwie wie ein U S Standard. Du willst, dass er ziemlich schnell ist. Ähm, die Sache mit ihnen, wenn es sich jemals zu langsam anfühlt, ist es wahrscheinlich viel zu langsam und es muss schneller sein. Ich mag es, um Punkt für Dinge zu bleiben. Ich versuche, dramatischer zu sein, wie eine Sekunde. Aber normalerweise jede Art von Interaktion, die der Benutzer haben wird, Sie werden wollen, dass es auf vielleicht 0.0.3 max weniger verweist , weil wir nicht wollen, dass jemand langsame Elemente hat. Da bist du ja. Eso gewinnt nur 2.2 nach unten. Also, das animiert, wie wir wollten, wenn wir das schließen. Okay, jetzt haben wir eine Animation von Logan, um sich in einer einzuloggen. Aber sagen wir, wir wollen, dass unsere Schnecke zu ziehen. Wir können hineingehen und sitzen auf zurück zu diesem Ort, und wir werden auch zwischen dort animieren wollen. Also, wenn Sie bemerken, ich klicke auf die gesamte Kunsttafel, wenn ich dies tun, tippen Sie irgendwo auf dem Kunstportal Übergang zum nächsten Bildschirm. Und ein Teil davon ist, dass diese Interaktionen nichts sind, mit dem der Benutzer interagieren müsste , also sind sie eher für Präsentationszwecke. So ist es irgendwie einfacher, einfach irgendwo auf dem Bildschirm zu klicken. Haben Animation weiter, aber wenn es so etwas wie für eine Schaltfläche, die später erhalten wird, Ich werde die Schaltfläche direkt anstelle von Lahore Board klicken. Wir wollen, dass das draußen ist und weil es jetzt Nagel ist und er ziemlich langsam ist, wollen wir, dass es irgendwie ein Markenaspekt ist, der tatsächlich vier Sekunden lang dort machen wird. Also, wenn wir diese spielen, wenn wir klicken, bekommen wirklich langsam Schnecke Mail löscht dies, Sie sehen es von Anfang an die Ihre kleinen seinen und wir werden wieder klicken. Okay, jetzt, da wir das haben, können wir hier Textelemente hinzufügen 3. Sign: So funktioniert das Bearbeiten von Texten auf die gleiche Weise, wie es wie eine Form und ein Auto Feind endet, wird es nur zwischen den zu unseren Grenzen verdoppeln, um Effekt zu erzeugen. Das werden wir nicht. Also, was ich dort getan habe, war das Element zu kopieren und einzufügen und wir werden hier eine E-Mail schicken. Lassen Sie uns diesen Hintergrund elementar Marseille Key Main drehen und wird die gleiche Sache mit einem Passwort, um eine Kopie davon zu erstellen. Aber es ist ein Passwort, das wir nicht wollen, dass jemand sieht. Also, Jugend, viele Sterne. Ich bin im Büro. Nun, meistens machen Sie den Text schwarz für Sie, also erscheint es ein wenig besseres Aussehen, also könnten wir ihn einfach so lassen und ihn zwischendurch automatisch animieren lassen. Er ist draußen. Ich will nicht, dass das 2,2 ist. Wir werden sehen, wie das aussieht. Ok, es taucht auf. Es ist nichts Verrücktes. Und es ist auch etwas, das man nur mit den regulären Bildschirmübergängen dio könnte. Sie müssten nicht einmal Auto Animate verwenden. Sie könnten über, lassen Sie unseren Übergang stattdessen, und dann lösen Sie sich einfach auf. Das wird dir genau den gleichen Effekt geben. Aber wir wollen, dass wir nur etwas Flair haben. Also werden wir entwerfen. Wir werden hier ein Rechteck erstellen. Wir können auf Jury gehen, ausfüllen, immer gerne abschalten fiel. Wenn ich etwas erstelle, das ich meine, Maske verwenden, wird es diese Elemente auswählen. Wir gehen zum Objekt und machen eine Maske mit Form und dann verdoppeln schnell. Wir können die Maske bearbeiten, und wir werden sie verlangsamen, bis sie verdeckt ist. Das beste kleine Stück verdeckt den ganzen Text und hier oben, werden Sie feststellen, dass gerade es Massengruppe Eins Wir tun werden, ist, dass wir tatsächlich gehen und Namen E-Mail-Animation. Es ist wichtig, dass Sie die Dinge in diesem ziemlich gut benannt haben, weil ein Dairy X'd diese Elemente mit Namen identifiziert eso Wenn Sie hineingehen und Sie Sachen haben , die Gruppe 123 Group 1000 heißt, ist es wirklich einfach, den Überblick über das zu verlieren, was animiert, und wenn Sie es genug tun, können Sie Dinge haben, die die gleiche Zeit von zwei Dingen animiert. Sie heißen Gruppe Eins, also ist es nur eine gute Praxis Zehe. Nennen Sie immer Dinge, wie Sie gehen, so dass wir das gleiche tun, wird ein Rechteck für das Passwort erstellen , schalten Sie uns wieder aus und alle wählen beide. Gehen Sie zur Objektmaster-Form Una hat es nicht den ganzen Weg vertuscht. - Das ist in Ordnung. Wir werden doppelklicken. - Was ist das? Und das gleiche, was Massengruppe Will dio Passwort-Innovation auch diese beiden X-Elemente wieder auf diese Weise. Also, was wir zuerst wollen, ist Angst, dass diese Platzhalternamen verschwinden. Wir setzen die Kapazität auf Null und dann von dieser Kunstform und kopieren und einfügen. Und wenn wir das tun, können wir gehen und öffnen Sie diese Animation für Passwort. Wir werden wirklich ein Quiz heranzoomen, vielleicht sogar noch näher. Was würde verwenden, wird diese Box wieder heraus ziehen? Sie gehen das gleiche tun, um die E-Mail-Animation. Es ist wie diese Box, zieh sie den ganzen Weg raus. Also, was das tun wird, wird uns einen ziemlich subtilen Typ-Effekt geben, denn diese Masse wird sich öffnen und es nur ein wenig machen. Sie werden sauberer, ein wenig mehr Spaß, mehr Dinge, wissen Sie, andere intime. Er ist draußen. 0,2 ist in Ordnung. Und anstatt zu tippen, was wir hier hören werden, ist Zeit, dass wir die Verzögerung auf Null halten. Das bedeutet also im Grunde, wenn Sie darauf klicken, diese Animation vollständig zu machen. Es wird sofort in diese Animation einfließen, damit wir einen Blick darauf werfen können, wie das aussieht . Also ist der Text verschwunden. Und dann haben wir diesen netten Typ-Effekt, den wir wollten. Das sieht vorerst gut aus. Lassen Sie uns alles von oben sehen. Nur um sicherzugehen, dass Sie wieder angezapft werden. Das kommt wieder auf den Wasserhahn. Schwester Neil geht rüber, also und dann bekommen wir unsere SMS, Sammy. Also das nächste, was wir tun wollen, ist die Unterzeichnung. 4. Sign: also möchten wir nicht einfach auf eine Schaltfläche klicken. Wir wollen, dass der Knopf wollen einen Press-Sake hat. Also das erste, was wir tun können, um das zu tun, ist Kopieren und Einfügen der Anmelde-Button. Ich füge immer gerne eine Grenze hinzu, die wir benutzen werden. Das ist eine Maske an einer Grenze und schalte dann den Verkauf ab, nur damit wir sehen können, wofür die Maske ist. Sicher. Dann werden wir einen Kreis an Ort und Stelle nehmen, der in der Mitte eines Knopfes in der Grenze Husten heilen wird . Wir schieben den Anmeldeknopf über deine Lippen und erstellen dann eine Maske. Also haben wir Massengruppe Eins, und wir werden voran gehen und nennen, dass wir es benennen, melden uns an. Aber Animation, wir werden doppelklicken und die A-Passage e dieses Kreises Null ausschalten. Jetzt, da wir das auf unserem Login eingerichtet haben, kopieren und fügen wir dieses gesamte Kunstboard ein. Und wenn wir reingehen, können wir uns aufmachen uns die Lippen schnappen. Was wir tun werden, ist, die Kapazität auf,sagen wir, 70% zu drehen sagen wir, und dann werden wir das nach oben skalieren, ich verwende Option Shift, um es gleichmäßig zu skalieren bis es alle Tasten Platz einnimmt. du okay? Jetzt sieht gut aus. Und dann schnappen wir uns auf diesem Kunstbrett und wir könnten hier einen Anmelde-Button schnappen, und wir werden Prototypen auf dem Aber dieses Mal, statt auf deinem Brett, tippst du, obwohl intim, er draußen ist, dieses Mal wird geschnappt werden. Normalerweise verwende ich Snap für Tastenantworten, weil es ein wenig mehr ist. Es ist ein bisschen schneller, ein wenig aktiver. Es wird ziemlich schnell passieren. Also ist es schön, ein wenig Fackel zu geben, und es passiert. Machen Sie ein wenig deutlicher, dass etwas so reagiert hat. Und dann gehen wir an den Anfang der Anmeldeseite und verbinden sie. Teoh unsere Posteingangsseite, schnappen Sie sich das Ganze. Und wieder hier werden wir die Zeit nehmen. Will es, dass das wirklich schnell passiert? Eigentlich, wenn wir das nicht animieren, werden wir übergehen. Der Grund, warum wir das tun, ist, weil es keinen Sinn hat, Ehre zu animieren, hier etwas zu animieren, wenn es so ein massiver Bildschirmübergang ist. Also nur heraus zeigen, dass es Spaß macht. Wir werden sehen, wie es aussieht, und wir werden es noch einmal betrachten. Was die Tastatur hier verwenden, ist, um zurück zu kommen, und wir bekommen eine ziemlich nette, aber als Antwort dort. Der Schlüssel dazu ist also, dass es um die Subtilität dieser Animationen geht. Das zieht die Aufmerksamkeit der Menschen auf sich. So ist es immer gut, ein Auge fürs Detail zu haben, wie Frankreich, da diese Animation ein Kreis ist, der Skalierung statt nur ein. Aber wir setzen oben darauf, dass die Farben geändert und dann tatsächlich nur ändert die Qualität von die Animation. Es ist nicht nur, es ist nicht nur ein Übergang, es ist etwas, das ein wenig mehr Tiefe und Bewegung hat, das es interessanter macht, aber für den nächsten Schritt beginnt mit der Arbeit am Posteingang. 5. Inbox: Rute und Scrollen: Okay, sobald wir auf unseren Posteingangsbildschirm kommen, werden Sie feststellen, dass wir diese Dummy-E-Mails hier haben, die eigentlich keine Namen, Betreff oder Zeit in ihnen haben. Also, was wir dio können, ist klicken Sie auf dieses Element und dann gehen Sie zu wiederholen Raster. Und sobald wir das runterziehen, bekommst du offensichtlich noch mehr Dummy-E-Mails. Aber das Problem ist, sie sagen einfach, Name, Name, Thema in der Zeit, das sieht schrecklich aus. Also, wenn der coole Plug in, den ich wirklich liebe und würde vorschlagen, jeder Tryout ist Repeater genau hier. Also, wenn Sie ein Wiederholungsraster haben, mit dem Sie einfügen können, wie Dummy-Text und andere Elemente, die Sie im gesamten Raster wiederverwenden können Also, wenn wir darauf klicken und dann auf Repeater klicken So erhalten wir alle diese Optionen und Sie werden in diesem Drop bemerken unten Menü, erhalten Sie die Elemente, die sie in Europea cred waren. Also haben wir Namen, Betreff Zeit und Pfad die Linie und Rechteck. Das ist nur der Auswahlkreis auf der linken Seite, also beginnen wir mit dem Namen. Also, wenn wir eine Kategorie Drop-Down und gehen Sie zu Namen und wir wollen Vor- und Nachnamen, werden wir bewerben. Dann schließen Sie das aus, nur um zu sehen, was passiert ist. Also haben wir Namen, die alle auffüllen, öffnen ihren Namen Wert. Rufen Sie sie an. Und wenn wir verdoppeln schnell in nur einer kurzen Notiz, wenn Sie feststellen, dass das Textfeld hier tatsächlich viel größer ist als der Name, der gute Praxis ist, wenn Sie ein Wiederholungsraster einrichten, dass Sie Dummy Text ihn haben. Denn wenn ich dies tun würde, um darauf hinzuweisen, würde es es wirklich wegwerfen, wenn der Name zu lang wäre und es anfangen würde, auf diese anderen Textfeldern zu stoßen . Entschuldigen Sie, sehen Sie da eine neue Suche zurück. Es ist also immer hilfreich, Flächensteuer zu tun, die dasselbe mit Thema auswählt. Also benutzten wir Bereichstext, um so weit zu gehen, wie wir wollen, und Zeit und Zeit schreiben tatsächlich eine lange Zeit und geben ihm dann etwas Platz für den Fall, dass die Zeiten ein wenig länger als wir für diese nur Ausrüstung geplant haben, damit wir wieder einklicken können, gehen Sie zurück in Repeater. In dieser Zeit wollen wir ein Thema, die Kategorie. Es gibt also eine Menge Dinge, die Sie hier wählen können. Ähm, eigentlich, eine der besseren Kategorien. Ich denke, für E-Mails, Internet und Sie können einfach auf Phrase hier unten klicken. Das wird wie zufällig sein. Ähm, Entwicklung lobt, aber ich denke, es ist ziemlich hilfreich für eine E-Mail-Phrase, die wir darauf anwenden können. Und wir sehen, dass wir das Pop-up da unten haben. Aber wir können auch zur Zeit gehen, während wir hier sind. Gehen Sie zurück zu der Liste Dating-Zeit und Sie können das Datum Zeitperiode auswählen, so dass wir bleiben Zeit. Ähm, letzten Zeiträume. Gut. Wir kaufen Klamotten. Antwort. Jetzt. Wir haben Namen Thema in der Zeit alle ziemlich schnell, und es erstreckte sich auf diese Elemente hier unten. Aber da wir all diese Elemente hier unten haben, wollen wir einen Swell scrollen, damit du in ihr Brett klickst und nach unten gezogen kannst, und wir gehen gleich dort hin. Und eine Sache, die Sie bemerken werden. Also, wenn wir gehen und würden hier auf mir Scroll spielen, wir haben dieses Element, das sich mit ihm bewegt, und wir wollen nicht, dass die schwebende Aktion. Aber es sollte immer behoben werden. Also werden wir schließen, aber, und wir werden klicken und wollen zurück zu dieser Ebene, die Sie sind. Dann, wenn Sie die Elemente schnell und erhalten einen Prototyp, wir können Position beim Scrollen fixieren und dann beschleunigt Sie schnell spielen und nur eine kurze Notiz an Sie würde normalerweise tun, dass mit diesen anderen Elementen als auch. Aber gerade in dieser Datei wurden diese so eingestellt, dass sie beim Scrollen bereits eine feste Position haben. So habe ich irgendwie wirklich schnell mit Wiederholungsraster und Repeater den Plug in. Wir bekommen tatsächlich eine ziemlich hohe Fidelity-E-Mail-Feed ziemlich schnell mit einer Schriftrolle, die, wie Sie sich vorstellen können, in und Eingabe von Dummy-Text, und all dies wäre eigentlich ein ziemlich großer Aufwand. Es ist also schön, das schnell machen zu können und etwas zu haben, das ziemlich realistisch aussieht. 6. Sent: Raster und Button: Also, was wir jetzt tun können, ist, diese anderen unsere Ports zu verschieben, und das nächste, was seine Ideen aus dem Weg machen, ist tatsächlich der gesendete E-Mail-Posteingang, so dass wir kopieren und einfügen können. Machen Sie es wieder genau dasselbe. Aber dieses Mal werden wir wollen, dass dieses Symbol anstelle unseres in Box Icon hervorgehoben wird, so dass wir Option Shift und machen es ein wenig größer. Und ich möchte, dass sich die Farbe gut ändert, also müssen wir aus dieser blauen Farbe füllen. Wir möchten, dass dieses Symbol, da nicht hier ausgewählt wurden, um zurück zu diesem grau zu gehen. Ich wollte auch hier ein wenig klein sein, bis es sich mit diesen anderen Elementen auseinandersetzt. Was wir also tun können, ist schnell auf dieses Element. Holen Sie sich einen Prototyp jag dies über den Übergang. Automatischer Feind. Er ist draußen. Wirbelsäule 0,2 ist in Ordnung. Lassen Sie uns sehen, wie das aussieht. Ok. Es sieht gut aus. Diese Art animiert, wie Sie wollen, aber es gibt ein paar Probleme. Einen, den wir nicht zurückklicken können. Zwei. Es sind alle die gleichen E-Mails und Informationen, die nicht sehr realistisch aussehen, und es steht immer noch in Dollar Woops, lass uns das ändern. Ich will das sagen, geschickt. Und wenn wir also in klicken und unser Wiederholungsraster auswählen, können wir tatsächlich in unseren Plug und Menü öffnen Repeater wieder gehen, und wir können diese Dinge ändern, so dass wir den Namen auswählen. Wir gehen wieder zu Ende wie Name. Es ist wie, zuerst und verlor sein Handy viel. Und das wird all diese Elemente ändern, und wir werden dasselbe auch für das Thema tun. Also habe ich ein Internet, eine Phrase, die diese ändern wird. Und dann ist die letzte Sache auch die Zeiten zu aktualisieren, die mit mir funktioniert. Aktualisieren Sie die Zeiten. Ok, gut. Und wenn Sie sehen, vergleichen Sie zwischen diesen beiden sind Ports. Sie haben sich verändert, nie sah die Dinge gut aus. Und wir werden tatsächlich in der Lage sein, zurück in unseren Posteingang zurückzukehren, so dass wir Räuber fest ziehen können , dass über Auto animieren. Er ist das in Ordnung. Also jetzt, wenn wir rüber gehen, nun, wir bekommen den Namen geändert einen Cent und wir haben auch alle Arten von verschiedenen gesendeten E-Mails, nur um es ein wenig realistischer aussehen zu lassen, als ob Sie tatsächlich zwischen Posteingang und Senden von Monaten. Das nächste, was wir Ihnen tun können, ist Prototyp. Wie eine neue E-Mail oder wie eine neue E-Mail-Komposition aussehen würde. Und dazu müssen wir auf diesen Plus-Button klicken, um das neue E-Mail-Fenster aufzurufen. 7. Einstellung: Überlagerung und Button: Ich habe eingeschlossen, dass Sie E-Mail-Fenster hier drüben, aber wir müssen unsere Schaltfläche Antwort haben, bevor wir es erreichen. Also kopieren und einfügen. Eigentlich, bevor wir Einfügen kopieren, werden wir fortfahren und diese Maske hinzufügen, um die Tastenantwort zu erstellen. Also eine Kopie und fügen Sie dies schalten Sie den Rahmen auf der Füllung aus durch Schatten Office. Nun, jetzt, da wir diesen Umriss haben, einen Kreis im mittleren Kreis erstellen, der keine Grenze in einem weißen Phil ist, und wir wollen, dass dies oben ist, wählen wir Ben für diese Elemente aus. Wir erstellen hier eine Maske doppelt schnell, und wir werden sicherstellen, dass dies Ihre eine prozentuale Kapazität ist, weil wir nicht wollen, dass sie angezeigt wenn der Knopf nicht ausgerüstet ist und wieder sie als Meisterschaft von eins bezeichnet wird. Opel Dues wird diese schwebende Action-Taste Animation nennen, und jetzt können wir kopieren und einfügen, dass über. , Dieser Fehler,der fast dort gemacht wurde, ist, ähm, man muss sich daran erinnern, dass, um etwas automatisch zu animieren, die Animation sowohl auf dem ersten Kunstbrett als auch auf dem zweiten existieren muss, also ist es immer gut. , um in zu gehen und es auf der ersten einzurichten und dann kopieren und einfügen. Auf diese Weise werden die Namen immer gleich sein. Denn wenn Sie anfangen zu kopieren und Einfügen und Erstellen neuer Animationen später auf der Straße, der Name und kann ziemlich ein Problem geworden, um sicherzustellen, dass alles genau auf den Buchstaben geschrieben. Richtig. Wir öffnen das, gehen in die Ellipse und das Museum hinein, und wir wollten wieder 70% drehen, um diese schnelle Antwort zu bekommen und dann, na ja, skalieren. Und ich halte nur Option Verschiebung, um gleichmäßig dort zu skalieren, von der Mitte muss mehr Anbetung gehen , und so werden wir Prototypen. Wenn Sie also darauf klicken, möchten Sie, dass diese Antwort angezeigt wird und Sie schnappen, weil es eine Schaltfläche ist, Zustand T hat Spaß gemacht. Auto Feind Und wir wollen nicht, dass es nur Feind Auto. Wir wollen unsere neue Botschaft, wenn sie auch kommen sollen. Also, was wir hier tun können, dieser Drache über eine gute Zeit. Was ich dort getan habe, war nur wählen Sie die oben ohne Kunst gegossen. Wir wollen nicht, dass diese automatische Animation. Wir werden es wirklich spät hier benutzen. Einer der Gründe, warum einer der Niedergänge von Auto Animate ist, dass alles auf diesem originalen Kunstboard sein muss . Aber für ein Symbol-Overlay ist es normalerweise besser, voranzugehen und eine ihrer Voreinstellungen zum Einschieben zu verwenden. Rutschen Sie hoch, runter. Von links nach rechts sind in der Regel ziemlich schnell und einfach zu bedienen, und es hält alles getrennt auf dem oder Board, weil es kein Ärger wird, wenn Sie große Elemente wie diese auf dem ursprünglichen Flughafen bewegen. Also, wenn du kannst, versuche ich immer, jedes Bein zu benutzen, nur um die Dinge etwas sauberer zu halten. Und das wollten wir. Er ist draußen. 0,2 ist in Ordnung. Mal sehen, wie das aussieht. Wir klicken hier. Wir bekommen unsere Antwort und das Fenster zu kommen. Probieren Sie es noch einmal aus. Es sieht gut aus. Also, nachdem wir eines Tages unsere neue Nachricht bekommen haben, um zu kommen, das hier vorbei, weil ich mag, dass sie 70 voneinander entfernt sind. Genau genial. Also das nächste, was wir tun können, ist unsere Speisekarte zu kommen 8. Einstellungen: Slider: so haben, dass Menü für uns genau hier enthalten. Also, wenn wir über den Posteingang gehen und was Will Dio ist? Eigentlich werden wir diesen ganzen Kunstport kopieren und einfügen, weil wir dieses Menü nicht als Overlay verwenden werden . Und ich werde in einer Sekunde erklären, warum. So kopieren und fügen wir die gesamte Posteingangsebene oder Kunsttafel dort ein. Entschuldigen Sie mich? Dann, was wir tun werden, ist Posteingangseinstellungen zu nehmen. Eigentlich, kopieren und fügen Sie das einfach oben ein. Ich glaube, wir haben ein paar Elemente da hinten versteckt. Ja, ja. Da hinten versteckte Zeiten. Also können wir das einfach löschen. Also eine Kopie und fügen Sie dieses Menü oben hier drüben, wir werden es über die richtige Position ziehen, weil wir kommen wollen, wenn wir dieses Symbol haben. Also, das ist gut. Bringen Sie das einfach in Verbindung. Also haben wir einen ziemlich engen Weg zurück in unseren Posteingang. Nicht da. Also wollen wir es stattdessen. Top Übergang ohne Punkt auf alles aufgelöst. Sieht da liegen aus. Eine Sache zu wissen, wann immer Sie ziehen in Prototyp. Es erinnert sich an das Letzte, was Sie getan haben. Ähm, das letzte, was wir getan haben, war ein Übergang, also wird es sich daran erinnern, aber wenn wir automatisch animieren und die Zeit ändern, an die Sie sich erinnern, was zuletzt Ellen ausgewählt hat,haben Ellen ausgewählt hat, Sie auf das Zahnrad geklickt und dann bekommen wir dieses Menü zu kommen, das funktioniert, wie wir es Ihnen wollen. Aber wir wollen nicht nur, dass sie in dir kommen. Wir wollen hier mit der Displaydichte interagieren. Wir können also diesen Flughafen erneut kopieren und einfügen und dann einen Schieberegler für die Displaydichte erstellen. Also gehen wir zurück in unsere Designstadt, holen ein Rechteck hoch ziehen es über Schlagschatten. Wenn Sie bemerken, dass es eine kleine Schlagschattenüberlappung gibt, weil diese Elemente oben, ähm, wir werden das mit einer Maske reparieren, weil es nicht wirklich oben auf dem Menü steht. eine kleine Schlagschattenüberlappung gibt, weil diese Elemente oben, ähm, Also bist du Phil abgefallen und hast uns dann hochgezogen, um eine Maske zu benutzen. Und was das tun wird, ist nur dieses Schlagschattenelement aus diesem Menü zu bekommen, weil es ein wenig ablenkend ist, es dort zu haben. Denn das ist wirklich so, als würde ich aus der Displaydichte herausrutschen. Dann können wir hier ein Rechteck erstellen. Das wird der Hintergrund unseres Schiebereglers sein, der es war. Nimm diesen Radius und dann ändern wir ihn dazu. Gray sagte, Das ist unser Schieberegler Hintergrund. Sie können hier auch einen Kreis erstellen, und das wird unser Schiebereglerelement sein. Diese Größe sollte in Ordnung sein. Wenn wir das Zentrum irgendwo finden können, dann wollen wir, dass es blau ist. Also werde ich dieses Anzeigetext Jahr kopieren und einfügen, anstatt etwas Neues einzugeben. Also wird es im selben Gedanken sein. Alles. Wir nehmen einen weniger. Ich werde hier einen Punkt bekommen. Ich denke, Punkt zu mir ist ein wenig einfacher, um zu ziehen. Absolut. Sie sind einfacher, Elemente zu ziehen und Dinge über 14 umzugestalten. Suchen Sie eine Kopie und fügen Sie diese noch einmal und dann mehr ein. Also, was wir tun, ist, dass wir hier einen Schieberegler erstellen, der die Anzeigedichte unserer E-Mails weniger und mehr nicht zu kompliziert dort ändert . Also, wie wir das tun, ist, wenn wir unseren Apfelwein erschaffen haben, können wir weitermachen und das verbinden. Also, wenn wir Displaydichte gehen, wird dies kommen und nicht ist nicht übermäßig Oh, kommen apposite Übergang. Wir können einfach auflösen Punkt zu Ihnen ist in Ordnung. so können wir nur überprüfen, um sicherzustellen, dass bricht. Das sieht lustig aus. Und wenn wir das tun, werden wir dieses Kunstbrett noch einmal kopieren und einfügen. Was wir wollen, ist zu sehen, wie unser Vorstand aussehen würde, wenn es weniger Dichte in unserem Menschen gibt. Also, was für Funkgeräte? Wir wählen den Schieberegler, haben einen Prototyp Drachen über. Wir werden zu Auto Enemy gehen, eigentlich, was wir Null machen werden, sie sagten einen Hahn, den wir ziehen werden. Eigentlich, wenn Sie schnell gezogen, Sie nicht einmal die Option bekommen. Teoh machen eine Zeit, weil es ist, was die Drachenantwort der Maus. Wenn wir also hineingehen und uns dies in den Nachrichten ansehen, können wir dieses Element nach links oder zurück nach rechts ziehen. Das sind also die ursprünglichen Grenzen, die wir für Auto Intim gesetzt haben, und das lässt uns nur ziehen, anstatt wie ein Tippen Animation Klein schließen. Aber wenn Sie bemerken, wenn wir das ziehen, ist nichts passiert. Also, was wir tun können, ist gehen in und ändern Sie die Anzeigedichte unserer E-Mail durch Bearbeiten sind wiederholen cred. Dies ist also einer der coolen Aspekte, Wiederholungsraster intakt zu haben, ist, dass Sie einige ziemlich verrückte Sachen wie dieses wirklich leicht machen können , und weil wir weniger Dichte in unserer E-Mail für dieses Beispiel wollen, können wir es dort herausholen und Dann beendete Doppelklick das Wiederholungsraster, und wir werden diese Linie ein wenig nach unten bewegen, nur um es ein wenig realistischer zu platzieren. Und dann können wir das runterwerfen. Ein bisschen schwellend. Lassen Sie einfach die Wiederholung Gut runter, nur ein Haar sagte. Es basiert mehr auf dieser Spitzenzeit. Und da dies das gleiche Wiederholungsraster wie dieses Kunstboard ist, wird es automatisch Feind, wenn wir diesen Schieberegler ziehen. Dies ist also einer der Vorteile über Auto und mich im Allgemeinen und die Verwendung mit einer Drag-Funktion . Sie könnten so etwas ziemlich schnell machen, ohne etwas ändern zu müssen oder etwas Phantasievolles in einem anderen Programm tun zu müssen. Sie können alles mit Elementen in ihrem Kunstboard machen, und wir werden diese Handbücher wie das ganze Kunstbrett hier loswerden, gehen Sie zu Predator und ziehen Sie diese zurück auf die erste Startplatine. Wir machen den Steppübergang. Es gibt alles Sinn zu. Also, jetzt, wenn wir gehen in könnte Dichte anzeigen, verwenden Sie ihren Schieberegler. Wir könnten zurück zu diesem Haupteingangsmenü gehen. 9. Neue E-Mail: Notification: Das nächste, was wir tun werden, ist zu simulieren, eine neue E-Mail an diesem Wochenende zu erhalten. Kopieren Sie diesen ursprünglichen Posteingang und fügen Sie ihn ein. Und so werden wir wollen, dass diese neue E-Mail oben in diesem Wiederholungsraster erscheint, so dass wir tatsächlich einfach nach unten ziehen können , um den gleichen Platz zu vergessen, für eine E-Mail zu beginnen, ein Rechteck zu greifen und dann dorthin zu ziehen. Was wir tun können, ist einfach voran und erweitern Sie die Form bis zur Seite, und es ist eine neue E-Mail, also machen wir es eine andere Farbe wie blau und wollen Textelemente dafür, so dass wir einfach gehen und verdoppeln können , Klicken Sie sagte. Wir können kopieren und einfügen hier un. Wählen Sie die Wiederholungsrastergeschwindigkeit außerhalb des Rasters aus. Ziehen Sie es auf diese Weise nach oben. Wir haben Text, der derselbe ist, wie diese E-Mails theoretisiert wurden. Wir werden das Gleiche für den Selektorkreis hier tun. Kopieren und Einfügen de Wählen Sie ein Wiederholungsraster basiert Drachen nach oben waken. Make up auf Ihren Namen für diese erste E-Mail, nur so bleiben wir in der Linie, dass es aussehen ziemlich riel und wird die Zeit anpassen. Also, jetzt, wo wir unsere neue E-Mail erscheinen, wird es tatsächlich fallen lassen diese Amenity Sie Befehl Shift linke Klammer, um es den ganzen Weg nach unten fallen, nur um sicherzustellen, dass wir hinter all diesen Elementen sind. Und wir vermissen hier tatsächlich eine Zeile. Und das liegt daran, dass die Linie nur unten war und sie Raster wiederholen. Also werde ich diese Zeile für die Spitze kopieren und einfügen und sie unter neu positionieren. Da kriegen wir nur den Rest. Diese E-Mail-Klammer. Los geht's. Okay, also haben wir eine neue E-Mail eingerichtet und was wir tun werden ist, alle diese Elemente auf diese Weise zu gruppieren , wir können sie so anpassen. Steuern Sie die Umbenennung, diese neue E-Mail. Wir können also diese Gruppe kopieren und einfügen, zu unserem ursprünglichen Posteingang zurückkehren, und wir werden sie schnell verkleinern. Beachten Sie, wenn Sie feststellen, wann Sie es hier verkleinern. Dieser Text wird nicht verkleinert. - Entweder. Sie können das tatsächlich anpassen, z. B. gehen Sie zurück und ändern Sie diese beiden Punkte anstelle von Bereichstext und den Grund, für diese Instanzen in Ordnung ist. Wir setzen keine Repeater-Elemente in diese Felder, also ist es in Ordnung, wenn wir Punkttext auf sie verwenden und im Grunde alles bedeutet, dass sie skalieren werden , wenn wir die gesamte Gruppe skalieren, anstatt nur den gleichen Bereich wie es wäre für Bereichstext. Kopieren und fügen Sie das hier oben ein, und wir werden minimieren. Nun, eigentlich, gehen Sie einfach doppelt ausgesucht diese Minimierung der kleinen Es ist, was sie nicht perfekt sein müssen , weil wir diese Deckkraft sowieso abschalten werden. Aber sie müssen ziemlich klein sein. Also gibt es kein komisches für die Runde. Wenn wir machen die Animation, so wird die ganze ändern A pastie ihre 20 Ich werde sicherstellen, das gleiche tun, um die ganze Gruppe direkt dort auf dem Text ausgewählt wurde. Sieht aus wie die ganze Gruppe. Herrgott, das ist eine faszinierende Null. Also möchten wir, dass dies auch automatisch animiert wird, so dass wir schnell auf dem gesamten Kunstboard und ziehen Sie auch auswählen, anstatt wie Tippen oder Zeit zu tun . Wir werden dieses Mal tatsächlich Tasten verwenden, also wählen Sie aus, dass Sie eine beliebige Taste auf Ihrer Tastatur verwenden können, um die Animation auszulösen . Also, wenn wir hier klicken, können wir den Abwärtspfeil in einem Zeichen drücken, dass wir den Übergang zu Auto Feind wollen und er ist out Point to you ist in Ordnung. Einer der Gründe, warum die Verwendung der Tastatur hier hilfreich ist, ist es Ihnen erlaubt zu steuern, wann Sie Animationen auslösen können und sieht nicht ganz so klobig aus, als ob Sie irgendwo außerhalb der Seite klicken, um die Animation auszulösen. Und es ist auch hilfreich. Wenn Sie jemals ein Screen Capture-Video machen möchten, können Sie einfach die Tastaturtasten verwenden, um einige dieser Animationen auszulösen. So ist Ihre Maus und in den Rahmen, Mal sehen. Also sind wir auf dem Haupteingang wird die unten-Taste drücken. Holen Sie sich die neue E-Mail, um direkt dort aufzutauschen. 10. Neue E-Mail: Mikro-Interaktion: also möchten wir nicht nur, dass eine neue E-Mail auftaucht, obwohl wir ein wenig Flair hinzufügen können. Lasst uns diese Glocke dazu bringen, etwas zu tun, weil wir die United Vacations bekommen, die wir wollen. Eine Antwort hier. Ein Schwung, also schaffen wir einen weiteren Kreis, der etwas kleiner ist. Wir werden loswerden, genau wie wir dort ein neues Identifikationssymbol haben. Das werden wir kopieren und einfügen. Und denken Sie daran, dies ist das Startelement. Das ist also die Hauptseite, die wir wollen, dass das skaliert wird. Also wollen wir es klein machen und die Kapazität ausschalten. Es sei denn, es ist ein Lips Five. Gehen wir weiter und ändern den Glockenalarm, schätze ich. Alarme. Besserer Name für ihn Alarm, und ich muss zurückgehen und daran denken, es auf dem Bildschirm zu ändern. Also lasst uns sehen, wie das aussieht, also bekommen wir das, um einen Schwung aufzutauschen. Es ist eine nette Note hinzuzufügen, aber sagen wir, wir wollen ein wenig mehr tun und ein wenig Subtilität hinzufügen und wirklich in, wie das Betrachten einer Mikro-Interaktion, so können wir dies tatsächlich von hier löschen. Und so sagen wir, wir wollen, dass die Glocke vor, dass klingelt, bevor die rote Benachrichtigung erscheint, also können wir tatsächlich tun, ist gehen und drehen. Element wird es tun. Drehen Sie es etwa 45 Grad nach links und dann gehen wir hier rüber. Wir werden diesen Flughafen noch einmal duplizieren und das hier löschen, und dann gehen wir nach 45 Grad. Und dann wird es am Ende in der Mitte sein. Und weil ich diese Kunsttafeln geändert und dieses Element gelöscht habe, werde ich es zu diesem hinzufügen, es nach unten skalieren, die Kapazität auf Null ändern. Der Grund, warum ich es so gemacht habe, ist, weil dies die Art Board ist, auf der diese Elemente beginnen zu zeigen beginnen. Ursprünglich war es dieser, aber weil wir etwas dazu hinzugefügt haben, können wir in diesem Moment schlafen. wir also sicher, dass alles ziemlich eng mit einer coolen Abkürzung verbunden ist. Hier ist der komprimierte Befehl A, um alle Punkte zu sehen, die Prototypen verbunden sind. Es ist hilfreich, zu überprüfen, ob Sie etwas vergessen haben oder nicht etwas verbunden haben , können Sie ein wenig Zeit sparen, anstatt zu versuchen, herumzugehen und auf Elemente zu klicken, um zu sehen, was Sie sich erinnern. Es hat sich nicht animieren erinnert. Also halten Sie sich aus dem Abwärtspfeil wird dies auslösen. Und so wollen wir, dass diese Art Board automatisch auf die neben Bell Position gehen, so werden wir Zeit unterzeichnen . Null Sekunden 0,2. Nun, eigentlich, machen Sie das 0,4. Und der Grund dafür ist, dass sich das tatsächlich um 90 Grad bewegt. Von dieser Kunsttafel, dieser hier, war es 45. Aber weil du an dieser untersten Kunst herumschwingst, bewegt sich das tatsächlich 90. Also, um diese aussehende Uniform zu halten, wird tatsächlich 0.42 tun, die gelangweilt sind. Und dann, wenn wir einen Pullover bekommen, tun Sie zeigen, um zu sehen, wie das aussieht. Und wieder schlagen wir nach unten, arbeiten weiter und das bekommt sogar die kleine schwingende Animation genau da oben. Und Sie können auch mit dem herumspielen, was die Animationen tatsächlich zwischen Kunstscheinen tun . Wenn Sie ein wenig Mikro und Interaktionen wie diese erstellen, benutze ich diese hier draußen, was tatsächlich gut funktioniert, weil es aussieht, als hätte die Glocke ein wenig innere Show sollte irgendwie verlangsamen, wenn sie die Ozarks trifft, aber du könntest auch mit Artie spielen und er ist raus und wirklich nur herumspielen und sehen, was am besten aussieht, denn eine MengeAnimationen auf diese Weise ist irgendwie das, was richtig anfühlt. und er ist raus und wirklich nur herumspielen und sehen, was am besten aussieht, denn eine Menge Ich weiß, das ist die Miss Klischee-Designer-Sache. Aber wenn sich etwas jemals langsam anfühlt oder klobig anfühlt, wird es wahrscheinlich scheinen, dass es für jeden, der es benutzt, sehr klobig und sehr langsam erscheinen. Es ist also immer gut, das im Hinterkopf zu behalten und mit Dingen herumzuspielen, bis sie sich richtig fühlen . Dann können wir von oben gehen, um unsere Animationen noch einmal zu versiegeln und sicherzustellen, dass alles so verbunden ist , dass wir können. Schnell, wir könnten das kommen, um Norse Neil rüber zu gleiten, wenn wir uns gut anmelden oder E-Mails verschickt. Schreiben Sie eine neue E-Mail war da und es angezeigt Dichte und drücken Sie dann, dass nach unten Tastatur T, um unsere neue Animation Pop-up auf Awesome zu sehen. Sieht so aus, als ob dort alles funktioniert. Also, das ist es für diese grundlegende Art von Tipps und Tricks von Auto Feind 11. Outro / Abmoderation: so dass diese Klasse abschließt. Bitte zögern Sie nicht, die Klasse Übung zu versuchen und einige Bewertungen und Kommentare zu hinterlassen. Lassen Sie mich wissen, was funktioniert. Danke.