Figma Fashion Web App UI/UX - Gestalten einer kompletten Web APP UI/UX - Figma erfahren Erweiterte Features

1. Einführung: Willkommen bei dieser figma Web-App, UI UX Designkurs. Mein Name ist Danny Chelsea und ich werde dein Lehrer in diesem Kurs sein. In diesem Kurs entwerfen Sie eine komplette Mode-Web-App, UI UX. Dies ist also die komplette App, die Sie in diesem Kurs entwerfen werden. Während Sie diese Web-App entwerfen, kann UI UX UI Alarm und verschiedene Arten von Techniken und Best Practice von Figma alarmieren. Ich zeige Ihnen, wie können Sie Ihr Projekt vorbereiten? Wie können Sie Systemdesign, Farbsystemdesign, Rastersystem, Komponenten erstellen, Gruppen erstellen und so viele Dinge ausführen Rastersystem, Komponenten erstellen, . Werfen wir einen Blick auf die App, die Sie in diesem Kurs entwerfen werden. Dies ist also die komplette App , die Sie hier entwerfen werden . Also oben haben wir unseren Navigationselement und dann haben wir unsere netten Heterosexuellen. Und danach haben wir unsere Damenmode-Artikel, Männermode-Artikel. Wir haben unsere Taube gezeigt, und dann Kategorie Abonnement sexuell und unsere Fußzeile. Hier im Hauptbereich können wir sehen, dass wir diesen horizontalen Scroll-Button haben. Wenn ich also auf den Horrigan klicke wird diese Chromatid horizontal scrollen. Ich klicke hier. Es wird wieder auf die erste Position gehen. Auch wenn wir dies tun, können wir Sie auch Horizontal verteilen. Wir werden auch lernen, wie man diese Art von Scroll-Scroll-Ansichtsoptionen in Figma macht. Und wenn ich auf diesen Artikel klicke, können wir sehen, dass ein Modell mit unseren Modeartikeln Informationen in der Modellbox arbeitet . Wir haben auch diese Ausbuchtung auf den besten Esco-Optionen. So können Sie Ihre Artikel auf diese Weise erledigen oder einfach auf den Button klicken und dann haben wir unsere Informationen, und danach haben wir dieses Schließsymbol. Wenn ich hier klicke, wird es entfernt. Und wenn ich es wieder öffne und wenn ich auf unsere Seite klicke, wird es auch von hier entfernt. Und zweitens, während Sie diesen Kategorieabschnitt entwerfen, lernen Sie, wie Sie mit Bildern arbeiten. In Figma sehen Sie verschiedene Arten von Formen, die ich in diesen Bildern in diesem Abschnitt der Saftkategorie hinzugefügt habe. Also zeige ich dir, wie man Bilder auswählt wie man mit Bildern in Figma arbeitet. Und dann haben wir unsere Abo-Abschnitte und unsere Fußzeilenbereiche. Sie werden auch eine Menge Dinge über Figma-Plugins lernen . Sie können all diese Icons sehen, die wir in dieser Web-App haben, die ich vom Plugin verwende. Sie werden also auch lernen, wie Sie eine andere Art von Plug-Ins für Symbole und andere Stopps verwenden . Und wir haben auch unsere Anmeldefunktionen. Wenn ich also auf „Registrieren“ klicke, wird unser modales Pop-up angezeigt. Und das obwohl das Anmeldeformular. Wenn ich auf die Anmeldung klicke, kann ich zur Anmeldeseite wechseln. Und von der Anmeldung habe ich ODP-basiert. Und nachdem wir dieses RTP überprüft haben, werden wir in der Lage sein, unser Zuhause zu Hause zu nutzen. Und eine Sache ist hier bemerkbar , dass wir, während wir die Anmeldung zeigen, ein wenig Animation und den Übergang von verschiedenen Seiten sehen können . Was Sie also mit dieser Art von Prototyp tun werden, werden Sie lernen, wie Sie Animationen verwenden, überlagern und verschiedene Arten von Prototypen, Funktionalitäten, zum Beispiel durchforsten. Wenn ich also darauf klicke, können wir sehen, dass die Anmeldung von der rechten Seite kommt. Und wenn ich auf die Anmeldung klicke, kommt es von oben. Und wenn ich auf die Peripherie klicke, ist sie weg. Und jetzt können wir unsere Homepage sehen. Hier läuft es genauso. So können Sie zum Zeitpunkt des Angebots wenig Animation sehen. lernen Sie auch, wie man Prototyping durchführt In diesem Kurs lernen Sie auch, wie man Prototyping durchführt. Dieser Kurs wird Ihnen sehr helfen, Ihre Fähigkeiten zu verbessern. Und am wichtigsten ist, dass Sie nach Abschluss dieses Kurses ein komplettes Projekt haben, das Sie Ihrem Portfolio hinzufügen können. Deshalb werde ich mich verstecken und dich ermutigen, diesen Kurs zu genießen. Wir sehen uns in der Klasse. 2. Project und Color: Willkommen zu dieser Vorlesung. In diesem Teil werden wir anfangen, an unserer Mode- oder Web-App UX zu arbeiten . Sobald Sie sich bei Ihrem Figma-Konto anmelden, sehen Sie diese Art von Benutzeroberfläche. Jetzt haben wir von hier aus eine neue Designdatei, die so schnell erstellt werden muss, wir die InDesign-Datei öffnen müssen. Und danach müssen wir unsere Freunde auswählen. Hier in der oberen Leiste sehen Sie normalerweise alle Tools oder Figma. Von hier aus müssen wir einen Frame auswählen. Also wähle ich den Rahmen hier im Ausschlag in dieser Ecke aus. Es wird dir ein paar Optionen geben. Unter diesem Deckstopp wähle ich diese Indizierung von Optionen aus. Jetzt gibt es uns einen Rahmen, oder? Also werden wir diese Art von Mode im Grunde nirgendwo entwerfen, aber nicht genau das Gleiche, weil wir ein paar weitere Funktionen und ein paar Änderungen hinzufügen werden, nicht nur für Referenzzwecke, damit wir einfach darauf schauen können , welchen Abschnitt wir haben. Okay, also lasst uns jetzt so schnell zu den Projekten übergehen , bevor wir mit einem Design beginnen. Es ist immer eine kluge Entscheidung, Ihr Systemdesign zu bevorzugen , damit Sie wissen, welche Art von Farbe, welche Art von Brücke, welche Art von Brücke, welche Stil, den Sie verwenden möchten. Und dann kannst du es auf diese Weise wiederverwenden. Sie können Ihr Design für alle Seiten gleich gestalten. Es wird Ihr Projekt organisieren und es wird pixelperfekt aussehen. Okay, so schnell. Und wir müssen ein Layout-Raster erstellen. Also werde ich hier ein Layout-Raster erstellen, und es wird uns diese Art von Raster geben, aber ich möchte nur eine Spalte haben. Deshalb wähle ich die Spalte aus und dann werde ich 15 haben. Und dann können wir von dieser Seite auf diese Seite arbeiten . Ich meine, welche Daten wir auch hinzufügen werden, wir werden von dieser Seite auf diese Seite hinzufügen. Jetzt werde ich es schaffen R. Jetzt werde ich es zu einem Stil-Layout-Raster machen , das Token ungeheuerlich erzählen. Also wähle ich das Raster aus, klicke dann auf dieses Symbol, dann klicke ich auf dieses Plus und ich kann Hauptrasterspalte sagen. Okay? Jetzt wird es hier sparen. Aber wenn ich jetzt sagen wir, dass ich einen weiteren Frame erstellt habe, dann kann ich einfach diesen Frame von hier aus auswählen, aus dem Raster und dann kann ich ihn einfach wiederverwenden. Okay, so können wir einen Abstand von der linken und rechten Seite einhalten. Und wir können ein Wochenende, wir wissen, dass von wo aus wir unser Design beginnen müssen. Jetzt erstellen wir noch einen. Design ist ein Designsystem , das für Farbe bestimmt ist. Also habe ich dafür ein paar Farbcodes ausgewählt. diesen Farbcode hinzuzufügen, füge ich nur ein zufälliges Rechteck hinzu und dies ist mein Farbcode , den ich haben möchte. Sie können also einfach diesen Farbcode schreiben oder Ihren eigenen farbcodierten verwenden, spielt keine Rolle. Nun, dieses Rechteck ist ausgewählt, und dies ist der Farbcode. Also ersetze ich diesen Farbcode einfach durch meinen Farbcode und klicke dann auf. Dieser Prozess ist fast der gleiche. Und dann können wir hier ein paar vorgefertigte Farben sehen , die Figma hinzugefügt hat. Aber wir werden keines davon benutzen. Also klicke ich drauf. Dies heißt, da dieser Artikel ausgewählt ist und ich diese Farbe hinzugefügt habe, können wir diese Farbe sehen. Und hier kann ich Primärfarbe sagen. Sobald ich einen Stil kreiere, wird er hier bleiben. Erstellen Sie jetzt ein weiteres Rechteck. Jetzt haben wir dieses Feld, wir haben diese Farbe. Wenn ich jetzt auf diesen Stil klicke, dann kannst du sehen, dass dies unsere Primärfarbe ist , die wir gerade erstellt haben. Okay, jetzt läuft es genauso. Dafür. Ich möchte einen anderen Farbcode haben. Und ich habe diesen Farbcode, der darin enthalten ist. Also wähle ich das hier aus. Und ich sage, das ist für die Fußzeile. Und dann erstelle ich hier noch ein Rechteck. Und dann habe ich noch einen Farbcode. Sie können also einfach so viele Farben hinzufügen wie Sie für Ihr Projekt haben und dann einfach Ihren Stil hinzufügen. Dann kann ich den Button „Abonnieren“ sagen. Danach haben wir noch einen. Und jetzt werde ich diese Farbe in diese Farbe ändern. Und ich kann sagen, es ist ein östliches Raster für Kategorienhintergrund. Ich kann einfach versuchen, ein sinnvolles Labor hinzuzufügen , damit es sinnvoll ist. Und wenn Sie später etwas ändern müssen, können Sie es leicht verstehen. Und haben wir noch einen Farbcode, welcher das sein wird? Und dieser hier geht auf unsere Schaltfläche „In den Einkaufswagen“. Jetzt, sobald ich jetzt alles habe, kann ich das entfernen. Jetzt brauche ich keine Objekte, da unsere Farbfarbe bereits in unserem Farbstil gespeichert ist . In erster Linie haben wir diesen Hintergrund auf dem Kopf. Lassen Sie mich einen Hintergrund hinzufügen, also scheint es, dass wir immer noch einen haben. Also entferne ich es. Jetzt haben wir das hier. Also wähle ich von hier aus ein Rechteck aus und entwerfe dieses Rechteck für unseren Header. Und dann haben wir unsere Farbe immer noch richtig , die wir gerade geschaffen haben. Und Sie können sehen, dass der Farbcode hier ist. Ich wähle diesen einen Farbstil aus. Wenn ich es jetzt ausführe, wenn ich das ausführe, wähle diesen Frame aus. Es tut mir leid, wir müssen diesen Frame auswählen, um es auszuführen. Okay, also ist die Verbindung unterbrochen, also ist das der Grund. Der Rahmen ist also ausgewählt. Und wenn ich dann darauf klicke, öffnet es sich. Und um auf jeden Fall zu arbeiten, gibt es nichts zur Sorge. Wir haben gerade ein Rechteck hinzugefügt und ich füge das hinzu. Damit wir unseren Rahmen sehen können, können wir unser Layout sehen. Ich glaube, wir können diese Höhe behalten. Ich wollte nur die Höhe sehen ob sie größer oder kleiner ist. Lass es mich neu anordnen und dann mit diesem kombinieren. Ruf an. Es sieht echt nett aus. Und wir können diese Höhe für unser Rechteck beibehalten. Also höre ich dieses Video genau hier auf. Und in unserem nächsten Vortrag werden wir all dieses Thema gestalten. Wir sehen uns also in der nächsten Vorlesung. Tschüss. 3. Navigationsleiste und Header: Hallo, Willkommen zu dieser Vorlesung. In diesem Teil werden wir diesen Header-Abschnitt so gestalten, dass wir sehen können ein EMS haben und dann haben wir diese Dido und Barto und ein bisschen Grund hier. Also füge ich zuerst das Bild hier hinzu, ich muss dieses Rechteck hier auswählen. Ich wähle dieses Rechteck hier aus. Und dann doppelklicke ich darauf, damit ich hier ein bisschen Design machen kann. Was kann ich hier machen? Doppelklicken Sie einfach hier. Und dann muss ich dieses auswählen. Und los geht's. Also möchte ich von diesem Regal hier haben. Und danach muss ich auf Fertig klicken. Jetzt muss ich von hier aus diesen Ort auswählen, MS, damit ich das Bild hier auswählen kann. Also füge ich das Bild hier ein. Jetzt können wir dieses EMS sehen und ich füge es hier hinzu. Jetzt. Es sieht gut aus. Was kann ich jetzt tun? Ich denke, ich kann das einfach auf diese Weise anpassen. Und danach haben wir das, also können wir auch den Namen dieses ändern. Also benenne ich diesen Namen um. Ich sage eines der beiden Bilder. Es ist also immer eine bewährte Vorgehensweise, den Namen Ihres Artikels oder Ihres Groove hinzuzufügen Ihres Artikels oder Ihres , damit Sie später leicht identifizieren können. Und jetzt müssen wir diese Art von Design hinzufügen. Dafür, was ich tun werde, erstelle und wähle ich hier unsere Ellipse aus. Und es sollte die gleiche Größe und das gleiche Gewicht haben, vielleicht 25 mal 25. Und dann füge ich eine Farbe hinzu. Fügen wir also die gleiche Farbe hinzu. Also füge ich diese Farbe hier hinzu. Aber was ich tun werde, werde ich, was ich tun werde. Okay, also müssen wir zusätzliche Farbe für diesen hinzufügen. Das ist also die Farbe , die wir haben, nachdem wir hier ausgewählt Wir können einfach den Kontrast dieser Farbe ändern , damit ich 50% sagen kann. Dann wird es so aussehen, aber wir müssen eine andere Farbe verwenden. Also wähle ich diese Farbe aus und dann muss ich darauf klicken. Ändern wir es auf 50 Prozent. Ja, vielleicht 40 Prozent. Aber wir müssen diesen Effekt nicht haben. Ich werde diesen Effekt hier entfernen und mal sehen, wie er aussieht. Es ist also außerhalb von diesem. So sieht es dieser Farbe ähnlich aus. Und was ich jetzt machen werde, werde ich machen, ich werde es ein paar Mal duplizieren. Und ich werde es hier zeichnen. Um ein Duplikat zu erstellen, müssen Sie nur dieses auswählen und D steuern oder mit der rechten Maustaste klicken und kopieren und einfügen. Und jetzt dupliziere ich es ein paar Mal. Control D, Control D. Jetzt haben wir all diese Ellipse. Also was ich tun werde, werde ich sie zu einer Gruppe machen, damit wir es können, ich drücke Control G oder von hier aus kannst du Gruppenauswahl sagen. Dann mache ich noch eine andere, jetzt weiß ich, dass ich diese Gruppe duplizieren werde , damit wir hier etwas Design bekommen. Jetzt haben wir zwei Gruppen, Gruppe eins und Gruppe zwei. Und in dieser Gruppe kann ich sagen, Heizblätter. Also haben wir dieses Ding jetzt hier. Ich ziehe es her. Ich mache ein Duplikat davon und lege es hier hin. Aber dieses Mal müssen wir vertikal essen, also werde ich es auf diese Weise drehen. Und dann lege ich es auf diese Seite. Und los geht's. Mal sehen, wie es aussieht. Es sieht gut aus. Und ich werde es in die gleiche Größe legen. Okay, jetzt haben wir einen Text und Knöpfe. Fügen wir diesen Titel also schnell hinzu. Also wie lautet der Text hier? Finde dein Kleid hier. Wir können verschiedene Texte hinzufügen. Und das ist ein anderes Problem. Also werde ich es tun, okay. So können wir jetzt wieder aktivieren, dass wir wieder gehen, tut mir leid, ich werde diesen Text zuerst von hier entfernen. Wir brauchen diesen Text nicht hier. Und ich werde dieses Raster noch einmal hinzufügen und wir werden mit unserem beginnen, wir werden anfangen, unseren Text daraus hinzuzufügen. Toll, also füge ich diesen Text hier hinzu und ich sage, ich werde sagen, ich werde sagen, gut zur Mode hier. Ich kann sagen, oh, alles macht es Kapital. Gut für dich. Hier. Und jetzt werde ich die Schriftgröße dieses auf 48 erhöhen. Es sieht gut aus, ich denke 4848, vielleicht 36, also können wir wählen. Und ich werde die Farbe dieses Textes ändern. Ändern Sie also die Farbe dieses. Vielleicht können wir die weiße Farbe wählen. Welche Farbe wird nicht gut aussehen. Also können wir versuchen, eins zu blockieren, ich schätze, schwarze ist hier gut. Das ist kein Problem. Also können wir diese schwarze Farbe wählen, aber die Milz ist nicht gut, also werde ich Abwechslung haben. Also muss ich schreiben, um hier deine Mode zu finden. Und hier geht es so gut zur Mode. Und danach haben wir noch einen Text. Also fange ich es von hier aus an. Und der Text ist wählen Sie Ihr Kleid aus Erlaubt Collection. Also können wir einfach hier schweben. Sklave zu deinem Kleid von online. Aber dieses Mal benötigen wir eine kleinere Textgröße, also brauchen wir nicht die gleiche Größe. Vielleicht können wir Maximum auf D6 und nicht genau 20 wählen. Ich wähle es 20 aus. Und danach werden wir hier unseren Button hinzufügen. Jetzt füge ich es hinzu, stell es so aus. Wenn Sie es also auf diese Weise tun, können Sie sehen, dass diese Punktlinie behindert wird, was bedeutet, dass beide vom selben Startpunkt aus gleich groß sind . Jetzt müssen wir unseren Button entwerfen. Also entwerfe ich hier unseren Button. Und der untere Name wird jetzt scharf sein. Also fange ich es von hier aus an. Das wird also unser Button sein. Und hier füge ich zuerst diesen Randradius hinzu , um den Grenzradius 20 hinzuzufügen. Und dann muss ich hier einen Text hinzufügen. Also sage ich jetzt Shop Now. Und noch einmal, und wir müssen die Schriftgröße dieses Schriftstücks ändern. Es ist nicht eng sechs wird 16 sein. Und ich stelle es in die Mitte. Und los geht's. Wir haben diesen Shop Now Text und jetzt schnell, mach ihn zu einer Gruppe. Also wird dieses Tool eine Gruppe sein und wir können jetzt den Knopf scharf speichern. Von hier aus müssen wir die Hintergrundfarbe ändern. Also müssen wir die Hintergrundfarbe ändern. Was können wir also tun? Wir können unsere Farbe hinzufügen. Für diesen Text können wir weiße Farbe hinzufügen. Jetzt haben wir diesen Shop Now Button und finden Ihre Mode hier. Was haben wir sonst noch übrig? Wir haben einen Button. Und dann kann ich eine Sache, die ich tun kann, die Größe des Knopfes verringern. Und dann kann ich es einfach hier ablegen. Und wir haben den Text hier, den wir schreiben können. Wir können den Text hier ablegen. Und ich kann, ich denke, wir müssen das ziehen. Möglicherweise sehen Sie es , damit wir unseren Navigationselement hier hinzufügen können . Also wähle ich das aus und lege es hier hin. Wir können hier auch ein bisschen Grenzradius hinzufügen. Und mal sehen, wie es jetzt aussieht. Jetzt sieht es besser aus. Oben können wir unseren Text unserer Menüpunkte hinzufügen. Also fange ich von hier aus an und ich werde unser Zuhause haben. Und danach werde ich es duplizieren. Also zu Hause. Und dann können wir sagen, du kannst T-Shirt sagen. Dann können wir sagen, oder statt können wir sagen, okay, wir können es schaffen. Wir können T-Shirt sagen und dann können wir Schuhe sagen. Dann können wir Männermode sagen. Und dann dupliziere ich es zu. Also werde ich, wir können hier sagen, statt der Manifestation, wir können Fertigung sagen. Und dann werden wir noch ein Offshore haben, was unsere Anmeldung und Anmeldung sein wird. Für die, für die Anmeldung, wähle ich hier unseren Grenzradius aus. Also werde ich keinen Grenzradius machen, ich füge hier ein Rechteck hinzu. Ich füge diese oder diese Größe hinzu. Also was ich tun werde, füge ich hier den Grenzradius hinzu, 20 Pixel. Und dann kann ich hier einloggen. Ich kann sagen, hier abmelden. Und ich muss die Größe auf 12 ändern. Ich muss Größe ist 12 hier. Also haben wir den Anmelde-Button und danach lasse ich es mich schnell gruppieren McDermott Gruppe und ich werde sagen, dass ich mich anmelde. Und wir benötigen auch einen weiteren Text für unseren Anmelde-Button für unsere Anmeldeoption. Also können wir es hier sagen. Also können wir sagen „anmelden“. Und ich werde die untere Farbe ändern. Wir haben bereits unsere Farbe, die wir diese Farbe sagen können. Mal sehen, wie es aussieht. Es sieht gut aus, aber ich würde es vorziehen , die Anmelde- und Anmeldeschaltfläche zu haben. Wir sind jetzt mit diesem hier. Also drücke ich Befehl D. Und anstatt sich bei diesem Text abzumelden, wird dieser Text angemeldet, anstatt sich abzumelden. Anstatt mich abzumelden, sage ich „Einloggen“. Wenn ich das jetzt öffne , sehen wir uns abmelden und uns anmelden. Aber ich hätte lieber eine andere Farbe. Also füge ich eine andere Farbe hinzu, diese. Und dafür werde ich mich auch für diesen entscheiden. Und für die Chance, die Katze, okay, also um die Farbe des Textes hier zu ändern. Also hier werden wir sehen , dass wo der Eine ist? Das ist also die Abmeldung. Sie können also sehen, dass Sie, wenn Sie eine Gruppe auswählen oder eine neue Gruppe erstellen, alle Elemente der Gruppe sehen. In der Gruppe haben wir also ein Rechteck und einen Text. Und es gibt einen Grund, warum wir zwei Farben sehen können. Eine davon ist für diesen, das ist unser Text. Jetzt werde ich dieses in Weiß umwandeln und es geht genauso für diesen. Dieser Block wird weiß sein. Jetzt haben wir dieses Design. Ich glaube, es ist okay. Aber vorher muss ich tun. Also muss ich prüfen, ob sich alles in derselben Seite befindet, in gleicher Entfernung. Also haben wir diesen Mandelfisch gezeigt, ich werde das alles auswählen. Und sobald Sie all diese Dinge auswählen, gibt es eine Eigenschaft, die als ordentliche Daten bezeichnet wird. Sie können in der sehen, ich habe gesagt, ob Ihr Artikel ihn nicht für Artikel hat und keine exakte Breite oder Höhe hat. Dann wird dieser in einer Schüssel sein und wenn du darauf klickst, wird er ihn anpassen. Jetzt. Jetzt werden wir sehen, dass es die gleiche Größe hat, okay? Und noch eine Sache , die wir tun müssen, müssen wir sie zu einer Gruppe machen. Drücken Sie also Command G. Jetzt können wir den Namen umbenennen. Wir können Nav Bar sagen, und jetzt haben wir hier nichts. Sie können jetzt sehen, dass dieser nicht sichtbar weil wir diesen bereits haben, wir haben diesen Artikel bereits in genau der gleichen Entfernung. Jetzt kann ich sehen, dass das richtig gut aussieht. Wir haben den Anmelde-, Anmeldetext und ebenso wie wir diese Nav-Teile haben. , haben wir für die Navigationsleiste Wenn ich diese auswähle 16 oder jeden Gegenstand, wir haben 16. Jetzt haben wir das hier. In Ordnung, also wenn ich will, kann ich das Ganze auch ziehen und einfach per Drag & Drop ziehen , weil wir alle unsere Daten jetzt in einer Gruppe kennen. Aber eine andere Sache , die mir hier aufgefallen ist, können wir einfach ziehen, das ein bisschen in die Mitte nimmt. Und das Gleiche gilt für diesen. Mal sehen, wie es jetzt aussieht. Jetzt sieht es besser aus. Lassen Sie mich nochmals den Aufräumen überprüfen, wenn es so ist. Okay, wir haben jetzt das richtige Format, wir haben unseren Header-Bereich erfolgreich abgeschlossen. Und im nächsten Teil zwei werden wir anfangen, an diesem Teil zu arbeiten. Wir sehen uns in der nächsten Vorlesung. 4. Kartendesign für Fashion: Nun, willkommen wieder mal zurück. In diesem Teil werden wir mit der Gestaltung unserer Karte beginnen. Dafür. In erster Linie, was ich tun muss, haben wir einen MS und dann Dido-Stern und dann wann Symbol und dann den Text. So schneller müssen wir hier ein Rechteck erstellen. Wir haben also auch einen Titel, und wir haben hier zwei Icons , die wir entwerfen müssen. Okay, so schnell, ich werde, ich füge ein Rechteck für die Karte hinzu. Also werden wir anfangen, von diesem Raster aus zu arbeiten. Und hier bedeutet auch von diesem Raster, dass wir ein Leerzeichen von diesem weißen und dann diesem roten Schatten, diesem weißen und dann diesem roten Schatten nehmen werden. Wir fangen von hier aus an. Unser Rechteck. Wir können die Größe annehmen. Wir können diese Baumreihe nehmen. Okay, also haben wir dieses Rechteck und ich füge den kleinen Grenzradius von vielleicht fünf hinzu. Lass mich sehen, wie es jetzt aussieht. Es sieht so aus. Okay, also brauchen wir ein bisschen Platz von oben, weil wir unseren Titel hier platzieren müssen. Jetzt haben wir diesen Artikel und dann müssen wir es in Kraft setzen. Also füge ich diesen Effekt hier hinzu und Schlagschatteneffekt. Und ich werde auch die Farbe ändern. Diese Farbe wird hier die weiße Farbe haben. Das ist also die weiße Farbe. Und jetzt müssen wir oben hier in der Karte ein weiteres Rechteck nehmen, das Rechteck für unser Bild. Also werde ich diese Größe auf dieses Niveau bringen und den Kreditnehmer auch fünf Pixel haben lassen. Und wir müssen es genau die gleiche Größe angeben. Alles klar, also mal sehen. Also haben wir dieses und hier werden wir unseren Emus einfügen. Und was haben wir sonst noch? haben wir, okay, also denke ich, dass wir unser Rechteck ein bisschen größer machen müssen unser Rechteck ein bisschen größer weil wir billigen Text haben. Also wird der erste einen Namen nennen können. Was können wir also sagen? Wir können sagen, wir können diese Option hier sagen. Wir haben Titel und dann einen Stern. Also füge ich hier einen Text hinzu. Und dieser Text wird , wir können sagen, ich kann Hochzeitskleid sagen, nur ein Beispiel. Und Texte sollten 16 Pixel groß sein. Warte also nur 16 Pixel. Und dann haben wir 16 Pixel für dieses Icon. Dann haben wir einen Stern, also weiter. Mit einem Stern nehme ich die Hilfe des Plugins namens Feeder-Symbole an. Wenn Sie nicht wissen, wie Sie das Plugin installieren sollen, gehen Sie einfach zu diesem und durchsuchen Sie Plug-Ins in der Community. Und hier können Sie einfach jedes Plug-In nach dem Icon suchen. Dann kannst du es einfach benutzen. Sie können sehen, dass weder das Plug-In, das sie über eine Menge Plug-In verfügen, sondern nur auf Installieren klicken müssen, dann wird er hinzufügen. Und von hier aus kannst du es einfach von hier aus erkunden. Jetzt nehme ich Hilfe von Füllersymbolen. Sie können dieses Plugin auch installieren. Also in den Füller-Icons, denke ich, und wir haben dieses Sternsymbol. Also werden wir uns einfach öffnen, hier auftauchen und hier werden wir alle Icons sehen können. Ich sage einen Stern. Sie können sehen, dass wir diesen Anfang hier haben. Also wähle ich diesen Stern aus, wo er ist. Jetzt hat es sich auf diese Weise entschieden. Und ich lege es hier hin. Aber vorher können Sie sehen, dass es außerhalb des Rahmens ausgewählt wird , aber Sie müssen sicherstellen, dass es sich innerhalb des Rahmens befindet, sonst können Sie es nicht sehen. Also wenn ich, wenn ich diese Ansicht öffne, können wir jetzt sehen, dass dieser Star da ist, aber es sollte vom Ausgangspunkt dieses Textes ausgehen. Okay, also haben wir jetzt diesen Platz. Und ich werde keine Änderungen an der Höhe vornehmen , weil sie bereits in einer guten Position ist , 24 mal 24. Also was ich tun werde, ich werde sie dazu bringen , es zu einem Duplikat zu machen. Drücken Sie also Command D. Und ich werde etwas weniger Platz dazwischen haben. Und ich dupliziere es 345. Jetzt sieht es gut aus. Also wähle ich aus, mach sie zu einer Gruppe. Ich sage „Star“. Und jetzt haben wir diesen Star. Was können wir jetzt tun, wir müssen hinzufügen, was wir sonst noch hier haben. Wir haben ein Icon, und dann müssen wir die Farbe dieses ändern. Sie können also sehen, dass die Auswahlfarbe derzeit schwarz ist. Eine Sache , die Sie beachten müssen, dass dies nicht Ihre Haupt- und Hauptfüllfarbe ist, ist hauptsächlich Ihre Strichfarbe, weil sie es ist. Ein Schlaganfall, Sie können diese Art von Schlaganfall sehen, den er hinzufügt. Aber wenn Sie den Hintergrund dieses ändern möchten, müssen Sie es auf diese Weise tun. Dann musst du das auf diese Weise machen. Jetzt wird es also so aussehen. Wir können das auch auf jeden Fall machen. Was kann ich also tun? Ich werde dafür diese 14 hier für den Schlaganfall auswählen, ich wähle den Block aus. Dann wird es so aussehen. Aber das will ich nicht haben. Ich möchte nur die schwarze schwarze Farbe haben. Wir müssen diesen Hintergrund also nicht haben. Wir müssen das auch nicht haben. Normalerweise wird es nicht zeigen , dass wir diese schwarze Farbe haben und jetzt müssen wir noch eine hinzufügen. Es dauert. Dieser Text wird hier sein. Also füge ich hier einen Text hinzu. Und ich kann sagen, vielleicht 50 Lektüre, nur eine Reihe von Schreiben zu zeigen. Und auf diese Weise können wir die Größe auf 16 nehmen, aber sie sollte in der Mitte sein, damit wir es einfach ein wenig auf diese Weise ziehen können . Okay, also sieht es gut aus, aber wenn wir wollen, denke ich, dass wir die Farbe ändern und mich versuchen lassen, wie es aussieht. Wenn wir eine andere Farbe auswählen und sie aussieht, sieht sie nicht gut aus, aber wir können einfach mit einer schwarzen Farbe bleiben, aber stattdessen können wir einfach sagen, dass es eine kräftige Farbe ist. Es ist also ein Blitz, damit wir sehen können, dass wir eine Anzahl von Lesungen haben. Also haben wir Titel, wir nehmen das gezeigte Skript auf. Und dann möchte ich noch einen Text hinzufügen , der unser Preis sein wird. Wir können also Dollarsymbol sagen und sie können zu 50 Dollar sagen. Und vergewissern Sie sich, dass der Ausgangspunkt gleich ist. Und es kommt von 19 mal 19. Okay, also haben wir unseren Preis, wir haben dieses Bild. Und noch eine Sache, die wir jetzt haben müssen, müssen wir zeigen dass wir unser Bild hier einfügen müssen, das wir nicht haben. Bevor wir also weiter gehen, was ich zuerst machen werde, werde ich sie zu einer Gruppe in diesen drei Punkten machen. Und dann mache ich die Ordnung, damit wir es können, wir kennen diesen Star. Dann haben wir diesen Titel. Also mach sie zuerst zu einer Gruppe. Und ich benenne es um, kann das Guard-Textzeichen speichern. Wenn ich jetzt hierher gehe, sehen wir bereits, dass dieser sichtbar ist. Es bedeutet, dass wir die gleiche Distanz haben. Jetzt noch eine Sache, die wir hier hinzufügen müssen, wir haben einen weiteren Button hier, den wir hinzufügen müssen. Also nehme ich die Hälfte dieses Rechtecks dieses Ellipsenwerkzeugs, nicht das Rechteck. Okay? Ich möchte das Ellipsenwerkzeug auswählen. Also haben wir Ellipse Tool hier. Und ich wähle das Ellipsenwerkzeug aus. Und um es dunkler zu machen, müssen Sie immer sicherstellen, dass sich in einem Nassen genau gleich verstecken. Es sieht also so aus. Ich denke, wir können etwas größer werden, vielleicht 32 bis 32. Und wir können es in die gleiche und die gleiche Entfernung bringen. Auf diese Weise können wir es hier reinlegen. Wir werden unsere Ikone setzen, damit wir unsere Ikone hier platzieren können. Vorher möchte ich die Hintergrundfarbe ändern. Also möchte ich diese Farbe hier haben. Und dann wählen wir hier unser Blog-Symbol aus, das Herzsymbol. Und ich kann sagen, also kann ich hier dieses Herzsymbol sagen. Und dann lege ich es zuerst in den Rahmen und ziehe dann das Herzsymbol in diesem und mache die Strichfarbe auf Weiß. Und ich kann es einfach ein bisschen zentrieren. Und los geht's. Okay, also sieht es echt nett aus. Ich werde dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. 5. Mehrere Bilder in Karte auswählen: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, Rest des Designs zu implementieren. Also haben wir diese Option. Jetzt haben wir diese Karte. Jetzt wollen wir sie zu einer Gruppe machen, den gesamten Teil, damit wir wissen, dass wir diesen Teil einfach duplizieren können, um mehrere Elemente zu erstellen. Also haben wir dieses Herz hier. Dann geht das, um sie zuerst zu einer Gruppe zu machen. Also mache ich sie zu einer Gruppe und benenne sie um. Und ich sage es hier, wie Butter. Dann haben wir unseren Kortex, der ein anderes Design ist. Wir haben dieses Rechteck für den Text und dann haben wir das Hauptwagenrechteck. Also kann ich den Namen dieses ändern. Wir können Hauptwagen sagen. Und dann unsere EMS-Karte, die diese ist, die eine humorvolle Karte sein wird. Jetzt haben wir unsere Hauptkarte, wir haben unsere MS-Karte, wir haben unseren Like Button. Und ich kann sie zu einer Gruppe machen und ich kann Mode, Modekarte sagen. Alles klar, jetzt kann ich es duplizieren lassen. Ich drücke Duplizieren soweit es von dieser Karte entfernt ist. Und dann dupliziere ich es ein paar Mal. Also vier. Und dann Phi Sechs. Vorerst vielleicht sechs. Und wir haben, haben wir diese Karte, oder? Okay, also haben wir diese Anzahl von Elementen jetzt, aber wir möchten hier eine Scroll-Ansichtsoption haben , damit wir sie installieren können. Jetzt ist es an der Zeit, unser Bild hier einzufügen. Wie können wir es tun, um so schnell zu tun , was ich tun muss? Das ist also unser Einkaufswagen, das ist unsere Karte. Also werde ich all diese erweitern , damit wir unseren Image-Guard auswählen können. Weil ich insgesamt mehrere, mehrere IMS haben werde. Jetzt wähle ich das Bild aus. Klicken Sie also auf Platzieren Sie das Chaos. Jetzt wähle ich drei bis sechs oder sieben Karten aus. Also wähle ich die Bilder hier aus. Also 12, dann 34567. Okay, und dann öffne ich es. Sobald alle Bilder geladen werden, können Sie sehen, dass Sie immens hinzufügen. Was ich tun muss, dann muss ich einfach eins nach dem anderen klicken. Dann kann ich einfach gepostet werden, du siehst, dass sieben Bilder ausgewählt wurden. Was kann ich jetzt tun? Ich kann einfach drauf klicken. Ein EMS wurde ausgewählt, dann 10 Mers. Ok, ich hebe die Auswahl auf. Okay, also lass es mich entfernen. Also mache ich wieder mit zwei, weil ich dir etwas zeigen wollte, das dann die Anzahl der Position des Bildes ist. Also wählen wir das Bild hier aus. Also wähle ich dieses Bild aus. Also wähle ich dieses Bild aus, dieses Bild. Diese, diese, diese, nicht diese, diese, diese und diese. Klicken wir nun auf „Öffnen“. Und sobald wir es ausgewählt haben, emittiert also drei Sites. Wir müssen ein paar Augenblicke warten weil es einige Zeit braucht, um die MS hochzuladen Sobald unser Bild fertig ist, können wir es in unseren Meilen sehen. Und los geht's. Sie können sehen, dass 80 Chaos, das letzte, das Sie ausgewählt haben, an der ersten Position sein wird. Sie können also einfach anfangen , anders zu machen. Jetzt kann ich einfach eins nach dem anderen klicken. Und das. Los geht's. Und wir werden hier noch ein Bild haben, das unser letzter Gegenstand sein wird. Und lasst mich sehen , was wir hier sehen können? Wir haben also zwei Bilder hier. Wir haben fünf Frauen, aber wir sind uns bei diesem Artikel hier nicht sicher. Und jetzt. Wir können es einfach retten. Was kann ich also tun? Ich kann es einfach gerade drücken. Ich entferne es einfach jetzt ich werde diese Bilder entfernen. Was ich jetzt möchte, dass Sie hier sehen, wenn wir dieses Bild haben, können Sie so mehrere Limits hinzufügen, weil wir hier eine andere Karte haben , die vielleicht diese ist. Stattdessen haben wir diesen wir für einen Text hier. Also haben wir hier einen Fehler gemacht. Wir haben unseren Artikel entfernt , als ich dieses Ding gemacht habe. Also jetzt haben wir diese hier, MS. hier, aber wir haben hier eine andere Art und Weise. Also haben wir diese Karte, bei der es sich um diese Karte und diese Karte handelt. Das können wir zwar hier sehen. Ich ziehe das hier, um zu sehen, ob wir einen MAC haben oder nicht. Wir haben also keine MS hier. Also müssen wir hier ein Bild für diesen Artikel drücken. Also ziehe ich das EMS und wähle eines aus, das du vermisst. Schon wieder. Vielleicht kann ich zu seiner Linken kommen. Also haben wir diesen Artikel, diesen Artikel, und ich werde diesen auswählen. Und jetzt muss ich dieses Bild hier drücken. Die Sache ist also, dass wenn unser Rahmen außerhalb von vier ist, wenn unsere Bilder eine Art Rahmen sind, in diesem Fall müssen wir es oder Sie davon tun, weil wir es nicht wissen, dann haben wir entweder diesen Gegenstand oder nicht. So können wir hier noch ein paar Artikel hinzufügen. Also vielleicht zwei. Aber sobald ich es in den Rahmen lege, bekomme ich dann den gleichen Abstand. In diesem Fall müssen wir also schneller unsere Karte vorbereiten und dann können wir bei unserer Arbeit und dann setze ich die Position dieses Artikels fest. Also okay. Also habe ich es nicht dupliziert. Es muss also ein Duplikat erstellen. Also haben wir einen Gegenstand hier. Wir haben noch einen Artikel hier. Diese ist also eine andere Karte. Also werde ich hinzufügen, um uns hier zu verteidigen. Jetzt haben wir ein anderes Bild hier, nämlich das ist. Wir haben schon ein Bild hier. Also füge ich zwei weitere Bilder für diesen Artikel hinzu. Also werde ich von hier aus E-Mails abgeben. Ich sage das für diesen Gegenstand und ein anderes, ein anderes Bild für diesen. Also wähle ich Bild platzieren aus. Und dann kann ich sagen, lass uns das hinzufügen. Und los geht's. Okay, jetzt ist es unsere Aufgabe all diese E-Mails außerhalb davon zu setzen. Also hier, jetzt haben wir schnell, lass es uns hierher stellen. Und später können wir es neu anordnen, sobald wir uns anders gemacht haben. Jetzt befinden sich diese beiden Artikel außerhalb unseres Rahmens. Was ich jetzt tun werde, werde ich es in die Deflation bringen, ist, dass der Rahmen und dieser einen Incentive-Rahmen sind. Jetzt haben wir also unsere, dieses, welches ist diese. Wir haben dieses und wir haben diesen. Also lasst es uns machen. Jetzt. Wir haben, wir können sehen , dass die Entfernung 20 beträgt. Und das ist auch wir müssen Distanz 20 wählen. Okay? Wenn Sie also sehen, dass diese rote Linie in derselben ist, bedeutet dies, dass Ihre Position gleich ist. Okay? Wenn ich also hierher komme, können wir alle Bilder sehen, aber wir können die rechte Seite sehen, also weiter, dass ich jetzt, was ich tun werde, hinzufügen muss horizontale Bildlaufansicht für diese Modekarte hinzufügen muss. Wir haben unsere Artikel bisher entworfen. Und im nächsten Teil werden wir lernen, wie Sie die Ansicht horizontal scrollen können. Lass dich also nicht verwirren. Was wir im Grunde genommen haben wir gerade eine Karte erstellt, MS mehrere Bilder hinzugefügt und dann fügen wir nur mehrere Karten hinzu , damit wir horizontal arbeiten können, heißt View for right? Ich werde dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren . 6. Bildauswahl und horizontale Scrollen: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, eine horizontale Bildlaufansicht hinzuzufügen , wenn Sie auf dieses Symbol doppelklicken. Und als Lektion werden sie das verfolgen. Wir müssen jede einzelne Gruppe in einen Frame umwandeln . Dann können wir es nur schaffen. Wir haben also unser Autodesign und jede einzelne Karte ist unsere Gruppen. Sie können also sehen, dass diese Karte eine Gruppe ist, Abwerfen ist eine Gruppe. Diese Karte ist eine Gruppe. Verwerfen ist eine Gruppe, und Verwerfen ist eine Gruppe. Ich kann es auch hierher ziehen. Ich glaube, diese Karte ist der Groove. Diese Karte ist ein Groove. Dies, dies, dies, dies und das. Was ich jetzt tun muss, muss ich die Gruppe dazu bringen, einen Rahmen zu erstellen, jede einzelne Karte. Okay, so schnell, mach, mach es zu einem Rahmen. Also diesen Wagen müssen wir Rahmen machen, oder? Wählen Sie die Karte aus. Und dann eine Frameauswahl, diese wird unser Frame One sein. Und so werde ich Z rückgängig machen oder steuern, um es so schneller rückgängig zu machen. Lassen Sie uns von hier aus anfangen, damit wir wissen, dass unser Frame One unser erster Gegenstand ist. Okay? Dieser ist also unser erster Gegenstand. Also klicke ich mit der rechten Maustaste und sage Frame-Auswahl. Und dann wird dieser unser Rahmen sein. Und dieser wird auch unser Rahmen sein. Also sage ich Frame-Auswahl. Todd wird Frames Vortrag sein denn dies wird dies sein, unsere Rahmenauswahl. Und dieser Gegenstand ist, sind diese Gegenstände. Also werde ich sagen, dass ich diesen rückgängig machen werde, weil dieser unsere fünfte Position sein wird . Also vier, und ich werde rechten Maustaste klicken und Frame-Auswahlphase sagen. Und dann wird dieser unsere sechste Zahlenposition sein. Also Frameauswahl als sieben aus der Auswahl. Und der letzte ist die Frameauswahl. Mal sehen, welches das Letzte ist. Der letzte Punkt ist also Nummer acht, Nummer sieben, Nummer sechs, die Zahl fünf, Nummer vier. In Ordnung. Wählen Sie nun den gesamten Frame aus , den wir gerade erstellt haben. Wir müssen erstellen, wir müssen jetzt einen Frame erstellen. Rahmen Sie diese, diese, diese, diese, und wählen Sie dann den gesamten Rahmen aus, den Sie haben. Und danach rechten Maustaste und führen Sie die Frameauswahl aus. Jetzt haben Sie einen Ein-Frame und in diesem Frame können Sie es umbenennen. Sie können diesen Mainframe in Ihrem Hauptrahmen einstellen. Sie haben Ihren Mehrfachrahmen , der zu jedem Gegenstand gehört. Jetzt. Sie müssen Ihren Mainframe auswählen und dann auf die rechte Seite klicken, können Sie Cliff-Inhalte sehen. Du musst das überprüfen. Sobald Sie Cliff-Inhalte machen würden, was Sie tun müssen, werden Sie in dieser Art von Dingen sehen können. Und dann müssen Sie es dorthin ziehen, wo Sie anzeigen möchten, Sie möchten anzeigen, wir möchten dieses Raster ohne Scrollen anzeigen . Wir wollen es bis zu diesem Raster zeigen. Weil wir am Anfang beschlossen haben, dass wir es so machen werden. Wir werden diesen Verlauf des breitesten Leerraums und der linken Seite und der rechten Seite diesen breiten und angehobenen Raum belassen breitesten Leerraums und der linken Seite und der rechten Seite . Wenn ich jetzt herkomme, kann ich sehen, dass unser Artikel nur daraus stammt. Wir können auch eine Sache machen. Wir können diese drei Artikel einfach zeigen. Aber wir werden es später machen. Aber jetzt haben wir unseren Rahmen hier und gehen dann zum Prototyp. Hier können Sie sehen, dass der Überlauf Geräusche zieht. Sie müssen dieses horizontale Scrollen auswählen. Okay? Wenn ich jetzt hierher komme , kann ich unsere Daten jetzt horizontal scrollen. Aber jetzt können wir sehen, dass wir dieses kleine Designproblem haben und jetzt müssen wir es beheben. Okay? Jetzt können wir unseren Artikel horizontal scrollen. Aber vorher lasst mich das reparieren. Also geh wieder zum Design zurück und ich öffne das hier. Also haben wir diesen Artikel hier , der unser Nummernartikel ist, dies ist unser fünfter Nummernpunkt. Wir haben Probleme mit unseren sechs Nummernelementen. Sechs Nummernelement überlappt sich also mit unserem fünften Nummernelement. Wir haben unsere Artikelnummer Fünfter, dann haben wir unsere Frame Nummer Sechs. Also Frame Nummer Sechs. Ich sollte das haben. Okay, jetzt haben wir das. Also sollte es so anfangen, oder? Also sollte es jetzt funktionieren. Versuchen wir es jetzt noch einmal, machen Sie diesen Clip-Inhalt, und dann passe ich die Größe hier erneut an. Also passe ich die Größe hier an. Okay, jetzt haben wir diese Option. Okay, es scheint also, dass wir auch nur unseren anderen beiden Teil mit diesem hinzufügen müssen . Also öffne ich die Klippe wieder. Also haben wir jetzt unsere sechs, unsere Sieben sind mit dieser überlagert. Du kannst es sehen. Jetzt müssen wir R7 auswählen und dann müssen wir sicherstellen, dass wir mit einer Sieben diese Distanz haben. Wir haben diese 28 Distanz. Jetzt. Wir haben unsere sechs, wir haben 07, aber jetzt haben wir unsere acht mit Überlappung. Jetzt haben wir die gleiche Größe. Das ist also unser A, das ist unsere Befragten, und das sind sechs, das sind unsere vier. Das sind drei, das sind unsere fünf, das ist unsere 678. Okay? Jetzt wähle ich wieder die Mini-Klippe aus und passe dann mit unserem Raster an. Jetzt denke ich, Okay, cool. Jetzt haben wir keine Überschneidungen. Aber Sie können sehen, dass wir unten wenig Probleme haben. Also müssen wir unsere Höhe dieses Clip-Inhalts ändern , damit ich ihn einfach ein wenig so ziehen kann ihn einfach ein wenig so ziehen , damit wir den Schatten bekommen können. Jetzt können wir unseren Artikel scrollen. Perfekt. Wir haben damit kein Problem. Also können wir es scrollen. Wir werden es scrollen und wir können es scrollen. Dann fällt etwas anderes auf , dass ich denke, dass wir von hier und dann von hier aus wenig mehr Platz haben . Was kann ich jetzt tun? Ich kann einfach hierher gehen. Okay, also öffne ich diesen Artikel erneut , um nur dieses Problem hier hinzuzufügen. Also haben wir, wir haben das, ich glaube, wir haben diese 14420, aber von hier aus, von T, von vier. Wir müssen also sicherstellen, dass wir unseren Abstand 20 zwischen allen Karten haben . Also haben wir sechs. Wenn wir also sechs auswählen, dann können wir sehen, dass ein T nur 277 haben wird auch 20 haben wird. Und ab acht schaffen wir es auch nach Indien. Okay, also wählen Sie jetzt Mainframe aus und passen Sie dann mit dem Raster an, das wir anzeigen möchten. Also füge ich es hier hinzu. Los geht's. Jetzt können wir sehen, dass wir genau das gleiche Aussehen haben. Und es sieht echt gut aus. Auf diese Weise können wir ein Scrollen machen. Jetzt wollen wir noch einen Gegenstand hier haben, Senator Fix, den ich hier zeigen möchte. Wir wollen nur für Auto zeigen. Wir wollen diesen kleinen hier nicht zeigen. Ich werde es mit diesem Raster anpassen. Und was kann ich dann tun? Das Ganze kann ich jetzt auch nur eins hinzufügen. Und ich kann es so anpassen. Wir können es anpassen. Die Hälfte davon von hier, die Hälfte davon hier. Oder was können wir alternativ tun? Wir können auch unser Raster ändern. Also statt 1015 können wir jetzt vielleicht 20 hinzufügen. Und dann können wir uns entscheiden, dann können wir es auf diese Weise auswählen. Ja, Okay, jetzt haben wir diese Show, also können wir einfach mit 20 oder so sagen. Lass uns 18 machen. Tut mir leid, ich schaffe es statt 20 jetzt genau 1919. Wir müssen es 21 schaffen. Okay, also haben wir dieses Raster und der rechten Seite nehmen wir sein Gesicht darin und wir brauchen die linke Seite. Wir nehmen ein weißes, ein rotes, ein weißes, ein weißes, einhundert, einhundert, einhundert, einhundert. Das ist also unsere Hauptsache hier. Und jetzt haben wir diese Hauptkarte. Und für das Cliff Board möchte ich hier wenig mehr Platz haben. Warum ist das? Damit wir die ganze Karte sehen können? Sie können sehen, dass die Karte nicht sichtbar ist. Also muss ich hier etwas mehr Platz hinzufügen. Los geht's. Also haben wir diese Karte, und dann haben wir dieses Design, wir haben diese Karte und wir können unseren Artikel scrollen. Perfekt. Und im nächsten Teil werden wir dies umsetzen, um zu button und dann werden wir ein Scrollen machen. 7. Horizontale Scrolling, indem du auf die Schaltfläche Scrollen klickst: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, dies unserer Schaltfläche und dann Daten hinzuzufügen , und dann dauert dies, danach werden wir diese Horizontale hinzufügen. Rufen wir die Option auf, indem wir jetzt klicken, was wir tun können, ist dass ich diese Swapping-Sache mache, etwas Drag-and-Drop-Ding. Aber wir wollen hier zwei Knöpfe haben. Und wenn sie dann darauf klicken, zeigen wir diesen Ursprung den Listikeln zu schnell. Fügen wir den Text hier hinzu. Also füge ich hier Text hinzu und ich sage hier, ich kann hier sagen Mandelfissur. Also diese goldene Frauen-Mode. Stellen Sie also sicher, dass der Ausgangspunkt mit diesem Artikel identisch ist. Also Männer Gesichtsbehandlung und wir wollen es nicht mutig haben. Wir können sagen, es ist mittelgroß und dann können wir diese Dinge sagen. Also bin ich im Gesicht und ich werde, wir können eine Sache tun, schätze ich. Okay. Also hier haben wir das unterstrichen. Ich möchte diese Unterstreichung nicht hinzufügen. Also möchte ich es auf diese Weise belassen und dann das hier zum Button hinzufügen. Also lasst uns zuerst einen Button hinzufügen. Also werde ich dieses Ellipsenwerkzeug aufgreifen und dann werde ich unser Leben hier zeichnen. Stellen Sie also sicher, dass es die gleiche Größe und das gleiche Gewicht hat. 46 mal 46 schnell, ich muss es mir anschauen. Wie es aussieht, ist es größer oder kleiner. Also jetzt 4243. Dann muss ich zuerst den Effekt hinzufügen und dann die Hintergrundfarbe dieser Farbe ändern. Und das wird diese weiße Hintergrundfarbe sein. Und hier müssen wir ein Icon hinzufügen. Also nehme ich wieder die Hälfte dieses Plug-Ins namens Feeder-Symbole. Ich sage, okay, also haben wir dieses Pfeilsymbol rechts und links. Also sage ich, wähle dieses Icon aus. Und dann wähle ich dieses Symbol aus und ziehe es dann hierher. Ich ziehe es her. Und das Zentrum, das wären wir nicht, okay, also ist es in diesem. Also haben wir dieses Icon. Und was kann ich jetzt tun? Was ich machen werde, ich mache ihnen einen Groove. Ich kann Gruppe sagen und dann das richtige Symbol sagen. Und dann können wir es duplizieren lassen. Drücken Sie also Befehl D. Und dann brauchen wir noch ein Icon, das links sein wird. Also entferne ich dieses Icon von hier. Und dann wähle ich dieses linke Symbol aus. Dieses linke Symbol wird hier erscheinen. Und ich stelle es hier hin. Das Gleiche. Jetzt haben wir unser linkes Icon und Ride Icon. Das ist unser Pfeil nach links. Dies ist ein richtiges Symbol. Das ist also unser richtiges Symbol. Dies wird unser linkes Symbol sein. Also ändere ich den Namen in das linke Symbol. Linkes Symbol. Und ich lege diesen Pfeil nach links in diesen Groove. Wir haben dieses linke und rechte Symbol und dann mache ich sie zu einer Gruppe. Also dieses linke Symbol und das rechte Symbol haben wir zwei ausgewählt. Ich kann diesen und diesen nennen, mache sie zu einer Gruppe. Sagen wir, wir können Scroll-Button sagen Okay, jetzt können wir diese beiden Dinge einfach einen Ausgangspunkt aus dieser Gruppe hinzufügen. Sie können die Zeile auf der linken Seite des Textes und in der Zeile in einem Raster sehen. Okay? Es bedeutet also, dass es hier in der perfekten Position ist. Jetzt müssen wir nur noch Anrufoptionen hinzufügen. Wenn der Benutzer diesen auswählen wird, möchten wir den letzten Frame anzeigen, der anständig ist. Auf diese Weise werden wir es tun können, heißt. Wenn ein Benutzer auf diesen Artikel klickt, möchten wir ihm den ersten zeigen. So können wir also ein Scrollen machen. Und das Gute ist, dass wir in unserem vorherigen Teil bereits unseren Rahmen erstellt haben. Das können wir also nur einfach machen, wenn wir eine Frameauswahl haben , da das Prototyp-Prototyping immer nach dem Rahmen sucht. Jetzt haben wir all diese Frames sind der erste Frame ist dieser. Und unser letzter Frame ist Frame Acht , der letzte ist. Wenn ein Benutzer also auf diese rechte Seite klickt, wählen wir die Rahmenhilfe aus. Wenn Sie entweder auf die linke Seite klicken, wählen wir sie und den Frame Nummer eins aus. Das ist also die Hauptlogik hier. Klicken wir nun auf das Prototyping und klicken nun auf die Objekte der rechten Seite. Also wenn wir das haben, wenn wir das haben. Jetzt können Sie sehen, dass standardmäßig die gesamte Gruppe ausgewählt wird, aber wir müssen diese Schaltfläche genau auswählen. Diese rechte Symbolschaltfläche können Sie sehen. Also klicke ich darauf. Und jetzt innerhalb des Prototyps, wo Sie auf diese Interaktionen klicken müssen und hier auf Keine klicken. Also statt weiter. Wenn der Benutzer also onclick macht, möchten wir zeigen, dass wir zeigen möchten, dass wir auch scrollen möchten. Okay, nicht Navy kann es tun. Normalerweise benutzen wir navigieren zu, um von einem Ort zu einem anderen Ort zu wechseln. Aber dieses Mal müssen wir auch eine Schriftrolle auswählen, da wir scrollen möchten, wohin wir wollen. Wir wollen zu unserem scrollen, du siehst. Unser Frame, in dem wir scrollen möchten, wir wollen scrollen, ist Columba Frame Nummer Acht, was das letzte Element ist. Schon wieder. Lassen Sie es mich vor der Auswahl klarstellen. Also gehst du zum Prototyp-Bereich. Sie wählen Ihre Schaltfläche aus , die Sie anzeigen möchten. Nachdem Sie den Taktstock ausgewählt haben, fügen Sie Interaktion hinzu. Sie fügen diese indirekten Shows hinzu. Hier. Sie wählen es aus, klicken darauf, wählen einen onclick aus und danach klicken Sie auf Scrollen zu und nach der Schule dorthin, wo Sie scrollen möchten Sie möchten zu Frame Acht gehen, was das letzte Element auf der rechten Seite ist Seite. Und Sie müssen sicherstellen, dass es ein Rahmen ist , den wir in unserer vorherigen Vorlesung gemacht haben. Also klicke ich auf diesen Frame Acht. Und danach können Sie hier jede Erwähnung sehen, welche Art von Animation Sie haben möchten, Sie animieren möchten und dann haben Sie diese Animation hier. Du kannst einfach einfach rein und raus sagen, dann kostümieren oder von dir gehört haben, du kannst es einfach so machen. Vielleicht willst du also federnd sein, vielleicht willst du langsam sein. Halte das Langsame. Wenn ich jetzt zurückkomme und dann sehen sie , dass wir dieses Icon jetzt haben. Also wenn ich darauf klicke, los geht's, sind im letzten Frame. Cool. Wenn ich jetzt auf links klicke, wird es nicht funktionieren, weil wir kein Prototypmodell betreten haben. Unser Tupfer ist Call ist immer integraler Bestandteil, weil wir es früher gemacht haben. Und wenn ich darauf klicke, geht es in die große Seite. Okay, was können wir jetzt hier machen? Wir können einfach hinzufügen, wir können einfach einen weiteren Prototyp hinzufügen. Wählen Sie diesen Artikel erneut aus und klicken Sie darauf. Gehen Sie zu diesem Klickbereich und wählen Sie ein Bildlaufwerkzeug aus. Und dann wird dieser Begriff unser Rahmen sein. Cool. Und wieder wollen wir uns treffen und intim sein. Es wird langsam sein. Was ist mit dem Sanften? Was meinen sie mit sanft? Zen? Okay, also wählen wir dieses aus. Jetzt. Wir sind in schnellem Tempo. Wir sind dann der letzte Gegenstand. Wenn ich jetzt darauf klicke und dann sind wir im ersten Frame. Dieser funktioniert also. Dieser funktioniert und dieser funktioniert. Du hast also gelernt, wie es geht. Also denke ich, dass sanft bedeutet, dass es dir eine kleine Animation geben wird. Es gibt nur einen Namen der Animation. Du kannst einfach damit spielen. Sie können einfach mit dieser Art von Animation spielen. Als hätten sie ein paar Möglichkeiten. Welches? Hormon oder was auch immer Sie bevorzugen, Sie wählen einfach eines dieser aus, dann wird es in Ihrem Projekt hinzugefügt. Also haben wir dieses Design erfolgreich hinzugefügt. Wir haben diese kleine Ikone, die hier und dann diese Mode entwerfen wird . Und das können wir auf diese Weise verfolgen. Wir können das auch hineinziehen. Unser Button funktioniert auch. Alles klar, also höre ich dieses Video genau hier auf und wir fahren mit der nächsten Vorlesung fort. Wir sehen uns in der nächsten Vorlesung. Tschüss. 8. Fashion: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, einen weiteren Abschnitt für Herrenmode hinzuzufügen . Dafür muss ich in erster Linie die Größe des Mainframes erhöhen. Also wähle ich einfach dieses aus und ziehe es dann. Und jetzt müssen wir noch eine Textur hinzufügen. Also werde ich diesen Text hier duplizieren. Also sage ich Command D, und dann füge ich diesen hier hinzu. Sie können also sehen , dass Sie immer der roten Linie folgen müssen, Ihnen angezeigt wird, damit Sie verstehen können , dass sie von derselben Größe, von derselben, vom selben Ausgangspunkt aus beginnt. Jetzt sage ich es der Männermode. Und danach werden wir eine ähnliche Art von Autodesign mit unterschiedlichem Bild haben eine ähnliche Art von Autodesign , aber driften. Und dieses Mal werden wir diese Scrolloption nicht zeigen. Vielmehr müssen wir eine Kolumne schreiben, okay, also mache ich es zuerst zu einem Duplikat. Also nicht dieser Rahmen. Wir müssen den Rahmen nicht auswählen, sondern ich wähle diese Karte aus. Okay. Dann mache ich es zu einem Gruppenduplikat. Und dann ziehe ich noch einen hierher. Und vom selben Ausgangspunkt aus, den wir hier haben. Okay, cool. Jetzt können Sie sehen, dass wir eine gewisse Distanz 37 von der Spitze des Titels haben . Und jetzt können wir sehen, dass Männer Fische haben. Und was ich will, möchte ich haben. Vielmehr können wir dieses Bild noch lesen, aber später werden wir es ändern. Also werde ich, was ich tun werde, ich werde es duplizieren lassen. Wir wollen zeigen, da wir vier hier haben. Dann drücke ich Command D und dann vier. Okay? In Ordnung, also gibt es einen Fehler, den ich hier gemacht habe. Anstatt die ganze Gruppe auszuwählen, habe ich nur ausgewählt. Was kann ich jetzt tun? Ich sage, lass es uns in Nim ändern. Ich sage „Männermode-Karte“. Jetzt mache ich ein Duplikat. Jetzt kann ich die ganze Karte duplizieren. Und dann haben wir diesen Ausgangspunkt. Dann tu und tu es. Alles klar, also mache ich sie zuerst zu einer Gruppe. Lassen Sie sie also schneller wachsen. All diese Männermode-Karte. Und davor, okay, also haben wir unsere Ordnung. Es bedeutet, dass es sich in der gleichen Entfernung befindet. Das sieht man 202020. Wir ergeben also keinen Sinn oder irgendetwas. Also mache ich sie zu einer Gruppe. Wir können sagen, Männer moden eine Reihe. Und dann mache ich es zu einem Duplikat. Das wird also unsere zweite Reihe sein. Tut mir leid, wir müssen haben, wir müssen diesen Ausgangspunkt von hier aus haben. Hier geht's. Also haben wir dieses Ding, 202020. Und jetzt können wir diese Herrenmode sagen. Wir haben dieses Modedesign hier, das diese Herrenmode sein wird. Also, okay, also eine Sache, die ich hinzufügen möchte, möchte ich diese zwei Reihen in einer Gruppe machen und wir können ihnen jetzt einen afrikanischen Sklaven geben. Herrenmode Wir können sagen, Männermode Bereich. Und jetzt lass mich sehen , ob wir ordentlich sind. Okay, also haben wir das ordentlich, wir haben 37 Distanz. Wir haben unsere Distanz dafür. Okay, also haben wir kein Problem damit. Okay, also sieht es jetzt richtig gut aus. Wir haben diesen hinzugefügt. Jetzt ist es an der Zeit, mehrere Bilder für diese vier Elemente hinzuzufügen . Dafür wähle ich erneut Bild platzieren aus. Und dann werde ich anstelle von Mann oder Frau Gesichtsbehandlung, dem Stiel, Männer Gesichtsbehandlung auswählen. Wir haben also 448 Bild, also wähle ich acht aus, MS. hier, 2334567 und dann acht. Was ich jetzt tun muss, also wird es unsere E-Mails hier und im Moment hinzufügen. Es dauert also einige Zeit, um alle MS zu laden . Basierend auf Ihrer Internetgeschwindigkeit und der Bildgröße. Sobald unsere Bilder fertig sind, sollten wir es in unserer Maus sehen können. Los geht's. Jetzt haben wir acht Bilder, also wähle ich aus, ich werde dieses Bild durch dieses ersetzen. Ersetzen Sie dieses Bild also durch dieses Bild. Und um dieses Bild durch dieses zu ersetzen , dieses, dieses, dieses und dieses Bild. Jetzt sollten wir unsere E-Mails hier sehen können . Es wird einige Zeit dauern oder wir können dort einfach aktualisieren. Es wird unser MS durch dieses Hauptbild ersetzen oder minimieren. Jetzt haben wir Männer, Gesichts- und Frauenfische bereit. Was ich haben möchte, ich möchte eine Paginierung hier unten für diese Männermode haben . Also haben wir dieses Design, wir haben dieses Design und das haben wir, also gefällt mir dieses Bild nicht, also werde ich dieses Bild ersetzen. Ich wähle ein anderes Bild aus. Also sage ich, ich wähle das aus. Ich glaube, wir haben dieses hinzugefügt. Und ich werde dieses Bild durch dieses ersetzen. Aber es hat kein Gesicht. Aber ist es immer noch besser. Okay, also haben wir dieses Ding jetzt hier. Jetzt möchte ich unsere Paginierung hier haben, also werden wir sie in unserem nächsten Teil hinzufügen. Ich werde dieses Video hier beenden, um zu sehen, was die nächste Vorlesung ist. 9. Pagination: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unsere Paginierung hinzuzufügen. Bisher haben wir dieses Design gemacht und unsere Anwendung sieht jetzt richtig gut aus. Also haben wir diese Karte, wir haben diese Option hier. Und jetzt ist es an der Zeit, unsere Paginierung genau hier hinzuzufügen. Um also eine Paginierung hinzuzufügen, werden wir versuchen, die Gesundheit von unserem Ellipsen-Tool zu nehmen. Und dann fange ich an, ab dieser Mitte von zwei Gegenständen zu entwerfen. Also nehme ich ls und von hier aus fange ich an, das zu entwerfen. Wir müssen also sicherstellen, dass wir die gleiche Größe und das gleiche Gewicht haben. Also können wir 35 oder vielleicht 40 sagen, schätze ich. Wir werden es später ändern, keine Sorge. Also 40 von 40. Jetzt lass mich sehen, wie es aussieht. Es sieht so aus. Ich denke, es hat die perfekte Größe, also können wir bei dieser bleiben. Ich füge hier den Effekt hinzu. Und dann ändere ich die Farbe in diese weiße Farbe. Und jetzt müssen wir die Position genau hinzufügen. Ich wollte diese Position haben. Okay, also können wir damit anfangen. Wir fangen an, wir werden von diesem beginnen, das ist unsere a d Subshell, dieses Raster. Und dann können wir 123456 sagen, dann 123456 bis hier unsere Paginierung hinzufügen können. Okay, wir werden es tun. Das ist kein Problem. Jetzt füge ich hinzu, und dann müssen wir hier ein Symbol hinzufügen. Also haben wir bereits unser Icon, das ist dieses Symbol, Pfeil links Icon. Also werde ich es tun, okay, damit wir direkt dieses Icon von unserem Plugin bekommen können , das wir bereits haben. Also Füllersymbole, also werden wir dieses Symbol hier hinzufügen . Also wird es hier hinzufügen. Und wir werden es in die Mitte stellen. Und dann stelle ich es in die Mitte. Und jetzt haben wir diese Ikone. Also Fastow, wir müssen sie zu einer Gruppe machen. Also diese Ellipse. Bevor ich sie zu einer Gruppe mache, werde ich diese Ellipse duplizieren, da wir eine Ellipse für unsere anderen Optionen benötigen . Okay, also die Sache ist, dass ich es könnte, ich wähle die Ellipse früher aus. Okay, jetzt haben wir diese Lifte. Okay, also haben wir diesen Text, wir haben dieses Icon und dann haben wir diese Ellipse hier. Und los geht's. Snow hier. Innerhalb der Ellipse müssen wir einen Text hinzufügen, und dieser Text wird ein Text sein. Und wir müssen mehrere Texte hinzufügen. Aber lass es mich zuerst in den Mittelpunkt stellen. In der gleichen Größe. Es sollte in der Mitte sein. Also was ich tun werde, ich setze es auf diese Art und Weise. Trotzdem müssen wir es tun. Also statt 16, mach es 18. Mach es 18. Okay, also jetzt ist es in der Mitte, also werde ich machen, es auch zu einer Gruppe machen. Also nicht das hier. Ich muss nur diese Ellipse und dieses Tool gruppieren. Also mache ich die Make-Gruppe. Ich kann Paginierungselement sagen. Paginierungselement Jetzt haben wir unseren Artikel, wir haben unseren nächsten Button, Vorheriger Button, dann haben wir unseren Artikel. Jetzt dupliziere ich diese Gruppe, damit wir ein paar Buttons, ein paar Paginierungselemente, 123 und dann vier hinzufügen können ein paar Buttons, ein paar Paginierungselemente, 123 und dann vier hinzufügen Paginierungselemente, . Und dieser wird ein Punkt sein. Also für ein Ok, also brauchen wir mehr, vier, dann fünf, dann 67 und dann die 81. Und dann werden das unsere beiden sein und das wird C. Und das werden vier sein, und das werden fünf sein. Also müssen wir hier ci dot hinzufügen, nicht fünf. Wir werden diesen Punkt vier haben. Und dann ist 54, dann wird dieser fünf sein. Und dann wird dieser sechs sein. Und Seven und hier müssen wir, hier brauchen wir diesen Text nicht. Wir wollen dieses richtige Icon haben. Jetzt werde ich diese Ellipse gesund machen, tut mir leid, nicht die Lifte. Also müssen wir dieses Plug-In gesund machen , damit wir unser Icon hinzufügen können. Diesmal müssen wir dieses richtige Symbol hinzufügen. Ich stelle es in die Mitte. Und was ich dann tun muss, lege es zuerst rein. Und das ist das richtige Symbol. Und was ist die Paginierung? Wir haben ein paar Paginierungselement. Also 4321. Und so können wir auf diese Weise sehen, aber wir sollten hier eine weitere Ellipse haben. Wir müssen diese Ellipse hier haben. Wo ist diese Ellipse? Also diese und diese Ellipse. Sieh es dir hier an. Wir brauchen diese Aufzüge nicht, wenn ich diesen lösche. Okay, also sollten wir diesen nicht löschen. Wir haben unsere Art, wie dieser Paginierungsartikel das ist, sind diese Paginierungselemente. Also haben wir diesen Artikel, aber jetzt haben wir nicht, okay, also das ist unser Paginierungsartikel, also ist das unser richtiges Symbol. Also lege ich es in diese ein. Jetzt haben wir das und dieser Pfeil nach links sollte innerhalb dieser Paginierung sein. Also haben wir diese Paginierung und sieben zu eins. Also suche ich nur nach diesem Paginierungselement. Oh, okay. Diese beiden Dinge sind also nicht in einer Gruppe, also mach sie zu einer Gruppe. Okay? Jetzt können wir also auch Paginierungselement sagen. Okay, also wähle ich jetzt all diese Paginierungselemente hier aus. Und dann muss ich das aufräumen, damit wir sehen können, dass wir den gleichen Abstand haben können. Und dann können wir sehen , dass es immer noch so ist, unsere Daten nicht Horizontal verteilen vertikalen Abstand verteilen sind. Und dann haben wir das horizontale Scrollen verteilt. Dann haben wir okay, aber wir müssen es in der gleichen Größe machen, weil Sie sehen können, dass dieser nicht die gleiche Größe hat. Du musst dieses Ding nicht auf diese Weise haben. Du musst dieses Ding nicht auf diese Weise haben. Wir wollen es nicht auf diese Weise haben. Was müssen wir also tun? Wir müssen sicherstellen, dass es in derselben Schicht ist. Wir können auch den Platz vergrößern, aber jetzt ist es in Ordnung, wenn wir dies auf diese Weise nehmen, aber trotzdem müssen wir sicherstellen, dass jeder Gegenstand aus der gleichen Entfernung ausgewählt wird. Und auf diese Weise können wir es anpassen. Aber später können wir das Aufräumen wieder machen. Aber jetzt konzentriere ich mich nur auf dieselbe, ah, die gleiche Höhe und gleichen Ausgangspunkt von oben und unten. Du siehst jetzt, dass es gleich aussieht. Und so können wir es. Lassen Sie es mich also hierher stellen, damit es hier keine Probleme macht. Nun, wir werden es machen. Jetzt können wir den Artikel eins nach dem anderen hier platzieren. Und dann können wir sicherstellen, dass alles perfekt ausgerichtet ist. Sechs, sieben. Und dann das. Jetzt können wir all diese Paginierung zusammen auswählen. Und ich kann „df“ sagen, perfekt. Jetzt haben wir alles von gleicher Größe. Sie können sehen, dass wir oben und unten starten und von jedem Gegenstand den gleichen Abstand haben. Alles ist in Ordnung. Jetzt haben wir unseren Ursprung. Jetzt eine Sache, die ich hier ändern möchte. Also dieses Element möchte ich diesen Hintergrund ändern , diese Hintergrundfarbe, diese neue grüne Farbe, so dass dieser markiert ist und dieser ausgewählt ist. Und jetzt haben wir alles von hier aus. Um das zu überprüfen, was können wir tun? Grundsätzlich können wir unser anderes Raster auswählen. Wir haben unsere Grid-Optionen, oder? Wir haben unsere Hauptrastersäule. So können wir auswählen, nur zu Testzwecken erzählen. Wir können auswählen und begrüßen, und dann kann ich verspätet auswählen. Dann können wir, hier können wir uns einfach anschauen, dass alles von dieser Art aus beginnt, von der Mitte der Linie. Okay, also kannst du auf diese Weise auch dein Raster überprüfen, damit wir es immer haben, also haben wir das jetzt. Andere richtig? Unsere Paginierung ist also erledigt. Wir haben erfolgreich unsere Taube wird gezeigt unsere Horizontale heißt View, und das ist unser Header. Und im nächsten Teil werden wir versuchen, unseren Kategoriebereich zu gestalten. Wir sehen uns in der nächsten Vorlesung. Tschüss. 10. Fashion: Willkommen wieder einmal zurück. In diesem Teil werden wir unseren Kategorienbereich für unsere Modedesign-Anwendung hinzufügen unseren Kategorienbereich für . In erster Linie, was wir im Grunde tun, werden wir versuchen, so zu gestalten , dass Sie wissen, wie Sie mit dem Bildkontrast arbeiten können. Also zeige ich dir das Ding. Also müssen wir zuerst die Hälfte dieses Rechteckwerkzeugs nehmen . Also füge ich dieses Rechteckwerkzeug hinzu. Und davor müssen wir unseren Text hier hinzufügen. Also werde ich zuerst diesen Text hier duplizieren , diesen Titel. Ich werde das duplizieren, und ich werde es hier verfolgen. Genau der gleiche Ausgangspunkt, den wir haben wollen. Vielleicht hier. Und ich kann das sagen, okay? Oder wir nehmen von oben etwas mehr Platz ein. Ich kann sagen, Kategorie wählen. Wir können also „Kategorie auswählen“ sagen. Und dann werden wir das gleiche Design haben. Wählen Sie also eine Kategorie aus. Und dann wollen wir hier ein Rechteck haben. Also füge ich dieses Rechteck hier hinzu und füge dann hinzu, tut mir leid, wir brauchen diese Größe, normale Größe. Und dann haben wir diese Kategorie. Wir können also ein bisschen mehr verfolgen. Und dann wollen wir diese Kategorie haben, diese in diesem Rechteck. Und los geht's. Also haben wir diese Option jetzt, aber wir waren auf eine Farbe vorbereitet , die diese Farbe ist. Also möchte ich diese Farbe für diese Kategorie von Hintergrund hinzufügen . Und danach müssen wir unser Rechteck hinzufügen, um unser Kategoriebild hinzuzufügen. Also füge ich diese Größe hinzu und stelle sicher, dass, okay, zuerst lass mich hinzufügen, lass mich hier etwas Spielraum hinzufügen. Also Grenzradius hier, also fünf. Und mal sehen, wie es aussieht. Vielleicht können wir versuchen, zehn hinzuzufügen. Los geht's. Und dann können wir einfach die Karte von hier auswählen. Und das ist die Karte. Jetzt wollen wir hinzufügen. Also werde ich sagen, ich werde es tun, damit ich das umbenennen kann. Ich kann sagen Kategorie, Kategorie gemeine Karte. Sagen Sie dann Kategorie-Artikelkarte. Und jetzt möchte ich das duplizieren. Wir wollen, dass wir diese Art haben wollen und sicherstellen, dass wir denselben Start - und Endpunkt haben . Das wird also unser Start- und Endpunkt sein. Dann können wir dieses Ding 43 machen. Okay, also haben wir jetzt dreiundvierzig, dreiundvierzig , dreiundvierzig. Und unser Start und Ende auf der linken Seite ist gleich. Also haben wir diesen Punkt. Wenn ich also dieses auswähle, sehe ich, dass dieses rote Symbol mit diesem verbunden ist. Und dieser ist auch verbunden. Okay, also was ich jetzt machen werde, wähle ich all diese Rechteckkarte aus, nicht verwerfen. Ich werde sie zu einer Gruppe machen, und dann werde ich das tun , müssen wir nicht aufräumen, weil es bereits die gleiche Distanz hat. Also werde ich es duplizieren. Und dann füge ich hinzu, ich füge hier eine weitere Zeile hinzu. Und lass es mich schaffen, es ist im selben. Wenn Sie also dieses rote Symbol sehen , ist es von oben und unten gleich. Okay? Also jetzt werde ich sie zu einer Gruppe machen. Dann kann ich es einfach neu anordnen. Okay, cool. Perfekt. Also brauche ich es in der Mitte dieses Artikels. Bisher haben wir diese 44 oder vier Gegenstände. Was ich jetzt tun werde, wähle ich MAS für diese vier Elemente aus, um Bilder zu platzieren. Und statt dieser werde ich dann Modekategorie sagen. Wir haben 36. Wählen wir das aus. Lassen Sie uns diese alle auswählen. Und wir werden zwei verschiedene hinzufügen, ich habe zwei verschiedene berühmte Seele. Es wird einige Zeit dauern, diesen hinzuzufügen. Wird immer noch geladen. Und jetzt haben wir sechs. Also möchte ich das hier drücken. Ich möchte das hier drücken. Ich möchte das hier hinzufügen. Ich möchte das hier hinzufügen. Das hier, jemand hier. Okay, also müssen wir uns immer noch vorstellen, also werde ich ein Bild platzieren. Ich gehe in diesen Ordner. Ich füge hinzu. Ich wähle das aus. Und ich wähle das aus. Und dann drücke ich es hier. Also das und das. Cool. Jetzt sollten wir unsere vier Bilder sehen können . Jetzt möchte ich oben auf den Bildern Text hinzufügen. Was ich also haben möchte, das ist unsere Gruppe, und das ist unsere alte Gruppe, oder? So wuchsen vier. haben wir, und wir haben diese Gruppe. Und wir haben diese E-Mails. Okay? Jetzt haben wir dieses Bild. Dann haben wir dieses Bild, dieses Bild. Wenn Sie also dieses Bild auswählen und dann haben Sie die Möglichkeit, den MS-Kontrast zu ändern. Okay, Sie haben also, als ob es viele Funktionen hat Sie einfach basierend auf Ihrer ausprobieren können, Sie können einfach die Belichtungszuordnung ändern. Ein paar andere Optionen, die sie haben. Auf diese Weise können Sie einfach darauf hinweisen, dass das Hauptdesign des EMS Hintergrundfarbe oder irgendetwas hinzufügt. Du kannst es auf diese Weise machen. Also werde ich den Kontrast erhöhen. Und dafür werde ich auch den Kontrast ändern. Ich muss mich ändern. Okay, also ist dieser aus irgendeinem Grund nicht ausgewählt. Also wähle ich dieses Bild hier aus und ändere auch den Kontrast dieses Bildes auf diese Weise. Und dann wähle diesen hier aus. Und ich werde den Kontrast dieser und dieser Belichtung so ändern und dieser Belichtung , dass es etwas dunkel aussieht. Und wir werden unsere SMS hier ablegen. Das wird also das sein. Und los geht's, Wir haben diesen. Unser Kontrast wird also so aussehen. Und das sind die Vier. Und hier haben wir noch eine MAs. Und für dieses Bild wähle ich diesen Kontrast so aus. Diese Bilder. Wir müssen dies hinzufügen, nicht diesen Monat. Und dann haben wir dieses Bild. Und dann haben wir diese Schuhe. Okay, also haben wir das alles jetzt. Also können wir den Text einfach hier hinzufügen. Also drücke ich den Text hier oben drauf. Ich kann Hochzeitskleid sagen. Jetzt tut es das nicht. Dieser ist überhaupt nicht sichtbar. Was müssen wir also tun? Wir müssen dafür die Farbe in Weiß ändern. Aber es ist immer noch, es ist nicht machbar. Was können wir jetzt tun? Wir können den Bildkontrast dieses Artikels einfach so ändern , dass es sichtbar ist. siehst du jetzt. Also können wir ein Hochzeitskleid sagen. Und dann brauchen wir für diesen einen weiteren Text. Was kann ich eigentlich tun? Wir können diesen Text grundsätzlich duplizieren. Und dann lege ich es hier hin. Ich kann Winterjacke sagen. Also kann ich Winterjacke sagen und sie ist sichtbar. Und dann kann ich Schuhe sagen. Und dann haben wir das hier. Also müssen wir das in Schuhe umwandeln. Also sage ich Schuhe. Und ich sollte es in den Mittelpunkt stellen. Und das Zentrum, wir haben Shows, aber es ist nicht sichtbar. Also füge ich ein wenig mehr Kontrast und das kleine Dunkel hinzu, damit es ein lebendes Symbol ist. Also Schuhe. Und dann kann ich dazu sagen, oh, ich glaube, ich muss es dunkler machen. Also werde ich diesen Text hier duplizieren. Also ziehe ich es hierher und sorge dafür, dass es so ist. Ich kann eine Winterjacke sagen. Okay, dann haben wir unser T-Shirt für diese Dish Art. Ich werde diesen Text duplizieren und dann müssen wir hinzufügen, ich sage ein T-Shirt. Aber hier sieht es nicht gut aus, wir haben zwei. Auch hier müssen wir diesen Kontrast ändern , nur um es ein wenig dunkel zu machen. Cool. Dies ist der Kontrast, dann ist dies das normale Diagramm. Ich glaube, wir müssen das hier generieren. Und los geht's, wir haben diese Stimmung. Und ich werde dieses Duplikat ändern. Und dann haben wir das hier, Shard. Und dann haben wir eine andere, eine andere Kategorie hier. Aber ich habe den Kontrast nicht geändert, schätze ich mehr. Also werde ich das in Mekka bringen müssen. Und dann kann ich sagen, dupliziere diesen. Dieses kann ich zu unserem Winter-T-Shirt hinzufügen. Ich füge nur einen zufälligen Namen hinzu. Und dann haben wir noch eine, die in der Lage sein wird , Schuhe zu machen. Und dann können wir Thermoschuhe sagen. Wir müssen es ein wenig kontrastieren. Hier geht's. Also haben wir unsere Kategorien jetzt bereit. Okay, Sie haben also gelernt , Bilder zu E-Mails hinzuzufügen. Wie können wir schreiben? Und dann weißt du, wie kann man den Kontrast hinzufügen? Das war also der Hauptzweck , um Ihnen zu zeigen, wie Sie dieses hinzufügen können? 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. Newsletter: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, ein Abonnement hinzuzufügen , das ich in unserem Design gezeigt habe , ähnlich diesem. Löse dafür. Was haben wir also? Im Grunde haben wir diesen hier. In Ordnung, also werde ich zuerst die Rahmengröße oder horizontal vergrößern , damit wir hinzufügen können, dass wir hier weitere Optionen hinzufügen können. Jetzt müssen wir die Hälfte dieses Rechtecks hier nehmen. Ich zeichne hier ein Rechteck. Und das ist das Rechteck , das ich hier entwerfen möchte. Und dann lasst uns sehen, wie es aussieht. Wir haben also diese Größe des Rechtecks. Ich kann es ein wenig verringern und dann haben wir dieses Problem hier. Also wähle ich auch diese Farbe aus. Und danach müssen wir hier ein Bild hinzufügen. Dafür möchte ich hinzufügen, dass ich hier ein Rechteck zeichnen möchte, um unsere E-Mails hier zu platzieren. Also möchte ich hier zu einem Rechteck hinzufügen. Und was ich haben möchte, möchte ich hier wenig Design hinzufügen. Doppelklicken Sie also. Also möchte ich das haben. Wir müssen diesen hier auf diese Weise auswählen, und hier auch so. Und die Mitte. Und hier auch auf diese Weise. Und danach möchte ich ein wenig Wasserradius von 20 Pixel hinzufügen . Und Alkalien. Tu es. Also füge hinzu, was immer es ist, 20 Pixel. Mal sehen, wie es aussieht. Es sieht so aus. Jetzt möchte ich unsere E-Mails hier einfügen. Also bitte ein Bild. Und wir sehen Chaos, die ich hier einfügen möchte, ich kann dieses einfügen. Und sobald wir diese haben. Und wir sollten unser Bild hier sehen können . Okay, also haben wir hier auch ein Eingabefeld und dann einen Titel. Also haben wir das hier. Also füge ich hier schnell einen Text hinzu. Und ich kann sagen, Newsletter abonnieren . Also haben wir dieses Problem hier. Wir können sagen, dass Sie unseren Newsletter abonnieren. Und so werde ich die Schriftgröße dieses Schriftstücks erhöhen. Sollte 30 bis ein bisschen größer sein. Und ich werde die Schriftart ändern, diese gestalten. Nicht das hier. Ich füge so etwas hinzu. Nicht genau das hier. Es sieht gut aus, aber es ist nicht völlig machbar. Wir werden also etwas anderes auswählen , bis wir diesen Newsletter auswählen können . Und hier haben wir zwei weitere Designs, das sind diese beiden Designs , die wir früher hatten. Was ist also im Grunde genommen unser Ellipsendesign getroffen, das wir hatten. Also werde ich das duplizieren. Wo ist dieses Header-Ellipsen-Design? Dieses Header-Ellipsen-Design ist also da. Also müssen wir nach oben gehen. Also müssen wir hoch und runter gehen. Dies ist also unsere Hauptdarstellung, die wir früher entworfen haben. Was ich also im Grunde machen werde ich sie zu einer Komponente machen. Also klicken Sie mit der rechten Maustaste und erstellen Sie dann Komponente, okay, damit wir sie wiederverwenden können. Jetzt ist es also in unserem Vermögenswert. Es befindet sich in unserem Vermögenswert. Okay, also haben wir dieses Ding. Also was ich tun werde, ich werde es einfach duplizieren, ich ziehe es einfach hierher. Ich ziehe es einfach her. Und dann ziehe ich es einfach hierher. Und wir haben unseren Newsletter und gleich hier drüben. Und dann füge ich hier ein Rechteck hinzu, um den Text hier hinzuzufügen. Also füge ich den Text hier für unser Abonnement hinzu, für unseren Button. Es sollte also so aussehen. Dann um 20 Uhr. Und dann entscheide ich mich für dieses. Ich füge diese Kreide hinzu. Was haben wir im Grunde genommen hier, wir haben dieses Ergebnis. Wir haben hier keinen Schlaganfall. Also brauchen wir hier keinen Schlaganfall. Also haben wir 20, glaube ich. Statt 20 fügen wir Party hinzu. Jetzt haben wir dieses Design verspätet. Und ich werde das duplizieren. Und ich riskiere die zweite Tastengröße. Und ich werde es mit diesem verschmelzen. Ändern Sie so schnell den Hintergrund dieses, damit wir im Grunde wissen, was wir entwerfen. Das sind also alle nachfolgenden Schaltflächen. So sieht unser zweiter Button aus, dass ich ihn einfach dupliziere. Also dupliziere einfach den gleichen Button hier und falte dann oben. Jetzt haben wir das hier. Ich denke, wir müssen zunehmen, wir müssen unsere Notwendigkeit erhöhen, unsere Unterseite zu erhöhen. Sie können also in dieser Größe und dieser Seite einfach ein wenig vergrößern . Und hier haben wir einen Text, der unser Platzhaltertext sein wird . Und dieser wird 12 Pixel groß sein. Viel mehr als das. Ich lege es hier hin. Also mailen Sie. Und dann möchte ich ein Icon von unserem Icon hinzufügen , das r. heißt. Wir können Cent Icon sagen. Und nur unter Schock es hier. Leg es hier hin. Fügen Sie auch nur den Text und die Mitte hinzu. Und lass mich so, dass es außerhalb des Rahmens ist, also sollte es innerhalb des Rahmens sein. Jetzt haben wir unsere Ikone und wir haben unsere Texte. Also kann ich diesem ein bisschen näher kommen. Los geht's. Wir haben diese E-Mail, wir haben das. Jetzt haben wir diesen Text hier. Wir müssen den Button „ Abonnieren“ hinzufügen. Und ich wähle es auf 16 aus. Wir können es 20 auswählen, ich denke schon zwanziger Jahre oder Schriftgröße für diese Art von Schaltfläche absteigen. Also können wir hier abonnieren sagen. Cool, wir haben das, und warum müssen wir dieses Problem hier beheben? Also müssen wir es auf diese Weise hinzufügen. Und dann haben wir unser Image, wir haben unser Design, unser Abonnement und dann diesen Text, den ich hier hinzufügen möchte. Und wir können hinzufügen. Und ich werde diesen Text hier duplizieren. Und dafür mache ich, dass die Schriftgröße 216 beträgt. Und hier füge ich noch einen Text hinzu. Das kann ich sagen. Sie erhalten Weit und Rabatt per E-Mail Promotion. So erhalten Sie ein ermäßigtes Angebot per E-Mail Promotion. Dafür gibt es acht. Also haben wir unser Abonnement, wir erhalten alle vier und Rabatt per E-Mail Promotion. Dies ist unser Newsletter. Es ist nur der grundlegende Newsletter. In Ordnung, also haben wir unser Abonnement-Teil bisher entworfen. Und in der nächsten Vorlesung werden wir versuchen, etwas anderes zu machen. Wir sehen uns also in der nächsten Vorlesung. Tschüss. 12. Design für den Fußzeile: Willkommen wieder einmal zurück. In diesem Teil werden wir dafür unseren Fotobereich entwerfen, ich muss die Rahmengröße etwas mehr erhöhen. Okay, also haben wir in unserer Fußzeile diese Art von Design. Also haben wir unsere, wir haben unsere beiden Artikel, also Produkt und dann Informationen über wenig Informationen und dann soziale Ikone. So schnell entwerfe ich dieses Rechteck hier. Und dann zeichne ich dieses Rechteck weil wir ein Rechteck benötigen , um unseren Artikel hier hinzuzufügen. Und mal sehen, wie es aussieht. Wie das Weiß im Grunde aussieht. Also sollte es das sein. Also diese weißen Bereiche, okay, also füge ich die Farbe des Hintergrunds hinzu. Ich bin nur ein Ordner. Es sieht also so aus. Das ist also unsere Fußzeile. Jetzt fügen wir unsere hinzu, wir fügen unser Element in einen Ordner ein. Zuerst fügen wir unseren Titel hinzu und wir können sagen , dass wir sehen können, dass dies die effiziente Anwendung ist. Und du kannst sagen, alle Männer kleiden sich. Nur ein zufälliger Name , den ich gerade hinzufüge. Es sollte nicht sinnvoll sein. Der Hauptzweck besteht darin, diesen Text zu zeigen. Also fangen wir unseren Artikel von hier aus an, Orangen. Und dann werde ich es duplizieren. Und für diesen Text werden 16 Pixel oder vielleicht 15 Pixel sein. Hier kann ich das sagen. Ich kann Hochzeitskleid sagen. Dann können wir Partykleid sagen , DJs. Und dann kann ich sagen, wir können eine Winterkollektion sagen, Fensterkollektion. Und dann füge ich hier noch einen Text hinzu und sage jemandem die Schuhe. Alles klar, also haben wir dieses Ding. Also werde ich es uns mal anschauen. So schnell, wähle all diese Dinge aus und mach sie zu einer Gruppe. Und los geht's. Wir brauchen also keine gute Idee, denn sie befindet sich bereits in der gleichen Entfernung wie wir. Was kann ich jetzt hier machen? Grundsätzlich können wir sie zu einer Gruppe machen. Und dann dupliziere ich das hier. Und dann muss ich es für diesen Artikel duplizieren. Und dann kann ich Kinderkleid sagen. Und dann haben wir noch eine Information und den Text und die rechte Seite. Also wähle ich den Text hier aus und füge den Text hinzu, über den wir sagen können. Und los geht's. Wir können diese von hier aus hinzufügen. Und diese Größe wird auf dieser Seite sein, ist 20, oder? Dieser ist also auch 20. Und hier willst du Informationssekunden hinzufügen , sagt Loren Ipsum. Ich möchte hier nur ein paar Dummy-Text hinzufügen. Also um Dummy-Text hinzuzufügen. Und wir können es nehmen, du kannst diesen Dummy-Text einfach hier hinzufügen. Also das und das. Also haben wir diesen Text hier. Und dann zeichne ich, also musst du nur das Textwerkzeug auswählen und dann diese Entzündung auf diese Weise zeichnen. So dass diese Seite, so dass alles, was Sie hier einfügen, APR innerhalb dieser Option. Aber statt 15, also 20 machen wir Selected 12th hinzufügen. Und dann wird es nur funktionieren. Oder wir können eine Sache machen, wir können es einen Schritt zurück machen, und dann schaffe ich es hier. Also haben wir unser Thema, wir haben unsere Informationen, aber trotzdem müssen wir nur dieses ein bisschen hinzufügen. Ich denke, von hier aus können wir es anpassen. Cool. Also haben wir dieses und unten haben wir Shri Icon für dieses. Also möchte ich diese Ikone auf diese Weise gestalten. Also werde ich kein Rechteck machen, ich nehme das Ellipsenwerkzeug. Also füge ich dieses Ellipsenwerkzeug auf diese Weise hinzu und definiere dann das Ellipsenwerkzeug 40 bis 4040 und dann 40. Und mal sehen, wie es aussieht. Es sieht also so aus. Also haben wir diese 40 und dann werde ich es duplizieren. Doppelte Auswahl. Wie viele Icons haben wir? Wir haben unsere vier Icons. Wir haben vier Icons. Also werde ich es viermal drei und die vier duplizieren und sie zu einer Gruppe machen. All dieser Punkt, Wirtschaftswachstum. Man kann sagen, wir können sagen wie gehen. Und lass mich sehen, okay, also haben wir den gleichen Abstand und jetzt werde ich die Hintergrundfarbe dieses ändern . Wir können diese Farbe wählen. Und jetzt müssen wir unsere Social-Icon-Schriftart hinzufügen , die ich Symbole vom Feeder-Symbol nehmen werde. Und ich sage mal, ich sage Facebook. Ich sage Facebook. Also muss ich dieses ganze Facebook auswählen. Ich muss diesen darin auswählen. Und ich nehme es rein. Unser Facebook ist also da. Und dann müssen wir Star hinzufügen. Also wähle ich diesen Instar aus, lege ihn in diesen Rahmen und ziehe dann das Instagram-Symbol hinein. Jetzt haben wir also unser Instagram-Symbol, aber wir denken, dass wir es auf diese Weise in den Mittelpunkt stellen müssen. Ja. Jetzt haben wir unser LinkedIn. Also haben wir unser LinkedIn auf diese Weise. Und dann muss ich es in den Rahmen legen. Und danach haben wir das Twitter-Symbol. Also gehe ich zu Twitter. Also wird Twitter hier erscheinen und es dann hineinlegen. Davor stell es hier hin. Und dann los geht's. Also haben wir alle unsere Ikone. Wir haben also erfolgreich gestaltet unsere Fußzeile nur ein Grundnahrungsmittel oder Artikel ist. Und ich werde dieses Video gleich hier beenden. Und in der nächsten Vorlesung werden wir versuchen, unsere Anmeldung und Anmeldung zu gestalten. Wir sehen uns in der nächsten Vorlesung. Tschüss. 13. Seitendesign: Willkommen wieder einmal zurück. Bisher haben wir unsere Haupt-Homepage entworfen. Wir haben unsere Fußzeile, unseren Abonnement-Newsletter-Teil, unseren Kategoriebereich über Paginierung, Modebereich, diesen Ursprung in der Bildlaufansicht entworfen unseren Abonnement-Newsletter-Teil, unseren Kategoriebereich über Paginierung, . Und jetzt müssen wir noch zwei Dinge tun. Eine davon ist für die Anmelde - und Anmeldeseite. Und eine andere Sache ist, dass wir ihnen, wenn Sie darauf doppelklicken , eine Popup-Modalbox wie diese Art von Karte zeigen . Und wir werden auch diese Art von horizontaler Sichtweise umsetzen , die wir zuvor gemacht haben. Und dann werden wir es tun, wir müssen dieses Ding auch entwerfen. Dafür schließe ich zuerst diese Anmelde- und Anmeldeseite ab. Dann schauen wir uns das an. Und jetzt haben wir unseren Designbereich hier. Damit dies die Anmelde - und Anmeldefunktionen hinzufügen kann, müssen wir unseren unterschiedlichen Rahmen für unsere Anmeldung erstellen. Und ich werde versuchen, ein weiteres Bildschirmdesign zu zeigen. Das ist also unser Decks-Zeug. Jetzt wähle ich einen weiteren Frame aus. Also werden wir einen Desktop setzen. Ich ändere den Namen, ich sage ihn zu Hause. Das Hauptstück. Jetzt wähle ich einen Frame aus. Und jetzt zeichne ich dieses Mal unseren benutzerdefinierten Rahmen. Also zeichne ich einen benutzerdefinierten Rahmen. Sie können also einen benutzerdefinierten Rahmen zeichnen. Ich zeichne es in dieser Größe. Also werden wir ein EMS hinzufügen und dann werden wir unsere Informationen hinzufügen. Also schaffe ich es in dieser Größe. Ja. Also sage ich „Abmelden“. Ich füge einen Randradius in Pixel hinzu. Und ich versuche nicht, das zu beheben, ich denke, ich kann beheben, dass dieses Pixel für dieses Pixel ausreicht. Und hier füge ich noch ein Rechteck hinzu. Hier oder ein indirekter Winkel. Wir werden unsere MS zeigen also möchte ich es, ich mache ihr ein Rechteck, damit wir es mit den linken Seiten anpassen können. Und was können wir jetzt von hier aus tun? Also werde ich das wenig machen. Und jetzt muss ich die MS in diesem Teil hinzufügen. Was kann ich also tun? Versuchen wir diese MS hinzuzufügen Lassen Sie uns dieses Bild auswählen. Und jetzt, also füge ich dieses Bild hier ein. Okay, was haben wir sonst noch? Wir haben noch andere Einkaufsmöglichkeiten in Staunen? Vielleicht können wir dieses EMS ausprobieren und mal sehen. Oh, das nicht. Ich behalte den vorherigen. Und hier müssen wir einen Text hinzufügen , und dieser Text wird ein Grund für die Abmeldung sein. Also, und dann müssen wir das zu 20 oder vielleicht 24 hinzufügen. Und dann ändere ich die Farbe auf, ich füge eine Farbe hinzu, die wir haben, alle, die dunkle, die wir haben. Also denke ich, dass es eine vorgefertigte und dunkelgrüne Farbe gibt. Also behalte ich das hier. Und dann müssen wir auch hier, wir können jetzt unser Raster aufstocken, damit wir genau wissen, von wo aus wir angefangen haben. Also haben wir unser vorgefertigtes Gitter. Dann kann ich es jetzt machen? Das ist also unser Text. Also stelle ich es hier hin. werden wir damit anfangen, unsere Artikel daraus zu entwerfen. Großartig, okay, also werde ich hier unser Rechteck auswählen, und hier müssen wir unser Eingabefeld zeichnen. Ich füge den Randradius in zwei Pixeln hinzu. Und wir müssen unsere Grenze hier hinzufügen. Also an der Grenze ein Pixel. Lassen Sie mich das vorher ausführen und sehen, wie es aussieht , damit wir genau wissen, wo wir Änderungen vornehmen müssen. Also haben wir dieses und es dauert einige Zeit, um dieses Ding zu machen. Okay, also haben wir dieses Design, also werde ich den Hintergrund dieses Designs ändern. Ich mache es weiß. Und dann haben wir dieses Weiß. Und in diesen schreibe ich einen Namen. Ich sage mal, schreib hier eine SMS. Ich sage einen Namen. Der Name wird dieser Name sein. Und statt 24 und es wird 12 werden, wird es 12. sein. Wir müssen diesen anpassen. Also dieser Name und dieses Rechteck werde ich eine Gruppe machen. Und dann mache ich ein Duplikat. Wir brauchen also zwei Artikel, zwei weitere Artikel. Man ist also für E-Mail, eins ist für Passwort, und wir brauchen auch einen für unseren Button. Und vor dem Button brauchen wir einen anderen Gegenstand. Also sage ich den Namen und ich werde jetzt den Text ändern, also name. Und dann wird das unsere E-Mail sein, wird unsere E-Mail sein, und das wird unser Passwort sein. All dies sind Platzhalter, Platzhaltertext. Also Passwort und dieser wird unser Text sein, aber dieser Text wird hier sein. Also werde ich, ich werde mich ändern, diese Takes von hier entfernen. Und dafür brauchen wir keine Grenze. Also müssen wir unsere Hintergrundfarbe haben, die diese Farbe ist. Und jetzt muss ich diesen Text hier ablegen. Und hier können wir sagen, abmelden. Okay, und ich kann es hier ablegen. Also möchte ich die Schriftgröße dieses Textes erhöhen. Also werde ich es hinzufügen, schätze ich, und dann kann ich einfach sicherstellen, dass es in der Mitte ist. Jetzt haben wir unsere Abmeldung und wir können unser Icon hier hinzufügen. Also wähle ich hier Filtersymbol aus. Ich füge dieses Icon hinzu. Also ziehe ich das einfach hierher. Und ich ändere diese Farbe Weiß und lege sie in den Rahmen. Okay, also haben wir unsere Abmeldung, wir haben unsere Anmeldeseite. Und hier möchte ich einen Zustimmen-Button hinzufügen , den wir oft mit Bedingungen und Konditionen sehen. Wir haben also diesen Begriff und diese Bedingung. Und los geht's. Und wir können einen kleinen Randradius hinzufügen. So kann ich zu diesem Grenzradius 1010 hinzufügen. Ich kann diesen Grenzradius fünf hinzufügen. Und so wird es aussehen. Das Recht. Also haben wir diese Paginierung und ich denke, wir können hier ein Symbol hinzufügen, das unser Don-Symbol oder unser Auswahlsymbol sein wird. Dafür gibt es also kein Symbol. Dafür gibt es also kein Symbol. Okay. Es gibt also eine Ikone. Ich habe nach diesem gesucht, das Check Icon heißt . Ja. In Ordnung. Dies ist der Name dieses. Und ich lege dieses Icon in diese Box. In Ordnung, also ist unsere Anmeldeseite fertig und jetzt müssen wir hier einen weiteren Text hinzufügen. Also wähle ich hier Text aus. Ich kann hier unter Text schreiben, ich kann sagen, dass ich schon ein Konto habe , dann melde dich hier an. also schon ein Konto hier einloggen. Wenn Sie also bereits ein Konto haben, können Sie sich anmelden, indem Sie hier klicken. Und wenn sie keine zehn haben, können wir sie für das Abmeldetempo schicken. Jetzt werde ich, ähm, okay, also unsere Anmeldebasis erledigt, und ich werde dieses Video genau hier beenden, und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. Tschüss. 14. Anmeldung und OTP: Willkommen wieder einmal zurück. In diesem Teil entwerfen wir unsere Anmeldepaste und unser ODP-basiertes Design. Wir brauchen also ein ähnliches Design für unsere Anmeldeseite. Also was ich tun werde, ich wähle diesen Rahmen aus. Und dann dupliziere ich diesen Frame. Okay, jetzt mache ich es zur Anmeldeseite. Okay. Also werde ich dich dazu bringen, dass ich mich anmelde. Und ich werde auch den Text ändern, um mich anzumelden. Und dann ändere ich das. Entferne das eher. Ich füge dieses Ding hier hinzu. Und ich füge das Ding auch hier hinzu. Und das müssen wir nicht hier haben. Wir müssen das nicht hier haben. Also, okay, also haben wir das hier, damit wir es hier verfolgen können. Wir können von hier aus anfangen. Ich denke, wir können das einfach neu anordnen. Sie können diesen auch hierher ziehen. Behalten Sie also 34 bei. Und ich lege diese SMS hier hin. Also kann ich hier sagen, habe kein Konto. Ich kann sagen, dass du kein Konto hast. Dann kann ich sagen, dass ich sagen kann, dass ich mich hier abmelden kann. Und dieser wird Sinus sein. Okay, also sind wir mit unserer Anmeldebasis fertig und jetzt brauchen wir ein anderes Design für unser OTP. Also werde ich es duplizieren. Also haben wir unsere Anmeldephase und wir haben unsere Anmeldung. Jetzt wird alles unser RTP sein, ODP. Also hier brauchen wir das nicht zu haben. Wir müssen das nicht haben. Aber es ist immer noch, wir müssen hier einen Button anstelle dieses Textes haben. Wir können, Okay, ich denke, wir können diesen Text hier aufbewahren. Du kannst, ich kann einfach hier schreiben oder das p das wird okay sein. Also das ganze P hier. Dies wird also der Ort sein, an dem OTP bezahlt. Hier. Ich werde das ändern, was zur Überprüfung geht. Ich kann „Verifizieren“ sagen. Also sage ich „Verify“. Das wird welcher Text sein. Hier möchte ich für das Rechteckfeld für unser OTP hinzufügen , das wir setzen müssen. Also sage ich diese Größe. Und ich füge diese weiße Farbe hinzu. Und dann schattiere ich. Und dann ein Schlaganfall. Ja, ein bisschen Randradius, vielleicht zehn Pixel, nicht zehn Pixel, fünf Pixel. Und lasst uns es laufen lassen und sehen, wie es aussieht. Bisher. Wir haben unsere Anmeldeseite. Das ist also unser OTP zahlt und es sieht so aus . Es ist okay. Wir brauchen diesen Text nicht hier. Jetzt muss ich das nur ein paar Mal duplizieren. Also füge ich es hinzu. Okay, also müssen wir ein Duplikat erstellen. Und dann 23456. Also haben wir 61 und dann können wir die Überprüfung sehen, in Ordnung. Sobald sie es überprüft haben, werden wir sie auf die Homepage schicken. Okay, also haben wir unser Anmelde-Tempo, unsere Anmeldezahlen und unser Designtempo entworfen . Und bisher haben wir so viele Dinge entworfen. Und so haben wir Anmeldeseite für OTP-Spieler, Tempo und Homebase. Und dann werden wir im nächsten Teil versuchen, diese Modellbox zu entwerfen , und wir müssen auch unser Prototyping hinzufügen. Wir sehen uns in der nächsten Vorlesung. Tschüss. 15. Modales Box-Design: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, unsere Modellbox für unseren Artikel zu entwerfen. Dafür erstelle ich ein erstes Mal, ich muss hier unseren benutzerdefinierten Frame erstellen. Also wähle ich hier einen Rahmen aus. Und ich kann sagen, das ist unser Rahmen. Ja, wir können diese Größe machen und dann füge ich den Grenzradius zehn hinzu. Und dieser Frame-Name wird sein, ich kann sagen, was ich sagen kann. Ich kann Artikelmodell Glühbirnen sagen. In Ordnung, also möchte ich jetzt ein Bild hinzufügen. Dafür. Ich muss zuerst ein Rechteck hinzufügen. Und das ist unser Rechteck , das ich zehn hinzufügen möchte. Okay, also haben wir dieses eine Rechteck und ich werde es duplizieren. Ich füge hier noch einen hinzu. Also füge ich zwei hinzu. Okay, lass es uns in die gleiche Größe legen. Jetzt, ich schnell, möchte ich hier zwei Bilder hinzufügen. Was ich hinzufügen werde, muss ich hier zu EMS hinzufügen. Ich wähle dieses und dieses aus. Und lasst es uns zuerst hier setzen. Also dieser ist hier und dieser hier. Das sind also die beiden EMS. Und wie ich dir schon gesagt habe, wie das geht, scrollen, weißt du es bereits. Was werden wir also so schnell die gleichen Techniken anwenden. Ich möchte machen, es zu einem Fragment machen, ein Fragment machen, es zu einem Rahmen machen. Das wird also ein Frame neun sein. Und das wird unser Frame, Frame Nummer zehn sein. Wenn Sie möchten, können Sie den Namen aber auch ändern, da diese Nummer aus dem gesamten Projekt stammt. Oder in unserer anderen, auf unserer Homepage, haben wir acht Frames gemacht. Infolgedessen wird es bei neun und dann zehn beginnen . Okay, jetzt muss ich sie zu einer Gruppe machen. Also werde ich kombinieren, tut mir leid, wir müssen sie in einer Gruppe machen, die wieder unsere Gruppe sein wird, Elefant. Okay, also was wir jetzt im Grunde tun müssen, also müssen wir auf diesen Clip-Inhalt klicken und dann müssen wir ihn bis zu diesem einen kleinen Platz hier anpassen. Okay? Also haben wir diese Dinge und okay, also noch eine Sache, die ich vergessen habe hinzuzufügen, lass mich es schnell hinzufügen. So schnell, wählen wir dieses aus. Ich habe vergessen, diesen Effekt hinzuzufügen, also fügen wir diesen Effekt zuerst hier hinzu. Und wenn wir es ausführen, können wir das auch so ausführen, damit wir es sehen können. Also haben wir unseren Rahmen. Und ich werde das alles in einem Frame kombiniert. Und dann okay, also sieht es gut aus. Okay, also gibt es hier ein Problem. Dieser hat keine Grenze für, ich meine, für diesen. Wenn wir uns also hier ansehen, wenn ich mir diesen Frame Nummer zehn ansehe, und dieser ist Frame Nummer zehn, aber dieser Rahmen hat keine Grenzen, also müssen wir diesem Rahmen Wasser hinzufügen , damit wir genau das Gleiche. Okay, also wähle den Rahmen aus und füge hier den Randradius hinzu, nicht den Rahmen. Wir haben also diese beiden Grenzradius. Okay, jetzt können wir unseren Mainframe für diese beiden auswählen . Dann klicke auf die Zwischenablage und mache es dann auf diese Weise. Gehe jetzt zu diesem Prototyping. Und hier beim horizontalen Scrollen sollten wir jetzt sehen können, wir in der Lage sein sollten, unseren Artikel jetzt zu scrollen . Wir müssen diese hier platzieren , um hier zu knöpfen. Also haben wir unseren Button bereits bereit. Also können wir es einfach wiederverwenden. Verwende es wieder. Was können wir tun? Wo sind unsere Knöpfe? Also haben wir unser Zuhause. Und lass mich das minimieren , damit wir wissen, wo unser Button ist. Also haben wir unseren Paginierungsartikel, wir haben unsere Rahmenmode-Karte, und wir haben unseren Hauptbereich, Abschnitt Paginierung Rechteck. Also Hauptabschnitt. Dies sind die beiden Dinge, die wir haben. Wir haben das rechte Icon, wir haben das linke Symbol. Okay, was können wir hier tun? So können wir es duplizieren und dann können Sie ein Symbol ziehen. Wir können es von hier ziehen. Eigentlich mache ich das rückgängig. Ich mache das hier rückgängig. Ich hoffe, wir haben nichts kaputt gemacht. Ich hoffe, wir haben nichts kaputt gemacht. Okay. Hier ist alles in Ordnung. Was ich also im Grunde tun werde, werde ich es schaffen, wo es ist. Also mache ich es zu einer Komponente, damit wir es wiederverwenden können. Erstellen Sie also Komponente und das linke Symbol wird erstellt. Komponente. Okay, jetzt müssen wir es nicht von hier ziehen und ablegen. Wir können es direkt von unserer Komponente aus tun, von unserem Vermögenswert aus. Also haben wir unser linkes Symbol, also ziehe ich es nach rechts. Ich ziehe es her. Und dann haben wir unser linkes Symbol. Also ziehe ich es hierher. Wie einfach ist es, also müssen wir nicht immer wieder dasselbe tun . Und jetzt ist eine andere Sache, dass wir es in unsere Schachtel legen müssen . Okay, damit wir sicherstellen können, dass wir hier genau die gleiche Distanz haben . Und wir müssen diesen auch aus dieser Größe hinzufügen. So können wir es so groß machen. Und lass mich sehen, wie es aussieht. Es sieht also so aus. Okay, also müssen wir es uns leid tun. Ich glaube, wir haben hier einen Fehler gemacht, also stelle ich ihn hier hin. Okay, also haben wir jetzt den gleichen Abstand von dieser Größe und auch der Startpunkt ist gleich. Stellen Sie sicher, dass wir dieses Ding haben. Wir haben also halb Startpunkt. Wenn ich nun zu diesem Prototyping übergehe , haben wir für diesen Button bereits einen Prototyp. Es kommt von der vorherigen, also werde ich diesen entfernen. Jetzt haben wir keinen Prototyp für diesen Button. Und als wir die Komponente trafen, hat es alle Funktionen und Funktionen aus unserem vorherigen Muster übernommen. Sie müssen diesen also nur hier auswählen. Und von hier aus musst du nur den Prototyp entfernen. Dann haben wir jetzt kein Prototyping in diesem Muster. Und wir können von hier aus das Prototyping tun. Jetzt füge ich Interaktionen hinzu. Hier. Klicken Sie darauf, klicken Sie auf onclick. Und dann müssen wir von hier aus eine Schriftrolle hinzufügen, wo wir scrollen möchten. Wir wollen scrollen. Wir wollen zu diesem Bild neun scrollen. Und ich muss prüfen, welcher genau Frame neun ist und welcher zehn getrimmt wird. Dieser ist also Frame neun und dieser wird im August gerahmt. Wir sind jetzt von neun dabei. Wir müssen zu Frame 10 gehen. Okay, also müssen wir jetzt gehen, um zu Frame Nummer zehn zu scrollen. Und dann müssen wir die Animation intim haben. Und anstatt es einfach zu machen, müssen wir uns sanft einstellen. Okay, also müssen wir von hier nach hier sanft sagen. Okay, also wird es so aussehen , wie diese Art von Innovation. Und wenn wir bei Interaktionen darauf klicken, wählen Sie einen Bildlauf aus dem Nichts aus, um zu scrollen, um Frame neun hinzuzufügen. Das ist unser Frame Nine. Und in Animation. Und dann wähle dies und sanft aus. Okay, hoffentlich können wir sehen, dass wir es können, wir können, wir können von links nach rechts und von links nach rechts scrollen . Also haben wir gelernt, wie es geht. Alles klar, was haben wir sonst noch? Wir müssen einen Text hinzufügen und dann müssen wir normalen Text hinzufügen. Und dann jetzt noch ein paar andere Optionen. Also füge ich R. hinzu Also gehe ich jetzt zurück zum Designbereich hier. Und hier. Lassen Sie uns zuerst dieses Layout-Raster hinzufügen , damit wir wissen, von wo aus wir anfangen können. Wir können damit anfangen. Also füge ich einen Text hinzu. Also werde ich hier Text bearbeiten. Ich sage, wir werden sagen, wir fangen von hier aus an. Wir können sagen Sommergesichts, das Sommerkleid, oder ich kann sagen Sommer-T-Shirt. Nur zufälliger Text. Okay, also haben wir das statt 15, ich wähle es auf 20 aus, damit es größer aussieht. Also T Einige sind T-Shirt. Los geht's. Und danach möchte ich es haben, also kopiere ich diesen Text von Loren ipsum. Auch hier füge ich diesen Text hinzu. Und ich zeichne eine SMS. Und ich füge es hier ein, aber wir brauchen keine Zwillinge. Wir müssen einen 12. haben. Cool, es sieht gut aus, damit wir den Abstand zwischen diesen beiden Gegenständen reduzieren können. Und dann kann ich auch diese Höhe dieses Textes reduzieren. Also haben wir diese Informationen jetzt. Und danach wollen wir ein Eins-Plus-Symbol haben. Ein Preissymbol und dann Plus- und Minus-Tasten. Also sage ich Dollar für 5450 und die Größe wird 20 sein. Alles klar, es sieht gut aus und es ist immer noch, wir müssen hier ein paar Optionen hinzufügen. Also hier müssen wir auch ein Plus und dann die Nummer und dann den Minusknopf haben. Dafür füge ich hier ein Rechteck hinzu. Ich zeichne rect, kleine Größe des Rechtecks, füge Randradius fünf und ändere dann die Farbe in Weiß. Dann können wir unseren Schlaganfall hinzufügen und sehen, wie er aussieht. Es sieht so aus. Und dann gehe ich zu Kommando D. Und das D dessen, was ich tun muss. Also füge ich hier ein Minus-Symbol hinzu, das als Minus dauert. Aber du kannst es definitiv zeichnen. Und dann muss ich hinzufügen, weil die Größe von und hier können wir es in die Mitte stellen. Auf der rechten Seite können wir es in die Mitte stellen. Und dann müssen wir hier eine Nummer hinzufügen. Ich kann fünf sagen, aber wir werden die Schriftgröße auf normale Größe ändern, vielleicht 20, und legen sie dann in den Text. Die Zahl ist also fünf. Und dann fügen wir noch einen Text hinzu, der unser Plus-Symbol sein wird. Also dieses Plus-Symbol. Und wieder werde ich es aufgrund der Schriftgröße hinzufügen. Also werde ich sagen, dass 40 nicht 44 sind, diese, ich glaube 36 oder 24. Ich muss es in die Mitte stellen. Jetzt haben wir dieses Minus und dann haben wir dieses Plus-Symbol. Ich schreibe. Es sieht gut aus, aber was müssen wir jetzt haben? Wir haben noch ein paar andere Dinge hinzuzufügen. Wir haben diese oh, LMS Verbrauchsteuer und dann diesen und diesen Knopf. Also werde ich hinzufügen, also was ich hier machen kann. So können wir all diese Gegenstände in einer Gruppe herstellen, dies, dies und dies und auch dies, machen sie zu einer Gruppe. Okay, ich weiß, dass wir die Nummer des Artikels sagen können. Und hier müssen wir unsere Größe hinzufügen. Und ich füge Effekte davon hinzu. Und mal sehen. Also haben wir das und ich möchte einen Randradius von fünf Pixel haben , und dann kann ich ihn viermal duplizieren. Also werde ich Control D sagen . Anstatt dieses Ding zuerst direkt zu machen, fügen wir hier Text hinzu. Und ich kann groß sagen, und dieser geht nicht dorthin. Es wird also 20 Pixel sein. Und dann können wir es hierher stellen. Wir können es hier stellen, sind nicht auf der rechten Seite, sondern auf der seltenen Seite. Jetzt haben wir das und wir haben das. Ich drücke Command G und jetzt kann ich ein Duplikat dieses Elements erstellen. Ich denke im Großen und Ganzen. Dann wird dieser mittel sein. Dieser wird klein sein, und dieser wird extra groß und extra groß sein. Diese Texte, ich denke, ich muss sie anpassen. Und ich habe dieses Ding hier. Aber es ist nicht in der gleichen Größe, also müssen wir diesen hier anpassen. Okay, jetzt sieht es genauso aus. Und obwohl wir es auch auf diese Weise überprüfen können, können wir diese ganze Gruppe auswählen. Und dann können wir unsere Ordnung überprüfen. Es gibt also ein völlig ausgeschaltetes. Also haben wir dieses Ding hier. Und los geht's. Wir haben dieses Ding, von dem ich denke, dass es immer noch nicht im Mittelpunkt steht. Also möchte ich sicherstellen , dass es im Mittelpunkt steht. Ja, es sieht in der Mitte aus. Aber lasst es uns nochmal überprüfen. Gerade jetzt. Es ist im Zentrum. Und richtig, also ich, jetzt müssen wir hier einen Button hinzufügen. Und dieser Knopf wird ein Knopf und drei Farben haben. Also möchte ich hier ein Ellipsen-Tool hinzufügen. Also Ellipsen-Werkzeug. Und dann möchte ich hier 45 hinzufügen. Das sind unsere 45 Lifte. Und hier möchte ich T-Artikel hinzufügen. Und jetzt kann ich diese Nummer und diese und auch diese wählen . Wir haben T-Symbol. Und jetzt müssen wir noch einen Button hinzufügen. Dafür. Wir müssen hier ein Rechteck zeichnen. Und dann können wir diese 25. Zelle hinzufügen. Und los geht's. Wir müssen unsere Farbe angespannt werden. Und ich füge ein Plugin hinzu. Also müssen wir unser Warenkorb-Symbol auswählen. Das ist also unser Warenkorb-Symbol. Ich lege es hier hin. Und was ich haben möchte, also muss ich es zuerst in die Schachtel legen, in den Rahmen und dann die Farbe in Weiß ändern. Und dann muss ich Text bearbeiten. Also sage ich, ich sage „In den Einkaufswagen“. Für x gleich haben wir In den Warenkorb legen. In Ordnung, also haben wir jetzt unser Button-Design. Aber für die Schriftgröße denke ich, für die Schriftarten kann ich sie auf 14 ändern. Und haben wir das? Wir können es diesem Icon etwas näher bringen. Also haben wir unseren Button, wir haben unser Design. Aber hier möchte ich ein Icon haben, das diese Ikone sein wird, die unser Kleidersymbol ist. Also stelle ich es hier hin. Also ändere ich die Breite und Höhe auf 35 mal 35. Und zieh es her. Und mal sehen, wie es aussieht. Es befindet sich jetzt außerhalb des Rahmens, also ziehen Sie es in den Rahmen, dann können wir es nur sehen. Jetzt haben wir unsere Ikone, wir haben unser Design und wir können anrufen. Alles klar, also haben wir endlich dieses Ende, dieses. Im nächsten Teil werden wir versuchen, diese Modellbox mit unserem Mainframe zu verbinden, wo wir unseren Artikel haben, wo wir unseren Artikel haben. Wenn der Benutzer auf diesen Artikel klickt, öffnen wir dieses Modellfeld. Also werde ich dieses Video hier beenden und wir werden mit der nächsten Vorlesung fortfahren. Wir sehen uns in der nächsten Vorlesung. 16. Prototype zur Darstellung von Modal: Willkommen wieder einmal zurück. In diesem Teil fügen wir unsere Modellbox, unsere Artikelmodellbox mit unserer Karte hinzu. So schnell, lass mich das nach Hause führen. Was wir bei uns zu Hause sehen können. Das ist also unsere Modellbox , die wir verbinden müssen. Okay, also sagen wir mal, wenn der Benutzer auf diesen Artikel klickt, möchten wir diese Modellbox anzeigen , bei der unser Artikelmodell funktioniert. Jetzt ist dies unsere Haupt-Homepage und das ist unser Hauptdesign. Und am Wochenende horizontal Skoll können wir besonders so scrollen. Und dann haben wir unser Paginierungsdesign. Wir haben unsere Rubrik, wir haben unsere Paginierung. Wir haben unsere Fußzeile. Jetzt will ich es also und ich klicke darauf. Diese Karte möchte ich unsere Modellbox zeigen , die wir gerade hier entwerfen. Okay, jetzt klicke ich hier auf diesen Prototyp-Modus und wähle dann diesen Frame aus. Nur dieser Rahmen. Wenn Sie diesen Rahmen auswählen, können Sie sehen, dass dieser Rahmen, okay? Jetzt muss ich diese Interaktion hinzufügen. Klicken Sie also darauf, klicken Sie und wir müssen eine schnelle Option haben. Und dann müssen wir hier, anstatt zu navigieren, Öffnen auswählen. Offen bedeutet die Modellbox, die wir zeigen werden, wo wir zeigen möchten. Wir möchten zeigen, mit was wir Ihnen zeigen möchten und unsere Artikelmodelle zeigen. Jetzt sehen Sie hier ein paar Optionen. Dieser ist also bereits verbunden. Okay? Wenn ich jetzt herkomme, wenn ich hier klicke, sehe ich in dieser Modellbox. Okay? Aber wir müssen immer noch ein paar Optionen hinzufügen und diese funktioniert auch. Hier haben wir also zwei Möglichkeiten. Man ist nah, wenn man nach draußen klickt, bedeutet das, dass wir, wenn ich außerhalb des modalen Feldes klicke, unsere schrecklich nicht schließen möchten. Derzeit funktioniert es nicht. Also wählen wir dieses aus. Und mal sehen, jetzt wird es entfernt, wenn ich jetzt auf RC klicke, sieht es eigentlich nicht Overlay aus. Ich bin in den Modellbüchern, denn wenn wir Modalbox öffnen, die wir normalerweise eine Art Schatten sehen, würde der Hintergrund ein bisschen Unschärfe bekommen, so weiter, dass sie diese Option haben, einen hinzuzufügen Hintergrund hinter Overlay. Wählen Sie dieses aus. Was können wir jetzt sehen? Jetzt können wir das jetzt sehen. Es sieht echt nett aus. Es sieht so aus, als ob das Originalmodell jetzt funktioniert, Dinge, die wir normalerweise sehen. Und jetzt ist hier eine Option. Wie viel Farbe du willst, wie wenn du 100% hinzufügst, dann gibt es dir den ganzen schwarzen Hintergrund. Wenn wir sie hinzufügen, dann bekommst du diese Art von Boden, gib ihm eine Party. Und jetzt wie möchten Sie Ihre Option zeigen. Ich meine, wie Sie Ihr Modell hinzufügen möchten, funktioniert. Also haben wir jetzt diese Art von Hintergrund. Wenn ich jetzt klicke, wird unsere Website entfernt. Jetzt können wir sehen, dass unser Modell von der linken Seite kommt, aber wir können auch von rechts und links auswählen. Wenn ich jetzt darauf klicke, wird es von der linken Seite kommen. Wir können auch aus TAF wählen. Jetzt wird es also von oben kommen. Also werde ich dieses n behalten. Jetzt müssen wir wieder an diesem Icon arbeiten. Wenn ich jetzt darauf klicke, sollte es weitergehen, aber es funktioniert jetzt nicht, also weiter. Was ich tun muss, muss ich zu diesem Frame gehen, der dieser Rahmen ist. Und hier muss ich dieses auswählen. Und jetzt muss ich die Interaktion hier hinzufügen. Also was ich hier sagen möchte, wenn onClick, was ich will, möchte ich schließen Overlay sagen. Okay, jetzt verbinde ich es einfach hier. Wenn ich jetzt darauf klicke, wird es geschlossen, öffne diese und schließe dann. Also kann ich die Dimension auch hier hinzufügen. Schließen Sie das Overlay. Overlay wird direkt zurückgehen. Es wird also automatisch vom Officer aus dem Abseits zurückrufen . Und ich denke, ich muss dieses Design ein wenig anpassen. Gehen wir also zurück zum Design. Es tut mir leid. Ich brauche, du wolltest es hier in dieser Größe legen. Das ist unser Sinus. Und mach das. Und wir können es einfach nennen, wir können auf unsere Seite klicken. Es geht weiter, Entfernen und dann darauf klicken. Okay, perfekt. Wir haben also unser gesamtes Design und im nächsten Teil werden wir dieses Prototyping für Anmelde- und Anmeldezahlungen hinzufügen für Anmelde- und Anmeldezahlungen . Wir sehen uns in der nächsten Vorlesung. 17. Prototyp für die Anmeldung und die Anmeldeseite: Willkommen wieder einmal zurück. In diesem Teil werden wir versuchen, Prototyping für unsere Anmelde- und Anmeldebasis hinzuzufügen. Okay, also schnell zur Prototyp-Option wechseln. Und jetzt müssen wir von hier aus auf die Schaltfläche „Registrieren“ klicken, auf die Schaltfläche „Registrieren und dann Indirection hinzufügen. Und hier klick. Und anstatt zu navigieren, um auf Overlay öffnen zu klicken , weil wir unser zeigen möchten, was möchten wir im Overlay auftauchen? Wir wollen die Anmeldebasis zeigen. Wählen Sie hier also all diese Option und auch diese aus. Anstatt also sofort, den ich haben möchte, möchte ich sagen, einziehen und dann hinzufügen, von hart zu wechseln. Und dann können Sie auswählen, Sie können den Handle auswählen. Okay, also lass es mich jetzt versuchen. Wenn ich also auf „Abmelden“ klicke, haben wir dieses schöne Design. Wir müssen also den Hintergrund zu 40% hinzufügen , da wir einen weißen Hintergrund haben. Jetzt sieht es so aus, als hätten wir dieses Problem, vielleicht 50 Prozent. Jetzt sieht es gut aus. Wenn der Benutzer also auf die Anmeldeseite klickt, möchten wir ihn an die Homepage senden. Okay, also jetzt zuerst bei einem Bild, zuerst beim Anmelde-Prototyp. Klicken Sie also auf die Anmeldung. Klicken Sie also auf die Anmeldung und fügen Sie dann Interaktionen hinzu, klicken Sie darauf. Und hier müssen Sie erneut auf Overlay öffnen klicken. Und aus diesem offenen Overlay müssen wir diesmal unsere Anmeldeseite auswählen. Klicken Sie auf diesen Artikel und wählen Sie den Farbkontrast zu 50 Prozent aus. Und bei Morphing-Animation, was auch immer du willst. Und dann sanft. Jetzt mal sehen. Wenn ich auf die Anmeldung klicke. Wir befinden uns also in der Unterzeichnungsphase, aber es gibt ein Problem. Das habe ich nicht bemerkt. Okay, wir haben also noch ein Hintergrundbild, ein anderes Bild hier. Lassen Sie mich das also schnell lösen. Also haben wir hier unser Anmeldegesicht. Also woher das Ding kommt. Also werde ich das entfernen, und jetzt ist es weg. Unsere Anmeldung ist also erledigt. Wenn der Benutzer nun auf diese, die Anmeldung, klickt , möchten wir ihn der Homepage zeigen. Okay, also gehe ich zurück zum Prototyp. Wenn der Benutzer auf den Anmelde-Button klickt, möchten wir ihn an Home-Base senden. Klicken Sie also auf und navigieren Sie dann dahin , wo wir auf unsere Homepage gehen möchten. Und dann möchte ich statt sofort sagen, ein- und ausziehen. Okay, also lasst es uns versuchen. Okay, also sind wir auf der Homepage, klicken Sie darauf, Anmeldung war auf der Homepage. Und wenn der Benutzer auf die Anmeldeseite klickt, senden wir ihn in die Anmeldephase. Nach der Abmeldung senden wir sie zur Anmeldeseite. Also füge ich Indirection hinzu, klicke darauf und dann kann ich sagen, navigiere dorthin, wo immer du hinkommst. Wir werden sie zum Anmeldetempo schicken. Statt Beispiel sagen wir am Ende Morphium und dann dieses Ding. Melden Sie sich also ab und melden Sie sich dann ab. Okay, also gibt es hier ein Problem. Nun denke ich logisch , dass wir unsere Modellbox haben. Wir können sagen, dass wir, wenn Sie dazu kommen , offen sitzen müssen. Okay. Öffnen Sie also das Overlay zur Anmeldephase. Okay, jetzt gehe ich zurück. Wenn ich jetzt auf die Anmeldung klicke haben wir diese d. Wenn ich nun auf die Anmeldephase klicke, sind wir jetzt auf der Anmeldeseite, und wenn ich auf die Anmeldeseite klicke, befinden wir uns auf unserer Homepage. Und noch eine Sache , die wir hinzufügen müssen, haben Sie hier bereits ein Konto anzumelden. Auch hier geht es an unsere Anmelde-Peers. Klicken Sie also darauf und klicken Sie dann auf Overlay öffnen. Und von hier aus müssen wir hier auf Anmelden klicken und dann 50 versa hinzufügen. Und statt zum Beispiel, fügen Sie hinzu, sich auf etwas Schwieriges zu bewegen. Haben Sie also schon ein Konto, haben Sie sich hier bereits ein Konto anmelden. Also melden Sie sich an und wenn Sie sich anmelden, dann wenn Sie zu Hause basieren und es gibt noch ein anderes in Ordnung, also haben wir hier einen Fehler gemacht, weil ich hier schnell hinzugefügt werde. Lassen Sie sich also kein Konto hier anmelden. Also muss ich hier einen Text hinzufügen , der N ist ein Fehler. Melden Sie sich also hier ab. Wenn Sie kein Konto haben , klicken Sie darauf und dann müssen wir es senden. Wir müssen sie schicken, um sich anzumelden ist Open Overlay. Wir möchten uns anmelden und dann sofort auf die Website einsteigen. Okay, also haben wir das hinzugefügt. Ich werde diesen Prototyp vom Entwerfen von Paaren entfernen. Wenn Sie also auf die Anmeldung klicken, senden wir sie in die RDB-Phase da wir unsere OTP-Spieler haben. Okay, also jetzt, also klick drauf. OnClick Overlay nicht öffnen. Und dieser wird OTP sein und hinzufügen. All diese Dinge. Bewegen Sie sich von der Zehe und es wird 50% sein. Melden Sie sich also von hier aus an, lassen Sie sich hier kein Konto anmelden. Schon. Melden Sie sich hier ein Konto an. Und dann klicke auf die Anmeldung in der Reihenfolge, mit der wir konfrontiert sind, aber wir haben unser Image verloren. Also repariere ich das hier. Also haben wir dieses Bild. Also werde ich, ich werde schnell duplizieren, ich werde dieses EMS von hier aus schnell duplizieren. Und ich ziehe das hier. Alles klar, also haben wir unser Image hier. Und wenn Sie jetzt auf die Überprüfung doppelklicken, senden wir sie zur Homepage und kehren zum Prototyp zurück. Wenn sie auf diese Schaltfläche klicken, fügen wir eine Wegbeschreibung hinzu und es wird unser Onclick sein. Navigieren Sie dorthin, wo wir hingehen möchten, wir möchten nach Hause einfügen. Und es wird ein Beispiel sein. Okay, wenn ich jetzt auf die Überprüfung klicke, sind wir hier. Klicken Sie also jetzt auf die Anmeldung und sie werden unsere OTP-Paare aus der OTP-Paste sein. Wenn ich darauf klicke, gehen wir zu diesem. Wir sind auch in unserer Anmeldebasis. Also muss ich diesen Text reparieren. Schon. Habe ein Konto. Wir befinden uns also auf einer Anmeldeseite. Lassen Sie sich hier kein Konto abmelden und unterschreiben Sie es dann. Melden Sie sich ab und melden Sie sich dann an und überprüfen Sie sie Okay, und wenn ich darauf klicke, können wir unsere Modellbox sehen und dann haben wir auch die Anrufoption für Künstler hinzugefügt. Okay, also haben wir alle Arten von Prototyping hinzugefügt. 18. Design exportieren: Willkommen zu dieser Vorlesung. In diesem Teil lernen wir, unser Design zu exportieren. Bisher haben wir für Frame geschaffen. Eine davon ist Anmeldung, Anmeldung, Home Item Design und Kunst, wenn Sie rahmen. Sagen wir also, ich möchte dieses Haus schnell exportieren. Dazu müssen Sie nur den Frame auswählen , den ich exportieren möchte. Und dann gibt es unten eine Option namens Export. Klicken Sie auf das Plus-Symbol. Hier gibt es eine Reihe von Gegenständen. Wie viele Artikel möchten Sie exportieren? 12 oder drei, was immer du willst. Ich bin schlecht, wie ein X0 bis X. Dann das Format. Ich möchte ein JPEG-Format haben und dieses Ding einbeziehen. Jetzt können Sie einfach die Menge untersuchen, exportieren und Ihr Design exportieren. Abhängig von der Größe und den MAs oder was auch immer Sie hinzugefügt haben, wird es einige Zeit dauern, basierend darauf. Jetzt exportiert es also. Es wird dauern, es wird eine Weile dauern , bis das Papier exportiert wird. Auf diese Weise müssen Sie Ihren Frame auswählen und dann auf die Schaltfläche Exportieren klicken. Dann wird es das tun. Sie können auch das Format auswählen, das Sie für den Export haben möchten . Und dann kannst du auch unser Gesicht und du kannst nicht darauf warten, weniger formen, auf dem Raum sitzen. Also klicke ich auf L1 damit du sehen kannst, dass es heruntergeladen wurde. Wenn ich jetzt darauf klicke, sollten wir unsere Homepage sehen können. Das ist also unsere Homepage , die wir gerade entwerfen. Hier siehst du, dass alles hier ist. Alles ist da. Das ist unser Image. Es sieht echt nett aus. Alles klar, also exportieren wir jetzt unsere Anmeldebasis. Wählen Sie also einfach den Rahmen aus und exportieren Sie dann von hier aus, wählen Sie dann JPEG aus und exportieren Sie dann das Anmeldestück. Dann klicke ich darauf, um es zu überprüfen. Das ist also unsere Anmeldung oder unser Frame, und dann ist dies unsere Anmeldung. Wenn ich also importieren möchte, exportiere unsere Seite darin , dass ich diese Anmeldung hinzufüge und dann darauf klicke. Das ist unsere Anmeldung, dann unser OTP. Also klick drauf und ich werde alles erkunden. Und dann haben wir zuletzt unsere Artikelmodelle. Das ist also unser OTP und wir haben unser Artikelmodell hier. Also haben wir unseren Export. Und so können wir sehen. Dies ist unser Artikelmodelldesign. In Ordnung? Und von hier aus kannst du auch teilen. Wir müssen also nur auf Share klicken. Und Sie können auswählen, anzeigen oder bearbeiten können, können sie einfach das Chaos sehen. Und dann kannst du einfach die E-Mail-Adresse deines Teammitglieds angeben und dann eine Einladung senden. Oder du kopierst einfach den Link und teile ihn dann. Okay? Das wird auch funktionieren. So kopieren Sie den Link und dann können Sie ihn zum Beispiel einfach hier teilen. Und lass es mich in einem anderen Fenster öffnen. Jetzt füge ich es ein. Und wir sollten unser Design hier nicht sehen können . Also wird es zwei laden wird ein paar Minuten dauern. Und deshalb möchte ich hier und hier ein paar Dinge sagen. Sie können auch eingebetteten Code erhalten. Du kannst hinzufügen. Sie können, wenn Sie möchten, auch in der Community veröffentlichen. Sie haben hier so viele Möglichkeiten. Hier geht's los. Das ist also unser Design. Jetzt fragt es nach dem Login, aber um diesen zu sehen, müssen wir uns nicht anmelden. Wir können hier auf unser Design zugreifen. Und je nachdem, wie viele Dateien Sie haben, braucht es Zeit, das Laden zu laden. Wir können unseren gesamten Rahmen jetzt hier sehen, aber es wird noch einige Zeit dauern, um unsere MS zu laden , und weil wir viele Bilder haben, ist dies jetzt unsere Homepage. So können Sie dieses Ding also mit Ihren Teammitgliedern teilen. Ich sehe, dass du das nur vermisst. Sag es jedem, das sehen kann. Aber wenn Sie Anmeldezugriff haben und dann werden Sie es sein, können Sie andere, andere Funktionen sehen. Alles klar, also höre ich dieses Video genau hier auf.