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.