Figma UI/UX - Gestalten einer vollständigen Web-App UI/UX. Lerne die beste Technik von Figma (Projektbasis)

1. Einführung: Willkommen zu diesem Figma-Kurs. Mein Name ist ja, tan h oder drei. Und ich werde dein Instruktor in diesem Kurs sein. In diesem Figma, dir AUX-Kurs, wirst du lernen, wie man eine Web-App entwirft, dir eine UX. Benutzen von Figma. Sie entwerfen dieses komplette Webprojekt. Sie werden verschiedene Arten von Tools und die Best Practice von CDMA lernen . Sie lernen, wie Sie Gruppen erstellen, Komponentenfarben erstellen, verschiedene Arten von Bloggen und dass Sie gerade Plug-In und vieles mehr gesehen haben. Dies ist das komplette Projekt, das Sie in diesem Kurs entwerfen werden. Lassen Sie mich Ihnen alle Funktionalitäten zeigen, all das Design, das ich in dieser Web-API hinzugefügt habe , wo Sie Eier haben. Oben haben wir also unsere Navigationsleiste, dann haben wir diesen Hauptheizbereich hier und dann unsere Immobilienkartenoptionen hier. Sie können sehen, dass jede einzelne Karte seit der gleichen Größe existiert. Und es sieht echt gut aus. Dann haben wir diese Paginierung mit einem anderen Icon und dann markieren diese Optionen ausgewählt. Danach haben wir einen About Abschnitt mit einer Art von Co-ops-Funktionen , die Sie in diesem Kurs lernen würden. Und dann haben wir diesen Feedback-Design-Bereich in dem wir in den Warenkorb gelegt haben, dann diesen Indikator und diese Schaltfläche Weiter und die vorherige Schaltfläche. Danach haben wir unser Substitutionssystem, und unten haben wir unseren Fußzeilenbereich. Während Sie diese App entwerfen, lernen Sie, wie verschiedene Arten von Plug-In hinzufügen, wie Sie das Symbol aus Plugin verwenden und es in Ihrem Projekt verwenden. Und danach lernen Sie, wie Sie eine neue App hinzufügen können. In einer F-Leiste sehen Sie unseren Einloggen- und Anmelde-Button. Wenn ich also auf „Anmelden“ klicke, bin ich jetzt im Anmeldegesicht. Und Sie merken auch, dass es zum Zeitpunkt des Prototypings eine kleine Animation gibt. Sie werden also lernen, wie Sie Prototyp in Ihrer Web-App mit Animationen, verschiedenen Prototyp-Funktionen und vielem mehr hinzufügen verschiedenen Prototyp-Funktionen können. Wenn ich jetzt auf diesen Text klicke, bereits ein Konto habe, dann schickst du mich einfach zur Anmeldeseite. Und Sie können hier eine kleine Animation sehen. Und wenn ich auf die Anmeldeseite klicke, gehe ich zur Homepage. Und jetzt kann ich auf diese Homepage zugreifen. Dieses Projekt wird mir also sehr helfen zu lernen, wie man eine Web-App mit Figma entwirft. Nachdem Sie die gesamte App entworfen und prototypisiert haben, lernen Sie auch, wie Sie Ihr Design exportieren, wie Sie Ihr Design exportieren und dann Ihre Datei mit anderen in den Teammitgliedern teilen , damit aus der ganzen Welt können auf Ihr Design zugreifen, können in einem Team arbeiten. Dies sind also die wenigen Teams, die von diesem Kurs lernen werden. Dieser Kurs wird Ihnen sehr helfen, ein guter Designer zu werden , weil ich versucht habe , den Best Practice, der besten Technik von Figma, zu folgen . Deshalb werde ich dich verstecken, dich dazu zu ermutigen , diesen Kurs anzumelden. Wir sehen uns in der Klasse. 2. Design: Willkommen zu dieser Vorlesung. In diesem Teil werden wir anfangen, an unserem Projekt zu arbeiten. In erster Linie müssen Sie sich also bei Figma anmelden. Sie können also sehen, dass ich mich gerade mit meinem Konto angemeldet habe. Wenn Sie Ihr Feedback zu Jahren noch nicht haben, können Sie sich einfach mit Ihrer E-Mail-Adresse anmelden. Und sobald Sie sich bei Ihrem Figma-Konto angemeldet haben, können Sie diese Art von Dashboard sehen, wenn Sie bereits zuvor an einem Projekt gearbeitet haben, dann sehen Sie möglicherweise diese Art von kürzlich einem Arbeitsprojekt. Aber sonst wirst du nur dieses Ding sehen können. Jetzt können wir hier oft als neue Ressentiments bezeichnet werden und dann neue Figma, Faker Gem-Datei und dann neue Eingabedatei. Für uns klicken wir zunächst auf eine neue Designdatei, da wir von Anfang an mit der Arbeit an unserem Projekt beginnen werden. Ich klicke darauf und dann öffnet es ein neues Projekt. Derzeit haben wir hier keine Art Board. Okay, das ist also das grundlegende Dashboard oder Figma. In der oberen Leiste, in der Symbolleiste, haben wir alle Tools, die in Figma nivellieren können. Und dann haben wir diese Frame-Option. Also müssen wir zuerst einen Frame hinzufügen. Also klicke ich auf den Rahmen und wir arbeiten an einem Web. Sie können sehen, dass es ein paar Optionen gibt. Die Displaygröße des Telefons. Wenn Sie für Telefon, Telefon FU, eine Benutzeroberfläche für mobile Apps arbeiten , können Sie eine davon auswählen. Aber für uns werden wir unsere Web-Apps entwerfen. Ich klicke auf den Deckstopp. Und in der Deckstopp können Sie diese Art von Ansicht sehen. Also wähle ich den Index 121440 um zehn bis vier aus. Dann gibt es uns ein Kunstbrett. Okay? Das ist also unsere Hauptleistung. Jetzt haben wir unsere Kunsttafel und hier müssen wir unsere App entwerfen. Also werden wir in dieser Art von Design in diesem Kurs erreichen. Wenn wir also unsere Navigationsleiste haben, werden wir E-Mails haben, diese Dinge. Und dann haben wir unsere Immobilienliste, dann die Paginierung und unsere Abonnementoption. Mehr oder weniger werden wir versuchen, diese Art von Design zu erreichen. Und wir müssen auch eine Abmeldung entwerfen und unserer Anwendung im Tempo zuweisen. Lasst uns also anfangen, daran zu arbeiten. So schnell haben wir unseren nächsten Teil. Wie können wir unseren Helfer hinzufügen? Fügen Sie also unsere Navigationsleiste hinzu, die wir erstellen werden Wir werden die Hilfe dieses Rechteck-Tools in Anspruch nehmen. Und ich zeichne oben ein Rechteck. Und los geht's. Ich zeichne hier ein Rechteck. Und wenn ich mir dieses Bild hier ansehe, können wir sehen, dass es sich um eine weiße Farbe handelt, Hintergründe, also werde ich die Farbe ändern. Sobald Sie also Ihre Navigationsleiste ausgewählt haben, haben Sie die Möglichkeit, diese Hintergrundfarbe hinzuzufügen, auf die Füllung zu klicken und dann haben Sie die Möglichkeit, die weiße Farbe auszuwählen. Und jetzt verstehen wir nichts , weil unser Hintergrund auch breit ist. Was kann ich hier machen? Ich möchte hinzufügen, ich möchte unseren Effekt hier hinzufügen. Wenn du also auf den Effekt klickst, wird es uns unseren Schlagschatten geben. Also gibt es hier ein paar Schatten, wenn du willst, du kannst einfach damit herumspielen. Es wird dir inneren Schatten geben. Dann wird er uns Schatten von innen geben. Aber wir müssen hier einen Schlagschatten haben. Und jetzt lass mich die App ausführen , damit wir sehen können, dass sich unser Leben verändert. Wenn wir irgendwelche Änderungen vornehmen. Wenn ich auf die Schaltfläche Ausführen klicke, öffnet sich hier ein neuer Tab. Und los geht's. Wir können sehen, dass dies unsere Nav-Bar ist. Jetzt müssen wir hier einen Text und dann unseren Menüpunkt hinzufügen. So können wir einfach die Hilfe dieses Text-Tools in Anspruch nehmen auf den Text klicken. Und hier drin schreibe ich eine SMS namens „Home suchen“. Cool. Jetzt müssen wir die Schriftgröße hier ändern. Das ist also das Formular standardmäßig 12., aber ich wähle 44, dieses aus. Und wenn Sie etwas aufteilen möchten, müssen Sie auf diesen Film klicken, um eine Option auswählen und dann per Drag & Drop ziehen zu können. Und los geht's. Wir haben dieses Zuhause jetzt hier, aber es ist viel zu viel größer. Also wähle ich aus, Add es zu. Und dann würde ich von hier aus gerne verschiedene Arten von Design hinzufügen , da ich eine Art von normaler Farbe mit Medium auswählen werde. Und dann können wir hier einfach verschiedene Arten von Texten auswählen. Ich meine, font-Familienname, das ist standardmäßig hier. Das wird nicht gut aussehen. Ich wähle einen anderen aus. Okay, also sah es so aus. Es sieht also so aus. Und vielleicht das hier, nicht diese. Und es macht keine Chance. Und wir können dieses geben oder wir können versuchen, eine andere hinzuzufügen. Okay, also sieht es gut aus. Ich denke, wir können noch ein paar Optionen ausprobieren und es ändert sich nicht. Okay, also sieht es gut aus. Ich mag das und dann werde ich die Farbe dieses ändern. So können wir diese Standardfarbe für diese hinzufügen. Okay, jetzt haben wir diese Option und dann müssen wir unser Jetzt für Artikel hinzufügen , also haben wir vier Artikel hier, Hauseigentum, neue Listen, Anmeldung und Anmeldung. Also klicke ich auf das Text-Tool. Und von hier aus fange ich an, diesen hinzuzufügen. Also können wir hier noch etwas tun , nämlich dass wir immer tun müssen, also klicke ich auf diese. Und hier können wir unser Rastersystem hinzufügen. Wie können wir unser Rastersystem hinzufügen? Also wähle ich den Rahmen aus. Und sobald ich den Rahmen auswähle, gibt es die Option Layout-Grids. Wenn Sie auf dieses klicken, wird ein Rastersystem für uns hinzugefügt. Jetzt sieht es so aus, aber auf jeden Fall können wir es ändern. Jetzt können wir anstelle von Größe zehn 60 hinzufügen. Dann wird es so aussehen. Und wir können auch auswählen, wenn wir nur eine Spalte benötigen, dann wird nur eine Spalte hinzugefügt. Aber wenn Sie Spalte und Zeile benötigen, und dann können wir es auch, vielleicht brauchen wir drei Spalten. Sie können auch die Spalte fünf zählen. Dann kann ich statt 20 fünf auswählen, oder vielleicht kann ich zwei auswählen. Das ist also der Platz darin, großartig, aber wir brauchen Spalte und Zeile. Wir brauchen auf diese Weise Gitter. Wir können das behalten und es sieht gut aus. Jetzt können wir unseren Text hier hinzufügen. Also fange ich zuerst von hier aus an. Also kann ich zu Hause sagen. Und jetzt müssen wir unsere Schriftgröße ändern , da wir keine 32 haben müssen. Also können wir hier hinzufügen. Ich denke, wir können hier 16 hinzufügen, und wir können es auch in unserer Echtzeit-Live-Ansicht testen. Es sieht also gut aus. Also können wir bei 16 bleiben. Jetzt habe ich das hinzugefügt. Jetzt muss ich also nicht immer wieder hier klicken . Was kann ich tun? Ich kann drücken, ich kann diesen Text auswählen und dann kann ich Strg D drücken, um ein Duplikat zu erstellen. Und Sie können sehen, dass wir hier zwei Artikel haben. Jetzt kann ich diesen hier ziehen und dann kann ich einfach den Textnamen ändern. Ich kann einfach sagen, dass ich Eigentum sagen kann. Und was haben wir hier? Wir haben unseren Namen, unsere Immobilie, eine neue Liste. Und dann dupliziere ich es. Und dann addiere ich die Immobilie. Ich füge eine neue Liste hinzu, eine neue Liste. Und dann haben wir unsere Abmeldung, wir haben unsere Anmeldeoption, aber für die Anmeldung haben wir diesen Hintergrund. Also werde ich Hilfe von diesem Rechteckwerkzeug London in Anspruch nehmen. Ich zeichne dieses Rechteck hier. Und ich muss einen Randradius für dieses Rechteck hinzufügen. Um einen Randradius hinzuzufügen, muss ich ihn hier hinzufügen. Ich wähle 20 aus und ändere dann die Hintergrundfarbe in diese Farbe. Und ich muss es anpassen. Sie können 18 von jedem Artikel sehen , den wir auf Distanz gehalten haben. Also behalte ich das hier. Und dann lass mich versuchen, wie es hier aussieht, also sieht es gut aus. Und was kann ich dann tun? Ich kann hier Text hinzufügen. Ich kann einfach Sign In sagen. Und dann kann ich von hier aus einfach diesen hier und im Zentrum hinzufügen. Und wir haben noch einen. Ich mache ein Duplikat. Und dieser wird unser sein, dieser wird unsere Anmeldung sein. Dieser wird also unsere Anmeldung sein. Melden Sie sich an. Okay, also okay, cool. Es sieht echt toll aus. Jetzt kann ich eins machen. Also das, dieser Text und dieser Hintergrund, ich sollte Mekka wachsen, denn wenn wir Prototypen machen, müssen wir ihn nicht groove machen. Wenn wir also Prototypen machen, damit Benutzer auf einen dieser Bereiche klickt, den Prototyp anzeigen können. Also mache ich es zur Gruppe. Um es zu einer Gruppe zu machen, muss ich Steuerelement Z auf meiner Tastatur drücken oder Sie können mit der rechten Maustaste klicken. Und dann kannst du auch sagen, wo du auch darauf klicken kannst. Man kann Gruppe sagen. Jetzt ist die R-Gruppe da. Und wir können einfach den Gruppennamen hier umbenennen oder Control R. Ich kann Sign In, button sagen. Cool. Es sieht jetzt gut aus. Und OK, also ist alles in Ordnung. Eine Sache, die ich dir jetzt zeigen möchte , also lass uns jetzt eine Gruppe machen. Also diese Schaltfläche, diese neue Liste Eigenschaften Sinus von zu Hause und endliche Zeit, ich drücke den Befehl, um nur diesen Gegenstand zu finden. Und ich drücke Command Z. Und jetzt kann ich das Ganze einfach ein bisschen ziehen, wenn ich will. Also muss ich das Ding nicht machen. Und wenn ich, selbst wenn ich will, kann ich das Weiß von diesem erhöhen und auf diese Weise wird alles automatisch die Brust hinzufügen. Selbst wenn ich will, sagen wir mal, ich möchte das ändern, sagen wir, ich möchte die Schriftgröße ändern. Angenommen, ich möchte die Schriftgröße dieses Elements ändern. Nehmen wir an, ich möchte die Schriftgröße dieses hier ändern . Dann kann ich es auch von hier aus ändern. Und auf diese Weise können wir es einfach ändern. Dann wähle das aus, und dann kann ich einfach 16 zu 20 ändern, dann wird es größer. Aber ich muss 16 hier haben. Also sieht es jetzt richtig gut aus. Perfekt. Also haben wir endlich unsere Navigationsleiste hinzugefügt. Ich denke, wir müssen nur dieses ein bisschen hinzufügen , da die Texte etwas kleiner geworden sind, weil wir die Größe vergrößern. Jetzt sieht es echt gut aus. Also haben wir unser Zeichen erfolgreich hinzugefügt. Wir haben unsere Navigationsleiste hinzugefügt. Und im nächsten Teil werden wir lernen, wie man diesen Startbildschirm hinzufügt. Also werde ich dieses Video hier beenden und wir sehen uns in der nächsten Vorlesung. Tschüss. 3. Titelbild und Kartendesign zu Hause: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, diese Homepage und dieses Design hinzuzufügen. Um dies zu tun, zeichne ich in erster Linie unser Rechteck hier. Also wähle dieses Rechteck und von hier aus oder vielleicht von hier aus. Von der Mitte aus zeichne ich hier ein Rechteck, diesen Teil dazu. Die Höhe wird also ein bisschen größer sein, glaube ich. Okay, lass mich nachsehen, wie es hier aussieht. Es sieht also aus wie diese Größe eines Bildschirms. Und ich denke, es ist in Ordnung, die Größe des Bildschirms zu haben. Und vielleicht kann ich es ein bisschen nach unten ziehen. Okay, jetzt können wir unser Bild einfach aus der Datei ziehen. Also habe ich dieses EMS bereits heruntergeladen. Also lass mich versuchen, was für ein Chaos ich hier benutzt habe. Also habe ich in diesem hier benutzt. Also habe ich bei diesem Bild benutzt. Ich denke das hier, nicht diesen. Ich habe es in diesem benutzt. Also lass es mich hierher ziehen und dann lass es hier fallen. Und wenn Sie dann auf die rechte Seite klicken, wird diese hinzugefügt. Wenn Sie das also so machen, wird am Anfang automatisch die volle Größe des Bildes angezeigt . Dies ist also nicht der beste Ansatz. Also entferne ich das hier. Aber figma hat diese Option, also bitte mail-Option. Okay, was können wir also tun? Ich wähle das hier aus und gehe dann hier in mein Verzeichnis. Und wenn ich dann darauf klicke und dann sagen wir, ich möchte dieses Bild hier hinzufügen und es dann öffnen. Es wird hier nicht auftauchen. Wenn ich mit der rechten Maustaste klicke, wenn ich es jetzt mache, können Sie sehen, ob ich mit der Maus schwebe, ich kann dieses Bild jetzt sehen, wenn ich klicke und mit der rechten Maustaste klicke. Wenn ich jetzt ganz links auf meine Maus klicke, wird es dieses Bild hier hinzufügen. Cool. Jetzt können wir in diesem Bild auf dem sehen, oben auf den E-Mails haben wir ein weiteres Rechteck. Also werde ich dieses Rechteck hier drüben zeichnen, wird eine weiße Farbe haben. Rechtecke so schnell, dass ich hier ein bisschen Randradius hinzufügen werde, vielleicht fünf Pixel. Und dann füge ich das hier hinzu. Und ich kann das Ding sehen. Mal sehen, was wir sonst noch hier haben. Wir haben einen Knopf und wir haben hier einen Text. Also füge ich hier Text hinzu. Ich klicke auf diesen und schreibe dann den Text hier. Ich kann sagen, finde dein Traumhaus. Cool. Also kann ich, oh, okay, also können wir die Schriftgröße schnell erhöhen. Also brauchen wir vielleicht 40. Und ich füge es auf diese Weise hinzu. Und jetzt sieht es gut aus, aber wir können es immer noch auf diese Weise anpassen. Und dann können wir minimieren, wir können die Schriftgröße auf 36 reduzieren, oder es sieht gut aus, aber wir können die Farbe ändern und wir können ein wenig Design des Textes hinzufügen damit wir verschiedene auswählen können Arten von Texten. Font-Familie. Es sieht gut aus. Ich gehe zum Zufall oder zur Farbe von diesem. Vielleicht verwende ich diese Farbe nur eine zufällige Farbe. Aber wenn Sie Ihre Lieblingsfarbe haben oder eine ausgewählte Farbe haben, können Sie diese hier definitiv verwenden. Und danach zeichne ich unser Rechteck. Wie kann man also ein Rechteck machen? Klicken Sie auf das Rechteckwerkzeug. Und dann zeichne ich dieses Rechteck auf diese Weise. Und ich muss hier den Grenzradius hinzufügen. Klicken Sie also auf diesen Randradius. Und dann ändere ich die Hintergrundfarbe dieser Farbe . Nicht das hier. Vielleicht eine andere Farbe oder etwas in der Nähe zu lesen. Vielleicht diese rote Farbe. Und hier schreibe ich eine SMS. Ich kann sagen, reservieren Sie Ihren Termin. Also kann ich mich hier einfach nicht anpassen , weil die Schriftgröße viel zu groß ist. Also wähle ich 16 aus, und dann sollte alles funktionieren. Und lass es mich versuchen. Warum haben wir oder wir können einfach einen Termin buchen, anstatt Ihren Termin zu vereinbaren, da es etwas mehr Platz benötigt. Und jetzt kann ich das sagen. Es sieht also so gut aus. Kein Problem damit. Mir hat es gefallen und hier ist bisher alles in Ordnung. Und ich wollte dir noch eine Sache zeigen. Wenn Sie also hier einen Rahmen hinzufügen möchten, wie können Sie das tun? Also kannst du es auf jeden Fall schaffen. Es gibt eine Option namens Strich, und wenn Sie auf den Strich klicken, wird der Rahmen hinzugefügt. Und Sie können die Rahmenfarbe auch in eine andere Farbe ändern . Und Sie können auch die Rahmengröße ändern. Vielleicht willst du eine größere Größe von Boehner haben. Dann können Sie aus diesem Modell wählen. Und wenn du dann herkommst, können wir diese Grenze hier sehen. Und selbst Sie können hier auch den Rahmenstil auswählen. Man kann also draußen zentrieren. Und wenn Sie diese oder eine andere Art von Rahmen wünschen, können Sie auch anstelle von Solid sehen, vielleicht benötigen Sie im Dashboard und dann können Sie auch sehen, dass diese Indels hier häufig APR verwenden. Es gibt also ein paar Optionen, die Sie basierend auf Ihren Anforderungen anwenden können. Aber im Moment brauche ich diese Grenze nicht. Ich deaktiviere es. Wenn Sie auf die Option i klicken, wird es deaktiviert und dann wird sie auch auf diese Weise aktiviert. Wenn du also hier klickst, wird es die Wand machen. Wenn du hier klickst, geht er ins Intervall. Wenn ich jetzt herkomme, sieht alles gut aus. Aber ich würde hier gerne ein bisschen linearen Gradienten hinzufügen . Wenn ich also auf dieses Linear klicke , werde ich versuchen, es auf diese Weise hinzuzufügen. Oder so sieht es richtig gut aus. Jetzt komme ich es ein bisschen näher. Los geht's. Wir können hier immer noch ein bisschen Schatten sehen . Aber es gibt noch ein paar andere Möglichkeiten. Vielleicht kannst du diesen eckigen Koch probieren. Dann wird es so aussehen. Und vielleicht hast du einen Diamantkoch und dann wird es so aussehen. Und vielleicht haben Sie eine radiale Form wird so aussehen. Damit kannst du also herumspielen. Also wähle ich einfach das lineare aus. Und dann kann ich das einfach hier behalten. Okay, ich werde dieses Video genau hier beenden und wir werden unseren Teil in der nächsten Vorlesung gestalten. Wir sehen uns in der nächsten Vorlesung. Tschüss. 4. Property: Willkommen wieder einmal zurück. In diesem Teil werden wir anfangen, daran zu arbeiten, an diesem Kartensystem, das wir für unser Eigentum haben. Okay, um es zu tun, wie kann ich das machen? Was können wir also tun? In erster Linie müssen wir unsere Größe des Rahmens vergrößern. Also wähle ich den Rahmen aus. Und dann unten, dann ziehe ich einfach ein bisschen, vielleicht das. Okay? Und danach müssen wir es tun, jetzt haben wir diesen Blick. Okay, wir haben diese Navigationsleiste, wir haben diese Schleife. Jetzt fügen wir diese Karte hinzu. Um also eine Karte hinzuzufügen, füge ich in erster Linie dieses Rechteck hinzu. Nehmen wir an, wir fangen bei 123 an und diesem Baum, okay, wir werden damit anfangen oder vielleicht von hier aus. Fangen wir von hier aus an. Das ist also das Schöne, dieses Gittersystem zu verwenden , damit wir für jeden einzelnen Gegenstand leicht verstehen können. Also fangen wir von dort aus an, und dann bekomme ich das vielleicht von hier aus schnell und später werden wir es tun. In Ordnung, eine Sache, die auffällt, ist, dass wir für jeden einzelnen Artikel, den wir normalerweise in unserer Webanwendung haben, ein ähnliches Design haben. Dafür werden wir zuerst diesen ganzen Teil nur einmal machen, und dann werden wir sie gruppieren und dann können wir ihn einfach duplizieren. Auf diese Weise. Wir werden dann nicht immer wieder dasselbe tun müssen . Und das ist der beste Ansatz. Also musst du meistens auf diese Weise arbeiten. Wenn Sie zum Beispiel einen 100-Datenartikel in einem Einkaufswagen und dann zeigen , werden wir diese 100 Karten definitiv nicht separat machen . Wenn es genau so aussieht, verdienen Sie eines, dann müssen Sie nur ein Duplikat erstellen. Okay, jetzt haben wir zuerst unsere E-Mails an der Spitze. Also um ein Chaos hinzuzufügen. Also gehe ich auf eine andere Karte für das EMS, ein weiteres Rechteck hier oben drauf. Also können wir diese Karte einfach aus dieser Zeile hinzufügen. Und dann wird diese Karte unser weggeworfenes enthalten, hauptsächlich unser Bild halten. Jetzt füge ich das Bild schnell hinzu. Von hier aus klicke ich auf diesen Ort. Und dann wähle ich dieses Bild aus. Und es wird hier sehen, es dauert einige Zeit. Und sobald ich diesen habe, kann ich den Mauszeiger über und ich kann dieses Bild sehen. Jetzt klicke auf die Maus und du hast dieses Bild bekommen. Ich werde ein bisschen einen Randradius von fünf Pixeln auch für den Hauptwagen hinzufügen und dass wir haben, werde ich einen Randradius hinzufügen, fünf Pixel. Ok, jetzt haben wir dieses EMS und wir haben diesen Wagen. Cool, es sieht echt gut aus. Jetzt schnell. Wir müssen hier einen Schatten hinzufügen. Also um den Effekt hier im Hauptwagen hinzuzufügen , nicht das Rechteck. Das Rechteck sechs, das ist unsere Hauptkarte, nicht die EMS-Karte. Okay. Unsere MS-Herzrechtecke sechs Stunden. Dieses ist ein Rechteck. Eine Sache, die Sie auch tun können , ist , dass Sie einfach den Namen der Zone ändern können , damit Sie verstehen können, was Sie tun. Wir können einfach E-Mails Rechteck, Rechteck sagen , was auch immer es ist. So werden wir auf diese Weise wirklich verstehen können und wir können, und diesen können wir einfach Hauptwagen sagen. Wir können die Hauptkarte sagen, okay, diese, und auf diese Weise können Sie sich sehr leicht identifizieren. Jetzt füge ich hier einen Effekt hinzu, wird uns hier einen Schatten geben. Und wieder kannst du mit dem Schatten spielen, du kannst verschiedene Arten von Schatten hinzufügen. Du kannst so viele Dinge mit diesem machen , von dem wir zur Seite gesagt haben, vielleicht willst du verwischen, vielleicht willst du einen Block Acht machen. Dann wird er so aussehen. Es wird dir eine etwas verschwommenere Option auf der Unterseite geben. Okay, cool. Jetzt müssen wir die Hintergrundfarbe dieser Farbe ändern. Also füge ich diese Paragonfarbe hinzu. Und es sieht so aus. Jetzt haben wir unseren, unseren Preis, unseren Standort und unseren Button hier. Also werde ich diesen Preis hier schnell hinzufügen. Also klicke ich auf diese T-Technologie. Und von hier aus beginne ich mit diesem Preis. Vielleicht können wir es sagen und dann nur einen zufälligen Text. Und ich werde die Farbe dieses ändern. Vielleicht dieses helle oder grüne Licht, diese helle Farbe. Es sieht nicht gut aus. Wir können uns für einen anderen entscheiden. Ja, es sieht gut aus. Und jetzt können wir es vielleicht ein bisschen näher an dieses Bild ziehen. Und dann kann ich hinzufügen, okay, also um diesen anzupassen, was kann ich hier tun? Hauptsächlich sieht man, dass unsere Rastergröße wirklich größer ist. Das ist also der Grund , dass wir es nicht verstehen können . Was kann ich also tun? Ich kann einfach nur das Raster hinzufügen. Klicken Sie also auf das Rastersystem. Anstelle von Größe 16 kann ich also 40 hinzufügen. Okay, jetzt bekomme ich eine kleine Gittergröße. So kann ich leicht vom Flüstern aus verstehen , dass ich noch nicht angefangen habe. In diesem Text. Stattdessen können wir den Text auch hier umbenennen. Man kann einfach Preisgold sagen. Jetzt kann ich ein Duplikat erstellen, also drücke Befehl D, dann kann ich von derselben Zeile aus beginnen. Ich hoffe, Sie verstehen das, warum ich diese kleine Rastergröße hinzugefügt habe. Wir können sehen, dass wir von dieser Linie ausgehen, diese Linie können Sie sehen. Und ich kann ein bisschen mehr Platz nehmen. Und dann kann ich einfach den Namen dieses ändern. Ich kann einfach sagen, dass der Standort hier sein wird. Also Lage, man kann London sagen. Wir können sagen, der Standort ist London. Und auf jeden Fall, wenn Sie möchten, können Sie einfach die Farbe dieses ändern. Also hätte ich gerne eine andere Farbe für diese . Vielleicht diese Farbe. Und vielleicht würde ich gerne eine andere Schriftfamilie für den Text hinzufügen . Cool. Vielleicht das hier. Ja, wir können es schaffen. Und jetzt können wir ein Rechteck für die Buchungsschaltfläche hinzufügen. Also starte ich diesen Buchungs-Button von hier nach hier. Stellen Sie es wieder von der Mitte an und ich denke nicht von dort aus. Wir können es anpassen. Wir können es aus diesem Teil hinzufügen. Wir können es von hier aus hinzufügen. Ja, ich glaube, wir können es auf diese Weise schaffen. Wir können mich sehen lassen, wie es aussieht. Es sieht gut aus, aber wir können zuerst die Hintergrundfarbe ändern. Und um diesen hinzuzufügen, wähle ich diese Hintergrundfarbe und füge den Randradius 20 hinzu. Und jetzt können wir hier einen Text hinzufügen. Wir können jetzt buchen sagen. Und das ist der Buch-Now-Button , den wir gerade entworfen haben. Es ist nicht im Zentrum. Cooles Rot, sieht jetzt richtig gut aus. Und jetzt können wir diese Karte duplizieren und es tun. Ich kann also Rechteck sagen, dieses Rechteck sechs ist unser Buch. Jetzt. Knopf. So schnell, was können wir tun? Wir können sie in Gruppen herstellen. Also dieses Buch jetzt und dieser Buch-Button ist zusammen. Also werden wir sie zu einer Gruppe machen, indem wir Befehl G drücken, und dann können wir sagen, was können wir sagen? Wir können sie umbenennen und wir können sagen, dass die Schaltfläche „Buch“ aufgerufen wird, wir haben die Gruppierung aufheben. Jetzt haben wir diesen Gruppenbuch-Button. Und dann sind das die Hauptkarte, dieser Preis und dieser Preis. Wir können es also in diesen Text ändern. Wir können einfach Location sagen, weil das in Ordnung ist, also denke ich, dass wir es anders gemacht haben. Okay. Also lass es mich rückgängig machen. Okay, also sollte dieser Ort sein. Also füge ich hier einen Standort hinzu. Rechteck fünf, Rechteck fünf ist also nicht dieses. Also dieser Buchtermin. Also sehen wir diesen Buchtermin, diesen Buch-Button hier und dann dieses Bild, dann den Standort als der Preis, dann den Hauptwagen. Aber es gibt einen anderen Text , der als Buchtermin bezeichnet wird. Dieser Buchtermin ist also dieser Button hier, dieser Text. Okay. Das sind also die Hauptsache, die diese Karte enthält. Also mache ich sie zusammen zu einer Gruppe. Also drücke ich Befehl Z und wir können sagen, wir können es umbenennen, wir können eine Masseneigenschaft sagen, Hauptziele der Karten. Also jetzt hält dieses Ding unser ganzes System zusammen, wir können Jockey zusammensetzen. Wir können es überall hinstellen, wo wir wollen. Also haben wir diese Dinge. Ich drücke Command D, dann drücke ich das Ding hier. Und vielleicht so. Und dann können wir vielleicht noch einmal drücken und dann wird es, sobald Sie dupliziert wurden, es für ein paar Mal automatisch für Sie anpassen . Jetzt kann ich es auf diese Weise anpassen. Vielleicht fangen wir mit diesen beiden an und dann können wir es so machen. Jetzt, wenn wir Drag & Drop ziehen, können wir sehen, dass wir immer noch diese 20 mal 20 haben. Und dann haben wir diese 2020-Karte. Von jedem einzelnen Gegenstand halten wir 20 mal 20 Distanz ein. Okay, jetzt lass mich sehen, wie es cool aussieht. Es sieht echt nett aus. Von beiden Seiten sieht es also richtig gut aus. Wir haben das gleiche Design. Eine andere Sache, die wir jetzt tun können, wir können dies wieder für Artikel in einer Gruppe machen weil wir unten einen weiteren Gegenstand für diesen benötigen , oder? Wie können wir das machen? Wir können sie gruppieren, gruppieren, gruppieren. Dann drücke ich erneut Command G. Und hier kann ich das einfach umbenennen und ich kann sagen, also wenn ich dieses umbenenne und ich werde es sagen. Wache Artikel in erster Reihe. Cool. Was kann ich jetzt tun, da all diese in einer Gruppe sind? Ich kann sie einfach bewegen und dann kann ich es einfach auf diese Weise anpassen. Ich kann sie auf diese Weise anpassen. Jetzt denke ich, dass wir von beiden Seiten haben, von dieser Seite haben wir den gleichen Raum, und von dieser Seite haben wir den gleichen Raum. Okay, cool, es sieht echt gut aus. So können Sie Ihre Datei also organisieren. Sie können Ihr Dokument anordnen, jede Art von Design , das Sie gerade machen. Du kannst es einfach machen. Du kannst dieser Technik einfach folgen und dann kannst du es definitiv tun. Was kann ich tun? Ich kann, bevor ich sie dupliziere, denke ich, dass ich meine Hauptrahmengröße und die Mainframe-Höhe erhöhen muss . Also werde ich es auf diese Weise erhöhen. Lass es uns auf diese Weise hinzufügen. Und was kann ich jetzt tun? Ich kann dieses einfach auswählen. Ich mache ein doppeltes Kommando D, also drücke ich, ich werde es hier nur unten auf dieses Element legen , vielleicht eine Zeile. Und genau das Gleiche wie in dieser Position. Dann drücke ich erneut Command D und es wird noch einen hinzufügen. Jetzt. Mal sehen, wie es hier aussieht. Es sieht echt nett aus. Jetzt haben wir diese drei gut aussehenden Designs , die mir sehr gut gefallen haben. Cool. Also haben wir in diesem Teil etwas wirklich Einzigartiges entworfen. Und ich werde dieses Video gleich hier beenden. Und wir werden mit der nächsten Vorlesung fortfahren. Wir werden versuchen, ein paar weitere Dinge zu beheben und in der nächsten Vorlesung einige weitere Funktionen in diesem Projekt hinzuzufügen . Wir sehen uns in der nächsten Vorlesung. Tschüss. 5. Pagination: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unserem Bewerber in unserer Web-App ein wenig Paginierung hinzuzufügen unserem Bewerber in unserer Web-App ein wenig Paginierung . Man sieht also, dass dieser richtig gut aussieht, wirklich nett. Kein Problem damit. Aber hier füge ich zuerst unsere Paginierung hinzu. Also um eine Paginierung hinzuzufügen. Also werden wir versuchen, diese Art von Paginierung hier hinzuzufügen , ähnlich dieser. Nicht das hier. Aber nur zur Grundidee werden wir diese Art von Paginierung hier ergänzen. Um zuerst eine Paginierung hinzuzufügen, füge ich hier ein Rechteck hinzu. Und ich fange an, dieses Rechteck zu entwerfen. Dieses Rechteck genau von dieser Seite, so dass es genau dem gleichen entspricht. Und von hier aus stimmt es genauso überein. Okay, also wenn es mit derselben Zeile übereinstimmt, können Sie diese Art von Zeile sehen. Es bedeutet, dass wir in derselben Linie sind oder wir uns in derselben Linie befinden. Okay? Wir haben genau das Gleiche hier. Und dann cool. Jetzt haben wir dieses Design und wir können versuchen, eine andere Farbe für unsere Paginierung hinzuzufügen . Oder vielleicht können wir es in dieser Farbe versuchen und cool. So können wir definitiv unseren Boden, unseren Grenzradius, hinzufügen. Nehmen wir an, fügen Sie den Randradius fünf hinzu. Und jetzt werden wir hier drüben unsere Paginierung hinzufügen. Wie können wir unsere Paginierung hinzufügen? Um unsere Paginierungsnummer hinzuzufügen? Wir werden einen Kreis zeichnen. Also klicke ich hier auf dieses Ellipsen-Tool. Beginnen wir einfach von hier aus mit der Paginierung. Und damit es genau kreist, müssen wir sicherstellen, dass Breite und Höhe gleich sind. Okay, also haben wir Y 28, dann haben wir High 28. Und dann, und dann wird es genau ein Kreis aussehen. Es wird genau im Kreis aussehen. Und wir können es auch ein bisschen größer machen und es dann 38 mal 38 machen. Und diese und diese Größe haben wir diese und wir können eine Hintergrundfarbe für diese hinzufügen. Dies ist also die Hintergrundfarbe unserer Vegetation. Und eine andere Sache, die wir tun können, ist mit dieser Paginierung, wir können einen Rahmen hinzufügen. Lass mich sehen, wie es damit aussieht. Okay, also müssen wir eine etwas größere Größe der Grenze hinzufügen . Also dieses, und das wird nicht gut aussehen , weil wir bereits eine farbige Hintergrundfarbe haben, also müssen wir sie weiß machen und verschiedene Farben haben , damit wir diese sehen können. Also werde ich die Grenzgröße auf fünf erhöhen. Jetzt können wir es verstehen. Aber wir brauchen kein HIV, ich denke zum Guten, oder vielleicht drei, zum Guten. Und versuchen wir, eine andere Hintergrundfarbe für diesen Grenzradius und wie er aussieht hinzuzufügen . Okay, es sieht nicht gut aus, also denke ich, dass wir hier keine Rahmenfarbe hinzufügen müssen , weil wir diese Hintergrundfarbe bereits haben. Der Grund dafür, dass diese Hintergrundfarbe und hier angepasst wird. Jetzt müssen wir hinzufügen, wir müssen hier noch ein paar Dinge entwerfen. Das erste wird also unsere Nummer sein. Okay, also fangen wir damit an, hier einen Text hinzuzufügen. Diese Ellipse wird also unsere Paginierung sein , unsere Paginierungsnummer. Und dann füge ich einen Text zu dieser Paginierung hinzu. Und wir müssen, okay, also lasst mich zuerst diesen Text hier anpassen. Okay, lass mich hier Draw by the schnellere hinzufügen. Wenn ich den hier schreibe, kann ich es einfach in die Mitte legen. Und für diese Paginierung brauchen wir diese Schriftgröße nicht , da sie anders aussehen wird. Und deshalb werde ich lieber den regulären wählen. Vielleicht können wir uns auch für diesen entscheiden. Also wo ist der normale? Und das wird es standardmäßig haben. Wenn ich also irgendwo in unserem regulären Rekursiv hier nicht das normale bekomme, es ist irgendwo, es sollte regelmäßig sein. Der Text wird auf diese Weise geschrieben. Oder es ist schwer keine Ahnung davon. Also können wir einfach das hinzufügen, dann wird es nicht so aussehen. Wir können hier einfach anfangen zu setzen. So kommt es also nicht. Das können wir. Was ist mit dem hier? Ich glaube, wir können es hier anfangen. Nichts kommt damit. Es ist also nichts. Okay. Also denke ich, dass wir diese regulären hier haben. Dies ist das reguläre oder Sie können es selbst auswählen oder Sie können eine andere Option wählen. Ich glaube, wir haben es nicht verstanden, aber wir haben etwas anderes als dieses hier. Cool. Wir haben diese Option momentan hier. Also gehe ich zu diesem hier. Dieser Textstil ist hier nicht nur wendig weil wir diesen zuvor verwendet haben. Es gibt einen Grund, warum wir diese Option hier haben. Also können wir hier einen neuen Text auswählen. Und von hier nach hier. Und vielleicht das hier. Okay, also ist es ziemlich größere. Also kann ich das hier geben und ich kann es in den Mittelpunkt stellen. Lasst uns sehen, wie es aussieht. Es sieht so aus. Wieder denke ich, dass es jetzt im Mittelpunkt steht. Oh, genau. Es ist nicht in der Mitte, also müssen wir es in die Mitte stellen. Okay, also gibt es ziemlich Zentrum. Jetzt mache ich es zu einer Gruppe, damit wir die Basisnummer, diese Nummer sagen können. Also diese Zahl und diese Paginierung werden wir sie zusammen zu einer Gruppe machen. Und wir können sagen, wir können sagen, dass Paginierung Artikel erhalten, wir können sagen, pg Nation Item ist Item, cool. Und dann mache ich ein Duplikat. Ich lege es hier hin. Jetzt. Lass mich versuchen, wie es aussieht. Es sieht gut aus. Was kann ich also tun? Ich kann einfach duplizieren und duplizieren und duplizieren und duplizieren. Ich glaube. Kein Problem damit. So kann ich jetzt diese Anzahl von Duplikaten haben. Bevor ich also etwas anderes schnell mache, werde ich sie zu einer Gruppe machen, alle Paginierungsgegenstände, so dass ich es kann, wenn ich erneut hinzufügen und aussaaten muss oder wenn ich es woanders hinlegen es erneut hinzufügen und aussaaten muss oder wenn ich es woanders hinlegen muss einfach tun, dass ich es schaffen werde zu wachsen. Und ich werde es sagen, Paginierung Items, ich werde Phantasie sagen, Origination. Okay, cool. Was kann ich für jeden einzelnen Artikel tun? Ich kann Änderungen vornehmen? wir zum Beispiel hinzu, dass dieser zwei ist. Ich entferne diesen und füge hier zwei hinzu. Und weil der erste Icon in der Lage sein wird. Also werde ich diese erste 1 entfernen, und ich werde das entfernen, das letzte von hier entfernen, denn hier werden wir ein nächstes Button-Symbol hinzufügen . Wie kann man das machen? Ich habe R installiert, ein Plugin namens Feeder-Symbol installiert. Ich nehme die Hälfte dieser Ikone. Wenn Sie also nicht wissen, wie Sie das Symbol installieren sollen, können Sie einfach auf Browse Pluging in der Community klicken . Dann kannst du von hier aus einfach nach dem Icon suchen und dann kannst du einfach das Icon installieren. Es wird sich öffnen. Sie können also sehen, dass viele Icons hier sind. Sie müssen nur auf Installieren klicken, dann erscheinen Sie einfach hier. Wenn Sie also unter dem Plugin darauf klicken , wird dieses angezeigt. Also werde ich diese Füllersymbole installieren. Ich habe das schon installiert. Ich hole mir ein paar Icons von hier, wird mir das zeigen. So kann ich dieses Pfeilsymbol nach rechts und links sehen. Also diesen wähle ich aus, und ich wähle diesen Pfeil links dort aus, wo er fallen gelassen wurde. Also ist es jetzt hier. Also ziehe ich es einfach und dann lege ich es einfach hier hin. Und okay, die andere Sache ist, dass es so ist, dass es außerhalb dieses ist. Was ich also tun muss, muss ich es ziehen und in die Ursprungsnummer legen. Wir haben es in der Paginierung. Dieser hier, okay. Jetzt lass es mich sehen. Okay, das können wir hier sehen. Und dafür brauchen wir auch das richtige Symbol. Okay, also ist es jetzt hier. Und wo es ist, dieser, den wir in diesem haben, ist zuletzt hier. Also ziehe ich das hier zum letzten. Okay, also haben wir das hier und lass mich das probieren. Also können wir das hier nicht sehen. Mal sehen, was genau hier passiert ist. Also okay, also kommt es nicht her. Lass mich entfernt werden. Okay, also haben wir diese Tool-Option hier. Also werde ich den ganzen Teil von hier entfernen . Ich lösche das hier. Okay, also können wir, wir können, wir können es hier schnell deaktivieren , damit es sichtbar ist. Jetzt. Jetzt füge ich dieses Icon hier hinzu. Und dieses Icon wird hier hinzugefügt. Okay, cool. Wir werden es nicht sehen können , weil es außerhalb unserer Frames liegt. Also was ich machen werde, stelle ich es hier hin. Okay, sobald wir es hier abgelegt haben, ist es nicht brauchbar, weil das Problem da ist. Also sollten wir, wir sollten es von dort aus außerhalb dieses hier geben . Also werde ich es einfach ausgleichen lassen. Oder wir können es einfach in den Boden legen, dann wird es immer noch funktionieren. Okay, also können wir diese Probleme hier haben. Wir haben hier so viele Dinge für das kaputt gemacht, selbst dieses wird von hier aus blockieren. Cool. Jetzt sollte es aussehen. Also haben wir diesen, aber dieser Pfeil-Gegenstand befindet sich in diesem. Was wir hier tun können, können wir diesen einfach in diesen Text davon in das Deck ziehen . Und ja, jetzt funktioniert es also musst du es hier nicht in diese Vegetation stecken. Also haben wir einen Fehler gemacht, wenn wir ihn auf diese Weise brauchen. Wir müssen es also nur so lange setzen, wie es sich im Rahmen dieses Textes befindet. Es kann auch hier funktionieren. Sie essen nicht, ist nicht zwingend erforderlich, um es in das Paginierungselement wie diese Weise zu legen . Also können wir dieses Ding definitiv auch hier machen. Aber als wir es versuchten, haben wir etwas kaputt gemacht. Das war ein Grund. Jetzt funktioniert es einwandfrei. Jetzt. Lassen Sie mich schnell die Textnummer riskieren. Also werde ich diesen Arm drücken zwei bis 32 wird C sein, und dann wird dieser sein, denn dieser wird fünf sein, und dieser wird sechs sein. Und nach sechs füge ich Doppelpunkt, Dreifachpunkt hinzu, und dann füge ich sieben hinzu. Dieser wird acht sein. Dieser wird neun sein. Nur neun. Und dieser wird es sein, dann wird dieser o von n sein. Dieser wird 12. sein. Cool. Was kann ich jetzt tun? Ich kann mich einfach hier einstellen und dieses auch in der Mitte. Cool. Jetzt haben wir dieses 1123456789101112. Wir haben diese nette Paginierung. Eine andere Sache, die wir tun können, müssen wir hervorragend tun. Wir müssen Markdown eine Option machen, die markiert ist. Also wähle ich dieses aus. Vielleicht können Sie eine beliebige Zufallsoption auswählen. Was können wir also tun? Grundsätzlich können wir die Hintergrundfarbe dieses Artikels ändern . Wir müssen dafür eine andere Hintergrundfarbe hinzufügen . Lass mich einfach sehen, wie es aussieht. Ich bin mit dieser Farbe zufrieden. Und dann kann ich einfach diese weiße Farbe von hier auswählen. Und los geht's. Okay, aber dieses Rot wird hier nicht gut aussehen, weil wir was haben? Wir haben bereits eine Hintergrundfarbe. Okay, also ändern wir das hier. Das ist nicht gut. Wir müssen diese rote Farbe in etwas anderes ändern. Und genau das mache ich nicht. Wir können versuchen, den Schwarzen zu binden, schätze ich. Ja, der Schwarze wird gut aussehen, weil dieser markiert ist. Trotzdem. Ich bin damit nicht zufrieden. Ein bisschen Schatten dieses Hintergrunds. Das Problem ist jedoch, dass wir bereits eine Hintergrundfarbe haben. Das ist der Grund, warum der Markierte direkt gut aussehen wird . Also haben wir dieses oder wir können immer noch ein bisschen hellere Farbe in diesem Bereich ausprobieren. Vielleicht dieser Bereich. Okay, also wird es gut aussehen und ich werde die Textfarbe in Schwarz ändern. Cool. Jetzt ist es also leicht erkennbar , welcher schlau ist? Also drei sind hier unten markiert. So nett. Wir haben in diesem Teil etwas wirklich Schönes entworfen. Ich werde dieses Video gleich hier beenden. Im nächsten Teil werden wir versuchen, dieser App ein paar weitere Funktionen hinzuzufügen. Wir sehen uns in der nächsten Vorlesung. Tschüss. 6. Über das Design von Abschnitt Collapse Features: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, hier einen weiteren Abschnitt hinzuzufügen, sich um den Abschnitt auf der linken Seite handelt, wir werden unser EMS und die rechte Seite setzen, wir werden ein weiteres sexuelles hinzufügen. Lass mich dir zeigen, wie wir das machen können. Um dies zu tun, müssen wir in erster Linie unsere Hauptrahmengröße erhöhen, nämlich unsere Deckstopps. Also wähle ich diesen Text aus. Und dann werde ich die Größe unseres Hauptrahmens vergrößern. Also ziehe ich es ein bisschen mehr auf diese Weise. Cool. Wenn ich mir jetzt anschaue, dann können wir sehen, dass wir diesen Platz haben und unsere Anwendung sieht bereits gut aus. Wir haben Pixel perfekt. Und dann sieht alles richtig gut aus in der perfekten Position. Alles gut hier. Und vielleicht werden wir versuchen, ein bisschen Modifikation hinzuzufügen , wenn es wieder auftreten soll. Aber im Moment füge ich hier einen weiteren Abschnitt hinzu, dem es um den Abschnitt geht. Und hier werden wir ein paar Details haben. Also lasst uns das hier hinzufügen. Also werde ich zuerst entwerfen, ich füge hier ein Rechteck hinzu. Wir kommen so, klicken auf das Rechteck. Und dann vielleicht von hier aus. Vielleicht können wir von hier aus gehen. Also können wir ein Rechteck zeichnen. Und von dieser Seite auf diese Seite oder vielleicht von dieser Seite. Diese Seite. Und ein bisschen größer. Und jetzt lass mich es mit derselben Position anpassen , damit wir diese rote Markierung sehen können. Es bedeutet also, dass wir uns in derselben Position befinden. Also hier stelle ich unsere E-Mails hier ab. Also klicke ich auf dieses Ort-Bild, und dann wähle ich dieses Bild hier aus. Also habe ich diese E-Mail aus dem Internet bekommen. Sie können also einfach jede E-Mail herunterladen oder ein beliebiges Bild hier verwenden. Wenn ich jetzt darauf klicke, habe ich diese Bilder hier drüben. Und jetzt drüben auf der rechten Seite, rechte Seitenleiste können wir setzen, lass mich sehen wie es aussieht, wie groß es in der tatsächlichen Größe aussieht. Es sieht also so aus. Und wir können versuchen, ein paar andere Dinge hinzuzufügen , ein paar andere Sachen. Okay, also können wir was hinzufügen, was ich damit meine. Also kann ich einen weiteren Abschnitt hinzufügen. Was kann ich für dieses Rechteck sagen? Ich kann über Section sagen. Und ich werde hier noch ein Rechteck zeichnen, vielleicht von dieser Seite zu dieser Position. Jetzt geht es direkt auf diese Größe. Okay, jetzt haben wir genau die gleiche Größe von rechts und in derselben Position wie dieses Bild. So können wir, es erhöht immer noch die Größe unseres Wagens. Und dann kann ich einen Randradius von fünf Pixel hinzufügen, ein bisschen Schatten, ein bisschen Schatten, Schlagschatten. Und dann füge ich diese weiße Hintergrundfarbe hinzu. Jetzt haben wir diese Art von Sichtweise. Oben. Zuerst füge ich über uns hinzu. Was kann ich sagen? Ich kann das einfach umbenennen. Ich kann über Details sagen. Hier. Ich füge einen Text hinzu, und der Text wird hier hinzugefügt, ich werde über uns sagen. Also über uns wird vorerst so aussehen. Und in der Live-Ansicht wird es so aussehen, aber sie sollte eine größere Größe haben, vielleicht 32. Und dann ist es immer noch ein, wir werden eine andere Farbe für diese hinzufügen, noch genau nicht die schwarze. Jede Farbe. Ich wähle nur eine Art von aus, oder vielleicht kann ich diese Farbe immer noch auswählen , wenn du diesen Farbmodus verwendest. Für diesen Textstil können wir also einen anderen wählen. Wir können eine andere Farbe wählen, ein anderes Design. Und vielleicht sieht diese oder diese, oder diese oder diese oder cool aus, es sieht gut und schlecht aus. Also können wir das hier benutzen und wir können es einfach hier platzieren. Und danach werden wir eine Art Zusammenbruch hinzufügen , der hier gezeigt wird. Wir können hier einfach eine weitere Kartenoption hinzufügen. Was können wir dafür tun? Es sieht also echt gut aus. Ich bin damit zufrieden. Kein Problem damit. Aber ich füge ein hier gezeigtes Auto hinzu. Über uns kann ich einfach sagen. Wir werden dieses über Title schnell umbenennen. Ich habe diesen über Titel. All diese About Abschnitt. Also zeichne ich zuerst ein weiteres Rechteck. Ich nehme die Hälfte dieses Rechtecks. Also füge ich hier einen Detailtext hinzu. Wir können diese einfach auf diese Weise ändern. Und so haben wir das Gewicht hinzugefügt , das größer ist als die mittlere Größe unseres Designs. Also können wir das hier hinzufügen. Und dann haben wir dieses Design von Sean. Und wir können unsere Icon-Farbe hier hinzufügen. Was können wir jetzt tun? Was ich hier machen wollte, wollte ich dazu Titel und die Beschreibung hinzufügen. Ich kann einfach Loren ipsum nur für einige zufällige Texte oder du kannst auch ein Plug-In verwenden. Das ist kein Problem. Also kann ich einfach Laura Nixon auswählen, diesen Titel hier. Und dann kann ich hier einen Text auswählen. Ich kann diese SMS hier ablegen und dann ändere ich ihn auf 14. Und los geht's. Wir haben diese 14. Und jetzt kann ich 1619 auswählen. Und wir können es auf diese Weise anpassen. Wir können es sagen, tut uns leid, wir können unseren Text in den Mittelpunkt stellen. Wir können unseren Text in den Mittelpunkt stellen. Ich kann unseren Text in den Mittelpunkt stellen. Und dann können wir hier einen Randradius hinzufügen, fünf Pixel, ein wenig Randradius. Und wir können das auch auf diese Weise machen. Dies ist also das Rechteck, das wir über Artikel sagen können , über Artikel. Und hier geht es um Artikeltext. Also über Artikel, über Artikeltext. Und hier müssen wir zuerst die Hintergrundfarbe ändern lassen. Wir können diese Hintergrundfarbe wählen und für den Text können wir diese Textfarbe wählen. Schnell. Also haben wir diese und diese Farbe. Und hier können wir ein Icon setzen. Wir können hier zu einem Icon ziehen. Und los geht's. Wir können hier 21 Icon setzen. Also können wir uns wieder gesund machen, dieses Icon-Plugin, das wir installiert haben , heißt Filtersymbol. Und ich entscheide mich dafür. Ich wähle dieses Icon hier aus. Und ich ziehe es hier hin. Ich lege es hier hin. Und los geht's. Ich ändere die Farbe auf Weiß. Cool. Es sieht gut aus, aber ich muss es in das Deck stecken. Also lege ich einen Drag-and-Drop auf den Desktop. Jetzt sollte es in der Lage sein. Jetzt können wir sehen, dass dieses Icon auch hier ist. Was können wir jetzt tun? Wir können auch den Namen von Diachronic umbenennen kann über sie Pfeil nach unten sagen. Also haben wir über Artikel jemals Atom nimmt und über Artikel, diesen. Dies sind die drei Dinge , die wir jetzt machen können. Gruppe Ich drücke Command Z und sage About item. Wir können über die Karte sagen, cool. Also haben wir diese Flughafen-Artikelkarte, und jetzt können wir diese Artikelkarte hier hinzufügen. Und wir können diese Wohngegenstands-Artikelkarte hier hinzufügen. Wir werden mehrere Zeitverwerfen hinzufügen. Oder wir können eine Sache machen. Wir brauchen dieses Ding nicht. Ich denke, wir können mich versuchen, es zu duplizieren. Wie es aussieht. Jetzt können wir es ein paar Mal duplizieren. Jetzt haben wir dieses schöne Kartendesign. Aber zum ersten möchte ich verschiedene Dinge haben. Ich möchte es öffnen und ich möchte unseren Text zeigen, okay, es ist eine Art Anrufoption. Um das zu tun, lass es mich zuerst hierher stellen. Lass mich versuchen, wie es aussieht. Es ist immer noch drin. Und dann können wir es hier ein bisschen mehr joggen. Okay? Und dann können wir es nur für diesen Artikel machen, wir können es benennen. Wir können MDs eins über den Einsturz von Gegenständen. Okay, und dann werde ich es für diesen Artikel etwas größer machen. Okay? Und dann entferne ich dieses Icon von hier , weil wir hier ein anderes Element benötigen. Und dann lege ich diese SMS hier rüber. Und dann drücke ich Command D und ziehe ein wenig nach unten. Und ich füge hier einen anderen Text mit ein paar weiteren Artikeln hinzu. Also können wir es schaffen. Sie können hier etwas mehr Text kopieren und einfügen. Normalerweise sehen Sie diese Art von Design in einem Abschnitt mit Anrufaufnahme oder häufig gestellten Fragen. Also haben wir dieses jetzt Ich werde die Schriftgröße auf den 12. reduzieren. Cool. Jetzt sieht es echt gut aus. Okay, cool. Eine andere Sache, die wir tun können, ist hier. Wir können ein anderes hinzufügen, wir können ein anderes Symbol hinzufügen, das ein App-Symbol über die Artikelkarte sein wird. Und hier können wir wieder hinzu**** Tech Health unseres Symbols namens Feeder-Symbol. Von hier aus können wir einfach dieses Icon nehmen, das das App-Symbol sein wird. Und dieses Icon werde ich kopieren. Und dann werde ich posten, ich stelle es hier hin. Ich mache die Farbe Weiß Ghul. Und wieder geht es außerhalb des Rahmens. Also stelle ich es hier hin. Wir können also sagen, ich kann diesen umbenennen oder Sie können sagen, ich habe Artikel zusammenklappen, Pfeil nach oben gekauft. So können wir überprüfen, ob sie müssen, wenn Sie zwei Nachspeisen haben, okay, also fällt eine andere Sache auf, dass es nicht in derselben Zeile ist, also können wir es in derselben Zeile machen. Wie können wir das machen? Wir können einfach, jetzt ist es in derselben Linie. Okay? Wenn also ein Benutzer darauf klickt , wenn Sie darauf doppelklicken, wird dies geöffnet, und dann öffnen wir diesen auch. Okay, so haben wir diesen Abschnitt über uns entworfen. Alles klar, und noch was wir versuchen können. Also im nächsten Teil werden wir versuchen, unsere hinzuzufügen, okay, damit wir hier noch eine Sache hinzufügen können. Wenn es also geöffnet ist, können wir diesen Artikel einfach auch markieren. Was ich, was ich damit meine. Normalerweise werden Sie also feststellen , dass wir diese Karte auch markieren werden, wenn diese Karte geöffnet ist . Also können wir es auch tun. Das ist kein großes Problem. Ich lasse mich versuchen, das hinzuzufügen. Lassen Sie mich vorher prüfen, was wir benutzt haben. Wir haben einen Radius von fünf mehr genutzt. Okay, cool. Also ziehe ich hier eine Linie, weiteres Rechteck und lege fünf ein. Und minimiere das, tut mir leid, wir müssen diesen hier haben. Dies und dann können wir das einfach markieren. Werden wir diese Farbe benutzen? Okay, cool. Also haben wir dieses oder wir können einfach verwenden die weiße Farbe wird auch hier gut aussehen. Aber nein, es wird nicht gut aussehen. Also müssen wir diesen auch auf diese Weise anpassen. Es ist in gewisser Weise und wir können etwas Farbe haben. Vielleicht diese Farbe. Nein, genau sieht es nicht gut aus. So können wir im Grunde genommen verschiedene Farben wählen. Ja, vielleicht ist es gut, aber wir können das Weiß auch auf vielleicht sieben ändern. Excel. Auch dieser ist offen und dieser ist markiert. Aber es wäre gut, wenn wir eine wirklich gute Farbe wählen könnten , helle Farbe, die leicht erkennbar ist. Aber ich verstehe, vielleicht wird dieser Block gut aussehen. Okay, ich überspringe das hier. Okay, also haben wir endlich diesen durchschnittlichen Abschnitt entworfen und es sieht wirklich gut aus. So können wir unseren About Abschnitt und diese Kollapse-Option hier entwerfen . Okay, also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren . Wir sehen uns in der nächsten Vorlesung. 7. Feedback Slider: Willkommen zu diesem Video. In diesem Teil werden wir über den Abschnitt About und nicht genau über den Abschnitt diskutieren Abschnitt About und nicht , da wir in unserem vorherigen Teil unseren About Abschnitt in diesem Teil entworfen haben. Und im Grunde möchte ich einen Feedback-Bereich hinzufügen. In Ordnung? Wie es also aussehen wird, ist es eine Art Schieberegleroptionen oder wir werden einfach versuchen , so aussehen zu lassen. Und dann können wir das einfach entwerfen. Okay? Lassen Sie mich dazu zuerst anfangen, dieses Ding zu zeichnen. Okay, Cool. Wir müssen unsere Rahmengröße, Rahmenhöhe erhöhen . Wählen Sie also den Rahmen aus und dann können wir ihn von hier aus erhöhen. Und dann cool. Jetzt füge ich hier unseren Feedback-Bereich hinzu. In der Mitte füge ich ein Titel-Feedback hinzu. Und danach haben wir diese Option hier. Okay, so schnell, um einen Feedback-Bereich hinzuzufügen. Zuerst füge ich hier einen Text hinzu. Und ich füge Feedback hinzu. Und schnell, lassen Sie mich die Schriftgröße auf eine größere Größe ändern , vielleicht 36. Und wir können es genau hierher stellen. Und lass mich sehen, wie es aussieht. Also wird es gut aussehen. Also haben wir dieses Feedback unten, und dann haben wir dieses Feedback, okay, cool. Wir haben das Offshore und wir können es einfach mitten in diesem hier zeichnen. Okay. Und wir können es einfach hinzufügen. Sie können von oben ein bisschen Platz einnehmen. Ich kann einfach ein bisschen Platz von oben machen. Und was können wir danach tun? Grundsätzlich können wir bei zwei Items hier. Einer wird unser Kartenartikel sein. Grundsätzlich müssen wir eine Karte oben auf der Karte entwerfen , wir zeigen das Bild des Schülers und dann das Bild des Schülers, dann den Namen und dann die Nachricht. Bei den anderen beiden Dingen, die wir so schnell zeigen wollen, benenne ich den Namen um. Man kann den Titel der Tasche sagen. Okay, cool. Also dieser Feedback-Titel. Und danach entwerfe ich unser Rechteck. Vielleicht können wir von hier aus anfangen. Wir können anfangen, ich kann von hier aus anfangen. Also möchte ich zwei Artikel zeigen. Ich nehme diese Art von Größe, ein bisschen Rand Radius, also wirst du hinzufügen. Und dann wird diese Option hier hinzugefügt. Ich denke, es wird gut aussehen. Dann lasse ich mir sehen, wie es aussieht. Also diese Größe. Und dann setzen wir hier einen Knopf und dann einen weiteren Knopf auf die rechte Seite. Und dann müssen wir hier eine Option haben und unten werden wir diese hinzufügen. Okay, also wird es gut aussehen und wir müssen es tun, ich werde Feedback sagen Hauptteil. Und ich werde entwerfen, ich ziehe noch eine Karte. Oben drauf. Wir können r definieren. Wir können unsere Ellipsenoption hier genau definieren. Das hier. Wir müssen es gleich hoch und weiß machen, eins zu zwei. Und dann können wir, okay, also brauchen wir von oben etwas mehr Platz , weil wir unseren Text hier haben. Also können wir es einfach ziehen und wir können es aus dieser Reihe nehmen. Und dann können wir es auf diese Weise nehmen, mitten in diesem. Okay, genau. Das ist das Medial. Wie versteht man, dass dies der Medial ist? Wir gehen, du kannst diesen Punkt hier sehen. Und okay, cool. Also hier werden wir das Bild aufstellen und hier fügen wir den Schatten hinzu. So schnell füge ich diesen Effekt hinzu. Ich ändere die Hintergrundfarbe auf diese Farbe. Und jetzt sieht es aus wie eine Karte. Und keine Sorge, wir werden das hier angeben und wir müssen hier einen Namen hinzufügen. Was ich also sehen kann, benenne ich es um. Ich kann Feedback sagen. Verwenden Sie unser MS-Benutzerprofilbild. Und dann werde ich am Ende dieses Tags setzen. Man kann John Doe sagen, nur für ein Beispiel, jeden Namen, den wir haben. Okay, also und dann können wir eine Sache machen. Wir können einfach Okay, ich denke, es ist nicht in der Mitte oder es ist in der Mitte, aber wir können es in den Mittelpunkt dieses stellen. Okay. Jetzt ist es in der Mitte. Wir können einfach den Formularentwurf ändern. Wir können für diesen Namen ein anderes Design hinzufügen. Wir können, vielleicht können wir wählen, ich wähle nur ein paar zufällige Texte aus. Wenn Sie also eine Präferenz haben, wenn Sie eine andere verwenden möchten, können Sie dies hier definitiv tun. Das wird nicht gut aussehen. Also können wir dieses hinzufügen. Nein, das wird nicht so aussehen. Also können wir wählen, dass mir das nicht gefällt. Nicht das hier. Okay, das können wir auch auswählen. Aber wir sind Tomas Bolt. Dieser ist gut. Wir können uns für dieses entscheiden. Eine Sache, die ich tun kann, ist , dass wir diesen Text zu einer Komponente machen können. Das müssen wir also immer wieder nicht von Loren Ipsum kopieren. Also wähle ich diesen Text aus. Ich klicke mit der rechten Maustaste und dann mache ich es zu Komponenten. Sie können also Komponente erstellen sehen. Was bedeutet diese Komponente? Sobald diese Komponente geworden ist, können Sie sehen, dass dieses Symbol geändert wurde und wo es sich um eine Komponente handelt, APR, dieses Unternehmen in diesem Asset-Verzeichnis erscheint. Also haben wir das. Jetzt haben wir diese Komponente, okay, was das ist. Und jetzt, wenn wir wollen, können wir diese Komponente so oft verwenden , wie Sie möchten. Was kann ich also tun? Ich kann es einfach hierher ziehen. Und dann kann ich, ich kann diesen auswählen, und ich kann hier auch einfach die Hintergrundfarbe ändern. Okay, auf diese Weise muss ich nicht immer wieder kopieren und einfügen. So kannst du, auf diese Weise kannst du alles machen. Sie können eine Komponente erstellen, auch wenn Sie möchten, Sie können eine Komponente dieses Elements erstellen. Sagen wir Omega-Komponente, erstellen Sie Komponente. Es ist also eine Angst geworden. Jetzt kannst du es einfach so oft wiederverwenden wie du willst. Okay? Das ist also das Schöne an Komponenten. Jetzt haben Sie gelernt, wie man eine Komponente benutzt wie man eine Komponente erstellt. Wenn ich mir jetzt hier anschaue , sehe ich, dass ich diese Optionen habe. Und das ist das Benutzerfeedback, aber jetzt brauchen wir diese große Karte nicht mehr . Was können wir also tun? Ich kann das umbenennen. Ich kann sagen, dass John Doe es sein wird, wir können wieder Umbenennen sagen, einfach Feedback sagen, Benutzername. Also steht alles unter diesem Feedback , damit wir sie zu einer Gruppe machen lassen können. Okay? Also jetzt ist das das Hauptwagen der Wagen-Feedback. Ich werde diese Karte nur ein bisschen mehr minimieren. Und jetzt schauen wir uns an, wie es aussieht. Es sieht so aus. Okay, also wollen wir unsere E-Mails hier ablegen. Was kann ich also tun? So kann ich einfach ein paar Bilder herunterladen, dasselbe Profilbild, und dann kann ich es einfach hier ablegen. Jetzt können wir unsere Bilder einfach in diese Karte legen. Jetzt haben wir bisher kein Bild. Was können wir tun? Grundsätzlich können wir einfach auf dieses Ort-Bild von Sean klicken. Und dann wähle ich hier einfach ein paar zufällige E-Mails aus. Und jetzt haben wir diese Option. Wenn ich jetzt darauf klicke, wird es hier hinzugefügt. Und los geht's, wir sollten das Bild hier sehen können. Es dauert einige Zeit , das Bild zu laden. Oder wir können einfach das, was hier passiert ist. Es ist hier. So können wir dieses Profilbild, Profilbild hier sehen. Und jetzt haben wir diese Karte perfekt vorbereitet. Okay? Was wir jetzt haben, das ist das erste Bild, und das ist das Profilbild. Wir haben dieses Feedback. Wir haben dieses Feedback, Benutzernamen, Feedback-Karte, Feedback-Hauptkarten-Feedback-Titel ist nicht unter diesem. Dies sind also die vier Dinge , die wir brauchen, um Gruppen zu bilden. Also drücke ich Command G und dann kann ich es einfach umbenennen und ich kann Feedback sagen, gemeine Karte. Cool. Jetzt können wir es einfach auf diese Weise machen. Jetzt haben wir dieses Ding. Ich werde es duplizieren lassen. Und von hier aus können wir das auf diese Weise hinzufügen. Wir haben diese Karte auf diese Weise ausgeschaltet, aber sie ist nicht in der Mitte. So schnell. Was können wir tun? Wir haben diese beiden Hauptwagen. Wir können sie jetzt zu einer Gruppe machen und dann können wir sie umbenennen. Und wir können dieses Feedback einfach sagen. Alle Artikel können Sie einen beliebigen Namen angeben. Und jetzt können wir es neu anordnen. Okay, vielleicht ist das der Mittelpunkt, okay, also können wir sehen, dass diese Linie in der Mitte erscheint. Dies ist also der Mittelpunkt dieses. Eins, und jetzt haben wir diesen Gegenstand in der Mitte. Okay, also haben wir das hier, es ist zumindest nicht in der Mitte, aber können wir einfach auf diesen hier sein, wir können es einfach in die Mitte dieses Textes legen und es ist jetzt besser. Und jetzt, mitten in diesem, möchten wir ein Tool-Symbol hinzufügen. Okay, also ist alles in Ordnung und schnell. Lassen Sie mich die E-Mails dieses Artikels ändern. Also wähle ich ein anderes Bild aus, das ich heruntergeladen habe. Und es wird schnell initialisiert. Und sobald es initialisiert wurde, kann ich es einfach durch dieses ersetzen. Auch hier nehmen Sie sich einfach etwas Zeit, um diese hinzuzufügen. Das ist kein Problem. Wir können das einfach hier machen. Okay, jetzt müssen wir hinzufügen, wir müssen hier einen Kreis zeichnen. Für unsere, unsere vier Stunden. Diese Option. Oder wir können hier noch eine Änderung vornehmen. Ich glaube, ich habe vergessen , diesen hinzuzufügen. Wir können eine Grenze davon hinzufügen. Fügen wir also einen Rahmen hinzu , damit er viel besser aussieht. Also füge ich hier eine Grenze hinzu. Wir können also sagen, dass der Schlaganfall drei sein wird. Und dann, okay, also was ich hier im Grunde getan habe, also denke ich, dass ich diesen Rahmen dafür hinzugefügt habe , für dieses Rechteck. Okay, also haben wir versehentlich unser Rechteck hier hinzugefügt. Also kontrolliere ich Chet. Wir müssen es genau mit den E-Mails hier machen, dieser Haupt-MS, und hier kann ich dieses Bild hinzufügen. Ich setze es auf C und dann ändere ich die Farbe in Weiß. Und los geht's. Ich denke, Weiß ist nicht machbar, weil unser Hintergrund weiß ist. Also können wir diesen Hintergrund wählen. Und dann wird es aussehen, okay, also haben wir das gleiche Design für beide Artikel. Cool, es sieht echt gut aus. Und was können wir jetzt tun? Wir können einen unserer „Leben für Vorwärts-Button“ in einem Lebenszyklus zeichnen , den Rückwärts-Button. Und ich kann es einfach in die Mitte legen. Und es scheint hier die perfekte Größe zu verwenden. Also werde ich den Wasserstoff dazu bringen, sie zu beobachten. Er ist also schon 36 von 36. Und dann mache ich die Farbe weiß. Und dann füge ich den Effekt hier hinzu. Und dann kann ich dieses Pfeilsymbol hier drüben setzen. Also haben wir unser Pfeilsymbol in unserem Peck-Plugin. Also füge ich hinzu, dieses heißt Filtersymbol, und dann wähle ich dieses Symbol hier aus, erscheint hier. Also weniger als ziehen Sie es hierher, legen Sie es her und ziehen Sie es dann hierher. Also haben wir dieses und dieses, beide. Also können wir sie einfach zu einer Gruppe machen. Sie können sagen Feedback-Pfeil links kalt. Jetzt haben wir diesen Feedback-Pfeil genau in der gleichen Größe übrig. Ich denke, ich denke, es ist in der gleichen Position, weil, okay, also lass es mich reparieren. Ist es Statistiken mit 36. Jetzt ist es also in der Gruppe. Was können wir also tun? Wir können es einfach auf diese Weise messen, also ist es in dieser Größe. Nun, okay, damit wir ein Duplikat erstellen können. Also mache ich ein Duplikat. Und dann können wir es auf die gleiche Weise setzen. Okay? Ich denke, wir befinden uns in der gleichen Positionsschaltfläche, jetzt können wir einfach drehen, anstatt ein anderes Symbol zu verwenden. Okay? Also müssen wir es auf diese Weise drehen. Cool. Jetzt sieht es genauso aus, ist das gleiche Bild, das gleiche Symbol, das wir hier verwenden. Es sieht also echt gut aus. Und was kann ich jetzt tun? Oder wir können unseren Ci Dot hier hinzufügen, eigentlich drei Ellipsen hier. Also nehme ich Hilfe dieser Ellipse und dann zeichne ich diese Ellipse hier. Und was kann ich tun? Ich kann einfach zehn mal zehn sagen und lass es uns versuchen. Mal sehen, wie es aussieht. Ja, es sieht gut aus, aber es wird gut sein, wenn wir ein paar weitere hinzufügen könnten , 151515 bis 15. Und was kann ich jetzt tun? Ich kann, okay, also können wir, so schnell, dass wir eine andere Farbe hinzufügen können. Zuerst können wir eine andere Farbe hinzufügen. Und für die zweite können wir verwenden, und für die anderen beiden Farben können wir in dieser Farbe verwenden. Okay, also füge ich das hinzu, dann dupliziere ich es 234. Mal sehen, wie es aussieht. Also haben wir Vollfarbe und für den ersten werden wir es ändern, wir werden es aktiv machen. Es bedeutet, dass wir es anders gefärbt geben können, bedeutet, dass der erste hier aktiv ist. Cool, es sieht echt gut aus. Perfekt. Also haben wir diesen Feedback-Bereich hinzugefügt und sehen gut aus. Was können wir also tun? So können wir all diese Gegenstände einfach markieren und dann können wir sie einfach zu einer Gruppe machen. Dann können wir es umbenennen. Wir können Feedback-Punkt-Artikel sagen. Wenn Sie also für irgendeine Art von Design arbeiten, müssen Sie nur sicherstellen, dass Sie sie zu einem Groove machen , damit Sie es später wiederverwenden können und nichts kaputt machen. Und du machst nichts richtig kaputt. Also werde ich dieses Video hier beenden und wir werden es ab der nächsten Vorlesung fortsetzen. Wir sehen uns in der nächsten Vorlesung. Tschüss. 8. Abschnitt für Design: Willkommen zu dieser Vorlesung. In diesem Teil werden wir unser Abonnement-Newsletter-System gestalten. Bis jetzt haben wir diesen Teil bisher entworfen. Also hat mir dieses Design sehr gut gefallen. Ich hoffe es hat dir gefallen und du wirst viel lernen. Jetzt. Es ist Zeit, unser Abonnementsystem hier hinzuzufügen. Wie kann man das machen? Es ist also ein sehr grundlegendes Weichteilsystem , das wir entwerfen werden. Nichts Ausgefallenes und es ist keine schwierige Aufgabe. So schnell füge ich unseren Rahmen hinzu. Ich entwerfe hier ein Rechteck. Ich füge kurz danach ein Rechteck hinzu. Ich glaube, ich zeichne hier ein Rechteck. Und lass mich sehen, wie es hier aussieht. Also dieses Rechteck und hier können wir hinzufügen oder wir können unser EMS platzieren, oder wir können einen Hintergrund-MAs platzieren, dann können wir einfach unser Eingabefeld hinzufügen und dann das untere, können wir hinzufügen. Und um das zu tun, was können wir tun? Grundsätzlich fügen wir unser Hintergrundbild hinzu oder wir können einfach etwas Farbe anstelle eines Hintergrundbildes hinzufügen hier einfach etwas Farbe anstelle eines Hintergrundbildes hinzufügen. Und dann können wir einfach, was können wir tun? Wir können diesen einfach dort hinzufügen, wo es ist. Also können wir die APRNs einfach etwas ändern , oder vielleicht 10%. Dann wird es uns diese Art von Gelehrten Schatten geben , aber vielleicht 80%. Und dann können wir versuchen, es noch einmal hinzuzufügen, da sie noch ein paar andere Optionen haben. Zum Beispiel können Sie diesen Bildschirm auswählen. Sie können dieses Licht und Farbe wählen. Sie können dieses harte Licht und einige andere Optionen wählen , die sie haben. Aber normalerweise wird es durchlaufen. Und dann können wir hier einfach 20 Prozent auswählen uns so etwas geben werden. Okay, cool. Wir haben also diese Optionen, aber statt dieser können wir diese Farbe auswählen, vielleicht kann eine lineare Farbe sein. Also eskaliere, die Farbe wird hier nicht gut aussehen. Was kann ich hier machen? Es tut mir leid. Ich muss, wir können einfach hinzufügen Ich kann einfach ein Hintergrundbild hier platzieren. So können wir einfach einen Hintergrund Menschen platzieren, vielleicht diese Gipfel. Und das wird es tun, es tut mir leid. Also muss ich diesen hier auswählen. Wo ist dieses Rechteck? Acht. Diese Rechteckhilfe wird also unser Abo-Rechteck sein. Im Abo-Rechteck müssen wir unser Hintergrundbild hinzufügen. Also lasst uns das versuchen. Wir sollten es also nicht auf dieses Rechteck legen. Okay, also bin ich mir nicht sicher was, was wir hier im Grunde gemacht haben. Lassen Sie mich das also entfernen , weil wir hier einige Änderungen vorgenommen haben. Der Grund, warum es Probleme verursacht, also zeichne ich hier ein Rechteck. Und das ist unser erstes Rechteck hier. Jetzt platziere ich das Bild. Also werde ich das Bild platzieren, und dann werde ich dieses Bild hier zeigen, cool. Es sieht also echt gut aus. Und dann entferne ich dich, nenne es. Wir können „Abo“ sagen. Der Name wird also tiefgestellt und eingeschaltet. Lass mich sehen, wie es aussieht. Es sieht echt nett aus. Und oben können wir eine hinzufügen, diese Option. Ein Eingabefeld. Wir können unser Eingabefeld mit unserem Rechteck zeichnen. Fügen wir den Grenzradius hinzu, dann vielleicht ein bisschen mehr, vielleicht 20 Pixel. Und dann haben wir das hier. Und dann haben wir diesen in der Mitte. Wir haben das. Okay, cool. Und was können wir tun? Wir können dieses einfach hinzufügen. Und vielleicht können wir versuchen, eine Grenze hinzuzufügen. Wir können hinzufügen, dass ein Rahmen C sein wird und wir können die Randfarbe in Weiß ändern. Und jetzt brauchen wir das nicht mehr. Wir können es weiß, hellgrau halten. Oder wir können diese Hintergrundfarbe entfernen. Wir können das auf diese Weise hier behalten. Und fügen wir zuerst einen Platzhaltertext hinzu. Also können wir IMO sagen, eigentlich nur zu essen ist hier sichtbar , weil wir ein Hintergrundbild haben. Also müssen wir hinzufügen, wir müssen hier eine Hintergrundfarbe hinzufügen. Also müssen wir hier eine Hintergrundfarbe hinzufügen. Also aktiviere ich diese Hintergrundfarbe. Und dann das, dann wird dieser Dx in die Mitte rücken. Jetzt können wir unseren Text identifizieren, aber was können wir tun? Wir können einfach unsere Schriftgröße vergrößern und dann können wir einfach neu anordnen. Es könnte von hier aus sein, E-Mail. Und dann können wir vielleicht unseren Send-Button hier definieren. Wir können unsere verschiedenen Buttons definieren. Diese Farbe sieht also richtig gut aus. Ich möchte diese Farbe nicht mehr ändern. Hier können wir also einen Knopf und die Knopfhöhe hinzufügen und was wird gleich sein. Was kann ich also tun? Ich kann dieses Rechteck einfach duplizieren. Und ich werde es auf die gleiche Weise auf das gleiche Niveau bringen. Aber ich werde es minimieren. Ich werde das Gewicht dieses minimieren. Und dann müssen wir auf jeden Fall die Farbe in eine helle Farbe ändern , diese Farbe. Und dann wird es gut aussehen. Also müssen wir diesen Schlaganfall hier nicht haben. Wir brauchen diese Grenze nicht. Hintergrundfarbe ist dieser moderne Radius für diesen, diese Grenze. Aber wofür ist das da? Ich entferne es mit dem Namen Abonnieren Button Input. Und hier müssen wir eine SMS schreiben. Okay, also lasst mich sie zuerst zu einer Gruppe machen, Eingabe abonnieren, Eingaben für McDermott Gruppe ausfüllen und abonnieren, ich werde sagen, Abonnieren Sie Input. Und von hier aus füge ich unsere Texte hinzu. Du kannst abonnieren sagen. Ich kann das Subskript hier platzieren. Dies ist der Abonnentext. Also haben wir dieses Eingabefeld und dann haben wir diesen Text. Es sieht echt nett aus. Ich mache sie zu einer Gruppe. Mit diesem Abonnieren-Button werde ich sie zu einer Gruppe machen. Ich benenne es um. Ich sage „ Abonnieren“ -Button. Los geht's. Also haben wir den Abonnieren-Button und wir haben diese Abonnieren entworfen. Perfekt. Cool. Es sieht also sehr gut und das hat mir sehr gut gefallen. Und im nächsten Teil werden wir unseren Fußzeilenbereich entwerfen. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. Tschüss. 9. Footer: Willkommen zu dieser Vorlesung. In diesem Teil werden wir damit beginnen, unseren Fußzeilenbereich zu entwerfen. Also haben wir bisher so viele Dinge getan. Aber jetzt ist es an der Zeit, unseren Fußzeilenbereich hier zu gestalten. Um dies schnell zu tun, denke ich, dass wir diese Menge an Platz nicht in unserer Fußzeile haben müssen . So können wir es einfach ein wenig minimieren. Ich wähle diesen Text aus und minimiere ihn dann ein bisschen mehr. Und dann denke ich von hier aus, dass ich diese Put-Option hinzufügen kann. Also nehme ich von hier aus ein Rechteckdesign. Dann kann ich das hier entwerfen. Cool. Und dann füge ich schnell diese Hintergrundfarbe hinzu. Nicht genau diese Farbe. Ich denke diese Farbe. Lass mich sehen, wie es aussieht. Ich wollte diese Farbe benutzen. Ich denke, ich denke, wir benutzen diese Farbe ist immer noch, sie ist wirklich groß. Wir müssen diese größere Größe unserer Fußzeile nicht brauchen. Wir können es minimieren. Und dann kann ich es schmecken. Ja, das ist es. Okay. Jetzt sieht es wirklich gut aus oder wir können vielleicht eine andere Farbe verwenden. Lassen Sie mich versuchen, wie es aussieht wenn ich anstelle dieser Farbe eine andere Farbe verwende, was ist mit dieser Farbe etwas dunkel. Ich schätze. Sieht nicht schlecht aus. Es sieht gut aus. Ich behalte das hier. Und was kann ich jetzt hier machen? Im Grunde können wir also zwei verschiedene Teile hinzufügen, zwei verschiedene Abschnitte für diesen. Und vielleicht kann ich hier einen Titel hinzufügen. Und dann können wir einfach die Option „Collapse“ hinzufügen, Notiz Collapse Option hier. Was kann ich zuerst machen? Ändern Sie es zuerst in Footer, Footer Rechteck , was auch immer wir schreiben. Und dann füge ich hier einen Text hinzu. Also schaffen wir es zur Sektion. Wir werden es von diesem Raster starten. Ich füge es hinzu. Wir können Dienstleistungen sagen und es ein bisschen größer machen. Okay, anstatt können wir vielleicht 24 sagen, und dann können wir hinzufügen, okay, also 26. Und dann vorher und dann können wir übersetzen , um die Schriftfamilie dieses Schriftstücks anzupassen. Wir können genau diese Farbe wählen , denke ich. Und, ähm, aber unten können wir auch eine unbekannte Länge hinzufügen. Wie können wir das unterstrichen gestalten? Ich denke, wir können uns für einen anderen entscheiden. Ich denke, das können wir wählen. Und ich wollte etwas wirklich Mutiges oder etwas wirklich Einzigartiges bekommen. Und ja, es sieht gut aus, aber dann muss ich es größer machen. Okay, also behalte das einfach. Jetzt danach füge ich unsere unterstrichenen hinzu. Um eine Unterstreichung zu zeichnen, verwende ich sie normalerweise lieber auf diese Weise , anstatt das Linienwerkzeug zu verwenden. Weil das Linienwerkzeug manchmal etwas schwierig zu entwerfen ist. Also füge ich den Grenzradius 20 hinzu, und dann wird die Höhe drei sein. Dann können wir die Farbe für Weiß auswählen oder diese Farbe ausführen. Und dann kann ich, ich kann das zeichnen. Ich kann diese Farbe einfach ziehen, genau am Ende dieses Dienstes. Cool, es sieht gut aus. Jetzt kann ich die Höhe auch auf zwei Pixel reduzieren. Es sieht gut aus. Jetzt kann ich hier ein paar Artikel hinzufügen. Dienstleistungen, die wir sagen können. Jetzt kann ich von hier aus sagen, dass ich einfach anfangen kann zu schreiben. Ich kann sagen, ich kann ein neues Zuhause sagen, aber die Schriftgröße wird hier definitiv sehr klein sein. Vielleicht ist 161616 sehr klein. Vielleicht werden 2424 gut sein. Das Zuhause wird also 24 sein. Jetzt werde ich, ich füge es von hier aus hinzu und ich werde es duplizieren. Ich denke in diesem Bereich. Es sieht gut aus. Okay, also werde ich es noch ein paar Mal duplizieren. Kalt. Also haben wir das hier. Wir können sagen neue Ära neues Haus Eigentum. Immobilien-Immobilien. Und ich schreibe nur ein paar Zufallsdienste. Nur um hier einen Text hinzuzufügen, als Support-Bankdarlehen bezeichnet wird. Sie können jeden Texten taktisch hinzufügen, was immer Sie wollen, es spielt eigentlich keine Rolle. Dann Bankdarlehen, dann können wir Kreditkarte hinzufügen. Es sollte also Bank nicht L sein, es sollte Bankdarlehen sein. Und dann erstellen Sie eine Kreditkarte, machen Sie sie Kapital. Okay, also sieht es echt nett aus. Was können wir jetzt tun? Wir können sie in Gruppe machen. Also all dieser Teil Gate Guard, Bankdarlehen nannte Unterstützung und die neue Heimat McDermott Gruppe. Ich mache sie zu einer Gruppe. Ich mache sie zu einer Gruppe. Und dann sage ich ES. Artikel „Dienste“. Dann kann ich es. Okay, also noch eine Sache, die wir für diese Gruppe machen müssen und diese, tut mir leid, um sie zu einer Gruppe zu machen, können wir auch Essen oder Titel sagen. Der Titel und dann mache ich ein Duplikat. Und ich kann es einfach hierher stellen. Und dann kann ich es auch duplizieren. Und los geht's. Das ist also das Schöne an diesem Ding. Und jetzt können wir anstelle von Dienstleistungen einfach Produkt, Incident-Services sagen , Produkt sagen. Und los geht's. Also haben wir diese Oberflächen, wir haben diese Produkteigenschaften, wir haben diese Option auch Produkt, und dann können wir von hier aus etwas ändern, von dem wir sagen können , dass wir alle Immobilien sagen können. Immobilien und dann Teil D, dann Kleider. Und dann kann man Einkaufszentrum sagen. Dann Einkaufszentrum und höher. Und dann können wir eine Karte hinzufügen. Und dann können wir Telefon sagen und einfach einen zufälligen Namen schreiben, Gartentelefon. Also Produktkarte und Telefon. Und hier können wir noch etwas hinzufügen. Das können wir. Was können wir tun? Normalerweise haben wir solche Dinge auf dem Foto, aber wir können hier noch 21 Text und eine weitere Beschreibung hinzufügen . Vielleicht können wir es also tun, wir können hier Text bearbeiten. Wir können einfach einen Text hinzufügen. Wir können zukünftiges Ziel sagen. Zukünftiges Ziel. Okay, also im Grunde können wir stattdessen diesen Ordnertitel einfach duplizieren. Okay, also haben wir diesen Fototitel hier, also können wir diesen einfach auf diese Weise ziehen. Und dann kann ich einfach zukünftiges Ziel oder zukünftiges, zukünftiges Ziel sagen . Und wie es dann aussieht, es wird großartig aussehen, aber wir müssen es nicht haben, okay, es ist in Ordnung. Wir können einfach, warum können wir einfach 80 oder vielleicht 100 sagen? Und dann können wir unseren Text hier hinzufügen. Wir können sagen, unser zukünftiges Ziel ist, dass Kongress hier beschrieben wird. Und was kann ich dann tun? Grundsätzlich kann ich die Schriftgröße auf 40 verringern. Und wie ich Ihnen bereits gesagt habe , dass wir unsere haben, haben wir diesen Vermögenswert hier geschaffen. Also ziehe ich das in die Länge. SMS hier. Und ich kann es einfach da hinstellen. Cool. Jetzt haben wir diese drei Möglichkeiten. Wir können es also einfach schaffen oder einfach noch ein paar Texte hinzufügen, aber ich denke, wir müssen hier keinen Text mehr hinzufügen. Aber die eine Sache , die wir hier tun können, können wir hier definitiv ein paar unserer Ikone hinzufügen. Was meine ich damit? Also haben wir das, wir haben das, unser, wir haben unser Plugin hier. Also filtern Sie das Symbol. Also können wir einfach Facebook sagen. Dann können wir Install sagen, dann können wir Twitter, LinkedIn sagen. Okay, also haben wir dieses Icon hier. Um dieses Symbol hinzuzufügen. Was kann ich tun? Ich kann einfach Hilfe von den Ellipse-Tools nehmen und dann kann ich dieses Symbol zeichnen. Stellen Sie also sicher, dass es genauso aussieht. Es wird also verspätet sein. Dann sollte es von der gleichen Größe ausgehen und dann wie es jetzt aussieht. Es ist also kein Verspätung. Fügen wir eine 35 mal 35 hinzu. Los geht's. Stattdessen werde ich diese weiße Farbe wählen, damit sie wirklich schön aussieht und wir haben diese. Was meinst du damit? Versuchen wir nun, dieses Plugin hinzuzufügen, dieses Symbol schnell. Also haben wir dieses Icon. Und wir können schnell sagen, Facebook. Und ich lege es hier hin. Und lass es mich versuchen. Ich ziehe es in die Box. Ich kann also sehen, dass dieses Facebook-Symbol hier ist. Jetzt, da wir unsere Ikone haben, haben wir unsere Ellipse. Machen wir sie zu einer Gruppe. Wir können also soziale Ikone sagen. Jetzt dupliziere es. Also Kommando D, und ich werde es in diesen Bereich stellen. Davor. Lass mich sehen, wie es aussieht. Jetzt kann ich es noch vier Mal duplizieren, also brauchen wir eine für Facebook, Instagram, Twitter und LinkedIn. Lassen Sie mich dieses Symbol schnell entfernen. Also füge ich jetzt ein Instagram-Symbol hinzu. Also dieses Plug-In, diese Füllersymbole. Also füge ich Instagram hinzu. Also füge ich Instagram hinzu. Also wird sein Instagram hier erscheinen. Und ich lege es hier hin. Und dann entferne ich dieses Icon schnell. Und dann füge ich Twitter hinzu. Ich schätze, es ist hier. Also kann ich dieses Twitter einfach ziehen. Und von hier kann ich das auch entfernen. Es gibt also Tutor, der auf LinkedIn sein wird. Und das kann ich auch hier machen. Okay, also können wir irgendwas davon sehen, weil alles Epi oder außerhalb dieses Rahmens ist. Was ich also tun muss, muss ich einfach alles in diesen Rahmen ziehen. Jetzt sollten wir unser Icon sehen können. Cool, es sieht echt gut aus. Es hat mir gefallen. Okay, also haben wir diesen Fußzeilenbereich erfolgreich implementiert und es sieht gut aus. Und im nächsten Teil werden wir unseren Login gestalten und uns anmelden. Und dann müssen wir den Abschnitt „Prototyping“ hinzufügen. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. 10. Melde dich an und melde dich bei Seitendesign an: Nun, wieder willkommen zurück. In diesem Teil beginnen wir mit der Gestaltung unseres Logins, das Ihnen eine UX auszahlt. Normalerweise werden wir dieses Ding designen. Auf unserer Anmeldeseite werden wir also drei von Shows haben. Und auf der Anmeldeseite haben wir zwei Möglichkeiten. Also in erster Linie, was ich gerne hätte, würde ich gerne tun. Lassen Sie mich das also zusammenbrechen. Also brauchen wir noch einen Rahmen. Lassen Sie es mich ausprobieren, schauen Sie es mir an, auf das, unser Hauptdesign, wenn hier etwas fehlt, ist alles in Ordnung. Wir müssen hier nichts tun. Alles sieht gut aus. Wir wollen nichts ändern. Perfekt. Und jetzt hier klicken Sie auf den Rahmen. Wir müssen noch einen hinzufügen, der als Index TO 14 von 14 bezeichnet wird. Und los geht's. Hier. Zuerst ziehe ich, ich werde, ich entwerfen, ich nehme ein gesundes Rechteck. Also füge ich auf dieser Seite ein Rechteck hinzu. Also, aber vorher, lass es mich versuchen. Ich denke, wir müssen ein bisschen auf diese Seite gehen , damit wir sehen können, dass der Mittelwert Paste ist. also statt 47 Prozent Lassen Sie uns also statt 47 Prozent 70 Prozent machen , damit wir einen größeren, größeren Bildschirm erhalten. Oder wir können das einfach ausführen. Also will einfach einfach wieder laufen. Okay, also lasst uns den Namen ändern. Wir können sagen, melden Sie sich an. Das wird alles Anmeldetempo sein. Also werde ich das Designertempo ausführen, damit wir genau sehen können , wie groß unser Rechteck in unserer Anmeldepaste ist. Okay, also braucht es Zeit. Okay, also haben wir mehr Platz dafür genommen. Also werde ich, ich werde, was ich tun werde, ich wähle dieses Rechteck aus. Okay, klicken wir zuerst auf das Down. Ich mache das Ding auf diese Weise. Dann bekommen wir mehr Platz auf der rechten Seite. Für dieses Rechteck werde ich zu unseren MAs hinzufügen, okay, also füge ich ein Bild für dieses hinzu. Ich kann mich dafür entscheiden. Lassen Sie mich versuchen , wer gut aussehen will? Jetzt haben wir das hier. Ich werde das drücken. Okay, es sieht nicht gut aus. Also werde ich das entfernen. Vielleicht der andere. Wir können uns für dieses entscheiden oder vielleicht können wir es versuchen. Was ist hier passiert? Warum drücken wir das also? Okay, also habe ich das entfernt statt immense, ich habe das Ganze entfernt, also sollte ich es nicht auf diese Weise machen. Lassen Sie mich also das Chaos ersetzen. Also werde ich das durch dieses ersetzen. Es sieht also gut aus. Jetzt denke ich, es sieht besser aus als das vorherige, aber es erzeugt ein bisschen Schatten. Aber wir können ein weiteres Bild wählen, was DC-Durcheinander ist. Vielleicht können wir dieses TMS oder das andere versuchen. Der andere ist auch gut. Vielleicht passt dieser genau dieser in diesen kleinen, kleinsten Bildschirm. Ja, es wird passen. Also behalte ich das hier. Und jetzt werde ich Hilfe von diesem Rechteck nehmen, okay, zuerst müssen wir hier einen Text haben. Also schreibe ich hier eine SMS. Wir können „Abmeldung“ sagen. Wir können sagen, abmelden. Lassen Sie mich die Schriftgröße dieses Schriftstücks erhöhen. Also müssen wir es hinzufügen, vielleicht 2032, nicht da. Und hier können wir das hier hinzufügen. Okay, also wenn wir wollen, können wir auch die Farbe dieses ändern, vielleicht auf diese Weise. Was können wir tun? Wir können hier einfach ein Rechteck hinzufügen. Und wir können es auf 20 ändern. Ein bisschen mehr. Vielleicht ist es herzhaft. Und dann können wir unsere Grenze hier hinzufügen. Und wir können den Hintergrund auf Weiß ändern. Cool, es sieht gut aus. Was kann ich jetzt hier machen? Wir können einfach einen Namen hinzufügen hier genannt wird, ist eine Art Platzhaltertexte. Also ziehe ich es her. Und für diesen Platzhalter müssen wir ihn nicht hinzufügen. Vielleicht müssen wir 16 haben. Und los geht's. Wir haben das hier. Jetzt mache ich ihnen einen Gruppenbefehl G. Wir können sagen, dass der Gruppenname lautet, wir können Name, Eingabe, Float, Eingabe, Filter sagen . Und 21 weitere Dinge , die ich tun möchte. Ich will es schaffen. Machen Sie es zu einer Komponente, da wir für das gleiche Design unsere Anmeldungsphase benötigen, damit wir sie wiederverwenden können. Machen Sie es also eine großartige Komponente oder steuern Sie Ultra K, es wird Komponenten machen. So wurde das Symbol farbig, das Symbol wurde geändert und im Asset können wir dies auch sehen. Okay, also lass mich dieses 11 weitere Ding duplizieren , das wir brauchen werden. Also ist dieser Name und diese wird für unsere E-Mail sein , die wir woher nehmen werden? Benutzer? E-Mail. Und dann werden wir nehmen, dafür werden wir Passwort sagen. Okay, also nehmen wir ein Passwort und können hier auch ein Kontrollkästchen hinzufügen , wenn wir das Kästchen ankreuzen wollen, warum nicht? Lassen Sie mich dazu versuchen, dieses Layout-Raster schnell laut zu aktivieren. Dieses Rasterlayout wird also 50 sein. Und wir können unser Kontrollkästchen hier hinzufügen. Also kann ich einfach das Kontrollkästchen hier unten zeichnen. Vielleicht können wir es hier. Ich kann hier ein Kontrollkästchen zeichnen. Und dann kann ich es mit der gleichen Größe kombinieren. Ich meine, der Ausgangspunkt, wir können es erreichen. Nun sieht es so aus, sollte aber die gleiche Größe und das gleiche Gewicht haben. Also haben wir mit 30. angefangen. Ist 30 mal 30. Und vielleicht können wir eine Grenze hinzufügen. Lass mich binden, wie es aussieht. Wenn ich hier einen Rahmen hinzufüge und es aussieht wie D. Also können wir vielleicht die Rahmengröße ändern und dann die Farbe in Weiß ändern. Und wie es aussieht. Es sieht so aus. Aber der graue sieht gut aus. Und ich gebe hier ein bisschen Grenzradius. Cool, es sieht gut aus. Hier. Wir müssen einen Text hinzufügen. Vielleicht können wir einfach sagen, dass wir den Bedingungen und Dienstleistungen, Geschäftsbedingungen zustimmen . Stimmen Sie also den Bedingungen zu. Ich lege es in die Post. Und mal sehen, wie es aussieht. Stimmen Sie also den Bedingungen zu. Es sieht gut aus, dass wir es vom Startpunkt aus begonnen haben . Und cool. Okay, jetzt müssen wir noch einen Button hinzufügen. Warum fügen wir also nicht aus unserer Komponente aus unserer Komponente hinzu, die wir erstellt haben? Weil wir, wir, ich will, weil ich dasselbe haben möchte, weil ich den gleichen Knopf haben möchte. Also statt dieses Namens. Und zuerst denke ich, dass ich nicht schnell haben muss. Lassen Sie mich den Hintergrund dieses ändern. Ich füge diesen Hintergrund hinzu. Ich brauche das nicht Ich brauche diese Grenze nicht hier, also werde ich die Grenze entfernen. Okay, also brauche ich diese Grenze nicht. Mal sehen, wie was kann ich hier sehen? Es scheint, dass ich immer noch diese Grenze habe . Ich weiß nicht warum. Ich habe diese Grenze. Es wurde jetzt entfernt. Ja. Okay. Dieser Schlaganfall wird sie jetzt entfernen. Okay. Also habe ich jetzt keine Grenze. Was kann ich jetzt tun? Ich kann vielleicht versuchen, die Tastenfarbe zu ändern, ein bisschen von dieser Farbe. Ja, wir können es versuchen. Sie können diesen behalten und dann werde ich hier Text bearbeiten und die mittlere Beleuchtung, können wir sagen, melden Sie sich an. Cool. Also werden wir diese Anmeldetexte in der Mitte hinzufügen. Und wir müssen diesen Text etwas größer hinzufügen , vielleicht 24. Und los geht's. Wir können die Abmeldung in diesem Bereich sehen. Es sieht wirklich schön aus, dass wir unser Anmeldetempo entworfen haben. Was können wir hier machen? Wir können auch noch ein paar Dinge hinzufügen, also können wir dieses einfach duplizieren und dann können wir dasselbe für unsere Anmeldung behalten, okay, und wir werden einige Änderungen vornehmen. Was kann ich also tun? Ich werde das ganze duplizieren, ich werde diesen gesamten Frame duplizieren. Befehl D. Cool. Dann ändere ich den Namen, um mich hier anzumelden , also Anmeldeseite. Also hier werde ich die Änderungen vornehmen. Anstatt mich anzumelden, werde ich mich anmelden lassen und ich muss Nim nicht auf meiner Anmeldeseite haben oder es tut mir leid. Ich muss den Namen nicht füllen lassen. Was kann ich jetzt tun? Ich ziehe es diesem einfach ein bisschen näher. Und wir brauchen dieses Kontrollkästchen auch nicht hier. Und statt dessen. Okay, also glaube ich, dass ich das nicht gemacht habe. Dieser und dieser, nur um es zu einer Gruppe zu machen, pausierte. Ich kann sagen, dass ich es auf der Anmeldeseite machen könnte , aber ich habe vergessen, es zu tun. So können Sie es gruppieren , damit wir es einfach verfolgen können. Jetzt die Anmeldung. Es ist also noch keine Gruppe. Also diese untere Anmeldung und Anmelde-Deck und diese Unterseite und ist nicht Gruppierung aufheben. Jetzt denke ich, dass es so ist. Okay, jetzt können wir es einfach ein bisschen näher bringen und es sollte in der gleichen Linie sein. Und dann können wir es auch auf diese Weise anpassen. Okay, mal sehen, was können wir jetzt sehen? Cool. Wir sollten das hier sehen können. Aber ich bin mir nicht sicher , was genau los ist. Das ist also unsere Anmelde-Paste und wir haben unsere E-Mails, und diese war unsere Anmeldeseite. Wir haben also unsere Anmeldezahlungen, unsere Anmeldebasis, und wir haben unseren Text. Das wird für mich keine Decks statt Desktop sein, ich werde den Namen ändern, wir können zu Hause sagen. Okay, also werde ich hier ein bisschen ändern. Dies sollte also im mittleren Knoten oben sein, auf diesem. Okay, also vielleicht auf diese Weise. Lass mich das laufen und mal sehen, wie es aussieht. Ich wähle dieses aus. Und wenn wir diesen führen, sollten wir es sehen können. Jetzt können wir zu einem anderen Tempo navigieren , weil wir noch nicht über das Prototyping verfügen, aber ich hoffe, dass wir es schaffen werden. Im nächsten Teil sieht es jetzt gut aus. Melden Sie sich also an. Und eine andere Sache, die ich hier vergessen habe hinzuzufügen, ist, dass wir hier einen Text hinzufügen können. Ich kann sagen, ich habe vergessen , diesen hinzuzufügen. Also sollten wir hier einen Text haben und wir sollten hier einen Text hinzufügen. Und wir können sagen, dass Sie bereits Kontoanmeldung haben , melden Sie sich hier an. Also können wir es einfach von dieser Seite aus beginnen und ich werde es duplizieren lassen. Dann bringe ich es hier im Anmeldetempo zum nächsten Teil , denn wir müssen hier noch einen Text haben. Wir können sagen, ich habe kein Konto, melde mich hier an und muss nur den Text ändern. Wir können sagen, dass Sie kein Konto haben. Ich kann sagen, melde dich nie hier an. Okay, perfekt. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. Tschüss. 11. Prototyping mit Animation: Willkommen zu dieser Vorlesung. In diesem Teil werden wir Arbeit an unserem Prototypbereich beginnen. Bisher haben wir das entworfen. Es gibt drei. Reframe oder sie zahlt. Eine davon ist die Homepage, also eine ist unsere Anmeldeseite, und dann ist eine unser paarweise Zeichen. Jetzt können wir von diesem Ort zu diesem Anmelden wechseln oder Einfügen anmelden. Deshalb müssen wir unseren Prototyp hier hinzufügen und ich werde es in diesem Teil tun. Um also einen Prototyp hinzuzufügen, können Sie hier direkt neben diesem Design sehen , dass wir eine Registerkarte namens Prototyp haben. Also klicke ich auf diesen Prototyp. Sobald Sie auf diesen Prototyp klicken, haben Sie jetzt die Möglichkeit, einen Prototyp hinzuzufügen, okay? Wenn der Benutzer also auf das Anmeldetempo klickt und der Benutzer auf die Anmeldeseite klickt, möchten wir ihn in das Anmeldetempo schicken. Wenn sie auf die Anmeldeseite klicken, möchten wir sie an die Anmeldeseite senden. Fügen wir also so schnell einen Prototyp für die Anmeldung hinzu, Sie müssen genau auf diesen Anmeldetext klicken und Sie können sehen, dass das Häkchen der linken Seite ausgewählt wurde Wählen Sie nicht die ganze Gruppe aus, okay. Nur die Texte, nur die Gruppe oder Button, den Sie für uns machen möchten. Hier haben wir diese SMS abmelden. Wenn ich jetzt darauf klicke, kann ich es ziehen, vielleicht hier oder andere Komponenten. Wenn ich also zur Anmeldepaste gehen wollte , kann ich es einfach machen. Und sobald ich das fallen lasse, wird sich hier ein kleines Pop-up lösen. Und hier können wir unsere Prototypoption auswählen. Okay, also zum Beispiel, welche Art von Prototyp wir haben wollen ? Klicken Sie auf oder auf Droge oder bewegen Sie die Mouseovermaus, lassen Sie die Maus unten und einige andere Optionen. Für uns wollen wir uns jetzt nicht mehr klicken lassen. Dies bedeutet, dass der Benutzer auf die Anmeldeseite klickt. Wir schicken sie zur Anmeldepaste. Deshalb müssen wir bei Klick auswählen. Wenn Sie einen Jagger und Drag & Drop hinzufügen möchten, müssen Sie diese Art von Dingen tun, okay, je nach Anforderung. Also klicke ich auf den onclick. Und dann müssen wir hier navigieren auswählen , weil wir von einem Frame zu einem anderen Frame navigieren werden . Wir sind zu Hause und wollen uns aber bewegen, um das Tempo anzumelden. Daher müssen wir diese Navigation hinzufügen und sie haben einige andere Optionen. Öffnen Sie beispielsweise Overlays, Tupfer-Overlay, schließen Sie das Overlay offen zurück und einige andere Optionen. So öffnen Sie Overlays Art Modellbox. Wir werden es hier jetzt nicht besprechen. Also klicke ich darauf, navigiere dorthin, wo wir hin wollen. Wir haben diese Anmeldung bereits dort ausgewählt. Der Grund, warum sie Unterzeichner sind, wird ausgewählt. Aber hier kannst du es auch verschieben. Sie können auch Anmelden auswählen. Dann wählt es unsere Anmeldeseite aus. Aber wir wollen zurück zu gehen, wir wollen zur Anmeldepaste wechseln. Und jetzt gleich danach haben wir unsere Feinde und Sektion. Wenn also, während unser Benutzer auf das Anmeldetempo klickt, wenn wir irgendeine Art von Animation anzeigen möchten, können wir dies tun, indem wir hier klicken, können Sie diesen Augenblick statt sofort sehen, wir können einfach sagen bewegen rein, raus, schieben Sie hinein, rutschen Sie heraus. Also wähle ich aus, oder ich kann auch Slide in auswählen. Es wird so aussehen. Und wir können diesen auch hier von links auswählen, von unten nach oben, von oben nach unten. Und was ist mit dieser kleinen Animation? Wir werden diese Option auch haben, um dies zu sehen. Das wird uns diese Art von Idee geben. Und auflösen ist so. Und ausziehen ist so und so. Okay, also haben wir diese Möglichkeiten hier. Und dann wird Push so aussehen. Okay, du kannst also auch sehen, wie es aussehen wird. Also werde ich diese Folie benutzen. Und jetzt werde ich es sehen, was wir hier sehen können? Das ist also unsere Basis und wir haben unsere Anmeldung. Und wenn ich auf diese Abmeldung klicke, sehen wir unsere Anmeldebasis. Cool. Es sieht echt nett aus. Mir ist gerade aufgefallen, dass wir hier noch eine Sache hinzufügen sollten. Lassen Sie uns zuerst das Prototyping von Sean abschließen. Okay, also müssen wir jetzt sicherstellen, dass, okay, und noch eine Sache, dass auf die Anmeldeseite schicken sollten, wenn der Benutzer auf die Anmeldeseite klickt wir sie auf die Anmeldeseite schicken sollten, wenn der Benutzer auf die Anmeldeseite klickt. Wenn ich also darauf klicke, können wir sie jetzt in unser Anmeldetempo schicken und dann zum Einfügen deaktivieren. Lassen Sie mich also von der Anmeldung bis zur Anmeldung hierher kommen und wir können es auch hier hinzufügen. Also unterschreiben wir die Anmeldung. Und von hier aus werde ich, anstatt zu rutschen, sagen wir leicht oder kann, wir können hier eine Folie geben, auch die gleiche Animation. Jetzt versuchen wir es mal. Wir müssen es schnell ausführen. Und von hier aus müssen wir auch Prototyping hinzufügen. Wenn Sie also bereits ein Konto haben, können wir es einfach zum Unterzeichnungstempo schicken. Okay. Also werde ich sicherstellen, dass Sie diesen sehen können Jetzt klicke ich auf die Anmeldung. Wir entwerfen also Paste jetzt müssen wir Prototyping für diese beiden Texte hinzufügen. Okay, also wenn es im Anmeldetempo gibt , schicken wir sie. Okay. Dann senden wir sie Ihnen zu, die in Ich habe bereits ein Konto. Das bedeutet, dass entweder bereits ein Konto vorhanden ist, sodass sie sich einfach anmelden können. Also werden wir zur Anmeldung navigieren. Dann fügen wir dieses Schieben hinzu. Und wenn wir von den zuweisenden Paaren kein Konto haben, können wir sie zur Anmeldebasis senden. Okay, also sollten wir jetzt darauf klicken können. Lassen Sie sich also kein Konto hier anmelden. Ich klicke auf. Also sind wir im Anmeldetempo und haben bereits ein Konto, melden uns hier an und melden uns dann an. Was können wir jetzt tun, wenn der Benutzer auf den Anmelde-Button klickt? Wir geben ihnen Zugang zu unserem Zuhause. Okay, wenn ein Benutzer auf die Schaltfläche „Anmelden“ klickt, geben wir ihm Zugriff auf. Wir geben ihnen Zugriff auf unsere Homepage. Also können wir dieses anklicken. Und dann können wir onclick sagen, dann kommen wir nie von hier zur Homepage. So können wir also auch unsere Navigation hinzufügen. So haben Sie zum Beispiel vielleicht 50 oder 60 Seiten. Zu dieser Zeit wird es für Sie sehr schwierig sein, diesen von hier nach dort zu ziehen , auf Ihren gewünschten Bildschirm. In der Interaktion kannst du einfach dein hinzufügen, du kannst einfach alles hinzufügen . Ich meine, Sie sind Prototyping-Option. Sie können einfach auswählen, klicken, zum Bildschirm und dann den Instant navigieren. Also für diese, die Animation, die ich werde, wähle ich aus. Lass mich versuchen, wie es aussehen wird. Also wähle ich „Auflösen“ aus. Mal sehen, wie es aussieht. Also wenn ich auf diese Anmeldung klicke und hier geht's. Also sind wir jetzt in dieser Home-basierten Coolness. Es sieht echt nett aus. Deshalb haben wir unser Prototyping erfolgreich hinzugefügt. Jetzt lass es mich noch einmal versuchen. Wir sind im Unterzeichnungstempo. Ich habe kein Konto hier angemeldet. Wir befinden uns auf einer Anmeldeseite und haben dann bereits ein Konto hier angemeldet. Und dann melde dich an, melde dich hier an. Habe bereits ein Konto angemeldet. Und von hier aus weisen wir und wir müssen hier eine weitere Option hinzufügen. Wenn ich also auf die Schaltfläche „Registrieren“ klicke, wird es nichts tun. Was ich haben möchte, wenn Sie auf die Anmeldung doppelklicken, bedeutet das, dass sie es erfolgreich gemacht haben. Dann können wir sie schicken, um sich anzumelden. So können wir hier in unserer Anmeldebasis noch ein Prototyping hinzufügen . Ich schlüpfe das hier aus. Und dann indirekt gezeigt. Also die Clique, also aufklicke und navigiere dann zu und statt keiner werde ich sagen, melden Sie sich an. Und was kann ich dann statt sofort sagen? Ich kann sagen „rutschen“. Okay, cool. Wenn ich also auf dieses Abmelden klicke, unterschreiben wir. Und wenn ich auf die Anmeldung klicke, sind wir in unserer Heimatbasis. Also haben wir diesen Prototyping-Abschnittsschlüssel hinzugefügt. Was sind wir sonst noch übrig? Ich denke, wir haben alles getan , was wir in unserem Projekt haben wollten . Und ich hoffe, dass ihr viel von diesem Kurs gelernt habt , weil wir unser komplettes Web entworfen haben. Und es wird dir sehr helfen. Es wird Ihre nächste in Ihrem Portfolio verfügbare Option hinzufügen. Dies ist also unser voll funktionsfähiges komplettes Design UX, das wir gerade fertiggestellt haben. Und unser Prototyping funktioniert auch. Und alles funktioniert einwandfrei. Überhaupt kein Problem. Okay, also danke, dass du diesen Kurs angemeldet hast. Tschüss. 12. Exportiere dein Design und teile Link: Willkommen wieder einmal zurück. In diesem Teil zeige ich Ihnen, wie wir unser Design exportieren und teilen können . Wir haben unser Projekt abgeschlossen, wir haben alles entworfen. Wir haben unseren Prototyp gemacht. Jetzt ist es an der Zeit, unser Design mit dem Team oder den Menschen auf der ganzen Welt zu teilen . Oder vielleicht arbeitest du in einem Team. Sie müssen also den Link teilen oder das Design an das Entwicklungsteam weitergeben Design an das Entwicklungsteam , damit es die App erstellen und ihre Programmierung und Sachen schreiben kann. Okay, also wie kann es jetzt gehen? Es gibt nichts zu Aura ist sehr einfach. Jetzt gehe ich zu diesem Designteil. Das ist also unsere App und alles funktioniert einwandfrei. Nichts zu früh. Also haben wir alles gemacht und uns dann angemeldet, dann alles. Wir haben also drei Frames, also können wir es jetzt zum Beispiel exportieren, zuerst werde ich diese Homepage exportieren. Okay, wie kann ich das machen? Wählen Sie also den Rahmen aus, und unten haben Sie die Option Exportieren. Jetzt können Sie von hier aus Exportoptionen auswählen. Also welche Art von Format einzigartig, vielleicht PNG JPEG oder SPC. Sagen wir, ich will JPG. Und dann klicke ich auf Home exportieren. Dann wird es heruntergeladen. Wenn ich jetzt darauf klicke, kann ich das Design sehen. Okay, das ist das Format und ich kann einfach hineinzoomen, und dann kann ich einfach das ganze Design im JPEG-Format sehen . Sie können auch ein anderes Format ausprobieren. Und es sieht echt gut aus. Okay, auf diese Weise können Sie jeden einzelnen Frame herunterladen , den Sie entworfen haben. Jetzt laden wir den Anmelde-Frame herunter, also glatter Abmelde-Frame. Und unten können Sie einfach wieder Exportieren sagen, JPEG, und dann können Sie exportieren, sich registrieren. Wenn ich jetzt auf die Anmeldeseite klicke, sehen wir jetzt, dass unsere Anmeldeseite heruntergeladen wurde. Wir haben unsere Anmeldeseite heruntergeladen. Klicken Sie nun auf die Anmeldeseite und es geht gleich. Es spielt also keine Rolle, wie viele Sie haben. Sie können einfach Ihren Frame auswählen und dann einfach herunterladen. Und Sie können auch zweimal, dreimal, viermal herunterladen , vielleicht müssen Sie eine Datei einreichen und Sie können einfach auswählen, Sie können mehrere Mal hinzufügen, dann wird es drei heruntergeladen mal. Also brauche ich nur einen. Also wähle ich JPEG aus und exportiere dann die Anmeldung. Und lass es mich überprüfen damit wir sehen können, dass unsere Anmeldeseite hier ist. Nun, das Wichtigste ist, wie man diese Datei an irgendjemanden weitergibt. So können Sie die Option „ Teilen“ sehen, klicken Sie darauf. Und dann siehst du hier ein paar Anweisungen. Also um es genau zu lesen. Hier sagen sie , dass Sie diese Datei schnell von Jobs in ein Projekt verschieben, um Editoren hinzuzufügen . Sie können es in eine Projektdatei machen und dann einen anderen Typ hinzufügen. Sie können also eine E-Mail-Adresse für Personen hinzufügen und dann erhalten sie eine Einladung. Und hier sehen Sie Set-Rolle davon. Zum Beispiel können Sie ihnen einfach die Erlaubnis geben, sie zu sehen. Sie möchten ihnen keine Berechtigung zum Bearbeiten erteilen. Okay, wenn Sie jetzt auswählen, können Sie es essen und wenn Sie den Emulab ablegen und wenn Sie dann die Einladung senden, wird die Person die Einladung erhalten , Zugriff auf Ihren, diesen Rahmen zu Ihre gesamte Datei in diesem Projekt zu bearbeiten und zu aktualisieren. Okay? Wenn Sie sie nur zeigen möchten, klicken Sie einfach auf Can View. Und dann kannst du es auch auswählen. Jeder, der zuhört, nur Leute, die zu dieser Datei eingeladen wurden, und viele Sicherheitsoptionen haben sie. Und im Allgemeinen können Sie aber auch auf den Link Kopieren klicken. Um mit diesem Link zu enden, können Sie dann teilen und dann kann jeder auf diesen Link zugreifen. Wenn ich es zum Beispiel hier hinzufüge, habe ich eine Option. Also bin ich schon in diesem Browser. Also werden sie definitiv eine Option haben, aber öffnen wir unseren Öffnen Sie einen anderen Vogel-Browser im kognitiven Browser. Und hier füge ich es ein. Und mal sehen, was wir hier sehen können. Also wird es das Stück laden. Und hoffentlich werden wir unser Projekt hier sehen können . Und trotzdem dauert es einige Zeit. Okay, cool. Also hier ist unsere vollständige Akte. Sie können sehen, dass dies unsere vollständige Datei ist. Wir sind nicht eingesperrt. Figma fragt uns, was wir noch auf unser Design zugreifen können , auf unsere Datei zugreifen und dann können wir es sehen, aber wir haben keinen Zugriff, um es zu bearbeiten. Wir können hier alle Änderungen vornehmen. Wir können hier alles ändern. Wir können es uns einfach hier ansehen. Wir können es einfach hier sehen. Cool. Und dann schaffe ich es. Dies ist die Homepage, das ist das Anmeldetempo, und dies ist das Zeichen paarweise. Okay? Und so wird es aussehen. So können Sie Ihr Projekt teilen. Sie entwerfen mit jedem, Sie können herunterladen, Sie können jedem Zugriff auf Ihr Projekt gewähren. Und so funktioniert es hauptsächlich. Ich hoffe, Sie haben gepflanzt und danke Ihnen, dass Sie sich für diesen Kurs eingeschrieben haben.