Prototyp in Figma in 60 Minuten | Real World Project

1. Prototyping in Figma – Was Sie wissen müssen: Willkommen zurück. Figma zu prototypisieren bedeutet einfach, das Design interaktiv zu gestalten Es ist, als ob das Projekt bereits codiert wäre und wir es verwenden können Lassen Sie uns also einsteigen und wir werden in einer Minute mehr darüber chatten. Also hier sind zwei Bildschirme für mobile Apps. Wir können uns registrieren oder anmelden. Fantastisch. Wechseln wir zum Prototypmodus, indem wir hier klicken. Es hat sich nicht viel geändert, aber das ist in Ordnung. Wählen wir nun auf dem Bildschirm auf der linken Seite die Option Anmelden aus. Wenn Sie darüber hinausgehen, werden Sie dieses Plus-Symbol sehen. Klicken und halten Sie eine Verbindung und ziehen Sie sie auf den anderen Bildschirm. Sofort erscheint dieses Pop-up, mit dem wir die Interaktion fein abstimmen können. Kurz gesagt, wir wollen Folgendes. Wenn wir auf Login klicken, also das ist der Auslöser, wollen wir navigieren. Das ist die Aktion, und das Ziel ist bereits festgelegt weil wir diesen Pfeil auf diesen bestimmten Bildschirm ziehen . Also uns geht es allen gut. Und was die Animation angeht, ist Smart Animate in Ordnung Der Rest ist wirklich egal. Okay, lass uns das nochmal machen, aber auf dem anderen Bildschirm. Klicken Sie also auf Registrieren und suchen Sie das Plus-Symbol. Ziehen Sie nun eine Verbindung auf den Startbildschirm. Beachten Sie, dass es einen blauen Rand gibt. Das ist großartig. Gleiche Einstellungen wie zuvor, völlig in Ordnung. Und ja, herzlichen Glückwunsch. Wir haben unseren ersten Prototyp. Also zögern Sie nicht, dieses Fenster zu schließen. Okay. Und um es zu testen, werden wir diesen Play-Button hier benutzen. Nun, das Laden größerer Prototypen kann eine Sekunde dauern, aber dieser ist ziemlich schnell. Und wir können klicken und wir können es in Aktion sehen. Es ist, als wäre die App codiert worden, als wäre sie live. Schauen Sie sich den Cursor an, wo eine Aktion verfügbar ist Wir werden das Handsymbol anstelle des Pfeils sehen. Das ist Prototyping auf den Punkt gebracht, und es gibt nur eine Handvoll anderer Funktionen, die Sie wirklich kennen müssen, und ich werde Sie durch sie führen Aber hier ist der wesentliche Punkt. Prototyping ist keine Designsache. Es geht nicht darum, es elegant und interaktiv zu gestalten, sodass es in den sozialen Medien besser aussieht, um mehr Likes zu bekommen Nein, schließe den Tab und lass uns zu unserem Projekt zurückkehren. Klicken Sie nun auf einen Pfeil, um die Animationseinstellungen zu öffnen , damit Sie wissen, was ich meine. Was ist also, wenn wir es von Smart Animate auf Move In ändern? Jetzt haben wir hier ein paar weitere Optionen. Sagen wir, es bewegt sich von der rechten Seite. Lass es uns ausprobieren. Das ist natürlich interessant, ein cooler Effekt, aber die andere Registerkarte ist in Smart Animate immer noch übrig Also lass uns zurückgehen. Wenn wir es dieses Mal so ändern, dass wir sagen, Slide in. Also das ist etwas anderes. Also das sieht vielleicht noch cooler aus. Und dann ändern wir vielleicht die Dauer auf sagen wir 600. Und noch ein letzter Schalter, lassen Sie uns die Kurve auf etwas anderes ändern. Lassen Sie uns das ändern, um das Ein- und Aussteigen zu erleichtern. Fantastisch. Lass uns jetzt auf Play klicken und die Dinge testen. Jetzt beeile ich mich, aber ich hoffe, du erkennst langsam ein Problem Ja, das sieht interessant aus. Es fühlt sich gut an. Aber vielleicht können wir es noch schöner machen Vielleicht muss das auf 4:50 eingestellt werden, vielleicht eine andere Art von Kurve Und das ist tatsächlich das größte Problem beim Prototyping. Es zieht dich in seinen Bann. Es nimmt so viel Zeit Es ist super zeitaufwändig wie nichts anderes. Und das Problem ist, es fühlt sich an, als ob Sie Fortschritte machen, oder? Als ob du an etwas Edlem arbeitest. Du feilst an der App. Du gibst ihr das Gefühl, etwas Besonderes zu sein, oder? Aber als Gründer eines App-Design-Studios , das ich über fünf Jahre lang geleitet habe, kann ich Ihnen das ohne zu zögern und ohne Zweifel sagen Alles, was Sie tun werden, alles, was wir hier gemacht haben, wird nicht so codiert werden, wie wir es entworfen haben Also 450 oder 600 Millisekunden, das ist nicht der Fall. Hineinziehen, reinrutschen, das ist nicht der Fall. Intelligentes Animieren und so weiter. Jetzt werde ich in der nächsten Lektion genauer erklären, warum das so ist in der nächsten Lektion genauer erklären, warum das so Aber vorerst laden Sie bitte das Projekt herunter. Sie haben es angehängt und verknüpfen diese beiden Bildschirme miteinander, wie ich es Ihnen vor einer Minute gezeigt habe. Der Grund, warum wir App-Design-Bildschirme im Vergleich zu einer normalen Website verwenden , liegt in ihrer Größe. Sie sind kleiner, sodass weniger herumgeschwenkt werden muss. Wir müssen uns innerhalb des großen Projekts nicht bewegen. Stellen Sie sich 20 Desktop-Bildschirme vor. Das ist eine Menge Zoomen und Schwenken Deshalb habe ich mich für mobile Lapa-Bildschirme entschieden Aber ja, versuchen Sie es, probieren Sie es aus, sehen Sie, wie es Ihnen geht, und schauen Sie sich dann bitte die nächste Lektion weiter an, denn sie ist sehr wichtig. Hab Spaß. 2. Prototyping ist wichtig, weist aber einen großen Fehler auf: Willkommen zurück. Prototyping ist aufregend Sie haben gesehen, wie viele Auswahlmöglichkeiten wir mit unseren Einstellungen haben, und das ist nur die Spitze des Eisbergs Stellen Sie sich nun vor, wie kompliziert und ausgefeilt wir unsere Designs aussehen lassen können und wie sie sich anfühlen Und das wird in den sozialen Medien sicherlich gut ankommen. Es wird viele Likes, Kommentare und viele Arbeitsanfragen bekommen , oder? Meine Projekte, richtig? Äh, nein, eigentlich nein, nicht wirklich. Denken Sie daran, ich war der CEO meiner App-Design-Firma, also konnte ich meinen Programmierern einfach sagen, dass sie meine Prototypen eins zu eins abgleichen sollten. Aber hier ist die Sache Ich habe es nicht getan. Und warum ist das so? Weil Codieren super teuer ist . Denk mal so darüber nach. Sagen wir, 1 Stunde Codierung, IOS-Codierung ist sagen wir 100 Dollar, eine Zufallszahl, okay? 100 Dollar die Stunde. Nun, der Entwickler sagt, dass es etwa 15 Stunden dauert, bis dieses Anmeldeformular funktionstüchtig ist, nur eine zufällige Zahl. Das sind also 1.500$, okay? 500 Dollar. Das ist reine Funktionalität, keine Animationen, oder? Dann fragst du nach den Animationen und er sagt, es sind irgendwo 10-30 Stunden mehr. Das sind also irgendwo 1000-3.000 $ extra. Er weiß es nicht genau, weil es eine Menge Feinabstimmung ist, viel Hin und Her Es könnte länger dauern, aber definitiv nicht kürzer. Sagst du jetzt ja? Akzeptieren Sie diese enormen Kosten? Und denken Sie daran , dass andere Teile des Projekts codiert werden müssen. Am besten ist es also, die App funktionsfähig zu machen Wenn Sie Zeit haben, gehen Sie zurück und fügen nach dem Start der App hier und da ein paar Animationen hinzu. Was bedeutet das also für das Prototyping? Es muss einfach sein. Es ist da, um dem Kunden zu helfen und dem Programmierer zu helfen, den Ablauf zu verstehen Schauen Sie sich hier kurz um. Nehmen wir Sie sehen dieses Projekt zum ersten Mal, okay? Kennen Sie nun alle möglichen Möglichkeiten, mit der Nutzung dieser App zu beginnen? Lass es mich ganz schnell aufschlüsseln. Sie können hier also Ihren Standort eingeben, Ihre Adresse. Das ist Nummer eins. Oder Sie können hier auf dieses Symbol klicken, um Ihre Adresse automatisch zu ermitteln Das ist also ein separater Bildschirm, das ist also mögliche Aktion Nummer zwei. Sie könnten diesen Schritt einfach überspringen und einfach alle Restaurants sehen, die in der App aufgelistet sind, und das ist potenzielle Aktion Nummer drei, okay, drei verschiedene Abläufe. Und schließlich können Sie registrieren, mit welchem Login Sie angemeldet sind, und das ist Aktion Nummer vier. Sie können nicht davon ausgehen , dass ein Kunde oder verschiedene Programmierer all diese vier Optionen aufgreifen Anstatt also anzunehmen, dass Sie ihnen, anstatt sie zum Nachdenken zu bringen, alle möglichen Möglichkeiten aufzeigen werden, ist das möglichen Möglichkeiten aufzeigen werden, ist fantastisch, weil es keinen Raum für Fantasie lässt , Das heißt, Prototypen eignen sich hervorragend , um zu zeigen, wie eine Website, eine App, alles dazwischen funktionieren soll Und hier ist der Grund. Prototypen sind ein unverzichtbares Werkzeug bei der Suche nach Programmierern. Okay? Also stellt ein Kunde in der Regel einen Designer ein, und mit einem vollständigen Prototyp fängt er an, Angebote von Entwicklern einzuholen Der Prototyp ist da, damit das Entwicklungsteam das Projekt genau verstehen kann sodass es alles darüber weiß Über den FigMA-Link können sie die Benutzeroberfläche und das eigentliche Design sehen, aber sie können auch die vielen Abläufe innerhalb der App sehen , wie Sie sich registrieren können, wie Sie eine Bestellung bezahlen können, wie Sie Produkte zur Karte hinzufügen oder von ihr entfernen können, so weiter und so weiter Beachten Sie nun zum Beispiel, dass kein Login für soziale Medien diesem Bildschirm kein Login für soziale Medien befindet. Das ist ziemlich wichtig. All diese winzigen Details verändern den Umfang des Projekts. Nehmen wir an, wir haben so etwas wie die Anmeldung mit Facebook oder Google oder was auch immer hinzugefügt . Das kann also zwei weitere Tage der Entwicklung in Anspruch nehmen, und das kann, sagen wir, 1.500 Dollar an zusätzlichen Kosten bedeuten. Aus diesem Grund sind Prototypen absolut notwendig. Wenn der Kunde nach Programmierern sucht, ein interaktiver Prototyp und ein sind ein interaktiver Prototyp und ein vollständiges Design von unschätzbarem diese Weise erhalten Sie genaue Angebote und Kostenvoranschläge, denn auch hier kann die Programmierfirma alles sehen. So können sie präzise sein. Aber zurück zu unserer Arbeit, niemand interessiert sich für ausgefallene Animationen. 400 Millisekunden, 600 rutschen rein, rein. Nein, es ist ihnen wichtig, alle Optionen in der App zu sehen So sollten Sie also das Prototyping angehen. Es ist also kein Design-Tool, um mehr Likes zu bekommen. Nein, aus funktionaler Sicht möchten Sie die Funktionen der App präsentieren Ich bestehe darauf, weil Sie auf Dribble und Be Hands viele ausgefallene Animationen sehen werden, und Sie denken vielleicht, dass Kunden danach suchen, aber das ist nicht der Fall Und du musst mir nicht vertrauen. Suchen Sie einfach nach diesen Projekten, die Sie in den sozialen Medien sehen. Wurden sie auf diese Weise umgesetzt? Gehen Sie und laden Sie diese Apps herunter. Kannst du all die ausgefallenen, komplexen Animationen sehen, die du auf Be Hands oder Dribble In jeder App oder Website spielt das keine Rolle. In neun von zehn Fällen ist das eigentliche Projekt sehr abgespeckt Keine Animationen oder sehr kleine. Und das liegt daran, dass es so viel Zeit und Geld kostet. Sehr wenige Unternehmen können es sich tatsächlich leisten. Und hier ist die Sache. Nimm dein Handy heraus und sieh dir die größten Unternehmen da draußen an. Schau dir ihre Apps an, Netflix, Uber, Amazon, was auch immer. Warum haben sie nicht all diese ausgefallenen Animationen? Weil es eine Ablenkung ist. Daher profitieren nur sehr wenige Unternehmen tatsächlich von solchen Dingen In diesem Kapitel werde ich Ihnen zeigen, wie man Prototypen erstellt, aber ich werde Ihre Zeit nicht verschwenden. 99% Ihrer Kunden werden einen funktionsfähigen Prototyp wollen, keinen ausgefeilten, wenn Sie einen halben Tag für ein paar Übergänge aufwenden. Das ist nicht der Punkt. Wir werden sicherstellen, dass tatsächliche Kunden von Ihrer Arbeit profitieren . Lassen Sie uns also darauf eingehen. 3. Verwenden Sie Prototyping, um Fehler und Mängel zu finden: Willkommen zurück. Prototyping ist eine großartige Möglichkeit, Fehler zu finden, Dinge, die Sie vergessen haben oder die der Kunde vielleicht vergessen hat Nun, eine Art von Fehler ist dieser. Angenommen, der Benutzer überspringt die Eingabe seiner Adresse und möchte einfach die Restaurants sehen , die sich in der App befinden Okay, auf einer Ebene macht das Sinn, oder? Er will sich umschauen. Wir sollten keine Hindernisse aufstellen damit der Nutzer die App erkunden kann, und dann ist es vielleicht wahrscheinlicher, dass er sich anmeldet. Es macht Sinn, oder? Aber was ist wenn diese App in einem riesigen Land wie den Vereinigten Staaten läuft , was nützt es , Restaurants zu zeigen, die Tausende von Kilometern entfernt sind? Das ist also etwas, das der Kunde berücksichtigen muss, und Ihr Prototyp wird diesen potenziellen Fehler aufzeigen Es ist nicht Ihre Aufgabe , das Verhalten der App zu ändern oder sie suchen zu lassen Aber wenn Sie potenzielle Probleme aufzeigen können, werden Sie sehr dankbar sein Nun zurück zu diesen Bildschirmen Wir haben einen sehr einfachen Prototyp erstellt. Wir können zwischen den Tabs wechseln. Aber was passiert, wenn du über diesen Button gehst? Nichts passiert, und das ist nicht ideal. also im Prototypmodus Klicken wir also im Prototypmodus auf die Schaltfläche, und auf der rechten Seite sehen wir diesen Teil, der hier Interaktionen genannt wird. Klicken Sie auf das Plus-Symbol. Es werden uns mehrere Optionen angezeigt, aber ich suche nach ihnen, während ich mit der Maus darüber Gehen wir also davon aus, dass es sich um eine Website handelt, nicht um eine App, bei der Sie normalerweise keinen Hover-Status im Handy haben, Aber wenn wir mit der Maus darüber fahren, wollen wir, dass die Schaltfläche zu wechselt und wir haben einen Status Im Moment ist es auf aktiv eingestellt, okay? Es ist orange, also macht es Sinn. Die Taste ist verfügbar und du kannst sie drücken, okay? Aber lassen Sie uns den Status auf Hover ändern und hier ist die Sache Wir haben nur einen anderen, der als deaktiviert bezeichnet wird. Das ist nicht gut. Also fehlt uns der Schwebezustand, und das ist nicht akzeptabel Das ist ein Fehler von unserer Seite. Das ist genau die Art und Weise, wie Sie Prototypen einsetzen sollten. So werden Sie Fehler finden, indem Sie den Prototypmodus verwenden. Wir haben gerade herausgefunden, dass uns ein Status fehlt, der Hover-Zustand Wechseln wir also zurück in den Designmodus. Unsere Ressourcen befinden sich genau hier, sodass Sie nicht danach suchen müssen. Und hier sind die beiden Knöpfe, aber wir brauchen den dritten. Klicken Sie also auf dieses Plus-Symbol und wir werden eine Variante erstellen. Sie werden sehen, dass der Name hier bereits hervorgehoben ist . Und anstatt zufällig drei oder etwas anderes anzugeben, schreiben wir Hover Und natürlich müssen wir das Design ändern, aber wir werden es einfach halten Wir werden die Verknüpfung der Aktionsfarbe aufheben und einen dunkleren Orangeton wählen , etwa so Okay, gutes Zeug. Gehen Sie jetzt zurück zum Prototyping-Modus und jetzt können wir weitermachen Wählen Sie also die Schaltfläche aus, und unter Interaktionen möchten wir Folgendes Wenn Sie mit der Maus darüber fahren, wechseln Sie zu „Hover“. die Animation angeht, entscheide ich mich in den meisten Fällen für Smart Animate Großartig. Lass es uns jetzt ausprobieren. Und natürlich wird es ohne Probleme funktionieren. Das ist fantastisch. überprüfen Sie Ihre Projekte noch einmal, bevor Sie sie weitergeben. Das ist nicht das Ende der Welt, dieser Fehler. Aber wenn Sie fünf dieser, zehn, 20 dieser Fehler zusammenzählen , dann wird der Entwickler verärgert sein. Er wird dem Kunden sagen, dass der Kunde nicht nur zufrieden ist, also wird er Ihnen vielleicht in ein paar Wochen, vielleicht in ein paar Monaten eine Nachricht schicken . Sie sind dann wahrscheinlich mit einem anderen Projekt beschäftigt. Wie Sie sich vorstellen können, sind alle verärgert. Also bitte arbeite nicht so. Wenn Sie einen Prototyp erstellen, können Sie diese Fehler schnell identifizieren und innerhalb weniger Minuten beheben. Aber was ist mit den Feldern? Nun, zunächst gibt es eine Möglichkeit, tatsächlich etwas in sie in einen Prototyp eingeben zu können , oder? Aber hilft das wirklich? Nein, ganz und gar nicht. Deshalb werden wir es nicht tun. Stattdessen werden wir über diese Staaten nachdenken. Das ist also der Hinweiszustand. Mein Name ist nicht wirklich ausgefüllt. Dies ist nur ein Beispiel, ein Hinweis, eine Art und Weise, wie wir dem Benutzer sagen, was eingegeben werden soll und auf welche Weise Das ist zum Beispiel im Telefonnummernfeld sehr hilfreich , wo man es in meinem Land möglicherweise auf verschiedene Arten ausschreiben könnte verschiedene Arten ausschreiben So können Sie also in meinem Land eine Nummer ausschreiben. Das mag ein bisschen verwirrend sein, aber wenn Sie einen Hinweis hinzufügen, ist es ein Hilfstext, oder? Es ist fantastisch. in dieser Situation klar, Ist in dieser Situation klar, dass dieser Text nur ein Hinweis ist, ein Hilfstext, der verschwindet , wenn Sie ihn tatsächlich anklicken? Nein, nicht wirklich. Es ist zu dunkel. Deshalb sollten wir es tatsächlich zu etwas ändern , das etwas verwaschener ist. Du könntest es sogar kursiv machen. Was zählt, ist , dass dies als Hinweis gesehen werden muss. Es muss eindeutig ein Hinweis sein. Du könntest sogar EG oder Hinweis schreiben und dann den tatsächlichen Namen oder was auch immer. So sprechen Sie mit dem Entwickler bei der Prototypenentwicklung , bei der Entwurfsarbeit Jetzt brauchen wir einen anderen Status , in dem der Text tatsächlich ausgefüllt ist, in dem der Benutzer tatsächlich etwas eingegeben hat, oder? Und dann muss es in diesem Fall ganz anders sein als der Hinweis Ich spreche düsterer, mutiger, also gibt es keine Verwirrung Ich gehe die Anträge ziemlich schnell durch, aber ich hoffe, Sie verstehen die Begründung Das ist der Sinn dieses Vortrags. Du entwirfst etwas, du denkst, es ist okay. Aber wenn man sich dann anhand eines Prototyps eingehender damit befasst, versteht man, dass er nicht gut genug ist. Also musst du zurückkommen und all diese Änderungen vornehmen. Designer, die tatsächlich Produkte versendet haben , kennen all diese Situationen und gehen von Anfang an damit um. Wenn Sie diese Erfahrung jedoch nicht haben , was kein Problem ist, verwenden Sie den Prototyping-Modus Gehen Sie dann zu allen Feldern, allen Bildschirmen und sehen Sie nach, ob Sie etwas vergessen haben, da Sie diese feinen Details möglicherweise nicht von Anfang an erhalten Aber wenn Sie alles auf diese Weise einrichten , ist hier die Sache. Entwickler werden dich lieben, und es besteht eine höhere Chance , dass du mehr Arbeit mit diesem Kunden oder eine tolle Bewertung oder beides bekommst . Abschließend mein Rat: Verschwenden Sie Ihre Zeit nicht damit, die Felder editierbar zu machen, richtig, indem Sie etwas in den Prototyp eingeben . Das hilft nicht Aber stellen Sie sicher , dass Sie separate Status für die Schaltflächen angeben, für die Felder für die meisten Ihrer Elemente, okay? Sie müssen sicherstellen, dass alles kristallklar ist. Wenn Sie diesen Prototyp auf 100% bringen wollen, könnten Sie möglicherweise einen Zustand einrichten, könnten Sie möglicherweise in dem das Feld deaktiviert ist, wo die Schaltfläche deaktiviert ist, vielleicht ist das Feld auch deaktiviert. Vielleicht muss noch etwas anderes passieren, bevor dieses spezielle Feld verfügbar wird. So können Sie es also auf die nächste Stufe bringen. Nun, wie man diese Zustände prototypisiert , sei es durch Klicks, sei es durch Hover-Zustände, welche Animation man einfügt, das Zeug ist wirklich egal Darüber hinaus müssen Sie dies nicht für jedes einzelne Feld in einem Projekt mit 100 Bildschirmen tun jedes einzelne Feld in einem Projekt mit 100 Bildschirmen Stattdessen machst du genau das, was ich hier getan habe. Sie arbeiten an der Master-Komponente. Auf der linken Seite befindet sich also das Originalfeld. Dort habe ich einen Standardstatus, in dem der Hinweis angezeigt wird, und einen anderen Status , den wir zusammen erstellt haben, dem der Benutzer etwas eingegeben hat in dem der Benutzer etwas eingegeben hat und der Text fett und dunkel wird Gutes Zeug. Sobald Sie diese Zustände haben, gehen Sie in den Prototypmodus und verbinden Sie eins zu drei und drei zu eins hier von der linken Seite, von den ursprünglichen Masterkomponenten. Okay, im Grunde kannst du jetzt, wenn du sie anklickst, zwischen den Zuständen hin - und herschalten. an den Originalfeldern arbeiten, allen Kopien auf der rechten Seite, werden alle diesem Beispiel folgen. Wenn das Projekt also 500 Felder hat, werden sie sich trotzdem so verhalten. Sie müssen sie nicht manuell verknüpfen. Macht das Sinn? Also nochmal, indem wir eine Interaktion mit der Originalkomponente erstellen und Kopien im gesamten Projekt verwenden, wobei alles auf der Originalkomponente erstellen und Kopien im gesamten Projekt verwenden, einmal eingerichtet ist, und es wird für das Ganze funktionieren. Und nur für den Fall, dass Sie neugierig sind, was ist mit diesem anderen Staat los? Diese Option habe ich nur für den Fall gewählt , dass der Hintergrund weiß ist und das Etikett schwarz sein muss. Du kannst es ignorieren. Es ist nicht wichtig. So bereitet man ein Projekt also tatsächlich für die Programmierung, für die Entwicklung vor. Okay, jetzt mach weiter und behebe diese Probleme selbst. Und wenn Sie bereit sind, fahren Sie bitte fort. Ich danke dir vielmals. 4. Overlays in Ihren Prototypen (Pop-ups): Willkommen zurück. Popups sind eine großartige Möglichkeit, Bedeutung zu vermitteln, indem sie viele Informationen auf nur einem Bildschirm anzeigen. Dies ist für alle nützlich, den Kunden, den Entwickler, aber natürlich auch für den Endbenutzer. Der Endbenutzer meint einfach den Kunden des Kunden. Also die tatsächlichen Leute, die die App oder Website nutzen werden. Also so funktioniert das. Mir wurde klar, dass wir keinen Popup-Bildschirm hatten , der manchmal als Modell bezeichnet wird. Also hier ist die Sache. Ich habe schnell einen gemacht, oder? Nachdem Sie ein Konto erstellt haben, möchte ich, dass der Benutzer automatisch angemeldet wird. Im Prototypmodus ziehen wir also einen Pfeil von dieser Schaltfläche in diesen Rahmen. Der Unterschied besteht darin, dass wir beim Klicken Navigate Two nicht verwenden. Nein, stattdessen verwenden wir Open Overlay. nun zur Animation Lassen Sie uns nun zur Animation Move In verwenden, obwohl das wirklich egal Lassen Sie uns das vorerst einfach so testen . Klicken Sie also auf Prototyp abspielen und lassen Sie uns ihn in Aktion sehen. Nun möchte ich, dass Sie feststellen der rote Hintergrund den Startbildschirm nicht wirklich bedeckt, und das liegt daran, dass das Popup tatsächlich ziemlich kürzer ist als alle anderen Bildschirme. Der Rahmen selbst ist kleiner. Also lass uns sehen, was los ist. Ich verwende Control W gerne, um meine Prototypen zu schließen und schnell zum Projekt zurückzukehren. Um jede Art von Verbindung anzupassen, klicken Sie einfach hier und Sie erhalten dieselben Einstellungen wie zuvor. Nun, hier ist die Sache. Lassen Sie uns dieses Mal einen Hintergrund hinzufügen, etwa blau oder eine andere auffällige Farbe. Klicken wir jetzt auf Play und Sie werden sehen, dass das funktioniert, aber hier ist die Sache. Es funktioniert nur oben und unten. Der rote Hintergrund bleibt bestehen. Nun, die Schlussfolgerung ist , dass Pop-Ups für Modals keinen Nervenkitzel hinzufügen Wechseln wir also zurück in den Designmodus und wir können ihn entweder ausblenden oder ganz entfernen Okay, großartig. Nun, ein Tipp. Wenn wir hier die Play-Taste drücken, zeigt uns der Prototyp das Modell, nicht den Startbildschirm. Warum? Weil das ausgewählt ist. Beachten Sie den blauen Rand. Wie Sie sehen können, ist das nicht wirklich sinnvoll, wenn ich auf Lay drücke . Denken Sie also immer daran, die Auswahl aufzuheben und dann auf Lay zu klicken. Okay, sehen wir uns unseren blauen Hintergrund an. Und ja, es funktioniert einwandfrei. Nun, die Position des Popups ist in den meisten Situationen irrelevant, aber ich möchte Ihnen einen UX-Track zeigen. Jetzt können wir im Einstellungs-Popup die Position von der Mitte auf fast alles andere ändern . Nun, die Liste ist ziemlich umfangreich. Sie können sie schnell durchgehen und Sie werden feststellen, dass es ziemlich einfach ist. Nichts allzu ausgefallenes, aber manchmal kann es helfen. Nun, der eigentliche Trick, der UX-Trick, ist dieser. Ändern Sie die Position auf manuell. Jetzt wird ein Overlay auf dem Bildschirm angezeigt, und Sie können es an einer sehr genauen Position neu positionieren In dieser Situation möchte ich, dass sich die Schaltfläche „Weiter“ ganz in der Nähe der ursprünglichen Creighton-Kontoschaltfläche befindet. Und warum ist das so? Weil der Benutzer seinen Finger oder Cursor bereits in dieser Region hat , weil , wenn er seinen Fokus auf dieser bestimmten Stelle behält App gut funktioniert, wenn er seinen Fokus auf dieser bestimmten Stelle behält. Kompliziert ausgedrückt, reduziert dies die kognitive Belastung. Du zögerst nicht. Sie wissen , dass Sie, wenn Sie Orange sehen, darauf klicken können und dass die meisten Aktionen am unteren Bildschirmrand verfügbar sind. Und wenn Sie in der gesamten App bei all diesen Dingen konsistent bleiben , werden alle viel glücklicher sein. Jetzt wissen die Benutzer vielleicht nicht, warum sich die App reibungslos anfühlt, aber das ist einer der Hauptgründe dafür. Okay, zögern Sie nicht, es auszuprobieren, und wir sind startklar. Das nächste, worüber ich reden möchte, Klamotten, wenn ich draußen klicke. In bestimmten Fällen wirkt das Wunder. Sie möchten, dass die Leute schnell durch Ihren Prototyp navigieren können , oder? sie also nicht, auf winzige Symbole oder Schaltflächen zu klicken , denn das fühlt sich lästig an. Richtig? Nun, ich weiß mit Sicherheit, dass Designer bei der Einstellung von Mitarbeitern Prototypen herstellten, die nicht weiterkommen konnten, wenn ich nicht ein kleines Kästchen ankreuzte. Nun, dieser Bruchteil ist nicht ideal, vor allem, wenn man viele, viele Bildschirme gesehen hat , oder? Also bitte blockiere deine Prototypen nicht. Zwingen Sie den Benutzer nicht, bestimmte Dinge zu tun. Nun, zurück zu gehen und diese Funktion zu aktivieren, macht in diesem Fall keinen Sinn. Sie erstellen ein Konto und erhalten dann eine Erfolgsmeldung. Wenn Sie es einfach schließen, indem Sie nach dem Zufallsprinzip auf eine beliebige Stelle auf der Rückseite klicken, kehren Sie zum Registrierungsbildschirm zurück. Das wäre also eine Schleife. Also das ist nicht gut. Verwenden Sie es in diesem Fall nicht. In anderen Situationen, später in anderen Lektionen, sollten Sie es ausprobieren, weil es das Surfen beschleunigt. Lassen Sie uns also noch einmal zusammenfassen Wenn Sie also Pop-ups, Modals, erstellen, können Sie die Rahmengröße recht klein halten, aber keine Füllung hinzufügen. Füge keinen Hintergrund hinzu Sie können das Modell zentriert halten, aber Sie können es auch manuell positionieren, um ein schnelleres Erlebnis zu erzielen. Apropos Geschwindigkeit: Verwenden Sie in der Regel die Option zum Schließen, wenn Sie nach draußen klicken , damit die Benutzer schnell durch Ihr Projekt navigieren können . Aber tun Sie das nur in Situationen , in denen es Sinn macht. Hier ist das nicht der Fall. Okay, lass uns weitermachen. 5. Timer in Prototypen: Willkommen zurück. Ich unterrichte gerne die Klassiker in Form von Prototyping-Techniken, die eigentlich in fast jeder Umgebung nützlich sind , aber sie erfordern nicht viele Fähigkeiten Timer sind eines dieser Dinge. Also haben wir gerade ein Konto erstellt, richtig, und wir bekommen dieses Pop-up Die Frage ist nun, müssen wir zu 100% auf diese Schaltfläche klicken , um weitermachen zu können und nein. Die Antwort lautet nein. Weniger Klicks bedeuten glücklichere Kunden, glücklichere Kunden. Wir müssen eine Erfolgsmeldung anzeigen um den Benutzer darüber zu informieren , dass etwas passiert ist, klar, aber wir wollen keine Reibung verursachen. Wir möchten, dass der Benutzer so schnell wie möglich eine Bestellung aufgibt. Weniger Klicks, glücklichere Kunden. Also müssen wir das tun. Wir verknüpfen die Schaltfläche Weiter auf diese Weise mit dem nächsten Bildschirm. Die Grundlagen, nichts allzu Kompliziertes. Jetzt werden wir aus dem Interaktionsbereich einen weiteren hinzufügen. Dieses Mal verwenden wir Delay. Der erste ist also auf Klick, dann ist der andere Delay, denn ja, man kann sie stapeln. Sie können mehrere haben. Und es geht so. Nach einer Zeit von, sagen wir, 2000 Millisekunden, was 2 Sekunden entspricht, navigieren wir zu Frame X, diesem hier Also lass uns weitermachen und es ausprobieren. Also mit der Erstellung eines Kontos, und dann drücken wir die Taste und wir sehen jetzt das Pop-up. Wenn wir es eilig haben, können wir auf die Schaltfläche klicken oder einfach 2 Sekunden warten. Das ist also großartig. Das ist eine großartige Erfahrung. Wenn Sie ein schnelleres wollen, können Sie es auf 1.500 Millisekunden reduzieren Aber hier ist die Sache. Flashen Sie keine Sachen und nehmen Sie sie weg. Da wäre ich vorsichtig. Manche Leute fangen vielleicht an, den Text zu lesen, und wenn Sie ihn verstecken, indem Sie einen neuen Bildschirm anzeigen, kann das manche Leute verärgern Dies ist das knifflige Balancespiel zwischen Geschwindigkeit und der vollständigen Kontrolle der Benutzer und der Verlangsamung von allem Wenn Sie die Dinge verlangsamen, sinkt in der Regel der Umsatz Ich schlage vor, dass Sie eine großartige Benutzeroberfläche haben. Wenn das Design stimmt, wenn die Typografie großartig ist, werden Sie es viel besser machen Zum Beispiel kurzer und knackiger Text, also Copywriting, das ist auf Sie haben sich angemeldet und dann ein grünes Häkchen, das wirkt Wunder Die Idee ist also, den Benutzer unbewusst zu führen. Er sieht ein grünes Häkchen, er weiß, dass es ihm gut geht Er sieht eingeloggt, wir können loslegen. Nun, der Sekundärtext spielt zu diesem Zeitpunkt eigentlich keine Rolle. Okay, jetzt ist es Zeit für eine Übung. Ich möchte, dass du den folgenden Effekt reproduzierst. Dies ist ein Countdown, nachdem Sie ein Konto erstellt haben. Starten Sie ein brandneues Projekt und sehen Sie, wie Sie es bewältigen können. Sie haben nichts angehängt. Du musst es von Grund auf neu machen. Beginnen Sie mit einem 720 x 12 80-Bild, aber um ehrlich zu sein, ist das wirklich egal. Gib dein Bestes, um so etwas neu zu machen. Es muss nicht perfekt sein, also kein Druck. Hab einfach Spaß damit. Und wenn Sie fertig sind, teilen Sie den Link zum Prototyp wie folgt. Klicken Sie hier und jetzt suchen Sie nach dieser Option. Wenn Sie es nicht schaffen, machen Sie sich keine Sorgen, Sie können das Video mit Ihrem Telefon aufnehmen und es stattdessen posten. welchen Methoden experimentieren Sie mit dieser Verzögerungsfunktion mit diesem Timer Dies ist die einzige Übung , bei der wir einfach Spaß mit Dauern, Kurven und so weiter haben Aber ja, den Rest der Zeit werden wir uns auf Funktionen und Dinge konzentrieren , die wirklich Das ist nur zum Spaß, um uns zu amüsieren. Okay, lass es uns versuchen. 6. Scrollen in Prototypen: Willkommen zurück. Lassen Sie uns über das Scrollen in unseren Prototypen Dies dient UX-Zwecken, aber Kunden schätzen diese Details in der Regel Angenommen, wir befinden uns auf diesem Bildschirm und möchten nach unten scrollen , um weitere Einträge zu sehen. Gehen Sie also in den Prototypmodus und genau hier haben wir ein Scrollverhalten. Ändern Sie dies von „Kein Scrollen“ auf „Vertikal“, und das macht offensichtlich Sinn Klicken Sie auf das Play-Symbol und schauen Sie es sich an. Nun, funktionell macht das Sinn. Aber hier ist eine UX. Das Hauptmenü jederzeit sichtbar zu haben , hilft den Benutzern wirklich. Also können wir das machen. Wählen Sie die Verizon-Bar aus und schauen Sie sich hier um. Anstatt mit dem übergeordneten Element zu scrollen, ändern Sie es auf „Fest Machen Sie dann dasselbe für die Aktionsleiste, in der Sie die Stadt tatsächlich auswählen können. Stellen Sie dies also ebenfalls auf behoben ein. Okay, großartig. Lass es uns jetzt ausprobieren. Sie behalten tatsächlich ihre Position, sodass der Benutzer immer die Suchfunktion, das Filtersystem verwenden, die Navigation öffnen und so weiter kann Filtersystem verwenden, die Navigation öffnen . Das ist nützliches Zeug. Aber um fair zu sein, die Verizon-Leiste hält nicht wirklich. Also lass es uns wieder ändern Anstatt das Problem zu beheben, ändern wir es wieder so, dass wir mit dem Elternteil scrollen. Okay, lass uns jetzt sehen, wie das aussieht. Und die Sache ist, ja, es ist nicht mehr repariert, aber jetzt haben wir diese hässliche Lücke genau hier über San Francisco. Aber da hilft uns die andere Wahl wirklich. Schließen Sie also den Prototyp, wählen Sie die Aktionsleiste und ändern Sie sie auf „Sticky“, was sich ähnlich wie „behoben“ anhört, aber wenn Sie weiterlesen, heißt es, hören Sie am oberen Rand auf. Schauen wir es uns jetzt an. Und ja, das ist es, wonach wir suchen. Das ist perfekt. Also mach jetzt eine Pause und probiere es aus. Okay, wenn Sie bereit sind, wechseln wir zu einer Website, dem Desktop-Modus. Auch hier wählen wir zuerst den großen Rahmen aus und stellen den Bildlauf auf Vertikal. Dann wählen wir das Logo aus und ändern es auf „Fest“. Okay, lustiges Zeug, die Logo-Leiste natürlich. Machen Sie dann dasselbe für den Hauptmenürahmen. Dies ist der einfachste Ansatz, aber probieren Sie ihn aus und stellen Sie sicher, dass Sie ihn verstehen. Und wenn man dieselben Probleme wie zuvor hat und das Logo immer zusammen mit den Social-Media-Symbolen angezeigt wird, macht das natürlich das Logo immer zusammen mit den Social-Media-Symbolen angezeigt wird , nicht viel Sinn. Es ist nicht so nützlich, weißt du, also schieben wir wertvolle Inhalte nach unten, das ist nicht gut. Also lasst uns zurückschalten, damit es scrollt. Und was das Hauptmenü angeht, lass es am Rand stehen Und insgesamt, ja, das ist eine weitaus bessere Erfahrung. Das ist UX-Sachen, Benutzererfahrung. Lassen Sie uns nun zum horizontalen Scrollen wechseln, was uns helfen wird, etwas zu verstehen Also fange mit einem zufälligen Bild an, etwa so, reines Weiß, Portrait, nichts Besonderes, okay? Fügen wir nun ein zufälliges Rechteck hinzu, etwa Hotkey R. Sie könnten alles andere verwenden. Es macht wirklich keinen Unterschied. Ich halte die Dinge so einfach wie möglich. Verwenden wir jetzt Shift A. Okay, ändern Sie es im Bereich zur Größenänderung auf der rechten Seite auf Umarmen Bereich zur Größenänderung auf der rechten Seite auf Und weil wir hier sind, sollten wir den Ablauf ändern. Wir suchen hier nach diesem. Okay, horizontal. Tolles Zeug. Wählen wir nun das Rechteck selbst aus. Okay, also das Rechteck und ein paar Mal Strg D drücken , damit wir genug Kopien haben. Machen Sie genug, damit sie aus dem Rahmen herauskommen, so wie es ist. Nun, das wäre ein perfekter Fall für eine horizontale Schriftrolle, oder? Wechseln wir also in den Prototypmodus und wählen dann den Auto-Layout-Frame Dieser hier. Also nicht der große, sondern der, der die Rechtecke enthält, okay? Und von hier aus ändern Sie den Überlauf auf horizontal. Und Sie könnten erwarten, dass das eine beschlossene Sache ist, oder? Aber nein, wenn wir auf Lay klicken, werden Sie feststellen, dass es nicht funktioniert. Und warum ist das so? Nun, dieses Symbol zeigt uns die Situation. Es besagt, dass der Inhalt größer als der Rahmen sein muss. Das bedeutet also Folgendes. Wechseln Sie zurück in den Entwurfsmodus. Das ist essenziell. Das kannst du nicht überspringen. Und jetzt ändern Sie die Größe des Rahmens auf etwa so. Also ungefähr die Breite des Bildschirms. Jetzt können Sie auf Play klicken und voila. Es funktioniert einwandfrei. Um es noch einmal zusammenzufassen: Der Inhalt kann außerhalb des Rahmens liegen, aber der Rahmen selbst muss sich innerhalb des Bildschirms Das ist der Schlüssel. Diese Grenze zeigt uns, wie wir das richtig angehen müssen. Okay, gehen wir zurück zur Desktop-Website und versuchen es erneut. Nehmen wir also die ersten drei Elemente, gesamte Zeile, und verwenden jetzt Shift A. Wir werden es langsam machen. Wählen Sie als Nächstes eine Karte aus und erstellen Sie eine Reihe von Kopien. Das würde also Scrollen erfordern. Gute Arbeit. Gutes Zeug. Wählen Sie nun den Rahmen für das automatische Layout und ändern Sie im Prototypmodus den Überlauf auf horizontal Wenn Sie jetzt auf Play klicken, funktioniert es nicht. Mach weiter und probiere es aus. Es passiert nicht, oder? Nicht gut. Wechseln Sie nun zurück in den Designmodus und ändern Sie die Größe des Rahmens wie folgt Okay? Also ist es auf dem eigentlichen Bildschirm. Machen Sie so oft wie nötig eine Pause , damit Sie weiterarbeiten können. Okay, jetzt kannst du auf Play klicken. Und da hast du es. Das ist ein solider Fortschritt. Das ist die Art, wie man scrollt. Dies gilt natürlich auch für das vertikale Scrollen. Nun zu deiner Übung, ich möchte, dass du das tust. Ich möchte, dass Sie diesen Bildschirm verwenden und horizontal nach den verfügbaren Adressen suchen. Also füge drei oder vier hinzu, also ein bisschen mehr und füge eine Schriftrolle hinzu, eine horizontale. Wenn du das nicht schaffst, verwende meinen rechteckigen Ansatz. Also ein brandneuer Bildschirm und dann meine Schritte zurückverfolgen. Kehren Sie dann zu meinem Adressbildschirm zurück und probieren Sie es erneut aus. Hier ist die Sache. In dieser Situation müssen Sie möglicherweise für jede Karte ein paar Dinge ändern. Sie können die Breite ändern. Sie können die Methode zur Größenänderung ändern. Sie können eine Menge Dinge ändern. Das überlasse ich dir. Die Idee ist, dass Sie völlige Freiheit haben. Wenn Sie fertig sind, machen Sie bitte dasselbe für das vertikale Scrollen Stellen Sie sich also noch einmal vor, Sie haben fünf oder sechs, vielleicht sieben Adressen insgesamt vertikal, und Sie müssen scrollen Denken Sie nur daran, was ich Ihnen über die horizontale Sache beigebracht habe , weil sie auch vertikal gilt. Hab Spaß und mach beides. Horizontal und vertikal. Danke. 7. Intelligentere Prototypen mit dieser Methode: Willkommen zurück. Prototypen sind nützlich und größere Projekte mit den Abläufen können ziemlich kompliziert sein, aber bei größeren Projekten kann es aufgrund der Vielzahl von Bildschirmen schwierig sein , Prototypen zu erstellen. Zum Glück können wir intelligenter arbeiten . Beim Verknüpfen von Bildschirmen wissen wir, dass wir ein Objekt auswählen und eine Verbindung so ziehen, oder? Das Registrieren und Einloggen ist ziemlich einfach. Sie sind direkt nebeneinander, und das macht Sinn, oder? Aber wie kommen wir mit dem Zurückpfeil zurecht? Wo sollen wir es verlinken? Die Sache ist, es kann ziemlich kompliziert sein, weil Sie möglicherweise von mehreren Orten aus auf einen Bildschirm gelangen könnten . Woher wissen Sie also, wohin Sie den Benutzer zurückschicken müssen? Aber hier ist die Sache. Zum Glück gibt es in Figma eine integrierte Funktion Sie wählen die Instanz also so aus, nicht den Pfeil, sondern die Instanz Und dann fügen Sie eine Interaktion Sie auf Zurück klicken. Und das war's. Figma weiß, wo du herkommst und du bist startklar, automatisch hast du nichts anderes zu tun Jetzt noch ein kurzer Tipp. Im großen Prototyp kannst du ihn jederzeit neu starten, indem du R drückst. Das bringt dich zum Anfang des Flows. Aber wie legt man den Startpunkt fest? Wie legt man den Startpunkt des Flusses fest? Sie wählen also den Rahmen aus. In meinem Fall ist es dieser hier und dann der Prototypmodus. In diesem Fenster sehen Sie den Flow-Startpunkt. Und das ist es. Wenn du jetzt einen Prototyp spielst, aber zu weit nach unten gegangen bist und dir nicht sicher bist, was los ist , drücke einfach R und du wirst zum Originalbildschirm zurückgebracht. Außerdem können Sie jederzeit Flows für verschiedene Situationen einrichten . neuer Kunde im Vergleich zu einem wiederkehrenden Kunden, nur als Beispiel. Aber konzentrieren wir uns noch einmal auf den Zurück-Pfeil. Wir haben hier viele Rückpfeile. Wenden wir dieselbe Aktion manuell auf jedem einzelnen Bildschirm nacheinander an, oder kopieren wir und fügen wir sie ein? Nein, Sie können sich hier an der Seite tatsächlich auf die Hauptkomponente konzentrieren . Stellen Sie diesen mit diesem Verhalten ein, und das ist die Sache. Wir sind bereit zu rocken. Also wendest du diese Interaktion auf den Master der Komponente und all diese Typen sind Klone von Kopien Aus diesem Grund werden sie diesem Beispiel folgen. Also nochmal, weil dieses Design mit Exemplaren mit Klonen dieser Originalkomponente erstellt wurde , bedeutet das, dass sie wie erwartet funktionieren werden Sie können also mithilfe dieser Ressourcen bestimmte Aktionen definieren mithilfe dieser Ressourcen Lassen Sie uns zum Beispiel einen Link zum Logo hinzufügen. Okay? Wählen Sie es also aus und stellen Sie Folgendes ein. Beim Klicken einen Link öffnen. Ich werde meine Website einrichten, aber das spielt natürlich keine Rolle. Dies ist nützlich, falls wir dem Kunden oder dem Entwickler eine bestimmte Seite zeigen möchten , die vielleicht schon live ist. Vielleicht ist es ein Admin-Panel oder vielleicht eine bestimmte Subdomain , die vor der Öffentlichkeit verborgen ist Und ja, es funktioniert einfach so. Eine letzte Sache. Lass uns dafür sorgen, dass das Seitenmenü funktioniert. Das sollte also allen Beteiligten helfen. Identifizieren Sie zunächst diesen Rahmen. Okay, es scheint, als wäre es dieser hier. Beachten Sie, dass die Breite dieselbe ist wie bei den anderen Bildschirmen. Das ist nicht ideal. Also lass uns das schnell beheben. Also werde ich die Breite von 720 auf sagen wir 640 oder so etwas in dieser Richtung reduzieren. Das Logo kann sich bewegen, aber das ist eine einfache Lösung. Ich möchte zeigen, dass dies ein Seitenmenü ist, kein völlig anderer Bildschirm. Deshalb ist es wichtig, dass wir etwas darunter sehen. Stimmt. Das ist der Rahmen, den wir im Hinterkopf behalten müssen. Kehren wir nun zur ursprünglichen Komponente zurück. Wenn Sie meine Kurse besucht haben, wissen Sie, dass ich Ihnen empfehle , Ihr gesamtes Material in einem separaten Rahmen wie diesem, also zur Seite, zu platzieren. Okay, fügen Sie die Verbindung hinzu, aber Sie müssen keine Linie ziehen , da wir den Namen kennen. Wir kennen den Namen dieses Frames. Also werden wir das machen. Öffne das Overlay und jetzt ist das der Frame, nach dem wir suchen Position, gehen wir nach oben links, und wir möchten, dass beide Kästchen aktiviert sind Was die Animation angeht, ja, geh rein. Das ist der Punkt, an dem es absolut Sinn macht. Und wir werden diese Richtung vorgeben. Okay, großartig. Lass es uns testen. Denken Sie daran, wenn Sie Ihren Prototyp von einem bestimmten Bildschirm aus starten möchten , wählen Sie einfach den Rahmen aus und schon kann es losgehen. Okay, ja, das ist großartig. Vielleicht ist das Mit ein bisschen zu viel. Vielleicht würde 580 oder so etwas Nada Ware ein bisschen besser funktionieren, aber das ist in Ordnung Es bringt den Punkt rüber. Aber ja, wir sind startklar. Mach weiter und probiere es aus. Dann fahren Sie bitte fort. 8. Erstellen einer interaktiven Dropdownliste: Willkommen zurück. Lassen Sie uns ein interaktives Drop-down-Menü erstellen ein interaktives Drop-down-Menü indem wir alles verwenden, was wir bisher gelernt haben. Aber denken Sie daran, dass wir uns bei der Rückkehr zu den Grundlagen auf die Funktionalität konzentrieren, um dem Kunden und dem Programmierer zu helfen, Dinge herauszufinden, und nicht darauf, das Design zu 100% vollständig interaktiv zu gestalten Nun, hier ist der Überblick. Also, wenn du auf San Francisco klickst, bekommst du eine Liste von CDs, die in der App verfügbar sind, okay? Fangen wir also mit dem Folgenden an. Geben Sie zwei ein, Tastenkürzel T und schreiben Sie etwas wie den Namen der Stadt aus. Machen wir es einfach Ändern Sie den Text in Schwarz oder etwas Ähnliches und fügen Sie dann das gesamte Layout mit Shift A Die Klassiker sind hier ziemlich schnell. Für die Einstellungen sagt Nonito halb fett, 28, was auch immer. Und was die Polsterung angeht, nehmen wir 60 und dann zehn Ich beeile mich, weil ich möchte, dass Sie sich auf den eigentlichen Prototyp konzentrieren, nicht auf das Design Aber natürlich ist es am besten, wenn du dich an den Stil hältst, den wir bereits in der App eingerichtet haben, weißt du, also folge derselben Designsprache Ein einfacher schwarzer Rand eignet sich möglicherweise auch gut für dieses Drop-down-Menü Auch hier zoome ich durch. Okay, jetzt machen wir daraus eine Komponente wie diese. Gutes Zeug. Und um es etwas nützlicher zu machen, fügen wir einen Hover-Status und dann einen ausgewählten Status hinzu Okay? Nun, der beste Weg, das zu tun, nett und schnell, ist Varianz Fügen Sie also den ersten hinzu, indem Sie hier klicken und ihn Hover oder etwas Ähnliches nennen Okay? Tolles Zeug. Und dann füge noch eins hinzu, sodass wir insgesamt drei haben. Nennen Sie es diesmal ausgewählt oder ausgefallen oder was auch immer Sie wollen. Für ein sehr schnelles Design sollte der Hover-Status nun eine etwas andere Hintergrundfarbe haben eine etwas andere Hintergrundfarbe Ich werde alles nach dem Zufallsprinzip auswählen, aber Sie sollten sich an den Stil des Projekts halten Und für den ausgewählten Bundesstaat nochmal etwas Schnelles, Nettes und Schnelles. Nehmen wir Orange mit vielleicht reinweißem Text. Okay? Falls du lernen willst, wie man Figma designt, habe ich natürlich noch andere Kapitel dazu Hier dreht sich alles um Prototyping. Okay, großartig. Lassen Sie uns nun das eigentliche Dropdown machen. Ziehen Sie also eine Kopie mit Alt heraus und ziehen Sie. Das ist Option-Drag auf einem Mac. Und lassen Sie uns ein automatisches Layout mit Shift A hinzufügen, aber wir müssen die gesamte Polsterung entfernen Also ist es Null und dann Null. Aber hier ist die Sache mit der Lücke , die wird auch Null sein. Also insgesamt drei Nullen. übrigens sicher, dass Sie im Flow-Bereich diesen ausgewählt haben . Wir wählen Vertikal Okay. Wählen wir nun die Instanz aus. Dieser hier, okay? Machen Sie so oft eine Pause wie nötig. Benutze Control D ein paar Mal. Wir haben also insgesamt vier oder fünf Optionen. Vielleicht sehen Sie hier eine nette hilfreiche Nachricht von Figma. Das Programm möchte uns helfen, dass sich die App real anfühlt. Es bietet uns also die Möglichkeit, automatisch einige Städtenamen zu erhalten, was ziemlich cool ist, also lasst uns es benutzen. Okay, bis jetzt, kein Prototyping. Das war nur Designkram , den Sie vielleicht schon kennen. Aber jetzt wechseln wir in den Prototypmodus. Ziehen Sie also eine Linie von der ersten zur zweiten Schaltfläche. Diese liegen ziemlich nahe beieinander, aber das ist in Ordnung. Sie für den Auslöser, während Sie den Mauszeiger bewegen, und wechseln Sie dann zu Hover Was die Animation angeht, ist Smart Animate völlig in Ordnung. Und das ist erledigt. nun von der zweiten Schaltfläche Ziehen Sie nun von der zweiten Schaltfläche eine Linie zur dritten. Beim Klicken ist nichts kompliziert, wechseln Sie zu „Ausgewählt“. Und schließlich verknüpfen Sie die dritte mit der ersten, und Sie werden sehen, dass die Optionen bereits korrekt eingerichtet sind. Das ist fantastisches Zeug. Also lass es uns testen, aber völlig isoliert. Wählen Sie also diesen Rahmen hier aus. Es ist also der Frame, der all diese Instanzen enthält. Drücken Sie jetzt die Play-Taste. Also lass uns einen Blick darauf werfen. Okay, der Hover-Status funktioniert also einwandfrei Okay? Was ist mit Klicken? Ja, das ist auch solide. Herzlichen Glückwunsch. Wir haben den ersten Schritt abgeschlossen Gehen Sie jetzt zurück zum Projekt, San Francisco. Um fair zu sein, sollte das Hamburger-Menü von diesem Artikel getrennt werden, aber wir konzentrieren uns auf den Namen der Stadt und den Dropdown-Pfeil Also werden wir diese beiden wie folgt mit dem Menü verknüpfen. Und was die Einstellungen angeht, wollen wir, dass der Auslöser beim Klicken ist, obwohl der Hover auch genauso gut funktionieren kann Und für die Aktion wollen wir das Overlay öffnen. Hier macht diese Funktion absolut Sinn. Schließen Sie, wenn Sie nach draußen klicken. Das ist großartig, nützlich hier. Kein Hintergrund, aber wir wollen eine benutzerdefinierte Position. Also klicken Sie und ändern Sie es auf manuell. Manchmal sehen Sie die Vorschau möglicherweise nicht, aber drücken Sie Escape oder schließen Sie das Fenster klicken Sie dann auf die Verbindung, und Sie sollten sie sehen können. Okay, platziere das Drop-down-Menü irgendwo unter dem Stadtnamen und schreibe, wenn möglich, Zeile. Gutes Zeug, ja. Okay, wir sind bereit zu rocken. Klicken Sie also auf diesen speziellen Bildschirm hier und lassen Sie uns den Prototyp spielen. Ja. Okay, ich bin sehr zufrieden damit. Also zurück zu dem, womit ich diese Lektion begonnen habe. Sollten wir aus einem Bundesstaat auch eine Situation machen , in der San Francisco zu etwas anderem wechselt, etwa New York oder aufgrund dessen, was der Nutzer auswählt? Und sollten wir dann die Restaurantliste für jede einzelne Auswahl in dieser Drop-down-Liste ändern jede einzelne Auswahl in , damit sie zu 100% interaktiv Hier werden Designer also verrückt und verbringen viele Stunden ohne guten Grund Denken Sie daran, dass wir dieses Drop-down-Menü eingerichtet haben, damit das Entwicklungsteam den Status Hover und den Down-Status sehen kann den Status Hover und den Down-Status Sie können sehen, dass es kein Eingabefeld gibt, es gibt kein Textfeld, in das der Benutzer etwas eingeben könnte und so weiter Im Grunde hilft ihnen dieses Ding dabei, das Projekt zu planen. Und natürlich schaut der Kunde vielleicht mal rein und klärt die Dinge, oder? Vielleicht ist dies nur die aktuelle Liste von Zitaten , die der Benutzer tatsächlich zuvor Vielleicht funktioniert die App nur hier tatsächlich. Aber wenn es 100 Städte sind, macht dieses Dropdown Sinn? Natürlich nicht? Wie Sie sehen können, liegen all diese Angaben außerhalb unserer Gehaltsgruppe. Das ist nicht unser Job, oder? Wir treffen diese Entscheidungen nicht. Aber mit diesem Prototyp können wir eine Flagge hissen. Wir können den Stakeholdern die Möglichkeit geben , über die Ausrichtung der App zu diskutieren und zu entscheiden. Dann können wir zurückkommen und diese Anweisungen umsetzen. So wie es aussieht, wissen wir es eigentlich nicht, also haben wir unser Bestes gegeben. Wenn das Unternehmen plant, in 100 Städten live zu sein, wäre ein Dropdown nicht sinnvoll. Höchstwahrscheinlich muss es ein Feld oben sein, in das der Benutzer etwas eingeben kann, plus vielleicht eine Liste der letzten Städte oder vielleicht eine alphabetisch sortierte Liste, oder weil es zum Beispiel vielleicht auf eine einzige Stadt beschränkt ist Auch hier macht es keinen Sinn, ein Drop-down-Menü anzuzeigen, vielleicht nur die aktuelle Adresse des Benutzers anzuzeigen Aus diesem Grund erfordert die Arbeit an solchen Projekten viel Kommunikation. Aber all diese Bemühungen und Treffen erfordern unbedingt einen Prototyp. Wenn Sie sich das nicht ansehen und verwenden können, sind Sie sich nicht sicher, ob Sie auf derselben Wellenlänge sind. Okay, jetzt bist du dran. Mach weiter und mach dieses Dropdown. Viel Spaß damit. 9. Letzte Übung - Erstellen eines vollständigen Prototyps: Willkommen zurück. Sie wissen jetzt, wie Sie aus einem bestimmten Grund einen interaktiven Prototyp erstellen können, um dem Kunden und seinem Programmierteam zu helfen. Du machst Prototypen nicht für Likes. Sie machen nicht absolut jedes einzelne Objekt anklickbar. Nein, das wäre Zeitverschwendung. Stattdessen erstellen Sie jetzt Prototypen, um Fehler zu finden, sowohl Fehler, die Sie übersehen haben, auch logische Fehler oder Flow-Fehler , die der Kunde klären muss Nun, gibt es noch viele andere Dinge, die ich dir zeigen könnte? Zum Beispiel, wie man den Status einer Checkbox ändert, wie man Variablen verwendet, wie man dafür sorgt, dass sich der Prototyp noch interaktiver anfühlt. Natürlich, aber ich möchte Sie auf reale Projekte vorbereiten, und das sind die Fähigkeiten, die Sie in 90% der Fälle anwenden werden . Was ich Ihnen beigebracht habe, ist also Ihre Hausaufgabe. Sie haben diese Datei angehängt, bitte importieren Sie sie. Dann beginnen Sie mit dem Prototyping Immer wenn Sie einen Fehler oder einen fehlenden Bildschirm finden, verknüpfen Sie dieses Objekt mit einem Overlay, auf dem steht: Das fehlt müssen Sie selbst entwerfen, dieses Overlay Nun, wo würde das gelten? Zum Beispiel Passwort vergessen, dafür haben wir keinen Bildschirm. Nun, warum ist das wichtig? Vielleicht werden wir nach einer E-Mail gefragt, aber vielleicht werden wir nach dem Benutzernamen und einer E-Mail gefragt. Vielleicht E-Mail und Telefon. Sie haben keine Ahnung, wie der Kunde mit seiner Sicherheit umgehen wird. Das könnte also eine Sicherheitslücke sein. Also ist es eigentlich ziemlich wichtig. Aber weil es nicht hier ist, müssen wir diesen Fehler aufzeigen. Verknüpfen Sie es also mit einem neuen Rahmen , den Sie entwerfen möchten, stellen Sie es auf Überlagerung ein und stellen Sie es so ein, dass es geschlossen wird, wenn Sie nach draußen klicken Am Ende dieser Übung sollten Sie einen großartigen Prototyp haben. Sie können den Link auf der Plattform teilen, Sie können den Link auf der Plattform teilen um Feedback zu erhalten Im Idealfall kannst du dir auch ansehen, was andere Schüler gemacht haben, und ihre Fehler erkennen. Es geht nicht darum, dass sich jemand schlecht fühlt. Es geht darum zu verstehen, wie der Kunde und seine Programmierer Ihre Arbeit unter die Lupe nehmen werden, wie sie alles überprüfen und Fehler lokalisieren werden In meiner Karriere als Lehrer habe ich das 1 Million Mal gehört Ah, Chris, ich habe es einfach vergessen. Klar, aber als Designer muss man gründlich sein. Es ist völlig in Ordnung, den Prototyp nicht zu 100% realistisch zu machen. Nicht zu wissen, dass Ihnen wichtige Bildschirme fehlen , ist nicht in Ordnung. Also los, legen Sie los und haben Sie Spaß damit. Ich hoffe, Sie werden diese Prototyping-Fähigkeiten in all Ihren Projekten einsetzen diese Prototyping-Fähigkeiten in all , damit Sie Ihre Prototypen verbessern und mehr Arbeit bekommen können Ihre Prototypen verbessern und mehr Arbeit bekommen Denken Sie daran, Sie müssen Spaß damit haben. Wenn du bei irgendwas Hilfe brauchst, frag einfach. Ich bin hier um zu helfen. Ich bin Chris Barron, der sich vorerst abmeldet. Genieß es