Lerne Figma: Entwerfe eine vollständige mobile UI/UX

1. Einführung: Willkommen auf dem Full Mobile you aux Kurs mit Sigma und in diesem Kurs werden wir lernen, wie wir das kostenlose Cloud-basierte Design-Tool namens Sigma verwenden können, um schöne mobile Mock ups für Ihre Kunden oder sogar Ihre eigenen Projekte zu entwerfen . Wir werden eine komplette sieben Seiten Mock up für den Namen eines Kunden, Clean Känguru, die im Wesentlichen ein Wäsche-Lieferservice ist zu entwerfen Clean Känguru, . Mein Name ist Nina, und ich bin deine Lehrerin für diesen Kurs. In den letzten 10 Jahren habe ich Dutzende von Anwendungen entwickelt und entwickelt, sowohl mobile als auch webbasierte Anwendungen. Und in diesem Kurs möchte ich Ihnen genau zeigen, wie Sie ein komplettes mobiles Mock Up von Grund auf neu entwerfen . Als Kurs ist großartig für jedermann. Selbst wenn Sie ein Anfänger Designer sind, können Sie springen und lernen, wie Sie schöne mobile Markups entwerfen. Hier sind ein paar Dinge, die wir in diesem Kurs lernen werden. Zuerst lernen wir, wie wir Bilder und Symbole zu unseren Projekten hinzufügen können. Dann werden wir lernen, welche Komponenten sind, was uns dabei hilft, wiederverwendbare Designs in unserer Arbeit zu erstellen. Wir werden Einschränkungen lernen, die uns helfen, unsere Designs für alle Größen mobiler Geräte reaktionsschnell zu halten . Wir werden sogar Apples Design-Kids benutzen, um einige Teile unseres Projekts zusammenzustellen. Und am wichtigsten ist, dass wir mit viel Text arbeiten und lernen, wie Sie neue Schriftarten und neue Farbstile für Ihr Projekt anwenden können. Und wir werden sogar Plug Ins verwenden, um Dinge wie Karten zu generieren oder sogar Daten aus den Google-Tabellen direkt in Ihr Designprojekt zu holen . Wir werden sogar lernen, wie Sie großartig uns in Ihrem Design anwenden, so dass Ihre Benutzer oder Ihre Kunden Benutzer werden super glücklich mit der App, die Sie entwickelt haben. Also, wenn Sie bereit sind, zusammen ein schönes mobiles Mock up für Ihre Kunden oder für Ihre eigenen Projekte, die beginnen, und ich werde Sie in diesem Kurs sehen. 2. Mockup: Also, um diesen Kurs zu starten, werden wir direkt in die Gestaltung unseres ersten Mobiltelefons springen. Sie ich jetzt das ist wirklich aufregend, und ich möchte erwähnen, dass Sie nicht wirklich brauchen, um viel Hintergrundinformationen über Fig mus haben . Wenn dies Ihr erstes Projekt ist, sollten Sie in der Lage sein, immer noch mitzufallen. Aber ansonsten, wenn Sie einige der einleitenden Dinge zu Fig MMA lernen möchten, empfehle ich Ihnen, dass Sie sich meinen anderen Kurs ansehen. Die anderen Kurse nannten eine Einführung in die Fig MMA. In diesem Kurs gehe ich über viele Grundlagen wie Rahmen, die Formen erstellen und einige der Werkzeuge und Panels erkunden , auf die wir in Abb. MMA zugreifen können. Aber wenn Sie direkt hineinspringen und lernen möchten, wie wir gehen, können Sie das auch tun. , Das erste ist,dass ich Ihnen empfohlen habe, zu Fig MMA dot com zu gehen und dort ein Konto einzurichten . Wenn Sie dies noch nicht getan haben, sobald Sie eingerichtet sind und Sie in Fig MMA sind, dann können Sie in diesen Kurs springen. Also für unser erstes Projekt hier, werden wir an einem Handy arbeiten. Sie ich für diese Firma namens Clean Känguru. Wir werden uns vorstellen, dass wir einen Klienten haben, der uns dieses Projekt gegeben hat. Normalerweisewird ein Klient etwas Ähnliches einfallen, wo er Ihnen seinen Namen geben wird. Normalerweise Was sie tun, ähm, ist immer die Seiten, die sie für das Mock Up benötigt werden. Also werden wir das wirklich als ein Mock Up behandeln, das wir für einen Kunden entwerfen werden. Das ist zufällig diese Firma namens Clean Känguru Supercool. Nun, bevor ich hier reinspringe, möchte ich erwähnen, dass Sie Zugang zu diesen Anforderungen in einem pdf haben. Ah, und die Ressource ist, voran zu gehen und laden Sie sie aus der Ressource ist dieser Lektion. Sie finden auch den Stigma-Link, um zu dieser Datei zu gelangen. Ich schätze, du wirst nicht wirklich weitermachen und von hier in deinen Feigenmop kopiert, also zögern Sie nicht, das jetzt herunterzuladen. Ähm, und dann gehen wir weiter und beginnen mit den Anforderungen. Also mal sehen, was diese Firma hier macht. Sauberes Känguru ist ein On-Demand-Wäscheservice Lieferservice. Sauberes Känguru können Benutzer sich anmelden und verlangen, dass ihre Wäsche abgeholt auf abgesetzt von anderen Orten. Im Wesentlichen ist es ein Wäsche-Lieferservice, der super cool ist. Mal sehen, was sie in Bezug auf Marken-Assets haben. Es sieht so aus, als ob sie wollen, dass wir tatsächlich ein Farbschema finden. Sie haben jetzt keins für ihr Projekt. Und dann wollen sie, dass wir auch ein zugewiesenes Geld für das Projekt finden, was cool ist, weil wir in diesem Kurs Farbe und Typografie übergehen werden. Ähm, und dann sehe ich das Einzige, was sie uns zur Verfügung gestellt haben, ist das Logo, das Sie nochmals überprüfen können. Ressource ist es, sie zu finden. Sehen wir uns nun an, was ihr Mock Up in Bezug auf die Seiten erfordert. Also erste Seite ist eine Anmeldung Schrägstrich Login Seite mit einer Schaltfläche für ein Tutorial. Anmeldeoptionen werden E-Mail und Passwort sein und dann mit Google-Option als auch zuweisen. Ziemlich cool. Ziemlich typisch für eine Login-Seite redaktionelle Seite zu erklären, wie es in drei Schritten funktioniert. Cool. Wir brauchen auch eine Seite, um eine Zahlungskarte hinzuzufügen, ziemlich unkomplizierte Kartenseite, damit Benutzer ihre Abhol- und Drop-Off-Adresse festlegen können. Okay, das ist ziemlich cool. Sieht so aus, als gäbe es einen Tippfehler, also werde ich das direkt dort reparieren. Wirklich schnell. Kühlen Sie sich für die Abholung der Wäscherei von einem lokalen Wäscheservice ihrer Wahl und zeigen Sie ihnen die Preise. Okay, hört sich ziemlich cool an. Ich denke, das wird unsere Hauptseite sein, von dem, was ich sehe. Und dann haben wir eine Profilseite, um alle Profiloptionen des Benutzers sowie Logouts zu sehen . Ähm, ziemlich cool. Ziemlich unkompliziert, genau da. Und schließlich ist eine Seite, auf der Benutzer ihrer aktuellen Schrägstrich aktiv und auch ihre früheren Wäschereidienste und wie viel sie berechnet wurden, sinnvoll, falls die Benutzer zurückgehen und sehen wollen, wie viel ihre Servicekosten und all das. Also ohne weiteres, werden wir direkt in die Einrichtung unserer Drahtrahmen springen und dann unsere Figment-Datei starten , um das Mock für diesen Client zu machen 3. Der Wireframe: In Ordnung. Also? Und die letzte Lektion, die wir über die App-Anforderungen für das Mock Up, an dem wir hier arbeiten, gegangen . Sauberes Känguru. Ich habe es eigentlich skizziert. Ah, was ich denke, dass ich in den Drahtrahmen aufnehmen möchte. Ah, und Sie werden feststellen, dass in der Ressource auch für dieses Projekt ist. Eso aus der letzten Lektion, wenn Sie die Ressource heruntergeladen, um gehen Sie vor und öffnen Sie Känguru Markup Skizze reinigen. Pdf Wenn nicht, gehen Sie voran und laden Sie es herunter. Die Ressource ist und dann gehen Sie vor und öffnen Sie diese Datei. Wenn du es öffnest, wirst du diese kleine Zeichnung finden, die ich gemacht habe. Ähm, nur mit Stift und Papier, um einen Drahtrahmen zu erstellen. Und das nennen wir einen Drahtrahmen. Und Sie ich oder User Interface Design. Im Wesentlichen ist es einfach wie eine Blaupause für unser Mock Up, bevor wir tatsächlich einspringen und es entwerfen und viel Zeit damit verbringen, zu entwerfen, ohne genau zu wissen, wie die Blaupause für die Verpflichtung aussehen wird. Also, im Wesentlichen, das ist der Grund, warum wir einen Drahtrahmen machen, normalerweise bevor wir reinspringen und unser Mock starten. Nun, wenn Sie bereits einige Ideen für dieses Projekt hatten und Sie angefangen haben, sie zu skizzieren. Fühlen Sie sich frei, mitzuverfolgen und vielleicht machen Sie einige Verbesserungen auf dem Weg basierend auf Ihrem eigenen Design . Wenn nicht, werden wir es benutzen. Ah, dieser Drahtrahmen hier ist gut dran. Wir werden auf die Skizze viel während der Gestaltung dieses Markups verweisen. Also auf jeden Fall die Datei griffbereit. A quillt, Ihre APP-Anforderungen, die wieder in der Ressource sind Ordner. So schnell. Gehen wir durch die Seiten, die ich eingerichtet habe. Ah, jetzt siehst du ihre Nummer. Nach was? Der Kunde hier hat uns eins bis sieben gegeben und alle Seiten sind hier abgedeckt. Wir haben eine Anmelde-Seite, ähm, ähm, und ziemlich unkompliziert. Mit allen Anforderungen, dass sie sich mit E-Mail mit Google gesendet haben. Ähm, und dann haben wir ein kleines Tutorial Pop-up. Ich denke darüber nach, dieses Tutorial direkt oben auf die Anmeldeseite zu setzen und dann nur ein kleines Pop-up zu machen. Ah, mit einem verschwommenen Hintergrund machen wir es einfach mit einer Zahlungskarte, damit sie ihre Kreditkarte haben können. Und dann, wenn Sie hier zur nächsten Seite gehen. Jetzt habe ich hier eine Seite erstellt, damit der Benutzer seine Adresse auf die Suche nach seiner Adresse für seinen Wäsche-Schmuck-Service festlegen kann. Dies ist unsere Hauptseite Schrägstrich Anfrage Seite. um Von hier aus wird es eine Karte geben,auf der sie ihre Lieferadresse setzen, die sie immer darauf tippen können,umauf dieseSeite zu gehen und dann dort zu aktualisieren, vielleicht eine neue Adresse, wenn sie sich irgendwann geändert haben Von hier aus wird es eine Karte geben, auf der sie ihre Lieferadresse setzen, die sie immer darauf tippen können,umauf diese Seite zu gehen und dann dort zu aktualisieren, Ihre Adresse, dann hier unten, wir haben eine Wäscherei Anfrage Wasserhahn, die im Wesentlichen immer offen ist. Es zeigt Ihnen die Geschäfte in der Nähe. Ich denke darüber nach, eine Art zu tun, vielleicht wie, scrollen oder wischen Sie nach links und rechts, um zu verschiedenen , um verschiedene Karten für verschiedene Geschäfte anzuzeigen. Sie können sehen, was ich denke, wir sollten hier einschließen. Ähm, nach unten als eine Art detaillierter Zeichnung von dem, was ich denke, sollte in die Speicherkarte hier unten aufgenommen werden . Also haben wir ein Bild von dem Laden, vielleicht, vielleicht, ähm, Ladennamen, Dollar pro Artikel, wie ihre Bearbeitungszeit ist. Also, wie lange sie denken, das dauert, um den Wäscheservice zu machen und dann bewerten sie. Also für die Navigationsstruktur hier. Dies ist, wie Benutzer zwischen den Hauptseiten strecken, die drei Hauptseiten hier, die Hauptseite, die Profilseite und dann die Vergangenheit oder die Dienste Schrägstrich Vergangenheit Anfragen Seite hier. Ich habe beschlossen, mit einer Tippleiste Navigation gehen. Also, das ist im Wesentlichen, wo Sie sehen, haben Sie eine Registerkarte am unteren Rand und dann können Sie auf mehrere Seiten gehen , je nachdem, welche ausgewählt es wird. Es wird Sie auf die richtige Seite bringen. Wenn Sie die Instagram-App verwenden, zum Beispiel, verwenden sie eine Registerkarte, unser System, wo Sie Optionen unten haben hier und dann wechseln Sie zwischen verschiedenen Seiten. Dies ist ziemlich üblich in vielen mobilen Anwendungen. Und da wir hier nur wirklich drei Hauptseiten haben, werden wir uns daran halten, einen Tab zu verwenden. Sind und dann hier unten, wird es Ihnen nur sagen Nummer eins oder die Top-Option über eins wird es nehmen. Die Dienste waren nur Seite sieben genau hier. Ah, hier sehen sie ihre vergangene Wäscherei. Ähm, und wieder eine detaillierte Version von dem, was ich denke, sollte in diese Art von Liste gehen. Um, hier sehen würde ein Geschäft Name sein, das Datum und die Uhrzeit, zu der sie den Wäschereidienst aufgab. Und dann können wir es vielleicht je nach Status dieser Bestellung hier zeigen. Also, wenn es bereits geliefert wurde, können wir sagen, liefern Sie es. Wenn es gerade gewaschen oder getrocknet wird, können wir zeigen, dass hier drüben ein Swell auf Seite zwei die Hauptseite sein wird. Die Wäscheseite und dann die dritte Seite gehen zu einer Profilseite. Von hier aus dachten wir, wir können adressiert aktualisieren. Wir können ihnen erlauben, ihren Namen zu bearbeiten. E-Mail. Ähm, sie können zu ihrer Zahlungsmethode gehen. Von hier aus gibt es ein wenig Unterstützung, aber für den Fall, dass Sie mit dem sauberen Känguru-Team in Kontakt treten möchten, sagen wir, auf einem Abmelde-Button , der ziemlich typisch auf einem Profil der Schrägkonto-Seite ist. Also, wenn das jetzt ein bisschen zu viel ist, mach dir keine Sorgen um alles. Sobald wir mit dem Design beginnen, werden wir es Schritt für Schritt, Seite für Seite machen und wirklich alles aufschlüsseln und dann weitermachen und unser Markup erstellen. Der springende Punkt dieses Drahtrahmens ist nur, eine Vorstellung von allem zu haben, was wir einschließen müssen . Also vergessen wir nicht versehentlich etwas oder lassen etwas aus. Richtig? Also in der nächsten Lektion werden wir weitermachen und tatsächlich überall auf Page ist Ah einrichten, und dann machen Sie sich bereit, unser Mock Up zu entwerfen. 4. Unsere Frames einrichten: In Ordnung, also denke ich, wir sind bereit, unser neues Projekt einzurichten. Ah, also gehen wir rüber zu Fig Mahir. Wenn Sie sich in der Desktop-App befinden, ist es super einfach, eine neue Datei zu erstellen. Du gehst einfach hier rauf und drückst das Pluszeichen hier. Ich werde ein neues Foul eröffnen. Gehen wir weiter und benennen Sie es in Sauberes Känguru um. Da das das Projekt ist, an dem wir hier arbeiten und jetzt haben wir eine neue Cam. Es ist direkt vor uns. Ah, was ich tun werde, ist, die Hintergrundfarbe zu ändern und sie etwas dunkler zu machen nur um einen Kontrast zwischen unseren Frames zu schaffen. Hier, Lassen Sie uns voran und jetzt richten Sie alle Rahmen für unser Projekt benötigen. Wenn ich also zu meiner Skizze zurückgehe, die ich hier hatte, wirst du sehen, dass wir sieben Seiten haben, die wir brauchen. Also lassen Sie uns voran und richten Sie diese Seiten mit den entsprechenden Namen ein, um, und dann springen Sie in die Gestaltung oder Anmeldung Seite. Also wieder erstellen Sie neue Frames hell drücken f auf Ihrer Tastatur. Also wir sind Sie wissen, wir entwerfen für ein mobiles Mock Up. Ah, wenn wir voran gehen und einfach iPhone 11 pro wählen. Dies neigt dazu, eine Menge der neuen iPhone-Größen als auch passen. Ich werde nur meinen Hintergrund etwas heller machen. Ich denke, das ist gut. Also lasst uns voran gehen und sieben dieser Seiten erstellen. So ist der einfachste Weg, um mehrere Frames von einem, die sie bereits eingerichtet haben, nur eine duplizierte durch Drücken von Befehl e r. Control de, wenn Ihr eigenes Windows. Also ich weiß, dass wir insgesamt sieben Seiten haben, also muss ich das noch sechs Mal machen. Also lasst uns 12 drei, 456 erschaffen und jetzt haben wir einen Markt mit sieben Seiten. Lassen Sie uns voran und verwenden Sie die Zoom-Option hier und zoomen, um zu passen. Was das tun wird, ist nur weiter zu gehen und einfach zu verkleinern, bis wir alle unsere Frames sehen können. Sie können auch die Umschalttaste 1 drücken, um diese Zoom-Option von überall aus zu schalten. Also, wenn ich Shift eins drücke, können Sie sehen, es wird zoomen, um genau dort zu passen ziemlich praktisch. Lassen Sie uns fortfahren und alle Frames umbenennen und dann in unsere erste Anmeldeseite springen , um Frames oder Ebenen umzubenennen. Sie können hier entweder doppelklicken, damit wir uns anmelden können. Ich kann sehen, dass es sich hier geändert hat, oder wir können einfach hier in unserem Ebenenfenster gehen und uns Tutorial machen. Dieser wird die Zahlung sein. Das hier wird Karte sein. Dies wird unser Hauptbrunnen sein, es ist eigentlich ein Handschuh Anfrage. Dann haben wir oder Profil zuletzt, nicht Blätter. Wir haben unsere Services-Seite. Gehen wir einfach weiter und überprüfen Sie, dass wir hier nichts verpasst haben. Also loggen Sie sich ein. Tutorial-Zahlungen, Kartenanfragen, Profil und Dienste Schrägstrich frühere Anfragen. Ich glaube, wir haben alles hier. Also, äh, jetzt gehen wir weiter und konzentrieren uns einfach auf unsere Login-Seite. Eine weitere nette Möglichkeit zum Vergrößern besteht darin, nur die Zet-Taste auf Ihrer Tastatur zu halten und dann weiter zu gehen und einfach über den Bereich zu ziehen. Willst du das hineinzoomen? Wir werden so hineinzoomen, also wenn wir auf unsere Anmeldeseite zurückgehen, brauchen wir eine Reihe von Rechtecken, Ähm, speziell eines für die E-Mail. Wollen Sie für Vergangenheit Ward eins für die Anmeldung und zwei für die Anmelde-Buttons hier. Das sind also insgesamt fünf Rechtecke. Lassen Sie uns voran und erstellen Sie diese und versuchen, sie entsprechend zu verteilen, so dass Sie eine Rechtecke erstellen können , indem Sie unsere drücken, wie wir in den vorherigen Abschnitten gelernt. Gehen wir weiter und ziehen Sie einfach einen hierher. Ähm, ich denke, ich denke, die Höhe von 55 wäre schön, und dann gehen Sie einfach und lassen Sie los. Höhe von 55 wäre schön, Ich benutze alles, um hier zu sehen, wo, wie es hier positioniert ist. Lass uns einfach weitermachen. Hier auch die Größe runter . Machen Sie es 3 25, nur so dass es gleichmäßig zwischen der linken und der rechten verteilt ist. Ich werde Shift benutzen, um meinen Herrscher zurückzubringen. Und dann füge ich links und rechts ein paar Guides hinzu, nur um die Dinge einfacher zu machen . Also werde ich den Befehl D vier Mal verwenden, um dieses Rechteck zu duplizieren. Eine saubere Möglichkeit, Dinge zu duplizieren, besteht darin, den Altar wieder zu halten und dann dieses Rechteck wegzuziehen. Lasst uns die Pfeiltasten benutzen, um es einfach runter zu bringen. Drei Pixel hier. Ah, und dann, wenn Sie Befehl D drücken, wird es tatsächlich weitergehen und die gleiche Art von Duplikat replizieren und bewegen, die ich getan habe. Lass es uns noch drei Mal machen. 123 und Jetzt haben wir fünf Felder oder Schaltflächen hier, die wir verwenden können. Lassen Sie uns diese auch nach unten bewegen . Natürlich ist es nach unten. Lassen Sie uns das ein wenig nach unten bewegen. Lassen Sie uns voran und fügen Sie diesen Feldern hier etwas Styling hinzu. Lassen Sie uns die Füllung weiß machen und dann einen Strich hinzufügen, der es leicht machen wird. Ich finde, genau hier ist gut. Wenn Sie genau die gleiche Strichfarbe erhalten möchten, gehen Sie vor und geben Sie einfach diese gehen Sie vor und geben Sie einfach diese Hex-Taste in Ihre Farbauswahl für den Strich ein. Lassen Sie uns voran und machen Sie es einfach 1,5 Pixel, nur damit wir es leichter sehen können. Wählen Sie sie erneut aus. Lassen Sie uns voran gehen und runden Sie die Ecken auf acht Pixel mit hier. Eigentlich die Eintöpfe. Sechs. Sieht gut aus. Wenden wir das gleiche Eckenradiuswerkzeug wieder an. Sie können mehrere Objekte mit Shift halten muss voran gehen und fügen Sie etwas Text mit dem Tiki. Ich habe hier eine SMS, einen Typ, eine E-Mail. Zentrieren Sie das hier, und dann ziehen wir es einfach den ganzen Weg durch. Das ist gut genug. Ich werde nur durch alte halten dupliziert Lassen Sie uns Passwort für nicht zu viel über die Schriftarten und die Farben sorgen , weil wir in der Zukunft darauf zurückkommen werden. Lektionen. Im Moment versuchen wir nur, das Grundgerüst zu bekommen. Lassen Sie uns voran und passen Sie diesen Text hier unten auf unsere Schaltfläche, und Sie können den Text mit dieser Option hier zentrieren, wo es Text Linie Mitte sagt. Lassen Sie es uns einloggen. Lassen Sie uns das noch zwei Mal für oder registrieren Sie sich mit E-Mail. Andi. sich schließlich Melden Siesich schließlichbei Google an. Wenn ich zu meinem Design zurückgehe, haben wir hier eine kleine Zeile, um einfach zwischen dem Anmelden und dann den Anmeldeabschnitten zu unterscheiden . Gehen wir zurück und machen wir eine Linie von Präsident Oh, und ziehen einfach eine von der linken Seite meines Mannes auf die rechte Seite. Das Schöne an Guides ist, dass, wenn Sie sich ihnen nähern, sie direkt an Ort und Stelle schnappen. Stellen Sie einfach sicher, dass Sie die richtige Größe für Ihr Objekt haben. Eine Sache zu bemerken, dass, wenn Sie Ihre Linie zeichnen, nur um sicherzustellen, dass Sie nicht in seltsamen Winkeln gehen hier, halten Sie Shift und es wird Ihnen helfen, die Dinge in der geraden Winkelposition zu halten und lassen Sie hier los . Und wir haben unsere Linie hier. Ich werde ihn nur ein bisschen leichter machen. Machen wir das Gleiche. C neun c neun c neun. Ich tippe das hier rein und ich finde, das sieht gut aus. Machen wir es 1,5 und Großheit. Also sehe ich hier, dass es eigentlich zwei Zeilen sind, eine auf der linken, eine auf der rechten s. Also warum gehen wir nicht voran und duplizieren das hier und dann werde ich einfach eine ziehen, während Shift wieder in die Mitte halten und die andere in der Mitte ist gut, so haben nicht im Wesentlichen zwei Linien. Also warum gehen wir nicht voran und benutzen das Eigenschaftenfeld hier, um die genaue Größe zu erhalten, ist, dass wir hier sind, also warum bringen wir das nicht auf 45. Ich denke, das ist zu wenig. Machen wir 1 35 und dann für diesen. Lassen Sie uns voran und machen es auch 1 35 und dann werde ich Shift und dann die Pfeiltasten verwenden , nur um Dinge schnell zu bewegen. Die Umschalt- und Pfeiltasten helfen Ihnen, Schattierungen für Objekte um 10 Pixel gleichzeitig zu verschieben. Andernfalls, wenn Sie nur die Pfeiltasten verwenden, wird es ein Pixel nach dem anderen tun. So fühlen Sie sich frei, die Shift- und Pfeiltasten zu verwenden. Aber wir müssen die Dinge schnell nach oben bewegen oder die Pfeiltasten verwenden, um die Dinge einfach nach unten zu bewegen. Pixel für Pixel. Lasst uns die hier aufstellen. Da gehen wir. Lassen Sie uns einen weiteren Text hinzufügen, indem Sie diesen einfach duplizieren und hier, machen Sie es ein wenig kleiner eingeben oder gehen Sie voran und versuchen Sie es einfach in der Mitte. Cool. Also, jetzt bringen wir die Grundlagen in Gang. Wenn du zu unserer Skizze zurückgehst, werden wir immer noch vermisst. Das Logo fehlte immer noch Begriffe. Wir haben hier kein Hintergrundbild oder das Tutorial-Symbol, also kommen wir in der nächsten Lektion wieder, tatsächlich vollständig oder loggen Sie sich hier 5. Bilder und Overlays: Alles klar, wenn Sie also so weit verfolgt haben, haben wir angefangen, unsere Login-Seite hier zu entwerfen. Übrigens, wenn Sie in den letzten Lektionen nicht mitverfolgt haben, ähm, etwas, was Sie tun können, ob in dieser Lektion oder in zukünftigen Lektionen, können Sie zu den Einkaufszentren gehen hier drüben, und die Ressource ist abgelegt aus diesem Design-Projekt, an dem wir arbeiten, und dann werden Sie nach der Lektion sehen, die neueste eingereicht den neuesten Fichman-Fall, an dem wir in dieser Lektion gearbeitet haben. Also gehen Sie voran und beginnen Sie damit. Wenn Sie nicht schon sonst nur Kopf zurück in Ihren Ruhm, eine Datei und weiter entlang und diese Lektion, werden wir erkunden, wie wir Bilder hinzufügen können Eigentlich gehen Sie voran und hinzugefügt Hintergrundbild als Bolas oder Logo aus der sauberen Känguru-App direkt hier als auch. Also, im Allgemeinen, wenn Sie ein Projekt entwerfen und Sie nach Fotos suchen, um zu verwenden, empfehle ich hier unspool Asche Dort, wie sie sagen, die Internet-Quelle von frei verwendbaren Bildern wie alle die Bilder, die Sie suchen, sind kostenlos zu verwenden, um, Ich benutze diese Person könnte Projekte, und ich empfehle Ihnen, es zu gehen und zu sehen, ob es ein Bild gibt, das Sie für Ihre zukünftigen Projekte verwenden möchten. Also habe ich auf Splashed verwendet, um tatsächlich ein Bild herunterzuladen. Also, um dieses Bild zu finden, gehen Sie zu der Ressource ist Ordner dieses Projekts, an dem wir arbeiten und wieder, Sie können das am Anfang dieses Abschnitts finden. Also gehen Sie voran und öffnen Sie Bilder, finden Sie die Anmeldeseite, und dann werden Sie feststellen, dass hier ein Hintergrundbild ist. Uns. Gehen wir weiter und wechseln zu Fig MMA. Nun, mit Ihrem Ordner hier Also dieser Hintergründe J. Peg Jigme ermöglicht es Ihnen, J peg PNG S V G und sogar pdf zu importieren. Und der einfachste Weg, dies zu tun, ist es nur, um voran zu gehen und ziehen Sie Ihr Bild direkt in Ihre Fingerdatei. Dieses Bild ist riesig. Nehmen Sie sich also etwas Zeit, um zu laden. Ähm, du wirst bemerken, dass das komplett außerhalb des Rahmens geht. Also, was ich tun werde, ist, Shift und Ault zu halten und dann weiter zu gehen und die Größe zu ändern. Mittlerweile. Sie wissen wahrscheinlich, was Verschiebung ausmacht. Es wird den Anteil behalten, so dass das Bild nicht verzerrt wird. Aber was alles tut tatsächlich hilft uns, die Position oder den Wachposten nous dieses Bildes zu halten, so dass, wenn ich die Größe ändere, es ging nicht in die Ecke dorthin. Andernfalls, wenn ich, wenn ich loslasse von alt nur halten Shift, können Sie sehen, dass es weit weg von meinem Rahmen ist. Deshalb benutzen wir Schicht- und Alt-Ding. Das ist gut hier. Gehen wir weiter und bringen es einfach runter und nehmen wir tatsächlich ein bisschen mehr an, ich denke, das ist gut für jetzt. Eine Sache zu erwähnen ist, dass Sie Bilder zuschneiden können, weil, wie Sie sehen können, das Bild riesig ist und es mehr Platz abdeckt, und es muss. Also lassen Sie uns gehen und wählen Sie das Crop Tool von hier oben. Und wenn wir einmal im Erntewerkzeug sind, können wir voran gehen und einfach diese blauen Ecken hierher bewegen, und das wird uns helfen, die Größe zu bekommen, die wir brauchen. Es sieht gut passend perfekt aus. Ähm, Sie können auch auf Mawr Bildwerkzeuge zugreifen Hier ist gut, Sie können es alle diese hinzufügen, wenn Sie hier nach rechts gehen und auf dieses Bildwerkzeug klicken, und von dort aus können Sie Ihre Ernte optimieren. Wenn du einen Fehler gemacht hast und es jetzt ändern willst, oder du kannst Dinge tun, wie zum Beispiel den Kontrast verbessert. Ähm, wissen Sie, Sättigungstemperatur ist einfach eine Art einfacher Bildbearbeitungswerkzeuge, die Sie in vielen Design-Anwendungen bekommen . Er kann das Bild auch von hier aus drehen. Eine Sache, die wir hier erwähnen müssen, ist, dass wir jetzt solche Ernte haben, weil wir so unser Image beschnitten haben. Aber wenn wir so füllen, was Phil tun wird, ist versuchen, voranzugehen und dieses Bild in den Begrenzungsrahmen zu setzen , den wir jetzt haben. Wenn wir passen, wird es versuchen, proportional dasselbe zu tun. Eso, weil dieses Bild ursprünglich, ähm, in diesem Verhältnismäßig ist ähm, , wird versuchen, das zu halten, um hier drüben passen. Ähm, du könntest Kachel machen, wenn du mehrere machen willst. Das ist also wirklich groß. Aber wenn ich das tue, sagen wir, 2% oder 3%, es ist tatsächlich haben dieses Bild wiederholt sich. Ähm, das könnte für einen Hintergrund von Mustern funktionieren das könnte für einen Hintergrund von Mustern funktionieren. Aber für diesen Fall denke ich, dass Ernte die Arbeit erledigen wird. Also ist es nur mit Ernte und dann schließen Sie das hier drüben. , Jetzt werden Sie feststellen,dass meine Hintergrundbilder alles andere abdecken. Also lassen Sie uns das Hintergrundbild hier auswählen. Bringen Sie es den ganzen Weg runter. Jetzt ist es direkt unter all meinen Ebenen hier, was ich will. Ich möchte auch ein übermäßig oben auf diesem Bild hinzufügen, damit der Vordergrund hier nicht mit dem Hintergrund verschmilzt, den wir ein Overlay hinzufügen müssen. Geh durch, wo es steht, Phil, du wirst sehen. Im Moment ist es ein Bild. Stellen Sie sicher, dass das Bild durch die Art und Weise ausgewählt haben, Dann gehen Sie vor und drücken Sie das Plus-Symbol und Phil. Und gerade jetzt hat es uns einen Grady int gegeben. Wenn du also einen Grady in dein Bild einfügen willst, kannst du das tun. Aber ich möchte einfach voran und wählen Sie solide hier drüben, die Overlays auf ihrem Bild. Aber wir können nichts sehen, also bringen wir dem Seil eine Stadt runter, damit wir Teile des Bildes sehen können. Und lassen Sie uns voran gehen und eine dunklere Farbe wählen. Wir werden schwarz und dann ist eine weitere Kapazität hier viel zu hoch, also machen wir vielleicht 50%. Ich denke, das ist gut. Also da hast du es. Wir haben unser Bild hier im Hintergrund hinzugefügt. Jetzt gehen wir weiter und nicht unser Logo. Also wieder, von der Ressource ist Abschnitt, Sie werden sehen, wir haben einen Logo-Ordner hier drüben. Lassen Sie uns voran gehen und ziehen Sie seine farbige hier und lassen Sie uns einfach voran und verwenden Shift Ault und ändern Sie die Größe wieder. Ich denke, vielleicht sollten 80 mal 80 gut sein. Ich werde hier nur ein bisschen hineinzoomen und mal sehen. Verwenden Sie hier den horizontalen Linienmittelpunkt, der die zweite Option in den Linien-Werkzeugen ist. Ein Double zentriert automatisch Ihr Bild innerhalb Ihres Rahmens. Ich werde es ein wenig aufstoßen, vielleicht einen Abstand von 70 nach oben hinzufügen und dann T. verwenden werde ich ah, Text für mein Logo hinzufügen . Lass uns sauberes Känguru machen. Dann stellen Sie sicher, dass Sie alles auswählen und dann die Textgröße auf 26 stoßen. Und ich denke, das sieht gut aus. Ändern Sie die Füllung zwei weiß hier. Ich gehe einfach voran und zentriere das, zusammen mit dem Logo hier, Ding, das gut aussieht. Nun, Sie haben vielleicht bemerkt, dass alles irgendwie von selbst herumschwebt. Nichts ist hier wirklich verwandt, Ähm, und welche Figur erlaubt es uns, in den Ebenen zu tun, nur die Gruppendinge, die zusammen relevant sind, so dass, wenn Sie Änderungen an ihnen vornehmen oder wenn Sie sie bewegen möchten, Angenommen, ich möchte dieses E-Mail-Feld verschieben, anstatt nur das Feld zu verschieben und dann den Text zu verschieben . Ich kann einfach voran gehen und gruppieren Sie sie zusammen und verschieben Sie sie zusammen oder verwenden Sie Stile auf alle Arten von verschiedenen Dingen. Sie dazu WählenSie dazuIhr Rechteck aus. Wir halten Schichten wie Ihr Text. Jetzt können Sie sehen, dass ich beide ausgewählt habe, weil beide diesen kleinen blau getönten Hintergrund haben . Verwenden Sie Befehl G oder gesteuert Jeon Windows, um Dinge zusammen zu gruppieren. Lassen Sie uns das gleiche für das Passwort für den Anmelde-Button hier tun. Lasst uns dasselbe für den Separator tun, den wir hier drüben haben, Senat mit E-Mail anmelden Schule. Ich glaube, alles ist zusammen, außer meinem Einheimischen hier. Also lasst uns das gleiche tun, hier ist Nun, lasst uns weitermachen und all diese umbenennen. Sie können Gruppen umbenennen, indem Sie einfach auf das Ebenenfenster hier doppelklicken, also lassen Sie uns das Logo auf. Lassen Sie uns voran und einfach eine Art von Folgekonvention hier, um eine Hierarchie hinzuzufügen, die Sinn macht . Also lassen Sie uns voran gehen und zuerst unsere Gruppe eins und dann unsere Gruppe, zu der das Passwort Gruppe drei für sechs ist . Und dann lassen Sie uns den Rest e-Mail-Passwort umbenennen anmelden. Aber in Divider, Ich muss tun registrieren e-Mail-Button registriert Google whoops, aber in und die Liste. Gehen Sie einfach voran und nennen Sie dies oder Hintergrund. Und tatsächlich, sperren wir es an Ort und Stelle seiner Rolle, damit wir es nicht versehentlich bewegen. Cool. Ich denke, es war vorerst gut. Jetzt wissen wir, wie man Bilder hinzufügt. Kommen wir zurück und fügen Sie einige Symbole hinzu, denn, wie Sie in meinen Skizzen hier sehen können, habe ich einige Symbole für das Tutorial für die E-Mail und das Passwort. Ähm, und dann fügen wir den Rest der Sachen für die Anmeldeseite hinzu und gehen dann weiter und beenden es in der nächsten Lektion. 6. Icons hinzufügen: In Ordnung, also haben wir Bilder auf unserer Login-Seite hier hinzugefügt. Also lassen Sie uns voran und fügen Sie die Symbole hinzu. , Basierend auf dem,was ich hier in meiner Skizze habe, werden wir drei Symbole hinzufügen, eins für die redaktionelle Seite und dann eins für die E-Mail- und Passwort-Felder hier. Und warum machen wir dann nicht weiter und putzen die Dinge einfach ein bisschen auf, um unsere Logging-Seite hier zu beenden ? Gehen wir zurück zum Fig MMA. Jetzt möchte ich Ihnen zeigen, eine wirklich coole Ressource ist für Symbole, die Sie bekommen können. Ähm, es gibt eine Website namens Flat Icon Dot com. Ich benutze es für viele meiner Projekte. Wie Sie hier sehen können, haben sie fast drei Millionen Vektorsymbole, die Sie in mehreren Formaten verwenden können. PNG SPG Fotoshop auf. Das ist großartig, weil sie völlig kostenlos zu verwenden sind, obwohl sie Sie bitten, dem Künstler jetzt Kredit zu geben, sie haben einige Preisoptionen, wo Sie abonnieren können und sie nicht gutschreiben müssen, und Sie erhalten Zugang zu viel mehr -Symbole als auch. Cool. Mit flachem Symbol habe ich einige Symbole für die Anmeldeseite heruntergeladen. Warum gehen wir nicht weiter und finden sie in? Unsere Ressource ist für dieses Projekt gehen zu Symbolen, und dann werden Sie die Anmeldeseite hier sehen, so dass sie jetzt im SPG-Format sind. Sie können auf jeden Fall PNG- und J-Pick-Symbole in Ihr Projekt importieren, um, obwohl es nicht empfohlen wird, weil Sie nicht viel Kontrolle über, zum Beispiel, die Füllung oder sogar Anpassungen an den Symbolen vornehmen zu können. Der Vorteil eines SVG-Symbols besteht darin, dass Sie die Größe ändern können, ohne sich Gedanken darüber machen zu müssen , dass die Symbole pixelig werden. Im Gegensatz zu einem PNG-Symbol, das im Wesentlichen Rast entsteht eine Bedeutung, dass es einen Standard innerhalb der Höhe hat. Und wenn Sie versuchen, eine Nikon größer als diese Auflösung zu machen, wird sie pixelig. Also empfehle ich, SPG zu verwenden, und das ist, wo wir auch für dieses Projekt tun werden. Ähm , letzte Lektion haben wir Bilder in unsere Feigen-MMA gezogen. Wir können das Gleiche hier tun, aber nur um es willen werde ich Ihnen eine andere Methode zeigen, die Sie auch Bilder einfügen können, was ziemlich ordentlich ist. Es funktioniert ziemlich gut für Symbole ist niedrig. Jetzt wechseln wir zurück zu Fig Mahir. Sie können auch Bilder in Ihre Feige meine Dateien platzieren, indem Sie hier zu den Formwerkzeugen gehen und dann sehen Sie es Platz Bild. Oder alternativ können Sie Shift-Befehl K oder Shift-Steuerung K und Windows drücken, und es wird voran gehen und einen Datei-Browser für Sie öffnen, den Sie verwenden können. Also hier sehe ich, wie meine drei Ikone Also was? Wir gehen voran und wählen sie einfach alle auf einem schnellen Öffnen aus. Jetzt bietet Ihnen das Platzbildwerkzeug eine Reihe von Optionen. Sie können entweder voran gehen und einfach alles platzieren, und es würde alle Bilder hier in meinem Rahmen platzieren. Oder ich kann abwechselnd ziehen und legen Sie sie, wie ich lange soziale gehen, Sie, wie das funktioniert. Also fühlen Sie sich frei, das zu tun, indem Sie einfach ziehen und wieder Shift halten, um die Proportionen zu beschränken . Und dann brauchen Sie, was Sie tun können, ist tatsächlich Platz zu halten, so dass, während Sie Ihr Symbol platzieren , können Sie sie tatsächlich bewegen. Also warum setzen wir das nicht einfach hier und dann gehen wir weiter und ziehen, während wir die Schicht wieder halten. Das sieht so aus, als wäre es ein Passwort. Also wird es hier gehen. Wir werden die Größe ändern und verschieben, nachdem es nur um eine Idee wieder zu bekommen. Ich werde die Schicht halten und die E-Mail machen. Einer hier ist niedrig. Ich habe einfach losgelassen. Und da hast du es. Ihre drei Symbole wurden nicht hinzugefügt, und so denke ich, wir sind bereit, voran zu gehen und machen einige zwei Wochen, um sowohl diese Symbole als auch andere Sachen in unserer Lugging Seite. Also lasst uns von hier oben arbeiten und als Erstes runtergehen. Lassen Sie uns gehen und wählen Sie unser Tutorial-Symbol hier und dann gehen Sie weiter. Hier drüben werden Sie sehen, dass es keinen Phil gibt, sondern vielmehr Auswahlfarben. Und das ist, weil, wenn Sie eine Gruppe haben, die standardmäßig und S V. G. Ah, wird eine Gruppe von Vektoren hier in Ihrem Ebenen-Panel sein. Aus diesem Grund wird es anstelle der Füllung als Auswahlfarben angezeigt. Es wird das Gleiche tun, , also gehen Sie voran und wählen Sie das aus und geben Sie ihm dann eine Füllung oder eine Auswahlfarbe aus weiß. Lassen Sie uns fortfahren und die Größe auf vielleicht 35 Jahr ändern. Ich finde, das sieht gut aus. Ich werde weitermachen und einen Führer hinzufügen. Das ist, Ah, horizontale Führung. Hier können Sie tun, wie 36. Gehen Sie einfach vor und bitte mein Bild in der Ecke ihrer Das sieht gut aus. Jetzt gehen wir runter. Vergrößern wir uns. Gehen wir voran und doppelklicken Sie hier hinein. Möglicherweise bemerken Sie, dass Sie, wenn Sie eine Gruppe haben, doppelklicken müssen, um Elemente innerhalb einer Gruppe zu ändern. Also hier drüben habe ich meine ganze Gruppe. Aber wenn ich etwas mit dem E-Mail-Text ändern möchte, muss ich hier doppelklicken und dann diesen E-Mail-Text auswählen. Also werde ich das tun. Lassen Sie uns voran und ändern Sie dies auf 25 vielleicht sogar 22. Nun ist dieses Symbol hier eigentlich nicht Teil der Gruppe noch eso, das zu tun. Gehen Sie voran und ziehen Sie dieses Symbol für die E-Mail in die E-Mail-Gruppe hier, und so jetzt kann ich tatsächlich gehen und halten Shift und wählen Sie das zusammen und sogar den E-Mail-Hintergrund oder das E-Mail-Textfeld und ungenutzte die vertikale Linie Zentren. Und das wird einfach voran gehen und alles für mich zentrieren. Ich werde den Text hier auf 14 ändern und auch die Farbe ändern. Eine hellere Farbe, da dies der Platzhaltertext ist. Es ist nicht die eigentliche E-Mail. Ich werde die Farbe A für A für eine Vier verwenden, damit Sie diesen Code hier in Ihr Feld einfügen können, und das wird Ihnen die gleiche Farbe geben, wenn Sie das verwenden möchten, und dann lassen Sie uns endlich die Dinge hier richtig platzieren. Lassen Sie uns versuchen, 15 hier und dann zu 15 zu tun. Sie sind eigentlich mal zehn. Das sieht gut aus. Machen wir das Gleiche hier. Lassen Sie uns dies zuerst innerhalb der Passwortgruppe platzieren. Stellen Sie sicher, dass Sie es innerhalb der Gruppe und nicht außerhalb. Um beispielsweisesicherzustellen, dass sich beispielsweise diese Ebene innerhalb der Gruppe befindet, sollte hier eine kleine Einrückung vorhanden sein. Wenn Sie es aus Zufall verpassen, können Sie einfach voran gehen und, ähm, über die Gruppe schweben, und dann wird es definitiv in diese Gruppe platzieren. Es ist einfach doppelt schnell hier drin. Ändern Sie dies auch auf 25, oder wir hatten eine 22. Lassen Sie uns voran und wählen Sie alles hier in der Mitte von ihnen. Ich habe gerade diese verschoben, bis wir Sina diese anwenden Füllung von einem vier a 484 Nur verschieben Sie dies , so dass es mit dieser Position in der Position der E-Mail übereinstimmt. Sieht so aus, als hätte ich vergessen, meinen Text in 14 zu ändern. Und wieder, ich werde das wieder zentrieren, denn wenn Sie die Textgröße ändern, wird es die vertikale Ausrichtung ändern. So stellen Sie sicher, dass Sie immer verwenden, dass Lyman Tools nur Dinge wieder. Wenn sie herumgezogen werden, gehen wir hier mit Veränderung rein. Diese auf 14 ist niedrig. Gehen wir hier runter. Lasst uns voran und schreibe diesen oder Text hier drüben. Und um dies zu tun, gehen Sie zum Textbereich von Ihrer Eigenschaften. Klicken Sie auf die drei Punkte und hier in Ihrer Mitteilung, Sie haben eine Reihe von verschiedenen Anpassungen, die Sie vornehmen können. Ich war an dem Buchstaben interessiert, um den Großbuchstaben zu machen, und jetzt ist es Großbuchstaben. Gehen Sie voran und ändern Sie die gefüllt in weiß, und dann werde ich die beiden Linien auswählen und tatsächlich ihre Pay-Stadt nach unten bringen Lassen Sie uns versuchen 50%. Wir können sogar so etwas wie 35 machen. Wir wollten auf jeden Fall sichtbar sein, aber gleichzeitig subtil. Ich denke, das ist gut. Vielleicht nur Textgröße davon auf auch 14 stoßen. Bleiben Sie konstant. Lass uns voran gehen und alles hier auswählen und auch ihre Linie machen. Das sieht gut aus. Und dann ist das die Größe des Stückes auf 14 und 14 hier. Schließlich stellen wir sicher, dass wir die Dinge wieder richtig ausrichten. Ich habe vergessen, dies für einige der Knöpfe zu tun, also geh wieder rein. Stellen Sie einfach sicher, dass alles kritisch ausgerichtet ist, und ich denke, das sieht hier gut aus. also Wenn du alsozurück zur Skizze gehst, sind wir fast fertig. Wir brauchen nur einen Begriffs-Knopf hier drüben oder einen Abschnitt mit Begriffen. Also machen wir einfach einen Text statt eines anderen Knopfes, irgendwas. Wir haben schon zu viele Knöpfe hier. Also lassen Sie uns tun Lassen Sie uns voran und nur Presti öffnen ein Textjahr und richtige Nutzungsbedingungen. Geh weiter und ändere das hier in Weiß und sieht so aus, als hätte ich das Gehäuse hier komplett vermasselt . So gibt es gehen wir, Nutzungsbedingungen, und wir können sogar tun und Datenschutzrichtlinie. Das ist in der Regel, was Sie sehen, um bestimmte Teile des Textes fett zu machen. Wählen Sie einfach das Teil aus, das fett sein soll, und gehen Sie dann voran und verwenden Sie den Befehl. Seien Sie als Abkürzung, oder Sie können tatsächlich von hier aus darauf zugreifen und es fett machen. Lassen Sie uns das Gleiche mit den Nutzungsbedingungen machen. Mach es fett. Sieht gut aus. wir sicher, dass es zentriert ist. Okay, das ist zentriert. Und stellen wir sicher, dass wir einen Abstand behalten. 36 von unten ist niedrig. Wenn ich jetzt verkleinere, wirst du sehen, dass wir fast fertig sind. Nächste Lektion. Wir kommen zurück und reden über Farben und bei einigen Farben ins Jahr, denn, wie Sie sehen können, haben wir keine Farben außer dem Logo eso. Wir werden versuchen, die lokale Farbe zu verwenden, die eine Orange ist, um ein schönes Farbschema für unsere oben in der nächsten Lektion auszuwählen. 7. Auswahl eines Farbschemas: Alles klar. Also lasst uns in die Auswahl eines Farbschemas für unsere App springen, weil, wie ich am Anfang des Abschnitts Ah erwähnt habe, der Client kein Farbschema angegeben hat, also werden wir ihnen helfen, eins in dieser Lektion zu erstellen und dann ein wenig lernen mehr über Farbschemata und Farbstile in Fig MMA. Cool. Also in der Ressource enthalten ist dieser Lektion wird ein kleiner Text eingereicht werden, der Ihnen eine Vorlage geben wird , die ich für unser Farbschema zusammengestellt habe. Das werden wir in nur einer Sekunde benutzen. Einige gute Farbe liest. Also gehen Sie voran und geben Sie diese Artikel oder lesen Sie. Wenn Sie mehr über Farben erfahren möchten und wie Sie sie in Ihrem Projekt anwenden, und das ist auch wirklich cool. Es gibt eine Reihe von Farbschema. Ressource ist also all diese Websites helfen Ihnen, ein Farbschema für Ihr Projekt zu erstellen. , Ich weiß,ich sage immer wieder Farbschema, und Sie wissen vielleicht nicht genau, was Farbschema ist, aber im Wesentlichen kamen Farben. Es ist irgendwie wie eine Paletten, oder? Wenn Sie Künstler sind, haben Sie eine Palette von verschiedenen Farben, die Sie in Ihrem Design oder in Ihrer Kunst verwenden, also ist es das Gleiche. Es gibt nur so viele Farben, die wir verwenden können und die zusammen gut aussehen. Das ist also, was ein Farbschema ist, eine Reihe von Farben, die wir für ein Projekt verwenden können. Wir halten uns an sie und schaffen Konsistenz mit ihnen und stellen sicher, dass es auch Kontraste gibt. So sieht es gut aus und es ist lesbar und all das. Gehen wir also weiter und öffnen Sie diese zweite Ressource hier. Ich mag es wirklich. Es wird uns helfen, ein Farbschema für unser Projekt zu entwickeln, also habe ich es gerade geöffnet. Hier oben. Es nennt sich Farben, seit Bo. Im Wesentlichen verfügt es über eine Reihe von verschiedenen Farbpaletten oder Farbschemata, die Sie für Ihre Projekte verwenden können . Es gibt einige wirklich nette hier drin, wirklich knackig und scharf, Ähm, und es gibt andere, die irgendwie mehr Licht sind, abhängig von dem Projekt, das Sie verwenden, können hier definitiv Inspiration bekommen, oder verwenden Sie die gleichen Paletten in Ihren Projekten. Sie haben noch ein paar andere Sachen. Inspiration, ähm, Freebies, Markenfarben. Wenn Sie Ihre Lieblingsmarken Farbschema sehen wollen und sogar einige wirklich coole Grady Antzas , nun, äh, wir gehen zurück in die Farbpalette tippen. Gehen wir weiter und wählen Sie ein Farbschema, das für unser Projekt sinnvoll ist, da sauberes Känguru mit Reinigungswasser zu tun hat, wissen Sie? Also, ähm, diese Farben Luft normalerweise mit der Farbe Blau verbunden. Ähm, jetzt sehe ich hier im Projekt. Ah, ihr Logo ist schon orange. So werden Blau und Orange wirklich gut zusammen passen. Ähm, ja. Ein gutes Beispiel dafür könnte hier sein, wo wir eine Art Blau und Orange haben. Ich denke, was ich tun werde, ist, dass ich diese Palette hier verwenden werde, aber dann geh weiter und füge einige benutzerdefinierte Farben hinzu. Also lasst uns weitergehen und einige der Farben kopieren. Aber bevor wir das machen, werde ich diesen Link öffnen, von dem ich dir erzählt habe. Gehen Sie einfach weiter und öffnen Sie den Link hier. Ausgestellt führen Sie direkt zu dieser Datei, wo ich zusammen eine Farbschema-Vorlage, die Sie verwenden können. Es hat Zugriff haben Sie Zugriff auf diese Links. Hier ist gut, wenn Sie das jetzt öffnen können, waren wir gerade auf der zweiten Website hier wirklich schnell. Dies ist im Wesentlichen Ihre Farbpalette, die Sie für Ihr Projekt verwenden werden. Wir haben eine Primärfarbe, die in der Regel die Markenfarbe, sekundäre Farbe und und dann Akzentfarben, die verwendet werden, aber nicht so häufig wie eine sekundäre in Primärfarben. Und dann können wir auch eine primäre und sekundäre Textfarben tun. Also, jetzt gehen wir voran und kopieren das einfach vorbei. Wählen wir hier alles aus. Alles ist schon in einer Gruppe, was schön ist. Während diese Gruppen wie diese voran gehen und Befehl drücken, sehen oder steuern. Siehe unter Windows auf, dann gehen Sie zu Ihrem eigenen Projekt. Ich werde es einfach direkt oben auf meiner Anmeldeseite einfügen, aber später werde ich dies in einem anderen Abschnitt organisieren. Ich werde es vorerst einfach hierher bringen. Lassen Sie uns einfach die Vorlagen und den Text hier entfernen, und dann gehen wir weiter und weisen Sie ihm einige Farben zu. Also erste Farbe, die ich mir zuweisen werde, wird wahrscheinlich eine Farbe sein, die alle als sekundäre Farbe verwendet . Also gehen wir voran und verdoppeln uns schnell hinein. Auch eine andere Möglichkeit, wenn Sie eine Gruppe wie diese haben und Ah auswählen möchten, ein Objekt darin, ohne darauf doppelklicken zu müssen. Sie können einfach den Befehl halten und dann fortfahren und ein Objekt im Inneren auswählen. Das ist eine ziemlich nette Möglichkeit, Dinge auszuwählen, anstatt sich die ganze Zeit schnell verdoppeln zu müssen. Also, jetzt habe ich das ausgewählt, um, was ich hier zu tun versuche, ist diese Art von orange Farbe zugewiesen, oder ich sehe, es hat mehrere orangefarbene Farben, also werden wir die Farbe hier benutzen, um diesen Bruchwinkel zu füllen. Der einfachste Weg, dies zu tun, ist, die Kontrolle zu halten , zu sehen, und dann erhalten Sie eine kleine Farbauswahl, die Sie sogar in der oberen rechten Ecke des Bildschirms sehen können , mit der Sie es auswählen können. Füllt. Gehen wir hier runter. , Jetzt werden Sie feststellen,dass es hier mehrere Orangen gibt, aus denen wir wählen können. Also gehen wir weiter und gehen einfach hier rüber, wo die Beine des Kängurus sind, und wählen Sie diese Orange. Wie cool ist das? Eine andere Möglichkeit, dass Sie auch Füllung hinzufügen können, während Sie eine Farbauswahl verwenden oder auf I drop Picker, um es zu öffnen. Und dann habe ich das Werkzeug auch von hier abgelegt. Also gehen wir zurück zu den Farben. Inspo. Ähm, und ich mag diese Blautöne hier wirklich, jemand, der das für den Rest meiner Farbpalette benutzt. Also lassen Sie uns hier kopieren, indem Sie einfach auf das Blau klicken und dann gehen wir wieder zum primären. Ich habe das ausgewählt mit Befehl auf und wähle diesen rechten Winkel, und hier drüben sehen Sie direkt neben Ihrer Füllfarbe. Es gibt einen kleinen Text, der im Wesentlichen der Hex-Code dieser Farbe ist, also im Moment ist es weiß und weiß hat einen Hex-Code von sechs efs. Also, wenn Sie voran gehen und ersetzen Sie dies mit Befehl V oder Steuerung über unter Windows auf drücken Sie die Eingabetaste, das wird die Farbe genau dort für Sie Tempo. Ich werde diesen Text auch nur ändern, dass wir ihn verwenden können. Und sagen wir, es gibt einen Entwickler, der diese Farbe verwenden möchte. Sie wissen, welchen Hex-Code es darstellt. Lassen Sie uns dasselbe für die orangefarbene Farbe tun. Lassen Sie uns einfach voran gehen und kopieren Sie diesen Hex-Code, um hier einzugeben. Gehen wir zurück zu den Farben. Inspo, nimm dieses blaue Hier, vielleicht, und fügte zu diesem Feld direkt hier und auch Text andan. Schließlich möchte ich eine helle Farbe machen, die wir vielleicht für den Hintergrund bestimmter Teile der App verwenden können . Doppelklicken Sie hier noch einmal und ändern Sie das dann auch. Und da haben wir es. Wir haben, ah, schöne Farbpalette, die wir für unser Projekt verwenden können. Um, wir werden später die primären texanischen sekundären Textfarben zuweisen, aber jetzt gehen wir einfach voran und konzentrieren uns auf die Anwendung dieser Farben. 8. Farbstile einrichten: Alles klar. Nun, da wir unser Farbschema für up erstellt haben, möchten Sie voran gehen und tatsächlich die Farben zu dem so genannten Farbstil hinzufügen, wodurch wir die gleichen Farben während unseres Projekts wiederverwenden können, so dass wir diese Farben leicht ändern können , wenn wir entscheiden, in der Zukunft und müssen nicht alle Objekte mit dieser Farbe verbunden zu ändern. Gehen wir also voran und wählen Sie hier die erste Farbe aus. Ich werde hier das Kommando halten und darauf klicken, wo es steht, Phil, du wirst hier rüber gehen, wo dieses also Punkt-Icon hier drüben namens Style. Gehen Sie voran und klicken Sie darauf und ich gehe voran und erstelle einen Stil mit dem Plus-Symbol und nenne es Primär und ich gehe voran und erstelle Stil. Und wie Sie sehen können, habe ich diesen Farbstil von Blau. Lassen Sie uns auch den Rest der Farben hier hinzufügen. Wir werden das Kommando schnell für diese Orange verwenden. Gehen Sie nun vor, um den Stil Hier, Erstellen Stil sekundär. Dasselbe für diese Akzentfarbe. Toller Stil Akzent Eins. Sie bekommen die Idee mittlerweile Akzent und da haben Sie sie. Ich habe dieses Farbschema jetzt hier drin. Also, wie wenden wir das jetzt in unsere Knöpfe an? Gehen wir runter zu unserer Login-Seite. Lassen Sie uns voran und verwenden Befehl und klicken Sie auf den Hintergrund dieser hier. Andernfalls müssen Sie, wenn Sie die ganze Gruppe auswählen, die Farbe hier in den Auswahlfarben hinzufügen. Also funktionieren beide. Lassen Sie uns voran und wählen Sie einfach die ganze Gruppe aus. Gehen Sie zu den Auswahlfarben, und dann von hier aus sehen Sie Stile. Also gehen Sie vor und öffnen Sie den Stil. Und da hast du es. Ihr habt euch selbst hier, den ihr auf diesem Knopf benutzen könnt. Ähm, ich denke, hier hätte ich den primären Knopf benutzt. Gehen wir weiter und ändern Sie die Textfarbe zehe weiß hier unten. Und dann gehen wir runter zu unserem nächsten Knopf hier drüben. Registrieren Sie sich mit E-Mail und dann wieder hier. Aber wählen Sie einen Stil aus primären. Dasselbe für den Text weiß für den Senat mit Google-Button. Ähm, ich werde voran gehen und tatsächlich eine Füllung von nur Weiß zuweisen. Ich finde, das sieht ziemlich gut aus. Lassen Sie uns voran und wenden Sie den gleichen Stil auf unsere Symbole hier, um voranzugehen und doppelklicken. Stellen Sie sicher, dass Sie den gesamten Rahmen oder die Gruppe auswählen. hier Lassen Sie michhiervoran und ändern Sie die Auswahlfarbe mit dem Farbstil in den primären. Dasselbe für die E-Mail. Primär. Jetzt geschieht hier die Magie. Also sagen wir, plötzlich ändern Sie Ihre Meinung und Sie wollen mit einer violetten Farbe gehen . Sie können einfach eines der Elemente mit diesem Farbstil Kopf auf hier über wählen, gehen Sie vor und klicken Sie darauf und wählen Sie dann Stil bearbeiten und Sie können gehen und jetzt diese Farbe ändern . Eso Lass es uns vielleicht eine violette Farbe machen. Nun, wie Sie sehen können, ändert sich alles im Projekt, das diese Farbe verwendet, und Sie können sich vorstellen, wie cool das wäre, wenn ich mehrere Seiten hier entworfen hätte. Aber auch hier in dieser einen Gruppe ist das super cool. Wir können weitermachen und einfach mit diesem Ah herumspielen und unsere Primärfarbe ändern, wenn wir uns dafür entscheiden. Aber ich werde eigentlich einfach rückgängig machen und zurück zu unserer Hauptfarbe hier und da haben wir es. Das sind Farbstile für Sie. Ich denke, wir sind hier ziemlich fertig. Ich werde hier nur ein paar Berührungen machen, um das nur ein bisschen voll zu verbessern , wenn du willst. Ansonsten, in der nächsten Lektion, können Sie auch die Feige mein Fell herunterladen, die wir bis hier haben und damit beginnen. Aber lassen Sie uns hier voran gehen und es zu verbessern. Vergrößern wir einfach hier. Bringen Sie diesen Knopf ein bisschen runter. Gehen wir weiter und erhöhten den Abstand zwischen ihnen auf fünf, und wir haben tatsächlich vergessen, hier etwas hinzuzufügen. Es gibt in der Regel Passwort vergessen Taste Ich werde als Text hinzufügen. Geben Sie ihm eine Farbe weiß und änderte die Dicke Rohr. Halten Sie sich fest. Lass uns einfach weitermachen und das hier drüben platzieren, das gut aussieht. Ich werde diese Trennwand ein wenig nach oben bewegen, bis die haben. Vielleicht ist es ein Abstand. Lassen Sie uns versuchen, 55 Pixel hier zu machen, und dann lassen Sie uns diese aufstoßen und versuchen, die Szene zu bekommen. Ich benutze alle hier wieder, um den Abstand zwischen verschiedenen Objekten mit den, die ich ausgewählt habe, zu sehen . Das ist gut. Fügen wir ein wenig mehr Abstand zwischen diesen hinzu und machen es auch fünf. Lassen Sie uns verkleinern. Und ich denke, das sieht jetzt viel sauberer aus. Cool. So haben wir jetzt eine fertige Lugging Seite. Ich finde, es sieht ziemlich schön aus. Und ich denke, jetzt sind wir bereit, auf unsere Tutorial-Seite zu gehen, uh, und haben das zusammen entworfen. 9. Die Tutorials Seite: In Ordnung, also haben wir unsere Login-Seite. Jetzt weiter. Lassen Sie uns in die Gestaltung unserer Tutorial-Seite gehen. Gehen wir zurück zu meiner Skizze, nur um zu sehen, was wir hier haben. , Also dachte ich,wir sollten hier einen unscharfen Hintergrund dieses Bildschirms machen. Also, wenn der Benutzer auf das Tutorial tippt, würde es einfach gehen und den Hintergrund von hier verwischen und dann ein wenig Pop-up hier mit dem Titel und dem Textkörper hier drüben. Vielleicht ein kleiner Vektor, den wir verwenden können, um diesen Schritt zu zeigen. Ich werde ziemlich cool sein. Also lasst uns anfangen, das zu entwerfen. In dieser Lektion werden wir also mit Effekten herumspielen, um dieser Seite eine Hintergrundunschärfe hinzuzufügen und dann darauf aufzubauen. Ah. Also, was wir tun müssen, ist eigentlich alle Elemente hier in unser Tutorial zu kopieren, und Sie werden sehen, warum in einer Sekunde, lasst uns voran gehen, Zehe hier Log und Frame sind, Ähm, und tatsächlich, gehen Sie voran und wählen Sie einfach alles hier aus. Gehen Sie voran und verwenden Sie den Befehl. Siehe oder steuern. Sehen Sie, um zu kopieren, gehen Sie zu Ihrer redaktionellen Seite und stellen Sie sicher, dass Sie die redaktionelle Seite ausgewählt haben und dann Befehl V tun und dann fortfahren und tatsächlich Befehl G verwenden, um all das in einem Element zu gruppieren . Auf diese Weise haben wir nur eine einfache Gruppe hier drüben. Ich werde es sperren, damit ich nicht versehentlich Dinge herumschiebe. Und jetzt gehen Sie vor und erstellen Sie ein Rechteck, indem Sie die R zwei von der oberen Ecke hier drüben bis unten drücken. Also, wenn du das Rechteck hier hast, lass uns weitermachen und den Phil in Schwarz umwandeln. Und dann ändern wir die Deckkraft auf, ähm, denken wir, 55% sieht gut aus. Gehen Sie nun zu Effekten, erstellen Sie einen neuen Effekt, indem Sie das Pluszeichen hier drücken und dann auf den Schlagschatten klicken und diesen in eine Hintergrundunschärfe ändern. Es ist jetzt, wie Sie sehen können, fügt es eine schöne Hintergrundunschärfe zu meinem rechten Winkel hier auf. Also, was das tut, ist, dass es alles darunter verwischt, weil diese Schichten oben auf der ganzen Gruppe, die wir im Wesentlichen von dieser Seite hier erstellt haben, die gerade voran ging und alles unter dieses Rechteck gesprengt hat. Wenn er Dinge auf diesem Rechteck spielt. Es wird nicht verschwommen, was wir wollen. Sie setzen die Unschärfe Ihrer Hintergrundunschärfe fort, indem Sie hier auf dieses Symbol klicken und die Zahl hier ändern. Also im Moment sind es vier, aber wir können 10 neue 15 durch auf mehr Unschärfe machen. Ich denke, für uns werde ich acht vorerst machen, ich denke, acht Arbeit, Ähm, oder sogar sechs. Lassen Sie uns nun voran und erstellen Sie ein Rechteck für den Hintergrund meines Tutorials. Das ist unser Lasst uns einen ziehen, der auf meiner Skizze basiert. So etwas würde gut aussehen. Genau wie dort drüben. Verwenden Sie hier das Linien-Werkzeug, um sicherzustellen, dass es zentriert ist. Ändern wir die Füllfarbe in Weiß. Lassen Sie uns voran gehen und die Grenzen zu machen, um 25 Pixel Sache, die gut aussieht und nein, wir brauchen, um Texte hier, eine für die Titel. Lassen Sie uns T und Typ und Titel tun, wenn wir die Schriftart hier auf 22 setzen. Lassen Sie uns voran und wählen Sie einfach beide aus und verwenden Sie das Lyman-Tool. Gehen wir voran und duplizieren Sie einfach diese Steuer Holding alte do Körper hier und lassen Sie uns gehen und den Stier auf eine normale und Telefon-Größe von 14 ändern. Jetzt werden Sie feststellen, dass, wenn ich hier tippe, geben Sie etwas Zufälliges hier ein, der Text wird weiter und weiter. Ich war nicht das, was wir für unser Tutorial für Tutorial wollen. Wir wollen hier eine kleine Absatzart von Text. Also hier kommt Ihre Texte Begrenzungsrahmen an Ort und Stelle. Wenn Sie jetzt Größe oder Text hier neu, können Sie wählen, wie die Breite davon sein wird. Und dann können Sie jetzt voran gehen und nur zentrieren, dass hier nur wieder, stellen Sie sicher, dass alle diese Luftzentren zusammen. Nun, wenn ich hier mehr Text hinzufüge, wird es an dieses Feld gebunden sein. Also, in unserer Ressource ist wir diese App haben. Notizen. Starten Sie txt. Geh weiter und öffne das. Sie werden feststellen, dass wir Tutorial-Schritte in hier haben, so dass die ersten Schritte Text ist hier drüben. Also gehen wir weiter und kopieren das einfach vorbei. Und das zu hören sieht ein bisschen besser aus. Lassen Sie uns voran und ändern Sie das einfach und stellen Sie erneut sicher, dass es zentriert ist. Gehen wir voran und machen einen Ausrichtungsmittelpunkt für den Text. Ich denke, wir können Telefon-Größe von 16 hier machen, damit es ein bisschen besser aussieht. Und für den Titel, lassen Sie uns voran und setzen Sie es einfach zu durchsuchen. Lassen Sie uns voran und gruppieren Sie diese ganze Sache zusammen, indem Sie hier alles auswählen. Befehl G. Stellen Sie sicher, dass es wieder zentriert ist. Gehen wir weiter und bringen die ein bisschen runter. Lassen Sie uns voran und fügen Sie ein weiteres Rechteck für unsere, aber in hier 2 55 für die Höhe und er , die gut aussieht. Ich möchte nur sicherstellen, dass dies auch mit meinem Button übereinstimmt. Ich werde meinen Knopf Phil ändern, indem ich Stile verwende, werde ich den Hintergrund der Schaltfläche in den blauen ändern. Nun gehen wir voran und fügen Sie hier einen Rahmenradius von acht hinzu und dann gehen Sie voran und fügen Sie einen Text hinzu. Für die nächste, Ändern Sie die Farbe auf Weiß und gehen Sie einfach vor und Mitte dieser zusammen. Gruppieren Sie sie zusammen und lassen Sie uns einfach hier reingehen und den Text hier zentrieren. Das sieht gut aus. Nun gehen wir weiter und fügen einige Vektorsymbole hinzu. Also wieder, in der Ressource ist, wenn Sie zu Symbolen gehen und in das Tutorial gehen hier, werden Sie sehen, dass wir drei Vektoren haben, die wir für unsere Schritte verwenden können, Äh, also lasst uns voran gehen und tatsächlich einfach alle in meine Figment gezogen haben Datei hier. Wenn Sie zurück Figments gehen, legen Sie sie alle Seite an Seite. Welche Schule? Lass uns voran gehen und zuerst die Größe ändern, die ihr riesiger zurückgeht. Ich denke, du machst ein bisschen größer als das. Lasst uns einfach voran gehen und diese aus dem Weg bringen. nun Bedenken SienunVektorsymbole wie SV G, ähm, als Frames in Ihrem Projekt angezeigt, also stellen Sie sicher, dass Sie es als Frame behandeln, wenn Sie sich bewegen. Also lasst uns voran gehen und diesen Rahmen für dieses Symbol hier finden und ihn tatsächlich innerhalb unserer Gruppe hierher ziehen . Also, wenn ich scrollen alle Tutorial und dann ist das unsere Gruppe, bitte setzen Sie innerhalb von hier. Und dann, während ich die Schicht halte, werde ich sie beide zentrieren. Ich werde dafür sorgen, dass ich denke, dass wir unserem Text etwas mehr Abstand hinzufügen können, und ich denke, das sieht gut aus. Also, was machen wir voran und fügen tatsächlich Styling zu der Ikone hier? Durch die Auswahl oder Farbstile und vielleicht die Wahl der sekundären Option und dann für unseren Titel oder den Text hier drüben. Wechseln tut es auch. Das Blau. Vielleicht. Ich denke, wir können das sogar ein bisschen größer machen. Versuchen wir 24 und dann gehen Sie weiter und wählen Sie diese beiden zusammen, um sie zu zentrieren und sicherzustellen, dass alles hier ebenfalls zentriert ist. Es sieht so aus, als ob es so ist, dass du es hast. Das ist unser Tutorial, um die letzten beiden Schritte zu erstellen, wenn wir voran gehen und diesen ganzen Rahmen hier auswählen und Befehl D zweimal tun, um es zweimal zu duplizieren. Und dann lasst uns einfach wie diese beiden Frames herauszoomen und sie einfach direkt darunter bewegen und dasselbe hier drüben tun. Also gehen wir weiter und benennen Sie dieses 12-Tutorial um. Schritt zwei hat dieses gewünschte Tutorial Schritt drei umbenannt. Und dann, natürlich, lassen Sie uns Tutorial machen. Schritt eins. Jetzt werden wir weitermachen und einfach schnell den Inhalt hier drinnen ändern. Also lassen Sie uns tun, um zu unserer Textdatei hier zurück zu gehen und sieht so aus, als ob es sich um Anfrage handelt . Fügen Sie diesen Text in hier ein, und dann gehen wir weiter und verwenden Befehl X oder steuern Exxon-Fenster, um dieses Symbol auszuschneiden und es durch dieses zu ersetzen. Ich werde einfach klicken, wo es ist und dann weitermachen und einfach mit Befehl V oder Control V genau dort gefahren . Jetzt sieht es so aus, als hätte es dies in den Rahmen des anderen gelegt. Also lassen Sie uns voran und trocknen, gehen Sie außerhalb des Rahmens des anderen Symbols und dann das andere Symbol führen. Und wir wollen noch hinzufügen Apply the orange Phil, und das sieht gut aus für einen Schritt, auch. Der nächste ist unser Schritt drei. Geh wieder hierher und nannte diesen um, um die Stimmen zu säubern. Gehen Sie weiter und fügen Sie das hier ein. Wählen wir hier alles und den Text aus und zentrieren Sie das einfach. Und dann, natürlich, gehen wir zu unserem letzten Lecter hier und verwenden Command X erneut, fügen Sie das hier ein und stellen Sie sicher, dass das außerhalb von diesem liegt, löschen Sie den Shop-Direktor und ändern Sie dann den Stil, auch. Lagerung. Lassen Sie uns voran und ändern Sie den Text hier zu erledigen, weil an dieser Stelle die Benutzer das Tutorial abgeschlossen haben, also werden sie damit fertig sein. Geschichte weg. Da haben wir es. Dieser sartorial Schritt eins Schritt zwei und sogar Schritt drei 10. Komponenten: In dieser Lektionwerden wir über etwas sehr Nützliches in Fig MMA Kult-Komponenten sprechen. In dieser Lektion Bisher haben wir in unseren Tutorial-Seiten mehrere Karten im Wesentlichen für jeden Schritt des Tutorials erstellt, richtig, da der Benutzer von Schritt Nummer eins den ganzen Weg durch Schritt Nummer drei geht. Die Ansicht, diese kleine Tutorial-Karte. Ähm, von wo aus sie ihre Informationen über die Funktionsweise der APP erhalten können. Nun sagen wir, ich begreife, dass ich voran gehen und die abgerundete Nous dieses Hintergrunds hier drüben ändern möchte. Also natürlich können Sie hier rüber gehen und sagen wir von 25 Begin sagte, dass 15. Aber jetzt sehen Sie, was passiert. Unser Tutorial, Schritt Nummer zwei und Schritt Nummer drei haben immer noch einen Eckenradius von 25. Das liegt daran, dass es wirklich keine Beziehung zwischen jeder dieser Karten gibt, aber welche Komponenten erlauben es uns, zu tun? Es ist eigentlich los und erstellen Sie eine Instanz dieser Karten oder wirklich alles, was einen sehr ähnlichen Stil oder eine wirklich ähnliche Konfiguration haben wird, genau wie wir es hier tun, richtig, auch wenn der Text für jede Karte anders ist. Aber im Allgemeinen haben wir hier noch viel mehr im Hinblick auf das Styling oder die Art und Weise, wie die Elemente platziert werden . Und es sei denn, wir gehen und machen diese Änderung auf jedem Bildschirm einzeln, aber wir werden es nicht anders bekommen können. Hier kommen also Komponenten ins Spiel. Ich werde diesen Grenzradius hier rückgängig machen. Stellen Sie einfach sicher, dass es wieder 25 ist. Da gehen wir, und jetzt werden wir das in eine Komponente umwandeln, und dann wirst du sehen, wie es nützlich ist. Also wieder, Komponenten können jeder Teil des Designs sein, die Sie Wand duplizieren möchten, Beibehaltung eines bestimmten Stils oder eines bestimmten Merkmals, so dass, wenn Sie zu irgendeinem Zeitpunkt entschieden haben , die den Stil geändert ändern, geändert die Eigenschaften von dieser Komponente, können Sie dies an einem Ort tun und müssen es nicht an mehreren Stellen tun. Wenn Sie die Lektion gesehen haben, in der wir die Farbstile gemacht haben, ist es sehr ähnlich wie Farbstile, bei denen, wenn er nur diese eine Änderung hier vornehmen, alle unsere Schaltflächen und Elemente, die diesen Farbstil verwenden, ändern, anstatt dass wir in einem gehen müssen durch einen und sie zu ändern. Also lassen Sie uns voran gehen und springen und tatsächlich eine Komponente machen, also beginnen Sie mit der Karte hier drüben auf Tutorial. Schritt Nummer eins. Wenn Sie nicht mitverfolgt haben, gehen Sie unbedingt zum Ordner Ressource ist hier, den Sie vom Anfang dieses Abschnitts wieder erhalten können und gehen Sie dann nach oben, um in Mockups zu gehen und die Lektion zu finden, auf der Sie sich befinden. Und Sie können voran gehen und die Datei öffnen und mit uns fortfahren. Sonst springen wir rein. Ich werde einfach hier reinzoomen. Gehen wir weiter und wählen Sie diese Gruppe aus. Und wie Sie sich vielleicht erinnern , enthält diese Gruppe den Text hier. Kleiner Titel A. Zola ist der Hintergrund. Jetzt habe ich gerade bemerkt, dass meine Schaltfläche und mein Symbol hier, mein Vektor hier falsch innerhalb der Gruppe sind. Also gehen wir hier rüber zum Ebenenfenster, Ähm, und gehen Sie einfach weiter. Und zuerst gruppieren wir die nächste Schaltfläche zusammen. Das Rechteck ist immer der Text mit dem Befehl G. Lassen Sie uns diese nächste Schaltfläche nennen, und dann haben wir den Vektor hier. Gehen wir weiter und wählen Sie einfach diese beiden aus. Aus irgendeinem Grund wurden sie zusammengefasst, aber wir wollen eigentlich voran gehen und sie einfach trennen und in diese Gruppe setzen. Da gehen wir. Und jetzt haben wir alles in einer Gruppe. Ich werde nur noch ein paar Sachen bestellen. Bringen Sie dieses Stöbern den ganzen Weg hierher, bringen Sie das hier hoch. Sagte es in einer Art von einer schönen Bestellung von oben nach unten. Ich finde, das sieht gut aus. Gehen wir jetzt weiter und wählen Sie die ganze Gruppe aus. Stellen Sie sicher, dass Sie die Gruppe mit jedem Element im Inneren ausgewählt haben. Gehen Sie den ganzen Weg hier hoch, wo es heißt, Komponente erstellen. Alternativ können Sie die Option Befehl K oder Ault Control K ausführen, und das wird dasselbe tun. Und jetzt werden Sie auf meinem Ebenen-Panel sehen, diese Gruppe hat plötzlich ein neues Symbol, und sogar der Text ist lila. Und das sagt uns, dass dies jetzt eine Komponente ist. Also, jetzt, was ich tun werde, ist, gehen und halten Sie Ault und gehen Sie weiter und ziehen Sie eine weitere Kopie auf diese Seite. Tutorial Schritt Nummer zwei Seite jetzt, weil ich meine Komponente aus dieser Gruppe hier erstellt habe. Dies ist nicht meine Master-Komponente. Was ich jetzt getan habe, ist, dass ich eine Instanz aus dieser Master-Komponente erstellt habe, was bedeutet, dass diese Gruppe hier jetzt zu den Eigenschaften und dem Styling und allem hier gehört . Also lasst uns über Fackelte oral Schritt zwei Seite gehen. Ähm, ich werde einfach weitermachen und das nach draußen bringen. Dies ist die Karte, die ursprünglich hier war. Ich werde das auch rausbringen. Ich werde das nur neu ordnen. Also ist es oben. Ähm, OK, also jetzt, was wir tun wollen, ist diesen Text einfügen, um hier zu gehen Control. Sehen Sie, um Pace das unter der gleichen Sache für den Text hier unten zu kopieren Jetzt für das Bild hier, werde ich etwas anderes tun, weil dies jetzt eine Instanz dieser Master-Komponente ist . Ich kann nicht voran gehen und einfach Elemente in hier bringen, aber ich kann definitiv Dinge hier hinzufügen und dann die Dinge verstecken oder ausführen, die ich in jedem Fall anzeigen möchte. Also gehen wir weiter und doppelklicken Sie hier, um unser Vektorsymbol hier zu bekommen. Ich werde nur kopieren. Gehen wir hier rauf zu unserer Master-Komponente und fügen Sie das jetzt ein. Ich gehe nur weiter und stelle sicher, dass ich es mit meinem anderen Symbol hier ausrichte. Da gehen wir. Lass uns den ganzen Weg nach unten gehen und dasselbe mit diesem iPhone hier tun, das er im Kommando war. Siehst du, geh hier rauf und lass uns weitermachen und das in Frieden bringen. Sieht so aus, als hätte ich sie sicherlich in die anderen Vektorrahmen eingefügt, um sicherzustellen, dass Sie Ihre Frames unabhängig voneinander für die iPhones hier haben. Und jetzt, was wir hier tun können. Lass uns das einfach loswerden. Da wir damit fertig sind und so lange zentrieren, denke ich, das ist zentriert. Lassen Sie uns voran und aus der Mitte entlang der Master-Komponente auf dieser Seite gehen, oder Sie können einfach hier rüber und drücken Sie die horizontalen und vertikalen Zentren, und das wird dasselbe tun. Und lassen Sie uns das kopieren. Gehen Sie vor und wählen Sie diese Tutorialseite aus, bevor wir hier eingefügt haben. Gehen wir weiter und ziehen wir das hier raus und ziehen diese Schwellen meiner Gruppe Dinge ein wenig seltsam in meiner Tutorial-Karte. Lassen Sie uns voran und wählen Sie eine territoriale Schritt drei und dann gehen Sie voran und fügen Sie so Jetzt haben wir eine andere. Lassen Sie uns voran gehen und kopieren Sie den Text hier und hören und diesen hier hinein und Sie werden feststellen, dass dieser nicht zentriert ist. Also zuerst gehen wir weiter und löschen Sie diese Gruppe hier und gehen den ganzen Weg bis zu unserer Master-Komponente hier. Was wir tun werden ist, gehen Sie einfach weiter und dehnen Sie den Text den ganzen Weg durch, um unsere Körpertexte anzupassen , und dann gehen Sie weiter und klicken Sie auf die Textzeilenmitte. Also, wenn ich hier runtergehe, sollte das gut aussehen. Was ist mit den Symbolen hier drüben? Nun, hier ist, was wir tun werden. Wir werden hier doppelklicken. Denken Sie daran? Obwohl dies eine Instanz einer Komponente ist, haben Sie immer noch die Kontrolle über einige der Dinge, wie zum Beispiel, was Sie anzeigen und was Sie hier ausblenden . Gehen Sie weiter und wählen Sie diese Gruppe und gehen, wo wir Handtücher haben. Wir haben Waschmaschine und wir haben das Shop-Symbol. Also werde ich weitermachen und das Shop-Symbol und die Waschmaschine verstecken. Also haben wir nur die Handtücher hier, die sauberen Handtücher. Gehen wir hier doppelt schnell rein und machen genau das Gleiche und das hier, aber lassen Sie uns das Handtuch in einem Laden verstecken, und dann haben wir nur die Waschmaschine. Und nicht zuletzt hier oben. Nun, eine Sache, die ich für diese Karte hier erwähnen möchte, weil dies die massive Komponente ist. Wenn ich etwas daran mache, selbst wenn ich diese zusätzlichen Symbole hier verstecke , , wird es tatsächlich weitergehen und es auch von meinen anderen Seiten entfernen. Das ist also nicht das, was wir hier wollen. Regel Wenn Sie Komponenten erstellen, möchten Sie in derRegelIhre Komponenten und einen separaten Ort irgendwo anders platzieren , so dass Sie sie unbearbeitet von einem anderen Ort aus wiederverwenden können. Also, was machen wir voran und ziehen das nach draußen und legen es vorerst hier? Und ich weiß, sieht ein bisschen organisiert aus, und die nächste Lektion werden wir zurückkommen und das vorher aufräumen. Nun gehen wir voran und drücken Sie Befehl, siehe Auswählen. Unsere Pretoria wird hier umrahmen und Kommando V. Und jetzt habe ich eine andere Instanz dieser Master-Komponente. Nun, wenn ich hier reingehe und dann meine Handtücher auf meiner Waschmaschine verstecke, habe ich nur mein Shop-Symbol, das ist genau das, was wir wollen. Warum haben wir das einfach dort gemacht? Ich weiß, wir haben genau das gleiche Ergebnis wie zuvor. Lassen Sie mich nun erklären, was anders ist, wenn Sie hier zu Ihrer Master-Komponente gehen Sie können eine Master-Komponente aus ihren Instanzen identifizieren, indem Sie sich das Symbol hier ansehen . Master Component hat dieses kleine Diamant-Symbol direkt neben dem Namen. Wenn ich hier runtergehe. Da dies eine Instanz dieser Master-Komponente ist, kann ich sehen, dass es das für kleine Diamant-Symbol nicht hat. Es hat nur eine leere. Das sagt mir also, dass dies eine Instanz dieser Master-Komponente ist. Also, wenn ich jetzt hier hoch gehe und doppelklicke in meine Master-Komponenten, bis ich dieses Rechteck hier wähle Nein, sagen wir, ich möchte meine gerundete nous nur als Beispiel hier auf Null ändern. Wenn ich hier runter zu meinem Schritt Nummer eins gehe, sieht er einen Eckenradius von Null. Dasselbe für Schritt Nummer zwei und dasselbe für Schritt Nummer drei. Das ist im Moment ziemlich cool. Wenn ich hierher zurückgehe und den Befehl verwende, klicke auf meinen Hintergrund und gib ihn an Bord eines Radius von 20. Dasselbe wird auf alle anderen Instanzen angewendet. Nehmen wir an, ich habe jetzt beschlossen, meinen ganzen Text hier links auszurichten. Also, wenn ich meinen Text auswähle und eine Zeile hier drin mache, werde ich nur sicherstellen, dass diese die gleiche Größe haben. Okay, das ist gut. Ich wähle sie einfach aus und stelle sicher, dass sie auch im Mittelpunkt stehen. Sieht so aus, als wären sie es. Also, wenn ich hier runtergehe, werden Sie sehen, dass sich mein Text in allen meinen Instanzen geändert hat. Und wie cool ist das? Anstatt an allen meinen Gruppen hier eine Änderung vornehmen zu müssen, mache ich nur eine Änderung an der Master-Komponente dort. Also jetzt werde ich nur voran gehen und beide Text hier auswählen und sie wieder zentrieren. Nun, wenn ich verkleinere, werden Sie sehen, die Änderungen vorgenommen wurden Hier ist gut, so lassen Sie uns gehen und auch diese Gruppe umbenennen, um zu sagen, Tutorial-Karte, nur so dass wir nicht Wir wissen genau, was diese Master-Komponente repräsentiert. Also jetzt, wenn ich hier runter gehe und sagen wir aus irgendeinem Grund in meinem Schritt eins oder meinem Schritt eins Frame hier. Ich möchte dies als eine völlig separate Gruppe verwenden, die keine Beziehung zu diesen Master-Komponenten hat, obwohl wir es von dort bekommen haben. Aber sagen wir, Sie wollen weitermachen und diese Beziehung dort vollständig loswerden. Also alles, was Sie tun müssen, ist einfach zum Eigenschaften-Panel gehen hier und dann, wo es Tutorial-Karte sagt . Gehen Sie weiter und wählen Sie das aus. Und dann und dann können Sie fortfahren und Anfügen Instanz auswählen. Und so ist dies jetzt eine separate Gruppe waren eigentlich sogar ein separater Rahmen. Wenn ich zu meinem Ebenenfenster gehe, das Sie jetzt sehen, hat es nicht das gleiche Symbol, das es zuvor hatte. Also, wenn ich jetzt einfach voran gehe und hier reinspringe und sagen wir einfach, diese herum zu bewegen und sehen wir , um dieses Symbol hier zu führen, wird dies keine Beziehung zur Master-Komponente noch zu einer der anderen Instanzen haben. Also das ist jetzt völlig getrennt, und was auch immer wir tun, wird nur auf dieser Seite auf innerhalb dieses Rahmens entlang bleiben. Also werde ich einfach voran gehen und Befehl Z Haufen Mal zwei gehen zurück, um es als Instanz zu haben , und Sie sehen, jetzt ist es wieder eine Instanz, weil hat eine kleine lila Grenze wie Bella ah , meine Ebenen Panel, es ist s Tutorial-Karte und hat ein kleines Symbol, das wir vorher hatten. Also, jetzt weiß ich, dass dies eine Instanz dieser Komponente ist, also fühlen Sie sich frei, Komponenten zu nutzen, wo immer Sie können. Ah, wann immer Sie sehen, dass Sie mehrere Objekte haben, die verwandt sind oder gleich aussehen, können Sie es wahrscheinlich in eine Master-Komponente einfügen. Und jetzt möchte ich Ihnen eine kleine Übung geben, um tatsächlich voran zu gehen und unsere Tasten in eine separate Komponente zu setzen . Aus dem Grund ist, wie Sie bemerkt haben, Ah, viele der Tasten, die verwendet wurden, haben tatsächlich sehr ähnliches Styling. Und wieder, wenn ich mich entscheide, den Anmelde-Button hier so zu ändern, dass er fett ist, verwenden meine anderen Schaltflächen diese Eigenschaft nicht, weil ich nur meine Protokollierung ändere, sondern hier drin. Aber in der Regel möchten wir, dass unsere Schaltflächen mit nur kleinen Anpassungen gleich oder sehr ähnlich aussehen , wie z. B. eine Hintergrundfarbe der Textfarbe. Also zögern Sie nicht, diese Übung zu machen und eine Master-Komponente aus Ihren Buttons zu erstellen. Vielleicht platzieren Sie sie außerhalb Ihres Designs hier drüben und dann gehen Sie vor und erstellen Sie Instanzen wo immer Sie sehen, wir haben diese Schaltfläche verwendet. Eine Sache, die ich erwähnen möchte, bevor Sie in diese Übung springen, ist, dass, wenn Sie hier eine Master-Komponente erstellen , achten Sie darauf, eine Instanz zu erstellen und sie hier anstelle Ihrer separaten Karten einzufügen achten Sie darauf, eine Instanz zu erstellen und sie hier anstelle Ihrer separaten Karten einzufügen. Denn wieder, dies ist eine Komponente. Dies ist eine Instanz dieser Komponente. Also, welche Änderung Sie hier vornehmen möchten, insbesondere in Bezug auf das, was Sie dieser ganzen Gruppe hinzufügen oder entfernen möchten, möchten Sie dies innerhalb der Master-Komponente tun. Wenn Sie diese Übung nicht machen wollen, Sie sie überspringen und dann einfach in das nächste Video springen, wo wir es tatsächlich zusammen machen und es ein wenig mehr über Komponenten lernen. Weil ihre super leistungsstarke 11. Button: In Ordnung, also lasst uns weitermachen und unsere Knöpfe in Komponenten verwandeln. Also, was wir hier tun werden, ist, was Wir werden eine dieser Schaltflächen verwenden, um Master-Komponente zu erstellen und dann Instanzen davon überall mit der Schaltfläche zu erstellen. Also lassen Sie uns voran und verwenden Sie die Option er oder die alte Taste und ziehen Sie eine Kopie hier nach oben. Lassen Sie uns einfach voran und ziehen Sie es einfach hier und wieder. Wir können Komponenten erstellen, indem wir hier nach oben kommen und klicken. Erstellen Sie Komponenten. Und so ist das jetzt aber in der Komponente, die wir haben. Es nennt sich gerade den Anmelde-Button, denn das ist der Name, den wir vorher hatten. Aber lassen Sie uns voran und nur Er hat das in Knopf geändert. Und jetzt werde ich meinen Hintern und meine Komponente hier auswählen. Verwenden Sie den Befehl. Sehen Sie, ich werde hier den Rahmen einloggen auswählen und ich werde es einfach hier einfügen. Gehen wir weiter und richten Sie das einfach an, wo wir unser Original hatten. Aber hier und dann, gehen wir weiter und finden einfach den Anmelde-Button in unseren Frames und gelöscht, und ich werde einfach voran gehen und bringen das unten nach unten unter meinen Pass, aber rein und was wir hier drin sind . Lassen Sie uns voran und verschieben Sie einfach dieses vergessene Passwort direkt nach dem Passwort und den Nutzungsbedingungen den ganzen Weg nach unten, direkt auf meinem Hintergrund, um nur einige unserer Ebenen hier neu zu organisieren. Du musst das nicht tun, aber ich halte meine Ebenen immer gern hier organisiert. Also, jetzt ist dies eine Instanz dieser Schaltfläche. Was wir hier tun können. Wir können fortfahren und den Optionstaste erneut verwenden, um eine andere Instanz zu erstellen. Und lassen Sie uns den Namen dieses oder den Text für diesen ändern, um sich mit E-Mail zu registrieren , genau wie wir hier unten haben. Gehen wir voran und richten Sie das langsam mit den Pfeiltasten aus, um sicherzustellen, dass wir es richtig haben. Und dann gehen wir weiter. Und ähnlich Elite sind anmelden, aber hier drin und zog nach unten dieses Zeichen nach oben. Aber hier, genau hier, gehen wir weiter und machen das gleiche für diesen letzten Knopf hier. Diesmal werde ich Befehl D benutzen und mich dann anmelden. Es ist eigentlich tun, melden Sie sich mit diesem Google? Nein, ich hatte hier schon mal einen weißen Hintergrund. Also, um meine Farbe zu ändern, kann ich immer noch voran gehen und diese auswählen. Und gerade jetzt hat es Primärfarben ausgewählt. Aber wenn Sie das ändern möchten, können Sie einfach voran gehen und losgelösten Stil machen, mit dem Sie Ihre eigene Farbe wählen können. Und dann, natürlich, muss ich hier runter zu meiner Schriftart oder meinem Text gehen und ihn in schwarz ändern, genau wie wir es vorher hatten. Und dann, natürlich, lasst uns voran gehen und es zu führen, löschen Sie die andere Kopie, die wir direkt darunter hatten, löschen und diese kollabieren dies und bringen sie auf. Bringen Sie es direkt unter die andere. Also macht die Ordnung Sinn und da gehen wir. Also jetzt, wenn ich zu meinem Master gehe Aber in der Komponente hier, wenn ich voran gehe und beschließe, Befehl zu verwenden, beschließe ich, im Text fett zu sein. Sehen Sie, meine anderen Knöpfe haben einen Bulltext. Nun, wenn ich hier reingehe, wenn ich hier wieder reingehe und doppelklicken und meinen Text auswählen und sagen wir, ich wähle die Größe von 16 und gehe zurück. Du siehst, dass meine Größe hier zugenommen hat. Also für den Moment werden wir voran gehen und tatsächlich auf kühne es. Also werden wir voran gehen und tatsächlich unseren Text hier auswählen, um vielleicht einen mittleren, mittleren Furz hier zu machen und dann weiter zu gehen und CR dort drüben zu wechseln. Cool. Also, jetzt hier drüben, sind wir gut. Wir haben unsere Buttons und das sind alles Instanzen. Eine Sache, die ich Ihnen hier zeigen möchte, ist, dass wir hier eine Änderung an unserer Unterzeichnung mit Google vorgenommen haben . Was wir hier eigentlich getan haben, ist, dass wir es die Eigenschaft dieser Hintergrundfarbe hier von den Master-Komponenten überschreiben , die blau ist. Ah, und dann ändern wir es in das Weiße. Nehmen wir an, irgendwann habe ich beschlossen, diesen Knopf wie den Rest aussehen zu lassen. Wenn ich alles ganz ändern möchte,kann ich voran gehen und auswählen,hier zu meinem Panel gehen und dann Überschreibungen von hier zurücksetzen. Wenn ich alles ganz ändern möchte, kann ich voran gehen und auswählen, hier zu meinem Panel gehen Und das wird mir genau geben, wie diese Master-Komponente aussah. Dann kann ich weitermachen und den Text hier ändern. Also lasst uns das hier befehlen. Nehmen wir an, Sie möchten den Phil nur wieder in die ursprüngliche Farbe ändern. Also dann können Sie hier schnell verdoppeln und Ihr Rechteck hier auswählen, Stellen Sie sicher, dass Sie es ausgewählt haben, und ich mache das gleiche. Aber dieses Mal, anstelle der letzten Überschreibungen, können Sie zurücksetzen, Phil. Und so wird das nur bekommen, um zu füllen, dass wir von den Master-Komponenten hatten. Andernfalls können Sie voran gehen und das einfach so lassen. Ah, was sind die überschriebenen Eigenschaften für diese Schaltfläche? 12. Seiten zum Organisieren verwenden: wir tun, um wirklich schnelle Dinge hier, nur um Komponenten einzupacken. Wir werden weitermachen und so hier drüben. Wie Sie sehen können, wird es ein bisschen chaotisch. In der Regel wollen wir unsere Komponenten und Dinge haben. Solch ein Gelehrter Spiele auf einer separaten Seite und unsere Entwürfe so macht nicht irgendwie unseren Arbeitsplatz hier beschäftigt. So Figure können Sie mehrere Seiten innerhalb Ihrer Datei erstellen, aber einfach hier nach oben gehen, wo es Seite eins sagt. Gerade jetzt ist dies derzeit die Seite, auf der wir sind. Es heißt Seite Eins, äh, waken. Gehen Sie weiter und benennen Sie es um. Aber wenn Sie markieren ups und lassen Sie uns voran und erstellen Sie eine andere Seite schnell in das Plus-Symbol hier und tun vielleicht Komponenten und dann gehen Sie weiter und klicken Sie auf Plus und lassen Sie uns einfach eine andere für Stile tun . Also gehen wir weiter in unser Mock up. Lassen Sie uns voran und wählen Sie einfach die Farbschema-Gruppe hier und verwenden Sie Befehl X. Gehen Sie zurück zu Stilen müssen hier eingestellt werden. Cool. Und dann gehen wir zurück, um uns zu markieren. Wählen Sie die beiden Komponenten aus. Sei hier raus. Verwenden Sie Command X erneut, um auszuschneiden, dann gehen Sie hier zu unserer Komponentenseite und fügen Sie sie hier ein. Da gehen wir. Cool. Also, jetzt möchte ich eine andere Sache hier mit den Tastenkomponenten machen. Typischerweise haben Schaltflächen mehrere Zustände, also haben wir, ah, Schaltfläche, die möglicherweise deaktiviert werden kann. Dies kann dem Benutzer sagen, dass er diese Schaltfläche im Moment nicht verwenden kann. Und dann haben wir eine Schaltfläche, in der Regel in einem aktivierten Zustand. Also Schaltfläche wie diese sagt normalerweise dem Benutzer, dass es aktiviert ist. Aber was ist, wenn Sie eine andere Art von Schaltfläche erstellen möchten, die Benutzer auf der Schaltfläche informiert ist deaktiviert? Um das zu tun, werden wir weitermachen und Salt-und Dragon-Instanz von der Komponente hier weg verwenden, und dann werden wir weitermachen und Salt-und Dragon-Instanz von der Komponente hier weg verwenden, und dannwerden wir diese Instanz in eine Komponente selbst verwandeln, indem wir eine Komponente erstellen werden wir diese Instanz in eine Komponente selbst verwandeln, indem wir eine Komponente erstellen und die Schichten hier. Lassen Sie uns voran und benennen Sie diese Schaltfläche in deaktiviert und die andere auf aktiviert um. Stellen Sie also sicher, dass Sie dieser Konvention hier folgen, aber im Schrägstrich aktiviert und dann der Button Vorwärtssash für den unteren hier deaktiviert ist . Also lassen Sie uns voran und wählen Sie diese deaktiviert. Aber hier drin, lasst uns voran gehen und zuerst den Stil hier lösen, und dann die Füllung der Schaltfläche ändern, um vielleicht nett zu sein? Ähm, irgendwie grau hier würde funktionieren. Lass uns diese Farbe hier machen, eine Neun , eine Neun, eine Neun, eine Neun und eine letzte Sache, die ich hier schnell machen werde. Ich werde den Text hier ändern. Und wie Sie jetzt sehen können, ist es auch in der anderen Schaltfläche geändert. Auf Der Grund dafür ist, dass wir die Instanz und Instanz dieser Schaltfläche in eine Komponente umgewandelt haben. Es hängt also immer noch mit dieser Schaltfläche und den Änderungen zusammen, die wir daran vornehmen. Also wieder machen Sie sie, dieser ist Button Schrägstrich Vorwärtsschrägstrich auf der anderen deaktiviert. Aber in Schrägstrich aktiviert, werde ich es Ihnen in einer Sekunde zeigen. Warum, das ist wichtig. Also, wenn du jetzt auf die zweijährige Michael Page hier zurückgehst, sieht das viel sauberer aus. By the way, Jetzt sehen Sie meinen Text hier hat sich wieder auf Schaltfläche geändert. Wir müssen das wieder in Gesetz ändern. Das liegt daran, dass wir den Text nicht wieder überschrieben haben. Wir haben nur benutzt, was auch immer die Komponente hatte. Also, als wir es geändert haben, aber es änderte sich. Der Text hier ist gut, aber der andere blieb gleich, weil wir diese Überschreibung für den Text hier gemacht haben. nun Wenn ichnuneine Schaltfläche auswähle und hier zum Instanzfenster gehe, könnte ich tatsächlich voran gehen und deaktiviert oder aktiviert auswählen. Wie cool ist das? Wir haben vergessen, eine letzte Sache hier zu tun, und das hat mit der Tutorial-Karte zu tun. Ah, und das ist auch, um ihm den gleichen Knopf zuzuweisen. Also gehen wir zurück zu Komponenten und dass Lassen Sie uns gehen und kopieren Sie diese Komponente und dann gehen Sie vor innerhalb eines Tutorial-Karte einfügen. Und jetzt haben wir eine Instanz dieses Buttons. Also gehen wir einfach voran und überschreiben sie mit hier 2 bis 53 Pixel als auch. Und gehen Sie weiter und legen Sie das auf die andere. Und lassen Sie uns voran und löschen Sie die nächste Schaltfläche von unserer Komponente hier. Und bevor wir vorwärts gehen, lassen Sie uns als nächstes hier tun, nur weil die meisten meiner Komponenten eine nächste Schaltfläche verwenden. Bis auf die allerletzte Seite des Tutorials, werden wir das einfach ändern. Lassen Sie uns das tun, indem Sie zurück zu Mock Ups gehen und dann, wenn ich auf die letzte Seite scrollen. Ich kann diesen Schaltflächen-Text überschreiben, indem ich in ihn klicke und dann fertig eintippe. Also, jetzt sehen Sie, wir haben genau das, was wir wollen. , Ich weiß,dass wir heute viel gelernt haben, aber das sind alles sehr wichtige Konzepte und Begriffe. Sehr, sehr leistungsfähige und nützliche Werkzeuge. Und ich möchte wirklich, dass Sie ein Verständnis bekommen und es wirklich in Ihren eigenen Projekten nutzen . Ich denke, wir sind bereit, auf unsere Zahlungsseite weiterzugehen, also tun wir das in der nächsten Lektion. 13. Verwendung von Varianten zum Erstellen von Komponentengruppen: Also, bevor wir in unsere Zahlung PJ springen, möchte ich Ihnen zwei schnelle Dinge zeigen, die Fema kürzlich aktualisiert hat, aber sie sind super nützlich. Das erste, was heißt Swapping Instanzen. Wenn ich also voran gehe und eines der Vorfälle des Login-Buttons auswähle, die wir hier haben, zum Beispiel auf der rechten Seite. Jetzt können Sie sehen, dass es einen neuen Weg gibt, wie Sie die gewünschte Instanz ändern oder austauschen können. Also kann ich es mit einer deaktivierten Version von Ich will austauschen, oder ich kann voran gehen und es zurück in die Nachbarschaft eins tauschen. Und wenn ich mehrere Schaltflächen oder mehrere Komponenten habe, kann ich sie hier leicht finden und sogar eine Suchleiste hier drüben verwenden. Jetzt wird dies natürlich viel nützlicher sein, wenn Sie mehrere Variationen von verschiedenen Schaltflächen oder mehreren Schaltflächen oder mehreren Komponenten haben verschiedenen Schaltflächen oder mehreren Schaltflächen , die Sie möglicherweise Breite austauschen möchten. Denn im Moment haben wir nur gekoppelte Komponenten. Vielleicht nicht so nützlich, aber es wird definitiv nützlicher, wenn Sie beginnen, mehr Komponenten hinzuzufügen, mehr verschiedene Variationen der Schaltflächen und so weiter. Die andere wirklich coole Sache, die ich Ihnen zeigen möchte, dass Feige kürzlich angekündigt hat, dass es Varianz heißt. Also werde ich hier wirklich schnell durch Dickenartikel gehen, was Varianz tut. Und dann werden wir es auf unsere eigenen Komponenten und unsere eigenen Entwürfe anwenden . Daher ist die Varianz eine gute Möglichkeit, mehrere Versionen derselben Komponente erstellen zu können, wie das Beispiel hier, das sie im Bild haben. Sie können tatsächlich den Kopf gehen und verschiedene Versionen der Schaltflächen erstellen und in der Lage sein, sie tatsächlich zu wechseln oder sie in Ihren Instanzen sehr schnell und schnell anzupassen. Und ich zeige Ihnen in nur einer Sekunde ein Beispiel dafür. Und so wie Sie hier in diesem Bild sehen können, haben sie mehrere Versionen derselben Schaltflächen erstellt. Einige von ihnen mit ICANN, Einige von ihnen ohne. Sie haben sekundäre Versionen mit verschiedenen Farben, verschiedenen Größen wie oder sie haben alle diese verschiedenen Eigenschaften verwendet, die Sie auch auf der rechten Seite sehen können hier drüben, um verschiedene Versionen ihrer Schaltflächen erstellen zu können. Aber das wird viel mehr Sinn machen, wenn wir es tatsächlich auf unser eigenes Projekt anwenden. Also warum wechseln wir nicht zu FISMA und gehen zu unserem Komponenten-Reiter hier drüben. Ordnung, hier in unserem Komponenten-Reiter hier drüben mit der Seite sehen wir zwei verschiedene Versionen der Schaltflächen, die wir erstellt haben. Einer von ihnen genannt Schaltfläche und solche aktiviert und dann die andere, Schaltfläche Schrägstrich deaktiviert. Und das ist, um leicht in der Lage zu sein, zu identifizieren, welchen Zustand der Schaltfläche wir wollen. Also verwenden wir schon irgendwie die gleiche Idee wie die Variantengruppe. Aber der einzige Unterschied oder der Vorteil der Verwendung von Varianz ist, dass es viel einfacher ist, auf der Instanzseite zu verwenden. Und auch wenn Sie Entwickler haben, die mit Ihnen arbeiten oder Ihre Entwürfe verwenden, wird es in der Lage sein, dies besser zu nutzen. Und so zeige ich Ihnen das in einer Sekunde. Um also eine Variante zu erstellen, müssen Sie zuerst Komponenten, die wir hier bereits haben. Also lassen Sie uns voran und wählen Sie beide sind hier. Und jetzt sehen Sie diese neue Option namens Kombinervarianten auf der Seite hier drüben. Also werden wir voran gehen und darauf klicken. Und wir alle bemerken, dass hier höchstens unsere beiden Tastenkomponenten zufrieden sind, die wir innerhalb dieser Tastenvariante hatten. Und Sie können den Namen hier sehen, weil wir diese Namenskonvention verwendet haben, FISMA war schlau genug, um tatsächlich den Kopf zu gehen und diese in Eigenschaften dieser Schaltfläche zu verwandeln. Also haben wir Eigentum eins. Da also kein Name an diese Eigenschaft angehängt ist, wurde Ruhm nur ein generischer Name, eine Eigenschaft hier drüben verwendet . Und dann gehen Sie weiter und verwenden Sie die deaktivierte und aktivierte Version. Wenn ich also auf dieses klicke, sehen Sie, dass Eigenschaft eins auf aktiviert eingestellt ist. Und für diese eine Eigenschaft ist eine deaktiviert. Als erstes möchte ich hier die gesamte Variantengruppe auswählen. Und wir gehen weiter und klicken Sie einfach auf Eigenschaft eins um voranzugehen und den Namen zu ändern, um vielleicht Staat. Das ist also nur etwas, das mehr Sinn macht. Jetzt haben wir eine Eigenschaft namens Status, die deaktiviert oder aktiviert werden kann. Jetzt können wir natürlich weitermachen und tatsächlich mehr Zustände schaffen, wenn Sie wollen. Um das zu tun, können wir weitermachen und mehr Optionen tun und dann weitermachen und eine neue Variante hinzufügen. Dies wird also voran gehen und eine andere Variante erstellen und weitergehen und Zustand drei verwenden, aber wir können voran gehen und es benennen, was wir wollen. Also in unserem Fall, warum gehen wir nicht voran und tun gedrückt. Und wir können es sogar nach oben bringen, wenn du willst, und das hier nach unten schieben. Jetzt haben wir einen aktivierten Zustand, unterdrückten Zustand und eine deaktivierte Zustandstaste. Und wir wollen weitermachen und hier etwas anderes für unser Prestige schaffen . Und warum gehen wir nicht weiter und gehen zu der Auswahlfarbe hier, lösen den Stil ab und gehen vielleicht mit einem Knopf, der etwas dunkler ist. Dies ist nur so, dass, wenn der Benutzer auf diese Schaltfläche tippt, es in diesen Druckzustand verwandelt. Nehmen wir also an, wir wollen eine andere Eigenschaft und wir werden tatsächlich voran gehen und eine kleine Version unseres Buttons erstellen. Also lassen Sie uns voran und klicken Sie auf die Schaltfläche, variierende Gruppe hier wieder. Gehen Sie zu mehr Optionen, und gehen Sie vor und klicken Sie auf Hinzufügen neuer Eigenschaft als eine rechts unter Zustand. Jetzt haben wir eine neue Eigenschaft. Es wird uns darum bitten, ihm einen Namen zu geben. Also in unserem Fall gehen wir voran und machen Größe. Der Standardwert für eine neue Eigenschaftenwand ist der Standardwert. Also werden wir voran gehen und das tatsächlich in nur einer Sekunde zu klein und groß ändern. Und tun Sie dies der einfachste Weg ist, gehen Sie voran und wählen Sie einfach diese drei Tasten, während Sie die Umschalttaste gedrückt halten. Und wir werden die Größeneigentum hier finden. Gehen Sie weiter und klicken Sie auf diesen kleinen Fehler hier, und gehen Sie Hinzufügen Neu. Und ich werde, lasst uns weitermachen und diesen neuen Wert zu groß umbenennen. Nun, wenn wir eine kleine Version aller dieser Schaltflächen erstellen möchten, lassen Sie uns voran und verwenden Sie einfach Befehl D, um diese Schaltflächen zu duplizieren. Und lassen Sie uns voran und ziehen Sie einfach die Größe oder die Breite hier rüber, lassen Sie uns 150 machen. Das ist perfekt. Und jetzt hast du erraten, dass wir hier rüber auf die Größe gehen. Gehen Sie voran, klicken Sie auf den Pfeil und fügen Sie neue und kreative Wert von kleinen. So jetzt, wie Sie sehen können, haben wir sechs verschiedene Arten von Tasten. Wir haben eine große Schaltfläche, die einen aktivierten Zustand hat, eine große Schaltfläche, die einen gedrückten Zustand hat, und eine große Schaltfläche, die einen deaktivierten Zustand hat. Und ähnlich haben wir eine kleine Schaltfläche, die einen aktivierten Zustand hat. Bei deaktivierten kleinen Knopf und unterdrücken kleine Taste. Also, jetzt fragen Sie sich wahrscheinlich, wie ist das nützlich? Nun, um zu demonstrieren, wie Worte, lasst uns wieder auf unsere Mockup-Seite wechseln, wo wir hier rüber zu unserer Login-Seite gehen können oder nicht wieder hier sind. Mal sehen. Ich möchte diese Tasteninstanz hier in eine kleine gedrückte Taste ändern, damit ich voran gehen und sie auswählen kann. Und jetzt auf der rechten Seite sehen Sie hier drüben unsere Tastenvariante. Und jetzt haben wir verschiedene Eigenschaften, die wir ändern können. Wir können den Zustand ändern, sagen wir „gedrückt“. Wir können voran gehen und die Größe in, sagen wir, eine kleine ändern . Und so ändert fema das automatisch auf die Art der Taste, die wir wollen. Nehmen wir an, Sie ändern Ihre Meinung und Sie wollen das. Aber in groß zu sein. Und zeig die Prostata. Da hast du es. Sie müssen nur eine Eigenschaft ändern und Sie haben die Schaltfläche, die Sie wollen. Und Sie können mit Varianten viel mehr tun, wie zum Beispiel das Hinzufügen von Symbolen zu Ihren Schaltflächen und das als Status verwenden. So zum Beispiel, sie haben Icon, falsch und wahr hier, ich hoffe, jetzt können Sie sehen, wie Lager wirklich helfen können, verschiedene Versionen Ihrer Komponenten zu erstellen und wie nützlich es sein kann. Nur um Ihnen einige schnelle letzte Tipps zu Varianten zu zeigen, können Sie tatsächlich voran und klicken Sie auf die Variante hier und ändern Sie die Größe des Fensters, wie Sie möchten. Und Sie können sogar Ihre Tasten oder Komponenten an verschiedene Stellen verschieben. Und so könnte es für Sie oder Ihr Team einfacher sein. So können Sie Ihre Varianten in einer Weise organisieren, die für Sie und vielleicht für Ihr Design- oder Entwicklungsteam sinnvoll ist. Ich schlug vor, Ihnen eine Übung zu geben und Sie mit der Varianz vertraut zu machen. Ich möchte, dass Sie tatsächlich voran gehen und eine Version dieser Varianten mit einem Bild erstellen . Und dann gehen Sie vor und richten Sie den Text oder die Schaltfläche Text, die wir auf der linken Seite der Schaltfläche haben , um voran zu gehen und zu tun, dass für beide sind große und kleine Variation der Schaltflächen. Und dann machen wir das zusammen in der nächsten Lektion. 14. Varianten Übung: Lassen Sie uns also voran und erstellen Sie eine Variation dieser Schaltflächen mit Symbolbildern in ihnen als auch. Also zuerst werde ich voran gehen und meinen Icons-Ordner hier drüben aus den Ressourcen für dieses Markup öffnen . Ich gehe nur zu Als Beispiel, gehen Sie voran und öffnen Sie die Symbole und gehen Sie in den Login. Und nur als Test, lassen Sie uns voran und ziehen Sie dies auf Hüllkurve Punkt SVG hier rüber in R Sigma. Gehen wir weiter und entlang dieser Seite. Auf dieser Seite hier drüben, eingeschränkte Proportionen und ändern Sie sie auf 25 Pixel. Und lassen Sie uns den Rahmen einfach hier rüber ziehen und haben ihn einfach für uns da drüben. Nun gehen wir weiter und ersten Schritt, wählen Sie alles, was wir haben hier drüben. Denn was wir tun wollen, ist, dass wir eine Version unserer Varianz hinzufügen wollen, die all diese verschiedenen Zustandsgrößen enthält. Und dann jetzt, und jetzt auch eine Variante hinzufügen, die ein Symbol hat. Also zuerst, was wir tun wollen, ist gehen Sie voran und klicken Sie auf die Schaltflächen. Variation geht hier zur Seite, und lassen Sie uns voran und fügen Sie neue Eigenschaft hinzu. Wir werden das mit einer Ikone wie dieser nennen. Sigma lässt uns also auch hier binäre Werte in privaten Eigenschaften verwenden. Also hier drüben können wir zwei Werte haben. Eins mit Symbol, also ein wahrer Wert Und dann ein falscher ohne Symbol. Um dies zu tun, lassen Sie uns voran und ändern Sie diesen Standard getragen durch Doppelklick in hier auf true. Also, jetzt haben wir einen Breiten-Symbol wahren Wert hier drüben. Also, was wir jetzt tun wollen, ist gehen Sie voran und wählen Sie alle diese Tasten hier wieder, und dann gehen Sie weiter und duplizieren ist, indem Sie Alt halten. Stellen Sie sicher, dass Sie während der Duplizierung nicht außerhalb der lila gestrichelten Linie gehen , weil es dann kein sehr int mehr wäre. In Ordnung, also werde ich einfach weitermachen und meine Variantenseite hier drüben vergrößern , nur damit sie ein bisschen besser und organisierter aussieht. Und dann wollen wir diese sechs Schaltflächen verwenden und ein Symbol hinzufügen und dann weiter gehen und den Text nach links verschieben. Also hier werden wir einfach voran gehen und unseren Text hier auswählen. Denken Sie nun daran, dies schneller zu machen, Sie können immer Befehl und Verschiebung zusammen halten. So können Sie mehrere Ebenen innerhalb von anderen Komponenten oder anderen Gruppen auswählen , um die Dinge für uns viel schneller zu machen. Dann gehen Sie voran und verwenden Sie Text nach links ausrichten. So einfach wie das. Und jetzt gehen wir weiter und bringen unseren Umschlag hierher. Und dann gehen wir weiter und ändern die Auswahlfarbe hier drüben in Weiß. Jetzt gehe ich einfach weiter und dupliziere das oder halte Alt gedrückt und ziehe es einfach in jede Komponente. Und geh weiter und bring es zu unseren kleinen Icons hier drüben. Dabei stellen Sie sicher, dass alles ausgerichtet ist. Da gehen wir hin. Ok, genial. Also, jetzt, was wir tun wollen, ist, gehen Sie voran und wählen Sie die unteren sechs hier drüben, die Symbole haben, und stellen Sie sicher, dass das wahr ist, was es ist. Und dann werden wir voran gehen und diejenigen auswählen, die keine Symbole hier oben haben, das 64 Breiten-Symbol statt wahr, lassen Sie uns voran und fügen Sie neue hinzu und tun falsch. Also jetzt hier zurück, können wir voran gehen und tatsächlich den Zustand ändern deaktiviert, gedrückt oder aktiviert. Wir haben die Größe, die wir zu klein, groß ändern können. Und jetzt für alle von ihnen haben wir auch eine Option namens Breitensymbol. So können wir voran gehen und es mit ICANN hinzufügen und der schöne Teil darüber mit echten und falschen Werten in den Eigenschaften der Varianz ist, dass Sie diesen netten kleinen Kippschalter hier drüben bekommen , der die Dinge nur ein bisschen sauberer macht. So kann ich jetzt völlig eine Option mit Icon haben. Gehen Sie voran und wählen Sie ein kleines Symbol oder eine kleine Schaltfläche, und verwenden Sie dann einen gedrückten Zustand, wenn ich möchte. Nun, als ich diese schreibe, bemerkte ich, dass ich hier ein bisschen ein Alignment-Problem habe. Achten Sie also darauf, Ihre Symbole und Ihre Schaltflächen immer ausgerichtet zu halten , damit sie zwischen den Variationen nicht seltsam aussehen. Also ja, das ist Abwechslung für dich. Verwenden Sie es definitiv in Ihren Projekten. Jetzt für den Rest dieses Kurses werde ich Komponenten ohne Varianz verwenden, aber auf jeden Fall fühlen Sie sich frei, Varianten zu verwenden, wie wir weitergehen, wo immer Sie können. 15. Die Zahlungsseite: Alles klar. Ich denke, wir sind bereit, auf unsere dritte Seite zu springen, die Zahlungsseite. Aber bevor wir das machen, werfen wir einen weiteren kurzen Blick auf unsere Skizze hier. Das ist also die Zahlungsseite. Es ist ziemlich einfach. Hat nur einen Titel hier, Ähm, und dann haben wir die Kreditkarte, wo der Benutzer seine Kreditkartennummer und alle anderen Informationen hier eingeben kann , und dann können sie die Karte von hier hinzufügen und dann zur nächsten Seite gehen. Ähm, es sieht ziemlich einfach aus. Ich weiß nicht, wie es Ihnen geht, aber manchmal, wenn ich versuche, ein neues Projekt oder eine neue Seite zu entwerfen, ist es ein bisschen schwer, genau zu wissen, was wir dort anbringen wollen, oder sogar Inspiration für ein Projekt und unsere eigenen Designs zu bekommen . Natürlich können wir ähnliche APs verwenden, die mit diesen APS entworfen und herumgespielt wurden, aber das könnte wirklich mühsam sein. Ist das so? Deshalb werde ich dir diese coole Website hier zeigen, die Muster genannt wird. Beginnen Sie Kopf auf über P double T R N s dot com, um darauf zuzugreifen, und es ist super cool. Im Wesentlichen ist es nur, ähm, irgendwie wie Pinterest, aber für App-Design. So zeigt es Ihnen eine Menge interessanter Inspirationen, die Sie von einigen der heißen Wasserhähne auf dem Markt nehmen können . Sie haben sogar Kategorien. Hier finden Sie basierend auf der Seite, die Sie entwerfen. Sie können hier reingehen und sich inspirieren lassen. Lassen Sie uns voran und wählen Sie diesen Kauf tippen Sie hier, um einige Inspiration von verschiedenen APS und verschiedenen Unternehmen zu sehen . Ähm, zum Beispiel gibt es hier Ubers Zahlungsseite. Wir haben hier bereits ein Design im Sinn, was meine eigene Skizze betrifft, aber lassen Sie uns voran gehen und sehen, was wir brauchen. Also brauchen wir eine Kartennummer. Wir benötigen ein Ablaufdatum, CVV-Land und PLZ. Also denke ich, im Allgemeinen sind diese ersten 3 Felder erforderlich und die anderen sind irgendwie optional. Aber natürlich, wenn der Kunde will, dass wir beginnen, auf jeden Fall setzen Sie die in unserem Design auch in der Zukunft. Aber im Moment konzentrieren wir uns darauf, nur diese drei Pflichtfelder zu setzen. Also gehen wir zurück hier zu meiner Zahlungsseite hier und Fig MMA. Ich benutze den Textschlüssel Ah, und mach einfach ein paar Notizen hier. Also Zahlungsanforderungen. Gehen wir weiter und benutzen die linke Linie und bewegen das hier. Also brauchen wir hier die Kreditkartennummer. Wir brauchen den CVV und dann das Ablaufdatum. Es gibt eine gute Möglichkeit, Notizen zu machen und daran zu denken, Dinge zu Ihrer Seite hinzuzufügen. Also lassen Sie uns voran und wählen Sie unseren Rahmen hier und dann zuerst wollen wir Texan hier, also lasst uns Text machen und dann bei Zahlung tun. Lassen Sie uns voran und wählen Sie Schriftgröße von 26 und dann gehen Sie einfach weiter und bewegen Sie das hier nach oben. Willst du 50 machen? Ich denke, das sieht vorerst gut aus. Lassen Sie uns einfach hier hineinzoomen und ein Rechteck für eine Kreditkarte erstellen, und ich denke, das ist gut hier. Ich möchte den Abstand von 40 von jeder Seite beibehalten. Oder lasst uns tatsächlich 43. Verbringen Sie das auch hier . Vielleicht 1 85 Lasst uns voran gehen und einen netten Grady in Phil setzen, damit wir den Hintergrund hier linearen , und ich werde voran gehen und das hier ein bisschen heraufbringen. zuerst Lassen Sie unszuerstlokale Farben wählen, also sind das die Farben, die in unserem Projekt hier verwendet wurden. Um, machen wir das für die Spitze und dann das Gleiche für den Boden. Aber wir werden etwas dunkler machen. Vielleicht, und dann werden wir tun wird seinen Start von Jahr zu haben. Vielleicht hier. Gehen wir weiter und schließen das hier oben. Und gehen wir voran und um die Grenzen zu vielleicht 18 hier. Das sieht gut aus, wenn wir voran gehen und ihr diesen Text hierher geschickt haben. Sieht gut aus. Erstellen Sie einen weiteren Text. Lassen Sie uns einfach voran und machen Sie einen durch 345 Space 5678 Space 901 zu Space 3456 Ich wiederhole nur einige Zahlen hier. Ich werde hier ein paar doppelte Leerzeichen hinzufügen, anstatt nur ein Leerzeichen, nur in irgendeinem Abstand zwischen diesen alle vier Ziffern. Lassen Sie uns voran und wählen Sie das gesamte Textfeld aus und ändern Sie die gefüllte in weiß. Und dann lasst es uns hierher bringen. Lassen Sie uns voran und machen Sie es fett und ändern Sie die Schriftgröße auf 16. Tun Sie. Ein Abstand von 30 wäre gut. Versuchen wir 18 für die Schriftgröße. Das ist noch besser. Bewegen Sie es ein bisschen nach oben. Lassen Sie uns tatsächlich hier rüber gehen, um den Buchstabenabstand und fügen Sie alarmiert hinzu. Abstand ab. Machen wir 2%. Das sieht gut aus, aber genauso wie ein wenig Abstand zwischen jeder meiner Ziffern. Hier, ich werde Befehl D verwenden, um das hier zu duplizieren und was wollen wir dann als nächstes? Wir wollen das Verfallsdatum. Also machen wir Monat, Monat , Jahr, Jahr, Jahr, genau wie ein Platzhalter hier, der das hier unten bewegt. Und dann lassen Sie uns einfach weitergehen und duplizieren. Es ist hier und tun cvv. Lass es uns den ganzen Weg nach rechts bewegen. Ich denke, das fängt an, zusammen zu kommen, nur um es ein bisschen herum zu bewegen. Bewegen Sie die etwas nach oben. Ich finde, das sieht gut aus. Ich habe das Gefühl, Blau würde besser aussehen für die Großen hier drin. Also, was machen wir voran und ändern tatsächlich unsere Farben? Von der Orange zu Blau? Ich erinnere mich, dass du das immer mit deinem Design machen kannst. Es gibt wirklich kein Richtiges oder Falsches hier. Es ist nur wirklich eine Frage dessen, was für Sie besser aussieht, um mit verschiedenen Optionen zu experimentieren . Du musst nicht bei denen bleiben, mit denen wir hier arbeiten. Wenn Sie mit allen Mitteln eine andere Art von Seite verwenden möchten, gehen Sie voran und tun Sie das jetzt. Lassen Sie uns voran und wählen Sie einfach alles hier aus und verwenden Sie den Befehl G, um sie zu gruppieren. Benennen Sie dies in Kreditkarte um und gehen Sie weiter zum Effektfeld hier und fügen Sie Effekte hinzu. Fügen Sie in der Wirkung von Schlagschatten auf für diese eine möchte ich vielleicht ein warum fünf tun. Das muss ich tun. sie weggejagt. 10. Versuchen Sie es 12. Eine Stadt von 20% zu machen, die nicht allzu sichtbar ist. Lasst uns weitermachen und einen weiteren Schatten hinzufügen. Machen wir eine Unschärfe von 20 Jahren auf einem Y von acht. Dann ändern Sie die alte Pay-Stadt auf vielleicht 15% oder tatsächlich 5%. Hier. Versuchen wir es 8%. Ich finde, das sieht gut aus. Also vermissen wir dich nur. Aber hier drin, So wie Sie sich erinnern, haben wir unsere Buttons als Komponente erstellt. Aber wir haben es auf einer anderen Seite hier auf der Komponentenseite platziert. Sie müssen nicht wirklich dorthin gehen, um darauf zuzugreifen. Wenn Sie hier oben zu den Assets gehen, werden Sie alle Ihre Komponenten hier sehen, und ich habe meine Schaltflächen. Hat sowohl die deaktivierte als auch die aktivierte Version niedrig , also will ich nur die aktivierte hier für jetzt benutzen, und es taucht einfach schön hier ein, um sicherzustellen, dass es eine Linie in der Mitte ist. Lassen Sie uns voran und stellen Sie auch sicher, dass alles andere in diesem Zentrist gut ausgerichtet ist und wie es aussieht. ISS. Lassen Sie uns dies ändern, aber im Text, um Karte hinzuzufügen. Und lasst uns dies einfach in die Zahlung ändern, um es ein bisschen einfacher zu machen. Und dann, natürlich, gehen wir voran und zentrieren Sie es. Ich finde, das sieht ziemlich gut aus. Also da haben wir es. Das ist unsere Zahlungsseite. Wir können auf jeden Fall zurückkommen, Führer und dann die Dinge hier oben polieren. Sobald wir mit allem anderen fertig sind. 16. Einschränkungen: In Ordnung. In der letzten Lektion haben wir unsere Zahlungsseite zusammengestellt, und jetzt werden wir in dieser Lektion lernen, welche Einschränkungen es gibt. Also im Wesentlichen, bis jetzt, haben wir unsere Designs hier gemacht, vorausgesetzt, dass sie immer auf einem iPhone 11 Größe laufen werden. Wir haben hier nur eine Größe für unsere Rahmen verwendet. Mit anderen Worten, wir haben unsere Ebenen und Objekte hier platziert, vorausgesetzt, dass sie nur auf einem iPhone 11 Display ausgeführt werden. Nehmen wir an, der Kunde entscheidet sich irgendwann, seine Entwürfe auf einem iPhone 11 pro Max hier zu entwerfen oder zu sehen . Ähm, und wie Sie sehen können, wird nicht viel passieren. Der Rahmen wird sich nur erweitern, aber unsere Designs bleiben die gleiche Größe und wieder. Das liegt daran, dass wir es in Bezug auf nur ein iPhone 11 pro Größe hier entworfen haben. Aber das ist, wo Einschränkungen kommen. Einschränkungen ermöglichen es uns, ihre Designs reagieren zu lassen, so dass sie unabhängig von welchem Rahmen oder in welcher Umgebung funktionieren , um hier Einschränkungen hinzuzufügen. Zuerst gehen wir weiter und machen das einfach rückgängig. Also haben wir unsere Originalgröße hier, ähm, und wir konzentrieren uns zuerst auf unsere Lasche und Seite, also werde ich einfach Ah vergrößern, Zet und Schule hier benutzen. Lassen Sie uns also voran gehen und konzentrieren Sie sich auf das Hinzufügen von Einschränkungen zu dieser Seite auf. Und dann gehen wir weiter und fügten auch überall sonst hinzu. Aber lasst uns zuerst verstehen, welche Einschränkungen sind. also ein beliebiges Objekt ausgewählt haben, können Sie auf Einschränkungen zugreifen, indem Sie hier auf das Eigenschaftenfenster gehen und dann Abhängigkeiten suchen. Sie können jetzt standardmäßig sehen, ich habe eine Einschränkung von oben und links, und Sie können sehen, dass es oben links ist, weil diese beiden Marker hier auf der Einschränkung blau sind und die anderen nur schwarz sind. Dieses Feld wird also nach links und oben beschränkt, was standardmäßig mit jedem Objekt passiert. Aber in der Tat, was wir tun wollen, ist voran zu gehen und es hier nach links und rechts zu beschränken, so dass, wenn der Rahmen größer oder kleiner wird, das Feld darauf reagiert. Also jetzt, wenn ich meinen Rahmen kleiner mache , das Feld nicht darauf reagieren. Also, um es reagieren und richtig Größe, abhängig von der Bildschirmgröße hier, lassen Sie uns voran und lassen Sie es auswählen und dann hier rüber gehen. Lassen Sie uns die oberste Einschränkung entfernen. Also lassen Sie uns die oberste Einschränkung entfernen, indem Sie hier gehen und nur Zentrum tun, weil wir dieses Element in der Mitte unserer Seite behalten und nicht unbedingt von oben eingeschränkt möchten . Und dann gehen wir weiter und machen auch links und rechts hier. Also, um diese Untätigkeit nicht wirklich zu sehen. Ich werde die Größe meines Rahmens und ihn kleiner machen. Jetzt werden Sie feststellen, mein Feld ist tatsächlich wieder Größe hier, außer es gibt ein wenig etwas seltsames los mit diesem Symbol hier drüben. Lassen Sie uns also voran und fügen Sie diesem Symbol auch eine Einschränkung hinzu. Ah, die Elemente einer Gruppe selbst haben bestimmte Einschränkungen, die Sie auch ändern können . Also, wenn ich hier doppelklicke, um mein Symbol auszuwählen, und Sie werden feststellen, dass es eine linke und rechte Einschränkung hat . Aber für das Symbol selbst wollen wir nur eine Linksbeschränkung tun, weil wir es nur auf die linke Seite dieses Feldes beschränken und nicht auf die rechte Seite. Wenn ich nun die Größe meines Rahmens ändere, sehen Sie, dass er so funktioniert, wie er sollte, also lassen Sie uns voran gehen und diese Einschränkungen auf einige der Elemente auf dieser Seite anwenden , und wir werden es dann auch auf andere Seiten anwenden. , wieder Lassen Sie unswiederunseren Weg von oben nach unten arbeiten. Also lasst uns diesen Knopf hier machen. Wir wollen hier eine obere und eine rechte Einschränkung machen, weil wir das wollen, aber in auf die rechte Seite und nicht die linke beschränkt werden. Unser Logo hier sollte einfach in der Mitte bleiben, und lassen Sie uns wahrscheinlich auch dieses Zentrum machen. Gehen wir zur Passwortgruppe und machen es oft Rechte und Zentrum. Und dann wieder, springen Sie hier und machen Sie diese Änderung, um nur für unser Symbol hier übrig zu bleiben. Passwort vergessen sollte auf die Rechte und die Mitte beschränkt sein. Der Anmelde-Button sollte eine Einschränkung von links und rechts haben und wieder zentriert in Bezug auf die vertikale Abhängigkeit. Lassen Sie uns voran und wählen Sie einfach Multi-Select-indem Sie Shift verwenden. , All diese Komponenten hier halten diese Objekte,weil sie die gleichen Einschränkungen haben würden, die es tun würden, links und rechts, und dann werden wir in der Mitte. Mit Ausnahme dieser Bedingungen. Hier wollen wir voran gehen und klicken Sie auf diese und machen eine untere Einschränkung, weil wir tatsächlich an der Unterseite bleiben wollten . Ich glaube, wir haben eine Sache vergessen. Lassen Sie uns unser Ebenenfenster hier öffnen. Wenn Sie sich erinnern, haben wir unsere Hintergrundebene gesperrt. Eso Wir können es erst bearbeiten, wenn wir in unsere Ebenen gehen und es dann entsperren. Und für meinen Hintergrund hier, stellen Sie sicher, dass Sie es ausgewählt haben. Wir wollen es Einschränkung von links und rechts und oben und unten tun. Auf diese Weise füllt es die Lochgröße des Bildschirms. Also werde ich es wieder sperren, Hand gehen und meinen Rahmen zusammenbrechen. Also, wenn der Kunde, sagen wir, beschließt, mit dem iPhone 11 pro Max für seine Designs hier zu gehen, können sie das tun. Und Boom. Wie Sie sehen können, ist der Rahmen vollständig reaktionsschnell, und er wurde für diese iPhone-Größe angepasst. Und dann, wenn ich vorangehe und den Rahmen ändere, sagen wir zwei auf dem iPad. Mini sogar und sehen, es funktioniert, obwohl Sie wahrscheinlich möchten, um einige Verbesserungen zu machen. Also einfach neu Größe dieser Felder und Tasten, weil das viel zu groß für eine IPAD-App ist. Aber hier entwerfen wir nur für Mobil. Also lassen Sie uns voran und drücken Sie einfach Befehl Z auf. Dann gehen Sie weiter und wählen Sie den Rahmen und stellen Sie sicher, dass wir iPhone 11 pro hier wählen. Ich habe hier 11 Pro gewonnen, und ich werde das hier zurücklegen. Das sieht gut aus. Cool. Als Übung möchte ich,dass Sie diese Einschränkungen auf die anderen Seiten anwenden, die wir hier haben. Als Übung möchte ich, Gehen Sie also voran, und wenden Sie diese Einschränkungen als Experiment auf die Tutorial-Seiten sowie auf Ihre Zahlungsseite an, und dann machen wir es in der nächsten Lektion auch gemeinsam. 17. Constraints: Richtig. Also, wenn Sie bisher verfolgt haben, haben wir einige Einschränkungen zu unserer Anmeldeseite hinzugefügt. Hier s so, jetzt, egal welche Größe der Rahmen hier ist, wenn ich es ändere, wird es voran gehen und alle Elemente innerhalb zu den Seiten und oben und unten einschränken , so dass uns helfen wird, etwas wirklich ansprechendes Design. Und dann habe ich dir eine Übung gegeben, um das für die anderen Seiten hier zu tun. Also werden wir das auch hier zusammen machen. Zuerst möchte ich mit meinen Tutorialschritten beginnen. Ähm, aber ich werde die Gruppe ersetzen, die wir hier im Hintergrund eingefügt haben . Ah, und verwenden Sie stattdessen ein Bild, weil das viel einfacher zu kontrollieren ist mit Einschränkungen für den Zweck, den wir es hier in unseren Mock ups verwenden. Also lassen Sie uns voran und wählen Sie die Anmeldeseite hier und gehen Sie dann den ganzen Weg nach unten, um zu exportieren . Lassen Sie uns voran und fügen Sie hier einen Export hinzu und verwenden Sie einfach PNG für Ihren Dateityp und dann gehen Sie voran und exportieren Sie sich anmelden. Es wird Sie fragen, wo Sie es speichern möchten, also werde ich es einfach in meinen Downloads speichern. Also, sobald ich das getan habe, werden sie gehen weiter und ziehen Sie es einfach aus meinem Download-Ordner direkt in diese Tutorial-Seite. Dann gehen Sie weiter und zentrieren Sie es einfach entlang. Und dann lassen Sie uns voran und fügen Sie eine Einschränkung von links und rechts und oben und unten hinzu. Auf diese Weise wird es dieses Bild an allen Kanten befestigt bleiben, egal wie wir es neu dimensionieren, natürlich wollen wir weitermachen und es einfach den ganzen Weg nach unten bewegen, wo wir unser Rechteck direkt darunter haben . Und dann brauchen wir diese Gruppe hier nicht mehr. Also ist es gelöscht. Und wenn Sie das tun , werde ich die gleiche Einschränkung auf das Rechteck Ah anwenden, das wir für unsere Wirkung hier verwenden, richtig, richtig, die Unschärfe. Also lassen Sie uns voran und wenden Sie einfach die Einschränkung von oben links und rechts und auch oben und unten an. Und dann können wir die beiden einfach zusammenfassen und weitermachen und sie einfach sperren. Machen Sie die Dinge einfach einfacher. Also jetzt, wenn ich die Größe dieser Seite ändere Aber dieser Rahmen hier drüben, werden Sie sehen, dass es weitergeht und das Bild für den Hintergrund und den richtigen Ort behalten wird. Ah, aber die Tutorial-Karte hier ist nicht richtig eingeschränkt. Es ist also wie die Instanz der Tutorial-Karte hier und dann bei einer Einschränkung außerhalb der Mitte. Also, jetzt, wenn ich das gleiche tun hier wird voran gehen und halten die Größe Jahr. Ich wähle einfach das iPhone 11 Pro wieder aus. Also, jetzt funktioniert das. Ich möchte schnell die gleichen Einschränkungen hier auf die anderen beiden Tutorial-Seiten anwenden. Gehen wir also voran und wählen Sie diese Gruppe aus. Kopieren Sie es. Ich bin hier in meinem Tutorial, um das einzufügen, bringen Sie es hier runter, um die anderen beiden zu führen. Das Schöne daran ist, dass, wenn Sie etwas kopieren, die Einschränkungen auch mit ihm kopiert werden. Also müssen wir diesen Teil nicht wiederholen. Lasst uns nochmal kopieren. Tutorial drei. Tun Sie das Gleiche. Verschieben Sie es hier nach unten, löschen Sie die anderen beiden, und dann müssen wir nur noch einmal durch die Instanz gehen, wählen Sie Mitte. Also, durch die Verwendung von Center wird nur die Größe dieser Karte beibehalten, so dass wir nicht die Größe ändern. Basierend auf der Gerätegröße, werden wir es einfach zentrieren Je nach Bildschirm, mit dem wir hier arbeiten. Dieselbe Sache hier. Also, jetzt sind diese Seiten alle fertig. Und zu guter Letzt gehen wir zu unserer Zahlungsseite hier. Ähm, das wird also super einfach für diesen hier sein. Gehen wir voran und machen Mitte und Spitze für die Karte hier. Wir wollen nicht, dass es die Größe ändert. So können Sie auch zentrieren und zentrieren, ähnlich wie unsere Tutorial-Karte und dann für die Schaltfläche hier wollen wir tun. Lassen Sie uns links und rechts und zentrieren. Nun, wenn ich die Größe dieses Rahmens auf, sagen wir, ein iPhone 11 Pro Max hier, ich denke, das sieht gut aus. Also da hast du es. Das sind unsere Zwänge. Und jetzt haben wir es auf allen Seiten ausprobiert, die wir bisher entworfen haben. Nun, um diesen Kurs prägnant und auf den Punkt zu halten, werde ich keine Einschränkungen zu jeder einzelnen Seite hinzufügen. Aber am Ende werde ich eine Datei hinzufügen, die Sie für das letzte Mock up herunterladen können. Sie, ich wünschte, werden alle angewendeten Beschränkungen einschließen. Als Übung können Sie auf jeden Fall Einschränkungen im gesamten u I anwenden und dann am Ende zu dieser Datei zurückkehren , nur um sicherzustellen, dass Sie es richtig gemacht haben. 18. Verwendung von Plugins: Alles klar, wenn Sie also so weit verfolgt haben, haben wir einige der ersten Seiten hier entworfen, und wir haben eine Reihe von verschiedenen Dingen gelernt, von Komponenten bis zu Einschränkungen. , Und jetzt denke ich,wir sind bereit, in unsere Kartenseite zu springen, wenn wir uns unsere Skizze hier ansehen . Ah, wir sehen, dass wir eine kleine Karte mit einem Speicher-Button hier unten haben und vielleicht, aber in, um uns zu sagen wo wir sind, und eine Suchleiste oben. Ziemlich unkompliziert. Aber ich weiß nichts über dich. Ich bin mir nicht 100% sicher, wie wir eine Karte in unser Design bringen. Und deshalb werden wir in dieser Lektion über Plug Ins sprechen. Plug Ins und Abbildung sind im Wesentlichen da, um Ihr Design zu automatisieren und Ihnen dabei zu helfen Ihre Entwürfe auf die nächste Ebene zu bringen und Designs noch schneller zu gestalten. Also, um auf Plug-Ins zuzugreifen. Wenn Sie im Web sind, können Sie hier auf die Menüoption gehen und dann auf Plug Ins gehen. Von hier aus sehen Sie die Liste der installierten Plug-Ins. Da wir keine Installations-Plug-Ins haben, werden Sie hier sehen Es sagt nur verwalten, Plug Ins. Also gehen wir voran und klicken Sie auf „Plug Ins verwalten“. Also von hier aus wird eine Reihe von Feature-Plug-Ins sehen, was populär war, die von der Community gemacht werden . Und Sie können diese wirklich zu Ihrem Vorteil nutzen, wenn Sie Ihre Projekte entwerfen. Natürlich, diese Luft nicht alle Stecker hier. Sie können voran gehen und alle von ihnen durchsuchen, indem Sie einfach hier runter gehen, wo es sagt, Plugins durchsuchen. Wie Sie sehen können, haben wir Tonnen Plug Ins oder gehen den ganzen Weg hoch. Ich sehe unspool. Ash hat es eingesteckt. Wenn Sie sich erinnern, ein paar Lektionen vor Hintergrundbild in unserem Login Seite auf Splash hinzugefügt werden hat tatsächlich einen Plug in Fig MMA. Anstatt also auf die unspool Asche-Website zu gehen, Bilder zu finden, sie zu speichern und sie in deine Feige zu ziehen, meine Dateien, ähm, werden meine Dateien, ähm, der Splash Plug in dir nur helfen, dasselbe zu tun. Aber nur in einem Schritt, ähm, es gibt Diagramme, die Sie mit diesem Plug in erstellen können, einige weitere Symbole. Es gibt Avatar, also wenn Sie eine apt mit Avataren machen, können Sie voran gehen und diesen Plug in diesem hier ist wirklich cool. Hier heißt es Google Sheets Sink. Es gibt eine wirklich gute Chance, dass wir es in einem zukünftigen Abschnitt erkunden werden. Ah, was es tut, ist, dass, wie der Name vermuten könnte, dass es Ihre entworfen mit einem Google-Blatt sinken. Nehmen wir an, Sie haben ein Design mit einer Liste von verschiedenen Texten. Sie können das tatsächlich mit kühlen Laken versenken. Und so, wenn Sie Ihre Google-Tabellen ändern , ändert sich dieser Text in Ihren Designs. Wie cool ist das? Die Liste geht weiter und weiter und weiter. Ich würde gerne einige der nützlichen Plug-Ins hören, die Sie gefunden haben, und es gibt nur eine Menge zu erkunden. Also, wenn Sie mir einen Vorschlag für ein Plugging schicken wollen, das Sie verwenden, um, um, gehen Sie auf jeden Fall weiter und teilen Sie das mit uns in einem Q und A Abschnitt, oder senden Sie es mir einfach per E-Mail. Sie können mir eine E-Mail an hallo clever bei gmail dot com. Also werde ich das hier auf dem Bildschirm lassen, so dass Sie voran gehen und mir einige coole Plug Ins E-Mail die Sie so ganz oben hier finden, können Sie auch nach einem bestimmten Plug Ins suchen Karte, und dann lassen Sie uns diese 2. 1 hier und gehen Sie voran und installieren Sie es. Das ist also nur ein kleiner Hinweis, um uns zu sagen, dass der Stecker von Drittanbietern entwickelt wurde und nicht meine selbst Feigen. Also gehen Sie voran und installieren Sie einfach einen Stecker in. Und da gehen wir. Einstecken, eingebaut Ich sehe, dass es hier drüben installiert ist. Ich kann es deinstallieren, wenn ich es nicht mehr verwenden möchte. Wenn Sie mehr darüber erfahren möchten, was dieser Plug in tut und wie er benutzt wird, können Sie voran gehen und einfach hier klicken, also das ist, wo wir tun werden. Und wie Sie sehen können, hilft es uns, maßgeschneiderte Karten schnell zu machen. Cool. Scrollen Sie hier runter. Sie können Google Maps oder meine Box anwenden, also ist das ziemlich cool. Und es sagt uns, wie man es benutzt. Wählen Sie eine beliebige Ebene aus, einschließlich Rechteck, Lippen oder sogar Polygon, und führen Sie sie aus. Mein Pinker klingt ziemlich unkompliziert, also wechseln Sie hier zurück zu unserem Design. Lassen Sie uns voran und erstellen Sie, wie es sagt, ein Rechteck und ich möchte, dass dieses Rechteck den gesamten Rahmen hier übernimmt, der gut aussieht . Nein, gehen wir weiter und gehen Sie zu dieser Option hier und beachten Sie in der Desktop-App. Sie können darauf auch von Plug Ins zugreifen. Aber wenn Sie in der Web-App sind, können Sie hier gehen und Plug Ins machen. Jetzt sollten Sie hier Map Maker sehen. Gehen Sie weiter und klicken Sie darauf. Es kann einige Zeit dauern, bis es geladen wird. Sobald es geladen wird, würde es Ihnen geben Es sind einige Optionen hier, so dass Sie eine benutzerdefinierte Adresse eingeben können. Sie können den gewünschten Kartentyp ändern, unabhängig davon, ob es sich um eine Straßenkarte, Satelliten-Hybrid einen Satelliten-Hybridusw. handelt. Ähm, Zoomstufe. Also denke ich, alles, was ich tun werde, ist, vielleicht ein wenig mawr in diese Karte zu zoomen. Und dann machen wir eine Karte und da hast du sie. Wir haben eine Karte direkt in unseren Entwürfen. Ziemlich cool 19. Vervollständigen der Kartenseite: Jetzt ist Lester komplett. Der Rest des Entwurfs für unsere Karte hier wird zu meiner Skizze hier wechseln. Also für die Kartenseite, wollen wir hier eine kleine Suchleiste mit einem kleinen Suchsymbol sowie Text und dann eine Speichern-Taste , sowie ein aktuelles Standortsymbol. Also müssen wir Icons hier und dann eine Suchleiste und dann bei Schaltflächenkomponenten. Gehen wir also voran und wechseln Sie zu unserem Design und fangen wir von oben an. Lassen Sie uns das Rechteck-Werkzeug verwenden. Zeichnen Sie hier ein Rechteck und lassen Sie uns einfach konsistent bleiben und 25 Pixel Abstand von links und rechts behalten. Also, natürlich muss ich die Größe ein wenig mehr ändern. Lassen Sie uns voran gehen und ändern Sie die gefüllte zu weiß. Jetzt ist es noch kaum sichtbar, also warum machen wir nicht voran und fügen einen hellgrauen Strich hinzu? Ich denke, so etwas würde funktionieren, und dann lassen Sie uns eine Dicke von 1,5 Pixeln festlegen. Gehen wir voran und runden es auf sechs Pixel ab. Lasst uns eigentlich acht machen. Ah, und lassen Sie uns voran und fügen Sie auch einen Effekt von ah Schlagschatten hinzu. Ändern Sie die Y 25 hier, ändern Sie das Gebläse auf 10 und bringen Sie das Seil eine Stadt auf vielleicht 15% für Let uns tatsächlich tun 10%. Lassen Sie uns das Y auf zwei verschieben, vielleicht oder drei. Ich glaube, das fängt an, zusammen zu kommen. Lassen Sie uns einfach durch Tore Design wechseln. Hier haben wir wenig Suchsymbol, so ist es Text hier für die Suche einfügen. 16 ist gut für die Schriftgröße. Gehen Sie einfach voran und ändern Sie den Weg zu regelmäßig. Ich gehe einfach weiter und füge etwas Platz für unsere Ikone hinzu, die wir hinzufügen werden. Lasst uns diesmal einen weiteren Schlagschatten hinzufügen. Gehen Sie voran und machen Sie die X Null und die Y Null als auch. Gehen Sie voran und machen Sie das Gebläse 30 sind eigentlich 25 auf GOP City. Um fünf Uhr. Ich werde eine Stadt der anderen 1 bis 20% oder eigentlich 15 käsen, damit es nicht zu hart ist. Ich denke, das sieht hier besser aus. Jetzt gehen wir weiter. Zurück in unsere Ressource ist für das Projekt. Sobald Sie das geöffnet haben, gehen Sie über zwei Symbole Karte und dann werden Sie sehen, wir haben zwei Symbole Jahre. Also, was wir gehen einfach voran und ziehen sie hinein. Ich werde nur Shift alt verwenden, um sie hier zu ändern. Bewegen Sie sie einfach hierher. Beginnen wir mit dem Suchsymbol hier. Stellen Sie sicher, dass hier die Proportionen eingeschränkt sind. Dann tun 25 Jahr, so dass automatisch ändert die Breite und Höhe zusammen. Vergrößern. Setzen Sie das hier hier und dann Lassen Sie uns voran und geben Sie ihm eine Auswahl Stil des blauen, es sei denn, auch gehen Sie voran und ändern Sie die Auswahlfarbe dafür in das primäre Blau, das wir haben. Legen Sie das unten und geben Sie es einen Schatten-Tropfen. Beschatten Sie uns auf 20 auf 20%. Das ist gut. Ich bin immer noch nicht so glücklich mit dem Schatten der Suchleiste hier. Ich denke, es ist ein bisschen zu stark, also lasst uns weitermachen und uns einfach ändern. Die 15% ändern das Blau hier auf vielleicht 10. Ich denke, das ist etwas besser. Wir wollen den Text hier ändern, um uns wieder eine helle Farbe zu machen. Da dies Platzhalter sein wird, zögern Sie nicht, einfach eine neun ein neun ein neun für den Hex-Code hier zu setzen, um die gleiche Farbe zu erhalten. Und ich denke, das letzte, was hier ist unser Speichern-Button. Also, wenn wir voran gehen und gehen über zu unseren Vermögenswerten, oben hier und gehen Sie voran und bewegen Sie eine Taste aktiviert auf den Bildschirm hier, nur stellen Sie sicher, dass die richtige Abstand hat, und es tut nur bewegen Sie diese hier oben. Vielleicht wollen wir auch dem Benutzer zeigen, wo ihre Anzeigen. Also, wenn wir voran gehen und eine ovale Form verwenden, zoomen Sie hier hinein und erstellen Sie vielleicht einen Kreis von 21 mal 21 Duplikat, der hier im Befehl D ist, die eine größere von vielleicht 72 mal 72 Jahr machen. Gehen wir zurück zu unserem Führungspersonal und versuchen, diese auszurichten, legen Sie den anderen oben auf diesen und richten Sie sie dann einfach zusammen in der Mitte für den größeren aus. Hier, lassen Sie uns voran und setzen Sie die Textfarbe auf unsere lokale Farbe. Lassen Sie uns diese Farbe wählen, und dann wählen wir die nö, eine Stadt von Lassen Sie uns tun 30% hier, es sei denn, die anderen Lippen oder den anderen Kreis zu dieser Farbe hier geändert . Ich denke, das sieht vorerst gut aus. Wir können das sogar ein bisschen größer machen. Ich benutze Ault und verschiebe mich zusammen, um das Zentrum davon zu halten. Und ich denke, das sieht hier gut aus. Das ist viel zu groß. Lassen Sie uns die Größe auf 35 mal 35 ändern. Stellen wir sicher, dass der eingeschränkte Anteil es ist und machen 35 von 35 hier. Nun, lassen Sie uns eigentlich 38 machen, dann gehen Sie voran und richten Sie das hier aus. Und ich denke, das sieht vorerst ziemlich gut aus. Wir müssen nur diesen Text ändern Wir haben hier drüben, um Sie zu retten, Ort zu speichern oder Kleid zu erhalten. Und da haben wir es. Das ist unsere Kartenseite auf. Wir sind fast da. Wir haben nur drei weitere gemeine Seiten vor uns, und so werden wir das zusammen im nächsten Abschnitt des Kurses abschließen. 20. UX Design Tipps: bisher haben wir an dem Benutzer gearbeitet und hier für diese Anwendung zu formulieren. Wenn Sie also nicht mit dem User Interface Design vertraut sind, ist dies hier ein Beispiel für die U I oder eine Benutzeroberfläche. Die Schnittstelle ist, mit der der Benutzer interagiert. Aber noch wichtiger ist, wir haben User Experience Design, das ist im Wesentlichen, wie sich Menschen fühlen, während sie das Sie verwenden. Lassen Sie uns schnell umschalten, um ein wenig über UX-Design zu erfahren und was es ist und wie wir anwenden können zu unserem Projekt. Also, was Sie X User Experience, oder UX Design ist ein Prozess Design-Teams verwendet, um Produkte zu erstellen, die sinnvolle und relevante Erfahrungen für Benutzer bieten . Mit anderen Worten, Benutzererfahrung. Design ist eine menschliche erste Art, Produkte zu entwerfen, oder? Anstatt nur darüber nachzudenken, bestimmte Elemente in eine Seite zu setzen und Sie dann heute anzurufen , denken wir tatsächlich darüber nach, wie Menschen mit diesem Produkt verfolgt werden, und dann zurückgehen und neu gestalten und sicherstellen, dass wir es in einem Art und Weise, wo Menschen sich gut fühlen, sie zu benutzen oder sogar großartig. Also hier ist ein Beispiel für ein U I vs die U Ex. Ach, du. Ich bin das, was die Leute vor ihnen sehen. Die eigentliche Schnittstelle, während Sie X ist, wie sie damit interagieren, wie sie es verwenden, wie sie sich fühlen, während sie es verwenden. Es ist also noch viel mehr mit dir los. Ex große Sie X ist für die Benutzer lesbar, da dies eine große Verwendung von Schriftarten und Größen unter rechts hier bedeutet , können Sie ein Beispiel für schlechte UX Um sehen, diese Schriftarten nicht sehr zugänglich oder leicht zu lesen. Und im Allgemeinen, versuchen Sie, Ihre Schriftgröße zu erhöhen und verwenden Sie auch einfach zu lesende Mittel im Gegensatz zu so etwas . Großartig. Sie Ausreden, Farben und Wege, die einen verbesserten Kontrast erhöhen. Also, das ist hier wirklich wichtig. Sie möchten sicherstellen, dass Sie einen hohen Kontrast in Ihren Designs haben. Auf der rechten Seite können wir ein Beispiel für Armen Sie X sehen, wo es schwer ist, den Text zu lesen, weil es niedrigen Kontrast hat den Unterschied in Farbe oder Farbton zwischen dem Vordergrund hier, der Text und der Hintergrund. Auf der rechten Seite können wir ein Beispiel für Armen Sie X sehen, wo es schwer ist, den Text zu lesen, weil es niedrigen Kontrast hat den Unterschied in Farbe oder Farbton zwischen dem Vordergrund hier, Aber es wird ein hellgrau hier sein, ist irgendwie niedrig, Also, um diesen Text zu verbessern, können Sie entweder den Text ein wenig dunkler machen. Oder wenn Sie den Hintergrund senken und ihn leichter machen können, können Sie das auch tun, um den Kontrast zu verbessern, ist der Abstand wirklich wichtig. Sie möchten den Benutzer nicht mit zu vielen Informationen an einem Ort überwältigen. Ah, so toll, dass du den Abstand entschuldigst, um Inhalte zu trennen. Und dann auf der rechten Seite sieht man, dass es irgendwie überwältigend ist. Es gibt zu viele Informationen, die alle in einen Bereich gequetscht werden. Ähm, das liegt daran, dass es keinen Abstand zwischen dem Text oder den Objekten gibt, und im Allgemeinen fühlen Sie sich einfach am meisten mit Leerraum entworfen. Es ist also nicht überwältigend, es sei denn, zwei Teile des Inhalts sind relevant. Das bedeutet also, dass es sei denn, Sie haben Dinge, die miteinander verwandt sind, versuchen, sie so weit wie möglich auseinander zu bringen, nur um die U X cool zu verbessern. Die Ausrichtung ist also auch sehr wichtig. Großartig. Sie entschuldigen die Ausrichtung, um sicherzustellen, dass sich die Dinge richtig anfühlen, dass Sie hier zu meiner Linken sehen können. Hier gesäumt sieht alles schön und organisiert und gesäumtaus, während es auf der rechten Seite nicht richtig anfühlt, diese Formen anzuschauen, weil sie völlig falsch ausgerichtet sind. Also, wenn Sie sich während unseres gesamten Designs erinnern, haben wir eine Lineman Werkzeuge viel verwendet, wie ich bereits erwähnt, weil das wirklich wichtig ist. Und die ux-Design-Konsistenz ist ein weiterer großer. Sie möchten sicherstellen, dass Sie mit Ihren Farben konsistent bleiben. Ähm, und du bist ich, um deine Eier zu verbessern. Also für unser Projekt, deshalb würde das Farbschema ausgewählt werden, so dass wir innerhalb einer bestimmten Farbpalette oder Farbschema bleiben , damit wir Benutzer nicht direkt auf der rechten Seite hier verwirren. Wir können sehen, dass wir einige neue Farben auf der rechten Seite hier vorstellen. Es gibt also ein Grün, es sei denn, es hat Bedeutung. Also, zum Beispiel, wenn Sie sagen möchten, Glückwunsch, Also, wenn Sie wollen, zum Beispiel, eine Erfolgstyp von Text für den Benutzer, natürlich können Sie grün verwenden, aber versuchen Sie nicht , um zu viele Farben und viele verschiedene Arten von Schriftarten und Dinge wie diese zu verwenden, und versuchen, es konsistent zu halten. , Versuchen Sie,Ihre Schriftarten in der Regel gleich groß zu halten und relevante Inhalte zusammenzuhalten, oder? So sehen Sie, dass Texas den ganzen Weg unten, wo, wo, wie es näher an den anderen Text sein sollte, weil sie relevant sind, wir sind fast hier fertig ist so groß, dass Sie X ist einfach zu bedienen, einfach, wie die Tasten sind erreichbar und sie sind groß genug, um zu drücken. Und, ähm, ich kann das nicht genug betonen, weil ich eine Menge von Anwendungen gesehen habe, bei denen entweder die Tasten an sehr schwer zugänglichen Stellen setzen , besonders auf Mobilgeräten. Wie Sie hier auf der rechten Seite sehen können, generell vermeiden, möchten Sie generell vermeiden,häufig verwendete Knöpfe ganz oben. Ähm, auch machen Sie Ihre Knöpfe nicht zu klein, besonders wieder auf Mobilgeräten, wo Sie Ihre Finger verwenden, um mit dem Design zu gewinnen. Wenn Sie einen Knopf machen, der viel zu klein ist und vielleicht jemand eine größere als durchschnittliche Handgröße hat , wird er wahrscheinlich diesen Knopf verpassen. So auf jeden Fall machen Sie Ihre Entwürfe für jeden zugänglich, wo so viele Menschen wie möglich, manchmal im Design. Es ist sehr schwer, Ihr Design für jeden zugänglich zu machen, aber es ist definitiv am besten, es für jeden zugänglich zu machen. Lassen Sie Ihre eigenen Benutzer frei, damit es noch viel mehr gibt. Das Hinzufügen von großartigen uns zu Ihren Entwürfen braucht Zeit und Tests, um es richtig zu machen. Also, bitte haben Sie Geduld damit. Ah, aber Sie können mit der Anwendung der versteiften beginnen. Dein Design. Ähm, und es ist eine gute Möglichkeit, anzufangen. Also, jetzt bist du dran zu machen. Tolle Ux. Ich habe diese leichte Show hier gemacht. In Ihrer Ressource ist dies etwas, das ich gerade als kleines Handbuch für Ihre ux zusammengestellt , das Sie für Ihre zukünftigen Projekte anwenden können. Also zögern Sie nicht, das pdf herunterzuladen und es einfach irgendwo praktisch zu haben. Wenn Sie also das nächste Mal Ihr Projekt entwerfen, können Sie sich an ein paar dieser Dinge erinnern. , Fall,dass du es vergesst. In Ordnung, also haben wir viel über User Experience Design gelernt, und jetzt, wenn wir unsere Mock Ups entwerfen, werden wir Sie X im Hinterkopf behalten und darauf zurückkommen und sicherstellen, dass wir alle richtigen Elemente für ein großartiges Benutzererlebnis. 21. iOS Designvorlagen: Alles klar, ich denke, wir sind bereit, unser Anfrageprofil und unsere Serviceseiten zu entwerfen. Aber bevor wir das tun, möchte ich voran gehen und springen in die Ressource ist für diese Lektion genau hier. Sie können voran gehen und diese Textdatei herunterladen. Ah, wo es eine Reihe von Ressourcen gibt, ist für das, was man Vorlagen in Fig MMA nennt. So im Wesentlichen Vorlagen in Feige Mama, wie viele andere Anwendungen wie Ward Editing Software, ermöglichen es Ihnen, mit Primi Template s zu beginnen, so dass Sie nicht viel von Grund auf tun müssen . Und nicht nur das, Vorlagen werden Ihnen helfen, Zugriff auf vorgefertigte Komponenten haben, die Sie einfach in Ihr Design ziehen können und besonders praktisch, wenn es um Apples Sie I Kinder für die Gestaltung kommt. Also natürlich ich uns 13 und alle anderen alle uns, die Sie mit gearbeitet haben, werden bestimmte Vorlagen haben . Wir beginnen eine Design-Komponente, um es bereits gebaut, so dass Sie nicht brauchen, um voran zu gehen und neu zu gestalten, die gleiche Sache für Google-Material hier entworfen . Also habe ich eine Reihe von Ressourcen enthalten ist hier s also lassen Sie uns schnell durch sie gehen, nur so dass Sie wissen können, wie Sie diese für Ihre zukünftige Arbeit verwenden können. Fig MMA hat ihre eigenen Vorlagen unter Websites. Wenn Ihre Fig ma dot com Schrägschrägvorlagen, Sie werden in der Lage, auf diese Website zugreifen, wo sie eine Reihe von verschiedenen Vorlagen wie Mobile You I Kits und Instagram Vorlagen und eine Reihe von anderen coolen Sachen, die Sie wie Venn Diagramme und Dinge wie diese, die nächste Ressource hier ist Abb. Mehr Ressource ist dot com, auch sehr beliebt. Wie Sie sehen können, gibt es viele verschiedene Vorlagen, die Sie mit eso wieder beginnen können. Dies hilft Ihnen, in Ihr Design zu springen, ohne von Grund auf neu beginnen zu müssen. Ähm, und es gibt Tonnen von Ressourcen, die hier aus der Community sind, also zögern Sie nicht, das zu nutzen und viel Zeit für Ihre Entwürfe zu sparen. Dies ist eine andere Website Feige, mein Crash Dot com. Geh weiter und sieh es dir an. Sie haben viel Ressource ist und Sie ich Kinder ist niedrig. Und dann sind diese letzten beiden Ressourcen natürlich, wie ich die für die Apple Design-Ressource erwähnt habe. Ist eso von hier? Wenn Sie nach unten gehen, können Sie uns Vorlagen sehen, so dass Sie herunterladen können, und ich weiß, jetzt haben sie nicht meine hier gefälscht. Aber denken Sie daran, dass Sie immer die Skizzenversion herunterladen und dann in Ihre Figment-Dateien importieren können. Und dann gibt es eine Reihe von anderen, wenn Sie für verschiedene Plattformen entwerfen. Da wir also für ein iPhone arbeiten, gehen wir weiter und laden Sie die Skizze hier herunter , also verwenden Sie die zweite hier, um Skizze herunterzuladen und, na ja, das ist Download. Ich gehe einfach zur letzten Ressource hier. Wenn Sie an einer Android-Anwendung oder einer Anwendung arbeiten, die auf Android-Geräten oder sogar einigen Web-Anwendungen ausgeführt werden wird , können Sie auf jeden Fall die Vorteile dieser Material-Design-Seite hier von Google nutzen. Cool. Also, das sind Vorlagen für uns. Also gehen Sie einfach vor und öffnen Sie die Iris-Skizzendatei, die Sie von Apple heruntergeladen haben, und dann in der nächsten Lektion gehen Sie weiter und verwenden Sie sie in unserem Projekt Also gehen Sie einfach vor und öffnen Sie die Iris-Skizzendatei, die Sie von Apple heruntergeladen haben, und dann in der nächsten Lektion gehen Sie weiter und verwenden Sie sie in unserem Projekt 22. Auf unseren Hauptseiten arbeiten: Ordnung, Also, wenn Sie so weit verfolgt haben, haben wir voran gegangen und die Apple Design-Ressource für IOS heruntergeladen. Ah, wenn Sie das nicht getan haben, gehen Sie weiter und folgen Sie diesem Schritt in unserer letzten Lektion. Und wenn Sie das herunterladen, sollten Sie in der Lage sein, diese Datei direkt hier zu öffnen, von wo aus Sie verdienen können, verwenden Sie die IOS 13 Skizzendateien. Acela hat das Geld installiert, das du brauchst. Ah, also seien Sie sicher, auf diese Website zu gehen, genau hier auf. Ich habe es schon geöffnet. Apple verwendet diese Schriftarten in ihrem gesamten Sie I So ist es am besten, wenn Sie voran gehen und laden Sie all diese Mittel auf nur haben sie auf Ihrem System. Und so, wenn wir die Skizzendatei Ah importieren, werden wir dort keine Probleme haben. Also gehen Sie weiter und laden Sie diese Schriftarten herunter, und dann kommen wir gleich wieder darauf zurück. Also werde ich weitermachen und auch sicherstellen, dass ich all diese Schriftarten habe, und dann kommen wir direkt darauf. Ich möchte schnell erwähnen, dass, wenn Sie die Fig ma Web-App verwenden, um, gehen Sie vor und Kopf auf Fig ma dot com. Schrägstrich Downloads. Ah, und dann gehen Sie weiter und laden Sie diesen Font-Installer hier herunter. ob Sie Mac oder Windows haben, sie haben beide direkt hier. Wie Sie sehen können,ist die Desktop-App nicht erforderlich. Wie Sie sehen können, Der Fondsinstallateur. Aber damit Sie in der Lage sein, Ihre installierten Schriftarten auf Ihrem Computer in Ihr Figment Web up, ähm,in Ihrem Browser anwenden Figment Web up, ähm, ähm, können, müssen Sie diesen Font-Installer verwenden, nachdem Sie Ihre Schriften installiert haben. Ich empfehle, dass Sie die Figment beenden, die aufhören und öffnen Sie es einfach wieder, um sicherzustellen , dass die Mittel, die wir installiert haben, angewendet wurden. Also, jetzt, wo wir bereit sind, zu importieren sind US 13 Skizzendatei hier, lassen Sie uns gehen über Fig MMA und dann zurück zu den Hauptdateien. Die Hauptseite hier drüben. Ich habe es bereits importiert. Aber wenn Sie nicht voran und öffnen Sie eine US 13-Skizze und dann gehen Sie weiter und ziehen Sie diese Elemente, die an plus Guides entworfen wurden, direkt in Ihre Feigenkarte. Ah, ich sollte nur eine Sekunde nehmen, um es in eine Figment-Datei zu konvertieren, da dies eine Skizzendatei ist. Aber sobald dieser Schritt abgeschlossen ist, können Sie Ihre Datei hier öffnen. So haben Sie von hier aus Zugriff auf Farben, Textilien aus Apple sicheren Bereichen, die IPAD-Schnittstelle sowie die iPhone-Schnittstelle. Im Moment interessieren wir uns für die iPhone-Schnittstelle. Hier ist so gehen Sie weiter und öffnen Sie es. Und dann wollen wir jetzt ein paar Dinge anwenden. Ich ziehe einfach meine Markup-Skizze hierher. Sie werden von hier aus sehen, dass wir auf diesen beiden Seiten eine Navigationsleiste hier auf und auf diesen drei Seiten haben wollen. Die Hauptseiten haben eine Tippleiste, um zwischen diesen Seiten zu wechseln. Lassen Sie uns also voran gehen und ziehen Sie an der Navigationsleiste und einem Tab oder in unsere Entwürfe aus den AL US 13 Richtlinien. Lassen Sie mich einfach hier hineinzoomen, und dann ist es wahrscheinlich, wonach wir suchen. Hier haben wir die Navigationsleisten und die Statusleisten lüften hier oben. Der einfachste Weg, diese tatsächlich in unsere Verpflichtung umzusetzen, besteht also darin, einfach voranzugehen und Komponenten zu verwenden . Diese gibt es. Alle diese Elemente sind bereits Komponenten, aber gut, Sie können tun, ist, dass Sie voran gehen und sie in Ihren eigenen Projekten verwenden können. Ich denke, im Moment sind wir nur an diesem spezifischen Rahmen interessiert . Also warum gehen Sie nicht voran und drücken Sie einfach Befehl, Siehe auf dem ganzen Frame, Also stellen Sie sicher, dass Sie alles ausgewählt haben. Uhm, benutze das. Sie Elemente, Bindestriche und gehen Sie voran und kopieren Sie die ganze Sache. Verwenden des Befehls, Siehe? Und dann gehen Sie zu Ihrem Projekt hier. Lassen Sie uns voran und erstellen Sie eine neue Seite und nennen Sie es IOS Sie. Ich Komponenten und ich gehen voran und fügen Sie das einfach hier ein. Jetzt können wir diese in unseren Entwürfen verwenden, damit wir diese Navigationsleiste direkt hier verwenden können. Also, warum machen wir nicht weiter und ziehen das einfach nach draußen? Lassen Sie uns voran und ziehen Sie auch diesen Status für hier raus. Hier drüben, ich sehe, haben wir auch die oberen Balken. Ah, wir wollen drei Optionen in unserer. Also lassen Sie uns voran und wählen Sie dieses hier aus und ziehen Sie es auch heraus. Und so lassen Sie uns voran und wählen Sie jetzt jedes einzeln aus und erstellen Sie eine Komponente aus ihnen. Tun Sie es für die Statusleiste, und dann tun wir es für die Navigationsleiste hier und schließlich oder Tabor hier. Und jetzt, wenn ich wieder zu meiner Markup-Seite hier gehen könnte, lassen Sie uns konzentrieren auf Unsere Hauptseite ist hier. Lassen Sie uns zu den Vermögenswerten oben hier und dann von wo aus wir IOS Sie I-Komponenten haben . Ziehen wir in einer Statusleiste. Bitte setzen Sie sich an die Spitze. Lassen Sie uns voran und verwenden Sie alle Ziehkopien auf jeder dieser Seiten, und wir benötigen eine Navigationsleiste auf unserer Profilseite. Also lasst uns weitermachen und das hineinziehen. Jetzt wirst du sehen, dass es meine Statusleiste abdeckt. Man braucht also Abkürzung in Fig Mayes, dass man Befehl und die eckigen Klammern verwenden kann, um Ebenen nach oben und unten zu verschieben . Also gehen Sie einfach voran und drücken Sie die Befehlstaste und die öffnende eckige Klammer, und das wird Ihre Ebene, die Sie ausgewählt haben, unter die andere verschieben. Das ist es, was wir hier wollen. Lassen Sie uns voran und ziehen Sie das einfach in rechts hier, und dann wieder verwenden Befehl und die öffnende eckige Klammer, um es unter die Ebene zu setzen, die wir wollen. Und schließlich, lassen Sie uns gehen und ziehen Sie Tab oder in alle drei Seiten, weil dies unsere Navigationsstruktur sein wird . Also verwenden wir diese obere Leiste, um zwischen diesen drei Seiten zu wechseln. Wir werden die Symbole hier in der nächsten Lektion hinzufügen, aber jetzt gehen wir weiter und benennen Sie einfach unsere Seiten entsprechend um. Also dieses Profil und die Dienste dieser hier gehen wir weiter und wechseln einfach zurück zu meiner Skizze hier. Ja, das sieht richtig aus. Wir haben nur einen Bearbeitungs-Button hier als auch. Also lasst uns weitermachen und das auch hinzufügen. Lasst uns einfach voran gehen und dieses Quadrat hier sowie das hier löschen. Und lassen Sie uns voran gehen und es von hier aus tun ist gut und dann in diesem hier, lassen Sie uns einfach voran gehen und hinzufügen und auf einen Knopf. nun daran, dass ich die SF Pro-Displayschriftart verwende. Das ist das Das ist die Front, die IOS jetzt benutzt. Also geh weiter und wähle das aus. Und dann lassen Sie uns die Größe auf 24 22 Jahr ändern und das hier oben verschieben. Lassen Sie uns einfach voran und ändern Sie die Phil mit unseren Farbstilen, auch. Das Blau, das wir haben, ich denke, das sieht gut aus. Also, jetzt haben wir unsere Navigationsleisten eingerichtet sind tippen Bars und unsere Statusleisten als auch. Das ist die Grundlinie, die wir in der nächsten brauchen. Hör zu, wir werden zurückkommen und anfangen, unsere Tab-Leiste zu entwerfen, hier eine Zarrella's Arbeit auf unserer Anfrageseite . 23. Entwerfen einer Tab Bar für die Navigation: Alles klar. Wenn Sie bisher verfolgt haben, wir unsere drei Hauptseiten mit einigen der Iowa-Komponenten eingerichtet. Wenn Sie nicht noch einmal gefolgt sind, gehen Sie zum Mock UPS Ordner und die Ressource ist für dieses Projekt und öffnen Sie dann Markierungen und gehen Sie weiter und öffnen Sie einfach die Lektion, die diesem am nächsten ist, und importieren Sie sie einfach und folgen Sie weiter. Alles klar, jetzt ist es an der Zeit, unsere Anforderungsseite zu entwerfen. Aber bevor wir das tun, lassen Sie uns voran und richten Sie unsere Registerkarte sind richtig so gehen Sie voran und öffnen Sie sich. Unsere Ressource ist für dieses Projekt. Sobald Sie hier sind, öffnen Sie den Ordner Icons und öffnen Sie Tabor. Und dann sehen Sie drei Symbole hier für unsere tippen Sie unsere. Aber wir wollen voran gehen und tatsächlich diese und unsere Komponenten hinzufügen, anstatt diese Instanzen hier. Also gehen Sie voran und genau wie einer der oberen Balken hier und klicken Sie dann. Gehen Sie hier zur Master-Komponente. Sobald Sie das getan haben, können Sie fortfahren und jetzt diese Symbole in hier ziehen. Lassen Sie uns voran und ziehen Sie sie einfach und dann gehen wir voran und halten Sie Shift und ändern Sie sie hier und klicken Sie auf diese Einschränkung Proportionen. Und dann geben wir ihnen eine Breite von 32. Ich klicke nur dieses Jahr und füge dann ein Layout-Raster hinzu und lass uns voran gehen und Kahlan auf drei zählen. Ändern Sie einfach die Kobe City auf 5%. Gehen wir weiter und schließen das, und das ist, wo es sich angelegt hat. Gitter werden handlich. Gehen wir voran und verdoppeln Sie einfach schnell hier und verschieben Sie diese Symbole entsprechend. Wir wollen Ah, unsere früheren Dienste hier. Wir wollen diese beiden wechseln, so haben wir unsere Anfrage die Hälfte hier und dann auch unser Profil hier . Öffnen- oder Ebenenbedienfeld. Also sehen wir, was wir hier tun. Lassen Sie uns diese Zeltfarbe die 10. Farbe auf diesem und die Zehnerfarbe hier loswerden. Und dann lassen Sie uns voran gehen und nur zentrieren Diese lassen Sie uns wählen oder Gitter hier und ändern Sie die Rinne auf das ist besser und dann gehen Sie voran und zentrieren Sie einfach die entlang. Das sieht gut aus. Lassen Sie uns einen Text für jeden von ihnen hinzufügen, so verwendet T Lassen Sie uns Profil re Größen tun, auch. Alle 14 und lasst uns weitermachen und das einfach nach oben bewegen, denke ich, wir können unsere Symbole nur ein bisschen nach oben bewegen . Das sind 25 Pixel. Dasselbe hier und zuletzt hier. Und dann benutze einfach den Befehl D hier und noch ein Mal. Stellen Sie sicher, dass dies ausgerichtet ist. Gehen wir weiter und ändern Sie einfach den Text hier. Wir erledigen Dienste und ich werde Anfragen machen. Gehen Sie voran und zentrieren Sie die lange. Dieselbe Sache hier. Lassen Sie uns fortfahren und entfernen Sie jetzt das Layout. Gut. Hier. Ich finde, das sieht gut aus. Wir möchten eine Möglichkeit zeigen, welcher Tap aktiv ist. Also, um zu zeigen, auf welcher Seite sich befand, haben wir eine andere Auswahlfarbe basierend auf dem ausgewählten Tippen. Also lassen Sie uns große drei Instanzen für jede von ihnen ausgewählt werden. Und um das zu tun, werde ich einfach voran gehen und meine gesamte Komponente hier auswählen, alte verwenden und andere hier unten wegziehen und dann einfach den Befehl d zwei weitere Male verwenden . Sie haben also die Hauptkomponente hier und dann drei Instanz dieser Komponente. Und dann werde ich eine Komponente aus jeder dieser himmlischen Komponenten erstellen. Und ich benannte diese zu Registerkarte R Schrägstrich Profil ausgewählt wählen Sie diese hier erstellen Komponenten umbenannt in Tab Bar Schrägstrich Anfrage ausgewählt und dann schließlich, hier werden wir eine Komponente hier zu erstellen und tun tippen Bar Schrägstrich Dienste ausgewählt. Und da gehen wir und ein junges wir tun das, so dass wir leicht zwischen jedem in unseren Mock Up Designs umschalten können . Also jetzt gehe ich hier rüber zum oberen Leiste Schrägprofil ausgewählt, und lassen Sie uns voran und wählen Sie oder Symbol hier. Ändern Sie die Auswahlfarbe, indem Sie die Stile in unsere Primärfarbe verwenden. Dasselbe für den Text hier und dann das Anwenden dieser die Primärfarbe. Lassen Sie uns das Gleiche tun, aber auf Anfrage. Und schließlich, lassen Sie uns dasselbe für Dienste tun, die noch einmal ausgewählt wurden. Ich werde einfach hier reingehen und sicherstellen, dass alles zentriert ist. Ich denke, jetzt ist alles perfekt zentriert. Gehen wir weiter und gehen zurück zu unserer Auszeichnungsrede jetzt und jetzt. Wie Sie sehen können, habe ich diese schöne Registerkarte oder hier zeigt verschiedene Seiten. Gehen wir weiter auf unserer Anfrageseite hier. Gutes Wort, sagt Tab oder hier. Und dann wechseln wir zu Iose. Sie hatten Komponenten auf oder tippen und dann Anfrage auswählen. Dort gehen wir und es sei denn, durch die gleiche Sache für Profil, Gehen Sie vor und klicken Sie auf diese Tab-Leiste und tun Top-Board. Und dieses Profil ausgewählt. Und last but not least, lassen Sie uns Tabor Dienste ausgewählt. Da gehen wir. So haben wir jetzt ein Tab-Board für jede Seite entworfen. Und dann gehen wir weiter und entwerfen unsere Anforderungsseite in der nächsten Lektion. 24. Die Seite: , um auf unserer Anfrageseite zu beginnen. Wirklich schnell. Wechseln wir zu unserer Zeichnung hier. Ach, also zuerst, wir wollen ein wenig nachladen oder ihr Refresh-Symbol hier. Wir möchten, dass unser kleines Karten-Snippet hier tippen und auf unsere Karte A gehen kann, um unsere Adresse festzulegen . Ähm, und dann wird es schön sein, eine Pan von gerade ausgewählten Adresse zu zeigen, denke ich. Und dann wollen wir einen Wäschereibedarf hier und mit einer kleinen Ladenkarte hier drin. Ah, nun, weiter und entwarf die Speicherkarte später. Moment gehen wir voran und lassen Sie das gesamte Layout hier beginnen. Lassen Sie uns also unseren Weg von oben nach unten arbeiten. Erste Dinge zuerst. Ich möchte hier ein kleines Rechteck erstellen. Gehen Sie einfach voran und wählen Sie die Größe von vielleicht 2 50 Pixel hier in Bezug auf die Höhen, stellen Sie sicher, dass das mit vollständig den horizontalen Raum hier nimmt. Wir werden unsere Karte hier einfügen, aber bevor wir das tun, habe ich stattdessen das Kartenbox-Design getestet. Ich denke, es sieht ein bisschen besser aus als die Google-Karte. Zumindest für iPhone-Anwendungen, vielleicht eine Android-Anwendung. Es würde gut aussehen, Aber hier möchte ich voran gehen und tatsächlich meine Karte auf dieser Seite ändern und dann auf dieser Seite, mit einer anderen Art von Karte. Also gehen wir weiter und gehen wirklich schnell zurück zu unserer Kartenseite hier. Gehen wir zurück zum Rechteck hier, das unsere Karte erstellt. Und dann lassen Sie uns weitermachen und den Kartenmacher ausführen. Schließen Sie es erneut an und wählen Sie dieses Mal die Boulevardpresse als Map-Box aus. Lassen Sie uns eine Zoomstufe von 15 und sie gehen einfach voran und machen Karte. Ich denke, das sieht etwas sauberer aus. Ich möchte hier nur den Schatten meines Rechtecks ändern. Ja, also für das erste Geschwätz hier, möchte ich nur die offene Stadt ändern, um uns vielleicht 7% hier machen zu lassen. Es ist auf zwei starken. Ich finde, das sieht gut aus. Lassen Sie uns das Gleiche hier mit der Karte anwenden. Lassen Sie uns voran und wählen Sie dieses Rechteck hier und führen Sie die Karte Maker Blufgan hier, gehen Sie zu Karte Box. Gehen wir weiter und machen die Karte hier. Eine Sache hier, Sie werden feststellen, dass es meine Statusleiste bedeckt, also verwenden wir Befehl und Öffnungshalterung hier, um es einfach nach unten zu bewegen. Ding, das gut aussieht. Und jetzt meine Statusbalken irgendwie mit der Karte s vermischt. Ich werde ein kleines Rechteck erstellen, nur um die Art des oberen Teils hier abzudecken. Und gehen wir weiter und bewegen das unter meine Statusleiste. Wir werden die Statusleistenschicht sperren. Gehen wir weiter und machen dieses Rechteck hier vielleicht etwas größer. Ich denke, so etwas würde funktionieren. Und dann gehen wir weiter und ändern Sie die Phil auf weiße Farbe hier, Geben Sie es eine Stadt aus 50% und lassen Sie uns einen Effekt aus Hintergrund Unschärfe hinzufügen. Lasst uns diese Unschärfe auf vielleicht 25 stoßen. Machen Sie 30 hier. Das ist gut. Also, jetzt ist meine Statusleiste darin, so viel mit meiner Karte zu mischen, was ich wieder will. Dies ist Teil von Ihnen X. Sie möchten sicherstellen, dass Ihre Benutzer in der Lage sind, ihre Statusleiste ah zu sehen, ohne sie in Ihre eigene App integriert werden. Also lassen Sie uns voran und wechseln Sie jetzt zurück zu meiner Ressource ist Ordnerverwendung gehen, um Symbole in Anfrage zu gehen . Lassen Sie uns voran gehen und ziehen Sie diese beiden Symbole und hier zuerst Lassen Sie uns voran und beschränken Sie die Proportionen und ändern Sie sie auf 38. Und gehen wir weiter, genau wie die ganze Sache und bringen sie hierher. Und ich werde meinen Kartenschmerz irgendwo hier platzieren und die Auswahlfarbe bei einem Schlagschatteneffekt zu blau ändern . Vielleicht ändern Sie das Warum hier auf acht. Lass uns tun 10 Blurt sagte. Die Unschärfe auf 10. Vielleicht wird er die Stadt 15 bezahlen. Mal sehen, wie das besser aussieht. Lassen Sie uns voran und geben auch eine Auswahl Farbe blau, um meinen Hintern hier drin. Jetzt gehen wir weiter und schieben es einfach hierher. Und ich möchte voran gehen und auch das von Schlagschatten geben. Aber dieses Mal machen obwohl Pacenti oder die Y Null machen das Gebläse vielleicht 10 auf. Bringen Sie die Dope in einer Stadt auf vielleicht 15%. Ich denke, das ist gut für jetzt, aber es könnte definitiv ein bisschen sichtbarer sein, wenn ich hier auf meine Designs umschalte . Wir wollen die Wäschereianfrage Hap hier drüben, also machen wir weiter und erstellen ein Rechteck von vielleicht hier drüben. Obwohl wir nicht zu meinem Tab gehen oder nur einer war hier zum Untergang und stellen sicher, dass es nicht wirklich meine Tabor bedeckt. Ich denke, das ist gut. Lasst uns die Phil zwei weiß wechseln und halten. Auch schwächen. Trennen Sie unseren Eckenradius hier und machen Sie diesen 20. Und dann können wir auch 20 davon machen. Ich erinnere mich, wenn du Ault einmal im Wesentlichen hältst, trennst du deinen Eckenradius für jede Ecke, damit du Ault nicht halten musst. Sobald du diesen kleinen Kreis innerhalb unserer Grenzradius-Steuerung siehst. Also im Moment wird jede Ecke unabhängig von der anderen handeln, so dass Sie voran gehen und die Größe ändern können, ohne alt halten zu müssen. Lassen Sie uns einen Schlagschatten von do minus 10 oder tatsächlich minus sechs hinzufügen Hier, erhöhen Sie die Unschärfe auf vielleicht 15 oder sogar 20. Ich habe die OPC nicht auf 8% reduziert. Ich finde, das sieht gut aus. Ich mag meinen Hintern hier drin definitiv nicht, also was ich tun werde, ist, dass ich das in ein Oval wickeln werde, also lass uns voran gehen und den Okey benutzen. Und gerade jetzt lege ich das in den Rahmen, damit ich das nicht tun will. Also lassen Sie uns voran und tun Sie es hier 2 48 von 48, dann ändern Sie dies auch. Lassen Sie uns 32 oder sogar 30 mal 30 machen. Lassen Sie uns hineingehen und die Füllung für diesen in weiß ändern, und stellen Sie dann sicher, dass Sie den gesamten Aktualisierungsrahmen hier auswählen und dann nach hier verschieben . Verwenden Sie den Befehl schließen Klammer, um es aufzurufen. Das sieht gut aus. Ich werde nur Befehl G verwenden, um diese zusammen zu gruppieren und dann hier zu platzieren und gehen wir weiter und schließlich bei einem Schlagschatten von Null ex und warum, in nur einer Unschärfe von 10 können wir Unschärfe 15 machen und gehorchen. Die Stadt 15 ist niedrig. Das sieht besser aus. Gehen wir weiter und springen hier rein und entfernen Sie einfach den Schlagschatten aus dem, äh, äh, Neuladen-Symbol oder dem Aktualisierungs-Symbol hier. Wir wollen nur, dass es auf den Kreis hier angewendet wird. Ach, und beim zweiten Gedanken möchte ich vielleicht sogar noch erhöhen. Sie zahlen die Stadt auf 20%. Ich denke, das sieht ein bisschen besser aus. Fühlen Sie sich frei, um mit dem Fest Arten von Dingen zu spielen, nur um zu sehen, was besser aussieht. Was für dich richtig anfühlt. Nun gehen wir voran und fügen Sie einen Texaner hier und lassen Sie uns tun, dass Sie tatsächlich voran gehen und tun Wäsche Shop wählen und änderte die Schriftgröße Jahr auf vielleicht 24 22 und verschieben Sie es hier nach oben. Lasst uns diese zusammen gruppieren und dann weitermachen und sie einfach zentrieren und lasst uns weitermachen und ein Rechteck erstellen. Wollen Sie 95 durch 2 95 tun und nur das hier zentrieren? Das ist ziemlich gut. Uh, ich werde Schicht halten und alles, was es tatsächlich etwas kleiner macht. Vielleicht müssen wir 75 mal 2 75 und dann am Eckenradius von 20. Jetzt gehen wir weiter zu meinem Vermögen hier. Wechseln Sie zu lokalen Komponenten, öffnen Sie Komponenten, und ziehen Sie dann eine dieser Schaltflächen. Und hier der aktivierte Zustand und zentrieren Sie sich, dass lange und ändern Sie dann den Text, um Service anzufordern . Gehen wir zum Ebenenbedienfeld und stellen Sie sicher, dass dieser Teil dieser Schaltfläche ist Teil dieser Gruppe . Gehen Sie einfach voran und stellen Sie auch hier drinnen. Also ja, all das ist jetzt in einer Schicht oder einer Gruppe. Cool. Also da haben wir es. Ich denke, das ist ziemlich gut. Das ist ein guter Anfang. Wenn ich zurückwechsle,haben wir fast alle Elemente hier drin. Wenn ich zurückwechsle, Wir werden in der nächsten Lektion die Speicherkarte entwerfen. Also zögern Sie nicht, jetzt zur nächsten Lektion zu gehen, um unsere ah Shop Karte hier zu entwerfen. 25. Store: Alles klar, jetzt sind wir bereit, unsere kleine Ladenkarte hier zu entwerfen. Ähm und wir werden natürlich eine Komponente dafür erstellen, damit wir sie wiederverwenden und in Zukunft mehrere erstellen können , falls nötig. Gehen wir weiter und klicken Sie einfach hier. Gebrauchte Befehl, siehe hier und gehen Sie zu unseren Komponenten. Lass uns hier rüber gehen und hier drinnen aufkleben. Nun, natürlich, es vermischt sich mit dem Hintergrund hier, also werde ich voran gehen und ihm eine Fülle von Weiß geben. Lassen Sie uns darauf klicken und es zuerst in eine Komponente verwandeln. Also das ist jetzt eine Komponente, also lassen Sie uns voran und fügen Sie ein Rechteck in die Sache genau hier wäre gut. Ah, hier wird unser Bild hingehen. Lassen Sie uns voran und strecken Sie es tatsächlich auf eine Höhe von 1 50 Pixel. Und ich werde den Phil einfach in einen dunkleren Phil verwandeln. Und dann lasst uns weitermachen und diesem auch einen Grenzradius von 20 geben. Scheint wieder hier für die allererste Ecke verwendet Ault zu sein. Um so, dass Sie trennen den Randradius ist hier. Wenn du es nicht richtig kriegen kannst, kannst du immer zwei Wochen, dass von hier aus gut ist, also denke ich, das sieht gut aus. Was brauchen wir sonst noch in unserer Shop-Karte? Gehen wir einfach hier runter. Natürlich wird das Bild dort hingehen. Wir brauchen einen Ladennamen, einen Dollar pro Artikel, Bearbeitungszeit und die Bewertung. Lassen Sie uns an jedem von diesen separat arbeiten. Also zuerst, fangen wir mit unserem Shop-Namen an. Ich gehe hierher, dupliziere das und mache Dollar pro Stück. Für jetzt, lassen Sie uns einfach voran und setzen $0 pro Artikel. Denken Sie daran, das ist nur eine Komponente. In jedem Fall werden wir in der Lage sein, das zu ändern und anzupassen. Und ich werde auch die Größe ändern. Vielleicht 14. Es ist ziemlich gut. Wir können diese wahrscheinlich nur ein bisschen mehr runterbringen, also geben wir unserem Image mehr Platz. Gehen wir weiter und duplizieren Sie diesen hier und halten Sie einen Abstand von 15 von den Seiten. Und lasst uns dies zu Null Tage ändern und dann eine Zeile für diese zu schreiben, also gehen, um das auszustrecken, wenn ich will, wollen wir hier die linke Linie verwenden und dann weiter gehen und die verwendete linke Linie strecken. Eigentlich wollen wir es nicht den ganzen Weg ausstrecken. Wir wollten nur hier und lassen Sie uns die Größe ändern 12 vielleicht 20. Das ist besser. Gehen Sie weiter und duplizieren Sie diesen hier oben und machen Sie Null Sterne oder tatsächlich Null. Dies wird für unsere Bewertung hier sein, so dass wir 0.0 tun können. Also lassen Sie uns voran und zoomen Sie einfach hinein. Also lasst uns weitermachen und einen Stern für mein Lesen erstellen. Hier ist wieder gut, Das Schöne an Feige Geißel. Sie können hier einen Stern aus den Formwerkzeugen erstellen. Lasst uns voran gehen und einen zeichnen. Wird Shift halten, vielleicht eine Größe von 25 mal 25 machen. Ich zentriere das hier zusammen mit diesem coolen Ah und meinen Star-Tools. Ich kann voran gehen und erhöhen und verringern die Anzahl. Wir behalten es eine Fünf. Wir können voran gehen und machen den Laden haben ein hohes Verhältnis oder niedriger, einer geht ein schärfer und wir können auch den Grenzradius hier ändern. Nun, das ist viel zu viel. Also, was ich tun werde, ich will nicht, dass ich nicht mit den scharfen Kanten, die es jetzt hat, gehen will. So können wir hier drüben auf diese Seite gehen und sogar einen Eckenradius mit der Dezimalzahl zuweisen. Also, dass Nullpunkt lassen Sie uns versuchen, Ihre 0,5 hier. Ich finde, das sieht gut aus. Jetzt kann unser Start mehrere Zustände haben. Es kann entweder einfach großartig sein, wie dies halb gefüllt werden kann, und dann können Sie vielleicht voll als Beispiel in meiner Skizze gefüllt werden hier habe ich ah, voll Feldstern. Aber wenn ich nur 1/2 Fill Star haben will, kann es das auch tun. Wenn wir also eine Komponente daraus erstellt haben, aber denken Sie daran, dass Sie keine Komponenten innerhalb einer anderen Komponente erstellen können. Ähm, wollte mich so. Gehen Sie voran und ziehen Sie diesen Stern hier raus und dann gehen Sie weiter und geben Sie ihm einfach eine Füllung aus hellerem Grau. Hier, vielleicht tun diese Farben bekommen Lassen Sie uns eine Komponente direkt hier erstellen. Gehen wir weiter und zoomen Sie einfach. Und nur um meinen Stern hier zu sehen, werde ich Befehl D machen und dann einfach diese Instanz in meine Komponente legen und zwei weitere Sterne für meine anderen Zustände erstellen . Also werde ich eine gefüllt nennen, die andere 1/2 gefüllt und die letzte ungefüllt. Also ist es für das ungefüllte hier, lassen Sie es einfach so, wie es ist. Also für die Hälfte gefüllt, lassen Sie uns voran und geben ihm eine Farbe aus Gold hier. Lassen Sie uns einfach voran gehen und eine Art Goldfarbe hier erstellen. Natürlich kann ich das nicht sehen, weil es von dem gefüllten bedeckt ist. Also lasst uns voran gehen und einfach das hier verstecken. Und ich denke, so etwas würde funktionieren. Ich werde diesen Hex einfach kopieren und ihn auch auf den anderen anwenden. So arbeitet der gefüllte unbefüllt. Einer arbeitet, und dann wollen wir nur die Hälfte voll machen. Einmal. Lassen Sie uns die Vorteile unserer booleschen Gruppen nutzen, indem wir hier ein Rechteck über dem Stern wie folgt erstellen . zuerst Lassen Sie unszuerstdie Rechtecke Farbe ändern, auch diese Farbe hier mit einem Hex-Code von nur sechziger Jahren, und wählen Sie dann das Rechteck und 1/2 gefüllte Form und mit unseren Mobbing-Gruppen, lassen Sie uns Klicken Sie auf die Wahl schneidet. Das sieht gut aus. Es ist genug. Ich möchte das hier drin benutzen. Wird alt halten, bringen Sie eine Kopie hierher. Ich finde, das sieht ziemlich gut aus. Ich will nur weitermachen und das zentrieren, und wir bewegen es ein bisschen hierher. Perfekt. Cool. Ich denke, wir sind bereit, dies zu unserem Design hinzuzufügen. Lassen Sie uns einfach voran und benennen Sie es in Speicherkarte um. Und lassen Sie uns das auch umbenennen . Laden sieht gut aus. Gehen wir zurück zu unseren Markierungen und lassen Sie uns voran gehen und einfach dieses Quadrat hier löschen. Dann gehen Sie durch Vermögenswerte hier und dann. Jetzt wirst du sehen, dass wir diese Shop-Karte hier haben. Gehen wir weiter und ziehen Sie es hinein, zentrieren Sie es hier und gehen Sie einfach zu den Ebenen. Und ich möchte sicherstellen, dass ich zu meiner Gruppe direkt unten hinzugefügt habe. Wählen Sie Wäschereigeschäft. Alles klar, so sieht es so aus, als würde der Hintergrund hier komplett mit dem Hintergrund verschmelzen. Gehen wir also weiter und wählen Sie hier unsere Komponente oder die Instanz aus. Gehen Sie zu Effekten und fügen Sie einen Schlagschatten hinzu. Ähm, vielleicht mit einem Y AIDS. Versuchen wir 10 und machen wir einen Bluer aus. Vielleicht würden 30 oder eigentlich lustig funktionieren. Ich werde nicht den Radius fallen lassen, um vielleicht irgendwie eine Stadt hier zu erholen, um vielleicht 10% zu erneuern 12 Sache , die gut aussieht. Also lassen Sie uns voran und füllen Sie einfach die Daten hier. Gehen wir weiter und ändern Sie den Namen des Shops auch hier . Jacks Wäsche. Ich setze hier nur zufällig Ladennamen ein. Lassen Sie uns eine Bewertung von 3,5 und eine Turnaround-Zeit von Steve zwei Tage machen und dann den Dollar-Stolz ändern . Und vielleicht lassen Sie uns $1 Artikel tun. Alles klar, jetzt wollen wir das Bild hier in dieses Rechteck hier drüben einfügen. Gehen wir voran und verwenden Sie das Tool hier. Platzieren Sie das Bild. Dann lass uns voran gehen und Bilder auswählen, Karten speichern, und ich werde einfach voran gehen und eines dieser Bilder hier auswählen. Das sieht gut aus. Und jetzt, wenn ich hier mit dem Mauszeiger über ein bestimmtes Objekt oder eine bestimmte Form, wie dieses Rechteck, und ich klicke, wird es weitergehen und tatsächlich das Bild innerhalb dieses Rechtecks setzen. Also nicht, lasst uns voran und duplizieren das zwei Mal, das eine hier rüber geht und das andere geht auf die andere Seite. Hier. Lassen Sie mich einfach meinen Profilrahmen hier verstecken, nur damit wir das bearbeiten können. Ich werde das einfach in Rosen Wäsche umbenennen. Lassen Sie uns und dann geben Sie ihm eine Bewertung von 4,5. Und dann können wir den Start hier ändern, indem wir ihn auswählen. Und jetzt, wenn du darauf klickst, können wir tatsächlich voran gehen und wählen, welche wir zeigen. Im Moment zeigen wir diese Intersect eins, aber lassen Sie uns das verbergen und einen gefüllten machen. Dies kann die Bearbeitungszeit auf einen Tag geändert werden, und ich mache einen Dollar 20 pro Artikel. Gehen wir auchzu diesem hier auch und ändern es in Bobs Wäsche. Geben Sie ihm einen Laden aus. Ich weiß es nicht. Lasst uns auf 2,5. Ändern Sie die Turnaround-Zeit zwei, vielleicht drei Tage und wechseln Sie dann den Laden hier, indem Sie meine anderen beiden in die Ungefüllten verstecken. Ändern Sie den Preis nicht auf vielleicht 80 Cent pro Artikel. Also, um diese Bilder zu ersetzen, können Sie einfach voran gehen und doppelklicken, Gehen Sie zum Bild hier, und wählen Sie dann Bild mit tun ein anderes Bild. Da gehen wir und dann tun und dann einfach das geschlossen und machen dieses hier, wählen Bild und dann lassen Sie uns dieses wählen. Da gehen wir. Also, jetzt werden wir voran gehen und einfach die hier in unseren Rahmen platzieren und beide ausgewählt haben und dann in die Anfrage ziehen und dann in die Gruppe. Und was dann? Wir haben sie ausgewählt. Lassen Sie uns voran gehen und nur die Proportionen einschränken und sie auch ändern . Vielleicht 2 55 eigentlich, der Anfang in 2 bis 45. Bewegen Sie sie einfach hier um die andere herum. Stellen Sie einfach sicher, dass es den gleichen Abstand hat. Wählen wir alle drei davon aus und stellen Sie sicher, dass sie vertikal ausgerichtet sind und es so aussieht, als ob sie sind. Schließlich werde ich voran gehen und einfach den Schatten auf diesem zu verringern. Es kann ein Y von fünf und eine Unschärfe von 10 sein, vielleicht nur eine Stadt von 6% statt. Und das Gleiche hier. Ich finde, das sieht gut aus. Wir können sogar voran gehen und dieses Aktualisierungs-Symbol hier oben bringen und einen Joint oder den Rest der Gruppe hier haben . Da gehen wir. Ich denke, das sieht besser aus. Werde den Kreis los und ich denke, das sieht besser aus. Also da haben wir es. Das ist unsere Anfrageseite. Bevor ich es vergesse. Ich werde voran gehen und nun, zuerst, gehen wir weiter und sind einfach zusammengebrochen. die Anforderungsseite und meine Seite hier. Ich gehe auf die Services-Seite und stelle sicher, dass es auch zusammengebrochen ist. Ich werde meine Profilseite einfach unhygienisch machen. Cool. Also, jetzt denke ich, wir sind bereit, auf unsere nächsten Seiten hier zu springen. 26. Die Profilseite: Alles klar, also denke ich, wir sind bereit, mit der Gestaltung oder einer Profilseite hier zu beginnen. Es sieht ziemlich unkompliziert aus. Wir haben ein kleines Bild für den Benutzer hier mit dem Namen und E-Mail hier und Bearbeiten Button hier. Und dann haben wir ein kleines Kartenwidget von ihrer Adresse. Wir haben Zahlungssupport und melden uns dann ab. Beginnen wir also mit der Gestaltung dieser Seite hier. Also auf der Profilseite hier werde ich voran gehen und zuerstdiese Bearbeitung machen, diese Bearbeitung machen, aber in ein bisschen kleiner, weniger zu. Schriftgröße von 20 auf Ändert die Schriftart viel zu mittel hier oder weniger, Sie halb fett, am besten. Also gehen wir voran und zuerst bei oder hier für dieses Profilbild, und wir könnten 100 100 für die Größe machen. Lassen Sie uns nur einen Abstand von 25 Pixel von links halten. Gehen wir weiter und fügen Sie hinzu. Es dauert für den ersten und letzten für ihren Namen. Gehen Sie einfach vor und ziehen Sie eine Kopie mit alten und dann E-Mail an Domain com. Gehen wir weiter und bewegen sie einfach nach unten und das sieht gut aus. Lassen Sie uns einfach die Größe ändern 12 vielleicht 18 und den Namen hier zu 22, um ein Profilfoto hier hinzuzufügen. Ich gehe eigentlich zu meinen Steckern hier. Verwalten Sie Plug Ins. Gehen wir weiter und durchstöbern alle Plugs hier, und ich werde dieses Weingut hier benutzen, das Avatare genannt wird. Wenn Sie es finden können, gehen Sie einfach voran und suchen Sie Avatare und installieren Sie dann dieses hier. Sobald es installiert ist, können wir zurück zu unserem Projekt gehen und dann mit Ihrem, äh, äh, Kreis oder Lippen ausgewählt, gehen Sie zu Plug Ins und dann machen Avatare cool. Also denke ich, das sieht gut aus. Äh, weitermachen. Wir haben unsere Kartenoption, und was? Wir gehen einfach voran und verwenden Salz auf diesem Rechteck mit Karte, die bereits da drin ist und bringen es hierher . Ändern Sie einfach die Größe, bis wir einen Abstand von 25 auf beiden Seiten erhalten. Das sieht gut aus. Lassen Sie uns voran und ändern Sie die Größe der Höhe 200. Geben Sie ihm einen Randradius von 20. Lass es uns einfach ein bisschen runterziehen. Und dann lassen Sie uns das verschieben oder dieses Symbol kopieren, um es einfach in der Mitte hier etwas oberhalb der Mitte zu setzen . Lasst uns die zusammenfassen. Wir möchten auch die Adresse hier hinzufügen. Also warum gehen wir nicht weiter und duplizieren diesen Stift hier und machen ihn dann vielleicht, äh , natürlich, eingeschränkt und machen dann gerade 20? Das ist richtig. 18 in Bezug auf die Breite. Ich zoomen einfach hier rein und lassen Sie uns die Zeile hier verlassen, einen Text machen. 1234 Adressebene nur als Platzhalter. Und gehen wir weiter und machen eine Farm Größe von 18. Verschieben Sie das hier nach oben. Ich finde, das sieht gut aus. Ich werde es nur ein bisschen runterbringen. Und dann denke ich, wir brauchen nur Zahlungen, Unterstützung und melden Sie sich hier ab. Also lasst uns hier ein weiteres Rechteck erstellen und einfach 3 25 mal 55. Ich mache hier vielleicht einen Eckenradius von 10. Bringen Sie es ein bisschen hoch. Vielleicht etwas niedriger als das, und lasst uns einen Text machen. Und dann lassen Sie uns bezahlen. Finden Sie das hier. Also lassen Sie uns zuerst die Füllung zwei primäre ändern Sie die Füllung des Textes auf Weiß unterwegs und duplizieren Sie eine andere hier. Machen Sie das größer und links die Linie rechts eine Linie. Lassen Sie uns tun, ich bin mit alt oder Option und dann tun Sie die acht Schlüssel, um die kleinen Kreise dieses neue einfügen 1234 und diese Art von stellt die Kreditkarte oder die Zahlungsoption. Ich denke, wir können das sogar ein bisschen größer machen, wie wir hier 65 machen und dann diese lange zentrieren. Da gehen wir. Lassen Sie uns voran und gruppieren Sie sie zusammen mit Befehl G und lassen Sie uns gehen und nennen Sie es Zahlungstaste, Was ist dupliziert und wir haben Unterstützung. Also lassen Sie uns Unterstützung tun. Plus, um den Text hier zu lassen und gehen wir zurück zu unserem Strand. Kopieren Sie das. Geh zurück und füge das hier oben in Basit ein. Aber ich möchte einfach voran gehen und das einfach hier hineinziehen. Stattdessen lassen Sie uns weitermachen und die Größe auch ändern. 22 waren eigentlich lassen Sie uns 28 und dann vertikale Linie und was wir hier haben wir, wie, 20 Raid. Ja, lass es uns machen, äh, bewegen, bis es hier ist. Lasst uns weitermachen und es zuletzt machen, aber auch hier in Kopie. Um, also gehen wir voran und stellen Sie zuerst sicher, dass das Teil dieser Gruppe ist hier auf einer umbenannten Gruppe, um Button zu unterstützen, und wenn Sie sich nicht ausloggen, lassen Sie uns einfach einen kleinen Pfeil Icahn hier erstellen und jetzt können Sie es kaum sehen. Es ist wirklich klein, Also lassen Sie uns voran und machen die Dicke drei. Das sieht hier gut aus. Ändern wir die Strichfarbe in Weiß. Also habe ich gerade hier herangezoomt. Aber wie Sie sehen können, dass diese Kanten Art von hart, während hier haben wir eine runde Art von schönen Kanten oder Ecken. Also gehen wir weiter und klicken einfach in diese Zeile, um den Pfeil zu sehen. Dieser Schritt ist also wichtig. Gehen Sie weiter und wählen Sie diesen Punkt direkt hier aus. Eso Wir können Änderungen nur auf diesen Punkt anwenden. Dann geh zu den drei Punkten hier drüben und mach dann eine Kappe aus Runde. Cool. Das hat also eine abgerundete capas. Gut da drüben. Sie können dies zu beliebigen Zeilen tun. Nun, lassen Sie uns einfach verkleinern und entkommen, um wieder da rauszukommen. wir einfach sicher, dass das hier tatsächlich zentriert ist. Sieht so aus, als wäre es jetzt zentriert. Lassen Sie uns einfach voran und bewegen Sie den Pfeil innerhalb der letzten Schaltfläche hier geändert den Namen abmelden Schaltfläche, und ich denke, lassen Sie mich sehen, wie mein Abstand ist. Ich kann es auf ein paar Pixel verschieben. Richtig? Und das ist eine Linie. , Ich denke,das würde funktionieren. Eine Sache, die wir hier tun könnten, können wir zu unserem Abmelde-Button gehen und die Primärfarbe in die Orange ändern. Hier. Bedeutet das, dass dies eine Abmeldeoption ist? Fühlen Sie sich frei, um damit zu spielen und zu sehen, was gut aussieht. Aber ich denke, wenn ich meine Skizze hier anschaue, haben wir ziemlich nah an dem, was wir für unser Design wollen. Ich werde einfach weitermachen und komplett rauszoomen, um zu sehen, wo wir sind. Ja, ich finde, das sieht gut aus. 27. Die Service-Seite: Alles klar, wir sind fast fertig, unser Design hier. Wie Sie sehen können, haben wir unsere Lugging Seite, unser Tutorial, Seitenzahlungen und Kartenseite abgeschlossen unser Tutorial, . Und wir haben sogar unsere Anfragen und Profilseite durchlaufen und sogar Einschränkungen für unser Design hinzugefügt , was großartig ist. Also jetzt, bereit, unsere letzte Seite hier zu entwerfen, Lassen Sie uns voran und zoomen Sie einfach in hier und lassen Sie uns voran und öffnen Sie unsere Skizze, die wir hatten. Diese Seite ist also super einfach. Im Wesentlichen wollen wir nur eine Liste. Ah, Reihe von Dienstleistungen oder frühere Bestellungen oder Anfragen, die der Benutzer gemacht hat, oder sogar aktiv. Wenn sie also einen Wäscheservice haben, der direkt nach unten läuft, wollen wir dies auch hier zeigen, damit der Benutzer sehen kann, was, ähm, der Status von der Wäsche ist. Also, wie Sie hier sehen können, werden wir das in einer Art Listenformat platzieren. Um, für all die Dienste, die sie haben gehen wir weiter und zoomen Sie hier rein und sehen, was genau wir in unserer, ähm, unserer Liste dort haben wollen ähm, . Also wollen wir Namen speichern. Wir wollen ein Datum in der Zeit, an der die Anfrage stattgefunden hat. Wir haben den aktuellen Status und dann, ah, wenig Preis, äh, äh, Text hier drüben, um ihnen zu zeigen, wie viel sie belastet wurden. Und dann wollen wir hier nur ein kleines Karottensymbol haben. Erlauben Sie ihnen einfach, auf diese Anfrage zu gehen und vielleicht Seymour Informationen darüber. Oder wenden Sie sich vielleicht an den Laden oder eine Reihe anderer Optionen, die Sie für Ihr eigenes Design hinzufügen können . Wir werden in diesem Kurs nicht auf diese Seite kommen, aber aber ich werde das als Übung für Sie überlassen. Also, wenn Sie voran gehen und eine Seite für sie entwerfen wollen, um ihre Anfrage zu sehen, gehen Sie mit allen Mitteln voran und tun Sie dies. Und Sie können es mir sogar per E-Mail schicken. Und ich gebe Ihnen gerne Feedback. Ehrfürchtig. Also lasst uns zurück zu unserem Mock hier oben wechseln, und zuerst möchte ich eine Komponente für jedes meiner Listenelemente erstellen. Natürlich, ich denke, jetzt wissen Sie, wo wir unsere Komponenten setzen. Es ist auf der Komponentenseite hier. Gehen wir rüber und lassen Sie uns voran und erstellen ein Rechteck mit dem R zwei. Und ich erstelle nur ein Rechteck. Lass uns weitermachen und ihm eine Füllung Weiß geben. Eigentlich, lassen Sie uns voran und ändern Sie die Breite auf 3 75 Ich denke, das ist die Breite der iPhone-Größe , mit der hier gearbeitet wurde. Wenn ich mich nicht irre, ja, 3 75 mal 8 12 Also gehen wir zurück. Machen wir 3 75 und lassen Sie uns 100 und 10 für die Höhe hier tun. Ich denke, das ist gut. Ich habe hier bereits einen Text, also möchten Sie als Designer immer Komponenten wiederverwenden oder verschiedene Elemente in Ihrem Design wiederverwenden , anstatt neue Elemente zu erstellen, nur weil es eine Menge Zeit spart. Also lassen Sie uns voran und wählen Sie einfach ein paar Dinge hier aus, wie die drei Texte. Vielleicht sogar noch denke ich, dass das gut ist. Und dann verwenden Sie Befehl, sehen, um es zu kopieren und dann gehen Sie zu diesem Rechteck hier und fügen Sie das ein. Und hier im Moment ist das keine Komponenten. Lassen Sie uns alles hier auswählen und verwenden Sie Befehls-Optionstaste, und das macht es zu einer Komponente. Und jetzt schwächen, graben und bewegen Sachen herum. Also denke ich, wir können den Namen des Ladens näher hier oben haben. Mal sehen, was wir in unserem Design noch etwas Ähnliches hatten. Und wir haben Preis und Status. Also lasst uns Preis machen. Gehen wir weiter und schieben Sie das hier. Geben Sie es einfach ein wenig Abstand für unsere Karotten und dann gehen wir weiter und schieben Sie das hier und machen Sie, äh, verlassen Sie die Linie. Lasst uns weitermachen und das da drüben ausrichten. Sehen Sie, welche Art von Abstand wir zu 15 mal 15 hier in Bezug auf den Abstand von links und unten haben. Und lassen Sie uns voran und tun Sie einfach Tag Monat Sie sind und das kann sein, weil H H m m Stunden und Minuten darstellen . Sieht gut aus. Also lassen Sie uns voran und stellen Sie sicher, dass dies genau hier vertikal perfekt zentriert ist. Und dann werde ich diesen Text mit dem Befehl D rechts duplizieren. Richten Sie es aus und bewegen Sie es dann einfach den ganzen Weg dorthin, wo ich mein Dollarzeichen Icon habe. Lassen Sie uns den Text in Status ändern. Cool. Ich denke, das ist gut. Wir wollen nur hinzufügen oder Karotten-Symbol hier. , Der einfachste Weg,das zu tun, ist, eine Fehlerlinie zu zeichnen, also werde ich mich als Abkürzung verschieben. Erstellen Sie hier eine Zeile. Vergrößern wir uns. Gehen Sie weiter und verdoppeln Sie sich schnell hier. Nehmen Sie einfach das Ende der Linie und bringen Sie es den ganzen Weg hierher. Also haben wir hier nur eine schöne Karotten-Symbol. Ich werde hier fertig sein, um da rauszukommen und dann meine Karotten hierher zu bringen , um es ein bisschen größer zu machen. Vielleicht machen Sie eine Dicke von zwei, vielleicht 2,5, und das ist gut. Und dann möchte ich sicherstellen, dass ich es in der Mitte gefiel und es sei denn, eine Strichfarbe wurde geändert , um das hier nicht wirklich zu sehen, ähm, das funktioniert. Lassen Sie uns voran und benennen Sie diese Komponenten-Service-Liste und lassen Sie uns gehen über zu unseren Mock Ups jetzt und fügen Sie diese Komponente, indem Sie zu Assets gehen, die wir hier sehen. Wir haben eine Serviceliste. Lass uns weitermachen und das hineinziehen. Also schon Aiken sagen, ich möchte ein paar Änderungen daran vornehmen. Ich denke, wir können es etwas kleiner machen. Und dann gehen wir weiter und fügen Sie auch einen Teiler hinzu. So können wir irgendwie sehen, die nächste Option in der Liste sehen und zwischen ihnen unterschieden . Also werde ich einfach schnell wieder in Komponenten gehen. Wählen wir die gesamte Komponente aus und machen sie 95 Pixel hoch. Und dann werde ich meinen Shopnamen ein paar Pixel nach unten bringen und dann vielleicht diese hier ausrichten , und diese auch und wirklich bringen sie ein paar Pixel runter und dann gehen Sie weiter und setzen Sie dieses wieder in die Mitte. Ich denke, das wird funktionieren. Also lasst uns voran gehen und eine Linie zeichnen. Stellen Sie sicher, dass Sie es Straße mit Shift halten und lassen Sie es den ganzen Weg strecken. Strichfarbe verwenden. Lasst uns Kontrolle benutzen, sehen und weitermachen. Und genau so, Farbe aus der Kutsche. Dann machen wir es vielleicht ein bisschen leichter. Er wollte subtil sein. Ich denke, das ist gut. Gehen wir weiter und wählen Sie es einfach aus und bringen es den ganzen Weg nach unten. Nur ein Pixel unten. Okay, ich glaube, wir haben das hier. Also, wenn du jetzt zu Mock Ups gehst, denke ich, das sieht besser aus. Wir können einfach weitermachen und alles auch benutzen. Bringen Sie das runter und drücken Sie dann den Befehl de Haufen von Malen, nur um zu sehen, wie das aussehen würde . Ich denke, das funktioniert 28. Beispieldaten aus Google Sheets: Jetzt werde ich Ihnen einen wirklich coolen Stecker zeigen, den wir nutzen können, um die Daten für diese Dienste hier drüben zu füllen . Also lasst uns voran gehen und nach Plug Ins suchen, öffnen, man verwaltete Plug Ins, und dann gehen wir weiter und durchsuchen alle Plug Ins. Also lasst uns voran gehen und nach Plug Ins suchen, öffnen, man verwaltete Plug Ins, Und ich interessiere mich für diese Google Sheets Waschbecken Option hier. Wenn Sie es nicht finden können, suchen Sie Google Tabellen. Sinken Sie hier. Gehen Sie voran und installieren Sie es. Dieser Plug Ins super cool. Und ich denke, es wird auch für Ihre zukünftigen Projekte nützlich sein. Alles klar , sobald Sie das installiert haben und Sie wieder hier sind, gehen wir nicht wirklich zurück zu unseren Komponenten. Also gehen Sie weiter und voll zusammen mit dem, was wir hier tun. Gehen Sie zum Shop-Namen und ändern Sie den Text hier, um, ähm, tun Sie ein Hashtag-Zeichen oder ein Pfundzeichen wie dieses und speichern Sie unterstrichene Namen und dann für das Dollar-Symbol hier. Äh, mach weiter und nenn es. Gesamtunterstrich Preis. Stellen Sie sicher, dass Sie den Hi-Hirsch oder den Pfundschlüssel hier setzen. Ändern Sie diese 12 Datumsangaben mit dem Hashtag vor und dann Status wird Hashtag-Status sein und ich werde Ihnen sagen, warum das in nur einer Sekunde wichtig ist. Ah, sobald du umbenannt hast, geh einfach weiter und überprüfe, dass du dort keine Tippfehler gemacht hast und was hier drin war. Ich will nur noch eine letzte Sache machen. Gehen Sie hier für Ihren Shop-Namen und stellen Sie sicher, dass es den ganzen Weg, um vielleicht direkt hier drüben zu strecken und nur sicherstellen, dass das gleiche mit dem Datum. Ich finde, es sieht gut aus. Ich möchte mein Datum und meinen Status auswählen und sie ein paar Pixel herunterbringen. Und lassen Sie mich auch voran gehen. Und ich habe das Gefühl, wir sollten die nach oben bewegen und sie zentrieren. Meine Komponente hier s also lasst uns sie zusammen gruppieren und dann eine vertikale Linie verwenden. Ich denke, das sieht besser aus. Es ist jetzt, wenn ich hierher gehe. Ja, das sieht viel besser aus. Sehen Sie sich nun an, dass Ihr Services-Rahmen auf Plug-Ins geht. Ich mache Google Blätter sinken. Gehen Sie voran und gehen Sie ein. Dieser Link, der sich in der Ressource befindet, ist für diese Lektion vorgesehen. Also gehen Sie weiter und nehmen Sie sich einen Moment Zeit, um das herunterzuladen. Holen Sie sich diesen Link aus der Textdatei und fügen Sie ihn hier ein. Ich habe bereits voran gegangen und dieses Blatt dieses Google-Blatt mit Beispieldaten gemacht. So sicher in einer Sekunde, wie das aussieht. Also, wenn er es wirklich geöffnet hat, werden Sie sehen, dass ich diese kleinen Ghul Blätter mit meinen Daten mit meinen Shop-Namen zusammengestellt habe. Ah, ein paar Termine, einige Preise und einige Status- und Zufallsartikel. Es gibt Rundum- und Datenzufallsdaten, nur um uns zu helfen, unseren Bildschirm zu generieren. Um, also mit diesem Google-Tabellen, gehen Sie vor und verwenden Sie den Link wieder und setzen Sie ihn hier und dann gehen Sie vor und wählen Sie die aktuelle Seite nur aktualisieren , und verwenden Sie dann holen und sinken, wie Sie hier sehen können Seite ist nicht abgeschlossen. Es ist voran gegangen und verwendet, dass Google Blätter und generierte diese Seite für uns. Natürlich. Deshalb müssen wir unsere Felder umbenennen, damit dieser Plug in weiß, was zu greifen , wo, ähm, ja, sicher sein, ihre Dokumentation zu lesen. Sie können dies tun, indem Sie zu Google gehen. Sie würde sinken und dann auf dieses kleine Informationssymbol hier unten klicken , ,wo Sie tatsächlich auf ihre Dokumentation zugreifen können und dann sehen , wie Sie das für Ihre eigenen Projekte verwenden und Ihre eigenen, äh, Google-Tabellen. Aber das fand ich ziemlich cool. Und deshalb wollte ich es in diese Lektion aufnehmen und euch sagen, dass ihr so etwas tun könntet . Flechten, dass Sie Zugang zu unseren super mächtigen haben. Nutzen Sie sie also, um Ihre Entwürfe zu generieren und sparen Sie sich eine Menge Zeit. Also, ähm, ähm, ich denke, unsere Seiten sind so ziemlich alles hier gemacht. Jetzt kommen wir zurück und lernen noch ein paar andere Dinge. Ich weiß, dass Sie an diesem Punkt bereits viel Wissen über Fichman haben. Hoffentlich sind Sie in der Lage, dies tatsächlich zu verwenden und alles, was Sie gelernt haben, auf Ihre eigenen Designs anzuwenden. Wirklich? Das ist alles, was dieser Kurs geht, ist, mit verschiedenen Werkzeugen zu experimentieren, die Ihnen gegeben werden , um einige wirklich schöne Designs zu generieren. Also, bevor wir dieses Mock hier einpacken, werden wir wieder darauf zurückkommen und ein paar Dinge tun, um es noch besser zu machen. Ähm, also sehe ich dich in der nächsten Lektion. 29. Benutzerdefinierte Schriftarten für die Verwendung finden: Alles klar, wir haben unser Mock in der letzten Lektion abgeschlossen, und ich möchte mir etwas Zeit nehmen, um unser Mock zu durchlaufen und Möglichkeiten und Orte zu finden, an denen wir es verbessern können, angefangen mit dem Text und der Typografie. Ähm, also werde ich auf ein paar Ressourcen umschalten. Ist das enthalten Ah, in dieser Lektion. Gehen Sie weiter und öffnen Sie sie, um sie zu überprüfen. Ich werde einfach schnell durch diese Resource ist eso gehen. Weißt du, worauf du Zugriff hast? Um, Zunächst einmal, wenn Sie versuchen, benutzerdefinierte Schriftarten in Ihren Figment-Projekten zu verwenden, stellen Sie sicher, dass Sie dieses Font-Installationsprogramm wieder hier herunterladen. Dies ist also nur erforderlich, wenn Sie die Web-App verwenden. Wenn Sie die Desktop-App haben und figment auf einem Desktop verwenden, müssen Sie sich keine Gedanken über die Installation dieses Schriftart-Installationsprogramms machen. So Fig MMA selbst verwendet Hunderte von Schriftarten, die auf Google-Schriften zugänglich sind. Als ob Sie auf dem Weg zu fremden. Starten Sie Google dot com, Sie werden in der Lage sein, auf eine Menge von Mitteln, die in Sigma verfügbar sind zugreifen. Wie immer, erkunden Sie einige andere. Ich bin mir nicht sicher, welche Mittel derzeit auf Fig MMA sind, aber ich bin sicher, dass Sie in der Lage, das herauszufinden, wenn Sie nach einer bestimmten Schriftart suchen. Ansonsten können Sie auf jeden Fall entweder von Google-Fonts heruntergeladen werden, was eine großartige Ressource für die Suche nach Schriftarten ist, um, oder eine andere speichert Ressource wie die Adobe Fonts als auch. Ich glaube, dass dies ein Abonnement oder eine Mitgliedschaft für die Creative Cloud erfordert. Also gehen Sie weiter und schauen Sie sich das auch an. Sie erhalten Zugang zu Tonnen von Fonds, also gehen Sie voran und stöbern. Diese Ressource ist, wenn Sie nach einer benutzerdefinierten Schriftart suchen. Eine weitere coole Website, die ich erwähnen möchte, ist liebes Paar Darko Ah, diese Website gibt Ihnen eine Reihe von Fonds Paare, die Sie verwenden können, um, mit verschiedenen Arten von Schriftarten, die gut zusammen in Ihren Projekten aussehen würde. Hier gibt es ein paar verschiedene Mittel, die Sie erkunden und sehen können, welche Sie mögen und welche Sie für Ihre eigenen Projekte verwenden möchten. Hier gibt es ein paar verschiedene Mittel, die Sie erkunden und sehen können, welche Sie mögen Und diese Lektion werden wir weitermachen und diese, ähm,Fondskombination oder Fondspaar in unserer Anwendung anwenden ähm, . Ähm, also kannst du eins von zwei Dingen machen, die entweder zu Schriftarten gehen. Paradox co und dann laden Sie diese Rube IQ und Carla Kombination Schriftart oder Fount Paar oder wieder , wenn Sie gehen, um die Ressource ist für das Projekt, an dem wir gearbeitet haben. Clean kann gruppieren, ähm, und gehen Sie über zu Schriftarten. Sie werden in der Lage sein, sie auch von hier herunterladen ist gut und installieren Sie sie. Also werde ich voran gehen und sie einfach selbst installieren. Stellen Sie sicher, dass Sie alle verschiedenen Gewichtungen auswählen. Um, für diesen Fonds und Mac, können Sie einfach alle auswählen und dann einfach doppelt schnell öffnen, alle installiert. Und lassen Sie uns dasselbe für diese anderen Mittel tun. Hier. Stellen Sie sicher, noch einmal. Sie wählen alles, gehen Sie vor und öffnen Sie es und gestohlen und alles getan dort. In Ordnung, also lasst uns zu unserem Feigen-MMA gehen, das wieder aufhört, weil ich die Desktop-App hier benutze . Ich muss den Font-Installer nicht installieren, aber zögern Sie nicht, hier anzuhalten und durch das Front-Installationsprogramm zu gehen und sicherzustellen, dass diese Mittel im Web angewendet werden. APA ist gut, wenn du die Feige benutzt. Ma ging nach oben 30. Textstile erstellen: Also, bisher in unserem Projekt, haben wir hier den Standard für Roboto Schriftart verwendet. Also, wenn ich hier hineinzoomen, wie zum Beispiel in unserer Login-Seite oder unserem Logo, hat alles diesen Roboto Font benutzt, bis unsere Hauptseiten hier, tatsächlich. Ah, wo wir angefangen haben, einige der IOS-Komponenten zu verwenden. Wenn Sie sich erinnern,zum Beispiel fürunsere obere Leiste und die Navigationsleisten hier, ähm,als wir angefangen haben, dass alles automatisch auf die Standardschriftarten umgeschaltet wurde, die für iPhones erhältlich sind. Wenn Sie sich erinnern, zum Beispiel für unsere obere Leiste und die Navigationsleisten hier, ähm, als wir angefangen haben, dass . - Sie? Warum das wir auch installiert haben, das ist sf pro Display. Ähm, also weiß ich, dass das jetzt super chaotisch ist, denn und Ihre Projekte wollen Sie normalerweise höchstens ein oder zwei Schriftarten halten. Sie möchten nicht mehrere Schriftkombinationen haben. Ähm, und wir haben darüber auch in unserer UX Lektion als beides gesprochen. Also lassen Sie uns einfach von der Anmeldeseite aus arbeiten. Und natürlich haben wir die Möglichkeit, jeden Text zu ändern, unsere neuen Schriftarten Ah, die wir heruntergeladen haben. Aber ich würde Ihnen auch eine großartige Möglichkeit zeigen, wie Sie Stile einrichten können, genau wie wir Stile für unsere Farben einrichten . Wenn Sie sich erinnern, haben wir ein Farbschema eingerichtet. , Ich möchte Ihnen zeigen,wie Sie Stile für Ihre Typografie und Ihren Text verwenden . So fügen Sie Ihrem Figment-Projekt einen Typ-Stil hinzu. Gehen wir voran und wählen Sie zuerst Text aus. Beginnen wir mit diesem Logo-Text hier. Also haben wir diese beiden Schriftarten installiert. In der Regel möchten Sie ein Mittel für Ihre Überschriften, eso-Titel und Logo-Text und solche Dinge verwenden. Und dann wäre der Textkörper für alles andere. In diesem Fall sind Header Font Rubik und die Body Font wird Karla s sein. Also lassen Sie uns Rue Big hier anwenden. Ah, Logo-Text. Also geh hier rüber, wo es Text steht. Sie können die Schriftart ändern, indem Sie hier durchblättern. Um oder Sie können auch einfach voran gehen und den Namen des Fonds eingeben. Und hier, also weiß ich schon, dass es Rubik ist. Also werde ich das hier durchsuchen und jetzt haben wir Rubik hier beworben. Ich werd einfach Ah, mittleres Gewicht hier anwenden . Du kannst andere machen. Wie wenn Sie wirklich dick mit schwarzen oder wirklich Lichtern gehen wollen. Ich glaube, ich mag das Medium hier. Sieht ziemlich gut aus, und es fügt sich nicht ein. Also lasst uns weitermachen und das benutzen. Manchmal änderte Geld Geld Geld, Ihre Ausrichtungen könnten geändert werden. Also gehen Sie voran und überprüfen Sie nur, dass alles richtig ausgerichtet ist. , Und sorge dafür,dass ich dafür sorgen werde, dass dieses Logo genau in der Mitte des Wohlbefindens ausgerichtet ist . Das sieht jetzt gut aus. Also jetzt gehen wir voran und verwandeln dies in, ah Typ Stil, den wir auf allen anderen Seiten verwenden können. Und wieder, der Vorteil ist, dass, wenn Sie irgendwann entscheiden, diese Schriftart zu ändern, Sie können dies an einem Ort tun, und alle Ihre Seiten haben diese Schriftart und das Styling angewendet uns. Gehen wir voran und gehen hier zum Stil. Lassen Sie uns einen neuen Stil erstellen. Ich will es nur nennen, ähm, Header, machen Sie einen kleinen Strich und dann geben Sie ihm einfach den Namen des Fonds hier. Also ist es Rubik. Lass uns 26 Punkte machen. Das ist nur der Name hier. Du brauchst nicht genau das, was ich hier reinstelle. Das ist nur für mich in der Lage zu sein, meinen Kopf der Schrift zu identifizieren und leicht zu sehen, welche Größe und Schriftart es ist. So kreieren Sie Stil. Und so jetzt, wie Sie hier sehen können, wenn ich voran gehe und wieder darauf klicke, wurde dieser Text an diese Art von Header Rubik 26 eso angehängt, um zu demonstrieren, ob ich zu dieser Tutorial-Karte gehe, zum Beispiel . Nun, wenn Sie sich erinnern, dies ist eine Instanz einer Komponente, also würden wir die Dinge hier nicht bearbeiten wollen, da sie sonst nicht auf die anderen Tutorial-Karten angewendet würde . Also gehen wir voran und gehen zu Master-Komponente von hier, und es sollte uns direkt hierher bringen. Wenn ich nun voran gehe und hier auf den Titel klicke und dann zu meinen Stilen gehe, kann ich den gleichen Header anwenden. Rubik 26 Stil Das ist der einzige Stil, den wir im Moment haben. Aber lassen Sie uns auch einen Körperstil für diesen Text hier aufstellen, mit unseren anderen Mitteln, nämlich Carla. Lass uns weitermachen und den Text in Carla ändern, dann gehen wir weiter und vielleicht die Größe von 17. Gehen Sie voran und schaffen Sie Stil. Lass uns Body Dash Carla machen, und dieser hier war 17 Punkt großartiger Stil. Da gehen wir. Und jetzt habe ich auch einen Body Style Textil. Also, während wir hier mit unseren Komponenten sind, lassen Sie uns das auf alle Komponenten hier anwenden. Also lassen Sie uns unsere Aber es aktiviert hier und ändern Sie den Text in Carla als auch. Und dann möchte ich voran gehen und es fett machen und die Schriftgröße Jahr auch auf 17 ändern. Ich werde nur dafür sorgen, dass es hier zentriert ist. Das sieht gut aus. Lassen Sie uns voran und erstellen Sie einen Stil für unsere, aber auch in Text hier. Also werde ich gehen. Ich werde Körper Carla 17 Punkte zu tun. Mutig hier drin. Da gehen wir. Also, jetzt hat dieser Knopf die Zelle, die er auch hier drin impliziert wird. Denn wieder, dies ist eine Instanz dieses Buttons hier. Alles klar, also lasst uns voran gehen und unseren Fonds auf unsere zwei Komponenten hier anwenden, also 1., um Karte zu speichern. Also lassen Sie uns voran und wählen Sie diesen Text hier aus. Ähm, wir werden es in unseren Raum Big Fonds hier setzen und wir machen Medium für die Größe der Sache. Wir können 22. Gehen wir weiter und fügen Sie dieses Textil als Header Room 22 hinzu. Ich erinnere mich, dass Sie nicht für jeden Fonds einen Stil erstellen müssen , aber wenn Sie denken, dass Sie eine bestimmte Schriftart oder den Staat eine bestimmte Art von Fonds auf mehreren Seiten oder mehreren Komponenten wiederverwendenwerden, , aber wenn Sie denken, dass Sie eine bestimmte Schriftart oder den Staat eine bestimmte Art von Fonds auf mehreren Seiten oder mehreren Komponenten wiederverwenden werden, Ich denke, das ist der bessere Weg, dies zu tun, als alle einzeln zu ändern. Also gehen wir hier und wählen Sie dann unsere Stile und tun Körper Carla 17. Dasselbe hier, zuletzt hier ist. Nun, gehen wir weiter und stellen sicher, dass alles zentriert ist. Ich werde in der Mitte. All diese Bestände könnten dafür sorgen, dass diese Luft auch zentriert ist. Perfekt. Lass uns hier rüber gehen. Lassen Sie uns in unsere Serviceliste. Ah, Komponente. Gehen wir weiter und ändern Sie diese in den Header Rubik 22, den wir eingerichtet haben. Und diese werden die Leiche Carlos 17 sein. Also, mit den Auserwählten, lasst uns, ähm, Körper Carlos 17 machen und dann vielleicht fett für den Preis hier tun. Also lassen Sie uns dies entbinden oder diesen Stil lösen und tun den Stil des Körpers Carlos 17 Bold. Er sieht besser aus, wenn wir voran gehen und nur, ähm, bringen Sie das ein paar Pixel runter und dann gehen Sie weiter und bringen Sie meinen Namen hier runter und versuchen, das mit dem anderen Text hier zu streichen. Und vielleicht können wir diese paar Pixel runterbringen. Ich denke, das könnte besser aussehen. Wir gehen voran und gruppieren diese beiden zusammen, ist auch im Befehl G unterwegs und wählen Sie diese tun. Stellen Sie sicher, dass sie zentriert sind, und zentrieren Sie sie zusammen mit dem Rest der Komponente hier. Ich denke, das ist gut. So sind Komponenten hier haben jetzt den richtigen Fonds. Warum machen wir nicht eine kurze Pause und tragen dann Textilien auf den Rest unserer Mock Ups in der nächsten Lektion auf? 31. Textstile überall anwenden: In Ordnung. So haben unsere Komponenten nun Textilien aufgebracht. Und wenn wir tatsächlich zu unseren Mock Ups zurückkehren, können wir bereits einige von denen sehen, die angewendet werden, wie hier mit unseren Knöpfen. Ähm, natürlich, wie solche Dinge wie diese Taste „Passwort vergessen“. Weil es sich nicht um eine Komponente handelt, wurde nicht angewendet. Es ist immer das Gefühl frei zu überprüfen. Gehen Sie hier zurück und wählen Sie dann die richtigen Telefone aus. Gehen Sie einfach weiter und richten Sie sie wieder aus. Vielleicht bringen Sie das ein bisschen runter. Bringen Sie diese zwei kleinen Bissen hoch. Das sieht gut aus, wenn ich meine Begriffe hier auswähle und sagte es auch zu Stil von Body Girl von 17. Mutig. Ich werde es nur den ganzen Weg durchziehen. Nun, wenn du dich vorher erinnerst, hatten wir dieses Ende nicht als, ah gefaltete Schrift. So können Sie immer noch hier gehen, doppelklicken und wählen Sie das Wort, das Sie wollen oder mehrere Auszeichnungen und dann, ah, ah, verwenden Sie den Shortcut-Befehl sein, um und dann wird das voran gehen und auf un bold diesen Port. Und was haben wir noch hier? Wir haben unsere Zahlung. Gehen wir voran und wählen Sie alle diese aus. Machen Sie einen textilen Körper carla, 17 Punkte. Das sieht gut aus. Oder aber in unserem hat automatisch, dass Carla Text. Ändern wir diese Zahlung in Header Rubik 26. Ich werde das einfach ausstrecken. Zentrieren Sie es. Das sieht gut aus. Mal sehen, was wir hier ändern müssen. Wir müssen hier auch nur den Suchtext ändern . Muss Körper Carlos 17 machen. Und wieder, Stellen Sie sicher, dass Sie auf der Linie Dinge richtig für unsere Hauptseiten hier zentrieren. Ich sehe, dass meine Karten bereits die Schriftart angewendet hatten, weil das eine Komponente war. Aber ich denke, alles andere , , außer die Navigation und die oberen Bretter hier sind innerhalb der Seite. Warum gehen wir nicht voran und machen zuerst die obere Leiste in der Navigationsleiste? Also lassen Sie uns weniger schnell in eine der Komponenten hier verdoppeln, oder eine der Instanzen der Navigationsleiste, gehen Sie zu Master-Komponenten. Und dann hier lassen Sie uns die gleichen Telefone hier anwenden. Lassen Sie uns wirklich voran gehen und Rubik als unsere Schriftart wählen, versuchen, alles andere gleich zu halten. Und dann lasst uns weitermachen und einen neuen Header erstellen. Lubick 36 Punkt. Es sieht so aus, als hätte ich hier im Namen einen Fehler gemacht. Es ist eigentlich eine 34-Punkt-Schriftart Also gehen Sie einfach voran und bearbeiten Sie den Stil und ändern Sie den Namen hier auf 34. Von hier aus können Sie sogar eine Beschreibung hinzufügen. Wenn Sie also ein Team haben und mit ihnen arbeiten, können Sie ihnen sagen, worauf dieses Telefon angewendet werden soll. Dinge wie, die ich hier rüber auf die Registerkarte gehen möchte, sind Stellen Sie sicher, dass Sie keine dieser solche haben, aber die Spitze sind selbst. Ich ging nicht weiter und änderte das in Body Carla. 17. Mutig. Beheben Sie dieses und dieses Zentrum. Lasst uns dasselbe tun, diese Halterungsschicht hier und dann dasselbe tun. Lasst uns weitermachen und mein Textjahr zentrieren. Bringen Sie es runter. Sieht so aus, als wären es nur 15 Pixel von unten. Lassen Sie uns also behalten, dass 15 Pixel von unten und stellen Sie sicher, dass das und das auch zentriert sind . Und es sieht so aus, als wäre es. Sie müssen die Statusleiste nicht ändern, da das die Standardschriftarten dort . Uh, wir werden keine Kontrolle darüber haben, also gehen wir zurück zu unseren Mock Ups. Die Navigations- und Tab-Boards hier haben nun die richtige Schriftart. Abgesehen von diesem Knopf hier, also lasst uns das in Body Carlos 17 ändern. Mutig sieht gut aus. Also geht es hier hin. Lassen Sie uns Stil wählen und diesen Stil hier tun. Oder lasst uns eigentlich die 22 Punkte machen. Eins, so so, diese Seite sieht gut aus. Jetzt gehen wir hier weiter. Lassen Sie uns eigentlich voran und machen Sie die E-Mail. Nur dieser hier. Nicht so ist es nicht mutig. Und dann wählen Sie diesen als Carlos 17. Bold Rocky, Lassen Sie uns tun oder eigentlich, wir können nicht einmal rou großen Kopf oder 22. Gehen wir weiter und stellen sicher, dass diese Luft zentriert und auch hier die Adresse geändert hat . Körper Carlos 17. Bold ändern Sie diese an vertikalen Mittelpunkten ausgerichtet. Und ich werde den gleichen Vorgang auch für die anderen beiden Tasten wiederholen. Fühlen Sie sich frei, hier zu pausieren und das auf Ihren Designs zu tun. In Ordnung, also bei den Angewandten denke ich, dass fast alles hier diese neue Schriftart hat , die einzige Ausnahme sind diese beiden Felder hier. Also lasst uns einfach hier reinspringen und sicherstellen, dass diese auch Textil von Carla 17 verwenden und die Vertikale zentrieren. Das Gleiche hier, in Ordnung. Mit unseren zwei neuen Schriftarten, die auf unser Mock Up angewendet werden. Sie können sehen, dass die Dinge jetzt viel besser aussehen. Ah hat einen einzigartigen Geschmack. Die gesamte App und das gesamte Markup fühlen sich an. Und wenn ich auf meine Services-Seite gehe, sehe ich, dass ein Teil des Textes hier zu groß aussieht. Wie zum Beispiel zum Beispiel kann der Datumsstempel hier auf dem Status wahrscheinlich etwas kleiner sein als dieser. Also, wenn wir voran gehen und wählen Sie dies zu Master-Komponente und dann für diese beiden, werde ich tatsächlich den Stil lösen und dann eine Schriftart von 14 verwenden. Lassen Sie uns voran und dass sie tatsächlich die Füllfarbe geändert hat. Ah, ein bisschen später. Ich finde, das sieht gut aus. Also, wenn Sie voran gehen und einen neuen Stil daraus erstellen und vielleicht diesen als Körper Carla 14 tun , wenden Sie nicht das Gleiche auf unseren Statustext hier an. Also lasst uns die Schriftart hier ändern. Und wenn angewendet, die gleiche Füllung 585858 Alles klar, so dass sieht gut aus. Also, jetzt möchte ich einfach schnell zu meinen Stilen wechseln hier drüben für mein Farbschema. Ich habe einen primären Texaner, einen sekundären Text. Also ich denke, wir werden nicht wirklich voran gehen und in das Hinzufügen von Primärtexten und sekundären Textfarbe hier eintauchen . Aber Sie können voran gehen und das tun und dann, ähm, von unseren Komponenten, oder wo auch immer Sie ähnliche Farben für die Tanks von Ihnen hier hinzufügen möchten, anstatt eine benutzerdefinierte hier zu haben , können Sie einfach gehen Sie voran und verwenden Sie tatsächlich ah, Ihre Farbstile. Aber dieses Mal werden Sie in der Lage sein, Farbstil für den Text zu verwenden. Wir werden hier nicht darauf hineinspringen, aber fühlen Sie sich frei, diese auf Ihre Projekte anzuwenden. Wenn ich zurückgehe, sehen die Dinge hier viel sauberer aus. Also, wo immer Sie sehen, die Dinge sehen ein wenig seltsam, Fühlen Sie sich frei, gehen Sie voran und ändern Sie die Farbe, wie wir es getan haben. Schwächung. Sie können die gleichen Farben anwenden, um eine Quelle zu hören, ähm, und wo immer Sie sehen, haben Sie Text, den Sie nicht wollen, dass er so stark wie der andere Text abhebt , fühlen Sie sich frei, voran und wenden Sie mehrere Farbstile basierend auf Ihren Text. Also da haben wir es. Das ist unsere Arten Stile hier, sehr nützlich und Feige ma und auf jeden Fall gehen und wenden Sie es an und denken Sie daran, Sie haben Zugang zu ihm von hier. Wann immer Sie einfach Ihre Leinwand hier auswählen, sollten Sie in der Lage sein, auf Ihre lokalen Stile sowohl Farbstile als auch Textilien hier und dann Von hier aus können Sie tatsächlich voran gehen und sie auch zu machen. Also, wenn Sie sich entscheiden, irgendwann, lassen Sie uns sagen, Ihre Kopfzeile 30 Punkte hier zu machen, wie Sie in meinem Projekt sehen können, wird es sich überall sonst ändern. Ähm, natürlich müssen Sie vielleicht die Größe einiger Textfelder hier anpassen, aber fühlen Sie sich frei, Verbesserungen vorzunehmen und dies auch auf Ihre eigenen Projekte anzuwenden. 32. Letzter Schliff: Also, wenn du so weit hergefallen bist, haben wir so ziemlich unser erstes Mock hier oben fertiggestellt. In dieser Lektion werde ich nur etwas eingraben und veröffentlichen und dann einige der notwendigen Dinge hinzufügen , die wir brauchen. Lassen Sie uns einfach hier voran gehen und lassen Sie diese Änderungen sich frei fühlen, mitzuverfolgen. Ich ermutige Sie auch, hier durch Ihr Ebenenfenster zu gehen. Ah, und es stellt wirklich sicher, dass die Benennung von allem innerhalb Ihrer Ebenen die Gruppierung und all das richtig ist, macht Sinn. Ich werde das in dieser Lektion nicht tun, weil es wahrscheinlich zu viel Zeit in Anspruch nehmen würde, aber auf jeden Fall fühlen Sie sich frei, das zu tun. Ich ermutige immer, dass Sie mit Ihren Entwürfen organisiert bleiben, so dass nicht nur Sie, sondern auch andere Menschen, vielleicht Menschen, mit denen Sie zusammenarbeiten oder Sie ein Team sind, um Sinn für das, was mit Ihrem Design und jedem Ihrer Rahmen. Also das erste, was ich hier tun möchte, ist eigentlich voran und wenden Sie die Statusleiste an. Ah, das haben wir auch hier auf allen anderen Seiten. So haben wir es jetzt nur auf diesen drei Seiten. Also, um das zu tun , gehen wir voran und beginnen mit einer Kartenseite. Lassen Sie uns eigentlich einfach voran gehen und kopieren Sie die Statusleiste von der Anforderungsseite, weil es sehr ähnlich wäre und wählen Sie Ihren Kartenrahmen und führen Sie Befehl V oder Kontrolle V auf Windows. Gehen wir weiter und bringen unsere Suchleiste ein wenig nach unten. Das sieht gut aus. Und dann gehen wir zu unserer Zahlungsseite hier für eine Zahlungsseite. Wir können einfach eine einfache Statusleiste wie diese verwenden. , Weil wir nichts darunter haben,um es verwischen zu müssen. Also mach voran und kopiere das einfach und füge es hier ein. Und dann für unser Tutorial. Schritt Seite hier. Geh weiter und kopiere es hier rein. Wie Sie hier sehen,ist die Statusleiste für diese Seite viel zu dunkel. Wie Sie hier sehen, Normalerweise haben wir auf dunkleren Seiteneine weiße Statusleiste benutzt, also gehen Sie zu unserem IOS. Normalerweise haben wir auf dunkleren Seiten eine weiße Statusleiste benutzt, Sie ich Komponenten Datei hier, Also, wenn Sie hier rüber gehen, wenn Sie noch diese offen haben, sollten Sie in der Lage sein, die weiße Version dieser Statusleiste zu finden. Und dann kannst du einfach voran gehen und das Ganze hier auswählen, und du kannst es einfach von hier kopieren und hier drüben einfügen. Geh weiter und benutzte Shift und Iraker, um sie nach oben zu bewegen. Und dann, natürlich, mit der Befehlsoption K oder Steuerung alta que auf Fenstern, um das als Komponente zu erstellen. Und lassen Sie uns voran und benennen Sie diese 12 Status weit vorwärts Schrägstrich Licht und umbenannt diese 12 Statusleiste Vorwärtsschrägstrich dunkel. also auf diese Weise Wenn Siealso auf diese Weisezu unseren Mock Ups zurückkehren, können wir einfach voran gehen und einfach diese als Lichtversion von der Website auswählen. Wir können das auf unsere Login-Seiten kopieren. Nun, bewegen Sie die Dinge ein bisschen nach unten. Gehen Sie weiter und bringen Sie einfach meinen Führer hierher. Ich denke, das ist gut. Vielleicht schieben Sie das auch ein wenig nach unten , sowie alles andere, was gut aussieht. Nun, Sie haben vielleicht bemerkt, dass wir viele Symbole von, ah, diese Website flache Icon dot com verwenden ah, . Also, wenn Sie nicht die Vollversion oder ein Abonnement mit flachem Symbol haben, ähm, es ist definitiv erforderlich, dass Sie Kredit an die Autoren dieser Symbole geben. Eso gehen Sie weiter zu unserer Ressource ist für das Projekt hier und öffnen Sie dann diese App bekannt Start txt Und dann unten hier, Sie werden sehen. Ah, hier gibt es ein paar Credits, also gehen wir weiter und kopieren das einfach. Ah, und gehen Sie einfach weiter und fügen Sie es irgendwo in unser Projekt hier ein. Ähm, jetzt, natürlich, weil wir nicht, ähm, entwickeln diese App, die sie entwirft, ähm naja, müssen sie nur weiterleiten, wer auch immer Entwickeln dieser Anwendung, um sicherzustellen, dass diese Symbole dort platziert werden, wo sie in ihre Anwendung gehört. Sie werden feststellen, dass das Gehäuse hier ganz Großbuchstaben ist. Warum gehen wir also nicht zu unseren Textoptionen hier, klicken Sie auf die drei Punkte und ändern dann das Gehäuse in Kleinbuchstaben. Wir können dies niedriger hier und auf einer anderen nimmt zu sagen, Icon-Credits sowohl, dass es und setzen Sie es hier für diejenigen, die das ist in ihrem Projekt verwenden wollen . Daher ist es immer wichtig zu tun, wenn Sie Symbole verwenden, die Attributionen erfordern. Das letzte, was ich hier tun möchte, ist nur verbessert Meine Zahlungsseite hier. Es sieht gerade nach Flugzeug, also gehen wir weiter und bringen das, aber in ein bisschen tiefer. Und dann gehen Sie einfach weiter und bringen Sie meine Kreditkarte auch ein bisschen tiefer. Ich möchte voran gehen und eine Art Beschreibung einfügen. Text hier sagen, bitte Kreditkarte für Ihr Konto. Nun, wie Sie sehen können, geht mein Text weiter und weiter, also was Sie tun können, ist auf die Text-Option hier zu gehen, klicken Sie auf drei Punkte und dann gehen Sie weiter und machen Sie und Sie können weitergehen. Ich kann entweder automatische Höhe oder feste Größe wählen. Also, wenn Sie hier „Fix Eyes“ wählen, können wir weitermachen und können wir weitermachen undunseren Text hierher bringen und ihn so anpassen, dass er vielleicht unserem, aber hier, also 25 Pixel von der Seite entspricht. unseren Text hierher bringen und ihn so anpassen, dass er vielleicht unserem, aber hier, Gehen wir weiter und entfernen Sie das von hier. Das sieht gut aus. Gehen wir weiter und bewegen Sie die Kreditkarte ein wenig tiefer. Gehen Sie voran und lösen Sie den Stil und ändern Sie ihn in den richtigen Körper. Carla 17. Und lasst uns hier ein bisschen eine leichtere Art von Telefonen machen, und lasst uns voran gehen und diesen Text hier beenden. Bitte fügen Sie eine Kreditkarte für Ihr Konto für Ihren Wäscheservice verwenden sieht gut aus. Ich möchte sicherstellen, dass dies 3 25 ist und dann kann das Zentrum hier ein wenig abgesenkt werden. Hatte etwas Atemraum für meine Design-Sache. Das sieht besser aus. Vielleicht können wir das auch zentrieren. Perfekt. Irgendwann. Es ist gut, diese Art von Beschreibungsaufforderungen an Ihre Benutzer hinzuzufügen, entweder um ihnen zu sagen, warum diese Kreditkarte hier gesammelt wurde, oder ihnen mitzuteilen, wann diese Kreditkarte verwendet werden könnte . Und das schließt unser Mock Up Design hier für die mobile App ab. Wenn Sie also auch daran interessiert sind, ein Web-Projekt oder eine Web-App zu machen, die gut entwickelt wurde, werden wir das in zukünftigen Abschnitten tun. Jetzt möchte ich dir eine Übung geben, die du für dich selbst machen kannst. Wenn ich hier auf meine Anfrageseite zoomen, werden Sie sehen, dass wir unseren Wäschereiladen haben. Die Idee hier ist, dass sie durch die verschiedenen Geschäfte scrollen und den finden, von dem sie ihren Draw Wäscherei-Service anfordern möchten , und dann klicken sie auf diese Anfrage Service-Schaltfläche. Aber es gibt wirklich kein Feedback zu ihnen im Moment und sind entworfen, um ihnen zu sagen, dass die Bestellung oder die Anfrage hier platziert wurde. Also zögern Sie nicht, unseren Benutzer einen Abschlussstatus oder irgendeine Art von Feedback hinzuzufügen. Vielleicht eine Art Karte, die ihnen mitteilt, dass Ihre Bestellung aufgegeben wurde oder Ihre Anfrage aufgegeben wurde . Ähm, sie werden ziemlich cool sein. Also gehen Sie weiter und fügen Sie etwas hinzu, um den Benutzern mitzuteilen, dass ihre Anfragen gesendet wurden. Ähm, und wenn Sie das tun, zögern Sie nicht, mich in Ihr Projekt aufzunehmen oder mir eine E-Mail zu senden, und ich werde mehr als glücklich sein, auch ein Feedback für Sie zu geben . Großartig. 33. Was kommt als Nächstes?: In Ordnung. Also herzlichen Glückwunsch zum Fertigstellen Ihres ersten mobilen Mock up. Du, ich Das ist erstaunlich. Gemeinsam haben wir an einem sieben Seiten mobilen Mock Up für die saubere Känguru-App gearbeitet. Also, was kommt als Nächstes von hier? Nun, es gibt eine Reihe von Möglichkeiten, wie Sie entweder verbessern oder mit unserem aktuellen Design herumspielen oder Fig MMA erkunden können, und Sie UX-Design noch weiter. Das erste, was Sie tun können, ist, gehen Sie da raus, vielleicht laden Sie Ihre Lieblings-Anwendungen und wirklich von ihnen inspirieren zu lassen. Ein paar weitere Ressource ist, dass Sie online verwenden können umfasst gehen zu Pinterest und die Suche nach Benutzeroberfläche Design und mobiles Design, oder sogar gehen Sie auf die Website Muster dot com, die geschrieben p t tr n s dot com. Von wo aus können Sie eine Reihe von verschiedenen mobilen durchsuchen, Sie weise, dass Sie Inspiration bekommen und vielleicht wenden Sie es auf Ihre eigenen Sie Ich entworfen als auch. Das zweite, was von hier aus nicht getan hat. Es ist tatsächlich voran und erstellen einen Prototyp aus dem Design, das wir zusammengestellt haben. Was Sie mit einem Prototyp tun können, ist, Ihre Anwendung zum Leben erweckt zu sehen und einen interaktiven Prototyp zu erstellen, für den Menschen tatsächlich für Kunden verwendet werden können. Ob es sich um Investoren für Ihre eigene Bewerbung handelt oder was auch immer der Fall sein mag. Sie können diesen Prototyp Entwicklern und die Hälfte auf Kreta zeigen. Natürliche Anwendung daraus. Und natürlich, wenn Sie Ihr Wissen über U. S u X versuchen Web Sie ich entwerfen wollen , ist definitiv ein guter nächster Schritt, weil es Ihnen den Vorteil geben wird , sowohl mobile als auch Web-Design zu kennen. Und das ist wirklich wichtig, weil viele Kunden und viele Verpflichtungen an diesen Tagen sowohl eine Web- als auch mobile Version erforderlich sind. Also, wenn Sie diese Fähigkeiten eingestellt haben, wird es Ihnen definitiv helfen. Jetzt werde ich einen Kurs haben alle abgedeckt, Prototyping Sharing und sogar ein Web tun, das ich in den kommenden Wochen entworfen. So fühlen Sie sich frei, die einmal ihr Leben zu überprüfen und, wie immer, vielleicht bemerken Hallo, clever bei gino dot com. Sachen wie diese fühlen sich frei, jedes Design zu teilen, das Sie haben oder irgendwelche Fragen, die Sie haben, und ich werde glücklich sein, sie mit Das sagte zu beantworten, Ich freue mich darauf, Sie in einer Zukunft zu sehen. Natürlich,