Entwerfen einer interaktiven Telefonanwendungsoberfläche in Figma

1. Einführung: Denken Sie an eine bevorzugte mobile App. Wie einfach ist sie zu benutzen? Was macht es einfach zu benutzen? Was macht sie zu deiner Lieblings-App? Wie wurde sie hergestellt? Haben Sie jemals darüber nachgedacht , wie das Unternehmen, das dahinter steht , es entworfen hat? Bevor jemals eine Codezeile für diese mobile App geschrieben wurde, hat sich jemand hingesetzt und jeden einzelnen Teil davon entworfen, jeden Bildschirm, jede Schaltfläche, jedes Bild. Jemand hat das entworfen. Und in diesem Kurs werde ich dir genau zeigen, wie das geht, und wir werden es Schritt für Schritt machen. Ich zeige Ihnen, wie Sie in Figma Ihre eigene schöne und interaktive Einkaufs-App für mehrere Anbieter entwerfen Ihre eigene schöne und Figma Ihre eigene schöne und interaktive Einkaufs-App für mehrere Anbieter Figma ist eine der besten, wenn nicht sogar die besten UIUX-Designplattformen auf dem heutigen Markt Dieser Kurs soll Anfängern leicht fallen. Auch wenn Sie mit dem Design von Benutzeroberflächen noch nicht vertraut sind, richtet sich dieser Kurs an alle, auch an Anfänger. Am Ende dieses Kurses verfügen Sie über eine vollständig gestaltete Benutzeroberfläche für mobile Apps, die eine elegante Startleiste, eine reibungslose Navigation mit den unteren Tabs verfügen Sie über eine vollständig gestaltete Benutzeroberfläche für mobile Apps , übersichtliche Authentifizierungsbildschirme, einen schönen Startbildschirm, einen Einzelverkäuferbildschirm, einen Chat-Bildschirm und andere coole Teile einer leistungsstarken Alltags-App umfasst , übersichtliche Authentifizierungsbildschirme, einen schönen Startbildschirm, einen Einzelverkäuferbildschirm, einen Chat-Bildschirm und . Wir werden das Design der einzelnen Bildschirme Schritt für Schritt durcharbeiten , beginnend mit den Grundlagen der Benutzeroberfläche wie der Startleiste und der Tableiste Dann entwickeln wir Funktionen aus der realen Welt, darunter die Seite oder der Bildschirm „Ausgewählte Verkäufer“, Produktkategorien, einen einzelnen Verkäuferbildschirm, einen Echtzeit-Chat-Bildschirm und vieles mehr Außerdem erfahren Sie, wie Sie Ihre Designs mithilfe der visuellen Hierarchie, der Abstände und der Farbauswahl verfeinern und aufwerten können. Sobald das Layout fertig ist, werden wir alles aufräumen und Interaktivität hinzufügen , um das Projekt zum Leben zu erwecken Dieser Kurs ist perfekt für Figma-Anfänger oder fortgeschrittene Figma-Benutzer, die ihre Fähigkeiten verbessern möchten, indem sie an einem realen Projekt arbeiten einem realen Projekt , das sie ihrem Portfolio hinzufügen können Es ist praktisch, praktisch und steckt voller Tipps und Tricks, die Sie sofort in Ihren Arbeitsablauf anwenden können Ihren Arbeitsablauf anwenden Wenn Sie also bereit sind, Ihre Figma-Fähigkeiten zu verbessern, indem Sie an einer Benutzeroberfläche für mobile Apps arbeiten , die professionell aussieht und sich auch so anfühlt, ist dieser Kurs genau das Richtige für Sie Schauen wir uns in der nächsten Lektion die Demo der App an, die Sie erstellen werden Wir sehen uns also in Kürze. 2. Projekt-Demo: Also hier sind wir in Figma, und das ist ein Präsentationsfenster für Figma Also möchte ich Ihnen eine Demo des Projekts zeigen , das Sie in diesem Kurs erstellen werden Wenn also jemand die mobile App zum ersten Mal lädt, wird er das auf seinem Handy sehen. Sobald der Ladevorgang abgeschlossen ist, wird der Benutzer zum Authentifizierungsbildschirm weitergeleitet, auf dem er sich oder anmelden kann Nun, das ist der Anmeldebildschirm, und wenn sie bereits ein Konto haben, können sie sich anmelden, anstatt sich zu registrieren Wenn ich also auf Anmelden klicke, geben sie einfach ihren Benutzernamen, ihre E-Mail-Adresse und ihr Passwort ein und melden sich dann an. Falls sie sich aus irgendeinem Grund auf diesem Bildschirm befinden und kein Konto haben, können sie zum Anmeldebildschirm zurückkehren. Nachdem das geklärt ist, können wir annehmen, dass sie die Authentifizierung abgeschlossen haben, und jetzt ist es an der Zeit, in die mobile App zu wechseln sie die Authentifizierung abgeschlossen haben, und jetzt ist es an der Zeit, in die mobile App zu Wenn ich also auf dieses Logo klicke, werden wir hier zum Startbildschirm weitergeleitet, und wie Sie sehen können, haben wir eine schöne Suchleiste Wir haben die Benutzerdaten für die Anmeldung. Wir haben hier ein paar nette Symbole und Benachrichtigungen. Wir haben die Statusleiste. Wir werden sehen, wie man das schafft. Wir haben einen Bereich mit ausgewählten Verkäufern. Wir haben einen Bereich mit beliebten Produktkategorien. Jedes davon ist anklickbar, und wir haben einen Bereich mit anderen Produktkategorien Wenn sie nun alle empfohlenen Verkäufer und nicht nur diese drei sehen möchten , können sie auf Alle anzeigen klicken werden dann zum Bildschirm „ Ausgewählte Verkäufer“ weitergeleitet, sie nach oben scrollen können, um die übrigen Verkäufer anzusehen Nehmen wir nun an, wir sind daran interessiert , mehr über Police Kicks zu erfahren Wir wollen den Laden besuchen. Wir können das einfach anklicken. Wir werden zum Shop weitergeleitet und können mehr über Police Kicks lesen , die Details dazu, wir können hier klicken, um ihre Produkte anzusehen, oder wir können auf diese Chat-Schaltfläche klicken, um mit ihnen zu chatten Wenn ich also Chat sage, können wir zu dem Chat-Bereich gehen in dem wir mit Police Kicks Shop gechattet Wir können immer einfach hin und her gehen. Nun, das sollte die Telefon-App auf ihrem Handy öffnen , wenn sie anrufen möchten. Wenn wir also hier sind, können wir einfach immer auf das Home-Symbol klicken, um zum Startbildschirm zurückzukehren und direkt dort zu beginnen. wir fertig sind, werden Sie am Ende eine interaktive mobile Benutzeroberfläche wie diese haben. Und das können Sie mit Ihrem Team oder potenziellen Kunden teilen , um ihnen zu zeigen , was Sie für sie entworfen haben. Es ist auch ein zusätzlicher Vorteil für Sie, nur für den Fall, dass Sie eine echte mobile App erstellen möchten. Sie können Ihr Design mit den Leuten teilen , die die mobile App entwickeln werden. Das heißt, wenn sie ein Angebot für die Erstellung dieser App mit dir teilen , sollten sie das UIUX-Design nicht enthalten , da du es selbst gemacht hast Sie können Angebote für die Codierung und Programmierung machen, aber Sie haben den Designteil selbst erledigt Das ist also ein zusätzlicher Vorteil. Sie können nicht die Kosten tragen, wenn Sie jemanden für die Gestaltung Ihrer UIUX bezahlen Daher denke ich, dass dies eine gute Einführung in das Design der mobilen Benutzeroberfläche von FIGMA Wenn Sie also bereit und begeistert sind , damit anzufangen, freue ich mich sehr, Ihnen zu zeigen, wie das geht also, ohne weitere Zeit zu verschwenden, Lassen Sie uns also, ohne weitere Zeit zu verschwenden, weitermachen und loslegen Wir sehen uns in der nächsten Lektion. 3. Statusleiste: Jetzt sind wir hier in unserem Simulator und wollen damit beginnen, unsere Statusleiste zu erstellen. Dies wird als Statusleiste bezeichnet. Und ich kann hier schnell wieder zu meinem Editor wechseln. Hier habe ich die Beispiel-Referenz-App erstellt wir uns beziehen werden. Aber ich kann hier hin und zurück zu den Dateien gehen. Das bringt mich direkt zu dem aktuellen Team , das meine Projekte für dieses spezielle Team bearbeitet. Ich kann aber auch hierher kommen, und das Team heißt Kyoko Ich kann also herkommen und sagen: Neues schaffen. Und ich hatte bereits ein neues Team namens New Skillshare CLASS gegründet ein neues Team namens New Skillshare CLASS Also werde ich auf New Skillshare Class klicken. Oder lassen Sie mich einfach ein brandneues Team zusammenstellen. Also mobiles Shop-Team, und ich werde TIM erstellen. Und falls Sie Figma zum ersten Mal verwenden , werden wir uns das ansehen Falls Sie Figma zum ersten Mal verwenden und nicht verstehen, was ein Team ist, was eine Datei ist, was eine Seite ist, sollten Sie sich meinen vorherigen Figma-Kurs ansehen, in dem ich das ausführlich behandelt habe Aber im Moment überspringen wir es einfach, weil wir ein Team zusammenstellen, und ich werde mich für Starter entscheiden, den kostenlosen Tarif Und jetzt sind wir im Mobile-Shop-Team. Innerhalb des Mobile-Shop-Teams haben wir ein Projekt. Wir können nicht mehr als ein Projekt erstellen. Aber innerhalb eines Projekts können wir mehrere Projektdateien erstellen. Damit ich das umbenennen kann, geben wir ihm einen anderen Namen. Mobile App. Sagen wir Mobile App, Enter, und jetzt heißt es Mobile AppUI Wenn ich darauf doppelklicke, haben wir keine Dateien Also werde ich eine neue Designdatei erstellen, also sage ich einfach Design. Und jetzt sind wir hier in unserem Figma-Editor. Wir haben eine Designdatei, die noch keinen Namen hat. Wir können ihr einen Namen geben: mobile Benutzeroberfläche, und los geht's. Also werde ich einen Rahmen erstellen. Wenn Sie darauf klicken, haben wir verschiedene Vorlagen, die wir verwenden können. Ich werde einfach das iPhone 16 Pro max benutzen. Da haben wir's. Und ich möchte ihm eine Hintergrundfarbe geben. Also, solange es noch ausgewählt ist, werde ich das auswählen und ich möchte ihm eine dunkle Farbe geben, vielleicht bis zu diesem Punkt. Wir wollen ihm einfach so ein dunkles Thema geben. Als Nächstes, wenn du dir das ansiehst, haben wir die Zeit. Wir haben hier ein paar Icons. Also wähle ich das Textwerkzeug aus und tippe 12 Uhr. Ich werde das dort ablegen. Und jetzt werden Sie feststellen, dass wir mehrere Symbole haben, wenn ich hier wechsle . Jetzt hatte ich bereits mehrere Bilder heruntergeladen, die wir verwenden werden. Lassen Sie mich das einfach erweitern. All das sind Icons, die ich von Flat Icon heruntergeladen habe. Und ich werde diesen Ordner direkt unter diesem Videoplayer teilen . Sie können all diese Symbole herunterladen, damit Sie ihnen folgen können. Im Moment arbeiten wir also am Sara Spar, also haben wir die Starter-Spar-Symbole Ich werde das öffnen. Okay. Und ich werde sie einfach per Drag-and-Drop da reinziehen , einfach so einfach ist das. Lassen Sie mich das jetzt einfach dort ablegen. Die Batterie kommt irgendwo hin und das WLAN kommt dorthin. Zum Herumziehen halte ich das Mausrad gedrückt. Um die Ansicht zu vergrößern und zu verkleinern, halte ich die Strg-Taste gedrückt und scrolle mit dem Mausrad Ich möchte also diese Taste gedrückt halten , um mehrere auszuwählen Während ich die Umschalttaste gedrückt halte, werde ich die Größe bis zu dieser Stelle reduzieren. Und lassen Sie uns das bis zu diesem Punkt ziehen. Ich werde dieses VPN genau dort platzieren, weil ich davon ausgehe , dass der Benutzer gerade ein VPN auf seinem Telefon aktiv hat . Ich denke, diese beiden sind größer als wir wollen, also werde ich sie einfach so verkleinern Wählen Sie alle aus. Drücken Sie G, um sie zu gruppieren. Als wir sie nun gruppierten, erhielten sie den Namen Gruppe eins. Ich nenne sie Start aspaEnter jetzt hat jeder von ihnen den Namen, den er hatte, als wir ihn importiert haben, außer der Uhrzeit, also können wir das einfach die Uhrzeit nennen oder das einfach so lassen Jetzt haben wir also die Statusleiste. Wir sind bereit, mit dem nächsten Teil fortzufahren , der unteren Navigationsleiste. also in der nächsten Lektion an, Schauen wir uns also in der nächsten Lektion an, wie Sie diese Tab-Leiste erstellen. Sie wird als Tab-Leiste oder als untere Tab-Leiste bezeichnet. 4. Registerkartenleiste: Jetzt ist es an der Zeit, die Tab-Leiste oder die untere Navigationsleiste zu erstellen . Also zurück zu unserer Datei. Also, bevor wir weitermachen, denken Sie daran, wir hatten das. Lass mich einfach rauszoomen. Das ist der Willkommensbildschirm. Daran arbeiten wir derzeit, und wir werden an dem Rest arbeiten. ich also zurück zu unserem Kunstwerk gehe, nenne ich das den Willkommensbildschirm. Und innerhalb des Willkommensbildschirms haben wir die Startleiste, die wir hier oben erstellt haben. Ich kann es verstecken und wieder einblenden. Also halte ich die Strg-Taste gedrückt und zoome mit dem Mausrad hinein und lasse mich diese Form erstellen Lass mich dort einfach irgendwo zeichnen. Passen Sie die Größe entsprechend an. Lassen Sie mich die Steuerung gedrückt halten und mit einem Mausrad herauszoomen , um die relative Größe zu sehen. Da haben wir's. Und jetzt, wenn ich das auswähle, gebe ich ihm im Vergleich zum Hintergrund eine relativ hellere Farbe . Lass mich das einfach vorantreiben. Ja, irgendwo da. ich mache es nur im Freestyle, aber du musst deine Markenfarben verwenden Behalte das also im Hinterkopf. Jetzt haben wir dieses Rechteck, und wie Sie sehen können, wird es Rechteck genannt. Ich kann es die Registerkarte nennen, aber Hintergrund. Und jetzt gehe ich zurück zu unserem Ordner. Und in dem Ordner hier, dem Assets-Ordner, haben wir Tableistensymbole. Ich werde sie alle auswählen und sie hier ablegen. Wenn ich sie ablege, befinden sie sich nicht auf unserem Willkommensbildschirm, sodass ich sie per Drag-and-Drop in den Willkommensbildschirm ziehen kann. Ich kann dasselbe auch für den Tab-Hintergrund tun. Das. Jetzt haben wir die Vorspeisenbar. Lass mich das einfach verstecken Nun, sie sind nicht sichtbar, weil wir sie, nachdem wir sie in den Begrüßungsbildschirm gelegt haben, sie sich außerhalb dieses Rahmens befinden, wir sie nicht sehen können. Wenn ich also alle auswähle, indem ich das auswähle, dann die Umschalttaste gedrückt halte und so, kann ich sie dann die Umschalttaste gedrückt halte und so, ziehen und sie innerhalb des Startbildschirms, dem Begrüßungsbildschirmrahmen, sichtbar machen . Jetzt möchte ich sie auch verkleinern und dabei die Umschalttaste gedrückt halten, um sicherzustellen, dass wir ihre Größe proportional Tatsächlich werde ich all diese auswählen und dann Strg G drücken, all diese auswählen und dann Strg G zu gruppieren und sie die Tab-Leiste zu nennen Jetzt haben wir in der Tab-Leiste die Symbole. Ich wähle das bis zu den Tabulator-Symbolen von Control G. In der Tab-Leiste haben wir den Hintergrund der Tab-Leiste. Lass es mich einfach unten platzieren. Hintergrund der Tab-Leiste und die Tab-Leisten-Symbole als Gruppe. Wenn ich die Gruppe erweitere, haben wir sie alle. Jetzt wähle ich einfach das Home-Symbol aus und platziere es dann so in die Mitte. Wählen Sie die Brieftasche aus und legen Sie sie hier ab. Einstellungen-Symbol. Das Burger-Menü. Und schließlich das Messenger- oder Chat-Symbol. Wie Sie sehen können, hat Figma einige nette Textmarker, die Ihnen zeigen, wenn Sie sich in einer geraden Linie bewegen Wenn ich das Home-Symbol auswähle und dann ziehe, wie du sehen kannst, hilft mir das zu erkennen, dass ich mich in einer geraden Linie bewege Wenn Sie jetzt versuchen, dies auszuwählen, wählen Sie die gesamte Gruppe aus. Wenn Sie eines dieser einzelnen Elemente auswählen möchten, können Sie die Strg-Taste gedrückt halten und dann auswählen. Dann können Sie es ziehen. Halten Sie die Strg-Taste gedrückt, wählen Sie es aus, ziehen Sie es und halten Sie die Strg-Taste gedrückt. Halten Sie die Taste gedrückt. Ich kann es mit meinen Pfeiltasten bewegen. Und ich denke, wir sind sehr gut aufgestellt. Lassen Sie mich nun die Gruppe der Tableistensymbole auswählen und sie mit der Aufwärtstaste auf der Tastatur nach oben drücken . Ich will es irgendwo da oben haben. Halten Sie die Taste gedrückt und zoomen Sie heraus. Und jetzt haben wir eine schöne Tab-Leiste. Lassen Sie mich die Sternenleiste einblenden und los geht's. Um das Ganze abzurunden, denke ich, können wir einfach weitermachen und das Logo und dieses Ladesymbol hinzufügen Wenn wir also zu unserem Ordner, dem Assets-Ordner und anderen Symbolen zurückkehren , denke ich, dort waren wir. Ich glaube nicht, dass ich dieses Ladesymbol habe, also kann ich es einfach von hier herunterladen, aber ich werde es für Sie hinzufügen. Sie finden es im Ordner. Wenn ich wieder reingehe, wähle ich den Export als PNG aus. Ordnung. Export wird geladen. Jetzt werden wir hier danach suchen. Da haben wir's. Schneid das ab. Ich füge es in die anderen Symbole ein und füge es dort ein. jetzt wieder hier reingehe, kann ich das per Drag & Drop dort hineinziehen und es auf dem Willkommensbildschirm platzieren, wie Sie sehen können, wenn es geladen wird. wieder reingehe, kann ich das Logo nehmen und es auch hier ablegen. Und da haben wir's. Wir sind fertig mit dem Willkommensbildschirm. Ich denke, wir machen hier Fortschritte. In der nächsten Lektion erstellen wir den Anmeldebildschirm. Der Anmeldebildschirm. Wir sehen uns in Kürze. 5. Anmeldebildschirm: A, willkommen zurück. ist es an der Zeit, den Anmeldebildschirm zu erstellen. Schauen wir uns hier kurz unseren Anmeldebildschirm an . Das haben wir. Lassen Sie uns also weitermachen und zurück zu unserem Teambereich wechseln. Lassen Sie mich nun einfach alles zusammenfassen, was wir in dieser Gruppe haben. Das ist der Willkommensbildschirm. Um einen neuen Bildschirm zu erstellen, kann ich hier von vorne beginnen und muss alle Farben und alles erstellen, oder ich kann das auswählen. Oder lassen Sie mich einfach so etwas aus dem Ebenenmenü auswählen und dann die Alt-Taste gedrückt halten und bei gedrückter Umschalttaste ziehen , um mich in einer geraden Linie zu bewegen. Also raus und dann umschalten. Einfach so. Jetzt haben wir also zwei Bildschirme. Das ist der zweite. Lass mich es einfach ziehen und direkt darunter platzieren. Ich möchte, dass sie sich nach unten bewegen so wie wir uns nach links und rechts bewegen. Also nenne ich das den Anmeldebildschirm. Wenn ich es erweitere, hat es alles, was dieses andere hat, aber ich möchte die Tab-Leiste loswerden , weil der Anmeldebildschirm das nicht hat. Ich lasse das Logo stehen, lösche aber den Ladevorgang. Schieb das nach oben. Steuerung und Musewel zum Scrollen und Vergrößern. Und jetzt erstellen wir unser Anmeldeformular, erstellen ein Konto, um loszulegen, kopieren wir das Du wirst tippen müssen. Also wähle ich Text aus und füge ihn dort ein. Ich wähle das aus und lege es dort in der Mitte ab. Ich wähle das aus und verkleinere es, indem ich die Umschalttaste gedrückt halte. Dann ziehe ich es so in die Mitte. Als Nächstes verwenden wir natürlich ein Rechteckwerkzeug, um die Formularfelder zu erstellen. Lassen Sie mich einfach bis zu dieser Stelle zeichnen. Jetzt kann ich das auswählen und ziehen, um sicherzugehen, dass es in der Mitte ist. Wählen Sie es dann aus und vergrößern Sie es. Wir können den Eckenradius bearbeiten, hier zum Erscheinungsbild und dann zum Eckenradius Geben wir zehn. Ja, zehn ist gut. Ich werde hier den Textwerkzeugtyp auswählen . Benutze einen Namen. Drücken wir es an, positionieren wir es richtig. Dann wähle ich eine helle Farbe für den Text aus, solange er noch ausgewählt ist. Benutze einfach so einen Namen. Wählen Sie nun dies und das aus und gruppieren Sie sie. Denken Sie daran, dass wir hier von innen arbeiten , weil wir in diesem Bildschirm gezeichnet haben Der Text und das Feld wurden automatisch auf dem Bildschirm platziert. Und jetzt haben wir sie gruppiert. Ich nenne das Warmes Feld. Ich nenne es einfach Username. In Ordnung. Also wähle ich die Gruppe aus, halte die Alt-Taste gedrückt und ziehe, halte die Umschalttaste gedrückt, um mich in einer geraden Linie zu bewegen. Und jetzt geben wir ihr diesen Abstand. Lass es dort fallen. Drücken Sie dann die Taste D, um den gleichen Zug zu wiederholen, den Sie zuletzt ausgeführt haben. Mit Control D wiederholen Sie, was Sie gerade getan haben. Senden Sie jetzt eine E-Mail mit dem Firmennamen und halten Sie die Strg-Taste gedrückt, um es direkt einzugeben E-Mail-Steuerung. Name der Firma. Kontrolle, Passwort, Kontrolle behalten. Geben Sie das Passwort erneut ein. Da haben wir's. Mir gefällt es. Wenn wir hier wieder reingehen, haben wir die Anmeldeschaltfläche und haben bereits ein Konto eingerichtet Ich wähle das aus und verschiebe es, dann etwas mehr Abstand als die anderen, weil das die Schaltfläche ist. Und richtig, wir müssen sie alle umbenennen, aber das ist kein Problem. Ich doppelklicke darauf und sage „Anmelden“. Und ich werde es so in die Mitte stellen. Tatsächlich werde ich den Text so in der Mitte ausrichten . Halten Sie die Strg-Taste gedrückt, um den Hintergrund direkt auszuwählen, und geben wir ihm eine Farbe. Ich werde das Pipettenwerkzeug auswählen und irgendwo hier eine Probe nehmen Sagen wir das. Halten Sie die Taste gedrückt, um dies direkt auszuwählen. Ich wähle das aus und gebe ihm die Hintergrundfarbe. Ich denke, das ist die Hintergrundfarbe, einfach so. Ich sage auch Control B, um es fett zu machen. Jetzt wähle ich diesen Text aus, halte die Maustaste gedrückt und verschiebe die Maustaste, um ihn in einer geraden Linie zu bewegen. Und hier werde ich das kopieren. Denken Sie natürlich daran, dass ich Ihnen gesagt habe , dass Sie diese Paste dort eintippen müssen. Eigentlich möchte ich das zu einem separaten Text machen. Also ziehe ich ohne, um es zu duplizieren, halte die Umschalttaste gedrückt, um mich in einer geraden Linie zu bewegen, und füge das dann dort ein, weil ich möchte, dass es getrennt ist und du wirst später sehen, warum. Wenn ich das und das gedrückt halte, gruppiere ich sie und nenne sie „Have Count“. Ordnung, also wenn wir diese Gruppe auswählen, benennen wir sie in E-Mail um. Ein Feld, wählen Sie diese Firma aus. Ein Feld, Eingabe, Auswahl dieses Passworts, eins , Web-Feld und schließlich Passwort zwei Formularfeld Jetzt wähle ich auch alle aus. Dann drücke G, um sie zu gruppieren, und ich nenne diese Gruppe Fm-Felder. Ich werde die Gruppe und das Han-Konto schließen. Dann ist das die Anmeldeschaltfläche. Treten Sie ein. Haben Sie ein Konto, erstellen Sie ein Konto, Sharp-Logo. Jetzt können wir sie immer einfach neu anordnen , je nachdem, wie sie auf dem Bildschirm angeordnet sind Ein Konto erstellen befindet sich unter dem Logo, dann haben wir die Anmeldeschaltfläche und dann die Formularfelder Verkleinern, Strg gedrückt halten. Da haben wir's. Jetzt kann ich sie alle auswählen und sie mit der Pfeiltaste nach oben auf der Tastatur nach oben drücken. Und ich denke, genau da sind sie sehr gut zentralisiert. Das war's also für den Anmeldebildschirm. in der nächsten Lektion Lassen Sie uns in der nächsten Lektion einfach weitermachen und den Signierbildschirm erstellen, da er eine Nachbildung davon ist. Also werde ich das auswählen. Strg-Taste gedrückt halte , wähle ich den Bildschirm Dann kann ich mit der Maus ziehen und dann die Umschalttaste gedrückt halten, um mich in einer geraden Linie zu bewegen. Und wenn die zweite Messung erscheint, die zeigt, dass der Abstand gleich ist, lasse ich los, sodass wir einen gleichmäßigen Abstand zwischen allen haben . Und natürlich ist das jetzt die Taste, die gedrückt gehalten wird , um den Rahmen auszuwählen. Dies ist der Anmeldebildschirm, Enter. Wenn ich das zusammenfalle und expandiere. Ich werde es sogar nach unten ziehen. Es ist also der dritte. Das werde ich erweitern. Mal sehen, wir brauchen nur den Benutzernamen und das Passwort. Entferne den Doppelklick, entferne das. Halten Sie die Umschalttaste gedrückt, um sich in kleinen Schritten und in einer geraden Linie zu bewegen in kleinen Schritten und in einer geraden Linie Doppelklicken Sie darauf, das zu entfernen. Also können wir diese drei belassen und ich wähle diese beiden aus, indem ich die Umschalttaste gedrückt halte. Halten Sie die Umschalttaste gedrückt, um sie auszuwählen , drücken Sie sie nach oben und los geht's. Im Grunde genommen geht es also darum, die Anmelde - und Signierbildschirme zu erstellen In der nächsten Lektion wollen wir uns ansehen, wie man die Homepage, diese Homepage, erstellt Wir sehen uns in Kürze. 6. Startbildschirm: Mal sehen, wie man die Homepage erstellt. Wir wechseln zurück zu unserem Workspace. Bevor wir weitermachen, denke ich, ich sollte all diese auswählen und sie nach dieser Stelle ein wenig nach unten drücken Ich schaue es mir nur an. Das Ziel hier ist zu verstehen, wie man die Tools benutzt. Sie müssen sich Zeit nehmen, um die Designprinzipien zu verstehen , wenn Sie eine tatsächliche App erstellen möchten. Also werde ich jetzt die Strg-Taste gedrückt halten, um darauf zu doppelklicken, natürlich, um dies zu ändern und mich bei Ihrem Konto anzumelden. Lassen Sie mich es einfach so platzieren, dass es zur Mitte ausgerichtet ist, und lassen Sie mich es dann einfach so drücken. Sie sollten auch ändern, die Steuerung gedrückt zu halten. habe bereits ein Konto, habe noch kein Konto. Sie haben noch kein Konto, melden Sie sich an. Ich werde das einfach so näher heran ziehen. Lassen Sie uns nun weitermachen und den Startbildschirm erstellen. Also werde ich das zusammenbrechen lassen. Halten Sie die Strg-Taste gedrückt, halten Sie dann die Taste gedrückt und ziehen Sie die Maus und richten Sie sie einfach darunter aus. Und du kannst darauf doppelklicken oder darauf doppelklicken, um es in Homescreen umzubenennen Und ich ziehe es und lege es unter den Signierbildschirm Erweitere es so. In der Tat ist es sehr lustig, aber wir hätten das nicht direkt hier auf dem Willkommensbildschirm platzieren sollen, ich weiß übrigens nicht, warum ich es dort platziert habe. Ich denke, das liegt daran, dass ich Ihnen ursprünglich zeigen wollte , wie man diese Tab-Leiste erstellt. Aber dann haben wir es dort hingestellt. Wir sollen es von dort entfernen, also Strg X. Und ich werde das auswählen, indem ich die Strg-Taste gedrückt halte. Dann füge es jetzt genau dort ein. Es wird es an der richtigen Stelle einfügen, genau dort, wo es auf dem anderen Bildschirm war. Jetzt möchte ich all diese loswerden , weil wir sie nicht brauchen. So sollte der Willkommensbildschirm also eigentlich aussehen. Gehen wir also rein und schauen wir uns kurz an, was wir hier haben. Wir haben also diesen Navigationsbereich. Lassen Sie uns also weitermachen und die Suchleiste erstellen. Also wähle ich einfach das rechteckige Werkzeug aus und zeichne unsere Suchleiste, vielleicht in dieser Größe. Geben wir ihm einfach so einen Eckradius von zehn. Wir haben diese drei Symbole, also importieren wir sie. Ich werde zu unserem Ordner wechseln. Lassen Sie mich also einfach all diese in den anderen Symbolen im Ordner „Andere Symbole“ auswählen all diese in den anderen Symbolen im . Lassen Sie mich diese einfach in unseren Arbeitsbereich hier ziehen. Also lege ich sie hier zur Seite. Weil wir sie nicht in einem Bildschirm platziert haben, befinden sie sich hier in den Ebenen auf keinem Bildschirm. Jetzt können wir einfach weitermachen und sie relativ anordnen. Lass mich das einfach da hinstellen. Wir haben den Benutzer. Wir haben die Benachrichtigungen. Lassen Sie uns diese vorerst verwenden und die Umschalttaste gedrückt halten, um ihre Größe in kleinen Schritten Leg die da hin. Halten Sie die Strg-Taste gedrückt, um die Ansicht mit dem Mausrad zu vergrößern. Halten Sie die Umschalttaste gedrückt , um ihre Größe weiter zu ändern. Ziehen Sie das bis zum Ende. Okay, lass mich das einfach zur Seite legen , weil wir es vorerst nicht brauchen. Und denk dran, der Grund, warum wir es hier sehen können , ist, dass es noch nicht Teil dieses Rahmens ist. Denkt daran, wir bringen sie einfach hier raus. Also zoome ich jetzt rein. Ich werde das erweitern Und hier können wir diese Kopie einfach steuern und auswählen und vergrößern. Ich füge das da ein. Produkte suchen. Ich wähle das aus und gruppiere sie, Strg G, und benenne sie in Suchleiste um. Ich kann das nennen. Ich wähle diese drei aus und gruppiere sie vielleicht Control G, und ich nenne sie Context Nerve weil man damit kontextabhängig navigiert. Doppelklicken Sie darauf und drücken Sie es vielleicht nach links. Ich denke, jetzt ist es ausgewogen. Ich kann diesen Text auch nehmen. Halten Sie die Taste gedrückt und ziehen Sie sie hierher, denn wie Sie hier sehen können, haben wir den Namen der Person, die angemeldet ist. Halten Sie also die Strg-Taste gedrückt und doppelklicken Sie darauf. Willkommen Kim, wähle das aus und lösche es. Oh, lass uns das jetzt durch das ersetzen , weil Kim ein Benutzer ist. Einfach so. Als Nächstes erstellen wir die ausgewählten Verkäufer. Also wähle ich das Rechteckwerkzeug aus und zeichne irgendwo hinein. Wir geben ihm einfach so einen Grenzradius von 20. Jetzt können wir einen anderen zeichnen oder wir können diesen auswählen und ziehen. Ich gebe dem vorerst eine andere Farbe, und dann passen wir die Größe an, vielleicht bis zu diesem Punkt Wir können ein Quadrat daraus machen, indem wir ihm vielleicht 121 mal 121 geben. Und jetzt ist es ein Quadrat. Und für den Grenzradius machen wir zehn draus. Lass es uns irgendwo da hinstellen. All diese Tritte Eigentlich sollte das ein Bild sein, aber das ist kein Problem Wenn wir das Blatt gedrückt halten, können wir die Größe ändern. Lass uns den Text auswählen. Police Kicks richten den Text mittig und platzieren wir ihn direkt darunter Und jetzt wechsle ich hier zu unserem Assets-Ordner und gehe zu den Miniaturansichten Sagen wir Kicks. Ich werde das da fallen lassen. Da haben wir's. Und jetzt, wenn ich Shift gedrückt halte, ändere ich die Größe Ich hatte die Bilder so vorbereitet, dass sie quadratisch sind, sodass sie 512 mal 512 Pixel groß sind Ich kann es genau dort platzieren und dann die Umschalttaste gedrückt halten, um die Größe proportional zu ändern, und dann können wir ihm einen Randradius von 20 geben Bevor wir das tun, lassen Sie mich das einfach zur Seite legen und das löschen Das war nur ein Leitfaden. Jetzt können wir das nehmen und ihm einen Grenzradius von 20 geben. Nein, zehn. Und da haben wir's, Polizeieintritte Wir können das so nach oben treiben. nun die Shift-Taste gedrückt halte, kann ich diese beiden auswählen, gedrückt halten und die Umschalttaste gedrückt halten, um mich in einer geraden Linie bis zu dieser Stelle zu bewegen , und dann Strg D drücken, um das zu wiederholen. dann die Umschalttaste gedrückt halte, kann ich sie alle auswählen. Halten Sie die Umschalttaste gedrückt, um die Größe proportional zu ändern. Und jetzt haben wir drei perfekt passende Objekte. Jetzt werde ich das erweitern , um sicherzustellen , dass es richtig zum Bild passt. Wählen Sie das aus und ändern Sie die Größe entsprechend. Und jetzt geben wir diesen beiden verschiedenen Namen, Eagle Motors Füge das ein. Und bei Herrenmode. Verstanden Einfügen. Ich glaube, ich hatte dieser Größe 14 gegeben. Oh, das ist Größe zehn. In Ordnung. Also wenn ich das auswähle, gebe ich ihm Größe zehn. Wählen Sie die Namen aus und drücken Sie sie nach unten. Ordnung. Also jetzt möchte ich der Tab-Leiste dieselbe Farbe geben. Halten Sie also die Taste gedrückt, um herauszuzoomen. Solange dies ausgewählt ist, wähle ich die Farbe aus und färbe dann Pico Two ein. Dann wähle ich das aus Dann lass mich dem die weiße Farbe geben. Einfach so. Dann kann ich darauf doppelklicken und vom Computer hochladen. Wir gehen zu Assets, Thumbnails. Das sollen die Eagle Motors sein. Doppelklicken Sie dann auf diesen Upload vom Computer. Das sind die Schuhe, die Teenager tragen. Wir können auf den Namen Control B doppelklicken, um ihn fett zu machen. Wir können ihm auch eine andere Farbe geben. Diese Farbe haben wir für das Logo ausgewählt. Wenn wir hierher zurückkehren, können wir auch die Schaltfläche „Ausgewählte Verkäufer“ und die Schaltfläche „Ansehen“ erstellen . Jetzt möchte ich das Ganze auswählen und es Control G nennen Ausgewählte Verkäufer, Enter. Und ich werde es mit der Pfeiltaste nach unten drücken. Dann wähle ich das aus und halte die Alt-Taste gedrückt. Und ich sage „Ausgewählte Verkäufer“. Ich denke, lass mich diesen Knopf einfach hierher ziehen. Halten Sie die Taste gedrückt, um den Hintergrund selbst auszuwählen. Und geben wir ihm einen Randradius von 50, damit er abgerundet wird. Ansicht. Mach es kleiner. Ich kann es genau dort platzieren. Halten Sie die Umschalttaste gedrückt, um die Größe zu reduzieren. Halten Sie die Strg-Taste gedrückt, um den Text direkt auszuwählen und die Größe auf vielleicht neun zu reduzieren . Drücken Sie die Taste, um den Hintergrund selbst auszuwählen. Halten Sie die Umschalttaste gedrückt, um die Größe zu reduzieren, und wählen Sie den Text aus. Ich denke, jetzt geht es uns gut. Drücken wir es nach innen. Lassen Sie uns den Text nach innen schieben. Ich denke, das ist ein guter Ort, um das zu beenden. Wir wollen diese Lektion nicht zu lang machen. In der nächsten Lektion sehen wir uns an, wie Sie den Abschnitt mit den beliebtesten Kategorien und vielleicht diesen anderen Abschnitt erstellen Abschnitt mit den beliebtesten Kategorien . Wir sehen uns also in Kürze. 7. Karten für ausgewählte Verkäufer verfeinern: Sei dir bewusst, dass wir in der vorherigen Lektion etwas vergessen haben Wenn wir hier zu unserem Referenzdesign zurückkehren, haben wir, wie Sie sehen können, ein Vorschaubild auf der Innenseite einer Karte Das wird als Karte bezeichnet, der weiße Teil, und Karte befinden sich das Vorschaubild und der Name Aber hier in unserer Implementierung hatten wir nicht für jeden Shop eine Karte Lass uns eine Karte erstellen. Was wir tun wollen, ist, dass ich die Strg-Taste gedrückt halten kann , um den Hintergrund auszuwählen ihn dann zu duplizieren. Dann lass mich ihm einfach eine weiße Hintergrundfarbe geben, einfach so. Schließ das. für den Grenzradius Geben wir für den Grenzradius zehn an. Und jetzt lass mich es einfach ziehen und genau dort platzieren, wo das Bild auf die Bildecken trifft. Und ich möchte das ziehen und auch ihm auch die gleiche Größe geben wie das Bild, kurz gesagt. Wenn ich das jetzt erweitere , haben wir eine Karte. Jetzt kann ich den Text, die Textfarbe, die Augentropfen oder zwei auswählen. Und dann sind wir da. Steuern Sie, um das direkt auszuwählen, dann die Größe , um sicherzustellen, dass wir den gleichen Abstand wie hier oben haben Wir können einfach dies und das und das auswählen und es so positionieren Das Bild sollte viel kleiner sein. Lassen Sie mich das Bild also direkt auswählen. Halte die Shift- und Out-Taste gedrückt, um die Größe von allen Ecken aus zu ändern, während du es auswählst und ziehst Und ich möchte ihm einen Grenzradius von fünf geben. Einfach so. Jetzt können wir das Bild hier und hier auswählen, alle auswählen und löschen. Halten Sie die Taste gedrückt, um das Bild direkt auszuwählen. Halten Sie die Umschalttaste gedrückt , um das auszuwählen , und jetzt haben Sie alle ausgewählt. Halten Sie die Taste gedrückt und drücken Sie die Umschalttaste. Lass es uns vielleicht an diese Stelle verschieben. Dann Control D. Jetzt halte ich gedrückt. Bevor wir das tun, haben wir diese drei ausgewählt, gruppieren wir sie einfach und nennen sie Featured Seller Card. Jetzt haben wir also empfohlene Verkäufer, und innerhalb der Liste der empfohlenen Verkäufer haben wir eine Karte. Dieses Rechteck kann der Hintergrund des ausgewählten Verkäufers sein. Das ist der Hintergrund. Dann haben wir die Karte. Wir können einfach D drücken, um sie zu duplizieren, und dann Remember, we've controlled deed ziehen , um sie zu duplizieren. Und jetzt, wie Sie sehen können, sind beide gut verteilt, gleichmäßig verteilt Wenn diese Option nicht ausgewählt ist, kann ich die Umschalttaste gedrückt halten, um sie auszuwählen , sodass ich sie so in der Mitte positionieren kann sie so in der Mitte , wenn Sie diese roten Markierungen sehen Wenn ich die Strg-Taste gedrückt halte, kann ich diesen Hintergrund auswählen und seine Größe ändern, da er oben unten etwas seltsam aussieht Ich denke, sie sind jetzt gut positioniert. Bei gedrückter Umschalttaste mehrere auswählen. War das da. Steuern, dort doppelklicken, das kopieren, kontrollieren, kontrollieren, das Bild direkt auswählen. Doppelklicken Sie darauf. Klicke nach draußen, Strg, um das direkt auszuwählen. Doppelklicken Sie darauf und laden Sie es vom Computer hoch. Dann glaube ich, wir hatten genau hier diesen Kick. Schließ das. Ich denke, jetzt haben wir die Verbesserung vorgenommen, die wir machen wollten. Wir haben eine Karte, die wir überall wiederverwenden können, wenn wir wollen. nun in der nächsten Lektion sehen, Lassen Sie uns nun in der nächsten Lektion sehen, wie Sie den Abschnitt mit der Kategorie „Beliebte Verkäufer“, diesen Abschnitt, erstellen . Wir sehen uns in Kürze. 8. Beliebte Produktkategorien: Jetzt ist es an der Zeit, den Bereich „Beliebte Produktkategorien“ zu erstellen . Gehen wir zurück zu unserem Startbildschirm. Das haben wir. Natürlich können wir, wie Sie vielleicht schon vermutet haben, einfach diese beiden auswählen, gedrückt halten und dann ziehen, während Sie die Umschalttaste gedrückt halten, um uns in einer geraden Linie zu bewegen Da haben wir's. Ich möchte nur darauf doppelklicken und kopieren. Das musst du eingeben. Steuerung, doppelklicken Sie auf Einfügen. Dann lass uns jetzt weitermachen und die Kleidungskunst kreieren. Also wähle ich einfach das Rechteckwerkzeug. Und zeichne einfach so eine kleine Karte. Und tatsächlich, lass mich ja, es ist ein Quadrat 89 mal 89. Damit können wir vorerst weitermachen. Geben wir ihm einen Radius von 20. Ich hätte Symbole für diese verschiedenen herunterladen sollen. Habe ich sie heruntergeladen? Ich glaube, ich habe es getan. Gehen wir hier rein und schauen uns die Produktkategorien an. Ja, ich habe sie bereits heruntergeladen. Also Kleidung. Also nein, wir sind am falschen Ort. Lass mich einfach die Kleidung dort ablegen. Halten Sie die Umschalttaste gedrückt, um die Größe zu ändern. Ich werde es genau da hinstellen und ich hätte sie schwarz machen sollen Aber kein Problem. Ich werde dir in einer zukünftigen Lektion zeigen , wie das geht. Also lass mich das einfach da hinstellen. Halten Sie die Taste gedrückt und schalten Sie um. Das ist Kleidung. Solange es noch ausgewählt ist, richte ich es an der Mitte und lege es dann einfach so in die Mitte der Karte. diese Option ausgewählt ist, wähle ich zunächst Wenn diese Option ausgewählt ist, wähle ich zunächst die beiden aus und gruppiere sie. Und benenne sie um, damit ich sie einfach als abscheuliche Produktkategorie bezeichnen Und ich möchte, dass wir organisiert sind, also nehme ich mir einen Moment Zeit, um alles zusammenzufassen, was wir noch nicht verwenden Da wir auf dem Startbildschirm arbeiten, erfolgt dies automatisch auf dem Startbildschirm. Wenn ich das jetzt ziehe, kann ich es so verteilen. Sagen wir mal, wie viele haben wir hier? Wir haben vier. Steuere noch einmal D. Bevor ich das getan habe, ist das jetzt die Produktkategorie Bekleidung. Ich möchte auch sagen, nein, das ist keine Gruppe. Also lass mich einfach Shift G drücken, um die Gruppierung aufzuheben. Das ist nur Text, aber weil wir ihn von hier kopiert haben, haben wir ihn dupliziert und wir haben ihn aus dieser und aus einer früheren Gruppe dupliziert aus einer früheren Ich denke, wir haben es aus dieser Gruppe dupliziert. Solange das ausgewählt ist, kann ich einfach Strg+Shift G sagen, und jetzt ist es keine Gruppe mehr, es ist nur noch beliebter Produktkategorietext Also wähle ich diese Kleidung und diese Gruppe gleich hier aus, gruppiere sie und nenne sie Produkt. Karte. Lass es mich einfach Karte nennen. Produktkarte für Kleidung. Und wenn ich es auswähle, wähle ich jetzt alles aus. Ich kann ziehen, während ich die Umschalt-Taste gedrückt halte. Dann drücke D, um zu wiederholen , was ich gerade zweimal gemacht habe. Und wenn ich dann alle auswähle, kann ich die Umschalttaste gedrückt halten, um ihre Größe zu ändern Ich möchte, dass sie sind. Lass mich sie in die Mitte stellen. Einfach so. Halten Sie die Strg-Taste gedrückt, um den Namen auszuwählen. Wir können ihm Größe zehn geben, hier die Strg-Taste gedrückt halten, Größe zehn, Strg und Shift gedrückt halten, um mehrere auszuwählen. Dann Elektronik, Wohnaccessoires, Schuhe. Halten Sie die Taste gedrückt und wählen Sie diese Option direkt aus. Elektronik. Steuern Sie Home Decor. Steuern Sie, doppelklicken Sie auf Schuhe. Jetzt wähle ich die drei, vier davon aus, dupliziere sie ohne und Shift. Und ich finde, das ist ein netter Ort. Wir brauchen nur zwei Reihen, Fitness-Küchenbeutel. Jetzt können Sie das natürlich auswählen, indem Sie die Strg-Taste gedrückt halten . Doppelklicken Sie dann darauf, um es zu ersetzen Elektronik. Ich gehe zur Produktkategorie „Vermögenswerte“, Elektronik. Klicken Sie auf Draußen. Klicken Sie bei gedrückter Ctrl-Taste und dann doppelt. Wie ich schon sagte, ich werde dir zeigen , wo du diese Bilder herbekommst. Mach dir keine Sorgen. Lassen Sie uns das sogar jetzt tun. Ich gehe einfach zu Flat Icon. Flaches Symbol. Was ist das? Drei Symbole. In Ordnung, lassen Sie uns einfach den Freitext entfernen. Und sagen wir Kleidung. Ich glaube, das ist der, den ich ausgewählt habe. Solange dies ausgewählt ist, können Sie wählen, ob Sie dieses oder jenes herunterladen möchten, aber ich bevorzuge das, und dann können Sie das Symbol bearbeiten und ihm die gewünschte Farbe geben. Sobald es geladen ist, können Sie dieses Farbrad auswählen und wählen , ob es eine beliebige Farbe haben soll. Aber jetzt habe ich mich dafür entschieden, es weiß zu machen, aber ich soll es machen. Lass mich ihm einfach diese Hintergrundfarbe geben. Wenn ich das auswähle, möchte ich ihm diese Farbe geben. Doppelklicken Sie also auf die Kopie , weil das die Hintergrundfarbe ist. Ich möchte, dass es dieselbe Farbe wie die Hintergrundfarbe hat. Also füge das da ein, Enter. Und jetzt lade ich es herunter, ich will es auf 64 haben. Jetzt machen wir 256 draus. Laden Sie Mode kostenlos herunter. also wieder hier reingehe, kann ich hier reingehen und das einfach per Drag & Drop hierher Und wenn ich jetzt die Umschalttaste gedrückt halte, kann ich die Größe ändern und dann bei gedrückter Strg-Taste darauf klicken, um es zu entfernen Klicken Sie darauf und platzieren Sie es dort. Drücken Sie Shift, um die Größe von allen Seiten zu ändern. Das ist nicht in der Karte. Wo ist die Karte? Solange diese Option ausgewählt ist, wähle ich die ursprüngliche Gruppe und dann Strg G aus, nur um sicherzugehen dann Strg G aus, nur , dass ich sie in derselben Gruppe habe. Dann nenne ich das die Kleidungskarte. Karte der Kategorie Kleidung. Jetzt wähle ich diese anderen aus und lösche sie. Wählen Sie diese Schicht aus. Dann Form D. Ich wiederhole dasselbe für Elektronik. Jetzt, wo wir diese drei bereits erstellt haben, wähle ich sie so aus, ziehe sie und platziere sie genau dort. Und wenn ich jetzt bei gedrückter Ctrl-Taste darauf klicke und darauf doppelklicke, kann ich vom Computer hochladen und zu Downloads gehen . Hier ist der, den wir gerade heruntergeladen haben, und jetzt ist er dort geladen. Also werde ich diesen Teil beschleunigen , indem ich einfach ersetze, was wir in diesen Duplikaten haben Dekor. Lass uns einfach die Bearbeitung durchgehen Steuerung, wähle hier die Hintergrundfarbe, kopiere. Doppelklicken Sie auf Einfügen. Herunterladen, 256, kostenloser Download. Ich gehe wieder rein. Ich steuere es einfach, wähle es aus, doppelklicke darauf und lade es vom Computer hoch. Ich selbst. Also hier sind wir. Ich bin gerade damit fertig, alles zu ersetzen. Ich wähle sie einfach aus und schiebe sie nach unten, einfach so Verkleinern, Strg gedrückt halten. Unsere App kommt gut zurecht. Also eine Sache, die ich tun möchte, ist diese und diese Schicht auszuwählen , nur um den letzten Abschnitt genau hier zu erstellen , weil wir diese beiden kombinieren und diese beiden nach oben verschieben können . Und der letzte Abschnitt hier sind andere Produktkategorien. Also doppelklicke ich darauf und füge es dort ein. Und jetzt werden Sie feststellen, dass dies nur Schaltflächen sind, die in diese Richtung gescrollt werden können und die gezogen und gescrollt werden können Also werden wir das einfach auswählen und hier platzieren. Wenn ich die Shift-Taste gedrückt halte, mache ich das größer. Und weil es sich um eine Gruppe handelt, wähle ich sie direkt aus. Ja, wir können diese Ansicht verlassen. Lassen Sie mich das sogar entfernen. Wählen Sie dies, drücken Sie die Taste und wählen Sie den Text direkt aus. Was ist das für ein Zubehör? Steuerung, um den Hintergrund direkt auszuwählen. Dann machen wir das vielleicht hellgrau. Halte durch und verschiebe Spielzeug und Fahrzeuge. Halten Sie die Strg-Taste gedrückt, um den Text direkt auszuwählen. Spielzeug. Halten Sie die Taste gedrückt , um das auszuwählen. Drücken Sie die Taste, um den Text direkt auszuwählen. Fahrzeuge steuern. Ich finde, das ist ein netter Ort , um sie zu beenden , sie näher zusammenzubringen, sie einfach so festzuhalten. Das kannst du nach unten drücken. Halten Sie die Umschalttaste gedrückt, um all diese auszuwählen , und drücken Sie sie nach unten. Ich glaube also, wir kommen weiter. Die App nimmt jetzt langsam Gestalt an und ich mag sie wirklich Jetzt können wir sie auch auswählen und bei gedrückter Umschalttaste ihre Größe proportional ändern, sodass sie mit der Schaltfläche genau dort übereinstimmen Schieben Sie sie übrigens nach links. Und ich denke, wir haben jetzt eine nette Homepage. Denken Sie daran, dass das Ziel hier nicht darin besteht, die perfekte App-Benutzeroberfläche zu erstellen. Ziel ist es, Ihnen einen Workflow zu zeigen, den Sie verwenden können, wenn Sie Figma zum ersten Mal verwenden und daran interessiert sind, UX-Design für Benutzeroberflächen zu erlernen Ich möchte dir nur einen schönen Workflow zeigen. Aber wenn Sie an einem echten Projekt arbeiten, müssen Sie sich an die Designprinzipien erinnern. Das ist also ein Ziel hier. In der nächsten Lektion wollen wir uns also ansehen, wie dieser Abschnitt erstellt wird, bevor wir zu den anderen beiden übergehen, die relativ einfach sind. Wir sehen uns also in Kürze. 9. Empfohlene Verkäufer: Jetzt ist es an der Zeit, den Bildschirm „ Ausgewählte Verkäufer“ zu erstellen. Lassen Sie mich also einfach zu unserer Referenz zurückkehren. Das sind also die vorgestellten Verkäufer. Wenn also jemand auf „Alle ausgewählten Verkäufer ansehen“ klickt, er zu diesem Bildschirm weitergeleitet, auf dem er blättern und sich alle ausgewählten Verkäufer ansehen kann. Wie schaffen wir das also? gehe zurück zu unserer Grafik, Ich gehe zurück zu unserer Grafik, zoome heraus, gehe zu Strg, wähle diesen Rahmen aus, ziehe und halte die Umschalt-Taste gedrückt, um mich in einer geraden Linie zu bewegen, und los geht's Das Gute an Figma ist, dass wir die meisten dieser Teile einfach wiederverwenden können Also werde ich einfach alles andere loswerden, was wir nicht benutzen, indem ich die Shift-Taste gedrückt halte Oder wählen Sie einfach innerhalb des Rahmens aus und ziehen Sie. Ich glaube, ich werde den ganzen Weg dorthin ziehen. Ich wollte, dass wir, bevor wir weitermachen , das auswählen und die Umschalttaste gedrückt halten. Ja, sagen wir Größe 15. Also wähle ich das auch aus. Größe 15, einfach so. Ich wollte sie nur so skalieren, dass sie etwas größer sind als der Kartentext Nun, zurück zu diesem Thema, wie Sie sehen können: Wenn ich heranzoome, haben wir ein Bild, dann haben wir etwas Text und dann eine Beschreibung Mal sehen, wie man das implementiert. Ich werde das auswählen, kopieren, steuern, diesen Rahmen auswählen und ihn dort einfügen. Doppelklicken Sie darauf und doppelklicken Sie darauf, um das loszuwerden. Jetzt haben wir diese beiden, ich möchte sie auswählen und irgendwo dort ablegen. Und tatsächlich, wie Sie sich vorstellen können, haben wir hier keinen Namen, also Control, wählen Sie den Namen aus und entfernen Sie ihn. Lassen Sie uns in der Tat den Hintergrund mit Control auswählen. dann die Steuerung aus, wählen Sie das Bild aus und vergrößern Sie es, während Sie die Umschalttaste gedrückt halten , um die Größe proportional zu erhöhen Einfach so. Aber lassen Sie mich das näher betrachten. Und ich wähle das Textwerkzeug aus und tippe As Kicks ein. Richtig, also wähle ich einfach diesen Dummy-Text aus. Ich wähle den Text aus, um ihn erneut zu ziehen, um einen Absatz einzufügen, einfach so Jetzt haben wir diese Sternebewertung. Also wähle ich dieses Drop-down-Menü aus, wähle dann den Stern aus und zeichne einen Stern bei gedrückter Shift-Taste, vielleicht bis zu dieser Stelle 16 mal 16. Das ist 18 mal 18. Geben wir ihm einen Abstand von zwei. Dann Shift Control D. Wir haben also fünf Sterne. Wir können das auswählen und es nach oben ziehen, um es zu duplizieren. Wir haben eine Fünf-Sterne-Bewertung, dreitausend Bewertungen, dreitausend Rezensionen. Kann das mit den Pfeiltasten auf der Tastatur drücken. Jetzt möchte ich diese fünf auswählen, sie gruppieren und sie Sternbewertungen oder Sterne nennen. Das sind die fünf Sterne. Dann ist die Gruppe immer noch ausgewählt, ich kann sie auswählen und dann Strg G drücken, um sie Bewertung zu nennen. Jetzt haben wir in der Bewertung die Sterne, die fünf Sterne und die Bewertung. Lassen Sie mich das einfach kopieren, einfügen, nur um die Textmenge zu erhöhen, diese Gruppe auswählen und sie richtig anordnen. Lassen Sie mich diese Größe leicht auf vielleicht 16 erhöhen. Ich glaube, mir gefällt, wie es jetzt aussieht. Oder vielleicht können wir das nach oben drücken und gedrückt halten, sodass der Abstand genau hier dem Abstand hier entspricht. Ordnung. Wenn ich das jetzt direkt auswähle, kann ich Strg und Shift gedrückt halten und ihm diese Farbe geben. Das ist also eine Vier-Sterne-Bewertung. Klicken Sie nach draußen. Und jetzt haben wir einen einzigen Top-Verkäufer namens Polis Kicks Ordnung. Jetzt kann ich das in seiner Gesamtheit auswählen und G drücken, um es zu gruppieren Dann nenne es Featured Seller Card. Lass es kollabieren. Jetzt kann ich ohne Umschalten ziehen. Geben wir ihm den Abstand von 17 oder einen beliebigen Abstand. Drücken Sie dann Strg D, um es mehrmals zu duplizieren. Jetzt werden Sie feststellen, wenn Sie es weiter duplizieren möchten, lassen Sie mich das einfach rückgängig machen und dann Strg D rückgängig machen. Es erscheint vor der Tab-Leiste. Und das liegt daran, dass sich die Tab-Leiste in der Hierarchie hier unter dieser Karte befindet. Wie Sie sehen können, befindet sich die Karte hier oben und die Tab-Leiste befindet sich hier. So können wir die Karten auswählen. Lassen Sie mich tatsächlich einfach alle gruppieren. Ausgewählte Verkäuferkarten. Karten im Plural. Und ziehen Sie es dann direkt unter die Tab-Leiste. Und jetzt scheint es sich hinter der Tab-Leiste zu befinden, weil der Benutzer erwartet, scrollen zu können. Also los geht's. Jetzt können wir diese Tab-Leiste auswählen und schauen, ob wir einen Randschatten hinzufügen können. Ja, Schlagschatten. Ja, da sind wir. Also für das X würde ich sagen, vielleicht minus fünf, wenn ich heranzoome, minus 20, minus fünf. Sagen wir minus fünf. Ja, wie du sehen kannst, da ist dieser Schlagschatten. Sagen wir auch minus fünf. Was ist mit negativen Zehn? Ich zoome heraus. Nun, wie Sie sehen können, gibt es direkt dahinter etwas Schlagschatten. In Ordnung, spiel damit herum. Ich möchte nicht zu lange auf diesen Punkt eingehen. Als Nächstes müssen Sie natürlich die Details für jeden Verkäufer ändern. Also Control, wähle das aus, doppelklicke darauf. Dann könnte das Eagle Motors sein. Kehren wir zu Figma-Klassen, Assets und Thumbnails zurück. Klicken Sie nach draußen. Klicken Sie bei gedrückter Taste und doppelklicken Sie erneut. Das kann der Spielzeugladen sein. Schließ das. Kontrolle. Doppelklicken Sie. Eagle Motors. Kehren wir nun zu unserer Referenz zurück und schauen, ob alles korrekt ist. Wie Sie sehen, haben wir unterschiedliche Symbole auf verschiedenen Bildschirmen je nach Kontext unterschiedliche Symbole auf verschiedenen Bildschirmen, aber wir werden keine Zeit damit verbringen, die Symbole zu aktualisieren , da Sie bereits wissen, wie diese Symbole dort platziert werden. Es liegt also an Ihnen, diesen Job zu erledigen. Haben wir noch etwas vergessen? Ich glaube nicht, dass wir etwas vergessen haben. In der nächsten Lektion erstellen wir nun diese Detailseite für einen der Verkäufer, denn wenn jemand sie berührt oder sie auf seinem Handy auswählt, wird er zur Polizei der Ladendetails weitergeleitet. Jetzt können sie mehr über Polizeigeschäfte lesen oder sie anrufen. Dadurch wird das Telefon geöffnet. Dadurch wird dieser Bildschirm geöffnet und sie können mit Polizeibeamten chatten. Sie können auch auf Produkte klicken, um sich Polizeiprodukte anzusehen, und sie können sich einen schnellen Überblick über das Unternehmen Schauen wir uns also in der nächsten Lektion an, wie man das erstellt . Wir sehen uns in Kürze. 10. Einzelverkäuferbildschirm: Willkommen zurück. Wir machen Fortschritte und ich freue mich darüber. Wenn jemand auf die Police Kicks-Karte klickt, soll er zur Detailseite des Police Kicks-Shops weitergeleitet werden . In Ordnung Also gehe ich zurück zu unserem Arbeitsbereich und wähle Control, Select Inside, dann Raus und ziehe, um das zu duplizieren. Und tatsächlich habe ich vergessen, dass wir sie umbenennen sollten. Das ist also der Startbildschirm. Dies ist der Doppelklick , auf dem der Bildschirm des Verkäufers angezeigt wurde. Und dies soll der Bildschirm für einen einzelnen Verkäufer sein . Also werde ich jetzt all diejenigen löschen, die hierher zurückwechseln. Ich kann sehen, dass wir ein Bild brauchen. Wir können einfach Strg halten, das auswählen, dann kopieren, C, Steuerung das, Steuerung V, und ich werde einfach die Umschalttaste gedrückt halten um es aus allen Winkeln zu vergrößern, einfach so. Dann lassen Sie uns diese Karte erstellen. Mein Sitz rutscht ständig runter. In Ordnung, also lass uns zu diesem Drop-down-Menü gehen. Und dann auch rechteckig. Lassen Sie uns unser Rechteck genau dort zeichnen. Ich finde, das ist ein netter Ort. Solange es ausgewählt ist, geben wir ihm vielleicht 20. Wählen Sie auch das Bild aus. Geben wir ihm 20. Ja, ich glaube, ich habe ihnen jeweils zehn gegeben. Also zehn, zehn. Lassen Sie mich das darauf abstimmen. Drücken Sie es mit den Pfeiltasten nach oben. Und ich glaube, jetzt kommen wir weiter. Also, wenn wir das auswählen , gehen wir zum Farbwähler Dann geben wir ihm dort dieselbe Farbe. Wählen Sie draußen. Geben wir ihm als Nächstes einen Namen. Also werde ich einfach Eagle Motors auswählen. Strg auswählen, weil es sich in einer Gruppe befindet, Ctrl auswählen und dann herausziehen, um den Namen dort einzufügen. Ich möchte diese Alt-Taste auswählen und ziehen. Lass uns das da reinlegen. Wir brauchen auch diese Bewertung, doppelklicken Sie darauf, dann doppelklicken Sie darauf. Drücken Sie die Alt-Taste und ziehen Sie das. Und lass es uns genau da hinstellen. Wir verwenden nur das, wofür wir bereits Zeit aufgewendet haben. Das ist der Vorteil der Verwendung von Figmre. Sie können Komponenten wiederverwenden. In Ordnung, also lass uns zur Sache gehen. Wählen Sie das aus und ziehen Sie es mit der Alt-Taste, dann doppelklicken Sie auf diese Alt-Taste und ziehen Sie es. Ich werde es vielleicht bis zu dieser Stelle erweitern. Ziehe das irgendwo hin und lege es dort ab. Halten Sie die Umschalttaste gedrückt, um die Größe zu erhöhen. Steuerung, wählen Sie den Hintergrund aus. Ich möchte kontrollieren, den Hintergrund auswählen, damit ich diese auf einen Radius von zehn Rändern ändern kann , steuern und die Texte auswählen kann. Ich hoffe. Ich möchte daraus 15 machen. Steuerung, wähle es aus. Lass es uns genau da hinstellen. Dann ziehe ich. Dann gebe ich ihnen einfach den Abstand von 14. Und während das ausgewählt ist, halte ich die Umschalttaste gedrückt und ändere dann die Größe der beiden, während ich die Umschalttaste gedrückt halte Schiebe sie nach links, leicht nach oben. Halten Sie die Steuerung gedrückt. Ich möchte ihm diese Hintergrundfarbe geben. Also ich denke, das war die Farbe. Dann geben wir dem Text eine weiße Farbe. Ich doppelklicke einfach auf diese Kopie. Einfügen Einfügen. Lass es uns dort beenden. Und wir haben unsere Karte. Doppelklicken Sie darauf. Lass uns das auf die andere Seite schieben. Lassen Sie uns nun die Größe des Firmennamens erhöhen , vielleicht auf 24. Lassen Sie uns das nach unten drücken. Nach außen scrollen. Ich glaube, wir fangen jetzt an, etwas Sinnvolles zu bekommen. Steuerung, wähle das aus. Das ist Chat. Ja, ich denke, jetzt haben wir etwas Tolles. Ich weiß nicht, was noch übrig ist. Sie können die Symbole und alle Details, die Sie benötigen, jederzeit aktualisieren . Das ist jetzt hier, lassen Sie uns übrigens mehr Sinn machen. Das ist Police Kicks. Sie sehen Police Kicks. Und tatsächlich brauchen wir das, wir hatten einen Pfeil Andere Symbole. Ja, wir hatten diesen Pfeil. Ja, ich glaube, wir brauchen ihn an Orten wie diesen. Lassen Sie uns also das und das vorantreiben, weil wir dem Benutzer die Möglichkeit geben wollen, rückwärts zu navigieren , um dorthin zurückzukehren, wo er hergekommen Ich denke, das ist hier der gleiche Fall , denn wenn Sie „Ausgewählte Verkäufer“ auswählen, alles ansehen, werden Sie hierher weitergeleitet und Sie können jederzeit zurückkehren Wählen Sie diese drei Exemplare aus. Ich kontrolliere, wähle hier aus. Wählen Sie zunächst bei gedrückter Ctrl-Taste und dann mit Ctrl V die gewünschte Position ein. Und jetzt sollen das empfohlene Verkäufer sein. Drücken Sie B, um es fett zu machen, und geben wir ihm diese Farbe. Wir können das vielleicht Polskiks Shop nennen . Wir können es so fett machen, damit der Benutzer weiß , dass er sich Polizeikicks Wenn sie zurück sagen, werden sie dahin gebracht, wo sie hergekommen sind. Ausgewählte Verkäufer, wenn Sie zurück sagen, werden Sie zur Startseite zurückgeleitet. Mal sehen, was wir hier hatten. Wir benötigen das Benutzerprofil also nicht direkt dort, da Sie sich nur ausgewählte Verkäufer ansehen. Auch hier brauchst du das nicht. Ja, aber insgesamt denke ich, dass wir jetzt einen schönen Einzelverkäuferbildschirm mit allen Details haben . Und ja, lass uns das etwas größer machen. Und kontrollieren Sie, wählen Sie den Text in den Produkten aus. Drücken Sie es leicht nach unten. Wenn ich mir das jetzt auf meinem Handy ansehe, kann ich das auswählen. Lass uns 11 draus machen. Schieb es nach oben. Wenn ich diese Option auswähle, werde ich zu einer Liste aller Produkte weitergeleitet , die Eagle Motors verkauft. Da haben wir's. Lassen Sie uns also in der nächsten Lektion weitermachen und die Bildschirme mit dem Chat-Bildschirm abschließen, denn wir haben auch diesen Chat-Bildschirm , den ich Ihnen als Auftrag geben kann. Aber schauen wir uns in der nächsten Lektion an, wie man ihn erstellt. Wir sehen uns in Kürze. 11. Chat-Bildschirm: Und willkommen zurück. Und jetzt sind wir gerade dabei, die Bildschirme fertig zu machen. Wir müssen gerade diese Chat-Sitzung beenden. Gehen wir also zu unserem Kunstwerk oder unserem Design und hier sind wir. Jetzt wähle ich Control und wähle das wie gewohnt aus. Dann ziehe ich und stelle sicher, dass es gleichmäßig verteilt ist , und halte die Umschalttaste gedrückt , um es in einer geraden Linie zu bewegen Da lasse ich los. Dann ist das der Chat-Bildschirm. Treten Sie ein. Lass mich das Bild einfach loswerden. Und einige davon, was haben wir übrigens hier? Wir haben gerade den Chat. Also will ich mit dieser Box und den Texten allein gelassen werden, schieb sie nach oben, einfach so. Wählt den Text aus, schiebt ihn nach oben. Nehmen wir an, das ist eine Abfrage. Wir haben diese Frage gestellt. Lassen Sie mich die Größe hier erhöhen. Hineinzoomen. Wählen Sie den Text dort oben aus und drücken Sie ihn dorthin. Nun, es sollte vielleicht an dieser Stelle liegen, weil Sie möchten, dass der Benutzer weiß, welche seine Sprechblase und welche die Sprechblase des Verkäufers ist, einfach so. Also wähle ich diese beiden aus, ziehe nach unten, vielleicht diesen Abstand, aber schiebe ihn auf diese Seite Wir können die Größe variieren. Also ziehe ich das einfach und kopiere und füge es ein. Vielleicht war es eine lange Antwort. Lass mich das einfach nach unten ziehen, damit ich hier auswählen kann Dann geben wir ihm diese Farbe, um die Markenkonsistenz aufrechtzuerhalten dann für die Farbe des Textes Geben wir ihm dann für die Farbe des Textes die Hintergrundfarbe. Jetzt kann ich einfach alle auswählen, dann ziehe ich und gebe ihnen den Abstand von 21. Wir haben die Originale gegeben. Das kann kürzer sein. Wie man zieht. Einfach so. Und jetzt haben wir unseren Chat-Bildschirm. Ich denke, das reicht für den Chat-Bildschirm. Lassen Sie uns in der nächsten Lektion etwas aufräumen, weil wir den Überblick über all unsere Gruppierungen und die Organisation für unser Projekt verloren all unsere Gruppierungen und Organisation für unser Projekt Schauen wir uns also an, wie wir alles so organisieren , dass wir ein sauberes, lesbares Dokument haben Wir sehen uns in Kürze. 12. Bereinigen: Jetzt ist es an der Zeit, unser Design aufzuräumen , denn im Moment ist alles unorganisiert Es ist nicht sehr unorganisiert, aber wir haben den Überblick verloren, wo wir uns befinden und welche Gruppe zu welcher Gruppe gehört Fangen wir also mit dem Startbildschirm an. Das ist der Startbildschirm. Lassen Sie uns zunächst diese beiden loswerden, das löschen. Fangen wir jetzt mit dem Willkommensbildschirm an. Auf dem Begrüßungsbildschirm haben wir das Logo. Wir haben das Ladesymbol und die Statusleiste. Das ist okay. Innerhalb des Anmeldebildschirms, und tatsächlich möchte ich diesen Bildschirm ausblenden. den Rest auf dem Bildschirm für Schilder Lassen Sie uns den Rest auf dem Bildschirm für Schilder verstecken. Darin haben wir das Logo. Das ist okay. Wir haben den Intro-Text Dann haben wir die Telefonfüllungen, die Schaltfläche und sie haben eine Konto-Textgruppe Dann haben wir die Sarus-Bar, die wir über dem Shop-Logo platzieren können Um in einer guten Hierarchie zu sein. Also das ist in Ordnung. Lassen Sie uns das als Nächstes verstecken und wieder einblenden. Der Signierbildschirm hat ein Shop-Logo. Wir haben den Text. Wir haben die Formularfelder. In den Formularfeldern haben wir das Passwort. E-Mail und Benutzername. Lassen Sie mich den Benutzernamen reduzieren und ihn über die anderen setzen . Die E-Mail sollte in der Mitte sein , und das ist in Ordnung. Dann haben wir den Text. Wir haben die Anmeldeschaltfläche, dann die Srtus-Leiste. Du kannst es genau dort hinstellen Gehen wir dann als Nächstes zum Chat-Bildschirm über , den wir hier ganz am Ende hätten platzieren sollen. Dann dieser davor. Dann das. Dann kollabieren, hoch das. Dann lass uns zuerst zum Startbildschirm gehen. Auf dem Startbildschirm haben wir die Option Lass mich zusammenbrechen. Lassen Sie mich zuerst alles reduzieren auswählen. Okay, wir haben die Kategorie Kleidung bis hierher. Das sind die verschiedenen Produktkategorien. Also, wenn alle ausgewählt sind, Control G-Produktkategorien. Dies sind die anderen Produktkategorien. Also bis dahin, nein, wir brauchen das, die Schicht gedrückt halten und das. Dann Strg G, andere Kategorien. Dann haben wir diesen Knopf. Schaltfläche „Ansehen“. Das ist auch eine VWA-Taste. Die Schaltfläche eines ausgewählten Verkäufers anzeigen. Und das ist die Schaltfläche „ Produkt anzeigen“ von Gore. Und tatsächlich möchte ich, dass wir hier alles zusammenfassen , von dem bis zu dem und dieser Gruppe Control G. Nennen wir es beliebte Produktkategorien Dann lassen Sie uns auch diese und diese Gruppe und die Kontrollgruppe G gruppieren. Das sind die vorgestellten Verkäufer. Und es verstecken und wieder einblenden. Wir können auch die Kategorien beliebter Verkäufer ausblenden und diese anderen Kategorien , den Text und die Gruppe selbst, Steuerung G und andere Kategorien wieder einblenden Text und die Gruppe selbst, Steuerung G und andere Tatsächlich können wir diese Abschnitte nennen. Abschnitt, Abschnitt mit beliebten Kategorien und Abschnitt mit ausgewählten Verkäufern. Und natürlich steht der Bereich „Ausgewählte Verkäufer“ an erster Stelle. Dann die beliebten Kategorien, dann andere Kategorien. Und wir haben den Profilbenutzer , der hier oben sein soll. Bevor wir das verschieben, wählen wir es einfach zusammen mit dem Namen und diesen beiden aus, wählen wir es einfach zusammen mit dem Namen und diesen gruppieren sie und nennen sie Kontext, Nervvation oder Nervenkollaps, und lassen Sie es uns über die vorgestellten Verkäufer stellen Dann haben wir die Suchleiste, die sich darunter befindet Dann haben wir die Tab-Leiste. Was ganz unten ist, dann haben wir die Statusleiste, die ganz oben sein sollte. Alles klar. Also ist der Startbildschirm jetzt gut organisiert. Wie Sie sehen können, haben wir die Statusleiste, dann haben wir den Kontextnerv, die Suchleiste, empfohlene Verkäufer, beliebte Verkäufer, andere Kategorien und die Tableiste. Da haben wir's. Also lass uns das verstecken. Sehen wir uns nun die vorgestellten Verkäufer an. Und hier wählen wir das als Control G. Kontext-Nerv aus. Lass es kollabieren. Dann haben wir das. Und dann lass uns das zusammenbrechen. Dann haben wir die Starterbar, die ganz oben stehen sollte. Diese sollte sich aufgrund dieses Abschnitts hier unter der Tab-Leiste befinden. Denken Sie daran. Aber jetzt, in der Tab-Leiste , nein, in den ausgewählten Verkäuferkarten, müssen wir uns auch organisieren. Lassen Sie uns zuerst alles zusammenbrechen. Ja, wir haben fünf Wir haben all diese empfohlenen Verkäuferkarten. Sie können sie auch Featured Seller Card One nennen. Sie können sich sehr genau, sehr detailliert darüber informieren, was jede dieser Komponenten ist. Denn wenn Sie eine öffnen, werden Sie feststellen, dass Sie auch andere Gruppen haben. Gehen Sie also so detailliert wie möglich vor und organisieren Sie sich so gut wie möglich. Also zumindest um zu verstehen, wie man seine Gruppen organisiert. Lass das zusammenbrechen, verstecke das. Lass uns hier reingehen. Das geht sehr schnell und unkompliziert. Lass all das zusammenbrechen. Fangen wir damit an , den Starterholm ganz oben zu platzieren Lassen Sie uns dieses Kontext-Nav-Steuerelement G erstellen. Das ist der Daumennagel Das ist die Karte. Nennen wir sie einfach Verkäuferdetails. Kontrolle G. Verkäuferdetails. Dies ist das Vorschaubild des Verkäufers. Dann die Tab-Leiste unten. Wir haben also die Starterleiste. Kontext-Nerv, Verkäuferdetails. Das Vorschaubild des Verkäufers sollte sich darüber befinden. In Ordnung, lass das jetzt endlich zusammenklappen. Lass uns das machen. Ein Text. Also habe ich jetzt alle Chat-Textgruppen gruppiert. Und natürlich können Sie sie neu anordnen. Und dann haben wir die Tab-Leiste, dann haben wir die Startleiste, die wir hier aufstellen können Und da haben wir es. Also lasst uns alles einblenden Und da haben wir's. Sehen wir uns in der nächsten Lektion an, wie Sie Interaktivität hinzufügen Wir sehen uns in Kürze. 13. Hinzufügen von Interaktivität: Es ist an der Zeit, Interaktivität und Links zu den verschiedenen Bereichen hinzuzufügen , um die Navigation und Präsentation zu ermöglichen Um das zu tun, müssen Sie zunächst sicherstellen, dass Sie sich im Designmodus befinden Wenn Sie sich im Zeichenmodus befinden, Ihnen diese Option namens Prototyp nicht steht Ihnen diese Option namens Prototyp nicht zur Verfügung, die wir benötigen. Und das liegt daran, dass, wenn wir zum Beispiel Control diesen Bildschirm oder Frame auswählen und zum Prototyp wechseln, werden Sie feststellen, dass diese Plus-Symbole angezeigt werden. Und wenn wir uns im Drohnenmodus befinden und die Steuerung dies auswählen, werden sie nicht angezeigt. Und das sind die Hooks, die du verwenden solltest , um auf andere Teile der App zu verlinken. Stellen Sie also sicher, dass Sie sich im Designmodus befinden. Und jetzt, wenn ich das auswähle, Control es auswähle und zum Prototyp wechsle, kann ich es ziehen und dort platzieren. Hat darauf hingewiesen. Sobald Sie das Highlight sehen, bedeutet das, dass diese beiden miteinander verknüpft sind. Wenn jemand darauf klickt, wird er zu diesem Bildschirm weitergeleitet. Um zu bestätigen, klicke ich einfach nach draußen, aber ich kann auch das Verhalten wählen. Sie können das Ziel, die Aktion, die Navigation oder all diese anderen Dinge wählen . Wenn ich das auswähle, habe ich jetzt zwei Optionen Ich kann eine Vorschau anzeigen oder präsentieren. Wenn wir eine Vorschau anzeigen, öffnet sich hier ein Simulator, und wenn ich Präsentieren wähle, öffnet sich ein neuer Tab. Jetzt, wieder hier drin, wir sind hier drin. Wenn ich das auswähle, werden wir zu dem Anmeldebildschirm weitergeleitet. Lassen Sie mich das jetzt einfach schließen. Und wir können das auch schließen. Wenn ich es auswähle, werden wir, wie Sie sehen können , zum Anmeldebildschirm weitergeleitet. Wenn ich jetzt hier reingehe, möchte ich es vergrößern. Und denk dran, das war eine Gruppe. Ich wollte, dass wir das einfach kontrollieren und auswählen. Der Grund, warum wir es nicht zu einem durchgehenden Text bis zum Ende gemacht haben , war weil ich wollte, dass es ein einziger Link ist, nicht der gesamte Text, sodass, wenn jemand darauf klickt, es ein eigenständiger Link ist und ich die Strg-Taste gedrückt halte, um ihn direkt auszuwählen. Und wenn ich das auswähle, kann ich es per Drag&Drop auf die Signierseite ziehen. Wenn Sie bereits ein Konto haben, können Sie sich anmelden. Sie werden also zur Signierseite weitergeleitet, wenn Sie darauf klicken. Sehen wir uns das also in Aktion an. Sehen Sie sich das an. Wenn wir auf die Anmeldeseite klicken wir bereits ein Konto haben, können wir uns anmelden und werden zur Signierseite weitergeleitet Lassen Sie uns jetzt hier dasselbe tun. Ich kann die Strg-Taste gedrückt halten und das auswählen, es dann dorthin ziehen und nach draußen klicken. Jetzt kann ich sagen Okay. Wenn ich jetzt noch einmal darauf klicke, wähle das aus. Wir werden zur Anmeldeseite weitergeleitet. Wenn wir kein Konto haben, werden wir zur Anmeldeseite weitergeleitet Einfach so. Verkleinern. Lass mich den Previewer schließen. Lass mich einfach meinen Sitz verstellen. Heranzoomen. Heranzoomen Nun, hier können wir sagen, wenn jemand auf diese Schaltfläche klickt, soll er zu den ausgewählten Verkäufern weitergeleitet werden, zu diesem Bildschirm Also werde ich es damit verbinden. Wenn Sie einen Bildschirm mit beliebten Kategorien hatten , den Sie haben sollten und auf Alle anzeigen klicken, sollten Sie zum Bildschirm mit den beliebtesten Kategorien weitergeleitet werden , aber wir haben ihn nicht. werden wir uns also keine Gedanken machen. In Ordnung. Also haben wir auch diese Homepage. Also gut, wir haben auch den Teer. Wir stellen hier nur zufällige Verbindungen her. Wir versuchen nicht, einer bestimmten Reihenfolge zu folgen. Wenn wir uns also auf dem Bildschirm des ausgewählten Verkäufers befinden, können wir diesen auswählen. Also Strg auswählen, und ich wähle das aus und bringe uns zurück nach Hause, denn wenn wir das Home-Symbol auswählen, sollen wir zum Startbildschirm weitergeleitet werden. Der gleiche Fall gilt auch hier. Wählen Sie Steuerung, Steuerung auswählen. Dann lass uns auf die Homepage gehen. Der gleiche Fall gilt auch hier. Wählen Sie Control aus und gehen Sie dann zur Startseite. In Ordnung. Wenn wir auf den Chat-Button klicken, sollen wir den Chat mit diesem Shop führen. Also halte ich die Taste Control gedrückt und führe uns dorthin. Klicken Sie nach draußen. Was sonst? Wenn wir hier auf die Schaltfläche B klicken, möchte ich die Strg-Taste gedrückt halten, um das Symbol auszuwählen, dann können wir hierher zurückkehren, weil wir von diesem Teil zum Diagramm gekommen sind. Wenn wir im Laden sind, kommen wir wahrscheinlich von der Liste der Geschäfte. Also können wir dieses Symbol für die Rückseite auswählen und es wieder dort verlinken, dann „Außerhalb“ auswählen. Wenn wir in der Liste der empfohlenen Verkäufer sind, wir wahrscheinlich von der Startseite gekommen. Wählen Sie also Steuerung aus, wählen Sie das aus und setzen Sie es dann wieder dort ein. Was sonst? Wenn wir das als Gruppe betrachten, ich einfach Steuerung und wähle den Hintergrund selbst aus. Wir werden zur Detailseite von Police Kicks weitergeleitet. Da es sich um eine Karte handelt, wählen Sie sie aus dort zur Detailseite weitergeleitet Haben wir etwas vergessen? Mal sehen, ob wir noch etwas brauchen. Das ist der Laden von Police Kicks. Wir können diesen Shop also auch hier verlinken, indem wir die Strg-Taste gedrückt halten. Ich werde es mit dem Shop verknüpfen. Ich werde dasselbe auch mit dem Vorschaubild machen , sodass du, wo immer du es berührst, einfach zum Laden weitergeleitet wirst Ich werde den Namen auch zu einem Link zum Shop machen. Und das ist eigentlich das Gleiche, was wir dafür hätten tun sollen , weil wir sichergehen wollen , dass sie auf den richtigen Shop verweisen. Wenn also jemand auf den Namen des Ladens klickt, er zum Geschäft weitergeleitet. Und jetzt, glaube ich, verstehst du , wie man Interaktivität erzeugt, wie man jeden einzelnen Link mit dem richtigen Ziel Ja, ich denke, alles stimmt. Also lass uns zur Präsentation wechseln. Ich möchte, dass wir es als Präsentation betrachten. Lass uns das schließen. Wenn ich jetzt darauf klicke, werden wir zu dieser Seite weitergeleitet. Und tatsächlich möchte ich, dass das Logo uns auf die Homepage führt. Aber im Moment sind wir auf der Anmeldeseite. Wenn wir noch kein Konto haben, werden wir zur Anmeldeseite weitergeleitet Ordnung, jetzt wollte ich, dass wir zur Homepage navigieren können, indem wir auf dieses Logo klicken Und das auch. Lassen Sie uns jetzt erneut auf Play klicken. Da haben wir's. Wenn ich darauf klicke, werden wir auf die Homepage weitergeleitet. Wenn ich jetzt alle ausgewählten Verkäufer sehen möchte , klicke ich einfach darauf. Wir sehen uns alle Verkäufer an. Ich kann auch zurückgehen. Gehen wir jetzt zurück zu allen Verkäufern. Ich kann auch von der Seite mit den empfohlenen Verkäufern wieder zum Startbildschirm wechseln . Wenn ich hier den Hintergrund, die Karte oder den Namen auswähle , werden wir zum Detailshop des Shops weitergeleitet. Und wenn wir sehr neugierig sind und dem Laden weitere Fragen stellen wollen , sollten wir hier Polizeibeamte sein. Wir können einen Chat mit ihnen beginnen und mit der Kommunikation beginnen, um herauszufinden, wie viel ihre Produkte kosten Also ich denke, das ist ein guter Ort, um das zu beenden. Dies war nur eine kurze Einführung in Figma und das UI-Design für mobile Apps Natürlich habe ich noch viele weitere Tipps und Tricks auf Lager, und ich werde sie in zukünftigen Kursen teilen Aber vorerst werden wir damit aufhören. Aber bevor du gehst, habe ich noch ein paar Dinge, die ich mit dir teilen möchte, also sehe ich dich in der nächsten Lektion. Geh nirgendwohin. 14. Schlussgedanken: Und das ist abgeschlossen. Ich möchte Ihnen gratulieren , dass Sie von Anfang bis Ende bei mir geblieben sind. Sie haben es endlich fertiggestellt, und jetzt haben Sie eine mobile App, eine Benutzeroberfläche, die Sie Ihren Freunden, Kunden oder potenziellen Arbeitgebern präsentieren können . Jetzt würde ich gerne sehen, was Sie erstellen konnten. Auf Skillshare laden wir gerne unsere Projekte hoch und erhalten Feedback von Mitschülern und Lehrern Klicken Sie also direkt unter diesem Videoplayer auf den Tab Projekte und Ressourcen und dann auf die Schaltfläche „Senden“, um Screenshots der Benutzeroberfläche Ihrer mobilen App hochzuladen Screenshots der Benutzeroberfläche Ihrer mobilen App Und noch etwas: Wenn du diesen Kurs hilfreich fandest, würde ich mich sehr freuen, wenn du dir nur eine Minute Zeit nehmen könntest , um eine Bewertung zu hinterlassen. Lass mich wissen, wie ich es gemacht habe. Lass mich wissen, wie der Unterricht war. Hat es dir gefallen? Würden Sie es Anfängern oder Fortgeschrittenen empfehlen? Ich würde mich über jedes Feedback sehr freuen , da es wirklich dazu beiträgt, diesen Kurs auf der Plattform sichtbarer zu machen und es mehr Schülern zu ermöglichen, damit in Kontakt zu kommen. Gehen Sie also einfach zum Tab „Bewertungen“ und klicken Sie auf Labor Review, und ich werde das wirklich, wirklich zu schätzen wissen. Vergiss auch nicht, in meinem Profil nachzuschauen wo ich mehrere weitere Kurse zum Thema Webdesign anbiete. Drei-D-Modellierung mit Blender und anderer Software. Schauen Sie sich meine Kurse an und sehen Sie, ob etwas für Sie von Interesse ist. Wir leben in einem digitalen Zeitalter dem digitale Fähigkeiten sehr wichtig sind, und darauf spezialisiere ich mich Vergiss nicht, mir zu folgen, um jedes Mal benachrichtigt zu werden , wenn ich einen brandneuen Kurs habe Also bis zum nächsten Mal, bleib kreativ. Frieden.