UI/UX-Design-Wireframes und Prototyping: Ein Leitfaden für Anfänger

1. Grundlagen des Wireframe- und Prototypenbaus für die User Experience: Alle sind herzlich willkommen zum Skill-Share-Kurs zu den Grundlagen der Wireframe- und Prototypenentwicklung für die Benutzererfahrung . Mein Name ist ein Krebsgeschwür und ich bin ein UX-Designer für Benutzeroberflächen mit über drei Jahren Erfahrung Ich bin fasziniert von User Experience Design und freue mich , mein Wissen mit Ihnen zu teilen In diesem Kurs werden wir zunächst die Grundlagen von Wireframes und Prototypen erlernen Anschließend werden wir Wireframes für beliebte Apps entwerfen , um ein Gefühl für den Prozess zu bekommen Als Nächstes werden wir den Drahtrahmen für die Lieferung von Lebensmitteln von Grund auf neu bauen . Wir werden diese App als Fallstudie verwenden, um zu lernen, wie man die Prinzipien des US-Designs anwendet. Schließlich werden wir unsere Drahtgestelle in einen Prototyp umwandeln . Auf diese Weise können wir unsere Designs mit Benutzern testen und Feedback erhalten. Wir werden Pigma verwenden, um die Wireframes und Prototypen zu bauen Sie sich keine Sorgen, wenn Sie noch nie zuvor ein Drahtgestell gebaut haben oder Pigma Wir werden bei Null anfangen und ich bin hier, um Sie bei jedem Schritt zu begleiten Am Ende dieses Kurses wirst du ein solides Verständnis von Drahtkinderwagen und Prototypen haben solides Verständnis von Drahtkinderwagen und Prototypen Sie werden auch in der Lage sein, Drahtrahmen und Fotomuster für Ihre eigenen Projekte zu entwerfen und zu bauen Freust du dich darauf? Ich kann es kaum erwarten, dich in der ersten Lektion zu sehen. 2. Einführung in Wireframes: Wireframes sind Skizzen einer Website oder App mit geringer Genauigkeit einer Website Sie haben keine Farben oder kein Design sondern nur die Grundstruktur der Benutzeroberfläche Dadurch lassen sie sich schnell und einfach erstellen. So können sich Designer auf die Benutzererfahrung konzentrieren , ohne sich in Details zu verlieren Drahtgitter werden verwendet, um Ideen an andere Teammitglieder, wie Entwickler und Stakeholder, weiterzugeben wie Entwickler und Stakeholder Sie können auch verwendet werden, um verschiedene Designs mit Benutzern zu testen und Feedback zu erhalten. Auf diese Weise kann sichergestellt werden , dass das endgültige Design benutzerfreundlich ist und den Bedürfnissen des Benutzers entspricht. Hier sind einige Beispiele dafür, wie Drahtgestelle zur Lösung von Problemen eingesetzt werden können. Vier Personen, eine Website für ein neues Restaurant könnte Wire verwenden. PM Store. Zeigen Sie, wie die Männer organisiert werden, wo die Kontaktinformationen angezeigt werden und wie Benutzer das Essen bestellen können. Eine App für ein Lebensmittelgeschäft könnte Drahtgitter verwenden um zu zeigen, wie Benutzer das Inventar des Ladens durchsuchen, Artikel zu ihren Karten hinzufügen und auf der Website eines Reisebüros auschecken könnten Wireframes verwenden, um zu können. Sie könnten Wireframes verwenden, um zu zeigen, wie Benutzer nach Flügen, Hotels und Mietwagen suchen und ihre Reisearrangements buchen In jedem dieser Beispiele ermöglichen die Wireframes den Designern, sich auf die Benutzererfahrung zu konzentrieren und sicherzustellen , dass die Benutzeroberfläche einfach zu bedienen und zu verstehen ist Dies kann dazu beitragen, das allgemeine Kundenerlebnis zu verbessern und die Wahrscheinlichkeit zu erhöhen, dass Menschen das Produkt verwenden. Wireframes sind ein wertvolles Tool für Designer. Sie können helfen, Zeit und Geld zu sparen, die Kommunikation zu verbessern und verschiedene Designs mit Im nächsten Video werden wir Fototypen vorstellen und den Unterschied zwischen Fototypen und Wireframes kennenlernen den Unterschied zwischen Fototypen und Wireframes 3. Einführung in den Prototyp und der Unterschied zwischen Wireframe und Prototyp: Der Hauptunterschied zwischen einem Wireframe- und einem Low-Fidelity-Prototyp Wireframes sind ästhetisch, während Low-Fidelity-Prototypen Das bedeutet, dass die Benutzer auf verschiedene Elemente des Low-Fidelity-Prototyps klicken können verschiedene Elemente des Low-Fidelity-Prototyps , um zu sehen, wie sie funktionieren Dies ist wichtig, um die Benutzerfreundlichkeit eines Designs zu testen, da Benutzer so mit der Benutzeroberfläche interagieren und Feedback zur Funktionsweise geben können. Hier ist ein Beispiel für einen Low-Fidelity-Prototyp. Ein Designer erstellt eine neue Website für ein Restaurant. Sie erstellten den Low-Fidelity-Prototyp der Website, wobei grundlegende Formen und Text verwendet wurden, um die verschiedenen Elemente der Benutzeroberfläche darzustellen . Der Prototyp umfasst die Startseite, die Menüseite und die Kontaktseite. Der Designer teilt einigen Benutzern den Low-Fidelity-Prototyp mit und bittet sie, ihn zu testen. Die Benutzer geben Feedback zur Benutzerfreundlichkeit der Website. Der Designer verwendet das Feedback , um das Design der Website zu verbessern. Low-Fidelity-Prototypen, ein wertvolles Werkzeug für Designer. Sie können verwendet werden, um die Benutzerfreundlichkeit der Designidee zu einem frühen Zeitpunkt des Designprozesses zu testen die Benutzerfreundlichkeit der Designidee zu einem frühen Zeitpunkt und Feedback von Benutzern und Stakeholdern zu erhalten . Dies kann dazu beitragen, das Design des Endprodukts zu verbessern und sicherzustellen , dass es benutzerfreundlich ist. 4. 04 Figma-Einführung neu: In dieser Lektion werden wir ein Figma-Konto erstellen und uns mit dem Figma-Tool vertraut machen Wenn Sie bereits ein Konto bei Figma erstellt haben, können Sie diese Lektion überspringen Lass uns damit anfangen. Klicken Sie auf Get Figma kostenlos. Verlinken Sie auf die Beschreibung, und Sie werden zu dieser Seite weitergeleitet Klicken Sie auf dieser Seite auf die Schaltfläche Erste Schritte. Klicken Sie auf diese blaue Schaltfläche Jetzt kostenlos starten. Klicken Sie dann auf Weiter mit Google und melden Sie sich mit Ihrer E-Mail-Adresse an. Nachdem Sie sich angemeldet haben, erhalten Sie eine Bestätigungs-E-Mail an Ihr E-Mail-Postfach. Schließen Sie den Bestätigungsvorgang ab und schon kann es losgehen. Ich habe bereits ein Figma-Konto. Ich werde es öffnen. Okay, jetzt bin ich auf meinem Figma-Konto. Also werde ich auf diese Schaltfläche für die Designdatei klicken. Dann bin ich beim Figma-Tool. Als ersten Schritt werde ich hier klicken und diese Fima-Designdatei umbenennen Ich werde es in Wire Frame umbenennen. Auf der linken Seite finden wir dann Werkzeuge wie Rahmen und Formen verschieben, Stift und Bleistift, Text und Werkzeuge, mit denen wir Prototypen und Drahtgitter entwerfen können. In Ihrem rechten Schild sehen Sie den Bereich Properties Fane Prototype Als ersten Schritt erstelle ich einen Rahmen Dazu klicke ich auf dieses PM-Symbol. Hier kann ich die Größen der Prem sehen. Wenn Sie eine Website entwerfen möchten, können Sie die Größe auf dem Schreibtisch der Version auswählen Oder wenn Sie ein mobiles Labor einrichten möchten, können Sie die Telefongröße auswählen. In diesem Fall wählen wir das Design für die Telefongröße aus. Dazu klicke ich auf diese Telefongröße und wähle einen Rahmen mit dem Namen Android Small aus. Also hier ist unser Frame, und wir können den Frame umbenennen, wie wir wollen. Ich mache es einfach wie zu Hause, und dann können wir hier die Wengenhöhe ändern, wir können Ecken hinzufügen und wir können noch viel mehr Dinge tun. Bei der Konstruktion von Drahtgittern werde ich all diese Optionen durchgehen. Im Moment werde ich nur ein paar Formen erstellen. Ich klicke auf das kleine Pfeilsymbol im Formwerkzeug und wähle eine rechteckige Form aus. Und drücke die Umschalttaste und erstelle ein Rechteck. Lass uns 200 machen und es ist 200, dann mache ich es in die Mitte. Als Nächstes klicke ich hier und klicke auf Line. Dann drücke ich die Strg-Taste und zoome mit dem Mausrad hinein. Dann klicke ich hier und drücke Shift. Dann ziehe die Linie hierher und lege sie so ab. Dann klicke ich auch auf die Linie und dann auf Shift und dann hier. Dann tuppe es wie zuvor. Und hier ist ein einfaches Design, das wir erstellen. Jetzt wähle ich diese beiden Linien auf dem Strich aus. Ich mache den zweiten Strich, okay? Dies ist eine einfache Drahtrahmenform , die das Bild unseres Designs darstellt. 5. Erstes Wireframe für die Gmail-App entwerfen: Hallo alle zusammen. Es ist Zeit, unseren ersten Drahtrahmen herzustellen. Der einfache Weg, Wireframes zu erstellen und zu üben die Nachahmung der Benutzeroberfläche einer App oder Website Wir können Screenshots von Apps und Websites erstellen und Wireframes für diese Oberfläche entwerfen Ich habe bereits vier App-Schnittstellen. Ich werde sie einfach per Drag & Drop auf das Sigma ziehen, und das sind die Gmail-App-Oberfläche und Youtube Studio-App-Oberfläche und die Instagram-App-Oberfläche Dann ist hier die verlinkte App-Oberfläche. Beginnen wir mit dieser Mail-App-Oberfläche. Ich ziehe es einfach hierher und öffne es so. Sie finden dieses Interface-Design im Ressourcenbereich der Klasse. Jetzt werde ich einen Rahmen erstellen. Einfach hier klicken. Jetzt werde ich hier das Android Large Size auswählen. Siehst du es? Dann werde ich die Größe dieser Mail verringern. Interp. Klicken Sie einfach auf die Ecke und drücken Sie Shift Dann können Sie die Größe reduzieren , ohne das Design zu beeinträchtigen. Okay, und jetzt werde ich diesen Frame in App Wire Frame umbenennen . Okay, jetzt müssen wir diesem Rahmen ein Layoutraster hinzufügen damit das Layout leicht gesteuert und unsere Komponente hinzugefügt werden kann . Dazu klicke ich auf den Rahmen und dann auf Layoutraster. Klicken Sie einfach auf dieses Pluszeichen, dann hier und machen Sie es zur Spalte. Und ich lasse die Spalten als vier zählen und die Dachrinne wird zehn sein Außerdem werde ich diesem Rahmen einen Rand von zehn hinzufügen. Okay, jetzt können wir diese Linien bestimmen und das Design erstellen. Ich werde das Design so erweitern. Und fangen wir an, den Drahtrahmen zu entwerfen. Als ersten Schritt klicke ich auf das Dreieck und erstelle ein Dreieck wie dieses. Weil wir diese Suchleiste mit diesem Hamburger-Menü erstellen diese Suchleiste mit diesem Hamburger-Menü Dann haben wir schon die Farbe als Aschefarbe und ich werde sie behalten Da es sich um ein Drahtmodell mit geringer Genauigkeit handelt, müssen wir weder die Ecken ändern noch Grafiken zu diesem Drahtmodell hinzufügen Wir müssen nur die Grundstruktur des Mail-Labors erstellen die Grundstruktur des Mail-Labors Dies ist das Textfeld, und ich werde hier klicken und auf Ellipse klicken Dann drücke ich Shift und mache eine Ellipse wie diese. Ich werde es etwa 30 mal 30 machen, einfach die Shift erneut drücken und die Größe ändern, indem ich mit der linken Maustaste klicke und die Größe ändere Dann werde ich die Farbe so ändern, dass sie dieser Farbe entspricht. Und bring es so her. Das ist ein Benutzersymbol. Ich werde es wie ein Benutzer machen. Dazu klicke ich auf Ellipse und erstelle eine weitere Ellipse wie diese und erstelle eine weitere Ellipse wie Das ist der Kopf des Benutzers. Ich werde die Zahl erhöhen, indem ich die Befehlstaste drücke und das Mausrad benutze. Das ist also der Kopf des Benutzer-Avatars. Ich werde erstellen, lassen Sie uns eine Polygonform erstellen und ein Rechteck wie dieses Dann werde ich die Ecken reduzieren. Ich werde hierher gehen und die Ecken auf Zeile drei reduzieren. Okay, lass es uns ein bisschen größer machen. Okay. Hier sind die zwei Formen des Benutzer-Avatars mit Tempo und Shift Und gehe zur Mitte der horizontalen Linie. Und klicke darauf. Es ist schon so zentriert. Okay. Das ist das Benutzersymbol. Dann haben wir das Hamburger-Menü. Also gehe ich hierher und klicke auf die Zeile. Dann klicken Sie auf die Umschalttaste und machen Sie das Hamburger-Menü so Wenn ich die Shift nicht ausgewählt habe, die Linie nicht horizontal, also muss ich die Shift auswählen Und okay. Dann werde ich den Strich vergrößern, die Linie auswählen und einen Strich hinzufügen, um , okay, das Design zu vergrößern. Drücken Sie dann alle zehn, klicken Sie auf die Linie und gefällt mir das. Machen wir es so und wählen Sie alle diese Zeilen aus, indem Sie auf Shift klicken und mit der linken Maustaste klicken. Und klicken Sie auf die Option Mehr. Und klicken Sie auf Vertikalen Abstand verteilen. Okay, jetzt ist es vertikal zentriert. Und jetzt haben wir das Hamburger-Menü und wir haben das Avatar-Symbol Jetzt müssen wir diesen Text hinzufügen. Wir können diesen Text hinzufügen, indem wir einfach ein Rechteck wie dieses hinzufügen und Farben hinzufügen. Fügen wir dieselbe Farbe hinzu. Klicken Sie einfach auf dieses Symbol und dann hier. Das wird der Text sein. Oder ich kann einfach Suche in Mail eingeben. Ich werde hier die Suche in E-Mail hinzufügen. Es wird detaillierter sein. Klicken Sie auf diesen Text, ich kann, und klicken Sie hier. Fügen Sie dann die Suche in E-Mail hinzu. Okay. Jetzt ziehe ich es hierher und lege es dort ab. Klicken Sie auf den Text und dann auf den Text Feel. Machen Sie daraus dann eine Linie mit vertikaler Mitte. Wenn ich will, kann ich das Telefon und die Telefongrößen ändern, aber das ist okay für mich. Und jetzt werde ich diesen zweiten Text hinzufügen. Also klicke ich hier und klicke auf Alt. Dann klicke ich mit der linken Maustaste und dubligated. Dann lege ich es hier hin und ich klicke auf Alt und drüber über dieses Textfeld Und ich werde den Raum auf 15 setzen. Dann werde ich diese beiden machen. Und lass uns fett machen, lass es uns halbfett machen Jetzt können wir dieses E-Mail-Element hinzufügen. Dazu klicke ich auf E und erstelle eine Elise wie diese Dann werde ich ein Rechteck erstellen. Dies wird der Titel der E-Mail sein, die ich erstelle. Klicken Sie einfach hier und klicken Sie auf Ava. Ich werde in der Farbe dieser Farbe sein. Dann werde ich hoch. Also werde ich dieses Dreieck duplizieren und hoch einstellen , um es so größer zu machen, und es auf zwei ändern. Und dann können wir eine weitere Zeile hinzufügen. Lassen Sie uns beide hervorheben und zehn daraus machen. Jetzt werde ich all diese Texte auswählen und sie so runterbringen. Dann muss ich zu dem Zeitpunkt, um das zu tun , einfach einen kopieren und einfügen. Dann mach es so, dass dieses Rechteck außerhalb des Rahmens ist. Also werde ich auf das Rechteck klicken und es wieder in den Rahmen bringen , es zentrieren. Dann haben wir diese Staletta 15, 15. Ändere die Farbe in Farbe. Okay, jetzt markiere oder wähle ich all diese Formen aus und drücke Befehlstaste und es wird eine Gruppe. Dann werde ich alle Dubliatedy-Drachen so drücken. Ich nehme Platz 20. Lass uns den Raum 20 machen. Und ich hebe drei dieser Komponenten hervor und mache es so, ich denke, wir können mehr Platz hinzufügen. Fügen wir 30 hinzu. Dann werde ich diese drei hervorheben und sie so duplizieren. Okay, jetzt werde ich diesen entfernen. Dann haben wir eine Fußzeile. Lass uns eine Fußzeile machen. Klicken Sie auf Rechteck und erstellen Sie ein Rechteck wie dieses. Ich füge die 40 hinzu, lass uns 50 daraus machen. Okay. Und jetzt haben wir diese beiden Icons. Fügen wir einfach einen Gesichtshalter hinzu. Dieser wird hier sein. Und ändere die Farbe in das Dunkelblau. Und duplizieren Sie es einfach. Okay. Hier haben wir das Low-Fidelity-Postkabel. Bete. Im nächsten Video werden wir nun ein etwas komplexes Video erstellen. Wir werden es für Youtube Studio erstellen. 6. 06 Zweiter Wireframe: Okay, jetzt erstellen wir das Wireframe für Youtube Studio. Ich werde mir diese Youtube Studio-Oberfläche hier schnappen, dann auf den Frame klicken und dann auf Android Small klicken Dann reduziere die Größe dieser Schnittstelle. Okay, dann benenne den Frame in YT Studio Wire Frame um. Dann werde ich das tolle Layout hinzufügen. Einfach hier klicken und auf Spalten klicken. Dann sind vier Spalten, zehn und der Rand zehn Okay, lassen Sie uns jetzt den ersten Teil als ersten erstellen, wir haben das YouTube-Studio-Logo, dann haben wir diesen Upload-Button und dann das Benutzerlogo Lass uns hier klicken. Lassen Sie uns ein Rechteck wie dieses erstellen. Ich werde dafür sorgen, dass es 60 hat, dann füge ich Text Studio hinzu. Sie dann das Telefon auf Bolzen um und vergrößern Sie das Telefon auf diese Weise. Machen Sie es zentriert. Klicken Sie dann wie folgt auf das Ellipse-Symbol. Lass uns 20 mal 20 draus machen. Lassen Sie uns die Farbe auf dunkel ändern, da wir ein anderes Symbol haben. Dann haben wir das Profilsymbol. Ich werde alle auf der Ablage anklicken , sie hier so. Ich werde Avatar machen. Um das zu tun, werde ich die Größe erhöhen und hier klicken. Dann erstelle die kleinen Lippen so. Dann eine rechteckige Form. Und dann an einigen Ecken wie diesem ein Rechteck erstellen. Okay, lass es uns ein bisschen größer machen. Es ist nicht das Zentrum. Versuche, es so zentral wie möglich zu machen. Okay. Dann haben wir diesen Kanalnamen und das Abonnentenkonto und das Kanallogo. Lassen Sie uns zuerst das Kanallogo erstellen. Lassen Sie uns so erstellen, klicken Sie dann auf das Dreieck und hier ist der Kanaltitel. Dann klicken Sie auf Text und fügen Sie den Abonnenten hinzu, berechnet etwa 10.000. Machen wir es ein bisschen größer Dann haben wir einen kleinen Text mit der Gesamtzahl der Abonnenten. Lassen Sie uns es hervorheben und den Text auf mittelgroß machen und den Text verkleinern. Okay, lassen Sie uns alle drei Objekte hervorheben. Und klicken Sie auf Command. Klicken Sie hier und dann auf eine vertikale Linie. Okay, jetzt ist der zweite Teil abgeschlossen, und jetzt haben wir den dritten Teil. Um es zu erstellen, klicke ich auf den Text, oder ich kann den Text einfach von hier kopieren. Ich werde einfach über diesen Text klicken und auf den Text klicken und ihn hier einfügen. Lassen Sie uns den High-Test auf 20 machen und die Größe auf mittel einstellen und die Schriftgröße reduzieren. Machen wir es zur Halbpension. Okay, dann wird der Text Channel Analytics sein. Dann haben wir zwei Boxen, wir haben Text hier. Lassen Sie uns diesen Text bloggen, indem wir ihn anklicken und ziehen. du die Taste gedrückt hältst, wird der Text letzten 28 gesetzt und markiert Verkleinern Sie das Textmedium. Okay, und leg es hier hin. Klicken Sie dann auf den Text und machen Sie ihn vertikal zu einer Linienmitte. Okay, jetzt haben wir zwei Boxen, die ein Dreieck wie dieses bilden. Nehmen wir die Größe auf 125 mal 60 an. Der Text wird sein. Lass es uns hier hinstellen. Der Text wird sein, ich werde diesen Text duplizieren. Lass uns 635 daraus machen und es markieren. Dann müssen wir die Größe erhöhen, 16. Okay, und es, lächle es 50. Okay, und duplizieren Sie das und legen Sie es hier so hin. Okay. Markieren Sie dann alle diese Abschnitte. Und drücken Sie den Befehl G, um es zu gruppieren. Dann duplizieren Sie es, indem Sie alle zehn drücken es zur rechten Seite bewegen Dann wird dieser Test auf die Wiedergabezeit umgestellt. Okay, wenn wir wollen, können wir einfach diese Symbole hinzufügen. Wir können auf den Pfeil klicken und ihn vergrößern und ihn dann so hinzufügen. Und wir können den Pfeil nach Belieben anpassen. Mach es so. Ich werde Dublgatetre diese Mid-Fidelity machen können, aber Low-Fidelity reicht aus, um sich ein Bild vom Design zu machen Wir vergessen, das Avatar-Logo hier hinzuzufügen. Ich werde hier klicken und die Farbe ändern und das Avatar-Logo hinzufügen. Außerdem können wir ein Avatar-Logo wie dieses hinzufügen. Drücken Sie einfach die Ellipse und erstellen Sie den Kopfteil. Klicken Sie dann auf die Linie an der Linie wie dieser und ändern Sie dann die Farbe in diese Erhöhen wir den Strich, machen wir ihn zentriert. Klicken Sie dann erneut auf die Linie an der Hand. Dupliziere die Hand so. Das ist eine andere Art von Avada. Okay, jetzt haben wir diesen Bereich mit den neuesten veröffentlichten Inhalten. Lass uns hier klicken und duplizieren. Machen wir 20 veröffentlichte Inhalte daraus . In Ordnung. Dann erstelle eine Box. Erstellen Sie ein Rechteck wie dieses. Und die Größe wird 340 mal 160 sein. Jetzt haben wir hier das Video-Thumbnail und die Video-URL. Dann, wenn wir das Video erstellen, werde ich die Farbe auf diese Farbe ändern Lass uns die Farbe so ändern. Dann klicken Sie hier und zwei Linienbilder werden immer als Bild als Feld und das Kreuz so angezeigt . Dann haben wir den Text. Um Text zu erstellen, kann ich Linien verwenden. Klicken Sie hier und hier ist der Titel. Dann werde ich die Größe auf E T erhöhen . Verkleinern wir die Farbe auf diese Farbe. Dann haben wir den zweiten, der zweite Text wird sein, er ist kleiner und er wird so aussehen. Dann haben wir eine Zeile wie diese. Ich werde die Farbe auf helle Farbe reduzieren. Okay, jetzt haben wir die kleinen Icons. Fügen wir diese Symbole hinzu. Erstellen Sie einfach die Ellipse so und ändern Sie die Lippenfarbe in diese Farbe. Okay? Dann haben wir etwas Text. Ich werde den Text von hier aus duplizieren. Dann muss ich es an die Vorderseite des Rahmens verschieben und es werden sechs sein. Dann eins, lass uns zwei draus machen, lass es uns vortäuschen. 21, 61, 60. Okay, großartig. Und jetzt haben wir diese anderen Texte. Fügen wir also diese Texte hinzu. Also werde ich den Text kopieren und hier einfügen. Ich werde diese Texte schnell hinzufügen. Jetzt werde ich diese Texte wie diese hinzufügen. Okay, lassen wir es vertikal zentrieren und all diese Symbole zusammenstreichen und daraus eine Linie machen, richtig? Okay, jetzt haben wir die Kiste. Lass uns die Box so gestalten, dass sie dir gefällt. Dann werde ich diesen Inhalt verbindlich festlegen. Ich kann all diesen Inhalt verpflichten und ihn hier hinzufügen. Sie können dasselbe tun oder Sie können es von Grund auf neu erstellen. Ich werde all diese Inhalte hervorheben und sie einfach hier einfügen dann ungefähr so gestalten. Okay, lassen Sie es uns so sagen und nett, finden Sie heraus, wo. Okay, nett. Jetzt müssen wir den Button-Teil hinzufügen, um das zu tun Ich werde das Design einfach etwas vergrößern, so wie hier. Wenn ich es erhöhe, klicke ich einfach auf den Befehl und dann auf die Ecke und vergrößere die Crew. Wir haben einige Links oder Buttons, die eine Ellipse bilden. Das ist das N. Lassen Sie uns die Farbe auf diese Farbe ändern und diesen Text hier duplizieren diesen Text hier dann im Text-Dashboard Lassen Sie uns es dann im Text-Dashboard hervorheben und etwas kleiner machen . Stellen Sie es auf die Größe neun ein. Okay, das Duplikat des Textes, wir müssen es viermal 1234 duplizieren , okay? Und der nächste wird zufrieden sein. Und der nächste nimmt die letzten Kommentare entgegen, nicht den letzten. Der vierte Kommentar und der fünfte heben so hervor. Und es drückt auch Command by. Sehen Sie es in der Komponente. So können wir es gruppieren, es in die Mitte legen und dann die Befehlstaste drücken und dann die Befehlszentrale drücken. Dann werde ich es machen, ja, ich werde auf all diese Inhalte klicken und dann hier klicken. Und klicken Sie auf Verteilen, Horizontaler Abstand. Es wird so aussehen. Hier ist der letzte Drahtrahmen. Im nächsten Video werden wir das für Instagram erstellen. 7. 07 Drittes Wireframe: Okay, jetzt werden wir einen Low-Fidelity-Drahtrahmen für Instagram entwerfen Low-Fidelity-Drahtrahmen für Instagram Ich werde dort eine Instagram-Vorlage hinzufügen. Dann werde ich einen Rahmen erstellen. Ich werde die Beutemasse, Android Small, auswählen und sie erstellen. Dann werde ich den Namen in Instagram ändern. Okay, jetzt füge ich das Layoutraster hinzu. Das Layoutraster wird Spalten bestehen und wir werden vier Spalten hinzufügen, dann werden es zehn sein. Und wir fügen den Rand als Zehn hinzu. Okay, jetzt werde ich ein Dreieck wie dieses erstellen. Es macht 50. Dann werde ich schnell den Kontext eingeben, ich kann den Text hinzufügen. Dieser Text wird, mach ihn fett. Okay, dieser Teil ist erledigt. Lassen Sie uns nun diese drei Symbole oder diese drei Schaltflächen erstellen . Wir können also einfach Blätter hinzufügen , um diese Symbole zu erstellen. Ändert die Farbe in helldunkelgrau. Schmieren Sie es so. Okay, die Liste der drei, dann bring sie her. Okay, jetzt müssen wir diese vier At-Icons erstellen. Lassen Sie uns die Lippenform erstellen und dann eine Ellipse wie diese erstellen Lass uns 80,80 draus machen, okay. Dann mach es hier. Machen wir zehn, schaffen wir es bis dahin. Okay. Dann füge ich einfach Lippen hinzu, die den Kopf des Benutzers repräsentieren , und erstelle ein Polygon Lass es uns so machen und die Farbe ändern Weiß und eckig wie das. Machen wir es ein bisschen größer. Ich kann eine weitere Ellipse erstellen, sie ist etwas größer wie diese Lassen Sie uns die Farbe auf Weiß ändern. Es gibt viele Möglichkeiten das zu mögen. Okay. Dann habe ich Dubois, bevor ich es dupliziere, werde ich es vorher hervorheben und es dann so synchronisieren Okay. Irgendwas stimmt nicht. Das ist ein bisschen größer. Machen wir es kleiner, machen wir das alles und richten es richtig aus . Dann werde ich einfach ein Dreieck und ein Dreieck wie dieses erstellen . Dies werden die Namen der Benutzernamen von Instagram überall hier überall sein. Ich werde Text als Story, Story hinzufügen und ihn markieren und ihn dann erstellen. Normal und per Funk die Telefongröße auf 14, 14 ist besser. Lass es uns hier hinstellen. Ich werde diesen Text an den Text der Geschichte anpassen. Markieren Sie all diese Texte. Und einfach hier klicken und richtig ausrichten. Okay, dann müssen wir diesen Teil erstellen. Um das zu tun, klicke ich einfach hier und klicke auf Line. Drücken Sie dann die Umschalttaste und erstellen Sie eine Linie wie diese. Das ist die Linie, die ich erstellt habe. Jetzt haben wir das Low und den Namen. Klicken wir auf einen dieser Benutzer und drücken Sie alle zehn. Zieh es so. Jetzt werde ich es kleiner machen. Lass es uns hier ausrichten. Okay. Und jetzt duplizieren Sie das einfach, indem Sie sich allen zehn stellen. Klicken Sie mit der linken Maustaste, und hier ist der Name des Instagram-Followers Dann haben wir das Bild, um ein Bild zu erstellen, direkten Winkel zu erzeugen und ein Bild wie dieses Lass uns 60 draus machen. Klicken Sie nun auf die Zeile und erstellen Sie eine Linie wie diese. Das ist nur eine geringe Genauigkeit, wir können Usability-Tests mit diesen Us durchführen, wir müssen nur diese Drahtgitter in Prototypen umwandeln. Nachdem wir das geübt haben, werden wir Wireframes für unsere eigene App entwerfen. Dann werden wir es in einen Prototyp umwandeln. Okay, jetzt haben wir hier 123,44 Buttons oder Icons. Und hier ist ein Symbol. Klicken Sie auf diese drei Symbole und duplizieren Sie sie auf dieses Okay? Okay. Jetzt ist es okay. Dann verbinde einfach diese Textzeile und das ist die Zählung und das ist das Datum Eigentlich können wir, wenn wir wollen, einfach Text hinzufügen, aber im Moment füge ich nur diese beiden Zeilen wie diese Dann haben wir das unten, das ich einstellen kann Lassen Sie uns das erstellen um nur die Oberfläche zu vergrößern. Dann klicken Sie hier, klicken Sie auf Conectan. Erstellen Sie ein Rechteck wie dieses. Und dieser Teil ist einfach. Lassen Sie uns diese vier Elemente kopieren und hier ablegen. Dann schicke ich es per Frame-Frame nach oben auf Instagram. Jetzt haben wir fünf Artikel. Ich werde diesen verschicken, dann schicke ich ihn hierher Und ich werde das auch an Corner schicken und all diese Artikel auswählen und hier klicken Klicken Sie dann auf Horizontalen Abstand verteilen. Es wird so aussehen. Und jetzt haben wir erfolgreich den Instagram-Drahtrahmen erstellt. Okay, wir erstellen drei Drahtrahmen. Jetzt bist du dran. Erstelle es einfach. Im nächsten Video zeige ich Ihnen, wie Sie es erstellen können. 8. 08 4. Wireframe: Okay, jetzt werden wir ein Drahtgitter für Linked In erstellen Ich hoffe du bist bereit. Erstellen Sie den Drahtrahmen. Folgen wir dem Schritt. Ich werde es hier so platzieren. Dann klicke ich auf Frame und erstelle einen kleinen Android-Frame. Okay, lassen Sie uns es etwas größer machen, damit wir diese beiden Abschnitte einfach so vergleichen können . Okay, dann ändere ich den Namen in Link in Wire Frame. In Ordnung, lassen Sie uns zuerst mit dem Design beginnen. Ich werde einfach hier klicken und auf Lives klicken. Bevor wir das tun, müssen wir das Layout hinzufügen. Dazu klicke ich auf den Rahmen und dann auf den Plus-Zyklus. Klicken Sie hier, dann setzen Sie die Anzahl der Spalten auf vier, dann ergibt das zehn, der Rand wird zehn sein. Tatsächlich können wir das Layout speichern. Wenn du einfach auf die vier Punkte und dann auf dieses Plussymbol klickst, erhältst du das von uns erstellte Raster und ich benenne es einfach nach Grid und klicke auf Create Style. Wenn ich einen neuen Rahmen erstelle, lassen Sie uns einen neuen Rahmen für das iPhone 8 erstellen. Und wenn ich das Rasterlayout hinzufügen möchte, klicken Sie einfach hier und klicken Sie darauf, um das Layout mit vier Rastern hinzuzufügen. Figma bietet Funktionen zum Speichern von Rastern, da Sie Farben und andere Schritte speichern können Lassen Sie uns nun mit dem Design beginnen. Als ersten Schritt werde ich auf Ellipse klicken und die Ellipse erstellen Es ist für dieses Avatar-Symbol. Machen wir 40. 40 mal 40. Und mach 22 Stück draus. Machen Sie 12 Stück weit draus. Okay, machen wir es zehn mal zehn. Okay, jetzt müssen wir ein Rechteck erstellen. Dieses Rechteck ist für die Suchleiste, also machen wir es auf Größe 30. Ich werde einfach den Text mit dem Namen Suche hinzufügen. Dann lassen wir in diesem Chat kleine Lippen wie diese erstellen und sie hier hinzufügen. Okay, der erste Teil ist fertig dann werde ich hier eine Zeile erstellen. Dann haben wir die Benutzerdaten erstellt. Überlässt uns das bei Lass es uns erstellen, lass es uns 50 mal 50 machen. Machen wir es etwa 70 mal 70. Okay. Klicken Sie dann auf eine Linie und erstellen Sie eine Linie. Das ist der Name. Ich werde fünf daraus machen. Machen wir acht draus. Dies ist der Name des Benutzers, der dies zuerst teilt. Und wir haben den Beruf oder die Berufsbezeichnung des Benutzers, machen Sie es so. Und machen wir es auch, und wir haben die Zeit, die diese Person zuerst teilt. Machen wir es so. Okay, mach es, drücke einfach die Strg-Taste , um es zu gruppieren und lass es uns senden. Okay, jetzt haben wir die Beschreibung dieses Beitrags. Ich werde einfach hier klicken und das schmieren. Dies ist die Beschreibung von. Ich werde weitere Details wie diese hinzufügen. Dann müssen wir dieses große Fett erschaffen, erschaffen, so schnell erschaffen. So wie das. Machen wir 340 mal 340, okay. Erstellen Sie dann eine Linie wie diese und erstellen Sie eine weitere Linie. Okay, dann haben wir die Anzahl der Befehle. Kreiere kleinere Lippen wie diese. Dann erscheint hier die Anzahl der Befehle, 125. Nicht mitzählen, sondern zählen. Okay. Dann haben wir eine horizontale Linie. Jetzt haben wir einen Button und einen Come-In-Knopf. Lassen Sie uns den Button hier erstellen, 30 mal 30. Dann wurde der Text mit „ Gefällt mir“ bezeichnet und dupliziert, indem Putin ausgewählt und kopiert Also ja. Okay. Jetzt haben wir den Boden. Lass uns kreieren. Bevor ich es erstelle, verringere ich einfach die Größe. Wählen Sie dazu den Drahtrahmen aus und klicken Sie auf Befehl Ändern Sie die Größe des Drahtgitters, klicken Sie auf diese Weise und erstellen Sie das Menü Dann haben wir 12345 Artikel. Ich werde einfach eines davon verpflichten und es in die Mitte stellen, die Farbe auf Dunkelgrau ändern Dann kopiere ich auch den Text und schicke ihn nach oben. Dann mach den Text wie Zuhause. Okay, um diese Gruppe dann durch Drücken der Befehlstaste zu erhalten diese Gruppe , lassen Sie uns bei der Schriftgröße bleiben. Okay? Lass sie zentrieren den horizontalen Abstand verteilen. Okay, hier ist der Drahtrahmen mit geringem Nutzwert zum Anschließen. In der nächsten Lektion werden wir uns mit der Erstellung eines Drahtrahmens für eine App befassen. 9. 09 Einführung in die Erstellung eines Wireframes für eine App: Okay, jetzt ist es an der Zeit, Wireframes für unsere eigene App zu entwerfen Wir werden eine App für die Lieferung von Lebensmitteln für ein Café entwerfen. Um dies zu tun, müssen wir Benutzerforschung betreiben und Personas erstellen Nutzerberichte, Nutzerforschung betreiben und uns in die Nutzer hineinversetzen und Wettbewerber prüfen um Informationen für die Gestaltung unserer App zu sammeln Es ist ein Prozess, den wir im UX-Design durchführen müssen. Aber hier konzentrieren wir uns nur auf das Design von Drahtrahmen. Ich mache bereits die Konkurrenzanalyse. Und fangen wir an, die Drahtkinderwagen zu bauen. Ich werde mich in mein Ima-Konto einloggen. Jetzt werde ich auf diese blaue Schaltfläche für die Designdatei klicken und ein neues Projekt erstellen. Dann nenne ich dieses Projekt Food Delivery App. Fangen wir an, den Draht Pm zu entwerfen. Dann werden wir diese Drahtkinderwagen in Fototypen umwandeln. Lassen Sie uns im nächsten Video mit dem Design von vorne beginnen. 10. 10 Entwurf einer Startseite für ein App-Design: Beginnen Sie mit dem Startbildschirm, ich klicke auf das Spraysymbol und wähle Android Large Size Jetzt werde ich diesen Text auf Startseite ändern. Dann werde ich Layout Grid hinzufügen. Klicken Sie hier und unser Raster wird zur Spalte. Dann haben wir vier Spalten, und die Dachrinne wird zehn sein, Rand wird zehn sein Okay. Dann klicke ich hier, um dieses Raster, diesen Stil, zu speichern. Und klicke hier auf den Namen. Lass uns gehen, okay. Jetzt fange ich mit dem Menü an. Klicken wir auf Triangle und wir werden ein Hamburger-Menü haben. Macht drei, dann Dublicatese. Hi, ich habe von ihnen erzählt. Und ändere die Farbe, um sie dunkler zu machen. Dann werde ich sie gruppieren. Jetzt werde ich hier ein Benutzersymbol erstellen, um das zu tun. Erstelle eine Ellipse. Dann lassen Sie uns einen Avatar erstellen, eine weitere Ellipse erstellen. Und Shift, das wird der Kopf sein. Wechseln wir zu Weiß und verdoppeln das, indem wir die alte Zehn drücken, es etwas nach unten ziehen und es dann vergrößern Okay, jetzt haben wir ein bisschen größer. Jetzt werde ich hier einen Überspannungsbalken einrichten, weil wir einen Überspannungsbalken brauchen , um Lebensmittel im Café zu suchen. Auf diese Weise werden wir in der Lage sein, das beste Essen zu finden. Dann werde ich Radio Corners benutzen, fünf machen, okay? Und klicken Sie hier. Dann klicken Sie auf Elipslipsn. Ändere die Farbe auf diese Farbe. Fügen Sie tatsächlich Only Eat Rock hinzu, klicken Sie hier und drei als östliche Strichstärke. Ich erstelle einfach ein Suchsymbol. Es werden die drei sein. In Ordnung, jetzt werde ich es hervorheben. Und lass es uns gruppieren. Ich werde das weiter gruppieren, der erste Teil ist abgeschlossen. Im nächsten Teil werde ich einen Abschnitt für die Kategorie erstellen. Klicken Sie auf diesen Text, klicken Sie hier, und dieser Test besteht aus Kategorien. Ich hoffe, die Worte sind richtig. Und lass es uns krachen lassen. Wenn Sie möchten, können Sie den Text ändern, aber ich verwende Standardtext. Das ist viel später. Lassen Sie uns den Standardtext verwenden. Okay. Jetzt werde ich Boxen mit vier Kategorien erstellen und ein Rechteck wie dieses erstellen. Klicken Sie dann auf die Zeile Bild erstellen. Das ist ein Bild. Ich werde diesen Text verbindlich angeben und die Größe auf 11 ändern , um mittelgroß zu sein Okay. Machen Sie es in die Mitte. Dieser Text wird Daily Specials sein. Tagesangebote, ich werde all dieses Getöse hervorheben. Und es wird eine Gruppe werden. Dann wieder Blibli, wieder Ubd Ubd Dann werde ich sie alle hervorheben und daraus eine Linie machen, die vertikal zentriert ist Okay, es ist ein Text. Okay. Getränke werden immer noch Mahlzeiten sein. Okay, unsere Kategorien sind abgeschlossen. Dann werde ich einfach hier sein und den Abstand ändern. Füge den Abstand als hinzu, dann füge ich den Abschnitt „Foul Foot“ hinzu. Um das zu tun, verbinde den Kategorieteil und füge Lebensmittel hinzu Okay, wir können diesen Text vervollständigen. Eigentlich können wir einfach eine Zeile in diesen Text einfügen. Um das zu tun, klicken Sie auf die Zeile und das ist der Titel des T. Dann können wir hinzufügen, diesen holen. Jetzt können wir den Preis hinzufügen. Ich werde einfach Dollar hinzufügen. Dann muss ich diese Artikel richtig gruppieren. Liedgruppe acht. Okay. Da wir Sterne-Bewertungen hinzufügen können, fügen wir Sterne-Bewertungen hinzu. Erstellen Sie einfach ein, vielleicht können wir ein Polygon verwenden, um eine Gruppe zu erstellen Es reduziert die Zeichen im Feldkern auf Schwarz. Im Moment können wir das duplizieren. Jetzt müssen wir empfohlene Lebensmittel hinzufügen. Dupliziere einfach diesen. Okay, wir können den Abschnitt mit beliebten Lebensmitteln duplizieren, um ihn hinzuzufügen. Hier können wir weitere Artikel hinzufügen, aber jetzt wollen wir diese Artikel hinzufügen. Jetzt klicke ich auf die Befehlsschaltfläche und ändere die Größe des Rahmens. Dann füge ich das Rechteck hinzu und erstelle hier einen Schaum. Ich werde auf Rechteck klicken und die Home-Schaltfläche erstellen, sodass sie oben in der Mitte liegt. Ich werde den Textnamen der App hinzufügen. Ich werde einfach den Fuß von Smolt 20 setzen. Ich werde es in den Mittelpunkt stellen. Jeder einzelne Rahmen muss einen Namen haben , denn wenn wir diesen Fototyp machen, müssen wir verstehen, in welchem Rahmen wir uns befinden. Ich denke, das ist größer. Lass uns die Höhe auf okay ändern . Sieht gut aus. Ich werde es so etwas kleiner machen. Jetzt müssen wir hier hinzufügen. Ich werde das auf duplizieren. Dies ist eine Lücke bei der Lieferung von Lebensmitteln. Wir müssen eine Karte haben. Lass uns ein Auto bauen. Erstellen Sie ein Rechteck wie dieses. Ändere es in weiße Farbe, mache es zentriert. Doppelklicken Sie hier, dann doppelklicken Sie auch hier. Okay. Und jetzt klicke ich auf Lives und füge einfach die Räder hinzu. Dann können wir den Griff darum herum hinzufügen . Nun, warum? Nun, gruppiere das, mach es zum Mittelpunkt, okay. Wir können die Hintergrundfarbe ändern. Wenn wir die Hintergrundfarbe auf diese Weise auf dunkel ändern, können wir die Symbole deutlich erkennen. Okay, jetzt gehen wir zum zweiten Punkt. Der zweite Artikel wird Suchseite, Seite sein. Lass es uns machen. 11. 11 Entwurf einer Suchseite für ein App-Design: Jetzt ist es an der Zeit, eine Suchseite zu erstellen. Lassen Sie uns also einen Rahmen erstellen. Und es wird Android Large Size sein. Ändern Sie den Namen des Frames in Search Foods. Okay, jetzt werde ich hier auf das Raster klicken und das Hauptraster verschieben. Jetzt können wir den obigen Abschnitt einfach von der Startseite kopieren . Ich werde sie alle markieren und auf Alle drücken und es einfach so duplizieren. Jetzt werde ich den Titel in Foods ändern. Okay. Dann müssen wir hier Foods kreieren. Vorher werde ich diesen Text duplizieren und den Text wie Burger hinzufügen und ihn mittelgroß machen. Und reduziere die Textgröße auf 14. Und leg es hier hin, okay. Es ist der Suchtext. Und jetzt füge ich das Fußergebnis hinzu. Lassen Sie uns also ein Rechteck wie dieses erstellen. Lass uns 100 machen. Okay. Verteilen Sie dann den horizontalen Abstand. Jetzt werde ich hier klicken und auf die Zeile klicken. Dann mache eine Linie wie diese und mache eine Linie wie diese. Okay? Dann werde ich sie hervorheben und duplizieren. Okay? Jetzt füge ich hier den Titel hinzu, die Bewertungen und dann den Preis. Lass uns diesen anklicken. Fügen wir den Titel hinzu. Ich werde eine Linie wie diese verschieben und erstellen. Okay? Erhöhen Sie die Größe der Linie. Ändern Sie dann die Farbe wie folgt und verkleinern Sie die Ecke oder runden Sie die Ecken ab. Dann werde ich eine Sternebewertung hinzufügen. Ich kann eine Sternebewertung erstellen oder sie einfach von der Startseite aus duplizieren. Ich werde es von der Startseite duplizieren und es einfach hier posten. Dann erhöhe die Größe 310. Dann geben wir die Rate hier rein. Und der Titel wird hier stehen. Und den Titel vergrößern, hier können wir den Preis hinzufügen. Klicken Sie einfach auf diesen und fügen Sie 11,5 Dollar hinzu . Reduzieren wir das Ok Stellen Sie es so zusammen, machen Sie es horizontal zentriert Okay, ich werde einfach diese beiden Elemente entfernen und ich kann dieses Objekt gruppieren und dann dubligieren. Lass es uns gruppieren indem wir Command drücken und es dub drücken Okay, dann markiere drei dieser Gruppen und klicke auf Jetzt werde ich die Artikel einfach so überspielen und wiederholen. Okay, sieht gut aus, dass unsere Suchseite fertig ist. Ordnung. Okay, sieht gut aus. Im nächsten Video werden wir die einzelne Produktseite erstellen , um das Produkt oder den Fuß zu präsentieren. Vorher werde ich das alles hervorheben und die Größe hier überprüfen. Hier werde ich die Größe auf 20 ändern. Okay. 12. 12 erstellende App-Design-Einzelseite für das Food-Design: Die Ein-Fuß-Phase. Dazu erstelle ich einen für Android erstellten Frame in großer Größe füge dann den Frame-Titel als einzelnen Fuß hinzu. Okay. Jetzt werde ich diesen Kopfteil kopieren. Nur der Kopfteil, markiere ihn einfach. Zehn Gesichter, eigentlich sind es alle zehn dB Bevor wir das tun, müssen wir das Raster hinzufügen. Fügen wir dieses Raster hinzu. Okay, jetzt füge ich hier ein Bild vom Essen hinzu. Es wird eine Galerie sein. Und wir werden den Titel Essen haben und wir werden Bewertungen haben. Dann werden wir den Preis haben. Danach werden wir eine Schaltfläche zum Hinzufügen haben. Wir werden ein kleines Textfeld haben, in dem wir Burger-Konten auswählen können , die wir in den Warenkorb legen möchten. Lass es uns machen. Wir werden Bewertungen und Beschreibungen haben. Fangen wir an, es zu entwerfen. Zuerst werde ich ein Rechteck erstellen. Das wird also ein Bild sein. Machen wir 200 als Höhe und 340 als Breite. Erstelle die Linie. Okay, jetzt haben wir zwei Schaltflächen, mit denen wir die Folie wechseln können. Wir werden vier Kreise haben , um das Bild zu ändern. Lass uns kleine Kreise erstellen. Wählen wir diese Farbe aus. Und es wird sechs mal sechs sein. Okay? Dann verpflichte dich. Verpflichte es. Okay. Wählen Sie nun alle aus und legen Sie sie nach oben in die Mitte. Okay, jetzt werden wir hier zwei Knöpfe haben. Lassen Sie uns diese beiden Schaltflächen erstellen, dann die Farbe auf Weiß ändern und sie hier platzieren. Vielleicht können wir die Größe erhöhen. Lass es uns duplizieren, markieren und ein eigenes Bild duplizieren. und ein eigenes Bild duplizieren. Dann lassen Sie uns den Text erstellen. Wir fügen diese Art von Text hinzu, weil der Text geändert wird, da bei der Auswahl der Fußänderung der Titel des Essens geändert wird. Aus diesem Grund werden wir keinen echten Titel erstellen, wie zum Beispiel diesem Fuß einen echten Fußnamen hinzuzufügen. Jetzt werden wir die Vorschauen und den Preis haben. Wir können die beiden einfach von hier holen. Wählen Sie es einfach aus und holen Sie es sich von hier. Tragen Sie den Preis hier ein. Erhöhen wir es auf 60. Erhöhen Sie die Größe der Bewertung, 15. Jetzt werden wir einen Button haben. Dies wird die Schaltfläche „In den Warenkorb legen“ sein. Lassen Sie uns ein Rechteck erstellen und die Schaltfläche so erstellen. Wird 40 sein, nehmen wir die Größe 130 an. Okay, jetzt werde ich diesen Text als Auto duplizieren. Lass uns diesen Text hierher schicken. Und ändere die Größe auf mittel und 60, es wird 20 sein. Wählen Sie den Text und den Rahmen zentrieren Sie ihn dann wie folgt. Dann klicken Sie hier und wir müssen die Anzahl hinzufügen. In diesem Feld wird die Fußzahl ausgewählt , die wir den Karten hinzufügen möchten. Sagen wir es so und duplizieren Sie das Drücken auf eins. Gehen Sie hier nochmal hin. Wir müssen es nach vorne bringen. Okay. Klicken Sie jetzt hier und reduzieren Sie die Ecken um fünf. Und mach das Gleiche hier. Okay, der erste Teil ist abgeschlossen. Markiere das und erhöhe es auf 15. Okay, jetzt haben wir die Beschreibung. Dann werden wir dafür sorgen, dass die Bewertungen diese duplizieren. Dies wird eine Beschreibung sein, fügen wir eine Beschreibung wie folgt hinzu. Lass uns das duplizieren. Wir haben beide Ecken abgerundet. Wir drehen nur um eine Ecke, also machen wir es mit all diesen Texten und machen es so. Okay, unsere Beschreibung ist abgeschlossen. Wenn wir möchten, können wir einfach weitere Artikel hinzufügen, die nicht erforderlich sind. Jetzt müssen wir die Vorschauen hinzufügen. Klicken Sie hier und duplizieren Sie diesen. Das werden Bewertungen sein. Okay, lassen Sie uns das Bewertungsfeld hinzufügen. Duplizieren Sie dieses Bewertungsfeld und fügen Sie es hier ein. Bring es zur Sprache. Jetzt müssen wir einen Titel hinzufügen. Ich werde diesen Titel einfach duplizieren. Lass es uns so ansprechen und die Titelgröße ändern. Lass uns zehn draus machen. Dies ist die Beschreibung der Bewertung. Lassen Sie uns die Größe so verringern. Okay, nett. Dann ändere auf dem At-Icon der Bewertung die Farbe, um einen Benutzer wie diesen zu erstellen. Ändere die Farbe auf Weiß. Dann wird dies der Name der Bewertung sein. Für diese Art von App benötigen wir nur den Namen. Ich werde diesem Ava-Center den Namen geben, okay. Dann werde ich das markieren und Steuerbefehl drücken, um es zu duplizieren. Hier ist die duplizierte Rezension. Okay, jetzt klicke ich auf den Rahmen mit einem Fuß ändere dann die Größe oder Höhe des Rahmens wie folgt Und wir müssen diesen unteren Teil hinzufügen. Ich werde es einfach hervorheben und so platzieren, als würde ich es dubrocken, wir haben eine Seite mit einem Fuß Im nächsten Video werden wir die Warenkorbseite erstellen 13. 13 Entwurf einer Warenkorbseite für ein App-Design: Die Kartenseite. Ich klicke auf einen Rahmen und wähle Android Large Size aus. Ändern Sie dann den Namen des Rahmens in Karte. Und kopiere den ersten Teil. Okay, es ist ein Rasterlayout zwei. In Ordnung. Ändere jetzt den Text auf meiner Karte und mache ihn dann mittig. Ordnung, jetzt müssen wir die Lebensmittelliste hinzufügen , die wir ausgewählt haben oder die der Benutzer ausgewählt hat. Klicken Sie hier, und das wird das Bild des Essens sein. Machen wir eine 60 und dann eine Linie. Jetzt haben wir den Titel und die Pommes und wir werden einen Textstapel haben, und wir werden einen Textstapel haben um die Anzahl der Artikel des Essens zu ändern. Lassen Sie uns den Titel erstellen. Jetzt müssen wir die Pommes hinzufügen. Wir müssen die Textpille zur Essenszählung hinzufügen. Dann duplizieren Sie das. Nun ist die Anzahl der Lebensmittel ausgewählt, die ein Benutzer für mehrere Artikel benötigt, er kann dies anhand der waagerechten Linie tun . Jetzt werde ich das gruppieren und wir verpflichten uns dazu. Jetzt füge ich die Zwischensumme und die Gesamtzahl der Lebensmittel hinzu. Also jetzt Zwischensumme , ja, wir werden das gesamte Essen haben Wir werden all diese Zwischensummen hervorheben und sie aus der Gruppe entfernen Jetzt haben wir hier die Summe. Lass es uns mutig machen. Und dann haben wir einen Button zum Auschecken. Lassen Sie uns ein Rechteck und eine Schaltfläche erstellen. Auschecken. Oh, fügen wir hinzu, bitte bestellen. In Ordnung, jetzt füge ich den Menüpunkt hinzu. Lass es uns hier hinzufügen. Okay, hier ist unsere Warenkorbseite. 14. 14 Build-App-Design-Reihenfolge bestätigen Popup: Okay, im letzten Video haben wir einige Probleme mit der Ausrichtung. Lassen Sie uns sie beheben Auf der Kartenseite sollte das ein Abstand von fünf sein. Und jetzt werde ich all diese Abschnitte hervorheben , und das sollte ein Rand sein. Ich glaube, es sind zehn, es sind 220. Fügen wir hinzu, dass eine Marge von zehn die Zehn ist. Ordnung, und dann können wir vielleicht den Rahmen verkleinern, aber es sieht gut aus. Okay, jetzt ist es an der Zeit, die Seite „Bestellung erfolgreich“ zu erstellen. Erstellen Sie einen neuen Frame und der Name des Frames lautet Order Success. Lassen Sie uns ein Rasterlayout hinzufügen. Okay, jetzt brauchen wir auf dieser Seite keine Kartenschaltfläche, diese Avatar-Taste. Wir brauchen nur die Zurück-Taste. Lassen Sie uns als ersten Schritt die Zurück-Schaltfläche erstellen, okay? Und ändere die Farbe so und das wird weiß sein. Okay, hier ist der Zurück-Knopf. Und jetzt haben wir eine ältere Erfolgsmeldung. Lassen Sie uns diesen Titel kopieren und zum Erfolg führen. Lassen Sie uns nun einen Text erstellen und ihn zentrieren. Lassen Sie uns Text hinzufügen, als hätten Sie erfolgreich eine Bestellung aufgegeben. Okay, mach daraus eine Linienmitte. Lass uns eins auf 80 setzen. Okay. Ich werde das und die Bestell-ID duplizieren. Fügen Sie dann die Bestell-ID hinzu und machen Sie sie zu einer mittleren Größe von 14. Okay. Jetzt haben wir eine Schaltfläche namens Bestellung verfolgen. Lassen Sie uns die Tastengrößen überprüfen. Es ist 40, machen wir 40 daraus und okay, machen wir es in die Mitte. In Ordnung, schicken wir das ins Zentrum. Und jetzt werde ich die Größe des Rahmens reduzieren. Mach es so zentriert. Dann können wir den Rahmen um diesen Inhalt herum hinzufügen. Lass es uns auf 15 reduzieren. Okay? Und das wird breit sein und klicken Sie auf den Rahmen, wir können diesen Rahmen sogar als Pop-up machen. Um das zu tun, wird es besser aussehen, lass es uns machen. Dazu klicke ich auf Rechteck und erstelle einen Rahmen wie diesen. Ändere dann die Farbe auf Weiß und sende es rückwärts. Dann reduziere die Ecken. Reduzieren wir es, reduzieren wir es auf eine Zehn. Und dann klicke ich auf den Rahmen für die erfolgreiche Bestellung und ändere die Farbe in diese dunklere Farbe. Und bring diesen Text her. Und wählen Sie die Schaltfläche Zurück. Und die Zurück-Schaltfläche wird hier sein, oder wir können sie als Schließen-Schaltfläche hinzufügen. Schaltfläche Zurück wird hier sein und sie sieht besser aus als der vorherige Look. Im nächsten Video werden wir ein Popup zu dieser Schaltfläche „In den Warenkorb“ erstellen. 15. 15 App-Design-Designs zum Warenkorb hinzufügen: Okay, lassen Sie uns ein Popup-Fenster für Lebensmittel erstellen, die zum Warenkorb hinzugefügt wurden. Um das zu tun, klicke ich auf den Rahmen und es erscheint ein Pop-up, also müssen wir eine benutzerdefinierte Größe verwenden. Ich werde einfach hier klicken und hier ist der Rahmen. Ich werde diesen Rahmen umbenennen in, lassen Sie uns ihn so einstellen, dass er zu ihrem Popup hinzugefügt wurde. Okay, jetzt wechseln wir zu 340 und werden auch 340 sein. Dann reduzieren wir die Ecken auf zehn. Okay, dann werden wir den Karten einen Textfuß hinzufügen. Also werde ich einfach diesen Text erstellen und ihn hier platzieren, richtig zentrieren und hier klicken. Dann lass uns das Layout hinzufügen. Okay, dann wird der Fuß zur Karte hinzugefügt, machen wir 120 draus. Okay. Dann müssen wir zwei Buttons hinzufügen, eine ist „Karte ansehen“ und die nächste ist „ Weiter einkaufen“. Lassen Sie uns also den Warenkorb mit der Schaltfläche „Karte anzeigen“ erstellen, und dieser wird mittelgroß sein. Okay, hier ist die Schaltfläche „Karte anzeigen“. Und das werden wir auch tun, wir haben zwei an den Ecken. Dann werde ich diese Schaltfläche duplizieren, und jetzt haben wir die Schaltfläche Weiter einkaufen. Okay, dann vergrößern Sie die Schaltfläche und machen Sie sie mittig. Okay, hier ist das Pop-up. Und im Prototyp werden wir es als Pop-up hinzufügen, wenn jemand oder wenn ein Benutzer auf die Schaltfläche „In den Warenkorb“ klickt. Okay, im nächsten Video werden wir uns damit befassen, diese Low-Fidelity-Wireframes in einen Prototyp umzuwandeln . Wir sehen uns in der nächsten Lektion. 16. 16 erstellende Design-Änderungen vor der Konvertierung in einen Prototyp: Okay, lassen Sie uns den letzten Feinschliff vornehmen, bevor wir die Drahtgitter in Fototypen umwandeln Wenn ich es im aktuellen Modus oder in der tatsächlichen mobilen Ansicht überprüfe, wird es so aussehen. Wir müssen das Design vergrößern. Dazu klicke ich einfach auf den Rahmen und vergrößere ihn. Dann werde ich die Höhe auf 800 erhöhen. Lassen Sie uns dieses Fußzeilenmenü wie folgt hinzufügen. Und lassen Sie uns das Design überprüfen. Okay, es sieht perfekt aus. Also mache ich dasselbe, zwei weitere Designs In einem einzigen Fuß füge ich ihn einfach als Suchfuß hinzu. Es sollte ein einziger Fuß wie dieser sein, und das Popup-Fenster ist okay Jetzt müssen wir diese Schaltflächen überprüfen, denn wir werden sie verwenden oder wir werden sie in Komponenten umwandeln und dann den Fototyp erstellen Ich werde mir den Text und den Befehl Dreieck und Bach ansehen. Wir machen es hier und wir machen es für den Rest des Buttons. Okay, ich muss auch hier klicken und auf das Element in dieser Gruppe klicken, und es ist nur das Bildelement. Dann bilden Sie eine Gruppe mit diesen Elementen, und wir machen das für diese vier Elemente. Und ich werde Ihnen in der Prototyp-Lektion zeigen, warum ich das mache Ich werde den Vorgang wiederholen. Okay, jetzt sind wir bereit. Lassen Sie uns auf diesen Artikel klicken und dann auf Vorschau klicken. Es wird eine Vorschau wie folgt angezeigt. Im nächsten Video erstellen wir den Phototype. 17. 17 Build-App-Design, die in den ersten Prototyp von Teil 1 konvertiert werden: Okay, lassen Sie uns die Drahtrahmen in den Fototyp umwandeln. Um das zu tun, gehe ich zu, ich werde auf dieses Prototyp-Menü klicken. Dann werde ich die Startseite sehen. Fangen wir also von oben auf der Startseite an. Also, am Ende unseres Kurses gebe ich dir ein Projekt zum Abschließen. Also wird es beinhalten, Drahtrahmen für dieses Hamburger-Menü und einige andere Rahmen zu erstellen für dieses Hamburger-Menü und einige andere Rahmen zu Ich werde also keinen Prototyp für dieses Hamburger-Menü erstellen Prototyp für dieses Hamburger-Menü Und du wirst es im Klassenprojekt machen. Fangen wir also mit dem Kartensymbol an. Das ist also unsere Kartenseite. Und wenn wir auf dieses Kartensymbol klicken, gelangen wir zur Warenkorbseite Also wähle ich die Karte aus. Eigentlich müssen wir diese Karte gruppieren, bevor wir sie zu einer Komponente erstellen. Lass es uns machen. Klicken Sie hier und klicken Sie auf das Hintergrundelement. Drücken Sie dann den Befehl G, um es zu gruppieren. Und das machen wir für den Rest des Kartons. Lass es uns machen. Okay. Klicken Sie jetzt auf diesen Karton und ich werde ihn in Component umwandeln. Es ist so einfach, klicken Sie einfach auf den Artikel, den Sie konvertieren möchten, und Sie werden hier vier Dreiecke sehen. Klicken Sie einfach darauf. Wenn Sie mit der Maus darüber fahren, wird ein Text mit der Aufschrift Create Components angezeigt Klicken Sie also einfach darauf. Wenn Sie darauf klicken, werden Sie sehen, dass es zu einer Komponente wird, und Sie werden eine lila Linie sehen , wenn Sie es auswählen. Jetzt werde ich darauf klicken und wir müssen es hierher zeigen. Dazu klicke ich auf Phototypeow. Über dem Symbol sehen Sie dieses Pluszeichen. Klicke einfach darauf und ziehe es per Drag & Drop auf den Herzrahmen. Dann siehst du ein Popup-Menü. Im Popup-Menü können Sie die Aktion auswählen, die Sie ausführen möchten. In diesem Fall ist es vom Fass aus. Wenn wir auf das Symbol tippen, gelangen wir zur Kartenseite. Dann ist hier der Abschnitt, in dem wir die Aktion definieren können , die wir ausführen werden. In diesem Fall wird zur Kartenseite navigiert. Hier können wir andere Seiten auswählen, aber wir müssen sie nur als Karte auswählen. Und wenn ich es jetzt in der Aktion überprüfe, klicke ich einfach auf die Startseite und dann hier. Dann schauen Sie sich einfach eine Vorschau an und klicken Sie auf Startseite. Wenn ich jetzt auf diese Kartenkarten-Schaltfläche klicke, wird die Seite Mein Einkaufswagen geöffnet. Dies ist die Grundlage für die Erstellung von Prototypen. Und Fema hat ein Ohr für die Funktion , dies zu tun, ohne an einem Design herumzuspielen Und wir können es ganz klar machen. Jetzt haben wir diesen Avatar an. Wenn wir auf dieses Avatar-Symbol klicken, wird meine Profilseite geöffnet. Dies ist eine weitere Aktivität , die Sie im Klassenprojekt ausführen müssen. Jetzt gibt es drei weitere Kartenschaltflächen. Jetzt gibt es ein paar Möglichkeiten, dies zu tun. Wir können diese Kartenschaltfläche einfach manuell und einzeln konvertieren diese Kartenschaltfläche einfach manuell und einzeln sie dann mit der Kartenseite verknüpfen. Aber wir haben diese Komponente bereits erstellt. Wenn wir dieselbe Komponente durch andere Kartentasten ersetzen, ist das klar und wir werden nicht viele Verbindungen wie diese haben. Lassen Sie mich zeigen, was ich meine. Lassen Sie uns diese Schaltfläche in eine Komponente wie diese umwandeln. Und jetzt leiten wir sie manuell auf die Karte weiter. Dann wird dies auch zur Kartenseite weitergeleitet. Lass es uns so machen. Wenn ich jetzt auf die Leinwand klicke, sehe ich drei Zeilen. Das sind die drei Zeilen, auf die wir diese Schaltfläche zeigen, diese Kartenseite, aber wir können diese eine Komponente duplizieren. Und wenn wir diese erste Schaltflächenkomponente durch eine andere Kartenschaltfläche ersetzen , wird es nicht zu einem solchen Chaos kommen und es spart mehr Zeit. Lass es uns auf diese Weise machen. Ich drücke einfach die Strg-Taste , um die Änderungen rückgängig zu machen. Okay, jetzt klicke ich auf diesen Autoartikel, richtig? Dann klicken Sie auf Kopieren. Dann klicke ich hier und klicke mit der rechten Maustaste. Klicke auf Pace, um es zu ersetzen. Habe gerade unsere Komponente ersetzt. Wenn ich jetzt hier klicke, werde ich diese Verbindung sehen. Und wenn ich hier klicke, sehe ich diese Verbindung. Machen wir das für den Rest von Hard Button. Auf diese Weise können Sie auf einfache Weise einen Prototyp erstellen. Okay, als nächsten Schritt fügen wir diesem Suchsymbol eine Aktion hinzu. Wenn jemand hier tippt und nach etwas sucht, wird er zur Suchseite weitergeleitet. Er wird das Suchergebnis bekommen. Dazu können wir hier klicken und auf Component klicken und es in Component konvertieren. Klicken Sie dann auf dieses Plussymbol und navigieren Sie einfach zur Suchseite. Für diese Suchleiste müssen wir keine Maßnahmen ergreifen , da sie sich bereits auf der Suchseite befindet. Jetzt haben wir diese Kategorien. In diesem Fall haben wir keinen Prototyp für Kategorien erstellt . Lassen Sie uns diese Kategorien auf dieser Such-Fußseite neu erstellen. Um das zu tun, doppelklicke ich hier. Hast du dich daran erinnert , dass ich Gruppen für diese Kategoriebilder erstelle ? Wählen Sie nun diese Gruppe aus und klicken Sie auf Komponenten erstellen. Und wenn Sie möchten, können Sie den Text einfach wie das Kategoriebild umbenennen . Aber ich mache es nicht, weil es sich ein einfaches Drahtgitter-Set handelt. Es gibt nur wenige Drahtgitter, aber bei großen Projekten müssen wir diese Kategorien definitiv umbenennen. Und ich mache das, um Zeit zu sparen, aber wenn Sie möchten, können Sie diese Ebenen in diesem Abschnitt einfach umbenennen. Wenn wir jetzt auf diese Kategorien klicken, werden wir auf diese Fußseite der Suche weil wir keine unterschiedlichen Seiten, vier Kategorien, Lebensmittelkategorien erstellt haben. Wie zuvor kann ich dieses Kategoriebild einfach kopieren und hier klicken. Klicken Sie dann auf Tempo zum Ersetzen. Und doppelklicken Sie hier , um die Kategorie auszuwählen, und klicken Sie auf Pace, um sie zu ersetzen. Mach das Gleiche hier, okay, nett. Wenn wir nun den Vorgang überprüfen darauf klicken, lesen wir die Suchseite. Wenn wir auf die Suchleiste klicken, lesen wir die Suche vor. Okay, jetzt ist es Zeit , die Aktion hinzuzufügen. Wenn jemand auf diese Lebensmittel klickt, klickt er hier und wandelt sie in solche Bestandteile um. Und klicken Sie auf das Plus-Symbol. Wenn jemand darauf tippt und auf dieses Lebensmittel klickt, auf dieses Lebensmittel klickt, wird diese Person auf die Seite mit einem Fuß klicken. Okay, jetzt klicke ich mit der rechten Maustaste und kopiere. Dann rechts und auf Pace to replace klicken. Weil all diese beliebten Lebensmittel in diesem Drahtrahmen gleich sind. Wenn wir einzelne Aktionen wie „Lass uns Aktion hinzufügen“ hinzufügen, wird es eine Menge Verbindungen geben. Aber wenn wir die Komponente austauschen, wird es nur noch wenige Verbindungen geben und sie wird wirklich einfach zu verwalten sein. Okay, jetzt mache ich dasselbe, klicke einfach auf Kopieren und dann auf Zu ersetzenden Ort. Okay, jetzt ist unsere Homepage fertig. Und jetzt mache ich dasselbe mit dem Fuß auf der Such-Fußseite, weil sie alle gleich sind. Klicken Sie einfach auf eines der Lebensmittel und konvertieren Sie es in eine Komponente. Wenn Sie darüber drüber fahren, sehen Sie diese Art von Plus-Schaltfläche und ziehen Sie sie auf den einzelnen Fußrahmen. Okay, jetzt kopiere es und ersetze es durch die restlichen Lebensmittel. Okay, in der zweiten Lektion werden wir der Schaltfläche mit zwei Karten Aktion hinzufügen. Wenn wir den aktuellen Prozess überprüfen, gehe ich auf die Startseite. Und lass uns zum Prototyp gehen. Und gehen wir zurück zur Startseite. Und wenn ich nach etwas Essen suche, gehe ich auf die Seite „Essen suchen“. Und wenn ich auf A klicke, geht es zu den Single Foods. Wenn ich auf diese Kartenschaltfläche klicke, wird sie zu meiner Karte weitergeleitet. Wir werden den Prototyp weiter bauen. 18. 18 Build-App-Design, die in den zweiten Teil des Prototyps konvertiert werden: Jetzt füge ich der Schaltfläche mit zwei Karten eine Aktion hinzu, klicke auf die Schaltfläche Zur Karte und dann auf Komponente erstellen. Wenn wir dann auf diese Schaltfläche mit zwei Karten klicken, öffnet sich diese Schaltfläche bei zwei Karten. Wenn wir darauf klicken, wird angezeigt, dass Fuß zur Karte hinzugefügt wurde. Lass uns hier klicken und es an den A-Karten-Popup-Frame senden. Jetzt werde ich diese Parameter ändern. Die erste besteht darin, zu einem Auto-Popup zu navigieren. Dies ist ein Popup, es navigiert nicht im Frame, es öffnet nur das Overlay Bei diesem Pop-up mit der Karte muss es sich um ein Overlay des Einzelfuß-Frames Klicken Sie auf „Overlay öffnen und hier haben wir den Rahmen ausgewählt , den wir überlagern möchten Und wir werden den Effekt sofort sehen. Jetzt klicke ich in der Overlay-Einstellung hier und dann auf Manuell Dann werde ich die Position dieses Overlays anpassen. Passen wir uns an die Mitte an, so, okay? Dann klicke ich auf einen Hintergrund. Dann klicken Sie hier. Und im Hintergrund, wenn dieses Popup-Fenster geöffnet wird, wird der Rest der Seite hellschwarz sein. Jetzt sagten wir, wenn ich es überprüfe, klicken Sie auf Single Page. Klicken wir auf den Vorschaumodus. Und wenn ich auf eine Karte klicke, erscheint sie als Overlay. Lass uns weitermachen Wenn ich das bearbeiten möchte, kann ich einfach hier klicken. Lass uns schließen, indem wir draußen klicken. Wenn ich es probiere, klicke darauf In Richtung. Wenn ich auf die Außenseite des Popups klicke, wird entweder die einzelne Fußseite oder die aktuelle Seite angezeigt. Aber in diesem Fall werde ich es nicht hinzufügen. Jetzt haben wir zwei Knöpfe. Klicken Sie einfach auf die Schaltfläche und konvertieren Sie sie in eine Komponente. Und es wird auf dieser Seite „Meine Karte“ angezeigt. Klicken Sie hier und lesen Sie es auf meiner Kartenseite und klicken Sie auf Weiter einkaufen und konvertieren Sie es in eine Komponente. Lassen Sie uns das an die Fußseite für die Suche senden. Wenn jemand auf Weiter einkaufen klickt, liest er die Fußseite der Suche vor. Okay, jetzt müssen wir auf meiner Kartenseite etwas unternehmen. Lassen Sie uns also dieser Schaltfläche „Bestellung aufgeben“ eine Aktion hinzufügen. Klicken Sie einfach darauf und dann auf Komponente. Wenn dann jemand auf diese Schaltfläche „Bestellung aufgeben“ klickt, liest er den Link „ Bestellung erfolgreich bestellen“ vor. Okay, jetzt hoffe ich, dass du den Prozess verstehst. Und das ist der Weg, um ein Drahtgestell in einen Prototyp umzuwandeln. Und jetzt werde ich diese Schaltfläche in eine Komponente umwandeln. Das ist die Home-Taste. Dann verbinde es mit der Startseite. Wenn jemand darauf klickt, liest er die Startseite. Ich werde es kopieren und durch den Rest der Schaltfläche ersetzen. Lassen Sie uns jetzt auch diesen ersetzen. Ich habe vergessen, die Zurück-Schaltfläche hinzuzufügen. Lass es uns schnell hinzufügen. Lassen Sie uns hier die Schaltfläche „Zurück“ hinzufügen. Lassen Sie uns eine einfache Ellipse erstellen. Und erstellen Sie die Ellipse so, ändern Sie die Farbe so und klicken Sie auf Und erstelle das kleine Rechteck. Okay, jetzt gruppieren wir es und klicken auf Komponente, und es wird eine Komponente. Jetzt klicke ich auf Fototyp und dann auf das Plus-Symbol auf der Komponente. Wenn ich die Komponentenverbindung ziehe , wird die Zurück-Schaltfläche geöffnet. Das heißt, wenn jemand auf diese Zurück-Schaltfläche klickt, reagiert sie auf die vorherige Seite, die Sie geöffnet haben. Schauen wir uns die Aktion an. Klicken Sie auf die Rückseite, um das Design zu duplizieren. dupliziert So Okay. Lassen Sie uns jetzt die tatsächliche Aktion überprüfen. Lass uns das öffnen. Jetzt bin ich auf der Startseite. Ich klicke auf die Suchseite. Wenn ich jetzt auf diese Schaltfläche „Zurück“ klicke, gehe ich zur Startseite , weil ich auf der Startseite war. Auf diese Weise können Sie die Zurück-Schaltfläche verwenden. Die Zurück-Taste ist nicht ausgerichtet. Richten wir es richtig aus. Lassen Sie uns es tatsächlich hier in den Mittelpunkt stellen. In Ordnung, jetzt haben wir den Prototyp. 19. 19 erstellter Testprototyp für das App-Design: Jetzt haben wir einen Low-Fidelity-Wireframe-Prototyp. Lassen Sie uns ihn also testen. Bevor ich es teste, werde ich den Flow um einen Teil entfernen, weil wir ihn nicht benötigen. Alles klar, lass es uns testen. Ich gehe in den aktuellen Modus und jetzt sind wir auf der Startseite. Stellen Sie sich vor, ich bin ein Benutzer, der dies verwendet, um Nahrung zu finden. Ich werde hier Essen eingeben und auf die Suchschaltfläche klicken. Und ich werde auf die Suchseite gehen und ich bin Burger. Dann klicke ich auf einen der Burger. Hier kann ich alle Details des Burgers sehen und wir haben eine Beschreibung und Rezensionen zum Bild-Slider. Dann kann ich Burger hinzufügen , die ich kaufen möchte. Dann kann ich auf In den Einkaufswagen legen klicken. Wenn ich etwas in den Warenkorb lege, kann ich mir die Karte ansehen oder mit dem Einkaufen fortfahren. Ich werde auf Weiter einkaufen klicken und hier kann ich erneut nach Lebensmitteln suchen , die mir gefallen, und sie dann in den Warenkorb legen. Sehen wir uns die Karte an. Klicken Sie einfach auf die Karte. Hier ist meine Karte. Hier kann ich die Zwischensumme und das Essen überprüfen , das ich gekauft habe Ich kann die Lebensmittel zählen , die ich kaufen möchte. Dann kann ich auf Bestellung aufgeben klicken und erhalte die Meldung, dass die Bestellung erfolgreich war. Hier kann ich auf Bestellung verfolgen klicken und die Bestellung verfolgen. Ich habe es nicht abgeschlossen, weil Sie es im Projektbereich tun werden. Dies ist der Prozess unseres Drahtrahmen-Sets und ich hoffe, Sie haben eine klare Vorstellung davon, wie Sie einen hohen Drahtrahmen entwerfen und ihn in einen Prototyp umwandeln können 20. 20-Kursprojekt: Okay, hier ist das Projekt. Also musst du dieses Drahtgitter-Set fortsetzen und drei weitere Rahmen hinzufügen und es mit den anderen Designern teilen. Dazu gebe ich einen Link zu diesem Prototyp, damit Sie ihn duplizieren können. Dann müssen Sie als ersten Schritt ein Hamburger-Menü erstellen Dazu können Sie bei Google nach einem Hamburger-Menü in der App suchen und es werden verschiedene Arten von Hamburger-Menüs angezeigt Insbesondere wenn Sie dieses Hamburger-Menü erstellen, sollte es sich um ein Popup-Popup wie dieses handeln zum Beispiel einen Wenn ich zum Beispiel einen neuen Android-Frame erstelle, die Größe des Hamburger-Menüs die sollte die Größe des Hamburger-Menüs die Hälfte dieses Frames betragen Und wenn du auf das Hamburger-Symbol klickst, öffnet sich dieses und der Rest der Seite wird dunkel sein, so wie wir es beim Hinzufügen zum Einkaufswagen getan haben Mach Schritt für Schritt. Lass einfach das einzelne Essen laufen. Und wenn ich auf die At-To-Karte klicke, erscheint das Pop-up und der Rest der Seiten wird dunkler. Nachdem Sie dies getan haben, können Sie einen Rahmen für die Bearbeitung erstellen. Dieser Avatar, es wird ein Frame namens Mein Profil sein. Dann erstellen Sie eine Seite, auf der Sie Ihre Bestellungen verfolgen können. Es wird also der Auftragsverfolgungsrahmen sein. Wir haben also keine UX-Recherche durchgeführt, um diese App zu entwerfen, also schlage ich vor, dass Sie zu Google oder zu Orten wie Ble gehen , um sich vom Design inspirieren zu lassen. Wenn ich zum Beispiel zur Konkurrenzseite gehe wir nach der Seite „Bestellung verfolgen“ suchen, erhalten wir diese Art von Track-Order-Seiten. Wenn wir also hierher gehen, wird das eine tolle Seite mit der Auftragsverfolgung sein, sodass wir sie auch verwenden können. Sie können Ihre Nachforschungen anstellen und diese Art von Rahmen finden. Dann kannst du es neu gestalten. Oder Sie können den Drahtrahmen dieser Seite zur Profilseite erstellen dieser Seite zur Profilseite Sie können dasselbe auf diese Weise tun, die Recherche durchführen und diese drei Seiten erstellen. Nachdem Sie es erstellt haben, klicken Sie auf diese blaue Schaltfläche zum Teilen und legen dass jeder, der den Link hat, ihn sehen kann. Klicken Sie dann auf diesen Link zum Kopieren und teilen Sie ihn mit den anderen US-Designern. Viel Glück und vielen Dank, dass Sie bei mir geblieben sind. Ich hoffe Sie erhalten wertvolle Informationen über Create Phototypesireframes Wenn Sie Fragen haben, fragen mich einfach und ich bin bereit Ich werde dich ein anderes Mal sehen. Ich danke dir.