KI-gestützte UX-Meisterschaft: Von den Anregungen zu Figma-Prototypen

1. Einführung Kursübersicht: Hey, sind sie erfahrene Designer oder haben gerade erst angefangen oder wollen ihre Karriere beginnen? Innovatoren und Schöpfer. Ich bin Kate und bin seit zehn Jahren Produktdesignerin Willkommen zu meinem einzigartigen Kurs über User Experience Design. In diesem Kurs werden wir experimentieren und sehen, wie Kreativität auf Technologie trifft, um zukünftige digitale Erlebnisse zu gestalten. Ich möchte Ihnen zeigen, wie Sie schnell Benutzerabläufe für jede Anwendung von Grund auf neu entwerfen Benutzerabläufe für jede Anwendung und in nur 20 Minuten ein neues Projekt starten können. Ich bin mir sicher, dass du dort gewesen bist. Sie haben eine Idee oder Sie haben die ersten Anforderungen von einem Kunden bekommen. Sie sitzen und schauen auf Ihren Computer oder Ihr Papier und überlegen, wo ich anfangen soll. Aber weißt du was? Dieses Problem besteht nicht mehr. Mit gängigen Technologien und KI-Hilfsmitteln haben Sie immer etwas in der Hand. Sie benötigen keine Erfahrung UX oder UI, die für diesen Kurs entwickelt wurden. Gleichzeitig glaube ich, dass diejenigen von Ihnen, die bereits in der Branche arbeiten, auch einige coole Tipps erhalten werden . Okay, was werden wir zusammen machen? Wir werden untersuchen, wie künstliche Intelligenz und umfangreiche Sprachmodelle zu unserem Designprozess beitragen und ihn beschleunigen können , sodass wir Benutzerflüsse und Wireframes generieren können. Mit nur ein paar einfachen Eingabeaufforderungen werden wir verschiedene KI-Tools und grundlegende kostenlose Funktionen überprüfen verschiedene KI-Tools und grundlegende kostenlose Funktionen Um gleich loszulegen, lernen Sie, wie Sie gute Requisiten schreiben , um die erwarteten Ergebnisse zu erzielen Sobald wir unsere generierten Benutzerflüsse in schriftlicher Form vorliegen haben, ist es an der Zeit, die Ärmel hochzukrempeln und sie mithilfe der Figma-Software zum Leben zu erwecken Machen Sie sich keine Sorgen, wenn Sie es noch nie zuvor benutzen werden. Ich begleite dich bei jedem Schritt auf dem Weg. Sie werden lernen, wie man Low-Fidelity-Wireframes erstellt , um Benutzerabläufe auf der Grundlage generierter Ideen zu erstellen . Als letzten Schritt in diesem Prozess werden wir Bildschirme mit Pfaden verbinden. Der Konzeptentwurf für die Anwendung ist fast fertig. Ein allerletzter Tipp: Ich gebe Ihnen ein paar Ratschläge, wie Ihre Idee testen können, da KI kein echter Mensch ist. Noch nicht. Ich hoffe, wir müssen unsere Prototypen testen und sie mit echten Menschen verwenden , um Probleme zu verstehen und zu verstehen, was wir als Projekt richtig oder falsch gemacht haben . Am Ende des Kurses werden Sie mithilfe von KI-Tools und einer Reihe von Komponenten für die Drahtkonstruktion in Figma eine Idee oder ein Feature für eine mobile Anwendung entwickeln mithilfe von KI-Tools und einer Reihe von Komponenten für die Drahtkonstruktion in Figma eine Idee oder ein Feature für eine mobile Anwendung KI-Tools und einer Reihe von Komponenten für die Drahtkonstruktion in Figma eine Idee oder ein Feature für Diese Komponenten werde ich verschenken, damit Sie sie in Zukunft für Ihre Projekte und Ihr Portfolio verwenden können Zukunft für Ihre Projekte und Ihr Portfolio Sie müssen keine eigenen erstellen. Okay Leute. Ich kann es kaum erwarten, damit anzufangen. Und ich bin sehr gespannt, welche Ideen und Anwendungen Sie am Ende des Kurses entwickeln werden. Viel Spaß beim Entwerfen und willkommen in meiner Klasse. 2. Übersicht über kostenlose KI-Tools und Plattformen: Willkommen zurück, Designer und Innovatoren. In diesem Video tauchen wir in die bestehende Welt der KI-Tools Wir sind dabei, einige wegweisende Plattformen zu erkunden , die unsere Designprozesse aus verschiedenen Blickwinkeln unterstützen werden unsere Designprozesse aus verschiedenen Blickwinkeln unterstützen Jetzt denken Sie vielleicht, wo fange ich mit KI-Tools überhaupt an? Keine Sorge, ich habe heute alles für dich. Ich werde Ihnen drei verfügbare und völlig kostenlose KI-Plattformen vorstellen . Sie können mit nur drei Klicks ein Konto mit einem Google-Konto erstellen oder es mit einer E-Mail einrichten. Zuerst haben wir Cha GPT, das erste und sehr beliebte, ich bin sicher, dass Sie davon gehört haben Mit char GPT kannst du in die Welt der Verarbeitung natürlicher Sprache eintauchen und Benutzerabläufe, Personas, Szenarien, Anleitungen für Benutzerinterviews, Workshop-Agenden und im Grunde alles, was du für einen guten UX-Prozess brauchst , mit nur ein paar einfachen Problemen generieren Anleitungen für Benutzerinterviews, Workshop-Agenden und im Grunde alles, was du für einen guten UX-Prozess brauchst , mit nur ein Es ist, als ob Sie ein Gespräch mit Ihrem Arbeitsassistenten führen würden. Als nächstes steht Gemini von Google auf unserer Liste. Es hat dieselben Funktionen und Sie können es für dieselbe Aufgabe verwenden, die ich bereits erwähnt habe Es ist leistungsstark und ich habe festgestellt, dass es weniger unerwartete KI-Halluzination in den Ergebnissen hat weniger unerwartete KI-Halluzination in den Ergebnissen Zu guter Letzt sind wir ratlos. Ein verstecktes Juwel in der Welt der KI-Tools. Ich mag dieses Modell sehr, da es Ihnen auch eine Liste mit Referenzen und Ressourcen bietet. Es gibt Ihnen eine Vorstellung davon , wo die Ergebnisse erstellt wurden und wo Sie weitere Informationen zu den Ergebnissen nachlesen können . Ich finde es wirklich großartig und sollte meiner Meinung nach von allen UI-Tools ausgeführt werden . Jetzt gibt es einen coolen Teil. Warum versuchen Sie nicht dieselbe Aufforderung auf verschiedenen Plattformen, die ich erwähnt habe, und vergleichen Sie die Ergebnisse. Sie können alle zuvor genannten verwenden und sehen, wo die Ergebnisse Ihren Bedürfnissen besser entsprechen. Egal, ob Sie GPT, Gemini oder Perplexity verwenden, es gab noch nie einen besseren Zeitpunkt, um das Potenzial der KI in Ihrem Designprozess zu nutzen, aber ohne eine gute Aufforderung ist es nichts Lassen Sie uns im nächsten Video eine aussagekräftige Aufforderung erstellen. 3. Erstelle eine angereicherte Aufforderung: Jetzt fragen Sie sich vielleicht, was genau eine Aufforderung ist und warum sie wichtig ist? Wenn ich daran denke, es zu schreiben, stelle ich mir immer die Situation stelle ich mir immer die Situation vor, in der ich mit meinem Kollegen, einem Ehemann oder sogar meiner Mutter spreche . Ich erkläre dem KI-Tool die Aufgabe so, wie ich sie einem Menschen erklären würde. Die Aufforderung sollte eine Menge wichtiger Details enthalten und auch die vorhersehbaren Fragen beantworten. Aufforderung wie „Bitte erstellen und aufschreiben“ Benutzerabläufe für eine Node-App reicht definitiv nicht für ein gutes Ergebnis aus. Worauf Sie sich zuerst konzentrieren sollten und was diese hohen Anforderungen für jede Aufforderung sind. Es geht um Klarheit, Spezifität und Vorstellungskraft. Lassen Sie uns zunächst den Zweck und die Zielgruppe unserer Apps klarstellen , unabhängig davon, ob es sich um ein Produktivitätstool oder eine soziale Plattform für Tierliebhaber Unsere Aufforderung sollte die Essenz unserer App widerspiegeln und direkt auf die Bedürfnisse unserer Nutzer eingehen. Lassen Sie uns als Nächstes in einem bestimmten Kontext nachdenken. Denken Sie über das Szenario nach , in dem Ihre App verwendet wird. Lösen wir ein Problem oder erfüllen einen Wunsch oder verleihen wir einfach jemandem einen Hauch von Freude? Je mehr Kontext wir bereitstellen, desto besser kann unser KI-Gremium seine Reaktion darauf abstimmen. Lassen wir abschließend Raum für Kreativität. Sie keine Angst davor, über den Tellerrand hinauszuschauen und Ihrer Aufforderung ein wenig Persönlichkeit zu verleihen Schließlich entwerfen wir nicht nur eine Anwendung, wir gestalten ein Erlebnis Versuchen wir es mit dem Frageansatz für die Zukunft. Arbeiten Sie mit Eingabeaufforderungen. Ich habe mehrere Fragen vorbereitet, indem ich diese beantwortet habe. Sie werden eine wirklich gute Aufforderung generieren und schreiben, die dann an das KI-Tool übergeben werden kann. Die erste Frage: Was ist die Haupthandlung oder Geschichte der Idee Ihrer Bewerbung? Was ist der Zweck? Ich möchte zum Beispiel eine einfache mobile Anwendung zur Nachverfolgung von Ausgaben entwerfen . Es ist von Vorteil zu erwähnen, dass die Plattform dies für das Internet oder Mobilgeräte tut. Die nächste Frage: Wer wird die Anwendung verwenden? Zum Beispiel wird die Anwendung von einem breiten Publikum genutzt. Meist berufstätige junge Menschen und Menschen mittleren Alters , die den Überblick über ihre Ausgaben behalten und ihr Budget planen und herausfinden möchten , wie sie mehr Geld sparen und besser werden können . Nächste Frage. Welche Funktionen können in der ersten einfachen Version enthalten sein ? Mach es einfach. Listen Sie nicht Hunderte verschiedener Funktionen auf. Seien Sie sehr präzise , aber auch effektiv. Du kannst auch nach der Monetarisierung fragen, aber auch das erhöht die Komplexität . Bleiben wir einfach. Ein Beispiel könnte so etwas sein wie die Hauptfunktionen das Protokollieren, Hinzufügen und Entfernen von regelmäßig wiederkehrenden Ausgaben pro Tag. Verschiedene Kategorien für Ausgaben, Kalender, Kontoeinstellungen, Dashboard und einige Analysen, in denen der Benutzer eine Zusammenfassung aller vergangenen Ausgaben einsehen kann. Dann die nächste Frage. Letzte Frage, wie man ein Ergebnis der KI-Ideen präsentiert. Seien Sie präzise. Zum Beispiel bitte die eigentliche Aufgabe für KI. Bitte erstellen Sie Benutzerabläufe für die Anwendung, die ich gerade beschrieben habe, damit ich sie verwenden kann, um Wireframes zu entwerfen und die Anwendung mit zukünftigen Benutzern zu testen. Am Ende haben wir, wie ich bereits erwähnt habe, drei bis vier einfache Fragen. Was, wer und wie. Fassen Sie alle Antworten auf diese Fragen zusammen und teilen Sie auch einen Absatz auf. Es hilft, bessere Ergebnisse zu erzielen , wenn Sie Ihre Aufforderung haben. Lassen Sie es uns ausprobieren. Im nächsten Video werde ich Ihnen zeigen, wie verschiedene Plattformen mit derselben Aufforderung drei verschiedene Ergebnisse erzielen. Und dann werden wir eine davon auswählen und weiter verwenden. 4. Benutzerabläufe mit KI generieren: In dieser Lektion verwenden wir die Beispielaufforderung, die ich Ihnen im vorherigen Video gegeben habe , um endlich die von KI generierten Ergebnisse zu sehen. Wie gesagt, ich werde alle drei Plattformen verwenden , um die Ergebnisse zu vergleichen und die besten auszuwählen. Der erste ist Char GPT. Ich verwende eine kostenlose Kontokopie, um meine Eingabeaufforderung einzufügen und ich möchte Benutzerabläufe für eine teure Striking-App generieren Benutzerabläufe für eine teure Striking-App Ich gebe alle Details, den Zweck, die Zielgruppe, meine Funktionen und die Aufgabe selbst an Wie ich in der vorherigen Lektion erklärt habe, wollen wir uns die Ergebnisse ansehen. Was wir hier haben werden. Wir haben einen kurzen Onboarding-Prozess sowie einen Login. Das ist ein gutes Dashboard mit einer Zusammenfassung als Startbildschirm zum Hinzufügen von Ausgaben mit einigen Details, zum Anzeigen Ihrer Ausgaben, zur Analyse, zum Abmelden des Benutzerkontos. Im Allgemeinen ist das Ergebnis nett, aber für die Erstellung der Designs benötige ich etwas mehr Wir können die Antwort später jederzeit neu generieren, aber ich würde auch gerne andere Tools ausprobieren Der nächste ist Gemini. Ich verwende dieselbe Eingabeaufforderung und kopiere sie einfach und füge sie erneut ein. Mal sehen N Ich sehe, dass wir ein bisschen mehr Details für unsere weitere Arbeit haben Great Gemini teilt alles in mehrere Hauptabläufe auf, wie Anmelden und Hinzufügen von Ausgaben und so weiter Und sogar erwähnte Fehlermeldungen, was hilfreich ist. Richtig. Mir gefällt, dass wir Bildschirmbeschreibungen und sogar Schaltflächen und Textfeldbeschriftungen sehen Bildschirmbeschreibungen und sogar Schaltflächen und Textfeldbeschriftungen Das ist sehr gut. Okay. Was sonst? Die App zeigt die Felder auf dem Bildschirm nach Aufwand für die Eingabe des Betrags, der Kategorie, des Datums und des optionalen Knotens an. Das brauchen wir für unser Prototyping. Perfekt. Okay. Das Letzte, was ich gerne ausprobieren würde, ist Perplexity Das Tool basiert auf Open Eye und bietet Ihnen auch viele zusätzliche Referenzen aus dem Internet zu dem verwandten Thema Wie ich bereits erwähnt habe, führe ich dieselbe Aktion aus und füge meine vorbereitete Eingabeaufforderung hinzu, um das Ergebnis zu sehen. Okay, was werden wir hier haben? Das Ergebnis enthält weniger Details als das vorherige Tool. Hier sehen wir ein hohes Maß an Fehlern mit einer kurzen Beschreibung der einzelnen Bildschirme Ich glaube nicht, dass es ausreichen wird, wirklich mit der Gestaltung des Benutzerkontos zu beginnen der Gestaltung des Benutzerkontos enthält ein bisschen mehr Informationen und die Möglichkeit, die Identifizierung zu verwalten. Jetzt möchte ich zum vorherigen Tool Gemini zurückkehren und darum bitten, der Antwort weitere Details hinzuzufügen Ich benötige mehr Informationen, um es mit vorbereiteten Fireframe-Komponenten wie Schaltflächen, Textfeldern usw. zu erstellen mit vorbereiteten Fireframe-Komponenten wie Schaltflächen, Textfeldern usw. zu Okay, lass uns sehen. Das Ergebnis sieht so aus, als ob er tief nachdenkt. Ja, X ist nicht so einfach, oder? Oh, wow, das sieht vielversprechend und fantastisch aus. Jetzt haben wir alles, um diese Ideen einfach in der Benutzeroberfläche nachzuahmen Lassen Sie uns die Antworten kopieren und sie einfach zu Figma hinzufügen. sehen uns in der nächsten Lektion, wir mit dem eigentlichen Entwerfen beginnen werden 5. Erstellen von Bildschirmen in Figma auf der Grundlage der bereitgestellten KI-Nutzerströme: Willkommen im Figma-Teil des Kurses. In den nächsten 10 Minuten erfahren Sie, wie Sie Wireframes auf der Grundlage von KI-generierten Abläufen erstellen auf der Grundlage von KI-generierten Abläufen Wenn du noch kein Konto hast, benötigst du eines, um das kostenlose Wire-Frame-Set nutzen zu können, das ich speziell für diesen Kurs vorbereitet habe. So greifen Sie auf die Datei zu: Gehen Sie zur Figma-Community-Website und suchen Sie nach einem Wireframe-Blueprint-Kit Alternativ können Sie den Link verwenden, der in der Klassenbeschreibung auf der Seite mit den gemeinsam genutzten Community-Dateien angegeben Klassenbeschreibung auf der Seite mit den gemeinsam genutzten Klicken Sie auf die Schaltfläche „ In Figma öffnen“. Dadurch wird eine Kopie der Datei in Ihren Entwürfen erstellt , die Sie verwenden können Ich werde die Datei bereits für die Demonstration öffnen. Lass uns untersuchen, was drin ist. Die erste Seite enthält eine kurze Beschreibung und einige Bildschirmbeispiele. Sie können über das Bedienfeld auf der linken Seite zu der Datei navigieren . Die Datei ist in drei Hauptseiten unterteilt : Beschreibung, Komponenten und Titelblatt. Ich habe auch eine zusätzliche Seite namens Mein Projekt erstellt. Fühlen Sie sich frei, es anders zu benennen. Auf dieser Seite werden wir unsere Fehler ausbessern. Sie können neue Seiten erstellen, indem Sie hier auf das Plus-Symbol klicken. Die Komponentenseite enthält alle Bausteine, die Sie für die Konstruktion Ihrer Drahtgitter benötigen. Einige Komponenten verfügen über Platzhalter, während bei anderen bereits vorgefüllte Texte für Titel und Schaltflächen vorhanden um darauf zuzugreifen. Navigieren Sie schnell zum linken Bereich und wechseln Sie zur Registerkarte „Asset“, wo Sie eine Liste der Komponenten mit den vorherigen Komponenten sehen Okay, gut. Wechseln wir jetzt zu unserer neu erstellten Seite, meinem Projekt. Ich habe die von KI generierte Antwort aus dem vorherigen Video bereits kopiert und eingefügt und sie in Abschnitte aufgeteilt , die verschiedene Bildschirme repräsentieren Diese Struktur wurde auch von KI bereitgestellt. Wie Sie sich erinnern, beginnen wir mit dem Anmeldebildschirm. Um Elemente zum Bildschirm hinzuzufügen, öffne ich das Bedienfeld „Elemente“ und suche nach der entsprechenden Bildschirmkomponente. Denken Sie daran, dass Sie dieses Erlebnis personalisieren können, indem Sie Ihren Seiten Namen geben und die Komponenten untersuchen , um sie an Ihr Projekt anzupassen Lassen Sie uns mit dem schnellen Prototyping und der Drahtkonstruktion beginnen. Ich nehme den Bildschirm von der linken Seite der Figma-Oberfläche aus den Assets heraus Lassen Sie uns schnell überprüfen, was ich für uns bereitgestellt habe. Der Anmeldebildschirm wird aus einem Textfeld, einem Untertitel und einigen Schaltflächen bestehen einem Untertitel und einigen Schaltflächen bestehen Das erste Feld enthält den Benutzernamen, ebenfalls empfohlene KI und das Passwort Lassen Sie uns natürlich Schaltflächen suchen. Wir benötigen den primären Button-Login. Wir benötigen auch wie gewohnt eine zweite Schaltfläche, die Sie zu Beginn in fast jeder Anwendung finden können . Außerdem rät künstliche Intelligenz dazu, eine Schaltfläche „Passwort vergessen“ zu verwenden, was verständlich ist. Lassen Sie uns den Header für den Bildschirm und ihn für die Eingabe eines Titels verwenden. Ich entferne den Hintergrund, wir brauchen ihn nicht, und die Symbole von oben zeigen, wie einfach es ist, das im Bedienfeld der Komponente auf der rechten Seite zu tun das im Bedienfeld der Komponente auf der rechten Seite Wir nennen das Login und vielleicht können wir es etwas persönlicher gestalten und etwas hinzufügen. Bitte halten Sie den oberen Teil gedrückt , damit es sich ein bisschen mehr anfühlt, als wäre es der Beginn der Benutzerreise der Anwendung. Ich nehme einige Anpassungen am Layout vor. Natürlich machen wir hier kein pixelgenaues Design. Wir sammeln lieber einfach alle Gegenstände auf dem Bildschirm. Ich messe nichts und ich mache das auch nicht wirklich. Sogar das alles in den Rahmen einzufügen und den Rahmen zu benennen , den wir für die Zukunft benötigen würden. Prototyping und Anschluss aller Bildschirme. Okay, der erste Bildschirm ist fertig. Mal sehen, was wir hier noch tun können. Armaturenbrett? Ja, wahrscheinlich müssen wir mit dem Startbildschirm weitermachen, auf dem das Dashboard aufgerufen wurde. Text von AI. Auch hier suchen wir nach einem Bildschirm im Asset-Panel, um mit der Erstellung des Benutzerflusses zu beginnen. Was brauchen wir noch? Natürlich der Header. Da es sich um einen Startbildschirm handelt, benötigen wir so etwas wie ein Symbol, um ein Menü mit anderen Optionen für den Benutzer zu öffnen. Wahrscheinlich ein Kalender. Wir haben es auch in den von der KI bereitgestellten Details gesehen. Ja, nennen wir es meine Ausgaben. Ich glaube, ich habe es anders genannt, wie meine Finanzen, aber ich finde, Ausgaben klingen besser. Außerdem habe ich in der Beschreibung erwähnt, dass wir noch ein paar mehr hinzufügen können. Ja, wir brauchen den Hinzufügen-Button, ich auch aus dem Panel genommen Ja, lassen Sie uns einen Platzhalter verwenden, um zu zeigen, dass es weitere Details geben kann In der Beschreibung des KI-Flows gab es auch eine Zusammenfassung. Betrag der Zusammenfassung, die wir ausgegeben haben, oder der Betrag, den Nutzer ausgegeben haben. Wir müssen auch den DE-Bildschirm einblenden. Okay, lass es uns überprüfen. Hmm, an zweiter Stelle die jüngsten Ausgaben, aber detaillierter. Okay. Wir können es vorerst überspringen. Und mal sehen, da wir bereits einen Listeneintrag haben, können Sie auf die Liste klicken und dann wird die Detailseite geöffnet. Ich finde das sieht gut aus. Lassen Sie uns einige kleine Anpassungen am Layout vornehmen. Ich denke, dieser Bildschirm ist startklar, da wir bereits die Schaltfläche „Hinzufügen“ zu meinen Ausgaben hinzugefügt haben. Lassen Sie uns diesen Bildschirm mit einem neuen Aufwand erstellen. Vergessen Sie nicht, Ihre Frames aufzurufen , damit wir sie später mit dem Bildschirm „Flows at Expense“ verbinden können . Ich werde dafür wahrscheinlich eine Hintergrundkomponente verwenden, aber es kann sich auch um einen separaten Bildschirm handeln. Wir müssen den Hintergrund gruppieren , weil der Startbildschirm hier zum Hintergrund wurde. Gehen Sie zum Asset-Panel und suchen Sie nach einer Hintergrundkomponente. Ich bin mir sicher, dass Sie es schon oft in verschiedenen Anwendungen gesehen haben. Heute ist es sehr beliebt, es zu verwenden, und fast alle Systeme haben es. Okay, lassen Sie uns den Titel und die Kosten ändern. Ich denke, wir können diese Elemente entfernen, da wir unsere eigenen Textfelder hinzufügen werden. Ich habe empfohlen, auch die Auswahl der Kategorie für Ausgaben wie Lebensmittel oder Haushalt oder ähnliches hinzuzufügen . Ich fange damit und mit den Textfeldern an . Das ist gut, dass in diesen Komponenten, auch wenn es sich um Wireframes handelt, wir in diesen Komponenten, auch wenn es sich um Wireframes handelt, einige Labels sehen können, sodass wir für zukünftige Tests mit echten Benutzern tatsächlich etwas vermarkten können für zukünftige Tests mit echten Benutzern tatsächlich etwas vermarkten Die Benutzer werden verstehen, was das bedeutet, primäres Muster hinzuzufügen Ich denke, wir müssen auch beim Etikett den Betrag hinzufügen, der im KI-Vorschlag enthalten war. Ein Titel wie der Name der Ausgabenliste mit allen Kategorien aus der Liste. Es gibt auch den Rat, welche zu haben, eine Notiz für jede Ausgabe. Ja, wir können es vorerst überspringen. Und vielleicht haben Sie es einfach als Platzhaltertext. Natürlich benötigen wir die Kalenderauswahl, weil wir die Kosten entsprechend dem Tag, den Monaten und dem Jahr festlegen müssten Tag, den Monaten und dem Jahr Da wir den Bildschirm mit den Werbekosten bereits erstellt haben, können wir meiner Meinung nach auch eine detaillierte Seite mit den Ausgaben erstellen eine detaillierte Seite mit den Ausgaben Lassen Sie uns schnell überprüfen, ob wir nichts verpasst haben. Ich kopiere den Bildschirm. Ich denke, die Detailseite der Ausgabe entspricht im Grunde genommen der Werbekostenseite im Hintergrund. Ich ändere den Titel. Okay, lassen Sie uns schnell überprüfen, was wir haben. Im Grunde genommen all diese Felder, die wir einfach zu den Werbekosten hinzufügen. Wir müssen sie in Labels umwandeln. Ich habe empfohlen, zwei Schaltflächen löschen und hinzufügen zu lassen, was Sinn macht. Benutzer kann die Ausgaben löschen oder einige Details hinzufügen und dann vorherigen Bildschirm wechseln, den wir erstellt haben. Wir kopieren einfach alle Felder, die wir vom vorherigen Bildschirm haben. Aus den Werbekosten benötigen wir die Kategorie, aber sie wurde bereits vom Nutzer ausgewählt. Wir benötigen die Höhe der Kosten und einen Titel oder Namen. Nennen wir es Geburtstagsparty. Ja. Und Datum der Einreichung wo? Das ist der 21. Februar 24. Ja. Im Grunde sind alle Informationen, die wir für den allerersten Entwurf des Bildschirms benötigen, hier. Lassen Sie uns ein paar kleine Anpassungen vornehmen, auch wenn es nicht notwendig ist, denn ist es ein By-Frame und wir testen nur den Fehler und die Idee sollte keine Gedanken an das Layout im Allgemeinen sein, da wir es später ändern können Okay, lassen Sie uns überprüfen, was wir haben. Erweitern Sie Detail, Kategorie und Datum, indem Sie einen Knoten beibehalten. Ja, sieht gut aus. Lass uns mit dem nächsten weitermachen. Ich vergesse nicht, den Titel der Frames zu ändern. Es ist einfach, später zu navigieren da wir eine weitere Verbindung zwischen den Bildschirmen herstellen möchten . Lassen Sie uns schnell das Pop-up hinzufügen Wenn Sie auf die Schaltfläche Löschen klicken, können wir dieses Popup anzeigen und wenn Sie darauf klicken, können wir den vorherigen Bildschirm anzeigen. Ich würde mit dem Menü fortfahren. Ich habe empfohlen, mehrere Elemente in der Anwendung zu haben , z. B. Analysen und Kalender und die Änderung der Kategorie. Wir brauchen auf jeden Fall ein Menü. Dafür gibt es eine Komponente. Es ist eine Navigationsschublade zum Zeichnen. Ja, lass uns das Symbol ändern. Wie Sie sehen können, ist es mit den im Text vorgeschlagenen Komponenteneinstellungen sehr schnell und schnell . Lassen Sie uns die Kategorien Home Analytics, Budget, Connect und Bank haben. Ja, das könnte ein cooles Feature in meinem Profil sein. Ja, die Symbole passen ein bisschen nicht zu den Beschriftungen, aber das ist in Ordnung, da es sich wiederum um unsere Entwurfs-Wireframes Ich denke, es wäre schön, auch einen Kalenderbildschirm zu haben. Und wir haben es auch in unserer Beschreibung, weil wir dieses Symbol oben rechts haben. Du klickst dort und öffnest einen Kalender. Ja, es könnte auch im Hintergrund sein. Ich denke, es ist besser, eine ähnliche Komponente und ein ähnliches Verhalten für ähnliche Aktionen zu haben . In der Anwendung auf dieser Seite gibt es einfach einen Kalender, der hier hinzugefügt wurde, sodass Sie zwischen den Tagen wechseln und die Ausgaben für jeden Tag einsehen können . Aus dem Text geht auch hervor, dass wir Kategorien haben und diese hinzufügen werden, was ich auch für sinnvoll halte. Als Benutzer möchten Sie weitere Kategorien hinzufügen, nicht nur eine Standardkategorie, sondern auch eigene Kategorien, zum Beispiel für das Verlassen, vielleicht für das Studium oder etwas anderes. Lassen Sie uns das auch schnell hier haben, wir verwenden denselben Titel für die Listenkomponente und ja, lassen Sie uns einige Bezeichnungen für diesen Zweck ändern. Wir brauchen immer noch die Plus-Schaltfläche, die Schaltfläche zum Hinzufügen dazu. Nun, wir haben alle Bildschirme erstellt, die von KI zur Verfügung gestellt wurden , um den Ablauf zu ergänzen. Ich denke, das sind die Hauptbildschirme, die man für die Anwendung „Kleine Ausgaben“ oder „Nachverfolgung von Ausgaben“ haben sollte. Natürlich können es noch viel mehr Details sein, aber für die erste, für die erste Einreichung, ist es definitiv ausreichend. Lassen Sie uns im nächsten Video alle Bildschirme mit den Flows verbinden und versuchen, es mit den Benutzern zu testen und zu sehen, wie es funktioniert. Wir sehen uns im nächsten Video. 6. Bildschirme zu Pfaden verbinden: Leute, das ist die letzte Lektion in diesem Kurs. In dieser Lektion möchte ich Ihnen zeigen, wie Sie mit dem Prototyp-Tool in Figma schnell mit dem Prototyp-Tool in Figma alle von uns erstellten Bildschirme verbinden der Lektion des vorherigen Videos fehlte ein Bildschirm Lektion des vorherigen Videos Das sind zusätzliche Kosten, und ich kopiere einfach einen Ausgabenbildschirm und ändere die Bezeichnung der Schaltfläche, weil es im Grunde derselbe Bildschirm ist. Ich werde in der Lage sein, die unterstützte Schaltfläche von der Detailseite aus zu verbinden die unterstützte Schaltfläche von der Detailseite aus Die Prototyp-Werkzeuge werden hier von rechts angezeigt. Sie klicken dort und dann sieht die Funktion so aus, als ob Sie eine der Komponenten auswählen und mit kleinen Pfeilen die Bildschirme verbinden Wie hier bei der Anmeldung erscheint der Benutzer auf dem Startbildschirm, wenn er sich bei der Anwendung anmeldet und seine Anmeldeinformationen eingibt kann er sofort den Startbildschirm sehen Danach kann er sofort den Startbildschirm sehen, den wir entworfen haben Wir werden das Passwort nicht vergessen, weil wir den Bildschirm dafür nicht auf Knopfdruck erstellt haben. Wir stellen auf Kosten eine Verbindung zum Bildschirm her. Wenn Sie dann auf die Sammelschaltfläche klicken die Sammelschaltfläche , erscheint erneut der Startbildschirm. Was können wir noch verbinden? Lassen Sie uns das Menü zusammenstellen indem wir auf das Burger Camburger-Menü Der Benutzer öffnet die Menüschublade und kann sie natürlich schließen und zum Startbildschirm zurückkehren Lassen Sie uns auch die Kalenderansicht von oben verbinden, sodass die gesamte obere Navigation dem Kalenderbildschirm erfolgt. der Benutzer auf das klickt eines der Listenelemente auswählt, und eines der Listenelemente auswählt, öffnet er die Detailseite so, wie wir sie in der vorherigen Liste entworfen haben. Natürlich kann er wieder zum Startbildschirm zurückkehren. Fast alle unsere Bildschirme führen zum Startbildschirm. Nachdem Sie es benutzt haben, verbinden wir Diät mit dem Punktbildschirm und löschen. Wir verbinden das Löschen mit dem Löschbildschirm. Popup löschen. Von hier aus können Sie die Ausgaben grundsätzlich löschen. Danach führt der Benutzer zum Startbildschirm und zur Schaltfläche „ Abbrechen“. Wir schließen einfach das Popup und Sie zeigen den vorherigen Bildschirm an, der die Detailseite ist. Was wir sonst noch im Menü haben können, wir können den Startbildschirm wieder mit unserem Bildschirm „Meine Ausgaben“ verbinden . Und von diesem Menü aus haben wir auch einen Kategorienbildschirm erstellt, auf dem Sie Kategorien ändern oder sie aus dem Kategoriebildschirm entfernen können. Auch hier können Sie zum Hauptbildschirm mit der Übersicht zurückkehren . Ja, ich habe vergessen, die Kalenderansicht mit dem Startbildschirm zu verbinden die Kalenderansicht mit dem , damit der Benutzer zurückkommen und den Kalender schließen kann . Ich denke, es wäre einfacher, wenn wir einfach diese Kreuztaste zu jeder Hintergrundkomponente hinzufügen zu jeder Hintergrundkomponente wenn wir sie für den Benutzer testen. Es wird einfacher zu verstehen sein, wie Sie diesen Bildschirm schließen und zum vorherigen Status zurückkehren können. Ich denke, diese Listenelemente sind auch ziemlich irreführend. Lassen Sie uns hier zumindest einen Text angeben , der zeigt, dass Benutzer einige Ausgaben für Geburtstagsfeiern einreichen, aber wir können auch Katzenfutter eingeben Vielleicht ein paar Bücher, die ich kürzlich gekauft habe, Handcreme, das sieht etwas natürlicher aus. Ja, wenn Sie das Prototyp-Tool auswählen, sehen diese Alles-Pfeile überwältigend und überladen aus. Aber wenn Sie einmal damit angefangen haben, werden Sie feststellen , dass es sehr einfach ist. Sie müssen nur alle interaktiven Komponenten mit einigen Bildschirmen verbinden interaktiven Komponenten mit und dann zuerst Ihren Prototyp testen Natürlich testen Sie ihn lieber selbst. Ich werde dir zeigen, wie das in Figma geht. Sie haben die Möglichkeit, es in einem separaten Fenster zu öffnen, das wie ein kleines Telefon aussieht Hier klickst du auf die Play-Schaltfläche, probierst es aus, du klickst auf alle Buttons, die wir verbinden, und siehst, wie es funktioniert. Bei Bedarf erscheint ein Bildschirm, wenn es wie erwartet funktioniert. Was kannst du sonst noch mit Figma machen? Sie können die Figma-App auf Ihr Handy herunterladen und diesen Prototyp ganz einfach auf Ihrem Handy öffnen. Er sieht fast genauso aus wie eine echte Und geben Sie es einigen Ihrer Freunde, um Ihren Prototyp zu testen und sehen , was zu tun ist. Geben Sie Ihren Teilnehmern einfach eine Aufgabe Bitte erstellen Sie eine Ausgabe oder ändern Sie die Kategorie erneut in der Anwendung. Und dann siehst du sofort, was fehlt oder was für den Benutzer nicht wirklich klar ist. Man beobachtet, wie sich der Nutzer verhält oder was er anklicken möchte oder was er nicht finden kann Und dann siehst du sofort die Schwachstellen deiner Anwendung Das war der letzte Schritt dieser Lektion, der Unterricht. Lassen Sie uns nun mit dem Projekt beginnen und Benutzerabläufe und Benutzererlebnisse für mobile Anwendungen erstellen . mit Hilfe von KI Lassen Sie uns mit Hilfe von KI in das Video zur Projektbeschreibung eintauchen. 7. Projekt: Wir haben auf unserer UX-Design-Reise einen langen Weg zurückgelegt und jetzt ist es an der Zeit, unsere neu gewonnenen Fähigkeiten in ein Projekt für unser Abschlussprojekt einzubringen. Ich beauftrage dich mit einer Mission, die deinen inneren Innovator entfesselt und alles, was du bisher in diesem Kurs gelernt hast, präsentieren wird deinen inneren Innovator entfesselt und alles, was du bisher in diesem Kurs gelernt hast, präsentieren . Bist du bereit? Hier ist es. Sie erstellen einen Benutzerfluss für eine mobile Anwendung oder eine Funktion innerhalb einer Anwendung und nutzen dabei die Leistung der generierten Benutzerflüsse. Denken Sie an eine beliebige Anwendung, vielleicht haben Sie eine großartige neue Idee, oder Sie können einfach alle bekannten Funktionen oder mobilen Anwendungen verwenden alle bekannten Funktionen , die Sie bereits verwenden. Es spielt keine Rolle, da wir hier üben. Dann müssen Sie sich eine gute Aufforderung einfallen lassen , die das Wesentliche der Idee zusammenfasst Sobald Sie Ihren Pront haben, ist es an der Zeit, ihn in die KI zu integrieren und Benutzerflüsse für Ihre mobile Anwendung oder ein Feature zu generieren Ihre mobile Anwendung oder Nehmen Sie dann Ihre Ergebnisse und fügen Sie sie zu Figma Verwenden Sie Komponenten, die ich mit Ihnen geteilt habe, um Bildschirme zu erstellen. Denken Sie daran, dass es nicht nur darum geht schöne Bildschirme oder perfekte Drahtgestelle zu erstellen. Es geht darum, ein intuitives Benutzererlebnis zu schaffen. Scheuen Sie sich nicht, nach den ersten oder zweiten Ergebnissen zu iterieren und zu verfeinern Wenn Sie möchten, können Sie noch weiter Bildschirme mit der Prototyping-Funktion in Figma verbinden der Prototyping-Funktion in Figma und sie mit Ihrer Familie oder Freunden testen Sie haben bereits meinen Tipp wie Sie effektive Benutzertests durchführen Bitte füge deine Projekte als Screenshot unter dieser Klasse hinzu. Ich freue mich sehr, einen Kommentar abzugeben und dir einen Rat zu geben. Danke, dass du bis zum Ende hier warst. Viel Spaß beim Entwerfen und wir sehen uns auf der anderen Seite. Tschüss.