Mockplus RP - UX - UI Design von Null zu Helden

1. Kurs-Einführung: Mock plus rp ist ein Online-Tool für UI-UX-Design und Zusammenarbeit. Und das Tolle daran ist dass Sie es nicht auf Ihren Computer herunterladen müssen. Sie müssen Ihre Maschine nicht zu sehr belasten. Welches Gerät Sie auch haben, es wird einwandfrei funktionieren , weil alles in einem Browser funktioniert. Sie können interaktionsreiche Designs und Prototypen erstellen diese zur Übergabe mit Ihren Kunden und Entwicklern teilen. Und es wird den Code immer im Hintergrund enthalten, was für ihre Entwickler immer praktisch ist, wenn Sie zu diesem Übergabeprozess kommen. Hallo Designer, Alex hier und willkommen zu diesem Skillshare-Kurs über Mach plus rP from zero to hero, einen Entwickler digitaler Produkte. Und bis jetzt habe ich etwa 500 digitale Designprodukte entworfen. Ich bin auch Kursersteller und habe bisher über 40 verschiedene UI UX-Design-Kurse aufgenommen. Und ich habe über 60.000 Studenten, die für diese Kurse eingeschrieben sind. In diesem Mock plus rP-Kurs behandeln wir, was der Willkommensbildschirm ist und wie man auf der Benutzeroberfläche navigiert, wie man mit verschiedenen Seiten arbeitet und zwischen ihnen navigiert. Was sind Komponenten und eingebaute Komponenten in ma plus rP und wie erstellt man eigene. Wie man mit Icons in Mock plus rP arbeitet, wie man verschiedene Assets und Asset-Sets erstellt. Wie man mit dem Eigenschaftenfenster arbeitet und was es ist und wie es sich ändert. Verschiedene Interaktionen kannst du in Mod plus rP erreichen. Wie man mit Knoten arbeitet, sind Häfen und Flughäfen. Und was ist der Unterschied? Was unsere Vorlagen sind, warum Sie sie verwenden und Zeit sparen und wie Sie produktiver werden können. Wie wähle ich eine Vorlage aus einer Vielzahl von Vorlagen auf meiner Website aus. Wie man die Vorlage anpasst, wie man sie bearbeitet, die Kopierfarbe im Layout und in den Bildern ändert. Wir werden mit einigen Flussdiagrammen beginnen und dann zu Wireframes übergehen und Komponenten verwenden, dann zu Wireframes übergehen und Komponenten verwenden um Wireframes sehr schnell zu erstellen. Verwandeln Sie diese Wireframes dann in ein Design, indem Sie verschiedene Farben, Bilder und Texte hinzufügen, um unser endgültiges Design zu erstellen. Am Ende werden wir die verschiedenen Interaktionen hinzufügen und unser Design zum Leben erwecken. Schließlich werden wir MC plus Cloud als Vorschau ansehen, teilen und verwenden, um mit anderen Mitgliedern unseres Teams, unseren Kunden und unseren Entwicklern zusammenzuarbeiten . Und ich werde einige Funktionen zur Zusammenarbeit erläutern , die Mock Plus rP bietet. Ihr Unterrichtsprojekt für diesen Kurs besteht darin, die Tipps und Techniken, die Sie in diesem Kurs lernen, zu verfolgen ein Design zu erstellen und ein Design zu erstellen. Es gibt ein spezielles Skillshare-Kursvideo. Schauen Sie es sich unbedingt an, um mehr Informationen darüber zu erhalten. More plus rp ist großartig, weil der Einstieg super einfach ist und der Einstieg kostenlos ist , sodass jeder der UI UX Design Community beitreten kann . Ich freue mich darauf, Sie im Unterricht zu sehen und lassen Sie uns ein fantastisches Website-Design erstellen. 2. Kursprojekt: Ihr Klassenprojekt für diesen Kurs besteht darin , eine Website mit einigen dieser Tipps und Techniken von Mock plus rP zu erstellen einigen dieser Tipps und Techniken von Mock , die Sie im Laufe des Kurses lernen werden. Sie können entweder Vorlagen verwenden oder Ihr eigenes Design von Grund auf neu erstellen Folgen Sie dabei einigen Tipps und Techniken , die Sie in diesem Kurs gelernt Sie können meiner Struktur folgen oder Ihre eigene Struktur erstellen. Das ist nicht wirklich wichtig. Es liegt alles an dir. Und mit welcher Breite fühlen Sie sich am wohlsten und welche Ansätze eignen sich für Ihren Designstil? Achte darauf, Spaß zu haben und wenn du fertig bist, achte darauf, sie als JPEG-Bilder zu exportieren oder Screenshots zu machen und sie in deine Klassenprojekte hochzuladen. Ich würde gerne sehen, was ihr euch einfallen lassen könnt, und ich würde gerne eure Ergebnisse am Ende dieses Kurses sehen. 3. Was ist Mockplus RP: Mock plus rp ist ein Online-UI-UX-Design-Tool für Designer wie Sie entwickelt wurde , weil Sie arbeiten können, wann immer Sie sich auf der Welt befinden Sie müssen lediglich Ihren Browser verwenden , den Sie bereits auf Ihrem Computer haben. Im Gegensatz zu einigen anderen Tools ist es nicht erforderlich, dass Sie über eine ultimative Designmaschine verfügen , sondern Sie können jeden Computer verwenden Sie bereits haben, da er, wie bereits erwähnt, innerhalb des Browsers funktioniert und Ihren RAM-Speicher und Ihren Cache-Speicher auf Ihrem Computer nicht Ihren RAM-Speicher und Ihren Cache-Speicher beansprucht. Sie können mit mehr plus rP mit anderen Personen zusammenarbeiten indem Sie die Dare-Sharing-Funktion und deren Teamfunktion verwenden. So können Sie Ihr eigenes Team zusammenstellen , wenn Sie innerhalb des Projekts arbeiten. Oder Sie können eingeladen werden, Teil des Teams einer anderen Person zu werden. Und Sie können in Echtzeit arbeiten und in Echtzeit mit anderen Personen aus ihrem Team zusammenarbeiten. Oder wenn Sie nur ein Freelancer sind, können Sie ganz alleine arbeiten. Du kannst komplexe Interaktionen und Animationen in mom plus rP erstellen . Und dann können Sie sie mit Ihren Kunden oder Interessenvertretern teilen , um Feedback zu erhalten und weitere Verbesserungen vorzunehmen. Und das Beste daran ist, dass Sie das exportieren und zur Weitergabe an Entwickler weitergeben können , die more plus Cloud und deren nahtlose Integration verwenden. Der Einstieg ist völlig kostenlos . Und in Ihrem Vorplan befinden sich Hunderte verschiedener Komponenten, vorgefertigte Komponenten, die bereits in Hunderten von verschiedenen Vorlagen enthalten sind . Sie können sie in Ihrem Arbeitsablauf verwenden, indem Sie sie einfach bearbeiten und in more plus rP öffnen. 4. Willkommensbildschirm: Wie jede andere Software auf dem Markt verfügt Mock Plus rP über einen Willkommensbildschirm, der Ihnen hilft, sich in den Anfängen Ihres Projekts zurechtzufinden. Lassen Sie mich Ihnen zeigen, wie es funktioniert. Also hier sind wir auf dem Willkommensbildschirm von mod plus rP. Und was Sie hier auf Ihrer linken Seite sehen können , ist alles, was wir kauen, das ist das, was Sie gerade auf dem Bildschirm sehen, was alle möglichen Optionen gleichzeitig sind. Darunter haben wir es kürzlich bearbeitet. Das sind also die Projekte , die Sie kürzlich bearbeitet haben. Offensichtlich meine Favoriten, weil Sie einem Frettchen jedes Projekt hinzufügen können. Ziemlich einfach, hier auf diesen Stern zu klicken. Und Sie können an mehreren verschiedenen Projekten gleichzeitig arbeiten , aber vielleicht sind nur einige davon Ihre Favoriten. Dann haben wir von mir erstellt. Und das sind Projekte, die speziell von Ihnen erstellt wurden. Denn wenn du ein Projekt erstellst und ein Konto für Mach plus rP erstellst, kannst du sehen, dass dein Nutzername angezeigt wird. Wie auch immer Sie Ihr Konto erstellt haben, in meinem Fall verwende ich meinen Namen und es heißt Team aus als Sie. Wie auch immer Sie Ihr Konto erstellt haben. Das bedeutet, dass Sie Ihrem jeweiligen Team verschiedene Teammitglieder hinzufügen können, indem Sie hier auf diese Schaltfläche klicken. Hier können Sie den Plan sehen, auf dem Sie sich befinden. Ich glaube, Sie können entweder kostenlos oder einen ultimativen Plan haben. Also. Hier wird es angezeigt. Wenn du also Teil des Teams bist, das von dir selbst erstellt wurde oder jemand anderes dich in sein Team eingeladen hat, zum Beispiel, du entweder als Freelancer für eine Agentur oder als Freelancer für einen Kunden arbeitest , oder wenn du Vollzeit für eine Agentur arbeitest, dann wirst du alle Projekte sehen , die von dir selbst erstellt wurden. Ich habe selbst angefangen, aber du kannst immer andere Leute dazu einladen. Dann haben wir recycelt, waren in allen Projekten, die Sie gelöscht haben, dabei. Endlich haben wir hier Vorlagen. Wir werden etwas später auf die Vorlagen eingehen. Aber wenn Sie eine schnelle Vorlage benötigen , können Sie einfach hier klicken. Und Sie werden zur folgenden Vorlagenseite weitergeleitet , auf der wir Mock plus Cloud haben. Wenn wir sehen, dass es heißt: Projekte teilen, Feedback sammeln und mit Spezifikationen und Acids umgehen, was wirklich wichtig ist, wenn man Mock plus rP hinter sich lassen und in die Marketplace-Cloud gehen möchte , um diese Dinge zu erledigen , die gerade erwähnt wurden. Sie können dies tun, indem Sie hier klicken. Und dann haben wir Plus d t, das beste Tool für kollaboratives Online-UI-Design. Wie kein anderer können Sie MC plus d t verwenden, um Dateien aus verschiedenen Tools wie Sketch, Figma zu öffnen . Und Sie können Ihre Dateien dort komplett von Grund auf neu erstellen . Oder du kannst auch mehr plus RB verwenden, was wir in diesem Kurs machen. Wenn ich dann zu allem zurückgehe, was wir hier sehen können, ist das neue Projekt, dann haben wir einen neuen Projektordner, was großartig ist, wenn Sie entweder verschiedene Dateien zu demselben Projektordner oder verschiedene Starts des Projekts zum Projektordner hinzufügen möchten entweder verschiedene Dateien zu demselben Projektordner oder verschiedene Starts des Projekts zum Projektordner hinzufügen demselben Projektordner oder . So möchten Sie beispielsweise eine mobile App oder Website erstellen, einen Dashboard-Bildschirm entwerfen und das alles in einem Projekt. Dann können Sie einen Projektordner erstellen und all die Projekte, die Sie erstellen, in diesen bestimmten Projektordner legen die Projekte, die Sie erstellen, in diesen . Wieder einmal habe ich bereits Mitglieder einladen, Option und was sie bewirkt, erwähnt . Und jetzt befindet sich, wie gesagt, die Anlage genau hier. Sie können Ihren persönlichen Bereich und das Team sehen. Sie können also zwischen den beiden wechseln , wenn Sie selbst an den Projekten arbeiten möchten und niemand anderes aus Ihrem Team sie sehen kann , oder als Teil des Teams, wie ich bereits erwähnt habe, wenn Sie auf Ihr Profilbild klicken, können Sie Ihr Profil bearbeiten. Sie können Ihre Teams überprüfen, da Sie Teil mehrerer Teams sein können. Benachrichtigungen und Anfragen. Du kannst die Hilfe hier sehen und wie du Hilfe zu RP erhalten kannst. Und schließlich können Sie sich abmelden. Wenn Sie mehrere Produkte haben, können Sie diese direkt hier suchen. Und Sie können Ihre Projekte organisieren , indem Sie hier klicken. Wenn Sie weitere Informationen erhalten möchten, um zu sehen wie der Typ des Projekts war, als es erstellt und aktualisiert wurde. Und du kannst es natürlich löschen, wenn du möchtest, wie gesagt, du kannst es hier als Favorit markieren. Sie können hier klicken, um es in der Vorschau anzuzeigen, zu klonen, zu duplizieren, umzubenennen, einen anderen Projektordner zu wechseln, es z. B. mit einigen anderen Teammitgliedern zu teilen. Fügen Sie Teammitglieder zu diesem bestimmten Projekt hinzu oder entfernen oder löschen Sie das gesamte Projekt vollständig. Was ich jetzt tun werde, ist auf Neu zu klicken. Und ich werde Sie im nächsten Video sehen, in dem wir erklären werden , was das ist, und wir werden uns mit der Benutzeroberfläche befassen. Also werde ich dich dort sehen. 5. Benutzeroberfläche: der Benutzeroberfläche einer Mautstelle werden Sie die meiste Zeit damit verbringen , in diesem Tool zu arbeiten. Und das Gleiche gilt für Ma plus rP. Machen wir also dort weiter, wo wir im vorherigen Video aufgehört haben . Lassen Sie mich Ihnen einen Überblick über ein Interface geben, was es kann und wo sich alle Optionen befinden. Also hier sind wir wieder da, wo wir beim letzten Mal aufgehört haben. Wir öffnen dieses Fenster. Und was wir tun werden, ist ihm einen Namen zu geben. Also geben wir unserem Projekt einen Namen. Und nennen wir es z.B. unser erstes Projekt. Und hier können Sie alle Presets sehen. Diese verschiedenen Voreinstellungen können Ihnen also verschiedene Optionen bieten, z. B. iPhone. Was Sie hier sehen können , ist für mobile Geräte Wenn Sie auf diesen kleinen Pfeil klicken, werden alle Presets geöffnet , die Ihnen das Mock Plus rP-Team zur Verfügung gestellt hat. Wenn Sie Ihr Preset jedoch nicht sehen, können Sie ihnen schreiben Wenn das Gerät beliebt ist, werden sie es vorstellen. Oder Sie können sich hier jederzeit für eine benutzerdefinierte Größe entscheiden , um mehr über die benutzerdefinierte Größe zu erfahren , die Sie verwenden möchten Sie können die Website des Herstellers besuchen und dann den Abschnitt Design aufrufen. Oder wenn Sie selbst ein Designsystem haben, können Sie es dort finden. Welche Art von Pixeldichte soll verwendet und welche Art von Dimensionen wurden verwendet. Daneben haben wir das iPad, das offensichtlich ein Tablet ist. Und hier können Sie alle beliebten Tablets sehen. Nochmals, wenn Sie Ihre Dimension nicht sehen, können Sie jederzeit an das Team schreiben, sie werden sie hinzufügen. Dann haben wir das Internet. Und Sie können einige der am häufigsten verwendeten Größen sehen. Natürlich gibt es noch andere, aber wenn Sie möchten, können Sie, wie gesagt, eine benutzerdefinierte Größe erstellen. Alle diese Größen sind in Pixeln angegeben. Um uns den Einstieg zu erleichtern, wähle ich einfach 1920 x 1080 aus. Und wieder können Sie von hier aus auf kostenlose Vorlagen zugreifen. Sie können dies von hier oder von hier oder innerhalb der Benutzeroberfläche selbst tun. Also klicken wir auf OK und lassen Sie mich Ihnen die Benutzeroberfläche zeigen. Während das geladen wird, kann ich zu dieser Seite zurückkehren und Sie können jetzt sehen, dass wir dieses erstellt haben, mein erstes Projekt, unser erstes Projekt, tut mir leid , vor ein paar Sekunden ich werde dieses loswerden, löschen, okay? Und jetzt habe ich nur dieses Projekt , weil ich Sie während des gesamten Kurses nicht verwirren möchte . Unser erstes Projekt ist also das, was wir gerade erstellt haben. So sieht es aus. Und wenn ich mein Steuerrad und das Scrollrad auf meiner Maus gedrückt halte oder Strg-Taste und eins auf meiner Tastatur drücke, wird es wieder an die richtige Position gezoomt. Lass mich mich verstecken, damit du ein bisschen besser sehen kannst. Und so sieht das Interface aus. Auf der linken Seite sehen Sie also alle möglichen Optionen. Hier haben wir Komponenten, wir haben Symbole, wir haben Assets, Seiten und Ebenen. Und ich werde sie alle in den nächsten Videos erklären . Darüber hinaus haben wir einige der am häufigsten verwendeten Optionen und hier haben wir Optionen zum Teilen und Zusammenarbeiten. Und dann haben wir das Panel auf der rechten Seite, dem es sich entweder um Eigenschaften handeln kann, was auch immer Sie innerhalb Ihrer Zeichenfläche auswählen, unterschiedlich sein wird, Interaktionen, das verwendet wird, wenn Sie Animationen und Interaktionen zwischen verschiedenen Zeichenflächen hinzufügen möchten . Und dann haben wir Hinweise, wenn Sie weitere Knoten hinzufügen möchten, was für Ihre Kunden, z.B. oder Ihre Teamkollegen, sehr hilfreich ist , das zu erkunden. Fangen wir von oben an. Wenn du das zurückdrückst, bringt dich der Pfeil zurück zu dieser Seite, der Homepage. Und Sie können sehen, dass kürzlich bearbeitet wurde und kein solches Projekt gefunden wurde , da dies offensichtlich unser erstes Projekt ist. Wenn wir dann hier klicken, können Sie das Projekt sehen. Ich kann neue erstellen. Ich kann die RPI-Datei importieren. Ich kann es speichern, um S oder Befehl S in den Mac-Einstellungen zu steuern . Wenn ich also genau dort klicke, kann ich die allgemeinen Optionen ändern. Ich kann also entweder diese Abkürzungen ändern oder Farben der Leinwand mit Offset einfügen, sodass Sie den Hintergrund Ihrer Leinwand auswählen können. In diesem Fall ist diese Art von mittel- bis dunkelgrau, aber Sie können es auch ändern und diesem Hintergrund Ihre benutzerdefinierte Farbe hinzufügen . Es kann komplett schwarz sein, es kann hellgrau sein, es kann weiß, rot sein , jede gewünschte Farbe. Sie können einige dieser allgemeinen Optionen aktivieren und deaktivieren. Dann haben wir die Layouteinstellungen, das ist das Layout im Hintergrund, und Sie können sehen, wie das funktioniert. Wir haben also zwei weitere Spalten, Spaltenbreite und die Rinnenbreite. Also lass uns sehen. Draußen, wir haben die Reihen, wir haben das Bild. Sagen wir also etwas wie, ich weiß nicht, Spaltenbreite. Geben wir ihm etwa 86. Wir bekommen also etwas schmalere Spalten, Rinnenbreite. Wir können die Rinnenbreite auf 100 erhöhen , damit Sie sehen können, was sie bewirkt. Es ist also diese Option hier, aber lassen Sie uns zurück zu 74 wechseln, z. B. Dann haben wir 12 Spalten. Aber wenn wir es wieder auf acht stellen, hast du nicht gesehen, wie das aussieht, aber lass uns zu 12 zurückkehren. Und natürlich die Gesamtbreite, das können Sie eingrenzen. also statt zu den 1920ern Gehen wir also statt zu den 1920ern über zu 18, 20 z. B. und Sie können sehen, dass wir diesen Raum jetzt auf dieser Seite haben, aber gehen wir zurück zu 1920 , weil wir ihn so eingerichtet haben. Da haben wir es. Und dann hast du den Offset. Was Sie also mit diesem Offset machen können , ist, ihn entweder in einen Mittelpunkt zu drehen oder Sie können den Pixelwert platzieren und er wird auf diese bestimmte Seite verschoben. Dann haben wir die Reihen. Wenn wir die Zeilen wechseln, können Sie sehen, dass die Zeilen diese horizontalen Spalten sind , die gerade erschienen sind. Rinnenbreite ist die Breite zwischen den Reihen. Offensichtlich scheint es so, als ob es zwischen den Säulen und der Höhe liegt. Nennen wir es also z. B. zehn und Sie können sehen, was das bewirkt. Aber lass mich diese Pfeile loswerden. Endlich haben wir die Bilder. Also vollständiger Raster- oder Strichumriss. Sie können sehen, wie das aussieht und was es tut. Und Sie können die Farben hier ändern. Wenn Sie mit Ihren Einstellungen zufrieden sind und Sie diese Werte ständig verwenden, können Sie sie schließlich Wenn Sie mit Ihren Einstellungen zufrieden sind und Sie diese Werte ständig verwenden, einschalten, um Standardeinstellungen vorzunehmen. Warum das wichtig ist, ist vor allem dann wichtig, wenn Sie entweder als Teil eines Teams oder als Freelancer an Monosomie für dieselben Projekte arbeiten Teil eines Teams oder als Freelancer . Das spart Ihnen eine Menge Zeit, da Sie einfach auf die Standardeinstellungen klicken können und wenn Sie das nächste Mal mehr plus rP D-Einstellungen öffnen , warten sie auf Sie, genau dort, wo Sie sie aufgehört haben. Dann fahren wir mit den Rastereinstellungen fort. Grid besteht im Grunde nur aus diesen Pixelblöcken rund um Ihre Zeichenflächen. Und Sie können sie so einstellen , wie Sie möchten. Wenn ich ihn also auf 40 setze, können Sie sehen, dass die Größe dieser Blöcke erhöht wurde, weil es vorher 20 waren, so wie wir es zuvor getan haben. Sie können die Farbe direkt hier ändern, sodass Sie die Richtung und das Gebietsschema ändern können. Und wieder können Sie Standardeinstellungen vornehmen. Dann haben wir eine Messung. Sie können eine grundlegende Ausrichtung haben. Wenn Sie also Ihre Objekte auf Ihrer Zeichenfläche bewegen, werden sie auf jeder Seite oben, unten, links, rechts und mittig ausgerichtet . Gleichmäßige Verteilungs- und Abstandsspezifikationen. Das ist im Grunde alles. Also, wenn ich auf OK klicke, gehen wir zurück zum Flughafen selbst. Lass mich mich verstecken, damit du ein bisschen besser sehen kannst. Unser Board ist im Grunde der Ort, an dem Sie all Ihre Elemente hineinlegen. Hier habe ich alle meine Grundkomponenten. Wir werden sie etwas später ansprechen. Aber wenn ich ein Element hineinziehe und dort ablege, kann ich es nach Belieben neu positionieren und neu organisieren. Und es befindet sich in der Zeichenfläche selbst. Sie können es aus der Zeichenfläche ziehen und Sie können sehen, dass es sich jetzt direkt außerhalb befindet. Wenn Sie jedoch Designs in Ihrer Zeichenfläche erstellen möchten , ziehen Sie sie einfach und platzieren Sie sie darin. Wie ich bereits erwähnt habe, ändert sich dieses Eigenschaftenfenster für alles, was Sie für Ihre Zeichenfläche auswählen. Aber damit werden wir uns etwas später befassen. Und was Sie auch tun können, ist einige Zeichentafeln zu erstellen, denen wir uns etwas später befassen werden. Aber im Grunde genommen werden diese Ports verwendet, z. B. wenn Sie einen Effekt oder einen Scrolleffekt nach links und rechts erstellen , wir an, Sie platzieren diese verschiedenen Seiten oder verschiedene Abschnitte Ihrer Seite oder mobilen App oder was auch immer Sie wählen. Es kann z. B. ein Pop-up sein, ein Banner hinzufügen oder etwas Ähnliches. Vielleicht eine fliegende Form oder etwas anderes als du kannst diese Unterflughäfen benutzen und sie über das Interaktionsfeld hier mit der Haupt-Zeichenfläche verbinden das Interaktionsfeld hier mit der Haupt-Zeichenfläche . Was auch immer der Benutzer innerhalb des unterirdischen Haupthafens des Flughafens tut , folgt dem Befehl n und wird an Ort und Stelle gesetzt. Wenn wir also zu dieser Seite zurückkehren, um Ihre Zeichenfläche umzubenennen, können Sie einfach hier doppelklicken und sie z. B. Homepage nennen , sagen wir. Und dafür duplizieren wir es einfach. Ich möchte zum Beispiel zwei davon haben. Du kannst Strg oder Command D drücken , um deine Zeichenfläche zu duplizieren, du direkt hier doppelklickst und zum Beispiel Shoppe-Seite sagst. Wenn wir diese Website erstellen und dann alle Elemente, die auf der Homepage waren, in die Shop-Seite übersetzt werden, was Sie auch tun können, ist, diese Seite zu Shop-Seite übersetzt werden, was Sie auch tun können, ist, diese Seite verschieben wenn Sie es nervig finden, z. B. um die Abstände zwischen Ihren Art-Boards zu sehen. Wenn Sie also nett und aufgeräumt mit ihnen umgehen möchten, können Sie sie einfach so positionieren, wie Sie möchten. Das reicht jetzt für unsere Häfen weil wir uns etwas später damit befassen werden etwas später damit Ich möchte all diese Elemente kurz oben erklären. Also haben wir dieses Panel auf der linken Seite in Angriff genommen. Also hier haben Sie Ihre Seiten, hier haben Sie natürlich Ihre Ebenen. Je mehr Ebenen Sie hinzufügen, desto mehr von ihnen werden angezeigt. Wenn wir das also duplizieren, können Sie sehen, wie das aussieht. Und wenn ich doppelklicke und es z.B. Rechteck nenne , hast du es. Rechteck, los geht's. Und jetzt habe ich drei verschiedene Schichten. Diese erste Option hier ist der Verbindungsmodus. Aber das reicht aus, um diese Interaktionen entweder zwischen Ihrem Flughafen und dem unterirdischen Port oder zwischen verschiedenen Elementen innerhalb Ihres RPA zu verbinden entweder zwischen Ihrem Flughafen und dem unterirdischen Port oder , z. B. haben Sie die Schaltfläche und möchten einen Hover-Status für verschiedene Komponenten erstellen , der sich innerhalb der Zeichenfläche befindet . wirst du mit dem Interaktionsmuster machen. Es kann also auf beide Arten verwendet werden. Darüber hinaus müssen wir eine Sub-Art-Board erstellen. Wenn ich also auf meine Sub-Art-Board klicke und die Option hier ziehe und zeichne, können Sie sehen, dass ich jetzt meinen Sub-R-Port habe, was genau das ist, was ich erwähnt habe. Nehmen wir an, dies ist unser Popup-Fenster. Und es wird ausgelöst, wenn ich genau hier klicke. Dann haben wir diese Option für den Connect-Modus. Wenn meine Benutzer also genau dort klicken, wird es verlinkt. Wenn sie also klicken, wird der Befehl aufgerufen und die Zeichenfläche angezeigt, bei der es diese handelt, die Position in der Mitte. Und wir werden das etwas später angehen. Einfach verklagt, nicht verwirrt , aber im Grunde funktionieren diese Dinge so. Daneben haben wir natürlich das Stiftwerkzeug, das verwendet wird, wenn Sie alle möglichen Objekte erstellen möchten , die sich nicht genau hier befinden. Sie können einfach auf eine Stelle außerhalb des Objekts klicken, um es abzuwählen, und dann können Sie es verschieben. Und wir sind zu Properties gewechselt. Sie können sehen, dass Sie einige verschiedene Eigenschaften haben , die Sie vorher nicht hatten. Daneben befindet sich ein Stiftsymbol n für das Stiftwerkzeug. Daneben steht Undo und Redo. Aber du kannst die Abkürzungen hier sehen. Also Control Command Z oder Control Shift, Command Shift gesetzt. Dann haben wir die Gruppenoption. Wenn ich also alle meine Elemente hier auswähle, kann ich hier oder Strg-G drücken , damit ich sie gruppieren kann. Oder ich kann Strg noch einmal drücken um die Gruppierung aufzuheben, wenn ich möchte. Also kannst du es gleich hier machen. Ich kann diese also von hier aus auswählen, Strg-G drücken, um sie zu gruppieren, doppelklicken und sie z. B. Rechtecke nennen , weil sie das sind, was sie sind. Oder wenn ich sie nicht in einer Gruppe haben möchte, kann ich die Gruppierung aufheben. Aber du kannst auch das nach oben oder nach unten bewegen, damit machen, was du willst, und es dann nach vorne bringen und es nach hinten bringen. Um die Schulden zu demonstrieren, werde ich dieses Objekt mit roter Farbe füllen , damit Sie es sehen können. Es ist jetzt also vor diesen Rechtecken. Wenn ich es skaliere, indem ich die Umschalttaste gedrückt halte, kannst du sehen, wie das aussieht. Also, wenn ich hier klicke und nach hinten schicke, wird es hinter diese Rechtecke geschickt. Und wenn wir es jetzt in den Vordergrund bringen wollen, wenn ich es auswählen kann, kann ich einfach hier klicken. Aber wenn ich es nicht auswählen kann, kann ich auf den Artikel klicken, der sich vor diesem Artikel befindet , und ihn nach hinten schicken. So funktioniert das also. Und dann, was wir hier haben, ist unsere Portliste. Derzeit haben wir nur eine Zeichenfläche, aber zB wenn ich zurück gehe und D drücke, um das zu duplizieren. Und wenn ich jetzt hier auf diese Option klicke, haben wir zwei Zeichenflächen. Nun, es mag ein bisschen albern klingen , wenn Sie nur zwei Zeichenflächen haben. Aber diese UI-Projekte können manchmal 200 Wörter haben, 300 Flughäfen. Eine solche Option zu haben ist wirklich wichtig, da Sie einfach zu dieser bestimmten Zeichenfläche springen können , indem darauf klicken, und Sie können sehen, was sie bewirkt. Sie können sich also vorstellen, dass Sie irgendwo in der Nähe sind und ich auf Homepage klicken möchte , um direkt dorthin zu gelangen. Steuerbefehl eins, um wieder in Position zu kommen, entferne diesen. Und deshalb ist unsere Hafenliste so wertvoll und so wichtig neben dem, was wir haben. Wenn ich mit dem Mauszeiger fahre, können Sie alle möglichen Optionen sehen, aber diese ist das Zustandspanel. Jetzt zeigt Status an, wie das Element aussieht wenn der Benutzer mit diesem Element interagiert. So können Schulden z. B. ein Standardstatus, ein Status mit dem Mauszeiger, angeklickter Status, ein Zustand der Presse, deaktivierter Status und vieles mehr sein. Abhängig von Ihrem Projekt werden Sie also mehr oder weniger dieser Zustände haben. Um das schnell zu demonstrieren, wählen wir eine Schnelltaste und geben wir hier etwas wie Read More ein. Klicken Sie irgendwo draußen. Und lassen Sie uns den Button vergrößern , damit Sie ihn ein bisschen besser sehen können. Ändern wir die Füllfarbe auf dieses Blau. Lassen Sie uns diese Textfarbe in Weiß ändern. Ändern wir das in, sagen wir, Roboto und etwas Großes wie Winseln zu vielleicht so etwas. Jetzt haben wir also unseren Button. Lassen Sie uns diesen Rahmen und diese Schaltfläche entfernen , weil wir sie aus dem Komponentenbereich gezogen haben , genau hier, wo Kompost die Standardkomponenten ist. Natürlich können Sie hier Ihre eigene Komponente erstellen und sie zu Assets hinzufügen. Darüber werden wir etwas später sprechen. Wenn Sie also hier klicken, haben Sie all diese Staaten ausgewählt, die den gedrückten fokussierten Mauszeiger deaktiviert haben , und vieles mehr. Moment befinden wir uns also im Normalzustand. Also, wenn ich es auf Mauszeiger ändere und wenn ich etwas mit der Füllfarbe mache, z. B. so etwas. Und ich gehe zurück in den Normalzustand und wechsle zwischen Normal und Mauszeiger. Sie können sehen, wie es aussieht, aber wie können Sie es in der Vorschau anzeigen? Eine kurze Vorschau können Sie hier machen. Sobald dies der Fall ist, können Sie einfach den Mauszeiger bewegen und sehen , was das mit Ihrem Button macht. Sie können den Inhalt Ihrer Komponenten ändern, in diesem Fall die Schaltfläche in einem dieser Zustände. Also zB beim Schweben sollte es nicht die Schaltfläche „Mehr lesen“ heißen, klicke jetzt oder was auch immer. Sie können die Größe Ihrer Schaltfläche ändern. Sie können die Farbe ändern. Sie können den Farbverlauf mit einbeziehen, sodass Sie mit diesen Daten wirklich kreativ werden können. Und Sie können sehen, dass Sie eine Reihe dieser verschiedenen vorgefertigten Zustände für all diese vorgefertigten Komponenten haben. Und Sie können natürlich Ihre eigenen erstellen. Sie können auf Hinzufügen, Bundesstaat, Benennen klicken , wie Sie möchten. Also sagen wir zum Beispiel auch deaktiviert, weil wir es bereits deaktiviert haben. Und jetzt, wo dies deaktiviert ist, können Sie weitermachen und weitere Änderungen hinzufügen. Sie können es umbenennen und damit machen, was Sie wollen. Im Grunde sind dies die Staaten auf den Punkt gebracht. Dann haben wir die Optionen Zoom und Zoom. Diese können Sie einfach anklicken. Oder wenn Sie ein Scrollrad an Ihrer Maus haben, können Sie die Strg- oder Befehlstaste verwenden und einfach das Scrollrad an Ihrer Maus verwenden. Und wie gesagt, Control Zero, Control One Control to, du kannst einfach mit diesen Einstellungen herumspielen. Dann haben Sie die Option veröffentlicht. Dies ist großartig, wenn Sie dies als Prototyp veröffentlichen möchten , damit andere es entweder von Ihrem Team oder von einem anderen Team überprüfen können. Dann haben wir wieder Mitglieder und Sie können klicken und verschiedene Mitglieder einladen. Sie können den Projekttyp von privat auf Team ändern. Und es wird für alle Mitglieder des aktuellen Teams oder für alle Mitglieder dieses Projekts zugänglich sein , was wirklich wichtig ist, weil Sie vielleicht nur ein paar Designer oder Teamkollegen zu diesem speziellen Projekt einladen möchten, Teamkollegen zu bevor wir es veröffentlichen und dem breiteren Team wie Marketing zur Verfügung stellen es veröffentlichen und dem breiteren Team wie Marketing zur Verfügung , wie, ich weiß nicht, Finanzen und so das. Sie können Mitglieder einladen. Rolle, Sie können ihr einfach diese Rollen hinzufügen, ein Mitglied, ein Mitarbeiter, ein Gast. Sie können sehen, was jeder von ihnen tun kann , wenn der Link abläuft und einen Einladungslink, sodass Sie diesen Link kopieren und ihnen senden können, damit sie beitreten können. Und sobald sie es getan haben, wirst du sie hier sehen. Darüber hinaus können wir das Online-Prototyp-Präsentationspaket herunterladen, was Online-Prototyp-Präsentationspaket herunterladen, sehr nützlich ist, wenn Sie versuchen, das NVP entweder an die Investoren oder an die höheren Mitglieder Ihres Teams, wie Vorstandsmitglieder, zu verkaufen das NVP entweder an die Investoren oder an die höheren Mitglieder Ihres Teams, , solche Dinge. Sie können also diesen Prototyp herunterladen und ihn entweder persönlich mit ihnen teilen , um genauer zu erklären, was Sie hier tun möchten, oder wenn Sie Ihr Projekt nicht veröffentlichen und Vorstand nicht einladen möchten, z. B. um dieses Projekt anzusehen, dann können Sie dieses Projekt einfach mit ihnen teilen. Sie können es auf ihrem eigenen Computer öffnen und sie werden alles sehen können, was Sie getan haben. Und ich werde etwas später zeigen, wie das aussieht. Daneben hatten wir die Vorschauoption. Also werde ich genau dort klicken. Es öffnet sich ein neues Fenster. Sobald es geladen ist, können Sie all diese Optionen sehen, die wir gesehen haben. Und das ist es, was Ihr Vorstand , z. B. a., sehen kann, ob sie den Prototyp herunterladen. Die Liste der Seiten wird also genau hier sein und sie haben immer noch die Suchoption. Sie können auf diesen Seiten navigieren, sie können in den Vollbildmodus wechseln. Sie können diese Panels genau hier verstecken. Verstecken Sie also das linke Hydrid-Panel, wenn sie den Vollbildmodus wählen , und drücken Sie die Esc-Taste, um den Vollbildmodus zu verlassen. Und natürlich können sie zoomen sodass sie auf den Bildschirm passen, z. B. zurück zum Vollbild und jetzt haben Sie Ihre vollständigen Websites, sagen wir das Präsentationspaket. Und es ist großartig , weil dort alles erklärt wird. Sie können diesen Vorschau-Link weiter teilen. Oder Sie können festlegen, auf was sie klicken können und auf was sie nicht klicken können. Der Linkbereich wird immer angezeigt. Das wird also zeigen, was, was auf dieser speziellen Seite verlinkt ist, Charlene Carrier beim Mauszeiger. Sobald sie den Mauszeiger über Ihren Link bewegen und das, was Sie auf dieser Seite tatsächlich anklickbar gemacht haben, werden Inhalte außerhalb der Seite angezeigt, nicht Markierungen und die Symbolleiste ausblenden. Hier werden die Notizen gespeichert. Also zum Beispiel, wenn du sie wissen lassen möchtest , was in der nächsten Version enthalten sein wird, was wird später enthalten sein? Was ist jetzt hier? Was sie tun müssen, wenn Sie ihnen bei einigen Aspekten dieses Designs helfen möchten , können Sie das hier in die Notizen eintragen. So sieht die Vorschau aus. Und am Mittwoch, wenn du es heruntergeladen und geteilt hast, werden sie das sehen können. Wenn Sie hier klicken, können Sie entweder von Startseite oder von der aktuellen Seite aus beginnen. Dies ist natürlich großartig , wenn Sie mehrere Zeichenflächen haben und für dieses bestimmte Projekt zwischen Was ist Homepage wechseln möchten . Und dann müssen wir hier Vollbild eingeben linken Bereich ausblenden, Hydrid-Panel. Und jetzt können Sie Ihre Bemühungen einfach auf das vollständige Design konzentrieren , wenn Sie möchten. Jetzt können Sie sie nicht mehr anzeigen, wenn Sie den Mauszeiger bewegen, Sie müssen hier rechts klicken, um das linke und das rechte Panel anzuzeigen, z. B. verwenden Sie nur die Tastenkombinationen um nach dem zu suchen, was Sie wollen und das in Ihrem Projekt enthalten ist, dann können dies einfach ausblenden oder Sie benötigen keine Ebenen, Sie müssen nur etwas wirklich erstellen schnell mit diesen Rechtecken. Also wenn ich zB R eintippe, wird mir das Rechteck angezeigt. Wenn ich z. B. alles eintippe , wird mir der Kreis angezeigt. Wenn ich t nehme, komme ich zum Textwerkzeug. Manchmal braucht man diese Schichten nicht wirklich , um sich abzulenken. Und hier bietet sich diese Option an. Sie können diese beiden Panels einfach ausblenden. Und schließlich, wie bereits erwähnt, aber ich möchte noch einmal ganz kurz erwähnen, dieses Panel auf der rechten Seite wird alles ändern, was Sie auswählen. Also lass es mich dir zeigen. Wenn ich zurückgehe und, sagen wir, das Textwerkzeug auswähle , haben wir die Typoptionen und wir haben hier begrenzte Optionen weil das die Optionen für den Typ selbst sind. Dann haben wir den Kreis. Sie können sehen, dass sich das ein bisschen ändern wird. Dann haben wir das Rechteck. Es wird sich ändern. Es wird mir wieder einige zusätzliche Optionen geben . Und wenn wir meine benutzerdefinierte Form wählen , die ich zuvor erstellt , die ich zuvor erstellt habe, gibt es mir auch all diese anderen Optionen. Aber es gibt eine Option, die wirklich wichtig ist und sie heißt Seiten. Es befindet sich genau hier. Und ich werde dir im nächsten Video sagen, was es macht und wie du es verwenden kannst. Also sehe ich dich dort. 6. Seiten: Wenn Sie an einem Projekt arbeiten, möchten Sie es aufteilen. Es ist also einfach für Sie zu navigieren und es ist für Ihre Teamkollegen einfach, sich zurechtzufinden. Hier bietet sich die Seitenoption an. Denn innerhalb der Seitenoption können Sie genau das tun. Gehen wir also zurück zum Modus plus rP, ich zeige, wie es funktioniert. Also hier sind wir, wo wir beim letzten Mal aufgehört haben, und hier sind die Seiten auf der linken Seite. Derzeit haben wir nur die Homepage und das ist, was Sie hier sehen. Wenn ich hier doppelklicke und dies z. B. zur Shop-Seite ändere z. B. zur Shop-Seite und wenn ich auf die Startseite klicke, ist dies die eigentliche Homepage. Aber wenn wir eine weitere Seite erstellen möchten, klicken Sie genau dort, es wird mir Seite eins angezeigt. Also für die erste Seite wird es immer noch unser Board erstellen, weil wir es als unser Standard-Board eingerichtet haben. Wir haben den für die Homepage selbst erstellt. Aber hier können wir tun, lassen Sie uns sehen, lassen Sie uns sehen, was wir hier gemacht haben. Also wird sie hier blättern. Wir können so etwas wie einen Blog machen, also kannst du das entweder tun. Wenn Sie also zwischen der Startseite wechseln, die Ihre Shop-Seite sein wird, können Sie mit der rechten Maustaste auf Sie doppelklicken, um sie umzubenennen. Also shoppen Sie z.B. das kann gebloggt werden sodass Sie einfach zwischen diesen Seiten wechseln können , wenn Sie dies wünschen. Aber das ist nicht wirklich das, was ich diese Seiten verwenden würde , ohne sie zu verwenden ist so etwas wie Flussdiagramme. Und das werden unsere Flussdiagramme sein, z. B. dann wird das unser Wireframe sein. Und geben wir ihm den Namen eines Wireframes. Wenn ich dann auf Neu klicke, verwende ich dieses für das Design. Und wenn ich das zoome und einfüge, verwenden wir dieses für das Design. Und schließlich, um ein neues zu erstellen, geben wir ihm so etwas wie Projekt- oder Design-Briefing. So kann ich leicht zwischen diesen wechseln. Lassen Sie mich das auch umbenennen, mein Excel. Also wie gesagt, sie können leicht zwischen diesen wechseln und ich kann sie bewegen. In die Flussdiagramme kann ich also das Design-Briefing einfügen, wenn ich möchte, oder ich kann es ein wenig nach außen verschieben. Stellen Sie es einfach draußen auf. mit der rechten Maustaste und Sie können sehen, dass Sie es kopieren können. Sie können eine Seite oder eine Gruppe einfügen. Sie können klonen, umbenennen oder löschen, wenn Sie möchten. Aber was ich eigentlich tun möchte, ist zu ihm zurückzukehren und es einfach nach draußen zu bringen , so. Wenn Sie möchten, können Sie mehrere auswählen und einfach eine Seite hinzufügen oder sie zu einer Gruppe hinzufügen. Und Sie können sehen, dass diese Gruppe hinzugefügt wurde. Sie können sie aber auch auswählen und hier eine neue Gruppe erstellen. Und du kannst in diese Gruppe legen, was du willst. Also z.B. Designdateien, weil Sie mehrere Seiten in Ihrem Projekt haben können. Und sagen wir Designbrief, ich in diese Gruppe aufnehmen möchte. Und Sie können sehen , dass es genau hier enthalten ist, sagen wir Design. Und es wird so aussehen , dass Nummer zwei angezeigt wird, weil es zwei Dateien enthält. Wenn Sie mehrere Dateien haben, werden natürlich mehrere Dateien darin enthalten. Gehen wir ein paar Schritte zurück und ich wähle meinen Ordner aus, klicke auf Löschen und es wird angezeigt, dass ich diese Gruppe löschen werde. Also im Grunde würde ich diese Seiten dafür verwenden. Wenn Sie Ihr Design-Briefing von Ihrem Kunden erhalten haben, z. B. wenn Sie es lesen und hier ganz einfach navigieren möchten, dann fahren Sie mit den Flussdiagrammen fort. Erstellen Sie einige schnelle Flussdiagramme sind tolle Seitendiagramme oder Benutzerabläufe oder was auch immer Sie wollen. Und wenn Sie mit ihnen fertig sind und Ihre Struktur eingerichtet haben, werden wir zu Wireframes übergehen und schnell einige grundlegende Wireframes entworfen haben. Zeichne einige Rechtecke auf eine Seite, z. B. oder lass uns einige Kreise sehen und platziere sie an einer beliebigen Stelle auf der Seite. Sagen wir also so etwas, um ein paar schnelle Layouts ohne Farben zu erhalten . Vielleicht können Sie eine schöne, einfache graue Farbe verwenden einfache graue Farbe um Ihre Elemente zu unterscheiden. Und dann können Sie von diesen Elementen zum Design übergehen, wo Sie einige Farben hinzufügen. Sie werden eine klare Projektkopie und eine klare Topographie hinzufügen. Es gibt klare Unterteilungen mit Symbolen, mit Bildern, mit Animationen und Interaktionen. Und dann werden Sie dieses Design entweder veröffentlichen oder als Prototyp herunterladen , um es mit Ihren Kunden zu teilen. Im nächsten Video werden wir über Komponenten sprechen , da sie ein sehr wichtiger Bestandteil von Mock plus rP sind. Es gibt Hunderte von ihnen und ich werde Ihnen zeigen, was sie tatsächlich tun und wie Sie sie in Ihrer Arbeit verwenden können , indem Sie mehr plus rP verwenden. Also werde ich dich dort sehen. 7. Komponenten: Arbeit am UI-Design wiederholt sich im Allgemeinen ziemlich. Das bedeutet, dass sich viele Elemente im Laufe der Zeit wiederholen. Wenn Sie also ein bisschen Zeit sparen können , ohne diese Elemente zu erstellen, Sie jedes Mal, wenn Sie mit einem neuen Projekt beginnen werden Sie jedes Mal, wenn Sie mit einem neuen Projekt beginnen, gut sein, denn Sie werden jedes Mal viel Zeit in Ihrem Projekt sparen . Hier kommen die Komponenten zum Einsatz. Und Komponenten können sehr einfach sein, wie z. B. ein Rechteck, oder sie können wirklich komplexe Komponenten sein, die aus mehreren verschiedenen Elementen bestehen aus mehreren verschiedenen Elementen , wie z. B. einer Navigationsleiste oder einem Slider oder einer abgeschlossenen Shop-Seite oder einem Checkout-Auto oder etwas Ähnlichem. In jedem Fall sind Komponenten sehr nützlich, und ich ermutige Sie wirklich Erforschung von Komponenten zu beginnen und sie zu verwenden. Denn vor allem bei Knöpfen, sagen wir, sie sich ständig wiederholen. Und Sie möchten Ihre Zeit nicht damit verschwenden , sie jedes Mal zu erstellen. Lassen Sie uns also zu mehr plus rP übergehen. Ich zeige Ihnen einige Standardkomponenten, die von Anfang an enthalten sind , wenn Sie mit Block plus rP beginnen. Hier befinden wir uns also in der Benutzeroberfläche, in der wir beim vorherigen Mal aufgehört haben. Und hier haben wir die Designseite ausgewählt. Und darunter haben wir diesen Kompost, der die Abkürzung für Komponenten ist. Darunter haben wir eine Suchoption. Wenn ich also z.B. nach einem Rechteck suche , weil ich es sehen kann, kannst du das Rechteck genau hier sehen. Es ist also, es ist innerhalb der Basis und innerhalb der Formen, im Grunde dieselbe Komponente genau dort. Lass es uns loswerden und lass uns zurückgehen. So einfach sind die Grundformen , die Sie dort sehen. Lassen Sie mich zu Wireframe wechseln, weil es dort viel einfacher zu demonstrieren sein wird . Wenn ich also wie zuvor ein Rechteck per Drag-and-Drop ziehe und ablege, wie ich bereits erwähnt habe, haben Sie verschiedene Optionen für Ihr Rechteck. Genau hier. Sie können mit der Füllfarbe, mit der Kesselfarbe herumspielen . Sie können dort platzieren, wo Ihre Grenze sein soll. Sie können Ihre Ecken durch eine der beiden separaten Ecken abrunden. Wenn Sie also den Mauszeiger bewegen, können Sie sehen und wenn Sie viel ändern, 50, können Sie sehen, dass dies die obere linke Ecke ist , weil das aktualisiert wurde. Oder wenn du alles zu 50 hinzufügen möchtest, dann kannst du das direkt hier tun. Es wird aktualisiert, jede einzelne Ecke aktualisiert. Dann kannst du das prozentual hinzufügen, du kannst es nach Schatten hinzufügen. Oder das Tolle an Komponenten ist, dass wenn ich meine Komponenten auswähle, Sie diese Erweiterungen haben. Sie können sie also zeigen oder verstecken. Und Sie haben diese Formoption. Jetzt werden diese Erweiterungen für alles, was Sie auf Ihrer Seite auswählen, und für welche Komponenten Sie sich entscheiden, unterschiedlich sein . Genau wie das Eigenschaftenfenster selbst, je nachdem, welche Form Sie gewählt haben, welche Komponente wir hier ausgewählt haben. Natürlich können Sie es für jede einzelne Option zu verschiedenen Optionen hinzufügen . Sie können die Farben ändern, Sie können die Rahmenfarbe ändern, z. B. dann können Sie in jeder von ihnen einen Typ hinzufügen. Für einige von ihnen wird es jedoch sehr spezifisch sein je nachdem, welche Komponente Sie auswählen und was diese Komponente tun soll. Hier haben wir für dieses spezielle Rechteck die Formoption. Wenn ich also darauf klicke, können Sie alle möglichen Formen sehen , die genau hier erscheinen. Das ist wirklich nützlich, weil Sie ganz einfach von diesen geraden Ecken zu den abgerundeten Ecken wechseln können . Wenn ich z. B. außerhalb davon klicke, können Sie sehen, dass wir jetzt diese abgerundeten Ecken haben. Und wenn ich zurück zu hier gehe und meine Option auswähle, gehe zurück zu meiner Form und wechsle sie zu hier oder hier. Sie können sehen, dass wir jetzt diese abgerundeten Ecken haben. Wenn ich es also verlängere, kannst du damit herumspielen und ich kann mit diesen Formen anpassen, was ich will. Aber wenn wir zu meiner Standardeinstellung zurückkehren, können Sie sehen, dass ich sie jetzt nicht habe. Das ist also die Option mit diesen Formen. Und ich benutze sie sehr gerne, weil man ganz einfach zwischen diesen Optionen wechseln kann. Dann haben wir z.B. die Zeilenoption, die sich hervorragend für Zeilentrennungen zwischen verschiedenen Abschnitten und Seitenumbrüche, sagen wir Text, eignet. Sie können es ziehen und ablegen und etwas eingeben. Also lass uns, lass uns etwas eingeben. Und was Sie mit dem Typ tun können, ist, die Zone, in der der Typ fehlschlägt, auf diese Weise nach links, rechts, oben und unten zu erweitern die Zone, in der der Typ fehlschlägt, auf diese Weise nach links, . Wenn Sie einen kurzen Absatz erstellen möchten , der diesen bestimmten Bereich ausfüllt, können Sie Ihren Text drehen , indem Sie hier klicken. Und wieder können Sie es für jede Art von Interaktion, die Sie möchten, mit diesem bestimmten Link verknüpfen. Sie können also, sagen wir, einen Hover-Effekt darauf erstellen . Oder Sie können es mit einigen anderen Teilen Ihres Designs verknüpfen. Auch hier bietet die Erweiterung verschiedene Optionen für den Typ. So können Sie die Position festlegen , an der es kriecht. Sie können einen Tooltip oder einen externen Link hinzufügen. Wenn Sie möchten, dass dieser Typ online etwas anderes hinzufügt, können Sie die Füllfarbe, die Randfarbe für die Form verwenden Randfarbe für die Form oder die Typografie direkt hier auswählen. Im Moment funktionieren Google Fonts und Adobe Fonts nicht, aber wir werden in einer separaten Lektion mit Schrift arbeiten. Also lass uns einfach weitermachen. Aber das sind deine Optionen für den Typ daneben, du hast dein Bild, also kannst du dieses Bild skalieren, etwa so. ZB. Oder Sie können es auf so etwas skalieren. Du kannst also machen, was du willst und du kannst sehen, wenn ich es bewege es zeigt mir verschiedene Optionen. Sie können Ihre Umschalttaste gedrückt halten, um verschiedene Elemente auszuwählen und sie zusammen zu verschieben. Wenn ich z. B. meine Umschalttaste und den unteren Pfeil gedrückt halte, bewegt es sich in Zehnerschritten, wie Sie hier sehen können. Und wenn ich klicke und meine Alt-Taste gedrückt halte, kannst du die Abstände zwischen allen verschiedenen Elementen und allen verschiedenen Kanten sehen . Um ein anderes Bild hinzuzufügen, wählen Sie das aus, was Sie tun können, und noch einmal , unter Erweiterung, weil es sich um ein Bild handelt, wird es ein bisschen anders aussehen. Sie haben Ihre Upload-Optionen. Sie können also natürlich von Ihrem Computer hochladen und alle möglichen Bilder verwenden und sie dort hochladen. Aber grundsätzlich können Sie auch einige Links verwenden und diese Bilder kopieren und einfügen, z. B. wenn wir Online-Bilder verwenden möchten, aber ich empfehle immer diese Bilder auf Ihrem Computer zu speichern. Wenn etwas schief geht, können Sie es nicht online finden. Dein Internet funktioniert nicht, was auch immer, dann kannst du es einfach benutzen. Klicken Sie auf Hochladen und es wird Ihnen angezeigt. Klicken Sie also, um es hochzuladen, oder ziehen Sie es per Drag & Drop hierher. Du kannst die Originalgröße beibehalten, aber du kannst mehr plus rP optimiertes Todesbild für dich lassen . Aber ich möchte zeigen, dass dies eine fantastische Option ist, die sie haben. Dies ist also der Standardstil, oder Sie können ihn auf den Wireframe-Stil umstellen. Es wird also so aussehen, was ich wirklich gerne sehe. Sie können zwischen diesen wechseln und Ihre Kunden können leicht erkennen, okay, das ist also ein Bild und Sie können sehen, wenn Sie anfangen, es zu dehnen , wird es verschiedene Formen annehmen. Nehmen wir an, weil wir 1920 sind, positionieren wir es in den Zentren der Todesfälle und lassen Sie uns erweitern, sagen wir, dass dies ein Heldenbild ist. Sie können sehen, wie cool es aussieht und wie ausgearbeitet unser Design bereits ist, und wir haben nur ein Element hinzugefügt. Dann haben wir die untere, wahrscheinlich am häufigsten verwendete Option online und innerhalb des UI-UX-Bereichs. Also, wenn ich das für die Breite auf 300 umstelle und mal sehen, 64 und eine Höhe. Was ich drinnen machen kann, ist die Größe meiner Schrift auf vielleicht 32 zu ändern . Und du kannst sehen, dass es riesig ist. Politisch zurück auf 24 oder sogar auf 18. Ich finde den gut. Also kann ich es fett machen. Lass uns sehen. Ich kann die Füllfarbe auf, sagen wir, diese schöne blaue Farbe ändern . Lasst uns die Grenze loswerden. Und lassen Sie uns so etwas wie eine schöne weiße Farbe für unsere Texte verwenden . Und Sie können doppelklicken, um es zu ändern , um z. B. hier und erneut zu einem externen Link zu gelangen. Sie können einen Tooltip verwenden. Sie können die Position beim Scrollen festlegen. Und das bedeutet, wenn Sie Ihre Zeichenfläche auswählen, können Sie sie beliebig ausdehnen. Und wenn Sie mit dem Scrollen beginnen, bleibt dieses Element unverändert, was normalerweise für Navigationselemente wie Menüs ideal ist . Darunter haben wir dann Input. Wie gesagt, es ist im Grunde dasselbe wie ein Button, aber Eingaben werden in den Foren am häufigsten verwendet. Dann haben wir einen Textbereich, der sich hervorragend für Absätze eignet. Wir haben Container. Und das erste ist ein Panel. Und das Panel ist eine Komponente, mit der Sie alle benötigten Elemente an einem Ort platzieren und sie alle gleichzeitig verwenden können. Es ist eine nette Komponente , mit der Sie Designs wie z. B. Karten oder scrollbare Abschnitte für Ihr Projekt erstellen können. Daneben haben wir das Inhalts-Panel. Und das ist eine Komponente , mit der Sie den Effekt eines Tabs erzeugen können, z. B. für den Inhaltswechsel. Und Sie können es problemlos mit unterdurchschnittlichen Anschlüssen verwenden , um diesen Effekt zu erzielen, wenn Sie möchten. Und darunter haben wir endlich die Webansicht, und das ist eine Komponente, mit der Sie Websites schnell gestalten können. Und vor allem können Sie damit direkt eine Website-URL eingeben , um diese Website direkt in Ihre Benutzeroberfläche einzubetten. In der Vorschau können Sie also mit dieser eingebetteten Website interagieren , wie Sie es tatsächlich direkt online tun. Darunter haben wir gemeinsame Komponenten, die ich sehr gerne Designsystemkomponenten nenne. Weil Sie diese Komponenten in den meisten Designsystemen finden werden. Und wieder werden sie für die Komponente, die Sie auswählen, unterschiedlich sein . Und sie werden dir verschiedene Optionen auf der rechten Seite geben. Sagen wir also App-Navbar. Sie können hier sehen, wie es aussieht . Wir haben verschiedene Optionen. Wir haben also ein Symbol, wir haben Farben ausgewählt. Wenn Sie also genau dort klicken, können Sie sehen, was das bewirkt, wenn Sie die andere Option auswählen. Wischen Sie also direkt über das Symbol, um ein Symbol in der Komponente auszuwählen , und klicken Sie auf das gewünschte Symbol in den Bibliotheken Dieses Symbol werden wir im nächsten Video behandeln. Aber im Grunde funktioniert diese Komponente so. Und Sie haben die meisten von ihnen hier. Dann haben wir die Diagramme, die sich natürlich von selbst erklären . Welche Art von Diagramm Sie auch einbeziehen möchten, Sie können es einfach ziehen und ablegen. Lassen Sie uns dieses Diagramm verwenden und Sie können hier mit all diesen Optionen herumspielen. Dann haben wir das Markup, das eine meiner Lieblingsoptionen ist. Wechseln wir zu Flussdiagrammen. Und lassen Sie uns einige dieser Elemente loswerden. So etwas. Das freut mich sehr. Und wenn ich etwas hinzufügen möchte, kann ich auf meine Elemente doppelklicken. Oder wenn ich sie auswähle und zu einer Gruppe zusammenfüge, wenn ich doppelklicke. Sie können sehen, dass es sich auf ein Element konzentriert, das ich gerade zu bearbeiten versuche. Und es wird sich jetzt auf dieses Element konzentrieren. Wenn Sie also fertig sind, bearbeiten Sie, fügen Texte hinzu, ändern Farben, ändern Formen, fügen Bilder hinzu. Was auch immer Sie tun, wenn Sie draußen klicken , wird den fokussierten Effekt verlassen und Sie können sie einfach verschieben und auswählen, um wieder in den fokussierten Modus für die Bearbeitung zu wechseln. Aber um zum Markup zurückzukehren, wo dies wichtig ist, insbesondere bei Flussdiagrammen, ist die Verwendung dieser Pfeile. Wenn wir also etwas weiter zoomen, haben Sie zwei Punkte und Sie können diese beiden Punkte beliebig verschieben. Sie können die Startoption hier sehen. Also sagen wir keine. Oder noch besser. Lass es uns hinzufügen. Fügen wir es wieder hinzu, wie es war, zu , zu, sagen wir, sagen wir diese Option. Da haben wir es. Dann wird mein Endpunkt keiner sein. Also verwende ich Control C, Control V, um es einzufügen. Und dann halte ich meine Umschalttaste gedrückt. Und dann können Sie bei diesem sehen, dass es umgekehrt ist. Startpunkt. Es hat es genau hier platziert, aber am Endpunkt hat es es nicht platziert. Für diesen obersten Punkt werde ich also diesen Kreis verwenden. Mal sehen, was es ist. Da haben wir es. Ich werde es nur ein bisschen hochstupsen zu so etwas. Und jetzt für meinen Endpunkt verwende ich den Pfeil. Sie können also sehen, wie einfach das ist. Nehmen wir an, wir haben hier unsere rechteckige Komponente. Ziehen Sie es einfach per Drag & Drop hinein, etwa so. Nehmen wir an, kopieren Sie es und fügen Sie es hier ein und darin kann ich, sagen wir, die Startseite, so etwas einfügen. Und ich kann die Größe natürlich auf vielleicht zehn oder so reduzieren . Und Sie können das ganz einfach erweitern und den Benutzern zeigen, wie sie sich mit Ihrem Produkt oder Ihrer Show den Stakeholdern zurecht finden, wie Ihre Teamkollegen, Ihre Ideen und die besten Ansätze, die sie verfolgen können. Natürlich kann dies weit ausgedehnt werden und verschiedene Elemente umfassen, aber das ist nur in diesen Präsentationsmethoden , die Sie verwenden können. Darunter befindet sich nun eine Kreismarkierung innerhalb des Markups. Sie können das in Verbindung mit dem Pfeil verwenden. Sie können die Haftnotizen verwenden wenn Sie Kurznotizen innerhalb oder außerhalb Ihres Designs hinzufügen möchten innerhalb oder außerhalb Ihres Designs Sie können Ihre Haftnotiz einfach hier platzieren. Also, wenn dein Teamkollege einspringt, kannst du ihm etwas sagen, wie verschiedene Bilder hinzufügen , über die wir gestern gesprochen haben , oder so ähnlich. Sie können also einfach mit diesen Haftnotizen herumspielen und sie sind wirklich nützlich, wenn sie fertig sind Sie können einfach auf Löschen klicken und sie ganz von der Seite entfernen und die Markierung ablegen, natürlich eine großartige Komponente wenn Sie Karten erstellen. Darunter haben wir dann alle möglichen Formen , die Sie verwenden können. Und das Mach plus RP beinhaltet alle möglichen Formen, von den sehr, sehr einfachen bis hin zu solchen , die so komplex sind. Und das erinnert mich an eine Ikone mit der ich gesprochen habe, über die wir im nächsten Video sprechen werden. Also werde ich dich dort sehen. 8. Symbole: Du weißt, wie man sagt, ein Bild sagt 1.000 Worte. Dafür sind die Icons da. Und in diesem Video werde ich dir Icons zeigen, was sie machen und was du mit Icons innerhalb von more plus r p machen kannst . Also hier sind wir wieder in einem Durchgang rp, wo wir aufgehört haben. Und hier haben wir das Symbol. Also werde ich gleich hier klicken. Sie können alle möglichen Optionen sehen. Also haben wir wieder die Suche, die nach den Symbolen selbst getrennt ist . Wenn ich also z. B. persönlich tippe , können Sie alle möglichen Personensymbole sehen. Und wenn ich das Symbol hierher ziehe und ein bisschen näher zoome, haben wir alle Optionen, die wir bereits in Angriff genommen haben. Aber das Tolle daran ist, wenn Sie das Symbol hier per Drag & Drop ziehen. Wie Sie sehen, geht es genauso schnell, aber Sie können den Stil ändern. Wir haben also das Zinn und wir haben den Bolzenstil, wir können die Farbe ändern. Also lass es uns auf diese Farbe aktualisieren, zB haben wir den Tooltip und den externen Link. Und je nachdem, wie dieses Symbol bevorzugt wird, haben wir die Melodie und wir haben den Riegel. Für sie alle wird es sich also manchmal drastisch ändern , manchmal nicht. Aber im Grunde kann man sehen, wie das aussieht. Natürlich können Sie diese Symbole auch einfach platzieren, wo Sie möchten. Wenn wir also z. B. diese Komponente wählen, kehren Sie zu den Ebenen zurück und Sie können sehen, dass wir uns hier bei der Button-Komponente befinden. Wenn ich versuche, es hineinzuziehen, wird es es einfach hier platzieren. Also müsste ich sie eigentlich so gruppieren, um dieses Symbol in dieser Schaltfläche sehen zu können. Sie können also natürlich die andere Schaltfläche mit dem darin enthaltenen Symbol erstellen , wenn Sie möchten. Aber jetzt, wenn ich anfange, sie zu bewegen, können Sie sehen, dass sie sich jetzt in derselben Komponente befinden. Als ich versucht habe, es zu ziehen kannst du sehen, dass es die Größe aller reduziert. Und wenn ich meine Umschalttaste gedrückt halte, wird die Größe gleichmäßig reduziert. Das ist das Tolle an Icons. Du kannst sie umstellen, du kannst sie ändern. Im. Hier können Sie sehen, dass wir Office-Diagrammgesten und alle möglichen Kategorien haben Office-Diagrammgesten und alle möglichen Kategorien mit denen Sie herumspielen können. Und Sie können sehen, dass einige von ihnen einen etwas anderen Stil haben. Also haben wir hier den Zinn-Stil. Und wenn wir es aktualisieren und fett formatieren, können Sie sehen, wie das aussieht. Eine letzte Sache, die ich beachten möchte ist dies mit der Interaktion. Wenn ich also auf meine Interaktion klicke und sie hierher ziehe, z. B. kannst du die Trigger ändern, du kannst den Status wechseln. Sie können den Status von normal auf deaktiviert ändern, z. B. und solche Dinge. Aber wir werden uns in einer der zukünftigen Lektionen damit befassen. Aber im Moment überlasse ich dir das einfach. Also im Grunde sind das die Icons und das ist es, was Sie mit den Icons selbst machen können. Und du kannst sie wechseln, du kannst sie neu positionieren, du kannst sie neu anordnen, du kannst sie platzieren, wo du willst und mit ihnen machen, was du willst. Und das Tolle daran ist, dass all diese Icons in Mock Plus rP bereits enthalten sind. Sie müssen also nicht Ihre Zeit damit verschwenden, online nach diesen Symbolen zu suchen und zwischen verschiedenen Icon-Packs zu wechseln. Sie können Ihre Icons natürlich per Drag & Drop von Ihrem Computer ziehen , z. B. in unserer P.Sit, sie werden problemlos funktionieren. Aber für dieses spezielle Beispiel verwende ich diese Symbole gerne, verwende ich diese Symbole gerne weil sie bereits in jedem einzelnen Symbol enthalten sind , das Sie sich vorstellen können , das sich hier befindet. Warum also Ihre Zeit damit verschwenden online nach verschiedenen Symbolen zu suchen? Darüber hinaus haben wir die Assets und wir werden uns im nächsten Video damit befassen. Also werde ich dich dort sehen. 9. Werte: Es ist großartig, all diese Standardanlagen und -gegenstände in Mob-Boss-RP zu haben. Aber was ist, wenn Sie Ihre eigenen Assets erstellen und diese für die weitere Verwendung speichern möchten, entweder alleine oder mit Ihren Teamkollegen? Nun, hier kommt die Asset-Option ins Spiel. Und lass uns zurück zu meinem Plus rP springen. Lassen Sie mich Ihnen zeigen, was das macht und was Sie damit machen können. Also hier sind wir wieder da, wo wir das vorherige Video aufgehört haben, und hier haben wir die Säureoption. Wenn ich also meine Vermögensoption auswähle, können Sie sehen, dass wir drei verschiedene Optionen haben. Wir haben Farben, Text und Komponenten. Wie bereits erwähnt, können Sie Ihre eigene Standardkomponente von Grund auf neu erstellen. Lassen Sie mich Ihnen zeigen, wie das funktionieren würde. Und wir sind immer noch auf den Ebenen, wir sind immer noch in den Wireframes und langweilen uns. Also lasst uns genau das tun. Lassen Sie uns einen Button erstellen, z. B. unseren, und ziehen Sie ihn auf so etwas. Also lass uns vielleicht mit 50 anfangen. Und lassen Sie uns etwas eingeben, das sagen würde, lesen Sie mehr. Lass uns sehen. Ich werde diesen Text in der Mitte meiner Schaltfläche positionieren . Ich wähle es aus und verwende, sagen wir, etwa zehn für den Eckenradius. Lass uns diese Ecke loswerden. Und für die Füllung nehmen wir diese Farbe, die wir genau dort ausgewählt haben. Dann lassen Sie uns mit etwas anderem beginnen, z. B. mit einer kleinen Grenze und lassen Sie uns mit, ich weiß nicht, vielleicht 16, einfach mit etwas anderen Analysten beginnen, die von der Mitte aus anrufen. Und ich werde bei diesem Gehäuse den Bolzen verwenden und ihn vielleicht weiß auswählen. Und dann gehe ich zurück zu meinen Icons. Und mal sehen, Gier. Ich werde dieses Symbol verwenden, z. B. hier platzieren. Und ich werde die Farbe auf diese oder die Farbe ändern , die wir gerade ausgewählt haben. Stellen Sie sicher, dass diese beiden zentriert sind indem Sie sie anklicken und auswählen und dann hier klicken. Und dann können Sie alle Ihre Elemente auswählen und sie so zentrieren. Also lasse ich es einfach da stehen. Es ist 18 von dieser Seite, es ist 21 auf dieser Seite. Also lass uns mit so etwas beginnen. Also vielleicht 20 auf dieser Seite und 19 unentschlossen. Ich denke, es wird gut funktionieren. Jetzt haben wir diese Optionen. Nennen wir das also BT und slash Biji, um dafür unseren eigenen Button zu erstellen. Und ich wähle alle drei aus, drücke Control G und nenne es mean btn, z. B. für die Haupttaste. Und ich werde zu den Assets innerhalb der Komponenten wechseln , ich klicke darauf füge Komponenten zu Assets hinzu. Es wird als Haupt-BTN angezeigt. Also Haupttaste, Sie können es in eine Standardgruppe legen oder eine andere Gruppe erstellen, Änderungen, automatische Synchronisierung mit allen Instanzen. Eine Instanz ist im Grunde Version dieser Schaltfläche, die online latent ist. Wir haben beschlossen, vielleicht eine breitere Schaltfläche oder eine höhere Schaltfläche oder eine kleinere Schaltfläche zu erstellen . Das wird nur eine Version dieser Hauptschaltfläche sein. Also wird drinnen alles beim Alten bleiben. Der Inhalt wird sich also nicht ändern. Vielleicht werden sich die Farben nicht ändern. Die Interaktionen werden gleich bleiben. Nur die Größe wird anders sein. Hier kommen also die Instanzen ins Spiel. Und du kannst dich ändern. Sie können automatische Änderungen synchronisieren, indem Sie diese Option für all Ihre verschiedenen Instanzen verwenden. Und genau hier ist diese Option großartig. Also kann ich einfach zuschlagen, okay. Und du kannst sehen, dass es genau hier auftauchen wird. Also hier haben wir unseren Hauptknopf. In unserer Standardgruppe haben wir unsere Hauptschaltfläche. Und du kannst sehen , wie das aussieht. Jetzt ist es in der roten Farbe. Und wenn ich möchte, kann ich einfach umschalten, zu einer anderen Seite zurückkehren, sagen wir zum Design. Hier siehst du, dass wir eine leere Seite haben und ich kann es hier einfach grob umschreiben. Wenn ich jetzt zurück zu meinen Wireframes gehe und etwas bearbeite, kann ich z.B. hineindoppelklicken. werde auf die separate Seite weitergeleitet, auf der ich meine Elemente hinzugefügt habe. Nehmen wir an, ich möchte etwas ändern , vielleicht eine andere Farbe als diese Farbe. Sagen wir, klicken Sie auf Anwenden und gehen Sie zurück. Und Sie können sehen, dass wir uns in einem Wireframe befinden, aber wenn wir zum Design zurückkehren, wird die Änderung trotzdem angewendet da dies eine Instanz unserer Hauptschaltfläche ist. Obwohl es völlig dasselbe ist, ist es nur eine Kopie innerhalb des Designs dessen, was wir in zwei Wireframes haben. Da ich diese Farbe verwende und sie mir sehr gut gefällt, kann ich sie einfach doppelt anklicken, um sie aufzutragen. Aber nehmen wir an, ich möchte meine Ebene auswählen, hier reingehen, sie Haupttaste nennen, das ist in Ordnung. Und ich möchte diese Farbe wählen. Vielleicht weil die Farbe bereits hinzugefügt wurde, kann ich hier doppelklicken und den Button Vg öffnen. Was ich tun kann, liegt in meinem Vermögen, da es meine Farbe ist. Das können also verschiedene Farben sein und ich kann diese loswerden, z.B. oder wähle einfach diese aus oder ich kann doppelklicken und sie zB Summe nennen. Oder das kann, sagen wir, dunkelgrau oder so ähnlich sein. Wechseln Sie zu „Weiterverkaufen“ und klicken Sie auf Anwenden. Und wenn Sie dann wieder hierher zurückkehren, können Sie sehen, wie Ihre Farben genau hier erscheinen. Aber wenn ich doppelklicken möchte , kann ich meinen Text direkt hier auswählen. Aber ich kann unter Texten einfach klicken. Und hier haben wir die Widerlegungsversion dieses Textes. Wenn Sie z. B. die Farbe ändern oder sie so ändern, dass sie nicht fett ist oder sich ändert. Völlig andere Schrift, Typ oder Schriftgröße. In diesem Fall können Sie einfach auf Plus klicken und es wird Ihren Texten hinzugefügt. Drücken Sie einfach auf Anwenden. Wenn du es verlässt. Hier kannst du sehen, was es macht. Und das Tolle daran ist, wenn ich mich entscheide, einen anderen Text zu wählen, sagen wir diesen, z. B. und ich kann ihn auf wenn ich mich entscheide, einen anderen Text zu wählen, sagen wir diesen, z. B. Roboto ändern und Sie können sehen, dass er in Echtzeit aktualisiert wurde, wechseln Sie um, um 16 zu vermeiden, was ich ihm gesagt habe, genau hier zu tun. Oder wenn wir meinen Tastendruck auswählen, wird jemand diese Farbe anwenden. Und Sie können sehen, warum diese Optionen großartig sind. Wenn ich diese Farbe auf Dunkelgrau ändere, können Sie jetzt sehen, wo sich Assets als nützlich erweisen. Sie können Assets natürlich in verschiedenen Optionen verwenden . Sie können z. B. komplette Komponenten wie beispielsweise Kontaktformulare erstellen . Und Sie werden das Kontaktformular in Ihrem gesamten Design wiederverwenden . Es wird also für Sie von großem Vorteil sein, ein Asset in Bezug auf Komponenten zu haben , wird also für Sie von großem Vorteil sein, ein Asset in Bezug auf Komponenten zu da Sie es einfach per Drag-and-Drop an die gewünschte Position ziehen und dort ablegen können , und Sie können diese Komponente verwenden und wiederverwenden. Und wenn Sie es aktualisieren müssen, z. B. mag Ihr Kunde diese Art von Icons nicht. Vielleicht wollen sie kein Feld, vielleicht wollen sie eine Gliederung. Sie können diese Komponente einfach als Hauptinstanz auswählen . Sie diese Änderung auf unser Symbol anwenden, wird es automatisch alle Ihre Instanzen und Komponenten synchronisiert , unabhängig davon, wo sie sich in Ihrem Design befinden. Das ist also der Unterschied zwischen Ihren Assets, die Sie erstellt haben, und diesen Komponenten. Weil Komponenten wirklich Standardoptionen sind , die du in mehr plus rP bekommst. Aber Assets sind etwas, das für Sie wirklich persönlich ist und das Sie für jedes einzelne Projekt , an dem Sie arbeiten werden, erstellt haben. Eine letzte Sache, die ich erwähnen möchte, ist, wie Sie Ihre Bibliothek tatsächlich mit Ihren Teamkollegen teilen können. Genau hier, wenn Sie den Mauszeiger bewegen und auf diese drei Punkte klicken, haben Sie die Option Teilen. Wenn du darauf klickst, heißt es, ich will zeigen, bist du sicher, dass du diese Asset-Bibliothek mit dem Küchenteam teilen möchtest , sagst du, okay, weil du Teil dieses Teams bist, denk daran, wenn du auf die Homepage gehst und dort wirst du sie sehen können. Jetzt haben wir diese verknüpfte Option und wir haben diese Option. Wenn ich also hier klicke, sehen Sie die Bibliothek, unser erstes Projekt, das ist unsere Bibliothek. Und wenn Sie Mitglied einiger anderer Teams sind, z. B. in Ihrem Team sind, gibt es einige andere Bibliotheken , zu denen Sie gehören. Als Teammitglied kannst du sie hier sehen, sodass du einfach zwischen ihnen wechseln kannst. Aber weil wir nur eine haben, die wir gerade erstellt haben, ist das die einzige, die im Moment gezeigt wird. Aber denken Sie daran, dass Sie hier unbegrenzt viele Bibliotheken haben können . Nehmen wir zum Beispiel in einer Bibliothek an, dass Ihre Teamkollegen eine Farbpalette erstellt haben , die Sie verwenden werden. Eine andere Bibliothek besteht z. B. grafischen Elementen, die Sie beispielsweise für Begleitmaterial oder Branding-Arbeiten oder ähnliches verwenden beispielsweise für Begleitmaterial oder werden. Dann gibt es in einigen anderen Bibliotheken vielleicht einige Bilder , die Sie auf Ihrer Website verwenden werden. Dies ist also eine großartige Option, da Sie problemlos zwischen all diesen Bibliotheken wechseln können. Nimm die Elemente, die du brauchst, von ihnen. Wenn Sie also auf sie klicken, die Elemente in werden die Elemente in diesen Bibliotheken genau hier angezeigt. Sie können sie einfach per Drag & Drop auf Ihre Seite ziehen, z. B. wenn wir verschiedene Komponenten haben, sehen wir uns verschiedene Schaltflächen oder Eingabeformulare oder ähnliches an. Oder wenn Sie verschiedene Textstile oder verschiedene Farben verwenden möchten , wird all das hier vorgestellt. Und eine gute Option ist, wie gesagt, diese gemeinsam genutzte Funktion, die Sie auch rückgängig machen können , wenn beispielsweise die Bibliothek gerade nicht fertig ist und Sie sie zu einem anderen Zeitpunkt beenden werden. Und dann kannst du es noch einmal mit deinen Teamkollegen teilen, dir das nächste Video, ich werde dir ein bisschen mehr Informationen über das Eigenschaftenfenster zeigen ein bisschen mehr Informationen über und was es kann. Also werde ich dich dort sehen. 10. Eigenschaften-Anzeigefeld: Wir haben uns in diesem Kurs bereits mit dem Eigenschaften-Panel befasst, aber ich werde es etwas ausführlicher behandeln und Ihnen nur einige etwas mehr Optionen zeigen , die ich in den vorherigen Videos nicht erwähnt habe. Also lasst uns einspringen. Wie bereits erwähnt, befindet sich das Eigenschaftenfenster hier auf der rechten Seite. Egal, was Sie auswählen, es wird sich in Echtzeit ändern und aktualisieren. Aber was ich nicht erwähnt habe, sind diese Optionen hier oben. Hier haben wir Ausrichtungsoptionen, mit denen Sie Ihre Objekte relativ zur Zeichenfläche ausrichten können , auf der sie sich befinden. Also wenn du z.B. dieses Objekt nimmst, es nach draußen stellst, ausgewählt, wird es offensichtlich nicht wissen, wo es ausgerichtet werden soll. Es nimmt also einfach deine Zeichenfläche in Angriff und zielt einfach auf deine Zeichenfläche sodass du sie horizontal von links zur Mitte positionieren kannst , oder? Oder Sie können es nach oben positionieren. Zeilenmodus vertikal oder unten, dann kannst du deine Gegenstände auseinanderlegen. Das ist also großartig. Wenn Sie mehrere solche Optionen haben, z. B. dann haben Sie diese. Sie können also horizontal verteilen. Schau dir an, was passiert, wenn ich darauf klicke, um sicherzustellen, dass es den gleichen Abstand zwischen meinen Symbolen hat. Oder Sie können sie vertikal verteilen. Wenn sie sich so befinden, können Sie sie auswählen und auf diese Option klicken und sie werden einfach hier platziert. Aber wenn Sie möchten, können Sie hier klicken. Und das wird sie wirklich übersichtlich organisieren und so positionieren, wie Sie möchten. Aber gehen wir ein paar Schritte zurück und positionieren wir sie so, wie sie zuvor funktioniert haben. Weil ich Ihnen diese Option zeigen möchte, damit Sie sie genau hier platzieren können , wenn das Symbol größer ist, z. B. nicht mit diesen Standardsymbolen, sondern wenn Sie Ihre eigenen verwenden, können Sie einfach hier klicken. Und wenn Sie den Mauszeiger bewegen, haben Sie diese Optionen, was großartig ist, wenn Sie den Abstand zwischen ihnen vergrößern möchten . Und natürlich automatische Anpassung zwischen allen möglichen Optionen. Wenn Sie nun eins auswählen, sind, wenn Sie mehrere auswählen, wie Sie gesehen haben, heißt es, dass drei Komponenten ausgewählt wurden. Oder nehmen wir an, zwei Komponenten wurden ausgewählt. Erstens, eine Standard-11, die ich z.B. erstellt habe und dann haben Sie diese Optionen. Das ist also, um es zu verstecken. Es ist also immer noch hier, damit du sehen kannst, was es ist. Aber wenn Sie zur Vorschau gehen, wird es nicht sichtbar sein. Dies dient dazu, es zu deaktivieren. Ihre Benutzer werden also nicht in der Lage sein, z. B. darauf zu klicken und dann können Sie es sperren oder entsperren, und dann wird es sich nicht bewegen können, sie werden es nicht auswählen können und solche Dinge. Sie haben das intelligente Layout. Wenn ich das also auswähle und zum intelligenten Layout gehe, können Sie zwischen automatisch oder manuell wählen. Sie können eine feste Breite verwenden, z. B. oder eine feste Höhe. Sie können Boot aktivieren oder deaktivieren. Wenn ich also anfange zu ziehen, wird die feste Höhe beibehalten, aber die Breite wird anders sein. Oder du kannst andersherum gehen. Du siehst also, ich kann die Höhe nicht mehr ändern. Entschuldigung, warte noch, aber in diesem Fall kann ich die Höhe ändern. Und Sie können wählen, wo Ihre Artikel haften bleiben sollen. In diesem Fall bleiben sie auf der linken Seite, aber du kannst auf die rechte Seite wechseln und du kannst sehen, dass sie sich gerade nach rechts bewegen. Aber auf jeden Fall kannst du Auto verwenden und anpassen , wie du willst und mach plus rP seine Magie machen lassen und von dort aus anwenden. Hier haben wir die Breite, wir haben die Höhe, X-Achse, Y-Achse und dann haben wir die Drehung. Also z.B. 45 Grad, du kannst sehen, was das bewirkt. Und dies sind die erweiterten Optionen für den horizontalen Raum und den vertikalen Abstand. Wenn ich also diese auswähle, können Sie hier sehen, dass wir horizontale Abstände haben, aber wenn wir sie umdrehen, können Sie sehen, dass wir dann vertikale Abstände haben. Was wir auch im Eigenschaftenfenster für die meisten Objekte haben , sind Schatten. Also, wenn ich auf Schatten klicke und etwas wie, ich weiß nicht, 6.10 oder zehn eintippe. Sie können sehen, dass ich jetzt den Hintergrund flach hier aufgenommen habe . Ich kann diesen Kanal ändern, indem ich hier klicke und seinen Alphawert ändere , der im Grunde der Opazitätswert ist. Hier können Sie die Farben ändern, sodass Sie die gewünschte Farbe wählen können. Aber ich nehme in diesem Fall einfach das Standardschwarz, vielleicht so etwas. Aber Alpha, offensichtlich ist es einfach zu stark. Vielleicht zehn Prozent, das wird das ganz nett senken. Aber da dies ausgewählt ist, deaktiviere ich einfach den Schatten dafür. Und wenn ich dann alles auswähle, funktioniert es einfach wie zuvor. Wenn ich das also auf 20 erhöhe, muss ich das auswählen und den Schatten darauf erneut deaktivieren. Es wird nur den Schatten auf dem Hintergrund deiner Elemente haben . Das Crawling an einer festen Position ist großartig, wie ich bereits erwähnt habe. Wenn wir z. B. die Navigation hier oben haben , möchten Sie die gesamte Navigation auswählen. Nehmen wir an, das ist unsere gesamte Navigation, etwa so. Wenn Sie also ein Start-Scrolling und Ihre Kosten für die Zeichenfläche verwenden Start-Scrolling und Ihre Kosten für die Zeichenfläche , bleibt es an dieser bestimmten Position und bewegt sich überhaupt nicht. Auch hier haben Sie, je nachdem, was Sie ausgewählt haben, verschiedene Optionen. Und das haben wir bereits in früheren Videos angegangen. Ich werde also nicht zu viel Zeit damit verbringen, weil ich zur nächsten Lektion übergehen möchte, nämlich Interaktionen. Es befindet sich genau hier und wir sehen uns im nächsten Video. 11. Interaktionen: Statische Designs zu haben ist in Ordnung, aber wenn Sie ihnen Interaktionen hinzufügen, wird Ihren Designs einfach ein bisschen Leben eingehaucht. Hier bietet sich das Interaktions-Panel an und es bietet einige großartige Optionen in ma plus rP. Also springen wir rein und lassen Sie mich Ihnen zeigen, was Sie tun können. Ordnung, also hier haben wir beim letzten Mal aufgehört. Und lassen Sie uns jetzt über Interaktionen sprechen. Jetzt. Im Grunde befinden sich Interaktionen genau hier und es ist das, was zwischen zwei Elementen oder zwei Flughäfen oder auf einem einzelnen Element passiert zwei Elementen oder zwei Flughäfen , wo Sie eine Art von Animation hinzufügen möchten , nur um zu zeigen, was passiert , wenn der Benutzer mit diesem bestimmten Element interagiert . Sie können hier sehen, was es sagt. Sie können eine Komponente oder eine Zeichenfläche auswählen und auf Interaktion hinzufügen klicken , um verschiedene Interaktionen hinzuzufügen. Oder Sie können einen Linkpoint der Komponenten zu einer beliebigen Zielkomponente oder einer Seite trinken . Nun, dieser Linkpunkt ist das, was hier steht. sind also diese roten Punkte und im Grunde kannst du auf dich selbst zeigen, du kannst es auf andere Elemente zeigen oder du kannst es auf andere Flughäfen zeigen, sogar auf andere Seiten, wenn du möchtest, dass es zwischen dieser bestimmten Seite oder dem Flughafen oder einer separaten Seite oder RPA interagiert dieser bestimmten Seite oder dem Flughafen oder . Wenn Sie also verschiedene Interaktionen hinzufügen möchten, können Sie im Grunde Ziele auswählen. Sie können also zwischen Komponenten wählen und zwischen den Seiten wählen. Und du kannst es z.B. in self ändern . Und hier haben Sie die Auslöser. Trigger sind im Grunde das, was diese Interaktion auslöst. Welche Art von Trigger der Benutzer also ausführt, wird dazu führen, dass diese Interaktion tatsächlich beginnt und tatsächlich stattfindet. Was wir hier haben, ist unser Doppelklick, Rechtsklick mit der Maus nach unten, Maus hoch und all diese verschiedenen Trigger. Dann haben wir Befehle. Was wird passieren, wenn wir den Auslöser tatsächlich haben? Dann haben wir das Verschieben, Zoomen, Drehen, Einblenden, Ausblenden, Scrollen. Das sind also nur einige grundlegende Befehle, aber wir haben später auch einige fortgeschrittenere Befehle. Dann haben wir einen relativen Wert. Wenn also relativ zur Position mehr angekreuzt ist, wenn nicht angekreuzt, mehr zum spezifischen Standort. Wenn also mehr an dieser bestimmten Position liegt, können Sie die X- und Y-Werte verwenden um sie an dieser bestimmten Position zu positionieren. Danach kommt die Lockerung. Und so wird diese Interaktion im Grunde aussehen. Wird es ausschließlich von Punkt A nach Punkt B gehen? Oder wird es linear sein? Wird es eine Lockerung geben, eine Lockerung? Was das im Grunde bedeutet ist, wird es sich gut in die Animation einfügen? Geht das leicht aus der Animation raus? Oder wird es einfach direkt von Punkt A nach Punkt B gehen ? Während dieser Interaktion. Danach haben wir Dauer. Also, wie lange wird diese Interaktion stattfinden? Und dann haben wir am Ende die Verzögerung, Verzögerungen im Grunde genommen das, was darin steht. Also, nachdem ich darauf geklickt habe oder nachdem ich ihm einen Befehl gegeben habe, gibt es keine Verzögerung oder ist es sofort passiert? Hier bietet sich die Verzögerung an. Schauen wir uns also unser perfektes Beispiel mit einem einfachen Schwebezustand an. Also hier haben wir den Button , den wir zuvor erstellt haben. Und um diese Schaltfläche weiter zu erkunden, doppelklicken wir darauf und lassen Sie uns hier hineinspringen. Und wählen wir unseren Button. Und hier haben wir den Staatsdarm. Hier haben wir also alle vorgefertigten Zustände , die MC plus rP möchte, dass wir sie einbeziehen. Das ist natürlich alles. Wenn wir wollen. Wenn nicht, können Sie auf Bundesstaat hinzufügen klicken , wie wir bereits zuvor untersucht haben, und dann können Sie einen eigenen benutzerdefinierten Status hinzufügen. Hier haben wir also alle Zustände, die normalerweise im UI-UX-Design verwendet werden. Wir haben also den Normalzustand, der nur dieser Grundzustand ohne jegliche Animation ist nur dieser Grundzustand ohne , den wir ausgewählt haben. In der Regel möchten Sie, dass Ihre Benutzer sich auf ausgewählte Bundesstaaten konzentrieren, damit sie verstehen , dass sie ein Element ausgewählt haben. Wir haben den Status deaktiviert, was bedeutet, dass sie ihn zu diesem Zeitpunkt im Grunde nicht auswählen können, normalerweise, weil sie bestimmte Operationen ausführen müssen , um ihn auswählen zu können. Hier kommen Behinderte also zum Einsatz. Wir haben den Massenhorror. Was passiert also, wenn ich mit der Maus darüber fahre? Es wird sich nicht ändern. Und das ist besonders nützlich, weil wir möchten , dass unsere Benutzer verstehen , dass sie etwas tun können. Und der Mauszeiger ist die perfekte Option für sie, um ihre Aufmerksamkeit auf sich zu ziehen, um eine bestimmte Aufgabe tatsächlich erledigen zu können. Schließlich sind wir deprimiert. Was passiert also, wenn sie auf die Schaltfläche klicken, wenn sie sie drücken? Was wird sich ändern? Gehen wir zum Mauszeiger. Wenn ich also genau hier klicke, wird dieser Mauszeiger speziell bearbeitet. Also lasst uns die Farbe ändern, also lasst uns zum Beispiel zu den Eigenschaften wechseln. Wählen wir nun die Füllfarbe aus und wählen wir eine etwas dunklere Farbe. Also z.B. so etwas. Weil ich diese Farbe mag, werde ich sie hinzufügen. Wir befinden uns im Maus-Hover-Zustand. Also werde ich es hier einfach zu meinen Farben hinzufügen. Und ich doppelklicke und nenne es z. B. hover, so etwas wie Schulden. Und dann können Sie zu Interaktionen übergehen, wenn Sie möchten. Und wenn ich auf Normal umstelle, können Sie sehen, dass wir diese Farbe haben. Als ich auf Mauszeiger umgestellt habe , haben wir diese Spalte. Sie können also ganz einfach zwischen diesen wechseln. Und Sie können auf Anwenden klicken , um diese Schaltfläche anzuwenden. Und um eine kurze Vorschau zu machen, kann ich hier klicken. Und wenn ich mit dem Mauszeiger schwebe, kann man die Änderungen sehen, die Farbe. Zu der Hover-Farbe, die wir gerade erstellt haben. Okay, lassen Sie uns versuchen, dies mit einer separaten Zeichenfläche zu verbinden , z. B. fügen wir also einen Sub-R-Teil hinzu. Und lass es uns gleich hier erstellen. Also, Ups, das nicht. Klicken wir auf den Pfeil und zoomen wir ein wenig. Und lassen Sie uns eine andere Sub-Artboard hinzufügen. Gehen wir zu Eigenschaften. Ellens geht auf 1920 bis 1080. Es wurde also so ausgewählt, dass es dasselbe ist. Oder lass uns sehen, dieser ist 1080, so etwas. Also haben wir den Sub-R-Port genau hier. Und wenn ich hier klicke, wird ein Link zu dieser Zeichenfläche angezeigt. Also wird es unseren Hafen zeigen. Sie können die Mitte positionieren, Sie können keine animieren. Und sagen wir, sagen wir, SlideUp werden noch besser. Sie können die Maske zeigen und das Lockern der Maske wird das Ein- und Ausziehen erleichtern. die Animation zu vereinfachen, klicken Sie auf die Animation Okay, jetzt in diesem Sub-R-Board, aber ich werde zu den Eigenschaften wechseln. Drücken Sie T für das Textwerkzeug und geben Sie etwas wie Hier ist Ihr Popup-Fenster ein, z. B. und lassen Sie uns das natürlich in ist Ihr Popup-Fenster ein, z. B. etwas Dunkleres ändern , wie vielleicht eine dunkelgraue Farbe. Lass uns das auf 16-45 umstellen, etwas wirklich Großes. Und positionieren wir es in der Mitte unserer Seite, ungefähr so. Wenn ich also wieder hierher gehe und eine Vorschau unseres Prototyps ansehe, also entklicke ich, wird er angezeigt, aber wie Sie sehen können, wenn ich darauf klicke, passiert nichts wirklich. Also, was in diesem Fall zu tun ist, ich möchte klicken, um es im Grunde zu schließen. Was du also tun kannst, ist gleich hierher zurückzukehren. Sie können doppelklicken, und hier sehen Sie Ihre Bearbeitungsoptionen. Unter Befehlen können Sie diese drei Punkte sehen. auf Bearbeiten, okay, und hier sehen Sie Maske anzeigen und klicken Sie auf Maske, um sie zu schließen. Klicken Sie auf Okay, gehen Sie nach draußen , klicken Sie auf Aktualisieren und lassen Sie uns das ausprobieren und sehen, ob das funktioniert und funktioniert. Sobald es geladen ist, klicken Sie dort und die Maske wird angezeigt. Wenn ich auf die Maske klicke, wird sie ausgeblendet. also noch einmal hier klicken, wird es ausgeblendet. Nochmals, das ist großartig, nicht nur für die Popups, sondern, sagen wir, für die Abonnement-Module sind für die E-Mail-Module oder den Sonntag so. Wenn Sie nur kurze Informationen anzeigen möchten, müssen diese nicht im Vollbildmodus angezeigt werden. Denken Sie daran, dass ich es so gestaltet habe, dass die gleiche Größe wie diese Zeichenfläche hat. Es kann in der Mitte sein. Das sind Interaktionen. Sie können sehen, dass Sie Interaktionen, zwei separate Komponenten oder den gesamten Flughafen hinzufügen können . Oder eine Sache, die ich nicht erwähnt habe, ist, dass Sie diese beiden separaten Seiten sogar verlinken können , wenn Sie möchten. Sie können also einfach diesen kleinen roten Griff auf die separate Seite ziehen , die Sie möchten, und Sie können ihn mit einer beliebigen Stelle verknüpfen , etwa so. Wenn Benutzer also darauf klicken, werden sie zum Design weitergeleitet. Sie können einen Seitensprung sehen. Sie können also zu dieser Seite springen und sie animieren. Du kannst sehen, wohin du willst und damit machen. So wie wir es zuvor mit diesen Optionen untersucht haben. Das sind also Interaktionen und dafür sind sie nützlich. Im nächsten Video werde ich Notizen zeigen. Also werde ich dich dort sehen. 12. Hinweise: Notizen eignen sich hervorragend, wenn Sie Knoten entweder für Ihre Teamkollegen oder für Ihre Kunden hinzufügen möchten , nur um sie darüber zu informieren, welche Seite sie sich gerade ansehen und was darin enthalten ist. Okay, also hier sind wir wieder in unserer Datei und die Knoten befinden sich genau hier. Und Sie werden feststellen, dass meine Wireframes ausgewählt sind, also Seitennotizen stehen und ich kann etwas hinzufügen, z. B. das sind nur Wireframes. Und wenn ich Strg S drücke, um es zu speichern, und auf Vorschau klicke, wird mir die Seitennotiz genau hier angezeigt. Nun, wenn Sie mehrere Knoten haben und lassen Sie mich Ihnen zeigen, wie das funktioniert. Also zB wenn ich das auswähle und nur ein paar Leerzeichen darunter mache, einfüge, einfüge und bezahlt z.B. drücke Strg S drücke noch einmal Vorschau. Es wird mir diese mehrseitigen Notizen zeigen. Jetzt können Sie hier alle Knoten löschen. Sie können einfach auf Ihrem Schlüssel auf Löschen klicken oder ihn einfach so auswählen. Drücken Sie die Rücktaste und löschen Sie alle unnötigen Knoten, die Sie möchten. Nun, das sind die Seitennotizen. Sie können auch Notizen zu verschiedenen Elementen Ihrer Seiten hinzufügen . Also wenn ich z. B. diesen Button auswähle, diesen Button, können Sie sehen, dass wir hier die Komponente haben und hier haben wir die Gruppe , weil das der Gruppenname ist. Also wenn ich diese Komponente auswähle, sagen wir zum Beispiel gefällt dir dieses Symbol vielleicht. Und dann kann ich die Texte auswählen. Nehmen wir an, es sagt etwas wie, findest du, dass diese Größe zu klein ist oder so? Sie können also sehen, wie nützlich das wirklich ist. Wenn ich also Strg S drücke und es noch einmal in der Vorschau ansehe, können Sie sehen, dass wir jetzt mehrere Elemente haben, also die Seitennotizen. Das ist also der Knoten für die gesamte Seite. Dann haben wir den Hauptknopf. Und wenn ich den Mauszeiger halte, siehst du die Zahl Eins und hier ist die Nummer eins, die sich genau hier befinden. Und dann haben wir hier einen für den Typ. Und neben diesem Typ wird Nummer zwei angezeigt , sodass Ihre Kunden Teamkollegen sind. Wissen Sie, worum es in dieser Notiz geht? Also hier haben wir die Seitennotizen zur gesamten Seite. Hier haben wir den Hauptbutton zu diesem Button. Und schließlich bei dem Typ über diesen Typ oder der sich im Wireframe befindet. Wenn ich also zum Design-Briefing übergehe, können Sie z. B. sehen, dass es leer ist und wir die Notizen nicht haben, weil die Knoten mit Ihren Seiten verknüpft sind. Im nächsten Video werden wir über unsere Häfen und Flughäfen sprechen . Was ist der Unterschied und was kann man mit ihnen machen. Also werde ich dich dort sehen. 13. Artboards und Sub: haben wir bereits so viel über Zeichentafeln und unterdurchschnittliche Anschlüsse behandelt In diesem Kurs haben wir bereits so viel über Zeichentafeln und unterdurchschnittliche Anschlüsse behandelt. Aber ich wollte Ihnen jetzt nur ein anderes Beispiel mit der mobilen App zeigen , da dieser Kurs hauptsächlich auf Websites und solche Größen ausgerichtet ist . Deshalb möchte ich dir auch diesen zeigen und was du in diesem Fall tun kannst. Also hier sind wir wieder bei einem Maulwurf Plus und ich habe Joe, Joe Go UI Kit geöffnet , das ist dieses UI-Kit. Und um Vorlagen zu öffnen, können Sie einfach auf Bearbeiten klicken, speichern und dann auswählen, in welchem Team oder in welchem persönlichen Bereich Sie sie speichern möchten. Und es wird sich so öffnen, sodass Sie hier zwischen all diesen verschiedenen Seiten wechseln können . Ich bin gerade auf der Anmeldeseite und habe diese Sub-Art-Board schnell erstellt indem ich hier erneut auf diese Schaltfläche geklickt habe. Nun, ich habe dieses Beispiel bereits gezeigt, also werde ich nicht zu sehr ins Detail gehen, aber wenn Sie hier klicken und es verbinden, können Sie klicken, unseren Port anzeigen. Sie können es dort positionieren, wo Sie es lösen möchten, sagen wir in diesem Fall unten, nach oben oder einblenden oder vergrößern oder was auch immer Sie möchten. Sie können auf „Muss schließen“ klicken. So wie ich es in einem der vorherigen Videos erklärt habe. Und ich habe in diesem Fall nur eine etwas längere Lockerung vorgenommen. Also so sieht es aus, wenn du auf die Schaltfläche klickst, es wird sie zeigen, wenn du draußen klickst, es wird sie nicht zeigen. Das ist aus offensichtlichen Gründen großartig für das Prototyping , da Sie Ihren Kunden zeigen können , was Sie mit diesen Fehlermeldungen zeigen möchten, z. B. und solche Dinge oder mit Ihren Teamkollegen, um es ein bisschen genauer zu untersuchen. Aber hier ist anders, wir haben jetzt das Gerätemodell und in diesem Fall den Geräterahmen. Sie können dies also ganz einfach Ihren Kunden zeigen. Und es ist iPhone , weil diese Größe der Zeichenfläche der iPhone-Größe entspricht. Wenn Sie eine andere Größe wählen, wird uns diese andere Größe für dieses bestimmte Projekt angezeigt . Aber jede einzelne Seite ist verschuldet, iPhone-Größe, was auch immer ich versucht habe, in der Vorschau anzuzeigen, es wird mir in dieser Größe angezeigt. Eine andere Sache, die ich Ihnen zeigen wollte, ist , dass Sie bei der Auswahl Ihrer Zeichenfläche erneut das intelligente Layout, die Hintergrundfarbe und ähnliches festlegen können , aber Sie können es auch umdrehen. Also, wenn ich es etwas weiter oben positioniere etwas weiter oben und dann diese Zeichenfläche auswähle und ihre Position umkehre. Sie können sehen, dass Sie es ganz einfach vom Hoch- in das Querformat ändern können . einfach auf diese Schaltfläche klicken , werden die gleichen Abmessungen beibehalten, sie werden nur für die Breite und die Höhe umgedreht. Das ist also im Grunde alles, was ich Ihnen über unsere Boards und Unterflughäfen zeigen wollte . Und das ist das einzige, was ich dachte, das wir noch nicht angesprochen haben. Ich habe Ihnen bereits gezeigt, wie Sie diese kostenlosen Vorlagen verwenden. Nochmals, wenn Sie auf die Vorlagen zugreifen möchten, können Sie einfach hier klicken und auf Vorlagen klicken. Und Sie gelangen zu dieser Seite mit den Vorlagen, auf der Sie jede dieser Vorlagen bearbeiten und nach Belieben anpassen können. Sie können sehen, wie viele Seiten und Elemente sie haben, wie viele Farben, und Sie können diese nach Belieben ändern und aktualisieren. Im nächsten Video zeige ich Ihnen einige Typoptionen und wie Sie mit Text in Mock plus rP arbeiten. Also werde ich dich dort sehen. 14. Mit Typographie arbeiten: Typografie ist ein entscheidendes Element jedes UI-Designs. also sehr wichtig zu wissen, wie man mit Typ arbeitet, ist also sehr wichtig zu wissen, wie man mit Typ arbeitet, insbesondere mit Mock plus RP. In diesem Video werden wir uns also mit einigen grundlegenden Typeneinstellungen und grundlegenden Elementen befassen . Wie Sie mit Schrift arbeiten können und wie Sie in unserem P.Ball damit arbeiten können. Lass uns anfangen. Also hier sind wir wieder in unseren bewährten alten Wireframes. Und wenn ich diesen Typ auswähle oder ich ihn löschen kann, drücke T auf meiner Tastatur und es wird diesen Typ etwas Platzhalter platzieren. Weil ich das schon erstellt habe, kann ich das auf meinen Typ anwenden und Sie können sehen, dass es die Farbe ändert. Und ich kann diese Füllfarbe auf etwas wie Dunkelschwarz oder so ändern. Ich kann jederzeit zurückgehen und hier klicken. Und jetzt gibt es mir diese verschiedenen Optionen, sodass ich mit einem Klick auf eine Schaltfläche zwischen hell und dunkel wechseln kann einem Klick auf eine Schaltfläche zwischen hell und dunkel und es wird dasselbe Setup beibehalten, dieselbe Positionierung wie diese. Sie können also auch zu Komponenten gehen und die Option Typ per Drag & Drop direkt dort ablegen, wenn Sie dies wünschen, oder einfach D drücken, was bereits erklärt wurde, und dann können Sie mit dem Tippen herumspielen. Also, was sind Ihre tatsächlichen Optionen? Also hier haben wir die Schriftfamilie. Das sind also Schriftfamilien, die derzeit enthalten sind, aber ich spreche mit dem Team in den zukünftigen Updates Sie werden hoffentlich Google Fonts und Adobe Fonts hinzufügen . Sie werden also eine viel größere Auswahl an Schriftarten haben . Und die Option zum benutzerdefinierten Hochladen Ihrer benutzerdefinierten Schriftarten wird in Zukunft ebenfalls nicht verfügbar sein, aber das sind vorerst Ihre Optionen. Wenn Sie also Ihre Schriftfamilie auswählen, können Sie aus diesen vordefinierten Größen verschiedene Größen auswählen . Oder Sie können es ändern, indem Sie einfach eingeben, was Sie wollen, in der gewünschten Größe. Dann haben wir die Farbe und die Funktionsweise von Farbe bereits in more parser p behandelt . Hier haben wir die fett gedruckte Option hier haben wir die Option Kursiv. Hier haben wir die zugrunde liegende Option. Wenn Sie den Basiswert hinzufügen möchten, haben wir den Durchstrich und hier haben wir den Zeichenabstand. Es ist also nur der Abstand zwischen den Zeichen. Also, wenn Rights Act 20 ist, können Sie sehen, was das bewirkt. Hier. Was wir haben, ist, wenn ich das auf, sagen wir, 80 erhöhe , passiert wirklich nichts , weil das der Raum zwischen zwei Linien ist. Also, wenn ich etwas tippe , das in eine neue Zeile setze und es wieder auf 56 bringe, kannst du sehen, wie das funktioniert. Und wenn wir es wieder auf 36 bringen, können Sie sehen, wie zerquetscht unser Typ tatsächlich ist. Darunter haben wir Ausrichtungsoptionen. Wir haben also linksbündig, zentriert , ausrichten, rechtsbündig , was bedeutet, dass beide Seiten dieselben Werte und dieselbe Breite haben werden . In diesem Fall wird dieser Spitzenwert anders sein. Guatemala wird anders sein, aber wenn Sie sie rechtfertigen, werden sie genau dieselben sein. Hier. Großbuchstaben. Also wird alles in Groß-, Klein- oder Titelbuchstaben geschrieben. Also wird jedes einzelne Wort genau so sein. Und wenn Sie nicht möchten, können Sie einfach darauf klicken und die Auswahl wird aufgehoben. Hier haben wir einen Texteinzug, der sich hervorragend für Absätze eignet. Offensichtlich. Hier haben wir einen vertikalen Texteinzug. Hier haben wir eine nummerierte Liste und hier haben wir eine Aufzählung. Klicken Sie erneut, um es abzuwählen. Was wir hier haben, ist die automatische Breite, also die Breite Ihres einbezogenen Textes. Hier haben wir die automatische Höhe, im Grunde das Gleiche, und hier haben wir eine feste Größe. Wenn Sie das also überprüfen, wird es diese feste Größe nicht überschreiten. Lassen Sie mich also mit der automatischen Breite fortfahren. Was auch immer ich tippe, ich kann es anpassen und etwas Neues auf der Seite eingeben . Sie können das sehen, weil es sich um eine Breite handelt, die automatisch skaliert wird. Aber wenn es ein festes Gewicht ist, z. B. etwas Neues auf der Seite, von dem Sie sehen können, dass es auf der neuen Zeile an der richtigen Stelle platziert wird, so etwas in der Art. Also werde ich die automatische Breite wählen und diesen Text von nun an so loswerden . Und ich möchte Ihnen einige zusätzliche Optionen zeigen , damit Sie die Füllung und die Wasserfarben haben können. Sie können Ihrem Text einen Rahmen hinzufügen. Sie können eine separate Füllfarbe hinzufügen, wenn Sie dies wünschen. Und Sie können diese Eckkanten einfach krümmen, wenn Sie möchten, aber ich werde Ihnen das nicht empfehlen. Für die Erweiterungen haben wir wie immer eine feste Position mit Crawling, wir haben die Tooltips, wenn du den Mauszeiger bewegst, kannst du sehen, was es ist. Und schließlich haben wir externe Links. Also wenn ich das hinzufüge, sagen wir google.com, z. B. Hit. Okay, und Sie können sehen , dass ein Link hinzugefügt wurde. Wenn ich also sehr schnell auf Vorschau klicke und dann zurückgehe und sehe, wie ich etwas eintippe, wenn ich den Mauszeiger darüber bewege, kannst du sehen, dass wir jetzt den Link haben, wenn du darauf klickst , er bringt mich zu google.com. Das ist also im Grunde der Typ auf den Punkt gebracht. Was ich dir endlich zeigen möchte, ist, lass uns diesen externen Link loswerden. Wenn ich Strg D drücke, um es ein paar Mal zu duplizieren, kannst du sehen, dass die Abstandsoption erscheint, sie ist im Moment 19, aber nehmen wir an, ich möchte etwas wie Turbine T Vielleicht haben wir es. Da sind wir. Und wenn ich jetzt genau hier schwebe, können Sie sehen, dass wir jetzt um 20 sind. Außerdem möchte ich Ihnen zeigen, dass diese Optionen für Formen genauso funktionieren würden wie für den Text. Wenn Sie sie also auseinandernehmen möchten, können Sie dies tun. Sie können sie so positionieren , wie Sie möchten. Sie können sie verteilen, sie mit ihnen verteilen , was immer Sie wollen. Also ich zeige dir, wie das funktioniert, wenn ich alle drei schnappen und auswählen kann, etwa hier klicken. Also im Grunde das Gleiche wie bei den Formen. Sie können die Umschalttaste gedrückt halten und es wird Ihnen der gleiche Abstand zwischen Ihren Elementen angezeigt . Das ist also der Typ. Grundsätzlich werden wir uns im nächsten Video mit dem Premium-Modus befassen. Und ich werde Ihnen ein bisschen mehr Informationen darüber geben als zuvor. Also werde ich dich dort sehen. 15. Vorschaumodus: Im Vorschaumodus siehst du deine Prototypen und siehst, wie andere aus deinem Team oder Personen, die du zur Ansicht einlädst, sie sehen können. Es ist also ein wirklich wichtiger Teil von more plus r p. Lassen mich Ihnen zeigen, wie es funktioniert etwas detaillierter als ich es bisher getan habe. Wenn wir also zu diesem Punkt zurückkehren, hier ist er, unser Vorschaumodus. Sie können also erneut klicken und von der Startseite aus starten oder von der aktuellen Seite aus beginnen. Homepage besteht in unserem Fall aus Flussdiagrammen , da dies die erste Seite in der Liste ist. Oder Sie können von der aktuellen Seite aus beginnen. Sie können das auswählen, indem Sie Control Command P drücken. Wie Sie sehen können, wird es beim Start geladen, weil es alle möglichen Optionen hat. Und es begann auf dieser Seite. Wir haben die Seitennotizen bereits erklärt. Und hier kannst du den Zoom so an die Breite anpassen lassen, an den Bildschirm anpassen, so ähnlich. Und hier kannst du den Vollbildmodus haben, du kannst ihn verlassen, wie ich bereits erklärt habe. Und Sie können diese Panels ausblenden, wenn Sie möchten, wählen Sie. Wenn Sie auf Teilen klicken, wird die Systemsteuerung angezeigt. Sie haben all diese Optionen. Wenn Sie diesen Vorschau-Link also tatsächlich mit einer anderen Person aus Ihrem Team teilen , können Sie tatsächlich auswählen, was sie sehen soll. Und das ist aus einem einfachen Grund wirklich wichtig . Wenn du das mit einigen Testern teilst, möchtest du, sie deinen Prototyp testen können, aber nicht zu viele Optionen verschenken. Und Verrückte, halten sie im Grunde ihre Hand, während sie das tun, weil du willst, dass sie selbst herausfinden , wo sie klicken müssen , wo sie zeigen müssen. Wenn Sie diese Interaktionen zeitlich festlegen, möchten Sie, dass sie keine Hilfe erhalten, sondern sich selbst zurechtfinden . Auf diese Weise können Sie messen , was sie tun. Und dafür sind diese Einstellungen ein wirklich wichtiger Bestandteil, da Sie Bedienfelder ein- oder ausblenden können. Wenn ich also genau dort klicke und z. B. auf Kopieren klicke und einen neuen Tab öffne, drücke Strg V und füge ihn ein. Das ist unser neuer Tab, und du kannst sehen, dass sie nichts sehen. Sie müssen es also selbst regeln weil wir es absichtlich von hier aus geschlossen haben. Also wird sie das Panel kontrollieren. Sie können den Linkbereich anzeigen, wenn Sie mit der Maus darüber fahren, oder Sie finden es nicht selbst heraus. Wir zeigen Carrier-Show-Inhalte außerhalb des Artboards, sollen keine Markierungen, kein Passwort setzen und solche Dinge. Es ist also wirklich wichtig, dass du auch diese Option auslotest, wenn du etwas tiefer in das Teilen eintauchen möchtest. Wenn wir also hierher zurückkehren, haben wir mehr Möglichkeiten. Also immer den Mobilfunkanbieter anzeigen, im Grunde das, was wir hier zum Teilen gesehen haben. Aber das ist es, was Sie und Ihre Teamkollegen und die Projektleiter, z. B. das, was sie genau hier sehen werden . Das ist also im Grunde alles für das Teilen. Im nächsten Video werde ich in dieser Download-Prototyp-Option erklären , was es ist und wofür es nützlich ist. Also werde ich dich dort sehen. 16. Prototypen herunterladen: Manchmal möchtest du deine Prototypen von Mach plus rP herunterladen , sie mit Teamkollegen und Kunden teilen und willst sie noch nicht hochladen und veröffentlichen. Vielleicht stehst du unter NDA. Vielleicht hast du keinen Internetzugang. Vielleicht reist du irgendwohin und möchtest genau diese Prototypen haben. Denken Sie an sie, um einige Notizen, die Sie haben, zu überprüfen. All diese verschiedenen Szenarien und Todesfälle, bei denen sich die Download-Option als nützlich erweist. Lass es mich dir zeigen. Also hier ist es, ganz oben, Sie haben diese Download-Option. Sie können also das Offline-Prototyp-Präsentationspaket herunterladen . Und das sind die wichtigsten Sätze hier, Präsentationspaket, das wird für Präsentationen verwendet. Also, wenn Sie das offline präsentieren möchten, wenn Sie unterwegs sind, vielleicht sind Sie auf Ihrem Laptop, vielleicht sind Sie auf Reisen, vielleicht gehen Sie zum Geschäft oder zu Ihren Kunden. Es gibt verschiedene Optionen und Szenarien, in denen Sie so etwas verwenden können. Es ist sehr wichtig, dies zu tun , da Sie immer ein Backup haben möchten. Es ist toll, es in der Cloud zu haben, aber manchmal haben die Leute möglicherweise keinen Zugang zum Internet. Vielleicht bist du einfach da. Warum sollten Sie sie also in die Cloud bringen, wenn Sie die Option an Ihrem Standort verfügbar haben , z. B. möchten Sie sie vielleicht aufgrund der NDAs intern teilen , wie gesagt. Es gibt also wirklich wenige Szenarien, in denen Sie so etwas verwenden können , und es ist wirklich nützlich. Alles was Sie tun müssen, ist hier zu klicken. Es wird dir einen Seitenbereich zeigen. Ich wähle die Farbpalette aus und wähle meinen Wunschladen aus, sodass du das Häkchen entfernen kannst, was du tun möchtest. Ich möchte beide erkunden und ausnutzen, damit wir einfach alle auswählen können. Sie können sehen, dass zwei von ihnen ausgewählt sind. Und Sie können den Seitenbereich alle sehen, weil ich zwei Seiten in meinem Ordner habe. Sie können das Seitenfenster anzeigen, Sie können die Nordseite anzeigen und die Werkzeugleiste anzeigen. Sie können Links zu all diesen Einstellungen anzeigen , über die wir gesprochen haben, und darauf klicken. Okay, sobald Sie zum Herunterladen bereit sind, wird das Herunterladen eine Weile dauern. Und abhängig von Ihrer Maschine, abhängig von Ihrem Projekt. Wenn Sie also z.B. Ihre Bilder optimiert haben, wird es etwas länger dauern. Wenn Sie verschiedene Seiten verwendet haben, wird es etwas länger dauern. Aber in diesem Fall wurde es, wie Sie sehen können, sehr schnell exportiert. Also lass mich es einfach in einen Ordner legen. Lassen Sie mich nun den Ordner zeigen, wie er aussieht. Da haben wir es also. Wir haben diese Option für eine Zip-Datei, klicken Sie mit der rechten Maustaste. Und ich werde hier zwei herausnehmen und das verstecken , nur damit du es ein bisschen besser sehen kannst. Da haben wir es. Und es hat diese Assets solide extrahiert und diese Zip-Datei entfernt. Eigentlich. Werde es los, indem du auf Löschen klickst. Da haben wir es. Und hier haben wir all diese Assets, die standardmäßig für mehrere SRP enthalten sind . Dann haben wir die Datenoptionen, das sind alle Bilder , die darin enthalten sind. Und natürlich ist es wirklich wichtig, dass Sie Ihre Ebenen benennen. Andernfalls werden Sie am Ende zu solchen Ergebnissen kommen. Aber im Grunde exportiert es sie einfach wie Platzhalterdateien, wenn Sie dies tatsächlich mit Ihren Entwicklern teilen. Die Ebenennamen, die Sie gepostet haben, werden beibehalten. Schließlich haben wir die Indexseite, doppelklicken Sie darauf und sie wird als neue Seite geöffnet und Sie können sehen, was Ihre Benutzer in einem , sagen wir, Präsentationspaket sehen werden , das Sie ihnen zeigen möchten. Sie haben also all diese Optionen , über die wir bereits gesprochen haben. Wenn Sie möchten, können Sie hier einige Knoten hinzufügen. Sie können diese Panels ausblenden. Sie können diese Panels anzeigen. Du kannst tun, was du willst und lass uns sie einfach ein letztes Mal erkunden. Da hast du es. Es hat uns auf diese Seite geführt. Hover-Effekte funktionieren immer noch. Das funktioniert immer noch. Also alles ist so, wie es hier war, aber es ist nur eine tragbare und, sagen wir, Version, bei der Sie es überall hin mitnehmen können , weil Sie es auf Ihrem Computer gespeichert haben. Und deshalb ist das Herunterladen Prototypen eine so coole Option. Ich werde es mögen und ich empfehle euch, es die ganze Zeit zu benutzen. Scheint so, als ob es mir auch geht. 17. Prototypen erstellen: Sobald Sie bereit sind, Ihre Prototypen zu veröffentlichen und sie außerhalb Ihrer Hände in die gesamte Organisation zu übertragen, z. B. oder sie einfach mit Ihren Kunden, Teamkollegen, Interessenvertretern, Investoren, wem auch immer, zu teilen . An dieser Stelle kommt die Option zum Veröffentlichen von Prototypen ins Spiel. Und es befindet sich genau hier in der oberen rechten Ecke. Aber vielleicht können wir mit einigen Einstellungen herumspielen. Vielleicht kann ich das anpassen und setze mich bitte hin, um zur Flussdiagramm-Seite zu springen und animieren zu lassen. Lass uns ohne Lockerung weitermachen. Das ist in Ordnung. Ich möchte also einfach zu dieser Seite animieren können und Sie können sehen , wenn ich sie auswähle, wird angezeigt, dass sie in Richtung der Flussdiagramme animiert wird. Wenn ich nun meine Wireframes auswähle, lasse ich mich die Strg-Taste oder den Befehl S drücken, um sie zu speichern, dann auf Veröffentlichen klicken, auf Mock plus Cloud veröffentlichen. So können Sie Anthropologe plus Cloud für sofortige Online-Zusammenarbeit, Übergabe und Layer-Datenprüfung nutzen. Sie können z. B. ein Cloud-Projekt, ein Beispielprojekt oder ein neues erstellen. Unser erster Projektstandort. Alles auf Okay, drück Okay, und das Projekt wird veröffentlicht. Jetzt nochmal, dieselbe Flüssigkeit, all das andere Zeug. Je nachdem, wie groß Ihr Projekt ist, wie viele Bilder Sie haben, wie viele Icons Sie haben, wird es länger oder kürzer dauern. Abhängig von Ihrem Projekt wird dieses Projekt also so lange dauern, insbesondere wie schnell Ihr Internet ist. Sie können Ihr Projekt also ansehen, weil es erfolgreich veröffentlicht wurde, wie Sie sehen können. Und es bringt dich zu Mock Plus Cloud. Nun, hier sind sie, unsere neuen Projektseiten. Sie können sich Details ansehen und im Grunde können Sie das lösen, was wir bereits erstellt haben . Hier sind all diese Elemente, Wireframes, solche Dinge. Sie können den Code also direkt hier für die Entwicklung abrufen. Das kannst du also ändern. Und es zeigt die Zitate oder was auch immer sie auswählen, z. B. dieses Bild zeigt mir CSS, Objective-C, Swift und Android. Und das ist großartig, weil Sie für verschiedene Plattformen wechseln können . Sie könnten den Vollbildmodus verkleinern und in der Vorschau anzeigen . Jetzt können Sie dies als separate Option herunterladen. Sie können in den Präsentationsmodus wechseln, wenn Sie dies Ihren Kunden während dieses Entwicklungsprozesses präsentieren möchten . Was auch immer Sie hier auswählen , es wird erzählt und gezeigt. Also z.B. hier haben wir diese Option, die wir bereits gewählt haben. Wenn ich hier klicke, komme ich zu Flussdiagrammen, z. B. damit wir diesen Kommentarmodus präsentieren können. Das ist also großartig, denn sagen wir , ich möchte hier einen Kommentar hinzufügen, vielleicht ändere diese Farbe auf Blau. Sagen wir mal. Sie können versuchen, Kommentare zu kennzeichnen. Sie können die Strg-Eingabetaste drücken , um diesen Kommentar zu teilen. Sie können diese Farbe also in Blau ändern. Okay? Wenn ich also den Mauszeiger halte und klicke, ob ich es verkauft habe, kann ich es lösen. Und es wird verschwinden. Aber wenn ich es nicht gelöst habe, kann ich jederzeit zurückkehren. So schlechte Farbe, du kannst sie ändern. Und lass uns das wirklich schnell machen. Also ändere das auf Blau, sagen wir, habe es geteilt. Da haben wir es. Und jetzt können Sie sehen, dass wir das gemeinsam haben. Wer also direkt hierher kommt, kann den Mauszeiger bewegen, klicken und sehen, das auf Blau ändern. Okay, es wird erledigt sein. Da haben wir es. Drücken Sie die Eingabetaste, um zu servieren. Und ich werde in meinem Projekt darüber informiert , dass jemand einen Kommentar abgegeben hat. Ich kann diesen Kommentar sehen. Dann kann ich sehen, was zu tun ist. Und wenn ich es getan habe, kann ich ihnen antworten. Aber die Überprüfung, sie können sie überprüfen, sie können vorsätzlich kommen. Und es gibt alle möglichen Optionen, die sie damit machen können. Wenn Sie beispielsweise den Mauszeiger hier bewegen und auf Auswählen klicken, können Sie sehen, dass Sie das Auswahlwerkzeug haben , mit dem Sie diese Elemente verschieben können. Und im Grunde genommen, um bestimmte Elemente auszuwählen. Sie können den Text auswählen und tot kommentieren. Sie können Markup koordinieren. Sie können ein Markup für Abstände erstellen, und Sie können ein Bereichs-Markup erstellen, wenn Sie einen Bereich Ihres Entwurfs markieren möchten und extrem genau festlegen möchten , welche Änderungen Sie hervorheben möchten oder welche Änderungen Sie hervorheben möchten, die Sie zuvor vorgenommen haben. Sie haben es noch nicht überprüft. Das können sie dir auch antun. Also im Grunde können sie direkt hier reinspringen und sagen wenn ich zum Auswählen gehe und den Typ mache, sagen wir, dann können sie diesen Typ kommentieren und etwas sagen wie z.B. diese Topographie ist zu groß oder sie ist zu dunkel, du kannst sie auf heller ändern, aber sie können extrem spezifisch sein , was diesen Abschnitt deines Designs und über die Elemente in deinem Design, die Sie wollen, dass du dich änderst. Wenn Sie zu dieser Seite zurückkehren, können Sie dieses Projekt bearbeiten oder sich die Details ansehen. Und wenn Sie alle Flughäfen auf einem Bildschirm anzeigen möchten, können Sie das Storyboard aufrufen. Es zeigt Ihnen alle Ihre Flughäfen auf einem Bildschirm. Sie können auf die Seiten klicken und doppelklicken , um Kommentare hinzuzufügen und die technischen Daten zu überprüfen. Das habe ich dir also bereits gezeigt, oder du kannst zurück zur Prototypenliste gehen. Im Grunde genommen ist es so einfach, Ihren Prototyp zu veröffentlichen. Und noch eine letzte Sache: Sie können es auch teilen, privat teilen, öffentlich teilen oder Projekt einbetten, wenn Sie den Code kopieren und in die separate Website einbetten möchten , z. B. ist der Herausgeber großartig, wenn er nicht unter NDA steht oder wenn Sie zusätzliches externes Feedback oder privates Teilen erhalten möchten , wenn Sie ihn privat innerhalb Ihres Teams teilen möchten. Bitte auch um Verzeihung, um Projektmitglied zu werden, wenn Sie es zu Ihrem Projekt hinzufügen möchten oder wenn nicht, Sie können diesen Link einfach kopieren und mit ihnen teilen. Mein Vater. Und wenn ich auf meinem Computer einen neuen Tab öffne , drücke Control Enter. Aber weil ich schon angemeldet bin, wird mir nur eine verwässerte Version angezeigt, so wie sie ist. Aber im Grunde ist das etwas, das sie sehen werden. Sie haben das Design, sie haben die Aufgabe, die Ressource, die Styleguide-Aktivität, alle möglichen Dinge hier. Aber so teilst du deinen Prototyp und veröffentlichst ihn im Grunde . Und es ist wirklich wichtig, dass Sie das tun weil Sie zu jedem einzelnen Projekt, das Sie durchführen, zusätzliches Feedback zu Ihrem Design erhalten möchten Ihrem Design und RP in Kombination mit Mock Plus Cloud Ihnen diese großartige Möglichkeit dazu bietet , dies zu tun. 18. Was sind Vorlagen: Vorlagen sind eine großartige Möglichkeit, Ihren Erstellungsprozess da UX-Design nichts anderes ist als eine sich ständig wiederholende Aufgabe. Wenn du darüber nachdenkst, erschaffst du diese Schaltflächen und diese Elemente von Neuem. Warum also nicht eine Vorlage verwenden , die jemand anderes erstellt hat, oder Sie können eine eigene Vorlage erstellen und einfach einige dieser Elemente wiederverwenden , wenn Sie wirklich separate und empfindliche Elemente erstellen möchten . In den meisten Fällen wird das Designsystem genannt. Und dann können Sie sich systematisch dafür entscheiden, diese Designelemente in Ihren Designs zu verwenden . Wie Schaltflächen, wie Timepicker, wie Eingaben und solche Sachen. In diesem Teil des Kurses werden wir jedoch über Vorlagen sprechen. Dabei handelt es sich um ein vollständiges Layout, ein fertiges Layout, das jemand anderes erstellt hat. Und Sie können einige dieser Elemente dieser Vorlagen einfach per Drag & Drop ziehen, um Ihre eigenen benutzerdefinierten Layouts zu erstellen. Von dort aus können Sie Ihre eigenen Farben, Ihre eigene Typografie, Ihre eigenen Bilder und Ihre eigene Kopie hinzufügen Ihre eigene Typografie, Ihre eigenen Bilder und sie wirklich an Ihr spezielles Projekt anpassen. Sie können auch das Logo ändern, z. B. für den Kunden, an dem Sie gerade arbeiten. Und Sie können diese Vorlage wirklich an sich und das Projekt, an dem Sie gerade arbeiten, anpassen . Im Grunde sind das die Vorlagen Punkt gebracht und das Loch und der Hauptpunkt, warum Sie die Vorlage verwenden sollten, ist, eine Menge Zeit zu sparen, denn wie gesagt, diese Elemente wiederholen sich immer wieder und die ganze Zeit bei jedem einzelnen Projekt. Warum also nicht die Leistung von Mock plus rP und die darin enthaltenen Vorlagen nutzen ? Weil all diese Vorlagen schließlich kostenlos sind und sie sind super einfach zu bedienen und das ist in Ordnung. Ich werde es dir im nächsten Video zeigen. Also werde ich dich dort sehen. 19. Die Vorlage auswählen: In diesem Video werde ich zeigen, wie Sie die beste Vorlage auswählen , die für Ihr spezielles Projekt geeignet ist , wo Sie klicken, wie Sie das machen und all die guten Dinge. Also lasst uns anfangen. Also hier sind wir wieder auf unserer Homepage, auf unserer Startseite. Und hier haben wir die Option für Vorlagen. Und in Mock plus rP werden Sie diese Option später für Vorlagen sehen können . werde ich auch zeigen. Wenn Sie die Benutzeroberfläche selbst innerhalb der Benutzeroberfläche öffnen , können Sie Vorlagen direkt von dort aus öffnen. Aber hier auf unserer Homepage befinden sie sich hier. Also hier haben wir Beispiele und Vorlagen. Alle Designressourcen sind vollständig anpassbar, wiederverwendbar und skalierbar. Was wirklich wichtig ist denn wenn Ihr Unternehmen skaliert, wenn Sie mehr Bildschirme oder mehr Seiten oder was auch immer hinzufügen, können Sie sie vergrößern. Dann haben wir diese Kategorien. Sie können also einige dieser Vorlagen mögen. Du kannst einfach hier auf dieses Herzsymbol klicken und es wird zu meinen Beinen hinzugefügt. Sie können auf die Medien klicken und es werden verschiedene Medienseiten, E-Commerce, Reisen, soziale Tools, Management, Lebensmittel, Nachrichten und UI-Kits durchsucht E-Commerce, Reisen, soziale Tools, Management, Lebensmittel, , was auch immer Sie möchten. Nun sind UI-Kits besonders wichtig, weil sie wirklich nützlich sind, weil sie unter Berücksichtigung der Skalierbarkeit erstellt wurden. Das bedeutet, dass Sie eine Reihe dieser verschiedenen Komponenten erhalten , die Sie so verwenden können , wie sie in Ihrem Design sind, oder Sie können sie an Ihre Bedürfnisse anpassen. So können Sie beispielsweise ein Element eines UI-Kits verwenden, abgerundete Ecken hinzufügen, Hintergründe und Schatten hinzufügen und es wirklich an Ihre Marke und das, was Sie mit Ihrem Design erreichen möchten, anpassen was Sie mit Ihrem Design erreichen möchten . Oder wenn Sie möchten, können Sie es so verwenden, wie es ist, und einfach die Farben ersetzen , die Kopie hinzufügen, vielleicht einige neue Bilder hinzufügen. Es liegt also wirklich an Ihnen und wie Sie diese Vorlagen anpassen möchten, damit sie am besten zu Ihrem Projekt passen. Wenn wir also zu all dem zurückkehren, was ich Ihnen hier zeigen wollte , ist das neu und beliebt. Ich entscheide mich für, sagen wir beliebt. Und ich werde mich statt für alle Geräte entscheiden, ich werde zwischen Handy und Websites wählen. Und in diesem Fall werde ich Websites auswählen. Also wird es, weil ich alles hier zeige, es wird mir all diese verschiedenen Optionen und Vorlagen zeigen . Und Sie können sehen, wie jeder von ihnen organisiert ist, wie jeder von ihnen strukturiert ist, und es gibt wirklich eine Menge von ihnen, zwischen denen Sie wählen können. Was Sie hier sehen können, ist, dass wir Wireframes haben , wir haben Vorlagen. Und der Hauptunterschied zwischen den beiden sind Bilder. Innerhalb von Wireframes sieht man im Allgemeinen keine Bilder. Während Sie sich in Vorlagen befinden, tun Sie das. Es liegt also wirklich an Ihnen, wie Sie das präsentieren möchten, denn Wireframes eignen sich am besten, wenn Sie schnell ein Layout erstellen und einfach ein paar Ideen testen möchten schnell ein Layout erstellen , die Sie haben. Vielleicht erhalten Sie zu Beginn des Projekts zusätzliches Kundenfeedback , um zu wie die Dinge erfahren, wie die Dinge auf der Seite gestaltet werden. Vielleicht können Sie also viel schneller arbeiten, wenn Sie nur mit Wireframes anstatt mit Bildern arbeiten. Denn manchmal können Bilder etwas verwirrend sein, besonders wenn sie nicht zu der Nische passen , in der Sie sich befinden, oder in der sich Ihr Kunde befindet. Daher ist es meiner Meinung nach viel besser, mit diesen Wireframes zu arbeiten, besonders zu Beginn des Projekts, wenn Sie Ihre Bilder bereits haben und sie in einem Ordner gesammelt haben, z. B. dann können Sie sogar Wireframes auswählen und die Bilder, die Sie haben, direkt in Wireframes hochladen und dann später während des Designprozesses einfach die Farben wechseln . Aber es liegt wirklich an Ihnen und wie Sie Ihren Workflow strukturieren möchten , wenn Sie mit diesen Mock plus rP-Vorlagen arbeiten . Also wie gesagt, das sind die Wireframes. Wenn wir etwas weiter nach unten scrollen, können Sie sehen, dass einige von ihnen bereits Bilder vorbereitet haben, und lassen Sie uns eines davon öffnen. Nehmen wir diesen an, z. B. und wenn wir nach unten scrollen, können Sie sehen, dass dort „Web-UI-Kits einkaufen“ steht. Sie können also sehen, dass es in UI-Kits, Mock- und Shopping-Web-UI-Kits enthalten ist. Und wir haben hier eine Reihe dieser verschiedenen Optionen. Lassen Sie mich Ihnen nun bei einigen von ihnen die tatsächlich zeigen. Sagen wir diesen. Sie können sehen, dass dies die Seiten sind und es stehen insgesamt 19 Seiten. Aber wenn Sie diese Dinge hier genau zählen, heißt es neun, weil das neun Ordner sind. Weil das Team , das das erstellt hat, und Sie können sehen, es ist mehr PaaS-Team, das das gemacht hat. Sie legen all diese Seiten in separate Ordner. Sie haben also nur wenige Home-Optionen, sie haben nur wenige Produktfilteroptionen, sie haben nur wenige Anmeldeoptionen. Und so kommst du zu diesen insgesamt 19 Seiten, was sehr nützlich ist, wenn du verschiedene Versionen deiner Seiten erstellst . So möchte Ihr Kunde z. B. sehen, wie der kleine Einkaufswagen aussehen wird , wenn er scheitert oder wenn die Karte abgelehnt wird oder wenn er einige Informationen nicht eingegeben oder wenn er den gesamten Kaufvorgang abgeschlossen hat, wie das aussehen wird und wenn er es nicht tut. Sie können also wirklich sehen, warum diese Ordner wirklich eine großartige Option sind, um auf einmal Mock plus rP für den nächsten Ordner zu haben. Sie können sehen, dass wir einfach diese verschiedenen Stile haben. Sie können also einen dieser Stile wählen. Du kannst sie anpassen, ihn adoptieren, wie du willst. Das ist also der Unterschied zwischen einfachen Seiten. Und Ordner auf bestimmten Seiten und verschiedenen Versionen bestimmter Seiten. Also im Grunde kannst du hier direkt scrollen und du kannst sehen , dass sie 19 Seiten haben. Es ist eine RPI-Datei, also funktioniert sie wunderbar in was plus rP. Und eine weitere Beschreibung finden Sie hier unten. Wir haben also eine Vorlage mit mehr als 20 Bildschirmen mehr als 30 Komponenten, was großartig ist, da wir diese Komponenten etwas später wiederverwenden können. Hilft Ihnen, in wenigen Minuten verschiedene kommerzielle Shopping-Websites zu erstellen . Alle notwendigen wichtigen Seiten wie Homepage-Shopping und so weiter. Und Komponenten wie Schaltflächen, Schieberegler und mehr sind vollgepackt und vollständig anpassbar, was großartig ist, weil Sie nicht zu viel Zeit verschwenden möchten, den Sinn von Vorlagen und warum Sie sie verwenden werden , um eine Menge Zeit zu sparen. Was wir hier tun können, ist, dass ich auf 50% klicken kann, nur um zu sehen, wie es aussieht. Ich kann zwei Breiten passen. Ich kann auf den Bildschirm passen, auf 200 Prozent gehen, nur um die Qualität zu sehen. Geh zurück hierher. Oder ich kann hier klicken und sie ausblenden, wenn ich sie nicht sehen möchte. Beispiel möchte ich dieses Notizenfeld nicht sehen, also klicke ich hier, um es zu erweitern. Oder wenn ich das schnell ausblenden und einblenden möchte, sagen wir, an den Bildschirm anpassen. Jetzt kann ich sehen, wie es auf dem Bildschirm aussieht. Deshalb sind diese sehr nützlich und sehr wichtig. Gehen wir zurück zu 50% oder so. Um dieses Video endlich abzuschließen , wie man eine solche Vorlage verwendet, klicken Sie einfach auf Bearbeiten und speichern. Wenn ich das mache, werde ich zu einem neuen Bildschirm weitergeleitet. Und Sie können sehen, dass Sie sich dieses Beispielprojekt in Mock plus rP ansehen . Klicken Sie hier, um das Projekt im aktuellen Team zu speichern. Also, warum dieser spezielle Teil wichtig und nützlich ist. Hier kannst du dir eine vollständige Vorschau davon verschaffen wie alles in plus rP aussieht . Also hier war die Vorschau auf der Website selbst, aber so sieht sie direkt im Mock plus rP aus. Was ich also tun kann, ist, dorthin zurückzukehren , wo hier Seiten stehen, und einige dieser Seiten zu öffnen , sodass ich hier klicken kann, um den Menütyp zu öffnen , um manuell eins einzugeben, drei eingeben, los geht's. Und ich kann schnell zwischen diesen blättern, aber ich bearbeite sie gerade nicht. So sehen sie also aus. Ich kann zwischen ihnen wechseln. Also 12.3, Sie können ziemlich leicht erkennen, was der Unterschied zwischen diesen Typen ist. Oder ich gehe auf die Homepage und wähle z.B. Fashion Home aus, wie das Möbelhaus aussieht. So sehen all diese aus und Sie können ganz einfach zwischen ihnen wechseln. Du kannst sie verstecken, du kannst sie zeigen. Und hier haben wir diese separaten Zeichenflächen. Zeichenflächen, die uns zeigen, wie dieser Bildschirm aussieht, z. B. das ist unser Slider. Wir können zwischen diesen verschiedenen Folienoptionen wählen und auswählen, welche wir integrieren möchten. Um diese Vorlage also in Ihren Projekten verwenden zu können, müssen Sie nur, egal auf welcher Seite Sie sich befinden oder in welchem Ordner Sie sich befinden, Sie können das Projekt einfach im aktuellen Team speichern. Sie können also zwischen Ihrem persönlichen Bereich oder Ihrem Team wählen . In diesem Fall wähle ich das Team, weil ich später vielleicht einige andere Teamkollegen aus meinem Team einladen werde, ich später vielleicht einige andere Teamkollegen aus meinem Team einladen werde mir dabei zu helfen, diese Vorlagen hinzuzufügen und mir zu helfen, dieses Design zu etwas Fortgeschrittenerem weiterzuentwickeln . Und zu guter Letzt werde ich zuschlagen, okay. Jetzt kannst du einen anderen Projektordner wählen , falls du einen erstellt hast, habe ich nicht auf meiner Homepage gemacht und du kannst es genau dort sehen. Ich habe also keine Ordner erstellt, aber ich kann ganz einfach und qualitativ hochwertige neue Projektordner erstellen , z. B. Modewebsite oder so etwas. Da haben wir es. Und es wird sich genau hier befinden. Also, wenn ich diesen Klick schließe, um Team, Fashion-Website Kid zu speichern, okay, und es wird in diesem Ordner gespeichert. Wenn ich also später hierher zurückkehre, befindet es sich auf dieser Website und es wird meine Homepage überhaupt nicht überladen. Da haben wir es also. Jetzt, wo wir es öffnen, können wir es bearbeiten, und genau das werden wir im nächsten Video tun. Ich werde Ihnen zeigen, wie Sie einige Änderungen vornehmen, wie Sie diese anpassen und an Ihre Marke anpassen und wie Sie tatsächlich eine neue Seite erstellen und von Grund auf neu erstellen, aber mithilfe von Vorlagen. Also werde ich dich dort sehen. 20. Die Vorlage anpassen: Nachdem wir unsere Vorlage ausgewählt haben, was wir damit machen wollen, ist es an der Zeit, sie anzupassen. Dazu ist es super einfach, ein Mock plus rP zu erstellen. Lassen Sie mich Ihnen zeigen, was wir mit dieser speziellen Vorlage machen werden und wie wir sie an unsere Bedürfnisse anpassen werden. Nehmen wir an, weil dies ein Shop-Template ist , werden wir die Shop-Elemente dafür verwenden die Shop-Elemente dafür und sozusagen unseren eigenen Shop erstellen. Wenn ich das auswähle, können Sie sehen, dass es 1.600 mal 798 ist. Also werden wir natürlich eine solche Ausgabe erstellen. Aber bevor wir damit fortfahren, erstellen wir zuerst unsere Gruppe. Wenn ich also auf Gruppe erstellen klicke, wird genau hier eine Gruppe erstellt. Ich kann es also genau hierher bewegen, oder ich kann es eine Ebene nach oben bewegen, wodurch es im Grunde nach draußen geschoben wird. Rechtsklick, gehe nach oben. Es wird es also an die Spitze bringen. Und ich kann so etwas wie mein Design oder Ladendesign sagen , so etwas. Darin erstelle ich eine Seite und nenne sie Homepage. Und Sie können sehen, dass es 1.600 mal 1080 ist, weil es standardmäßig auf die Breite ankommt, auf die Höhe. Es spielt keine große Rolle, denn wie Sie sehen können, es diese Arten von Elementen von dieser bestimmten Seite in dieser bestimmten Gruppe übernommen von Elementen von dieser bestimmten Seite , wie z. B. unsere Portbreite und -höhe. In diesem Fall wechseln wir also zum Ebenenbedienfeld. Und ich werde so etwas wie ein Inhaltsmenü sagen , das gelöscht wurde. die Komponente bearbeiten, wird sie von den Assets getrennt, oder Sie möchten zeigen, dass Sie fortfahren möchten. Lassen Sie uns zuerst diese Gruppe erkunden und sehen, wir haben also einige Symbole darin. Also im Grunde ist es für den Inhalt hier unten. Aber was mich interessiert, ist im Grunde dieses Menü. Doppelklicken Sie also darauf und trennen Sie es. Ja, die Gruppierung aufheben. Und was wir hier haben, sind all diese verschiedenen Elemente. Und lassen Sie mich das ein bisschen nach unten verschieben , damit ich es ein bisschen besser sehen kann. Was mich interessiert, ist diese Gruppe und dieses Rechteck. Wenn ich es also verstecke, können Sie sehen, dass es bis zur vollen Breite dauert. Was mich interessiert ist, lass uns zuerst die Gruppen-ID, also Control D, zB und ich nenne es Top Nav, BG. Also Top Nav-Hintergrund. Und ich werde es auf ungefähr so verkleinern . Bisher 71 oder lassen Sie uns mit der weichen runden Zahl 72 beginnen. Und lass uns zurück nach oben gehen. Lassen Sie uns das ein wenig erweitern , damit wir etwas mehr Platz haben. Was ich tun werde, ist zunächst die Opazität zu reduzieren , damit wir sehen können, was dahinter steckt. Gehen wir also zurück zu hier. Lass uns in die Gruppe gehen. Was ist diese Gruppe? Ja, das ist es, was uns an einigen NAV- oder Top-Nav-Artikeln interessiert . Da haben wir es. Und in diesen Top-Navigationselementen haben wir unser Logo, das wir ersetzen werden, wenn es sich um ein echtes Projekt handelt. Wir haben also diese drei Symbole so. Dann haben wir unsere Menüpunkte und wir haben das Rechteck, das den mündlichen Hintergrund dieses Projekts darstellt. Also, wenn ich es schließe oberen Navigationselemente und verschiebe es direkt nach oben. Also so etwas. Da haben wir es. Wir haben also genug Artikel besprochen und wir haben Top Nav be G, das wir gerade erstellt haben. Lassen Sie mich es in diese Gruppe ziehen. Also lasst uns die Gruppe öffnen. Versuchen wir es zu bewegen. Oder noch besser, vielleicht können wir die Gruppierung so aufheben. Und dann wähle das aus, drücke Control G und nenne es Top. Jetzt drücke ich Strg C und gehe dann zurück zu meinen Seiten. Wählen Sie meine Homepage aus, drücken Sie Control V. Und Sie können sehen, dass es genau hier eingefügt ist. Was ich zuerst tun werde, ist hier reinzuspringen. Wählen Sie diesen Text mit der Aufschrift Assets aus. Ich werde es als meine Texte hinzufügen. Sie können also sehen, dass dies die Schrift ist, dies ist die Größe. Ich werde weitermachen und es direkt als Farbe angehen. Es ist rein schwarz, also ich mag UPS nicht wirklich, das mag ich nicht wirklich. Lassen Sie mich es also auswählen und ändern wir das in etwas Realistischeres oder so. Ich werde es als meine Farbe hinzufügen. Werde das reine Schwarz los. Wählen Sie dieses aus, wenden Sie die Farbe an, wenden Sie die Farbe an. Da haben wir es. Und für diese speziellen Symbole mag ich diese Farbe nicht wirklich. Also lasst uns weitermachen und es in etwas Nettes und Lebendiges ändern . Vielleicht so etwas. Da haben wir's, ich mag es. Also doppelklicke ich hier und nenne es Textfarbe, nur damit ich weiß, wo es ist. Und das ist meine Symbolfarbe oder meine Hauptfarbe, oder wie auch immer du es nennen willst. Wir können also unsere Symbolfarben anwenden, sodass Sie sofort sehen können, dass wir den gewünschten Look erzielen. Und ich werde mich nicht zu sehr mit dem Logo beschäftigen, aber Sie müssen sich nur die Abmessungen ansehen. Also 136 mit 36, du kannst ein bisschen andere Abmessungen haben wenn du willst, aber es ist am besten. Um die Dimensionen zu verwenden , die sie bereits verwendet haben, müssen Sie nur hier drüben weitermachen , wo Upload steht. Klicken Sie auf Hochladen und laden Sie Ihr eigenes Logo hoch. Dieses Mal im PNG-Format könnte zB gut funktionieren. Und laden Sie es einfach dort hoch, sobald wir mit unserem Hauptmenü fertig sind. Und wenn ich zu den Ebenen wechsle, siehst du oben in der Navigationsleiste eine Kopie. Ich mag dieses Exemplar mit den Benennungsstrategien nicht wirklich, also nenne ich es die Top-Navigation. Da haben wir es. Darunter werde ich einige neue Elemente hinzufügen. Gehen Sie also weiter zu den Seiten, die zu Home Fashion Home übergegangen sind, wie Sie bereits erwähnt haben, wir möchten diese Elemente verwenden. Wenn ich also zu den Ebenen gehe , doppelklicken Sie genau hier. Wir haben also alle möglichen Optionen. Wir haben also das Rechteck, wir haben das Bild und ich möchte einen Teil davon verwenden. Ich werde sie nicht alle klein verwenden. Wählen wir zunächst mehrere dieser Elemente aus, etwa so. Weil ich sie nicht wirklich will. Sie können 02 mal drücken, um die Opazität zu reduzieren , damit wir sehen können, womit wir arbeiten. Und Sie können einige dieser übrig gebliebenen Elemente 02 mal auswählen , sodass Sie die Opazität verringern und diesen Behälter auswählen können . Sie können ein wenig hineinzoomen die Deckkraft reduzieren, weil ich nicht alles verwenden möchte. Alles was ich brauche ist, nur einige davon zu benutzen. Also z.B. ich mag diese Slider-Option. Also würde ich diese verwenden und diese einfach auswählen. Ich würde diesen Text verwenden , weil er mir gefällt. Schaltfläche „Jetzt einkaufen“ funktioniert einwandfrei. Und ich werde das Rechteck und das Bild darunter verwenden . Sie können das Häkchen entfernen und überprüfen, ob dies das Bild war , das Sie ausgewählt haben. Es sieht also so aus, als müssten wir alles noch einmal machen , aber es ist wichtig. Also lass es uns machen. Sie können beim Navigieren die Leertaste gedrückt halten , um sich nach links, rechts, oben und unten zu bewegen. Also lasst uns jetzt den Shop nutzen und mich diese tatsächlich benutzen lassen. Ja. Aber bevor ich das tue, lassen Sie mich all diese verwenden. Drücken Sie Strg C, gehen Sie zurück zu meinen Seiten, gehen Sie zurück zu meiner Homepage, drücken Sie Strg V, um sie an der richtigen Stelle einzufügen. Da haben wir es. Und ich werde sie gut an hier anordnen. Und wenn ich zu den Ebenen wechsle, füge ich sie der Gruppe hinzu. Aber bevor ich das tue, lass mich zum Fashion Home wechseln und ich werde diese benutzen. Wechseln Sie also zu den Ebenen, wählen Sie sie aus und sehen Sie, was es ist. Da haben wir es. Wir haben also Symbole und wir haben Rechtecke. Das kannst du sehen. Also lasst uns sie auswählen. Drücken Sie Control C und gehen Sie zurück zu unserer Homepage Control V. Los geht's. Alles, was ich wirklich tun muss, ist, sie hier gut auszurichten. Halten Sie also die Umschalttaste gedrückt, den Linkspfeil 123440 Pixel, Umschalttaste den Pfeil nach oben eins, zwei, drei, vier , um von hier aus 40 Pixel zu werden, oder Sie können sie nach Ihren eigenen Wünschen anpassen. Mir gefällt die Ausrichtung nicht wirklich, also werde ich es positionieren. Mal sehen, was wir hier tun können. Vielleicht kann ich es ein bisschen anders ausrichten. Also mal sehen, vielleicht funktioniert so etwas gut. Da haben wir es. Und vielleicht möchte ich es ein bisschen nach rechts verschieben. Also vielleicht funktioniert ein Fünfzehntel ganz gut. Und da haben wir es. Wir haben weitergemacht und unseren eigenen benutzerdefinierten Hintergrund erstellt. Jetzt können Sie hier Ihr Bild auswählen. Und weil ich wirklich zu viele dieser Bilder hier auf meinem Computer habe. Normalerweise verwende ich einige Online-Sammlungen. Also vielleicht würde das gut funktionieren. Aber nehmen wir an, ich möchte dieses Bild ersetzen. Also werde ich es Hero Image nennen. Komm gleich hier nach rechts. Hochladen und klicken Sie auf Hochladen. Gehe zu den Stockfotos, richtiges Licht. Das ist die Sammlung, die ich habe, um z.B. so etwas wie diesen zu öffnen. Je nachdem, wie groß es ist, wird das Bild geöffnet. Es wird z.B. länger oder kürzer dauern und du kannst auf Okay klicken. Es wird etwas gedehnt, sodass Sie es mit Bausätzen füllen können , z. B. das wird es ganz schön ausfüllen , weil wir ein Rechteck oben haben. Ich kann es Farbüberlagerung nennen. wusste einfach nicht, was es ist. Und wenn ich es z.B. auswähle, können Sie sehen, dass wir diese Füllfarbe haben. Ich kann das Alpha auf 40 einstellen, z. B. oder etwas Dramatischeres wie 60, mal sehen. So etwas wie 50. Ich denke, es wird eigentlich ganz gut funktionieren. Und da haben wir es. Wir haben weitergemacht und eine separate Schaltfläche erstellt. Was sie hier tun müssen, ist dies vielleicht innerhalb der Interaktionen anzupassen. Sie können sehen, dass es ungültig ist, weil es uns auf die separate Seite bringt , die wir irgendwann erstellen werden, z. B. um dieser Seite weitere Elemente hinzuzufügen Ich wähle einfach meine Zeichenfläche aus und verlängere sie ganz nach unten, um mir etwas mehr Platz zu geben, zu Seiten wechseln, zur Homepage wechseln. Lassen Sie uns nun einige dieser Elemente auswählen. Also werde ich diese hier oben auswählen. wechsle zu meinen Ebenen. Und wähle sie gleichermaßen aus. Da haben wir es also. Ich glaube, ich habe alles ausgewählt, was ich brauchte. Drücken Sie Strg C, gehen Sie zwei Seiten zurück, Homepage-Ebenen. Drücken Sie Control V. Da haben wir es. Nett. Drücken Sie Strg G, um sie zu gruppieren, und ich nenne sie z. B. beworbene Produkte, so etwas. Und weil all diese anderen Elemente auf unserer Seite verstreut sind, wähle ich einfach alle aus Also drücke Strg G und nenne dieses Heldenbild oder was auch immer du willst. Sie können diese Navigation nach unten oder nach oben verschieben, und Sie können sehen, wie unsere Website bereits eine gewisse Form annimmt. Ich halte meine Alt-Taste gedrückt, um zu messen. Und Sie können sehen , dass das 160 ist, was in Ordnung ist, und 80 von oben, was großartig ist. Und ich möchte es benutzen. Dann können wir zurück zur Homepage gehen. Und z. B. ich kann einfach die Auswahl aus all diesen Elementen treffen , etwa so. Und wir können weitermachen und auch die Fußzeile auswählen. Drücken Sie Control C, nur um uns ein bisschen Zeit zu sparen. Drücken Sie Control V noch einmal etwa. Und denk dran, wir sind ATP. Also werden wir die Konsistenz unseres Designs beibehalten. Wir wählen unsere Zeichenfläche aus, indem wir darauf doppelklicken und sie ganz nach unten ausdehnen. Da hast du es. Wir haben eine Seite erstellt, wir haben eine Seite angepasst. Und was Sie natürlich tun werden, ist, sagen wir, Sie möchten so etwas hinzufügen und es bearbeiten. Also vielleicht kann ich statt Neuankömmlingen sehen, wie ich mich auf den Winter vorbereite. Weil sie kalt und verschneit aussieht. Bereite dich auf den Winterzauber vor. Vielleicht so etwas. Einfache T-Shirts, das ist in Ordnung. Also lasst uns draußen klicken und das anpassen. Also Verkauf diesen Sommer. Ja, vielleicht genießen Sie die beliebtesten Artikel im Angebot. So etwas. Ich denke, das wird gut funktionieren. Und wenn Sie das Gesamtbild erhalten, können Sie diese Bilder direkt ersetzen, sodass Sie doppelklicken können, um die beiden Eigenschaften zu zeichnen. Sie haben diese Upload-Option. Was ich also tun kann, ist auf Hochladen zu klicken, z. B. auf Upload klicken und ein anderes Bild suchen. Vielleicht hat sich dieser geöffnet. Und noch einmal, je nachdem, wie groß Ihr Bild ist, und ich würde Ihnen immer empfehlen, Ihre Bilder zu optimieren, was auch immer Sie tun, was auch immer Sie tun, es wird länger oder kürzer dauern, bis Sie dies tun. Also hier ist es. Und ich kann auf OK klicken, z. B. n ist, dass Sie sehen können , dass das Originalbild durch dieses Bild ersetzt wird . Schließlich müssen wir hier etwas anderes hinzufügen. Also nenne ich es z. B. eng anliegende Herrenhosen. Vielleicht. Und vielleicht kann ich es zu diesem Preis hinzufügen. Vielleicht können es 49, 99 oder so ähnlich von diesem Preis sein. Und Sie können deutlich sehen, was das bewirkt hat. Eine weitere Sache, die ich beachten möchte ist, dass Sie, wenn Sie darauf doppelklicken , sehen, dass Sie in diesen Bearbeitungsmodus wechseln. Alles andere wird im Schatten angezeigt und alles, was Sie gerade bearbeiten, wird hervorgehoben. Sie können auch die Umschalttaste gedrückt halten, um dieses Bild einzugrenzen, wenn Sie möchten, oder um es zu vergrößern. Aber ich werde die Konsistenz beibehalten und es genau hier platzieren. Und übrigens, ich mag es sehr, wie das aussieht, weil es nicht allzu viel Sinn macht, Hosen mit einzubeziehen. nächsten beiden Modelle. Also werde ich das ursprüngliche Layout beibehalten, wie es war. Warum sollten sie uns wählen? kannst du anwenden, du kannst es anpassen. Und zB möchte ich vielleicht diese Symbolfarbe im Hintergrund anwenden. Und jetzt wähle dieses aus. Es ist also ein Bild und ziehen Sie jetzt unseren Dollar hinein. Sie können diese beiden auswählen und sicherstellen , dass sie zentriert sind. Und los geht's, Sie können sehen, wie einfach das zu bearbeiten ist, wie einfach es ist, es anzupassen. Und vor allem können Sie diese Elemente auswählen, Control G drücken und es als kostenlosen Versand bezeichnen. Dann können Sie diese Kontrollgruppe G zu gleichen Zahlungen gruppieren. Und du verstehst den ganzen Punkt. Sie können sie also gruppieren und nach Belieben anpassen. Es wird für Sie ziemlich einfach sein, es zu organisieren. Und dann können Sie einfach all diesen Inhalt abrufen, Strg G drücken und ihn aufrufen, z. B. warum sollten Sie das wählen? Weil es einfach meine Präferenz und ich das immer gerne mache. Ich hatte das Glück, diese Elemente auszuwählen und in Gruppen zusammenzufassen und sie gut zu organisieren. Ich weiß es also, und meine Teamkollegen wissen später , wer geschaffen hat, was wir gemacht haben, was wir erreicht haben und wo zu bestimmten Zeitpunkten alles organisiert ist . Deshalb benenne ich gerne meine Ebenen, meine Gruppen und sorge für Ordnung. Später, wenn die Dinge größer werden, wenn die Termine kürzer werden, ist alles gut organisiert und alle sind auf derselben Seite, was wir tun müssen und wo wir beim letzten Mal aufgehört haben. Wenn wir also weiter unten weitermachen, können Sie heute einige Produkte sehen. Sie können so etwas an unserem Most ändern. Ein beliebtes Produkt. Und was ich in diesem Fall tun werde, ist dies auszuwählen und sicherzustellen, dass es zentriert ist. Wenn ich also tippe, wird es sich auf jeder Seite erstrecken. Da haben wir es. Wir haben diese Option. Was ich hier also tun werde , ist vielleicht etwas Hintergrundwissen hinzuzufügen. Oder vielleicht sehen wir uns das Bild an. Dieses Bild. Was ich tun kann, ist einen schnellen Schatten hinzuzufügen, also so etwas wie 610 und dann 20 für die Unschärfe. Und vielleicht den Alpha so einstellen, dass er nicht komplett schwarz ist, aber es ist so etwas. Da haben wir es, nur um ein bisschen Schatten drum herum hinzuzufügen. Und wenn wir schon dabei sind, können wir vielleicht einige verschiedene Optionen hinzufügen. Also vielleicht kann ich zehn für den Eckenradius nehmen und nur darauf achten, dass auch dieses Rechteck geändert wird, um es zu drehen, da es das Bild über dem Bild verdeckt. Und jetzt können Sie sehen, dass wir diese schönen abgerundeten Ecken anstelle von Straßenecken haben , falls Sie danach suchen. Was wir nun sehen können, sind all diese Informationen in unserer Fußzeile. Was ich tun würde, ist das natürlich zu ersetzen und zu ändern. Schauen wir uns also an, was wir hier haben. Wir haben Männer, Frauen und Kinder. Und mir gefällt nicht wirklich, wie das zentriert ist. Also werde ich alles so auswählen und einfach hierher kommen und sicherstellen, dass alles zentriert ist, also so. Wenn ich also zoome, können Sie sehen, dass alles zentriert ist. Wenn Sie möchten, dass dies Ihre Fußzeile ist, kopieren Sie sie immer einfach und fügen Sie sie unten ein. Aber ich werde es einfach so lassen wie es ist, weil das eine Komponente ist. Ich klicke, um es zu öffnen und zu bearbeiten. Also was ich tun werde, ist vielleicht, dass du das ändern kannst, was darin steht. Sie, Sie können sehen, wie Sie online einkaufen. Also vielleicht schauen wir uns den Informationskontakt an. Also vielleicht wollt ihr das ändern, sagen wir mal auf meiner Website.com einkaufen oder welche Hotline ihr auch wählen könnt. Sagen wir also Telefonnummer, Telefon. Vielleicht möchtest du unten ein zusätzliches Telefon hinzufügen oder so, vielleicht eine Adresse, was auch immer du willst, du kannst es anpassen. Und schließlich haben wir hier einige verschiedene Optionen und wir haben einige verschiedene Symbole. Sie können diese Symbole also einfach ersetzen. Du kannst deine eigenen hinzufügen, du kannst sie wechseln. Du kannst mit ihnen machen, was du willst. ZB vielleicht hat dieser Shop kein LinkedIn. Sie können also LinkedIn loswerden und diese beiden auswählen und sie einfach anstupsen und sehen, dass 31 Pixel der Abstand zwischen diesen sind, und Sie können sie ganz einfach anpassen. In diesem Fall können wir einfach alle gleich auswählen. Gehen Sie also zu unserem Assets-Menü und wählen Sie die Symbolfarbe aus, denn denken Sie daran, dass dies die Symbolfarbe ist, die wir dafür wählen. Aber wir wählen auch dieses aus und stellen sicher, dass es ein Bolzen ist. Und stellen Sie sicher, dass wir diese Schriftart für diese Optionen hier tatsächlich verwenden . Da haben wir es. Wir haben also die gleiche Schrift wie zuvor. Ich entscheide mich für Bold. Ich werde aus irgendeinem Grund gehen es hat sich dort nicht geändert und los geht's, mutig. Und wir haben Bolt. Jetzt, wo wir Schulden hinzugefügt haben, können wir diese Option hier hinzufügen. Da haben wir es. Und Sie können diese Option einfach für Fett anwenden. Da haben wir es. Wenn Sie ihn nun hinzufügen, diesen Bolzen, wird er Ihrem gesamten Design hinzugefügt. Jetzt möchte ich endlich diese drei auswählen und ihnen vielleicht eine andere Farbe hinzufügen. Es ist also nicht so offensichtlich, vielleicht so etwas. Ich denke, es ist viel lesbarer als zuvor. Und mal sehen, wir haben diese Farbe. Ich werde es zu meinen Farben hinzufügen. Und ich nenne es z. B. Absatzfarbe. So. Ich wähle diesen Absatz aus und wende die Absatzfarbe darauf an. Du verstehst also den ganzen Punkt. Vielleicht kann ich das auswählen und fett anbringen, aber ich denke nicht, dass es wirklich gut funktioniert. Aber Sie können sie einfach anpassen und anwenden, was Sie wollen. Also dieser, ich mag nicht wirklich, wie er aussieht. Also vielleicht, vielleicht können wir es sogar aus dem Ordner verschieben. Schauen wir uns also an, warum Sie uns wählen, klicken Sie mit der rechten Maustaste und lösen Sie die Gruppierung auf. Positionieren Sie es dann so , dass es in der Mitte ist. Da haben wir es. Control G, und warum dann? Wählen Sie uns? Großartig. Jetzt kann ich dieses Control G auswählen , die beliebtesten Produkte. Dann kann ich dieses Steuerelement G auswählen und es vielleicht nennen. Mal sehen, warum ich G nicht gruppiert Los geht's. Du kannst es CTA nennen, z. B. für Call to Action. Und ich kann unsere neue Fußzeile gruppieren, weil ich daran denke, dass wir sie zuvor aufgehoben haben. Also Control G, nennen wir es Footer, los. Und was uns bleibt, sind all diese Elemente oben drauf. Also lass uns sehen. Okay, also für dich, so für dich ausgewählt. Und lass uns nachschauen. Jetzt können Sie sehen, dass wir viel besser organisiert sind als zuvor. Wir können von oben anfangen. Wir haben also eine Top-Navigation, Sie können sie nach oben verschieben. Heldenbild. Dann haben wir für Sie ausgewählte Produkte beworben. Da haben wir es. Dann haben wir y, du wählst uns. Der Filter wird stark heruntergehen. Steuerung einer Handlungsaufforderung, beliebtesten Produkte und der Fußzeile. Also, wenn ich jetzt eine neue Seite erstellen möchte, sagen wir, ich weiß es nicht, ich habe auf dieses T-Shirt geklickt oder was auch immer und es geöffnet, ich muss es nur hier finden. Gehen wir also ins Produktdetail und schauen wir, was wir haben. Da haben wir es also. Wir haben genau dieses Shirt , nach dem wir suchen werden. Und wir haben alle möglichen dieser verschiedenen Optionen als Sub-Art-Board. Wir haben also eine Beschreibung, wir haben Bewertungen. Und so sehen die Bewertungen aus und dafür haben sie unterdurchschnittliche Ports verwendet. Und hier können Sie sehen, dass wir diese beiden Optionen haben. Also mir gefällt wirklich, was sie genau hier gemacht haben. Also können wir dasselbe für unsere zweite Seite tun. In unserem Shop-Design und auf unserer Homepage können sie es also in den Ordner legen. Darin können wir eine weitere Seite erstellen. Sorry, keine Gruppe. Ich wollte noch eine Seite sagen. Da haben wir es. Und ich nenne es z. B. Produktdetails. Da haben wir es. Und alles, was ich hier tun muss, ist im Grunde mit dem Kopieren und Einfügen von Elementen von meiner Homepage zu beginnen. Jetzt wird es viel einfacher, das zu tun, also nehmen wir einfach dieses, nehmen wir dieses, dieses und dieses Steuerelement C. Wechseln Sie dieses Steuerelement C. Wechseln zur Produktdetailsteuerung V. Da haben wir es. Und ich muss meinen Flughafen um so etwas erweitern . Da haben wir es. Und ich gehe zum Produktdetail und wähle alles aus, was Sie hier sehen. Also wähle ich alles aus, drücke Control G, wechsle zu den Ebenen und nenne es z.B. Produktdetails, Control C, drück Seiten. Gehen Sie zurück zu meiner Kontrolle mit den Produktdetails V. Da haben wir es. Wechseln Sie zu den Ebenen. Da steht immer die Schaltfläche Kopieren, mach dir darüber keine Sorgen. Es liegt nur daran, dass du es von einer anderen Seite kopiert hast. Also orange, um diese Produktdetails zu doppelklicken und sie einfach umzubenennen. Da haben wir es. So etwas. Kopiere und halte die Dinge einfach schön und organisiert. Weil Ihre Kunden Sie manchmal fragen, dies ist eine Kopie dessen, was Sie online kopiert haben, und dann müssen Sie es ihnen erklären. Nein, nein. Ich habe es gerade von einer anderen Seite kopiert. Was wir also endlich tun müssen, ist zu den Details zurückzukehren und das zu kopieren, was, wie Sie sehen können, das Inhaltsfenster ist. In diesem Inhaltsbereich haben wir U1 und U2. Sie können sehen, dass dies V1 ist, das ist VW Two. Und wenn Sie doppelklicken, können Sie sehen, wie Sie zwischen diesen unterscheiden und was Sie damit machen können. Und natürlich wurden dafür bereits Interaktionen hinzugefügt. Sie können sich also ganz einfach zwischen ihnen einstellen. Wenn ich also Strg C drücke, um es zu kopieren, gehe zurück zu meinen Seiten, zurück zu meinen Produktdetails, Kontrolle V. Los geht's. Und denk dran, wir haben AT benutzt, also können wir vielleicht 100 nehmen. So solide ist immer noch 123. Und wenn ich mich verstecke, wenn ich den Mauszeiger bewege und Alt wähle und mit der linken Maustaste klicke, kannst du in der oberen Navigationsleiste sehen, dass ich 100 bin. Und lassen Sie uns das auf unser Inhalts-Panel umstellen. Da haben wir es. Und was ich im Grunde auch tun werde , ist, einfach auf Ansicht zu gehen und diese Control C auszuwählen. Gehen Sie zurück zu den Produktdetails Control V und stellen Sie sicher, dass sie sich genau hier befinden. Also werde ich sie einfach hier in der Nähe positionieren. Da haben wir es, nett und organisiert. Und ich wähle alle meine Inhalte aus und schiebe sie in Richtung eines 100-fachen Doppelklicks. Und da haben wir es. Jetzt, wo wir das vorbereitet haben, ist alles so, wie es sein sollte. Natürlich werden Sie noch einige Änderungen vornehmen. Nehmen wir an, dieses Symbol darin wechselt zu den Eigenschaften, Sie können sehen, dass es sich um ein Symbol handelt. also zur Icon-Farbe wechseln, wenn Sie sich für diesen Stil entscheiden möchten, gefällt Ihnen dieser Verkauf vielleicht nicht. Sie möchten diese Schriftgrößen und Schrifttypen anpassen, z. B. solche Dinge. Du kannst also alles machen. Und vor allem, wenn du hier auf Vorschau klickst, wenn ich nach unten scrolle, siehst du das nicht wirklich , weil wir es verbinden müssen. Aber du kannst die Vorschau sehen. Und wenn ich zurück zur Homepage gehe, kannst du die Homepage sehen. Nun, das ist genau das, was wir geschaffen haben, das ist genau das, was wir hinzugefügt haben. Und im nächsten Video werde ich Ihnen zeigen, wie Sie diese Interaktion anpassen und erstellen können, um sie tatsächlich zu integrieren. Und vielleicht können wir etwas in den Einkaufswagen legen, vielleicht können wir einen netten kleinen Schwebeeffekt hinzufügen. Also werde ich dich dort sehen. 21. Hinzufügen von Interaktionen zu Vorlagen: Das Hinzufügen von Interaktionen zu Ihren Designs kann sie wirklich zum Leben erwecken , da es sich nicht nur um statische Designs handelt. Sie werden Ihren Designs etwas Leben, etwas Bewegung und etwas nationales Storytelling verleihen etwas Bewegung und etwas nationales Storytelling , damit Ihre Zuschauer, Ihre Kunden und Ihre Entwickler verstehen, was Sie mit dem, worüber Sie in Ihrem Design sprechen, damit gemeint haben. Lassen Sie uns also dort weitermachen, wo wir in der vorherigen Lektion aufgehört haben , und lassen Sie mich Ihnen zeigen , wie Sie einige grundlegende Interaktionen zu Mock plus rP hinzufügen. Also hier ist die Produktdetailseite, aber ich möchte eigentlich von unserer Homepage aus beginnen. Ich möchte also, dass meine Benutzer dieses Bild auswählen und dann zu den Produktdetails gehen können . Und dann werden wir uns mit einigen dieser Optionen befassen. Um das zu tun, gehe ich gleich hier rein und sage, gehe zur ersten Seitenansicht. Mir gefällt nicht wirklich, wie das strukturiert ist. Also werde ich es bearbeiten. Und ich klicke auf Page Jump. Und ich werde mich darauf konzentrieren und zu den Produktdetails zu den Emissionen zurückkehren , keine. Also schauen wir mal, ob wir es erreicht haben. Und dann klicken wir hier schnell auf Vorschau. Wenn also diese Vorschau geöffnet wird, kann ich bis zu diesem Bild ganz nach unten scrollen. Wenn ich darauf klicke, werde ich zu dieser Seite weitergeleitet. alles funktioniert also einfach gut. Wenn wir also zu den Details selbst gehen, möchte ich hier nur zwei Dinge anpassen. Eine Sache ist die Schaltfläche In den Warenkorb legen. Ich möchte einen schnellen Hover-Effekt hinzufügen. Und dann möchte ich dieses Inhaltsfenster in Angriff nehmen , um meine Hover-Effekte hinzuzufügen. Was ich tun werde, ist auf meine Schaltfläche zu doppelklicken. Und dann kannst du sehen, dass wir all diese Befehle haben, aber ich möchte sie eigentlich hinzufügen, diese Schaltfläche. Also wähle ich in diesem Fall den Mauszeiger aus. Und ich gehe gleich hier zu Immobilien. Denn die Maus schwebt über sich selbst. Anstelle dieser Füllfarbe werde ich sie auf diese Symbolfarbe ändern, z. B. und auf dem Text selbst. Also mal sehen, der Text wird genau hier sein. Da haben wir es. Gehen wir also zur Normalität über. Schalten wir es auf Mauszeiger um. Lassen Sie uns kurz eine Vorschau ansehen und sehen, was wir getan haben. Wenn Sie also den Mauszeiger hier bewegen, können Sie sehen, dass sich die Hintergrundfarbe ändert , und Sie können dies mit all diesen tun. Also zum Beispiel hat das keine Farbe außer dem Symbol selbst. Wenn Benutzer also den Mauszeiger darauf bewegen, kann dieses Symbol möglicherweise von grün zu lila oder etwas Ähnlichem wechseln, wie wir es hier getan haben. Wir haben jedoch immer noch ein Problem mit diesem Inhaltsbereich, da Sie sehen können, dass darin keine Inhalte angezeigt werden. Da muss also etwas Magie passieren und wir müssen tatsächlich etwas davon miteinander verbinden. Wenn wir also ein wenig hineinzoomen, können Sie sehen, dass Invalide geboren werden. Und das liegt daran, dass wir es aus dieser speziellen Ansicht kopiert haben . Und hier in dieser Ansicht funktioniert alles einwandfrei. Sie können also die Ansicht von YouTube sehen. Sie können diese also umbenennen, wie Sie möchten. Wenn wir zu unseren T-Zellen zurückkehren, doppelklicke ich hier. Und wenn Sie sehen, dass wir eine ungültige Zeichenfläche haben. Lassen Sie uns es also loswerden, indem Sie einfach auf Löschen klicken. Dann werde ich weitermachen und unsere Boards erweitern. Und du kannst sie genau hier sehen. Stattdessen möchte ich nun eine Beschreibung machen . Das nächste werden Reviews sein. So schnell. Beschreibung. Halten Sie die Leertaste gedrückt und doppelklicken Sie auf Bewertungen. Da haben wir es. Und wenn ich jetzt hierher zurückgehe, können Sie sehen, dass es in Echtzeit mit Beschreibung und Bewertungen aktualisiert wurde . Also alles, was ich hier tun muss, ist einfach den Inhalt von hier zu kopieren. Control C. Ups, tut mir leid, ich habe versehentlich das Stiftwerkzeug ausgewählt. Damit du das loswerden kannst, was ich geschaffen habe. Gehen wir also noch einmal zurück. Kontrolle C. Gehe zu meiner Beschreibung Kontrolle V. Da haben wir es, nett und sauber. Dann gehe direkt hierher, kontrolliere C und füge es in meine Bewertungen ein. Da ich diesen Inhalt bereits verwendet habe, benötige ich diese unterdurchschnittlichen Ports, die nur kopiert wurden, nicht. Also kann ich meine Beschreibung einfach hier platzieren und ich kann einfach meine Bewertungen verwenden. Positioniere es hier in der Nähe. Wenn ich jetzt zurückgehe und mir das noch einmal ansehe, werden Sie sehen, dass es genau hier ist, aber wenn ich genau hier klicke, passiert wirklich nichts. Wie kann ich also zwischen diesen beiden Inhalten wechseln und wie kann ich zwischen diesen beiden Inhaltsteilen wechseln? Um das zu tun und noch einmal hierher zurückzukehren , hat alles mit diesem Inhaltsbereich zu tun. Wenn ich also zu den Ebenen wechsle und sie auswähle, können Sie ihre Namen sehen. In diesem Fall heißt es Content Panel One. Darauf müssen wir also abzielen. Sie können also sehen, dass es hier in den Bewertungen und in der Beschreibung selbst bereits einige Interaktionen gibt. Im Grunde müssen wir also tun wenn Nutzer auf Bewertungen klicken, um sie zu Bewertungen zu bringen, wenn sie auf die Beschreibung klicken, um sie zurück zur Beschreibung zu bringen . Wie macht man das? Gehe einfach zum Interaktionsmuster. Wählen Sie hier Ihre Bewertungen und Sie können sehen, dass die Befehle bereits gesetzt wurden. Sie müssen es also nur mit der neuen Seite verlinken , die wir gerade erstellt haben. Also klicken Sie auf Trigger bearbeiten, klicken Sie, das ist in Ordnung. Wählen Sie das Ziel aus. Also in der Haupt-Zeichenfläche, das ist diese Ausgabe hier, kann ich öffnen, mein Inhaltsfenster suchen, eins, dort klicken und den Inhalt wechseln. Also zufrieden, ich muss es auswählen, um zu den Bewertungen zu gelangen. Denn wenn sie Bewertungen auswählen, müssen sie zu Bewertungen gehen, weil das sind Bewertungen, aus denen ich sie hier auswählen werde. Sie können die gewünschte Animation auswählen. Sie können nach links und rechts nach unten wischen und bei der Auswahl der Animation die Lockerung wählen. Also lass es mich dir zeigen, sagen wir mal nach links wischen, dann bekommst du all diese Optionen. Also wähle ich einfach keine. Treffer, okay? Und dann musst du dasselbe für diesen tun. Also klicken Sie hier auf diese drei Punkte. Klicken Sie auf Bearbeiten. Klicken Sie, wählen Sie das Ziel aus. Ich werde das Hauptfenster für den Inhalt der Zeichenfläche wählen, genau wie beim vorherigen Mal. Und Sie können sehen , dass Sie diese Option kontinuierlich wiederholen können , wenn Sie möchten. Aber ich werde das nicht tun, weil wir bei der Beschreibung sind, wir wollen auf die Beschreibung abzielen. Wählen Sie also gleich hier die Beschreibung aus. Klicken Sie erneut auf Okay, Sie können hier alle möglichen Optionen auswählen. Und Sie haben auch verschiedene Auslöser. Sie haben also Cliquish, Sie müssen doppelklicken, rechten Maustaste nach unten, nach oben, mit der Maus die Eingabetaste und die Maustaste verlassen. Mall Center bedeutet das. Mausblätter bedeuten diesen Slider-Fluorid-Zoom, alle möglichen Dinge, aber ich werde einfach dasselbe einfache Halten und Klicken verwenden, auf Okay drücken, um das zu bestätigen. Und jetzt klicken wir auf Vorschau auf unserem Main, auch in unserem Board, du kannst es hier so nennen, wie du es genannt hast. Deshalb nennen wir es Produktdetails. Sie können also auf Produktdetails doppelklicken. Alles wird verlinkt , weil Sie keine Links geändert und nichts extra daran geändert haben. Jetzt können Sie also sehen, dass es sich genau hier befindet . Also klicken Sie auf Kritiken. Da haben wir es. Sie haben zwei Bewertungen. Vielleicht sollten wir das auf drei Bewertungen ändern , weil wir drei Rezensenten haben. Und natürlich können Sie diese Beschreibung ändern. Du kannst damit herumspielen und tun, was du willst. Eine letzte Sache, die ich tun möchte, ist vielleicht, dass sie, wenn sie auf das Logo klicken , zur Homepage weitergeleitet werden. Also lassen Sie uns das schnell hinzufügen. Ich gehe hierher, wähle es hier aus klicke und ziehe es dann einfach auf meine Homepage. Der Auslöser werden also Klickbefehle sein. Es wird zu dieser Seite springen. Öffnet ein aktuelles Fenster. Ich möchte nicht, dass es in weiteren Windham-Animationen geöffnet wird. Also vielleicht kann ich etwas damit anfangen. Vielleicht reinschnuppern. Ich weiß nicht, vielleicht funktioniert das und funktioniert. Lass uns sehen. Ja, verwenden wir Fading. Wenn Sie die Animationsdauer verringern, zwei Millisekunden bis Sekunden, drücken Sie dann auf Okay. Wenn ich jetzt auf Vorschau klicke, funktioniert das immer noch. Alles funktioniert einwandfrei. Du musst das Ziel treffen. Und wenn Sie den Mauszeiger bewegen, können Sie sehen, dass es vom Pfeil zum Zeiger wechselt . Sie können dort klicken und Sie werden zu dieser bestimmten Seite weitergeleitet, einen schönen Effekt hat. Sie können diese auch in Hover-Zustände umwandeln und vielleicht können wir genau das tun. Gehen Sie also zurück zur Homepage und wählen Sie diese aus. Wechseln Sie zu den Ebenen und wir müssen einige grundlegende Anpassungen vornehmen. Also vielleicht beworbene Produkte, vielleicht kann ich sie sogar vorerst die Gruppierung aufheben , damit ich das gruppieren kann. Also Control G. Das wird Winterzauber sein, so. Das nächste werden einfache T-Shirts sein. Und schließlich wird es bei letzterem um Artikel im Verkauf oder im Verkauf oder so ähnlich gehen. Also werde ich sie alle gruppieren. Und ich kann mich nicht erinnern, wie wir sie nennen, aber vielleicht Werbebereich oder Werbebereich, so etwas. Was ich jetzt für diesen tun werde ist, Interaktion hinzuzufügen, oder ich kann einen neuen Status hinzufügen, der mit der Maus schwebt, z. B. innerhalb des Mauszeigers kann ich ihn öffnen und sicherstellen, er in das Eigenschaftenfenster wechselt. Was Sie also tun können, ist mit diesen herumzuspielen. Sie können Schatten, Ränder und ähnliches einbeziehen . Aber alles, was mich interessiert, ist das. Hier. Ich werde Loops vorstellen. Wählen Sie jedoch zuerst den Mauszeiger aus. Hier werde ich etwas mehr Opazität auf etwas wie, ich weiß nicht ob 50, einführen . Da haben wir es und schalten es auf das Normale um. Wählen Sie dann dieses aus. Einfache T-Shirts. Ich wähle Mauszeiger aus. Und darin wähle ich den Mauszeiger aus und stelle es auf 50 Prozent um. Stellen Sie sicher, dass Sie immer zum Normalzustand zurückkehren, schließen Sie es. Und schließlich haben wir die Verkaufsoption. Also wähle ich dieses Rechteck aus, bewege den Mauszeiger und stelle sicher, dass du es auf 50 Prozent änderst. Sie können die Farbe natürlich ändern, wenn Sie möchten. Wir können also diese Symbolfarbe wählen, z. B. kann das unsere Mauszeigerfarbe sein. Gehen Sie zurück zur Normalität, wählen Sie auch diese aus wechseln Sie zum Mauszeiger, dann können wir diese 40-Symbolfarbe auswählen. Und stellen wir einfach sicher , dass wir das normal gelassen haben. Da haben wir es. Wählen Sie dieses Symbol erneut aus und wählen Sie den Farbwechsel des Mauszeigersymbols , um auf normal zu wechseln. Da haben wir es. Und jetzt, wo das abgeschlossen ist, können wir eine kurze Vorschau machen. Sehen Sie, was wir bisher gemacht haben. Und sobald es geladen ist, können Sie dies mit diesen tun. Du kannst diese Pfeile ein bisschen springen lassen. Du kannst sie ein bisschen nach oben verschieben. Sie können hinzufügen, indem Sie unsere Boards verwenden, wie ich es Ihnen gerade gezeigt habe. Sie können dies als Mengenfeld hinzufügen. Dann kannst du verschiedene Sub-Art-Boards mit verschiedenen Folien, mit verschiedenen Produkten und ähnlichem verbinden mit verschiedenen Folien, . Vielleicht kannst du das wie beim Hover ändern. Aber du kannst sehen, wenn ich mit dem Mauszeiger darauf fahre, du kannst sehen, was sie machen. Und die Macht ist Zufall. Es funktioniert also gut. Aber du kannst es vielleicht auch auf diesen Bildern machen, du kannst sie ein wenig aufhellen. Wenn Sie also mit der Maus auf eines dieser Elemente fahren, wird es nur ein wenig vergrößert. Vielleicht könnte der Tod eine Sache sein, die man ausprobieren sollte. Vielleicht haben wir auf diesem Bild, das wir hier bereits ausgewählt haben, das Bild, wir haben die Maus über die Maus schweben lassen. Was wir tun können, ist verschiedene Interaktionen hinzuzufügen. Ich kann mein Ziel wählen. Also müsste ich diesen manuell auswählen. Es ist also Bild-PNG. Also können wir es vielleicht Mann, Model oder so nennen , nur damit wir es ein wenig unterscheiden können. Also versuchen wir es hier drinnen zu finden. Nein. Da haben wir es. Verrücktes Modell löst aus. Mal sehen, ersetzt durch Maus, Enter, Zoom. Dann können wir eine weitere Interaktion hinzufügen. Wenn wir zu den Seiten zurückkehren, gehen Sie zu den Produktdetails. Also statt Mauseingabe füge ich hinzu, klicke Seite, springe. Ich treffe mich, keine, getroffen. Okay, und los geht's. Jetzt haben wir zwei Interaktionen. Also lasst es uns schnell testen und sehen, was wir gemacht haben. Die Eingabetaste zeigt uns hoffentlich diesen Hover-Effekt. So. Sie können sehen, wie das aussieht. Es vergrößert sich also nur ein wenig. Wenn Sie darauf klicken, werden Sie immer noch zu dieser bestimmten Seite weitergeleitet, wenn Sie all diese Elemente haben , die wir gerade hinzugefügt und gerade bearbeitet haben. So einfach ist es also, damit zu arbeiten. Und du kannst sehen, dass es einfach zurückgeht. Es geht zurück in den ursprünglichen Zustand, in dem es war. Wenn Sie jedoch zur Eingabetaste gehen, können Sie auf Bearbeiten klicken. Und vielleicht, vielleicht können wir diese C-Befehle verschieben. Automatische Wiederherstellung. Ich denke, das wird gut funktionieren, weil die automatische Wiederherstellung es an die ursprüngliche Stelle zurückbringt, an der Sie aufgehört haben. Und es wird dir den ursprünglichen Ort zeigen und den du bearbeitet hast. Das ist also im Grunde alles, um unser Interaktionspanel zu überprüfen und was Sie mit Interaktionen machen können. Und im nächsten Video werden wir uns mit der Veröffentlichung unserer Prototypen befassen und wie wir sie in der Vorschau ansehen können. Welche Optionen haben wir in Mock plus rP? Also werde ich dich dort sehen. 22. Prototypen ansehen und veröffentlichen: Wenn du eine Vorschau deiner Prototypen innerhalb von more plus rP sehen möchtest , gibt es einige Optionen, die du ausprobieren kannst . Und wenn du diese Prototypen teilen und veröffentlichen möchtest , damit andere sehen können, welche nicht zu deinem Team gehören, gibt es auch einige Optionen. Also lass es mich dir zeigen. Wenn Sie direkt hierher gehen, haben Sie Ihren Vorschaumodus. Sie können also auf diesen Pfeil klicken, um von der Startseite oder von der aktuellen Seite aus zu beginnen. Wenn ich das auswähle, beginnt es auf der aktuellen Seite wir aufgehört haben. Und du kannst sehen, dass all unsere Interaktionen immer noch funktionieren, wie ich es dir im vorherigen Video gezeigt habe . Sie können dies aber auch auswählen , um von der Homepage aus zu starten. Was auch immer Sie als Ihre Homepage festlegen , es wird beginnen. Wenn Sie schließlich eine Vorschau anzeigen möchten, klicken Sie einfach auf diesen Pfeil. Anstelle des Premium-Modus haben wir jetzt auch einige Optionen. Hier können Sie also auswählen, wie das vergrößert werden soll. Sie können zu nass sitzen, Sie können auf den Bildschirm passen. Oregon passte in die Breite. Oder du zoomst hinein und 200 Prozent, oder du kannst damit machen, was du willst. Und jetzt haben wir die Vollbild-Option, was diese Option sein wird. Aber ich mag es nicht wirklich, weil ich eigentlich ein bisschen auf 100% hineinzoomen muss. Und dann muss ich in den Vollbildmodus gehen. Und das ist im Grunde das, was Ihre Benutzer als Vollbild-Website sehen werden . Offensichtlich habe ich ein etwas größeres Display, daher habe ich diese Ränder auf der linken und rechten Seite. Aber wenn Sie z.B. ein Laptop-Display haben , denn denken Sie daran, dass wir das mit einer Breite von 1.600 Pixeln gemacht haben . Es wird den Vollbildmodus einnehmen . Sie also einfach an diese Dinge Denken Sie also einfach an diese Dinge, wenn Sie nach draußen gehen möchten, Sie können einfach eine Vorschau anzeigen. Sie können sehen, dass dies zurückgeht , wenn ich darauf klicke , um zu dieser Seite zu gelangen. Effekt funktioniert jedoch. Also alles, was wir zuvor gemacht haben, funktioniert einwandfrei. Und wenn ich klicke , komme ich zurück zur Homepage. Wenn ich entkommen will, würde ich einfach Escape auf deiner Tastatur drücken und du wirst zurück hierher gebracht. Als nächstes haben wir diese Panels links und rechts. Sie können den Seitendarm ausblenden und es wird nicht angezeigt, wie viele Seiten Sie tatsächlich haben. Und Sie haben etwas mehr Platz, um den Prototyp zu erkunden. Und dann kannst du deine Notizen jetzt zeigen, wir haben hier keine Notizen hinzugefügt. Aber im Grunde kannst du rübergehen , um etwas zu notieren und zu sagen , zum Beispiel, wann es für das gesamte Projekt sein wird. In diesem Fall können Knoten etwa so aussehen: Magst du minimalistischen Stil und Farben? Sollte ich dem Design mehr Farben hinzufügen? Da hast du es. Sie können zweimal die Eingabetaste drücken und dann z. B. etwas eingeben wie Bitte senden Sie mir das Bild zurück. Wir haben über horizontale Linien gesprochen , bei denen sie diese Bilder vielleicht nicht geteilt haben, aber Sie können Strg S und dann Strg R oder Befehl R drücken wenn Sie sich in Google Chrome befinden um diese Seite zu aktualisieren. Und da hast du es. Sie haben Ihre Seitennotizen. Wenn Sie die Seitenknoten loswerden möchten, wählen Sie sie einfach hier aus. Sie können eines auswählen, z. B. also, drücken Sie die Rücktaste, um es zu entfernen. Oder Sie können eine andere Taste auswählen S drücken und Sie müssen hier erneut Strg R drücken, um die Seite zu aktualisieren und die Änderungen hier zu sehen. Wenn Sie nicht wollen, dass die Nase fällt weil wir im Moment keine Notizen haben. Sie können genau dort klicken, um es loszuwerden. Dann haben Sie Ihre Sharing-Optionen. Sie können also den Vorschau-Link teilen. Und Sie können wählen , ob Sie einige dieser Optionen einbeziehen oder entfernen möchten, je nachdem , an wen Sie sie senden. Wenn es sich um einen Kunden handelt, z. B. möchten Sie, dass er alle Optionen sehen kann . Wenn es jedoch einige Benutzer gibt, möchten Sie möglicherweise einige Optionen ausblenden, z. B. Bereiche verlinken. Sie können die Option „Klickbereich anzeigen“ aktivieren oder deaktivieren. Und das ist nützlich, weil Sie möchten, dass sie entweder auf den Link klicken oder selbst herausfinden können auf den Link klicken oder selbst herausfinden , wo sich die Links befinden. Sie können sogar Passwörter festlegen, wenn Sie Ihre Designs und Ihre Prototypen schützen möchten . Und Sie möchten nicht, dass jeder darauf zugreift, sondern nur bestimmte Personen. Sobald Sie bereit sind, können Sie auf Kopieren klicken und ihnen diesen Link senden, damit sie darauf zugreifen können. Einige Optionen, die Sie haben, sind auch diese. Im Grunde genommen, worüber wir gerade gesprochen haben, Sie können den Linkbereich anzeigen, Sie können den Hover-Effekt einblenden, Sie können diese Dinge anzeigen oder Sie können sie ausblenden, je nachdem ob Sie einige Tests durchführen oder ob Sie bereits einige Tests durchgeführt haben. Also das war's im Grunde für die Premium und schließlich für die Veröffentlichung. Wenn Sie Ihren Prototyp veröffentlichen möchten, nehmen wir an, dass Sie bereit sind. Du bist zufrieden damit. Und sagen wir, dass ich diese nicht mag. Vielleicht möchte ich sie löschen , weil ich einfach die Dinge verwenden wollte , die ich erstellt habe. Und ich möchte nicht unbedingt , dass meine Kunden sehen, dass ich möglicherweise irgendeine Vorlage oder etwas Ähnliches verwendet. Also werde ich das einfach loswerden und ich habe einfach meine eigenen Designs , die gerade erstellt wurden. Eine schnelle Untersuchung ist gut, denn Sie möchten immer sicherstellen , dass, bevor wir damit fortfahren, ob alles funktioniert, auch hier alles richtig funktioniert. Wenn ich hier klicke, funktioniert es genau hier. Also alles ist wie es sollte, aber mach einfach eine kurze Überprüfung, bevor du tatsächlich auf Veröffentlichen klickst. Wenn Sie jedoch bereit sind, können Sie auf Veröffentlichen klicken und ein neues Projekt als Ziel auswählen oder auswählen. Also hier haben wir unser erstes Projekt, z.B. oder ein Projektbeispiel, aber ich möchte ein neues Projekt erstellen. Also stattdessen, was der Name eines UI-Kits ist. Ich nenne es Sharp Design , weil ich dort fündig geworden bin. Und ich kann alles als mein Standortblatt auswählen. Okay, im Shop entworfen, auf Okay klicken und es wird in der Mock Plus Cloud veröffentlicht . Und ich werde in der Lage sein , mit Entwicklern, mit Teamkollegen oder mit Interessenvertretern an diesem Projekt zusammenzuarbeiten . Sie können das Projekt schließen oder es direkt hier ansehen. Und das wird es dir zeigen. Also hier haben wir Shopping-Web-UI-Kits. Wir haben View Details. Klicken wir auf Details anzeigen , um zu sehen, was wir haben. Wir haben also eine Homepage und wir haben Produktdetails, also haben wir Beschreibungen und Bewertungen als Unterartflächen darin. Also hier haben wir das für diesen speziellen Abschnitt , in dem Sie innerhalb von hier Notizen posten können, damit Ihre Kunden einige Notizen beantworten können. Also vielleicht kann ich, vielleicht möchte ich hier ein paar Kommentare hinzufügen. Mal sehen. Magst du die gelbe Farbe der Knöpfe? Und Sie können die Strg-Eingabetaste drücken, um diesen Kommentar zu senden. Und du kannst es als ungelöst ansehen oder du kannst es hier lösen. Du kannst es schließen, wenn es abgeschlossen ist und solche Sachen. Und Ihre Kunden werden in der Lage sein, dies in Echtzeit zu sehen und in Echtzeit zu antworten. Wenn sie also klicken, können sie hier eine Antwort posten. Sie können diese Antwort hier sehen. Benachrichtigung springt hier zurück und hat einfach eine schlimmste Lösung für dieses Problem hinzugefügt. Der Entwicklungsbereich wurde speziell für Entwickler entwickelt. Es ist ein Ort, an dem Entwickler alles bekommen , was sie benötigen, um so schnell wie möglich mit dem Codieren zu beginnen, wie die Spezifikationen, wie CSS-Code, wie Schnipsel für die Hex-Werte von Farben und vieles mehr. Wir haben also die Assets, Anmerkungen, den Link zum Designsystem, Wechsel zwischen Plattformen und Farben. Das alles bedeutet also, dass Sie, wenn Sie mit dem Schweben beginnen, die Abstände zwischen all Ihren Elementen sehen können, was offensichtlich sowohl für HTML als auch für CSS entscheidend ist. Aber nehmen wir an, ich möchte dieses Bild wählen. Ich kann den Code als CSS, Objective-C, Swift und Android bekommen . Ich kann die Abmessungen genau hier sehen. Also x, y, Positionen, Breite und Höhe, Radius und Opazität. So kann ich alles sehen, und es befindet sich alles in meinem Benutzerdefiniert. Sie können Web H5, also die Größe, iOS, Android und Benutzerdefiniert sehen. Und ich kann es in Pixeln machen. Ich kann hier benutzerdefinierte Einheiten erstellen, sodass ich zwischen Pixeln, Punkten, DP usw. wählen kann . Und passen Sie die Breite an, ich kann das bestätigen und es wird diese spezielle Änderung anwenden. So einfach ist es also, das einer näheren Cloud zu teilen. Sie können in den Präsentationsmodus wechseln, wenn Sie dieses Design Ihren Kunden präsentieren möchten , z. B. den Stakeholdern oder Projektinhabern oder wem auch immer. Und dann können Sie zwischen diesen beiden Projekten wählen. Sie können also von der Homepage zu den Produktdetails gehen und im Grunde in Echtzeit mit ihnen arbeiten. Und sie werden verstehen können , was du getan hast. Und hier siehst du ausgewählte und hervorgehobene Bereiche, in denen sie tatsächlich klicken können. Sie können sehen, wie es sich in Echtzeit ändert. Also funktioniert alles wie es sollte. Und Sie können diese Bereiche genau hier sehen, genau hier. Also alles funktioniert wie es sollte. Und das ist die Veröffentlichung der Projekte in mock plus r p. Im nächsten Video werde ich Ihnen erzählen, wie Sie Ihre Prototypen herunterladen. Warum ist es nützlich und wie wird es gemacht und wie sieht das alles aus? Also sehe ich dich dort. 23. Prototypen herunterladen: Manchmal möchtest du deine Prototypen von Mach plus rP herunterladen , sie mit Teamkollegen und Kunden teilen und willst sie noch nicht hochladen und veröffentlichen. Vielleicht stehst du unter NDA. Vielleicht hast du keinen Internetzugang. Vielleicht reist du irgendwohin und möchtest genau diese Prototypen haben. Denken Sie an sie, um einige Notizen, die Sie haben, zu überprüfen. All diese verschiedenen Szenarien und Todesfälle, bei denen sich die Download-Option als nützlich erweist. Lass es mich dir zeigen. Also hier ist es, ganz oben, Sie haben diese Download-Option. Sie können also das Offline-Prototyp-Präsentationspaket herunterladen . Und das sind die wichtigsten Sätze hier, Präsentationspaket, das wird für Präsentationen verwendet. Also, wenn Sie das offline präsentieren möchten, wenn Sie unterwegs sind, vielleicht sind Sie auf Ihrem Laptop, vielleicht sind Sie auf Reisen, vielleicht gehen Sie zum Geschäft oder zu Ihren Kunden. Es gibt verschiedene Optionen und Szenarien, in denen Sie so etwas verwenden können. Es ist sehr wichtig, dies zu tun , da Sie immer ein Backup haben möchten. Es ist toll, es in der Cloud zu haben, aber manchmal haben die Leute möglicherweise keinen Zugang zum Internet. Vielleicht bist du einfach da. Warum sollten Sie sie also in die Cloud bringen, wenn Sie die Option an Ihrem Standort verfügbar haben , z. B. möchten Sie sie vielleicht aufgrund der NDAs intern teilen , wie gesagt. Es gibt also wirklich wenige Szenarien, in denen Sie so etwas verwenden können , und es ist wirklich nützlich. Alles was Sie tun müssen, ist hier zu klicken. Es wird dir einen Seitenbereich zeigen. Ich wähle die Farbpalette aus und wähle meinen Wunschladen aus, sodass du das Häkchen entfernen kannst, was du tun möchtest. Ich möchte beide erkunden und ausnutzen, damit wir einfach alle auswählen können. Sie können sehen, dass zwei von ihnen ausgewählt sind. Und Sie können den Seitenbereich alle sehen, weil ich zwei Seiten in meinem Ordner habe. Sie können das Seitenfenster anzeigen, Sie können die Nordseite anzeigen und die Werkzeugleiste anzeigen. Sie können Links zu all diesen Einstellungen anzeigen , über die wir gesprochen haben, und darauf klicken. Okay, sobald Sie zum Herunterladen bereit sind, wird das Herunterladen eine Weile dauern. Und abhängig von Ihrer Maschine, abhängig von Ihrem Projekt. Wenn Sie also z.B. Ihre Bilder optimiert haben, wird es etwas länger dauern. Wenn Sie verschiedene Seiten verwendet haben, wird es etwas länger dauern. Aber in diesem Fall wurde es, wie Sie sehen können, sehr schnell exportiert. Also lass mich es einfach in einen Ordner legen. Lassen Sie mich nun den Ordner zeigen, wie er aussieht. Da haben wir es also. Wir haben diese Option für eine Zip-Datei, klicken Sie mit der rechten Maustaste. Und ich werde hier zwei herausnehmen und das verstecken , nur damit du es ein bisschen besser sehen kannst. Da haben wir es. Und es hat diese Assets solide extrahiert und diese Zip-Datei entfernt. Eigentlich. Werde es los, indem du auf Löschen klickst. Da haben wir es. Und hier haben wir all diese Assets, die standardmäßig für mehrere SRP enthalten sind . Dann haben wir die Datenoptionen, das sind alle Bilder , die darin enthalten sind. Und natürlich ist es wirklich wichtig, dass Sie Ihre Ebenen benennen. Andernfalls werden Sie am Ende zu solchen Ergebnissen kommen. Aber im Grunde exportiert es sie einfach wie Platzhalterdateien, wenn Sie dies tatsächlich mit Ihren Entwicklern teilen. Die Ebenennamen, die Sie gepostet haben, werden beibehalten. Schließlich haben wir die Indexseite, doppelklicken Sie darauf und sie wird als neue Seite geöffnet und Sie können sehen, was Ihre Benutzer in einem , sagen wir, Präsentationspaket sehen werden , das Sie ihnen zeigen möchten. Sie haben also all diese Optionen , über die wir bereits gesprochen haben. Wenn Sie möchten, können Sie hier einige Knoten hinzufügen. Sie können diese Panels ausblenden. Sie können diese Panels anzeigen. Du kannst tun, was du willst und lass uns sie einfach ein letztes Mal erkunden. Da hast du es. Es hat uns auf diese Seite geführt. Hover-Effekte funktionieren immer noch. Das funktioniert immer noch. Also alles ist so, wie es hier war, aber es ist nur eine tragbare und, sagen wir, Version, bei der Sie es überall hin mitnehmen können , weil Sie es auf Ihrem Computer gespeichert haben. Und deshalb ist das Herunterladen Prototypen eine so coole Option. Ich werde es mögen und ich empfehle euch, es die ganze Zeit zu benutzen. Scheint so, als ob es mir auch geht. 24. Unterteilung des Kursprojekts: In diesem Video werden wir einen kurzen Überblick über das Kursprojekt geben. Und das mache ich für jedes einzelne meiner Projekte. Wir werden einfach keine tieferen Details wie z. B. ein Design-Briefing oder einen Projektvorschlag aufnehmen tieferen Details wie z. B. ein . Ich gehe davon aus, dass diese bereits erstellt wurden , da dies das Projekt ist , das nicht wirklich existiert. Aber ich möchte Sie trotzdem zum gesamten Designprozess mitnehmen, den ich gerne verwende , wenn ich meine Projekte entwerfe, sowohl Websites als auch mobile Apps. Zunächst beginnen wir mit einigen Aufgabenabläufen oder mit einigen Flussdiagrammen, auch immer Sie sie nennen und strukturieren möchten. Ich werde Ihnen nur zeigen, wie die Dinge auf der Seite selbst strukturiert sein werden. Mit einigen grundlegenden Informationen werden wir dann zu Wireframes übergehen. Wir werden nur einige Elemente auf der Seite platzieren und nur einige grundlegende Elementstrukturen in unseren Designs erstellen. Danach werden wir mit den Designs fortfahren. Wir nehmen diese Wireframes und verwandeln sie in Designs, indem wir Farbe hinzufügen, indem wir verschiedene Bilder hinzufügen, indem wir Struktur hinzufügen, indem wir ihnen echten Text hinzufügen. Und schließlich werden wir unserem Design einige Interaktionen und Animationen hinzufügen, um es zum Leben zu erwecken und damit es ein bisschen besser zur Geltung kommt als am Ende. Ich werde Ihnen zeigen, wie Sie dieses Design mit Ihren Teamkollegen, Ihren Kunden und Entwicklern teilen dieses Design mit Ihren Teamkollegen, können. Und schließlich, wie man es als Prototyp exportiert , den Sie dann ohne Internet überall hin mitnehmen und auf jedem Gerät öffnen können. Also lasst uns anfangen. Im nächsten Video werden wir einige kurze Aufgabenabläufe erstellen, um zu beschreiben, worum es auf unserer Seite geht. Also werde ich dich dort sehen. 25. Flowcharts: In diesem Video werden wir einige schnelle Flussdiagramme für unsere Projekte erstellen . Also lasst uns anfangen. Also hier sind wir in Mock plus rP, und ich werde sofort ein neues Projekt erstellen. Und ich werde 1920er 1080 verwenden. Das ist in Ordnung, da dies die VR-Website sein wird. So werde ich es nennen. Klicken Sie auf OK und es öffnet sich ein neuer Tab. Ich werde keine Vorlagen verwenden, weil ich sie von Grund auf neu erstellen möchte. Und das Wichtigste zuerst, bevor wir weitermachen, lassen Sie uns schnell einige Einstellungen einrichten . Lassen Sie uns also mit den Layouteinstellungen fortfahren. Ich werde 12 Spalten verwenden. Für die Spaltenbreite. Was ich tun kann, ist so etwas wie 82 zu verwenden. Die Rinnenbreite kann vielleicht etwas kleiner sein, wie 60 oder so. Los geht's, aber lass uns versuchen, uns in der Mitte zu treffen. Also 8.080,80, ich denke, das wird gut funktionieren. Und diese Reihen werden okay sein. Farben. Vielleicht können wir mit so etwas wie 40 anfangen, so etwas. Das ist gut. Und wir brauchen vorerst keine Zeilen. Ich werde das einfach benutzen. Also mal sehen, vielleicht 20 Pixel versetzt, aber nicht von der Mitte aus. Draußen ist die Dachrinne. So etwas wie Schulden. Mal sehen, vielleicht ein-zwanzig. Da hast du es. Aber ich mag es nicht wirklich. Also lass uns noch einmal mit einem T beginnen. Also wir Views, zeigen Layout. Da haben wir es. Das ist also unser Layout. Dies wird das automatische Layout für diese Seite sein. Also zuerst, lass es uns schnell verstecken. Also Views, weil ich das nicht so schnell sehen will. Also alt plus l werden wir es verstecken. Klicken Sie auf Alt plus l, um es schnell auszublenden. Und ich gehe auf die Seite, und diese Seite werde ich tatsächlich umbenennen. Mal sehen, wenn es eine neue Seite erstellt , wird mich das runterholen. Da haben wir es. Also diese erste Seite werde ich so in ein Flussdiagramm umbenennen. Dann benenne ich die zweite Seite in Wireframe um. dritte Seite wird unser Design sein. Da haben wir es. Sie sind also alle 1920 mal 1080, weil wir sie so eingestellt haben. Und du kannst sehen, dass es genau hier ist. Und lassen Sie uns zu unserem Flussdiagramm zurückkehren denn fangen wir an, einige Elemente zu legen. Was die Komponenten angeht, alles, was ich hier tun muss , ist, eine dieser Formen zu verwenden. Also vielleicht dieser hier in dieser Form. Lass es uns ein bisschen ausdehnen. Ich doppelklicke hinein und tippe so etwas wie ein Heldenbild ein. Da haben wir es. Und ich werde diesen Text so vergrößern , dass er vielleicht 30 oder so ist. Da haben wir es. Nur damit wir ein bisschen mehr Platz haben während wir hier arbeiten. Vielleicht etwas Kleineres, wie 20, nur damit wir sehen können, womit wir arbeiten. Lassen Sie uns das jetzt zu Roboto ändern, denke ich, und es mutig machen, einfach so. Also hier drinnen können wir das vielleicht ändern und eine andere Farbe verwenden. Ich habe also schon eine Farbe auf meinem Desktop vorbereitet, die eine schöne blaue Farbe ist. Und der Text wird in diesem Fall reinweiß sein. Und lassen Sie uns diesen Kühnheit loswerden. Wir brauchen es nicht. Endlich werde ich die Grenze loswerden. Und in diesem Fall sind wir bereit zu gehen. Also, was ich hier tun muss , ist, zum Markup zu gehen, ein paar Pfeile hier hinein zu ziehen und es zu platzieren, sagen wir, ungefähr 20 von hier aus. Von hier an werde ich also die Breite auf fünf erhöhen. Vielleicht nicht so groß. Vielleicht drei, vielleicht zwei. Eigentlich. Da haben wir es. Also habe ich es einfach ein bisschen erweitert , damit wir es ein bisschen besser sehen können. Was ich tun werde, ist das zu duplizieren und es hier zu positionieren. Dann gehen wir vom Hero Image zum Abschnitt Erkunden. Und in diesem Erkundungsbereich geben wir nur einige Informationen darüber, was Sie mit dieser VR erkunden können. Nun zu dieser ersten Form werde ich sie tatsächlich ändern. Also ändern wir es so, dass es die Einstiegspunkte sind, so etwas, denke ich, funktioniert. Nun. Lassen Sie uns das von dieser Seite aus etwas eingrenzen. Wählen wir sie alle aus und bewegen sie in etwa so. Dann gehen wir vom Erkundungsbereich zum nächsten Abschnitt über , der Möglichkeiten sein wird. Weil wir den Leuten zeigen wollen, was möglich ist , wenn sie dieses VR-Headset gekauft haben , also werden wir im nächsten Abschnitt zum Spielen und Spielen übergehen. Und ich möchte diesen Abschnitt hervorheben, also werde ich eine andere Farbe verwenden. Ich habe diese Farbe bereits so vorbereitet, weil ich möchte dass Gaming ein herausragendes Merkmal dieser Website ist, so etwas. Weil Spielen in der Welt, in der wir uns gerade befinden, wirklich von Vorteil ist in der Welt, in der wir uns gerade befinden, wirklich von Vorteil . Hier steckt das meiste Geld tatsächlich in diesen Spielkram. Also positionieren wir es auf 20. Da haben wir es. Und ich werde zu einigen anderen Abschnitten übergehen. Nun kann dieser Abschnitt z. B. ein Videobereich sein . Und in diesem Videobereich können wir vielleicht erklären, wofür die VR am besten geeignet ist, wie sie verwendet wird oder so. Dann lass mich das duplizieren. Positionierung hier. Duplizieren Sie dies unter dem Videobereich. Vielleicht können wir einige Funktionen oder Elemente erkunden. Also VR-Headsets. Also vielleicht können die Leute sie kaufen oder so. Und zum Schluss wollen wir uns damit befassen. Drehen Sie es um und genießen Sie es. Damit steigt es hier auf 20. Da haben wir es. Strg D auf diesem, positioniere es genau hier. Und vielleicht können wir ein paar Testimonials eintippen . Da haben wir es. Und lassen Sie uns diesen Pfeil noch einmal duplizieren. Also möchte ich einfach eine Art geschlossenen Kreislauf erstellen. Also möchte ich z.B. meinen Kunden zeigen , wie das funktionieren wird. Schauen wir uns also den Promo-Bereich an, so etwas. Da haben wir es. Was wir tun können, ist vielleicht diesen Pfeil zu duplizieren und vielleicht ein bisschen mit dieser Form herumzuspielen. Also am Ende, lass uns gleich hier sehen, werde ich dieses Steuerelement D verwenden, um es zu duplizieren, und es dann so positionieren, dass es ungefähr hier ist. Der Start wird ohne Gruppen sein. Vielleicht sollte ich so auf die andere Seite wechseln. Also sollte der Start keiner sein. Da haben wir es. Und ich möchte das ein bisschen abschwächen. Dann wird das Ende so ablaufen. Da haben wir es. Und ich werde diesen duplizieren. Stellen Sie sicher, dass es ungefähr in der Mitte ist und stellen Sie sicher, dass es 20 ist, einfach so. Im Folgenden werden wir also so etwas wie scharfes Zubehör sagen . Weil es viele davon gibt. Und lassen Sie mich eines davon duplizieren, vielleicht dieses. Und positioniere es genau hier, wo 20 steht. Da haben wir es. Und duplizieren Sie diesen noch einmal, so. Und ich werde etwas wie Final Prompt Section oder World of VR sagen . Weil es beschreiben wird, was die Welt von uns eigentlich ist. Und schließlich haben wir das Ende der Seite erreicht. Also kann ich das noch einmal duplizieren Control. Hoppla. Das nicht. Positioniere es hier, sodass es 20 ist. Das gilt auch für B2C. Und das wird unsere Seitenfußzeile sein. Da haben wir es. Vielleicht kann ich es nennen und verschiedene Variationen geben . Also dieser erste kann so etwas wie, ich weiß nicht, diese Farbe sein. letzte kann diese Farbe haben. Oder noch besser, vielleicht können wir etwas anderes verwenden. Für diesen ersten werde ich also eine dunklere Farbe wie diese verwenden. Unsere Eingangs- und Ausgangspunkte können also diese dunklen Farben haben. Und für all diese anderen Farben können wir diese Blautöne und Blautöne und solche Dinge verwenden . Vielleicht können wir das ein bisschen nach unten verschieben und diesen Pfeil einfach so verlängern, dass er ungefähr so aussieht. Das ist also nur mein Ansatz und wie ich gerne Flussdiagramme erstelle. kannst du weiter machen. Jede Art von verschiedenen Techniken sind Methoden , für die Sie sich entscheiden. Und es gibt noch eine weitere tolle Funktion anstelle von Mock plus rP , den Connect-Modus, mit dem Sie diese Flussdiagramme noch schneller erstellen können . Lassen Sie mich zeigen, wie es funktioniert. Zuallererst werde ich das nicht löschen, da dies, wie gesagt, nur mein Ansatz ist. Ich dupliziere diese Zeichenfläche mit Control oder Command D. Und dann werde ich diesen Pfeil und diesen Pfeil und diesen Pfeil entfernen , z. B. und fahre einfach mit dem Löschen dieser Pfeile fort. Und dann wähle ich diese aus , um sie aus dem Weg zu räumen, und wähle auch diese aus, nur um mir etwas mehr Platz zu geben. Also genauso wie wir es hier gemacht haben. Nehmen wir an, das ist unser Heldenbild beendet. Wir beginnen von hier aus. Um in den Verbindungsmodus zu gelangen, klicken Sie einfach hier oder verwenden Sie Alt C und klicken Sie dort. Und dann kannst du einfach aus einer der Ecken ziehen, z. B. dieser, und loslassen. Dann haben Sie die Möglichkeit, jede Art dieser Formen zu erstellen , die Sie möchten, z. B. verwenden wir diese. Lassen Sie mich ein bisschen hineinzoomen. Und von hier aus doppelklicke ich und tippe das ein, weil das unser nächster Schritt ist. Stellen wir uns also vor, dass wir es überhaupt nicht erstellt haben. Also Abschnitt erkunden. Da gehen wir und klicken irgendwo draußen. Um nun auf diesen zu klicken, lassen Sie uns sehen, 28793. Ich werde auf diesen klicken. Also 28793, so etwas. Da haben wir es. Und wenn Sie es nach oben bewegen, können Sie sehen, dass der Pfeil dynamisch generiert wird , was erstaunlich ist. Und es wird Ihnen nur ein bisschen mehr Präzision bei Ihren Designs und Ihrer Auswahl geben. Lassen Sie mich also weitermachen und diese Farbe kopieren. Lassen Sie mich es hier auf die Füllung anwenden. Lassen Sie mich die Textfarbe für den Text auswählen, der weiß sein soll , und los geht's mit Roboto. Lass uns mit 20 beginnen. Also um diese Abschnitte später nachzuahmen. Was Sie als Nächstes tun können ist, einfach dieses auszuwählen und Strg D zu drücken, um es zu duplizieren. Wenn Sie sich am Solver befinden, klicken Sie außerhalb des und klicken Sie einfach darauf und verbinden Sie diese beiden Punkte. Nun zu dem nächsten Punkt, du kannst so etwas wie Möglichkeiten sagen. Und dann kannst du darauf klicken und dann ziehen, um es zu verkleinern, z. B. dann war das Spielen als nächstes dran. Was wir in diesem Fall tun können, ist, wenn ich diese beiden auswähle und sie verschiebe, können Sie sehen, wie sich die Pfeile dynamisch bewegen. Dann können wir hier vielleicht ein bisschen abbiegen und dann noch einmal Strg D drücken und hier Gaming eingeben. Da haben wir es. Aber ich werde diese goldene Farbe einfach so verwenden und sie dann hier einfügen. Was das Gaming angeht, was ich tun kann, ist ich diese beiden hier verbinden kann, oder ich kann sie genau hier verbinden und sie dann einfach hier positionieren, und sie dann einfach hier positionieren sodass Sie sehen können, wie dynamisch sie und Sie können sie verschieben und organisieren, wie Sie möchten. Und diese Pfeile werden folgen. Wenn ich nicht zufrieden bin, kann ich immer ein paar Mal rückgängig machen und dann wieder hierher zurückkehren. Und wenn wir dann eine Verbindung zum nächsten Abschnitt herstellen möchten , kann ich Strg D drücken , z. B. hier. Dann sollte es Videobereich heißen, so. Und dann verbinde einfach diesen und diesen. Dann kannst du von hier aus nach hier gehen, z.B. von hier aus kannst du bis hier gehen, sagen wir, von hier aus kannst du hier hingehen und du kannst sehen, wie schnell sich das verzweigen und auf verschiedene Arten und Formen und Größen anpassen kann . Sie können also mit diesem fantastischen Verbindungsmodus alle möglichen komplizierten Layouts erstellen mit diesem fantastischen Verbindungsmodus alle möglichen komplizierten Layouts diesem fantastischen Verbindungsmodus , um ihn zu beenden. Klicken Sie einfach hier. Und dann werden Sie mit all diesen Pfeilen und ihrer Positionierung zurückbleiben . Und du kannst sehen, dass es immer noch dynamisch ist, obwohl wir den Connect-Modus verlassen haben und was auch immer er versucht hat , anzupassen und zu ändern, die Pfeile werden folgen. Nur noch einmal eine kurze Anmerkung, das ist ein viel besserer Ansatz als mein Ansatz, aber ich verwende meinen Ansatz immer noch gerne, weil ich ihn seit Jahren verwende und einfach daran gewöhnt bin, aber achte darauf, den Kinect-Modus zu verwenden. Es ist eine viel schnellere Methode, diese Flussdiagramme zu erstellen, insbesondere wenn Sie mehrere verschiedene Seiten haben und an einem riesigen Projekt arbeiten. Und Sie müssen diese seiten - und plattformübergreifenden Layouts, Bildschirme und verschiedene Größen für Ihre Zeichenflächen miteinander verbinden - und plattformübergreifenden Layouts, . Das ist also eine viel bessere Methode , dies im Verbindungsmodus zu tun. Aber wie gesagt, ich klicke hier auf Löschen. Wir werden diesen Ansatz in dieser Methode verwenden, die ich Ihnen bereits gezeigt habe. Denn wie gesagt, ich bin es einfach gewohnt. Offensichtlich eignen sich diese Flussdiagramme besser, wenn Sie mehrere Seiten haben und wenn Sie zwischen Seiten wechseln , wenn Sie mehrere Bildschirme haben. Aber natürlich können Sie hier sehen, wie einfach sie einzurichten sind , sodass Sie Ihren Seiteninhalt im Voraus planen können , bevor wir mit Wireframes und Designs fortfahren . Und verschwenden Sie keine Zeit, wenn Sie erst einmal zum kreativen Teil Ihres Designs gekommen sind. im nächsten Video über die Erstellung sprechen, werden wir uns mit einigen Wireframes befassen. Ich werde Ihnen zeigen, wie Sie diese Wireframes einrichten und wie Sie sich auf dieses Layout vorbereiten , was enthalten und was nicht. Also sehe ich dich dort. 26. Drahtmodell: Wireframes sind ein wirklich wichtiger Bestandteil jedes Designprozesses, denn darin können Sie wirklich mit dem Layout experimentieren, sehen, wo die Positionierung verschiedener Elemente sein kann, wie Sie es anpassen, wie Sie es positionieren und in den ersten Phasen des Projekts damit machen können , was Sie wollen. Bevor wir mit der Entwurfsphase fortfahren , beim Wireframing darum, die Dinge schnell zu erledigen und von den Dingen fortzufahren. Und wenn etwas kaputt geht, lassen Sie es einfach stehen und fahren Sie einfach mit der nächsten Idee fort , denn das ist alles, was es ist. Ideengenerierungsprozess beim Wireframing, bevor wir mit dem endgültigen Design fortfahren. Gehen wir also zurück zu MA plus U/min. Lassen Sie mich Ihnen zeigen, wie Sie einige Wireframes erstellen. Also hier sind wir im Modus plus r p. Und ich wähle meine Wireframe-Seite aus. Denken Sie daran, dass 1920 x 1080 bereits eingerichtet ist. Und ich werde es um einiges erweitern weil wir ziemlich viel Inhalt hinzufügen werden. Als erstes möchte ich also auf Control L drücken. Okay, das Problem hier war, dass ich die ursprünglichen Werte nicht auf der ersten Seite festgelegt habe, bevor ich diese anderen Seiten erstellt habe , z. B. Wireframe und Design. Was Sie hier also tun müssen ist, wenn Sie Ihre erste Seite haben, sicherzustellen, dass Sie die gewünschten Werte festlegen und sie dann als Standard speichern und dann weitere Seiten erstellen. Es wird dann in all die anderen Bilder übersetzt , die Sie erstellt haben. Sie müssen dies jedoch auf der ersten Seite tun, die Sie erstellen und diese Werte dann standardmäßig speichern. Wir haben also 80, 80, 87. Lassen Sie uns das also schnell anpassen. Wir haben also 8.080.87, 80, 80, 80. Lass es uns versuchen und draußen Dachrinne machen. 80, 80, 87. Aber bevor wir weitere Einstellungen vornehmen, möchte ich sie nur kurz ändern. Also vielleicht möchte ich das auf vielleicht 20 oder vielleicht sogar etwas weniger eingrenzen , etwa zehn. Da haben wir es. Okay? Es kollidiert also nicht zu sehr mit unserem Design, was wir eigentlich nicht tun wollen. Als Erstes können wir also eine Art Heldenbereich erstellen . Um das zu tun. Sie können Rechtecke verwenden, Sie können Bilder verwenden, Sie können verwenden, was Sie wollen. Ich werde in diesem Fall das Bild verwenden. Also werde ich ein Bild dorthin ziehen und einige Werte festlegen. Also 1920 mal 1.000. Da haben wir es. Ich werde es so nach oben verschieben. Und darüber hinaus füge ich unser Rechteck hinzu. Also 1920er Jahre um 1.000. Also gleiche Abmessungen. Und ich werde es einfach oben anbringen und die Grenze loswerden. Komm gleich hier rein. Bild. Und ich nenne es z.B. Hero Image. Da haben wir es. Und das kann Hero Color Overlay sein. Da haben wir es. Jetzt füge ich hier ein weiteres Bild hinzu. Und ich werde dieses Bild Logo nennen. Da haben wir es. Und für das Logo selbst kann ich ihm einige Abmessungen von 106, Breite 56 geben , es z. B. an der Oberseite befestigen. Physizieren Sie es z. B. vielleicht 50 Pixel nach unten, so etwas, und positionieren Sie es ungefähr hier. Da haben wir es. Drücken Sie T auf meiner Tastatur und ich tippe so etwas wie Produkte ein. Da haben wir es. Und ich werde es so positionieren , dass es ungefähr hier ist. Dafür möchte ich in diesem Fall Roboto verwenden. Und ich nehme 18. Da haben wir es. Ich werde ein paar Duplikate machen. Also zuerst Kontrolle und D. Jetzt heißt dieser z.B. Partner. Der nächste wird Support heißen. Da haben wir es. Und ein letztes. Und es wird so etwas wie „Da haben wir es“ aussagen. Und jetzt muss ich sie nur noch gleichmäßig verteilen. Also werde ich das vielleicht genau hier bis zum Ende positionieren, das genau hier positionieren. Es ist also genau um die 60. Da haben wir es. Hoffentlich folgt das. Es. Tut. Das wird ebenfalls folgen. Das tut es. Was ich also tun kann, ist sie alle auszuwählen und Strg-G zu drücken, um sie in eine Gruppe einzufügen , die sie Navi-Elemente nennt. Platzieren Sie sie unter meinem Logo und stellen Sie sicher, dass sie zentriert sind Drücken Sie also Strg-G und ich nenne es vielleicht Top Nav. Und damit ist unsere Helden-Sektion fast fertig. Aber wir brauchen hier eine Art Farbüberlagerung. Also, was ich tun werde, ist die Farbe zu verwenden und sie genau hier zu platzieren. Da haben wir es. Und ich gehe direkt zu meinen Assets und wähle die Farbe ohne diese untere Farbe weil ich die nicht brauche. Ich brauche nur diesen. Und ich nenne es z. B. etwas wie Dunkelgrau oder Main Dark. Dark, so etwas. Da haben wir es. Und in diesem Fall möchte ich sicherstellen, dass mein Text komplett weiß ist. Also gehe ich weiter bis hierher. Vollständig weiß. Aber wählen wir einfach die Textelemente in der Art Bordeaux aus, komplett weiß. Ja. Okay. Ich gehe zur Farbe über, wähle eine von ihnen aus, es spielt keine Rolle. weiß. Los geht's und wählen einen von ihnen aus. Und ich werde sie zu meinen Texten hinzufügen , weil ich das in meinem gesamten Design verwenden werde. Gehen wir zum Kompost und fügen wir ihrem Basistext Text hinzu. Und ich werde es hier grob formulieren. Dann ziehe ich es raus oder Control X, um es draußen auszuschneiden und dann hier ein . Dann kann ich es nach oben positionieren. Und wenn es an die Spitze gesprungen ist, kann ich in diesem Fall einige größere Texte erstellen. Also werde ich Roboto noch einmal verwenden, aber ich nehme so etwas wie 70. Da haben wir es. Achte darauf, dass es zentriert ist, richte es aus, achte darauf, dass es etwas Großes ist. Und ich werde sagen, dass so etwas wie der Titel hier steht. Da haben wir es. Und ich werde, wie gesagt, sicherstellen, dass es mittig ausgerichtet ist, dass es zentriert ist. Da haben wir es. Und ich kann es direkt darunter hier positionieren. Und dann werde ich mutig. Da haben wir es. Gehe zurück zu meinem Vermögen und füge es als meinen Text hinzu. Dann werde ich es duplizieren, genau hier positionieren und ich werde so etwas wie deins anpassen. Da haben wir es. Aber stattdessen nehme ich 18. 18 wird für diesen speziellen Fall gut funktionieren , da ich eine Schaltfläche erstellen muss damit ich die Button-Komponente verwenden kann, und ich werde sie tatsächlich mit der Schaltfläche hier platzieren. Mein Button wird also etwa 366 Breite 60 sein , ihr Ego. Und der Text darin wird, wie gesagt, 18 sein. Sie können es also auswählen. Geh mit 18, geh mit Roboto, geh mit Weiß. Also entscheide ich mich für Weiß. Und für die Farbe meines Buttons verwende ich die Farbe, verwende ich die ich bereits verwendet habe. Also genau hier, da haben wir es. Und wir werden diese Farbe hinzufügen und sie loswerden, weil wir sie nicht brauchen. Ich werde das benutzen und das wird unser Hauptblau genannt werden. Da haben wir es. Und hier werde ich einfach diesen Text verwenden. Doppelklicken Sie, passen Sie Ihre an. Da haben wir es. diesen los. Und für den Eckenradius Lassen Sie uns die Grenze loswerden. Für den Eckenradius nehmen wir etwas Großes wie Swanee. Mal sehen, wie das aussieht. Es sieht gut aus. Stellen Sie sicher, dass es in der Mitte ist, also stellen Sie sicher, dass es sich genau oder ungefähr hier befindet . Entschuldigung, da haben wir es. Das wird also unser Haupt-BTN sein. Und sofort werde ich vielleicht eine Komponente dafür erstellen. Also weiter mit der Maus, aber ich werde die Farbe ändern. Also vielleicht können wir damit weitermachen, lassen Sie uns das bedeuten Blau, Hauptblau. Mal sehen, was wir tun können. Komm rein, ändere es auf hier, los geht's. Das wird also unser Hauptblau sein. Und das wird unser Dunkelblau sein. Da hast du es. Für das Hauptblau wird es also innerhalb des Normalen liegen. Da haben wir es. Und wenn die Maus darüber schwebt, wird es dunkelblau sein. Also einfach so einfach. Gehen wir zurück zur Normalität. Lassen Sie uns kurz eine Vorschau anzeigen, um zu sehen, ob wir diese Änderung anwenden. Und du wirst sehen, los geht's. Es ist also schon da. Herrlich. Wenn wir also darauf zurückkommen und anfangen, einige dieser anderen Elemente zu entwerfen. Bevor wir weitermachen, möchte ich sicherstellen, dass Sie den Knopf hier platzieren. Da haben wir es. Und ich nenne das Hero Section. Jetzt wird der nächste Abschnitt unter meinem Heldenbereich mein Bild und etwas Text enthalten. Was ich an dieser Stelle also im Grunde tun werde , ist etwas Text zu verwenden. Da haben wir es. Und ich werde so etwas wie den Abschnittstitel sagen. Da haben wir es. Und ich werde sicherstellen, dass es linksbündig ist. Und dieses Mal nehme ich etwas niedrigeres, etwa 60. Und ich werde mich für diese dunkle Hauptfarbe entscheiden und sicherstellen, dass sie linksbündig ist. Noch einmal. Positionieren Sie es, bis es genau dort liegt, und drücken Sie D, um dies zu duplizieren. Und jetzt lass uns noch einmal mit etwas anderem anfangen. Lassen Sie uns dies zunächst als unseren Text hinzufügen. Dieser wird etwas anderes sein, z. B. 24 und die Farbe wird ein bisschen anders sein. Also werde ich diese Farbe hier machen und dann die Farbe hier auswählen. Nennen wir es den Absatz. Da haben wir es. Und dieser Absatz wird sich tatsächlich bis , sagen wir, eins zu eins erstrecken. So etwas. Das ist dieser 792. Da haben wir es. Und die Höhe wird 121 sein. Jetzt verwende ich meine eigenen Texte, aber wenn Sie Platzhaltertexte verwenden möchten, müssen wir nur rechten Maustaste auf diese Textkomponente klicken und auf Autofill klicken, um sie schnell mit automatischem Platzhaltertext auszufüllen . Und das wird der Abschnittsparagraph sein , der genau hier eingefügt wird. Da haben wir es also. Jetzt muss ich endlich ein Bild hinzufügen. Also gehe ich direkt zu den Komponenten, gehe zu Bild, strecke es schön positioniere es ungefähr hier. Es ist vorerst nicht wirklich wichtig. Und dann müssen wir den Knopf drücken, den wir haben. Also mach das auf. Standardgruppe, aber wir haben sie nicht als Komponente erstellt, also fügen wir sie gleich dort hinzu. Haupttaste auf Okay und öffnen Sie diese Standardgruppe. Hier haben wir den Hauptbutton, ziehen Sie ihn einfach und positionieren Sie ihn genau hier. Aus irgendeinem Grund taucht es einfach immer wieder in den Hauptheldenbereich auf. Lassen wir es also hinter uns und drücken Sie einfach Strg X, um das alles zu schließen. Da haben wir es. Es ist also genau hier positioniert. Abschnittsparagraph, Bild, Abschnittstitel. Da haben wir es. Und ich werde diese einfach gruppieren. Aber bevor ich das tue, möchte ich vielleicht etwas Abstand zwischen ihnen haben. Also vielleicht ist 48 eine gute Zahl. Also mal sehen, 58, 48, los geht's. Und das können auch 48 sein. Was ich also tun kann, ist diesen Qualitätsbereich auszuwählen , solche Inhalte. Und ich kann diesen gesamten Abschnitt als Abschnitt bezeichnen. Positioniere es unter meinem Heldenbereich. Und schauen wir mal nach der Distanzierung, was wir vielleicht tun können, ist, sie einfach beizubehalten. Lass es uns bei 100 belassen. Ich denke, das wird vorerst gut funktionieren. Und darin können wir diese beiden Elemente auswählen und nur sicherstellen, dass sie zentriert sind. Und da haben wir es. Darunter können wir nun einen anderen Abschnitt haben. Und ich werde einige dieser Elemente tatsächlich wiederverwenden. Aber bevor ich das tue, lassen Sie mich dieses auswählen und als meinen Text hinzufügen. Da haben wir es und gehen raus. Und was wir tun können, ist verschiedene Abschnitte zu erstellen. Lassen Sie uns also so oder so ein neues erstellen. Das heißt also unbegrenzte Möglichkeiten. Möglichkeiten, stellen Sie sicher, dass es zentriert ist und stellen Sie sicher, dass es dieses in der Mitte ist. Stellen Sie sicher, dass wir 100 Control D haben. Verwenden Sie jetzt diesen. Ich werde tatsächlich ein bisschen schneller fahren. Also werde ich diesen Inhalt tatsächlich einfügen , den ursprünglichen Inhalt. Und mal sehen, die Distanzierung kann etwa 40 betragen. Ich finde es ziemlich gut. Da haben wir es. Also hier haben wir 100. Darunter werden wir nun tatsächlich eine Art von Karten erstellen. Diese Karte kann sich also in einem Behälter befinden. Um den Container zu erstellen, können Sie ihn mit unserem Rechteck erstellen. Und es kann daran liegen dass es, sagen wir, vier von ihnen sein werden. Es kann etwa drei Spalten breit sein. Mal sehen, vielleicht können wir ihm so etwas wie 40, 87 für die Höhe oder so etwas geben. Schauen wir uns an, der Abstand zwischen ihm und den darüber liegenden Schichten kann etwa 100 betragen. Also, wenn ich 100 ausgewählt habe, los geht's. Und wir können den Eckradius hinzufügen. Also ohne Rand kann der Eckradius zehn sein. Da haben wir es. Und eine Sache, die ich vergessen habe zu erwähnen ist, dass wir die Farbe unserer Zeichenplatte auf eine andere Farbe einstellen können , weil sie im Moment nicht wirklich auffällt. Also werde ich diese Farbe so zusammenfügen. Und ich werde es hier auch zu meinen Farben hinzufügen. Aber ich werde es einfach schnell hier anwenden. Da haben wir es. Also fill, du kannst f b, f b, f b sehen. Und ich füge es zu meinen Farben hinzu, nenne es Zeichenflächenfarbe. Da haben wir es und werden diese Farbe einfach los. Jetzt verwende ich anstelle der Zeichenflächenfarbe Weiß, um das fortzusetzen, was wir zuvor gemacht haben. Ich glaube, ich brauche das nicht, um mutig zu sein. Also vielleicht kann ich es so einrichten. Da haben wir es. Und was ich tun kann, ist diesen Text tatsächlich zu verwenden. Also Control D, positioniere es ungefähr hier. Und ich kann einige Inhalte hinzufügen. Da haben wir es. Und vielleicht kann ich die Breite auf, sagen wir drei bis drei, so etwas einstellen . Ich kann es ungefähr hier an die Mitte meiner Karte anpassen . Und ich kann zu den Komponenten zurückkehren und ein neues Bild hinzufügen. Dieses Mal können wir uns für etwa einundzwanzig Breite 108 entscheiden , vielleicht so etwas in der Art. Positioniere es auf dem mittleren Steuerelement D. Und hier können wir einen neuen Textstil von 32 einrichten. Und ich kann es vielleicht Bildung nennen. Und dieses Mal kann es Bolt sein. Da haben wir es. Ich möchte ihm diese dunkle Hauptfarbe geben , um ihn zu unterscheiden. Nur eine Berührung. Und mal sehen, wir können 40 von jeder Seite machen. Sagen wir, ich finde das gut. Also lass uns sehen. Lassen Sie uns zunächst 58 von dieser oberen Kante aus betrachten. Also 58 und das können 40 weniger sein. So. Das können auch 40 weniger sein. Da haben wir es. Und dann können wir die Karte vielleicht ein bisschen verlängern, nur ein bisschen nach unten. Da haben wir es. Jetzt, wo wir unsere Karte haben, können wir diese aktuelle BG nennen. Da haben wir es. Und ich kann diese Elemente gruppieren. Das kann also ein Symbol sein, neue Fähigkeiten lernen, Bildung, Symbol sein. Da haben wir es. Das wird also unser Einkaufswagen sein. Und wir werden unsere Karten legen. Mal sehen, genau hier. Das wird also genau da sein. Da haben wir es. Das ist ein Raster von 100. Und jetzt muss ich nur diese Karte duplizieren und sie hier positionieren. Positioniere es hier und positioniere es dann endlich ungefähr hier. Jetzt wollen wir sehen, 369. Aus irgendeinem Grund fehlt uns hier eine Kolumne. 23 456-789-1011, 12 Spalten. Kehren wir also zu unseren Präferenzen zurück. Layouteinstellungen. Sie können 12 Spalten sehen, aber dieser Versatz bezieht sich auf die Mitte. Also können wir es vielleicht auf etwas niedrigeres setzen. Wissen Sie, lassen Sie uns draußen um oder 40 weitermachen. Lass uns bei Null bleiben. Da hast du es. Nur damit wir in diesem Fall etwas Abwechslung in unseren Inhalten haben können . Und ich möchte nicht zu viel Zeit verschwenden , denn am Ende des Tages ist das bei der Entwicklung nicht wirklich wichtig , weil die Entwickler es so oder so erstellen werden. Entweder du erstellst es so oder sie werden es später bearbeiten, wenn sie damit fertig sind. Also das Wichtigste zuerst, ich denke, das ist in Ordnung. Vielleicht kann das etwas verschoben werden. Vielleicht kann das etwas verschoben werden, um zu hören, dass alles andere einwandfrei funktioniert. Das letzte, was ich hinzufügen und ansprechen wollte, ist diese Karten etwas enger sein können, ungefähr so. Und so. Da haben wir es. Dann so. Und schließlich kontrolliere D, dupliziere es. Die Position ist genau hier. Da haben wir es, und das ist unsere Karte. Im Grunde wähle ich in dieser Phase dieses Steuerelement G aus, nenne es Möglichkeiten und organisiere es im Grunde direkt unter diesem Abschnitt. Das nächste Steuerelement D in diesem Abschnitt, ordne es unter den Möglichkeiten, halte meine Umschalttaste und den unteren Pfeil gedrückt, damit ich sie ein wenig an der Stelle bewegen kann . Und im Grunde möchte ich mit diesem Abschnitt nur die Position dieser Elemente ersetzen. Dieses Bild wird also genau hier angezeigt. Dieser Text wird grob umrissen, sagen wir hier, ich denke, wir werden das später skizzieren und das später sehen. Das wird einfach unser Spiel sein. Da haben wir es. Was wir für Spiele benötigen, ist dieses Video. Also werde ich einfach ein kurzes Bild erstellen. Also geh zurück zu hier, Bild ziehen und ablegen. Nun, dieses Bild wird ungefähr 16, 44, Breite 863 haben. Da haben wir es. Stellen Sie sicher, dass es in der Mitte ist. Und ich werde im Grunde ein Rechteck erstellen , das genau die gleichen Abmessungen wie dieses Bild hat. 16, 44 mit 863. Da haben wir es. War das das Bild hier? Das wird also Color Overlay sein. Wir werden dieselbe dunkle Hauptfarbe darauf auftragen. Und ich werde es auf vielleicht 60% senken oder so, das ist nicht wirklich wichtig. Das wird also unser Video oder Werbevideo sein. Da hast du es. So. Und zu guter Letzt brauchen wir noch ein paar Texte. Also drücke T und tippe ein. Sieh die Welt mit neuen Augen. Nun, dieser Text wird diesen riesigen Stil haben und sich in der Mitte dieses Elements befinden. Sie können all diese Elemente auswählen, sie als Werbung und Video bezeichnen, und sie ganz nach unten verschieben. Stellen Sie dies nun von hier aus auf 100 ein, z. B. oder natürlich können Sie es auf 150 einstellen und dies weiter anpassen. Ich werde das etwas später angehen, wenn wir tatsächlich alle unsere Inhalte fertig haben. Aber im Moment denke ich nur darüber nach , dieses Video abzuschneiden, weil ich nicht wirklich viele der verschiedenen Inhalte habe, die ich unten erstellen möchte. Vielleicht kann ich das einrichten, möglicherweise. Und dann kann ich vielleicht tatsächlich diesen gesamten Abschnitt duplizieren. Positionieren Sie es ganz runter auf, sagen wir 150, und bewegen Sie es ganz nach unten. Das kann topaktuell sein, so etwas. Und dann werde ich weitermachen und diese Karte loswerden. Sie alle mögen das. Und wenn ich den Text hineinkopieren lasse , geht das viel schneller, als wenn ich ihn tippe. Da haben wir es. Und ich werde genau hier drei verschiedene Karten erstellen . Also verwenden wir noch einmal r für Rechteck. Und lass uns mit so etwas beginnen. 246 Spalten Control D, Position eins hier. Und ich werde sie tatsächlich ein bisschen eingrenzen. Mal sehen, was wir mit diesem Layout machen können. Dieser erste kann etwa 618 groß sein oder so, aber lassen wir es vorerst so, wie es ist. Also hier haben wir ein Bild, also werde ich es ziehen und dort ablegen. Dieses Bild wird etwa 680 mal 386 groß sein . Da haben wir es. So nett, vergrößern. Herrlich. Und dann wähle ich dieses aus und ziehe mein Bild auch hier hinein. Dieses Bild wird ein bisschen kleiner sein. Also 146 Breite, zwei bis drei, z.B. so etwas. Da haben wir es. Und dann wird ein letztes Bild die folgenden Elemente abdecken. Also lass uns Drag & Drop ziehen. Und ich werde im Grunde die gleichen Abmessungen verwenden. Also 880 von 3198080 von 319, los geht's. Und positioniere es einfach genau dort. Ich werde hier natürlich etwas Text drin haben, also nenne ich es den Explorer für. Das wird der Name unseres Headsets sein. Und schauen wir uns die Größe an. Ja. Ich finde es ziemlich gut. Stellen Sie also sicher, dass es in der Mitte ist. Los geht's, ihre Steuerung D positionieren. Und ich werde ihr ein paar verschiedene Farben geben. Also dunkelblau, z.B. oder Hauptblau hier. Und ich werde ihm ein paar Texte geben, wie zum Beispiel deinen angepasst, z. B. vielleicht wollen wir das ein bisschen anpassen. Dann drücke ich Strg C, Control V. Um das zu duplizieren, positioniere ich es genau hier. Stellen Sie sicher, dass sie so nach links ausgerichtet sind . Dann tippe ich zB Controller ein. Da haben wir's, aber ich habe vergessen, es für den Text linksbündig zu machen . Das wird links liegen nicht die Kunden gehören Ihnen. Vielleicht kannst du so etwas wie erkunden jetzt sagen. Und diese beiden können Links sein. Jetzt kann ich das endlich noch einmal duplizieren und sie hier in der Mitte positionieren. In diesem ersten kann man Ideen bekommen, und im nächsten kann man sich inspirieren lassen. Los geht's und passen den Hintergrund dieses Bildes an. Mal sehen, es ist in diesem. Ich kann ihm die dunkelblaue Farbe geben, z. B. dieses Bild bleibt vorerst hier. Also im Grunde haben wir hier diese, diese Abschnitte. Und natürlich gehe ich einfach rein und zB Gruppe, diese Gruppe, diese Gruppe und diese, sodass wir drei verschiedene Gruppen haben. Das werden Ideen sein. Das wird Controller sein. Und das wird Explorer für dieses, das eigentliche Headset sein. Also werde ich ihm den Namen Tech geben. Los geht's, verschieben Sie das ein wenig nach unten und fahren Sie schließlich mit dem nächsten Abschnitt fort, Testimonials sein wird und derselbe sein wird wie dieser Abschnitt. Also schieb es einfach bis hier runter. Da haben wir es. Und ich werde ihm den Namen Testimonial geben . Da haben wir es. Wir werden es etwas später anpassen. Dann werden wir denselben Abschnitt mehr oder weniger hier positionieren lassen. Und ich werde ihm einen anderen Namen geben. Wie All-in-One-Handys. Wir werden hier einige Optionen haben. Da haben wir es. Und ich werde einfach das und das loswerden, auch das loswerden. Klicken Sie also mit der rechten Maustaste auf Gruppierung aufheben, und ich lasse das Bild einfach hier drin. Dieses Bild wird jetzt auch Explorer sein, denn das wird unser Geräte-Headset sein. Das Geräte-Headset kann also etwa 1190650 sein. Da haben wir es. Achte darauf, dass das in der Mitte ist. Herrlich. Und zum Schluss ziehen Sie einfach die Hauptschaltflächenkomponente, die wir zuvor erstellt haben , und positionieren Sie sie so, dass ich es nicht weiß. 80 vielleicht, so etwas. Da haben wir es. Stellen Sie einfach sicher, dass es sich unter unserem Bild befindet. Nun, das kann ein Headset sein. Herrlich. Und dann, zum Schluß, was wir unten haben , sind etwa drei Karten. Und wir werden diesen Abschnitt tatsächlich duplizieren. Lass uns sehen. Ja, ich kann diesen Abschnitt sogar duplizieren , weil er nur so etwas wie entfessle die Welt von Wir sind Technologie oder so etwas sagen wird so etwas wie entfessle die Welt von Wir sind Technologie oder so etwas sagen . Und lassen Sie mich das tatsächlich ein bisschen so verlängern . Zwischen diesem und diesem Abschnitt sollte ein weiterer Abschnitt liegen. Also lass es uns hier hinstellen. Entfessle. Da haben wir es. Und wie gesagt, wir werden die Fußzeile hier unten haben. Was wir also tun können, ist dieses Rechteck tatsächlich zu erstellen. Nutzen Sie unsere Position hier. Und ich werde diese dunkle Hauptfarbe verwenden. Und ich nenne es so etwas wie Fußzeile. Bg. Diese Abmessungen werden 1920er mal 740 sein und ein Wind, um die Grenze zu entfernen, wird sie bis zum unteren Rand brechen, so. Stellen Sie auf meinem Bild auf Kompost um. Und mal sehen, 1920 von 740. Also 1920 von 740. Da haben wir es. Stellen Sie sicher, dass es hier ist, dann ist es hier und stellen Sie sicher, dass Sie es an den Rücken schicken. Also bestellen An den Rücken schicken. Da haben wir es. Das werden wir auf vielleicht 50% reduzieren, nur damit wir sehen können, was sich dahinter befindet. Und eine andere Sache , die ich gerne tun würde ist einfach dasselbe Logo zu erstellen. Drücken Sie also bei diesem Strg C. Gehen Sie zurück zu hier, wo wir sind, Fußzeile ist G. Da haben wir es. Und ich werde diese im Grunde gruppieren, nenne es Fußzeile. In die Fußzeile werde ich das Logo einfügen. Also genau hier, klicken Sie mit der rechten Maustaste auf Bestellung. Ich weiß nicht, warum es mir das nicht zeigt, aber es ist wichtig. Also entferne die Gruppierung von Control G und nenne es Fußzeile. Da haben wir es. Also direkt darunter werden wir später etwas Text hinzufügen, damit werden wir später etwas Text hinzufügen ich z. B. T drücken und etwas Ähnliches eingeben kann . Schauen wir uns die Produkte an. Da haben wir es. Und für diese Produkttexte verwende ich eines meiner Assets, nämlich dieses 100-fache oder Control D. Und für diesen werde ich Partnerkontrolle D speichern . Das wird Support, Gruppen sein. Unterstützung. Und zu guter Letzt, zu diesem letzten Thema, da haben wir es. Jetzt, wo wir sie alle haben, wähle ich sie aus und verteile sie einfach ein wenig, positioniere sie in der Mitte und später an der Linie werde ich einige Elemente hinter den Kulissen hinzufügen. Aber im Grunde wird das wie Control D aussehen, duplizieren Sie es und fügen Sie dann so etwas wie Headsets hinzu. Aber ich möchte nicht, dass ihr euch langweilt, während ihr euch das anschaut. Stattdessen werden wir hier einen weiteren Abschnitt erstellen. Dazu benötigen wir also einen Abschnitt direkt über diesem Abschnitt. Und dieser Abschnitt wird so etwas wie, ich weiß nicht, vielleicht ja, mal sehen. Vielleicht können wir das erhöhen, nur so eine Berührung. Und über diesem Abschnitt können wir vielleicht so etwas wie scharfe Accessoires oder so etwas kreieren . Lassen Sie uns also gleich hier mit der Eingabe von T beginnen. Scharfes Zubehör. Da haben wir es. Nun, das können, ich weiß nicht, 32 sein. Warum wir dieses 32-Ding nicht geschaffen haben. 24, wo ist die 32? Das ist also 60. Wo war es? War, es, war es das? Nein. Das waren 32. In Ordnung, also genau hier erstellt. Da haben wir es. Und jetzt wähle ich die Schulden aus, verwandle sie in 32 Molkerei-Zielpositionen auf die sie hier links ausgerichtet sind, Control G. Und ich sage so etwas wie eine Tragetasche. Tragetasche Dieses nächste kann ein verlängertes Kabel sein. Und auf der nächsten Seite können Sie sich das gesamte Zubehör ansehen. Und vielleicht kann ich es in zwei Zeilen oder so unterteilen. Da haben wir es. Unter denen. Ich werde ein paar Bilder hinzufügen. Aber vorher kann ich tatsächlich einige Rechtecke erstellen, um sie in diese einzufügen, weil wir drei haben Vielleicht kann ich sie in vier verschiedene Gruppen einteilen. Also klicken Sie mit der rechten Maustaste und bestellen, in den Hintergrund senden. Da haben wir es. Das wird also genau hier sein. Lass mich diese eigentlich loswerden. Und lassen Sie mich tatsächlich einen erstellen. Und dann können wir es wie zuvor duplizieren. Also kann ich es vielleicht 40 von jeder Kante aus positionieren. So wie das. Und dann kann ich das duplizieren und den Preis hier angeben. Und für den Preis kann ich mich für diese kleinere Größe entscheiden . Und vielleicht kann das so etwas wie, ich weiß nicht, 98 oder so sein. 98$. Da haben wir es. 40. Und hier füge ich einfach ein kurzes Bild wie dieses hinzu. Und dieses Bild kann etwa 417 mal 417 sein. Da haben wir es. Nett und groß. Und mal sehen, die mündliche Karte selbst kann etwas größer sein. Also lass uns sehen. Nein, lass uns einfach dieses Bild einfügen. Also bestellen, nach hinten schicken. Da haben wir es. Rechtsklicken Sie auf Bestellung. Vorwärts bringen. Da hast du es. Es liegt also direkt unter unserem Text. Also werde ich es auswählen. Und bevor ich das mache, können wir das vielleicht drehen und einen Eckradius von 20 hinzufügen . Vielleicht die Grenze loswerden. Die Hintergrundfarbe ist weiß, was in Ordnung ist. Und das wird unser Shop BG oder Produkt sein. Also ein Produkt des Hintergrunds. Und ich werde tatsächlich all diese Artikel auswählen , 98 Control G. Und das wird unsere Produktkarte sein, vielleicht so etwas wie diese Produktkarte. Da haben wir es. Strg D, um es zu duplizieren, positioniere es genau hier. Strg D, um es zu duplizieren, positioniere es genau hier. Nun, das nächste kann, mal sehen, Extended Cable genannt werden . Vielleicht. Da haben wir es. Der Preis dafür kann eher bei 54 liegen. Da haben wir es. Und dann kann dieser letzte so etwas wie C sein Alles Zubehör so. Mein Englisch ist heute nicht wirklich gut. Da haben wir es. Und alles, was ich hier tun möchte, ist so etwas wie „Alles erkunden“ zu sagen . Und daneben möchte ich das Fehlersymbol hinzufügen können. Also mal sehen, dieser Pfeil wird gut funktionieren. So. Da haben wir es. Stellen Sie sicher, dass wir z. B. bei 20 sind und dieser Pfeil einfach weiß sein wird. Wir werden hinzufügen, was ist das? Weiß? Da haben wir es. Und das kann auch weiß sein. So weiß. Da haben wir es. Nein, keine Füllfarbe, aber die Textfarbe kann weiß sein. Da haben wir es. Das kann auch weiß sein. So. Und der Hintergrund kann zu Assets und zu Dark wechseln. Offensichtlich siehst du es nicht unter diesem Bild, aber es braucht dieses Bild nicht wirklich. Also werde ich es ganz loswerden. Und Accessoires einkaufen, ich werde es so bei 40 belassen und das ist auch bei 40. Und im Grunde genommen haben wir es. Wir haben weitergemacht und alles erledigt, was wir brauchen. Eine letzte Sache, die ich tun möchte, ist, das ein bisschen näher zu bringen , vielleicht an 60, vielleicht an 40. Wir können damit machen , was du willst. Und ich kann so etwas wie Accessoires sagen. Und lassen Sie uns sie schnell ein bisschen organisieren. Also wird es hier direkt darunter gehen. Dieser Abschnitt wird hier direkt weiter oben aufgeführt. Da haben wir es. Wenn wir also zu Unleash gehen, werden Fußzeile und Zubehör mehr als Unleash sein. Und natürlich sollten wir sie ein bisschen besser organisieren so etwas wie diesen Doppelklick machen und das ein wenig nach unten schieben. Also, wenn wir zu unseren Layouteinstellungen gehen und ich unsere Spalten hier ausschalte, okay? Und das haben wir bisher. Das ist also unser Design, das haben wir gerade erstellt, und das ist unser Wireframe. Sie können sehen, wie einfach das war, wie schnell das war. Natürlich habe ich 40 Minuten gebraucht, um es zu erstellen, aber der Designteil wird viel schneller sein, weil wir ihn ohne Kratzer erstellen werden. So kannst du sehen, wann es anfängt zu crawlen, alles ist nett auf der Seite angeordnet und alles kann wie vorgesehen funktionieren. Im nächsten Video werden wir uns also mit dem Design befassen. Also werde ich dich dort sehen. 27. Designerstellung: In dieser Lektion erstellen wir das Design und setzen diese Wireframes in ein Design um . Also, ohne weitere Umschweife, lasst uns anfangen. Also hier ist das Wireframe , das wir zuvor erstellt haben. Was ich tun kann, ist einfach alle meine Elemente auf der Seite auszuwählen . Drücken Sie Strg C, kehren Sie zu Seiten zurück, klicken Sie auf Design, zoomen Sie ganz heraus und erweitern Sie das Ganze bis hier, z. B. drücken Sie Strg V und es werden alle darin enthaltenen Elemente eingefügt. Lass diesen leeren Raum unten sein, da wir natürlich etwas später etwas Abstand nehmen werden. Also zuerst möchte ich hier eine echte Kopie hinzufügen. Also werde ich es hier einfügen und sicherstellen, dass es, sagen wir, 59, 60 oder so ähnlich ist. Da haben wir es. Und ich werde das hier reinschubsen. Dann wechsle zu den Ebenen und finde mein Heldenbild, das ist dieses Bild hier. Ich gehe zum Hochladen, klicke auf Hochladen und gehe dann zu meinem Desktop. Mal sehen, wo sich der Ordner befindet. Also hier ist es. Und wenn ich zu Bildern und Videos gehe, was mein Heldenhintergrund sein wird, wird es so aussehen, als würde ich auf Okay klicken und los geht's. Lassen Sie mich das Farb-Overlay einfach etwas herunterfahren auf 60, 50, vielleicht, so etwas. Und lassen Sie mich weitermachen und jetzt mein Top für das Logo verwenden. Lassen Sie uns das ersetzen. Klicken wir auf Hochladen und lassen Sie mich zu den Symbolen meiner Assets zurückkehren . Mal sehen, ob wir da sind. Nein, es ist in den Bildern. Logo. Es ist SVG, also funktioniert es einwandfrei. Da haben wir es. Sie können also sehen, wie einfach das zu ersetzen ist. Nun, dieses Bild wird VR in Girl sein, z. B. für den VR-Grill. Ich klicke auf Bilder hochladen und verwende dieses Mädchen hier. Da haben wir es. Und du kannst sehen, wie einfach der Tod war. Wir sind menschlich geworden, skalieren wir es ein bisschen auf so etwas. Da haben wir es. Ich werde draußen klicken. Sie können sehen, wie das aussieht. Jetzt füge ich hier einfach die Kopie meines ursprünglichen Designs ein, das ich außerhalb des Bildschirms erstellt habe. Verwenden Sie das natürlich für meinen Absatz. Da haben wir es. Und was ich hier tun kann ist, dass sechs dazu tendieren, nur eine Berührung zu machen, damit es zu der Rolle passt, die wir sind, vielleicht oder noch besser, ich kann es eingrenzen, sodass wir in drei Zeilen zu so etwas gehen können . 48, 48, das ist gut. Aber ich denke immer noch nicht, dass dieses Bild so groß sein muss. Oder vielleicht können wir die beiden einfach so benutzen. Und stellen Sie einfach sicher, dass sie so in der Mitte sind. Bei all diesen anderen Abschnitten werden wir sie also offensichtlich auf so etwas reduzieren . Mal sehen, wie das funktioniert. Vielleicht können wir das ein bisschen näher bringen. Und vielleicht können wir sogar unsere Präferenz-Layouteinstellungen aktivieren . Da haben wir es. Ja, ich denke, das wird gut funktionieren. Aber warum bleibt es nicht so, Einstellungen, Layouteinstellungen. Okay, also L, und ich werde es bis zum Rand schieben. Los geht's und schieben dieses Bild einfach ein bisschen ein. Und ich denke, das wird gut funktionieren. Was ich noch einmal tun werde, ist Strg D zu drücken . Noch einmal. Gehen wir zurück hierher. Also schauen wir mal, wo ist unser Bild? Hier ist es. Wir sind ein Mädchen. Also werde ich hier oben ein weiteres Bild hinzufügen . Hoffentlich. Aus irgendeinem Grund will es nicht gehen. Aber das spielt keine Rolle. Ich mache es einfach 200 mal 200 und lade mein Logo hoch, tut mir leid, mein Symbol. Anstelle der Symbole habe ich hier das VR-Symbol. Da haben wir es. Klicken Sie auf Platzieren und positionieren Sie es dann ungefähr hier. Das wird mir nur ein bisschen mehr Interesse an diesem Abschnitt geben . Sag. Also, ich denke, dass dieser Abschnitt in Ordnung war. Dann muss ich nur noch weitermachen und auf Hochladen klicken. Dann wechsle das. Das wird unsere Ausbildung sein. Also schalten Sie es auf hier um, da haben wir es. Das nächste werden Spiele sein. Da haben wir es. Und ich werde das einfach durch Spiele ersetzen. Und im nächsten Abschnitt werden wir doppelklicken und etwas Text einfügen. nächste wird Musik sein. Und doppelklicken Sie auf Musik. Also einfach hier klicken, auf Upload klicken und Musik suchen. Da haben wir es. Hier. Okay? Und dann wird dieser letzte Metal sein , denn das ist im Moment in aller Munde. Wie ich online sehe. Los geht's, Mehta, und ersetze dieses Symbol endlich durch dein eigenes Icon Matter Icon. Da haben wir es. Treffer. Okay, großartig. Jetzt, wo das erledigt ist, kann ich den gesamten Abschnitt auswählen und ihn einfach hier hin - und herbewegen , damit ich sehen kann, wo er zum Rest meines Designs passt. Und ich kann weitermachen und all diese anderen Abschnitte auswählen und sie einfach ganz nach unten verschieben , bis ich etwas später sehe, was ich mit ihnen machen soll. Deshalb ist es großartig. Also schauen wir uns die Spiele hier an. Und ich kann das hochladen, auf Hochladen klicken, zurück zu meinen Bildern, Spielen, das ist dieser Typ. Da haben wir es. Du kannst so etwas sehen. Ich denke, es wird gut funktionieren. Wählen Sie also die Daten aus, um sicherzustellen, dass sie sich in der Mitte befinden. Und vielleicht kann ich sie mit nur einer Berührung bewegen. Oder vielleicht kann ich das Bild dieses Spiels einfach ein bisschen nach hier verschieben , so etwas in der Art. Vielleicht fehlen einigen einige Formen im Hintergrund. Also vielleicht kann ich etwas später ein paar Hintergrundformen hinzufügen ein paar Hintergrundformen oder so. Aber ich denke, es wird vorerst gut funktionieren. Als Nächstes füge ich hier ein neues Bild hinzu und verwende dieselbe Technik. Also 200 mal 200, los geht's. Und innerhalb dieser Position könnte es ungefähr hier sein. Ich klicke auf Hochladen und wechsle zu den Symbolen für meine Assets. Und sehen wir uns das Spiele-Symbol an. Nein, nicht das. Schauen wir uns also Gain, Gain Gaming an. Es ist dieser und positioniere ihn ungefähr hier. Wenn ich das habe, werde ich mein Exemplar in ein definiertes Spiel aufnehmen. Und ich werde dasselbe für diesen Text tun. Da haben wir es. Auf dieser Schaltfläche ist die automatische Synchronisierungsfunktion aktiviert. Aber wenn Sie nur diese Schaltfläche ändern möchten und nicht möchten , dass die Änderung für alle Instanzen synchronisiert wird. Alles, was Sie tun müssen, ist mit der rechten Maustaste auf diese Schaltfläche zu klicken und auf „Von Assets getrennt“ zu klicken. Und dann werden die Änderungen nur auf diese Schaltfläche angewendet. Und natürlich müssen wir hier einen Text ändern. Also statt dessen sage ich, hol dir deins. Da haben wir es. Klicken Sie auf Anwenden und sehen Sie ob es überall in Echtzeit aktualisiert wurde. Was ich also tun muss, ist im Grunde eine Kopie davon zu machen und dann die Schulden zu ändern. Aber der Zeit halber werde ich das nicht tun. Also lass uns einfach weitermachen und weitermachen. Also werde ich diese beiden auswählen und sicherstellen, dass sie in der Mitte sind. Sie sind großartig. Also wähle ich das aus und stelle sicher, dass es sich in der gleichen Entfernung wie dieses oben befindet, um ihm etwas mehr Luft zum Atmen zu geben. Da haben wir es. Also, was das nächste angeht, werde ich es so ausrichten, dass es dasselbe ist, und das wird ziemlich einfach sein. Also Werbevideo, klicken Sie einfach auf Hochladen, klicken Sie hier, gehen Sie zu meinen Assets und Ikhwan, tut mir leid, Werbevideo für Bilder ist dieses hier. Okay, los geht's. Es ist direkt hineingelegt. Gehen Sie dann in diesem Abschnitt nach oben. Und alles, was ich hier tun muss, ist diese Bilder im Grunde zu ersetzen, wenn sie sich nach oben bewegen. Laden Sie hier ausgewählte Bilder hoch. Es wird dieser hier sein, okay? Wie Sie sehen können, verwenden wir jetzt den Controller und klicken Sie auf Upload, um den Controller hochzuladen. Da haben wir es. Drücken Sie auf Okay. Und zu guter Letzt wird es für diesen ein bisschen knifflig. Wählen Sie also das Bild hier aus, laden Sie es hoch und klicken Sie auf Hochladen. Und ich werde dieses Bild verwenden weil es ein PNG-Bild dieses Mädchens ist. Wie Sie sehen können, wird sich das gut in diesen Hintergrund übertragen lassen . Aber dafür müssen wir tatsächlich einiges davon ersetzen. Diese Get Ideas sollten also völlig dunkel sein. Hauptdunkel in diesem Get Inspired sollte also weiß sein. In diesem Fall. Da haben wir es. Sie können also sehen, wie das aussieht. Aber endlich muss ich einige dieser Grenzen loswerden. Wenn ich das ausgewählt habe, sehen wir mal, es hat keinen Rand dieses Rechtecks, sondern einen Rahmen. So wie dieses Rechteck. So wie dieses Rechteck. Da haben wir es. Und jetzt können wir zu diesem Abschnitt übergehen , den wir weiter hinzufügen können. Also zuerst werde ich für diesen Fall die Größe des Bildes auf etwa 792 durch 500 ersetzen . Da haben wir es. Vergewissere dich, dass es ungefähr hier ist. Los geht's und stellen sicher, dass ich sie in Position bringe. Was wir also tun werden, ist diesen Abschnittstitel umzuwandeln und ihn von 60 auf einen etwas kleineren Titel wie 32 zu ändern. Doppelklicken Sie auf Einfügen, es ist lebensverändernd. Und lassen Sie uns hier einen Textabsatz einfügen. Stellen Sie also sicher, dass Sie es nur so erweitern, dass es den Text abdecken kann. Und schauen wir mal nach der Distanzierung, vielleicht können wir 48 gebrauchen. Schauen wir uns also an, was wir hier haben. Wir haben also 35. Wir sind jetzt also bei 48. Stattdessen werde ich gewisse Paginierung hinzufügen. Ich kann also einfach 0 drücken, um einen schönen Kreis zu erstellen , etwa so. Und schauen wir uns Fourier an, aber 48, vielleicht ein bisschen groß. Also 40 mal 40, los geht's. Ich werde eine Grenze hinzufügen. Und diese Grenze wird diese, sagen wir, blaue Farbe sein. Bewerben Sie sich also an der Grenze. Und ich werde die Füllrandbreite loswerden sie wird zwei Pixel betragen, ungefähr so. Da haben wir es. Von hier aus sind wir 54. Und ich werde 48 Jahre alt sein, genau wie beim vorherigen. Kontrolliere ein D. Da haben wir es. Kontrolle D, wo wir gerade sind, sind wir 29. Also 20, schauen wir uns 20 an und Control D hier sind wir 20. Lassen Sie uns diese also schnell auswählen. Also diese anderen, nein, wählen wir sie alle aus und klicken auf Absatzfarbe als Rahmen. Und ich wähle einfach die zweite aus und drücke Hauptblau als Füllfarbe ohne Rand, um anzuzeigen , dass diese ausgewählt ist. Aber ich denke immer noch, dass sie wirklich zu groß sind. Also wähle ich sie alle so aus und reduziere sie auf 20 mal 20. Mal sehen, wie das aussieht. Ja, ich denke , das ist viel besser. Gleichmäßig verteilt, falls sie nur nicht auf Control G gedrückt werden, nennen wir das Paginierung. Und du hast bereits die Komponente für die Paginierung, aber ich erstelle meine Sachen gerne von Grund auf neu. Also ich möchte einfach, sagen wir, die volle Kontrolle darüber haben . Also wähle ich diesen Text aus und stelle sicher, dass er sich in der Mitte dieses Bildes befindet. So kann ich meinen Inhalt auswählen, mein Bild auswählen. also Inhalt und Bild ab und achten Sie darauf, dass sie mittig ausgerichtet sind. Da haben wir es. Und ich wähle einfach dieses Bild hier aus. Laden Sie hoch, klicken Sie auf Hochladen und fügen Sie das Testimonial-Bild hinzu. Schlag okay, los geht's. Und ich möchte nur einige zusätzliche Details hinzufügen. Drücken Sie also R und erstellen Sie vielleicht eine Art Rechteck im Hintergrund. Vielleicht die Ecken ein bisschen abrunden. Lass uns sehen. Vielleicht 20. Da haben wir es. Und ich werde die Füllung entfernen und für den Rand werde ich diese Hauptfarbe auftragen und es zum Beispiel aus zwei Pixeln machen . Klicken Sie mit der rechten Maustaste auf Bestellung, In den Hintergrund legen. Es ist also direkt hinter diesem Bild. Da haben wir es. Ich denke, das funktioniert gut. Also nur ein Mobilteil. Es wird super einfach zu machen sein. Alles was wir tun müssen, ist einfach dieses VR-Gerät hochzuladen. Da haben wir es. Okay, und ich denke , das funktioniert gut. Wir sind also um 01:20 Uhr. Mal sehen, fünf von jeder Seite, 24. 24. Ja, 123 von jeder Seite. Ich denke, es wird gut funktionieren. Und dann, endlich, für diese hier, brauchen wir die Produktkarte. Diese erste Karte wird , wie es heißt, die Tragetasche auf der Dose sein. Drücken Sie Okay, los geht's. Das zweite werden diese Kabel sein. also auf Hochladen und klicken Sie auf Kabel hochladen. Da hast du es. Und vielleicht weil es abgeschnitten ist, kannst du es vielleicht am unteren Rand deines Bildes platzieren und es dadurch ein wenig vergrößern und dann einfach so an der Mitte ausrichten. Ich denke, es wird viel besser funktionieren. Nun endlich, denn hier brauchen wir, lassen Sie uns sehen. Wir brauchen den Titel. Also entfesselte die Welt der VR-Technologie. Da haben wir es. Stellen Sie sicher, dass das 48 ist, so. Und dann füge ich hier Texte hinzu. Da haben wir es. Und ich werde das so lassen wie es ist. Und zum Schluss ersetzen Sie einfach dieses Bild. Klicken Sie auf Hochladen. Wähle diese VR-Frau. Da haben wir es. Und ich werde sie viel größer machen, bis so etwas, nett und groß. Wählen Sie beide aus, klicken Mitte und verschieben Sie dieses Foto dann nach unten. Für das Inhaltsbild selbst verwende ich Komponenten , um eine weitere Komponente hineinzuziehen, also 200 mal 200. Da gehen wir hin und platzieren es irgendwo, ungefähr hier in der Nähe. Hochladen und klicken Sie dort. Und dann benötige ich die Asset-Symbole. Und ich glaube, ich werde die Technologie-Ikone verwenden. Ja. Also positioniere es einfach ungefähr dort. Sie können auch einige Hintergrundformen verwenden , um diese Bilder auszufüllen. Wenn Sie möchten, werden sie dadurch ein bisschen mehr auffallen. Und vielleicht sollte ich sie tatsächlich exportieren und reinbringen. Lassen Sie mich also tatsächlich sehen, was ich tun kann. Also vielleicht kann ich so etwas machen. Was wir damit machen können, ist hier es bringt das neue Image. Stellen Sie sicher, dass es skalierbar ist. Ich positioniere mich ungefähr hier. Bestellung In den Hintergrund schicken, klicken, hochladen. Klicken Sie zum Hochladen und wo ist es, Blobform, klicken Sie auf „Hochladen“, okay? Und Sie können sofort von hier aus sehen, wie es aussieht. Alles, was Sie jetzt tun müssen, ist dieses Bild in die Blobform selbst zu bewegen . Da haben wir es. Und verschiebe sie einfach beide gleichzeitig ungefähr hierher und es wird gut funktionieren. Ich werde etwas später gehen und sie alle anpassen. Aber ich verstehe jetzt, dass ich hier etwa 20 für das Rechteck benötigen würde . Also lass uns mit 20 beginnen. Los geht's, nur damit wir in diesem Bild ein etwas interessanteres Layout haben können . Unsere letzte Sache , die ich dafür tun wollte , aber bevor ich weitermache, lassen Sie mich schnell sicherstellen , dass dies zentriert ist. Da haben wir es. Ich wähle das Fußzeilenbild und das Filterbild aus. Da haben wir es. Hochladen und klicken Sie dort, wählen Sie die beiden Bilder des VR-Geräts aus. Wir sind bereit für. Da haben wir es. Klicken Sie auf OK. Und vielleicht vergrößere ich es einfach ein bisschen auf so etwas. Und stellen Sie einfach sicher, dass der Fußzeilenhintergrund oben ist, vielleicht bei 80%, so etwas. Der nette Trick ist, dass du deine Zeichenfläche hier einfach grob abschneiden kannst deine Zeichenfläche hier einfach grob abschneiden und sie scrollt nicht weiter. Aber wenn Sie möchten, können Sie natürlich einfach Ihren Fuß genau dort ausstrecken. Ich denke, das wird ein ziemlich netter Trick sein und eine nette Art, diese Designsitzung zu beenden. Aber weil mich diese Hintergrundformen wirklich nerven, exportiere ich sie einfach aus meinem ursprünglichen Design. Füge sie gleich hier hinzu. Also füge ich ein neues Bild hinzu, platziere es an einem beliebigen Ort, klicke mit rechten Maustaste und wähle „ Bestellung“, „In den Hintergrund“. Treffer, Hochladen. Klicken Sie auf Hochladen, gehen Sie zu Assets, Blob-Form Nummer zwei, klicken Sie auf. Okay, los geht's. Und vielleicht kann ich es nur ein bisschen auf ungefähr hier hochskalieren , vielleicht. Ja. Und dann kann ich sie anpassen und verschieben. Lass uns einfach sehen, wo es ist. Ja, also hier ist es. Das, das und das. Ich kann vielleicht hierher ziehen . Da haben wir es. Und wir haben noch einen einzigen Blob und lassen Sie mich ihn exportieren und vorbereiten und ihn einfach hierher bringen. Und während ich das mache, lassen Sie uns schnell ein neues Bild hinzufügen. Skalieren Sie es, klicken Sie mit der rechten Maustaste auf „Bestellung “, „In den Hintergrund“, klicken Sie auf Hochladen. Und es wird Blobform Nummer drei sein, aber aus irgendeinem Grund existiert es dort nicht. Lassen Sie mich das noch einmal versuchen. Klicken Sie hier, um Blob-Form Nummer drei hochzuladen. Los geht's, hier, okay, und es befindet sich genau hier. Natürlich können Sie ein bisschen mehr mit den Einstellungen herumspielen und sie ein bisschen mehr anpassen. Aber diese Blobs sind nur dazu da, dich ein bisschen für dein Design zu interessieren. Lass uns kurz auf Vorschau klicken , um zu sehen, was wir bisher gemacht haben und was wir bisher erstellt haben. Also hier haben wir unseren Heldenbereich, wir haben unsere Buttons, alles funktioniert wie es sollte. Ich fange an, nach unten zu scrollen. Sie können sehen, wie Sie neue Welten erkunden. Und wir haben wieder dieses Mädchen, Button funktioniert wirklich gut. Unbegrenzte Möglichkeiten. Also wir haben diese Optionen hier, aber ich glaube, ich habe vergessen, hinzuzufügen, dass es für den Hauptflughafen ist, ich möchte diese Farbe ändern. Also Vermögenswerte. Rechtsklick. Mal sehen, was wir tun können. Also war es dieser. Da haben wir es. Wenn ich also hier umstelle, sollte es dazu führen, dass es wechselt und ein bisschen mehr auffällt , wenn es gespeichert ist. Lass es uns überprüfen. Ja, denn jetzt können wir die weiße Farbe dieser Karten sehen . Also funktioniert alles wie es sollte. Es sieht nett aus. Sie können sehen, wie diese Blobs Ihr Bild hervorheben. Vielleicht sollte ich das noch ein bisschen verschieben. Aber ich finde, es läuft ganz gut. Und für dieses Video werde ich einfach die Ecken dieses Videos abrunden. Suchen Sie das Farb-Overlay und stellen Sie sicher, dass wir hier 20 sind. Da haben wir es. Und wenn Sie es jetzt speichern und hier öffnen , funktioniert es einwandfrei. Sie könnten sich vorstellen , dass dieses Video kontinuierlich auf Bloop abgespielt wird, vielleicht über Nukleinsäure. Es wird es zu Vimeo oder YouTube oder etwas Ähnlichem bringen . Diese Karten sollten ebenfalls gerundet sein. Also lass uns das machen. Also lass uns mit 20 beginnen. Lass uns auch hier mit 20 beginnen. Da haben wir es. Und schauen wir uns diesen Abschnitt für die Testimonials an. Also dieser ist ausgewählt, funktioniert gut. All-in-One-Headset, personalisiere deins. Da haben wir es. Also haben wir diese drei. Erkunden Sie alles, vielleicht können wir einige Hover-Effekte hinzufügen . Da haben wir es. Also funktioniert alles so, wie es für diesen Abschnitt akzeptiert werden sollte. Vielleicht sollte ich es sogar schneiden und es sogar hier einbauen. Also, was wir sehen können, lassen Sie uns sehen. Wir haben also eine Fußzeile, BG ist 740. Also lass uns mit 740 beginnen. Und ich kann mit Phil gehen. Da haben wir es. Und ich denke, in diesem Fall geht es nur um Salz, so. Da gehen wir rein. Das war's also für unser Design. Ich hoffe wirklich, es hat dir gefallen. Im nächsten Video werden wir uns nur mit ein bisschen Animation befassen. Und ich werde dir z.B. zeigen wie man einen von zwei dieser Abschnitte animiert , nur um zu sehen, wie alles funktioniert. Also werde ich dich dort sehen. 28. Interaktionen hinzufügen: Lassen Sie uns schnell ein paar nette kleine Interaktionen hinzufügen , um unsere Seite ein bisschen interessanter zu gestalten als jetzt, wo sie fast vollständig statisch ist. Ordnung, also hier haben wir beim letzten Mal aufgehört. Lassen Sie uns fortfahren und einige Interaktionen hinzufügen. Die erste Interaktion, die ich hinzufügen werde, ist , dass sich diese Elemente beim Laden dieser Seite ein wenig bewegen. Also, wie macht man das? Nun, lasst uns einfach schnell zur Interaktion übergehen. Wir wählen das Ziel und ich wähle diesen Heldenbereich aus. Scrollen Sie also hier ganz nach unten, einen Abschnitt. Und du hast dein Heldenbild, z. B. und du hast all diese anderen Elemente in der Helden-Sektion. Also zuerst, wählen wir diesen Text einfach so aus. Es zielt also auf den Text beim Laden ab. So. Und wir wollen anfangen, uns zu bewegen. Und lass uns so etwas wie auf der Y-Achse machen, lass uns gehen, ich weiß nicht, vielleicht zehn Pixel. Also für Drei-Fünf, um 200, vielleicht 300, so etwas zu lockern . Okay, dann mach noch einen. Fügen Sie also Interaktion hinzu und wählen Sie das Ziel im Heldenbereich aus. Was wir als Nächstes tun können, ist vielleicht die Haupttaste zu benutzen. Wir können den Zug auch nutzen. Und lassen Sie uns mit, ich weiß nicht, vielleicht zehn Pixeln weitermachen . Lassen Sie uns also mit etwa 604300 Millisekunden beginnen. Das ist in Ordnung. Lassen Sie uns ein weiteres für das Menü hinzufügen, z. B. also AD-Interaktion. Gehen wir nach oben. Wir haben also den Nerv, wir haben den Zug. Und auf der Y-Achse, die oben und unten ist, werde ich sie verschieben, z. B. sagen wir 40 Pixel. So etwas wie eine Schuld. Vielleicht kann ich, ich weiß nicht, vielleicht kann ich das Hintergrundbild vergrößern. Also lass uns das machen. Also noch einmal, Hero Section. Lass uns mit dem Hero-Bild beim Laden beginnen und lass uns mit Zoom beginnen. Also lass uns mit der Breite gehen, vielleicht 105, so etwas. Lass uns schnell gehen. Da haben wir es. Sie können sehen, wie schnell das passiert ist, weil wir es auf 300 Millisekunden eingestellt haben. Wenn Sie möchten, dass diese Änderungen etwas langsamer ablaufen, können Sie damit herumspielen. Lassen Sie uns nun fortfahren und den nächsten Abschnitt anpassen. Und ich werde kurz auf dieses Symbol eingehen. Und wenn Sie den Mauszeiger darüber bewegen, kann es sich vielleicht drehen. Wenn Sie die Maus darüber bewegen, kann sie einfach zurückspringen. Um das zu tun, statt dieser Auslöser, und lassen Sie mich zunächst erklären, was ich gerade getan habe. Wenn ich es also anklicke und auf sich selbst ziehe, werden die Änderungen auf sich selbst angewendet. Also gehe ich mit der Maus Enter. Wenn also die Maus erscheint, statt Zoom verwenden wir statt Zoom eine Drehung und gehen wir um 180. Lass uns eine lineare Dauer von 400 nehmen, ich denke, das kann ziemlich gut sein. Sie können Ease in, out verwenden. Ich denke, es wird einfach ein bisschen besser aussehen. Klicken Sie auf Okay und führen Sie dann einen weiteren Vorgang aus. Also gehe die Maus und ich verwende den Winkel Null. Lassen Sie uns also kurz eine Vorschau dessen ansehen, was wir genau dort gemacht haben. Wenn ich also nach unten gehe, können Sie sehen, dass es rot hervorgehoben ist, was bedeutet, dass es die Wirkung darauf hat. Wenn ich also mit dem Mauszeiger schwebe, kannst du sehen, was es macht. Und wenn es sich nach drinnen bewegt, solltest du es vielleicht auf minus 180 setzen. Also lass es uns testen , wenn Moussa geht. wir hier auf Bearbeiten und lassen Sie uns mit minus 180 fortfahren , damit es zu seiner ursprünglichen Position zurückkehrt. Also schauen wir mal , ob das funktioniert hat. Da haben wir es. Wenn Ihre Maus es also verlässt, kehrt sie zu dieser ursprünglichen Position zurück. Du kannst 360 nehmen, wenn du willst. Aber ich denke 180 ist gut. Ich werde diese Schaltflächen nicht ansprechen , da sie bereits den Hover-Effekt auf ihnen haben. Du kannst mit diesem Bild alles Mögliche machen , z.B. kannst du es vergrößern, wenn du die Maus darüber bewegst. Wenn du zum Beispiel über den Schnittpunkt des Sonnenlichts rutschst , möchte ich mit der Position dieser Karten herumspielen . Wir haben bereits den Schwebeeffekt auf sie, den wir zuvor eingestellt haben. Aber was ich tun werde, ist die gesamte Karte auszuwählen und sie zu ziehen. Benutzen Sie die Eingabetaste. Anstatt zu drehen, verwende ich die Y-Achse verschieben. Ich nehme zehn Pixel, 300 Millisekunden, was in Ordnung ist. Und dann benutze das und geh. Lass uns sehen. Lass uns bei Null anfangen und sehen , was das für uns bedeutet. Also los geht's, statt mit der Maus Enter. Ja, lass uns das noch einmal machen . Wenn ich also genau hier klicke, verschiebe ich die Y-Achse in Männerzentrierung. Lass uns mit zehn Pixeln beginnen. Klicken Sie auf Okay. Wenn ich genau hier klicke. Anstelle der Mausmitte verwende ich den Mauszeiger. Ich werde es auf Null belassen. Treffer. Okay? Jetzt haben wir also die Eingabetaste mit zehn, Maustaste bei Null verlassen und wir klicken auf Vorschau. Wenn ich also mit dem Mauszeiger hier drüber schwebe, können Sie sehen, wann es geht, wann es zurückgeht und es hat diesen federnden Effekt, zu gut zu dem passt, was wir hier zu erreichen versuchen. Also gehe ich mit der Maus Enter, bewege hier zehn, okay? Machen Sie dasselbe für diese Mausmitte, bewegen Sie 10, mi Mittelpunkt bewegen Sie zehn. Da haben wir es. Und dann nehme ich diesen. Geh mit der Maus, es wird Null sein. Maus lässt Null und die Maus lässt Null. Sie können diese Effekte natürlich kopieren und einfügen, aber ich habe festgestellt, dass Sie dabei genauso schnell sind. Wenn du nur Blair bist, plane deinen Bundesstaat im Voraus und wenn du deine Animation im Voraus planst. Jetzt haben wir also diesen Effekt, quasi diesen federnden Effekt, wenn Sie Ihre Maus über diese Karten bewegen. Sie spielen herum und zeigen dir diese verschiedenen Positionen. Wenn du also nach unten scrollst, können wir diesen vielleicht rotieren, aber ich überspringe ihn vorerst einfach und gehe direkt zu diesem Abschnitt über. Und was ich in diesem Abschnitt tun werde , ist diese Farbe von hier aus der Reihenfolge auszuwählen. Gehe zu meinen Bundesstaaten, gehe zu der ausgewählten Maus, gehe zu Eigenschaften. Innerhalb der Grundstücke. Ich werde das auf vielleicht etwa 40 Prozent reduzieren . Sowas in der Art. Wechseln Sie zurück zur Normalität. noch einmal auf Vorschau, denn wenn Sie den Mauszeiger darüber bewegen, also wenn Sie nach unten scrollen, möchte ich, dass Sie schnell darauf klicken können schnell darauf klicken oder dass Sie sehen, dass Sie tatsächlich etwas damit machen können. Und in diesem Fall wäre es ein Video, das im Hintergrund abgespielt wird. Wenn Sie darauf klicken, kann es vielleicht erweitert, vergrößert werden, um es im Vollbildmodus zu sehen oder so. Das ist also der ganze Punkt. Wenn du draußen klickst, wenn du den Mauszeiger nach draußen bewegst, wird es bei Adipositas nur größer. Lassen Sie uns jetzt ein bisschen mit diesen Abschnitten herumspielen . Was wir hier also tun können ist, dass wir das vielleicht ein wenig vergrößern können. Wenn Sie also auf die Eingabetaste klicken und ziehen, können wir die Größe ändern. Sie können es also mit einem relativen Wert machen, oder Sie können, wenn Sie hier ein Recht haben, sehen, ob Sie das Häkchen entfernen, um die Größe auf eine bestimmte Größe zu ändern, was ich eigentlich möchte. Weil ich auf Enter um zehn Pixel vergrößern wollte. Also 710. Und lass uns weitermachen, lass uns hier mit der runden Zahl beginnen. Also vielleicht 407, eigentlich 200 Millisekunden. Ich denke, das ist in Ordnung. Ganz einfach, das ist toll. Also das war Maus, Enter, nochmal ziehen, Maus verlassen. Und wir werden es bei diesen Größen belassen. Da haben wir es. Lass uns noch einmal auf Vorschau klicken, weil ich wissen möchte , ob das funktioniert oder nicht. So kann ich wissen, ob ich Änderungen vornehmen muss. Da haben wir es. Sie können also sehen, wie das aussieht , wenn Sie mit der Maus darüber fahren. Es wird dir im Grunde nur dieses Bild zeigen und dir zeigen, wie es aussieht. Das ist großartig. Das nächste, was ich tun möchte, ist vielleicht, vielleicht dasselbe damit zu tun. Was ich also tun kann, ist dasselbe zu tun. Also die Maus eingeben, nur damit wir verstehen können , dass diese alle Teil desselben Abschnitts sind . Lass uns sehen. Also 156,233. Da haben wir es. Und dann geht die Maus. Es wird uns zu den Standardeinstellungen zurückbringen. Hoffentlich. Sehen wir uns also 156146 an. Da haben wir es. Dann lass uns auch mit diesem herumspielen. Also wähle ich das Bild so aus. Und in diesem Fall möchte ich es auf so etwas skalieren können. Also 9 443-594-4350. Wählen Sie also erneut Ihr Bild aus. Also 944 mit 350, das ist eine Maus. Komm rein, drück, Okay. Und jetzt füge noch einen hinzu. Anstelle der Mausmitte. Lass uns mit der Maus gehen. Sie können 880319 sehen. Da haben wir es. Lassen Sie uns diese also schnell in der Vorschau anzeigen. Und wenn diese Animationen in diesen Abschnitten wie vorgesehen funktionieren , funktioniert diese ganz gut. Dieser funktioniert ganz gut, und dieser funktioniert auch. Es springt einfach über diese Summe hinaus. Wenn Sie möchten, können Sie mit der Positionierung herumspielen. Damit es ein bisschen nach oben geht. Also vielleicht statt dessen vergrößert und vielleicht kannst du es einfach um die Y-Achse bewegen lassen, aber denk daran, dass ihre Beine immer noch so aussehen werden. Aber vorerst überspringe ich diesen Abschnitt, weil diese Abschnitte normalerweise ziemlich statisch sind, weil die Leute zwischen ihnen und dem Wechsel hin Abschnitt, weil diese Abschnitte normalerweise ziemlich statisch sind, weil die Leute - und herwechseln. Vielleicht können wir diesen vergrößern. Versuchen wir es also mit Schulden. Also, was können wir hier tun? Lass uns den gleichen Trick machen. Also los mit der Maus, Eingabe, Größenänderung. Lass uns 1206 nehmen, 60. Vielleicht. Lass uns mit etwas Langsamerem beginnen, etwa 400 Millisekunden. Da haben wir es. Und dann geht die Maus. Wir werden die gleichen Einstellungen beibehalten. Sowas in der Art. Da haben wir es. Schließlich möchte ich für D auswählen und zum dieses Bild auswählen und zum Schweben wechseln, Maus hier bewegen. Ich möchte die Opazität auf vielleicht 70% oder so reduzieren. Wechseln Sie zurück zum Normalmodus und wählen Sie dann auch dieses Bild aus. Also von Char zu Maus schweben, 70% Da haben wir es. Wechseln Sie zurück zur Normalität. Und dann endlich zurück zu diesem Produkt PG wechseln , Maus hover. Aber hier werden wir tatsächlich die Farbe ändern. Also innerhalb der Maus wechseln wir zum Dunkelblau kehren zur Standardeinstellung zurück. Da haben wir es. Und hier, was wir tun können vielleicht weil es der letzte Abschnitt ist, vielleicht kannst du den gleichen Trick machen , damit es sich beim Schweben dreht. Also Mauseingabe, anstatt die Größe zu ändern, vielleicht kann ich das. Mal sehen, ob ich mich um 100 Grad drehe. Da haben wir es. Und die Maus lässt -100 Grad, 100 Grad und los geht's. Jetzt, wo wir das haben, können Sie natürlich alle möglichen Animationen hinzufügen. Lassen Sie uns das gesamte Design schnell testen und sehen, was wir bisher haben. Wenn ich also noch einmal auf Vorschau klicke, werden wir diesen netten kleinen Ladeeffekt all dieser Elemente im Hintergrund haben . Wie bereits erwähnt, können Sie dem Hintergrund zusätzliche Animationen hinzufügen zusätzliche Animationen hinzufügen , wenn Sie möchten. Aber im Moment finde ich es gut. Das funktioniert wie vorgesehen. Wir haben diese, die im Hintergrund wie ein Sprungbretteffekt wirken. Vielleicht kannst du hier klicken und du wirst entweder zu einem speziellen Seitenbereich über Spiele oder zu entweder zu einem speziellen Seitenbereich über Spiele einer separaten Spieleseite weitergeleitet. In diesem Fall. Wir können das rotieren lassen, wenn wir wollen, dann haben wir diesen reduzierenden Schwebeeffekt auf dieser Karte. Wir haben diese Elemente skaliert, einschließlich dieses. Dann haben wir das langsam vergrößert und interviewen. Wir haben diesen netten kleinen Schwebeeffekt auf all unseren Karten. Dann haben wir endlich diesen für die Rotation. Da haben wir es. So einfach ist es, verschiedene Interaktionen innerhalb von Mock plus rP hinzuzufügen . Und Sie können sehen, wie einfach sie sind, wenn Sie Ihre Zeichenfläche auswählen Sie können beim Laden sehen, was dann passiert, wenn Sie bestimmte Elemente wie dieses auswählen , z. B. Sie können sehen , welche Trigger es hat und welchen Anfang es genau dort hat. Im nächsten Video werde ich Ihnen zeigen, wie Sie eine Vorschau anzeigen und auf Mock Plus Cloud veröffentlichen können, warum das wichtig ist und was Sie tun können, wenn Sie dort sind. Also werde ich dich dort sehen. 29. Preivew, Share und Mockplus Cloud: Sie für das Projekt tun können, ist Feedback von Ihren Kunden zu erhalten Das Wichtigste, was Sie für das Projekt tun können, ist Feedback von Ihren Kunden zu erhalten. Weil das falsche Feedback das Projekt in den falschen Teil bringen kann und wie Sie das Feedback Ihrer Kunden tatsächlich erhalten. Und darüber werden wir in dieser Lektion sprechen. Okay, hier haben wir im vorherigen Video aufgehört. Lassen Sie uns das jetzt noch einmal in der Vorschau ansehen. Also hier haben wir dieses Panel unten. Also hier haben wir an die Breite angepasst. Sie können Fit to Screen haben, wenn Sie Ihr gesamtes Design sehen möchten. Und noch einmal, all diese Elemente, die skizziert werden , enthalten einige Interaktionen. Sie können die Breite wieder anpassen oder je nach Bildschirmgröße 50% verwenden. Was wir dann daneben haben, ist der Vollbildschirm. Und du kannst Escape drücken, um den Vollbildmodus zu verlassen. Und Sie können diese Panels an der Seite ein- oder ausblenden. Natürlich können Sie hier auf der linken Seite zwischen Ihren verschiedenen Seiten wechseln. Und hier werden Ihre Knoten lokalisiert. Wenn Sie Ihre Notizen noch einmal haben , können Sie diese Bedienfelder schnell ein- oder ausblenden. Wenn du sie nicht brauchst. Dann haben wir die Option Vorschau-Link. Und was wir hier haben, ist das, was es genau hier sagt. Dieses Privileg wird also anders sein , wenn Sie die folgenden Einstellungen ändern. Also kopiere bitte den neuen Link, um ihn dann zu teilen. Das bedeutet also, wenn Sie einige dieser Optionen aktivieren und deaktivieren, achten Sie darauf, immer auf einen neuen Link zu klicken, den Sie durch das Aktivieren und Deaktivieren einiger dieser Optionen erhalten haben . Was wir hier haben, ist das Bedienfeld anzuzeigen. Du kannst es zeigen, wenn du willst. Sie können diese Werkzeugleiste anzeigen, wenn Sie möchten oder nicht. Sie können den Linkbereich anzeigen, wenn Sie den Mauszeiger bewegen. Dadurch wird Ihren Zuschauern gezeigt , dass sie tatsächlich auf diesen bestimmten Bereich klicken können . Das ist großartig, insbesondere für Benutzertests, da Sie immer möchten, dass Ihre Benutzer selbst verstehen , ob sie irgendwo klicken können oder nicht. Denn das wird die Geschwindigkeit Ihres Designs und die Benutzerfreundlichkeit Ihres InDesigns verbessern . Sie können den LNG-Tanker jederzeit vorzeigen. Sie können Inhalte außerhalb unserer Firma zeigen. Dies können entweder Sub-ArtBoards oder einige Elemente sein, die Sie außerhalb Ihrer Zeichenfläche erstellt haben. Sie können Knotenmarkierungen anzeigen und das Passwort so festlegen, dass jeder, der ein Passwort hat, in diese Vorschau gelangen kann. Jeder ohne Passwort kann überhaupt nicht darauf zugreifen. Das sind also nur einige Ihrer Einstellungen, wenn Sie den Vorschau-Link teilen. Und dann haben wir endlich hier, das sind nur ein paar Schnelleinstellungen , die ich dir hier schon gezeigt habe, nur überlastet und hier zusammengefasst. Also nochmal, immer Carrier anzeigen, Kurzlink, weiter mit der Maus. Also passiert es genau hier und es wird dieser Linkbereich angezeigt. Das ist dein Linkbereich. Zeige Inhalte außerhalb der Zeichenfläche. Wie bereits erwähnt, Notizmarkierungen anzeigen und die Werkzeugleiste automatisch ausblenden. Das sind also nur einige Ihrer Optionen, wenn Sie Ihren Prototyp sehr schnell teilen möchten. Aber was passiert, wenn Sie es tatsächlich veröffentlichen möchten? Also etwas auf Mock Plus Cloud zu veröffentlichen, aber tatsächlich ausgewählt und von mir zeigen zu lassen, das sage ich gleich hier. So können Sie Ihr Projekt mit Mock Plus Cloud synchronisieren, zum Beispiel für Online-Zusammenarbeit, Handoff und Layer-Daten. Überprüfe, was das bedeutet: Wenn du Pour nur zur Vorschau teilst, können die Leute es tatsächlich in der Vorschau ansehen. Und dann können sie dir vielleicht einen Rat geben, was du ändern solltest. Vielleicht können sie dich so in die richtige Richtung bezüglich des Designs weisen . Aber wenn Sie Inhalte tatsächlich auf Mock Plus Cloud teilen, können Sie mit anderen Designern und anderen Personen in Ihrem Team zusammenarbeiten , z. B. mit Interessenvertretern wie Textern und Entwicklern. Damit Sie alle in diesem Team das Design so gestalten können , dass es am Ende so ist, wie Sie es sich wünschen. Lassen Sie uns also weitermachen und das Cloud-Projekt ins Visier nehmen. Und natürlich können Entwickler Datenspezifikationen einsehen. Sie können Farben sehen. Sie können CSS, Snippets und alle möglichen Dinge sehen, was für sie nützlich sein wird , um dieses Design am Ende des Tages schneller zu entwickeln . So können wir das Cloud-Projekt ins Visier nehmen. Wir haben unsere Website, das ist in Ordnung. Klicken Sie auf Okay, und Sie können es ändern. Du kannst von hier aus benutzen, was du willst. Und ich werde in diesem Fall unsere Website benutzen , okay? Und je nachdem, wie groß Ihr Projekt ist, wird die Veröffentlichung länger oder kürzer dauern. Es wurde erfolgreich veröffentlicht. Sie können also auf Projekt als separate Umgebung anzeigen klicken als separate Umgebung und sehen, wie es aussieht. Sie haben hier also alle möglichen Optionen. Begriff, das Prototypendesign, den Styleguide für Aufgabenressourcen und die Aktivität zu dokumentieren . Du kannst alles überprüfen. Sie haben das Team, also die Genehmigung für das Projekt. Wer hat die Erlaubnis , auf dieses Projekt zuzugreifen? Sie können es noch einmal in der Vorschau anzeigen. Hier können Sie von der Homepage aus starten oder von der aktuellen Seite aus beginnen. Sie können das, was wir bereits erwähnt haben, herunterladen und außerhalb von hier weiter teilen. Und Sie können hier einige Einstellungen vornehmen. Sehen wir uns die Details also ganz schnell an. Lassen Sie uns gleich hier mit dem Design beginnen, weil es vom Flussdiagramm ausgegangen ist, weil das die erste eingegebene Standardseite war. Was wir hier haben, sind einige Optionen oben. Zunächst haben wir die Bewertung. In diesem Tab können die Leute also überprüfen. All die Änderungen, die Sie vorgenommen haben, und sie können sich im Grunde auf Ihr Design auswirken. Dann haben wir hier einige Optionen. Unten können sie einige Optionen in Ihrem Design auswählen . Sie können die Texte hinzufügen, sie können die Bearbeitung koordinieren. Sie können das Abstandsmarkup und das Regionsmarkup hinzufügen, wenn sie in einem bestimmten Bereich Ihres Designs einige Kommentare hinzufügen möchten . Sie haben auch einen Pin-Stil, sodass Sie Anmerkungen oder ungelöste Kommentare anzeigen können , um eine Reihe von Optionen zu haben wenn Sie mit jemandem wie Kunden oder Interessenvertretern zusammenarbeiten . So können sie wirklich ihre Meinung zu Ihrem Design und zu den Änderungen äußern ihre Meinung zu Ihrem Design und , die an Ihrem Design vorgenommen werden müssen. Sie können diese Referenzen schnell hinzufügen. Du kannst verschiedene Farben und solche Sachen hinzufügen. Sie haben also wirklich viele Möglichkeiten. Sie haben hier Anmerkungen und Ihren Revisionsverlauf, was immer großartig ist, weil Sie sehen können , wie viele Überarbeitungen Ihr Design tatsächlich hatte. Dann haben wir hier den Kommentarmodus. Wenn Sie also in Ihren Kommentarmodus wechseln, können Sie schnell einige Kommentare hinterlassen. Also ändere z.B. dieses Hintergrundbild. Sie können sehen, dass Control, Enter heißt, um dies zu posten. Es wird also gesendet, wenn ich draußen klicke, jemand kann das sehen und klicken und sagen, Okay, ändere dieses Hintergrundbild und jemand anderes kann sehen, das habe ich schon getan. Bitte überprüfen Sie die Revisionshistorie. So können sie in der Revisionsgeschichte sehen , dass dieses Hintergrundbild bereits geändert wurde. So funktioniert es also und so sieht es aus. Sie können jeden beliebigen Teil Ihres Designs auswählen , den Sie kommentieren möchten. Vielleicht kannst du etwas sagen wie füge ein paar Grafiken und den Hintergrund hier ein paar Grafiken und den Hintergrund hinzu oder so etwas. Sie verstehen also den ganzen Punkt und Sie verstehen, wie das funktioniert. Dann haben wir die Entwicklung. Und das ist natürlich besonders nützlich für Entwickler. Hier können sie alle möglichen Codefragmente sehen , dort können wir alle Farben sehen, die Sie verwenden, die Typografie, die Sie verwenden. Und dort können Sie Ihr Design weiter überprüfen, bevor sie tatsächlich mit der Entwicklung beginnen, und ihren Arbeitsablauf erheblich beschleunigen. Was wir hier also haben, sind die Vermögenswerte. Das sind also die Assets , die Sie als Download vorbereitet haben. Acids, wir haben Anmerkungen. Wenn also Anmerkungen hinzugefügt wurden, wenn Sie mit dem Designsystem verknüpft sind, können Sie die Plattformen für Gehörlose wechseln und die Farben festlegen und die Werte auf der aktuellen Seite abrufen. Wenn ich also genau dort klicke, können Sie sehen, dass wir all diese Farben haben. Und Sie können ein Duplikat dieser Farben finden. Und Sie können zwischen Hex, RGB und allen möglichen dieser verschiedenen Farbmodi wechseln. Denn je nachdem, welchen Farbmodus Ihre Entwickler verwenden werden, wird es für sie einfach sein, dies zu tun. Sie können also sehen, dass Säuren derzeit Prototypenseiten nicht unterstützt werden. Sie können mehr Plug-ins verwenden, um Designs aus diesen Tools zu importieren . Und Sie können sich die Tutorials ansehen, wenn Sie Assets importieren möchten , und Sie können sich Anmerkungen ansehen. Wir haben noch keine. Und Sie können, wie gesagt, auf das Designsystem verlinken , wenn Sie möchten. Und Sie können die Entwicklungsplattform wechseln. Im Moment haben wir also Web. Das sind also deine Einheiten. Wir haben iOS, wir haben Android und Custom. Und Sie können die Werte direkt hier eingeben. Wenn ich also das Web auswähle, wird das unsere Hauptplattform sein , die wir als Entwickler dafür entwickeln werden . Wenn Sie also den Mauszeiger über Ihr Design bewegen, werden Sie sehen, dass die Zeichenflächengröße 1920 ist. Und Sie können sehen, dass dies 1.000 Pixel hoch ist, was der Abschnitt dieser Seite ist. Und wenn ich den Mauszeiger über verschiedene Abschnitte bewege, können Sie die Abstände zwischen den einzelnen Elementen sehen Mauszeiger über verschiedene Abschnitte bewege, . Sie fragen sich vielleicht, wie Entwickler das tatsächlich verwenden werden. Nun, es ist ganz einfach, wenn sie tatsächlich sehen, dass dieser Button z. B. 366 mal 60 ist. Sie können es auswählen. Und sie werden hier nicht einfach die richtigen Werte bekommen. Sie werden auch die Codefragmente bekommen. Sie werden die Breite und Höhe sehen und ganz einfach den Code kopieren und in ihren Code-Editor einfügen können , sodass sie viel schneller arbeiten können. Wir haben das z.B. , was das Logo ist. Sie können sehen, wie es aussieht. Und natürlich kannst du hier die Entwicklungsplattformen ändern , wenn du andere Werte erhalten möchtest, z.B. und solche Sachen. Und schließlich haben wir verschiedene Sharing-Optionen. So können Sie private, öffentliche oder eingebettete Projekte teilen. Das ist sehr nützlich, vor allem, wenn Sie mit externen Mitarbeitern zusammenarbeiten, wie zum Beispiel mit einem Vorstand oder Personen aus einem anderen Unternehmen, mit dem Sie an diesem speziellen Projekt zusammenarbeiten. Es kann also sehr nützlich sein, dies außerhalb Ihrer Organisation oder außerhalb Ihres Kreises von Personen, die mit Ihnen an diesem bestimmten Projekt arbeiten, zu teilen dies außerhalb Ihrer Organisation oder außerhalb Ihres Kreises von Personen, die mit Ihnen an diesem bestimmten Projekt arbeiten . Deshalb ist diese Version nützlich und deshalb ist diese Option nützlich, um über Zusammenarbeit zu sprechen. Mock plus rP bietet großartige Funktionen für die Zusammenarbeit, über die wir im nächsten Video sprechen werden. Also sehe ich dich dort. 30. ZUSAMMENARBEIT: Zusammenarbeit ist ein wirklich wichtiger Teil eines Redesign-Prozesses , denn dort bekommst du das Feedback oder du bekommst Hilfe von einigen externen Designern, entweder als Teil deines Teams oder von Designern, die dir von außerhalb des Teams helfen. Aber wie kann man das in mehr plus rP machen? Lassen Sie mich Ihnen kurz zeigen, wie Sie genau das tun können. Also hier sind wir wieder in mehr plus rP. Und wenn Sie Ihre Mitarbeiter einladen möchten, müssen Sie nur hier klicken , wo Mitglieder stehen. Jetzt können Sie diese Mitglieder einladen und ihnen alle möglichen Berechtigungen geben. So können sie das Design bearbeiten, beenden, sie können Spezifikationen kommentieren und ansehen oder sie können erraten werden, um nur eine Vorschau anzuzeigen. Es liegt also wirklich alles an dir. Wenn Sie jemanden einladen möchten, Ihnen beim Design zu helfen, müssen Sie ihm natürlich jemanden einladen möchten, Ihnen beim Design zu helfen, die Aufgabe geben, ihn zu bearbeiten und zu gestalten. Und alles, was Sie tun müssen, ist einfach diesen Link zu kopieren , diesen Link mit ihnen zu teilen , und sie werden zuerst in Ihr Team und dann zu diesem Projekt eingeladen , um mit Ihnen bearbeiten zu können. Jetzt Berechtigungen, Projekttyp, Sie können es auf privat setzen, sodass es für alle Mitglieder dieses Projekts oder Teams zugänglich ist. Zugänglich für alle Mitglieder des Koran-Teams. In meinem Fall würde ich es so umstellen und auf Senden klicken, dann auf, Schließen, weiße Mitglieder. Da hast du es. Und dann werden sie mit mir darauf zugreifen können. jetzt in Echtzeit wirklich wichtig ist, Was jetzt in Echtzeit wirklich wichtig ist, ist die Verwendung von Knoten. Wechseln Sie jetzt hier zu den Knoten. Und wenn du dann etwas sagen musst, dann füge es den Notizen hinzu. Sie werden es sehen können, sie werden darauf zugreifen können. Und natürlich wird es für sie sehr einfach sein zu verstehen, was Sie meinen. Du kannst deine Kommunikation aber auch außerhalb von Mock plus rP erledigen , aber es ist einfach einfacher, alles in einem Tool zu haben , wie es hier ist. Wenn Sie also etwas hinzufügen oder etwas entfernen möchten , können Sie einfach die Notiz hinzufügen und die andere Person im Team wird diese Notiz sehen. So einfach ist es also, mit anderen an Ihrem Projekt zusammenzuarbeiten. Und denken Sie daran, Sie können dies auch in Mock Plus Clubbed tun. Nur ein bisschen fortgeschrittener mit den Tools für Entwickler, z.B. und Sie können Ihr Projekt von mehreren Personen bearbeiten lassen. So können Sie auf der einen Seite die Präsentation, die Kunden, z.B. oder Stakeholder oder einige neue Teamkollegen im Team machen. Auf der anderen Seite können Entwickler diese Spezifikationen und Maße einfach bearbeiten und ausschneiden, und Maße einfach bearbeiten und sodass sie für die Entwicklung bereit sind. Andererseits können Sie hinter den Kulissen arbeiten und einige dieser Änderungen in Echtzeit erstellen und anpassen und einfach den Prototyp aktualisieren, den Link aktualisieren, z. B. das MOP plus Cloud-Projekt aktualisieren, und jeder im Team kann Version und die Versionierung hinter diesem Projekt auch in der Cloud sehen Versionierung hinter diesem Projekt . Wenn Sie die Bibliothek, die Sie bereits erstellt haben, schnell mit Ihren Teamkollegen teilen möchten , müssen Sie nur hier auf diese drei Punkte klicken . Klicken Sie auf Teilen. Und es wird diesen Dialog zeigen, wenn du ihn mit dem aktuellen Teamhit teilen möchtest, okay? Und dann kannst du das mit dem aktuellen Team teilen. Und alle in Ihrem Team erhalten eine Benachrichtigung, dass diese Bibliothek mit ihnen geteilt wurde. Wie bereits erwähnt, können Sie hier das Offline-Präsentationspaket herunterladen , wenn Sie es mitnehmen müssen, z. B. auf Ihrem Laptop oder auf Ihrem Telefon. Vielleicht möchtest du es einfach zusammenpacken und einfach mitnehmen, um es jemandem persönlich zu zeigen, dann kannst du einfach hier klicken, um es herunterladen und offline mitnehmen zu können . Wenn Sie diese RPI-Datei exportieren möchten, können Sie hier im Menü auf RPI-Datei exportieren klicken. Und es wird diese RPI-Datei auf Ihren Computer exportieren und dann können Sie sie so mit Ihren Teamkollegen teilen oder mitnehmen, wohin Sie wollen. So einfach ist es also, innerhalb von Mock plus rP zu arbeiten. Und du kannst einfach hierher zurückkehren. Und Sie können eine Revisionshistorie sehen. Sie können dort klicken. Und Sie können sehen, wer an welchem Tag was geschaffen hat. Wenn Sie also den Mauszeiger bewegen, können Sie einige Änderungen sehen, die vorgenommen wurden. Wenn ich genau dort klicke, wenn ich genau dort klicke und ein wenig entzoome, dann kann ich alle möglichen Änderungen sehen , wie sie aussahen. Also kann ich gleich hier klicken. Also hier haben wir angefangen. Und schließlich haben wir hier aufgehört oder ich kann auf die aktuelle Version klicken und sehen, wie das aussieht. So einfach ist es also, in Mock plus rP zu arbeiten, insbesondere mit einigen externen Teammitgliedern oder Ihren lokalen Teammitgliedern. 31. Outro: Los geht's, wir erreichen das Ende dieser Klasse. Ich hoffe wirklich, Sie hatten Spaß daran, Mach plus rP kennenzulernen und zu erkunden , wie man es benutzt. Ich freue mich darauf, Ihre Kreationen im Klassenprojekt zu sehen . Es gibt ein spezielles Video über eure Klassenprojekte, also schaut es euch unbedingt an und ich freue mich darauf zu sehen, was ihr erstellen könnt. Das war's für diesen. Wenn du auf Mock plus rP zugreifen möchtest, achte darauf, dass du dir das PDF mit einem Link darin Dann kannst du ganz einfach darauf zugreifen und auf diese Weise dein kostenloses Konto erstellen. So stellst du sicher, dass du noch heute loslegst und diese Kreationen startest. Vielen Dank, dass Sie sich diesen Kurs angesehen haben. Wenn Sie interessiert sind, habe ich hier in meinem Skillshare-Profil noch einige andere Kurse zum Thema UI UX Design. Schauen Sie sie sich also auch an. Nochmals vielen Dank, dass Sie sich das angesehen haben und bis zum nächsten Mal, passen Sie auf sich auf.