Entwerfen einer Webanwendung

1. Trailer des Kurses: Hallo, Willkommen zum Webdesign-Kurs mit Figma. Und in diesem Kurs werden wir lernen , wie man eine Beispiel-Webanwendung entwirft eine Beispiel-Webanwendung , mit der Menschen gemeinsam Filme ansehen können. Wenn Sie Hühnchen haben, einen Vorschaukurs, werden wir auch eine mobile Version davon herausbringen. Also werden wir in diesem Kurs arbeiten und dann eine Webanwendung für sein Herz. Und ich selbst bin seit über drei Jahren UI-UX-Designer und verwende Figma seit vielen, vielen Jahren. Heute bin ich Ihr Dozent für diesen Kurs. Am Ende dieses Kurses werden Sie also über die gegenteiligen Fähigkeiten verfügen, um eine Website zu entwerfen , die visuell ansprechend und einfach zu navigieren ist . Nochmals, wie Sie ein bestimmtes Bild und Ihren Arbeitsbereich importieren und verwenden . Wir werden auch lernen, wie man automatische Layout verwendet, das wir erstellen können . Für Designer werden wir ein leistungsstarkes Plugin verwenden, um einige Beispieldaten für unser Projekt zu generieren. Auch hier lernen wir, wie wir unsere Komponenten, intelligente Animationen und Beispieleinführungen zwischen den Bildschirmen hinzufügen können intelligente Animationen und . Also, wenn Sie bereit sind zu lernen, wie Sie mit Figma eine schöne und einfache Webanwendung entwerfen . Spring gleich rein und lass uns loslegen. 2. Frame: In Ordnung, also lass uns gehen. Ich habe Figma, öffne es hier, ist nur ein leeres Projekt. Erster Schritt, ich gehe gerade das Französisch durch und höre hier auf. Wir können das und klicken einfach irgendwo hier auf dem Bildschirm. Und das nochmal und generiere ein Foramen oder das kann wie eine Seite für unsere Website sein. Wenn sie also Laub D sein wollen, kann ich die gesamte Eigenschaft von hier aus auf der rechten Seite ändern. Zeigen Sie, wenn wir 124, den Zeugen, und 2000er und 84, die Höhe wählen . Nett. Verkleinern Sie einfach die Ansicht, um meinen Arbeitsbereich anzupassen. Ben, von hier oben im Rahmen können wir den Namen des Bildschirms ändern. Aber in diesem Beispiel wähle ich die Ausleihseite. Mit dieser Farbpalette würden sie nun eine blaue Farbe wählen. Mit dieser Option können wir unsere Farbe so anpassen. Ich bevorzuge das besser, um mit der Gestaltung meiner FirstPage zu beginnen. Gut, wir sind jetzt bereit, mit der Gestaltung unserer Landingpage zu beginnen. Und Leute, wir sehen uns im nächsten Video. 3. Zielseite: Lassen Sie uns nun mit dem Aufbau unserer Seite beginnen und die erste Seite einer beliebigen Website erneut senden . Sie sollten die Techniken und Tricks und Ihr Design nicht verwenden Tricks und Ihr Design um den Benutzer zu überreden, um zu versuchen, in die Details zu gehen, aber Sie werden es verstehen. Auf der ersten Seite unserer Website verwenden wir also bei Kaiser Franz die Textgröße und die Farbe. Außerdem spielt die Einfachheit der verwendeten Komponenten eine sehr wichtige Rolle für die Benutzererfahrung. Wir beginnen zuerst, Text in der Mitte des Bildschirms hinzuzufügen. Also auf die gleiche Weise, Hey Kind und wähle Text hier im rechten Abschnitt, ändere ich die Textgröße auf 64 und kehre dann hierher zurück und den Bildschirm, um einen kurzen Satz zu schreiben, z. B. Banner, oder? Zuschauen ist besser. Was ändert sich besser zusammen? Ja, gut. Film, Prost wie dieser. Dann machen Sie eine Kopie für diese Steuer. Und ich werde, ich werde hier etwas anderes schreiben. Es gibt. Kurz bevor ich fertig bin, ändere ich die Textgröße für dieses Tool, 56, und fahre fort. Oder suchen Sie sich einen neuen Kraftraum bei Ihrer Lieblingswahl. Mit deinen Lieblingsleuten. Ja, es ist ein guter Film knapp unter dem ersten Jahr. Gemein. Wählen Sie dann das Öl aus und gruppieren Sie sie wie folgt. Das sind die Zehen dafür. Und wieder werde ich hier den Dateityp für den zweiten Textbias ändern . Das war's. Als erstes wähle ich einen Roboter. Außerdem können wir die Größe für dieses Tool vergrößern und das Tool anpassen oder ändern, und das Tool anpassen das variiert ein bisschen wie folgt. Wir müssen immer die gleiche Ausrichtung zweier Texte beibehalten. Jetzt füge ich hier links ein Bild hinzu. Also habe ich vorerst einen Insassen B, C HINZUFÜGEN , den wir für unser Beispiel verwenden werden. Und ich werde es später als Strafe in die Beschreibung des Projekts aufnehmen. Oder frage, warum sagt sie das so? Wir bewegen es nur in die Mitte des Bildschirms. Außerdem fügen wir den Buchstaben weiter nach links hinzu. Also ist es gut. Nein, ja, nett. Ordnung, im nächsten Schritt fügen wir die Navigationsschaltfläche zwischen dem Bildschirm hinzu. Also lasst uns mit dem nächsten Video arbeiten. 4. Knöpfe: In diesem Video fügen wir hier direkt unter dem Text eine Schaltfläche hinzu. Um einen Button in Figma zu erstellen, empfehle ich, ein Musterrechteck zu verwenden und dann Bezier so anzupassen , dass das Rho hier rechteckiger ist, so wie hier. Und bewege es mit dem gleichen. Und dann ist da noch die andere Knautschzone drin und sie surfen. Und jetzt werde ich mir eine Art Tool aussuchen, um unregelmäßig zu sein und mit den anderen Farben des Bildschirms ist das eine gute Schritt für Schritt. Wir bereiten unseren Button vor. Wir vermissen wieder den Text. Wir können den Joint jetzt schreiben. Sie geben dem Benutzer die Möglichkeit, einem Film von der, von der Homepage aus beizutreten . Nachdem Sie also die Textgröße auf 24 geändert haben, Texte in den sensitiven Bereich des Rechtecks verschoben. Jetzt ändere ich den Grenzradius auf zehn. Ja, es ist gut. Halten Sie das Rechteck und den Text mit der Optionsgruppenauswahl fest. Die beiden Komponenten sind also gruppiert und in derselben Komponente zusammengefasst, die die Namenstaste sein wird. Jetzt können wir uns bewegen und gemeinsam zaubern. Bitten Sie Ihren Mund, um die richtige und die richtige Stelle aus dem PDF für den Button auszuwählen. Ordnung, hier direkt unter diesem Text, es sind die besten Tage. Ja. Wenn Sie weitere Vorschläge haben, schreiben Sie einen Kommentar in den Bewertungsbereich des Kurses und danke, das war's. Also werden wir im nächsten Video hier oben auf dem Bildschirm und die Navigation hinzufügen, aber zwischen diesem Grün wechseln. Außerdem werden wir das Logo für unseren Anfang hinzufügen. Also lass uns gehen. 5. Navigationsleiste: Hier fügen wir zwei Links hinzu um eine Navigationsleiste zu erstellen. Also kopiere diesen Text aus dem Button Trigger essen wie die erste Länge. Vergiss, der Seite beizutreten. Sie müssen den Text auf 32 ändern. 32, oder um für den Benutzer besser lesbar zu sein und löschen Sie diesen Wert, bevor und nachdem Sie ihn jedes Jahr verschoben haben, um einen Pfeil zu erhalten. Hier an diesem Ort. Mach eine Kopie. Nun zum zweiten Link , den wir diesen verdeckt umbenennen werden. Auf dieser Seite kann der Benutzer die verschiedenen Filme und Filme entdecken , in denen der Begriff live ist. Und andere, die mit dem programmieren, mit dem Vorteil der Teilnahme und was sich mit seinen Freunden geändert hat. Und hier können wir das Super Cool benutzen , um auf die Landingpage zu gehen. Wir haben das Layout für Bree hier, also klicke ich auf Plus. Es wird das zum Keimen bringen, stimmst du zu? Jetzt ist es total verrückt komplex und macht keinen Sinn. Zeige Ich werde auf diesen klicken und zur Spalte gehen. Und wir können das genau dann hier wählen. Das wird uns geben, dann können wir die Löwen-Dinge gebrauchen. In Ordnung. Jetzt kann ich die Links der Navigationsleiste Lake Waves ausrichten . Verschiebe diesen Link an den Anfang der dritten Variablen und schließe dich dem zweiten Kanon an. Jetzt kann ich diesen coolen Trick und den Bildschirmnamen wieder ausblenden und klicken. Lassen Sie uns nun damit beginnen, das Logo unseres Aufwärtstrends vorzubereiten. Zunächst erstellen sie eine Kopie für diesen Text und fügen ihn hier ein und ändern ihn durch den Namen der Plattform. Also denke ich, ich wähle einen Beispielnamen wie Watching, Watching oder Watch Part. Ja, zu welchem Teil gehts hier? Mit diesem Namen? Wir werden ein Bild wie dieses hinzufügen, das ich auf meinem PC habe. Und sie werden das später als Anhang hinzufügen. Und die Beschreibung des Drucks. Ich werde sagen, ist es so ein bisschen kleiner? Und ich werde dich dazu bewegen, es neben dem Zoomen zu versuchen , um eine bessere Wahl zu treffen, seine Basis. Und mit dem gleichen Button-Beispiel werde ich diese Schuhkomponente wie folgt gruppieren. Griechisch in Gruppen und Vorlesung und Änderung des Namens gefährdet. Sie organisieren unser Projekt. Spring hier raus. Und wir werden es in diesen linken Teil dieses Baums verschieben. Ja, geh hier rein. Jetzt haben wir diese Seite fertiggestellt und sehen uns im nächsten Video an, den zweiten Bildschirm zu entwerfen. 6. Bildschirm verbinden: Fangen wir mit der zweiten gemeinsamen Seite an. Verkleinern Sie den Arbeitsbereich und passen Sie ihn an. Ich werde die Ausleihseite hierher verschieben und eine Kopie anfertigen. Einfügen. Gut, behalte die gleiche Herabstufung und Farbe. Nochmals, um die Navigationsleiste beizubehalten, da sie sich im gesamten Projekt wiederholt. Bildschirme. Verkleinern Sie die Ansicht und verschieben Sie die beiden Bildschirme hierher. Wir Leute, auf unserem Bildschirm. Du bist dabei. Jetzt ändern wir den Namen in Regime-Seite. Okay? Okay, gut. Löschen Sie zunächst die Komponenten dort, nur um die Navigationsleiste beizubehalten. Und dann, wie wir in der Projektpräsentation hier auf der rechten Seite gesehen haben , fügen wir ein kleines Formular hinzu, das einige Reifegradfelder enthält , damit Benutzer es mit der Person und den Daten versehen können, kurz bevor sie sich mit Freunden einen Film ansehen. Beginnen wir damit, hier Ihr Rechteck hinzuzufügen. Ich werde es so anpassen, nur damit es in der Mitte des Bildschirms angezeigt wird. Jetzt ändere ich diese Farbe auf ein dunkleres Blau, wie aus Mangel an Glück. Und stellen Sie die Transparenz auf 50 ein. Ja. Ja, gut. In Ordnung. Jetzt fügen wir den Randradius hinzu und zeigen, dass sie sich bilden. Es ist umzingelt und wird eher ein Red Bull sein. Wir fahren jetzt damit fort, das erste Textfeld mit dem Beispielrechteck hinzuzufügen . Das Gleiche gilt für die Butterchips. Wir werden es hier reparieren. Dann habe ich sein Kragennetz damit gewechselt. Mit diesem Parameter. Ich kann die Farbe und den Felsbrocken anpassen als würde ich ihn auf drei fixieren. Jetzt kann ich die Farbe ändern. Ich werde die Farbe dieses Buttons hier im ersten Bildschirm so wählen , dass ihre Bildschirme daraus bestehen. Schon wieder. Ich werde die Farbe des Rechtecks weiterhin mithilfe des Lautsprechers ändern die Farbe des Rechtecks weiterhin mithilfe des , nur um die Farbe zu erkennen. Und für die Felder ist es wiederum besser, den Randradius auf, HA, ja, es ist perfekt einzustellen . Jetzt werde ich eine Kopie vom Discover-Link hier oben über der Seite erstellen . Aber wie Sie jetzt sehen, es bewusst herausgenommen weil es durch das Rechteck verdeckt wird. Du solltest die Option Branch von Frank verwenden, wenn der Text an der Vorderseite des Hauptgeländes gepostet werden soll. Gut. Jetzt bewegen wir sie alle hierher und tauschen diese eine gegen zwei Kugeln aus. Wird den umzubenennenden Text weiter ändern. Die erste Befürchtung, die Verbreitung muss etwas weiter unten abgeschlossen sein. Aber Fusionskraft, das Rechteck, füge beide Buchstaben , sodass die Basis die anderen Feeds aufnehmen kann. Ich kann das normalerweise auf 1060 korrigieren. Ja. In Ordnung, gut. Jetzt machen wir damit weiter. Jetzt werde ich diese beiden Komponenten kopieren , um die restlichen Füße unterzubringen. Gut. Jetzt keimen wir den letzten und wir sind Filme hier, die sich für diese beiden Hauptfilme ändern werden. Ich füge direkt darunter eine Schaltfläche hinzu. Also hier fügen wir die Schaltfläche hinzu oder Sie kopieren einfach diese Schaltfläche und fügen sie hier ein . Okay? Wir fügen den Randradius hinzu, wie bei den anderen Komponenten. Ändern Sie die Schriftgröße auf 28. Und dieses eine Tool, um zu verheißen. Nun verschieben wir die Texte und das Mittelbein so wird die letzten Änderungen von geschmackvoll vornehmen. Und wir schauen uns etwas an und die linke Seite des Bildschirms. Okay, sehr gut. Also hier werden wir dasselbe hinzufügen, wie Text, kopieren und hier einfügen. Nur um den gleichen Parameter der Texte im alten Projekt beizubehalten. Wir können schreiben, pass auf, wenn Frankreich in gewisser Weise ist, du solltest wissen, es zu einer roten Kugel wachsen zu lassen und die Schichten hier auf der linken Seite zu nehmen. Außerdem kann ich die Größe vergrößern, nur damit sich die Freunde zu den Ohren hingezogen fühlen. Ja. 90 ist gut. Film später oben und der Mitte des Bildschirms so. So. Ja, genau. Wir werden die Farbe von Frankreich zu einer anderen warmen ändern , um attraktiver zu sein weil die Kosten für unsere Plattform Budget für Freunde sind und wie Sie teilnehmen und Spaß mit Ihren Freunden haben mit dieser Technik ist weit verbreitet auf vielen Plattformen und vielen, vielen Anwendungen Gestenverfolgung Benutzer zu einer bestimmten Sache wie diesem Beispiel. Okay, lassen Sie uns jetzt damit fortfahren, ein Foto vom Ende der Seite hinzuzufügen . Hier finden Sie in der Regel einen Copyright-Hinweis, Link, Datenschutzrichtlinie welche Kontaktinformationen und soziale Netzwerke benötigen das Symbol. Ein Foto einfügen enthalten Informationen, Ein Foto einfügen enthalten die Sie verbessern, um die externe überschreiben Zukunft. Also werde ich von hier aus dieses Rechteckwerkzeug verwenden und mit dem Reduzierer ein Rechteck über die Telefonbreite der Seite zeichnen ein Rechteck über die Telefonbreite . Dann werde ich die Antwort einfach an der richtigen Stelle überprüfen. Jetzt ändern wir die Farbe des Fehlers. Also fügen wir links zwei Links für die Seite Über uns und die Kontaktseite hinzu. Und auch durch andere indirekte Methoden beginnen wir mit dem linken Virusbereich. also auf die gleiche Weise Kopieren Sie also auf die gleiche Weise die Entdeckungstexte aus der Navigationsleiste und fügen Sie sie jedes Jahr ein. Die gleiche Sonde ist wahrscheinlich oder klicken Sie auf den Link und wählen Sie diese Option Zweig oder Vorderseite. Okay? Uh, gut für den Moment. Ändern wir den Schrifttyp und die Schriftgröße auf 24. Ich werde jetzt den Text für diesen Vornamen ändern , um über diese zu sprechen und eine weitere Kopie für die Namen der Kontaktpersonen zu erstellen. Okay, gut für diesen Teil der Fortsetzung jetzt zum rechten Teil des Ordners, wo wir die Social-Media-Links zum Einfügen hier hinzufügen werden. Also Basisebene die Syntax und eine weitere Länge nebeneinander. Ändere diesen einen Pool auf Facebook und diesen über Twitter. Wir verwenden also die Layoutraster-Option , um die Fotolinks richtig auszurichten. Wählen Sie die Vorderseite und die Aktivität aus dem Lautsprecher aus. Ich verfolge eine Linie, diesen Link am Ende der zweiten Farbe und diesen Link am Anfang. Mit der gleichen Methode kann ich also die anderen Beine ausrichten. Sie können die Anzahl von Kelvin auch , um weitere Informationen zu erhalten. Also ist es gut für diesen. Jetzt deaktiviere ich die Option für Grün und es gibt zwei Links, Symbol aus dem Econ. Wenn ich Azure, ML, Variety und Choice anschließe, können Sie das per Flugzeug unterstützen. Ich kann in dieses Feld schreiben, Facebook. Okay, das kann ich teilen. Nach dem Klicken. Wichtig hier. Würden sie sagen, dass Kanadier in meinen Arbeitsplatz importiert wurden ? Geh wieder hoch. Jetzt Fu, sieh dir das Twitter-Symbol an. Twitter, das der Wirbelsäule dient. Klicken Sie erneut. In Ordnung. Jetzt werden wir natürlich morgen die Größe dieses Werkzeugsymbols auf eine ähnliche Größe für Volltext bringen. Und wir nehmen hier eine Hypothek auf. Aber dann noch ein Waschbecken. Sie müssen die Farbe auf Weiß ändern , um eine bessere Übereinstimmung mit dem DX zu erzielen. Okay, gut für diesen. Fahren Sie mit dem zweiten Speck fort, ich glaube, 20, er ist eine gute Größe für diesen Scheck. Zoomen Sie hinein und verschieben Sie dieses Bild an die linke Seite des Textes. Dann werden wir den Link durch einen anderen Link setzen. Sehr gut. Dieser Bildschirm ist jetzt bereit und Jamal mit C out betritt den Arbeitsbereich. In Ordnung, Leute. Jetzt sind wir mit dieser Seite fertig und sehen im nächsten Video zur Gestaltung des Discover-Bildschirms. 7. Bildschirm entdecken: Hallo Freunde. Fangen wir also an, den Entdeckungsbildschirm zu erstellen. Zunächst verschiebe ich die zweite Komponente hierher und erstelle eine Kopie dafür, um die gleiche Vorlage wie zuvor beizubehalten. Zoomen Sie hinein. Und wir haben den Namen geändert, um Bache zu entdecken. Danach lösche ich alte Komponenten von der Seite. Das könnte jetzt über die Links der Navigationsleiste geschehen. Dieser. Um den gleichen Stil auf dem Bildschirm der Anwendung beizubehalten. Daher ist es in Ihren Designs sehr wichtig, dieselbe Schriftart für den Satz und die Wörter zu verwenden . Lassen Sie uns weiterhin ein Sample Sense schreiben, um den Benutzer anzuweisen, mitzumachen und sich ein paar anzusehen. Stimmt es? Filme und Fernsehsendungen von Bros. Bros. Bros. von hier. Nein, nein, nein. Stöbern Sie einfach in Filmen und Fernsehsendungen. Hier wird die Textgröße bis 48 angezeigt. Und das Front-Type-Tool. Auch hier sollte ich die Größe auf 56 erhöhen und jeweils hier oben ein wenig entfernen. Hier fügen wir drei Sauerstoffflaschen hinzu, damit die Benutzer die beliebtesten Filme auswählen oder die Liste der Gefühle anzeigen können die beliebtesten Filme auswählen . Fangen wir an, hier in der Mitte ein Rechteck hinzuzufügen. Ich bewege den kleinen Knopf so. Und jetzt ändern wir die Farbe von hier aus auf Schwarz. Okay, gut. Aber was ich kann das nochmal so ändern und die Transparenz auf 80 erhöhen. Jetzt ist es sehr gut. Also werden wir hier kopieren und einfügen. Wieder ein Rechteck neben dem anderen. Jetzt kann ich die Komponenten in Israel so nach oben verschieben . Wann können wir beginnen, ihre Bataillone dieses Rechtecks vorzubereiten . Kopieren Sie erneut aus der Navigationsleiste und fügen Sie es hier ein. Also für diesen Sauerstoff werde ich die besten Filme schreiben, die besten oder die beliebtesten Filme. Schau es dir auf der Plattform an. Tagesordnung, die Größe beträgt 24 bis 28. Ja, ist jetzt gut, also ein Film hier. Sie sollten jedoch die Option Brand24 aktivieren oder anklicken und weiterhin die beste Option auswählen. Genau wie ich, es ist okay. Lassen Sie uns eine Kopie für das sekundäre Rechteck erstellen. Und wir werden es ändern, Georgina, wenn der Benutzer den General des Films wählen kann , den er sich ansehen möchte. Nochmals für die letzte Option, Modus. Ja, mehr. Geben Sie dem Benutzer die Möglichkeit, mehr Filme anzusehen oder den Film zu beenden. Stimmt es? Jetzt füge ich drei Symbole für den Bezirk hinzu. Ich gehe vom Kampf-Plugin aus. Für den ersten kann ich das Zeug schreiben , als ob die Beine links wären. Um den Ausdruck in „Gefällt mir“, „ Am besten“ oder „Favorit“ zu ändern , um mehr Symbole anzuzeigen. Auf der nächsten Seite wähle ich diese aus. Scrollen Sie nach unten und klicken Sie dann auf das Symbol, um zur nächsten Leiste zu gelangen. Jetzt kann ich die allgemeine Option zeichnen. Ja, Schwann, Baker. Und nach dem mehr Sauerstoff kann ich mit dem nächsten in einer Reihe suchen. Oder worüber? Ja. Okay. Die nächste Seite. Hier, wir werden das importieren. Ich kann. Okay. Jetzt haben wir nicht gesagt, dass sie ein Symbol sind, sondern sie in ein Rechteck verschoben. Also Leute, wir wissen, dass wir die Farbe der Symbole in Y ändern werden, sie sollte mit den anderen Komponenten übereinstimmen . Okay. Gut. Wir beenden mit dem Februar-Biker. Und jetzt zeige ich die besten Tage für die Ikone hier und da war Barometer, wir fixieren AT. Und das Gleiche gilt für die zweite Pyramide. Verschiebt jedes Objekt hier in die Mitte des ersten Rechtecks. Okay, es ist gut. Fahren Sie jetzt mit dem zweiten fort. Nun, uns wurde dieselbe Konfiguration gesagt und wir sind mit der letzten fertig. Ich kann dieselbe Umkreisung so auf 180 Grad einstellen. Schließlich verschiebe ich jedes hier in die Mitte, so wie die anderen Symbole , die ich hier noch einen Satz schreiben werde , der andere Button zum Leben ist, um den Benutzer zu motivieren oder zu ermutigen, sich seinen Freunden anzuschließen. Also kopiere von der ersten Seite und basiere hier. Jetzt werde ich schreiben, fast so, als würde Seite an Seite im wirklichen Leben zuschauen? Ja. Würde das funktionieren? Ändern wir die Schriftgröße auf 24. Bevorzugt das beste Jahr und den Schrifttyp der regulären Schrift. In Ordnung, es ist also perfekt für diese Weltumsegelung. Jetzt werde ich die Komponenten so gestalten, dass sie lesbarer und ansprechender sind , um die des Benutzers zu zeichnen. Fangen wir jetzt mit diesem Rechteck an, dem wir die Poster der Filme hier auf der linken Seite enthalten werden in dem wir die Poster der Filme hier auf der linken Seite enthalten werden. Und wir ändern die Herabstufung durch Faith Händels Skizze auf 550. Jetzt kann ich es hierher bringen. Ja, hier werden wir einfach, ich werde die Komponenten des Bildschirms so neu gruppieren , um meine Komponente lila neu zu organisieren. 8. Leistungsstarke Plugins: Hallo Leute. Hier in diesem Rechteck werden die vier Bild von einer kraftvoll, die wir in diesem Video herausfinden werden, wo wir die Filme, die jetzt gezeigt werden , mit ihrer Körperhaltung hinzufügen die wir in diesem Video herausfinden werden können oder präsentieren . Ordnung, also klicken wir mit der rechten Maustaste und wählen Plugins aus. Klicken Sie anschließend auf das Unsplash-Plugin. Für mich das Plugin im Beispiel. Aber wenn es nicht in deinen Workspace importiert wurde, kannst du reinklicken und herausfinden, was vegan und einfach importiert wurde. Dieses Plugin enthält viele qualitativ hochwertige Bilder. Ich empfehle es zu benutzen. Wir suchen nach jeder Art von Bild. Persönlich verwende ich es häufig in meinem Projekt. Hier suchen wir im Term Board nach Gefühlskräften. Und dann für unsere Seite hier, verschieben Sie sie in die Suchleiste und scrollen Sie, um die Liste der Ordner zu entdecken. Also kann ich dieses wie das erste Poster nach meinem Gefühl zuschneiden . Hier sollten Sie nicht auf dieses Indikator-Tool warten , das Unternehmen ab dem Ende der EMH nutzen wird. Okay, gut. Es heißt erfolgreich importiert. Lass uns weiter nach einem anderen Poster suchen. Dieser oder dieser. Jetzt, Lernender, werde ich diesen importieren. Okay? Okay, dieses kovalente More-Bild für dieses fortzusetzen ist jetzt gut, ja, ich werde es importieren. Okay. Scrollen Sie zwei weitere nach unten. Der letzte. Wir kehren hier zu den Top-Darstellungen zurück. Eines von diesem Bild. Ja, dieser, Krypton Core. Stimmt es? Das Bild wurde erfolgreich in meinen Workspace importiert. Jetzt werden wir sie auf derselben Seite beurteilen , wie es der Fall ist. Das haben wir damit abgeschlossen. Okay. Jetzt werden wir sie in unsere Box bringen. Okay, wir sind gute Leute. Jetzt sind wir mit dieser Seite und zwei im nächsten Video fertig , um einen Prototyp und eine intelligente Animation hinzuzufügen. 9. Prototyp und Animationen: In diesem Video werden wir Einführungs- oder Navigationslinks zwischen dem Bildschirm und erneut Animationen für einige Komponenten hinzufügen Einführungs- oder Navigationslinks , Animationen für einige Komponenten weil ich hier bin und der Landingpage auf dem ersten Bildschirm und dem Einkaufszentrum mit der Switch-Strip-Mall. Okay, fangen wir mit dem Button hier an. Klicken Sie auf den Kreis und verknüpfen Sie ihn mit der gemeinsamen Seite. Okay? Dies ist ein Fenster mit Interaktionsdetails. Von hier aus passen wir Interaktion zwischen der Seite und können die Art der Navigation oder der Bewegung anzeigen. Auch die Dauer, wenn Sie von einem Bildschirm zum anderen wechseln. Für diese Interaktion werde ich diese beheben. Also klicke oder klicke ich auf Sauerstoff und navigiere durch die Gelenkphagen. Und hier können wir aus dieser Liste den Animationstyp wählen . Aber für, aber für mich werde ich jetzt die Instant-Animation zeigen. Lassen Sie uns weiterhin die Links in die Navigationsleiste mit den anderen Bildschirmen hinzufügen . Folgen Sie dieser Seite wie die Einführung des Buttons. Auch hier zeige ich Ihnen die gleiche Parametrisierung Fortschrittslinks und jetzt den Discover-Link. Okay, gut. Der Link wurde erfolgreich mit der gleichen Interaktion hinzugefügt, die wir denken. Jetzt beenden wir den Rest der Interaktion zwischen Orangengrün mit der gleichen Methode. Für das von uns gewählte Logobild kehren wir also so zur Homepage zurück, wenn wir auf das Logo klicken . Sehr gut. Jetzt versuchen wir die Einführung, indem wir hier klicken. Zuerst benutze ich die Schaltfläche, komme zum Längen- und Breitenhandel und den Rest der Navigation zurück hier im Workspace. Okay, jetzt füge ich die Animation zu diesem Bild der Landingpage hinzu. Aber wenn wir Animationen für irgendwelche Komponenten hinzufügen, sollten Sie zunächst den Dringlichkeitsbildschirm kopieren, um diese Innovation auf dem zweiten Bildschirm zu ändern und die Ausgangssituation wiederzugeben , als das Original Gideon ist, da dies nicht der Fall ist. Verschieben Sie den zweiten Link so direkt unter den ersten kehren Sie dann in den Entwurfsmodus zurück. Also zoomen wir hier rein und ändern den Namen in Lending Page Animation One. Wählen Sie das Bild der Änderung unserer Intuition mit diesem Parameter aus und setzen Sie es auf Null. Okay? Das Verkleinern der Interaktion zwischen diesen beiden Bildschirmen mit trotz Armatur. Wechseln Sie erneut in den Prototypenmodus löschen Sie pro Länge von der zweiten Seite, so wie hier. Dann fügen wir die Interaktion aus dem Bild auf dem ersten Bildschirm hinzu. Der zweite Bildschirm. Hier im Fenster mit den Interaktionsdetails. Ich werde eine beliebige Option wählen und bei der Animation fallen, die ich bei den Standardeinstellungen verwenden werde. Gut. Versuchen wir es mit Nein, der ersten Animation. Sehr gut. Also habe ich mit dem Mauszeiger über das Bild gewendet und irritiert, dass wir das in den Einstellungen eingestellt haben. Gehen Sie zurück, um die zweite Animation hinzuzufügen. Nun die zweite Animation zur Schaltfläche, wenn der Benutzer mit der Maus über die Schaltfläche fährt, wird der Strom etwas dunkler. Also werde ich zunächst eine weitere Kopie für den internationalen Bildschirmwechsel in den Designmodus und Basen hier hinzufügen den internationalen Bildschirmwechsel in den , aber keine Animationsversion. Hier. Der Name wurde erneut in Animationstool für ausleihende Seiten geändert und die Tabelle wird erneut durchsucht. Also werde ich alle Links vom Bildschirm löschen und die Interaktion der Schaltflächen mit ihrem Joint Venture anpassen , nachdem ich die Farbe der Schaltfläche hier bearbeitet habe, und den Farbdesignmodus ändern und die Farbpalette auswählen. Also werde ich einfach nach einem Bild suchen, um es dort zu haben. Guter Maulwurf, die dunklere Farbe. Okay, in Ordnung, Jim Crow von der MU und Leitung. Im ersten Schritt sollten Sie diese Navigation zwischen dem Originalbildschirm und dem riesigen Schmerz löschen diese Navigation zwischen dem Originalbildschirm und dem . Und der Link zwischen der Schaltfläche und dem neuen Bildschirm. Für diesen, den ich wählen werde, reduzieren wir den Sauerstoffgehalt. Für die Animation. Ich werde die intelligente Animation wie diese kleine Demo sicherstellen . Auch für den Tag. Ändern Sie den Wert um 200 Millisekunden , um die Animation zu beschleunigen. Okay, großartig. Jetzt beenden wir mit dem Link zwischen der Schaltfläche und der riesigen Seite. Geben Sie für diese Einstellung dasselbe Elternteil an. Repariere einfach die Animationsgelenke. Sehr gut. Jetzt können wir diese neue Animation ausprobieren. Wie Sie hier beobachten, sehen die Farbversionen so aus, wenn die meisten die Taste berühren . Und dann klicken Sie, wir navigieren zum nächsten Bildschirm. Also zurück zu unserem Workspace, um weitere Eintrittskarten für ihre entdeckte Seite hinzuzufügen. Auch hier sollten Sie wie bei der gleichen Animation zweite Seite aus dem Original kopieren. Ändern Sie den Namen, um die Seite zu scrollen, und stellen Sie sicher, dass es bei dieser Animation um faire Unparteilichkeit geht. Wenn der Benutzer den Mauszeiger über einen oder den Parser bewegt, ändert die Komponente die Überschrift, die andere erzwingt lediglich die Fokussierung auf dem Select-Filmposter, lediglich die Fokussierung auf um mehr Details anzuzeigen. Der erste Schritt besteht darin ein Rechteck zu zeichnen, um einen dunkleren Fötus auszuwählen. Wann, wann die Poster ausgewählt werden. Zoomen Sie hier hinein, um die Breite und Höhe des Rechtecks zu korrigieren . In Ordnung. Jetzt ändern wir die Farbe auf Schwarz und passen die Transparenz auf 50 an. Wir verschieben es vorerst zur Seite und löschen dieses Poster. Ich werde das als erstes Poster verwenden. Das Detail wird hier in der Mitte wie folgt angezeigt. Wir können beheben, dass es mit diesem Werkzeugparameter spielt. Für jeweils 1.230, 550 von denselben fünf Anbietern, saftig. Nachdem ich den Filter auf dem Poster hinzufügen kann, als wäre das eine andere Welt, richtig? Jetzt füge ich den Titel des Films mit dem gleichen Formular für den Discover-Link zum Kopieren und Einfügen hinzu. Sie sollten jedoch nicht die Option Brand to Front verwenden , um eine Standardeinstellung zu haben. Okay, gut. Ändere es, um dich berechtigt zu fühlen. Teilt jetzt die Textgröße 64 und auch die Fremdeingabe , um ihn in die Mitte des Rechtecks zu verschieben. Dann die Spitze hier. Jetzt fügen wir in der Mitte eine Schaltfläche hinzu, um dem Benutzer die Möglichkeit zu geben , den Feed anzusehen. Also kopiere ich die Schaltfläche vom Bildschirm und füge sie hier ein. Okay. Jetzt werde ich es genau in die Mitte bewegen. Das zu ändern war nicht cool. Beobachten. Und das Formular, vor dem gewarnt werden soll, um davon auszugehen dieser Grenzradius von hier aus nicht entfernt wird. Außerdem muss Toby vollständig sichtbar verdaut und in die Mitte der Satellitenschüssel gelegt werden. Da Sie unten auch einen Injektor hinzufügen können , erhalten Sie eine Anzahl von Besuchern. Als das Ansehen des Films begann, sagt der ausländische Hausmeister zu 22, die Schrift sei zu unregelmäßig. Und ändern Sie erneut die Textgröße auf 24, um besser lesbar zu sein, und ändern Sie den Text. Zum Beispiel sechstens, indem man zuschaut, das Mark beobachtet. Nun, wir jubeln nach rechts. Der Text ist sehr klein. Um das klarzustellen, ich nenne nochmal verrückt. Okay, sehr gut. Wir sind mit der letzten Änderung an Titel und Butter fertig . Also Leute hier, wir werden die Interaktion mit dem Bildschirm hinzufügen . Wechseln Sie in den Prototypenmodus, zeigen Sie dasselbe Poster und verknüpfen Sie es mit einem neuen Bildschirm wie diesem. Also hier im Interaktionsdetail werde ich das auf einen beliebigen Modus ändern. Behalten Sie dafür die gleiche Konfiguration bei. Nochmals für die Animation. Mit dem Link zwischen der Uhr fertig, mir dann aber eine riesige Seite verdient. Weil sonst der Nutzer vor dem Fußwaschen anfängt und die Registrierung für Variable abgeschlossen haben muss , schließen wir jetzt mit dieser Animation dein Mund ab. Sie sehen unseren Betreten Sie den Arbeitsbereich und klicken Sie hier, um zu versuchen, in unserer Anwendung zu navigieren. Wie Sie hier sehen, wechseln Sie, wenn Sie die meisten und den Forster der Komponenten überspringen die meisten und den Forster der Komponenten , auf die Animationsseite. Und die Schaltfläche funktioniert direkt leitet den Benutzer auf die riesige Seite weiter. Für die anderen Poster kannst du sie als Übungsaufgabe absolvieren. Unsere Website funktioniert einwandfrei. Geh zurück zu unserem Workspace , um sie zu sehen. Schon wieder. Sie können einen weiteren Bildschirm hinzufügen, um die Plattform zu verbessern und eine neue Option hinzuzufügen. Also vielen Dank, Leute fürs Zuschauen. Hier haben wir diesen Kurs beendet und ich wünsche mir, dass Sie mit mir neue Dinge lernen. Endlich ein Wiedersehen und wir sehen uns im nächsten Kurs.