Gestalten einer App mit fluiden Design mit Figma - Anfängerkurs

1. Willkommen zu meinem Anfängerkurs von UX Design Figma: Hallo, willkommen zu meinem Figma-Kurs auf Skillshare, wo wir uns die wunderbare Welt des UX-Designs ansehen werden . Jetzt, wenn Menschen den UX-Designbereich betreten, wollten sie wirklich anfangen, Anwendungen zu erstellen und Ihre Telefone zu absoluten und mit ihren Designkonzepten wirklich kreativ zu werden. Und oft eines der am meisten übersehenen Dinge, wenn es um UX-Design oder die Mikroanimationen oder die kleineren ästhetischen Veränderungen geht , die UX-Designer ihren Anwendungen hinzufügen, um wirklich etwas Flair zu verleihen. Und eines der Dinge , die wir in dieser Klasse im Allgemeinen tun können , ist, verschiedene Techniken zu durchlaufen , die Benutzer implementieren können , um das UX-Design-Erlebnis wirklich zu verbessern. Dies ist ein offener Kurs, was bedeutet, dass ich jede Woche ständig neue Videos hinzufügen werde , basierend auf Feedback und allen Fragen , die auftreten. Und bis jetzt habe ich drei Klassen in dieser Figma-Lektion zusammengestellt. Und sie werden sich drei Hauptkomponenten ansehen. Im Moment wie es aussieht, können wir Hamburger-Buttons erstellen, bei denen es sich im Wesentlichen um Menüoptionen handelt, die sich in kreisförmige Schließknöpfe verwandeln. Wenn Sie also darauf klicken, wird es in dieses Symbol umgewandelt. Wir schauen uns Schieberegler an. Wenn Sie also auf einen Aus-Schalter klicken, geht es zum Ein- und etc. Schließlich haben wir diese nette mobile Schnittstelle, die ich für die Zwecke dieser erstellt habe, die ich erstellt habe, die ich als bildlich bezeichnet Klasse erstellt habe, die ich erstellt habe, die ich als bildlich bezeichnet habe. Und wie man einen horizontalen Messenger-Stil Social-Networking-Anleihen herstellt. Ein Beispiel wie dieses wäre hier, wo Sie scrollen und sehen können , welche Freunde das vielleicht online haben. Das ist es, was wir im Star haben. Und während dieses Unterrichts, danach, beabsichtige ich, dass Sie nachbilden können , was Sie hier sehen, ist eine freundliche Aussicht. Und wenn ich mehr Klassen mache, werden natürlich noch mehr Dinge hinzugefügt. Stellen Sie also sicher, dass Sie bleiben, wenn Sie sich für diese Klasse anmelden , und achten Sie auf E-Mails. Das poste ich in den Diskussionen. Auch wenn dir gefällt, was du siehst und du daran interessiert bist , mir in diesem Kurs beizutreten. sich jetzt auf jeden Fall an und wir sehen uns auf der anderen Seite. 2. Erstellen der hamburger: Hi. In dieser kurzen Klasse werden wir die UX-Designsoftware verwenden , die als Figma bekannt ist. Dies ist ein sehr vielseitiges und umfassendes Tool , mit dem Sie Prototypen, Wireframing und verschiedene Benutzerdesign-Schnittstellen für Ihre Apps, Desktops, Mobilgeräte usw. erstellen , Wireframing und verschiedene Benutzerdesign-Schnittstellen für Ihre Apps, Desktops, Mobilgeräte usw. können es wird ein kurzer sein. Und wir werden gezielt auf Mikroanimationen zielen. Jetzt sind die vier Bilder, die Sie vor Ihnen sehen , im Wesentlichen zwei Flows wie Code und Figma. Und sie sind ein Button-Typ. Das Beste ist also, was Sie alle kennen werden, was ein typischer Hamburger-Menüstil ist. Und dann öffnet sich die Gewohnheit, wenn Sie darauf klicken, wir möchten, dass sie geändert und in den kreisförmigen Schließknopf verschoben wird. Und das Gleiche gilt hier unten, wo wir einen dieser klassischen Schiebereglerschaltflächen haben dieser klassischen Schiebereglerschaltflächen bei denen Sie auf „ Aus“ klicken, auf “ klicken und ausschalten. Also diese Schieberegler kehren Kachel um. Sie können oft in verschiedenen mobilen Anwendungen oder Dashboard-Schnittstellen für die modernen Software und Dienste verwendet werden. Um loslegen zu können, beginnen wir mit einer Demonstration, um Ihnen zu zeigen, wie diese aussehen. Gehe zu Seite eins, die im Wesentlichen auf den Plus-Button in der oberen rechten Ecke klickt. Sie werden die beiden Ströme hier sehen. Wenn ich also darauf klicke, wirst du sehen, wie es von einem Off zu einem On hin und her animiert wird. Und das Gleiche gilt auch für diesen, aus und an. Sobald Sie diese offensichtlich erstellt haben, können Sie sie in Ihre eigenen Dashboard-Schnittstellen oder mobilen Anwendungen in Figma einfügen Ihre eigenen Dashboard-Schnittstellen . Oder wenn Sie eine andere Software wie Adobe XD oder Sketch verwenden , handelt es sich auch dabei um ähnliche Prozesse. Aber ein Video später dazu. Lasst uns aufschlüsseln , was wir hier haben. Was wir also tun werden, ist mit den Hamburger-Menüsystemen anzufangen . Also lasst uns diese beiden Knöpfe loswerden und uns hier ausschließlich auf diese beiden konzentrieren. In der oberen linken Ecke sehen Sie verschiedene Icons. Wenn Sie über das Verschieben-Werkzeug-Framing verfügen, haben Sie das Bedienfeld „Assets“, in dem Sie offensichtlich die verschiedenen Arten von Formen auswählen können . Stifttext, Handbewegung, damit Sie auf der Leinwand schwenken und Kommentare hinzufügen können. In diesem speziellen beginnen wir damit, beginnen wir diese Schaltflächen und die Animationsflüsse neu zu erstellen. Fangen wir damit an. Sollen wir? Das Wichtigste zuerst beginnen wir mit einem schönen Rechteck und wir wollen ein schönes Quadrat. Indem Sie die Umschalttaste gedrückt halten, können Sie einen schönen Würfel bekommen. Und das werden wir hier automatisch machen. Du wirst sehen, aber Tango drei Pop-up hier oben links. Und das wird im Wesentlichen unser neuer Button sein. Jetzt werden wir also am CSS oder an der Ästhetik des Platzes arbeiten . Auf der rechten Seite wollen wir versuchen, diese als ganze Zahlen zu behalten. Also bringe ich das auf 130. Und das wird automatisch auf 130 gehen , weil wir uns dabei geändert haben. Wir werden eine Grenze geben. Zu diesem bestimmten Thema. Wir haben ein Board im Wert von 27. Machen wir das Gleiche hier. Also klicken wir auf dieses Quadrat, dieses Rechteck, klicken Sie hier und setzen es als 2772, tut mir leid, 27. Jetzt haben wir eine schöne Kurve, eine quadratische, abgerundete Kante, irgendwie würfelförmig. Jetzt ändern wir die Farbe, damit wir sie schön weiß machen wollen. Und um ihm diesen Standardeffekt zu verleihen, geben wir ihm einen Schlagschatten. Wenn ich also zu Effekte gehe, klicke darauf und standardmäßig wird dir immer ein Schlagschatten angezeigt, den du dann bearbeiten kannst , indem du auf dieses Sunburst-Symbol klickst , das die Effekteinstellungen hat. Ich klicke darauf. Wir möchten sicherstellen, dass dieser Button die Schattierung um alle Seiten gleich abgelegt hat . Also werden wir diese Y-Achse 0, die Sie hier sehen können, Gewinn machen . Was wir tun werden, ist, dass wir diesen Button in einen eigenen Frame umwandeln. Jetzt können Sie mit einem Frame Prototyp-Flow-Animationen in ein anderes Frame ausführen Prototyp-Flow-Animationen in ein anderes Frame , indem Sie entweder klicken, ziehen schweben, eine Maus eingeben die Maus um den Port bewegen. Das ermöglicht es Ihnen im Wesentlichen, die Animation zu erstellen , in der Sie darauf klicken und sie geht hier zu diesem Frame. Sie können also hier klicken und mit der rechten Maustaste auf die Frameauswahl klicken. Wir werden das Hamburger nennen. Dann werden wir ein paar Zeilen hinzufügen. Gehen wir also hier zum Shape-Werkzeug Linie wählen. Dann ziehen wir das hier rüber. Wir können im Wesentlichen sicherstellen, dass diese in die Mitte kommen. Kopieren Sie dann dreimal Einfügen. Und wir werden das hier hier rüberbringen . Jetzt haben wir drei Linien und um sie etwas mutiger zu machen, erhöhen wir die Gewichtsstufe auf etwa fünf und lassen sie dann in die Mitte fallen. Perfekt. Um das zu erreichen, werden wir das etwas kleiner machen. Halten Sie die Umschalttaste gedrückt, um es in der Und wir werden es auf halbem Weg legen. Was wir jetzt haben, ist ein Menü-Hamburger-Symbol. Nun, was wir jetzt tun werden, ist sicherzustellen, dass wir, wenn Sie es in der Animation tun, in der Prototyp-Einstellung, in der Prototyp-Einstellung, dieser Transformations-Morphing-Effekt bedeutet, dass wir kopieren und einfügen dieser gesamte Hamburgerrahmen. Kopieren Sie also Einfügen und ziehen Sie es dann zur Seite damit wir einen klaren Bereich zwischen ihnen haben. Jetzt werden wir dieses so bearbeiten, dass Figma automatisch erkennt, dass Sie dieselben Formen und Linien verwenden , und Sie möchten diese animieren und auf der Linie verschieben. Wenn ich hierher gehe und das umbenenne , um das Symbol zu schließen, habe diesen Frame nun schließen Symbol genannt. Jetzt der lustige Teil. Jetzt können wir uns mit diesem Rahmen herumspielen und ihn ändern. Wenn ich also den Hamburger sperre , werden wir diesen Knopf nicht versehentlich berühren und wir fangen an, hier zu diesen Knopf nicht versehentlich berühren arbeiten. Lassen Sie uns das also zu einem Kreis machen. Wir können dies tun, indem wir diesen Eckenradius einfach selten bis ins Unendliche ziehen , weil es immer ein schöner Kreis sein wird. Jetzt werden wir daran arbeiten, sicherzustellen, dass diese Kreuze werden. Eine der einfachsten Möglichkeiten, dies zu tun, besteht darin, alle drei auszuwählen und auf zentrales und Online-Center zu klicken. Aber offensichtlich wissen wir, dass dieser auf der linken Seite war. Wenn wir also Winkel hinzufügen, werden diese Linien nicht richtig ausgerichtet. Wir müssen sicherstellen, dass wir sie auch geschickt haben. Was wir jetzt tun, ist, dass wir nur eins nach dem anderen Winkel hinzufügen. Also lasst uns das 45 Grad machen, weitere 145 Grad machen. Und dann mach dieses Minus 45, das wir haben. Wir können diesen Icons tatsächlich etwas Farbe geben. Wenn wir also zum Hamburger-Tool gehen, halten, verschieben und klicken, können wir diese zu einer schönen grünen Farbe machen. Und wir können dieses Kreuz zu einer roten Farbe machen. Jetzt haben wir also Grün und Rot, und wir können nicht zum Animationsprozess kommen. Klicken wir auf diesen Hamburgerrahmen. Gehe zu Prototyp, klicke aufklicken. Wir möchten zum Schließen des Symbols navigieren. Klicken Sie auf Smart Animate, da es automatisch einen wirklich schönen Morphing-Effekt ergibt einen wirklich schönen Morphing-Effekt und dann Leichtigkeit ein- und auswählt. Dies ermöglicht es dem Symbol , diese federnde Animation zu haben , bevor sie in den Kreis verwandelt, den Sie in einem Moment sehen werden. Machen wir diese 650 Millisekunden. Auf diese Weise geben wir ihm genug Zeit, um eine schöne flüssige Animation zu haben eine schöne flüssige Animation und Sie verpassen sie nicht , wenn Sie darauf klicken. Und wir können den gleichen Vorgang für Icon wiederholen. Jetzt haben Sie die Möglichkeit, zu einem Prototyp zu gehen und hier auf Add plus zu klicken. Eine andere Möglichkeit, dies zu tun, besteht jedoch darin, den Pfeil auf den vorherigen Frame zu ziehen und automatisch auf den Hamburger zu klicken. Wähle mein Animate aus. Es ist in einer App zurück 650 MS. Dann hast du es. Wenn du also gehst und dir das anschaut, nette Flüssigkeit, es morpht, sieht gut aus und sieht modern aus und schläft für deine Apps und deine Dashboard-Schnittstellen. Das war der erste. Wir werden uns auf den zweiten konzentrieren , der einen Schieberegler hat. 3. Erstellen der Schieberegler und closing: Wenn ich das alles versteckt habe und wir uns diese hier ansehen, handelt es sich im Wesentlichen um eine Reihe von Rechtecken mit gekrümmten Kanten und Kreisen und kleinen Animationen. Wenn Sie sich jetzt den ersten ansehen, können Sie sehen, wie einfach dieser auch sein wird. Sie können komplexere Mikroanimationen erhalten, die wir in einem späteren Kurs machen werden. Aber dafür werden wir uns an grundlegende Smile-Animationen halten, nur um Ihnen den Einstieg zu erleichtern und ein gutes Gefühl zu haben. Jetzt werden wir das Schloss replizieren, damit wir diese nicht berühren und dies im Wesentlichen neu erstellen. Das erste, was wir tun werden, ist ein neues Quadrat einzulegen. Ich werde versuchen, diese zum selben In-Objektiv zu machen, aber es ist okay, wenn nicht. Und wir gehen zu Design und ähnlich wie beim vorherigen Button geben wir einen Radius an. Und in diesem Fall werden wir es zu 100% machen , weil wir einen schönen Zylinder wollen. Also schau mal. Lasst uns die Farbe ändern. Machen wir es weiß und ein Dropdown-Menü. Jetzt behalte ich das Dropdown-Menü unten, da Schaltflächen und Schieberegler, Schaltflächen normalerweise einen Dropdown-Schatteneffekt auf die untere Hälfte haben . Um es wirklich von der Dashboard-Oberfläche aus zu heben , auf der sie sich befinden. Jetzt werden wir einen Kreis hinzufügen, der der Button oder der Schalter sein wird. Wenn Sie die Umschalttaste gedrückt halten, außer dass Sie hier sehen können, macht es einen schönen ganzen Kreis. Und wir werden das hier drin platzieren. Zoom-Steuerelement. Perfekt. Was werden wir tun, ist das rot zu machen , denn das ist der Aus-Schalter. Das ist eigentlich sehr, sehr hell. Machen wir das ein bisschen weniger. Da sind wir los. Wenn du willst, kannst du das Pipettenwerkzeug benutzen, aber wir gehen davon , dass du noch nie eines davon gemacht hast. Wir werden auch ein Textfeld einlegen. Also lasst uns das absagen und uns hier in die Mitte bringen. Das ist unser Aus-Schalter. Um diesen Prozess schnell zu vereinfachen. Das ist Kopieren und Einfügen, Ziehen Sie heraus. Wir haben den Kreis in eine schöne grüne Farbe umgestellt. Das wird also offensichtlich den Ein-Schalter darstellen. Und wenn ich diese beiden schließe, können wir hier einfach mit diesen beiden Optionen arbeiten. Wir werden diese jetzt entsprechend animieren. Also zuerst müssen wir diese in Frames umwandeln, damit wir sie gut animieren können. Also wähle ich all diese Rechtsklick-Frame aus. Das ist aus dem Schieberegler. Gleiches gilt für diese Frameauswahl mit der rechten Maustaste. Ich rufe das auf dem Schieberegler an. Wie wir es zuvor getan haben. Sie werden hier klicken, haben einen Prototyp. Ziehen Sie diesen Pfeil auf diesen Rahmen. Und Sie werden sehen, weil wir in derselben Leinwand arbeiten, wird die vorherige Animation gespeichert. Und wir werden das Gleiche hier machen, diesen Pfeil holen und ihn zurücklegen. Offensichtlich möchten wir vielleicht keine kleinen Animationen haben. Wir möchten vielleicht, dass lineare Animationen sehr einfache Animationen sind. Wir möchten vielleicht nicht die Leichtigkeit haben und die Leichtigkeit haben. Für einen Knopf macht es also nicht viel Sinn, einen federnden Knopf zu haben , bevor er nach links wischt oder nach rechts wischt. Lassen Sie uns also einfach etwas erleichtern und lassen Sie diesen auch den gleichen Effekt haben. Wenn Sie nun einen Übungslauf machen, ist dies Flow for flow for. Klicke drauf. Du wirst sehen, wie es funktioniert hat. Aber der Knopf hat sich nicht bewegt. Alles, was wir tun müssen, ist zur Verschiebung des Entwurfsbereichs zurückzukehren und diesen Text nach links zu verschieben und ihn nach rechts zu bewegen. Auf diese Weise hat der Button jetzt einen Morphing-Effekt. Dies ist eine Leichtigkeit, die sehr gut funktioniert, wenn Sie offensichtlich nach einem Schalter und einem Symbol suchen . Aber Sie werden es wahrscheinlich bemerken, weil es nur eine Leichtigkeit hat, dass es diesen Wischeffekt nicht genauso hat wie dieser. Wenn ich das also einfach sperre, Nummer zwei, wirst du sehen, wie sich das bewegt. Das liegt nur daran, dass wir eine andere Art von Animation gewählt haben . In diesem sehen Sie hier, wie wir uns für eine kleine Animation entschieden haben . Deshalb haben wir diesen Button-Effekt. Während der Zufluss dafür einfach eine Folie war. Es war, ich hatte diesen Effekt nicht, also können wir das hinzufügen. Wenn wir also hierher kommen, um vier zu fließen, kommen Sie her, wählen Sie diese aus, entspannen Sie sich. Und dann sage ich dafür: Geh her, der Flow, Flow Four. Du wirst sehen, wie es ganz gut funktioniert. Dann. Auch dies sind nur zwei Optionen, mit denen Sie Schaltflächen und die verschiedenen Animationsstile erstellen können. Ja, ich hoffe, ich hoffe, Sie fanden diese Lektion interessant. In zukünftigen Lektionen werden wir tatsächlich daran arbeiten , eine tatsächliche Benutzeroberfläche zu erstellen , die wir wirklich aufregend sind. Und ich hoffe, dich dort zu sehen. Und wenn Sie Fragen haben, lassen Sie diese auf jeden Fall im Feedback-Bereich dieser Klasse. Und ich freue mich darauf, Ihre Projekte als eine der Ergebnisse zu sehen , die ich in dieser Klasse gerne sehen würde, ist, dass in dieser Klasse gerne sehen würde Sie eine eigene Schnittstelle haben, oder zumindest auf einer grundlegenden Ebene, wenn Sie nur eine Canvas mit all diesen Schaltflächen und gibt mir die Figma-Datei und ich kann sie öffnen oder du kannst ein Video posten und wir können es durchgehen und ich gebe ein Feedback. Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich unten belassen. Vielen Dank und kümmere dich darauf. 4. Erstellen einer horizontalen Scrolling Portrait: Hi. In dieser Klasse werden wir versuchen, eine interaktive horizontale Bildlaufleiste für eine App, einen Dienst oder ein Dashboard zu erstellen eine interaktive horizontale Bildlaufleiste für eine . Und das wird Ikonen der Porträtwähler der Menschen haben . Und wie Sie hier in der flüssigen Animation sehen können, können Sie sehen, wie schön über verschiedene Personen in diesem Teil der Spitze dort scrollt . Eines der wirklich nützlichen Dinge dabei ist, dass Sie Ihre Immobilien Ihrer App wirklich ausreichend verwalten können. Zunächst werden wir einen Rahmen erstellen und das iPhone 13 Pro Max wählen das iPhone 13 Pro Max da dies heutzutage ein ziemlich übliches Telefon ist. Und wir werden dazu einige abgerundete Kanten hinzufügen. Das nächste, was wir tun werden, ist, dass wir eine Art Zeilen an die Spitze setzen werden. Dies wird also den Hamburger-Menü-Button replizieren den Hamburger-Menü-Button , den wir in den vorherigen Videos erstellt haben. Also kannst du das gerne importieren und wenn du willst. Aber für diese Übung werden wir nur eine Menüoption für statische Duplikate erstellen , die offensichtlich keine Flow-Animationen mit sich hat. Nehmen wir an, wir werden die Schlaglautstärke dort etwas erhöhen , damit es von weiter entfernt gut und sichtbar aussieht. Als Nächstes werden wir eine Suchleiste erstellen. Suchleisten, die offensichtlich in mobilen Apps sehr verbreitet sind, werden dort einige abgerundete Ecken hinzufügen. So macht es sich wie eine lange Zylinderwurstform. Wir werden die Farben ändern , damit sie eher einer Suchleiste ähneln. In diesem Fall sticht es also einige schöne Schlagschatten, die sehr verbreitet sind, über der Seite hervor. Als Nächstes fügen wir einige Trennlinien hinzu. Diese sind offensichtlich sehr gut, um verschiedene Paletten eines Armaturenbretts zu trennen. Und der Grund, warum wir all diese Dinge machen, ist machen dass wir ihm zumindest einen Kontext geben wollen, um dieses horizontale Scroll-Erlebnis schön zu machen. Jetzt fangen wir an die eigentliche horizontale Schriftrolle zu machen. Also werden wir eine Reihe von Kreisen machen alle gleich Mieten und Entfernungen voneinander sind. Und wir werden ein paar davon erstellen, die von der Seite gehen, dass wir diesen Bildlaufeffekt tatsächlich haben können. Jetzt ist eines der Dinge, die ich gerne mache, sie ganz zu gruppieren nur damit wir wissen, wo sie sind und wo sie von der Seite sitzen werden . Aber noch wichtiger ist, dass wir sie in einen Frames einfügen werden , mit dem wir nur diesem bestimmten Frame eine Prototyp-Scroll-Animation hinzufügen können . Im Moment können Sie sehen, dass wir abgeschnitten haben und wir gehen rein, um den Rahmen zu holen. Ich ziehe es in den Bereich des Telefons, damit alle anderen Kreise, die sich in diesem Rahmen darüber hinaus befinden, abgeschnitten werden. Und wenn wir uns horizontal bewegen, werden sie es zeigen. Das erste, was wir tun werden, wird in den Plugins-Bereich gehen. Wenn Sie das nicht haben, gehen Sie auf den Markt verwaltete Plugins und finden Sie alle Plugins, die ich verwende Unsplash, da es einfach sehr guter Ort ist, um kostenlose Fotos zu erhalten, die bereits kostenlos sind. Wir können hier zwei Bilder auswählen. Ich werde nur einige zufällige Porträtbilder auswählen , die hilfreich und schön für diesen speziellen horizontalen Bildlauf in Status oder Online-Profilschnittstelle, die wir erstellen, hilfreich und schön sind. Eines der Dinge, um dies zu realisieren, ist, dass wir hier eine horizontale Version erstellen. Wenn Sie jedoch eine Option zum vertikalen Scrollen erstellen würden, ist der Prozess sehr derselbe, wo Sie einen Frame haben. Innerhalb eines Rahmens können Sie alle Assets, die Formen, die Bilder, die Linien und den Text angeben, wo immer Sie in diesen Rahmen aufnehmen möchten. Und dann können Sie wählen, ob Sie es entweder horizontal scrollen oder vertikal scrollen möchten. Was offensichtlich das Hauptziel der heutigen Klasse ist. Wenn Sie die Hamburger-Tools noch nicht hergestellt haben oder die Knöpfe noch nicht erstellt haben. Sieh dir die anderen beiden Videos in diesem Kurs an, um mehr darüber zu erfahren , als wirklich hilfreich. Was wir jetzt tun werden, ist, dass wir die Bilder am kleinsten machen , damit wir tatsächlich arbeiten und die Bilder maskieren können . Sie legen also ein Bild auf die Form, wählen sie beide zusammen aus und verwenden sie als Maske. Dann können Sie das Bild ziehen und in die Mitte legen. Und was wir dann tun werden, ist, dass wir diesen Vorgang für die restlichen Bilder wiederholen werden . Wie offensichtlich gibt es eine wirklich nette Facebook-Stimmung wie Messenger. Instagram-Geschichten, wo auch immer Sie diesen Herbst machen. Es geht darum sicherzustellen, dass die Bilder gut in den Kreis passen , die Formen. Wenn wir das durchgehen, werden Sie sehen, wie es langsam einer dieser werden Sie sehen, wie es langsam sozialeren Apps ähnelt, was ehrlich gesagt ist, heutzutage sehr verbreitet ist, um diese Art des Scrollens zu haben kreisförmige horizontale Balken, die entweder Geschichten, Feeds, Online, Benutzer und solche Dinge darstellen . Auf der linken Seite sehen Sie hier wie wir verschiedene Maskengruppen haben. Maskengruppen sind offensichtlich, dass Sie diese in jeder Art von Form herstellen können. Wir haben uns hier für eine kreisförmige Form entschieden. Aber du wirst sehen, wie sich die Masken derzeit hinter diesem Rahmen verstecken. Nehmen wir sie aus dem Rahmen. Und. Mass und ungerahmt sie. Tut mir leid, was hast du gerade abgeflacht? Wenn du die Gruppierung aufhebst, werden sie rauskommen. Und was wir tun werden, ist, dass wir eine Maske bekommen, diese beiden Kreise, die außerhalb des Bildschirms sie dann wieder in den ursprünglichen Rahmen stecken. Benutzt also Maske, ziehe das rüber. Lass es uns gut passen. Und jetzt ziehen wir diese beiden Kreise, diese beiden Masken und stecken sie wieder ins iPhone 13. Und nur um sicherzustellen, dass alle diese Massenobjekte gerahmt sind, klicken Sie mit der rechten Maustaste auf die Frameauswahl und stellen Sie dann sicher, dass ich abgeschnitten habe, um nur einen schönen Hintergrundnamen ihren Inhalt zu geben . Verkürzen Sie den Rahmen auf das Ausmaß des sichtbaren Fensters und richten Sie ihn dann unten aus, um dies als Trennwand anzuzeigen. Und dann Wallah, du hast eine Region auf dem Bildschirm, die eine horizontale Trennung der Leiste darstellt. Jetzt gibt es im Moment offensichtlich keine Animation und fließt dann darin. Um also offensichtlich alles andere echt aussehen zu lassen, fügen Sie schnell eine Box unten hinzu. Stellen Sie sich vor, dies ist wie ein Instagram-Post oder etwas, bei dem wir nur ein Bild haben wollen . Jetzt gehen wir zurück zu diesem Rahmen. Wir gehen zum Prototyp. Und wir können eine Scrollmethode wählen, und wir wählen das horizontale Scrollen. Dadurch kann sich der Rahmen nach links und rechts vom Bildschirm entfernen, solange er abgeschnitten ist und der Rahmen im Fenster befindet, funktioniert dies einwandfrei. Also zeigen wir dir das in einer Sekunde wenn wir auf den Play-Button klicken und mich hierher kommen lassen und du wirst sehen, wie du dir einen Moment gibst. Da sind wir los. Wir haben eine Bar, die eine schöne Scroll-Animation hat. Jetzt ist dies offensichtlich die grundlegendste der Bildlaufleisten. Sie können verschiedene Animationseffekte haben, die Sie machen können. Sie können dazu so viele Flows hinzufügen, wie Sie wollten. Aber kurz gesagt, so macht man wirklich eine vertikale oder horizontale, in diesem Fall Bildlaufleiste. Diese sind offensichtlich in allen möglichen Teilen sehr nützlich. Wenn wir nun versuchen würden, dies zu einer Chat-Funktion oder Statusfunktion zu machen , könnten Sie kleine Kreise machen und sie oben setzen. Das ist also so etwas wie das , was Messenger macht. Tragen Sie. Grün bedeutet offensichtlich, dass sie aktiv sind. Und das Orange oder ein Rot bedeutet, dass beschäftigt oder andersherum oder grau normalerweise bedeutet, wenn sie offline sind. Sie können hier sehen, indem Sie sie mit den Kreisen gruppieren, Sie können ein wenig rasterfarbene Symbole erstellen, um die Tatsache widerzuspiegeln, dass diese diese entweder online oder in diesem Fall gerade verwenden. wird ein Weg sein, indem Sie einfach die Farbe in etwas ändern , das dem Ampelsystem ähnelt. Du siehst hier, wie sie funktionieren. Jetzt ist ein weiteres Objekt, das Sie tun können , einige Tooltip-Funktionen hinzuzufügen. Tooltips sind also im Grunde genommen Hover-Effekte, bei denen, wenn Sie den Mauszeiger über etwas bewegen, wenn Sie auf etwas klicken einen Pop-up-Tooltipp haben wird. In diesem speziellen Fall können wir so etwas wie online stellen. Wenn also jemand über den Benutzer schwebt oder darauf klickt, wird er im Grunde genommen sklave. Es wird im Grunde genommen sagen, ob sie online sind oder nicht. Was wiederum sehr nützlich ist, wenn Sie versuchen, eine soziale App zu erstellen , die über Interaktivität und Social Chat und Messaging verfügt . hast du vielleicht nicht. Dieser Teil der Klasse ist vielleicht völlig relevant, aber es ist immer gut zu wissen, wie man diese Dinge macht und wie man Prototyp-Animationen integriert und sie mit bewegten Animationen verbindet Verschieben von Bildlaufleisten, wie Sie in der App auf dem Bildschirm sehen können. Hier machen Sie einfach den Text und die Form auf der linken Seite, die richtige Größe, geben Sie ihm einen schönen Schlagschatten und zentrieren und alles ausrichten. Und das könnte ein bisschen klein sein. Potenziell. Wir haben es vielleicht größer gemacht, aber wir können, wir können überprüfen und sehen, wie es aussieht. Im Betrachtungsbereich des Prototyps. Wir werden das so gestalten, dass wir diese tatsächlich herstellen können. Lassen Sie uns in diesem speziellen Fall Komponenten erstellen, da wir diese Komponente möglicherweise später auf alle anderen Bilder duplizieren möchten diese Komponente möglicherweise später auf alle . Und was wir tun werden, ist eine Einführung in den grünen Balken zu machen , wo der grüne Kreis während wir schweben oder während wir in diesem speziellen Fall tippen, das Overlay öffnen und wir werden diesen Online-Tooltipp wählen. Und dann machen wir es manuell, damit wir auswählen können , wo dieser Tooltip kommt, wenn Sie den Mauszeiger darüber bewegen oder darauf klicken und auflösen, was zu einer schönen , langsamen Fade-In-Fade-Out-Animation führt. Sie können darauf klicken und Sie werden sehen, wie es sich jetzt öffnet, wie wir sagten, zu klein. Lassen Sie uns das ein bisschen größer machen, damit der Benutzer tatsächlich sehen kann, was los ist. Das ist nett, groß da drin. Und dann gehen wir zur Design-Registerkarte und ändern dies auf, sagen wir 11, denn das funktioniert, Ja, das sieht ziemlich gut aus. Möglicherweise müssen Sie das in der Mitte ausrichten. Weil das Online oben etwas zu hoch aussieht. Auf den Grund. Auch hier kann es manchmal etwas fummelig sein, aber das wird jetzt viel größer sein. So kannst du es hier sehen. Aber derzeit haben wir immer das, was wir tun müssen, ist den Benutzer zu aktivieren, sobald von dieser grünen Schaltfläche entfernt ist. Das schließt, wenn Sie auf die Außenseite geklickt werden. Das bedeutet, dass wenn jemand nach außen klickt , er verschwindet. Da hast du es. Sie haben eine schöne Bildlaufleiste Online-Offline-Animationen. Sie können Effekte und solche Dinge nicht verzögern. Aber in diesem speziellen Fall wollten wir nur eine Bildlaufleiste erstellen. Und wir haben dort ein paar zusätzliche kleine Teile hinzugefügt , damit es eher wie eine Social-Experience-App aussieht . Offensichtlich im Nachhinein, was wir tun werden ist, auf Glasmorphismus umzugehen, der Begriff. Im Grunde merkt man wahrscheinlich links als App mit all diesen Bildern , die ich jetzt entfernt habe. Aber im Hintergrund sieht man diesen schönen unscharfen purpurly blauen Effekt , bei dem alle Assets und Ebenen darüber liegen. Und es sieht ziemlich cool aus. Achten Sie also auf jeden Fall auf das nächste Video in dieser Klasse, in dem wir über Glasmorphismus sprechen und wie wir das sehr einfach machen können. Und kümmere dich einfach auf. 5. Glassmorphic Hintergründe für Anwendungen erstellen: Hallo, willkommen zur nächsten Klasse in diesem Figma Skillshare-Kurs. Jetzt haben wir uns zuvor mit Erstellen horizontaler Bildlaufleisten befasst, und heute werden wir uns mit Glasmorphismus befassen. Schließlich ist Morphismus dieser Effekt , den heutzutage viele Apps und Software verwendet werden , um einer Software oder Anwendung eine Tiefe zu verleihen . In diesem speziellen Fall können wir hier sehen, dass wir unsere Instagram-App namens pictorial haben . Und wir haben diesen schönen blauen und violetten Hintergrund , der einen schönen Unschärfe oder glasmorphischen Effekt hat. Und es hilft wirklich , die Bilder und das Profil in dieser Anwendung hervorzuheben. Was wir tun werden, ist, uns heute darauf zu konzentrieren. Und es ist eine wirklich einfache Technik und hilft wirklich Ihre App kreativer zu machen und zu gestalten. Wenn ich das hier einfach ausschalte, wirst du sehen, dass wir diesen Rahmen dieses iPhone 13 Max Pro haben . Und Sie können sehen, wie das Hinzufügen dieses morphischen Glaseffekts dem Bild diese zusätzliche Tiefe verleihen kann. Was wir tun werden, ist zu öffnen , was unser vorheriges Telefon, das wir gemacht haben, das alle Hamburger-Tasten und die Scrollbar-Tasten hatte . Und wir werden einen morphischen Glaseffekt auf dieses Telefon anwenden . Lass uns einfach direkt eintauchen und ich zeige dir, dass dies kein sehr komplexes Tutorial ist. In der Tat ist es sehr einfach zu machen. Und ich zeige dir genau, wie es jetzt geht. Eines der ersten Dinge, die wir tun möchten, ist ein Bild einzubringen , von dem wir glauben, dass es für den Hintergrund dieses Telefons wirklich cool aussehen wird . Wenn wir also hierher gehen und zu Plug-Ins gehen, verwende ich Unsplash. Es gibt viele andere Plugins, die Sie verwenden können, daher kann ich später immer ein Video darüber machen wie das geht und wie man dort Plugins hinzufügt. Aber wir werden Unsplash verwenden, das kostenlose Bilder enthält, die Sie verwenden können , und Sie können sie auch kommerziell wiederverwenden. In Anbetracht dessen, dass wir eine App erstellen, die sich auf den Benutzer konzentriert und eine soziale Erfahrung darstellt. Wir möchten sicherstellen, dass das Bild hinten nicht zu sehr ablenkt . Normalerweise sind Dinge wie abstrakte Architektur, Raum, Tapeten, unsere Texturen wirklich gut. Schauen wir uns also mal an, welche Hintergrundbilder wir haben. sind also großartig. Sie können jedoch sehen, wie die meisten von ihnen eher auf ein Desktop-Erlebnis ausgerichtet sind . Deswegen bin ich mir persönlich nicht sicher. Also lasst uns zu Texturen gehen. Los geht's, Diese sehen etwas besser aus, aber wir wollen etwas finden, das viel Lebendigkeit hat. Wenn wir weiter nach unten scrollen, finden wir vielleicht etwas wirklich Nützliches. Ich werde dieses Bild auch in den Projektordner der Klasse legen den Projektordner der Klasse , falls Sie diese wiederverwenden möchten. Aber wenn nicht willkommen, ein Bild Ihrer Wahl zu verwenden . Und offensichtlich hilft Ihnen das, die Dinge ein bisschen personalisierter zu gestalten . Warum probieren wir das aus? In diesem ist offensichtlich viel los. Also klicken wir darauf und bringen es rein. Eines der ersten Dinge, die wir tun werden, ist es zu verkleinern. Halten Sie also die Umschalttaste gedrückt und skalieren Sie es entsprechend, damit wir den Durchmesser und die Abmessungen des mobilen Bildschirms anpassen. Das nächste, was wir tun werden, ist, dass wir ein Dreieck schaffen werden. Triangle, tut mir leid mein schlechtes, ein Rechteck. Wir werden das im Immobilienbereich iPhone 13 Pro Max maskieren . Machen wir also ein Rechteck und lassen Sie es einfach in Einklang bringen und strecken es aus. Wenn wir also zum Prototyp zurückkehren, werden wir sehen, dass wir einen Grenzradius von 34 haben. Wenn ich also auf dieses Rechteck klicke und diese 34 mache, wirst du sehen, wie es jetzt gut und gut in diesen Bereich Pivot passt. Was wir jetzt tun können, ist es aus dem Rahmen zu ziehen und wir werden es maskieren. Wir werden es damit maskieren. Aber bevor wir das tun, werden wir es kopieren und duplizieren wollen. Ich setze das auf die andere Seite und mache das weiß. Da dies ein Overlay über das maskierte Bild sein wird. Kommen wir hierher zurück und wählen dieses abstrakte Bild und das Bild dahinter mit der Umschalttaste aus und halten Sie mit der rechten Maustaste gedrückt, verwenden Sie es als Maske. Wenn Sie erneut klicken, können Sie das Bild an eine beliebige Stelle in diesem maskierten Bild verschieben . Das sieht ziemlich cool aus. Was wir tun werden, ist, dass wir dieses Bild bekommen und es auf dieses maskierte Bild ziehen. Also haben wir hier Rechteck 18. Nennen wir dieses Glas morphisches Panel. Und wir ziehen das oben auf dieses maskierte Bild und ziehen es rüber. Jetzt werden wir zu Effekten übergehen und Schlagschatten ändern, um den Hintergrund zu verwischen. Jetzt haben wir das getan, doch hier ist noch nichts passiert. Hier gehen wir hier zu diesem Bild. Und wir ändern die Füllung auf rund 25%. Jetzt können Sie hier sehen , dass wir ein Overlay haben. Das ist so schön und durchscheinend, passt aber gut über das Bild. Aber du fragst dich wahrscheinlich, das ist irgendwie verschwommen, aber nicht verschwommen genug. Wenn wir auf das morphische Glasfenster klicken, gehen Sie hier zu diesem Symbol und ändern Sie dies und erhöhen Sie die Unschärfe. Sagen wir, wir nennen es 50. Jetzt können Sie sehen, wie es verschwommen ist, im Grunde das Bild dahinter. Und es ergibt einen sehr schönen opaken oder durchscheinenden Glaseffekt, weshalb wir es Glasmorphismus nennen. Das sieht cool aus, großartig, fantastisch. Aber was wäre, wenn wir eine Komplexität hinzufügen wollten ? Was wäre, wenn wir dazu weitere Bilder hinzufügen wollten? Das erste, was wir tun werden, ist, dass wir das gruppieren oder gestalten werden. Wir können das zusammen machen. Und wir werden das Glas morphischen Schmerz nennen. Eins. Wir ziehen das in das iPhone nach hinten, ziehen und legen es dann direkt nach hinten. Auf diese Weise haben wir einen schönen Hintergrundeffekt. Grundbegriffe. Das ist es, Dies ist das Glas, der morphische Glaseffekt. Wenn ich zum vorherigen iPhone gehe, wirst du sehen, wie ähnlich es das gleiche Aussehen und Gefühl hat . Natürlich hat dieses Bild hier oben ein weißes weißes Panel, was offensichtlich einen schönen , deutlichen Bruch zwischen dem Menübereich oben ergibt schönen , deutlichen Bruch . Aber in Wirklichkeit ist das im Wesentlichen das Gleiche. Und sobald Sie lernen, wie man diesen morphischen Glaseffekt macht, können Sie mehr und mehr Ebenen hinzufügen. Offensichtlich, wenn Sie eine Ebene haben möchten , die diese Ebene oben trennt. Als Beispiel können wir hierher gehen und zu Unsplash gehen und einen anderen finden. Lass uns ein anderes schnelles Bild finden. Was damit gut passen könnte. Bringen wir dieses Bild ein. Eines der coolen Dinge, die Sie tun können, ist tatsächlich das Bild zu bearbeiten, in das dies gemischt wird. Wenn wir hierher gehen und ein Quadrat so machen wie zuvor. Wir bearbeiten den Bereich tatsächlich hier. Also lasst uns das hier runterlegen und das hier aufstellen und es biegen. Was wir also tun können, ist dies auf diese falsche Weise zu maskieren, es zu runden und es nach vorne zu bringen . Also Rechtsklick, ich klicke mit der rechten Maustaste und in der Mitte vorne und das Maskottchen Gleich wie der gleiche Prozess wie zuvor. Und jetzt können Sie hier sehen, was wir getan haben, ist, dass wir angesichts dieser zusätzlichen Dimension eine zusätzliche Ebene hinzugefügt haben . Und was wir tun werden, ist ein weiteres quadratisches Rechteck zu bekommen, wie zuvor. Zeichne über dieses iPhone. Stellen Sie sicher, dass es die richtige Breite und die richtige Skala hat. Das ist 34. Stellen Sie sicher, dass dieses Rechteck ebenfalls 34 ist. Dann werden wir das hier oben auf dieses Bild setzen. Erstaunlich. Und wir werden eine Hintergrundunschärfe hinzufügen , 50 machen und dann 25 machen und dann weiß machen. Offensichtlich kann man hier sehen, wie es nicht gerade über die Ränder geht , weil wir es natürlich nicht getan haben. Ich schaffe diese 34 auch. Das bedeutet im Grunde, dass das Maskenrechteck auch eine Kante hat. Und ich gehe das so durch. Was wir jetzt tun können, ist dies zu gruppieren. Ich weiß, dass ich das ziemlich schnell durchgemacht habe, aber es geht nur um das, was ich bereits getan habe. Und das werden wir der Form hinzufügen. Vielleicht möchten wir es tun, wir möchten dies vielleicht etwas weiter nach unten ziehen. Entschuldigung. Weil wir dies immer nach unten ziehen können, aber dazu können wir diese Form hier hineinziehen und diese dann nach unten ziehen. Jetzt haben wir zwei morphische Glaseffekte. Was wir dann tun können, ist Arbeit und Klasse morphisch zwei. Und jetzt haben wir diese beiden Farben. Wir können tatsächlich anders an ihnen arbeiten. Wir haben also dieses Panel hier, das wir ändern können, damit wir dieses Panel entweder transluzenter oder weniger durchscheinend machen können . Es kann also 15% sein und dann diese Unschärfe machen. Fünfundzwanzig auf diese Weise mehr Wert auf die Titelseite im Vergleich zur vorherigen Seite gelegt. Aber auch hier sieht es notwendigerweise nicht am besten aus. Aber der springende Punkt dieser Klasse ist es, Ihnen zu zeigen, was Sie können und was nicht, und Sie können mit Glasmorphismus wirklich kreativ werden. Was ich von Ihnen möchte, ist, dass ich diese beiden Bilder in den Projektdateibereich einfüge . Und ich möchte Sie dringend bitten, Ihre eigenen Bilder zu finden, aber probieren Sie diesen Effekt auf jeden Fall aus und sehen Sie, wie er in Ihren Apps und Ihren Dashboards aussieht und Sie in Figma machen. Ich hoffe, dir hat dieser Kurs gefallen. Ganz einfach, sehr einfach. Nur zehn Minuten lang, aber hoffentlich haben Sie einige nützliche Techniken gefunden. Und ich freue mich darauf, Sie zum nächsten Kurs zu sehen , der nächste Woche veröffentlicht wird. Einfach Danke.