Figma UI/UX - Gestalten einer Messenger UI/UX (komplettes Projekt)

1. Einführung: Willkommen zu diesem Kurs. Mein Name ist gestern, Chelsea und Albert Instruktor in diesem Kurs. In diesem Kurs werden Sie eine komplette Messenger-Web-App, UI UX, mit Figma entwerfen . Während Sie diesem Messenger eine Web-App entwerfen, werden Sie eine UX-Benutzeroberfläche und verschiedene Arten von Funktionen und Best Practices von Figma landen . Ich zeige Ihnen, wie Sie verschiedene Arten von Tools von Figma für verschiedene Designmerkmale verwenden können. Sie lernen, wie man eine Gruppe macht, ein Komponenten-Feedback-Grid-System erstellt, wie man Figma verwendet, Plug-In, Figma-Prototyping mit jedem Mesh, zeigt, wie man Prototypen macht, Live-Funktionen anbietet und verschiedene Arten von Tieren gezeigt. Am Ende lernst du, wie du dein Design teilst und wie du dein Design exportierst. Nach Abschluss dieses Kurses haben Sie ein vollständiges reales Projekt , das Sie Ihrem Portfolio hinzufügen können. Daher möchte ich Sie sehr ermutigen, Spaß an diesem Kurs zu haben. 2. Erstellen von Projekt- und Layout-Design: Willkommen zu dieser Vorlesung. In diesem Teil werden wir anfangen, an unseren Projekten zu arbeiten. Sobald Sie sich bei Ihrem Figma-Konto anmelden, können Sie diese Art von Benutzeroberfläche sehen und von hier aus müssen Sie auf eine neue Designdatei klicken. Also klicke ich darauf. Und dann öffnet es eine neue Projektdatei für uns. Und von hier aus müssen wir unseren Rahmen erstellen. Also werden wir an der Web-App arbeiten. Also wähle ich einen Frame aus. Und von hier aus können Sie Deck Stop und Deck Stop sitzen , hier gibt es einige Optionen. Okay, von dort aus werde ich diesen DIG-Laden wählen, 14401024. Sobald ich dieses ausgewählt habe, haben wir dieses Layout. In erster Linie werde ich jetzt den Namen dieses hier ändern. Ich sage zu Hause. Jetzt müssen wir unseren Header hier entwerfen. Und in der Kopfzeile haben wir unser Profilbild und dann den Namen. Und dann werden wir hier zwei Abschnitte haben. Einer wird hier sein und ein anderer wird hier sein. Okay, vorher wähle ich das Raster hier aus und klicke auf das Rasterlayout-Raster. Und statt dieses Rasters wähle ich eine Spalte aus. Und dann wähle ich 20 Spalten aus. In Ordnung? Es wird uns sehr beim Entwerfen helfen. Okay? Jetzt, von hier aus, werde ich hier unseren Header-Bereich gestalten. Also klicke ich auf dieses Rechteck und zeichne hier. Im Moment werde ich einfach , in Ordnung sein. Jetzt haben wir also unseren Header hier. Und jetzt können wir von hier aus, indem wir auf dieses Feld klicken, eine andere Farbe hinzufügen. Für diesen hier. Wir können eine andere Farbe hinzufügen. Aber jetzt lass mich das verstecken, damit wir unsere T-Zelle sehen können. Das ist also unsere Farbe , die wir jetzt haben, ich denke, diese Farbe ist gut. Mir hat es gefallen. Und jetzt danach werde ich diese Kolumne wieder zeigen. Und hier habe ich noch einen Abschnitt, in dem unsere Benutzerinformationen angezeigt werden, Benutzerliste. Okay, dafür wähle ich hier unser Rechteck aus. Und danach, bis zu dieser Spalte, dieser Spalte, werde ich dieses Rechteck vielleicht von hier aus setzen . Ich werde diese Kolumne stellen. Ich übernehme diese Kolumne von hier aus. Und danach definiere ich unsere, ich definiere hier unseren Strich. Verstecken wir nun dieses angebliche Rastersystem. Schau, wie es aussieht. Es sieht also so aus. Ich möchte auch eine weiße Farbe haben. Von hier aus werde ich hier also wenig Platz nehmen. In Ordnung, also ich denke buchstäblich den Weltraum von hier aus. Jetzt. Was können wir tun? Ich möchte hier weiße Farbe haben und hier auch einen kleinen Grenzradius haben. Also setze ich hier den Rahmenradius ein, tendiere zu Pixeln, und dann ändere ich die Hintergrundfarbe. Ich wähle die weiße Farbe, Hintergrundfarbe, die wir hier haben. Also sieht es jetzt so aus. Aber es wäre schön, wenn wir es auf diese Weise zeigen und dann von hier aus, von der linken Seite und von der rechten Seite, wenig Platz in Anspruch nehmen würden. Das wird also unser Hauptwagen und Hauptbereich sein , in dem wir unsere Benutzerliste ablegen werden. In Ordnung, und jetzt sind hier gleich hier drüben. Ich möchte einen weiteren Bereich haben, in dem die Nachrichten angezeigt werden. Lassen Sie mich also das Grid-System aktivieren. Das ist also unser Grid-System. Und lass uns das hier hinstellen. Nicht von hier. Ich habe über diesen gesprochen. Wir werden es in dieses Raster stellen und wir werden unsere Massen von hier aus starten. Ich wähle hier ein anderes Rechteck aus. Und von hier aus starte ich von hier aus den Messaging-Bereich unserer Anwendung und stelle sicher , dass wir die gleiche Größe und das gleiche Gewicht haben. Und los geht's. Dies ist unser Ausgangspunkt und dies ist unser Ausgangspunkt. Ebenfalls. Sie können das kleine Kreuzsymbol auf der linken Seite sehen. Das bedeutet, dass es von derselben Größe aus gestartet wird, von derselben Stelle aus. Wenn wir also unser Netz verstecken, sollten wir in der Lage sein, solche Dinge auch hier zu sehen. Hier können wir auch solche Dinge sehen. Lesen Sie jetzt, dass wir für diesen einen Grenzradius von zehn Pixeln eingegeben haben. Also werde ich auch für diesen einen Randradius zehn setzen und dann den Strich hinzufügen. Wenn ich auf diesen Vortrag klicke, wird es uns die Grenze geben. Und wenn ich darauf klicke, füge ich die weiße Farbe hinzu, sodass wir für diese beiden Elemente dieselbe Farbe haben . Okay, jetzt haben wir diesen kleinen Platz. Und von hier aus brauchen wir diesen Modellraum nicht mehr, also werde ich diesen Raum von hier aus vergrößern, ein bisschen Platz von hier drüben. In Ordnung, das sind also die beiden Hauptbereiche, in denen wir unseren Hauptinhalt haben werden. Hier werden wir also unsere Benutzerinformationen wie unser Profilbild für den angemeldeten Benutzer und dann den Namen eingeben unsere Benutzerinformationen wie unser Profilbild für . Und hier werden wir alle Chat-Nachrichten ablegen und dann sind hier alle Benutzer und dann hier alle Chat-Nachrichten hier. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. 3. Benutzerliste Artikeldesign: Willkommen wieder zurück. In diesem Teil werden wir versuchen, unseren Header und unsere Seitenleiste zu gestalten. Also wähle ich zuerst die Ellipse hier aus. Und in dieser Ellipse werde ich dieses Ellipsenwerkzeug hier entwerfen. Also hier werden wir unsere E-Mails ablegen und sicherstellen , dass wir genau die gleiche Größe und Weiß haben. Also setze ich 60 mal 60 ein und lege es hier hin. Und danach wollen wir unseren Grenzradius hier haben. Also keine gestörten Ideen. Ich möchte hier einen Rand haben und die Rahmengröße auf fünf ändern. Und ich mache es weiß. Es wird also so aussehen. Wenn es erforderlich ist, werden wir Änderungen vornehmen. Und jetzt danach wollte ich hier einen Namen haben. Also klicke ich auf das Textwerkzeug. Und hier sage ich John Doe. Und ich wähle die Schriftgröße auf 16 Pixel. Hier sind, vielleicht können wir 20 wählen und sie in die Mitte legen. Und jetzt von hier aus kann ich hier verschiedene Schriftfamilien auswählen, einfach darauf klicken , um den Text aufzunehmen. Und Sie werden in der Lage sein, ein paar Schriftfamilien zu sehen , die sie hinzugefügt haben. Und ich werde hier einen zufälligen Namen wählen. Es wird hier nicht angezeigt. Vielleicht können wir uns für diesen entscheiden, nicht für diesen. Wir können uns tatsächlich für diesen entscheiden. Oder ob es etwas Besseres gibt. Und es wird so aussehen. Es wird so aussehen. Nicht dieser ist sehr klein. Das und das. Und das. Ich werde mich entscheiden, ich denke dieser, dieser war besser. In Ordnung, aber hier werden keine Änderungen vorgenommen. Also werde ich diese Linde wählen oder wir hatten etwas namens, in Ordnung, diese. Jetzt werde ich hier unser Image platzieren, um ein EMS zu erstellen. Sie haben hier einen Fehler, also platzieren Sie das Chaos. Sie müssen also auswählen, Sie müssen das Bildwerkzeug auswählen. Laden Sie von hier aus einfach Ihr Profilbild hoch und laden Sie Ihr Bild hoch , das Sie zeigen möchten. Zum Beispiel werde ich diesen hier wählen. Und es zeigt, dass Sie MS hinzufügen und nach einem Auseinanderfallen, während Sie dieses Bild in Ihrem Mund sehen können, einfach dieses auswählen und dann Ihr Ellipsenwerkzeug hinzufügen. Okay, jetzt will ich es nicht fünf für das Foto für die Grenze haben . Ich nehme es drei. Okay, jetzt sieht es gut aus. Perfekt. Und hier, hier drüben wollen wir unsere Nachrichtenliste haben. Aber vorher brauchen wir hier eine Quellleiste. Also definiere ich hier ein Rechteck. Und setze dieses Rechteck oder den Grenzradius. Ich sage Grenzradius zehn Pixel und füge hier zu umrandet hinzu, ändere die Hintergrundfarbe in weiße Farbe. Und hier, genau hier drüben , können wir es schaffen. Also hier können wir, wir können, wir können, wir brauchen auch einen Knopf hier. Wir brauchen hier auch einen Button in der gleichen Größe. Also werde ich diesen duplizieren und ihn dann hierher ziehen und dann die Größe für die Schaltfläche ändern. Wir können es einfach auf diese Weise hierher bringen. Dann kann ich diesen erhöhen. Hier. Wir werden unser Icon platzieren und hier können wir es einfach auszahlen. Wir können einfach eine Textur hinzufügen. Wir können sagen, wir können Sars, Sars Benutzername hier sagen . Und ich ändere die Schriftgröße auf 15 Pixel. Und vielleicht Farbe, oder ich kann ein bisschen Farbe für diesen machen. Die Schattenfarbe. Okay, jetzt sieht es gut aus. Jetzt werde ich hier unsere E-Mails ablegen. Dafür werde ich hier ein Icon platzieren. Ich habe bereits ein PECC installiert, das Ziel heißt , um zu den Plugins zu gelangen. Und hier können Sie sehen , dass unser Feeder-Symbol. Wenn Sie es also noch nicht installiert haben, können Sie einfach immer noch auf das Find More Plug-in klicken und dann einfach dieses Filtersymbol durchsuchen oder Sie können ein anderes Plug-In verwenden , um das Symbol hier anzuzeigen. Also klicke ich auf das Ordnersymbol. Hier. Ich füge Sars hinzu. Sars. Sie haben also ein SARS-Icon. Ich werde es einfach da hinstellen. Also hier ist das Suchsymbol. Also wähle ich einfach diese Option hier aus, sars-Symbol , und lege sie hier ab. In der Mitte von diesem. Jetzt können Sie sehen, dass sich dieser außerhalb des Rahmens befindet. Unser Mainframe ist zu Hause, also ziehe ich ihn einfach in diesen Rahmen. Ordnung, das ist unser Suchsymbol, und danach möchte ich unsere paar Optionen hier haben. Es kommt her. Ich werde diesen entfernen. Also hier zeigen wir unsere Benutzerliste. In Ordnung, also wie wir eine Liste von Benutzern zeigen, werden wir hier ein gesundes Rechteck nehmen. Ich werde hier ein Rechteck zeichnen. Und dann dieses Rechteck hier. Ich werde dieses Rechteck zeichnen. Und ich füge zehn Pixel für dieses Rechteck hinzu, für dieses Auto, für diesen Artikel, für dieses Rechteck. Und dann möchte ich eine weiße Farbe haben, wie die gleiche Farbe, die wir beibehalten, aber ich möchte hier einen Strich haben. Wählen Sie also hier einen Strich aus. Jetzt sieht es so aus und hier denke ich, dass wir es erhöhen können. Wir müssen unser einziges Symbol setzen, dann den Namen und die Nachricht und die Dauer und dann den kleinen Punkt hier. Wie werden wir es also machen? Wen wir können diesen duplizieren , weil wir das gleiche Design benötigen. Okay? Also werde ich diesen duplizieren. Also Command D, Control D und dann leg es einfach her. Aber wir können es hier nicht sehen. Es scheint, dass unser Rechteck und unser EMS, EMS, aber es wird hier nicht angezeigt. Das ist also unsere Ellipse. Die Ellipse dazu, lass mich sie nach vorne bringen. Wir können dort H nichts sagen. Also werde ich diesen löschen. Und machen wir noch einmal ein Duplikat. Und dann ziehen Sie es hier her und verfolgen Sie es dann hier. Okay, das Problem ist also, dass es nicht vorne ist. Also sollte es uns zeigen. Sie können In den Vordergrund bringen sehen, klicken Sie auf In den Vordergrund bringen. Und jetzt ist es vorne. Also werde ich es einfach hier hinstellen. Und dann füge ich hier unseren Namen hinzu. Das ist also unser Ellipsenwerkzeug. Ich mache es, mache mir einen Namen daraus. Ich gebe hier einen Namen, also sage ich Umbenennen. Also hier ist unsere Ellipse, diese. Also benenne ich diesen um. Ich werde diese eine Möglichkeit hinzufügen, wie es sich hierher bewegt. Diese Ellipse wird also unser Name sein. Drücken Sie also Control R, n hier. Ich sage hier Benutzersymbol, Liste und Benutzerliste. Und danach füge ich hier unseren Namen hinzu. Nehmen wir an, wir können sagen, wir können Francisco sagen. Francisco. Und Sie können sehen, dass es sich um die vorherige Schriftfamilie handelt, die wir verwendet haben. Also für die Schriftfamilie, für die, für den Namen nimmt diese. Und damit bin ich zufrieden. Wenn Sie möchten, können Sie hier einfach den Namen der Schriftfamilie ändern . Und danach, also und nimmt ein Pixel 15, wie sie Schriftgröße schulden. Und dann brauche ich noch einen Text für die Massen. Wir können sagen, Hi, wie geht's dir? Aber dafür möchte ich 12 Pixel haben. Hier. Ich möchte 12 Pixel haben. Und jetzt möchte ich hier unsere Dauer hier angeben. Also werde ich hier eine Zeit setzen. Ich werde sagen, sagen wir mal 09 bis 1915 Uhr. Dies ist die Zeit, die wir zeigen. Aber nimmt weiße Farbe an. Warum ist das so? Es sollte weiß sein. Wo es weiße Farbe annimmt. Dies sollte nicht der Fall sein. Lass mich diesen löschen. Also lasst uns den Text noch einmal hier platzieren . Jetzt arbeiten wir immer noch. Lassen Sie uns also eine 909-15, 15 Uhr genau auf den Zeitpunkt der Nachricht setzen , wenn der Benutzer gesendet hat. Und hier möchte ich drei Punkte dafür haben. Ich möchte hier einen T-Punkt zeichnen, wie einen kleinen Punkt mit Elasticsearch, sagen wir fünf Pixel fünf Pixel und ändere einfach die Farbe in Schwarz. Jetzt sieht es also so aus. Ich denke, wir können mit drei Pixeln in der Höhe anfangen, und die Höhe ist drei mal drei. Nicht gut. Also mache ich es vier mal 44 mal vier. Und dann dupliziere ich es Command D und nehme ein Leerzeichen und dupliziere es noch einmal. Das sind also die drei Punkte , die ich gerade hinzugefügt habe. Es wäre also schön, wenn ich den Abstand zwischen diesen beiden verringern würde. Okay, es sieht also gut aus. Also hier haben wir diese Ellipse, ein Ellipsenwerkzeug in Illustrator, um sie zu einer Gruppe zu machen. Also drücke ich Befehl G. Und dann lege ich es hier ab. Und das Zentrum von diesem. Jetzt haben wir diesen t-Punkt und ich werde die Höhe dieses Punktes verringern , weil wir diese Anzahl von Höhen nicht benötigen. In Ordnung, also jetzt, in Ordnung, also ein bisschen mehr hier. Also haben wir dieses Design hier. Was wir nun tun müssen, wir müssen mehrere Artikel von diesem hinzufügen. Was wir also tun, wird sie im Grunde zu einer Gruppe machen und dann werden wir mehrere Elemente hinzufügen und dann werden wir eine Bildlaufoption hinzufügen. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. 4. Gruppen- und vertikale Scrollen: Willkommen wieder zurück. In diesem Teil werden wir versuchen, mehrere Listen und mehrere Benutzerelemente hinzuzufügen , und dann versuchen wir, eine Skalierungsoption hinzuzufügen. Jetzt haben wir dieses Design und können es wiederverwenden. Also müssen wir sie zu einer Gruppe machen. Also dieses Rechteck, und dann ist eine Liste oder EMS und dass wir dann diesen Text, diesen Text und diesen Text und diese Gruppe eins für dieses gelehrte Symbol erstellt haben diesen Text und diesen Text und diese Gruppe eins . Das sind also die Dinge, die diesen integralen Gegenstand hier enthalten. Also mache ich sie zu einer Gruppe. Wählen Sie das alles in der linken Seitenleiste aus. Stellen Sie sicher, dass Sie derzeit jedes einzelne Element ausgewählt haben . Also wähle ich Command C und benenne dann int sensitive group um , um Strg R zu drücken. Oder du kannst es auch tun, indem du hier klickst. So können Sie Ihren Namenskontroller sehen. Also sage ich Benutzerliste. Wenn Sie also an einem großen Projekt arbeiten, haben Sie immer versucht, einen aussagekräftigen Namen zu geben, damit Sie später, wenn Sie Änderungen vornehmen, dies leicht herausfinden können. Es ist also immer eine gute Praxis. Jetzt haben wir dieses Design und was können wir jetzt tun? Also werde ich für diesen Fall Strg D drücken. Und dann ziehe ich es her. Und jetzt muss ich es nur noch einmal ziehen. Und danach werde ich nur noch sagen, ich muss es nur einmal ziehen und ich habe das gesagt, ich drücke einfach Control D, dann wird es automatisch gehen. Drücken Sie also Control D, Control D, Control D, Control D bis zum Ende, Control D, Control D. Das sind also die Benutzerlisten, die ich haben möchte. Lassen Sie es uns jetzt so ausführen, wie es aussieht. Okay, Sie können, eine Sache, Sie können feststellen, dass es einige Symbole gibt, es gibt eine Liste, die über unseren Mainframe hinausgeht, daher können wir das nicht tun. Hier kommt es also. Dies ist, wo es herauskommt, heißt Funktionalitäten, die wir hier lernen werden. In Ordnung? Jetzt müssen wir die Option skalierbar machen , damit wir den Rest des Teils sehen und vertikal aufrufen können. Okay? Also wie machen wir es genau. Jetzt haben wir also all diese Benutzerlisten. ist also die Liste, die unsere ganzen Dinge enthält. Okay? Das sind also die Listen, die enthalten, Sie können sehen, ob ich diese auswähle, es gibt eine andere, aber wir können sie sehen. Jetzt. Machen Sie eine Sache, wählen Sie erneut die gesamte Benutzerliste aus und machen Sie sie zu einer einzigen Gruppe. Wählen Sie also diesen ganzen Artikel aus. Dieser Inhalt ist die ganze Sache. Also mache ich sie jetzt zu einer Gruppe. Okay? Ändern Sie jetzt erneut den Namen. Wir können alle Benutzerlisten für eine Schriftrolle sagen , nur einen aussagekräftigen Namen. Jetzt enthält diese Gruppe unsere gesamte Benutzerliste. Und am einfachsten ist all dieser Inhalt in diesem einzigartigen Design ein bestimmtes Design. Okay? Kommen Sie jetzt einfach auf die rechte Seite, Sie können hier die Optionen für das automatische Layout sehen. Du musst es nur anklicken. Sobald Sie darauf klicken, sehen Sie den Clip-Inhalt. Sie müssen also nur auf den Inhalt dieses Clips klicken. Sobald Sie auf diesen Clip-Inhalt klicken, werden Sie sehen, dass diese Gruppe eine solche Form haben wird. Jetzt können wir es ziehen und dann können wir es mit unserem Mainframe anpassen, das heißt, dieses Zuhause von dieser Formprämisse war immer noch da, aber unsere Gruppe ist jetzt noch hier. Also was ich tun werde, ich füge es einfach hier hinzu. In Ordnung. Jetzt wollen wir in der Lage sein, alle Schuloptionen zu sehen. Wenn ich es also aktualisiere, sehen wir nur diese Optionen. Okay, die Sache ist die, lass mich dir zeigen, was ich damit meine. Jetzt können wir immer noch sehen, dass die Schädeloptionen immer noch diese Funktionalität hier haben, wie bis hier. Ich kann es auch wieder hierher ziehen. Es wird so aussehen. Also haben wir diese Option immer noch hier, okay, wir können diesen Artikel einfach nennen. Sie können sehen, dass wir es richtig scrollen können? Unsere Benutzerliste ist bis hier kaputt. Wählen Sie nun einfach diese Benutzerliste und gehen Sie dann zum Prototyp-Bereich. Klicken Sie auf den Prototyp. Hier sehen Sie das Überlauf-Scrollen. Standardmäßig ist kein Scrollen ausgewählt. Wir müssen hier Änderungen vornehmen. Anstatt also nicht zu scrollen, wählen wir das vertikale Scrollen dieser Seele. Jetzt sollten wir unsere Liste sehen können. Hier. Sie können sehen, dass wir unseren Artikel scrollen können. Wir können unsere Liste durchblättern. Auf diese Weise können wir Änderungen vornehmen, aber auf diese Weise können wir unsere Schuloptionen hinzufügen. Jetzt haben wir diese Optionen hier. Cool. Jetzt haben Sie gelernt, wie man scrollt. Lass uns eine Sache machen. Jetzt. Ich kann mich ändern. Dies sind Bilder wie verschiedene Bilder. Also werde ich wieder Plessy Chaos auswählen. Und dann wähle ich all diese Bilder aus. Es wird ein paar Sekunden dauern diese Bilder hochzuladen. Und sobald der Upload abgeschlossen ist, sollten wir in der Lage sein, unsere Bilder in unserem Mund zu sehen , wenn wir sie bewegen. Das Bild wird also verkleinert, also dauert es immer noch, es dauert Zeit. Es wird nicht angezeigt. Hier gehst du. Sie sehen, dass wir jetzt acht E-Mails haben. Jetzt wähle ich diesen aus. Ich werde drücken, also haben wir diesen schon. Ich drücke hier eins. Ich werde den zweiten hier drücken. Der dritte ist da, der vierte ist da. Und auf diese Weise können Sie einfach, Sie können es Ihnen einfach zeigen, Sie können einfach mehrere Bilder hier platzieren. Das kannst du sehen. Jetzt haben wir verschiedene Bilder. Das Auffrischen dauert einige Zeit . Jetzt haben wir für jeden Artikel ein anderes Bild. Also was ich im Grunde gemacht habe, ich habe einfach auf diese E-Mails geklickt und alle Bilder ausgewählt. Es dauert ein paar Sekunden, sobald es hochgeladen ist, dann können Sie alle Bilder mit einer Nummer mit Ihrer Maus sehen . Und dann musst du einfach dorthin gehen und einfach eins nach dem anderen darauf klicken, und dann wird es automatisch hier eingefügt . Los geht's. Jetzt haben wir ein Medikament von Fannie Mae für eine andere Karte. Sie können es sehen und wir können es auch scrollen. Und wir können auch diesen scrollen. Auf diese Weise können Sie, wenn Sie möchten, auch alle Bilder hier ändern. Du kannst es einfach alleine machen. Es ist der gleiche Vorgang. Jetzt haben wir diese Scroll-Funktionalitäten und anderes Icon unter verschiedenen Bildern. So kannst du es machen. In Ordnung, also füttere ich diesen. Sie haben also gelernt, wie man scrollt und wie kann man es gruppieren und wie kann ich das hier auf diese Weise machen? Im nächsten Teil arbeiten wir an diesem Symbol. Wenn Sie auf das Symbol klicken, zeigen wir Ihnen, wie unser Modell die Liste löscht. Wir sehen uns in der nächsten Vorlesung. 5. Dropdown-Liste Open Overlay: Willkommen wieder zurück. In diesem Teil werden wir hier einen Eins-zu-Eins-Artikel hinzufügen. Wenn Sie auf diese Liste klicken, um diese Liste zu löschen, wie wir das tun werden , müssen wir erneut einen Rahmen definieren. Also klicke ich auf den Rahmen und dieses Mal zeichne ich einen benutzerdefinierten Rahmen, z. B. ziehe ihn in diese Richtung. In Ordnung, also anstelle von Frame eins kann ich sagen, ich kann Frame löschen sagen. Okay, du kannst jeden Namen angeben und ich möchte hier einen kleinen Grenzradius haben. Also spare ich fünf Pixel. Und in diesem Dillard-Rahmen möchte ich zwei Knöpfe haben. Eine ist für verzögert, eine ist quadratisch ungerahmt. Was kann ich also tun? Ich kann hier ein Rechteck definieren. Und ich kann hier unser Rec, Rectangle definieren. Für dieses Rechteck gebe ich Randradius 95. Zelle, damit es gut aussieht. Und ich füge hier rote Farbe hinzu und diese Farbe, die wir hier verwenden. Und dann schreibe ich hier einen Text. Und ich sage „lass“ und stelle es in die Mitte. Der Text statt 15 sollte 12 sein, da es sich nur um einen normalen Schaltflächentext handelt. Was kann ich jetzt tun? Machen Sie aus ihnen eine Gruppe, diese beiden. Jetzt werde ich diese Gruppe duplizieren, damit ich eine weitere Schaltfläche hinzufügen kann. Und dieser Button wird dieser Button-Name sein , der auf einem Freund sein wird. Das kann ich sagen. Und Freundes-Button. Jetzt lass es mich in die Mitte stellen. Okay, jetzt haben wir diesen Rahmen. Was müssen wir jetzt tun? Wir müssen diesen Rahmen mit diesem Punkt verbinden. Wenn Sie also auf dieses Top klicken, können wir dieses zeigen. Gehen Sie dazu, klicken Sie auf diesen Prototyp und klicken Sie nun auf diese Gruppe, auf diese Punktgruppe. Nicht gerade im Boden. Das kannst du sehen. Erinnerst du dich, dass wir für diese drei Punkte einen Groove haben. Sie müssen also nur auf die Gruppe klicken. Und dann werden Sie hier, wir sehen Interaktionen. Klicken Sie darauf und klicken Sie hier. Hier heißt es, wie Sie interagieren möchten, wir möchten, dass es auf Klick oder auf Kurs oder auf, nun, wir wollen es in onclick haben. Und anstatt zu navigieren, werde ich immer wieder auftauchen. Lassen Sie uns diese offene Überlagerung helfen unsere Modellbox hinzuzufügen. Also, wo wir dieses offene Overlay machen wollen, wollen wir es mit diesem Delete-Frame machen. Jetzt ist dieser Knoten mit diesem Gillette-Rahmen verbunden. Jetzt heißt es hier, dass Hintergrund hinter Overlay hinzugefügt wird. Ich möchte keinen Hintergrund haben, also werde ich hier keine Auswahl treffen. Und dann heißt es geschlossen, wenn man draußen klickt, ich möchte es schließen, wenn der Benutzer auf die Außenseite klickt. Werde ich dir zeigen , was es bedeutet. Und jetzt hat es hier dieses Animationssystem, von dem aus Sie dieses zeigen möchten oder von wo aus Sie es machen möchten, oder Sie möchten es als Instanz haben. Fügen wir also zuerst diese Animation hinzu, ziehen Sie ein und entspannen sich, damit Sie verstehen, was ich meine. Nun, wenn ich das hier starte, wenn ich hier bin und darauf klicke, geht es los. Unser Löschen, ich bin der Lead-Frame wird standardmäßig hierher kommen wenn ich außerhalb klicke. Jetzt müssen wir es manuell hier platzieren. Ich möchte es zeigen, wenn du entweder darauf klickst, anstatt in die Mitte zu kommen, sollte es hier rüber kommen. Also wie werde ich es machen? Hier haben sie eine Option, die standardmäßig zentriert genannt wird. Und hier oben links in der Mitte, oben rechts, unten führen Sie von wo aus Sie es zeigen möchten. Sagen wir also unten links. Klick es an. Es wird hier unten links hinzugefügt. Aber wir wollen es hier zeigen. Deshalb kannst du einfach mit diesem spielen. Nehmen wir an, Sie möchten es oben rechts zeigen. Wenn ich jetzt darauf klicke, wird es oben rechts angezeigt. Okay, du kannst es einfach sagen. Mein Ziel ist es also, dich zu unterrichten. Deshalb zeige ich Ihnen später nur die alten Optionen , die Sie je nach Ihren Anforderungen verwenden können. Aber für diesen werde ich auswählen. In der Zwischenzeit, sobald ich mit dem Mineral geschlafen habe, kann ich es einfach gleich nach diesem hier herziehen. Ich kann es einfach herziehen. Jetzt. Wenn ich es jetzt aktualisiere, sollte es hierher kommen, weil wir hier bearbeitet haben. Klicken Sie jetzt darauf und es ist hier. In Ordnung? Da wir also einen White-Collar-Hintergrund haben und wir haben auch diesen. Also werde ich dafür sorgen, dass ich eine andere Farbe für diese Farbe hinzufüge , damit sie leicht sichtbar ist. Also statt dessen, lass uns diese graue Farbe setzen. Jetzt. Es ist hier leicht sichtbar und wir können es hier platzieren. Aber wenn wir wollen, können wir auch eine andere Farbe für diese hinzufügen, vielleicht diese, und diese Farbe, jetzt sieht sie gut aus, ist leicht sichtbar. Ich klicke draußen, es geht, aber ich möchte keine Messung haben , weil es nicht benutzerfreundlich ist, weil wir es unseren Benutzern nicht zeigen wollen. Es kommt von unten. Was wollen wir haben? Wir möchten zeigen, wann entweder auf den Grad klicken, der hier angezeigt wird. In Ordnung, also wie werden wir das machen? Gehen Sie jetzt wieder zu diesem Prototyp-Abschnitt über. Und hier hatten wir unsere Interaktion hier. Das hatten wir hier. Okay, also müssen wir darauf klicken. Dann können wir diesen hier sehen, unseren vorherigen, und hier haben sie Optionen. Anstelle von Animations-Morphium werde ich also Instant ihre Sitze auswählen. Dann wird es keine Maßnahme geben. Stattdessen kannst du jetzt sehen. Stattdessen kannst du jetzt sehen. In Ordnung. Klicke darauf, es wird jetzt kommen, wenn du entweder auf den Löschen-Button klickst und den Unfun-Button aufhörst, ich möchte diesen auch verwerfen. Ich möchte diesen entfernen. Also wie mache ich das? Klicken Sie jetzt auf diese Schaltfläche, klicken Sie hier und zeigen Sie diese Umleitung dann hier an. Klicken Sie auf den Onclick und Sie erhalten, Sie müssen nur auf diesen Glanz über Blei klicken da wir eine hatten, wir haben Überlappung. Also möchte ich nur dieses Overlay schließen. Wenn Benutzer also darauf klicken, klicken Sie darauf, wir sehen dieses Overlay. Klicken Sie nun auf Löschen. Es wird so weitergehen. die gleiche Weise können wir auch für diese unfaire und abseits von Sean hinzufügen . Wählen Sie diesen und Freund aus und kommen Sie her, wählen Sie diesen aus, klicken Sie auf Keine und klicken Sie auf Overlay schließen. Dieser ist jetzt auch verbunden. Jetzt klicke ich darauf, es wird geschlossen. Ich klicke hier. Es zeigt diese beiden Optionen. Dann klick drauf, es ist weg. Auf diese Weise können Sie die Überlagerung von Shows öffnen Arbeitsabschnitt auf diese Weise modellieren. Und dann können Sie auch diese Art von Liste erstellen. Ich hoffe du hast heute etwas Neues gelernt. Wir sehen uns in der nächsten Vorlesung. 6. Nachricht Senden von Design: Willkommen wieder zurück. In diesem Teil werden wir versuchen, unser Hauptnachrichtenlayout zu gestalten. Also hier möchte ich, dass wir im vorherigen Teil all diese Funktionen abgeschlossen haben. Und dann funktioniert auch dieser. In Ordnung, also können wir hier auch wenig reparieren, zum Beispiel, dass wir einfach die Rahmenhöhe verringern können, ein bisschen weniger Einstellung. Und vielleicht kann ich das nicht, nicht dieser wie der Mainframe. Ich spreche von diesem Mainframe. Also slick diesen Mainframe und minimiere, verringere die Höhe dieses Mainframes. Jetzt können wir sehen, dass es repariert ist. Okay, jetzt mache ich ein bisschen mehr. Okay, also, okay, also lass es uns ein bisschen mehr erhöhen. Wählen Sie nun diese aus und legen Sie sie einfach hier ein. Und auch dieser, der Hauptwagen, der hier unser Hauptdesign enthält. Und wir müssen auch unseren Rahmen wieder anpassen. Klicken Sie also auf diesen Rahmen klicken, den wir hier gemacht haben. Und dann können wir es einfach bis hier anpassen. Jetzt sieht es also gut aus. Wir können jetzt sehen, dass wir diese Schriftrolle nicht haben. Ich meine, wie wir zuerst, war unser Haida mehr als die Displaygröße, die ich habe. Aber wenn Sie keine Änderungen vornehmen möchten , ist das völlig in Ordnung. Jetzt haben wir diesen Ausgangspunkt für dieses Layout von hier aus, und dieser ist von hier. Und jetzt können wir es einfach nennen, jetzt sieht es besser aus als das vorherige, vorherige. Okay, also was ich getan habe, wird hier im Grunde nicht verwirrt. Also was ich gemacht habe, ich verringere einfach die Höhe dieses Mainframes, der unser Home-Frame ist, und füge dann einfach diesen Rahmen hinzu und passe dann einfach diesen Rahmen an, der das Ganze enthält. Und dann dieser so alle Benutzerlistenrahmen, passen Sie ihn einfach so an, dass er jetzt besser aussieht. Und vorher war es so, als hätten wir eine kleine Schriftrolle gehabt. In Ordnung, also jetzt füge ich hier die Option d dann hinzu. Also was ich hier haben werde, ich werde einen Emus haben und dann neben diesem EMS den Namen und dann die Uhrzeit und dann die Nachricht. Also was ich tun werde, ich werde das einfach duplizieren, diesen Emus. Und dann kann ich es einfach hier hinstellen. Und vier hier. Ich füge eine andere Strichfarbe da unser Hintergrund weiß ist. Also wenn ich so breit wähle, dann wird es schlecht aussehen. Nicht schlecht genau. Wir besaßen sogar , diesen zu verstehen. Du willst nicht sichtbar sein. Jetzt denke ich, dass er rot sichtbar ist , also wähle ich diesen aus und danach muss ich hier einen Namen hinzufügen. Also schicke ich ihm Francisco. Francisco wird hier sein und ich werde den Namen hier eintragen, 14 Pixel. Und stell es in die Mitte. Und im gleichen Zentrum werde ich auf den Text zurückgreifen und es wird unsere Zeit sein. Oder wir können die Zeit auch hier oder in die Mitte setzen. Wenn ich es hier ablege, haben wir noch einen weiteren Text. Nein. Also wird es in der Mitte gut aussehen. Ich sage Höhle, den 12 Uhr. Und dann mache ich diese Sache hier und in der Mitte. Und danach, was ich danach haben werde, werde ich die Nachricht hier haben, das Nachrichtenfeld. Also dafür, für das Nachrichtenfeld, werde ich hier ein Rechteck zeichnen. Ich werde die Nachricht von hier bis hier hinzufügen. Die Nachrichtenbücher werden so aussehen. Und ich füge hier einen Grenzradius hinzu. Fügen Sie also Randradius zehn hinzu. Und Jens Hintergrundfarbe oder ohne Hintergrundfarbe, wenn sie gut aussieht, können wir diese auch behalten. Lass es mich versuchen. Dieser wird die beste Lösung sein. Das ist jetzt unser Nachrichtenfeld. Und ich möchte hier ein bisschen Schatten haben, statt 100%, wir es 50 gegen n. Dann wenn ich eine andere Farbe verwende und sie nicht gut aussieht in 50%, vielleicht 70, 70% Prozent. Es wird so aussehen. Setze es auf 80%. Wir werden diese helle Farbe haben und diese sieht nicht gut aus. Also werde ich versuchen, ein paar andere Farben zu erzeugen. Vielleicht diese Farbe, diese Farbe, diese. Und dann setze hier einen linearen Gradienten. Der lineare Gradient wird hier also nicht sichtbar sein. Also kann ich es einfach hier hinstellen. Also wähle ich statt dieser Farbe die weiße Farbe. Und dann wähle ich das Wasser aus, das es ist, weil wir in der Nachricht immer die normale, normale Farbe haben , damit der Benutzer lange auf den Bildschirm schauen kann. Aber wenn wir eine farbenfrohe Farbe verwenden , die in einer farbenfrohen Botschaft enthalten ist, kann es nicht sehr schlecht sein. Es ist nicht benutzerfreundlich. Aber wenn Sie eine andere Sache haben, ein anderes Team, zum Beispiel ein schwarzes Team oder ein anderes Thema, dann können Sie versuchen, eine andere Farbe zu verwenden. Aber für das weiße Team ist es für den weißen Hintergrund immer besser, die Massen in einem weißen Schatten zu halten . Also werde ich diese Höhe minimieren. Und in diese kann ich einfach hier die Essenz eingeben, ich kann sagen: Hey, Hi, wie geht es dir? Wie geht's dir? Ist alles in Ordnung? Ist alles in Ordnung? Okay, das ist das Nachrichtenfeld, das wir hier haben. Also brauchen wir jetzt dasselbe hier. Okay, jetzt werde ich duplizieren, okay, also lass uns ein anderes duplizieren, wie diese, diese Nachricht, dieses Bild. Also werde ich diesen duplizieren. Und ich werde es hier hinstellen. Also werde ich diesen hier einfach duplizieren. Entschuldigung. Okay, also habe ich es falsch gemacht. Anstatt das zu tun, mache ich es zu einer Komponente. Also erstelle eine Komponente, dann können wir sie einfach von hier aus verwenden. Wenn Sie eine Komponente erstellen möchten, wählen Sie einfach die Unordnung oder eine Komponente aus. Klicken Sie dann mit der rechten Maustaste, klicken Sie mit der rechten Maustaste, und klicken Sie dann auf die Komponente Zum Beispiel dieser. Und dann klick Create Component, dann wird es hier angezeigt. Und dann können Sie es problemlos so oft verwenden, wie Sie möchten. Also jetzt hier, ich werde das Ding hier hinstellen. Und ich werde diesen duplizieren, Befehl D. Also sollte es im gleichen Level sein. Hier können wir sehen, dass dies die Mitte ist. In Ordnung, also hier, jetzt ändere ich die Zeit. können wir sagen. Wir können dann fünf sagen. Und dann müssen wir hier, genau hier, den Namen schreiben. Also nehme ich den Text und füge ihn hinzu und füge ihn hier ein. Ich sage Jessica. Und ich werde es hier wie auf dem gleichen Level platzieren, aber in der Nähe dieses. Okay, Jessica schickt Nachrichten an Francisco. Und lassen Sie mich überprüfen, ob wir die gleiche Höhe oder die gleichen Schriftarten haben. Schriftgröße 1414. Jetzt brauchen wir das gleiche Design hier. Also was ich machen werde, ich mache aus ihnen zusammen eine Gruppe. Diese beiden pro Artikel wählen dieses Rechteck unter diesem Text aus. Also mach sie zu einer Gruppe und dann dupliziere ich sie. Und dann lege ich es hier hin. Und für diese Nachricht werde ich sie hier platzieren und die rechte Seite, auf die rechte Seite. Und dann lege ich es hier hin. Ich werde die Größe verkleinern. Es ist das Weiß von diesem. Und los geht's. Entlassungen kommen also von, Entlassungen kommen aus Francisco. Dieser kommt von Jessica. Und dann können wir es zusammen einfach hierher verschieben. Ja, aber hier ist alles in Ordnung. Aber gruppieren wir diese beiden Dinge wie dieses, dieses und dann diese Jessica, und diesmal diese beiden und diese Benutzerliste. Also mache ich sie zu einer Gruppe, schlitze all diese Dinge auf. Und wir müssen es in den Boden stecken. Von hier aus. Ich werde diese Nachricht noch einmal duplizieren, hier. Und dann lege ich es hier hin. Das sind also die beiden Nachrichten, die von Jessica von hier aus gesendet wurden. Diese Nachricht kommt also von Jessica. Und hier werde ich noch eine Sache hier platzieren. Also werde ich, ich werde unsere Zeile hier haben, also weiter, um eine Zeile hinzuzufügen. Wir können das Linienwerkzeug oder das Rechteckwerkzeug nehmen. Deshalb verwende ich lieber dieses Rechteckwerkzeug , damit wir es einfach anpassen können. Und dann werde ich die Höhe von diesem verringern. Setzen wir es auf, fügen dann Rahmenradius und 90-Klick-Zelle hinzu. Und los geht's. Mal sehen, wie es aussieht. Es sieht so aus. Und ich wähle diesen aus. Die Farbe von diesem ist ein Block, glaube ich. Wir können diese Farbe also schwarz wählen. Und nicht genau bloggen. Ein bisschen Grau wäre nett hier. Ja, also sieht es so aus und dasselbe. Diese Nachricht kommt von Francisco und Entlassung stammt von Jessica. Lassen Sie mich die Botschaft hier ändern. Ich kann sagen hergeschickt. Wir können sagen, ich werde hier verschiedene Massen hinzufügen. Ich kann sagen, das ist Jessica von Ihren Kollegen von Ihrer Universität. Und dann die zweite Nachricht: Wie geht's dir? Nur ein zufälliges S , damit es gut aussieht? Und Essen? Und es sollte mit demselben Gedicht beginnen , derselben Position hier, wie diesem Ausgangspunkt von hier. In Ordnung, das sind also die beiden Nachrichten, die von Jessica und Francisco gesendet wurden. Und danach, gleich hier drüben, möchte ich alle ein Nachrichtenfeld hier haben. Also werde ich hier ein Nachrichtenfeld entwerfen. Ich füge hier ein Nachrichtenfeld hinzu, genau hier. Und dann sollte es an derselben Position beginnen , an der es mit diesem Bild begonnen hat. Wenn Sie es also auf diese Weise ziehen, können Sie dieses Ding hier sehen. Dann setze ich diesen Randradius 90 Pixel, nicht 90 Pixel. Es wäre schön, wenn wir Partypixel auswählen, die vielleicht nicht eng Pixel sind, neun Pixel. In Ordnung, jetzt werde ich hier setzen, ich füge einen Strich hinzu und ändere die Hintergrundfarbe in Weiß. Und hier müssen wir dafür weitere Buttons definieren. Ich werde diesen duplizieren. Und nur um dieses Weiß zu verringern. Und dieser wird für unseren Senden-Button sein. Okay? Es soll also von derselben Position aus beginnen, von der gleichen Position aus, von der aus es von hier aus begonnen hat. Nun, diese anderen beiden Schaltflächen hier, die beiden Felder, die wir hier haben. Also dieses hier gebe ich eine andere Farbe. Also werde ich eine Farbe hinzufügen, eine Strichfarbe, die ich leider zufällig gefunden habe. Also brauchen wir hier eigentlich keinen Schlaganfall. Wir brauchen hier eine Hintergrundfarbe. Und dann ist sein Ziel hier nicht mehr sichtbar. Und hier füge ich unser Icon namens Gesendet mit unserem Text hinzu. Also hier müssen wir zuerst den Text hier bearbeiten. Wir können hier sagen, wir können hier tippen, wir können Duft sagen und es in die Mitte stellen. Und gleich danach möchte ich unser Icon namens Feeder-Symbol haben. Hier füge ich gesendet hinzu. Und ich wähle dieses Icon aus. Und stell es einfach her. Und ich werde die Farbe ändern, damit Sie hier die Auswahlfarben sehen und sie zufällig von Schwarz zu Weiß sehen können . Cool, es sieht wirklich gut aus, aber Sie können sehen, dass dieses Sende-Symbol außerhalb unseres Rahmens erscheint. Deshalb wollen wir es hier sehen können. Also was ich machen werde, ich werde es einfach in den Rahmen ziehen. Dann können wir unseren Senden-Button sehen. Ich denke, wir müssen es in die Mitte stellen. Auf diese Weise. Ja, das ist die Mitte. Und das haben wir genau hier. Okay, das sind unsere vermasselten Shows hier. Ich möchte einen Text hinzufügen. Ich sage, tippe deinen Farbstoff, deine Nachricht. Und ich füge diesen Punkt hinzu. Und dann werde ich, was ich haben werde, hier einen Schatten hinzufügen. Wir können den Hintergrund ändern, wir können die Farbe dieses ändern. So wie diese Art von Farbe. Wir können Bein wenig Schattenfarbe wählen, diese Farbe. Okay, also ist alles in Ordnung jetzt sieht es wirklich gut aus. Deshalb haben wir unsere Nachrichtenbereiche gestaltet. Also werde ich dieses Video hier beenden und wir werden der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. 7. Registrieren und bei Seitendesign anmelden: Willkommen wieder zurück. Also haben wir unsere Nachrichtensystem-Nachricht geschrieben. Aber trotzdem muss ich ein paar Dinge reparieren. Hier können Sie zum Beispiel sehen, dass wir diese Grenze, die wir hier haben, nicht haben. Also werde ich das schnell reparieren. Und wir haben diese Grenze. Der Schlag ist drei. Also werde ich hier den Strich wählen. Und ich werde diesen Schlag machen. In Ordnung, also habe ich einen Fehler gemacht. Ich muss nur diesen Artikel auswählen. Hier füge ich den Strich hinzu. Stroke wird C treffen und eine Strichfarbe wird diese Farbe haben, die wir hier haben. Und wir, in Ordnung, also haben wir hier schon einen Schlaganfall. Es scheint so, also werde ich diesen hier entfernen. Also hier, doppelklicken Sie darauf, dann ändere ich die Strichfarbe. Weil du schon einen Schlaganfall hast, weil wir ihn gerade getroffen haben. Und in unserer Komponente hatten wir in unserem vorherigen Design bereits ihren Hub. Also doppelklicken Sie einfach darauf. Und dann siehst du das Symbol und dann siehst du die Farbe, dann änderst du die Farbe hier. Sie müssen hier keinen weiteren Strich hinzufügen , da wir bereits einen Rahmen für diesen haben. In Ordnung, das sind also die wenigen Dinge. Jetzt möchte ich unsere Anmeldung gestalten und dafür zahlt sich die Anmeldung aus. Ich werde hier einen Rahmen erstellen. Erstellen wir also hier einen Rahmen. Ich mache es einfach auf diese Weise . Es ist dieser kleine Rahmen. Und ich füge hier einen Grenzradius hinzu. Also können wir hier sagen, ändere zuerst den Namen. Ich sage hier „Abmelden“. Und hier füge ich hinzu, ich werde es behalten Grenzradius Cyprian Pixel. Also umkehrende Pixel mit Rahmenradius. Und hier müssen wir einen Text und dann ein Eingabefeld hinzufügen . Also füge ich hier die Anmeldung hinzu. Melde dich hier ab. Das ist also der Anmeldetext. Und los geht's, wir haben Design-Upticks in der Mitte. Und ich ändere die Schriftart auf 20 Pixel. Denke ich. Wir können, wir können, wir können zwei in Pixel auswählen. Und hier möchte ich nicht genau drei Eingabefelder eingeben müssen. Einer wird so aussehen. Und ich werde einen Grenzradius von 22 Pixeln setzen und hier einen Strich hinzufügen und die Hintergrundfarbe in weiße Farbe ändern. Hier füge ich einen Platzhalter hinzu. Ich schicke einen Namen. Oder wir können diesen Namen gleich hier drüben setzen. Es wäre also schön, wenn wir den Namen auf diese Weise angeben könnten. Okay. Und lass es mich ein bisschen mehr ziehen. Und dann wird das ein Name sein. Das wird ein Namensfeld sein. Und dann machen wir sie zu einer Gruppe, damit wir sie duplizieren können. Also Gruppe und dann Befehl D. Ich werde hinzufügen, dass dieser E-Mail sein wird. Ändern Sie einfach den Namen hier in E-Mail. Also sagen wir E-Mail. Und danach nehme ich dieses D. Und dieses wird ein Passwort sein. Also wird dieses ein Passwortfeld sein. Es scheint, dass ich die Höhe dieses hier erhöhen muss , weil wir hier noch unseren Button hinzufügen müssen. Also und muss auch diesen auf diese Weise anpassen , damit er von derselben Position aus beginnt. In Ordnung, cool. Also müssen wir jetzt unsere Buttons hinzufügen. Dafür zeichne ich hier ein Rechteck und hier unseren Button. Also setze ich 20 hier ein. Lass es uns in 90 setzen. Und dann gebe ich dieser Farbe unsere Hintergrundfarbe, vielleicht diese Farbe. Also haben wir diesen und jetzt muss ich unseren Text hier platzieren und das Zentrum namens Anmelden. Und ich füge es hier und in der Mitte hinzu. In Ordnung. Es sieht also so aus, als ob es jetzt gut aussieht, aber ich möchte hier trotzdem ein bisschen mehr Design haben. Also was ich hier machen werde, ich wähle hier das Ellipsenwerkzeug aus. Und ich werde diese Art von Ellipse hier hinzufügen. Und lassen Sie mich Ihnen zeigen, was genau ich hier hinzufügen möchte. Ich möchte hier mehrere Farben und die Seite hinzufügen. Also lass uns eine Farbe geben. Nur eine zufällige Farbe, diese. Und jetzt ist hier unser Setup. Dieser ist in diesem Rahmen eingerichtet, also werde ich ihn in den Rahmen legen. Jetzt können wir diese Art von Form sehen. Also werde ich hier noch einen zeichnen. Auf diese Weise. Wir können so viele hinzufügen, wie Sie möchten, und wir können später nur noch zwei Mäuse hinzufügen. Jetzt gebe ich dieser eine, eine andere Farbe. Vielleicht diese Farbe. Aber ich muss es wieder in diesen Rahmen stecken. Jetzt wird es so aussehen, aber diese Farbe hat mir nicht gefallen. Also was ich machen möchte, versuchen wir es mit einer anderen Farbe. Jetzt. Es wird so aussehen. Es sieht besser aus als das vorherige. Jetzt haben wir diese beiden Designs hier in der Ecke und in der rechten Ecke. Und was können wir sonst noch tun? Lass es mich auf diese Weise ziehen. Vielleicht können wir hier ein bisschen mehr Design hinzufügen, wenn du willst. Okay, versuchen wir hier ein Rechteck hinzuzufügen. Okay, also zeichnen wir ein Rechteck außerhalb dieses Rechtecks und geben ihm 90 Pixel und fügen diesem Rechteck eine Farbe hinzu. Dieses Rechteck und diese Farbe. Okay, jetzt kann ich einfach dieses Rechteck ziehen und das, ich kann dieses Rechteck einfach auf diese Weise drehen und es in dieses einfügen. Also was ich tun werde, ich füge einen linearen Farbverlauf und ändere die Farbe und so. Und wir haben jetzt diesen linearen Koch. Okay, was kann ich jetzt tun? Lass mich die Farbe hier ändern. Jetzt sieht es so aus. Und ich werde, ich werde diese duplizieren , um hier eine weitere Option hinzuzufügen, um hier eine weitere Option hinzuzufügen. Also sieht es jetzt richtig gut aus. Also, wenn ich das jetzt durchführe, sollte ich dir noch einen sehen können. Ich sollte in der Lage sein, diesen Rahmen zu sehen. Und mal sehen, wie es aussieht. Es sieht also so aus. Es sieht also richtig gut aus. In Ordnung, wenn Sie also entweder auf die Schaltfläche Registrieren klicken, senden wir sie an eine Anmeldeseite. Wir müssen also auch eine Anmeldeseite entwerfen. Und noch etwas, das ich hinzufügen möchte, ich möchte hier einen Text hinzufügen. Ich sage, ich habe bereits ein Konto. Haben Sie bereits ein Konto, melden Sie sich hier an. Also werde ich diese Schriftgröße auf 14 Pixel verkleinern. Keine Pixel wie die Schriftgröße. Also stell es hier wie diesen Ausgangspunkt. Jetzt kannst du diese Dinge sehen. Jetzt müssen wir diesen duplizieren. Wir können dieses also duplizieren und dann das gleiche Design für unsere Anmeldeseite hinzufügen, aber wir müssen hier einige Änderungen vornehmen. Also klicke ich darauf. Ich werde diesen duplizieren. Und ändern Sie schnell den Namen in „ Anmelden“, anstatt ihn abzumelden. Ändern Sie jetzt hier den Namen in Anmelden. Dann müssen wir sie nicht haben, wann sich der Benutzer anmeldet. Also was ich tun möchte, ich möchte das einfach auf diese Weise neu anordnen. Von diesem Ausgangspunkt aus. Eigentlich können wir das hier rückgängig machen. Lass mich das rückgängig machen. Und das ist der Ausgangspunkt. Und das ist das Ich werde einfach dieses Passwort hier entfernen und den Namen in E-Mail ändern. Und das wird ein Passwort sein. Und dann ziehe ich diesen Knopf, um zu hören. Okay, es scheint also , dass Sie bei dieser Anmeldung schnell den Namen ändern, um sich anzumelden. Und wir müssen eine Gruppe daraus machen. Also mache ich sie zu einer Gruppe und lege sie hier für die Anmeldung ein. Und dann ziehe ich diesen Text hierher. Und dieses Mal kann ich sagen, dass ich kein Konto habe, dann melde dich an. Ich kann sagen, dass ich kein Konto habe und dann sage ich „Anmelden“, Abmelden“ und „Anmelden“. In Ordnung. Jetzt müssen wir uns nur noch anmelden, bis es wieder ausgeführt werden kann. Es sollte funktionieren. Also haben wir unsere Anmelde- und Anmeldeseite gestaltet. Im nächsten Teil werden wir versuchen, diese beiden Dinge miteinander zu verbinden oder Prototypen zu verwenden. Ordnung, also haben wir diesen, okay, also müssen wir diesen auswählen. Und dann kann ich es ausführen. Melden Sie sich an, melden Sie sich auf unserer Haupt-Homepage an. Und los geht's. Das ist also das Wort Anmelden. Es sieht also wirklich gut aus. Okay, ich werde dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. 8. Prototyping mit Animation: Willkommen wieder zurück. In diesem Teil werden wir versuchen, unser Prototyping hinzuzufügen, aber vorher möchte ich hier einen Knopf haben. Und dann möchte ich mit dem Prototyping beginnen , wie wir es tun müssen. Ich brauche ein solches Design für eine Aussperrung. Wenn Sie also entweder auf diese Schaltfläche klicken, wird ein Dropdown angezeigt , um sich viel abzumelden. Und dann schicken wir sie vom Logout zur Anmeldeseite. Und von dort aus können wir all diese Prototypen erstellen. Fügen wir hier also einen Frame hinzu. Einer ist ein kleiner Rahmen hier. Also gebe ich hier den Namen ein, logout. Okay, das ist jetzt unser Logout-Frame. Ich gebe ihm einen Grenzradius. Und hier gestalte ich hier unseren Button. Also füge ich hier ein Rechteck hinzu. Ich werde hier ein Rechteck zeichnen. Und dann füge ich hinzu, ich gebe ihm 90 und gebe ihm dann eine rote Farbe. Und hier möchte ich den Text hier hinzufügen. Der Text wird also gesperrt sein. Ich sage logout und setze diesen Text in die Mitte. Jetzt haben wir diesen Logout-Frame und dann haben wir diesen. Wenn der Benutzer also hier klickt, fügen wir hier ein Symbol hinzu. Also füge ich ein Filtersymbol hinzu. Ich sage „Pfeil“. Ich habe nach einer solchen Ikone mit dem Pfeil gesucht, dieser. Also ziehe ich dieses Symbol hierher, genau hier. Und ich werde diese Farbe auf weiße Farbe setzen. Okay? Also wo ist diese Ikone? Dieses Symbol ist jetzt anmelden, abmelden. Okay, wir haben das Innere des Rahmens schon gesehen. Lass es mich überprüfen. Also los geht's. Wir haben dieses Icon. Wenn wir also auf dieses Symbol klicken, zeigen wir diesen Abmelderahmen auf die gleiche Weise wie bei diesem. Also, was ich beim Prototyping anklicken werde, klicken Sie auf dieses Symbol. Und dann bei Interaktionen hier, und klicken Sie darauf. Auf Klick wollen wir haben, und dann wollen wir unser offenes Overlay haben. Und mit diesem Begriff wollen wir unseren Logout-Rahmen zeigen. Und wie wir zeigen wollen. Wir wollen nicht haben, wenn der Benutzer verloren geht, wenn wir draußen klicken, wir brauchen diesen. Anstatt dieses Mal zu zentrieren, wollen wir es manuell machen. Also wollen wir es zeigen. Wir wollen es genau hier hinstellen. Wir wollen es genau hier hinstellen. Aber vorher möchte ich ihm eine Hintergrundfarbe geben. Andernfalls ist es nicht sichtbar. Wir können nicht die rote, wie die Farbe, die wir benutzt haben. Hier. Ich denke, dieser wird nicht gut aussehen. Also können wir diese Farbe wählen, denke ich. Oder welchen Farbcode wir für diesen haben. Ich kopiere diesen, diesen Farbcode, und dann füge ich ihn hier ein. Und los geht's. Dieser wird also unser Logout sein, oder wir können noch eine Sache tun. Wir können es weiß lassen. Und dann können wir hier einen Schatten hinzufügen. Lass es uns weiß halten und einen Effekt hinzufügen. Dann ist es sichtbar. Wenn wir uns jetzt im Prototypmodus befinden, haben wir diesen Schatten hier und wir möchten ihn sofort haben, anstatt die Navigation hinzuzufügen. Okay? Und sobald lass es mich versuchen. Also klicke darauf. Klick es an. Wir können diesen Logout-Button sehen. Und als ich den Schatten hinzugefügt habe, können wir diesen Logout sehen. Wir können diesen kleinen Schatten hier sehen. Wer möchte, kann aber auch diese Hintergrundfarbe wählen. Ich denke es wäre nett, wenn wir diese Hintergrundfarbe verwenden würden. Deshalb ändere ich die Hintergrundfarbe erneut auf diesen Farbcode , den wir haben. Okay, ich habe es am falschen Ort gemacht. Also müssen wir den Farbcode ändern. Hier. Und wenn ich jetzt herkomme, kann ich mir das ansehen. Klicken Sie auf unsere Seite, es geht. jetzt wieder zu diesem Prototyp zurück. Und hier, wenn der Benutzer auf die Schaltfläche klickt, möchten wir unser Modell schließen. Klicken Sie also auf diese Umleitung und dieses Mal auf Overlay schließen und klicken Sie darauf. Klicken Sie auf diesen Logout-Button und es ist weg. Okay? also statt Klauen hier Wenn Sie also statt Klauen hier auf den Lockout-Logout-Button doppelklicken, senden wir sie an den Anmelderahmen. Also werde ich diesen hier entfernen. Anstelle von Gloss Overlay wollen wir jetzt dieses Mal dorthin navigieren, wo wir navigieren möchten. Wir möchten zu den Anmeldepaaren navigieren. In Ordnung, wenn ich Paare anstelle von Instant zuweise, möchte ich eine Morphing-Animation auf diese Weise haben. Und mal sehen, was wir haben Glick andere Lockout. Und wir sind jetzt dabei. Jetzt sind wir in diesem Tempo der Unterzeichnung. Wir sind paarweise angemeldet. Und wenn der Benutzer nach dem Signieren auf das Anmeldetempo klickt, senden wir ihn auf unsere Homepage. Was ich hier gemacht habe, wird also nicht verwirrt. Wenn wir auf diese Schaltfläche klicken, wird diese geöffnet. Und wenn Sie auf die Anmeldeschaltfläche klicken, habe ich gerade die Anmeldeschaltfläche onclick navigiere hinzugefügt, anstatt Klauen zu überlagern, navigiere zur Navigation. Zwei bedeutet, dass wir zu einem neuen Frame oder einem neuen Tempo übergehen wollen, was auch immer Sie sagen möchten. Also klicke auf den Neffen, geh von dort zu . Von wem sind Freunde? Ich meine, vom Navigieren vom Logout bis zum Frame. Du willst gehen, ich möchte zur Anmeldeseite gehen. Und hier haben Sie die Möglichkeit, Ihre Animation hinzuzufügen. Ich habe zum Beispiel Morphium ausgewählt und er wird von links kommen, wenn du willst. Sie können mit rechts, oben, unten arbeiten. Und hier können Sie auch einfaches Ein- und Aussteigen des Kostümbudgets hinzufügen, oder sie haben hier viele Funktionen. Du kannst es einfach machen. Sobald der Benutzer auf die Anmeldeseite klickt , können Sie sich hier anmelden. Wir werden sie auf die Homepage schicken. Klicken Sie also erneut auf diese Umleitung. Hier. Klicken Sie auf, navigieren Sie zu, navigieren Sie zu wo, navigieren Sie zu unserer Homepage. Und hier statt sofort möchte ich Morphing-Animationen haben. Wenn ich jetzt auf die Anmeldung klicke, bin ich auf diesen Homepages. Klicken Sie erneut auf diesen Logout-Button. Ich bin auf der Anmeldeseite. Klicken Sie auf der Anmeldeseite auf. Ich bin bei der Anmeldung dabei. Ja, es wird alleine funktionieren. Es wird auch hier funktionieren. In Ordnung. Loggen Sie sich hier ab und wir sind auf der Anmeldeseite . Klicken Sie auf die Anmeldung. Wir sind dabei wir sind auf dieser Haupt-Homepage hier haben wir noch eine Sache. Ich habe kein Konto angemeldet Wenn Sie also kein Konto haben, sollten wir es an das Anmeldetempo weiterleiten. Wählen Sie diese aus und fügen Sie hier eine Umleitung hinzu. Wählen Sie von hier aus keine aus, um zu der Adresse zu navigieren , an die Sie die Anmeldebasis senden möchten. Und hier können Sie statt eines Beispiels in dieser Animation „bewegen“ sagen oder Sie können diese nur als Beispiel auswählen. Okay, jetzt klicken Sie hier, melden Sie sich ab. Ich habe kein Konto, melde dich hier an. Also hier ist die Anmeldeschaltfläche. Und über die Anmeldeschaltfläche müssen wir sie an die Anmeldeseite senden. Okay, wenn sie erfolgreich sind, melden wir uns hier ab, dann schicken wir sie nach der Abmeldung an die Fußballschule zur Anmeldeseite, zur Anmeldeseite, um sich anzumelden. Also werde ich auswählen, ob ich zu unserem Anmeldetempo navigieren möchte. Und anstatt hier ein Beispiel zu geben, wollen wir es an den Umzug schicken. Und dann können wir diese Animation auswählen. Jetzt melde dich ab und trage keine Anmeldeseite. Zuweisung von Paaren war in der Hauptanwendung ab der Abmeldung hier enthalten. Also hier habe schon eine Kontoanmeldung. Ich muss auch dieses Prototyping hinzufügen. Wenn Sie also noch kein Konto haben, senden wir es auf die Anmeldeseite. Fügen Sie diese Umleitung hier hinzu, klicken Sie darauf. Klicken Sie auf, navigieren Sie zu. Dieses Mal wird unterschrieben. Statt Instanz. Fügen wir eine intelligente Dimension wie diese Art von Dingen hinzu. Anstatt das Ein- und Aussteigen zu erleichtern, werde ich sagen , dass Sie bereits eine Kontoanmeldung haben. Es sieht so aus. Abmelden, registrieren, anmelden, anmelden. Wenn Sie sich also erfolgreich anmelden, melden Sie sich ab. Okay. Aus diesem Grund möchte ich, dass sich ein anderes emotionales Bein von der linken Seite bewegt , um dieses Modell zu notieren. Also lass uns darauf klicken. Wir haben diesen. Einloggen einfügen. Ich habe kein Konto, melde dich hier an. Sie haben noch kein Konto und haben noch ein Konto. Anmeldezahlungen haben bereits eine Kontoanmeldeseite und Anmeldepaare. Wenn ich also entweder auf die Anmeldeschaltfläche klicke, möchte ich die Animation ändern. Wenn sie also hier nach Hause gehen, wählen wir diese kleine Animation aus. Beachten Sie hier, wie hier, wählen Sie eine kleine Animation aus. Und statt einfach zu beachten, sanft einstellen. Mal sehen, wie es aussieht. Melden Sie sich also ab und klicken Sie dann auf die Anmeldung. Es sieht also so aus. Es sieht also gut aus. Ich klicke darauf. Dann wird es so aussehen. Das ist also unsere Homepage und wir haben das auch Funktionalitäten genannt. Abmeldung. Und wir haben diese Animation. Oder wählen wir das Quick aus, als es aussieht. Sperren Sie das econ es aus. Und dann haben wir das gezeigt. Aber das ist nicht das, was ich erwartet habe. Also wähle ich das Gleiten aus. Ich sperre es aus und klicke auf die Anmeldung. Es sieht also gut aus. Und alles ist voll funktionsfähig. Ich hoffe, dass Sie aus diesem Kurs viel gelernt haben. Und dieser wird auch damit funktionieren, diese Dinge, diese arbeiten auch ab. Alle haben kein Konto. Habe schon ein Konto. Es funktioniert perfekt. Ich denke, es gibt hier eine kleine Lösung, also denke ich, dass ich die Grammatik hier nicht korrigieren muss . haben also noch kein Konto, melden Sie sich hier an. In Ordnung, cool. Also ist alles in Ordnung. Unsere Anwendung funktioniert voll funktionsfähig. Wir können es einfach nennen, wir haben dieses Nachrichtensystem, wir haben diese Login-Funktionalitäten und An- und Abmeldung funktioniert alles einwandfrei. Ich hoffe es hat dir gefallen. 9. Teilen und exportieren Sie unser Design.: Willkommen wieder zurück. In diesem Teil werden wir unsere Designs exportieren. Bisher haben wir unsere Anwendung entworfen, Prototypen und alles funktioniert funktionsfähig, jetzt ist es an der Zeit zu lernen, wie wir unser Projekt mit einem Team teilen können und wie unser Projekt exportieren? Das ist sehr wichtig. Lassen Sie mich zuerst über Sie sprechen. Wie können Sie diese Datei mit Ihren Teammitgliedern teilen? Jetzt können Sie sehen , dass auf der rechten Seite eine Schaltfläche namens Share-Schaltfläche angezeigt wird. Hier können Sie die E-Mail-Adresse hinzufügen. Und dann können Sie hier auch den Stellenkandidaten auswählen oder anzeigen. Wenn Sie auswählen, kann bearbeiten, dann alle E-Mail-Adressen, die Sie hier eingeben, haben sie eine Option zum Essen und klicken Sie einfach darauf, um sie anzuzeigen. Dann haben sie nur die Möglichkeit, es hier anzusehen. Und hier können Sie auch Bedingungen hinzufügen nur Personen, die zu dieser Linkdatei eingeladen wurden , oder Personen mit dem Link. Wenn Sie also teilen, wenn Sie den Link teilen, kann jeder auf Ihre Datei zugreifen. Aber wenn Sie nur Personen auswählen, die zu dieser Datei eingeladen wurden, ich meine, der Schüler, werden Sie nur per E-Mail eingeben. Sie haben die Möglichkeit , auf Ihr Design zuzugreifen. Klicken Sie also vorerst einfach auf jemanden mit dem Link hier. Sie müssten es nur hier platzieren und dann können Sie es hier tun. Sie können den Link zum Kopieren sehen. Also klicke ich auf den Link Kopieren. Und jetzt öffne ich hier einen neuen Browser. Der private Browser, bei dem ich nicht bei meiner Figma angemeldet bin. Jetzt sollte ich in der Lage sein, das ganze Design zu sehen, okay? Und ich kann es nicht bearbeiten. Sie können sehen, dass ich mich anmelden muss, aber trotzdem kann ich hier auf das gesamte Design zugreifen. Das ist also ein unerwünschter Abwärtsrahmen. Wir haben also diesen Anmelderahmen, Anmelderahmen und diesen Mainframe hier. Ich habe also diese Option, aber ich kann hier keine Änderungen vornehmen. Das ist sehr wichtig. Ich kann hier also keine Änderungen vornehmen , da ich hier keinen Überschuss habe. Und hier sehe ich diese Prototyping-Anmeldung, Abmeldung, und das ist unsere Homepage. Lass es mich im Vollbild zeigen. Und ich klicke drauf. Abmelden, Abmelden, Registrieren, Anmelden. Alles funktioniert voll funktionsfähig. Und habe kein Konto. Klicken Sie auf die Schaltfläche Sign Up. Melden Sie sich an. Habe schon ein Konto. Alles ist voll funktionsfähig, funktioniert. Nachdem Sie an der Fertigstellung Ihres Projekts gearbeitet haben, müssen Sie Ihre Datei mit den Teammitgliedern teilen. Vielleicht arbeitest du in einem Entwicklungsteam, dann folgt dein Teammitglied deinen Entwürfen zu diesem Link, okay, so kannst du deinen Link, deinen Projektlink, mit deinem Team teilen deinen Link, deinen Projektlink, Mitglieder oder andere Personen, die E-Mail-Zugriff gewähren möchten, geben Sie einfach die E-Mail ein und klicken Sie auf die Schaltfläche. diese Weise können Sie Ihr Projekt teilen. Und es gibt noch eine andere Sache. Wählen wir diesen hier aus, wenn ich möchte. Okay, hier siehst du also einen anderen namens Inspect. Im Inspect sehen Sie normalerweise das gesamte Design, das gesamte Layout, alle Beine, die Entfernung, das Verstecken und Weiß sowie den Farbcode , den Sie verwendet haben. Diese sind eine Art CSS-Eigenschaft. Ihr Teammitglied wird auch kommen und Hilfe von diesem holen. Sie müssen also nur eines inspizieren, zum Beispiel, wenn ich dieses auswähle, und hier kann ich sehen, dass das Weiß dieses bestimmten Rechtecks 493 Pixel hoch ist und einen Randcode mit einem Radius von dieses bestimmten Rechtecks 493 Pixel hoch ist oben links hat. Und das sind alle CSS-Eigenschaften. Ihre Teammitglieder können diesen Code also einfach kopieren und dann einfach in ihrer Web-App verwenden. So können Sie diesen überprüfen. In Ordnung? Das ist also der Vorteil von diesem. Hier sehen Sie im CSS-Code für diesen Artikel. Lassen Sie uns nun unser Design exportieren. Das ist also unser Rahmen. Klicken Sie nun auf das Design und unten sehen Sie die Exportoption. Klick es an. Und hier siehst du das Format, das du willst. Sie benötigen das PNG-Format, das JPEG-Format oder das Belegt-Format oder das PDF-Format. Wählen wir das JPEG-Format aus und klicken darauf. Hier. Sie können einfach angeben, wie viele Sie möchten. Also will ich nur einen und klicke auf diesen Export nach Hause. Und es wurde heruntergeladen. Lass mich darauf klicken. Und los geht's. Das ist unser Design. Jetzt können wir unser Design exportieren. Jetzt möchte ich exportieren, ich möchte, ich wollte auch diese Anmeldebasis exportieren. Ich wähle die Abmeldung aus. Klicken Sie auf diesen Export, klicken Sie auf JPEG. Und los geht's. Wir haben diese Anmeldepaare. So können wir exportieren. Wählen Sie nun diese Anmeldepaare aus und klicken Sie auf diesen Export. Klicken Sie auf dieses JPG und exportieren Sie eine Anmeldung. Wenn ich auf die Anmeldung klicke, dann geht's los. Wir haben dieses Schild paarweise. Sie haben also gelernt, wie man Anmeldung, Anmeldung und Home-Base exportiert . Auf diese Weise können Sie einfach jeden einzelnen Frame exportieren. Diese sind auch unabhängige Rahmen. Sie können also auch, wenn Sie möchten, diese kleinen exportieren lassen Sie mich eine für Sie exportieren. Klicken Sie darauf und der Download ist abgeschlossen. Das ist unser Rahmen. In Ordnung, das sind also die wenigen Dinge, die ich dir zeigen wollte. Also ich hoffe es hat dir gefallen.