Einführung in das Prototyping in Axure 9

1. Einführung: He, da. Mein Name ist Fred Beecher, und ich möchte Sie zu meiner Klasseneinführung zum Prototyping und Schauspielerabend begrüßen. Ein bisschen über mich, um loszulegen. Ich trainiere Leute, wie man tatsächlich benutzt, seit 2007, aber dies ist meine erste Gelegenheit, einen Videokurs zu machen und auch einen Online-Kurs zu machen, so dass ich wirklich nicht mehr aufgeregt sein könnte. Jetzt. Dieser Kurs richtet sich in erster Linie an Menschen, die eigentlich neu sind . Aber wenn Sie ein erfahrener Benutzer sind und einige der Funktionen und Funktionen von Version neun in Aktion sehen möchten , ist dies der richtige Ort, um dies zu tun. Wir werden nicht alles durchgehen, aber viele der wirklich wichtigen Sachen werden hier abdecken. Der Weg, der beginnen wird, ist die Zusammenarbeit, um den einfachsten Prototyp der Welt zu bauen. Dies wird Ihnen helfen, ein Gefühl von Akteuren grundlegenden Workflow zu bekommen, und dann werden wir schnell über Aktionen gehen. Du, ich und diese beiden Dinge zusammen werden dir die Grundlage geben, die du für den Rest des Kurses brauchst . Der Rest des Kurses ist in fünf verschiedene Abschnitte aufgeteilt. Der erste Abschnitt wird lernen, wie man den zweiten Abschnitt verdrahtet und bricht, was mein Favorit ist. Wir werden lernen, wie man Interaktionen macht, was mein Lieblingsteil im Prototyping ist. Im dritten Abschnitt erfahren Sie mehr über Meister, die uns dabei helfen, Design- und Funktionalitätskomponenten im gesamten Prototyp wiederzuverwenden . Und dann werden wir uns darauf konzentrieren, wie wir verantwortungsvoll Prototypen entwickeln können. Und dann werden wir über Dokumentation und Zusammenarbeit in Schauspielern reden. Neuer Service, tatsächliche Cloud. Also freue ich mich sehr darauf, loszulegen. Ich hoffe, das bist du auch. Lasst uns voran und wieder gehen. 2. Der einfachste Prototyp der Welt: In Ordnung, lasst uns anfangen, indem wir etwas über Schauspieler lernen. Grundlegender Arbeitsablauf Glücklicherweise ist es ziemlich unkompliziert. Alles, was Sie tun, ist, dass Sie Objekte zu einer Seite hinzufügen. Du machst sie interaktiv. Dann sehen Sie Ihren Prototyp im Browser in der Vorschau. Und wenn Sie Änderungen vornehmen, aktualisieren Sie einfach das Browserfenster mit Ihrem Prototyp darin, und diese Änderungen werden direkt dort angezeigt. Nun werden wir darüber lernen, indem wir den einfachsten Prototyp der Welt bauen . Um das Beste aus dieser Sache herauszuholen, ermutige ich Sie sehr, mit mir zu folgen. Also geh weiter und zerquetsche mein Fenster nach oben und bringe dann tatsächlich in einem anderen Fenster daneben und folge mit, wie ich gehe. Dies wird Ihnen helfen, das Gefühl von Akteuren grundlegenden Workflow zu bekommen. Alles klar, lass uns weitermachen und loslegen. Hallo, alle. Wir werden diese eigentliche Klasse beginnen, indem wir den schnellsten und einfachsten Prototyp der Welt bauen . Also lasst uns mit der Eröffnung des Schauspielers beginnen. Wenn wir Schauspieler öffnen, wird es uns mit diesem Introdialog präsentieren. Lassen Sie uns einfach voran und klicken Sie auf neue Datei und dann tatsächliche wird uns seine Standardeinstellung zeigen. Du, warum wir uns nur auf die Teile der U. I in dieser Lektion konzentrieren , die wir brauchen, um diesen einfachen Prototyp zu erstellen. Nun, sieh dir die U. I an und ausführlich in einer nachfolgenden Lektion. Was wir also mit diesem schnellen, einfachen Prototyp machen wollen, ist, eine Seite mit einer Schaltfläche darauf zu haben, wo Sie auf diese Schaltfläche klicken und Sie zu einer anderen Seite führen. Konzentrieren wir uns zunächst darauf, sicherzustellen, dass wir Seiten haben, die wir brauchen. So wie wir tun, dass eine Schauspielerin hier in diesen Seiten Schmerzen gehen, und wir können sehen, dass Schauspieler hat bereits die erste Seite für uns erstellt. Lassen Sie uns also voran gehen und erstellen Sie diese zweite Seite, indem Sie auf die Anzeigenseitenschaltfläche klicken. Da gehen wir hin. Jetzt können Sie wählen, um es umzubenennen, wenn Sie möchten. Ich werde es mit dem Namen Seite zwei belassen. Nun, was wir tun müssen, ist, einen Knopf auf Seite eins zu setzen. Sie können sehen, dass wir immer noch auf Seite eins durch hier und hier sind. Jetzt ist die gängigste Methode, mit der Sie Objekte zu einer Seite hinzufügen. Ein Schauspieler ist durch die Bibliothek. Eine Bibliothek ist eine Sammlung dessen, was tatsächliche Aufrufe Widgets, die Sie auf einer Seite setzen können. Ich werde dieses einfache hier auswählen und es einfach auf die Seite ziehen. Also ziehen Widgets aus der Bibliothek Sehr, sehr einfache Möglichkeit, Sachen zur Seite hinzuzufügen, denn tatsächlich werde ich DoubleClick Fäuste, die den Text ändern, um zur Seite zu gehen. , jetzt Also, jetzthaben wir eine Seite mit einem Knopf und einer anderen Seite, auf die wir gehen können, aber wir können immer noch nichts damit machen. Was wir also tun müssen, ist, die Schaltfläche auszuwählen und hinzuzufügen, was tatsächlich eine Interaktion aufruft. Jetzt, in Version neun, haben sie stark vereinfacht, wie Sie Interaktionen und Akteure erstellen. So zum Beispiel präsentiert es uns zum Beispielgemeinsame Interaktionen für diese Art von Objekt. Wenn ich also auf diese Schaltfläche klicke, möchte ich einen Link zu einer anderen Seite öffnen. Also werde ich voran gehen und diese gemeinsame Interaktion wählen. Es sagt mir jetzt, ich soll die Seite auswählen, also möchte ich natürlich auf Seite zwei gehen, also werde ich nur darauf klicken, und dann ist das alles, was ich tun muss. Also werde ich zuschlagen. Ok. Alles klar, jetzt haben wir die beiden Seiten. Wir haben den Knopf. Die Schaltfläche ist interaktiv. Nun, was wir tun müssen, ist dies in einen Browser und die Art und Weise, wie wir tun, dass ein Schauspieler einfach durch Drücken dieser Vorschau-Schaltfläche hier, so wird es in einem neuen Browser-Tab öffnen und wir haben unsere Schaltfläche. Und wenn wir auf diese Schaltfläche klicken, scheint es zu verschwinden. Aber was ist eigentlich los? Wenn wir hier klicken, können wir sehen, dass die Seitenhierarchie tatsächlich auf Seite zwei waren. Und wenn wir zurück zu Seite eins klicken, klicken Sie erneut auf diese Schaltfläche, wir gehen zu Seite zwei. Das war's. Sie haben Ihren ersten Prototyp „Herzlichen Glückwunsch“ erstellt. 3. Axure UI: die eigentliche Benutzeroberfläche besteht aus einer ganzen Reihe von verschiedenen Bereichen, Werkzeugleisten und Schmerzen. Nun, das ist nur eine kurze Tour, also werde ich dich einfach an das orientieren, was du in jedem dieser Bereiche beschränkt hast. Während wir fortfahren, wird die Übung in einige der detaillierten Funktionalität, die in jedem einzelnen dieser kleinen Bereiche vorhanden ist, zu bekommen . Beginnen wir also mit dem Drahtrahmenbereich. Dies ist der Hauptbereich, den Sie in einem Schauspieler arbeiten werden, wie Sie Widgets hierher ziehen, um Ihren Drahtrahmen zu erstellen. Jetzt, hier drüben und die Seiten schmerzen. Dies ist, wo Sie eine Liste aller Ihrer Seiten haben und Sie können tatsächlich doppelklicken Sie auf diese. Und das öffnet alle Ihre Seiten, auf die Sie in Tabs klicken, was sehr praktisch ist. Jetzt. Wir haben bereits gesehen, wie wir hier eine Seite hinzufügen können. Wir können auch Ordner hinzufügen, die Ihnen helfen, die Dinge sauber zu halten. Ich werde diesen Ordner schnellsten Prototyp nennen und dann diese beiden Seiten dort hineingezogen nur um alles ordentlich und ordentlich zu halten. Nun, die andere Sache, die wir hier vor sich haben, ist der Umrissschmerz. In diesem Schmerz haben Sie eine Liste von jedem einzelnen Objekt auf Ihrer aktuellen Seite, was sehr, sehr, äh, hilfreich ist sehr, äh, äh, . Und wenn Sie ein Skizzenbenutzer sind, ist dies etwas, das Sie sich sehr, sehr wohl fühlen wird . Also werde ich hier zurück zu Seiten gehen. Und dann werfen wir einen Blick auf die Bibliotheksschmerzen als auch. Der Schmerz der Bibliothek ermöglicht es Ihnen, zwischen drei verschiedenen Bibliotheken zu wählen. Flow sind der Standardbibliotheksfluss und dann ein umfangreicher Symbolsatz , der neu ist. Ich glaube, für neun. Hier gibt es viel mehr als in der Vergangenheit. Ah, ich Austin, behalte es auf allen Bibliotheken und benutze dann einfach die Suchfunktion, die wir später sehen werden. Aber lassen Sie uns es einfach in den Standard setzen. Also lasst uns hier rüber auf die rechte Seite wechseln. Hier drüben haben Sie den Stil, Schmerz, die Wechselwirkungen, Schmerz und die Notizen Schmerzen. Mit dem Stilschmerz steuert dies alle verschiedenen Aspekte der Formatierung für das, was Sie ausgewählt haben. Jetzt ist es sehr kontextabhängig. Also im Moment ist dies die Formatierung, die Sie zu einem Schaltflächenobjekt tun können. Aber ich kann auch auf das klicken, was scheinbar leer ist, aber tatsächlich die Seite ist, und das gibt mir Formatierungsoptionen für die Seite selbst, was für Interaktionen ziemlich interessant ist. Dieser Schmerz ist, wo wir angeben können, wie der Prototyp mit unseren Verhaltensweisen interagiert. Nun, wenn Sie neu zu neun sind, haben Sie Glück, weil das viel rationeller ist als vorher. Aber wenn Sie Schauspieler für eine Weile verwendet haben, wird dies einige gewöhnungsbedürftig. Sie ist jedoch langfristig effizienter. Schließlich, diese Notizen Schmerz ermöglicht es Ihnen, spezifische Informationen über jedes einzelne Objekt auf Ihrem Bildschirm sowie die Seite selbst zu kommunizieren . Dies ist also ein sehr hilfreiches Kommunikationstool, um es so zu machen, dass Sie nicht jede einzelne Interaktion Prototypen erstellen müssen , die Sie Ah dokumentieren können ganze Reihe von ihnen. Wenn man sich diese Schmerzen anschaut, gibt es etwas ganz Neues in Aktion neun, nämlich diese Fähigkeit, die Schmerzen herauszuziehen, was ziemlich interessant ist. Wenn Sie also einen Multi-Monitor eingerichtet haben, wäre eine gute Möglichkeit, dies zu verwenden, alle Schmerzen auf Ihrem kleineren Monitor zu setzen, so dass Sie alle von ihnen jederzeit sichtbar sind, und dann können Sie Ihren größeren Monitor dem Drahtrahmenbereich widmen. Jetzt, um das zurück zu bekommen, gehe ich einfach zur Ansicht und drücke Reset-Ansicht. Nun, endlich, was wir hier haben, ist ah, Toolbar hier oben. Es gibt nicht viel hier, was man normalerweise nicht mit Ah tun würde, rechts, rechts, Klick oder, äh, eine Tastenkombination. Aber Sie haben die Kontrolle darüber, wie Sie Dinge auswählen, und wenn Sie einen Flow erstellen, können Sie Ihre Objekte miteinander verbinden. Nun, Sie sehen das auch hier unten, was scheinbar den Stilschmerz zu duplizieren scheint. Und du hast absolut Recht. - Das tut es. jedoch Das zeigt sichjedochdie ganze Zeit. Es spielt also keine Rolle, ob Sie in den Wechselwirkungen Schmerzen sind, die Notizen Schmerz. Sie haben immer die Möglichkeit, Ihre Objekte zu formatieren. Und das ist der schnelle Rundgang durch das eigentliche Du. Ich freue mich darauf, auf alle Details dieser Bereiche einzugehen, während wir mit der Übungvorankommen Übung 4. Kursprojekt – Einführung: Wenn ich Schauspieler unterrichte, mag ich es, dass Leute versuchen, etwas neu zu erstellen, das bereits existiert. Der Grund, warum ich das tue, ist, weil es wirklich hilft, wenn Sie verstehen, wie Ihr Prototyp am Ende sein sollte. Jetzt für diesen Kurs, die Website, die neu erstellen wird, ist die Sunita Leichtathletik-Website. Bitte gehen Sie weiter und sehen Sie sich die Kursbeschreibung an, um einen Link zur Website zu erhalten. Der Grund, warum ich diese Website gewählt habe, ist, weil sie eine Balance aus einfachen und komplexen Interaktionen hat und sie reagiert. Layouts sind jetzt ziemlich unkompliziert. In den nachfolgenden Klassen werden wir die Sunita-Website nur mit höherer Treue neu erstellen. , Mach dir keine Sorgen,wenn du deinen Prototyp nicht genau richtig kriegen kannst. Um ehrlich zu sein, könnte es manchmal auch schwer für mich sein. Also, was ich getan habe, um Ihnen in dieser Situation zu helfen, ist in Ihrem Kursmaterial. Ich habe eine tatsächliche Datei hinzugefügt, die den Endzustand all der verschiedenen zusätzlichen Übungen hat , die ich Sie jetzt bitte. Ich ermutige Sie, es Ihre beste Chance zu geben, bevor Sie die Akte öffnen. Aber wenn Sie stumpft sind und Sie einfach nicht vorwärts gehen können, wird diese Datei die Antworten haben, die Sie brauchen. Die Website wird für diesen Schauspieler Klasse ist These Anita Leichtathletik Website Sunita Athletics ist ein Unternehmen, das Fitness-Bekleidung für Frauen macht. Und der Grund, warum ich diese spezielle Website Teach Schauspieler liebe, ist, weil es eine große Mischung aus einfachen Layout und komplizierten Interaktionen ist, so dass wir hier an der Spitze starten können. Sie sehen, dass wir diese Top-Funktionsleiste hier oben haben und dann haben wir ah ziemlich Standard-Navigationsleiste hier unten mit einigen Suchfunktionen sowie, ah Mega-Menü, das eine andere gemeinsame Art der Interaktion ist. Und wir werden diese Art von Interaktion in dieser Klasse auf prototypisieren. Dann können Sie dieses große Bild hier eine Menge wirklich reicher visueller Inhalte sehen, die wir auch einen Schauspieler machen können . Und wie wir hier nach unten scrollen, gibt es ah ah Abschnitt hier, der die Produktkategorien hat und wir sehen einige interessante Maus über Interaktionen. Wir werden vereinfachte Versionen dieser Interaktionen in dieser Klasse prototypisieren. Wenn wir weiter nach unten scrollen, sehen Sie mehr große blockige visuelle Inhalte. Wie wir hier unten bekommen, werden Sie ein ah Produkt-Raster sehen, das eine gemeinsame Sache in jeder E-Commerce-Website ist. Und wir werden diese Art von Interaktion als Teil dieser Klasse prototypisieren, aber tatsächlich hat auch ein spezielles Objekt speziell für diese Art von Anwendungsfall. Nun, die Verwendung dieses Objekts ist ziemlich kompliziert, so werden wir speichern, dass für eine andere Klasse, wie wir weiter scrollen wir Seymour große Bild-Inhalte . Ähm, und das ist die Website. Mehr oder weniger. Nun, die andere tolle Sache an dieser Seite ist, dass sie reagiert, so dass wir diese Website verwenden können uns zu helfen, für etwas zu schießen. Wenn wir mit adaptiver Nutzung arbeiten, wird ein Schauspieler und das ist die Website für diese eigentliche Klasse neu erstellen. Ich bin wirklich aufgeregt, damit anzufangen und mich mit dir zu befassen. 5. Einführung in Wireframing: Alles klar. In diesem ersten Abschnitt werden wir lernen, wie man einen Drahtrahmen in Aktion baut. Wir beginnen mit der Definition von Seitendimensionen. Fahren Sie fort, indem Sie Shapes, Textbilder und Symbole auf der Seite platzieren. Und dann werden wir umschließen, indem wir lernen, wie man Ebenen nach neun navigiert, die tatsächlich von früheren Versionen aktualisiert wurde. Nun, da die Sunita-Website so bildschwer ist, habe ich eine ganze Reihe von vorgeschnittenen Bildern in Ihre Kursmaterialien aufgenommen. Fügen Sie ermutigen Sie, die in Ihrem Draht Rahmen nur Ursache zu verwenden. Das wird die Dinge sehr schnell beschleunigen. Und mach dir keine Sorgen um die Verwendung dieser Bilder. Ich habe sie von einer Reihe von verschiedenen Stockfoto-Sites bezogen, so dass Sie alle bereit sind, diese zu verwenden. Alles klar, lass uns weitermachen und loslegen. 6. Mit Seiten arbeiten: In dieser kurzen Lektion lernen wir die Grundlagen, wie Sie mit dem Bau eines Prototyps in Aktion beginnen. Diese Grundlagen erstellen Seiten und geben ihre Größe an, damit wir hier sehen können, dass wir bereits die schnellsten Prototyp-Bildschirme haben, die alle in ihrem Ordner versteckt sind. Also werde ich einen anderen Ordner für den Sinead A-Prototyp erstellen, Ordnung. Und dann muss ich auf Seite hinzufügen klicken, um eine weitere Seite zu erstellen, die ich einfach zu Hause anrufen werde. Und jetzt können Sie sehen, dass dies nicht wirklich in diesem Ordner ist. Also muss ich es packen und es dann in diesen Ordner ziehen, und da gehen wir. Nun, diese Seite ist völlig roh. Ich habe überhaupt keine Informationen darüber angegeben. Also, wenn ich es öffne, ist es nur, dass es weitergeht und weitergeht. Nun, was ich tun möchte, ist, dass ich dies zu einer sehr spezifischen Größe machen möchte. Die Art und Weise, die Sie tun können, ist, dass Sie in die Dropdown-Liste der Seitendimensionen gehen können, und Sie können tatsächlich aus einer Reihe von verschiedenen Vorlagen wählen, je nachdem, was Sie tun. Jetzt bin ich zufällig auf einem Mac Book Pro, was ich hier nicht wirklich sehe. Also werde ich voran gehen und ein benutzerdefiniertes Gerät erstellen, und ich weiß zufällig, dass die Breite meines Bildschirms 1440 Pixel beträgt. Also werde ich voran gehen und ein benutzerdefiniertes Gerät erstellen, Also werde ich angeben, dass hier und dann werde ich wählen, nicht mit angeben. Also jetzt, wenn wir hier rüber scrollen und dann ein wenig nach unten zoomen, können wir sehen, dass wir eine definierte Grenze für unser Design haben. Und da hast du es. Dies ist die Seite, die verwendet wird, um mit dem Bau unseres Prototyps der Sunita-Website in der nächsten Lektion zu beginnen . 7. Formen und Text platzieren: in dieser Lektion lernen Sie die Grundlagen des Platzierens von Formen und Text auf einem tatsächlichen Drahtrahmen kennen. Jetzt gibt es drei Möglichkeiten, dies zu tun. Ich fange mit dem häufigsten an, nämlich etwas aus der Bibliothek zu ziehen, bevor wir zu tief in das kommen. Werfen wir einen Blick auf Thesis Anita Website und treffen einige Entscheidungen darüber, was konzentrieren wird. Also konzentrieren wir uns auf diese obere Bar hier oben und dann bemerken, dass es einen ah ah ah, Hintergrund zu diesem Wagen hier drüben gibt, der etwas anders ist. Und dann werden wir uns auch auf diesen Knave-Bar konzentrieren, und wir haben dieses große Bild hier mit etwas Hut-Text. Also lasst uns zurück zu tatsächlich jetzt hier ist Thebe Ox, den ich aus der Bibliothek gezogen habe . Wie Sie sehen können, sobald ich mich gegen die Grenzen der Seite dort, diese roten Linien, die zeigen, sind neu in neun. Diejenigen von euch, die große Skizzenfans sind, werden das sicher zu schätzen wissen . Und da gehen wir. Dies ist unser Top sind in Ordnung, die zweite Möglichkeit, dass Sie etwas hinzufügen können, ist durch dieses Einfügen-Menü. dies Auch ist brandneu in Version neun und sollte auch etwas ziemlich vertraut für eine Skizze Benutzer sein. Also werde ich hier auf Rechteck klicken, und ich werde nur ein Rechteck zeichnen. Ähm, das wird ungefähr der Form des Hintergrunds der Auto-Sache entsprechen. So können Sie hier sehen, wenn ich mich gegen etwas bewege, das ich tatsächlich an diesem Ding schnappen kann, was ziemlich praktisch ist. Also, ähm, das ist wahrscheinlich nicht die richtige Form geprägt, aber nah genug. Ich will keine Grenze, also werde ich hier gehen und die Grenze auf Null ändern und die Füllung etwas dunkler machen , damit das gut aussieht. Okay, jetzt, ich weiß, ich muss das hier rüber bewegen, und ich werde tatsächlich gehen und speziell diese 40 Pixel machen, weil ich weiß, dass das die Höhe der, äh, Bar ist und auch diese 70 Pixel breit. Das ist sehr praktisch, um dies im Stil tun zu können, äh, äh, hier drüben zu bezahlen. Aber Sie können es auch hier oben in der Stil-Schnellleiste zu einer Bar tun. Alles klar, jetzt haben wir diese beiden Dinge in der dritten Art und Weise ist wieder etwas, das sehr vertraut sein wird, Benutzer zu skizzieren. Es ist damit verwandt. Legen Sie Männer ein. Weißt du, wenn du etwas siehst, das so aussieht , hast du nicht diese Eigenschaft, über die ich reden werde, eingeschaltet. Aber wenn Sie hier nur etwas sehen, das P oder R oder O oder L sagt, haben Sie etwas eingeschaltet, das in Version neun Code-Single-Tastenkombinationen neu ist. Nein, ich habe das speziell deaktiviert, weil ich so nicht gerne arbeite. Wenn Sie jedoch sicherstellen möchten, dass Sie es aktivieren, können Sie zu den Voreinstellungen oder dem Äquivalent in Windows gehen und zum Canvas-Abschnitt gehen und einzelne Tastenkombinationen aktivieren auswählen. Also, was ich jetzt tun kann, ist, wenn ich ein Rechteck zeichnen will, ich drücke einfach die R-Taste und dann kann ich gegen diese Grenzen schnappen und wir werden ah, da ist meine nab unsere wieder ich werde von der Grenze zu Null und die Füllung zu etwas nicht ganz so dunkel. In Ordnung. Und dann, ich weiß, dass es 70 Pixel sein muss ich weiß, dass es 70 Pixel sein muss. Also traf das. Und da gehen wir. Es gibt jetzt Bar. Nun, eine Sache, die ich schnell machen möchte, ist, hier auf den Umriss zu wechseln. Jetzt haben wir drei Rechtecke auf der Seite und alles, was hier drüben steht, ist Rechteck, Rechteck. Eines der Dinge, die in Aktion absolut kritisch ist, ist sicherzustellen, dass Sie alle Widgets benennen , die Sie platzieren. Denn wenn Sie dies nicht tun, sobald Sie mit Interaktionen arbeiten, verlieren Sie den Überblick über die Objekte, die Sie zu erzwingen versuchen, irgendeine Art von Aktion auszuführen. Also ist es eine Gewohnheit, dass ich Ihnen empfehlen, dass, wenn Sie etwas spielen, Sie nennen es. Ich werde diesen Wagen BG anrufen. Ich nenne das eine obere Bar, BG. Und Sie können dies auch direkt aus dem Umriss selbst tun, indem Sie zu langsame Taps auf den Namen machen . Also diesen, den ich nie Bar BG nennen werde. Alles klar, jetzt habe ich diese Gitter. Das nächste, was ich tun möchte, ist Teoh Setzen Sie das große Bild jetzt rein. Die meiste Zeit, wenn ich es mache, ah, Prototyp. Ich habe keine Art von Fotografie, also verwende ich ein Objekt, das als Platzhalter bezeichnet wird. Nun, eines der lustigen Dinge, die Sie hier in dieser Bibliothek tun können, ist, dass Sie tatsächlich nach Dingen suchen können, indem Sie ihren Namen eingeben. Also weiß ich, dass dies Platzhaltersong in einem Typ Play Ass genannt wird. Da gehen wir. Und da ist mein Platzhalter. Der Grund, warum ich das mag, ist, weil es mir erlaubt, eher es mich daran hindert, , Teoh zu versuchen,visuell durch eine Liste von Dingen zu blättern und fehlenden Dingen zu blättern. In Ordnung. Dies, ich weiß, muss so breit wie die Seite sein, und es muss auch 14 20 Pixel hoch sein. Ordnung, also ist dies ein Platzhalter, der für das Bild steht, aber es wird hinter etwas Text sein. Eines der Dinge, die ich tun möchte, ist, dass ich es sperren möchte. Also gehe ich nach rechts, klicke und wähle Schloss, Standort und Größe. Das bedeutet, dass, wenn ich diesen Bereich ziehe, nichts passieren wird. Es wird sich nicht bewegen, was sehr hilfreich sein wird, wenn ich anfange, Text darauf zu bewegen. Na gut, also gehen wir hier rüber und suchen einen Text. Eines der wichtigsten Textelemente, die Sie verwenden werden, heißt label, daher werde ich nach einem Label suchen. Da gehen wir. Und ich ziehe es hier rauf, weil ich wenigstens einen Knave-Gegenstand da oben legen will, also werde ich hineinzoomen. Das ist nicht groß genug. Gekämpft. So nennt man es 20 Punkte. Los geht's. Und, äh, es so zu bewegen, dass es in die Mitte geht, und ich werde diese Wunschliste nennen, Ordnung? Und dann eines der anderen Dinge, die auch von Ah kommt, die Inspiration hinter der Skizze ist, wenn Sie ein Objekt ausgewählt haben und die Optionstaste gedrückt halten , ähm, für Mac, dann können Sie tatsächlich sehen , wie weit das ausgewählte Objekt von anderen Objekten auf dem Bildschirm entfernt ist. Also, das möchte ich eigentlich 40 Pixel entfernt sein . Also werde ich die Zehe gedrückt halten. Verschiebung in einer geraden Linie hier drüben. Halten Sie sich fest. Option C 34. Ok, jetzt werde ich meine Pfeiltasten benutzen und einfach über sechs Pixel bewegen. Also 123456 Und wenn ich die Option nochmals drücke? Ja, 40 Pixel. Das ist es, was ich will. Ok, verkleinern. Und das Etikett ist zu klein für etwas, was wir hier reinbringen müssen. Also werden wir mit der anderen Art von Textobjekt in der Tat arbeiten, die die Überschrift ist. Es gibt auch einen einen Absatztyp. Aber darüber werden wir ein wenig später reden. In Ordnung, also werde ich das hier reinwerfen. Das ist nicht groß genug. Ich nenne das 80 Punkte und sage, dass wir dafür nicht wirklich mutig brauchen. Okay, also werde ich das zentrieren, und das ist der Name der Firma. Alles klar, jetzt habe ich das verschlossen, damit ich das ungestraft bewegen kann. Lassen Sie uns das mit diesen Kerlen zentrieren. Da gehen wir. Wir haben keine Zeit, um Draht Rahmen diese ganze Sache, aber wenn Sie öffnen die Klasse Datei Interaktion abgeschlossen Übungen und gehen Sie auf diese Seite L. Owen zu Hause Formen sein. Sie können sehen, wie es aussieht, wenn Sie Rahmen aus dieser ganzen Seite tragen würden. Und das habe ich für dich. der nächsten Lektion erfahren Sie, wie Sie mit Bildern in Ihrem eigentlichen Prototyp arbeiten. 8. Mit Icons und Bilder arbeiten: in dieser Lektion erfahren Sie, wie Sie mit Bildern und Symbolen arbeiten. Ein Schauspieler. zuerst Lassen Sie unszuerstzum Sunita-Anblick gehen, um zu sehen, wie sie mit diesen Arten von Objekten arbeiten. Es sieht so aus, als gäbe es hier eine Lupen-Symbol. Auf der ganzen Seite gibt es riesige, schöne Bilder. Ah, und es gibt auch diese Sterne hier als Teil der Bewertungen und Bewertungen Funktionalität. Also gehen wir zurück auf die tatsächliche hier und konzentrieren uns auf Icahns erste Scrollen wir nach unten zu unseren Produkten. Ah, und ich werde hier hineinzoomen, um es einfacher zu machen, etwas Layout zu machen. Und ich werde das hier rüber treiben, die Shift-Taste gedrückt halten, um Platz für die Sterne zu schaffen. Okay, jetzt, woher bekommst du diese Sterne? Nun, Schauspieler kommt eigentlich mit einer ganzen Icon-Bibliothek voller guter Sachen. Es gibt so viel Zeug hier, dass es irgendwie schwierig ist zu navigieren, also tippe ich fast immerhier ein,wonach ich suche. Es gibt so viel Zeug hier, dass es irgendwie schwierig ist zu navigieren, also tippe ich fast immer , Also werde ich Star machen, und da gehen wir. Das ist genau das, wonach ich suche. Also werde ich das hier reinziehen, und ich werde wollen, dass das ungefähr 20 Pixel ist, also werde ich die Shift gedrückt halten und die Größe auf etwa 20 Pixel ändern. Da gehen wir hin. Dann werde ich sicherstellen, dass es horizontal am Überprüfungstext ausgerichtet ist und dann meine Ault-Optionstaste gedrückt halten . Teoh, äh, mach mehrere Kopien und sie sind im Moment etwa vier Pixel auseinander, was in Ordnung ist. Es gibt eine weitere, die ich hier hinzufügen muss, und ich kann Stern halb leer oder Stern halb voll wählen, um halb voll zu beginnen, da ich neige dazu, mehr ein Optimist zu sein und ich werde das unten Teoh die gleiche Größe ändern . Da gehen wir, naja, nach unten, um sich in geraden Linien zu bewegen. Und das sieht vorerst gut genug aus. Das sind also die Grundlagen des Umgangs mit Symbolen. Und nach jetzt, lassen Sie uns einen Blick auf Bilder, Scrollen und bewegen erscheinen zu diesem Hauptbild auf einer Website. Typischerweise wird dies das Heldenbild genannt. Also gehe ich Teoh, lösche diesen Platzhalter, den wir vorher hatten, und gehe zurück in die Bibliothek. Aber dieses Mal bin ich auf der Suche nach einem Bild, nicht nach einer Ikone. Also werde ich zurück zur Standardbibliothek gehen und ich werde in diesem Bild-Widget auf einer Linie es an die Leiste und den Rand der Seite hier ziehen . Jetzt ist dies eine von vielen verschiedenen Möglichkeiten, um Bilder im Schlepptau zu bekommen. Schauspieler. Also werde ich einfach darauf doppelklicken, und das wird einen Datei-Browser-Dialog aufrufen, und ich werde hier jetzt in Ihrem Klassenmaterialordner auf Hero klicken. Sie haben beide diese Ordner Sunita Color und Cindy in einer Grauskala. Alle Bilder wurden zahnig passend geschnitten, ah Spezifikationen für Sie leicht in der Lage, diese für Ihre Übung zu bringen. Also werde ich nur darauf doppelklicken, und dort erscheint es in der perfekten Größe, so dass Sie feststellen, dass der Text, der dort war, verschwunden zu sein scheint. Alles, was wir tun müssen, ist zurück zu gehen, und dann kommt der Text zurück. Jetzt gehen wir hier runter zu diesen Kategorien. Zoomen Sie ein wenig und ich werde Ihnen einen anderen Weg zeigen, um ein neues Bild im Schlepptau zu bekommen. Schauspieler. Sie können es einfach per Drag & Drop aus Ihrem Datei-Browser ziehen. Also, da gehen wir, und ich werde online es hier und einfach loswerden dieses Platzhalter und bewegen Sie es über, so ist es schön und ausgerichtet, das sieht ziemlich gut aus und schicke es einfach nach hinten. Es ist nicht ganz so ausgerichtet, wie es sein muss. Das ist wahrscheinlich besser. Alles im Moment, eine andere Möglichkeit, Bilder im Abschlepp-Akteur zu bekommen, ist einfach, auf ein vorhandenes Bild zu doppelklicken weil Sie es tatsächlich mit einem anderen Bild ersetzen können. Also, wenn ich da gerade geöffnet hätte, gehen wir jetzt. Vorbehalt. Wenn das Bild, das Sie ersetzen, nicht die gleiche Höhe und Breite wie das Bild hat, durch das ersetzt wird, das Bild, durch das es ersetzt wird, in diese ursprünglichen Dimensionen zerquetschen. Alles klar, jetzt weißt du, wie man mit Icons und Bildern und Schauspielern arbeitet. Gehen Sie also voran und schließen Sie all dies ab, so dass es wie diese bestimmte Seite aussieht. Die Home-Bilder in Ihrer ausgefüllten Übungsdatei und wir werden Sie in der nächsten Lektion sehen. 9. Gruppierung und Ebenen: in dieser Lektion erfahren Sie mehr über das Gruppieren von Objekten. Jetzt ein Schauspieler. Dies mag nicht so aussehen, als ob es so wichtig ist, über etwas zu wissen, aber es ist besonders wichtig im Schauspieler, und das ist wegen dem, was eigentlich bekannt ist, die Fähigkeit, wirklich reiche Interaktionen zu schaffen. Nun ist das Erstaunliche über Gruppen und tatsächlich ist, dass Sie Interaktionen zu einer Gruppe von Objekten zuweisen können . also mit dieser Aufregung voran gehen und schauen, Lassen Sie unsalso mit dieser Aufregung voran gehen und schauen,was wir am Ende unserer letzten Übung haben sollten. Dies ist also die abgeschlossene Version der letzten Übung. All diese Bilder werden hier drinnen ausgestrahlt. Alle Symbole und solche Dinge sind da. Aber wenn wir hier tippen und zu unserem Umriss kommen, schwächen, sehen Sie jedes einzelne Objekt auf den Seiten in dieser Liste, so dass es zuerst ziemlich schwierig zu navigieren. Konzentrieren wir uns einfach auf diesen Bereich hier. Also, das ist, uh, offensichtlicher Inhaltsblock. In der Regel wird dies als Held im Webdesign Lingo bezeichnet, also wählen wir das Hintergrundbild, die Überschrift, den Unterkopf und diesen kleinen Button, den Sie hier in der Gliederung sehen können. Diese Dinge, die sie ausgewählt sind, ähm, die Auswahl spiegelt sich hier wider. Sie können auch Dinge direkt aus der Gliederung auswählen, wenn Sie möchten, und Sie drücken Sie einfach Rechtsklick für PC oder Steuerung. Klicken Sie für Mac auf Sie, Congar voraus und gruppieren Sie das oder drücken Sie einfach Befehl oder steuern G und es gibt unsere Gruppe. Jetzt müssen wir nur noch die Gruppe benennen. Ich werde diesen Helden nennen. Da gehen wir, und wir können hier drüben sehen, dass diese Gruppe als Objekt gedacht wird. Wenn ich also auf Interaktionen klicke, habe ich die Möglichkeit, eine neue Interaktion basierend auf dieser Gruppe zu erstellen, was ziemlich fantastisch ist. Nun, um zur fertigen Datei zu wechseln, möchte ich Ihnen zeigen, wie es aussieht, wenn Sie alles in Gruppen organisiert haben um zur fertigen Datei zu wechseln,möchte ich Ihnen zeigen, wie es aussieht, wenn Sie alles in Gruppen organisiert haben. Wenn wir uns das ansehen, können wir sehen, dass alle blawg Beiträge, alle einzelnen Produkte, alle verschiedenen Abschnitte der Seite. All diese verschiedenen Dinge werden hier als einzelne Gruppen dargestellt. Wenn wir sie dort erweitern, können wir das alles dort sehen. Und jede dieser Gruppen spiegelt im Wesentlichen einen Inhaltsblock auf der Hauptwebsite wider. Also hier ist der Held, die Kategorien. Hier ist der Funktionsblock, usw. , usw. Also, das ist Gruppierung von Objekten und Akteurs. Die nächste Lektion, über die ich wirklich aufgeregt bin, weil wir endlich dazu kommen, Interaktionen zu schaffen , sehen Sie, dann. 10. Einführung in Interaktionen: Alles klar, Interaktionen, Interaktionen lüften meinen Lieblingsteil des Prototypings. Das ist das, was du benutzt hast, um deinen Prototyp Sachen zu machen. Und Action verfügt über umfassende Funktionen rund um Gebäudeinteraktionen. Das ist einer der Gründe, warum ich es so sehr liebe. Nun, wenn Sie ein erfahrener Benutzer sind, empfehle ich Ihnen, diese Lektion zu waschen, da Interaktionen sind, wo sie einige der größten Änderungen vorgenommen haben. Die schlechte Nachricht ist, dass, wenn Sie erfahren sind, das wird etwas daran gewöhnen. Aber die gute Nachricht ist, wenn du neu bist, es ist viel einfacher zu lernen, als es früher war. So in Aktion neun und Interaktion besteht aus drei Dingen. Ein Ereignis, Aktionen und Ziele. Ein Ereignis ist etwas, das einem Prototyp oder etwas innerhalb eines Prototyps passieren kann. So klicken Sie auf eine Seite, Sind Sie auf einen Link klicken? Eso. Der Klick ist das Ereignis. Die Aktion ist, was passiert, wenn das Ereignis eintritt. Also auf Klick gehen Sie zu einer neuen Seite, gehen Sie zu den neuen Seiten Theater in jetzt müssen Sie angeben, welche Seite Sie gehen möchten, und das ist das Ziel. Also klicken Sie auf das Ereignis öffnen neue Seite ist die Aktion, und die Kategorieseite ist das Ziel. In dieser Lektion lernen Sie,wie Sie einfache Interaktionen wie diese durchführen können, einschließlich Links und grundlegende Maus-Overs. In dieser Lektion lernen Sie, wie Sie einfache Interaktionen wie diese durchführen können, Aber Sie werden auch lernen, wie Sie satte Maus-Overs sowie Mega-Menüs erstellen. Das wird also wirklich Spaß machen. Lasst uns weitermachen und loslegen. 11. Verknüpfung mit einer anderen Seite: in dieser Lektion lernen wir die Grundlagen für das Erstellen von Interaktionen in tatsächlichen Interaktionen kennen, die Ihren Prototyp interaktiv machen . Bevor wir anfangen, sollten wir sicherstellen, dass Ihr Prototyp so aussieht. Bisher haben Sie alle Inhalte eingezogen und, ah, Sie haben die Layouts so gemacht. Ähm, und dann, ah, wenn Sie das alles aufgestellt haben, können wir damit weitermachen. Also in dieser Lektion, was wir tun werden, ist, dass wir diesen Shop Link hier nehmen und machen, dass uns zu einer anderen Seite. Also zuerst müssen wir die zweite Seite erstellen, also werde ich es hier oben hinzufügen. Ich werde es Shop nennen. Da gehen wir. Und jetzt werde ich darauf doppelklicken. Teoh, öffne es im Verschleiß von hier, Seitenmaße. Ich werde das benutzerdefinierte Gerät wieder treffen und 14 tun. 40 und Nr. Mit hier gehen wir. In Ordnung. Jetzt muss ich hier nur etwas tun, was man hier alles setzen kann. Ich werde nur eine graue Schachtel setzen. Ah, das sagt mir, dass dies tatsächlich die Shop-Seite ist . Also werde ich darauf doppelklicken und nur sehr klar artikulieren, was das ist. In Ordnung, also haben wir diese Seite. Ich werde auf dieses X klicken, um das zu schließen. Nun, es gibt eine Reihe von Möglichkeiten, wie wir tatsächlich zu diesem Objekt gelangen könnten. Was ich tun möchte, ist, dass ich diesen Link direkt auf dem Wortshop selbst erstellen möchte, damit ich hier klicken kann , was die Knave-Bar-Gruppe ist. Dann kann ich noch einmal darauf klicken, welches die Shop Link-Gruppe ist. Und dann kann ich auf und wieder klicken. Und jetzt habe ich das Ding, das ganz unten in dieser Gruppe steht, was der Shop-Link ist. Aber was ich eigentlich tun werde, ist, dass ich hier rüber zum Umriss gehe, um Ihnen zu zeigen, wie Sie es navigieren, von dort zu navigieren. Also weiß ich, dass dies die nab unser ist, auch wenn ich nicht tat, wenn ich auf seine hier ausgewählt klicke. Also werde ich das und das Meer erweitern. Da ist der Laden knave Link. Das ist also die ganze Gruppe. Und da ist der Shoptext selbst. Also, was ich tun werde, ist hier rüber zu gehen und auf Interaktionen zu klicken. Eines der Dinge, die neu und Schauspieler neun ist, ist ah, rationalisierte Art, Interaktionen zu schaffen. Oh, die Art und Weise, wie es das rationalisiert, ist, dass wir einige der üblichen Interaktionen hier sammeln . Was ich also tun möchte, ist, wenn ich darauf klicke, also möchte ich auf eine andere Seite gehen. Das bedeutet also, dass ich einen Link öffnen möchte. Alles, was ich tun muss, ist, darauf zu klicken. Und jetzt die Seite, auf die ich gehen möchte. Ich wähle das hier aus, traf, okay, und ich bin fertig. Mal sehen, wie das funktioniert. Sie gehen voran und drücken Vorschau, um den Prototyp zu generieren. Und wenn ich Ihnen sagen kann, dass der Laden jetzt interaktiv ist. Also, wenn ich darauf klicke, dass wir gehen. Ich bin auf der Shop-Seite. Nun, eine Sache, die ich Ihnen zeigen möchte, ist, dass Sie tatsächlich Links auf Mawr erstellen können, als nur einzelne Objekte. Was ich also tun werde, ist, dass ich diese Interaktion hier auswählen werde, indem ich darauf und ich werde löschen drücken, und das wird die Interaktion loswerden, damit Sie auch Interaktionen löschen können. Jetzt werde ich, äh, äh, wählen Sie den Shop knave Link. Das ist also eine ganze Gruppe, und ich werde eine neue Interaktion erstellen. Jetzt. Es gibt mir keine gemeinsamen Interaktionen, weil das eine ganze Gruppe ist. Wenn ich also eine neue Interaktion trage, muss ich wählen, welche Interaktion verwendet werden soll. Jetzt gibt es eine Menge von dem, was Ereignisse genannt werden, also sind Ereignisse Dinge, die mit einem Prototyp gemacht werden können. Normalerweise sind es Dinge, die eine Person tun kann, wie klicken Sie auf DoubleClick. Oh, unsere drücken Sie die Maus nach unten. Aber es gibt noch eine Reihe von anderen Dingen . Wir werden im Moment nicht in der Lage sein, all diese anzusehen, also werde ich einfach auf Click wählen. Also auf Klick ist meine Veranstaltung. Und jetzt möchte ich bei einer Aktion, die Zehe während dieses Ereignisses passiert, und die, die ich will, ist offene Verbindung. Also diese Aktionen sind die häufigsten für on click. Also werde ich den offenen Link drücken, und dann sollte es von jetzt an vertraut aussehen. Also gehen wir hin. Und wenn ich zu meinem Prototyp zurückgehe und aktualisiere, aktualisiere, dann gehen wir hier durch und navigieren zu dieser Homepage. In Ordnung. Wenn ich auf Shop gehe, gehen wir. Es funktioniert immer noch. Und das Spaßige ist, wenn ich zurückgehe, funktioniert das sogar. Wenn ich hier drüben oben auf dieser kleinen Karotten-Sache bin, gehen wir los. Und das sind die Grundregeln, um bei einer Interaktion einen Akteur zu schaffen. 12. Ein Mega-Menü erstellen: in dieser Lektion erfahren Sie, wie Sie die Sichtbarkeit von Objekten, einem Akteur verwalten und wie Sie diese Sichtbarkeit innerhalb des Prototyps mithilfe der Interaktion mit der Maus steuern können. Bevor wir anfangen, wir einen Blick auf die Sunita-Website und was wir versuchen werden, hier Prototypen zu erstellen. Also auf dieser Seite, ähm, in dieser oberen Leiste, wenn Sie über Shop oder Fax fahren, bekommen Sie dieses große Untermenü hier. Normalerweise nennt man das Mega-Menü und man kann sehen, wie, wenn man hier oben ist, das nicht verschwindet. Aber wenn du hier raufgehst, geht es weg. Ah, und auch, wenn du es so abblätterst, dann geht es weg. Wir werden etwas ziemlich Ähnliches im Schauspieler machen und wie es aussehen wird, ist das. Es wird einfacher sein, als es tatsächlich auf der Sunita-Website ist. So würden Sie Maus über Shop so und dann, wenn Sie nach oben gehen, wird es verschwinden. Und wenn du da runtergehst, wird es auch verschwinden. Alles klar, lass uns weitermachen und loslegen. Also, wenn wir das tatsächlich hier zurückwechseln, müssen wir zuerst einen größeren Veranstaltungsort erstellen, damit wir das tun können , indem wir einfach eine Box auf die Seite ziehen. Ähm, ich ziehe einfach eine große graue Kiste hierher. Und da die Sonne Ito ein etwas transparent ist, werde ich diesen ein wenig transparent machen, um uns das 60 nennen zu lassen. Hey, das sieht vernünftig aus. Alles klar, jetzt. Ah, wir wollen auch sicherstellen, dass es Etiketten sind. Ich nenne es Mega Menu hier und auch hier drüben. Nein. Lassen Sie uns auch eine Schaltfläche hinzufügen, damit wir auf die Shop-Seite gehen können, doppelklicken Sie darauf und klicken Sie auf Gehe zum Einkaufen. Alles klar, jetzt müssen wir das alles zur gleichen Zeit unsichtbar machen. Und der einfachste Weg, dies zu tun, ist, wie wir vorher gelernt haben, Dinge zu gruppieren. Also werde ich beide Objekte auswählen. Hit Befehl G auf PC. Es würde kontrolliert werden, g. Und jetzt haben wir eine Gruppe. Wir können es hier oben sehen, und ich werde darauf tippen und es sofort benennen. Okay, jetzt haben wir das als sein eigenes Objekt. Jetzt können wir über seine Sichtbarkeit nachdenken. Standardmäßig möchten wir, dass dies unsichtbar ist. Die Art und Weise, wie wir das tun würden, ist schwächer. Setze das als Schauspieler ein. Es gibt verschiedene Möglichkeiten. Wo immer Sie dieses Augensymbol sehen, Sie werden es hier im Stil Schmerz und hier oben in der Stil-Leiste sehen. Sie können dies verwenden, um alles, was Sie ausgewählt haben, auf ausgeblendet zu setzen. Ich bin in der Regel richtig, klicken Sie und setzen Sie versteckt. Und sobald Sie etwas versteckt haben, können Sie sehen, dass es gelb aussehen wird. Und das sagt dir eigentlich, dass da etwas ist. Es ist einfach standardmäßig versteckt. Wenn wir also weitergehen und zu unserem Prototyp gehen und ihn auffrischen, schauen wir mal, wie das aussieht, damit Sie sehen können, dass wir hier überhaupt nichts sehen können. Wir wissen also, dass es wie beabsichtigt funktioniert. Also gehe ich zurück zum Schauspieler, um Dinge einfach zu halten, werde ich diesen Link hier auswählen und die bestehende Interaktion loswerden. Also werde ich die Interaktion hier auswählen, indem ich darauf klicke und dann auf Löschen klicke, um sie loszuwerden . In Ordnung? Und so möchte ich es jetzt so machen, dass dies sichtbar wird, wenn ich hier mit der Maus über diese Gruppe klicke . Also werde ich neue Interaktion treffen und die Aktion, die ich will. Äh, tut mir leid, das Ereignis, das ich seine auf der Maus verwenden möchte eingeben, weil, wenn eine Maus in diesen Bereich betritt, das ist, wenn diese Notwendigkeit Zeh passieren. Die Aktion, die ich haben möchte, ist also um Sichtbarkeit. Und was das ist, ist, dass Show und Verstecken. Wenn ich hier klicke, ein- und ausblenden, wird es mich fragen, was ich ein- und ausblenden möchte. Ich werde die Mega-Menü-Gruppe hier auswählen, und nein, ich kann wählen, um die Sichtbarkeit ausblenden oder umschalten. Sofort. Anzeigen ist standardmäßig ausgewählt, und das ist in Ordnung. Also werde ich schlagen. Okay, in Ordnung. Nun, gehen wir zurück zu unserem Prototyp und aktualisieren und sehen, wie das aussieht. In Ordnung, also hier rumzufahren, ist alles in Ordnung. Meine Maus über Shop. Dann erscheint das Mega-Menü, aber ich kann es nicht wirklich weggehen, und das liegt daran, dass wir diese bestimmte Interaktion noch nicht spezifiziert haben. Also lasst uns wieder zur Aktion gehen und sehen, wie er das tun würde. Ordnung, also werde ich hier rauf gehen und auf Mega-Menü klicken, damit ich hier in diesem Bereich bin und was ich tun werde, ist, ah, ah, ich werde ein Objekt hinzufügen, das einen Hot Spot genannt wird. Und das wird ungewöhnlich erscheinen, warum ich das tun würde, weil Sie denken würden, dass Sie nur in der Lage wären, die Interaktion auf der Maus zu verwenden, um dies verschwinden zu lassen. Aber das Problem ist, dass auf der Maus heraus ausgelöst wird, auch wenn ich so in die Bar gehe. Und wenn ich so in die Bar gehen möchte und das Menü bleibt, kann ich nicht mit der Maus aus verwenden. Also werde ich dieses Hot-Spot-Objekt verwenden. Normalerweise mag ich es etwa 40 Pixel hoch. Das ist normalerweise groß genug, und was dieses Objekt tun wird, ist, dass es völlig unsichtbar ist, so dass Sie hier nichts sehen können, also wird es nur die Eingabe der Maus fangen, also wenn die Maus eintritt dies, dann wird es das Mega-Menü verstecken. Aber wir wollen, dass dies Teil des Mega-Menüs ist, also schaue ich hier in den Umrissen, und im Moment ist es sehr getrennt, also wollen wir es nicht so haben. Also werde ich es hier in das Mega-Mega-Menü ziehen, direkt oben, und ich werde es nennen, weil wir alles nennen. Ein Schauspieler, den ich nennen soll. Ah, Mega-Menü-Händler. Alles klar, und jetzt ist das noch ausgewählt. Also möchte ich meine Interaktion hinzufügen. Ich werde auf der Maus eingeben und wieder möchte ich ein- oder ausblenden. Und wieder möchte ich Mega-Menü ein- oder ausblenden. Aber in diesem Fall will ich es nicht zeigen. Ich will, dass die Zehe es verstecken. Also klicke ich auf Verstecken und Hit. Okay, und jetzt, wenn ich zum Prototyp gehe und ihn auffrische, bringe ich das Menü vorbei und dann raus geht es weg. Und wenn ich hier raufgehe, passiert immer noch nichts. Also sind wir fast da. Gehen wir zurück zu eigentlich jetzt, was wir tun müssen, ist, dass wir es so machen müssen, dass, wenn die Maus wieder in diesen oberen Balkenbereich eintritt, das ist ah, große Gruppe. Wenn die Maus diesen Bereich betritt, wollen wir, dass das Mega-Menü weggeht. Also werde ich weitermachen und immer wieder auf neue Interaktion klicken. Ich werde auf der Maus verwenden, eingeben und ein- und ausblenden, und ich möchte Mega-Menü wieder ein- und ausblenden. Und in diesem Fall möchte ich mich verstecken. Also wähle ich Ausblenden aus und drücke dann. Ok. Und gehen wir zurück zu unserem Prototyp-Refresh. Und wenn ich über den Laden schwebe und hoch gehe, dann geht es weg. Wenn ich über den Laden schwebe und runtergehe, dann geht es weg, was genau das ist, was wir geschehen wollen. Und so verwenden Sie die Maus, geben Interaktion oder in der eigentlichen Notaufnahme ein, um die Sichtbarkeit von Objekten innerhalb des Prototyps zu steuern. 13. Ein Rich Mouseover erstellen: in dieser Lektion lernen wir, wie man eine interaktive Maus über die Interaktion im Schauspieler macht. Wenn wir also hier auf der Sunita Seite nach unten scrollen und sich die Kategorie-Blöcke ansehen, können wir sehen, dass es eine Menge Dinge passiert, wenn Sie mit der Maus über das Hintergrundbild dunkelt. Dieser Titel bewegt sich nach oben und diese Dinge erscheinen, und dies erstreckt sich sogar in. Jetzt können Sie all dies im Schauspieler tun, aber um dies zu erreichen, erfordert ein wenig fortgeschrittenere Techniken, die außerhalb des Geltungsbereichs dieser Einführungsklasse sind . Werfen wir einen Blick darauf, was wir stattdessen tun werden, es ist ziemlich nah, aber es ist nicht der ganze Weg dorthin. Wenn wir also mit der Maus über diese, haben wir den Kategorientitel, der sich nach oben bewegt, und das Bild im Hintergrund ist ein wenig großartig. Und dann haben wir diese Gegenstände hier, die erscheinen. Also lasst uns voran gehen und schauen, wie das geht. Ein Schauspieler. Ich werde hier zu unserem Prototyp wechseln, und das erste, was ich tun möchte, ist, dass dieser ah Schwärzungseffekt. Die Art und Weise, die ich erreichen werde, ist, indem ich hier eine weitere Box hinzufüge, und ich werde es genau die gleiche Größe machen. Ich werde es nennen, bevor ich etwas anderes mache. Nennen Sie es Maske. Und die Art und Weise, wie sie tatsächlich diesen Effekt bekommen, ist, dass im Wesentlichen etwas über dem Bild überlagert wird, werde ich dieses schwarz und 40% undurchsichtig machen, und Sie sollten etwas sehen, das ziemlich nah aussieht. Alles klar, da gehen wir. Nun, wir müssen es tatsächlich in diese Gruppe bringen. Ich werde es einfach hier runter ziehen , und es wird eine Weile dauern. Toe, geh da rein. Äh, okay. Da sind wir also. Ihre sind gerade die erste Kategorie. Wir haben es in der Kategorie-Gruppe, aber es muss über dieser Maske sein, entschuldigen Sie mich über dem Bild. Also, jetzt sieht es richtig aus. Aber was wir tun wollen, ist, dass wir sicherstellen wollen, dass es standardmäßig ausgeblendet ist. Also werde ich mit der rechten Maustaste darauf klicken. Es ist versteckt. Da gehen wir. Und nein, ich werde ein bisschen betrügen und hier rüber kommen in meiner fertig gestellten Akte über. Ich werde nur etwas von diesem überlagernden Material hier hineinkopieren, alles klar, alles klar, und es ist bereits gruppiert, und ich habe es geschafft, es direkt in diese Gruppe einzufügen, also denke ich, dass wir gut sind. Aber auch hier muss der Kategoriename über dem Overlay liegen. Alles klar, was wir jetzt tun wollen, ist, dass wir die Interaktion auf der Gruppe selbst erstellen wollen. Wenn ich also die Gruppe hier auswähle, klicken Sie auf Interaktionen und neue Interaktionen. Das erste, woran wir arbeiten müssen, ist, dieses Hintergrundbild dunkel zu machen. Also lassen Sie uns voran und verwenden Sie auf der Maus Enter wieder und auf Mao Center. Wir wollen dieses Objekt zeigen, Ähm, und weil es eine Menge Sachen hier drin gibt, werde ich eigentlich nach dieser richtigen Maske suchen, und ich finde sie ziemlich schnell, und ich will es zeigen. Aber jetzt lassen Sie uns ein wenig Geschmack hinzufügen. Wenn wir uns von der Website erinnern, ist es tatsächlich animiert. Ein bisschen. Lasst uns in 250 Millisekunden verblassen. Scheint richtig zu sein. In Ordnung, also jetzt, wenn wir hineinfahren, wird es sich zeigen. Aber wir müssen auch eine weitere Interaktion zu derselben Gruppe hinzufügen. Es ist die Ein-Maus-Aus-Interaktion. Denn was wir tun werden, ist im Wesentlichen das Gegenteil von dem, was wir gerade getan haben. Also werde ich hier rüber kommen und Show drücken und wieder nach Maske suchen. Und diesmal will ich es verstecken. Also werde ich wieder verstecken und 250 verblassen und dann treffen. Ok. Ordnung, schauen wir uns unseren Prototyp im Browser an und sehen, wie er aussieht und aktualisieren. Hier. Blättern Sie nach unten. Ja. Ja. Ok. Das funktioniert. Ausgezeichnet. In Ordnung, gehen wir zurück zum Schauspieler. Und jetzt werden wir daran arbeiten, diese Kategorie zu erstellen. Bild hier zu verschieben ist eine Art von Kategorie Titel verschieben. Eines der Dinge, die ich tue, ist es, eine Kopie davon zu machen, weil Sie sehen werden, eines der Dinge, die wir tun müssen, ist, dass wir genau identifizieren müssen, wohin wir sie verschieben wollen . Diese Kopie hilft mir, das herauszufinden. Also nein, weil ich nach Sachen suche. Ich werde dafür sorgen, dass ich das nicht verwirrt habe und es einfach Dummy nennen. Ok. Also, zu 19 von 16. 73. Das ist, wo ich möchte, dass das zu OK wechselt, also habe ich die Gruppe wieder ausgewählt. Nein. Sie können sehen, wir haben bereits Interaktionen hier. So können wir mehrere Interaktionen auf dem gleichen Objekt haben, aber wir können auch mehrere Aktionen auf dem gleichen Ereignis haben. Also, wenn ich hier klicke Ah, und ich traf diese andere Art von Aktion namens Move. Das ist ein neues für uns. Ich werde hier Kategorie-Typ-Kategorie treffen. In Ordnung. Kategoriename ist das, was ich verschieben möchte. Um, und Sie können sich bewegen, was eine relative Anzahl von Pixeln oder zwei ist, die Position auf dem Bildschirm definiert ist. Und zwei sind in der Regel viel zuverlässiger. Also waren es 2 19 16. 73. Ok. Und ja, ich möchte es animieren. Uh, ich werde diese Leichtigkeit in out Kurve nutzen, weil das tendenziell am natürlichsten aussieht. Es ist ziemlich sanft zu. Du hast geschlagen. Ok. In Ordnung. Und jetzt müssen wir dasselbe mit der Maus aus tun, aber im Gegenteil. Also, was ich tun werde, ist hier rüber zu gehen und zu sehen, wo es ist. Beginnt. Das sind 2 1917 18 Ich gehe zurück zu meiner, äh, meiner Gruppe. Fügen Sie in Aktion wieder ein. Ich möchte Move here hinzufügen, und ich suche hier nach dem Kategorientitel Kategorienamen. Ich möchte wechseln, um zu gehen. Ich möchte es direkt auf 19 verschieben, um 17 Uhr. 18 und dann werden wir es animieren. Er ist wieder rein und raus. 250 Millisekunden. In Ordnung, schauen wir uns mal an, wie das aussieht. Aber eigentlich ist es das erste Mal, den Dummy dort loszuwerden. In Ordnung? In einer Aktualisierung. In Ordnung. Das sieht so aus, als ob es aussieht. Alles klar, nein, hier wieder rein zu gehen. Und das letzte, was wir tun müssen, ist, dass wir dieses Overlay erscheinen lassen müssen eso Ich werde hier wieder auf die Gruppe klicken und dann eine weitere Action-Show hinzufügen. Und dann werde ich Rinderüberlagerung treffen, denn so heißt die Gruppe, und ich will es zeigen, und ich will es in 250 Millisekunden wieder verblassen. Und dann rate mal, was ich hier unten zu tun habe. Dasselbe, aber umgekehrt. Also, äh, ich werde das Overlay zeigen. Aber dieses Mal will ich es verstecken und ja, ich will auch in diesem Fall animieren. In Ordnung, gehen wir zurück zu unserem Prototyp hier und aktualisieren. Und wir haben es funktioniert. Nun, machen Sie das für die anderen beiden. Sie gewöhnen sich also daran, mehrere Aktionen und Interaktionen in tatsächlich zu verwenden , denn so werden Sie all Ihre reichhaltige Interaktivität mit Ihren reichen Prototypen erreichen . 14. Interaction verwenden: in dieser Lektion lernen wir etwas, das Interaktion genannt wird. Stile der Interaktion. Stile ähneln Interaktionen, unterscheiden sich aber auch geringfügig. Im Wesentlichen handelt es sich um eine Reihe von Formatierungsparametern, die im Objekt in der Benutzeroberfläche Ihres Prototyps zugewiesen werden , wenn bestimmte Aktionen auftreten. Also lassen Sie uns einen Blick auf den Senat eine Website für ein Beispiel. Wenn wir also über diese Dinger schweben, können wir sehen, dass sie rosa werden. Das wäre ein Beispiel für die Maus über den Interaktionsstil. Jetzt gibt es vier andere, die in ein wenig zu bekommen, das tatsächlich unterstützt. Also lasst uns herausfinden, wie wir das tatsächlich tun können. Also werde ich eigentlich einfach direkt zur Wunschliste navigieren. Wir machen das für die Wunschliste, und dann könnt ihr den Rest alleine erledigen. Es gibt also eine Reihe von Möglichkeiten, um zu den Interaktionsstilen tatsächlich zu gelangen, aber die für mich am einfachsten zu merken ist, ist mit der rechten Maustaste oder mit der Steuerung auf das Objekt zu klicken , das ich den Interaktionsstil 2 anwenden möchte. Und dann klicke ich auf Stileffekte. Und dann wird dieses Fenster hierher kommen. Jetzt können Sie hier sehen, die anderen vier Interaktionsstile Maus über ist derjenige, auf den wir uns heute konzentrieren werden. Einige dieser anderen werden wir in einer weiteren, fortgeschritteneren Klasse diskutieren . Eines der Dinge, die wir tun wollten, ist, dass wir den Funt rosa machen wollen. Also werde ich die Schriftfarbe überprüfen, weil das bedeutet, dass es sich ändern wird. Die Schriftfarbe ist Teil dieser Interaktion und dann scheint mir das fast genug Rosa zu sein . Dann werde ich OK schlagen, und wir gehen zurück zum Prototyp Regeneration. Und wenn wir darüber schweben, gehen wir hin. Aber wenn wir wollen, dass es so funktioniert, wo es tatsächlich das Herz rosa macht, müssen wir noch ein bisschen mehr arbeiten. also zurück zum Schauspieler gehen, müssen wir als erstes einen Interaktionsstil zu diesem Ding hinzufügen. Also das Symbol selbst, Also werde ich mit der rechten Maustaste auf Hit Stil Effekte. Und für eine Nikon, würden Sie denken, es wäre die Linie, aber eigentlich ist es die Füllfarbe, die Sie ändern müssen, und ich werde sie zu diesem rosa Hit ändern . Okay, geh zurück zum Prototyp und aktualisiere dich. Und da gehen wir hin. Nun, beide Dinge wurden rosa. Das einzige Problem ist, dass sie nicht zusammen rosa werden. Ich zeige Ihnen, wie Sie das ansprechen können. Also gehen wir zurück zum tatsächlichen hier, und wir können sehen, dass diese Dinge tatsächlich eine Gruppe sind. Ähm, und was wir tun können, ist, dass wir tatsächlich die Gruppe auswählen können, dann mit der rechten Maustaste klicken und diese Option wählen, die als Feuer-Maus-Stil-Effekte bezeichnet wird. Was das tun wird, ist, dass alle Mausinteraktionen direkt an alle Objekte innerhalb der Gruppe zur gleichen Zeit gesendet werden. Also, wenn ich darauf klicke und wir gehen zurück zum Prototyp und aktualisieren und ich gehe über Wunschliste, da gehen wir. Ich kann über jeden Bereich der Gruppe gehen, und es wird alles rosa Jetzt mit dem Rest von dem, was ihr tun müsst, um fertig zu werden. Dies ist, um dies für den Rest dieser Navigationsoptionen zu tun hier. das Wenndasfür Sie ziemlich mühsam klingt, haben Sie genau richtig. Das ist sehr mühsam. Ich werde Ihnen einen kurzen Tipp zeigen, dass Sie dio Also, wenn Sie nur, wenn Sie etwas haben, das Interaktionsstile ausgewählt hat und Sie es kopieren, Ich werde Befehl drücken, Siehe unsere Kontrolle. Sehen Sie, Was ich tun kann, ist, dass ich tatsächlich ein anderes Objekt auswählen und mit der rechten Maustaste darauf klicken oder steuern kann. Klicken Sie es tatsächlich haben, um hier ein wenig zu vergrößern und gehen Sie voran und gehen Teoh einfügen spezielle . Und dann werde ich Stil einfügen und den Prototyp aktualisieren, weil es aussieht , als wäre nichts passiert. Aber jetzt, wenn ich hier rüber gehe, gehen wir. So können Sie auch Interaktionsstile kopieren und einfügen und freuen sich auf die nächste Lektion, in der wir anfangen, über dynamische Panels zu sprechen. 15. Dynamische Panels verwenden: dies weniger und wir werden die Grundlagen der dynamischen Panels lernen. Nun, was ein dynamisches Panel ist, ist es ein Bereich in Ihrem Prototyp-Alter, der Inhalte dynamisch ändern kann . Lassen Sie mich Ihnen ein Beispiel dafür zeigen, wie das auf der Sunita-Website aussieht. Wenn wir also den ganzen Weg nach unten zu den Produktbildern scrollen, wenn wir den Mauszeiger darüber bewegen, passiert, dass das Bild im Hintergrund dort wechselt. Jetzt werden wir das Prototypenbild für einen Schauspieler, wissen Sie, schwächen, machen die, äh, Overlay, wie wir es oben getan haben. Aber im Moment werden wir uns nur darauf konzentrieren, das Produktbild zu wechseln. Ihr könnt das Overlay alleine machen, weil ihr schon wisst, wie das geht. Also lassen Sie uns einen Blick darauf werfen, wie wir das tatsächlich tun würden. Ein Schauspieler. Ich werde hier nach unten zu den Produktbildern scrollen, die wir haben und ah, ich werde einfach mit diesem speziellen arbeiten. Es gibt also eine Reihe von verschiedenen Möglichkeiten, um ein dynamisches Panel in Ihren Prototyp zu bringen. Eine ist, es aus der Bibliothek zu ziehen, aber ich mache das fast nie. Ich finde es einfach nicht super nützlich, denn wenn ich einen Drahtrahmen erstelle, lege ich normalerweise zuerst Inhalte aus. Also gibt es diese nette kleine Sache, die ich dio kann, wo ich einige Inhalte auswählen kann. In diesem Fall gehe ich hier zum skizzierten, um sicherzustellen, dass ich alles ausgewählt habe, was ich ausgewählt haben muss. Sie müssen sich die Produkte ansehen. Okay, also hier sind wir, sein Produkt, BG Image eins. Das wird sein, ah, ah, wo mein dynamisches Panel jetzt existiert. Ein dynamisches Panel an und für sich ist absolut nichts. Es ist nur eine Grenze, damit es wie etwas aussieht, das Sie benötigen, um Zustände zu erstellen und diesen Zuständen Inhalte zuzuweisen. Und es ist der Wechsel dieser Staaten, der das Verhalten gibt, das wir gerade auf der Sunita-Website gesehen haben. Die Art und Weise, wie ich es vorziehe, ein dynamisches Panel zu erstellen, ist zu rechts, klicken oder steuern. Klicken Sie auf den ausgewählten Inhalt, äh, und klicken Sie auf Erstellen dynamisches Panel ist, was dies tun wird, ist es wird ein dynamisches Panel mit einem Zustand zu erstellen , und dieser Zustand hat alles, was ich ausgewählt habe. Also habe ich geschlagen. Erstellen Sie dynamische Panel und Sie können sehen, hier haben wir einen generischen Namen. Es ist sein dynamischer Panelzustand eins, und dann der Inhalt, den ich ausgewählt hatte. Also das allererste, was ich tun werde, ist natürlich, natürlich, umbenennen Sie dies so Produktbild eins. Und ich werde auch den Staat umbenennen, weil das auch sehr wichtig ist . Ich werde diesen Standard nennen, hilft mir, den Überblick zu behalten, was wo sein sollte, in Ordnung. Und jetzt werden Sie feststellen, dass es hier diesen blauen Bereich gibt. Nun, das ist sehr neu in Aktion. Neun. Eine neue Art, mit dynamischen Panels umzugehen. Schauspieler hat seit einiger Zeit dynamische Panels, aber sie haben wirklich überarbeitet, wie Sie mit arbeiten, ähm Also standardmäßig wird es wahrscheinlich tatsächlich so aussehen. Ähm, du wirst immer noch alle Inhalte um dich herum sehen, da könnte ein bisschen verwirrend sein , weil du denkst, dass du mit dem Inhalt arbeitest, aber du bist es eigentlich nicht. Deshalb mag ich diese isolierte Funktion, die auch ein Schauspieler neun bekannt ist. So kann ich mir nur die Inhalte ansehen, die ich erstellen möchte. Jetzt gibt es eine Reihe von verschiedenen Möglichkeiten, verschiedene Zustände zu erstellen, weil wir das tun müssen, um zwischen ihnen wechseln zu können. Ich kann hier rauf kommen und drücken Sie Add-Zustand, weil dieses kleine Sie Ich werde mir erlauben, zwischen den Staaten wieder zu navigieren . Das ist neu in tatsächlich neun, , oder ich kann hier auf der rechten Seite gehen oder Steuerelement auf einen Zustand oder das dynamische Panel selbst klicken und den Status hinzufügen drücken. Aber was ich eigentlich tun werde, ist, dass ich diesen Zustand duplizieren werde, weil der nächste Zustand genau die gleiche Art von Inhalt, ein Bild haben wird, und es wird genau die gleichen Dimensionen haben. Also werde ich diese Status-Maus da drüben anrufen. Wir machen weiter, ich habe es isoliert. Ich kann sehen, dass ich in der Maus über Zustand bin, also werde ich nur auf dieses Bild doppelklicken, weil ich es durch ein neues Bild ersetzen möchte , das ich Produkt treffen werde. In Ordnung, also hier ist mein Zustand, meine Maus über den Zustand. Und hier ist mein Standardzustand am meisten über Staat. In Ordnung, lass uns das schließen. Und jetzt kommen wir zurück zur Drahtrahmenseite selbst statt zu einem dynamischen Panelzustand. Und gehen wir zu unserem Prototyp hier und aktualisieren das und sehen, wie das aussieht. Jetzt merkst du, dass nichts passiert. Und der Grund, dass nichts passiert, ist, dass wir eine bestimmte Aktion namens set panel status angeben müssen, damit sich das dynamische Panel so verhält. Also lasst uns gehen und sehen, wie man das in Aktion macht. Okay, also werde ich das dynamische Panel auswählen und, ah, ah, wie bei jedem anderen Objekt tatsächlich, können Sie Interaktionen mit dieser Art von Objekt assoziiert haben. Was wir also tun wollen, ist, wenn die Maus weitergeht, wir wollen, dass es Zahnrad Maus über den Zustand wechselt. Und wenn es losgeht, wollten wir zurück in den Standardzustand wechseln. Also werden wir neue Interaktion treffen und dann zu unserem alten Freund mit der Maus gehen. Und das ist, wo die Dinge neu werden, weil wir diese neue Art von Aktion namens set panel state verwenden werden. Und was wir tun werden, ist, dass wir ein bestimmtes dynamisches Panel wählen können. ich beispielsweise beispielsweise Wennich beispielsweisemehrere dynamische Panels hätte, könnte ich den Status eines anderen dynamischen Panels ändern. Aber ich werde es einfach halten und dieses Widget sagen, weil das immer selbstreferentiell ist. Und beim Eingeben der Maus möchte ich, dass es bleibt, sich ändert, mit der Maus über. Also wähle ich diesen Zustand hier aus. Ich will keine Animation machen, obwohl es alle möglichen lustigen Sachen gibt, die du dort machen kannst. Okay, und dann natürlich muss ich natürlichdie entsprechende Interaktion mit der Maus hinzufügen. also wieder Setzen Siealso wiederden Panelzustand auf diesem Widget auf den Standardzustand. Das ist es, was ich will. Und wieder, keine Animation. Okay, und jetzt schauen wir uns unseren Prototyp an. Erfrischen und Mauszeiger über und da gehen wir. Das ist es, was wir erwarten. Das sind also die Grundlagen der Arbeit mit dynamischen Panels und Schauspieler. In der nächsten Lektion werden wir einige der einzigartigeren Eigenschaften und Interaktionen betrachten, die mit dynamischen Bedienfeldernverbunden sind Bedienfeldern 16. Dynamische Panels verwenden – fortgeschrittener: in dieser Lektion erfahren Sie mehr über einige zusätzliche Eigenschaften, die für dynamische Panels einzigartig sind . Also lass mich auf die Sunita-Website wechseln und dir zeigen, wovon ich rede. Achten Sie also auf diese beiden Balken hier oben, also geht der obere weg, und dann erscheint der untere wieder und klebt dann an den oberen Rand des Fensters, nachdem Sie jetzt zu einem bestimmten Punkt nach unten scrollen, um Dinge zu halten überall im Fenster. Das ist etwas, das mit dynamischen Panels sehr einfach zu tun ist. Wenn Sie diese Interaktion dort durchführen können, wo sie nur angezeigt wird, nachdem Sie zu einem bestimmten Punkt nach unten scrollen , erfordert dies fortgeschrittenere Techniken. Also zeige ich Ihnen, was wir stattdessen tun werden. Wenn wir uns diese beiden ansehen, oben unsere, werden wir sie einfach an den oberen Rand des Fensters kleben und sie dort für das ganze mit dem Eichhörnchen aufbewahren . Die Art und Weise, wie wir das tun, wird zum Schauspieler. Ah, Wie ich auf Lee sagte, haben dynamische Panels diese Eigenschaft, irgendwo im Fenster zu bleiben, während Sie scrollen. Also, was ich tun werde, ist, dass ich diese erschaffen werde. Die NAB befinden sich in der oberen Leiste als dynamische Panels. Also gehe ich nach rechts, klicke oder steuere, klicke darauf, erstelle ein dynamisches Panel und benenne es dann. Oberer Balkenbereich Ich mag Teoh. Haben meine Panels tatsächlich das Namensfeld in ihnen? Es hilft mir nur, die Dinge im Auge zu behalten, während ich Prototyping bin. Also werde ich das Gleiche tun, außer ich werde es nab unser Panel nennen. Und jetzt, um es an der Spitze zu halten, was wir tun müssen, ist, auf diesen Link klicken hier drüben. , Dies ist ein Abschnitt,den Onley-dynamischen Panels haben wird. Es ermöglicht Ihnen, Scrollen sowie ein paar andere Eigenschaften zu steuern. Aber derjenige, über den wir jetzt reden werden, ist das Anheften an den Browser. So pinning ist, wie man die Dinge klebrig macht. Um dies zu tun,klicken Sie auf Pinto Browser, aktivieren Sie dieses Kontrollkästchen und weil wir möchten, dass klicken Sie auf Pinto Browser, dies in der Mitte des Bildschirms sein, wir dies in der Mitte arrangieren und wir wollen, dass es an der Spitze angeheftet wird und wir wollen, um es in der Front zu halten. Also werden wir schlagen, OK, und jetzt wird das hier keine Veränderung für uns haben, in der eigentlichen Sie, warum? Aber wenn wir gehen, um tatsächlich eine Vorschau zu sehen, was wir sehen werden, ist, dass dies ein wenig anders aussieht. So dass man oben feststeckt. Und wir werden das auch mit diesem machen . Klicken Sie also auf diesen Pin, um den Browser an das Browserfenster anzuheften und drücken Sie erneut die Mitte Nun, hier werden Sie feststellen, dass es eine Marge gibt. Rand bedeutet nur, dass dies im Wesentlichen 40 Pixel vom oberen Rand der Seite entfernt ist. Ich werde das treffen und dann hierher gehen und mich erfrischen. Und da gehen wir hin. Das ist es, wonach wir suchen. Das ist alles, was Sie tun müssen, um die Dinge an den oberen Rand des Fensters zu kleben. Ich möchte Ihnen einige andere interessante Eigenschaften von dynamischen Panels zeigen. Eines der Dinge, die Sie tun können, ist, dass Sie tatsächlich ah Hintergrundfarbe zu einem dynamischen Panel zuweisen können . Uh, und warum das interessant ist, ist, weil Sie ein dynamisches Panel 100% mit breit in jedem Browserfenster machen können . Also, was ich hier tun werde, ist zu Farbe zu gehen und ich werde d sieben d sieben eingeben, weil ich zufällig weiß, dass das der Hex-Wert des Hintergrunds dieses bestimmten Balkens ist. Und was Sie sehen werden, ist, dass Sie hier im Moment nichts sehen werden. Aber wenn ich in den Browser gehe und aktualisiere und wenn ich es ein wenig verkleinere, damit du sehen kannst, wie alles in der Mitte bleibt und dann diese, äh, äh, erstreckt sich den ganzen Weg über. Nun, das ist ein sehr häufiges Muster, dass Ah, Sie sehen eine Menge in modernen Websites. Also das ist ein guter Weg, Teoh, dass ein Schauspieler neu zu erstellen. Nun ist die andere interessante Sache über dynamische Panels, dass sie einzigartige Interaktionen mit verbunden sind, ähm, also habe ich auf diesem Panel ausgewählt, und wenn ich neue Interaktion trage, werden Sie eine Reihe von Dingen sehen, die Sie normalerweise nicht sehen, wie auf Panel-Statusänderung. Wenn sich also ein dynamisches Panel ändert, um verschiedene Inhalte oder einen anderen Status anzuzeigen, können Sie Dinge tun. Wenn das passiert, können Sie tatsächlich dynamische Panels verwenden, um Dragon Drop-Interaktionen durchzuführen. Und wenn Sie native mobile Erlebnisse erstellen, können Sie dynamische Panels verwenden, um Interaktionen mit dem Typ „Wischen“ durchzuführen. Um, und Sie können auch Scroll-Interaktionen mit durchführen, wenn Sie innerhalb des dynamischen Bedienfelds scrollen . Normalerweise können Sie dies nur tun, wenn Sie auf der Seite scrollen, und das ist, was ich Ihnen über einige zusätzliche spezielle Eigenschaften und Interaktionen im Zusammenhang mit dynamischen Panels zeigen muss. Ich hoffe, in Zukunft zu einem fortgeschritteneren, dynamischen Panel Tutorial zu bekommen , weil es viele wirklich interessante Dinge , die Sie mit diesen Widgets tun können. 17. Einführung in Masters: Masters sind eine der mächtigsten Funktionen und Action. Sie ermöglichen es Ihnen, Inhalte und Funktionen über Ihren Prototyp hinweg wiederzuverwenden und gleichzeitig an nur einem Ort zu verwalten. Jetzt in Version neun haben sie dies sogar noch besser gemacht, indem sie Skizzenstil-Überschreibungen hinzugefügt haben. Das bedeutet, dass ich eine komplexe Komponente erstellen kann, sie über meinen Prototyp hinweg verwenden, den Inhalt für jede Instanz dieser Komponente ändern und dann die Interaktionen und das grundlegende Layout an einem Ort beibehalten kann. Es ist super genial. Na gut, lasst uns weitermachen und anfangen, über Meister zu lernen. 18. Meister erstellen: in dieser Lektion lernen wir, wie man mit Mastern arbeitet, bei denen es sich um Objekte handelt, die es uns ermöglichen, Stil, Inhalt und Funktionalität wiederzuverwenden . Während des gesamten Prototyps können Sie Master hier neben Ihren Bibliotheken finden. Standardmäßig. Es wird leer sein, weil Sie tatsächlich zuerst einen Master erstellen müssen. Also werde ich diesen Testmaster nennen und Sie werden feststellen, dass hier drüben nichts passiert ist was völlig in Ordnung ist, weil ein Meister in und für sich ist, , sein eigener Drahtrahmen. Also, was Sie tun müssen, ist, Dinge tatsächlich dem Master zuzuweisen. Ich werde diese Kiste hier aufstellen, und dann werde ich ein Bild in die Kiste legen, das uns gut ansieht. Und wenn ich wieder nach Hause komme, hat sich nichts geändert. Wenn ich hier zu Meistern gehe, kann ich dieses Objekt ziehen. Es ist tatsächlich ein zusammengesetztes Objekt an dieser Stelle auf der Seite. Jetzt gibt es mehrere Instanzen davon. Die coole Sache über Meister ist jedoch, jedoch, dass, wenn ich etwas auf dem Master wie um ändere, Hinzufügen von ah, Überschrift, Hinzufügen von Text hier und zurück zur Startseite, die automatisch Änderungen vorgenommen alle Instanzen des Masters hinweg. Schauen wir uns also ein echtes Beispiel an, wo wir das verwenden würden, denn das, was wir gerade beschrieben haben, ist etwas, das nicht so ist, wie ich normalerweise arbeiten würde. In der Regel. Was ich gerne tun, ist Drahtrahmen an Ort und Stelle und dann rechts, klicken oder steuern, klicken und drücken. Master-Shape erstellen. Dies funktioniert genauso wie das Erstellen dynamischer Panels. Auf diese Weise. Ich werde diese eine Produktliste nennen, Ordnung? Und jetzt habe ich diesen Meister, also gibt es eine Menge , Funktionalität und Interaktivität,die hier passiert. Aber jetzt konnte ich essen, kopieren Sie das alles in den Rest dieser Dinge und nicht zu wiederholen. Aber eines der interessantesten Dinge , ist, dass dass für solche Produkte Sie für solche Produkteunterschiedliche Inhalte haben wollen. Und obwohl wir diesen Produktlistungsmaster hier haben, ist eines der Dinge, die in Version neun neu ist, diese Idee von Überschreibungen. Dies ist sehr ähnlich wie Symbolüberschreibungen und Skizzen, wenn Sie ein Skizzenbenutzer sind, aber Sie können diesen Inhalt tatsächlich ändern. Eso, lassen Sie mich zum Beispiel tatsächlich löschen und eine andere Instanz des Produktangebots erstellen denn wenn Sie diese Überschreibungen durchführen, ändern Sie tatsächlich nicht den Inhalt des Masters. Sie werden nur geändert, indem Sie den Inhalt der Instanz des Masters ändern. Also hier, auf Produktliste eins, ist das eigentlich, äh, so etwas. Also werde ich anrufen. Ich werde auch den Preis ändern. 1 99 und rufen Sie die Produktprodukte ein. Und jetzt können Sie sehen, dass diese Änderungen reflektieren hier kann ich auch, wenn ich die Bilder auswählen möchte . Also das Standardbild, das ich für Ah gehen werde, sagen wir, ich werde dieses Mal für Farbbilder gehen. Und dann die Maus über das Bild. Ich werde dieses Bild machen. Und jetzt, wenn wir zum Prototyp gehen und regenerieren, können Sie hier unten sehen, es behält immer noch alle Interaktionen. Das sind beide gleich. Ähm, sie bewegen sich immer noch auf die gleiche Weise. Jetzt fragen Sie sich wahrscheinlich, OK, nun, was nützt das, wenn ich all diesen Inhalt ändern kann? Die Verwendung ist, wenn Sie etwas über diese Interaktion ändern möchten. Also, zum Beispiel werde ich hier reingehen, und die Interaktion sagt, dass es das Overlay 2 250 Millisekunden zeigen wird. Also lasst uns das tatsächlich auf 500 erhöhen. Dasselbe mit dem Fell. Und jetzt, wenn wir hier rüber gehen und den Prototyp wieder auffrischen, werden Sie feststellen, dass beide funktionieren. In ähnlicher Weise hat es beide das gleiche Fade. Und das ist der Vorteil. Denn wenn Sie die Art einer Interaktion für einen Master wie diesen ändern möchten, wenn Sie den Inhalt überschreiben, dann müssen Sie ihn wirklich nur an einem Ort ändern. Persönlich denke ich, das ist fantastisch neue Ergänzung zu nach neun. Nun, ich möchte Sie ermutigen, voranzugehen und das für all diese zu tun. Fühlen Sie sich frei, um die Bilder hinzuzufügen, die Sie möchten. 19. Master: In dieser Lektion wurden einige verschiedene Arten von Verhaltensweisen kennengelernt, die Masters zeigen können, wenn Sie sie auf der Seite ablegen. Wir werden auch ein wenig über Planung und Strategie sprechen, wenn es um den Bau Ihres Prototyps geht , denn die Verwendung von Mastern kann die Dinge entweder wirklich beschleunigen oder möglicherweise verlangsamen. Was wir bisher gesehen haben, ist nur ein Master, den Sie einer Seite zugewiesen haben, und es geht dorthin, wo Sie es hinlegen. Und wenn Sie etwas in diesem Master ändern, das Aktualisierungen und andere Master , es sei denn , es wurde natürlich außer Kraft gesetzt. Aber wenn Sie tatsächlich mit der rechten Maustaste auf diese Master in der Liste klicken, erhalten Sie etwas, das Drop-Verhalten sagt, das Standardverhalten. Was wir gerade beschrieben haben, ist Platz überall. Es gibt zwei andere Verhaltensweisen Sperre zum Master-Standort, was interessant ist. Sie können sehen, dass sich das Symbol hier ändert. Wenn wir jetzt in den Produktlisten-Master selbst gehen, ist sein Standort 00 Also was passieren wird, ist, wenn ich diesen Master hierher ziehe, werde ich es irgendwie hier setzen. Aber es wird nicht dorthin gehen. Es wird den ganzen Weg bis zu 00 erscheinen jetzt Dies ist nicht eine, die ich viel mehr benutze weil wir dynamische Panels haben, die wir oben auf der Seite anheften können. Normalerweise benutze ich das viel für, ähm für die Navigation. Jetzt gibt es noch ein anderes Verhalten, um Breakaway auf zu nennen. Das bedeutet, dass es ein Meister ist, der nicht notwendigerweise an unsere eher eine Instanz des Meisters gebunden ist, die nicht an den Meister selbst gebunden ist. Also kann ich , wissen Sie , hier reingehen und Dinge einzeln löschen , usw. Ähm, aber nochmal, das ist nicht eine, die ich mich zum ersten Mal sehr benutze. Aufgrund von Master-Überschreibungen kann ich dasselbe mit diesen Überschreibungen auf viel effizientere Weise erreichen. Als ich zum ersten Mal mit dem Prototyping mit Schauspieler begann, ging ich einfach direkt in das Tool und begann mit dem Prototyping. Und dann auf halbem Weg würde ich einen effizienteren Weg finden, etwas zu tun, und dann ging ich zurück und mache es auf effiziente Weise, und dann würde ich viel mehr Zeit in Anspruch nehmen. Was ich nun den Leuten empfehle, ist, dass man nicht denkt, dass ein Schauspieler in einem Skizzenbuch denkt, Dinge skizziert, alles durchdenkt und dann Ihr Design repräsentiert. Und tatsächlich, wenn die Zeit bereit ist und dann auch durch das, was ein Meister sein wird, denken Sie durch, was ein dynamisches Panel sein wird. Denken Sie darüber nach, wie die Dinge interagieren werden und das wird Ihnen helfen, viel effizienter zu sein , wenn Sie zum Prototyping kommen. Ein Schauspieler Schauspieler ist ein sehr kompliziertes und Fonds Programm zu verwenden, also wenn Sie nicht hineingehen, planen Feli Sie können einige ziemlich tiefe Kaninchenlöcher hinuntergehen. 20. Einführung in adaptive Ansichten: Responsive Technologien gibt es schon seit geraumer Zeit. Websites in Native Mobile APS erweitern und verschließen sich an alle Geräte, die auf sie zugreifen, anzupassen. Leider machen es nicht viele Design-Tools einfach, Rahmen- oder Prototypsysteme so zu tragen. Eigentlich jedoch ist es jedochadaptive Verwendung. Feature macht es ziemlich einfach, ein reaktionsfähiges System jetzt zu prototypen, obwohl adaptive Ansichten feste View-Port-Größen sind und nicht wirklich reaktionsschnell sind, ist das normalerweise gut genug für Usability-Tests oder für die Kommunikation mit Stakeholdern wie Produktmanager und Ingenieure oder jemand anderes und auch Inversion neun. Diese sind noch nützlicher geworden, wenn die Funktion „adaptive you sets“ hinzugefügt wurde. Was das tut, ist im Grunde. Ich kann jetzt verschiedene View-Port-Größen für verschiedene Seiten haben, was die Flexibilität meines Prototyps erheblich erhöht. Lassen Sie uns also voran gehen und herausfinden, wie man adaptive Nutzung und Schauspieler verwendet 21. Adaptive Ansichten einrichten: in dieser Lektion lernen wir, wie man Akteure so einrichten kann, dass Prototyping für reaktionsfähige Systeme möglich ist, während sie tatsächlich nicht die vollständige Reaktion von sich selbst Prototypen erstellen können. Es kann mit etwas, das adaptiv genannt wird, nah kommen. Verwenden Sie den einfachsten Weg, um adaptive Anwendungen einzurichten, um fortzufahren und irgendwo außerhalb Ihres Drahtrahmens zu klicken und auf dieses Stilfeld hier auf der rechten Seite zu klicken. Und dann wird es hier etwas geben, das sagt, Add adaptive use. Gehen Sie voran und klicken Sie darauf. Nun wird dieser Dialog auftauchen und es wird Ihnen eine Basisansicht zeigen. Dies ist die Ansicht, die so breit ist, wie Ihr Drahtrahmen derzeit ist, Ähm, also werde ich diese Ansicht tatsächlich benennen. Nennen Sie es großes Display, nur um mir zu helfen, zu verstehen, was was ist. Und was ich tun werde, ist, dass ich zusätzliche Ansichten erstellen werde, um Situationen zu berücksichtigen , in denen der View-Port kleiner als 14 40 Pixel ist. Also werde ich ein weiteres hinzufügen, und ich werde diese praktische voreingestellte Funktion verwenden, die super glatt ist, die super glatt ist, und ich werde Landschafts-Tablet treffen und dann noch eine für Portrait-Tablet. Nun, was hier passiert ist, ist, dass diese Ansichten zu verschiedenen Zeiten angezeigt werden, so dass große Anzeige angezeigt wird, werden jederzeit angezeigt. Der View-Port ist 14 40 Pixel oder breiter Landscape Tablet wird jederzeit angezeigt. Der View-Port ist 10 zwischen 10 24 und 14 40 Pixel und dann Portrait-Tablet wird angezeigt, wenn der View-Port zwischen 7 68 und 10 24 liegt. Aber dann auch, da es die niedrigste Ansicht ist, auch kleiner mit. Wenn ich also auf OK klicke, sehen Sie hier oben, dass diese Ansichten irgendwie über dem Drahtrahmen erscheinen. Ich deaktiviere das. Wir werden darüber in der nächsten Lektion sprechen. Aber was uns das erlaubt, ist tatsächlich verschiedene Dinge verschiedenen Verschleißrahmen zuzuordnen . Jetzt ist es schwer zu sagen, dass gerade etwas passiert ist. Aber wenn wir den ganzen Weg nach unten scrollen und wir sehen Art der Breite der Seite, wenn ich Landschafts-Tablet und Portrait-Tablet klicken, können Sie sehen, dass diese, dass die Seitengröße im Wesentlichen viel kleiner wird. Und in der nächsten Lektion werden wir lernen, wie man den Rahmen in dieser Situation trägt. Ah, eines der Dinge, die neu in Aktion sind. Neun. Ist diese Idee von adaptiv, die Sie in früheren Versionen festlegen, war die einzige Möglichkeit, adaptive Verwendung zu erreichen, prototypweit, so dass jede einzelne Seite die gleiche adaptive Verwendung hätte. Nun, wenn ich hier auf Shop doppelklicke, werden Sie feststellen, dass es keine adaptive Verwendung eingerichtet ist. Ähm, Sie werden denken, dass Sie wahrscheinlich besorgt sein werden, dass okay, muss ich die für jede einzelne Seite einrichten? Und ja und nein, äh, du musst sie aufstellen, aber es ist ziemlich einfach. Wenn Sie also einen adaptiven Satz adaptiver Ansichten auf einer Seite erstellt haben und auf adaptive Ansichten auf einer Seite klicken, die sie nicht enthält, können Sie tatsächlich einen der bereits erstellten Sätze auswählen. Also werde ich das jetzt tun, und wir können sehen, dass es genau das gleiche ist, wie wir es vorher getan haben. Und wir können sehen, wie die Dinge kleiner werden, genau wie auf der Homepage. In der nächsten Lektion werden wir darüber sprechen, wie man tatsächlich Rahmen in dieser Situation trägt, freuen uns darauf 22. Adaptives Wireframing: Jetzt, da wir unsere adaptive Sie eingerichtet haben, können wir fortfahren und sicherstellen, dass unser Drahtrahmen bei all den verschiedenen Berichtsgrößen richtig aussieht . Bevor wir beginnen, stellen Sie sicher, dass Sie das Häkchen auf alle Ansichten auswirken deaktivieren. Wir werden darüber sprechen, was das tut, und ein bisschen so, weil adaptive Drahtrahmen ein wenig zeitaufwendig sein kann . Ich werde mich hier nur auf ein Objekt konzentrieren. Also, ah, es ist dieses Heldenbild hier. Jetzt auf großem Display sieht es so aus, wie es in der Vergangenheit hat. Nun, wenn ich auf Landschaft Tablet klicke, es sieht immer noch gleich aus. Aber ich werde tatsächlich seine Größe hier ändern. Also, wenn ich es mit der Seite mache und dann gehe ich zurück zu einem großen Display, sehen Sie große Display-Dinge bleiben unverändert. Aber auf dem Portrait-Tablet , diese Veränderung hat sich gefiltert. Das ist die Vererbung, über die wir in der vorherigen Lektion gesprochen haben. Also jetzt haben wir diese drei Größen für diese drei View-Ports. Werfen wir einen Blick darauf, wie das im Browser aussieht. Wenn ich hier nach unten scrolle, scrolle, können wir sehen, dass das Bild hier ganz breit ist. Und nein, denn das ist bei 14 40 so groß wie mein Monitor. Es wird sofort auftauchen. Das ist also die Landschafts-Tablet-Ansicht und wird ziemlich bald in der Portrait-Tablet-Ansicht sein. Da gehen wir und Sie können sehen, wie alles andere gleich bleibt. Und das ist im Grunde, wie bewusst Framing, äh, in diesen verschiedenen Ansichten funktioniert. Jetzt gibt es noch ein paar andere interessante Dinge. Eine ist, dass, wenn wir in einer niedrigeren Ansicht sind, normalerweise , ähm, das Zeug, das wir hier tun, keine dieser höheren Ansichten beeinflussen, und Sie können sagen, weil diese Luft irgendwie großartig aus. Aber wenn ich Wirkung alle Ansichten treffen, diese Dinge grün, und was ich tatsächlich tun kann, ist etwas hinzuzufügen, das ich hinzufügen werde, Überschrift eins hier und dann, wenn ich über Zehe Landschaft Tablet und großes Display Tab, das ist immer noch da. Das ist also der Effekt, den alle Ansichten auswirken. Ich neige dazu, das nicht zu benutzen, weil es wirklich Dinge durcheinander bringen kann, wenn du nicht wirklich auf dem Ball bist . Jetzt gibt es eine andere Sache, die interessant ist über den Adepten von Prototyping im Vergleich zu Drahtrahmen , und mit interessant meine ich wirklich ziemlich nervig. Ähm, aber das geht um Interaktionen. Lassen Sie uns also einen Blick auf diese Interaktion werfen, die wir zuvor Prototyp hatten. Ach, und mal sehen, ob wir es zwischen den Ansichten ändern können. So ist diese Maske verblassen bei 250 Millisekunden für ein großes Display. Wechseln wir zu Landschafts-Tablet und ändern Sie es auf 500. Was denkst du, wird hier passieren? Ah, Porträt-Tablette. Jep, 500. Das ist es, was Sie erwarten würden. jedoch In der großen Anzeige ändert sich diesjedochauch, sodass Sie nicht tatsächlich unterschiedliche Interaktionen für verschiedene Ansichtsports haben können. persönlich denke, Ichpersönlich denke,das ist eine Art Fräulein, aber damit müssen wir es zu tun haben. Zum Glück gibt es eine Möglichkeit, damit umzugehen, und das ist mit diesem wunderbaren magischen Widget namens Hot Spot. Ah, Hot Spot ist im Wesentlichen ein unsichtbarer Bereich auf der Seite, auf den Sie Interaktionen anwenden können . Ich werde hier eine Verknüpfung machen und dieses Objekt auswählen, weil dies die Interaktionen sind , die ich möchte, und ich werde klicken und steuern Klicken Sie auf einen ziemlich Shift klicken Sie darauf und, uh, kopieren Sie diese mit Befehl, siehe oder Kontrolle, siehst du? Und dann werde ich einfach den Hotspot auswählen und den Befehl V drücken, um V einzufügen oder zu steuern, und Sie können sehen, dass diese tatsächlich direkt dort angezeigt werden. Und ich werde das nennen. Ich werde diesen Landschafts-Tablet-Trigger nennen. Und dann, was ich tun werde, ist, dass ich es oben drauf schiebe, also wird es tatsächlich die Interaktionen absorbieren und nicht die auf den Boden schießen. Und wenn ich zum Teil Tablette gehen, können Sie sehen, dass es auch da ist. Aber es ist nicht da in großen Display. Also hier drin, was ich tun werde, ist, dass ich die Interaktion hier ändern kann, anstatt es auf dem Objekt selbst tun zu müssen . Und wenn ich runter zum Porträttablett komme, werde ich das Gleiche machen. Aber ich werde das hier löschen. Ähm, Sie werden sehen, dass es immer noch da ist in der Landschaft Tablet und erstellen Sie eine andere und tun diese ähnliche Art von einer Sache, wie ich es letztes Mal getan, eine Kopie dieser Interaktionen und fügen Sie sie. Aber dieses Mal werde ich es 1000 machen. Also im Wesentlichen nur eine Sekunde. Ordnung, und dann werde ich das hier unten stellen, wo die anderen waren, und ich werde diesen einen Portrait-Tablet-Trigger nennen. Okay, jetzt sind es 1000 auf dem Portrait-Tablet. Es sind 500 Millisekunden im Querformat und die reguläre 50 auf dem großen Display, und das ist so ziemlich, wie wir damit umgehen müssen. Wissen Sie, die andere Sache, die ich Ihnen zeigen möchte, damit verbunden ist, ist dies. Sie werden feststellen, dass diese rot angezeigt werden, da dies bedeutet, dass diese auf der Seite werden, aber in dieser Ansicht nicht sichtbar sind. Also, wenn ich zu Landschafts-Tablet gehe, können Sie sehen, dass lt Trigger jetzt sichtbar ist. Und für Portrait-Tablet, PT Trek Trigger ist jetzt sichtbar. Jetzt bedeutet das Rot etwas sehr Seltsames zu sagen. Es bedeutet, dass dies aus der Sicht nicht gespielt wurde, was bedeutet, dass es jetzt einfach nicht in der Ansicht ist. Wenn ich mit der rechten Maustaste klicke oder das Steuerelement, klicke darauf, ich kann es wieder in der Ansicht platzieren, um und auch, wenn ich P t Trigger habe, kann ich etwas nur aus dieser Ansicht durch Kontrolle entfernen oder Klicken Sie mit der rechten Maustaste und klicken Sie auf UNP Spitze aus der Ansicht. Ähm, aber ja, so geht man um Interaktionen und trägt Framing für adaptive Prototypen. In der nächsten Lektion werden wir darüber sprechen, wie sich Meister auf diese und die kurze kurze Version auswirken. Es ist wirklich cool. 23. Adaptive Masters: Es sind nicht nur Seiten, die adaptiv verwendet werden können. Masters können adaptiv verwendet werden und mit der Fähigkeit kombiniert werden, Bastard-Inhalte zu überschreiben . Es kann ein wirklich mächtiger Zeitersparnis für Sie sein. Scrollen Sie hier nach unten und schauen Sie sich den Master an, den ich zuvor erstellt habe. Also dieses Produkt Produktliste Master Ah, jetzt können Sie auf jeder dieser Ansichten sehen, es ist das gleiche. Und wenn ich auf diesen Zeh doppelklicke, öffne ihn. Wir können sehen, dass es tatsächlich keine adaptive Verwendung für diesen Master wieder gibt, da adaptive Ansichten mit Seiten verknüpft sind und Sie Sets hinzufügen können, wie Sie möchten. Also, was ich eigentlich tun werde, ist, dass ich Master-Ansichten hinzufügen werde. Masteransichten unterscheiden sich also etwas von der adaptiven Verwendung, und Sie werden sehen, warum ist diese Basis? Sie werden sehen, dass es keine Messung hat. Ich werde so große von euch anrufen und noch eine hinzufügen und diese kleine Ansicht nennen, und jetzt können wir sehen, dass wir diese unterschiedlichen Ansichten hier haben. kleine Ansicht nennen, Also in kleiner Sicht werde ich tatsächlich darauf klicken und es offensichtlich anders aussehen lassen. Es gibt eine große Aussicht. Es gibt eine kleine Ansicht und nun gehen wir zurück zu unserer Homepage. Und wenn wir hier wieder die verschiedenen Ansichten durchlaufen, hat sich nichts geändert. Ähm, aber lass uns das auf der Landschafts-Tablet-Ansicht machen. Ich werde eine dieser Instanzen auswählen und Sie können sehen, dass es dieses zusätzliche Feld hier durch die Überschreibungen gibt. Hier kann ich wählen, welche von euch des Meisters ich will. Und so bei diesem hier, werde ich tatsächlich diese beiden Ansichten gleichzeitig haben. Und bei diesem hier werde ich beide in kleiner Sicht haben und wir können sehen, wie sich das im Prototyp abspielt . Also lasst uns das auffrischen und hier runterkommen. Und so ist es hier normal. Und dann wird es sich ändern, wenn ich in diese Ansicht komme. Also gehen wir, und dann noch eins. Und jetzt können wir beide sehen sie dort jetzt, da adaptive Verschleißrahmung ziemlich pingelig sein kann, es gibt eine Menge Sachen zu dio um, ich möchte Sie ermutigen, die fertige Übungsdatei zu betrachten, weil ich gegangen bin durchlaufen und alle Ansichten dafür gemacht. Jetzt habe ich meinen eigenen Rat genommen und nur Prototyp genug, um meinen Punkt zu bekommen, was dieser Top-Bit hier ist. Eines der Dinge, die sie Ihnen speziell zeigen möchten, ist dieser besondere Meister, denn was hier geschieht, ist, dass jeder dieser Meister mit Inhalt überschrieben wird, aber es ist genau der gleiche Meister. Also, wenn ich hier zur Kategorie gehe, können wir sehen, dass es die Querformat Tablet-Ansicht, die Portrait-Tablet-Ansicht und was ich auch getan habe, ist, wo ihr Jungs tatsächlich diese Einrichtung hattet um diese Bewegung zu verwenden, die ihr verwendet habt, anstatt zu bewegen durch. Ich habe dies geändert, um zu bewegen, und dann musste ich die Interaktion zwischen dem großen Display auf dem Landschafts-Tablet nicht ändern . Aber für Porträt-Tablette brauchte ich noch Zeh. Fügen Sie den Hotspot dort mit einer anderen Interaktion hinzu, da ich mich tatsächlich um eine andere Anzahl von Pixeln bewegt habe. Um das Beste aus dieser Klasse herauszuholen, gehen Sie voran und führen Sie den gesamten adaptiven Einsatz für dieses gesamte System vollständig aus. Nein, wir haben das nicht viel in der Klasse gemacht, aber das liegt daran, dass es ziemlich zeitaufwendig sein kann. Aber Sie werden viel lernen, wenn Sie das tun, und stellen Sie sicher, dass Sie die abgeschlossene Übungsdatei überprüfen. Wenn Sie stecken bleiben, gibt es eine Menge gutes Zeug da drin, also als nächstes reden wir über Dokumentation und ich freue mich darauf. 24. Einführung in die Dokumentation: ist nicht effizient zum Prototyp. Alles, was Sie wollen, dass Ihr System tut. Und das ist, wo Akteure Dokumentationsfunktionalität kommt in Dinge wie Seitennotizen und Widget-Notizen. Ich benutzte diese Dinge zwei, um Dinge zu kommunizieren, für die es keinen Sinn ergibt. Prototyp Luftmeldungen sind ein wirklich gutes Beispiel ist großartig, Prototyp ein Beispiel für einen Fehler. Auf diese Weise konzipieren die Menschen das Verhalten der Nachricht, in der die Nachricht erscheint, und die damit verbundene Animation . Aber es macht keinen Sinn, jede einzelne letzte Klimaanlage und jede Nachricht, die damit verbunden ist, zu Prototypen zu entwickeln. Also, was ich tue, ist, dass ich diese Dinge stattdessen in einer Notiz dokumentiere, die es viel effizienter macht mit Actor jetzt in Version neun zu arbeiten, nicht viel hat sich über die Dokumentation auf neue Dinge geändert. Einer davon ist, dass Sie jetzt eine Notiz von einem Widget in ein anderes Widget verschieben können. Sie können auch mehrere Notizen für ein einzelnes Widget haben. Aber die Sache, die wirklich anders ist, ist, wie sich der tatsächliche Anteil entwickelt hat. Es wird jetzt tatsächliche Cloud genannt, und es ist eine sehr vorstellbare Plattform wie Zusammenarbeit. Also lassen Sie uns voran gehen und beginnen, Dinge zu dokumentieren und tatsächlich 25. Bildmaterial und Widgets dokumentieren: in dieser Lektion erfahren Sie, wie Sie die Dokumentationsfunktionalität von Akteuren verwenden, um mehr Informationen über Ihren Prototyp, wie er sich verhalten soll oder andere Informationen an Ihre Mitarbeiter zu übermitteln mehr Informationen über Ihren Prototyp, , z. B. Manager, Ingenieure oder jede andere Art von Stakeholdern. Also lasst uns weitermachen und loslegen. Nun, wenn wir Dokumentation und Schauspieler machen, gibt es im Wesentlichen auf Ebenen, auf denen wir es auf der Drahtrahmenebene tun können, wo wir Informationen über ah Seiten Ah, Loch und dann an den einzelnen -Widget-Ebene , auf der wir Informationen über einzelne Widgets kommunizieren. Also, wenn wir Informationen über die Seite des Ganzen kommunizieren wollen, gehen Sie einfach vor und klicken Sie außerhalb eines der Widgets und dann gehen Sie weiter und klicken Sie hier unbemerkt und Sie werden den Namen der Seite sehen. Und dann dieses Ding hier, das Seitenübersicht sagt. Hier können Sie Ihre Notizen eingeben, also werde ich nur I eingeben. Ich bin eine Seitennotiz, und wenn wir dann zum generierten Prototyp hier oben gehen, aktualisieren Sie dies. Wenn wir keine Notizen sehen können, es sei denn, wir klicken hier oben auf dieses Symbol, zeigt dies die Dokumentation. So sehen Sie sowohl den Namen der Seite als auch die Notiz selbst. Hier würde ich Informationen über Bedingungen mitteilen, unter denen diese Seite erscheint. Ah, spezielle Verhaltensweisen und besondere Situationen, diese Art von Sache. Lassen Sie uns also voran und schauen Sie sich die Dokumentation von Widgets an. Ich werde tatsächlich hier runter gehen und, ah, normalerweise, was Sie tun würden, wenn Sie ein Widget dokumentieren, ist, dass Sie auf das Widget klicken und dann in Notizen klicken würden . Jetzt wirst du bemerken, dass hier nichts ist. Das ist etwas, worüber ich eigentlich nicht super glücklich bin, weil ein Schauspieler neun zumindest man nicht wirklich eine Gruppe dokumentieren kann. Also muss ich tatsächlich in ein Objekt klicken , ,um Notizen darauf setzen zu können. Also in diesem Fall werde ich nur diese Notiz auf Kategorie zwei Hintergrundbild setzen. Ähm, Sie können hier sehen, wo es Notiz steht, ich gehe Teoh, gebe in ein paar Informationen ein, ich bin eine Notiz, und Sie werden hier sehen, dass, sobald Sie eine Notiz erstellen, äh, Ein anderes erscheint. Und auch, wenn Sie diese erste Note erstellen, erscheint dieses kleine Tag hier und Sie können auch mehrere Notizen pro Objekt erstellen, was wirklich cool ist. Ich bin eine weitere Notiz, und wenn Sie Inhalte mit einem Widget oder jede Art von Interaktionen zugeordnet haben, können Sie auf diese ah klicken, Anhang-Symbol, und Sie können beide einschließen. In diesem Fall gibt es keinen Text oder Interaktion damit verbunden, aber wenn es gäbe, würde es das hineinziehen. Und der Grund, warum Sie das tun möchten, ist, weil, wenn Sie diesen Prototyp verwenden, um Ingenieuren zu kommunizieren, manchmal das Herausnehmen von Text aus einem Prototyp schwierig ist, so dass die Ingenieure es dann einfach aus Ihrer Notiz holen können . Also lassen Sie uns sehen, wie das auf dem Prototyp aussieht und aktualisieren. Klicken Sie hier und hier auf meine Notizen. Meine Seitennotiz ist da, und meine individuellen Notizen sind da auf dir. Ich kann sehr deutlich sehen, worauf die einzelne Note steht, und ich kann darauf klicken. Es geht genau da unten. Also das ist eigentlich und wenn ich auf die tatsächliche Zahl klicke, die ich hier die Notiz bekomme, so ist es im Grunde wirklich, wirklich schwierig, die Notizen jetzt zu verpassen. Sie können diese Art von Dokumentation auch in Mastern durchführen. Ich finde das super hilfreich, wenn ich über das Verhalten von Objekten wie diesem kommuniziere . der nächsten Lektion werden wir ein wenig über die Veröffentlichung Ihres Prototyps in der tatsächlichen Cloud sprechen, was es Ihnen ermöglicht, diese Zusammenarbeit wirklich in Gang zu bringen. 26. Veröffentlichen: , um das Beste aus Akteur als Kollaborationstool herauszuholen, müssen Sie Ihre Prototypen wirklich in der Cloud veröffentlichen. Wenn Sie das tun, ist das erste, was Sie tun müssen, zu Akteur dot Cloud gehen und ein neues Konto erstellen. Ich habe bereits Konten, also werde ich einfach weitermachen und mich hier einloggen. Ähm, das ist also alles meine Schauspieler, aber das ist momentan nicht wichtig. Was wichtig ist, ist wieder in die tatsächliche gehen und sicherstellen, dass Sie hier angemeldet sind . Also, wenn Sie auf Konto gehen und drücken, loggen Sie sich in Ihr tatsächliches Konto ein, geben Sie einfach die Crittenden Anmeldeinformationen ein, die Sie gerade für Ihr tatsächliches Cloud-Konto erstellt haben, und Sie sollten gut gehen, Mann. Dann, sobald Sie das getan haben, können Sie diesen Share-Button drücken. Nun, wenn ich das hier traf, wird das ein bisschen anders aussehen, weil ich das wirklich für ein neues Jahr veröffentlichen muss , Earl, , weil ich diesen Prototyp erstellt und gelöscht habe eine Reihe von Malen. Wenn ich das tue, wird es standardmäßig nach dir suchen. Ich werde tatsächlich einen anderen Ort wählen, um dies zu setzen, weil ich viele Ordner in meinem tatsächlichen Cloud-Konto habe. Ich kann passwortgeschützt, wenn ich es nicht will, aber ich möchte das jetzt nicht tun. Äh, das ist wichtig. Vergewissern Sie sich, dass Sie Kommentare zulassen aktiviert haben. Andernfalls können andere Personen Ihren Prototyp nicht kommentieren. Also werde ich Publish auf dies dauert ein wenig Zeit, selbst mit einem relativ kleinen Prototyp wie diesem. Also werde ich nur langsam drücken Copy du bist l und in keiner Eile Wunder zurück hier rüber zu meinem Browser, hol es da rein und war dort. Also lassen Sie mich auf die Startseite Sunita gehen. Alles klar, was wir uns ansehen, um den Akteur zu kommentieren, ist, dass du dieses kleine Notiz-Ding hier drüben benutzt . Ähm, größtenteils, was du tun willst, ist getroffen. Kommentar auf dem Bildschirm hinzufügen. Nun, das Wichtigste ist, dass Sie zu der Stelle scrollen müssen, wo Sie den Kommentar hinzufügen möchten. Denn sobald Sie darauf klicken, können Sie nicht mehr scrollen. Also werde ich hier einen Kommentar hinzufügen, wenn ich darauf klicke. Es ist nummeriert. Und es sagt mir, wer ich bin, damit es meinen Namen einfängt. Ah, hier ist mein Komet. Dann werde ich das posten, und das kann ich weiter machen. Ähm, aber ich muss den Ausgang drücken, um da rauszukommen. So das hier auftaucht, können Sie darauf antworten und, Sie wissen, Sie können es bearbeiten. Der Markt ist aufgelöst. Eines der anderen interessanten Dinge ist bei einem anderen Kommentar hier, Ähm, Sie können auch darauf klicken. Und das wird es mir erlauben, ein bestimmtes Bild von dem zu machen, wovon ich spreche. Ich werde sagen, dass ich dieses Foto erneut aufnehmen möchte. Ah, und dann kann ich auch die Farbe aus irgendeinem Grund ändern und dann verlassen. Und das zeigt, dass Shows hier auftauchen. machst Und wenn du die E-Mail-Benachrichtigungenmachst, warne ich dich, es wird sehr viele von ihnen geben. Ähm, aber all diese Informationen, einschließlich dieser Bilder, erscheinen da oben. Es ist also wirklich einfach, den Überblick über das zu behalten, was vor sich geht. Das schließt unsere Lektion über das Veröffentlichen in der tatsächlichen Cloud ab 27. Schlussbemerkung: Herzlichen Glückwunsch. Sie haben die Einführung in das Prototyping abgeschlossen, und nach neun haben wir über Wire-Framing-Interaktionen, Masters, Responsive Design und Dokumentation gesprochen Masters, . Und glauben Sie es oder nicht, sind nur die Grundlagen. Also hoffe ich, einige fortgeschrittenere Themen in den kommenden Klassen zu behandeln. Dinge wie erweiterte Interaktionen, Animationsformularbasierte Interaktionen und dynamische Anwendungen auch Dinge wie bedingte Logik und detailliertes visuelles Design. Also halten Sie Ausschau nach denen. In der Zwischenzeit möchte ich Ihnen so sehr für Ihre Aufmerksamkeit, Ihr Interesse an Ihrer Zeit danken . Und ich hoffe, du hast viel gelernt. Kümmern Sie sich.