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