Prototypen und Animationen in Figma

1. Trailer des Kurses: In diesem Figma-Kurs lernen Sie alles über die Funktionen des Figma-Prototyps und wie Sie sie nutzen können, um einen echten Prototyp von Grund auf neu zu erstellen. Sie lernen auch Workflows und die fortgeschrittenen Tipps und Funktionen des Prototypenbaus in Figma kennen. Und ich selbst bin seit über drei Jahren UX-Designer für Benutzeroberflächen und verwende Figma seit vielen Jahren. Und ich bin begeistert davon, dies anderen Menschen beizubringen , die alle selbst motiviert waren. Und wir wollen ihre Fähigkeiten im Bereich Prototyping und Figma auf das nächste Level bringen . Und dann, im zweiten Teil, werden wir natürlich einen Prototyp von Grund auf neu erstellen , den ich für eine mobile Anwendung aus der Figma-Community ausgewählt habe . Jetzt beginnen wir mit einem grundlegenden Überblick darüber was Prototyping in Figma ist und wie es funktioniert. Bevor wir jedoch mit der Einführung des Figma-Prototyps beginnen, werden wir uns den Designprozess ansehen, um ihn besser zu verstehen. 2. Designprozess: Bevor wir mit dem Prototyping beginnen, möchte ich Ihnen mitteilen, warum Prototyping für den Benutzererlebnisprozess so wichtig ist . Was ist also Benutzererfahrung und warum ist Prototyping so wichtig? Benutzererfahrung ist das Gefühl und die Einstellung einer Person zur Nutzung eines bestimmten Produkts, Systems oder Dienstes. Wenn wir Produkte entwerfen, ist es sehr wichtig, sicherzustellen, dass diese Produkte tatsächlich ein Problem für den Benutzer lösen und für den Benutzer nützlich sind. Andernfalls wird der Benutzer es nicht verwenden. Also wirklich einfach, ein Prototyp. Sie können dies von Anfang an überprüfen, um sicherzustellen, dass Sie dem richtigen Weg folgen. Wenn wir zurückblicken, verwenden viele Designteams die Wasserfallmethode. Dies ist eine Einbahnstraße nicht viel Feedback und Prototyping enthalten sind. Deshalb haben die Designteams in den letzten zehn Jahren erkannt , dass sie eine weitere bessere Methode sein müssen um Ideen zuerst zu testen, und haben es früh im Prozess erkannt , wenn die Dinge am Ende klappen. Denn bei der Wasserfallmethode ist es sehr schwierig, eine Anwendung, sobald sie sich in der Testphase befindet, zurückzugehen und zu ändern, was sich bereits in der Konzeptionsphase befand. Es wird also erst spät im Lebenszyklus funktionierende Software produziert. Sehr hohes Risiko und Ungewissheit. Der menschenzentrierte Designansatz ist sehr unterschiedlich, da der Mensch im Mittelpunkt des gesamten Prozesses des gesamten Projekts steht . Und es hilft, so früh wie möglich mit Feedback umzugehen , da der Benutzer in jeden Schritt des Prozesses einbezogen wird. Das Interessante dabei ist also , dass es bei diesem Ansatz darum geht, das gesamte Erlebnis während des gesamten Prozesses zu verbessern , hin und her und wieder zurück. Sie beziehen also die Nutzerforschung in mehreren Schritten in Ihr Projekt ein. Dann ist es sehr wichtig, dem Benutzer wirklich zuzuhören und seine Bedürfnisse und Wünsche zu verstehen und wirklich zu verstehen, was ihm hilft, eine bestimmte Aufgabe zu bearbeiten oder seinen Alltag allgemein zu verstehen. Das hilft dir am Ende, etwas zu entwerfen , das der Nutzer wirklich braucht. Es ist eine nichtlineare Methode. So können Sie immer wieder zum Prototyping zurückkehren. In diesem Kurs konzentrieren wir uns also auf das Prototyping, unabhängig davon, ob es sich um dieselbe Methode für jedes Medium handelt , das Sie verwenden. Und wir sehen uns im nächsten Teil. 3. Prototyping: Bevor wir mit unserer Idee beginnen , unseren Prototyp zu bauen , haben wir im Kopf. Lassen Sie uns kurz über die Grundlagen des Prototypenbaus sprechen. Prototypen helfen Ihnen also, Ihre Ideen zu demonstrieren und mit anderen zu kommunizieren. Dies können Ihre Kollegen, Stakeholder oder Benutzer für Benutzertests sein. Dies hilft Ihnen, Zeit und Geld zu sparen , da Sie nicht das gesamte Produkt erstellen müssen. Aber beginnen Sie mit einem einfachen und günstigen Prototyp. Sie können es testen und viel lernen bevor Sie das Produkt wirklich bauen. Keine Sorge, wenn Sie kein Designer sind, kann jeder einen großartigen Rapid-Prototyp bauen. brauchst du also keine besonderen Fähigkeiten. Was ist Rapid Prototyping? Rapid Prototyping ist also ein iterativer Prozess. Das bedeutet, dass es sich wiederholt. Der Prozess wird verwendet, um zu visualisieren, wie eine Website oder eine Anwendung aussehen wird, um Feedback und Validierung von Benutzern, Stakeholdern, Entwicklern und Designern zu erhalten Feedback und Validierung von Benutzern, . Wenn es gut eingesetzt wird, verbessert Rapid Prototyping die Qualität Ihrer Designs, indem es die Kommunikation zwischen den verschiedenen Parteien verbessert und das Risiko verringert, etwas zu bauen , das man will es so ganz einfach sagen. Was benötigen Sie für das Prototyping? Ein Prototyp ist nicht als voll funktionsfähige Version eines Systems konzipiert , sondern soll lediglich dazu beitragen, die Benutzererfahrung des Endprodukts zu visualisieren . Wenn die Qualität also zu niedrig ist, werden die Leute nicht wirklich glauben, dass der Prototyp ein echtes Produkt ist. Und wenn die Qualität zu hoch ist, wirst du die ganze Nacht arbeiten und wahrscheinlich nie fertig sein. Die Qualität sollte also nicht zu hoch, nicht zu niedrig sein, sondern genau richtig. Sie können nicht nur Bildschirme, Apps oder Websites prototypisieren , sondern fast alles. Prototyping ist eine hervorragende Methode, um Designs zu testen. Welche Designs Sie auch entwerfen, Sie können bereits darüber nachdenken , welche Art von Bildschirmen oder Interfaces Sie in Ihren Prototyp integrieren und Ihre Idee wirklich testen müssen . 4. Projekt-Demo: In diesem Teil des Kurses wählen wir eine mobile Anwendung aus der Figma-Community aus, um verschiedene Arten von Prototyping und Animationen in Figma anzuwenden . Wie Sie jetzt ein Beispiel für eine mobile Anwendung sehen, Dr. App, die ich als Beispiel ausgewählt habe. Dieses Beispiel umfasst die verschiedenen Arten von Prototypen, interaktive Komponenten, Beispiele und Animationen um eine vollständige Demo einer Anwendung vorzubereiten und zu einer echten Anwendung zu werden auf einem Smartphone installiert. Lassen Sie uns nun beginnen, den Prototyp unserer Anwendung zu testen , an dem ich gestern bereits gearbeitet habe. Als ersten Schritt klicken Sie hier, um die Anwendung zu öffnen. Weiter. Wir wählen zuerst, ja. Von hier aus kehren Sie zum ersten Bildschirm zurück, wo Sie hier die andere Schaltfläche wählen können um E-Mail und Passwort zu schreiben. Melde dich an. In diesem Schritt können wir das Geschlecht wählen, weiblich oder männlich Weiter, und das Alter auswählen. Weiter. Hier kann der Benutzer das Bild seines Profils hinzufügen, egal ob per Kamera oder Galerie. Klicken Sie hier, um die Anmeldeschritte abzuschließen. Es ist gut. Jetzt haben wir ein neues Konto erstellt. Und genau das werden wir in den nächsten Teilen natürlich von Grund auf neu erstellen in den nächsten Teilen natürlich von Grund auf neu , und wir sehen uns im nächsten Video. 5. Prototypen hinzufügen: Also jetzt werden wir diese Anwendung aus der Community hier auswählen , richtig, Dr. App. Und wähle mit dieser Auswahlliste Figma. Und jetzt suchen wir in unserer Anwendung. Ja, das stimmt. Klicken Sie hier. Holen Sie sich eine Kopie , um die App in Ihrem Konto-Workspace zu erhalten. Das ist es also. Unsere Anwendung ist bereit, einen Prototyp und Animationen hinzuzufügen. Also werden wir diese beiden Bildschirme gruppieren, um sie zu verschieben , weil wir in unserem Beispiel nicht brauchen Wir werden diese Anwendung wählen weil ich sehe, dass sie verschiedene Arten von Bildschirmen enthält , von denen wir kann mehrere Figma-Tools anwenden. Und jetzt möchte ich den Arbeitsbereich vorbereiten, die Position einiger Bildschirme. Ich habe das hier und das hier platziert. Als nächstes beenden wir mit dem Rest. Und das hier, wir zoomen hier rein. Kopieren und Einfügen für diesen Bildschirm. Wir werden es umbenennen, um ein Konto zu erstellen. Und jetzt wähle die Elemente aus und lösche sie. Wir werden diesen Bildschirm zum Laden verwenden, wenn der Benutzer auf die Erstellung seines Kontos wartet. Nachdem ich diesen Text in Konto erstellen geändert und in die Mitte des Bildschirms verschoben habe, sehe ich, dass dieser Ort für diesen Satz am besten geeignet ist. Meiner Erfahrung nach befindet sich die Position der Ladeanzeigen auch immer in der Mitte des Bildschirms. Genau hier. Ordne diesen ein bisschen nach links um. Beginnen Sie jetzt mit dem Prototyping des ersten Bildschirms. Klicken Sie hier im Prototyp. Wählen Sie den Bildschirm aus und verknüpfen Sie ihn mit dem zweiten Bildschirm , um diese Verbindung zwischen ihnen herzustellen. Dieses Fenster, das angezeigt wurde, enthält alle Interaktionsdetails. Hier ist es die Art der Interaktion, die gewählt wurde. Und hier ist es die Aktion des Benutzers, die die Anwendungsaktion beim Tippen, beim Ziehen beim Drücken auslöst . Und nach einer Verzögerung, wann wähle ich es jetzt aus und ändere die Verzögerung auf 1.500 Millisekunden. Also hier, den Animationstyp für den Moment wählen wir Smart Animate. Dies ist das Ende der Animation. Wir wählen erneut die lineare Animation und ändern diesen Parameter der Animationsverzögerung auf 400 Millisekunden. Sie können jedoch in den Animationsdetails die Interaktion wählen , mit der Sie Ihren ersten Prototyp bauen möchten. Lass uns jetzt diese erste Interaktion versuchen. Wie Sie sehen, wechseln wir von Bildschirm eins zu zwei, wobei die Interaktion ausgewählt ist. Schließe nun die zweite Interaktion mit derselben Methode ab. Für diese Interaktion wählen wir jedoch Push-Animation und ändern die Verzögerung auf 300 Millisekunden. Zwischen diesen beiden Bildschirmen verwenden wir dieselbe Art der Übersetzung und behalten dieselben Parameter wie auf dem vorherigen Bildschirm bei. Nun, für ja, wählen wir den Anmeldebildschirm. Hier, nur die Interaktionsdetails verifizieren. Und behalten Sie, wie bei den anderen, dieselben Parameter bei. N for n 0 melde dich an. Hier haben wir eine Verbindung vom Anmeldebildschirm mit dieser Schaltfläche zur Homepage. Auf dieser Ebene führen wir die Interaktionen zwischen den Registrierungsschritten auf dieselbe Weise durch. Und von dieser Schaltfläche zum nächsten Bildschirm. Beenden Sie dann für alle Bildschirme dieselbe Methode. Meiner Meinung nach ist es speziell für diese Art von Anwendung, dass diese Parameter Verbindungen zwischen Bildschirmen haben . Wir können in anderen Anwendungsbereichen sehen , dass die Art der Animation geändert werden kann, um dem Benutzer ein anderes Erlebnis zu bieten , z. B. in Spieleanwendungen, immer die Übergänge zwischen Bildschirme sind viel schneller. Außerdem ändern wir die Dauer auf 3.000 Millisekunden und wählen den Animationstyp. Intelligentes Animieren. Und für diese lineare, auch für die Animationsdauer, sollten Sie den Parameter auf 500 Millisekunden erhöhen , die zurückgegeben werden. Jetzt in der Mitte des Arbeitsbereichs. Lassen Sie uns für diese Interaktion den Animationstyp auf Smart Animate ändern . Linear 500 Millisekunden. Lassen Sie uns nun das Ergebnis dieser Interaktionen ausprobieren. Testen hier klicken. Weiter. Hier fügen wir eine Zurück-Schaltfläche hinzu. Fahren Sie jetzt mit dieser Option zum Anmeldebildschirm fort. Melden Sie sich an und beenden Sie. Dies ist die Verzögerungsinteraktion, um den Startbildschirm der Anwendung zu öffnen. Zurück zum Workspace und zoomen Sie hier. Zunächst fügen wir das Rückkehrsymbol für die Bildschirme hinzu. Hier vom Icon, wenn ich direkt in dieses Feld einfüge, zurück um nach einem Icon zu suchen. Hier ist die Liste der Symbole, von denen wir eines auswählen können , um zwischen den Bildschirmen zurückzukehren Wir wählen dieses Symbol, Importsymbol, Großartig, das Symbol wurde erfolgreich hinzugefügt. Wir ändern einfach die Größe und verschieben es. Hier links in der Kopfzeile. Sie können andere Symboltypen aus dem Symbol auswählen. Wenn ich ein Plug-in verwende, empfehle ich, dieses Plugin zu verwenden, da es viele Symboltypen gemäß Ihren Anwendungsanforderungen enthält . Ändere von hier aus seine Farbe zu Weiß. Und mit Copy & Paste haben wir für die anderen hinzugefügt. Auch für diese Anzeige dasselbe Symbol und beenden Sie die anderen Bildschirme , damit es funktioniert und wir eine Interaktion hinzufügen können. Sie sollten auf das Symbol klicken und die Rahmenauswahl wählen. Fügen wir nun die Return-Interaktion für Bildschirme hinzu, die Symbole enthalten Behalten Sie hier die gleichen Einstellungen bei. Und für die Animation wählen wir „Die Dauer auf 400 Millisekunden erhöhen“ und fügen weiterhin eine Interaktion für diesen Bildschirm hinzu. Hat aber nicht richtig funktioniert. Wir werden die Rahmenauswahl zu den übrigen Bildschirmen hinzufügen. Es ist immer notwendig, diese Option zu aktivieren, damit die Komponenten bei den Interaktionen zwischen den Bildschirmen verwendet werden können . Wir wenden uns nun der Übersetzungsaktion zu und versuchen erneut, sie hinzuzufügen. Behalten Sie dieselben Optionen bei und fahren Sie mit den nächsten Bildschirmen fort. müssen nicht konfiguriert Die Link-Einstellungen für die restlichen Interaktionen müssen nicht konfiguriert werden. Figma behält automatisch die gleichen vorherigen Bildschirmkonfigurationen bei. Auch hier werden wir die Fortschritte testen, die wir gemacht haben. Sehr gut. Alle Symbole kehren in den Designmodus zurück und zoomen hier auf diesem Bildschirm. Kopieren Sie jetzt den Dashboard-Bildschirm und benennen Sie das Dashboard um, unterstreichen Sie eins. Und die zweiten beiden, das Armaturenbrett unterstreicht zwei. Hier fügen wir ein Pop-up , wenn wir auf das Profilbild klicken. Fügen Sie ein Rechteck hinzu, indem Sie auf eine geformte Zone klicken. Um eine schwarze Ebene anzupassen, verwenden wir eine sehr einfache Methode um einen schwarzen Farbton auf dem Hauptbildschirm zu erstellen. Deshalb haben wir die Farbe des Rechtecks in Schwarz geändert und die Intensität der Farbe auf diese Weise verringert der Farbe auf diese nachdem wir das Rechteck an den gesamten Bildschirm angepasst haben. Aber dieses Rechteck für das Pop-up wählen wir an dieser Stelle hier rechts, oben, direkt über dem Profilbild. Hier ändern wir den Radius der Form. Wir werden natürlich eine weiße Farbe wählen. Fügen Sie nun die Elemente des Popups hinzu, beginnend mit dem Profilbild. Dieser Link zum Aufrufen des Profilbildschirms. Sie können die Schriftgröße auch auf 25 anpassen , damit sie für den Benutzer lesbar ist. Hinzufügen des zweiten Links zur Eingabe in die Profileinstellungen. Und schließlich die Abmelde-Schaltfläche. Hier für den Abmeldelink können wir die rote Farbe wählen, um ihn von den Schaltflächen der anderen zu unterscheiden. Sie können dem Plug-In auch ein Abmeldesymbol hinzufügen. Wir werden dieses Symbol wählen, um dem Benutzer eine gute Erfahrung zu bieten. Wir passen die Höhe und Breite des Symbols so an, dass es im Pop-up besser lesbar ist. Erneut die Farbe auf Rot ändern. Bei Ihren Entscheidungen müssen Sie immer alle Arten von Benutzern berücksichtigen , die Ihre Anwendung verwenden, und sicherstellen, dass alle dieselbe Erfahrung haben. Wir fügen den notwendigen Prototyp für dieses Pop-up hinzu. Wir wählen den Stil aus, der das Pop-up ein- und ausgeblendet werden soll . Beim Anklicken des Bildes. Für die Schaltfläche „Abmelden“ sollten Sie die Rahmenauswahl aktivieren, um sie in der Prototyp-Interaktion zu verwenden . Jetzt wählen wir die Interaktionsdetails , die mit unserer Anwendung kompatibel sind. Toll, lass uns versuchen, unseren Prototyp auf dieses Level zu bringen. Nett. Das Pop-up funktioniert einwandfrei. nun zu unserem Arbeitsbereich zurück , um den Rest des Prototyps fertigzustellen. Fahren Sie jetzt fort und fügen Sie ein Pop-up hinzu, um die Option auszuwählen , wer Ihr Profilbild ändern kann. Zuerst wurde der Name dieses Bildschirms geändert, um den Namen zu ändern. Und kopiere es hier , wo wir unser Popup-Änderungsbild als Namen dafür erstellen können . Auf dem Startbildschirm fügen wir hier ein Symbol hinzu , sodass wir das Profilbild ändern können. Rechtsklick hier. Plugins-Icon von Phi. Suchen Sie hier nach einem Kamera-Icon. Wir können dieses Symbol jetzt verwenden, aber jeder kann sein eigenes Symbol wählen. Oh, in diesem Teil ist es wichtig. Wir können es also in eine Ellipse legen und diesen Teil der Formellipse auswählen. Verschieben Sie nun das Symbol in den Mittelpunkt des Kreises. Das Symbol wurde versteckt. Es ist unter dem Kreis. Mit dieser Option, nach vorne bringen, kann sie nach oben gehen. Die Verwendung dieser Option haben wir im ersten Kurs genau erklärt . Um mit Figma zu beginnen, ändern wir die Größe und verschieben es so. Die beiden so gruppieren , um sie zusammenzubringen. Jetzt verschieben wir es in ein Profilbild. Auf dem zweiten Bildschirm fügen wir nun ein Pop-up hinzu, in dem der Benutzer wählen kann, wie er sein Profilbild ändern , ein Bild aus der Galerie auswählen oder ein Foto mit seinem Smartphone aufnehmen kann. Zuerst fügen wir eine schwarze Ebene hinzu, indem Rechteck mit geringer Transparenz der schwarzen Farbe verwenden. Wir werden die Parameter für das Aussehen des Rechtecks wie auf dem vorherigen Bildschirm konfigurieren . Und jetzt füge ein Rechteck für Papa hinzu. Lassen Sie uns die Farbe des Popups in Weiß ändern und zwei Symbole hinzufügen, eines für die Galerie und das andere für die Kameraoption. Wir werden diese beiden Icons hier anpassen. Im Pop-up. Wir werden die Breite und Höhe des Kamerasymbols auf 30 ändern , und dasselbe gilt für das andere Symbol. Nach Rückmeldungen aus meinem vorherigen Projekt sollten Sie immer die Icons verwenden damit der Benutzer seine Auswahl schneller treffen kann. Also werden wir dafür die Wörter, Kamera und Galerie mit derselben Schriftart hinzufügen . Wir haben sie so neu gruppiert , um sie zusammen anzupassen. Vergessen Sie nicht, die Schaltfläche Zurück zum Startbildschirm hinzuzufügen . Lassen Sie uns nun die Interaktion zwischen diesen Frames hinzufügen. Wechseln Sie in den Prototypmodus. Wählen Sie dieses Symbol und verknüpfen Sie es mit dem Bildschirm unten. Für die Animation wählen wir Instant. Und die Rückinteraktion zum ersten Bildschirm. Hier ändern wir ein wenig an den Eingabefeldern für das Essen und das Passwortfeld. Aber zuerst werden wir unsere neueste Prototypänderung testen. Lass uns anfangen. Bücher. Das Wort Kamera gibt es im Prototypenmodus nicht. Hier auf der linken Seite überprüfen wir die Position dieses Wortes und vergleichen es mit den anderen. Wie Sie sehen, muss es hierher direkt unter die Galerie verschoben werden. Ich weiß nicht, warum es hier platziert ist, aber immer muss jede Komponente unter dem entsprechenden Bildschirm sein. Und lass es uns noch einmal versuchen. Toll, das Pop-up wurde korrekt angezeigt. Jetzt kehren wir zu den Änderungen in diesen Bereichen zurück. Zuerst passen wir diese Texteingabe für Breite 300 und Höhe 40 an. Und wir ändern auch die Schriftgröße auf 14. Mit derselben Methode haben wir das zweite Feld für das Passwort geändert . Wir nehmen diese Änderung vor , weil ich sehe, dass diese Felder für den Benutzer schwer zu lesen sind. Danach werden wir Symbole hinzufügen, um ein besseres Erlebnis als in der ursprünglichen Version zu bieten. Ich möchte die E-Mail und das Passwort nach links verschieben , um hier Symbole hinzuzufügen. Also von Icon importieren wir, wenn ich ein Plug-in habe , zwei Icons, eines für das Passwort und das andere für die E-Mail. Ich möchte ein Symbol wie eine Person für das männliche Feld und einen Schlüssel für das Passwort wählen . Nach dem Import der Symbole wechseln wir zur linken Seite des Feldes, sollten es jedoch in erster Linie anpassen. Jetzt möchte ich die Farbe ändern, um zu warten. Großartig. Jetzt ist der Bildschirm besser geworden. Trotzdem sollten Sie dieses Passwort vergessen anpassen. Und der Untertitel des Bildschirms. Jetzt wählen wir auf dem Bildschirm unten alle Änderungen aus, die wir zum Kopieren vorgenommen haben. Bevor wir das löschen, um die neuen Felder an ihre Stelle zu setzen. Fügen Sie es hier ein und platzieren Sie es in der Mitte des Bildschirms. Im Gegensatz zu den anderen ändern wir das. Großartig. Jetzt sind wir mit diesem Bildschirm fertig und wir sehen uns im nächsten Teil. 6. Füge intelligente Animation hinzu: Wir beginnen jetzt mit diesem Bildschirm, um diesem Bild, das in den Designmodus gewechselt wurde, Animationen hinzuzufügen . Zuerst erstellen wir eine Kopie für den Bildschirm. Wir kopieren es direkt unter das andere. Wenn Sie eine Animation auf einem Bildschirm hinzufügen möchten, sollten Sie immer den Startbildschirm duplizieren und die Änderungen auf dem zweiten Bildschirm vornehmen. Und dann wählen wir die beste Konfiguration und die Art des Übergangs zwischen ihnen. Und wir haben den Namen in Onboarding in Point to geändert. Also, was werden wir tun? Wir schieben das Bild leicht nach oben, sodass dem Benutzer Bewegungsanimationen erscheinen , wenn der Mauszeiger über dem Bild schwebt. Lassen Sie uns jetzt den Link zwischen diesen beiden Bildschirmen hinzufügen. Also schwärze nur das Bild vom ersten Bildschirm und verknüpfe es so mit dem zweiten Bildschirm. Jetzt sollten Sie die Option beim Bewegen des Mauszeigers ändern und den Animationseffekt auf Smart Animate ändern. Und wir können die Verzögerung der Animation auch auf 500 Millisekunden ändern . Vergiss nicht, diesen Link zu löschen. Wir lassen nur die alten Links des Startbildschirms übrig. Lassen Sie uns die vorgenommenen Änderungen ausprobieren. Wie Sie jetzt sehen, beginnt die Animation, wenn Sie den Mauszeiger über das Bild bewegen. Wir gehen zu der anderen Animation auf dieser Schaltfläche über, legen Sie los. Wir werden dasselbe tun wie bei der anderen Animation. Kopieren Sie den Startbildschirm und fügen Sie ihn hier ein. Ändern Sie den Namen in Onboarding 2.3. Nur um zwischen Bildschirmen zu unterscheiden. Wir werden die Farbe ändern oder die Sättigung von Blau erhöhen. So wie das hier. Auf die gleiche Weise erfolgt das Löschen der Links vom Startbildschirm. Wir entfernen die Links zwischen den Bildschirmen , um unsere Wahl der Animation zu treffen. Und füge eine neue Interaktion zwischen dieser Schaltfläche und dem obigen Bildschirm hinzu. Wir belassen die Parameter als erste Animation. Sie sollten jedoch den Hauptlink hinzufügen, wenn Sie auf Get Started klicken, um zum nächsten Bildschirm zu gelangen. Sehr gut. Sogar die Parameter sind richtig konfiguriert. Ändern Sie einfach den Animationstyp auf Push und reduzieren Sie die Animationszeit auf 300 Millisekunden. Hier kann jeder von Ihnen seine eigene Konfiguration wählen , um eine andere Art von Animation zu erstellen. Lassen Sie uns jetzt die Änderungen ausprobieren, die in der Schaltfläche vorgenommen wurden. Großartig. Die Animation ist gut eingerichtet. Wenn Sie mit der Maus über die Schaltfläche fahren. Und nach ein paar Millisekunden ändert sich die Farbe mit einer flüssigen Animation. Mir ist nur aufgefallen, dass es notwendig ist , die Verzögerung dieser Animation etwas zu verringern. Für diese Animation bis zu 300 Millisekunden. Wir versuchen es ein anderes Mal. Gut, mit den neuesten Änderungen ist es jetzt besser. Jetzt machen wir das alles noch einmal mit dem zweiten Bildschirm, der Tastenanimation und dem Bild. Es ist jetzt gut, nachdem die für diesen Bildschirm benötigten Animationen hinzugefügt wurden, ähneln sie den Animationen des ersten Bildschirms. Lass es uns im Prototypenmodus versuchen. Hier haben wir die Art der Animation im Vergleich zum anderen Bildschirm geändert . Hoppla, ich habe vergessen , den Link hinzuzufügen. Wenn ich auf den Button klicke. Wir kommen im Prototypenmodus zurück. Wir fügen es einfach wie die anderen Interaktionen hinzu. Wir belassen es so, dass es standardmäßig gut konfiguriert ist. Nur eine Bemerkung hier. Die Einstellungen der Interaktionen bleiben immer als zuletzt hinzugefügte Konfiguration erhalten. Wir überprüfen jetzt den Rest der Links. Und lass es uns noch einmal versuchen. Gut, alle Interaktionen sind parametrisiert. Im nächsten Schritt werden wir diesen Schaltflächen verschiedene Animationen hinzufügen . Kopieren Sie den Anmeldebildschirm und fügen Sie ihn hier direkt unter dem Startbildschirm ein. Und seinen Namen geändert, um sich anzumelden? Ja. Gehen Sie auf die gleiche Weise auf anderen Bildschirm und verschieben Sie ihn darunter. Hier haben wir den Namen in angemeldet geändert. Nein. Einer der Bildschirme für die Animation, wenn der Benutzer wählen möchte? Ja. Und der andere Bildschirm für die Animation von NO Choice. Wie in der Prototyp-Demo zu Beginn des Kurses zu sehen ist, die Farbe von Blau zu Weiß, wenn der Benutzer den Mauszeiger über eine der Ja- oder Nein-Tasten wechselt die Farbe von Blau zu Weiß, wenn der Benutzer den Mauszeiger über eine der Ja- oder Nein-Tasten bewegt. Um zu beginnen, müssen Sie die Farbe von zwei Tasten auf Blau ändern . Hier wählen wir die gleiche Farbe der Tasten, ja, mit diesem Farbwähler. Aber das Wort NEIN ist verschwunden, weil sie dieselbe Farbe hatte, blau. Du solltest also seine Farbe auf Weiß ändern und diese Auktion aktivieren. vorne bringen. Jetzt haben wir diesen Bildschirm fertiggestellt. Wir gehen zum nächsten. Für diesen Bildschirm fügen wir die Tastenanimation hinzu. Ja. Ich werde dafür die Farbe auf Weiß ändern. Und fügen Sie diesen Optionsstrich hinzu, um eine Kontur wie die andere Schaltfläche anzupassen Ändert die Farbe mit der Auswahlfarbe in Blau. Auch hier sollten Sie im gleichen Fall die Farbe des Wortes ja ändern. Zweitens haben wir die Farbe der Tasten NEIN auf Blau geändert. Und noch einmal: Bring to Front. Fahren wir mit dem zweiten Bildschirm fort und ändern die Farbe der Tasten im Gegensatz zum vorherigen Bildschirm. Aber zuerst werde ich die Größe des Randes ändern , um ihn klarer zu machen. ZB. Ich habe ein kostenloses Problem behoben. Dieser Bildschirm ist fast fertig, wie bei anderen Schaltflächen werde ich nur die Größe des Randes auf drei festlegen. Wechseln wir jetzt in den Prototypmodus, um die Animation zwischen den Bildschirmen hinzuzufügen. Zunächst werden wir alle Links für diese beiden neuen Bildschirme entfernen . Und für den ersten Bildschirm beginnen wir mit Ja, von hier entfernt. Und verknüpfen Sie den Anmeldebildschirm mit dem Anmeldungsbildschirm Ja, Bildschirm. Wir haben uns für diese Art der Animation entschieden, um die verschiedenen Figma-Tools zu beherrschen und mehr Techniken zu entdecken, die Ihnen bei Ihren eigenen Projekten helfen können. Und jetzt fügen wir den Link zur Interaktionsanimation hinzu. Ja, mit dem Bildschirm direkt darunter, wähle ich, während ich mit dem Mauszeiger auf die Auktion gehe, um die Animation auszulösen und die Animation so zu ändern , dass sie sich auflöst. Und das Gleiche gilt für die NO-Taste Trennen Sie sie vom Anmeldebildschirm. Scrollen Sie nach unten zu diesem Bildschirm, auf dem wir die Interaktion mit den Bedienfeldtasten hinzufügen. Wir bleiben jetzt, da sich die Verbindung zwischen dem Startbildschirm und dem Bildschirm unten angemeldet hat. Nein. Nun, wir sind fertig diesen beiden Animationen. Lass es uns jetzt versuchen. Gemischt Wie Sie hier feststellen, ändert sich die Farbe, wenn Sie die Maus über eine der Tasten bewegen. Klicken Sie. Ja, wir haben zum Anmeldebildschirm weitergeleitet. Und das Gleiche gilt für die NO-Taste. Hoppla, wir stellen hier fest, dass die E-Mail- und Passwortfelder dem Anmeldebildschirm so verschwunden sind. Wir gehen zurück zu unserem Workspace , um das Problem zu beheben. Ändern Sie den Entwurfsmodus. Wir wählen immer diese Option, Gruppenauswahl, um es uns zu erleichtern, die Komponenten zu verschieben, ohne die Maße zwischen ihnen zu ändern. Zuerst wählen wir alle Komponenten und sind mit dieser Option aufgewachsen. Dann lege ich es in die Mitte des Bildschirms und klicke auf Nach vorne bringen. Und wir versuchen es erneut. Es ist gut, jetzt sind die Felder für beide Bildschirme erschienen. Deshalb fügen wir weiterhin eine weitere Animation zu den Optionen für Männer und Frauen in diesem Bildschirm hinzu. Hier fügen wir eine einfache Animation hinzu, wenn der Benutzer eine seiner Optionen wählen möchte. Der Kreis erweitert sich leicht, Der Kreis erweitert sich leicht, wie in der Prototyp-Demo zu sehen ist. Wie bei den anderen Beispielen erstellen wir zwei Kopien des Startbildschirms. Hier ändern Sie einfach den Namen des Bildschirms , um zwischen ihnen zu unterscheiden. Wir beginnen mit der E-Mail-Option. Wählen Sie die Schaltfläche und ändern Sie Breite und Höhe auf 105. Jetzt fügen wir eine weitere Art von Animation hinzu, die ich in meinen persönlichen Projekten verwendet habe. Und wie gesagt, jeder kann andere Arten von Animationen erfinden und sie nach Belieben verkleiden. Außerdem kann ich die Schriftgröße ändern und sie in die Mitte des Kreises stellen. Nett. Dieser Bildschirm ist fertig. Wir können zum nächsten übergehen. Dafür werden wir einfach das Gegenteil tun. Die Änderungen werden auf dem weiblichen Knopf vorgenommen. die gleiche Weise sollten Sie die Größe der Schaltfläche und die Schriftgröße von f ändern . Jetzt sind die Bildschirme bereit, wir gehen in den Prototypmodus über. Also wähle ich vom Startbildschirm aus diese Option aus und verknüpfe sie mit dem Bildschirm unten, wo ich während des Mauszeigers die Interaktionsparameter und den Sofortmodus für die Animation wählen kann die Interaktionsparameter und den . Wir haben mit der Frauenauktion abgeschlossen. Ich werde vom Startbildschirm zum zweiten Bildschirm verlinken und dabei dieselben Einstellungen für Interaktionsdetails beibehalten. Lassen Sie uns jetzt diese neuesten Änderungen ausprobieren. Der weibliche Knopf funktioniert nicht. Komm zurück zum Workspace , um das Problem zu überprüfen. Ich wähle das weibliche Blinzeln aus. Solltest du hier wechseln, während du den Mauszeiger bewegst. Option. Toll, komm jetzt zurück, um den Prototyp zu überprüfen. Jetzt funktioniert die App einwandfrei. Hier werden wir nur die Schritte bis zum Startbildschirm abschließen . Wir werden hier auf diesem Bildschirm, direkt über der Kontoerstellung, einen Spinner hinzufügen . der Benutzererfahrung ist es erforderlich , einen Indikator wie den Spinner hinzuzufügen , damit der Benutzer weiß , dass in der Anwendung ein Prozess läuft. Und wir sehen uns im nächsten Teil. 7. Einen Spinner gestalten: Also hier füge ich unseren Spinner hinzu. Ich werde einfach ein Rechteck erstellen , um auch unseren Spinner zu sehen. Ich werde mit dir einen Kreis bilden. Und wir werden unseren Spinner auf einfachste Weise vorbereiten. Hier ändere ich die Farbe des Rechtecks, um es auf einer Kreisgröße von 500 mal 500 zu lesen und anzupassen. Sie können hier also sehen, dass wir diesen Bogen hier haben. Also können wir herkommen. Hier. Wir werden es um 65 Prozent machen. Und wenn du es so belassen kannst, oder wenn du hier einen Randradius erstellen möchtest, ist 43 gut für mich. Sie können also sehen, dass Sie es verschieben können , und später werden wir das tun. Das wird also unser erstes Date mit dem Spinner sein. Wir können es in den Spinner rechts oben umbenennen. Okay, das wird unser erster Staat sein. Jetzt werden wir ein anderes duplizieren. Was wir also im nächsten Bundesstaat tun werden , wird sich nach unten drehen. Dafür wollten wir etwa 90 Grad. Hier ändern wir den Namen des zweiten Elements in Spinner. Rechts unten. Wir fügen die linken Zustände des Spinner-, Hasty- oder eines anderen Elements hinzu und lösen es auf diese Weise ab. Nachdem ich es auf 180 gedreht habe schweife ich ab und ändere den Namen in Spinner links. Und wir sind jetzt mit dem letzten Staat hier fertig und ändern seinen Abschweifung so. Außerdem haben wir den Namen links oben geändert. Also werden wir einen Körper mit all diesen Komponenten erstellen. Lassen Sie uns sie als Variante kombinieren. Das wird die Position sein. Es ist also wichtig, dass Sie dieselben Namen benötigen, wenn Sie etwas intelligent animieren möchten. Ellipse 111. Lassen Sie uns mit diesem beginnen und in den Prototypmodus wechseln. Jetzt verknüpfen wir dies mit dem rechten unteren Element hier in den Interaktionsdetails. Wir wählen die Option nach der Verzögerung und ändern die Dauer auf Wir wählen die Option nach der Verzögerung eine Millisekunde. Lass das rechts unten stehen. Für den Animationsstil können wir jedoch die Option Smart Animate und dafür die Option „Einfaches Ein- und Ausschalten“ wählen. Korrigieren Sie dies auch auf 200 Millisekunden. die gleiche Weise müssen Sie die restlichen Elemente vervollständigen. Behalten Sie hier die gleichen Einstellungen bei. Ändern Sie dies auf „Nach Verzögerung“. Aber ich kehre zum letzten Zustand zurück, weil ich vergessen habe , eine Dauer auf eine Millisekunde zu ändern. Wir schließen jetzt die Interaktion des letzten Elements ab. Wir fügen diese Art von Animation hinzu, sodass sich nach jedem Bogen bis zum Ende seines Zyklus dreht und dann die andere Kunst beginnt und dasselbe für die anderen. Um einen kompletten Spinner zu haben. Der Spinner ist fertig, gehen Sie einfach hier auf der linken Seite und wir wechseln zur Assets-Navi. Aber schließlich sollten Sie die Farbe der Elemente auf Schwarz ändern. Ändern Sie den Entwurfsmodus. Wählen Sie die Bundesstaaten aus und wählen Sie hier die schwarze Farbe. Sie jetzt zu Assets zurück und zoomen Sie hier, um den Bildschirm zum Erstellen eines Kontos anzuzeigen. Ziehen Sie die Komponente wie folgt. Hier gibt es jedoch ein kleines Problem, bei dem Sie die Größe jeder Komponente verringern sollten. Wir sind jetzt damit fertig, die Größe aller Komponenten zu reduzieren . Wir kehren jetzt zum Bildschirm zurück. Wie Sie feststellen, ist die Größe reduziert und entspricht mehr den übrigen Bildschirmelementen. Wir wählen die rechte obere Position, Wir wählen die rechte obere Position die Animation zu starten. Wir bewegen die Komponente so in die Mitte. Gut. Lass uns diesen Spinner ausprobieren. Wir wählen einfach diesen Bildschirm und klicken hier, um zu beginnen. Wir haben auch festgestellt, dass der Spinner noch größer ist als die Elemente auf dem Bildschirm. Also sind wir zum Workspace zurückgekehrt und Sie sollten die Größe aller Bundesstaaten auf diese Weise verringern. Gut, wir bewegen einen Spinner so in die Mitte. Und versuche es erneut. Hier muss nur noch die Bewegungsgeschwindigkeit jeder Komponente geändert werden. Um eine reibungslose Animation zu erhalten, sollten Sie die Verzögerung jeder Interaktion zwischen den Bögen anpassen . Ich wähle den ersten Link aus und ändere die Animationsdauer auf 100 Millisekunden. Und wiederhole dasselbe für den Rest der Staaten. Ich denke, diese Änderung wird uns ein besseres Ergebnis bringen. Gut, um fortzufahren, aber Sie können auch andere Animationstypen und andere Interaktionsdetails wählen . Jeder kann den Spinner nach seiner Wahl anpassen und es gibt auch andere Arten von Ladeanzeigen. Jeder kann einen anderen Typ mit dem gleichen Prinzip der intelligenten Animation ausprobieren wie der Spinner, z. B. das Laden linearer Fortschrittsindikatoren für Käufer. Wir haben den Prototyp dieses Teils einer Dr.-Anwendung fertiggestellt und diese beiden Bildschirme entfernen wir jetzt. Jetzt haben wir unser Projekt abgeschlossen, bei dem wir verschiedene Prototyping-Techniken und verschiedene Arten von Animationen verwendet verschiedene Prototyping-Techniken und verschiedene Arten haben, die Ihnen bei Ihren nächsten Projekten helfen können. Und ich werde Sie im letzten Teil des Kurses sehen , wo wir das Endergebnis sehen werden. 8. Endliche Übersicht: Wechseln Sie schließlich in den Prototypmodus. Und lass uns unsere Anwendung ausprobieren. Klicken Sie und legen Sie los und öffnen Sie unsere Anwendung weiter. Wählen Sie diese Option, um zum Anmeldebildschirm zu gelangen. Testen Sie hier dieses Kamera-Symbol, sodass wir die entsprechenden Bildschirme für diese beiden Optionen, Kamera oder Galerie, hinzufügen können . Für diesen Schritt ist das Dashboard geöffnet, wo er sich abmelden und zum Anmeldebildschirm zurückkehren kann. Jetzt sind wir fertig und wir sehen uns im nächsten Kurs.