Figma für absolute Anfänger:innen 2022 lernen

1. Einführung: Hallo. In diesem Kurs werden wir eine echte App mit Prototyp in der Ausstattung mit lassen Sie uns Funktionen und gestaltete Ästhetik zu bauen . Mein Name ist Maria und ich bin ein UI UX Designer. Ich habe mehr als fünf Jahre Erfahrung in der Designbranche. Durch diesen Kurs führe ich Sie, wie Sie eine Nike Shopping-App in FISMA mit neuestem Designprinzip und Designästhetik erstellen . Die Ergebnisse sind in drei Abschnitte unterteilt, in zwei FISMA-Sitzung, UI, UX Abschnitt und Prototype Abschnitt. In der Kreuzung werden wir sehen, was Sigma ist und wie man seine Funktionen verwendet. Im UI UX Abschnitt werden wir mit der Erstellung und Strukturierung beginnen, obwohl Nike App. Und am Ende werden wir alle Drucke miteinander verknüpfen. So sieht es so aus, dass die Überlappung. Und last but not least, werden wir sehen, wie man mit anderen Teammitgliedern teilen Stakeholder sind. Ich muss es dir nicht zeigen. Also, ohne weitere Umschweife, lasst uns anfangen. 2. Verwendung von Trainingsdateien: In diesem Video zeige ich Ihnen, wie Sie mit Übungsdateien beginnen können. Die Übungsdateien für diesen Kurs sind in dieser Vorlesung enthalten. Die von mir hochgeladene Übungsdatei enthält eine Sigma s, It's file. Es enthält alle S, die es in diesem Kurs verwendet wird. Bitte laden Sie diese Datei herunter, damit wir unsere Reise fortsetzen können , indem wir eine echte App in Sigma erstellen. Diese Übungsdatei enthält keine Figurdatei. Also für das, folgen Sie mir einfach durch diese Klausel. Ihr wisst also, wie ihr euer eigenes Fichman-Projekt erstellen könnt. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 3. Was ist Figma?: Sigma ist eine browserbasierte UI- und UX-Design-Anwendung und in erster Linie webbasiertes Prototyping-Tool mit zusätzlichen Offline-Funktionen, die von Desktop-Anwendungen für Mac OS aktiviert werden , und Windows ist derzeit das führende Interface-Design-Tool in der Industrie. Hier ist die Frage. Gibt es viele andere Tools wie Adobe XD, Sketch, Marvel, und viele andere als warum wir Sigma verwenden, ist die Antwort, dass die anderen Softwarelizenzen sind teuer im Vergleich zu Sigma. Da sigma frei verfügbar ist, können Sie einfach auf die Demo-Website gehen, sich anmelden, und jetzt können Sie Sigma einfach überall und jederzeit verwenden, da es sich um eine webbasierte Anwendung handelt, obwohl die Desktop-Version auch verfügbar ist, aber es hängt von der Wahl ab. Und auch Sigma ist sehr einfach zu erlernen. Und wenn Sie es versuchen, können Sie Friedman einfach in der heutigen Zeit lernen und innerhalb von sieben bis zehn Tagen können Sie FISMA beherrschen. Das Beste an FDMA ist, dass Sie ein anderes Land reisen und Ihren Laptop nicht haben. Sie können einfach auf Ihre Dateien zugreifen, indem Sie sich über einen anderen Laptop im Webportal anmelden und auf alle Ihre Dateien zugreifen. Also, jetzt denke ich, ihr habt ein paar Kenntnisse über FDMA. sehen euch im nächsten Video, wir werden sehen, wie man ein Sigma Online-Konto erstellt. 4. Die Anmeldung für Figma: Um sich für fema anzumelden, gehen Sie einfach auf www.sigma.com und klicken Sie auf Anmelden. Hier. Geben Sie einfach Ihre E-Mail-Adresse und Ihr Passwort ein und klicken Sie auf Konto erstellen. Sie können sich auch mit Ihren Google-Anmeldeinformationen anmelden. Nachdem Sie auf Anmelden geklickt haben, fragt es nach meinem Namen und meiner Arbeit. Geben Sie einige Daten ein. Und wenn du der Mailingliste von Sigma beitreten willst, kannst du dieses Kontrollkästchen aktivieren, denn jetzt lebe ich es. Und danach klicken Sie auf Konto erstellen. Jetzt wird unser freigewordenes Konto erstellt. Es ist Zeit, das Team für meinen Fichman zu bearbeiten. Ich schreibe Ihnen Achsen-Teammitglied. Ein Team hat viele Mitglieder. Sie können ganz einfach mit ihnen zusammenarbeiten. Wir werden das später besprechen. Jetzt einfach Weiter drücken. Sie können es auch später tun. Momentan gibt es zwei Pläne für Pittman. Wählen Sie den Plan, das ist SU zwei. Aber wenn Sie ein Anfänger sind, schlage ich vor, dass Sie den Startup-Plan wählen. Und jetzt ist ein FEMA-Konto erfolgreich eingerichtet. Das ist alles für dieses Video. sehen euch im nächsten Video, in dem wir den FISMA-Arbeitsbereich verstehen werden. 5. Schriftarten in Figma einrichten: In diesem Video werden wir lokale Telefone in unserem Freak MOM aktivieren. Andernfalls haben Sie keine große Auswahl, wenn Sie mit Schriftarten arbeiten möchten. Und auch, wenn Sie Dinge wie Skizzendateien importieren, funktioniert dieser Text möglicherweise nicht. Es sieht vielleicht nicht richtig aus in Sigma. Wenn Sie sich auf sigma.com auf der Website befinden, sind Sie bereits angemeldet. Kommen Sie in die obere linke Ecke hier mit einem Menü ist, und kommen Sie zu Kontoeinstellungen. Hier werden Sie eine Menge Dinge sehen, die wir tun können, einschließlich Dinge wie die Arbeit mit der API, die Sie erweitern können. Fisma, tun alle möglichen Dinge, verbundene Apps, et cetera. Hier unten, Sie werden sehen, dass wir lokale Gerichte sind derzeit nicht standardmäßig aktiviert. Klicken Sie auf Installationsprogramm herunterladen, um lokale Formulare zu aktivieren. Es wird dies herunterladen, abhängig von Ihrem Betriebssystem, das keine kleine Datei herunterladen kann. Und was du tun wirst, ist, dass du das im Wesentlichen öffnen und installieren wirst. Ich kann sehen, dass ich das Paket genau da habe. Ich werde nur darauf klicken. Sie müssen auf Weiter klicken, gehen Sie und installieren Sie das. Stellen Sie sicher, dass es installiert wird. Ich brauche den Installer nicht mehr. Und Sie werden jetzt sehen, dass lokale Schriftarten aktiviert sind. Ich habe so viele Kräfte in Pima zur Verfügung. Andernfalls arbeiten Sie mit weniger Telefonen. Es gibt etwas, was ich sicherstellen möchte, dass wir das getan haben, bevor wir hier reingesprungen sind. Jetzt können Sie zu den neuesten Versionen zurückkommen und alle Dateien sehen. Der nächste Schritt ist, dass wir den FISMA-Arbeitsbereich verstehen. Wir sehen uns im nächsten Video. 6. Den Arbeitsraum verstehen: Willkommen zurück. In diesem Video werden wir den Arbeitsbereich oder Fichman verstehen. Dies ist unsere Homepage. Standardmäßig gibt pigment uns drei Projekte. Sie können es bleiben gelöscht werden. Es basiert ganz auf Ihrer Wahl. Als nächstes hier oben rechts haben wir zwei Möglichkeiten. Diese Importoption wird verwendet, um verschiedene fema Projekte direkt zu ma passen importieren. Sie können Ihre Skizzendateien auch importieren, indem Sie auf dieses Importelement klicken. Und auf der rechten Seite haben wir ein Plus. Ich kann einfach auf dieses Symbol klicken, um eine neue Datei zu erstellen. Hier, oben links, haben wir eine Symbolleiste. Es enthält Werkzeuge wie Rechteck, Ellipse, Stift Werkzeug. Mit diesen Werkzeugen können Sie verschiedene Formen zeichnen. Darunter befindet sich die geschichtete Registerkarte. Hier können Sie alle Ihre Layer sehen. Dieser nächste Schritt ist der Asset-Schritt. Hey, Sie können alle Ihre Assets speichern, die Sie während des gesamten Projekts verwenden. Und später, schattige dich mit deinen Teammitgliedern. In der Mitte haben wir unsere Leinwand, wo wir erstellen und mit unseren Outputs arbeiten können. Denken Sie daran, dass unsere Flughäfen jetzt Frames in Fichman genannt werden. Also in den kommenden Lektionen, wenn ich Frame sage, bedeutet das, dass ich danach über Kunstzitate spreche. Aber auf der rechten Seite haben wir ein Eigenschaftenfenster. Sie können die Eigenschaften verschiedener Elemente ändern. Momentan zeigt es nichts. Aber wenn ich auf der Leinwand zeichne, sehen Sie, dass alle Eigenschaften jetzt sichtbar sind. All dies werden wir in den kommenden Videos besprechen. Als nächstes oben rechts haben wir eine Schaltfläche „Teilen“, um dieses Projekt mit anderen Teammitgliedern zu teilen. Wir haben auch eine Play-Schaltfläche zur Vorschau oder ein Design und eine Zoom-Taste zum Vergrößern oder Verkleinern des Rahmens. Und das bringt uns zum Ende dieses Videos. Wir sehen uns im nächsten Video. Wir werden sehen, wie wir unsere erste Datei in FISMA einrichten. 7. Erste Datei in Figma: Willkommen zurück. In diesem Video werden wir unsere erste Datei in Pragma einrichten, um eine Datei einzurichten. Erstens, habe eine neue Datei. Und hier in der Mitte oben benennen Sie das erste Projekt in Ihr Teamprojekt um. Danach benennen Sie diese Berechtigungsdatei in Nike App um, indem Sie darauf klicken. Sigma-Projekte werden in Frames erstellt. Um einen Rahmen zu erstellen, drücken Sie einfach die Taste f von Ihrer Tastatur, oder klicken Sie hier oben links. Danach haben wir hier auf der rechten Seite viele Möglichkeiten für Rahmen. Wir können verschiedene Apps für Telefone, Tablets, Web- und Social-Media-Posts erstellen. Aber für diesen Kurs werden wir mit iOS-Apps arbeiten. Also müssen wir iPhone 11 pro max Rahmen wählen schlägt darauf klicken. Und jetzt wird ein Frame erstellt und testen, wie Sie eine Datei in Fichman einrichten. Ich sehe dich im nächsten Video. Wir werden sehen, wie man mit Seiten arbeitet. 8. Arbeiten mit Frames: Willkommen zurück. In diesem Video werden wir sehen, wie man mit Frames arbeiten Seiten sind. Grundsätzlich sind Frames Bildschirme für Ihre App oder Website. Sie können beliebig viele Frames in einem Projekt hinzufügen. Also gleich hinter der F-Taste. Und hier sind viele Optionen für Ihre Freunde. Schlagen Sie vor, dass iPhone 11 pro max Rahmen an einem anderen Frame. Und jetzt, wenn wir in unserem Ebenenbedienfeld sehen, werden die Ebenen der Rahmen gestapelt. Wenn wir den Mauszeiger über diese Ebenen bewegen, sehen wir, dass wir zwei Optionen haben. Wir können ihn einsperren oder den Rahmen in die Höhe heben. Durch Sperren des Rahmens bedeutet, dass Sie ihn nicht bewegen können. Um nun einen Frame umzubenennen, doppelklicken Sie einfach auf die Ebenen und benennen ihn um, was Sie wollen. Durch die Benennung des Rahmens ist es für uns leicht, die spezifische Ausgabe zu finden. Wenn ich nun auf den Rahmen klicke, werden wir alle Eigenschaften dieses Rahmens sehen. Ausgehend von oben haben wir Ausrichtungsoptionen. Dann haben wir x- und y-Koordinaten Option. Hier sind die Optionen für Drehung und Eckenradius. Dann haben wir auch Layout-Raster-, Füll- und Effekt-Optionen. Wir werden all diese Möglichkeiten entdecken, wenn wir in diesem Kurs vorankommen. Wir sehen uns im nächsten Video. Wir werden mit verschiedenen Formen in Sigma arbeiten. 9. Arbeiten mit Formen: Willkommen zurück. In diesem Video werden wir sehen, wie man mit verschiedenen Formen arbeitet, die in Sigma zur Verfügung gestellt werden. Sie können Shapes verwenden, um verschiedene Elemente eines Entwurfs zu erstellen. Zeichnen Sie zunächst ein Rechteck über diesen ersten Frame. Sie können den Rahmenradius dieses Rechtecks ändern indem Sie einen Wert in der Registerkarte Eckenradius hinzufügen. Sie können auch die Ecke von unabhängigen Websites ändern , indem Sie hier klicken und hier einen Wert eingeben. Lassen Sie uns dies rückgängig machen, indem Sie Steuerelement C drücken. Und jetzt können Sie im Eigenschaftenfenster seine Farbe hier und viele Farboptionen ändern. In diesem Dropdown können Sie lineare Farbe, Verlaufsfarbe, Winkelfarben hinzufügen . Aber für jetzt bleiben wir bei festen Farben. Hier können Sie eine Hex-Farbe hinzufügen, indem Sie Xcode kopieren. Oder wenn Sie mit RGB-Farbe arbeiten möchten, können Sie diese auch auswählen, indem Sie hier klicken. Dies ist eine 100% ist die Deckkraft der Farbe. Wenn ich das ändere, können Sie sehen, dass sich auch die Deckkraft unseres Rechtecks ändert. Und hier unten haben wir unsere lokalen Farben, die wir in dieser Datei verwendet haben. Nun, wenn wir dies schließen, können wir mehr gefüllt zu diesem Rechteck hinzufügen, indem wir auf dieses Plus-Symbol klicken. Danach bewegen wir uns zum Schlaganfall. Hier können Sie dem Rechteck einen Strich hinzufügen. Sie können die Größe des Strichs vergrößern und auch die Ausrichtung nach innen, außen oder Mitte ändern . Wenn wir auf diese drei Punkte klicken, können Sie die Kappen ändern, den Schrein in der Grenze verketten oder auch Bindestriche hinzufügen. Nicht nur den Strich angezündet, indem Sie auf dieses Symbol klicken. Danach lassen Sie uns mit Ellipsen arbeiten. Dafür zeichnen Sie einfach eine Ellipsen hier. Und wenn Sie die Umschalttaste nicht drücken, können Sie keinen perfekten Kreis zeichnen. Drücken Sie also die Umschalttaste oder Vesta Art und verschieben Sie zusammen, um diesen Anteil dieser Lippen beizubehalten. Nun, wenn wir diese Ellipse wählen, sehen Sie diesen weißen Kreis. Sie können es nach links verschieben, um Diagramme zu zeichnen, diesen Mittelpunkt zu greifen und ihn nach unten zu verschieben, um eine perfekte Form zu zeichnen. Pro Charts. Zeichnen Sie danach ein Polygon. Und hier in diesem Polygon können Sie den Eckenradius dieses Polygons ändern, indem Sie es von oben erfassen und in Richtung der Mitte verschieben. Und wenn Sie die Ecken vergrößern oder verringern möchten, können Sie sie einfach von dieser rechten Ecke greifen und nach oben bewegen, um die Ecke zu ändern. Sie können dies auch tun, indem Sie hier im Eigenschaftenfenster einen Wert hinzufügen. Als Nächstes ist der Stern. Wählen Sie also einfach und zeichnen Sie einen Stern auf diesem Rahmen. Jetzt gibt es drei weiße Kreise auf dem Stern. Wenn du über diese Kreise hältst, wirst du zuerst ihren Zweck kennen lernen. Der erste ist der Eckenradius. Der zweite ist das Verhältnis. Und der dritte ist für die Erhöhung der Zählung im Stern. Lassen Sie uns das mit etwas Farbe füllen. Und es sieht schön aus. Und testen Sie, wie Sie mit Formen spielen und verschiedene Dinge für Ihr Design gelehrt. Im nächsten Video werden wir sehen, wie das Stiftwerkzeug in Fichman verwendet wird. So sehen wir uns im nächsten Video. 10. Arbeiten mit Pen: Willkommen zurück. In diesem Video werden wir sehen, wie man mit dem Stiftwerkzeug arbeitet. Das Stiftwerkzeug ist das wichtigste Werkzeug in Grafiken. Durch die Verwendung des Stiftwerkzeugs können wir Grafiken entwerfen , Formen und Symbole erstellen und viele andere Dinge. Also erstens, genau wie dieses Stift-Werkzeug auf der Oberseite werden hochgeladen von Ihrer Tastatur. Und hier sehen Sie, wir haben einen Stift wie Sinus. Es bewegt sich frei. Wenn Sie jedoch die Umschalttaste drücken, wird sie proportional verschoben. Wenn wir nun darauf klicken, erstellt es einen Pfad. Dann klicken Sie noch einmal darauf. Tolle Unterstützung. Und wenn wir am Startpunkt klicken, drücken Sie die Eingabetaste, es wird auseinander schließen und das Schiff erstellt. nun auf diesen Film klicken, können Sie dieser Form eine Füllfarbe hinzufügen. Oder Sie können den Rahmen vergrößern oder verkleinern, indem Sie hier klicken. Lassen Sie uns unser Enum-Design machen, indem Sie mit dem Stift Werkzeug klicken. Und hier sehen Sie, können Sie sogar komplexe Formen mit einem Stiftwerkzeug zeichnen. Nun, das sind Flaggschiffe weniger Land, wie Sie Kurven mit dem Stift-Werkzeug von vorne zeichnen können. Bitte schauen Sie sich das Video sorgfältig an, da dies das wichtigste Werkzeug ist, nicht nur Sigma, sondern auch in Photoshop. Illustrator, XD auch. Es ist ein wenig schwieriges Werkzeug, Einheit Praxis, um dieses Werkzeug zu meistern. Also lassen Sie uns Kurven mit ruhigen oder Nike-Logo beginnen. Wählen Sie zunächst das Zeichenstift-Werkzeug aus und klicken Sie hier einfach erneut, klicken Sie darauf darunter, und lassen Sie die Maus nicht los. Klicken Sie mit der linken Maustaste, und bewegen Sie die Maus nach rechts, um ihr eine Kurve zu geben. Und jetzt kurviert es den Teil. Aber von hier aus brauchen wir einen geraden Weg. Also komm zurück und klicke auf diesen Kreis, um den Kurvenweg auszuwählen. Und von hier aus, klicken Sie hier und schließen Sie auseinander, ohne die Maustaste loszulassen. Und bewegen Sie Ihre Maus nach oben, um einen perfekten Nike Swish zu zeichnen. Denken Sie daran, wenn Sie versehentlich einen falschen Weg schaffen, keine Panik. Sie können immer noch nur auf dem Pfad, indem Sie auf diese weißen Kreise klicken und die Griffe bekommen und sie verschieben, Sie wollen, dass sie sein. Es ist sehr einfach und einfach. Nachdem Sie die Form erhalten haben, drücken Sie die Eingabetaste, um sie von einem Pfad aus in eine richtige Form zu ändern. Und jetzt können Sie mit ihm bei einem Farbentferner spielen. Porter gab ihm auch einen Schatten. Also, jetzt habt ihr etwas Wissen über das Stift-Werkzeug. Bitte üben Sie dieses Tool so viel wie möglich , da es Ihnen bei der Gestaltung Ihrer komplexen Designs helfen wird. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. Wir werden sehen, was Maskierung ist und wie wir es in unserem Design verwenden. 11. Arbeiten mit Malen: Willkommen zurück. In diesem Video werden wir sehen, wie man mit Maskierung arbeitet. Fisma ermöglicht es uns, eine Reihe von Bildtypen in Ihr Designprojekt zu importieren. Wir können PNGs, JPEGs, SVG, gibt, und viele andere importieren . In diesem Video werden wir sehen, wie Sie Bilder von Ihrem PC nach FISMA importieren und wie Sie Bilder mit Chips maskieren. Also erstens, um ein Bild auf diesem zweiten Rahmen zu platzieren, kommen Sie hierher. Und von hier aus, wählen Sie Bild unter diesem Rechteck-Dropdown. Sie können auch die Tastenkombination Shift und k drücken. Und jetzt wird ein Pop-up kommen. Wählen Sie Ihr Wunschbild aus. Ich werde dieses eine Bild wählen. Und jetzt sehen Sie, dass ein Cursor in ein Plus-Symbol geändert wird. Klicken Sie also einfach an der Stelle, an der Ihr Bild platziert werden soll. Jetzt ist unser Bild platziert. Lassen Sie uns die Größe des Bildes ändern. Um die Größe dieses Bildes zu ändern, drücken Sie einfach die ALT- und Umschalttaste, ob von Ihrer Tastatur aus und verschieben Sie es in die Mitte, um es nach unten zu skalieren. Jetzt legen Sie es richtig. Hier. Schau dir die rechte Seite an. Wenn wir ein Bild importieren, können wir den Füllmodus wie in Photoshop ändern. Und Sigma. Bild ist nur eine Flosse. Sie können es löschen, indem Sie die Verschüttung entfernen. Sie können diesem Bild verschiedene Effekte hinzufügen, z. B. Strichschatten. Und wenn Sie diese Bildeigenschaften ändern möchten, klicken Sie einfach auf das Bild. Und von hier aus können Sie den Belichtungskontrast anpassen und seine Anpassung auch in Eigenschaften ändern. Und jetzt werden wir ein paar Bilder hinzufügen. Aber vorher, lassen Sie uns auf dieses Layoutraster klicken und zwei Spalten hinzufügen, könnte es, und ändern Sie seinen Rand auf 16. Nun werden wir hier einige Rechtecke platzieren und dann Bilder auf diese Rechtecke platzieren. Zeichnen Sie also zunächst drei bis vier Rechtecke hier. Durch Ergreifen des Rechteck-Werkzeugs. Richten Sie sie richtig aus. Jetzt werden wir vier Bilder zu diesen Rechtecken hinzufügen. So Sammler, Ort, Bild-Werkzeug oder drücken Sie die Control-Umschalttaste von Ihrer Tastatur. Und von hier aus, wählen Sie für Bilder. Und jetzt können Sie einfach klicken, klicken, klicken und klicken Sie in diese Rechtecke klicken, um die Bilder automatisch zu platzieren. Und jetzt, da Bilder platziert werden, aber sie sind übergroß, um sie zu verkleinern. Das ist die ALT-Taste und doppelklicken Sie auf das Bild. Nun, greifen Sie es von den Ecken, schrumpfen Sie es nach unten, um es richtig zu platzieren. Und jetzt fügen wir hier eine Ellipse hinzu. Und danach platzieren Sie hier ein Bild, indem Sie das Bildwerkzeug nach oben drücken. Und jetzt wird dieses Bild vor dieser Ellipse platziert. Es ist Zeit, dieses Bild in diese Ellipse zu setzen. Klicken Sie also einfach auf diesen Massenknopf in der Mitte oben. Und jetzt werde ich zeigen, ist in die Lippen gelegt. So maskieren Sie Bilder in die Shell. Und wenn Sie diese Maske entfernen möchten, drücken Sie einfach noch einmal die Maustaste, um diese Maske zu entfernen. Und das bringt uns zum Ende dieses Videos. sehen euch im nächsten Video, wir werden mit dem Text und Schriftarten arbeiten. 12. Arbeiten mit Text und Schriftarten: Willkommen zurück. In diesem Video werden wir sehen, wie man mit Text und Schriftarten in Sigma arbeitet, Sie können alle Google-Schriften verwenden. Aber zuerst sollten Sie lokale Schriftarten in Sigma aktivieren. Um lokale Schriftarten in FDMA zu aktivieren, gehen Sie zu einem Konto zu helfen. Und von dort aus, wählen Sie Konto und Einstellung. Und jetzt scrollen Sie nach unten. Aktivieren Sie hier lokale Formulare. Nachdem Sie die lokalen Telefone aktiviert haben, haben Sie Zugriff auf vier plus Schriftarten, die standardmäßig in Fichman verfügbar sind. Also ist es Zeit, mit Text zu spielen. Zuerst schnappen Sie sich ein Textwerkzeug und schreiben Sie hier etwas Text. Sag hallo Wort, wie geht's dir? Und jetzt auf der rechten Seite, haben Sie alle Texteigenschaften. Von hier aus können Sie die Schriftart auf verschiedene Telefone zur Verfügung gestellt ändern , wenn ich meine darunter auswählen, können Sie die Schriftstärke und Schriftgröße ändern. Wenn Sie auf dieses Schriftfeld klicken, drücken Sie die Umschalttaste und den Aufwärtspfeil auf der Tastatur. Sie können die Größe der Schriftart mit einer Intimzahl von zehn erhöhen. Wenn Sie die Umschalttaste nicht drücken, wird die Schriftart um ein Inkrement von eins erhöht. Danach wird Zeilenhöhe und Zeichenabstand haben. Als nächstes haben wir Absatzabstand und verschiedene Ausrichtungsoptionen, die wir sehen werden, wenn wir in diesem Kurs vorwärts gehen. Und hier sehen Sie diese drei Punkte. Wenn Sie darauf klicken, haben Sie viele andere Optionen für die Textbearbeitung. Wir werden dies erkunden, wenn wir unsere Nike App in den kommenden Videos erstellen, Der wichtigste Tipp, den ich Ihnen einen relativen Test geben werde , ist, dass wir annehmen, wir haben drei Textebenen hier. Wenn ich auf diesen linken Text klicke, sehen Sie, dass er rechts ausgerichtet ist. Also ändere es in ausgerichtete links. In ähnlicher Weise verketten Sie die zentrale Textausrichtung an die Mitte und direkt neben der rechten Linie. Damit Tests gut aussehen, wenn Sie es auf einen Knopf setzen , der entweder in der Mitte, rechts oder links platziert wird. Das letzte, was ich Ihnen sagen werde, ist über das Ebenen-Panel lebt am wichtigsten Teil jedes Designs. Sie also hier im Ebenenbedienfeld OrganisierenSie also hier im Ebenenbedienfeld immer Ihre Ebenen. So können Sie Ihre Ebenen ganz einfach finden, wann immer Sie sie brauchen. Angenommen, Sie wählen zwei oder mehr als zwei Ebenen und drücken Sie die Steuerung G, Sie können diese Ebenen gruppieren und umbenennen, was Sie wollen. Sagen wir Knopfgruppe. Und denken Sie daran, dass Ebenen ein wichtiger Teil der Arbeit mit Web- und App-Designs sind , da sie Ihre Inhalte balkanisiert halten. Und es erleichtert die endgültige Ebene und wer arbeitet, und so arbeiten Sie mit Text und Schriftarten in FISMA. Wir sehen uns im nächsten Video. Wir werden mit Komponenten arbeiten. 13. Arbeiten mit Komponenten: Willkommen zurück. In diesem Video werden wir sehen, was unsere Komponenten und wie man mit Komponenten arbeitet. Die Elemente, die im Konstruktionssystem nutzbar sind, werden als Komponenten bezeichnet. In den meisten Programmen wird es auch Symbole genannt. Aber in FISMA werden diese wiederverwendbaren Elemente Komponenten genannt. Also in diesem Video, werden wir untersuchen, wie eine Bearbeitungskomponenten zu erstellen. Lassen Sie uns zunächst eine Statusleiste oben und eine Schaltfläche am unteren Rand unseres zweiten Rahmens erstellen. Danach wählen Sie diese oben Statusleiste aus, und klicken Sie hier auf diese Komponente erstellen. Sie können auch die Tastenkombination Alt und K drücken und jetzt sehen Sie, es ist unsere Master- oder Elternkomponente. Denken Sie daran, es gibt zwei Arten von Komponenten. Master, unser Elternteil und eine untergeordnete Komponente. Derzeit haben wir Master-Komponente, um seine untergeordnete Komponente zu erstellen, kopieren und auf den dritten Frame eingefügt. Und hier sehen Sie diese leere Komponente, was bedeutet, dass es eine untergeordnete Komponente nach oben erste Statusleiste ist. Nun ist das Beste hier, dass, wenn ich die Eigenschaften der Master-Komponente ändere, sagen wir Farbe auf Rot. Diese Änderung wird auch auf sein untergeordnetes Element reflektieren. Wenn ich die Farbe des Kindes ändere, wirkt sich dies nicht auf sein übergeordnetes Element aus. Und wenn Sie eine große Anzahl von untergeordneten Komponenten haben und Sie über die übergeordnete Komponente wissen möchten. Dazu klicken Sie einfach mit der rechten Maustaste auf das Kind und von hier aus, wählen Sie einfach, gehen Sie zur Hauptkomponente. Dies wird Sie also direkt zum übergeordneten Element dieses untergeordneten Elements bewegen. Es ist so einfach wie das. Und wenn Sie möchten, dass die Änderungen im übergeordneten Element nicht in seinem untergeordneten Element widerspiegeln, können Sie die Instanz trennen, was bedeutet, dass dies nicht aktualisiert wird, wenn wir die Master-Instanz aktualisieren. Um dies zu tun, klicken Sie einfach mit der rechten Maustaste auf die untergeordnete Instanz und lösen Sie die Instanz. Und jetzt werden alle materen Komponentenänderungen nicht auf das Kind reflektieren. Distanz. Komponenten in Sigma können wirklich leistungsfähig sein, nur weil sie es Ihnen ermöglichen, Inhalte wiederzuverwenden. Also werde ich vorschlagen, dass, wenn Sie Dinge haben, die Sie immer wieder verwenden werden, Komponenten daraus erstellen. Das nächste, was wir uns ansehen werden, ist, dass wir uns etwas ansehen werden, das als Einschränkungen bezeichnet wird. Wir sehen uns im nächsten Video. 14. Arbeiten mit Einschränkungen: Willkommen zurück. In diesem Video werden wir sehen, wie man mit Einschränkungen bei 1000 von Geräten auf dem Markt arbeitet . Jedes Gerät hat seine eigene Auflösung. Für all diese Bildschirme zu entwerfen wäre eine hektische Aufgabe. Stattdessen möchten wir, dass unser Design flexibel und reaktionsschnell ist, damit sie sich an neue Bildschirme anpassen können. Testen wir es. Fügen Sie zunächst eine Ellipse von 200 mal 200 hinzu und legen Sie sie in die Mitte. Jetzt haben wir hier im Eigenschaftenfenster verschiedene Abhängigkeiten Option auf der X-Achse. Wir können Links, Rechts, Links und Rechts, Mitte und Skalierung Abhängigkeiten hinzufügen. Und auf der Y-Achse können wir obere, untere, mittlere Skalierungsbeschränkungen hinzufügen . Derzeit sind unsere Ellipsen auf Standard gesetzt. Wenn wir das überprüfen, töten wir diesen Rahmen. Hier sehen Sie, wie wir den Schrei nach oben skalieren oder Ellipse wird sich damit dehnen. Während, wenn wir diesen Rahmen nach rechts strecken oder Ellipse wird nicht mit ihm dehnen. Wenn wir auch die linke Einschränkung ändern, richtig? Sie sehen, es dehnt sich nach rechts, wenn wir den Rahmen starten, und es bleibt diesmal nicht nach links. Und wenn wir diese feste Position beim Scrollen überprüfen, wird es ihre Position fixieren, ob wir studiert haben oder nicht. Und so einfach ist es, Einschränkungen anzuwenden. Diese Funktion ist sehr hilfreich bei der Gestaltung ansprechender Websites, Apps und anderer Designs. Also arbeiten wir mit Einschränkungen ist großartig. Wenn Sie Inhalte auf unterschiedlich große Bildschirme setzen müssen oder Skala werden zum Beispiel abgeschirmt. Und das bringt uns zum Ende dieses Videos. sehen euch im nächsten Video, wir werden sehen, was Virgin und Sigma Apps ist. 15. Versionierung: Willkommen zurück. In diesem Video werden wir sehen, was persische und Variantengeschichte in Fichman ist. Sigma bietet in jeder Datei, die Sie erstellen, sehr unkontrolliert. Und das ist eine wirklich gute Möglichkeit, vorherige gespeicherte Version anzeigen zu können, eine vorherige Version wiederherzustellen, Dinge zu kommentieren. In diesem Video werden wir also über die Versionskontrolle sprechen, um den Versionsverlauf zu sehen, stellen Sie sicher, dass nichts ausgewählt ist. Und Sie können den Namen der Datei hier oben sehen, klicken Sie in den Pfeil auf der rechten Seite, und Sie werden zeigen Versionsverlauf. Jetzt auf der rechten Seite sehen Sie den Versionsverlauf. Das Beste daran ist, dass, wenn Sie Bewegungen oder Änderungen oder solche Dinge vornehmen, es automatisch für Sie speichern wird. Wenn du hier unten zurückblickst, wirst du all die verschiedenen Zeiten sehen, in denen du Dinge getan hast. Und wenn Sie auf eine dieser vorherigen klicken, werden Sie sehen, wird Ihnen zeigen, wie es hier aussehen wird. Nun, das gibt uns nur eine Vorschau. Wenn wir wirklich wollen, um dies die Version, die Konvertierung. Wenn Sie hier zur Ellipse kommen, können Sie die Wiederherstellung dieser Version sehen. Sie können es auch duplizieren oder kopieren Sie es Link oder benannte Dispersion. Angenommen, Sie testen eine neue Funktion in einem App-Design und Sie haben dieses brillante sagen, Testen des Seitenmenüs. Fügen Sie eine Beschreibung hinzu, wenn Sie möchten. Und lasst uns auf Speichern drücken. Dadurch können andere Teammitglieder sehen, dass die Sharia das Site-Menü testet. Jetzt können Sie es diese Versionsinfo hinzufügen. Nehmen wir an, das Hamburgermenü ist fertig. Und jetzt vervollständigen Sie diese Versionsinfos auch. Es ist also nur ein Weg für uns, wenn wir mit Menschen zusammenarbeiten und ihnen sagen wollten , was wir tun und was wir betrachten. Und das bringt uns zum Ende dieses Videos. sehen uns im nächsten Video, wir werden sehen, was unsere iOS-Richtlinien und wie sie in unserem kommenden Nike App-Projekt zu verwenden. 16. Leitlinien für iOS verstehen und erstellen: Willkommen zurück. In diesem Video werden wir sehen, welche Richtlinien und wie sie in unserem kommenden Nike App-Projekt verwendet werden. Richtlinien enthalten Empfehlungen zur Anwendung von Designprinzipien, um ein positives Benutzererlebnis zu bieten. Richtlinien zur Verwendung von Designern, um überzeugende Designs zu erstellen und die Benutzeranforderungen zu erfüllen und zu übertreffen. Dieser Kurs konzentriert sich in erster Linie auf iOS-Richtlinien. Daher sind wir in diesem Kurs nicht über das Material oder die Android-Richtlinien abgedeckt. Lassen Sie uns also dieses Video beginnen, indem ein Design-Richtliniensystem für unser bevorstehendes Nike Air Projekt erstellen. So erstellen Sie eine Entwurfsrichtlinie. Erstellen Sie zunächst einen Rahmen. Jetzt werden wir Lineale in diesem Rahmen hinzufügen. So Lineale hinzufügen, pester, hotkey, Shift R, um Lineale zu aktivieren. Und jetzt greifen Sie zwei Lineale von links und plus eins nach rechts und eins nach links mit einem gleichen Abstand von 16 Pixeln. Um genaue Lineale hinzuzufügen, zeichnen Sie hier ein Rechteck, ändern Sie seine Farbe in Schwarz, damit es sichtbar ist. Und jetzt ändern Sie seine Breite auf 16 Pixel und richten Sie die Lineale an diesem Rechteck aus. Verschieben Sie dieses Rechteck in der oberen Mitte, und ändern Sie seine Höhe in 44 Pixel. Und jetzt noch ein Lineal hier. Verschieben Sie dieses Rechteck nach unten und fügen Sie hier ein weiteres Lineal hinzu. Dieser erste Teil ist für die Statusleiste des iPhone. Und der zweite Teil ist für den Titel und die Zurück-Taste. Verschieben Sie nun diese rechteckige Stadt und fügen Sie hier zwei Lineale hinzu, eines für das Home-Indikator-Symbol und eines für das Registerkartenmenü. Segne es, mit dem gleichen Abstand an der Unterseite. Und jetzt sind unsere Richtlinien für iOS erfolgreich erstellt. Ich habe diese Datei mit diesem Kurs zur Verfügung gestellt, sie herunter und benutze sie. Es enthält auch die Schriftart, Bilder, Symbole und Farben, die wir in unserem Projekt verwenden. Also lade bitte diese Datei herunter und in den kommenden Videos werden wir anfangen, die Nike App in Fichman zu bekommen, damit ihr wisst, wie man einen echten Aufbau in FISMA bekommt. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 17. App-Übersicht: Willkommens-Extraminuten. Ab diesem Video beginnen wir mit der Erstellung unserer realen App in FISMA. Die App, die wir bauen werden, ist Nike Einkaufswagen-App, von wo aus Sie verschiedene Arten von Schuhen kaufen können. Außerdem werden wir die Bildschirme verknüpfen, um Interaktion zwischen den Bildschirmen der Nike App zu schaffen. Es sieht also aus wie eine echte App. Also im nächsten Video, werden wir unsere App Begrüßungsbildschirm erstellen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 18. UI: Willkommen zurück hierbei. In diesem Video werden wir unseren App-Begrüßungsbildschirm erstellen. Die von mir bereitgestellten Übungsdateien enthalten die gesamte Schriftart und Typografie. Also zuerst, lassen Sie uns das in unserer Demo-Datei setzen. Wählen Sie die Farbe einzeln aus. Und hier auf der rechten Seite, klicken Sie auf diese Phil farbigen Punkte. Und von hier aus, klicken Sie auf dieses Plus-Symbol, um unsere Farbstile zu erstellen und ihm einen Namen zu geben. Nehmen wir an, Hash Triple zu Triple to Triple to. Klicken Sie nun auf diese Schaltfläche „Stil erstellen“. Drücken Sie in ähnlicher Weise erneut die Plus-Taste und fügen Sie die restlichen Farben zu dieser Liste hinzu. Jetzt sind unsere Farben in den lokalen Stilen platziert. Lassen Sie uns auch Schriftart zum lokalen Stil hinzufügen. In ähnlicher Weise tun Sie das gleiche wie bei Farben. Diesmal auf den Namen der Schriftart mit ihrer Größe, S-Name. Kopieren Sie den Namen der Schriftart. Klicken Sie auf diese Türen, klicken Sie auf das Plus-Symbol, und fügen Sie nun den Text ein, so dass wir wissen, dass es eine Überschrift von 49 Punkten ist. Das gleiche Verfahren mit allen anderen Schriftarten als auch. Von hier aus beschleunige ich das Video. Und jetzt, wenn ich diesen Text hier auf der rechten Seite auswähle, sehen wir alle unsere lokalen Stile, die wir in der Nike App verwenden werden. Und jetzt beginnen wir mit der Erstellung des Begrüßungsbildschirms für unsere App. Erstens, populären Rahmen, der mit diesem Kurs Übungsdateien zur Verfügung gestellt wird. Und jetzt werden wir dies zu Splash-Screen ändern. Führen Sie zunächst die Titelleiste und das getippte Menü. Doppelklicken Sie danach im Eigenschaftenbedienfeld auf den Rahmen und benennen Sie ihn in einen Begrüßungsbildschirm um. Es ist eine sehr gute Technik, um Ihren Rahmen umzubenennen, so dass Sie leicht damit arbeiten können. Wählen Sie nun hier das Rechteck-Werkzeug aus und zeichnen Sie Rechteck über diesen Rahmen und ändern Sie seine Farbe in dunkle Farbe. Und hier im Eigenschaftenbedienfeld, verschieben Sie dieses Rechteck nach unten und ändern Sie seinen Namen in Packer. Wie änderte sich dadurch die Farbe des Indikators und der Statusleiste auf Weiß? So sehen sie sichtbar aus. Heißer, die das Nike-Logo aus den Übungsdateien importieren und es hier einfügen und horizontal und vertikal zentrieren. Nun, Seligkeit geschaffen, gibt es Hoffnung für dieses Video. Wir sehen uns im nächsten Video. 19. UI: Willkommen Exzellenz. In diesem Video werden wir einen Anmeldebildschirm erstellen. Erstens, copy tut Setup prim und verschieben Sie es nach rechts, indem Sie die Taste All drücken. Jetzt kopieren Sie einfach das Nike-Logo und verschieben Sie es hierher. Schrumpfen Sie es auf etwa 78 um 28. Und jetzt Cellectis Titelleiste und diese lokale durch Drücken der Umschalttaste und richten ihre Mitte horizontal und vertikal. Jetzt löschen Sie einfach diesen Titel par. Und danach machen Sie eine Ellipse von etwa 220 mal 220. Aus diesem die Kunst und verschieben Sie sie zusammen und machen eine Kopie dieser Ellipse und schrumpfen sie auf etwa 166 von 1-6, 5-6. Jetzt lassen Sie beide einfach und richten Sie sie zentrieren. Und ändern Sie einfach die Farbe der beiden Ellipsen in diese dritte Farbe aus unserer Liste. Ändern Sie danach die Deckkraft der äußeren Ellipse auf 20%. Es sieht also schön aus. Und gruppieren Sie sie auch zusammen, indem Sie beide mit der Umschalttaste auswählen und drücken Sie die Taste G. Jetzt platzieren Sie sie einfach minus 90 am Ausgang und minus 80 an der Y-Achse. Danach wurde diese Gruppe im Eigenschaftenfenster in Ellipsengruppe umbenannt und im Eigenschaftenbedienfeld nach unten verschoben. Jetzt nur auf Tiki gedrückt und getrocknet anmelden und ändern Sie sein Telefon Nieto und seine Größe zu wissen 40 Semi Board. Und hier ändern Sie seine Breite, 23 AD2 und seine Höhe auf 109, und legen Sie es in der Mitte. Richten Sie danach den Text auch in der Mitte aus. Und jetzt verschieben Sie es mit einem oberen Rand von 25 Pixeln nach oben. Danach bearbeiten Sie Textebene, rechts. Geben Sie Ihre E-Mail-Adresse und Ihr Passwort ein. Ändert Schriftart, Tour, App-Schriftart und seine Größe in 16, halb fett, und platzieren Sie sie mit einem oberen Rand von 0. Ändern Sie nun seine Breite auf 382 und seine Höhe h2, 44 und seine Farbe in dritte Kurvenform der Bibliothek. Danach fügen wir Anmeldefelder hinzu, um unsere Zeit zu sparen. Kopieren Sie das einfach aus den Übungsdateien und fügen Sie es hier ein. Und ordnen Sie diese Felder richtig an und necken Sie die Schriftart, um Nato und Schriftgröße auf 16 zu kennen und gruppieren Sie diese Felder auch. Danach änderte sich die Farbe dieses Passwort vergessen Text, flüssige Thema Farbe. Jetzt ist es an der Zeit, eine Anmeldeschaltfläche hinzuzufügen. Zeichnen Sie also ein Rechteck von etwa 350 mal 44, ändern Sie seinen Randradius in 20. Richten Sie den Mittelpunkt horizontal aus und füllen Sie ihn mit einer dunklen Farbe für unsere Bibliothek. Drücken Sie nun, dass Tiki und schreiben Sie, melden Sie sich auf diese Last und ändern Sie sein Telefon auf 16 extra langweilig. Ändern Sie danach die Textfarbe in weiße Farbe. Zeigt nun diese Schaltfläche mit einem oberen Rand von 50 Pixeln an. Danach drücken Sie den Tiki und dunklen Textbereich. Und hier, richtig, haben Sie kein Konto Anmeldung. Schriftart dieses ersten Textes wurde auf 16 (halbfett) geändert. Und dieser Anmeldetext2, 16, extra fett. Und ändern Sie auch seine Farbe und geben Sie ihm eine zugrunde liegende, NICHT nur eine Linie, dieser ganze Text zentrieren vertikal und platzieren Sie es mit einem oberen Rand von 20 Pixeln. Erstellen Sie nun eine Kopie dieses Textes, verschieben Sie ihn um 30 Pixel nach unten und benennen Sie ihn in die Anmeldebreite um. Danach Punkt gleich Linien von 116 Pixel und platzieren Sie eine Zeile nach links und eine nach rechts mit einem Abstand von 16 Pixel von den Seiten. Wählen Sie nun diese Linien und diesen Text aus und richten Sie sie vertikal zentriert aus. Und ändern Sie auch die Strichfarbe in diese C6-Farbform einer Liste. Und hier und seine Social-Media-Elemente, cobia Social-Media-Icons aus den Übungsdateien und hier eingefügt. Danach platzieren Sie sie mit einem oberen Rand von 30 Pixeln. Verschieben Sie diesen Text schließlich nach unten und ersetzen Sie ihn durch überspringen. Jetzt Text, Ausrichtung Mitte und und ändert Farbe, blaue Lichtfarbe. Und benennen Sie diesen Frame in den Anmeldebildschirm um. Und das bringt uns zum Ende dieses Videos. Wir sehen uns im nächsten Video. 20. Account: Willkommens-Extraminuten. In diesem Video erstellen wir einen Bildschirm zur Kontowiederherstellung. Kopieren Sie zunächst den vorherigen Frame und verschieben Sie ihn nach rechts, indem Sie alle Qis drücken. Und danach benennen Sie diesen Frame in den Account Recovery-Bildschirm um. Benennen Sie danach diese Anmeldung in die Kontowiederherstellung um. Und diese zweite X2 Ich zurücksetzen Link wird auf Ihre E-Mail gesendet werden. Danach löschen Sie dieses E-Mail-Feld und diesen gefalteten Passworttext, und jetzt nur diesen taub umbenannt, um Ihre E-Mail einzugeben. Danach lassen Sie uns nach unten gehen. Und hier, führen Sie einfach all das, außer mit diesem Knopf. Und schließlich, benennen Sie diese Schaltfläche um zu senden. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 21. Reset: Willkommen zurück Studenten. In diesem Video werden wir den Reset-Bildschirm erstellen. Kopieren Sie zuerst den Anmeldebildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken und ihn umbenennen, um den Bildschirm zurückzusetzen. Benennen Sie danach diese Anmeldung zum Zurücksetzen um und diesen zweiten Text, um Ihr neues Passwort einzugeben. Und nun umbenannt dieses E-Mail-Feld, um neues Passwort und Passworteinzugeben neues Passwort und Passwort und Passwort Tx2 und Passwort zu bestätigen. Jetzt legte nur diese vergessen Passwort und all dies unter dieser Schaltfläche vorbei lassen all dies und drücken Sie Löschen Taste von Ihrer Tastatur. Schließlich benennen Sie diesen Schaltflächentext um, um ihn zurückzusetzen. Richten Sie den Mittelpunkt richtig aus. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 22. Bildschirm: Willkommen bei den Exponenten. In diesem Video erhalten wir einen Anmeldebildschirm. Kopieren Sie zunächst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken und ihn umbenennen, um den Anmeldebildschirm zu registrieren. Benennen Sie danach diesen Reset um, um sich anzumelden. Und dieser zweite Text, um zuerst Ihr Konto zu erstellen. Jetzt werden wir hier zwei weitere Felder hinzufügen. Bewegen Sie diesen Knopf hier nach unten. Verschieben Sie einfach dieses zweite Feld nach unten, indem die ALT- und Shift-Taste zusammen übergeben und zwei Kopien davon erstellen. Benennen Sie danach dieses erste Feld in Vollname, zweites Feld in E-Mail um. Drittes Feld zu Passwort. Wechseln Sie nicht den vierten. Jetzt fügen wir ein Symbol mit diesen Passwortfeldern hinzu. Also schnappen Sie sich einfach das Symbol aus den Übungsdateien und schieben Sie es hier. Und jetzt fliegen sie richtig. Kopieren Sie danach diese Textzeile aus den Logins und Patienten hierher, verschieben Sie sie unter diese Schaltfläche und ändern Sie den Text, um bereits ein Konto zu haben. Einloggen. Schließlich ändern Sie einfach den Text- und Tastenabstand auf 20 Pixel. Und schieben Sie die beiden nach oben. Und bewegen Sie diese beiden mit einem oberen Rand von 50 Pixeln nach oben. Und jetzt ist unser Bildschirm fertig. Wir sehen uns im nächsten Video. 23. Heimatbild 1: Willkommen zurück. In diesem Video werden wir Startbildschirm eins erstellen. Dies ist der Startbildschirm, bevor sich ein Benutzer bei der App anmeldet. Kopieren Sie zunächst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken, und benennen Sie ihn dann in den Startbildschirm eins um. Danach löschen Sie einfach alle diese außer diesem Logo und der oberen Leiste. Und jetzt drücken Sie einfach, dass Tiki und schreiben Kategorien. Es ist 0.222 und platzieren Sie es mit einem oberen Rand von 20 Pixeln. Nun lassen Sie einfach dieses bestimmte Werkzeug und zeichnen Sie ein Rechteck von etwa 85 mal 100. Zeichnen Sie danach eine Ellipse von etwa 66 mal 66. Richten Sie sie zentriert vertikal und horizontal aus. Machen Sie nun drei Kopien davon und legen Sie sie mit einem gleichen Abstand zwischen ihnen. Jetzt belästigen Tiki und Recht Snickers. Zinn ist Telefon zu 12, halb fett. Und legen Sie es in dieses erste Rechteck mit einem oberen Rand von zehn Pixeln. Dann machen Sie auch vier Kopien davon. Danach ist es an der Zeit, Bilder zu diesen Ellipsen hinzuzufügen. Wählen Sie diese vier Ellipsen aus. dieser Symbolleiste Wählen Sie indieser Symbolleistedas Platzbild aus, und wählen Sie aus den Übungsdateien die gewünschten Bilder aus. Und jetzt hier, klicken Sie auf diesen Kreis, um Ihr Wunschbild in diesem Kreis zu platzieren. Um dieses Bild in diese Lippen zu passen. Drücken Sie nach oben und doppelklicken Sie auf dieses Bild, um in dieses Bild zu gelangen. Und von hier, richtig. Wählen Sie danach diese vier Ellipsen aus und geben Sie ihnen einen Lichtstrich. Ändern Sie die Größe in zwei. Und hier auch zehn Namen. Ändern Sie nun diese erste Ellipse und Textfarbe in eine Designfarbe. So sieht es prominent aus und der Benutzer weiß, dass diese Kategorie derzeit ausgewählt ist. Und jetzt lassen Sie das alles und legen Sie sie mit einem oberen Rand von 30 Pixeln. Danach blenden Sie diese Rechtecke aus, indem Sie auf das Symbol im Eigenschaftenbedienfeld klicken. Jetzt werden wir hier Produkte hinzufügen. Also zuerst, verschieben Sie diesen obigen Text nach unten. Der obere Rand von 30 Pixeln und benennen Sie es in Entwässerungsschuhe um. Danach zeichnen Sie Rechteck von etwa 181, aber 211, ändern Sie seinen Randradius in 20. Zeichnen Sie ein weiteres Rechteck von etwa 139 mal 107, platzieren Sie es mit einem Rand von 15 Pixeln und ändern Sie auch den Randradius. Danach kopieren Sie das Herz-Symbol aus den Übungsdateien. Machen Sie es offensichtlich Komponente durch Klicken auf diese Komponente Schaltfläche und machen Sie eine Kopie davon und legen Sie es hier. Danach verbündete sich geeky zu Produktnamenänderungen, Telefon 16 Board. Segne es, mit einem linken Rand von zehn und einem oberen Rand von fünf Pixeln. Danach machen Sie zwei Kopien dieses Textes. Halten Sie ihn gedrückt und zinn den zweiten dx2 Kategorienamen. Und der dritte Text zum Preis. Auch das zweite x Telefon geändert, um fett zu bleiben, und ändern Sie diese erste Rechteck-Farbe in eine helle Farbe mit 30% Deckkraft aus unserer Liste. Danach werden wir einen Warenkorb-Button hinzufügen. Zeichnen Sie also ein Rechteck von etwa 41 mal 41. Es ist Grenzradius zu fünf von drei Seiten, aber 20 von unten rechts. Platzieren Sie es richtig. Und es wird gehen. Tim Keller. Fügen Sie auch Plus-Symbol über diese Schaltfläche hinzu. Kopieren Sie das Symbol aus den Übungsstapeln und platzieren Sie es darüber. Dies brachte ihn richtig strukturierten Israeli, machen drei Kopien davon und legen Sie es auf diesem Rahmen richtig. Hier unten. Lassen Sie uns unsere zehn Menü hinzufügen. Kopieren Sie das aus den Übungsdateien und fügen Sie es hier ein. Schließlich werden wir Bilder hinzufügen, gehen Rechtecke und verkettete Preise und Namen der Artikel. Das ist also ein langwieriger Prozess. Also beschleunige ich den Prozess hier. Und jetzt ist unser Bildschirm fertig. Dezimalzahl für dieses Video. Wir sehen uns im nächsten Video. 24. Profilbild 1: Lassen Sie sie zusätzliche Minuten. In diesem Video werden wir einen Profilbildschirm erstellen, einen. Dies ist der Profilbildschirm, bevor sich ein Benutzer bei der App anmeldet oder sich bei der App anmeldet. Kopieren Sie zunächst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken und ihn in den Profilbildschirm umbenennen. Eins. Danach führen Sie einfach all dies außer dieser oberen Leiste und diesen Tabs. Und nun zeichnen Sie einfach Rechteck von etwa 404 mal 100, um seine Farbe in den vierten Füllstoff mit 20% Deckkraft zu ändern und seinen Grenzradius zu ändern. Untere linke und rechte Ecken bis 40. Danach Senat hinter dieser oberen Leiste in der Ebenen-Panel. Danach drücken Sie, dass Tiki und das rechte Plug-in kollidieren, erstellen Sie ein Konto, ändern Sie sein Telefon auf 18 und platzieren Sie es mit einem unteren Rand von 25. Jetzt machte zwei Kopien davon, zog sie nach unten. Zunder Telefon 16, regelmäßig und benennen Sie die ersten beiden, meine Befehle. Und das zweite X2 Help Center. Und jetzt werden wir hier Symbole hinzufügen. Also schnappen Sie sich einfach die Elemente aus den Übungsdateien. Oder vielleicht können Sie einfach diese Wohnung hinzufügen. Ich kann Ihre häufigen Plug-in und importieren Icons von dort. Nachdem Sie die Symbole importiert haben, ist es an der Zeit, sie richtig zu platzieren. Also schnappen Sie sich einfach ein Rechteck von etwa 33 mal 29, machen Sie eine Kopie davon und verschieben Sie es nach unten. Platzieren Sie nun die Elemente über diese Rechtecke. Drucken Sie die Symbole nach vorne, und richten Sie sie richtig aus. Gruppieren Sie diese Symbole nun mit diesen Rechtecken und richten Sie diesen Text richtig an diesen Symbolen aus. Und ändern Sie den internen Abstand zwischen Text und Rechtecken auf 20 und den horizontalen Abstand auf 40 und weniger drücken Sie auf 24. Schließlich machen Sie eine Kopie des obigen Textes, Moby unten, benennen Sie ihn in Geschäftsbedingungen um. Und diese Rechtecke, indem Sie auf dieses Symbol im Eigenschaftenbedienfeld klicken. Ändern Sie nun die Farbe dieses Profilelements auf der unteren Registerkarte eine Designfarbe, damit ein Benutzer weiß, dass sich das Steuerelement auf dem Profilsymbol befindet. Und jetzt ist unser Bildschirm fertig. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 25. Home 2: Willkommen zurück Studenten. In diesem Video werden wir auch einen Home-Bildschirm erstellen. Dies ist der Bildschirm, nachdem sich der Benutzer bei der App anmeldet. Kopieren Sie also zuerst die Bildschirmnummer vier und verschieben Sie sie nach rechts, indem Sie die ALT-Taste drücken. Und jetzt benennen Sie es in den Home-Bildschirm um. Zu. Danach fügen Sie einfach ein Warenkorb-Symbol hinzu, kopieren Sie es aus den Übungsdateien und fügen Sie es hier ein, richten Sie es richtig aus. Und jetzt hier, ändern Sie diese beiden heftigen Symbolfarbe in eine Themenfarbe. Und das ist unser Benutzer. Fügen Sie diese Elemente zu seiner Lieblingsliste hinzu und unsere Haut ist abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 26. Produktliste: Willkommen zurück. In diesem Video erstellen wir einen Produktlistenbildschirm. Also kopieren Sie zuerst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die Alt-Taste drücken, gewinnen Sie ihn in die Produktliste Bildschirm. Löschen Sie danach diesen Kategorieabschnitt und diese Schritte. Und jetzt verschieben Sie einfach die verbleibenden mit einem oberen Rand von 20 Pixeln nach oben. Nicht nur in dieser Überschrift zwei Turnschuhe umbenannt. Und hier, füllen Sie einfach diesen leeren Raum mit diesen obigen Artikeln. Zu guter Letzt fügen Sie hier einfach einen Zurückpfeil hinzu. Kopieren Sie das also einfach aus den Übungsdateien und fügen Sie es hier ein und platzieren Sie es richtig. Und jetzt Bildschirme abgeschlossen. Es gibt Hoffnung für dieses Video. Wir sehen uns im nächsten Video. 27. Product: Willkommen extra S. In diesem Video werden wir einen Produktdetail-Bildschirm erstellen. Kopieren Sie also zuerst den vorherigen Bildschirm und bewegen Sie sich nach rechts, indem Sie die ALT-Taste drücken und ihn in den Produktdetailbildschirm umbenennen. Danach löschen Sie diesen Snickers-Abschnitt und füllen Sie den Hintergrund mit der vierten Farbe aus einer Liste mit 20% Deckkraft. Danach, bei Rechtecken über diesen Rahmen. Senat hinter dem Topper und füllen Sie es mit weißer radialer Farbe. Danach verschieben Sie es von diesen Griffen und platzieren Sie es richtig hier. Importieren Sie nicht nur das Bild des Schuhs hier. Kopieren Sie das aus den Übungsdateien und platzieren Sie es hier richtig mit einem oberen Rand von 20 Pixeln. Zeichnen Sie nicht nur für Ellipsen von 15 mal 15. Segnen Sie sie mit 15 Pixeln Abstand und einem oberen Rand von 20 Pixeln. Und gruppieren Sie sie und richten Sie sie richtig zentrieren. Nicht nur eine Füllung dieser drei Ellipsen entfernt und geben ihnen die gleiche Strichfarbe. Danach zeichnen wir ein Rechteck um 414 um 5.3.2, ändern Sie seine Farbe in Weiß und seinen oberen Eckenradius auf 40. Und platzieren Sie es hier mit einem oberen Rand von 30 Pixeln. Jetzt werden wir einige Details über das Produkt hier hinzufügen. Also für Schulden, zuerst, schreiben Größe, machen 13 Kopien dieses Textes. Und jetzt ketten Sie den ersten Text auf 18. Für. Jetzt werde ich diese Textebenen ändern. Es ist ein langwieriger Prozess, schwamm, der den Prozess hier beschleunigt. Nun habe ich diese Textebenen geändert. Lassen Sie mich Ihnen sagen, dass wir keine reine schwarze Farbe verwenden. Also ersetzen Sie einfach die schwarze Farbe mit unserem Takeaway aus unserer Liste. Und dieser Absatz Text zu dieser dritten Kurve aus unserer Liste. Und jetzt werden wir all das arrangieren. Es sieht also schön aus. Zeichnen Sie zunächst Rechtecke um 55 mal 25. Ändern Sie den Rahmenradius auf fünf, und platzieren Sie sie hinter diesen Textebenen. Richten Sie danach diese Textebenen mit diesen Rechtecken aus. Ändern Sie nun die zweite Rechteck-Farbe in eine Designfarbe und die Textfarbe in Weiß. Danach richten Sie diese Rechtecke innerhalb eines internen Abstands von 20 Pixeln zwischen Rechtecken und 30 Pixeln aus. Aus dieser Testüberschrift ein oberer Rand von 50 Pixeln angezeigt. Und jetzt verstecken Sie einfach die restlichen Rechtecke. Jetzt werden wir den Mengenzähler addieren. Zeichnen Sie also ein Rechteck von etwa 150 mal 35, ändert den Portradius in fünf. Und es ist gefärbt zu heller Farbe. Zeichnen Sie nun zwei Rechtecke von etwa 46 mal 33 Stunde. Dieses Rechteck ändert ihren Grenzradius auf fünf von allen Seiten und ihre Farbe zu kämpfen. Richten Sie sie richtig aus. Jetzt machte zwei Kopien dieses Textes und ändern Sie sie in Minus und Plus. Mit einer Größe von 30, regelmäßig in dieser Mitte Text 22 halb Boot. Auffällig wie dieser ganze Knopf und gruppieren Sie ihn als eine. Und danach richten Sie seine Mitte vertikal mit diesem Text aus und platzieren Sie ihn mit einem oberen Rand von 20 Pixeln. Jetzt beschleunige ich den Prozess hier, weil ich Textabstand auf 2030 Pixel vorschlage. Nach diesem Abstand ist es an der Zeit, hier Bewertungssterne und eine Schaltfläche hinzuzufügen. Kopieren Sie einfach die Sterne aus den Übungsdateien und fügen Sie sie hier ein. Und auch die Schaltfläche, da dies eine vordefinierte Schaltfläche ist, die in iOS-Richtlinien zur Verfügung gestellt wird. Schließlich werde ich diese Schaltfläche kopieren, sie auf etwa 160 mal 44 verkleinern und hinter diesem Lieblingstext platzieren. Ändern. Es ist Farbe bis hell mit 30% Deckkraft. Und füge ein Lieblings-Icon hinzu. Kopieren Sie das Favoritensymbol vom vorherigen Bildschirm und platzieren Sie es hier richtig. Und jetzt ist unsere Haut vollendet. Ihre gesucht für dieses Video. Wir sehen uns im nächsten Video. 28. Cart: Willkommens-Extraminuten. In diesem Video werden wir einen Warenkorbbildschirm erstellen. Kopieren Sie also zuerst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken und ihn auf den aktuellen Bildschirm umbenennen. Löschen Sie das alles, und fügen Sie zwei Rechtecke von etwa 382 mal 147 und änderten ihren Randradius auf 15 und ihre Farbe in Weiß. Danach kopieren Sie das dritte Rechteck vom vorherigen Bildschirm, schrumpfen Sie es auf etwa 404 um vier Fuß fünf. Jetzt werden wir die Dinge über diese Rechtecke legen. Erstens, Punkte zwei Rechtecke von etwa 100 mal 100 über diese vitalen Verwicklungen. Und jetzt fügen Sie Bilder der Produkte in diese beiden ein. Und Maskottchen mit Form. Jetzt kopieren Sie einfach das Produkt im Volltext vom vorherigen Bildschirm und fügen Sie es hier ein und richten Sie es richtig aus. Danach richten Sie diese Textebenen links mit einem linken Tempo von 20 Pixeln aus. Und hier beträgt der Abstand fünf Pixel von rechts. Ähnlich fügen Sie ein anderes Produkt hinzu. Hier. Ich werde nur den Prozess hier beschleunigen. Jetzt gehen wir zum unteren Teil hier. Zunächst einmal, pester Tiki und richtige Lieferadresse. Platzieren Sie es mit einem oberen Rand von 30 Pixeln. Danach erstellen Sie neun Kopien dieses Textes und verschieben Sie sie nach unten. Lassen Sie uns nun alle diese Textebenen ersetzen. Von hier aus beschleunige ich den Prozess. Damit du dich nicht langweilig wirst. Jetzt bin ich wieder da. Danach. Punktieren Sie hier zwei gepunktete Linien von etwa 150 Pixeln. Und hier im Eigenschaftenfenster, klicken Sie auf diesen Strich, änderte seine Striche zu, um ihm ein schönes Aussehen zu geben. Raus aus dem. Kopieren Sie die Favoritenschaltfläche vom vorherigen Bildschirmpatienten hier und ändern Sie den Text, um ihn richtig zentriert zu ändern und auszurichten. Dieses Schiff. Nach dieser Ellipse von etwa 16 mal 16. Füllen Sie es mit unserer Teamfarbe. Dendrite. Ändern Sie die Schriftgröße auf zehn, platzieren Sie sie über diese Ellipse und richten Sie sie richtig aus. Gruppieren Sie es auch zusammen. Und hier, legen Sie das einfach über dieses Warenkorb-Symbol richtig. Schließlich kopieren Sie einfach die Last aus dem vorherigen Bildschirm und fügen Sie sie hier ein und benennen Sie den Text um, um mit dem Checkout fortzufahren. Und jetzt ist der Bildschirm abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 29. Payment: Willkommen zurück Studenten. In diesem Video werden wir eine Zahlungs-Skin zu bekommen. Kopieren Sie zunächst den vorherigen Bildschirm und verschieben Sie ihn nach rechts, indem Sie die ALT-Taste drücken und dann in den Zahlungsbildschirm umbenennen. Löschen Sie danach den gesamten oberen Teil. Und jetzt zeichnen Sie einfach Rechteck von etwa drei mal 70. Qaida Grenze Radius von etwa 20. Und Kavita weiße Farbe. Jetzt einfach am besten bei Tiki und Fahrt Zahlungsmethode. Seine Schriftart sollte 22 fett sein. Platzieren Sie es nicht nur mit dem oberen und unteren Rand von 20 Pixeln. Danach lassen Sie uns eine Kopie davon erstellen, indem Sie die ALT-Taste drücken und sie nach unten verschieben, ihre Schriftart ändern und sie umbenennen, um Schrägstrich Debitkarte zu graduieren. Bitte es mit dem linken Rand von zehn Pixeln und richten Sie seine Mitte vertikal aus. Zeichnen Sie danach eine Ellipse von etwa 44 mal 44. Ändern Sie die Farbe in helle Farbe mit 30% Deckkraft. Danach wurde ein Häkchen über diese Ellipse hinzugefügt. Kopieren Sie dieses Häkchen aus den Übungsdateien und platzieren Sie es hier. Ändern Sie auch seine Farbe in dritte Farbe aus unserer Listen-API, die mir Kopien dieser Rechtecke erlaubt, verschieben Sie sie mit einem Abstand von 20 Pixeln nach unten. Und jetzt nur Tinder Farben und Text. Hier. Ich beschleunige den Prozess. Jetzt ziehen wir hier runter. Zuallererst wird dieser Teil der Versandadresse angezeigt und die Höhe dieses Rechtecks, 2469, geändert. Hier. Lassen Sie uns diese Preisdetails mit einem oberen Rand von 30 Pixeln nach oben verschieben. Schließlich benennen Sie diesen Schaltflächentext um, um eine Bestellung aufzugeben. Und jetzt ist der Scan abgeschlossen. Es gibt Hoffnung für dieses Video. Wir sehen uns im nächsten Video. 30. Place: Willkommen zurück Studenten. In diesem Video werden wir einen Platzbestellen-Bildschirm erstellen. Also zuerst, kopieren Sie W Haut. Und wenn wir das Recht tun, indem Sie die ALT-Taste drücken und dann umbenennen, um Bestellbildschirm zu platzieren. Löschen Sie danach all dies außer diesem Text und einer Form. Nun ändern wir einfach die Hintergrundfarbe dipolar und diese Textfarbe in helle Farbe. Und dann bewegen Sie es in der Mitte nach unten. Danach löschen Sie einfach verwerfen Element und fügen Sie ein Rechteck von etwa 28 mal 28. Ändert den Umrandungsradius in zehn und seine Farbe in Weiß. Und danach fügen Sie ein Glanzsymbol darüber hinzu. Kopieren Sie das glüht Symbol aus den Übungsdateien Und Besucher, und richten Sie diese beiden richtig aus. Jetzt gehen wir nach unten. Und hier. Zeichnen Sie zunächst eine zufällige Ellipse und ordnen Sie sie zufällig an, so dass das Bildschirmdesign gut aussieht. Danach verschieben wir dieses Häkchen hier. Und jetzt mittlere Kopie dieser Ellipse. Skalieren Sie es auf etwa 104 x 74 und platzieren Sie es hinter dieser Ellipse. Nun, die erste, zweite Ellipse, Farbe, Themenfarbe. Und hier ändert sich die erste Ellipsengröße auf 72 mal 72. Richten Sie sie nun vertikal und horizontal miteinander zentriert aus. Danach senken Sie die Deckkraft des äußeren Kreises auf etwa 20%. Es sieht also schön aus. Bekannt als glatt nach unten. Und hier, benennen Sie diesen Dex in Ordnung platziert und platzieren Sie ihn für den oberen Rand von zehn Pixeln. Danach ändern Sie, diese Schiffsfarbe zu dieser dritten Farbe. Mit 20% Deckkraft Außerdem wurden alle Ellipsenfarben in diese Farbe geändert. Hier, bitte, dieses Rechteck mit zehn Pixeln, oberer Rand. Schließlich, benennen Sie dieses dx2 um. Erwartete Lieferung zu hören. Hear änderte die Schrift der ersten Texte auf 1870 Volt und diese zweite Hälfte auf 18 Volt. So sieht es prominent aus. Danach. Richten Sie es richtig in der Mitte mit diesem Rechteck aus. Ändern Sie hier auch diese Home-Anzeige und Statusleiste Farbe auf weiß, so dass es sichtbar aussieht. Und jetzt ist unser Bildschirm fertig. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 31. Search: Willkommen zurück Studenten. In diesem Video werden wir einen Set-Screen erstellen. Also zuerst kopiert Ihren Bildschirm und bewegen Sie ihn nach unten, indem Sie die All Taste aus, dass, löschen Sie all dies außer dem Nike Logo und Topper. Und danach ändern Sie die Rahmenfarbe auf den vierten Khaled aus unserer Liste mit 20% Fettleibigkeit. Und jetzt kopieren Sie einfach die vordefinierte Suchleiste aus den Übungsdateien. Grundsätzlich ist es hier mit einem oberen Rand von zehn Pixeln. Und jetzt werden wir die letzten Suchanfragen hinzufügen, also fort tot, zeichnen Sie ein Rechteck von etwa 404 mal zwei H6, dann ändern Sie seine Farbe in Weiß und seinen Grenzradius 25. Und dann platzieren Sie es mit einem oberen Rand von 20 Pixeln. Zeichnen Sie danach ein vertikales Rechteck von etwa 48 Höhe. Prof, fünf bis sechs Abschnitte mit einer Trennlinie zwischen ihnen. Und danach drücken Sie, dass dp und rechts Nike Schuhe Modellnummern hier und fügen Sie ein neues Suchsymbol auf der rechten Seite. Hobby, dass ich die Übungsdateien bilden kann. Also von hier aus, wie beschleunigt der Prozess. Und jetzt ändern Sie einfach die Farbe der Linien in die vierte 100 Follower-Liste mit 30% Deckkraft. Und unsere Suche ist fast abgeschlossen. Das letzte, was ich hinzufügen werde, ist, eine Tastatur hinzuzufügen. Kopieren Sie also die Tastatur aus den Übungsdateien und stützen Sie sie hier mit einem oberen Rand von 20 Pixeln. Und jetzt ist unser Bildschirm Dezimal für dieses Video abgeschlossen. Wir sehen uns im nächsten Video. 32. Favorite's: Willkommen zurück Studenten. In diesem Video erhalten wir einen Vollbildmodus. Kopieren Sie zuerst das Schema Nummer acht und fügen Sie es hier ein. Dann benennen Sie es in Ängste Bildschirm um. Danach löschen Sie einfach diesen unteren Teil und ändern Sie dann die Farbe des Rahmens in weiße Farbe. Und die Produktfarbe macht helle Farbe mit 30% Deckkraft. Danach verschieben Sie diese Rechtecke nach unten und drücken Sie, dass Tiki und getrocknete Favoriten. Platzieren Sie es mit einem oberen Rand von 20 Pixeln und unteren Rand von 30 Pixeln. Und jetzt ziehen wir hier runter. Löschen Sie einfach diese Zähler und fügen Sie den Warenkorb Button vom Startbildschirm und ändern Sie die Größe. Danach fügen Sie ein Warenkorb-Symbol darüber hinzu. Also kopieren Sie das Warenkorb-Symbol und löschen Sie das Symbol aus den Übungsdateien und besuchen Sie hier, richten Sie es mit der Belastung richtig aus. Haften Sie das. Richten Sie diese Textebenen wahrscheinlich danach aus, tun Sie dasselbe mit dem zweiten Rechteck. Dafür werde ich nur den Prozess hier beschleunigen, um Zeit zu sparen. Kopieren Sie schließlich die Tab-Leiste vom Startbildschirm und fügen Sie sie hier ein. Schließlich ist der Fokus auf Favoriten-Registerkarte. Und jetzt ist unser Bildschirm Dezimal abgeschlossen für dieses Video schien das nächste Video. 33. Profilbild 2: Willkommen zurück Studenten. In diesem Video werden wir einen Profilbildschirm zu erstellen. Kopieren Sie also zuerst den Profilbildschirm eins und fügen Sie ihn hier ein, und benennen Sie ihn dann in Profilbildschirm um, um danach eine Ellipse von etwa 80 mal 80 zu zeichnen. Fügen Sie dann ein zufälliges Benutzerbild zu diesen Lippen hinzu. Ich habe ein Plug-in namens und splash installiert. Und hier, klicken Sie einfach, klicken Sie mit der rechten Maustaste, um es zu öffnen. Und dann hier, suchen Sie nach Männern. Und danach fügen Sie dieser Ellipse ein zufälliges Bild hinzu. Massieren Sie dieses Bild in diese Form. Und jetzt machen wir eine Kopie dieses Textes, verschieben Sie ihn nach unten, ersetzt diese beiden Textebenen. Und danach, Jane, das erste Textwerkzeug, dieser Benutzername und der zweite Ort. Ändern Sie auch die Schriftart und Farbe dieser Deklarationen. Beachten Sie, dass Sie diese beiden Ebenen gruppieren und sie zentrieren mit diesem Bild ausrichten. Danach fügen Sie hier eine Bearbeitungsschaltfläche hinzu. Zeichnen Sie also einfach ein Rechteck von etwa 109 mal 44, ändert den Randradius in 20. Danach fügen Sie einen Text von etwa 16 regelmäßigen Audits hinzu und richten Sie ihn richtig an der Mitte aus. Bekannt als Umzug hier unten. Richten Sie zunächst diese Überschriften links an dieser Ellipse aus. Und jetzt machen Sie vier Kopien davon und verschieben Sie sie nach unten. Ich weiß, dass ich diese Deklarationen und Symbole ersetzen werde. Alle Symbole befinden sich in Übungsdateien. Von hier aus werde ich nur den Prozess beschleunigen. Und jetzt ist es an der Zeit, separate Zeilen zwischen diesen Menüs hinzuzufügen. Es sieht also schön aus. Zeichnen Sie also hier eine Linie und ändern Sie ihre Farbe in helle Farbe mit 50% Fettleibigkeit. Und jetzt die Zeile, diese Zeilen mit einem internen Abstand von 20 Pixeln. Und jetzt ist der Bildschirm abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 34. Profile bearbeiten: Willkommen zurück Studenten. In diesem Video erstellen wir einen Bearbeitungsprofil-Bildschirm. Kopieren Sie also zuerst die Bildschirmnummer 12 und fügen Sie sie hier ein, und benennen Sie sie dann um, um den Profilbildschirm zu bearbeiten. Danach haben alle diese außer diesem Text gegessen. Und jetzt ersetzen Sie dieses Wächtersymbol durch ein Häkchensymbol. Kopieren Sie das Check my Icon von SKY Nummer zehn, und fügen Sie dann hier ein. Ändern Sie die Farbe in dunkle Farbe und platzieren Sie sie hier richtig. Benennen Sie danach diesen Text in Kontaktinformationen um. Und jetzt werden wir hier Felder hinzufügen. Erstellen Sie also zunächst einige Kopien dieses Textes und verschieben Sie sie nach unten. Danach fügen Sie hier zwei Zeilen von etwa 382 an zwei weiteren Linien mit 155 Körnung hinzu. Und jetzt verschieben Sie das Textfeld hierher. Ändern Sie die Schriftart in 14, halb fett und seine Farbe in eine Liste. Benennen Sie es in Vorname um. Verschieben Sie diesen zweiten Text nach oben. Grün m es zu Alex, und ändert Schriftart 16, unregelmäßig. Und legen Sie es hier richtig. Und jetzt machen Sie einfach eine Kopie dieses Textfeldes. Verschieben Sie es nach rechts, benennen Sie es auch um. Und jetzt verschieben Sie einfach diese ersten Feldtests mit diesem Abfallrand von 20 Pixeln nach unten und benennen Sie sie auch um. Also von hier aus, wie beschleunigt der Prozess. Und jetzt sind unsere Felder perfekt erstellt. Hier, ändern Sie diese Linien, Farben, tun Sie die vierte Farbe aus unserer Liste. Und diese erste Linie Kurve zu einem Thema Farbe, um es ein Fokusfeld zu machen. Bearbeiten Sie hier die Textzeile, und ändern Sie ihre Farbe in eine Designfarbe. Schließlich wurde hier die Tastatur hinzugefügt. Kopieren Sie das aus dem vorherigen Bildschirm, und fügen Sie es hier richtig ein. Und jetzt ist der Bildschirm abgeschlossen. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 35. Mein Orders: Willkommen zurück Studenten. In diesem Video werden wir meinen Bestellbildschirm erstellen. Also zuerst kopieren Sie den Bildschirm über 12 und fügen Sie ihn hier ein. Und dann benennen Sie es in den Bildschirm „Bestellungen“ um. Danach löschen Sie dieses Warenkorb-Symbol und ändern Sie den Hintergrund in die vierte Farbe mit 20% Deckkraft. Und dieses Rechteck Farben, um daraus zu beißen, ändern Sie diese Rechtecke Größe 2414 um 246 und den Grenzradius auf 0. Und jetzt verschieben Sie diese Textebenen einfach nach unten. Und hier, am besten bei Tiki und schreiben Sie die bestellte Nummer. Danach machte zwei Kopien davon, bewegen Sie sie nach unten, ändern Sie ihr Telefon auf 12, fett und ihre Farbe auf dritte Säule. Und danach ersetzt das erste mit einem Platz am Datum und zweite mit bezahltem Datum. Und jetzt platzieren Sie sie mit einem internen Abstand von fünf Pixeln. Applet, das eine Kopie dieses obigen Textes erstellen, verschieben Sie es nach unten, und ersetzen Sie es dann mit insgesamt. Und fügen Sie unsere versandte Nachricht hier hinzu. Zeichnen Sie also Rechteck von etwa 96 mal 27, ändern Sie seinen Randradius auf 20 und seine Farbe in unsere Themenfarbe. Und auch Jane, die Menge Farbe zu einem Thema Farbe. Nach dieser Anzeige Text, sagen geliefert. Die Schriftart sollte 14 Semikolon sein und dann seine Farbe in Weiß ändern. So sieht es sichtbar aus. Und dann verschieben Sie diesen Gesamttext darunter, mit einem internen Abstand von zehn Pixeln geliefert wird. Und hier ist ein erstes Rechteck fertig. Lasst uns zur Sekunde gehen. Jetzt beschleunigen Sie den Prozess, um Zeit zu sparen. Und schließlich ändert Favoritentext zu meinen Bestellungen. Und jetzt ist unser Bildschirm fertig. Es gibt Hoffnung für dieses Video. Wir sehen uns im nächsten Video. 36. Mein Cards: Willkommen zurück Studenten. In diesem Video werden wir meine Karten Bildschirm erstellen. Kopieren Sie zuerst den vorherigen Bildschirm und fügen Sie ihn hier und benennen Sie ihn dann auf meinen Kartenbildschirm um. Danach löschen Sie all dies außer, dass dieser Text. Und ändern Sie dann die Hintergrundfarbe in weiße Farbe. Jetzt habe ich diesen Text in meine Karten umbenannt. Und nach diesem wichtigen Gott Bild aus den Übungsdateien und fügen Sie es hier mit einem oberen Rand von 30 Pixeln. Und jetzt machen Sie eine Kopie dieses Textes. Und während wir die Schriftart nicht auf 14 Semibolt ändern und dann umbenennen, um einen neuen Gott hinzuzufügen. Und jetzt fügen Sie einfach ein Rechteck von etwa 25 mal 25 hinzu. Änderung ist Grenzradius zu fünf und seine Farbe zu unserem Team Farbe. Jetzt addieren Sie das Plus-Symbol über dieses Rechteck und richten Sie es richtig aus. Kopieren Sie das Plus-Symbol aus den Übungsdateien und fügen Sie es hier richtig ein. Und jetzt einfach diesen Text und dieses Plus-Symbol mit einem oberen Rand von 50 Pixeln platzieren. Und jetzt ist unser Bildschirm fertig, und das ist alles für dieses Video. Wir sehen uns im nächsten Video. 37. KartenBildschirm hinzufügen: Willkommen zurück in Minuten. In diesem Video werden wir hinzufügen Karte Bildschirm erstellen. Kopieren Sie zuerst die Bildschirmnummer 14 und fügen Sie sie hier ein. Zehn, benennen Sie es in den Schutzbildschirm um. Löschen Sie anschließend diese Platzhalter-Texte und verschieben Sie diese obere Fläche nach unten. Und diese beiden Felder sind oben und platzieren dieses erste Feld mit einem oberen Rand von zehn Pixeln und diese andere mit einem oberen Rand von 40 Pixeln. Benennen Sie danach diesen ersten Platz Halter um, um ihn auf der Karte zu nennen. Benennen Sie danach das erste Feld in Benutzername um. Zweites Feld in Kartennummer, ändert Farbe in Lichtfarbe, so dass ein Benutzer weiß, dass es nicht das fokussierte Feld ist. Ändern Sie die dritte IT, genie Linienfarbe ablaufen. Und danach ändern Sie das vierte Feld in Cv. Und jetzt kopieren Sie einfach diesen Text vom vorherigen Bildschirm und fügen Sie ihn hier ein. Ersetzen Sie dieses Plus-Symbol durch ein Häkchen-Symbol und diesen Text mit gespeicherter Karte und legen Sie es richtig. Schließlich fügen Sie hier die Schaltfläche hinzu. Kopieren Sie das aus dem vorherigen, kopieren Sie es aus dem zuvor erstellten Bildschirm, und fügen Sie es hier ein, und benennen Sie den Text um, der angewendet werden soll. Und jetzt ist unser Bildschirm fertig. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 38. Mein Adressfenster: Ich begrüße Studenten. In diesem Video werden wir meinen Adressbildschirm erstellen. Kopieren Sie zuerst den vorherigen Bildschirm und fügen Sie ihn hier ein. Dann benennen Sie es in meinen Editor-Bildschirm um. Löschen Sie danach all dies mit Ausnahme dieser Schaltfläche. Und jetzt fügen Sie eine Karte und ein Kartensymbol für den oberen Rand von 20 Pixeln hinzu. Kopieren Sie das Karten- und Kartensymbol aus Übungsdateien und platzieren Sie es hier richtig. Drücken Sie danach das Tiki und schreiben Sie, bearbeiten Sie Ihre Adresse, platzieren Sie es mit einem oberen Rand von 30 Pixeln. Und jetzt zeichnen Sie drei Rechtecke hier. Zuerst sollte 382 mal 80 sein, und der andere sollte 382 mal 50 sein. Kette Drittens, die Farbe des Rechtecks zu hellen Farbe mit 20% Deckkraft. Richten Sie diese drei Rechtecke nun richtig mit einem internen Abstand von 20 Pixeln aus. Und nun gehen wir zum ersten Rechteck. Hier. Fügen Sie einen Ort hinzu, den ich zuerst verwenden kann. Und danach fügen Sie diesen Text hinzu. Richten Sie diese auf dem zweiten Rechteck, der Bodeneinheit, richtig aus. Und auf dieser dritten rechten Schrägstrich Postleitzahl. Und dann wird die Linie diese Texte Ebenen mit diesen Rechtecken. Und schließlich, Ändert Schaltflächentext zu speichern. Und jetzt ist unser Bildschirm fertig. Das ist alles für dieses Video. Wir sehen uns im nächsten Video. 39. Help Center Screen: Willkommen zurück Studenten. In diesem Video werden wir Hilfe-Center-Bildschirm erstellen. Dies ist die letzte Woche unserer Nike App. Also zuerst kopieren Sie den vorherigen Bildschirm und fügen Sie ihn hier ein, dann benennen Sie ihn um, um zu helfen Zentren grün. Löschen Sie danach all dies außer diesem Rechteck. Und jetzt ändern Sie diese Rechteck-Größe auf 382 um 580. Geben Sie ihm einen Umrandungsradius von fünf und ziehen Sie seine Farbe mit Hintergrundfarbe. Und jetzt erst im Fernsehen. Und richtig, wie kann ich helfen, sein Telefon zu 22 Gold und seine Farbe zu unserem Thema Farbe ändern. Und dann platzieren Sie es mit einem oberen Rand von 30 Pixeln und einem linken Rand von 16 Pixeln. Danach machen Sie eine Kopie davon. Und Kinn liebt 16 halböffentliche und Gelehrte zu dunkler Farbe. Und dann benennen Sie es in diesen Text um. Und dann macht gent Text in mehrzeiligen Text mit einer Breite von 250. Fügen Sie nun eine Zeile von etwa 350 Pixeln darunter hinzu. Und danach fügen Sie einen Pfeil vor diesem Text hinzu. Kopieren Sie den Pfeil von oben, und fügen Sie ihn hier ein, indem Sie seine Position ändern. Jetzt gruppieren Sie diese einfach zusammen und machen Sie vier Kopien davon mit einem oberen Rand von 20 Pixeln und verschieben Sie sie nacheinander nach unten. Und nach dieser Kette lebt dieser Text. Von hier aus werde ich nur den Prozess bis zur Sierra Zeit beschleunigen. Und jetzt sind alle ihre Bildschirme fertig. Das ist alles für dieses Video. Wir sehen uns in der nächsten Lektion. Wir werden ihre Freunde miteinander verknüpfen, um einen Prototyp unserer App zu erstellen. 40. Prototyping: Willkommen zurück Studenten. Dies ist das letzte Video dieses Kurses. In diesem Video werden wir einen Blick darauf werfen, wie wir die Frames miteinander verknüpfen können. Es sieht also wie eine reale Anzeige aus und teilt sie dann mit anderen Teammitgliedern und Stakeholdern. Hier oben rechts sehen Sie, dass es in drei Ansichten unterteilt ist. Entwerfen Sie, erstellen Sie einen Prototyp und überprüfen Sie Sie. Diese Prototypansicht wird verwendet, um Verbindungen zwischen Freunden herzustellen und die Verbindungen zwischen ihnen durch Interaktion zu definieren. Klicken Sie also einfach auf diese Prototypansicht, vergrößern Sie die Ansicht und klicken Sie auf den ersten Frame. Und hey, Sie sehen, ob ein spielt dieses Play-Icon, es wird es als Home-Frame betrachten. Lassen Sie es so, wie es ist. Weil das nicht ihr Home-Bildschirm ist. Und hier siehst du diesen Pfeil. Ziehen Sie es einfach und legen Sie es auf den zweiten Frame ab. Und auf der rechten Seite haben wir Eigenschaftenfenster. Sie im Eigenschaftenfenster einfach aus. Nach Verzögerung. Diese Zeit sollte 400 Millisekunden betragen und die Animation sollten wir auflösen und das Essen sollte 0s sein. Danach, auf unserem nächsten Bildschirm, verbinden Sie diesen Send mit dem nächsten Traum mit Auto Animate und 400-Millisekunde. Machen Sie dasselbe mit dem nächsten Bildschirm. Und hier, schützen Sie diese Reset-Taste mit Login-Bildschirm. Und nun gehen wir zum Anmeldebildschirm. Hier. Verbinden Sie diese Anmeldung mit dem Startbildschirm nach dem Login mit beweglicher Animation. Und verbinden Sie diese Anmeldung mit dem Anmeldebildschirm mit smart animate. Und jetzt gehen wir auf den Startbildschirm. Dies ist der Startbildschirm, bevor sich ein Benutzer bei der App anmeldet oder sich bei der App anmeldet. Hier verbinden Sie einfach diese Suchtabelle mit der Bildschirmnummer 11 und diesem Feldschritt mit Schema 12 in bewegter Animation. Und schließlich, korrigieren Sie dieses Profil mit Profil Screen1. Überprüfen Sie auch dieses intelligente trotzdem es übereinstimmende Ebenen Checkbox. Jetzt auf Powell Screen1, verbinden Sie diesen Login und erstellen Sie Konto mit Login-Bildschirm. Und die Animation sollte sich von der rechten Seite bewegen. Und hier, verbinden Sie dies meine Bestellungen mit Anmeldebildschirm, weil unser Benutzer die Bestellung nicht sehen kann, es sei denn, er hat sich zum Hinzufügen angemeldet. Und dieser Hilfe-Bildschirm mit Hilfe der Einstellung des Bildschirms. Und danach verbinden Sie diese Tiefen wie auf dem vorherigen Bildschirm. Von hier aus werde ich nur den Prozess beschleunigen. Und jetzt heck sagte uns auf den Home-Bildschirm äußeren Benutzer Login in die App bewegen. Hier. Verbinden Sie diesen Sneaker zunächst mit dem nächsten Bildschirm. Und dieser vierte Schuh mit einem Detailbildschirm. Und seine Animation. Sollten wir trotzdem schlauen es hier verbinden diese Schritte, wie wir es auf reinem Schema getan haben. Aber dieses Mal verbinden Sie diese Bhopal ICOM mit Provost Skin nach dem Login. Bildschirm Nummer 13 mit Frau von der unteren Ende Emission. Nun gehen wir zu Bildschirm Nummer sechs hier, korrigieren Sie diesen Zurück-Pfeil mit dem vorherigen Bildschirm. Also wählen Sie einfach diese Tasche aus niedergeschlagen. Jetzt auf Bildschirm Nummer sieben. Erstellen Sie zunächst eine Kopie dieses Bildschirms, verschieben Sie ihn hier nach oben und benennen Sie ihn in sieben in zwei um. Und danach, zehn, die erste bekam Symbol Symbol Symbol Symbol. Und jetzt verbinden Sie einfach diese beiden Bildschirme zusammen mit smart animate. Kein Bildschirm Nummer sieben in zwei. Verbinden Sie das Warenkorb-Symbol, Bildschirm Nummer acht. Und seine Animation sollte smart animate als auch, bekannt als mu2 skene arbeiten hier, verbinden Sie diesen Zurückpfeil mit FactoryGirl. Und danach verbinden Sie diese Änderungstaste mit Bildschirm etwa 18 mit beweglicher linker Animation. Und verbinden Sie dies weiter mit Checkout-Schaltfläche mit Bildschirmnummer neun, die intelligente animieren. Danach. Auf dem Bildschirm Nummer neun, verbinden Sie diesen Zurück-Pfeil mit der vorherigen Königin und ist Place Order Taste mit der nächsten Creme. Lassen Sie uns nun auf Bildschirm etwa zehn bewegen. Hier. Verbinden Sie dieses Schließen Symbol mit Bildschirm Nummer fünf in eins, die Home-Bildschirm ist. Und seine Animation ist sowieso smart, es jetzt haben wir zehn Bildschirme in unserer App verknüpft. Lassen Sie uns es testen, indem Sie hier klicken. Und diese funktionieren einwandfrei. Jetzt Bildschirm über 11, verbinden Sie sich besser mit Bakterien und lassen Sie den Rest, wie es ist. Und auf dem Bildschirm. Und wir werden dasselbe mit dem Zurück-Pfeil tun. Und jetzt verbinden Sie einfach diese Schritte wie auf dem vorherigen Bildschirm. Jetzt auf dem Bildschirm über 13. Korrigieren Sie zunächst diesen Editier-Button und diesen Benutzernamen mit der Bildschirmnummer 14. Und diese Adresse mit Bildschirm über 18, wo ein Benutzer leicht seine Adresse aktualisieren kann. Ändern Sie auch die Animationen, die von der linken Seite aus verschoben werden sollen. Die Hälfte davon. Lass uns hier runterziehen. Verbinden Sie diese meine Bestellung mit meinem Bestellbildschirm. Legen Sie es meine Karte mit meinem aktuellen Bildschirm, Klammern Adresse. Mit Adress-Bildschirm. Lassen Sie die Benachrichtigung so, wie sie ist. Und hier verbinden Sie dieses Hilfe-Center mit dem Health Center Bildschirm und diesem Logo mit dem Startbildschirm vor der Anmeldung des Benutzers. Fügen Sie auch diese Registerkarten hinzu, löschen Sie sie einfach und fügen Sie die Registerkarten aus dem vorherigen Bildschirm ein, um Zeit zu sparen. Da sie bereits auf dem vorherigen Bildschirm verbunden sind, müssen wir sie nur kopieren und hier einfügen. Jetzt auf Bildschirmnummer 14 korrigieren Sie diesen Zurückpfeil mit diesem Auslöser. Und dieses Häkchen-Symbol mit Profil-Bildschirm mit Folie rechts Animation. Hier. Konnte nicht der Rest dieser Bildschirme, Zurückpfeile mit Zurück-Pfeil-Trigger und auch diese Tiefen. Um unsere Zeit zu sparen. Danach gehen wir zur Skinummer 15. Hier. Ändern Sie nichts. Und jetzt Kino 16, Griff dies, fügen Sie eine neue Karte mit Bildschirm über 70 mit Bewegung links Animation. Und jetzt auf dem Bildschirm über 17, verbinden Sie diese Apply Taste mit Bildschirm über 16 mit Bewegung von rechts und Emission. Und Nowinski Nummer 18. Verbinden Sie diese Schaltfläche mit Bildschirmnummer acht mit automatischer Animation. Und jetzt tödliche scanbare 19, gefährlich. Schließlich sind alle unsere Rahmen miteinander verbunden. Um diese Verknüpfung zu überprüfen, drücken Sie einfach Steuerelement a. Und hier sehen Sie das Netzwerk der Interaktion. Es ist an der Zeit, unsere App auszuführen. So klicken Sie einfach auf diesen Pigou-Button. Und jetzt sehen Sie, dass alle unsere Vorführungen miteinander verknüpft sind. Und es sieht aus wie eine echte App. Jetzt, um es mit anderen Teammitgliedern zu teilen. Klicken Sie einfach auf die Schaltfläche „Teilen“. Und hier können Sie es für Design-Review, Hardware-Entwickler und viele andere Optionen als auch teilen . Ich werde nur wählen, wer mit einem Link kann es hinzufügen. Und schließlich, klicken Sie auf Link kopieren und teilen Sie diesen Link einfach mit Ihren Teammitgliedern oder Stakeholdern. Sie können diese Datei auch freigeben, indem Sie ihre E-Mails eingeben. Und das bringt uns zum Ende dieses Kurses. Ich hoffe, ihr habt diesen Kurs gefallen. Und wenn Sie neugierig auf diesen Kurs haben, zögern Sie nicht, mich zu kontaktieren. Wir sehen euch in einer anderen Behandlung.