UX-Prototyping-Meisterschaft: Vom Konzept zum interaktiven Design | Manthan Patel | Skillshare
Suchen

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

UX-Prototyping-Meisterschaft: Vom Konzept zum interaktiven Design

teacher avatar Manthan Patel, AI Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      0:56

    • 2.

      Die Grundlagen des Prototyping im UX-Design

      3:12

    • 3.

      Die Bedeutung von Prototyping im UX-Design

      2:27

    • 4.

      Risiken durch Prototyping minimieren

      2:53

    • 5.

      Prototyping und Design: Wichtige Designprozessmodelle

      2:57

    • 6.

      Die drei Ebenen der Prototyp-Treue im UX-Design

      3:51

    • 7.

      Low Fidelity-Prototypen im UX-Design verstehen

      4:10

    • 8.

      Verstehen von Prototypen für mittlere und hohe Wiedergabetreue

      4:08

    • 9.

      Optimierung des Nutzerfeedbacks: Prototyping-Techniken

      3:10

    • 10.

      Papier-Prototyping

      3:01

    • 11.

      Prototyping-Grundlagen in Figma

      4:28

    • 12.

      Interaktive Prototypen in Figma meistern

      4:41

    • 13.

      Fortgeschrittenes Prototyping in Figma

      3:31

    • 14.

      Kursprojekt

      1:19

    • 15.

      Du hast es geschafft! Letzter Moment

      0:35

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

16

Teilnehmer:innen

1

Projekte

Über diesen Kurs

Entfessle die Macht des UX-Prototyping und verwandle deinen Designprozess vom Konzept zum interaktiven Meisterwerk.

In diesem praktischen, umfassenden Kurs beherrschst du die Kunst und Wissenschaft des UX-Prototypings. Lerne, wie du effektive Prototypen auf verschiedenen Genauigkeitsstufen erstellen kannst, von schnellen Papierskizzen bis hin zu vollständig interaktiven Figma-Designs. Entdecke wie du Ideen validieren, sinnvolles Nutzer-Feedback sammeln und deine Designs für maximale Wirkung iterieren kannst.

Was du lernen wirst:

  • Wie du Prototyping nutzt, um Risiken zu minimieren und Designkonzepte früh im Prozess zu validieren
  • Techniken, um das richtige Maß an Wiedergabetreue für die verschiedenen Phasen deiner Designreise zu wählen
  • Strategien zur Durchführung wirksamer Benutzertests und zum Sammeln von umsetzbarem Feedback
  • Methoden zur Erstellung von ansprechenden Papierprototypen für schnelle Ideenfindung und Konzepterkundung
  • Fortgeschrittene Figma-Techniken zum Erstellen interaktiver Prototypen mit hoher Wiedergabetreue

Du lernst diese Schlüsselfähigkeiten:

  • Strategische Prototypenplanung und -umsetzung
  • Nutzerzentriertes Design Thinking und Iteration
  • Effektive Nutzertests und Feedback-Sammlung
  • Papierprototyping für schnelle Konzeptvalidierung
  • Digitales Prototyping mit Figma, einschließlich interaktiver Komponenten

Für wen ist dieser Kurs geeignet? Ideal für aufstrebende UX-Designer, Grafikdesigner, die zu UI/UX wechseln, figma-Lernende und alle, die ihre Prototyping-Fähigkeiten verbessern und nutzerzentrierte Designs erstellen möchten.

Zur Verfügung gestellte Ressourcen:

  • Umfassender Leitfaden für Prototyping-Techniken und Best Practices
  • Figma-Vorlagendateien für digitale Prototyping-Übungen
  • Kuratierte Liste empfohlener Prototyping-Tools und Ressourcen

Jetzt beitreten und die Macht nutzen, um deine Designideen zum Leben zu erwecken, Konzepte schnell zu validieren und Nutzererlebnisse zu schaffen, die wirklich Anklang finden. Meistere die Kunst des UX-Prototyping mit der fachkundigen Anleitung von Manthan Patel und hebe deine Designkarriere in Figma auf neue Höhen

Entwirf nicht nur – Prototyp, teste und perfekt.

Triff deine:n Kursleiter:in

Teacher Profile Image

Manthan Patel

AI Instructor

Kursleiter:in

Hi there, I'm Manthan, a seasoned graphic designer and marketer with over 5 years of experience in the field. I'm deeply passionate about design and have a strong commitment to delivering creative solutions that captivate and inspire.

My Journey:

I embarked on my design journey 5 years ago, driven by a desire to turn my creativity into a profession. Since then, I've had the privilege of working with a diverse range of clients, from startups to established brands, helping them communicate their unique message through design.

My Skills:

I specialize in a wide range of design areas, including:

Logo Design: Crafting compelling brand identities that capture the essence of a business. Print Design: Creating eye-catching posters, brochures, and other... Vollständiges Profil ansehen

Level: Beginner

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Willkommen zu den Grundlagen des Ux-Prototypings. Hallo, ich bin Manon Battel Grafik- und Benutzererlebnisdesignerin In diesem Kurs werden wir uns mit Prototyping als Teil Ihres Designprozesses befassen und darüber, wie Prototyping zu einer besseren Benutzererfahrung führen kann Wir werden uns auch mit verschiedenen Einzelheiten der Prototypenentwicklung befassen und diesen Kurs mit der Erstellung eines interaktiven Prototyps mit Figma abschließen Erstellung eines interaktiven Der Kurs gibt einen Überblick über das Prototyping und wir werden einige der grundlegenden Tools kennenlernen, die Sie bei diesem Prototyping-Prozess unterstützen können Wenn Sie also bereit sind, lassen Sie uns tief in die Grundlagen des UX-Prototypings eintauchen Grundlagen des UX-Prototypings eintauchen Dieser Kurs richtet sich an alle User Experience-Designer, Grafikdesigner, UI-Designer und sogar an alle, die mehr über Prototyping und Figma erfahren möchten über Prototyping Highlight, wir sehen uns in der ersten Vorlesung. 2. Die Grundlagen des Prototyping im UX-Design: Ein Prototyp hat mehrere Bedeutungen und mehrere Definitionen. Deshalb möchte ich den Begriff Prototyp für den Umfang des Kurses definieren , bevor wir beginnen. Ein Prototyp ist ein früh funktionierendes Modell eines Entwurfs, das verwendet wird , um Feedback zu erhalten, um schnell mit neuen Ideen zu experimentieren Verschiedene Faktoren beeinflussen, welche Art von Prototyp Sie erstellen werden, Zeitplan das Projekt hat, wo Sie sich in Ihrem Designprozess befinden und wie robust der Prototyp sein muss Ein Prototyp kann mit Skizzen, Drahtgittern oder Modellen erstellt werden Drahtgittern oder Modellen Eine Skizze ist eine Zeichnung der Benutzeroberfläche, in der das Design Gestalt annimmt Dann sind Wireframes eine Darstellung von Layouts und Inhalten, bei denen sich alles auf der Benutzeroberfläche befindet Wireframes können Graustufen oder Schwarzweiß sein. Ein Mockup ist normalerweise eine vollständig gerenderte Benutzeroberfläche, in der Farbdetails, Typografie Ein Mockup sieht aus wie ein Endprodukt oder ein fertiges Design. Lassen Sie mich Ihnen einen kurzen Hinweis zu Wireframes und Mockups geben. Manchmal werden die Begriffe Wireframes und Mockups synonym verwendet , weil die Leute ihre Designarbeiten als Wireframes bezeichnen , auch wenn sie nicht gris care sind. Wenn Sie mit einem Roboter-Designsystem arbeiten, ist es manchmal einfacher, Komponenten so zu entwerfen , dass Ihre Wireframes vollständig gerendert erscheinen, auch wenn Ihre Arbeit noch nicht abgeschlossen ist. Skizzen, Wireframes und Mockups sind und Mockups jedoch nicht die von ihnen selbst entworfene Interaktion dar Sie stellen jedoch nicht die von ihnen selbst entworfene Interaktion dar . Sie müssen diesen statischen Bildschirmen Interaktivität oder eine Notation hinzufügen diesen statischen Bildschirmen Interaktivität oder eine Notation um zu verstehen, wie das Design interagiert, wenn jemand eine Aktion auf Ihrer Benutzeroberfläche ausführt Ich definiere Interaktivität als jedes Verhalten, das den Status des Designs oder den Ablauf auf der Grundlage der Benutzerinteraktion verändert oder den Ablauf auf der Grundlage der Benutzerinteraktion Einfache Beispiele für Interaktivität wie ein Symbol, das die Ansicht der Seite ändern könnte, oder wenn Sie darauf klicken, öffnet das Symbol ein Kontextmenü Wie der Benutzer mit Ihrer Oberfläche interagiert , ist der Hauptaspekt Ihres Gesamtdesigns Prototyping ermöglicht es uns also, unsere verschiedenen Abläufe zu testen, Designkonzepte zu validieren, verschiedene Ideen zu wiederholen und ein einheitliches Erlebnis zu bieten Eines der wichtigsten Konzepte beim Prototyping besteht darin, Ihre Designs frühzeitig und sogar häufig und ohne großen Aufwand zu validieren frühzeitig und sogar häufig und ohne Es gibt viele verschiedene Möglichkeiten , ein Designproblem anzugehen Prototyping von Ideen und Konzepten hilft Ihnen dabei Das Prototyping von Ideen und Konzepten hilft Ihnen dabei, schlechte Ideen schnell zu überwinden und neue Ideen voll zur Geltung zu bringen. Ihr Prototyp muss kein Code sein. Sie können mit allem, von Skizzen bis hin zu vollständig gerenderten Modellen, Prototypen erstellen Skizzen bis hin zu vollständig gerenderten Modellen Und genau das werden wir in diesem Kurs tun, und er wird Ihr Fachwissen im Bereich Benutzererfahrung auf eine ganz andere Ebene heben In Ordnung, wir sehen uns in der nächsten Vorlesung. 3. Die Bedeutung von Prototyping im UX-Design: Eines der wichtigsten Dinge, an die Sie sich beim Prototyping erinnern sollten, ist, dass es nicht um Ihre Tools geht Es geht um Ihr Design. Ja, die Tools unterstützen und helfen Ihnen bei Ihrem Design, aber Ihr Hauptaugenmerk liegt auf Ihrem Design. originalgetreues Prototyping können wir das Risiko vermeiden, in ein Produkt zu investieren , das beim Benutzer nicht ankommt, nicht einfach zu bedienen oder nicht die richtigen Geschäftsprobleme löst Lassen Sie mich Ihnen weitere Beispiele dafür geben warum wir Prototypen erstellen Die erste besteht darin, eine neue Produktidee zu validieren. Zum Beispiel möchte das Unternehmen eine neue Idee oder ein neues Produkt auf den Markt bringen. Indem wir also einen frühen Prototyp erstellen und die Idee auf kostengünstige Weise testen, geben wir genügend Hinweise, um festzustellen, ob es sich um ein Produkt oder eine Zukunft handelt, in die es sich lohnt, in sie zu investieren, anstatt vorab zu viele Ressourcen auszugeben. Die zweite besteht darin, die Entwurfskonzepte oder -abläufe zu validieren. Es gibt mehrere Möglichkeiten, ein Entwurfsproblem zu lösen. Und im Rahmen Ihres Designprozesses können oft mehrere Ideen und mehrere Layouts als Prototypen dienen, können oft mehrere Ideen und mehrere Layouts um zu bestimmen , welche Designrichtung für das Unternehmen und die Benutzer am besten geeignet ist Drittens müssen Sie feststellen, ob das Produkterlebnis nutzbar ist oder Prototypen aus Usability-Tests sind in der Regel detaillierter und originalgetreuer. Denn zu diesem Zeitpunkt wurde die Richtung des Designs bereits festgelegt, und das Feedback konzentriert sich nun stärker darauf, ob das Produkt brauchbar ist oder nicht. In dieser Phase sollte das Feedback, nach dem Sie vielleicht suchen, auch Feedback dazu beinhalten, ob die Schaltflächenbeschriftungen klar sind und ob die Interaktionen vom Benutzer verstanden werden oder nicht. Designelemente, einschließlich der Inhalte, sind bei diesem High-Fidelity-Prototyp kein Problem für Feedback . Die vierte ist die Vermittlung einer Idee oder Vision. Prototypen eignen sich hervorragend , um anderen mitzuteilen, wie Ihr Design funktionieren wird. Wenn Sie Ihre Arbeit regelmäßig anderen präsentieren, ist es eine gute Angewohnheit, einen Prototyp griffbereit zu haben , nur um die Frage zu beantworten, wie er funktionieren wird. Dies sind einige der wenigen Beispiele, warum wir einen Prototyp benötigen. Wenn Sie also das nächste Mal Ihren eigenen Prototyp erstellen, sollten Sie diese Gründe im Hinterkopf behalten. In Ordnung, wir sehen uns in der nächsten Vorlesung. 4. Risiken durch Prototyping minimieren: Es ist sehr riskant, Produkte zu entwickeln, ohne zuvor Feedback von Ihrem Zielmarkt einzuholen Es ist teuer, ein Produkt zu entwickeln, ohne vorher festzustellen, ob Ihr Markt an Ihre Idee oder Ihr Produkt anpassbar ist an Ihre Idee oder Ihr Produkt anpassbar Ein falsches Produkterlebnis zu entwickeln, kostet Entwicklungszeit. Wenn Sie eine Produktidee haben und ein voll funktionsfähiges Erlebnis schaffen, stellen Sie möglicherweise fest, dass das Produkt nicht den Wünschen des Benutzers entspricht. Hier kann Ihnen Prototyping sehr helfen. Sie werden im Rahmen des Prototyping-Prozesses herausfinden wo Ihre Designideen scheitern oder wo sie glänzen Prototypen sind für jede Phase Ihres Designprozesses nützlich jede Phase Ihres Designprozesses Sie können Prototypen erstellen , nur um herauszufinden, wie Ihre Erfahrung in einer Entdeckungsphase funktionieren sollte. In den späteren Phasen können Sie robustere Prototypen mit dem Ziel erstellen , Benutzerfeedback zu sammeln. Wenn Sie Prototypen anhand von Feedback erstellen, legen Sie fest, nach welcher Art von Feedback Sie suchen , da dies die Art von Prototyp beeinflussen kann , die Sie später erstellen werden Wenn Sie beispielsweise detaillierteres Feedback zurückgreifen möchten, benötigen Sie einen originalgetreueren Prototyp , mit dem der Benutzer interagieren kann Mit Hilfe eines guten Moderators können Sie bei Prototypen mit niedriger Genauigkeit eine Menge Feedback zum Design einholen Wenn es sich um eine Moderatorsitzung handelt, ist es flexibler keinen voll funktionsfähigen Prototyp zu haben, da der Moderator den Benutzer durch die Bereiche des Prototyps führen kann, die nicht funktionieren Bereiche des Prototyps führen kann, die nicht funktionieren Nicht moderierte Sitzungen werden ist es flexibler, keinen voll funktionsfähigen Prototyp zu haben, da der Moderator den Benutzer durch die Bereiche des Prototyps führen kann, die nicht funktionieren. Nicht moderierte Sitzungen werden über eine Testplattform selbst geprüft. Sie möchten also sicherstellen, dass Ihr Prototyp der Aufgabe und den Klicks, denen er in einer unmoderierten Umgebung begegnen wird , gewachsen Aufgabe und den Klicks, denen er in einer unmoderierten Umgebung begegnen wird , Die meisten Prototyping-Tools decken sowohl Low-Fidelity als auch High-Fidelity ab Für realistischere Interaktionen benötigen Sie jedoch möglicherweise komplexere Logik und Bedingungen Wenn Sie beispielsweise Benutzerdaten speichern müssen oder wenn Sie einen systemeigenen Videoplayer benötigen auf dem Gerät Ihres Benutzers geöffnet werden kann, handelt es sich dabei um fortgeschrittene Prototyping-Anforderungen, und Sie sollten sicherstellen dass Sie das richtige Tool für die Aufgabe haben Aber bevor Sie das tun, sollten Sie sich diese Fragen stellen Muss der Prototyp so weit fortgeschritten sein? Weil wir manchmal die Dinge realistisch und so einfach wie möglich halten wollen . nächste Frage, die Sie sich stellen können, lautet Ist es wichtig, das Feedback zu erhalten, das Sie benötigen? Und zu guter Letzt: Reicht die Simulation des Erlebnisses aus, um ein Signal dafür zu erhalten , wohin das Design gehen soll? Wenn Sie entscheiden, welche Art von Feedback Sie benötigen können Sie leichter entscheiden, wie Sie an Ihren Prototyp herangehen In Ordnung, wir sehen uns in der nächsten Vorlesung. 5. Prototyping und Design: Wichtige Designprozessmodelle: Sie fragen sich vielleicht, wie Sie Ihr Designdenken auf Ihre Produkte, Designs oder wirklich alles anwenden Ihr Designdenken auf Ihre Produkte, Designs oder wirklich alles Nun, um das zu beantworten, gibt es im Designprozess einige unterschiedliche Modelle. Im Grunde ist der Designprozess eine Methode zur Problemlösung. Und obwohl es einige unterschiedliche Modelle des Designprozesses gibt , ist die Schlüsselidee oder das Schlüsselkonzept weitgehend identisch. Al, das ist trächtig. Prototypenentwicklung ist eine wichtige Phase im Designprozess, und wenn das Produkt immer definierter wird, können sich auch die Prototyping-Techniken entsprechend ändern von einer geringeren Genauigkeit zu einer höheren Genauigkeit übergehen Bevor wir uns der Originaltreue zuwenden, werfen wir einen Blick auf den Designprozess Das erste Modell ist der Doppeldiamant eines Designrates. Der Doppeldiamant konzentriert sich auf die wichtigsten Phasen des Designprozesses. Entdecken, definieren, entwickeln und liefern. Das nächste Modell ist der Standardansatz von D-Schools mit den wichtigsten Phasen Betonung, Definition, Ideenfindung, Prototyp und Test Diese Modelle weisen jetzt Unterschiede auf, aber alle Modelle des Entwurfsprozesses befassen sich mit denselben Schlüsselattributen Sie sind nutzerzentriert, wobei der Schwerpunkt darauf liegt, sich in den Benutzer hineinzuversetzen , um seine Herausforderungen zu verstehen gleichzeitig Chancen und Erkenntnisse zu entdecken Auf der Grundlage dieser Erkenntnisse definieren wir den Problembereich und entwickeln Ideen anhand verschiedener Designkonzepte und Ideen Wir entwickeln mögliche Lösungen, entwickeln Prototypen und wiederholen diese Designideen und Konzepte und dann endgültig um. Der Entwurfsprozess des Benutzercenters ist chaotisch und iterativ und nicht so linear, wie er erscheinen mag Der Prozess soll ein Framework sein, in dem Sie Designlösungen erstellen können Idealerweise sollten Sie diese wichtigen Schritte in Ihrem Design berücksichtigen, um sicherzustellen , dass Sie sich darauf konzentrieren, die richtigen Dinge zu entwerfen und das richtige Produkt zu liefern. Möglicherweise testen Sie erneut verschiedene Ideen und Konzepte Sie könnten also mit der Prototypenentwicklung auf Papier beginnen. Und wenn Ihr Projekt in die Endauslieferung übergeht, benötigen Sie vielleicht einen robusteren Funktionsprototyp, um Feedback zur Benutzerfreundlichkeit zu erhalten und Team mit Ihrem Design zu kommunizieren Sie können in jeder Phase Ihres Designprozesses Prototypen erstellen. Und wenn die Genauigkeit des Designs zunimmt, nimmt auch die Genauigkeit des Prototyps zu. Mit anderen Worten, hohe Genauigkeit. Wir haben über verschiedene Designprozessmodelle und Prototypen gesprochen . In der nächsten Vorlesung werden wir uns der Prototypentauglichkeit befassen. Oder Licht, ich werde dich dort sehen. 6. Die drei Ebenen der Prototyp-Treue im UX-Design: Nehmen wir uns einen Moment Zeit und sprechen wir über Treue. Treue bezieht sich auf die Vollständigkeit der Benutzeroberfläche, der Interaktion und des Ablaufs. Treue kann sich auch auf das visuelle Erscheinungsbild, aber auch auf die Funktionalität beziehen aber auch auf die Funktionalität beziehen Es gibt grundsätzlich drei Arten von Treue: niedrig, mittel und schließlich hoch Wir werden über jeden von ihnen ausführlich sprechen. Anwendung von Low-Fidelity ist eine gute Möglichkeit , sich darauf zu konzentrieren, die Interaktionen im Flow korrekt zu datieren , ohne sich zu viele Gedanken über die visuelle Oberfläche Ein Beispiel dafür, wann Sie den Low-Fidelity-Ansatz verwenden möchten ist, wenn Sie sich in der Anfangsphase der Befragung Ihrer Benutzer befinden und bereits einige Ideen für die Probleme haben, und bereits einige Ideen für die Probleme haben die Sie lösen möchten Sie möchten jedoch Feedback einholen, bevor Sie sich zu sehr mit dieser Idee befassen In diesem Fall ist es eine hervorragende Möglichkeit, Feedback zu erhalten und ihre Reaktionen zu verfolgen, wenn Sie einige wichtige Ideen skizzieren und sie Ihrem Benutzer und Skizzen können neue Ideen einführen, über die der Benutzer möglicherweise erst nachgedacht hat, ohne Ihre Skizze gesehen zu haben erst nachgedacht hat, ohne Ihre Skizze gesehen zu Sie können viele großartige Erkenntnisse gewinnen und viele neue Gespräche beginnen Einer der Vorteile des Skizzierens besteht darin , dass Sie Konzepte schnell wiederholen oder wiederholen und sie sehr schnell Konzepte schnell wiederholen oder wiederholen und in das Benutzerfeedback integrieren Prototypen mit geringer Genauigkeit lassen sich nicht nur auf Skizzen anwenden. Denken Sie daran, dass Sie einen Prototyp mit geringer Genauigkeit haben können einen Prototyp mit geringer Genauigkeit , dessen Oberfläche sehr unpoliert ist, wie z. B. ein graustufiges Drahtgestell Manche Prototyping-Tools sind auch darauf ausgelegt, eine skizzenhafte Oberfläche zu erzeugen, indem sie einfache Formen verwenden , um diese geringe Detailtreue zu vermitteln Prototypen mit mittlerer Genauigkeit können eine Mischung aus grundlegenden Funktionen haben und einige definieren Oberflächenelemente Einige Abläufe sind darin jedoch möglicherweise nicht vollständig. Weil Sie sich mehr Anregungen und mehr Feedback vom Benutzer als Leitfaden für Ihr Design wünschen. In einem Projekt, an dem ich gerade arbeite, stelle ich meinen Benutzern zum Beispiel einen mittelgenauen Prototyp vor. Nur ein paar Links funktionieren, weil ich Feedback zu den Links haben wollte, die nicht funktioniert haben, und ich wollte, dass der Benutzer mir sagt , wohin er gehen sollte und warum. In diesem Beispiel war das Design teilweise definiert, aber ich brauchte mehr Verständnis vom Benutzer, um den Rest meines Designs zu definieren. In der Regel werden Prototypen mit mittlerer Genauigkeit verwendet, wenn Sie ein Design erstellen, bei dem Sie zwar einige Schlüsselelemente haben, aber noch einige Konzepte validieren müssen, um die Bedürfnisse Ihres Benutzers besser zu verstehen. High-Fidelity-Prototypen eignen sich am besten für Szenarien, in denen Sie eine solide Vorstellung davon haben, wie die Designoberfläche aussehen und funktionieren sollte, und Sie genaueres Feedback von ihr wünschen. Hinweis: Hochdefinierte visuelle Benutzeroberflächen erwecken den Eindruck, dass das Produkt fertig und fertig ist. Feedback könnte auf der Ebene der Benutzeroberfläche erfolgen, wobei der Schwerpunkt eher auf Farben, Fonds und Steuerbezeichnungen liegt. Wenn Sie sich diese Art von Feedback jedoch nicht ansehen , können Sie bei einer geringeren Genauigkeit bleiben, um sich mehr auf die Grundlagen von Interaktionen und Abläufen zu konzentrieren. High-Fidelity-Designs sind auch für die endgültige Umsetzung nützlich , da sie es allen Mitgliedern des Entwicklungsteams ermöglichen , sich mit dem Design auseinanderzusetzen und zu sehen, wie es funktioniert. Prototyping ist in jedem Teil Ihres Designprozesses nützlich, und Fidelity zeigt Ihnen, welche Art von Feedback Sie wünschen und wo Sie sich in Ihrem Designprozess befinden In Ordnung, wir sehen uns in der nächsten Vorlesung. 7. Low Fidelity-Prototypen im UX-Design verstehen: Low-Fidelity-Prototypen sind eine grobe Darstellung Ihrer Idee oder Ihres Designs, und sie sind eigentlich nicht sehr definiert. Sie können leicht in Form von Skizzen auf Papier erstellt werden, aber es gibt einige digitale Tools, die das unfertige Erscheinungsbild verbessern können Und wir werden uns später in diesem Kurs damit befassen. Als geringe Genauigkeit wird manchmal nur eine Papierbasis definiert, wie bei einer Skizze auf Papier. Diese Debatte hat einige Kleinigkeiten, aber ich definiere Low-Fidelity so, aber ich definiere Low-Fidelity klickbare Wireframes einschließt, die in einer Prototyping-Software erstellt werden können, die eine dass sie klickbare Wireframes einschließt, die in einer Prototyping-Software erstellt werden können, die eine Low-Fidelity-Oberfläche nachahmt. Die Verwendung von Low-Fidelity-Prototypen bietet viele Vorteile und Vorteile , insbesondere zu Beginn Einige wichtige Vorteile bestehen darin, dass Benutzer größerer Wahrscheinlichkeit offen mit ihrem Feedback umgehen. geringe Fehlerhaftigkeit des Prototyps erweckt den Eindruck, dass es sich bei dem Entwurf eine frühere Konzeptphase handelt Und wenn Sie nach Feedback fragen, ist es wahrscheinlicher, dass die Benutzer ihre ehrliche Meinung äußern da sie immer noch wissen, dass das Design im Aufbau befindet Außerdem sind sie mit wenig Zeit und Mühe sehr einfach zu erstellen. Und wenn Sie Papier verwenden, können Sie schnell eine Idee skizzieren und einige wichtige Bildschirme verwenden, um das grundlegende Konzept zu vermitteln. Sie lassen sich leicht und schnell anhand des Feedbacks wiederholen. Und wenn das erste Low-Fidelity-Konzept wieder funktioniert, können Sie etwas Neues ausprobieren Mit Low-Fidelity-Prototypen können Sie ganz einfach eine neue Idee oder ein neues Konzept entwickeln , das auf dem Feedback des Benutzers oder anderen Dingen basiert das auf dem Feedback des Benutzers oder anderen Dingen , die nach dem ersten Prototyp nicht berücksichtigt wurden, und dieses Feedback sehr schnell iterieren und integrieren Bei der Erstellung von Designs mit geringer Genauigkeit liegt der Fokus mehr auf den Integrationen und Abläufen Abläufen Es gibt Ihnen die Möglichkeit , sich wirklich auf die Interaktion und den Ablauf zu konzentrieren , ohne sich zu viele Gedanken über die visuelle Manchmal reicht es aus, sich das grundlegende Design vor Augen zu führen. Nun, einige Nachteile von Low-Fidelity-Prototypen bestehen darin, dass ihr Fluss- und Interaktionsverhalten eingeschränkt ist. Das Design von Low-Fidelity-Prototypen schränkt die realistische Interaktion und das realistische Verhalten ein. Sie werden also kein umfassendes Feedback zur Funktionsweise des Benutzeroberflächenelements erhalten können . Sie werden von der Anlage gesteuert. Manchmal ist die Benutzeroberfläche von Prototypen mit geringer Genauigkeit nicht übersichtlich genug, um sich von der Masse abzuheben und für die Benutzer verständlich zu machen Daher ist ein Moderator erforderlich, der den Benutzer durch das Design führt, sodass er weiß, was er gerade sieht, und ihm helfen kann, sich im Ablauf und in der Interaktion zurechtzufinden Drittens ist die Benutzerfreundlichkeit unbestimmt. Ein weiterer wichtiger Punkt, den es zu beachten gilt, ist, dass sie sich hervorragend zur Aufdeckung von allgemeinen Usability-Problemen eignen, aber nicht auf detailliertem Feedback zur Benutzerfreundlichkeit zum Interaktionsverhalten beruhen Zu geringer Klangtreue kann zu viel Vorstellungskraft führen. Ja, es gibt so etwas, das man zu wenig Klangtreue nennt. Wenn Ihre Low-Fidelity-Version nur eine Box ist, um ein Layout zu stimulieren, und Sie den Benutzer bitten, dieses Feld auszufüllen. Manchmal haben Benutzer nicht die Vorstellungskraft oder das visuelle Vokabular, um die Ursachen in diesem Feld zu beschreiben Es muss immer noch eine Richtung im Low-Fidety-Design gefunden werden , die der Benutzer interpretieren Es ist jedoch immer noch von großem Wert, in der Anfangsphase Ihres Entwurfsprozesses eine niedrige Genauigkeit beizubehalten Prototypen mit geringer Genauigkeit sind nützlich und funktionieren fast bei jedem Projekt, aber sie sind in der Anfangsphase Ihres Designprozesses sehr nützlich . Wenn Sie also das nächste Mal ein schwieriges Projekt haben und Sie sich auf die Grundlagen und Grundlagen konzentrieren müssen, versuchen Sie es mit Low-Fidelity-Prototypen und Sie werden Ihnen sehr helfen. In Ordnung, wir sehen uns in der nächsten Vorlesung. 8. Verstehen von Prototypen für mittlere und hohe Wiedergabetreue: Prototypen mit mittlerer Genauigkeit können dieselben Eigenschaften aufweisen High-Fidelity-Prototypen wie Luke und Fel, verfügen aber möglicherweise nicht über alle Funktionen. Prototypen mit mittlerer Genauigkeit funktionieren gut, wenn Sie zwar Teil des Designs berücksichtigt haben, aber möglicherweise noch kein vollständiges Bild von Ihrem Design haben. Sie können aus einer Mischung von Elementen bestehen, die entworfen werden können , und Elemente, die nicht entworfen oder undefiniert Sie eignen sich am besten für Szenarien. Dann fühlen Sie sich bei einigen Elementen des Designs und der Interaktion ziemlich gut , haben aber immer noch einige offene Fragen und wissen nicht, in welche Richtung Sie gehen sollen. Sie können eine Mischung aus etablierten Elementen verwenden, aber Elemente als Platzhalter beibehalten Sie können ihnen weitere Fragen stellen, um zu klären, um welche Art von Inhalt es sich handelt und wo das Design verwendet werden soll Im Vergleich dazu sind High-Fidelty-Prototypen in der Regel dem endgültigen Design sehr ähnlich und wir haben alle Farben und das In der Regel sind Click-Through-Interaktionen auch bei High-Fidelity-Designs vorhanden Ein Vorteil von Prototypen mit mittlerer Genauigkeit besteht darin, dass sie flexibel sind Sie funktionieren wirklich gut und Sie haben einige Ideen, aber noch nicht alles herausgefunden Es gibt etwas mehr Flexibilität bei der Herangehensweise an das Design. Nun zu einigen Nachteilen. Sie benötigen einen Moderator, insbesondere wenn Sie nach neuen Ideen suchen Möglicherweise müssen Sie die Fantasie des Benutzers anregen, wenn Sie sich die Seite mit Inhalten vom Typ Place ser ansehen Darüber hinaus sind Prototypen mit mittlerer Genauigkeit nicht zuverlässig, um sind Prototypen mit mittlerer Genauigkeit nicht zuverlässig Probleme mit der Benutzerfreundlichkeit zu da es zu wahrscheinlich ist, dass sie auf hohem Niveau sind. High-Fidelity-Designs haben dagegen einzigartige Vorteile gegenüber Designs mit mittlerer Genauigkeit. Erstens sind sie repräsentativer für das Aussehen und die Haptik des Designs , da sich das Design realer und realistischer anfühlt und die Benutzer den Prototyp durchgehen, als ob sie normale Erfahrungen gemacht hätten. Zweitens benötigt das Design wahrscheinlich keinen Moderator. Wenn das Design fast fertig ist, ist im Allgemeinen kein Moderator erforderlich, kein Moderator erforderlich der den Benutzer durch das Möglicherweise verwenden Sie sogar ein Remote-Testprogramm , das der Benutzer selbst durchführen kann Der dritte Grund ist, dass Probleme mit der Benutzerfreundlichkeit wahrscheinlich behoben werden. Alle Probleme mit der Benutzerfreundlichkeit, die noch bestehen oder bei frühen Prototypen nicht erkannt wurden, werden wahrscheinlich bei originalgetreuen Designs auftreten. Hier sind einige Nachteile von Designs mit mittlerer bis hoher Genauigkeit aufgeführt. Erstens benötigen sie viel Zeit, um sie zu erstellen. H-iH-Feeder-Prototypen können sehr robust sein, und es wird mehr Zeit in Anspruch nehmen, einen voll funktionsfähigen polnischen Prototyp zu erstellen einen voll funktionsfähigen polnischen Prototyp Zweitens sind die Benutzer nicht mehr so bereit, Feedback zu geben wie in der früheren Phase des Prototyps Das endgültige Erscheinungsbild des Designs kann die Art von Feedback einschränken, das Benutzer zu geben bereit sind , da das Design so endgültig und fantastisch aussieht. Wenn der Ablauf beispielsweise verwirrend ist, verzichten sie möglicherweise darauf, dies zu sagen , weil sie vielleicht das Gefühl haben, dass das Design bereits fertig ist und sie es dann selbst hinzufügen könnten. Und drittens sind sie schwieriger zu bedienen. High-Fidelity-Prototypen kann zeitaufwändig Erstellung von High-Fidelity-Prototypen kann zeitaufwändig sein, wenn sie viele Interaktionen und Anwendungsfälle erfordern . Daher kann es schwierig sein, sie zu aktualisieren, insbesondere wenn es einige Probleme mit der Kernfunktionalität gibt , die bei diesen Tests hervorgehoben wurden. Die Prototypenentwicklung ist ein grundlegender Aspekt des US-Designprozesses. Und wenn Sie einige der Vor- und Nachteile kennen, können Sie wissen, welche Originaltreue von Ihnen richtig ist und wo Sie sich in Ihrem Designprozess befinden 9. Optimierung des Nutzerfeedbacks: Prototyping-Techniken: Bei der Erstellung Ihrer Designprototypen sollten Sie sich darüber im Klaren sein welchen Rückmeldungen Sie suchen Sie möchten sicherstellen, dass Sie die richtige Art von Feedback erhalten , das Sie in Ihre Designs integrieren können in Ihre Designs integrieren Wenn Sie Ihren Prototyp mit einem Moderator testen, benötigen Sie einen Nutzerforscher oder jemanden mit neutraler Einstellung, auch mit dem Prototyp und den Designzielen sehr vertraut ist Prototyp und den Designzielen Es ist wirklich wichtig, dass der Moderator neutral ist, da Sie nicht möchten jemand wichtige Fragen stellt oder den Benutzer in irgendeiner Weise beurteilt Wenn Sie Prototypen mit niedriger und mittlerer Genauigkeit testen, der Designer und der Moderator zusammen, um die Art von Fragen zu entwickeln, die Sie im Zusammenhang mit dem Design stellen werden Die Fragen zu Prototypen mit niedriger Genauigkeit werden offen beantwortet. Und bei Designs mit mittlerer Genauigkeit können die Fragen offen bis hin zu spezifischen Fragen reichen. Und schließlich wird die Frage bei High-Fidelity-Prototypen spezifischer sein. Sie müssen sich ein klares Ziel setzen , was Sie von Ihren Tests erwarten. Daher ist es wichtig, dass die Moderatoren in der Lage sind die richtigen Fragen ohne den Benutzer zur Antwort zu führen offene Recherche kann schwierig sein, da die Leute Fragen haben und ein guter Moderator in der Lage ist, den Chat fließen zu lassen, aber bei Bedarf wieder auf das Design zu konzentrieren Wenn ein Moderator den Benutzer entweder aus der Ferne oder persönlich interviewt, beobachten das Projektteam und der Designer die Sitzung in der Regel den Benutzer entweder aus der Ferne oder persönlich interviewt, beobachten das Projektteam und der Designer die Sitzung in das Projektteam und der Designer die Sitzung der Es ist wichtig, dass der Designer bei der Benutzerforschung anwesend ist, um das Feedback direkt vom Egal, für wie solide Sie Ihr Design halten, es ist immer bescheiden, von einem Benutzer zuzuhören Designer moderieren manchmal ihre eigenen Designsitzungen mit dem Benutzer, was kein Problem darstellt, wenn der Designer offen für jedes Feedback ist, während des Interviews eine neugierige Denkweise beibehält und Fragen stellen kann , ohne den Benutzer zu führen Manchmal, wenn Designer ihre eigene Arbeit testen, kann es zu Verzerrungen bei der Bestätigung kommen . Bestätigungsfehler treten auf , wenn Sie von Ihren Benutzern erwarten , dass sie das Design so erleben , wie Sie es sich wünschen Und wenn das Feedback entgegengesetzt ist oder um 180 Grad fällt, minimieren sie das Feedback oder ignorieren es. Das Ziel des Testens Ihres Prototyps besteht darin, herauszufinden , ob Ihr Design bei Ihrem Benutzer Anklang findet oder nicht Manchmal tut es das, manchmal nicht. Das sind alles nützliche Informationen für uns, da wir das Feedback und die Ideen in die nächste Iteration einfließen lassen können das Feedback und die Ideen in die nächste Iteration einfließen lassen Ideen in die nächste Iteration Nachdem wir nun verschiedene Arten von Treue gelernt und Prototypen getestet haben, wollen wir nun lernen, wie man Prototypen auf verschiedenen Ebenen der Treue erstellt In Ordnung, wir sehen uns in der nächsten Vorlesung . 10. Papier-Prototyping: Erstellung eines Papierprototyps ist ein sehr einfacher Prozess Schwerpunkt eher darauf liegt, grundlegende Eigenschaften Ihres Designs zu verstehen , wie Abläufe, Interaktionen und Layouts Papierdesign benötigt jemanden , der die Konversation erleichtert , da der Benutzer dafür ein wenig Fantasie braucht der Benutzer dafür ein wenig Fantasie Ein Moderator kann Kontexte anbieten, indem er Szenarien über die er nachdenken kann, und dem Benutzer helfen, falls er nicht weiterkommt , oder den Benutzer dazu bringen , mehr über seine Gedanken zum Design zu sprechen Das Prototyping auf Papier ist ziemlich einfach. Sie müssen sich keine Gedanken darüber machen, ob Sie zeichnen können oder nicht, und die Genauigkeit muss nur klar genug sein um Ihren Standpunkt über Quadrate, Rechtecke, Linien und Wörter hinweg Rechtecke, Linien und Alles, was Sie wirklich benötigen, ist ein schwarzer Stift, Papier und einige Haftnotizen Zum Testen mobiler Papierprototypen ist es praktisch, einen Ausschnitt aus einem mobilen Rahmen zu haben, um die eingeschränkte Ansicht der Objekte im Darstellungsfenster zu fördern Der Rest des Prototyps kann auf Papier gezeichnet werden. Wenn Sie denselben Prototyp für mehrere Personen verwenden. Manchmal wird das Papier zerrissen oder abgenutzt. Es wird daher dringend empfohlen, ein schwereres Papiergewicht zu verwenden , um dies zu verhindern. Nehmen wir an, wir wollten eine E-Commerce-to-Mobile-Anwendung erstellen . Wenn Sie sich einer Art von Prototyp nähern, sollten Sie zunächst Ihre Ideen für die Bildschirme und Layouts sowie die Abläufe für Ihr Design skizzieren Ihre Ideen für die Bildschirme und Layouts sowie die Abläufe für Ihr Design Ich habe zum Beispiel ein paar Iterationen, bei denen ich mir einfach einige andere Ansätze aus meinem Design ausgedacht Ansätze aus meinem Sagen wir die Homepage und die Art von Inhalten, die ich präsentieren möchte Ich habe auch eine Idee wie die Tapebar organisiert werden sollte. Sie können sehen, dass das ziemlich grob ist. Und bei meinen Skizzen geht es wirklich darum , mehrere Ideen zu Papier zu Du brauchst hier keine Perfektion. Als Nächstes habe ich aus dem Design heraus einen hohen Fluss von wichtigen Bildschirmen und Interaktionen geschaffen heraus einen hohen Fluss von . In meinem Beispiel habe ich hier die Homepage, einige Funktionen und die Möglichkeit , der Karte ein Objekt hinzuzufügen. Sie können das Scrollverhalten simulieren, indem Sie Streifen aus leichtem Zeichentrickmaterial verwenden und diese im Darstellungsfenster Ihrer Vorlage auf und ab oder von einer Seite zur anderen bewegen Darstellungsfenster Ihrer Vorlage auf und ab oder von einer , um das Scrollen von links nach rechts zu stimulieren Idealerweise können Sie Ihre Designs im Hochformat zeichnen , um das Scrollen nach oben und unten zu stimulieren, oder im Querformat, um eine horizontale Partiturinteraktion zu Das ist alles über das Prototyping auf Papier, und in der nächsten Vorlesung werden wir zu Figma übergehen In Ordnung, wir sehen uns dort. 11. Prototyping-Grundlagen in Figma: Hallo und willkommen zurück, alle zusammen. Ab dieser Vorlesung werden wir mit dem Prototyping in Figma beginnen Laden Sie also die Figma herunter und melden Sie sich an oder registrieren Sie sich für In Ordnung, ich werde dich auf dem Figma-Bildschirm sehen. Ich habe diese Bildschirme für ein fiktives E-Commerce-Hauptunternehmen mit diesen Elementen erstellt ein fiktives E-Commerce-Hauptunternehmen mit diesen All diese Dateien befinden sich im Ressourcenbereich, also schauen Sie sich das an, und all diese Ressourcen sind darin enthalten So kannst du mit mir in Figma mitmachen. Lassen Sie uns den Gesamtablauf und die Interaktionen durchgehen Gesamtablauf und die Interaktionen Dies ist ein fiktives Unternehmen, das Hüte verkauft, und Kunden können einen Hut personalisieren , wenn sie diese Option wählen Von der Startseite aus können Sie diesen speziellen Kopf mit Klebeband verbinden, und Sie gelangen auf die Produktdetailseite Sie können auf dieser Seite blättern und sich unterstützende Inhalte wie Details und Rezensionen ansehen. Wenn ich auf den Link klicke, um mir die ethischen Praktiken anzusehen, sehe ich unten ein Blatt mit weiteren Informationen. Ich kann das untere Blatt nach oben ziehen und scrollen, um weitere Bilder zu sehen. Fangen wir an, alle Bildschirme und Elemente zu organisieren und mit dem Prototyping zu beginnen, zu beginnen indem wir sie in Figma verbinden Ich werde die Rahmengröße des iPhone verwenden, die 390 mal 844 ist, was der Standardgröße des Wählen Sie F auf der Tastatur , um einen neuen Rahmen zu erstellen. Um die Größe und den Typ des Rahmens auszuwählen. Auf der rechten Seite wird es verschiedene Bildschirmtypen und -größen geben. Erstellen Sie zwei weitere, indem Sie sie kopieren und einfügen. Nennen wir den ersten Frame Home und den zweiten Frame „ Product Retails Und das letzte, unterste Blatt. Ich habe die Elemente, die wir verwenden werden, auf der linken Seite, und wir werden die Bildschirme mit diesen Elementen zusammenstellen. Hier habe ich drei Frames. Einer aus dem Homepage-Header, einer aus dem Inhalt und der letzte aus der Tab-Leiste. Ich wähle den Homepage-Header aus der Ebene aus und kopiere ihn und füge ihn in den Frame ein. Ich nenne Home, indem ich Befehl plus C auf MC oder Control Plus auf Windows verwende, um es zu kopieren. Ich wähle den Home-Frame und füge ihn in den Frame ein. Ich werde das Gleiche vom Home-Inhalt aus tun. Ich werde es kopieren, in den Rahmen einfügen und neu positionieren Und zuletzt werde ich das Tab-Leistenelement kopieren und in den Rahmen einfügen und es neu positionieren Für die Produktdetailseite verwenden wir dasselbe Verfahren Kopieren und probieren Sie alle Elemente genauso aus, wie wir es auf der ersten Seite getan haben. Das werde ich jetzt machen. Die Schaltfläche „Zwei Autos hinzufügen“ erscheint am unteren Bildschirmrand. Also werde ich es neu positionieren , sodass es unten sitzt Für den letzten Bildschirm nehmen wir die beiden Elemente aus der Ebene von den unteren Blattelementen und kopieren sie und fügen sie vom unteren Blatt in den Rahmen Für den unteren Blattbildschirm ändere ich den Radius oben links und rechts auf zehn , damit den abgerundeten Ecken des unteren Blattstils für die Kopfzeile entspricht . Sobald wir diese Elemente neu positioniert haben, lassen Sie uns als Nächstes das untere Blatt kopieren und einfügen , um ein zweites unteres Blatt zu erstellen Jetzt ändern wir die Höhe des zweiten unteren Blattes auf 268 und nennen es als unteres Blatt zwei Dies sind die beiden Höhen der unteren Blätter. Wenn wir den Prototyp erstellen, der das verbindet, wollen wir die Wechselwirkung der Zugkräfte simulieren. Wir benötigen also zwei verschiedene Höhen, die Mindesthöhe und die Maximalhöhe. Wir haben unsere Bildschirme angelegt, um uns auf den Prototyp vorzubereiten. In der nächsten Vorlesung werden wir unseren Prototyp verbinden und ihn zum Laufen bringen. Alle, geht nirgendwohin, und wir sehen uns im nächsten. 12. Interaktive Prototypen in Figma meistern: Im vorherigen Video haben wir unsere Bildschirme so eingerichtet, dass sie eine Verbindung zu unserem Prototyp herstellen und unsere Vision in Ideen umsetzen können Bei diesem Prototyp beginnt der Ablauf mit dem Hutbild auf der Startseite. Lassen Sie uns zunächst den Home-Frame erweitern , sodass das Bild innerhalb des Frames angezeigt wird. Unser Inhalt ist außerhalb des Frames nicht sichtbar, aber wir wollen das, weil dadurch der Bereich innerhalb dieses Viewports als Scroll-Label gekennzeichnet werden kann innerhalb dieses Viewports als Scroll-Label gekennzeichnet , wenn wir dieses auf Scrollen einstellen Dieser Hut mit dem blauen Band mit der Aufschrift Landschaft ist das Objekt, das ich mit unserem nächsten Bildschirm verbinden möchte der rechten Seite befindet sich Prototyp eines Tab-Labels. Wenn der Startbildschirm ausgewählt ist, tippen wir auf Prototyp. Wenn Sie im Prototyping-Modus auf die Rahmenelemente tippen Sie werden Konturen mit Kreisen sehen, und wenn Sie mit der Maus über sie fahren, werden sie zu Pluszeichen Dies sind die Verbindungspunkte, an denen Sie Pfeile auf die anderen Bildschirme ziehen können , um Interaktionen zu erzeugen Fügen wir diese Verbindung vom Kopf auf der Startseite zu unserer Produktdetailseite hinzu. Wenn Sie diese Verbindung herstellen, wird dieses Kontextfenster angezeigt , in dem Sie den Triggertyp auswählen können, über den er navigiert und welche Art von Interaktion Sie wünschen Wenn Sie auf diesen Interaktionsbereich tippen, erhalten wir verschiedene Optionen Die Aktion, nach der ich suche, ist Push. Wenn Push ausgewählt ist, vier verschiedene Pfeile die Richtung des Pushs an. Ich wähle den ersten Pfeil aus. Auf der Produktdetailseite mit dem Zurück-Pfeil fügen wir diese Push-Integration oder Push-Interaktion hinzu, die eine Verbindung zu unserer Startseite herstellt. Wir wählen den zweiten Pfeil , um uns das entgegengesetzte Push-Verhalten zu geben Lass uns für mich fantastisch und perfekt aussehen. Als Nächstes aktualisiere ich den Home-Frame, sodass er wieder Höhe von 844 erreicht, indem ich die Höhe im Designbereich auf der rechten Seite Fügen wir nun den scrollbaren Bereich hinzu. Wählen Sie den Home-Frame und Band auf dem Prototyp auf der rechten Seite aus. Scrollverhalten wählen wir das vertikale Scrollen Bereich Scrollverhalten wählen wir das vertikale Scrollen aus Dadurch wird der Frame so eingestellt, dass er scrollbar ist. Wir möchten, dass der Header und die Bandleiste an Ort und Stelle bleiben. Also wählen wir den Header aus, gehen erneut zum Prototyping-Bereich und wählen im Bereich für das Scrollverhalten die Option Position fixieren aus Als Nächstes wählen wir die Bandleiste aus und wählen im Prototyping-Bereich im Bereich Scrollverhalten die Option Fix aus Stellen wir den Flow auf „Kein Scrollen“ ein. Bei der Produktdetailseite möchten wir außerdem sicherstellen, dass der Inhalt ist, indem wir den Rahmen vertikal einstellen Die Kopfzeile auf dieser Seite sollte ebenfalls korrigiert werden , ebenso wie die Schaltfläche „Zur Karte hinzufügen“. Wir werden das Gleiche tun wie auf dem Startbildschirm, indem wir den Header auswählen und die Einstellung im Prototyping-Bereich so ändern, dass die Position mit dem Überlauf auf „ Kein Scrollen“ festgelegt Das machen wir sowohl über die Kopfzeile als auch über die Schaltfläche Zwei Karten hinzufügen Es ist an der Zeit, eine Vorschau unseres Designs und sehen wir uns an, wie es funktioniert. Es sollte perfekt scrollt werden können. Und wenn Sie den Kopf aufkleben, sollten Sie sehen, wie das Produkt auf die Seite gedrückt Ihr Design scrollt nicht, überprüfen Sie Ihre Ebenen. Sie sollten einen Bereich mit der Aufschrift Scrolls sehen, und Sie sollten sicherstellen, dass sich die richtigen Ebenen unter diesem Scrollbereich befinden Wenn Sie die Option „Korrigieren“ in der rechten Seitenleiste nicht sehen können , versuchen Sie, das Element in den Bereich unter „Korrigieren“ im Ebenenbedienfeld auf der linken Seite zu ziehen unter „Korrigieren“ im Ebenenbedienfeld auf der linken Im nächsten Video werden wir unsere Interaktion mit dem unteren Blatt mithilfe von Überlagerungen und der Interaktion mit dem Lappen einrichten unsere Interaktion mit dem unteren Blatt mithilfe von Überlagerungen und der Interaktion mit dem Lappen 13. Fortgeschrittenes Prototyping in Figma: Im vorherigen Video haben wir für unsere Produktdetailseite eine scrollbare Startseite und eine Eingabe- oder Textinteraktion eingerichtet eine Eingabe- oder Textinteraktion haben wir für unsere Produktdetailseite eine scrollbare Startseite und eine Eingabe- oder Textinteraktion eingerichtet. Kommen wir nun zu den Überlagerungen im unteren Blatt und Wir haben bereits alle Elemente auf dem unteren Blatt platziert , also werden wir sie jetzt verbinden. Von diesem Link im Produkteinzelhandel möchte ich ihn mit Klebeband aufkleben, um das untere Blatt zu zeigen. Dieses untere Blatt enthält zusätzliche Informationen darüber, wie die Materialien hergestellt und bezogen werden Ich habe es als unteres Blatt entworfen , weil jemand es nur aufkleben kann , wenn er daran interessiert ist, mehr zu erfahren Das untere Blatt hat sowohl horizontale als auch vertikale Ritzen , um mehr Informationen auf kleinstem Raum anzuzeigen. Fangen wir an, diesen Prototyp anzuschließen. Ich füge ein Rechteck über dem Plutex hinzu, indem ich den Buchstaben R auf der Tastatur eintippe Als Nächstes entfernen wir die Füllung, indem wir die Form des Rechtecks auswählen und dann in der rechten Seitenleiste die Füllung auf Null drehen oder sie mit der Minusgröße entfernen Wenn das Rechteck ausgewählt ist, gehen Sie zum Prototypstift und verbinden Sie das Rechteck mit dem der kleinen unteren Folie Im Kontextmenü möchten wir die Eigenschaft auswählen und dann „Einziehen“ auswählen Wählen Sie das letzte Symbol des nach oben zeigenden Pfeils aus. im Bereich für die Overlay-Einstellungen Wählen Sie im Bereich für die Overlay-Einstellungen die Option in der unteren Mitte aus, die auch dem letzten Symbol entspricht Sie sollten die beiden Optionen für „ Schließen“ auswählen , wenn Sie auf die Seite klicken und einen Hintergrund hinzufügen Diese Einstellung zeigt Ihnen, wo das untere Blatt angezeigt wird und wie es sich verhält, wenn das untere Blatt gelöscht wird, wenn der Benutzer außerhalb des Blattes aufnimmt. Der Hintergrund bezieht sich auf den erniedrigenden Effekt, der sich dem Bildschirm bemerkbar macht, wenn das Button-Sheet ausgelöst wird Mal sehen, wie es aussieht. Sie können sehen, dass es von unten nach oben kommt. Und wenn ich in den Hintergrund klebe, geht das untere Blatt wieder nach unten, und das ist genau das, was wir wollten. Lassen Sie uns als Nächstes die ersten Bilder im unteren Blatt horizontal scrollen lassen. In der letzten Vorlesung haben wir vertikal gescrollt, daher sind wir mit diesem Konzept vertraut Aber jetzt können wir die Bildergruppe mit der Bezeichnung Scrollen auf horizontales Scrollen einstellen , indem wir die Bildgruppe auswählen und den Überlauf auf horizontal setzen Lassen Sie uns den gleichen horizontalen Effekt auch auf das andere untere Blatt anwenden auch auf das andere untere Blatt Lassen Sie uns damit vorbereiten, und es sieht so aus, als ob es wie erwartet funktioniert. Als Nächstes fügen wir diese Ziehinteraktion vom oberen Griff des unteren Blatts hinzu. Wählt den oberen Griff aus und verbindet im Prototyp-Bereich den oberen Griff mit dem höheren unteren Blatt Wir ändern die Interaktion auf und wählen Swamp Overlay und Wir werden dieselben Einstellungen auf das größere untere Blatt anwenden, das wieder mit dem kleineren unteren Blatt verbunden wird Auf dem oberen unteren Blattrahmen wählen wir den Inhalt aus, der vertikal gescrollt werden soll, und testen dann unser Design 14. Kursprojekt: Hallo und willkommen zurück, alle zusammen. In dieser Vorlesung werden wir über deine Hausaufgaben oder dein Klassenprojekt sprechen . Das Klassenprojekt für Sie wird sein, dass Sie für jede Ihrer Ideen, Ihr Produkt oder Ihr Design einen Papierprototyp Produkt oder Ihr Design einen Papierprototyp Lassen Sie mich Ihnen zeigen, wovon ich spreche. Wie Sie auf dem Bildschirm sehen können, sind dies einige Beispiele für das Prototyping auf Papier Und vergessen Sie nicht und vergessen Sie nicht, dass wir dies bereits in einigen früheren Vorlesungen behandelt Fühlen Sie sich frei, für jede Ihrer Ideen Papierprototypen zu erstellen. Mach dir keine Sorgen, ob du zeichnen kannst oder nicht. Prototyping auf Papier ist sehr einfach und jeder kann es machen.“ Nehmen wir an, Sie können einen Papierprototyp einfach anhand einer groben Skizze erstellen, Sie können Ihr Papierprototyping nach Ihren Wünschen und Vorlieben anpassen nach Ihren Wünschen und Vorlieben Das ultimative Ziel dieses Klassenprojekts ist Ihnen den Einstieg in Ihre UX-Design-Reise zu Ordnung. Nachdem Sie Ihren Papierprototyp fertiggestellt haben, klicken Sie auf das Bild davon oder hängen Sie den Screenshot davon im Projektbereich an , um Ihr Zertifikat zu erhalten Das war's für diese Vorlesung und alles Gute aus deinem Projekt oder deinen Hausaufgaben Und zögern Sie nicht, mir jede Frage zu stellen, wenn Sie sie haben. In Ordnung, wir sehen uns in einem anderen. 15. Du hast es geschafft! Letzter Moment: Vielen Dank, dass Sie sich diesen Kurs angesehen haben. Ich hoffe, dass Sie jetzt sicher sein werden verstehen , wie sich Prototyping in Ihren gesamten Designprozess einfügt und wie Sie Ihre beste Benutzeroberfläche erstellen und Ihr Design zum Leben erwecken können Ihre beste Benutzeroberfläche erstellen und Ihr Design zum Leben erwecken Um mehr über mich zu erfahren, besuchen Sie bitte meinen Link und folgen Sie mir Du kannst dir meinen anderen Kurs zum Thema Grafikdesign in Canva Ich würde gerne mehr über deine Projekte erfahren , an denen du gerade arbeitest, und beantworte gerne alle Fragen, die du hast Nochmals vielen Dank und viel Spaß beim Gestalten.