UI/UX und Webdesign mit Adobe XD 2018 – Benutzererfahrungsdesign

1. Einführung in Adobe XD: Hallo, da. Mein Name ist Dan und ich bin zertifizierter Adobe-Dozent. Zusammen lernen Sie, wie Sie Adobe XD verwenden können. Dieses UI-UX-Design-Tool wird uns helfen, schöne Benutzeroberflächen zu erstellen und unsere Benutzererfahrung zu optimieren. Während dieses Kurses werden wir ein echtes freiberufliches Projekt verwenden, an dem ich arbeite. Das Projekt benötigt sowohl eine Weboberfläche als auch eine mobile App. Es wird Ihnen ein wirklich gutes Verständnis dafür geben wie Sie Ihr eigenes potenzielles UX-Projekt ausführen können. Mein Kurs hier richtet sich an Menschen, die neu in Design und Benutzererfahrung sind. Wir fangen gleich am Anfang an und bewegen uns Schritt für Schritt durch. Im ersten Schritt werde ich Ihnen zeigen, wie Sie einen guten Brief und UX [unhörbar] konstruieren, dann lernen Sie, wie Sie einige einfache Wireframes erstellen. Von dort lernen Sie, wie Sie richtig in Ihren Designs umsetzen und Farben und Bilder umsetzen. Sie lernen die Do's und Don'ts für die Auswahl von Schriftarten für Websites und mobile Apps kennen. Wir werden auch ein wenig durch [unhörbare] vorgefertigte UI-Kits betrügen, um unseren Workflow zu beschleunigen. Wir erstellen einen Prototyp, sowohl unser Website-Design als auch das mobile App-Design, verbinden die Seiten und fügen vollständige Interaktivität bereit für den Einsatz und Test. Ich werde mit Ihnen alle geheimen Tricks in Adobe XD teilen , die Ihnen helfen werden, all diese sich wiederholenden Aufgaben zu beschleunigen, hin zum Exportieren der richtigen Dateien und Erstellen Ihres eigenen Design-Bereichs. Am Ende habe ich ein Projekt für Sie, das Ihnen dabei hilft, Ihre Fähigkeiten zu entwickeln und so haben Sie etwas bereit für Ihr Portfolio. Ich hoffe, dass Sie bereit sind, sich selbst zu aktualisieren und mich mit dem Adobe XD zu verbinden. Ja, das ist eine gefälschte Pflanze von [unhörbar] Du wirst in den Laden gehen und sie sehen toll aus und es wird gut aussehen im Büro, und dann bekommst du es nach Hause, und es ist eine gefälschte Pflanze. 2. Erste Schritte mit deinem Adobe XD-Projekt: He, da. Um zu beginnen, müssen Sie die Übungsdateien herunterladen. Es gibt einen Link in den Kommentaren oder der Beschreibung unten. Manchmal gibt es einen Knopf. Sie sind auf der Suche nach den Download-Übungsdateien. Das andere, was Sie tun können, ist während dieses Kurses, was ich mache, am Ende jedes Videos, das ich speichere, was ich vorhabe, und das gleiche zu etwas, das die fertige Datei genannt wird. Okay, also wird jedes Video entweder einen Link oder eine Schaltfläche haben, wo Sie herunterladen können , wo ich bis in XD bin und wenn Ihr nicht ganz gleich aussieht, können Sie meinen herunterladen und einfach die beiden vergleichen. letzte Sache ist, dass Sie während dieses Kurses um eine Rezension gebeten werden. Review ist das Leben Blut von mir als Trainer und warum ich diese Vollzeit zu tun bekommen. Wenn Sie den Kurs genießen und Sie bekommen fragen Sie nach einer Rezension, bitte lassen Sie eine dort rein, okay eine ehrliche Bewertung, das würde mir sehr helfen. In Ordnung, lass uns mit dem Kurs gehen. 3. Was ist UI vs. UX-Benutzeroberfläche vs. Benutzererfahrung: Bevor wir anfangen, werden wir nur schnell abdecken, was UX Verse UI ist. Wenn du neu auf dem Feld bist, werden sie zusammengebunden. UX ist eher ein Oberbegriff. Es deckt viele Komponenten ab, einschließlich UI. UI, User Interface Design ist das, was wir in diesem Kurs behandeln werden. Wir werden eine Menge in Adobe Extreme tun, wo wir die Benutzeroberfläche für ein Web und eine App entwickelt haben. Das ist die UI-Komponente, aber das ist im Allgemeinen Teil eines größeren UX-Projekts. UX kann in drei Hauptteile zerlegt werden. Eine ist die Forschungsseite, so dass Sie Ihre Benutzererfahrung Forschung durchführen. Das heißt nur, zu trennen und herauszufinden, wer die Personas sind, wer Ihre Kunden sind, was sind die Anforderungen des Kunden. Baut eine kurze, alle Funktionen, die in Ihrem Produkt sein müssen. Das ist die Forschungsseite von Sachen. Dann gibt es das eigentliche Design, das UI-Design, das wir in diesem Kurs behandeln werden. Dann wechseln Sie in den Benutzer die Usability-Tests, danach nehmen Sie Ihr XD-Projekt und beginnen es zu testen. Wir werden uns auf dieses mittlere Bit konzentrieren, wir zeigen Ihnen ein wenig, wie ich den Brief bekommen habe und wie man sich auf Benutzertests vorbereitet. Aber ich habe einen anderen Kurs namens How To Be a UX Designer, schau dir das an. Das ist eher ein Überblick über das UX-Design. Das wird Ihnen Strategien geben, um Briefs richtig aufzubauen, Persona ist richtig, und auch die Benutzer-Tests, Weg, um das zu erledigen, ein wenig mehr wird hier kurz abdecken. Aber wir werden uns auf die tatsächlichen UX-Design-Features konzentrieren. Du als UX-Designer, nur damit du es weißt, hängt davon ab, wo du arbeitest. Wenn Sie in einem kleineren Unternehmen arbeiten, mittleren Unternehmen, werden Sie wahrscheinlich erwartet, dass Sie alle drei Töpfe tun: Forschung, die Benutzeroberfläche und die Tests. Wenn Sie in einem großen Unternehmen arbeiten, könnten Sie einfach der UI-Designer als Teil dieses größeren UX-Projekts sein. Sie haben vielleicht spezialisierte Forscher, Sie haben vielleicht einen spezialisierten Benutzer Tester, so wird es davon abhängen, wo Sie sind. Aber XD sitzt in der Mitte für die Design-Tools. Ja, das war's. Lasst uns jetzt durchgehen und anfangen, unser Zeug in XD zu bauen. 4. Der Auftrag und die Persona für unser Praxisprojekt: Bevor wir anfangen, möchte ich schnell den Auftrag für dieses Projekt skizzieren , weil dies ein tatsächliches Projekt von einem meiner Kunden ist, und ich dachte, das wäre eine nette Möglichkeit, XD durch ein tatsächliches Projekt zu erkunden. Was wir auf dieser UX-Forschungsseite der Dinge tun mussten und wir uns aufbauen mussten, ist eine Kundenbeschreibung, die ich Ihnen hier zeigen werde und wir mussten die Persona aufbauen, genau wie die Zielgruppe sein wird. Werfen wir einen kleinen Blick hier auf den Bildschirm. Sowohl das, was der Kunde mir als ersten Brief schickte, als auch was wir eigentlich zu bewegen hatten, so dass wir ein tatsächliches Projekt durcharbeiten mussten. Schauen wir uns jetzt hier an. Erstens, wie jeder gute kreative Job, und Sie müssen die kurze richtig vor allem für UX bekommen, weil oft der Client, vor allem Kunden, mit denen ich mich beschäftige, nicht wirklich viele UX-Projekte durchlaufen haben. Ich denke, [unhörbar] was abgedeckt ist, was nicht abgedeckt ist, diese Dinge, also ist eine kurze Sache immer wichtig für jedes Projekt. Ich dachte, ich zeige dir die, die wir bekommen haben. Das ist der Brief, den wir vom Klienten bekommen haben. Also war im Grunde ziemlich dünn. Sie haben eine Website, bringyouronlylaptop.com und sie haben dieses Back-in dafür gebaut, denn der Zug ist zu benutzen, und sie wollen es einfach an andere Trainer freigeben, um es potenziell als Produkt zu verwenden. Sie wollen also eine Website, sie wollen eine App, sie sind sehr einfach. Also, was ich getan habe, war, dass ich einen kleinen Blick durch ihre Details, durch die Analyse für ihre Website hatte. Ich weiß ein bisschen über sie, weil ich mich vorher mit ihm beschäftigt habe über im Grunde ging ich durch das UX-Forschungsprojekt, herauszufinden, wer ihre Konkurrenten waren, was das Produkt tut, seine USPs, wer die potenziellen Benutzer würden werden und baute eine kurze. Das ist also die Sache, die ich ihnen per E-Mail gemailt habe und im Grunde nur die Grundlagen der meisten Slips abdeckt. Lassen Sie mich einfach schnell durchlaufen. Wenn Sie nicht interessiert sind, können Sie einfach überspringen und wir werden anfangen, XD-Zeug zu machen , aber in diesem Fall, Projektname Beschreibung. Das habe ich im Grunde gesagt. Also, nur die Beschreibung zu skizzieren, für wen es ist ziemlich wichtig. Also haben wir eine Persona gebaut. Ich zeige Ihnen, dass in einer Sekunde darüber, wie die Person tatsächlich aussieht. Aber das haben wir mit dem Kunden vereinbart, der die potenzielle Persona ist. Nun, die große Sache mit Personas ist, dass Sie erraten können und Sie eine beste Vermutung haben können, aber Sie müssen möglicherweise überarbeiten , wer Ihre Persona sein könnte, weil Sie vielleicht sagen: „Ja, es ist definitiv diese Person“, aber Sie müssen zulassen Wackeln Raum und Beta Rechtschreibung und Grammatik. Wir haben herausgefunden, für wen wir denken, dass der Kunde ist, wir haben eine Featureliste erstellt. Nur um sicherzustellen, dass wir wissen, was am Anfang tatsächlich in die Wireframes geht, was die wichtigen Teile sind. Wir lassen Dinge wie eine Fußzeile oder andere Funktionen aus, die einfach normal sind. Die Kontakt-Us-Seite muss da sein, all das Zeug. Das ist also das einzigartige Zeug für dieses Projekt. Mitbewerber und Produktinspiration. Das hilft uns nur zu wissen, und der Kunde weiß, dass wir in Bezug darauf ausgerichtet sind, ist die Art von Sache, die wir bauen. Liefergegenstände, das ist super wichtig. Also gehen wir durch zwei Teile, es gibt Wireframing und dann gibt es High Fidelity: Wireframes sind wirklich einfach, High-Fidelity hat alle Schriftarten und Farben und Bilder. Daher bauen wir Wireframes nur für die Genehmigung des Kunden. Ich gehe nicht raus und teste Wireframes. Wir werden über diesen Brief reden. Dann bauen wir einen High-Fidelity-Prototyp und dann gehen wir zu einigen Anwendertests. Basierend auf der Benutzerprobe wir einen Usability-Bericht, der groß oder klein sein kann. Grundsätzlich speist nur zurück, was Sie herausgefunden haben, wenn Sie Benutzer testen. Sobald das alles fertig ist und wir jedes der Probleme mit den Benutzertests aufgeräumt haben, greifen wir alle UI-Assets für die Entwickler. Das bedeutet nur, ihnen Bilder und Code sowie Symbole und Symbole zu geben, damit sie entweder die App oder eine Website erstellen können. Das ist der Ort, an dem unser Job enden wird. Also habe ich immer ein Not Included, nur um sicherzustellen, dass die Grenzen schön und klar gesetzt sind. Die erste ist also, das Back-End zu prototypisieren, das die Anweisung beiseite dieser Website ist. Es gab auch eine Studentenseite, die sie bereits entwickelt haben, sie wollen nicht, dass wir das neu gestalten. Also sorge ich nur dafür, dass es klar ist. Sie sagten mir, dass es klar ist, dass wir das nicht abdecken, weil sie erwarten, ihre aktuellen Systeme zu verwenden, die Instruktor-Seite, die wir testen werden. Kosten, also das ist, was ich für diesen Job berechnen. Jobs variieren, oft beginnen sie bei etwa zweieinhalb Riesen US und steigen bis zu 10 Riesen für größere Projekte. Dieser hier trainiere ich im Grunde, was meine Tagesrate ist und es ist ungefähr $800 und dann erfinde ich wie viele Tage ich mit so etwas wie einer Timeline arbeiten muss, füge ein bisschen einen Puffer hinzu gib ihnen dann einen Stundensatz danach. Also, wenn sie anfangen, nach Sachen zu fragen, die nicht in den Leistungen abgedeckt sind, können Sie sagen: „Sicher, ich kann das tun, aber es wird wahrscheinlich noch einen halben Tag dauern.“ Dann kennen sie Ihren Stundensatz, also wissen sie, dass es X, Y und Z kosten wird. Und ich finde, dass es ein guter Weg ist, den Job zu stoppen, sich auszukriechen. So passiert Jobkriechen bei jedem Job. Sie sagen: „Kannst du schnell dieses extra kleine Ding hinzufügen?“ Sie fügen es hinzu und Sie werden später entscheiden, ob Sie sie dafür bauen oder nicht, und dann überläuft der Job und Sie überraschen sie entweder mit einer riesigen Rechnung oder Sie saugen einfach in die Kosten, die saugen. Also stelle ich sicher, dass der Anfang ich ihm [unhörbare] Kosten gebe, weil das ist, was jeder will. Niemand will einen Stundensatz. Aber ihnen auch einen Stundensatz zu geben, so dass, wenn man chatten und sie sagen „Hey, kannst du das auch tun?“ Du sagst: „Sicher, es wird wahrscheinlich drei Stunden dauern.“ Sie wissen, was der Stundensatz ist und Sie können es Ihre Rechnung hinzufügen und jeder ist klar von Anfang an, ich bitte immer um 50 Prozent Zahlung im Voraus, um die Arbeit zu beginnen. Es gibt so viele Jobs, die ich am Ende anfange, die nie fertig werden. Ich möchte also sicherstellen, dass ich 50 Prozent im Voraus habe, damit ich meine Kosten für das erste Teil decken kann. Es ist der wichtigste Teil, der die UX-Forschung durchführt und die Funktionen ausarbeitet. Das ist der super wichtige Teil des Jobs, denke ich. Also frage ich immer nach einem Prozentsatz im Voraus, vielleicht haben Sie etwas Kleineres gefragt, aber 50 Prozent sind ziemlich üblich. Dann 50 Prozent nach Fertigstellung. Deadlines, jeder Job ein wenig anders, aber ja, das ist, was wir getan haben. Also gibt es einen dünnen und mich. Also werde ich die Benutzerforschung machen, um mit zu beginnen, die Wireframes werden geliefert, um Ihren einzigen Laptop dünn zu bringen, dann geben sie mir Feedback zu diesem bestimmten Datum dann gebe ich ihnen die hohe Wiedergabetreue. Dann geben sie mir Feedback zu dieser hohen Wiedergabetreue und dann gehe ich tatsächlich zum User-Test. Dann erlauben wir ein paar Wochen für Benutzertests. Dies kann anders sein, es hängt davon ab, wie für dieses Projekt aussehen, wir werden eine Menge von dem, was man Flur-Tests oder über die Schulter Tests nennt. Wir werden versuchen, Menschen zu treffen, um körperliches Leben zu erledigen. Finden Sie Menschen, die zu Ihrer Person passen und tatsächlich mit ihnen arbeiten. Jetzt noch einmal, wir werden hier keine vollständigen Tests durchführen. Dafür habe ich noch einen Kurs. Erfahren Sie, wie Sie ein UX-Designer für einige der Testtechniken werden. Aber ja, wir werden über die Schulter Sachen möglich zu tun, wahrscheinlich einige unmoderierte Tests, wo wir zu Ihnen gehen sagen userstesting.com, Ich finde, ist wirklich nützlich, und Sie können es einfach an sie und Leute senden Nehmen Sie sich Shapes schnell auf und es ist etwas, für das Sie keine Meetings organisieren müssen, und Sie haben Aufzeichnung, damit Sie ausschneiden können, aber so können Sie dem Client einige der Ergebnisse zeigen. Dann wird es einen Benutzer testen und abgeschlossene Berichte geben. Grundsätzlich passiert nur Feedback dazu in den Benutzertests. Dies sind die Änderungen, die wir vornehmen werden, und Sie nehmen diese Änderungen vor. Sobald die endgültigen Änderungen vorgenommen wurden, werden wir die Assets an den Entwickler übergeben, um gebaut zu werden, was in diesem Fall wäre, werde ich wahrscheinlich am Ende die Web-Seite der Dinge tun, zumindest das Front-End-Webdesign Sachen, aber die App in der Back-End-Entwicklung muss von einem Entwickler durchgeführt werden , der völlig außerhalb meiner Zone ist. Ich bin eher von dieser kreativen Seite, der Frontend-Seite. Ja, das ist die Art von Brief, die wir bis zum Klienten durchsehen. Ich wette, dass Sie 100 Prozent versprochen haben, dass dies nicht am 4. Dezember, vor allem wegen der Rückmeldungen. Ihr Kunde wird also dieses Datum sehen und sagen, dass er es tun wird, aber die Dinge werden einfach spät auftauchen. Sei nur ein oder zwei Tage zu spät und ich stelle nur sicher, sobald es ein paar Tage zu spät ist, überarbeitete ich die nächste Zeitleiste, damit sie wissen, dass sie es waren, die es rausgeschoben haben. Wenn es also zwei Monate überfällig ist, dann ist es nicht wegen mir, wegen ihres schlechten Rückkopfes. Also, am Anfang ziemlich starr zu sagen, dass es bis zu diesem Datum hier sein muss und sobald es spät ist, füge das zur Zeit hinzu und schiebe das einfach raus, denn das wird lange aussehen, wenn es ins nächste Jahr schiebt, denn es wird noch ein paar Wochen in der Mitte eines Weihnachten hinzufügen. Also hätten wir es Mitte Dezember übergeben sollen , und bevor Sie es wissen, ist es Februar. Dann hatten sie Mitte Dezember. Seien Sie also ganz klar über Fristen und Fristen. Nun, das ist mein Prozess. Sie könnten in einer Agentur arbeiten, in der $4000 einfach nicht den Bereich decken. Sie könnten also in den $5000 beginnen und mit der $50.000 Marke enden, je nachdem, wie groß das Projekt ist. Vielleicht fängst du gerade erst an und du könntest nach Hause Arbeit viel billiger als das Vereinigte Königreich. Vielleicht tun Sie Entwürfe für $1500 oder sogar $500, um Ihren ersten Job zu bekommen. Aber ich dachte, ich zeige dir, wo ich als freischaffende UX-Designer bin. Sie haben also eine Vorstellung von Preisgestaltung und Timelines und Slips. Werfen wir einen kurzen Blick auf die Persona, die ich gemacht habe. Das ist also die Persona, die wir jetzt für dieses Projekt gebaut haben, und die ersten Slips hatten einen groben Umriss. Was wir seitdem getan haben, ist eine UX-Forschung darüber, wer diese Person am ehesten sein wird. Das Schöne an diesem speziellen Client ist, dass sie viele Google Analytics haben und einen starken YouTube-Kanal haben. Es ist also einfach, da rein zu kommen und tatsächliche harte Daten darüber zu sehen, wer den Kanal nutzt, wer sein Produkt benutzt, und dann mit dem Kunden darüber zu sprechen, wer diese potenzielle Person sein könnte. Was dann in das geht, hängt wirklich von Ihrem Projekt ab. Also haben wir diesem Kerl einen Namen gegeben, Peter, das ist ein gefälschtes Bibliotheksbild, aber ich habe das Gefühl, dass es die Person repräsentiert. Wir geben ihm ein Alter, seine Berufsbezeichnung und einen Ort, an dem er lebt. Nun, was Sie wirklich tun wollen, ist in der Lage zu kommunizieren. Nun, nach dem Lesen dieser kennen Sie die Person. Müssen Sie die Zahnpasta aufschreiben, die er benutzt, oder das Auto, das er fährt, potenziell aber nicht. Wenn es ein Prius oder ein Ferrari ist, ist das ein Hinweis darauf, welche Art von Person er ist. Ich habe einige Personas gesehen, die gerade in es ist mein neues kurzes Detail bekommen, ich denke, was Sie wollen, ist nur so dass Sie genug haben können und er musste weg gehen und gehen, ich verstehe, woher Peter kommt in Bezug auf mein Produkt. Es könnte also kürzer sein als das, wahrscheinlich nicht viel kürzer, aber ich würde es auch nicht zu viel länger machen. Lesen Sie das durch, nur damit Sie verstehen, wer Peter ist, warum wir dieses Projekt machen. Was ich für Sie getan habe, ist in den Übungsdateien gibt es Ordner namens Persona-Vorlage. Sie können dies verwenden, wenn Sie möchten. Es gibt eine Illustrator-Datei, die Sie die Bilder und Schriftarten und Sachen ausschalten und verwenden können , wenn Sie möchten, Sie haben die volle Berechtigung, sie zu verwenden, aber ja, haben Sie einen Durchlesen und sehen, wie Peter Dinge macht. Also haben Sie einen Durchlesen und verstehen Peter und seine Positionen, dass wir, wenn wir eine XD bauen, einige Entscheidungen treffen können, basierend darauf, was Peter wollen würde, nicht was der Kunde will, und nicht das, was ich persönlich will. Also, das ist die kurze und personas. Gehen wir zum nächsten Video. 5. Wireframing (low fidelity) in Adobe XD: Wir werden Drahtrahmen in XD beginnen, jetzt Drahtrahmen oder Low Fidelity, ist der Begriff oft verwendet. High-Fidelity bedeutet nur die Vision mit den Schriftarten und den Farben und den Bildern. Es sieht genau aus wie das Endprodukt, der Drahtrahmen oder Low Fidelity hat nur eine Schriftart, einfarbig, echtes Grundlayout. Für mich ist der Drahtrahmen wohl der wichtigste Teil. Das ist, wo mein Wert von meiner Vermutung kommt, ist, den Benutzerfluss auszuarbeiten, wie sie von A nach B kommen, wie lange dauert es? Wie viele Schritte? Wie einfach ist es? Diese Art von Drahtrahmen ist, wo der größte Teil des Wertes für mich als Designer kommt. Obwohl ich das High-Fidelity-Zeug liebe, die Drahtrahmen, die ich finde, ziemlich wichtig. Testen Sie jetzt die Drahtrahmen? Ich verwende Drahtrahmen, um an den Client zu senden , damit sie es überprüfen können, um sicherzustellen, dass alles an der richtigen Stelle ist , aber ich verwende es nicht für tatsächliche Tests für tatsächliche Endbenutzer oder die Personas, können Sie. Ich finde, ich bin schnell genug, um die High-Fidelity-Versionen bereit zum Testen zu bekommen und ich bevorzuge es, mit denen das richtige Marketingmaterial, richtige Bilder, Schriftarten und all das Zeug dort zu testen. Die andere Sache ist in Bezug auf Drahtrahmen, ich werde sie zuerst von Hand machen, wie ich so etwas werde, und in meinem Buch wirklich schnell geht das an niemanden außer mir, also werde ich es halten. Das Mikrofon verschwindet und du kannst mich nicht wirklich hören. Hoffentlich siehst du das. Vielleicht kannst du mir sogar geben, aber ja, es sind nur echte grundlegende Umrisse. Es gibt Seiten und Seiten davon, und ich gehe einfach durch und flehe die Ideen heraus, wo alles gehen muss, und dann fange ich an , in der nächsten Sache zu bauen. Schneller auf diese Weise, können Sie es vorziehen, direkt auf den Computer zu gehen. Das ist auch in Ordnung. Lassen Sie uns jetzt loslegen in XD und schauen Sie sich einige der UI-Kits an. Endlich XD Zeit, er verspricht es immer. Ich verspreche es, nächstes Video. 6. Arbeiten mit bestehenden UI-Kits in Adobe XD: Hallo, da. In diesem Tutorial werden wir unsere Seite hier beginnen. Wir werden eine Seite bekommen, wir werden es zu einer Navigation bekommen. Wir werden es aus einigen der Vorlagen ziehen, die von XD integriert sind , und machen es so aussehen. Lasst uns darauf eingehen und in XD loslegen. Endlich haben wir XD geöffnet. Nun, das erste, was wir tun werden, ist, dass wir eine der Vorlagen herunterladen , die XD hilfreich für uns gemacht hat. Wir werden nur Teile daraus ziehen, während wir arbeiten, weil sie nur ein paar vorgefertigte Drahtmodelle sind , aus denen wir Teile stehlen können, um unseren Prozess zu beschleunigen. Sie können es tun, indem Sie hier herunterladen, wo es „UI Kits“ steht, es gibt eine Option, das ist Wireframes oder Sie können zur Datei „UI Kits“ gehen und hier klicken und das wird nur Behance öffnen. Schauen wir uns das mal an. Hier können Sie auf „Download Kits“ klicken. Jetzt habe ich sie bereits für dich heruntergeladen und in die Übungsdateien gelegt Wenn du also die Übungsdateien herunterlädst, sind sie einsatzbereit. Springen wir zurück in XD. In hier in XD, können Sie öffnen, dass Wireframe bekam eine „Datei“ gehen Sie zu „Öffnen“ und die Übungsdateien, die wir diese in einem Code UI Vorlagen heruntergeladen haben. Ich habe diese Wireframes hier heruntergeladen und wir werden mit Web beginnen. Nun, warum fangen wir mit Web an und nicht. Unsere Kurzbeschreibung ist ziemlich spezifisch. Die Hauptziele werden die Verwendung von Web, das Web-Interface. Aber wenn Sie wüssten, dass Ihr Projekt hauptsächlich für Mobilgeräte, Webnutzung oder vielleicht für eine App basiert , würden Sie mit Mobile beginnen, aber wir werden mit Web beginnen und es einfach öffnen. Zuerst ist das Navigieren und Zoomen und der einfachste Weg ist, den Befehl auf einem Mac oder die Steuerung auf einem PC gedrückt zu halten und auf die Plus-Taste zu zoomen und die Minus-Taste zu verkleinern, schön und einfach. Ein paar andere Navigationstechniken halten die Leertaste gedrückt. Gibt mir meine Hand und ich kann mich bewegen. Wenn ich etwas vergrößere, halten Sie die Leertaste gedrückt, klicken Sie gedrückt und ziehen Sie mit der Maus, und das ermöglicht es mir, in den Dokumenten zu navigieren. Nun, zwei weitere kleine nützliche Navigationsverknüpfungen, bevor wir beginnen, halten Sie den Befehl auf einem Mac oder Steuerung auf einem PC und tippen Sie auf die eine Taste, die auf 100 Prozent vergrößert und hier sollten wir die meisten unserer tun Arbeit, zu weit verkleinert und zu weit vergrößert zu sein und Entscheidungen über Schriftauswahl und -größe zu treffen, ist nicht so nützlich, weil ich Benutzer es immer nur bei 100 Prozent sehen werden, also ist es toll, bei dieser Größe zu sein, Befehl eins oder steuern Sie einen, wenn Sie sich auf einem PC befinden. Letzte, ich verspreche, ist mein Favorit ist, wenn ich dieses Element hier auswähle und Befehl drei oder Steuerung drei auf einem PC, es zoomt hinein, es hebt nur, dass ein Bereich. Ich finde das sehr nützlich. Sie können es auch mit dem ganzen Upboard tun. Du willst das auf dem Brett sehen. Sie können auf den Namen entlang des obersten Befehls drei klicken und es wird ihn in Ihrer Ansicht zentrieren. Das ist die grundlegende Navigation. Was wir tun werden, ist jetzt ein ausgeführtes Dokument zu erstellen. Wir gehen zu „Datei“, wir gehen zu „Neu“. Hier gibt es einige Standardwerte. Sie können dieses kleine Drop-down-Menü drücken, um andere Optionen zu finden. Es hängt wirklich davon ab, was Sie tun wollen. Ich mag es, Websites mit diesem 920 quer durch 1080 hoch zu starten. Sie können hier eine benutzerdefinierte Größe eingeben oder wenn Sie offensichtlich mit iPhones oder iPads arbeiten, können Sie diese standardmäßig verwenden. Ich werde diesen Kerl benutzen, klicken Sie darauf. Wir werden das retten. Gehen Sie zu „Datei“ „Speichern“ und wir werden alle unsere Dateien für diese Klasse auf unseren Desktop ablegen. Ich werde einen neuen Ordner erstellen und dieser wird Instructor HQ genannt und wir werden diesen Aktenlehrer HQ nennen, wir nennen es einen Prototyp, und wir nennen diesen einen V1. Das erste, was wir tun müssen, ist „Upboard“ zu nennen. Doppelklicken Sie einfach auf die Wörter hier. Wir werden diese eine Homepage nennen. Nun, wenn Sie eine Person wie ich sind, die Ihre Ebenen nie in Photoshop oder Illustrator benennt. Du hast Schicht wie 57. Es hat keinen Namen, die Benennung Ihres Upboards hier in XD, wird super-nützlich, wenn wir später aufhören, das Prototyping zu beenden. Ich gewöhne mich an die Gewohnheit. Die andere Sache, die ich tun werde, ist, dass ich verkleinern werde, und ich werde meinen Aufstieg ziemlich lang machen. Nun, weil ich nichts auf meiner Seite und nichts ausgewählt. Ich bin nur auf dem Vorrat. Es gibt eine Up-Board 2, die Sie verwenden könnten, wenn Sie offiziell sein wollen, aber weil ich nichts anderes auf meiner Seite habe, kann ich einfach das Upboard aktualisieren. Sie werden feststellen, dass hier eine gepunktete Linie ist. Dies ist nur eine nette kleine visuelle Anleitung hier, um Ihnen zu zeigen was der anfängliche Blickpunkt ist oder über der Falte zu sagen. Das bedeutet nur, dass alles hier oben das Zeug ist , das die Leute zuerst auf Ihrer Webseite sehen werden. Alles hier unter wird Zeug sein, nach dem sie scrollen müssen. Hier ist, wo die Magie passieren muss. Sie müssen Ihren Verkauf tun, Ihre wichtigsten überzeugenden, Ihre Call to Action. Alles über dieser gestrichelten Linie hier. Sie können diesen anfänglichen Ansichtspunkt anpassen, wenn Sie denken, dass er zu groß oder zu klein ist. Zunächst einmal werden wir gehen und einige Teile dieser Vorlage stehlen , wir werden zu ihr springen. Sie können hier ein Fenster bekommen und zwischen ihnen wechseln, also springt das zwischen diesem und diesem, es liegt an Ihnen. Ich benutze Befehl Tilde auf Mac. Tilde ist die Wide Way Taste über Ihrer Tab-Taste. Auf einem PC, ich denke, es ist Steuerungs-Tab schaltet nur zwischen ihnen. Ich springe viel zwischen diesen Weg. Was ich jetzt will, ist, dass ich eines dieser Navigationselemente möchte. Ich werde nur diejenige auswählen, die meinem handgezeichneten Mock-up am nächsten ähnelt, und es ist wahrscheinlich dieses hier. Ich werde es einmal anklicken, habe eine Kopie erhalten, Kopie bearbeiten. Ich werde zu meinem Design springen, und ich werde gehen, um einfügen. Was ich tun möchte, ist, dass ich meinen schwarzen Pfeil und das Schöne daran, ich werde versuchen, in der Mitte zu bekommen, aber Sie sehen XD, es ist clever, kennt die Mitte, dass Sie sehen können, dass Pixel. Kleben Sie es nach oben. Nun, wenn wir das entwerfen, habe ich eine Größe ausgewählt. Wenn ich hier auf den Rand klicke, klicken wir auf die Namen am einfachsten. Es gibt mir meine Dokumentensitzungen, mein Vorstandssitzungen, und wir haben 1920 gepflückt. Ich wollte nie eine Website so groß gestalten, vor allem für meine Wireframes. Ich wähle diese Größe, weil ich gerne die sagen Größe hier verwenden, 1400 über, um meine Website zu tun. Aber ich mag es, diese zusätzlichen Kanten hier zu haben, nur damit ich nicht versuche, in einer winzigen Box zu entwerfen. Dies ist hier genau wie Pufferbereich , so dass ich sehen kann, wie es auf potenziell einem größeren Bildschirm aussieht. Was ich auch gerne mache, ist mein Navi entlang zu erweitern, weil es über die Spitze sein wird. Was ich tun werde, ist, dass ich die Gruppierung aufheben werde, klicken Sie mit der rechten Maustaste. Hier sehen Sie die Tastenkombinationen. Wir werden immer mehr Abkürzungen durchlaufen, während wir weitergehen. Aber die Gruppierung aufheben, diese Verknüpfung ist die gleiche wie viele andere IW-Produkte. Ich habe das, ich werde es kopieren und einfügen. Warum? Ich werde verkleinern, ich benutze dies als Leitfaden hier, um mir zu zeigen, wo ich innen entwerfen sollte. Was ich damit tun werde, werde ich die Füllung ergreifen und ich werde nur die Deckkraft dieser Füllung nach unten senken. Es ist nur ein Hinweis im Hintergrund, mir zu zeigen, wann meine Grenzen sind. Was ich auch damit machen werde, ist, dass ich es sperren werde, damit ich es nicht bewegen kann. es ausgewählt ist, können Sie entweder mit der rechten Maustaste klicken und sperren. Es gibt ein paar Möglichkeiten, sich zu sperren. Ich benutze die Tastenkombinationen Befehl L auf einem Mac oder Control L auf einem PC, und Sie erhalten nur dieses Sperrsymbol. Sie können es einfach entsperren, indem Sie darauf klicken. Das gibt mir meine Breite und es bedeutet nur, dass ich sie jetzt nicht bewegen kann. Ich kann es auswählen, aber ich kann es nicht bewegen. Eines der Dinge, die ich tun möchte, ist, dass es hier in meinen Schichten tatsächlich über allem liegt. Wenn ich versuche, auf meine Navigation zu klicken, ist es im Weg. Ich klicke auf „Halten“ und ziehe ihn, also ist er unten und du kannst dort in deinem Ebenenfenster sehen, dass er gesperrt ist. Wenn Sie Ihre Ebenen nicht sehen können, klicken Sie hier auf dieses kleine Symbol. Ich werde darauf klicken und ich werde eine kleine Abkürzung halten. Halten Sie die Alt-Taste auf einem PC oder die Wahltaste auf dem Mac gedrückt und ziehen Sie eine Seite, Sie werden sehen, dass es in beide Richtungen geht. spielt keine Rolle, wie du es rausziehst, aber das will ich anfangen. Ich habe einen Führer hier, um zu wissen, wo das Zentrum unserer Website ist und meine Navigation geht den ganzen Weg entlang der Spitze , denn so plane ich, es auf meinem Endergebnis zu haben und es sieht einfach gut aus auf meinem Wireframe. Eine letzte Sache, bevor wir gehen, ist, dass hier in meinem Drahtmodell, die Vorlage, die Sie vielleicht bemerkt haben und bereits behoben haben, dass Sie möglicherweise Schriftarten fehlen. Klicken Sie auf die Schaltfläche und Sie können die Schriftarten mit Type-Kits synchronisieren, schön und einfach. Ignorieren Sie es nicht und wenn Sie es nicht beheben können, betonen Sie nicht, es wird gut mit diesem Tutorial funktionieren. Wenn Sie die Schriftarten nicht finden können, kein großes Drama, aber wenn Sie diese reparieren können, dann gehen wir zum nächsten Video. 7. Arbeiten mit Schrift in XD-Wireframes: Hallo, in diesem Video werden wir uns Type in XD ansehen. Wir werden ein paar der Navi hier aktualisieren. Wir werden darüber sprechen, welche Schriftarten wir verwenden können und nicht verwenden können. Wir werden etwas ausrichten und verteilen und wir werden das Logo hier oben links aktualisieren, sehr spannend, nicht wirklich, aber einige wichtige Dinge. Lasst uns reingehen und es tun. Arbeit mit Type in XD ist ziemlich einfach, wir werden spezifischere Web-Fonts und Sachen später behandeln wenn wir in unsere High-Fidelity-finale Version kommen. Aber die Grundlagen für den Moment ist, dass ich diese XD durch unser Business-Logo ersetzen möchte. Also werde ich darauf auswählen und löschen, wählen Sie meinen Titel aus. Nun, Sie könnten jetzt geneigt sein, das Markenlogo für das Unternehmen zu verwenden, es ist nicht praktisch und Drahtrahmen, Sie müssen es einfach auf Drahtrahmen halten und dann lassen Sie Ihre Kreativität frei in den High-Fidelity-Versionen der endgültige Versionen. Ich weiß selbst, dass ich zu viel in wie ein Logo eingesteckt werde und Sie mögen „Ich werde einfach die Markenfarbe für die Navigation verwenden “, dann fangen Sie an, Schriftarten zu wählen und dann, bevor Sie es wissen, werden Sie vollständig einen Drahtrahmen entwerfen und es sollte ein ziemlich einfacher Prozess sein. Also werde ich nur in INTURTOR HQ setzen, so der Name des Unternehmens, und ich werde nicht um etwas außer der Farbe kümmern, hier füllen, nur dass es gesehen werden kann. Also sind die Grundlagen hier drüben. Sie haben Schriftgröße und Sie haben Ihre Schriftart offensichtlich, und die verschiedenen Größen oder die Gewichte, und Sie haben nur einen grundlegenden Typ. Sie haben die Leerzeichen zwischen den Buchstaben, also kann ich es vielleicht 200 öffnen und ich bekomme mehr Abstand zwischen den Zeichen. Ich möchte das bei diesem Prozess nicht tun und das löscht den Abstand zwischen den Zeilen. Nun, einer der praktischen Tricks, wenn Sie mit Schriftarten arbeiten , ist diese Sache hier ist nicht wie ein Dropdown-Menü, Sie haben tatsächlich geben Sie es und so ist es einfach, wie manchmal nur auf „Halten“ zu klicken, und sehen Sie diesen kleinen Punkt hier, greifen dass schwarzer Pfeil, sehen Sie diesen kleinen weißen Punkt, er macht ein paar Dinge, wenn ich ihn nach unten ziehe, er macht die Schriftgröße nach oben und unten, was cool ist, und Sie werden auch bemerken, wenn Sie gerade darunter ein wenig, können Sie beginnen Drehen Sie es. Mein Rat ist jedoch, dass es keinen Text in einer Website oder App-Design dreht, es ist einfach ziemlich schwierig, technisch „Typ“ zu drehen, es scheint eine einfache Sache zu tun, aber wenn Sie jemals mit Websites behandelt haben, tatsächlich, rotierende „Typ“ ist unmöglich, also müssen wir es in ein Bild verwandeln und es ist ein großes Drama, also versuchen Sie nicht, das zu tun. Die andere Sache ist, wenn Sie Größen auswählen, würden Sie bei 100 Prozent sein wollen, Sie können sehen, dass ich bei 75 Prozent bin. Also fange ich an, ein paar Entscheidungen zu treffen: „Oh, ist das groß genug?“ Aber wenn Sie nicht zu 100 Prozent sind, können Sie einige schlechte Entscheidungen treffen. Also, wenn ich hineingehe und dann einen auf einem Mac befehle, kontrolliere einen auf einem PC, dann kannst du ein Gefühl davon bekommen, dass dies die tatsächlichen Größen sind, die Benutzer sehen werden, also fühle ich mich, dass sie ziemlich klein sind und das ist ziemlich groß. Ich werde das ein bisschen verkleinern, was ist das mit 20? Also kann ich es entweder hierher ziehen, offensichtlich tippen Sie es da drüben. Ich werde mich an eine wirklich konsistente Schriftgröße halten, 16 ist ein wirklich Standard-Basic, die größte Schriftart, die Sie verwenden möchten. Ich werde auch auf diese Kerle klicken. Eigentlich werde ich ein paar davon anpassen, also will ich nicht, ich habe drei davon, die ich will. Ich wähle alle drei aus. Eigentlich nein, wir machen einfach eins und duplizieren es dann. Ich werde nur meinen schwarzen Pfeil verwenden, sie nur löschen, und ich werde auf diesen ersten klicken. Dieser wird ein Beispiel sein, und ich mache die Schriftgröße bis zu 16, um der anderen Sache zu entsprechen , und ich möchte jetzt ein paar von ihnen. Ein kleiner Trick ist, dass Sie es auswählen und gehen Sie zu bearbeiten, kopieren und einfügen oder Control D auf einem PC oder Befehl D auf einem Mac und das gibt Ihnen zwei von ihnen. Ich finde den einfachsten Weg jedoch ist, mit Ihrem schwarzen Pfeil, mit diesem ausgewählten, halten Sie die „Wahltaste“ auf Ihrem Mac, die „Alt-Taste“ auf einem PC und ziehen Sie es hinüber , und Sie werden feststellen, dass, wie Sie es ziehen, indem Sie die Taste runter, bekommst du ein Duplikat. Preise, Login. Denk dran, ich ziehe das aus meinen Features. Dies sind die wichtigsten Dinge, die hineingehen müssen, und in diesem Fall ist die letzte Anmeldung. Was ich tun möchte, ist, dass ich diesen Kerl wahrscheinlich an den Rand hier will, vielleicht nur ein bisschen drinnen, und ich werde Shift halten und sie alle auswählen. Ich habe meinen schwarzen Pfeil gedrückt Shift halten und nur auf sie klicken, und tatsächlich könnte ich diesen ein wenig weiter ziehen. Sie können sie ziehen und Sie beobachten, können Sie sehen, die Zwischenräume zwischen ihnen beginnen Futter, Sie sehen, dass rosa Punkt dort? So könnten Sie das tun, dann werden sie gleich, Es liegt an Ihnen, oder ob Sie wählen sie alle halten Verschiebung und verwenden Sie diese Option hier oben, die sagt, sehen Sie diese vierte Option in hier sagt, verteilen horizontal, nur breitet sie alle aus. Nun, die andere Sache, die du tun musst, ist wie ich, mit dir selbst zu kämpfen, um nicht durchzugehen und eine schönere Schrift auszuwählen, nur eine schönere, und vielleicht mit Obermaterial und tiefer , und du willst das einfach aus dem Moment fernhalten. Sie wollen, dass es dieser wirklich klobige, funktionale Drahtrahmen ist, kein Stil. Wenn ich durchgehe und sie schön ausrichte, gibt es nur so viel, was du ignorieren kannst. In Ordnung. Also, das werden wir auf das nächste Video sein. 8. So erstellt man Formulare, Kontrollkästchen und Schaltflächen in Adobe XD: Hey, da. In diesem Video werden wir einige Eingabefelder und einige Kontrollkästchen und eine Schaltfläche machen. Wir werden auch unseren ersten Charakterstil betrachten. Also lasst uns gehen und anfangen, jetzt zu erstellen. Das erste, was ich tun möchte, ist, dass ich das Rechteck-Werkzeug greifen und einfach ein wenig Platz abteilen werde. Das wird meine Onboarding-Box sein. Es ist über der Falte, es ist mein wichtigstes. Es bittet Leute, Mitglied zu werden oder zumindest den Kurs zu probieren. Was ich gerne tun würde, ist, ich bin schwer mit einer weißen Füllung, die Grenze hier, ich werde ein wenig ändern, um dunkel zu sein. Sie wissen, wie ich sage, drehen Sie nicht zu viel Kommissionierung Schriftarten und Farbe. Manchmal kann ich mir selbst nicht helfen. Aber ich habe gerade ein etwas dunkleres Grau ausgewählt und ich werde dieses Grau während des Kurses wiederverwenden. So sehen Sie diesen kleinen Plusknopf hier, ich traf Plus, und es bedeutet, dass es leicht zugänglich ist. Ich werde das Gleiche für hier unten tun. Ich werde auf die Navigation klicken. Ich werde auf das blaue klicken, und ich werde das hinzufügen, so dass es schön und einfach wiederzuverwenden ist. Was ich auch tun werde, ist diesen kleinen Punkt hier zu treffen. Er kann für deine Farben herumgezogen werden. Ich ziehe sie nach links oben, damit er ganz weiß ist. Sie sich im Moment keine Sorgen um diese Navigation. Also habe ich wenigstens eine weiße Farbe und ein volles Schwarz. Also ziehe ich es einfach ganz nach links unten, klicke und ziehe an dieser Ecke vorbei. Also habe ich zumindest einige Grundfarben, mit denen ich anfangen kann zu arbeiten. Also werde ich ihn zurücklehnen, meine Navigation zurück ins Blaue. Warum benutze ich jetzt Blau? Es ist zufällig derjenige, der auf der Vorlage ist, und ich bin ungern, die Markenfarbe zu wählen, um zu verwenden, vielleicht das Grün aus der Farbe, die ich verwenden könnte. Nein. Du könntest Schwarz-Weiß gebrauchen. Das ist in Ordnung. Das wird meine Onboarding-Box sein. Was ich tun werde, ist nur sperren Sie es, erinnern Sie sich an Befehl L oder Control L auf einem PC, eigentlich ein bisschen Typ an der Spitze hier zuerst. Dies wird geschehen, wenn meine Onboarding-Nachricht weitergeht. Ich werde das nur zu einer größeren Schrift machen. Onboarding-Nachricht geht hier. Ich versuche, hier keinen echten Dialog oder kein aktuelles Marketingmaterial hinzuzufügen. Wieder, nur um es einfach zu halten, angesichts der Idee, was der Titel nützlich sein wird. Also, wenn ich jetzt ein Textfeld oder ein Eingabefeld möchte, dann gehe ich und bekomme von meiner Vorlage. Hier, mein Drahtmodell, habe ich mich umgesehen und ich habe festgestellt, dass es einen Formularabschnitt gibt. Dann schätze ich, es ist nur, den Stil auszuwählen, den du am meisten magst. Ich werde das hier schnappen. Ich werde es kopieren und es wieder in meine Option hier springen. Das funktioniert für mich. Anstatt eingegeben, werde ich in Namen setzen Ihren Kurs. Ich ging gerade über mein Ding, das keine Marketing-Nachrichten oder keinen tatsächlichen Typ hatte, aber konnte sich keinen besseren Weg vorstellen, es zu beschreiben, ohne tatsächlich den Text in diesem Fall zu schreiben. In Bezug auf den Text werde ich alles grau halten, es einfach langweilige Konsistenz durch die Drosselklappe halten, und ich werde hier ein kleines Pluszeichen hinzufügen, indem ich nur einmal klicke, Plus trifft, es auswählt, Ich könnte es ein bisschen dicker machen, so dass es gesehen werden kann, fett, Größe muss wahrscheinlich oben sein, 30 sogar, Black Arrow, bewegen Sie sich in Position. Das nächste, was ich will, ist ein Kontrollkästchen. Sie können dieses Ding herumziehen, wenn Sie wirklich an Sachen schnappen wollen. Normalerweise ist es wirklich cool. Was Sie tun können, ist, wenn Sie das ein bisschen schwer finden, ist, das loszulassen und einfach Ihre Tastatur zu benutzen. Ich benutze meine Pfeiltasten auf meiner Tastatur, um sie zu bewegen. Sie können Shift halten, und verwenden Sie die Pfeiltasten und es bewegt sich in großen Brocken, und ohne es bewegt sich nur in kleinen kleinen Stücken. Jetzt will ich ein Häkchen. Also werde ich wieder in meinen Drahtrahmen springen. Da ist eins. Das wird reichen. Ich habe ihn und ich kopiere es, schieb es rüber. Es wird irgendwo dort sein. Ich werde auf ihn doppelklicken, und ich werde sagen: „Verwenden Sie Beispielvideo.“ Ich werde meine Farbe verwenden, die ich durchgehend verwende. Als nächstes möchte ich eine Gleichheit setzen und jetzt werde ich hier einen Knopf setzen. Also werde ich hoffentlich einen schönen einfachen Knopf finden. Da ist ein Knopf für mich. Ich werde die Gruppierung aufheben. Das ist eine Einheit. Ich werde es kopieren, verschieben, einfügen, und das ist es, was ich verwenden werde. Dieser wird gleich sein, und dieser sagt „Vorschau“. Was ich tun könnte, ist es auszuwählen, es heilig zu machen. Jetzt werden Sie feststellen, dass es tatsächlich eine Gruppe mit der äußeren Box ist, aber es ist nicht verbunden. Ich werde die Gruppierung aufheben, damit ich sie hier in die Mitte ziehen kann. Nun in Bezug auf die Schriftgröße, habe ich beschlossen, für eine größere gehen, was haben wir hier? Vierzehn. Ich habe 16 und 14, also könnte ich das ein bisschen konsistenter machen. Du, du, du und du und du, alle werden auch 14 sein. Ich fühle mich, als wäre es eine bessere Schriftgröße. Es gibt etwas Seltsames, ich werde ihn loswerden. Eines der Dinge, die mir passiert, wenn ich hier entwerfe, ist, dass Sie sehen können, ich finde es schwer, beide Kanten zu sehen. Ich will bei 100 Prozent bleiben. Ich entwerfe es in der richtigen Größe, aber es ist schwer, beide Seiten zu sehen. Sie müssen dies ein- und ausschalten, wenn Sie arbeiten wie dieser Bildschirm hier ist ein MacBook Pro. Ich schätze, das ist 15 Zoll. Der Bildschirm ist also nicht ganz groß genug. Wenn du auf 13 bist, bist du in einer Menge Ärger. Aber hoffentlich arbeiten Sie vielleicht an einem externen Monitor. Das mache ich normalerweise, wenn ich nicht aufnehme. Ich habe nur einen extra größeren Monitor, 4K-Monitor, an den ich ihn angeschlossen habe, um von zu arbeiten. Ich werde das wenigstens zentriert machen, da drin. Das sieht schön aus. Nun, das Letzte, was ich vergessen habe, ist, Sie überspringen können, jetzt werden wir nicht mehr spannend, ich werde hier eine kleine Option hinzufügen, die sagen wird „Wählen Sie Ihre Datei und ein Plus.“ Ich werde die gleiche Schriftart und das gleiche Zeug wie diese verwenden, also was ich tun wollte, ist, dass ich tatsächlich in ein bisschen Stile eintauchen werde. Wir werden Stile auf dieser Ebene nicht zu sehr verwenden. Mit diesem ausgewählt, werde ich die Gruppierung aufheben, damit ich nur auf diesen Typ auswählen kann. Ich werde das öffnen, was mein Asset-Panel genannt wird. Also hier in Vermögenswerten kann ich etwas haben, das einen Charakterstil genannt wird. Es ist also wie Zeichenstile aus anderen Produkten wie Illustrator oder InDesign, wenn ich darauf klicke, ist es wie eine vorgefertigte Größe, die ich wirklich einfach wiederverwenden kann. Wenn ich auf ihn klicke und jetzt auf ihn klicke, passen sie alle zusammen. Wenn ich diese aktualisiere, indem ich mit der rechten Maustaste darauf klicke , werde ich später bearbeiten und sagen und entscheiden: „Eigentlich nein. Ich denke, 16 müssen benutzt werden.“ Sie können sehen, dass alles läuft und aktualisiert wird. Sie können sehen, dass dieser nicht Teil dieses Stils war, aber überschritten einige Hoo-Do-Magie, wo er in das Dokument gelangt und diejenigen, die genau gleich sind und diese auch aktualisiert. Es ist super nützlich. Eigentlich werde ich die auf 14 zurückdrehen. Eine Sache, die ich tun könnte, um es wie ein Link aussehen zu lassen, auf den geklickt werden kann, ist eine Unterstreichung zu machen. Seltsamerweise kann man in XD noch keine Unterstreichungen machen, es ist sich eine vorstellen, also werden wir ein wenig schlaff schneiden, aber es hat eine der wichtigsten, also werde ich die Zeile zwei bekommen und eine Unterstreichung vortäuschen. Um ein bisschen Hierarchie zwischen dem Wichtigsten und dem Nicks-Bit anzuzeigen , könnte ich tatsächlich eine etwas andere Größe verwenden, 14 und dies in anpassen. Sie können darunter gehen. Sie können unser Beispielvideo verwenden oder Ihre eigene Datei auswählen. Wenn wir zu einer High-Fidelity-Version kommen, werde ich in der Lage sein, das viel mehr zu zeigen und zu klären. Ich kämpfe mit ihnen. Ich möchte wirklich etwas Zeit damit verbringen, das wie eine zweite Option aussehen zu lassen, aber wir werden es dort für den Moment lassen. Gehen wir zum nächsten Video. 9. Kostenlose Icons für Adobe XD und UX/UI-Projekte: Hey, da in diesem Video werden wir gehen und Ikonen finden. Sie können sehen, das Video hier ist ein Wandbild Symbol dort, es gibt ein Bild eins. Also werden wir gehen und zeigen Ihnen die wichtigsten Orte zu gehen und sammeln konsistente Symbole und diese drei wichtigsten Orte, und dann legen wir das wirklich schnell. Nur den Rest der Seite und wir werden in unserer Fußzeile überprüfen. Also gehen wir und machen das jetzt. Also will ich ein paar Icons. Ich schaue mir meinen Wireframe hier an und ich habe eine große Box darunter, die dieses automatische Abspielvideo haben wird, dieses „How to“ -Video. Darunter gibt es eine große Infografik. Also brauche ich ein paar Symbole, ich brauche ein Video, ich brauche einen Stummschaltknopf und ich brauche ein Symbol, das ein Bild zeigt, weil ich offensichtlich keine spezifischen tatsächlichen Bilder und bestimmte Videos verwenden möchte. Eine kleine Randnotiz, Sie können tatsächlich Videos, spielbare Videos innerhalb von XD im Moment setzen . Also wollen wir ein paar Symbole. Es gibt ein paar Orte, um sie zu bekommen. Einer der einfachen Orte wird von Adobe geliefert. Klicken Sie also auf Ihr Creative Cloud-Logo und es ist hier oben auf einem Mac, und es befindet sich unten rechts auf einem PC. Sie möchten zu Assets und dann Market gehen, dann klicken Sie auf dieses kleine Suchsymbol und geben Sie dann das Symbol ein, das Sie suchen. Anstatt das Video zuerst zu machen, machen wir Bild, weil ich hier kein gutes Video finden konnte, aber Sie können eine gute Bildversion finden. Das ist also eine vernünftige, konsistente, wie das, was ich als Platzhalter für ein Bild erwarten würde. Sie können auf sie klicken. Überprüfen Sie, dass dies eine skalierbare Vektorgrafiken SVG ist. Wenn Sie nicht an SVGs gewöhnt sind, sind sie erstaunlich und sie sind bekannt. Sie sind wie EPSs aus den alten Zeiten. Sie sind austauschbar, aber sie sind Vektor, was schön ist. Klicken Sie auf Herunterladen. Wohin werde ich es herunterladen? Ich werde eine neue Bibliothek für dieses Projekt erstellen. Ich werde diesen einen Instructor anrufen. Schreiben wir das Hauptquartier, den Namen der Firma. Hoffentlich wird es dort heruntergeladen. Sie können sehen, dass es sich hier synchronisiert. Es dauert eine kleine Sekunde. Wenn ich zurück in XD springe. Nun, wenn ich zu Datei gehe, öffne meine CC Libraries, das ist, wo ich es t gespeichert habe, und Sie können hier sehen, ich habe ein nicht unterstütztes Element. Das ist wohl ein bisschen ein Problem. XD ist neu und unterstützt SVGs noch nicht. Wenn Sie ein JPEG oder ein PNG heruntergeladen haben, funktioniert es, aber nicht SVGs im Moment. Es gibt eine einfache Problemumgehungen und ich bin sicher, dass sie hart arbeiten, um das zu aktualisieren. Lass uns das schließen. Ich finde, es ist einfach, in so etwas wie Illustrator zu gehen. Öffnen Sie Ihre CC Libraries von hier aus, suchen Sie die Bibliothek, an der wir arbeiten, Instructor, HQ, da ist es, doppelklicken Sie auf sie und wählen Sie sie aus. Kopiere sie. Ich habe gerade auf Bearbeiten, Kopieren und dann in XD Einfügen gegangen. Kein großes Drama. Eine Sache, die ich tun möchte, ist, dass ich die Farbe ändern möchte, und Sie können sehen, weil es gruppiert ist, können Sie die Farben nicht sehen. So können Sie die Gruppierung aufheben. Ich habe gerade die Verknüpfung Befehl, Shift G auf einem Mac, und seine Steuerung, Shift G auf einem PC oder hier oben unter Aufheben der Gruppierung verwendet. Cool. Also habe ich es ausgewählt, ich werde eine der Farben auswählen. Das ist eines der Symbole, die ich will, ich werde es jetzt verkleinern. Wenn Sie die Umschalttaste gedrückt halten, während Sie in beiden Ecken ziehen, wird dies proportional ausgeführt. Jetzt, ohne die Schicht gedrückt zu halten, können Sie sehen, dass es ein bisschen Rakel ist. Eine weitere nette Sache, wenn Sie die Umschalttaste gedrückt halten, halten Sie die Alt-Taste auch auf einem PC oder Option auf einem Mac gedrückt. So verschieben und Option zusammen, während Sie eine Ecke ziehen und es geht von der Mitte. Es bringt meins zu einer verhältnismäßigeren Größe. Das ist eines der Symbole, die ich will. Ich brauche noch zwei weitere, zeige dir zwei andere Orte. Also einer der nützlicheren ist hier auf einer Website, es ist material.io, also wird dies von Google ausgeführt. Wenn Sie zu /icons gehen, gibt es eine Reihe von coolen Icons in hier, und die coole Sache über sie ist, dass sie sehr gut betrachtet und verwendet viel durch sagen, der Chrome-Browser, wie wir jetzt schauen, sowie über alle Android-Handys. Also verwenden Sie dieses Suchsymbol hier und ich werde in Video setzen. Sie können sehen, dass das nicht der ist, den ich will. Das ist die Art von Sache, die ich denke, wird dafür arbeiten oder einen Teil davon sagen. Es liegt an dir, was du fühlst, könnte funktionieren, ich werde auf diese klicken. Was Sie tun können, ist, Sie können sie wählen, welche Farbe Sie herunterladen möchten und die Größe. Es spielt keine Rolle, die Größe, weil es ein SVG-Format sein wird. Denken Sie daran, dass Vector Zeug, das ist fantastisch. Also klicken Sie darauf und es wird ein SVG für Sie herunterladen. Wenn Sie ein PNG wollen, können Sie es von hier bekommen. Ich habe sie bereits für uns heruntergeladen und sie sind in deinen Übungsdateien. Also, was Sie tun können, ist, dass Sie zurück in XD gehen können. Sie können zur Datei gehen und Sie können zum Importieren gehen. Dort finden Sie Ihre Übungsdateien, finden Sie Symbole, und es gibt ein paar hier, die wir verwenden werden. Ich werde dieses benutzen, es steht IC Webcam. Ich werde auf Importieren klicken und eine kleine Webcam bekommen. Wieder muss ich die Gruppierung aufheben. Kommt einfach als eine nette kleine Gruppe, mit ihm ausgewählt, jetzt werde ich das Blau auswählen. Ich werde es wahrscheinlich die größere Größe bekommen, und jetzt werde ich gehen, um die letzte an meinem letzten Platz zu finden, die mein Stumm-Symbol ist. Schauen wir uns an, woher wir das bekommen können. Dies ist der letzte Ort, es gibt Millionen von Orten, um Symbole zu finden. Ich weiß über iconfinder.com ist ein wirklich schöner Ort hier drin, wenn ich nach einem Stummschaltknopf suchen möchte. Sie können sehen, dass es einige kostenpflichtige Optionen gibt, aber Sie können auch sagen, Vector, ich will Free, und ich möchte, dass es No Link Back für den kommerziellen Gebrauch gibt. Ich gehe oft zu diesen und du wirst hier viele Optionen finden. Das Schöne an dieser Seite ist, dass man oft eine schöne konsistente Gruppe finden kann. Nehmen wir an, Sie entscheiden, dass Sie diesen Stil mögen, aber wenn ich darauf klicke, werden Sie feststellen, dass es Teil einer größeren Gruppe ist, die super nützlich sein kann. Aber in meinem Fall möchte ich etwas ganz Einfaches, also werde ich dieses verwenden. Ja. Ich möchte die SVG-Option und ich werde sie herunterladen. Ich habe schon eine heruntergeladen und wir können es jetzt holen, aber das sind die drei Orte. Sie können es vom Adobe-Markt erhalten. Sie können sie von material.io/icons erhalten, oder Sie können sie von Iconfinder erhalten. Ich finde, dass Sie alle drei dieser Orte nutzen müssen, um alles zu finden, was ich brauche. Es gibt noch keinen Ort, der alles hat, was ich will. Also lasst uns den letzten mitbringen, also gehe ich zur Akte. Ich werde gehen, um zu importieren und es gibt eine Option in hier genannt Lautstärke aus, ich sehe die Lautstärke aus. Eigentlich etwas anders, als ich vorher angeschaut habe. Ich werde die Gruppierung aufheben. Klicken Sie auf dieses Zeug, ich werde das blaue Symbol auswählen. Jetzt werde ich anfangen, diese in meinem großen Squeeze hier zu verwenden. Also lasst uns das machen. Ich werde verkleinern und ich will, dass du, mein Freund, ich habe es freigeschaltet und ich will auch diesen Teil. Also habe ich die Umschalttaste gedrückt und auf beide geklickt. Wenn ich nun Alt halte, während ich sie ziehe, holen wir diese beiden großen Jungs hier. Also gibt es 1, 2, und dann gibt es noch einen hier unten auf meinem kleinen Mock-up. Großartig. Dieses Top ist das Video, und dieses hier ist das Bild. Gruppieren Sie diese zusammen. Großer Dan. Was Sie jetzt tun könnten, ist eigentlich nur schnell vorwärts bis zum Ende und gehen Sie zum nächsten Video, denn jetzt werde ich einfach durchgehen und tatsächlich diese Dinge zusammenstellen. Also nicht super aufregend. Es liegt an dir. Es wird Auto Playing sein. Wie man Video. Setzen Sie das hier in die Mitte und es wird so sein, aber es wird stumm geschaltet werden, um damit zu beginnen. Deswegen wollte ich diese Ikone. Ich werde es tatsächlich mit Weiß füllen und sehen, ob ich es wieder greifen kann. Halten Sie Shift gedrückt, verwenden Sie meine Pfeiltasten, um es zu bewegen, das ist meine Lösung, um zu versuchen, das zu zeigen. Lass es uns in diesen gedämpften, das ist der Typ und stecken ihn in die Mitte. Ich mache Asymptote, großartig. Nun, dieser hier ist etwas Ähnliches, das ist das Line-Up. Dies wird meine Infografik für das Ökosystem sein. Nun, weil dies nicht wirklich gehen, um die Tests zu verwenden. Wir mussten nicht explizit sein, was auch immer die Sache ist. Ich liebe Wireframes, die Ideen runter zu bringen, aber nicht die gesamte Benutzer-Tests, die mit einer vollständigen Hi-Res-Version durchgeführt werden sollten. Es werden Leute sein, die mit mir darüber streiten, aber es ist in Ordnung. Sie auf Boarding-Nachricht. Diese hier sind zwei kleine Listen, was ich tun werde, ist abgeschnitten, um zwei Stücke zu zeigen. Die Folie hier, wird Schritt für Schritt Liste für die Vermarktung selbst sein . Dieser hier drüben wird der gleiche sein, aber dieser vermarktet Ihren Kurs, ich habe ausgerichtet, trennen Sie sie in der Mitte, Sie können dorthin gehen, Sie müssen tatsächlich in der Mitte sein und ich werde zwei von diese Bilder gedrückt halten, während ich ziehe oder Option auf einem Mac. Dieser hier wird für mein Dashboard sein. Es wird ein Beispiel für Trainer-Dashboard geben. Dieser ist ein wenig besonders wie in, ich möchte wirklich zu meinem Drahtmodell springen und finden, dass es Call to Action gibt. Es gab ein bisschen hier mit Grafiken und so, es ist hier unten, Preisgestaltung und Tabellenauswahl. Ich möchte anfangen, einige dieser Tortendiagramme und so zu packen, aber ich habe immer noch das Gefühl, dass es wahrscheinlich zu viel Detail in diesen für das, was ich im Moment brauche. Ich werde es einfach halten. Ich werde dies an meinem Beispiel von Benutzer-Dashboards halten. Es wird ein anderes Bild sein und hier drüben wird mein Download der App sein. Hier wählen Sie sie alle aus und laden Sie sie herunter. Wird nur eine iPhone-App setzen. Das wurde vom Kunden angefordert, wir werden sicherstellen, dass das eingeschlossen wird. Das letzte, was hier unten war, würde eine Feature-Liste sein. Ich wecke nur diesen einen Artikel auch auf, dieser hier und das wird meine Feature-Liste sein. Jetzt in diesem Fall brauche ich ein bisschen Körpertext, ich werde ein paar Loren ipsum greifen. Es war noch nichts in XD eingebaut. Sie könnten entweder InDesign verwenden oder tun, was viele Leute tun und zu lipsum.com gehen. Das Schöne an der Seite, es ist hässlich, aber man könnte sagen, wie viele Wörter Sie wollen. Ich möchte, dass ich eigentlich nur einen Absatz bitte. Es erzeugt als ein sehr großer Absatz. Ich werde nur diesen kleinen Faust Satz davon nehmen. Ich werde das nur als Platzhalter Text verwenden. Es ist sehr üblich, eine gemischte Länge zu verwenden, um dies zu tun. Ich werde meinen Arial benutzen. Ich werde sicherstellen, dass ich bei meinen 100 Prozent bin und das Zeug hier, 14 ist zu klein. Moment gibt es keine Aufzählungspunkte in XD. Sie können entweder eines aus einem anderen Programm kopieren und einfügen oder die Option acht gedrückt halten. Halten Sie die Option auf einem Mac oder O einen PC gedrückt, klicken Sie einfach auf die Acht, die Nummer acht Taste gibt Ihnen die Standardeinstellung. Ich werde das immer und immer wieder benutzen, was ich mache, ist es zu kopieren und einfach ein paar von ihnen einzufügen und sie dann mit dem Zeilenabstand hier drüben auszuräumen. Wie viel? Stellen Sie sicher, dass Sie zurück zu Befehl eins gehen und dann der Zeilenabstand 32 sein wird, geben Sie sie fallen ein. Das wird es für den Moment sein. Platzieren Sie einfach Halter dafür im Moment, zwei Spalten vielleicht. Alles klar, großartig, das ist das meiste davon. Eines der letzten Dinge, die ich tun möchte, ist eine Platzhalter-Fußzeile von hier zu holen. An der Spitze waren diese UI-Elemente. Ich werde zu greifen, welche, ich bin im Moment nicht super besorgt, lassen Sie mich diesen Kerl hier greifen, ich werde es einfach kopieren, tippen Sie über Einfügen und passen Sie ihn hinein, heben Sie die Gruppierung auf, halten Sie Alt wie was haben wir für den Top-Typ oder Option auf einem Mac gemacht. Was ich tue, ist das jetzt stecken, so werde ich mein Apple-Tool tatsächlich greifen, ich benutze nie das Apple-Tool, ich habe eigentlich nur nicht auf die Kante hier klicken und Sie sind in der Lage, es zu ändern. Ich werde gehen und das ändern müssen, denn wenn Sie das als XD und ein paar andere Dinge lassen, kommt der Kunde einfach zurück und sagt: „Hey, nicht unsere Adresse“ und du wirst auf diese Weise in Schwierigkeiten geraten. Ich werde nur in und ich werde in Musterstraße setzen, Probe in Kalifornien ist in Ordnung. Unsere Nummer wird 0, 0, 0 sein und dies wird eine Probe sein. Wir könnten genauso gut Instruktor HQ setzen. Alles andere, das ich schnell ändern möchte, E-Mail-Adresse, die in Ordnung ist. Abonnieren Sie unseren Newsletter klingt wie etwas, was wir tun werden. Nur ein Drahtmodell und das passt zu dem Zeug an der Spitze. Wir haben ein Beispiel und wir haben Preise, wir haben uns anmelden. Ich denke, es gibt auch einen Login, Login. Es würden wir Copyright InstructorHQ 2018. Das kommt näher an unsere Homepage. Wir haben ein wenig gebraucht, um diesen Brocken in Gang zu bringen, aber Sie werden sehen, wie nach einer Weile Elemente herumliegen, die Sie wiederverwenden können. Sobald Sie Ihren eigenen Stil für einen Wireframe von dem, was ich mit Stil meine, wie Sie sehen können, dass dieser hier ist, finde ich hoch gestaltet und sieht hübsch und es ist gut. Aber ich finde, es war zu viel Zeit zu versuchen, es wirklich schön aussehen zu lassen, während das man sehen könnte, es ist hässlich, aber es ist funktional. Es wird keinen Test verwenden. Es ist an den Kunden gegangen, nur um all die verschiedenen Teile zu erklären und sicherzustellen, dass nichts fehlt, bevor wir gehen und Stunden damit verbringen, das Design zu machen, und Zeit mit den Schriften und den Bildern zu verbringen. In Ordnung, das wird es für dieses Tutorial sein. Lass uns in den nächsten springen, ist ein langer. Alles klar, gehen wir. 10. Prototyping und Interaktivität hinzufügen in Adobe XD: Hallo, da. Willkommen in diesem Tutorial, wo wir mit dem Prototyping beginnen und ein bisschen Interaktion hinzufügen. Sie können sehen, wie diese Drähte hier rumhängen. Was passiert ist, wenn ich auf „Play“ klicke, kann ich „Preview“ drücken und dann schließen und zurück gehen, so dass ein wenig Interaktion hinzugefügt wird , so dass wir aufhören können, sich um diese Kugeln zu bewegen und einige Tests zu machen, während Wir arbeiten. Lasst uns anfangen. Um mit dem Prototyping zu beginnen und unsere Wire-Frames zu verbinden, damit wir einige Interaktionen erhalten, müssen wir mehr als eine Seite haben. Wir haben einen Außenborder namens Homepage. Sie sind ein paar Möglichkeiten, eine neue zu machen. Sie können darauf klicken und gut, Trick, den wir bisher in diesem Kurs verwendet haben, halten wir die „Option“ -Taste auf Mac oder O-Taste auf einem PC gedrückt und klicken Sie dann auf das Wort „Startseite“. Sie können es einfach ziehen und eine neue erhalten. Ich will nicht all diese Elemente, also werde ich das nicht tun. Ich gehe, um rückgängig zu machen. Sie können zu Ihrem letzten Panel gehen und klicken Sie einfach auf diesen Kerl, klicken Sie mit der rechten Maustaste auf ihn und sagen duplizieren, und Sie werden zwei von ihnen haben. Ich will eine neue Seite. Um das zu tun, können Sie auch den Außenborder greifen und einfach einmal hier klicken. Sie könnten gehen und die Größe ändern, wenn Sie möchten. Wenn Sie eine andere Art von Dokument benötigen, können Sie hier unten sehen, es gibt die Apple, es gibt Google, es gibt Microsoft Web. So können Sie auf jeder klicken. Nehmen wir an, ich brauchte ein iPhone, und das wird es hinzufügen. Das ist einfach, Seiten hinzuzufügen. Bevor wir sie verbinden, müssen wir nur etwas zu dieser Seite hinzufügen , damit es etwas gibt, mit dem Sie eine Verbindung herstellen können. Wir werden das Onboard umbenennen und dieses wird unsere Vorschau-Optionsseite sein. Wenn die Leute hier auf dieses kleine Symbol klicken, werde ich hineinzoomen. Wenn sie darauf klicken, können sie entscheiden, welche Art von Vorschau mit, dass sie die Schülerseite oder die Lehrerseite sehen . Zuerst werde ich mir ein paar Stücke leihen. Ich werde dich schnappen. Ich werde dich auch schnappen. Noch etwas, was ich will? Aber eine SMS werde ich Sie sein. Kopieren Sie sie, klicken Sie auf diese Seite, fügen Sie sie ein, sie kommen für die Fahrt. Das sind die Bits, die ich will. Ich werde die Größe ändern, um so etwas und das mittlere zu sein. Ich werde diese beiden benutzen, ich halte Schicht, um sie beide zu schnappen. Betrachtet man meinen Drahtrahmen, einen handgezeichneten, habe ich zwei davon. Ich will, dass dieser sagt, zeig mir. Eigentlich möchte ich, dass sie beide sagen, zeig mir. Es ist dieser Text hier. Ich werde alle 16 Punkte für den etwas größeren Text verwenden. Hier drinnen möchte ich sagen, und was dein Student sieht. Der Kerl geht dorthin, ich werde sie ausrichten, so dass, wenn ich sie dupliziere und zur Hand komme, sagen, schauen. Du siehst als Ausbilder, ich werde interessiert sein zu sagen, ich benutze nur diese Sprache, um loszulegen. Es wird die Prüfung sein, die es mir erlaubt, mit der Tatsache zu arbeiten, macht mich seitdem tatsächlich. Ich fühle mich, als ob es nicht wäre. Ich bin mir ziemlich sicher, dass die Benutzerverkostung zurückkommt und gehen wird. Wir werden hier verwirrt. Aber okay, es ist Alpha-Star. Das andere, was ich will, ist ein Kreuz. Ich könnte das X auf meiner Tastatur verwenden, aber das sieht im Allgemeinen nicht so schön aus. Also werde ich hier reingehen und ein Kreuz finden. Da ist eins. Es ist ein praktisches kleines Dokument, dieser Typ, nicht wahr? Ich klicke auf ihn und gruppiere ihn. Ich will dich bitte. Ich werde ihn hier einfügen. Er wird hier rüber gehen und er kann blau bleiben. Jetzt werden wir das Ding als Prototyp aufbrechen. Ich habe zwei Seiten und möchte in der Lage sein, es zu prototypen und zu verbinden. Warum machen wir es jetzt und wir sind noch nicht fertig mit einem Drahtrahmen, ich finde, das ist eine wirklich seltsame Art, es zu tun. Was ich tun muss, während ich das entwickle, ist, dass ich es entwerfen und es sowohl auf einer Breite als auch auf einem Telefon testen muss , während ich arbeite, anstatt auf das Ende zu warten. Sie arbeiten zwischen Design und Prototyping ziemlich viel. Wir sind im Entwurfsmodus. Sie können sehen, dass wir unsere Gestaltungsmöglichkeiten haben. Wenn Sie einen Prototyp haben, können wir auf diese Weise Interaktivität hinzufügen. Was ich gerne tun würde, ist zunächst, das ist meine Homepage. Ich bin unklar. Das ist irgendwie zu Hause und es wird sein, was auch immer die vorherigen Statistiken es. Dann Prototyp, und Sie werden feststellen, dass keine der Optionen ändern, fehlt uns ein kleines Eigenschaftenfeld hier. Aber was wir tun können, ist, was ich tun wollte, ist, wenn auf diese Vorschauschaltfläche geklickt wird, nicht der Text, dieser Text ist für sich selbst oder die Box. Ich werde sie beide auswählen. Sehen Sie dies, wenn ich im Hintergrund ausklicke und dann auf Umschalttaste klicke, klicke auf beide, ich kann sie gruppieren. Ich benutze die Abkürzung, aber der lange Weg ist da. Mit ihnen beide ausgewählt, ist dies eine kleine Option, die herausstockt, das ist, wie wir nach oben verbinden. Ich werde etwas rauszoomen. Ich klicke auf „Halten“ und ziehe es. Das heißt, wenn auf diese Schaltfläche geklickt wird, geht es hier zu dieser Seite. Jetzt erhalten Sie einige Optionen, standardmäßig wird es aufgelöst. Dies wird wie ein Fade gehen über und es gibt ein bisschen eine Leichtigkeit , die es nur schön in Bezug auf die Bewegung aussehen lässt. So lange dauert es. Die coole Sache daran ist, wer auch immer das in XD getan hat, sie sind alle ziemlich süß zu beginnen, und ich muss sie nicht wirklich ändern. Lassen Sie uns dieses Ding testen und herausfinden, was wir als Nächstes tun müssen. Um es zu testen, verwenden wir diese kleine Play-Schaltfläche oben die hier, es ist Desktop-Vorschau, weil wir eine Vorschau einer Webseite, ist es am besten, um eine Vorschau tatsächlich auf Ihrem Laptop. Wenn Sie eine App entwerfen würden, würden Sie direkt auf das Handy gehen, um es zu testen. Wir werden ein wenig später über mobile Tests sprechen , wenn wir anfangen, die App-Version davon zu erstellen, aber wir werden jetzt „Play“ drücken. Hier ist das wie ein kleines Fenster, das sich öffnet und es uns erlaubt, unsere Tests durchzuführen. Alles klar, jetzt werden wir auf die Vorschau klicken und Sie sehen, dass das kleine Kreuz den Glauben aufzulösen hat. Das gefällt Ihnen vielleicht nicht, Sie können es ändern und ausschalten. Jetzt kann ich auf alles klicken. Wir stecken fest. Ich werde die Vorschau schließen. Hier muss ich ein paar andere Bits machen, damit das funktioniert. Sie können sehen, dass es verbunden ist. Eine andere Möglichkeit, zu diesem Ding hier zu kommen, heißt es Beispiel, ich werde das als meine Schaltfläche verwenden, um über zu kommen. Aber eines der Probleme ist, dass, dass Zecken ziemlich klein ist, so wäre es wirklich üblich hier in XD auch. Wenn du hier einen Knopf hast, mache ich einen gefälschten kleinen Knöpfen. Ich gehe zurück zu Design. Ich werde nur einen großen Bereich machen, um das zu treffen. Ich werde den Rand ausschalten, ihm die gleiche blaue Farbe geben, damit er genauso aussieht wie der Hintergrund. Was ich tun möchte, ist sicherzustellen, dass dies den Text senden. Ich werde nach vorne bringen. Schnappen Sie sich mein Rechteck und es ist ein wenig schwer zu sehen, ich denke, aber ich habe Shift klicken Sie auf sie beide und ich werde sie gruppieren. Das bedeutet, dass nur der anklickbare Bereich mehr ist. statt nur ein kleines Ticks, die schwer zu klicken sein können. Ich werde es schön und groß machen, vor allem, wenn wir auf mobile Versionen von Prototypen kommen. Zurück zum Prototyp. Verkleinern Sie ein wenig. Ich will, dass dieser Kerl zu demselben geht. Es spielt keine Rolle, wo Sie darauf klicken und es wird zum richtigen Punkt springen. Wollen wir uns auflösen? Wir testen und zeigen Ihnen einige der anderen. Wir könnten rechts rutschen. Sie können entscheiden, was Sie verwenden möchten. Was ich auch tun wollte, ist dieser kleine Kreuzknopf, ich möchte, dass es zu sammeln, um zurück zu dieser Seite hier zu gehen. Was ich den gleichen Trick tun werde. Also zurück zum Design, greifen Sie dieses Werkzeug, zeichnen Sie etwas, das leichter zu treffen ist, schalten Sie die Grenze aus. Es ist einfacher, dies nach vorne zu bewegen als das andere auf der Rückseite. Geh hinter diese Kiste, bring ihn nach vorne, finde meine Pucks. Ein bisschen hart. Ich benutze meine Pfeiltaste, nur um sie herum zu tippen. Zweite halten beide Shift gedrückt, um zu klicken beide, gruppieren sie. Jetzt habe ich einen Prototyp. Was Sie vielleicht finden, ist, dass Ziehen und Ablegen ist, weil Sie verkleinern und dann gehen und ziehen Sie es hier und das funktioniert gut. Aber manchmal ist es eigentlich einfacher. Oder ich möchte das rückgängig machen. Das Rückgängigmachen funktioniert nicht. Das normale, typische Rückgängigmachen, wenn Sie sich im Prototyp-Modus befinden. Was Sie tun können, sagen Sie, dass Sie das brechen wollen, klicken Sie einfach und ziehen Sie es in Niemandsland und das wird es trennen. Ich finde oft, wenn ich in dieser Nähe bin, Ich will nicht zu verkleinern, um zu versuchen und das App-Board zu finden, ist man einfach auf diese klicken, in diesem Fall würde vorherige Außenborder funktionieren oder Homepage. Ich werde wieder auf die Homepage aussuchen und du wirst sehen, dass es schon so springt. So oder so wollen Sie es tun. Lassen Sie uns jetzt eine Vorschau anzeigen. Lass uns spielen gehen. Für jetzt können wir darauf klicken. Überqueren Sie das. Kam über eine kleine Folie nach links, was seltsam Beispiel ist. Ich mag das Rutschen nicht. Es funktioniert, aber ich werde verwirrt. Es gibt eine besondere Zeit und einen Ort vor allem durch Telefone, wo die Folie funktioniert, nicht durch Websites, weil keine Websites tun die Folie Sache. Es ist einfach seltsam. Wir werden es ausschalten. Die andere Sache ist, dass dies ein separates Fenster ist. Jetzt arbeite ich momentan an an meinem Laptop für diesen Schulungskurs. Aber was ich mache, wenn ich normal arbeite, ist, dass ich eine große volle kam auf, von der ich arbeite und ich habe meinen Laptop auf der Seite davon. Ich arbeite gerne von zwei Monitoren aus. Was ich normalerweise mache, ist, dass ich zwei Monitore habe. Ich habe diesen Laptop und ich habe einen großen Monitor, für den ich hauptsächlich gearbeitet habe. Ich werde sie beide nebeneinander öffnen und ich werde dieses Panel auf einem von ihnen haben, normalerweise in meinem Laptop und ich werde an diesem Topf in meinem großen Hauptmonitor arbeiten. Das coole Ding daran, es ist ein Live-Updates. Wenn du Sachen hier reinziehst, wird dieses Ding aktualisiert. Ich habe diese 100 Prozent der Zeit offen. Ich könnte Anpassungen vornehmen, sehen, wie es bei 100 Prozent aussieht und mit den Interaktionen zum Prototyp herumspielen , so dass ich diesen „Play“ -Button nicht weiter schneiden muss. Wie auch immer, ich muss es schließen und im Moment wieder öffnen , weil ich nur auf dem Laptop warte. Was ich gerne tun möchte, ist hier ein Beispiel. Ich mag die Rutsche nicht. Ich werde nur gehen, um mich aufzulösen. Wahrscheinlich braucht nur einen Sprung durch auflösen sieht schön aus. Klicken Sie hier auf diesen kleinen Punkt. Sie können auf beiden Seiten klicken und ich werde gehen, um auch aufzulösen. Das sind die Grundlagen für das Prototyping. Wir gehen durch und bauen mehr Seiten und Prototypen mehr , während wir weitergehen, aber das ist eine Einführung in sie. 11. Produktionsvideo Studentenansichten: Hi, da. Dies ist ein Produktionsvideo. Was ist ein Produktionsvideo? Dort muss ich ein paar Sachen machen, damit dieses Tutorial weitermachen kann. Du kannst mir folgen oder überspringen, weil wir nichts Besonderes Neues lernen werden. Sie sehen einige der Workflows, die ich durchmache, so dass es interessant sein kann, oder Sie können einfach auf das folgende Video überspringen, wo wir einige neue Sachen lernen. In diesem speziellen Video, was wir tun, ist, dass wir diese Seite erstellen und diese Schaltfläche verbinden, so dass springt zu diesem, erstellen Sie eine Kreuz-Schaltfläche, um zurück in diese gehen. Es ist nichts wirklich los hier, weil der Kunde in seinem Brief uns gebeten wird, nicht an der Studentenansicht zu arbeiten. Sie haben bereits einen Blick auf die Schüler. Sie wollen, dass wir einen Prototyp für die Trainer- oder Ausbilderansicht erstellen. In Ordnung, lass uns ins Video gehen und anfangen, es zu machen, oder du kannst es überspringen und ich werde nur ein kleines bisschen beleidigt sein. Dann geh. Zuerst, starten wir eine andere Seite brauchen, ich finde, das ist leicht zu halten Alt und ziehen Sie diese einfach über, so dass Sie ein Duplikat erhalten. Ich liebe alle rosa Boxen, die automatische Abstände. Ich kann das umbenennen und das wird Student View sein. Ich werde nur ein Cop-Out-Stücke hier raushalten. Ich werde all das auf Sie weg auswählen. Ich will nicht den Knopf, ich will nur die Tics und die Nähe. Hier drin habe ich ein paar Tics. Das sieht der Student das Front-End der Plattform. Denken Sie daran, dass der Kunde uns gebeten wird, dies nicht zu entwerfen , also lassen wir es einfach hier drin, damit der Knopf irgendwo hin kann. Was ich tun könnte, ist, denn 16 ist gut, ja, das ist endgültige Größe und ich werde hier ein Kreuz setzen. Was ich tun könnte, ist, das in einen größeren Knopf zu verwandeln. Ich hebt die Gruppierung auf und ich wähle es aus. Aufheben der Gruppierung funktioniert nicht. Es funktioniert total. Ich werde die Grenze wieder drauf setzen und versuchen, es zu einem perfekten Kreis zu machen. Der einfachste Weg ist, sie nicht zu verknüpfen, es nur um sicherzustellen, dass sie die gleiche Höhe und Breite haben. Wählen Sie beide horizontal ausrichten, vertikal ausrichten, gruppieren Sie sie. Cool. Dies wird auf dieser Seite sein, nicht viel los und ich werde sicherstellen, dass es in der Mitte ist. Jetzt lasst es uns ansprechen. Wir gehen zum Prototyp. Ich werde ein paar Dinge tun. Es ist, dass, wenn auf diese Schaltfläche geklickt wird, die Show Me, Ich werde es mit der blauen Box zu gruppieren und Sie können gruppieren, während Sie in Prototyp sind, oder Design, das ist irgendwie cool. Wenn Sie darauf klicken, gehen Sie zu dieser Seite hier. Was wir tun werden, ist aufzulösen, und wir werden damit weitermachen. Wenn sie hier auf diesen Kreuz-Button klicken, werde ich sie zurück auf die Homepage oder diese Vorschau-Option, wahrscheinlich Homepage. Ich werde das testen, um sicherzugehen. Machen wir diesen schnellen Test, um zu sehen, wo wir sind. Sie würden einen Klick auf die Vorschau haben und Sie können sehen, was der Schüler sieht. Das sieht der Student, schließen Sie das zurück zur Homepage. Ich denke, das ist wahrscheinlich der beste Weg, es zu tun. Deshalb mag ich den Prototyp öffnen und arbeiten, während du dich entwickelst nicht bis zum Ende wartest. Das wird es für das hier sein. Lassen Sie uns diese schließen, gehen Sie zu Full View Command 0 oder Control 0 auf einem PC. Speichern wir es und gehen Sie auf das nächste Video. 12. So erstellt und verwendet man Symbole in Adobe XD: Hallo da. In diesem Video werden wir uns Symbole in XD ansehen. Also, warum sie gut sind, ist, weil, wenn ich ein Symbol habe, Sie hier sehen können, ich habe die Navigation auf mehr als einer Seite verwendet , und wenn ich es aktualisiere, sie aktualisieren und ändern sich, was für Dinge , die in vielen Dokumenten wie Fußzeilen und Kopfzeilen wiederverwendet. Gehen wir und schauen, wie man diese jetzt erstellt. Um ein Symbol zu erstellen, werden wir dies sowohl als Kopf- als auch als Fußzeile wiederverwenden. Ich werde eine neue Seite erstellen, und es gibt viele Möglichkeiten, ich zeige Ihnen immer wieder verschiedene Wege. Ich gehe zurück zum Seitenwerkzeug, und klicke darauf, was meine Standardeinstellung ist, die ich am Anfang verwendet habe Ich ziehe es durch Ziehen des Namens darunter, und gib ihm einen Namen, und ich nenne dies die „Instructor Armaturenbrett“. Ich möchte es nur ein bisschen ausdehnen, cool. Denken Sie also daran, dass der Vorteil für die Verwendung eines Symbols ist, dass ich sie alle miteinander verbinden kann und wenn ich Updates für die Navigation mache, sagen wir auf dieser Homepage hier, wird es für alle Instanzen davon aktualisiert. Also werde ich hier hineinzoomen, was ich will, ist, dass ich das alles will. Beginnend hier oben, im grauen Bereich mit meinem schwarzen Pfeil, klicke ich nur, halte und ziehe, lege einfach Kurse wie Top kleines bitty Bit ab. Was ich tun möchte, ist, Sie können sehen, dass ich Lose ausgewählt habe, aber auch diese hellblaue Sache ausgewählt habe, die ich benutze, um mir meine Breiten zu geben. Also werde ich „Shift“ halten und einfach auf Home klicken, um sie loszuwerden. Ich habe hier alles ganz oben. Woher weiß ich, ich ziehe es ab, um zu überprüfen. Sie kamen alle zur Fahrt mit. Also, was ich tun werde, ist, dass Sie sich vielleicht auf Ihrem „Ebenen“ -Panel befinden, Sie möchten hier zu diesem Top gehen. Das Bedienfeld „Assets“. Innerhalb hier, etwas werde ich gehen „Symbole“ klicken Plus, und das ist es. Das ist jetzt Symbol, das ich wiederverwenden kann. Lassen Sie mich halten und ziehen Sie es und das ist nützlich, ich denke, ich habe eine nette kleine Sache, die ich wiederverwenden kann, aber ich könnte kopiert und eingefügt, dass ich denke,. Was wirklich nützlich ist, ist jetzt, wenn ich zurückkomme und sagt, tatsächlich benutzen einige Leute „LOGIN“ als ein Wort, dann sollten es zwei Wörter sein. Es liegt an dir. Aber sagen wir, wir waren davon überzeugt, dass es Log-Space in sein sollte. Also haben wir das getan, aber standardmäßig wird es tatsächlich zu einem eindeutigen Symbol. Also hat sich dieser hier oben noch nicht geändert. Was wir tun müssen, ist mit der rechten Maustaste auf diesen Kerl und sagen „Alle Symbole aktualisieren“. Es aktualisiert Symbol in der Bibliothek. Ich muss rauszoomen, das hier. Kommen Sie auf drei, um es zu vergrößern, zoomen Sie ein bisschen mehr. Sie können sehen, dass es Login ist. Das ist also der Pflock für Symbole. Sie erhalten, um sie zu diesem Ding zu verknüpfen, so dass leicht ziehen und wiederverwendbar, aber war wirklich super-nützlich, da Sie eine aktualisieren und sie alle aktualisieren würden, so offensichtlich gut für die Navigation. Alles hier oben ist auf allen Seiten, also werde ich das Gleiche hier unten machen. Ich werde meinen Freund schnappen. Ich werde Shift klicken Sie auf diesen Kerl, also habe nur das ausgewählt, überprüfen Sie einfach, dass ich alles habe und ich werde ein Symbol zu bekommen. Sie können sie noch nicht benennen, die Symbole sind für diesen etwas klein. Es ist in Ordnung. Ist das die richtige Seite? Ist es. Zieh ihn an, komm her, und da gehst du. Wenn ich jetzt eins aktualisiere, werden sie beide aktualisiert. Ein paar Dinge, die ich tun möchte, um das zu beenden, ist, dass ich den großen blauen Streifen in den Hintergrund stellen möchte , damit ich weiß, wo die Kanten sind, also kopieren Sie und hier drüben, einfügen, falsch. Ich will Sie und gehen, um es zu entsperren. Kopieren Sie es, sperren Sie es erneut, und dann kommen Sie hierher, klicken Sie auf dieses Dashboard. Wenn Sie Paste drücken, die coole Sache darüber, es geht perfekt, wo es sollte. Das einzige Problem ist, dass es wahrscheinlich über alles andere ist. Also werde ich einfach mit der rechten Maustaste klicken und sagen: „An die Rückseite senden“, und dann kann ich entweder Befehl L oder Control L verwenden oder ich kann mit der rechten Maustaste klicken und sperren. Cool. Es gibt mir meine Grenzen. Was ich jetzt brauche, ist ein Menü auf der linken Seite. Ich schaue mir hier meinen handgezeichneten Drahtrahmen an. Also will ich das linke Navi und ich werde zu diesem Ding hier springen und ich werde ein linkes Navigationsgerät finden, wo kann ich eins sehen? Hier drüben gibt es eine Navigation, die gut aussieht. Es wird sowieso mein Anfang sein. Ich werde Sie schnappen, kopieren Sie es auch, ziehen Sie es hinüber, fügen Sie es ein, und das wird mein Anfang für dieses sein. Ich werde die Gruppierung aufheben, weil es ein paar Dinge sind, die ich tun muss. Ich muss den Boden klären und links, um das in ein bisschen aufzuräumen. Ich brauche keinen Weg, um dort zu bleiben. Wenn Sie hier kommen, benötigen Sie einen harten Klick. Ich möchte das Wort Dashboard, also werde ich Sie wahrscheinlich löschen, bewegen Sie sich hier nach oben. Ich werde dieses Holz Armaturenbrett machen, aber ich werde meine 14 benutzen, etwa 75 Prozent, es ist schlechte Angewohnheit. Sie müssen bei 100 sein, damit Sie Schriftgrößen machen können, ich denke, dieser wird Dashboard sein. Armaturenbrett Ich werde das mutig machen. Cool. Hier unten. Eigentlich mache ich diese 16 mit 12 und 16, um Höhen zu unterscheiden. Nun, was ich auch tun werde, ist mein Top-Tool greifen, klicken Sie hier. Das sind die Zecken, die wir jetzt mit meinem Murmeln verwenden werden, weil ich nur Schriftarten ausfülle. Um ehrlich zu sein, wenn es in dieser Klasse noch mehr Genie geben wird, für das du vielleicht rumhängen möchtest, denke ich an Genie. Also stecke ich die einfach rein. Was ich tun könnte, ist, einfach die kleinen Punkte in die Front zu legen , damit sie wie ein Untermenü aussehen. Denken Sie daran, dass ich in setzen, es hält Alt und trifft 8, oder Option A auf einem PC, weil dies keine Aufzählungspunkte hat, um mit zu beginnen, weil ein Dashboard Sie für die verschiedenen Dinge, die Sie wählen können. Ehrfürchtig. Eine letzte Sache, die auf meinem kleinen handgezeichneten Drahtrahmen hier ist, und ich habe diese kleine Anzeige von der Homepage bekommen. Jetzt ist es keine ganz einfache Möglichkeit, zwischen den Seiten zu springen, Sie können das Ebenenfenster verwenden, zu hier zurückkehren und zur Startseite zurückkehren. Es ist nicht so toll, glaube ich nicht. Hoffentlich wird uns eines der Upgrades eine solche Funktion geben. Also hier, ich bin nicht warum kommen für das zurück, aber in nimmt, aber ich tat es. Also werden wir es benutzen, und lassen Sie uns hier Befehl 3 gehen, ein bisschen mehr einfügen, und es wird in diesem kleinen Bereich hier gehen. Nun, ich denke, das muss größer sein, denn ich werde längere Dimes haben, als sie auf jeden Fall die App-Sache herunterladen, vielleicht sogar kleiner. Es kommt eigentlich kein Genie. Das Letzte, was wir tun werden, ist, weil wir diesen Kurs nutzen werden, alle Lehrer und Seiten. Wir werden es in ein Symbol selbst verwandeln. Also ziehen wir einfach einen Kasten herum. All dies, deaktivieren Sie die hellere blaue Farbe und sagen, sein „Symbol“. Das wird es für dieses Video sein. Wenn Sie bis zum Ende gewartet haben, sind Sie genial. Das wurde am Ende etwas schmerzhaft, ich weiß, aber das nächste Video wird großartig sein. Wir fangen an, wiederholte Gitter zu machen. Oh meine Güte, es ist fantastisch. Gehen wir und machen das. Jetzt im nächsten Video, addieren Sie es. 13. Verwendung des Wiederholungsrasters in Adobe XD: Hallo, da. Willkommen zum besten Video in diesem ganzen Kurs. Es geht um das Wiederholungsraster. Ich liebe Repeat Grid. Es hat einen lahmen Namen. Es sollte einen super aufregenden Namen haben, aber das tut es nicht. Was es tut, ist, dass Sie eine bestimmte Linie zeichnen und es wiederholt sich nur für immer. Sieh dir das an. Einige mit diesen werden wir diese Kursliste erstellen und es schrumpft und Verträge und fügt einfach immer mehr und mehr für immer hinzu. So gut, ich liebe es. Lassen Sie uns gehen und lernen, wie es jetzt in diesem Video zu tun. Wir werden hier das Wiederholungsraster auf unserem Dashboard verwenden. Ich werde eine Schachtel für Pfeil auszeichnen und wo gehen wir hin? Wir gehen zum Rechteck-Werkzeug und zeichnen eine Box ungefähr dieser Größe. Ich werde wie drei Schritte durchschneiden. Ich werde ein bisschen Dummy-Text hinzufügen und Statistiken eingeben und ich werde meinen Zeichenstil verwenden. Ich könnte diese 16 tatsächlich für diese verwenden. Es wird Statistiken haben, und es wird eine Zahl in der Mitte geben, welche Zahl. Ich bin mir noch nicht sicher, so wahrscheinlich Dollar-Zeichen zu beginnen. Ich werde $4.000 einlegen. Dies wird Dinge wie die monatlichen wiederkehrenden Einnahmen haben, wie viele Besucher auf der Seite, wie viele Verkäufe in diesem Monat im Vergleich zum letzten Monat auch die Dashboard-Statistiken. Ich setze das einfach rein und versuche es nicht zu entwerfen. Ich versuche es nicht zu tun. Nur ein paar Grundlagen. Dann muss es ein wenig Erklärungs-Tipps nach unten sein. Ich glaube, ich werde es von der Homepage stehlen. Dies wird nur beschreiben, was in dieser speziellen Kachel vor sich geht. Da gehen wir. Paste, ja, das sieht schön aus. Es wird in die Mitte gehen. Sie werden alle in die Mitte gehen, lasst uns das tun. Lassen Sie uns sogar alle auswählen und wieder richtig machen. Wir haben unsere Kachel. Eigentlich muss es wie ein wenig mehr Taste sehen. Ich werde ein kleines Plus hinzufügen wahrscheinlich in dieser oberen Ecke hier, so dass Sie klicken können. Ich bin mir nicht sicher, ob ich die drei kleinen Punkte sein sollte, oder das nav Sandwich jetzt wahrscheinlich nicht sicher. Wird entscheiden und einen Test verwenden. Ich habe meine Kachel. Ich werde alle diese Töpfe auswählen. Das ist der magische Knopf hier. Wiederholen Sie Raster sollte cool sein. Ich weiß nicht, was erstaunlicher ist, den erstaunlichen Knopf oder so. Ich klicke darauf und schau, was passiert. Magie genau wie dupliziert es, was cool ist, aber es ist noch fantastischer Blick auf das. Ich bin mir nicht sicher, wie viele davon wir tatsächlich haben werden. Ich werde so viele machen. Die Dinge, die Sie tun können, um Anpassungen zu tun, ist, dass Sie offensichtlich sehen, dass diese rosa Dinge zwischen den Linien erscheinen. Ich kann die rausziehen, um sie zu erweitern oder sie zusammenzuziehen. Du kannst Negative machen. Sie sehen tatsächlich in Ordnung aus, wie sie vorher waren. Ich werde sie so lassen. Das Wiederholungsraster wird sie offensichtlich duplizieren. Aber was schön wird, ist, dass ich das Typ-Tool greifen kann, das ich diese wirklich einzigartig machen kann. Das hier könnte 50k sein. Es könnte mit den Zahlen zu tun haben. Nun, sehen Sie, dass ich die Zahlen anpassen könnte. Ich werde das tatsächlich zentriert machen. Ich werde das packen und sie alle zentrieren. Aber wenn ich aufhöre, sie physisch zu bewegen, sind sie alle miteinander verbunden. Es ist das Beste aus beiden Welten, die ich durchgehen und tatsächlich in verschiedenen Daten setzen, weil ich nur ein die verschiedenen Dinge darstellen, daher habe ich die volle Kontrolle darüber, wenn ich den Plus-Button tatsächlich löschen möchte, Ich habe nur löschen Sie es aus einem und sie alle gelöscht. Wenn ich einen hinzufüge. Wenn ich beschließe, dass ich diesem Kerl ein kleines Ding hinzufügen möchte, wirst du bemerken, dass sie es alle bekommen. Wiederholen Grid ist genial. Wir lassen das da. Ich möchte Ihnen ein letztes erstaunliches Feature für das Repeat Grid zeigen, ist, dass Sie auch mit Bildern arbeiten können. Was ich tun werde, ist, dass ich die Kursseite aufbauen werde, die die nächste Seite auf dieser Liste ist. Eigentlich, was ich tun werde, ist, dass ich es beschleunigen werde , weil es nichts Neues ist. Ich mache nur eine neue Seite und baue das erste Element aus. Lasst uns das durchlaufen. Tyler, nimm es weg, beschleunigt es und ich sehe dich, wenn wir fertig sind. Hier sind wir auf unserer Kursseite. Ich werde alles auswählen. Ich gehe zu Repeat Grid. Genau wie wir es mit der Trainer-Sache gemacht haben, bin ich immer noch erstaunt davon. Jedes Mal, wenn ich es benutze, ist erstaunlich. Nehmen wir an, wir haben diese Mini-Kurse. Das Bild, auf das ich mich jetzt bezog, ist wahrscheinlich meine aufregendste Sache, jemandem zu zeigen. Ich bin eigentlich in unseren Übungsdateien. Ich bin in Images und habe alle unsere Kursbilder gefunden. Ich habe sie alle ausgewählt. Der einfachste Weg ist, das Finder-Fenster zu sehen oder wenn Sie auf einem PC sind, haben Sie das Fenster geöffnet und ziehen Sie es einfach von dort in eines dieser blauen Quadrate. Bereit für die Magie. Meine Güte, das ist Magie. Das bin ich super aufgeregt. Geht durch und repliziert sie einfach den ganzen Weg durch. Ja, ich liebe es. Wiederholen Sie Grid, es ist erweitert magische Waffe. Es bedeutet, dass ich immer noch ein bisschen Kontrolle haben kann. Denken Sie daran, ich kann hier auswählen und ich kann meine Gitter hier finden und ich kann diese öffnen und schließen. Sagen Sie, ich will alle zusammen oder vielleicht nur ein bisschen auseinander. Ich habe ein bisschen Anpassung und sage diese Checkliste hier, ich muss gehen und ändern Sie dies in das Schwarz oder das Grau. Einfach zu gehen und zu aktualisieren. Kannst du es mit Text machen? Ja, das kannst du. In Ihrer Beispieldatei benötigen Sie nur eine Textdatei. Wie dieser hier hat es eine Reihe von Namen da drin und ich werde nur sicherstellen, dass es weder eine Punkt-TXT- oder RTF-Datei ist, nur etwas wirklich einfaches, nichts, das irgendeine Formatierung wie Word oder PDF hat. Nur ein einfaches altes Textdokument und dann klicken Sie einfach halten und ziehen Sie das eigentliche Dokument selbst über einen der Titel und Bingo. Wie cool ist das? Ich liebe das Repeat Grid und ich konnte es später im Kurs nicht verlassen , besonders diese Bilder, weil es einfach zu speziell ist. Aber für dieses eigentliche Drahtmodell werden wir zu detailliert und in Ordnung. Ich muss durchgehen und rückgängig machen, um all diese Bilder loszuwerden und zurück zu gehen, wo es einfach war Jane. Ich sollte wahrscheinlich diese Breite hier verschieben und einfach in Musterkurs setzen. Das ist es für Wiederholungsraster. Ich liebe sie, aber du hast es wahrscheinlich satt, dass ich wegen ihnen weitermache. Gehen wir weiter zu mehr von der Großartigkeit in XD und einem anderen Video. 14. Modellierung einer Anwendung in Adobe XD: In diesem Video werden wir auf die Entwicklung der iPhone-Version nur auf Version von OWL-Produkten schauen . Dann verknüpfen wir Überlappung, so dass es nebeneinander gleitet. Lasst uns das jetzt bauen. Wir haben mit den Wireframes für die vorlagenbasierten Wireframes von UCSD für das Web gearbeitet . Wir wollen gehen und die für Mobilgeräte öffnen. In deinen Übungsdateien und den UI-Vorlagen unter Wireframes ist eines der coolen Mobilgeräte. Ich war wach und habe sowas gesagt. Aber offensichtlich für mobile Bildschirme. Um loszulegen, bin ich auf der Suche nach dem Sammeln von Onboarding-Typ-Sache. Haben sie überhaupt eine Onboarding-Sache? Das tun sie, cool. Es ist so etwas, wenn du den Bildschirm öffnest und das ist wie Nicks Überspringen. Nur um Ihnen einen kleinen Überblick über das Produkt zu geben. Dann meine Wireframes, meine handgezeichneten hier, wir haben ein Onboarding durchgemacht, das Login ist, und dann sehen Sie das Dashboard. Ich werde eine all diese auswählen und was ich mache, ist, dieses zu schnappen, denn was ich wirklich will, ich will nicht viel davon. Ich nehme dich und nehme diesen Teil an. Ich will das und ich will das. Ja, das ist die Bits, die ich will. Ich werde das kopieren und ich werde zu kleinen schließen springen , die weise für das Web nicht brauchen, um sie im Moment zu haben. Nur mein Projekt und die App-Version. Ich werde an der Handy-Version arbeiten. Ich werde auf das „Ad Board Tool“ klicken, und ich werde es das iPhone 6S auswählen. Ich habe die gestrichelte Linie gepackt. Wenn Sie weit genug hinauszoomen, um zu sehen, können Sie nicht sehen der Name nur drei kleine Punkte wird. Sie können die herumschleppen und wo soll ich sie anfangen? Ich werde sie als eine neue kleine Linie entlang der Unterseite hier beginnen. Ich werde in Befehl 3 zoomen. Zoom, zoomt auf einen bestimmten Ort, was auch immer Sie ausgewählt haben. Ich werde „Hier einfügen“ und „Jackpot“ drücken. Was ich genauso gut machen könnte, wie tatsächlich werde ich einige Bearbeitungen vornehmen und dann werde ich es zu einem Symbol verpflichten. Dieser wird als Instruktor und Struktur-HQ bezeichnet werden. Ja, das ist alles gut. Ich werde sie alle wirklich packen und sie einfach in ein Symbol werfen. Sie stellen sie Symbol. Awesome, und ich werde hier nur einen Dummy-Text in die Mitte setzen. Dies wird eine spannende Onboarding-Nachricht sein. Ich werde nur Nummer 1 sein, okay, und du wirst reingehen, ich werde diese große Version benutzen haben und ich werde das kleinste bisschen Design-Arbeit machen, und nein, ich sollte nicht, aber ich mag diesen Kreis, den ich sah auf die letzte. Rektorzeilen, also. Nun, du bist fertig, du hast es super aufregend gemacht. Ich weiß nicht, warum ich das getan habe. Aber das wird meine super spannende Onboard-Nachricht 1 sein, es wird sein, eigentlich lasst uns einfach drei von ihnen machen. Ich werde diesen Doppelklick erneut darauf klicken. Sie können dort ziemlich einfach durch Doppelklicken zu bekommen, wählen Sie alle drei davon, legen Sie sie in die Mitte, und dann denken Sie daran, ich kann auf sie klicken und sagen, Rechtsklick, aktualisieren Sie alle Symbole. Auch wenn ich das nicht wieder benutzt habe, habe ich nur die hier aktualisiert, meine Bibliothek. Großartig. Ich will, wie viele davon? Ich will drei. Ich werde das festhalten. Ich werde sie zuerst nennen. Dies wird meine App sein, und das ist die Onboarding-Nummer 1, die Leute aufregen, bevor sie sich anmelden oder anmelden müssen, denn das ist das Schlimmste, was ist wie: „Hey, verpflichten Sie sich zu einer Anmeldung, während Was wir tun wollen, ist zu sagen, hey, bevor Sie sich anmelden, und es ist eine gute Liste, coole Sachen, die Sie tun können.“ Dies ist die Nummer 1, das wird Nummer 2 sein, und nur damit der Benutzer weiß, wann diese App Prototyping, oder zumindest der Client weiß, dass wir nur die Farben ändern , so dass wir wissen, was wir tun. Gehen Sie, und noch eine Zeile zur App, und Sie werden Nachricht Nummer 3 sein. Nummer 3, Sie können blau sein. Uns gehen die Farben aus, wir haben nur zwei Farben wirklich. Gehen wir zurück zum Blauen. Ehrfürchtig. Wir haben drei davon und das wird mein Onboarding sein. Was wir als nächstes tun könnten, ist unser Prototyping zu machen, weil wir tatsächlich überprüfen möchten, wie Sie dies in einer App sehen können Bevor wir das tun, müssen wir diese Schaltflächen ein wenig einfacher zu klicken, also wie wir es früher getan haben . Ich werde darauf auswählen, ich werde darauf doppelklicken. Deswegen bin ich nein, ich bin drinnen. Es scheint eine grüne Bar auf der Außenseite. Ich weiß, dass ich in meinem Symbol bin. Ich werde das „Rechteck-Werkzeug“ greifen und ich werde eine Füllung von Weiß haben. Was bedeutet es, zu sagen, habe ich das getan? Rückgängig machen. Lass uns hineingehen, ich kann die grüne Bar sehen und ich schnappe dich, zeichne eine Feder schöne große Kiste. Sie können sehen, dass ich immer noch drin bin, weil schauen, was ist, wenn ich es ziehe , so dass grüne Balken auf der Außenseite größer wird. Schalten Sie das aus. Ich werde es kopieren und ich werde es nach hinten schicken. Nun, klicken Sie mit der rechten Maustaste, senden Sie es rückwärts zurück. Ich benutze eine Verknüpfung und Sie können das sehen, wir werden dorthin kommen, es sind Command Shift und die eckigen Klammern, die neben dem Gipfel sind. Ich benutze das die ganze Zeit, weil es in InDesign Illustrator und Photoshop gleich ist, was schön ist. Es gibt meine große weiße Box, so wird es einfach sein, zu klicken und ich kopiere es. Hier drüben, ich werde doppelklicken. Ich bin jetzt in das grüne Ding und füge es ein und schiebe es nach hinten. Schnappen Sie sich diesen Kerl, doppelklicken Sie darauf , ein Phänomen, also das grüne Ding, fügen Sie es ein, bewegen Sie es nach oben und senden Sie es nach hinten, vielleicht machen Sie es nicht kleiner. Ziemlich groß gewonnen. Kopiere ihn und gib ihn da rüber. Cool, also werde ich auf den „Hintergrund“ klicken, klicken Sie darauf, sobald ich es ausgewählt habe. Ich habe diese ganze Gruppe, die ich gemacht und erinnere mich, aktualisieren Sie alle Symbole und hoffentlich jetzt hier drüben wenn ich darauf doppelklicke und es gibt diese Box auch. Symbole sind großartig, weil es bedeutet, wenn wir gehen und jetzt Prototyping machen, Ich habe schöne große Boxen zu klicken. Es gibt Rig das oben, wir werden die nächste Box greifen, und ich werde sagen, wenn Sie geklickt werden, dorthin zu gehen, und standardmäßig wird es sich auflösen. Jetzt, da wir in mehr wie mobile zentrierte Welt sind, und wir werden auf Folie nach links schauen. Wir werden uns das ansehen, wenn wir in der Vorschau sind und was wir tun könnten nur um Ihnen den Unterschied zu zeigen, ist, dass wir zu dieser Version gehen und wir werden uns die andere ansehen, die Push-Lift ist, okay, und sehen Sie einfach die Unterschiede zwischen ihnen. Als nächstes und dieser hat keinen Weg zu gehen. Was ich tun könnte, ist eigentlich nur schnappen ein anderes Brett und wird dieses eine die App machen. Es wird den Anmeldebildschirm geben. Wir wollen das tatsächlich im Moment erstellen, und so werden wir einfach alles auf dieser Seite löschen. Auf Wiedersehen. Das hat keinen wohin zu gehen, wachsen Sie die weiße Box, Sie gehen dorthin. Es wird das gleiche für diese Übersprung-Buttons sein. Ich werde sagen, dass du dorthin gehst. Ich will, dass du dorthin gehst. Überspringen, wir gehen den ganzen Weg zum Login. Das hat sich nicht angeschlossen und übersprungen hier ist das gleiche. Kann es nicht sehen, deshalb ist es so einfach, nur hier zu gehen und Login zu gehen, Zwillingsbenennung und es ist sehr nützlich, sagte ich am Anfang, so dass dann fertig ist. Was ich tun könnte, ist, dass ich diese Punkte ändern möchte, um sich durch zu bewegen, aber ich werde nicht stören, dass ich sollte, weil ich will, aber weil es ein Drahtmodell ist, werden wir einfach schnell gehen, und die hinteren Tasten müssen funktionieren. Ich werde diesen Kerl schnappen, einen Prototyp bekommen, und du, mein Freund, kommst zurück zu dir, und du gehst zurück zu dir. kleines bisschen ein Fehler in meinem Symbol machen, Es bedeutet, dass diese beiden funktionieren, aber es gibt einen Fehler, der sowieso nicht hier geht. Ich werde es wahrscheinlich einfach ignorieren oder ich kann mein Design gut auswählen. Klicken Sie auf dieses Ding, das C grün um die Außenseite hier ist, kann ich das Symbol aufheben, was nicht toll ist, aber ich muss in diesem Fall. So auf Wiedersehen. Ich habe möglicherweise das gleiche Problem mit diesen Punkten, wenn ich sie aktualisieren wollte. Ein bisschen mitreißen mit meinen Symbolen. Ich war beeindruckt, als ich es eingestellt habe. Was wir jetzt tun wollen, ist eine Verkostung auf Handy. Wir werden zum nächsten Video springen, weil es eine coole kleine App ist , die Sie mehr herunterladen können, schauen Sie sich das jetzt an. 15. So verwendet man die XD App auf iPhone und Android: Es ist Zeit, die App herunterzuladen. Es gibt sowohl eine Android- als auch eine iPhone-Version, die genial ist. Laden Sie das für Ihr Mobiltelefon herunter. Nun gibt es zwei Möglichkeiten, es tatsächlich zu bekommen, je nachdem, ob Sie einen Mac-Computer wie ein MacBook Pro oder einen iMac haben oder ob Sie einen PC haben. Ich werde die App starten, klicken Sie auf XD und jetzt, wenn Sie die Mac-Version fest Mitglied waren, ist es egal, ob Sie ein Android- oder ein Apple-Telefon haben , aber es ist mit einem Computer zu tun. Sie können hier sehen, dass ich mit einem USB-Kabel verbunden habe, nichts Phantasie und was wir tun können, ist, dass wir Live View verwenden können. Die coole Sache über Live View ist, dass alles, was Sie auf Ihrem Bildschirm geöffnet haben, hier unten in Ihrem Mobiltelefon erscheinen wird . Es zeigt dir, was auch immer das Haus daneben hat. Wenn ich hier zoomen, ist das meine Homepage, Sie können sehen, dass hier ein kleines Haus ist. Hier springen wir zwischen Bildschirmen und allem hier, aber Sie können dieses kleine Haus hier sehen, es zeigt mir das auf meinem Handy. Ich möchte ein kleines Haus dahin wechseln, damit ich hier eine Vorschau sehen kann. Klicken Sie also auf diesen Kerl, klicken Sie in das kleine Haus und Sie können dort sehen, dass er in seiner ganzen Pracht ist. Was wirklich schön an der Live-Ansicht ist, dass, beobachten Sie dies, wie ich beginne, dieses Ding herum zu bewegen, es wird automatisch aktualisiert. Es ist wirklich schön, diese Einrichtung auf einem schönen kleinen Bildschirm hier so, wenn Sie bearbeiten, mein Schreibtisch ist alles sauber. Es ist nie so sauber, nur für Dreharbeiten. Haben Sie alles eingerichtet und ein iPad und alles damit Sie es sehen können, während Sie daran arbeiten, und Sie können Anpassungen vornehmen. Die coole Sache darüber sowie weil wir irgendwie Wireframe dieses Ding haben, sollten wir in der Lage sein, auf das zu klicken und weiter zu gehen. Es ist für die Rutsche nach links ins Niemandsland gegangen. Wo geht das Ding hin? Irgendeinen Grund, warum ich das hier drüben verbunden habe, das war ziemlich gut. Ich werde hineinzoomen und vergessen, was ich hier getan habe. Du gehst dorthin, aber ich glaube, ich habe auf das Wort „Weiter“ geklickt. Wie sind wir da rüber gekommen, ich bin mir nicht einmal sicher. Als nächstes, jetzt funktioniert es, als nächstes, der leere Bildschirm. Wenn Sie an dieser App arbeiten, gibt es ein paar Dinge, die Sie tun können, um sie zu navigieren. Sie können klicken und halten Sie es für eine Weile und Sie erhalten ein paar Optionen hier. Einer von ihnen ist es, die App-Boards zu durchsuchen und Sie können einfach sehen, wie die große Version von allem, was in meiner XD-Datei ist, was eine gute Möglichkeit ist, zurück zu hier zu springen. Andere Dinge, die Sie tun können, während Sie hier sind, ist halten Sie es unten und sehen Sie dieses, das ist Hotspot, daher können Sie das einschalten, denn wenn Sie irgendwo klicken, können Sie sehen, dass es für Leute ist, die ich sagen möchte, wie meine Eltern, die ein wenig brauchen ein bisschen Ermutigung, um diese besondere Sache nutzen zu können. Das sollte okay sein, weil es als nächstes übersprungen ist, aber wenn Sie etwas ein wenig kompliziertes haben und Sie daher hinzufügen müssen, ist es wahrscheinlich ein Zeichen für eine schlechte Benutzererfahrung aber manchmal müssen Sie nur diese Dinge haben, die zeigen. Ich habe nur ein paar der Tasten aktiviert, nicht alle von ihnen. Was sonst noch? Also, das ist Live-Ansicht, wenn Sie einen Mac entweder mit einem iPhone oder diesem alten Android-Handy mit Paul Patrouille Aufkleber auf sie für meinen Sohn aber richtig auf dem Bildschirm verbunden haben diesem alten Android-Handy . Sie können es auf eine andere Weise tun und der Weg ist, dass Sie hier gehen und Sie haben die Möglichkeit,, Ich werde klicken und halten, Ich möchte zurück zu meinem Dokument, XD-Dokumente. XD-Dokumente sind Dinge, die in Ihrer kreativen Cloud gespeichert werden. Was Sie hier auf dem Bildschirm tun müssen, ist, dass Sie zu Datei gehen und Sie müssen speichern als und auf Ihrem Computer, es spielt keine Rolle, ob es ein Mac oder PC ist, dies wird dies zu tun. Sie müssen Ihren kreativen Cloud-Ordner finden. Ich weiß, wo es auf meinem Mac ist. Sie müssen überprüfen, ob Creative Cloud ihre Ordner auf Ihrem PC aufbewahrt. Ich weiß, dass auf meinem Mac ist, wo sind wir? Ich weiß, es ist hier, es ist unter all dem Müll, wenn du zu deinem Wort kommst, deinen Namen als meins, Daniel Scotts. Hier ist mit einem Mac hält sie. Auf einem PC müssen Sie einen kurzen kleinen Blick machen, um zu sehen, was sie haben. Was ich tun kann, ist es dort drin zu klicken und ich kann es in einen eigenen speziellen Ordner legen oder ich kann dieses Ding einfach hier drinnen ablegen. Dies ist mein iPhone beim Test und klicken Sie auf Speichern. Was passieren wird, ist, wenn alles synchronisiert ist, sehen Sie dieses kleine Symbol oben hier beginnt zu sinken und es wird schließlich in Ihrer kreativen Cloud-Bibliothek enden und das ist das Ganze mit der Creative Cloud. Magisch wird dieses Ding es sehen. Ich werde aktualisieren und überprüfen, ob es da drin ist. Es ist noch nicht da. Habe ich es an der richtigen Stelle gespeichert? Ich glaube, das hat es getan. Creative Cloud-Dateien, ja. Nun, ich werde mich öffnen. Irgendwann kannst du das Ding geben, du siehst, dass es hier sinkt und ich zeige, warum, nicht sicher, wie groß es ist, aber lasst uns anhalten und warten, bis es sinkt und ich werde wieder reinspringen. Wenn das nicht funktioniert, was meins nicht aus irgendeinem Grund ist, hört meine auf zu sinken funktioniert jeden zweiten Tag, es ist nicht der Moment, gute Ausrede, um Ihnen einen anderen Weg zu zeigen. Ich habe mich bei meinem Adobe-Konto angemeldet, so assets.adobe.com/files und Sie können es einfach hier ziehen. Sie können sehen, dass es hier schön und süß hochgeladen wird und hoffentlich jetzt mein Telefon, wenn ich gehe zu aktualisieren, wird es gehen und durch alle meine Creative Cloud-Dateien suchen und sehen, ob es ein XD-Dokument gibt. Da ist es. Das ist ein Weg, wie ich es tun kann. Ich muss nicht mit meinem Telefon verbunden sein, also muss ich dieses Kabel nicht verwenden. Ich kann es jetzt hier haben und das Gleiche zum Testen tun. Als nächstes kann ich überspringen und die coole Sache darüber ist, wenn Sie auf Ihre Creative Cloud-Dateien haben , ist großartig für Benutzertests, weil die Live-Ansicht nur dann ist, wenn Sie es angeschlossen haben. Was Sie tun können, ist dieses Ding draußen im Feld zu haben, um Menschen zu zeigen, gehen und sehen Sie einen Kunden-Pitch Es oder einfach nur Menschen und Kollegen bei Meetings zu zeigen und es ist das gleiche wie zuvor. Ich kann klicken und halten Sie es gedrückt und ich kann als Bild teilen. Ich kann Screenshots und die gleichen Dinge wie vorher machen. Das ist es für die Verwendung der App. Live-Ansicht funktioniert sowohl auf Android als auch auf iPhone, aber nur, wenn sie an einen Mac angeschlossen ist. Wenn Sie es auf einem Windows-System verwenden möchten oder Sie es nicht wirklich anschließen und Live View auf einem Mac verwenden möchten, können Sie beide Systeme verwenden. Sie müssen es in Ihren Creative Cloud-Dateien speichern, entweder über die Web-Version oder normalerweise können Sie es einfach in diesen Ordner ablegen , der im Moment nicht funktioniert. Das ist es. Ich werde Sie im nächsten Video sehen. Tschüss jetzt. 16. Produktionsvideo Anmeldebildschirm und Dashboard: Hey, da. Willkommen zu diesem Produktionsvideo. Bevor Sie überspringen, gibt es eine Sache, die Sie in diesem Video überprüfen sollten, und es ist direkt nach meiner kleinen Einführung, und es ist im Grunde fügen Sie diese gleitende Sache, die Sie wissen müssen. Der Rest davon, obwohl wir gehen, um diese Seiten hier für unsere App zu bauen. Nichts super aufregend, so können Sie überspringen, nachdem Sie lernen, wie man dieses Ding zu tun. Gehen wir rein und machen es. Ich möchte meine Login-Seite durchlaufen und erstellen. Ich werde das meiste davon aus einer dieser Vorlagen stehlen, da ist die Anmeldung hier oben, und ich werde eine von ihnen auswählen und einfach kommen Befehl 3, um direkt hineinzuzoomen. Lasst uns näher kommen. Welchen will ich? Ich benutze das hier. Es wird die ganze eigentliche Seite stehlen, weil es eine iPhone-Größe ist, das ist, was alle Vorlagen sind. Ich werde auf das Wort „Registrieren“ klicken, ich werde auf „Kopieren“ klicken. Ich werde zurück zum Haupt springen, ich werde es einfügen, und ich werde sie tatsächlich nur löschen. Ich nehme den Namen und dann Wiedersehen, und ich benutze diesen hier. Das ist eine der netten Dinge über die Verwendung der blauen Farben, anstatt zu gehen und wählen benutzerdefinierte Farben, müssen Sie gehen und aktualisieren alle Farben und Sachen. Da gehen wir. Für die Sache, für die du herumgehängt hast, ist es , wenn ich dies vorsehe, habe ich diesen Kerl hier, ich gehe zum Prototyp und ich werde nur sicherstellen, dass das zu Hause gespeichert wird. Es ist nicht standardmäßig, so dass Sie jede von ihnen zu Hause sehen können. Wenn Sie auf „Vorschau“ klicken, geht es direkt zu diesem. Ich werde „Play“ drücken. Ich versuche, nach oben und unten zu scrollen, aber es lässt mich einfach nicht. Das ist ein bisschen ein Problem. Wenn ich darauf klicke, können Sie sehen, dass es tatsächlich viele zusätzliche Sachen gibt. Um all das zu sortieren, werde ich auf den Namen klicken, ich gehe zu Design, ich werde Scrollen zu vertikal ändern. Das ist das erste Stück. Der View-Port ist auf 667 gesetzt, was die genaue Höhe dieses iPhone hier ist, und klicken Sie auf ihn, er ist 667 als auch. Was ich auch tun muss, ist die App zu greifen, ich möchte es ein bisschen länger machen. Sie speichern den Ansichtsport, und dann machen Sie dies so lange wie nötig. Dies kann so lange dauern, wie Sie möchten, und Sie können sehen, dass der Ansichtsport dort ist, diese gepunktete Linie. Wir hatten es automatisch auf unserer Web-Version. Jetzt haben wir das auf unserer mobilen Vision. Es bedeutet nur, wenn ich eine Vorschau vorsehe, wird es eine Vorschau darauf sehen, aber ich kann jetzt nach unten scrollen. Erlauben Sie vertikales Scrollen, wählen Sie die richtige Höhe, und stellen Sie sicher, dass Ihr Aufwärtslauf lang genug ist, um alles zu sehen Wahrscheinlich möchten Sie diese einfach weiter verwenden, um sie zu duplizieren, wenn Sie von nun an eine andere Folie erstellen, denn wenn Sie diese erneut duplizieren, müssen Sie es immer wieder tun. Jetzt kannst du mitspringen, weil ich nichts besonders Aufregendes tun werde. Ich gehe durch und ändere das in Lehrer. Ich kann es buchstabieren, ich kann nicht. Das dauert, ich will eigentlich nicht mehr. Ich werde nachgeben, gut aussehen. Die Anmeldeseite, das ist alles gut, perfekt, Anmeldeseite. Ich habe eine Anmeldeseite und eine Anmeldeseite. Ich werde das nur duplizieren. Dieser hier wird mein Anmelden sein, und dann gehe ich einfach durch und ändere diese Option hier drin. kleine Körper wird verwendet, um zu zeigen, wo Sie sich befinden, so dass Sie zwischen den beiden wechseln können, und dieser, alles, was ich für die Anmeldung brauchen werde, ist E-Mail-Adresse und Passwort. Die Person, die dies gemacht hat, besteht immer noch aus der Verwendung unseres KO Repeat Grids, aber ich werde es aufheben, damit ich auf Teile davon klicken kann. Ich werde die Gruppierung aufheben und sagen, ich will nicht, ich will dich. Ich brauche keine persönlichen Informationen. So weg. Aber ich brauche diese kleine Kiste hier, und ich setze sie unten. Was ich eigentlich tun werde, ist, dass ich auf die Kante klicke und ich weiß, dass es 77 sein muss, was war es? Ich weiß. Sieben, tut mir leid, 667, es ist da. Ich werde auf diesen Kerl klicken und Ihre Höhe wird jetzt 667 sein. Perfekt. Richten Sie nach unten aus. Schön. Ich habe meinen Anmeldebildschirm und meinen Anmeldebildschirm erhalten. Ich muss die jetzt zusammen aufbauen. Lasst uns diesen Prototyp machen. Wenn Sie alle auswählen, wird alles im Dokument ausgewählt und Ihnen alle Drähte angezeigt, sodass es funktioniert, was Sie noch nicht getan haben. Was ich tun werde, ist dieser nächste Knopf hier unten. Du gehst zu meinem Anmeldebildschirm und ich mache Push-Rechte. Ich muss diese überprüfen, um mich zu erinnern , welche nach links schieben oder rechts drücken, wie es aussieht. Es kommt hier, und dann möchte ich, dass Sie in der Lage sein, auf den Login-Button zu klicken. Ich sollte das größer machen. Ich muss hier auf den Bildschirm gehen. Dieser hier, wollte diesen Weg zurück gehen. Dieser wird nach links schieben, ich bin mir ziemlich sicher, wir müssen es testen. Lassen Sie uns einen Test machen. Ich fange am Anmeldebildschirm an, klicke auf „Login“, schiebt diesen Weg, schiebt in die andere Richtung. Fühlt sich rückwärts an, nicht wahr? Eigentlich werde ich diese jetzt nach links geschoben werden, und jetzt, da man nach rechts geschoben werden muss. Lassen Sie uns einen Test machen. Das fühlt sich besser an. Ehrfürchtig. Deshalb testen Sie, während Sie den ganzen Weg durch verspotten. Wir haben ein paar Scrollen vor sich. Das braucht kein Scrollen. Gehen wir zum letzten Bit, und das wird mein Bildschirm sein. Was ich tun werde, ist, dass ich das vorab schnappen werde. Warum? Weil es lang ist, weil ich weiß, dass mein nächster lang sein muss und alle View-Ports aussortiert wurden. Grundsätzlich möchten Sie alles auswählen und sich verabschieden. Ja, nett. Reinigt nicht zurück zum Design. Jetzt werden wir die Erstellung von Teach Dashboard und App Version. Das ist Instruktor-Dashboard. wählte einen dieser Mantel aus, und ich werde meinen Armaturenbrett-Mantel schnappen, und ich werde ihn hier unten benutzen. Fügen Sie sie ein. Es ist ein bisschen groß. Das Schöne an dieser ganzen Sache, ich kann dich und der Polizei ist weg, und ja, ich habe mein Instruktor-Dashboard bereit, eine Umwandlung. Ich will es so schön machen. Das letzte, was ich tun könnte, ist, dass ich eine Einstellungsseite machen werde, so dass Sie durchgehen können, um ihnen einen Hinweis darauf zu geben, was die App tun wird. Ich versuche, Riemchenlinien zu finden. Siehst du oben links, wo all die Universellen sind, es wird euch greifen. Kopieren, springen Sie es rüber. Ich werde dich hier reinbringen. Sie sind schwer zu klicken. Ich widerspreche nicht. Wenn das angeklickt wird, wird es zum Instractor springen. Eigentlich werden das nur Einstellungen sein. Nichts Aufregendes. Ich möchte, dass die Leute in der Lage sind, ein paar Dinge zu tun. Lassen Sie uns einfach tun, was können Sie auf der Einstellungsseite tun? Warum zeichne ich eine Schaltfläche? Ich sollte es nicht selbst tun. Hier drin werde ich einen zentralen Text machen, und dieser wird sein, und Sie könnten in der Lage sein, diese Dinge neu zu ordnen und Raster zu wiederholen. Ich habe ein paar Einstellungen. Sie können sie neu bestellen. Du kannst einen Favoriten haben. Ich denke, das könnte die Regel brechen, wenn es darum geht, zu viele Details hinzuzufügen. Woher holen wir die? Ja, daran habe ich vorhin gedacht. Das muss meine Einstellungsseite haben. Ich werde Sie schnappen, doppelklicken Sie auf die Kante. Eigentlich müssen meine View-Ports nicht so groß sein. Was ich tun werde, ist, ich werde auf Sie klicken, und ich werde die Höhe 667 machen, und kein Scrollen. Ich brauche einen Zurück-Knopf. Dieser Kerl. Klicken Sie auf die Schaltfläche Zurück , kopieren und hier einfügen. Die Wahl des richtigen Ortes, nur die falsche Farbe, und der Typ dort hat auch ein bisschen eine schwache Farbe. Stellen Sie den Rest davon ein. Cool. Wie manipuliert es. Ich werde sagen, wenn auf diese Schaltfläche geklickt wird, gehen Sie zu hier, gleich mit dieser Schaltfläche, und das ist richtig, und das ist alles richtig. Du wirst auch den ganzen Weg hier rüber springen. Wenn Sie sich anmelden oder einloggen, landen Sie auf dieser Seite. Wenn Sie auf die Einstellungen hier klicken, können Sie entweder auf sie klicken, Sie gehen zu dieser Seite. Wenn Sie dann zurückgehen möchten, gehen Sie zurück zu dieser Seite. Ehrfürchtig. Lassen Sie uns einen Test machen. Ich habe einen Test auf meinem Handy, aber das kannst du nicht sehen, ich möchte nicht die ganze Kamera wieder aufstellen. Du meldest dich an. Großartig, Sie sind herzlich willkommen im Armaturenbrett. Es schiebt den falschen Weg, und dann gehst du zu diesem. Wir müssen mit diesem Stoß nach links herumspielen, rechts drücken. Eigentlich will ich das noch mal testen. Dieser hier, ich klicke auf diesen, und das ist falsch. Der Fehler sollte in die andere Richtung schieben. Du kannst das da oben lassen. Ich werde sagen, du mein Freund, du wirst nach links schieben, und dasselbe mit dir, nach links schieben. Lass es uns mal ausprobieren. Hier drüben fühlt sich das besser an. Dashboard obwohl, das erscheint, das ist gut, und obwohl dieses muss in die andere Richtung gehen. Es ist nur ein bisschen komisch, ich kann es nicht. Ich muss sehen, dass es tatsächlich aktiviert wird um zu wissen, was nach links gedrückt wird und nach rechts schiebt, ich weiß nicht warum. Nun, zurück da, auf diese Weise. Denn der Fehler ist erledigt. Ehrfürchtig. Schön, das wird es für dieses Produktionsvideo sein. Es ist ein langer Lauf. Was lernen wir? Workflow, wir nennen es Workflow. Das ist es für das Video. Lassen Sie uns zum nächsten gehen, wir schicken uns für Kommentare aus. Wir werden es unserem Klienten schicken, um es zu überprüfen. Wir sehen uns im nächsten Video. 17. Teilen von Wireframes für Kommentare in Adobe XD: Hallo, da. In diesem Video schauen wir uns an, unsere Wireframes zu senden , um einige Kommentare zurück zu bekommen. Wir werden diese kleine Option hier verwenden und Ihnen zeigen , wie Sie dies bearbeiten können, damit Sie das für Kollegen, für den Client oder für Benutzertests sehen können . Gehen wir und machen das jetzt in diesem Video. Das erste, was klar wird, ist, dass dies nicht unser Benutzer-Test sein wird. Wofür wir unsere Wireframes verwenden, sind vor allem nur ein oder zwei meiner Kollegen. Denn du kannst jeder sein, ein Kumpel, von dem ich denke, dass er das Vokabular oder das Verständnis hat , um einen Wireframe testen zu können und dir ein konstruktives Feedback zu geben, um zu sehen, ob das ein Teil davon ist. Die andere Option ist, wenn ich zu meinem Kollegen gegangen bin und ich mit einigen Überresten zurückgekommen bin und wie, hey, ich dachte, das würde passieren. Ich weiß, dass das ein bisschen seltsam ist, nur um die Fehler zu wecken damit ich es an den Client zur Genehmigung setzen kann. Clientgenehmigung unterscheidet sich von Benutzertests, da im Client ein Drahtmodell erwartet. Was ich tun möchte, ist, dass ich meine Zeit nicht damit verbringen will, die hohe Wiedergabetreue oder die High-Res-Version dieser App zu tun , ich muss herausfinden, dass es nicht das ist, was sie wollten. Es ist einfach, die Wireframes über zu senden. Wireframes sind einfach zu machen, dass sie leicht zu aktualisieren sind. Es funktioniert nur mit dem Kunden, und sobald sie das genehmigen, dann gehe ich los und mache die hohe Wiedergabetreue und Mock-Ups. Es sind diese Mockups, die ich für Benutzertests aussende. Das ist, wenn ich Leute darin bekomme, dass ein potenzieller Nutzen für meine Persona und die App tatsächlich testen kann. Manche Leute schmecken Wireframes, das ist völlig in Ordnung. Ich finde sie nicht so wertvoll, was für Drahtgittermodelle schmeckt. Ich bin mir nur nicht sicher. Es ist nur, dass ich keinen Wert in dem Feedback meiner Kollegen, ja vom Kunden, ja, aber ich denke, es muss alles singen und alt tanzen aussehen , damit es ein richtiges Benutzerfeedback erhält. Der andere Grund ist, dass ich ziemlich gut damit bin, hohe Res zu machen. Es dauert lange, aber nicht so lange, wenn du weißt, was ich meine. Ich kann ein gut aussehendes Mockup mit all den Bildern und Sachen ziemlich schnell ausknallen. Es ist nicht etwas, das ich an jemand anderen auslagern muss. Sagen Sie, wenn Sie mehr der UX-Forscher sind, okay, dann können Sie völlig viel Wert von Wireframes bekommen, weil der nächste Schritt, um hochauflösende Versionen zu erhalten, eine lange Arbeit ist. Aber für mich ist es nicht. Wir haben besprochen, dass wir nicht besonders Benutzertests durchführen, aber einige der Regeln gelten, wie wenn ich die Chance bekomme, würde ich lieber persönlich über die Schulter Testfall machen. Ich möchte lieber, dass ein Kumpel mich zum Mittagessen trifft und es durchmacht, damit ich ihre Interaktionen beobachten kann. Es sind all diese Manierismen, die sie nicht wirklich wissen, dass dies für mich sehr nützlich ist. In Person ist erstaunlich, auch mit einem Kunden, aber ich finde für meine kleineren Projekte, an denen ich als Freiberufler arbeite, da bin ich immer normalerweise nur am Ende dieser Links über. Schauen wir uns an, wie man diese Links erstellt, und dann erhalten wir Kommentare von unseren Kollegen und unserem Kunden. Also, um einen Link zu teilen, klicken Sie auf das kleine Symbol, und geben Sie einfach ein paar Thiings wie den Titel, das ist in Ordnung und starten Sie HQ und es wird Version 1 sein. Sie können ein Bild hier ziehen, macht es nur schön aussehen, wenn Sie Links zu Menschen von gemacht in Ihren Übungsdateien hier und Bilder senden , Ich habe eine gestapelte Version dieses HQ-Logo gemacht. Jetzt wirst du sehen, dass ich es quadratisch gemacht habe. Ursprünglich hatte ich es rechteckig, aber es endet schlecht zuschneiden. Wenn Sie feststellen, dass Sie wirklich auf dem Platz zugeschnitten werden, stellen Sie einfach sicher, dass der tatsächliche Außenborder in und Illustrator oder Photoshop ist tatsächlich quadratisch, und haben Sie einfach Ihr Logo im Inneren von dort gehen. Es gibt eine IRF-Datei. Scheint etwas Nettes zu nehmen. Andere Sache erlauben Kommentare genau das, was ich will. Dieses Ding hier ist ziemlich wichtig. Dieses wenig ausgegraut, aber das, fangen Sie an. Das ist vielleicht das Heim-Icon. Wenn ich früher einen Prototyp bekam, als ich arbeitete, können Sie hier unten sehen, Ich sagte, dass zu Hause zu sein, wenn ich auf dem Handy in der Vorschau war. Das ist die erste Ansicht, die die Leute, die ich dieses Link-Tool schicke, bekommen, was nicht das ist, was ich will, weil ich möchte, dass sie direkt auf die Homepage gehen. Ich prototypisierte Ansicht, klicken Sie auf kleine Startseite Symbol, gehen Sie zurück in hier und es sollte sagen, starten Sie auf der Homepage. Schön. Klicken Sie auf Link und Magie erstellen. Es macht es irgendwann zu verbinden. Jetzt sind die beiden Möglichkeiten, wie Sie den Link einfach per E-Mail senden können, das ist, was ich dazu neige. Klicken Sie nicht darauf. Ich kann diesen Link kopieren und einfach per E-Mail an Personen senden, oder Sie können auf die Einbettung klicken. Wenn Sie wissen, wie Sie mit einem iframe arbeiten, möchten Sie es aus irgendeinem Grund auf Ihre eigene Website einbetten, und Sie können das tun. Dass, wenn Sie wollen, nur einen normalen alten Link, können Sie eine E-Mail. Das ist derjenige, der wieder losgeht, also kopierst du es. So sieht es aus, wenn ich eingeloggt bin. Ich möchte Ihnen zeigen, wie es aussieht, wenn ich sagen würde, dass ich es an einen Kollegen schicke keine Adobe ID hat. Sie kriegen das. Wie Sie sehen können, ist ein kleines Symbol die Benennung. Was sie tun können, ist ein paar Möglichkeiten, damit zu arbeiten. Sie können das einfach durchschalten, und sie können einfach alles so sehen. Aber eine nette Art, es zu tun, ist, Vollbildmodus zu gehen. Nun, das ist nicht wirklich Vollbild, nur wird der Müll loszuwerden oder auf der Außenseite und dann können sie anfangen, mit ihm zu interagieren, anstatt. Ich muss vielleicht zurück, um zu entkommen. Was ich tun werde, ist, dass ich zurück nach Hause gehe und aufhören werde, von hier aus eine Vorschau zu sehen. Möglicherweise müssen Sie Ihren Freund darüber informieren, wie Sie das Drahtmodell am besten nutzen können. Ich finde, beginnend am Anfang und nur auf den Vollbildschirm klicken gibt ihnen die grundlegende Erfahrung, weil es ihnen erlaubt, durch zu gehen und zu beginnen, Dinge zu klicken. Wenn ich darauf klicke, gehe ich zu dieser nächsten Ansicht. Jetzt ist eines der Dinge, dass es sehr hilfreich ist. Wenn Sie irgendwo anders klicken, können Sie alles nur Highlights sehen, bekommt es blaue Box um sie herum. Es hilft nur Menschen, eine Website zu navigieren, vor allem ein Drahtmodell, das Sie möglicherweise nicht jede Schaltfläche manipuliert haben. Ich habe gebunden, um auf etwas zu klicken und es funktioniert einfach nicht. Dies gibt ihnen einen visuellen Hinweis darauf, worauf sie klicken sollen. Gehen Sie zurück zur Homepage, gehen Sie wieder hinein. Wir haben vorher eine Vorschau gesehen, aber so sieht es aus. Flucht, um rauszukommen. Jetzt in Bezug auf die Kommentierung, können Sie darauf klicken. Im Moment sind sie nicht angemeldet. So können sie entweder auf den Anmelde-Button klicken oder sich hier anmelden, oder sie können als Gast kommen, was schön ist. So macht es die Leute wissen, wie man durch das ganze Drama der Anmeldung geht. Wenn sie es jedoch tun, gibt es einen schönen Weg, den Adobe getan haben. Sie können sich entweder mit Ihrer Adobe ID anmelden, aber sagen, dass sich Ihr Kollege nicht daran erinnert oder nicht weiß, was es ist kann sich hier mit Social Logins mit Facebook oder Google anmelden. So oder so, dass sie Kommentare hinzufügen können, oder Sie können es tun, indem Sie raten, was ich liebe. Sie erhalten ein erstes Feedback und Sie müssen diesen Link aktualisieren, es gibt zwei Dinge, die Sie tun können. Sie können ein Feedback von ihnen verbessern und sagen, hey, das funktioniert nicht oder was denken wir darüber , oder haben Sie sich nicht vorstellen, dass dies so funktionieren würde? Was Sie tun können, ist zu sagen, dass Sie eine Änderung vornehmen und Sie mögen, dieser Button wird jetzt sein, Sie ändern die Tics hier drin. Wechseln Sie zur Entwurfsansicht. Ich bin mir nicht sicher, was ich aktualisiere, aber das löscht nur einen Text. Ich habe beschlossen, dass das mein Update ist und ich habe ein Update gemacht, ich kann zwei Dinge hier tun. Ich kann erneut auf „Teilen“ klicken. Es gibt zwei Möglichkeiten, wie ich den ursprünglichen Link aktualisieren kann, so dass nichts wirklich ändert den gleichen Link, der E-Mail gewesen wäre funktionieren würde, aber es wird diese aktualisierten Texte haben oder Sie können einen neuen Link erstellen, und geben Sie ihm einen neuen Titel. Sagen Sie, es ist ein neuer Link und Sie sind, als ob ich diesen neuen Link machen möchte, weil es so ist , als ob Sie viele Änderungen vorgenommen haben und Sie es wie Version 2 etwas völlig anderes nennen möchten . Sie teilen einen separaten Link. Sie aktualisieren entweder den Link, den Sie hatten, oder teilen einen neuen, dann können Sie auf Links verwalten klicken, wenn Sie verloren gehen. Es wird mit Ihrer Adobe ID geladen. Ich werde es woanders machen. Lass es uns tun. Schließen Sie diese beiden nach unten und klicken Sie auf „Links verwalten“. Es öffnet sich hier drin und Sie können sehen, dass mein Instruktor Hauptquartier ist. Diese beiden Versionen, die ich gemacht habe, hätte ich es wahrscheinlich umbenennen sollen, bevor ich einen neuen Link erstellt habe, wie eine zwei Versionen 1, es wird jeden verwirren. Aber das sind die beiden Versionen, die Sie die alte löschen können, sagen Sie, dass Sie mit diesem fertig sind. Sie wollen nicht mehr, dass die Leute daran arbeiten, Sie können klicken und sehr große Buchstaben. Es steht „Dauerhaft löschen“. Ich werde sie für den Moment da lassen. Sie möchten, dass sie auf Mobilgeräten testen, sagen wir, Sie bauen eine App anstatt eine Website, lassen Sie uns wieder ins Aussterben springen. Um eine Vorschau auf einem Handy anzuzeigen, ist es nicht wie eine 100-prozentige Flüssigkeit. Sie haben zwei Möglichkeiten. Wenn ich wirklich einfach ausgestorben bin, schattiert man einfach in der Datei und sie können eine Vorschau wie wir zuvor auf einem Gerät mit der App gezeigt haben oder was ich dazu neige, ist, ich gebe ihnen einfach diesen Link, kopiere ihn und schicke ihnen eine E-Mail und sage: und fügen Sie es ein und sagen Sie, hey, öffnen Sie diesen Link über Ihr Telefon. Die meisten Menschen haben ihren E-Mail-Zugriff auf ihr Telefon. Sie klicken einfach auf den Link und klicken auf Vollbild und es funktioniert perfekt oder sie können es kopieren und in ihren mobilen Browser einfügen. Sie können es auch eingeben, aber das Ding ist zu lang. Sie können einen URL-Shortener wie Bitly oder goo.gl verwenden. Das ist ein nettes, um sie zu verkürzen, so dass es einfach zu tippen ist. Nun ist eine andere Möglichkeit zu teilen, es sowieso nicht wirklich zu teilen, nehmen Sie einfach Ihren Laptop mit und dann drücken Sie einfach die Play-Taste und bringen Sie sie dazu, es hier zu arbeiten. Das coole daran ist, dass man aufzeichnen kann, was vor sich geht. Kann hier sehen. Eigentlich ist das nur für einen Mac. Sie können auf diesen kleinen Aufnahme-Button klicken und tatsächlich wird es anfangen, aufzuzeichnen, was der Benutzer tut. Sie können sehen, wie ich hier anklicke. Was sie hier vor sich gehen. Es wird auch meine Stimme aufnehmen. Wenn Sie fertig sind, drücken Sie Escape, und das wird Ihnen erlauben, diese Datei wie ein mp4 zu speichern, okay, und ich werde es auf unsere Übungsdateien kleben, und ich werde es einfach in Excel ist nur auf meinen Desktop zu gehen, weil ich zu Bennett gehe. Also Instruktor HQ Test von Dan. Schauen wir uns mal an. Er ist mein Geschmack. Ich habe aufgezeichnet und das ist alles, was sie getan haben. Das kann ein netter, einfacher Weg zu gehen und Ihre Freunde dazu zu bringen, zu helfen oder es an den Kunden zu senden, damit sie einige Tests durchführen und Sie können aufzeichnen, was sie tun. Aber denken Sie daran, dass kleine Rekordoption nur auf Mac verfügbar ist. Der Unterschied zwischen PC und Mac ist nur gering. Nun, das ist einer der netten, die Mac hat und das gleiche, das Stecken direkt in das Gerät. Wenn Sie zusammen mit einem PC folgen, bemerken Sie, dass Menüsystem ein wenig anders in der Spitze konstruiert ist , um mehr von einem Window-System zu entsprechen. Das letzte, was ich Ihnen zeigen möchte, ist, wie Kommentare auf der anderen Seite aussehen. Dies ist ein tatsächliches Arbeitsprojekt. Ich habe diese Wireframes entworfen und sendet sie an Kollegen und Kunden, um Feedback zu erhalten. Ich zeige Ihnen ein kleines Beispiel, was passiert, wenn sie kommentieren. Dies ist die Homepage und Sie können sehen, ich habe ein paar Kommentare und Sie können sehen, es gibt zwei Möglichkeiten, Kommentare hinzuzufügen. Diese Pins, was schön ist, weil sie tatsächlich mit dem, was das zeigen, verbunden ist, weil es eine Menge Dinge auf dieser Homepage gibt. Hier drüben, was ich tun kann, kann ich darauf antworten und etwas erklären oder Fragen stellen oder ich kann das lösen und tatsächlich sagen, das ist geschehen. Ich repariere, was auch immer das Problem war, und es ist jetzt in Ordnung. Andere Dinge, die wir tun können, ist ein wenig Blick durch ein paar mehr Kommentare, mehr Kommentare, mehr Kommentare. Werfen wir einen Blick auf einige der allgemeinen. Dieser hier ist ein allgemeiner Kommentar für die ganze Seite. Sie haben nicht Anhänger. Jetzt möchte ich Ihnen zeigen, was Sie tun können und was sie tun können, wenn sie anhängen, wenn sie einen Kommentar hinzufügen. Sagen wir, ich möchte einen Kommentar machen, sie können sich entscheiden, warum haben wir Fallschatten. Ich ging ein bisschen zu über Bord mit diesem Drahtmodell. Ich habe es zu viel Detail bearbeitet. Ich habe es zurückgezogen, wie die, an der wir gerade arbeiten. Sie können das einfach dort lassen, drücken Sie die Eingabetaste und es wird zu einem generischen für das gesamte Dokument oder Sie hätten einen Stift hinzufügen können. Noch eine da. Ich weiß nicht mal, was das bedeutet, aber Sie können es ziehen und dort lassen. Das Coolste daran ist, dass es an diesen Punkt festgehalten ist. Ich weiß Feedback, wohin es geht, also wird das ein ziemlich böses kleines System sein , das [unhörbar] gemacht hat und Adobe gemacht hat. Ich habe es wirklich geliebt, dass sie sich anmelden können, indem sie raten, nicht zwingen, sich anzumelden. Denn sonst schicken sie mir einfach Kommentare zurück und E-Mails und sie sind wie On-Page-Zinn. Unten rechts ist ein grünes Ding und du bist wie wovon reden sie? Dieses Kommentieren ist supercool. Das wussten Sie schon, weil Sie es gerade gesehen haben. Ich werde weitermachen. Lasst uns auf das nächste Video gehen, wo wir anfangen, alte High Fidelity zu bekommen. 18. Moodboards und Ressourcen für Hi Fidelity UI Design in Adobe XD: Hey, da. In diesem Video werden wir uns die ersten Schritte mit unserem High-Fidelity-Mock-up ansehen. Außerdem werden wir uns mit Ressourcen befassen, die Ihnen beim Einstieg helfen. Wie dieser hier ist eine Windows-UI, es gibt einige coole Apple diejenigen, die wir finden werden. Es gibt ein großartiges Google-Material, und wir werden uns ansehen, wo wir unsere Art von Ideen für Moodboards bekommen können. Wir bauen eine Art schnelles kleines Stimmungsbrett. Wo ist es, da ist er, für unsere Designideen, und wir werden sie alle in unserem XD-Dokument zusammenstellen. In Ordnung. Also Ressourcen und Moodboards, lasst uns hineinkommen. Es ist also eine High-Fidelity-Zeit, die nur bedeutet, denken Sie daran, wir werden diejenigen mit Bildern, Farben und Schriftarten machen , die wir mögen. Als Erstes werden wir ein neues Dokument erstellen. werden wir nicht, es liegt an dir. Einige Leute arbeiten gerne von und aktualisieren Sie einfach den Wireframe. Ich fange oft gerne wieder an, ich finde, dass mir das Drahtmodell im Weg steht. Ich benutze es, ich beziehe mich darauf, und ich springe die ganze Zeit wieder hinein, um zu sehen, welche Art von Ideen wir haben, aber ich finde es oft einfach, wieder anzufangen. Das ist also, was wir in diesem Kurs tun werden. Also werde ich mit unserer Art von standardisierten Website beginnen. Ich werde es retten und ihm einen Namen geben. Ich gebe meine seltsamen Namen, weil es dir hilft, das später zu finden. Sie können zu Video 19 gehen und tatsächlich die Datei finden, an der ich arbeite. auch immer, das wird mein Lehrer sein, wie wir es vorher getan haben, Instructor HQ. Das hier wird Homepage sein. Eigentlich muss nur Homepage sein. Großartig. Es gibt ein paar Dinge, die wir tun werden, kurz bevor wir angefangen haben, und es geht nur um Moodboards und Ressourcen. Was die Ressourcen angeht, stellen wir sie irgendwie vor. Sie sind in einer Datei, es gibt diese Kits hier, wir werden nur Wireframes verwenden. Wenn Sie diese drei herunterladen, wenn Sie auf einen von ihnen klicken, bringen sie Sie tatsächlich auf die Website von Apple, und es zeigt Ihnen, wo Sie herunterladen können. Sie werden sehen, hier gibt es eine Option für XD. So können Sie das herunterladen. Ich habe sie für Sie sowohl für Apple, Windows und Google heruntergeladen. Sie befinden sich in Ihren Übungsdateien unter UI-Vorlagen. Wir benutzen Wireframes, das sind diese Typen hier. Sie können sie einfach in XD öffnen, und Sie können anfangen, von diesen zu ziehen , weil das Schöne an ihnen ist, sagen wir, wir verwenden Google-Material, es ist massiv, aber es ist wirklich wie unsere Wireframes, aber sie sind eine höher-treue. Sie sind hübsch. Sie haben alle Trimmings hinzugefügt, und oft arbeiten von einigen dieser, besonders wenn Sie mit Apps zu tun haben, gibt es nur Regeln, die Sie brauchen, wenn es zu Google gehen wird, und Sie verwenden eine Menge ihre vorgefertigten Symbole und Symbole und so. So können Sie sie genauso gut in Ihrem Mock-up verwenden. Jetzt nur damit Sie es wissen, es ist wahrscheinlich häufiger, den Apple zu verspotten, auch wenn Sie nach beiden gehen, Leute mögen die Apple-Versionen zu sehen. Laden Sie also das iOS-Aufkleberblatt herunter und verwenden Sie das dafür. Das ist also eine Möglichkeit, loszulegen. Eine andere Möglichkeit, Ideen und Ressourcen zu bekommen, ist wieder in Ihrem Markt. Unter Assets, unter Market in hier, wenn Sie in UI eingeben, können Sie oft viele Beispiele bekommen, die ziemlich nett sind. Sagen Sie, Sie mögen diese hier, um loszulegen, Sie können es herunterladen. Das ist eine PSD, also ist es nicht, ich habe noch keine XD-Optionen hier gefunden, aber halten Sie ein Auge auf sie. Aber Sie können dies einfach als visuelle Anleitung verwenden und Dinge aus Photoshop ziehen. Kein Problem. Also Market ist auch ein netter Ort. Dann gehen Sie zu Moodboards und Ideen. Es hängt also davon ab, wie Sie mit Ihrem Kunden arbeiten. Also, sagen wir, mein Klient, dass ich für dieses Projekt arbeite, das Instructor HQ, sie sind genau so, als ob du losgehst und es schön aussehen lässt. Sie haben keine besonders starke Meinung darüber, aber ic