Der vollständige Adobe XD UI/UX Kurs – Design Apps und Prototypen

1. Einführung: Hi da. Willkommen beim kompletten Adobe XD UX UX-Kurs. In diesem Kurs lernen wir, wie man schöne Schnittstellen für Mobilgeräte und Web entwirft schöne Schnittstellen für Mobilgeräte und Web entwirft und wie man sie in interaktive Prototypen verwandelt , die wir mit unseren Teammitgliedern teilen können und wie man sie in interaktive Prototypen verwandelt, die wir mit unseren Teammitgliedern teilen können Kollegen und unsere Kunden, als er Nemo Tommy war, und ich bin Ihr Ausbilder für diesen Kurs. In den letzten 12 Jahren wurden Dutzende von Mobil- und Webprojekten für den Service für meine eigenen und anderen Kunden ausgezeichnet Mobil- und Webprojekten für den Service für meine eigenen und anderen Kunden Bergung wurde auf Websites wie Forbes vorgestellt. Produkte zu kreieren ist meine Leidenschaft und ich liebe es, etwas davon in diesem Kurs mit Ihnen zu teilen. In diesem Kurs werden wir an echten Projekten für ein Lebensmittellieferunternehmen namens Healthy Bites arbeiten an echten Projekten für . Die erste wird eine mobile App sein , in der Benutzer diese App tatsächlich verwenden können , um Lebensmittel für die Lieferung zu bestellen. Und die zweite wird eine Website sein, auf der gezeigt wird, was gesunde Bisse potenziellen Kunden zu bieten haben. Wir werden das alles in Adobe XD machen, wenn du anfängst, keine Sorgen zu machen. Dieser Kurs richtet sich an Anfänger bis hin zu Experten, die wir seit mehreren Jahren entwerfen. Aber jetzt wollen sie eine neue Software lernen. Wir werden damit beginnen , ein Meer zu installieren und alle Funktionen zu durchlaufen, um die Tools zu beenden, auf die wir Zugriff haben. Und dann springen wir direkt in die Projekte ein und lernen wie Sie Dinge wie Komponenten, Wiederholungsraster und Statistiken verwenden , um unseren Designprozess schneller zu gestalten. Wir werden diese Vorlage von Apple sogar verwenden, um die iPhone-App-Designs zusammenzustellen. Während wir lernen, wie das geht, werden wir auch das Branding erkunden und lernen, wie man ein Logo erstellt, wie man ein Farbschema und einen gewohnten Satz für unser Projekt zusammenstellt . Sobald wir unsere Designs poliert haben, werden wir lernen, diese Designs tatsächlich aus XC zu exportieren, sie mit vielleicht Teammitgliedern zu teilen, diese Ihre Kunden zu nennen und auch zu erfahren, wie wir erstellen können interaktive Prototypen , die wir sogar auf unseren eigenen Mobilgeräten testen können , die super cool sind. Egal, ob Sie das nächste Designpraktikum oder den nächsten Designkunden für Ihr Unternehmen kombinieren möchten das nächste Designpraktikum . Und dieser Kurs ist genau das Richtige für dich. Wenn Sie bereit sind loszulegen, dann springen Sie direkt ein und wir sehen uns in diesem Kurs. 2. Was ist Adobe XD?: Wir sind fast bereit, einzusteigen und Adobe XD zu erkunden. Aber bevor wir das tun, wollen wir schnell durchgehen, was es Stephen geben wird , damit wir eine Vorstellung davon haben, was wir erwarten werden , und von zukünftigen Vorträgen. Was ist Adobe XD? Adobe ICSI ist eine App-basierte Designsoftware , mit der Sie im Wesentlichen Mobil- und Web-Apps in einer benutzerfreundlichen Umgebung entwerfen können Mobil- und Web-Apps in einer benutzerfreundlichen Umgebung speziell für das Entwerfen von Mobil- und Web-Apps entwickelt wurde. Jetzt können Sie Adobe XD natürlich für andere Dinge wie ein Spieldesign oder einfach nur für allgemeines Grafikdesign verwenden für andere Dinge wie . Der Hauptzweck ist jedoch für Mobil- und Web-Apps. Und genau daran werden wir auch in diesem Kurs arbeiten. Adobe XD verfügt über eine wirklich leistungsstarke Echtzeit-Prototyping-Funktion, die wir untersuchen werden. Sobald wir unsere App entworfen haben, erstellen wir einen Prototyp daraus. Im Wesentlichen können Sie mit Ihrem Prototyp ein Gefühl davon bekommen, wie sich diese Mobile- oder Web-App für einen Benutzer anfühlt oder aussieht , sobald sie fertig ist. Dazu gehört das Verbinden aller Bildschirme, die Sie entworfen haben, damit wir einem Kunden oder einem Kollegen eine Vorstellung davon geben können , wie dieses Produkt oder diese App aussehen wird, sobald es entwickelt wurde Diese Funktion spart Ihnen viel Zeit, wenn es darum geht, eine mobile App, insbesondere für die Entwickler, zu erstellen , um dieses Design tatsächlich in die Tat umzusetzen . Denn mit einem Prototyp können wir tatsächlich ein Gefühl dafür bekommen, was wir eigentlich von der App wollten, bevor tatsächlich eine einzige Codezeile schreiben. Und es wird XT machen es Ihnen sehr einfach, Ihre Entwürfe mit Kunden und Kollegen zu teilen. Damit es das Teilen bestimmter Zeichenflächen beinhaltet , wenn Sie möchten oder ein ganzes Projekt oder sogar teilen können, Ihren Prototyp mit anderen Personen und das Erstellen mehrerer Stockwerke für sie um zu sehen, worum es in der App geht. Und dann werden wir alle Funktionen zum Teilen und Exportieren des gesamten Kurses untersuchen Funktionen zum Teilen und . Jetzt ist Adobe XD für eine kostenlose siebentägige Testversion verfügbar, für die Sie sich anmelden und verwenden können, und dann können Sie sie tatsächlich für 999 US-Dollar pro Monat erhalten . Und das ist nur eine einzige App-Abonnementgebühr für nur Adobe XD. Wenn Sie jedoch mehr von Adobe möchten, wenn Sie Photoshop oder Premiere oder andere Tools installieren möchten, können Sie dies auch zu einem etwas höheren Preis tun. Aber es könnte sich lohnen, wenn Sie tatsächlich ein anderes Design untersuchen oder eine andere Software von Adobe stammt. Und dann gehen wir in der nächsten Vorlesung die unterschiedlichen Preise durch und wie Sie sie tatsächlich auf Ihrem Computer installieren . Also sehe ich dich dort. 3. So installierst du Adobe XD: Bereit für den Einstieg durch die Installation von Adobe exceed. Der erste Schritt besteht darin, Ihren Browser zu öffnen. Wir können uns über die Website von Adobe für Adobe XD anmelden. Alles, was Sie tun müssen, ist zu Adobe.com Slash XD vorwärts zu gehen und Enter zu drücken. Sobald die Website geladen wird, werden Sie für Adobe XD auf diese Seite gebracht , wo sie erklären, wie sie funktioniert, und geben Ihnen ein paar Videos darüber , wie Sie App-Design, Webdesign oder App-Design durchführen können App-Design, Webdesign oder App-Design Marken- und Spieldesign mit Adobe XD, was ziemlich cool ist, können Sie sich diese Animationen ansehen, um zu sehen was durchlaufen wird. Das ist genial. Und wenn Sie hierher kommen, können Sie tatsächlich einige der Funktionen entdecken , die es von hier aus hat. Jetzt werden wir natürlich nicht zu viele Details mit den Funktionen auf der Website eingehen , da wir alle diese Funktionen während des Kurses tatsächlich durchgehen werden . Also lasst uns hier zur Hauptseite zurückkehren. Und nachdem Sie hier nach unten gescrollt haben, können Sie sehen, dass dies der Preis ist, den ich in der vorherigen Vorlesung erwähnt habe . Wenn Sie nur Adobe XD selbst verwenden möchten, ist es bei 999 US-Dollar pro Monat erhältlich, was ich denke, es lohnt sich ziemlich, wenn man bedenkt, dass ein USA, Ihnen eine Menge Funktionen. Und du kannst die einzelne App benutzen. Sie müssen nicht alle Apps abonnieren , Adobe Creative Cloud. Aber wenn Sie alle Apps und Creative Cloud verwenden möchten , einschließlich Photoshop, Illustrator und so weiter. Sie können diese Option hier abonnieren, die bei 5299 pro Monat beginnt. Wie ich bereits erwähnt habe, wird das Adobe XD natürlich mit einer siebentägigen Testversion geliefert. Also dort werden wir hier für diesen Kurs verwenden . Wenn Sie Adobe XD nicht haben und es nur testen. Oder Sie möchten diesen Kurs durchlaufen und ihn lernen, bevor Sie ihn kaufen Was ich empfehle, dass Sie einfach auf die kostenlosen Testversionen klicken können . Was wir machen werden. Sobald Sie dies getan haben, werden Sie ein paar Fragen an Einzelpersonen, für Schüler und Lehrer gestellt, denen Sie möglicherweise einen Bildungsrabatt erhalten können . Es erfordert einen gültigen Ausweis, daher müssen Sie ihm möglicherweise einen Ausweis senden um tatsächlich zu zeigen, dass Sie ein Student sind. Oder Sie können sich auch als Unternehmen anmelden. Aber wir werden weitermachen und es einfach für Einzelpersonen verwenden. Und klicken Sie auf Weiter. Wer Sie gebeten hat, erneut einen Plan auszuwählen, Sie können nur Adobe XD oder alle Creative Cloud-Apps auswählen . Im Moment wählen wir nur XD für den Zweck dieses Kurses aus. Wenn ich auf Weiter klicke, werden Sie gefragt, ob Sie eine monatliche Option oder ein Jahr wünschen, die Option für die Abrechnung. Wir werden im Monat fortfahren. Und natürlich werden wir diese siebentägige Testversion von Anfang an nutzen . Es wird also nicht wirklich weitergehen und aufladen. Ist Carter zu dieser Zeit irgendetwas? Wir klicken auf Nein, dank dieses zusätzlichen Angebots , das er Ihnen gibt. Im nächsten Schritt werden Sie nur nach einer E-Mail-Adresse gefragt. Also gebe ich hier meine E-Mail-Adresse ein. Wir richten Sie einfach mit einem Konto ein. Wenn Sie bereits ein Adobe-Konto haben, fragen Sie nach Ihrem Passwort. Andernfalls werden Sie aufgefordert, sich hier anzumelden und ein Passwort hinzuzufügen. Nehmen Sie sich die Zeit, um Ihr Konto einzurichten. Wenn Sie noch kein Adobe-Konto haben, , werden Sie nach dem Aufrufen der Checkout-Seite fortgesetzt und Sie aufgefordert Zahlungsmethoden einzugeben. Lassen Sie mich also weitermachen und klicken Sie auf Abonnieren. Von hier aus können Sie sehen, wann Sie mit dem Aufladen beginnen. Also habe ich die kostenlose Testversion bis zum 16. Dezember verfügbar. Im Wesentlichen haben Sie bis zur Testversion und dem Datum, das Sie hier sehen, kostenlosen Zugriff auf Adobe XD . Bis dahin können Sie das Produkt komplett kostenlos nutzen. Und danach werden wir Ihnen basierend auf Ihrem Abonnement in Rechnung stellen. Also lasst uns weitermachen und klicken Sie auf Erste Schritte. Damit Adobe XD installiert werden kann, müssen Sie Creative Cloud installieren , mit der Sie installieren können. Es handelt sich um Produkte und halten sie auf Ihrem Computer auf dem neuesten Stand. Machen Sie weiter und lassen Sie Creative Cloud öffnen , damit sie hier installiert werden kann. Sobald sich Creative Cloud öffnet, wird es so aussehen. Und Sie können von hier aus sehen, dass XD installiert wird. Jetzt, weil ich es bereits installiert habe, wird es weitergehen und es aktualisieren. Da ich es nicht aktualisiert habe, wird es aktualisiert, anstatt es zu installieren. Aber für Sie ist zu sagen, installieren Sie, wenn Sie XD zum ersten Mal auf Ihrem Computer installieren. Geben Sie dem also etwas Zeit und dann sobald es vollständig abgeschlossen und aktualisiert ist, öffnen wir es und erforschen es in den nächsten Vorträgen. 4. Verwalten deines Adobe Account: Bevor wir in Adobe XD springen und erforschen, worum es geht und es benutzen. Ich wollte nur schnell ein kurzes Video machen , um zu erklären, dass zu jedem Zeitpunkt während der Studie oder vor Ablauf Ihrer Testphase erklärt wird, wenn Sie entscheiden, dass es nicht für Sie entschuldigt wird oder Sie es einfach nur lernen möchten. Sie können Ihren Tarif jederzeit über die Adobe-Kontowebsite verwalten . So können Sie zu jedem Zeitpunkt in Ihrem Browser zu account dot adobe.com gehen . Und von hier aus können Sie Ihren Plan sehen. Wenn Sie sich also für die kostenlose Testversion von Adobe XD entscheiden, können Sie tatsächlich sehen, wie viele Tage Sie noch haben, wenn Sie wissen, dass die Abrechnungsmethode Ihnen berechnet wird und wie viel Ihnen zu welchem Zeitpunkt berechnet wird. Wenn Sie sich also vor diesem Zeitpunkt entscheiden, Ihre Abrechnung zu beenden oder Sie stornieren oder möglicherweise upgraden möchten , um Zugang zu weiteren Werken zu haben, können Sie hier auf Plan verwalten klicken. Und sobald Sie auf Plan verwalten klicken, können Sie entweder Ihren Plan ändern oder Ihren Tarif von hier aus stornieren . Und ich habe gerade dieses schnelle Video erstellt, nur um sicherzustellen, dass Sie nicht in Abrechnungszyklen gefangen sind. Weil ich es gehasst habe, wenn das mit kostenlosen Testversionen passiert, wenn das Ende ist, weil es mir passiert ist und ich bin mir sicher, dass es einigen von Ihnen passiert ist. Also mache ich nur dieses Video, um Ihnen mitzuteilen, dass jedem Zeitpunkt innerhalb Ihrer siebentägigen Testversion Sie zu jedem Zeitpunkt innerhalb Ihrer siebentägigen Testversion ohne Konsequenzen stornieren können. Aber ich hoffe, dass Sie Adobe XD dort nützlich genug finden Sie verwenden es weiter. Wenn Sie jetzt bereit sind einzusteigen, werden wir in der nächsten Vorlesung Adobe XD erkunden . 5. Der Datei-Browser: Wenn Sie also Creative Cloud geöffnet haben, großartig. Wenn nicht, stellen Sie sicher, dass Sie es öffnen Sie können einfach Creative Cloud von Ihrem Rampenlicht aus durchsuchen . Und du machst weiter und öffnest das. Ich habe es bereits geöffnet, jetzt solltest du XD unter deinen installierten Apps finden können . Wenn Sie nicht auf dieser Seite sind, können Sie einfach darauf zugreifen, indem Sie hier auf Alle Apps auf der linken Seite klicken. Und dann geh weiter und klicke auf Öffnen. Und ich werde einfach weitermachen und dein Adobe XD öffnen. Sobald Sie XY geöffnet haben, müssen Sie Creative Cloud nicht mehr geöffnet haben , damit Sie dieses Fenster schließen und einfach nur XD öffnen lassen können. Dies ist also die erste Seite , die Sie in XD sehen, ist Ihr Dateibrowser und im Wesentlichen auf der Sie auf alle Ihre Dateien zugreifen können. Was arbeiten wir uns von oben links hier nach unten rechts, damit wir durchgehen können, was dieser Dateibrowser zu bieten hat. Ganz oben links sehen Sie hier eine neue Dateioption. Von hier aus können Sie also neue Dateien erstellen , in denen Sie Ihre Mobil- und Web-Apps oder was auch immer Sie entwerfen können . Sie können von hier aus Dateien öffnen. Wenn Sie also bereits haben, ob es sich um eine Photoshop-Datei, diese Skizzendatei oder eine andere XD-Datei handelt. Du kannst sie von hier aus öffnen. Sobald Sie darauf klicken können, werden Sie aufgefordert, diese Datei zu finden und von dort aus zu öffnen. Dies ist unsere Homepage , wo wir hier sind. Von der Homepage aus können Sie auf Starten eines neuen Dokuments zugreifen, aber schneller. Wenn Sie also bereits wissen , in welchem Gerät Sie entwerfen werden. Also lasst uns sehen. Ich werde für eine Displaygröße des iPhone 12 Pro Max entwerfen . Ich kann weitermachen und darauf klicken. Und was das tun wird, ist die Datei zu öffnen und die genauen Formate oder die Größe für die Zeichenflächen für mich zu generieren die genauen Formate oder , was wir in der nächsten Vorlesung machen werden. Lassen Sie uns das also aufhalten. Aber das ist großartig, denn auf diese Weise war die ganze Größe hier drüben. Sie müssen es nicht wirklich online nachschlagen. Und das macht unseren Designprozess viel schneller. Wenn Sie für ein Webprojekt entwerfen, ist dies in der Regel die Größe, die wir für 1920 mal 1080 Pixel entworfen haben . Jetzt können Sie diese beiden anderen Optionen verwenden , die weniger verbreitet sind, aber auch verfügbar sind. Sie können fortfahren und ein Dokument für Instagram-Geschichten erstellen . Instagram-Posts, Twitter, Facebook-Post, sogar YouTube-Videocover. Sie haben also auch Zugang zu diesen. Wenn Sie für ein Branding-Design arbeiten oder ein benutzerdefiniertes Design erstellen können, indem Sie die Breite und Höhe Ihrer Zeichenflächen eingeben . Und wir werden das für Sie generieren. Hier unten gibt es x t Ihnen einen Link zu einigen ihrer Artikel, in denen Sie einige der verfügbaren Funktionen untersuchen können . Aber natürlich werden wir diese Funktionen und viel mehr Tiefe während des gesamten Kurses durchgehen . Wenn du hierher gehst, auf der linken Seite, siehst du deine Akten. Da ich also keine Dateien erstellt habe, sehe ich hier nichts. Aber sobald ich anfange, an neuen Dateien zu arbeiten, wird es hier auftauchen. Und ich kann von hier aus neue Ordner erstellen, um meine Dateien zu organisieren oder sie als Listen oder Raster zu sehen. Und wenn andere Leute Projekte mit mir mit meinem Creative Cloud-Konto geteilt haben , kann ich sie von hier aus sehen. Wenn ich Designs veröffentlicht habe, kann ich die Links hier für Projekte verwalten , die ich erstellt, veröffentlicht oder geteilt habe. Und wenn ich irgendwelche gelöschten Dateien habe, wird es weitergehen und hier auftauchen. Was großartig ist, denn wenn Sie versehentlich eine Datei löschen, an der Sie arbeiten, können Sie hier von Sorgen darauf zugreifen, wie ein Mülleimer auf Ihrem Computer. also kurzerhand Gehen wir also kurzerhand zum Startbildschirm zurück und lernen, wie wir tatsächlich neue Dateien erstellen können in der nächsten Vorlesung tatsächlich neue Dateien erstellen können. 6. Das Layout: Jetzt, da wir mit unserem Dateibrowser hier in Adobe XD vertraut sind , warum lernen wir nicht, wie wir neue Dateien erstellen und schnell das Layout der Software durchgehen können . Wie in der vorherigen Vorlesung erwähnt, am einfachsten, eine neue Datei zu erstellen ist es am einfachsten, eine neue Datei zu erstellen, indem Sie hier auf eine neue Datei klicken. Wenn Sie nun, wie erwähnt, mit einem bestimmten Gerät arbeiten , können Sie auf eine dieser Optionen klicken. Wenn Sie einfach auf Neue Datei klicken, was wir gerade tun werden, öffnet XD ein Fenster für Sie, genau wie dieses hier. Jetzt verwendet es standardmäßig die Web-Pixelgröße von 1920 für die Zeichenflächen. Wenn ich also schnell nach Hause gehe , nur um dir die anderen Optionen zu zeigen, wenn ich an einem mobilen Projekt arbeiten möchte, klicke ich hier auf diese iPhone 12 Pro Max Option. Dann wird es weitergehen und eine neue Datei generieren. Und die Zeichenfläche hier wird eigentlich ein iPhone 12 Pro Max Size anstelle der Website sein. Das ist also alles, was es bedeutet, alle Unterschiede zwischen diesen Optionen im Dateibrowser. Jetzt werde ich diese Datei schließen, die ich habe, und fahre einfach mit dieser Datei fort , die wir hier haben. Auch hier können Sie diese Datei erstellen, indem Sie einfach in Ihrem XD-Dateibrowser auf neue Datei klicken. Wichtigste zuerst: Dies ist der Name unserer Datei. Standardmäßig generiert Adobe einen unbenannten, gefolgt von einem Bindestrich sowie Datum und Uhrzeit, zu der die Datei erstellt wurde. Um diesen Dateinamen zu ändern, können Sie einfach hier drüben doppelklicken. Wir nennen das einfach unsere erste Akte. Nur um der Lektion willen. Wir fahren fort und klicken auf Speichern. Und jetzt, wie Sie sehen können, wurde durch die erste Datei ersetzt, die jetzt der neue Name unserer Datei ist. Dieses kleine Cloud-Symbol zeigt nur an, dass wir mit dem Web verbunden sind und dieses Projekt automatisch in der Creative Cloud gespeichert wird , wo Ihre Dateien standardmäßig gespeichert werden. Cool. Wenn wir uns von oben arbeiten, können wir von hier aus zu unserem Dateibrowser oder zu Hause zurückkehren . Dies ist der Prototyping-Modus , den ich kurz erwähnt habe, in dem Sie Prototypen erstellen und eine Verbindung zu Ihren Zeichenflächen herstellen können. Von hier aus können Sie Ihre Projekte einfach teilen, indem Links erstellen, auf denen entweder jemand darauf zugreifen kann oder nur bestimmte Personen all das während des Kurses erkunden Wir kehren zurück zu den Design Tab und fahren Sie auf der rechten Seite fort, sich durch die rechte Seite arbeiten. Sie sehen ein kleines Teilen-Symbol, Sie sehen ein kleines Teilen-Symbol in dem Sie die E-Mail-Adresse für jemanden hinzufügen können , der Sie waren arbeiten an dieser Dateibreite und das lädt sie zu dem Projekt ein, in dem sie mit Ihnen daran zusammenarbeiten können. Mithilfe der Gerätevorschau können wir unsere Designs tatsächlich auf einem tatsächlichen Gerät sehen. Und wenn wir zum Prototyping-Bereich kommen, werden wir das auf jeden Fall erkunden und es ist super cool. Oder hier haben Sie die Möglichkeit, Ihren Prototyp einfach auf Ihren Prototyp einfach dem Desktop anzuzeigen, den Sie haben, anstatt ihn in einem tatsächlichen Gerät zu öffnen. Und ganz rechts haben wir hier die Zoomstufe, sodass wir verschiedene Zoomstufen auswählen können. Oder ich scrolle einfach mit deinem Trackpad oder deinem Scrollrad an deiner Maus rein und raus . Cool. Jetzt haben wir ganz links hier drüben ein kleines Werkzeugbedienfeld, in dem wir auf bestimmte Formen klicken und sie in unsere Zeichenfläche zeichnen können . sich aus Gründen dieser Lektion keine Sorgen darüber, genau dem zu folgen, was ich hier mache. Ich zeige dir nur ganz kurz, was XD zu bieten hat. Wenn wir es ausführlich durchgehen, haben Sie eine Vorstellung davon, womit wir arbeiten. Im Werkzeugbedienfeld können wir Ellipsen, Polygone oder Dreiecke, Linien erstellen . Wir können ein Stiftwerkzeug verwenden, um benutzerdefinierte Formen zu erstellen. Wir können einen Text verwenden, um Texte in unsere Zeichenfläche zu schreiben. Wir können diesen kleinen Button benutzen , um eine neue Kunsttafel zu erstellen. Wenn du also einfach auf die rechte Seite gehst, kann ich ein Kunstbrett nach meinem Geschmack mit jeder Größe erstellen , die ich will. Oder wenn ich eine bestimmte Größe für eine bestimmte Gerätegröße möchte, kann ich das kleine Panel rechts hier verwenden , um eine Größe auszuwählen. Und hier drüben haben wir ein bisschen Zoom. Im Wesentlichen können Sie damit nur zoomen, ähnlich der Zoomoption hier drüben, aber Sie geben Ihnen nur diese Lupe, in der Sie auf einen bestimmten Teil zoomen können . Und wir werden einige der Zoom-Funktionen später auch genauer untersuchen. Mit diesen drei kleinen Tasten hier unten können Sie dieses Panel wechseln, das wir haben. Sie können über das Ebenenbedienfeld gehen, das tatsächlich alle Ihre Kunsttafeln sowie Objekte innerhalb dieser Zeichenflächen in diesem kleinen Panel zeigt Objekte innerhalb dieser Zeichenflächen . Wenn ich also einfach zu diesem kleinen Symbol zurückkehre, kann ich alle meine Formen als Klick durch diese Kunsttafel oder nur alle meine Kunsttafeln im Ebenenbedienfeld sehen als Klick durch diese Kunsttafel oder nur alle . wir jetzt an Projekten arbeiten, werden Sie sehen, wie nützlich dieses Ebenenbedienfeld sein kann , um Ihr Projekt zu sortieren und zu organisieren. Dann haben wir von hier unten Bibliotheken. Jedes Mal, wenn wir bestimmte Farben oder Zeichenstile wiederverwenden , können wir diese unserer Bibliothek hinzufügen und diese sogar freigeben oder veröffentlichen, damit wir es können verwenden Sie es in anderen Teams oder anderen Projekten. Einfach super cool, das werden wir in ein bisschen erforschen. Jetzt haben wir endlich ein Plug-In hier , in dem Sie tatsächlich Plugins entdecken können. Und wenn ich hier auf dieses kleine Plug-In-Symbol klicke, öffnen wir die Plugins. Seite. Plugins ermöglichen es uns normalerweise, unseren Designprozess zu automatisieren oder uns dabei zu helfen unsere Designproduktivität wirklich zu steigern, werden einige Plug-Ins erforschen, während wir den Kurs durchlaufen. Also halte auf jeden Fall Ausschau danach. Lasst uns weitermachen und das hier schließen. Jetzt arbeiten wir uns auf der rechten Seite hier drüben , wo wir unser Eigenschaften-Panel haben. Dieses Panel hier ändert sich entsprechend dem, was Sie in Ihrem Canvas ausgewählt haben. Und wenn ich dies vorher oder diesen mittleren Teil nicht erwähnt habe , genau hier, wo Sie alle Ihre Zeichenflächen und Ihre Objekte in Ihren Formen haben und alles als Leinwand und Ihr Projekt bezeichnet wird, Diese Leinwand ist wirklich unendlich, also kannst du so viele Objekte hinzufügen, wie du möchtest, und sie wird weitergehen und einfach größer werden. Es ist irgendwie wie ein kleines Universum für deine Entwürfe. Wenn du so darüber nachdenken möchtest. Ich weiß nicht warum, aber das ist nur eine Analogie, die ich gerne verwende. Wenn ich nun eine Zeichenfläche auswähle, indem ich hier auf den Namen klicke, können Sie sehen, dass wir einige Optionen erhalten , einschließlich Transformationsoptionen. So kann ich die Breite dieses Frames hier ändern , indem ich einfach ein neues Breitenpixel eingebe. Ich kann die Höhe ändern. Ich kann wählen, ob ich die Farbe dieses Kunsttafels füllen möchte. Ich kann sogar Raster auf meinen Kunsttafeln erstellen. Das ist also das Eigenschaftenbedienfeld , wenn Sie eine peinliche Auswahl haben. Wenn Sie jedoch ein Objekt ausgewählt haben, werden Sie feststellen, dass sich das bald ändern wird. Und wir geben Ihnen mehr Möglichkeiten, mit mehr Konfigurationen Ihres Objekts zu arbeiten. Jetzt werden wir all diese Optionen im Detail untersuchen , während wir lernen wie man Formen und dergleichen kreiert. Und wenn Sie den Text auswählen, erhalten Sie natürlich verschiedene Optionen wie Ihre Schriftart, Ihre Schriftgröße usw. Jetzt werden Sie feststellen, dass es bestimmte Dinge gibt , die unter den meisten Objekten oder Texten oder Kunsttafeln geteilt werden . Und einige von ihnen könnten sowohl Effekte oder Erscheinungen als auch die Transformation enthalten . Normalerweise werden diese zwischen vielen Objekten geteilt, aber es gibt verschiedene Dinge wie Texte, die nur angezeigt werden, wenn Sie einen Text in Ihrem Canvas ausgewählt haben. Und wenn Sie nichts ausgewählt haben, dann wird es weitergehen und einfach so ziemlich nichts zeigen. Eine weitere coole Sache: Wenn Sie etwas ausgewählt haben, können Sie die Ausrichtung innerhalb der Zeichenfläche anpassen . Und wir werden dies untersuchen , wenn wir Ausrichtung und Verteilung in XD lernen . Cool. Das ist also nur ein kleiner Überblick darüber, womit wir es in Bezug auf unser Layout hier zu tun haben. Ich hoffe, du bist jetzt ein bisschen vertraut, aber wir werden jeden Teil im Detail durchgehen. Machen Sie sich also keine Sorgen, wenn Sie bisher nicht viel verstanden haben, wird sich das bald ändern, wenn wir mit dem Entwerfen beginnen und uns mit XD vertraut machen. Im folgenden Abschnitt werden wir die meisten dieser Panels, über die wir in dieser Vorlesung gesprochen haben, ausführlich eingehen . Also sehe ich dich dort. 7. Die Menü-Optionen: Ohne sehr auf die Details einzugehen, wollte ich auch die Menüoptionen durchgehen , die Adobe XD ganz oben hat. Ich bin offensichtlich auf einem Mac-Computer, aber wenn Sie Windows haben, dieses Menü hier drüben, wird es wahrscheinlich anders für Sie sein. Irgendwo wird es hier drüben unter einem Hamburgermenü geben. Also mache ich hier einen Screenshot, mit dem Sie sehen können, von wo aus Sie auf dasselbe Menü zugreifen können. Wenn Sie also auf ein Windows fallen, sich dessen bewusst sein, dass Sie sich etwas ändern. Die Menüoptionen sollten jedoch immer noch ähnlich sein. So können Sie immer noch gleich herumfallen, unabhängig davon, ob Sie Excel auf einem Windows oder Mac verwenden, arbeiten uns von links rechts neben unserem Menü. Zuerst haben wir Akte. Von hier aus können wir neue Dateien erstellen, Dateien öffnen und von Ihrem Computer aus öffnen. Wenn Sie eine Datei auf Ihrem Computer öffnen können, können Sie auf aktuelle Projekte zugreifen. Wenn Sie mehrere Projekte haben, können Sie hier schnell zwischen ihnen wechseln. Da wir jedoch nur ein Projekt geöffnet haben, wird es Ihnen nur dieses eine Projekt zeigen. Sie können UI-Kits aus diesem Menü hier abrufen, die im nächsten Abschnitt dieses Kurses durchlaufen werden. Wir können unsere Bibliotheken, über die wir in der vorherigen Vorlesung gesprochen haben, sehr kurz verwalten über die wir in der vorherigen Vorlesung gesprochen haben . Er kann weitermachen und diese Ihre Adobe XD-Datei hier speichern . Wenn Sie es irgendwo speichern möchten, werden bestimmte Projekte standardmäßig in der Creative Cloud gespeichert, die unter Ihren Dateien angezeigt wird. Von der Datei aus können Sie auch auf Ihren Dokumentverlauf zugreifen. Jetzt haben Sie auch diesen Dokumentverlauf Zugriff , indem Sie hier auf diesen kleinen Pfeil klicken. Es wird weitergehen und Ihnen die verschiedenen Versionen Ihres Projekts zeigen , während Sie im Laufe der Zeit daran gearbeitet haben. Sie können also fortfahren und nach Zeit auf verschiedene Versionen klicken , um zu sehen, was sich geändert hat. Jetzt natürlich, weil ich mich nicht wirklich sehr verändert habe. Es ist gerade dasselbe zwischen den beiden. Aber wenn Sie weitere Änderungen in Ihrem Projekt vornehmen, werden Sie sehen, dass sich der Dokumentverlauf summiert, was ziemlich nützlich ist, wenn Sie, sagen wir, Sie haben einen Fehler gemacht und zu einem bestimmten Punkt zurückkehren möchten Zeit. Unter Bearbeitungsoptionen haben wir Rückgängig gemacht, wiederholen Sie Ihre übliche Ausschneidekopie und fügen Sie ein. Aber wir haben auch etwas namens Paste Aussehen, was cool ist. Wir werden uns im Wesentlichen erlauben nur eine Erscheinung eines Objekts zu kopieren, aber nicht das Objekt selbst. Wir werden das durchgehen, während wir unsere Formwerkzeuge erforschen. Und wir haben das übliche Löschen, wählen Sie alle aus, heben Sie alle auf und so weiter. Bei unserer Objektoption haben wir Group, Gruppierung aufheben. Wenn Sie also mit mehreren Objekten arbeiten, können wir sie zusammenfassen und die Gruppierung aufheben. Und das wird auch im Ebenenbedienfeld angezeigt. Sie können Objekte von Ihren Kunsttafeln, Ihrer Leinwand, sperren oder hoch . Sie können Ihrem Asset-Panel Farben hinzufügen. Bei Zeichenstilen können Sie von hier aus Komponenten erstellen, die es uns ermöglichen, während unseres gesamten Projekts wiederverwendbare Objekte zu erstellen . Und wir werden Komponenten untersuchen, weil es eines der nützlichsten Dinge in XD ist. Wenn Sie mit einer Komponente arbeiten und wir sie auf die Hauptbühne zurücksetzen wollten. Das können wir von hier aus machen. Wir können Dinge für den Export markieren. an mehreren Dingen zu arbeiten, können wir also diejenigen auswählen, die wir exportieren möchten , und sie für den Export bereitstellen Wir können Masken erstellen oder Raster wiederholen. Von hier aus. Wir werden beide Optionen in diesem Kurs durchgehen. Wir haben einige Pfadoptionen , die wir durchgehen werden. Wir haben SMS. Wenn Sie Ihren Text fett und kursiv gestalten möchten , können Sie dies von hier aus tun. Wir können Dinge arrangieren. Also können wir das auch in unserem Ebenenbedienfeld tun, aber wenn Sie eine Abkürzung wünschen, können Sie auch hierher kommen, um Dinge nach vorne zu bringen oder Dinge voranzubringen. Rückwärts. Wir können Sachen transformieren, indem sie horizontal und vertikal umdrehen. Hier können wir die Dinge links, Mitte, rechts, oben, Mitte und unten ausrichten , die wir auch Zugriff haben. Hier oben. Wir können Sachen horizontal und vertikal verteilen. Dies wird also die Dinge gleichmäßig auseinander bringen. Und wir werden das durchgehen, da wir etwas über Verteilung und Ausrichtung lernen , die nicht unter unserem Plugin stehen. Wie erklärt. Plugins ermöglichen es uns, unsere Designarbeit zu automatisieren und die Dinge für uns viel schneller zu machen. Also werden wir auf jeden Fall ein paar Plugins in unseren Designs verwenden. Und sobald Sie einige Plugins installiert haben, werden die hier angezeigt werden, damit Sie jederzeit problemlos darauf zugreifen können. Aus unserer Sicht haben wir unsere Funktionen zum Vergrößern und Verkleinern. Wir können unsere Befehls- oder Steuerungs- und Zahlenoptionen hier verwenden Steuerungs- und Zahlenoptionen , um auf bestimmten Ebenen zu zoomen und alles in einer separaten Vorlesung zu zoomen. Wir können die Vollbild-Achse betreten. Unsere Bibliotheks-Layer sind Plugins, die im Wesentlichen identisch sind wie diese Schaltflächen hier unten. Wir können Layout - oder quadratische Raster erstellen, die wir ebenfalls untersuchen werden. Und unter einer Windows-Option haben wir das übliche Minimieren, Zoom, so weiter und so weiter. Jetzt können wir eine Vorschau unseres Projekts anzeigen, indem auf einem Mac oder Control Enter auf Command Enter drücken. Und es wird weitergehen und es öffnen. Aber es ist im Wesentlichen dasselbe wie das Klicken auf dieses vorhandene Symbol oder das Desktop-Vorschau-Symbol hier drüben. Und unter Hilfe möchten wir zu irgendeinem Zeitpunkt nach einer bestimmten Aufgabe suchen. Nehmen wir an, wir möchten auf unsere Zoom-Tools zugreifen , mit denen wir schnell Zoom eingeben und auf die gewünschte Option zugreifen können. Und das macht es für uns viel schneller, genau das zu finden, wonach wir suchen. Sie können diese Hilfefunktion also jederzeit während des Kurses verwenden , da es nur ein wenig kurz darüber was die Menüoption und zu bieten hat. Und in der nächsten Vorlesung werde ich Ihnen einige Verknüpfungen mitteilen , auf die Sie Zugriff haben können , sind nützlich. Sie müssen sich diese Abkürzungen nicht merken. Tatsächlich denke ich, dass dies wahrscheinlich nicht der beste Weg ist , sie zu lernen. Am besten werfen Sie einen kurzen Blick auf dieses Dokument. Und dann werde ich sie im Laufe der Zeit verwenden, während wir an dem Projekt gearbeitet haben , und ich werde Sie daran erinnern, sie auch zu benutzen. Auf diese Weise können wir diese Tastenkombinationen, diese Tastenkombinationen, verwenden , um unseren Designprozess wesentlich effizienter zu gestalten. 8. Formen erstellen: Okay, wir sind bereit, einige der Tools zu erforschen, die wir in XD haben. Und das Wichtigste zuerst sind Formen. Und natürlich sind Formen wirklich wichtig, weil sie viele unserer Objekte in unseren Entwürfen ausmachen . Egal, ob wir mit Schaltflächen oder Profilbildern oder Menüsymbolen arbeiten , alles besteht wirklich aus Formen InDesign. Jetzt könnte es natürlich so einfach sein wie ein Rechteck oder so komplex wie ein einzigartiges Zeichnen eines Symbols mit dem Stiftwerkzeug, die Möglichkeiten sind endlos. Bevor wir also einspringen und einige Formen erkunden, lassen Sie uns diese Datei einfach loswerden und eine neue erstellen indem Sie auf unsere Homepage gehen und auf Neue Datei klicken. Jetzt stellen Sie möglicherweise fest, dass XD Ihre Originaldateien nicht schließt. Wenn Sie sich also bereits in einer Datei befinden, wird sie geöffnet bleiben und einfach ein anderes Fenster erstellen, zumindest auf dem Mac. Wenn Sie möchten, können Sie diese Datei einfach schließen. Und keine Sorge, es ist in der Cloud gespeichert, sodass Sie jederzeit vom Startbildschirm aus darauf zugreifen können. Also da ist deine neue Akte. Lassen Sie uns diese umbenennen, um XD-Tools zu erkunden. Ich werde einfach weitermachen und das titeln, denn das ist buchstäblich das, was wir mit dieser Datei machen. Du kannst es wirklich nennen, wie du willst. Hier gibt es kein richtig oder falsch. Es ist nur, dass ich meine Dateien gerne organisiert halte, damit ich genau weiß , worum es geht. Wichtigste zuerst: Unsere Formen sind über das Werkzeugbedienfeld oder ganz links vom Fenster zugänglich . Wir haben also Zugriff auf ein Rechteck, eine Ellipse, Polygonlinien, und wir können benutzerdefinierte Formen mit den inneren Klammern des Stift-Werkzeugs erstellen . Sie sehen die Verknüpfung zum Erstellen dieser Shapes. Wenn Sie also bereits auf Ihrer Kunsttafel und schnell erstellen möchten, sagen wir mal ein Rechteck. Sie können einfach die R-Taste auf Ihrer Tastatur drücken. Und dieser kleine Cursor wird auftauchen , wo Sie Ihr Rechteck tatsächlich zeichnen können. Wenn ich also weiter klicke und ziehe, siehst du, dass ich eine Form oder ein Rechteck erstelle , basierend auf meinen Vorlieben. Wenn du irgendeine Form erstellst. Wenn Sie die Umschalttaste gedrückt halten, während Sie diese Form erstellen sperrt XD die Proportionen der Breite und der Höhe. Auf diese Weise können Sie ein perfektes oder perfektes Quadrat oder einen perfekten Kreis erstellen ein perfektes oder perfektes Quadrat oder , wenn Sie mit einem Kreis arbeiten. Also lasst uns weitermachen und ein Quadrat erstellen. Lass einfach hier los. Wie Sie sehen können, habe ich eine Form erstellt. Ich kann Escape auf meiner Tastatur drücken, um das Shape-Tool zu verlassen, sobald sie es zweimal drücken. Oder eine andere Option ist , dass ich einfach V drücken kann, wodurch dieses kleine Auswahlwerkzeug ausgewählt wird , damit wir keine Rechtecke erstellen können. Andernfalls können Sie, wenn Sie im Rechteckmodus bleiben, mehrere Rechtecke erstellen, wenn Sie möchten. Und wann immer Sie dieses Tool verlassen möchten, können Sie auf dieses kleine Symbol oder V auf Ihrer Tastatur klicken . Und jetzt bin ich aus diesem Rechteckwerkzeug raus. Und wann immer ein Drag, wähle ich nur Objekte in meiner Kunsttafel aus. Ich gehe einfach aus und wähle diese aus und klicke auf Löschen, um sie loszuwerden, weil wir vorerst aus und wähle diese aus und klicke auf Löschen, um sie loszuwerden nur das Quadrat brauchen. Nachdem ich bereits erwähnt habe, ändert sich das Eigenschaftenfenster entsprechend dem, was Sie ausgewählt haben. Im Moment besteht unsere Form gerade aus dieser kleinen Grenze hier drüben. Aber wenn wir, sagen wir mal, eine Farbe hinzufügen möchten , können wir einfach hier darauf klicken. Nun, wenn Sie hier das Ebenenbedienfeld geöffnet haben, was ich vorschlage, dass es standardmäßig geöffnet wird. Sie können in einer Zeichenfläche von meinem Web 1920 sehen, dass ich eine Rechteckebene habe. Wenn ich jetzt draußen bin und über das Ebenenbedienfeld ausgewählt habe , wird es das Gleiche tun und wir wählen es einfach für mich aus. Und auf der rechten Seite habe ich bestimmte Optionen. Ich kann dieses Quadrat wiederholen, wenn ich mehrere Kopien davon in meiner Zeichenfläche haben möchte , was super cool ist. Dies wird sehr praktisch sein, wenn wir mit unseren Designs arbeiten. Kann da raus fliehen. Und wähle einfach die Option noch einmal aus. Wenn du weitermachen willst und einfach die Gruppierung aufheben und zu meinem Rechteck zurückkehren. Wie bereits besprochen, kann ich hier meine Breite und Höhe ändern. Wenn ich also meine Breite hier ändern möchte, kann ich sie auf 400 ändern. Und jetzt habe ich ein Rechteck im Gegensatz zum Quadrat. Wenn Sie jedoch den Anteil so sperren möchten , dass sie beim Ändern Ihrer Breite und Höhe gleich bleiben. Sie können hier auf dieses kleine Lock Aspect Icon klicken. Und wenn du es einmal tust, wenn ich meine Breite auf 400 ändere, jetzt sowohl meine Breite als auch meine Höhe ändern sie jetzt sowohl meine Breite als auch meine Höhe für 100, was super cool ist. Das ist ein bisschen X und Y geben an, wo diese kleine Form in meiner Kunsttafel ist. Dieser kleine Punkt hier und jede obere linke Ecke sind also im Wesentlichen das , was diese beiden Punkte darstellen. Dieser kleine Punkt hier, meine Zeichenfläche ist x 0 und y 0. Im Wesentlichen bedeutet 88, dass diese kleine Form oder dieser Teil der Form 88 Pixel horizontal und 93 Pixel vertikal beträgt. Wenn ich das also bewege, wirst du feststellen, dass sich die kleinen X und Y ändern. Und wenn ich es in die Ecke lege, was eines der coolen Dinge ist, dass XD weitergeht und es automatisch einrastet, wenn Dinge in die Nähe von Ecken oder Kanten kommen . Und jetzt, wie Sie sehen können, 0000, und natürlich kann ich mir vorstellen, dass sich das ändert, indem Sie einfach die Nummer eingeben. Jetzt kann ich von jedem Punkt aus mein Quadrat drehen. Und ich kann Command Z drücken, um das rückgängig zu machen oder unter Windows Z zu steuern. Es funktioniert uns im Eigenschaftenfenster nach unten. Ich kann weitermachen und die Füllung ändern, wie wir besprochen haben. Wenn ich auf dieses kleine Fail-Symbol klicke, kann ich eine neue Farbe auswählen, wie ein bisschen Blau hier drüben. Und ich kann den Farbton ändern, um genau das zu wählen, was ich will, ohne heller oder dunkler zu wollen. Wir haben also jetzt eine Füllrate sowie eine Grenze. Der Rand hier hat eine Größe von einem Pixel. Wenn ich dies also in Irreführung und 20 ändere, kann man die Grenze jetzt viel klarer sehen. Wir können auch die Farbe der Grenze ändern. Wenn Sie also genau hier einen grauen Rand machen können. Und ich kann einfach weitermachen und das schließen. Ich kann runde Kanten für meine Grenze erstellen. Also wenn du jetzt hinschaust, wenn ich einfach mehr hinzoome, weil es bei dieser Zoomstufe ziemlich schwer zu erkennen ist. Wenn Sie auf diese kleine Runde klicken, wird es weitergehen und einfach die Ränder unserer Grenze abrunden. Oder Sie können diese Option hier ausführen, um nur einen Abschrägungs-Join zu erstellen. Oder Sie können einfach einen Schmelzer-Join machen, im Wesentlichen einfach ohne Rundung. Lass uns einfach weitermachen und verkleinern. Ich verwende meinen Scroll auf meinem Trackpad zum Vergrößern und Verkleinern. Sie können einige Effekte auf Ihre Formen setzen, aber inneren Schatten machen. Es gibt also diesen kleinen inneren Schatten, der gerade schwer zu erkennen ist , weil er wahrscheinlich hier an meiner Grenze versteckt wird. Aber wenn ich einen Überschuss von 20 und ein Y von 20 und diesen Unschärferadius vielleicht auch auf 20 ändere. Du kannst es jetzt irgendwie hier sehen. Und wenn ich darauf klicke, sehen Sie, die Transparenzen etwas niedriger sind. So kann ich weitermachen und es undurchsichtiger oder sichtbarer machen. sie es also dunkler machen, können Sie sehen, dass der Schatten stärker wird, oder wenn Sie näher an den Boden gehen, wird es heller. Sie können sogar die Farbe Ihres Schattens ändern , wenn Sie nicht möchten, dass er schwarz ist. Aber normalerweise verwenden wir für Schatten die Farbe Schwarz. Wenn Sie äußeren Schatten oder Schlagschatten wünschen, können Sie diese Option hier ausführen. Und das Gleiche. Du kannst weitermachen und es kontrollieren. Und wie Sie jetzt auf der Außenseite meiner Form sehen können, bekomme ich einen kleinen Schatten, was ziemlich cool ist. Ich kann das x und y davon wählen. Wenn ich also möchte, dass es ein bisschen weiter weg und verschwommen ist, ist es ein bisschen verschwommener. Ich kann diese Option auch machen. Auch hier haben Sie die volle Kontrolle über die Fettleibigkeit Ihrer Schatten indem Sie einfach auf dieses kleine Symbol hier klicken. Und zu jedem Zeitpunkt können Sie einfach auf das kleine Kontrollkästchen klicken , um Ihre Schatten zu entfernen. Wird die Hintergrundunschärfe weiter untersuchen und für den Export markiert. Aber so kreiert man Formen. Wenn Sie mit anderen Formen wie Kreisen erkunden möchten, erstellen Sie verschiedene Kreise oder verschiedene Dreiecke und erkunden Sie Ihre Formen. So erstellen Sie also Formen in Adobe übertreffen. Die meisten dieser Eigenschaften sind ziemlich gleich, wenn es um verschiedene Formen geht. So kannst du weitermachen und Ellipsen erstellen und mit der Füllung der Grenze, den Schatten herumspielen und von dort aus gehen. Eine Sache, die ich beachten möchte , ist , dass wenn ich aus dem Weg gehe, auf dieses kleine Quadrat hier drüben klicke. Dies hier ist im Wesentlichen die Deckkraft dieser quadratischen Form in meiner Zeichenfläche. Also wenn ich L4 mache, wird es, wie Sie sehen können, weitergehen und füttern. Und wenn ich andere Gegenstände darunter lege. Also wenn ich diese kleine Ellipse gerade hier drüben in die Ecke lege , weil sie oben auf meinem Rechteck liegt, übernehme sie komplett. Wenn ich weitermache und es unter mein Rechteck bewege. Jetzt befindet sich mein Rechteck oben auf der Ellipsenform hier drüben. Wenn ich also die Deckkraft ändere je nachdem, wie transparent sie ist, wird sie weitergehen und diese Ellipse entweder vollständig verbergen, weil sie oben drauf ist, oder zeigt ein bisschen davon basierend auf wie sichtbar du deine Form haben willst. Und in den folgenden Vorträgen werden wir auch unsere Linien- und Stiftwerkzeuge untersuchen . Aber bevor wir das machen, werde ich dich etwas bewegen. Und das soll diesem kleinen Kreis eine orangefarbene Füllung sowie einen schwarzen Rand geben , nur damit Sie ein wenig Übung beim Anpassen Ihrer Formen in XD bekommen können wenig Übung beim . Und wir sehen uns in der nächsten Vorlesung. 9. Shapes: In Ordnung, also hoffe ich, dass Sie die Gelegenheit hatten , sich die Formwerkzeuge anzusehen und sie ein wenig zu erkunden. Jetzt habe ich dir eine kleine Übung gegeben, um einen Kreis zu erstellen und ihm eine orangefarbene Füllung zu geben, sowie Puerto That ist schwarz. Also werden wir das zusammen und diesen Vortrag machen und dann nur ein paar andere Dinge durchgehen , die ich mit Ihnen mit Formen erforschen möchte . Also zuerst geht es voran und lösche einfach diesen Kreis , den ich bereits erstellt habe. Wie ich bereits erwähnt habe, gibt es Verknüpfungen zum Erstellen von Formen. Also der für Ellipsen, dem Sie einen Kreis erstellen , ist E. Wenn Sie also in Ihrer Zeichenfläche waren, können Sie einfach die E-Taste auf Ihrer Tastatur drücken , ähm, was Sie in den gleichen Modus versetzt wie der Ellipsenmodus hier drüben. Wenn nicht, kannst du immer Escape drücken. Ich klicke weiter und klicke auf das Ellipsenwerkzeug. Ich habe nicht genau erwähnt, wie groß der Kreis sein sollte oder wie dick die Grenze sein sollte. Also habe ich dir das überlassen. Aber aus Gründen dieser Lektion wir einfach weitermachen und es zu einem Kreis von 400 Pixel mal 400 Pixel machen. Eine Sache, die ich beachten möchte, ist, dass Sie, wenn Sie einen Kreis oder eine Form mit einer bestimmten Größe erstellen möchten, einfach auf Ihre Leinwand klicken und dann mit dem Zeichnen beginnen können Ihre Leinwand klicken und dann mit dem Ellipse hier. Jetzt weiß ich nicht, wie groß meine Ellipse ist, aber was ich tun kann, ist, dass ich weitermachen und zuerst Verschiebungen halten kann, dass es ein perfekter Kreis ist. Ansonsten mache ich eine ovale Form. Und dann auf der rechten Seite hier und im Eigenschaftenfenster „Transformieren“, wenn ich meine Form ziehe, können Sie hier die Größe und die Pixelgröße sehen . Wenn ich also irgendwann loslasse, wird die Form in dieser Größe erstellt. Nun, was hier passiert ist, aber manchmal kann man passieren, dass ich Shift losgelassen habe, bevor ich tatsächlich meinen Kreis erstellt habe. Wenn Ihnen also so etwas passiert, können Sie einfach weitermachen und entweder löschen oder einfach Befehl Z drücken, um dies rückgängig zu machen , und dann noch einmal, um sicherzustellen, dass Sie die Umschalttaste gedrückt halten weit durch, während du dein Shape ziehst. Und wenn ich hier drüben einfach mag, ist dies die perfekten 400 mal 400 Pixel. Aber auch hier können Sie Ihre Form oder Objektgröße jederzeit an die Breite und Höhe anpassen . Da wir bereits das perfekte für einen Kreis von 100 Pixel mal 100 Pixel haben, können wir das so lassen, wie es ist. Lassen Sie uns weiter und wählen Sie hier unser Auswahl-Tool aus. Klicken Sie auf den Kreis, den wir bereits ausgewählt haben. Und dann weiter zum Füllteil hier drüben, lass uns weitermachen und ihm eine Füllung Orange geben. Auf dem Schieberegler hier drüben können Sie einfach eine Art orangefarbenen Farbton auswählen, so etwas funktioniert. Und wenn Sie diesen kleinen Farbwähler oder Q-Selektor auf die gewünschte Farbe ziehen diesen kleinen Farbwähler oder Q-Selektor , gibt es eine gute orangefarbene Farbe. Und dann für die Grenze, Lasst uns auch weitermachen und ihm eine Größe von 20 Pixel geben, ähnlich wie bei diesem Quadrat hier drüben. Und dann können wir für die Randfarbe einfach weitermachen und darauf klicken. Und für Schwarz können wir einfach weitermachen und diesen kleinen Farbwähler ganz nach unten rechts ziehen diesen kleinen Farbwähler , was wir weitermachen und uns eine schwarze Randfarbe geben . Cool. Jetzt haben wir einen Kreis oder einen orangefarbenen Kreis mit einem schwarzen Rand um ihn herum. Zwei Kleinigkeiten, die ich in diesem Video erwähnen möchte . Einer von ihnen ist das coole Merkmal des Einfügens von Darstellungen. Wenn Sie sich also daran erinnern, was wir die Menüoptionen für XD durchlaufen haben, haben wir darüber gesprochen, wie wir tatsächlich Darstellungen zwischen verschiedenen Objekten kopieren und einfügen können . Nehmen wir an, ich möchte diese orangefarbene Kreise auf dieses Quadrat anwenden . Ich habe zwei Möglichkeiten. Ich kann weitermachen und auf das Quadrat klicken und dann die gleichen Anpassungen vornehmen. Eine coole Sache ist, dass ich hier auf dieses kleine Pipettenwerkzeug klicken kann , weiter und klicke auf diese Orange, um mir genau diese Farbe zu geben. Mit diesem kleinen Pipettenwerkzeug können Sie Ihrer Füllung oder Ihrer Rahmenfarbe die gleiche Farbe wie Ihr Cursor geben Ihrer Füllung oder Ihrer Rahmenfarbe die gleiche Farbe . Wo auch immer Ihr Cursor anschaut. Wenn es sich also an diesem kleinen schwarzen Rand befindet , ändern wir die Füllung je nachdem, wo Sie klicken, in Schwarz. Ich benutze Command Z, um das zweimal rückgängig zu machen und zurück zu meinem blauen Quadrat zu gehen. Jetzt zeige ich Ihnen eine einfachere Möglichkeit, Ihrem Quadrat das gleiche Aussehen wie Ihr Oval zu verleihen . Und das können Sie einfach tun, indem Sie auf das Quadrat klicken und Befehl C drücken, was dem entspricht Kopieren oder Control C unter Windows, Clicker Square, aber anstatt tatsächlich einzufügen, wodurch ein anderes eingefügt wird oval. Anstatt das zu tun, verwende ich einfach Befehl Z, um das rückgängig zu machen. Wir werden fortfahren und auf Ihr Quadrat klicken und Option Befehl V drücken, sie auch tun kann, indem Sie in Ihrem Menü zu Bearbeiten und Einfügen gehen . Was das im Wesentlichen getan hat, ist, dass es vorangegangen ist und meinem Quadrat das gleiche Aussehen wie der Kreis gegeben hat. Wenn ich diesem Kreis nun einen Schatten oder einen Blog oder irgendetwas anderes gebe , darüber hinaus auch die scheinbaren Effekte werden darüber hinaus auch die scheinbaren Effekte in die Form kopiert . Das ist also sehr nützlich und spart uns viel Zeit, wenn Sie den gleichen Stil zwischen verschiedenen Formen oder Objekten verwenden möchten verwenden . Es ist also ein kleiner ordentlicher Trick, um Ihren Objekten das gleiche Aussehen zu verleihen . Und andere coole Sache , die ich mit dir über Rechtecke teilen möchte . Sie können tatsächlich die Ecken Ihres Rechtecks abrunden . Egal, ob es sich um ein Quadrat oder ein Rechteck handelt, Sie können in jede Ecke gehen. Wie Sie sehen können, dieser kleinen Ecke hier drüben sicher, dass Sie nicht auf den äußeren Kreis klicken , wenn Sie Größe Ihrer Form ändern können, wenn Sie den Befehl Z verwenden, um dies rückgängig zu machen. Aber ich spreche von diesem inneren Kreis hier drüben. Dieser innere Kreis ermöglicht es Ihnen, die Ränder oder die Ecken Ihrer Form tatsächlich zu runden , wenn Sie ihn halten und ziehen ermöglicht es Ihnen, die Ränder oder die Ecken Ihrer Form tatsächlich zu runden , wenn Sie . Je mehr ich nach innen ziehe, desto mehr wird es zu einer Ellipse und wird vollständig abgerundet. Vor allem, weil es ein Quadrat ist. Oder wenn ich weitermache und nur leicht abgerundete Ecken mache, kann ich so etwas tun, das wir für Schaltflächen, Formen, App-Symbole usw. verwenden können . Jetzt können Sie diesen Eckenradius immer optimieren, aber wenn Sie hier unten und hier unten auf die rechte Seite gehen , sehen Sie diese Option für den kleinen Eckenradius. Sie können diese Nummer hier ändern. Im Moment haben wir einen Eckenradius von 75. Aber wenn Sie es auf einstellen, sagen wir 25. Und ich sehe, dass dein Quadrat eine etwas weniger abgerundete Ecke haben wird . Und wenn Sie möchten, ist der spezifische Eckenradius vier verschiedene Ecken. Wir können fortfahren und hier drüben auf dieses kleine Icon klicken . Und dann gibt es uns die Möglichkeit, unseren Eckenradius an bestimmten Ecken zu ändern . Und das gilt im Format von oben links, oben rechts, unten rechts und unten links. Wenn Sie also oben links auf ändern, sagen wir 75. Jetzt haben wir eine abgerundete linke obere Ecke als die anderen Seiten. Und wenn ich jetzt weitermache und das twittere, wird es weitergehen und alle Grenzen wieder ändern oder alle Ecken. Der Radius ist wieder. Aber wenn ich das einfach rückgängig mache und Alt halte, während ich das mache. Jetzt können Sie sehen, wenn Sie Alt gedrückt halten, kann ich diesen Eckenradius einfach selbst ändern diesen Eckenradius , ohne die anderen zu beeinflussen. Und ich kann das Gleiche auch an anderen Ecken machen. Ziemlich süß. Das ist ein kleiner ordentlicher Trick, um Ihre Formen um die Grenze herum zu geben. Ich werde Command Z mehrmals verwenden, um einfach auf allen Seiten oder allen Ecken für den Radius zu einer perfekten 25 zurückzukehren . Und lass es einfach so wie es ist. In den folgenden Vorträgen werden wir wiederkommen und unsere Linien- und Stiftwerkzeuge zum Erstellen benutzerdefinierterer Formen erkunden . 10. Linien zeichnen: Okay, Bisher haben wir ein Quadrat geschaffen, wir haben einen Kreis geschaffen. Und jetzt ist es an der Zeit, unser Linien-Tool zu erkunden. Linien sind also sehr nützlich, wenn Sie Dinge wie die Hamburger-Menüsymbole oder Trennwände erstellen möchten Dinge wie die Hamburger-Menüsymbole oder Trennwände erstellen , oder wirklich irgendetwas, bei dem Sie ein Objekt wie dieses mit einer Füllung nicht benötigen, aber du willst einfach nur durch deine Entwürfe ausgerichtet sein. Also kann ich weitermachen und darauf klicken. Also lasst uns weitermachen und auf dieses kleine Linienwerkzeug hier in unserem Tool-Panel klicken. Und dann geh weiter und zeichne eine Linie indem du einfach in unsere Zeichenfläche und dort hältst und ziehst, wo unsere Linie enden soll. Die während du deinen Cursor gedrückt hältst. Wenn Sie die Umschalttaste gedrückt halten während Sie Ihre Linie zeichnen, können Sie tatsächlich gerade Linien erstellen. Wenn du also eine vollkommen gerade Linie wie diese willst, kannst du weitermachen und hier rüber gehen lassen. Oder wenn Sie eine abgewinkelte Linie in einem Winkel von 45 Grad wünschen, können Sie Ihren Cursor drehen, um die perfekten Winkel bei den 45-Grad-Markierungen zu erhalten . Sie können also eine gerade nach unten oder vertikale Linie wie diese machen oder ein wenig abgewinkelt einen 45-Grad-Winkel oder nur einen 0 Grad oder einfach eine gerade Linie wie diese. Und wenn Sie hier rübergehen, stellen Sie sicher, während Sie Ihre Formen zeichnen, wenn Sie diese Umschalttaste verwenden, um diese Verschiebung loszulassen, nachdem Sie den Cursor losgelassen haben. Stellen Sie also sicher, dass Sie es vorher nicht tun. Andernfalls kann diese Sache mit dem ganzen Winkel durcheinander kommen, wenn Sie einfach loslassen Shift einfach loslassen, bevor Sie Ihre Maus loslassen und die Form erstellen. Geh einfach weiter und lösche das. Jetzt können wir auf Escape klicken, um aus diesem Linienwerkzeug herauszukommen, und klicken Sie hier auf unsere Zeile. Von hier aus können Sie also die Breite unserer Linie sehen, 368. Wenn wir also weitermachen und das auf 400 ändern, genial. Jetzt haben wir eine Linie, die 400 Pixel groß ist und keine Höhe hat. Wenn Sie Ihnen eine Linerhöhe geben, wird, wie Sie sehen können, nichts passieren, da eine Linie im Wesentlichen einfach ausgerichtet ist. Es gibt keine Höhe für eine Linie, es ist nur eine Breite. Wenn Sie also Ihre Linien dicker machen möchten, können Sie einfach weitermachen. Und du siehst, wir haben die Grenze hier drüben, was sich hier zeigt. Wir können weitermachen und einfach unsere Grenze vergrößern. Wenn du also fünf Pixel machst, siehst du jetzt, dass ich eine etwas dickere Linie bekomme. Sie können 10 Pixel machen, also ist es noch dicker. Wenn Sie unserer Linie alle fünf Pixel einen kleinen Strich geben möchten , können wir es so ändern. Oder sagen wir 50 Pixel. Wir können solche gestrichelte Linien erstellen. Wenn Sie bestimmte Lücken zwischen unseren Bindestrichen wünschen, können wir eine bestimmte Zahl eingeben. Und jetzt werden unsere Bindestriche diese Lücke untereinander haben. Spielen Sie also mit diesen Zahlen herum, um zu sehen, welche Art von Formen Sie erhalten. So können wir zum Beispiel einen Bindestrich mit 50 Pixel mit einer Lücke von 100 Pixel oder einen perfekten Bindestrich erstellen einen Bindestrich mit 50 Pixel mit einer Lücke von 100 Pixel oder einen , das sind 50 Pixel mit einer Strichlücke von 50 und so weiter. Wir können diese also auf 0 zurücksetzen, wann immer wir auf eine gerade Linie zurücksetzen möchten . Jetzt mit einer Linie, die der mit unserer Grenzoption für R square ähnelt , können wir ihm tatsächlich eine bestimmte Endkappen geben , damit wir eine Runde machen können und so haben wir eine Linie, die gerundet ist jetzt an den Rändern. Jetzt möchte ich dir einige ordentliche Tricks, Tipps und Tricks zeigen , während du Formen erstellst. Dies gilt jetzt für jede Form, nicht nur für Linien, aber wenn Sie diese Linie irgendwann sagen möchten, machen Sie diese Linie natürlich kürzer oder länger, können Sie jedes Ende ergreifen und jedes Ende kürzer machen oder länger. Nun, denn jetzt passe ich meine Notiz hier für diese Zeile an. Es wird weitergehen und in Freiformstilen sein, also ist es nicht mehr gerade, aber wenn ich die Umschalttaste gedrückt halte, kann ich es gerade machen. Wenn Sie also eine kürzere Linie wünschen, müssen wir jeden Knoten ergreifen und die Linie kürzer machen. Aber wenn ich das tatsächlich rückgängig mache, während ich einen Knoten halte, ich, wenn ich Alt halte kann ich, wenn ich Alt halte, einen Knoten ziehen und beide Seiten ändern lassen. Und noch einmal, wenn Sie Shift und Alt zusammen halten möchten , optimieren wir die gerade Linie des Lochs, ohne den geraden Winkel zu verpassen. So zum Beispiel dieser kleine Kreis hier. Wenn ich Alt halte, kann ich alle Seiten bearbeiten. Und wenn Sie die Umschalttaste gedrückt halten, wird es diesen Anteil der Breite und Höhe einschränken . einfach los und lass es so wie es ist. Und ja, das ist also die Erstellung von Zeilen in XD. Jetzt werden wir in der nächsten Vorlesung wiederkommen und erfahren, wie wir das Stiftwerkzeug verwenden können um komplexere Linien und Formen für bestimmte Fälle zu erstellen , in denen wir bestimmte Symbole zeichnen oder Sie möchten um ein Objekt zu verfolgen und so weiter, so weiter. Wir sehen uns also in der nächsten Vorlesung. 11. Verwendung des Zeichenstift-Tools: Was ist dieses kleine Stiftwerkzeug hier drüben? Wir reden immer wieder darüber. Es sieht ziemlich schick aus. Und manchmal wird es eigentlich nicht einmal so oft benutzt, wie wir denken. Aber es ist immer gut, eine Vorstellung davon zu haben , worauf wir in unserem Tool-Panel zugreifen können. Nur für den Fall gibt es seltene Fälle, in denen wir bestimmte Tools verwenden müssen. Warum schnappen wir uns also nicht ein Stiftwerkzeug, indem wir einfach auf dieses kleine Stiftwerkzeugsymbol klicken. Oder Sie können immer P auf Ihrer Tastatur drücken und es wird Ihnen die gleiche Art von Cursor geben. Jetzt bin ich hier hineingezoomt. Also gehe ich hier auf diese Seite meiner Art Board. Und ich werde hier einfach eine kleine benutzerdefinierte Form erstellen eine kleine benutzerdefinierte Form , indem ich einfach auf Knoten klicke und erstelle. Wenn es also um das Stiftwerkzeug geht, denken Sie daran, dass es eine Form mit mehreren Linien erzeugt. Also habe ich den ersten Knoten erstellt, indem ich einfach dort klicke. Wenn ich erneut klicke, wird ein zweiter Knoten erstellt. Und wenn ich woanders erneut klicke, wird der dritte Knoten erstellt und so weiter und so weiter. Eines der coolen Dinge ist, dass Sie, während Sie eine Form im Stiftwerkzeug zeichnen, Ihnen diese kleine Anleitung geben wird, z. B. die blaue Linie, um Ihnen zu sagen, dass Sie gerade in einer geraden Linie sind Vaughn und erstelle etwas , das sich innerhalb der Nahtlinie oder derselben Y-Position befindet wie bei anderen Anmerkungen, die ich hier habe. Dann kann ich weitermachen und sehen, wo diese blaue Linie einrastet. Und das ist mein Indikator , dass dies auf dem gleichen Niveau ist wie diese kleine Notiz hier, was cool ist. Und das Gleiche, wenn es um den anderen Knoten geht. Also kann ich einfach weitermachen und weiter klicken. Dann kann ich einfach ein paar andere zufällige Knoten erstellen. Eine Sache, die ich erwähnen möchte , ist, dass wir, wenn Sie Ihre Notiz nicht hier für Ihre Form, das Stiftwerkzeug, schließen Ihre Notiz nicht hier für Ihre Form, , einfach weitermachen, ohne Sie bei irgendeinem Halt machen zu lassen zeigen Sie können Escape drücken, um aus diesem Tool herauszukommen. Und jetzt hast du das einfach. Und wenn ich noch einmal auf Escape drücke, habe ich nur diesen Weg, der irgendwie nicht geschlossen ist. Oder ich doppelklicke immer wieder hinein und zeichne dann weiter. Oder es kann einfach jeden vorhandenen Knoten optimieren. Also kann ich reingehen und diesen Knoten optimieren oder diesen hier oder diesen optimieren. Oder wenn ich weiter zeichnen möchte, kann ich einfach zurückgehen und auf das Stiftwerkzeug klicken und diese Form vervollständigen. Jetzt, während ich hier bin, kann ich hier auf diesen Knoten klicken. Und jetzt bin ich wieder in mein Stift-Werkzeug bremst, mach weiter und schließe einfach meine Form indem du hier drüber klickst. Und jetzt, wie Sie automatisch sehen können, Es freut uns außerhalb dieses Stiftwerkzeugs, ich weiß nicht, ob ich hier eine Art Diamanten-Symbol erstellt habe . Aber ich schätze, wir können wieder reingehen und diese kleine Notiz hierher ziehen diese kleine Notiz hierher , damit dies ein bisschen mehr wie ein Diamant aussieht. Das ist also im Wesentlichen, was uns das Stift-Werkzeug ermöglicht diese benutzerdefinierten Formen zu erstellen. Und sobald Sie eine geschlossene Form haben, bedeutet das eine Form bei der alle Ihre Knoten verbunden sind. Sie können es wie gewohnt ausfüllen. So kannst du weitermachen und dem Gib diese kleine Form geben. Ich weiß es nicht. Sehen wir uns die blaue Füllung an und entfernen vielleicht sogar den Rand davon. Genau wie alle anderen Formen. Und jetzt mit dieser Form ist eine Sache zu beachten, dass er immer zurückgehen und sie bearbeiten kann . Wenn Sie also doppelklicken, um in dieses Shape zu gelangen, können Sie diese Knoten jederzeit bearbeiten. Oder du kannst sogar Dinge wie etwa in die Mitte von 22 Knoten gehen und noch mehr Knoten hinzufügen. Ich spiele wirklich damit herum und erstelle Formen, benutzerdefinierte Formen, die dir gefallen. Ich mache diese einfach rückgängig, indem ich auf Befehl Z klicke. Ich möchte dir noch eine coole Sache zeigen wenn es um das Stiftwerkzeug geht. Bisher haben wir eine Form mit nur geraden Linien erstellt. Wenn Sie jedoch eine anspruchsvollere Form erstellen möchten die gekrümmte Linien verwendet, können wir hier immer in unsere Form doppelklicken, um diese Knoten in gekrümmte Noten umzuwandeln. Und ich zeige dir, was das bedeutet. Wenn Sie also den Mauszeiger über einen dieser Knoten hier drüben bewegen, können Sie darauf doppelklicken, um diesen tatsächlich in einen gekrümmten Knoten zu verwandeln. Wenn ich diesen kleinen Punkt hier rüber ziehe , wie Sie sehen können, verbindet er sich mit einer gekrümmten Linie mit den anderen beiden Knoten. Und ich kann diese gekrümmte Linie mit diesen kleinen Punkten hier drüben anpassen . Also kann ich eine kleine seitwärts - oder vertikale Kurve wie diese machen. Halten Sie einfach die Straße, indem Sie die Umschalttaste Und wie bereits erwähnt, wird es während Sie die Umschalttaste gedrückt halten und in bestimmte Winkel einrasten. Ich kann meine Kurve mehr, abgerundeter machen oder sie kann sie so subtiler machen. Argumente lassen es so, wie es so ist. Und du kannst das mit jedem Knoten machen. also doppelklicken, konvertieren Sie diese Knoten in gekrümmte Pfade. So können Sie Dinge tun, wie zum Beispiel sehr benutzerdefinierte Formen erstellen. Wenn Sie dies jederzeit rückgängig machen und Ihre Noten in eine gerade Linie verwandeln möchten . Sie können dies einfach rückgängig machen, indem Sie auf jeden der gekrümmten Knoten doppelklicken. Und wir bringen dich zurück zu dem straßenförmigen oder straßengesäumten Stiftweg, den du hattest. Ich glaube also nicht, dass ich das erwähnt habe, aber ein Pfad ist im Wesentlichen das, was wir hier mit dem Stiftwerkzeug erstellt haben . Auf der linken Seite heißt dies standardmäßig Path 1, was standardmäßig der Name ist , der unserem Pfad genau hier gegeben wird. Sie können einen Pfad jederzeit verlassen , indem Sie einfach auf Escape klicken oder V drücken, um zu Ihrem Auswahlwerkzeug zurückzukehren. Und das ist das Stiftwerkzeug für Sie in XD, wo sie in der nächsten Vorlesung erstellen und sich Boolesche Werkzeuge ansehen können und wie wir tatsächlich mehrere Formen kombinieren oder verwenden können, um Formen zu erstellen und zu kombinieren. 12. Boolean Optionen: Wie in der vorherigen Vorlesung erwähnt, gibt es noch zwei weitere Formen. Wir können dieses wirklich coole Ding machen, das wir kurz im Menü durchgegangen sind, das hier unten im Objekt Pfad genannt wird. Wenn Sie also auf das Objekt in unserem Menü klicken und zum Pfad gehen, können Sie tatsächlich fortfahren und den Pfad hinzufügen, subtrahieren, schneiden, ausschließen, überlappen, Pfad konvertieren und Konturstrich umwandeln. Was Sie im Moment wahrscheinlich keine Ahnung haben was einer von denen macht, was völlig in Ordnung ist. Das ist der springende Punkt dieser Vorlesung ist, dass wir diese durchgehen werden. Wir werden jeden von ihnen kurz durchgehen , damit Sie eine Vorstellung davon haben, was sie tun. Das Wichtigste zuerst Ich bringe einfach meine Formen hier zusammen. Dass es sich hier irgendwie überschneidet. Dies dient nur dem Zweck dieser Lektion, damit Sie lernen können , was diese booleschen Tools tun. Also wenn ich einfach beide Shapes ziehe und klicke. Und jetzt, da ich jetzt sehen kann, dass sie beide ausgewählt sind weil sie beide in meinem Ebenenbedienfeld hervorgehoben sind. Und genau hier kann ich sehen, dass beide diese Gliederung haben oder innerhalb dessen bedeutet, dass sie beide ausgewählt sind. Eine andere Möglichkeit, Objekte auszuwählen , besteht darin, in das Ebenenbedienfeld zu auf ein Objekt zu klicken. Und während Sie die Umschalttaste gedrückt halten, können Sie auf ein anderes Objekt klicken. Und jetzt werden beide auch ausgewählt, also entweder oder Wörter. Gehen Sie also fort und wählen Sie hier sowohl Ihre quadratische als auch die ovale Form aus, gehen Sie dann zu Objektpfad und führen Sie Hinzufügen aus, was auch durch Halten des Befehls Alt möglich ist. Du bist cool. Was es jetzt getan hat, ist, dass es ein Vereinigungsschaf geschaffen hat , das auf den beiden Formen basiert , die halb sind. Das bedeutet also, dass es vorangegangen ist und diese beiden Formen verbindet, um diese eine Form zu schaffen, die ich jetzt als See nutzen kann. Jetzt sind diese Shapes immer noch in diesen Vereinigungsgruppen enthalten. Wenn ich also in die Form selbst doppelklicke, kann ich hier immer noch auf meine Ellipsen - und Rechteckebene zugreifen . Und ich kann sie immer noch bewegen. Wenn ich es also bewege und es hier in die Ecke lege und dann auslasse, indem ich entweder wegklicke oder Escape drücke, kannst du sehen, wie sich die Formen jetzt geändert haben. Und es ist immer noch ein Schaf. Obwohl ich immer noch auf diese einzelnen Ebenen zugreifen kann , die super cool sind. Dies ermöglicht es uns, einzigartige Formen zu erstellen, die aus einer Kombination mehrerer Formen oder mehrerer Ellipsen, Quadrate, Dreiecken usw. erstellt werden müssen aus einer Kombination mehrerer Formen oder mehrerer Ellipsen, Quadrate, Dreiecken usw. erstellt mehrerer Formen oder mehrerer Ellipsen, Quadrate, . Cool. Jetzt gehe ich zu Command Z, um das einige Male rückgängig zu machen. Und jetzt haben wir unsere Formen als zwei verschiedene Ebenen zurück wie zuvor. Wenn wir nun den anderen Pfad machen , der als Subtrahieren bezeichnet wird, wird er genau das Gegenteil bewirken. Es wird fortfahren und tatsächlich einen gemeinsamen Teil zwischen diesen Formen subtrahieren und entfernen. Denn der Kreis und das Quadrat hatten diese kleine Halbkreisfläche als diesen gemeinsamen Raum zwischen ihnen. Es ist vorangegangen und entfernt das aus den kombinierten Formen, wo es subtrahierte Formen erhält. Dasselbe gilt für Subtraktion. Sie können immer dort hineingehen und Ihre Form bearbeiten , um verschiedene Arten von Subtraktionen zu erstellen. Wenn ich diesen Kreis jetzt komplett aus dem Quadrat nehme, wird es natürlich diesen Kreis jetzt komplett aus dem Quadrat nehme, keine Subtraktion geben, da es keine Orte gibt , an denen diese beiden Formen irgendwie kombiniert werden. Damit boolesche Optionen funktionieren, müssen sich Ihre Shapes überlappen, sonst gibt es nichts zu addieren oder zu subtrahieren. Also mache ich das ein paar Mal rückgängig, gehe zurück zu meinen Formen, und dann versuchen wir es mit dem Intersect. Was Intersect also tut, ist, dass es weitergeht und die gemeinsame Region zwischen diesen beiden Formen findet. Wenn ich also einfach zurückgehe, wie Sie sehen können, überlappen sich beide Formen dieser kleine Bereich. Also werden wir weitermachen und einfach Command Shift Z drücken , um das zu wiederholen. Wie Sie sehen können, wird es diese beiden kombinieren und den Bereich finden , in dem sich diese Formen kreuzen und eine einzigartige Form wie diese schaffen, die ich natürlich immer optimieren kann. Machen wir das rückgängig und gehen zurück zum Objekt. Erkunden, Überlappungen ausschließen, was das Gegenteil von Intersect bewirkt. Es wird weitergehen und den Bereich finden, geteilt wird, und diesen aus der neuen Form entfernen. Endlich konvertierte Pfad. Wir werden diese beiden Formen tatsächlich in einen Pfad umwandeln , was wir damit hatten, dass wir hier drüben diamantaussehende Form bekommen. Wenn ich jetzt in meinen Kreis doppelklicke, kann ich jeden Knoten bearbeiten. Und ich kann aus meinen bereits existierenden Schafen, zu denen er zuvor Zugang hatte, wirklich einzigartige Formen machen . Denken Sie daran, dass Sie, um auf diese Knoten zugreifen zu können, in Ihr Shape doppelklicken müssen. Und dann mach weiter und optimiere diese Form. Wenn du nicht innerhalb des Pfades bist und nichts wird sich ändern. Also musst du sicherstellen, dass du innerhalb des Pfades selbst bist . Und so wie Sie das tun, ist , dass Sie, sobald Sie sich innerhalb des Pfades befinden, jeden Knoten tatsächlich bearbeiten können. Kommandieren wir oft Z und kehren zu unseren Formen zurück. Jetzt befehle ich Z, bis ich meine Ellipse und mein Rechteck anstelle der Pfade sehe . Letzt ist der Objektpfad-Gliederungsstrich. Oder Sie können dies erreichen, indem Sie die Umschalttaste drücken. Und was dies tun wird, ist, dass wir jetzt die Grenzen und die Formen haben. Oder wenn Sie tatsächlich zurückgehen, wie Sie im Ebenenbedienfeld sehen können, haben wir eine Ellipse. Wir haben dieses Quadrat und es ist intakt mit seiner Grenze, indem es Alt-Befehl O anstelle von Verschiebungen drückt. Wenn Sie also Alt Command 0 drücken, sehen Sie jetzt, dass ich einen Umrissstrich erstellt habe. Was das tut, ist, dass es meine Grenze von den Schafen trennt. Jetzt ist die Ellipse eine separate Form. Und die Grenze hier ist der Strich, oder die Grenze hier ist auch eine separate Form oder eine separate Ebene, sollte ich sagen. Jetzt kann ich diese irgendwie bewegen und sie werden voneinander getrennt sein, dann sind sie wirklich mehr verwandt. Und wenn ich einen lösche, siehst du, dass der Umrissstrich immer noch da ist. Und wenn ich den Strich hier lösche, ist die Form still, oder ich schätze, hier ohne seinen Strich zu ellipsen ist da. Wenn Sie also an irgendeinem Punkt den Rahmen von der Form trennen möchten , können Sie dies tun, indem Sie zu Objekt, Pfadgliederungsstrich gehen. Sobald Sie Ihre Shapes ausgewählt haben. Wieder werde ich Command Z ein paar Mal machen. Sie haben wieder meine Schafe als Wort. Und dann wird es einfach weitergehen und das davon trennen. Als wenig Übung bevor wir von booleschen Gruppen fortfahren, möchte ich, dass Sie fortfahren und eine ähnliche Form wie diese erstellen. Ich schätze, es ist eine Art Hantel aussehende Form. Verwenden Sie natürlich Ihre Pfadoptionen unter dem Objekt, um dies zu erreichen, indem mehrere Formen kombinieren, um dieses ähnliche Design zu erreichen. Eine kleine nette Sache , die ich dir sagen möchte. Wenn Sie Shapes duplizieren möchten, können Sie immer auf Befehl D klicken und dann erstellen wir eine andere Form, eine weitere Kopie dieser Form für Sie. Ein kleiner Tipp. Wenn du versuchst, dieses kleine Oval zu duplizieren und es hier zu platzieren. Also ja, ich überlasse das als eine kleine Übung für dich und dann machen wir es gemeinsam in der nächsten Vorlesung. 13. Boolean Options: In Ordnung, wie machen wir diese Form mit unseren booleschen Werkzeugen? Nun, es ist eigentlich nicht so schwierig. Du brauchst einfach drei Formen und dann verbindest du sie zusammen oder fügst sie mit dem booleschen Werkzeug zusammen. Also habe ich hier zwei Ellipsen und ein Rechteck für den Mittelteil hier. Also mache ich weiter und lösche einfach diesen und wiederhole es noch einmal. Also lasst uns zuerst unsere Ellipsen erstellen. Also mache ich weiter und drücke E, erstelle eine Ellipse. Ich bin irgendwie so. Breite und Höhe. Es muss nicht genau so sein. Tun Sie es nur um der Übungslösung willen hier. Und dann können Sie Command D verwenden, um diese Ellipse zu duplizieren. Und dann fahren Sie weiter und bewegen Sie es genau auf dieser Seite hier rüber. Und lassen Sie uns ein Rechteck erstellen, indem wir R drücken und ein Rechteck erstellen, um diese beiden Ellipsen miteinander zu verbinden. Cool, fliehen Sie da raus mit ihrem Fluchtschlüssel. Nun lasst uns fortfahren und alle Formen zusammen auswählen. Stellen Sie sicher, dass Sie alle drei ausgewählt haben. Genau hier. Gehe zum Objektpfad und du hast es erraten, füge hinzu. Oder Sie können auch die Befehlsoption verwenden. Du bist fertig. Jetzt haben wir eine Form oder eine Union billig, die alle drei Formen kombiniert. Und ich kann sogar weitermachen und die Füllung ändern , um ihm alles zu geben, was Phil ich mag, und ein wenig zustimmen, hier drüben zu füllen. Sie können sogar weitermachen und die Grenze entfernen, wenn Sie ihn nicht möchten. Cool. So verwenden wir die boolesche Gruppe, um eine Art Hantel zu erstellen , die wie diese aussieht , die wissen muss, was das ist. Das entwerfe ich gerade diese Form nur außerhalb meiner Kunsttafel. Alles, was Sie außerhalb Ihrer Zeichenfläche entworfen haben, wird also unter diese Art von Teil der Ebenen gehen. Ich kann zurückgehen und alles hier sehen , all meine Kunsttafeln. Oder klicke auf diese Pasteboard, um alles zu sehen , was ein Ort außerhalb von mir ist. Zeichenflächen. Cool. Jetzt, da wir mit Formen vertraut sind und wie man Formen erstellt, sie und verwendet das Eigenschaftenfenster, um sie zu optimieren. Wenn wir in der nächsten Vorlesung wiederkommen und mit Text arbeiten. 14. Text hinzufügen: Es ist endlich an der Zeit, unser Texttool in XD zu erkunden. Das Textwerkzeug ermöglicht es uns also im Wesentlichen, wie der Name schon sagt, Text zu unserem Design hinzuzufügen. Also kann ich zu jedem Zeitpunkt die T-Taste auf meiner Tastatur drücken oder einfach hier zu dieser Textoption gehen. Und dann fahren Sie fort und klicken Sie einfach auf eine beliebige Stelle auf meiner Zeichenfläche, um Text hinzuzufügen. Sie können fortfahren und anfangen zu tippen. Also werde ich nur lesen, dass es sich um einen Beispielpunkttext handelt. Und dann können Sie jederzeit einfach auf Escape klicken, um ein Textfeld zu erhalten , oder klicken Sie einfach an eine andere Stelle außerhalb Ihres Textfelds. Und lasst uns weitermachen und einfach zu unserem Auswahl-Tool zurückkehren. Und jetzt, wie Sie sehen können, scrolle ich einfach rein. Wir haben diesen Text hier drüben. Und alle Eigenschaften sind hier in diesem Eigenschaftenfenster aufgeführt. Das ist also ein Text mit helvetica new font. Es ist derzeit 20 Pixel in Bezug auf die Schriftgröße und hat ein Schriftgewicht von regulär. Und natürlich können wir die Schriftart ändern oder indem wir zu den Schriftarten scrollen , die wir hier haben. Dies sind die Schriftarten, die ich auf meinem Computer installiert habe. Es könnte also anders aussehen als deins. Wenn Sie zu irgendeinem Zeitpunkt neue Schriftarten installieren möchten, können Sie einfach neue Schriftarten installieren und diese sollten problemlos auf Ihr XD geladen werden. Und wenn wir unser Projekt beginnen, untersuchen wir benutzerdefinierten Text und die Installation neuer Schriftarten. Im Moment werde ich es einfach in diese andere Schriftart ändern, Avenir Next the oder wie du das nicht tun musst. Ich zeige Ihnen nur die Texteigenschaften, auf die Sie Zugriff haben. Also kann ich diese 20 Pixel auf 50 ändern. Und ich werde meine Texte vergrößern. Wie du siehst. Ich kann seinen Weg ändern. Sie können es kursiv und ultraleicht machen. Du machst es mutig, schwer, so weiter und so weiter. Jetzt unterscheiden sich diese Optionen je nachdem, welche Schriftart Sie installiert haben und welche Schriftgewichte Sie für diese Schriftart auf Ihrem Computer installiert haben . Daher haben möglicherweise nicht alle Schriftarten so viele Optionen. Einige von ihnen haben vielleicht nur den regulären Ball, und einige von ihnen haben vielleicht das Medium. Dies kann also anders sein, je nachdem, welche Schriftart Sie installiert haben und welche Sie verwenden. Von hier aus können wir den Buchstabenabstand anpassen. Wenn ich also 10 Pixel einsetze , wird der Abstand zwischen den einzelnen Buchstaben erhöht . Und so gibt es einige sehr sichtbar. Aber wenn ich 50 mache, können Sie sehen, dass der Text sich stärker ausbreitet , ist der Abstand zwischen den einzelnen Buchstaben. Ich kann zurück und setze das auf 0. Jetzt ist dies für Ihre Zeilenhöhe, denn Moment haben wir nur eine einzige Zeile. Sie werden nicht wirklich sehen, dass dies einen Unterschied macht. Und ähnlich gilt dies für meinen Absatzabstand, aber weil dies nur ein einfacher Text ist, was bedeutet, dass es sich nur um einen Text handelt , der sich in einer einzigen Zeile befindet. Wir werden diese Optionen nicht wirklich sehen. Viele andere coole Dinge, auf die Sie Zugriff haben. Sie können fortfahren und Ihren Text vollständig in Großbuchstaben und vollständig in Kleinbuchstaben erstellen. Sie können einen Titelfall machen. Jeder Buchstabe oder jedes Wort erster Buchstabe wird also in Großbuchstaben. Sie können Ihre Texte hochstellen oder tiefstellen, die zugrunde liegen, und sogar einen Strike hinzufügen. Dies sind also einige coole Funktionen, auf die Sie Zugriff haben, wenn es um Text geht. Alles andere ist so ziemlich das gleiche wie Shapes. Wir haben also unser Aussehen oder unsere Transparenz. Wir können hier die Füllung oder die Farbe der tatsächlichen Texte ändern die Farbe der tatsächlichen Texte und ihm ein schönes Blau geben. Wir können auch immer noch eine Grenze hinzufügen. Wir können sogar voranschreiten und Schatten hinzufügen. Eine Sache, die ich beachten möchte, ist, dass Sie, wenn Sie einen Punkt x wie diesen haben, wenn Sie ihn bearbeiten möchten, einfach darauf doppelklicken können und Sie Ihren Text bearbeiten können. Wenn ich jetzt einfach weiter und weiter tippe , wie Sie sehen können, werden die Texte einfach ohne Abstand weitergehen . Der Text wird also immer weiter gehen, weil er ein Punkt x ist. An Punkt hat x keine wirklichen Abstände. Sie könnten technisch gesehen die Eingabetaste drücken. Ich bin an bestimmten Stellen, um mehrere Zeilen zu erstellen, aber es gibt nicht die beste Vorgehensweise denn wenn sich Ihre Texte anpassen, wird es nicht sehr gleichmäßig aussehen. Also. Ich zeige Ihnen genau, wie Sie auch Texte zum Absatztyp erstellen können. Eine der übersichtlichen Funktionen , dass Sie, wenn Sie Ihren Text vergrößern möchten , ohne die Schriftgröße hier zu bearbeiten, jemand diese kleine Notiz hierher ziehen und nach unten oder nach oben ziehen kann diese kleine Notiz hierher ziehen und nach unten für eine kleinere Schriftgröße oder nach unten für eine größere Schriftgröße. Und wie Sie auf der richtigen Größe sehen können , ändert sich diese Zahl. Bringen Sie das nur auf 50 Pixel zurück. Und mach weiter und entferne einfach den zusätzlichen Teil und drücke Entf und entkomme da raus. Jetzt ist dies ein Beispiel-Punkt-Tag. nun einen Textumbruch oder einen Absatztext erstellen, können Sie einfach die T-Taste auf Ihrer Tastatur drücken und anstatt auf diese Zeile zu klicken, einfach weiter und ziehen Sie, genau wie Sie mit einem ziehen würden gestalten, wo Ihr Absatz sein soll oder Ihr Textumbruch sein soll. Wenn ich also jetzt hier rübergehe, habe ich ein Textfeld, in das ich einfach weitermachen und anfangen kann zu tippen. Und während ich tippe, können Sie sehen, dass es weitergeht und in eine neue Zeile eingeht , die auf der Form oder dem Rahmen basiert , den ich für meinen Text erstellt habe. So erstellen Sie diesen Absatztext. Und wenn ich jetzt da rausspringe, kann ich dies in Bezug auf die Breite erhöhen. Also kann ich ein längeres Textfeld haben. Ich kann das Gleiche hier tun, indem ich die Höhe vergrößere. Wenn also meine Texte irgendwann die Höhe erreichen, könnten sie versteckt sein, also muss ich weitermachen und sicherstellen, dass meine Größe mit diesem Text übereinstimmt , damit kein Texas versteckt oder übrig bleibt aus diesem Textfeld heraus. Stellen Sie also sicher, dass wenn Sie Text in Ihren Projekten hinzufügen , einige andere coole Sachen, auf die Sie Zugriff haben, die Texte, die durchlaufen werden. Jetzt haben wir eine Zeilenhöhe , die wir bearbeiten können. Wenn Sie dies also auf 200 ändern, sehen Sie, dass die Zeile oder der Abstand zwischen jeder Zeile auf 200 Pixel gestiegen ist. Ich glaube, es waren standardmäßig 68. Also mach weiter und behalte es bei 68. Sie haben neue Absätze, Sie können den Abstand genau hier ändern. Wenn Sie also 50 Pixel machen, ups, 50 Pixel. Und ich gehe zu einem neuen Absatz. Wie Sie bei jedem neuen Absatz sehen können, gibt mir das einen Abstand von 50 Pixeln zwischen ihnen. Da wir jetzt eine feste Größe haben, muss ich mein Textfeld basierend auf der Größe des Textes anpassen . Aber wenn ich hier die automatische Höhe mache, wer passt tatsächlich die Höhe meiner Textfelder an, basierend darauf, wie lange der gesamte Text ist, ist der Text in diesem Textfeld. Wie Sie sehen können, wird die Höhe gesperrt, da sie sich jetzt auf der automatischen Höhe befindet. An jedem Punkt kann ich wieder auf feste Höhe zurückkehren und ihr dann meine eigene Höhe geben. Ich bin mir sicher, dass ich ihm eine bestimmte Höhe geben möchte. An jedem Punkt kann ich weitermachen und auch die automatische Breite machen. Das wäre also das Gleiche, aber in Bezug auf die Breite. Sie können also entweder eine automatische Breite oder eine automatische Höhe wählen. Ob Sie also möchten, ändern Sie dynamisch die Breite des Textfelds oder die Höhe. Das kannst du entsprechend wählen. Oder auch hier können Sie eine feste Größe auswählen, wenn Sie genau wissen Ihr Textfeld diese Breite und diese Höhe benötigt. So fügen wir unseren Projekten Text hinzu. 15. Gruppierungsebenen: wir also anfangen, immer mehr Sachen in unsere Kunsttafel einzufügen , klicken Sie einfach hier drüben, damit wir auf unserem Ebenen-Panel sehen können, Dinge hier ziemlich beschäftigt werden und ziemlich hektisch, wenn Sie will nicht, sie zusammenfassen. Deshalb können wir in unserem Ebenenbedienfeld Dinge tatsächlich gruppieren , die irrelevant sind. Damit wir später bestimmte Objekte zu einer Gruppe gehören und wir leicht Änderungen vornehmen und genau wissen können , was zu Y gehört. In diesem Fall ist es möglicherweise nicht sinnvoll zu gruppieren alles zusammen , weil wir wirklich nur mit den Werkzeugen eines Schafs und den Textwerkzeugen experimentiert haben. Wir haben keine wirkliche Beziehung zwischen diesen Dingen. Aber lassen Sie uns einfach eine andere Kunsttafel erstellen , indem wir auf a drücken hier einfach eine Zeichenfläche zeichnen. Ich habe gerade eine weitere Zeichenfläche erstellt und klicke auf Escape, um aus diesem Kunsttafel-Tool herauszukommen. Aus irgendeinem Grund hat es diese Art Board hier geschaffen. lösche ich. Also ja, anstelle meiner Zeichenfläche werde ich einfach ein paar Rechtecke erstellen. Jetzt. Ich werde das C-Rechteck so machen. Und dann drücke ich die T-Taste auf meiner Tastatur und schreibe einen Titel. Und vielleicht, und dupliziere diesen mit Befehl D. Und ich drücke V und gehe zurück zu meinem Auswahl-Tool und ändere es vielleicht in Beschreibung. Und vielleicht möchte ich diese hier in mein Quadrat aufnehmen und ich werde hier ein weiteres Rechteck erstellen. Und so können wir diese Art von Layout verwenden, um vielleicht Bilder hier hineinzulegen und diese als Karten zu verwenden. Und unser Design war im Wesentlichen eine Organisation bestimmter Dinge wie Beschreibung, Titel und eine Reihe von Bildern, sagen wir mal. Jetzt sind diese Dinge irgendwie relevant oder miteinander verwandt. Was wir also tun können, ist, dass wir fortfahren und tatsächlich alle auswählen können . Und wir können sicherstellen, dass wir auf unserem linken Ebenenfeld hier alles ausgewählt haben. Auch hier können Sie auch Dinge auswählen. Wir können hier auf das oberste Objekt klicken und dann auch zum unteren Objekt gehen. Und während ich die Umschalttaste gedrückt halte, wenn ich klicke, wird alles zwischen meiner ersten und letzten Ebene hier ausgewählt , oder? Die meiste obere und untere Schicht. Und wenn ich dann unter Windows auf Befehl G oder Control G klicke , wird diese Objekte tatsächlich innerhalb einer Gruppe platziert. Jetzt können Sie dies natürlich auch tun, indem Sie zu Objekt gehen und auf Gruppe klicken. Jetzt gehören diese Objekte tatsächlich zu dieser Gruppe, eins hier drüben, ich sehe es in meiner Liste. Und wenn ich das jetzt genau hierher verschiebe, bewegt sich das alles zusammen, weil es Teil einer Gruppe ist. Nur weil Dinge Teil einer Gruppe sind, heißt das nicht , dass ich sie nicht einzeln bearbeiten kann. Wenn ich also hier immer noch Änderungen an meinem Titel vornehmen möchte , mal sehen, ich kann immer noch in die Gruppe doppelklicken und dann den Titel hier auswählen. Ein weiterer ordentlicher Trick ist, dass ich, wenn wir hier in unserer Gruppe sind, wenn ich schnell etwas auswählen möchte, anstatt zu doppelklicken, um in die Gruppe zu gelangen, einfach weitermachen und halten kann Befehl und klicken Sie dann auf was ich will. Das macht das Gleiche. Und wir können weitermachen und zum Beispiel diesen Titel zu einer anderen Sache, die wir tun, optimistisch machen, Header, nicht wissen. So erstellen Sie also tatsächlich Gruppen in XD. Jetzt hat meine Gruppe hier natürlich gerade einen Namen der Gruppe eins. Aber wenn ich auf diese Gruppe 1 klicke oder darauf doppelklicke, kann ich tatsächlich gehen und ihr einen Namen geben. Also kann ich es in den Einkaufswagen benennen. Jetzt wissen wir, was genau diese Gruppe hat. Wenn Sie den Inhalt anstelle einer Gruppe sehen möchten, können Sie einfach auf dieses kleine Ordnersymbol klicken oder erneut darauf klicken, können Sie einfach auf dieses kleine Ordnersymbol klicken oder erneut darauf klicken um die Ebenen auszublenden, die in dieser Gruppe enthalten sind. Chemische Dinge. Wir verwenden diese Höhenoption hier drüben. Ich kann weitermachen und das einfach komplett vor meiner Zeichenfläche verstecken . Dies ist also nützlich, wenn Sie mit etwas arbeiten , bei dem zwei Ebenen übereinander stehen oder in verschiedenen Gruppen übereinander stehen und Sie sich nur auf die eine konzentrieren möchten. Und dann kannst du noch einmal darauf klicken, um sie anzuzeigen. Sie können diese Ebene an Ort und Stelle sperren. Wenn ich jetzt tatsächlich zu meinem Design zurückkehre, kann ich es nicht wirklich ändern. Und wenn ich hierher gehe, siehst du, dass es ein kleines Schlosssymbol gibt und ich kann darauf klicken und es dann wieder entsperren oder das Gleiche von hier aus tun. Und Sie können auch Dinge für den Export markieren. Nehmen wir an, ich möchte diese ganze Gruppe exportieren. Ich kann es von hier aus exportieren oder für Exporte vermarkten, damit es, sobald wir bereit sind zu exportieren, in unseren Chargenexport aufgenommen wird. Und Sie können auch sehen, dass dieses kleine Häkchensymbol hier angezeigt wird , wenn wir es als für den Export markiert haben. Aber natürlich werden wir uns mit dem Export in zukünftigen Vorträgen befassen. So gruppieren Sie die Dinge im Wesentlichen in Ihren Entwürfen. Und wenn Sie tatsächlich die Umschalttaste G drücken, werden sie die Gruppierung der gesamten Gruppe hier aufheben wenn Sie tatsächlich die Umschalttaste G drücken, . Und jetzt sehe ich, dass ich wieder zu meinem vorherigen Layout bin , wo ich nur meine Ebenen habe, ohne dass sie in einer Gruppe sind. Wenn ich also Dinge bewege, haben sie keine Beziehung zueinander und sie werden sich nicht zusammenbewegen. Um Dinge zu gruppieren, wählen Sie alles zusammen und drücken Sie Command G oder Control G unter Windows. Und das wird die Dinge zusammenfassen. Genau als Beispiel, wenn Sie sich erinnern, haben wir mit diesem Wiederholungsraster herumgespielt. Jetzt können Sie irgendwie sehen, wie nützlich es sein wird , wenn wir tatsächlich eine Gruppe wiederholen. Nehmen wir zum Beispiel an, wir haben eine App und möchten, dass mehrere Karten mit verschiedenen Bildern und verschiedenen Texten erscheinen . Wir können das tatsächlich tun und wir können sie sogar horizontal replizieren . Das ist also eine ordentliche Sache, die wir mit einem Wiederholungsraster machen können. Und wir werden es auf jeden Fall in unseren Entwürfen verwenden. Zweimal auf Befehl Z drücken. Ich werde das einfach rückgängig machen und die Gruppierung des Gitters hier aufheben. Geh einfach wieder als Gruppe. Und ja, so gruppieren Sie Dinge und organisieren Ihre Objekte innerhalb von XD. 16. Raster: Was brauchen wir also Gitter in unseren Designs? Nun, mit Hilfe von Rastern können wir Objekte tatsächlich ausrichten und sie entsprechend organisierter platzieren oder auf Zeichenflächen. auf eine beliebige Zeichenfläche klicken, können Sie im Eigenschaftenfenster auf der rechten Seite auf diese Rasteroptionen zugreifen im Eigenschaftenfenster auf der rechten Seite auf diese Rasteroptionen . Und wir haben zwei Arten von Rastern. Wir haben ein Layout-Raster und ein quadratisches Raster. Und die werden wir in dieser Vorlesung schnell durchgehen . Um ein Raster zu verwenden, können Sie hier auf dieses kleine Kontrollkästchen klicken . Und dann erstellen wir ein Raster für uns. Und jetzt ist dies ein Spaltenraster 12 Spalten oder Kunsttafel mit einer Rinnenbreite von 16 Pixeln zwischen jeder Spalte, der Spaltenbreite von 221 Pixeln. Und das hier ist unser Spielraum auf den Seiten hier drüben. Also die linke als die rechte Seite. Wenn er dies auf 0 sagt, wird dieser Rand entfernt und eine gleichmäßig verteilte Spalte erstellt werden. Wir können vergrößern oder eine Dachrinne auf, sagen wir mal 50 Pixel. Und so gibt es jetzt mehr Abstand zwischen unseren Rastern oder unseren Rasterspalten. Wir können unsere Anzahl von Spalten erhöhen oder verringern und so weiter und so weiter. Jetzt ist eine Standardeinstellung für Web-Design, 12 Spalten, ziemlich typisch. Also werden wir irgendwie wieder zu 12, 16 und 243 gehen und auf den Seiten einen Spielraum von 100 hinzufügen. Wenn Sie also an dieser optionalen erneuten Anhörung teilgenommen haben, können Sie tatsächlich den linken und rechten Rand zusammen festlegen , aber Sie können sie auch auf diese Option ändern, wenn Sie möchten. Benutzerdefinierte Ränder von jeder Seite, oben, der rechten Seite, der unteren und linken Seite. Aber normalerweise machen wir einfach die linke und rechte Seite so, weil wir Abstand von der linken und rechten Ecke haben wollen. Und dann können wir unsere Objekte tatsächlich an unseren Rastern ausrichten , so dass wir eine Art organisiertes Layout erstellen. Und wir wissen genau, wie viel Abstand wir zwischen den einzelnen Objekten verwenden. Nun ist eine ordentliche Sache, dass Sie, während Sie hier mit Objekten arbeiten, und es Ihnen die kleine rosa Box zwischen Ihren Objekten zeigt, um Ihnen zu zeigen, dass Sie einen gleichmäßigen Abstand haben zwischen all diesen drei Objekten hier. Oder ich sollte Gruppen sagen, was ziemlich cool ist. Also nochmal Gitter, die uns helfen, unsere Objekte in unserem Design gleichmäßig auszurichten . Und während wir an unserem Projekt arbeiten, werden Sie sehen, dass wir ab und zu Raster verwenden , um sicherzustellen, dass alles in unseren Designs korrekt ausgerichtet und verteilt ist . Wenn die blaue Farbe hier ein wenig ablenkend ist, können wir fortfahren und auf diese kleine Füllung klicken und die Transparenz der Spalten verringern , damit sie verborgener sind und nicht stören mit unseren Entwürfen. Und zu jedem Zeitpunkt können wir weitermachen und es einfach ausschalten. Und jetzt sehen wir, dass unsere Objekte in unseren Zeichenflächen viel schöner und übersichtlicher organisiert sind. Die andere Art von Gitter ist ein quadratisches Gitter. Und im Wesentlichen ist das irgendwie wie ein Gitter und ein gleichmäßiges quadratisches Gitter, das alle dieses Design kreuzen. Wir können hier die quadratische Größe ändern. Du schaffst es, sagen wir 50. Und so haben Sie jetzt einen anderen Gittertyp, bei dem es sowohl die horizontalen als auch die vertikalen Linien gleichmäßig aufweist . Sie können also definitiv eine Quadratwurzel verwenden, wenn Sie spezifischere Ausrichtung wünschen. Vor allem, wenn Sie vielleicht ein Symbol zusammenstellen oder etwas, das mehr Details in Bezug auf den Abstand erfordert . Ansonsten verwenden wir normalerweise ein Layout-Raster. Wenn es um Web - und mobile Apps geht, können Sie sie jederzeit ein- und wieder ein- und ausschalten, wie ich von hier aus erwähnt habe. Wenn Sie dieses Raster zu irgendeinem Zeitpunkt als Standardraster verwenden möchten , können Sie dies zum Standardraster machen. Und auf diese Weise, wenn ich ein paar Änderungen vornehme, sagen wir 20 Raster. Und ich möchte hier drüben ein benutzerdefiniertes Raster verwenden. Und ich möchte, sagen wir jetzt, ich möchte wieder zu diesem Standardraster zurückkehren. Ich kann immer auf die US-Standardeinstellung klicken. Und ich gehe fort und gehe zurück zu den Einstellungen meines Standardrasters, das ich festgelegt habe, was ziemlich praktisch ist. So verwenden Sie also Raster in Adobe XD. Und im nächsten Vortrag werden wir untersuchen, wie wir unsere Objekte auf ihre Kunsttafeln ausrichten und verteilen können. 17. Ausrichtung und Verteilung: Jetzt wissen wir, wie wir unsere Raster tatsächlich verwenden können um die Dinge in unserer Kunsttafel etwas besser auszurichten . Ich zeige Ihnen auch die Ausrichtungs - und Verteilungsfunktionen in XD, da wir diese Funktionen häufiger verwenden , um unsere Objekte innerhalb unserer Entwürfe auszurichten. Um dies zu demonstrieren, klicke ich einfach auf die Taste auf meiner Tastatur und zeichne hier einfach eine andere Zeichenfläche. Nur um Ihnen zu zeigen, wie Verteilung und Ausrichtung funktionieren. Sie müssen diesem Schritt nicht folgen, wenn Sie dies nicht möchten, aber ich ermutige ihn, damit Sie verstehen , wie unsere Ausrichtungstools funktionieren. Jetzt verwende ich die R-Taste und verwende mein Rechteckwerkzeug, um einige Rechtecke zu erstellen, nach dem Zufallsprinzip in meinem Design zu variieren und fünf Rechtecke zu erstellen. Und ich werde einfach weitermachen und aus diesem Rechteck zwei entkommen . Und indem ich die Umschalttaste gedrückt halte, klicke ich auf alle meine Rechtecke. Und nur damit du es besser sehen kannst, werde ich ihnen gleich hier eine Einwilligung geben. Cool. Jetzt haben wir eine Reihe von Rechtecken, die alle sehr ungleichmäßig in meiner Kunsttafel verteilt sind . Lassen Sie mich also einfach hier hineinzoomen, damit Sie es besser sehen können. Das Wichtigste zuerst Wenn Sie ein Objekt ausgewählt haben, spielt es keine Rolle, ob es sich um ein Rechteck oder ein Textfeld oder ähnliches handelt. jedoch die Alt-Taste auf Ihrer Tastatur verwenden, können Sie tatsächlich den Abstand dieses Objekts in Ihrer Zeichenfläche sehen . Zum Beispiel ist dieses Rechteck hier 270 Pixel von oben, 1185 Pixel von unten, 5, 11 Pixel von rechts und 2551 Pixel von links. Und du kannst diesen Vorgang wiederholen. So können Sie nicht nur den Abstand zwischen diesem Objekt und seiner Kunsttafel sehen, sondern auch den Abstand zwischen diesem Objekt und einem anderen Objekt sehen, indem Sie einfach alt halten und über ein anderes Objekt schweben . Auf diese Weise können Sie sehen, wie hoch der Abstand zwischen den einzelnen Objekten ist. Und wenn Sie das durchgehen, werden Sie feststellen, dass meine Objekte überhaupt nicht gleichmäßig verteilt sind. Sie sind sehr zufällig verteilt. Hier ist es, wo eine Frau Features in XD nützlich ist. also alle meine Formen hier klicken und ziehen und auswählen, müssen Sie alle Ihre Formen auswählen oder die, die Sie basierend auf Ihrer Kunsttafel ausrichten möchten. Und dann können wir mit diesen Tools hier drüben können wir verschiedene Ausrichtungsfunktionen ausprobieren. Also ist der erste ausgerichtet, um zu tippen Ich klicke darauf. Xd wird alle diese Rechtecke auf der obersten Ebene zwischen diesen Objekten ausrichten . Also wenn ich das einfach rückgängig mache, denn die oberste Ebene ist dieses Rechteck hier drüben. In allen meinen ausgewählten Rechtecken befinden sich ausgewählte Objekte. Xy wird weitermachen und all diese Rechtecke schieben , um diesem hier zu entsprechen, da dieses an der Spitze ist. In ähnlicher Weise, wenn ich das hier mache , wird es das Gleiche tun, aber in der Mitte meiner gesamten Elternbox hier drüben. Also werden wir weitermachen und sie vertikal in die Mitte ausrichten. Wenn ich das rückgängig mache und es unter dem Strich mache, werden wir sehr ähnlich machen, was es mit der ausgerichteten Registerkarte gemacht wird, aber nach unten, zum unteren Objekt dort, das genau hier war. Mit dieser Option kann ich alle meine Objekte horizontal verteilen. Das bedeutet also, dass XD voranschreitet und gleichmäßige Abstände zwischen allen meinen Objekten schafft . Wenn ich also tatsächlich auf einen klicke und den Abstand überprüfe, indem ich Alt gedrückt halte, kann ich sehen, dass er einen Abstand von 450 Pixeln hat , der ungefähr zwischen jedem Objekt liegt. Und wenn ich sie jetzt alle wieder auswähle, indem einfach über alle Objekte ziehe, kann ich auch etwas sehr ähnliches tun vertikal verteilt genannt wird. Das wird also weitergehen und tatsächlich alle meine Objekte vertikal verteilen alle meine Objekte , so dass sie einen ähnlichen vertikalen Abstand untereinander haben . Und das sind die horizontalen Ausrichtungen. Also links ausgerichtet, richten wir alle meine Objekte an der linken Seite dieser übergeordneten Auswahl aus. Diese ganze Art von übergeordneter Ansicht, die wir über Objekte haben, wäre der linke Punkt hier. Also werden wir weitermachen und alles bis zu diesem Punkt dort drüben schieben . Wenn ich die Mitte mache, wird es weitergehen und alles in die Mitte dieser Box schieben . Und dann, wie Sie es mit der rechten Linie erwarten würden, wird alles auf das richtige Objekt in meiner Auswahl ausgerichtet . Eine Sache ist also noch einmal zu beachten, dass alles relativ zu dem, was Sie ausgewählt haben, ausgerichtet wird. Wenn ich also nur diese habe, sagen wir drei Objekte, und dann werden diese Funktionen unterschiedlich funktionieren , je nachdem, was ich ausgewählt habe. Was ist, wenn Sie all diese wirklich ausrichten möchten? Die gesamte Auswahl hier horizontal in meiner Zeichenfläche wird, wenn ich alle zusammen auswähle und ziehe, XD standardmäßig einrastet , wenn ich horizontal in der Mitte bin und dann ähnlich, wenn wir auch senkrecht in der Mitte sind. Jetzt ist dieser gesamte übergeordnete Container sowohl vertikal als auch horizontal an der Mitte meiner Zeichenfläche ausgerichtet . Und das ist Ihre Ausrichtung und Verteilung in XD. Und die nächste Vorlesung, wenn er zurückkommt und einige unserer Wireframe-UI-Kits erforscht unserer Wireframe-UI-Kits , die das Entwerfen in XD erheblich erleichtern werden. 18. Wireframe UI-Kits: Also hoffe ich, dass du vertraut bist. Also hoffe ich, dass du dich mit XD vertraut machst. Jetzt sind wir fast bereit, unser Projekt tatsächlich in Gang zu bringen. Und das wird offensichtlich der unterhaltsamere Teil des gesamten Kurses sein. Ich kann es also kaum erwarten, mit dir damit anzufangen. Aber bevor wir einsteigen und das tun, im nächsten Abschnitt, während wir unsere Designs brutal mit Wireframe-Kids begonnen hatten , die Adobe XD bietet, die sehr nützlich sind. Und du wirst in nur einer Sekunde sehen warum. Was sollten Sie in Ihrer Menüoption ablegen und auf UI Kits abrufen klicken. Sobald Sie das getan haben, wird XD tatsächlich Ihren Browser öffnen. Und es sollte dich auf einer Seite wie dieser landen. Wenn Sie nicht auf dieser Seite sind, können Sie hier einfach eine Pause machen und diesem Link genau hier folgen. Sie sollten jedoch standardmäßig zu dieser Seite weitergeleitet werden. Und was sind UI-Kits? Nun, UI-Kits sind im Wesentlichen Kinder der Benutzeroberfläche, die bereits von anderen Designern für XD zusammengestellt wurden, so dass Sie sie tatsächlich in Ihren Designs verwenden können , um Ihren Designprozess zu beschleunigen. Das bedeutet also, dass Unternehmen wie Apple, Google, Amazon usw. diese Frameworks erstellt haben, Design-Frameworks , damit Sie diese Kinder tatsächlich gewinnen können . Anstatt also eine Navigationsleiste wie diese hier neu erfinden oder neu zeichnen zu müssen, können Sie diese tatsächlich in Ihren Designs verwenden, was im Wesentlichen das ist, was die meisten Designer tun um nachzuahmen, wie die App in einer echten iPhone- oder iOS-App aussehen wird. Dies ist wirklich wichtig , weil ich gesehen habe, dass Designer diese neu zeichnen oder neu erstellen. Aber es hat wirklich keinen Sinn, denn diese stehen Ihnen kostenlos von Ihrer XD UI Kit-Website zur Verfügung. Egal, ob Sie ein Bootstrap-Projekt für das Web entwerfen oder eine App für Android zusammenstellen. Sie können immer weitermachen und das Kind verwenden, um Ihren Designprozess beschleunigen zu können . Und natürlich werden wir dies im nächsten Abschnitt verwenden während wir an unserer mobilen App arbeiten. gebe Ihnen nur eine Vorstellung davon, wie das funktioniert, Ich gebe Ihnen nur eine Vorstellung davon, wie das funktioniert, und besorge mir das Kit das Apple-Design. Je nachdem, wann Sie dies sehen, können diese Kinder anders sein oder anders aussehen. Also keine Panik, wenn Sie nicht genau den Typ des Kits sehen , den wir hier sehen, oder diese Bilder könnten anders sein. Und je nachdem, was iOS zu diesem Zeitpunkt draußen ist. Also lasst uns weitermachen und auf das Kit holen klicken, das uns zur Apple-Website bringt. Und von hier aus haben wir Zugriff auf iOS- und iPad-OS-Kits, die wir mit diesem kleinen Icon hier zum Dialog herunterladen können . Jetzt ist dies ein bisschen eine große Datei, daher kann es einige Zeit dauern, den Download durchzuführen, also seien Sie geduldig damit. Ich nehme mir Zeit. Und irgendwann wird es sich öffnen. Machen Sie einfach eine Pause hier, wenn nötig. Wenn Sie sich auf einem Mac befinden, führen Sie Ihren üblichen Einrichtungsprozess durch . Und du solltest dann in der Lage sein, diese kleine Datei oder diesen Ordner zu sehen , sollte ich sagen. Und sobald Sie es öffnen, erhalten Sie diese Designvorlage für das iPad. Das ist für das iPhone, glaube ich. Und zu guter Letzt ist dies für Ihre Textilien. Dies ist der, an dem wir interessiert sind, wenn wir für eine iPhone-App entwerfen. Also lasst uns fortfahren und auf die Designvorlagen plus Komponenten plus Anleitungen klicken die Designvorlagen plus Komponenten plus und den iPhone-Punkt TXT streichen. Wenn Sie darauf doppelklicken, öffnet XD es. Wenn Sie nun zur X-Taste aufgefordert werden , Dateien aus Downloads zu öffnen, klicken Sie auf OK. Es kann einige Zeit dauern, diese Datei zu öffnen, also seien Sie geduldig damit. Aber sobald es geladen wird, sollte es ungefähr so aussehen. Wenn meine Designvorlage geöffnet ist, kann ich einfach weitermachen und mal sehen, ich arbeite daran, vielleicht eine Aktivitätsansicht hinzuzufügen , die diese hier steuert. Ich kann einfach weitermachen und diesen kopieren , indem ich darauf klicke und unter Windows auf Steuerung oder Befehl C oder Control C klicke. Gehe zurück zu meinem Projekt und füge dann einfach das Ende ein, wo ich will. Natürlich arbeiten wir gerade nicht an einem iPhone. Apps sind nicht so relevant. Aber eine Sache, die ich beachten möchte, ist, dass beim Importieren oder Einfügen von etwas aus einer anderen Datei diese fehlende Schriftart möglicherweise angezeigt wird. Das liegt also einfach daran, dass Apple bestimmte Schriftarten im Design verwendet hier bestimmte Schriftarten im Design verwendet, die wir nicht auf unserem Computer haben. Dort bekommen wir also diese kleine fehlende Schriftart. Aber Sie können diese Dateien vollständig finden und installieren, und dann sollte dieser Fehler verschwinden. Also keine Panik, wenn du so etwas bekommst. Dies ist normalerweise der Grund, warum es passiert. So verwenden Sie also im Wesentlichen UI-Kits, um Ihren Designprozess zu beschleunigen. Und das macht im Moment vielleicht nicht viel Sinn, aber sobald wir mit der Arbeit an unserem Projekt beginnen, werden Sie sehen, wie nützlich es sein wird. 19. Zoom: Ich sage immer wieder, dass wir zu dem Hauptprojekt kommen , an dem wir arbeiten werden, und wir kommen immer wieder zur Einführung zurück, aber wir sind fast fertig. Dies ist eigentlich die allerletzte Vorlesung dieses Teils der Sektion. Mein Ziel hier ist es sicherzustellen, dass Sie genügend Vertrautheit mit der Software haben , bevor wir tatsächlich in ein großes Projekt einsteigen. Aber natürlich werden wir es Schritt für Schritt und trotzdem weiter lernen. Die ganze Idee besteht darin, sich nicht alles auswendig zu lernen, worüber wir in diesen Vorträgen sprechen , sondern es genug mit Übung zu tun , damit es für Sie selbstverständlich wird. Das ist wirklich der beste Weg, wie ich herausgefunden habe , dass diese Designsoftware oder irgendeine Software im Allgemeinen funktioniert, wenn es darum geht, sie zu lernen. Alles klar, also genug darüber zu reden, wir über das Zoomen. Wie ich bereits erwähnt habe, werden wir das Zoomen in XD untersuchen. Der einfachste Weg, um auf die Zoom-Option zuzugreifen , ist unter Ansicht und im Menü. Wir haben also eine Reihe von Optionen von 100 Prozent ausgehen, was uns die wahre Größe dieses Projekts zeigen wird. Sie wissen also, wenn dieses Projekt 100% war, wird der Benutzer dies tatsächlich sehen. Das ist also wie eine echte Größe wenn Sie so darüber nachdenken möchten, wenn Sie zu 100 Prozent müssen, was natürlich noch ein höherer Zoom ist. Und jetzt sind dies nur Voreinstellungen, aber das sind die interessanteren, Befehl 0 weitergeht und alles, was Sie haben, alle Ihre Zeichenflächen in die gesamte Ansicht passt . Und das ist, um auf diejenigen zu 100 Prozent zuzugreifen und alle Optionen zu erfüllen. Sie können auch Befehl 1 für 100 Prozent ausführen , die zu vier bis einem 100% Befehl 0 verpflichtet sind, um zwischen 0 zu antworten, um alles hineinzupassen. Zu jedem Zeitpunkt können Sie auch Command plus und minus ausführen, wenn Sie ein wenig hinein- und auszoomen möchten. Wenn Sie auf einen bestimmten Abschnitt zoomen möchten, möchte ich hier in dieses kleine Hantel-Ding zoomen . Ich kann das Z auf meiner Tastatur drücken und dann einfach ein kleines Rechteck darum zeichnen und es wird weitergehen und auf diesen Bereich zoomen. Ich gehe zu Command 0, um das rückgängig zu machen. Ein weiterer ordentlicher Trick ist, dass ich, wenn wir daran arbeiten, sagen wir an der bestimmten Art Board, was auch immer ich ausgewählt habe, weitermachen und auf Ansicht klicken und auf Auswahl zoomen kann. Oder es kann Command 3 machen. Und wir zoomen weiter und zoomen genau auf das, was wir uns ansehen. Wenn ich das getan habe, wählen wir an, diese Gruppe wählt sie aus und klickt auf Befehl 3. Und wir zoomen genau auf diese Gruppe. Was großartig ist, wenn Sie mit, sagen wir mal, nur mit einem bestimmten Design arbeiten . Sie möchten sich, wissen Sie, auf das Design und vielleicht auf eine bestimmte Ebene oben konzentrieren das Design und vielleicht oder genauer sein und diese verwenden. Und dann mach weiter und gehe zurück zu einem Zoomlevel von 100% oder 200%. Oder verwenden Sie einfach Ihre Prise auf Ihrem Trackpad oder scrollen Sie mit der Maus, um manuell ein- und auszuzoomen. So. Und natürlich, wenn ich hineinzoome und jetzt kannst du auch sehen, wie sich die Zoomstufe ändert. Wenn Sie mit eingeschaltetem Zoom anpassen möchten, Zoom 25 Prozent wert. kannst du auch erreichen, indem du es einfach hier tippst. Aber das wird irgendwie selten für ja verwendet, im Wesentlichen sind das Ihre Zoom-Optionen. Und die zwei wichtigsten , an die Sie sich erinnern möchten, ein einfaches Drücken des Zed und zeichnen Sie um den Bereich , den Sie zoomen möchten. Führen Sie auch eine Auswahl durch, indem Sie auf etwas klicken, in das Sie zoomen möchten , und dann Befehl 3 drücken. Ich denke, das sind die am häufigsten verwendeten Zoom-Optionen und sie sind ziemlich praktisch. Lassen Sie uns damit in den neuen Bereich einsteigen und an unserem neuen mobilen Design-Projekt arbeiten. 20. Gesunde Bitte: Projekteinführung: Alles klar, Willkommen in der neuen Rubrik. Wir sind bereit, endlich mit unserem mobilen App-Design zu beginnen . Super aufgeregt für diesen Abschnitt und ich denke, du wirst es lieben. Bevor wir also tatsächlich in das Projekt selbst einsteigen, ermutige ich Sie , die Ressourcen aus dieser Vorlesung herunterzuladen . Sie sollten in der Lage sein, eine Datei zu finden. Sie sollten in der Lage sein, einen Ordner wie diesen hier zu finden , gesunde Bisse, Assets für mobile Apps. Dazu gehören alle Dateien, Dokumente und Symbole und Dinge, die Sie benötigen, um diese mobile App tatsächlich mit uns zu entwerfen. Nehmen Sie sich also eine Sekunde Zeit, um das herunterzuladen , entpacken Sie es und öffnen Sie es. Innerhalb dieses Ordners sollten Sie also in der Lage sein, eine kleine Datei wie diese namens Healthy Bites Design Slips zu finden eine kleine Datei wie diese namens Healthy , sind PDF. Machen Sie weiter und öffnen Sie das aus dem Ordner. Im Wesentlichen ist dies unser Designbrief, den der Kunde uns zur Verfügung gestellt hat. Der Kunde wird in diesem Fall als gesunde Bisse bezeichnet. Und das Projekt, an dem wir arbeiten, heißt Healthy Bites mobile Lebensmittelbestell-App. Wenn Sie also nicht wissen, was Sie kurz fassen sollen, ist überhaupt kein Problem. Im Wesentlichen liefert uns ein Brief die ersten Informationen für das Projekt, das von unserem Kunden zur Verfügung gestellt wird. In diesem Brief haben wir normalerweise etwas über den Kunden und das erklärt, was er tut. Vielleicht einige Keywords rund um ihr Unternehmen und seine Projekte, Projektziele und Ziele, wonach sie von diesem Projekt suchen. Und dann sehen Sie manchmal eine Zielmarkt-Slash-Zielgruppe. Das ist also, wen sie versuchen, dieses Produkt zu versorgen 2. Auf diese Weise können wir wirklich sicherstellen, dass wir beim Entwerfen für diese spezifische Zielgruppe entwerfen. Zusammen mit anderen Dingen wie Projektergebnisse. Das ist es, was sie suchen, um sie am Ende dieses Projekts mit ihnen zu liefern. Und dann andere Dinge wie Zeitplan, Budget, welche Richtung sie in Bezug auf die kreative Richtung gehen wollen , vielleicht wer der primäre Ansprechpartner in diesem Unternehmen ist, und dann einige andere Notizen die vom Kunden zur Verfügung gestellt werden. Dieser Brief ist also normalerweise das, was ursprünglich zur Verfügung gestellt wird, wenn Sie mit Kunden oder sogar mit einem Unternehmen arbeiten , in dem Sie arbeiten? Mein bietet so etwas, das beinhaltet, wonach sie suchen. Jetzt kann es manchmal weitere Details unter den Lieferbestandteilen enthalten . Im Moment gehen wir den Brief hier durch. Und dann werden wir uns in der nächsten Vorlesung die Seiten einfallen lassen , die wir in unserer mobilen App benötigen. So können wir dies für unseren Kunden entwerfen. Aber manchmal werden sogar diese Seiten oder Funktionen in diese Anleitung aufgenommen , damit sie Sie genau wissen, wonach sie suchen. Oder manchmal können sie breiter sein wie diese. Und wirklich ist es Ihre Aufgabe, diese Funktionen und Seiten zu entwickeln diese Funktionen und Seiten und was sie in ihrer mobilen App benötigen. Aber jetzt gehen wir weiter und gehen wir diesen Brief durch. Für gesunde Bisse bieten gesunde Bisse Kunden eine einfach zu bedienende mobile Bestell-App für gesunde Lebensmittel und ihre Stadt. Es handelt sich also im Wesentlichen um eine mobile Lebensmittelbestell-App, aber nur für gesunde Lebensmittel. Ziemlich cool. Hier sind ein paar andere Marken-Keywords. Gesundes Essen, sauberes Essen, kohlenhydratarm , Diät usw. kannst du ausführlicher lesen. Unser Ziel ist es also, eine einfach zu bedienende App zur Bestellung von Lebensmitteln zu entwerfen , mit der Kunden in der Nähe gesunde Restaurants durchsuchen mit der Kunden in der Nähe gesunde Restaurants durchsuchen und eine Bestellung über ihr in der App angezeigten Menü aufgeben können. Kunden sollten in der Lage sein, eine Lieferoption festzulegen und den Fortschritt ihrer Bestellungen bei der Vorbereitung und Lieferung zu sehen den Fortschritt ihrer Bestellungen bei der . Cool. So der Zielkunde oder junge Berufstätige im Alter zwischen 22 und 40 Jahren, die nur nach gesunden Mahlzeiten suchen nur nach gesunden Mahlzeiten suchen und sich natürlich um ihre Fitness und Gesundheit kümmern. Und sie kochen selten Essen zu Hause und essen lieber die meiste Zeit auswärts. Also natürlich die eine, die gesunde Option ist. Und das ist es, was sein Unternehmen hier für gesunde Bisse bietet. Und entwarf die Projektergebnisse ein mobiles App-Design für iOS sowie den Prototyp und dann auch ein Logo für ihr Unternehmen, das zusammengestellt wird während des gesamten Projekts. Und es gab einen Zeitplan. Wir haben eine erste Mockups, die in zwei Wochen fällig sind, einen Prototyp in drei Wochen und endgültige Modelle und Ergebnisse. Also genau hier, fällig in vier Wochen. Jetzt sind diese natürlich nur für dieses Projekt in diesem Kurs irgendwie wieder gut gemacht . In der Regel können diese länger dauern je nachdem, wie groß das Projekt ist. Und natürlich sagten sie hier IT-Budget von 6 Tausend US-Dollar. Jetzt laden Sie möglicherweise niedriger oder höher auf, je nachdem, wo Sie sich in Ihrer Designkarriere befinden. Wenn Sie also anfangen, berechnen Sie möglicherweise einen niedrigeren Betrag für Ihr Projekt, was völlig in Ordnung ist. Und dann gehen bis hin zu größeren Projekten, die möglicherweise in größeren Projekten, die möglicherweise in den 45-stelligen Bereichen liegen. In Bezug auf die kreative Ausrichtung möchten wir das Branding eines Unternehmens einschließlich Logo, Farbe und Schriftstile entwickeln . Und dann möchten wir das Logo und die App sauber und modern halten . Und es deutet darauf hin, dass wir natürlich eine grüne Farbe verwenden, um die Gesundheit des Produkts aus Mangel an einem besseren Wort zu zeigen , und so weiter. Und so sind diese primäre Ansprechpartner gerade wieder für das Projekt erfunden wurde. Sie müssen sich darüber keine Sorgen machen, aber normalerweise haben Sie einen primären Ansprechpartner oder andere Stakeholder und Personen, die die Personen genehmigen sollen , die es sein werden das Projekt genehmigen, sobald es abgeschlossen ist. So werden weitere Knoten, einige Icon-Assets für das Mockup bereitgestellt. Dies ist also in dem Ordner enthalten , den Sie von dieser Vorlesung hätten herunterladen sollen. Kommen wir also in einer folgenden Vorlesung zurück und stellen genauer zusammen welche Seiten wir entwerfen müssen, bevor wir mit dem Wireframing und der Erstellung unserer Kunsttafeln beginnen. 21. Inspiration bekommen: In Ordnung, was brauchen wir für diese mobile App? Denn der Kunde hier wird uns gerade das Lieferbestandteil als das mobile App-Design zur Verfügung gestellt . Sie haben uns nicht ausdrücklich angegeben, welche Seiten Sie benötigen oder wir innerhalb dieses Designs oder innerhalb der App haben müssen . werden wir uns selbst einfallen lassen. Also habe ich hier ein Word-Dokument geöffnet Sie können einfach Seiten auf dem Mac oder einem Word-Dokument unter Windows öffnen . Welche Wortbearbeitung auch immer Sie verwenden. Ich mache mir hier nur ein paar Notizen, damit wir wissen, welche Seiten wir in unsere Designs aufnehmen werden. Es wird weitergehen und gesund nach den Anforderungen an die Bestellung von mobilen Lebensmitteln eingeben . Dies wird auch in dem Ordner bereitgestellt , den Sie heruntergeladen haben. Falls Sie also nicht mitverfolgen und die gleichen Notizen machen möchten . Sie können fortfahren und in Ihren Ressourcen darauf zugreifen , dass Sie es auch herunterladen. Woher wissen wir also welche Seiten wir für eine mobile App, für Web App, für jedes Projekt entwerfen müssen für Web App, für jedes Projekt , an dem wir gerade arbeiten. Nun, was ich persönlich gerne mache , ist andere ähnliche Apps zu installieren , die ähnliche Funktionen ausführen. Wir haben also jede Menge Apps zur Bestellung von Lebensmitteln da draußen. Ob es Uber Eats ist, überspringen Sie das Geschirr. Es gibt so viele da draußen, dass wir tatsächlich installieren, herumspielen, vielleicht sogar ausprobieren und tatsächlich etwas bestellen können, damit wir alle benötigten Designs und alle Seiten, die in eine solche App gehen. Das ist also der erste Schritt dazu. Was ist, wenn Sie das bereits getan haben und mehr Inspiration suchen, nun, keine Sorge, es gibt mehr Ressourcen da draußen. Ich werde ein paar Ressourcen mit Ihnen teilen , mit denen Sie sich inspirieren lassen können , wenn Sie sich ansehen , was Sie für Ihr mobiles App-Design benötigen. Oder es ist es. Ich habe also drei Ressourcen geöffnet , die Sie kostenlos nutzen können, um herauszufinden was Sie brauchen, oder sich inspirieren lassen wenn Sie an einer Mobil- oder Web-App arbeiten. Und ich habe die Links zu allen drei und ein wenig Textdokumenten eingefügt allen drei und ein wenig Textdokumenten sie auch aus dieser Vorlesung herunterladen können. Also zuerst ist diese Website namens Moveon Dot Design. Sie können hier tatsächlich iOS- und Android-Apps durchsuchen . Sie haben also einige Screenshots von jeder App heruntergeladen . Wir haben also eine Lieferung, die von uns entworfenen ähnlich ist. Und eine Reihe anderer Apps wie LinkedIn und so weiter und so weiter. Du kannst weitermachen und stöbern. Diese werden nach der App-Kategorie gefiltert. Wenn wir also nur nach Essens- und Getränke-Apps suchen, werden wir dazu aufgefordert, uns zuerst anzumelden. Also gehe ich weiter und klicke einfach hier einloggen. Ich bin gerade weitergegangen und habe mich hier eingeloggt. Ich bitte Sie vielleicht um ein kleines Umfragejahr oder so. Ich gehe einfach weiter und überspringe das. Aber im Wesentlichen, sobald Sie n angemeldet haben, können Sie tatsächlich nach der Art der Apps filtern , nach denen Sie suchen. So können wir nach Kategorie, Essen und Trinken filtern. Und so sehen wir jetzt eine Reihe von Apps, die Essen und Trinken machen. Also klick einfach das erste hier, Deliveroo. Und wie Sie sehen können, haben sie alle Screenshots aus verschiedenen Teilen der App enthalten . Alles von ihrem Begrüßungsbildschirm Standortfreigabe, Surfen , Restaurants, Telefonbestätigungsseiten über Standortfreigabe, Surfen, Restaurants, Telefonbestätigungsseiten usw. bis hin zu den Lieferdetails und so weiter. Jetzt werden wir für unser Projekt nicht so detailliert gehen wie eine App wie diese, da das Design einer App wie diese offensichtlich viel länger dauern wird . Wir werden uns also darauf konzentrieren, es einfach zu halten. Können wir die Kernfunktionalität der App grundlegend nutzen, nämlich nur Lebensmittel, gesunde Lebensmittel über die App zu bestellen . Jetzt können Sie es natürlich immer weiter entwerfen und diese Designs für Feedback von mir senden , was Sie tun können, indem Sie Ihr Projekt senden oder es mit hallo clever auf gmail.com teilen. Und ich werde mein Bestes geben, um auf jedes Projekt zu antworten und Ihnen Feedback zu Ihren Projekten zu hinterlassen . Aber ja, wir werden Ressourcen wie diese nutzen um uns zu inspirieren, welche Seiten wir brauchen und was wir in diese Seiten aufnehmen müssen. andere Ressourcen , auf die Sie Zugriff haben , oder Adobe Stock. Und natürlich dient dies eher zum Herunterladen von Stockbildern. Wenn Sie jedoch nach etwas wie der App zur Lebensmittelbestellung suchen, erhalten Sie immer noch eine Reihe von Seiten, die Sie als Inspiration dafür verwenden können , was Sie in Ihre mobilen Apps aufnehmen können, z. B. diese hier. Experimentieren Sie also gerne damit und durchsuchen Sie diese Ressourcen. Schließlich ist Dribble ein weiteres großartiges, mit dem Sie eine andere App zur Lebensmittelbestellung suchen können , die ich hier gemacht habe. Und sie haben Unmengen von Menschen, die Musternahrungsmittel hochladen , die Arten von Apps bestellen. Wo, sobald Sie n einloggen, können Sie es tatsächlich im Vollbildmodus sehen. Oder du bekommst einfach die Idee von den Miniaturansichten hier drüben. Ziemlich cool. Wenn Sie sich also fragen, wie ich erstellen werde die Seiten erstellen werde, die wir entwerfen werden. Ich werde das einfach benutzen. Kommen wir also in der nächsten Vorlesung zurück und stellen die Seiten zusammen , die wir für unsere App entwerfen werden. 22. App: Alles klar, lassen Sie uns hier Ihre Liste der Seiten , die wir für diese Lebensmittelbestell-App entwerfen müssen erstellen , die wir für diese Lebensmittelbestell-App entwerfen müssen. Wie wir in der letzten Vorlesung durchgegangen sind, können Sie Websites wie mobiles Design verwenden um sich inspirieren zu lassen und sehen, welche Seiten Sie möglicherweise benötigen. Basierend auf dieser Art von Mockups und anderen Modellen , die ich zuvor für Apps zur Bestellung von Lebensmitteln entworfen habe oder bereits eine Reihe von Seiten kenne. Also werde ich weitermachen und diese in diesem Dokument zusammenstellen . Genau zur Erinnerung steht dieses Dokument zum Download zur Verfügung. Die Ressourcen am Anfang dieses Abschnitts. Also die erste Seite, die wir benötigen eine Begrüßungsbildschirm Seite. Dies ist also die Seite , die Sie hier sehen , die normalerweise ein Logo und ein wenig Laden zeigt ein Logo und ein wenig Laden , das als Ladebildschirm fungiert. Und dann benötigen wir eine Anmeldeseite , auf der sich Benutzer mit verschiedenen Konten anmelden oder mit E-Mail und Passwort verwenden. Und dann werden wir wahrscheinlich eine Art Überprüfung durchführen, damit wir eine Überprüfung der Telefonnummer entwerfen können . Da sind wir los. Dann haben wir eine Hauptseite, die die Restaurants zeigt. So können wir entweder diese Hauptseite oder das Restaurant oder die Browser-Seite aufrufen , wirklich alles, was funktioniert. Ich nenne es einfach die Hauptseite, weil es so ist, dass wir normalerweise Benutzer gehen wenn sie die App starten, nachdem sie sich angemeldet haben. Und dann möchten wir wahrscheinlich eine Art Kartenseite oder Ort, an dem Benutzer ihre Adresse für die Lieferung eingeben können. Ich möchte auf jeden Fall eine Profilseite erstellen , von der aus Benutzer auf ihre Informationen, ihre Kreditkarte usw. zugreifen können auf ihre Informationen, ihre Kreditkarte usw. zugreifen . Und wenn wir gerade von Kreditkarte sprechen, wir brauchen auf jeden Fall eine Zahlungsseite. Hier können Benutzer ihre Zahlungsmethode für die App hinzufügen . Mal sehen was sonst noch. Wenn Sie sich jetzt daran erinnern, möchte der Kunde in unserem Brief, dass wir den Fortschritt der Bestellung bei der Vorbereitung und Lieferung anzeigen den Fortschritt der Bestellung . Auf dieser Grundlage nach unserer Art von Hauptseite auf jeden Fall eine Menüseite, möchten wir nach unserer Art von Hauptseite auf jeden Fall eine Menüseite, von der aus Benutzer auf das Restaurant des ausgewählten Restaurants zugreifen können , sowie eine Bestellung Seite , wo sie weitergehen und ihre Bestellungen für das Essen erfreuen , das sie wollen. Und dann schätze ich eine Fortschrittsseite, auf der sie ihren Fortschritt ihrer Bestellung verfolgen können, sehen, wann sie geliefert wird und so weiter und so weiter. Jetzt diese Deliveroo-App hier, die ich im Moveon Dot Design aus der vorherigen Vorlesung geöffnet habe. Reihe anderer Seiten wie Filter und Angebote und so viele andere Optionen wie die Auswahl Ihrer Ernährungsoptionen und ähnliches. Wir brauchen derzeit nicht all diese Funktionen da wir eine einfache Bestell-App entwerfen möchten. Aber wie bereits erwähnt, können Sie diese definitiv gestalten und die Gelegenheit nutzen , um diese Seiten besser zu gestalten. Wir haben also alles hier , was wir uns für unseren Kunden wünschen. Als Übung füge ich auch eine frühere Bestellseite hinzu, füge ich auch eine frühere Bestellseite auf der Sie tatsächlich auf die Bestellungen zugreifen können , die der Kunde in der Vergangenheit aufgegeben hat, damit Kunden ihre vorherigen sehen können befehle. Ich werde diese Seiten und die Übungsseite für Sie verlassen , um diese App zu entwerfen. Da haben wir es also. Das sind unsere App-Anforderungen. Natürlich ist es immer eine gute Idee, dies an Ihren Kunden zu senden Ihren Kunden um festzustellen, ob es genau das ist, was er will, ob etwas fehlt, denn dies ist ein Hin - und Her-Prozess. Sie müssen mit Ihren Kunden arbeiten und darüber kommunizieren , was Sie entwerfen und welche Bedürfnisse sie haben, damit Sie sie erfüllen. Und es gibt hier keine Diskrepanz zwischen den beiden. Sobald wir also unsere Zustimmung von unserem Kunden erhalten haben, was wir davon ausgehen können, dass wir es bereits getan haben. Wir können mit der Gestaltung dieser Seiten fortfahren . Aber bevor wir zu 16 springen und sie tatsächlich entwerfen, werden wir sogenannte Low-Fidelity-Wireframes zusammenstellen , wie dieses, das Sie hier sehen. Wenn Sie also Google Low-Fidelity-Wireframes verwenden, können Sie einige Beispiele dafür sehen, was dies sind. Im Wesentlichen ermöglichen Wireframes einen Blueprint unserer App zu erstellen, der erwähnt, was wir auf dieser Seite benötigen und wohin die Dinge gehen sollten. Es gibt keine Farbe, es ist alles schwarz und weiß. Sie können dies zunächst sogar auf einem Stück Stift und Papier skizzieren . Und ich denke, das werden wir in der nächsten Vorlesung tun , um das Drahtgitter für unsere Seiten zusammenzustellen das Drahtgitter für unsere Seiten bevor wir einsteigen und tatsächlich anfangen, sie zu entwerfen. Also schnapp dir etwas Stift und Papier und wir sehen uns dort. 23. Unsere Wireframes zeichnen: Für diesen nächsten Teil hier und schnappen Sie sich ein paar einfache Stift und Papier, denn wir werden unseren Drahtgitterrahmen tatsächlich auf Stift und Papier zeichnen unseren Drahtgitterrahmen tatsächlich auf und dann in XD verschieben. Lasst uns also hineinspringen und anfangen zu zeichnen oder Wireframes zu zeichnen. Hey, sie sind bereit, mit unserem Wireframing hier anzufangen . Hoffentlich können Sie sich von dort aus eine gute Vorstellung davon machen, was wir hier zeichnen. Also lass mich weitermachen und öffne einfach meinen Stift. Und dann fange ich an, zuerst den Namen des Projekts aufzuschreiben . Also werden wir ein mobiles Mockup für gesunde Bisse machen . Und ich werde einfach eine Box um jede Seite erstellen , die wir für unser Projekt haben. Sie können ein Lineal verwenden, wenn Sie damit sehr genau sein möchten , aber ich werde diese nur von Hand zeichnen. Sie müssen nicht perfekt sein. Denken Sie daran, wir bekommen nur eine Vorstellung davon , was wir wo wollen. Also nur um es dir ein bisschen leichter zu machen , es zu sehen. Aus unserer vorherigen Vorlesung haben wir neun, 10 und 11. Wir haben also zehn Seiten , die wir mit einer als Übung gestaltet werden . Also werden wir die 10 Seiten gestalten oder sie zumindest hier auf unserem Papier verdrahten. Also werde ich versuchen, auf dieser Seite in 4 zu passen. Also wird sie weitermachen und zeichnen. Ich bin eine Art App-Box hier drüben. Für jede Seite. Auch hier müssen Sie nicht perfekt damit umgehen. Die ganze Idee ist, sich einfach ein Bild davon zu machen, was wir entwerfen. Also werde ich die Begrüßungsbildschirm nicht wirklich zeichnen, weil wir nur das Logo dort haben , damit wir wissen , wie das aussehen sollte. Wir machen die Anmeldeseite. Wir werden die Telefonbestätigung durchführen. Wir machen die Hauptseite und wir werden die Standortseite erstellen. Ich gehe einfach weiter und gehe zu einer neuen Seite. Leg das vorerst beiseite. Wir werden auch hier vier schaffen. Also haben wir ein Profil, links. Profil. Wir haben ein Zahlungsmenü. Dies ist die Seite, auf der wir das Menü der Lebensmittel und dann eine Bestellseite sehen , Platz zu sparen. Ich denke, ich kann auch hier in die Fortschrittsseite passen. Entschuldige dich, wenn es ein bisschen schwierig ist, meine Handschrift von dort aus zu lesen, aber die Idee ist, die Wireframes hier zusammenzustellen. Also beginnend von hier auf unserer Anmeldeseite, wie wir es zuvor auf anderen Logging-Seiten gesehen haben. Und wieder können Sie sich von Apps inspirieren lassen , die Sie auf Ihrem Telefon haben , oder einfach die Websites durchsuchen, die wir besucht Wir würden wahrscheinlich irgendwo hier drüben ein Logo machen wollen. So könnten wir hier ein Logo, eine E-Mail- und Passwortoption machen. Also wie der Login-Button. Und wenn Sie sich vielleicht mit Google oder anderen Optionen anmelden möchten , können wir sie auch hier unten auflisten. Also schreibe ich einfach andere Anmeldeoptionen. Und dann vielleicht ein kleiner Text hier drüben für unsere Nutzungsbedingungen und Datenschutzbestimmungen. Link, auf den der Benutzer klicken kann, wenn er seine Nutzungsbedingungen oder seine Datenschutzrichtlinie sehen möchte . Normalerweise legen sie dies irgendwo auf der Anmeldeseite oder vielleicht unter die Profilseiten. Für die Telefonüberprüfung ist ziemlich einfach. Wir wollen nur eine kleine Box , in der sie ihre Telefonnummer mit einer kleinen Home-Taste eingeben können, um als nächstes zu gehen. Damit sie das überprüfen können. Und ziemlich einfach können wir hier einen kleinen Text schreiben, um genau zu beschreiben, was wir von ihnen wollen. Hauptseite, ich möchte eine kleine Navigationsleiste klicken und hier auf eine kleine Navigationsleiste klicken und vielleicht ein kleines Suchfeld haben damit sie nach bestimmten Restaurants suchen können, sowie vielleicht nach einem kleinen Hamburgermenü. So können sie das Menü sehen, von dem wir sprechen, wir haben eigentlich keine Menüseite entworfen. Diese Menüseite führt uns also wirklich zur Profilseite und von dort aus können sie auf andere Optionen zugreifen. Und hier drüben haben wir nur Karten, die die Restaurants zeigen. So können wir hier ein kleines Bild vom Restaurant sowie vom Titel des Restaurants haben. Also werde ich einfach darauf hinweisen. Wir können einen kleinen Titel einbeziehen. Wir können die Bewertung einbeziehen. Also Titel Slash Name des Restaurants, enthalten eine kleine Bewertung, vielleicht einige Dollarzeichen, um die Preisspanne einzuschließen, und dann vielleicht die Art des Essens aus diesem Restaurant. Und dann wiederholen wir das für alle Restaurants, die wir haben und so weiter, so weiter. Für den Standort möchten wir nur weitermachen und ihnen erlauben , nach ihrem Kleid zu suchen. Dies wird also ein kleines Adress-Suchfeld hier mit einer kleinen Karte sein. Und es wird ihre Adresse speichern können. Vielleicht haben wir ein kleines Pin-Symbol, um ihnen zu zeigen, wo ihre Adresse ist. Wir können auch ein wenig CurrentLocation machen. Vielleicht haben wir hier ein kleines Textfeld, um die Schauspielerin zu schreiben. Das ist also wie unsere Low-Fidelity-Wireframes für diese Seiten. Kommen wir dazu in der nächsten Vorlesung zurück , um es abzuschließen. 24. Vollständig schließen: Es ist hier erledigt. Lasst uns weitermachen und einfach diese fünf anderen Low-Fidelity-Mockups für ein Projekt abschließen diese fünf anderen Low-Fidelity-Mockups . Beginnend mit einem Profil werden wir dieses Profil auch als eine Art Menüseite verwenden . Denn wie Sie sich an oder eine andere Seite von der Hauptseite erinnern , wollte ich, dass sie auf dieses kleine Hamburgermenü klicken und von dort aus ihr Profil-Schrägstrich sehen können. Jemand würde vielleicht ein kleines Menü hier machen und das kleine X machen, um das Menü zu schließen, vielleicht haben wir hier machen und das kleine X machen, um das Menü zu schließen, ihr Profilbild hier zusammen mit seinem Namen. Und von hier aus können wir ihnen Zugriff auf eine Reihe von Optionen gewähren , damit wir eine Zählung durchführen können, wenn sie ihre Kontodaten bearbeiten möchten, und wir können den Zahlungsauftragshistorie erstellen. Was brauchen wir sonst noch? Wir brauchen den Standort oder Adresse, die wir jetzt machen werden, wir machen einen kleinen Abmeldeknopf und ich denke, das ist alles, was wir brauchen. Denken Sie daran, wenn uns irgendwann etwas fehlt, können wir immer wiederkommen und diese Wireframes aktualisieren. Die Idee ist also, nur das zu sagen, was wir denken, dass wir es für den Moment brauchen. Also loggen wir uns aus. Da sind wir los. Das ist unsere kleine Menü-Schrägstrich-Profilseite. Wir haben hier eine kleine Zahlungsseite. Hier können wir vielleicht eine Zahlung hinzufügen. Und dann können wir hier oder ihre vorherigen Zahlungen auflisten. Aber die letzten vier Ziffern. Und dann können wir ihnen vielleicht sagen, welche primär sind, und sie dann auch von hier aus hinzufügen können , wenn sie wollen. Noch eine kleine Übung, ich verlasse die hinzufügende Seite für Sie. Zur Erinnerung können Sie mir diese Designs immer schicken und ich gebe Ihnen Feedback zu ihnen, indem ich sie per E-Mail an hallo clever auf gmail.com schicke. Perfekt, wir sind hier fast fertig. Die Speisekarte wird hier den Namen des Restaurants haben. Und dann machen wir eine kleine Unterkategorie, in der wir ihnen vielleicht Getränke zeigen und jede Art von Getränkeoption hier haben können . Und dann vielleicht Stromnetz. Sie wissen, was Sie normalerweise in einem Menü sehen würden. Wir schreiben hier auf , was wir brauchen, in dieser kleinen Karte. Offensichtlich wollen wir den Namen des Getränks oder Menüpunkts. Wir wollen eine kleine Beschreibung. Wir brauchen den Preis und ich denke , das ist alles, was wir vorerst brauchen. Wir könnten auch eine Kalorienzahl machen. Denn denken Sie daran, dass wir dies für unsere Zielkunden entwerfen , die sich ihrer Kalorienzufuhr bewusst sind. Das wird also nichts gutes Feature sein. Und dann können wir vielleicht einen kleinen Plus-Minus-Button damit sie diesen Artikel zur Bestellung hinzufügen oder 90 verschieben können . Natürlich könnte eine Lebensmittelbestell-App tatsächlich viel komplexer sein als nur diese Seiten. Aber wir halten es hier um dieses Kurses willen einfach . Diese Bestellseite kann also Ihre Bestellung enthalten. Es zeigt Ihnen also, was Sie hinzugefügt haben, damit Sie jeden Artikel sehen können, den Sie hinzugefügt haben. Artikelnummer 1, Artikelnummer 2, wir können hier ein kleines Minus haben oder auch so. Entferne dieses Element aus der Liste. Und dann haben wir vielleicht unten eine kleine Menge Summe, die zeigt, wie hoch Ihre Summe sein wird, vielleicht mit Steuern. Und dann ein kleiner Knopf, der besagt, dass Ordnung mit dem Gesamtrot hier drin steht. Und der Button kann so etwas für die Bestellseite haben . Und offensichtlich können wir auf diesen Seiten einen kleinen Zurück-Button haben , um zur vorherigen Seite zurückzukehren, also werden wir die Navigation herausfinden, während wir durchgehen. Und schließlich brauchen wir eine kleine Fortschrittsseite. Also, auf dieser Seite wird der Fortschritt enthalten. So können wir hier eine kleine, vielleicht eine kleine Bar zeigen, die zeigt, in welcher Phase ihre Bestellung hinzugefügt wird zeigen, die zeigt, in welcher Phase ihre Bestellung hinzugefügt wird , von wo aus sie geliefert werden soll , damit wir ihnen genau zeigen können , was gerade vor sich geht. Dann können wir unter dem hier liefern und die Adresse angeben , an die es geliefert wird. gerade davon sprechen, wir können das definitiv auch hier haben. Vielleicht ein kleines Standortsymbol für sie, um sicherzustellen , dass diese Bestellungen an die richtige Adresse geliefert werden. Und das könnte sie zu der Standortseite bringen , die wir gezeichnet haben. Also haben wir die Adresse und dann Bestelldetails. Und hier können sie klicken, um das durchzugehen, ihre Bestellseite, um zu sehen, was die Bestellung ist. Wir können auch einen kleinen Anruf, eine Restaurantoption oder vielleicht sogar eine Ratsbeschluss einbeziehen. Cool. Also los gehst du. Dies ist unser Low-Fidelity-Wireframe für unser Projekt. Diese werden in den von Ihnen heruntergeladenen Ressourcen enthalten sein . So können Sie diese Entwürfe verwenden , anstatt Ihre eigenen zeichnen zu müssen. Und ich ermutige Sie , diese zusätzliche Seite auch als Übung zu zeichnen , die die vorherige Bestellseite oder die Bestellhistorie-Seite enthält. Jetzt, da wir unsere Wireframes haben, was kommen wir in der nächsten Vorlesung zurück und fangen an, unsere XD-Datei zu erstellen? 25. Unsere XD-Datei erstellen: Wenn Sie also die Wireframes in den letzten Vorträgen mit uns gezeichnet haben, können Sie diese Wireframes beim Entwerfen Ihres Projekts verwenden . Aber ansonsten können Sie weitermachen und die gesunden Bisse auch eine PDF-Datei aus den Ressourcen öffnen . Und da drüben habe ich die Skizze aufgenommen, die wir für unsere Wireframes gemacht haben. Von hier aus können Sie also sehen, was wir in jede Seite aufnehmen sollten. Und wenn wir etwas ausgelassen haben, gehen wir natürlich zurück und fügen es unseren Mockups hinzu. Dies gibt Ihnen jedoch eine allgemeine Vorstellung davon, wo Sie anfangen sollen. also für diese Vorlesung Lassen Sie uns also für diese Vorlesung unsere Kunsttafeln für jede Seite einrichten. Hier wissen wir also, dass wir insgesamt 1, 2, 3, 4, 5, 6, 7, 8, 9 Kunsttafeln sowie eine zusätzliche für Sie benötigen 2, 3, 4, 5, 6, 7, 8, 9 Kunsttafeln sowie eine , um das vergangene oder Seitengesetz zu erledigen. Also erstellen wir dort in unserem Projekt 10 Zeichenflächen. Aber bevor wir das zuerst machen, müssen wir tatsächlich ein neues Projekt in XD erstellen. Wir werden weitermachen und das einfach minimieren und unsere XD öffnen. Deshalb entwerfen wir ein iOS-Projekt gemäß den Kundenbriefs. Also habe ich 2021 ein wenig Google-Suche nach dem am häufigsten verwendeten iPhone-Modell gemacht , und es scheint das iPhone 12 zu sein. Und der Grund, warum ich das getan habe, ist, dass Sie beim Entwerfen einer iOS- oder sogar einer Android-App einer iOS- oder sogar einer Android-App herausfinden möchten, welches am häufigsten verwendete Gerät darauf basiert. Und dann erstellen Sie eine Art ansprechendes Design , mit dem wir weitermachen und immer noch auf kleineren oder etwas größeren Bildschirmen arbeiten. Also zeige ich dir, wie das während des gesamten Projekts geht. Aber jetzt lasst uns ein Projekt für das iPhone 12 erstellen. Werde weitermachen und das schließen. Und genau hier in unserem XD, geh rüber nach Hause. Wenn Sie bereits in einem Projekt sind, schließen Sie es und gehen Sie zu Hause und klicken Sie auf und klicken Sie diesen kleinen Pfeil neben dem iPhone 12 Pro Max oder auf welche iPhones im Moment angezeigt werden. Und dann mach weiter und klicke auf iPhone 12. Jetzt, zu der Zeit , in der Sie dieses Video und das am häufigsten verwendete iPhone ansehen, ist anders. Dann kannst du natürlich weitermachen und das als Option nutzen. Wir werden fortfahren und auf dieses iPhone 12 Comma 12 Pro für unsere Zeichenfläche klicken . Und XD wird weitermachen und ein neues Projekt mit dieser iPhone 12-Größe als Standardgröße eröffnen . Wir wissen also, dass wir 12 oder tatsächlich zehn Seiten für unsere Mockups brauchen . Also lasst uns fortfahren und hier diese kleine Zeichenfläche auswählen, die erste, die wir bereits haben. Und dann fahren Sie neunmal auf Command D, obwohl wir unser Kunstbrett neunmal duplizieren. Und sie wird Command Zero treffen , um nur zu sehen, wie viele ich habe. Neun. Okay, perfekt. Ich mache das noch einmal für diese zusätzliche Seite für unsere Bestellhistorie. Jetzt sollten wir also 10 Zeichenflächen haben. Und indem wir Command 0 drücken, können wir sie alle in einer Ansicht anpassen. Und jetzt werden wir diese Zeichenflächen einfach entsprechend umbenennen, gleich nachdem wir unsere eigentliche Datei zuerst selbst umbenannt haben. Also lasst uns weitermachen und auf diesen Namen ohne Titel und Käse für gesunde Bisse klicken. Mobiles Mockup. V eins. Diese kleine V1 soll nur darauf hinweisen, dass dies unsere erste Version ist. Während wir an unseren Entwürfen arbeiten, möchten wir möglicherweise mehrere Versionen erstellen. Vor allem, wenn wir diese XD-Datei exportieren und an unseren Kunden senden . Und das ist, wenn wir die Freigabefunktion nicht verwenden , weil es sonst eine Freigabe ist, die Fisher irgendwie überflüssig machen wird. Oder Sie können Ihre Datei immer auf 1.1 optimieren , wenn Sie kleine Änderungen vornehmen, oder vielleicht auf V2, wenn Sie größere Änderungen vornehmen. Aber im Moment werden wir es als V1 belassen. Fahren Sie fort und klicken Sie auf Speichern. Wenn Sie nun die Vorlesungen fallen und nach jeder Vorlesung verloren sind, speichere ich diese Mockup-Datei, die XD-Datei und gebe sie in eine Mockup-Dateien ein. Aus dieser Vorlesung können Sie diese Mockup-Dateien herunterladen. Und wenn Sie sich zu irgendeinem Zeitpunkt verirren, können Sie dem neuesten oder dem Modell folgen, das Vorlesung am nächsten steht, in der Sie sich ansehen. Nehmen wir an, Sie schauen sich Vortrag 23 an. Und du siehst in einem Mock-up-Ordner, dass es eine Vorlesung 22 gibt. Sie können mit dieser Vorlesung 22 fortfahren, um auf einen zu fallen. Ansonsten ermutige ich Sie, jeden Schritt zu befolgen , damit Sie viel wie möglich aus XD lernen. Lassen Sie uns also jede Zeichenfläche umbenennen. Mache den ersten als Begrüßungsbildschirm. Der zweite hat Login. Jetzt doppelklicke ich nur hier, um den Namen zu bearbeiten. Das können Sie auch im Ebenenbedienfeld hier tun. Werfen Sie einen kurzen Blick darauf. Was haben wir sonst noch? Wir haben eine Telefonbestätigung. Wenn Sie also die Überprüfung anrufen, haben wir unser Hauptseitenprofil, unsere Zahlung, Menü, unsere Bestellung, unseren Fortschritt, oder wir können es sogar mit ihrem Fortschritt tun. Und zu guter Letzt, oder wir nennen stattdessen diese eine Bestellhistorie. Für dieses Profil werde ich eigentlich Profilslash-Menü machen. Dies ist also das Menü der App, nicht das Menü des Restaurants. Jetzt haben wir alle unsere Zeichenflächen an jedem Punkt, an dem wir sie anordnen und bewegen können. Aber im Moment werde ich einfach weitermachen und es so lassen, wie es ist. Jetzt sind wir bereit, mit unserem Begrüßungsbildschirm zu beginnen und uns durch unser Design zu arbeiten. 26. Splash Screen: Alles klar, also zuerst werden wir unseren Begrüßungsbildschirm gestalten. Begrüßungsbildschirme sind also natürlich eine der am einfachsten zu entwerfenden Seiten. Also mache ich weiter und drücke einfach zed und zoome dort hinein. Für unseren Begrüßungsbildschirm möchten wir wahrscheinlich den Hintergrund und dann ein Logo in der Mitte mit dem Namen dieses Unternehmens färben. Offensichtlich haben wir unser Logo noch nicht. Das werden wir in den zukünftigen Vorträgen gestalten. Aber im Moment können wir dieser Seite eine Füllung grüner Farbe geben, da das wie das Farbschema ist, das wir bei diesem Projekt anstreben. Und dann mach weiter und füge einen kleinen Text hinzu. Und dann vielleicht ein kleiner Platzhalter dafür, wohin das Logo gehen wird, sobald wir es entworfen haben. Also zuerst, mach weiter und klicke auf diese Begrüßungsbildseite. Stellen Sie sicher, dass Sie es ausgewählt haben. Die Zeichenfläche hier drüben. Dann geh weiter und klicke auf „Aussehen“. Und Sie können tatsächlich weitermachen und die Füllung dieser Kunsttafel so ändern , wie Sie möchten. Für mich werde ich also die kleine grüne Farbe auswählen, von der ich denke, dass sie für diese App gut aussehen wird. Jetzt schaue ich es hier natürlich nur irgendwie an. Ich habe keine bestimmte Farbe, die ich anstrebe. Und es besteht eine sehr gute Chance, dass wir diese Farbe aktualisieren , wenn wir unsere Color Assets-Vorlesung durchlaufen. Aber im Moment werden wir weitermachen und mit einer ähnlichen Farbe wie dieser hier gehen . Und ich kann genau diese Farbe bekommen, indem diesen kleinen Hex-Code in Ihre Farbauswahl eingebe. Wenn du also weitermachen willst und das genau dort aufschreiben willst, solltest du genau diese Farbe bekommen. Mit diesem kleinen Plus-Symbol kann ich diese Farbe dem Farbfeld hinzufügen , damit Sie sie auch in anderen Objekten wiederverwenden können . Also das Reale, wir haben ein wenig Farbe für unseren Hintergrund. Fügen wir einen Text hinzu, indem wir die Taste t drücken. Und dann mitten auf der Seite. Machen wir weiter und machen gesunde Bytes, was natürlich der Name des Unternehmens ist. Und ich klicke ein paar Mal auf „Flucht“. Und dann offensichtlich ist die Schriftgröße ein bisschen klein. Also werde ich weitermachen und es ein bisschen größer machen. Es nimmt also einen anständigen Teil der Bildschirmgröße ein, aber nicht zu groß. Ich möchte ihm wahrscheinlich stattdessen eine weiße Füllung geben . Standardmäßig sollten Sie diese helvetica neue Schriftart erhalten. Wenn nicht, ändern Sie es hier, indem Sie nach dieser Schriftart suchen. Wir werden uns auch in den zukünftigen Vorträgen mit Schriftarten befassen. Im Moment erstellen wir dies nur als Platzhalter, bis wir unsere benutzerdefinierten Schriftarten verwenden. Und jetzt lasst uns weitermachen und das irgendwie tiefer bringen. Es ist also irgendwie in der Mitte, aber nicht genau. Dies ist also mitten auf der Seite, da diese beiden Arten von Zeilen mir zeigen, dass dies eine zufällige Mitte der Seite ist. Aber wenn ich es etwas tiefer bringe, kann ich hier irgendwie Platz für mein Logo schaffen. Also kann ich ein kleines Rechteck machen, indem ich die Alt-Taste drücke. Und ich werde tatsächlich ein Quadrat machen, indem Umschalttaste gedrückt halte und lass das einfach über ihren Kopf gehen um aus diesem Rechteckwerkzeug herauszukommen. Und dann gehen wir einfach weiter und entfernen Sie es einfach und haben nur einen kleinen Rand damit wir genau wissen, wohin unser Logo gehen wird. Und ich bringe das nur ein bisschen tiefer. Hier wird unser Logo hin. Anstelle dieses kleinen Rechtecks werden wir wiederkommen und das hinzufügen, wenn wir unser Logo entwerfen. Aber im Moment ist dies unser Slice-Bildschirm. Wir gehen in der nächsten Vorlesung zu einem Anmeldebildschirm über. 27. Bilder hinzufügen und Maskieren: Alles klar, jetzt sind wir bereit, unseren Anmeldebildschirm zu gestalten. Ich verspreche Ihnen, dass diese Bildschirme viel aufregender sind als der Bildschirm, weil es viel mehr Inhalte enthält viel mehr Inhalte enthält, die viel lernen werden. Und wir werden lernen, wie man Bildmasken benutzt, was für deine Bilder ziemlich cool ist. Also mach einfach weiter und zoomen Sie in den Bereich, der hier ist. Und in unserem Ressourcenordner sollten Sie in der Lage sein, einen Bildordner zu finden , der einen Anmeldeseitenordner enthält. Sie also weiter und unter den Bildern den Suchen Sie also weiter und unter den Bildern den Ordner der Anmeldeseite und öffnen Sie ihn. Und hier sehen wir, dass wir zwei Bilder haben, die wir auf unserer Anmeldeseite verwenden werden. Was ich also im Sinn habe, ist, dass wir hier unseren Hauptinhalt haben werden , wie wir es in unseren Wireframes haben. Wir haben also unser Logo oder unsere E-Mail und unser Passwort und den Login-Button sowie die Nutzungsbedingungen und alles hier unten. Aber was ich im Hinterkopf habe, ist, dass wir in den Ecken hier ein wenig Bilder von gesunden Lebensmitteln haben können . Wirtschaft geht also auch mit diesem Thema einher. Und natürlich verwenden wir für unseren Login-Button dieselbe grüne Farbe und haben einfach ein E-Mail- und Passwortfeld und sollten von dort aus gut sein. also zu unserem XD zurückkehren, möchten sie diese Bilder zuerst in unsere Datei importieren . Der einfachste Weg, Bilder zu importieren, besteht darin , die gewünschten Bilder auszuwählen. Sie können also fortfahren und Command halten und beide Bilder hier auswählen. Jetzt muss ich unsplash.com die Anerkennung für die Bereitstellung dieser Bilder geben . Wenn Sie kostenlose Bilder in Ihren Projekten verwenden möchten, schauen Sie sich unbedingt Unsplash an. Sie haben eine Menge Bilder, die Sie in Ihren Projekten suchen und verwenden können . Und was ich getan habe, ist, dass ich einfach nach gesundem Essen gesucht habe. Und so kann ich weitermachen und nach diesen gesunden Nahrungsoptionen filtern. Und so habe ich von dort aus diese beiden Bilder heruntergeladen und um sie in mein XD zu importieren, ziehe ich sie einfach auf meine Anmeldeseite. Wie Sie sehen können, sind die Bilder im Vergleich zu unserer Artboard enorm. Also werden wir weitermachen und einfach die Umschalttaste gedrückt halten und die Größe ändern. Und der Grund, warum wir die Schicht halten, ist sicherzustellen , dass wir die Proportionen nicht durcheinander bringen. Also haben wir dieses eine Bild genau hier. Und ich glaubte, dass mein anderes Bild aus irgendwelchen Gründen auf diese Bestellhistorie-Seite gelangt ist. Lassen Sie uns also auch die Größe ändern. Und lasst uns weitermachen und es auch auf unsere Anmeldeseite verschieben. Whoops. Stellen Sie sicher, dass Sie beim Ziehen nicht auf diese kleinen Knöpfe gehen. Andernfalls bearbeiten Sie möglicherweise Ihr Bild, anstatt es zu ziehen. Stellen Sie also sicher, dass Sie in der Mitte oder irgendwo sind, wo es keinen Knoten gibt. Was ich also tun möchte, ist voranzubringen und diese Bilder tatsächlich so zu schneiden , dass wir nur die Platten anstelle des Hintergrunds haben. Und der einfachste Weg, das zu tun, weil diese Kugeln eine Art von Kreisen sind, benutze eine sogenannte Bildmaske. Um also tatsächlich zu maskieren oder Bilder zu maskieren, können wir eine ovale Form erstellen. Also lasst uns fortfahren und E drücken und einen perfekten Kreis erstellen, indem Umschalttaste gedrückt halten und hinüberziehen und dann loslassen. Lasst uns weitergehen und da raus gehen und sicherstellen , dass dies irgendwie oben auf dem Ball steht. Und an jedem Punkt kann ich das Aussehen senken, um sicherzustellen, dass es oben auf dem Ball ist und es so aussieht, als wäre es so. Und so können wir es jetzt tun und auf den Kreis sowie das Bild klicken . Halten Sie also die Umschalttaste gedrückt und stellen Sie sicher, dass Sie beide ausgewählt haben, und gehen Sie dann zu Objekt, Maskieren mit Form Und da hast du es. Das Bild war also eine Art von Ernten in genau diesem Gebiet. Ich kann immer noch darauf doppelklicken und das Bild bearbeiten und bewegen. Dies ist jedoch im Wesentlichen der einfachste Weg, Bildmasken zu erstellen. Es sieht also so aus, als hätte ich das nicht vollständig maskiert. Wenn Sie also sehen, dass Sie hier immer noch Gebiete wie diese schwarze Grenze haben, ist das eigentlich nicht Teil der Grenze weil wir derzeit keine Grenzen haben. Wenn wir also die Grenze herausnehmen, ist das immer noch da, können wir weitermachen und doppelklicken und den Justizkreis lesen , um sicherzustellen, dass er ein bisschen kleiner ist als das Bild. Und auf diese Weise werden wir, wenn wir es beschneiden, fortfahren und alles entfernen, was sich auf der Außenseite befindet. Cool. Da haben wir es also. Wir werden das auswählen und es einfach ein bisschen größer machen und es vielleicht hier unten platzieren. Und dann machen wir das Gleiche hier drüben. Erstellen einer Ellipse. Geh über den Teller, fliehen Sie da raus. Und lasst uns weitermachen und beides auswählen. Wechseln Sie zu Objektmaske mit Form. Sie können dies auch erreichen, indem Sie die Befehlsverschiebung M. drücken und das wird dasselbe tun. Cool, und lass uns weitermachen und das auch größer machen. So heißt diese gesamte Ebene, wie Sie sehen können, Maskengruppe. Aber ähnlich wie bei unseren booleschen Formen können wir immer noch sowohl auf den Kreis, den wir haben, als auch auf das Bild darunter zugreifen , wie wir erwarten. So können wir immer da reingehen und das Bild optimieren und es größer oder kleiner machen und dann zurückgehen. Und wir werden das ein bisschen größer machen und es dort lassen. Kommen wir also in der nächsten Vorlesung zurück, um unsere Anmeldeseite zu vervollständigen. 28. Anmeldeseite: Richtiger Zentrismus, die Anmeldeseite, ich möchte sie mit einem weißen Hintergrund belassen. Und dann fügen wir unser E-Mail-Passwort hinzu. Und dann ein Logo hier drüben mit dem Login-Button. Lasst uns also fortfahren und diese Elemente jetzt hinzufügen. Wir brauchen also ein Rechteck und einen Text für unser E-Mail-Feld. Machen wir das also , indem wir R drücken und dann ein kleines Feld hierher ziehen. Ich mache diesen etwa 50 Pixel in Bezug auf die Höhe. Das sehe ich genau hier. Und dann gehe ich fort und gehe da raus, indem ich zweimal Escape drücke und dann auf Texte klicke und hier ein paar E-Mail-Texte hinzufüge. Und ich denke, das ist ein bisschen groß. Also werden wir 16 Punkte für das E-Mail-Center machen , die ein Jahr sind, und vielleicht 20 Pixel von n in das Textfeld Wüsten-E-Mail machen . Und wir werden es gleich hier drüben stellen. Und dann mit Command G werden wir dies zu einer Gruppe machen und die Gruppe duplizieren, indem Alt gedrückt halten und eine Kopie wegziehen. Dies ist also eine andere Möglichkeit, Objekte tatsächlich zu duplizieren. Sie können Alt halten und während Sie Alt gedrückt halten, eine weitere Kopie dieses Objekts erstellen. Ich lösche einfach das Extra. Und lasst uns die E-Mail hier benennen, um Wörter zu übermitteln. Dies wird das Passwortfeld sein. Und dann wollen wir einen Knopf. Wir können also tatsächlich das gleiche Rechteck verwenden. Wir bringen es einfach hier runter. Und anstatt diesen Text hier zu pingen, werden wir ihn in die Mitte bewegen. Und wir werden das eine Log n. Und eine Sache zu beachten ist, ist, dass Ihr Text wächst oder schrumpft, nicht gerade in der Mitte liegt. Was Sie also tun möchten, wird angepasst, nachdem Sie Ihren Text eingegeben haben und sicherstellen, dass Sie diese zentrierte Textoption diese zentrierte Textoption hier haben, damit die Texte im Mittelpunkt bleiben, wenn Sie am Ende mehr eingeben . Also haben wir unseren Knopf jetzt da. Wir möchten also die Füllung oder den Hintergrund davon in diese grüne Farbe ändern , aber stellen Sie sicher, dass Sie dies nicht auf dieser Ebene tun, da wir gerade die Gruppe anstelle des Rechtecks selbst bearbeiten . Wenn Sie also auf dieser Ebene eine Füllung hinzufügen, Sie sowohl dem Text als auch dem Rechteck eine Füllung hinzu , was wir nicht wollen. Was wir also wollen, ist ein weißer Text und ein grünes Rechteck. Während wir das tun, halten wir den Befehl gedrückt, drücken den Text, ändern diesen, um zu warten, und halten den Befehl gedrückt. Drücken Sie das Rechteck und ändern Sie es in grün. Vielleicht mache ich meinen Text zu einem Blitz, damit er irgendwie glaubwürdiger ist. Und die brauchen wir auch hier drüben. Also lasst uns fortfahren und diese auf unserem Begrüßungsbildschirm auswählen. Halten Sie Alt erneut gedrückt und bringen Sie dies auf diese Seite. Also ziehen wir einfach die Kopie, indem wir Alt voraus halten und etwas kleiner machen , indem wir die Umschalttaste gedrückt halten und sie hier hochziehen. Und lasst uns weitermachen und den Text hier von dem Gewicht ändern , dass wir zwei schwarze haben. Schließlich möchten wir unsere kleinen Nutzungsbedingungen hier haben. Lassen Sie uns also einen neuen Text erstellen, richtig, Nutzungsbedingungen und Datenschutz, Richtlinien. Und fliehen Sie da raus. Und bring das ein bisschen auf die linke Seite. Und wie Sie bemerken, halte ich meine Sachen hier in Einklang. Es ist also sehr wichtig , dass Sie sicherstellen, dass alles gleich groß ist und alles ausgerichtet ist. Und das ist optisch korrekt. Lassen Sie uns fortfahren und diese 21 Schriftgröße auf 14 ändern. Wir brauchen diesen Text nicht, um super groß zu sein. Und tatsächlich können wir die Füllung auf eine Art hellgraue Farbe reduzieren. Und lasst uns weitermachen und einfach alles ein bisschen runterbringen. Es liegt also nicht vollständig übereinander. Das Ding kommt langsam zusammen. Lassen Sie uns ein paar kleine Änderungen vornehmen , um dies viel besser aussehen zu lassen. Zuallererst empfehle ich, abgerundete Ecken zu machen , wenn es um Textfelder und Schaltflächen geht , und zumindest die rauen Ränder um die Schaltflächen herum zu entfernen . Und dann können Sie für die Textfelder völlig weitermachen und es ein bisschen subtiler machen. Also zwei Dinge hier. Lassen Sie uns zuerst den Rahmen von der Schaltfläche entfernen . Dieser Knopf hat also keine Grenze mehr, was gut ist. Gehen wir fort und wählen hier das Rechteck aus und bringen die Ecken und um einen Eckenradius von zu haben, machen wir 10 und wenden dann das Gleiche hier an. Also gehe ich weiter und wähle hier nur das Rechteck aus. Auch hier können Sie in Ihrem Ebenenbedienfeld sicherstellen, dass Sie nur das Rechteck im Gegensatz zur Gruppe auswählen . Und mach das Gleiche hier drüben. Ich halte nur Command gedrückt , um beide Ebenen auszuwählen. Dann mache ich weiter und tippe hier einen Radius von 10 Pixeln ein. Und statt dieser Art von harter, dunklerer grauer Randfarbe, Lasst uns weitermachen und es ein bisschen auf vielleicht um diese Farbe herabbringen , vielleicht ein bisschen dunkler als das. Ich denke, das sieht gut aus. Also kommen wir langsam dorthin. Offensichtlich gibt es noch viel zu tun. Eine andere Sache, die Sie zum Beispiel hinzufügen können, ist, diesen kleinen Text hier zu duplizieren und ihn vielleicht hier zu platzieren. So können wir eine kleine Passwort-Option vergessen haben eine kleine Passwort-Option vergessen und einfach weiter gehen und diese nach links oder rechts ausrichten , Entschuldigung, etwas heruntergedruckt. Bringen Sie unseren Knopf ein wenig runter. Ich denke, das sieht gut aus. Eine andere Kleinigkeit ist , dass wir sowohl den Text hier, die Datenschutzrichtlinie in den Nutzungsbedingungen, weitermachen können sowohl den Text hier, . Wir können sie sogar unterstreichen , indem wir Ihnen das Kommando drücken. Was wir haben diesen Teil des Textes ausgewählt, damit wir zeigen können , dass dies Links zum Benutzer sind. Gehen wir weiter und bewegen dieses Bild einfach ein bisschen zu nahe an sie. Und ich denke, das sieht gut aus. Also da hast du es. Das ist die Anmeldeseite. Und in der nächsten Lektion werden wir wiederkommen und an unserer Telefonbestätigungsseite arbeiten. 29. Phone: In Ordnung, wir haben die Begrüßungsbildseite, die Anmeldeseite, zusammengestellt . Wir kommen mit unserer Seite zur Überprüfung des Telefons voran. Lassen Sie mich weitermachen und mit dieser Taste hineinzoomen und dann die Ansicht Unsere Ansicht wird aus diesem Zoommodus beendet. Im Moment gehe ich einfach schnell zu meinen Wireframes zurück. Alles klar, also habe ich mein Drahtgitter hier geöffnet. Was wir hier also wollen, ist vielleicht ein Text, der besagt, dass dies die Telefonbestätigung mit einer kleinen Beschreibung dessen ist die Telefonbestätigung mit , was sie tun müssen. Natürlich legen Sie dort für die Überprüfung Nummer 4 sowie ein kleines Textfeld und einen nächsten Button ein. Das sollte also ziemlich einfach und unkompliziert sein. Wir brauchen nur zwei Textzeilen. Ein Textfeld hier, das wir von der Anmeldeseite aus verwenden können , und einen nächsten Button. Also können wir auch denselben Login-Button benutzen und wir legen ihn einfach für den nächsten hier hin. Machen wir das in unserer Zeichenfläche zur ausländischen Überprüfung. Um zu beginnen, wähle ich mein E-Mail-Feld sowie meinen Login-Button aus. Ich halte die Verschiebung hier , um beide auszuwählen. Sie können also sehen, dass sowohl Feldgruppen als auch Schaltflächen ausgewählt sind. Gehen wir weiter und drücken Command C zum Kopieren. Gehen Sie auf unsere Telefonbestätigungsseite und drücken Befehl V. Zwei Dinge, die ich Ihnen zuerst sagen möchte, wenn Sie etwas kopieren und eine andere Zeichenfläche auswählen und diese Elemente in diese Zeichenfläche einfügen . Icsi wird es tatsächlich genau dort platzieren, wo sich diese Objekte in der anderen Zeichenfläche befanden in der anderen Zeichenfläche , in die Sie es einfügen. Deshalb hat es unsere Artikel genau dort eingestellt , wo ich sie auf dieser Seite hatte. Das ist also ziemlich nützlich, wenn Sie annehmen, dass Sie ähnliche Elemente, die Sie möchten, an derselben Position einfügen, anstatt sie verschieben und an dieser neuen Position platzieren zu müssen . Aber weil Sie, wie Sie in unseren Wireframes sehen können und wir diese haben, fühlen Sie sie aber im Feld oben, der Button unten. Dann werden wir weitermachen und das einfach bewegen. Also werden wir das angetrieben bringen bis wir vielleicht 140 Pixel tatsächlich 170 Pixel sind. Wir haben etwas Platz für unsere Telefon-Verifizierungstexte. Und lasst uns weitermachen und diesen Knopf runter bringen , bis es darum geht. Lass uns 35 Pixel von unten machen. Und während Sie Elemente ziehen, zeigt XD Ihnen diese kleine rosa und blaue Linie mit einer Zahl, die Ihnen anzeigt, wie viele Pixel Sie von unten oder in Bezug auf andere Objekte sind . Und zur Erinnerung können Sie auch Alt halten, um alle Seiten zu überprüfen. Jetzt sehe ich ihn also in der Mitte. Ich habe 29 Pixel auf der linken Seite, 29 und die Rate und 35 von unten. So irgendwie in der Mitte hier. Wenn Sie Ihren Knopf haben, schauen wir uns hier drüben an. Und du willst es nochmal zentrieren. Sie können diesen horizontalen Ausrichtungsmittelpunkt verwenden. Und sobald Sie darauf klicken, wird diese Schaltfläche in Bezug auf die Zeichenfläche hier zentriert . Dasselbe hier drüben mit diesem Feld. Ich kann sehen, dass ich in der Mitte bin, also möchte ich genau dort sein. Aber lasst uns fortfahren und diese E-Mail-Texte in Telefonnummer ändern . Und lasst uns weitermachen und einen weiteren Text erstellen, indem auf unserer Tastatur T drücken. Telefon schreiben. Verifizierung. Da der letzte Text, der besagt, dass der erstellte Text weiß und gefüllt war, können Sie dort nicht sehen, dass der Text immer noch da ist. Es liegt nur daran, dass es weiß ist und der Hintergrund weiß ist. Es ist irgendwie die Mischung des Endes. Also lasst uns weitermachen und Outfile zwei wählen. Machen wir hier eine grüne Farbe und speichern Sie diese auch in unseren Farbmustern. Ich gehe das an Bord, indem ich auf Command B klicke , damit du ein normales Schriftgewicht verwenden kannst und dann die Schrift auf 25 hochklappen kannst. Perfekt. Lasst uns weitermachen und das hier hochbringen. Also haben wir unsere Gesamtsumme für dort. Und jetzt wollen wir eine kleine Beschreibung, um zu erklären, warum sie ihre Telefonnummern eingeben müssen. Lassen Sie uns die anderen Texte dieses Mal machen , wir erstellen ein Textfeld. Lassen Sie uns weitermachen und es hier auf unserer Tastatur präsentieren , um diese Beschreibung zu erstellen. Betankt. Ich lasse einfach gleich hier rüber los und lass uns weitermachen und auf Band gehen. Bitte geben Sie Ihre Telefonnummer ein , um Ihr Konto zu bestätigen. Eine Sache, die ich Ihnen sagen möchte, ist, dass da ich den Text gerade bearbeite, wenn ich den Text oder die Schriftgröße hier ändere, wie Sie sehen können, nichts passiert. Nichts ändert sich. Und das liegt daran, dass ich mich gerade im Bearbeitungsmodus befinde. Was auch immer ich von hier an genommen habe, wird eine 15-Punkte-Schriftart sein, aber nichts anderes wird sich ändern. Was Sie also tun möchten, ist, dass Sie sicherstellen möchten, dass Sie entweder alle Ihre Texte in Ihrem Textfeld auswählen, gehen Sie fort und drücken Sie Escape, bis Sie dieses Typwerkzeug verlassen haben. Wählen Sie dann Ihr gesamtes Textfeld und legen Sie dann eine neue Schriftgröße fest. Ich werde hier drüben 16 machen. Tray denke funktioniert gut. Und das möchte ich einfach da lassen. Das sieht gut aus. Vielleicht können wir diese nur ein bisschen runterbringen , ebenso wie die Telefonbestätigung hier. Und wie Sie sehen können, rasten die Dinge irgendwie ein, da sie gleichmäßig verteilt sind. Daher ermutige ich, dass Sie Ihren Designs viel Leerzeichen hinzufügen , anstatt zu versuchen, so viele Dinge zu stopfen , wie Sie können, es ist nur eine gute Praxis. Und das Letzte, was wir tun werden, ist fortzufahren und diesen Login auf „Weiter“ zu ändern . Wenn sie also auf Weiter klicken, werden sie dann aufgefordert, den Bestätigungscode für die Telefonnummer einzugeben . Wir werden diesen Bildschirm nicht entwerfen , aber er ist sehr nahe an diesem Bildschirm, außer dass Sie sie nur bitten, den Bestätigungscode, den sie erhalten, auf ihre Telefonnummer einzugeben dass Sie sie nur bitten, den Bestätigungscode, den sie . Fühlen Sie sich frei, dies als Übung zu machen, wenn Sie möchten. Aber ich werde das sofort überspringen. Also haben wir jetzt eine kleine Seite mit Telefonbenachrichtigungen. Ganz einfach, sehr unkompliziert. Und in der nächsten Vorlesung, wenn es zurückkommt und unsere Zeichenflächen einfach ein wenig organisiert , weil sie im Moment keine richtigen Befehle haben. Kommen wir also in der nächsten Vorlesung zurück und arbeiten daran. 30. Unsere Kunstboards organisieren: Als wir also angefangen haben, unsere Kunsttafeln überall zu erstellen, erklärten wir, dass wir zurückkommen und es ein wenig organisieren werden, weil es im Moment nur in einer zufälligen Reihenfolge oder in der Reihenfolge der Seiten ist, die wir haben in unserem Textdokument aufgeschrieben. Aber jetzt ermutige ich Sie, Ihre Zeichenflächen auf eine Weise zu organisieren , die für Sie sinnvoll ist, Ihre Kunden sinnvoll ist und es ist nur lesbar, wenn jemand von außen dieses Projekt öffnet und versucht zu verstehen , was wohin geht. Der beste Weg, dies zu tun, am einfachsten, drücken Sie zunächst Befehl 0, um zu verkleinern und alle Ihre Kunsttafeln zu sehen. Was ich tun werde, ist, dass ich die Zeichenflächen trennen und gruppiere, die füreinander relevant sind. Das ist also der beste Weg, um Dinge zum Laufen zu bringen. Jetzt passen der Begrüßungsbildschirm und die Anmeldeseite gut zusammen, da wir normalerweise vom Begrüßungsbildschirm aus zur Anmeldeseite oder von diesem fünf Bildschirm gehen , wenn der Benutzer angemeldet ist, normalerweise gehen wir auf die Hauptseite und dann sind die Anmeldeseite und die Formularüberprüfung ebenfalls verwandt, da normalerweise nach der Anmeldung des Benutzers aufgefordert wird, seine Telefonnummer zu überprüfen. Die Platzierung dieser drei Einstiegsbildschirme ist also gut. Meiner Meinung nach. Ich denke, die Hauptseite ist auch gut wo sie ist. Aber was ich tun möchte, ist, dass ich das Profil und die Zahlungsseite trennen , sie irgendwo zusammenfügen und dann das Menü und den Auftragsschrägstrich zusammenkommen. Und dann sollte die Bestellhistorie auch mit einem Profil übereinstimmen, da sie vom Profil aus zugänglich sein wird aus zugänglich sein , während wir unser Drahtgitter hier eingezeichnet haben. Also lasst uns weitermachen und das machen. Das ist Verschieben Sie das Profilmenü hier hoch. Ein bisschen Abstand. Und dann sollte die Zahlung auch hier gehen, da sie von der Profilseiten-Slash-Menüseite aus zugänglich ist . Wir werden auch hier die Bestellhistorie aufbringen . Und dann lasst uns fortfahren und all diese drei auswählen und sie dann direkt hierher bringen. Jetzt gibt es eine kleine Beziehung zwischen ihnen, wo Sie von der Hauptseite zur Profilseite gehen. Sie können die Profilseite öffnen. Und von dieser Profilseite aus können Sie auf die Seite Zahlung und den Bestellverlauf gehen , wenn Sie möchten. Und dann gehst du von der Hauptseite normalerweise zur Speisekarte des Restaurants. der Menüseite beginnen Sie mit der Bestellung und sehen Sie dann auf Ihrer Bestellseite Ihren Bestellfortschritt. Diese Art von Flow ist also sinnvoller. Fühlen Sie sich frei, auch einen Text hinzuzufügen, wenn Sie möchten. So können wir vollkommen ein Textwerkzeug in unserer Pasteboard hinzufügen, das im Wesentlichen dieser Bereich auf der Außenseite unserer Zeichenflächen ist . Wir können Menüoptionen machen. Ich werde weitermachen und dem eine schwarze Füllung mit einer Schriftgröße von 100 geben . Menü-Optionen. Ziehen Sie eine Kopie mit Alt hierher, melden Sie sich an und ziehen Sie eine weitere Kopie hierher. Bestellen Sie bestellen. Lasst uns weitermachen und diese einfach ein bisschen runterbringen. Ein cooler Trick, wenn du Sachen bewegst. Wenn Sie den Pfeil nach unten drücken, bewegen Sie die Dinge jeweils ein Pixel oder den Pfeil nach oben, dasselbe mit rechts und links. Aber wenn Sie die Umschalttaste gedrückt halten, fahren Sie fort und führen diesen Vorgang tatsächlich um 10 Pixel gleichzeitig aus. Es ist also viel schneller , Objekte zu bewegen. Dies gilt für Kunsttafeln, sind Objekte, Texte, alles, was gefangen wird. Jetzt haben wir unsere Zeichenflächen irgendwie in verschiedenen Abschnitten organisieren . Wir haben die Menüoptionen, die Bestellbildschirme und die Anmeldebildschirme, viel ordentlicher und viel besser organisiert. Als nächstes kommen wir zurück und erstellen eine kleine Navigationsstruktur für unsere Hauptmenüreihen- und Bestellfortschrittsseiten. 31. Verwendung einer Navigation: Also haben wir unsere Seiten oder die Zeichenflächen hier alle organisiert. Nun, das ist großartig. Jetzt denke ich, dass es an der Zeit ist, die Navigationsstruktur zusammenzustellen . Wenn Sie sich also dieses Drahtgitter ansehen , das wir zwischen diesen Seiten des Mittelwerts oder des Ortes oder der Adresse, des PJ, des Zahlungsmenüs und der Bestellung zusammengestellt zwischen diesen Seiten des Mittelwerts oder des Ortes oder der Adresse, des PJ, des Zahlungsmenüs und der haben. Wir haben hier oben eine kleine Art Navigationsstruktur. Jetzt können wir natürlich weitermachen und diese hier platzieren. Aber wie ich Ihnen bereits erwähnt habe, verfügt Apple über dieses iOS-UI-Kit , mit dem Sie iOS-Navigationsleisten tatsächlich in Ihr Projekt einfügen können , ohne es tatsächlich neu zeichnen oder in Ihren Designs neu erstellen zu müssen. Und das spart uns viel Zeit, wenn es darum geht dieses UI-Kit zu entwerfen und zu erhalten. Wenn du dem letzten Abschnitt folgst, haben wir ihn durchgegangen, aber wir werden ihn noch einmal durchgehen. Einfach, du musst zur Datei gehen, UI Kits abrufen. Sobald diese Seite geöffnet ist, gehen Sie zu Apple Design. Es sollte der Erste hier sein. Was ist wenn nicht, scrollen Sie nach unten und finden Sie es? Da wir für ein iOS-Projekt entwerfen, wir das Apple-Design-Kit herunter. Also klicke auf Hol dir das Kit und gehe dann hier runter zu XD. Machen wir weiter und machen zwei Dinge. Klicken Sie also hier für die Designvorlage iOS und iPad OS XD auf Download für diese XD-Option . Also lasst uns weitermachen und das machen. Wenn Sie es bereits aus den vorherigen Vorlesungen haben, können Sie denselben verwenden. Wenn nicht, geh weiter und gib ihm etwas Zeit zum Herunterladen. Und in der Zwischenzeit gehen Sie weiter zu den Schriften. Und wenn Sie die Apple-Fans nicht haben, ist es auch ein guter Zeitpunkt, um den SF Pro herunterzuladen, einer Schriftart, die Apple standardmäßig in seinen Apps verwendet. Also werden wir diese SF-Profile auch in unserer App verwenden . Also lasst uns weitermachen und klicken. Okay, es gibt verschiedene Variationen dieser SF-Schriftart. Es gibt auch SF-Verbindungen und Säuren, Mono und andere, aber wir werden uns nur an den SF Pro halten. Also machen Sie als erstes für die iOS 15-Designvorlage die Installation durch. Ab sofort sollten Sie diese beiden öffnen lassen. Und sind diese Seiten in Windows vielleicht anders aussehen, aber Sie sollten trotzdem in der Lage sein, die iOS 15-Designvorlage sowie ein SF-Profilpaket zu erhalten die iOS 15-Designvorlage sowie , das Sie installieren können. Also werde ich zuerst die Schriftarten installieren indem ich einfach auf diese oder hier doppelklicke. Ich mache weiter und führe dich durch eine kleine Installation, Pfirsich, was ziemlich einfach ist. Und ich Watson umwerfend. Und mach weiter und schließe das hier. Geh in den Müll. Und lasst uns fortfahren und doppelklicken Sie jetzt in unsere Designvorlage für iOS 15. Jetzt öffnen wir das hier drüben. Es heißt Designvorlagen plus Komponenten plus Anleitungen Plus iPhone oder iPhone Dot TXT. Mach das auf. Jetzt kann es eine Sekunde dauern, um es zu laden, da es sich um eine große Datei handelt. Aber sobald es geladen ist, werden wir eine Navigationsleiste für unser Modell finden . Und da hast du es. Also wollen wir eine Sache von hier nehmen, nämlich die Navigationsleiste. Also lasst uns weitermachen und den Balkenbereich hier drüben vergrößern. Und wir haben diese hier, speziell auf der Suche nach diesem hier, dem wir suchen. Wir haben auch eine Reihe verschiedener Typen. Wir haben also eine kleine Suche, die wir für unsere Hauptseite verwenden können. Wie Sie sich erinnern, haben wir hier einen kleinen Anstieg, selbst für unseren Standort, und wir können diese Navigation im Textbox-Stil verwenden . Warum gehen wir also nicht weiter und wechseln hier zum Apple Kid zurück. Und lasst uns weitermachen und diesen hier auswählen, sowie dieses hier. Also ich will diese beiden von hier oben werden wir auch diese auswählen. Ich halte nur Command und Shift, wähle diese ebenfalls aus. Jetzt haben wir diese drei ausgewählt. Lass uns weitermachen und kopieren. Wechseln Sie wieder hierher. Und genau auf dieser Seite hier drüben werde ich diese einfügen.Los und zieh diese einfach hier raus. Nur zwischenzeitlich. In Ordnung, also werden wir diesen hier wahrscheinlich für unsere Hauptseite verwenden . Also lasst uns das kopieren und einfügen und dort hinein ziehen und nach oben ziehen. Und wir wollen wahrscheinlich auch dasselbe für unsere Menüseite, falls Sie nach Sortieren suchen müssen, führen Sie Befehl C aus, fügen Sie diesen hier ein, falls Sie nach bestimmten Menü-Lebensmitteln suchen möchten . Für unsere Bestellseite können wir diese jedoch genau hier machen. Wir brauchen nicht wirklich eine Suchleiste für dort drüben. Und dann kopiere ich für den Bestellfortschritt diesen und füge ihn auch hier ein. Denn dann müssen wir auf diesen Seiten nichts suchen. Wir brauchen diese Suchleiste nicht. Und dann wollen wir unter Profil tatsächlich eine benutzerdefinierte Navigation dort haben. Wir brauchen nicht wirklich eine Navigationsleiste. Und hier können wir diesen hier auf diese beiden Seiten kopieren , die Zahlungsseite und die Bestellhistorie-Seite. Während wir unsere Designs durchgehen, werden wir diese Titel und alles im gesamten Bereich ändern diese Titel und alles im gesamten Machen Sie sich keine Sorgen darüber, wenn Sie sich fragen, warum wir es verlassen wie es vorerst ist, wollen wir nur die gesamte Navigationsstruktur zusammenstellen . Jetzt haben wir die Navigationsstruktur auf allen Seiten, die ich möchte, mit Ausnahme einiger Seiten die wir meiner Meinung nach nicht benötigen, wie z. B. eine Telefonüberprüfung und die Profilseite, der hier einen kleinen Exponenten haben wird, um das zu schließen. Und während wir unser Design durchgehen, ersetzen wir jeden Knopf entsprechend dem, was er sein sollte. Lassen Sie uns also in der nächsten Vorlesung wiederkommen , um weiter an unserer Hauptseite zu arbeiten. 32. Kartenbilder erstellen: Entwerfen von Kartenansichten. Dies ist einer meiner Lieblingsteile des UI-Designs. Was ist eine Kartenansicht? Was im Wesentlichen eine Kartenansicht als jeder von Ihnen hat, normalerweise ein Bild mit einer Reihe von Texten, Symbolen und Schaltflächen wie ein organisierter Inhalt, der eine Reihe von Informationen enthält , die ist nützlich oder relevant für diese Seite. Wenn wir zum Beispiel darauf zoomen, bin ich wieder beim mobilen Design. Und wenn ich nach unten scrolle, äh, sehen wir uns diese Bestellseite hier an. Du kannst irgendwie sehen, dass das hier eine Karte ist. Im Wesentlichen. Es hat vielleicht keinen großen Teiler zwischen den verschiedenen, aber Sie können völlig Karten erstellen, bei denen es einen vollen Teiler und einen Schatten hat und alles mit einer Grenze oder einfach so etwas wo Sie ein Bild haben, Menge Informationen hier drin, sowie es könnte sogar einen Button haben. Dies wird also im Wesentlichen als Kartenansicht bezeichnet. In diesem Vortrag werden wir einen für unsere Restaurants entwerfen. Hier können wir also Restaurants durchsuchen, die in diesem Warenkorb angezeigt werden. Wenn wir zu meinem Wireframe zurückkehren, haben wir diesen pH-Wert hier auf unserer Hauptseite. Wie Sie hier sehen können, habe ich irgendwie versucht, diese Musterkarte hier zu skizzieren . Und da drin wollen wir einen Titel oder einen Schrägstrich den Namen des Restaurants. Wir möchten eine kleine Bewertung, um den Kunden zu zeigen , was die Lektüre des Restaurants ist. Und dann wollen wir einen kleinen Preis und die Art des Essens , das sie servieren. In diesem Vortrag werden wir das in einer netten kleinen Kartenschnittstelle zusammenstellen . Gehen wir also weiter und wechseln zurück zu XD und zoomen Sie hier auf unsere Hauptseite. Und mit R werde ich ein Rechteck erstellen. Gleich hier drüben. Ich mache einen, der etwa 200 Pixel hoch ist. Und lasst uns weitergehen und da raus und messen einfach die Distanz und das ist nicht ganz in der Mitte. Also verwende ich die Pfeiltaste, um das zu zentrieren, und das ist jetzt ziemlich zentriert. Das ist also meine kleine Karte. Ich werde hier eine Reihe von Texten platzieren , die wir wollen. Also mache ich mir einfach ein paar Notizen auf der Seite hier drüben. Wir wollen den Typ. Lassen Sie uns weitermachen und dies auf 14 Schriftgröße ändern. Also wollten wir die Art des Essens. Wir wollen den Namen. Ich werde einfach weitermachen und das hier ausrichten. Whoops. Ich möchte das in meinen Sportarten stecken, ich kann einfach schreiben, was ich lesen möchte , sowie die Preisspanne. Das sind also die vier Dinge, die ich will. Also werde ich fortfahren und für jeden von ihnen ein Textfeld erstellen. Also das erste, was wir zuerst den Restaurantnamen machen werden . Wenn ich das t hier verwende, habe ich hier ein Textfeld erstellt. Ich gehe weiter und gehe da raus und stelle das irgendwo hier drüben ab, glaube ich. Und eine Reihe darunter. Und wir werden 2 Dollar-Schilder machen , nur um zu zeigen, welche Art von Preisspanne der Kunde erwarten kann. Das ist also unsere Preisspanne. Wir wollen etwas für unsere Lektüre. Warum also machen wir nicht weiter und duplizieren diese und machen es nur als Beispiel, du kannst 4.5 machen. Und dann können wir in die Klammern die Anzahl der Personen, die diesem ein Restaurant gegeben haben , wie viele Lesungen? Du kannst das auf die Seite bringen? Und ich denke, wir können hier auch eine kleine Sternikone platzieren . Wenn wir also die Icons durchgehen, kommen wir zurück und fügen dies ebenfalls hinzu. Geh einfach weiter und platziere es ein bisschen aus. Und dann wollte ich diese Texte eigentlich 12 Pixel haben. Und der Restaurantname, ich möchte, dass er 16 Pixel für die Schriftgröße beträgt. Schließlich brauchen wir nur die Art des Essens. Warum machen wir also nicht weiter und legen das hier rechts ab. So können wir nur als Beispiel Italienisch für die Art des Essens machen. Und ich werde weitermachen und das einfach so ausrichten, dass es 14 Pixel von rechts sind. Und ich denke im Hintergrund können wir hier ein kleines Bild vom Restaurant haben. Und dann werden wir fortfahren und tatsächlich einige Daten in diese Seite eingeben . Es ist also nicht nur ein Platzhalter wie dieser hier drüben. Also lasst uns weitermachen und das jetzt loswerden. Das ist also unsere kleine Karte. Gehen wir in der nächsten Vorlesung zurück. Geben Sie einige echte Daten ein und polieren Sie diese. 33. Polieren von unserer Kartenansicht: Alles klar, also sind wir bereit, unsere Kartenansicht hier zu polieren. Also werden wir ein paar Dinge machen. Ich gehe sie durch. Fühlen Sie sich also frei, hier die gleichen Schritte mit mir zu machen. Und dann erkläre ich genau, was wir tun. Also das erste, was ich ein Rechteck erstellen werde , und hier werde ich dieses verwenden, um unser Restaurantbild zu zeigen. Dann mache ich weiter und bringe diese Texte ein wenig runter , damit sie irgendwie anderen Bar zentriert sind. Und dann werden wir weitermachen und diesen einfach mit diesen Texten hier ausrichten . Perfekt. Ich möchte meine Ausrichtung vornehmen und sicherstellen, dass wir jeder Seite die gleiche Anzahl von Pixeln haben. Und wieder verwende ich Alt hier. Also werde ich unsere Kartenansicht hier abrunden. Also lasst uns weitermachen und auf dieses kleine, kleine Rechteck klicken , das alles hier hält. Und dann gehen wir weiter und runden die Grenzen um, lasst uns 12 Pixel machen. Und dann machen wir einfach das Gleiche aber mit diesem Rechteck für die Bilder. Aber außer dass wir es nur bis zu diesen beiden oberen Ecken machen werden. Also lasst uns weitermachen und alt halten. Was wir auch diese beiden optimieren. Machen wir 12 und 12 hier drüben. Ich kann dieses Array auch hier sehen und ich kann sie von hier aus optimieren. Ich denke, das sieht gut aus. Was wir jetzt tun wollen, ist zunächst, dass ich vornehme und sicherstellen werde, dass meine Grenze sehr leicht ist, indem ich die Deckkraft auf vielleicht irgendwo hier runterbringe. Und lasst uns weitermachen und das auch in unserem Farbfeld speichern auch in unserem Farbfeld speichern falls Sie es später für diese Texte verwenden möchten. Lassen Sie uns vorgehen und zuerst, indem Sie Befehl B drücken. Und wir werden nur den kleineren Text hier unten fetten den kleineren Text hier unten , damit es ein bisschen leichter lesbar ist. Und von den Ressourcen , die Sie heruntergeladen haben, sollten Sie in der Lage sein, einen kleinen Icons-Ordner zu finden. Und in diesem Icons-Ordner sollte es einen Hauptordner geben , den Sie öffnen können. Und dann von dort aus dieses kleine Icon hier, Star Dot PNG. Also werden wir fortfahren und das Startup-PNG importieren. Und hier ist es los und zieh es einfach rein. Jetzt ist die Größe viel zu groß, also lasst uns weitermachen und zuerst weitermachen und dies auf 20 Pixel ändern. Eigentlich denke ich, dass wir 16 bis 16 machen können. Und lasst uns weitermachen und das hier reinbringen und diese einfach neu einstellen. Also ist hier alles irgendwie ausgerichtet. Ich werde diese beiden zusammenfassen, indem ich Command G drücke, während ich sie auswähle. Lasst uns weitermachen und tatsächlich eine Gruppe aus dem Ganzen erstellen . alles ausgewählt haben, indem Sie Command G Stellen Sie sicher, dass Sie alles ausgewählt haben, indem Sie Command G drücken. Jetzt ist dieser hier nur meine Navigationsleiste, also musst du diese nicht auswählen. Da sind wir los. Und jetzt haben wir eine ausgefeilte Kartenansicht, die zur Verwendung bereit ist und wir sind bereit, einige Beispieldaten hinzuzufügen. Aber vorher sollten wir ein Wiederholungsraster verwenden und dieses vertikale Wiederholungsraster dreimal ziehen. Wir haben also drei Exemplare dieser Gruppe. Und so können wir jetzt tatsächlich drei verschiedene Restaurants hier eingeben. Kommen wir also in der nächsten Vorlesung zu, um hier einige Beispieldaten einzugeben. 34. Beispieldaten eingeben: Wenn Sie bereit sind, geben wir einige Beispieldaten für hier oder die Hauptseite einige Beispieldaten für unser Restaurant Peach ein. Vorher werde ich einfach weitermachen und diese ganze Gruppe ein wenig nach oben bewegen diese ganze Gruppe ein wenig nach oben oder das Raster wiederholen. Ich denke, das sieht besser aus. Jetzt habe ich 25 Pixel von der Navigationsleiste entfernt, was viel besser aussieht. Also hier ist das wirklich Coole an Repeat Grid. Wenn Sie es verwenden , um Objekte zu wiederholen , können Sie irgendwie die Macht davon sehen. Sie können tatsächlich ganz einfach Daten eingeben. Wenn Sie eine Textdatei haben, die die Beispieldaten enthält, mit denen Sie arbeiten. Wenn Sie also Ihre Ressourcen für dieses Projekt öffnen , gehen Sie zu den Beispieldaten des Ordners. In den Beispieldaten des Ordners sollten Sie in der Lage sein, den Restaurantordner zu finden. Mach weiter und öffne das. Und in jeder Textdatei gibt es einen anderen Datensatz. Es gibt also einen für die Namen der Restaurants, es gibt einen für den Preis, einen für die Lesungen und einen für das Restaurantband. Und die sind alle in Ordnung. Und was wir tun werden, ist, diese Textdatei einfach zu verwenden, um diese Beispieldaten zu generieren. Anstatt es also öffnen jeden Text kopieren und einfügen zu müssen, was wir völlig tun können. Geben Sie ein und gehen Sie und wiederholen Sie diesen Vorgang. Es gibt eine viel schnellere Möglichkeit, dies mit dem Wiederholungsraster zu tun . Und das ist, indem Sie tatsächlich die Textdatei hier hineinziehen . Und ich zeige dir in nur einer Sekunde, wie das geht. Lasst uns weitermachen und zuerst das rückgängig machen. Da hätten wir hier nur einen Restaurantnamen mit einem Haufen Restaurantnamen. Was Sie also tun möchten, ist, dass diese Textdatei geöffnet wird. Ich mache einfach weiter und lege es hier drüben auf diese Seite. Und ich werde einfach mein XD hier neu formulieren. Und jetzt können Sie einfach weitermachen und dieses Restaurant gestrichene Namen dot TXT auf Ihren allerersten Restaurantnamen ziehen gestrichene Namen dot TXT auf . Und wenn Sie möchten, gehen Sie los, XD wird diese Daten tatsächlich für jedes Restaurant einfügen . Wenn Sie sich diese Textdatei ansehen , werden diese Namen genau eingefügt. Und das liegt daran, dass wir sie mit der Return-Taste oder der Eingabetaste getrennt haben mit der Return-Taste oder der Eingabetaste und jeden Restaurantnamen in eine neue Zeile gesetzt haben. So ist xc bereits herausgefunden, wie man diese tatsächlich an der richtigen Stelle einfügen kann. Und so können wir diesen Prozess für die Preisgestaltung wiederholen, indem wir den Mauszeichentext über den Dollarzeichentext bewegen. Da sind wir los. Die Lektüre. Da sind wir los. Und schließlich, zu guter Letzt, der Restauranttyp. Jetzt wird alles wie erwartet eingefügt und wir haben eine Reihe von Beispieldaten, die die Größe meines Äußeren ändern. Es gibt nur eine Sache, die mir aufgefallen ist, ist, dass unsere Textdatei hier oder unser Textfeld für das Band nicht richtig ausgerichtet ist. Lassen Sie uns also eine Zeile schreiben, die so ist , dass sie auf der rechten Seite ausgerichtet ist. Beachten Sie in der Mitte: Es ist wirklich wichtig, die Dinge so ausgerichtet zu halten , dass Sie optisch korrekt aussehen. Und schließlich gebe ich einfach die richtigen Bilder für jedes Restaurant ein. Unter den Bildern sollten Sie in der Lage sein, diesen Hauptseitenordner zu finden . Und jetzt können wir das Gleiche machen, aber jetzt mit unseren Bildern. Wir haben also drei Bilder hier, jedes für die verschiedenen Restaurants. Und sie sind auch ein Befehl, 123. Ziehen wir sie also in dieses kleine Rechteck in unserer XD-Datei und nicht in das gesamte Rechteck, da es sonst an der falschen Stelle, aber genauso wie oben eingefügt wird . Und wenn ich jetzt zurückgehe, sieht das viel besser aus. Jetzt denke ich, dass wir unsere Hauptseite langsam zusammenstellen. Also werden wir wiederkommen und diese Hauptseite vervollständigen und von dort aus weitergehen. 35. Unsere Hauptsache vervollständigen: Schon jetzt sind wir fast fertig mit unserer Hauptseite hier. Ich denke, dass wir bisher großartige Arbeit geleistet haben. Wir haben gelernt, eine Kartenansicht zu erstellen und dann Repeat Grid zu verwenden , um mehrere Versionen dieser Karte oder mehrere Wiederholungen zu erstellen. Und dann haben wir mit der Funktion zum Wiederholen von Rastereinfügungen in unserem Projekt sehr einfach Daten eingegeben. Und ich hoffe , dass Ihnen diese Funktion gefallen hat , weil es eine Menge Zeit spart. Jetzt haben wir hier natürlich nur drei Restaurants. Aber wenn wir diese Seite immer weiter beibehalten und wir sie ausgedehnt haben und verwenden, wiederhole ich das Raster, sagen wir zehn oder öfter. Sie können sehen, wie viel Zeit das sparen würde, anstatt jede Daten manuell eingeben zu müssen. Also hoffe ich, dass Sie jetzt den Wert des Wiederholungsrasters sehen. Kommen wir also zurück zu dieser Seite und beenden Sie einfach ein paar Dinge und fügen Sie einfach ein paar Dinge hinzu und wir sollten loslegen. Also möchte ich nur mein Drahtgitter überprüfen , um sicherzustellen, dass ich nichts vermisse. Das einzige ist, dass wir weitermachen und uns umziehen werden, wenn die Karten gut aussehen? Wir müssen also nur einige Änderungen an unserer Menüleiste vornehmen , um hier ein kleines Symbol für das Menü zu haben, oder um auf ein Profil und dann eine kleine Suchleiste zuzugreifen , die wir bereits haben. Gehen wir also weiter und gehen wir zurück zu unserem Projekt. Und eigentlich denke ich, dass diese Navigationsleiste tatsächlich besser anwenden würde. Wir können also einen kleinen großen Titel haben und so den kleinen. Also lasst uns weitermachen und das kopieren. Stattdessen. Löschen Sie diese hier raus und kopieren Sie diese große Titellavigationsleiste. Und dann können wir diese Aktion löschen. Verlässt diese Aktion, weil wir dort unser Menüsymbol platzieren werden. Und wir werden weitermachen und einfach die Größe ändern. Ich fahre einfach weiter und verschiebe sie nach oben. Eigentlich belassen wir das hier. Bewegen Sie das einfach ein wenig nach oben und ändern Sie die Größe. Und stattdessen gibt es einen großen Titel dieses Preis-Restaurants. Und lassen Sie uns das einfach nach unten verschieben , indem wir die Umschalttaste und den Pfeil nach unten drücken. Wir haben also einen Abstand von 25 Pixeln. Ich denke, das sieht gut aus. Und statt dieser Aktion erstelle ein Icon für das Hamburgermenü. Dafür brauchen wir nur drei Zeilen, damit wir L verwenden können, um eine Linie zu erstellen. Und lasst uns fortfahren und drei Zeilen erstellen , die 30 Pixel breit sind. Gehen Sie dort raus und verwenden Sie dann Befehl D, um diese Zeile zu duplizieren. Und dann drücke ich die Umschalttaste nach unten , um es um zehn Pixel zu platzieren. Und dann habe ich das noch einmal gemacht. Wir haben also drei Zeilen. Bearbeiten wir diese drei Zeilen, indem wir einen Rahmen von zwei Pixeln festlegen. Und lasst uns weitermachen und auf diese kleine runde Kappe klicken. Und jetzt bringen wir das hier rein. Und statt der Aktion, oder es kann weitergehen und einfach die Aktion entfernen. Und habe einfach diese Zeilen und ich wähle sie einfach alle zusammen aus und drücke dann den Befehl G. Und ich benenne dieses Berber-Menüsymbol der Gruppe um. Und lassen Sie uns die Rahmenfarbe in die grüne Farbe ändern , die wir für unser App-Thema haben. Und es sieht gut aus. Sache, wenn du etwas weniger weit gehst, lass uns schlagen, lass uns diese Kerlgruppe hier auswählen. Eigentlich verwenden wir den Befehl und die Pfeiltasten, um die Breite zu verkleinern. Dies ist also eine kleine Abkürzung , bei der Sie die Breite tatsächlich bearbeiten können. Und indem du Command hältst und rechts und links drückst. Also drücke ich nur weniger nach links, um 25 Pixel zu machen. Und dann lasst uns diese Größe ändern, stattdessen zwei oder drei Pixel. Das ist die Grenzgröße. Und ich schreibe einfach eine Zeile, die sicherstellt, dass sie an der richtigen Stelle ist. Eine Sache, die ich beachten möchte , ist , dass sich dieses Icon hier eigentlich nicht in unserer Navigationsleiste befindet. Unsere Navigationsleiste hier ist also eigentlich eine Instanz einer Komponente , über die wir in nur einer Sekunde sprechen werden. Da es sich jedoch um eine Instanz einer Komponente handelt, können wir hier kein Icon direkt einsetzen und es wird nicht in einen Teil dieser Instanz aufgenommen. Es ist also getrennt. Wenn du das also bewegst, bewege dich damit. Also könnten wir so etwas tun, wie diese als vorübergehende Lösung zusammenfassen. Und jetzt ist es miteinander verwandt, aber auf andere Weise, deshalb können Sie keine neuen Elemente innerhalb einer Instanz eingeben. Sie können nur neue Elemente in eine Master-Komponente eingeben , die wir in den bevorstehenden Vorträgen erneut sprechen über die wir in den bevorstehenden Vorträgen erneut sprechen werden. Als Wohnmobil verkleinern. Ich habe eine nette kleine Restaurantseite und jetzt sind wir bereit, an unserer Menüseite zu arbeiten , damit ein Benutzer auf ein Restaurant klickt, das Menü für dieses Restaurant öffnet. Kommen wir also in den nächsten Abschnitt zurück und machen das gemeinsam. 36. Komponenten: Was sind also Komponenten? Also haben wir hier und da ein bisschen über sie gesprochen . Aber wir haben nie erforscht, was sie tun und wie sie nützlich sind. In dieser Vorlesung werden wir also erläutern, wie Sie tatsächlich Komponenten verwenden können, um wie Sie tatsächlich Komponenten verwenden können Ihre Designarbeit zu beschleunigen, wenn es um die Wiederverwendung von Objekten oder Gruppen in Ihren Entwürfen geht . Auf hohem Niveau sind Komponenten im Wesentlichen Objekte, die Sie in Ihrem gesamten Design wiederverwenden, wo sie eine Art gemeinsames Element haben. Wenn Sie also ein Objekt in mehreren Zeichenflächen verwenden müssen , sind mehrere Stellen vorhanden. Anstatt sie auf jeder Seite neu gestalten zu müssen. Nehmen wir an, wenn Sie eine Änderung vornehmen müssen, können Sie sie tatsächlich an einer Stelle ändern, die normalerweise als Hauptkomponente bezeichnet wird. Und lassen Sie sie dann in allen Ihren Instanzen ändern, die das untergeordnete Element dieser Master-Komponente sind, die Instanzen in Komponenten genannt wird. Wenn wir also unser Design durchschauen, Dinge wie Eingabefelder, Schaltflächen, Navigationsleisten wie diese normalerweise in Komponenten umgewandelt. Und der Grund dafür ist, dass wir es an mehreren Orten verwendet haben, wir haben sie an mehreren Orten verwendet. Nehmen wir an, ich entscheide mich für eine Änderung, eine kleine Änderung an meinem Button hier und ändere die Hintergrundfarbe, die Hintergrundfarbe oder die Größe der Schriftart oder die Platzierung der Texte. Natürlich tun wir jetzt so, als müsste ich den Hintergrund dieses Buttons ändern . Ich müsste an zwei Stellen gehen, eine neue Farbe festlegen und dann diesen Farbcode kopieren, zum anderen Button gehen und dann diesen Vorgang für jeden in ihm wiederholen , den ich in meinem Design habe. Ich mache das einfach rückgängig. Ich bin gerade gefahren und demonstriert , wie ein Leben ohne Komponenten aussehen würde. Also werden wir diese Knöpfe in nur einer Sekunde in Komponenten umwandeln . Aber bevor wir das tun, schauen wir uns welche Komponenten wir bereits in unseren Zeichenflächen haben. Und das sind eigentlich die Navigationsleisten hier. Und deshalb ist der Grund, warum Sie diesen grünen Rand um diese Navigationsleiste herum sehen , weil es sich um eine Komponente oder Instanz dieser Wir können tatsächlich nach Komponenten unter unserer -Bibliothek. Wenn Sie also in die Bibliothek gehen, drücken Sie die Tastenkombination Shift Command Y. Wir können alle unsere Komponenten hier sehen. Jetzt haben wir diese Komponenten natürlich nicht erstellt, aber was passiert ist, ist, dass wir, als wir diese Navigationsleiste in unser Projekt gezogen haben, sie tatsächlich als Komponenten daraus kopiert haben iOS-Designprojekt. All dies sind also Komponenten, und es gibt tatsächlich in diesem Bereich enthalten , in dem wir es einsetzen , oder Navigationsleisten, nicht diese Navigationsleisten, die wir eingefügt haben oder alle Instanzen. Wenn es um Komponenten geht, wie können Sie feststellen, ob eine Komponente die Hauptkomponente ist oder ob es sich wie können Sie feststellen, ob eine Komponente die Hauptkomponente ist um eine Instanz handelt, bei eine Instanz mit Override im Wesentlichen auf die Ecke schauen kann Diamant auf der Form um den grünen Rand. Oben links siehst du einen kleinen Diamantauslöser wie diesen. Derjenige, der sich so anfühlt, ist die Hauptkomponente. Alle Änderungen, die Sie an dieser Komponente vorgenommen haben, gelten also für die Instanzen. Und wenn wir gerade von Instanzen sprechen, Ihre Instanzen haben eine leere oder ungefüllte Diamantform. Und wenn Sie dann Änderungen an einer bestimmten Instanz vornehmen , diese Änderungen überschreiben und diese Eigenschaften wie den Text im Inneren oder die Objekte hinzufügen , sehen Sie diese kleine Form mit einem Kreis in der Mitte. Das bedeutet also, dass Sie die Eigenschaften dieser Instanz übergeschrieben haben. Wenn wir also zurückgehen, können wir sehen , dass wir diesen hier haben, der überschrieben wird , weil einige Änderungen daran vorgenommen wurden. Wir sehen das hier, wo es nur eine Instanz ist. Und deshalb haben wir eigentlich nicht die Hauptkomponente. Der Weg, um tatsächlich auf die Hauptkomponente für diese zuzugreifen , besteht darin, mit der rechten Maustaste zu klicken und auf Mittelkomponente bearbeiten zu klicken. Und jetzt sind dies die Hauptkomponenten für meine Navigationsleiste. Alle Änderungen, die ich an dieser Hauptkomponente vornehme, gelten also dieser Hauptkomponente vornehme für andere Instanzen. zum Beispiel Wenn ich zum Beispiel den großen Titel hier nehme und mal sehen werde, mache ich ihn 25 Pixel. Es wird weitergehen und auf beide zutreffen. Wachse hier. Wenn ich die Suchleiste verschiebe, bewirb ich mich auf beide. Entferne den Titel für dich. Wir werden es auf beide anwenden. Wenn ich jetzt jetzt reingehe, weil dies eine Instanz ist, wenn ich tatsächlich etwas aus einer Instanz lösche, wird es von hier aus nicht gelöscht, weil dies unser Hauptteil ist -Komponente, wie Sie sehen können. Aber weil wir diese Instanz jetzt überschrieben haben, erhalten wir diese kleine Form und die Ecke, was bedeutet, dass wir jetzt überschrieben oder instanzen. Wenn er also anfängt, Dinge hier zu bearbeiten, wird hier nichts bewirkt , denn dies ist wiederum unsere MainComponent und Änderungen funktionieren nur auf eine Weise. Was jedoch passieren wird, ist, dass die Instanz immer noch bestimmte Eigenschaften teilen wird. Wenn also noch bestimmte Dinge in dieser Instanz vorhanden sind , wird es immer noch vorgehen und diese Anpassungen vornehmen, z. B. die Positionierung dieser Elemente. Aber wenn ich diesen großen Titel ändere, wird sich hier nichts ändern, da wir den Text innerhalb dieses Textfeldes bereits außer Kraft gesetzt haben , aber nicht wirklich seine Position. Wenn wir nun auch seine Position bearbeiten, werden wir sehen, dass, wenn wir dies bewegen, nichts mit der Position von diesem und Text hier passieren wird , weil wir beide Texte außer Kraft gesetzt haben innen und die Position jetzt. Aber wir können immer noch Dinge wie Füllen ändern, was immer noch zutrifft, es sei denn, wir gehen wieder in unsere Instanz und ändern diese Farbe und überschreiben sie. Also jede Art von Überschreibung in Bezug Position Phil, Effekte, so weiter und so weiter, die wir machen, werden uns auf unsere Instanz bewerben , es sei denn, wir überschreiben diese Eigenschaften. Aber wenn ich diese Überschreibungen tatsächlich entfernen möchte , kann ich tatsächlich auf diese Instanz klicken und dann auf den Hauptstatus zurücksetzen. Und was das tun wird, ist, dass es weitergeht und diese Eigenschaften wieder auf das verwandelt, was wir hier drin hatten. Und jetzt sind diese Überschreibungen verschwunden. Wir können in der Instanz sehen, dass Shape jetzt wieder nur eine Instanz ohne Überschreiben ist . Dies wird sinnvoller sein, wenn wir anfangen, tatsächlich Komponenten zu verwandeln oder Schaltflächen zu machen . Und wenn Sie Fragen haben, wenden Sie sich bitte auf dem Weg nach. Hoffentlich ergibt das einen Sinn. Ich mache das ein paar Mal rückgängig, um zurück zu unserer Navigationsleiste zu gehen . Wie wir es zuvor hatten. Da sind wir los. Das sind Komponenten und hey, kann tatsächlich Instanzen daraus erstellen und überschreiben. Kommen wir in der nächsten Vorlesung zurück und verwandeln diese Buttons in Komponenten. 37. Unsere Schaltungen in Komponenten konvertieren: Okay, jetzt wo wir wissen, was Komponenten sind und wie sie so nützlich sind, konvertieren wir unsere Schaltflächen in Komponenten, damit wir sie in Ihrem Projekt wiederverwenden können. Wenn Sie sich später entscheiden, Änderungen an ihnen vorzunehmen oder verschiedene Schaltflächen vorzunehmen, können wir sie einfacher verwenden, ohne sie an mehreren Stellen ändern zu müssen. Also gehe ich weiter und zoome einfach meine Anmeldeseite hier drüben. Geh weiter und entkomme dort aus meinem Zoom-Tool. Und was ich tun möchte, ist diesen Button zu konvertieren, der sich bereits in einer Gruppe befindet. Wenn Sie sich also daran erinnern, dass wir beim Entwerfen unserer Anmeldeseite hier ein Rechteck konvertiert haben, was der Hintergrund der Schaltfläche und des Textes in eine Gruppe ist . Wenn Sie dies noch nicht getan haben, müssen Sie sich darüber keine Sorgen machen. Stellen Sie einfach sicher, dass Sie sowohl den Hintergrund als auch den Text hier für die Anmeldung ausgewählt haben den Text hier für , da dies der Teil der Komponente der Schaltfläche selbst ist . Um dies in eine Komponente zu konvertieren, Sie einfach mit der rechten Maustaste darauf und klicken Sie auf Komponente erstellen. Alternativ können Sie einfach auf der Tastatur oder der Strg-Taste unter Windows auf Befehl K drücken. Es gibt mehrere Möglichkeiten zu sagen, dass dies jetzt eine Komponente ist. Zuerst sieht man also, dass wir hier einen kleinen Diamanten haben, der gefüllt ist, was bedeutet, dass dies die Hauptkomponente ist. Und hier drüben im Eigenschaftenbedienfeld gibt es auch die Komponente und in den Klammern bedeuten. Und wir können fortfahren und erstellen, und dies ist der Standardstatus der Schaltfläche. Wir können mehrere Staaten erstellen, die wir in zukünftigen Vorträgen werden, und auch in unserem Ebenen-Panel können Sie diese kleine Diamantform sehen. sind also Indikatoren dafür, dass dies jetzt eine Komponente ist. Und weil es wieder ein gefüllter Diamant ist, können wir sehen, dass dies der Hauptbestandteil ist. Was wir also tun wollen, ist, unsere Hauptkomponenten irgendwo getrennt von unseren Designs zu platzieren . Und der Grund dafür ist , dass wir auf diese Weise genau wissen können , welche die Hauptkomponenten sind und welche nur Instanzen dieser Komponente sind. Wenn Sie also später Änderungen an dieser Schaltfläche vornehmen möchten , anstatt auf die Anmeldeseite zu kommen und hier Änderungen vorzunehmen, können wir unsere Änderungen außerhalb unserer Komponenten vornehmen und dann weitermachen wir unsere Änderungen außerhalb unserer Komponenten vornehmen und dann weitermachen und sehen Sie einfach, dass die Änderungen in Ihrem gesamten Design stattfinden. Also lasst uns fortfahren und diese Hauptkomponente nun aus unserer Anmeldeseite ziehen . Und ich werde meine Komponenten einfach in die Ecke meiner Kunsttafel legen . Irgendwo hier drüben. Und wir können fortfahren und sogar eine Kopie mit dem gesamten Text hierher ziehen und dies als unsere Komponenten betiteln. Ups, da sind wir los. Gehen Sie einfach weiter und richten Sie das hier aus. Zum Beispiel, die Dinge in Einklang zu halten, damit es optisch besser aussieht. Also während wir hier sind, mache ich zwei Dinge. Eine davon ist, dass ich diesen Login-Text in einen Button ändern werde. Und der Grund dafür ist , dass jetzt, da wir dies zu einer generischen Art von Schaltfläche gemacht haben , der Text hier nichts Bestimmtes sein sollte. Es könnte also etwas so Allgemeines sein wie eine Schaltfläche, damit wir in jedem Fall diesen Text bearbeiten können. Und das ist das Erste. Und das zweite, was ich tun möchte , ist, dass ich hier auf unsere Bibliotheken klicke. Und jetzt siehst du diesen kleinen Knopf. Jetzt sehe ich, dass dieser Button hier Komponente 14 heißt. Du siehst irgendwie ein kleines Miniaturbild davon. Wir wissen also, dass dies ein Button ist und ziehen diese Komponente 14 in unsere Zeichenfläche. Wir werden sehen, dass wir jetzt eine Instanz davon erstellt haben, aber wir brauchen diesen Verzicht nicht. Lassen Sie uns dies umbenennen, indem Sie hier auf diesen Komponente-14-Titel doppelklicken diesen Komponente-14-Titel und ihn ändern , um einfach zu speichern. Perfekt. Und wenn ich jetzt zu meiner Anmeldeseite zurückkehre, kann ich einfach fortfahren und die Instanz dieser Schaltfläche auf meine Anmeldeseite ziehen . Mach weiter und richte es einfach hier aus. Stellen Sie sicher, dass es schön und ausgerichtet ist. Und dann lasst uns weitermachen und nun unsere Texte ändern , indem Sie darauf doppelklicken und den Login schreiben, wie wir es zuvor hatten. Wo macht das Gleiche. Ich drücke hier Befehl C in meiner Instanz und gehe weiter und gehe zur Telefonbestätigung. Drücken Sie Befehl V. Lassen Sie uns den Text ändern, Sie haben es als Nächstes erraten. Lassen Sie uns diese Gruppe loswerden , die wir für den Button haben, denn dies ist keine Instanz mehr. Dies ist einfach eine Gruppe von Rechteck und eine Ebene, die wir haben. Lass uns weitermachen und das einfach rausziehen. Lassen Sie mich einfach den Abstand überprüfen, damit es so aussieht, als wären wir 35 Pixel von unten entfernt. Jetzt werden wir das löschen und verschieben, dass über zwei die gleiche Position für diesen Button sind. Jetzt verwenden wir Instanzen dieser Komponente. Und wie Sie sehen können, befindet sich in dieser Diamantform ein kleiner Punkt , was bedeutet, dass dies ein Beispiel mit einigen Überschreibungen ist. Und diese Überschreibung sind die Texte, die wir einfach ändern. Wenn ich zum Beispiel zu meinem Button zurückkehre und plötzlich entscheide , dass ich meinen Button haben soll, sagen wir einen blauen Hintergrund. Ich kann einfach weitermachen und hier die Hintergrundfarbe ändern , sagen wir mal, du hast meinen Knopf vermasselt. Und wenn ich wegklicke und zu meinen Designs zurückkehre, sehe ich, dass diese Instanzen auch die Eigenschaft dieser Hintergrundfarbe übernommen haben . Und deshalb ist es wirklich nützlich, Komponenten für Dinge zu verwenden , die Sie tun. Wiederholen Sie Ihre Entwürfe, wie diese Schaltflächen, wie die Textfelder hier drüben. Und jetzt möchte ich Ihnen eine Übung geben, um diese Textfelder in Komponenten umzuwandeln und Instanzen zu erstellen und sie hier an die gleichen Positionen zu ziehen. Und das machen wir auch in der nächsten Vorlesung zusammen. 38. Components: Alles klar, das erste, was ich tun möchte, ist wiederholen Farbwechsel für unsere Knöpfe zu wiederholen , bevor wir in unsere Übungslösung einsteigen. Lassen Sie uns also zu unserer Komponente übergehen. Doppelklicken, um das Rechteck auszuwählen und die Füllung wieder in diese grüne Farbe zu ändern. Wenn Sie dies nicht tun, geben Sie Farbauswahl ein dieses Hexadezimalzeichen in Ihre Farbauswahl ein und klicken Sie auf dieses Plus-Symbol, um diese Farbe zu unserem Farbfeld hinzuzufügen. Und so können wir einfach darauf zugreifen. Perfekt. Die Übung bestand also darin, diese Textfelder hier in Komponenten anstatt nur in Gruppen umzuwandeln . Und so werden wir das sehr schnell tun, indem wir dieses Textfeld einfach außerhalb mit ALT duplizieren. Ich bringe das nur zurück zu meinem Komponentenbereich hier. Und ich gehe weiter und drücke Command K, um dies in eine Komponente zu verwandeln. Lassen Sie uns fortfahren und stellen Sie sicher, dass Ihre Bibliotheken hier geöffnet sind, und benennen diese in ein Textfeld um, damit wir wissen, worum es bei dieser Komponente geht. Und während wir hier sind, klicken wir auf dieses E-Mail-Feld und geben wir bitte ein. Bitte Halter, da sind wir los. Nur eine einzige Zeile. Lassen Sie uns Instanzen auf der Anmelde- und Telefonüberprüfungsseite erstellen und durch diese Gruppen ersetzen, die wir haben. Und das tun wir, indem wir einfach auf die Seite der Bibliothek gehen und ein Textfeld auf meine Anmeldeseite ziehen . Und es gibt eine andere Möglichkeit, Instanzen zu erstellen , ohne das Bibliotheksfenster zu verwenden. Und das heißt, tatsächlich zu den Komponenten zu gehen, zu Ihren Hauptkomponenten. Geh weiter und klicke auf Kopieren. Durch Drücken von Command C oder Strg C unter Windows. Gehen Sie auf Ihre Anmeldeseite und klicken Sie dann Befehl V. Und was das getan hat, wird eine Instanz dieses Textfeldes auf unserer Anmeldeseite erstellt . Ich werde den Text hier drin ändern, um eine E-Mail zu senden. Und ich ziehe das hier hin und erstelle dann eine weitere Kopie dieser hier hin und erstelle dann eine weitere Kopie Instanz hier und ändere diese in ein Passwort. Aber natürlich haben wir diese Gruppe, diese Gruppen der E-Mail- und Passwort-Textfelder unter diesen Ebenen. Lasst uns also auch diese loswerden , indem wir zu unseren Ebenen gehen. Und ich glaube, es sollte diese Gruppe 2 und Gruppe 1 sein, die wir irgendwie sehen können, weil es dieses blaue Highlight schafft. Gehen wir also fort und klicken Sie auf beide, indem Sie die Umschalttaste gedrückt halten und Löschen drücken. Da sind wir los. Jetzt haben wir Instanzen dieser Texte Brennstoffe. Wir könnten das Gleiche tun, indem wir eine Instanz in unsere frühere Ausbildung kopieren und diese in vier Zahlen ändern. Und mach das Gleiche und lösche diese Gruppe eins. Perfekt. Jetzt haben wir Instanzen dieser Textfelder. Und lassen Sie uns an jedem Punkt mit der Site sehen, um beispielsweise die Farbe dieses Platzhaltertextes etwas später zu erstellen . Wie bei dieser Farbe hier drüben wird sie weitergehen und auf alle meine Textfelder angewendet werden. Perfekt. Wir machen hier eine kurze Pause und dann kommen wir in der nächsten Vorlesung zurück , um an unserer Menüseite zu arbeiten. 39. Menu: Wir sind bereit, an unserer Menüseite zu arbeiten. Also diese Menüseite, nicht zu verwechseln mit der dortigen Schrägstrich-Menüseite der Profilseite. Dies ist unsere Restaurantmenüseite. Also was wir hier drin wollen, wenn ich schnell zu meinen Wireframes zurückkehre, hier ist einfach ein Menü , das die Kategorien von Gegenständen wie die Abflüsse und die Mittelwerte, Kurse, Dessert und alles trennt wie die Abflüsse und die Mittelwerte, Kurse, Dessert und alles das in verschiedenen Abschnitten mit Karten , die diese Lebensmittel dem Kunden zeigen , damit er weitermachen und stöbern kann , was das Restaurant hat. Und auf diese Weise wissen sie, dass sie von dort auswählen können, was sie bestellen sollen. Während wir unsere Menüseite präsentieren, verwenden wir zwei wichtige Tools in XD. Einer von ihnen, was wir bereits gelernt haben, welches sind die Komponenten. Wir werden hier Komponenten für diese Karten für die Lebensmittel verwenden . Wenn Sie sie also wiederverwenden möchten, sehen wir uns auf unserer Bestellseite oder Fortschrittsseite oder irgendwo anders an, wir können einfach Instanzen ziehen , anstatt dies wiederholen zu müssen. So können wir auch verschiedene Zustände für sie erstellen , während wir die Komponenten entworfen haben. Das zweite, was wir lernen werden, ist, wie man Stacks in XY verwendet, was sehr nützlich ist. Also in einer Tabellenansicht wie dieser, in der wir Artikel nach Artikeln haben, auch ähnlich wie die Restaurantseite hier, bei der es sich um eine TableView von Artikeln oder Restaurants handelt. In diesem Fall ist Stacks ein nützliches Werkzeug, ähnlich dem Wiederholungsraster, aber in gewisser Weise unterschiedlich. Und ich zeige Ihnen, wie das funktioniert, damit Sie lernen, wie Sie verschiedene Tools verwenden können, um diese Art von Verwendung zu erstellen. also ohne weiteres Lassen Sie uns also ohne weiteres einsteigen und hier an unseren Menü-Lebensmittelkarten arbeiten. Da diese Seite hauptsächlich aus diesen sowie den verschiedenen Kategorien besteht , die auch diese Abschnitte erstellen. Lasst uns zuerst an unseren Lebensmittelkarten arbeiten, und dann entwerfen wir die verschiedenen Abschnitte. Und dann schließen wir die ganze Seite ab und schließen wir die ganze Seite ab verwenden Stapel, um unsere Artikel zu organisieren. Wechseln wir also zurück zu XD. Das erste, was ich tun möchte, ist, eine Komponente für diese Lebensmittel zu erstellen , basierend auf dem, was wir brauchen. Bevor wir das tun, schreiben wir alles auf, was wir brauchen, in unserer Warenkorbansicht auf damit wir diese Textfelder und Bilder einfach gestalten können . Natürlich brauchen wir hier drin ein Bild vom Essen. Das ist also eine Sache, die in dieser Liste fehlt, aber es wird irgendwie impliziert , dass es hier ein Bild des Essens sowie die Namensbeschreibung, den Preis, die Kalorien und ein Plus ein Minus Bi geben wird. Machen wir uns das also notieren , indem wir einfach zu unserem Komponentenbereich in unseren Entwürfen gehen . Und ich drücke T, um ein Textfeld zu erstellen. Ziehen Sie hier, machen Sie einige Notizen, indem Sie das Bild bewerten. Ein bisschen dunkel für meine Texte hier. Also werde ich weitermachen und es schwarz machen. Lass uns weitermachen und Bild schreiben. Lebensmittel, Schrägstrich, Name, Beschreibung, Kalorien, Schaltflächen zum Hinzufügen von Schrägstrich, Artikel entfernen. Ist das glaube ich, dass das alles ist und der Preis natürlich ja. Lasst uns weitermachen und den Preis hinzufügen. Dies sind also die fünf Daten oder Inhalte, die ich in meiner Warenkorb-Ansicht benötige. Also lasst uns zuerst ein Rechteck für den Hintergrund meiner Kartenansicht erstellen . Und ich werde dieses Rechteck einer Höhe von 100 Pixel Breite von 325 Pixeln erstellen. Und Sie können sehen, dass Sie von der rechten Seite hier drüben auch diese optimieren können. Ich zoome hier weiter und bringe diesen Text einfach hierher. Zoomen wir hinein und entscheiden, was wir wohin bringen sollen. Das erste, was ich tun möchte, ist diesem Rechteck tatsächlich einen ähnlichen Stil wie mein Textfeld hier in Bezug auf die Rundheit oder die Grenzen sowie die Farbe des Rahmens zu geben einen ähnlichen Stil wie mein Textfeld hier in Bezug auf die Rundheit oder die Grenzen . Wenn Sie sich daran erinnern, wie wir das machen, klicken wir einfach auf unser Rechteck, stellen sicher, dass Sie das Rechteck ausgewählt haben und nicht die gesamte Textkomponente. Drücken Sie Befehl C. Und ich, klicken Sie hier auf Ihr Rechteck und drücken Sie Option Command V. Und wie Sie jetzt sehen können, haben wir das gleiche Styling. Perfekt. Was ich hier also in Bezug auf das Bild denke , ist voranzukommen und hier ein Bild für unser Lebensmittel auf der linken Seite zu schaffen hier ein Bild . Und dann werden wir auf der rechten Seite diese Texte auflisten. Also lasst uns weitermachen und dieses Rechteck duplizieren , indem wir auf Befehl D klicken. Jetzt haben wir zwei davon. Und ich werde es weiter verkleinern, indem ich von dieser Seite ziehe. Das ist alles, was ich habe eine Breite von etwa einer 35. Eine Sache, die ich beachten möchte, ist, dass die meisten Bilder ein Verhältnis von vier zu drei haben. Wenn wir also Bilder erstellen oder Bilder zu unserem Design hinzufügen, wollten wir in der Regel Bilder erstellen oder Bilder zu unserem Design hinzufügen, das Verhältnis von vier zu drei sein. Wenn Sie also genau sein möchten, können Sie einfach bei Google nach einem Verhältnisrechner suchen. Und dann gehe ich weiter und klicke auf den ersten Link. Wenn Sie also ein Seitenverhältnis von 43 wünschen, wissen wir, dass unsere Höhe hier fest ist, was 100 Pixel entspricht. Also zurück hierher zu gehen, oder Höhe repräsentiert die drei hier drüben. Also wollen wir berechnen, um zu sehen, was C sein sollte. Und wie wir sehen können, sollte es 133 Pixel betragen. Das wird uns also ein Seitenverhältnis von 4 zu 3 geben. Und wenn wir zurückgehen, habe ich 135 hier. Ich kann den Befehl und die linke Pfeiltaste zweimal verwenden , um das auf 133 zu verkleinern. Jetzt haben wir fast ein perfektes Seitenverhältnis von vier mal drei. Und der Grund, warum dies wichtig ist, ist, dass wenn wir Bilder hier in unsere Karte ziehen, fast so aussehen, als Bilder hier in unsere Karte ziehen, ob sie abstieg, ohne dass sie gestreckt werden oder aussehen, als wäre es die falsche Größe. Eines der Dinge, die ich hier machen möchte, ist auf mein Rechteck zu klicken. Gehe zu diesen beiden Ecken, die ich habe, und benutze Alt, um diese auf 0 zu setzen. Stellen Sie also sicher, dass Sie alt halten, um diese Ecken wieder auf 0 Rundheit zu ziehen . Also haben wir unser Bild und dann schreiben wir unseren anderen Text. Und hier, als To-do, werden wir schnell eine Reihe von Textfeldern erstellen. Der erste ist also der Artikelname. Ich möchte, dass dies 10 Pixel von oben ist. Nun zur Beschreibung möchte ich ein Textfeld machen, indem ich T drücke und hierher ziehen. Wenn du also gleich hier drüben siehst, würde gut aussehen. Ich schreibe eine Beschreibung. Und ich werde diese Füllfarbe in eine hellgraue Farbe ändern , etwa so. Und wir werden unseren Artikelnamen in diese Farbe ändern , die wir hier haben, die irgendwie dunkelgrau ist. Wenn Sie diese Farbe nicht haben, geben Sie diesen Hex-Code ein und Sie erhalten die gleiche Farbe. Bringen wir eine Beschreibung ein wenig hoch und stellen sicher , dass sie bis hier drüben eine feste Höhe hat. Wenn also die Beschreibungen länger als dieses Textfeld sind, werden wir fortfahren und irgendwie abgeschnitten. Wer auch immer ich die Daten einstelle, sollte sicherstellen , dass die Beschreibung viel zu lang ist. Ich kopiere dieses andere Textfeld hier unten. Und wir geben die Kalorien ein. Wir werden hier nur 0 Kalorien machen. Und lasst uns auch dafür eine Größe von 10 Pixeln machen. Und lege es hier mit dem gleichen Pixel von unten ab, zehn Pixel. Wir haben also das Bild, Artikelnamen, die Beschreibung, die Kalorien und die letzten beiden Artikel erhalten, die wir benötigen die Schaltflächen, um diesen Artikel zu unserer Bestellung hinzuzufügen und zu entfernen, sowie hier wenig Preis für den Artikel. Ich denke, wir können den Preis genau rechts von den Kalorien hier drüben setzen. Wir können also gleich hier rüber gehen und genau als Beispiel sagen, Dollar 000, da dies nur ein Textfeld ist , das gut aussieht. Und schließlich brauchen wir nur unsere Buttons, um diesen Artikel hinzuzufügen und zu entfernen. Also machen wir hier eine kurze Pause, kommen in der nächsten Vorlesung zurück, um an diesen Buttons zu arbeiten und diese in eine Komponente umzuwandeln und unsere Menüseite zu vervollständigen. 40. Einen a erstellen: Da diese Schaltfläche hier ist, um Elemente etwas komplizierter als eine normale Schaltfläche hinzuzufügen und zu entfernen , möchten wir dem Kunden, der diese App verwendet, die Möglichkeit zeigen , Artikel nicht nur hinzuzufügen und zu entfernen, sondern auch sehen wie viele Mengen von Artikeln haben sie zu ihrer Bestellung hinzugefügt. Wir möchten also ein einzigartiges Design erstellen, dass es gut funktioniert und auch funktional ist. Also öffne ich nur meinen Notizblock hier, um eine kleine Skizze auf meinem Handy zu machen. Du kannst mitmachen, wenn du möchtest, oder du kannst einfach sehen, was ich hier mache. Also werde ich weitermachen und einfach mein Stiftwerkzeug hier in dieser Notiz-App nehmen , die ich nicht geöffnet habe. Was ich also tun möchte, ist natürlich dass wir die richtige Seite unserer Karte haben, was ich irgendwie so visualisieren werde . Was ich also tun möchte, ist weiterzumachen und ihnen die Anzahl der Gegenstände zu zeigen , die sie hier haben. Nehmen wir an , sie haben zwei dieser Artikel mit einem kleinen Plus- und Minus-Symbol hier oder Schaltflächen, um sie zu führen, Artikel zu ihrer Bestellung zu entfernen oder hinzuzufügen. Vielleicht machst du hier eine kleine abgerundete Form, damit sie diese Gegenstände hinzufügen und entfernen können. Lasst uns also weitermachen und daran arbeiten, diesen Button zu entwerfen , der hier in dieser Vorlesung gesetzt wurde. Also lasst uns fortfahren und jetzt dieses ähnliche Design in unserem XD erstellen . Also habe ich mein XD geöffnet. Und was ich tun möchte, ist tatsächlich eine separate Komponente zu erstellen , damit wir diese Art von Zählerschaltfläche wiederverwenden können. Ich nenne es gerne an anderen Orten für den Fall, dass wir es müssen. Gehen wir also weiter und kommen hier in einer separaten Seite unten in dieser Kartenansicht hier runter . Ich möchte drei Rechtecke erstellen, indem ich auf R klicke. Und ich möchte drei Quadrate erstellen. Und ich halte die Verschiebung hier , um die Proportionen zu sperren. Und ich wollte, dass dies 28 Pixel mal 20 Pixel beträgt. Perfekt. Lassen Sie uns nun das Rechteck-Werkzeug verlassen und Rechteck-Werkzeug verlassen Duplizieren oder Befehl D drücken zweimal auf Duplizieren oder Befehl D drücken, um zwei Kopien zu erstellen. Und ich werde einfach fortfahren und benutze die Umschalttaste und die Pfeiltaste nach unten , um diese Kopie und auch die andere Kopie herunterzubringen. Und ich bringe das Rechteck einfach hoch, damit sie so übereinander liegen. Dasselbe mit dem hier. Und ich benutze nur die Pfeiltasten, um sie zu bewegen. Als erstes möchte ich alle auswählen und diese Rahmenfarbe in eine hellere Randfarbe ändern diese Rahmenfarbe in eine hellere Randfarbe , die wir hier haben. Zweite Sache für dieses Rechteck hier Ich klicke auf diese Schaltfläche um die Randradien zu trennen. nun für die obere linke und die oberste Rate Lassen Sie uns nun für die obere linke und die oberste Rate einen Eckenradius von sechs Pixeln machen. Für dieses Rechteck hier machen wir das Gegenteil. Also die sechs Pixel für unten links und unten rechts. Und jetzt möchte ich weitermachen und ein kleines Minus- und Plus-Symbol erstellen . Und das können wir mit dem Linienwerkzeug tun. Also lasst uns weitermachen und auf L klicken und hier eine Art Minus-Symbol zeichnen. Drücken Sie Escape, um am Linienwerkzeug herauszukommen. Und ich werde weitermachen und ihm eine Größe 2 geben. in Bezug auf den Rand mit abgerundeter Kappe sicher, dass sie in der Mitte ausgerichtet ist und kein Plus-Symbol erstellt wird. Ich werde fortfahren und eine Kopie dieser Zeile erstellen , indem ich Alt halte und hier eine Kopie auf diese Seite ziehe. Drücken Sie dann Command D , um das zu duplizieren, und drehen Sie es um 90 Grad. Jetzt haben wir also zwei Zeilen. Man drehte sich um 90 Grad, um dieses Plus-Symbol zu erstellen. Lassen Sie uns weitermachen und diesem Rechteck eine grüne Füllung geben, das gleiche Grün wie wir haben. Und diese hier werde ich mir irgendwie zustimmen Farbe wie Grau hier. Sie können diesen Hexadezimalcode kopieren , um dieselbe Farbe neu zu erstellen. Und dann klicken Sie für meine Plus- und Minus-Symbole, wenn ich die Umschalttaste gedrückt halte, auf alle diese Zeilen, stellen Sie sicher, dass Sie die gesamte Zeile ausgewählt haben , und ändern Sie sie dann, um zu warten. Und schließlich fügen wir hier einen kleinen Zähler hinzu, indem wir T drücken, hier in die Mitte kommen und 0 schreiben. Und stellen Sie sicher, dass Sie 16 Pixel für Ihre Schriftgröße, Zeile oder zur Mitte haben . Wenn Sie diese Zahl ändern, sagen wir auf zehn, wird sie zentriert. Aber natürlich ist es nicht zentriert, also fliehe ich raus. Ich klicke auf Escape , um das Textwerkzeug zu verlassen und es zu löschen, bis es zentriert ist. Ab sofort haben wir einen kleinen Zählerknopf, den ich gerne R nenne, die wir für unsere Artikel verwenden können , damit wir Artikel zu unserer Bestellung hinzufügen oder entfernen können. Was machen wir weiter und klicken hier alles und drücken die Befehlstaste, um dies in eine Hauptkomponente zu verwandeln. Und jetzt ziehe ich eine Instanz dieser Hauptkomponente, indem ich Alt halte und deine Kopie mit neun Pixeln von jeder Seite hierher bringe . Lassen Sie uns über alles ziehen und sicherstellen, dass wir alles und unser Ebenenbedienfeld auswählen. Und dann drücken Sie Command K, um diese Komponente ebenfalls zu erstellen. Gehen Sie zu den Bibliotheken und benennen Sie diese Komponente hier in unsere Artikelkartenansicht um. Und dann auch diese Komponente hier, Lasst uns tun. Aber im Gegenüber. Perfekt. Eine Sache, die ich tun möchte, ist einfach wieder hierher zu gehen, diesen Text auszuwählen und ihm eine Füllung der grauen Farbe zu geben , die wir anstelle des Schwarzes haben. Licht kann manchmal für Texte etwas schwierig sein. Also machen wir ein bisschen eine etwas dunklere Farbe, ein bisschen leichter für die Augen. Perfekt. Und das gilt auch hier automatisch, da dies eine Instanz dieser Komponente ist. Und da hast du es. Wir haben unsere Warenkorb-Ansicht. Und jetzt werden wir in der nächsten Vorlesung wiederkommen, um Stacks zu verwenden, um an unserer Menüseite zu arbeiten. 41. Stacks verwenden: Was ist Hirsche? Wie nutzen wir es, um unseren Designprozess viel schneller und effizienter zu gestalten? Nun, ich zeige Ihnen wie Stacks funktionieren, während wir unsere Menüseite gestalten. Also werde ich hier rauszoomen, diesen Text hier los und gehe zu meiner Menüseite. Und das Wichtigste zuerst Ich gehe weiter und wähle hier einen Titel in Menu aus. Und dann ändere diese Aktionsschaltfläche hier in den Einkaufswagen , der auch später auch ein kleines Icon macht , wenn du willst. Und dann ändere das in Restaurants. Und das ist jetzt irgendwie relevant. Und hier unten wollen wir unsere Karten nach Kategorien trennen. Wir wollen also Kategorien von Mietinggetränken sowie Vorspeisen, Vorspeisen und so weiter. Ich wähle diese Menüseite aus und ziehe sie tatsächlich so, dass sie länger ist als meine Ansicht hier Wir können hier mehr Elemente hineinpassen, 1500 Pixel hoch. Was dieser kleine Teiler hier zeigt, das ist unsere primäre Ansicht hier. Wenn wir diese Desktop-Vorschau öffnen oder eine Vorschau und unser Gerät anzeigen, wird der Benutzer dies sehen. Alles darüber hinaus wird abgeschnitten, es sei denn, wir machen diesen Inhalt scrollbar, damit der Benutzer scrollen kann, um den Rest des Inhalts hier zu sehen. Und das werden Sie sehen, wenn wir mit dem Prototyping beginnen. Aber lassen Sie uns zunächst verschiedene Abschnitte erstellen, indem T-Taste auf unserer Tastatur drücken und Vorspeisen schreiben. Und das werde ich hier oben platzieren, 30 Pixel von oben. Habe es erst bewegt, wenn es 25 Pixel von oben ist. Nun, weil ich an den Schriften hier drüben oder an den Texten hier drüben gearbeitet habe. Xy ist vorangekommen und hat meinen Text als ähnliches Styling gegeben, was hier der 17-Pixel-SF-Pro-Text ist. Fühlen Sie sich also frei , diese Änderungen anzuwenden. Aber in zukünftigen Vorträgen werden wir auch Texte durchgehen. Aber bitte stellen Sie sicher , dass es sich um eine ähnliche Schriftgröße handelt. Die Schrift spielt an dieser Stelle keine Rolle. Wir werden diese in den zukünftigen Abschnitten ändern . Was wir jetzt tun werden, ist, eine Kopie dieser Artikelkartenansicht hier hinein zu ziehen . Und mach weiter und richte es auch nach links aus. Und gib ihm einen Abstand von 23 Pixeln von links. Ähnlich wie bei dieser Vorspeise hier. Gehen Sie einfach weiter und richten Sie diesen Vorspeisentext nach links aus. Und jetzt bemerken Sie, dass die Karte hier die Breite der Ansicht, die wir hier haben, nicht vollständig ausfüllt . Also kommen wir zurück und reparieren das in einer zukünftigen Vorlesung. Aber jetzt lernen wir weiter , wie wir Tags verwenden können , um weitere Artikel hinzuzufügen. Was ich also tun werde, um Steuern zu verwenden, machen Sie weiter und gruppieren diese Vorspeisentexte sowie diese Instanz. Gehen Sie rüber zu unserem Layer-Panel hört, das können wir sehen. Und wir werden sie gruppieren , indem wir den Befehl G Um Stacks zu verwenden, müssen wir Elemente gruppieren, damit XD uns die Option bietet, diese Stack-Funktion zu verwenden. Also klicken wir weiter und klicken auf Stack aktivieren. Und was jetzt passiert, ist, dass diese Gruppe in einen Stapel verwandelt hat. Wir können irgendwie sehen, wie das funktioniert, wenn wir anfangen, Artikel hinzuzufügen. Also im Moment sind unsere Artikel hier, die nur oder Vorspeise sind, sowie diese Artikelkarte Vue-Instanz, die wir haben. Der Abstand beträgt 20 Pixel. Jetzt werden Sie sehen, ob wir auf diese Instanz klicken und auf Command D klicken. Wir machen das noch einmal. Xd wird weitermachen und diese Instanzen basierend auf dieser Zahl, die wir hier haben, tatsächlich 20 Pixel voneinander entfernt 20 Pixel voneinander entfernt. Wenn Sie also auf die gesamte Gruppe basierend auf dieser Zahl klicken, die 20 Pixel beträgt, ist dies der Abstand von allem. Wenn wir das bearbeiten und machen, sehen wir mal, 30 Pixel. Jetzt haben die Dinge einen größeren Abstand oder wir können tiefer gehen und 15 machen. Und ich denke, für unseren Zweck sieht 15 tatsächlich gut aus. Jetzt haben wir also eine kleine Vorspeise-Abteilung. Und ich zeige Ihnen, was diese Polsteroption hier ist und warum sie nützlich ist. Wenn Sie also in unseren Stapeln auf dieses kleine Symbol klicken, werden unsere Stapel in eine horizontale Option umgewandelt. Wie Sie sehen können, wird es weiter horizontal statt vertikal weitergehen , was cool ist. Wenn Sie etwas haben, das wir eine horizontale Schriftrolle nach Brenna wollen , wollen wir die vertikale. Lasst uns also weitermachen und das in vertikal umstellen. Und weil wir das gemacht haben, haben wir unsere Vorspeisentexte hierher verschoben. Also werden wir weitermachen und das hier auf die linke Seite unserer Gruppe verlagern . Und wenn ich jetzt Command D in dieser ganzen Gruppe drücke , damit wir arbeiten können, sind wir an Bäumen. Ich kann das hier runter ziehen und ich kann es genau unten in dieser anderen Gruppe einstellen . Das Problem dabei ist jedoch, dass, wenn wir mehr Artikel erstellen, mein Stapel für die Vorspeisen, dieser andere Abschnitt oder dieser andere Stapel nicht ausfallen würde. Was ich also tun kann, ist tatsächlich verschachtelte Stacks zu erstellen, was bedeutet, dass ich die Umschalttaste gedrückt halten kann , um beide Gruppen auszuwählen , und dann Command G drücken und dies auch in einen Stapel verwandeln. Und was jetzt passiert, ist, dass wir eine Gruppe haben, die zwei Stapel enthält. Eine für Vorspeisen und diesen werden wir den Text in Vorspeisen ändern . Da sind wir los. Und jetzt können Sie weitermachen und dem Stapel hier eine Polsterung hinzufügen . Wenn ich also eine Polsterung von 20 hinzufüge, wird es weitergehen und von allen Seiten 20 Pixel Abstand geben . Wenn ich nur die obere Polsterung haben möchte, was hier der Hauptfall ist, können wir mit diesem kleinen Knopf nur die obere Polsterung von 20 erstellen. Auf diese Weise haben wir nur einen Abstand von 20 Pixel. Und rechts und unten und links sind nicht wirklich betroffen. Und jetzt haben wir einen Abstand. Und in diesem Fall, wenn ich jetzt weitere Vorspeisen hinzufüge, werden die Einträge nach unten geschoben. Weil dies ein verschachtelter Stack ist. Jetzt können Sie den Wert von Stacks irgendwie sehen, insbesondere wenn Sie mehrere Artikelkategorien haben. Im Gegensatz zu unserer Hauptrestaurantseite hier, wo wir früher das Wiederholungsraster verwendet haben. Das ist super cool. Sie können dies in Ihren Entwürfen und mehreren Abschnitten verwenden. Und ich ermutige Sie , damit herumzuspielen und zu sehen, was Stack zu bieten hat. Jetzt, da wir das Setup haben, wählen wir die Gruppe für die Vorgänge aus und duplizieren sie, indem wir auf Befehl D klicken. Und das hat hier automatisch einen weiteren Stapel für mich erstellt . Und ich werde das in Wüsten umwandeln. Da sind wir los. Jetzt haben wir eine Reihe von Gegenständen. Wir können diesen dritten hier löschen und nur zwei Vorspeisen haben. Und wir können diesen zweimal duplizieren, um zwei weitere Vorspeisen zu haben und noch eine Wüste zu machen. Oder fahren Sie fort und drücken Sie Befehl Z, um das rückgängig zu machen. Und so weiter und so fort. Alles wird richtig angepasst. Ich bringe einfach ganze Gruppe in die Zentren. So sieht es auch optisch zentriert aus , was ich denke, es sieht gut aus. Und die nächste Vorlesung, Kommen wir zurück und füllen oder ein Menü mit einigen Beispieldaten füllen. 42. Unsere Menü-Seite vervollständigen: Okay, jetzt, da wir unsere Stapel für die Menüelemente eingerichtet haben , sind wir jetzt bereit, unsere Mini-Seite endlich mit einigen Beispieldaten zu füllen . Es sieht also nicht so langweilig aus und mach dich bereit, auf unsere anderen Seiten weiterzugehen. In den Ordnern für die Ressourcen dieses Projekts finden Sie also zwei Ordner. Eine für die Beispieldaten, bei denen wir auch auf die Beispieldaten unserer Restaurants zugreifen , sowie eine für unsere Menüseite unter Bildern, damit wir hier auf einige Bilder für unsere Artikel zugreifen können . Aber ich mache weiter und mache einfach ein bisschen kleiner, damit wir hier irgendwie Ordner sehen können. Und was ich tun werde, ist zuerst unser Menü hier mit den Bildern zu füllen und unser Menü hier mit dann gefolgt vom Text. Also mache ich es für die Werbetreibenden und dann überlasse ich es dir für die Vorspeisen und Wüsten . Gehen wir also zur Vorspeise zu den Bildern unter Vorspeisen und ziehen diese Bruschetta, die die erste ist, hier rüber. Was Sie also bemerken werden, ist, dass das Zuschneiden für das Bild nicht das beste ist. Was Sie also tun können, ist hier in das Bild zu doppelklicken und es tatsächlich zu bewegen. Der Hauptteil des Essens, das wir zeigen wollen, ist also zentriert. Perfekt. Benutze die Escape-Taste, um aus diesem Gegenstand herauszukommen. Machen wir das Gleiche für unser käsiges gefülltes Brotbild hier. Und dann öffne ich für den Text hier unsere Textdatei namens Food Dash Vorspeisen oder TXT. Es gibt auch die Wüsten und die Vorspeisen, die Sie benutzen können. Und so kopiere ich von hier drüben den Namen dieses Gerichts bis zum Artikelnamen und dann die Beschreibung hier drüben. Und wie bereits erwähnt, wenn es eine zu lange Beschreibung gibt, wird XD sie in das Textfeld zuschneiden , das wir haben. Aber eine Sache, mit der ich hier nicht sehr zufrieden bin, ist der Abstand zwischen der Beschreibung und diesem Zähler-Button. Also gehe ich schnell weiter und gehe zu unseren Komponenten und stelle sicher, dass diese Textgröße etwas vom Zähler-Button entfernt ist. Wenn wir jetzt zurückgehen, sollte ich ein bisschen besser aussehen . Für die Kalorien. Das haben wir auch hier drüben. Es ist 540 für diesen. Also lasst uns weitermachen und hierher legen. Und dann beträgt der Preis auch 999. Und wieder, während wir die Beispieldaten angeben, sehen wir einige der Probleme mit den Abständen. Dies könnte also definitiv ein bisschen mehr verteilt werden. Also werde ich auf unsere Komponente zurückgreifen und diese kleinen Anpassungen vornehmen, indem das Dollarsymbol ein wenig überbringe. Vielleicht 25 Pixel. Viel besser. Ich werde das Gleiche für die kitschig gefüllte Brotprobe tun. Geben Sie die Daten ein in. Und wieder können Sie hier immer noch das gleiche Problem mit dem Text sehen . Also hier drüben für den Artikelnamen werde ich ihn auf eine feste Größe ändern und diesen dann auch hier rüber ziehen. Und wenn wir das auf eine feste Größe ändern, werde ich auch die Schriftgröße auf 14 ändern . Ich denke, das ist besser. Wenn ich zurückgehe. Jetzt können wir sehen, dass es eine bessere Größe ist. Lasst uns weitermachen und die Beschreibung hier ändern. Perfekt auch bei der Preisgestaltung. Dafür, was ich hier sehen kann, ist eine 99. Kalorien sind drei, 95. Perfekt. Jetzt haben wir unsere Vorspeisen. Ich werde schnell und schnell durch den Rest vorwärts gehen. Aber wenn du die Idee inzwischen bekommst , sehe ich dich in nur einer Sekunde. Jetzt nur noch eine Vorwarnung, Sie könnten hungrig werden, wenn Sie an diesem Teil der App arbeiten. Ich werde nicht lügen. Ist mir auch ein paar Mal passiert. Nehmen Sie also gerne ein paar Pausen zum Schwerkraft-Essen ein, wenn Sie möchten. Und da hast du es. Geht weiter und kopiert und klebt alles hier rein. Ich weiß also, dass es ein bisschen mühsam ist, aber unsere Seite sieht definitiv besser aus mit echten Beispieldaten hier drin. Perfekt. Jetzt haben wir unsere Anmeldeseite oder die Telefonbestätigungsseite oder Begrüßungsbildschirm und die Menüseite abgeschlossen. Und bereit, endlich auch auf unsere Bestellseiten weiterzugehen. Und die Profilzahlung und die Bestellhistorie als Übung für Sie. Also machen wir hier eine kleine Pause und kommen im nächsten Abschnitt zurück , um unser mobiles App-Design fortzusetzen. 43. UX Ressourcen: , wenn es um UX- und UI-Design Was sind die Unterschiede, wenn es um UX- und UI-Design geht? Dies ist eine der ersten Fragen , die viele neue Designer gestellt haben. Und deshalb denke ich, dass es ein angemessener Zeitpunkt ist, eine Pause einzulegen, um einige der UX-Tipps, die ich für Sie habe, durchzugehen , bevor Sie unser mobiles Design vervollständigen. Wenn es um das UI-Design geht, bedeutet möglicherweise UI eine Benutzeroberfläche. Dies ist also die eigentliche Anwendung oder Website oder welche Schnittstelle Sie für den Benutzer entwerfen. Dies besteht normalerweise aus dem visuellen Design, den Farben. Ich bin ein Grafikdesigner, der normalerweise an dieser Schnittstelle arbeitet. Und es besteht aus den Layouts der Objekte auf der ganzen Seite, der Typografie, wirklich allem, was Sie als Benutzer sehen und mit dem Sie interagieren können . Jetzt ist UX etwas komplizierter, bedeutet im Wesentlichen Benutzererlebnis. So interagiert der Benutzer tatsächlich mit dem Design. Also nicht nur der visuelle Aspekt davon und wie es aussieht, sondern wie sie damit interagieren. Zum Beispiel hat Wireframing und Prototyping mehr mit UX-Design zu tun, da Sie die Erfahrung für den Benutzer zusammenstellen und die Platzierung von Objekten direkt darauf wirkt, wie der Benutzer verwendet die Anwendung und so weiter und so weiter. Im Wesentlichen ist die Benutzeroberfläche der Teil des Designs, den Sie sehen können , und UX ist ein Teil des Designs, den der Benutzer fühlen kann. Ich denke, eine der großartigen Ressourcen online verfügbar sind, die Sie sich ansehen können , um Ihre UX-Designfähigkeiten zu verbessern, was einige Zeit dauern könnte. Normalerweise braucht das UX-Design etwas mehr Zeit um es zu perfektionieren und einzugrenzen. Wenn Sie nun zu diesen Link-Gesetzen von Ux.com gehen, können Sie als neuer UX-Designer auf eine Reihe von Tipps und Tricks zugreifen , die Sie verwenden können. Ich überlasse das dir , um ausführlich zu gehen. Aber auf dieser Website finden Sie eine Reihe von Tipps und Tricks zusammen und Formen von Gesetzen , was Sie in Ihrem Design tun sollten. Also gebe ich dir ein Beispiel. Dieses Gesetz der Nähe bedeutet , dass die Objekte, die sich nahe oder annähern zueinander befinden nahe oder annähern zueinander , tendenziell miteinander gruppiert werden. Ich kann mich durchklicken, um mehr darüber zu erfahren. Aber im Wesentlichen geht es darum, warum Nähe im Design wichtig ist und welche Art von Beziehung sie mit nahegelegenen Objekten aufbaut und so weiter. Sobald Sie fertig sind, können Sie sich noch mehr Gesetze ansehen. Es gibt viele großartige Gesetze für das UX-Design. Natürlich können Sie sich hier genauer ansehen und sich all diese Gesetze ansehen. Ich werde sie nicht eins nach dem anderen durchgehen. In dieser Vorlesung. Ich ermutige Sie, eine Pause einzulegen, dies durchzugehen und denken Sie daran, dass dies nicht gerade etwas ist , das Sie sich merken möchten, sondern etwas, auf das Sie als Ressource zugreifen möchten, während Sie es tun Ihre Designarbeit. Werfen Sie also einen Blick auf diese Website. Und wieder, der Link dafür als Gesetze von Ux.com, Sehr hilfreich. 44. Ein Logo entwerfen: Wenn Sie bisher mitgemacht haben, haben wir unsere ersten Seiten zusammengestellt. Wir haben die Anmeldeseiten, die Telefonbestätigung, die Hauptseite mit allen verfügbaren Restaurants sowie eine kleine Menüseite zusammengestellt die Hauptseite mit allen verfügbaren Restaurants sowie oder damit Sie Artikel bestellen oder zu Ihrer Bestellung hinzufügen können. Wir sind bereit, auf unsere Bestellseiten sowie unsere Profilzahlungs- und Bestellhistorie zu gelangen. Und eine Sache, die ich anmerken möchte , ist, dass ich glaube, dass ich auch die Standortseite verpasst habe , als wir die Kunsttafeln zusammengestellt haben. Also werde ich weitermachen und das einfach ein bisschen übergehen. Machen Sie weiter und duplizieren Sie diese Seite. Dann werde ich weitermachen und den Ort betiteln. Im Wesentlichen ist dies die Seite , auf der Sie Ihre Adresse festlegen können. Wenn du dich erinnerst, wenn ich einfach unsere Wireframes öffne. Hier geht's, Das sind unsere Wireframes, die diese Standortseite geöffnet diese Standortseite geöffnet auf der Sie Ihre Adresse festlegen , wohin die Lieferung gehen soll. Und so gestalten wir das auf dieser Seite, Standortseite hier drüben. Noch eine Sache, während ich hier bin, möchte ich nur sicherstellen, dass alles hier mit meinen Kunsttafeln oder so richtig verteilt ist. Ich denke, das sieht gut aus. Da sind wir los. Perfekt. Also ja, wir sind bereit, diese Seiten zu entwerfen. Bevor wir das tun, sollten wir ein Logo für gesunde Bisse entwerfen. Und wenn Sie sich daran erinnern, wie wir den Brief durchgegangen sind, eine der wichtigsten Ergebnisse ist eine der wichtigsten Ergebnisse auch das Logo für das Unternehmen. Also machen wir das zusammen in dieser Vorlesung. Jetzt für das Logo möchte ich es einfach halten. Ich möchte es etwas Relevantes für den Namen behalten, was normalerweise das ist, was Sie in einem Logo machen möchten. Also komme ich direkt hierher, direkt außerhalb meiner Kunsttafel und zoome rein, um hier ein Logo zu machen , bevor ich es zu meinem gesamten Design bringe . Was ich also für gesunde Bisse tun möchte , ist im Wesentlichen ein wenig zu haben, vielleicht jeden Buchstaben und vielleicht eine Art Bissspuren, die aus diesem Altersbuchstaben herausgenommen wurden , um den Namen darzustellen. Ich denke, das könnte gut aussehen. Und deshalb möchte ich das mit Hilfe unseres Linienwerkzeugs und einer Reihe von Ellipsen machen. Gehen Sie also gerne mit, wenn Sie auch selbst eine Version des Logos erstellen möchten . Aber die endgültige Version dieses Logos Walzer wird in die Ressourcen für dieses Projekt aufgenommen. Sie können das also einfach benutzen , wenn Sie möchten. Perfekt. also für unser Logo ein Zeitalter erstellen, Lassen Sie uns also für unser Logo ein Zeitalter erstellen, indem wir das Linienwerkzeug verwenden. Wir wollen also eine Zeile hier drüben, und ich benutze nur Shift, um sie gerade zu halten. Nun, für die Randgröße, gehen wir mit 20. Wir werden auch hier drüben die Caps abrunden. Und dann werde ich alle benutzen, um diese Seite des zweiten Lebensalters einfach zu duplizieren . Hier drüben. Ich verwende Command D , um das noch einmal zu duplizieren. Und dann mach weiter und drehe es. Verwenden Sie diesen kleinen Knoten. Es ist gerade. Auf diese Weise. Wir werden das einfach irgendwo in die Mitte dieses perfekt ausgewählten setzen. Geben wir ihm eine Grenzgröße von tatsächlich 25 an. Und lassen Sie uns die Randfarbe in unsere grüne Farbe ändern. Ich werde fortfahren und diese Zeilen tatsächlich mit Command G oder Control G unter Windows gruppieren diese Zeilen tatsächlich mit . Und dann gehe ich weiter und zoome einfach auf diese Seite des Zeitalters. Und ich werde ein paar Ellipsen mit E erstellen, diese Art von Bissspuren wie diese darstellen. Jetzt mache ich weiter und gruppiere diese Ellipsen einfach zusammen schiebe sie ein wenig nach unten. Stellen Sie also sicher, dass Sie in einer Gruppe sind. Ihre H-Form ist in einer Gruppe. Und eigentlich werde ich das auch ein bisschen größer machen . Es nimmt also mehr Platz ein. Mach das ein bisschen größer. Ich denke, das sieht gut aus. Da sind wir los. Weil dies dieser Hs ist, der aus diesen drei Zeilen geschaffen wurde. Wir müssen den Umrissstrich tatsächlich verwenden , damit wir dies eher in eine Form verwandeln. Wir können das tun, indem wir zum Objektpfad gehen. Und wenn Sie sich an Umrissstrich erinnern, wurden die Striche hier irgendwie zu Formen. Wir können also unsere booleschen Werkzeuge verwenden , um diese Bissspur außerhalb dieses Alters zu erzeugen. Wir können das tun, indem wir zuerst sicherstellen, dass diese alle zusammengefasst sind , wie ich es hier habe. Und wähle sie beide zusammen aus. Und subtrahieren Sie den Objektpfad. Es sieht gut aus. Wenn Sie Änderungen an Ihrer Form vornehmen möchten, können Sie immer weitermachen, hier hineingehen und Kreise neu anordnen, hier hineingehen und damit es besser aussieht Smith Cole. Tu wirklich was du willst. Ich denke, das sieht gut aus. Ich werde einfach weitermachen und diese Gruppe duplizieren und diese Gruppe auch hierher bringen. Auch auf dieser anderen Seite des Zeitalters. Ich denke, das sieht gut aus. Zögern Sie nicht, Ihre Kreise zu optimieren , wenn Sie nicht voll und ganz damit zufrieden sind , wo Sie haben. Perfekt. Also da haben wir es, das ist unser kleines Logo für dieses Projekt. Ich werde weitermachen und es als Ressourcenrolle speichern , die Sie verwenden können. Die nächste Vorlesung. Kommen wir zurück und platzieren dieses Logo in unserem gesamten Design. 45. Unser Logo aufsetzen: Okay, jetzt wo wir unser Logo bereit haben, legen wir es auf unseren Begrüßungsbildschirm. Und die Anmeldeseite, ich denke, das sind so ziemlich alle wichtigen Orte, an denen wir sie platzieren müssen. Wenn Sie das Logo nicht haben oder es in der vorherigen Vorlesung nicht bei uns entworfen haben. Sie können darauf zugreifen, indem Sie zu den Ressourcen für dieses Projekt gehen. Und unter dem Logo-Ordner sehen Sie ein Logo mit grünem Punkt SVG und ein Logo weiß das SVG. Ein weiterer Grund, warum Sie diese als SVGs und nicht als PNGs oder JPEGs exportiert haben, was Sie normalerweise für Bilder verwenden, ist, dass SVG Ihnen die Möglichkeit gibt, das Logo zu bearbeiten und seine Größe zu ändern, ohne an Qualität zu verlieren. Das ist einer der Gründe, warum wir SVG für einige Icons und Logos und ähnliches verwenden . Während Sie für Bilder, auf denen Sie ein Foto haben, verwenden Sie normalerweise JPEG und PNG. Das werden wir später auch näher erläutern , wenn wir unsere Dateien exportieren. Im Moment können Sie beide in Ihr Projekt importieren , indem Sie sie einfach in Ihr XD-Projekt ziehen . Jetzt sehen wir, dass wir zwei hier drüben haben. Ich glaube, der andere hat sich hier importiert. Also diese weiße, die wir auf unserem Begrüßungsbildschirm benutzen werden. Also platzieren wir es so in der Mitte des Bildschirms oder wo wir unseren Platzhalter haben. Lassen Sie uns für den Platzhalter fortfahren und jetzt löschen. Bewegen Sie diesen Text auch ein wenig nach oben , damit er nahe am Logo liegt. Für die Größe mag ich es, wie es hier ist, was 91 mal 126 ist. Dann lasst uns für diese grüne gehen und das ziehen. Du hast es erraten. Eine Anmeldeseite, die in unserem Platzhalter zentriert ist, hier. Lösche diesen. Ich denke, wir können es auch ein bisschen mehr nach oben bringen, also haben wir einen gewissen Abstand zu unserem Firmennamen hier drüben. Apropos Firmennamen, es sieht aus, als wäre es eine schwarze Füllung, also werde ich das einfach in dieses Grau ändern , das wir haben. Sie können diesen Hex-Code eingeben und ihn auch speichern, genau wie ich für unser Farbmuster, aber überhaupt kein Problem, wenn Sie dies nicht getan haben, denn in den folgenden Vorträgen sind wir wir kommen zurück und sprechen über Farbe und darüber, wie wir in unseren Designs problemlos auf Farben zugreifen können . Da haben wir es, das ist unser Logo, und wir sind bereit voranzukommen. 46. Ein Farbschema erstellen: Oder ein Farbschema. Es macht viel Spaß, denn wir können tatsächlich mit einer Reihe von Farben herumspielen und sehen, was gut aussieht und was zu unserem Branding passt. Wenn es um unser App-Design geht. Ich persönlich liebe den Abschnitt zur Farbschemaauswahl des Kurses, weil wir dort wirklich kreativ sein und eine Art Branding für das Unternehmen einrichten eine Art Branding , für das gearbeitet hat. In diesem Fall, weil sie nur solche wie grüne Farbe als Teil ihrer Design-Slips angegeben haben . In Bezug auf das Farbschema. Natürlich hat er gerade erwähnt, verwenden Sie ein grünes Farbschema, um die Gesundheit des Produkts usw. zu zeigen . Deshalb werden wir dieses kleine Online-Tool verwenden um ein Farbschema für sie basieren auf grüner Farbe, die wir haben. Wenn Sie zu coolers.co gehen, drei O's drin. Stellen Sie also sicher, dass Sie es richtig eingeben. Coolers.com. Dies ist eine großartige Ressource , mit der Sie schnell Farbschemata für Ihre Projekte generieren können. Sobald Sie dort drüben sind, wird es einfach auf diesen Startgenerator geklickt, und dann wird es weitergehen und Sie in diesen kleinen Farbschema-Generator versetzen . Und von hier aus können Sie einfach die Leertaste auf Ihrer Tastatur drücken die Leertaste auf Ihrer Tastatur , um neue Farbpaletten zu generieren , die zusammen gut aussehen. Sie können dies auch während Ihres gesamten Projekts verwenden. Es gibt Ihnen den Hexadezimalcode für jede Farbe in dieser Palette. Weil wir bereits eine der Farben für unsere App haben, seifig auf XD. Mir hat diese grüne Farbe sehr gut gefallen, die du hier benutzt. Wenn ich also nur einen der Begrüßungsbildschirm hier anklicke, klicken Sie auf die Füllung. Ich kann diesen Hex-Code tatsächlich von hier kopieren , der zu Kühlern zurückkehrt um eine der Farben hier zu erhalten. Mal sehen wir uns den ersten hier drüben an. Wir können weitermachen und einfach doppelklicken um diese Farbe zu bearbeiten, indem wir diesen Code einfügen. Drücken Sie Enter. Dann möchte ich weitermachen und auf diesen kleinen Lock-Button klicken hier auf diesen kleinen Lock-Button klicken, das bedeutet, dass diese Farbe gleich bleibt. Es wird sich nicht ändern, da wir einfach die Leertaste drücken. Und dann werden wir versuchen , diese Farbe zu verwenden, um ähnliche Farben oder Farben zu finden , die in Kombination mit dieser Farbe gut aussehen. Wenn Sie nun auf Space klicken Nachdem Sie sicherstellen, dass Sie diese Farbe in der Website sperren , generieren Sie ein Schema für Sie. Dann kannst du weitermachen und den auswählen, den du magst. Ich will nichts , was zu anders ist. Wenn Sie eine bestimmte Farbe wünschen, können Sie sie jederzeit sperren. Und basierend auf dieser Farbe können Sie mehr Farben für Ihre Farbpalette erstellen. Aber lasst uns weitermachen und weiter Space drücken , um zu sehen, was wir bekommen. Ich mag dieses Farbschema hier drüben irgendwie. Ich denke, es sieht ziemlich gut aus. Es ist einfarbig, was mir für diese Art von Palette hier gefallen hat. Warum gehen wir also nicht fort und verwenden dieses Farbschema hier drüben. Wir können diese Palette sogar speichern , indem wir uns einloggen und auf Speichern klicken. Oder wir können es exportieren, indem wir die URL kopieren. Und so haben wir jetzt die URL für diese Palette. Wenn Sie es also an eine andere Person senden möchten oder wenn Sie es in unserem Browser durchsuchen, wird diese Website angezeigt. Also werde ich Ihnen eine Minute geben um diese Hex-Codes aufzuschreiben, wenn Sie möchten, wenn Sie genau dieses Farbschema verwenden möchten, gerne Ihr eigenes verwenden, wenn Sie möchten. Wenn Sie jedoch diesem Farbschema folgen möchten , können Sie diese Farbpalette hier verwenden. Lassen Sie uns eine kurze Pause machen und in der nächsten Vorlesung zurückkehren, um unsere Farbpalette auf unser Projekt anzuwenden. 47. Unseren Farbstil auftragen: Es tut weh, jetzt, da wir eine Farbpalette haben, die wir mit Coors oder Ko generiert haben, habe ich weitergemacht und tatsächlich ein kleines PDF dieses Farbschemas in die Assets der mobilen App für gesunde Bisse platziert dieses Farbschemas in . Sie können als PDF zugreifen und dann diese Hex-Codes verwenden , um das gleiche Farbschema für Ihr Projekt zu generieren . Aber wie ich bereits erwähnt habe, können Sie auch Ihr eigenes Farbschema verwenden. Was wir jetzt tun werden, ist weiter zu unserem XD zu gehen . Einfach auf der Seite hier oben, hier oben. Ich erstelle hier einen weiteren Abschnitt in meiner Pasteboard und nenne diesen mein Farbschema. So. Fahren Sie fort und richten Sie einfach die linke aus, richten Sie diese an den Komponenten aus. Wir kommen ein bisschen runter und dann möchte ich weitermachen und , mal sehen, 12345. Und wir werden hier fünf Ellipsen erstellen , um dieses Farbschema für unser Projekt zu generieren. Ich werde einfach weitermachen und das hier rüber stellen , die Ellipse. Ich entferne die Grenze von dort. Machen Sie weiter und erstellen Sie einfach fünf davon. Perfekt. Eins nach dem anderen. Ich gebe einfach diese Hex-Codes in meine Auslassungspunkte ein. Der erste ist also dieser Hexadezimalcode für Farbe eins. Gehen Sie irgendwie weiter und ändern Sie die Füllung in diesen Code. Wir kriegen diese Farbe. Das Gleiche hier drüben. Hol dir diese Farbe. Lesen Sie diesen Prozess weiter für alle Farben. Da sind wir los. Da sind wir los. Wir haben unser Farbschema in unserem Projekt. Jetzt können wir diese Farben natürlich hier unten zu unseren Farbfeldern hinzufügen und hier unten zu unseren Farbfeldern sie während unseres gesamten Projekts verwenden. Aber eine Sache, die XD uns gibt, ist die Möglichkeit, Farbstile in unserer Bibliothek zu verwenden. Wenn Sie zu unseren Bibliotheken gehen, sehen wir von hier oben, dass wir ein paar Farben in unserem Asset-Panel haben . Auf diese Weise, wenn Sie diesem Farbbereich des XD in unseren Bibliotheken unser Farbschema hinzufügen . Wir können sie während unseres gesamten Projekts problemlos verwenden. Und wenn wir unser Farbschema ändern müssen, müssen wir einfach unser Farbschema hier ändern und es wird während unseres gesamten Projekts angewendet. Und du wirst sehen, wie das in nur einer Sekunde nützlich ist. Um dieses Farbschema anzuwenden, können Sie einfach jedes Objekt auswählen, bei dem Sie diese Farbe haben, und es dann zu unserer Farbe hinzufügen. Oder Sie können alle so auswählen. Und klicke auf Plus. Beide arbeiten. Und so würde XD diese Farben hier als Farbpalette für uns generieren , wobei ein Titel der Hex-Code ist. Wenn Sie möchten, können wir diese Farben umbenennen. Ich werde hier die Primarvereinigung dafür machen. Für die zweite hier, die diese Farbe ist, werden wir sekundär machen. Und das wird dein Akzent sein. Und das wird dein Unfall sein. Um X und drei für diesen zu machen. Jetzt haben unsere Farben auch einen Namen. Jetzt, da wir hier unser Farbschema eingerichtet haben , ist das Schöne daran, dass XD voranschreitet und sehen wird , wo Sie diese Farben verwenden. Und sie sind bereits an unser Farbschema oder unsere Farbstile hier in XD gebunden . Um Ihnen ein Beispiel zu geben, wenn Sie diese Primärfarbe jetzt bearbeiten , indem Sie mit der rechten Maustaste klicken und auf Bearbeiten klicken. Wenn wir uns entscheiden, weiterzumachen und sagen wir mal, diese Grundfarbe zu ändern , sagen wir mal, lila. Dann wird es weitergehen und überall in unserem Design angewendet werden, wo wir diese Farbe verwenden. Damit können wir unser Farbschema leicht ändern, ohne dass wir unser durchgehen und jede Farbe ändern müssen Design durchgehen und jede Farbe ändern müssen, wobei jedes Objekt diese Farbe verwendet. Und du kannst sehen, wie nützlich das sein kann. Jetzt, da das gesagt ist, werde ich einfach Command Z ein paar Mal drücken, bis wir wieder zu der Farbe zurückkehren , die wir haben. Wenn wir diese anderen Farben während unseres gesamten Designs verwenden, können wir natürlich diese anderen Farben während unseres gesamten Designs verwenden, sehen wie nützlich dieses Farbschema und die Farbsets und unsere XD-Bibliotheken sein werden. 48. Farbverläufe: So macht es Spaß, mit allen einfarbigen Farben zu arbeiten und sich für unser Farbschema zu bewerben. Noch mehr Spaß als das sind Steigungen. Farbverläufe ermöglichen es Ihnen im Wesentlichen, mehrere Farben zu kombinieren , um eine Art Netz zwischen zwei Farben zu erzeugen . Und du wirst in nur einer Sekunde sehen, wie das funktioniert. Wenn Sie diesen kleinen Kreis duplizieren , verwenden Command D und ziehen Sie eine Kopie nach unten. Wenn Sie hier zu einer Füllung gehen, können wir natürlich diese Farbe hier in jede einfarbige Farbe ändern hier in jede einfarbige Farbe wie wir es während unseres gesamten Projekts getan haben. Aber wenn Sie einen Farbverlauf erstellen möchten, können wir einfach zu diesem Abwärtspfeil hier drüben gehen. Wir haben mehrere Möglichkeiten. Wir können entweder einen linearen Farbverlauf machen , der einen Farbverlauf zwischen zwei Farben erzeugt . Sie können natürlich weitere Farben im gesamten Verlauf hinzufügen , wie Sie möchten, aber sie werden in einer durchgezogenen Linie gemischt. Sie können radiale Verläufe ausführen, was, wie der Name schon sagt, ein Farbverlauf ist, der über einen Radius verblasst. Sie können diesen Radius bearbeiten und ihn größer oder kleiner machen und so weiter. Wir können einen Winkelverlauf machen, weniger häufig verwendet wird , aber im Wesentlichen handelt es einen abgewinkelten Farbverlauf, wie der Name schon sagt. Am häufigsten wollen wir jedoch einen linearen Gradienten. Und mit einem linearen Farbverlauf können wir diese beiden Punkte für diese beiden Farben sogar durch unser Objekt bewegen . Also können wir einen solchen Winkel machen. Dann können wir fortfahren und die Farbe für jeden Knoten festlegen. Wenn wir also hier einen Knoten auswählen , was wir tun können, wenn wir diesen oder diesen Knoten hier in unserer Farbauswahl auswählen, können wir diese Seite des Verlaufs bearbeiten. Und wenn wir dann auf die andere Seite oder den anderen Knoten gehen, können wir diesen auch bearbeiten. Und so machen wir während unseres gesamten Designs Farbverläufe. Für unseren ersten Farbverlauf werden wir also einen Farbverlauf auf meinen Begrüßungsbildschirm anwenden . Was machen wir? Die grüne Farbe, die wir hier haben. Für die eine Seite und für die andere Seite werden wir hier die Sekundärfarbe machen, die ich hier als Musterfarbe ausgewählt habe. Wenn nicht, können Sie den 52796 f Hex-Code dort hineinlegen . Und wir werden Ihnen auch hier den gleichen Farbverlauf geben. Ich werde es in diesem 45-Grad-Winkel belassen , den ich hier habe. Jetzt, wenn diese Option ausgewählt ist, können Sie hier auf das kleine Plus-Symbol klicken , um eine Farbe aus dieser Auswahl hinzuzufügen. Jetzt ist XD vorangegangen und hat diesen Gradienten für uns geschaffen. Und wir können es sogar in unseren Farbstilen umbenennen . Wenn wir nun zu unserem Begrüßungsbildschirm gehen und die gesamte Kunsttafel auswählen. Da diese Hintergrundfarbe von der Kunsttafel erzeugt wird . Anstatt die Füllung hier so zu ändern, dass sie diesem Verlauf entspricht, können wir einfach auf diesen Farbverlauf in unseren Bibliotheken klicken . Und wir werden den gleichen Farbverlauf auf unseren Begrüßungsbildschirm anwenden . So benutzt man Farbverläufe in XD. 49. Einen Figurenstil einrichten: Ähnlich wie wir diesen Farbstil in unserem XD eingerichtet haben. Und jetzt können wir es in unserem gesamten Design verwenden. Wir können das Gleiche mit dem Schriftsatz machen. Und wenn Sie sich früher erinnern, habe ich erwähnt, dass wir zurückkommen und die SF Pro-Schriftart während unseres gesamten Designs anwenden werden. Und das werden wir als unseren Primärfonds verwenden. Normalerweise verwenden wir diese Schriftart in einer iOS-App, da sie am häufigsten von Apple oder sich selbst verwendet wird. Wenn Sie ein bisschen kreativer werden und eine benutzerdefinierte Schriftart installieren möchten , können Sie dies auch tun und stattdessen diese Schriftart anwenden. Aber ich denke, wir werden SF Pro während dieses iOS-Designprojekts verwenden . Wenn Sie dies noch nicht getan haben, gehen Sie weiter zu developer.apple.com. Slash-Schriften weiterleiten. Geben Sie diese URL und dann sollten Sie zu dieser Seite weitergeleitet werden , auf der Sie SF pro kostenlos herunterladen können . Wenn Sie jetzt unter Windows sind, möchte ich darauf hinweisen, dass es möglicherweise etwas schwieriger ist, diese Datei zu öffnen , da sie als DNG-Datei heruntergeladen wird, die Installationsdatei für Mac ist. Wenn Sie jedoch fortfahren und sieben zip installieren und herunterladen , indem Sie hier zu dieser URL gehen, sollten Sie in der Lage sein, diesen Ordner mit 7-Zip zu entpacken, in dem Sie dann auf die Schriftdateien zugreifen wo Sie diese Schriftdateien öffnen können, damit sie auf Ihrem Computer installiert werden. Jetzt haben wir diese Schriftarten installiert, eine frühere Vorlesung, also werde ich den Installationsprozess nicht durchlaufen, aber ich gebe Ihnen eine Minute, um eine Pause einzulegen und diese Schriftarten zu installieren, wenn Sie dies nicht getan haben. Und dann mach weiter und folge dem Rest der Vorlesung mit. Sobald Sie diese Schriftarten installiert haben, verwende ich diese Ressource namens type-scale.com, um tatsächlich einen Skill für unsere Schriftgrößen auszuwählen . Wenn es sich um eine Anwendung handelt, ob es sich um Mobilgeräte oder Web handelt, möchten wir normalerweise eine Art Schriftsatz mit unterschiedlichen Schriftgrößen einrichten , die eine Art Maßstab verwenden. Wenn Sie also möchten, verwenden wir Header-Tags, können wir eine dieser größeren Schriftarten verwenden. Und dann können wir für unsere Körpertexte und Beschriftungen eine Art Textschrift verwenden, die kleiner ist. Und jetzt bin ich einfach auf diese Website gegangen. Und unsere Basisgröße beträgt 16 Pixel mit einer Skala von Hauptdrittel. Es wird also weitergehen und jede Schriftgröße mit 1,25 multiplizieren , um die nächste Größe zu generieren. Natürlich können Sie mit anderen Arten von Skalen für Ihre Schriftarten herumspielen , und es wird immer größer oder kleiner, je nachdem , welche Sie auswählen. Aber ich denke, dass dieser große dritte oder der perfekte vierte gut funktioniert, für den Zweck dieses Kurses werden wir das Hauptdrittel nutzen. Nehmen Sie sich also eine Sekunde , um diese Pixelgrößen zu ermitteln. Wenn Sie sie haben, lassen Sie das Fenster offen, wir können es verwenden, wenn wir unsere Typensets in XD einrichten zu XD selbst gehen. Schließ das. In XD. Wir werden diesen Satz einrichten, indem wir hierher gehen , wo wir unser Farbschema haben. Wir werden diesen Farbschema-Text hier drüben duplizieren . Und wo werden wir einen Schriftsatz einrichten? Perfekt. Und jetzt werden wir weitermachen und einfach reinzoomen. Und lasst uns weitermachen und einen Text erstellen und diesen nennen, Körper eins. Für diesen möchte ich, dass die Schriftart ECIF pro ist, möchte sie 16 Pixel haben. Für die Füllung. Wir möchten diesen 333 Hex-Code für meine Body Font verwenden. Dann mache ich weiter und lege das einfach hier unten ab dupliziere es noch einmal. Und dann werden wir diesem Körper mit meinen Fähigkeiten machen . Es sollte 20 Pixel groß sein. wir hier rauf gehen, machen wir Header drei. Dieser sollte 31,25 sein. Dupliziere das noch einmal. Mache Header zwei, und dieser sollte 39,6 sein, tut mir leid, 0,06. Wird das passieren, wenn du daran arbeitest? Also sei vorsichtig. Schließlich werden wir Header eins machen. Dieser sollte 48,83 sein. Während wir unser Design durchlaufen, wir den Header wahrscheinlich nicht so oft verwenden, aber es ist gut, während unseres gesamten Designs Zugriff auf diese Typensätze zu haben . Jetzt stelle ich die einfach hier drüben ab. Ich wähle einfach all das hier aus. Für meinen Körper erstelle ich ein weiteres Duplikat davon, aber dieses werde ich Medium für mein Schriftgewicht auswählen und diesen einen Körper dann ein Medium nennen. Dann wähle ich alle zusammen aus und klicke dann auf das Plus-Symbol hier, um diese hier in XD in den Charakterstil zu übersetzen . Lasst uns weitermachen und diese umbenennen. Dieser sollte also ein Körper sein. Ich glaube, dieser sollte das Körper-One Medium sein. Wenn ich mich zu keinem Zeitpunkt irre, können Sie hier auf Bearbeiten klicken, um sicherzugehen. Sieht aus, als hätte ich es umgekehrt bekommen. Das Medium ist das hier drüben. Und dann sollte der 31.25 sein. Dann haben wir die 20 als meinen Körper auf die 31 zu fünf als Header drei, SF PRO 39 als Header zur größten Schriftart hier als Header eins. Sie können diese Textilien hier sogar neu anordnen oder sogar zusammenfassen. Sagen wir also, ich möchte alle meine Header zusammenfassen. Ich kann alle auswählen und eine neue Gruppe aus Auswahl erstellen. Und das werden alle meine Header-Schriften sein. Und dann gruppiere diese anderen zusammen und nenne sie meine Body Fonts. Sie können sie nach Belieben neu anordnen. Dies dient nur dazu, die Dinge in Ihrem Projekt zu organisieren. Während ich das tat, habe ich wohl meinen Schriftsatz hier durcheinander gebracht. Sie können also jederzeit zu der Schriftart gehen , die Sie ändern möchten. Dieser, um sie auf diejenigen zu setzen , mit denen Sie arbeiten. Also wähle ich Header drei aus, Site, an der ein drei Header zwei bei oder zwei Header eins sein sollte. Da sind wir los. Okay, sind meine Typensets, die wir mit einem breiteren Design verwenden werden. nächsten Vorlesung werden wir wiederkommen und diese in unseren Entwürfen anwenden . 50. Unsere Character anwenden: Es ist ein anderes, dass wir hier unser Charakterstil-Setup haben. Wir werden das in unseren Entwürfen anwenden . Ich fange hier ganz oben an . Für unsere Navigationsleisten lassen wir sie so, wie sie sind, da dies normalerweise der Satz oder der Zeichenstil in den Navigationsleisten verwendet wird . werden wir nicht wirklich ändern. Wir werden das so behalten, wie es ist. Aber wo auch immer wir unsere eigenen Texte haben. Wir werden unsere eigenen Charakterstile verwenden. Also, beginnend mit dem Begrüßungsbildschirm, klicken wir hier drüben auf gesunde Bisse und verwenden unsere Kopfzeile zwei. Was passiert, ist natürlich, dass die Zeichenstile standardmäßig mit dieser Farbe geliefert werden oder Phil hinzugefügt wird. Standardmäßig wird XD die gleiche Farbe für die Stile verwenden , die wir hier eingerichtet haben. Aber wir können fortfahren und Änderungen an unserer Füllung für die konkreten Fälle hier vornehmen. Also lasst uns weitermachen und das hier machen. So wie wir den Schriftwechsel durchlaufen. Erinnerst du dich daran? Da Schriftarten oder anders sind, können sich Ihre Ausrichtung ändern. Also hüte dich davor und richte Dinge immer wieder neu aus, während wir das tun. Also für den zweiten machen wir Header zu oder Header h3. Gehen Sie weiter und wieder und richten Sie die Dinge richtig aus. Wenn nötig. Wir werden auch weitermachen und die Dinge auch ein bisschen nach unten bewegen. Natürlich haben wir die Buttons hier, also werden wir diese Texte in unseren tatsächlichen Komponenten in nur einer Sekunde ändern . Aber für diese beiden werden wir beide auswählen und unseren Körper ein Medium für die beiden benutzen . Passwort vergessen. Ich mache weiter und füge am Ende einfach ein kleines Fragezeichen hinzu. Bewegen Sie es rüber. Also möchte ich diesen Körper tatsächlich zu einem Medium subtiler machen . Was machen wir weiter und klicken auf diesem Körper ein Medium bearbeiten , indem Sie mit der rechten Maustaste klicken und auf Bearbeiten klicken. Und ich werde einfach weitermachen und die Schriftfarbe tatsächlich in ein bisschen subtiler ändern , vielleicht etwas um diese Art von hellgrauer Farbe. Sie können diesen Hex-Code eingeben, um die gleiche Farbe für Ihren Körper zu erzeugen , einen mittleren Zeichenstil. Hier drüben. Ich gehe einfach weiter und bewege das zur Seite, um hier Platz für diesen Text zu lassen. Gehen wir zurück zu unseren Komponenten und wenden unseren neuen Schriftsatz über diesen Button an, wir werden Körper eins machen. Dann gehe ich weiter und ändere die Füllung in Weiß und wende auch ein Medium an. Oder lassen Sie uns hier eine halbfette Dicke machen. Ich werde diesen Stil speichern und diesen meinen Hintern in meinem Button-Textstil nennen . Für diesen Platzhalter verwenden wir den ersten Körper und bringen die Farbe einfach hier in eine subtilere Farbe. Dafür machen wir einen Körper eins. Wir haben hier keine Schriftart für diese Größe. Also wollte ich die Schriftgröße hier auf SF Pro ändern und daraus auch einen neuen Charakterstil erstellen , indem ich hier plus drücke. Das hier werden wir es nennen. Untertitel-Stil. Denken Sie daran, dass Sie während des gesamten Designs so viele Charakterstile erstellen können , wie Sie benötigen. Wann immer du denkst, dass deine Charakterstile etwas Einzigartiges haben. Selbst für die 0 Kalorien und die 1,1 Dollar hier drüben werden wir diese Beschriftung verwenden. Da der Unterschied darin besteht, dass wir diese tatsächlich in ein halbfett umwandeln würden, für diese kleine 0. Und hier werden wir das auch ändern. Was willst du? Unsere Komponenten sind jetzt mit unserer neuen Schrift auf dem neuesten Stand. In unseren Designer-Komponenten sollten dieses neue Schriftset und auch unsere Textilien verwendet werden. Für die Telefonbestätigung, die der Titel der Seite ist, machen wir Header drei. Dafür machen wir einen Körper eins. Sieht gut aus. Natürlich ist das hier. Wir haben dies nicht zu einer Komponente gemacht in die wir hier hineingehen und diese beiden für den Titel festlegen können . Das werden wir tun. Eine für den Dollar. Wir machen die Beschriftung Textil. Es. Wir werden weitermachen und es in halbfett umwandeln. Das Gleiche hier drüben. Dafür machen wir den Stil des Untertiteltextes, halb fett, und verschieben ihn einfach nach oben. Für diesen Italiener werden wir auch das Gleiche machen. Beschriftung Textil und wir werden halbmutige Publikationen machen. Gut. Ich denke, das sind alle Schriftarten, die wir haben. Also haben wir jetzt alles als neue SF Pro-Schriftart eingerichtet. Und während wir unser Design durchlaufen, werden wir in unseren Designs dieselben Schriftarten anwenden. 51. Bestellseite: Nun, da wir einige der wichtigsten Dinge für die Zusammenstellung unseres Projekts durchgegangen sind , einschließlich der Einrichtung eines Farbschemas, Organisation unserer Typensätze und des Hinzufügens zu unseren Charakterstilen. In XD denke ich, dass wir bereit sind , den Rest unserer Mockups zu entwerfen. Weiter, wir haben die Bestellseite als Nächstes, also werden wir in dieser Vorlesung daran arbeiten . Wenn er also unser Drahtgitter in unserem Drahtgitter für unsere Bestellseite hochzieht , haben wir ein paar Dinge, einschließlich der Artikel, die hinzugefügt wurden oder die Benutzer zu ihrer Bestellung hinzugefügt sowie einen kleinen Abschnitt, den wir einschließen können, um die Adresse anzuzeigen, an die er geliefert wird , falls sie Änderungen an ihrer Adresse vornehmen müssen . Dann haben wir die Artikel hier, in denen sie sie auch hinzufügen oder aus der Bestellung entfernen können , sowie einen kleinen Abschnitt hier unten, um zu erklären, was ihre Zwischensumme nach Steuern und alles ist, vielleicht Liefergebühren und alles, was mit einem kleinen Bestell-Button hier ist, damit sie ihre Bestellung abschließen können. Wenn wir also zu unserem XD zurückkehren, werden wir ein paar Dinge tun. Lassen Sie uns zunächst diesen großen Titeltext in das vollständige Quartal ändern . Lassen Sie uns diesen Titel hier loswerden . Für die Aktionsschaltfläche können wir hier zurück zum Menü gehen. Und mal sehen, was haben wir sonst noch hier? Wir wollen unser Standortsymbol. Was wir also tun werden, ist, dass wir dieses Plus-Symbol hier loswerden. Dann fügen wir unsere Bestellkarten hier hinzu oder Artikelkarten hier drin. Warum ziehen wir also nicht weiter. Ich sehe eine Kopie von diesen beiden. Lasst uns das tun. Wir wählen hier die Chicken Parmesan Instance aus. Also kopiere ich das, indem ich Command C drücke, gehe auf meine Bestellseite und füge diese dort ein. Dann lasst uns einfach einen der Desserts machen. Vielleicht sieht der Lavakuchen gut aus. Und füge das in die Bestellseite ein. Ich mache weiter und ordne das einfach neu an. Also bringe ich das an die Spitze. Wir wollen den Abstand hier ziemlich konsistent halten. Also wollte ich 25 Pixel von der Navigationsleiste aus machen. Und wieder verwende ich Alt, um zu sehen der Abstand zwischen dass der Abstand zwischen Objekten das Gleiche hält wie das, was wir hier haben, was ich glaube, dass es 15 ist. Wir haben 15 Pixel von jeder Bestellung. Wir werden die Gegenstände hier haben und dann werden wir unten auf dieser Seite ein kleines Rechteck zeichnen . Für dieses Rechteck wähle ich meinen zu färbenden Akzent aus. Das sieht gut aus. Wir erstellen hier ein kleines Textfeld und schreiben Zwischensummenausgang dort raus. Und wir werden das benutzen, lass uns einen Körper machen. Körper zwei würde gut aussehen. Dafür. Wir setzen die Füllung auf den Akzent drei Farben. Nun, ich mache weiter und dupliziere das und lege eine Kopie hier hin und richte sie auch richtig aus. Perfekt. Und wir werden einfach weitermachen und diese Zahlen addieren. Also 19,99 Dollar im Jahr 1999. Das sollte uns geben, wenn ich 2998 nicht irre, dann werden wir das noch einmal duplizieren. Beide von ihnen. Und wir werden Steuern zahlen. Ich werde weitermachen und tatsächlich die Linie verlassen . Das Licht nach links für die Steuer hier. Ich werde mir das einfach ausdenken. Put 499 dient dem Ausfüllen dieser Seite. Dann mache ich weiter und dupliziere das noch einmal. Bringen Sie es diesmal runter weil wir die Summe angeben wollen, die wir verwenden werden. Anstelle der Leiche zwei machen wir einen Header drei. Wir werden die Füllung erneut auf Akzent drei ändern . Und statt Tags auf der rechten Gesamtzahl, whoops. Dann sollten wir diese addieren 3497 geben. Eine Sache, die Sie hier tun könnten ist, dass Sie weitermachen und sich total gruppieren können. Diese Objekte sind Textzeilen zusammen mit Command G und dann kann er Stapel verwenden. Auf diese Weise. Zuerst können wir fortfahren und einen gleichen Abstand von sagen wir 20 Pixel festlegen . Auf diese Weise können wir dies einfach tun, wenn Sie sagen möchten , diese Gruppe duplizieren und eine andere Zeile erstellen , diese Gruppe duplizieren und eine andere Zeile erstellen möchten. Kann so viele Zeilen wie möglich erstellen, damit wir sogar Liefergebühren hinzufügen können. Sagen wir 299. Ich habe nicht weitergemacht und das aktualisiert. Wie wir wollen. Da sind wir los. Das stimmt. Dann vervollständigen wir diese Seite, indem einen oder den Lieferort oder die Adresse und eine Option zum Ändern sowie eine kleine Bestellschaltfläche ganz unten hinzufügen. Beginnen wir also mit der Schaltfläche „Bestellen“, da wir unsere Bibliothek bereits geöffnet haben und wir hier einen Button ziehen können . Platzieren Sie unseren Button hier. Lassen Sie mich einfach sicherstellen, dass wir einen konsistenten Abstand haben. Wir wollen also 35 Pixel von unten. Dann werden wir fortfahren und dies ändern , um bitte bestellen zu können. Da sind wir los. Und was ich dann will, ist eine andere Version dieses Buttons mit einer anderen Farbe, möglicherweise unserer Akzentfarbe. Was ich also im Sinn habe , ist, dass sie innerhalb dieses Buttons ihre Lieferadresse sehen können. Also mache ich hier eine kurze Pause und wir kommen in der nächsten Vorlesung wieder. Wir werden eine weitere Variante dieser Komponente für diese Schaltfläche mit einer anderen Farbe erstellen . Und sie verwenden diesen, um unseren Lieferort auch auf dieser Seite hinzuzufügen. Lasst uns das gemeinsam in der nächsten Vorlesung machen. 52. Component: In Ordnung, also wie versprochen, werden wir unsere Bestellseite und diese Vorlesung vervollständigen . Aber bevor wir das tun, werden wir weitermachen und lernen, wie ich es in den früheren Vorträgen versprochen habe, verschiedene Zustände von Komponenten zu erstellen verschiedene Zustände von Komponenten . Gehen wir weiter zu unserem Komponentenbereich unserer Entwürfe. Genau hier haben wir natürlich unseren Button , den wir erstellt und in eine Komponente verwandelt haben, damit wir ihn in unseren Designs problemlos wiederverwenden können . In dieser Vorlesung möchte ich eine leichte Version dieses Buttons erstellen eine leichte Version dieses Buttons und diese Akzentfarbe für meinen Button hier verwenden. Was wir also nicht wirklich erforscht haben , ist dieses kleine Plus-Symbol hier, wo wir hier tatsächlich verschiedene Zustände für unseren Button erstellen können . Wenn Sie auf Plus klicken, gibt es uns tatsächlich ein paar Optionen, wie z. B. neuer Zustand , wie wir möchten, dass unser Bundesstaat aufgerufen wird. Der allgemeine Hover-Status und der Umschaltstatus für Schaltflächen sowie bei diesem XD schlagen uns automatisch vor. Aber wir werden diese vorerst nicht erstellen. Wir werden einen neuen Staat machen. Wir werden diese State Lite-Version nennen. Dies wird die leichte Version unseres Buttons sein. Um diesen Status jetzt zu bearbeiten, müssen wir nur sicherstellen, dass wir ihn hier rechts ausgewählt haben . Wenn wir den Standardstatus auswählen, nehmen wir derzeit Änderungen an unserem Standardstatus vor. Aber wenn wir diese Light-Version auswählen, wird plötzlich meine Komponente bearbeitet, aber nur die Light-Version und nicht der Standardstatus. Unter dieser Light-Version können wir also auf unsere Schaltfläche doppelklicken, das Rechteck erneut auswählen und sicherstellen, dass Sie das Rechteck ausgewählt haben und nicht die gesamte Schaltflächenkomponente. Und dann geh weiter und klicke auf X und drei, damit unser Button-Hintergrund in drei Farben wirkt. Dann möchte ich für die Tastenfarbe selbst auch Akzente setzen. Da sind wir los. Jetzt haben wir eine leichte Version unseres Buttons erstellt, die diese Farbe hat. Und zu jedem Zeitpunkt können wir in den Standardzustand einkaufen und diesen Zustand beenden. Es ist kreativer und mehr Zustände wie der Hover- und Toggle-Status. Aber im Moment haben wir zwei verschiedene Versionen oder Zustände dieser Komponente erstellt , die diese andere Version nicht verwenden möchten. Wir können zu jedem unserer Tasten gehen und stattdessen auf die Light-Version umschalten. Und dann mach weiter und nimm diese Änderungen an diesem Button vor. Hier möchte ich jetzt meinen Button von hier drüben finden. Ziehe noch einen hier rüber auf meine Bestellseite. Aber anstelle des Standardstatus möchte ich, dass es die Light-Version ist. Eigentlich möchte ich beim zweiten Gedanken eine andere Version aus meiner Lebensversion erstellen , bei der der Text auf der linken Seite ausgerichtet ist. Warum wechseln wir nicht wieder nach hier. Gehe zu unserer Light-Version und von unserer Light-Version können wir eine andere Version oder einen anderen Zustand erstellen. Und wir werden diesen Light-Versionstext links nennen, wie diesen als ein. Jetzt werde ich in dieser Version fortfahren und meinen Text hier auf die linke Seite richten oder bringen. Aber 25 Pixel von der linken Seite. Während wir hier sind, wählen wir Text Links ausrichten aus, und gehen Sie dann fort und verlassen Sie ihn. Jetzt haben wir drei Versionen. Standardstatus, eine leichte Version und dann eine leichte Version bei der der Text auf der linken Seite ausgerichtet ist. So was. Perfekt. Wenn ich jetzt wieder hierher gehe, diese Instanz auf unserer Bestellseite, wollte ich Texte machen und dann eine Art fiktive Adresse eingeben , so etwas. Sie wissen also, wohin die Lieferung erfolgt und sie können auf diese Schaltfläche tippen, um ihre Adresse zu ändern, was uns zu der Standortseite führt , die wir in den zukünftigen Vorträgen entwerfen werden. Damit denke ich, dass das unsere Bestellseite vervollständigt. Kommen wir also in der nächsten Vorlesung zurück, um an unserer Auftragsfortschrittsseite zu arbeiten. 53. Order: In Ordnung, also an der Zeit unsere Bestellfortschrittsseite voranzukommen. Arbeiten Sie also nicht mit den Seiten, die wir zusammengestellt haben. Für meine Bestellfortschrittsseite. Ich wechsle schnell wieder zu unserem Drahtgitter. Sieh einfach, was wir in unseren Skizzen haben. Auf der Fortschrittsseite haben wir natürlich ein wenig Fortschrittstexte mit einer kleinen Skala die ab dem Zeitpunkt der Bestellung anzeigen Um zu liefern, äh, wo sie derzeit stehen. Ich denke vielleicht an einen kleinen Text, der den aktuellen Status der Bestellung und die kleine Markierung zeigt der den aktuellen Status der Bestellung und die , die wir mit einer Linie und einem Kreis erstellen können. Dann wollen wir hier unten nur einmal die Lieferadresse angeben noch einmal die Lieferadresse angeben und vielleicht sagen, dass wir zwei liefern. Und dann wollen wir ihnen die Möglichkeit geben, ihre Reihenfolge zu ändern , genannt das Restaurant Castle die Ordnung und so. Und ich denke, wir können diese in ein kleines Action-Blatt legen , das iOS uns gibt. Und das wird am Ende dieser Vorlesung als Übung gegeben . Aber bevor wir dort hineinspringen, lass uns weitermachen und die anderen Teile entwerfen. Außerdem gebe ich dieser Seite etwas mehr Leerzeichen als das, was ich hier skizziert habe, denn später möchte ich wiederkommen denn später möchte ich wiederkommen und wenn wir an Prototyping arbeiten, und vielleicht fügen wir eine coole kleine Animation hinzu hier drin um zu zeigen, dass die Reihenfolge vorbereitet wird oder so ähnlich. Ich habe es in anderen Delivery Apps gesehen und ich denke, es sieht cool aus. Also können wir hier eine kleine Animation machen, damit der Benutzer sehen kann, in welchem Namen seine Bestellungen angegeben sind. Beginnen wir zuerst mit der Navigationsleiste. Wir werden diesen kleinen Titel auch von hier entfernen, das Plus-Symbol, und dies in Quartalfortschritt ändern. Für diese Aktionsschaltfläche werden wir fortfahren und die Bestellung anzeigen ausführen. Was wir dann tun wollen, ist, dass wir auch den Hintergrund dieser Seite auf Akzent setzen. Also habe ich gerade die gesamte Zeichenfläche ausgewählt und dann habe ich den Unfall ausgewählt , um dem gesamten Hintergrund diese Farbe zu geben. Jetzt werden wir eine Linie verwenden eine gerade Linie zu erstellen hier eine gerade Linie zu erstellen und ihr einen Rand von fünf Pixeln um die Kappen zu geben. Und wir werden diese Rahmenfarbe in unsere Sekundärfarbe ändern , die diesen Hexadezimalcode hat. können wir nicht, denn das sind Linien und Linien haben einen Rahmen und diese Farbstile sind nur Füllungen. Wir können sie nicht benutzen, aber wir können fortfahren und dem Mauszeiger über sie zeigen und den Hex-Code nehmen und ihn stattdessen als unsere Rahmenfarbe verwenden. Wenn das nun ein Rechteck wäre und wir eine Füllung hätten, könnten wir unsere Farbkürzel hier verwenden. Und deshalb gebe ich es hier manuell ein. Aber auch hier können Sie Ihre Farbmuster auch zum Abkühlen verwenden. Und dann mache ich mit E eine kleine Ellipse über diese große. Ich werde nur mein Trackpad verwenden, um das hier für dieses hier zu zentrieren , weil es eine Füllung hat, wir können eine Primärfarbe machen, damit wir zeigen können, wo ihre Bestellung steht. Lassen Sie uns weitermachen und hier ein kleines Textfeld erstellen und schreiben Sie, dass Ihre Bestellung vom Restaurant vorbereitet wird. Du willst diesem Körper ein Medium geben und x und drei für die Farbe verwenden. Ersetzen Sie dies oben auf der Waage und unten. Wir werden das duplizieren und schreiben, bitte. Und noch ein Exemplar hier drüben. Richten Sie es richtig aus und richten Sie es hier und richten Sie es richtig aus oder tatsächlich getrocknet geliefert. Sie wissen also, wo sie stehen. Kopieren wir diesen Button oder diese Instanz dieser Schaltfläche in unsere Bestellfortschrittsseite. Ich lasse es so, wie es ist, und dann mache ich die T Heat und die richtige Reihenfolge, die geliefert wird, um dort raus zu gehen die T Heat und die richtige Reihenfolge geliefert wird, um und das einfach hierher zu bringen. Perfekt. Mal sehen, was wir sonst noch haben. Wir werden einen kleinen Button machen, damit sie ihre Bestellung von hier aus bearbeiten können. Wenn wir fortfahren und diesen Button auch hier hineinkopieren. Und anstatt eine Bestellung aufzugeben, ändern wir diese, um die Reihenfolge zu bearbeiten. Perfekt. Also lassen wir die Mitte hier noch einmal leer für eine kleine Animation wir später zusammenstellen werden. Aber im Moment werde ich dir ein bisschen Bewegung machen. Wenn Sie dieses Dokument immer noch geöffnet haben oder es in Ihrem XD haben, öffnen Sie es. Wenn nicht, können Sie von developer.apple.com Slash Design Slash-Ressourcen darauf zugreifen und dann die XD-Version herunterladen. Und dann öffne das in XD. Und sobald Sie es geöffnet haben, sollte es wieder so aussehen, wo wir die Navigationsleiste ziehen. Und damit gebe ich dir eine Übung, um die Statusleiste in alle deine Kunsttafeln zu ziehen . Oben möchte ich, dass Sie dies an die Spitze Ihrer Kunsttafeln platzieren , wo es zutrifft. Und lasst uns auch das Aktionsblatt suchen. Da sind wir los. Es befindet sich unter Ansichten, einer UI-Komponentenansichten. Das ist also ein Action-Cheat. Du kannst diesen völlig benutzen. Sobald sie darauf drücken, bestellen Sie hier in unserem Design, das auftauchen und ihnen die verschiedenen Optionen zeigen könnte , die sie haben. Was zu unseren Mockups zurückgeht, könnte das Bearbeiten der Bestellung selbst oder das Anrufen des Restaurants oder das Stornieren dieser Bestellung beinhalten . Als Übung möchte ich, dass Sie dieses Aktionsblatt verwenden, um diese Optionen in das Design dort zu überwachen . Sie können diese Zeichenfläche duplizieren und dann das Aktionsblatt platzieren oben. Oder Sie können das Aktionsblatt einfach separat gestalten oder das Aktionsblatt hier an die Seite unserer Kunsttafel bringen das Aktionsblatt hier an die Seite unserer und das dort drüben platzieren. Wenn ich nicht denke, dass die zweite Option einfacher ist , weil Sie diese ganze Seite nicht wirklich duplizieren müssen. Ich überlasse das als Übung setze die Statusleiste auf alle Kunsttafeln. Und dann in der nächsten Vorlesung werden wir wiederkommen und das gemeinsam machen. 54. Exercise: Ich hoffe, du hattest die Gelegenheit, einen Blick auf die beiden kleinen Übungen zu werfen, die ich dir gegeben habe. Wenn nicht, mach dir darüber keine Sorgen. Wir werden das gemeinsam in dieser Vorlesung machen, beginnend mit der Statusleiste in allen unseren Kunsttafeln. Und dann kommen Sie zurück und verwenden Sie ein Aktionsblatt, das ihm einige Optionen bietet, sobald der Benutzer auf Reihenfolge bearbeiten klickt . Wichtigste zuerst: Gehen wir zurück zu unserem Apple-UI-Kit. Weil wir größtenteils einen hellen Hintergrund in unseren Navigationsleisten haben. Wir werden hier die Statusleiste anstelle des dunklen Punktes hier verwenden . Also lasst uns weitermachen und einfach die Statusleiste von hier aus kopieren. Geh zurück, und ich werde es einfach mit unseren anderen Apple-Assets hier einfügen unseren anderen Apple-Assets , damit wir unsere Instanz hier haben. Dann werden wir weitermachen und das einfach auf unsere, alle unsere Seiten kopieren . Wir brauchen es nicht unbedingt in unserem Begrüßungsbildschirm, aber wir wollen es auf unserer Anmeldeseite. Lassen Sie uns weitermachen und klicken Sie auf Anmeldeseite. Füge das da rein ein. Mit Command V benutze ich einfach Shift und die Aufwärtspfeile ein paar Mal, bis es ganz oben ist. Perfekt. Wir werden zurückkommen und dem ein bisschen einen coolen Unschärfe-Effekt hinzufügen . Es ist eine Mauer. Wir sind auf unserer Login-Seite. Was ich mache, ist, dass ich die Statusleiste auswähle. Stellen Sie dieses Mal jedoch sicher, dass Sie hier nur die Statusleiste auswählen , in der diese Gruppe hier ohne die BG-Ebene hier drüben ist, was der Hintergrund ist. Stellen Sie also sicher, dass Sie nur die Statusleiste kopieren. Und dann fahren Sie fort und wählen Sie die Telefonüberprüfung aus, halten Sie die Umschalttaste gedrückt, wählen Sie das Hauptmenü aus, während Sie die Seiten Shift gedrückt halten, leicht Reihenfolge und bestellen Sie Fortschrittsseiten , um fortzufahren und auf Befehl V zu klicken halten Sie die Umschalttaste gedrückt, wählen Sie das Hauptmenü aus, während Sie die Seiten Shift gedrückt halten, leicht Reihenfolge und bestellen Sie Fortschrittsseiten, um fortzufahren und auf Befehl V zu klicken. fügen Sie unsere Statusleiste auf unsere Seiten ein, alles an der gleichen Stelle wie hier. Das einzige, was ich hier bei der ausländischen Verifizierung machen möchte , ist alles um 20 Pixel nach unten zu bringen oder zu verschieben. Es gibt genug Platz. Wir können sogar 30 machen. Ich denke, das sieht besser aus. Je mehr Leerzeichen Sie zwischen den Dingen haben, desto besser. Sie möchten Ihr Design nicht auf einen kleinen Bildschirm wie einen iPhone-Bildschirm stopfen . Also werden wir das Gleiche machen. Wir werden die Statusleiste kopieren. Wir werden das Gleiche machen. Machen Sie dies noch einmal, indem diese gesamte Statusleistengruppe auch auf unseren Profilzahlungsort oder die Verlaufsseiten kopieren auf unseren Profilzahlungsort . Jetzt haben alle unsere Frames diese Statusleiste in sich, wonach wir suchen. Jetzt sind wir bereit, zu unserem Aktionsblatt hier überzugehen. Und deshalb wechseln wir hierher zurück und gehen zu unserem Aktionsblatt, das hier drunter sein sollte. Da sind wir los. Ich kopiere das gesamte Aktionsblatt hier drüben. Stellen Sie sicher, dass Sie diese Gruppe auswählen. Kopieren Sie es hier in Ihr Design. Ich füge es hier in die Pasteboard an der Seite ein. Und dann werden wir den Titel bearbeiten , um die Reihenfolge zu bearbeiten. In dieser kleinen Beschreibung schreiben wir einfach Änderungsreihenfolge für diese erste Aktion. Wir werden die Reihenfolge bearbeiten. Für die zweite Aktion stornieren wir die Bestellung. Und für diesen dritten werden wir uns mit dem Restaurant in Verbindung setzen. Perfekt. Wenn sie jetzt auf diese Reihenfolge bearbeiten klicken, wird diese Warnung oder das Aktionsblatt geöffnet , über das wir uns gerade keine Sorgen machen müssen. Aber wenn wir Prototyping machen, werden Sie sehen, warum dies nützlich ist. Das ist die Übung. Wir machen hier eine kurze Pause, bevor wir wiederkommen und unsere Entwürfe fortsetzen. 55. Unzen hinzufügen: Alles klar, also haben wir bisher großartige Arbeit geleistet. Wir sind fast fertig mit unserem Mock-up hier. Wir haben noch ein paar Seiten zum Entwerfen. Und dann können wir in Bezug auf unsere mobilen Mockups loslegen. Wir fahren dann mit dem Export und Teilen mit unseren Kollegen und Teammitgliedern voran . Bevor wir nun mit dem Ausfüllen dieser Seiten fortfahren, wollte ich Ihnen einige der Effekte zeigen, die XD zu bieten hat und wie sie an Objekten und Bildern funktionieren und so weiter. Um das zu tun, die Anmeldeseite, möchte ich weitermachen und einfach hineinzoomen. Einfach da drauf. Wir haben hier natürlich diese kleine Statusleiste , die wir in den vorherigen Vorträgen zusammengestellt haben. Diese Statusleiste auf dieser Seite enthält den Hintergrund hier, was wir wollen, weil es dieses Bild hier gibt. Und wenn er diesen Hintergrund nicht hätte, würde es sich irgendwie stören oder diese Uhr hier drüben würde dieses Bild stören. Das wollen wir also nicht, und deshalb wollen wir diesen Hintergrund hier. Einer der coolen Effekte, die Sie auf einer Seite wie dieser oder einer Statusleiste wie diese anwenden können , besteht darin, eine sogenannte Hintergrundunschärfe anzuwenden. Xc hat zwei verschiedene Arten von Unschärfen, die es bietet. Einer von ihnen ist Hintergrundunschärfe, der andere ist Objektunschärfe. Und wir werden beide in dieser Vorlesung hier untersuchen . Die erste, die ich als Hintergrundunschärfe untersuchen wollte, was für die Statusleiste gilt. Also lasst uns fortfahren und die Statusleiste auswählen. Und anstatt das Ganze auszuwählen, doppelklicken wir, um hier nur die BG oder die Hintergrundebene auszuwählen . Stellen Sie sicher, dass Sie im Ebenenbedienfeld nur diese Hintergrundebene ausgewählt haben. Sobald Sie diese BG-Ebene ausgewählt haben, aktiviere ich die Hintergrundunschärfe. Wenn jetzt genau hier diese Objektperipherie ist, ändern Sie sie stattdessen in Hintergrundunschärfe, und aktivieren Sie sie dann. Es gibt drei Eigenschaften, die wir bearbeiten können. Der erste ist, wie stark oder unscharf ist. Je höher die Zahl, die wir hier festgelegt haben, desto mehr Unschärfe wird angewendet. Im Moment sehen wir nicht viel aufgrund der Tatsache, dass die Transparenz dieser Hintergrundebene bei 100% liegt , da wir sie weniger transparent machen. Sie werden sehen, dass die Unschärfe auf das angewendet wird es wird so aussehen. Um das zu tun, werde ich fortfahren und die Transparenz davon senken. Wenn du jetzt nach oben schaust, kannst du irgendwie die Unschärfe sehen. Im Moment hat mein Hintergrund nicht einmal mehr eine Farbe, es ist nur eine Unschärfe. Und wenn ich es erneut auswähle und die Unschärfe senke, kannst du sehen, dass es immer weniger verschwommen wird . Und wenn ich es höher schaffe, wird es immer verschwommener. Was das im Wesentlichen tut, ist, dass es diese Hintergrundebene nimmt und etwas darunter macht und allem darunter eine Unschärfe verleiht. Und das ist es, was die Hintergrundunschärfe bewirkt. Jetzt diese Option hier drüben, wenn ich es runterbringe und wir werden diese Hintergrundebene dunkler machen und umgekehrt. Wenn ich in die andere Richtung gehe, wird es weitergehen und es immer leichter machen. Aber es ist irgendwie das, was wir in diesem Fall wollen, damit wir genügend Kontrast erzeugen damit der Benutzer die Statusleiste sehen kann. Warum setzen wir das nicht auf 25 mit einer Hintergrundunschärfe selbst bei 15, denke ich würde gut aussehen. Wenn Sie es sich jetzt von dem etwas mehr vergrößerten ansehen, werden Sie sehen, dass das ziemlich gut aussieht. Bevor wir weitermachen, möchte ich Ihnen auch zeigen , wie Objektunschärfe funktioniert. Wenn ich also dieses Logo hier auswähle, wenn wir fortfahren und statt Hintergrundunschärfe vorgehen, wählen Sie Objektunschärfe aus und aktivieren Sie das genau hier. Was passieren wird, ist, dass XD voranschreitet und nur diese Ebene selbst verwischen wird . Darunter verschwimmen wir also nichts. Wir verwischen das Logo selbst. Natürlich kannst du damit einige coole Effekte erzeugen, wenn du wirklich magst. Als Beispiel könnten Sie so etwas tun, wo Sie vielleicht eine Art Hintergrund für das Logo erstellen eine Art Hintergrund für und es vielleicht ein bisschen größer machen. Und dann mach weiter und zum Beispiel dupliziert und diese, du kannst die Unschärfe entfernen und etwas kleiner machen. Ich kann wirklich kreativ werden und solche Sachen mit einer Objektunschärfe erstellen . Und du kannst sogar weitermachen und es weniger sichtbar machen. Es ist also nicht vollständig transparent. Etwas wie Dad könnte cool aussehen. Aber wieder, das liegt wirklich an dir und wie kreativ du mit deinen Unschärfen ankommen willst . Und ich mache einfach weiter und befehle Z einfach , das rückgängig zu machen. Ein paar Mal will ich das nicht wirklich. Sie wollen dir nur zeigen, welche Objektunschärfe zu bieten hat. Dieser Effekt, den wir für das Logo geschaffen haben , sieht irgendwie wie ein Schatten aus. Was wir also in der nächsten Vorlesung tun werden , ist zurückzukommen und lernen, wie wir tatsächlich Schatten für Objekte in XD erzeugen können . 56. Schatten hinzufügen: Ein weiterer wirklich nützlicher und praktischer Effekt , den Sie Ihren Designs hinzufügen können , um die Dinge wirklich zu polieren, heißt Schatten. Jetzt können Sie natürlich Schatten auf jedes gewünschte Objekt anwenden . Und der Zweck des Schattens ist Ihren Vordergrund, der die Hauptteile Ihrer Benutzeroberfläche ist, wie Schaltflächen, Text, Felder usw., wirklich vom Rest der Seite zu trennen der die Hauptteile Ihrer Benutzeroberfläche ist, wie Schaltflächen, Text, Felder usw., , vom Rest der Seite Hintergrund. Irgendwas anderes hinter diesen Gegenständen? Eine Sache, die Sie tun möchten, besonders wenn Sie ein Anfängerdesigner sind, ist, subtiler mit Schatten zu sein. Ich habe damals viele Designer bemerkt , um die Schatten ein bisschen zu stark zu machen. Der Zweck des Schattens besteht also nicht darin, einen wirklich starken Effekt auf das Objekt zu erzeugen . Tatsächlich versuchen wir, so subtil wie möglich zu sein , während wir sicherstellen, dass der Schatten seinen Zweck erfüllt und unser Design besser aussehen lässt. Und du wirst sehen, wie das in einer Sekunde aussieht. Ich mache weiter und wende als Beispiel hier einen Schatten auf meinen Button an. Da unser Button hier eine Instanz dieser Komponenten ist, können wir natürlich hier eine Instanz dieser Komponenten ist, zur Komponente gehen, indem wir einfach hier klicken und auf Hauptkomponenten bearbeiten klicken. Es bringt uns also nur zu Komponente , in der wir sie haben. Das ist also unsere MainComponent. Und das Schöne an Komponenten ist, dass wir ihnen Schatten hinzufügen können ihnen Schatten hinzufügen in unseren Designs angewendet werden. Als Beispiel füge ich dieser Schaltfläche Schatten hinzu, indem ich auf die Hintergrundebene oder diese Rechteckebene doppelklicke und auswähle . Wenn es um die Schatten geht, haben wir zwei Möglichkeiten. Wir können einen inneren Schatten machen, also wird dies ein Schatten innerhalb des Buttons sein. Dies wird normalerweise verwendet, wenn Sie versuchen , einen 3D-Tastentyp zu erstellen oder vielleicht einen Berührungszustand zu erstellen. Wenn ein Benutzer die Schaltfläche berührt, zeigt er diesen inneren Schatten , den wir normalerweise im Schatten sehen, mehr im Spieldesign als im UI-Design der App. Aber natürlich liegt das wirklich an dir als Designer. Aber auch hier könnte es tun, subtil damit zu gehen. Wir werden durchgehen, was die Schatten zu bieten haben. Shadow hat im Wesentlichen eine X- und Y-Position. Die Exposition ist also , wo dieser Schatten in Bezug auf dieses Rechteck fällt. Wenn wir dies ändern, sagen wir 20 oder Schatten bewegt sich 20 Pixel nach rechts. Und wenn wir das tun, sagen wir das Gleiche für das Y. Sie werden sehen, dass sich unser Schatten vollständig um 20 Pixel nach rechts und 20 Pixel nach unten bewegt . Und genau hier ist unser Schatten, ähnlich den Unschärfe-Effekten, ähnlich den Unschärfe-Effekten, wie verschwommen unser Schatten ist. Wenn wir dies auf 20 ändern oder Schatten mehr gemischt wird ein. Ja. Und wenn er das zu 0 gesagt hätte, wird es sehr hart und nur eine gerade Linie sein. Auch hier innere Schatten, nicht so sehr das, wonach wir suchen, aber wir suchen nach einem Schlagschatten , der typischerweise im UI-Design verwendet wird. Wenn also Schlagschatten aktiviert ist, wird er hier einen Schatten außerhalb dieses Rechtecks erzeugen , wonach wir suchen. Xd wird standardmäßig auf 0, x, drei Pixel für das y und sechs Pixel für die Unschärfe selbst festgelegt. Aber er kann mit diesen Zahlen herumspielen. Um zu sehen, wie das selbst aussehen würde, können Sie zu Ihren Entwürfen zurückkehren. Wir können jetzt irgendwie sehen , wie dieser Schatten aussehen wird. Ich denke, was ich gerne tun würde, ist, eine größere Unschärfe um diesen Schatten herum zu erzeugen und ihn vielleicht noch ein paar Pixel nach unten zu bringen. Um diese Effekte anzuwenden, doppelklicken wir darauf wählen das Rechteck aus, ändern dieses Weiß und vielleicht eine Sechs und ändern diese Unschärfe auf vielleicht bei 15. Lass uns das versuchen und sehen, was passiert. Das sieht ein bisschen besser aus. Geh wieder hier hoch. Eine Sache, die ich beachten möchte, ist, dass Sie tatsächlich die Farbe des Schattens ändern können Sie tatsächlich die Farbe des Schattens ändern , indem Sie hier auf dieses Farbauswahlsymbol klicken. Natürlich können Sie eine Farbe auf Ihre Schatten anwenden. Wir können einen roten Schatten machen oder wir können diesen grünen Schatten machen. Aber normalerweise würde man mit einem schwarzen Schatten gehen wollen . Das wird häufiger verwendet. Und du willst wieder gehen, sehr subtil damit. Du willst keinen starken Schatten in dem die OPCD viel zu hoch ist. Du willst etwas , bei dem die Deckkraft vielleicht zwischen fünf und liegt , ich sage vielleicht 20 bis 30%. Dies variiert jedoch natürlich mit dem, was Sie auf dem Rest Ihrer Seite vor sich haben. Ich verwende hier gerne 10% oder sogar Lipid niedriger, vielleicht 8%, weil ich möchte, dass es sehr subtil ist. Aber wie Sie sehen können, ist es immer noch ein Shows diesen Effekt. Es ist immer noch, Sie können die Wirkung dieses Schattens hier immer noch sehen. Wir können das Gleiche mit unserem TextField hier machen. So können wir die Textfelder im Hintergrund zu einem Schlagschatten auswählen und dieselben fünf Pixel, 15 Pixel machen und die Deckkraft auf 8% setzen. Wenn ich jetzt hierher gehe, wirst du sehen meine Felder jetzt auch einen Schatten haben. Aber wie Sie sehen können, ist es ein bisschen stark von mir gestohlen. Was ich also tun werde, ist, dass ich hierher zurückgehe, das auswähle und das ein wenig optimiere. Also möchte ich die Unschärfe tatsächlich ein wenig senken und die Deckkraft auf 4% ändern. Ich denke, das sieht ein bisschen besser aus, subtiler. Wir wollen nicht, dass es wirklich zu sehr von der Seite kommt. Wir wollen, dass es subtil ist. Und deshalb denke ich, dass das ziemlich gut aussieht. Einige andere Dinge, auf die wir in unserem Design Schatten anwenden können , gehören diese Karten hier. Normalerweise sehen wir, dass Kartendesigns oder Karten-UIs einen subtilen Schatten haben, der nur irgendwie vom Rest der Seite getrennt ist . Was ich tun werde, ist , dass ich das als Übung für dich überlasse . Fügen Sie unserer Karte hier und dem Gericht hier einen Schatten hinzu und stellen Sie sicher, dass dies eine Komponente ist , um sie auf die Hauptkomponente anzuwenden. Und nochmal, halte es subtil. Machen Sie einen Schlagschatten mit einer Deckkraft von 8%. Und Sie können den XY so lassen, wie es 03 ist, und dann können Sie eine Unschärfe von zehn Pixeln anwenden. Also überlasse ich dir das und dann machen wir es zusammen in der nächsten Vorlesung. 57. Shadow: Ich hoffe also, dass Sie diesen Schatten für unsere Karten hier anwenden konnten . Wir machen das zusammen in der nächsten Vorlesung, wenn du das nicht getan hast. Also überhaupt keine Sorgen. Die Effekte, die wir in Bezug auf diese Kartenschnittstelle hinzufügen möchten , sind hier drüben, dieser auf der Restaurantseite und die auf unserer Menüseite. Jetzt ist das Schöne an beiden, dass wir es nur auf dieses anwenden müssen, weil wir hier Wiederholungsraster verwenden . Und es wird für alle anderen harten UIs gelten. Und dann, da wir Instanzen einer Komponente verwenden, müssen wir uns nur sofort bewerben und sie den Rest unserer Entwürfe angewendet. Dies ist ein weiterer Grund, warum Komponenten und Wiederholungsraster so nützlich sind , weil es wirklich die Arbeit reduziert , das gleiche Muster zu wiederholen, immer wieder denselben Schatten zu beantworten und immer wieder zu beantworten und Schon wieder vorbei. Fangen wir mit der Restaurantseite an. Vergrößern Sie hier hinein und wählen Sie unsere Karte aus. Was Sie tun möchten, ist die Hintergrundebene erneut auszuwählen, und dann machen wir einen Schlagschatten. Behalte das x und y, wenn es nicht so ist. Wir klicken auf die Polizeistadt und senken sie auf 8%. Ich denke, es sieht subtil und sauber aus. Und dann machen wir zehn für die Unschärfe. Cool, ich denke, das sieht ziemlich gut aus. Jetzt kannst du natürlich herumspielen. Es gibt kein Richtiges oder Falsches in Bezug welche Zahlen Sie hier sitzen, solange es gut aussieht. Wenn Sie mehr Unschärfe hinzufügen möchten, können Sie das auf jeden Fall tun. Oder wenn du es sichtbarer machen willst, deinen Schatten, tut es das vollkommen, solange du es behältst. Ziemlich subtil. Gehen Sie also zu dieser Kartenschnittstelle, Gehen wir zurück zu unserer Komponentenseite und wenden Sie sie einfach hier an. Auf diese Weise ist es einfacher, diese Hintergrundebene auszuwählen. Und ich doppelklicke nur, um in diese Komponente zu dieser MainComponent zu gelangen , wähle hier meine Rechteckebene aus, die die gesamte Komponente abdeckt. Und dann machen wir einen Schlagschatten. Und das Gleiche. Zehn Pixel für die Unschärfe und 8% für meine Deckkraft. Ich sehe, das sieht auch ziemlich gut aus, ziemlich sauber, sehr nett. Jetzt können Sie sehen, dass wir diese subtilen Details hinzufügen die unser Design wirklich hervorheben und großartig und professionell aussehen. Dies ist sehr wichtig, wenn es darum geht, Mock-ups zusammenzustellen , die Kunden suchen. Wie Sie sehen können, fangen Sie wirklich unsere Designs zu polieren, beginnen jetzt wirklich gut auszusehen, wirklich wie das, was wir bisher gemacht haben. Wenn wir also in der nächsten Vorlesung wiederkommen und weiter an unserer Profil-Schrägstrich-Menüseite arbeiten. 58. Profilseite: Okay, also sind wir endlich bereit , mit unserem nächsten Design zu beginnen, das unsere Profilseite ist. für eine Profilseite nur unsere Wireframes hochziehe, Wenn ich für eine Profilseite nur unsere Wireframes hochziehe, die wir zusammengestellt haben, sehen wir, dass wir im Grunde einen einfachen Hintergrund haben wollen und dann im Wesentlichen ein Bild des Benutzers hier mit dem Vor- und Nachname, kleines X. Um das Fenster hier zu schließen oder das Menü oder das Profil zu schließen. Ein paar Schaltflächen, mit denen sie verschiedene Seiten durchgehen können. Von der Count-Seite bis zur Zahlungsauftragshistorie, Aktualisierung ihres Kleides und schließlich zur Gesetzesvorlage Yacc aus der App. Also wollen wir fortfahren und ein Profilbild zusammenstellen, ein kleines Textfeld hier, kleines Symbol für das Schließen hier, und dann werden wir die restlichen Schaltflächen hier platzieren. Und ich weiß, dass wir in meinem Drahtgitter hier keine Icons für diese Optionen auf der linken Seite gesetzt haben. Aber was ich tun möchte, ist weiterzumachen und ihnen tatsächlich einige Symbole hinzuzufügen , während wir diese Seite entwerfen. Gehen wir zurück zu XD und richten Sie das hier auf unserer Profilseite ein. Habe es bereits bereit, mit unserer ausgewählten Profilseite oder der Kunsttafel selbst zu gehen. Ich öffne unsere Bibliotheken und wähle dann die Axon-Farbe für den Hintergrund aus. Im Moment ist ein kleines Problem , das wir haben, dass unsere Statusleiste jetzt die dunkle Version ist. Und deshalb wollen wir die Light-Version wirklich als kleinen Tipp hier. Natürlich können wir zu unseren Apple-Dateien zurückkehren und diese weiße Version oder die Light-Version dieser Statusleiste abrufen diese weiße Version oder die . Aber es gibt eine einfache Möglichkeit , das zu umgehen. Und das ist, um hier unsere Statusleiste auszuwählen. Und ich wechsle einfach nach zwei Ebenen und stelle sicher, dass ich es ausgewählt habe. Und dann mach weiter und gib ihm einfach eine weiße Füllung , die hier dasselbe tun wird. Das sieht viel besser aus. Wir wollen ein kleines X Close Icon hier drüben lassen Sie uns das entwerfen, indem wir zwei Zeilen erstellen. Also werde ich einfach weitermachen und hier in diesen Bereich zoomen. Erstelle einfach zwei Zeilen. Ich werde sie 35 Pixel breit machen. Und ich werde die Randfarbe auf vier Pixel ändern und eine abgerundete Kappe und eine weiße Farbe machen . Ich werde das duplizieren , indem ich auf Befehl D klicke. Für einen von ihnen setzen wir einen Winkel von 45 Grad ein. Und für den anderen machen wir einen negativen Winkel von 45 Grad. Das wird weitergehen und eine Art von diesem x aussehenden Symbol für unseren Schließen-Button erstellen Art von diesem x aussehenden Symbol . Und ich wähle beide zusammen aus. Und vielleicht wollen wir das später woanders benutzen. Lassen Sie uns fortfahren und eine Komponente davon erstellen , indem Sie auf Command K klicken. Dann ist dies die Hauptkomponente und wir werden diese einfach ziehen, da es eine gemeine Komponente hier zu meinen Komponenten ist . Leg es vorerst hier hin. Dann gehe ich weiter und gehe zurück zu unserer Profilseite und von unseren Bibliotheken, lass uns diese hier rausziehen. Wir haben keinen Namen dafür. Lass uns weitermachen und es umbenennen. Schaltfläche „Schließen“. Nur damit es hier ein bisschen besser organisiert ist. werde ich ungefähr irgendwo hier drüben platzieren. Wir wollen nicht sein, wir wollen nicht , dass es viel zu nahe an der Spitze ist und wir wollen auch nicht zu niedrig sein. Das war's. Jetzt brauchen wir eine kleine Ellipse. Also machen wir E auf unserer Tastatur und ziehen eine kleine Ellipse hierher für unser Profilbild. Und dann drücken wir die T-Taste auf unserer Tastatur und erstellen hier ein kleines Textfeld, gleich zuerst und zuletzt hier drin. Im Moment werden wir, wir werden keine Beispieldaten angeben , die später zurückkommen, um das zu tun. Aber im Moment erstelle ich nur die Felder, die wir brauchen. Und ich erstelle diesen, lasse einen Abstand von 20 Pixeln. Ich denke, mein Profilsymbol ist etwas zu groß, also schrumpfe ich es einfach auf 80 Pixel in Breite und Höhe. Richten Sie das an der Mitte aus. Da sind wir los. Für meine Schrift hier gehe ich weiter und wähle aus. Gehen wir zurück zu unseren Typensets. Wählen wir den Header h3 aus. Header drei, sieht gut aus. Und ich ändere die Füllung in Weiß. Lasst uns weitermachen und erschaffen. Mal sehen, wie viele Knöpfe brauchen wir? 12345. Lassen Sie uns fortfahren und fünf Schaltflächen oder Inzidenzen erstellen, unsere Buttons hier drin und dann willkommen zurück In der nächsten Vorlesung. Um diese Seite zu vervollständigen. Wählen wir unseren Button aus , den wir hier haben. Lasst uns weitermachen und den Knopf finden, der hier ausgeführt wurde. Wir werden das auf unserer Seite zentrieren. Und ich werde weitermachen und diese tatsächlich so bringen, dass sie die gleichen Pixel von der linken Seite hier entsprechen . Und ich werde das ein paar Mal duplizieren und benutze die Umschalttaste und die Pfeiltasten nach unten, um sie zu Fall zu bringen. Also brauchen wir hier fünf Knöpfe, 12345. Und dann gehe ich weiter und wähle sie einfach alle aus und bringe sie ein bisschen runter. Ich gruppiere sie zusammen, damit ich Stacks verwenden kann. Lassen Sie uns also die Stapel aktivieren, damit wir den Abstand zwischen ihnen einfach einstellen können . Also möchte ich einen Abstand von einstellen, ich denke, 15 Pixel sahen gut aus. Und natürlich wollen wir, dass es vertikal und nicht horizontal ist. Machen wir das weiter und lassen es so wie es ist. Ich denke, das sieht vorerst gut aus. Dann kommen wir in der nächsten Vorlesung zurück , um diese Schaltflächen und Titel zuzuweisen und eine andere Version zu erstellen , die auch über ein Symbol verfügt. 59. Symbole hinzufügen: Es ist an der Zeit, unseren Buttons einige Symbole hinzuzufügen und dann eine Profilseite zu beenden. Ich persönlich liebe es, diese Website namens flat icon.com zu verwenden , ermöglicht Ihnen den Zugriff auf Millionen von Vektorsymbolen und Aufklebern , die Sie kostenlos verwenden können. Solange Sie den Autoren oder den Erstellern dieser Icons die richtige Zuordnung geben . Und es ist großartig, weil man nach Dingen suchen kann. Angenommen, Sie arbeiten an einem Profilsymbol. Sie können nach Profilen suchen und Sie werden von unzähligen Profilsymbolen und Vektoren usw. getroffen . Sie können es einfach herunterladen und in Ihrem Projekt verwenden. Ich habe bereits die Icons heruntergeladen , die wir für unsere Profilseite benötigen. Und ich habe sie für die Ressourcen dieser Vorlesung oder dieses Projekts in den Ordner Icons gelegt. Unter der Profilseite sollten diese fünf SVG-Symbole gefunden werden, die wir für unsere Profilseiten-Schaltflächen verwenden können . Aber zuerst: Lassen Sie uns eine neue Phase für unsere Buttons einrichten , damit wir diesen Status oder vier Symbole verwenden können. Auf diese Weise haben wir Schaltflächen , die Symbole ermöglichen. Also gehe ich weiter und gehe hier meine Komponente durch. Dann gehe ich weiter und wähle es aus und erstelle einen neuen Zustand. So was. Und wir werden diese One Lite-Version nennen weil wir es zu einer leichten Version von dieser Version machen und es Icon left nennen werden. In dieser Version wähle ich zuerst unseren Hintergrund aus, während ich den Befehl halte. Geht durch unsere Bibliothek und wählt diese Akzentfarbe für unseren Button aus. Und wir werden den Akzent zum Färben auswählen. Und ich bringe es vorerst irgendwo hier drüben ans linke Ohr. Dann ziehen wir eines dieser Icons. Lass uns einfach den eins hier rüben machen und ihn bringen, um ihn hier raus zu bringen. Dann fahre ich weiter und bewege das einfach. Bewegen Sie es in den Button hier. Wir werden fortfahren und sowohl das Rechteck als auch das Symbol auswählen . Richten Sie es vertikal an der Mitte aus. Und ich mache das Gleiche auch mit den Button-Texten, aber das sollte schon zentriert sein. Ich möchte also, dass dieser 15 Pixel von links entfernt ist. Und ich möchte, dass meine Button-Texte 15 Pixel vom Icon entfernt sind. Sieht gut aus. Jetzt für das Icon werden wir weitermachen und auch die Füllung auf diesen Akzent ändern . Da es sich um ein SVG-Symbol handelt, können wir die Farbe einfach ändern. Das ist bei PNG-Symbol nicht der Fall. Wenn Sie also Symbole verwenden, verwenden Sie aus diesem Grund am besten SVG. Eine letzte Sache, während wir hier sind, lasst uns weitermachen und sicherstellen, dass unser Text hier ebenfalls ausgerichtet ist. Und dann können wir zurückgehen und zurück zu unserer Profilseite gehen. Ich wähle jeden aus und wähle die Light-Version mit einem linken Symbol aus. Das Gleiche hier drüben. Bis alle von ihnen diese Version haben. Und ich werde den Button dieser Button-Texte hier ändern , um ein Konto zu erhalten. Wir werden dies in Zahlung ändern, gefolgt von Bestellhistorie, Adresse, gefolgt von nicht zuletzt Rechtsanwalt. Während wir diese Zahlungsschaltfläche ausgewählt haben, wähle ich hier das Kontosymbol aus. Während Sie das ausgewählt haben, wir weiter und ziehen Sie die Kreditkarte SVG und hier. Also jetzt trocknete dieser Gott in den Knopf selbst ein, was wir wollen. Und ich werde es direkt auf das Profilsymbol legen , was wir haben sollten. Löschen Sie dann das Profil oder das Kontosymbol. Schließlich werden wir fortfahren und ihm diesen Akzent der Farbe zuweisen . Da sind wir los. Jetzt für die Bestellhistorie, das Gleiche. Gehen Sie fort und wählen Sie das Kontosymbol aus und stellen Sie sicher, dass es im Ebenenbedienfeld ausgewählt ist. Und dann ziehe diesen Zeitpunkt SVG und hier, bewege ihn hinein. Ich bin sehr zufrieden mit der Größe des Symbols, also stellen Sie sicher, dass Sie eine ähnliche Größe für Ihre Icons haben. Dieser ist 22 mal 20 , um den anderen zu löschen. Und natürlich ausgewählt, gehe zu Farben, wähle x und zwei aus. Wir sind hier fast fertig, zwei weitere Knöpfe und los geht's. Also lasst uns fortfahren und hier das Kontosymbol auswählen. Gehe in unseren Ordner und ziehe den Stiftpunkt SVG. Zieh es rüber. Jetzt können Sie hineinzoomen, um es ein bisschen einfacher zu machen , Sachen herumzuziehen. Wir gehen zu diesem, wählen diesen aus und weisen ihm einen Unfall der Farbe zu. Und zu guter Letzt hat dir dein Kontosymbol hier gefallen. Ziehen Sie das Logout SVG. Was? Das hat, füge es als riesiges Icon ein. Lassen Sie uns die Proportionen hier sperren und die Breite auf 22 Pixel ändern. Und wir bringen es hierher. Das sieht gut aus. Ändern Sie nun die Strikes und gehen Sie zum Ebenenbedienfeld , erstellen und löschen. Ich werde nur sicherstellen, dass dieser zentriert ist , weil es gerade ein bisschen abseits aussieht. Ein bisschen denke ich, dass das ein Zentrum ist oder so wie möglich auf die Mitte ausgerichtet ist. Los geht's, das sind unsere Buttons für die Profilseite. Ich denke, es sieht gut aus. Wir können weitermachen und diese ein bisschen mehr runterbringen. Ich denke, irgendwo genau hier wird gut aussehen. Vielleicht kann ich tatsächlich beim zweiten Gedanken mehr Abstand hinzufügen, vielleicht 20 Pixel dazwischen machen. Ich denke, das ist ziemlich gut. Nun ist eine Sache zu beachten, dass wir alle außer Kraft gesetzt haben, weil wir Änderungen an diesen Schaltflächen vorgenommen haben und es Instanzen von Komponenten gab . Während sich die Icons selbst dazwischen nicht ändern, können wir immer noch Dinge ändern, wenn wir immer noch in unsere Zustände zurückkehren, um dieses Light-Versionssymbol übrig zu haben. Zum Beispiel können wir den Speicherort der Schaltfläche ändern. Und es wird sich auch in diesem Fall noch ändern. Wenn wir zu irgendeinem Zeitpunkt entscheiden, entscheiden wir uns, den Schaltflächenhintergrund hier zu ändern , damit wir hier immer wieder zu unserem Button zurückkehren und diese Änderung trotzdem vornehmen können immer wieder zu unserem Button zurückkehren , da wir die Farbe von jedem nicht außer Kraft gesetzt haben instanz. Es wird immer noch weitergehen und es hier auf meine Seite anwenden. Spielen Sie also gerne herum und verwenden Sie die Farbe, die Sie mögen. Ich glaube, ich mag diese Farbe hier drüben. Also bleibe ich bei dieser statt bei der Light-Version. Auf diese Weise kann ich weitermachen und sogar meine Texte hierher nehmen um diese leichte Version zu entfernen und einfach Icon links zu sagen. Das ist also meine Art von Standardschaltfläche mit einem Symbol übrig. Sieht gut aus. Wir kommen in der nächsten Vorlesung wieder und arbeiten an unserer Zahlungsseite. 60. Zahlungsseite: Es ist Zeit, an unserer Zahlungsseite zu arbeiten. Und ich werde einfach weitermachen und unsere Mockups zu oder den Wireframes aufrufen , um zu sehen, was wir haben. Was ich also für diese Seite im Sinn hatte, ist dem Benutzer zu ermöglichen, seine Zahlungsoptionen oder seine Premium-Karten zu sehen , hinzugefügt hat, mit der Möglichkeit zu wählen, welche die primäre ist, wie gezeigt mit diesem kleinen Häkchen hier drüben. Sie können zwischen den verschiedenen Zahlungsoptionen wählen oder sie können eine neue hinzufügen. Und wenn Sie sich als Übung an eine Aufgabe für Sie erinnern, möchte ich, dass Sie diese Zahlungsseite erstellen lassen, auf der der Benutzer die Kreditkarteninformationen in diese Seite eingibt. Und jetzt gebe ich Ihnen mehr Details darüber, was Sie für diesen Auftrag benötigen. Aber bevor wir dazu kommen, entwerfen wir diese Zahlungsseite gemeinsam. Was wir hier wollen, ist einfach ein Rechteck, das die letzten vier Ziffern dieser Karte zeigt . Und dann ein kleines Häkchen, um anzuzeigen, dass dies die ausgewählte primäre Karte ist. Wir brauchen hier ein Plus, Zurück-Symbol und eine Schaltfläche „Hinzufügen“ unten. Also lasst uns loslegen. Lasst uns XD öffnen. Wir haben unsere Zahlungsseite. Lassen Sie uns diesen Titel hier loswerden und unseren großen Titel in Zahlung ändern. Für den Zurück-Button hier schreiben wir einfach zurück. Wir haben hier schon ein Plus-Symbol, was großartig ist. Und jetzt werden wir hier ein Rechteck entwerfen. Und ich mache das mit einer Höhe von etwa 65 Pixel. Wenn Sie nicht genau 65 Pixel haben, können Sie jederzeit loslassen und den Befehl und die Pfeiltasten verwenden , um Ihr Rechteck entweder zu verkürzen oder größer zu machen. Ich kann dasselbe mit einer Pfeiltaste nach rechts machen , um es länger zu machen, oder mit der Pfeiltaste nach links, um es kürzer zu machen. Mit dem gesagt werden wir dieses Rechteck 29 Pixel von jeder Seite erstellen . Verwenden wir also noch einmal die Befehlspfeiltasten, um das zu bewegen , bis wir den gewünschten Teil haben . Es sieht gut aus. Also gehe ich weiter und rundum die Grenzen und setze den Radius der Grenzecke auf zehn. Ich gebe dem Hintergrund, dem Unfall eine Farbe. Und dann füge ich hier einen Text hinzu, indem ich die Alt und den achten Hier verwende. Ich generiere diese Punkte und Icons und tippe dann einfach 1234 ein. Und das repräsentiert irgendwie die letzten vier Ziffern der Karte. So wird es normalerweise in Apps angezeigt. So können wir weitermachen und auch unseren Text dort abgeben. Lassen Sie uns den Körper ein Medium machen und die Schriftfarbe auf das nächste ändern. Und drei. Ich mache weiter und lege das hier auf die rechte Seite und richte es so aus, wie es ist. Ich mache weiter und dupliziere diesen Text lege ihn auf die linke Seite. Und dafür werden wir weitermachen und es links ausrichten. Und wir schreiben einfach, was diese Karte ist. Wir machen ein Visum. Und statt eines kleinen Häkchens denke ich tatsächlich, dass wir weitermachen und einfach schreiben können , ob dies die primäre Karte hier ist. Warum verschieben wir das nicht nach oben, duplizieren diesen Text, bringen ihn herunter und verwenden die Beschriftung Textil hier oben. Wir werden die Farbe auf Axon drei ändern . Und hier schreiben wir Primär in allen Caps. So wie so. Ich werde diese einfach in die Mitte ausrichten und 25 Pixel von der linken Seite hier drüben haben . Ich denke, das sieht gut aus. Wir werden diese zusammen gruppieren , indem wir den Befehl hinüberziehen und auswählen G. Lassen Sie uns weitermachen und ihn einfach ein wenig nach oben bewegen . Dupliziere das. Bring es hier runter. Dafür werden wir diese Primärwaffe entfernen und das Visum abnehmen. Auf diese Weise weiß der Benutzer , welche Primärkarte sind. Und wenn sie diese Karte primär oder eine andere Karte primär machen möchten , können sie diese auswählen. Und auf der Detailseite des Bürgersteigs können sie das Primärnahrungsmittel so machen oder wir können sogar etwas tun, wo sie die Karte auswählen können und ein Aktionsblatt wie dieses auftauchen kann sie fragen, ob sie dies als Standardzahlungsmethode ersetzen möchten. Es gibt wirklich endlos. Vorher. Wir haben unsere Zahlungsseite hier irgendwie fertiggestellt. Wir brauchen nur einen Knopf ganz unten, damit sie eine neue Karte hinzufügen können. Also lasst uns weitermachen und den Knopf suchen. Ziehen Sie einen über die Mitte und richten Sie ihn mit 35 Pixeln von unten nach mit 35 Pixeln von unten unten aus und ändern Sie dies. Aber im Text, um Karte hinzuzufügen. Karte hinzugefügt, indem du auf diese klickst. Jetzt gebe ich Ihnen diese Aufgabe, die Zahlungsseite zusammenzustellen. Ich schlage vor, dass Sie sich ein paar verschiedene Beispiele oder Inspirationen ansehen ein paar verschiedene Beispiele oder , um diese Zahlungsseite zu erstellen. Eine, die wir hier von der Auslieferung auf Mobilgeräten geöffnet haben . Hier sehen Sie also, dass wir eine Kartennummer haben, und natürlich können Sie andere Felder wie den Namen des Karteninhabers, das Ablaufdatum, den CVE usw. hinzufügen den Namen des Karteninhabers, . Machen Sie also eine Pause hier, Google, ein paar Zahlungs-, mobile Zahlungsseite, um sich inspirieren zu lassen. Trotzdem überlasse ich diese Seite dir und wenn du mein Feedback willst und sende es an hallo clever auf gmail.com. Und ich gebe Ihnen auch Feedback und Sie können Ihr Projekt hochladen. Und ich würde gerne einen Blick darauf werfen, aber ja, zögern Sie nicht, hier eine Pause einzulegen, arbeiten Sie an dieser Seite. Sie können Ihre Kunsttafel hier drüben duplizieren und sie vielleicht woanders platzieren, vielleicht hier oben oder woanders. Sobald Sie damit fertig sind, gehen wir weiter zu unserer Standortseite. 61. Standortseite: Wir sind bereit, an unserer Standortseite zu arbeiten. Machen Sie weiter und öffnen Sie unsere Wireframes , um zu sehen, was wir hier haben. Natürlich haben wir hier oben die Suche nach der Adresse. Was wir hier tun können, ist, dass wir diese Navigationsleiste gegen eine dieser Suchleiste austauschen können . Und dann werden wir unsere Plug-Ins verwenden , um in den folgenden Vorträgen eine Map zu erstellen. Und dann brauchen wir einen Stift, um ihre Adresse auf der Karte selbst anzuzeigen , sowie ein kleines Rechteck um ihnen die genaue Adresse anzuzeigen, die sie eingegeben haben, sowie eine kleine Schaltfläche, die sie finden ihr aktueller Standort in der Karte. Ein kleiner, kleiner Spar-Button hier unten. Für die Map selbst werden wir Plugins und die folgenden Vorträge verwenden Plugins und die folgenden Vorträge um hier eine Map im Hintergrund zu generieren. Aber jetzt lassen Sie uns diese Elemente auf den Bildschirm legen . Und dann gehen wir von dort aus. Also zuerst, lasst uns diese Navigationsleiste austauschen, die wir haben. Vier. Das hier genau hier. Lassen Sie uns das löschen und stattdessen platzieren. Sie werden feststellen , dass wir diese Navigationsleiste in unserem Ebenenbedienfeld oben auf der Statusleiste platziert haben dass wir diese Navigationsleiste in . Es deckt derzeit die Statusleiste ab. Das können wir auch in unserem Ebenenbedienfeld sehen. Eine andere Möglichkeit, Ebenen neu anzuordnen , außer sie hierher zu ziehen. Sie können tatsächlich mit der rechten Maustaste klicken und auf Rückwärts senden klicken, was wir fortfahren und eine Ebene zurücksenden oder an rückwärts senden. Wir werden dieses Objekt bis zur untersten Ebene dieser Kunsttafel schicken . Dann kann er das Gegenteil tun, indem er die Dinge voranbringt und die Dinge an die Spitze bringt. Als Verknüpfung können Sie die offene Klammer Befehl ausführen, um Layer herunterzuschalten, oder den Befehl Klammer schließen, um Layer aufzurufen. Ich gehe weiter und benutze den Befehl open bracket, nimm diese Ebene ganz nach unten. Und dann ändern wir den Titel in Adresse. Da sind wir los. Mal sehen. Wir brauchen den Rücken nicht wirklich hier drüben. Lass uns weitermachen und das einfach loswerden und einfach diesen Aktionsknopf hier geändert, um fertig zu werden. Da sind wir los. Wir können ihre Adresse hier durchsuchen. Sie können auf Fertig klicken , wenn sie fertig sind. Und dann ziehen wir den Button für meine Bibliotheken mit 35 Pixeln für unten hier unten und ändern dann den Titel, um die Adresse zu speichern. Geht sehr los. Dann , finden Sie aus Ihren Ressourcen aus dem Ordner Icons den Speicherortordner in dem Sie ihn öffnen können, und diese beiden Symbole auf unseren Bildschirm ziehen können. Perfekt. Das hier. Wir werden es irgendwo hier unten platzieren und ihm einen großzügigen Abstand vom Knopf geben. Diese Schaltfläche soll dem Benutzer helfen , sich auf der Karte wiederzufinden. Und dann werden wir fortfahren und diesem Button oder dem Standortsymbol sekundäre Farbe geben . Versuchen wir es mit einem Unfall. Das Gleiche für diesen Stift hier drüben. Wir werden diesen verwenden, um dem Benutzer das Kleid zu zeigen , das er auf der Karte ansieht. Also werden wir einfach in die Mitte gehen und ihm auch die Acts und eine Farbe geben. Mal sehen, was wir sonst noch brauchen? Wir sind hier fast fertig. Wir brauchen nur unser Rechteck mit unserer Adresse hier drin. Warum machen wir also nicht weiter und erstellen ein Rechteck. Und ich werde einfach weitermachen und es irgendwie mit meinem Button dort unten ausrichten. Da sind wir los. Geh weiter und fahre da raus. Ich gebe dem einen Eckenradius von zehn Pixeln. Zusammen mit einer Füllung meines Unfalls ersetzt eine Farbe hier ganz in der Nähe des Pins. Und dann erstellen wir ein Textfeld. Und hierfür ziehen wir einen Text hierher, denn er könnte mehrzeilig sein. Also geben wir weiter und geben einfach eine zufällige gefälschte Adresse ein. Aber in einem vollen Format. Also machen wir Stadtpost. Das sollte gut sein. Ich werde das hier drüben nach links ausrichten. Und lasst uns dies als illustrierte Bildunterschrift festlegen. Nichts was zu klein ist. Also lasst uns einen Körper machen. Vielleicht würde Body One Medium noch funktionieren. Und dann für die Füllung, machen wir Unfall drei. Wir werden weitermachen und das hier einfach zentrieren und strecken es aus, falls es eine zweite Zeile gibt. Ich denke, das sieht vorerst gut aus. Warum kommen wir nicht in der nächsten Vorlesung zurück, um eine Karte mit Plugins für diese Seite zu erstellen . 62. Verwendung von Plugins: Es wurden kurz Plugins erwähnt und wie sie uns bei unseren Designs helfen und unseren Designprozess viel schneller gestalten können uns bei unseren Designs helfen und unseren Designprozess viel schneller gestalten . In dieser Vorlesung werden wir die Leistungsfähigkeit davon wirklich erkennen und verwenden die verfügbaren Plug-Ins, um hier eine Karte für unsere Standortseite zu erstellen . Um auf Plugins zuzugreifen, gehen Sie entweder in die Menüleiste hier oben und klicken Sie auf Plugins und greifen Sie darauf zu, nachdem Sie sie installiert, verwaltet oder durchsucht haben . Natürlich könnte dies unter einem Hamburgermenü stehen, wenn Sie unter Windows sind. Andernfalls können Sie auch hier auf sein Plugins-Panel zugreifen oder die Umschalttaste drücken . Und wir werden das Gleiche öffnen. Dann können Sie auf Plugins entdecken klicken, um die Plug-Ins zu entdecken, die auf dem Marktplatz verfügbar sind . Unmengen von Entwicklern zur Verfügung gestellt , die all diese Plugins zusammengestellt haben, mit denen Sie Symbole für Ihre Designs generieren und einfach auf eine Menge Plug-Ins zugreifen können, die für verschiedene Anwendungsfälle nützlich sind . Egal, ob Sie etwas automatisieren möchten oder Plugins zum Publizieren finden möchten, um Ihre Projekte abzuhängen. Es stehen Unmengen von Plug-Ins zur Verfügung, die Sie durchsuchen können. Durchstöbern Sie alle Plugins, die von hier aus verfügbar sind, und gehen Sie wirklich durch und sehen Sie, was jeder kann. Zum Beispiel dieses hier. Sie können damit Avatare für ein Profilsymbol generieren oder Plugins erhalten, indem Sie auf klicken. Geh hier rüber, sobald du es geöffnet hast, so. Wenn Sie es installiert haben, werden Sie möglicherweise nach Ihrem Passwort gefragt. Also mach weiter und gib das ein und es wird fortfahren und mit der Installation dieses Plugins beginnen. Sie können auf dieses Plugin zugreifen, indem Sie das Benutzerprofil dehnen. Ich bin hier oben unter „ Featured Plugins“. Und in dieser Suchleiste möchten wir das installieren, sobald wir es auf unserer Profilseite verwenden können . Aber jetzt suchen wir weiter nach Karten. Ich denke, ich möchte diese ausgefallene Karte ausprobieren und für uns noch schlimmer sehen, lass uns dieses ausgefallene Karten-Plug-In installieren. Und wenn Sie diesen nicht finden können, suchen Sie weiter nach ausgefallenen Karten und Sie können sogar den Namen des Autors durchsuchen und er sollte auftauchen. Es scheint, als hätte es auch anständige Bewertungen , was großartig ist. Sie können die Bewertungen für verschiedene Plugins sehen , die von Benutzern hinterlassen werden. Also das ist hier installiert. Jetzt können wir zurück zu unserem XD gehen. Wir geben hier Sachen ein. Und jetzt können Sie unter Plugins die Plugins sehen, die Plug-Ins , die wir nicht installiert haben. Lasst uns weitermachen und auf das ausgefallene Karten-Plugin klicken. Damit dieses Plugin funktioniert, müssen Sie nur ein Mapbox-Konto erstellen , das kostenlos ist. Und dann gibst du dein Zugriffstoken hier ein. Dieses Plug-In erfordert dies, um eine Map für Sie zu generieren. Sobald Sie das getan haben, wird diese Seite geladen. Füllen Sie dieses Formular aus , um sich für ein Konto anzumelden. Sobald Sie dies unter Ihrem Konto getan haben, sollten Sie in der Lage sein, Zugriffstoken zu finden , um dieses öffentliche Standard-Token zu kopieren , in dem Sie Karten erstellen können , die dieses Plugin verwenden. Sobald Sie das kopiert haben, fügen Sie es hier in XD ein. Und wenn Sie fertig sind, können Sie von hier aus verschiedene Städte durchsuchen , die Sie eingeben können. Sie können ein Überraschungsziel erstellen, aber jetzt wählen wir einfach New York aus. Dann wird es weitergehen und diese Karte für uns generieren. Es wird uns sagen, welche Zoomstufe wir wollen. Also wollen wir die Art von naher Zoomstufe irgendwo hier drüben. Vielleicht können wir sogar einen Generatormarker haben, aber das haben wir schon hier drüben. Und wir können einen Satellitentyp auswählen, verschiedene Kartentypen basierend auf dem, wonach wir suchen. Lassen Sie uns einfach mit einem Standardgerät hier drüben gehen. Und dann muss es ein Rechteck erstellen das die Karte gelangen kann. Also lasst uns weitermachen und hier von oben ein Rechteck erstellen . Nehmt es da raus und klickt dann auf Map anwenden. Da sind wir los. Also haben wir die Map generiert. Jetzt möchte ich Command Shift und die offene Klammer verwenden , um sie bis zur Rückseite der Ebenen zu senden . Perfekt. Wir brauchen nur ein paar letzte Berührungen und dann sollte diese Seite gut sein. Warum kommen wir nicht in der nächsten Vorlesung zurück, um diese Seite zu polieren und von dort aus zu gehen. 63. Vollen unsere Standort-Seite: Wir sind bereit, unsere Standortseite zu vervollständigen. Also müssen wir hier nur ein paar Schatten hinzufügen, um hier den Vordergrund vom Hintergrund zu trennen. Und wir sollten gut sein, zuerst die Dinge zu machen, ich gehe weiter und gehe einfach aus den Plugins raus und zoome hinein. Gehe hier zu unserem Ebenen-Panel. Da sind wir los. Ich fange mit diesem Stift an und doppelklicke einfach hinein damit ich hier beide Formen auswählen kann. Und während ich die Umschalttaste gedrückt halte, habe ich hier beide Linien oder Formen ausgewählt. Ich mache weiter und aktiviere Schlagschatten. Für den Schlagschatten machen wir eine Unschärfe von zehn und ein y von fünf. Und vielleicht mach es, es ist etwas dunkler. Also denke ich, dass so etwas wie 20% funktionieren sollte. Lassen Sie uns das Gleiche für den Hintergrund dieses Textfeldes anwenden . Machen Sie einen Schlagschatten mit y von fünf und einer Unschärfe von 10, 20% Deckkraft. Das sieht gut aus. Jetzt habe ich bemerkt, dass dieses Rechteck einen Rand hat, also werde ich das einfach entfernen . Wir brauchen es nicht wirklich. Dann lasst uns fortfahren und denselben Schatten auf dieses Cursor-Symbol hier anwenden . Also doppelklicke ich , um meinen Shape-aktivierten Schlagschatten mit fünf zu wählen , warum, zehn als Unschärfe und 20% als Deckkraft. Ich denke, das sieht gut aus. Es ist leicht getrennt von den Objekten hier sind jetzt leicht vom Hintergrund getrennt, was genau das ist, was wir wollen. Jetzt, da diese Seite abgeschlossen ist, sind wir bereit, zu unserer Bestellhistorie-Seite zu gelangen , die ich während der Wireframes diese Seite als Übung für Sie gegeben habe . Also mach weiter und arbeite an dieser Seite. Um Ihnen also eine Vorstellung davon zu geben, was Sie auf dieser Seite benötigen, möchten wir im Wesentlichen eine Liste der Bestellungen, die die Benutzer in der Vergangenheit aufgegeben haben. Was Sie also tun müssen, ist ein neues UI-Karten-Design zu entwickeln. In diesem Fall werden Sie einige der Bestellinformationen angeben. Sie können Dinge wie die Summe, das Restaurant, in dem sie bestellt haben, und vielleicht wie viele Artikel in dieser Reihenfolge enthalten Restaurant, in dem sie bestellt haben, waren. Und natürlich das Datum und die Uhrzeit, zu der sie diese Bestellung aufgegeben haben. Wenn Sie also diese vier Datensätze in eine Kartenschnittstelle wie diese hier einfügen, können Sie diese Kartenschnittstelle sogar duplizieren und eine Komponente daraus erstellen und diese auf Ihrer Bestellhistorie-Seite verwenden. Die Idee ist also, dass Benutzer ihre vorherigen Bestellungen von hier aus mit diesen vier wichtigen Datensätzen in dieser Kartenschnittstelle sehen können . Auch hier sind die vier Datensätze, die Sie möchten, der Name des Restaurants, der aus dem Gesamtbetrag des Dollars für ihre Bestellung bestellt wurde. Vielleicht, wie viele Artikel waren in ihrer Bestellung und welches Datum und welche Uhrzeit, die Bestellung aufgegeben hat. Also machen wir hier eine Pause und das lasse ich dich alleine machen. Und dann machen wir es in der nächsten Vorlesung auch zusammen. 64. Vorherige Bestell-Seite: Es ist an der Zeit, unsere Bestellhistorie-Seite zusammenzustellen. Ich hoffe, du hattest auch die Gelegenheit , etwas dafür zusammenzustellen. Wenn nicht, keine Sorgen, machen wir das gemeinsam in dieser Vorlesung. Und das sollte unser Modell für dieses mobile Designprojekt ziemlich abschließen . Und dann sind wir bereit, langsam mit Exportieren, Jubeln und Prototyping voranzukommen . Aber bevor wir das tun, arbeiten wir weiter und arbeiten wir an unserer Seite mit der Bestellhistorie. Und was ich tun möchte, ist diesen kleinen Titel hier drüben loszuwerden und den großen Titel in Geschichte zu ändern, oder wir können tatsächlich frühere Bestellungen ausführen. Ich denke, das klingt besser. Damit werde ich diese Bestellhistorie ändern , um auch die Bestellungen zu übergeben. Ich denke, das klingt einfach besser. Lassen Sie uns fortfahren und diese Aktionsschaltfläche auf zurück ändern. Wir können dieses Plus-Symbol entfernen oder eine neue Bestellung erstellen lassen, indem wir dieses Plus-Symbol drücken. Also denke ich, wir lassen das einfach da drin, falls sie wollen, sagen wir mal, eine neue Bestellung von dieser Seite aus zu beginnen. Jetzt kopiere ich eine der Restaurantkarten hier drüben. Ich werde damit eine neue Komponente erstellen und die vier Datenpunkte eingeben, über die wir in der vorherigen Vorlesung gesprochen haben. Stellen wir sicher, dass wir alle Ebenen hier in Ihrem Ebenenbedienfeld auswählen . Und dann lassen Sie uns einen kopieren und wir verwenden Command K, um dies in Komponenten umzuwandeln. Benennen wir das um, um den Warenkorb zu bestellen. Wir wissen, dass das die Karte für Bestellungen ist. Anstelle dieses Bildes hier möchte ich ein Rechteck darüber erstellen. Und lass es die gleiche Breite und Höhe nehmen die gleiche Breite und und dann durch Halten von Alt geben , gebe ich ihm den gleichen Eckenradius von, ich glaube, es waren 12 Pixel. Also lasst uns weitermachen und sicherstellen, dass dieser Punkt 12 Pixel beträgt und dieser hier. Perfekt. Lassen Sie uns den Rand entfernen und diese graue Farbe füllen. Sie können diesen Hexadezimalcode nur als Platzhalter für unsere Bilder eingeben . Damit können wir diese Bildebene hier loswerden . Jetzt haben wir einen Platzhalter für unser Restaurantbild. Das ist nicht unbedingt auf der Bestellhistorie-Seite, Sie könnten das vollständig von dort entfernen. Aber ich denke, es ist schön für sie zu sehen, in welchem Restaurant sie das Essen bestellt haben . Das ist also wirklich dein Anruf. Will das dort lassen, wo es ist, den Restaurantnamen. Wir doppelklicken einfach auf die Ratinggruppe und entfernen sie von hier und ändern dieses Dollarzeichen in die Gesamtbeträge. Also werden wir 1 Dollar machen. Statt dieses Italieners wollte ich eingeben, wie viele Artikel sie bestellt haben. Also schreibe ich nur als Beispiel einen Gegenstand. Schließlich benötigen wir das Datum und die Uhrzeit, zu der sie diese Bestellung aufgegeben haben. Warum bewegen wir diese beiden nicht hierher, stellen sicher, dass sie ausgerichtet sind, und duplizieren sie dann weiter. Und wir werden sicherstellen, dass der Abstand gleich ist, 14 Pixel und dieser wird richtig ausgerichtet sein und wir schreiben den Monat, den Tag, den Monat und das Jahr. Dann ist die Zeit hier, nur als Platzhalter, damit der Benutzer sehen kann, wann er diese Bestellung aufgegeben hat. Ich denke, es sieht ziemlich gut aus. Wir haben immer noch Platz, wenn Sie hier jemand anderen hinzufügen möchten, einen weiteren Datenpunkt, aber ich denke das ist im Moment ziemlich gut. Für das Restaurant-Image denke ich, dass wir es etwas kleiner machen können, da es hier nicht wirklich so wichtig ist. Und dann können wir fortfahren und diese Gegenstände nach oben bewegen. Ich halte nur Shift fest. Da sind wir los. Lassen Sie uns auch das gesamte Rechteck hier verkleinern. Das sieht gut aus, ziemlich sauber. Wir können dies jetzt auf unserer Bestellhistorie-Seite verwenden. Gehen wir zurück zu unserer Bestellhistorie-Seite. Klicken Sie auf Bestellhistorie. Und dann lasst uns von hier aus in unsere Bibliotheken gehen und feststellen , dass es so aussieht, als hätte ich keine Komponenten richtig benannt. Also lasst uns weitermachen und diese Bestellkarte benennen. Da sind wir los. Jetzt in unserer Bestellhistorie ziehe ich diesen Bestellwagen hier rein. Perfekt. Dann können wir weitermachen und einfach das Wiederholungsraster hier verwenden , um dies ein paar Mal zu wiederholen. Und ich werde diesen Abstand zwischen 0 entfernen, weil ich denke, dass der Abstand das schon ziemlich gut ist. Ich denke, wir können hier oben sogar einen neuen Button hinzufügen. Und dafür beginnen wir ein neues Quartal. Da sind wir los. Wenn sie eine neue Bestellung beginnen wollen, können sie das auch von hier aus tun. Wenn Sie nun dieses Wiederholungsraster verwenden um neue Karten zu erstellen, kollidiert diese Schaltfläche mit der Ansicht. Also werde ich hier einen kleinen Farbverlaufshintergrund erstellen , um alle Karten auszublenden. Und das können wir tun, indem wir hier ganz unten auf dem Bildschirm ein Rechteck erstellen. Das deckt den Knopf bis hier ab. Und wir werden diese eine Ebene nach unten nehmen , damit der Knopf oben drauf ist. Wir werden zuerst den Rahmen entfernen und die Füllung ändern, anstatt eine einfarbige Farbe einen linearen Farbverlauf zu sein. Für diese Farbe hier drüben, den unteren Knoten, setzen wir sie auf Weiß. Für den anderen Knoten setzen wir ihn auf. Wir lassen es an Gewicht und wir bringen die OPCD ganz auf 0. Ich werde weitermachen und das einfach ein bisschen höher versuchen . Ich denke , das ist ziemlich gut. Wie Sie sehen können, wird hinter diesem Button jede auftreffende Karte ausgeblendet, was wir wollen. Wir wollen nicht, dass dieser Button mit dieser Karte kollidiert. Und deshalb denke ich, dass das ziemlich gut aussieht. Und jetzt für unsere Daten, Kommen wir in der nächsten Vorlesung oder zwei Eingaben zurück, einige Beispieldaten hier drin. Eine Sache, die ich tun werde, ist, dass ich hier zur Karte zurückgehe und diese durch einen generischen Restaurantnamen ersetze. Wir machen einfach Restaurantnamen , weil es eine Komponente ist. Wir wollen nicht wirklich einen bestimmten Restaurantnamen da drin. Und deshalb denke ich, dass das gut aussieht. Jetzt werden wir in der nächsten Vorlesung wiederkommen, um hier einige Beispieldaten einzugeben. 65. Beispieldaten mit Google Sheets hinzufügen: Es ist an der Zeit, einige Daten in unsere vergangene Bestellseite einzugeben. Sie können jede Karte mit einigen Beispielausführungsdaten ausfüllen und einigen Beispielausführungsdaten einige zufällige Bilder für verschiedene Restaurants hinzufügen. Aber in dieser Vorlesung möchte ich Ihnen etwas wirklich Cooles zeigen , das sie mit den Plugins machen können, die ECC bietet. Und wir werden ein bestimmtes Plugin namens Google Sheets verwenden , dem Sie tatsächlich Daten aus einem Google-Blatt in Ihr Design eingeben können. Und Sie werden sehen, wie cool und wie nützlich das sein könnte, um einige Beispieldaten in Ihre Projekte einzugeben. Hier drüben habe ich ein Blatt mit fünf Restaurants und Datensätzen zusammengestellt , darunter den Tag, die Gesamtpreisartikel und sogar das Restaurantbild und den Namen hier drüben. Wir werden dieses Blatt verwenden, um einige Beispieldaten in unser Design einzugeben. Und um dieses Blatt zu verwenden, werden Sie fortfahren und ich werde diesen Link hier kopieren, auch unter den Ressourcen dieses Projekts zur Verfügung gestellt wird . Wenn Sie unter Stichprobendaten gehen, sollten Sie in der Lage sein, einen Bestellverlauf zu finden, Google Sheets Link, dxdy. Wenn Sie das öffnen, können Sie diesen Link kopieren. Wir sollten diese Tabellenkalkulation für Sie öffnen. Und das werden wir verwenden, um die in die Stichprobe einbezogenen Daten zu generieren. Also lasst uns weitermachen und das einfach minimieren und zurück zu XD gehen. Damit dieses Plugin funktioniert, müssen wir, bevor wir es installieren, eine kleine Änderung vornehmen, müssen wir tatsächlich weitermachen und unsere Komponente wieder in eine Gruppe umwandeln stattdessen, dass dieses Plugin tatsächlich funktioniert und Repeat Grid verwendet. Also zuerst habe ich fünf Stichprobendaten drin. Und hier drüben haben wir nur drei mit einem vierten hinter diesem Bildschirm hier drüben. Was ich also tun werde, ist, dass ich diese Seite einfach ein wenig hochbringe und sie ausstrecke. Und dann lasst uns weitermachen und diese mit dem Farbverlauf und der Schaltfläche bis zum Ende der Seite auf die Rechteckebene bringen. Und dann werden wir das Wiederholungsraster verwenden , um sicherzustellen, dass wir hier fünf Gegenstände haben. 12345, Perfekt. Das sollte vorerst gut sein. Perfekt. Also und dann wollen wir zu unserer Komponente für diese Bestellkarte gehen , die direkt hier drüben ist. Und was wir tun werden, ist, dass wir rechten Maustaste klicken und mit der rechten Maustaste klicken und die Gruppierungskomponente aufheben, die wir im Wesentlichen im Wesentlichen umgekehrt machen, um dieselben Komponenten herzustellen. Das ist also keine Komponente mehr. Und was wir tun werden, ist, dass wir das hineinziehen hier hineinziehen, anstatt den , den wir hier haben. Also lasst uns das hier löschen. Und stattdessen ziehen wir das weiter . Aber zuerst werden wir weitermachen und das zusammen gruppieren und das hier eingeben. Gehen Sie einfach weiter und behalten Sie den Abstand 25 Pixel von oben und stellen Sie sicher, dass wir auch in der Mitte sind. Perfekt. Und jetzt verwenden wir Repeat Grid und machen das noch einmal. Aber dieses Mal werde ich einfach weitermachen und sicherstellen, dass wir Ihren Speicherplatz auch hier auf 0 minimieren. Perfekt. Jetzt können wir dieses Plug-In tatsächlich verwenden. Und um es zu installieren, öffnen wir Plugins. Hier unten. Du wirst fortfahren und auf das Pluszeichen klicken. Und wir werden nach Google Sheets suchen. Drücken Sie Enter. Und der erste hier, der undurchlässig ist, sollte derjenige sein, den wir verwenden werden, um über ein Jahr auf die Schaltfläche „Abrufen“ zu klicken, um es zu installieren. Ich habe es bereits installiert, also überspringe ich diesen Schritt. Eine weitere Sache, die ich tun möchte , ist zu doppelklicken, um dieses Rechteck auszuwählen und diese Ebene in unser Bildrestaurant umzubenennen. Bitte halte sie fest, damit wir wissen, wofür das da ist. Jetzt bereit, diese Beispieldaten einzugeben. Wählen wir also hier die gesamte Gruppe „Raster wiederholen“ aus. Ich weiß nicht, wo es Plug-Ins aus dem Plugins-Panel sind. Lassen Sie uns weitermachen und auf das Google Sheets-Bedienfeld klicken. Und dann werden wir hier nach einer Dateiquelle gefragt , damit Sie entweder eine CSV-Datei hochladen oder sich bei Google Sheets anmelden können , was wir tun werden URL-Link einfügen, weil wir mit einer öffentlichen Datei arbeiten es gibt. Also mach weiter und kopiere den Link, der in den Ressourcen für die gesampelten Daten dieser Seite verfügbar ist der in den Ressourcen für die gesampelten Daten , sieht so aus, als ob etwas mit meinen Wiederholungsrastern nicht stimmte. Also bin ich einfach zurückgegangen und habe es diesen Teil noch einmal gelesen. Wenn du etwas siehst , das da draußen ist, nimm dir eine Sekunde Zeit, um das auch für dich selbst zu reparieren. Aber aus irgendeinem Grund benutzte mein Wiederholungsraster denselben Wagen wie das hier drin, was wir nicht wollen. Wir wollen diese Karte für die vergangenen Bestellungen. Stellen Sie also sicher , dass die Raster ordnungsgemäß funktionieren, und klicken Sie dann darauf. Und unter den Plug-Ins wollten Sie erneut den URL-Link einfügen und auf Importieren klicken. Dies kann eine Sekunde dauern, da das Plugin alle diese Felder importiert. Was wir tun wollen, ist, dass wir jeden Datensatz dem richtigen Feld oder dem richtigen rechten Winkel zuordnen werden. Das erste Rechteck ist also 17. Wir brauchen da drin nichts als Hintergrund für den Restaurantnamen. Wir werden es dem Restaurantnamen in den Google Sheets für die 0 Dollar zuordnen , wir möchten das dem Gesamtpreis zuordnen. Es zeigt also den Gesamtpreis für den einen Artikel an , der hier drüben ist. Wir werden das unseren Gegenständen zuordnen. Und dieses Datumsfeld hier drüben. Wir werden es auf das Datum zuordnen. Und zu guter Letzt für den Platzhalter des Image-Restaurants , der hier drüben ist, als wir ihn umbenannt haben. Wir werden fortfahren und auf das Restaurantbild klicken. Wir müssen nicht wirklich randomisierte Inhalte auswählen, sonst würde er in eine zufällige Reihenfolge gebracht werden. Wir behalten die gleiche Reihenfolge bei und klicken einfach auf Übernehmen und stellen sicher, dass Sie Ihr gesamtes Wiederholungsraster ausgewählt haben , während Sie dies tun. Das Plugin funktioniert also richtig. Es kann einige Zeit dauern, aber Wallah, es wird weitergehen und die Daten so eingeben, wie wir es erwarten würden. Und ich denke, das sieht gut aus. Viel schneller als die manuelle Eingabe von Daten. Und wie Sie sehen können, funktionierten die Bild-URLs auch ziemlich gut. Ich gehe weiter und wähle einfach meine Ebenen hier und bringe sie mit dem Befehl und den Klammern auf. Und mach es einfach diese Seite ein bisschen kleiner. In Bezug auf die Höhe. Wir brauchen es nicht wirklich, um so lang zu sein. Stellen Sie einfach sicher, dass mein Putin 35 Pixel von unten hat und das tut es. Perfekt. Jetzt haben wir auch unsere Bestellhistorie-Seite einsatzbereit. Ich werde nur ein paar Sachen neu organisieren , indem ich diese Kunsttafeln ein wenig hierher verschiebe . Da sind wir los. Ich schließe diese Etiketten ein, dieses Aktionsblatt hier, nur um unsere Entwürfe zu organisieren. Und da haben wir es. So geben Sie Beispieldaten mit Google Sheets ein. Und damit unsere Entwürfe ziemlich einsatzbereit. Wir kommen in der nächsten Vorlesung zurück und schauen uns alles noch einmal an und machen eine letzte Nachbesserung von kleinen Details, die wir vielleicht vergessen haben. Und dann werden wir von dort aus fortfahren zu exportieren dieses Projekt zu exportieren und es mit unseren Teammitgliedern, Kollegen oder Kunden zu teilen und so weiter. Kommen wir in der nächsten Vorlesung zurück, um dieses Modell zu polieren und abzuschließen. 66. Polieren von Designs: Am Ende jedes Projekts werfe ich gerne einen Blick auf das gesamte Projekt, organisierte Dinge, wenn sie fehl am Platz sind, oder polnische jede Seite ein wenig nach oben , von wo ich sehe, dass es Verbesserungen geben könnte. Und nur ist diese gute Praxis, aber es ermöglicht Ihnen auch, das Auge für Details für Ihre Entwürfe zu bekommen . Wir werden das durchgehen und sehen , wo wir einige kleine Verbesserungen vornehmen können. Diese Vorlesung zusammen. In Bezug auf die Organisation denke ich, dass wir ziemlich gute Arbeit geleistet haben. Alles ist irgendwie da, wo wir es haben wollen, nur um die Dinge zu organisieren. Ich werde diese Apple-Assets neben meinen Komponenten hier auf die rechte Seite bringen . Nur um die irgendwie zusammenzuhalten. Unser Farbschema, Typensets, alles sieht gut aus. Hier sind Komponenten, die alle hier organisiert sind. Wir haben hier ein zusätzliches Logo, also werden wir das löschen. Jetzt. Wir arbeiten uns vom Begrüßungsbildschirm nach rechts. Und dann gehen wir oben auch ganz nach rechts auf die Profilseite. Beginnend mit dem Begrüßungsbildschirm denke ich, dass die Dinge hier gut aussehen. Anmeldeseite sieht gut aus. Stellen wir einfach sicher, dass der Abstand oder alles korrekt ist und es sieht so aus, als wären die Dinge ziemlich gut. Ich werde einfach weitermachen und mein Passwort vergessen ein wenig ablegen, vielleicht 15 Pixel vom Feld und bringe diesen Button auch ein wenig herunter. Und mach es 30 Pixel aus dem vergessenen Passwort. Hier drüben. Wir werden nur fortfahren und die Datenschutzrichtlinie auf halb fett setzen , sowie unsere Nutzungsbedingungen. Da sind wir los. Unsere Telefonbestätigung sieht ziemlich gut aus. Bring das einfach runter. Alles ist richtig ausgerichtet. Wir können weitermachen und das auch noch einmal überprüfen. Überprüfen Sie hier die Ausrichtung von allem noch einmal. Eine Sache, die ich tun wollte, ist, dass ich diesen Menü-Button kopiere und diesen Menü-Button kopiere und sie auch in meine anderen Navigationsleisten platziere. Von hier aus kann man auch auf das Menü zugreifen. Die Rede sieht gut aus für mich. In Bezug auf unsere Menüseite möchte ich nur die Dinge ein bisschen mehr ausräumen. Also werden wir weitermachen und die Dinge auch rausholen. 25 Pixel Hier drüben. Ich gehe weiter und wähle einfach den gesamten Stapel hier und ändere diesen Abstand von hier auf 25. Das Gleiche für meinen Wüstenstapel. Mache 25 statt 15. Der Grund dafür ist, dass wir mehr Platz zum Atmen wollen. Wir wollen mehr Leerzeichen. Wir wollen nicht, dass die Dinge hier viel zu vollgestopft sind. Lassen Sie uns die Menüseite ein bisschen mehr ausdehnen , damit sie gut zu allem passt. Lassen Sie uns fortfahren und die Anzahl der Bestellungen für diesen Artikel in eins ändern . Und das Gleiche hier drüben. Wir haben das in der vorherigen Vorlesung vergessen, also machen wir es einfach hier und überprüfen den Abstand von allem. Und das Gleiche hier drüben. Ich mache weiter und bring das ein bisschen runter. Es sind also 25 Pixel im Abstand. Das sieht ziemlich gut aus für mich. Oder die Bestellfortschrittsseite sieht auch gut aus. Vielleicht bringe ich diese einfach ein bisschen mehr runter, ein bisschen mehr verteilt. Und alles andere sieht gut aus. Wir kommen später wieder und fügen hier eine kleine Animation hinzu. Lass uns gut aussehen. Und ganz oben hier drüben, anstatt das erste und letzte Jahr zu haben, geben wir einfach einen zufälligen Namen ein. Also werden wir einfach zuerst gehen, es ausrichten, richtig. John Doe. Für das Profilsymbol hier. Ich werde das Plugin verwenden, das er zuvor auf dem aufgerufenen Benutzerprofil installiert hat . Wenn Sie es nicht haben Ticket pausieren hier, um dieses Plug-In zu installieren, aber das ermöglicht es uns, hier ein zufälliges Foto einzufügen , und wir können das Geschlecht sogar isolieren. Jetzt können wir hier die Ellipse auswählen und auf Zufallsfoto einfügen klicken. Wenn dir das Foto nicht gefällt, kannst du ganz weitermachen und weiter drücken, bis du vier hast. Du benutzt es gerne. Das Plugin hier wird so viele Fotos generieren, wie Sie möchten. Ich lasse es genau so. Und dann sieht der R-Button hier gut aus. Alles andere sieht auf dieser Seite gut aus , ist eine Zahlungsseite, die gut aussieht. Oder die Adressseite sieht auch gut aus. Und unsere vergangene Bestellseite sieht auch gut aus. Oder sieht hier drüben gut aus. Und ich denke, das ist ziemlich gut für unser Projekt hier. Es ist ziemlich poliert und ziemlich nett. Ich glaube nicht, dass wir an dieser Stelle noch etwas hinzufügen müssen. Jetzt werden wir in der nächsten Vorlesung wiederkommen um über eine reaktionsschnelle Größenänderung zu sprechen, die es Ihrem Design ermöglicht verschiedene Gerätegrößen zu reagieren. Das machen wir zusammen und dann den nächsten Vortrag. 67. Responsive Größe: Während wir uns darauf vorbereiten, unser Projekt und unser Prototyping zu exportieren. Ich möchte Ihnen auch eine weitere coole Funktion zeigen , die Adobe XD hat. Dies ist sehr nützlich, wenn es darum geht, mit mehreren Bildschirmgrößen und Gerätegrößen zu arbeiten, insbesondere wenn Sie an einem Webprojekt arbeiten. Aber was das, was diese Funktion als responsive Größenänderung bezeichnet, ermöglicht es Ihren Designs, auf mehreren Bildschirmgrößen zu arbeiten , anstatt nur auf der hier drüben. Im Moment haben wir diese iPhone-Displaygröße hier für unsere Kunstwerke eingerichtet , und sie sind in Bezug auf die Breite alle gleich. Als Beispiel empfehlen wir besonders, wenn unsere Geräte etwas größer laufen, sehen Sie gerade, dass unsere Designs, eine bestimmte Art von Auseinanderfallen, nicht den gesamten Abschnitt wirklich ausgefüllt haben. Wenn Sie also anfangen, die Breite unserer Geräte basierend auf dem Gerät zu dehnen , das Sie sich ansehen. Dieser Entwurf ist am. Das Design beginnt möglicherweise nicht zu funktionieren. Aus diesem Grund hat Adobe diese Funktion namens Responsive Resize zusammengestellt . Und was mir an XD sehr gut gefallen hat , ist, dass es einen Großteil der Arbeit für Sie erledigt , indem Sie den automatischen Responsive Größenänderungsmodus verwenden. Mit der reaktionsschnellen Größenänderung können Sie also zulassen, dass Ihre Elemente im Bildschirm, wie der Name schon sagt, die Größe basierend auf der Anzeigegröße ändern können wie der Name schon sagt, die Größe . Als Beispiel schalten wir auf seiner Profilmenüseite die reaktionsschnelle Größenänderung ein. Und was dann passieren wird, ist, dass jetzt unsere Objekte in dieser Kunsttafel die Größe ändern, indem wir meine Bildschirmgröße verkleinern oder erweitern. Und wie Sie sehen können, macht der Auto-Modus ziemlich gute Arbeit. Es gibt bestimmte Dinge, die verbessert werden könnten , aber insgesamt ist es ziemlich gut gemacht, wie es mit der Reaktion der Größenänderung umgeht. Aber wenn es um bestimmte Elemente wie diesen Namen hier und den Text in diesen Schaltflächen geht. Wir können diese so reparieren , dass es tatsächlich einwandfrei funktioniert. Der Weg dazu besteht darin, tatsächlich auf ein bestimmtes Element in dieser Kunsttafel zu klicken . Und dann fügen wir hier, wie wir sehen können, für jedes Element eine automatische Option hinzu, wie wir sehen können, für jedes Element eine automatische Option hinzu, um die Größe einer manuellen Option zu ändern, oder wir können fortfahren und das komplett ausschalten. Standardmäßig sind jedoch alle reaktionsschnellen Größen für jedes Objekt in Ihrer Kunsttafel aktiviert und im automatischen Modus . Wenn Sie jedoch auf diese manuelle Option klicken, erhalten Sie plötzlich hier einige bestimmte Optionen für Ihr Objekt für Ihr Objekt, um die Größe und manuell nach Ihren Wünschen geändert zu werden . Und wenn wir diese Optionen hier verwenden, können wir dieses Objekt als Bildschirm an bestimmten Websites fixieren . Wenn wir diese Option hier machen, wenn sie blau wird, bedeutet dies, dass dieses Objekt jetzt links fixiert wird. Und natürlich können wir mehrere Fixes miteinander kombinieren , z. B. links und oben. Was nun passieren wird, ist, dass diese Textbox, unabhängig von der Breite und Höhe dieser Zeichenfläche, dieses bestimmte Pixel immer von der linken Seite an diesem bestimmten Pixel beibehält von der linken Seite an von der Spitze des Designs. diese Optionen aktiviert sind. Wenn wir nun weitermachen und erweitern oder entwerfen, werden Sie sehen, dass sich das Textfeld nicht bewegt, da es diesen Abstand von links und oben beibehält. Wenn Sie das Design verkleinern, wie Sie sehen können, wird das Textfeld jetzt nicht mehr nach oben verschoben. Wir werden weitermachen und beibehalten, wo es in Bezug auf den Abstand von oben ist. Aber wenn Sie das jetzt deaktivieren und einfach links reparieren. Wie Sie sehen können, beginnt sich das Textfeld unabhängig von ihrem Abstand von oben zu bewegen. Zum Beispiel für diesen Button hier. Auch hier werden die meisten Dinge manuell von XD erledigt, sodass Sie nicht viele Optimierungen vornehmen müssen . Aber wir können fortfahren und manuelle Responsive-Größenänderungen für bestimmte Stellen anwenden . Und wenn Sie Elemente zusammenhalten möchten, setzen sich diese Schaltflächen hier drüben an. Wenn Sie etwas zusammenfassen, wird es weitergehen und diesen Abstand oder den Anteil zwischen diesen Schaltflächen beibehalten . Wenn wir in diesem Fall zum Beispiel Größe des Kunstbretts verkleinern, die Gruppe unberührt und sie wird den Abstand zwischen ihnen nicht durcheinander bringen. Was würde passieren, wenn wir zum Beispiel dieses Bild auswählen, eine manuelle Größenänderung vornehmen und tatsächlich die feste Breite und eine feste Höhe ausschalten . Was wird dann passieren? Nun, nun, Sie werden feststellen, dass das Bild, wenn das Kunstbrett schrumpft oder erweitert, das Kunstbrett schrumpft oder erweitert, weitergeht und tatsächlich in Bezug auf die Größe des Geräts skaliert wird . Während wir weitermachen und das rückgängig machen und tatsächlich weitermachen und seine Breite und Höhe fixieren. Egal wie sehr wir dieses Kunstbrett ausdehnen, die Größe dieses Bildes ändert sich nicht. Das ist die feste Breite und eine feste Höhe zwei. So können wir auch fortfahren und reaktionsschnelle Größenänderung und mehrere Kunsttafeln aktivieren und sehen, wie das Training in einigen Kunsttafeln fast einwandfrei ist und Sie überhaupt keine Änderungen vornehmen müssen . Während Sie in anderen Kunsttafeln möglicherweise einige Optimierungen vornehmen müssen, z. B. diese hier für die Adresse. Wir können diese beiden zusammenfassen. Dann Satz der manuellen Antwort, Satz der manuellen Größenänderung und Fixierung der Breite. Aber dann wird ein Problem sein , dass es jetzt auf der linken Seite ausgerichtet ist, weil es immer auf der linken Seite behoben wird , denn wie Sie sehen können, haben wir die feste Linke. Also werden wir das ausschalten, damit es Display über das Display zentriert wird, was wir wollen. Das sieht jetzt viel besser aus. Als Übung können Sie das Design komplett durchgehen. Fahren Sie fort und aktivieren Sie reaktionsschnelle Größenänderung auf jeder gewünschten Zeichenfläche. Und mach weiter und spiele damit herum , bis es richtig aussieht. Sie erhalten unsichere Seiten in bestimmten Designs, die Sie möglicherweise benötigen um Optimierungen vorzunehmen und zu ändern, , um Optimierungen vorzunehmen und zu ändern, während es bei anderen genauso funktioniert, wie Sie es erwarten würden. Zum Beispiel könnten wir auf einem iPad-Display total sehen dass so etwas für die vergangene Bestellseite gut aussehen würde . Das ist also einer der Gründe, warum die reaktionsschnelle Größenänderung so mächtig ist. Nehmen Sie sich diese Zeit, um anzuhalten und mehr von den Zeichenflächen zu erforschen und zu versuchen, responsive anzuwenden und die Größe zu ändern, bis die Dinge gut aussehen. Sie keine Angst, reinzuspringen und bestimmte Änderungen an Ihren Objekten vorzunehmen. Als Beispiel auf dieser Menüseite sehen Sie hier, wie die Dinge mit diesen Texten auseinander fallen. Natürlich möchten Sie eine feste Linke manuell auf alle diese Textfelder anwenden . Als Übung verlasse ich diese Seite auf dieser Menüseite, damit Sie dies tun können. Und denken Sie daran, dass Sie die reaktionsschnelle Größe der gegnerischen Komponente selbst anwenden können . Sie können also hier reingehen und die reaktionsschnelle Größenänderung jedes Elements in Ihrer Komponente ändern. Und das wird genau wie alles andere mit Komponenten auf alle Ihre Instanzen dieser Komponente angewendet . Machen Sie als Übung hier eine Pause, wenden Sie hier eine reaktionsschnelle Größenänderung auf die Menüseite und die Wagen an. Dann machen wir das gemeinsam in der nächsten Vorlesung. 68. Reaktionsfreudige Größenordnung: Okay, ich hoffe, Sie konnten diese reaktionsschnelle Größenänderung für die Menüseite anwenden . Und das werden wir gemeinsam in diesem Vortrag machen. Wenn Sie fortfahren und diese reaktionsschnelle Größenänderung für das Kunstbrett aktivieren diese reaktionsschnelle Größenänderung für , was ich bereits getan habe. Erweitern Sie dieses Design und wir können sehen, welche Elemente repariert werden müssen. Und insbesondere sind es diese Texte hier drüben. Was wir also tun möchten, ist sicherzustellen, dass diese Texte auf der linken Seite dieser Karte bleiben und die Größe nicht mit der Bildschirmgröße ändern. Während ich das tue, müssen wir zur Hauptkomponente dieser Karten gehen . Wir können fortfahren und MainComponent bearbeiten, und das führt uns zu der Komponente selbst, die standardmäßig erklärt wird, Ihre Komponenten werden eine reaktionsschnelle Größenänderung haben. Aber wenn Sie möchten, können Sie, genau wie jede andere Kunsttafel oder jedes andere Kunstbrett in unseren Kunsttafeln, jede andere Kunsttafel oder jedes andere Kunstbrett in unseren Kunsttafeln, auf Objekte in einer Komponente klicken und ihre reaktionsschnelle Anpassung anpassen und die Größe selbst ändern. Nun, was wir tun wollen, ist, dass wir dieses Element oben und links fixieren möchten , damit die Komponente sich dehnt und ihr Pixel, so viele Pixel, 145 Pixel, 145 Pixel, behält so viele Pixel, 145 Pixel, 145 Pixel, von der linken Seite deiner Kartenansicht aus. Wir wollen das Gleiche mit dieser Beschreibung hier machen. Wie Sie standardmäßig sehen können, war es ein fester Zinssatz , der nicht stimmt. Und dann werden wir diese beiden auswählen indem wir die Schicht so gut wie möglich halten. Machen Sie weiter und stellen Sie den gleichen für beide ein, der links und unten fixiert ist. Dafür ist es bereits korrekt sowohl auf fixe oben als auch unten sowie auf den festen Zinssatz eingestellt sowohl auf fixe oben als auch unten sowie , was wir hier drin sind, wir könnten hier zwei weitere Dinge für diese Elemente tun, wir können gehen voraus und entferne die feste Breite. Jetzt können wir wieder auf unserer Menüseite weitermachen und erweitern oder schrumpfen. Dieses Design wird funktionieren, schlief fast ein, aber ich werde weitermachen und die Breite hier auf meine ursprüngliche Breite zurücksetzen , 390 und lasse es so. Das ist unsere Übung für die reaktionsschnelle Größenänderung. Und das schließt den Designteil unserer mobilen App ziemlich ab. Also werden wir in einer folgenden Vorlesung wiederkommen um zu erfahren, wie wir unsere Entwürfe exportieren und mit Teammitgliedern in XD geteilt werden können . 69. Export auswählen: Also haben wir hier großartige Arbeit geleistet , unser mobiles Modell zu entwerfen. Die Dinge sehen wirklich gut aus und ich bin ziemlich zufrieden damit, wie es geworden ist. Das ist der Teil, in dem wir gefragt haben: Okay, also was kommt als Nächstes? Was können wir von hier aus tun? Was sind die Möglichkeiten unsere Vermögenswerte hier, unsere Kunsttafeln, zu exportieren oder mit anderen Menschen zu teilen und daraus Prototypen zu erstellen. Nun, das werden wir gemeinsam in den folgenden Vorträgen untersuchen . Beginnend mit dem Export von Gegenständen sowie Kunsttafeln aus unserem XD. Xd bietet Ihnen die Möglichkeit , einzelne Elemente oder Elemente aus Ihren Entwürfen exportieren sowie eine Reihe von Artikeln zu exportieren und gleichzeitig ganze Kunsttafeln zu exportieren. Also werden wir diese drei eins nach dem anderen durchgehen. Der erste ist ein ausgewählter Export, dem Sie ein einzelnes Objekt oder vielleicht eine Gruppe aus Ihren Entwürfen exportieren können. Also nur als Beispiel, wenn ich hineinzoome und ein bestimmtes Objekt exportieren möchte , ist es das Logo oder sagen wir mal dieses Bild hier, damit Entwickler es in ihrer Entwicklung verwenden können arbeite. Das können wir einzeln exportieren. Als Beispiel Exportieren wir eine dieser Menükarten früher aus XD in unsere Dateien. Sie können fortfahren und auswählen, was Sie exportieren möchten. Und ich erinnere mich, was immer Sie exportieren, genau das Ding wird exportiert. Wenn ich also die gesamte Gruppe hier auswähle, werden alle diese in einer Datei exportiert. Aber wenn Sie eine bestimmte Sache exportieren möchten, ob es sich hier nur um einen Text oder die gesamte Artikelkartenansicht handelt, was wir wollen. Dann mach weiter und vergewissere dich, dass du das ausgewählt hast, was du willst, weil nur dieser Layer ausgenutzt wird. Um dies hier heraus zu exportieren, können wir entweder zu Datei gehen, exportieren und auswählen oder als Verknüpfung auf Befehl E oder Control E unter Windows drücken. Und XD fragt nun, wo die Datei exportiert werden soll. Und wenn Sie so etwas und einen Mac sehen, können Sie auf diesen kleinen Pfeil klicken damit Sie genau auswählen können, wo Sie ihn speichern möchten , und Sie können ihn auch umbenennen, wenn Sie möchten. Sobald Sie fertig sind, können Sie fortfahren und auf Exportieren nach klicken. Nehmen Sie sich hier eine Sekunde Zeit, je nachdem, was Sie exportieren. Wenn Sie jedoch diesen Speicherort oder den Ordner öffnen, in dem sich Ihr Element befindet, können Sie den Ehemann der Kartenansicht wie Sie sehen , wie Sie sehen würden. Eine Sache, die ich beachten möchte, ist, dass XD genau in dieser Auflösung exportieren wird genau in dieser Auflösung da dieser Akkord ursprünglich die Größe hatte. Wenn ich das Bild strecke, verliert es die Qualität. Eine Sache, die Sie tun könnten, ist, wenn Sie exportieren, können Sie die Größe Ihres Exports so anpassen , dass er eine höhere Auflösung hat. Wenn ich jetzt ein a3x mache und mach weiter und speichere das Gleiche. Aber ich werde es bei a3x im Namen machen. Was dann passieren wird, ist, dass XD den gleichen Gegenstand exportiert, aber jetzt dreimal so hoch wie die Auflösung dessen, was Sie hier sehen. Wenn Sie sich nun die ursprüngliche Artikelkartenansicht und die Artikelkartenansicht bei a3x ansehen, ist dies eine viel höhere Auflösung. In der Regel möchten Sie also etwas Hochauflösendes mit Entwicklern teilen etwas Hochauflösendes mit , damit sie es nicht in dieser Größe betrachten müssen . natürlich daran, dass Ihre Dateigröße auch größer ist, wenn Sie eine höhere Auflösung festlegen. Es gibt auch andere Optionen, mit denen Sie für Web, iOS und Android exportieren können . So exportieren Sie einzelne Elemente hier raus, Sie können das Gleiche tun. Nehmen wir an, Sie exportieren ein einzelnes Objekt oder Element oder eine Gruppe aus XD. Denken Sie daran , dass Sie das wieder mit allem machen können. Wenn ich also nur als Beispiel auswähle, diese gesamte Textgruppe hier und ich exportiere sie einfach. Sie werden sehen, dass XD diese Textebenen einfach mit der gleichen Schriftart exportiert, die gleiche Farbe wie ein PNG hier, und es gibt hier keinen Hintergrund, da meine Texte hier nicht wirklich IT-Hintergrund haben. So exportieren Sie also einzelne Elemente aus XD. Wir werden in der folgenden Vorlesung wiederkommen und erfahren, wie wir mehrere Objekte gleichzeitig mithilfe des Batch-Exports exportieren können . 70. Batch: Nun, da wir wissen, wie wir einzelne Elemente aus XD exportieren können , was ist, wenn Sie mehrere Elemente für den Export aus XD auswählen möchten ? Jetzt können Sie natürlich ein bestimmtes Element auswählen, sagen wir diese Schaltfläche hier und ein bestimmtes Element auswählen halten Sie dann die Umschalttaste gedrückt und wählen Sie ein anderes Element aus. Und dann mach weiter und exportiere diese zusammen. Das wird auch erwartungsgemäß funktionieren. Aber die andere Option hier, die es viel einfacher macht, insbesondere wenn Sie diesen Vorgang immer wieder durchführen wird Batch-Export genannt. Der Batch-Export ermöglicht es Ihnen , mehrere Dinge zusammen zu exportieren , indem Sie bestimmte Objekte für den Export markieren. Wenn wir unsere Entwürfe durchgehen, nehmen wir an, dass wir ein bestimmtes Objekt exportieren möchten, dieses Bild, das heißt, Sie können fortfahren und auf dieses kleine, für den Export markierte für den Export im Eigenschaftenbedienfeld klicken . -Objekt. Jetzt wieder das Gleiche wie ein einziger Export. Vergewissern Sie sich, dass Sie das richtige Element ausgewählt haben. Wir können das für den Export markieren und dann weitermachen und etwas anderes auswählen, das für den Export markiert ist. Und während wir durch unsere Entwürfe wachsen, können wir mehrere Dinge auswählen. Nehmen wir an, wir möchten diesen Menü-Button hier exportieren. Wir können dieses Hamburger-Menüsymbol erneut auswählen , um sicherzustellen, dass Sie dieses Ding ausgewählt haben , und dann markieren Sie für den Export usw. Sobald Sie mehrere Objekte ausgewählt haben, können Sie einfach fortfahren und entweder Umschalttaste Befehl E drücken, oder Sie können fortfahren und Datei, Export und Batch-Export auswählen . Batch-Export. Du bekommst die gleichen Optionen. Wir werden Sie bitten, PNG als Format auszuwählen, oder Sie können sie tatsächlich in SVG, PDF oder JPEG ändern . Jetzt verwende ich normalerweise gerne SVG, damit unser Symbol hier drüben die Größe geändert werden kann, ohne seine Qualität zu beeinträchtigen. Und ich erstelle hier einfach einen anderen Ordner namens Batch-Export-Elemente, damit ich genau weiß, wo ich ihn speichere , und klicke dann auf Exportieren. Und wie erwartet wurden diese Artikel jetzt als SVG exportiert. Und deshalb sehen sie in der Vorschau auf dem Mac so aus. Aber genau wie erwartet, wichtig dies zurück in XD und ein funktioniert einwandfrei. Die Qualität wird hier nicht basierend auf der Größe oder der Größenanpassung abgeschlachtet. So können Sie mehrere Objekte gleichzeitig mit XD exportieren . Denken Sie daran, da wir diese Elemente als Markierung für den Export ausgewählt haben, waren sie nicht wirklich nicht ausgewählt. Da wir also weiterhin Artikel zu unserem Chargenexport hinzufügen, werden diese Artikel immer wieder exportiert. Dies könnte also gut für etwas sein , das Sie an einem Export verschiedener Versionen vornehmen und es an Ihre Teammitglieder oder Kollegen senden möchten, um Feedback zu erhalten. Wenn Sie dies jedoch rückgängig machen möchten , können Sie einfach Markierung für den Export aufheben. Und jetzt werden nur die für den Export ausgewählten Dinge aus Ihrem XD exportiert. Und so verwenden Sie den Batch-Export in XD. Was ist, wenn Sie die gesamte Zeichenfläche hierher exportieren möchten? Nun, wir werden in der nächsten Vorlesung wiederkommen und das gemeinsam untersuchen. 71. Exportieren von unseren Kunstwerken: Jetzt wissen wir, wie man einzelne Artikel aus XD exportiert und mehrere Artikel im Batch-Export exportiert. Aber was ist, wenn Sie unsere gesamten Art-Board-Designs tatsächlich für jemand anderen teilen möchten. Exportieren von Zeichenflächen ist so einfach wie das Exportieren von Objekten. Alles, was Sie tun müssen, ist einfach die Zeichenfläche auszuwählen, die Sie exportieren möchten. Und natürlich können Sie die Umschalttaste gedrückt halten und mehrere Kunsttafeln auswählen. Und fahren Sie fort und klicken Sie auf Befehl E, um es als PNG zu speichern, wodurch ein Ordner namens Zeichenflächen erstellt wird. Hier können Sie fortfahren und auf Exportieren klicken. Und jetzt exportiert XD Ihre Kunsttafeln in diesen Ordner. Ich habe die a3x-Auflösung gewählt und deshalb ist sie so hochwertig. So exportieren Sie mehrere oder wenn Sie einzelne Kunsttafeln wünschen , und Sie können es einfach an unserem Board machen. Was ist, wenn Sie alle Kunsttafeln in unsere Entwürfe exportieren möchten? Nun, XD macht es Ihnen leicht , denn Sie können einfach zum Dateiexport gehen und hier alle Kunsttafeln erstellen. Indem Sie alle Kunsttafeln exportieren. Weil wir diese drei Kunsttafeln bereits dort haben. Xd wird uns fragen, Wollen Sie diese ersetzen? Bist du sicher, dass es diese überschreiben wird? Aber wir werden fortfahren und klicken auf Ersetzen. Jetzt ist XD weitergegangen und exportiert alle Kunsttafeln hier in den Ordner , den wir ausgewählt haben, was perfekt ist, sieht gut aus. Und diese Zeichenflächen können mit niemandem geteilt werden. Sie können sie an Ihre Entwickler oder Kollegen oder Kunden oder an wen auch immer dieses Projekt, an dem Sie arbeiten, senden Ihre Entwickler oder Kollegen oder Kunden oder an wen auch immer . Aber natürlich gibt es eine viel einfachere Möglichkeit , Zeichenflächen zu teilen. Sie müssen ihnen nicht immer wieder PNGs senden, die immer wieder aktualisiert werden , da dieser Prozess sehr mühsam werden kann. Und Sie werden am Ende viele Versionsnamen wie VU auf V1, T1, T2 haben. Aber die Designsoftware macht es uns heutzutage wirklich leicht, Projekte mit Kunden oder anderen Teammitgliedern teilen oder Projekte zu können Projekte mit Kunden oder anderen Teammitgliedern teilen oder Projekte zu können , ohne Dinge tatsächlich aus XD exportieren zu müssen. Wenn Sie also Ihre Kunsttafeln exportieren möchten, insbesondere wenn Sie wissen, dass dies die endgültige Version Ihrer Kunsttafeln ist , können Sie dies in XD so tun. Aber wenn Sie Ihre Kunsttafeln tatsächlich in XD selbst teilen möchten , werden wir das in der nächsten Vorlesung gemeinsam machen. Und ich denke, es ist eine der wirklich coolen Funktionen, die XD bietet, die wir nicht wirklich sehen, und viele andere Designsoftware. Aber ich denke, XD ermöglicht es Ihnen, Kunsttafeln zu teilen oder Assets mit anderen Designern Entwicklern oder Kunden zu teilen. Und so werden wir das in der nächsten Vorlesung gemeinsam machen. 72. Teilen von Kunstarten: Jetzt wissen wir, wie man mehrere Dinge einschließlich Kunsttafeln aus unseren Designs exportiert und an Teammitglieder oder Kunden sendet . Aber gibt es eine einfachere Möglichkeit, unsere Kunsttafeln mit anderen Menschen zu teilen und vielleicht ihr Feedback zu erhalten oder zu fragen, wie wir unsere Projekte von ihnen verbessern können. Egal ob ihre Kunden oder Teammitglieder. Xd gibt uns diese Möglichkeit, die Registerkarte „Teilen“ hier zu verwenden. Wenn Sie sich also die ganze Zeit gefragt haben , was dieses Shirt macht, werden wir das gemeinsam in diesem Vortrag untersuchen. Gehen Sie hier zum Tab „Teilen“. Xd wird es uns ermöglichen, unsere Kunsttafeln mit anderen Personen innerhalb von XD selbst zu teilen . Was ich damit meine, ist, dass es weitergeht und einen Link für Sie erstellt , mit dem Sie diesen Link mit anderen Personen teilen können. Sie können ihr Feedback zu ihnen erhalten. Sie können sie bitten, Kommentare zu hinterlassen je nachdem, welche Ansichtseinstellung Sie haben. Und wir werden diese Ansichteneinstellungen in nur einer Sekunde untersuchen . Bevor wir das tun, lasst uns untersuchen, was wir hier haben, in unserer Schertabelle. Im Eigenschaftenfenster wählt XD Assets einen Flow- oder Float-Namen aus. Von hier aus können Sie dies umbenennen, wo immer Sie möchten. Sagen wir also, wir machen gesunde Bisse Mockups. Und so wird dieser Link „Gesunde Bisse Mockups“ genannt. Und wir können unsere Links verwalten indem wir hier auf diesen verwalteten Link klicken. Von dort aus führt uns XD zur Creative Cloud-Website, wo wir Flows löschen können , die wir nicht mehr wollen, und alle Dateien oder die veröffentlichten Links, die wir haben, anzeigen können. So können Sie Ihre Links von dort aus verwalten. Aber woran wir wirklich interessiert sind, ist zu untersuchen, was diese Funktion überhaupt bewirkt. Das ist also der Linkname. Wir können fortfahren und die Ansichtseinstellung festlegen. Wenn Sie nur Feedback zu unseren Designs erhalten möchten, können wir mit der Standardoption fortfahren, nämlich Design Review. Wenn Sie dieses Design oder unseren Prototyp mit dem Entwickler teilen möchten , können wir diese Option auswählen, die wir in der folgenden Vorlesung untersuchen werden. Wenn Sie unser Projekt einfach vorstellen und es so einfach wie möglich halten möchten. Dies eignet sich am besten für die Präsentation. Benutzertests eignen sich hervorragend , wenn Sie Ihren Prototyp testen, an dem wir auch in zukünftigen Vorträgen arbeiten werden. Wir können auch ein individuelles Seherlebnis einrichten, bei dem Sie genau auswählen können , was Sie wollen. Egal, ob Sie Kommentare zulassen möchten oder die Datei im Vollbildmodus geöffnet werden soll, fügen Sie Design-Spezifikationen hinzu und so weiter. Lassen Sie uns der Einfachheit halber eine Designbewertung auswählen und untersuchen, was das bewirkt. Sie können weitermachen und auswählen , wer Zugriff auf diesen Link hat. Sie können also entweder bestimmte Personen zu diesem Projekt einladen, eine E-Mail-Adresse schreiben und diese Person einladen, diese Datei anzusehen , wenn ich sie nur mit einer bestimmten Person teilen möchte . In diesem Fall kann ich den Linkzugriff nur auf eingeladene Personen festlegen . Aber wenn wir möchten , dass jemand mit diesem Link Zugang meine Kunsttafeln sehen kann , kann ich jeden auswählen, der einen Link hat. Jedes Mal, wenn Sie hier Änderungen vornehmen, können Sie auf Link aktualisieren klicken, und XD erstellt einen Link für Sie, den Sie mit Ihren Kollegen teilen können. Sobald das erledigt ist, können Sie einfach auf diesen Kopier-Link klicken , wo wir den Link in Ihre Zwischenablage kopieren. Und jetzt, wenn ich ein Browserfenster öffne und diese URL dort eingib. Wir werden unsere Designs hier auf ihre Website stellen, wo wieder nur Personen mit diesem Link darauf zugreifen können. Wenn Sie diese Person mit einer Link-Option ausgewählt haben. Und so können sie jetzt alle Seiten durch Ihre Designs gehen und Kommentare hinterlassen, wenn sie möchten. Wenn sie das wollen, können sie natürlich entweder als Gast weitermachen oder sich mit einem Adobe-Konto anmelden. Sie können einfach als Gäste weitermachen und Feedback zu diesen Designs abgeben. Und durchstöbern Sie wirklich all diese Kunsttafeln. Das Schöne daran ist, dass Sie, wenn Sie Designänderungen vornehmen und zu Ihrem Share zurückkehren, aktualisieren können, indem Sie diesen Link aktualisieren können, indem Sie eine einfache Aktualisierung durchführen. Jetzt, da das Update auch auf unsere geteilten Assets angewendet wurde , mache ich das einfach rückgängig und lasse den Link hier. Aber jetzt können Sie wirklich sehen, wie wichtig es ist, Kunsttafeln zu teilen, anstatt sie zu exportieren und sie an andere zu senden , um Feedback zu erhalten. Wenn ich jetzt angemeldet bin, kann ich alle meine Kommentare für mein Projekt sehen und Antworten darauf hinterlassen. Ziemlich cool. Während Sie hier sind, können Sie auch alle Assets durchsuchen , die mit Ihnen geteilt werden. Wir sind dieses Glied. Sie können auf eine bestimmte Seite gehen, wenn Sie möchten. Und was cool ist, ist, dass er sogar Prototypen teilen kann. Sobald wir also mit dem Prototyping beginnen, werden diese Seiten weitergehen und sogar interaktiv werden , damit sie sie tatsächlich wie eine App verwenden können. Aber das werden wir in den zukünftigen Vorträgen untersuchen. Vorerst. Wir wollen nur lernen, wie unsere Kunsttafeln mit anderen Menschen teilen können. Was ist, wenn ich nur bestimmte Artboards und nicht alle meine Kunsttafeln teilen möchte . Sie können dies auch tun, indem Sie einfach zur Registerkarte Design gehen und die Kunsttafeln auswählen, die Sie teilen möchten. Sagen wir also, ich möchte nur meine Restaurantseite und die Menüseite teilen und sonst nichts. Dann kannst du die Umschalttaste gedrückt halten, diese Kunsttafeln auswählen und dann hier oben auf dieses kleine Teilen-Symbol klicken . Und noch einmal XD, wir bringen dich zu dem Shirt hoch. Aber jetzt, wenn Sie diese beiden Kunsttafeln nur noch übrig haben , wird nichts anderes ausgewählt, was bedeutet, dass über diesen Link nichts anderes geteilt wird. Jetzt ist das einzige Problem hier, dass ich keinen anderen Link erstellen kann, weil ich bereits einen Link erstellt habe. Da XD, mit einem Basiskonto können Sie jeweils nur einen Link teilen. Wenn Sie mehr Link-Sharing wünschen, müssen Sie auf das nächste Level upgraden. Sie müssen Ihr Konto upgraden. Aber wir werden das einfach loswerden. Ich werde diesen Link hier einfach dauerhaft löschen , damit ich neue Links erstellen kann. Jetzt kann ich also zurückgehen und diese beiden Seiten erneut auswählen. Jetzt erlaubt mir XD, einen Link für diese Seiten zu erstellen und ihn nach Belieben umzubenennen. Wenn Sie ab und zu einen Link erstellt haben kopieren Sie diesen Link und teilen Sie ihn mit anderen. Gehen Sie fort und geben Sie diese URL erneut geben Sie diese URL ein in. Wie Sie sehen können, erhalten wir hier nur zwei Seiten, die zwei, die wir exportieren. So können Sie bestimmte Kunsttafeln teilen. Anstelle all deiner Kunsttafeln mit anderen Leuten. Wir werden einfach weitermachen und das auch löschen. Wir brauchen es nicht wirklich. Machen Sie das auch rückgängig. So können Sie Ihre Kunsttafeln mit XD teilen. Es gibt noch eine Sache, die ich Ihnen über das Teilen von Kunsttafeln zeigen möchte , und das ist die Entwicklerübergabe, über die wir gesprochen haben. Warum kommen wir also nicht in der nächsten Vorlesung zurück um das auch zu untersuchen. 73. Developer: Was übergibt der Entwickler und wie können wir das Leben eines Entwicklers als Designer erleichtern , wenn wir Assets mit ihnen teilen? Nun, das werden wir gemeinsam in diesem Vortrag untersuchen , weil ich denke, das ist ein super cooles Feature, das XD hat. Das ist wirklich großartig, zusammen mit seinen anderen Sharing-Funktionen. Um das durchzugehen, wir fort und gehen zurück zu unserem Teilen-Tab. Anstelle von Design Review in der Ansichtseinstellung werden wir dann fortfahren und tatsächlich die Entwicklung auswählen. Sobald Sie das getan haben, wird XD Sie fragen, ist das ein Webprojekt, ein iOS-Projekt oder ein Android-Projekt? Damit Sie dementsprechend dem Entwickler oder die richtigen Assets oder den richtigen Code für bestimmte Plattformen erhalten die richtigen Assets oder den richtigen Code für bestimmte Plattformen und auf herunterladbare Assets klicken. Wenn es also Assets gibt , die Sie herunterladen können, können sie das von dort aus tun. Jeder mit dem Link. Wir lassen das so wie es ist und erstellen den Link hier eine Sekunde. Und sobald diese Links generiert wurden, werden wir sie kopieren. Da sind wir los. Jetzt werde ich in meinem Browser weitermachen und das eingeben. Und jetzt werden wir sehen, was die Unterschiede darin bestehen, es einfach als Design-Review im Vergleich zu einer Entwicklerbewertung zu teilen. Jetzt zeigt XD Ihnen , dass Sie diesen Spezifikationsmodus haben. Wir können fortfahren und die nützlichen Dinge als Entwickler sehen die nützlichen Dinge als , wenn Sie mit einem Design arbeiten. Ich kann natürlich wie gewohnt einen Kommentar hinterlassen. Und ich kann sogar einen Stift auf einen bestimmten Teil des Designs legen einen Stift auf einen bestimmten Teil des , wo ich Feedback zu diesem bestimmten Teil abgeben kann . Also haben wir diese Option natürlich wie zuvor. Aber jetzt haben wir diesen kleinen Tab hier und wir können uns die Spezifikationen dieser Seite ansehen. Also zeigen wir uns tatsächlich einen Bildschirm Details wie die Größe, die auf dieser Seite verfügbaren Farben. Und wir können fortfahren und darauf klicken, um diese Farbe in unsere Zwischenablage zu kopieren. Wir können sehen, welche Schriftgrößen verwendet werden und welche Schriftarten. Wir können diese Werte sogar von Hex auf RGBA ändern und so weiter. Und noch cooler, wir können einzelne Artikel in unserem Design auswählen und sogar die Komponente sehen und wie dieser Button in verschiedenen Zuständen aussieht. Wir können weitermachen und weitere Informationen zu diesem aber oder diesem Text sehen . Für dieses Bild können wir wirklich alles auswählen und es wird uns diese Immobilie geben. Wir können weitermachen und natürlich auf verschiedene Seiten gehen und verschiedene Eigenschaften basierend auf diesem Bildschirm und jemand anderem sehen verschiedene Eigenschaften basierend auf , das ist cool. Wenn ich zurück zu meinem XD gehe, entwerfen wir das für ein Webprojekt. Also werde ich weitermachen und das in Web ändern und den Link aktualisieren. Etwas Cooles. Was ist passiert? Da XD über CSS-Funktionen verfügt und dies jetzt aktualisieren kann, wird es weitergehen und mir tatsächlich einen CSS-Code geben . Wenn ich an einem Webprojekt im Gegensatz zu einem iOS-Projekt arbeite , kann ich den CSS-Code tatsächlich kopieren und diesen in meinen Webentwicklungsprojekten als Entwickler verwenden . Dies wird auf allen Seiten angezeigt. Und Sie erhalten sogar diesen neuen Tab hier, wenn Sie mit einem Webprojekt namens Variablen arbeiten , dem wir fortfahren und Ihnen den Zugriff auf die Variablen ermöglichen , die wir in unseren Bibliotheken erstellt haben wie die Akzentfarben, die Primärfarben und so weiter. Die Schriftgrößen. Ich kann es von hier herunterladen. Als CSS-Projekt. Wirklich, das ist der Unterschied zwischen Designüberprüfung und Entwicklungsüberprüfung. Im Entwicklungsmodus haben wir Zugriff auf viel mehr. Wir können sogar auf unsere Assets zugreifen und zum Beispiel Bilder herunterladen, was großartig ist, da Sie auf diese Weise keine Bilder und Elemente zwischen Ihren Entwicklern hin und her senden müssen. Das ist es, was XDS-Sharing-Funktionen so nützlich macht. diesem Fall werden wir in den nächsten Vorträgen wiederkommen in den nächsten Vorträgen wiederkommen und erfahren, wie wir tatsächlich mit einem Teammitglied oder mit mehreren Teammitgliedern, die mit uns daran arbeiten, an XD-Projekten arbeiten können mit einem Teammitglied oder mit mehreren Teammitgliedern, die mit uns daran arbeiten, an XD-Projekten . Sagen Sie also eine kurze Pause hier und lernen Sie gemeinsam in der nächsten Vorlesung. 74. Editoren einladen: Wenn wir also mit anderen Personen an einem Designprojekt arbeiten , sehen wir uns Kollegen oder Teammitglieder bei diesem Projekt an. Wie können wir unser Projekt teilen und gleichzeitig mit ihm zusammenarbeiten? Nun, tatsächlich hat eine Einladungsfunktion , mit der Sie Ihr Projekt, Ihre XD-Datei, mit anderen Designern teilen können. Sie können tatsächlich weitermachen und sich Ihnen anschließen und dieses Projekt gemeinsam mit Ihnen bearbeiten. Da Ihre Dateien in der Cloud gespeichert werden, können Sie einfach Personen zu Ihren Dokumenten einladen , damit sie Ihnen bei der Bearbeitung helfen können. Fehler dabei, Sie können einfach weitermachen und hier auf diesen kleinen Teilen-Button klicken diesen kleinen Teilen-Button oder auf die Schaltfläche Einladen klicken. Xd wird fortfahren und Ihnen erlauben, hier eine E-Mail-Adresse einzugeben. Wir können Ihre Kollegen oder Teammitglieder zu diesem Projekt einladen . Sie können eine kleine Nachricht schreiben, wenn Sie möchten, oder Sie können sie einfach zur Bearbeitung einladen. Sobald Sie dies getan haben, wird die Mutation an diesen Benutzer gesendet. Und sie erhalten eine E-Mail darüber, wo sie das Projekt öffnen und das Projekt tatsächlich mit Ihnen bearbeiten können. Wenn Sie diese Person zu irgendeinem Zeitpunkt aus Ihrem Dokument entfernen möchten , können Sie einfach auf Entfernen klicken. Und es wird aus dem Projekt entfernt. Und so können Sie Teammitglieder einladen , mit Ihnen zusammenzuarbeiten und Projekte mit Ihnen in XD zu bearbeiten. 75. Document: Während Sie an Ihrem Projekt arbeiten und Änderungen an Ihren Entwürfen vornehmen. Xd wird weitermachen und verschiedene Versionen für Ihre Entwürfe verfolgen . Nehmen wir an, wenn Sie zwei verschiedene Versionen vergleichen möchten , die Sie haben oder zu einer bestimmten Phase Ihres Designs zurückkehren möchten. Sie können dies mit der Funktion „ Dokumenthistorie“ , die es hat. Wenn Sie hier in der Leiste hier oben gehen, in Sie Ihren Dateinamen anzeigen und den Mauszeiger über diesen Pfeil bewegen, sehen Sie, dass Sie Zugriff auf den Dokumentverlauf haben, in dem Sie auf automatisch gespeicherte und Lesezeichen zugreifen können Versionen Ihres Dokuments. Also das Gleichgewicht, das Ihnen die verschiedenen Versionen zu verschiedenen Zeiten für Ihr Projekt zeigt die verschiedenen Versionen zu verschiedenen Zeiten . Da Ihr Projekt automatisch gespeichert wird, speichert XD Ihr Projekt automatisch und gibt Ihnen bestimmte, zu denen Sie zurückkehren können. Sie können sogar bis zu den letzten zehn Tagen aufsteigen. Und wenn Sie bestimmte Versionen behalten möchten, können Sie diese tatsächlich markieren, Lesezeichen setzen und jederzeit darauf zugreifen. Wenn ich zum Beispiel nur zu einer meiner Versionen zurückkehre , damit ich auf diese kleinen drei Punkte klicken kann , um diese Version in einem neuen Fenster zu öffnen , kann ich diese Version von I will nennen. Ich kann es mit diesem Button hier drüben mit einem Lesezeichen versehen . Mach weiter und öffne es in einem neuen Fenster. Xd wird weitermachen und das aufmachen. Zu diesem Zeitpunkt, der jetzt auch im Namen der Datei steht. Sie können sehen, dass dies der Punkt ist, an dem wir an unserer Bestellhistorie-Seite gearbeitet haben. Also sind wir gerade mit diesem Projekt irgendwie in die Vergangenheit zurückgegangen . Das ist wirklich der Anwendungsfall dieser Dokumentverlaufsfunktion. Du kannst noch weiter zurückgehen. Wenn Sie diese Version nicht umbenennen möchten, können Sie diese Arbeit an der Bestellhistorie nur als Beispiel benennen. Sie können sogar weitermachen und das Datum hier angeben, wenn Sie möchten. Fahren Sie fort und klicken Sie hier auf die Schaltfläche Okay, und es wird fortgesetzt und diese Version für Sie gespeichert. Oder wenn Sie einfach eine Version speichern möchten , ohne sie umzubenennen, können Sie dies tun, indem Sie hier auf das Lesezeichen klicken. Sie können auch von hier oben auf Ihre markierten Versionen zugreifen, damit Sie einfacheren Zugriff darauf haben. Dies ist einer der Vorteile, wenn Ihre Datei in der Cloud gespeichert wird, anstatt sie lokal auf Ihrem Computer zu speichern . Xd gibt Ihnen Zugriff auf diesen Dokumentverlauf , der sich als sehr praktisch erwiesen hat, insbesondere wenn Sie an Ihrem Design große Fehler machen , die Sie zu einer bestimmten Version der Vergangenheit zurückkehren möchten . oder Sie möchten verschiedene Versionen für verschiedene Teile des Entwurfsprozesses speichern . Angenommen, Sie können einen Dokumentverlauf in XD verwenden. 76. Bibliotheken teilen: Als wir den Kurs durchlaufen haben und wir angefangen Dinge in unseren Bibliotheken zusammenzustellen. Wir können sehen, wie nützlich dieses Bibliotheks-Panel B. Und wir können diese Bibliotheken wirklich nutzen und sie auch für mehrere Projekte verwenden. Eine Sache, die Sie tun könnten, ist Sie Ihre Bibliotheken tatsächlich freigeben oder Ihre Bibliotheken in einem Cloud-Dokument-Asset veröffentlichen können. Wir können sie in mehreren Projekten oder mit mehreren Personen verwenden. Wenn Sie ein Designsystem zusammenstellen , das Sie über das Meer teilen möchten, mehrere Projekte für Ihr Unternehmen oder für Ihre Kunden Projekte. Sie können diese Bibliothek veröffentlichen , indem Sie hier rüber gehen und hier auf dieses kleine Symbol klicken. Und dann werden wir fortfahren und tatsächlich öffnen wir Ihre Bibliotheken, von wo aus Sie Ihre Bibliothek veröffentlichen können . Eine Sache ist, dass dies eine Funktion ist , für die Sie upgraden müssen, um sie verwenden zu können. Xd wird Sie auffordern, ein Upgrade durchzuführen, wenn Sie Zugriff auf Veröffentlichungsbibliotheken haben und diese zwischen Projekten und mit Teams verwenden möchten. Neben ein paar anderen Funktionen wie unbegrenzte Redakteure freigegebene Dokumente, Shred-Links und so weiter. Wenn Sie über das aktualisierte Konto verfügen, indem Sie auf Veröffentlichen klicken, können Sie diese Bibliothek veröffentlichen und sogar Personen dazu einladen. Lade eine bestimmte Person dazu ein. Ich kann ihnen entweder Anzeigeberechtigungen oder Bearbeitungsberechtigungen erteilen, wenn ich die Möglichkeit haben möchte , diese Bibliothek zu bearbeiten. Andernfalls haben sie durch Einladung Zugriff auf die Bibliothek in Ihren Projekten. Und sie erhalten eine E-Mail, von der sie weitergehen und Zugriff auf diese Bibliothek haben. So können Sie Bibliotheken mit XD veröffentlichen und mit anderen Teammitgliedern teilen. 77. Sketch importieren: Wenn Sie nun wie zuvor mit anderer Designsoftware gearbeitet haben , können Sie diese jederzeit in XD importieren. Wenn Sie in Ihrem Dateibrowser sind, als wäre ich hier drüben, können Sie natürlich neue Dateien erstellen, aber Sie können tatsächlich andere Dateien öffnen, einschließlich Photoshop- oder Illustrator-Dateien, Skizzierdateien oder andere XD-Dateien. Wenn Sie an einem Skizzenprojekt arbeiten, bei dem Sie ein Skizzenprojekt haben , das Sie zu XD bringen. Sie können einfach weitermachen und auf diese Skizzenoption klicken. Und dann wird XD Sie auffordern, diese Datei zu finden. Und sobald Sie dies getan haben, können Sie fortfahren und auf Öffnen klicken. Je nachdem, wie groß die Dateigröße ist, es hier eine Minute dauern, um EC2 importieren, aber wie Sie sehen können, importieren wir Ihr Projekt in ein XD-Projekt. Sie können es genauso wie erwartet verwenden. Xd geht weiter und bewegt sich sogar über Ihre Komponenten von der Skizze in XD-Komponenten. Und er würde diese Komponenten genau so bearbeiten , wie Sie es erwarten würden. So können Sie Skizzendateien in Adobe XD importieren und nach Belieben verwenden . Jetzt stellen Sie vielleicht fest, dass sich die Dinge auf verschiedenen Seiten befinden. In Skizze. Sie können als verschiedene Abschnitte in Ihrem Canvas erscheinen , die Sie hier haben. Deshalb werden die Dinge in verschiedene Abschnitte unterteilt, aber alles andere sollte gleich sein. Eine Sache möchte ich bemerken, dass es möglicherweise nicht richtig funktioniert, wenn Sie nicht die richtigen Schriftarten installiert haben. Vielleicht möchten Sie sicherstellen, dass Sie alle Schriftarten in dieser Skizzendatei installiert haben , bevor Sie sie in Ihr XD importieren. Angenommen, Sie können Skizzendateien in XD importieren. 78. Was ist Prototyping?: Wir haben kurz das Prototyping erwähnt. Und dann haben wir die früheren Vorträge darüber gesprochen, auf unsere Entwürfe zurückzukehren und Ihren Prototyp zusammenzustellen, dass wir tatsächlich einen verwenden können, aber was ist ein Prototyp in der Designsoftware? Was macht es? Wofür ist es gut? Und warum sollten wir Prototypen aus unseren Mockups erstellen? Nun, wie einfach ausgedrückt, ist ein Prototyp im Wesentlichen eine Probe oder ein Modelltyp von Produkt erstellt wurde, um zu testen, wie der Prozess dieses Produkts aussehen wird , wenn es tatsächlich programmiert und gebaut wird. Wir stellen diese Entwürfe zusammen, aber sie haben keine wirkliche Beziehung zueinander. Sie sind noch kein wirkliches Produkt. Mit einem Prototyp können wir tatsächlich weitermachen und nachahmen, weitermachen und nachahmen wie ein tatsächliches Produkt, das aus diesem Design entwickelt wurde , aussehen würde und sich wie alles anfühlen würde Verbindungen herstellt zwischen den Schaltflächen zu den verschiedenen Seiten, bis hin zu zeigen welche verschiedenen Arten von Animationen auf unseren Designs oder das Öffnen von Overlays oben über Design usw. alle Teil des Prototypings sind. Aber er benutzte Prototypen, um unsere Vision für dieses Produkt oder für dieses Design zu teilen , das dann mit Hilfe eines Softwareentwicklers zu einem echten Produkt wurde . Der Grund, warum das Prototyping so wichtig ist, ist, dass es viel weniger kostet , einen Prototyp mit einer Designsoftware wie XD zusammenzustellen , anstatt diese tatsächlich zu entwickeln App oder Produkt, im Gegensatz zur tatsächlichen Codierung eines solchen Produkts. Und dann erkennen, welche Änderungen vorgenommen werden müssen. Und wenn wir diesen Prototyp zur Rückmeldung senden, können wir ihn verbessern, bevor wir ihn tatsächlich an einen potenziellen Entwickler weitergeben bevor wir ihn tatsächlich an einen potenziellen Entwickler weitergeben , der mit Code zusammengestellt werden kann. Also werden wir diese Seiten in der nächsten Vorlesung miteinander verbinden und aus unseren Entwürfen einen Prototyp erstellen . 79. Einen Übergang erstellen: Wie erstellen wir tatsächlich einen Prototyp und schaffen Verbindungen zwischen unseren Seiten in XD? Nun, du gehst einfach weiter und gehst hier oben zur Registerkarte „ Prototyp“. Sobald Sie sich auf der Registerkarte Prototyp befinden, sich das Eigenschaftenfenster ändert sich das Eigenschaftenfenster vollständig. Und jetzt können Sie Interaktionen zwischen verschiedenen Seiten, verschiedenen Schaltflächen usw. erstellen Interaktionen zwischen verschiedenen Seiten, . Und das machen wir zusammen in dieser Vorlesung. Und die Art und Weise, wie wir dies durcharbeiten werden , um uns von links nach rechts zu arbeiten, was im Wesentlichen die Reihenfolge der Seiten ist, die wir erwarten, oder die wir erwarten, dass der Benutzer durchläuft. Was wir hier versuchen, ist einen Flow zu erstellen , der den Benutzer von den ersten Seiten der App bis zu den letzten Seiten führt den ersten Seiten der App bis zu den , in denen in diesem Fall beide Bestellfortschritte angezeigt werden, dann haben Sie die Möglichkeit, auch das Menü zu öffnen und auch auf diese anderen verschiedenen Seiten zuzugreifen. Also nehmen wir uns Zeit, gehen jede Seite sorgfältig durch und fügen richtige Verbindungen zwischen den Schaltflächen und den Seiten hinzu. Ich möchte weitermachen und einfach darauf drücken und hier in diesen Abschnitt zoomen und uns von hier aus arbeiten. Jetzt gibt es in einem Prototyp immer einen Startbildschirm, den Sie auswählen können. Dies bedeutet also, dass beim Öffnen Ihres Prototyps dies die erste Seite ist, auf der der Prototyp beginnen wird. In unserem Fall möchten wir den Begrüßungsbildschirm, die Homepage, erstellen. Also klicken wir auf die Zeichenfläche für den Begrüßungsbildschirm und klicken auf diese Homepage. Jetzt haben wir einen Flow One erstellt. Die erste Verbindung, die wir herstellen werden ist von dieser Seite hier, dem Begrüßungsbildschirm zu unserer Anmeldeseite, indem Sie diesen Knoten einfach von der Seite hierher ziehen und auf die gewünschte Seite der Benutzer, der durchgeht , sobald er diesen Begrüßungsbildschirm gesehen hat. Jetzt oder auf der rechten Seite hier drüben haben wir eine Reihe von Optionen wie wir diesen Übergang wünschen. Also werden wir eins nach dem anderen die Aktionstypen durchgehen , die wir hier haben. Der erste ist der Übergang, der den Benutzer einfach, wie der Name schon sagt, von einer Seite zur anderen führt. Wir haben Auto animate, das im Wesentlichen versucht, dasselbe zu tun, aber diesen Übergang animiert. Wenn es also etwas gibt, das zwischen den beiden Seiten ähnlich ist , animieren Sie automatisch, um einen reibungslosen Übergang zu erstellen , der so aussieht, als gäbe es eine silberne Animation zwischen diesen Seiten. Und weil diese Seiten nichts miteinander haben, habe ich keine gemeinsamen Elemente. Wir wollen es nicht wirklich automatisch animieren. Wir können wählen, ein Overlay zu öffnen Dies wird im Wesentlichen die Seite öffnen, auf die wir verweisen, die hier oben auf dieser Seite hier drüben ist , im Gegensatz zu, im Gegensatz zum Übergang des Benutzers von einer Seite zur anderen. Also wieder, auf der Seite wird oben auf dieser Seite geöffnet. Und normalerweise sehen wir Overlays in Aktionsblättern und Alertansichten verwendet werden und kleinere Bildschirme , die nur vorübergehend auftauchten und verschwunden sind. Wir werden das auch untersuchen, wenn wir ein Overlay für unser Aktionsblatt erstellen. vorherige Zeichenfläche bringt den Benutzer zurück zur vorherigen Zeichenfläche der Prototypen oder wo immer er zuvor war. Wir nehmen sie zurück, ihre Audiowiedergabe spielt, wie der Name schon sagt, ein Audio ab. Wenn wir das auswählen, können wir natürlich eine Audiodatei und eine Sprachwiedergabe auswählen . Wir werden fortfahren und tatsächlich eine Rede wiedergeben , wie der Name schon sagt. Und du kannst weitermachen und diese Rede schreiben und hier. Das ist also cool, wenn du seine Rede wiedergeben musst, aber das brauchen wir gerade nicht wirklich. Wir wollen einfach nur eins hier drüben überstellen. Mit jeder dieser Optionen erhalten Sie einen anderen Satz von Optionen direkt darunter oder Eigenschaften direkt darunter. Um zu bearbeiten, werden wir diese ausführlicher durchgehen . Vorerst. Wir möchten nur nach einer bestimmten Dauer eine Symbolverbindung von unserem Begrüßungsbildschirm zu einer Anmeldeseite erstellen eine Symbolverbindung von unserem Begrüßungsbildschirm . Wir sehen also, dass unser Ziel die Anmeldeseite ist, wie wir bereits auf zwei hingewiesen haben. Wenn wir diese Verbindung irgendwann ändern möchten, können wir diese auf eine andere Seite ziehen , die wir zwei ernennen möchten. Aber im Moment werden wir fortfahren und diese beiden Verbindungen herstellen. Natürlich können Sie mehrere Verbindungen erstellen, wenn Sie möchten. Wir können eine Verbindung zwischen dem Begrüßungsbildschirm und der Anmeldeseite herstellen zwischen dem Begrüßungsbildschirm und und eine zwischen einem Begrüßungsbildschirm die folgende Replikation verteidigen. Aber ich lösche diese Verbindung einfach , indem ich einfach auf Löschen klicke. Wenn Sie zu irgendeinem Zeitpunkt keine Verbindung herstellen möchten und diese Verbindung entfernen möchten, können Sie einfach die Verbindung auswählen und auf Ihrer Tastatur auf Löschen klicken. Für diesen Übergang wollten wir uns also als Ziel einloggen. Und für die Animation wollen wir uns auflösen. Dies sind die Animationen, die für den Übergang zwischen zwei Seiten verfügbar sind. Nun werden einige von ihnen an verschiedenen Stellen unseres Apple für diese Seite angewendet , auflösen ist die geeignete, die im Wesentlichen von dieser Seite auf diese Seite übergeht. Jetzt hier drüben erhalten wir verschiedene Arten von Lockerungsoptionen, erhalten wir verschiedene Arten von Lockerungsoptionen um zu wählen, wie unsere Animation aussehen soll. In der Regel sehen wir Leichtigkeit ein- oder auswärts entschuldigt. Aber natürlich können Sie die verschiedenen Arten von Animationen ausprobieren , um zu sehen, was die Unterschiede sind. Also lasst uns weitermachen und einfach rein und raus wählen. Für die Dauer möchte ich fortfahren und 4 Sekunden Nullpunkt auswählen. Im Wesentlichen wird diese Animation so lange dauern. Je länger Sie es einstellen, 1 Sekunde oder mehr, desto länger wird es zwischen diesen beiden Seiten wechseln . Wenn Sie sagen, dass es kürzer ist, wird es schneller passieren. Das ist im Wesentlichen das, was diese Region tut. Lassen Sie uns also jetzt eine Vorschau unserer Prototypen anzeigen, denn unser Auslöser ist ein Tab Wenn ich auf diese Seite tippe, wird es auf diese andere Seite animiert. Aber was ich tun möchte, ist, anstatt zu tippen, wollen wir fortfahren und Zeit wählen. Wir wollten fortfahren und es automatisch auf diese Seite wechseln lassen, ohne dass der Benutzer nach 0,6 Sekunden darauf tippen muss . Wenn wir nun fortfahren und die Desktop-Vorschau noch einmal öffnen , wie Sie sehen können, ohne dass ich auf den Übergang tippe , ist automatisch passiert. Das ist es, was der Auslöser hier oben macht. Dann hast du andere Trigger wie Stimme. Sie können also eine Sprachanfrage verwenden, wenn Sie möchten. Du kannst Schlüssel und Gamepads benutzen. Der Benutzer drückt eine bestimmte Taste, dann wird er fortfahren und animieren oder ziehen und angreifen. Normalerweise verwenden wir einen Tab. Um wie viel Uhr natürlich auch in einem Fall wie diesem nützlich ist, haben wir hier unsere erste Verbindung geschaffen , was großartig ist. Jetzt werden wir in der nächsten Vorlesung wiederkommen , um mehr Verbindungen zwischen den restlichen Seiten herzustellen. 80. Unsere Seiten verbinden: Herzlichen Glückwunsch zum Erstellen Ihrer ersten Verbindung für den Prototyp in unserer mobilen App. Ich denke, es sieht ziemlich gut aus, aber gehen Sie in die Desktop-Vorschau, hier oben können Sie eine Vorschau der von uns erstellten Animation oder diesen Übergang anzeigen. Ich denke, es sieht ziemlich gut aus. Jetzt möchten wir von hier aus jede Seite durchgehen und sehen, welche Verbindungen zwischen den verschiedenen Seiten hergestellt werden müssen . Jetzt können Sie natürlich detaillierter mit dem Reportertyp werden, wenn Sie möchten. Wenn Sie beispielsweise den Benutzer nachahmen möchten, indem Sie eine E-Mail-Adresse oder ein Passwort eingeben und dann möglicherweise eine Tastatur mit den Apple-Assets auftaucht , erhalten Sie insgesamt mehr Seiten hier, vielleicht direkt unter dieser Anmeldeseite und haben Sie jede dieser verschiedenen Arten von Designs und wechseln Sie dann zwischen ihnen. Wenn Sie vielleicht eine realistischere Art von Prototyp erstellen möchten. Aber in diesem Kurs werden wir es einfach halten und Verbindungen zwischen den Seiten herstellen , die wir bereits entworfen haben. Von hier aus möchte ich eine Verbindung von der Anmeldeschaltfläche auf die nächste Seite der App herstellen , bei der sich um die Telefonverifizierung handelt. Wir gehen also davon aus , dass sich die Benutzer zum ersten Mal anmelden. Also werden wir die Verbindung von der Anmeldeseite zur Telefonbestätigungsseite gutschreiben . Nun ist eine Sache, die cool ist, aber Prototypen ist, dass Sie nicht unbedingt Verbindungen zwischen den Seiten herstellen müssen. Sie können tatsächlich Verbindungen zwischen jedem Element in Ihrem Design herstellen . Auf diese Weise können Sie diese Schaltfläche tatsächlich mit dieser Seite verbinden , sodass ein Benutzer, wenn er auf diese Schaltfläche tippt, der Benutzer zu dieser Seite navigiert. Und genau das werden wir tun. Wir klicken auf unseren Login-Button. Stellen Sie sicher, dass Sie sich hier im Prototyp-Tab befinden und nicht im Design. Sonst würde das nicht funktionieren. Ziehen Sie dann einen Knoten, um eine Verbindung zwischen dieser Schaltfläche, Anmeldeschaltfläche und unserer Telefonbestätigungsseite herzustellen. Jetzt sehen wir den Auslöser. Wir wollen, dass es ein Fingertipp ist, in diesem Fall. Wenn also ein Benutzer tippt, wird er diesen Übergang auslösen. Und wir wollen weitermachen und das so lassen, wie es ist. Und für die Animation, anstatt uns aufzulösen, werden wir fortfahren und die Folie nach links wählen. Und du wirst sehen, wie das in nur einer Sekunde aussehen wird. Ich möchte den Rest verlassen, da es für die Dauer bei 0,4 Sekunden ein- und ausgeht. Wenn wir nun eine Vorschau von Crick anzeigen, indem wir auf das Login klicken, gehen Sie fort und überführen Sie uns dann zur Überprüfung. Aber wie Sie von hier aus sehen können, können wir wirklich auf alles andere klicken, da wir jetzt Verbindungen auf unserer Telefonbestätigungsseite erstellen müssen jetzt Verbindungen auf unserer Telefonbestätigungsseite erstellen . Etwas Cooles an der Desktop-Vorschau, die wir hier geöffnet haben, ist, dass wir, wenn wir auf verschiedene Seiten klicken , eine Vorschau anzeigen können, wie das in unserem Prototyp aussehen wird , ohne schließe dieses Fenster und öffne einen Yen. Das ist wirklich schön, weil Sie auf verschiedene Seiten gehen und diesen Prototyp wirklich wiederholen können , wenn Sie möchten, oder diese Übergänge wiederholen können, wenn Sie möchten. Und das ist großartig , weil Sie Ihre Desktop-Vorschau nicht weiter laden müssen . Ich werde einfach weitermachen und das minimieren. Segne unsere Vorschau und mach weiter. Und wir werden eine Verbindung zwischen der Telefonreplikationsseite auf unserer Hauptseite herstellen. Denn sobald der Benutzer mit dem Hinzufügen einer Telefonnummer fertig ist, öffnet er die Hauptseite der App. Und wir werden das genauso belassen wie der vorherige Übergang, der leicht links ist. Er ist rein und raus und 0,4 Sekunden und auf Fass. Da wir von hier aus nur ein Menü haben, können wir nur wirklich eine Verbindung zwischen einem dieser Restaurants und der Speisekarte herstellen. Wenn Sie jetzt wieder möchten, werden Sie damit komplizierter, Sie können verschiedene Menüs für verschiedene Restaurants gestalten , aber es wird ein bisschen überflüssig sein, denn wieder, was das Ziel davon ist Prototyp ist es nicht perfekt zu machen und nicht jede Verbindung zum Laufen zu bringen. Der Hauptpunkt des Prototyps ist es, unsere Idee zu vermitteln, unseren Standpunkt basierend auf dem, was wir haben. In diesem Fall wollen wir hier das italienische Restaurant auswählen, Frank hat das Haus passiert. Die allererste Option und kritische Abschnitt zu dieser Seite hier drüben. Und wir lassen alles andere so wie es ist. Zu jedem Zeitpunkt können Sie auch die Eingabetaste drücken, um diese Desktop-Vorschau oder die Eingabetaste unter Windows zu öffnen . Einloggen. Als Nächstes. Dann werden Sie mehr merken , dass wenn Sie auf diese anderen Optionen klicken, Nichts erscheint. Wenn Sie jedoch den Mauszeiger über diesen weil wir eine Verbindung für diese erstellt haben, wechselt mein Cursor zu diesem Link-Cursor. Wir wissen also, dass es hier eine Verbindung gibt. So können wir weitermachen und darauf klicken. Öffne das Menü für uns, ein wunderschöner Teil, denn diese Seite ist ein bisschen länger. Achsen gingen bereits voran und haben dieses Scrolling, vertikales Scrollen für uns geschaffen , was erstaunlich ist. Das einzige Problem, das Sie bemerken, ist jedoch, dass die Navigationsleiste in der Statusleiste ebenfalls scrollt, während sie am selben Teil der Seite bleiben sollten . Unabhängig davon, wie viel wir nach unten oder nach oben scrollen. Wir werden in der nächsten Vorlesung wiederkommen , um zu erfahren, wie wir diese Elemente auf der Seite tatsächlich sperren können . Sie bewegen sich nicht, während wir nach oben und unten scrollen. Sobald wir das getan haben, werden wir fortfahren und weiterhin Verbindungen in unserem Prototyp herstellen. 81. Vertikales Scrollen: Wie ich bereits erwähnt habe, sind vorangegangen und haben ein vertikales Scrollen für uns erstellt. Aufgrund der Tatsache, dass diese Seite hier drüben ist, ist unsere Menüseite in Bezug auf die Höhe zu lang. jetzt diese Option hier verwende, wenn ich unsere Menüseite auswähle, werden Sie sehen, dass dies tatsächlich die Ansichtsfensterzeile ist. Indem wir dies anpassen, können wir tatsächlich auswählen, wie viel unserer Seite in unserem Prototyp angezeigt wird. Wenn wir es also ausstrecken, sehen wir immer mehr auf einer Seite. Was wir tun wollen, ist, dass wir fortfahren und diese auf die gleiche Höhe einstellen möchten, wie die tatsächlichen iPhone-Geräteseiten unser Fall sind. Das wäre genau hier drüben, wo es vorher war. Und genau das zeigt diese Linie hier drüben. Ein Problem mit einem vertikalen Scrollen ist, wie ich bereits erwähnt habe, die Tatsache, dass sich unsere Navigationsleiste und Statusleiste hier nicht bewegen sollten, während wir nach oben und unten scrollen. Wie beheben wir das? Nun, XD gibt Ihnen die Möglichkeit bestimmte Elemente auf der Seite auszuwählen, unabhängig davon, ob Sie die Registerkarte Design oder den Prototyp ausgewählt haben , während Sie die Navigationsleiste haben , die wir sind ausgewählt, erhalten Sie diese feste Position beim Scrollen unter dem Scroll-Teil. Oder wenn Ihr InDesign ist, sehen Sie diese feste Position beim Scrollen. Sie machen beide tatsächlich das Gleiche. Wenn Sie also darauf klicken, passiert jetzt, dass die Navigationsleiste oder Wolle dort bleiben, wenn ich in unserem Prototyp scrolle . Aber natürlich muss unsere Statusleiste noch repariert werden. Der Grund, warum die Navigationsleiste gerade hinter allen anderen Karten hier liegt, liegt darin wir zuerst zufrieden sind und in unserem Ebenenbedienfeld niedriger sein muss als diese anderen Gegenstände. Und das können wir bestätigen, indem wir hier zu unserem Ebenenbedienfeld gehen. Und wie ich hier erwähnt habe, wie Sie sehen können, auf dem untersten Teil der Ebenen, während wir tatsächlich ganz oben sein wollten. Und wie Sie sehen können, werden wir jetzt unseren Prototyp abdecken, was großartig ist. Eine Sache, die wir tun möchten, ist, die Statusleiste hochzubringen, da sie sich oben auf der Navigationsleiste befinden sollte. Und mach das Gleiche. Führen Sie beim Scrollen eine feste Position ein. Auch hier können Sie dasselbe im Prototypmodus tun und Sie können fortfahren und auf die feste Position und beim Scrollen klicken, und ich werde das gleiche Ergebnis für Sie erzielen. Perfekt, so repariert man also Objekte. Wenn Sie also scrollen und prototypisieren, welche Verbindungen brauchen wir von hier aus? Wir brauchen eine Verbindung, um uns zurück zur Restaurantseite hier zu bringen. Und wir brauchen eine, die uns zur Warenkorbseite bringt oder die Bestellseite tatsächlich eine dieser Karten verbindet , um auch auf diese Bestellseite zu gelangen. Jetzt, da ich denke, dass ein Button hier schön auf unserer Menüseite wäre . So ähnlich dem , das wir auf unserer Bestellhistorie-Seite haben. Anstatt also eine neue Bestellung zu starten, können sie zu ihrem Einkaufswagen gehen oder die Bestellungen abschließen. Wechseln wir also zurück zur Registerkarte „Design“. Und wieder ist der große Teil beim Prototyping, dass Sie beim Durchlaufen des Prototyps erkennen bestimmte Elemente der Benutzererfahrung erkennen, die Ihnen fehlen. Auf diese Weise können Sie diese Elemente kopieren oder diese Elemente in Ihren Entwürfen erstellen diese Elemente in Ihren Entwürfen während Sie das Prototyping durchlaufen. Also werden wir diese beiden Ebenen dieses Rechteck kopieren , das ist ein Farbverlauf hier und die Schaltfläche mit Befehl C und kehren zur Menüseite zurück und kopieren diese oder fügen sie hier ein. Da dies außerhalb unseres Aussichtshafens hier drüben liegt, können wir es nicht wirklich sehen. Wir wollen also weitermachen und dies über diese Linie nach rechts bringen , wenn es diese Linie berührt. Und wir werden fortfahren und eine feste Position einnehmen, wenn wir für beide scrollen, damit sie sich auf diese Weise nicht bewegen. Ich denke, das sieht ziemlich gut aus. Anstatt zu starten, sollte dies statt einer neuen Bestellung sagen, statt einer neuen Bestellung sagen, gehen Sie in den Einkaufswagen oder gehen Sie zur Bestellung. Da sind wir los. Damit Sie fortfahren und dieses Quartal oder eines Jahres drücken können, um zur selben Seite zu gelangen. Stellen wir diese Verbindungen mit dem Button hier unten und einer der Karten hier drüben her. Um das zu tun, gehen wir hier zur Restaurantoption wechseln durch zwei Prototyping. Denken Sie daran, dass Sie anstelle dieser Interaktion eine andere Art von Interaktion erstellen können , nämlich diese Interaktion zu erzeugen. Und ganz oben, anstatt zu wechseln, können Sie Vorherige Zeichenfläche ausführen , die dasselbe tun wird. Dadurch wird der Benutzer zurück zur vorherigen Zeichenfläche gebracht , von der er stammt. Wenn sie in diesem Fall diese Taste drücken und Restaurant gedrückt haben, gelangen sie zurück zu dieser Seite. Anstatt also eine Verbindung zu dieser Seite herzustellen, können Sie dies auch tun. Das ist super cool. Stellen Sie auch eine Verbindung zwischen unseren Karten zur Bestellseite oder einem Teppich her. Und hier drüben und die Schaltfläche „ Bestellen“ hier drüben, klicke hier auf die Warenkorb-Button , ziehe die Verbindung. Und ich lasse alles so wie hier drüben. Für die Go-to-Bestellseite. Ich mache das Gleiche. Jetzt sollten unsere Verbindungen für diese Seite jetzt abgeschlossen sein. Siehst du, Perfekt. Das ist ziemlich gut. Kommen wir in der nächsten Vorlesung zurück, um weiterhin weitere Verbindungen herzustellen. 82. Creating erstellen: Mit diesen Verbindungen, die zwischen dem Menü und der Bestellseite erstellt wurden , jetzt unvollständig oder Bestellseite und den Verbindungen im Prototypmodus. Gehen wir weiter und klicken Sie auf das zurück zum Menü und klicken Sie hier auf diese Schaltfläche, um eine Verbindung herzustellen. Und wir werden fortfahren und auf die vorherige Zeichenfläche klicken. Und während wir hier sind, warum verbindest du nicht unseren Menü-Button hier mit dem Menü-Schrägstrich hier oben. Machen Sie weiter und minimieren Sie das, damit wir es hier sehen können. Und wir werden hier einen Übergang machen. Und wir werden es tun, anstatt uns aufzulösen, werden wir nach oben rutschen. Also gleitet es vom Bildschirm nach oben. Nachdem wir diese Verbindung hergestellt haben, kann ich natürlich die gleiche Verbindung zwischen unserer Menüschaltfläche auf dieser Seite und dem Menü hier oben hinzufügen unserer Menüschaltfläche auf dieser Seite . Aber eine Sache, die wir tun können, weil wir die gleiche Verbindung zwischen dieser Schaltfläche und derselben Seite herstellen die gleiche Verbindung zwischen , ist, dass wir tatsächlich eine Komponente aus diesem Menüsymbol erstellen . Seitdem haben wir es auch an mehreren Orten benutzt. Und dann erstelle die Verbindung nur einmal und erledige damit und alle anderen Seiten. Um das zu tun, gehen wir zurück zu unserer Registerkarte „Design“. Kopieren wir hier einen der Menüschaltflächen in unsere Komponenten. Wir fahren fort und drücken Command K das zu einer Komponente zu machen. Und ich mochte den Namen so wie er ist, Hamburger-Menüsymbol. Und jetzt hier drüben werden wir weitermachen und jetzt ziehen wir dieses Hamburger-Menüsymbol hierher. Und lege es einfach auf den anderen , den wir haben. Und ich kopiere zuerst diese und gehe dann zurück zu den Ebenen und lösche diese andere darunter liegende Gruppe für die andere, für die eine, die keine Instanz ist. Und lasst uns das Gleiche für unsere Bestellseite tun. Lassen Sie uns einfach das löschen und auf die gesamte Zeichenfläche klicken und auf Befehl V drücken. Gleiches für Bestellfortschrittsseite Befehl V, weil wir das jetzt gelöscht haben, die Verbindung, die wir beendet hatten es ist jetzt weg. Aber was wir jetzt tun können, ist zu unserer Komponente zu gehen, zum Prototyp zurückzukehren und diesen Button oder diese Komponente mit dieser Profilseite zu verbinden . Wir lassen die Optionen, die nach oben rutschen, - und aussteigen, und 0,4 Sekunden. Und was jetzt passieren wird, ist überall, wo wir diese Schaltfläche verwenden , diese Verbindung zwischen der unteren und dieser Menüseite haben . Mir ist gerade aufgefallen, dass ich die Instanz nicht richtig in meine Hauptseite kopiert habe. Also werde ich das hier löschen und einen von hier auf unsere Hauptseite kopieren, also ist es die richtige. Wenn Sie nun tatsächlich auf jede dieser Menüschaltflächen klicken , wird angezeigt, dass die Verbindung von der von uns erstellten Komponentenverbindung kopiert wurde . Fahren Sie fort und bewegen Sie das einfach mit meiner anderen Schließen-Schaltfläche hierher und klicken Sie dann auf die Hauptseite und klicken Sie auf die Desktop-Vorschau. Ich kann von hier aus zur Speisekarte gehen. Wenn ich auf die Bestellseite klicke, kannst du von dort aus zur Verbindung gehen. Dasselbe von der Bestellfortschrittsseite , was großartig ist. So können Sie tatsächlich Komponenten verwenden , um eine Verbindung herzustellen und alle Ihre Instanzen diese Interaktion in Ihren Entwürfen kopieren oder übertragen zu lassen Ihre Instanzen diese Interaktion in Ihren Entwürfen kopieren oder . Lassen Sie uns nun die Bestellseite und die Verbindungen hier vervollständigen . Wir möchten fortfahren und den Polizeibefehl mit der Auftragsfortschrittsseite verbinden . Für den Übergang werden wir leicht nach links gehen. Behalten Sie alles andere wie auf unserer Auftragsfortschrittsseite. Wir werden fortfahren und auf diese Notiz klicken und die vorherige Zeichenflächenaktion erstellen. Das sind also die Verbindungen für unsere Bestellseite. Kommen wir in der nächsten Vorlesung zurück, um an unserer Auftragsfortschrittsseite zu arbeiten und zu erfahren, wie wir Overlays mit Prototypen öffnen können . 83. Overlays erstellen: Ich denke, es ist an der Zeit , das Overlay auszuprobieren , denn auf unserer Bestellfortschrittsseite hier , wie ich in den vorherigen Vorlesungen erwähnt habe möchten wir, wie ich in den vorherigen Vorlesungen erwähnt habe, eine Verbindung zwischen unserer Bearbeitungsreihenfolge herstellen zwischen unserer Bearbeitungsreihenfolge , denn auf unserer Bestellfortschrittsseite hier möchten wir, wie ich in den vorherigen Vorlesungen erwähnt habe, eine Verbindung zwischen unserer Bearbeitungsreihenfolge herstellen hier und dieses UI-Aktionsblatt hier drüben. Um das zu tun. Anstatt dies als separate Seite öffnen zu lassen, wäre das nicht richtig. Was wir wollten, ist, dass wir als Overlay oben auf dieser Seite erscheinen . Dazu können wir einfach eine Verbindung in unserem Prototyp-Tab zwischen unserer Bearbeitungsreihenfolge und unserem Aktionsblatt hier drüben herstellen. Aber eine Sache, die Sie vielleicht bemerken, ist, dass wenn Sie versuchen, eine Verbindung herzustellen, dies nicht funktioniert, da unser Aktionsblatt tatsächlich anstelle unserer Pasteboard ist und sich dies nicht funktioniert, da unser Aktionsblatt tatsächlich anstelle unserer Pasteboard ist tatsächlich anstelle unserer Pasteboard nicht in einer Kunsttafel befindet. Jedes Mal, wenn Sie eine Verbindung herstellen möchten, benötigen Sie eine Kunsttafel um dieses Objekt herum. Um das zu beheben, gehen wir zurück zu unserem Design-Tab und drücken Sie. Zeichnen Sie eine Kunsttafel um dieses Aktionsblatt. Wir werden fortfahren und die Füllung entfernen , weil wir nicht danach fühlen wollen. Ich verlasse die Kunsttafel und stelle einfach sicher, dass unsere Action-Blätter hier eine längere Zeichenfläche zentriert haben. Ich denke, das ist ziemlich gut hier. Lassen Sie uns das umbenennen oder bearbeiten Sie das Aktionsblatt für die Reihenfolge. Und jetzt können wir diese Verbindung im Prototyp-Modus zwischen dieser Bearbeitungsreihenfolge und unserem Actionsheet-Art-Board herstellen. Aber anstatt zu wechseln, klicken wir auf Overlay. Und so wie Sie die Zeile hier sehen können, sie irgendwie in eine gestrichelte Linie geändert , um dies als Overlay und nicht als Übergang anzuzeigen. Die Optionen hier sind ziemlich gleich. Es fragt dich, woher willst du animieren? Und normalerweise werden Aktionsblätter vom Ende der Seite nach oben animiert. Und was dann passieren wird, ist, dass du dieses kleine Pop-up hier drüben bekommst , wo es weitergeht und dich fragt, wo soll das Overlay tatsächlich auftauchen , damit ich tatsächlich weitermachen und wählen kann. Wir sind genau auf meiner Seite. Will ich, dass das auftaucht? Will ich, dass es in der Mitte steht, aber ich wollte ganz oben sein oder ich möchte, dass es ganz unten ist. Ich kann das so bewegen, wie ich es möchte. Normalerweise haben wir dies unten und wie Sie sehen können, wird es diese Art von Overlay-Effekt erzeugen. Es wird mir also zeigen, wie das überhaupt aussehen würde , wenn es auf meiner Seite aufgeht, ich denke hier ist perfekt. Jetzt erhalten Sie diese Verbindung standardmäßig hier, die Sie oben zur vorherigen Zeichenfläche bringen. Wenn Sie also auf eine beliebige Stelle im Aktionsblatt klicken, werden Sie im Wesentlichen zur vorherigen Zeichenfläche geführt, was bedeutet, dass wir dieses Overlay schließen. Wir können dieses Overlay testen, indem wir eine Vorschau hier drüben sehen. Und mach weiter und klicke auf diese Seite. Wir springen also direkt zu dieser Seite, indem wir auf Reihenfolge bearbeiten klicken Aktionsblatt wird angezeigt und auf eine beliebige Stelle klicken. Wir werden das abweisen. Du klickst irgendwo draußen. Es wird auch dieses Aktionsblatt abweisen. Wenn Sie also an dieser Stelle weitere Verbindungen zuweisen, die Sie möchten. Wenn Sie also erstellen möchten, sagen wir eine Seite, auf der sie ihre Bestellung stornieren oder sich an das Restaurant wenden können. Das kannst du auch machen. Aber im Wesentlichen erstellen Sie auf diese Weise Overlays für Ihre Designs. Dies ist eine coole Möglichkeit, Art-Boards übereinander zu stellen, anstatt zwischen ihnen zu wechseln. Jetzt kommt es in der nächsten Vorlesung, um die automatische Animation im Prototyping zu erforschen . 84. Verwendung von Auto-Animate: Um Ihnen zu zeigen, wie Auto Animate im Prototyp funktioniert. Weil ich denke, es ist super cool und es kann in komplexeren UIs wirklich nützlich sein. Was ich tun möchte, ist diese Bestellfortschrittsseite zu duplizieren und einen weiteren Status dieser Bestellfortschrittsseite zu erstellen. Im Wesentlichen können wir eine weitere Phase haben, in der der Fortschritt dieser Bestellung geliefert werden könnte oder vielleicht auf dem Weg zum Kunden. Also machen wir weiter und nehmen einfach zwei kleine Änderungen vor und sehen, wie das automatische Animieren funktioniert. Und um das zu tun, werde ich das Aktionsblatt einfach hierher schieben. Gehen Sie weiter und klicken Sie auf meine Bestellfortschrittsseite, wechseln Sie zur Registerkarte Design und drücken Sie Befehl D. Was ich auf dieser Seite möchte, ist, den Kreis dorthin zu bewegen, näher geliefert mit Shift und die Pfeiltasten nach rechts. Und anstatt zu sagen, dass Ihre Bestellung vom Restaurant vorbereitet wird, oder wir werden dies so zu sagen, dass Ihre Bestellung vom Restaurant vorbereitet wird, oder wir werden ändern, dass Ihre Bestellung Ihnen von Sam zugestellt wird . Geh weiter und fahre da raus. Jetzt, den Rest der Dinge hier, wollen wir weitermachen und es genauso halten wie auf unserem Wasser und unserer Auftragsfortschrittsseite. Lassen Sie uns fortfahren und eine Verbindung zwischen der RVU-Reihenfolge herstellen. Fahren Sie fort und klicken Sie hier auf den Knoten und machen Sie es oben. Gehen Sie weiter und gehen Sie zur Vorherigen Zeichenfläche. Das Menü ist bereits verbunden , da es sich um eine Komponente handelt. Und zwei Verbindungen, die wir hier erstellen möchten , besteht darin eine Verbindung zwischen der Adresse hier zu unserer Standortseite hier oben herzustellen. Und anstatt Overlay zu wechseln wollte, wollte ich nach oben rutschen. Aber das Coole bei Prototypen, wenn Sie die gleiche Verbindung zwischen denselben Objekten auf verschiedenen Seiten haben , können Sie bei dieser Verbindung auf Befehl C drücken. Klicken Sie auf Ihre andere Kunsttafel, in der Sie diese Schaltfläche haben , und fügen Sie diese Verbindung auch dort ein. Und füge die gleiche Verbindung zwischen all deinen Seiten ein. Jetzt ist diese Schaltfläche verbunden und alles, was wir tun müssen, ist, eine Verbindung zwischen dieser Auftragsfortschrittsseite Strich für den Auftragsfortschritt herzustellen. Wir werden weitermachen und das tatsächlich in Dash umbenennen , der geliefert wird. Lassen Sie uns nun fortfahren und eine Verbindung von dieser Seite zu dieser Seite erstellen . Anstatt zu tippen, machen wir weiter und machen Zeit. Und für die Verzögerung wählen wir hier fünf Sekunden. Natürlich ist es eine großartige Liefergeschwindigkeit , wenn das tatsächlich in Echtzeit war. Wir werden fortfahren und den Typ Auto animieren wählen. Das wird passieren, dass XD versucht, alle Elemente und Objekte auf dieser Seite zu animieren und Objekte auf dieser Seite Zu den Elementen auf dieser Seite. Wenn also dieselben Elemente vorhanden sind, versuchen wir, eine Animation zwischen diesen Elementen, Positionen oder Text usw. zu erstellen eine Animation zwischen diesen Elementen, . Da wir zum Beispiel diese Ellipse hierher bewegen , wird XD weitermachen und verstehen, dass es dieselbe Ellipse handelt, und wir werden sie zwischen diesen Seiten animieren. Also lasst uns weitermachen und unseren Prototyp hier schließen. Wählen Sie die Seite „Bestellfortschritt“ aus, und klicken Sie dann auf diese Vorschau. Und ich werde nach fünf Sekunden diese Seite automatisch zu dieser anderen Seite animieren , was großartig ist. Wie Sie sehen können, bewegte sich die Ellipse hierher und die Texte verblassten irgendwie zwischen diesen beiden verschiedenen Zuständen. Das ist ziemlich cool. Man kann damit wirklich herumspielen und Gegenstände bewegen. Eine Sache, die Sie beachten möchten , ist, dass Sie die automatischen Animations-Seiten nicht lesen möchten , die nichts miteinander zu tun haben. Weil es weitergeht und eine seltsam aussehende Animation kreiert seltsam aussehende Animation , die nicht wirklich realistisch ist. Sie möchten die Funktion zum automatischen Animieren zwischen ähnlichen Seiten verwenden , auf denen die meisten Elemente freigegeben werden. Deshalb sind diese beiden Seiten im Hinblick auf die Verwendung von auto animate sinnvoll . Aber lass mich nicht so sehr. Die Seiten zwischen dem Restaurant und der Menüseite. Das ist im Wesentlichen automatisch animieren und wie wir einige coole Animationen erstellen können indem XD die meiste Arbeit im Prototypmodus erledigt . Wenn wir in den nächsten Vorträgen wiederkommen und die Verbindungen hier oben abschließen. 85. Vollständig den Prototyp: Wir haben einen tollen Job gemacht. Also, um den Prototyp für unsere mobilen Mockups für gesunde Bisse zusammenzustellen . Lassen Sie mich fortfahren und unser Modell vervollständigen, indem Sie den Rest der Verbindungen auf unseren anderen Seiten erstellen. Lassen Sie uns hierher gehen, um zu sehen, was wir noch haben, beginnend von ganz oben links oder der Profilmenüseite. Wir werden jeden Knopf an der richtigen Stelle verknüpfen . Erstens ist mir aufgefallen, dass es hier einen Fehler gibt ein Logout-Login-Button tatsächlich ganz unten sein sollte. Lass uns weitermachen und das einfach ganz nach unten ziehen . Eine coole Sache an Stacks ist, dass Sie Ihre Tasten einfach austauschen können. Es wird direkt einrasten. Lass uns einfach weitermachen und sicherstellen, dass das am richtigen Ort ist. Also lasst uns jetzt weitermachen und jeden Button damit verknüpfen , wo sie hingehen sollen. Wir haben keine Kontoseite, auf der wir diesen Button für unsere Zahlung allein lassen werden . Wir wollten zur Zahlungsseite gehen Und wir werden fortfahren und das automatische Animate in Übergang ändern. Wir zeigen Ihnen die Animation, die Sie für unsere früheren Bestellungen nach links schieben sollen . Wir werden es mit unserer früheren Bestellseite verknüpfen. Und lass alles so wie es für die Adresse ist. Wir werden fortfahren und auf unsere Standortseite verlinken. Lassen Sie alles so wie es ist, und unser Logout führt uns zurück zur Anmeldeseite hier. Anstatt nach links zu schieben. Und wir werden fortfahren und für die Animation auflösen auf der Abmeldeseite für das x hier drüben wählen die Animation auflösen auf der Abmeldeseite , wir werden fortfahren und klicken. Ich würde weitermachen und wählen. Anstatt zu wechseln, werden wir Previous Artboard machen. Also werden wir das Fenster schließen und dorthin zurückkehren, wo es herkommt. , Lassen Sie uns auf unserer Zahlungsseite den Zurück-Button verbinden um fortzufahren und zu klicken und zu tun. Geben Sie auch die vorherige Zeichenfläche ein, um eine Zahlungsseite hinzuzufügen. Wenn Sie diese Zahlungsseite zusammengestellt haben die als Aufgabe angegeben wurde, können Sie diese mit Ihrer Zahlungsdetailseite verknüpfen . Wenn nicht, können Sie das genauso belassen, wie es bei der Add-Card ist. Wir gehen weiter und gehen zu unserer Standortseite und verknüpfen unsere Schaltfläche „Fertig“ um hier eine Interaktion hinzuzufügen und Vorherige Zeichenfläche einzugeben. Das Gleiche gilt für diese Adresse hier drüben. Wir werden eine Interaktion und zu Previous Artboard hinzufügen . Alles andere sieht sauber aus. Und für unsere vergangene Bestellseite ist die einzige Verbindung, die wir hier herstellen möchten , die Zurück-Button hier oben. Also werden wir erneut tippen und Vorherige Zeichenfläche für unsere Anzeige machen. Wir wollten ins Restaurant Paste gehen sie können in den Restaurants stöbern und eine neue Bestellung beginnen. Wir lösen uns für die Animation auf und beginnen eine neue Bestellung. Wir machen auch das Gleiche. Gehen Sie zurück zu unserer Hauptseite wird sich auflösen, während sich die Animation auflöst. Lassen Sie uns eine Vorschau unseres Prototyps im Desktop-Modus anzeigen und sehen, ob ihm hier etwas fehlt. Also hier drüben drücken wir auf Login. Klicken Sie bei unserer Telefonbestätigung auf Weiter. Da wir nur drei Optionen haben, gibt es hier kein vertikales Scrollen. Wir können hier auf das Menü klicken , um das zu testen, schließen Sie das Menü. Lassen Sie uns fortfahren und klicken Sie auf diese erste Option, die Browserreihenfolge. Und ich würde sehen, dass wir hier schon ein Problem haben. Also werden wir fortfahren und sicherstellen, dass unsere Schaltfläche „ Zur Bestellung gehen vertikal an derselben Position bleibt. Wählen wir also die Taste aus und nehmen Sie beim Scrollen eine feste Position ein. Und das sollte das beheben. Da sind wir los. Wir können zur Bestellung oder zu Karten gehen , um zur Bestellseite zu gelangen. Von hier aus können wir auf die Adresse klicken , um die Adresse zu ändern, wenn Sie möchten, oder klicken Sie auf Fertig. Mal sehen. Ja, um Adresse zu speichern, funktioniert von hier aus zu viele Wörter, um an Ort und Stelle zu sein. Unsere Bestellung, Fortschritt der CR-Bestellung, und dann nach ein paar Sekunden sollte sie in einen anderen Zustand wechseln , was großartig ist. Verwenden der automatischen Animate. Das sollte zu perfekt funktionieren. Wir haben also keine Schaltflächen verknüpft oder neu anordnen. Lassen Sie uns weitermachen und das in den Typ auswählen. Vorherige Zeichenfläche. Das sollte auch funktionieren. Da sind wir los. Bestellung aufgeben funktioniert. Viele Wörter auch von hier aus. Wir haben keine Kontoseite. Die Zahlung funktioniert wie erwartet. Passbestellungen funktionieren wie erwartet. Das einzige, was wir tun müssen, ist, dass wir diese einfach sperren müssen, die Navigationsleiste und den Button hier drüben. Also lasst uns weitermachen und das hier drüben machen. Wählen wir hier die Schaltfläche aus, halten Sie die Umschalttaste gedrückt und wählen Sie das darunter liegende Rechteck aus. Führen Sie beim Scrollen eine feste Position ein. Und das Gleiche gilt für unsere Navigationsleiste und Statusleiste hier. Und stellen Sie sicher, dass wir diese beiden in unserem Ebenen-Panel ganz nach oben bringen . Wenn Sie bemerken, müssen wir unsere neue Start-Order ganz hier oben bringen unsere neue Start-Order ganz , damit sie sich in unserem Ansichtsfensterrahmen befindet. Da sind wir los. Das sollte sich Sorgen machen. Wir können eine neue Bestellung beginnen und auf die Restaurantseite beißen und diesen Vorgang noch einmal wiederholen. Schließlich, wenn Sie sich ausloggen und wir bringen uns hier zurück zu dieser Anmeldeseite. Da haben wir es also. Das ist unser Flow für unseren Prototyp. Wir haben einen wirklich gut aussehenden Prototyp zusammengestellt und werden in den folgenden Vorträgen wiederkommen , um ihn auf unserem eigenen Mobilgerät zu testen. Und dann lerne, wie wir diesen Prototyp mit anderen teilen können . 86. Mobile Device: In Ordnung, also haben wir unseren Prototyp zusammengestellt und in unserer Desktop-Vorschau getestet , und es sah ziemlich gut aus. Jetzt möchte ich Ihnen zeigen, wie Sie Ihre Prototypen auf Ihrem tatsächlichen Mobilgerät tatsächlich in der Vorschau anzeigen können . Wenn Sie hier rübergehen und auf die Gerätevorschau klicken, fordert XD Sie auf, Ihr iOS- oder Android-Gerät über ein USB-Kabel mit XD zu verbinden Ihr iOS- oder Android-Gerät über ein USB-Kabel mit XD , um eine Vorschau Ihrer Designs in in Echtzeit. Um dies zu tun, können Sie nun zu diesem Link gehen oder in Ihrem App Store oder Google Play Store Adobe XD suchen. Und ich werde jetzt schnell auf mein Handy wechseln, um dir zu zeigen, wie das funktioniert. Sobald Sie sich in Ihrem App Store oder Google Play Store befinden, suchen Sie nach Adobe XD. Dies sollte diejenige sein , nach der du suchst. Es ist der Adobe XD. Wir können Ihre Prototypen in der Vorschau anzeigen. Mach weiter und lade das herunter. Sobald es mit der Installation fertig ist, werden wir es öffnen. Jetzt kann Sie zu Benachrichtigungen und ähnlichem auffordern. Geh einfach weiter und überspringe diesen Schritt vorerst. Nein, Sie werden aufgefordert, sich innerhalb des Kontos anzumelden. Also möchte ich mit Adobe fortfahren und mich mit meinem Adobe-Konto anmelden. Sobald Sie angemeldet sind, werden Sie das Tutorial hier durchlaufen , in dem Sie erfahren können, wie Sie diese App verwenden können. Eine wichtige Sache ist zu beachten, dass Sie zu jedem Zeitpunkt dreifach tippen können , um auf das Menü zuzugreifen, während wir es beweisen oder modellieren. Während wir unseren Prototyp vorbereiten, können Sie dreifach klicken, um zum Menü zu gelangen. Das ist also eine Sache, die wir zur Kenntnis nehmen werden. Dann klicken wir weiter und klicken OK, sobald du hier bist, klicken wir auf diesen kleinen Tab namens Live Preview. Und dann hole ich mir mein USB-Kabel. Du machst das Gleiche. Verbinden Sie das mit Ihrem Laptop und schließen Sie dann Ihr Telefon an. Sobald es angeschlossen ist, wird x es automatisch in der App geöffnet, wie Sie sehen können, und es fordert uns hier auf, dass ich nicht gezeigt habe. Wir können dreimal tippen , um auf das Menü zuzugreifen. Ich geh weiter und klicke weg. Im Moment brachte es uns direkt zur Anmeldeseite für gesunde Bisse. Natürlich kann ich wie zuvor eine andere Seite auswählen und diese Seiten auf meinem Gerät sehen . Ich kann weitermachen und sogar Änderungen vornehmen. Zum Beispiel kann ich hier in XD zu meinem Design-Tab wechseln , Dinge bewegen und gleichzeitig sehen diese Live-Änderungen in unserer App passieren, was super cool ist, weil Sie können kleine Änderungen vornehmen und sehen wie sie auf einem tatsächlichen Gerät aussehen nicht nur auf einem Desktop. Dies gibt Ihnen wirklich die visuelle Darstellung dessen, was der Benutzer sehen und fühlen wird , während er diese mobile App verwendet. Da ist es für ein mobiles Gerät gedacht. Von hier aus können Sie mit Ihrem Prototyp interagieren. Wie du es normalerweise tust. Gehen Sie weiter zum Menü, durchsuchen Sie verschiedene Seiten, wie Sie es erwarten würden. Zwei Dinge, die Sie beachten müssen, ist, dass wenn Sie nach links und rechts scrollen, es weitergeht und Ihnen verschiedene Seiten zeigt. Sie könnten das also auch machen oder den eigentlichen Prototyp durchgehen , wie Sie es tun würden. Möglicherweise bemerken Sie hier einige der Schaltflächen und solche Dinge werden möglicherweise nicht richtig angezeigt. Wenn Sie diese Fragezeichenschaltfläche sehen, bedeutet dies normalerweise, dass das Symbol nicht richtig wichtig war oder hier richtig angezeigt Eines der anderen coolen Dinge ist, dass wenn Sie zufällig irgendwo klicken, XD zeigt Ihnen es oder hebt genau hervor, wo Sie klicken sollten, um hier mit dem Prototyp zu interagieren. Wenn ich also irgendwo außerhalb davon anklicke, wird es mir weitergehen und es mir zeigen. Sie können diese Bereiche nur antippen, um mit seinem Prototyp auf dieser speziellen Art Board zu interagieren seinem Prototyp auf , was super cool ist. Wenn ich dann fortfahre und dreifach auf das Display tippe, gib mir einige Optionen. Wir können weitermachen und dieses Grün als Bild ihres Lebens teilen . Es gibt ein paar andere Optionen um die Hotspots , über die wir gerade gesprochen haben, auszublenden oder die Website für Navigationen zu deaktivieren , damit Sie wischen können , um in diesem Prototyp zu navigieren . interagiere tatsächlich damit. Sie können mit diesen Optionen herumspielen oder einen beliebigen Punkt hinzufügen. Beenden Sie einfach den Prototyp. So können Sie Ihren Prototyp auf einem tatsächlichen Gerät in der Vorschau anzeigen . Kommen wir in der nächsten Vorlesung zurück, um zu erfahren, wie wir diesen Prototyp tatsächlich mit anderen teilen können . So können sie es auch in der Vorschau anzeigen. 87. Prototypen teilen: Wir haben diesen großartigen interaktiven Prototyp erstellt und damit funktioniert er hervorragend. Setzen Sie sich auf unsere Desktop-Vorschau und auch unsere Mobilgeräte. Wie teilen wir diesen Prototyp mit jemand anderem? Sie können auch erkunden und sehen, wie dieses Produkt funktioniert, egal ob es sich um einen Kunden oder ein Teammitglied handelt. Wie teilen wir diesen Prototyp tatsächlich mit ihnen? Nun, es ist eigentlich super einfach. Gehe zum Tab „Teilen“. Und von hier drüben, wenn Sie hier einfach einen Link für Ihre Etage erstellen. Da wir also bereits diesen Flow haben, den wir durch Drücken von Link erstellen erstellt haben, tragen wir hier nicht nur die Designs und die Kunsttafeln, sondern auch diese Interaktivität zwischen allen die Seiten , die wir erstellt haben. Sobald dieser Link generiert wurde, kopiere ich diesen Link in Ihren Browser, von wo aus Sie diese URL eingeben können. Und jetzt funktioniert dieses Mal, wie Sie sehen können, jetzt als Prototyp, ähnlich wie bei unserer Desktop-Vorschau. Wenn Sie irgendwo draußen tippen, wird uns genau angezeigt, wo sich dieser Hotspot befindet, wo wir unseren Prototyp nutzen und mit ihm interagieren können. Das ist super cool, ist genau das, was wir wollen, um mit jemandem teilen zu können. Und sie können immer noch Kommentare hinterlassen, wie sie es nur bei den Designern selbst tun würden. Aber jetzt ist dieses Design interaktiv und der Prototyp ist auch über diesen Link verfügbar. Denken Sie daran, wir haben jetzt ein Fluorid hergestellt. Dies ist also der Flow für Benutzer , die neu in der App sind. Aber wir können auch einen weiteren Flow erstellen, zum Beispiel für einen Benutzer, der bereits bei der App angemeldet ist und die ersten Anmeldeseiten nicht durchlaufen muss . In der nächsten Vorlesung werden wir untersuchen, wie wir einen weiteren Flow erstellen können. Bevor wir das tun, möchte ich jedoch auch erwähnen dass Sie diesen Link vollständig mit jemandem teilen können , der einen Browser auf Ihrem Mobilgerät verwendet und diese App tatsächlich auf Ihrem Gerät in der Vorschau anzeigen kann . Jetzt sind sie möglicherweise nicht so gut wie der Adobe XD-App auf Ihrem Telefon oder auf dem Telefon des Kunden. Aber es wird in Bezug auf die Interaktivität und das Öffnen der verschiedenen Links und Dinge sehr nahe dran in Bezug auf die Interaktivität und das Öffnen der verschiedenen Links und sein, indem die verschiedenen Verbindungen sehen, die wir hergestellt haben und so. So teilen Sie Ihren Prototyp also mit jemand anderem. Und wir werden die nächste Vorlesung zurückkommen und einen neuen Flow für unseren Prototyp schaffen. 88. Mehrere Flows: Wir haben gelernt, wie man einen Flow im Prototyp erstellt. Im Wesentlichen ermöglicht uns ein Flow, auszuwählen , wo unsere Prototypen beginnen und wo sie enden. Dieser Stromfluss, der standardmäßig nach einem benannt ist. Benutzer durchläuft den Begrüßungsbildschirm, geht zur Anmeldeseite und so weiter. Nehmen wir an, wir möchten einen weiteren Flow für einen Benutzer erstellen , der bereits angemeldet ist , und wir möchten, dass er direkt zur Hauptseite geht. Wie machen wir das? Gehen wir zurück zu unserer Prototyp-Seite und wir klicken auf diese Hauptseite und klicken auf dieses kleine Home-Icon direkt neben der Hauptseite. Jetzt haben wir einen weiteren Flow erstellt Von hier aus können wir tatsächlich weitermachen und wählen, wo unser Ausgangspunkt in diesem neuen Flow sein wird. Und wenn Sie eine Vorschau auf diesen Flow anzeigen möchten, können wir fortfahren und auf den Flow klicken. Und wir können den Flow umbenennen. Anstatt also zu float, könnten wir angemeldete Benutzer machen. Wir können diesen Flow auf neue Benutzer ändern. Jetzt können wir bei unseren Anmeldebenutzern eine Vorschau anzeigen, wie das aussehen würde. Wie Sie sehen können, sind wir im Gegensatz zum neuen Benutzerfluss direkt ins Restaurant gegangen . Wenn Sie auf klicken, führt uns der neue Benutzerfluss durch den Ablauf der Anmeldung und all diese Seiten, bevor wir zur Hauptseite gelangen. Jetzt können wir sogar weitermachen und diesen spezifischen Fluss mit jemand anderem teilen . die Anmeldebenutzer auswählen, können Sie anstelle des neuen Benutzerfluss-Links einen Link erstellen und diesen Link freigeben . Eine Sache, die ich beachten möchte, ist, dass Sie möglicherweise auf nur einen Flow beschränkt sind, wenn Sie das aktualisierte Konto nicht haben . So können Sie zu den verwalteten Links hier gehen und jeden anderen Flow löschen und sicherstellen, dass Sie nur eine Etage haben , um ihn teilen oder erstellen zu können Link auf Adobe XD dafür. So können Sie mehrere Stockwerke für Ihren Prototyp erstellen , je nachdem, welche Phase die Benutzer hinzufügen oder um welche Art von Benutzer sie sich befinden und so weiter und so weiter. Es ist ziemlich cool , dass wir diese mehreren Flows erstellen können . Auf diese Weise können wir unseren Kunden , die Zugang zu bestimmten verschiedenen Flows haben, bereitstellen. Was der Unterschied zwischen den einzelnen Bundesstaaten sein könnte. Da unser Prototyp und Markups während des Ansturms fertiggestellt sind, fehlen uns nur ein paar Dinge. Hier sind ein paar Nachbesserungen , zu denen ich versprochen habe, dass wir zurückkehren werden , und das ist eine kleine Animation auf unseren Auftragsfortschrittsseiten. Warum kommen wir also nicht in der nächsten Vorlesung zurück und verwenden ein Plugin namens Lottie, um diese Animationen hinzuzufügen. 89. Lottie Animation: Es sind unsere Prototypen, die großartig aussehen. Ich möchte fortfahren und der Reihenfolge der Fortschrittsseite eine kleine Animation hinzufügen . Wenn du dich erinnerst. Für die Bestellfortschrittsseite habe ich hier ein wenig Platz gelassen, um dem Benutzer zu zeigen , in welchem Stadium er Vorbereitungen bestellt werden. Das Hinzufügen einer kleinen Animation zu Ihrem Design kann die Qualität der Benutzererfahrung und des gesamten Designs wirklich verbessern . Und eine großartige Ressource dafür ist das Tool, das hier Lottie-Dateien genannt wird. Sie können auf Lobby files.com gehen, die so buchstabiert ist. Sobald du dort bist, melden wir uns für ein Konto an. Sobald du angemeldet bist, machen wir weiter und fahren hier fort. Ich kann Designer auswählen. Lasst uns los. Jetzt sind wir hier eingeloggt. Und jetzt gehen wir weiter und gehen hier zum Plugins-Tab. Wir werden ein Plugin hinzufügen und nach Lottie suchen. Sobald Sie suchen, dass der erste Lori-Dateien weitergeben sollte , wir XD, installieren Sie das. Könnte hier eine Sekunde dauern. Sobald es installiert ist, können Sie auf Open XD klicken und es von hier aus verwenden. Jetzt bitten wir Sie, sich über Ihren Browser anzumelden. Also mach weiter und klicke auf Login. Und sobald Sie darauf klicken, werden Sie aufgefordert, Zugriff auf Ihre Dateien zu gewähren. Um fortzufahren und auf Zugriff gewähren zu klicken. Da sind wir los. Wir sind bei unserem Adobe XD-Plug-In angemeldet . Was wir hier drin sind, klicken wir weiter und klicken auf die Suche und Suche nach Kochen. Beim zweiten Gedanken werde ich das hier benutzen oder das Essen hier drüben. Also lasst uns fortfahren und auf Bestellfortschritt klicken und auf eine kleine Animation klicken. Jetzt haben einige der Animationen einen weißen Hintergrund. Also dieser, den ich gefunden habe, hat es nicht. Also es, was ich mag. Lasst uns weitermachen und das hier hineinlegen. Wir wollen es als Latae einfügen, was wir weitermachen und spielbar sein werden. Willst du es kleiner machen , damit es hier drin passt. Jetzt können wir eine Vorschau anzeigen, um zu sehen wie es in nur einer Sekunde aussieht. Da es sich um ein interaktives Medium handelt, können Sie sich entscheiden, ob es sich um eine Loop-Wiedergabe handelt, was wir wollen. Da wollten wir immer wieder weiterspielen und wir wollten automatisch spielen. Und dann können wir sogar die Wiedergabe bearbeiten und Verzögerungen oder Trigger oder ähnliches hinzufügen . Aber das wollen wir nicht wirklich ändern. Gehen wir also weiter und gehen Sie zurück zu unserem Design und wählen Sie automatisch spielen, und dann machen Sie eine Vorschau dieser Seite auf unserer Ich gehe weiter und gehe einfach zurück und schaue dir diese Seite auf unserem Desktop an vorschau. Ich denke, das sieht ziemlich cool aus. Wir lassen es nur ein bisschen kleiner aussehen damit es nicht mit den anderen Teilen unserer Designs interagiert oder überlappt. Also denke ich, das sieht besser aus, also ja, das sieht viel besser aus. Perfekt. Also überlasse ich Ihnen den Bestellfortschritt, der geliefert wird , um dies zu tun. Verwenden Sie Lottie, um eine Animation für Ihre Lieferseite zu finden , und dann machen wir das zusammen in der nächsten Vortrag. 90. Eine Delivery hinzufügen: Mal sehen, ob wir eine Animation erstellen können, die wir auch auf unserer ausgelieferten Seite verwenden können. Minimieren Sie dies und klicken Sie zurück zu Lottie-Dateien. Und ich gehe weiter und klicke zurück und lass uns nach der Lieferung suchen. Mal sehen, was da oben kommt. Das sieht cool aus. Eigentlich. Lesen Sie auch die Version hier drüben. Also lasst uns fortfahren und diesen hier auswählen und als Lawdy in unsere zugestellte Seite einfügen, um es ein bisschen kleiner zu machen. Und lege es in die Mitte unseres Bildschirms hier drüben. Stellen Sie sicher, dass es zentriert ist. Perfekt. Jetzt. Jetzt lasst uns weitermachen und das schließen. Und jetzt ist das Problem hier mit der Desktop-Vorschau dass wir, wenn wir diese Animation durchführen, nicht nach fünf Sekunden wie zuvor zu dieser anderen Seite gelangen . Eine Sache, die ich auf der Registerkarte „Prototyp“ tun werde, ist, dass ich dieses Mal ändern werde, um stattdessen zu tippen, damit wir uns zu dieser anderen Seite bringen, wenn wir auf die Seite tippen. Wie bei den Animationen zu dieser Zeit funktioniert die Funktion in der Prototyp-Interaktion Funktion in der Prototyp-Interaktion nicht so gut. Machen Sie weiter und testen Sie das aus. Jetzt haben wir diese Seite und wenn Sie dann klicken, haben wir die Seite für die Lieferung. Ich denke, das sieht ziemlich gut aus. Wie Sie sehen können, peppt die Animation unsere Entwürfe wirklich auf. Und mir gefällt wirklich, was wir bisher gemacht haben. Eine Sache, die mir aufgefallen ist , ist, dass unsere Ansichtsreihenfolge hier nicht so gut funktioniert , weil sie uns zurück zur Bestellseite bringen soll , aber nicht. Anstatt also auf Vorherige Zeichenfläche zu tippen, senden wir es tatsächlich an die Auftragskunstafel. Anstatt uns aufzulösen, werden wir eine geringfügige Rate erreichen. Testen wir das einfach. Okay, das sieht richtig aus. Jetzt funktioniert es genau wie erwartet. Gehen Sie gerne Ihre Entwürfe und Ihre Prototypen durch. Und wenn es kleine Änderungen gibt, die Sie unterwegs vornehmen müssen, nehmen Sie diese bitte vor und stellen Sie sicher, dass Ihr Design poliert ist, bevor Sie es an einen Kunden oder einen Kollegen senden . Da haben wir es. So kannst du Lottie-Animationen verwenden, um coole kleine Animationen innerhalb deiner Prototypen mit gefälschter Bombe zu erstellen coole kleine Animationen innerhalb . Eine weitere coole Sache, die Sie tun können, ist Videos zu importieren und Videos zu verwenden , die denen, wie wir diese Animationen in Ihren Designs verwenden. Ich habe als kleine Übung ein Video in die Ressourcen für dieses Projekt eingefügt. Ich möchte, dass Sie dieses Video als Hintergrund auf dieser Anmeldeseite verwenden . Und dann mach weiter und lege auch ein Overlay darauf, damit es sich hier nicht mit unserem Vordergrund verbindet, nämlich die Felder, die Knöpfe und das Logo. Also mach weiter und nimm dir eine Sekunde, um das zu tun. Und dann in der nächsten Vorlesung fügen wir dieses Video auch zusammen ein. 91. Videos hinzufügen: Ordnung, also machen wir weiter und fügen ein Video in unsere Anmeldeseite ein. In den Ressourcen oder den App-Assets für dieses Projekt sollten Sie eine Login-Dash-Seite, Dash Video Punkt mp4, finden . Dieses Video wurde mit freundlicher Genehmigung von Pexels.com heruntergeladen. Sie bieten großartige Ressourcen. Jetzt muss ich pixels.com Anerkennung für die Bereitstellung dieses Videos geben . Sie haben Unmengen von Videos , die Sie nach Ihren Projekten suchen können , und sie können völlig kostenlos verwendet werden , was großartig ist. Also lasse ich Sie diese Ressource erkunden. In der Zwischenzeit lernen wir jedoch, wie wir dieses Video in unsere Anmeldeseite einfügen können . Genau wie bei Bildern ist das Importieren von Videos so einfach wie das Ziehen eines Videos in Ihre XD-Datei. Beachten Sie nun , dass Ihr Video maximal 15 Megabyte groß sein muss. Daher müssen Sie Ihre Videos möglicherweise komprimieren wenn sie etwas größer sind. Wie Sie sehen können, ist dieser bereits riesig, also müssen Sie vielleicht weitermachen und zunächst sicherstellen, dass wir uns auf unserer Registerkarte Design befinden und lassen Sie uns weitermachen und das Video verkleinern, um es an unseren Rahmen anzupassen hier drüben und dann weiter und zentriere es entlang. Stellen Sie sicher, dass es die Höhe vollständig abdeckt. Wir möchten dieses Video ganz unten auf der Seite platzieren . Das ist wahrscheinlich ein guter Zeitpunkt, um unser Healthy Bites Logo zu wechseln . Gehen Sie in die Bibliothek und stellen Sie dies als unsere Akzentfarbe ein. Und dasselbe gilt für unser vergessenes Passwort hier. Wir wollen nicht, dass es verschmilzt und wir wollen diesen Kontrast zwischen Hintergrund und Vordergrund schaffen . Wenn du das jetzt spielst, lass uns sehen, wie das in unserer Desktop-Vorschau aussehen würde . Und noch etwas, das wir weitermachen und das Spiel oben einrichten wollen , nämlich dieses Video abzuspielen. Wenn wir auf das Video tippen, wollten wir es automatisch abspielen. Ich möchte das anklicken. Und jetzt können Sie von hier aus das Video zuschneiden. Wir können es kürzer machen, wenn du willst. Wählen Sie genau, wie lang es sein soll. Und wir können weitermachen und wählen, ob wir es wiederholen möchten und ob das Audio abgespielt werden soll oder nicht. Also schalten wir es stumm. Wir können hier auch das Miniaturbild dafür auswählen. Wir wollen also die Wiedergabe wiederholen und können sogar testen, wie sie von hier aus aussehen wird. Oder wir können einfach unseren neuen Benutzerfluss abspielen und sehen, wie sich das entwickeln würde. Wunderschön. Ich finde es sieht toll aus. Jetzt ist es ein bisschen voll hier drin. Wenn Sie sich also für das Video entscheiden, empfehle ich, diese beiden Bilder der Futternäpfe herauszunehmen , damit wir sie loswerden und es hier ein bisschen sauberer machen können. Da haben wir's. Viel schöner und viel ordentlicher. Und wenn Sie dieser Seite ein Overlay hinzufügen möchten, können wir einfach eine rechteckige Ebene darüber erstellen , um die gesamte Kunsttafel abzudecken. Klicken Sie darauf und ändern Sie die Füllung in Schwarz. Entferne die Grenze und lege die Pace City nach Belieben fest. Aber wir wollen weitermachen und sicherstellen, dass wir diese Rechteckebene über das Video und unter alles andere bringen Rechteckebene über das . Und so können wir weitermachen und dies basierend darauf kontrollieren, wie dunkel das Overlay im Vergleich zum Video sein soll. In diesem Fall können wir sogar Ihre Statusleiste in Weiß ändern . Da haben wir's. Ich denke , das sieht viel besser aus. Da haben wir es also. So können wir mit Adobe XD Videos und Hintergründe hinzufügen . Damit ist unser Mobile-Design-Projekt abgeschlossen. Wir haben großartige Arbeit geleistet und werden in zukünftigen Vorlesungen wiederkommen , um auf der Website oder Zielseite für gesunde Häppchen zu arbeiten . 92. Landing Page Anforderungen: Oder wir haben mit unserer mobilen App großartige Arbeit geleistet und einen Prototyp zusammengestellt und gelernt, wie wir ihn mit unseren Teammitgliedern, Kollegen und Kunden teilen können und so weiter. In diesem Teil des Kurses werden wir lernen, wie wir tatsächlich eine Landingpage mit Adobe XD für denselben Kunden, gesunde Bisse, zusammenstellen können tatsächlich eine Landingpage mit Adobe XD für denselben Kunden, gesunde Bisse, zusammenstellen . In dieser Vorlesung werden wir schnell einige der Anforderungen erfüllen, schnell einige der die wir für diese Zielseite haben, sich im Wesentlichen um eine Website für dieses Unternehmen handelt , die es den Nutzern ermöglicht erfahren Sie mehr darüber, was dieses Unternehmen in einer Art einseitigen Website-Design macht. So können sie mehr über gesunde Bisse erfahren, bevor sie sich entscheiden, die App herunterzuladen und sich anzumelden und zu verwenden. Unsere Kunden haben uns also gebeten, vier Abschnitte für diese Zielseite zusammenzustellen . Der obere und der erste Abschnitt , den Sie heutzutage normalerweise auf Websites sehen, ist ein kleiner Header-Abschnitt , der normalerweise eine Art Bild oder Video im Hintergrund enthält Bild oder Video im Hintergrund oder eine Art Design mit einem Logo, mit einer Navigationsleiste, die es uns ermöglicht, zwischen verschiedenen Teilen der Zielseite zu wechseln verschiedenen Teilen der Zielseite und einem kleinen Firmen-Slogan, alle in den Ressourcen für die Vorlesung enthalten ist. Machen Sie sich also eine Sekunde Zeit, um diese Ressource herunterzuladen, die alle Assets enthält, die wir für unser Landingpage-Design benötigen. Wir wollen auch einen kleinen Download-Apps-Bereich. In diesem Abschnitt haben wir einen kleinen Screenshot der App mit Download-Badge für den App Store. Sie können darauf klicken, um die App auf ihr Gerät herunterzuladen. Und dann wollen sie auch, dass wir einige andere beliebte Restaurants als kleine Karten einbeziehen . In einem Restaurantbereich. Es wird einen kleinen Restaurantbereich haben in dem wir vielleicht drei oder vier ihrer Restaurants präsentieren und ihnen erlauben, alle Restaurants oder ungesunden Bytes in einer kleinen coolen Kartenansicht zu sehen . Und dann haben wir ganz am Ende ein kleines Kontaktformular mit Namen und einem E-Mail-Feld und einem kleinen Bild von ihrem Team. Ziemlich einfach, ziemlich einfach für die Zielseite von Section. Als wir also unser mobiles Design-Projekt starteten, haben wir, wie Sie sich erinnern, die gesamten Design-Assets der App heruntergeladen . Jetzt für dieses Webprojekt werden wir tatsächlich die Vorlage oder das Bootstrap-Plattform-Kit für XD verwenden . Wenn Sie hier zu diesem Link gehen oder einfach Bootstrap, Adobe XD, googeln , sollten Sie in der Lage sein, diese Seite zu finden , auf der Sie die Kinder von hier aus bekommen können. Von hier aus klicken wir weiter und klicken auf das Kit holen. Ich mach die Akte speichern. Und das sollte dieses XD-Bootstrap-Kit hier runterladen , dxdy. Sie können also fortfahren und doppelklicken, um dies mit Adobe XD zu öffnen. Sobald es geöffnet ist, können Sie diese Bootstrap-Framework-Assets hier finden . Sie haben bereits viele Dinge zusammengestellt , die wir auf unseren Websites verwenden werden, wie Karussells oder Kopfzeilen, Fußzeilen, Bildkarten usw. Wir werden in den zukünftigen Vorträgen wiederkommen um Assets aus diesem Framework in unsere Landing Page für gesunde Bisse zu verwenden . Bootstrap ist ein sehr beliebtes Framework, Sie Websites viel einfacher gestalten können , da viele der Komponenten bereits entwickelt wurden und Sie daher keine redundante Arbeit leisten müssen, wenn Sie es sind entwerfen. Dort verwenden wir Bootstrap in diesem Projekt. Kommen wir also in der nächsten Vorlesung zurück, um ein kleines Laib bei allen Arten von Drahtgittern zu skizzieren , richtig, mit einem XD selbst. Bevor wir weitermachen und das echte Ding entworfen haben. 93. Wireframing der Landing-Seite: Jetzt, da wir wissen, dass es Anforderungen für dieses Projekt gibt, und wir haben diese Bootstrap-XD-Datei heruntergeladen . Wir werden einen Low-Fidelity-Wireframe für unser Projekt zusammenstellen , richtig, mit einem XD selbst. Natürlich können Sie das Drahtmodell genau so skizzieren , wie wir es beim Design der mobilen App getan haben . Sie können diesen Prozess aber auch in XD selbst durchführen. Manche Leute finden dies vielleicht etwas einfacher, anstatt von Stift und Papier zu Digital zu wechseln. Lassen Sie uns das gemeinsam in dieser Vorlesung versuchen. Das Wichtigste zuerst: Ich gehe hier auf die Homepage. Und wir werden von hier drüben eine neue Webdatei erstellen . Und wir behalten es als 1920 bis 1080 bei, was normalerweise die Standardgröße für ein Webprojekt ist. Lasst uns also weitermachen und das öffnen und wir befinden uns bereits in einem neuen Projekt. Perfekt. Zuerst gehen wir weiter und klicken Sie hier ohne Titel, um den Namen von seiner Website in gesund zu ändern. Geh weiter und rette es. Da sind wir los. Jetzt haben wir die Datei umbenannt. Wir haben unser erstes Web-Art-Board hier drüben, was perfekt ist. Basierend auf unserer Projektanforderung wissen wir, dass wir hier vier Abschnitte auf unserer Website benötigen. Warum machen wir also nicht dieses Kunstbrett her, das wir lang genug haben , um vier Abschnitte zu passen. Wir wollten im Wesentlichen vier davon , dass sie in diese Landing Page passen können. Die Höhe hier können wir sehen, dass es 1080 ist, etwas, was wir tun können, was super cool ist. Und XD ist, dass wir weitermachen und entweder diese Höhe erhöhen können , indem wir Plus machen. Ich weiß es nicht, sagen wir zehn Pixel, die jetzt weitergehen und diese 1090 machen werden. Wir können weitermachen und tatsächlich auch Multiplikation machen. Was multiplizieren wir das mit vier? Und ich gebe uns genau die Länge des Projekts, das wir brauchen. Dies wird also unsere Landing Page mit vier Abschnitten darstellen . Brain ist natürlich nur eine lange Seite hier drüben. Wir werden fortfahren und ein Rechteck erstellen , das jeden Abschnitt darstellt. Warum erstellen wir hier nicht ein Rechteck und ändern es dann auf 1920 bis 1080, was hier die richtige Größe hat. Und wir werden weitermachen und einfach nach unten gehen. Lass uns weitermachen und das duplizieren. Bringen Sie einen runter, um unseren zweiten Abschnitt darzustellen. Noch ein Mal. Ein letztes Mal. Da sind wir los. Und wir können jetzt sogar die einzelnen Abschnitte an der Grenze hier sehen , die bei etwa 0,1 loswerden. Eine andere Sache, die ich tun werde, ist, dass ich ein Layout-Raster aktiviere. Und wir werden das ebenso belassen wie für 12 Spalten. Und das sieht ziemlich gut aus. Und Bootstrap verwendet tendenziell den ähnlichen Layouttyp für ihre Raster. Das einzige, was ich tun möchte, ist die Deckkraft dieses Layout-Rasters irgendwie niedrig zu bringen , sodass es kaum sichtbar ist. Gerade genug, damit wir es zum Laufen bringen können ohne dass es unser Design beeinträchtigt . Jetzt, da wir das haben, lasst uns das Drahtgitter zusammenstellen. Ich werde hier einige Male Rechtecke verwenden, um verschiedene Teile des Drahtgitters zusammenzustellen , die ich will. Und dann denk dran, wir werden das etwas später tatsächlich in ein Modell verwandeln . Aber jetzt machen wir weiter und erstellen ein kleines Rechteck um hier ein kleines Rechteck um diese Höhe und übernehmen die volle Breite. Das wird also unsere Navigationsleiste sein. Ich ziehe das ab, lege das ganz oben. Wir möchten, dass diese Navigationsleiste diesen Hauptknopf hier hat , den wir von dort aus vielleicht herunterladen können . Und wir werden das einfach hierher bringen. Ich verwende dort mein Layout-Raster , um alles zu verteilen. Und dann wollen wir noch ein paar andere Buttons für die verschiedenen Bereiche der App. Natürlich sind diese Schaltflächen vielleicht etwas kleiner als diese, aber das befindet sich in unserer Navigationsleiste und dort wird es hingehen. Wir werden hier ein Bild im Hintergrund haben. Und dann denke ich hier auf der rechten Seite darüber nach den Firmennamen hier zu setzen, gesunde Bisse, zusammen mit dem Slogan. Natürlich können Sie hier sogar einen Text hinzufügen, um zu erklären, was wir hier wollen. Also wie werden wir Firmennamen machen, raus da raus. Ich mache weiter und dupliziere das und mache Firmen-Slogan. Denken Sie daran, dass das nicht perfekt sein muss. Wir stellen das nur zusammen, damit wir wissen, was wohin gehen wird. Und dann haben wir die verschiedenen Knöpfe hier drüben. Also werden wir einen haben, der zu geht: Lassen Sie mich weitermachen und das zentrieren , das in die verschiedenen Restaurants geht, dann eines für sie, um uns zu kontaktieren, und dann eines für sie, um sie herunterladen zu können die App. So wird das Bild hier im Hintergrund haben. Die würden hier drüben gut aussehen. Und lasst uns weitermachen und diese beiden Ebenen hier drüben duplizieren. Dies wird also der Abschnitt sein , in den unsere App gehen wird. Also haben wir, wir werden die zentrale Zeile machen und Text zum Herunterladen machen. Und dann werden wir hier unten einen kleinen Knopf machen , um die App herunterzuladen etwas in dieser Richtung herunterzuladen. Und dann erstellen wir ein kleines Rechteck, um zu zeigen, wo unsere mobile App ein Gerät ist. Vorschau. Wir werden einen dieser Texte hier drüben duplizieren. Entferne diese Füllung von dort und mache einen Screenshot. Wissen Sie genau, was das ist. Und dann machen wir hier unten unseren Restaurantbereich. Wir werden hier drüben einen kleinen Titel machen, der besagt, dass beliebte Restaurants mit allen Karten hier drüben stehen. Für unsere Karte hier müssen wir das einfach ausstrecken. Bringen Sie das hier rüber und machen Sie vielleicht Restaurantnamen. Und mach noch ein, noch ein Rechteck für das Restaurantbild. Entfernen Sie die Füllung von hier und machen Sie das Restaurantbild. Da sind wir los. Während wir dies tun, möchte ich auch erwähnen, dass es Vorlagen gibt , die Sie für Wireframing in XD verwenden können. Wenn Sie ein wenig Google nach Wireframing-Kits oder Vorlagen für XD suchen, können Sie möglicherweise auch einige unbenutzte finden . Wir werden diese Art von Karte viermal duplizieren . Lasst uns weitermachen und alles hier auswählen. Gruppiere sie mit Command G, glaube ich. Sieht so aus, als ob dieser hier drüben nicht zur Gruppe hinzugefügt wurde. Gehen wir also weiter und bewegen uns in Rechteck 19 in diese Gruppe. Entfernen Sie jede Füllung. Auch hier werden wir Dinge so ausräumen , dass sie in unser Raster passen. So etwas würde gut aussehen. Und schließlich haben wir unseren Abschnitt „Kontakt“. Also werden wir weitermachen und das auf ein wenig Contact Us kopieren . SMS hier drüben. Daneben brauchen wir vielleicht das Image des Teams hier drüben. Das tun wir also, wenn wir von hier aus ein Bild machen. Image-Team wird unser Formular hier auf der linken Seite haben. Nehmen Sie Kontakt mit uns auf. Wir machen hier ein paar Textfelder. Entfernen Sie die Füllung hier, wird Name, Textfeld hier und E-Mail ausführen. Kleiner Button hier zum Einreichen. Das wird eine Art Form hier drüben sein. Neben dem Image des Teams. Mein Drahtgitter, wir werden all diese Rechtecke und Ebenen auswählen und einfach so sperren , und Ebenen auswählen und einfach so sperren damit sie sich nicht bewegen. Das. Ich kann weitermachen und dann all diese auswählen und sie zusammen und diese gruppieren und auch zusammenfassen. Ich denke, wir können das ein bisschen so bringen und das lassen und dieses ein bisschen mehr bringen. Sieht vielleicht besser aus. Also werden wir weitermachen und das einfach auf der Seite zentrieren. Stellen Sie sicher, dass alles andere irgendwie zentriert ist. Testen Sie irgendwie den Abstand von allem, was wir haben, und sehen Sie, wie das aussah. Wenn wir nun auf unsere Kunsttafel klicken und unser Layout-Raster wegnehmen , können Sie sehen, wie dieses Layout mit einem Drahtgitter aussehen würde oder wie diese Website auf dieser Grundlage aussehen würde Drahtgitter. Auch hier sollte dies eine Art Blaupause für Ihr Projekt sein . Dies soll uns nur eine Vorstellung davon geben, was hingehen soll, wohin, nicht genau wie die Dinge sein sollten oder welche Details die Farbe oder welche Schriften haben sollten. Dies ist einfach, um uns zu sagen , wohin die Dinge gehen sollen und was da sein sollte. wir nun eine Idee haben, diesen Drahtgitter zu verwenden, kommen wir in der nächsten Vorlesung zurück, um mit unserem Landing Page Design zu beginnen. 94. Navigation: Um unsere Landing Page zu gestalten , warum duplizieren wir diese Kunsttafel hier drüben, indem wir auf Befehl D klicken. Und dann werden wir weitermachen und alles drin loswerden . Also werden wir fortfahren und einfach alle diese Ebenen bis zu den Rechtecken für jeden Abschnitt auswählen . Für einen Abschnitt, den wir haben. Lasst uns fortfahren und klicken Sie auf Löschen. Wir werden dies verwenden und unsere Entwürfe tatsächlich hier platzieren. Wir werden das Drahtgitter auf dieser Seite verwenden , um das Markup hier tatsächlich zu generieren. Lassen Sie uns dieses Kunstbrett umbenennen, unsere Landing Page. Da sind wir los. Und dieses, unser Drahtgitter, lässt sich als Referenz beziehen. Das erste, was ich zusammenstellen wollte, ist die Navigationsleiste hier oben. Eine Sache, die ich merke, dass ich vermisse, ist , dass wir normalerweise in einer Navigationsleiste auch einen kleinen lokalen Schrägstrich des Unternehmens haben , der den Benutzer tatsächlich wieder an den Anfang der Seite oder zurück zu bringt der Startbildschirm. Das wollen wir in unserer Navigationsleiste. Gehen wir also weiter und wechseln zum Bootstrap-UI-Kit in XD. Und wenn Sie dies nicht heruntergeladen haben, vergewissern Sie sich, dass Sie die vorherigen Vorträge befolgen die vorherigen Vorträge um zu erfahren, wie Sie diese herunterladen können. Sobald Sie es heruntergeladen haben, sollten Sie in der Lage sein, hier unten eine Navigationsleiste zu finden, da Sie sie als Kunsttafel namens navbar sehen können, wonach wir suchen. Natürlich haben sie verschiedene Arten von Navigationsleisten, die wir verwenden können. Dieser hier drüben würde ausreichen. Lass uns weitermachen und es kopieren. Von hier aus. Wechseln Sie zurück zu unserer Website für gesunde Bisse und fügen Sie diese ein. Hier. Wurde hier eingeklebt. Also werden wir weitermachen und das einfach hier hochbringen. Da wir jetzt nur eine Seite oder hier haben , müssen wir das nicht wirklich zu einer Komponente machen. Lassen Sie uns also einfach weitermachen und dies so nutzen, wie es ist, dehnen Sie es über unser Projekt aus. Und statt 56 Höhe geben wir das als 70 Höhe an. Also ein bisschen größer. Lasst uns fortfahren und jetzt diese Links zentrieren und sie hier ganz nach rechts bewegen. Lassen Sie uns fortfahren und hier unser Layout-Raster aktivieren. Was ich tun möchte, ist, diese Quadranten, das Breiten- oder Layout-Raster und diesen Navbar-Text auszurichten , den wir tatsächlich durch gesunde Bisse ersetzen möchten . Da sind wir los. Jetzt haben wir die Ressourcen für dieses Projekt hier das Logo. Wir werden einen hier rausziehen. Und wir werden weitermachen und es einfach schaffen. Lasst uns das tun. Jetzt lasst uns weitermachen und die Proportionen sperren und die Breite 45 machen , 35. Denke, das wird besser aussehen. Genau hier passen wir das hinein und ziehen oder gesunder Bisse Text hier rüber. Das sieht gut aus. Denken Sie jetzt daran, dass wir für die Schriftarten und die Farben und Dinge wie diese später wiederkommen und diese anwenden werden. Im Moment werden wir uns darauf konzentrieren, die wichtigsten Dinge zusammen zu sein . Also hier drüben werden wir weitermachen und dieselben Restaurants anwenden , kontaktieren Sie uns und laden Sie die App herunter. Lassen Sie uns das hier löschen. In diesem werden wir Restaurants machen. Wir müssen also vorerst nicht wirklich den Typ oder den deaktivierten Typ löschen . Wir werden weitermachen und das einfach zweimal duplizieren und uns kontaktieren. Und jetzt ist eine Sache, dass dies tatsächlich eine gestapelte Sache ist, eine coole Sache ist, dass Sie den Abstand zwischen diesen Tasten hier ändern können . So können Sie weitermachen und tun, geht weiter und machen Sie 20 Pixel dazwischen. Da sind wir los. Das ist schon 20. Perfekt. Anstelle dieses Restaurants werden wir die App herunterladen, aber ich gehe weiter und gehe tatsächlich wieder hier rüber. Und wir ziehen einen dieser Schaltflächen, wie den Such-Button hier aus dieser Navigationsleiste. Weil ich nur den Button selbst in diese Navbar hier drüben haben will . Mach weiter und probiere das aus. Fahren Sie fort und heben Sie die Gruppierung der Komponente hier für die Navbar auf. Und auf diese Weise können wir hineingehen und unseren Such-Button hier in die Navigationsleiste platzieren . Und wir werden es ganz unten platzieren, was es hier auf der rechten Seite platzieren wird. Holen Sie sich eine Ausrottung, werden Sie diese zusätzlichen Restaurants los und ändern Sie diesen Anstieg , um die App herunterzuladen. Perfekt. Von hier drüben würden wir tatsächlich weitermachen und sogar den Abstand optimieren. Also lasst uns weitermachen und den Abstand hier auf 30 erhöhen. Eigentlich. Das Gleiche hier drüben. Dann. Wenn du das jetzt hierher bewegst, sollte besser aussehen. Perfekt. Indem wir das Layout-Raster deaktivieren, können wir sehen, dass unsere Navigationsleiste hier ziemlich gut aussieht. Nachdem das abgeschlossen ist, kommen wir in der nächsten Vorlesung zurück , um am Rest unseres Header-Abschnitts zu arbeiten. 95. Header-Abschnitt: Sie entwerfen tendenziell den Rest unserer Header-Seite. Wie wir im Wireframing erwähnt haben, wollen wir ein Bild im Hintergrund, aber mit einem Firmennamen und dem Slogan hier drüben. Gehen wir also weiter und gehen zu den Bildern in den Ressourcen dieses Projekts. Und ziehen wir dieses Header-Foto unsere Landing Page. Die Größenbestimmung ist viel zu groß. wir die Umschalttaste gedrückt und verkleinern das unter Beibehaltung des Anteils. Wir werden das gleich hier drüben stellen. Erweitern Sie hier ein bisschen außerhalb unserer Art von Höhe. Und was wir tun werden, ist, dass wir tatsächlich eine Ebene hier drüben mit unserem Rechteck maskieren dieses Foto tatsächlich eine Ebene hier drüben mit unserem Rechteck maskieren. Sobald Sie das hier haben, werden wir das Rechteck um eine Ebene freischalten . Gehen Sie fort und wählen Sie beide aus und Sie mit der rechten Maustaste auf Mask with Shape. Jetzt war dieses Bild eine Art Ernte auf die Dimensionen dieses Rechtecks und alles. Machen Sie weiter und bringen Sie diese Ebene ganz nach unten. Und diese Massengruppe. Jetzt haben wir das Bild. Lasst uns weitermachen und auch etwas übermäßig hinzufügen. Und das können wir tun, indem wir oben ein kleines Rechteck hinzufügen. Hier drüben. Bringen Sie dies knapp über unsere Massengruppe, setzen Sie das Feld auf Schwarz und unsere Deckkraft auf, versuchen wir 30%. Denke, das sollte gut genug sein. Jetzt lasst uns fortfahren und hier ein paar Textebene hinzufügen. Eigentlich lassen Sie uns beim zweiten Gedanken etwas dunkler machen, vielleicht 38%. Also lasst uns weitermachen und hier ein paar Texte hinzufügen. Drücken wir die T-Taste auf unserer Tastatur. Machen Sie weiter und tippen Sie gesunde Bisse, und das können wir hier kaum sehen. Lassen Sie uns also mit einer Schriftgröße von 55 gehen. Versuchen wir es mit 75 Jahren. Dort kann es ein bisschen größer sein. Lasst uns da raus gehen. Ändern Sie die Füllung auf Weiß. Bewegen Sie das gleich hier rüber. Lassen Sie uns unser Layout-Raster noch einmal aktivieren. Wir können die Dinge richtig ausrichten. Perfekt. Lassen Sie uns weitermachen und einen Text für den Slogan erstellen , indem wir hierher hin dorthin ziehen. Wir werden 45 für die Schriftgröße machen und es wird gesundes Essen direkt vor Ihre Haustür geliefert. Und mit einem Klick, das ist der Slogan für das Unternehmen hier. Eine Sache, die ich hier nicht mag, ist ein Leerzeichen zwischen den beiden Zeilen hier drüben. Ich denke also, dass wir dies auf die 54 erhöhen können , die wir müssen. Versuchen wir es mit 85 Jahren. Das ist viel zu viel. Lasst uns 65 machen. Besser. Wenn wir jetzt das Layout-Raster deaktivieren, sieht das ziemlich gut aus. Das einzige, was ich tun möchte, ist diese ein bisschen mehr zu Fall zu bringen . Hier drüben. Ich denke, die Dinge sehen gut aus. Ich denke, ich möchte mein Overlay hier ein bisschen dunkler machen , also gehe ich stattdessen mit fünfundvierzig Prozent, nur damit wir nicht viel zwischen Vordergrund und Hintergrund mischen Vordergrund und Hintergrund hier. Ich denke, das sieht ziemlich gut aus. Kommen wir in der nächsten Vorlesung zurück, um an unserem nächsten Abschnitt zu arbeiten. 96. Sektion für mobile App: Also haben wir den ersten Header-Bereich unserer Website hier abgeschlossen , was großartig ist. Ich denke, es sieht ziemlich gut aus. Und ich erinnere mich, dass wir in zukünftigen Vorträgen wiederkommen werden , um unser Design aufzufrischen und es noch besser aussehen zu lassen und mehr Stil zu verleihen. Im Moment gehen wir weiter und gehen zu unserem Bereich für mobile Apps. Dies ist der zweite Abschnitt unserer Website, in dem wir tatsächlich einen kleinen Screenshot der App erstellen möchten , wie Sie in unseren Wireframes sehen können, sowie ein paar Texte zum Herunterladen die App und ein kleiner Download-Button für die App. Wir werden das in dieser Vorlesung hier zusammenstellen . Lasst uns also weitermachen und unsere Ressourcen für dieses Projekt hier öffnen . Und Sie sollten in der Lage sein, diesen mobilen App-Punkt PNG zu finden. Wir werden das überschreiben oder auf unsere Website ziehen. Wir werden es einfach etwas kleiner machen und etwas kleiner Shift halten, um seine Proportionen beizubehalten. Und die Dinge irgendwo in der Nähe, vielleicht ein bisschen kleiner, also passt es voll und ganz. In der Tat. Abschnitt hier drüben. Ein bisschen größer als diese Art von Zentrum. Da sind wir los. Ich denke, das sieht ziemlich gut aus. Und ROS macht weiter und aktiviert unser Layout-Raster noch einmal. Und nutzen Sie das zu unserem Vorteil, wenn wir die Dinge perfekt ausrichten. Also lasst uns fortfahren und hier ein paar Texte auf der linken Seite einfügen . Wenn Sie erneut zu den Ressourcen zurückkehren, können Sie den Beispieltext TXT finden. Und da drin solltest du den Download-Apps-Bereich finden. Und für den Text hier laden wir einfach die App herunter, um Ihre Bestellung noch heute zu speichern. Kopiere das irgendwie vorbei. Warum ziehen wir nicht weiter und ziehen einfach eines der Textfelder, dieses hier rüber, hierher. Und statt Weiß werden wir die Füllung in graue Farbe ändern . Etwas in dieser Richtung würde funktionieren. Lasst uns das ausrichten und irgendwo hierher bringen. Und ich doppelklicke und ändere den Text in das, was wir haben. Es gibt unsere Texte, oder wir möchten auch hier einen Button eingeben. Wenn wir also diesen Knopf hier hochfahren, innere Komponenten, sollten wir hier einen Knopf haben. Es gibt einen Standarderfolg eines Buttons, und wir können einfach hier hineinziehen. Dies ist aus der Bootstrap-Vorlage , sodass wir einfach den Text dieser Schaltfläche zum Herunterladen ändern. Die App. Wir haben hier eingekauft ist ein bisschen zu klein. Warum bearbeiten wir also nicht die Polsterung hier um mehr Platz zwischen dem Text und dem Rechteck hinzuzufügen. Also statt neun und mach diese 120. Das Gleiche hier drüben für die 16, ändern wir das auf 40. Hier. Das sieht besser aus. Wir können das einfach hier ausrichten. Das ist gut. Lassen Sie uns unser Layout-Raster ausschalten , nur um zu sehen, wie das aussehen würde. Es kommt langsam zusammen. Das ist also unser Bereich für mobile Apps , der in der nächsten Vorlesung zurückkommt, um hier an unseren beliebten Restaurants zu arbeiten. 97. Restaurant: Wir wollen weiter gehen und zu unserem Restaurantbereich hier drüben übergehen. Um an diesem Teil der App zu arbeiten, werden wir unser Bootstrap-UI-Kit erneut öffnen . Wenn Sie diese Datei nicht zur Hand haben, sollten Sie sie in Ihren kürzlich geöffneten Dateien finden können , die unter Datei und Zuletzt geöffnet verfügbar sind. Suchen Sie also das Bootstrap-UI-Kit , das Sie heruntergeladen haben. Was wir jetzt wollen, ist die Verwendung der Kartenschnittstelle, die sie haben. Warum finden wir also nicht eine Kartenschnittstelle, die für unsere Restaurantkarten funktioniert. Wenn wir hier hineinzoomen, werden wir eine kleine Karten-Kunsttafel finden. Jetzt gefällt mir das hier drüben. Wenn wir diesen verwenden, doppelklicken Sie, um es auszuwählen, und kopieren Sie es. Wechseln Sie zu unserem Landing-Page-Projekt. Und mach weiter und füge das hier drüben ein. Lass uns weitermachen und das einfach ein bisschen größer machen. Es schnappt sich also an diesem Teil des Rasters. Wir möchten ein paar kleine Änderungen daran vornehmen. Bringen Sie den Titel und die Beschreibung hier runter. Für den Button hier möchte ich weitermachen und ihn zentrieren. Und für das Bild. Gehen wir zurück zu unserem Ebenen-Panel. Für unser Image hier drüben möchte ich weitermachen und es ein bisschen größer machen. Gleich hier drüben. Perfekt. Wie wir in unserem mobilen Design-Projekt gelernt haben, können wir entweder Stapel verwenden und einen horizontalen Stapel erstellen oder das Wiederholungsraster verwenden. Das mache ich hier drüben. Ich möchte Repeat Grid machen. Und anstatt vertikal zu gehen, was wir in unserer mobilen App gemacht haben, werden wir diesmal horizontal mit einem Wiederholungsraster bis hierher gehen . Also haben wir vier. Lassen Sie uns weitermachen und einfach die Größe hier anpassen, damit alles mit unserem Layout-Raster übereinstimmt. Und da sind wir los. Jetzt ist das repariert. Lass uns weitermachen und den Text kopieren. Gesunde Bisse hier oder hier unten. Ändern Sie die Füllung in diese graue Farbe, die ich für den Text hier habe. Machen Sie weiter und wählen Sie das und Input, hier übernimmt und beliebte Restrestaurants betreiben. Da sind wir los. Schalten wir unser Layout-Raster aus. Brauche es noch. Wenn nicht, besteht ein Problem, das wir mit Repeat Grids und Komponenten hatten , darin, dass es bei der Eingabe von Daten nicht richtig funktioniert. Klicken wir mit der rechten Maustaste auf diese allererste und heben die Gruppierungskomponente auf. Wenn wir nun zu unseren Ressourcen gehen, werde ich in der Lage sein, dieses Beispiel gestrichelte Restaurant gestrichelte Namen Punkt TXT zu finden . Wir können das über den Kartentitel ziehen, um den Namen des Restaurants zu erhalten. Und wir haben auch eines für das Beschreibungsbeispiel dieses Restaurant Dash Description dot TXT. Ziehen wir diesen über den Beschreibungstext. Perfekt. Doppelklicken wir hier drüben in das Bild und heben die Gruppierung auch als Komponente auf. Auf diese Weise können wir alle unsere Bilder auswählen, eins bis vier hier für die Restaurants. Machen Sie weiter und kopieren Sie das vorbei. Ich sollte arbeiten. Wir brauchen diese Form nicht wirklich hier drüben. Wenn wir das also von dort löschen , wird das viel besser aussehen. Das ist unser Restaurant-Bereich. Ich denke, es sieht ziemlich gut aus. Und wir werden wiederkommen und diese in den zukünftigen Vorträgen aufpolieren . Also könnte jetzt vielleicht ein bisschen Flugzeug aussehen. Aber die Idee ist, die Elemente zusammenzustellen, die wir brauchen, bevor wir zurückkommen und das beheben. Schließlich haben wir den Abschnitt „ Kontakt“, also werden wir in der nächsten Vorlesung wiederkommen um daran zu arbeiten. 98. Abschnitt: Weiter zum letzten Abschnitt unserer Landingpage hier, dem Abschnitt „Kontakt“. Wir werden weitermachen und das zusammenstellen. Und wir brauchen hier das Image des Teams auf der rechten Seite. Und dann auf der linken Seite ein kleines Formular, in dem wir eine E-Mail oder einen Namen und ein E-Mail-Feld und einen Aufstiegs-Button eingeben können . Und es sollte von dort aus ziemlich einfach sein. Als erstes müssen wir hier die Kunsttafel auswählen und unser Layout-Raster aktivieren. was wechseln wir zurück? Bootstrap-UI-Kit? In diesem Formularabschnitt unseres Bootstrap-UI-Kits sollten Sie in der Lage sein, gebildete Eingabegruppen zu finden. Also werden wir fortfahren und darauf hineinzoomen, damit wir von hier aus ein Formular verwenden können. Wir brauchen nichts Kompliziertes wie Dropdowns oder ähnliches, aber Bootstrap gibt Ihnen Zugriff darauf. Sie können Dinge wie verschiedene Arten von Feldern platzieren , die für Sie nützlich sein könnten. Fühlen Sie sich also frei, das zu erforschen. Aber im Moment wollen wir hier drüben eine einfache E-Mail-Eingabe finden. Kopieren Sie diese und eine Schaltfläche, indem Sie die Umschalttaste gedrückt halten, während Sie beide auswählen. Wir kopieren das in unser Projekt, wählen dieses Rechteck hier aus und fügen es ein. Wir werden das irgendwo hier rüben stellen. Wir werden das auch ausstrecken, gleich hier drüben. Lass mich weitermachen und den Knopf hier auf die linke Seite setzen . Lassen Sie uns das noch einmal duplizieren. Und statt per E-Mail machen wir den vollständigen Namen. Ich lösche diesen kleinen Fußzeilentext hier. Ich möchte hier tatsächlich Steuern für dieses Formular verwenden , ich möchte alle auswählen, um Stacks zu verwenden und Command G zu verwenden , um sie zuerst zu gruppieren und dann einen Stapel zu machen. Lassen Sie uns den Abstand zwischen dem Sende-Button verringern und tauschen Sie den vollständigen Namen und die E-Mail aus . Bringen Sie diesen Abstand auf 15 Pixel ab. Aber lasst uns weitermachen und diese Distanz erhöhen, 250. Da sind wir los. Anstelle der Standardeingabe, die zuerst und zuletzt gesetzt wird. Und für die E-Mail machen wir einfach das Beispiel auf domain.com. Da sind wir los. Das ist unser Unterarm. Und dann machen wir ein kleines Bild auf der rechten Seite. Gehen wir weiter und kehren zu unseren Ressourcen zurück. Unter dem Bilderordner sollten Sie in der Lage sein, ein Teamfoto JPEG zu finden. Und dann können wir uns hier hineinziehen. Stellen wir sicher, dass die Proportionen gesperrt sind und eine Breite von 750 erreichen. Wir haben das ein bisschen kleiner gemacht, damit es zu unserem Raster passt. Mittig zentriert. Drehen Sie beide Elemente um und zentrieren Sie sie auch entlang der Seite. Halten wir Alt gedrückt und ziehen eine Kopie dieses Textes, dieses Kopfzeilentextes, und ändern dies, um uns zu kontaktieren. Ich denke, das ist so ziemlich das, was wir wollen. Wenn Sie unser Layout-Raster deaktivieren, sollten wir uns eine bessere Vorstellung davon wie das aussehen wird, okay? Nicht schlecht. Eine Sache, die wir tun könnten, ist, dieses Formular in eine Schachtel oder eine Karte zu legen . Lasst uns also fortfahren und unser Layout-Raster wieder aktivieren und hier an dieser Box arbeiten . Also lasst uns ein Rechteck machen und lasst uns weitermachen und es hier erstellen. Finden Sie diese Ebenengruppe über ein Jahr lang und bringen Sie sie unter unsere Gruppe vier. Also bitte das hier drin. Wir werden in unserem Stack weitermachen und ein wenig Polsterung von 20 Pixeln hinzufügen. Lassen Sie uns nun diesen Stapel verkleinern, um zu unserem Rechteck zu passen , und bringen Sie diesen Button hier in diese Ecke. Und wir können die Höhe dieser Box auf irgendwo hier drüben verringern. Wenn wir jetzt unser Layout-Raster deaktivieren, können wir sehen, dass das definitiv sauberer aussieht. Wir können sogar weitermachen und die Höhe dieses Formulars an die Höhe dieses Bildes anpassen . Um die Dinge ein bisschen sauberer aussehen zu lassen. Natürlich sind wir noch nicht fertig. Wir werden zurückkommen und alle unsere Seiten polieren und den Schaltflächentext hier hinzufügen und dann das richtige Farbschema und sogar eine benutzerdefinierte Schriftart anwenden . Kommen wir also in der nächsten Vorlesung zurück , um mit dem Polieren unserer Zielseite zu beginnen. 99. Unser Farbschema aufwenden: Lassen Sie uns das Farbschema , das wir für das Projekt haben, auch auf unsere Zielseite anwenden das Farbschema , das wir für das Projekt haben . Nehmen Sie sich also eine Sekunde Zeit , um Ihr mobiles Projekt zu öffnen , das wir entworfen haben. Und wählen Sie hier den Farbschemabereich mit allen Farben aus , die wir haben. Und kopiere es mit Command C. Switch hier. Und ganz auf der Seite hier drüben in der Pasteboard werden wir das einfügen. Ich mach weiter und lege das einfach hier rüber. Und lassen Sie uns alle diese Farben hier auswählen , wie Sie sich erinnern, und klicken Sie hier auf das Plus-Symbol, um sie in unser Farbschema für das Projekt zu verwandeln . Wenn du willst, kannst du sie umbenennen. Hier drüben. primär, sekundär. Ich sagte 123. Wir machen das als unseren Gradienten. Jetzt. Von oben nach unten arbeiten wir uns im gesamten Design und wenden etwas Farbe darauf an. Das Wichtigste zuerst, unsere Schaltfläche hier drüben, wir werden die Füllung dieses Textes auswählen. Und sagte, dass die primäre für das Board of Color, wir müssen fortfahren und diesen Hex-Code von hier kopieren. Und an die Grenze. Da sind wir los. Dieser Button hat jetzt unsere Farbe. Das sieht gut aus. Gehen wir fort und wählen hier das Rechteck dieses Bodens aus, nur eine Rechteckebene selbst und setzen Sie es auf Primär. Was wir hier sind. Lass uns weitermachen und den Button hier drüben wählen , um ihn zu speichern. In Ordnung. Ersetzen Sie das in der Mitte. Und wir werden fortfahren und mit der rechten Maustaste klicken und die Gruppierung aufheben und diese überall anwenden lassen. Beim zweiten Gedanken denke ich, dass es hier auf der linken Seite besser aussieht als auf der rechten Seite. Vielleicht bringe den ganzen Knopf ein bisschen besser runter. Schauen wir uns die rechtwinklige Ebene an und ändern sie in ihren Unfall in einer Farbe zusammen mit diesem Text hier, x und eins. Für diesen Text werden wir auch einen Unfall machen. Da suchen wir jetzt viel besser dieser Schaltfläche „Kontakt“ und lassen Sie uns das Rechteck auswählen und in primäre wechseln. Für den Kontakt machen wir einen Unfall. Lassen Sie uns auch etwas Farbe auf unsere Hintergründe auftragen. Lass uns das Rechteck hier freischalten. Versuchen wir hier auch Akzent für diesen Hintergrund. Und ändere diesen Text in ein Weiß. Da sind wir los. Wir verlassen die beliebten Restaurants sind weiß für den Hintergrund und dann für den Kontakt wird die Ebene entsperren und Unfall drei machen. Sobald Sie das getan haben, drückte er Command elegant auf diesem Rechteck, um sicherzustellen, dass Sie es sperren. Das Gleiche hier drüben. Perfekt. Das sieht langsam besser aus. Kommen wir nun in der nächsten Vorlesung zurück, um hier einige benutzerdefinierte Schriftarten auf das Projekt anzuwenden . 100. 8: Ich genieße den Teil des Projekts in jedem Designprojekt sehr , wenn wir eine benutzerdefinierte Schriftart auf das Projekt anwenden und es viel besser, klarer und noch relevanter für die Marke aussehen lassen . Ich persönlich liebe Google Fonts zu verwenden, da es eine kostenlose Ressource ist , mit der Sie Schriftarten für Ihre Projekte finden und herunterladen können . Wenn Sie in Ihrem Browser zu fonts.google.com gehen , wären Sie eine sekundäre. Also kannst du das aufladen. Sie können auf unzählige Schriftarten zugreifen , die Sie für Ihre Projekte verwenden können. Und als ich das durchmachte, die Poppins-Schrift hier drüben irgendwie ins Auge. Wenn Sie diese Schriftart nicht finden können, können Sie voraus gehen und hier auf diese Seite zurückkehren und Poppins hier oben suchen, mit einem S am Ende. Mach weiter und klicke darauf und klicke auf Download-Familie. Geh fort und speichere die Datei. Sobald Sie es gespeichert haben, sollten Sie diesen Ordner hier öffnen können , in dem Sie alle Schriftarten hier auswählen und dann doppelklicken können, um alle Schriftarten hier auswählen und dann sie auf dem Mac zu installieren. Dieser Vorgang kann unter Windows unterschiedlich sein, aber auf einem Mac doppelklicken Sie einfach, um die Schriftart zu installieren. Sobald das erledigt ist, können Sie einfach diesen Ordner und diese Website hier schließen . Jetzt lasst uns weitermachen und hier auf diese beiden Texte klicken . Kopiere sie. Hier draußen. Lassen Sie uns sie auf den Akzent setzen, um zu färben. Wählen wir beide aus und machen Poppins hier drüben. Wenn Sie diese Schrift nicht laden sehen, schließen Sie einfach Ihr XD und öffnen Sie es erneut, und das sollte für den Header funktionieren. Wir werden fortfahren und ein mittleres Schriftgewicht auswählen. Und wir werden das regelmäßig belassen . Wir werden diese als meine Header-Schriftart verwenden und diese hat meine Body Fonts. Wir wählen die gesunden Bytes aus. Erstens, ändere es in Header, H1-Header wie folgt. Und benutze diesen als unseren Körper. Ich werde nur noch einen hier drüben machen. Falls wir einen H2-Header anstelle von 75 benötigen, werden wir 60 für diesen machen. Lassen Sie uns diese auswählen und als Charakterstil hinzufügen. Hier. Wir werden Body Dash Poppins, H12, machen und diesen in jeden umbenennen. Da sind wir los. Wählen wir diese gesunden Bytes aus, setzen Sie es jetzt auf unser H1 und ändern Sie die Füllung in Weiß. Das hier drüben werden wir machen, dass der Körper die Füllung in Weiß umwandelt. Und stellen Sie einfach sicher, dass unsere Ausrichtungen hier richtig sind. Sieht aus, als hätten wir diese nicht richtig ausgerichtet. Nutzen Sie dieses Layoutraster dort zu Ihrem Vorteil. Mach weiter und schalte es aus. Und wir werden hier drüben Körper dafür machen und ihn in Weiß umwandeln. Für die Knöpfe. Wir werden die Schaltflächen auswählen und dann den Text hier einfach manuell ändern , um ihn einzublenden. Da sind wir los. Bevor wir hier oben vergessen, möchten wir unsere Schriften auch hier und hier ändern . Sprechen wir also die Bytes hier und ändern sie in Poppins. Und das Gleiche hier drüben. Wählen Sie dieses aus und ändern Sie ihn in Poppins. Denken Sie daran, dass Sie als Abkürzung einfach den Befehl C in den Restaurants drücken und den Optionsbefehl V für Ihre anderen Texte ausführen können. Und das wird dieselbe Schriftart anwenden. Aber wenn Sie es hier zu dieser Download-App machen, müssen Sie sie nur um zwei Grundfarben ändern , da sie auch über diesen Phil kopiert wird, für diese Texte. Ich denke, diese würden als mittleres Schriftgewicht besser aussehen. Lassen Sie uns also fortfahren und diese in mittlere Schrift ändern. Wir hören, dass es mittelgroß sein soll. Da sind wir los. Sieht viel besser aus. Lassen Sie uns das Gleiche tun, laden Sie die App herunter, setzen Sie sie auf mittel, damit sie ein bisschen dicker ist. Wir können es leichter lesen. Diese Seite sieht gut aus. Gehen wir hier unten weiter, machen wir eins. Gehen wir und wählen den Text aus und zentrieren Sie ihn einfach horizontal. Hier. Halten wir die Umschalttaste und leichten Alt-Text hier drüben gedrückt und ändern sie in Poppins, weil du das kannst. Sie können mehrere Schriftarten gleichzeitig ändern , indem Sie die Umschalttaste gedrückt halten und auswählen. Das einzige, was wir brauchen, um unseren Knopf zu reparieren, ihn ein bisschen weiter zu erweitern und sicherzustellen, dass er zentriert ist. Da sind wir los. Wenn Sie Ihre Schriftart ändern, Sie möglicherweise fest , dass sich Abstand und Ausrichtung zwischen Ihren Elementen ändern können. Also pass einfach darauf auf und überprüfe alles, was uns immer angegriffen hat. Sieht gut aus. Unser Formular. Lass uns eins nach dem anderen gehen. Vollständiger Name. Ändere es zu Pop in. Erste letzte E-Mail. Wählen Sie dieses erste letzte Steuerelement C. Option Control V. Ändern Sie dieses ebenfalls in Poppins. Zuletzt sollte oder Submit Button auch Poppins sein. Und anstatt normales Gewicht zu machen, werden wir Medium machen. Da sind wir los. Das sollte so ziemlich Oliver Fonts auf der Lernseite sein, was ich denke, dass es so ist, bisher so gut. So wenden wir also benutzerdefinierte Schriftarten an, die Projekte sind? Warum kommen wir nicht in der nächsten Vorlesung zurück , um den Rest unseres Designs zu polieren und unsere Landing Page zu vervollständigen. 101. Blobs und Illustrationen hinzufügen: Ich habe das Gefühl, dass wir unserer Landing Page völlig mehr hinzufügen können. Es ist gerade ein bisschen Flugzeug und ich denke, du könntest Lipid mehr Pop gebrauchen. Und wir können ein paar coole Plug-Ins verwenden , um uns dabei zu helfen. Also habe ich zwei wirklich interessante Plug-Ins im Hinterkopf, die wir verwenden können. Und Sie werden sehen, wie sie uns helfen können unser Design wirklich zu verbessern und es noch besser aussehen zu lassen. Kurzerhand. Wechseln wir zurück zu unserem Plugins-Tab hier unten. Sobald Sie es ausgewählt haben, klicken Sie auf das Plus-Symbol. Und wir werden nach zwei Plugins suchen. Die erste ist, wir werden Leute suchen. Diese erste hier drüben, diese Menschen-Illustration. Wir werden weitermachen und wir brauchen eine Sekunde, um dort zu installieren. Lass es sich Zeit nehmen. Und wir werden fortfahren und zurück zu Feature-Plugins suchen und Blob Es sollte ein globales Plug-In angezeigt werden. Installieren Sie das, um zu unserem XD zurückzukehren, und Sie werden sehen, was sowohl von oben als auch nach unten geht. Lassen Sie uns also das beliebte Plugin hier verwenden, das uns hilft, diese cool aussehenden Blobs zu generieren und fortzufahren und zurückzusetzen. Und es wird weiterhin Blogger generieren und Ihnen eine kleine Vorschau darauf geben , wie es aussehen wird. Machen Sie weiter und erhöhen Sie die Komplexität davon. Oder machen Sie es einzigartiger oder weniger einzigartiger, wie Sie möchten. Von hier aus können Sie sogar den Farbton einstellen. Natürlich ändern wir das in nur einer Sekunde. Lass uns weitermachen und einfach diesen Blob einfügen. Deiner sieht natürlich anders aus, aber das ist vollkommen in Ordnung. Wirklich nein, richtig oder falsch aussehender Blob hier, wenn Sie alle einen Blob eingelegt haben, gehen wir weiter und gehen zurück zu unserer Bibliothek. Und ich möchte den Akzent drei Farben für diesen machen. Und jetzt gehen wir zurück zu unserem Plugins Tab und gehen zurück und fügen die Menschen-Illustration ein. Von hier aus haben wir Zugriff auf viele Illustrationen, die für unsere Projekte ziemlich cool sind und was auch immer relevant ist, gelten könnte. Sie können sogar weitermachen und sehr kreativ werden und verschiedene Teile zusammenfügen. Irgendwie Lego zur Illustration hier. Oder du gehst einfach und wähle aus, was du willst. Wir halten es einfach und wählen diesen hier aus. Wir halten es einfach und wählen diesen hier aus. Es wurde in die Zwischenablage kopiert damit wir Befehl V drücken können. Fügen Sie das hier ein bisschen größer ein, machen Sie es ein bisschen größer oder halten Sie die Umschalttaste gedrückt. Ich gehe noch einmal zur Menschen-Illustration zurück . Ziehen wir diesen kleinen Tisch hier raus. Noch einmal. Dieses Mal machen wir die Lampe. Und bring das einfach her. Für den letzten hier drüben doppelklicke ich in diesen und mache diesen hier einfach ein bisschen kürzer. Also denke ich, das sieht ziemlich cool aus. Wir können hier runter kommen und eine hinter unserer App hinzufügen , wenn Sie möchten. Plugins, lobulär. Willst du es zurücksetzen, bis ich etwas bekomme, das mir gefällt. Legen Sie das in die Rückseite ein und verwenden Sie den Befehl und die offene Klammer, bis ich das unter der App oder dem mobilen Gerät habe. Und jetzt fällt es uns schwer, es auszuwählen. Also müssen wir zu den Ebenen zurückkehren und diesen Pfad auswählen und diesen Pfad auswählen und Bibliotheken kaufen und den Block auf setzen. Versuchen wir es mit der Farbverlaufsfarbe. Das sieht ziemlich cool aus. Wir können es auch hier noch einmal für unser Teamfoto machen. Und füge stattdessen das Teamfoto sogar als Blob ein, damit wir das maskieren können. Also lasst uns fortfahren und die Plugins auswählen und sie mehrmals zurücksetzen, bis wir jemanden haben, der nachgesehen hat , der für unser Teamfoto gut aussehen würde. Ich will etwas, das es immer wieder zurücksetzt, bis ich etwas finde, das mir gefällt. Reduzieren wir die Einzigartigkeit und sehen, was wir bekommen. Ich bin hier ein bisschen zu wählerisch. Ich denke, dass irgendwas von diesen wirklich genauso gut funktionieren sollte. Machen Sie weiter und erstellen Sie, gehen Sie fort und verwenden Sie diesen hier. Und mach weiter und zoomen Sie es. Es übernimmt also irgendwie mehr vom Bild. Und wir werden fortfahren und sowohl die Bildebene darunter als auch Blob auswählen sowohl die Bildebene darunter und mit Form maskieren. Wir müssen das Bild einfach ein bisschen größer machen , so. Und dann machen wir weiter und stellen einfach sicher , dass es gut passt. Jetzt können wir das ein bisschen kleiner machen. Passt irgendwie gut zu unserem Formular hier. Noch ein Mal. Lassen Sie uns dieses Layout-Raster aktivieren und die Dinge richtig ausrichten. Und stellen Sie sicher, dass wir diese Ausrichtung hier verwendet haben. Oder die Form sieht auch gut aus, also ist das ziemlich gut. Schalten Sie aus oder Layout-Raster und da haben wir es. So können wir einige Blobs verwenden , um einige cool aussehende Effekte zu erzeugen. Übelkeit kann sehen, wie sich unsere Landing Pages langsam unsere Landing Pages langsam aufpolieren und interessanter aussehen , wenn wir in der nächsten Vorlesung wiederkommen , um eine letzte Politur zu machen. Und gleich danach exportieren wir unsere Landing Page. 102. Aufstellen von unserer Landing-Seite: Was glauben Sie, dass Sie mit dem Projekt fertig sind? Also immer eine gute Idee, das gesamte Design schnell von oben nach unten oder von links nach rechts zu durchgehen das gesamte Design schnell von oben nach unten oder von links nach rechts zu durchgehen , je nachdem, wo du gerade arbeitest und alles drin etwas polieren . Wenn wir also von der oberen Navigationsleiste ausgehen, die meiner Meinung nach ziemlich gut aussieht, können wir diese Felder hier für das Restaurant auswählen und uns kontaktieren und den Unfall in einer Farbe begeistern. Alles andere hier sieht gut aus. Stellen Sie sicher, dass diese irgendwie auf unserer Seite zentriert sind , was jetzt der Fall ist. Ich möchte sicherstellen, dass diese hier auch irgendwie zentral sind. Perfekt. Lasst uns weitermachen und diesen Rahmen aus dem Rechteck entfernen. Dasselbe hier drüben mit diesem anderen Rechteck. Du willst keine Grenze zwischen ihnen essen. Und das Gleiche hier drüben mit diesen Rechteck-Warnprotokollen, wir können es entsperren und den Rahmen entfernen. Und ich sperre es zurück. Sperren wir das hier zurück. Kommando L hier, Kommando L. Los geht's. Hier unten. Ich mag es wirklich wie meine Karten dort zu scharf aussehen. Also werden wir dem Bild einen kleinen Eckenradius hinzufügen , aber nur nach oben rechts und oben links. wir Option also gedrückt, während wir es hier auf einen Eckenradius von 15 Pixeln einstellen . Und Sie können die Pixel auf der linken Seite sehen. 15, ich denke, sieht gut aus. Und wir können das Gleiche hier unten anwenden. Im Moment ist es schon auf fünf eingestellt, aber ich möchte das auf 15 ändern. Das sieht vielleicht besser aus. Das sieht besser aus. Ich wähle hier den Hintergrund aus. Machen Sie auch 15 für diesen, doppelklicken Sie und machen Sie auch 15 für diesen und schließlich 15 für diesen. Und Sie fragen sich vielleicht, warum wiederholen wir diesen Prozess der Wiederverwendung eines Wiederholungsrasters? Die Antwort ist einfach. Wenn Sie eine Komponente haben, weil es sich um einen Kartenhintergrund als Komponente handelt. Wenn es sich um eine Komponente handelt, müssen wir diese Änderung jedes Mal vornehmen , im Gegensatz zu nur einem Mal und damit fertig sein. Jetzt möchte ich hier einen kleinen Schatten für unsere Karten hinzufügen. Das Problem mit Repeat Grid besteht jedoch darin , dass es nicht sehr effizient ist, Schatten hinzuzufügen. Also lasst uns weitermachen und die Gruppierung dieses Rasters aufheben. Mit anderen Worten, fertig mit einem Wiederholungsraster. Und lasst uns fortfahren und hier eine Hintergrund-Wagen-Hintergrundebene auswählen hier eine Hintergrund-Wagen-Hintergrundebene und doppelklicken, um diese Rechteckebene auszuwählen und Schlagschatten anzuwenden. Wir werden eine Unschärfe von 20 machen. Lass alles andere gleich. Ich denke, das sieht viel besser aus. Kopieren wir das und wählen Sie dieses Rechteck hier aus. Doppelklicken Sie ganz durch. Drück Command, Option V. Das Gleiche hier. Das Gleiche hier. Es sieht viel besser aus. Hier drüben. Gehen wir fort und wählen hier dieses Rechteck aus. Und ich möchte den Rahmen entfernen und den Befehl Option V verwenden, um diesen Rahmen hier einzufügen und einen Eckenradius, der automatisch angewendet wurde. Das sieht also viel besser aus. Ich denke, wir können es hier ein bisschen breiter machen. Also halte ich Alt fest, um es auszuweiten. Und hier oben sieht es ein bisschen Flugzeug aus. Wenn wir also einen Text in der Mitte hinzufügen, um zu sagen, dass wir uns mit uns in Verbindung setzen, können wir das nicht sehen, weil er weiß ist. Also lasst uns da draußen gehen und einen Akzent setzen. Farbe hier. Ich denke, der Körper hier ist ein bisschen zu groß, also lasst uns die Schriftart auf 25 ändern. Genau hier. Das sieht viel besser aus. Wählen Sie diese Ebene aus, diesen Hintergrund, um den Rahmen wieder zu entsperren und zu entfernen, sperren Sie ihn erneut. Jetzt glaube ich, dass keiner von ihnen mehr Grenzen haben sollte. Ich denke, unser Projekt ist ziemlich ausgefeilt und startklar. Also werde ich dir eine Übung geben, um einen Prototyp aus dieser Landing Page zu erstellen. Und verbinden Sie diese Buttons auch mit Ihrem Prototyp. Und das machen wir gemeinsam in der nächsten Vorlesung. 103. Einen Prototyp erstellen: Okay, lassen Sie uns einen Prototyp für unsere Ausrichtungsseite erstellen. Wenn Sie darauf klicken und es jetzt auf unserem Desktop anzeigen, ist es vielleicht ein bisschen zu groß, also können wir es hier definitiv kleiner machen. Mach weiter und repariere das einfach hier. Sieht also definitiv cool aus. Natürlich gibt es nicht zu viel, was wir hier verbinden können. Das einzige, was ich wirklich verbinden möchte, ist unsere Navigationsleiste hier oben. Also lasst uns diese Navigationsleiste reparieren , damit sie zwischen diesen Seiten navigieren können. Gehen wir also zu unseren Bibliotheken wählen Sie hier die Navigationsleiste aus. Und stellen Sie sicher, dass wir all diese Schichten haben. Halten Sie die Umschalttaste ausgewählt und führen Sie Befehl G aus und wir werden diese Gruppe benennen, für die Sie ausreichen. Und stellen Sie einfach sicher, indem Sie es verstecken, dass es alles hat, was wir brauchen. Ja, das tut es. Und ich werde beim Scrollen eine feste Position einnehmen und die Ebene bringen, wie Sie es bis an die Spitze des Projekts erraten haben. Wenn wir es also in der Vorschau anzeigen, sollte es an der Spitze bleiben, was wir wollen. Wir wollen ein paar Verbindungen hier. Wir wollen gesunde Bisse. Wenn Sie darauf klicken, bringen Sie uns zurück zu dieser Seite hier. Wenn Sie auf Restaurant klicken, möchten wir zu diesem Teil der App gehen. Wenn wir auf Contact Us klicken, tut uns dieser Teil der Landing Page leid. Und die Download-App sollte uns hier zu diesem Abschnitt führen. Oder alternativ könnte die Download-App auch auf denselben Link wie diese hier gehen . Da wir Bootstrap verwendet haben, haben die hier bereits einen Hover-Status für ihre Komponenten. Wir werden das auch von dort aus loswerden . Um also richtig prototypieren zu können, werden wir weitermachen und jeden Abschnitt zusammen gruppieren. Alle Elemente in der Gruppe. Fahren Sie einfach fort und gruppieren Sie einfach den gesamten Abschnitt hier mit Befehl G. Das ist also unser Header-Bereich , da die Rechteckebene protokolliert wurde nicht in diese Gruppe gezogen wurde. Fahren Sie einfach fort und ziehen Sie das in die Header-Gruppe. Stellen Sie einfach sicher, dass wir es ganz nach unten bringen. Wir möchten sicherstellen, dass unsere Navigationsbretter ganz oben auf den Ebenen liegen. Dieses Rechteck dort, das ich freigeschaltet habe , sollte auch in die Kopfzeile gehen. Genau unten hier drüben. Ich glaube, diese Massengruppe ist für unser Image gedacht. Ziehen wir das also auch in den Header genau hier. unserer App-Seite Lassen Sie uns auf unserer App-Seite alles zusammenfassen, alles auswählen und den Blob hier tun , indem Sie den Befehl halten und Befehl G ausführen Das sollte also unser App-Bereich sein. Das bringe ich nicht direkt unter die Kopfzeile. Beliebte Restaurants sind los und wählen Sie einfach all diese aus. Hit Command G. Und natürlich müssen wir einfach unsere Rechteckschicht, Rechteck drei, hierher bringen , sie freischalten und impulsiv in die Gruppe bringen. Diese Gruppe hier, aber ganz unten und benennt die Gruppe um, um zu füllen. Russ, Trance-Abschnitt. Bring das hier rüber. Und für den Kontakt machen wir das Gleiche. Wählen Sie alles aus. Verschieben dieses Rechteck dorthin, um den unteren Teil davon zu gruppieren und einen Kontaktbereich zu machen und es ganz nach unten zu bringen. Jetzt ist es viel organisierter. Wir können jede Gruppe überprüfen. Nur eine Sache, die ich tun möchte, ist diese Rechteckebenen zu sperren. Wir interagieren nicht versehentlich mit ihnen. Jetzt, da wir das haben, lassen Sie uns unsere Navigationsleiste über die Registerkarte Prototyp anschließen . Wählen Sie die gesunden Bisse aus und wir klicken auf um einen Verstoß hinzuzufügen, und wir werden auch scrollen. Wir wählen den Layer-Header. Egal wo Sie sich auf der Landing Page befinden, wir scrollen zurück zum Header-Bereich. Lasst uns ein- und aussteigen. Und statt 0,3, machen wir 0,6. Jetzt fürs Restaurant machen wir Interaktion und scrollen zum Restaurantbereich. Lass alles andere hat das. Sie haben es für den Kontakt erraten. Wir scrollen zum Abschnitt „ Kontakt “ für die Download-App. Wenn wir auch scrollen, Abschnitt Apps. Jetzt ist alles verbunden. Wie wir erwarten. Wir werden diesen Hover-Status von hier entfernen. Und hier drüben machen wir das Gleiche hier drüben. Entferne diesen Hover-Status. Nun, Gebühr, mach weiter und schau dir das an. jedem Scroll können wir zu jedem Zeitpunkt auf gesunde Bisse klicken, um dieses Backup zu scrollen. Sie können sich den Bereich Restaurants, den Abschnitt „ Kontakt“ und den Bereich „Apps herunterladen“ ansehen. Schön. Ich denke, das sieht toll aus, perfekt. Da haben wir es also. 104. Unseren Prototyp aufzeichnen: Was cooles, was ich Ihnen zeigen möchte , ist, dass Sie auch Aufnahmen Ihres Prototyps erstellen können , wenn Sie hier auf Video aufgenommen haben und die Desktop-Vorschau, wenn Sie auf einem Mac sind, erhalten Sie möglicherweise wurde gebeten, der App die Berechtigung zu erteilen. Öffnen Sie also die Systemeinstellungen, um diese Berechtigungen zu erteilen. Jetzt müssen Sie möglicherweise diesen Punkt hinzufügen, XD beenden und erneut öffnen. Also mach weiter und erlaube Mac das zu tun. Sobald Sie dies getan haben, können Sie die Vorschau öffnen, die Zielseite auswählen und dann auf den Datensatz klicken. Wie Sie sehen können, wird es aufgenommen. Ich kann mit der Website interagieren, wie ich möchte, und den Leuten zeigen, wie es funktioniert. An jedem Punkt kann ich die Aufnahme beenden und diese Datei überall speichern, wo ich möchte. Machen Sie gesunde Bisse Website-Demo. Lasst mich weitermachen und das speichern. Jetzt hier drüben in meinen Ressourcen kann ich die Aufnahme öffnen und sie ansehen, um zu sehen, wie wir es gemacht haben. Das ist genial. Cool. So können Sie Ihre Prototypen auch in XD aufnehmen. Damit schließt das unser Landing-Page-Projekt ab. Ich hoffe, Sie konnten während dieses Prozesses viel lernen . Und ich denke, wir haben viele nützliche Tools, Funktionen, Vorlagen und Plugins gelernt Funktionen, Vorlagen und Plugins und wie wir XD verwenden können. Großartig. 105. Schlussbemerkung: Okay, großes Herzlichen Glückwunsch. Nach Abschluss dieses Kurses haben wir von Anfang an mit Adobe XD großartige Arbeit geleistet aufmerksam gemacht, was er zu bieten hat durch das Entwerfen oder zwei Projekte in der mobilen App für die Lebensmittellieferung aufmerksam gemacht, was er zu bieten hat Service, helfende Bytes und die Website, die wir für sie zusammengestellt haben. Und nur Papa, der interaktive Prototypen für beide Projekte erstellen würde , die wir jetzt mit ihren Freunden, Kollegen und Kunden teilen und ihnen zeigen können , was wir getan haben und wie dieses Produkt funktionieren könnte. Das ist erstaunlich und das ist erst der Anfang für Sie als Designer. Von nun an ermutige ich Sie, Designprojekte zu übernehmen und sich immer wieder von Projekten und Produkten inspirieren zu lassen, auf Designprojekte zu übernehmen und sich immer wieder von Projekten und Produkten inspirieren die Sie Zugriff auf all diese Basis haben, die Apps auf Ihrem Telefon, auf die Websites, auf denen Sie surfen. Ich liebe es, eine Mappe mit all den Designs zu führen, die mich inspiriert haben, damit ich das auch in meinen zukünftigen Designprojekten verwenden kann . Ich bin sehr zufrieden mit all den verschiedenen Teilen, die wir während dieses Kurses behandelt haben , da wir eine Menge von Komponenten, Repeat Grid-Stacks und dem Hinzufügen von Animationen zu unseren Prototypen abgedeckt Repeat Grid-Stacks haben. Und viele der raffinierten kleinen Werkzeuge und Plug-Ins verwendet wurden, um Ihr Design zu polieren und es besser aussehen zu lassen. Von hier aus wünsche ich Ihnen viel Glück und hoffe, Sie in zukünftigen Kursen zu sehen.