UI/UX-Design, Benutzeroberflächen-Designmuster — Gelehrt von einem UX/UI-Kursleiter der Universität

1. 1 Einführung Design-Muster: Willkommen beim Kurs zum Design Patterns der Benutzeroberfläche. Mein Name ist Erin Lawrence und ich bin Principal UX Designerin und Gründerin einer UX-Agentur namens UX Honey in San Francisco, Kalifornien. Ich bin auch UX Dozent, wo ich Advanced UX Design an der Academy of Art University unterrichte , auch hier in San Francisco. Dieser Kurs ist ein sehr praktischer Leitfaden zum Verständnis der Benutzererfahrung und Designmuster der Benutzeroberfläche. Entwurfsmuster sind eine Reihe von Richtlinien und Regeln für die Benutzeroberfläche, die sich auf die Verwendung von Produkten und Benutzeroberflächenelementen beziehen . Das Verständnis dieser Muster ist ein Muss für jeden UX- oder UI-Designer. Dies sind Dinge wie Formularfelder und Drop-downs sowie Navigationsleisten und Kontrollkästchen sowie Optionsfelder und Tab-Leisten und Datumsauswahl usw. Wenn Sie planen, das Design der Benutzererfahrung zu erstellen oder Benutzeroberflächendesign. Und Sie haben kein festes Verständnis für diese Entwurfsmuster. Das ist wie ein Bäcker von Kuchen zu sein und nichts über Kuchenzutaten zu wissen. Weil es im Wesentlichen die Zutaten , die einen Kuchen ausmachen. Und das Gleiche gilt für das Design der Benutzeroberfläche. User Experience Design oder UX-Design hat viel damit zu tun, die Bedürfnisse des Benutzers zu verstehen und welche Inhalte benötigt , um sein Ziel zu erreichen. Und dieser Inhalt macht das Interface aus. Mit anderen Worten, eine Benutzeroberfläche ist nur Immobilien für Inhalte. Und zu verstehen, welche Immobilien für bestimmte Inhalte am besten verwendet werden können, hat viel mit Entwurfsmustern und Benutzeroberflächenkomponenten zu tun . Darum geht es in dieser Klasse. Jedes Video innerhalb der Klasse machen wir einen tiefen Tauchgang und behandeln ein folgendes Thema oder eine Benutzererfahrungskomponente. Wir beginnen mit Dingen wie Formularfeldern, Schaltflächen, Drop-downs, Datumsauswahl, Optionsfeldern, Kontrollkästchen, Umschaltungen, Adressformularen, Suchforen, Tab-Leisten, Titelleisten, Akkordeons, Tabs, Tooltips, Schatten, Miniaturansichten, Karussells, Modale, Lightbox als Menüs und Schubladen, Assistenten, Brotkrumen, Paginierung, Icons, Fotos und all diese Themen werden Erklärungen, Beispiele aus der realen Welt enthalten, Best Practices, wie man sie benutzt, warum benutzt man sie? Und mein Favorit werden wir auch Do's und Don'ts Beispiele haben. Ich habe das gesamte Quellmaterial in die Klasse aufgenommen , die Sie herunterladen können und das Sie für immer behalten können. Und Sie können auch die Figma-Datei herunterladen, die ich für diese Klasse verwendet habe , damit Sie sie auch für immer in Ihrer Figma-Anwendung haben können. Und auch als Bonus werden wir all diese Designmuster verwenden. Und ich habe der Klasse einen zusätzlichen Bereich hinzugefügt. Nun, das ist projektbasierter, wo wir das Design-Tool figma verwenden werden. Und wir werden all diese Komponenten ausbauen , um zu sehen, wie sie aussehen und wie sie in Live-Prototypen verwendet werden können. Dinge wie benutzerdefinierte Optionsfelder, bei denen der Hover-Status und der Auswahlstatus hier sind. Wir machen Menüs, die reinrutschen, rutschen heraus. Wir werden Modals machen, Akkordeons, die intelligente Animationstechniken in Figma verwenden . Wir führen eine Inline-Validierung durch und erfahren alles über die Inline-Validierung in der Klasse. Und dann wenden wir es auf einen Prototyp an damit jemand die Passwortanforderungen sehen kann, validieren kann, wenn er ein Passwort eingibt, das die richtigen Anforderungen erfüllt, und auf Erstellen klicken. Wir werden hier animierte Spinner durchführen, um Laden der Kontoerstellung nachzuahmen, werden Dropdowns durchführen, die das Scrollen eines tatsächlichen Drop-down-Menü und den Auswahlstatus nachahmen das Scrollen eines tatsächlichen Drop-down-Menü . Und dann lernen wir, wie man das auch auf mobilen Geräten macht. Mehr. Und was cool ist, ist, dass ich auch eine ganze Figma-Datei erstellt habe , in der die oberste Reihe jedes Abschnitts hier entworfen wurde , den Sie einem Beispiel auseinander nehmen können. Und dann wird während der Videos jedes dieser Videos durchgehen und wir werden es gemeinsam für all diese verschiedenen Arten von Designmustern tun gemeinsam für all diese verschiedenen Arten von . Und wir werden das Gleiche auch für alle mobilen Patterns tun. Sie erhalten also nicht nur die Best Practices und Des und Don'ts. Sie werden sich auch die Hände schmutzig machen und lernen , wie es im Figma Design-Tool geht. Diese Klasse eignet sich hervorragend für alle, die studieren, um UX-Designer oder UI-Designer zu werden . Oder wenn Sie bereits im Außendienst sind und diese Muster auffrischen möchten. Okay, das ist das Intro. Mein Name ist Erin Lawrence und ich hoffe, Ihnen gefällt der Unterricht. 2. Klassenstruktur: Bevor wir in die Klasse starten, wollte ich ein kurzes Video über die Struktur jedes Videos und was wir behandeln werden. Jedes Video wird durchlaufen und tief in eine Benutzeroberflächenkomponente und die vorhandenen Entwurfsmuster eintauchen eine Benutzeroberflächenkomponente und die , die dieser Komponente zugeordnet sind. In jedem einzelnen werde ich eine kurze Erklärung darüber geben, was die Komponente ist, die Ursprünge der Komponente. Wir sprechen über Vor- und Nachteile. Wir werden über Anwendungsfälle für diese Komponente sprechen. Ich zeige, wie es aufgebaut ist, wie die verschiedenen Zustände der Komponente sind sie aussieht. Wir schauen uns Beispiele aus dem realen Leben an. Ich zeige Ihnen, wie Sie vorhandene Komponenten miteinander kombinieren können. Wir machen das und nicht für die Komponente. Du kannst das Gleiche hier für Tabs sagen. Auch hier sind die Ursprünge, was eine Registerkarte ist, Beispiele für mobile und Web-Best Practices. Und wieder enden wir mit Do's und Don'ts für jede Komponente. Okay, wir sehen uns bald. 3. Kurs-Einführung: Alles klar, Willkommen in der Klasse. Dies ist nur eine schnelle Einführung dessen was für den Unterricht zu erwarten ist. Und ich werde auch ein bisschen über UI-Design und UX-Design- und Designmuster sprechen . Aber fange einfach von oben an. Ja, das Design der Benutzeroberfläche ist das Design von Prozessdesignern, mit denen Schnittstellen und Software- oder Gerätebetriebssysteme erstellt werden. Auch hier konzentrieren Sie sich auf Inhalt und Benutzerfreundlichkeit sowie Inhaltshierarchie. Und UX Design ist die Studie , um die Bedürfnisse Ihrer Benutzer zu verstehen und wie sie eine bestimmte Anwendung oder Benutzererfahrung nutzen . Es gibt viele Überschneidungen zwischen UX- und UI-Designern. Der Benutzeroberflächendesigner übersetzt diese Benutzeranforderungen, die aus Ihren Beobachtungstests oder Ihrer Recherche stammen Ihren Beobachtungstests oder Ihrer , in die Inhalts - und Inhaltshierarchie. Und dieser Satz von Informationen wird innerhalb der Benutzererfahrung einer Anwendung angezeigt. Ein guter Interface-Designer zu sein bedeutet, dass Sie ein solides Verständnis dafür haben ein solides Verständnis dafür welche Inhalte und Inhaltshierarchie für welche Inhalte und Inhaltshierarchie Sie entwerfen müssen. Und am wichtigsten ist, welche Arten von UI-Immobilienkomponenten und -mustern diese Inhalts- und Inhaltshierarchie am besten kommunizieren und dienen. Hier ist es sehr hilfreich, Designmuster zu verstehen , und darum geht es in dieser Klasse. Entwurfsmuster sind nur eine Reihe von Richtlinien und Regeln für die Benutzeroberfläche, die sich darauf beziehen, wie Benutzer Produkte und Benutzeroberflächenelemente verwenden und diese Entwurfsmuster verstehen. Es ist ein Muss für jeden im UX- oder UI-Design. Und das sind Dinge wie Formularfelder und Dropdowns sowie Navigationsleisten und Tab-Leisten. Und das werde ich in der nächsten Sekunde hier eingehen. Designmuster sind äußerst hilfreich, vor allem weil sie uns Zeit und Geld sparen und uns schneller und schneller bessere Ergebnisse bringen. Und dies ist eine Kernphilosophie zur agilen Anwendungsentwicklung. Und es fragt Designer, dass wir diese Muster nutzen und sie bei unserer täglichen Designentscheidung einsetzen könnten. Weil diese Muster und diese Komponenten jeden Tag über viele Benutzererfahrungen hinweg verwendet werden . Und die Benutzer waren nicht daran gewöhnt , wie diese Muster waren. Im Wesentlichen wissen wir, dass sie funktionieren und wir können sie Tag für Tag nutzen. Dieser Kurs wird Ihnen einen sehr praktischen Leitfaden geben , um zu verstehen, was diese Designmuster der Benutzeroberfläche sind und wie Designer sie verwenden, welche Regeln gelten für sie? Beispiele aus der realen Welt. Jeder wird Do's und Don'ts für jede Komponente haben. Und wieder wird das Beherrschen dieser Muster und Komponenten dazu beitragen, Sie zu einem besseren Designer zu machen, Sie aber auch zu einem besseren Entscheidungsträger für die Benutzeroberfläche zu machen, welche UI-Immobilien für den Inhalt verwendet Inhaltshierarchie, in der Sie arbeiten. Also nochmal, es wird dich schneller machen, dich besser machen. Und es wird Ihnen helfen, eine gute Entscheidungslogik darauf anzuwenden , warum Sie ein bestimmtes Layout oder ein bestimmtes Entwurfsmuster in Ihrem Design verwendet haben. Wir werden eine Menge Dinge behandeln. Wir werden fremde Felder, Schaltflächen, Drop-downs, Datumsauswahl, Optionsfelder, Kontrollkästchen und Umschaltungen abdecken . Adresse Foren und suche Formulare. Tab-Leisten mit den Bezeichnungen Balken, Akkordeons und Tabs , QuickInfos und Schatten, Miniaturansichten und Karussells, Modale, Leuchtkästen, Menüs und Schubladen , Assistenten, Brotkrumen, Paginierung, Symbole und Fotos und jede von In diesen Beispielen werden wir erneut Best Practices haben , woher sie kommen, wann wir sie verwenden wann wir sie nicht verwenden sollen. Und wir werden auch Des und Don'ts bei diesen haben. Am Ende sind das wieder alles großartige Informationen. Wenn wir das nächste Level erreichen wollen, werden wir lernen, wie man all dies in Figma und Figma als Designwerkzeug herstellt. Und ich werde eine Akte vorlegen. Und diese Akte sieht ungefähr so aus. Es ist bereits voreingestellt und vorentwickelt. Was wir tun werden, ist, dass wir all die verschiedenen Komponenten erstellen all die verschiedenen Komponenten erstellen, über die wir gesprochen haben, und Entwurfsmuster erstellen, über die wir in der Klasse gesprochen haben, wie beispielsweise benutzerdefinierte Optionsfelder oder sogar was Radiobuttons sind. Wir werden Modals erstellen, sind Menüs wie diese und schließen es wird Modals machen. Und lernen Sie, wie Sie nicht nur über diese Muster lernen und wie man sie und Best Practices macht, sondern wir werden auch lernen, wie wir sie gegen Ende herstellen können. Wir haben Akkordeons hier. Sie können diese Interaktion, die Inline-Validierung für die Kontoerstellung hier sehen , indem Sie hier Spinner in eine Schaltfläche setzen, um Ladestatus anzuzeigen. Und wir werden Dropdowns machen und wie man diese auch in Figma macht. All dies werden wir sogar für mobile Anwendungen erledigen. Erfahren Sie, wie Sie dies auch in mobilen Prototypen machen können. Wir behandeln also Best Practices im Web. Wir machen das auch auf Mobilgeräten. Und wir werden all diese Muster anwenden über die wir im Design-Tool figma lernen werden, alle Dateien bereit haben. Alles, was Sie tun müssen, ist die Datei herunterzuladen. Ich habe das Beispiel vorgebaut, damit Sie es auseinander nehmen können. Während des Unterrichts werden wir es uns ansehen und sehen, wie es funktioniert, und dann bauen wir es zusammen. Es wird also super Spaß machen, es ist einnehmend. Und ich hoffe, wir sehen uns dort und wir sehen uns in der nächsten Klasse. Tschüss. 4. Kursmaterialien: Okay, ich wollte nur ein kurzes Video über das Klassenmaterial machen , das hier ungefähr 30 Sekunden oder eine Minute dauert , ich habe zwei verschiedene Arten von Formaten. Ich habe das gesamte Material im PDF-Format, das ich hier in einer Sekunde öffne und dir zeige. Ich habe auch das gesamte Material in Figma, dem Designwerkzeug, gebaut. Ich habe diese Datei eingefügt, es ist ein Punkt, es ist Klasse Figma Datei Dot Zip. Doppelklicken Sie einfach auf diese Datei. Und es wird einen Ordner öffnen. In diesem Ordner habe ich eine Figma-Datei-Punkt-Konfigurationsdatei, und ich habe auch Klassenanweisungen zum Öffnen dieser Datei, aber ich dachte mir, ich mache auch ein Video für Sie. Sie die Figma-Datei öffnen, Wenn Sie die Figma-Datei öffnen, können Sie nicht auf die Figma-Datei doppelklicken und sie öffnen. Du bekommst diesen Fehler hier. Und ich bin hier auf einem Mac, nur die Vorwarnung. Was Sie tun müssen, ist , dass Sie diese Datei oben links in die Entwürfe Ihrer Figma-Anwendung ziehen müssen diese Datei oben links in die Entwürfe Ihrer Figma-Anwendung ziehen die Entwürfe . Ihr Entwurfsbereich sieht vielleicht etwas anders aus als meiner, da ich all diese Dateien hier habe. Also auch hier entwirft Abschnitte oben links. Schnappen wir uns diese Figma-Datei und ziehen sie hinein. Sie werden diesen blauen Umriss um das Figma-Tool sehen. Das ist großartig. Das heißt, Figma wird dies öffnen und klicken und ziehen. Und das ist eine große Akte. Es kann eine Sekunde dauern, bis Figma das öffnet. Während sich das öffnet, können Sie eines dieser Formate hier verwenden, Material im PDF-Format, und dies folgt zusammen mit der Klasse. Also die erste Klasse, die wir bilden Felder machen werden. Auch hier sind sie eine große Datei, also muss ich in einer Vorschauanwendung öffnen , vergrößern. Dann können Sie einfach von hier aus navigieren, von Anfang an gehen und sich durch das Recht der Klasse arbeiten durch das Recht der Klasse und all dieses Material hier haben. Wieder bin ich ein großer Fan. Du solltest dieses Zeug einfach für immer haben, egal ob du es im PDF-Format oder im Figma-Format hast. Lass uns nach Figma sehen. Okay, cool. Es wird also immer noch die Datei geladen. Und so ist es wieder, wie gesagt, eine große Akte. Okay, großartig. Es war geladen. Also lasst uns weitermachen und es schnell öffnen. Der Vorteil der Figma-Datei besteht darin , dass dies alles Live-Komponenten sind, was bedeutet, dass Sie diese Elemente greifen und diese für Ihre Designs verwenden können . Wie ich schon sagte, wir werden am Ende einen Kurs machen , in dem wir all das ausbauen werden. Aber die sind alle live. Sie können in Figma zoomen, Angenommen, Sie möchten diese Datumsauswahl hier. Du kannst reingehen und dir diese Datumsauswahl schnappen. Ich habe alle Formularfelder. Ich habe eine Reihe von Schaltflächen hier, in denen Sie greifen und verwenden können , und Formularfelder hier sind verschiedene Stile , in die Sie einsteigen und verwenden können , und das sind alles Live-Komponenten , die Sie greifen können. Ich hatte nicht eine ganze Reihe von Icons hier drüben, die du dir zwei schnappen kannst. Egal, ob Sie in Bezug auf das Klassenmaterial, ob Sie die Figma-Datei wünschen oder auch das PDF-Format wünschen, spielt keine Rolle. Du brauchst das nicht mal. Die Videos sind großartig, sie decken viele gute Inhalte ab, aber wie gesagt, ich bin ein Gläubiger, du solltest dieses Material für immer haben und darauf zurückgreifen, wann immer du brauchst. Wir sehen uns später. Tschüss. 5. Form: In Ordnung, willkommen bei Formularfeldern. Die Faktoren eines guten Formfeldes sind nur ein paar Dinge. Und dann kommen wir in verschiedene gängige Stile und Zustände ein und tauchen tief in Formularfelder und Anwendungsfälle für sie ein, aber meistens sind sie leicht zu lesen. Sie haben klar beschriftete Texte und Formtexte. Sie können einfach auf einen Eingabetext klicken. Sie nutzen die Geistertexte gut und ich werde viel über Geistertexte sprechen , dass es ein wichtiges Attribut eines Formularfeldes ist und einen definierten Zustand wie Hover Active Deaktiviert Fehler hat . Ich werde auf verschiedene Beispiele dieser Staaten eingehen. Es hat Immobilien für Fehlermeldungen und es hat eine klare Fehlermeldung darüber, was und welches Formularfeld nicht fehlgeschlagen ist. Und es ist leicht zu verstehen , welche Formularfelder erforderlich sind und welche Formularfelder optional sind. Lassen Sie uns auf einige formulargefüllte Stile eingehen. Es gibt fünf gängigste Arten von Fremdfeldern, die Sie im gesamten Web und in den Anwendungen sehen . Eine Sache zu erwähnen ist, dass Formularfelder dort sehr wichtig sind. Eigentlich eines der wichtigsten UI-Elemente innerhalb der Benutzererfahrung und Anwendungen, die wir haben. Nur weil es Informationen von unseren Benutzern extrahiert. Wir lernen Informationen über sie kennen. Es hilft beim Erstellen von Inhalten. Es ist diese Barriere zwischen unserer Anwendung oder der Trichter für die Kommunikation zwischen unserer Anwendung und unserem Benutzer. Wenn der Benutzer Ihrer Bewerbung etwas mitteilen möchte, passiert dies in einem Formularfeld. Es ist auch wichtig für unsere Geschäftsdienstleistungen, z. B. wenn Sie ein Unternehmen sind , das Produkte verkauft, als Sie Leute benötigen, um Produkte von Ihnen zu kaufen. Und wenn sie Nebenprodukte haben, engagieren sie sich für ein Formularfeld. Als UX-Designer ist es wichtig, dass wir ein wirklich gutes Verständnis für die Regeln, Best Practices und Muster in den Formularfeldern haben. Das erste, was wir hier haben, ist ein skizziertes Formular ausgefüllt. Dies ist am häufigsten. Dies ist der Standardstatus, was bedeutet, dass dies der Status ist, aber das ist noch nicht schweben oder eingegeben, nur der erste Zustand, in dem der Benutzer ein Gliederungsformular sehen würde. Es ist nur das Rechteck hier und es hat eine umrissene graue Farbe. Und dann haben wir die beschrifteten Texte hier. Das wäre wie Name. Und dann haben wir die Geistertexte. Diese Geistertexte sind eigentlich ein Geheimnis. Es ist eine strategische Gelegenheit für uns, dies zu nutzen. Und es gibt so viele verschiedene Funktionen und Geheimnisse in der Branche wie Sie Ihre Geistertexte strategisieren können, um das gewünschte Format für Ihren Benutzer zu kommunizieren. Oder strategieren Sie es, um der Community das Kommunikationsziel zu zeigen , das wir für den Benutzer wünschen, oder um Ihren Benutzer zu diesen Informationen zu veranlassen, oder? Das nennt man also Geistertexte. Darüber rede ich viel. Auch hier ist eine gute ausgefüllte Form mindestens 50 Pixel groß, und dann hängt die Breite nur vom Inhalt ab. Dies ist Beispiele für eine Breite von 350 Pixel, aber es hängt wirklich von der Breite Ihres Formulars, dem Kontext und dem Inhalt ab, der in dieses Formularfeld geschrieben wird . Sagen wir, es war ein Name oder eine E-Mail. Sie möchten ein längeres Formularfeld. Wenn es sich um eine Telefonnummer handelt, möchten Sie möglicherweise nur eine kurze Nummer wie diese. Der zweite Staat, es ist ein ausgefülltes Formular. Und im Wesentlichen sind es die gleichen Kontexte. Wir haben die Geistertexte, wir haben das Label, es ist nur anstelle des Umrisses gefüllt, wir haben hier eine Feldfarbe. Dann haben wir ein materielles UI-Formular. gleiche Prinzip hier. Es hat einen Geistertext und ein Label. Es ist nur anstelle eines Umrisses, Es wird ein Rechteck verwendet. Es verwendet nur eine Zeile, um anzugeben, wo sich das Formular befindet. Dies ist eine materielle Benutzeroberfläche wurde von Google erstellt und diese Art von Stil, ein Formularfeld ist in Google-Produkten und Android-Geräten üblich . Sie haben auch eine materielle Benutzeroberfläche ohne den Titel. Dies wird als Float bezeichnet, bei dem der Titel die Geistertexte ersetzt . Und was hier passiert ist, dass das als Flow-Label bezeichnet denn wenn der Benutzer in dieses Label oder dieses Formularfeld klickt , wird der Titel oder der Beschriftungstext hier schwebt. Und die Geistertexte erscheinen so. Aber im Standardzustand gibt es keine Geistertexte. Es ist nur der Titel hier. Eine Sache, für die ich diese normalerweise nicht persönlich verwende , ist, dass sie diesen Geistertext nicht im Standardstatus anzeigen. Die Geistertexte werden nur angezeigt, wenn der Benutzer klickt, um Informationen einzugeben. Und so verlieren wir die Gelegenheit, unsere Geistertexte im Standardzustand des Forumsfeldes zu strategisieren . Geben Sie hier Informationen ein, die unseren Benutzern helfen oder ihnen Aufforderungen oder Tipps zu dem Format geben, in das wir von ihnen erwarten. Ich habe diese auch in der Vergangenheit benutzt, wo wir ein einspaltiges Formular ausgefülltes Layout wie dieses hatten. Wo du darfst, du hattest hier etwas wie Name und du könntest hier ein Kleid oder so sagen. Mir ist aufgefallen, als wir dies mit Senioren und einem älteren Publikum testeten , dass sie tatsächlich nicht wussten, wo wir klicken sollten. In einem Fall versuchte der Benutzer tatsächlich, hier auf den Namen zu klicken. Dies könnte hier etwas enger gewesen sein und sie haben versehentlich auf die Adresse geklickt, da die Zeile nicht stark genug für den Tippbereich ist , um auf den Zielbereich zu klicken oder zu tippen oder der Tippbereich. Aufgrund dessen bleibe ich normalerweise von ihnen fern. Und Sie können sehen, dass wenn Sie das gebräuchlichste verwenden, nämlich dieses Gliederungsformular hier, dies ein gutes Gefühl für den Tippbereich hat. Sie können das Rechteck sehen, dort wird die Eingabe stattfinden. Wo die materielle Benutzeroberfläche ist, ist nur diese Zeile hier. Eine andere ist, wir haben ein Gliederungsformular, das das Float-Label hat. Und wieder ist es ohne den Titel. Der Titel ersetzt hier den Geistertext. Und was passiert? Es ist das gleiche Prinzip, wenn Sie den Mauszeiger über das Forumsfeld bewegen. Der Titel schwebt dann auf dem Geistertext hier. So. Das gleiche Prinzip, das ich tippe, halte dich normalerweise von ihnen fern , nur weil wir die Geistertexte am Anfang nicht für Kommunikationsstrategien verwenden die Geistertexte am Anfang nicht für . Einige davon waren alle Standardzustände. Für Hover-Status haben Foren. Ich mache das schnell durch. Ihre Philosophie für den Schweben ist , dass etwas lebendig werden sollte, wenn Sie schweben, und normalerweise sollte es eine hellere Farbe haben. Wenn Sie also hier eine, eine Farbe wie dieses gefüllte Formular haben, sollte es eine hellere Farbe im Schwebezustand haben, nur um es lebendiger erscheinen zu lassen. Das ist eine Art Philosophie und Prinzipien rund um den Schweben. Und wir haben das Gleiche für das Gliederungsformular gemacht. Wir haben den Umriss gerade blau gemacht. Sehr häufiges Sprichwort von der materiellen Benutzeroberfläche, dass Sie dasselbe bekommen, um zu skizzieren, wird blau, ob es sich hier um ein Float-Label handelt. Und dann ist das gleiche Prinzip für die Gliederungsformularfüllung, die das Float-Label hat, dass die Gliederungsformularfüllung, die das Float-Label hat, dass wir einfach die Umrissfarbe in ein Blau geändert haben. In Ordnung, der nächste Status wird als Eingabe- oder Fokusstatus bezeichnet . Und dies ist, wenn der Benutzer von einem Mauszeiger AM in das Formularfeld klickt oder auf das Formularfeld tippt . Und die Ghost-Tech wechselt zum Typ-Cursor. Sie sehen also, dass der Typ-Cursor angezeigt wird und die Geistertexte und die meisten Fälle bleiben noch hier, bis der Benutzer anfängt zu tippen. Sobald sie den ersten Buchstaben eingegeben haben, werden Sie sehen, dass dies verschwindet. Die Geistertexte werden verschwinden , sobald der erste Buchstabe anfängt zu tippen. Ordnung, das ist also der aktive Status, was bedeutet oder es tut mir leid, der Eingabestatus oder der Fokusstatus. Und alles, was es bedeutet, ist, dass der Benutzer hier Informationen in diesen Zustand eingibt , oder er konzentriert sich auf den dortigen Bundesstaat. Typ-Cursor ist hier, er konzentriert sich auf dieses Formularfeld. Und es ist die beste Vorgehensweise beim Schweben, um das zu benutzen. Eine helle Farbe hier, der Blues. Aber wenn Sie in den Eingabezustand kommen, ist es besser, einfach mit einem dunkleren Grau oder sogar einem Schwarz zu gehen , oder Sie können ein bisschen Blau ins Grau hinzufügen, wie wir es auch hier gemacht haben. Es ist jedoch am besten, von dieser hellen Farbe für den Standardstatus und dann eine dunklere Farbe für den Eingabezustand zu wechseln den Standardstatus und dann eine . Hier. Sie können die verschiedenen Beispiele hier sehen, genau wie für die Material-Benutzeroberfläche. Das hatten sie. Das Blau für den Hover wird für den Eingabestatus einfach dunkler. Und dann dasselbe für die anderen Float-Label-Formularfelder. In Ordnung, also ist der aktive Status so ziemlich sobald der Benutzer Informationen eingegeben hat und verlässt, verlässt das Formularfeld. Dieses Formularfeld kehrt in den Standardstatus zurück. Das einzige, was sich ändert, ist, dass der eingegebene Text in eine stärkere Farbe wechselt. In Ordnung, also verwenden wir eine helle Farbe Grau für den Geistertext, um anzuzeigen, dass hier nichts eingegeben wurde. Und normalerweise sieht das wie ein Aufruf zum Handeln aus, wie ein Praktikant, ein Praktikantname hier, so. Und wir möchten den Text für die Eingabezustände verdunkeln können. Wenn der Benutzer dies alles scannt, kann er sehen, dass diese ausgefüllt wurden. Auch hier gilt das Gleiche für den gefüllten Zustand. Wenn wir ein ausgefülltes Formular verwenden, haben wir ein helleres Weiß. Und das Gleiche gilt für den Eingabestatus hier für die Flow-Label-Formulare. Cool. Jedes Formularfeld für die Fehlerstufe, jedes Formular sollte eine eigene Immobilie für Fehlermeldungen haben , normalerweise unten. Und dies kann auch passieren, wenn der Benutzer entweder innerhalb des Formularfeldes tippt. Und wir haben eine sogenannte Inline-Validierung, das heißt, wenn wir den Benutzer im Formularfeld fehlern. Oder es passiert, wenn sie die Schaltfläche Speichern oder Senden oder Weiter drücken . Und wir haben die Anforderungen dieses Formularfeldes nicht erfüllt. Was auch immer es für ein bestimmtes Formularfeld nicht erfüllt wurde, was die Anforderungen angeht, sollte die Fehlermeldung hier sein. Auch hier sollten diese Fehlermeldungen sehr klar sein , was Fehler gemacht hat. Sie könnten für die Feldformulare sehen, wir können einfach das gesamte Formular rot für den Umriss machen. Es ist nur Best Practices, nur um den roten Umriss im Forumfeld zu machen, müssen Sie nicht rot mit dem Text oder ähnlichem machen. Du wirst nicht mal zu verrückt. Alles, was Sie tun müssen, ist nur ein kleiner subtiler Hinweis auf Rot, um den Benutzer darauf hinzuweisen, wohin er sich in seiner Nachricht ansehen soll. Und rot. Gleiche gilt für die Material-UI-Formulare hier und das andere Float-Label hier. Im letzten Zustand, den wir haben, ist dies in Formularfeldern als deaktivierter Status üblich . Dies ist also der Zustand, in dem ein Benutzer diese Informationen nicht aufnehmen oder eingeben oder bearbeiten kann. Und ich verwende gerne nur 30% Transparenz oder ein Hellgrau, oder man kann sogar beides verwenden. Alles klar, also all dies sind hier 30% Deckkraft. Okay, also lasst uns jetzt in den tiefen Tauchgang der Formfelder einsteigen. Schau dir verschiedene Funktionen an. Schauen wir uns an, wie wir den Geistertext verwenden können um die verschiedenen Bedürfnisse, ein Format und Eingaben basierend auf dem Formularfeld zu strategisieren ein Format und Eingaben , das wir haben. Wir werden uns einige gemeinsame Formularfelder ansehen. Eine von ihnen sind Telefonnummern. Sie können das Beispiel der Geistertexte hier sehen , dass es dem Benutzer das Format gibt , in die Telefonnummer eingeben soll. Wir bitten nicht um eine 11. Wir wollen nur 1112223333 hier, so. Und was hier passiert ist, dass wir diese Striche haben, die Sie auch hier sehen können. Wenn der Benutzer in dieses Formularfeld geht, füllen wir die Bindestriche automatisch für ihn aus. Das Auto, sie werden die Bindestriche noch hier als Teil des Geistertextes sehen . Wenn sie zur ersten Nummer zwei kommen und sagen wir, sie haben die nächsten beiden getippt. Wir werden das schneidig für sie machen. Sie müssen keine Bindestriche machen, um automatisch zu füllen, füllen Sie diese automatisch für sie aus. Dann sehen Sie das Ausfüllen des Formularfeldes, sobald es fertig ist. Die andere Sache zu wissen ist, dass Sie ein Mobiltelefon-Formularfeld oder ein Formularfeld haben ein Mobiltelefon-Formularfeld oder ein Formularfeld , das direkt an nur Zahlen gebunden ist. Wenn Sie sich auf einem Mobilgerät befinden, öffnen Sie die Nummerntastatur. Öffnen Sie die Buchstabentastatur nicht und lassen Sie den Benutzer zur Nummerntastatur zurückkehren. Dies steht auch im Einklang mit dem Grund, warum wir den Bindestrich automatisch füllen Wenn Ihr Benutzer dies auf einer Tastatur tippt, müssen sie nur die Zahlen auf der Tastatur eingeben. Sie haben möglicherweise eine Tastatur, bei der es sich einen Zahlenbereich auf der rechten Seite handelt. Und dann gibt es auf einem mobilen Gerät die fehlerhafte Nummer, Tastatur sieht so aus. Sie müssen keinen der Bindestriche eingeben. Sie haben einfach die Zahlen eingegeben und wir machen es für sie. Schon wieder. Es geht viel, viel darauf zurück, das erste, worüber ich hier gesprochen habe, nämlich die Erschwinglichkeit, die geringste Zeit und Energie, um eine Aufgabe zu erledigen. Das sind also große. Affordance, ich spreche auch viel. Und auch die Beförderung ist sehr wichtig. Geburtsdatum. Es ist das gleiche Prinzip, dass wir die Geistertexte verwenden, um dem Benutzer das Format zu vermitteln , in dem er Informationen eingeben soll . Wir wollen Monat, Monat, Tag, Tag, Jahr, Jahr, Jahr. Und der Trick mit dem Geburtsdatum besteht darin, dass der Benutzer tippt, wir zeigen immer noch die Geistertexte. Es verschwindet nicht, wenn der Benutzer anfängt zu tippen und die Schrägstriche, Oh, du wetten es. Die Schrägstriche werden auch automatisch ausgefüllt, oder? Alles, was Sie tun müssen, ist auf der Tastatur nur die Zahlen einzugeben. Und hier ist mein Geburtstag, 09131983. Schrägstriche sind alle für den Benutzer automatisch vervollständigt. Alles, was sie tun müssen, ist auf der Tastatur zu tippen. Schlecht, Boom, Erschwinglichkeit, einfach, kein Problem. Wenn dieses Datum in diesem Jahr kommt, könnt ihr weitermachen und mir einen Geburtstagswunsch oder Geschenk schicken , was immer Sie wollen, ich werde es gerne annehmen. E-Mail-Formular ist ziemlich einfach. Statt E-Mail einzugeben, zeigen Sie einfach eine gefälschte E-Mail an. Du kannst verrückt machen oder du kannst einen Namen angeben. Email.com zeigt nur das Format in einem Unterschied an , dass beim Eingeben des Benutzers die Geistertexte verschwinden, als würden sie direkt beim Klicken angezeigt werden. Sie würden also diesen Tastaturcursor auftauchen lassen. Also würde dieses Ding genau dann auftauchen, es wäre etwas dunkler, aber es würde auftauchen, wenn sie anfangen zu tippen. Und sobald sie das erste Wort eingegeben haben , wird es verschwinden. Aber es taucht nicht so auf, wie wir es hier am Geburtsdatum benutzt haben, als sie tippen, sondern taucht nur einmal auf. Sie klicken ein und sobald sie tippen, verschwindet es vollständig. Für ausgefülltes Geld. Dasselbe Prinzip: Wir verwenden die Geistertexte, um die Eingabe und das Format zu zeigen, das wir möchten. Sobald der Benutzer mit der Eingabe beginnt, entfernen wir die Nullen. Wir zeigen die Geistertexte nicht mehr, aber wir behalten das Dollarzeichen. Dollarzeichen verschwindet nicht. Dann fügen wir Kommas hinzu. Wir brauchen unsere Benutzer nicht , um Kommas für uns hinzuzufügen. Nun, wir setzen die Kommas ein, aber der Benutzer muss die Dezimalzahl eingeben. Wir füllen die Dezimalzahl nicht automatisch aus, daher müssen sie eine Dezimalzahl machen. Überlass das ihnen. Kreditkartennummern. Sieh dir nochmal an, wie wir die Geistertexte verwenden. Sie können sehen, warum ich Formularfelder mag würde Geistertexte sein, weil es ein Additives Element ist, das uns hilft, die Kommunikationsbedürfnisse zu strategisieren. Und so haben wir 111 Platz, 2222, Raum 333. Wir hatten hier die Weltraumangaben. Was hier passiert ist, wenn der Benutzer tippt , wird er die Nummer sehen , die er eingibt. Aber alles andere wird zu Kugeln werden. Sie sehen nur die Nummer, die dort tippt, damit sie wissen können, in was sie die richtige Zahl eingeben. Aber wir geben nicht alle restlichen Nummern der Kreditkarte nur aus Sicherheits- und Sicherheitsgründen bekannt. Und rate mal was? Wir füllen die Räume für unsere Benutzer automatisch aus. Sie müssen das nicht noch einmal tun, alles was ich tun muss, ist die Zahlen auf der Tastatur oder dieser Tastatur zu drücken . Und wir machen den Rest der Formatierung für sie. Und dann haben wir immer die letzten vier gezeigt nur für den Fall, dass der Benutzer mehrere Kreditkarten hat. Ich weiß es nicht. Angenommen, Sie haben zehn Kreditkarten und haben einen Einkaufsbummel bei Amazon gemacht , wenn Sie betrunken sind und Sie haben eine Menge Sachen bestellt, die Sie nicht brauchten, und Sie vier oder fünf oder Ihre Kreditkarten maximiert und das merkt man nicht wirklich. Und dann drei Tage später sagt deine Freundin, warum gibt es 50 Kisten mit Amazon-Sachen bei uns zu Hause? Und dann sagst du: Nun, ich weiß es nicht. Und dann siehst du dir deine Amazonas-Geschichte an und meinst: Oh mein Gott, ich glaube, ich habe neulich Abend eine Gucci-Brieftasche bestellt neulich Abend eine Gucci-Brieftasche , als ich betrunken war, oh, das ist nicht gut. Wenn ich also meinen nächsten Gucci Wally kaufe, verwende ich nicht die Karten, die maximiert sind , und ich werde es wissen, weil ich die letzten vier Ziffern hier sehe. Das hab ich mir gerade ausgedacht. Ich habe keinen Agouti-Mantel gekauft. Das nächste ist also Freiform-Nachrichtenfelder. Sie sind Freiform, weil wir nicht wirklich eine Anforderung haben , was der Benutzer eingeben wird. Deshalb ist es ein Freiformular. Sie können alles eingeben, was sie wollen. Wir verwenden dies oft in UX als Feedback-Felder. Wenn wir wollen. Wir haben diese in einigen unserer Anwendungen, bei denen ein Kunde hereinkommt und er sich die Benutzeranwendung ansehen kann. Und wir haben einen kleinen Bereich, der besagt, dass wir Feedback oder Radaranwendung geben . Und sie öffnen dies und wir verwenden die Geistertexte erneut, um den Hinweis oder die Aufforderung, die wir von unseren Benutzern erhalten möchten, strategisch zu gestalten. In diesem Fall hören wir immer gerne von Problemen, hören wir immer gerne mit denen Menschen konfrontiert sind, wenn sie unsere Software verwenden. Aber wir hören gerne von Feature-Anfragen, als würden Sie gerne etwas sehen , das in der Anwendung enthalten ist, das wir im Moment nicht unbedingt gelesen haben. Wir verwenden diese Geistertexte hier, um uns zu strategieren, dass wir diese Art von Informationen von unseren Kunden und Benutzern erhalten können . Manchmal haben wir auch eine maximale Anzahl von Zeichen. Du stellst das einfach oben rechts. Sobald der Benutzer eine maximale Zeichenanzahl wie diese erreicht hat, wird dieser Coco gelesen. Sie können auch nicht mehr tippen. Sie haben also zwei Stufen der Rechtfertigung. Art von Anforderung ist, dass dies rot wird und sie tatsächlich aufhören zu treffen. Sobald ich die Tastatur tippe, passiert nichts. Wir haben auch dieses kleine Expander-Symbol hier. Für offene Formularfelder, wie ich nicht weiß, ob vielleicht jemand, der einen ziemlich langen Absatz schreiben möchte , 500 Zeichen eine ziemlich lange Menge sind. So können sie das greifen und das ausgefüllte Formular nach unten und nach oben strecken . Das hilft also sehr bei diesen geöffneten Formularfeldern. Alles klar, also schauen wir uns hier einige Passwortanforderungen an. Wie nennen wir es, wenn wir Standard-Texte für Mädchen sagen, das bedeutet, dass wir es nicht wirklich verwenden, um eines unserer Kommunikationsziele zu strategisieren. Ordnung, also dieses ist einfach Passwort eingeben , ziemlich einfach. Ich denke, das passiert jedoch mit Passwörtern, dass wir niemals das Zeichen zeigen, das der Benutzer tippt. Wenn ich eine Fünf tippe, zeigen wir die Fünf nicht. Es kommt als Kugel rein. Aus Sicherheits- und Datenschutzgründen. Wir können das kleine Icon hier hinzufügen, das Augensymbol. Und wenn der Benutzer darauf klickt, geben wir das Passwort bekannt, oder? Das III-Symbol ist also, als würden die Leute zuschauen, zeige nichts. Und wenn du darauf klickst und die Klamotten wie die Leute nicht zuschauen, zeig mir mein Passwort. Der Unterschied zwischen einem optionalen und den erforderlichen Formularfeldern. Es ist besser, nur Text anzuzeigen, optional und im Vergleich zu einem anderen sagt. Wenn Sie ein Pflichtfeld haben, sehen Sie diese kleinen Sternchen hier. Meistens oder nicht, sind die meisten Ihrer Formularfelder erforderlich. Anstatt also alle Formularfelder mit diesen kleinen Sternchen zu haben mit diesen kleinen Sternchen weiß nicht jeder , dass Sternchen ein erforderliches Formularfeld ist, wie Senior. Ältere Benutzer verstehen das nicht. Sie sehen es vielleicht nicht einmal. Es ist besser, alle erforderlichen Formularfelder nach Bedarf zu belassen Formularfelder nach Bedarf und dann einzugeben, wo der Formularfilter optional ist , da es sich um eine bessere Beförderung handelt. Und wenn wir zu unserem Leitfaden hier, der Vermittlung, zurückkehren , ist es einfach, Informationen in Bezug auf eine bestimmte Aufgabe zu verstehen ? Also optional. Das optionale Schreiben des Textes bedeutet etwas, weil es sich um Text handelt, es ist optional im Vergleich zu einem Sternchen ist eine sehr abstrakte Sache. Wie PDD. Nicht jeder weiß was das bedeutet. Wenn wir also über leicht verständliche Informationen im Zusammenhang mit der Aufgabe nachdenken , ist es optional besser. Und dann könntest du tun, ich habe ein ganzes Video über Tooltips, in dem du ein Info-Symbol machen kannst, und das gibt dir einen Tooltipp beim Schweben oder wenn du im Web bist, oder klicke auf, wenn du im Internet bist und dann auf wenn du bist, wenn du bist sind auf Mobil- und Tablet-Geräten, schauen Sie, wir verwenden die Geistertexte, um die sekundären Adressen weiter zu strategisieren . Beispiel Wohnung 111. Sie können hier Geistertext für Eingabeaufforderungen wie Lieblings-Eis verwenden Eingabeaufforderungen wie Lieblings-Eis anstatt wie ein Lieblings-Eis zu mögen, Sie können Beispiele wie Vanille-Schokolade, Rocky Road, all das gute Zeug machen . Denken Sie daran, dass Personen Ihre Formulare durchblättern. Technisch versierte Benutzer drücken die Tabulatortaste auf der Tastatur und bewegen sich durch jedes Formularfeld. Und so kann der Benutzer vermeiden, die Maus zu benutzen und aus einem Formularfeld klicken und wieder hineinklicken zu müssen. Schon wieder. Dies geht auf dieses Keyword zurück, Erschwinglichkeit, Mindestens Zeit und Energie, um eine Aufgabe zu erledigen. Wenn du hier siehst, funktioniert es so. Der Benutzer befindet sich im zweiten Feld. Sie haben diesen Text gerade hier fertiggestellt. Sie drücken die Tabulatortaste auf der Tastatur. Die zweite Formel, die , auf der sie gerade waren, kehren wir zum Standardstatus zurück. Und dann befindet sich das dritte Fremdfeld, wenn sie auf der Registerkarte sind im Eingabefokusstatus und bereit für sie, mit der Eingabe zu beginnen. So können sie Ihre gesamten Formularfelder durchlaufen Ihre gesamten Formularfelder und müssen niemals auf diese Maus klicken. Lass uns auf ein paar Dos und Don'ts eingehen. Eines der Dinge, die hier üblich sind, ist der Unterschied zwischen einem einspaltigen Fremdfeldlayout und einer zweispaltigen Spalte , die eher im Zickzack ist. Der auf der rechten Seite. Studien wurden mit Eye Tracking-Test und Zeittest durchgeführt . Sie fanden heraus, dass Benutzer mehr Zeit damit verbringen, von einer Spalte zur anderen zu springen , wenn es hier eine Toolspalte gibt, Ihre Augen scannen hier in Zs, anstatt die Formularfelder nach unten zu bewegen. Und wenn Sie ein Einspalten-Formularfeld haben , ist psychologisch psychologisch, aber es hat besser funktioniert, weil Sie das Gefühl haben, mehr zu vervollständigen. Sie bewegen sich mehr in der Liste nach unten, was sich wie mehr Vollendung anfühlte als links nach rechts zu gehen. Es wurde tatsächlich festgestellt, dass das Einspaltenformular, das mit der gleichen Anzahl von Formularfeldern gefüllt das mit der gleichen Anzahl von Formularfeldern einer tatsächlich ausgeführten zwei Spalten getestet wurden, schneller war, die eine Spalte war schneller als die beiden Spalten. In Ordnung, um wieder auf diese Erschwinglichkeit zurückzukehren, können einzelne Spalten auch besser vermitteln, welche Formularfelder. Wenn jemand auf die Taste tippt, drückt die Tabulatortaste auf der Tastatur, welche wird der nächste sein? Wo zwei Spalten wird es untergehen oder wird es das richtige Modell sein? Meistens funktioniert es in einem Z-Muster, oder? Es wird hier rechts und dann hier unten gehen. Aber die Studien funktionieren und eine Spalte bildet Felder, sie haben möglicherweise mehr Leerzeichen. Sie füllen Ihre Benutzeroberfläche möglicherweise nicht auf, wenn Sie einen großen Desktop haben, aber sie sind viel einfacher zu scannen und geben einem Benutzer ein Gefühl der Fertigstellung, wenn er sich schnell nach unten bewegt. Ein weiterer kleiner Trick hier ist, dass Sie zwei verschiedene Gruppen platzieren können , oder? Wenn das also mit ähnlichem Namen zu tun hatte und das mit, ich weiß nicht, Arbeitgeberinformationen zu tun hatte. Wir nutzen von hier aus nur ein bisschen mehr Platz , um diese Informationen einfach miteinander zu gruppieren. Und es hilft mehr beim Scannen bringt Informationen auf systematische Weise. Sie können sehen, warum dies wichtig ist, warum diese Formularfelder und das Erlernen dieser Dinge wichtig sind, dass dieses Unternehmen eine Studie über die Gründe durchgeführt hat , warum Menschen ihre Website verlassen haben die Kasse. Auch hier waren 50% von ihnen, weil ihre Sachen einfach viel zu teuer waren. Sie hatten zu hohe Einkaufsgebühren und Steuern und Versandkosten sowie Steuern und so. 28% gaben an, die Website wolle ein Konto erstellen. Sie hatten eine Kontowand. Sie ließen einen Benutzer nicht genau wie Gast auschecken. Wenn dir jemand dein Geld gibt, mach es ihm so einfach wie möglich dein Produkt zu kaufen und mir dein Geld zu geben. Machen Sie sie nicht beim Erstellen eines Kontos. Aber schauen Sie hier, 21% gaben an, dass der Checkout-Prozess, die Formularfelder zu lange, zu lange von einem Prozess. Komplizierter Checkout. Dann ist dies eine Zahl, als quantitative Metrik bezeichnet wird. Es ist quantitativ, weil es eine Zahl mit dem qualitativen ist warum? Nun, warum war es zu kompliziert? Dann? Wir müssten nachschauen und wir würden einige dieser Prinzipien hier annehmen , die wir vor uns gelernt haben. Wolle, ist es ein zweisäuliges Formfeld? Wenn ja, was ist dann experimentieren Sie in einer einspaltigen Spalte. Du kannst das rausholen. Ich springe zu diesem, wenn es sich hier um solche Mini-Formularfelder handelt. Sie sehen alle diese Formularfelder auf der rechten Seite, z. B. vermeiden, das sind viel zu viele Formularfelder. Wenn Sie so viele Informationen haben, ist es besser, dies in einen Assistenten zu integrieren. Der Assistent eignet sich hervorragend für lange Formen und ich habe ein ganzes Video am Ende des Kurses hier, in dem ich gerade nur über Zauberer gesprochen habe. Bei Wizards sind großartig, weil es gibt, unterteilt es alle Langforminformationen in kleine mundgerechte Kategorien. Dies gibt ein Gefühl für den Benutzer, ein Gefühl für den Standort, als wären Sie hier. Sie haben diese beiden Aufgaben erledigt, also gibt es Fortschritt und Zeit. Und auch Fortschritt und Zeit , dass Sie nur noch einen übrig haben. Es hat all diese Langformfelder aufgelöst , die wir hier auf der rechten Seite hätten. Und es hat es in einen Schritt-für-Schritt-Prozess versetzt. Der Grund dafür ist, dass dies im Vergleich zu einem Zoom Outlook auf der rechten Seite nicht entmutigend aussieht . Das ist eine entmutigende Aufgabe hier zu versuchen zu vervollständigen, wo dies von vorderster Front nicht so entmutigend aussieht. Und ein weiterer kleiner psychologischer Trick ist, wenn man wirklich einfachen Baum und wirklich einfachen Outro für den ersten Schritt macht, es ist super einfach. Und wenn es wirklich einfach ist, haben Studien meistens gezeigt, dass Menschen diese Schritte eher ausführen in der ersten ist wirklich einfach, dann sollte der letzte sehr einfach zu schreiben sein. Du willst nicht, dass Leute herunterfallen. Sie haben bereits die Arbeit geleistet und machen das Letzte super einfach. Und dann sind sie fertig. Verwenden Sie andere Do's und verwenden Sie keine hilfreichen Fehler. In diesem Fall können wir sehen, dass die Passwörter nicht übereinstimmen. Vermeiden Sie solche Dinge, bei denen diese die Schaltfläche Erstellen drücken und es heißt nur, dass etwas schief gelaufen ist, bitte reparieren Sie es und Sie wissen nicht, was schief gelaufen ist, oder? Jedes dieser Formularfelder sollte also einen eigenen Fehler haben , der auf sich selbst zutrifft. Erkunden Sie die Protokolleingaben, oder? Du kontrollierst nicht, wie lang die Namen der Leute sind. An diesem Punkt müssen wir wissen, ob diese Person einen langen Namen hatte. Wir haben zwei Möglichkeiten. Ellipsen wir es aus? Was mache ich gerne. Gib diese kleinen drei Punkte hier , um dem Benutzer anzugeben , dass es mehr Namen gibt. Und wenn der Benutzer mehr Namen sehen möchte, kann er darauf klicken und er kann mit dem Pfeil vorwärts gehen und wird dort mehr von dem Namen sehen. Oder wir können das in zwei Zeilen aufteilen. So wie hier. Was, aber das einzige, was dabei ist, dass es mehr verursacht, es bewegt das Forumfeld und erzeugt hier mehr Breite oder Höhe. Und es wirft irgendwie die Assymetrie der visuellen Konsistenz der Höhe aller Formfelder ab der visuellen Konsistenz . Deshalb bin ich hier nur eher ein Fan von Ellipsen. Aber sei dir dessen bewusst. Man kennt keine Leute, manche Leute haben wirklich lange Namen, wirklich lange Nachnamen. Benutze kein kurzes Formularfeld wie dieses. Wenn du weißt, dass es ein langer Input sein wird. Wenn es sich um eine E-Mail handelt, geben Sie ihnen ausreichend Platz. Denken Sie daran, dass dieser bereits darüber gesprochen hat, aber gruppieren Sie relevante Abschnitte zusammen. Wenn Sie also Gruppe eins, Gruppe zwei und Gruppe drei haben , anstatt den gleichen Platz für alles zu behalten. Nutze einfach Platz. Es ist alles was du tun musst. Raum, Räume. Whitespace ist dein Freund. Inline-Validierung. Das ist großartig. Verwenden Sie also die Inline-Validierung, wenn Sie können. Wenn ich also eine E-Mail tippe und versehentlich ein Komma einfüge, schreibe mir einen Fehler an dem Punkt , an dem ich ein Komma setze, wie wenn wir hier sind, nur ungültig adressiert. Oder wenn ich hier ein zusätzliches Leerzeichen lege, mir an dieser Stelle, das macht mich in der Zeilenbedeutung innerhalb des Forumsfeldes während ich es tippe, so dass ich es beheben kann, bevor ich dieses Formularfeld verlasse. Dies hängt von Ihrer Datenbank ab. Das ist nicht so, als würden Sie dies nicht tun oder dass die Leute Ihre Anwendung nicht verwenden werden, aber es ist besser, sie lügen zu lassen. Was passiert, wenn Sie dies nicht tun, ist, dass der Benutzer alle Informationen ausfüllt, „Senden“ drückt und wenn er dann wie was jagen muss? Oh, warum haben sie nicht etwas Irrtümlich durchgemacht? Dann müssen wir uns das Highlight ansehen, das Forumsfeld hier, und beim erneuten Eingeben des Formularfeldes klicken, erneut eingeben und den Fehler beheben, wo es auf diese Erschwinglichkeit zurückgeht. Als wir bereits wussten, dass der Benutzer hier war, wussten wir, dass es ein Fehler war. Warum lassen Sie sie gehen? Lasst uns sie hier reparieren lassen. Warum machen wir das unserem Benutzer an? Ich habe über Zauberer gesprochen. Es kann hier ein ganzes Video über Wizards haben. Wir werden mit den letzten beiden Do's und Don'ts abschließen. Denken Sie an geeignete Größe. Wir müssen hier eine Postleitzahl haben. Machen Sie es in die Größe einer Postleitzahl, auch wenn es Ihre visuelle Assymetrie abwirft. Denn wiederum sollte die Benutzerfreundlichkeit immer die Sichtbarkeit oder die Sicht übertrumpfen. Obwohl das besser aussehen mag. Sehen Sie, wie Menschen die Benutzerfreundlichkeit Ihres Produkts ist immer besser als das Aussehen von etwas. Es gibt etwas , das gut aussieht, aber es gewöhnt sich nicht sehr gut. Etwas sieht vielleicht nicht einmal so gut aus, aber die Leute benutzen es und haben sehr gut abgeschnitten. Im Vergleich zu dem rechts hier. Und dann niemals, niemals zu drei Spalten-Formularfeldern wie diesen, bitte tun Sie das nicht. Auch hier könntest du die beiden Spalten machen, die ich gerade sage, das ist eine schlechte, das ist keine Kuppel. Es gibt Zeiten, in denen dies der Fall ist, wir haben das getan, aber tun Sie einfach nicht, machen Sie hier nicht wirklich drei Spalten. Ich werde nur noch einmal mit ein paar High-Level-Stücken abschließen . Ich habe viel über das einspaltige Layout gesprochen. Auch hier ist eine der Dinge, über die man sprechen muss, die automatische Vervollständigung. Automatische Vervollständigung. Großartig. Autocomplete ist also, ich zeige dies in dem Video, in dem wir über Adressforen und Suchformulare sprechen . Im Wesentlichen zeigt dies jedoch relevante Informationen an, die auf den Eingaben basieren , die der Benutzer bereits gemacht hat. Und es überspringt den Benutzer daran, das ganze Wort zu schreiben. Wenn Sie also nur meinen Namen AIR eingeben, werden bei den automatischen Vervollständigungen unten ein Dropdown-Menü angezeigt, und wir werden im nächsten Video über Dropdowns sprechen. Aber es wird ein kleines schnelles Dropdown-Menü zeigen was es für Übereinstimmungen mit AAR hält. Es heißt, es könnte trocken und ein paar andere Dinge , die zu diesem Namen passen. Was passiert hier, Was großartig ist, sagen wir, ich habe meinen Namen eingegeben und ich habe eine Adresse ausgefüllt und eine automatisch vervollständigte Erin kann auch meinen Nachnamen, meine E-Mail, meine Adresse automatisch ausfüllen , meine Stadt, mein Bundesstaat und viele Fälle, in denen die Anwendung dies nicht liefern wird. Chrome wie Ihr Internetbrowser wird dies für Sie tun. Aber seien Sie sich der Terminologie bewusst. Das ist die Autocomplete. Denk an den Zauberer, den wir gezeigt haben , ich werde viel darüber reden. Aber unabhängig von Assistenten ist es einfach immer großartig, über eine Art von Benutzererfahrungen nachzudenken und diese drei Schlüsselaspekte zu haben, diese drei Schlüsselaspekte zu haben, wie das Festlegen der Erwartung, den Standort, wie das Verlassen Ihre Nachrichten oder Benutzer wissen, wo sie in Ihrer Benutzererfahrung, Zeit und Ihrem Fortschritt befinden, sie werden eine Aufgabe erledigen müssen, wie, was haben sie bereits getan? Wo befinden sie sich und wie viel Zeit noch? Welche Schritte gehen voran, was sie brauchen. Wir haben darüber gesprochen, dass wir nur sicherstellen möchten , dass wir über die optionale versus erforderliche Inline-Validierung sprechen, hilfreiche Fehler liefern. Ich weiß noch, dass ich einfach trainiere Seien Sie explizit darüber, wie Sie möchten, dass die Leute diese langen Namen in Ihren Formularfeldern behandeln diese langen Namen in sollen, und raten Sie, was Ingenieure bemerken möchten. Sie werden fragen, okay, also wie behandeln wir einen langen Namen? Gehen wir zu zwei Zeilen? Ellipsen wir? Und ich ellipse vorzugsweise gerne , wie ich es dir zuvor gezeigt habe. Okay, Cool, das sind Formularfelder. Wir sehen uns im nächsten Video. Wir sprechen über Knöpfe. 6. Buttons: Alles klar, Willkommen zur nächsten Klasse. Wir werden über Knöpfe sprechen. Ich überspringe die Button Theory und ich mache das gegen Ende, weil ich denke, dass es relativer und leichter zu bekommen sein wird und leichter zu , sobald wir die ganze Sache durchgemacht haben. Okay, also fangen wir mit einigen Tastentypen an, dann komme ich in Tastenkombinationen in verschiedenen Zuständen und Best Practices und mache einige Don'ts. Aber normalerweise haben wir unseren quadratischen Knopf. Sie können hier sehen, ich bin ein guter Knopf, ist mindestens 50 Pixel groß. Gute Tap-Bereiche, 50 mal 50 Pixel. Die Breite hängt wirklich vom Kontext der Schaltfläche ab. Und so willst du ein bisschen Raum zum Atmen für deine Texte. Ich werde, ich zeige ein paar Do's und mache keine Beispiele dafür. Aber dieser ist 140 Pixel breit. Es kann wahrscheinlich ein bisschen kürzer wenn Sie es wollten. Aber guter Raum zum Atmen für die Topographie im Knopf. Und mindestens 50 Pixel von hoch. Wir haben einen quadratischen Knopf , der keine abgerundeten Kanten hat. Und Sie können sehen, dass der rechts einige abgerundete Kanten hat. Dies wird als Pillenknopf bezeichnet. Es ist ziemlich selbsterklärend, sieht aus wie eine Pille, die du nehmen würdest. Es ist vollständig abgerundet, an den Rändern voll abgerundet. Dieser nennt sich „ Ghost-Button“. Und es ist nur ein Ghost-Button, weil es einen Umriss hat , so dass die Primärfarbe hier der Umriss der Schaltfläche ist. Und die Füllung ist meistens weiß oder auf welcher Farbe des Hintergrunds dieser Schaltfläche sitzt. Wenn es alles wie eine dunkle Benutzeroberfläche wäre, wäre es eine dunklere Farbe oder wenn es auf einem weißen Hintergrund wäre, wäre es weiß wie hier. Aber im Wesentlichen sollte es so aussehen, als wäre es nur ein Umriss mit dem Text. Und diese sind wirklich großartig für sekundäre Tasten. Ich werde ein bisschen darüber sprechen , wo Sie sehen können, dass diese vollfarbigen Tasten ideal für primäre Tasten sind. Und dieser Geisterstil ist eine großartige Kombination mit dem primären Knopf. Und diese sind für sekundäre Aktionen gedacht. Und ich werde hier in einer Sekunde ein bisschen über sekundäre Aktionen sprechen . Wir haben Textschaltflächen oder Links. Dies sind nur Wörter ohne grafische Elemente daneben. Und wenn Sie darauf tippen oder darauf klicken , werden sie den Benutzer an einen Ort bringen. Ziemlich einfach. Wir alle wissen, was Links sind. Entweder habe die Farbtextur, du hast eine Linie darunter. Dies hat, dass die darunter liegende Linie tatsächlich in einigen Fällen besser ist nur wegen der Zugänglichkeit. Wenn jemand farbenblind ist , sieht er dies möglicherweise nicht als Link an. Wenn sie jedoch die darunter liegende Linie sehen, zeigt dies ihnen an , dass dies das verknüpfbare Element ist. Schaltflächen können auch Ladestatus haben. Sie werden also sehen, dass dies ziemlich üblich ist wo der Benutzer für etwas auf einer Website bezahlt , und er klickt auf die Wiedergabeschaltfläche und anstatt sie in einen anderen Bildschirm oder in einen anderen Zustand zu springen , was ist wie das Laden. Und wenn etwas nicht passiert ist, richtig, wir irren es. Wir können sie im selben Kontext behalten und die Schaltfläche wird in einen Loader-Zustand. Behält das bei. Es gibt dieses Maß an Kontrolle und Feedback und Sie drücken auf „Bezahlen“, Sie sehen das Feedback, das wir die Zahlung erhalten haben. Warte einfach eine Sekunde, wir bearbeiten es und dann geben wir dir einen Erfolg. Am Ende davon. Wir haben wieder Icon-Buttons, es sind nur Texte und Icon-Kombinationen. Sie werden beliebte sehen wie Add next, download. Und dann hast du Icon-Buttons. Es sind nur Buttons ohne Texte und dienen nur als Aktionselemente. Keine Technologie, normalerweise sind dies häufigere Symbole wie Einkaufskarten und Weiterleiten oder Snacks und Download und Schließen und eine Anzeige. Meistens benötigen sie keinen Text neben ihnen, da es sich um allgemein bekannte Symbole handelt. Und sie können in den Button gehen, wie Sie es hier gesehen haben, oder sie können einfach selbst Symbole sein. Ich habe am Ende einen ganzen Vortrag, eine der letzten Klassen, über die ich nur einen tiefen Einblick in Ikonen, Ikonographie und Best Practices dort sprechen über die ich nur einen tiefen Einblick in Ikonen, Ikonographie werde. Schauen wir uns ein paar Tastenkombinationen an. Ich mag diese Kombination hier sehr, die auf der linken Seite sekundäre Taste ist, die umso heller ist. Oder ich mag die Kombination des Ghost-Buttons für diese sekundären Aktionen und sekundären Aktionen oder Dinge wie sie abbrechen oder Kleidung oder in einigen Fällen vielleicht löschen. Dann primäre Schaltflächen dunkler in der Farbe. Und ich mag den gefüllten hier drüben. Also Geister auf dem linken Feld, rechts. Und das ist Ihre primäre Aktion. Dies ist also das Wichtigste , was Ihr Benutzer in einem bestimmten Workflow oder einem Bildschirm ausführen soll, der in Kombination oder mit der primären Schaltfläche begleitet sein sollte . Das sind Dinge wie Speichern und Senden oder Weiter. Sie können sehen, dass Sie auch Farbe verwenden können, um diese sekundären und primären Schaltflächen anzugeben. hast du. etwas weniger starke Farbe und rechts eine viel visuelle stärkere Farbe. Dann hast du die Abbrechen Ghost Button Pille auf der linken Seite und die Pille rechts. Ziemlich einfaches Zeug hier. Normalerweise verwende ich gerne die gleiche Breite dieser Tasten nebeneinander. Wenn Sie also diesen Abbrechen-Button hier unten ziehen, hat sie die gleiche Breite wie die Schaltfläche Speichern, sodass sie sich sehr einfach stapeln. Das siehst du hier. Sie stapeln sich, stapeln sich gut im Vergleich zu so etwas. Es ist in Ordnung, Ihre Schaltfläche „Abbrechen“ zu haben, vielleicht etwas kleiner als Ihre primäre Schaltfläche , es gibt etwas wichtigeres zu sehen oder stärkeren Ton für die primäre Aktion. Das ist großartig, wenn Sie diese Art der horizontalen Ausrichtung durchführen, aber wenn sie vertikal so stapeln, wirft sie die vertikale Ausrichtung ab. Und es ist keine schlechte Idee, es einfach so breit zu machen . Geh ein bisschen zurück. Okay? Tastenbetonung, beschreiben dies schon, aber hohe Betonung für primäre Kotlin-Aktionen, dunklere Farbe, mittlere Betonung, sekundäre Aktionen, hellere Farbe. Und niedrige EF-Betonung bedeutet, dass keine aktivierten Schaltflächen, die keine Aktion haben , aber sehr niedrig sein sollten. Die visuelle Betonung oder das visuelle Erscheinungsbild einer Schaltfläche. Schauen wir uns die Schaltflächenzustände an. Also auch hier haben wir diesen Standardstatus. Sie haben hier einen Hover-Status. Und wie ich im Forumvideo gesprochen habe, ist es Best Practices für Hover, eine hellere Farbe zu verwenden. Dies hilft, dass der Knopf lebendiger wird. Es ist wie, Hey, ich lebe, klicke irgendwie auf mich. Denken Sie jedoch daran, dass Sie nur eine Aktion zeigen, die wir im Internet verwenden, nicht für mobile und Tablet-Geräte deaktiviert Ich verwende tendenziell 30% Deckkraft für den Hintergrund und dann 70% für den Text. Sie möchten immer noch, dass die Leute die Texte lesen können , wenn sie deaktiviert sind, Sie möchten sie nur sehr behindert aussehen lassen. Sie sollten immer noch wissen, dass dies eine Schaltfläche zum Senden ist, aber sie sollten es als etwas sehen, das nicht engagiert oder umsetzbar aussieht. In Ordnung, damit Sie Schatten auf Schaltflächen verwenden können. Ich zeige dir hier ganz schnell ein paar Knöpfe oder ein paar Schatten hier. Wenn wir also ein hinzufügen würden und ich ein ganzes Gespräch über Schatten habe, aber lassen Sie mich hier einfach schnell eine kleine Demo über Schatten durchgehen . Wenn wir dieser Schaltfläche einen Schatten hinzufügen würden, eines der ersten Dinge, die Sie nicht als Standard vermeiden sollten, ist der Standardschatten, den Sie erhalten, nie der beste, beginnen Sie einfach nie mit dem Standard. Sie können hier sehen, dass es vier auf dem y hat, also auf der vertikalen Linie unter dem Button. Für Pixel unten und es gibt 0 auf dem X. Das bedeutet , dass auf der vertikalen Seite der Schaltflächen kein Schatten angezeigt wird . Also nochmal, y auf der horizontalen Linie und x auf der vertikalen Linie. Wir wollen wenigstens fünf auf jeder Seite und fünf machen. Der nächste Teil ist, dass dieser Button die Schatten zu hart ist. Als ob du deine Augen schielst, kannst du diesen Knopf immer noch sehen. Das wollen wir nicht. Wir wollen hier einen sehr subtilen Knopf oder einen Schatten hier. Also lasst uns weitermachen und etwas Unschärfe hinzufügen . Das ist schon besser. 20 Unschärfe werden gut sein. Ich mochte normalerweise auch unabhängig von der Farbe der Knöpfe, ich lege gerne ein bisschen Blau, nur ein bisschen Blau in den Farbschatten dieser Schaltfläche, oder? Unabhängig von der Farbe rosa oder lila oder was auch immer, ein bläuliches bisschen Blau und der schwarze oder graue Bereich für den Schatten ist immer besser als nur reines Schwarz. Da gehst du. Das war's. Gib uns ein bisschen Tiefe. Fühlt sich an wie ein Knopf wie etwas, auf das Sie tippen können. Sie können sogar eine Farbe hinzufügen. Sie können dem Schatten die gleiche Farbe oder eine ähnliche Farbe hinzufügen , um auch einen anderen Effekt zu erzielen. Also lasst uns weitermachen. Lasst uns das tatsächlich ändern. Lass uns das tun, lass uns hier eine blaue Farbe machen. Cool. Gehen wir nun zur Schattenfarbe. Lasst uns den Schatten in ein bisschen mehr Blau ändern. Das gibt dir ein bisschen mehr einen Blick. Ich werde die Unschärfe abbauen. Ich werde wahrscheinlich ein bisschen höher bei der Deckkraft gehen. Da gehst du. Sehr subtil. Subtil ist effektiv. Wir wollen nicht, dass der Schatten sehr auffällig ist, sollte nur ein bisschen Tiefe geben. Sie können diese drei hier mit dem Schatten sehen. Es gibt keine Tiefe auf diesem Button. Und diese Schatten helfen hier mit ein bisschen Tiefe. Nur eine Sache, an die Sie sich erinnern sollten, ist, wenn Sie dieses Kopplungssystem ausführen, bei dem Sie den Ghost-Button auf der linken Seite und eine primäre Taste auf der rechten Seite haben den Ghost-Button auf der linken Seite . Und ein Benutzer fährt mit der Maus auf die Schaltfläche Abbrechen. Und Sie spüren den Abbruch mit der Orange hier, das gleiche Orange wie für den primären Button verwendet wird. Wenn Sie sich diesen Datenzeiger ansehen, haben beide die gleiche visuelle Hierarchie. Sie konkurrieren gerade im Hover-Status gegeneinander . Es ist besser, so etwas zu vermeiden und einen Schwebeweg zu verwenden , der sich vielleicht noch im orangefarbenen Bereich befindet, aber ein bisschen heller von einem Farbton Orange wie dieser ist besser, oder? Die primäre Schaltfläche sieht also immer noch wie die primäre Schaltfläche aus, selbst im Hover-Status. Okay, der nächste Schaltflächenstatus wird als fokussierter Status bezeichnet. Und das ist, wenn ein Benutzer Ms dieses Tastenelement mit einer Eingabemethode wie einer Tastaturregisterkarte hervorhebt dieses Tastenelement mit . Sie können durch Formularfelder navigieren und Sie können auch mit der Registerkarte auf die Schaltfläche klicken. Dies ist nicht die Maus, die über die Schaltfläche fährt, aber ich verwende gerne den gleichen Zustand wie der Mauszeiger, in dem es eine hellere Farbe hat, wenn Sie Tastatur auf die Schaltfläche bringen. Wenn Sie also drei Formularfelder und eine Schaltfläche zum Senden haben, kann der Benutzer in jedes dieser Formularfelder wechseln, Informationen eintragen und dann auch die Tabulatortaste auf die Schaltfläche verschieben und als Übermittlung auf der Tastatur die Eingabetaste drücken. Es zeigt nur, dass eine Art von Fokuszustand auch wichtig ist. Solange Sie den Hover definiert haben, wird es auch sein, dies wird der gleiche Zustand dafür sein. Es gibt einen gedrückten Zustand. Dies ist, wenn der Benutzer die Taste gedrückt hat. Auch hier können Sie eine hellere Farbe verwenden als im schwebenden oder fokussierten Zustand. Sie können auch eine Animation machen, bei der Sie diese Standardeinstellung haben, Sie haben diesen Hover, sie drücken sie und Sie erhalten diese kleine Animation, die ziemlich schnell passiert, aber sie geht von gedrückt 123. Und es ist sehr subtil, aber es gibt dem Benutzer das Feedback, dass er auf die Schaltfläche klickt oder auf die Schaltfläche tippt. Lass uns auf ein paar Dos und Don'ts eingehen. Buttons sollten ein oder zwei Wörter haben, drei Wörter Max. Mehr als drei Wörter ist es nicht einfach zu scannen und zu sehen, was die primäre Aktion oder was der Button macht, oder? Es sollte wirklich einfach sein, einfach auf den Knopf zu schauen. Button informiert den Benutzer, was er tut. Und hier muss man in diesem Button lesen, das ist zu lang, zu viel Text. Wenn Sie Tastensymbole verwenden, verwenden horizontale Ausrichtung und vermeiden die vertikale Ausrichtung mit den Texten und den Symbolen hier nur unausgewogene Form und eine unausgewogene Form und es ist hier keine gemeinsame Schaltfläche. Also vermeide es einfach. Es gibt keinen Grund, so etwas nicht auf der linken Seite zu tun. Geben Sie einen guten Abstand. So können Sie hier sehen, dass wir den gleichen Abstand von oben und den gleichen Abstand nach rechts angegeben haben . Und du hast einen guten Knopf wie diesen gegenüber dem rechts hier. Wir haben einen guten Abstand oben. Nun, wir haben nicht einmal einen Abstand nach links und rechts, also müssen wir dies ein bisschen mehr Abstand machen. Geben Sie auch gute Luft zum Atmen aus dem Text. Sie können den gleichen Abstand ausführen oder mehr Platz von links und rechts hinzufügen . Dies ist hilfreich, da Sie ein Tippziel haben, die Immobilien, die diese Schaltfläche braucht, wie groß sie ist, die darüber informiert, wie einfach es ist, zu tippen oder zu klicken, oder? Es gibt also kein Problem. Es sollte kein Problem den Button zu vergrößern, insbesondere wenn es sich um die primäre Schaltfläche handelt. Um es einfach zu machen, zu tippen und zurückzukehren, erhalten Sie einen besseren Raum zum Atmen aus dem Text in Ihrer Schaltfläche im Vergleich zu den rechts hier. Wie alle diese Knöpfe gequetscht fühlen. Wie die Textfelder hier sehr gequetscht sind, wie ich es nicht kann , muss ich es so behalten, damit ich dir das Beispiel zeigen kann, aber ich hätte mich einfach wirklich nahe gebracht und einfach, das ist so viel besser. Gestern Sollten Sie jetzt einen netten Knopf sehen, können Sie sehen, dass es wirklich schwer für mich ist, Nazi diese Knöpfe sogar so zu lassen. Also nochmal, es geht zurück, um auf den Bereich zu tippen und zu klicken , so dass dieser einfach zu klicken und zu tippen sein sollte. Dieser braucht also mehr vertikale wie das sieht gut aus. Wenn Sie ein Schaltflächensymbol verwenden, verwenden Sie jeweils ein Symbol. Benutze nicht mehr als einen. Es mischt den Kommunikationsstil. Sie können sehen, dass dieser wie ein Download oder NADH ist . Ich weiß es nicht. Verwenden Sie eine hellere Farbe für den Schwebeweg. Dann habe ich das auch einmal gesehen. Machen Sie den Text bei einem Schwebeweg nicht größer. Verwenden Sie Farbe als Hover-Indikator, nicht als Text und Größe. Wenn Sie einen sekundären Link wie diesen haben , bei dem er abgebrochen wird, passt er sehr gut unter die Schaltfläche Speichern. Leg es nicht an die Spitze, denn die Leute lassen die meiste Zeit ihre Lektüre so nieder. Wir möchten, dass die primäre Schaltfläche das erste ist, was jemand scannt, und nicht unbedingt die Schaltfläche „Abbrechen“, da sie sekundär abbricht. Gleicher Deal hier auf der linken Seite. Sie können sie auch stapeln. Die meiste Zeit machen wir primäre Tasten auf der rechten Seite und die sekundären Tasten links. Sie können diese Reihenfolge wechseln, wenn Sie etwas haben, das zufällig sein könnte. Wenn ja, werde ich quetschen. Also schieße ich zu einer anderen Klasse. Ich rede hier darüber. Das hier. Wenn Sie etwas haben, bei dem jemand etwas löschen und löschen wird , können wir hier immer ein RU sicheres mobiles Modal machen und wir haben einen Löschvorgang und einen Abbruch. Manchmal werden diese Modals angezeigt und der Benutzer klickt versehentlich in die Hauptposition genau hier und löscht dies versehentlich. Und das ist ein wirkungsvolles Löschen weil sie ein Konto löschen und wir sagen: Hey, möchten Sie dieses Konto wirklich löschen? Wie du viel an diesem Konto gearbeitet hast, wirst du alles verlieren, richtig, also beim ersten Löschen , den sie gemacht haben, feuern wir dieses Modal aus und wir geben ihnen nur noch eine Chance zu sagen: Bist du sicher, dass du das machen willst? Sie können die Reihenfolge dieser Tasten ändern, damit das nicht passiert. Sie können diesen hier platzieren und die Stornierung so nach rechts legen und diese Reihenfolge wechseln, so nach rechts legen und diese Reihenfolge wechseln, falls sie versehentlich erneut auf die Stornierung drücken. Es ist nicht die wirkungsvolle Hauptaktion. Dies ist eine Strategie, um diese Kombination hier zu verwenden, um genau dem zufälligen Fall zu helfen, in dem versehentlich erneut auf Abbrechen gedrückt wird, aber Sie möchten allen Dank. Das haben sie gemacht. Ich wollte nicht Löschen drücken , wohin Sie wirklich gehen müssen. Oh, ich möchte diese Beziehung wirklich löschen. Das ist so ziemlich alles, was ich hier beschrieben habe. Bei diesem hier. Hier warst du kannst das ein bisschen umschalten. Nur für diese sehr wirkungsvollen Löschungen , die in diesen passieren. Alles, was zufällig sein kann, dass Sie nur sicherstellen möchten , dass Ihr Benutzer dies nicht tut. Wenn Sie eine Schaltfläche im Hintergrund eines solchen Fotos verwenden, verwenden Sie Ihre Feldfarbenschaltfläche wie die primäre. Und die meiste Zeit benutzen Sie hier nicht den Ghost-Button, da sich dies auf die Lesbarkeit des Textes auswirken wird, bei dem der linke hier viel mehr hervorsticht. Wenn es um Links geht. Verwenden Sie die richtige Anzahl an Wörtern, um Ihre Links anzuzeigen. Du siehst also den auf der linken Seite. Wenn wir einfach hier klicken, um Ihre CR-Benutzerrichtlinien zu sehen, klicken Sie hier, die blauen Texte. Und so ist alles andere einfach zu lesen. Es hat eine gute Lesbarkeit. Und wir vermitteln dem Benutzer auch , dass wir hier absichtlich blau verwenden , weil wir möchten, dass Sie sich mit diesem Link beschäftigen. Sie können sogar noch einen Schritt weiter gehen und hier eine Zeile hinzufügen, wenn Sie möchten. Einfach so. Gegensatz zum Recht, wie alles blau zu machen, möchte ich wirklich, dass meine Benutzer dies verwenden. Sie beeinträchtigen möglicherweise nicht erstens die Lesbarkeit und Lesbarkeit. Und sie wissen vielleicht nicht, dass dies alles anklickbar ist. Sie denken vielleicht, dass es Teil Ihrer Marke ist und Sie verwenden nur blaue Texte für alles. Machen Sie klug mit Ihren Links, besonders wenn sie zwei Sätze wie diesen binden. Verwenden Sie eine Textzeile für Ihre Schaltflächen. Tu das niemals, wo es in zwei Zeilen geht. Es wirft einfach die Knopfsymmetrie ab und es sieht super komisch aus. Auch hier, wenn es keine zwei Zeilen hat, haben Sie zu viele Wörter. Wir müssen etwas geben, das deine Worte wie Button mit etwas Nettem geben muss, aber niemals in zwei Zeilen sein sollte. Lassen Sie die Schaltflächen beim Stapeln wieder auf gleicher Breite und mischen Sie dann die Breite nicht wie diese, wenn Sie sie stapeln. Alles klar, ich glaube, das war's. Lassen Sie uns einfach schnell die Farbe der Button-Theorie durchgehen und wir werden es abschließen. Eines der Dinge, die ich einfach nennen möchte, werden Sie hören, dass dieses Akronym herumgeworfen wird. Es nennt sich Call-to-Action. Der Aufruf zum Handeln kann sich auf zwei Dinge beziehen, die sich auf den Text auf einem bestimmten Bildschirm beziehen können . Dies ist das Wichtigste, was ein Benutzer auf dem Bildschirm sehen soll , oder sich auf die Schaltfläche bezieht der Call-to-Action-Button , der der primäre Button ist. Dann haben Sie wieder sekundär zu handeln, was diese sekundäre Schaltfläche ist. Dinge wie zurück und schließen, abbrechen, solche Dinge. Denken Sie daran, dass sich die Schaltfläche „Größe“ einfach anfühlen sollte einfach auf die Richtlinien der Apple-Benutzeroberfläche tippen sollte. Sie sagen, alles drin, Apples Geräte oder Apple Store-Anwendungen, alles, was napbar ist oder 40 Pixel mal 40 Pixel groß sein sollte. Ich persönlich denke , das ist zu klein. Ich neige dazu, mindestens 50 Pixel mal 50 Pixel als kleinste zu machen. Denken Sie noch einmal daran, dass die Hintergrundfarbe einen guten Kontrast haben sollte und sich von anderen UI-Komponenten abheben sollte , wenn es sich um die primäre Schaltfläche handelt, oder? Der primäre Button sollte also eines der ähnlichsten dunkelsten Dinge in der Anwendung sein. Es ist also wirklich einfach zu wissen. Kann Ihnen ein Beispiel dafür zeigen, was Sie tun müssen, oder? Wenn du dir diese Seite hier ansiehst, schiele deine Augen und sieh sie dir an, diese Orange knallt, oder? Es ist also das Wichtigste , was der Benutzer tun soll. Wir verwenden also auch die visuelle Hierarchie, um dies zu vermitteln. Sie können diese Farbe auch erneut verwenden, um ein entscheidendes Unterscheidungsmerkmal zwischen der primären Taste und der sekundären Schaltfläche festzulegen. Ich habe schon über Formen gesprochen. Also nur ziemlich horizontale Pillenformen. Die Platzierung ist auch entscheidend, oder? Egal wie Ihre Farbe Ihres Buttons ist oder wie groß Ihr Button ist. Wenn es sich nicht an einem Ort befindet, an dem Personen in Ihren Benutzern es nicht einfach sehen oder scannen können, ist es nicht so effektiv. erneute Platzierung dieser Schaltflächen hängt von Ihrem Kontext ab, aber normalerweise funktionieren sie oben oder unten auf Ihren Bildschirmen am besten. Andererseits sollte die Kopie kurz und süß, leicht zu lesen und leicht zu scannen sein. Und wenn Sie nicht wissen, was der Kopierer-Button ist, sollte er darüber informieren, was die Schaltfläche tun wird. Okay, cool. Das waren Knöpfe. Wir sehen uns am nächsten. Wir sehen uns alle im nächsten Video. Wir werden Dropdowns abdecken. 7. Dropdowns: Okay, lass uns ein bisschen über Dropdowns sprechen. Dropdowns sind so ziemlich geformte Elemente. Der einzige Unterschied besteht darin, dass sie zur Auswahl verwendet werden. Sie haben also etwas, dass wenn Sie hier in das Formularfeld klicken, dieses Menü ein wenig erscheint, was wir hier als Dropdown-Menü bezeichnen. Das hat Auswahlvariablen für den Benutzer. Sie eignen sich hervorragend für alles, was drei oder mehr Elemente oder Variablen enthält , die ein Benutzer auswählen kann. Weil du eine ganze Reihe dieser Gegenstände einsetzen kannst. Sie können beispielsweise 15 dieser Auswahlen in das kleine Fenster setzen. Und es spart eine Menge Bildschirm-Immobilien, Immobilien, anstatt nur alle 20 dieser Auswahlen zu zeigen. Wenn Sie jedoch nur zwei bis drei Variablen oder Auswahlelemente für einen Benutzer haben zwei bis drei Variablen , ist es besser, einfach ein Optionsfeld oder ein Kontrollkästchen zu verwenden . Und das werde ich dir hier im Video zeigen. Ich denke nicht das nächste Video, sondern das Video, nachdem wir in Optionsfelder und Kontrollkästchen eingetaucht sind. Die Kriterien für ein Dropdown-Menü sind wiederum, dass wir dieselben Stile für unsere Formularfelder verwenden. Hier sehen Sie das Feld für das Gliederungsformular. Dann das materielle UI-Formular , das nur die Zeile hat. Die einzigen Unterschiede von einem Formularfeld und einem Dropdown-Menü sind die kleine Karotte, dieser kleine blaue Pfeil hier. Wenn darauf geklickt wird, öffnet sich das Dropdown-Menü. Und die Voraussetzung für das Dropdown-Menü ist, dass der Benutzer nur ein Element auswählen kann, und dann wird diese Auswahl hier zur Eingabe, in der sich der Geistertext befindet. Wenn Sie mehr als beispielsweise 20 Elemente in einem Dropdown haben , ist es auch am besten, eine Art Kopf oder eine automatische Vervollständigung zu machen, was ich Ihnen hier in einer Sekunde ein Beispiel zeige. Dropdowns eignen sich nicht nur für Formulare, sondern Sie können sie auch als Menüs verwenden. Und so werden Sie sie oft auf E-Commerce-Websites sehen. Sie werden sie in Ihrem Computerbetriebssystem wie Mac sehen . Der obere Fensterbereich enthält hier Menü-Dropdowns. Sie werden viele Dropdowns für Menüs sehen , die ungefähr so aussehen. Hier ist unsere Bobo t Site bei unseren Haushaltswaren. Und dann ist die scheinbare Level-Architektur die Haushaltswaren. Und die Informationen auf Kinderebene, die auf Haushaltswaren basieren , sind Kissen Kunstdrucke und Uhren und was haben Sie. Dann. Sie sehen auch Dropdowns in Form von Menüs, die als Mega-Menüs bezeichnet werden, wo es sich um große E-Commerce-Websites handelt und mehrere Informationsarchitekturen haben , auf denen sie eine übergeordnete Ebene wie Haushaltswaren und sie haben ein Kind wie Kissen, und dann haben sie eine ganze Reihe von Enkelkind-Level-Optionen ein Kissen hier. Ich bekomme all diese Informationen und Menüs und ein Video, das ich gegen Ende des Kurses über Menüs und Schubladen gesprochen habe, und wir werden uns vertiefen mit diesem Thema. Schauen wir uns hier einige typische Dropdown-Styles an. Wir haben also den Standardstil. Auch hier haben wir den Schwebeweg, wo der Umriss blau wird. Wir haben das Dialogfenster oder das eigentliche Dropdown-Menü, das die Menüs enthält. Beachten Sie auch, dass Sie in diesem Dropdown-Menü auch den Mauszeiger hier haben. Dies wird deiner Maus folgen. erneut den Mauszeiger auf den Desktop, aber nicht für Mobil- oder Tablet-Geräte, dann haben Sie den aktiven Status. Dies wäre also der ausgewählte Wert hier. Wenn ein Benutzer also etwas ausgewählt hat, haben Sie den Fehlerstatus. Ähnlich wie unsere Formularfelder und Fehlermeldung und ein Umriss für Rot, um den Fehler anzuzeigen. Und dann haben Sie diesen deaktivierten Zustand, also übertreffen 30% die Transparenz oder ein sehr hellgrau. Oder Sie können sogar beides tun, um zu vermitteln, dass dieses Dropdown-Menü stabil ist. Schauen wir uns einige Dropdown-Typen und Anwendungsfälle an. Sie sind großartig für alles , was einen Bereichswert hat. Vielmehr sagen Sie, wie viel Quadratmetermaterial ist Ihr Zuhause oder wie viel Geld verdienen Sie pro Monat? Und Sie können die Geistertexte erneut verwenden, um ein wenig vom Kommunikationsziel oder der Aufforderung wie Beispiel 500 bis 100 zu vermitteln. Wenn der Benutzer darauf klickt, werden alle Bereiche angezeigt, die er hier auswählen kann. Das ist besser als nur ein direkter Input von wie ich 2300 pro Monat gemischt habe. Du könntest tatsächlich 335 Dollar pro Monat kosten. Manchmal ist es in diesen Werten besser , nur einen Bereich zu geben. Und es erleichtert dem Benutzer, einfach einen Bereich auszuwählen, und es ist nicht so aufdringlich. Vor allem, wenn Sie darüber nachdenken, wie viel Sie einen Monat im Vergleich zu einer genauen Zahl im Vergleich zu einem Bereich verdienen. Und das Gleiche gilt für das Quadratmetermaterial hier. Sie wissen vielleicht nicht genau Ihr quadratisches Filmmaterial, aber Sie werden eine grobe Schätzung der Quadratmeterzahl Ihres Hauses kennen . Die Reichweite und die Dropdowns passen also gut zusammen. So können Sie die Dropdowns mit Formularfeldern kombinieren. Hier sehen Sie also, dass wir unseren Telefonnummernwert haben. Nehmen wir an, dies als internationales Produkt, Sie können das Dropdown-Menü hier verwenden, um die Art der Telefonnummer auszuwählen , die Sie eingeben möchten. Und dann ändern sich das Vier-Zahlenformat hier und die Geistertexte hier und die Geistertexte basierend auf der Auswahl des von Ihnen ausgewählten Landes . Eine weitere große ist, dass, wenn Sie mehr als 20 Elemente haben, wenn der Benutzer hier auf das Formular klickt, das Dropdown-Menü angezeigt wird, aber er wird auch den Eingabestatus sehen. Und während der Benutzer tippt, filtert er die folgende Liste. Sie werden dies also sehr häufig bei Statusauswahlen sehen. Wenn Sie „MA“ eingeben, wird die Dropdown-Liste der Elemente angezeigt, wird die Dropdown-Liste der Elemente angezeigt die auf diesem Typ filtern. Und dann könntest du hier gehen und auf Maryland klicken, oder du könntest mit der Tastatur nach unten auf deiner Tastatur gehen und dieses Element auswählen. Der Hover-Status funktioniert also nicht nur beim Schweben der Maus, er funktioniert auch, wenn Sie hier auch eine Pfeiltastatur auf Ihrer Tastatur haben. Ein wichtiges Attribut für diese Art von wird übersehen. Manchmal ist es der Hover-Status für dieses Dropdown-Menü, wenn Sie dies entwerfen Sie können diese Dropdown-Optionen mit Kontrollkästchen kombinieren. Nehmen wir an, Sie wollten etwas, das mehr als eine Art von Auswahl hatte . Das Standard-Dropdown ist nur ein ausgewähltes Auswahlkriterium. In diesem Fall können Sie es jedoch mit den Drop-downs kombinieren , um eine Mehrfachauswahl zu informieren. In diesem Fall betrachten wir alle Eiscreme-Aromen. Habe die Checkboxen hier. Und wenn ein Benutzer auf die Kontrollkästchen klickt und das Dropdown-Fenster schließt indem außerhalb des Dropdown-Fensters klickt. Jedes Mal, wenn das Dropdown-Menü angezeigt wird, klicken Sie außerhalb davon und es wird geschlossen. Und Sie können hier die Auswahl sehen, die auf dem Dropdown-Menü mit mehreren Auswahlmöglichkeiten basiert . Und wenn Sie hier auf das X klicken, würde es die Auswahl der Vanille im Dropdown-Menü aufheben und diesen Wert auch hier löschen. Das würde rüber kommen und Kekse und Sahne, die hier so nach oben rutschen. Großartig darin. Eine andere Möglichkeit, dasselbe Dropdown-Menü zu verwenden , besteht darin , ein Filtersymbol zu verwenden. Sie können also sehen, wo das Dropdown-Menü den Transporteur oder den Pfeil enthält , um das Dropdown-Menü anzuzeigen. Und dann verwenden wir für die Filterung ein Filtersymbol. Und wenn Sie dieses Filtersymbol öffnen, können Sie sehen, dass Sie Lebensmittelsorten auswählen. Dies wäre gut für einen Online-Lieferservice zur Bestellung. Und in diesem Fall werden chinesische, italienische und indische Lebensmittel gefiltert. Und normalerweise haben Sie das Filtersymbol und in Blau oder eine Farbe, um anzuzeigen, dass dieses Formularfeld gefiltert wird. Wenn es nicht gefiltert wurde, was bedeutet, dass Sie den gesamten Lebensmitteltyp ausgewählt hatten. Es könnte ungefähr so aussehen, nämlich wählen Sie diese aus. Nur die graue Farbe hier, genauso wie die Strichfarbe. Das wäre der Standardstatus. Und wenn es die Liste filtert, wird sie blau, um dem Benutzer anzuzeigen, dass die folgenden Informationen den Lebensmitteltypen gefiltert werden. Auch hier können Sie den Bildlauf im Dropdown-Menü verwenden und mit der Maus scrollen , um die anderen Auswahlen zu sehen , die sich unter der Falte befinden. Unterhalb der Falte bedeutet, dass dies die Auswahl ist, die ich unter dem Dialogfenster oder dem Dropdown-Fenster nicht sehen kann . Eine große Sache, die Sie hier ziemlich oft sehen werden. Und Sie haben vielleicht nicht bemerkt, dass sich ein mobiles Dropdown, ein Dropdown-Menü auf Ihrem Mobilgerät ein wenig von einem Dropdown in dem unterscheidet, was wir gerade für das Web gesehen haben. mobile Dropdown-Menü nutzt die gesamte Immobilie, die volle Breite des Telefons, und es erleichtert das Tippen, um die Elemente hier auszuwählen und auch die Elemente zu scrollen, die sich innerhalb der Artikel, die sich in diesem Dropdown-Menü befinden, oder? Was Sie also vermeiden möchten, ist Verwendung einer mobilen Dropdown-Liste im Webformat da es weniger Speicherplatz benötigt und es schwierig machen kann, diesen Bereich zu tippen und zu wischen, um den Rest der Dropdown-Elemente. Und es nutzt nicht den vollen Platz für Wasserhahnimmobilien. Auf einem Mobilgerät Ihr freundlicher und freundlichster Tap Spot. Und am einfachsten zu erreichen ist, wo diese grauen Boxen, Das ist die Idee hinter einem mobilen Dropdown-Menü die volle Immobilie des Telefons zu nutzen , die volle Breite. Machen Sie es dem Benutzer auch leicht , innerhalb dieser Dropdown-Auswahl nach oben und unten zu wischen. Es sieht ungefähr so aus. Ich habe eine hier geöffnet. Alles was Sie tun müssen, ist auf normales süßes I zu klicken oder hier auf normales süßes Eis zu tippen. Ihr Süßestufe wird angezeigt und wenn es mehr Felder gibt, würden Sie einfach auf unseren Wischen klicken und ziehen. Und es würde hier verschiedene Werte für die Süße zeigen. Und wenn Sie hier normale Süße oder Halbsüße auswählen, wird das Dropdown-Menü geschlossen. Du große Tapioka , wenn du willst. Ich will dich nicht hungern nach Ababa t. Aber ja, das ist im Wesentlichen das mobile Dropdown-Menü dort. Also auch hier, die Dropdowns im Webstil auf mobilen Geräten vermeiden, können Sie dies für Tablet tun. Aber da unsere Immobilien auf unseren mobilen Geräten so klein sind, ist es eine Rutsche von unten nach oben. Und wenn Sie dann auf Ihre Auswahl tippen, gleitet sie nach unten. Lassen Sie uns mehr auf ein paar Dos und Don'ts eingehen. Auch hier eignet sich ein Dropdown-Menü für drei oder mehr Werte. Eine andere Sache ist für das ausgefüllte Datumsformular, es ist besser, dass der Benutzer einfach das Datum hier eingibt. Monat, Monat, Tag, Tag, Jahr, Jahr, Jahr. Vergleich zu den Dropdowns für separate Monate, Tage und Jahre, da dies eine Erschwinglichkeit ist, wird der Benutzer entweder drei Tabs oder drei Klicks benötigt , um hier reinzukommen und gib diese Informationen ein und finde dann das Datum. Angenommen, Sie schauen sich Ihren Geburtstag oder ähnliches an, um nach unten zu scrollen und das Datum zu finden, an dem Sie sich befinden, anstatt nur einmal zu engagieren, einen Klick eine Tastaturzahlen, Eingabe und können die Zahlen basierend auf dieser Tastatur eingeben. Sie eignen sich hervorragend für kombinierte Formulare, die mit einer Datumsauswahl gefüllt sind. Was das ist, ist, dass ich gerade über Date-Picker im nächsten Gespräch habe . Ich glaube das nächste Video werden wir hier alles über Date-Picker sprechen. Aber im Wesentlichen können Sie hineingehen, das Datum hier eingeben oder auf das Kalendersymbol klicken, das dann die Datumsauswahl anzeigt. Und Sie können entweder den heutigen Tag als Standard gehen oder auf diesem Kontext rechtzeitig oder in der Zeit zurückgehen basierend auf diesem Kontext rechtzeitig oder in der Zeit zurückgehen, wenn es so ist, als würde man einen Termin planen, dann sind Sie nur werde rechtzeitig vorwärts gehen. Wenn es sich eher um eine vergangene Zeitreferenz handelt, wie Sie möchten, dass es sich Analysen ansieht oder etwas, das gestern auf Ihrer Website passiert ist, können Sie in die Tage zurückklicken und nicht gehen. Sie werden auch hier nicht in der Lage sein, in den zukünftigen Zustand zu gehen. Aber ich komme in einer Sekunde im Date-Picker-Video hier auf all das ein. Okay, wenn Sie also weniger als drei Werte haben, ist es besser, diese entweder als Optionsfelder oder als Kontrollkästchen verfügbar zu machen, da es wieder auf die Erschwingung weniger Klicks zurückgeht und die Informationen unter die Gesichtsebene und nicht im Dropdown-Menü. Vermeiden Sie also, wenn die Frage lautet, dass Sie über 21 sind, verwenden Sie die Optionsfelder Ja oder Nein im Vergleich zu Sind Sie über 21? Klicken Sie auf, und jetzt müssen Sie einen weiteren Klick machen. Nein. Es ist also noch ein Klick. Besser dran, eine Version wie diese mit den Optionsfeldern zu machen . Dropdown-Menü Die Breite muss mindestens mindestens sein. Also das Fenster hier, dieses Ding, diese Breite muss mindestens der Länge des ausgefüllten Dropdown-Formulars entsprechen. Machen Sie das Formularfeld hier nicht weniger breit als das tatsächliche oder das Dropdown-Dialogfeld. Machen Sie das nicht weniger breit im Formularfeld hier. Es ist in Ordnung, wenn sie rübergehen, als könnten sie ein bisschen breiter sein als das eigentliche Dropdown-Menü selbst. Machen Sie es einfach nicht weniger breit hier auf der rechten Seite. Sie können entweder eines wie dieses Formularfeld hier über diesem Dropdown-Menü leben . Wie wenn Sie darauf klicken, kann es den Wert nicht überschreiten. Oder es kann sehen, dass es das tun kann, was es hier tut, nämlich es gleitet unter das Formularfeld, entweder eins oder völlig in Ordnung. So können Sie das Beispiel hier sehen, wie Sie hier klicken und das Formularfeld-Dialogfeld hier. Es geht auf diesen Favoriten für Farb-Drop-Drop-Down. Während es hier direkt unten geht. Hier gibt es kein Richtiges oder Falsches. dass beide akzeptabel sind. Denken Sie daran, einen guten Abstand zwischen dem Pfeil hier und dem Text anzugeben. Verwenden Sie immer die Breite , die die Breite Ihres Dropdown-Menüs bestimmt , basierend auf dem längsten Wort, das Sie im Dropdown-Bereich haben. Das wird die Breite bestimmen, wenn sie ausgewählt wird. Wenn Sie also ein langes Wort haben, sicher, dass dies das lange Wort hier abdeckt. Und wenn es länger dauert, lass mich das ganz schnell eintippen. Cool. Wenn es also länger dauert als das Dropdown-Menü, können Sie die Wahl haben. Sie können zu zwei Zeilen gehen, was ich normalerweise nicht gerne mache. Oder nochmal, du könntest das tun, was wir in der Vergangenheit getan haben, nämlich Ellipse aus. Gut, geh einfach noch drei so. Aber sagen wir, dass dein Wort genau dort ist, wo es ist. Nehmen wir an, Sie haben nur das längste Wort in diesem Dropdown-Menü , wo Sie nur ein Wort in der zweiten Zeile haben. Es ist besser, Ihrem Dropdown-Menü etwas mehr Breite hinzuzufügen . Zieh das raus, das ist hier zu eng. Füge das ein bisschen länger hinzu. Da gehst du. Das sollte eine gute Breite für das längste Wort in Ihrem Dropdown-Menü sein. Dies wäre also der längste Eisgeschmack der Welt hier. Das mache ich rückgängig . Geben Sie also hier einfach einen guten, angemessenen Abstand für diese Dropdowns ein. Ziehen Sie den Pfeil nicht fest oder die Texte geben Raum für diese Dinge zum Atmen. Nochmals: Ellipse hier die langen Wörter und gehe nicht in zwei Zeilen. Ich denke, es sieht einfach komisch aus, wenn es auch die asymmetrische Ausrichtung abwirft . Geben Sie erneut einen guten Abstand zwischen den Texten und den Formularfeldern ein. Setze die nicht so nieder, oder? Das sollte gehen, geben Sie ihm etwas Platz zum Atmen. Nun zu eng hier, dass sie dieses Ding ersticken sollten ein bisschen atmen können . Verwenden Sie wie immer die richtige Länge, damit das Dialoglistenfeld scrollen kann, oder? All diese Inhalte sollten also in der Lage sein, zu scrollen. Machen Sie das Listenfeld nicht so groß, dass alle Elemente angezeigt werden, da es nicht auf Ihr Gerät oder Ihren Desktop passt . Und du wirst das Ganze scrollen , um runter zu kommen. Wie auch immer, wenn Sie eine Liste so lange haben, Es ist besser, eine Art Kopf zu machen. Wie auch immer, zeige die Liste einfach hier wenn der Benutzer nach unten scrollen und sie großartig finden möchte. Sie können aber auch auf der Tastatur tippen und diese Liste schnell filtern und dann den Wert der Variablen oder die Eingabeauswahl finden den Wert der Variablen oder , nach der sie suchen. Okay, das waren Drop-downs. Und im nächsten Video hier werden wir die Datumsauswahl behandeln. Wir sehen uns dort. Tschüss. 8. Date: Alles klar, Reden wir über Datumsauswahl. Eine Datumsauswahl ist so ziemlich ein Dropdown-Menü für Daten. Und es ermöglicht einem Benutzer, Daten auszuwählen, indem mit einer Kalenderüberlagerung interagiert. Und es gibt meistens zwei gängige Arten von Datumsauswahlfunktionen. Der erste hier wird verwendet , um ein bestimmtes Datum auszuwählen. Der andere gebräuchlichste ist die Auswahl des Datumsbereichs. Fangen wir mit dem ersten hier an. Wenn es verwendet wird, um einen bestimmten Tag auszuwählen, wird er häufig für die Planung verwendet. Wenn Sie einen Termin vereinbaren möchten, sagen Sie in der Genius Bar, Apple Genius Bar oder einem einfachen Flug. Oder haben Sie keinen Termin für Ihren Diego erstellt , um Ihren Zahnarzt aufzusuchen , um Ihre Zähne reinigen zu lassen. Und was hier passiert ist, dass es wie ein Dropdown-Menü funktioniert und Sie auf das Formularfeld selbst klicken. Das Dropdown-Menü für Kalenderüberlagerung zeigt an, dass Sie ein kleines graues Feld haben, das den Tag angibt, an dem Sie sich befinden, und dann tippen Sie auf eine beliebige Stelle und Sie sehen, dass der aktive Aufenthalt nicht nur dort angezeigt wird sehen, dass der aktive Aufenthalt , wo sich die Geistertexte Sie sehen den aktiven vervollständigten Text. Und Sie sehen auch eine Darstellung dieser Auswahl auf der Kalenderüberlagerung. Dann wird es etwas komplizierter wenn Sie einen Datumsbereich auswählen und auch häufig für Hin- und Rückflüge oder Hotelaufenthalte verwendet werden . Beispiele finden Sie dies wie bei Google Flights oder Travelocity. Und was hier passiert, ist, wenn diese beiden Check-out-Daten und Abreisedaten oder Abreise und Ankunft sind. An- oder Abfahrtsdaten. Diese werden als eine gleiche Kalenderüberlagerung angezeigt, aber zwei verschiedene Arten von Datumsfeldern. Und was hier passiert, ist, wenn Sie Check-in-Datum anklicken und angeben, Ihre erste Auswahl trifft das erste Datum. Und dann können Sie bei derselben Kalenderüberlagerung Monate oder Monate zurückgehen. Und die zweite Auswahl macht den Datumsbereich. Und Sie drücken Fertig oder klicken Sie aus dem Dropdown-Fenster und schließen es. Und die erste Auswahl gibt den Wert für die erste Datumsauswahl ein. Und die zweite Auswahl hier geben wir den Wert für die zweite Datumsauswahl ein. Schauen wir uns die Bundesstaaten an, um eine Datumsauswahl zu erhalten. Auch hier haben Sie die zwei häufigsten Arten von Stilen. Sie haben diese materielle Benutzeroberfläche dafür hat nur die Linie. Und dann hast du das Gliederungsformular hier sind wir Verschiebungen und Gliederungsrechteck. Auch hier der Schwebezustand, der zu dem Prinzip zurückgeht, wo etwas aufleuchtet oder sich anfühlt, als wäre es am Leben. Wir verwenden das Blau für den Umriss oder für die abgelegte Material-Benutzeroberfläche, Datumsauswahl, Dropdown-Regel, verwenden Sie die Zeile für, die Zeile wird blau. Und dann haben wir wieder den aktiven Status, das ist nur der Eingabestatus. Der Fehler bleibt hier. Und ein deaktivierter Zustand als 20% Transparenz innerhalb der Kalenderdialogauswahl. Das ist selbst ziemlich kompliziert, nur die Box hier, weil es viel los ist. Du kannst einen Monat zurückgehen, du könntest einen Monat vorwärts gehen. Wie ich schon sagte, Sie haben das graue Rechteckfeld um die Daten herum. Es ist heute. Sie haben die blaue Indikation, die das ausgewählte oder gehandelte Datum ist. Und dann hast du auch einen Hover-Status , der herumlaufen und deiner Maus hier folgen würde. Es gibt also viel zu tun in das Dialogfeld. Sie können diese auch verwenden und Sie können sie wieder mit einem Datumsfeld kombinieren. Wenn Sie eine Datumsauswahl haben, kann der Benutzer genau wie das Datumsfeld in den Formularfeldern eingeben , die wir zuvor gesehen haben öffnet nur einen Tastaturpad-Typ in den Zahlen, führt die Schrägstriche aus sie und dann werden sie das vollenden. Oder sie können auf das Menüsymbol klicken, das dann das Dropdown-Menü oder das Dialogfenster der Datumsauswahl öffnet , in dem sie auswählen können, die Auswahl für das Datum treffen. Sie können auch ziemlich schlau mit Ihrem Datumsdialogfeld oder Ihrer Dropdown-Auswahl werden. Und Sie können die Auswahl von Jahren in der Vergangenheit etwas einfacher machen und Sie können Monate hinzufügen. Und wieder würde dies bei der Erschwinglichkeit helfen, es für den Benutzer ein wenig einfacher zu machen, Jahre zurückzugehen, hier in verschiedene Monate und dann auch hier die Auswahl zu treffen. Wenn wir zur mobilen Datumsauswahl kommen, empfehle ich Ihnen, und es empfiehlt sich, die Vollbild-Immobilien zu nutzen . Und ich zeige Ihnen einige Beispiele, die wir für eine Anwendung entwickelt haben , an der ich arbeite. Das ist großartig für. Nochmals tippen Sie auf Immobilien bei nutzt die Vollbild-Immobilien , die wir haben, die wertvollen. Screen Sie Immobilien, die wir auf mobilen Geräten haben. Und es macht es sehr einfach, zwei verschiedene Jahre zu wischen . Ich zeige dir hier in einer Sekunde ein Beispiel. Auch hier macht es sehr deutlich den Gebrauch, wenn dies die Vollbild-Immobilien benötigt, können Sie diese Balken hier verwenden, um anzugeben, dass der Datumsbereich, in dem Sie für eine Person ausgewählt haben Datum auch. Und wieder handelt es sich um mehr nutzbare Immobilien, einfach auf und ab wischen und zukünftige Monate sehen können. Sie könnten es sehen oder in den vergangenen Monaten können Sie es in Google Flight-Beispielen sehen. Wenn Sie gehen, schauen Sie sich Google Flights auf Ihrem Handy an. Und dann ist hier die Datumsauswahl, wir für eine Anwendung verwenden , an der ich arbeite. Dies ist für eine Solaranwendung, und im Wesentlichen haben Sie die Datumsauswahl hier. Sie können in die Zeit zurückgehen und Ihr System analysieren. Und wenn Sie diesen Dienstag anklicken oder auf diesen Dienstag tippen, sehen Sie das Datum erneut. Du kannst zurückgehen. Schauen Sie sich an dieser Stelle an, wie einfach es ist, nach verschiedenen Monaten zu wischen. Alles klar, damit ich leicht in die Vergangenheit gehen kann. Nehmen wir an, ich wollte mir den 23. September hier ansehen, ich kann auf den 23. klicken, auf Fertig drücken. Und das würde meine Auswahl hier ändern. Viel einfacher als mit diesen Pfeilen hin und her zu gehen, z. B. eine schnelle Möglichkeit, dorthin zu gelangen und ein Datum auszuwählen. Und dann zeige ich dir hier das benutzerdefinierte Datumsfeld. So das gleiche Prinzip hier. Wir drücken das Custom, die Folien rein und Sie haben das Start- und das Enddatum. Auch hier ist es wirklich einfach für die auf einem mobilen Gerät, diese verschiedenen Monate zu wischen. Nehmen wir an, ich wollte den 29. September hier bis zum 13. machen. Und Sie konnten die Angabe der orangefarbenen Balken sehen , um dem Benutzer den Datumsbereich zu vermitteln. Und wenn du auf Fertig drückst, haben wir die Reichweite hier. Und der Benutzer kann wieder reingehen und verschiedene Daten hinzufügen, die er benötigt. Das ist am besten für Datumsauswahl im Internet zu üben, Sie können Dinge verwenden, wie diese gut aussehen. Und dann könnten Sie diese Art der Interaktion auch für mobile Datumsauswahl verwenden. Lassen Sie uns auf einige Do's eingehen und verwenden Sie kein Datumsformularfeld für Geburtstage. Wenn Sie also ein Geburtsdatum machen, verwenden Sie das Format wie dieses, in dem wir MM, DD, YY anzeigen. Verwenden Sie niemals eine Datumsauswahl für ein Formularfeld für das Geburtsdatum. Dies wird angezeigt, wenn Sie darauf klicken und der Benutzer auf das Feld für das Datumsauswahlformular klickt, wird das Dropdown-Menü standardmäßig auf das heutige Datum eingestellt. Wenn Sie sich also vorstellen können, geboren 1979, muss ich in diesen Monaten zurück und bis 1979 erschließen. Als würde niemand das tun wollen, wo ich hier in einem Formularfeld einfach das Format ba, ba, ba, ba, ba, ba, ba, ba, done eingeben kann . Denken Sie daran, für mobile Geräte genügend Platz für Ihren Kalender zu geben und denken Sie auch daran , einen guten Tippplatz zu geben. Wenn Sie sich an das vergangene Video erinnern, habe ich darüber gesprochen, dass die Richtlinien für die Apple-Benutzeroberfläche mindestens 40 Pixel mal 40 Pixel für jede Art von Tipp-Immobilien auf Ihrem Mobilgerät enthalten. Sie können hier sehen, ob wir den Kalender wirklich klein gemacht haben, es wird wirklich schwierig sein, auf einen bestimmten Wert zu tippen, besonders wenn Sie große Daumen oder Finger haben. Hier sind also 50 mal 50 Pixel. Du siehst, dass das nicht gut genug ist. Es wird jemanden wirklich schwer machen nur einen dieser Werte auszuwählen, wo hier jeder dieser Buchstaben diese Zahlen sind genau bei 50 mal 50 Pixel verteilt ist. Damit wir diesem Prinzip folgen. Okay, das war also Datum passend, Datumsauswahl. Und wir sehen uns im nächsten Video, in dem wir Optionsfelder, Kontrollkästchen behandeln , Kontrollkästchen und Muster und Komponenten der Benutzeroberfläche umschalten. Wir sehen uns dort. 9. Radio-Buttons, CheckBoxen, Toggles: Okay, in diesem Video werden wir über Optionsfelder, Kontrollkästchen und Umschaltungen sprechen. Für Optionsfelder. Sie werden verwendet, wenn es eine Liste von zwei oder mehr Optionen gibt. Ihre Funktion ermöglicht es dem Benutzer, genau eine Wahl auszuwählen. Das ist alles was du bekommst. Eine Wahl mit den Optionsfeldern. Und wenn Sie auf ein nicht ausgewähltes Optionsfeld klicken, wird das andere Optionsfeld deaktiviert , das ausgewählt wurde. Es ist also nur eine One-Choice-Funktion. Der Ursprung hier ist, dass ein Optionsfeld tatsächlich diesen physischen Optionsfeldern nachempfunden wurde , die sich in alten Autos befanden. Und was passiert ist, dass Sie diese vordefinierten Lieblingssender haben würden , die der Benutzer auswählen würde. Wenn Sie hier auf diese Auswahl klicken, wird das Auto wieder vorausgewählten definierten Radiosender abspielen, den Sie hatten. Und wenn Sie auf die andere AM-Sender klicken, würde derjenige, der gerade da war, wieder herauskommen, und diese würde wieder den anderen Lieblingssender spielen, den Sie haben würden. Es war also eine ähnliche Funktionalität von Optionsfeldern, was bedeutet, dass es sich jeweils nur um eine Auswahl handelt. Und anstatt rauszukommen und in der heutigen Welt zu kommen, sehen sie eher so aus. Es gibt Kreise für einen Standardstatus, und dann gibt es für den aktiven Status, du bekommst die beiden Kreise hier und die inneren Kreise füllen, immer so ausgefüllt. Sie können diese anpassen. Ich zeige Ihnen in einer Sekunde, wie Sie diese hier anpassen können. In den meisten Fällen ist jedoch in der Regel bereits ein vordefiniertes Optionsfeld im aktiven Status ausgewählt. Selbst wenn Sie zu einer Frage des Optionsfelds wie dieser kommen, sagte ich: Bist du über 21 und du drückst ja. Jetzt gibt es keine Möglichkeit, die Auswahl aufzuheben. Sie können diesen Status nicht einfach aufheben, was bedeutet, dass Sie in diesen Zustand zurückkehren. Sobald einer ausgewählt wurde, bleibt er ausgewählt und jetzt müssen Sie wählen, ob es sich um das eine oder andere handelt, entweder ja oder nein. Das sind die Hauptfunktionen von Wind und warum Sie ein Optionsfeld verwenden sollten, insbesondere über ein Kontrollkästchen. Checkbox gibt Ihnen mehrere Auswahlen. Wäre ein Optionsfeld nur ein Auswahlkriterium oder eine Funktion ist. Sie können hier einige Anwendungsfälle sehen wenn Sie auswählen möchten, um wie viel Uhr Sie möchten, wie viel Uhr ist Ihre Abendessenzeit? Und du wählst fünf Uhr, sechs Uhr oder sieben Uhr, es wird nur einmal sein. Du hast nur eine Zeit, sag an diesem Tag, dass du zu Abend essen wirst. Wenn es andere Zeiten gab, die Sie nicht sehen, können Sie es wie folgt mit einem geöffneten Formularfeld kombinieren , wenn Sie Anderes drücken als das ausgefüllte geöffnete Formular geht aus dem deaktivierten Status, sich wieder in 20% Deckkraft und wird jetzt zum Standardstatus. Und ein Benutzer kann einen Slot betreten, den er aufgrund seiner Essenszeit nicht sieht. Cool. Sie können hier benutzerdefinierte Optionsfelder , wo wir in diesem Fall Ihr Geschlecht auswählen können. Und so bist du entweder männlich oder weiblich. Und wenn Sie eine Frau sind, sehen Sie, wenn Sie mit der Maus hierher fahren, den rosa Umriss als Schweben. Und dann haben Sie diesen ausgewählten Status, der hier der Vollfarbstatus ist. Aber auch hier verwenden wir Optionsfelder für die richtige Menge an Inhalt oder Funktion, was nur eine Auswahl ist. Sie können sehen, dass dies ein benutzerdefinierter Stil für ein Radio ist, aber es sieht nicht wie ein Optionsfeld aus, aber es funktioniert genauso wie ein Optionsfeld, bei dem Sie auf Mel klicken würden, die Auswahl der weiblich und es würde das Männchen auswählen. Hier. Sie können die gleiche Auswahl hier sehen ist ich habe Mel ausgewählt und weiblich nicht. Und wenn Sie den Mauszeiger über den weiblichen Zustand hier bewegen würden , würde er klicken und klicken. Sie würden hier auch die weibliche Karte auswählen. Der Unterschied besteht darin, dass wir das Optionsfeld hier auf der Karte selbst aufgenommen haben, oder? Also haben wir die Karte hinzugefügt. Ohne die Karte würde es ungefähr so aussehen. Wir haben die Karte hier hinzugefügt, um ihr etwas mehr Flair Politur zu geben. Wenn Sie mehr als drei Optionsfelder wie diese haben , legen Sie sie vertikal aus. Es ist okay, sie hier Seite an Seite zu machen. Wenn Sie zwei oder drei haben, können Sie wahrscheinlich auf vier drücken. Aber mehr als das, Sie möchten vertikal auflegen, es ist einfacher zu lesen und einfacher zu scannen. In Ordnung, hier ist eine Auswahl, bei der Sie eine ganze Reihe dieser Knöpfe hier angelegt haben . Und was passiert, wenn sie so vertikal angelegt sind , ist, dass Sie möglicherweise nicht genug Immobilien haben , damit all diese passen, und Sie möchten diese definitiv nicht in zwei Zeilen aufteilen, sieh nur, wie seltsam das aussieht. Und was passiert ist, dass es dem Benutzer schwer fällt, die Verknüpfung zwischen dem ausgewählten Optionsfeld und der Uhrzeit zu scannen die Verknüpfung zwischen dem ausgewählten Optionsfeld . Sie können also sehen, dass die sieben Uhr eingegeben ist, aber manchmal kann es verwirrend sein, wenn der Knopf hier um sechs Uhr gewichtet ist, oder ist es sieben Uhr? Wo wenn Sie es vertikal so auslegen, kann es mehr Bildschirm-Immobilien benötigen. Was die Funktion angeht, ist es jedoch viel klarer in Bezug auf die Beziehung zwischen dem Optionsfeld und dem Zeitfeld. Wenn Sie mehr als beispielsweise zehn Optionen haben, ist es besser, ein Dropdown-Menü erneut zu verwenden. Das Dropdown-Menü dient der gleichen Funktion. Es ist eine Auswahl nach dem anderen. wie viel Uhr gehst du ins Bett? Und du wirst hier unseren Geistertext machen. Beispiel 1030, sie können hereinkommen, auf das Dropdown-Menü klicken, 1030 auswählen oder was nicht, egal wann Sie ins Bett kommen, vielleicht vier Uhr morgens. Wir sind hier. Es braucht etwas zu viel Bildschirm-Immobilien. Und es ist viel, sofort nach einem Benutzer zu suchen, um all diese Optionen zu sehen , wo ein Dropdown besser ist, weil es es im Fenster versteckt. Sie speichern Bildschirmimmobilien und der Benutzer kann scrollen oder wischen, um sein bevorzugtes Zeitfenster zu finden. Okay, also das Nächste ist, sich nur eine Option nach der anderen zu merken. Nur. Wähle die Nummer eins bis fünf, du wählst ihnen nur eine Nummer, Nummer eins. Hier sehen Sie, dass wir die Grundregeln von Optionsfeldern brechen . Sie können nicht mehr als eine auswählen lassen. Das bezieht sich eher auf eine Kontrollkästchenart der Interaktion und nicht auf eine Art der Interaktion mit Optionsfeldern. Alles klar, so gutes Segue. Reden wir über Checkboxen. Auch hier werden Kontrollkästchen verwendet, wenn es eine Liste von zwei oder mehr Optionen gibt. Und ihre Funktion ermöglicht es einem Benutzer, mehr als eine Auswahl innerhalb der Auswahlwerte auszuwählen . Es gibt also keine, es ist kein Kontrollkästchen standardmäßig aktiviert und der Benutzer kann mehrere Optionen gleichzeitig deaktivieren. Oder Sie können einige Fälle haben , in denen Sie eine Liste filtern. Sie können alle diese bereits vorab auswählen lassen und der Benutzer kann basierend darauf hereingehen und die Auswahl deaktivieren. In diesem Fall möchten wir jedoch, dass Sie hereinkommen und Ihre Lieblings-Eissorten auswählen. Sie können hier sehen, wo der Benutzer auf eine davon klickt oder tippt. Und dann sehen Sie die Mehrfachauswahl hier mit dem Kontrollkästchen. Auch hier können Sie die Kontrollkästchen mit den Drop-downs kombinieren, wie wir im Dropdown-Video gesprochen haben, in dem wir das Formularfeld haben, auf das Sie klicken, Sie haben die Kontrollkästchen hier, auf die Sie klicken Vanille Rocky Road Kekse und Cremes. Und dann werden Sie sehen, wie die Auswahl der Pillenform hier angezeigt wird. Und wieder kann der Benutzer auf eine davon klicken, um sie zu löschen, was ihn auch im Kontrollkästchen deaktivieren würde. Stile sind ziemlich einfach, es hat nur eine Gliederung als Standard. Auch hier kannst du zwei Dinge für den Schwebeweg tun. Sie können den Umriss blau machen oder Sie können ihn mit Blau füllen und dann den aktiven Status, wenn er ausgewählt ist, haben Sie das kleine Häkchen. Und dann können Sie den deaktivierten Status haben, wenn etwas im aktiven Status ausgewählt ist. Also nochmal, 30% Deckkraft. Oder Sie können es im Standardstatus haben , in dem nichts ausgewählt ist. Und wieder ist das 30% Deckkraft. Sie können Kontrollkästchen anpassen. Also nochmal, benutze diese einfach für den richtigen Kontexttyp , bevor wir sie für wie Bist du 21 oder älter? Ja oder nein oder männlich oder weiblich? Eine Auswahl pro Kriterien, bei der für die Optionsfelder, in denen die Kontrollkästchen Vielfaches ausgeführt werden können. In diesem Zusammenhang werden wir jemanden fragen, was sein Favorit ist, wählen seine Lieblingsaktivität aus. Wenn der Benutzer seinen Mouseover auf einem dieser Punkte bewegt, können wir den Umrissstrich verwenden, um anzuzeigen, dass diese lebendig und anklickbar und anklickbar sind. Und wenn sie auf eine davon klicken und darauf tippen, füllen wir das Kartenformular hier aus. Und jetzt können Sie sehen, dass es sich um benutzerdefinierte Kontrollkästchen handelt. Sie ermöglichen es einem Benutzer, mehr als einen auszuwählen und dann ein bisschen schicker als nur das Kontrollkästchen hier mit Text daneben Wir können coole kleine Illustrationen und Icons hinzufügen. Ich habe auch ein ganzes Video über Icons und Ikonographie und die Best Practices sie gegen Ende des Unterrichts zu verwenden. Okay, lass uns rübergehen, um umzuschalten. Umschaltgeräte sind so ziemlich ein Schalter, der es einem Benutzer ermöglicht, Dinge ein- und auszuschalten. Und es repräsentiert vieles von dem, was wir in unseren Häusern sehen, nämlich Lichtschalter. Es werden also umsetzbarere Elemente in den Einstellungen verwendet. Die Sache ist wie WLAN und Bluetooth. Sie werden das oft sehen oder Benachrichtigungen ausschalten. Aber die Kernfunktion zu einem Ein- und Ausschalten. Du ziehst etwas an oder du schaltest etwas aus. Wo ein Kontrollkästchen eher ein Auswahlkriterium und ein Optionsfeld ist Auswahlkriterium und ein , ist auch ein Auswahlkriterium. Ein Kippschalter hat in diesem Sinne etwas mehr Einzigartigkeit , da es eher um einen Switch-Typ handelt. Du siehst es hier wie erhaltene Benachrichtigungen. Sie werden sehen, dass der Standardstatus grau ist. Und wenn der Benutzer es einschaltet, wird er sagen, dass Benachrichtigungen aktiviert werden. Wenn es aktiviert ist, wird angezeigt, dass Benachrichtigungen ausgeschaltet werden. Auf eine Weise können Sie die beschrifteten Texte ändern, um den Status anzugeben, in dem sich dieser befindet. Du kannst es auch hier machen. Benachrichtigungen erhalten, die Sie nach links verschoben haben, im rechten Büro eine dunklere Farbe, jetzt hat es die gleiche Farbe wie das Optionsfeld oder der Umschalter. Und wenn Sie es dann einschalten, wechselt er in den Farbzustand , der für den Ein-/Ausschalten verwendet wird , und aus geht zurück in diesen grauen Zustand. Dasselbe Deal hier. Hier ist ein weiteres Beispiel, in dem es etwas kleiner und häufiger im Web ist, ist dieser Typ. Und du klickst auf den Kreis, gleitet rüber. Auch hier fügen wir etwas Farbe hinzu, um anzuzeigen, dass dies aktiviert ist. Und dann können Sie es als Call to Action wieder ausschalten oder einschalten, wenn es sich hier im Standardstatus befindet. Lass uns auf ein paar Dos und Don'ts eingehen. , wie ich bereits erwähnt habe, Verwenden Sie, wie ich bereits erwähnt habe, Farbe nicht nur auf der Innenseite des Feldes, sondern auch im Text, um den aktuellen Status anzuzeigen. Und vermeiden Sie es dort, wo sich der Text innerhalb des Umschalters befindet innerhalb des Umschalters , denn es ist unklar, ob Sie sich das ansehen, ob ich ihn durch Schieben ausschalte oder ob der Zustand ausgeschaltet ist oder in diesem Fall hier ist es eingeschaltet oder werde ich es einschalten, indem ich mich mit diesem Toggle beschäftige? Ändern Sie dann erneut die Texte, um dem Benutzer mitzuteilen , was passiert. Anstelle eines Aufrufs zum Aktionstext können Sie also auch die Status-Texte angeben, in denen nur wie der Status dieses Umschalttastes im aktuellen Moment ist, welches WLAN ausgeschaltet ist. Und wenn Sie darauf tippen, schieben oder tippen und darauf klicken, sehen Sie, dass die Textänderung Wi-Fi aktiviert ist. Vermeiden Sie so etwas mit dem Kontrollkästchen, in dem nur WLAN steht und es aktiviert ist und WLAN aktiviert ist. Das Kontrollkästchen ist wiederum eher ein Auswahlkriterium, bei dem, wenn Sie über ein Wi-Fi für solche Kriterien verfügen , besser einen Umschalter verwenden sollten. Denken Sie daran, dass links immer der Off-State ist und rechts immer der On-State ist. erneut mit den aktuellen Konventionen bestehender Umschaltgeräte überein. Schalten Sie das nicht aus und links ist eingeschaltet. Okay, cool. Das waren Optionsfelder und Checkboxen und Umschaltungen. Und das nächste, das ich im Video behandeln werde adressierte Formulare und Suchformulare. Und wir sehen uns dort. 10. Adress- und Suchformel: Okay, lasst uns also über Adressformulare und Suchformulare sprechen . Diese beiden sind so üblich und sie klingen einfach, aber sie sind eigentlich ziemlich knifflig, besonders Suchforen, in denen ich diese einfach ausbrechen und einfach machen wollte, reden und Beispiele und machen und nicht nur für diese beiden Arten von Formularfeldern. Auch hier ist ein Adressformular, wie es klingt, Formulare für Ihre Adresse. Sie sind sehr verbreitet. Wir benutzen sie ständig. Mein Favorit zu verwenden ist das eine Formularfeld, das Adressformular automatisch ausfüllen. Anstatt die Privatadresse mit Ihrer Adresse, Ihrer Stadt, Ihrem Bundesland, Ihrer Postleitzahl, Ihrem Land, Ihrem Land zu haben. Was Sie tun können, ist, dass Sie so etwas tun können , wo Sie Ihre Privatadresse haben, die Geistertexte haben, einfach standardmäßig Ihre Adresse eingeben. Und während Sie hier die Privatadresse eingeben, verwenden Sie die automatische Suche oder die automatische Vervollständigung hier, und das wird die Adressdatenbank basierend auf der Zeichenanzahl durchsuchen , die Sie haben Ihr Auto in Ihr hier ausgefülltes Formular eingelegt. Normalerweise beginnen diese erst, wenn Sie mindestens drei oder vier Zeichen in den Formularfeldern haben . Und dann wird sich das verengen diese Dropdown-Liste der Ergebnisse einschränken. Und in der Liste hier haben wir möglicherweise 30 oder 40 Ergebnisse basierend auf Ihrem Input, aber wir zeigen jeweils nur fünf Strich sieben auf einmal. Es ist einfacher für einen Benutzer, fünf oder sieben davon zu scannen , um zu sehen, ob es sich dort um Übereinstimmungen handelt. Wenn ja, sehen Sie das Spiel nicht, sie können leicht fest tippen. Während sie weiter tippen, diese Adressliste mit automatischer Vervollständigung filtert sich diese Adressliste mit automatischer Vervollständigung basierend auf den Zeichenanzahlen. Und dieses Suchergebnis wird kleiner und kleiner und genauer auf die Adresse, die Sie als Benutzer eingeben, bis Sie Ihre Adresse gefunden haben. An dieser Stelle kann der Benutzer also aufhören zu tippen. Sehen Sie sich hier die Adresse an, die sie eintragen möchten , nämlich fünf mal fünf Gary Street, San Francisco. Sie können auf ihrer Tastatur einen Pfeil nach unten drücken. Auch hier müssen Sie den Hover-Status haben, sonst wird der Hover-Status auch angezeigt, wenn der Fehler, wenn der Benutzer die Tastatur auf der Tastatur auf und ab tastete . Wenn sie dann die Eingabetaste drücken, können Sie jetzt sehen, dass das eine Adressformular den Straßennamen, die Stadt, den Bundesstaat und auch das Land hat die Stadt, den Bundesstaat . Und Sie können auch dazu eine Postleitzahl hinzufügen. Sie können ganz einfach X drücken oder X im Forumfeld tippen, wodurch Sie hier in den Standardstatus zurückkehren. So eine sehr einfache Möglichkeit, Adresse von jemandem auf dieses Keyword zurückkehrt, Erschwinglichkeit, wie die Erschwingung von Benutzern, Zeit zu sparen und ihm Energie zu sparen. Hier ist eher ein traditioneller manueller Weg. Auch hier ist es kein Make oder Break. Das wirst du dauernd sehen. Aber ich zeige Ihnen eine Möglichkeit , wie wir die automatische Suchdatenbank für Adressfelder zur automatischen Vervollständigung nutzen können automatische Suchdatenbank für Adressfelder zur automatischen Vervollständigung , um hier alle Informationen zu füllen , die Sie für eine Adresse benötigen, auch wenn Sie sie beschädigen müssen so raus, wo Sie die Adresse, die Stadt und das Bundesland sowie die Postleitzahl haben. Wie das also aussehen würde , ist in etwa so etwas und Sie müssten Ihre Adresse eingeben. Du hättest deine zweite Adresse, du tippst deine Stadt ein. Sie hätten ein Dropdown-Menü für Ihren Bundesstaat. Sie hätten eine Postleitzahl und ein Dropdown-Menü für Ihr Land. Verwenden Sie auch nie das Dropdown-Menü für eine Stadt. Sie können jederzeit das Dropdown-Menü für eine Statusauswahl verwenden. Selten tippst du jemals den Staat hier ein. Verwenden Sie hier also immer einen Freiformtext für die Stadt und ein Dropdown-Menü für den Staat und das Land. Okay, also nochmal, wenn du das vermeiden kannst, tu es. Und hier können Sie den , den ich Ihnen oben gezeigt habe, mit dieser Art von Formularfeld-Interaktionen kombinieren den ich Ihnen oben gezeigt habe, . Nehmen wir an, Sie haben die Adresse 12, Sie haben die Stadt, den Bundesstaat, die Postleitzahl. Und wir wissen bereits, dass die meisten Menschen für unseren Service, den wir anbieten, in den USA sein werden. Wir können diese USA verlassen. Was also hier passiert, ist, dass ein Benutzer in das Adressfeld Nummer eins geht , er gibt seine Adresse ein , er sieht die Übereinstimmung. Jep. Das ist die 515 Geary Street, San Francisco. Darauf klicken sie. Und was es tut, ist, dass es die Adresse, die Stadt, den Bundesstaat, die Postleitzahl und das Land in diesen Formularfeldern ausfüllt die Stadt, den Bundesstaat, , damit sie nicht in jedes dieser Formularfelder eingehen müssen . Dies ist eine kluge Art, die Adresse Forms zu machen. Schauen wir uns das Suchformular an. Suchfeld ist also im Wesentlichen eine Kombination aus einem Eingabefeld und einer Absendeschaltfläche. Und sie scheinen super einfach zu sein. Aber es gibt tatsächlich viel zu ihnen. Und für komplexe Websites kann das Suchfeld die primäre Art sein, wie ein Benutzer alles oder das erste findet, was tut, wenn er auf Ihre Website kommt, denken Sie darüber nach wie Amazon. Das erste, was Sie bei Amazon machen, ist, dass Sie zur Suche gehen. Du durchsuchst das, wonach du suchst. In diesen Fällen ist das Suchformular eine große Sache. Und die Ergebnisseite, die Ihnen das Suchfeld bietet, ebenso eine große Sache. Denken Sie daran, dass die Suche nur erforderlich ist , wenn Sie viel Inhalt haben. Wenn Sie nicht viel Inhalt auf Ihrer Website haben, müssen Sie keine ungerade Größe suchen, bei der wir Produkte priorisieren , die wir erstellen. Suche erfolgt später, nachdem wir mehr Dinge haben , z. B. wenn ein Benutzer eine Reihe von Informationen eingibt, die er suchen muss. Normalerweise beginnen wir nicht mit der Suche , da wir noch nicht einmal ein Produkt haben. Wir starten ohne Suche und lassen Benutzer Informationen eingeben, auf die sie gewartet haben, technisch gesehen, auf die Sie irgendwann in unserer Anwendung suchen möchten . Und dann würden wir zu diesem Zeitpunkt später die Suche hinzufügen. Das ist also nur eine Art Umfangsmechanismus oder eine Priorität für die Einführung neuer Produkte. Aber wenn Sie eine E-Commerce-Website haben, auf der Sie nur eine Menge Dinge haben, die jemand finden muss, dann sucht man super wichtig und sollte fast die Nummer eins sein, die Sie tun würden, Sie würden neben dem Inhalt und den Produkten in den Checkout-Flows, die Sie haben würden , mit dem Aufbau und den Produkten in beginnen. Machen Sie erneut die Suche auf jedem Bildschirm einer komplexen Website zugänglich jedem Bildschirm einer komplexen Website und machen es Benutzern nicht schwer , die Suche zu finden. Normalerweise oben rechts oder in der Mitte Ihrer Navigationsleiste auf Ihrer Suchseite. Hier sind ein paar Beispiele. Das erste Beispiel hier ist ein gemeinsames Suchfeld, aber es gibt keine Schaltfläche zum Senden. Und die Schaltfläche „Senden“ wird über die Tastatur Eingabetaste auf Ihrer Tastatur aktiviert . Und das sendet hier das Suchfeld und bringt den Benutzer zur Ergebnisseite. In diesem Fall ist die automatische Vervollständigung wiederum sehr wichtig. Und Sie können Geistertexte verwenden, um auf einige der möglichen Suchanfragen hinzuweisen , die ein Benutzer durchsuchen soll. Das zweite Beispiel hier ist eine physische Schaltfläche. Auch hier kann der Benutzer weiterhin die Eingabetaste auf der Tastatur drücken , um die Suche zu senden und zur Suchergebnisseite zu wechseln. Oder sie können auf die Schaltfläche Suchen klicken , um sie zur Suchergebnisseite zu gelangen. Und in beiden Fällen ist die Autocomplete immer noch sehr wichtig. Denken Sie jedoch daran, dass die visuelle physische Suchschaltfläche dem Benutzer vermittelt , dass er, wenn es keine Übereinstimmung bei der automatischen Vervollständigung gibt, immer noch auf die Schaltfläche „Senden“ klicken und die Übereinstimmung finden kann , die wir hatten konnte die automatische Vervollständigung nicht finden. Ich weiß, es klingt irgendwie komplex, aber lass mich dir das Beispiel hier zeigen. Google ist also ein großartiges Beispiel für ein Suchfeld ohne die Schaltfläche „Senden“. Aber ich möchte Ihnen zeigen, wie Sie entweder auf der Tastatur absenden oder eine physische Taste haben, auf die Sie klicken können oder trotzdem die Eingabetaste auf Ihrer Tastatur drücken können. Aber ich möchte Ihnen zeigen, wie die Autocomplete dabei eine Rolle spielt. Sagen wir hier, ich bin bei Google und tippe Typografie. Sie können sehen, dass es mir in diesem Fall das gibt, es gibt mir, ich denke, zehn Suchergebnisse hier, die am häufigsten vorkommen. Was ich an diesem Punkt tun könnte, ist, dass ich auf meiner Tastatur einen Pfeil machen kann , ich schmale mich ein. Ich gehe mit dem Pfeil nach oben. Ich kann X out oder ich klicke in eine dieser Bearbeitung, bringe mich zu meiner Ergebnisseite. Aber während ich weiter tippe, werden die Suchergebnisse immer weniger. Und ich fange einfach an, hier ein paar seltsame Zahlen zu tippen. Alles klar, jetzt gibt es keine Suchergebnisse mehr. Aber ich kann immer noch die Eingabetaste auf meiner Tastatur drücken. Welches System wir auch tun , wird seine beste Arbeit leisten, um die Optionen zu erfüllen, die es gab. Und gib mir die Ergebnisseite hier. Hier kommt die Autocomplete ins Spiel, ist praktisch. Und auch die Schaltfläche Suchen, da die Suchschaltfläche dem Benutzer immer noch vermittelt , dass Sie sie unabhängig von seiner Eingabe immer noch suchen können. Es könnte diese seltenen Fälle geben, in denen Ihre Ergebnisseite nichts hervorgebracht hat. Sie können in diesem Fall ohne Ergebnisse zur Ergebnisseite zurückkehren . Sie können sehen, dass Google ungefähr acht Ergebnisse hat. Darauf beruhend. Dies sucht im gesamten Web nach einem wirklich seltsamen Namen wie diesem, und es gibt immer noch acht Ergebnisse. Mal sehen, ob wir es dazu bringen können, wie keine Ergebnisse hier zu erzielen. Ja, es ist immer noch Ergebnisse. Sie können also sehen, was ich hier meine, dass Sie, wenn Sie etwas für die Suche entwerfen, nicht nur das Suchformularfeld, darüber nachdenken müssen, wie der Benutzer seine automatisch vervollständigt sucht. Die Art und Weise, wie sie die automatische Vervollständigung auswählen. Die Suchergebnisseite, die den Ergebnissen entspricht. Und wenn es keine Ergebnisse gibt, können sie immer noch die Eingabetaste auf der Tastatur drücken und zu einer Ergebnisseite wechseln. Und wenn es keine Ergebnisse gibt, müssen wir über diese Benutzererfahrung nachdenken. Haben wir gerade klar texas tut uns leid, es gab keine Ergebnisse für diese Suche. Und wie auch immer wir uns dieser Art von Edge-Fall nähern , ist wichtig. Auch wenn man darüber nachdenkt, einfach zu suchen, klingt es einfach, aber es ist viel komplexer. Und ich zeige Ihnen etwas mehr Komplexität, wenn es in eine mobile Schnittstelle eindringt , wie die Suche funktioniert. Lassen Sie uns schnell die automatische Vervollständigung durchgehen. Also nochmal, wir stimmen in Googles Fall fünf bis sieben zusammen, es sieht so aus, als hätten sie zehn gemacht. Die Übereinstimmungen, die am häufigsten vorkommen basierend auf der Auswahl , die der Benutzer vorgenommen hat. In diesem Fall sehen wir uns nur PAHO an. Wir versuchen, das Telefon hier abzugleichen, gehen wir davon aus, dass der Benutzer basierend auf den häufigsten Suchfunktionen suchen möchte aus, dass der Benutzer basierend auf den häufigsten Suchfunktionen suchen , die wir in unserem System hatten , die mit PAHO beginnen. Auch hier kann der Benutzer das x abbrechen. Und als ich gerade über die automatische Vervollständigung von SOS gesprochen habe, erscheint dieses Dropdown-Menü erst nach den ersten drei Suchen. Es gibt dem Benutzer eine viel klarere Liste dessen, was er sucht. Überlasten Sie Ihre Benutzer auch nicht mit Vorschlägen in fünf Strich sieben bis zehn Optionen hier auf der Autocomplete . Und vergessen Sie nicht zu definieren, wie der Hover-Status oder der Tastatur oben und unten sein kann. Auch hier können Sie dieselbe Interaktion für die Suche in Ihrer Web-Navigationsleiste verwenden. Und Sie können einen Standardstatus wie diesen ausführen, in dem wir tatsächlich die Wortsuche anzeigen und das Suchsymbol zeigen, es leuchtet und einen aktiven Status hat. Wir können mehr Immobilien wie diese nehmen, könnten entweder den Text überdrücken oder es könnte den gesamten Text verbergen. Hier. Du schaffst es sehr lang. Und der Benutzer fängt an zu tippen. Wir fügen die automatische Vervollständigung hinzu. Sie können hier X drücken , um die Liste zu löschen. Oder sie drücken PAHO und drücken tatsächlich die Tastatur Enter. Und wir müssten eine Suchergebnisseite definieren , für die unserer Meinung die besten Optionen für PAHO sind oder wenn es keine Ergebnisse gäbe. Oder sie können alles sagen, was ich tatsächlich nach Handyhüllen gesucht habe. Klicken Sie auf Handyhüllen und wir bringen sie zu einer Ergebnisseite, die aus den Handyhüllen zeigt. Und auf dieser Ergebnisseite sollten sie immer noch suchen können, sollten an allen Orten sein. Hier ist die gleiche Suchinteraktion für Mobilgeräte. Und alles, was wir hier gemacht haben, ist, dass ich ein Video habe, in dem ich gegen Ende des Kurses über Menüs und Schubladen spreche. Ich werde viel darüber sprechen, Ich werde viel darüber sprechen wie diese Navigationsleiste auf Elternebene in Ihrer Navigationsleiste funktioniert wird in Menüsymbole oder in diesem Fall wie ein Menü-Dropdown reduziert. Wir haben immer noch die Suchleiste hier. Und für das Handy wird die vollständige Navigationsleiste hier sperren des Benutzers und halten sie in diesem Suchstatus fokussiert. Ein anderes tun, einige Do und Don'ts für Beiträge für das Internet ist nur zu zeigen, ob Sie die Immobilien haben, zeigen Sie das Wort Suche. Es spart, es braucht ein bisschen mehr Platz. Sie können auch den aktiven Status der Suche erweitern , um dem Benutzer etwas mehr Immobilien zu geben . Aber wenn Sie den Raum haben, die zu gebende Suchleiste oder den Suchtext hier und das Suchformularfeld hier als bessere Beförderung angezeigt . Und es zeigt dem Benutzer, es gibt ihm auch ein bisschen mehr Tippziel, wo er für die Suchleiste tippen kann, anstatt so etwas zu tun, obwohl es glatt aussieht, es ist nur dieses kleine Suchsymbol. Wenn Sie die Immobilie haben, zeigen Sie das Formular ausgefüllte Shell, den Suchgeistertext hier, Es ist wieder anklickbarer Immobilien, Erschwinglichkeit. Es hat eine stärkere Beförderung erinnert den Benutzer immer daran, dass es hier eine Suche im Vergleich zum Symbol gibt. Aber wenn Sie nur das haben, wenn diese Antwort ist, wird diese Navigationsleiste auf einer mobilen Schnittstelle angezeigt. Dann ist es gut, nur das eigentliche Symbol selbst anzuzeigen , da Sie nicht den Platz für die gesamte Suchleiste haben . Erst wenn Sie das Zimmer haben, möchten Sie die Suchtexte und das Fremdfeld zeigen? Und vermeiden Sie es, so etwas für das Internet zu tun, wenn Sie offensichtlich den Raum haben das Forumsfeld und die Suchleiste anzuzeigen. Und sogar auf Mobilgeräten, wenn Sie hier Platz dafür haben, aber es ist akzeptabel, wenn Sie so etwas haben, wo es hier nur das eigentliche Suchsymbol war , wenn Sie auf dem Handy sind. Was ich auch für Mobilgeräte aufrufen wollte , ist, dass diese Art knifflige Interaktion ist, die Sie nicht unbedingt sofort aufnehmen würden, wenn Sie sich nicht viel mit der Suche in dieser Art von Denkweise beschäftigen. Wenn Sie also Interaktionsdesign oder eine UX-Perspektive betreiben , wenn Sie Geräte verwenden, denken Sie einfach darüber nach, wie sich diese Dinge verhalten. Dies ist eine sehr häufige Interaktion auf Apple. Interfaces ist das Nachrichten-Suchfeld. Wenn Sie sich jetzt die Nachrichten-Türken-Box in meinen Nachrichten anschauen , kann ich hier eine neue Nachricht mit dem kleinen blauen Feld erstellen . Ich habe auch die Einstellungen mit den drei Icons hier und ich habe diese Suchleiste hier. Was passiert, wenn ich auf die Suche klicke oder auf die Suchleiste tippe , ist, dass diese Suchleiste tatsächlich hochschwebt. Und es versetzt mich in einen Suchmodus, in dem ich an diesem Punkt nur tun kann , dass ich mich auf die Suche konzentriert. Entweder suche ich, ich kann Abbrechen drücken und in den Modus zurückkehren , in dem ich vorher war. Ich kann meine Suche eingeben, ich sehe die automatischen Vervollständigungen und die Übereinstimmungen zu meiner Suche unten. Ich kann den Text einfach X bis X drücken und weitere Texte eingeben. Dies ist eine sehr gute Interaktion, da sie den Benutzer auf ein bestimmtes Ziel und eine bestimmte Aufgabe konzentriert , nämlich in diesem Fall die Suche. Die Sache, die Sie vermeiden möchten. Dieser Typ, bei dem wir sagen, Sie drücken einfach „Suchen“. Jetzt bin ich im Suchmodus und konzentriere mich nicht auf den gleichen Suchpunkt. Ich kann hineingehen und auf Neue Nachricht erstellen drücken. Oder ich könnte hier in die Einstellungen gehen, ich kann neue Nachrichten auswählen, ich kann die Namen bearbeiten, ich kann die Fotos machen. Ich kann auch die Texte meiner Mutter hier im Suchstatus einsehen . Der Benutzer konzentriert sich also nicht auf diese Art von Zustand. Außerdem laufen zu viele Aktionen vor, die einzige Sache, die wir für diesen Benutzer erreichen wollen , ist die Suche. Sie tippen auf die Suche. Sie informieren die Benutzeroberfläche darüber, dass sie eine Suche wünschen. Daher ist es wichtig, sie auf diese Interaktion zu konzentrieren , im Vergleich zu so etwas. Es ist eine knifflige, knifflige Interaktion, aber du siehst, warum sie es tun. Es hat viel mit der Beförderung zu tun und den Benutzer fokussiert zu halten. Vergleich zu hier gibt es zu viele Dinge auf einmal. Großartig. Damit Adressformulare und Suchformulare abgeschlossen werden, sehen Sie im nächsten Video. Wir sprechen über Tableisten und Titelleisten. 11. Tab-Bars und Tab-Bars: Alles klar, Willkommen beim nächsten Video. Wir werden Tab-Leisten und Titelleisten abdecken. Fangen wir mit der Tab-Leiste an. Tabuwörter werden also auch als untere Navigationsleisten bezeichnet. Und sie erscheinen unten auf den Bildschirmen der übergeordneten Ebene einer Anwendung. Und Benutzer können schnell zwischen verschiedenen Abschnitten der Anwendung oder Zielen innerhalb der Anwendung wechseln . Und sie werden für Mobil - und Tablet-Anwendungen oder beim Anzeigen einer Website auf einem Mobil- oder Tablet-Gerät verwendet. Vermeiden Sie es jedoch, diese für alles zu verwenden, was auf den Website-Desktop zu Wir haben sie alle gesehen. Sie sehen aus wie diese hier in der Bot-Beauty-Anwendung, diesem kleinen Abschnitt hier, das ist Ihre Tab-Leiste. Es ist also ein Navigations-UI-Element. Und bevor wir auf einige der Best Practices und einige Tipps zur Verwendung eingehen , möchte ich ein wenig über Informationsarchitektur sprechen , denn wenn wir anfangen werden, mehr Videos zu erfahren, wir sprechen nicht nur über Ebenen der Informationsarchitektur, sondern auch für die Navigation. Wenn Sie also darüber nachdenken, Inhalte innerhalb Ihrer Website oder in den Navigationsleisten zu navigieren Inhalte innerhalb Ihrer Website oder in den Navigationsleisten oder wie eine Benutzererfahrungsanwendung für Benutzer navigiert, oder wie navigieren Benutzer über Ihre Benutzererfahrung hinweg? Vieles davon hat mit Informationsarchitektur oder IA zu tun . Die Kerngrundlage auf einer grundlegenden Ebene ist, dass wir ein System wie dieses haben, bei dem Sie eine Elternebene haben und dann eine untergeordnete Ebene haben. Das Kind hat also eine Beziehung zum Elternteil, und dann haben Sie ein Enkelkind-Niveau. Dann hat das Enkelkind eine Beziehung zur Kinderebene. In der Welt von gebe ich in diesem Beispiel wie Eiscreme. Die Elternstufe ist wie Eiscremegrößen, kleine, mittlere, große oder Kegelgrößen. Und die Kinderebene, die von Informationen, die sich auf das Elternniveau der Eiscremegrößen beziehen , sind Eiscreme-Aromen. Denn wenn Sie sich für eine große Größe entscheiden, erhalten Sie möglicherweise drei Messlöffel mit verschiedenen Geschmacksrichtungen. Nun, wenn Sie eine kleine Größe von Eiscreme wählen , E-Mail und erhalten einen oder einen Geschmack, wenn Sie eine kleine Größe wählen. Sie können also sehen, wie es eine Beziehung zwischen dieser untergeordneten Ebene und dieser Elternebene gibt. Und dann von der Enkelkind-Ebene in der Eiscreme-Analogie sind hier Eiscremebeläge. Und es hat eine Beziehung zu den Aromen, weil die Aromen diktieren oder angeben, welche Art von Topping Sie auf Ihrem Eis wünschen würden. Wenn wir über wichtige Informationsebenen nachdenken, ist der Elternteil am wichtigsten. An zweiter Stelle steht das Kind, und drittens für das Kind ist dieses Enkelkind. Und was die Hierarchie und das Wichtigste anbelangt, eines der interessanten Dinge ist eines der interessanten Dinge , dass dies auch für die Art und Weise gilt , wie Menschen über Informationen denken. Das nennt man ein mentales Modell. Und ich rede darüber, wenn wir zu den Menüvideos kommen. Aber wenn Sie irgendwo auf der Welt in eine Eisdiele gehen , haben sie Sie als erstes Eiscreme-Größen gefragt. Sie kommen nicht rein und fragen dich ein cooles Alles klar, naja, welche Beläge würdest du mögen? Das ist irgendwie merkwürdig. Es beginnt also normalerweise mit dieser festgelegten Informationsarchitektur , die für die gemeinsame Konvention von Eiscreme, Hierarchie und mentalen Eismodellen gilt die gemeinsame Konvention von Eiscreme, Hierarchie und mentalen Eismodellen , die auf der Welt existieren. Es beginnt also mit Größen, die zu Aromen gehören und das geht zu Belägen. Dieses Maß an Verständnis, wie Informationen in einem hierarchischen Standpunkt miteinander in Beziehung stehen, ist wichtig, wenn wir diese Klassen durchlaufen. Okay, cool. Sprechen wir also über Best Practices für Tab-Leisten. also, wie ich bereits sagte, Kategorisieren Sie also, wie ich bereits sagte, den Inhalt der obersten Ebene in Ihrer Tab-Leiste. Diese Destinationen sind also diese Kategorien, die Elternebene wie Zuhause, Profil, Shop, Durchsuchen, diese Art von Dingen sein sollten . Verwenden Sie die Tab-Leiste ausschließlich für Navigation und Ziele, nicht wirklich nicht verwandte Elemente. Es sollte also nicht wie Dinge sein bei denen ein Action-Button oder du etwas tun würdest. Diese sind zielorientiert und navigationsfokussiert. Für Ihr Handy und Tablet. Tabs. Nur zumindest muss man zwei Kategorien haben. Und maximal können Sie fünf haben, aber nicht mehr als fünf und nicht weniger als zwei, und ich werde auf das Do und Don'ts ein bisschen mehr eingehen . Verwenden Sie diese auch nicht für den Webdesktop. Sie eignen sich am besten für Mobil - und Tablet-Geräte. Und blenden Sie die Tableiste nicht aus, wenn der Benutzer auf eine andere Option in der Tableiste tippt. Die Zapfgröße pro Registerkarte beträgt mindestens 40 Pixel mal 40 Pixel. Aber du kannst es auf 75 bringen. Von 75. Sie sind besser als das, was wir Hamburgermenü nennen . Wenn Sie sich erinnern, habe ich ein ganzes Video nur in Menüs, aber das Hamburger-Menü ist eine Art A-UI-Element, das Menüoptionen enthält, wo der Benutzer darauf klickt. Es offenbart dem Benutzer diese Optionen, was uns Immobilien erspart. Und es kann viel mehr Optionen bieten als wir auf dem Bildschirm zeigen könnten. Aber wenn wir unser Tab-System oder unser Profil oder unser Navigationssystem auf übergeordneter Ebene mindestens zwei bis fünf kategorisieren unser Navigationssystem auf übergeordneter Ebene können, brauchen wir keinen Hamburger. Wir können die Tab-Leiste verwenden und es funktioniert besser, da diese Optionen auf der Hauptebene eines Bildschirms verfügbar sind. Auch hier geht es auf diese Erschwinglichkeit zurück. Der Benutzer hat das Glühen nicht. Klicken Sie in den Tippen ins Menü. Sehen Sie das Menü erneut auf das Menüelement und gehen Sie dann hin und her. Sie können problemlos mit einer Registerkarte in den Bereichen der übergeordneten Ebene Ihrer Website oder Ihrer Benutzererfahrung wechseln . Die Tab-Leiste, denken Sie daran, bleibt immer an der Unterseite Ihres Telefons oder Tablets befestigt. Es sollte niemals scrollen. Und stellen Sie sicher, dass es einen klaren aktiven und standardmäßigen Bleiben gibt, der den Status erfüllt , in dem sich der Benutzer befindet. Und ein Standardstatus, der besagt, dass der Benutzer oder die Ziele oder tippt, zu dem der Benutzer nicht gegangen ist und nicht aktiviert ist, dann hat er nie eine deaktivierte Option für den Status. Alle diese Tab-Optionen sollten antippbar sein und nicht deaktiviert sein, wo Sie hier nicht hingehen können. Sie können diese Abschnitte hier etwa 90 Pixel hoch bis zu 100 Pixel hoch machen. Und dann sieht man wieder, dass dieses rosa Punktrechteck 50 Pixel mal 50 Pixel beträgt. Also der Zielbereich, also der Tippbereich für den Benutzer. Es ist nicht das Icon. Der obere Bereich ist ein unsichtbarer Raum. Wir wollen diesen Raum hier größer machen als dieses Icon, oder? Diese hätten also alle einen Tippbereich, der so aussehen würde. Und stellen Sie sicher, dass Sie Bereiche mit mindestens 40 Pixel mal 40 Pixel tippen . Aber auch hier neige ich dazu, mit 50 mal 50 zu gehen , nur um es Benutzern ein bisschen einfacher zu machen , darauf zu tippen. Einige weitere Optionen hier sehen Sie den Profilbildschirm hier. Der Benutzer tippt auf das Bubba Illustrationssymbol. Sie gelangen hier zu einer Bobo Shopping Site und können jederzeit zur Kasse gehen und dann beginnen, in den Checkout-Workflow zu gelangen. Einige andere Beispiele hier für eine der Anwendungen, an denen derzeit gearbeitet wird. Und du siehst das Telefon. Wir werden die vier Tab-Optionen eindrücken . Und wenn wir zu einem Tablet kommen, können wir dies so einstellen, dass es zu den Immobilien passt , die wir für Tablet haben. Der Grund, warum diese so gut funktionieren, ist, dass sie in den am besten nutzbaren Immobilien auf mobilen Geräten untergebracht sind in den am besten nutzbaren Immobilien auf mobilen Geräten untergebracht . Wenn Sie eine Hand verwenden, wenn Sie Linkshänder sind, ist der gesamte Grünbereich auf Ihrem Mobilgerät leicht zu berühren und Sie müssen sich nicht dehnen oder es ist nicht schwer zu erreichen. Wenn du auf der rechten Seite bist. Wie die meisten Benutzer ist das alles. Das Grün ist großartig, natürlich, einfach zu befestigen, einfach durchzugehen. Sie werden also mit etwa 80% in einem natürlichen Raum platziert, 80 bis 90%, damit ein Benutzer je nach linker oder rechter Hand tippen kann. Und dann ist dieser Bereich hier oben schwer, wenn Sie hier sind, wo diese grauen Boxen hier sind, das ist ein schwieriger Bereich, aber einige der größeren Telefone benutzen wir unsere linke Hand. Wenn ich also Rechtshänder bin, halte ich dieses Telefon hier. Wir werden unsere linke Hand benutzen , um Dinge hier zu schließen. Und wenn du hier einen X-Button hast, ist es besser, deinen x-Knopf hier zu setzen. Mach es ein bisschen x. Okay, cool. Es ist also besser, Ihren x-Button hier auf mobilen Geräten zu haben . Dann hier drüben. Der Grund dafür ist, dass es ziemlich bequem , dieses x mit der anderen Hand zu erschließen. Also hältst du das Telefon mit rechten Hand und drückst hier mit deinem Finger oder Daumen deinem Finger oder Daumen mit der linken Hand oben an. Lassen Sie uns auf ein paar Dos und Don'ts bei guter Tab-Leisten-Verwendung eingehen, aber folgen Sie diesem Muster hier und Sie werden loslegen. Lasst uns mehr auf die Do und Don'ts eingehen. Verwenden Sie also erneut Ihre Tab-Leiste 45 Ziele oder fünf Symbole sind Registerkarten, max. Und halten Sie die Zeichnungen sehr einfach wie dieses Beispiel, das ich Ihnen hier mit diesem so detaillierten Haus zeige. Dies ist ungefähr so komplex, wie Sie etwas mehr als das bekommen möchten. Es ist zu kompliziert. Dann sollten Sie nicht mehr als fünf Destinationen verwenden. Es gibt sechs Tabs und Ziele hier. Die sind alle zu eng. Und wenn Sie eine Apple-Anwendung erstellen, müssen Sie sie an den App Store senden und Apple überprüft Ihre Anwendung. Und wenn es nicht zu den Richtlinien für die Benutzeroberfläche passt , wird es Ihnen tatsächlich verweigern Ihre Anwendung im App Store zu starten. Und was sind ihre strengen Richtlinien für Richtlinien , dass diese Tab-Balken nur fünf Ziele haben und nicht sechs oder sieben. Machen Sie also klar, was der aktive Schritt ist, der Schritt, den der Benutzer auf Sachen ist, die Sie zu Hause sehen , hier haben wir diesen kleinen orangefarbenen Punkt, und wir haben das Zuhause auch viel dunkler in der Farbe gemacht. Und die Standardstatus dieser Symbole, des Profils und der Analyse hier . Sie können sehen, wie diese ein bisschen grauer sind. Und die dunklere Farbe, mutigere Schrift und der kleine orangefarbene Punkt helfen. Das kannst du hier sehen. Das, obwohl das Zuhause hier kühn ist und wir haben einen etwas dickeren schwärzeren Umriss für das Home-Icon. Es ist immer noch nicht klar genug, in welchem Schritt die Benutzer in welchem Bereich der Anwendung sich der Benutzer befindet? Wir sind auf der linken Seite. Wenn du mit den Augen schielst und schaust, kannst du sehen, dass das Haus hier wirklich auftaucht. Auch. Denken Sie daran, konsistente Symbole zu verwenden, mischen Sie keine gefüllten oder gestreichelten Symbole. Sie können den rechts hier sehen. Wir haben hier eine inkonsistente Bildsprache, indem wir hier Hause ein gefülltes Symbol für das Profil auf einem Strichsymbol anzeigen. Auch hier wollen wir mit unserer Bildsprache übereinstimmen und mit dieser vereinheitlicht werden. Also entweder Best Practice, verwende gefüllte Icons und es werden nur gefüllte Icons verwendet. Streichelte Symbole und verwenden nur gestreichelte Symbole, aber mischen Sie die beiden nicht. Aber hier ist der Kicker. Sie können ein gefülltes Symbol für den aktiven Status verwenden. Auch hier sind sie alle Strich , wenn ihr Standardstatus ist. Sie können hier den Standardwert für Profil und einen Standardwert für Analysieren hier sehen . Wenn der Benutzer jedoch darauf tippt, füllen wir diesen Abschnitt der analysierten Seite aus. Wir füllen diesen Abschnitt des Profils auch mit unserer Marke aus. Wir haben eine orangefarbene Farbmarke. Sie können sehen, wie Sie das nutzen können, um noch mehr zu helfen und den aktiven Status Ihrer Bewerbung zu erstellen. Und es hilft, ein bisschen Marke und ein bisschen Geschmack in die Icons zu bringen . Füge niemals eine Schaltfläche in der Navigationsleiste hinzu. Diese dienen zu Zielzwecken, nicht zu Aktionen. Und dann benutze niemals eine Tab-Option wie zu Hause hier. Wenn Sie nur eine Option haben, benötigen Sie keine Tab-Leiste. Es besteht keine Notwendigkeit zu navigieren. Verwenden Sie kleine Texte, verwenden Sie jedoch einen guten Buchstabenabstand für den kleinen Text. Die kleinen Texte, die Sie verwenden können, sind also etwa zehn Pixel. Du kannst alle Mützen gehen. Verwenden Sie einen Buchstabenabstand von 1,5 Pixel. Oder du könntest 12 Pixel machen. Was ich hier habe, gibt hohe Pixel, Höhe, alle Kleinbuchstaben, aber beide haben einen Buchstabenabstand von 1,5 Pixel. Der Abstand des Buchstabenabstands ist das Leerzeichen zwischen den Buchstaben hier. Diese Art von Abständen. Sie möchten ein wenig MIP, zusätzlichen Buchstabenabstand für den kleinen Text, nur weil er einfacher zu lesen ist. Und du wirst nicht damit enden, dass deine Briefe zu sehr zusammengeknackt werden. zeig ich dir hier. Als wäre das zu eng. Das ist wahrscheinlich zu viel Buchstabenabstand. Und genau wie wir es getan hatten, war in Ordnung. Okay, cool. Und dann benutze niemals zwei Wörter. Sie können einkaufen sehen, zu Hause hier ist auf zwei Wörter gesunken, zwei Zeilen oder großen Text erstrecken. Sie können also sehen, dass dieser Text viel zu groß ist. Es sieht einfach pferdig aus. Es sieht nicht glatt aus, sieht nicht modern aus. Und das sind, diese sollen hauptsächlich Navigationsstücke sein und sollten nicht zu schwer sein wie im visuellen Gewicht. Weil Sie möchten, dass der Benutzer sich die Inhalte ansieht diese Tabs und vier enthalten, und eine Information im Vergleich zu etwas , das so sehr stark hervorsticht. Okay, gehen wir zur Tableiste, zu unseren Titelleisten. Eine Titelleiste bietet also eine zuverlässige Möglichkeit, Benutzer durch eine Anwendung zu führen. einer Titelleiste werden Informationen und Aktionen angezeigt , die sich auf den aktuellen Bildschirm beziehen. Und es bleibt auch fest, was bedeutet, dass es nicht immer oben bleibt, selbst wenn der Benutzer wischt oder scrollt. Sie werden oft mit einer Tab-Leiste in Mobil- oder Tablet-Anwendungen gepaart . Am häufigsten sehen Sie ein System wie dieses, wo Sie den Titel hier haben. Sie haben auf der linken Seite einen Handlungsbereich, rechts einen Handlungsbereich. Und dann haben wir die Tab-Leiste, die wir gerade hier oben gesprochen haben. Sie werden sehen, dass auf einer der beliebtesten Anwendungen das Instagram ist. Und sie verwenden eine Kombination aus einer Titelleiste und einer Tableiste. Sie haben also die Tab-Leiste hier. Sie verwenden auch die Technik eines gefüllten Symbols für den aktiven Status und den kleinen Punkt hier für den aktiven Status, den Status, in dem sich der Benutzer befindet. Und dann benutzen sie die Titelleiste für ihr Logo und einige auf der sehr scheinbaren Level-Homepage. Und sie haben die rechte Seite für Aktionselemente benutzt. Aber Sie können hier sehen, wenn der Benutzer von einer übergeordneten Ebene aus darauf tippt, dies wäre ein Bildschirm auf übergeordneter Ebene. In einem Bildschirm auf untergeordneter Ebene behalten wir immer noch die Tableiste bei, aber wir verwenden hier eher eine traditionelle Titelleiste in der Sie die französischen Bulldoggen hier in der Mitte als Titel und hinten haben in der Mitte als Titel und um zu dieser Homepage zurückzukehren. Und dann haben wir das Drei-Punkte-Menü hier mehr für Einstellungen , die sich auf diese Seite beziehen. Und sieh dir einfach diese süßen kleinen Hunde an. Sieh dir diesen Kleinen hier an. Okay, cool. Ich liebe diesen Typ. Ich habe einen dieser Hunde. Ihr Name ist zäh. Ich bin ein großer Fan. Hier ist der Zusammenbruch. Dieser Bereich hier, in dem Sie den Akku, Ihre Zeit und Ihre Wi-Fi-Konnektivität sehen , wird Statusleiste genannt. Und das ist ein, ein iOS oder Apple, Android hat eine Version davon. Sie werden auch Statusleiste genannt . Sie sehen für Android nur ein bisschen anders aus als iOS. Sie können die beiden hier sehen. Das ist Android, das ist Apple. Der Zusammenbruch ist hauptsächlich der obere linke Abschnitt hier. Dies wird hauptsächlich für die Zurück-Schaltfläche oder ein Menüsymbol verwendet. Der mittlere Abschnitt hier ist für den Titel für Android-Geräte, der Titel kann über links ausgerichtet sein. Ich bevorzuge diese in der Mitte, aber es hängt davon ab, dass sie, wenn Sie eine Anwendung für Android im Vergleich zu Apple entwerfen , wenn Sie eine Anwendung für Android im Vergleich zu Apple entwerfen, zwei verschiedene Arten von Benutzererfahrung und Benutzer haben Schnittstellenrichtlinien, und ich spreche mit beiden während des gesamten Unterrichts. Sie können diesen Abschnitt hier erstellen, wobei die Statusleiste oben in der Titelleiste dieselbe Farbe hat. Ich bin ungefähr 50 bis 80 Pixel groß. Und wieder ist dieser richtige Bereich ein großartiger Ort für Aktionen. Du hast also irgendwie diesen Titel. Es gibt Kontexte und Standort für den Benutzer. Sie haben die Zurück-Schaltfläche , mit der der Benutzer dorthin zurückkehren kann, wo er herkam. Und dann haben Sie oben rechts Aktionspunkte, die auf den Kontexten basieren , die der Benutzer sieht. Du kannst hier auch Buttons haben. Sie können Stornierungen haben, speichern die Schönheit dieses ist, dass die Knöpfe sehr wie immer in Ihrem Gesicht sind. Wenn Sie durch eine Site scrollen, sind die Schaltflächen immer da, sie bleiben dort fest, wo wir mit den Tab-Leisten gesprochen haben. Wir wollen keine Schaltflächen in unseren Steppsystemen, aber wir können sie in der Titelleiste haben. Dies sind vier sehr wichtige Aktionen hier, wie Speichern oder Abbrechen von Zuschauern, das Eingeben einiger Informationen und basierend auf Ihren Einstellungen. Oder wir wollten, dass diese Knöpfe nicht verloren gehen. Für eine sehr moderne Füllung. Ich persönlich mag kleine Texte, alle Caps mit viel Buchstabenabstand. Sie können das Beispiel hier sehen. Auf der linken Seite hast du wieder Titel, alle Caps. Und du siehst den auf der rechten Seite. Ich verwende 12.1212 Pixel Höhe, alle Kappen mit einem Buchstabenabstand von 2,5 Pixel. Und es lässt die Anwendung einfach viel moderner aussehen wie: Nun, wir werden das jetzt mit diesem Text hier machen. Wenn ich es auswähle, habe ich ihm hier viel Buchstabenabstand gegeben. Lässt die App ein bisschen schlanker aussehen, lässt sie etwas moderner aussehen. Und was wir tun wollen, ist etwas zu Enges zu vermeiden , wie wir es hier machen. Zu eng wie das ist nur 0. Dies ist der Standardwert. Für mich ist das zu eng. Wir müssen das ein bisschen mehr atmen lassen. Kleiner Profi-Tipp für dich da. Okay, also Gezeitenleisten bei Apple haben sie zwei verschiedene Typen. Sie haben hier einen Standardtitel, der die, worüber wir gerade gesprochen haben, eine Aktion auf der rechten Seite, Zurück-Schaltfläche auf der linken Seite und den Titel der Seite, die Sie in der Mitte betrachten, enthält. Und sie haben einen großen Texttitel , der der Titel oben unter der Schaltfläche Zurück ist . Und wieder ändert sich nichts mit dem Aktionspunkt. Und das nimmt mehr Bildschirm-Immobilien im Vergleich zu dem auf der linken Seite auf. Es hängt nur von der Anwendung und manchmal vom Apple-Gerät ab, damit Sie große Titel innerhalb des Betriebssystems festlegen können. Sag denn, für ein bisschen älter deine Augen nicht so gut. Es ist das, was wir als Barrierefreiheitsfunktion bezeichnen. Und es hilft Menschen , die keine kleinen Texte sehen können , diese kleinen einfacher für sie lesen zu können . Der Unterschied zwischen Android auf der linken Seite und Apple, auf der rechten Seite auch iOS genannt, ist so ziemlich dasselbe. Es ist nur der Titel, der normalerweise für Apple-Produkte zentriert wird . Und dann werden sie es auf Android hier ausrichten. Die gleiche Art von Deal, wenn es um Aktionspunkte geht , besteht hauptsächlich darin, dass sie demselben Paradigma folgen , in dem Sie Aktionspunkte oben rechts in der Tab-Leiste haben . Es ist, die Titel werden hier links gegen Mitte gehen. Ich mag es in der Mitte, weil es uns ermöglicht, diesen Bereich hier für alle Back-Buttons oder diese Art von Navigation zu nutzen . Normalerweise style ich gerne, wo Sie hier die Aktionspunkte für die Zurück-Schaltfläche und einen Titel am Anfang oder in der Mitte haben. Und es spielt keine Rolle, Sie könnten immer noch eine Android-Anwendung entwerfen. Und es kann immer noch den Titel hier in der Mitte des Zurück-Buttons haben , die Aktionselemente auf der rechten Seite, und es ist völlig in Ordnung. Alles klar, noch eine Sache, die du hier machen kannst Das ist ziemlich ordentlich wie wieder, das Titelbellen bleibt immer fest. bedeutet, dass die Titelleiste nirgendwohin führt, wenn der Benutzer auf einer Mobil- oder Tablet-Anwendung nach unten wischt , wenn der Benutzer auf einer Mobil- oder Tablet-Anwendung nach unten . Aber du kannst diesen Trick machen, wo ich als Benutzer nach unten wische, unser Wischen nach oben. Und so schiebe ich Inhalte nach oben, was bedeutet, dass ich interessiert bin. Ich möchte mir mehr von diesem Abschnitt ansehen, was dieser Abschnitt zu bieten hat. Wenn das passiert, können Sie die Titelleiste tatsächlich an eine Position verschieben, Sie werden sehen, dass sie verschwindet. Und wenn ich dann wieder nach unten gehe, was bedeutet, dass ich vielleicht aus diesem Abschnitt navigieren möchte, wird die Titelleiste basierend auf dieser Interaktion wieder angezeigt. Sie werden sehen, dass Airbnb dies auf seiner mobilen Anwendung oder auf seiner Website im Internet verwendet , auf seiner Website im Internet wenn Sie auf Mobil- oder Tablet-Geräten arbeiten. Und ich zeige dir hier eine kleine Vorschau. Du kannst es sehen. Hier ist ihre Titelleiste oben. Dies ist, dass sie auch einige Filter für den Titel hinzugefügt haben. Und sie haben die Tab-Leiste hier unten. Sie können zwischen wie Risiko, Login, Wünsche, Ihren Aufenthalten tippen . Wenn ich nach oben oder nach unten scrolle, siehst du, wie die Titelleiste verschwunden ist und sie werden auch die Tableiste entfernen. Wenn Sie dann wieder nach unten wischen, wird es angezeigt, wenn Sie wieder nach oben wischen. Alles klar, also wische ich nach unten. Schon wieder. Die Idee hier ist, dass Sie daran interessiert sind, Sie wissen, dass Ihre Aktion die Website darüber informiert , dass Sie gerade mehr an dem Inhalt interessiert sind, wenn ich wieder nach oben wische, Ihre Aktion könnte relevant sein für, Oh, müssen Sie etwas mit diesem Inhalt machen oder aus diesem Bildschirm navigieren? Du kannst sehen, wie das antwortet, also sagen sie, okay , hier ist dein Tablet. Wir geben dir die Tab-Leiste. Hier ist dein Handy. Wir geben dir die Tab-Leiste. Aber Sie sehen, wenn wir ins Web gehen, verwenden sie nicht die Tab-Leiste. Tab-Leiste ist kein Webbett-Muster. Es ist ein Mobil- und Tablet-Muster. Alles klar, cool. Das letzte , was wir uns ansehen müssen, bevor wir auf einige Do's und Don'ts gehen ist, dass die Titelleiste Aktionen basierend auf Benutzereingaben ändern und anzeigen kann . Also haben wir hier eine Standard-Titelleiste für Navigationsgeräte. Und was passiert ist, wenn der Benutzer auf eines dieser Fotos tippt, die Navigationsleiste wechselt und wir werden Aktionen basierend auf dieser Benutzerinteraktion durchführen. Sie haben ein Foto angezapft. Jetzt wechselt die Tableiste von Kontexten, tut mir leid, die Titelleiste wechselt von Kontexten zu einer actionsorientierten Titelleiste. Sie werden also wissen, dass Sie eine ausgewählt haben , und es gibt Ihnen Optionen, die Sie tun können. Du könntest diesen löschen, du kannst es senden. Und dann haben Sie das Überlaufmenü, das hier auch Sheesh Kebab-Menü oder ein Kebab-Menü genannt wird , das nur weitere Aktionen enthält, die auch damit zusammenhängen. So können Sie es aus der Sicht der Interaktion nutzen und es nicht nur ausschließlich für Kommunikation , Kontexte und Ort haben, sondern auch handlungsorientiert sein. Denken Sie daran, zusammenzufassen, dass die meisten Anwendungen, die die Tableiste unten verwenden, die Titelleiste oben verwenden, ein übliches Entwurfsmuster ist. Jetzt besorgen wir uns ein paar Dos und Don'ts. Ihr Titel für eine Tab-Leiste sollte kurz genug sein , um in den Platz zu passen. Er ist wie FAQs. Und dann mach den Titel nicht zu lange, dass er zwei Ellipsen von den drei kleinen Punkten hier hat. Titel sollte kurz genug sein , um wieder in den Platz zu passen. Und dann noch einmal. Machen Sie den Titel II nicht lang, dass er in zwei Zeilen gehen muss , die sich verdecken, oder zwei Zeilen hier. Platzieren Sie die angepassten Aktionen hier in der Titelleiste wie drei bis vier maximal, fünf schiebt es irgendwie. Du siehst sechs hier ist zu viel. Und wenn Sie einen langen Titel haben, wird er einfach nicht mit den Aktionen hier fließen. Drei ist deine magische Zahl. Seien Sie vorsichtig mit der Höhe, besonders wenn dies behoben wird. Dies wird Immobilien erfordern ein Benutzer Ihre Bewerbung durchläuft, möglicherweise haben Sie hier unten rechts eine Tab-Leiste. Sie sind also, Sie sind es, Sie beschränken Ihre sichtbaren Inhalte hier nur in diesem Abschnitt hier. Seien Sie also vorsichtig mit der Höhe dieser Leiste und Sie möchten nicht oder für Ihre Titelleiste und Sie möchten nicht, dass sie zu eng ist, zu hoch, dass es den Inhalt unten einschränkt und gibt ihm nicht genug Platz für diesen Inhalt. Da sind wir los. Es gibt Tableisten und Gezeitenleisten. Wir sehen uns im nächsten Video in dem wir Akkordeons und Tabs behandeln werden. Wir sehen uns dort. 12. Akkordeons und Tabs: Alles klar, lass uns über Akkordeons und Tabs sprechen. Akkordeon-Menü ist eine vertikal gestapelte Liste von Headern, die angeklickt, angetippt werden können , um wichtige Details eines Abschnitts ein- oder auszublenden. Der Akkordeonbegriff stammt von dem Musikinstrument, in dem die Hauptfunktion Expansion und Kontraktion ist. Daraus haben wir das also bekommen. Es ist ein Menü, das erweitert wird, um Informationen anzuzeigen und dann Verträge zum Ausblenden von Informationen zu erhalten. Sie werden sehen, dass er für ähnliche FAQs verwendet, bei denen die Frage die Kopfzeile oder die Überschrift ist , und dann öffnen Sie sie und Sie sehen die Antworten auf diese Fragen. Sie sehen es für Veranstaltungslisten, bei denen das Ereignis die Kopfzeile ist. Und dann tippen Sie auf und es wird erweitert und die Details dieses Ereignisses angezeigt. Wir haben kürzlich eine Autoanwendung verwendet , bei der Sie das Akkordeon öffnen können, um Add-Ons zu sehen und auszuwählen welche Art von Add-Ons Sie für Stereo oder Rems oder das Innere eines auto. Sie sahen so aus. Dies ist der Standardstatus, in dem er die Informationen auf übergeordnete Ebene enthält. hast du. Die Header hier. Wenn ein Benutzer darauf tippt, markieren wir den Header, damit der Benutzer weiß, worauf die untergeordnete Informationsebene bezieht oder auf die sich bezieht. Und auch der Pfeil hier geht es um 180 Grad, um weiter zu vermitteln , dass dieser Header offen ist. Auch hier haben wir den Standardstatus, wir haben den aktiven Status. Und die wirklich wichtige Funktion eines Akkordeons ist, dass wenn der Benutzer auf WLAN tippt, langsam ist , dass die gerade geöffnete, offene Überschrift schließt die gerade geöffnete, offene Überschrift und dann das Kind offenbart Levelinformationen in der Überschrift , auf die der Benutzer gerade getippt oder angeklickt hatte . Es schließt, bezahlt meine Rechnung, bezahlt meine Rechnung geht in den Standardzustand und in Wi-Fi ist langsam, geht in den aktiven Zustand und es zeigt die Informationen auf untergeordnete Ebene an. Basierend auf dieser übergeordneten Ebene. Die Vor- und Nachteile dafür ist der Prozess, der Benutzern hilft, Inhalte zu finden , die sie suchen, indem sie nur Header kategorisieren. Sie können einfach alle Header durchlaufen, den suchen, nach dem sie suchen, und ihn öffnen. Es macht es einfach , Informationen auf Elternebene zu scannen und wieder tiefer in die Informationen auf untergeordnete Ebene einzutauchen. Und es ist ein nützliches Tool, wenn Sie viel Inhalt haben. Und Sie möchten bestimmte Inhalte ausblenden den Inhalt auf einen Blick verdaulicher machen. Und dann kann der Benutzer entscheiden, in welche er tiefer eintauchen möchte. Der Betrug besteht darin, sie nicht für mehr als zehn Optionen zu verwenden , da sie viel herumspringen und versuchen, nicht zu viele Informationen auf untergeordneter Ebene zu haben und versuchen, nicht zu viele Informationen auf untergeordneter Ebene zu haben, die dazu führen, dass der nächste Header unter das Fold-Meeting geht unterhalb des Anzeigebereichs, den der Benutzer ansieht, kann er die Option der übergeordneten Ebene nicht sehen. Wenn Sie viele Optionen auf Kinderebene haben , die alles schieben, alle anderen Eltern nach unten. Und der Benutzer muss ziemlich weit nach unten gehen , um eine andere Elternebene zu finden, oder er muss hier wieder auf den Header der übergeordneten Ebene tippen . Wenn der Benutzer also wieder auf tippt, bezahle meine Rechnung erneut, sie wird geschlossen. Also bezahle meine Rechnung hier, öffne, tippe auf Meine Rechnung bezahlen hier schließt auch. Wenn Sie jedoch viele Informationen auf Elternebene haben oder Informationen auf untergeordneter Ebene entschuldigen , all diese Header so unter die Falte verschoben. Wenn Sie verschiedene Header öffnen und schließen, springen sie tendenziell herum und bleiben nicht konsistent am Standort. Und das ist der Vorteil , dass ich mit dir über Tabs rede. Da Tabs nicht herumspringen, bleiben sie in Position, wenn der Benutzer darauf tippt. Aber Akkordeons, wissen Sie, wie Sie wollen, meine Rechnung bezahlen und auf WLAN tippen, ist langsam, es schließt, bezahlt meine Rechnung und WLAN springt hier hoch, damit sie in diesem Sinne herumspringen. Sie können auch Plus-Tasten anstelle der Pfeile verwenden. Und dann im aktiven Zustand gehen die Plus-Buttons zu Minus. Sie können sie auch in Kombination mit Checkboxen verwenden. Sie können hier sehen, dass wir technische Funktionen haben, auf die Sie tippen. Wir zeigen tatsächlich eine Zahl an, also haben Sie 0 ausgewählt, wir haben vier Optionen. Der Benutzer kann ganz einfach auf C tippen, die vier gewünschten Optionen. Wir haben zuerst die Kontrollkästchen hier auf der rechten Seite, wobei der Preis auf den einzelnen Funktionen basiert. Und sie können jede dieser Funktionen auswählen , die wir haben, die auch die Zahl hier aus zwei von vier Optionen erhöht. Habe einfach diese parallele Ebene, die der Benutzer sehen kann. müssen sie vielleicht. Wir würden das nicht zu einer anderen Farbe machen. Wir würden das so etwas wie Blau machen. Auf übergeordneter Ebene können sie jedoch sehen, wie viele Upgrades sie bereits ausgewählt haben , basierend auf technischen Funktionen oder Audio- oder Lautsprecher-Upgrades. Wir besorgen ihnen auch 20 Zwillinge, sage ich. Okay, cool. Denken Sie also daran, den Inhalt der untergeordneten Ebene beizubehalten. Das ist der Inhalt im Inneren , der sich auf die übergeordnete Ebene bezieht. Halte diesen Inhalt kurz und süß. Denken Sie dann daran, verwenden Sie nicht, vermeiden Sie es, viele Inhalte auf untergeordneter Ebene zu verwenden. Sie können sehen, als ob ich sagte meine Rechnung zu bezahlen und ich öffne das, ich denke, whoa, das ist eine Menge. Wenn Sie dies laut haben, ist es nicht der beste Mechanismus. Vielleicht möchten Sie den Benutzer einfach auf eine separate Seite bringen. Oder ich habe hier ein Video über Modals und Schubladen. Und das wäre eine perfekte Option um eine lästige Reihe zu zeigen, die nur die gesamte Immobilie benötigt und der Benutzer kann wieder schließen und wieder hier landen. Wenn Sie dieses Problem haben, ist dies nicht das beste Muster dafür. Wenn Sie viele Kinderinformationen haben, ist dies nicht das beste Muster dafür. Ich habe das einmal gesehen und das ist super komisch. Lege kein Akkordeon in Akkordeons. Wie Akkordeons sollten keine Eltern-, Kinder- und Enkelkind-Ebene haben. Es ist nur Eltern und Kind. Also habe ich das einmal gesehen und es war super komisch und es prallte herum. Ich habe mich wirklich verirrt, welches offen war, welcher war geschlossen? Notieren Sie also noch einmal keine Akkordeons im Akkordeon selbst. Denken Sie daran, wenn ein Benutzer auf eine andere Option tippt, schließen Sie die bereits geöffnete. Lassen Sie den Benutzer nicht mehr als eine Option gleichzeitig öffnen . Stellen Sie dann auch sicher, dass Sie klare Unterschiede zwischen den Headern haben. Sie können hier sehen, dass wir die Linien auf diesem hier verwenden und diese kleinen Linien hier sehen, diese grauen Linien, die helfen, die Abschnitte zu geben. Wenn Sie diese Abschnitte nicht haben und das Akkordeon öffnen, ist es schwer zu erkennen, wo die Informationen auf untergeordneter Ebene enden und wo die nächste übergeordnete Überschrift eintritt. Das ist Akkordeon. Sprechen wir also über Tabs. Tabs sind eine der gebräuchlichsten Möglichkeiten , Abschnitte von Kategorien darzustellen. Und sie ermöglichen es einem Benutzer, auf jede Kategorie zu klicken und zu tippen, die Inhaltsänderung basierend auf seiner Auswahl anzuzeigen. Auch hier sind sie der Tableiste sehr ähnlich , über die wir gesprochen haben. Sie tauchen einfach oben auf Websites auf und erscheinen normalerweise nicht unten, wenn sie auf einer Schaltfläche unten die Klappe halten oder Sie die untere Navigation benötigen. Verwenden Sie dann die Regeln, die sich auf die Tab-Leiste. Es werden Tabs genannt, weil der Ursprung davon, es bezieht sich auf den Büroaktenschrank. Und Sie können feststellen, dass die Registerkarten wie diese übergeordnete Informationsebene herausragen . Und dann könntest du in diese eintauchen, sie öffnen und sehen, dass es sich hier um relevante Informationen auf untergeordneter Ebene handelt, damit du sehen kannst, wie sie relevante Informationen auf untergeordneter Ebene es sich hier um relevante Informationen auf untergeordneter Ebene handelt, damit du sehen kannst, wie auf diese Informationsarchitektur zurückgehen Ich habe im letzten Video darüber gesprochen. Diese werden üblicherweise für Menüs zur Bestellung von Lebensmitteln verwendet. Sie verwenden Tabs für Frühstück, Mittagessen, Wüste oder verschiedene Arten von Lebensmittelkategorien wie chinesisches Essen oder Pizza, italienische Burger. Sie eignen sich hervorragend für Dashboards eignen sich hervorragend für Analysetools. Navigationsleisten auf Android-Geräten verwenden sie oft. Google-Suchergebnisse, ich kann über alle Bilder usw. nachdenken viele, viele, viele Anwendungsfälle für Tabs. Sie sind viel häufiger als Akkordeons. Kann Tabs für Mobilgeräte sehen, wieder sollte die Tab-Leiste immer fixiert sein und oben niemals unten legen. Denn wenn Sie diese für unten verwenden möchten, wählen Sie eine Tableiste und verwenden Sie diese Regeln. Es gibt eine andere Reihe von Regeln, die auf Registerkarten angewendet werden , dann nur Registerkarten. Sie können maximal fünf Optionen verwenden, ohne horizontales Wischen, was bedeutet, dass der Benutzer auf einem Tablet oder Telefongerät verschiedene Registerkarten horizontal wischen kann. Das sind wirklich die klaren Unterschiede zwischen einer Tableiste und Registerkarten darin, dass sich die Tabbalken unten befinden und die Tableisten niemals horizontales Wischen haben. Es gibt nur fünf Optionen, Max und Tabs. Diese können immer oben auf einer Site leben und sie können horizontal wischen, was bedeutet, dass sie mehr als eine Option haben können. Normalerweise bleiben sie jedoch an der Spitze, da es sich dort wieder um globale Einstellungen handelt, ähnlich wie bei Destinationen. Und Sie können viel mehr als fünf mit horizontalem Wischen haben . Sie können hier sehen, dass wir die Titelleiste oben mit dem Logo und unserem Profilmenü hier haben. Dann haben wir oben ein sekundäres Tableistenmenü, es ist 90 Pixel groß. Wir haben die Texte, die alle hier kappen, 11 Pixel Höhe mit zwei Pixel-Buchstabenabstand wieder, so dass alles wenig Buchstabenabstand einschließt. Sie können sehen, wie das als Benutzer funktioniert, auf den ich einfach tippe. Und ich konnte sehen, dass der Artikel keinen Inhalt der sich auf den Punkt zwei bezieht. Und wenn ich auf eins zurücktippe, Verkostung wieder auf eins, bringt mich die Verkostung wieder auf eins, wenn ich auf drei tippe, zurück auf drei. Hier sind einige Beispiele für Tabs für das Internet. Wir haben hier mehr als fünf Möglichkeiten, solange wir entsprechend ins Web passen. Und wieder kann der Benutzer auf diese verschiedenen Registerkarten tippen . Diese Art von ahmt diese Aktenstruktur des Kabinetts nach. Wenn Sie über diese Art von Informationen nachdenken, ähnelt dies der, in der Sie auf verschiedene Registerkarten klicken , um die Informationen auf übergeordnete Ebene anzuzeigen. Und anscheinend könnten Informationen Schaltflächen und Text sowie Fotos und Illustrationen und Icons haben. Hier ist eine Navigation im Stil des oberen Tabs. Sie können dies für das Web verwenden. Dann haben Sie eine Tab-Navigation auf Seitenebene , die Sie für das Web verwenden können, aber Sie können sie nur für Tablets verwenden. Aber wir haben nicht genug mit Immobilien für mobile Geräte. Dafür. Wenn das ein mobiles Gerät war, schauen Sie sich wirklich nur so viel Immobilien an, oder? Sie sind also besser dran für Web- und Tablet-Geräte. Und wenn Sie hier auf Punkt 2 klicken, öffnet es Punkt zwei und Sie können sehen die Idee, die auf Element eins geklickt wird, zu Punkt eins geht. Okay, schauen wir uns das horizontale Wischen an. Sie können also hier sehen, dass wir oben ein Tab-System haben , das mehr als drei Optionen hat . Wir wissen nicht wirklich, wie viele Optionen es gibt. Aber wir machen eine kleine explizite Technik wenn wir eine der Optionen wollen, sagen wir diese Option, um hier nach rechts abgeschnitten zu werden. Was das bewirkt, ist die Beförderung. Es vermittelt dem Benutzer, dass es mehr Möglichkeiten gibt , mit denen er wischen kann. Wo wenn du es einfach hättest, wo es nur die drei Optionen waren und sie waren hier ordentlich gleich verteilt, so. Das vermittelt kein horizontales Wischen. Also wollen wir immer eines davon abschneiden, nur um diesen visuellen Hinweis zu geben, dass hey, Benutzer auf der Option Nummer vier und ich bin hier drüben, komm, komm und hol mich. Irgendwie etwas. Denken Sie daran, dass dieses horizontale Wischen nur für Tablets und mobile Geräte verwendet werden sollte. Verwenden Sie niemals horizontales Scrollen für das Web. Niemand möchte mit wie dem horizontal scrollen, die Navigationsleiste im Web ist einfach zu viel. Wenn Sie keine Tabelle erstellen, wenn Sie ein System auf einem Desktop-Gerät entwerfen , das eine Tabelle ist, dann können Sie ja horizontales Scrollen verwenden, aber nicht hier. Beispiel für die Anwendung , an der ich gerade arbeite. Sie können sehen, dass Sie die Registerkarten hier, Tag, Monat und Jahr sehen . Sie können horizontal wischen, um weitere Optionen zu erhalten. Und wieder haben wir diesen einen Rechnungszyklus absichtlich einmal nach rechts gemacht diesen einen Rechnungszyklus absichtlich einmal nach , nur um den Benutzer darüber zu informieren, dass es hier mehr gibt , die Sie wischen können. Auch hier bleiben diese in Position. Sie können in den Monat gehen, Sie können ins Jahr gehen und sehen, wie einfach und reibungslos Sie diese ändern können. Doordash hat hier das gleiche Beispiel, also hat es die Tabs hier. Wenn Sie tippen und ziehen und drücken, rechts, sehen Sie mehr von der Lasche. Beispiele kommen rein und sie schneiden ein bisschen von den Geschenken ab. Und ich zeige Ihnen, wie es auf ihrer mobilen Seite aussieht . Ein bisschen Cutoff passiert hier. Sie können das gleiche System sehen, das hier für das Web verwendet wird, aber es wird kein horizontales Scrollen durchgeführt. Sie geben dir diese kleinen Pfeile und sie erlauben dir hin und her zu gehen. Es schneidet immer noch einige dieser Themen hier in diesen Registerkarten ab. Aber so funktioniert es. Und wenn Sie auf Geschenke gehen, werden alle Geschenkinhalte informiert. Du kannst sehen, wie das funktioniert. Und dann gehen Sie jetzt zurück, dies ist auf einem mobilen Gerät, das Sie im Internet tun können. Aber wenn es auf meinem Mobilgerät steht, könnte ich diese Kategorien wischen und mir ansehen, wie Keith, das ist dieser kleine Schwebe. Sehen Sie, dass sie alle kleine Illustrationen dazu haben. Super süß. Lassen Sie uns einige Best Practices für Tabs eingehen. Nimm immer die volle Breite. Selbst wenn Sie zwei Gegenstände haben, nehmen Sie die volle Breite. Mach nicht einfach eine proportionale Breite für Mobilgeräte, wie diesen leeren Raum hier. Mache niemals einen Tab. Wenn Sie einen Tab haben, müssen Sie dies nicht tun. Wenn Sie nur eine Informationsebene haben, benötigen Sie keinen Tab, genau wie Sie ihn loswerden. Sie verwenden horizontales Wischen auf mobilen Registerkarten. Wenn du es oben hältst und dann niemals waagerecht unten wischen. Und der Grund dafür ist es sehr seltsam für deinen Daumen, diese verschiedenen Gegenstände hier durchzugehen und zu wischen. Und wenn Sie nur wollen, versuchen Sie es einfach, gehen Sie auf Ihr Telefon und wischen Sie einfach mit den Daumen nach links und es tut weh, als würde es nach einer Weile fremd werden. So wie unsere Finger eher darauf angepasst sind , nach oben und unten zu wischen und nicht nach links und rechts. Okay, cool. Das waren Akkordeons und Tabs auf den Punkt gebracht, und ich hoffe, dass Ihnen das gefallen hat, wird Sie im nächsten Video bei Tooltips und Schatten sehen . 13. Tool und Schatten: Alles klar, Willkommen beim nächsten Thema, in dem wir über Tooltips und Schatten sprechen werden. Tooltips. Es ist eine positive, hilfreiche additive Nachricht, die angezeigt wird, wenn ein Benutzer mit einem Element oder einem Inhalt interagiert . Und Tooltips werden normalerweise durch einen Mausklick oder Tippen auf ein Mobilgerät initiiert . Und wieder sind sie informativ. Es sollten keine Anweisungen sein. Sie sollten nur ein bisschen zusätzliche Informationen sein, wenn ein Benutzer etwas mehr über einen bestimmten Inhalt erfahren möchte etwas mehr über einen , den er sich ansieht. Sie sahen so aus. Angenommen, Sie hatten, hier ist ein Beispiel für ein Beispiel ein Fragezeichen-Symbol , bei dem Sie CVE-Nummer haben und wenn Benutzer sich eine CVE-Nummer haben und wenn Benutzer sich nicht sicher sind, welche CVE-Nummer auf ihrer Kreditkarte steht, können sie mit der Maus fahren oder darauf tippen dieses Icon. Und dann gibt Ihnen dies ein paar Informationen darüber, was die CVE-Nummer ist. Und nochmal, wenn Sie diesen Mauszeiger machen, Sie daran, dass Sie das hier herausklicken können, wenn Sie darauf klicken, können Sie herausklicken, um es zu schließen. Wenn es auf dem Mauszeiger ist, wird dies automatisch geschlossen , wenn die Maus wegbewegt. Und dann können Sie es für mobile Geräte für das Web bewegen lassen. Und dann für Mobile machen Sie es dort, wo ein Benutzer darauf tippt, um es zu öffnen, und er tippt davon ab, dann wird es geschlossen. Sie können auch das andere gemeinsame verwenden, das ein Info-Symbol ist. Statt eine Frage dieses Info-Symbol, das gleiche Prinzip hier dieser kleine Tooltip erscheint dieser kleine Tooltip und immer wieder, dies ist der Tooltip. Es ist diese kleine Box hier, die der Tooltip normalerweise einen kleinen Pfeil hat, der auf etwas zeigt, aber das muss man nicht haben. Aber es ist wieder ein wenig additive Information. Sie können damit ein Aktionsbeispiel hier klären. Wenn Sie also Sendeoptionen oder -schaltflächen haben, die für den Benutzer möglicherweise nicht allzu klar sind, wenn er den Mouseover zeigt, erhalten Sie einen etwas beschreibenderen Text darüber, was diese Schaltfläche tut. Sie können es genauso für Icons tun. Du hast dieses Icon hier, das erscheint. Denken Sie jedoch daran, ob dies Ihre primäre Möglichkeit ist Ihre primäre Möglichkeit einen Benutzer darüber aufzuklären, was diese Aktionen ausführen, und diese Benutzererfahrung auf Tablet- und Mobilprodukten leben wird , als dies nicht der Fall ist, dies ist nicht gut genug da es keinen Schweben auf Mobile-Produkten und Tablet-Geräten gibt. Also einfach besser dran, vielleicht etwas Text hinzuzufügen , um Duplikat im Vergleich zu einem Icon zu sagen. Wenn das der Fall ist. Wenn es sich nur um eine Webanwendung handelt, dann können Sie so etwas tun und Hover verwenden, um dies zu geben. Ich öffne meine E-Mail sehr schnell und du kannst einige der E-Mails für mich schreiben. Ich mache nur Witze. Man konnte sehen, wie sie es bei Google machen. Wie lautet diese kleine Frage? Oh, es ist Unterstützung. Was ist diese kleine Ikone? Oh, es sind Einstellungen. Was ist das? Oh, es ist Google Apps. Dafür haben sie auch hier dasselbe getan. Auch wenn Sie, wenn Sie einen Tooltip verwenden und sich aufgrund der Informationen, mit denen Sie arbeiten, nicht sicher sind. Wenn Sie einen Tooltip benötigen, fragen Sie sich einfach dies, wie schauen Sie sich diese Informationen an und gehen Sie, Sie diese Informationen in einen Tooltip einfügen möchten, der für den Benutzer erforderlich oder wichtig ist für den Benutzer erforderlich oder wichtig , damit der Benutzer seine Aufgabe erledigen kann. Wenn es ja ist, dann zeige die Informationen an. Verstecken Sie es nicht in einem Tooltip. Wenn dies nicht der Fall ist, ist es nicht notwendig, es ist nur hilfreicher Text oder hilfreicher Inhalt, dann ja, Sie können es in einen Tooltip einfügen. Ich habe dieses Produkt für ein Produkt verwendet, um es zu bearbeiten, sehr gut abgeschnitten, ist, dass Sie diese Reihe von Formularfeldern hier haben. Aus dem Standardstatus. Es sind nur diese grauen Kisten. Sobald ein Benutzer jedoch seine Maus in eines dieser Formularfelder bewegt, ändern sich diese Informationen und basieren auf dem Formular , das Sie ausfüllen. Wenn Sie sich nicht sicher sind , welche Stromzählernummer bei Ihnen zu Hause ist. Sobald Sie dazu kommen und bewegen Sie Mauszeiger über oder klicken Sie in dieses Formularfeld. Dieser Tooltip ändert sich, um explizite Informationen darüber zu geben , was dieser Stromzähler ist. Ein kleines Bild hier, ging mit, um zu zeigen, wie man es findet. Dies wird als Inline-Tooltip bezeichnet, was bedeutet, dass er angezeigt wird, wenn der Benutzer inline oder fokussiert ist oder hier auf einem dieser Elemente schwebt. Wir hatten hier dieselbe Box , die sich auf die Stromdienstzustände bezog. Als der Benutzer das Dienstdatum hatte oder mit der Maus über diesen Abschnitt fuhr, tauchte dieses Tool auf oder dieser Tooltip tauchte auf, um eine Erklärung darüber zu geben , was das war und was das war Art des Inhalts war. liebe ich. Ich denke, das sind super kluge Möglichkeiten, dies zu tun. Und wenn Sie sich an das erste Video erinnern, habe ich davon gesprochen, nur ein Spaltenformlayouts wie dieses zu machen , passt gut mit dem leeren Raum für ein einspaltiges Layout, etwas schwieriger, wenn es auf dem Handy ist. Mobile Plattformen, aber für das Web sind wir wirklich großartig. Lassen Sie uns auf einige Do's eingehen und erinnern Sie sich nicht, setzen Sie nicht zu viel Inhalt ein. Zu viel. Es sollte nur ein hilfreiches bisschen von drei oder vier Zeilen Textnachrichten sein, sollte einfach nicht wie ein Satz sein. Denken Sie daran, verwenden Sie keine Hovers, Ihr primäres Werkzeug für die Kommunikation. Vor allem, wenn dies auf einem Desktop, einem Tablet oder einem mobilen Produkt verfügbar ist , fügen Sie Kontexte hinzu, wenn es sich um Tablet oder einem mobilen Produkt verfügbar ist , fügen Sie Kontexte hinzu, einen mobilen Benutzer handelt, wie z.B. das Wort „ Duplikat“ hier setzen. Und Sie können das Gleiche auch tun und für das Internet überkommunizieren, wenn der Benutzer darüber schwebt. Geben Sie keine wichtigen Informationen in einen Tooltip ein. Wenn jemand ein Passwort eingibt und Passwortanforderungen vorhanden sind, haben Sie ihn nicht im Tooltip, um es hier zu tun. Sie können auch scheitern, was wir Inline-Validierung nennen, über die ich früher gesprochen habe. Sie können grüne und rote Hinweise darauf geben, ob ihr Passwort erneut eingegeben oder hier ein Passwort festgelegt werden , das diese Kriterien erfüllt. Wir sehen, dass das Passwort nicht das alte Passwort sein kann. Sie sagten: Oh, du siehst aus als hättest du kein Kapital gesetzt, zumindest einen Kleinbuchstaben. Du wurdest gut. Du hast noch acht Charaktere. Sie haben mindestens zwei Buchstaben und einen weiteren Fehler, wir brauchen mindestens eine Nummer, um ein richtiges Passwort zu erstellen , oder? Du willst also nicht, dass dieses Zeug in einem Tooltip versteckt ist. Dies sind wichtige Informationen für den Benutzer , um seine Aufgabe abzuschließen. Wir sollten es bloßstellen. Lass uns Schatten durchgehen. Regel Nummer eins ist nicht nur einen Standardschatten zu verwenden , niemals. Was auch immer der Shadow-Standardstatus ist, benutze ihn nicht. Du musst es noch hinzufügen. Also hier sind die Schritte. Du hast den Standardschatten hier Ich habe diese kleine Karte mit einem kleinen kleinen Eiscreme-Symbol. Ich möchte dazu einen Standardschatten hinzufügen. Genau hier. Es wird uns vier Pixel auf der Y-Achse geben. Also runter und 0 auf dem X, wirklich nichts auf dem x hier drüben, Blair wird vier sein. Wir sind mit fünfundzwanzig Prozent Deckkraft hier. Der nächste Schritt hier in Schritt zwei besteht darin, mehr zur X- und Y-Achse hinzuzufügen . Also haben wir an dieser Stelle 55 gegeben. Jetzt sehe ich hier auf der x-Achse etwas mehr Schatten auf der vertikalen Linie. Der nächste Schritt, der wichtigste, ist etwas Unschärfe hinzuzufügen. Wir sind von vier auf 35 Pixel Unschärfe gestiegen. Und man kann die Schatten dort zu scharf sehen , es ist zu hart. Wie ich mich im Button-Video erinnere, sagten wir, dass wir auf Button-Schatten schauen und nicht zu hart mit den Schatten sein als sollte es weich und subtil sein. Dann kannst du hier die Extrameile gehen. Sie können dem Schatten ein bisschen Farbe hinzufügen. Normalerweise verwende ich gerne ein bläulich-graues, nicht zu blaues, nicht zu grau, einfach nur in der Mitte da. Wir lassen das sehr modern aussehen. Sehr sauber. Gibt dir diesen gut aussehenden Schatten im Vergleich zu dieser Hard-Edge-Standardeinstellung. Standardeinstellung hier, beginnend mit der Unschärfe etwas besser zu werden. Und dann ist es nur das subtile, schöne Grau, das das einfach richtig schön macht. Sie können auch einen inneren Schatten verwenden. Dies hilft hier, Tiefe zu erzeugen, damit Sie hier keinen inneren Schatten sehen können. Und jetzt, da wir den inneren Schatten dafür haben, diesen Fortschrittskreis oder Kuchenkreis hier. Und es schafft eine Reihe von Tiefe , dass dies gefüllt wird. Dieser innere Schatten hilft sehr und es sind die gleichen Prinzipien wie der innere Schatten. Nicht zu hart. Nochmal, sollte es einfach sein, gib ihm etwas, gib ihm eine schöne Unschärfe, eine schöne Farbe. Einige tun es und Don'ts. Und dann werde ich eigentlich nur ein paar schnelle Schatten für dich machen , damit du sehen kannst, nimm keinen Schatten auf den Text. Wenn du hier ein Foto hast und du meinst, Oh Mann, mein Text liest nicht, nun, löse es nicht, indem du einen Schatten legst. Was Sie tun müssen, ist das Foto so anzupassen , dass Sie hier sehen können, dass wir oben auf dem Foto ein dunkleres Overlay hinzugefügt haben oben auf dem Foto ein dunkleres Overlay und dann den Text darauf gelegt haben, damit es auffallen kann. Als ich die ganze Jahre in der Designschule war , war ich dort, gab es in San Francisco an der Academy of Art University. Es gab eine Frau namens Mary Scott für die ganzen vier Jahre und das gesamte Programm, selbst wenn Sie auf einen Meister gegangen sind, sagte sie gekaut und es sei unnachgiebig. Ich würde niemals Schatten auf einem Text sehen wollen. Und dann war es witzig , weil wir Texte einfach nie in Schatten gestellt haben. Und eines Tages hatte ich meinen ersten Job. Einer der Creative Director kommt vorbei , weil ich diesen Text zum Pop mache einen schönen kleinen Schatten darauf lege. Ich bin wie, okay, cool. Es geht also wieder darum, die Regeln zu kennen, aber es geht auch darum zu wissen, wann man gegen diese Regeln verstoßen muss. Aber eine ziemlich harte Regel hier , der Sie folgen könnten, ist einfach nicht auszudrücken, , der Sie folgen könnten, ist einfach nicht auszudrücken, keine Texte zu lösen, die über einem Foto mit einem Schatten lesbar über einem Foto mit einem Schatten als müssten Sie das Foto manipulieren. Mach deine Schatten nicht zu stark. So ist das viel zu stark. Du siehst den auf der rechten Seite. Dieser hat einen schönen, nur wenig subtilen Geschmack eines Schattens. Was Spaß macht, ist, dass Sie den Schatten in dieser Farbe und Deckkraft beim Schweben dunkler machen können. Denken Sie daran, dass die Philosophie eines guten Schwebens darin besteht, dass er lebendig wird. Es ist, als würde man sich mit mir beschäftigen. Hier sehen Sie, dass dies eine großartige Technik für einen schönen Schatten ist und dann werden wir etwas dunkler. Die Farbe, die Deckkraft für den Schwebeweg. Es schafft wirklich das Gefühl der Tiefe, in dem dieses Ding ein bisschen größer ist als das darunter liegende, das hier ist. Also wieder, netter, netter, subtiler Einsatz eines Schwebens dort. Und dann normal. Lege nicht zu viel Farbe in den Schatten. Als wäre das viel zu viel Wie das ist okay. Das ist zu viel. Benutze diese harten Kanten nicht. Halten Sie die Kanten weich. Lass uns weitermachen und einfach einen kurzen Schatten machen. Ich kopiere diesen Kreis hier drüben. Auch hier versuchen wir, diese Art von Funktion zu erreichen, aber wir werden etwas Spaß haben. Wir haben die weiße Karte, die ich mit dem Werkzeug „Figma“ machen werde. Ich werde am Ende der Videos ein paar Projekte haben , die durchlaufen werden , und wir werden tatsächlich einige dieser Designmuster erstellen , die Sie auch hier sehen. Aber bevor wir dort ankommen, können Sie einfach sehen wie ein Schatten innerhalb des Tools Figma funktioniert. Wir werden das ein bisschen anhalten. Okay, also füge ich hier einen Effekt hinzu. Und wir haben unsere Tropfen, Schlagschatten hier. Hier sind die Variablen. Also hier ist mein x, hier ist mein Y wieder um 55 machen zu wollen. Alles klar, also haben wir unsere X- und Y-Achse in Gang gebracht. Was ist das Nächste, was du machst? Was machen wir nochmal? Air und wir sollen Unschärfe machen. Oh ja, das stimmt, Unschärfe. Lasst uns das Ding in die Luft jagen. 35. Das allein sieht schon richtig gut aus. Und dann fügen wir Schatten etwas bläuliches Grau hinzu. Boom, los geht's, das ist großartig. Der tolle Look. Ashanti hat diese Kanten ein wenig ausgegangen. Das sieht gut aus. Schauen wir uns den inneren Schatten an. gleiche Prinzip hier fügen wir einfach einen Schatten hinzu, Omeka, inneren Schatten. Der einzige Unterschied zu den inneren Schatten du ein bisschen willst, nicht so viel Unschärfe. Das gleiche Prinzip allerdings. 55 hier tauchen die harten Kanten immer noch auf. Wir wollen nur diese Kanten glätten. Normalerweise werden 15 gut sein. Sie müssen nicht zu 35 gehen, denn was passiert, ist, dass Sie nur die ganze Form ausfüllen. Nur 15 ist gut. Auch hier wollen wir ein bisschen Blau machen. Sie können hier auch ein bisschen Farbe hinzufügen , wenn Sie möchten. Da gehst du. Das ist ein netter Schatten. Cool. Es gibt also Tooltips und Schatten, und wir sehen uns in der nächsten Klasse. Wir werden über Thumbnails und Karussells sprechen. Wir sehen uns dort. 14. Thumbnails und Karussels: Alles klar, Willkommen zur nächsten Klasse. Wir werden über Thumbnails und Karussells sprechen. Thumbnails sind dort ziemlich einfach, es gibt kleine Bilder, die einem Benutzer einen Überblick über mehrere Bilder geben . Es ist ein bisschen ein Blick auf das, was als Nächstes kommt. Sie werden normalerweise auch mit einem größeren Master-Image gepaart. Und wenn der Benutzer auf eine Miniaturansicht klickt und tippt oder tippt, wird das Masterbild dann als dasselbe Bild angezeigt, was sich zu diesem Zeitpunkt in der Miniaturansicht befand. Normalerweise können Sie sie als etwa 100 Pixel hoch und 100 Pixel breit markieren . Sie sind wirklich großartig, um verschiedene Fotos von Produkten zu zeigen . Hilft auch, Bilder schneller zu laden, da der Browser nicht alle Bilder in voller Größe laden muss alle Bilder in voller Größe laden Ich kann einfach die kleinen Miniaturansichten laden und nur ein vollständig gerendertes Bild in voller Größe laden. Es ist auch großartig , wenn Benutzer es wollen. Es ermöglicht Benutzern, schnell durch Bildersammlungen zu navigieren . Und das ist der Fotobibliothek auf Ihrem Mobilgerät sehr ähnlich . Das sind alles kleine Miniaturansichten hier. Einige tun es und Don'ts. Auch hier sollte die Miniaturansicht den Raum der gleichen Größe ausfüllen. Und Sie können die hier sehen, wo diese Miniaturansichten den Raum nicht ausfüllen. Sie sind nur, dass sie verschiedene Bilder haben können Größen von einigen waagerecht sein. Bildformat, einige können wie Hoch- oder Querformat sein. Sie können die Landschaft dieses hier sehen , das Portrait. Aber auch hier sollten diese alle diesen Raum ausfüllen. So haben Sie dieses schöne Feldbild, Sie haben diese seltsamen weißen, inkonsistenten Abstände nicht. Du siehst das oft. Ich mag Nikes Thumbnails hier sehr. Es gibt. Du kannst ein kleines Video von diesem Kerl haben , der seine Schuhe zeigt. Und dann können Sie hier rechts auf diese kleinen Miniaturansichten klicken hier rechts auf diese kleinen Miniaturansichten und sie werden hier angezeigt. Ziemlich cool. Ich denke wirklich gute Arbeit Masterbildern und Miniaturansichten, die hier drüben passieren. Ich bin wie Hes Website. Gehen wir zu Karussells. Karussells sind also, sie erlauben so ziemlich, dass mehrere Inhalte einen einzigen Raum einnehmen. Der Benutzer beschäftigt sich mit einer Präsentation, wie ich mag, wie ich mag, wie eine Diashow-Präsentation. Und manchmal kann ein Karussell automatisch abspielen, was wirklich wie ein Autoplay einer Präsentation aussieht, bei der sich jeder Inhalt für einen kurzen Zeitraum zeigen wird. Und dann wird ein weiterer Inhalt für die gleiche Zeit einspringen und es wird während dieser Art von Inhalt karussell sein. Das ist irgendwie der Grund, warum es Karussell genannt wird. Es ist wie ein du bist, als würde ich Karussell mit Pferden bewegen . Wie einer. Jedes Ding spielt auf einmal. Wenn Sie eine Website wie diese erstellen möchten, auf der Sie hier Bild haben, Bild eins, einen Aufruf zum Aktionstext. Und dann bleibt das für eine gewisse Zeit erhalten. Und dann kommt ein anderes Bild rein und du hast ein Bild dazu, anderes Bild wird zu einem Bild von dir, das zu tun vorhast . Hör auf. Vor allem, wenn dies das Heldenbild einer Website ist. das definitiv nicht. Dies ist eine Art Anti-Pattern für Pflegezellen. Was wir also wollen, ist sobald ein Besucher auf Ihre Website kommt, Lage sein sollte, zu sagen worum es in Ihrem Unternehmen geht. Das bedeutet, dass Sie eine einzige klare Botschaft und einen Inhalt haben , der leicht zu verstehen ist. Wenn Sie diese einzelne klare Botschaft oder diesen Inhalt durch mehrere Ideen und Nachrichten ersetzen , erhöht dies das Risiko, dass die Menschen wirklich verstehen, was Ihr Unternehmen tut. Und schlimmer noch, es wird Ihre Conversion-Raten senken . Einige tun es. Sie können es verwenden, wenn Informationen einfach sind und nicht viel Fokus erfordern. Benutze es auch nie für Helden-Sektionen. Aber Sie können hier sehen, wie wir es für eine Website verwendet haben. Das haben wir jetzt für die Helden-Sektion. Wir haben es für dich da. Es ist einfach und schnell, Ihr Buch anzupassen, Ihr Buch hochzuladen und Sie können darauf klicken. Es bleibt bestehen, sobald der Benutzer anfängt zu klicken. Klicken Sie jetzt auf den Modus. Und ich denke, es wird eine Weile bleiben und dann wird es wieder zum automatischen Spielen gehen. Ja, da gehst du. Dann wieder hier drüben nutzen wir es für kreative Dienstleistungen. Sie können sehen, dass dies Illustrationen und Kopierbearbeitung sowie solche Dienstleistungen des Buchumschlags zeigt Kopierbearbeitung sowie solche Dienstleistungen des Buchumschlags . Nur um unsere Kommunikation hier drüben zu beglückwünschen. Sie können es oft für ein Karussell ohne das Auto-Play verwenden, was am häufigsten vorkommt. Und du gibst dem Benutzer die Kontrolle darüber. Das ist es, was man sich anschauen wird. Apple hat einen ziemlich netten , wo sie ihre AirPods hier zeigen. Und sie haben diese kleine Paginierung. Ich habe ein ganzes Gespräch über Paginierung. Am Ende des Kurses können Sie sich das ansehen und wir werden darüber sprechen. Aber du siehst, ich habe einen Pfeil nach rechts. Ich weiß, dass es drei verschiedene Abschnitte in diesem Karussell gibt. Jeder drei hat eines davon hat drei Produkte. Ich gehe also davon aus, dass es insgesamt neun Produkte geben wird , die mit dieser Paginierung übereinstimmen. Und ich kann zurück, ich kann vorwärts gehen. Hey, schau, es ist nur eine hier. Aber im Wesentlichen ist dies das Karussell. Es ist ohne dass das Autoplay dem Benutzer die Kontrolle gibt. Colas, das haben wir hier. Wenn Sie es mit Miniaturansichten kombinieren können, ist so, wie Sie die Miniaturansichten treffen möchten. Und dann haben Sie auch hier die Benutzerkontrolle, diese Pfeile, um durch jede dieser Miniaturansichten zu blättern . Hier ist Autoplay großartig. Wenn Sie auf Smart-TV-Dienste gehen, haben sie Karussells. Du siehst dieses Heldenbild hier, die Paginierung. Davon wird es fünf geben. Und das wird automatisch abgespielt. Du siehst irgendwie zu, wie diese neuen Serien ins Spiel kommen. Sei vorsichtig bei deinem Autoplay, sollte nicht, es sollte nicht zu schnell sein. Nur lange genug, damit der Benutzer den Punkt verstehen kann. Und dann kommt der nächste rein. Ja, dieses Designmuster, obwohl es nicht funktioniert, funktioniert es nicht für Websites, wie es das Kommunikationsziel ist, inkonsistent, weil es den Benutzer ständig einschaltet. Aber wenn Sie im Blättermodus sind , kommen Sie zu Ihrem Fernseher und möchten etwas brauen. Hier hilft es. Es ist ein gutes Muster hier. Okay, cool. Das waren Thumbnails und Karussells. Wir sehen uns im nächsten, wir sprechen über Modale und Leuchtkästen. Wir sehen uns dort. 15. Modale und Lightboxen: Okay, lass uns über Modals und Pop-ups sprechen. Ein Modal oder ein Pop-up ist ein Fensterelement , das sich oben auf einem Anwendungsbildschirm befindet. Und es erstellt einen Modus, der den Hauptbildschirm wie den Elternbildschirm deaktiviert , den Mainstream jedoch im Hintergrund sichtbar hält. Wenn Sie außerhalb des modalen Fensters anzeigen, müssen Benutzer mit diesem Modal interagieren bevor sie zu diesem Hauptbildschirm oder zum Elternbildschirm zurückkehren können , indem sie entweder durch Klicken oder Tippen außerhalb des modal und das Modal schließen. Und wieder geht es auf diese grundlegende Informationsarchitektur zurück , oder? Wo haben Sie diese übergeordnete Ebene, die der Hauptbildschirm ist, und dann haben Sie diese untergeordnete Ebene, die das Modal oder das Pop-up ist. Ihr Hauptwert ist, dass ein Benutzer auf einfache Weise zusätzlichen Kontext, unsere Inhalte, anzeigen kann , ohne den Kontext des Hauptbildschirms zu verlieren . Das muss viel mit der Lage zu tun. Als würden sie zusätzliche Informationen sehen, verlieren sie jedoch nicht den Kontext ihres aktuellen Standorts. Der Nachteil von Modals ist, dass sie sehr aufdringlich sein können. Und es ist größtenteils garantiert , dass Ihr Benutzer das Modal sieht, aber dafür sorgt, dass es für etwas verwendet , das wertvoll ist und keine Werbung ist. Aufdringliche Add-Pop-ups, die aus dem Nichts kommen, können den Fokus Ihrer Benutzer stören und Misstrauen gegenüber Ihrem Produkt oder Ihrer UX erzeugen. Lass mich dir hier eins zeigen. Hier ist irgendwie wovon wir sprechen. Ich war auf dieser Seite hier, habe mich nur umgesehen, den ganzen Tag Nachrichtenartikel gelesen und dieses Ding taucht einfach aus dem Nichts auf, um ein Histogramm-Video-Tutorials zu erhalten. Wie Nein, ich bin gut in Instagram-Tutorials. Es ist aufdringlich, es bleibt definitiv dort. Ich muss damit interagieren. Und ich werde es schließen und gehe zurück zu meinem Lesematerial hier. Wir sehen uns später. War nur ein Scherz. Okay, das ist also das, was Sie vermeiden möchten, diese Art von Werbemodal wie das Auftauchen. Ich fand das auch witzig. Das war wie: Hier ist die Sonne und hier ist Quecksilber. Und dann ist hier mein Finger. Und hier ist der Knopf zum Hinzufügen von Kleidern, wie wir alle bei diesen Modellen gesehen haben, die Anzeige, aber der Schließen-Button ist so, so klein, dass man kaum meinen Finger darauf passen kann. Aber das war irgendwie witzig. In Ordnung, also lasst uns darüber reden, wann wir hier ein Modal verwenden sollen. Es ist also großartig, wenn es die Aufmerksamkeit des Benutzers auf sich zieht. Verwenden Sie es also, wenn Sie die aktuelle Aufgabe des Benutzers unterbrechen und die volle Aufmerksamkeit des Benutzers für etwas Super Wichtiges auf sich ziehen möchten. Angenommen, Sie benötigen Benutzereingaben. diese Weise erhalten Sie Informationen von Ihrem Benutzer, wie in diesem Beispiel, wie in diesem Beispiel wo Sie bereit sind, einen Artikel zu kaufen, auf die Schaltfläche „Kasse“ klicken und dann auf ein Handy, ein Modal erscheint, in dem Sie aufgefordert werden, sich anzumelden in mit Ihren E-Mail-, Passwort- und Formularfeldern. Es verliert nicht den Standort des Benutzers. Sie sind nicht in eine andere Navigation oder ein anderes Ziel auf der Website gegangen . Sie werden wahrscheinlich auch Like hinzufügen möchten, keine Kontoanmeldung oder eine kontinuierliche Eingabeaufforderung für Gäste haben . Es ist großartig, wenn Sie zusätzliche Informationen anzeigen möchten , ohne den Kontext der übergeordneten Seite zu verlieren. Ein Beispiel hier zeigt also größere Bilder, Klicken auf ein Bild und sieht es größer oder das Klicken auf ein Video Das Video zeigt zusätzliche Informationen wie Mehr erfahren oder FAQs Häufig gestellte Fragen. Sie können Informationen anzeigen, die im Wesentlichen nicht direkt mit der übergeordneten Seite zusammenhängen. Dinge wie Benachrichtigungs- oder Marketingmöglichkeiten wie fünf Personen einzuladen und 500 USD oder Begrüßungsinhalte oder sogar Funktionen teilen. Dann könnten Sie zeigen, dass Sie das Modell verwenden, um Informationen anzuzeigen , die direkt mit der übergeordneten Seite zusammenhängen . Dinge wie eine Erfolgsnachricht oder Ladefehler. Oder wenn Sie auf etwas klicken , das vom Benutzer wirkungsvoll ist, können wir eine Ru sicher werfen. Und sie können ja oder nein wählen, oder Sie haben gerade etwas in unserer Datenbank passiert , während Sie versucht haben , etwas zu bearbeiten oder etwas zu tun Wir können ein Modal aufwerfen, um einfach zu sagen, du weiß, etwas ist schief gelaufen. Möglicherweise müssen Sie das Modal aktualisieren oder schließen und neu beginnen, da unser Datenbankcenter die Informationen erhalten hat, solche Dinge. Ein paar Beispiele hier, ich zeige Ihnen hier nur das Live-Beispiel für dieses Modal. Das ist für eine Seite, an der wir gearbeitet haben, und das ist ziemlich cool. Als Benutzer können Sie auf klicken, diese sind für Heimbatterien. Diese Batterien laden Ihr Zuhause und versorgen Ihre Häuser mit Strom. Als Benutzer können Sie durchgehen und darauf klicken, welche Art von Geräten dieser Akku bei einem Stromausfall mit Strom versorgt werden soll . Und dann können Sie sehen, wie viele Stunden eine Batterie Ihr Haus aufladen könnte , wenn Sie alle diese Geräte eingeschaltet hätten. Wir informieren einen Nutzer über den Energieverbrauch, den Heimgebrauch und die Geräte und wie viel Energie er verbraucht. Wir haben diese kleine Energiekarte hinzugefügt , die ein Modal eröffnet. Dieses Modal ist eine Information auf untergeordnete Ebene , die sich auf das übergeordnete Element bezieht. Und dies zeigt Informationen darüber, welche Art von Geräten die am meisten genutzte Energie verursacht hat und was dies auch einer höheren Stromrechnung entspricht . Wenn Sie also den ganzen Tag ein C betreiben oder Elektroautos und Lichter betreiben, tragen diese viel zu einem höheren Energieverbrauch bei. Auch hier kann der Benutzer dies einfach schließen. Zurück zur übergeordneten Seite. Das ist also ein guter Anwendungsfall für ein Modal. Eine weitere in der Anwendung, an der wir arbeiten, ist in diesem mobilen Labor. Wenn dies eine App ist, die Ihr Sonnensystem bei Ihnen zu Hause überwacht. Und wenn am Sonnensystem etwas schief geht, wir hier eine kleine Warnung , die Sie als Ausrufezeichen und eine kleine Lautsprecherblase sehen können . Und wenn der Benutzer auf dieses Modal tippt, lassen wir ihn einfach wissen, dass etwas passiert ist, und sollte uns kontaktieren, damit wir uns mit dem Problem befassen können. Wissen Sie auch, dass es gut ist, das x für mobile Geräte oben links zu platzieren, insbesondere für Personen, die Rechtshänder sind , weil Sie Ihr Telefon hier mit der rechten Hand halten und Sie können benutze deine linke Hand, um das einfach zu steuern, um das x zu schließen. ist eine ziemlich übliche Platzierung für das x. Wenn du auf einem mobilen Gerät bist und dieses hier in Aktion sehen kannst . Genau hier. Der Benutzer klickt hier auf dieses Ausrufezeichen. Du wirst sehen, wie das Modal ins Spiel geht und dann kannst du es auch hier schließen. So ziemlich einfaches Beispiel dafür, wie Boop, ist etwas schief gelaufen. Versuch es noch einmal. Und Sie können auch für mobile Geräte und auf Tablet und Web verwenden , Sie können ein sogenanntes Vollbild-Modal machen , wo es den gesamten Bildschirm aufnimmt. Und damit der Benutzer die übergeordnete Seite nicht im Hintergrund sieht , sieht er nur das X. Und wenn Sie es bemerkt haben, sehen Sie, ob Sie ein Gerät haben, die nativen Benachrichtigungsbildschirme, sind Modale wie dieses ist ein modal auch. Hier ist ein Beispiel für etwas, das nicht unbedingt an die übergeordnete Seite gebunden ist. Wir haben ein Empfehlungssystem und eine der Anwendungen für die wir verwalten und entwerfen. Und wenn Sie Leute an den Service verweisen können und wenn sich jemand tatsächlich anmeldet und sein Projekt abschließt, verdienen Sie 500 US-Dollar. Und so wird dieses Modal während der Benutzererfahrung jederzeit auftauchen. Es löst auch eine E-Mail an einen Benutzer aus, aber wenn er von der E-Mail hereinkommen kann, aber es wird auch angezeigt, wenn Sie gerade in der Anwendung etwas tun, wird dies einfach ausgelöst und es ist aufdringlich. Aber sieh dir an, wie das ein großartiger Aufdringling ist. Es ist, als hättest du gerade 500 Dollar bekommen, wie mach weiter und behaupte wie mach weiter und behaupte, dass deine Einnahmen dir einen Scheck über 500 Dollar schicken würden. Dies ist ein Beispiel für ein RU. Klar. Wenn Sie hier ein Konto löschen, entfernen Sie viele Informationen, die mit diesem Konto verknüpft sind. Und wir feuern dies ab, um Unfälle bei etwas Wirksamem zu beseitigen. Wenn Sie ein Benutzer sind und gehen Sie auf etwas und löschen Sie es. Wir werden nur einen weiteren Schritt voraus bei etwas tun , das mit dem Konto zusammenhängt, und lassen sie es einfach wissen, wie sind Sie sicher, dass Sie dieses Konto wirklich löschen möchten? Es gibt viel Arbeit, viele Berichte, die damit verbunden sind. Und wieder, wenn es ein Unfall war, können sie absagen. Wenn es sich um einen Löschvorgang handelt, können sie löschen. Hier ist eine, die an die Seite der übergeordneten Ebene gebunden ist. Hier bearbeiten Sie Ihre Informationen auf Kontoebene. Sie drücken die Schaltfläche „Bearbeiten“ zeigt ein Modal an, geben Sie die Kontoinformationen ein. Und diese sind großartig, weil Sie in Ihrem Benutzer sagen, dass Sie diese Informationen entweder aktualisieren oder abbrechen oder schließen. Es gibt keinen anderen Ausweg. Du kannst nicht auf halbem Weg sein und dann woanders hingehen. Als müsstest du entweder fertig oder fertig werden. Und das ist das Schöne an diesen Modellen, Ihren Benutzer, wie es wirklich der Fall ist , dazu zu bringen, dieses Modal anzusehen und dann entweder die Aufgabe zu erledigen oder die Aufgabe zu schließen. Ich persönlich liebe Vollbild-Suchmodals. Wenn Sie hier auf dieser Website auf das Suchsymbol klicken, wird ein Vollbild-Suchmodal geöffnet. Der Hintergrund ist etwas dunkler. Es ist etwa 90% Deckkraft. Sie können den Bildschirm der Eltern immer noch kaum sehen. Aber es ist super glatt, weil es sich anfühlt, als wärst du es, du engagierst dich in der Benutzeroberfläche, du bist in der Benutzeroberfläche und es fühlt sich nicht klein oder schwach an, es fühlt sich tatsächlich super modern an und glatt. Und wenn Sie hier in das Suchfeld eingeben , sehen Sie Suchergebnisse. Auch hier können Sie dies mit dem x schließen oder hier Ihre Suchergebnisse wie Erin Anderson finden Ihre Suchergebnisse wie Erin Anderson und zur Aaron Anderson-Website gehen. Ich persönlich liebe diese. Ich denke, das sind großartige und großartige Anwendungsfälle für Fullscreen-Modals. Lass uns auf ein paar Dos und Don'ts eingehen. Also nochmal ein Modal nach dem anderen. Und das ist eine sehr schwierige Regel für Anwendungen, die hier keine Modale auf solchen Modalen ausführen. hättest du hier ein Modal und du hast hier ein Modal, das ist nicht gut, das ist kein Bueno. Es ist okay. Wenn du ein ähnliches Betriebssystem hast , als wäre ich auf meinem Computer, könnte ich in meinen Finder gehen. Das ist technisch gesehen ein Modal. Ich habe noch einen wie das ist okay, wenn Sie ein Betriebssystem wie einen Computer wie diesen machen . Vermeiden Sie diese jedoch für Software und Benutzererfahrungen. Eine weitere, die ich hier gesehen habe, ist mein Kreditantrag. Und ich schaue mir meine Kreditauskunft an und erhalte Benachrichtigungen Ihre Kreditwürdigkeit ohne ersichtlichen Grund gesunken ist , wie ich denke: Was habe ich gemacht? Ich mache sogar irgendetwas und es geht unter. Aber du kannst sehen , was hier passiert. Es heißt, sieh dir deinen neuen Punktestand an und es öffnet ein Modal. Das ist ein Modal. Und ich klicke auf das X und es schließt mich und geht zurück. Und wenn ich hinzufüge, tippe auf dieses kleine Drei-Punkt-Ding, schau was passiert. Es öffnet ein weiteres Modal auf einem Modal. Jetzt schaue ich mir zwei Xs an und wie, naja, welches ist das x? Dies ist es, was Sie also vermeiden möchten, um dieses Modal bei modaler Interaktion zu vermeiden. Denken Sie daran, dass Modals großartig sind, sie haben nur Elternebene und untergeordnete Ebene. Sie können kein weiteres Modal darüber werfen, um eine Enkelkind-Informationsarchitektur zu erstellen. Aber sie sind sehr gut für diese Beziehung auf Eltern- und Kind-Ebene. Wie 70 oder 90% Deckkraft für die Hintergrundfarbe können Sie hier sehr niedrige Hintergrunddeckkraft sehen und vermeiden, wie Sie möchten, dass sich der Benutzer auf die anstehende Aufgabe konzentriert. In diesem Fall gebe ich und gebe uns Feedback in der Bewerbung. Auf diese Weise Es ist nicht fokussiert, es gibt nicht genug Kapazität. Es gibt zu viel Kapazität in Farbe und Hintergrund, und es ist viel los. Es schafft nicht den Fokus , den wir für ein Modal benötigen. Auch Modal sollte auf den Bildschirm passen, hauptsächlich für den Desktop. Und du kannst in diesem Modal scrollen. Als könnte ich meine Maus hineinstecken und durch diese Informationen scrollen. Ich mache das Modal nicht zu lang, dass es hier aus dem Fenster geht , oder? Sie möchten direkt in das Fenster Ihrer Desktop-Anwendung passen können . Okay, schauen wir uns die Leuchtkästen an. Lichtboxen sind so ziemlich die gleiche Interaktion wie ein Modal, die Unterschiede, die sich die Lightbox auf eine Fotogalerie bezieht. Es ist alles, was du wissen musst. Gleiche Prinzipien gelten sowohl für Modale als auch für Miniaturansichten, die für die Lightbox gelten, oder? Lassen Sie mich Ihnen ein Beispiel dafür zeigen. Wenn du dich erinnerst, haben wir diese Seite, an der ich gearbeitet und gebaut habe. Wir haben diese Thumbnails, oder? Die gleichen Regeln, die für diese Miniaturansichten gelten, sprechen also , die wir auf diese Miniaturansichten angewendet haben. Und wenn du siehst, dass die Lightbox reinkommt, kannst du sehen, dass es so ziemlich ein Modal ist. Und der Unterschied ist, dass es einige weitere Funktionen enthält. Ich kann dieses Bild immer noch schließen. Es ist ein hübsches Bild hier. Aber ich kann durch diese Modals hin und her navigieren. Und die Lightbox ist so ziemlich das, das ist der Begriff wird nur für das Modal verwendet. Es ist, als würde man eine Box erstellen, um dein Bild zu sehen. Und der Hintergrund ist immer noch von der Galerie aus sichtbar, aber es ist im Wesentlichen die Box, die aus dem Licht kommt. Du siehst dein Bild und legst es dann wieder in die Fotogalerie indem du es schließt. Wann benutzt du diese? Verwenden Sie diese Option, wenn Sie viele Fotos haben, die auf eine Seite passen. Sie eignen sich wiederum hervorragend, um , die auf eine Seite passen. Sie eignen sich wiederum hervorragend, verschiedene Produktaufnahmen von wie einer E-Commerce-Website oder einer Fotobibliothek und Apps anzuzeigen verschiedene Produktaufnahmen von wie einer E-Commerce-Website , die sich in Ihre Fotobibliothek für Kamera-Fotos. Diese Seite hier war eher für einen Fotografen gedacht. Und du kannst es dir hier ansehen. Hier ist auch die URL, wenn nötig. Ja. Denken Sie also daran, dass es im Lightbox-Modal Beschreibungen geben kann, wie wir es gerade gesehen haben. Sie können den Werfer hier zählen lassen, acht von 25. Sie können auch keine Beschreibung haben. Es ist nicht zwingend erforderlich. Sie können sich auf den Tasten hin und her bewegen. Du kannst es schließen. Denken Sie daran, dass die Schaltflächen auch einen Hover-Status haben. Du siehst hier. Sie können sich durch diese Fotos bewegen. Okay, cool. Wenn das Modals und Pop-ups waren, sehen wir uns im nächsten Video. Wir sprechen über Menüs und Schubladen. 16. Teil 1 Menü und Schubladen: Alles klar, Reden wir über Menüs und Schubladen. Menüs sind eine Liste von Inhalten, Kategorien oder Funktionen, die normalerweise als eine Reihe von Links innerhalb der Navigationsleiste dargestellt werden, im Internet gegangen sind oder in einem Symbol wie einem Hamburger oder einem Kebab zusammengefasst werden können , wenn diese Option aktiviert ist Mobil- und Tablet-Geräte, ich zeige Ihnen eine Reihe von Beispielen dafür. Menüs haben ein UX-Muster mit sehr hoher Priorität da sie Benutzern helfen , durch Ihre Benutzererfahrung oder Anwendung Ihres Dienstes zu navigieren . Und wieder können Sie die wertvollsten Funktionen haben, überzeugendste Inhalte, es ist großartig, aber es ist nutzlos, wenn die Leute sie nicht finden können. Menüs oder Quelle dort. So wichtig, dass Sie sie auf jeder Website finden, jeder Software, der Sie jemals begegnen werden. Es ist sehr wichtig zu verstehen, wie diese Menüs funktionieren. Nicht nur für Software und Anwendungen, sondern auch für reaktionsschnelle Websites. Dort sind sie wirklich nützlich, und hier ist diese Kombination aus Menü und Schubladen wirklich nützlich für reaktionsschnelle Websites, auf denen sie im reaktionsschnelle Websites, auf denen sie Internet ein gewisses Aussehen haben und dann reagieren sie auf ihre Inhalte und ihre Navigationsbedürfnisse für Nass, für Mobil- und Tablet-Anwendungen. Lassen Sie mich Ihnen ein kurzes Beispiel dafür zeigen. Also hier ist die Nike-Website, hier ist ihr Menü für Webdesktop-Geräte. Und Sie können sehen, dass sich das Ganze ändern wird, wenn ich auf das Tablet gehe. Und Sie können sehen, dass sie hier das Hamburgermenü benutzen. Und wenn ich dann auf ein mobiles Gerät gehe, nutzen sie das Hamburgermenü um diese Art von Informationen zu unterbringen. Das ist eine reaktionsschnelle Website. Und wieder wird die Schublade am häufigsten verwendet, am häufigsten verwendet um die verschiedenen Elemente wie Menüverknüpfungen zu verwenden. Es kann aber auch verwendet werden, um anderen Arten von Informationen und Benutzeroberflächen und Inhalten zu helfen anderen Arten von Informationen und Benutzeroberflächen und , die sich auf die Anwendung beziehen. Auch hier ist die Schublade diese Lagerhäuser alle Links. Sie haben hier das Menüsymbol, und dann haben Sie diese Schublade , die so hineingleitet. Und so diese Schublade, Es ist großartig, Navigation, Menüs und Links zu unterbringen, aber es kann auch als separate Interaktion verwendet werden, um Informationen auf untergeordneter Ebene basierend auf Inhalten oder Aktionen anzuzeigen Informationen auf untergeordneter Ebene basierend auf , die ein Benutzer hat fertig auf Ihrer Website. Ich zeige Ihnen Beispiele, wie man die Schublade einfach benutzt. Aber du wirst das oft als Combo sehen. Das Menü und die Schubladenkombination. Auch hier bezieht sich diese Schublade auf Kommodenschubladen. Die Kommodenschublade enthält hier Informationen, die Sie öffnen und schließen können. Daraus stammen die Ursprünge der Schublade. Hier ist unsere Menüführung hier für das Web, wir haben unsere vier Möglichkeiten für unseren Benutzer. Wir haben unsere Suchleiste. Dann könntest du hier den gleichen Navigationsstil sehen. Für mobile Anwendungen , bei denen wir das Menü oder das Hamburgermenü aufstellen. Und wir beherbergen alle Links- und Navigationsbedürfnisse in diesem Hamburgermenü. Hier ist das Beispiel, wo die Menüs oben rechts sind. Und ich zeige Ihnen hier ein paar Beispiele, hier in einer Sekunde, wie das funktioniert. Hier ist ein Beispiel für das Hamburgermenü auf der linken Seite. Dann ist hier das Beispiel für die Vollbild-Schublade , die der Benutzer jederzeit ausziehen kann. Schauen wir uns die schnell an. Hier ist derjenige, der auf der linken Seite ist. Sie können diese Folie in der Nähe sehen. Du tippst außerhalb dieser Schließung. Hier ist derjenige, der auf der rechten Seite ist. Und tippe auf. Dieser kommt von rechts herein. Wenn Ihre Menüs auf der rechten Seite sind, stellen Sie sicher, dass es von rechts kommt . Das ist auf der linken Seite. Stellt sicher, dass die Schublade von links hereinkommt. Wir haben auch den Vollbildmodus hier. So können Sie sehen, wie es im Vollbildmodus dauert. Dann müssen wir hier ein x haben, weil wir einen Weg haben müssen , damit unser Benutzer rauskommen kann. Sie können auch auf den Startbildschirm tippen. würde es auch tun. Okay, also schauen wir uns eine Menge dieses Menüs und die Navigation und Schubladen an. Sie haben viel mit Informationsarchitektur zu tun und zu verstehen, für welche Informationsebenen Sie entwerfen und welche Navigationsstufen Ihre Benutzer durchlaufen müssen auf Ihrer Website, Ihrer Webanwendung oder Ihrer Mobil- und Tablet-Anwendung. Sie können hier auf Nikes Website sehen , ob sie dieses Eltern-Level haben. Neuerscheinungen, Männer, Frauen, Kinder und verkaufen. Das sind die Informationen auf Elternebene. Dann könntest du sehen, dass das Menü Dropdown-Menü angezeigt wird und das Niveau des Kindes und das Enkelkind-Niveau hat. Dies bezieht sich auch auf, wie wir es als Mega-Menü nennen. Es ist wie ein riesiges Menü voller Sachen. Sie können sehen, dass die übergeordnete Ebene die neuen Releases war, die untergeordnete Ebene war neu und vorgestellt. Und dann hast du das Enkelkind-Level, all die Dinge, die sich auf das Neue und Feature und Feature beziehen . Sie können sehen, wie das für ein Mobilgerät funktioniert. Sie haben das Hamburger-Symbol, öffnet die Informationen auf übergeordneter Ebene. Und wenn Sie dann auf neue Releases tippen, die zu den Informationen auf Kind-Ebene gelangen, gelangen Sie dann in die Informationen auf Enkelkind-Ebene. Sie benutzen eine Schublade, aber Sie können sehen wie flexibel diese Schublade ist. Es kann mehrere Inhaltsebenen in dieser Schublade haben. Sie können auch auf das Logo klicken oder darauf tippen. In vielen Fällen wird es Ihrem Benutzer verwendet, um zu ermöglichen, zum Startbildschirm oder zum Hauptbildschirm zurückzukehren. Schauen wir uns das live an. Bevor wir also auf das nächste Beispiel eingehen, hier Ihre Elternstufe, Ihre Enkelkinder, Ihre Kinderebene, und Sie können sehen, wie sich dies aufgrund der Reaktion oder Anpassungsfähigkeit dieser Website ändert . Jetzt befinden wir uns im Tablet-Modus und jetzt werden wir in das Nicht-Modal einsteigen. Du klickst hier neue Releases. Jetzt bin ich auf Kinderebene und habe jetzt diese Enkelkind-Ebene getroffen und ich kann zurück, zurück und schließen. In Ordnung, so ziemlich effektiv, einfach aber effektiv. Sie können hier ein anderes Beispiel eines Menüs sehen , das häufig verwendet wird, nämlich das rechte Schubladenmenü. Sie können im Web sehen, dass wir all diese Informationen nicht in einem Hamburgermenü ausblenden. Wir entlarven es. Und das Gleiche auf dem Tablet. Es ist hier auf der linken Seite ausgestellt. Und wenn wir dann zur mobilen Ansicht kommen, verwenden wir tatsächlich das Menü, den Hamburger, das Menüsymbol und die Schubladenkombination, oder? Wenn wir also die Immobilien im Internet haben, zeigen Sie nicht das Hamburgermenü an, z. B. zeigen Sie alle Informationen an, weil es wieder auf diese Aussage zurückgeht , die Erschwingung der Benutzer. Je weniger Klicks und Tippen es braucht, um etwas zu tun und seine Aufgabe auf Ihrer Website zu erledigen, desto besser. Schauen wir uns Shopify als Beispiel an. So können Sie ihr Menü hier auf der linken Seite sehen, ich werde für das Internet verfügbar machen, Sie gelangen zum Tablet. Nichts ändert sich. Dann kommen wir in die mobile Ansicht und hier ist ihre Hamburger-Menü-Schubladenkombination, oder? Cool. Danke. Hol das Bild. Schauen wir uns verschiedene Arten von Menüs an. Sie können sehen, dass hier auf Android zwei sehr gebräuchliche Menüs hat. Es hat das Hamburger-Menü. Und wieder beherrschten diese Hamburgerhäuser Navigationslinks wie Navigationslinks auf Elternebene. Dann hast du das sogenannte Kebab oder das Überlaufmenü. Und dieses Menü soll normalerweise die Aktionen beherbergen, die hier nicht in diese Titelleiste passen. Wenn also Aktionen, da diese Titelleiste immer kleiner und kleiner wird, der Überlauf, weshalb sie es als Überlauf bezeichnen. Welche Menüs auch immer dieser Überlauf darin steckt. Auch hier ist diese Kebab-Interaktion auf Android üblich, aber auf Apple-Schnittstellen oder Apple-Produkten ist sie nicht allzu üblich . Einige andere gängige bekommen einfach das Hamburgermenü, weil es wie ein Hamburger aussieht. Wir haben das Bento-Menü hier. Diese sieht aus wie eine Bento-Box, und dies ist normalerweise die Show verschiedene Anwendungen, die Sie als Unternehmen haben. Wie wenn Sie Google haben, haben Sie viele verschiedene Anwendungen wie Drive und Google und Kalender. Dies zeigt also verschiedene Apps innerhalb eines Dienstes. Du hast das Kebab-Menü, weil das wie ein Schiff aus Khabbab aussieht. Und dann hast du hier das Fleischbällchen-Menü , weil es wie Fleischbällchen aussieht. Und normalerweise ist dieser eher für Einstellungen gedacht und im Kebab-Menü ist es eher für den Überlauf. Abschnitte können auch für Einstellungen verwendet werden. Ich habe gesehen, dass das Überlaufmenü auch für Einstellungen verwendet wird. 17. Teil 2 Menü und Schubladen: Sie können sehen, wie dieser Bento-Box-Menütyp verschiedene Arten von Produkten verwendet wird, um ihre Anwendungen anzuzeigen, oder? Sie werden also sehen, dass dies ein Microsoft Outlook ist. Wenn Sie hier auf das Bento Menü klicken, alle ihre Produkte angezeigt, die sie anbieten, Outlook und PowerPoint, der alte Mann PowerPoint und Word und Excel und einige der anderen Dinge dort. Und dann genauso mit Google, das die Bento-Box hier oben hat . Und wenn Sie auf das Bento Box-Menü klicken , werden alle anderen Anwendungen angezeigt. Sie haben YouTube und Kalender und einige andere Dinge. Ich möchte dir einen wirklich super wertvollen kleinen Tipp zeigen , den du kannst. Dafür kannst du Schubladen benutzen. Sie können mehr als nur Menüoptionen und Schubladen beherbergen , wenn Sie über eine reaktionsschnelle Website nachdenken. Schubladen oder dein bester Freund. Sie sind super, super großartig. Sie sind echt praktisch. Und ich werde darauf hinweisen, warum ich dir dieses Beispiel gebe. Hier ist ein Beispiel, in dem wir eine Kartenschnittstelle haben und der Benutzer hier auf dieses spezifische Wahrzeichen tippt. Und wir öffnen eine Schublade. Weitere Details zu dem, was sich der Benutzer gerade ansieht. Sie drücken das X und es bringt sie zurück zur Map. Nun schauen wir uns diese Interaktion von einem iPad aus an. Dasselbe Deal hier tippt der Benutzer hier auf die Karte, sieht diese relativen Informationen. Es ist die gleiche Interaktion wie Web. Es braucht vielleicht ein bisschen mehr Immobilien als im Internet. Diese Schublade hier, und Sie können schließen, es funktioniert immer noch. Es ist eine großartige Interaktion und konzentriert sich auf den Benutzer. Und dann können Sie sehen, wie die gleiche Interaktion für den mobilen Fall funktioniert. Du tippst hier in der Karte auf diesen Gegenstand und es braucht die Vollbild-Immobilien, du kannst mit dem X schließen und zurückgehen. Der Vorteil dieses Systems, das Schubladen verwendet, besteht darin, dass dieses Interaktionsmodell gleich funktioniert und die gleiche Funktionalität hat, egal ob Desktop-, Tablet- oder Mobilgeräte. Das bedeutet also, dass Sie dies einmal konstruieren können, und es funktioniert für alle drei verschiedenen Arten von Plattformen. Dieses Interaktionsmodell funktioniert hervorragend für alles. Betrachten wir es hier auf einem echten Produkt in Aktion. Hier ist ein Solarprodukt, an dem wir arbeiten. Dies sind Ihr Kunde, sind Ihre Sonnenkollektoren hier in Blau. Und wenn Sie ein bisschen mehr über Ihr Panel erfahren , die Produktion dieses Solarmoduls hören oder sehen möchten, tippen Sie darauf. Wir heben es hervor und wir werfen eine Schublade hoch. Und die Schublade hier hat das x, du kannst es schließen. Und dann sehen Sie hier Informationen zu diesem bestimmten Bereich eines diesem bestimmten Bereich eines bestimmten Panels und des Solarmoduls, auf das sie getippt haben. Jetzt schauen wir uns das auf dem iPad an. Gleiche Funktionalität. Tippen Sie auf das Solarpanel und holen Sie sich die Schublade. Sie können auf dieser Schublade wischen, Sie können weitere Informationen dazu sehen. Dann siehst du das Gleiche hier. Wird für die mobile Anwendung verwendet. Tippen Sie auf die Schublade, geben die modale Vollbild-Vollbild-Schublade hier die modale Vollbild-Vollbild-Schublade an und schließen Sie sie. Alles klar, das ist also eine großartige Beziehung auf Eltern-Kind-Ebene. Und der Vorteil ist auch, dass die Schubladen, im Gegensatz zu Modalen, kein Modal haben kann. Auf einem Modal. Die Schubladen können mehr Informationen enthalten. Sie können das hier sehen, wir verwenden Akkordeons in dieser Schublade hier für unsere FAQs werden häufig gestellte Fragen gestellt. Das sind also Wasserhähne, das öffnet die Antwort auf diese Frage, oder? Dann haben wir drei Ebenen der Informationsarchitektur. Wir haben den Bildschirm auf Elternebene, wir haben den Bildschirm auf Kinderebene für diese Schublade, und wir haben hier den Enkelkind-Level-Bildschirm für das Akkordeon in dieser Schublade. Sie können sehen, dass dies ein sehr praktisches Interaktions- und Interaktionsmodell und UI-Immobilien für verschiedene Arten von Architekturbedürfnissen sind. Lassen Sie uns hier auf Best Practices eingehen. Denken Sie also daran, Menüs an die Spitze zu setzen , da sie auf eine globale oder Master-Ebene der Informationsarchitektur passen . Diese, dieses Menü navigiert durch die gesamte Site sodass sie den Speicherplatz benötigen den sie normalerweise oben haben sollten. Plus Benutzer sind es gewohnt , diese entweder links oder rechts neben den Navigationsleisten zu sehen. Und teilen Sie Ihren Benutzern dann mit, wo sie sich befinden , wenn sie in verschiedene Teile Ihrer UX gehen. Sie können den Titelbereich in Ihrer Titelleiste hier verwenden, um die Menüabschnitte anzuzeigen und hervorzuheben, die aktiviert sind. Auf dem Desktop. Wir haben einen aktiven Status für das Menü. Dies ist die Haushaltswaren. Und dann sehen Sie, dass der Benutzer in das Menü geht, auf Haushaltswaren tippen kann, und wir verwenden den Titel hier ihn daran zu erinnern, wo er sich befindet. Denken Sie daran, die Menüs fixiert zu lassen, als ob sie an einem Ort bleiben, wenn der Benutzer scrollt. Erleichtert es dem Benutzer , aus jeder Situation oder einem beliebigen Ziel zu navigieren , in dem er sich befindet, und muss nicht den ganzen Weg zurück zur Seite gehen. Vergessen Sie dann nicht, wie Ihr Benutzer zum Startbildschirm zurückkehren wird. Wenn Sie kein Zuhause in Ihrer Schublade haben und der Benutzer sich hier wie Schmuck auseinandersetzt. Wie sind sie zurück zum Startbildschirm gekommen? Sie haben das Logo nicht mehr, weil wir das Logo durch den Titel ersetzt haben. Denken Sie an diese Art von Interaktion hier. Und wenn Sie den Startbildschirm hinzufügen müssen, fügen Sie den Startbildschirm hinzu und bringen Sie den Benutzer zurück. Das könntest du gebrauchen. Denken Sie daran, dass die Menüschublade Combo, Menü-Dropdown-Kombination hier, um die Navigationsbedürfnisse von Eltern-Kind und Enkelkind zu erfüllen. Sie könnten das Gleiche für mobile Geräte verwenden , die wir gesehen haben. Denken Sie auch hier an diese Mega-Menüs, wie Haushaltswaren als Elternteil, Sie haben Kissen, Kunst, Drucke, Uhren, Wanduhren, Decken wie diese beziehen sich die Haushaltswaren als Kinderebene. Und dann sind wir hier in Kissen und sehen ein paar Kissen. Das Enkelkind-Niveau. Wir haben das Gleiche für Nike gesehen. Für reaktionsschnelle Websites, wenn Sie nur drei oder vier Menü-Links für Ihr Mobilgerät haben . Hier haben wir wie Kleidung und Schmuck und Haushaltswaren. Wir können zu einer sekundären Tab-Leiste anstelle des Hamburger-Menüsymbols wechseln . Und wieder hat das mit einem Zoll leisten zu tun. So wie diese Menüs jetzt verfügbar sind und der Benutzer kann mit einem Fingertipp einfach durch alle drei dieser Menü- oder Zielelemente navigieren , anstatt in ein Menü zurückkehren zu müssen, den Eintrag und das Menü auswählen raus. Wenn Sie nur 234 Oberteile davon haben, können Sie die Tab-Leiste verwenden, solange sie passt. Okay, also wenn Sie für das Web haben und die Immobilien haben, stellen Sie alle Ihre Navigationsbedürfnisse offen. Es gibt keine Notwendigkeit für ein Menü, ein Hamburger-Symbol im Internet hier. Sie können einfach sehen, ob Sie die Immobilie haben. Wenn Sie die Immobilie haben, nehmen alle diese Elemente aus dem Hamburgermenü und legen Sie sie hier hin, damit der Benutzer nicht mehrmals auf diese Navigationsanforderungen klicken muss. Als diese Hamburgermenüs zum ersten Mal herauskamen. Dies ist da, als das iPhone gerade veröffentlicht wurde. Es gab viel Pushback mit der UX-Community über Verwendung dieser Hamburgermenüs. Und was es war, ist , dass sie nicht sehr wertvoll sind. Sie werden sehen, Sie können sie offensichtlich in allen gängigen Diensten und großen Anwendungen sehen allen gängigen Diensten , die wir verwenden, es war, dass sie so falsch verwendet wurden. Die Leute benutzten sie nur, als sie offensichtlich die Immobilien für alle Informationen hier hatten . Das ist also irgendwie, woher das alles kommt und die Gegenreaktion. Dennoch gibt es eine wesentliche Rolle, Menschen auf Ihrer Website zu navigieren und zu besetzen. Denken Sie nicht zuletzt daran, ob Sie links einen Menüpunkt haben, öffnen Sie die Schublade auch von rechts oder von links, wo die Türen geöffnet sind, wo sich das Menü befindet. Tu das nicht. Wo die Menüs links und die Schublade von rechts kommen. Okay, cool. Das sind Menüs und Schubladen. Ich sehe euch das nächste Video. Wir behandeln Zauberer, Brotkrumen und Paginierung. 18. Wizards: Willkommen bei Zauberern, Brotkrumen und Paginierung. Ich werde das in drei verschiedene Videos aufteilen. Wir machen ein Video für jedes dieser Themen. Fangen wir also mit Wizards an. Ein Formular-Assistent ist ein Entwurfsmuster für die Benutzeroberfläche, das es untrainierten oder neuen Benutzern ermöglicht , durch eine Reihe von Schritten ein Ziel zu erreichen. Und der Benutzer gibt in jedem Schritt Informationen ein und fährt dann bis zum Abschluss mit dem nächsten Schritt fort. Und Assistenten helfen dabei, was wie eine lange entmutigende Aufgabe aussehen könnte , die zu erledigen in kleine verdauliche Schritte aufzuteilen. Und Studien haben gezeigt , dass der Benutzer, wenn Sie den ersten Schritt des Assistenten einfach ausführen können, wahrscheinlicher ist, dass der Benutzer alle Schritte in Ihrer Aufgabe ausführt. Sie können hier sehen, dass wir den Antrag auf Bonitätsprüfung haben . Auch hier haben wir es für den Überprüfungsschritt sehr einfach gemacht. Wir fügen es ziemlich einfach für den Offenlegungsschritt hinzu. Und dann haben wir das echte Fleisch hier auf Ihre Info gemacht. Wir müssen einige Informationen eintragen , um diese Bonitätsprüfung durchzuführen. Und dann ist es auch gut, die letzten Schritte auch super einfach zu machen . Sie wollen nicht, dass Leute herunterfallen, wenn sie es bekommen Sie haben bereits drei Schritte durchlaufen , wenn sie den letzten Schritt erreicht haben. Wenn es noch mehr Informationen gibt, als sie vielleicht sind, könnten Sie das Risiko riskieren dass sie zu diesem Zeitpunkt rausfallen, weil sie so sind, ich will das einfach nicht weiter machen. Der erste Schritt ist super einfach, um den letzten Schritt super einfach zu machen , da der beste Ansatz hier ist. Dies ist eine wirklich gute Interaktion, nicht nur um lange entmutigende Prozesse bis zu den kleinen mundgerechten Schritten aufzubrechen . Assistenten vermitteln aber auch drei sehr wichtige Dinge , die für die Benutzererfahrung von zentraler Bedeutung sind. Das erste ist die Erwartung. Es gibt ein hohes Maß an dem, wie der gesamte Prozess aussieht wie viele Schritte es gibt. Und es gibt diesem zweiten Teil den richtigen Standort, während der Benutzer in diesen Schritten und jederzeit während dieses Prozesses auch die Zeit sehen kann . Wie viele Schritte oder weniger oder Fortschritt, wie viele Schritte haben Sie abgeschlossen und wie viele sind noch übrig? Wenn Sie diese verwenden möchten, verwenden Sie diese, wenn Ihr Benutzer eine Aufgabe oder ein Ziel ausführen muss , das viele Informationen, Aktionen oder Dateneingabe enthält. Auch hier sind diese Aufgaben einfacher zu erreichen, indem dieser Prozess in kleinere, kleine einfache Schritte aufgeteilt wird. Und ein Beispiel ist wie das Ausfüllen von Steuerinformationen, die viele Informationen erfordern . Und diese Informationen sollten in verschiedene Kategorien unterteilt werden, Abschnitte wie persönliche Daten, Arbeitgeberinformationen, Finanzinformationen. In Bestätigungsschritten gibt es. Verwenden Sie dies, wenn der Benutzer eine Anleitung benötigt, der Benutzer ein übergeordnetes Ziel erreichen möchte, aber möglicherweise nicht mit den Schritten vertraut ist, die erforderlich sind, um jedes dieser Ziele zu erreichen, sind Informationen. Das Steuerbeispiel ist großartig, weil es Menschen gibt, die ihre ganze Aufgabe darin besteht, die Steuern der Menschen zu übernehmen , weil es kompliziert ist, oder? Dies sind also großartige Möglichkeiten , diese Komplexität in Schritte zu zerlegen und Ihren Benutzer durch jeden Schritt zu führen, ohne das Gefühl zu haben, dass Sie alles auf einmal wissen müssen. Wenn bestimmte Informationen oder Informationskategorien voneinander abhängig sind. Also in dem Fall, wenn die Informationen bei jedem Schritt überprüft oder überprüft werden müssen , um ein Endergebnis zu erhalten. Das ist also großartig, als wir hier auf der linken Seite ein Rennen für dieses Modell hatten , wo wir das hier für eine Bonitätsprüfung verwenden mussten. Der Grund, warum wir es in einen Assistenten aufgeteilt haben, ist, dass die Benutzer , bevor wir überhaupt Informationen von ihnen erhalten , bevor wir überhaupt Informationen von ihnen erhalten, unseren Allgemeinen Geschäftsbedingungen zustimmen müssen, dass wir ihre Informationen verwenden werden , um eine Bonitätsprüfung, treffen Sie die Kreditauskunfteien und erhalten eine Bonitätsprüfung für sie. Bevor wir überhaupt ihre Informationen bekommen. Laut Gesetz müssen wir sie diesen Bedingungen zustimmen lassen. Und zweitens haben wir die Informationen bekommen und dann ist die dritte das Ergebnis der Bonitätsprüfung. Als würden sie die meiste Zeit genehmigt, aber manchmal werden sie abgelehnt. Sie können sehen, dass der zweite Teil hier ist, als wir ihn hatten, senden Sie diese Informationen schnell an unsere Datenbank, führen Sie die Bonitätsprüfung durch und geben Sie dann das Ergebnis zurück. Der dritte Schritt hängt also vom zweiten Schritt ab. Es gibt auch großartige Möglichkeiten für Onboard-Boarding-Abläufe Benutzer eine Reihe von Informationen eingeben müssen, um Ihre Anwendung wie Benutzernamen oder Profilauswahl zu verwenden oder Interessenkategorien auszuwählen, irgendwie etwas. Schauen wir uns hier einige Schritte zum Erstellen eines guten Assistenten an. Als erstes möchten Sie also alle Informationen aufschlüsseln, die Sie benötigen, um Benutzereingaben zu haben. Und unsere Auswahl, wir werden dieses Eiscreme-Beispiel verwenden, wie wir definitiv wissen, dass die Leute es wollen. Wir brauchen Leute, die ihr Eis Größe eins auswählen , um sie zu schaufeln, drei Kugeln Eis cremefarbene Aromen. Hier bekommen wir die Schokoladen-Chip-Seiten , die Pinup, felsige Straße, dann Reha-Zahlungsinformationen , Lieferadresse, Telefonnummer oder Kreditkartennummer , Ablaufdatum, CVE-Nummer und Rechnungsadresse, richtig, also wird das hier ziemlich viel von unserem Workflow abschließen . Okay, dann möchten Sie, dass es die Reihenfolge der Informationshierarchie findet , die mit dem aktuellen mentalen Modell des Kunden übereinstimmt. Das ist sehr scharf. Das mentale Modell ist also ein Verständnis dafür wie ein Benutzer Informationen oder System bestellt oder organisiert. Meistens kommt dieses Modell als Artefakt oder Ergebnis der Benutzerrecherche. Und wenn Sie über Eiscreme im aktuellen System oder in der aktuellen Konvention nachdenken und wie Menschen Eiscreme-Informationen modellieren oder organisieren. Die Benutzer kommen in der Regel herein und bestellen zuerst Eiscremegrößen. Wie groß ist die Größe? Sie fangen nicht mit Belägen an. Sie können also sehen, dass diese Reihenfolge jetzt passiert. Du fängst mit der Größe an und machst sie dann zu den Aromen. Und dann können Sie feststellen dass die Größe bestimmt, wie viele Messlöffel Sie erhalten. Und dann bestimmt die Anzahl der Messlöffel , wie viele Geschmacksrichtungen Sie erhalten. Und basierend auf diesen Geschmacksrichtungen möchten Sie vielleicht bestimmte Beläge. Man sieht, dass das ein mentales Modell ist. So denkt Ihr Kunde über diese Informationen nach oder organisiert sie. Und ich wirklich gutes Buch hier ist, wenn man hier zum Design von Everyday Things by Don Norman geht, er in diesem Buch viel über mentale Modelle spricht. Und es ist super gut. Wenn Sie wirklich werden wollen, wenn Sie sowieso sind, ist UX oder UI wie diese ein grundlegendes Lesen Sie hier. Wenn du es also nicht gelesen hast, nimm es einfach als großartiges Buch auf. Er redet viel über Türen, eines meiner Lieblingskapitel und er geht einfach, er ist einfach verrückt auf Türdesign und wie Sie Griffe entwerfen, um Leute zu informieren, wie Sie eine Tür öffnen das schieben oder ziehen, das hängt vom Griffdesign im Vergleich zu einem Zeichen ab. Also sehr, sehr interessant. Gutes Buch hier, schau es dir an. Sobald Sie Ihr mentales Modell organisiert haben. Der nächste Schritt besteht darin, die Informationshierarchie in Kategorien zu modellieren und sie an die Bestellungen und Schritte des mentalen Modells anzupassen . Sie können diese Informationen Flussdiagramm hier sehen wir haben die Eiscreme-Größen, wir haben unsere Aromen, wir haben unsere Beläge und wir müssen hier Zahlungsinformationen. Sie können also sehen, dass diese Art von Assistenten wie Schritt eins, Schritt zwei, Schritt drei, Schritt vier herauskommt . Jetzt, da Sie dies haben, können Sie einen Low-Fidelity-Prototyp erstellen . Sie könnten etwas tiefer in den Inhalt eintauchen, den Sie nicht benötigen, wie Bilder und Beschreibungen und Formularfelder. Und dann möchten Sie dies mit Ihren Kunden testen , um sicherzustellen, dass der Inhalt, das mentale Modell, der Workflow, alles sinnvoll ist und einfach zu bedienen ist. Wir haben hier einfach ungefähr ein Drahtgitter aufgestellt. Du hast deine, deinen Assistenten hier, Größe, wähle deine Größe. Mittlere Kugeln, kommen zu Aromen, treffen Ihre Aromen und dann ging er zu Belägen. Und dann drücken Sie Weiter drücken Sie die Zurück-Taste und kommen Sie schließlich dazu , mehrere Ihrer Eiscremegrößen oder Eiscremeprodukte hier zu bestellen Eiscremegrößen oder Eiscremeprodukte und dann zur Kasse zu gehen. Lasst uns also aufschlüsseln, was hier einen guten Zauberer ausmacht. Sie können den abgeschlossenen Schritt hier sehen der Benutzer weiß, was getan wurde. Der orangefarbene Schritt hier lässt den Benutzer wissen , auf welchem Schritt er sich befindet. Der Schritt voraus hier, das ist nur grau, der den Benutzer weiß, welche Schritte kommen werden. Es ist wirklich immer gut, unter jedem dieser Titel einen Titel zu haben , der die Erwartung festlegt, was der Benutzer erwartet und welche Art von Informationen als nächstes kommen werden. Und dann sollte jeder eine Beschreibung oder einen Aufruf zum Handeln haben, um dem Benutzer mitzuteilen, was in diesem Schritt zu tun ist. Dann hat ein guter Assistent auch die Schaltfläche Weiter, mit der der Benutzer fortfahren kann. Es ermöglicht dem Benutzer, als sekundäre Schaltfläche zurückzukehren. Wenn sie etwas verpassen oder etwas ändern müssen , was sie einfach nicht getan haben. Schritt eins oder Schritt zwei, sie können zurückgehen. Und dann lassen sie den Benutzer den Benutzer abbrechen. Also Krebs, diese ganze Sache, wenn sie müssen. Einige erinnern sich und erinnern sich nicht, zeigen den Fortschritt der Schritte. Das ist gut. Die Beförderung zeigt Zeit und Fortschritt an und zeigt hier keine Fortschrittsschritte an. Als ob Sie auf Ihren Informationen und nicht wissen, ob Sie diese gerade abgeschlossen haben. Zeigen Sie gute visuelle Zustände für abgeschlossene Schritte. Und der aktive Schritt hier, der kommende Schritt. Das haben wir sogar diese größere, hellere Farbe gemacht. Sie können sehen, dass wir die Kontrollkästchen hier für abgeschlossene Schritte verwenden und für diesen Schritt und die Zukunft ist nichts los. Nur ein kleiner kleiner grauer Punkt. Vermeiden Sie das. Es wäre unklar, welcher Schritt auf Auto nirgends fett ist und ein bisschen besser wird, aber seien Sie wirkungsvoller absichtlicher. Und so kann man diese Art von Fortschritt oder die Grundlagen dessen, was einen guten Zauberer zwischen den getätigten Dingen ausmacht, nicht wirklich erkennen diese Art von Fortschritt oder die Grundlagen was einen guten Zauberer zwischen den getätigten Dingen ausmacht . Danke für den abgeschlossenen Schritt, auf dem Sie gerade sind, Schritte, die abgeschlossen werden müssen. Denken Sie daran, dass jeder Schritt die Informationskategorie haben sollte , die sich darauf bezieht. Wenn Sie also Ihren Namen oder Ihre Informationen hier sagen, haben Sie den Namen LastName. Verwenden Sie nicht jeden Schritt für bestimmte Informationen. Ich habe das einmal gesehen, wo es wie Name, E-Mail, Telefon war , ich denke: Nun, das ist so einfach. Warum muss ich das in einem Assistenten machen? Als könnte ich das einfach alles in einer Sitzung machen. ist also das Ziel davon, die lange entmutigende Aufgabe zu trennen und sie in Schritte zu versetzen , in denen Sie, wenn es nur Name , E-Mail, Telefonnummer, Geburtstag , E-Mail, Telefonnummer, Geburtstag ist, keinen Assistenten benötigen, als wäre er nur erfüllt. Also lass mich das betreten. Denken Sie daran, eine Zurück-Taste zu haben, mit der Sie einfach in die Vergangenheit zurückkehren können. Aber hier ist der Kicker. Speichern Sie diese Informationen. Beispiel, wenn der Benutzer Informationen eingibt und er einen Schritt zurückgeht und er einen Schritt zu diesem Schritt weitergeht , an dem er gerade gearbeitet hat. Bringen Sie sie nicht dazu, diese Informationen noch einmal auszufüllen, speichern Sie das und was wir das Frontend nennen. Wenn sie zurück nach hinten gehen, ändern Sie sich, gehen Sie erneut voran, diese Informationen sollten immer noch vorhanden sein. Die Zurück-Schaltfläche ist irgendwie wichtig denn wenn Sie den Benutzer zurück in den Browser gehen lassen und dann in der Anwendung weitergehen. Wir können die soeben gespeicherten Informationen möglicherweise nicht speichern. Okay, cool. Lass uns gehen. Wir werden über Brotkrumen sprechen, aber ich mache es in einem anderen Video, also sehe ich dich im anderen Video. 19. Breadcrumbs: Reden wir über Semmelbrösel. Breadcrumbs sind eine kleine Liste von Navigationslinks, die dem Benutzer helfen, die hierarchische Struktur einer Website von der Homepage aus zu sehen die hierarchische Struktur einer Website von der . Diese Art der Navigation durch die Site-Struktur wird normalerweise als Wegfindung bezeichnet. Sie sehen ziemlich einfach so aus. Sie haben den Computer und die Lautsprecher für die Heimelektronik, und ich würde mir die Lautsprecher auf der Website ansehen. Sie werden Paniermehl genannt, weil sie kleine kleine Brotstücke nachahmen kleine kleine Brotstücke , die auf Ihrem Schreibtisch zurückgelassen wurden. Und sie sollen wirklich nur klein sein und niemals die Navigation der obersten Ebene durch diese ersetzen. Es gibt nur zusätzliche Navigationsebenen, Es gibt nur zusätzliche Navigationsebenen die dem Benutzer helfen, sehr große komplexe Websites zu navigieren und Anwendungen. Sie sind super einfach zu entwerfen, da sie nicht von diesem Beispiel abweichen , das ich Ihnen zeige. Sie werden ihn oft bei großen E-Commerce-Anwendungen sehen. Du siehst ihn hier in Amazon. Sie werden es hier in Best Buy sehen. Und wieder zeigen sie die Hierarchiestruktur der Informationsarchitektur einer Website. Sie können hier sehen, dass ich gerade in Amazon bin und mir ein Fernglas ansehe. Und es lässt mich wissen, dass das Fernglas und das Betrachten von der Elektronik zu Hause aus beginnt und dann von Kameraferngläsern, Ferngläsern. Aber wenn ich hier wieder auf Kamerafotos gehe, lass mich einfach nach unten scrollen und hier noch eins davon schnappen. Schauen wir uns hier die Computer an. Sehen Sie, wie sich das beispielsweise ändert, ein Monitor wird auf diesen Monitor schauen. Ich werde hier drüben einen finden und es wird, es wird aktualisiert. Gib mir einfach eine Sekunde. Lassen Sie mich auf eine davon klicken. Okay, also siehst du, wie es mich nur wissen lässt , dass ich mir Monitore ansehe, aber es kam von Computerzubehör und Elektronik hier. Es ist nicht, dass es mir nicht meine Geschichte zeigt , wo ich wette, es zeigt mir nur die Site-Architektur. Das ist das Schlüsselstück dafür. Sprechen wir ein wenig über die Verwendung und die besten Tipps für sie. Verwenden Sie also nur Breadcrumbs für große Site-Anwendungen mit vielen Informationen und Kontakten. Kontakt. Am besten für große E-Commerce-Websites wie wir es gerade bei Amazon gesehen haben. Sie sind nicht wirklich für eine Informationsarchitektur auf Elternebene gedacht , wie eine Portfolio-Site oder wie eine einfache Mom- und Pops-Star-Website. Die Brotkrumen ersetzen diese globale Navigation nie wieder . Und die Brotkrumen sollten den aktuellen Standort und die Websites anzeigen . Auch hier die Hierarchiestruktur, nicht der Sitzungsverlauf. Dort glaube ich, dass manche Leute das falsch verstehen. Es zeigt nicht, wo ich gewesen bin. Es zeigt nur die Site-Struktur an. Wenn Sie den Verlauf gezeigt haben , wo unser Benutzer ist, wird es schnell lang und verwirrend mit vielen Wiederholungen. Fügen Sie auch immer die aktuelle Seite als das letzte Element auf dem Breadcrumb-Trail ein. Und das sollte kein Link sein. Es sollte so aussehen. Der Breadcrumb-Trail, der der Trail ist , der zur aktuellen Seite führt , auf der Sie sich befinden. Alle diese Seiten sollten Seiten auf übergeordneter Ebene der Hierarchiestruktur sein, keine Seiten auf Enkelkind-Ebene. Dies sind Seiten auf Elternebene und die Seite, auf der ich hier auf Rednern bin, die in Ordnung ist, um die Informationsarchitektur auf Enkelkind- oder Chat-Kind-Ebene auf dem Breadcrumb zu zeigen Informationsarchitektur auf Enkelkind- oder Chat-Kind-Ebene . So mag dies sehr körnig werden, aber diese sollen Elternebene sein, weil sie mir zeigen, wo dieses Kind lebt oder Enkelkind in Bezug auf die Informationen auf Elternebene lebt oder das Enkelkind lebt architektur. Auch hier sollte der Breadcrumb Trail immer mit einem Link zurück zur Homepage oder zur obersten Ebene beginnen , wie wenn Sie zu Hause sind. Jetzt können Sie hier sehen, dass es Elektronik hat. Du suchst und schaust von der Elektronik aus. Es beginnt Sie also von der Elektronik hier, nicht unbedingt die Homepage, auf der Sie Best Buy hier sehen können , Best Buy als Homepage hat. Und es geht in diesen Typ ein, dieser ist besser. Meiner Meinung nach sollten Sie die Homepage immer am Anfang haben . Schon wieder. Zeigen Sie also gute Links vermitteln, transportieren, wie zeigen Sie dem Benutzer, dass Sie auf diese verschiedenen klicken können und nicht auf den, auf dem Sie sich befinden. Hier ist hier keine Link-Beförderung. Klare Übermittlung des Schrittes, der Benutzerzone, Sie können sehen, dass die Lautsprecher hier etwas dunkler sind, oder der rechts, es ist immer noch keine klare Linkübertragung, und es ist nicht klar, welche sie verwenden ist dazu. Es sollte immer in einer Zeile sein. Zerbrich die Brotspur nicht in zwei Zeilen. Wenn Ihnen hier der Speicherplatz ausgeht, entfernen Sie einfach eine der Site-Architektur auf übergeordneter Ebene. Also brauchen wir hier keine Computer. Geh einfach zurück zu Heimelektronik und Lautsprechern. Ziemlich einfach, das sind Paniermehl. Ich treffe dich im nächsten Video, wir reden über Paginierung. Wir sehen uns dort. 20. Seitennummerierung: Okay, lass uns über Paginierung sprechen. Paginierung ist also eine Komponente der Seitennavigation, die Benutzern hilft , viele Informationen und Inhalte zu navigieren , die nicht auf einem Bildschirm angezeigt werden können. Und so unterteilt diese Methode den gesamten Inhalt in mehrere Seiten und präsentiert gerade genug Inhalt auf begrenzte verdauliche Weise pro Bildschirm. Es werden am häufigsten für Suchergebnisseiten für große E-Commerce-Websites verwendet Suchergebnisseiten für , die viel Inhalt oder Produkte anbieten können. Benutzer, der diese Art dieser Produkte durchsuchen und sich ansehen und sich mit diesen Produkten beschäftigen möchte . Und wenn Sie vorhaben, eine Paginierungskomponente zu verwenden, müssen Sie über eine Suchfunktion und gute Filteroptionen verfügen, um dem Benutzer zu helfen , das gesuchte Gerät einzuschränken. Sie sehen so aus. Sie haben die Liste der Seiten mit jeder Inhaltsebene. Ich mache das in einer Minute kaputt. Einige von ihnen ermöglichen es Ihnen , auf eine Seite zu springen. Aber der Punkt ist, dass niemand 22 Seiten durchgehen möchte , um zu finden, was er braucht. Wenn Sie eine gute Suche und gute Filterung haben, können sie diese Liste eingrenzen und finden, was sie brauchen. Manchmal kaufen die Leute einfach ein. Ich zeige es dir im selben Video, was man unendliche Schriftrolle nennt, das so ziemlich der Paginierungskiller ist. Es ist so, als würde man das nicht so ziemlich töten, wenn du etwas einkaufst. Das wirst du auch bei Google sehen. Wenn Sie eine Google-Website suchen können Sie hier verschiedene Seiten aufrufen. Und du wirst ihn auch so ziemlich einfach sehen , wo sie nur Pfeile und die Zahlen haben. Hier ist ein Beispiel dafür. Ich schaue mir hier DC-Schuhe an. Ich schaue mir da an. Schauen wir uns ihre Männer an, die hier wählen. Sie können hier oben die Paginierung sehen. Sie haben es auch unten. Also kann ich hier auf die zweite Seite gehen. Ich schaffe es auch ganz oben. Hier ist im Wesentlichen der Zusammenbruch. Die aktuelle Seite, auf der Sie sich befinden, können Sie hier immer blau dargestellt sehen. Wenn Sie eine Nummer für diese zukünftige Seite oder eine Nummer eins haben , ist hier die Rückseite. Die kleinen Ellipsen, die drei Punkte hier, das ist nicht verlobt. Er kann nicht darauf klicken, aber es zeigt nur, dass die Seiten zwischen 522 malen. Dies hilft dem Benutzer einen Hinweis darauf zu geben, wow, ich habe viel zu schnüffeln um zu finden, wonach ich suche. Auch hier haben Sie diesen Pfeil nach vorn Pfeil zurück Seite, Tasten, Buttons. Und dann hast du dieses Goto-Formular, das, wenn du versuchst, auf die Seite 17 zu gelangen, dies ein schnellerer Weg ist, dorthin zu gelangen. Sie gehen einfach rein und geben die Seitenzahl ein, in der Sie sich befinden, drücken Sie die Eingabetaste, und dann geht es auf 17 weiter. Sie werden sehen, dass dies auch ziemlich üblich ist, ist das Kontrollkästchen oder das Dropdown-Menü hier. Dies gibt Ihnen eine Reihe der Inhalts - oder Produkttypen , die pro Seite angezeigt werden. Sie können dies also von 15 auf sagen 50 erweitern. Dies zeigt Ihnen die Ergebnisse. Wie viele werden derzeit angezeigt, wir haben eins bis 15 und fügen Ihre Suchergebnisse hinzu. Es werden 324 Produkte auf 22 Seiten mit 15 Produkten pro Seite angezeigt . So funktioniert das irgendwie. Sie werden eine Menge Paginierung sehen, die häufig beim Onboarding verwendet wird. Onboarding ist eine visuelle Möglichkeit , Ihren Benutzer oder Ihre neuen Benutzer darüber aufzuklären, wie Ihre Anwendung funktioniert oder was Sie in Ihrer Anwendung erwarten können. Und wir verwenden dies für eine Anwendung, an der ich arbeite wo Sie einen neuen Benutzer bekommen, der sich anmeldet. Und diese drei kleinen Punkte hier , die als Paginierung bezeichnet werden. Und der Benutzer drückt hier die nächste Taste, tippe darauf und du wirst sehen, dass der nächste Punkt dunkel wird. Dies gibt dem Benutzer das Gleiche, worüber wir gesprochen haben, welche Zauberer, es gibt ihm ein Gefühl der Erwartung. Wie viele Bildschirme werden Zeit, Ort, Fortschritt durchlaufen ? Und sie können jeden von diesen durchgehen. Lassen Sie uns das für das Onboarding ganz schnell aufschlüsseln. Ich füge immer einen Sprung-Button hinzu. Wenn Sie Onboarding machen, dies am besten auf drei bis fünf Schritte halten. Machen Sie dies nicht zu entmutigend für neue, neue Benutzer, die in Ihr Produkt kommen , der nur sein Produkt verwenden möchte. Wie nur drei bis fünf Schritte. Halten Sie es einfach, aber behalten Sie immer einen Übersprung-Button und normalerweise oben links oder oben rechts. Und es ermöglicht dem Benutzer , all diese Bildschirme zu überspringen. Dann siehst du hier die Paginierung. Wir haben also fünf Bildschirme. Jeder Kreis repräsentiert einen Bildschirm. Ein gefüllter Kreis stellt die Schritte dar, auf denen sich der Benutzer befindet, gibt uns ein Gefühl des Standorts. Und die Klassen stellen die Bildschirme dar , die der Benutzer bereits gesehen und fertiggestellt hat. Und wieder kann das mit Fortschritten konfrontiert werden. Schauen wir uns also unendliches Scrollen an. Unendliches Scrollen ist der Ersatz der Paginierung. Es ermöglicht das Laden neuer Inhalte, wenn der Benutzer die Seite nach unten scrollt. Und das macht es viel einfacher, Inhalte zu durchsuchen anstatt Seite für Seite wie Seite klicken zu müssen. Wieder, wie eine bessere Erschwinglichkeit. Unendliches Scrollen kann süchtig machen. Du bist genauso wie weiter scrollen und durch neue Produkte und neue Produkte scrollen. Unendliches Scrollen immer besser als Paginierungsperiode. Niemand möchte Hunderte von Seiten durchklicken , um herauszufinden, was er braucht. Sie können also die DC-Schuhe hier sehen, die diese Paginierung hatten. Schauen wir uns Nike an, der unendlich nach unten scrollt durch DC-Schuhe scrollt. Und im Gegensatz zu uns, cool, komme ich auf den Grund und ich muss klicken und schauen. Es wird geladen. Ich muss wieder durch scrollen, gehe zurück nach unten. Man kann dir irgendwie das Gefühl geben , dass es ein wenig entmutigend ist. Es geht einfach hin und her, hin und her. Guck auf Nike macht es. Schauen wir uns Nike-Schuhe an. Schauen wir uns ein paar Jordans an, einige scrollen nach unten und schauen zu, wann ich am Ende komme. Ich lasse mich tatsächlich, lass mich gehen. Geh einfach zu Männern, das war, ich brauche hier unendliche Produkte. Entschuldigung. Schauen wir uns die Wahl an. Okay. Nun sieh zu, wie sie hier die Schuhe runterscrollen , boom, boom, boom. Sieh dir diesen kleinen Dreh an. Unendliche Schriftrolle. Uhren so schnell. Aber sieh es, ich kann sehen, wie mein Cursor im Browser hier nach unten geht. Nicht ziemlich gutes Internet, aber du hast den kleinen Spinner dort gesehen. Und ich werde einfach weitermachen, ich kann einfach ewig weitermachen und es wird einfach weiter Produkte laden und Produkte laden. Und ich kann einfach hier sehen, stöbern Sie einfach bis mein kleines Herz begehrt und nicht wirklich etwas kaufen, aber ich kann mir dieses Zeug einfach ansehen. Okay, das ist also unendliches Scrollen auf den Punkt gebracht. Und dann gibt es hier eine Seite namens Gymshark, und sie verwenden eine Mischung aus beiden. Wenn du hier kurze Hosen runterscrollst. Ich komme zum Ende all der Shorts hier. Ich kann laden, mehr laden, Kunst, könnte sie alle sehen und mehr laden. Irgendwie macht das unendliche Scrollen hier ich lade mehr Produkte. Es ist eine Kombination aus beidem, was man sehen kann. Exzellente Zusammenfassung. Verwenden Sie immer die Paginierung für Onboarding-Bildschirme. Sie sind großartig. Sie werden verwendet, wenn viele Inhalte und Produkte angezeigt werden. Wenn Sie eine Paginierung vermeiden können, verwenden Sie immer einen unendlichen Bildlauf und stellen Sie immer sicher, dass Sie über eine Suchfunktion und gute Filteroptionen verfügen . Alles klar, cool. Also haben wir die Paginierung abgeschlossen und wir sehen uns im nächsten Video, das letzte, das wir über Icons und Fotos sprechen werden. Wir sehen uns dort. Tschüss. 21. Icons: Alles klar, Reden wir über Icons und Fotos. Ich werde diesen Abschnitt in zwei Videos aufteilen. Ich werde zuerst über Icons sprechen und dann werde ich über Fotos sprechen . Fangen Sie einfach an. High-Level-Symbole sind sehr einfache Illustrationen von Themen oder Aktionen. Sie werden überall benutzt. Sie helfen Menschen, gemeinsame Punkte von Navigationsaktionen und Kontexten zu verstehen gemeinsame Punkte von Navigationsaktionen und , die von Website-Software verwendet werden, Betriebssystemzeichen. Sie sind großartig, weil sie universell sind. Und wieder wird überall auf der Welt verstanden, die meistens von jedem werden und auch Sprachbarrieren überbrücken um eine Ikone verstanden werden und auch Sprachbarrieren überbrücken, um eine Ikone eines Zuges auszubilden. Einige Symbole wie Home Share, Drucken, Pause, Wiedergabe von Nachrichten als nächstes, wie zum Beispiel Hinzufügen von Löschprofilen hinzufügen, suchen. Sie sind alle so verbreitet , dass sie keine Erklärung benötigen, da die Leute genau wissen, was sie tun wann und wo immer sie sie sehen. Im Allgemeinen können Sie sich zwei verschiedene Arten von Ikonographie vorstellen . Sie können sich mehr handlungsorientiert vorstellen , nämlich dass die Leute sie benutzen werden. Sie können sich eher illustrationsorientiert vorstellen, was Kommunikationszielen dient. Wenn wir uns auf die Benutzererfahrung beziehen, beziehen sich Icons hauptsächlich auf Symbole, die von Personen verwendet werden. Die aktionsorientierten Symbole sind tendenziell weniger anschaulich, und diejenigen, die Kommunikationszielen dienen , sind anschaulicher, und diejenigen, die mehr auf der grafischen Seite der Dinge leben. Obwohl viele UX-Designer beide Arten von Symbolen erstellen, um die Kommunikation eines bestimmten Bildschirms ODER und der Benutzerfreundlichkeit einer Anwendung oder einer Website am besten die Kommunikation eines bestimmten Bildschirms ODER zu ermöglichen. Auch hier, im Allgemeinen, Es ist eine gute Praxis, die Action-Symbole nicht sehr anschaulich zu machen . Diese Symbole sollten sehr einfach, leicht zu scannen und leicht verständlich sein. Auch hier sind die Vorteile von Icons. Es gibt viel einfacher zu scannen und auf einen Blick zu lesen, und tatsächliche Texte gehen auf dieses Zauberwort Erschwinglichkeit zurück. Es gibt irgendwie zurück, wie Bilder 1000 Wörter sagen, genauso wie Icons. Sie können viel mehr als Worte kommunizieren. Wie ich schon sagte, das Universale von allen Sprachen verstanden wird. Sie dienen als graue Aktionsziele für Benutzeroberflächen. Dinge, auf die Leute tippen können. Du denkst darüber nach, wann wir die Tab-Leisten gemacht haben. Wir hatten den Fico hier auf Instagram. Sie können sehen, als hätten sie unten fünf Symbole für die Tableiste und drei oben für die Titelleiste. Ich sagte, sie hätten Icons, die während ihrer gesamten Anwendung als Aktionsziele dienen . Das ist großartig. All das könntest du nicht mit Text kombinieren. Das Symbol, es ist irgendwie mehr als viele Fälle als im Text zu sprechen . Sie helfen uns dabei, Bildschirmimmobilien und Platz zu sparen. Und sie sind optisch ansprechend und helfen, bestimmte Markentypen zu vermitteln. Sie können Ihre Marke durch den Stil Ihrer Icons beeinflussen . Ich habe eine ganze Reihe gemeinsamer Icons hier drüben gelegt. Ich werde sie nicht alle durchgehen, sondern einfach ein paar gebräuchlichere durchgehen. Aber wissen Sie, Dinge wie Zuhause und Bearbeiten und Suchen, Profil und Menü und Pause und Favorit und spielen und löschen und hinzufügen eine Nachricht und Fehler sowie Mikrofone und Einkaufswagen, Favoriten, Kalender, erweitern, löschen, Benachrichtigungen zuschneiden. Basierend auf all diesen Icons können Sie sich fragen, was haben diese alle gemeinsam? Und sie werden häufig für mehrere Benutzererfahrungen und Anwendungen verwendet. Wenn Sie also vorhaben, eines davon zu verwenden , erfinden Sie das Rad nicht neu. Verwenden Sie die beliebteste Form dieses Symbols, da Benutzer es höchstwahrscheinlich bereits gesehen und in anderen Anwendungen verwendet haben . Sie können also erwarten, dass sie genau wissen, wie es ist oder wie das Symbol ist, wie es verwendet und was es in Ihrer UX macht. In Bezug auf Etiketten. Wenn Sie sich nicht sicher sind, ob ein Benutzer verstehen wird, was Ihr Symbol tut oder genau wissen, was es auf einen Blick ist, fügen Sie ihm ein Label hinzu. Du siehst, dass dies eine Geldbörse ist. Wir fügen meine Brieftasche hinzu. Dies nur der Text allein zeigt bereits an, dass es mein ist , es ist ein Ort für mich und es sind Geldbörsen, in die ich mein Geld hinlegen werde, wo diese Brieftasche ohne den Text möglicherweise nicht so spezifisch ist. Sie können auch einen Tooltip hinzufügen wie wir es hier getan haben, mit dem Symbol, das Ihnen hilft, anzuzeigen, was das Symbol macht, wenn Sie den Mauszeiger darüber bewegen. Aber auch hier funktioniert es nur für Desktop-Geräte und funktioniert nicht für Mobilgeräte und Tablets. Es sollte also nicht der Hauptweg sein, ein abstraktes Symbol zu kommunizieren. Best Practices, wie ich bereits sagte , erfinden das Rad nicht neu. Vertraute Icons funktionieren am besten. Verwenden Sie Symbole, die zuvor erkannt und gesehen wurden. Verwenden Sie sie nicht zu viel, werden Sie übermäßig mit ihnen dekorieren, weil es ihren Zweck verwässern kann. Wenn sie anschaulicher oder übermäßiger werden, dienen sie möglicherweise nicht mehr als Aktionsziele und der Benutzer könnte denken, dass es dekorativer ist. Verwenden Sie die 5-Sekunden-Regel. Das heißt, wenn Sie Ihre Icons testen und es dauert länger als fünf Sekunden, um darüber nachzudenken, was ein Symbol bewirkt, oder um das Symbol zu scannen, dann funktioniert es wahrscheinlich nicht oder ist nicht effektiv genug. Halte deine Icons einfach. Veranschaulichen Sie sie noch einmal nicht zu Ende. Testen Sie dann Ihre Icons mit Benutzern, prüfen Sie, ob Sie ein Label benötigen oder nicht. Du zeigst einfach dein Icon an, hast dich zum Benutzer gefragt, was denkst du, dass sich das Symbol befindet? im zweiten Teil dieser Frage, denkst du im zweiten Teil dieser Frage, was sie tut? Für mobile Geräte muss dann mindestens 40 Pixel mal 40 Pixel groß sein, um ein richtiges Tippziel zu erzielen. Und lassen Sie mich Ihnen die beste Vorgehensweise für Ihr Zielgebiet mit einem kleinen Icon zeigen . Wir verwenden also ständig kleine Symbole, da sie effektiv sind, leicht zu scannen sind Ihre Benutzeroberfläche nicht überladen. in den meisten Fällen sicher, dass Ihr Clip- oder Tippziel größer ist als das Symbol selbst. Dies hilft normalerweise, sich mit dem Symbol zu beschäftigen, und der Benutzer muss es sich mit dem Symbol zu beschäftigen, und nicht verdoppeln, verdoppeln , klicken oder darauf tippen. Wenn Sie hier ein Symbol haben, erstellen Sie nicht nur das Symbol, das Tippziel, also den Bereich, der anklickbar und anklickbar ist. Also nur das kleine X hier. Das rosa transparente Rechteck oder Quadrat hier repräsentiert also unser Tech-Ziel. Wenn wir hier ein Symbol setzen, das wirklich klein ist, einmal das Tippziel mindestens 50 Pixel mal 50 Pixel, das Symbol, kann es kleiner sein, aber der Tippbereich ist größer. Ich sehe das oft bei den Schülern, die ich unterrichte. Ich bin die Icons durch ihre Anwendungen haben unterschiedliche Strichstärken und es erzeugt eine inkonsistente Bildsprache die die Benutzeroberfläche sogar ein wenig schlampig aussehen lassen kann , meine Meinung nach. Behalten Sie also die gleiche Dicke bei Ihren Strichen bei. Sie können sehen, dass es hier einen anderen Strich für die Nachricht gibt. Sogar ich kann sagen, dass es einen anderen Schlag für den Leiter des Profils gibt. Oder wenn Sie hier rechts hinschauen, sind diese alle genau die gleiche Strichbreite. Wir haben dies an den Best Practices für die Tab-Leisten gesehen. Denken Sie daran mischen Sie Ihren Schlaganfall nicht, machen Sie keinen Schlaganfall. Gliederungssymbole sind gestreichte Umrisssymbole und gefüllte Symbole. Verwenden Sie einen der anderen, aber mischen Sie diese im Allgemeinen nicht weil es ihnen mehr visuelles Gewicht verleiht , der gefüllt ist, im Vergleich zu dem , das skizziert ist. Normalerweise verwende ich hier mehr von den gestreichelten Umrissen wie diesen. Nur aus diesem Grund sind dies Tap Targets. Sie sind normalerweise umsetzbar oder können als Destinationen dienen. Und wir möchten unseren Kontakt hervorheben und beglückwünschen. Dies sind nur Möglichkeiten, um zu navigieren und Dinge zu tun , die unsere Anwendung haben. Und wenn sie zu schwer sind, können sie von den Inhalten auf der Seite ablenken. Normalerweise mache ich gerne die Gliederung. Und sie sind auch in Anwendungen der Benutzererfahrung häufiger . Lass uns ein paar Do und Don'ts holen. Halten Sie Ihre Icons wieder konsistent und Sie können hier sehen , dass diese wie eine familienkonsistente Striche aussahen. Sie alle benutzen hier rechts skizziert. Sieht nicht aus wie eine Familie. Du hast harte Kanten. Sie haben einige Icons mit abgerundeten Kanten. Sie sind voll, gestreichelt, sie sind irgendwie überall. Halten Sie sie wieder einfach und modern. Sie werden brauchbar aussehen, aber sie werden auch den Test der Zeit überstehen. Wenn Sie so illustrativer werden und mehr Farbe in ein Symbol einfügen, können sie dekorativer und weniger brauchbar aussehen, und sie werden auch den Test der Zeit nicht bestehen. Einfach funktioniert immer, immer effektiv. Je mehr Sie Dinge hinzufügen und Illustrationen hinzufügen und grafische Elemente hinzufügen. Oft entwickeln sich unsere UI-Trends im Laufe der Zeit oder unsere visuellen Sprachen entwickeln sich und diese Dinge können den Test der Zeit dauern , wo dieser Pfeil hier für immer ein Pfeil sein wird. Wie ein netter, sauberer, einfacher, dünner Pfeil ewig halten wird. Stellen Sie sicher, dass Ihre Icons gleich groß aussehen. Und hier ist der echte Kicker optisch. Sie können hier sehen, dass wir es haben, ich habe diese rosa Linie hier. Meistens alle Icons außer der Musiknote. Sie passen in diesen vertikalen Raum. Wenn man sich die zweite hier anschaut, sehen sie genau aus. Sie sehen buchstäblich optisch gleichmäßig aus. Obwohl dies nicht der Fall ist, kann man die rosa Linien sehen. Und wenn Sie sich das hier rechts ansehen, haben wir das Musiksymbol so verkleinert an die vertikale Höhe dieser rosa Linie passt. Und wenn man hier unten hinüberschaut , sieht dieses Musiksymbol nur ein bisschen klein und ein bisschen höher aus als die anderen Icons. Und es ist sehr, sehr subtil, aber diese Dinge sind wichtig. Diese sind wie Du solltest die Details hier schwitzen. Optisch ist immer besser als streungenau. So können Sie sich hier genau ansehen, aber danke, sollte visueller als genau eingestellt werden. Ihr Bestes, gehen wir an Orte, an denen wir Icons suchen können. Ihr bester Satz frei von den größten kostenlosen Symbolen der Welt heißt Noun Project. Ich hab es hier geöffnet. Nomen Project ist großartig. Schauen wir uns Eiscreme-Symbole an. Okay, also sieh mal wie viele. Ich werde ein bisschen verkleinern, damit du sehen kannst, dass es nur Unmengen Eiscreme-Symbolen gibt und du kannst mehr zeigen. Ich glaube, es waren etwa 200 mehr hier. Alles kostenlos, super einfach. Sagen wir, wir möchten diesen kleinen Eiswagen hier. Es ist irgendwie süß. Ich will dieses Icon. Einfacher Download. Gehe zu SVG. Diese Seite ist so großartig und kostenlos. Ich bin wie von allen Websites , die ich benutze, die kostenlos sind, ich bin eigentlich so, als würde ich Noun Project gerne monatliche Kosten zahlen. Ich weiß nicht, 20$ oder so nur um all diese Websites zu benutzen, diese Symbole bedeuten, dass es großartig ist. Ich nehme es umsonst. Versteh mich nicht falsch. Ähm, aber ja, ich bezahle diese gerne. Ich benutze das so oft. Siehst du, ich habe gerade das Eiscreme-Symbol heruntergeladen. Ich habe es in das Design-Tool gezogen , das ich verwende namens Figma. Ich wähle dieses Icon aus und schaue es mir an. Ich kann es sehr schnell in meinem Layout verwenden. Ich werde das ein bisschen verkleiden. Verkleinern Sie das. Dies ist eine Vektorform, also kann ich hier hineingehen und diesem Symbol hier etwas Farbe hinzufügen. Ich weiß nicht, lass es uns rosa machen. Wie Downsize Ding hier. Super cool. Gib ein wenig, wenig Auspuff. Eine kleine Bewegung hier. Mach das blau. Dreh das um. Alles klar, ich werde hier nicht zu verrückt, aber du siehst die Idee. Sie können hier eine ganze Reihe kostenloser Icons bekommen und sich diesen niedlichen kleinen Eiswagen-Besitzer ansehen . Ich mache weiter und tätowiere das kleine Tattoo auf meinem Arm. Alles klar. Einige andere Websites, die Sie auschecken können, sind ICANN eight.com. Sie haben eine große Auswahl an kostenlosen Icons , damit sie hier anschaulicher werden. Aber sie sind echt süß und nett. Man sieht die hier drüben. Sie haben auch Sammlungen dabei, sodass Sie auf eine klicken können und sie herunterladen können. Sie haben auch HTML darin eingebettet. Und dann können Sie sich die andere Kollektion hier von dieser Person ansehen. Dann heißt der andere, der hier wirklich ordentlich ist, du zeichnest oder tut mir leid, OnDraw. Dieser ist genial. Das sind also alles Vektorillustrationen. Und was wirklich cool an diesem ist , ist, dass Sie suchen können, wo immer Sie wollen. Also habe ich schon nach Essen gesucht. Ich hoffe, ich mache dich hungrig. Sie können diese live in jede Farbe ändern. Ich ändere hier die Farben auf dem Farbrad und sie werden alle aktualisiert. Also lass uns etwas hohes Rosa hineinstecken. Ich schaue mir das süße an, was für den Hund. Okay, und ich lade die SVG herunter, boom, heruntergeladen, ziehe das in Figma. Schau, ich habe einen süßen kleinen Blick auf diesen süßen kleinen Hund hier drüben. Ja, ich hab diesen süßen Hund. Es wurde gegessen. Ich hab einen süßen kleinen Eiswagen hier drüben. Lass mich da gehen. Positionieren Sie das neu. Wirklich schnell. Ich habe die Lieferung an mein Eis. Es wird meinem Hund etwas Eis geben und dann wird es für Leckereien backen. Ich möchte wahrscheinlich danach spazieren gehen. Aber ja, Sie können sehen, dass viel Coolness auf gezeichnet wirklich, wirklich cool ist , in diesem Sinne , dass Sie diese Farben live ändern und Ihre Markenfarben einsetzen und sich dann diese Icons schnappen können. Okay, cool. Ich werde mit Symbolen abschließen und ein weiteres Video machen, in dem wir tiefgreifend auf Best Practices für Fotos und Bilder eingehen und wie wir dort Strategien entwickeln können. Und wir sehen uns auf dem anderen Video. Bis bald. 22. Fotos: Sprechen wir über Fotos und Bilder, und es ist Klischee, aber Bilder sprechen lauter als Worte und Bilder sind mehr als Dekoration. Es ist ein äußerst leistungsfähiges Tool Sie Ihre Inhalte, Ziele, Ihr Produkt und Ihre Marke kommunizieren können. Bilder werden verwendet, um die Stimme einer Marke einzurichten und den Ton der Marke aufzubauen. Und ein gutes Foto kann mehr Informationen vermitteln als Textabsätze. Am wichtigsten ist, dass ein gutes Bild dazu beitragen kann, das Kommunikationsziel viel schneller zu erziehen oder zu vermitteln , als ein Benutzer lesen zu lassen. Und die meiste Zeit in UX, Sie nicht davon aus oder landen darauf, dass die Leute irgendetwas lesen werden. Aber die Leute lesen nicht mal gerne. Vielleicht lesen sie gerne Bücher, aber wenn es um die Bewerbung geht, wollen sie einfach reinkommen, tun, was sie wollen und gehen. Und so oft oder nicht, ich werde Worte zur Anwendung haben , die beschreiben, was zu tun ist, und wir testen es. Und die Leute mögen es , ein Kinderspiel zu sein, es ist eine gute Sache. Wir wollen nicht, dass sie das Gefühl haben, dass sie aufhören wollen und alles lesen und Anweisungen befolgen müssen. Sie wollten nur reinkommen und tun, was auch immer die Bewerbung tut, und gehen und weitermachen und ihr Leben fortsetzen. Bilder helfen sehr in diesem Sinne, das Kommunikationsziel einzurichten oder etwas mehr mit einem Foto zu kommunizieren, dann geht ein Haufen Texte immer wieder auf dieses magische Wort zurück, Erschwinglichkeit, Zeit und Energie verbraucht. Schauen wir uns also einige Bilder an und die Art und Weise über Bilder nachzudenken oder sie zu kategorisieren oder zu messen, ist, dass Bilder Emotionen und Gedanken hervorrufen. Und diese Emotionen sollten an ein gewisses Maß an Adjektiven gebunden sein. Und diese Adjektive sollten verwendet werden , um Ihre Marke zu beschreiben. Wenn Sie eine Bank sind, möchten Sie vielleicht Adjektive, die ähnlich sind, wissen Sie, vertrauenswürdig und beruhigend sind. Und wenn Ihre kleinen Kinder Hausmarke spielen, werden Sie etwas Lustiges und Energetisches wollen. Und es gibt verschiedene Möglichkeiten, diese verschiedenen Stile zu kommunizieren, bei denen, wenn es ruhig ist, blaue Farben in eine Farbtheorie eingehen möchten. Blaue Farben und wenn es energisch und lustig ist, willst du wirklich leuchtende Farben und Sommerrosa und ähnliches. Aber schauen wir uns ein paar Fotos an und sprechen darüber welche Art von Emotionen aus diesen Fotos entstehen. Der zweite Teil ist , dass Fotos auch Gedanken anregen können . Wenn man sich dieses Foto hier anschaut, hat es ein Gefühl der Ruhe, wenn es sogar Flughafen ist, wo die Leute klettern. Dies hat dieses wirklich schöne Gefühl von Ruhe und aufgrund der orangefarbenen Farbe , die hilft, das Foto zu beruhigen. Die Körpersprache dieser Person sieht super entspannt aus, chillt nur auf einem Stuhl, hat seine Füße auf sein Gepäck gelegt. Es sieht ein bisschen Langeweile aus, als würde er einfach so aussehen, als würde er warten. Und es erinnert auch an einige Gedanken, hat diese Person ihren Flug verpasst , als wäre es, dass sein Flugzeug abfährt und du magst, oh Mann, ich muss den nächsten Flug herausfinden oder ist er einfach nur zum zu einem guten Zeitpunkt und es wartet nur. Ich sollte dieses Foto machen. Schau dir diese beiden Kinder an und sieh dir dieses kleine Kindergesicht so an, das ist pure Freude, die aus dem Gesicht dieses Kindes kommt. Er liebt es einfach. Er hat das wahrscheinlich nie tun müssen. Und dann haben sie dieses Fotoshooting gemacht. Du bist wie, ja, nimm einfach die Kissen und Ziegennazis, ihn und seinen Freund, oder vielleicht ist es sein Bruder, vielleicht seine Schwester oder so. Sie haben einen Riesenspaß. Sie können sich also vorstellen, dass dieses Foto ihre Gesichter Emotionen abgeben. Und es ist aufregend basierend auf der Körpersprache und der Bewegung. Es gibt viel Action auf diesem Foto, die Tageszeit, vielleicht ist dies Morgenzeit oder Nachmittag. Es sieht super lustig aus, basierend auf dem Inhalt. Es ist gerade selbst beigetreten. Darüber kannst du auch nachdenken. Spielen Kinder so überall oder sind das eine einzige bestimmte Kulturen? Und dann bringt es einen weiteren Punkt auf, dass einige Fotos und Fotos, die wir auswählen, kulturelle Normen überbrücken können, was ein klares Etwas bedeutet , das in jeder Kultur funktioniert. Oder das tun sie nicht. Sie arbeiten nur in einigen Kulturen. Wenn Sie ein internationales Produkt haben, müssen Sie sich auch der kulturellen Normen und ähnlicher Dinge bewusst sein . Das ist hier interessant, weil Sie irgendwie das Gefühl haben, von zu Hause aus zu arbeiten. Es ist langweilig, weil die Verwendung von starken gräulichen Farben, Es ist fast wie Monoton. Es ist nicht wirklich hell. Es ist eher ein Ton, der Farben zurückgezogen wird, hier wirklich entspannt, basierend auf der Körperbewegung. Aber es gibt dieses Gefühl von weltlicher oder mangelnder Anstiftung aufgrund der Arbeit von zu Hause aus. Und erinnert an diese Art von Gedanken ist diese Person, sind sie, wollen sie ausgehen oder sie stecken zu Hause? Hunde mögen es wahrscheinlich, sobald du aufstehst und das Zimmer verlässt, werde ich diesen Ort zerreißen. Aber ja, das sind nur einige Beispiele dafür wie Sie Ihre Fotos so testen können. Wenn Sie sich wirklich für die Markenentwicklung interessieren, können Sie solche Fotos machen und die Leute fragen welche Art von Emotionen , welche Art von Emotionen und Gedanken sie von diesen Fotos bekommen? Und sehen Sie, ob sie in Ihren Markenkommunikationszielen an Ihre Markenadjektive gebunden sind. Schauen wir uns einige Best Practices und Don'ts an. Wenn Sie also ein Foto haben und wieder, denken wir hier für strategisch, wie Fotos hier sind, um uns dabei zu helfen, unsere Ziele zu kommunizieren. Sie sind nicht nur etwas, das wir einfach aus dem Nichts ziehen und Gott, werfen Sie einfach ein Foto auf das Ding. Weißt du, sie sind ziemlich akribisch. Sie sind hier, um uns dabei zu helfen, das zu kommunizieren. Und in diesem Zusammenhang möchten wir hier ein Online-Meeting kommunizieren. Sie möchten es einfach machen , das Konzept Ihres Bildes zu zeigen. Wenn Sie links schauen, können Sie feststellen, dass es sich um ein Online-Meeting handelt. Sie machen FaceTime. Hier ist ein Timer im Spiel. Der auf der rechten Seite. Du musst nach diesem Konzept suchen. Haben sie ein Online-Meeting oder mochte sie einfach wirklich? Zahnpasta kennengelernt und sie schaut sich ein paar Zahnpasta an , ist so, als wäre eine für 299 fantastisch. Wann sollte man es morgen bestellen oder so ähnlich. Aber du verstehst irgendwie den Punkt hier. Seien Sie vorsichtig, wenn Sie Archivfotos von Leuten verwenden weil Sie sich treffen, wenn Sie in diesem Fall kommunizieren möchten. Das Beispiel ist, dass eine Bürobesprechung wie eine echte Bürobesprechung aussehen sollte . treffen. Stockfotos haben in der Regel, wie aussehen kann, keinen echten Kontext. Oder sogar Leute, die wie Schauspieler und Schauspielerinnen aussahen. Der auf der linken Seite sieht aus wie ein Meeting und es gibt ein Treffen , das jeden Tag stattfinden würde. Genau da. Sie haben einige Einblicke in Haftnotizen geschrieben. Sie teilen Wissen ist wie ein gutes UX-Meeting genau hier. Vielleicht wird diese Person wie ein Hund oder eine Eiswaffel oder so gezeichnet . Ich weiß es nicht. Ich weiß es nicht. Ich war in vielen Meetings meiner Karriere und ich bin noch nie in ein Meeting gegangen und habe gesehen, wie jeder mir das angetan hat. lächeln diesen Heiligenschein, Sir, wollen Sie eine gute, schöne Tasse Kaffee mit mir? Dieser Typ lächelt. Man könnte es einfach sagen, es sieht auf Lager aus. Das tut es nicht, sie sind offensichtlich echte Menschen, aber es sieht einfach nicht aus, es sieht nicht nach einem echten Meeting aus. Es sieht eingerichtet aus. Verwenden Sie also auf jeden Fall echte Kontexte und es hilft , Ihr Produkt näher an den Menschen und natürlicher zu machen . Alles klar, also mein Favorit ist es über verschiedene Möglichkeiten nachzudenken, wie Sie Ihre Produkte fotografieren können. Wenn Sie ein Produkt haben , das Sie verkaufen. Drücken Sie eine Persönlichkeit aus, die sich auf Ihr Ziel Ihres Produkts bezieht . Und Persönlichkeit zu zeigen hilft immer, diese Emotion hervorzurufen. Und Emotionen helfen, Wirkung und Bedeutung zu erzeugen. Und das ist echter. Du wirst dich an ein Foto erinnern , das Emotionen hervorruft. Und die Studien haben diesen Deal gezeigt. Sie werden sich an Dinge erinnern, die einzigartiger sind und eine Art von Emotionen hervorrufen, sei es Nostalgie oder irgendetwas. Mehr als nur ein einfacher Schuss. Machen Sie Fotos von Leuten, die interessante Dinge mit Ihren Produkten machen , versus so, langweilig, wie hier ist mein Make-up. Auf einer Granit-Arbeitsplatte. Als ob das hier genial ist. Dies zeigt FADH, es zeigt die menschliche Persönlichkeit. Sie machen etwas Einzigartiges. Es gibt einfach, es gibt hier eine Menge Tolles auf diesem Foto für das Beispiel einer Make-up-Linie. Okay, Cool. Weniger ist mehr. Hier ist also ein Heißluftballon-Event, das wir manchmal machen zu viel Inhalt bedeutet mehr Zeit. Jemand muss alle Informationen scannen und sich ansehen , die hier vor sich gehen. Und wieder hat das mit einer Erschwinglichkeit zu tun. Obwohl dieses Foto cool ist, wie schau, gibt es dieses kleine Schwein hier oben. Es hat interessante Elemente darin. Aber auch hier braucht es mehr Zeit, um dieses Ding beim Energizer-Hasen hier drüben zu betrachten und anzusehen Energizer-Hasen hier drüben als nur ein sehr einfacher Heißluftballon. So wie Einfachheit am besten funktioniert. Wir haben ein bisschen darüber mit Knöpfen gesprochen und auch wenn wir über Schatten gesprochen haben. Wenn Sie Text über ein Bild legen, einfach sicher, dass es lesbar und leicht zu lesen ist. Fügen Sie dem Text keine Schatten hinzu, sondern manipulieren Sie das Foto, um die Texte wirklich einfach zu machen, oder? Damit du ohne das sehen kannst, haben wir ein Schwarz. Es beginnt unten schwarz und oben ist es 100% transparent. Wir können dies beliebig positionieren. Es kann auf halbem Weg gehen, ich kann das Foto abdecken, aber du kannst sehen, wie es ohne es aussieht. Du darfst diesen Text nicht lesen. Wenn du nach rechts schaust oder einfach gehst und wir fügen den Texten einfach einen Schlagschatten hinzu. Das funktioniert nicht. Es lässt es veraltet aussehen. Es ist keine moderne Version der Typografie und ich werde Peers tippen. Ich liebe Typografie. Und ja, nur die allgemeine Regel, füge niemals einen Schatten auf Texte hinzu, wie andere Elemente um ihn herum zu manipulieren , damit der Text gut aussieht. Verwenden Sie gute Qualität, aber seien Sie vorsichtig mit der Zeit, die benötigt wird, bis das Foto geladen wird. Versuchen Sie also, Ihre Fotogröße für das Internet unter einem Megabyte zu halten. Auch hier wird alles andere die Ladezeit verzögern. Und stellen Sie auch sicher, dass das Foto eine gute Auflösung hat. Es ist also auch ein Gleichgewicht zwischen Fotoqualität und Ladezeit. Und Sie können hier sehen, dass dies ein tolles Foto ist. Es hat eine gute Qualität. Und dann sehen Sie hier, hier isst Mr. Warhol einen Cheeseburger, und das ist ein super pixeliges Foto hier. Also wollen wir Bilder, Bilder unter einem Megabyte für das Internet. Ja. Eine Sache, die Sie tun können, um bei der Qualität und der Ladezeit zu helfen, ist, dass Sie einen Kompressorstandort verwenden können. Ich benutze diesen heißt Kompressor I0. Und was es tun wird, ist, dass sie ein Foto machen, das eine anständige Menge an Megabyte enthält und das erheblich verkleinert wird. Also schauen wir uns das an. Es hat 1,1 Megabyte. Alles klar, es sieht aus wie dieses Foto hier. Ziehen wir das hinein und schauen wir uns wie viel Kompression das bewirken kann. Als hätte ich es von einem Megabyte auf 130 Kilobyte genommen. Du denkst wahrscheinlich: Nun, Aaron, es sieht wahrscheinlich wie Mist aus. Lasst uns die beiden vergleichen. Ich öffne hier ein weiteres Fenster, gehe zu meinen Downloads. Hier ist derjenige, den wir gerade verkleinert haben. Es liegt jetzt bei 140 Gigabyte. Das ist großartig. Hier ist derjenige, der bei 1,1 Megabyte liegt. Man kann den Unterschied nicht mal erkennen. Ordnung, also können Sie diesen Kompressor immer verwenden , um ihn oft für Assets zu verwenden, bevor ich ihn an ein Engineering gebe oder ihn auf irgendwelche Websites einsetze , an denen ich arbeite. Ich werfe sie einfach in das Kompressorwerkzeug und komprimiere sie einfach nach unten. Eine andere Sache ist, dass dies ziemlich offensichtlich ist, aber dehnen Sie Ihre Fotos niemals aus, wie füllen Sie stattdessen das Foto, wir haben dieses Foto angezoomt, anstatt Griechisch dieses Foto zu beschneiden und gefüllt zu haben. Anstatt so etwas zu tun, brauchen wir alles, um die Formen zu füllen. Lassen Sie mich also einfach, lassen Sie mich es einfach so strecken und strecken Sie es oben, damit Sie sehen können, dass der rechts sehr offensichtlich gedehnt aussieht, also vermeiden Sie das einfach. Eine andere Sache, die Sie tun können, die ziemlich cool ist, ist, dass Sie einem Foto Coverfarben-Overlays hinzufügen können Coverfarben-Overlays , um es besser gebrandmarkt zu machen oder dem Foto auch eine etwas visuelle Behandlung zu geben . Sie können eines der Fotos Ihrer Markenelemente hier verwenden. Nehmen wir an, unsere Marke ist blaugrün und orange, wie das Beispiel hier. Und ich mache es einfach sehr schnell. Es ist ziemlich einfach. Simon Figma hier. Ich schnappe mir nur ein Rechteck. Und schnappen wir uns ein Rosa. Es gibt etwas, das du hier tun könntest. Es gibt einen Transparenzfilter, den Sie verwenden können. Eine Sache, die ich tun könnte, ist, dass ich das Rosa einfach transparent machen kann . Das mache ich gerade. Es bekommt das, was ich stärkehaltig nenne, wo man das nicht bekommt, man verliert das Rosa und das Foto wird stärkehaltig oder langweilig. Und zu viel Rosa, du kannst das Foto nicht sehen. Wenn Sie also in Ihre Opazitätseinstellungen gehen und hier ein Multiplizieren durchführen. Multiplizieren wird das Foto einbringen. Dies ist derzeit eine Opazität von 100%. Das Multiplizieren bringt alle Farben des Fotos, hier alle Farben des Fotos, diese Dunkelheit der Farbe in diese rosa Farbe. Es macht es also besser zu überlagern. Sie können alle Ihre Fotos so machen. Sagen wir einfach, ich weiß nicht, du hattest eine Marke, die nur schwarz und weiß ist und du kannst hier jemanden machen , der rosa ist. Du kannst sogar ein bisschen mehr Spaß haben. Du könntest tun, als wäre die Hälfte davon rosa. Sie können sogar Fotoeffekte machen, bei denen wir so etwas mögen. Schaffen Sie einfach visuelle Interessen mit Ihren Fotos. Apropos visuelle Interessen geht zum nächsten Tipp. So können Sie Ihren Fotoinhalt und die Anzeigengrafik-Elemente darin maskieren , damit es mehr Branding oder aufgeregter aussieht als wieder, ist künstlerischer, aber schauen Sie, sie haben diesen Kerl ein Foto gemacht, sie haben ihn gefragt. Sie haben etwas Farbe gemacht, etwas Schwarz-Weiß. Sie hatten ein paar Kritzeleien. Sie haben es auf strukturiertes Papier gelegt, einige Formen hier. Er war ein paar SMS und ein paar Tränen. Sie haben den Kerl rechts hier drüben. Ich weiß es nicht. Sie haben ihm einfach die Augen abgeschnitten. Das war also irgendwie merkwürdig, aber sie fügten Text- und grafische Elemente der Natur und einige Buchillustrationen, Buchdrucke im Hintergrund und Kritzeleien und so hinzu. Es ist echt nett. Das ist wie ein wirklich nettes. Fast Schokoladenverpackungen laufen hier. Aber das ist eine andere Möglichkeit , Fotos zu behandeln. Du musst nicht nur ein quadratisches Foto sein. Sie können Fotos und verschiedene Containerformen platzieren. Sie können in jeder Form sein. Sie können verschiedene Formen desselben Fotos erstellen. Ich habe das schon mal auf einer Seite ziemlich cool aussieht, wo wir hier ein Foto hatten und wir kopieren einfach das Foto und haben es dort abgeschnitten, wo es rechts aussehen würde. Und wir haben eine andere Form gemacht, tatsächlich auch noch eine hinzugefügt. Wir hatten zwei Rechtecke hier. Sie können verschiedene Farben hinzufügen. Du kannst die Orange hinzufügen und wir hatten ein bisschen Grün. Und so hatten wir die Live-Aufnahme des Fotos und wir hatten ein paar Clips. Zeigen die Fotos immer noch andere Formen auf. Und wir hatten Farben an diesen Formen und es machte es ein bisschen spannender. Gleiche gilt dafür. Sie können Ihr Foto maskieren und auf Formen legen. Sie können das Quadrat hier in der Tafel sehen , die oben auf dem Platz sitzt. Oder Sie können ein Rechteck oder eine Dreiecksform verwenden. Und wieder, alles was wir tun ist, dass wir ein Alltägliches machen, wir haben gerade ein normales Foto von etwas gesehen. Und wir machen ein aufregendes, indem wir ihm diese visuellen Akzente hinzufügen. Okay, cool. Schauen wir uns also kostenlose Bildressourcen an. Mein Favorit ist also Unsplash. Du kannst hier alles kriegen. Gehen wir zurück zu unserem Eis. Sie können hier zu all diesen Bildern gehen und das sieht gut aus. Sie können es sich schnappen und kostenlos herunterladen. Lade es herunter und wir werden es in Figma stecken , wird wahrscheinlich hier ziemlich groß sein. Lassen Sie mich also ein bisschen rauszoomen. Und da ist dein Foto. Hochwertiges, gutes Foto. Und das Beste daran, kostenlos, kostenlos, kostenlos. Okay, cool. Ein anderes, zu dem Sie gehen können, heißt hier Pixel, PEX, ELS. Und wieder können Sie nach Eis suchen, ganzen Film, der Sie hungrig macht, alle kostenlosen Fotos. Du kannst das Gleiche herunterladen , was ich gerade mit dem Unsplash gemacht habe. Der andere ist Pixabay. Das Gleiche. Du machst ein paar Eiscreme-Shots und Bada Bing, Bada, Boom. Dann gibt es, wenn ich ziemlich oft benutze , heißt es ice stock.com. Es sind ungefähr 12 Dollar pro Foto. Sie haben jedoch Fotos, Illustrationen, Animationen, alle verschiedenen Arten von Fotografie und grafischen Elementen. Auch diese werden professionell erledigt, sodass Sie in Unsplash vielleicht das finden, wonach Sie suchen. Aber manchmal braucht man ein sehr gezieltes Foto. Und ich bin einer der größten Anbieter von professionell geschossenen Fotos. Echte Fotografen kommen her und benutzen dieses kleine Kinder, das hier Eis gegessen hat. Wie süß. Ja, 12 Dollar sind nicht schlecht für ein gutes Foto und du unterstützt jemanden. Es gibt eine Person hier, die das Foto hochlädt und sie bekommt einen Teil davon. Es ist also eine Art Win-Win. Alles klar. Das ist ein Wrap. Denken Sie daran, ich möchte eine Notiz der gerechten Sprache hinterlassen und Sie haben eine Erinnerung daran geschrieben welche Art von Sprache wir verwenden, um unsere Benutzeroberflächen zu beschreiben und einige der Grundlagen von Junior in ein gutes Benutzerschnittstelle. Ich glaube, ich habe die Videos so angefangen. Ich werde auf diesem Weg enden, bevor wir irgendeine Projektarbeit eingehen , die wir hier in einer Sekunde machen werden. Aber ein gutes Interface ist wie ein guter Witz und braucht keine Erklärung, muss die Richtung wissen, wie man nur Leute benutzen kann. Die Art und Weise, wie wir über unsere Schnittstellen sprechen. Es hat Persönlichkeit, was der Markenwert ist. Aber du hast gehört, dass ich viel über eine Menge über die Beförderung geredet habe. Wirklich gutes Wort, um Ihre Arbeit und die Entscheidungen darüber zu beschreiben , warum Ihre Schnittstelle so ist, wie sie ist. Denken Sie daran, dass es einfach ist, Informationen zu verstehen oder sich auf einen bestimmten Aufgabenstandort zu beziehen. Du hast gehört, dass ich das oft beschreiben würde. sind dies alles Mechanismen, die Ihnen helfen , Ihre Entscheidung zu beschreiben, egal welche Wahl Sie dazu beigetragen haben den Benutzer über seinen Standort zu informieren, oder es hat ihn nicht zu weit von seinem entfernt Ort, wenn sie alle wie ein scheinbares Niveau waren und in ein Modal einer Kind-Ebene gingen. Sie können immer noch die übergeordnete Ebene in diesem Modell sehen. Auch hier Workflow und Fortschritt und Steuerelemente wie Abbrechen, Speichern, Bearbeiten, Löschen, Bestätigung und Feedback. Erfolgsfehler beim Laden meines Lieblingsstücks, Erschwinglichkeit, einfacher Betrag, geringste Zeit und Energie, um eine Aufgabe zu erledigen. Informationshierarchie, Inhaltsreihenfolge, die Ihren Benutzeranforderungen entspricht. Und wieder, wenn all diese kombiniert und berücksichtigt werden , fühlt sich die Schnittstelle sehr einfach zu bedienen an. Tom Olsen, für den Benutzer sichtbar. Und ich werde irgendwie einpacken, benutze das als deine Bildsprache. Okay, cool. Ich hoffe, Ihnen hat der Content-Level dieses Kurses gefallen. Wir werden ein paar Projekte starten, bei denen ich Ihnen zeigen werde , wie Sie einige dieser Inhalte, die wir gemacht haben, aufnehmen und in Figma entwerfen können. So können Sie irgendwie sehen, wie man baut, wie man ein Handy, ein Modal und einige andere Dinge baut . Also sehe ich dich dort und danke nochmal. Tschüss. 23. Einführung in die Projektgruppe: Ordnung, willkommen im Projektbereich der Klasse, in dem wir einige dieser Designmuster aufbauen werden , die wir in der letzten Videoserie kennengelernt haben . Ich habe eine Figma-Datei erstellt, die du herunterladen, in Figma hochladen kannst und wir können das zusammen machen. Und wenn du Figma nicht hast oder Figma nicht kennst, ist das in Ordnung. Sie können, es ist kostenlos, es ist ein kostenloses Tool. Du kannst es herunterladen und dann kannst du diese Datei hochladen und du kannst zusammen mit mir weiterverfolgen. Werfen wir einen Blick auf alles, was wir hier lernen werden. Also fangen wir mit etwas Web-Prototyping an. Und wir werden hier lernen, wie man die Optionsfelder Benutzerdefiniert macht. Ziemlich einfach. Wir fangen hier ganz einfach an. Wir werden lernen, wie man das Menü und die Schublade macht. Siehst du hier. Wir werden ein paar Modals machen. Wir machen ein paar Akkordeons. Wir führen die Inline-Validierung und erstellen ein Konto und ändern dann die Schaltfläche Erstellen hier in ein Zahlenauswahlfeld. Und das haben wir während des Button-Videos gelernt. Wir werden lernen, wie man einen Dropdown macht und dann einen Kick auf die mobile Seite rollt . Wir werden lernen, wie man einige davon auf mobilen Geräten macht. Sagen Sie hier, Sie haben ein Vollbild-Modal das eine modale Version eines Dropdowns macht. Dropdowns oder anders als im Internet als auf Mobilgeräten, werden also im Internet als auf Mobilgeräten, lernen, wie man ein Modal macht. Ein mobiles Gerät wird Menüs für mobile Geräte erstellen. Wir machen die Tab-Leiste. Ich klicke hier durch diese Tab-Leisten und wie sie repariert bleiben. Und wir enden mit wenig, etwas komplizierterem, das ist in Ordnung wie horizontales Wischen. Und jedes Video oder jeden Abschnitt hier habe ich eine Figma-Datei erstellt, auf der das Beispiel bereits aufgebaut ist . Sie können hier mit dem Optionsfeld sehen, dass der Prototyp bereits vorhanden ist. So kannst du das öffnen, du kannst auseinander nehmen, du kannst sehen, wie das funktioniert. Dann haben wir den Abschnitt , der besagt, dass du es tust. Und wir werden das zusammen machen. Wir werden jeden dieser Build-Out und Menüs in einer Schublade und einem Modal durchgehen , und es gibt immer das Beispiel. Falls Sie also stecken bleiben oder irgendetwas, oder Sie dies einfach auseinander nehmen möchten, können Sie es verwenden und dann können Sie dem Video nachfolgen und wir werden jeden einzelnen davon durchgehen und bauen es. Großartig. Und wir können auch sehen, dass ich das Gleiche für die mobilen Geräte gemacht habe . Super Spaß. Okay, cool. Also mache ich ein weiteres Video, um Anweisungen zum Herunterladen dieser Datei zu erhalten und sie in Figma zu öffnen. Und wir sehen uns dort. Tschüss. 24. File: Alles klar, also lasst uns die Figma-Datei herunterladen. Und in diesem Video zeigt Ihnen, wie Sie die Datei öffnen. Sobald Sie die Datei heruntergeladen haben, sollte sie so aussehen. Es ist ein Arbeitsprojekt der Figma-Klasse. Punkt-Reißverschluss Alles, was Sie tun müssen, ist auf diese Datei doppelklicken oder dreifach klicken. Und das wird es entpacken. Und jetzt haben Sie hier einen Ordner namens Figma-Klassen-Arbeitsprojektdatei . Nun, du musst es tun, in diesen Ordner zu gehen. Ich habe dir Anweisungen für alle Fälle hinterlassen, aber ich werde diese im Video hier durchgehen. Aber wenn du die Anweisungen durchgehen willst, ist es das Gleiche, was ich hier im Video zeigen werde . Aber wirklich alles ist, dass Sie diese Datei nicht dreifach anklicken können , um sie in Figma zu öffnen. Wenn ich hier dreifach klicke, siehst du, dass ich diesen Fehler erhalte. Wieder bin ich auf einem Mac. Was du tun musst, ist, dass du nach Figma musst. Du musst in deine Entwürfe gehen. Und Ihre Entwürfe sehen vielleicht ein wenig anders aus als meine weil ich nur Tonnen von Dateien habe. Ja. Sie möchten hier oben links zu Ihren Entwürfen gehen. Und was Sie tun möchten, ist diese Datei einfach in Ihre Figma-Anwendung zu ziehen . Innerhalb des Entwurfs-Ordners. Du wirst sehen, dass ich ziehe und du wirst sehen dass ich einen blauen Umriss bekomme. Sobald du den blauen Umriss hast, ist das gut. Ziehen Sie es einfach und Sie werden sehen, dass dies eine Sekunde dauern kann, aber Sie werden sehen, dass die neue Datei hier geöffnet wird, fahren Sie fort und drücken Sie Fertig. Und Ihre Akte sollte auf der linken Seite ungefähr so aussehen . Ziemlich einfach. Jetzt müssen Sie nur noch tun , um in diese Datei zu gelangen , einfach doppelklicken. Und jetzt bist du in der Akte, du bist bereit zu gehen. Alles klar, ich gehe in das nächste Video und wir beginnen das. Wir sehen uns dort. 25. Erstelle – Web-Radio: Okay, lasst uns loslegen und Spaß haben und einige dieser Komponenten aufbauen und lernen wie man die Designmuster in ihnen aufbaut. Wenn Sie Figma noch nie benutzt haben, ist es gut, ein bisschen tief in Figma einzutauchen. Aber wenn nicht, ist es auch okay. wird dir wahrscheinlich gut gehen können, durch das Video zu gehen und es hier mit mir zu machen. Und ich gehe, ich gehe überhaupt ziemlich langsam. Ich werde irgendwie darüber reden, was hier vor sich geht, aber ich habe alles eingerichtet, also sollte es ziemlich einfach sein. In diesem Video bleiben wir hier im Web-Prototyp. Wir machen alles im Internet und gehen dann zum mobilen Prototyp um. Das sind also Ihre Seitenebenen hier. Und wenn Sie auf eines dieser klicken , sind dies nur verschiedene Kunsttafeln, für die Sie Designarbeiten und Prototypenarbeiten erledigen können . Aber in diesem Fall haben wir einen Web-Prototyp und wir haben einen modalen mobilen Prototyp. Sie sich keine Sorgen um das Cover, das nur das Cover für die Figma-Datei abdeckt. Wir werden also nur im Web-Prototyp und im mobilen Prototyp sein. In diesem Video machen wir die Optionsfelder, das Menü in der Schublade und wir machen das Modal. Also machen wir diese drei und dann machen wir uns für das nächste Video. Aber schauen wir uns das Optionsfeld hier an. Was ich also tun werde, ist, dieses Kunstbrett oben links auszuwählen , wo Mac 13 steht. Ich gehe weiter und wähle das aus. Und du siehst oben rechts hier ich bin im Tab Design. Also irgendetwas mit Design zu tun? Wenn ich eine Form oder ein Symbol auswähle , kann ich hier alles ändern , basierend auf meiner Auswahl. Ich habe das Kunstbrett ausgewählt. Und was hier wirklich wichtig ist, ist, dass Sie hier zur Registerkarte Prototyp gehen und sehen, wo Design steht. Wir gehen hier drüben in den Prototyp. Du wirst sehen, dass das hier anfängt. Eine Sache, die ich mache, ist, dass ich die Leertaste auf meiner Tastatur und sie halte und klicke und ziehe. Und das ermöglicht es mir, den Artboard Raum zu bewegen. Wirklich einfach. Eine andere Sache, die ich mache, ist, dass ich Command Plus vergrößern und minus befehle, um herauszuzoomen. Und wenn Sie auf einem PC sind, ist das Control Plus und Control minus. Und dann ist das Letzte, wenn Sie z gedrückt halten und klicken und ziehen, erhalten Sie das Zoom-Werkzeug. Wenn Sie darauf klicken und ziehen, zoomt es hinein. Also zoome ich viel hinein und dann die Leertaste mit meinem Klick und ziehe , um es zu bewegen. Ich zoome wieder raus. Was hier wirklich wichtig ist, ist, dass ich dieses kleine blaue Rechteck mit dem Play-Button drauf habe. Das wird den Prototyp auf jedem Bildschirm starten auf dem sich dieser befindet, wird der erste Bildschirm dieses Prototyps sein. Wir werden dieses kleine Stern-Ding durch jeden dieser Abschnitte verschieben , damit wir den Prototyp bei jeder dieser Komponenten starten können den Prototyp bei jeder dieser Komponenten starten , die wir entwerfen werden. Bevor wir das tun, stellt das sicher, dass du hier wie ich aussiehst , wo ich den Mac 13 ausgewählt habe. Ich bin hier auf der Registerkarte „Prototyp“. Und ich konnte sehen, dass der Start hier im Optionsfeld Benutzerdefiniert ist. Und jetzt sehen Sie oben rechts den kleinen Play-Button. Gib dir eine Sekunde , um dorthin zu gehen. Dort steht „Gegenwart“. Das ist dein Prototyp. Lasst uns weitermachen und darauf klicken. Dies wird den Prototyp laden. Und wieder ist der erste Bildschirm, den wir hier sehen werden der Bildschirm, der das Rechteck auf der anderen Registerkarte starten muss . Du kannst auch sehen, dass es zwei Tabs gemacht hat, oder? Jetzt bin ich oben in einem neuen Tab namens Web-Prototyp. Und wenn ich zu meiner Designdatei zurückkehren möchte, gehe ich zurück zur Designdatei und bin hier. Wenn Sie bereits ein Profi bei Figma sind oder es vorher benutzt haben, dann ist dies alles Predigt an den Chor bei ERD sind wahrscheinlich Profi hier, aber das ist im Wesentlichen die Grundlagen der Verwendung von Figma und es wird mehr hier fortgeschritten, aber wir werden es ziemlich einfach halten um des Projekts willen. Was wir hier haben, ist das Optionsfeld und wir werden ganz einfach anfangen. Und wir werden ein bisschen komplexer werden, während wir gehen. Was wir hier machen, ist, dass wir hier nur unser benutzerdefiniertes Optionsfeld haben . Und wenn du zu weiblich gehst, siehst du den Schwebezustand. Und wenn ich darauf klicke, bekommst du den aktiven Status. Und wenn ich davon abklicke, bin ich wieder im Standardzustand. Wenn ich wieder mit der Maus darüber fahre, bekomme ich den Hover-Status. Klicken Sie erneut darauf. Ziemlich einfach. Lasst uns weitermachen und das ausbauen. Was wir hier tun müssen, ist auf der Registerkarte Prototyp, wo Sie dieses kleine blaue Rechteck hier sehen können . Sie möchten nicht auf der Registerkarte Design sein. Sie möchten hier auf der Registerkarte „ Prototyp“ sein. Und was Sie tun möchten, ist das kleine blaue Rechteck hier zu starten klicken und in die Datei zu ziehen, auf der Max 16 steht, die Kunsttafel hier sehen Sie ein Highlight, sehen Sie, wie blau hervorgehoben wird so. Das ist es, was du willst. Jetzt bewegen wir uns von dem Beispiel zu dem , das besagt, dass Sie es hier tun. In dieser Reihe werden wir das ausbauen. Okay, also das erste, was wir hier machen werden, ist, dass wir uns die Max 16 Art Board hier schnappen. Sie können sehen, ob ich in die Kunsttafel klicke, wähle ich Elemente dieser Kunsttafel aus. Aber wenn ich oben klicke oder der Name dieser Art Board maximal 16 ist. Ich habe diese Art Board selbst ausgewählt. Und wenn ich das umbenennen möchte, kann ich hier auf der linken Seite zu meinen Ebenen gehen. Sehen Sie, wo Matt 16 steht. Und ich nenne das, sagen wir Test. Klicken Sie auf „Zurück“. Und jetzt siehst du es hier testen. Nachdem wir das Kunstbrett ausgewählt haben, kopieren wir es einige Möglichkeiten, die Sie kopieren können. Sie können Befehl C oder Control Z, C, C wie in Kat ausführen. Wenn du auf einem PC bist, dann ist es Control. Wenn du auf einem Mac bist, ist es Befehl. Und dann kannst du ein Control oder Command V machen . Wenn du auf einem PC bist, ist es Control V, wie in Victor. Und wenn du auf einem Mac bist, ist es Kommando V hier. Und du siehst es hier drüben ersetzt. Das ist eine Möglichkeit zu kopieren und einzufügen. Eine, die ich gerne mache, ist die Halteoption, und ich werde sehen, wie meine Maus hier in eine Doppelmaus geht. Ich halte Option gerne gedrückt und klicke und ziehe es und kopiere es auch so. Okay, also wollen wir an dieser Stelle den Designstatus für den Hover aufbauen . Was ich tun werde, ist auf diese Art Board zu zoomen. Ich wähle einfach aus, ich bin eine Mischung. Ich bin im Entwurfsmodus. Du siehst, dass ich mich im Prototyp-Modus befinde. Also machen wir hier in einer Sekunde den Prototypmodus. Gehen wir zurück über den Entwurfsmodus. Diese Karte ist gruppiert. Was ich tun möchte, ist, dass ich dreifach in diese Karte klicken möchte. Eine andere Sache die ich tun könnte ist, dass ich mit der rechten Maustaste klicken kann Lass uns das machen. Was ist die Gruppierung vorerst aufheben? Ich bin gerade die Gruppierung aufheben. Jetzt kann ich die Texte auswählen, ich kann das Icon auswählen und diese kleine Rückkarte hier auswählen. Was wir also tun möchten, ist die Rückkarte auszuwählen. Ich bin hier im Design Tab. Ich gehe rüber zur Schlaganfall-Abteilung. Fügen Sie ein Plus hinzu, das wird einen Strich um diese Karte hinzufügen. Ich halte die Striche gern dick. Ich mag es in diesem Fall nicht nur einen Pixelstrich zu machen, lass es uns machen, als wäre 77 eine gute Zahl. Lasst uns weitermachen und diese Farbe hier ändern. Wenn Sie hier auf dem Strich zur Farbauswahl gehen, sehen Sie, dass Sie hier alle Farben für Sie bereit haben. Die ganze Farbbibliothek, alle Farben der Welt sind da. In den unten stehenden Dokumentfarben sehen Sie hier einige Farben, die in diesem Dokument bereits vorhanden sind . Du könntest das Rosa hier aufheben, indem einfach das Rosa fallen lässt. Du kannst auch einfach hierher gehen und dir am besten raten, was das Rosa ist oder wo hier Strich steht. Ich habe auch das Style-Set. Es gibt also ein bisschen wie Foursquare, vier Punkte hier in einem Quadrat. Wenn Sie darauf klicken , erhalten Sie Stile , die diesem Projekt zugeordnet sind. Eigentlich habe ich gelogen, ich habe die Stile nicht hier, also machen wir tatsächlich einen. Jetzt, da wir hier eine rosa Farbe haben, wähle ich das Icon schnell aus. Jetzt, da wir diese rosa Farbe haben, klicken Sie zurück in diese Stile und sehen Sie, wo es steht, und lassen Sie uns dies zu unserem rosa Kolloid machen, , süßer kleiner kleiner kleiner Pinky. Wenn wir nun wieder unseren Strich auswählen, können wir auf diesen kleinen Stil zurückklicken und ihn anschauen. Wir haben unsere rosa Farbe hier. Ein bisschen klein. Ich klicke weiter und klicke auf Pinky. Okay, cool. Wir haben den Hover-Status so ziemlich gemacht. Gehen wir jetzt rüber und machen wir den nächsten Zustand , der ungefähr so aussieht, wo er gefüllt ist. Wieder mache ich das Gleiche, was ich abdecken werde. Ich wähle dieses Testboard hier aus. Du kannst entweder ein Control C machen, wie bei Cat, wenn du auf einem PC bist oder wenn du auf einem Mac bist, ist es Command C. Ich gehe hier rechts. Und dann mache ich Control V wie in Victor oder Kommando V wie in Victor. Wenn du auf einem Mac bist und ich mein neues Kunstbrett habe, zoomt jemand heraus, dein Board sollte so aussehen. Wir haben den Standardstatus hier. Wir haben diesen Schwebezustand gemacht. Jetzt werden wir den aktiven Status erstellen in dem der Benutzer, wenn der Benutzer hier die weibliche Icon-Karte ausgewählt hat, mit der rosa Farbe gefüllt wird mit der rosa Farbe gefüllt , die wir gerade als Pinky bezeichnet haben. Du siehst, dass ich den Hintergrund jetzt ausgewählt habe. Es ist voller Weiß. Auch hier kann ich die Füllung öffnen und ich kann jede gewünschte Farbe verwenden. Oder ich gehe zurück zu dem Stil, den wir gerade kreiert haben. Und ich kann es mit Pink füllen. Und da gehst du. Füllt das Innere. Aber wie Aaron, wo ist die Ikone hin? Das ist hier. Es hat genau die gleiche Farbe wie Pinky. Okay, lass uns dieses Icon weiß machen. Was wir tun müssen, ist, wenn du auf Pinky klickst, es öffnet einfach die Stile hier. Vielleicht sehen Sie hier nicht diejenigen , die Sonnenblumenfarbe sagen. Vielleicht siehst du hier einfach die normalen Stile. Was wir tun müssen, ist, dass wir Pinky trennen müssen. Du siehst, wenn wir zu Pinky gehen und du siehst dieses kleine Bruchkettenglied-Symbol und es heißt „Stil abtrennen“, mach einfach weiter und entferne es. Das heißt, es wird nicht mehr klein sein und es wird eine Freiformfarbe sein , die wir wählen können. Lass uns das weiß machen. Machen wir weiter und während wir hier sind, fügen wir dies unserem Farbstil hinzu. Nachdem wir jetzt weiß ausgewählt haben, können Sie das kleine Plus drücken, oder tut mir leid, nicht das Plus P0. Eigentlich sehen wir es uns an. Wenn Sie das Plus drücken , passiert dies oft. Sie möchten zu Ihren Farbstilen wechseln, aber Sie drücken Plus und sehen, wie ich hier gerade eine weitere schwarze Farbe mit 20% Deckkraft hinzugefügt habe. Und am Ende haben wir zwei Farben. Sie können einfach weitere Farben hinzufügen. Wenn das passiert, drücken Sie einfach das Minus. Einfach so. Dann bist du wieder in deinem Weiß. Wenn Sie versehentlich Ihr Weiß gelöscht haben, gibt es keine Füllung. Diese Form hat keine Füllung, keinen Strich, nichts. Also möchten wir noch einmal eine andere Farbe hinzufügen. Wir fügen einfach eine Standardeinstellung zu Grau hinzu und klicken in die Nähe der Farbe. Mach das weiß. Okay, wir kochen mit Feuer. Jetzt möchten wir dies einfach wieder zu unserem Farbstil hinzufügen , nur um alles, was weiß ist, einfach zu machen alles, was weiß ist, einfach Wir können einfach den Farbstil auswählen und wir müssen nicht nach Weiß suchen. Nochmal, die vier Punkte hier, wo Stil steht, klicken Sie darauf. Jetzt, da wir in unseren Farbstilen sind, das kleine Plussymbol, um einen neuen Stil zu kreieren. Los geht's. Und wir nennen das einfach weiß. Und boom, wir haben Weiß als Farbstil bekommen. Lassen Sie uns auch den Text hier machen. Machen wir das auch weiß. Alles klar, cool. Wir haben unseren aktiven Status, den Status, in dem der Benutzer darauf klickt. Wir haben unseren Hover-Status und wir haben unseren Standardstatus. Lasst uns das zusammen prototisieren. Im Moment befinden wir uns also im Tab Design. Gehen wir zum Prototyp. Stellen Sie sicher, dass Sie den Anfang haben. Hier auf dem, der Test sagt, dass wir gerade gemacht haben. Ich wähle weiblich aus. C einfach so. Wenn ich im Prototyp-Modus bin, siehst du dieses kleine Plus immer in der Mitte des Objekts auf der rechten Seite. Wenn Sie es nicht sehen, befinden Sie sich möglicherweise im Entwurfs-Register-Modus, oder? Wenn Sie also nicht sehen, was ich sehe, gehen Sie oben rechts zur Registerkarte Prototyp. Klicken und ziehen Sie es jetzt einfach. Du wirst zuerst sehen, dass es auf mein Bild schnappen wird, wollte sagen, willst du dieses Bild und sag einfach nein, bewege es einfach weiter. Kein Bild. Und geh zum nächsten auf der rechten Seite. Sobald du es getan hast, siehst du das Blau auf dem nächsten Kunstbrett-Highlight. Das heißt, wir haben eine gute Auswahl. Und jetzt haben wir die Interaktionsdetails. Normalerweise haben Sie ein paar, während Sie drücken, müssen Sie beim Schweben deaktivieren. Und der Rest von ihnen, Tastatur, Maus, Enter, Maus. nicht mal Sorgen um irgendwas von diesen. Ich benutze sie nie. Ich benutze einfach onclick oder beim Schweben. Lass uns das machen, während wir schweben. Boom, du hast deinen ersten Prototyp. Was wir hier tun möchten, ist, dass Sie die Bildlaufposition beibehalten möchten. Wenn Sie eine lange Website haben und diese Kunsttafeln miteinander verknüpft haben, ist der Standardwert, wenn Sie hier einen Button am unteren Rand Ihrer Kunsttafel haben . Angenommen, Sie haben eine lange Kunsttafel und unten hast du einen Knopf. Und Sie möchten, dass die Schaltfläche Mauszeiger bewegt und Sie ihn auf die nächste Kunsttafel nähen , und Sie haben keine Bildlaufposition beibehalten, was heißt Speichern. Lassen Sie den Benutzer in derselben Position wie das Scrollen. Es wird wieder an den Anfang des nächsten Bildschirms gehen , unser Board. Und der Benutzer beim Scrollen zurück nach unten, um den Button dort zu sehen. Wenn Sie auf diese Schaltfläche tippen, bleibt die Bildlaufposition erhalten. Das bedeutet, dass Sie Elemente auf Ihrer gesamten Kunsttafel durchklicken können . Und genau das wird es erhalten, wo sich der Benutzer auf jeder dieser Kunsttafeln befindet , damit er nicht an die Spitze jedes einzelnen Kunsttafels springt . Lasst uns weitermachen und es nur um unseretwillen tun. Wir haben keine langen Kunsttafeln für dieses Beispiel, aber wir schalten das jetzt ein. Lass es einfach sofort. Cool. Herzlichen Glückwunsch, du hast deinen ersten Prototyp gemacht. Und was wir hier tun wollen, ist nur sicherzustellen, dass sich das Startrechteck hier auf der Kunsttafel befindet. Gehen Sie weiter und drücken Sie oben auf Play. Du wirst so etwas für mich sehen, das ich sehe. Wenn Sie den Mauszeiger über das weibliche Symbol bewegen, werden Sie sehen, dass diese Form passiert ist. Es gibt keinen Übergang. Es ist wie oft weiter, Lass uns einen Übergang hinzufügen. Ich klicke dort, wo es steht, während ich Mixture schwebe, ich bin im Prototyp-Modus. Und es wird die Interaktionsdetails eröffnen , wo Animation steht. Lasst uns einfach auflösen. Das bedeutet, dass es sich lockern wird. Lasst es uns tun, anstatt zu lockern, einfach hinein. Machen wir 800 Millisekunden. Dann mach weiter und schließe das und gehe jetzt zurück zu, du kannst die Wiedergabe drücken, um zu deinem Prototyp zurückzukehren, oder du kannst hier oben zu den oberen Registerkarten zurückkehren. Und Sie können sehen, wie das jetzt einen schönen sanften Übergang hat . Ja, das ist gut, das ist genau dort gut. In Ordnung, also lasst uns jetzt den Klicks Status machen, z. B. zurück zum Schwebeweg. Stellen Sie sicher, dass Sie sich im Prototyp-Modus befinden. Ziehen Sie einfach Ihren kleinen GUI-Arm des Prototyps auf das Click-Art-Board. Auch hier habe ich das vielleicht zu schnell gemacht, wie zum Beispiel mir folgen. Sehen Sie, wie ich den Mauszeiger in den aktiven Status genäht habe. Wir haben Onclick. Und lasst uns ein bisschen schneller machen. 300 Millisekunden gelöst. Es sollte in Ordnung sein. Oder Sie können sofort tun, spielt keine Rolle bei Standardauflösung. Es liegt an dir. Schließ das vorbei. Jetzt haben wir unseren Schweben. Wir haben unseren Klick. Das sieht gut aus. Jetzt schnappen wir uns den Staat. Ich zoome ein bisschen raus und stelle sicher, dass ich im Prototyp-Modus bin. Und ich werde es wieder zu dem machen, den wir gerade angefangen haben, dem Standardprototyp. Kunstausschuss. Und Klicks aufzulösen sollte in Ordnung sein. Und ich gehe zurück zu unserem Prototyp. Klicke auf weiblich und bewege deine Maus nach unten. Diese Standardeinstellung, wir haben den Hover bekommen, du hast den Klick bekommen. Sie müssen abklicken, wenn Maus heruntergefahren ist oder Sie sich wieder im Hover-Status befinden. Und du kannst sehen , dass die Arbeit da drin funktioniert. Großartig. Hoffentlich war das wirklich einfach für dich. Und gehen wir weiter zum Menü und zur Schublade. Ich werde ein neues Video machen, das etwas länger gedauert hat als erwartet. Aber ja, ich mache ein neues Video und wir springen rüber und sehen uns das Menü und die Schublade an. Wir sehen uns dort. Tschüss. 26. Erstelle das Web – Menu: Alles klar, willkommen zurück. Bevor wir zu den Menü- und Schubladendesigns übergehen, denken Sie daran, die Registerkarte „Prototyp“ zurückzukehren , nicht auf die Registerkarte Design, sondern die Registerkarte „Prototyp“ oben rechts. Und schnappen Sie sich den Anfang , der den Prototyp auf jedem Bildschirm startet , auf dem sich dieser befindet. Dies wird der erste Bildschirm und der Prototyp sein. Zoomen Sie ein wenig heraus, klicken und ziehen Sie diesen Start und ziehen Sie ihn auf die Mac Nine-Kunsttafel, wo Menü und Schublade zum Beispiel steht , nicht das, das Sie tun werden, nur das Beispiel denn was es so schnell anschauen wird. Okay, also wähle hier einfach das Mac Nine Art Board aus. Drücken Sie Abspielen. Und das werden wir aufbauen. Die Speisekarte und die Schublade. Ziemlich glatt. Es ist ziemlich einfach. Gehen wir noch einmal zu unserer Projektdatei zurück, ich befinde mich oben im Registerfenster Prototyp. Was ich tun möchte, ist wieder dorthin zu gehen, wo es heißt die Entwurfs-Schlagmuster-Projektdatei oben links. Nimm den Anfang, das Rechteck und bewege es nach unten zu deinem Do Abschnitt. Okay, also haben wir die Art Board schon für dieses Design hier geschaffen. Jetzt müssen wir nur noch das Kunstbrett für das Menü erstellen. Bei Figma hat ein Kunstbrett-Werkzeug und es sieht aus wie das kleine Zuschneidewerkzeug oben links. Machen Sie weiter und klicken Sie darauf. Standardmäßig erhalten Sie eine ganze Reihe von Kunsttafeln- und Rahmengrößen für verschiedene iPhone-Bildschirme, Tablet-Bildschirme, Desktops, Präsentationen , Uhren, soziale Medien und alle Arten von Dingen. Sie können auch einfach klicken und ziehen und einen benutzerdefinierten erstellen. Lassen Sie uns klicken und ziehen und erstellen eine benutzerdefinierte und erstellen Sie die Form, die ich hier erstelle , wie ein wirklich langes vertikales Rechteck. Wir können es hier etwas größer machen als das Kunstbrett auf der linken Seite. Wenn du siehst, halte ich es hoch. Zieh das nicht so in die andere Art Board. Sie können Kunsttafeln in Kunsttafeln machen, was etwas schwierig wird. Vorerst. Behalte es einfach nach rechts. Ziemlich einfach. Gehen wir weiter und gehen zurück zu unserer Registerkarte „Design“. Und geben wir dem eine Hintergrundfarbe. Wenn ich also die Kunsttafel auswähle, auf der 596 steht, benennen wir dies in der Benennung der Namensebenen um. Nennen wir das das Menü. Nennen wir diese Schublade. Machen Sie es ein wenig einfacher , dies zu besprechen. Sie können also sehen, wenn ich die Schublade auswähle, es gibt nichts, es gibt keine Designmuster in diesem oder in irgendwelchen Designelementen auf der Design-Registerkarte hier. Sobald ich ausgewählt habe, habe ich das Kunstbrett ausgewählt , weil es hier nichts anderes als eine Art Board gibt. Die Kunsttafel wird eine Standardfüllfarbe als Weiß haben . Lass uns in die Füllfarbe gehen. Funktioniert solide. Lass uns einen Farbverlauf machen. Du wirst sehen, wo es „linear“ steht. Das ist ein linearer Farbverlauf oder das Gleiche bedeutet nur einen zweifarbigen Übergang. Lasst uns linear machen. Es beginnt normalerweise mit Weiß und Weiß. Das Weiß auf der linken Seite ist jedoch 100% Deckkraft. Das Weiß auf der rechten Seite ist 0% Deckkraft. Und Sie können sehen, dass es hier einen kleinen Schieberegler für die Deckkraft und einen Prozentsatz der Deckkraft gibt. Sie sehen also 100%, wenn Sie die Farbe auf der linken Seite ausgewählt haben, und rechts sehen Sie 0%. Was wir tun wollen, ist, die Farbe dort drin zu machen, richtig, auch eine 100% ige Deckkraft. Schnappen wir uns die Farbe links. Jetzt. Lass es uns auf einer Seite rosa machen. Und machen wir es auf der Unterseite etwas violetter. Ja, das sollte es dort ziemlich cool sein. Auch hier kannst du diese kontrollieren. Ich kann überklicken und die Farbverläufe erstellen. Jetzt ist das alles vertikal, aber ich kann sie horizontal machen. Ich kann so etwas abgewinkelter machen. Sie können eine Farbe nach unten oder nach oben drücken. Du kannst damit alleine spielen, aber wir halten es einfach ziemlich einfach, vorerst auf und ab. Mach weiter und schließe das. Ich habe die Elemente hier neben dieser Schublade bereits hinzugefügt , dass wir im obigen Beispiel hier sind. Gehen Sie fort und wählen Sie einfach alle aus und ziehen Sie sie einfach in Ihre Schublade. Ziemlich einfach. Wenn du es nicht tust. Eine Möglichkeit, dies zu testen, ziehen Sie manchmal Elemente in eine Kunsttafel. Du gehst zu deinem Prototyp und du wirst ihn nicht sehen. Und eine Möglichkeit, sicherzustellen, dass es in die Kunsttafel gelangt ist, besteht darin, auszuwählen , wo die Schublade steht. Wählen Sie also die eigentliche Kunsttafel aus und verschieben Sie es. Manchmal siehst du hier, wo das aussehen wird. Es ist oben auf der Art Board. Und dann gehst du es weg. Der Inhalt bleibt, oder? Was Sie also tun möchten, ist sicherzustellen, dass dies in der Kunsttafel selbst ist. Eine andere Möglichkeit, dies zu tun, besteht darin alle Elemente hier auszuwählen. Drücken Sie Command C, gehen Sie zu Ihrer Kunsttafel und drücken Sie Befehl V, und es wird in diese Kunsttafel eingefügt. Jetzt kann ich sicherstellen, dass es da ist. Jetzt, da wir unsere Kunsttafel haben, bewegen wir es etwas näher an den Bildschirm auf der linken Seite. Was wir tun möchten, ist, dass wir das Menü auswählen möchten. Ich habe es bereits für dich gruppiert. Gehen Sie einfach weiter und wählen Sie das Menü aus. Gehe hier in unseren Prototyp-Modus. Klicken Sie auf den GUI-Arm und ziehen Sie ihn in die Schublade. Hier wird ein kleiner geliebter Mensch tief , wenn wir es auf Klick haben. Verschieben wir es von Navigieren zu, um Overlay zu zu öffnen. Das mache ich noch einmal. Wir hatten also einen Onclick als Aktion und Funktion, anstatt zu einer anderen Schublade zu navigieren, möchten wir, dass diese Schublade geöffnet und verwendet und als Overlay geöffnet wird. Öffnen Sie das Overlay. Und Sie erhalten eine ganz neue Reihe von Interaktionsdetails basierend auf dem Overlay. Normalerweise ist der Standardwert zentriert. Und das machen wir in einer Sekunde hier. Das nächste Video für das Modal. Was wir hier wollen, ist nicht zentriert. Wir möchten oben links Ihnen auch hier die gängigsten Symbole geben, die Sie oben, links und unten zentriert auswählen können. Fahren Sie fort und klicken Sie auf Schließen , wenn Sie nach draußen klicken. Und füge Hintergrund hinter Overlay hinzu. Und lasst uns hier 70% Deckkraft machen. Was das tun wird, ist dir einen Hintergrund zu geben. Dann wirst du sehen, was die Animation gerade schläft , wir werden dies in einer Sekunde ändern. Sie haben sich wahrscheinlich aufgelöst oder vielleicht sogar im Zustand hier. Aber lass uns einfach gehen, lass es uns vorerst als Vorfall ausdrücken. Und dann werden wir noch etwas Spaß haben. Schon wieder. Wir haben OnClick, Overlay öffnen, oben links schließen, wenn Sie nach draußen klicken, Hintergrund hinter überlagert hinzufügen, wir haben hier eine schwarze Farbe. Sie können die Farbe des Hintergrunds ändern, aber sofort Schwarz und 70% Deckkraft Animation durchführen. Mach weiter und schließe das. Lass uns gehen drücken Play oben rechts sind vorhanden. Das bringt uns zum Prototyp und beobachten, was passiert. Sie können sehen, dass es das Overlay geöffnet hat. Dies ist das 70% Schwarz. Wir haben die Speisekarte hier, aber du kommst gerade nicht raus . Es gibt keine Möglichkeit raus zu kommen. Lassen Sie uns also den X-Button schließen und bringen Sie zurück zu dieser Seite. also unter der Schublade, die sich noch im Prototyp-Modus befindet, und wählen Sie das x aus und ziehen Sie dieses einfach zurück auf das Baba t Art Board und führen Sie OnClick navigieren zu. Instant sollte perfekt sein. Mach weiter und schließe das. Jetzt gehen wir zurück und wir können erneut auf Play drücken. Geh zurück über das Menü. Und jetzt, wenn wir auf X klicken, sehen Sie es hier. Du wirst sehen, wenn ich, als ich das Kunstbrett auswählte und Play drücke, es gerade die Kunsttafel hier geladen habe. In Ordnung, also wird der Prototyp auch basierend auf jedem von Ihnen ausgewählten Kunsttafeln geladen . Was ich getan habe, ist, dass ich zurückgepfeilt habe oder du kommst hierher zurück, geh zurück zu Imax 17, drücke auf Play oben rechts. Es gibt dein Menü Schließen und das sieht gut aus, aber es hat keinen Übergang und es hat irgendeine Coolness. Lass uns ein paar coole Dinge hinzufügen. An dieser Stelle wollen wir also sicherstellen, dass wir uns im Prototypmodus befinden. Schnappen Sie sich hier unseren Menü-Prototyp, öffnen Sie die Interaktionsdetails. Was wir als Animation von Augenblick an ändern wollen, wollen wir, dass sie einzieht. Wenn es einzieht, können Sie definieren , aus welcher Richtung es sich bewegen wird . Und das macht irgendwie Spaß. Sie können entweder von oben einziehen, sich von unten bewegen, von links einziehen oder von rechts einziehen. Du kannst dich damit herumspielen. Wir werden mehr Optionen haben, wenn wir zu den mobilen Prototypen kommen , um zu zeigen, wie diese verschiedenen Einzugsrichtungen und die über die Menüschublade bilden. Aber in unserem Fall möchten wir, dass es von links einzieht und sich nach rechts bewegt, also wollen wir, und es gibt Ihnen hier eine kleine Vorschau. Wir wollen, dass es sich richtig bewegt. Es wird von links hereinkommen und von rechts einsteigen. Und mach dir keine Sorgen um die Leichtigkeit oder irgendetwas, was dort gut sein sollte. Also lasst uns weitermachen und das schließen. Und jetzt gehen wir zurück zu unserem Prototyp hier. Drücken Sie das Menü und schauen Sie sich diese Rutsche an. Du siehst, wie das reingeschlitzt ist. Wir haben noch nichts vom x angewendet. Aber es ist eingezogen. Und es verhielt sich wie ein nettes Übergangsmenü. Aber boom, sie kühlen Thich Nhat von Soundeffekten, aber selten. Lasst uns das schließen. Jetzt schnappen wir uns das x hier und schnappen uns den Prototyp. Und auf der Animation Add wollen wir nicht einziehen. Wir wollen, dass es auszieht. Wir wollen die entgegengesetzte Richtung, oder? Also haben wir das Menü definiert, von links hereinkommt und nach rechts geht. Und wir wollen, dass es von rechts nach links ausgeht. Und Sie können sehen, dass es bereits nach links standardmäßig eingestellt ist. Das ist der, den wir wollen. Schließen wir es. Geh zurück zu unserem Prototyp hier. Gehen Sie von links ein, gehen Sie raus, sehen Sie, wie das funktioniert hat. Manchmal, was passieren wird, ist, dass Sie mit dem X. Sie werden am Ende keinen Auszug haben, sondern einen Einzug. Und sieh dir den Unterschied hier an. Schließen Sie das x. War ein bisschen wackelig. Sieh mal, wie es irgendwie nicht schlecht ist. Aber du wirst bemerken, dass es sich nicht an einem Ort bewegt, an dem sich einzieht und verschwindet. Beachten Sie nur, dass es etwas wackelig aussieht, wenn Sie es sich ansehen . Wir sprechen hier über den Schubladenprototyp. Wenn etwas eingezogen ist und die Schublade gezeigt hat und Sie und Sie die Schublade schließen sollten immer bei Adam sein, ziehen Sie heraus und wählen Sie sie dann wieder aus, um auszuziehen. Und jetzt sehen Sie, wie sich die Stream-Linie auszieht. Es ist subtil aber wichtig. Okay, Cool. Das schließt das Menü und die Schublade ein. Ich mache noch ein Video nur um diese kurz zu halten, süß. Und wir gehen zu Modals. Wir sehen uns auf dem anderen Video. Tschüss. 27. Erstelle – Web – Modale und Modals: Alles klar, Willkommen zurück. Hoffe du wirst ziemlich gut und vertraut mit Figma. Schauen wir uns Modale an. Ich zoome ein wenig heraus, befehle einfach minus oder Control minus, wenn du auf einem PC bist. Denk dran, geh zurück. Wenn Sie dieses kleine Rechteck mit der Aufschrift „start“ nicht sehen, beginnen Sie möglicherweise mit dem Entwurf der Registerkarte. Klicken Sie also oben rechts auf die Registerkarte Prototyp. Schnappen Sie sich dieses Rechteck und ziehen Sie es den modalen Bereich , wo wir Mac zehn haben , da der iMac zehn die Ebene ist. Lass uns weitermachen und ich halte z. also halte ich z gedrückt und klicke und ziehe mit meiner Lupe. Und ich lasse los und es wird hineinzoomen. Und du wirst ziemlich gut darin, wo du bist, ich bin auf einem Mac, erinnere dich daran, dass ich Command, Command Minus Command Plus Command Plus mache , und dann halte ich z und ziehe nicht ein. Und dann halte ich die Leertaste mit meiner Hand, um mich zu bewegen, also dauert es eine Weile, aber das wird für dich sehr intuitiv, wenn es noch nicht so ist. Also nochmal haben wir das Start-Prototyp-Rechteck auf der rechten Seite, auf dem Beispiel steht. Dadurch wird der Prototyp erneut in diesen Abschnitt geladen. Dies wird also der Bildschirm sein, der zuerst beginnt. Gehen Sie also weiter und gehen Sie zurück zu Ihrem Prototyp-Tab oder oben klicken Sie hier auf die Schaltfläche „Präsentieren“ und befinden sich nun auf dem modalen Prototyp. Und wenn Sie auf Modal klicken, öffnet es ein Modal. Wenn Sie das X drücken, wird das geschlossen. Super einfach. Das wird Spaß machen, es wird schnell gehen. Du wirst wahrscheinlich schon richtig gut darin. Ich bekomme die Idee. Ich hoffe. Lasst uns den Anfang schnappen. Überführen wir es zu diesem Abschnitt, der besagt, dass Sie es tun. Du siehst, dass ich hier schon die Elemente für dich hatte. Ich habe das High und das X hier. Was wir zuerst machen wollen, ist, dass wir hier zu unserem Frame-Tool zurückkehren wollen. Und wir möchten klicken und ziehen und dann einfach ein Quadrat oder ein Rechteck erstellen. Das ist wirklich eine Rolle der Größe, solange die Größe nicht so groß ist wie die Kunsttafel hier links, rechts, also wollen wir hier nur eine anständige Größe. Es ist nicht einmal der Tab-Modus „ Prototyp“. Was ich tun möchte, ist in den Entwurfs-Tab-Modus zu kommen. Ich ziehe das Hoch hier in diesen Rahmen. Und ich ziehe das x auch hier hinein. Mein Name Frame 936 hier, ich nenne diesen Modal, nur damit es einfach ist, darüber zu sprechen und zu sprechen. Jetzt wähle ich das Modal und verschiebe es. Wenn du es rüberziehst und das High nicht umgezogen ist, war es, als hättest du nicht das High hier in der Kunsttafel gehabt. Also klicke und ziehe es. Warte, bis es blau hervorhebt. Dann hast du es drin. Wir haben alle Teile, die wir brauchen. Es wird ziemlich einfach sein. Geh einfach weiter und ich zoome ein bisschen hinein. Wählen Sie die Modalschaltfläche aus. Gehe in unseren Prototyp-Modus. Drag, geh nicht, geh nicht zu diesem Foto. Wir wollen zum Modal übergehen. Wird blau DUE auf das Modal umrüsten. Wir haben hier Standardwerte von der letzten Animation , die wir gerade gemacht haben. Wir wollen also onclick, aber anstatt zu navigieren, wollen wir ein offenes Overlay. Schon wieder. Onclick ist gut. Und anstatt zu navigieren, wollen wir ein offenes Overlay. Sieh dir standardmäßig auf Mitte an. Genau das wollen wir. Wir möchten schließen, wenn wir nach draußen klicken. Und wir möchten das Hintergrund-Overlay hinzufügen und machen hier immer noch 70 an sich. Wir brauchen hier keinen Übergang, lass es uns stattdessen einfach behalten. Okay, jetzt lass uns runter gehen. Es sollte das Modal öffnen. Wählen wir das X aus und schließen es uns. Wenn Sie das X hier rüber ziehen, können Sie onClick ausführen, zu navigieren und keinen Auszug oder irgendetwas machen, sondern stattdessen einfach tun. In der Statusanimation ist das Beibehalten der Bildlaufposition großartig. Schließ das. Wählen wir die iMac 18-Ebene aus. Drücken Sie auf Geschenk. Denken Sie daran, dass Ihr Start in Ihrer Nähe ist. Drücke das Modal und da ist dein Overlay, dein kleines Modal. Drücken Sie das X und Sie haben es geschlossen. Lassen Sie uns einen kleinen Übergang hinzufügen. Lassen Sie uns fortfahren und den Prototyp der Modalschaltfläche auswählen den Prototyp der Modalschaltfläche , der die Schaltfläche mit dem Modal verbindet. Und wo wir Animation haben, lösen wir uns auf. Und 300 Millisekunden sind großartig. Schließ das. Wir machen das Gleiche mit dem x hier. weiter und klicken Sie auf das X. Wenn Sie auf das X klicken und die Übergangsdetails nicht sehen können . Als ob du losgehst und geklickt hast und wie, Hey, ich kann diese Interaktionsdetails nicht bekommen. Sie können oben klicken, wo Interaktion steht, und einfach dort klicken und diese werden ebenfalls geöffnet. Oder du klickst auf den kleinen GUI-Arm. Und das wird es auch öffnen. Mach weiter und lass es auflösen. 300 Millisekunden sind perfekt. Jetzt werden Sie sehen, wie sich der Übergang ein wenig auflöst. Schliessen auflösen. Okay, cool. Lasst uns zwei in einem Video packen. Lass uns zu Akkordeons gehen. Ich ziehe das Get unter, gehe zurück und nicht in der Registerkarte Design, sondern im Prototyp Tab-Modus. Ich hole den Anfang setze ihn an das Beispiel des Akkordeons. Wählen Sie iMac 11 aus. Drücken Sie Abspielen. Du solltest wie dieses Akkordeon aussehen. Ich wollte dich nur wissen lassen, dass du großartig bist. Wir lieben dich, ich und meine Freundin oder meinen Hund und meine Freunde. Und fröhliches Entwerfen. Lass uns gehen und klicke auf dein Großartiges. Und du siehst, wie das Akkordeon den schönen Übergang betrachtet . Es hat sich nicht ausgefüllt. Ich fühlte mich nicht wie ein sehr großer Sprung. Es war ein netter Übergang. Wir sahen, wie die kleine Karotte oder der Pfeil auf 180 Grad ging. Es ist umgedreht. Wir haben gesehen, dass der aktive Zustand jetzt für deinen Ehrfürchtigen, zu Pink geht. Und es zeigte diese Informationen auf untergeordneter Ebene. Und wir haben das High gesehen. Okay, großartig, lass uns zurückgehen. Gehen wir zurück in den Prototyp-Modus. Lasst uns das hier anfangen. Ziehen Sie das dorthin , wo iMac 19 steht. Und der, der sagt, dass du es tust. Ich habe hier eine der Akkordeon-Schlagzeilen erstellt, also gehe ich in den Tab-Modus. Das erste, was ich tun werde, wenn du aufpasst, ist, dass ich Akkordeon falsch buchstabiert habe? Ich weiß nicht, ob du das erwischt hast. Was wir also tun werden, ist, dass wir das Textwerkzeug lernen werden. Also kann ich hier in das Textwerkzeug gehen. Und ich kann das entsprechend mit dem Textwerkzeug auswählen. Und ich kann das A machen. Ich kann Escape auf meiner Tastatur drücken, um mich aus dem Textwerkzeug herauszuholen . Oder ich klicke einfach so dreifach in dieses Akkordeonfeld und ändere es und halte die Verschiebung, weil es Kapital ist. Und ich kann das in Akkordeon umwandeln. Du kannst sehen, dass ich habe, du kannst dein tolles auswählen. Sie können die, die Karotte oder den Pfeil und den Hintergrund auswählen . Was wir tun wollen, ist, dass wir all diese auswählen und sie gruppieren möchten. Du hast also dein Großartiges. Ich werde die Schicht halten. Ich wähle die Karotte hier aus. Und ich halte die Umschalttaste gedrückt und wähle den Hintergrund aus. Und ich kann entweder G auf einem Mac kommandieren oder G steuern, wie in Greg. Oder ich könnte mit der rechten Maustaste klicken. Und ich kann diesen Abschnitt C gruppieren, wo Gruppe steht. Jetzt wird dies eine Gruppierung sein. Wenn ich einmal darauf klicke und es verschiebe, bedeutet es das. Es ist gruppiert. Und wenn ich verschiedene Bereiche auswählen möchte, kann ich dreifach klicken. Und jetzt komme ich in die Gruppierung und klicke dann aus oder drücke Escape. Und es wird dich aus dieser Gruppierung herausbringen. Okay, also kopiere ich das, ich halte Option wieder, ich bin auf dem Mac. Wenn Sie auf einer PC-Option sind, beim Klicken und Ziehen die Umschalttaste gedrückt, ich beim Klicken und Ziehen die Umschalttaste gedrückt, während ich es tue. Wenn ich Shift nicht halte, verstehe ich das. Ich kann das bewegen. Wenn ich die Schicht halte, kann ich es. Es hält mich auf das Objekt ausgerichtet, das ich kopiere. Ich lasse hier los. Mein Vergrößern nur ein bisschen. Und ich gehe zur Pfeiltastatur. Der zweite Header ist nur ein bisschen hoch, nur so gibt es einen kleinen Unterschied zwischen dem oberen und dem unteren. Der Name meines Hundes ist chewy. Sag Chewy liebt dich. Du kannst schreiben, was du willst. Auch hier ist das deine Welt. kannst du nicht tun, stimmt. Du kannst den Namen deines Hundes machen. Ich mache das Gleiche. Ich halte Option. Ich klicke und ziehe nach unten. Ich halte die Schicht fest, oder? Also halte ich Shift fest. Also keine Verschiebung, Shift. Ich kann mich nicht wirklich bewegen. Geh wieder runter. Schon wieder. Ich gehe mit dem Pfeil auf der Tastatur. Perfekt. Sagen wir, wir fügen das hinzu. Liebt Essen. Oh, sie liebt Essen. Okay, jetzt haben wir unsere drei Kategorien unseres Akkordeons. Was ich tun werde, ist, dass ich dir die Chewy liebt schnappen werde. Ich halte Shift fest, schnapp mir das Chewy Loves Essen. Diese beiden, ich werde die gruppieren. Ich mache ein Command G oder Control G wenn du am PC bist. Ich werde es tun, ich zeige Ihnen, wie Sie mit der rechten Maustaste auf den Abschnitt Gruppen klicken können. Was wir jetzt tun werden, werde ich das High hier rüber bewegen. Wir werden diese Kunsttafel kopieren, ihnen die Halteoption besorgen und sehen, wenn ich die Umschalttaste halte, kann ich das Gleiche mit der Kunsttafel machen. Keine Verschiebung, Shift hält es inline. Ich werde es hier rüberbringen. Mit meinem High Over. Geh zurück zu dem neuen , das wir gerade ausgewählt haben. Die, die wir gruppiert haben. Chewy liebt dich, kauen liebt Essen. Ich werde das nach unten bewegen. Ich nehme dein Großartiges. Ich schnapp mir das und gruppiere es auch. Jetzt werde ich die Gruppierung aufheben. Ich klicke mit der rechten Maustaste. Und die Gruppierung aufheben. Jetzt sollte ich in der Lage sein, den Text und den Pfeil auszuwählen. Löschen Sie den Pfeil, löschen Sie den Text. Und ich strecke mich, wähle das Hintergrundelement aus, strecke es nach unten, wo es heißt, Chewy liebt dich. Ich verschiebe es ein bisschen nach oben, nur um ein wenig Platz zwischen den beiden zu haben . Jetzt sieht es gut aus. Ich gehe zu Command Minus raus. Jetzt wähle ich meinen Triple-Click aus. Ja, ja, ja, ja. Ja. Ich klicke Triple-Click Drivel Glick, Drew Buch Legging. Ich bin ein Dreifachklick, um nur das Rechteck zu greifen , in dem es heißt, dass Du großartig bist. Und ich gehe zu unseren Styles, werde den kleinen kleinen Kleinen hier drüben machen. Perfekt. Ich hole mir die SMS. Du bist großartig. Wenn du es nicht bekommst, bist du auf Gruppenebene. Triple-Click, doppelklicken Sie auf Zimmer von Like, okay, jetzt sind Sie in Ihrem fantastischen. Wir gehen hier zu meinen Styles. Wir wählen die weiße Farbe aus. Auch hier gehe ich mit Dreifachklick, Dreifachklick, Dreifachklick. Sie können diese auch in der Ebenenpalette links hier auswählen . Aber ich wähle den Pfeil aus. Und das werden wir auch weiß machen. Was wir dann mit diesem Pfeil machen werden ist, dass wir ihn drehen werden. Wenn ich also mit der Maus in die Ecke des Pfeils bewege, musst du dafür hineinzoomen. Wenn Sie zu weit verkleinert sind, werden Sie nicht sehen, dass sich Ihre Maus ändert. Du musst gehen wie richtig hereingezoomt. Und wenn Sie mit der Maus auf beliebige Ecke eines Elements oder Objekts bewegen, können Sie es drehen, indem Sie klicken und ziehen. Und deshalb wollen wir es um 180 Grad drehen. Sieht gut aus. Lass uns das Wort High School trüben, lege es hier rein. Und jetzt haben wir das offene Akkordeon. Schon wieder. Schnappen Sie sich hier iMac, 22-Jahres-Layer. Bewegen Sie es einfach, um sicherzustellen, dass das High dort ist. Manchmal wirst du sehen, dass das High so aussieht, als wäre es oben auf deiner Kunsttafel. Es wird so aussehen. Sieh aus, als wäre es da. Du wirst dir den Prototyp ansehen und du würdest sagen Warum ist das High nicht da? Ich kann es auf meinem Design sehen, aber ich kann es nicht auf dem Prototyp sehen, der dich verrückt macht. Aber verschiebe einfach das Kunstbrett , um sicherzustellen , dass es da drin ist. Und wenn sie sich nicht an der Zeichenfläche bewegen und du es nicht auf dem Prototyp siehst. Ich gehe weiter und Kommando C. Das wähle mein Kunstbrett Command V oder Control V. Wenn du auf einem PC bist, sehen wir gut aus. Lass uns zurückgehen. Kommen wir in unseren Prototyp-Modus. Klicken Sie hier oben rechts und stellen Sie sicher, dass wir das Startrechteck neben dem Rechteck haben , das Sie tun. Klick, du bist großartig. Und ziehen Sie das auf iMac 22 Art Board. Onclick. Was ist für die Animation fällig? Mach einfach sofort. Wir haben einen Klick bekommen, navigieren zu einem Augenblick. Schnappen wir uns den aktiven auf der rechten Seite. Ziehen wir es auf diese Kunsttafel. Dasselbe, onclick, navigieren Sie zu Instant. Das sollte sich öffnen und schließen. Es wird hier in einer Sekunde einige coole Effekte hinzufügen. Schauen wir uns einfach den Prototyp an. Ich gehe nach oben rechts. Ich muss dein Großartiges präsentieren, mach das auf. Und dann klicke erneut darauf, einschränken, schließen. Aber es gibt keinen Übergangsfehler und es passieren keine coolen Dinge. Ich will meine Produkte, ich wäre cool. Wir werden es hinzufügen. Warte mal, halt einfach deine Pferde fest. Wir werden es cool machen. 1 Sekunde. Gehen wir zurück zu unserem Design und lassen Sie es uns cool machen. Wir werden es tun, dass wir zu deinem Ehrfürchtigen gehen werden. Ich wähle den Prototyp hier auf Animation aus. Wir werden smart animate machen. Das wird es cool machen. Sie sich keine Sorgen über die Leichtigkeit oder die Zeitdauer. Mach das Gleiche mit deinem Großarmen. Fahren Sie fort und wählen Sie hier die Prototyp-Linie aus. Gehe zu smart animate. Mal sehen, ob hier alles geklappt hat. Klicke drauf. Es sieht aus wie ein echtes Akkordeon. Das ist so großartig. Ist das Entwerfen nicht cool? Wow, das ist wie Bob Ross in der Zukunft. Das ist die nächste Stufe, Bob Ross irgendwie Sachen hier. Ich sehe einfach hier und klicke einfach tagelang darauf. Weißt du was, ich klicke nur eine Weile darauf. Hoffentlich sieht deins so aus. Smart Animate wird ziemlich verrückt , wenn Sie diese Funktion ausführen. Es gibt einen Grund, warum ich deine Gruppe hatte. Der Chewy liebt dich. Und der Chewy liebt Essen. Und stellen Sie auch sicher, dass es hier gruppiert ist. Ist das manchmal sehe ich, ob ich das reproduzieren kann. Folgt mir nicht. Ich werde es dir nur zeigen, dass ich die Gruppierung aufheben werde. Ich habe diese Abschnitte hier, in denen Shu steht: Er liebt dich, kaut, liebt Essen und all das Zeug. Ich habe es auf dieser Art Board nicht gruppiert und ich habe es hier gruppiert. Manchmal wird es das nicht so glatt machen. War immer noch okay. Sie können sehen, dass es eine kleine Verzögerung gibt , obwohl es nicht dass das Schnappen so war, wie es bei der Gruppierung der Fall war. Ich gehe zurück und mache das schnell rückgängig. Okay, also sind wir wieder da, wo gruppiert alles gut war. Geh noch einmal hier rüber. Stellen Sie sicher, dass dies gruppiert ist. Sehen Sie sich das an, sehen Sie, wie Sie diesen schönen reibungslosen Übergang bekommen. liegt daran, dass dies beide gruppierte Elemente sind , die dieselben Elemente auf der Kunsttafel haben. Wenn Sie die Smart Animate-Funktion verwenden, stellen Sie sicher, dass alles, was Sie nicht animieren möchten, gruppiert ist , und stellen Sie sicher, dass die Gruppierung auf jeder dieser Seiten gleich ist. also auf jeder dieser Prototyp-Seiten sicher, dass diese Gruppierungen identisch sind. Es ist, es ist eine unsichtbare Sache, die sich in Figma befindet. Aber es kann dich manchmal verrückt machen, warum dein Übergang nicht so glatt und glatt aussieht. Und das liegt normalerweise an den Gruppierungen. Wenn Sie dieses Problem haben , gruppieren Sie einfach Elemente und arbeiten Sie dann zwischen diesen beiden Seiten hin und her und stellen Sie sicher, dass dieselben Elemente gruppiert sind und es irgendwann dazu kommen sollte punkt. Schau nur noch einmal, schau, wie glatt das ist. Jetzt heben wir die Gruppierung all dieses Zeugs hier auf. Jetzt sieh zu. Du hattest diese bissige Gattung nicht so gut. Das liegt daran, dass es nicht gruppiert ist. Alles klar, das schließt Akkordeons ein. sehen uns in der nächsten Klasse, in dem wir über unser nächstes Video sprechen werden. Wir werden über die Kontoerstellung und die Inline-Validierung sprechen , die wir in einer der Vergangenheit gelernt haben. Wir haben im Formulargespräch, das wir geführt haben, von der Inline-Validierung erfahren . Wir sehen uns bald dort. Tschüss. 28. Erstelle -Web – Kontoerstellung + Inline-Validierung: Okay, cool. Gehen wir also weiter und gehen wir von den Akkordeons über und gehen wir zur Kontoerstellung und Inline-Validierung über . Auch hier werde ich sicherstellen, dass ich auf der Registerkarte „Prototyp“ bin, damit ich dieses kleine blaue Rechteck sehen kann. Wenn nicht, befinden Sie sich wahrscheinlich auf der Registerkarte Design oben hier. Geh rüber zum Prototyp. Fangen Sie an, fahren Sie fort und bewegen Sie das runter zu iMac One. Jetzt sind wir im Beispiel. Und lasst uns weitermachen und oben rechts auf Play drücken , um den Prototyp zu zeigen. Wir gehen hier in den Prototyp ein. Was wir tun werden, ist, dass wir einen Bildschirm zur Kontoerstellung anzeigen , in dem wir unsere E-Mail und unser Passwort haben. Und wenn Sie einmal auf das Passwort klicken, haben wir eine Inline-Validierung, die zeigt , dass die Passwortanforderungen mit Ausnahme einer erfüllt werden. Und wenn Sie erneut klicken, wir an, dass Sie die letzte Nummer zwei, Ihr Passwort, hinzugefügt haben. Alle Ihre Passwortanforderungen sind erfüllt. Du drückst „Erstellen“. Und wir haben einen kleinen Spinner im Button, um dein Konto zu erstellen. Und irgendwann würde dich das auf die Homepage der Bobo me Seite bringen. Und Sie können innerhalb von zehn Minuten leckeres gutes Bobo T bei Lieferung bestellen . Okay, Cool. Also haben wir erfahren, dass dieser Button zum Spinner wird. Als wir die Button-Klasse gemacht haben, wollte ich Ihnen zeigen, wie Sie das innerhalb eines Live-Prototyps erstellen können. Ich gehe hier nach oben links zu der anderen Registerkarte oben, wo es Design-Pattern-Projektdatei heißt. Klicke das an. Ich gehe ein bisschen von dem Beispiel zu dem, das sagt, dass du es tust. Ich klicke und ziehe, bekomme sie im Prototyp-Modus, nicht im Entwurfsmodus, im Tab-Modus „ Prototyp“. Klicken und ziehen Sie den Start auf iMac 20. Dies startet den Prototyp auf dieser Seite. Und das Beste daran ist, dass wir auf dieser Seite nicht einmal etwas tun müssen. Wir wollen es einfach kopieren. Jemand, der Option hält. Klicken und ziehen. Ich kann die Umschalttaste gedrückt halten, um es ausgerichtet zu halten und diese Seite zu kopieren. Wir möchten diese Seite hier nachahmen, auf der wir das Kennwort „Konto erstellen“ haben das Kennwort „Konto erstellen , das fokussiert ist und auf den Eingabestatus des Formulars liegt. Und wir möchten die Inline-Validierung durchführen, die zeigt, dass die Kennwortanforderungen erfüllt werden. Lasst uns das schnappen. Dies ist bereits gruppiert. Was wir tun können, wir können die Gruppierung aufheben, wir werden es nicht tun, wenn er kluges Animate-Zeug ist. Also lass es uns einfach aufheben. Sie könnten mit der rechten Maustaste klicken Sie können eine Command Shift G oder Control Shift G wenn Sie auf einem PC sind, oder Sie können mit der rechten Maustaste klicken und einfach die Gruppierung aufheben. Ich wähle hier das Rechteck und eine Mischung aus, die ich entwerfen möchte, richtig, nicht die Registerkarte „Prototyp-Design“. Siehe die Strichfarbe. Ich klicke auf diese Farbe. Und ich mache es einfach schwarz. Mach es einfach schwarz. Jetzt wähle ich die Geistertexte aus. Ich klicke mir das an. Und ich mache eine Shift Acht oder tut mir leid. Befehl oder Befehl Z. Command Shift, Ja. Okay, cool. Option, tut mir leid, Option a für die Kugeln. Und dann mache ich oben einen Shift-Bindestrich und mache diese Farbe hier. Sie können sehen, dass es auf Grau eingestellt ist, wenn wir das brechen. Wir werden es lösen, kaputt machen. Lass es uns einfach schwarz machen. Easy-peasy. Hoffentlich war es Easy-peasy. Lassen Sie uns den Text hier auswählen , in dem Passwortanforderungen steht. Ich werde das Auswahlwerkzeug haben. Ich klicke nur dreifach drauf. erwischt, erwischt, erwischt, erwischt, dreifach geklickt. Wählen Sie mindestens zwei Buchstaben aus, mindestens bis zu einem Großbuchstaben. Ich klicke und ziehe nur nach Juju. Ich gehe hier zu meinen Farben. Ich wähle eine schöne grüne Farbe aus. Und ich werde diese grün machen. Das sollte gut sein. Komm schon, um ein bisschen hineinzuzoomen. Siehst du, ich habe diese kleinen Kreise hier. Wähle die Kreise aus, die ich verschieben werde. Lasst uns den Schlaganfall entfernen. Der Strich ist gerade das graue Fünf, entferne einfach den Strich. Lass uns zur Füllung gehen. Und lassen Sie uns das auch grün machen. Es kann das passende Grün oder es kann eine andere Farbe haben, grün. Es ist okay aus der SMS. Wie Süßigkeiten apfelgrün. Ja, das ist irgendwie cool dort. Perfekt. Jetzt zeigen wir die Inline-Validierung. Wir zeigen dem Benutzer, dass Sie ein Passwort haben, es sieht gut aus, aber Sie müssen eine Nummer hinzufügen. Lassen Sie uns also ein bisschen herauszoomen. Ich kopiere dieses Kunstbrett, iMac 23. Halten Sie die Option auf meiner Tastatur, holen Sie sich den Doppelpfeil, klicken und ziehen Sie den Bogen. Ich hab dir ein neues Kunstbrett besorgt. Das stimmt. Okay, jetzt sind wir wieder in der dritten Art Board. Wenn ich rauszoome, gehe zum dritten. Fügen wir noch ein paar weitere Option Acht hinzu. Da gehst du. Und sieh, wo das mindestens eine Zahl sagt. Lasst uns weitermachen und uns das schnappen. Jetzt gehen wir zu Füllfarbe, aber du bist wie ein Bereich. Wie bekommen wir das Grün, das wir gerade gemacht haben. Während wir es auf ein paar Arten schaffen können. Wir können die Pipette greifen und Sie können den Mauszeiger auf eine der grünen Farben bewegen. Wählen Sie aus und Sie können die Pipette und oben rechts sehen, wählen Sie diese Farbe grün aus. Das ist eine Möglichkeit. Aber du kannst sehen, dass es aus ist, weil es dir nicht die genaue Farbe gibt. Deshalb machen wir Stile. Am besten wählen Sie dieses Grün aus. Machen Sie weiter und sehen Sie , wo es steht 008937. Lassen Sie uns das zu einem Stil machen. Gehen Sie weiter und klicken Sie auf die vier kleinen Punkte hier Stil. Jetzt mach das Pluszeichen. Lass uns das grün machen. Okay, also um den Text hier auszuwählen, mindestens einen, gehe zu unseren vier kleinen Punkten hier. Sie können sehen, dass die grüne Farbe, die wir gerade erstellt haben, eine Stilbibliothek ist. Drücke Greenie, Bang. Aber jetzt machen wir die gleiche Pipette hier mit, ich zoome hinein. Ich benutze, ich weiß, dass ich das schnell gemacht habe. Ich verwende Z auf meiner Tastatur , um in diesen Bereich zu zoomen. Wählen Sie den letzten Kreis aus, sehen Sie sich das Wort „ fünf Strich kratzen“ an, löschen Sie ihn. Ich gehe ins Weiße. Und hier ist die Pipette. Perfekt. Klicken Sie weiter und klicken Sie im Farbdialogfenster auf die Pipette, ziehen Sie sie rüber und nehmen Sie nun das Grün. Das wird funktionieren. Wir haben hier den Status, in dem Sie den Standardwert haben , und Sie klicken Ihr Passwort ein, Sie müssen eine Nummer hinzufügen. Sie haben alle ihre Anforderungen erfüllt. Kopieren wir einen weiteren Bildschirm hier. Ich halte die Option auf meiner Tastatur und Shift, ich bin eine Kopie, die den Bildschirm aufkauft. Gehen wir fort und wählen oben die graue Farbe aus. Also klicke ich in dieses hier. Hier ist unser C-D-Umriss graues Band. Wenn Sie lernen, Ihre Farben am besten wiederzuverwenden, machen wir einen Stil für das Grau. Erstelle einen neuen Stil. Nennen Sie das grau. Grau. Nun, großartig. Nun, gibt es Cool. Okay, cool. Gehen wir weiter und gehen hier in die Kugeln. Löscht den Bindestrich, den Schrägstrich. Wählen wir nur das Rechteck aus. Gehen wir zurück in unsere Stile. Denken Sie an die vier kleinen Punkte neben dem Schlaganfall hier. Machen wir es so grau. Ich bekomme es in diesem Standardzustand zurück. Ich wähle diesen Button aus, er ist gruppiert. Also muss ich doppelklicken und auf „true“ klicken. Alles gut. Okay, jetzt muss ich es erstellen, löschen. Löschen Sie auf der Tastatur. Boom. Wenn du so gegangen bist, hast du den Button gelöscht. Das heißt, Sie haben nicht dreifach geklickt, dreifach geklickt, dreifach geklickt und dreifach geklickt. Jemand zum Verkleinern. Ich gehe hier zu dem oben. Ich wähle diesen Spinner aus. Ich gehe zu Command C, wie in Cat oder Control C. Wenn du auf einem PC bist, werde ich auf dem Mac sicherstellen, dass ich diese Art Board hier auswähle. 25, ich bin auf einem Mac, also kommandiere ich V, wie in Victor, und es wird eingefügt. Wenn Sie auf einem PC sind, steuern Sie V und es wird eingefügt. Wenn nicht, ist das okay. Bewegen Sie es einfach oben auf den Knopf. Schnapp dir dieses Kunstbrett. Ich bin bei 25 Uhr. Beweg es. Stellen Sie sicher, dass sich alles mit der Kunsttafel bewegt. Wenn nicht, ist es nicht im Kunstbrett, es wird nicht im Prototyp auftauchen. Alles klar, nähen wir das Ding zusammen. Ziemlich einfache Nähte. Schnappen Sie sich das kreative Passwort, gehen Sie zu Ihrem Prototyp, ganz oben. Ziehen Sie den GUI-Arm darauf. Wir wollen onclick, wir wollen kein smart animate. Mach einfach sofort. Schließ es. Geh zum nächsten. Alles was wir tun müssen, ist das Formular hier. Zieh es hier rüber. Sofortig. Alles was wir brauchen onclick navigieren zu Instant. Dasselbe hier. Prototyp-Tab ergriff einen kleinen GUI-Arm mit dem nächsten Bildschirm verbunden war, klicken Sie auf Navigieren zu sofort. Und das sollte eine vollständige Inline-Validierung mit dem Bonus-Zahlenauswahlfeld auf der Schaltfläche sein. Stellen Sie sicher, dass Sie den Urin haben, die Registerkarte Prototyp. Stellen Sie sicher, dass Sie neben dem U du sind. Drücken Sie hier die iMac 20-Layer, drücken Sie Play, klicken Sie in das Erstellen eines Kennworts, Zeilenvalidierung. Noch ein Mal. Wir haben diese Zahl hinzugefügt. Und wir müssen immer noch das Create machen. Gehen wir zurück über den Tab oben links und zurück zu unserer Designdatei. Sie können diesen Bildschirm sehen, indem Sie sie einfach auswählen. Wenn Sie auf die Registerkarte Prototyp klicken, sehen Sie die Prototyp-GUI-Arme, die verbunden sind. Wir haben diese Verbindung. Wir haben den falschen gemacht. Darum siehst du, dass ich das Formular hier gemacht habe. Sie können die Befehlszeitraum verwenden, um die Werkzeuge ebenfalls zu verschieben , z. B. alles in Figma auszublenden Perioden-Lace-Leiste zu befehlen. Du kannst sehen, wie ich diesen Arm zu dem gebracht habe, das Formularfeld hier drüben. Und dieses sollte nicht das Formularfeld sein, es sollte der Button sein. Ich mache eine andere Befehlsperiode, oder wenn Sie sich auf einem PC-Steuerelement befinden, Kontrollzeitraum. Ich lösche diesen Arm. Wie Sie es also löschen als ein paar Dinge können Sie zu Interaktionen hier oben gehen, ich drücke einfach Minus und das wird es löschen. Oder Sie klicken einfach auf den GUI-Arm aus. Verbinde es nicht mit irgendetwas. Lass einfach deine Maus los, klicke und geschleppt, lass einfach los. Und jetzt greifen wir auf die Schaltfläche „Erstellen“ und ziehen sie dort hinüber. Klicken Sie stattdessen auf Navigieren. Gehe zurück zu unserem Prototyp hier können wir auf Play drücken. Führt Sie automatisch zur Registerkarte Prototyp. Drücken Sie auf Erstellen. Sieh mal. Ziemlich genial. Wir sehen uns im nächsten Video. Wir werden Dropdowns abdecken. Wir sehen uns dort. Tschüss. 29. Erstelle das Web – Dropdown: Alles klar, Willkommen beim nächsten Video, in dem wir Dropdowns behandeln werden. noch einmal daran, dass der Prototyp-Modus ein kleines Startrechteck ergriffen hat. Ziehen Sie diesen ganzen Weg zum Beispiel des Drop-Down-Dot-Des wird der Prototyp von diesem Abschnitt hier starten , damit wir sehen können, wie das Dropdown-Menü aussieht. Gehen Sie weiter und drücken Sie oben auf Play. In Ordnung, also hier ist unser Dropdown. Wir möchten einen Bundesstaat auswählen. Klicken Sie auf das Dropdown-Menü, der Pfeil geht auf 100, 80 Grad, wenn sich der Umschlag dreht. Und dann erfahren wir hier, was wir in Figma herausfinden werden, ist, dass ich einfach im Dropdown-Menü scrollen kann. Wie ein Spaziergang durch all diese Möglichkeiten hier. Und wenn ich auf klicke, sagen wir Kalifornien, siehst du Kalifornien. Ich klicke wieder hinein. Ich sehe den Dropdown. Ich kann wieder rausklicken. Ziemlich einfach, hat aber auch eine gewisse Komplexität, sollte aber ziemlich einfach sein. Gehen wir zurück und stellen sicher, dass wir uns hier im Prototypmodus befinden. Nimm den Startarm und bring ihn dir rüber. Tu es. Und ich zoome ein bisschen hinein. Ich habe hier den ganzen Text für alle Bundesstaaten neben der rechten Seite hinzugefügt . Lasst uns das ein bisschen übergehen. Beweg das einfach rüber. Ich hole mir das iMac 21 Art Board hier. Ich schnappe mir nicht die Elemente im Inneren schnappe mir die Kunsttafel. Ich halte Option. Ich kopiere es nach rechts. Wir werden den offenen Status für das Dropdown erhalten. Also das erste, was Sie sehen können, wenn es gruppiert ist, heben Sie einfach die Gruppierung auf, rechts G, klicken Sie mit der rechten Maustaste auf die Gruppierung. Wählen wir die Hoffnung, die Gruppierung muss möglicherweise erneut aufheben. Wählen wir nur die Karotte oder den Pfeil aus und drehen sie erneut. Du musst hineinzoomen. Ich halte z fest und zoome hinein. Geh weiter und dreh die 180 Grad um. Einfach so. Wir wollen es tun, dass wir diese kleine weiße Box hier machen wollen. Ich gehe in das Rechteckwerkzeug. Oben links sehen Sie, dass Sie die Formwerkzeuge haben. Sie haben Rechtecke und Linien und Pfeile und Ellipsen und Polygone und Sterne und vieles andere Dinge. Aber gehen wir in das Rechteckwerkzeug, klicken Sie einfach darauf. Es wird standardmäßig als tolles Grau verwendet. Ich klicke und ziehe einfach in mein Kunstbrett. Schon wieder. Bewegen Sie die Zeichenfläche, stellen Sie sicher, dass die grauen Felder dort sind. Sieht gut aus. Jetzt lass uns dieser grauen Kiste einen Schatten geben. Aber bevor wir das machen, machen wir es weiß. Also geh zurück zu unseren Styles hier. Schnappen wir uns unser Weiß. Wir können es nicht sehen. Gehen wir weiter und gehen zu unseren Effekten. Wenn du auf der Registerkarte Design bist, folge mir einfach hier. Ich gehe zu Effekten. Ich füge einen Effekt hinzu. Es wird standardmäßig den Schatten werfen. Denken Sie daran, was ich in meiner Shadow Class gesagt habe, möchte niemals Standard-Schlagschatten verwenden. Du kannst sehen, was ich hier gemacht habe. Es gibt ein bisschen wie, es sieht aus wie eine Glühbirne oder ein Sonnenstrahlsymbol. Es sind Ihre Effekteinstellungen. Wir möchten die Standardstatus dieses Schlagschattens bearbeiten. Sie haben also vier auf dem y, das ist die untere, die horizontale Linie. Was ist los und mache fünf auf dem X, dem vertikalen Abschnitt, fünf auf dem Y. Was machen wir dann immer? Ich weiß nicht, was machen wir an diesem Punkt Fehler? Wir fügen Unschärfe hinzu, viel Unschärfe. Wie 30 halte ich die Schicht. Du kannst einfach 30 tippen. Lass uns einfach 30 gehen. Lass uns ein bisschen weniger gehen. Lass uns 20 machen. Okay, cool. Jetzt fügen wir den Schatten zu stark ein bisschen bläuliches Grau hinzu. Das sieht gut aus wie dort. Das sind 909. Du kannst einfach überall da oben. Es ist in Ordnung. Als ob diese Gegend in Ordnung ist. Okay. Schließen Sie dies, schließen Sie den Schlagschatten-Dialog. Perfekt. Wir haben unseren Schlagschatten. Lassen Sie uns das ein wenig nach oben drücken , wenn die Tastaturpfeile gehen. Da gehst du. Ich schnappe mir auch das Rechteckwerkzeug und klicke und ziehe und mache einfach den kleinen Scroller-Arm. Auch hier können wir Figma nicht verwenden, um diese Schriftrolle so zu machen , wie sie es wäre, wenn sie gebaut wurde. Es hilft jedoch, den Benutzer und den Prototyp zu informieren. Wenn wir dies testen würden, dass diese Informationen, alle Bundesstaaten auf der rechten Seite hier scrollbar sind. Oder du kannst diesen Schritt nicht machen, oder? Wie wenn ich dabei bin, kann ich nicht scrollen. Das ist ein anderes Es ist ein bisschen mehr. kannst du, aber es ist eine ganz andere Klasse im Voraus. Klasse und wahrscheinlich nicht einmal die Mühe wert , dieses Ding zum Scrollen zu bringen. Wenig, wenig graue Form da. Ich hole mir alle SMS hier auf der rechten Seite. Ich ziehe es in meine Akte. Sie können sehen, wann es in die Datei geht weil es nicht aus der Kunsttafel herausspringen sollte. Ich ziehe in mein Kunstbrett. Es sollte so auffallen. Es sollte beschnitten werden, oder? Wenn ich also hier reingehe und es reinziehe, möchte ich, dass es da reingeht und dort zuschneidet, du gehst einfach so. Lasst es uns ein bisschen runterziehen, stellen Sie sicher, dass es abgeschnitten ist. Ich zoome ein bisschen hinein. Hier ist der Kicker hier. Ist es das, was wir tun werden, dann klicken wir mit der rechten Maustaste darauf. Es spielt keine Rolle , wo Sie es positionieren. Sie können es an einer beliebigen Stelle auf dem Foto platzieren. Es spielt vorerst keine Rolle. Klicken wir mit der rechten Maustaste darauf und gehen noch einmal zur Frameauswahl, oder? Es ist super wichtig. Super, super wichtig. Rechtsklick. Und dann machen wir Frame Selection. Okay, großartig. Jetzt hat das einen Rahmen geschaffen. Wenn Sie in die Ebenenpalette links schauen, haben wir einen Rahmen. Und wenn du darauf klickst und öffnest, haben wir alle Bundesstaaten hier, du musst das nicht tun. Ich werde Kommando Z zurückgehen. Du kannst das also sehen. Sehen Sie, wie ich auf den Ebenen alle Texte hier habe für alle so ziemlich einen Dialog für den Text und alle Zustände hier. Wenn ich mit der rechten Maustaste darauf klicke, rahme ich es ein. Und es hat fast wie eine Gruppierung. Die Frame-Gruppierung unterscheidet sich jedoch ein bisschen von einer Gruppe. Was wir jetzt tun wollen, ist, dass ich herauszoomen und den unteren Teil dieses Rahmens greifen möchte. Also wähle ich es aus. Ich schnappe mir den Boden. Und ich bin auf einem Mac, ich werde das Kommando halten. Während ich das Kommando halte, schiebe ich diesen Rahmen hoch. Sollte so aussehen. Wenn es so aussieht. Ja, dir geht's gut. Okay, also ja, einfach sicher, dass Sie das Kommando haben. Stellen Sie sicher, dass Sie die Frame-Ebene haben. Klicke und ziehe es nach oben. Dann rechts hier haben wir unsere Frame-Sektion. Ich bin auf der Registerkarte Design. Frame-Abschnitt. Das mag etwas kompliziert sein, aber er ist gut. Ihm geht's gut. Nun, wir wollen es tun, ist Clip-Inhalte. Was wird tun? Es wird den Inhalt abschneiden. Dieser Rahmen. Sieh dir an, wie das gemacht hat. Was hat das noch einmal durchgemacht. Diesmal mache ich es schnell. Ich hatte gerade mein Textwerkzeug. Ich schreibe oder nur mein Textdialogfeld. Ich rechtsklicke mit der rechten Maustaste Ich halte das Kommando. Wenn Sie auf einem PC sind, steuern Sie das Klicken und Ziehen. Bring diese Kiste hoch. Ging zum richtigen Designbereich, Clip-Inhalt, Boom. Ziehen Sie dies nun über Ihr Dropdown-Menü. Und was wir jetzt tun wollen, ist Command oder Control zu halten. Wenn Sie sich auf einem PC befinden und diese Informationen so zuschneiden, nur in das Dropdown-Dialogfeld passen. Genau so. Und dann schnapp dir die obere Holding und halte erneut das Kommando. Wenn du das machst, hast du kein Kommando. Halten Sie den Befehl oder die Steuerung gedrückt. Wenn Sie auf einem PC sind und verschieben Sie diesen nach oben rechts. Wenn nicht, wenn Sie das nicht behalten, werden Sie es wissen, weil Sie das Textfeld verschieben. Wir wollen den Frame-Layer-Befehl. Ich bringe auch die Linke ein bisschen raus. Da gehst du. Okay, also lasst uns den nächsten Zustand holen, den ich ziehen werde. Ich kopiere die erste Seite hier nach rechts, nur die Standardseite. Und lass uns in Kalifornien tippen, du kannst in jeden Staat bringen, den du willst. Und ich mache das schwarz. Ich gehe zurück, um die Farbe für hier rechts oder die Füllung zu brechen und es einfach schwarz zu machen. Okay, perfekt. Wir haben dieses Gefühl für das Drop-down-Menü. Nun fügen wir das zusammen gegen Auswahl zusammen und stellen Sie sicher, dass Ihr Start im Abschnitt „Du erledigt“ ist. Schnappen Sie sich den Bundesstaat, ziehen Sie diesen mit Klick auf die nächste Kunsttafel, navigieren Sie zu Instant Perfect. Wählen Sie nun die Textebene hier aus und ziehen Sie diese auf die nächste Kunsttafel. Onclick navigieren Sie zu Instant Perfect. Schauen wir uns das an, dann fügen wir noch eine Sache hinzu. Geh weiter und geh hier nach oben. Drücken Sie Abspielen. Klicken Sie auf Ihr Dropdown-Menü und Sie können sehen, dass es nicht scrollt. Momentan findet kein Scrollen statt. Drücken Sie auf Kalifornien. Boom. Okay, das funktioniert gut. Was wir tun müssen, ist diese Schriftrolle zu machen. Jetzt schnappen wir uns diesen Text hier. Wo werden wir produzieren? Wenn Sie es im Design haben, sehen Sie, dass es einfach so aussieht. Im Prototyp-Modus sehen Sie hier, wo Überlaufscrollen steht. Also habe ich dieses Feld ausgewählt, führe vertikales Scrollen durch. Gehen wir jetzt zu unseren Prototypen zurück. Also fängt es mit der Startseite an. Wählen Sie also iMac 21 Layer aus. In Ordnung, also gehen wir zurück zu ihrer Standardseite. Drücken Sie Abspielen. Präsentieren. Gehe nicht zum Prototyp, wir müssen ihn neu laden. Drücken Sie einfach hier abspielen und klicken Sie dann auf dieses Dropdown-Menü. Sie sollten in der Lage sein, darin zu scrollen, Sie können auch klicken und ziehen und schauen, es gibt alle Zustände. Easy-peasy klickt auf Kalifornien. Boom. Ist das nicht cool? Sehr, sehr cool. Schnappen wir uns den Input des Bundesstaates Kalifornien. Kopiere das auch. Wählen wir nun unser Dropdown-Menü aus. Ich komme aus dem Prototyp-Modus raus . Ich gehe zurück in den Entwurfsmodus. Wählen Sie einfach alle Dropdown-Bereiche aus. Drücken Sie C oder Command C oder Control C, wenn Sie auf einem PC sind. Und lasst uns die Ebene auswählen, die wir gerade kopiert haben. Das ist iMac 25, und ich werde, ich bin auf einem Mac, also Command V, wenn du auf einem PC bist, kontrolliere V, füge das an Ort und Stelle ein. Wählen wir nun den aktiven Status aus, richtig, also hatten wir gerade den offenen Zustand. Du drückst auf Kalifornien. Wir haben den aktiven Status dieses Dropdown-Menüs. Verbinden wir es mit diesem , indem wir klicken und navigieren. Und dann sollte das schon hier angeschlossen sein. Großartig. Jetzt können Sie sehen, wie es aussieht, wenn Sie wieder in das Dropdown-Menü klicken und erneut Kalifornien auswählen. Okay, cool. Das war eine vollständige Fertigstellung von allem für das Web. Wir sehen uns im nächsten Video dem wir zu den mobilen Prototypen gehen und einige mobile Interaktionen prototypieren werden . Wir sehen uns dort. Tschüss. 30. Erstelle – Iphone – full: Jetzt bist du wahrscheinlich ein Figma Pro. Du wirst gut in Figma. Wir werden es tun, dass wir hier von ihrem Web-Prototyp wechseln werden. Oben links solltest du hier oben Seiten haben. Wir werden zum mobilen Prototyp wechseln, und es sind die gleichen Funktionen, in die wir kommen werden. Ich habe das alles schon vorgebaut. Es sollte Spaß machen. Wir werden das zusammen machen. ich schon. Wenn Sie sich auf der Registerkarte Design befinden, wird es so aussehen. Wenn Sie sich wieder auf der Registerkarte Prototyp befinden, haben wir das Startrechteck hier. Ich habe bereits den ersten Prototyp hier bereit, und wir machen diesen auf dem zweiten. Schauen wir uns das einfach schnell an. Drücken Sie einfach auf iPhone auswählen, die Ebene hier. Drücken Sie Abspielen. Das wird einen neuen Prototyp eröffnen. Sie können sehen und sehen, wie das aufgeschlitzt ist. Und dann gleitet das X wieder nach unten Vollbild-Modal mit einem Move hinein, der nach oben geht und dann ausgeht, wenn das heruntergeht. Ziemlich glatt. Und auch einfach. Also nochmal, das erste, was ich tun werde, ist sicherzustellen, dass wir oben rechts auf der Registerkarte „Prototyp“ den Start-Tab ziehen. Machen Sie weiter und schieben Sie das hier rüber. Schnappen wir uns ein neues Rahmenwerkzeug hier oben. Wir haben das im letzten Web-Prototyp gemacht. Schnapp dir den Rahmen. Ich benutze das iPhone 11 Pro X genau hier. Bei ausgewähltem Frame-Werkzeug. Ich habe hier auf das iPhone-Akkordeon geklickt, und ich habe Pro X gemacht. Und wenn du einfach darauf klickst, wird ein Kunstbrett für dich fallen lassen. Gehen wir hier zu unseren Ebenen und nennen Sie diese einfach. Nennen wir das das Modal. Okay, cool. Also lasst uns von dieser Kunsttafel hier drüben greifen. Lasst uns das High schnappen. Geh einfach weiter und platziere es Command C, befehl V. Und lass uns den x-Befehl C oder Control C nehmen wenn du auf einem PC bist. Machen Sie weiter und platzieren Sie das hier drüben. Also haben wir alle Teile hier. Super einfach. Stellen wir sicher, dass dieses x hier nicht zu diesem Bildschirm geht. Also entferne einfach die Interaktion. Du kannst den GUI-Arm greifen und ihn einfach herausziehen. Wir wählen eine Ansicht aus. Wir beginnen mit der Registerkarte „Prototyp“. Klicken Sie darauf, wo es heißt, hallo, wir haben auf Tap, also wird es standardmäßig ausgeführt. Davon kommen diese Bildschirme, wenn Sie sich daran erinnern, wann wir die Frame-Auswahl vorgenommen haben, wir zu iPhone-Bildschirmen gegangen. Wenn Sie in diesen Prototyp-Modus wechseln, weiß es jetzt, dass Sie sich gerade befinden, Sie mobile Geräte verwenden. Anstelle von OnClick. Jetzt ist es oben oder per Drag und es gibt Ihnen dieselben Funktionen, wechselt aber nur von einem On-Click zu einem Nicht-Tippen. Ziemlich einfach hier. Wir haben das schon mal gemacht. Anstatt zu navigieren, öffnen wir uns. Behalte das eigentlich gleich. Navigiere zwei ist das Gleiche. Auf Hahn. Was wir wollen, ist in der Animation, Animation hier, dass sie einzieht und nicht von links oder rechts oder von unten. Wir wollen das Up. Lass uns das machen und wir kommen zurück und spielen ein bisschen damit. Wir werden sicherstellen, dass dies in Bewegung ist, nicht ausziehen. Und dann geh weiter und schnapp dir das x, ziehe das zurück auf den Bildschirm, auf dem wir gerade waren , und ziehe dich nicht ein. Wir wollen ausziehen. Wir wollen nicht, dass wir wieder runter wollen, also geh raus und runter. Okay, wählen wir den Startbildschirm aus, den wir hier haben, die Zeichenfläche drücken Sie oben rechts abspielen. Es bringt uns zum Prototyp. Wir sollten das Gleiche haben, was du hier gerade siehst. Und das X bewegt sich nach unten, bewegt sich nach oben, bewegt sich nach unten. Was hier passiert, ist was interessant ist. Sie werden wissen, ob ich das x auswähle und zurück zum Prototyp gehe und ich nicht ausziehe, ich ziehe ein. Schau, was passiert. Ich gehe hier zurück zu unserem Prototyp. Du kannst einfach auf Play drücken, wenn du willst. Das sieht gut aus. Sehen Sie sich nun das x. Sehen Sie sich an, wie der andere Bildschirm oben drauf ging. Sieh zu, wie sich der Bildschirm oben bewegt. Das ist seltsam, du hättest nie eine, wirst du nie in irgendeiner Anwendung sehen, mobile Anwendung, die du verwendest. liegt daran, dass wir uns gefühlt haben oder du nicht versagt hast, aber wir haben vergessen, das x nicht in einen Auszug zu versetzen, sondern einen Auswärtszustand. Jetzt lass uns zurückgehen. Da gehst du. Dies sollte beliebig folgen, wie der Bildschirm ins Spiel kommt. Es sollte sich auch in der gleichen entgegengesetzten Reihenfolge bewegen. Zieht ein und zieht aus. Versuchen wir es mit einem anderen. Klicken wir hier auf den Ansicht-Button, nur zum Spaß, sagen wir, dieser Bildschirm wird von links hereinkommen. Schauen wir uns nun diese drückende Ansicht an und sehen, wie der Bildschirm von links hereingegangen ist. X geht unter. Das war merkwürdig, weil der Bildschirm von links hereinkam. Warum geht es unter, wenn es sich bewegt? Dasselbe können wir das X machen, klicken Sie entweder auf die Interaktion hier oben rechts oder auf den GUI-Arm hier. Und statt gemischt, nicht, nicht einziehen, ziehen Sie aus. Und was dann los ist, anstatt von links hereinzukommen, wollen wir, dass es hereinkommt und sich von links nach rechts bewegt. Und es gibt dir ein kleines Beispiel. Figma Gnosis ist irgendwie verwirrend. Also sagten sie: Okay, das ist es, was du tun wirst, jemand wird aussehen. Also wieder, geh nach rechts. Jetzt kannst du das reinrutschen und das x wird herausrutschen. Und normalerweise möchten Sie für diese Interaktion nicht wirklich, Sie möchten, dass ein Pfeil zurückgeht, und dann wird er zurückgehen. Dann für den anderen , wo es eingezogen wurde, als es nach unten bewegt wurde, und das war ein Anstieg. Dort willst du das x, oder? Sie möchten also, dass SlideUp X geschlossen wird. Xs ist das richtige Designmuster dafür. Okay, cool, das waren Vollbild-Modals. Lassen Sie uns ein Handy machen, das sich von einem Web-Dropdown im nächsten Video unterscheidet , und wir sehen uns dort. 31. Erstelle das Iphone – Dropdown: Okay, cool. Willkommen zurück. Schon wieder. So wie er das Video gestartet hat und sicherstellt, dass Sie oben auf der Registerkarte Prototyp sind. Bewegen Sie das kleine Startrechteck nach unten zu dem, in dem die Dropdown-Auswahl für Mobilgeräte, unteres Overlay steht . Wir haben das Beispiel hier. Lasst uns fortfahren und diese Kunsttafel auswählen. Drücken Sie auf Play am Prototyp. Und Sie werden sehen, dass wir eine dunklere Benutzeroberfläche und ein dunkles UI-Dropdown haben. Und das unterscheidet sich von dem Dropdown-Menü, das wir im Web gemacht haben. Wenn Sie sich erinnern, enthält das Dropdown-Menü hier in Kaninchen nur ein kleines Dropdown-Menü in den Formularfeldern. Und du kannst hier scrollen. Für Mobilgeräte ist es anders. Es braucht die volle Immobilie des Gerätes und es kommt von unten herein. Das ist ein modales Dropdown-Menü. Es unterscheidet sich von einem Web-Dropdown. Und sagen wir, ich wähle nur aus , weil es einfacher ist, hier zu scrollen. Sagen wir, ich wähle Rot aus. Jetzt haben wir das Dropdown-Menü ausgewählt. Wir können eine andere Version eines Dropdown-Menüs machen, in dem Sie ein x haben , um es zu löschen. Und da hast du es. Lasst uns das herausbauen. Es ist ziemlich einfach. Stellen Sie wie gewohnt sicher, dass Sie sich auf der Registerkarte Prototyp befinden. Schnappen Sie sich das Startrechteck und bewegen Sie es dorthin, wo es heißt, dass Sie es tun. Und ich habe so ziemlich den Vorher-Nachher-Bildschirm hier. Sie können sehen, wo es heißt „Farbe auswählen“ und „Rot“. Was wir hier tun möchten, ist, dass wir diesen Dropdown-Abschnitt erstellen möchten. Was wir tun werden, ist das Frame Tool zu greifen, zum iPhone Pro X zu gehen einfach darauf zu klicken. Es wird die gleiche Art Board-Größe fallen. Ich werde es zwischen dem Standard-Dropdown und dazwischen der aktiven Standardeinstellung platzieren dem Standard-Dropdown und . Was ich tun werde, ist das einfach kleiner zu machen. Ich klicke oben und klicke einfach und ziehe. Mach es einfach kleiner. Okay, cool. Also lasst uns einfach ein paar davon hier drüben kopieren. Wir haben einen ausgewählten Geschmack. Ich befehle C oder kontrolliere C. Lass uns das in Befehl V einfügen, wie in Victor oder Control V wenn du auf einem Mac bist. Verwenden wir das Linien-Tool für den Rest dieses Zeugs. Auch hier gehen wir zu den Shape-Werkzeugen oben. Nimm stattdessen die Schlange. Einfach anklicken und ziehen. Sie müssen hier noch keine Vollkunstwand mitmachen. Stellen Sie einfach sicher, dass es sich in der Kunsttafel befindet indem Sie auf die Kunsttafel klicken und es verschieben. Okay, cool. Jetzt machen wir es voll. Sie sollten sehen, dass es sollte, sollte es nicht sehen können, ob es länger ist als die Kunsttafel. Wenn es so aussieht, können Sie die Linien sehen, die aus der Kunsttafel kommen. Es ist nicht in der Kunsttafel und verschiebe die Zeichenfläche. Sieh. Wir wollen sicherstellen, dass es in der Art Board ist. Machen wir es zu dieser schwarzen Linie wie 10% Deckkraft. Du kannst also sehen, wie ich das gemacht habe. Ich lasse mich das nicht schnell einfügen. Wir haben diese schwarze Linie genommen, sind zu den Ebenen gegangen, sind zu den Ebenen gegangen denen „ Durchgehen“ steht, es gibt ein, ein 100%, machen Sie einfach 10% und drücken dann die Eingabetaste auf Ihrer Tastatur. Ich schnapp mir diesen Text und klicke drei mal rechts hinein, schnapp dir diesen Text. Ich habe die Option gehalten, geklickt und nach unten gezogen. Dreifach-Klick. Wir nennen es rot. Und jetzt lass uns gehen. Jetzt, da wir dabei sind und ausgewählt gelesen haben, gehen wir hier zu unserer Font-Ebene. Lass uns wie 30 machen. Da gehst du. Jetzt mache ich das zu einer Farbe, jedes Rot, das du willst. Lass uns das nächste nochmal machen. Jetzt siehst du, wie ich das gemacht habe. Einfach Option, halten, klicken und umschalten. Dreifach-Klick. Habe alle meine Textebenen hier. Ich kann links ausrichten, zentrieren, rechts ausrichten. Sie können es regelmäßig, fett machen , was immer Sie wollen. Ich werde sie jedoch alle konsequent halten. Lass uns das blau machen. Ich mache hier jede Farbe blau. Ups, ich hatte es nicht ausgewählt, also dreifach klicken, stellen Sie sicher, dass Sie diesen Text ausgewählt haben. Geh blau. Jetzt lass uns grün machen. Derselbe Deal. Ziemlich einfach. Ich benutze einfach das Grün, das wir bereits benutzt haben. Ich weiß es nicht. Lass uns lila machen. Ich breche die Farbe, die wir gerade hatten. Schnapp dir überall lila. Sie können hier jede gewünschte Farbe machen. Okay, also lass uns gehen die Pfeile sind die Linien und das ist ziemlich cool. Sieh dir das an. Ich mach das. Ich gehe zur Doppelpfeil-Halteoption auf meiner Tastatur. Klicken und ziehen Sie die Umschalttaste halten, oder? Das ist also ohne Verschiebung, Shift, ich kann mich nicht bewegen und ihm einfach eine gute Horizontale geben. Ich schaue mir dort 70 Pixel an. Du kannst sehen, wie meine Pixel da sind. Ich schaue mir 70 Pixel an. Du kannst alles machen, es ist in Ordnung. Und dann lass los. Und dann tue ich, ich bin auf einem Mac, mache Command D, oder wenn du auf einem PC Control D bist und es wird denselben Abstand kopieren. Da gehst du. Jetzt passen wir die rein. In diesen Räumen zentriert. Sie sind lila. Okay, Cool. Alles klar, jetzt müssen wir zu unserem Prototyp zurückkehren, die Lieblingsfarbe auswählen, die Lieblingsfarbe auswählen, klicken und ziehen Sie sie hier rüber. Und wir haben das gemacht, bevor wir auf den Fuss gingen. Und hier ist das echte, zu dem wir wollen, anstatt hier oben rechts zu navigieren. Und die Interaktionsdetails, wenn Sie sie nicht sehen, klicken Sie einfach an der Stelle, an der Tap steht. Wir wollen ein offenes Overlay. Und sehen Sie, wie es standardmäßig zentriert ist. Wir wollen hier unten in der Mitte. Schließen Sie, gehen Sie nach draußen, fügen Sie Hintergrund hinzu. Du kannst 70 machen. Drücken Sie Enter. Wir wollen nicht, wir wollen von oben einziehen und schon wissen, was wir wollten. Großartig. Perfekt. Fügen Sie „Grab Red klicken Sie es zum nächsten. Und wir wollen nichts anderes als nur einen Augenblick. Auf Hahn. Instant sollte in Ordnung sein. Lass uns oben rechts auf Play drücken. Hier ist dein modales Dropdown. Das ist cool. Und wähle Rot aus und es geht weg. Okay, lass uns zum x gehen, nur damit wir es schließen und damit spielen können. Also schnapp dir das x noch einmal, das ist gruppiert. Also dreifach klick. Zieh es hier rüber. Stattdessen oben drauf. Ja, sieht gut aus. Klicken Sie auf das X, da zurück zum Dropdown-Menü Farbe auswählen, Modal , Handy, Brot, X, süß, leicht peasy. Okay, wir sehen uns im nächsten Video. Wir werden ein modales Pop-up durchgehen , das auch einfach sein sollte. Wir sehen uns dort. Tschüss. 32. Erstelle – Iphone – Modal, Title-Bar und Menü: Alles klar, Willkommen beim nächsten Video. Wir machen ein Pop-up für oder ein Modal auf einem mobilen Gerät. Super einfach. Wir haben das schon gemacht. Lasst uns weitermachen und das schnappen, hier anfangen und ziehen es nach unten. Wir haben das für das Web gemacht. Ich möchte es einfach schnell für das mobile Gerät machen. Wähle hier die Kunsttafel aus und drücke Play. Schon wieder. Jetzt sind wir wieder auf einem weißen Hintergrund. Hier ist dein Knopf und sieh es dir an. Da ist dein Modal. Drücken Sie auf Schließen. Okay, cool. Schauen wir es uns hier an. Vergewissern Sie sich, dass Sie auf der Registerkarte „Prototyp“ sind. Derselbe Deal. Drücken Sie auch hier unten auf Start. Sie haben bereits alle Abschnitte hier. Das Hoch- und das Schließen Button. Was wir hier machen wollen, ist das Zeichenflächen-Tool hier zu greifen . Gehe zu Frame. Mach das Gleiche. Iphone 11 Pro X auf der rechten Seite. Frame-Tool, iPhone Pro X. Jetzt machen wir es etwas weniger groß, ein bisschen weniger breit. So etwas. Du wirst es wissen, weil du es hier reinziehen und sehen kannst. Ja. Okay. können wir später immer anpassen. Das ist nur das High hier rein, aber das x, und lasst uns das x nach oben links setzen, machen es einfach für den Benutzer einfacher. Wenn sie ihre rechte Hand haben, die ihr Gerät hält können sie die linke Hand benutzen und oben schließen. Wir haben das schon oft gemacht, glaube ich schon. Gehen Sie weiter und schnappen Sie sich die Textschaltfläche, ziehen Sie ihn zu diesem Rahmen, wo es beim Tippen steht, denken Sie daran, dass wir tun wollen, was ist das? Overlay öffnen, über rechts öffnen. Es kann einmal zentriert werden, schließen, wenn Sie nach draußen klicken. Lass uns 70 machen. Wir können weniger erreichen, wir können an dieser Stelle 50% Deckkraft erreichen. Lassen Sie uns hier einen Übergang auflösen. Jetzt schnappen wir uns das x, das es schließt, ziehen es auf diese Zeichenfläche. Navigieren Sie zum Auflösen. Sollte perfekt sein. Wählen wir diese Zeichenfläche aus und drücken Sie Play. Triff den Text. Da ist dein Modal. Sie können X drücken, um es zu schließen. Es sieht etwas zu breit aus. Lass es uns ein bisschen ausdünnen. Also schnapp ich mir das Kunstbrett, schiebe es einfach ein bisschen hinein lege diese Hightech-St rüber. Ich werde den vertikalen Raum auch ein wenig verkleinern . Wir können auch hier die Kunsttafel auswählen und zu Ihrem Design-Tab gehen und wo Sie haben. Also wurde ich wieder ausgewählt, das Modal Art Board von Prototyp zu Design umgestellt wurde. Im Rahmenbereich gibt es dieses kleine Symbol einer Ecke, gibt es dieses kleine Symbol die als Eckenradius bezeichnet wird . Das kannst du abrunden. Lass uns wie 15 machen. Da gehst du. Es wird die Ränder dieser Kunsttafel abrunden. Ich geh wieder rein. Lassen Sie uns oben unseren Prototyp-Tab machen. Drücken Sie Abspielen. Da gehst du. Das ist besser. Sie können außerhalb dieses Modals klicken und es schließen. Klicken Sie auf das X, um es zu schließen. Bing, Bada, Boom, du bist ein Profi. Du hast das schon mal gemacht. Lass uns weitermachen. Okay, also hole ich den Anfang hier. Anstatt ein neues Video zu starten, werden wir einfach weitermachen , weil wir so rollen. Drücken Sie den Start und ziehen Sie ihn zum nächsten. Dies ist das Menü und die Titelleiste plus das feste und das linke Overlay vom Menü Einziehen im Menü werden von links eingezogen und wir schließen es. Geh von rechts wieder rein. Lass uns weitermachen und auf dem Prototyp auf Play drücken, und lass uns das machen. Wir haben das Menü bereits erstellt , aber wir werden lernen, wie man Dinge repariert. Und du siehst, ich kann scrollen, ich kann klicken und ziehen, um zu sehen, wie das Menü dort repariert ist. Und wenn Sie auf das Symbol klicken, gleitet hinein, schließt Bone, Ihr Profi dabei. Okay, also lasst uns den Anfang schnappen. Schieb es rüber zum U du. Ich glaube, ich habe diese Titelleiste bereits für uns ausgewählt. Also sieh es dir an. Alles, was Sie tun müssen, ist es auszuwählen, zur Registerkarte Design zu gehen und wo Sie hier Einschränkungen sehen. Also habe ich mich wieder für das Kunstbrett entschieden. Ich habe Einschränkungen. Sehen Sie, wo beim Scrollen eine feste Position steht. Gehen wir weiter und bevor wir das tun, gehen Sie zu Ihrem Prototyp. Drücken Sie einfach auf Play. Stellen Sie sicher, dass Sie den haben, der besagt, dass Sie es tun. Nicht. Das Beispiel, das besagt, dass Sie die Wiedergabe drücken und sehen , wie die Tableiste und die Statusleiste nicht behoben sind. So sieht es gerade aus. Wählen wir nun diese Titelleiste aus. Gehen Sie zurück zu unserer Registerkarte Design im Abschnitt Einschränkungen. Machen Sie eine feste Position beim Scrollen. Zentrieren Sie, dass Sie es oben und in der Mitte, oben in der Mitte platzieren können. Geh zurück zu deinem Prototyp hier. Drücken Sie Abspielen. Scrollen Sie jetzt und sehen Sie , wie es in Position bleibt. Super einfach. Lass uns einfach schnell ein Menü rausschlagen. Gehen wir also weiter und gehen zu unseren Frame-Tools. Schnapp dir den Rahmen rechts hier. Lass uns das iPhone Pro X machen. Lass es uns etwas weniger breit machen. Und solange das Kunstbrett daneben ist, oder? So lang sollte es also sein. Lasst es uns behalten. Geh rosa. Wir können unseren kleinen Kleinen machen. Lass es uns klein machen. Schnappen Sie sich unseren Text hier legen Sie ihn hier in diesen neuen Rahmen. Ich nenne es einfach, um es als Menüschublade zu benennen . Ich werde es nur verschieben, um sicherzustellen, dass mein Text darin enthalten ist. Und das haben wir schon gemacht. Mach weiter und Triple-Klick Ärger Glick, geh in die Tafel mit der Titelleiste, Triple-Click, Triple-Click. Prototyp, ziehe ihn in dein Menü. Sie werden dies bereits beim Tippen angegangen, navigieren Sie nicht zum offenen Overlay. Und lasst uns weitermachen und es von links oben machen. Geschlossen und nach draußen klicken. Wir können an dieser Stelle 50% machen, wenn wir wollen. Denken Sie an die Animation hier, wir wollen einziehen, nicht von links, sondern von rechts. Wir spielen hier in einer Sekunde damit , nur damit du es sehen kannst. Es ist also gut, dass wir das wieder machen, denn jetzt werden wir damit etwas verrückter werden. Drücken Sie Abspielen. Wir müssen die Titelleiste oben reparieren. Klicken Sie auf das Menü. Boom, Kleidung draußen. Sieht gut aus. Lasst uns hier mit der Speisekarte anlegen. Wenn wir die Menü-Animations - oder Interaktionsdetails aus dem Menü auswählen. Gehen wir nach links, gehen Sie von links ein. Jetzt lass uns wieder rübergehen. Drücke oben rechts hier. Du siehst, wie das irgendwie komisch war. Es kam ganz von rechts rein. Dann der gleiche Deal. Sie können sich das Menü und die Interaktionsdetails schnappen und Sie können mit diesem Zeug auch zu Ihrer eigenen Zeit spielen . Sie können links machen oder von oben hereinkommen. Ich würde das nie empfehlen, aber hey, was auch immer. Das ist irgendwie komisch. Immer noch Spaß. Lassen Sie uns das einfach zurücksetzen , um von rechts hereinzukommen. Und so sieht es aus. Aber es macht Spaß, mit diesen kleinen Prototyp-Details zu spielen und verschiedene Dinge auszuprobieren. Ich starte ein weiteres Video und wir machen die unteren Navigationsleisten. Wir sehen uns dort. 33. Erstelle – Iphone – Tab Bar: Alles klar, Willkommen zurück. Sie kennen die Registerkarte „ Bohr-Prototyp“ oben rechts hier drüben. Schnapp dir den Anfang. Bewegen Sie es auf die nächste, nämlich die untere Navigationsleiste oder die untere Tableiste. Und wir werden zeigen, wie wir das beheben und zusammennähen. Wir können das Tab-Leisten-System aufbauen, das wir über Gott gelernt haben , und auf dem Prototyp spielen drücken, ganz oben rechts kleine Present Button und sehen Sie es sich an. Wenn ich also scrolle, bleibt die Titelleiste im festen Mitglied, und jetzt bleibt die Tableiste unten fixiert . Lass mich 123 sagen. Wenn Sie auf Profi klicken oder auf Profil 456 tippen, gehen Sie zurück zu Home 123, Profil für V6, Tab und zurück zwischen den beiden. Okay, cool. Ziehen wir also unseren Start zurück vom Beispiel auf das Beispiel, das besagt, dass Sie das Druckdesign machen oder ich behalte es tatsächlich auf Prototype. Wählen wir hier die Zeichenfläche aus. Drücken Sie auf Play. Und sieh dir die Navigationsleisten unten oder die Tab-Leiste an, oder? Also scrollt es. Es sollte niemals scrollen, sollte immer repariert sein. Unten bleibt die Titelleiste fest oder nicht, die Tab-Leiste. Lasst uns rübergehen und das korrigieren. Gehen Sie also weiter und gehen Sie zurück zu Ihrem Design-Tab. Ich glaube, ich habe das schon gruppiert. Ja, Okay, es ist schon gruppiert. Denken Sie daran, wann wir die Titelleiste auf die obere Registerkarte Design trainieren können , indem Sie die Tableiste auf der Registerkarte Design auswählen. Machen Sie eine feste Position beim Scrollen. Aber an diesem Punkt mach den Boden, das Zentrum. Jetzt schauen wir uns unseren Prototyp an, schauen wir uns an, wie er jetzt ganz unten fixiert ist. Schon wieder. Also noch ein Mal. Feste Position, unten zentriert. Was das macht, ist es großartig, denn du kannst, du kannst eine wirklich lange haben, folge mir nicht auf diesem, aber du kannst ein wirklich langes Kunstbrett haben. Also übernehme ich das Kommando und strecke mein Kunstbrett ganz nach unten aus. Ich verschiebe die Tab-Leiste hier ganz nach unten. Und ich füge weitere Zahlen für 456 hinzu, da ich diese Tableiste als Einschränkung festgelegt habe diese Tableiste als Einschränkung um sie beim Scrollen am unteren Bildschirmrand zu beheben. Und ich habe das auf ein iPhone eingestellt, es weiß, dass Figma weiß , dass du nicht willst , dass das unten ist. Sie möchten, dass es immer auf der Ebene des Iframe fixiert wird. Ihr Gerät, Ihr Ansichtsfenster Ihres Geräts. Also scrollen CASI 456. Also sieh dir an, wie das aussieht. meiner Designdatei sieht es seltsam , weil dies unten ist. Aber ich habe diese Einschränkung hier auf der rechten Seite festgelegt. Und wenn ich zum Prototyp gehe, sehe ich die Einschränkung, indem ich sie im Entwurfsmodus nicht sehe. Es sieht so aus und im Entwurfsmodus, aber ich sehe es im Prototyp-Modus. Okay, also gehe ich ein bisschen zurück. Ich liebe diese Schrift übrigens, zu der schönen Schrift namens Bodoni. Aber essen Sie nicht kursiv Poster Schrift. So eine schöne Schrift. Du lässt das auf dich tätowieren, wenn du willst. Okay, cool. Also lasst uns diese Art Board kopieren. Ich halte Optionsklick und ziehe. Jetzt wähle ich das Menü aus. Schon wieder. Ich bin ein Triple-Click-Laufwerk Glick, Triple-Click-gesteuertes Glick. Halten Sie einfach einen Dreifachklick und bis Sie das Menü hier für zu Hause erhalten, machen Sie diese 50% Deckkraft. Ich habe Triple-Click, Triple-Click, Dreifachklick. Wenn er zu sehr dreifach klickt, könntest du nach Hause kommen. Das ist okay. Sie können dies tun, um das Home-Icon zu erhalten. Sehen Sie, wo Layer steht, machen Sie 30% Deckkraft und drücken Sie auf Ihrer Tastatur die Eingabetaste. Nimm die SMS hier. Dreifachklick, Dreifachklick, Dreifachklick. Wenn Sie diesen Text benötigen, machen Sie regelmäßig. Und was haben wir diesen Text so festgelegt? Lasst uns weitermachen und uns die Profiltexte schnappen. Klicken Sie dreifach in den Befehl Füllen C. Und lasst uns das Zuhause hier greifen, Befehl V, fügen Sie es ein. Jetzt schnappen wir uns die Profiltexte, wenn Dinge gruppiert sind, Sie können auch den Befehl halten. Ich drücke nur Command oder Control. Wenn du auf einem PC bist, bin ich auf einem Mac, es gibt dir automatisch eine tiefere Auswahl innerhalb einer Gruppe. Sie können Command gedrückt halten und dann klicken und müssen nicht dreifach klicken, dreifach klicken, schnell fahren. Sie können einfach Command, Command ausklicken. Klicken wir dreifach hinein, schnappen wir uns die Profiltexte. Machen wir es kühn. Mach es schwarz. Mach es zu 100% hier. Und dann schnapp dir auch das Icon hier. Schnapp dir den Schlag, mach ihn auch schwarz. Jetzt haben wir diesen Standardstatus hier auf der rechten Seite. Aktiver Zustand für zu Hause. Wir haben den aktiven Status für Profil und Standardstatus auch für zu Hause. Klicken wir dreifach in das Profil bis wir diese Auswahl erhalten haben. Wenn du zu tief gegangen bist, hast du dir das Symbol geschnappt. Wir wollen das nicht nur dreifach klicken. Ich habe das schon irgendwie in einem netten Abschnitt für dich zusammengefasst . Plus Prototyp. Zieh es hier rüber. Navigieren Sie einfach beim Tippen. Nichts Ausgefallenes. Instanz, perfekt. Schnapp dir das Haus. Mach das Gleiche. Nichts Ausgefallenes. Lasst uns diesen Text ändern. Lass uns 45 machen. Ich bin nur mit einem Dreifachklick in sechs Minuten. Gehen wir nun zurück in unseren Prototyp und schauen uns den Tab an. Boom, Boom, Boom. So gut. Es ist wie eine echte App. Großartig. Okay, Cool. In Ordnung, das war eine Tab-Leiste. Wir werden mit dem horizontalen Wischen fertig sein. Im nächsten Video. Wir sehen uns dort. Tschüss. 34. Erstelle – Iphone – Horizontales Wischen: Hi und willkommen zum letzten. Wir werden horizontales Wischen auf einem mobilen Gerätespeicher durchführen. Gehe wieder zu deinem Prototyp-Tab oben, hab den kleinen Anfang. Zieh es nach unten. Ich zoome hinein, halte Z gedrückt, klicke und ziehe. Halten Sie die Leertaste gedrückt. Bewegen Sie das ein bisschen nach oben. Wählen Sie diese Zeichenfläche aus und drücken Sie Play. Und hier ist wovon ich spreche. Wir werden diese Interaktion aufbauen, bei der Sie klicken, ziehen, klicken und ziehen, sich das Essen ansehen. Ein Klick und ziehe. 35. Erstelle das Iphone Mobile Date: Alles klar. Ich weiß, dass ich gesagt habe, dass das das letzte Video war, aber ich schmeiße noch eins für Bonus ein. Okay, also bauen wir die mobile Datumsauswahl aus und sehen sie uns an. Sie erneut sicher, dass wir oben rechts im Tab-Modus „Prototyp “ sind. Wenn nicht, werden Sie dieses kleine blaue Rechteck nicht sehen , das begonnen hat. Also Prototyp-Tab, schnapp dir das Ding. Verschieben wir es dorthin, wo die mobile Datumsauswahl steht. Und lasst uns weitermachen und hier die Kunsttafel auswählen . Drücken Sie auf Play. Das werden wir bauen. Also haben wir die Datumsauswahl, du klickst darauf, es geht im Vollbildmodus ganz nach oben, gleitet nach oben. Wenn Sie den Exit drücken, gleitet es oben wieder nach unten. Was hier cool ist, ist, wenn Sie wischen, werden alle Tage des Monats bis zu den Tagen des Monats oder jeden Wochentag in der Titelleiste aufgereiht bis zu den Tagen des . Dies bleibt fest und wir bekommen auch die Schaltfläche „Fertig“ auf der Unterseite. Wenn Sie die Schaltfläche „Fertig“ drücken oder wenn Sie den 1. Oktober gedrückt haben, dann gelangen Sie auf die Schaltfläche „Fertig“ zurück in Ihre ausgefüllten Datumsauswahl. Ziemlich glatte Interaktion. Lasst uns das bauen. Als Erstes müssen wir also sicherstellen, dass wir uns am Prototyp befinden, der oberen rechten Registerkarte, nicht auf der Registerkarte Design zur Registerkarte Prototyp. So können wir dieses kleine Startrechteck sehen. Schieben Sie das dahin, wo es heißt, dass Sie es tun. Gehen Sie hier wieder in den Tab Design. Okay, cool. Und dann werden wir so ziemlich genau das Kunstbrett hier kopieren. Ich halte die Leertaste gedrückt, um zum Handwerkzeug zu gelangen , bewegen Sie es einfach. Ich wähle das Kunstbrett aus, nicht die Datumsauswahl, sondern das Kunstbrett. Drücken Sie Command C. Wenn Sie auf einem PC sind, ist es Control C. Und dann Befehl V, wie in Victor. Oder wenn Sie auf einem PC sind, steuern Sie V, Lassen Sie uns die Datumsplatte, die Datumsauswahltastatur auswählen, Komponenten hier löschen, einfach den Titelleistenbereich auswählen und in Ihre Kunsttafel legen, in Ihre Kunsttafel legen, und nimm dann die Schaltfläche „Fertig“. Und denselben Deal, lege das in die Art Board. Lasst uns das ganz unten legen. Nochmals nur um sicherzustellen, dass sich diese Elemente in Ihrer Kunsttafel befinden. Schnapp dir dein Kunstbrett und bewege es, oder? Wenn sich diese also nicht mit Ihrer Kunsttafel bewegen, sich diese Elemente nicht in der Kunsttafel. Also überprüfe das einfach noch mal. Okay, was ich jetzt tun muss, ist, dass wir diese Elemente zuerst reparieren müssen . Also lasst uns weitermachen und nur die Titelleiste oben rechts hier auswählen , wo wir uns auf der Registerkarte Design befinden. Gehen Sie zu den Einschränkungen und sehen Sie, wo beim Scrollen eine feste Position angezeigt wird, tippen Sie einfach darauf, reparieren Sie es einfach. Und dann dasselbe für den unteren Teil, wo es „Fertig“ steht, wählen Sie hier die Schaltfläche Fertig und nehmen Sie beim Scrollen eine feste Position ein. Einen Knall gekauft, unterer Boom. Okay, also lasst uns das einfach schnell prototippen und loslegen. Wir möchten hier die Datumsauswahl auf der ersten Kunsttafel auswählen , gehen Sie zur Registerkarte Prototyp. Sehen Sie sich das kleine Prototyp-UI an. Lasst uns weitermachen und es auf die Kunsttafel nach rechts ziehen. Wie gut, was wir wollen, ist, dass wir keine Zwischenfälle machen wollen und es kann Animation sein, wir wollen einziehen. Wir wollen das nicht von links , von oben oder von unten nach oben. Ganz genau hier. Wir haben den Prototyp vom Fass gemacht. Wir haben uns nicht sofort auflösen oder smart animate einziehen entschieden . Von oben. Du siehst die kleine Vorschau hier also wollen wir. Und dann werde ich Triple-Click, Triple-Click, Dreifachklick ablegen, um das x hier zu bekommen, 123. Und fahren Sie fort und ziehen Sie das im Prototyp-Modus zurück zu diesem ausgewählten Datumsprototyp. Hier ist das, was wir nicht einziehen wollen. Wir wollen ausziehen und nicht nach oben, sondern unten, wir wollen genau das Gegenteil. Schauen wir uns das ganz schnell an. Schieben Sie nach oben. Drücken Sie die X-Taste. Schieben Sie nach unten. Perfekt. Jetzt, da wir die Funktion haben, legen wir die Datumsauswahl ein. Ich habe dieses Element hier rechts, das alle Monate dran hat. Auch hier ist der Schlüssel, das Schlüsselstück davon. Ich habe alle diese Abschnitte bereits gruppiert, aber wir möchten, dass alles als ein Element gruppiert wird. Und was wir dann tun werden, ist, dass wir mit der rechten Maustaste klicken, einmal mit der rechten Maustaste klicken, mit der rechten Maustaste und die Frame-Auswahl klicken. Stellen Sie einfach sicher, dass alle diese Elemente gruppiert sind. Wählen Sie es mit der rechten Maustaste auf Frame Jetzt ist das gerahmt. Ich gehe zurück, um nur sicherzustellen, dass ich hier auf der Registerkarte Design bin, nicht auf der Registerkarte „Prototyp“, also passiert nichts Funky. nun diesen Rahmen auswählen, gehen wir zur Ebenenpalette auf der linken Seite. wir einfach dieses Datum und nennen es hier drüben. Also habe ich einfach in den Rahmen doppelgeklickt. Und tippte Datumsangaben ein. Ich klicke es noch mal ab. Wählen wir nun Datumsangaben, den Rahmen und das Halten des Befehls auf der Tastatur aus. Oder wenn Sie auf einem PC sind, ist das Control. Schnapp dir das Oberteil und schiebe es ganz nach unten. Du siehst immer noch die Elemente. Diese Daten sehen Sie immer noch wie Mai, Juni, Juli. Aber lass es uns einfach rüberholen, lass uns einfach den September hier machen. Wir sollten einfach Oktober und Dezember mit dem Rahmen auswählen lassen . Wieder noch einmal. Ich mache es schnell. Halten Sie also Befehl oder Kontrolle gedrückt, wenn Sie ganz oben auf einem PC sind, wählen Sie Daten aus, stellen Sie sicher, dass Sie die Frame-Daten und nicht die gruppierten Elemente haben. Den Rahmen auf der linken Seite können Sie erkennen, weil es das kleine Fadenkreuz-Hashtag hat das kleine Fadenkreuz-Hashtag , das hier auf den Ebenen aussieht. Halten Sie Command M auf einem PC gedrückt. Zieh das nach unten. Wir haben gerade Oktober und September auf der Registerkarte Design auf der rechten Seite ausgewählt , wo wir unsere Frame-Optionen hier haben. Sehen Sie, wo es heißt Inhalt zuschneiden, schneiden Sie den Inhalt ab und klicken Sie darauf. Und jetzt siehst du nur den Bereich, in dem du den Rahmen nach unten gezogen hast. Und jetzt klickt es einfach auf den gesamten Inhalt zu diesem individuellen Frame. Wenn Sie darauf klicken, zeigt es mehr Kontaktinhalte an. Ich hole mir das Date hier. Ich ziehe es hier in mein Kunstbrett. Und ich weiß, dass es in die Art Board gegangen ist, weil es blau wurde. Wenn Sie sich nicht sicher sind, schnappen Sie sich einfach das Kunstbrett und bewegen Sie es. Stellen Sie sicher, dass das hier ist. Stellen Sie sicher, dass das Kunstbrett gut aussieht. Schauen wir uns den Prototyp ganz schnell an. Ich gehe zur oberen rechten Presse und spiele, dass sie ein Top-Geschenk sind. Drücken Sie Datum auswählen. Du siehst, dass es noch kein Scrollen gibt, oder? Wir haben die Funktion, du kannst sie schließen. Aber noch kein Scrollen zu den Terminen. Das sieht gut aus. Wählen wir hier den Datumsrahmen aus. Du kannst dich also daran erinnern, dass ich in der Art Board bin. Ich kann sehen, dass ich Datumsangaben ausgewählt habe , weil ich die Auswahl auf dem linken Ebenenhaltebefehl sehen kann . Ziehen wir es hier ganz nach oben. Genau so. Und dann unten, wir einfach sicher, dass es hier ganz oben auf den Button geht. Hier ist der Trick. Sobald wir diese Frame-Auswahl haben, wählen Sie nur die Daten aus. Gehe zum Prototyp. Und sieh, wo es heißt Überlauf, Flow Scrollen was wir wollen. Hier wird vertikal gescrollt. Mach weiter und klicke darauf. Und jetzt gehen wir zurück zu unserem Prototyp. Ich wähle das erste Kunstbrett aus. Drücken Sie Abspielen. Wir haben die Datumsauswahl nach oben. Und jetzt, wenn ich klicke und ziehe, kannst du sehen, wie alle anderen Daten ziemlich glatt erscheinen . Lassen Sie uns eine der Datumsauswahl markieren, um die Benutzeraktion abzuschließen. Ich zoome ein wenig heraus, kommandiere minus oder Control minus. Wenn Sie auf einem PC sind, kopiere ich diesen Schlüssel, diese Art Board hier, befehl C, und führe einen Befehl V aus und platziere ihn. Ich habe diese 13 schon als Element hier. Also schnappen wir uns dieses Element. Ich klicke dreimal drauf. Dreifach, dreifach Tropf, Tropf, Tropf, Tropf wird klicken, Umschalttaste C gedrückt halten Sie können sehen, dass ich nur den Kreis ausgewählt habe aber nicht die Texte 13. Also werde ich auch die Schicht halten und halte die beiden fest. Ziehen Sie es zuerst auf Oktober. Löschen Sie die drei, sollten sich von selbst zentrieren. Perfekt. Gehen wir zurück und ändern das Datum ganz oben. Also nochmal, ich werde nur eine dreifache Triple-Crew anklicken , um eine Triple -, Dreifach-, Dreifach-, Dreifachklick -, Dreifachklick- und Dreifachklick hier in den Text hier zu beweisen . Fälliger Donnerstag abgekürzt. Und nur 11012022. Auf dieser Kunsttafel hier werde ich mir ein Quadrat schnappen und hier einfach ein Quadrat machen, nur das Grau. Einfach so. Lassen Sie uns das noch einmal mindestens 45 mal 45 machen. Gib ihm einfach einen größeren Tippbereich. Lasst uns fortfahren und dieses Quadrat auswählen. Stellen Sie sicher, dass Quadrate in dieser Kunsttafel sind. Bewegen Sie die Zeichenfläche, nur um sicherzustellen, dass das Quadrat, wenn nicht, platzieren Sie es hinein, legen Sie es über das Quadrat und doppelklicken Sie darauf. Wenn Sie es nicht auswählen können, klicken Sie einfach dreifach. Und jetzt geh zum Prototyp und ziehe ihn auf die Kunsttafel. Nach rechts. Wir wollen keine Animation, wir wollen stattdessen nur. Es sollte nur sofort sein. Wir wollen, dass diese Bildlaufposition beibehalten wird. Eigentlich lasse ich es vorerst aus , damit du sehen kannst, wie das funktioniert. Gehen wir zurück in den Prototyp-Modus. Cool. Da drüben ist mein. Jetzt. Sehen Sie ohne erhaltene Bildlaufposition, sehen Sie, was passiert, wenn Sie auf diese tippen? Es ist gesprungen. Es hat nicht bewahrt, wo ich auf der Schriftrolle war. Es brachte mich nur zur nächsten Kunsttafel und zeigte der Kunsttafel , dass sie diese Schriftrolle nicht bewahrt hat. Lass uns zurückgehen. Schnappen wir uns noch einmal unser Quadrat. Gehe in die Interaktionsdetails ein. Und jetzt behalten wir die Bildlaufposition bei. Ich wähle das Start-Kunstbrett aus. Drücken Sie Abspielen. Jetzt sieh zu. Ich scrolle nur ein bisschen nach unten, genau dort, wo sich das Quadrat über der Schaltfläche „Fertig“ befindet. Tippen Sie darauf und sehen Sie, wie es mich nicht herumgesprungen hat. In der Schriftrolle erhalten, wo ich war . Das macht dieses Kontrollkästchen. Überwichtig. Ziemlich viel. Wir sind fast fertig. Gehen wir zurück zu unserer Designdatei. Wählen wir dieses Quadrat aus. Machen wir weiter und machen die Pass-Through-Ebene hier 0% Deckkraft. Alles klar, los geht's. Entschuldige dich für die Sirenen. Es muss jemand geben, der etwas außerhalb meines Hauses tut. Ich glaube, sie sind jetzt gut. Okay, cool. Also lasst uns weitermachen und sicherstellen, dass Sie sehen können, was passiert ist, was wir gerade getan haben. Wir haben dieses Quadrat ausgewählt und es gerade so gemacht, wie man einen Hotspot nennt. Man kann es auf dem Prototyp nicht sehen. Aber wir haben es dort geschafft, wo es sich um transparente Hotspots handelt. Hotspot, das heißt, es ist Interaktion, es ist interaktierbar. Und wenn der Benutzer darauf tippt, wird es Sie in den ausgewählten Zustand bringen. Lasst uns fortfahren und das erste Kunstbrett mit dem Datum auswählen . Geh weiter und befehle C das und füge es nach rechts ein. Füllen wir nun die Daten hier aus. Also haben wir zehn. Wir haben 12022. Und da dies ein aktiver Zustand ist, lassen Sie uns die Texte schwarz machen. Da gehst du. Okay, cool. Also müssen wir nur sagen, dass hier die Schaltfläche Fertig auswählen. Auf der Prototyp-Mischung befinden Sie sich auf der Registerkarte Prototyp. Wählen Sie die Schaltfläche Fertig ziehen Sie den Prototyp hier auf die nächste Artboard. Was wir wollen, ist ein Aus- und Abstieg. Und dann dasselbe für diesen „Fertig“ -Button. Was wir wollen, ist, es hier wieder in den Standardstatus zu versetzen. Und mach das hier. Geh raus und runter. Dann ändern wir nun diesen Text in den ausgewählten Text, der 10132022 lauten würde. Und lass uns das auch schwarz machen. Das ist eine ziemlich vollständige Datumsauswahl hier, lass es uns testen. Unterdrückt das Spiel ganz oben rechts. Hier ist dein Date, 1013. Ich könnte es hier sehen, wenn ich auf „ Fertig“ drücke und sagte, geh runter, rutsch raus. Ich drücke X so eine Rutsche heraus. Und dann sieh zu, ob wir alle Daten scrollen, sind da. Ich wähle den 1. Oktober aus. Ich sehe das aktualisierte am besten Donnerstag, 101. Drücken Sie auf Fertig. Und jetzt bin ich wieder bei der Datumsauswahl und es wird das Datum aktualisiert, das ich ausgewählt habe. Großartig. Hoffentlich funktioniert deins so. Wenn nicht, habe ich es immer als Beispiel oben. Sie können also immer auseinandernehmen, was ich bereits getan habe und sehen, ob Ihre anders ist , und dann diese Änderungen vornehmen. Das stimmt also mit dem überein , was du tust. Und das sollte die letzte Klasse sein. Wir sehen uns auf Danke. Video. Tschüss. 36. Vielen Dank: Okay, wenn du dir diesen Kurs ansiehst, bist du großartig. Das heißt, du hast es geschafft. Du warst bis zum Ende. Nochmals möchte ich mich nur für den Unterricht bedanken. Ich hoffe, du hast viel Wert daraus. Ich hoffe, es hat Ihnen geholfen, Ihnen ein Verständnis von Designmustern zu vermitteln und ob Sie gerade erst anfangen zu entwerfen oder qualifizierter Saisonveteran sind. Ich hoffe, das hat Ihnen einen gewissen Wert gegeben und hilft Ihnen, Sie zu verbessern und Muster zu entwerfen. Und auch alles, was du in Figma gebaut hast, hoffe, du hast dort ein paar Tipps und Tricks. Und noch einmal, was du baust, bist du fertig? Sie können Ihre Arbeit mit der Klasse teilen. Wir würden es gerne sehen. Poste es einfach. Ja, hier auf Skillshare geschrieben und einen Kommentar schreiben und wir würden uns freuen zu sehen, was Sie sich ausgedacht haben. Schon wieder. Ich möchte mich nur bedanken und ich schätze dich sehr dafür, dass du an meinem Unterricht teilgenommen hast. Es bedeutet mir sehr viel und ich wünsche dir viel Spaß, viele coole und wertvolle Dinge zu entwerfen viele coole und wertvolle Dinge