UI/UX-Design mit generativer KI: Gestaltung benutzerfreundlicher Oberflächen

1. Einführung: Hallo Leute, seid ihr daran interessiert Benutzeroberflächen mithilfe von KI zu entwerfen? Wenn die Antwort ja ist, dann könnte dieser Kurs für Sie sein. In diesem Kurs werden wir also mehrere Projekte haben. Im ersten Projekt werden wir also die Benutzeroberfläche für eine Sprachlern-App mithilfe von UISR entwerfen für eine Sprachlern-App mithilfe von UISR Dieses Tool ist sehr einfach zu bedienen. Sie müssen lediglich die Aufforderung schreiben , die Ihr Projekt beschreibt, und in weniger als einer Minute generiert UIZR Ihnen hochwertige UI-Designs wie dieses. Sehr cool, oder? Als Nächstes können Sie auch einen Screenshot einer Website oder einer mobilen Anwendung machen, und UIZrt kann diesen Screenshot in bearbeitbare UI-Designs konvertieren . Schau dir das an Im nächsten Projekt werden Sie eine Benutzeroberfläche auf Papier skaten, und Sie können ein Foto von dem Scat machen und dieses Foto hochladen. Die KI wird dann physisch in der Lage sein, diese Skizze in bearbeitbare Benutzeroberflächendesigns wie dieses umzuwandeln Skizze in bearbeitbare Benutzeroberflächendesigns wie dieses Sehr cool, oder? Im nächsten Projekt werden wir mit Wind Frame die Benutzeroberfläche für die E-Commerce-Website entwerfen . Dann werden wir auch eine Benutzeroberfläche für die Umsatzanalyse mithilfe von FSL entwerfen für die Umsatzanalyse mithilfe von FSL Seht euch das an, Leute. Ziemlich cool, oder? Als Nächstes werden wir die Benutzeroberfläche für die Anmeldeseite entwerfen . Wir werden die Benutzeroberfläche für das Design von Pads manuell entwerfen . Als Nächstes werden wir die Aufmerksamkeit der Benutzer mithilfe von KI analysieren Aufmerksamkeit der Benutzer mithilfe von KI Sie erhalten also den Hitmp und der Hitmp zeigt Ihnen , worauf sich die Aufmerksamkeit des Benutzers hauptsächlich konzentriert Und schließlich werden wir mit UX Pilot Untersuchungen zur Nutzererfahrung durchführen 2. Entwerfen der Benutzeroberfläche für Sprachlern-Apps mit Uizard: Heilige Besetzung, willkommen zurück zum Kurs. In diesem Video werden wir die Benutzeroberfläche mit UIZrt entwerfen Benutzeroberfläche mit UIZrt Okay, lass uns jetzt anfangen. Das erste, was Sie tun müssen, ist sich anzumelden. Klicken Sie also einfach auf Kostenlos anmelden und Sie werden auf diese Seite weitergeleitet. Wie ihr sehen könnt, habt ihr zwei Möglichkeiten. Sie können sich mit Ihrem Gmail-Konto anmelden. Sie können sich auch mit Ihrem Microsoft-Konto anmelden. Es liegt also ganz bei Ihnen. In diesem Fall werde ich mich mit meinem Gmail-Konto anmelden . Wie ihr hier sehen könnt, wurde ich zu meinem Dashboard weitergeleitet. Okay, genau hier gibt es vier Optionen. Die erste Option ist ein neues leeres Projekt. So können Sie die Benutzeroberfläche von Grund auf neu erstellen. Die zweite Option besteht darin, mit dem Screenshot zu beginnen. Sie können also einen Screenshot einer Website oder einer mobilen Anwendung diesen Screenshot dann hochladen machen und diesen Screenshot dann hochladen. UISRT konvertiert diesen Screenshot in UI-Designs Die dritte Option besteht darin, die UI-Designs mit Auto Designer zu generieren , und die vierte Option besteht darin, mit Vorlagen zu beginnen Wie Sie wissen, hat UISRT viele Vorlagen, sodass Sie eine dieser Vorlagen auswählen und nach Ihren Wünschen anpassen können und nach Ihren Wünschen anpassen In diesem Video werden wir uns jedoch hauptsächlich auf diese Funktion konzentrieren , Klicken Sie einfach darauf und es wird diese Seite weitergeleitet. In Ordnung. Also lass uns jetzt anfangen. Zunächst müssen Sie auswählen, für welches Gerät Sie entwerfen? Wie ihr hier sehen könnt, gibt es drei Optionen: Handy, Tablet und Desktop. Ich wähle Handy aus. Als Nächstes müssen Sie die Aufforderung schreiben, in der Ihr Projekt beschrieben wird. Okay, in diesem Beispiel werde ich eine Benutzeroberfläche für die Sprachlern-App erstellen . Okay, also werde ich so etwas schreiben, eine Sprachlern-App für Schüler und Taurus Okay, als Nächstes müssen Sie den Designstil beschreiben Sie können Dinge wie Farben und Layouts angeben. Okay, lass uns die Beschreibungen einer modernen App mit hellblauem Team schreiben die Beschreibungen einer modernen App . Als Nächstes können Sie auch einige dieser Keywords auswählen. Ich wähle leicht, moderat und elegant. Okay, als Nächstes klicken Sie einfach auf Mein Projekt generieren. Okay, also wartet einfach, Leute. Der Vorgang könnte ein paar Minuten dauern. Hoffentlich dauert es nicht zu lange und ich freue mich sehr, meine Benutzeroberfläche zu sehen . Okay, also warte einfach. Eigentlich möchte ich nicht, dass dieses Video zu lang wird, also überspringe ich diesen Teil und kehre zurück, sobald das Design der Benutzeroberfläche fertig ist. Okay, endlich sind die Benutzeroberflächendesigns fertig. Eigentlich hat der Prozess nicht allzu lange gedauert, Leute. Es dauerte nur 2 Minuten oder vielleicht sogar weniger als 2 Minuten. Okay, jetzt klicke ich auf Vorschau. Und lassen Sie uns auf Übersicht klicken. Wie ihr sehen könnt, hat UIZrt mehrere Seiten generiert. Schau dir das an. Wir haben also die Willkommensseite, die Anmeldeseite, Startbildschirm, die Suche, das Profil und die Kontoeinstellungen. Seht euch das an, Leute. Sehr cool. Okay, ich zoome ein bisschen. Okay, seht euch das an, Leute. Sehr cool, oder? Okay, klicken Sie jetzt einfach auf Vorschau. Klicken Sie einfach auf Verstanden. Okay, klicken Sie einfach auf Jetzt starten und beitreten. Okay, das ist also wie die Homepage, Leute. Schau dir das an. Wenn wir auf Profil klicken, werden wir auf diese Seite weitergeleitet. Wenn wir auf Home klicken, werden wir zurück zu dieser Seite weitergeleitet. Und wenn Sie auf einen dieser Kurse klicken, werden Sie auf diese Seite weitergeleitet. Seht euch das an, Leute. Das ist unglaublich, oder? Okay, jetzt gehen wir zurück zur Bearbeitungsseite. Ich werde diesen Tab schließen. Wenn Sie also mit den UI-Designs nicht zufrieden sind, können Sie sie gerne anpassen, oder? Sie können also Text hinzufügen. Sie können Schaltflächen hinzufügen. Ihr könnt Formulare hinzufügen und noch viel mehr, Leute. Sie können auch ein Bild hinzufügen, also klicken Sie einfach auf Bild. Wie ihr sehen könnt, hat UISRT hier eine eigene Bildbibliothek. Sie können auch ein Bild mit KI generieren, also klicken Sie einfach darauf und geben Sie hier einfach Ihren Abschlussball Und wenn Sie auf Symbole klicken, können Sie Ihrer Benutzeroberfläche auch beliebige Symbole hinzufügen . Wie ihr hier sehen könnt, hat ISAT hier viele verschiedene Icons, Leute. Seht euch das an Außerdem können Sie die Seite auch bearbeiten. Wählen Sie also einfach die Seite aus , die Sie bearbeiten möchten. In diesem Fall möchte ich zum Beispiel den Homestren bearbeiten, sodass Sie einfach Homestren auswählen und das Layout bearbeiten können Sie können die Positionen und die Größe ändern. Sie können auch den Stil ändern. Sie können die Bildschirmfarbe ändern. Sie können die Objekte auf dieser Seite gruppieren oder deren Gruppierung aufheben. Wenn Sie das UI-Design herunterladen möchten, klicken Sie abschließend einfach auf Exportieren Wie ihr hier sehen könnt, habt ihr mehrere Möglichkeiten. Sie können dies also im PNG-Format und JPageFMAT SVG- oder PDF-Format herunterladen . Es liegt also ganz bei dir. Ich werde dieses UI-Design im PNG-Format herunterladen. Klicken Sie also einfach auf Exportieren. Okay, der Vorgang kann ein oder zwei Minuten dauern . Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Okay, wie ihr sehen könnt, haben wir dieses Bild erfolgreich heruntergeladen Schau dir das an. Sehr cool, oder? Ordnung, Leute, ich glaube, das ist es. Mehr musst du nicht wissen Ich werde Leute im nächsten Video sehen, in dem wir das Benutzeroberflächendesign mit einem anderen KI-Tool erstellen Benutzeroberflächendesign mit werden. Also werde ich euch dort sehen. 3. Benutzeroberfläche mit Google Stitch & Figma entwerfen: Hallo Leute. Willkommen zurück zum Kurs. In diesem Video werden wir die Benutzeroberfläche mithilfe von zwei KI-Tools entwerfen . Das erste ist Google States und das zweite ist FicMA AI Okay, lass uns anfangen. Zuerst werden wir den Abschlussball schreiben. Erstellen Sie eine Benutzeroberfläche, die für Vertriebsanalyse-Software entwickelt wurde . Das hat zwei Hauptmonteure. Das erste ist das Verkaufsverfolgungs-Dashboard. Und das zweite sind Kundensegmentierungen, Visualisierungen Machen Sie das Design modern und interaktiv. Als Nächstes können Sie auswählen welche Art von App Sie entwerfen möchten Wenn Sie die Benutzeroberfläche für eine mobile App entwerfen möchten, klicken Sie hier. Wenn Sie die Benutzeroberfläche für eine Web-App entwerfen möchten, klicken Sie hier. Darüber hinaus können Sie auch ein Bild oder eine Skizze hochladen um sich inspirieren zu lassen. Klicken Sie dann auf Design generieren Okay, jetzt erstellt KI das UI-Design, und wir müssen diese Fragen beantworten Um eine umfassende Vertriebsanalyse-Software zu entwerfen, kann ich die folgenden zwei Bildschirme für Sie erstellen. Dashboard zur Vertriebsverfolgung. Dieser Bildschirm bietet also einen Überblick über die Verkaufsleistung mit wichtigen Kennzahlen und interaktiven Diagrammen. Und das zweite sind Visualisierungen der Kundensegmentierung Auf diesem Bildschirm werden Kundensegmente anhand verschiedener Visualisierungen Soll ich weitermachen und diese beiden Bildschirme für Sie entwerfen? Okay, jetzt wird KI das Design erstellen. Es wird ein paar Minuten dauern. Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange und ich freue mich sehr auf das Ergebnis. Nun, es hat nicht allzu lange gedauert, Leute. Es dauerte nur 1 Minute oder sogar weniger als 1 Minute. Okay, hier ist das UI-Design. Also das ist die Arbeit am Sales Analytics Desk. Wir haben einen Überblick über den Umsatz, den Gesamtumsatz, durchschnittlichen Verkaufswert, die Kunden, Verkäufe im Laufe der Zeit und die Verkäufe nach Regent Und hier sind die Visualisierungen der Kundensegmentierungen. Wir haben also die Verteilung der Kunden nach dem Wert der Kundenlebenszeit im Vergleich Kaufhäufigkeit und die wichtigsten Wert der Kundenlebenszeit im Vergleich zur Kaufhäufigkeit und die wichtigsten Kundensegmente nach Umsatz. Okay, sehr cool, Leute Wenn Sie dieses Design herunterladen möchten, ist es sehr einfach. Klicken Sie einfach auf diesen Download. Sie können den Code auch einsehen. Wie ihr sehen könnt, haben wir hier DDML-Code. Sie können den Code kopieren und den Code in VS-Code kompilieren Okay, als Nächstes werden wir das zweite KI-Tool ausprobieren. Der Name des Tools ist Figma. Wir werden also dieselbe Eingabeaufforderung verwenden. Also lass uns diesen Abschlussball kopieren und einfügen und ihn hier platzieren. Aber vorher sollten Sie sicherstellen, dass Sie sich bereits mit FICMA befassen Erstellen Sie ein Benutzeroberflächendesign für Vertriebsanalysesoftware , das zwei Hauptmerkmale hat Dashboard zur Vertriebsverfolgung und Kundensegmentierungen und Hsualisierungen Und lassen Sie uns auf Generieren klicken. Es dauert einige Minuten, bis VICMA das UI-Design generiert hat. Also wartet einfach Leute Hoffentlich dauert es nicht zu lange. Nun, es hat nicht allzu lange gedauert, Leute. Es dauerte nur eine Minute oder sogar weniger als eine Minute. Okay, hier ist das Verkaufs-Dashboard. Wir haben einen Überblick über den Gesamtumsatz, die Gesamtzahl der Bestellungen und Konversionsrate neuer Kunden. Sehr coole Benutzeroberfläche, Leute, Umsatztrends, Verkäufe nach Kategorien, Leistungskennzahlen, letzte Transaktionen, sehr vollständig. Und lassen Sie uns auf Kundensegmentierungen klicken. Wir haben Segmentverteilungen und einen Vergleich der Segmentmetriken. Eine detaillierte Segmentmetrik. Sehr umfassend. Und Sie können den Code auch einsehen. Klicken Sie einfach darauf und Sie können den Code sehen. Sie können den Code herunterladen und im FAS-Code kompilieren. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 4. Erstellen von Benutzeroberflächen-Design für Lebensmittelliefer-App mit Banani, Nano Banana und Manus: Holi Leute. Willkommen zurück zum Kurs In diesem Video werden wir die Benutzeroberfläche für die Lebensmittelliefer-App mithilfe von drei KI-Tools entwerfen Benutzeroberfläche für die Lebensmittelliefer-App . Der erste ist Banani. Der zweite ist Gemini und der dritte ist Okay, lass uns anfangen. Zuerst werde ich mich einloggen. Ich melde mich mit meinem Gmail-Konto an, also klicken wir auf Weiter mit Google. Wie ihr sehen könnt, habe ich mich erfolgreich angemeldet, und hier ist mein Dust Board. Okay, lass uns anfangen. Lass uns den Abschlussball schreiben. Erstellen Sie ein Benutzeroberflächendesign für die Lebensmittelliefer-App. Diese App hat drei Hauptinstallationen. Der erste ist der Produktmarktplatz. Mit Einkaufskarte. Wenn der Benutzer das Produkt kaufen möchte, kann er auf das Produkt klicken und es der Einkaufskarte hinzufügen. Die zweite Funktion ist Verfolgung der Paketzustellung in Echtzeit auf einer interaktiven Karte. Und die dritte Säule ist das Analytics-Dashboard für monatliche Ausgaben So kann der Benutzer seine Ausgaben für jeden Monat verfolgen und analysieren Okay, jetzt klicken wir auf Generieren, es dauert ein paar Minuten, vielleicht ein oder zwei Minuten. Wartet Leute. Hoffentlich dauert es nicht zu lange und ich bin so gespannt auf das Ergebnis. Nun, es hat nicht allzu lange gedauert. Es dauerte nur eine Minute oder sogar weniger als eine Minute. Okay, sieh dir das Einkaufs-Armaturenbrett an. Wir haben Produktkategorien, aktive Lieferverfolgung und monatliche Ausgaben. Schau dir das an. Sehr cool. Und hier ist eine weitere Alternative. Schau dir das an. Es ist relativ ähnlich, aber das Design ist ein bisschen anders. Und hier ist die dritte Option. Okay, sehr cool. Wenn Sie diese Bilder herunterladen möchten, klicken Sie einfach auf Exportieren. Und Sie können dieses Bild als PNG oder GPG exportieren. Es liegt ganz bei Ihnen und klicken Sie einfach auf Exportieren. Okay, jetzt werden wir das zweite KI-Tool ausprobieren. Also lass uns Jim und Andi öffnen. Und in diesem Fall werden wir das Nanobanana-Modell verwenden. Klicken wir also auf dieses Bild erstellen. Und ich werde dieselbe Aufforderung kopieren und einfügen. Also werden wir ein Benutzeroberflächendesign für die Lebensmittelliefer-App erstellen . Okay, lass uns auf Senden klicken. Okay, jetzt wird das Nano-Banana-Modell geladen. Es wird ein paar Minuten dauern, vielleicht ein oder zwei Minuten. Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Hier ist das Design. Okay, sieh dir das an. Wir haben drei Funktionen, richtig? Der Produktmarkt, die Verfolgung der Paketzustellung in Echtzeit und die Ausgabenanalyse. Das Brett. Schau dir das an. Sehr cool. Okay, jetzt werden wir das dritte KI-Tool ausprobieren. Der Name des Tools ist Manus. Und wir werden den Abschlussball kopieren und einfügen, also werden wir genau dieselbe Aufforderung verwenden und dann auf Design klicken Okay, jetzt klicken wir auf Generieren. Nun, es hat nicht allzu lange gedauert, Leute. Es dauerte nur 30 Sekunden oder sogar weniger als 30 Sekunden. Okay, lassen Sie mich ein bisschen heranzoomen . Also hier ist der erste Marktplatz für Fetter-Produkte. Und wie ihr hier sehen könnt, haben wir einen Einkaufswagen, so dass der Benutzer klicken kann und das Produkt automatisch in den Warenkorb gelegt wird automatisch in den Warenkorb gelegt Und die zweite Funktion ist die Sendungsverfolgung in Echtzeit. Dies ist das Lebensmittelgeschäft, und das ist Ihr Zuhause, und der Fahrer ist unterwegs, und Sie haben auch die geschätzte Ankunftszeit. Schau dir das an. Sehr cool, oder? Und hier ist der dritte fetter. Dashboard zur Ausgabenanalyse. So können Sie Ihre Ausgaben für jeden Monat analysieren Ihre Ausgaben für jeden Monat und Ihre Ausgaben auch nach Produktkategorien aufschlüsseln. Sehr cool. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 5. Entwerfen von UI-Design für E-Commerce-Websites mit Wind Frame: Holocaust, willkommen zurück zum Kurs. In diesem Video werden wir mithilfe von Wind Frame ein Benutzeroberflächendesign erstellen . Okay, also lass uns jetzt anfangen. Das erste, was Sie tun müssen, ist sich anzumelden. Klicken Sie also einfach auf Anmelden. Sie werden auf diese Seite weitergeleitet. Wie ihr sehen könnt, habt ihr zwei Möglichkeiten. Sie können sich mit Ihrem Github-Konto anmelden. Sie können sich auch mit Ihrem Gmail-Konto anmelden. Also werde ich mich mit meinem Gmail-Konto anmelden. Wie ihr sehen könnt, wurde ich zu meinem Dashboard weitergeleitet. Okay, jetzt werden wir ein neues Projekt erstellen. Klicken Sie also einfach auf Projekt erstellen. Sie müssen den Namen des Projekts eingeben. Okay, also werde ich es Benutzeroberflächendesign nennen. Und ich werde auf Projekt erstellen klicken. Okay, jetzt erstellt Wind Frame das Projekt. Und wie ihr sehen könnt, wurden wir auf die Bearbeitungsseite weitergeleitet. Okay, dieses Tool ist sehr einfach zu bedienen, Leute. Alles, was Sie tun müssen, ist, den Abschlussball zu schreiben dem beschrieben wird, wie die Benutzeroberfläche aussehen soll. Sie können Dinge wie Merkmale, Funktionen, Farben, Layout und Stile angeben . Okay, in diesem Beispiel werde ich Benutzeroberflächendesigns für die E-Commerce-Website erstellen . Okay, jetzt schreiben wir die Aufforderung. Produktkatalog, Seite für E-Commerce-Website mit moderatem ästhetischem Team-Layout. Und dunkler Hintergrund. Okay, das ist also meine Aufforderung. Klicken wir jetzt darauf. Der Vorgang könnte also ein paar Minuten dauern, Leute. Also warte einfach. Hoffentlich dauert es nicht zu lange. Ich freue mich sehr auf das Ergebnis. Okay, ich möchte nicht, dass dieses Video zu lang wird , Leute, also überspringe ich diesen Teil einfach und werde zurückkehren, sobald das Design der Benutzeroberfläche fertig ist, und ich werde es euch zeigen. In Ordnung, endlich ist das Design der Benutzeroberfläche fertig. Eigentlich hat es nicht allzu lange gedauert, Leute. Es dauerte nur 2 Minuten oder vielleicht sogar weniger als 2 Minuten. Okay, wie ihr sehen könnt, ist dies die Produktkatalogseite für unsere E-Commerce-Website. Hier gibt es etwa zwei Produktlisten. Schau dir das an. Sehr cool, oder? Wenn Sie mit dem Ergebnis nicht zufrieden sind, können Sie KI gerne bitten diese Benutzeroberfläche neu zu gestalten, sodass Sie den Abschlussball hier aufschreiben und einfach erklären können , welchen Teil Sie reparieren möchten Okay, jetzt klicke ich auf Zur Leinwand hinzufügen. Okay, jetzt werden wir ein weiteres Benutzeroberflächendesign mit Windframe erstellen . Also lass uns die Aufforderung schreiben. Dieses Mal werden wir also Benutzeroberflächendesigns für die Produkt-Checkout-Seite erstellen . Okay, lass uns den Abschlussball schreiben. Produkt-Checkout-Seite für die E-Commerce-Website. Stellen Sie sicher, dass Sie die Zahlungsmethode und die Zahlungsschaltfläche angeben. Okay, jetzt werde ich darauf klicken, sodass der Vorgang ein paar Minuten dauern kann. Also warte einfach. Hoffentlich dauert es nicht zu lange und ich freue mich sehr auf das Ergebnis. Okay, das UI-Design für die Produkt-Checkout-Pads ist also fertig. Seht euch das an, Leute. Sehr cool, oder? Okay, jetzt füge ich diese Produkt-Out-Pads zu Canvas hinzu. Klicken Sie also einfach auf Zu Canvas hinzufügen. Okay, also NX, lass uns auf Code klicken. Sie werden den Code für diese Benutzeroberfläche sehen können. Wenn Sie also Webentwickler oder Frontend-Entwickler sind, müssen Sie den Code nicht von Grund auf neu schreiben. Sie können diesen Code verwenden. Okay, zu guter Letzt werden wir dieses Projekt exportieren. Klicken Sie also einfach auf Exportieren. Okay, wie ihr sehen könnt, haben wir das Projekt erfolgreich exportiert. Sie haben drei Möglichkeiten. Die erste Option ist bei DML Die zweite Option ist React, und die dritte Option gibt es nur wenige Also wähle ich bei DML aus und klicke auf Datei herunterladen, richtig Wir haben die Datei erfolgreich heruntergeladen. Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 6. Entwerfen der Benutzeroberfläche für Marketplace-Website mit V0: Heilige Leute. Willkommen zurück zum Kurs. In diesem Video werden wir eine Benutzeroberfläche mit Firsal erstellen Okay, also lass uns jetzt anfangen. Das erste, was Sie tun müssen, ist sich anzumelden. Klicken Sie also einfach auf Anmelden. Sie können sich mit Ihrem Gmail-Konto anmelden. Sie können sich auch mit Ihrem Github-Konto anmelden. Okay, als Nächstes klicke ich auf Preise. Ich werde Ihnen zeigen, dass dieses Tool tatsächlich kostenlos ist. Wie ihr hier sehen könnt, bietet Viral einen kostenlosen Plan an. Offensichtlich gibt es einige Einschränkungen. Wenn es zum Beispiel um den kostenlosen Plan geht, haben Sie nur 200 Credits pro Monat, das ist also Ihr Höchstlimit. Okay. Gehen wir jetzt zurück zur Homepage. Wenn Sie nach unten scrollen, können Sie Benutzeroberflächendesigns sehen , die mit FSL erstellt wurden Schau dir das an. Okay, lassen Sie uns ein Beispiel wählen. Lass uns auf dieses klicken. Okay, wie ihr sehen könnt, ist das der Abschlussball, der verwendet wurde , um dieses UI-Design zu generieren, ein Dashboard für die Datenanalyse industrieller KPIs Seht euch das an, Leute. Sehr cool, oder? Alles, was Sie tun müssen, ist den Abschlussball zu schreiben und Ihr Projekt zu beschreiben. Sie können Dinge wie Merkmale, Funktionen, Stile, Layout, Farbe usw. angeben , und Fir SL generiert Ihnen ein wunderschönes Benutzeroberflächendesign Okay, also lasst uns anfangen, Leute. Okay, also wir werden den Abschlussball schreiben In Ordnung, also in diesem Beispiel werde ich die Benutzeroberfläche für die E-Commerce-Website erstellen Benutzeroberfläche für die E-Commerce-Website Okay, jetzt schreiben wir die Eingabeaufforderung. E-Commerce, Marktplatz mit Produktkatalog und Preisschildern. Okay, jetzt klicken wir auf Senden. Der Vorgang könnte ein paar Minuten dauern , Leute, also wartet einfach. Hoffentlich dauert es nicht zu lange. Wie ihr jetzt sehen könnt, entwirft Versal die Benutzeroberfläche Also warte einfach. Alles klar. Endlich ist das Design der Benutzeroberfläche fertig. Okay, sieh dir diesen Typen an. Sehr cool, oder? Das ist also unsere E-Commerce-Website. Das ist also die Hub-Seite, Leute. Wie ihr sehen könnt, haben wir hier die Suchleiste, und das ist wie die Produkt-Landingpage Das sind die Produktbeschreibungen. Und wie ihr sehen könnt, ist dies der Produktkatalog. Schau dir das an. Scrollen wir ein bisschen nach unten. Wie ihr sehen könnt, gibt es die Preisliste und auch den Chart-Button. Also, wenn der Kunde dieses Produkt kaufen möchte, dann wird er oder sie auf diese Schaltfläche klicken, oder? Okay, also lass uns auf das andere UI-Design klicken. Das ist ein weiterer Produktkatalog, Leute. Sehr cool, oder? Wenn Sie dieses Design also in Code umwandeln möchten , können Sie darauf klicken. Wie ihr sehen könnt, habt ihr zwei Möglichkeiten. Die erste ist React und die zweite ist bei CML Sie können diesen Code also kopieren und einfügen und diesen Code den Webentwicklern oder Frontend-Entwicklern geben , dann die Website für Sie erstellen Okay, sehr cool, oder? Und zu guter Letzt, wenn du dieses Projekt hören willst, kannst du hier klicken und es werden automatisch die Links zu diesem Projekt kopiert, oder? Und du kannst es anderen Leuten vortragen. Okay, Leute, ich glaube, das ist es. Das ist alles, was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 7. Entwerfen von Webinterfaces mit Teleport HQ: Heiliger Geist, willkommen zurück zum Kurs. In diesem Video werden wir das Benutzeroberflächendesign für eine Website mithilfe von Teleport bei Q erstellen . Okay, jetzt fangen wir Das erste, was Sie tun müssen, ist sich anzumelden. Klicken Sie also einfach auf Get Started. Sie werden zu diesem Spaten weitergeleitet. Wie ihr sehen könnt, habt ihr zwei Möglichkeiten. Sie können sich mit Ihrem Gmail-Konto anmelden. Sie können sich auch mit Ihrem Github-Konto anmelden , es liegt also ganz bei Ihnen. Okay, in diesem Fall werde ich mich mit meinem Gmail-Konto anmelden. Okay, das ist also Teleport atsqdbg. Okay, ihr habt also mehrere Möglichkeiten, Leute. Sie können bei Null anfangen. Sie können eine dieser verfügbaren Vorlagen auswählen und sie nach Ihren Wünschen anpassen. Wie ihr sehen könnt, gibt es hier viele Vorlagen. Sie können das Webinterface auch mithilfe von KI generieren, und genau das werden wir in diesem Video tun. Okay, klicken Sie einfach auf Start Building. Dieses Tool ist sehr einfach zu bedienen. Sie müssen lediglich die Aufforderung schreiben, in der Ihr Projekt beschrieben wird. Und in weniger als einer Minute wird Teleport AdsQ Ihnen eine hochwertige Benutzeroberfläche für unsere Websites generieren Ihnen eine hochwertige Benutzeroberfläche für unsere Okay, in diesem Beispiel werde ich eine Landingpage für meine Web-Scrapping-Software erstellen Landingpage für meine Web-Scrapping-Software Okay, jetzt schreiben wir die Eingabeaufforderung. Websites für Web-Scrapping. Software. Okay, jetzt klicke ich einfach auf Weiter. Okay, also genau hier müssen Sie das Team für Ihre Website auswählen. Wie ihr sehen könnt, gibt es verschiedene Optionen: kreativ, kulturell, Standard, eBook, Echo, Finanzen, Kinder, Ernährung, Sport, Startup und Yoga. Okay, also wähle ich Start Up aus. Also wird das Team so aussehen. Also das ist wie der Lichtmodus, Leute. Wenn Sie in den Dunkelmodus wechseln möchten, klicken Sie einfach darauf. Es liegt also ganz bei euch. In diesem Fall wähle ich den Dunkelmodus. Ich denke, es sieht besser aus. Okay, jetzt klicken Sie einfach auf Website generieren. Der Vorgang könnte also ein paar Minuten dauern, Leute. Also warte einfach. Hoffentlich dauert es nicht zu lange und ich bin sehr gespannt auf das Ergebnis. Okay, also warte einfach. Wie ihr lesen könnt, wird der Inhalt generiert. Okay, fast fertig. Okay, als Nächstes klicken Sie einfach. Gehe auf die Seite. Okay, das ist also die Bearbeitungsseite, Leute. Jetzt klicke ich auf Vorschau. Okay, Sie werden also zur Vorschauseite weitergeleitet. Okay, also warte einfach. Okay, los geht's. Also das ist unsere Website. Der Name der Website ist Scraper. Okay, ohne die Macht von Web Scraping. Wie ihr hier sehen könnt, haben wir etwa fünf Seiten, Hauptfunktionen, Funktionsweise, Preise und Kontakt Genau hier befindet sich eine Schaltfläche „ Jetzt loslegen“. Und wenn Sie ein wenig nach unten scrollen, gibt es etwa vier Funktionen anpassbare Datenextraktionen, geplante Verschrottung, Proxy-Sport und Datenqualitätssicherung Sehr cool, oder? Okay, das ist also wie die Preisfindung, nicht der richtige Plan für Ihren Web-Scrapping-Bedarf Kostenloser Basic- und Pro-Plan hier. Scrollen wir noch einmal nach unten. Okay, das ist also wie den Abschnitten mit häufig gestellten Fragen. Okay, sehr cool, Leute. gibt es einen Login-Button und hier oben auch einen Registrieren-Button. Okay, jetzt werde ich diesen Schritt schließen. Sie können die UID-Zeichen gerne bearbeiten. Sie können die Farbe ändern. Sie können den Text bearbeiten. Okay, zum Schluss werde ich dir den Code zeigen. Also klicken Sie einfach auf den Code. Wie ihr sehen könnt, gibt es zwei Dateien. Das erste ist JavaScript und das zweite ist CSS. Wenn Sie das Projekt also fett formatieren möchten, können Sie diesen Code verwenden, sodass Sie nicht bei Null anfangen müssen, oder? Okay, Leute, ich glaube, das ist es. Das ist alles, was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 8. Screenshot in UI-Design mit Uizard konvertieren: Heiliges Gas. Willkommen zurück zum Kurs. In diesem Video werden wir einen Screenshot mithilfe von UIZR in ein bearbeitbares Benutzeroberflächendesign umwandeln mithilfe von UIZR in ein bearbeitbares Benutzeroberflächendesign Okay, der Prozess wird also sehr einfach sein. Sie müssen lediglich einen Screenshot einer Website oder einer mobilen Anwendung machen. Laden Sie dann den Screenshot auf uISRT hoch. Danach wird UISRT das in Benutzeroberflächendesigns umwandeln, die Sie in Benutzeroberflächendesigns umwandeln Okay, also lass uns anfangen. Jetzt klicke ich auf Mit dem Screenshot starten und wir werden auf diese Seite weitergeleitet. Okay, also wartet einfach, Leute. Das Laden könnte eine Weile dauern. Ordnung, Leute, jetzt machen wir einen Screenshot von dieser Website Der Name der Website ist Null. Für diejenigen unter Ihnen, die nicht wissen, was Null ist, ist Zi einer der größten Immobilienmarktplätze, auf dem Menschen Immobilien zum Verkauf und auch Immobilien zur Miete finden können . Sie können jedoch gerne Screenshots von anderen Websites oder mobilen Anwendungen machen , die Sie möchten, oder? Okay, jetzt machen wir den Screenshot. Okay, also lass es uns machen. Los geht's. Okay, ich habe gerade den Screenshot gemacht. Also werde ich dieses Bild auf meinem Desktop speichern und zurück zu UIZrt gehen Okay, vorerst werde ich diesen Tab schließen. Als Nächstes laden wir den Screenshot hoch. Klicken Sie also einfach auf Screenshot-Scanner und dann auf Hochladen. Okay, also ich werde diesen Screenshot hochladen, Leute, klickt einfach auf Öffnen. Okay, jetzt wird das Bild hochgeladen. Der Vorgang kann ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, also warte einfach. Okay, das nächste, was wir tun werden , ist die Größe des Ausgabebildschirms auszuwählen Wie ihr sehen könnt, habt ihr drei Optionen: Handy, Tablet und Descop Ich werde Descop auswählen. Und jetzt klicken wir auf Import. Okay, jetzt importieren wir diesen Screenshot. Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Okay, jetzt werden wir diese Benutzeroberfläche bearbeiten. Okay, es gibt also viele Dinge, die ihr tun könnt. Sie können diesen Text beispielsweise bearbeiten. Sie können hier schreiben , was Sie wollen. Sie können auch die Farbe der Schrift ändern. Wie ihr sehen könnt, ist die Farbe im Moment Blau, aber wenn ihr sie in eine andere Farbe ändern wollt, vielleicht Grün, wählt einfach Grün, oder? Los geht's. Okay, Sie können auch die Farbe dieser Schaltfläche ändern, also klicken Sie einfach auf dieses Symbol, und im Moment ist es immer noch blau. Nehmen wir an, ich möchte die Farbe auf Rot ändern. Also klicken Sie einfach darauf. Okay, los geht's. Und Sie können KI sogar verwenden , um Ihnen einen Vorschlag zu machen. Klicken Sie also einfach auf „Vorschlagen“. Wie ihr hier, generiert IZR neue Inhalte nur für euch Es kann ein paar Sekunden dauern. Okay, also wartet einfach, Leute hoffentlich dauert es nicht zu lange. Okay, abgesehen davon kannst du dieses Bild auch durch dein eigenes Bild ersetzen, oder? Sie können also auf dieses Bild klicken und einfach auf diese Baumpunkte klicken und sie einfach ein wenig scrollen. Aber du kannst dein eigenes Bild hochladen, oder? Darüber hinaus können Sie auch die Positionen und die Größe des Bildes ändern . Okay, jetzt werde ich das schließen, und als Nächstes werden wir diese Benutzeroberfläche mithilfe von KI neu gestalten Also klicken Sie einfach darauf, stellen Sie sicher, dass Sie Team generieren auswählen, und stellen Sie auch sicher, dass Sie Abschlussball auswählen, richtig? Okay, lass uns jetzt den Zacken schreiben. Gestalte diese Benutzeroberfläche neu. Mit einem dunkleren und moderneren Team Okay, jetzt werde ich auf Generieren klicken. Sie können auch einige dieser Keywords auswählen. Also werde ich Dirt und Modern wählen. Okay, klicken Sie einfach auf Generieren. Okay, also wartet einfach, Leute, der Vorgang könnte ein paar Minuten dauern. Hoffentlich dauert es nicht zu lange. Wie ihr sehen könnt, hat Izard die Benutzeroberfläche erfolgreich neu gestaltet Tatsächlich dauerte der Vorgang etwas länger als ich Es hat fast 3 Minuten gedauert, Leute. Okay, jetzt klicken Sie einfach auf Anwenden. Okay, wie ihr jetzt sehen könnt bewirbt ihr euch für das neue Team, oder? Los geht's. Schau dir das an. Sehr cool, oder? Okay, wenn Sie diese Benutzeroberfläche jetzt exportieren möchten , klicken Sie einfach auf Exportieren. Und ich werde dieses Bild im PNG-Format herunterladen. Also klicken Sie einfach auf PNG und klicken Sie einfach auf Exportieren, oder? Okay, wie ihr jetzt sehen könnt, laden wir das Bild herunter. Also warte einfach. Also gut, wir haben das Bild erfolgreich heruntergeladen. Los geht's. In Ordnung, Leute, ich glaube, das ist es Das ist alles, was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 9. Konvertieren von Skizzen in UI-Design mit Visily AI: Holgays, willkommen zurück zum Kurs. In diesem Video werden wir Skats mithilfe von PhiSle AI in Benutzeroberflächendesign umwandeln mithilfe von PhiSle AI in Benutzeroberflächendesign In diesem Beispiel werden wir diese SCATS-App verwenden, eine App zur Verwaltung von Fußbeständen Sie können beliebige handgeschriebene Skets verwenden und das Bild hochladen, und die KI wird in der Lage sein, dies in UI-Design umzuwandeln dies in UI-Design umzuwandeln Okay, lass uns anfangen. Zuerst werde ich mich einloggen. Also lass uns das anklicken. Ich werde mich mit meinem Gmail-Konto anmelden. Sie können sich aber auch mit Ihrem Github-Konto anmelden. Es liegt ganz bei dir. Okay, es wird ein paar Sekunden dauern. Wie ihr sehen könnt, habe ich mich erfolgreich angemeldet. Okay, jetzt klicken wir auf Willkommen bei Facile und dann auf Start with AI Und du wirst auf diese Seite weitergeleitet. Okay, zuerst werden wir das Bild hochladen. Also lass uns das anklicken. Und ich werde diese Skizze hochladen. Lass uns auf Öffnen klicken und wir werden den Abschlussball schreiben diese Skizze in ein Benutzeroberflächendesign umwandeln. Zum besseren Verständnis ist dies Benutzeroberfläche der Foot Inventory Management-App. Okay, das ist also mein Abschlussball, und lass uns auf Generieren klicken. Okay, es wird ein paar Sekunden dauern. Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Ich freue mich sehr auf das Ergebnis. Nun, es hat nicht allzu lange gedauert. Es dauerte nur 2 Minuten oder sogar weniger als 2 Minuten. KI generierte zwei verschiedene Stile, Stil eins und Stil zwei. Aber lassen Sie uns zunächst einen Blick auf Stil eins werfen. Okay, los geht's. Essenszeug. Wir haben drei verschiedene aktuelle Einkaufslisten und Rezepte. Frits Pantry und wir haben auch die Schaltfläche Analysieren. Schau dir das an. Und wir haben auch Ablaufwarnungen. Und Sie können auch auf diese Anzeigenschaltfläche klicken , um weitere Lebensmittel hinzuzufügen. Okay, schauen wir uns jetzt auch den Stil an. Lass uns das anklicken. Es ist also im Grunde dasselbe. Die Struktur ist dieselbe, aber die Farbe ist unterschiedlich. Um ehrlich zu sein, bevorzuge ich den ersten Stil, weil ich denke, dass das Design besser für eine App zur Verwaltung von Lebensmittelbeständen geeignet ist . Sie können auch auf Openboard klicken, sodass Sie zur Bearbeitungsseite weitergeleitet werden Okay, Leute, ich glaube, das ist es. Das ist alles was du wissen musst. Wir sehen uns im nächsten Video. Tschüss. 10. Erstellen einer einfachen Anmeldeseite auf Figma: Heiliges Gas, willkommen zurück zum Kurs. In diesem Video werden wir mehr über ICMA erfahren. Für diejenigen unter Ihnen, die bereits mit ICMA vertraut sind, dieses Video gerne überspringen Wenn Sie jedoch neu bei ICMA sind und mehr erfahren möchten, stellen Sie sicher, dass Sie sich dieses Video genau ansehen Okay, also lass uns anfangen. Das erste, was Sie tun müssen, ist sich anzumelden. Klicken Sie also einfach auf Kostenlos loslegen. Okay, also werde ich mich mit meinem Gmail-Konto anmelden, also klicken Sie einfach auf Weiter mit Google. Wie ihr sehen könnt, wurde ich zu meinem Daskbk weitergeleitet. Ich habe also mehrere Projekte hier auf Figma. Okay, jetzt werden wir eine neue Datei erstellen, oder? Klicken Sie also einfach auf Design-Datei. Und klicken Sie einfach auf Neues Design erstellen. Okay, wie ihr sehen könnt, wurden wir zur Bearbeitungsseite weitergeleitet. Okay, in diesem Video werde ich Ihnen Schritt für Schritt beibringen, wie Sie eine einfache Benutzeroberfläche für eine Anmeldeseite entwerfen . Okay, also lass uns anfangen. Okay, also werde ich Frame auswählen. Okay, das wird also die mobile App sein, oder? Als Nächstes wähle ich ein Rechteck und wir werden drei Rechtecke erstellen Der erste ist also für den Benutzernamen. Der zweite ist für die E-Mail und der dritte ist für das Passwort. Okay, Sie können also zwei weitere Rechtecke manuell erstellen, aber in diesem Fall werde ich das einfach kopieren und einfügen, oder? Okay, los geht's. Okay, als Nächstes werde ich hier unten einen weiteren Break-Winkel erstellen, und das wird eine Anmeldeschaltfläche sein. Okay, cool. Als Nächstes werden wir diesem UI-Design Text hinzufügen. Okay, klicken Sie einfach auf Text Okay, also werde ich so etwas eingeben. Melde dich an. Seite, es ist zu klein, also werden wir es ein bisschen größer machen, oder? Wie ihr sehen könnt, ist die Handygröße 12, also werde ich sie auf 35 ändern. Okay, los geht's. Und ich werde es in die Mitte stellen. Okay, sehr cool. Als Nächstes füge ich auch Text hinzu, um ein Rechteck zu essen. Klicken wir also auf dieses Symbol. Okay, also werde ich die Telefongröße 35-20 ändern. Okay, lass uns hier etwas schreiben. Vollständiger Name. Okay, also werden wir das kopieren und einfügen. Okay, das wird also eine E-Mail-Adresse sein. Und das dritte wird ein Passwort sein. Okay, wenn der Benutzer sich anmelden möchte, muss er seinen vollständigen Namen, seine E-Mail-Adresse und auch sein Passwort eingeben. Okay, als Nächstes füge ich dieser Schaltfläche Text hinzu. Also lass uns das anklicken. Okay, also werde ich „Anmelden“ eingeben. Und wir werden das in den Mittelpunkt stellen . Okay, los geht's. Also, wenn der Benutzer sich registrieren möchte, muss er oder sie auf diese Schaltfläche klicken, oder? Okay, als Nächstes werde ich Größe und die Farben ändern, Leute. Okay, also ich werde das blockieren. Los geht's. Wie ihr sehen könnt, sind der Bäcker und die Farbe weiß, also werde ich sie auf hellblau ändern. Okay, ich denke, das ist gut genug. Seht euch das an, Leute. Sehr cool, oder? Sie können auch die Farbe dieser Schaltfläche ändern. Wie ihr sehen könnt, ist die Farbe im Moment Grau, also werde ich die Farbe auf vielleicht hellgrün wie folgt ändern . Okay, es sieht ziemlich cool aus. Okay, Leute, so gestaltet man also die Benutzeroberfläche manuell auf VIC 11. Benutzerflussdiagramm mit Miro erstellen: Hallo, Leute. Willkommen zurück zum Kurs. In diesem Video werden wir den Benutzerfluss mithilfe von Miro entwerfen Der Benutzerfluss ist ein sehr wichtiger Bestandteil des Benutzererlebnisdesigns Achten Sie also darauf, diesem Video besondere Aufmerksamkeit zu schenken Okay, lass uns anfangen. Zuerst werde ich mich einloggen. Klicken wir also auf Gehe zum Dashboard und ich melde mich mit meinem GML-Konto Und lassen Sie uns auf Weiter klicken. Wie ihr sehen könnt, habe ich mich erfolgreich angemeldet und hier ist mein Dashboard. Okay, jetzt klicken wir auf AI Playground und Sie werden zur Bearbeitungsseite weitergeleitet. Und lass uns auf dieses Symbol klicken. Und lass uns die Eingabeaufforderung schreiben. Erstellen Sie ein Benutzerflussdiagramm für die AI Travel Planner-App. In diesem Beispiel werden wir also den Benutzerfluss für den KI-Reiseplaner entwerfen . Diese App hat drei Hauptmerkmale. Der erste ist der Finder für günstige Flugtickets und Hotels. Die zweite Fessel ist die Erfassung des Reisebudgets, und die dritte Fessel ist der KI-Reiseplangenerator Okay, jetzt klicken wir auf Generieren. Es wird ein paar Sekunden dauern, vielleicht 20 oder 30 Sekunden. Also einfach so, wie es läuft. Hoffentlich dauert es nicht zu lange. Okay, hier ist das Diagramm. Ich werde das schließen. Okay, los geht's. Und lassen Sie uns auf „ Zu Canvas hinzufügen“ klicken. H werfen Sie einen Blick auf dieses Benutzerflussdiagramm. Der erste ist also einloggen. Nachdem sich der Benutzer angemeldet hat, muss der Benutzer einen dieser drei Filter auswählen. Der erste ist der Finder für günstige Flüge und Hotels. So kann der Benutzer nach dem günstigsten Hotel und den günstigsten Flugtickets suchen . Dann kann der Benutzer die Ergebnisse anzeigen und der Benutzer kann auch Filter anwenden. Und am Ende des Vorgangs kann der Benutzer den Flug und auch das Hotel buchen. Das ist also der erste Monteur. Der zweite Monteur ist die Erfassung des Reisebudgets. So kann der Benutzer das Budget festlegen. Der Benutzer wird in der Lage sein, Ausgaben hinzuzufügen, und das System überprüft , ob die Ausgaben über dem Budget Anschließend erhält der Benutzer Benachrichtigungen oder Benachrichtigungen Und hier ist der dritte Monteur, ein KI-Reiseroutengenerator. Zunächst gibt der Benutzer also die Präferenzen ein und gibt auch die Reiseziele Dann wird KI die Reiseroute generieren. Dann wird der Benutzer die Reiseroute überprüfen oder bearbeiten. Und hier ist der letzte Schritt. Der Benutzer wird die Reiseroute speichern. Okay, Leute, das ist der Benutzerfluss dieser App. Wenn Sie ein UIUX-Designer sind, ist es sehr wichtig, dass Sie den Benutzerfluss Ihrer App verstehen Es ist sehr wichtig, dass Sie verstehen, wie Ihre App verwendet wird Okay, ich denke, das ist es. Das ist alles, was du wissen musst. Wir sehen uns im nächsten Video. 12. Analyse der Benutzeraufmerksamkeit mit KI: Heiliges Gas, willkommen zurück auf der Titelseite. In diesem Video werden wir die Aufmerksamkeit der Benutzer mithilfe dieses Figma-Plugins analysieren Der Name des Plugins ist Attention Inside. Wie ihr hier nachlesen könnt, verbessert die Designleistung mit Pre-Launch-Analysen. Dieses KI-Tool kann also sofort vorhersagen , worauf Benutzer achten werden , wenn sie sich mit Ihren Designs beschäftigen, sodass Sie Zeit sparen und Korrekturen nach dem Start vermeiden können Zeit sparen und Korrekturen nach dem Start vermeiden Okay, also lass uns jetzt anfangen. Das erste, was Sie tun müssen, ist nach oben zu klicken und zu beenden. Wie ihr sehen könnt, habe ich hier mehrere Dateien, also werde ich diese Datei-Gaming-App auswählen. Wie ihr sehen könnt, wurde ich weitergeleitet, um meine Bearbeitungsseite zu reparieren. Okay, als Nächstes müssen Sie den Frame auswählen, den Sie analysieren möchten. Okay, also lass es uns machen. In diesem Fall werde ich zum Beispiel diesen Frame analysieren, also wähle einfach diesen Frame aus. Und als Nächstes klicken Sie einfach auf Ausführen und wählen Sie Design analysieren. Wie ihr sehen könnt. Dieses Figma-Plugin bietet verschiedene Funktionen wie Desktop, Handy, Poster, Verpackungsregale und Marketingmaterial Okay, also werde ich Deskcop und Landing auswählen, denn wie ihr sehen könnt, ist das wie eine Anmeldeseite, also werde ich das als Landing Page betrachten Also klicken Sie einfach darauf Okay, wie Sie jetzt sehen können, analysiert die innere Aufmerksamkeit diesen Frame, also warten Sie einfach ab Hoffentlich dauert es nicht zu lange. Okay, also los geht's. Das ist das Ergebnis. Übrigens, wenn Sie kein internes Konto auf sich aufmerksam gemacht haben , müssen Sie eines erstellen. Gehen Sie also einfach auf diese Website, oder? Und klicken Sie einfach auf Jetzt kostenlos testen. Sie müssen sich mit Ihrem Gmail-Konto anmelden. Okay, jetzt gehen wir zurück zu FICMA. Wie ihr sehen könnt, hat KI nach Durchführung der Analyse diese Hitmap generiert Basierend auf dieser Hitmap scheint es, als ob sich die Aufmerksamkeit der Benutzer hauptsächlich auf diese beiden Teile konzentriert Okay, du kannst also auch die Fokuskarte fühlen. Kontrast-Karte. Wenn Sie also Ihre Benutzeroberfläche entwerfen, sollten Sie sich darauf konzentrieren, richtig? Und hier unten habe ich auch den Fokuswert angegeben. Wie ihr anhand des Focus-Scores sehen könnt, haben wir 100 erreicht, was sehr gut ist. Sie fragen sich vielleicht, was Fokicore ist. Es misst also den Grad der Aufmerksamkeitskonzentration in Ihrem Bild Okay. Und für die optimale Klarheit haben wir 77, was meiner Meinung nach auch ziemlich gut ist, Leute. Okay, als Nächstes klicke ich auf More Inside Okay, also müssen wir uns anmelden. Wie ihr sehen könnt, habt ihr zwei Möglichkeiten. Sie können sich mit Ihrem Facebook-Konto anmelden. Sie können sich auch mit Ihrem Gmail-Konto anmelden , es liegt also ganz bei Ihnen. Okay, in diesem Fall melde ich mich mit meinem Gmail-Konto an. Okay, wie ihr sehen könnt, wurden wir zum Attention Inside Dashboard weitergeleitet. Okay, also klicken Sie einfach darauf. Sie können die Analyse herunterladen. Also klicken Sie einfach darauf. Als Nächstes klicken Sie einfach auf aktuelle Ansicht. Okay, also wartet einfach, Leute. Es könnte ein paar Sekunden dauern. In Ordnung. Wie ihr sehen könnt, haben wir die Hitmap erfolgreich heruntergeladen. Okay, also lass uns das öffnen. Okay, sieht sehr cool aus. Als Nächstes werden wir den Bericht herunterladen. Okay, klicken Sie einfach auf Bericht abrufen. Also warte einfach. Ich könnte ein paar Sekunden brauchen. Okay, Sie müssen also das Dateiformat auswählen. Sie haben zwei Möglichkeiten. Die erste ist PDF und die zweite ist PowerPoint. Ich werde PDF auswählen. Okay, jetzt generiert es den Bericht. Also wartet einfach, Leute. Hoffentlich dauert es nicht zu lange. Okay, jetzt laden wir die PDF-Datei herunter. Also warte einfach. Okay, los geht's. Wir haben den Bericht erfolgreich heruntergeladen. Ordnung, Leute, ich glaube, das ist es. Das ist alles, was du wissen musst Ich werde euch im nächsten Video sehen dem wir Untersuchungen zur Nutzererfahrung durchführen werden . Ich sehe euch dort. Tschüss. 13. Durchführung von UX-Recherchen mit UX Pilot: Hallo Leute. Willkommen zurück zum Kurs. In diesem Video werden wir mithilfe von UX Pilot Untersuchungen zur Nutzererfahrung durchführen. Okay, es gibt also viele Dinge, die ihr tun könnt. Also die erste ist Wireframe generieren. Sie können Text auch in „Innen“ umwandeln. UX Pilot bietet auch AIB UX Design Review, sodass Sie Ihr UI-Design hochladen können Dieses Tool analysiert Ihr Design automatisch und gibt Ihnen Empfehlungen Sie können benutzerdefinierte Workshops und vieles mehr erstellen. Und macht euch keine Sorgen, Leute. Die Nutzung des Ladens ist völlig kostenlos. Okay, also werde ich Ihnen die Preisbereiche zeigen. Los geht's. Wie ihr sehen könnt, bietet euer Pilot einen kostenlosen Tarif an. Offensichtlich gibt es einige Einschränkungen wenn es um den kostenlosen Plan geht. Sie können beispielsweise nur eine Vorschau für die Benutzerinterviews erhalten . Sie können nur eine Vorschau für das Designinterview erhalten. Und Sie können nur fünf UX-Vorlagen haben. Stellen Sie also sicher, dass Sie sich dieser Einschränkungen voll bewusst sind . Okay, also lass uns jetzt anfangen. Das erste, was Sie tun müssen, ist sich anzumelden, also klicken Sie einfach auf Kostenlos starten. Sie werden auf diese Seite weitergeleitet. Okay, ich werde mich mit meinem Gmail-Konto anmelden , also klicken Sie einfach darauf. Wie ihr sehen könnt, wurde ich zu meinem Dashboard weitergeleitet. Okay, in diesem Video werden wir uns hauptsächlich auf die Designüberprüfung konzentrieren. Okay, also UX-Designüberprüfung, verbessern Sie Ihr Design, verbreiten Sie Kreativität mit frischen Ideen und verbessern Sie Ihre UX-Fähigkeiten mit KI-basierten Designprüfungen Okay, wenn Sie also eine Analyse der Benutzererfahrung durchführen , Ihr Hauptziel darin, das idealste Design für Ihre Kunden zu finden, oder? Sie möchten sicherstellen , dass die Nutzer Ihrer App oder Ihrer Websites die bestmögliche Erfahrung machen, wenn sie mit Ihrer App oder Ihrer Website interagieren. Und genau das werden wir in diesem Video tun. Okay, dieses Tool ist also sehr einfach zu bedienen. Alles was Sie tun müssen, ist das Design hochzuladen. Okay, wenn Sie sich erinnern, anhand der vorherigen Videos haben wir anhand der vorherigen Videos mehrere UI-Designs erstellt. Okay, in diesem Beispiel werde ich das von Musso AI erstellte Design verwenden Also werde ich das Bild hochladen. In Ordnung. Sie können jederzeit die gewünschten Designs hochladen . Es liegt ganz bei dir Okay, öffne einfach meinen Ordner. Okay, los geht's. Und ich werde auf Öffnen klicken. Okay, jetzt wird das Design hochgeladen. Also warte einfach. Der Vorgang kann ein paar Sekunden dauern. Hoffentlich dauert es nicht zu lange. Okay, los geht's. Okay, jetzt klicke ich auf Bewertung starten. Jetzt wird KI dieses Design analysieren. Und KI wird uns Empfehlungen geben, oder? So verbessern Sie die Benutzererfahrung. Okay, also wartet einfach, Leute. Die Überprüfung könnte ein paar Minuten dauern. Hoffentlich dauert es nicht zu lange. Und ich freue mich sehr, die Rezension zu lesen. Okay, los geht's. Okay, lass uns jetzt die Rezension lesen. Erstens haben wir Klarheit und Kohärenz. Der CTA- oder Call-to-Action-Schaltfläche, Chatten starten, fehlt also an Kontexten Erwägen Sie eine Umformulierung, um einen Gaming-Chat oder ähnliches zu starten Gaming-Chat oder ähnliches , um eine Verbindung zum angebotenen Dienst herzustellen unseren Quizabschnitten wird der Zweck anhand einer Unterüberschrift verdeutlicht , in der die bereitgestellten Oberflächen erläutert Für die Kurzanleitung zur Einrichtung müssen wir erklären, welche Funktionen von Linkin zu einer detaillierteren Anleitung oder zur Erläuterung der Einrichtungsschritte angezeigt werden können einer detaillierteren Anleitung oder zur Erläuterung der Einrichtungsschritte Wir sollten also nicht davon ausgehen, dass die Benutzer mit der Benutzeroberfläche vertraut sind, oder? Und schließlich müssen wir einen konsistenten ikonografischen Stil für benutzerdefinierte Avatare, Sprach- und Text-Chat, Game-Sensing und Live-Streaming sicherstellen einen konsistenten ikonografischen Stil für benutzerdefinierte Avatare, Sprach- und Text-Chat, , um die visuelle Konsistenz aufrechtzuerhalten Okay, das sind also Empfehlungen in Bezug auf Klarheit und Konsistenz Lassen Sie uns nun den Überblick über die visuelle Hierarchie lesen. Okay, zunächst müssen wir den Kontrast des Navigationstextes, der Dashboard-Funktionen usw. gegenüber dem Hintergrund erhöhen den Kontrast des Navigationstextes, der , um die Lesbarkeit zu verbessern Es wird also empfohlen, eine andere Farbe zu verwenden. Okay, jetzt kommen wir zum zweiten. Treten Sie den Abenteuer-Abschnitten Wir müssen Schaltfläche „ Erste Schritte“ von der Schaltfläche „Chatten starten “ unterscheiden, um zu unterscheiden, ob Bitwin einen Chat startet und sich als neuer Benutzer anmeldet Okay, vielleicht wird es dasselbe sein. Benutze einfach eine andere Farbe. Und schließlich müssen wir für die Registrierungssitzungen den Abstand zwischen den Google-Anmeldeoptionen und den alternativen E-Mail-Anmeldeoptionen vergrößern Google-Anmeldeoptionen und den alternativen E-Mail-Anmeldeoptionen , um die physische Trennung zu verbessern Ordnung, Leute, das sind ein paar Empfehlungen, die Sie berücksichtigen müssen , wenn Sie die Nutzererfahrung Ihrer App oder Ihrer Website verbessern möchten die Nutzererfahrung Ihrer App oder Ihrer Website 14. Schlussbemerkung und Zusammenfassung: Holi Leute. Willkommen zurück zum Kurs In diesem Video werde ich alles zusammenfassen, was wir in diesem Kurs gelernt haben, und ich werde auch Tipps und Tricks geben, wie die Qualität Ihres UI-Designs verbessern Okay, fangen wir mit dem ersten Thema an, der Benutzerforschung Sie müssen Nutzerforschung betreiben, um die Bedürfnisse, Verhaltensweisen und Vorlieben Ihrer Zielgruppe zu verstehen . Diese Erkenntnisse dienen als Grundlage für Designentscheidungen und stellen sicher, dass die Benutzeroberfläche den Erwartungen der Benutzer entspricht Okay, zunächst müssen Sie entscheiden, wer Ihre Zielgruppe ist Wenn Sie beispielsweise ein Vertriebsanalysetool entwickeln, sind Ihre Zielgruppe offensichtlich Vertriebsprofis. Sie müssen Fragen wie diese stellen. Was ist für Vertriebsprofis die größte Herausforderung bei der Analyse von Vertriebsdaten? Welches zusätzliche Tool kann entwickelt werden, um ihnen bei der Analyse von Verkaufsdaten zu helfen? Das sind also Fragen , die Sie stellen müssen. Okay, gehen wir zurück zur Mindmap und lassen Sie uns über das zweite Thema sprechen, Usability-Tests. Sie müssen Usability-Tests mit echten Benutzern durchführen , um Ihr Feedback zur Benutzeroberfläche, Funktionalität, Benutzerfreundlichkeit und zur allgemeinen Benutzererfahrung zu erhalten. Darüber hinaus ermöglichen Ihnen iterative Tests, Ihr Produkt auf der Grundlage von Benutzereingaben kontinuierlich zu verbessern Sie haben also zwei Möglichkeiten. Sie können einen echten Menschen finden, der Ihre mobile App oder Website testet und ihr Benutzerfeedback einholt, oder Sie können auch KI-Tools wie UX Pilot oder Cloud verwenden. Sie können Ihren UI-Screenshot hochladen und den Abschlussball so schreiben umfassende Usability-Tests durchführen. Positionieren Sie sich als Benutzer für diese App. Geben Sie aufschlussreiches Feedback. Okay, das ist also mein Abschlussball, ein sehr einfacher Abschlussball. Und es wird ein paar Sekunden dauern, vielleicht zehn oder 20 Sekunden, bis die KI die Antwort generiert. Okay, los geht's. Ich werde einen umfassenden Usability-Test für das Sales Analytics Testbard aus Benutzersicht durchführen für das Sales Analytics Testbard aus Benutzersicht Okay, hier sind die ersten Eindrücke und das Gesamterlebnis Okay, das sind ein starkes, sauberes, professionelles dunkles Team mit gutem Kontrast, klaren Informationen, Hierarchie mit logischer Gruppierung, und es gibt zwei anfängliche Bedenken Drei Datenzelte ohne klare Aktionspads und begrenzte Kontextinformationen für die Entscheidungsfindung Und hier unten haben wir detailliertes Feedback zur Benutzerfreundlichkeit. Wir haben vier Probleme identifiziert: unklare aktuelle Standorte, Generierung von Navigationsbeschriftungen, fehlende Breadcrumbs und unklare Suchfunktionen Und wir haben diese drei Empfehlungen. Okay, sehr cooles, sehr aufschlussreiches Feedback, Leute. Und lassen Sie uns nach unten scrollen, und KI gibt Ihnen auch eine Zusammenfassung. Schau dir das an. Wir haben vorrangige Empfehlungen. Wir haben die Perspektive des Endbenutzers. Okay, lass uns das lesen. Was ich mag. Das Dashboard sieht professionell aus und präsentiert Informationen übersichtlich. Was mich frustriert, ist, dass ich Daten sehen kann, aber nicht darauf reagieren kann. Ich weiß, dass mein Gesamtumsatz 2,5 Millionen beträgt, aber ich weiß nicht, ob das gut, schlecht ist oder wie es im Vergleich zum letzten oder zu meinen Zielen Das Diagramm sieht gut aus, aber es gibt mir nicht die Details, die ich benötige, um Entscheidungen zu treffen. Und hier ist das Endergebnis. Das fühlt sich eher wie ein statischer Bericht an als wie ein interaktives Analysetool. Ich benötige mehr Kontext, Vergleiche und Interaktivität, um die Leistung meiner Zelle tatsächlich zu analysieren und fundierte Entscheidungen zu Und der Gesamtwert für Benutzerfreundlichkeit liegt bei sechs von zehn Punkten. Okay, lassen Sie uns jetzt zur Mindmap zurückkehren und über das dritte Thema, lesbare Typografie, sprechen Sie müssen lesbare und angemessen dimensionierte Typografie verwenden und angemessen dimensionierte Typografie Berücksichtigen Sie Faktoren wie Telefonstil, Zeilenabstand und Kontrast, um die Lesbarkeit zu verbessern, insbesondere bei längeren Textblöcken Das ist sehr wichtig, Leute. Okay, Leute, das ist das Ende des Kurses. Vielen Dank für den Abschluss des Kurses und ich wünsche Ihnen alles Gute. Tschüss.