Erstellen eines SaaS-Dashboards in Figma: Eine vollständige Masterclass für UI-Design-Projekte

1. Willkommen zur Figma SaaS Dashboard Masterclass!: Willkommen zum Figma Project SAS Dashboard-Kurs. Wenn Sie bereits einige Grundlagen von Figma gelernt haben und sehen möchten, wie professionelle UI-Designer reale Projekte herangehen, dann ist dies der richtige Kurs für Hallo. Mein Name ist Ahmal Hasan und ich bin ein UIUX-Designer mit mehr als vier Jahren Erfahrung in der Gestaltung digitaler Erlebnisse und Produkte, Webanwendungen Und in diesem Kurs führe ich Sie von Grund auf durch den exakt gleichen Prozess der Erstellung eines modernen SAS-Dashboards Wie theoretische Kurse ist auch dieser Kurs vollständig projektbasiert. Wir nehmen ein Design-Briefing und verwandeln es mithilfe eines sehr professionellen Workflows in eine vollständig professionell gestaltete Benutzeroberfläche des ASAS-Dashboards Wir beginnen mit der Planung des Projekts, Verständnis der Benutzerbedürfnisse, Erstellung einiger grundlegender Layouts und Skizzen sowie der Festlegung einer Entwurfsrichtung Dann werden wir das Dashboard Stück für Stück entwerfen , von der Navigation und den Überschriften bis hin zu den Karten und Aktivitätsfenstern sowie verschiedenen Schaltflächen und Datenvisualisierungen Dabei lernen Sie, wie Sie wiederverwendbare Komponenten erstellen, visuelle Konsistenz herstellen und Ihre Arbeit effizient organisieren Wir werden uns auch mit Prototyping, Mikrointeraktionen und Animationen befassen Dinge, die dein Design wirklich zum Leben erwecken, es realistischer und interaktiver machen interaktiver Am Ende dieses Kurses werden Sie eine komplette SAS-Dashboard-Oberfläche entworfen haben , die ein wertvoller Bestandteil Ihres Portfolios werden kann und Ihnen gleichzeitig praktische Erfahrungen mit einem gemeinsamen Designprojekt vermittelt. Lassen Sie uns also mit dem Bauen beginnen. 2. Grundlegendes zur SaaS-Dashboard-Übersicht: Hallo und willkommen zu einer der ersten Lektionen dieses Kurses, in der wir ein SaaS-Dashboard oder ein Software-as-a-Service-Dashboard entwerfen werden ein SaaS-Dashboard oder ein Software-as-a-Service-Dashboard entwerfen . In dieser ersten Einführungsstunde werden wir also besprechen, was wir im Rahmen dieses Projektkurses entwickeln werden. Und genau das ist es. Wir haben einen Kurs, in dem wir gemeinsam ein Projekt aufbauen, und ich zeige Ihnen Schritt für Schritt, wie wir das angehen können. Es ist sehr wichtig zu verstehen was wir bauen oder was wir entwerfen. Wir entwerfen es für und welche Funktionen es benötigt. Lassen Sie uns sie sehr schnell durchgehen. Dies ist im Grunde unser Projektbrief. Das ist etwas, das viel umfangreicher sein könnte, aber ich halte es für die Zwecke dieses Kurses sehr minimal für die Zwecke dieses Kurses Eine sehr einfache Frage ist, was entwerfen wir? Dies ist ein fiktives Projekt, aber wir entwerfen im Grunde genommen eine Projektmanagement-Software als Service-Dashboard namens Flow Desk für kleine kreative Teams Es ist ein Dashboard, das wir Mitarbeitern in verschiedenen Teams und Unternehmen anbieten , auf das die Projektmanager verwalten können zugreifen und ihre Projekte, ihre Teams usw. Das bringt uns zur nächsten Frage: Für wen ist es genau? Wer ist unsere Zielgruppe und wer ist unsere Nutzerbasis? Die Antwort ist, dass der Hauptbenutzer ein Projektmanager ist, der schnell den Projektfortschritt und überfällige Tickets einsehen muss Termine und Teamaktivität. Sie müssen also alles in Schach halten. Dies ist nicht für bestimmte Teammitglieder. Das ist nicht für das obere Management, den Chef Ihres Chefs. Das ist ausschließlich für den Projektmanager. Sie müssen also bestimmte Daten im Hinterkopf haben, und jetzt kommen wir zu den erforderlichen Funktionen. Was in diesem Prototyp enthalten sein muss , um ausreichend zu sein. Dies entspricht unserer Meinung und es muss nicht alles sein , sondern nur einige Dinge, Funktionen, die möglicherweise benötigt werden. Der Projektmanager sollte also in der Lage sein , den Status aktiver Projekte zu überprüfen. Also nicht vergangene Projekte, sondern diejenigen, die gerade aktiv sind. Und dann schnell wichtige Zahlen oder Statistiken sehen, müssen sie verstehen, wie lange jedes Teammitglied pro Ticket braucht. Wie lange dauert es, bis jedes Projekt abgeschlossen ist? Wie viele Projekte sind geöffnet, wie viele sind geschlossen? Wie hoch ist die Effizienz? Sie müssen diese Dinge verstehen. Dann sollten sie in der Lage sein, überfällige und dringende Aufgaben zu finden überfällige und dringende Aufgaben Sie sollten hervorgehoben werden. Was ist heute oder morgen fällig? Sie sollten in der Lage sein, die Teamarbeit zu überprüfen und die Arbeitsbelastung des Teams neu zu organisieren , sodass kein Teammitglied zu viel oder zu wenig zu tun hat Navigieren Sie dann natürlich zu Projekten, Aufgaben, Berichten und Einstellungen Dies sind nur einige grundlegende Bausteine, über die sie verfügen sollten. Nur um Ihnen eine sehr schnelle Vorstellung davon zu geben, worauf ich hinauswill ist wirklich etwas Ähnliches wie diese. Das sind die Dashboards Das sind sehr komplexe Setups. Sie sind nicht wirklich einfach, das wird eine Herausforderung sein, und sie bestehen aus vielen Elementen Es gibt viele Statistiken, einschließlich Grafiken, die Ihnen sagen, dass das Projekt nicht weiterläuft und die Überprüfung abgeschlossen ist , und dann gibt es Ihnen die wöchentliche Aufgabenauslastung Ihnen zeigt, wie viele laufende Aufgaben es gibt, und dann gibt es auch einige Zahlen, Gesamtzahl der abgeschlossenen Aufgaben, Gesamtzahl der Aufgaben pro Kunde und so weiter. Darüber hinaus gibt es noch einige zusätzliche Schaltflächen wie Aktivität. Sie haben Benachrichtigungen, Chats, Verlauf und Sie haben dieses Seitenmenü, in dem Sie viele verschiedene Optionen und Seiten haben. Ich denke, es zeigt dir hier die Wachstumsstatistiken, aber das könnte auch ein Dashboard sein. Dann haben Sie Projekte, Arbeitszeittabellen, Automatisierung, Integration Sie werden all diese verschiedenen Optionen prototypisieren müssen diese verschiedenen Es muss nicht so kompliziert sein. Aber der Hauptpunkt ist , dass es einen sehr guten Überblick darüber geben sollte , was vor sich geht, und wir werden nicht jede Seite bearbeiten. Wir werden einfach das Dashboard selbst erstellen. Hier ist ein weiteres Beispiel mit besserer Qualität. Aber es ist das gleiche Prinzip. Sie haben dieses Seitenmenü. Sie haben Ihre Einstellungen, Abmeldeaufgaben, Projekte und so weiter. Dann hast du hier einen etwas einfacheren Überblick. Dieses Dashboard sagt dir, okay, hier sind die Aufgaben , die du gerade hast , oder die Hauptaufgaben. Hier ist das monatliche Ziel. Hier sind die Projektstatistiken. Sie können sich für 12 Monate, 30 Tage usw. eine Projektzusammenfassung und einen Projektüberblick ansehen. Es hängt wirklich davon ab, was Ihrer Meinung nach für den Benutzer wichtig ist. Das werden wir in den nächsten Lektionen tun, wo wir skizzieren , Prototypen erstellen und Ideen entwickeln werden Das bedeutet, zu verstehen und herauszufinden, was das Problem ist und wie unsere Lösung am besten aussehen sollte Welche Daten sollten wir unseren Nutzern grundsätzlich zeigen? Darüber werden wir in der nächsten Lektion sprechen. Danke fürs Zuhören. Wir sehen uns in der nächsten Lektion. 3. Skizzieren des Dashboard-Layouts: Jetzt haben wir also eine grobe Vorstellung davon, was wir erstellen wollen, und jetzt müssen wir es durch Skizzieren ein wenig eingrenzen durch Skizzieren ein wenig Jetzt verwende ich Fig Jam, das ich gerade für diesen Brief verwendet habe, und es ist sehr einfach Wir können entweder das Zeichenstift-Werkzeug verwenden und versuchen, etwas damit zu erstellen, oder wir können auch einige dieser Formen verwenden. Ich werde hier und da einige Formen verwenden, nur um es einfacher zu machen, und dann ein wenig mit den Stiften herumspielen. Hier haben wir unseren Rahmen. Das wird unser erster Bildschirm sein. Und um ehrlich zu sein, glaube ich nicht, dass wir so weit gehen können, etwas völlig anderes als das normale Dashboard zu erstellen . Es ist völlig normal und in Ordnung, das allgemeine Layout zu kopieren. Vor diesem Hintergrund denke ich, dass wir hier im Grunde genommen sehr sicher einen Bereich für unseren Login einrichten können. Wir können hier ein paar Kreise haben, damit du dein Konto oder etwas Ähnliches haben kannst. Sie können Ihre Benachrichtigungen und den Verlauf haben , einige Einstellungen wie diese. Ich würde vielleicht auch hier eine Suche platzieren. Ich würde hier eine Suchfunktion platzieren und dann hätten wir hier unser Seitenmenü, aber es wäre zusammengeklappt. Ich möchte eine Version erstellen, in der sie ausgeblendet ist, und wenn Sie mit der Maus darauf zeigen, wird sie nach rechts verschoben Hier haben wir ein paar Icons. Also werde ich hier einfach ein paar Quadrate zeichnen. Das ist dein Seitenmenü und vielleicht hast du deine Einstellungen hier. Und ja, wenn man einfach mit der Maus drüber fährt, würde es sich erweitern. Dann hätten wir unser Dashboard. Dies würde es uns ermöglichen, hier im Dashboard viel mehr Platz zu haben . ehrlich zu sein, habe ich mir überlegt, was cool wäre und ich denke dabei vielleicht an Spotify. Spotify hat ein sehr schönes Fensterdesign, es ist ein Fenster. Es gibt verschiedene Abschnitte und so. Ich versuche etwas Ähnliches zu erstellen. Ich denke, wir könnten hier einen Abschnitt haben und dieser Abschnitt würde im Grunde mehrere Tickets haben. Es würde Ihnen also im Grunde die dringendsten oder neuesten, die neuesten Tickets oder so etwas in der Art zeigen Ihnen also im Grunde die dringendsten oder neuesten, die neuesten . Übrigens, wir können das kommentieren, es wäre toll, wenn wir nur dringende Tickets sagen und dann vielleicht darunter neuesten Tickets stehen würden Nur damit sie einen klaren Überblick darüber haben , was kommt, was dringend ist und was heute getan werden muss Und dann, wie wir hier erwähnt haben, hätten wir ein Profil oder schreiben wir es so: Verlauf, Benachrichtigungen , Profil, und zuerst haben wir hier die richtige Suche. Und dann hier, zusammenklappbare Seite. Jetzt haben wir also den allgemeinen Aufbau, und das sind quasi die seitlichen Randbereiche, aber jetzt müssen wir über die eigentliche Butter und das Brot dieser ganzen Operation sprechen , nämlich diese kleinen Tickets, diese kleinen Abschnitte Und sie haben fast immer den gleichen Aufbau. Wissen Sie, Sie haben diese Abschnitte, die umrissen sind oder sie sind farbig markiert, ausgefüllt, und dann haben Sie einige Informationen. Und es werden immer Farbsymbole verwendet , um anzuzeigen, wissen Sie, hier haben Sie Dringlichkeit oder vielleicht aktualisierte, Sie wissen schon, Zeit, und hier haben Sie Anzeichen von, wie abnehmend, , abnehmend, steigend und so weiter Wir werden also noch nicht dazu kommen, aber ich denke, was wir haben könnten, könnten wir ein sehr großes Fenster oder einen Abschnitt haben, und dieser Abschnitt würde uns ein Verständnis mit Grafiken bestimmter Dinge vermitteln . Also, um dir die abgeschlossenen Aufgaben und welche Aufgaben auch immer zu zeigen. Hier werde ich das kommentieren und Statistiken über erledigte, überfällige Aufgaben usw. angeben Und dann denke ich wir könnten hier entweder ein paar Zahlen haben, also wir könnten eine Zahl haben, Ups, und dann eine Erklärung, eine Zahl, Erklärung, ähnlich wie Aber anstatt sechs verschiedene Dinge zu tun, möchte ich drei machen, oder wir könnten ein Kreisdiagramm, wissen Sie, ein Kreisdiagramm oder so etwas machen ein Kreisdiagramm, wissen Sie, ein Kreisdiagramm , um zu zeigen, was vor sich geht Aber das ist der erste Abschnitt, und dann möchte ich im Grunde genommen einen Schnitt machen oder das differenzieren. Dann hätte ich gerne mehrere Abschnitte , die die Dinge detaillierter zeigen. Dann könnten wir ein Diagramm hinzufügen, vielleicht so etwas, und okay, wir haben also ein Diagramm, und wir hätten gerne mehr Informationen über die Teammitglieder. Ich denke, das wäre wirklich gut. Und vielleicht ist so etwas wie dieses Balkendiagramm auch ziemlich nett, weil es dir mehr Überblick gibt. Es könnte dir also verschiedene Leute zeigen und was sie tun und so weiter. Und ja, lass uns sehen. Also das ist nur eine Idee, aber ich glaube, ich hätte gerne ein paar mehr Abschnitte. Also ich bin mir nicht sicher, was sie sein würden, aber sie werden hier abgeschnitten. Und ja. Ich bin mir immer noch nicht sicher, mit welcher Art von Grid ich arbeiten möchte , aber ich denke, ich möchte es mit diesen Bento-Boxen flexibel halten mit diesen Bento-Boxen flexibel Wie Sie hier sehen können, ist es sehr gerade. Also, du hast dieses Raster so und so. Aber hier ist es anders. Es ist auf unterschiedliche Weise zerschnitten. Hier haben Sie also diese eine Karte, die zwei Felder einnimmt , und hier nimmt jede ein Feld ein, und hier haben Sie vier verschiedene Karten. Es ist eine andere Sache, aber wir werden damit herumspielen und sehen, was dabei herauskommt. Aber wie gesagt, wie ich bereits erwähnt habe, wir erfinden nichts neu. Wir erfinden das Rad nicht neu. Das ist so ziemlich dasselbe, aber wir versuchen nur zu verstehen , wie wir es anders machen wollen Manchmal sind kleine Details wichtig, wo Sie die Suche platzieren möchten, wo Sie das Profil platzieren möchten oder die Tatsache, dass wir eine dringende Sache mit dem Ticketschalter haben. Vielleicht möchte ich sogar etwas in den unteren Bereich schreiben, das Ihnen eine Fokusaufgabe gibt, oder vielleicht lassen Sie mich einfach sehen, was ich hier tun kann. Versuche diese zu löschen. Also vielleicht gehe ich hier, genau wie bei Spotify, davon ab. Wir könnten hier etwas fokussieren und vielleicht hätten wir eine Art Pomodoro-Situation, Gegen-Pomodoro oder Fokusaufgabe Sie würden also im Grunde sagen: Okay, ich bin Projektmanager Ich verwalte alles gleichzeitig, und das ist eine Menge, aber ich möchte etwas haben, auf das ich mich konzentrieren kann , um mich auf eine Aufgabe nach der anderen zu konzentrieren. Weil es sehr leicht ist, sich in der Sauce zu verlieren, besonders wenn so viele verschiedene Dinge vor sich gehen. Wenn Sie also etwas hier unten behalten, können Sie vielleicht, wissen Sie, konzentriert bleiben. Also ja, das ist unser Sketch. Es ist sehr einfach und primitiv, aber genau das wollen wir. Wir erfinden noch nichts. Wir versuchen nur, ein Gefühl dafür zu bekommen. Wir sehen uns also in der nächsten Lektion. 4. Einrichten von Rahmen, Rastern und Entwurfsrichtung: In dieser Lektion werden wir also sehr schnell versuchen, die Richtung unseres Entwurfs zu bestimmen und den ersten Rahmen zu erstellen. Außerdem werden wir vielleicht einige Richtlinien, einige Raster und alles andere aufstellen, um uns wirklich dabei zu helfen, eine Grundlage für das Layout zu Also das Wichtigste zuerst, ich habe bereits einige Kleinigkeiten vorbereitet Eines davon ist nur ein sehr simples, nicht sehr ausgefeiltes Logo ein F und das D zeigt. Es ist sehr einfach, aber es ist im Grunde wie Flow Desk Und ja, es ist im Grunde so geschrieben. Also das wird mehr oder weniger unser Lokum sein. Wir können es nachbessern, kein Problem. Und dann haben wir hier unsere Farben. Wir haben also unsere Primärfarbe, diese Art von Dunkelblau gemischt mit diesem Dunkelgrau. Dann haben wir diese anderen Farben, Akzente, die wir verwenden können. Wir haben sowohl dieses orangefarbene Gelb als auch dieses Rosa. Dies sind nur einige Grundfarben , die ich vorerst verwenden möchte, aber wir können nach und nach daran arbeiten, aber nur um ein bisschen Grundierung zu haben Wie Sie sehen können, möchte ich Sie nur wissen lassen, da es sich um ein fiktives Projekt handelt, das wir innerhalb der nächsten 2 Stunden mehr oder weniger schnell ausführen Die Einrichtung hier ist sehr einfach Aber wenn Sie tatsächlich eine solche Website, ein Programm oder ein solches Dashboard entwerfen würden, bräuchten Sie viel mehr als das Das ist sehr einfach, es nur so zu machen, weil wir weitermachen und es erweitern werden und es wird vorerst ein sehr kleines Projekt sein. Für die Typografie, wie auch für die Schrift, haben wir Geist als Schrift, eine sehr einfache Schrift, die sehr flexibel verwendet werden kann Das ist unsere Designrichtung sehr allgemein formuliert, es handelt sich also um ein sehr vereinfachtes Stylesheet das wir nebenbei verwenden können Lassen Sie uns nun weitermachen und unsere Rahmen erstellen. Sie gehen zu Ihrem Frame-Tool und wir wählen Desktop und wir wählen Mac Pro 16 Zoll. Also einfach so haben wir diesen Rahmen erstellt, und das ist der Rahmen , an dem wir hauptsächlich arbeiten werden. Lassen Sie uns jetzt weitermachen und einige Raster einrichten. Nun, ich persönlich bin kein großer Fan von ihnen, aber sie können am Anfang sehr hilfreich sein , wenn man einen netten kleinen Leitfaden hat Also hier gehen wir zur Layoutanleitung und fügen Spalten hinzu. Ich hätte gerne ein paar Spalten. Und wir werden sagen, lass uns vier haben. Ich will nicht mehr als vier Karten, und ich werde vorerst einen Rand hinzufügen, und dann ist die Dachrinne jetzt okay Das ist unser sehr allgemeines Layout. Denken Sie einfach daran, dass wir hier links rechts haben werden, ich werde es nur ausmalen. Wir werden unsere Seitenleiste irgendwo hier haben. Okay. Und gleichzeitig werden wir links auf der rechten Seite haben, wir werden, du weißt schon, Tickets haben, also dringende Tickets und so weiter. Also behalte das im Hinterkopf. Aber um ehrlich zu sein, möchte ich unser Design so gestalten und dann etwas später den Abschnitt „ Diesen Kommentar hinzufügen “ hinzufügen. Also ja, auf diese Weise können wir uns auf den Inhalt in der Mitte konzentrieren und dann etwas später unsere kleine Kommentar - oder Aufgabenfunktion auf der rechten Seite hinzufügen . Okay? Also werde ich sie vorerst einfach löschen. So sieht der allgemeine Aufbau jetzt aus, und wir werden weitermachen und in den nächsten Lektionen darauf aufbauen. Wir sehen uns in den nächsten Lektionen. 5. Erstellen der Sidebar-Navigation: Lassen Sie uns nun hier unseren Header-Bereich erstellen, der alle Elemente enthält, die wir in unserer Skizze hatten. Diese bestehen aus dem Suchverlauf, den Benachrichtigungen und dem Profil Wir werden das also nicht zu sehr komplizieren, sondern wir werden es einfach sehr einfach erstellen Um nun die Verlaufsbenachrichtigungen zu erstellen, werde ich mit diesen beginnen Und um das zu tun, möchte ich einige Schaltflächen erstellen. Also werde ich nur eine Komponente erstellen und hier A schreiben. Ich werde daraus eine tolle Schrift machen. Okay, Schrift Awesome Seven. Sie wissen nicht, dass dies eine Schrift ist, die Symbole erzeugt. Hier haben wir zum Beispiel Benachrichtigungssymbole. Das ist eine Glocke. Wir geben einfach Glocke ein und dann haben wir es genau da. Wir machen das vielleicht in der Größe 20, und wir halten Shift und A gedrückt, um daraus ein automatisches Layout zu machen, und wir werden sicherstellen, dass Breite und Höhe gleich sind, und dann sperren wir einfach das Seitenverhältnis. Also hier haben wir es. Das ist die Schrift. Ich werde es zentrieren und das nenne ich einen Knopf. Oder Icon-Schaltfläche. Dann werden wir es im Grunde zu einer Komponente machen. Da haben wir es, und wir werden es auffüllen. Geben wir dem eine Farbe. Wir machen es so normal. Und wir geben ihm ein paar gebräunte Ecken. Also vielleicht sind acht genug. Also hier haben wir unseren Icon-Button. Also werde ich es hinzufügen, es hier einfügen, und hier haben wir diese Glocke. Okay? Und dann können wir das kopieren und dann können wir die Verlaufsschaltflächen erstellen und schauen ob wir den Verlauf abrufen oder wiederholen können oder so. Also gehen wir auf die Website Font Awesome und können genau das finden, was wir wollen, nämlich die Uhr nach links drehen. Also werden wir es einfach hier einfügen. Und wir sehen, dass es auf Solid nicht verfügbar ist. Damit wir es schaffen, gehen wir einfach zurück. Wir machen das alles , einen Feststoff. Jetzt haben wir diese beiden und wir können sie vergrößern, wir können einige Dinge ändern, wir können stattdessen 24 daraus machen. Jetzt haben wir diese Buttons hier drüben und dann brauchen wir eine Suche. Ich werde hier einen Rahmen erstellen und ihm einen gewissen Radius geben und ihn so gestalten. Dann füge ich einfach etwas Text hinein und sage Suchen. Ich werde hier tatsächlich ein ziemlich praktisches Symbol haben und dann tatsächlich Text hinzufügen. Ich werde mich für beide entscheiden. Und da haben wir's. Ich werde nur sichergehen, dass es dunkel genug ist , um lesbar zu sein. Dann kann ich das Ganze zu einem automatischen Layout machen und es ein wenig erweitern , am Ende haben wir natürlich das Bild. Für das Bild können wir einfach weitermachen und auf Pexels nach einem beliebigen Bild von einem Menschen suchen Junge, Frau ist nicht wirklich wichtig. Lass uns weitermachen und einfach eine beliebige Person hier auswählen. Ich brauche nur eine schöne Aufnahme von ihrem Gesicht. Kopiere es, füge es und ich werde einen Kreis erstellen und ich werde einfach die Füllung kopieren, sie hier einfügen, dann werde ich sie zuschneiden damit ich sein Gesicht hier ein wenig zentrieren kann. Ich denke, das ist gut genug. Wir können ihm Grenzen geben, wenn du willst, nur um sicherzugehen, dass es bemerkt wird oder so. Was wir jetzt tun werden, ist, all diese zu halten und sie in ein automatisches Layout zu bringen. Mal sehen, wie das jetzt aussieht. Ich finde die Größe okay. Wir können weitermachen und es sogar etwas kleiner machen. Lass mich sehen, wie das auf einem MacBook aussehen würde. Okay. Wenn ich es mir jetzt auf einem MacBook ansehe, ist es gar nicht so groß. Es ist ziemlich okay. Also ja, damit können wir weitermachen. Was wir jetzt auch einbeziehen müssen, sind unsere Logos. Ich werde das einfach kopieren. Ich werde es hier einfügen. Ich werde einfach zurückgehen. Stellen Sie sicher, dass alles hier enthalten ist. Kopiere es, füge es hier ein. Und dann werde ich mit K die Größe ändern. K passt die Größe von allem auf nette Weise an, sodass nichts aus den Proportionen gerät. Das ist also ziemlich gut Und dann werde ich es hier hinzufügen. Und was ich tun werde, ist all das in einem Bild zusammenzufassen. Also wieder ein automatisches Layout mit Shift und A, und jetzt ist alles vorbei. Was ich tun werde, ist, das bis zum Ende auszudehnen, und ich werde es 36 oder vielleicht 24 geben. Ich werde es auch füllen nur um sagen zu können, wohin es geht. Und ich werde es von rechts und links etwas aufpolstern Hier ist, was nett ist. Ich werde diese wieder wählen. Ich werde sie hervorheben. Ich werde ein automatisches Layout innerhalb eines automatischen Layouts erstellen, aber ich gebe vielleicht ein Maximum, wenn wir möchten. Wenn Sie möchten, können Sie ihm ein Maximum geben und es zentrieren. Und auf diese Weise würde es hier in der Mitte bleiben. Also selbst wenn der Bildschirm wirklich breit ist, bleibt er immer noch bis hier. Es wird nicht viel darüber hinausgehen. Aber das brauchen wir meiner Meinung nach nicht an sich. Also lassen wir es einfach so und wir nehmen die Füllung und machen sie weiß. Und ja, einfach so, wir haben einen schönen kleinen Header. Natürlich können wir ihn erweitern. Wir können weitere Dinge hinzufügen. Aber im Moment scheint es ziemlich okay zu sein. Wir können natürlich die kleinen Dinge wie den Abstand anstelle von 22 bearbeiten , es könnten 24 sein, und das ist so ziemlich alles. In der nächsten Lektion werden wir versuchen, die Seitenleiste oder das Seitenmenü zu erstellen . 6. Entwerfen der Kopfzeile und des Suchbereichs: Seit der letzten Lektion habe ich dieses kleine Ding aus einem UI-Kit hinzugefügt , nur um es realistischer aussehen zu lassen. Also einfach so, weißt du, vor allem mit dieser Notch. Also, jetzt sieht es so aus, als wären wir tatsächlich auf einer Website. Auf diese Weise können wir besser erkennen, wo sich unsere Header befinden werden und wie viel Platz sie beanspruchen werden Anstatt dass das hier oben ist, kann man sagen, oh, ich habe jetzt nicht mehr viel Platz übrig Also entweder änderst du die Größe der Kopfzeile oder du lässt sie unverändert und lebst damit, es liegt an dir Aber auf diese Weise haben wir ein besseres Verständnis für die Größe von Dingen oder Designelementen, die wir haben Aber ich denke, im Moment sieht es okay aus. In dieser Lektion werden wir das Seitenmenü entwerfen, was keine leichte Aufgabe sein wird. Okay, also behalte das bitte im Hinterkopf. Um das zu tun, möchte ich eine weitere Komponente erstellen. Also werden wir damit beginnen, diese spezifischen Schaltflächen zu erstellen . Natürlich können wir auf dieser Komponente selbst aufbauen, aber ich denke, es wäre gut, wenn wir völlig andere Komponenten herstellen könnten. Ich habe das gerade kopiert, ich habe es hier eingefügt und ich werde die Instanz trennen Anstatt eine Symbolschaltfläche zu sein, werde ich Menütaste sagen, und wir werden daraus eine eigene Komponente machen Im Grunde wollen wir eine Schaltfläche haben , die ein Symbol hat, aber auch etwas Text enthält. Lassen Sie mich diesen Text hier einfach hinzufügen. Ich habe ihn kopiert oder ausgeschnitten, eingefügt. Wir werden es horizontal machen. Und wir werden das Seitenverhältnis nicht sperren. Wir werden dafür sorgen, dass es sich umarmt. Dann werden wir diese Farbe von Auge zu Augentropfen anklicken Jetzt haben wir also einen Gegenstand. Dieser Artikel könnte sein, ich meine, momentan steht dort SFP, was die Schriftart von Apple ist , aber das wollen wir nicht Wir möchten sagen, dass dies zum Beispiel das Dashboard ist, das ist unsere Dashboard-Schaltfläche Also eine Sache, die wir tun könnten, ist, ich meine, mal sehen, wie es hier aussieht, ziemlich gut aussieht, aber vielleicht könnten wir es noch größer machen, um ehrlich zu sein. Wir könnten das Symbol ein bisschen größer machen. Das ist ein bisschen zu groß. Und wir machen die Schrift größer. Es könnten mindestens 20 sein. Oder lassen Sie uns das auf 24 zurücknehmen und auch diese 24. Und dann geben wir 616. Und ja, lass uns sehen, wie das hier aussehen würde. Ich werde es einfach hier einfügen und verschiedene Versionen erstellen. Ich werde sie alle in ein automatisches Layout einfügen. Gehen wir zurück zu unserer Website und sehen, Gehen wir zurück zu unserer Website was wir für das Dashboard hinzufügen können. Sie können es filtern und es nur kostenlos machen, und wir können sehen, was am besten zu uns passt. Das könnte zum Beispiel besser für das Dashboard sein, um ehrlich zu sein, oder? Und dann haben wir noch einige andere Punkte, die hier sind Projekte, wir haben einen Aufgabenkalender und dann haben wir Teamberichte und Einstellungen. Teamberichte. Jetzt müssen wir das linksbündig machen, und wir werden hier dasselbe tun. Da haben wir's. Jetzt ist es also für alle linksbündig ausgerichtet. Und wir müssen nur die Symbole für jedes einzelne herausfinden . Aber mal sehen, wie es jetzt aussieht. Ich meine, um ehrlich zu sein, sieht es gar nicht so schlecht aus. Vielleicht brauchen wir etwas mehr Abstand zwischen ihnen. Aber abgesehen davon finde ich, dass dies eine gute Möglichkeit ist, sie aufzulisten. Also können wir natürlich die anderen Designs überprüfen, auf denen wir das Ganze aufbauen, damit wir herkommen und sehen können, wie sie es gemacht haben Vielleicht ist ihrer etwas kleiner. Das würde ich sagen Das können wir versuchen, aber die Sache ist, dass wir nicht so viele Artikel hier haben. Also lass uns einfach zurückgehen und nachschauen, wie es aussieht. Also vielleicht können wir die Schrift etwas kleiner machen , vielleicht nein. Machen wir es also auf 20, damit wir den Abstand dann etwas verringern können. In Ordnung. Also lass uns sehen, ob wir das regelmäßig machen können. Das Problem mit den regulären Schriftarten ist , dass es bei den Schriftarten nicht immer die reguläre Option gibt, wenn Sie den kostenlosen Tarif mit diesem Symbol nutzen. Bei dieser Icon-Lösung werden wir es einfach so belassen. Ich denke, es sieht okay aus und wir müssen nur die Symbole auffüllen. Und eine wichtige Sache ist, wenn Sie das haben, müssen Sie eine weitere Variante erstellen. Bei dieser Variante muss der Text versteckt Machen Sie ihn einfach unsichtbar, verstecken Sie ihn, und dann haben Sie zwei verschiedene Versionen, Sie können sie alle speichern. Und dann kannst du die Version mit oder ohne Symbole haben , okay? Wie bereits erwähnt, möchten wir zwei verschiedene Versionen erstellen, eine, die normal ist, und eine, die zusammengebrochen wird. Das ist also sehr wichtig, um das zu erledigen. Okay? Der Weg, das zu tun, besteht also , zwei verschiedene Versionen von diesem Menü aus zu erstellen. Ich habe es noch nicht vollständig eingerichtet. Wir brauchen hier immer noch eine Schaltfläche, also fügen wir einfach eine Einstellungsschaltfläche hinzu. Aber mit der Einstellungsschaltfläche wollen wir, dass sie ziemlich weit unten ist, ich werde nur Ausrüstung schreiben und dann Einstellungen. Also wollen wir, dass es ganz unten ist. Einfach trennen. Also machen wir ein automatisches Layout daraus und die Entfernung sollte automatisch sein. Jetzt haben wir es so im Griff und stellen sicher, dass es überall verteilt ist. Und dann werden wir sicherstellen, dass der Abstand stimmt, also haben wir vielleicht 24 von hier und da, und dann sollte die Polsterung von oben und unten und links und rechts 24 sein, und jetzt sieht es normaler aus Jetzt nehmen wir das heraus und geben ihm vielleicht einen Hintergrund, und dann machen wir daraus eine Komponente und wir sagen Seitenmenü oder Seitenleiste Was man eine Seitenleiste nennt. Diese Seitenleiste wird zwei Versionen haben, die nur Symbole und keinen Text Wir werden das tun, indem wir hier alle Elemente auswählen. Jetzt müssen wir nur noch jedes dieser Elemente hier auswählen und wir werden Variante zwei hinzufügen. Wir können den Namen ändern. Wir werden dann herkommen und die ganze Sache zusammenbrechen lassen. Wir werden es zusammenbrechen lassen. Und auf diese Weise, mit unseren Symbolen, wird es so eingerichtet, dass es viel weniger Platz beansprucht. Also lass es uns sehen und testen. Ich werde das einfach hier einfügen und ich werde es dort platzieren, wo es sein sollte. Mal sehen, wie es jetzt aussieht. Bam. Siehst du? Jetzt nimmt es viel weniger Platz ein. Wir könnten noch einen Schritt weiter gehen und sogar die Polsterung verringern, um ehrlich zu sein, einfach so von rechts und links Aber wir müssen nur sichergehen, dass hier alles stimmt. Einfach umarmen und los geht's. So sieht unsere Seitenleiste im Moment aus. Natürlich muss ich die Symbole ausfüllen und einige Dinge ändern, aber so funktioniert es, und wir werden etwas später darauf aufbauen Wir werden den Mechanismus erstellen, bei dem Sie auf die Schaltfläche klicken. Das haben wir noch nicht gemacht, aber wir werden es später erstellen. Alles klar. Wir sehen uns in der nächsten Lektion. 7. Erstellen von Dashboardkarten und Statistikblöcken: Der Kartenbereich. Dies ist der Bereich , in dem wir die Karten und das eigentliche Dashboard sehen werden. Also der wahre Inhalt. Wenn wir weitermachen und anfangen, das zu entwerfen würde ich gerne einen Blick auf Spotify werfen. Ich habe dir schon einmal gesagt, dass ich gerade versuche, das diesem Design anzustreben, weil mir wirklich gefällt, wie sie es machen. Weißt du, Spotify ist ein Unternehmen, das viel Kritik an seinem Layout bekommen hat , vielleicht weil es zu komplex ist oder so Aber ich mag es wirklich. Du hast hier deinen Header, deine Suche mit deinem Profil und andere Dinge. Und es ist sehr ähnlich, weißt du. Und dann auf der linken Seite hast du hier deine Playlist. Sie haben verschiedene Dinge wie Schnellzugriff. Und das ist ihr Dashboard. Sie haben mehrere verschiedene Optionen zur Auswahl. Sie haben Schieberegler und so weiter. Und hier unten hast du deinen Spieler, der immer bei dir Und auf der rechten Seite haben Sie hier einen Abschnitt, der Ihnen mehr über den Song zeigt , den Sie sich gerade anhören, die Credits des Künstlers und so weiter. Das Tolle daran ist allerdings, dass, wenn Sie sich das mal ansehen, das kein anderer Abschnitt ist. Es sieht aus, als wäre das ein Fenster, oder? Das ist quasi ein Fenster und du schaust durch das Armaturenbrett Was Unternehmen normalerweise tun, ist, dass sie die Kopfzeile so aussehen lassen , als ob sie oben Dann hast du dieses Menü und es ist auch ganz oben. Es sind viele Dinge übereinander. Stattdessen lassen sie es so aussehen, als ob der Header mit diesem Teil verbunden ist, auch mit dem Player verbunden ist und Sie nur zwei Fenster haben. Was cool ist, ist, dass du die Größe dieser Fenster ändern kannst. Sie können sie nach rechts oder links bewegen . Und das Gleiche hier. Sie können die Größe ändern und dann können Sie die vollständigen Namen sehen oder Sie können es zurücknehmen und so weiter Das ist genau das, was ich hier anstrebe. Ich möchte so einfach und sauber und modern aussehen, dass es nicht so aussieht , als wären das alles Elemente übereinander, sondern dass es hier ein Fenster gibt, und dieses Fenster zeigt dir die Optionen, oder? Ich werde die Layoutanleitung vorerst ausblenden , damit wir sie klarer sehen können. Ich nehme das Layout hier, die Layoutanleitung, und füge es diesem Rahmen hinzu. Ich werde es ein bisschen reparieren. Also nur um dir eine Vorstellung davon zu geben , wofür wir uns entscheiden wollen. Also der Grund dafür ist dass ich will, dass der Guide, weißt du, hier ist, weil wir das Bento-Layout hier drüben machen wollen , okay? Aber lass es uns vorerst wieder verstecken. Also, wie Sie sehen können, ist es genau das, wovon ich spreche. Also haben wir hier im Grunde dieses Fenster , das uns die Karten zeigt, dieser Bereich und alles andere hier sieht ziemlich normal aus. Es sieht verbunden aus, weißt du, was wirklich glatt ist. Und später werden wir hier im Grunde auch den Kommentarbereich oder den Aufgabenbereich hinzufügen. Also ähnlich wie das Layout bei Spotify, okay? Und dann hätten wir hier den Controller oder die aktuelle Aufgabe, die wir gerade erledigen, und darauf kommen wir später zurück. Aber jetzt konzentrieren wir uns darauf. Jetzt haben wir hier also ein ziemlich ordentliches Layout. Lassen Sie uns weitermachen und sehen, was wir hier in Bezug auf die Karten tun können. Wie ich bereits erwähnt habe, werden wir also unterschiedliche Layouts für verschiedene Karten haben . Was wir jedoch tun können, ist zu versuchen, ein sehr einfaches Layout zu erstellen. Spielen Sie also mit den Größen und so weiter herum. Also im Moment sieht es so aus. Wir können damit herumspielen. Ich denke, das ist zu viel Abstand. Vielleicht können wir 24 und wir können auch die Dachrinne 24 machen. Wir können auch einige Zeilen hinzufügen. Wie Sie sehen, sieht es jetzt klarer aus, wohin die Karten kommen können. Also lass uns das hier rüberbringen. Also, wenn wir dieses Element hierher bringen, können Sie sehen, dass das eine Karte sein könnte, oder? Wir könnten aber auch eine weitere Karte hinzufügen , die viel mehr Platz beanspruchen könnte . Ich kann den Platz von zwei Karten einnehmen, oder vielleicht können beide den ganzen Platz einnehmen. Es ist also sehr flexibel , was wir brauchen und was wir zeigen müssen. Das liegt ganz bei uns, und diese ganze Sache mit diesen wird trippig So würde es aussehen, stellen Sie sicher, dass Sie das so oft ausschalten, nur damit es nicht damit herumspielt, wie Sie die Dinge sehen und Sie sehen, wie es aussieht, und es ist so, okay, das ist nicht so schlimm Aber eine Sache, die ich natürlich empfehlen würde , ist, auch mit Schatten herumzuspielen. Das tun sie oft. Es könnten in gewisser Weise sehr vereinfachte Schatten sein , oder es könnten sogar weniger sein Wie Sie sehen können, sind es ganz einfache Schatten in der Nähe, die sie wie Tickets aussehen lassen Oder wir könnten mit etwas Stärkerem arbeiten, also könnten wir die Deckkraft verringern und es verschwommener machen und dann würden wir etwas Weicheres auf den Augen bekommen Weicheres auf den Augen Das ist also eine Sache, die man beachten sollte. Ich denke, ich möchte vorerst diesen Stil verwenden, aber wir können ihn später ändern. Es liegt ganz bei uns. Okay, also lass uns gehen. Ich nehme einfach eine dieser Karten, die kleinste Version hier, und ich werde weitermachen und herumspielen , also hier haben wir das Layout. Nun, wir können das auf viele verschiedene Arten tun, aber eine Möglichkeit, wie ich es tun möchte, ist , einen Titel hinzuzufügen. Dieser Titel könnte also aktiviert oder ausgefallen sein. Es liegt ganz bei uns. Mal sehen, wie es andere gemacht haben. Normalerweise machen sie es besser. Es ist schwarz, sehr groß und lesbar und das Gleiche hier, es steht für laufende Aufgaben. Dann kannst du ein Diagramm sehen. Sie können eine Option sehen , mit der Sie es wöchentlich, täglich oder was auch immer filtern können. Also ja, das ist irgendwie das, was wir anstreben. Hier haben Sie es als Schaltflächen oder Dropdownmenü. Das ist also etwas, wofür wir uns entscheiden können. Also können wir das noch hinzufügen und wir können sagen wir können hierher zurückkehren und sehen, was wir hinzugefügt haben. Also Statistiken. Also das ist unser Text hier, und wir müssen keine Aufgabe für dich erheben. Du kannst einfach Titel sagen. Stellen Sie sicher, dass es nach links ausgerichtet ist. Es hat die richtige Schrift, die richtige Schrift, und hier steht, dass sie links und oben ausgerichtet ist, was für uns gut genug ist. Okay? Und dann können wir einige andere Optionen hinzufügen. Es könnte ein Bild sein, es könnte was auch immer sein. Aber das ist ein nettes allgemeines Layout. Mal sehen, welche anderen Informationen wir hinzufügen könnten. Ich meine, um ehrlich zu sein, wir haben kein einfaches Layout. Wir haben hier viele verschiedene Layouts. Es ist schwer zu sagen, wir werden genau das gleiche Layout verwenden, weil Sie jedes Mal eine andere Art von Grafik haben. Ich denke, das ist gut genug, um ein sehr vereinfachtes Layout zu haben Dann kannst du dein Diagramm hinzufügen, du kannst deine Zahlen hinzufügen, was auch immer es ist Und ja, okay, also was können wir hier noch tun? Nun, wir können einen Optionsbereich hinzufügen. Sie können also eine Schaltfläche mit der Aufschrift „ Hier sind Ihre Optionen“ haben. Wir werden hier einfach ein paar Kreise nebeneinander erstellen . Wir werden sie in ein automatisches Layout umwandeln. Wir werden es auch 13 hoch machen. Und wir werden die Farbe ändern, sie ein bisschen dunkler machen. Und wir werden es hier ausrichten. Aber in diesem Fall werden wir es nach rechts ausrichten . Okay? Also, wenn wir die Größe ändern , wie Sie sehen können , bleibt der Titel oben links und dieses Ding bleibt oben rechts Okay? Also hier sind Ihre zusätzlichen Optionsschaltflächen, und hier ist Ihr Titel, und hier hätten Sie Ihr Diagramm, was auch immer es sein mag. Ich werde das als Hauptkleinigkeit beibehalten , quasi wie das Original, und dann werde ich mit einigen anderen herumspielen. Jetzt haben wir darüber gesprochen, diese Aufgabenübersicht zu haben , um abgeschlossene, überfällige Aufgaben usw. anzuzeigen Lass uns das sehr schnell machen. Wir sagen Aufgabenübersicht. Dann werden wir diese Rechtecke erstellen und sie mit runden Ecken versehen und ihnen einige Farben geben Okay? Also werden wir hier die Zahlen aufschreiben. Wir werden diesen Text hinzufügen und dann werden wir diese Rechtecke hinzufügen und dann werden wir ihnen etwas Text hinzufügen, und wir werden es klein machen 12 ist die kleinste Größe, die wir normalerweise verwenden können , wenn es um Web-Apps geht also werde ich es regelmäßig machen und ich werde 42 oder so etwas Ähnliches sagen Dann mache ich daraus einen Frame oder wir können daraus ein automatisches Layout machen. Okay. Dann kopiere ich das. Dann, wie du siehst, kann ich die Größe ändern und Dinge ändern. Ich kann das machen und ich kann 24 sagen. Aber 24, welche 42, was? Ich werde noch etwas Text hinzufügen. Ich werde sagen, abgeschlossen. Das Gleiche hier. Wir können hier Text hinzufügen, Aufgaben erledigen und so weiter und so fort. Sobald wir ein paar haben, können wir sie in ein automatisches Layout umwandeln, und es ist natürlich sehr sinnvoll, die Farben zu ändern. Eine der Farben, die wir ausgewählt haben, ist dieses Rosa und eine davon ist dieses Orange. Jetzt ist es sinnvoller, sie auch zu sortieren . Welche Farbe steht für dringend? Es geht eher in Richtung Rot. Dann hast du diese Farbe, die sagt, ja, ausstehend oder wir können einfach dringend sagen und dann könnten wir sagen, ja, wir könnten sagen, wir könnten hier tun, und dann hier ist es abgeschlossen. Oder wir könnten sagen, ich meine, für erledigt oder wir können sagen, für einen von ihnen festgefahren. Das könnte also zu tun sein. Das könnte stecken bleiben. Und dann wäre das erledigt, aber dafür bräuchten wir eine grüne Farbe. Ja, es ist also schon geschrieben. Das ist eine nette Art das zu demonstrieren, aber dann haben Sie vielleicht eine Frage. Okay, nun, die Zahlen, wir haben sie noch nicht geklärt, aber Sie sagen, es gibt 24 dringende und 42 zu erledigen. Also diese dringenden, werden sie auch zu den Aufgaben gezählt oder nicht? Das ist eine gute Frage. Wir müssen uns logische Fragen stellen. Werden wir aufnehmen, dass es 42 Aufgaben gibt von denen 24 dringend sind und 24 von ihnen feststecken. Oder ist das eine ganz andere Kategorie? Oder sind diese 42 nicht dringend zu erledigen? Wissen Sie? Also das sind so, als hätten wir 42 Aufgaben, die nicht dringend sind, und dann 24 Aufgaben, die dringend sind. Insgesamt haben wir also so viele Aufgaben. Das wäre eine gute Frage. Stimmt das? Also müssen wir solche Dinge irgendwie herausfinden. Sonst wäre es nicht sinnvoll, sie als verschiedene Dinge zu zeigen, okay? Lassen Sie uns versuchen, damit herumzuspielen und sehen, wohin uns das führt. Nun, eine andere Sache, die wir tun könnten, ist all diese Dinge zu nehmen und sie nach rechts zu verschieben. Auf diese Weise, oder vielleicht auch nicht genau, oder wir können sie nach rechts und einen Weg finden, sie alle am selben Ort beginnen zu lassen sie alle am selben Ort beginnen denn jetzt, alles fängt hier an. Der Weg, dies zu tun, besteht darin, eine bestimmte Länge oder Breite festzulegen. Wir haben also eine Breite von 65 und ich gebe all diesen eine Breite von 65 und dann könnten sie alle an derselben Stelle beginnen . , das ist ein bisschen schöner Ich würde sagen, das ist ein bisschen schöner für das Auge, weil es etwas übersichtlicher Natürlich könnten Sie diese Zahlen auch ändern, es ist sinnvoller, sie hier zu platzieren, los geht's Jetzt sieht es viel schöner aus. Wir haben Sachen auf der linken Seite, Sachen auf der rechten Seite, und es ist verständlicher Also, eine Sache, die ich gerne mache, wenn ich irgendeine Art von Dashboard erstelle, wenn es etwas ist, das programmiert werden kann, ist eine bestimmte Art und Weise ein Statussymbol hinzuzufügen, sozusagen, das ist gut, sozusagen, das ist gut, das ist schlecht, weil es oft wirklich schwierig ist, es zu analysieren und zu verstehen. Wir haben so viele dringende Aufgaben und wir haben so viele festgefahrene Aufgaben, und lassen Sie uns die Zahlen ändern. Was sagt mir das dann? Das ist die Frage. Was sagt mir das auf lange Sicht? Was profitiere ich von dieser Grafik? Ich möchte Text hinzufügen, der besagt, dass Sie auf dem richtigen Weg Das ist gut, das ist positiv oder es gibt einen Anstieg, es gibt einen Rückgang. Das ist eine gute Arbeitsbelastung. Das ist eine Sache , die wir tun könnten, und wir könnten es als Abzeichen hinzufügen. Wir können das als Komponente erstellen, aber wir müssen nur verstehen wie wir es am besten hinzufügen können. Ich sage hier einfach Kategorie oder Status, und ich werde ein automatisches Layout daraus machen, ihm etwas Farbe geben, etwas Grün. Die grünen 10% und ich mache es vielleicht vier mal vier oder acht mal acht. Nun, das ist eine Komponente und sie sagt Status. Wir können es hier irgendwo hinzufügen. Für den Text werde ich ihn etwas dunkelgrün machen. Und vielleicht könnten wir eine Art Symbol oder ähnliches Objekt hinzufügen . Also würde ich diesen Kreis hier hinzufügen und ihn auch dunkelgrün machen. Vielleicht gib ihm etwas, wie einen Schatten oder einen Glanz, wenn möglich. Sieht nicht so toll aus. Es sieht nicht supertoll aus, aber ich denke, wir können versuchen, es irgendwie herauszufinden Im Grunde wollen wir sagen, dass es verschiedene Arten von Stati gibt und hier heißt es auf dem richtigen Weg Man kann als Beispiel „On Track“ sagen. Wir können hier den Abstand verringern und dann könnten wir einen weiteren hinzufügen , bei dem es heißt „Zurückfallen“. So wie das. Das können wir noch gelblicher machen. Ich kann mich darum kümmern und dann können wir eine dritte machen , die besagt, dass du deine Arbeit erledigen musst Ja, füge im Grunde einfach ein paar verschiedene Statustypen hinzu. Aber um den Wortlaut und die Farben und diese Dinge können wir uns später kümmern Aber das ist nur für den Anfang eine wirklich nette Karte für die Aufgabenübersicht Wir können einige Dinge in ein automatisches Layout umwandeln, wie zum Beispiel diese , und dann sicherstellen , dass diese Ausrichtung gleich ist. Dann mache ich einfach weiter und kopiere das hier hin. Lassen Sie uns unsere Zeilen und Spalten zurücksetzen. werde sie einfach löschen und ich werde sie gleich hier hinzufügen. Okay. Wenn wir also das Gefühl haben, dass es viel mehr Platz benötigt, können wir ihm mehr geben oder seine Größe ändern Es liegt ganz bei uns. Ich finde, das ist eine wichtige Karte. Das ist also etwas, dem wir viel mehr Platz einräumen können . Also lass uns sehen. Wir müssen das nur wirklich verkleinern. Also können wir die Größe einfach hier ändern oder wir können es ganz nach Ihren Wünschen erweitern Aber ja, lass uns versuchen, es ein wenig zu erweitern. Das sieht netter aus. Das zeigt dir die Länge, die drastischen Unterschiede viel mehr Und so würde es mehr oder weniger aussehen. Jetzt, wo ich es von hier aus betrachte, habe ich das Gefühl, dass das vielleicht etwas zu klein ist, aber das sind die Dinge, die wir immer wieder tun müssen , immer wieder überprüfen und feststellen müssen, oh, der Text hier ist zu klein. Wir müssen es größer machen, die ganze Karte vielleicht größer machen. Aber wie gesagt, das ist mehr, Teil der Perfektionierung Ihres Designs im Laufe der Zeit, und das werden wir tun Ordnung. Ich sehe die nächste Lektion. 8. Erstellen einer Filter-Dropdownliste: Willkommen zurück. Seit der letzten Lektion habe ich selbst ein paar Dinge hinzugefügt, nur um einige Lücken zu füllen, einige Details auszufüllen, einige Gartenarbeiten, die für Sie zu langweilig wären. Aber im Grunde habe ich nur diese Karten ausgefüllt , oder? Du verstehst also das Konzept. Du machst einfach ein paar Grafiken, schreibst die Monate auf und, weißt du, ich habe einfach ein paar Lücken gefüllt , wie gesagt. Jetzt haben wir also eine Aufgabenübersicht, Team-KPIs, Leistungsüberstunden, Sie wissen schon, über Monate oder Jahre oder was auch immer Und dann haben wir die Arbeitslast. Also, was wirklich interessant ist , tut mir leid, lösche das. Eine Sache, die ich auch getan habe, ist, dass ich Größe der Elemente der Dinge geändert Sie haben wahrscheinlich bemerkt , dass es den Text lesbarer macht , weil wir viel Platz haben . Warum also nicht ihn verwenden Gleichzeitig wollen wir die Leute nicht mit zu vielen Informationen, zu viel Text überfordern vielen Informationen, zu viel Text Warum also nicht einfach den Text ein bisschen größer machen. Wie Sie jetzt sehen können, sind einige Dinge grau, während andere schwarz sind , um mehr Aufmerksamkeit zu erregen. Hier willst du wissen, wie viele Aufgaben du dann hier hast, es ist immer noch sichtbar, aber es wird etwas weniger Bedeutung beigemessen. Aber am Ende des Tages, wenn jemand 24 liest, wird er danach dringende Aufgaben lesen und verstehen: Okay, 24 dringende Aufgaben und so weiter. Aber der übermäßige Gebrauch von Schwarz kann dazu führen, dass Menschen psychologisch so viele Informationen aufnehmen müssen , dass ihre Wahrnehmung beeinträchtigt wird. Versuchen Sie, das nicht zu tun Aber in dieser Lektion werden wir als Ergänzung eine Schaltfläche oder vielleicht mehrere Schaltflächen hinzufügen, eine Schaltfläche oder vielleicht mehrere Schaltflächen uns helfen , nach Zeit zu filtern Weil es im Moment unklar ist. Ist es dieser Monat, diese Woche? Dieses Jahr, ich meine, worüber sprechen wir über die Aufgabenübersicht? Worüber sprechen wir in Bezug auf Team-KPIs? Wir benötigen einen Bezugsrahmen , um vergleichen zu können Vergleichen wir das mit dem letzten Monat oder dem letzten Jahr? Das wird ganz anders sein . Die Antwort wird etwas völlig anderes sein , je nachdem, welche Frage wir stellen. Lassen Sie uns weitermachen und eine sehr einfache Schaltfläche erstellen , mit der wir die Zeit filtern können. Was wir erstellen werden, ist im Wesentlichen ein Dropdown. Wie beim Erstellen einer beliebigen Schaltfläche beginnen wir damit, ein Textelement hinzuzufügen, und wir werden hier Woche oder wöchentlich oder vielleicht, sagen wir, diese Woche schreiben . Okay? Jetzt halten wir die Umschalttaste in A gedrückt, und das ermöglicht es uns, A daraus zu machen. Es wird ein automatisches Layout daraus machen, und dann werden wir hier dieselbe Farbe für den Text wählen . Wir werden ihm dieselbe Farbe geben. Und wir werden uns das Stiftwerkzeug besorgen und diesen kleinen Pfeil erstellen. Wir geben ihm eine runde Null als Eckradius und geben ihm dieselbe Farbe. Da haben wir's. Jetzt geben wir dem ganzen Button ein bisschen Kornradius. Was ist der Kornradius, den wir hier haben. Das sind 24, also diese 16. Mal sehen, dass es nicht dasselbe sein muss. Es könnten auch acht sein. Jetzt müssen wir also eine Entscheidung treffen. Fügen wir es zunächst hier ein. Ich werde es hier einfügen. Im Moment ist es einfach weiß und wie Sie sehen können, sieht es nicht so weiß aus. Es sieht ein bisschen grau aus. Und der Grund dafür ist, dass es nicht denselben Schatten hat. Jetzt haben wir also mehrere Optionen. Entweder fügen wir diesen Schatten hier hinzu, und dann können Sie sehen, dass er quasi und dann können Sie sehen, dass er quasi eine dreidimensionale Dimension hat, und dann sieht er genauso aus, aber dann haben wir hier ein Risiko. Und das Risiko besteht darin, dass wir nicht wirklich wissen, ob , weil diese Karten und für sich nicht anklickbar sind Du kannst nicht auf die Karte selbst klicken, sondern du musst auf diese drei Punkte oder etwas anderes klicken Punkte oder etwas anderes Wenn sich darin eine Schaltfläche befindet, können Sie darauf klicken. Aber das sollte anklickbar sein und das sollte etwas übersichtlicher sein Ich persönlich würde sagen, dass es immer am besten ist, einen etwas anderen Stil zu Das könnte einen stärkeren Schatten geben. Stimmt das? Aber dann verpasst du irgendwie den Look. Was ich persönlich sagen würde, ist, vielleicht einen kleinen Umriss wie diesen hinzuzufügen, einen Strich, vielleicht sogar die Füllung komplett zu entfernen, das liegt ganz bei Ihnen. Dadurch können wir es irgendwie anders aussehen lassen, und dieses andere Aussehen kann uns helfen, es identifizierbar zu machen. Schauen wir uns also an, was wir mit dem Button machen können. Wir wollen nicht, dass der Strich viel zu dick ist, und wir wollen auch nicht, dass er viel zu stark im Hintergrund ist. So wie es jetzt ist, denke ich, ist das gut genug, würde ich sagen. Aber im Moment ist es so, dass wir hier ein sehr leeres Gebiet haben . Es ist sehr leer. Und ich finde, wir sollten es auffüllen. Der Weg, das zu tun, besteht vielleicht darin, einen Titel hinzuzufügen. Ich meine, es ist eine Frage , auf welcher Seite wir uns befinden? Okay, wir sind auf flodesk.com. welcher dieser Elemente, Dashboard-Projekte, auf welcher Seite befinden wir uns? Deshalb ist es wichtig, diesen Titel zu kopieren und einzufügen und hier einen Titel hinzuzufügen und den Leuten zu sagen, hey , wir sind gerade auf dieser Seite und es ist wichtig, dass Titel größer ist als die anderen. Wir brauchen eine gewisse Hierarchie. Also hier würde ich Dashboard sagen, richtig? Also im Moment einfach, wir halten es einfach sehr einfach und wir machen es so. Jetzt haben wir diesen Button. Es heißt, diese Woche ist das großartig. Ich würde weiter sagen, dass es noch besser wäre , wenn wir mehr Filteroptionen hinzufügen würden. Also filtern wir die Zeit. Was könnten wir auch filtern? Vielleicht ein bestimmtes Designteam? Vielleicht. Vielleicht bin ich mir nicht sicher, ob wir filtern könnten, weil ich meine, vielleicht haben Sie mehrere Teams oder mehrere Bereiche in Ihrem Team. Sie haben also das Designteam oder die Designabteilung, die Programmierabteilung und so weiter. All das könnte integriert werden, aber das ist etwas, das ich für später zurücklasse Jetzt ist meine Frage: Okay, wir haben also diese Schaltfläche , die Dinge nach Wochen oder Monaten und so weiter filtert . Sollten wir speziell für jede Karte eine machen? Weil das etwas ist , was andere Leute getan haben. Hier hast du wöchentlich. Also fortlaufende Aufgabe, du kannst sie wöchentlich filtern. Und hier haben Sie diese Projektstatistik. Sie können es eigenständig filtern, oder Sie können die täglichen Aufgaben eigenständig filtern. Und was mir auffällt, ist, dass viele von ihnen darauf angewiesen sind , die Dinge für jede Karte separat zu erledigen Aber um ehrlich zu sein, denke ich, dass die Art und Weise, wie wir es gemacht haben, sinnvoller ist, weil man dann eine Taste hat, die alles ändert , anstatt jede einzelne ändern zu müssen Was ist, wenn ich unsere Statistiken für das ganze Jahr sehen möchte? Muss ich jeden einzelnen von ihnen wechseln ? Das ergibt keinen Sinn. Aber ich werde es jetzt ändern und dieses Jahr sagen, okay? Ich werde es nach rechts ausrichten. Der Grund dafür ist, dass wir dieses hier haben und es Ihnen mehrere Monate seit Jahresbeginn zeigt . Ich würde sagen, dass dieses Jahr in diesem Zusammenhang viel sinnvoller ist. Lassen wir es also dabei belassen. Wenn wir wollen, können wir sogar ein bisschen größer werden, schauen, ob das klappt. Um ehrlich zu sein, bevorzuge ich es nicht. Ordnung. Jetzt müssen wir natürlich sicherstellen, dass unsere Karten auch stimmen. Ich sehe, dass eine von ihnen hier irgendwie verschoben wurde, und es kommt sehr oft vor, dass Sie, während Sie gerade entwerfen, Dinge verschieben, ohne darauf zu achten, also stellen Sie sicher, dass Sie das nicht vermasseln oder im besten Fall vielleicht einfach das automatische Layout verwenden. Das macht dein Leben wirklich viel einfacher. Da haben Sie es also, wir haben gerade eine Schaltfläche erstellt, die einem Filter ähnelt, und sie hat uns geholfen, das Design leichter verständlich und auch anpassbar zu machen das Design leichter . Ordnung, jetzt haben wir diese Schaltfläche erstellt, aber wir benötigen die Drop-down-Funktionalität, damit sehen und verstehen können, worum es hier geht. Und der Weg, das zu tun, ist, dass wir diese vorerst in ein automatisches Layout einfügen und dann eine weitere Variante erstellen. Und diese Variante sollte verschiedene Optionen beinhalten. Ich werde das jetzt verstecken. Ich werde ihn verstecken, ich werde diesen Fehler jetzt ausblenden und dann werde ich diesen Text kopieren und einfügen, aber ich werde die Richtung vertikal ändern, kopieren, einfügen. Jetzt haben wir diese Woche und dann wird es diesen Monat sein. Ups. Wir werden sicherstellen, dass alles nach links oben ausgerichtet ist, und dann werden wir das hier sagen Und das, ich weiß nicht, oder letztes Jahr. Okay, wir werden also all diese Optionen haben. Und wir werden einen Prototyp erstellen, sodass es, wenn Sie darauf klicken, zum anderen wechselt mithilfe von Smart Animate Und wenn Sie hier auf etwas klicken, geht es zurück Jetzt sollte es normalerweise einen auswählen, oder? Es sollte diese Woche, diesen Monat wählen und das würde sich ändern. Aber im Moment halten wir es einfach einfach, also sollte es sich nicht ändern. Schauen wir uns also an, wie das jetzt aussieht. Siehst du? Es verlängert. Aber das Problem ist, dass es durchsichtig ist. Wir werden es also bunt machen, sobald Sie darauf klicken und sehen, wie es aussieht. Okay, das ist überhaupt nicht schlecht. Du klickst darauf und es zeigt dir, dieses Jahr, diesen Monat, ja. Okay, jetzt haben wir dieses Drop-down-Menü. Sie können es ein wenig bearbeiten. Ich habe die Schrift etwas größer gemacht damit sie leichter lesbar ist, und ich werde hierher kommen und ihnen auch etwas mehr Abstand voneinander geben etwas mehr Abstand und sehen, wie das aussieht. Ja, das ist ein bisschen besser. Und du kannst mit so etwas arbeiten. So erstellen Sie im Grunde eine Dropdown-Filterschaltfläche Danke fürs Zuschauen. In der nächsten Lektion werden wir die Aufgabenkarten erstellen und genau hier an diesem Panel arbeiten. 9. Entwerfen der Aufgabenkarten: Lassen Sie uns also weitermachen und einige Aufgabenkarten erstellen. Okay? Also wird es hauptsächlich in diesem Abschnitt sein. Wir können weitermachen, diesen Text kopieren, ihn in diesen Rahmen bringen und Aufgaben erledigen. Jetzt haben wir also die Aufgaben hier. Ich denke, es wäre im Grunde ziemlich nett , wenn wir verschiedene Kategorien erstellen würden. Wir können also dringende Aufgaben oder so etwas sagen. Und dann könnten wir die neuesten Aufgaben haben, so etwas. Entweder das oder wir könnten Aufgaben haben und du könntest sie sortieren. Eigentlich wäre das eine nettere Idee. Ich weiß es nicht. Das entscheiden wir gleich. Aber lassen Sie uns jetzt weitermachen und die allgemeinen Karten erstellen. Also werden wir einige Karten erstellen und versuchen sicherzustellen, dass diese Karten mehr oder weniger kompakt sind. Wir wollen ihnen einige Informationen hinzufügen , es aber nicht übertreiben Also kopiere ich das Styling von hier nach da und weißt du, lass uns einfach versuchen, es irgendwie herauszufinden, um ein sehr schönes Layout zu erstellen, ohne es zu übertreiben, okay? Also, die ganze Idee ist, dass wir einen Titel haben sollten, und, weißt du, der Titel ist das, was die Aufgabe eigentlich ist Und in diesem Fall könnte es sich bei der Aufgabe um etwas sehr Einfaches handeln. Es könnten Design-Rollups sein. Das Interessante ist, weißt du , die Aufgabe könnte alles sagen. Ich könnte sagen, Design-Roll-Ups für die Chicago Fair, oder? Wir werden eine Messe in Chicago haben. Es heißt Chicago Fair oder vielleicht gibt es eine Messe in Chicago und wir werden die Roll-Ups dafür entwerfen. Aber anstatt einen Titel wie diesen zu machen, könnten wir ihnen erlauben, im Grunde genommen diesen Rahmen zu entfernen. Ich werde Design-Roll-Ups sagen. Und dann, als eine Art Kommentar, wird es eine zusätzliche Information geben es wird Chicago Fair heißen. Okay. Und dann wird es auch ein Datum geben. Das ist es, was nett ist. Wir teilen es auf, anstatt nur eine Information zu haben, teilen sie einfach in mehrere verschiedene Ebenen auf, sagen wir. Ich werde das kopieren und ich werde hinzufügen, ich werde hier ein Symbol hinzufügen und es wird Uhr sein. Also werden wir sie zusammenfügen und dann werden wir das kopieren. Das wird die Uhrzeit oder das Datum sein. Und wir könnten sagen, 21. April, das ist eigentlich zu spät. Nehmen wir den 21. Juli und dann werden wir hier zusätzliche Informationen haben. Was diese Information ist, weiß ich nicht. Es könnten Anlagen sein, sodass wir uns verketten könnten. Ich bin mir nicht sicher. Lass uns sehen. Ja, Link sollte funktionieren. Ja. Da haben wir's. Wir werden das auch solide machen. Wir werden sagen, es gibt zwei Anlagen oder so, und das ist die Aufgabe. Lassen Sie uns versuchen, es ein wenig aufzuschlüsseln. Dann könnten wir auch zeigen , wer zu dieser Aufgabe hinzugefügt wurde. Wir könnten das wie folgt machen. Und nur um Sie daran zu erinnern, dies auch auf dem basiert, was ich bei anderen Plattformen gesehen habe. Es geht nicht darum, dass wir das Rad neu erfinden . Also behalte das im Hinterkopf Wir machen nicht alles komplett neu von Grund auf, sondern nutzen die Erfahrungen, die andere Menschen gemacht haben. Ich finde, das ist ein sehr schönes Setup, das wir hier haben. Wir könnten es ein bisschen ändern, aber ich finde das sehr nett. Wir könnten versuchen, die Karten vielleicht etwas weniger Eckenradius zu haben , weil es sich übertrieben anfühlt Aber es ist auch wichtig für die Konsistenz, also bin ich mir nicht sicher Gehen wir ein bisschen zurück, um zu sehen, wie es aussieht. Denn je mehr Eckenradius Sie haben, desto weniger Informationen können auf diese Dinge passen. Aber ich denke, das ist okay. Jetzt haben wir so ein Setup, und ich finde das wirklich großartig. Ich werde daraus eine Komponente machen und ich werde Ticket sagen. Das ist unser Ticket oder unsere Aufgabe, und ich werde es hier hinzufügen und ich werde es kopieren und dann werde ich sie in das automatische Layout einfügen . Wir könnten es entweder so machen, dass wir diese dringenden Aufgaben haben und sie so organisiert sind , und dann könnten wir hier andere Aufgaben haben . So organisiert. Dann könnten wir weitere Aufgaben hinzufügen oder wir könnten es als Filter tun. Es gibt eine Filteroption, aber ich finde das schöner und lassen Sie uns das etwas näher bringen Da haben wir's. Da ist es sehr voll. Ich werde nicht lügen. Ich habe das Gefühl , dass es sehr gefüllt ist und vielleicht nicht zentriert ist. Ja, das stimmt. Es ist nicht zentriert. Aber es ist immer noch wichtig. Es gibt dir einen schönen Überblick darüber, was vor sich geht. Was sehr wichtig ist, ist, dass wir dieses Menü auch reduzieren können sollten . Das sollten Sie auch im Hinterkopf behalten. Was wir jetzt auch tun sollten , ist, die Details auszufüllen, und das werde ich tun, nur damit Sie mir nicht bei dieser niederen Arbeit zuschauen müssen Aber das ist momentan unser Ticketsystem. Es sieht wirklich nett aus. Es ist sauber und es gibt genügend Informationen darüber, wofür Sie die Aufgabe erledigen, wo sie sein wird oder für welches Projekt, sagen wir, für welches Projekt genau, vielleicht können wir es sogar unterstreichen , um welches Projekt es sich handelt, und dann können Sie es anklicken Oder wir könnten diese vertauschen. Das ist eigentlich vielleicht, lass uns das machen. Dann haben wir hier eine etwas bessere Hierarchie. Siehst du? Also ja, du hast Chicago Fair, Design-Roll-Ups und so weiter. Und dann ist klar, für welches Projekt das ist, was ist die eigentliche Aufgabe? Wann ist es fällig und wie viele Anlagen, habt ihr Informationen dazu, Kommentare, was auch immer? Und wer ist dann eigentlich mit dieser Aufgabe betraut? Ich würde also sagen, das ist eine wirklich gute zusammengefasste Version eines Tickets, und wir sollten auf jeden Fall eine erweiterte Version davon haben . Aber für den Moment ist das genug. In den nächsten Lektionen werden wir auch daran arbeiten, dieses Menü oder diesen Seitenbereich sowie diesen Bereich zu reduzieren . Das ist definitiv etwas, was wir in den nächsten Lektionen tun werden. Außerdem wir diesem Design noch etwas mehr Prototyping hinzufügen und ein wenig Interaktion und hinzufügen und ein wenig Interaktion und Mikrointeraktionen hinzufügen Vielen Dank fürs Zuschauen Wir sehen uns in der nächsten Lektion 10. Erstellen von Tabellen, Diagrammen und Grafiken: Ordnung, bis jetzt haben wir ein wirklich schönes Layout, aber ich möchte mir einen Moment Zeit nehmen, um euch zu zeigen, wie ich diese Grafiken erstellt habe und wie ihr sie neu erstellen könnt In dieser Lektion werden wir also quasi eine Übung zur Neuerstellung dieser Grafiken haben eine Übung zur Neuerstellung dieser Grafiken . Lass uns anfangen Nun, den ersten, den wir zusammen gemacht haben, also hast du schon eine Vorstellung davon, wie wir das gemacht haben. Jetzt werden wir die anderen zur Seite nehmen und versuchen, sie nacheinander nachzubauen Also hier haben wir ein paar KVIs. Ich werde es einfach kopieren und einfügen und dann werde ich diesen Teil löschen Wie das funktioniert, ist sehr, sehr einfach, und Sie sollten versuchen es in den Begriffen zu betrachten, die ich Ihnen jetzt sagen werde, oder? Es gibt viele verschiedene Möglichkeiten , diese nachzubilden Aber die Art und Weise, wie ich es mache oder wie ich Ihnen zeigen werde , ist meiner Meinung nach die sauberste, weil viele Leute Dinge entwerfen, besonders wenn es um Grafikdesign geht, vor allem mit anderen Anwendungen, die nicht Figma sind, in denen winzige Pixel Das Symbol bewegt sich etwas nach rechts nach links, der Abstand ist etwas anders All das sind Dinge , die wir vermeiden werden, wir werden versuchen, all das zu vermeiden , indem wir es auf diese Weise tun. Also als Erstes, was du tun wirst, fange ich gerne mit den Symbolen an, okay? Also werde ich hier einfach ein Textelement einfügen . Ich werde es kopieren. Das wird unser Text sein, das Protokoll, und das wird unser Symbol sein. Ich werde hier tippen , super. Fantastisch, Schrift Awesome Seven kostenlos. Dann schreibe ich den Namen dieses Symbols, nämlich Stoppuhr Wir werden es solide machen, weil einige der Symbole in der kostenlosen Version nur in fester Form verfügbar sind kostenlosen Version nur in fester Form verfügbar Also werden wir das tun, und einfach so, wir bekommen es sofort, oder? Anstatt also einen Kreis dahinter zu setzen, werden wir ein automatisches Layout erstellen. Inzwischen solltest du dir vorstellen, dass ich automatische Layouts wirklich liebe weil sie die Dinge viel einfacher machen Anstatt dir über zwei Elemente Gedanken zu machen, hast du nur einen Rahmen, oder? Ein Rahmen und beinhaltet das Ding, weißt du, es enthält das Symbol genau in der Mitte, okay? Jetzt füllen wir es aus. Nun, die Füllung im Moment spielt keine Rolle. Es muss nur eine Farbe sein , die wir sehen und identifizieren können. Wir geben ihm einen Radius von 50 oder 100 runden Ecken, nur damit wir sichergehen können, dass er vollständig rund ist. Eine andere Sache ist sicherzustellen , dass Breite und Höhe gleich sind. Hier können Sie sehen, dass es kein richtiger Kreis ist, also machen wir beide zu 36. In Ordnung. Also jetzt ist es perfekt und stellen Sie sicher , dass dieses Symbol auch zentriert ist, nicht links. Jetzt ist es perfekt zentriert, und jetzt können Sie bestimmen, wie viel Polsterung Sie möchten Im Moment können Sie es mit der Polsterung machen oder Sie können es einfach selbst machen. Achten Sie darauf, das Seitenverhältnis beizubehalten Anstatt mit der Polsterung zu arbeiten, können Sie hier einfach 40 eingeben und dann haben Sie mehr Platz Wir können hier überprüfen, wie groß die Schrift ist. Es ist 24, also machen wir hier 24, und wir können es auf 45 machen und das sieht nah genug aus. Ich klicke auf I, um die Farbe von hier zu übernehmen. Ich wähle das Symbol aus und nehme die Farbe von diesem Symbol. Jetzt habe ich den Text. Hier werde ich nur 50 Minuten schreiben, und dann haben wir dieses Element hier. Jetzt wird es dasselbe Prinzip sein. Ich kopiere das und schreibe 25%. Ich werde die Schrift 12 machen. Ich schätze, so groß ist es. Dann mache ich ein automatisches Layout daraus und wir machen dasselbe Füllen Sie es aus, es spielt keine Rolle. Machen Sie 50, 100 und machen Sie die Polsterung, ändern Sie es, schalten Sie es auf das, was für Sie funktioniert Dann hast du das als Symbol. Ich werde das kopieren. Ich werde es duplizieren, super. Dann schreibst du Pfeil nach oben und wieder, damit es solide aussieht. Jetzt haben wir das hier. Ich werde es kleiner machen, zehn, und dann werde ich den Abstand zwischen ihnen kleiner machen und auch die Polsterung von rechts und links Dann sieht es eher so aus. Jetzt lasse ich die Farbe fallen. Ich wähle diese beiden und nehme von hier oder ich kopiere es einfach von hier, weil es so klein ist. Ordnung. Jetzt sieht es also sehr ähnlich aus. Jetzt haben wir nur noch diesen Titel übrig, also werden wir ihn kopieren. Ich halte übrigens Alt gedrückt, während ich es verschiebe, halte es und bewege es, während Alt gedrückt hältst und du duplizierst es einfach, dann schreibe ich die durchschnittliche Zeit pro Aufgabe. Machen Sie 16 und klauen Sie dann die Farbe von hier. Bam. Nun, das ist ein sehr wichtiger Schritt Jetzt haben wir hier ein automatisches Layout, automatisches Layout hier. Wir werden sie alle in derselben Zeile auswählen und sie zu einem automatischen Layout für sich selbst, für sich selbst machen . Jetzt ist diese ganze Reihe zusammen. Jetzt können wir den Abstand auf vier oder acht setzen oder was auch immer wir wollen. Sie können sich auch dafür entscheiden, diese näher beieinander zu platzieren. Nur als Option, weil, weißt du, die Idee hier näher ist. Das ist Text. Die 52 Minuten sind also um 25% gestiegen, und das alles bezieht sich auf die Stoppuhr, die sich auf die Durchschnittszeit bezieht Also verbindest du es logisch miteinander. Es macht keinen großen Unterschied, weil der Abstand mit bloßem Auge nicht gut sichtbar ist, aber für einen Designer ist er ziemlich gut sichtbar Dann machen wir daraus ein automatisches Layout, oder? Dann bei sieben mag ich diese ungeraden, du weißt schon, Zahlen nicht , also mach eine Acht draus. Warum nicht? Jetzt haben wir es und alles, was Sie tun müssen, ist es einfach zu duplizieren, zu duplizieren. Ändern Sie das Symbol hier, Liste der Zwischenablage. Da haben wir's. Dann mit diesem Symbol ist es ein Stern, und dann nimmst du einfach die Informationen, kopierst sie, kopierst und fügst sie ein. Das Schöne ist, dass Sie die Dinge nicht so oft verschieben müssen , weil es ein automatisches Layout gibt, sodass Sie dafür nichts verschieben müssen, und das werden wir tun. Wir müssen diese Farbe von hier aus nehmen, I drücken, diese Farbe nehmen und dann diese Farbe in diese ändern. Bam, da haben wir's. Und stellen Sie sicher, dass wir diesen Text hier haben. Wir können es ein bisschen verlängern. Wir können, wir klicken einfach hier und dann wird es erweitert. Dann wählen wir jetzt all diese aus und fügen sie in ein automatisches Layout ein. Statt 19 werde ich 16 daraus machen. Du merkst, dass es hier einen kleinen Unterschied gibt. Sie können also doppelklicken und dann heißt es Hug, jetzt haben Sie viel mehr Platz Ich mache 24 daraus, mache 36, sehe, was für dich funktioniert, und dann kannst du es in der Mitte platzieren und bam, das haben wir einfach sehr schnell, sehr einfach kopiert Es geht nur darum zu verstehen , wo man anfangen soll. Anstatt alle Symbole auf einmal und dann alle Zahlen zu machen , kreieren Sie einfach einen soliden Look. Wenn Sie damit zufrieden sind, duplizieren Sie es einfach weiter und ändern Sie es Gehen wir nun zum zweiten über. Ich werde es wie zuvor kopieren, einfügen und ich werde das löschen , sodass die Vorgehensweise ziemlich einfach ist. Sie drücken O oder wählen das ovale Werkzeug und halten die Umschalttaste gedrückt, um sicherzustellen, dass es gerade ist und dasselbe Seitenverhältnis hat. Es ist nicht verlängert oder so. Dann nehmen wir diese Farbe. Jetzt kopieren und einfügen, wir haben es kopiert und eingefügt. Jetzt bleibe ich bei diesem Punkt und nehme ein Stück vom Kuchen Dann klicke ich auf Ich wähle diesen aus. Spülen Sie jetzt ab und wiederholen Sie das Kopieren und Einfügen. Ich werde das machen. Das muss nicht so exakt sein. Dann dasselbe, kopieren und einfügen. Ich werde ihm mehr Platz geben. Drücken Sie dann erneut das ovale O-Werkzeug, drehen Sie es gerade, halten Sie die Umschalttaste gedrückt, und schon haben Sie das. Dann bekommst du dieses Bild von irgendwoher, du kannst einfach die Füllung kopieren, das Bild hierher kopieren, das Bild dorthin kopieren und dann die Füllungen nehmen und hier hast du einen Kreis mit einem. Wir werden es einfach mit einer weißen Füllung füllen und ein Fragezeichen hinzufügen Jetzt haben Sie vielleicht bemerkt, dass dies nicht ganz dasselbe ist. Ich mache das einfach sehr schnell. Es muss nicht exakt dieselbe Größe haben, nur dieselbe Idee. Jetzt haben wir diese Texte, und wie Sie hier sehen können, arbeiten wir wieder mit automatischen Layouts. Um das zu tun, schreiben Sie John 20%, und dann erhalten Sie ein sehr kleines Oval und Sie erhalten die Farbe, Sie halten beide gedrückt und halten dann Shift und A gedrückt, und jetzt befinden sie sich in einem automatischen Layout, und der Abstand beträgt vier. Halten Sie nun beim Kopieren die Alt-Taste gedrückt. Stellen Sie sie nun alle in ein automatisches Layout und geben Sie ihnen auch vier oder vielleicht acht und wechseln Sie dann die Werte. Einfach kopieren und einfügen. Wir haben zwei Johns, so scheint es. Wir haben, ich bin mir nicht sicher. John, Mary und Lawrence und dann setzen wir Lawrence da hin und ordnen dort zu, und wir nehmen die Farben. Laurence ist hier und Mary ist hier. Bam. Einfach so , wir haben es kopiert Und so können Sie sehr schnell ein Diagramm erstellen. Jetzt können Sie natürlich Diagramme aus anderen Programmen verwenden, an anderen Orten können Sie sie importieren. Es liegt ganz bei Ihnen, aber so können Sie es mit Figma schnell und sehr einfach erstellen es mit Figma schnell und sehr einfach Ich finde es einfacher, es mit Figma selbst zu machen, um ehrlich zu sein. Kommen wir nun zum letzten, dieser kann etwas knifflig sein oder überwältigend erscheinen, ist es aber nicht Jetzt kopiere ich es und lege es hier hin und wie immer lösche ich es einfach. persönlich mache das so, dass ich das Stiftwerkzeug nehme und die Umschalttaste gedrückt halte, um es zu korrigieren. Ich bringe es runter. Ich mache das, wo ich will, und dann erweitere ich es. Ich versuche sicherzustellen , dass der Abstand hier ähnlich ist wie hier. Ich kann nicht immer perfekt sein. Achte darauf, dass der Strich sehr leicht ist denn diese Information ist nicht so wichtig, diese Achsen. Dann haben wir diese coole Linie. Das kann ein bisschen knifflig sein. Sie werden hier klicken und dann die Umschalttaste gedrückt halten, nur um einen wirklich schönen geneigten Winkel zu bekommen, und dann werden Sie gedrückt halten und sicherstellen , dass Sie eine schöne Kurve bekommen Dann kannst du hingehen, wohin du willst. Hier müssen Sie zum Beispiel nicht die Umschalttaste gedrückt halten und dann verlängern, bis Sie eine schöne, gleichmäßige Kurve erhalten. Gehen Sie nach oben, wo immer Sie wollen. Du bringst es her. Und dann nochmal, nimm die Kurve. Es ist im Grunde dieselbe Idee Doppelklicken Sie auf , um sicherzustellen, dass das so gespeichert wird. Sie können zu diesem ersten zurückkehren und ihm dann auch von Anfang an eine schöne kleine Kurve geben . Und jetzt hast du eine schöne kleine Farbe. Jetzt werde ich versuchen, das mit einer anderen Farbe zu machen , nur um dir zu zeigen, was ich hier gemacht habe. Jetzt mache ich das grün, oder? Nun, wie kriege ich diesen schönen kleinen Farbverlauf hin? Das ist eine gute Frage. Das ist ein sehr verbreiteter Designstil, übrigens ein sehr verbreiteter Designstil, deshalb mache ich ihn. Der Weg, das zu tun, besteht darin , diese Zeile zu kopieren und einzufügen. Okay? Also, nur um dich wissen zu lassen, das ist keine perfekte Linie. Die Kurven können besser gemacht werden, aber es ist völlig in Ordnung. Sie werden eine davon unverändert lassen, und für die zweite doppelklicken Sie darauf und dann werden Sie die Punkte sehen. Dann gehst du zurück zum Penol. Du wirst dich hier verbinden. Halten Sie die Umschalttaste gedrückt, um direkt nach unten zu gehen. Es scheint, als hätten wir das Ziel verfehlt. Dann wirst du es schließen. Du wirst es hierher bringen, schließen und da haben wir es. Jetzt ist es also geschlossen. Jetzt entfernen Sie den Strich und fügen eine Füllung hinzu. Aber statt einer normalen Füllung wählen Sie einen Farbverlauf und dieser Verlauf wird linear sein. Und es sollte mehr oder weniger dieselbe Farbe haben. Aber von unten gibst du ihm 0% Opazität und du gibst dem Ganzen vielleicht 50% Dann hast du jetzt einfach so diesen schönen kleinen Farbverlauf Jetzt kannst du es anpassen. Sie können es auf 25% bringen. Ich finde, leichter ist besser. Du kannst es sogar auf 10% machen, es liegt an dir, oder du kannst sogar die Linie selbst machen. der obigen Linie können Sie sie heller oder dunkler machen oder es liegt ganz bei Ihnen. Aber ich finde etwas in der Mitte immer nett. Ich gebe hier 25% und es sieht nicht schlecht aus. Das Wichtigste ist nun, dass dieser Teil oben und dieser Teil unten ist. Sie können es natürlich anpassen , aber was bringt es, es so aussehen zu lassen? Es soll den tatsächlichen Anstieg oder die Nähe zum Höhepunkt darstellen tatsächlichen Anstieg oder die Nähe zum Höhepunkt Sie können sehen, wie nah es ist. Hier ist es nicht so nah, weil es nicht so grün ist. Hier kommt es dem Gipfel zwar nahe, aber nicht so nah. Hier kommt er zum Beispiel am nächsten. Dann haben wir diese Linie, diese Linie zeigt dir, wo der Peak ist oder wo das Maximum ist. Sie nehmen einfach das Linienwerkzeug, drücken auf L oder wählen das Linienwerkzeug von hier aus, und Sie werden die Umschalttaste gedrückt halten und geradeaus gehen. Sie es jetzt etwas herunterfahren, um sich ihm zu nähern oder zu ihm zu gelangen, gelangen Sie zu diesen Optionen Gehen Sie zu den Konturoptionen und statt Vollton werden Sie Strich haben Dann können Sie hier die Striche anpassen, sodass Sie sie zum Beispiel zu zehn machen können, und dann haben Sie diese netten kleinen Striche und machen sie dann gräulich, sodass sie nicht so klar sind, weil sie nicht die Hauptattraktion sind Dann können wir jetzt die Monate hinzufügen. Wir beginnen mit Januar und du wirst es hierher bringen und Alt gedrückt halten und organisieren, dass es nicht perfekt sein muss. Wisse einfach, wie viele Monate du brauchst. Sie haben also eins, zwei, drei, vier, fünf, sechs, sieben, eins, zwei, drei, vier, fünf, sechs, sieben. Dann wähle ich alle aus und füge sie in ein automatisches Layout ein, indem ich Shift und A gedrückt halte, und dann werde ich es bis zum Ende verlängern. Dann wähle ich Auto. Automatisch stellt sicher, dass der automatische Abstand automatisch aktiviert wird, sodass alle diese Elemente das Ende des Frames erreichen und der Abstand automatisch erfolgt. Es erstreckt sich bis hierher. Ich werde nur diese graue kleine Linie verlängern. tut mir leid. Ich werde es bis hierher nur ein bisschen verlängern. Sicher. In Ordnung. Jetzt werden wir es ändern und wir können FB schreiben und dann gehen wir zu Januar, Februar, März, April, Mai, Juni, Juli. Beurteilen Sie mich nicht, aber manchmal muss ich das Lied singen, um mich daran zu erinnern die Reihenfolge des Monats nur eine schlechte Angewohnheit ist dass die Reihenfolge des Monats nur eine schlechte Angewohnheit ist, die ich habe, oder keine schlechte Angewohnheit, einfach etwas, das ich aufgegriffen habe und das schwer loszulassen ist. Jetzt stellen wir sicher, dass es lesbar ist, also liegt es unter dieser Zeile. Das ist also die Barrierefreiheitslinie, um sicherzustellen, dass dort genug Kontrast vorhanden ist. Einfach so haben wir den Stil kopiert und können jetzt verschiedene Analysen, verschiedene Berichte sowie Grafiken und Diagramme auf Figma darstellen , ohne eine andere Anwendung zu benötigen Ist es ein bisschen schwer. Ist es schnell und nützlich? Ja, auf jeden Fall, denn denk dran. Ich meine, du kannst ein anderes Design haben, du kannst einen anderen Look bekommen. Aber wenn Sie tatsächlich ein Dashboard entwerfen, ist es sehr wichtig, das Design festzulegen. Sie machen das Design. Nehmen Sie nichts aus PowerPoint oder Excel oder einem anderen Programm , das vielleicht veraltet ist. Machen Sie Ihr eigenes Design, und das sollte die Grundlage sein. Nehmen Sie sich also die Arbeit, nehmen Sie sich die Zeit, um tatsächlich etwas Schönes zu kreieren , das zu Ihrem Stil und zum Stil des Designs passt , an dem Sie gerade arbeiten. Vielen Dank fürs Zuhören. Wir sehen uns in der nächsten Lektion. 11. Letztes UI-Polieren und Bereinigen: Willkommen zurück. In dieser Lektion werden wir uns das Design, das wir bisher entworfen haben, genauer ansehen , auch wenn wir wirklich stolz darauf sind, aber wir werden versuchen, es ein wenig zu verbessern. Eine Sache, die mir sofort auffällt, ist, dass es in gewisser Weise nicht so viele Farben gibt, was ich als positiv betrachte Wir wollen die Leute nicht mit zu vielen Farben überfordern. Wir haben viel Weiß, Grau, Schatten und so weiter Wir nutzen diese Elemente sehr gut. Gleichzeitig verwenden wir jedoch viele sehr helle Farben wie Lila, Blau, Gelb und Grün. Und obwohl sie in mancher Hinsicht hilfreich sind , steht zum Beispiel das Grün hier für einen Anstieg, das Rot für einen Rückgang, und dann haben wir auch dieses Farbsystem mit Rückfällen und Vorsicht. Diese Beschriftungen sind alle hilfreich. An anderen Orten wie hier helfen sie uns jedoch nur in dem Sinne, dass sie uns zeigen, dass es sich um unterschiedliche Werte handelt Dringend ist zum Beispiel etwas anderes als zu erledigen, festgefahren, erledigt usw. Es stellt sich jedoch die Frage: Müssen sie so intelligent sein? Müssen sie so viel kognitive Belastung aufnehmen? Denn im Moment, weißt du, sie meine Aufmerksamkeit und ich schaue direkt hier und hier. Dies sind nur einige der Dinge, die ich an unserem Design verbessern möchte. Fangen wir also damit an. Es sieht toll aus, aber was können wir dagegen tun? Es gibt verschiedene Möglichkeiten , was wir tun könnten. Nun, eine Sache, die wir dagegen tun könnten, ist, wir könnten versuchen , ein logischeres System zu verwenden, sagen wir. Also anstatt einfach zufällige Farben zu verwenden oder nicht wirklich zufällig, sondern es sind die Farben des Brandings. Stattdessen könnten wir versuchen, sie in einem leichteren Sinne zu verwenden. Wenn wir also dieses Violett verwenden, könnten wir vielleicht eine hellere Version davon verwenden. Also irgendwie nicht komplett entfernen, sondern nur, um es leichter zu machen. Ich spreche eher von so etwas. Man kann sie immer noch unterscheiden, aber sie sind nicht so hell. Sie sind in deinem Gesicht nicht so hell. Das finde ich viel netter. Es mag vom Design her nicht so cool sein, aber es nimmt weniger kognitive Arbeit in Anspruch, in deinem Gehirn, du schaust es dir nicht direkt an Die kognitive Belastung ist also geringer. Es belastet auch nicht Ihre Augen, weil Sie von Weiß zu sehr hellem Violett, Hellblau und Grün und Gelb wechseln, aber jetzt ist es etwas sanfter für das Auge, würde ich sagen Das ist eine Möglichkeit, wie wir das machen könnten. Eine andere Möglichkeit besteht darin, ein logisches System zu verwenden , da wir dringend feststecken müssen. Nun, abgeschlossen macht Sinn, weil es grün ist, aber wir haben auch dringend , das eher lila ist. Wir können dafür sorgen, dass es rot wird. Das ist etwas logischer. Es macht mehr Sinn , dass dringend rot ist weil wir das hier zum Beispiel überall verwenden. Wenn es darum geht, diese Farben zu erledigen, festgeklebt und abgeschlossen , haben sie nicht immer eine Bedeutung. Es könnte das sein oder es könnte einfach Grau sein, um ehrlich zu sein, wir verwenden Grau, wir lassen eine Farbe los, die wir hier haben, aber sie hilft uns ein bisschen, und dann bleibt uns jetzt das Ampelsystem, das wir zuvor mit diesen Etiketten verwendet haben, was viel sinnvoller ist, weil Sie dringend, was rot ist, zu tun haben , ist mehr oder weniger neutral. Ich meine, es ist etwas, das du tun musst, aber es gibt keine Hinweise. Du fällst nicht darauf zurück und du machst es nicht wirklich gut, es ist einfach zu tun. Dann bist du festgefahren. Das ist gelb, was bedeutet, dass du auf halbem Weg bist, du musst irgendwohin Du hast es nicht abgeschlossen und du hast nicht versagt und es ist auch nicht einfach zu tun, es ist irgendwo in der Mitte, links in der Mitte Also kannst du versuchen, es von dort aus herauszufinden. Gelb macht Sinn, weil Gelb immer, äh, du weißt schon, irgendwo in der Mitte unentschlossen Weißt du, genau wie bei Ampeln bedeutet Gelb, hey, es wird fast rot Aber das ist es noch nicht. Also nutzen Sie vielleicht Ihre Chance, vielleicht fahren Sie schnell, vielleicht langsamer. Also hier musst du quasi sagen, dass ich deine Aufmerksamkeit brauche. Du musst etwas gegen mich unternehmen. Und dann heißt fertig nur grün. Das ist grün, es ist positiv. Sie müssen nicht darüber nachdenken, Sie müssen es nicht hinterfragen. Eine weitere Idee ist nun, dem Ganzen auch eine neutrale Farbe zu geben . Aber da wir bereits Grau haben, wäre das etwas verwirrend da es keinen großen Unterschied gäbe, oder wir könnten es eher in Richtung Blau machen , weil das mehr oder weniger die Farbe ist , die wir hier haben. Aber ich finde Grün sehr gut. Je nach Verwendungszweck denken Sie vielleicht sogar daran, denken Sie vielleicht sogar daran Löschen abgeschlossen zu haben, anstatt es zu erledigen. Die Idee dahinter ist , wissen Sie, Sie müssen nicht wissen, wie viel bereits abgeschlossen ist. Sie müssen wissen, wie viel noch zu tun ist. Aber das geht wirklich tiefer in die UX hinein. Ich persönlich glaube das nicht. Ich denke, es ist gut zu wissen, was Sie abgeschlossen haben, worin Sie hervorragende Arbeit geleistet und was Sie geklärt haben. Ob es hellgrün sein sollte , darüber lässt sich streiten, denn ich denke, das nimmt Ihnen gerade etwas Energie. Und das ist nicht gerade das , was Sie tun möchten. Aber ich denke, wir optimieren das vorerst und es sieht viel besser aus. In Ordnung. Also, was können wir hier noch tun? Also ich denke, die Farben und die Schriften sind okay. Sie sind nicht schlecht. Sie sind nichts. Aber wenn es hier darum geht, finde ich, dass mir das Schema der Grautöne einfach zu neutral ist Ich denke, es gibt vielleicht eine Möglichkeit, es zu ändern. Ich bin mir nicht sicher. Lass uns Dinge ausprobieren. Also versuche ich hier nur, Farben auszuwählen und dem Ganzen etwas mehr Identität zu verleihen Ich weiß nicht, ob wir das schaffen können, weil wir auch nicht wollen, dass weil wir auch nicht wollen die Dinge gleichzeitig durcheinander gebracht werden. Ich denke auch, dass es hier nicht viel Kontrast gibt Versuchen wir, etwas mehr Kontrast zu bekommen. Der Kreis hier ist nicht so wichtig, aber das Symbol wäre toll, wenn wir es erkennen könnten, ob es verständlicher ist. Ich finde das schöner. Ich denke, das gibt ihm ein bisschen mehr Identität. Und ja, es ist eine sehr kleine Änderung, nichts allzu großes. Also ja, ich finde das gut und wir haben gute Abstände. In diesem Bereich laufen die Dinge gut. Nun, wenn ich hierher komme, ist das ein Chaos, das gelöst werden muss. Anstatt weiterzumachen und in jedes Element zu klicken, werde ich einfach die Auswahlfarben hier filmen und die Dinge ändern oder zumindest versuchen. Nach dem gleichen Prinzip könnten wir ganz einfach hellere Farben und mehr Pastellfarben wählen. Wir haben hier also dieses Blau, sehr hell. Ich würde mich dafür entscheiden, es jetzt grau zu machen, und dann werden wir es hier vielleicht als hellblau verwenden . In Ordnung. Jetzt werde ich es etwas leichter machen. Und wenn es um Gelb geht , schauen wir mal, was wir tun können. Gehen wir zurück zu den Auswahlfarben. Ich glaube, ich habe euch gesagt , dass ich das machen werde , und dann habe ich es vermasselt und ich habe es nicht richtig gemacht, also werde ich es jetzt einfach reparieren Okay. Jetzt geh zurück. Mit diesem Violett werden wir etwas Helleres wählen, aber nicht zu Helles. Und dann haben wir das Gelbe. Es scheint, dass wir zwei verschiedene Gelbtöne haben. Ich meine, es sieht weicher für die Augen aus, aber um ehrlich zu sein, bin ich damit nicht so glücklich Es sieht nicht so toll aus. Mal sehen, was wir dagegen tun können. Also vielleicht können wir statt einer Füllung eine Art Strich machen, können wir statt einer Füllung eine Art wenn es um diesen leeren Bereich geht. Wir könnten hier dasselbe tun und einfach einen Strich draufsetzen. Und wenn es um diese Farben geht zurück? Sollen wir es zurückbringen? Sollten wir nicht? Wir können sie machen. Ich habe den Fehler wieder gemacht. Du musst es anhand der Auswahlfarben machen , damit du den entsprechenden Kreis mit der Scheibe ändern kannst , anstatt es zweimal machen zu müssen. Ich versuche sicherzustellen , dass diese Farben auch hier erkennbar sind und sich auch voneinander unterscheiden. Jetzt waren sie zu nah dran. Also lass uns sehen. Im Idealfall, weißt du, was wir gerade tun, ist, dass wir quasi raten und schauen, was am besten funktioniert, aber idealerweise solltest du das nicht einfach so zufällig machen aber idealerweise solltest du das nicht einfach so zufällig machen, sondern es tun, indem du ein nettes Designsystem mit einem Styleguide und definierten Farben eingerichtet ein nettes Designsystem mit einem Styleguide und definierten Farben eingerichtet einem Styleguide und definierten Aber das haben wir nicht, also machen wir Dinge, weißt du, schnell und dreckig und, weißt du, versuchen, die Dinge auf der Alternative herauszufinden, was ich manchmal gerne mache, ist, dass ich ähnliche Farben hinzufüge , damit du so etwas hast. Ich finde das nett, weil wir zwar jetzt zwei Farben haben, aber das gibt der Sache mehr Identität oder mehr Charakter. Aber was Ihnen auffällt, ist, dass es problematisch sein könnte , weil John und Mary dann sehr ähnliche Farben haben. Kann also kompliziert sein. Was wir möglicherweise tun könnten, ist , John und Mary zu vertauschen. Das geht also so : Ich kopiere das und füge es hier ein, dann wähle ich das und öffne meine Zwischenablage Also, jetzt ist da so etwas wie in der Mitte, da ist eine Art Puffer Dieses Rosa ist in der Mitte. Jetzt kannst du sie also ein bisschen voneinander unterscheiden. Sie unterscheiden sich nicht so deutlich. Aber ich habe das Gefühl, dass es hier eine harmonischere Palette ist. Ich weiß es nicht. Ich habe das Gefühl, dass es mir besser gefällt. Es werden keine Gelbtöne verwendet, es werden keine anderen Farben verwendet, aber ich denke, das ist in Ordnung Wir müssen sie nicht überall verwenden. Und denken Sie daran, ich habe nur drei, aber idealerweise hätten Sie eine vierte, eine fünfte, eine sechste, je nachdem, wie groß Ihr Team ist, und dann würden Sie mehr Gelb verwenden. Vielleicht würdest du Orange, Rot oder was auch immer einführen. Stellen Sie einfach sicher, dass Sie am Anfang ein paar Farben haben , und dann werden Sie sie immer weiter auf andere Farben erweitern. Aber ich denke, wir können damit leben oder vielleicht können wir so etwas machen. Lass uns sehen. Ich finde das schöner. Jetzt verwenden wir dieses Grau- oder Blaugrau, das funktioniert, oder Purpurgrau Jetzt funktioniert das, es gibt eine Verbindung zwischen diesem Bereich, diesem Bereich und dieser Farbe, und jetzt ein bisschen Das ist eher auf der dunkleren Seite. Nun, was das angeht, gefällt mir das wirklich, aber es gibt einige kleinere Anpassungen, die wir vornehmen könnten. Ich konnte sehen, dass diese Linie hierher kommt, also könnten wir sie nach hinten werfen. Siehst du. Wirf es einfach zurück und es ist immer noch durchsichtig, also können wir es einfach hochheben. Da haben wir's. Das ist viel schöner und wir könnten hier dasselbe sehen. Es gibt eine kleine Überschneidung, das werden wir entfernen und mal sehen Wir werden es auch herunternehmen. Wir könnten auch diesen Rahmen öffnen. Wir könnten auch einen Kreis hinzufügen , um nur den Höhepunkt anzuzeigen. Kreise eignen sich immer gut Grafiken, um bestimmte wichtige Punkte oder Zeiträume anzuzeigen , oder vielleicht könntest du mit der Maus fahren und sie würde dir verschiedene Punkte und was auch immer und ihre Werte zeigen . Hier haben wir den höchsten Punkt. Vielleicht sollten wir den tiefsten Punkt hervorheben , so etwas. Auch wenn es gut wäre, darauf hinzuweisen , dass dies der niedrigste Punkt ist. Ich bin mir nicht sicher, ob wir das in der Farbe machen könnten. Okay, ich denke, wir sollten diese Zeilen darüber legen und dann okay. Oder wir könnten sichergehen, dass das nicht durchsichtig ist, war die Strens Da ist ein Schlaganfall. Okay? Wir entfernen diese Füllung und stellen sicher, dass sie zu 100% ist, und wir müssen nur herausfinden, wir wählen einfach die Farbe selbst aus und machen sie zu 100%. Da haben wir's. Jetzt haben wir kein Transparenzproblem mehr und es ist dieselbe Farbe wie wir. In Ordnung. Das sieht jetzt etwas besser aus, auch wenn ich das Gefühl habe, dass Rot zu viel ist , lass uns das neu definieren Okay. Ich glaube, ich bringe das einfach wieder her. Ich denke, ich werde mich dafür entscheiden, dieselbe Farbe zu verwenden , um die Farbe von hier aus auszuwählen. Jetzt haben wir den tiefsten Punkt und den höchsten Punkt. Sie könnten angeben , was diese Zahl ist. Ich bin mir nicht sicher, was die Leistung hier bedeuten soll oder wie sie gemessen werden soll, aber nehmen wir an, wir haben hier 89%. Das ist ein hoher Wert von 89% und ein niedriger Wert von 74 74%. Das ist so, als würde man ein paar Zahlen da rauswerfen. Aber jetzt können Sie sehen, dass die Dinge mehr zusammenkommen , denn jetzt haben Sie einige Zahlen, einige Hinweise, Sie verstehen, dass dies der niedrigste Punkt ist, das ist der höchste Punkt, so hoch war es und hier und da einige Hinweise , die uns zeigen, dass diese Grafiken tatsächlich Sinn machen. Ich würde sagen, es wäre auch toll, wenn wir hier eine Y-Achse hinzufügen würden. Wir würden das also im Grunde tun, indem wir ein paar Zahlen hinzufügen. Nehmen wir also die Farbe von hier. Richten Sie das also nach rechts aus und wir sagen, es sind 90%. Ich nehme das ganze Diagramm nach rechts. Wir werden all diese auswählen. Wir setzen sie in das automatische Layout und dann verteilen sie sich von selbst. Dann werden wir sehen, dass das 74% sind, das muss irgendwo bei 80% liegen. Vielleicht haben wir es mit den Zahlen übertrieben. Mal sehen, was wir dagegen tun können. Strecke das hier drüben aus. Jetzt können wir sehen, ob es 70% waren, vielleicht löschen wir das auch. Das wären rund 74%. Und dann wären das im Grunde 79. Jetzt haben wir also die Y-Achse, und sie sagt uns, dass wir sie am liebsten auch beschriften sollten. Das sollte also heißen, das ist die Aufführung, das ist die Zeit. Aber hier, in diesem Fall, macht es Sinn, das sind die Monate, also ist es klar und hier haben Sie den Prozentsatz. Aber wenn du darauf klickst, sollte es dir sagen, okay, so messen wir den Prozentsatz. Aber hier sind wir keine Mathematiker, wir sind keine Statistiker Unsere Aufgabe besteht nicht darin, herauszufinden, wie die Leistung im Zeitverlauf oder was auch immer sie oder die Produktivität am besten gemessen werden kann, sondern wir versuchen nur, sie grafisch darzustellen Normalerweise solltest du irgendwo eine richtige Zahl haben. Mir ist gerade aufgefallen, dass diese nicht zu dieser Gruppe gehören, also füge ich sie einfach in die Gruppe ein und platziere sie richtig. Okay. Da haben wir's. Ich denke, das ist gut genug. In Ordnung, jetzt schalten wir das einfach um. Nun zu anderen Aspekten. Wir haben also diese Schaltflächen hier, wir haben die Benachrichtigungen. Ich möchte nicht zu viel ändern. Ich möchte nicht zu viel polieren, weil das auch nach hinten losgehen kann. Andere Dinge, die wir tun könnten, wir könnten mit dem Abstand hier mit der Polsterung herumspielen Abstand hier mit der Polsterung herumspielen Ich habe das Gefühl, dass wir vielleicht zu viel Polsterung angebracht haben. Aber das ist natürlich, es hängt von Ihrem Design ab. Also ich denke, wir können sie vielleicht einfach kleiner machen. Halten Sie die Taste gedrückt und dann können Sie es irgendwie zuschneiden. Okay, jetzt haben wir mehr Platz. Wir haben ein paar Pixel eingespart, was uns viel mehr Platz spart. Und wenn es hier darum geht, ist eine Sache, die mich daran stört, dass man nicht weiß, wo es endet. Weißt du, es ist einfach Also ich denke, wir könnten ihm vielleicht etwas Schatten geben. Also lass uns sehen, wie wir das machen können , denn das kann ein bisschen knifflig sein. Also, wenn wir es 24 verwischen lassen und es uns dann ansehen. Und das Hauptproblem , das passiert, Hoppla. Okay. Ist es so, dass du den Schatten von oben sehen kannst, was du definitiv nicht willst. Um dem entgegenzuwirken, gebe ich es, ich mache das Y 24 und dann mache ich das Ganze vielleicht zu 15% Schauen wir uns also an, wie es jetzt aussieht. Okay, das ist wirklich toll. Du kannst es jetzt sehen, weil der Schatten stark abnimmt, er ist gemischt, es sieht also nicht so aus, als ob er von hier getrennt wäre, aber es gibt genug Schatten um dir zu zeigen, dass es sich um ein Seitenmenü handelt, und das unterscheidet dieses Menü vom Inhalt auf der rechten Das ist also wirklich großartig. Aber eine Sache, die mich daran immer noch stört , ist vielleicht der Abstand Lassen Sie mich einfach Strg Alt A gedrückt halten, um alle Instanzen zu bearbeiten, verschiedene Versionen davon Ich bearbeite sowohl hier als auch dort gleichzeitig. Ich werde das reduzieren und sehen, wie es aussieht. Was mich stört, ist, dass es hier einen großen Unterschied gibt, wenn Sie es hervorheben hier einen großen Unterschied gibt, wenn Sie es Vielleicht können wir wieder Alt A drücken, also wähle ich all diese Vielleicht kann ich grundsätzlich mehr Polsterung hinzufügen. C. Bevor ich gehe, gehe ich zurück. Ich werde sichergehen, dass es schwierig wird. Ordnung. Mir ist klar, dass es schwierig sein wird. Ich werde es 16 bis 16 schaffen. Jetzt werde ich 53 schreiben und das Seitenverhältnis fixieren. Okay, oder besser gesagt, ich werde das Protokoll entfernen und ich werde hier dasselbe tun, ich werde es erstellen. Wie viel war das? 53. In Ordnung. Nun wollen wir sehen, wie sie aussehen. Jetzt sollten sie viel klobiger sein, aber ich sehe, dass sie sich hier nicht geändert haben Das heißt, wir haben mit den Instanzen ein bisschen zu Manchmal passiert das, wenn Sie die Instanzen manuell ändern Jetzt werde ich sie hier einfach manuell ändern. 53. Lass uns jetzt sehen. Die Schaltflächen sind also viel größer, was es uns ermöglicht, sie viel einfacher auszuwählen vor allem, weil wir nicht viele Artikel haben . Das funktioniert gut. Jetzt können wir zurückgehen und den Abstand vielleicht sogar auf vier reduzieren, oder? Jetzt sind sie näher beieinander. Also, wenn Sie mit der Maus über eine von ihnen fahren, ist nur sehr wenig Platz zwischen ihnen, was meiner Meinung nach am besten sein sollte Das ist mein eigener Geschmack oder die Designprinzipien, der Stil, in dem ich trainiert wurde So sieht es meistens aus. Also ja, das sieht wirklich nett aus. Weißt du, es ist ein winziges Detail, aber für mich macht es den ganzen Unterschied. Es kann sein, dass das Armaturenbrett etwas zu kurz ist, also können wir es einfach ein wenig erweitern . Insbesondere müssen Sie bedenken, dass, wenn Sie für verschiedene Sprachen lokalisieren, das heißt, wenn Sie ein Produkt haben, Sie haben ein Design und dann werden Sie hier verschiedene Sprachen verwenden Vor allem, wenn es um bestimmte Sprachen wie Deutsch geht , haben sie sehr, sehr langen Text Statt Dashboard hättest du also ein wirklich langes Wort. Dann haben Sie zwei Möglichkeiten. Entweder schaffen Sie genug Platz, damit die Leute ihre lokalisierte Sprachversion aufschreiben können , was auch immer, oder Sie müssen das Wort ausschneiden, nicht wirklich zuschneiden, sondern es herausschneiden. Es wird B sein, Punkt Punkt Punkt. Die Idee ist, dass ja, das Wort zu lang ist, also musst du raten, was es ist. Aber das ist wirklich schlecht für Benutzer. Sie sollten versuchen, dies zu vermeiden, da dann, anstatt das Dashboard anzuzeigen, um viel längere Wörter wie Dashboard-Steuerung handelt . Aber anstatt Dashboard-Steuerung zu sagen, sagen Sie einfach Dashboard, Symbol, Punkt Punkt Punkt. Dann ist es kein verständliches Dashboard-Con, was? Was genau wird hier beschrieben? Das ist es, was passiert , wenn man ehrlich mit Sprachen wie Deutsch ist, weil sie lange Wörter haben. Dashboard ins Deutsche übersetzen erhalten Sie möglicherweise ein sehr langes Wort, und wenn das Menü dann nicht lang genug ist, wenn es nicht breit genug ist, wird es gekürzt und die Benutzer werden dann nicht verstehen, was es ist Das ist alles, was ich versuche , dir zu erklären. Die ganze Idee ist, sicherzustellen, dass Sie genug Platz haben. Auch wenn du denkst, hey, meine Worte sind kurz genug. Sie werden hierher passen. Aber denken Sie nachhaltig, langfristig , denken Sie an die Zukunft und das, was kommen wird. Und wenn Sie das tun, dann werden die Dinge Sinn machen. In Ordnung. Also, jetzt, wo wir das haben, denke ich, es ist gut genug, um es zu polieren. ehrlich zu sein, könnten wir noch viel mehr tun, aber wir haben nicht die Zeit dafür. Ich denke, wir sollten es Pause machen. wir uns nun auf die wichtigsten Elemente konzentriert haben , die die Benutzererfahrung beeinträchtigen könnten , denke ich, dass das genug ist, und wir können weitermachen und uns wichtigeren Dingen zuwenden Vielen Dank für Ihr Zuhören Wir sehen uns in der nächsten Lektion 12. Erstellen von Interaktionen: Mauszeiger und gedrückte Zustände: Ein wesentlicher Bestandteil jedes Designs sind die Mikrointeraktionen, die Benutzer während der gesamten Interaktion mit Ihrem Design haben Sie müssen das Gefühl haben, dass es lebendig ist, dass es reagiert, dass es auf ihre Klicks, ihre Mausbewegungen usw. Aus diesem Grund verwenden wir die Interaktionsfunktion von Figma. Ich hoffe, du kennst es. Wir haben es bis zu diesem Zeitpunkt ein bisschen benutzt, aber wir werden es jetzt etwas intensiver nutzen. Wir werden anfangen, es ganz einfach zu machen. Wir werden es nicht übertreiben, aber wir haben gerade diese Tickets gekauft Was wir jetzt tun werden, ist eine weitere Instanz zu erstellen Okay, so werden wir es machen. Ich habe alle Texte gräulich gemacht, und was wir jetzt tun werden, ist, dass wir zumindest diesen Text dunkler machen werden Das ist so einfach wie es nur geht. Nichts allzu Verrücktes. Was wir möglicherweise auch tun könnten , ist , die Schatten stärker zu machen, optional. Jetzt werde ich einen Prototyp dafür erstellen. Ich gehe zum Prototypen-Panel, hole mir diesen Pfeil und platziere ihn hier, statt Onclick, ich sage beim Schweben, Smart Die Animation intelligent animieren und wir werden sehen, wie sie aussieht Okay. Mir gefällt es wirklich gut mit dem Text und allem, aber ich habe das Gefühl, dass der Schatten viel zu stark verschwindet. Es ist viel übertrieben Was Sie tun können, ist, dass wir zehn draus machen und vielleicht können wir die Position erhöhen, das Y und das Acht machen Jetzt geht der Schatten darunter. Ich denke, das ist überhaupt nicht schlecht. Was wir möglicherweise auch tun könnten, wir können das so anpassen, dass das viel schneller passiert. Statt 300 Millisekunden 100, das ist also weniger als Das Schöne ist, dass es sich anfühlt, als ob die Website schneller ist. Es erweckt diesen Eindruck, weil es viel schneller als zuvor auf Ihre Hover reagiert viel schneller als zuvor auf Ihre Hover . Das ist eine Sache, die wir tun können Wir können jetzt nacheinander zu den anderen Elementen übergehen . Wir haben diesen Filter erstellt. Ich werde einfach Filter schreiben. Der Weg, das zu tun, ist, diesen hier zu kopieren und einzufügen und wir werden versuchen, ihn interaktiver zu gestalten. Der Weg, das zu tun, besteht vielleicht darin, es ein bisschen dunkler zu machen. Machen Sie den Text vielleicht etwas dunkler. Lass uns sehen. Also müssen wir es jetzt prototypisieren. Also, während wir nicht drücken, sondern schweben, los geht's. Um ehrlich zu sein, ist das nicht leicht zu erkennen. Ich muss diesen Modus nur ein bisschen entfernen . Okay. Da haben wir's. Manchmal ist es bei einem Schlaganfall auf Figma schwer zu erkennen, weil der Strich etwas zu dünn dafür ist, aber das sieht auch gut Vielleicht sind wir ein bisschen zu dunkel geworden. Und wir können es auch so machen , dass es etwas länger dauert, 200, 200 Millisekunden. Ich finde, es sieht ziemlich gut aus, ziemlich gut Und wir können sie auch etwas dunkler machen , den Da haben wir's. Du bewegst den Mauszeiger darauf, du drückst darauf Perfekt. Da haben wir's. Okay. Als Nächstes haben wir auch diese Menüschaltflächen und wir haben diese Symbolschaltflächen. Diese Symbolschaltflächen befinden sich genau hier. Obwohl es sich bei allen um Symbolschaltflächen handelt, ist das technisch gesehen anders. Wir könnten es Header-Buttons oder so ähnlich nennen. In Ordnung, also wie funktioniert das? Im Grunde werden wir genauso darauf klicken, eine neue Instanz erstellen und die Füllung etwas dunkler machen, also ein kleines bisschen. Und das Gleiche gilt für das Symbol selbst. Jetzt wollen wir sehen, wie es aussieht. Also, während wir schweben, los geht's. So einfach ist das. Siehst du das? Möglicherweise könnten wir es auch vergrößern, um ehrlich zu sein, wir können es 50 mal 50 machen. Dann haben wir viel mehr Platz zwischen ihnen um sie herum, und auf diese Weise haben wir tatsächlich mehr Platz, um auf die Schaltfläche zu klicken, oder? Das ist also erledigt. Was wir möglicherweise auch tun könnten, ist, das ist Pro-Level. Wir könnten eine Version davon hinzufügen , auf die geklickt wird oder die gedrückt wird Wenn wir beide gedrückt halten, klicken wir auf das Plus, ziehen es hierher und wir sagen, während wir drücken Siehst du die also? Wir drücken auf sie und dann verfärben sie sich Das ist beim Drücken. Ähm, im Moment glaube ich, dass es fehlerhaft wird Aber ja, es sollte nur beim Drücken passieren , oder wir könnten sagen, wenn Sie sie anklicken. Sobald Sie also darauf klicken, ist dies der gewählte Status. Aber das wollen wir nicht, aber eigentlich könnten wir es vielleicht von hier entfernen. Da haben wir's. Und wir könnten es beim Drücken wieder einschalten. Wenn Sie mit der Maus darauf zeigen und dann drücken, sollte es sich so drehen Aber denken Sie daran, dass es hier einen Hover gibt. Das ist es, was es durcheinander bringt. Der Schwebeflug bringt es zurück in den Staat und dann wieder hierher und so weiter Testen wir es jetzt noch einmal. Jetzt, während ich drücke, beende ich meine Presse und es ist fertig. Es ist weg. Der Zweck ist natürlich nicht, dass jemand lange klickt, sondern dass er einmal klickt und dann sieht es so aus, und dann kommt es heraus Aber es muss auch nicht so sein wie diese Farbe. Dies ist nur eine sehr starke Farbe die mit der Identität zusammenhängt, aber das muss sie nicht sein. Aber das ist nur, um dir zu zeigen, wie es aussehen könnte. Kommen wir nun zu den Menüschaltflächen. In Ordnung. Also, wenn ich mehrere habe, ich sie gerne kopiere ich sie gerne und füge sie hier ein, beide, und dann fange ich an, Prototypen zu Dann machen wir das, während wir den Mauszeiger bewegen, und ich kann hier dasselbe tun , während ich den Dann könnten wir sie mit den gleichen Werten anpassen , die wir hier haben Diese Farbe, nimm sie hier, füge sie ein und auch diese Farbe. Nun zu diesen werde ich keine gedruckte Version erstellen. Lass es mich einfach anpassen. Ich werde keine gedruckte Version erstellen, sondern ich möchte eine Version erstellen die ausgewählt ist, die ausgewählt ist. Wenn Sie sich auf einer bestimmten Seite befinden und diese dann ausgewählt ist, sollte das angezeigt werden. wähle ich hier einfach das Gleiche Vielleicht wähle ich hier einfach das Gleiche oder lass mich das machen. Ich werde diese auswählen und sie farbig gestalten. Jep. Ich hole das und mache es superleicht. Natürlich ist es immer gut, deinen Varianten dann Namen zu geben Hier sage ich Typ, und das ist die Standardeinstellung, und ich sage hier beim Hover und dann bei Drücken Das Gleiche hier, ich werde nur Typ schreiben. Ich werde diese Standardeinstellungen wählen, wenn der Mauszeiger beim Drücken bewegt wird. Wir können hier auch etwas hinzufügen und sagen, zusammenbrechen, nein. Diese sind, wie gesagt, standardmäßig. Aber das sind Zusammenbruch, du kollabierst ja und hier kollabierst du, nein. Das macht es einfacher zu verstehen, was Sie haben, denn wenn wir jetzt zu diesem Teil kommen oder ich werde ihn hier bearbeiten, werde ich diese auswählen und das werde ich in der Presse sagen. Wir haben gesagt, dass wir das nicht in der Presse haben wollen, sondern ausgewählt haben wollen. Genau. Wenn wir jetzt zu unserem Design gehen, zeigt es uns, auf welcher Seite wir uns befinden, was wirklich cool ist und schauen wir uns den Hover-Effekt Es ist wirklich nett. Es ist wirklich cool. Jetzt haben wir nur noch eine Sache übrig, nämlich einen Prototyp für dieses Panel zu erstellen, das herauskommt, dass dieses auch zusammenklappbar Wir können für beide dasselbe tun. Wir müssen nur herausfinden, wie. Und das ist nicht allzu schwer, also lassen Sie uns das in der nächsten Lektion erledigen. Vielen Dank fürs Zuhören. Wir sehen uns im nächsten. 13. Erstellen einer zusammenklappenden Funktion des Bedienfelds: Ich glaube, ich habe dich genug über diese nette kleine Interaktion geärgert , bei der diese Panels, das rechte, zusammengeklappt und das linke erweitert Nun, das wird ein nicht so einfacher Trick sein, also musst du aufpassen, weil ich selbst nicht genau weiß, wie ich das angehen soll Es gibt viele verschiedene Möglichkeiten es zu erledigen, und wir werden einfach eine davon ausprobieren und sehen, was dabei herauskommt. Ich möchte mich zunächst darauf konzentrieren eine Interaktion für diese zu erstellen, sie einfach zusammenzuklappen und wieder hochzuladen. Und die Art und Weise, das zu tun, ist , ich meine, es gibt verschiedene Möglichkeiten, oder? Aber eine Möglichkeit, das zu tun, ist, dass es so etwas wie eine Ikone gibt, die viele Leute kreieren. Ich werde dir nur zeigen, wie es aussieht, werde es einfach sehr schnell erstellen. Normalerweise hat es eine solche Linie in der Mitte, nicht genau in der Mitte, sondern an der Seite. Und es hat einen Pfeil. Okay. Also sieht es ein bisschen so aus. Ich denke, das könnten wir nutzen. Aber es geht nicht genau dahin , wo wir es haben wollen. Es ist ein bisschen schwer zu kontrollieren. Aber ich denke, wir werden es herausfinden. Das ist gut genug. Das nehme ich gleich hier. Ups. Ich werde den da reinlegen Ich werde das umdrehen. Ups. Okay. Ich werde es ausschneiden und hier hinzufügen. Okay. Dann werde ich die Farben ändern. Ich werde es wirklich dunkel machen, nicht zu dunkel. Mal sehen, wie es aussieht, wenn es sichtbar ist. Okay. Um ehrlich zu sein, ist es nicht so sichtbar. Und wir wollen, dass es gesehen wird , damit es von den Menschen verstanden wird. Also lass es uns vielleicht ein bisschen größer machen. Die Idee ist, dass es hier eine Seitenwand zeigt. Wir können auch versuchen, es etwas dicker zu machen. Das hat nicht sehr gut funktioniert. Lassen Sie uns einfach darauf zurückkommen, wie es war, und versuchen, es zum Laufen zu bringen. Jetzt haben wir das und wir werden das nehmen, wir werden es hier einfügen und wir werden das Ganze zu einer Komponente machen und wir werden es Aufgaben-Panel nennen. Dann werden wir diese Instanz davon hinzufügen. In diesem Fall werden wir es im Grunde einfach so schließen. Okay, und damit machen wir im Grunde, dass wir im Grunde, dass wir die ganze Sache herunterfahren und dann alle Inhalte nehmen, die wir haben, außer dem Symbol, das wir gerade erstellt Wir nehmen den gesamten Inhalt bis hierher und wir werden ihn nach rechts bringen , sodass er quasi verschwindet Dann könnten wir das vielleicht sogar kleiner machen. Jetzt schauen wir uns an , wie das aussieht. Vielleicht nehmen wir es auf. Und dann machen wir einen hübschen kleinen Knopf draus. Wir werden daraus das machen, aber nicht, indem wir auf das Panel klicken, sondern indem wir auf diese Schaltfläche klicken, es wird zu diesem und es wird vielleicht 300 Millisekunden dauern Wenn wir dann auf diese Schaltfläche klicken, geht es zurück. Ja. Dann sollten wir diesen Knopf vielleicht umdrehen. Es bezieht sich auf diesen Rosenkranz, sodass man versteht, dass, wenn Sie darauf klicken, er umgekehrt wird Jetzt nehmen wir das heraus, lassen es an der Seite und fügen dieses Panel hinzu Wir werden es hier ausrichten und sehen, wie es jetzt funktionieren würde. Nun, das ist sehr nett. Man kann sehen, es hat sehr gut geklappt, hat eine nette kleine Animation. Aber es gibt ein Problem. Wir wollen nicht, dass es hier zusammenbricht, wir wollen, dass es nach rechts geht und wir wollen, dass sich das Ganze ausdehnt. Was auch ein bisschen knifflig sein wird . Der Weg, das zu tun, ist , dass wir alle diese drei behalten und sie zu einem automatischen Layout machen. Und dann nehmen wir sie hier zur Seite und kommen zu diesem kleinen Armaturenbrett. Und wenn wir dieses Dashboard erweitern, werden Sie feststellen, dass die Dinge aus dem Ruder laufen. Das wollen wir nicht. Wir wollen, dass es gleich bleibt, wenn wir Dinge bewegen. Ich werde alle Elemente auswählen und sie einrahmen, und dann werde ich sie von oben und unten zentrieren. Wenn wir das jetzt verschieben, bleiben sie zentriert. Okay. Also, wir werden zu diesem automatischen Layout kommen und ihm sagen , dass es für diesen Frame den Container so weit wie möglich füllen wird, Container so weit wie möglich füllen wird außer dass wir ein wenig Polsterung auf der rechten Seite hinzufügen, weil wir nicht wollen, dass der Platz auf der rechten Seite so verengt wird Siehst du? Also werden wir es auf der rechten Seite erzählen. Wir klicken hier und sagen auf der rechten Seite, wir wollen 24, jetzt sieht es gesund aus. Gehen wir jetzt zurück und sehen, dass etwas nicht stimmt. Lass uns das auffrischen. Alles klar, also so sieht es aus. Und wenn wir auf die Schaltfläche „Reduzieren“ klicken , wird sie zusammengeklappt, wie Sie sehen können, und diese Schaltfläche bleibt einfach hier. , ist dieser Raum immer noch ein bisschen verschwendet, ehrlich zu sein, ist dieser Raum immer noch ein bisschen verschwendet, worüber ich nicht glücklich bin. Aber das Ziel hier ist , mehr Aufmerksamkeit auf das zu richten , was Sie hier haben. Denken Sie also daran, lassen Sie sich nicht von anderen Dingen ablenken Das ist ein wirklich cooles Feature, das du bauen kannst, aber wir wollen etwas Ähnliches für die Linke bauen, aber nicht unbedingt mit diesem Button, sondern mit etwas anderem Und nur um das bis zum Ende zu machen, möchte ich sichergehen, dass wir auch eine Version davon haben. Wir werden es kopieren und einfügen. Ich möchte eine Version davon , die hervorgehoben ist. Dieser hat diese Farbe, sollte aber eigentlich weiß sein. Wenn du es hervorhebst, wird es etwas dunkler. Also werden wir eine schwebende Interaktion hinzufügen. Es 200 und wir werden sehen, wie es aussieht. Da haben wir's. Aber es ist ein bisschen zu dunkel. Lass mich von hier aus schummeln, nimm diese Farbe. In Ordnung. Es ist genau hier, und wir können die Farbe hier selbst vielleicht etwas dunkler machen . Okay. Ich kann es nicht gut sehen, weil es zu dünn ist. Aber ja, da hast du es. Jetzt findet hier eine gewisse Interaktion statt, was ich wirklich liebe. Es ist ein wirklich cooles Feature. Okay, jetzt haben wir gelernt, wie man ein zusammenklappbares Seitenmenü oder wie auch immer Sie es nennen möchten, Und in der nächsten Lektion werden wir hier lernen, wie man eine Hover-Funktion erstellt Wie ich bereits erwähnt habe, werden wir das jetzt etwas anders machen Anstatt diese Schaltfläche hier zu haben, was viele Leute tun, möchte ich, dass sie mit einer Hover-Funktion funktioniert Wenn Sie also mit der Maus darauf zeigen, werden Ihnen die Wenn Sie den Mauszeiger nicht drüber bewegen, wird es so zusammenbrechen, weil Sie es einfach nicht brauchen Okay, wir sehen uns in der nächsten Lektion. 14. Erstellen einer Hover-Interaktion für Seitenleiste: Was meinen nächsten Zaubertrick angeht, werde ich hier eine Hover-Funktion hinzufügen, die Ihnen die nicht zusammengeklappte Version des Seitenmenüs anzeigt, das vollständig geöffnet ist und alle Titel und Texte usw. Okay? Also sind wir fast da , weil wir diese beiden Fälle bereits hatten, also haben wir uns die Sache wirklich etwas leichter gemacht . Wir können es hier benennen. Wir könnten sagen, du weißt schon, Zusammenbruch. Und dann könnten wir hier nein sagen, und hier können wir sagen, ja, teilweise zusammengebrochen. In Ordnung, wie machen wir das? Nun, es ist nicht so schwierig. Du gehst hier einfach auf die Prototyp-Seite und kommst hierher und klickst, während du mit der Maus darüber fährst Der Auslöser ist, dass, während Sie mit dem Mauszeiger darauf fahren, zur nicht zusammengeklappten Version gewechselt wird, und das passiert mit der Animation Smart Anim Ease und das passiert mit der Animation Smart Anim Ease out 500. Lassen Sie uns jetzt weitermachen und sehen, wie es aussieht. Da hast du's. Sieht echt klasse aus. Es ist sehr nett, aber vielleicht kannst du es etwas schneller machen . Also vielleicht 300. Und Sie können jeden einzelnen Punkt auf der Liste durchgehen, und das ist so ziemlich alles. Aber es ist nicht so einfach, weil wir gerade ein Problem haben. Wenn es auseinanderfällt, wenn es sich ausdehnt, deckt es einen Teil des Armaturenbretts ab, und das auf sehr unschöne Weise. Und der Weg, das loszuwerden, besteht möglicherweise darin, diesen ganzen Rahmen zu betrachten und ihn so zu und ihn so zu gestalten, dass er sich an den Inhalt anpasst. Wenn das passiert, wenn wir das tun, wird das Dashboard zusammen mit den Aufgaben nach rechts Aber lassen Sie uns sicherstellen , dass dies unseren Effekt hier nicht beeinträchtigt. Und das hat es leider getan. Der Grund dafür ist, dass du, wenn du das tust, den Rahmen mitteilst, den Inhalt umarmst, nicht expandierst, nicht weiter gehst Wenn dieser Inhalt kleiner wird, sollten Sie mit dem Inhalt kleiner werden Wenn es größer wird, dann wirst du damit größer. Aber diese beiden Effekte wirken jetzt gegeneinander. Jetzt müssen wir einen Weg finden , sie miteinander in Einklang zu bringen. Ich werde das tun, indem ich diesen Frame-Fill-Container mache. Aber das Problem ist, sobald Sie das tun, wird die Breite des gesamten Frames nicht mehr groß, sondern fest Wenn Sie das Gegenteil tun, wird der Wert von „gefüllt“ zu „fest“ geändert Wie Sie sehen können, handelt es sich um totale Gegensätze. Sie schalten sich gegenseitig aus. Es gibt einen Workaround. Es wird nicht genau das sein, was wir tun wollen. Aber der Weg, das zu tun, ist, dass du das in ein automatisches Layout einfügst, aber anstatt es zu umarmen, machst du es mit einer festen Breite Das heißt, wenn das Menü erweitert wird, wird der Rahmen, in dem es sich befindet , nicht mitvergrößert Der resultierende Effekt ist das , was Sie gerade sehen. Es dehnt sich also aus, aber nicht mit dem Rahmen, nichts anderes bewegt sich. Aber im Grunde wollen wir, dass sich das gesamte Menü oben auf dem Dashboard befindet, nicht dahinter. Hier erfahren Sie, wie Sie das Problem lösen können. Sie klicken auf den Rahmen und nehmen diese Anpassungen vor , wenn es um das Stapeln von Leinwänden geht . Anstatt zuletzt oben, sagen Sie zuerst oben Die erste Ebene hier wird über der anderen liegen und da haben Sie sie Natürlich behält es nicht den Effekt bei, den wir uns wünschen, es sich im Grunde so darstellt, als ob es sich um Fenster handelt. Aber ich denke, das ist in Ordnung. Wir können damit leben und wir können hierher zurückkehren und das so einrichten Container gefüllt wird , sodass dieser Trick funktioniert. Schauen Sie sich jetzt an, wie es funktioniert. Also von dieser Seite aus funktioniert es und von dieser Seite ist es erweiterbar und sieht ziemlich gut aus. Wir haben unsere Projekte, Aufgaben, unseren Kalender, unser Team, alles, was wir brauchen, und das hat diesen coolen kleinen Effekt Nun, eine Sache, die mich, um ehrlich zu sein , ein bisschen nervt, ist, dass es manchmal nicht so ist Es gibt noch eine weitere Ebene, eine zusätzliche Ebene. Denn was ist, wenn ich auf das Symbol klicken möchte , aber sobald ich darauf komme, bewegst du einfach Dinge. Und dafür gibt es eine Lösung. Anstatt also mit dem Hover zu arbeiten , während der Mauszeiger als Auslöser bewegt wird, sollten Sie mit der Maus-Eingabetaste arbeiten , weil sie sagt: Wenn die Maus in dieses Objekt eindringt, wird es expandieren oder sie wird diese Aktion ausführen, aber Sie können eine Verzögerung hinzufügen Also zum Beispiel 500 Millisekunden. Was dann passiert, wenn Sie mit der Maus sich nicht sofort Du musst den Mauszeiger bewegen und dann, 500 Millisekunden später, Ich werde tatsächlich 1.500 draus machen . Es gibt jedoch ein Problem. Sobald Sie mit der Maus darauf zeigen, geht es nicht mehr zurück. Um dieses Problem zu lösen, müssen Sie zu diesem Frame zurückkehren und ihm eine Interaktion geben, und der Auslöser sollte die Maustaste sein. Sobald die Maus die Seite verlässt, haben Sie nach 1.500 Millisekunden ebenfalls eine Option Sie haben eine Verzögerung, und dann wird es zusammenbrechen . Mal sehen, wie es aussieht. Du bewegst den Mauszeiger darauf und etwas später öffnet es sich. Du entfernst es. Und dann schließt es sich. Was daran wirklich cool ist, es mag wie ein kleiner Unterschied erscheinen, aber genau darum geht es bei UX. Es geht um diese kleinen Mikrointeraktionen. Was cool ist, ist, dass es dem Benutzer zunächst die Möglichkeit gibt, sehr schnell zu wechseln , da es Poweruser gibt, sehr schnell zwischen den Tabs wechseln möchten . Sie wollen hier und da klicken. Wenn du es erweiterst, hilft es der Person also nicht. Es steht ihnen im Weg, Dinge zu tun, oder? Und es ist wie eine zusätzliche Animation , die nicht passieren muss. Wenn sie bereits auf die Seite klicken zu der sie gehen möchten, dann hast du sie nicht wirklich gebraucht. Deshalb ist das cool, weil es einer Verzögerung führt, falls sich jemand nicht wirklich auskennt oder jemand ein neuer Benutzer ist und er sagt: Hey, was war das für eine Seite? Und dann dauert es diese drei zusätzlichen Sekunden und dann öffnet es sie für sie. Und sagt ihnen, okay, hier ist eine Erklärung für alles. Du scheinst dich nicht auszukennen, also hier ist alles erklärt. Wenn du dich dann bewegst und dann immer noch zurückkommen willst, hast du immer noch Zeit. Deshalb gibt es auch beim Zusammenbruch eine Verzögerung. Aber wenn du sagst, hey, ich bin fertig, muss ich diese Dinge überprüfen und dann geht es runter Aber statt 1.500 werde ich es schaffen, vielleicht 1.000 Millisekunden Verzögerung, ich denke, das ist mehr als genug. Jetzt schauen wir uns an, wie das aussieht, und dann wähle ich, wo ich will, und dann bin ich fertig. Bam. So einfach ist das Einfacher geht es nicht. Und ja, ich finde das wirklich cool. Jetzt haben wir ein wirklich schönes, interaktives Layout und es fühlt sich lebendig an, oder? Es fühlt sich an, als wäre es anpassbar. Du kannst sagen: Hey, ich will die Aufgaben sehen. Ich möchte die Aufgabe nicht sehen. Ich möchte sehen, ob ich das Jahr filtern möchte . Nein, eigentlich möchte ich das Menü hier öffnen und mir andere Dinge ansehen. Völlig okay, absolut machbar. Das ist einfach richtig geil. Und es verbessert einfach die Benutzererfahrung. Jetzt, wo wir das erledigt haben, werden wir in den nächsten Lektionen noch ein paar andere Dinge tun. Eines davon ist, dass wir unsere Benutzeroberfläche ein wenig verbessern werden. Wir haben sehr begeistert angefangen und viele Dinge getan Aber vielleicht ist es an der Zeit, dass wir zurückgehen und einige davon überdenken Wenn ich mir das nur kurz ansehe, könnte ich sagen: Hey, die Farben sind ein bisschen zu hell Ich spreche nicht davon, die Farben zu ändern, alle Farben sofort, sondern vielleicht damit herumzuspielen, sie ein bisschen heller zu machen, sie zu erweitern, weil wir sicherstellen wollen , dass die Aufmerksamkeit des Benutzers auf die Dinge gelenkt wird , auf die er sich eigentlich konzentrieren sollte. Okay. Und darüber hinaus werden wir einige weitere Funktionen hinzufügen. Eine dieser Funktionen sind also die Benachrichtigungen. Wir könnten auch etwas mit Verlauf, Profil und Suche machen. All dies sind Möglichkeiten dessen, was wir tun könnten. Darüber hinaus möchte ich auch die Möglichkeit für uns schaffen, auf eine andere Seite zu wechseln. Nur um Sie zu warnen: Ich glaube nicht, dass wir die Zeit haben, diese Seiten mit aussagekräftigen Inhalten zu füllen, aber ich denke, wir sollten den Prozess des Wechsels von einer Seite zur anderen prototypisch gestalten. Ordnung. Vielen Dank fürs Zuschauen Ich sehe mir die nächste Lektion an. 15. Scrollen: In Ordnung, jetzt haben wir also ein wirklich schönes Layout. Aber eine Sache fehlt noch, oder vielleicht könnte es ein nettes kleines Addon sein, und das ist eigentlich dieser Teil hier. Wir haben die Aufgaben, aber Sie können sehen, dass eine davon abgeschnitten ist, und das ist kein Versehen. Wenn du es weißt, weißt du es. Das ist im Grunde ein nettes kleines Feature, ein netter kleiner Trick, Designer und Ingenieure häufig anwenden und der im Grunde genommen dazu dient, zu zeigen, dass es mehr Inhalt gibt. Es wird als Teaser bezeichnet oder zumindest nenne ich es so. Ich necke den Inhalt und es zeigt dir, dass es die Möglichkeit gibt, nach unten zu scrollen und immer mehr Inhalte zu sehen sehen, ob wir das Ganze so geformt hätten, wenn wir es so dimensioniert hätten, dass die letzte Karte hierher kommt, dann hättest du keine Ahnung, dass es noch mehr Karten gibt Schauen wir uns jetzt unser Design hier an. Wir haben diese coolen Funktionen. Wir haben sie gebaut. Aber jetzt möchte ich nach unten scrollen, aber ich kann, wäre echt cool wenn ich in diesem Panel nach unten scrollen könnte. Wie können wir das machen? Anstatt hier zu bearbeiten, stellen Sie sicher, dass Sie zur Komponente selbst gehen. Sie möchten nicht mit einer Instanz bearbeiten. Sie möchten sicherstellen , dass Ihre Änderungen der Hauptkomponente gespeichert werden, kommen Sie her und hier erfahren Sie, was Sie tun werden. Sie gehen gleich hier zum Prototyp-Panel und wechseln zur Registerkarte Prototyp. Und du wirst zum Überlaufen kommen. Überlauf bedeutet, dass alles, was über den Frame fließt, und anstatt nicht zu scrollen, werden Sie es vertikal einrichten Jetzt kommt es natürlich darauf an. Ist es vertikales Scrollen oder ist es rechts und links wie horizontal? Oder sind es beide Richtungen? Nun, für uns ist es vertikal. Lass es uns jetzt überprüfen. Da hast du's. Da kannst du rauf und runter scrollen und Dinge sehen. Ich meine, es wird ein bisschen zerschnitten. Von hier unten wird es ein bisschen beschnitten. Es ist nicht perfekt, aber es funktioniert. Das ist also wirklich gut und wir haben etwas Nettes am Laufen. Eine Möglichkeit, das Problem zu beheben, wäre , das Ganze in einem automatischen Layout zu erstellen. Aber im Moment ist es ein bisschen zu spät dafür , weil es viele Dinge durcheinander bringen wird. Aber ich meine, wir können es versuchen. Also lass uns sehen. Also, wir werden das einfach machen. Okay. Und wir werden diesen bösen Jungen mitbringen. Wir werden es hierher bringen. Und dann werden wir die Werte festlegen. Okay. In Ordnung. Also wollen wir sichergehen, dass die Größe genau so ist, wie wir sie vorher hatten, nämlich 839 Anstatt es zu umarmen, sollte es 839 sein, und dann können wir den Abstand ändern Ich würde empfehlen , dass Sie diese und diese zusammen in einem automatischen Layout zusammenfügen Auf diese Weise sind sie näher beieinander. Sie haben zum Beispiel einen Abstand von 16, und dann können Sie allem anderen 24 geben. Schauen wir uns das jetzt an. Ich werde mich nur auffrischen. Wenn du jetzt nach unten scrollst, lass uns sehen. Ordnung. Es gibt noch eine Sache zu tun, nämlich alles in ein automatisches Layout zu legen und dann zum Hauptrahmen zu wechseln und das Scrollen zu entfernen Mach es ohne Scrollen. Jetzt haben wir ein Layout wie einen Rahmen innerhalb eines Rahmens, und wir werden hier etwas Abstand hinzufügen Nur ein bisschen mehr. Wir versuchen nur sicherzustellen, dass das Dashboard und die Aufgaben hier aufeinander abgestimmt sind. Ich gebe einfach vier. Lassen Sie uns jetzt überprüfen, wie es aussieht. Nun, es gibt noch eine Sache zu tun. Jetzt siehst du das, es quillt über. Was du tun wirst, ist , es zu Fall zu bringen. Du wirst es hierher bringen. du wirst dafür sorgen, dass es den Behälter füllt und dann reparieren wir es einfach so. Sie können nach oben scrollen, sodass Sie genug Platz nach oben haben, und wenn Sie nach unten scrollen, werden Sie sehen, dass hier genug Platz ist. Es geht runter und ja, das ist so ziemlich alles. Der Grund, warum wir das Ganze gemacht haben, ist, dass es sauberer ist. Es funktioniert besser, weil Sie jetzt automatische Layouts haben. Der Abstand zwischen ihnen ist perfekt, und auf diese Weise können wir wirklich schöne statt konsistente Abstände erzielen. Das ist gut und macht Sinn und es funktioniert. Also ja, so können Sie im Grunde das Scrollen erstellen. Und nur um das klarzustellen, ich werde eine dieser Karten einfach mehrmals kopieren, um dieser Karten einfach mehrmals dir zu zeigen, wie weit wir nach unten scrollen können Wenn Sie also viele Aufgaben hätten, würde es so aussehen. Du scrollst einfach hoch und runter und du kannst dir viele Dinge ansehen . Nun, ich würde das nicht empfehlen. Ich würde empfehlen, dass Sie irgendwann alle Aufgaben ansehen. Das wäre viel sinnvoller. Aber ja, das war der ganze Zweck dieser Lektion, nämlich zu lernen, wie man scrollt, und du lernst wie man das macht, herzlichen Glückwunsch Wir sehen uns in der nächsten Lektion. 16. Erstellen eines Popup-Benachrichtigungsfensters: Ordnung. Also eine Sache , die in diesem Design momentan fehlt , nach allem, was wir getan haben , ist vielleicht eine gewisse Interaktivität in diesem Bereich Nun, wir haben bereits einige Hover-Effekte eingebaut , was ziemlich cool ist, muss ich sagen Aber vielleicht können wir sie anklicken lassen, oder? Was ist, wenn wir auf sie klicken Wir haben auch diese Pressestaaten, was auch cool ist. Aber wie wäre es, ein aktuelles Panel zu sehen , das Ihnen die Benachrichtigungen anzeigt? Lassen Sie uns weitermachen und das sehr schnell gestalten. Es gibt also verschiedene Möglichkeiten , wie Sie dies tun können. Sie könnten einen ganzen Bildschirm für Benachrichtigungen erstellen. Weißt du, auf manchen Websites wirst du, wenn du auf Benachrichtigungen klickst, auf eine ganz andere Seite weitergeleitet, aber das gefällt mir wirklich nicht. Ich persönlich mag es, wenn Sie ein Panel haben, das nicht den ganzen Bildschirm einnimmt, sondern einen Teil des Bildschirms und Ihnen die Benachrichtigungen nacheinander anzeigt, und dann können Sie, wenn Sie alle Benachrichtigungen sehen möchten , dann können Sie zu einer anderen Seite gehen weil das einfach schneller ist. Sie müssen nicht zwischen den Seiten wechseln und können einfach sehr schnell nachschauen. Lassen Sie uns also weitermachen und das entwerfen. Das Erste, was wir tun werden, ist, einen Rahmen zu erstellen, das Rahmenwerkzeug zu nutzen und etwas zu erstellen und ich schaue es mir gerade an, aber wir können es ändern Ich mache ihn etwas breiter und gebe ihm dann einen gewissen Eckenradius, stelle sicher, dass es derselbe ist Dann können wir ihm auch einen ähnlichen Schlagschatten geben. Jetzt haben wir das. Das Erste, was wir tun werden, ist, ihm einen Titel zu geben , darin werden wir etwas schreiben und daraus ein automatisches Layout machen und ihm 24 geben. Und ich weiß, was du denkst: Oh, wir haben uns nur die Größe angesehen und sie dann, weißt du, komplett ruiniert Nun, du hast recht. Also werden wir dieses Benachrichtigungszentrum anrufen. Ordnung. Und oder sagen wir einfach Benachrichtigungen. Halte es einfach. Und dann werden wir diese Benachrichtigungskarten erstellen. Sie werden also den Ticketkarten ähneln. Es wird nicht etwas ganz anderes sein. Lassen Sie uns das einfach als Grundlage nehmen, es einfügen, mit der rechten Maustaste klicken, Instanz trennen und dann lassen Sie uns weitermachen und ja, schauen wir es uns an und sehen, wie wir es ändern können Eine Sache, die wir vielleicht nützlich finden könnten, ist, Zeit, Datum und Uhrzeit zu haben , keine Anlagen, keine Personen Ja, eine Zeit dafür zu haben ist ziemlich cool, und wir müssen nicht unbedingt und wir müssen nicht unbedingt ein Symbol dabei haben, um ehrlich zu sein, also können wir das einfach entfernen und dann entfernen wir diesen Rahmen, und wir können vielleicht das Datum dort platzieren. Okay. Und jetzt haben wir diese beiden. Und darüber hinaus möchte ich hier einen Kreis bilden. Ich mache daraus einen Rahmen, gebe ihm eine Farbe und gebe ihm einen Radius von 50 Ecken. Nun, das ist ein Ort, an dem wir ein Symbol hinzufügen können. Lass uns einfach ein Symbol erstellen, den Buchstaben A eingeben und fantastisch schreiben. Und dann werden wir einfach Ausrufezeichen schreiben. Ups, Ausruf. Zeichen oder Punkt, Ausrufezeichen. Das hat nicht funktioniert Lass uns einfach ein Fragezeichen machen oder du kannst einfach ein Fragezeichen setzen, vielleicht, hoffentlich. Wir haben keinen Feststoff. Schauen wir uns einfach Ausrufezeichen an. Das ist es. Das ist alles was wir brauchten. Wir werden es hier hineinlegen und dann machen wir daraus ein automatisches Layout und wir werden sicherstellen , dass es ein festes Seitenverhältnis hat, und wir werden die Farbe von hier stehlen, sie dort platzieren und okay. Das ist sehr hell. Okay, es ist sehr hell, aber wir können es ein bisschen dunkler machen . Keine Sorge. In Ordnung, jetzt sehen wir es so aus. Immer noch nicht sehr zufrieden damit. Du kannst das einfach komplett löschen und nur einen Titel für die Benachrichtigungen haben. Es ist immer gut , darüber nachzudenken, welche Art von Benachrichtigungen ich erhalten könnte? Also werde ich diese zu einem automatischen Layout hinzufügen, und lassen Sie uns diese auch in ein automatisches Layout einfügen. Wir werden acht daraus machen und diese dann in ein automatisches Layout einfügen. Und dann werden wir das Ganze zu einem automatischen Layout machen . Ja, das funktioniert. Das funktioniert irgendwie. Okay. Vielleicht können wir hier den Eckenradius verringern und das Gleiche gilt für die Polsterung Ordnung. Jetzt werden wir daraus eine Komponente machen und sie testen. Wir werden Benachrichtigung sagen. Jetzt haben wir das als Benachrichtigung, kopieren wir es, fügen es hier ein, und dann machen wir es vertikal, und wir geben ihr 36 und dann werden wir kopieren, einfügen, kopieren und einfügen. Fügen Sie all diese Elemente im automatischen Layout zusammen. 16 oder acht, und dann haben wir sie zusammen, nahe beieinander. Dann werden wir dem einen Füllbehälter geben. Wir werden dafür sorgen, dass es den Behälter füllt, und dann werden wir dafür sorgen, dass all diese auch den Behälter füllen. Hier stellen wir bereits ein Problem fest. Dies ist vollständig Teil des Prozesses. Sie stellen fest, dass Sie hier einen bestimmten Abstandswert haben. Aber in Wirklichkeit sollte es automatisch sein. Dadurch können diese drei Punkte bis zum Ende geworfen werden. Hier sieht es nicht anders aus, aber jetzt können Sie sehen, dass es gerade repariert wurde. Jetzt haben wir diese Benachrichtigungen und sie wurden einfach geworfen, dann können wir mehrere haben und genau wie zuvor können wir auch weitere Benachrichtigungen hinzufügen, können wir auch weitere Benachrichtigungen hinzufügen sodass die Person scrollen muss. Damit gibt es überhaupt kein Problem. Wir müssen jetzt nur zurückgehen und diese etwas neutral gestalten , also sagen wir einfach Datum und wir sagen Titel der Benachrichtigung. Jetzt stellen wir ein weiteres Problem fest: Hier gibt es keine Füllung. Vielleicht möchten wir, dass es den Behälter füllt. Das Gleiche gilt für diesen, also fülle den Behälter. Sie können dies tun, indem Sie Alt gedrückt halten und doppelklicken. Das Gleiche hier, es ist schon erledigt, hier ist gut, hier ist gut, hier ist gut Bam Okay, also der Titel der Benachrichtigung, und dann siehst du, du kannst hier sagen, Beschreibung, sehr kurze Beschreibung oder Zusammenfassung Hier könnte man also sagen, dass eine dringende Aufgabe Aufmerksamkeit erfordert. Sie haben die Frist für eine Aufgabe verpasst , die als dringend markiert wurde. Bitte passen Sie auf, bitte kümmern Sie sich um da da da, und dann geht die Nachricht weiter. In Ordnung. Also können wir dasselbe für die anderen tun, aber die Hauptidee ist, dass wir auch das Symbol hochschalten können , damit wir hier eine Frage schreiben können. Okay. Und jetzt bemerke ich ein anderes Problem Der Text ist nach links ausgerichtet. Wir gehen zurück und richten es an der Mitte aus. Jetzt ist es zentriert. Perfekt. Und falls Sie das bemerken, ich meine, das ist eine dringende Aufgabe, aber es sieht nicht nach einer dringenden Aufgabe aus. Es vermischt sich einfach mit den anderen. Nun, das liegt an den Farben. Wenn wir uns jetzt für ein dringenderes Farbschema wie dieses entscheiden , werde ich diese Farbe hier stehlen. Dann sieht es viel dringender aus. Das, was ich an diesen Kreisen oder Bildern oder Symbolen oder was auch immer Sie verwenden mögen , ist, dass sie mit Farben und Formen eine Idee vermitteln und Ihnen sagen: Hey, irgendwas geht vor sich. Hier siehst du das Fragezeichen und du kannst , dass es ein Problem gibt. Hier könnten Sie sagen, dass verdächtige Aktivitäten erkannt wurden. Haben Sie Ihr Konto von einem anderen Gerät aus angemeldet? Bitte überprüfen Sie abla. Okay. Und dann können wir den 14. Januar, den 7. Januar den 16. und oder sollten wir sagen, Juli Juli geben ? In Ordnung. Und dann kannst du viel mehr andere Symbole haben. Die Icons können auch sehr interessant sein, ich weiß nicht. Ich meine, wir können zu diesem zurückkehren und es einfach zum Takten bringen. Uhr, so etwas in der Art, und dann können wir andere Arten von Benachrichtigungen haben. Vor allem aber wollen wir sehen, wie wir dieses Benachrichtigungsfeld hier mit dieser Schaltfläche verknüpfen können dieses Benachrichtigungsfeld . Wie werden wir es also verknüpfen? Wir werden zum Prototyp übergehen, und jetzt sehen wir bereits, dass wir einen Schwebeeffekt haben , kein Problem, kein Problem Wir werden das den ganzen Weg hierher ziehen. Jetzt, wo wir das haben, werden wir sagen: Okay, du wirst klicken, wenn du darauf klickst, richtig? Das ist also der Auslöser. Die Aktion wird ein offenes Overlay sein. Overlay ist Frame 67. Wir können ihm einen Namen geben Wir können Benachrichtigungen, Popup oder Fenster oder wie auch immer Sie es nennen möchten, sagen . Und dann überprüfst du es, oder? Das ist der richtige. Anstatt es zentriert zu haben, wirst du manuell wählen und es dann platzieren, wo es sich richtig anfühlt, um ehrlich zu sein. Also hier ist es sehr schön platziert. Sie können den Hintergrund auch etwas dunkler machen. Realistisch gesehen tun das die meisten Apps nicht, und ja, du brauchst wirklich keine Animation Lassen Sie uns nun überprüfen, wie es aussieht. Jetzt werden wir darauf klicken. Da ist es. Es gibt ein Problem: Es vermischt sich zu stark mit dem Hintergrund Sie können dieses Problem auf zwei Arten lösen. Entweder machst du den Hintergrund, also gibst du dem Hintergrund eine Farbe. Das ist ein Trick, um das zu tun. Das ist wirklich nett , weil du dich so voll und ganz darauf konzentrieren kannst. Es entfernt den Fokus von allem anderen gerne verwenden, wenn es für Sie funktioniert. Abgesehen davon können Sie auch einfach versuchen, dieses Panel interessanter aussehen zu lassen. Das könnte mit Farbe sein. Es könnte mit Schatten sein. Wir haben 5%. Wir können es zu 50% schaffen. Und im Moment sieht es wirklich schrecklich aus, aber das ist nur eine Vorstellung davon, was Sie tun könnten Setzen wir die Farbe zurück. Lass uns vielleicht versuchen, nur mit den Schatten zu arbeiten. Aber ja, mit den Schatten ist es jetzt viel besser damit. Aber ich würde trotzdem sagen, weißt du, vielleicht versuchen, einen Mix zu machen. Also lass uns das jetzt versuchen. Also werden wir einen Hintergrund angeben, aber es werden nur 10% sein. Und ja, es sieht viel schöner aus. In Ordnung, also wiederhole ich es, öffne es. Da hast du's. Das sind Benachrichtigungen. Denken Sie nur daran, einen Ausweg zu haben , denn wenn Benutzer darauf drücken, werden sie Benachrichtigungen erhalten . Sie müssen es herausklicken. Also klicken Sie entweder außerhalb davon, was eine Einstellung ist, die ich unbewusst genau hier gesetzt Wenn das nicht aktiviert wäre, würdest du hier und da klicken und was auch immer, und du würdest nicht mehr rauskommen können Wenn das also der Fall wäre, müssten Sie hier eine X-Taste haben. Nur damit die Leute das Pop-up abbrechen, schließen und zu etwas anderem übergehen können . Stellen Sie einfach sicher, dass Sie das angekreuzt haben und es macht Sinn. Das machen viele Apps Es fühlt sich an wie ein Fenster. Sobald du außerhalb davon klickst, ist es weg. Ich wollte nur zurückkommen und dir übrigens sagen, dass du nicht genau dieses Setup nehmen musst. Zum Beispiel, wenn wir die Schatten hier entfernen. Jetzt siehst du die Benachrichtigungen, sie funktionieren immer noch ohne Schatten, völlig in Ordnung. Alternativ könnten Sie eine Zeile nehmen . Ich werde die Zeile hier einfügen und ich werde den Behälter füllen, und ich werde ihn ein bisschen großartig machen. Da hast du's. Einfach so eine Zeile. Ich mache es leichter und dann kopiere und füge es ein, kopiere es, kopiere es und füge es ein, und dann hast du diese Trennlinien zwischen den einzelnen Benachrichtigungen, und dann hast du eine Vorstellung davon welche Benachrichtigungen du hast Ich werde das zurücknehmen. Auf meinen Stil. Ich mag es ohne den Schatten, also werde ich es einfach behalten, denn manchmal, wenn man sicherstellen will , dass jedes Element und jede Ecke sichtbar ist, man zu viel Gewicht aus, zu viel Druck auf den Benutzer , all das wahrzunehmen. Diese Karten sind sinnvoll , weil Sie wissen müssen, dass jede Karte eine separate Karte ist , die Sie verschieben können, die Sie hin- und herschalten können, was auch immer. Aber hier ist das nicht der Fall. Nun, eine Sache, die wir tun können, ist, einen Hover-Effekt hinzuzufügen. haben wir schon einmal gemacht. Wir können es wieder tun. Ich kann nur diese 10% Schatten hinzufügen und dann könnte ich das etwas dunkler machen. Und das ist noch dunkler. Dann mache ich daraus einfach einen Haber-Effekt. Dann schauen wir mal, wie es aussieht. Es ist sehr schnell. Also machen wir Smart Animate 200 und wir werden uns damit beruhigen Wir werden ihm 5% geben. Jetzt sieh dir an, wie es aussieht. Bei diesem Farbwechsel ist es ein bisschen zu viel, also werde ich es wieder dahin bringen, wo es war, oder zumindest versuchen, es zu tun. Nun, es ist nicht mehr sichtbar. Ein bisschen dunkler Okay, das sieht natürlicher aus und jetzt ist es schöner Es fühlt sich jetzt interaktiver an , da wir diese Dinge auswählen können, zumindest mit dem Mauszeiger darauf zeigen und dann noch etwas anderes Okay? Eine andere Sache, die wir tun können, ist Scrollen Ich versuche schon lange zu scrollen. Ich weiß nicht, ob Sie es bemerkt haben, aber das wäre eine großartige Funktion , die Sie hinzufügen könnten. Okay? Also, wir machen das so, wie wir es zuvor gelernt haben, wir werden dafür sorgen, dass das den Behälter füllt. Also einfach, es wird abgeschnitten und Sie können sehen, dass es mehr Inhalt gibt. Gehe zum Prototyp und klicke diesmal auf Vertikal. Ich meine, beim letzten Mal haben wir es auch vertikal gemacht, und dann kannst du nach unten scrollen. In Ordnung, so einfach ist das. Es gibt nur eine Sache , die mich nervt. Visuell gesehen können Sie sehen, dass die Benachrichtigungen nicht mit den Karten übereinstimmen Wenn du mit der Maus über sie fährst, macht es Sinn, aber vielleicht möchten wir das ändern Wenn Sie so etwas tun möchten, reduzieren Sie den Wert vielleicht auf 12 und geben nur Benachrichtigungen Sie würden es in einen eigenen Rahmen legen und ihm 12 Polsterungen geben Auf diese Weise würden sie ausgerichtet sein. Nun, ich bin mir nicht sicher, ob verschiedene Leute unterschiedliche Vorlieben haben, also musst du das überprüfen. Aber ich weiß nicht, das funktioniert für mich. Mir gefällt, wie es aussieht. Ich werde hier nur den Abstand verringern. Und jetzt sieht es viel besser aus, ich würde sagen, ich bin mir nicht sicher Es braucht definitiv etwas Arbeit, aber ja, das ist großartig. Wir sind auf dem Weg, etwas zu erledigen. Nun, wie ich bereits erwähnt habe, können Sie es natürlich auch viel kleiner machen, aber dann müssten Sie die Platzierung anpassen. Ja, ich finde, das sieht natürlicher aus. Das sieht eher aus wie eine App und du kannst all deine Benachrichtigungen sehen, sie anklicken, sie auswählen, was auch immer du tun möchtest. Und so kannst du grundsätzlich ein Popup oder ein Overlay verwenden Das nennen wir Apigma und so können Sie es erstellen, verwenden und mit der Prototyping-Funktion verknüpfen Vielen Dank fürs Zuhören Wir sehen uns in der 17. Verbinden von Dashboard-Bildschirmen: Ordnung. In dieser Lektion möchten wir also weitermachen und etwas anderes ausprobieren. Wir werden einen völlig anderen Bildschirm erstellen. Also ein zweiter Bildschirm und in anderen Fällen vielleicht ein dritter, vierter, fünfter. Aber für diese Lektion machen wir einfach einen zweiten Bildschirm. Ich möchte Ihnen sehr schnell zeigen, wie es passieren wird, wie wir es umsetzen werden und wie wir sie auf eine Art und Weise miteinander verbinden können , die wirklich nett und reibungslos ist. Ordnung, also als Erstes werden wir diesen Bereich aufräumen Wir werden es zur Seite nehmen. Nur damit wir hier einen ordentlichen Ablauf haben. Ich gehe gerne von links nach rechts und von oben nach unten, dann haben wir den Platz frei. Jetzt werde ich das kopieren und einfügen. Jetzt haben wir einen zweiten Bildschirm. Wir können das erste Dashboard nennen, und das zweite könnten wir Aufgaben nennen. Dies wird ein Bildschirm sein, auf dem wir nur das Dashboard erweitern sodass wir all die verschiedenen Aufgaben sehen. Das erste, was ich tun werde, ist das Dashboard im zweiten zu löschen. Es gibt kein Dashboard, aber es gibt Aufgaben. Es wird jedoch eine andere Art von Aufgabe sein. Es wird kein Bedienfeld geben, das die Animation erstellt , in der sie ausgeblendet oder minimiert wird Wir trennen die Instanz, klicken, Instanz trennen, und dann nehmen wir dieses kleine Teil, nehmen es heraus und ja, wir werden damit arbeiten Anstatt dringende Aufgaben und dann die neuesten Aufgaben zu haben, denke ich darüber nach, das Ganze anders zu gestalten, weil wir ein Team haben und verschiedene Teammitglieder unterschiedliche Aufgaben haben Wir werden etwas Ähnliches wie andere Programme entwickeln und ein Beispiel für Aufgabenmanagement- oder Projektmanagementprogramme ist Trello Wenn Sie sich damit auskennen, gibt es viele andere Arten von Lösungen Wir werden es wieder tun, wir werden das Rad nicht neu erfinden, wir werden etwas Ähnliches schaffen Ich gebe dir das zu, nur damit du das im Hinterkopf hast, anstatt zu denken, wow Er wird etwas völlig anderes kreieren. Nein, das werde ich nicht tun. Ich werde mich an das halten, was sich bewährt hat und so. In Ordnung. Also werde ich diese Titel jetzt entfernen, weil ich denke, dass sie uns hier nicht wirklich helfen. Ich denke jedoch darüber nach, all diese Elemente in einem Rahmen zusammenzufassen, also werde ich ein automatisches Layout erstellen. Ich werde etwas Farbe hinzufügen. Ich denke, wir könnten vielleicht etwas mehr Farbe hinzufügen. Vielleicht könnte es diesmal sehr lebendig sein. Vielleicht nicht so lebendig. Aber lass uns sehen, was wir tun könnten. Okay, das sieht nicht richtig aus. Lass uns das einfach entfernen. Mal sehen, was wir uns einfallen lassen können. Also wollen wir eine Farbe, die nicht viel zu viel ist. Also vielleicht denke ich darüber nach. Vielleicht warum nicht? Etwas , das im Hintergrund sein sollte. Und der Grund dafür ist, dass ich gerade darüber nachdenke, ihn zu ändern. Wir könnten hier auch dieselbe Farbe wählen oder eine dunklere Farbe wählen, sodass es grau sein könnte, anstatt etwas dunkler. Aber ich denke, wir könnten hier etwas mehr Farbe hinzufügen , weil wir wollen, dass die Aufgaben hervorstechen. Wir möchten, dass sie sehr klar aussehen. Und weil die Aufgaben weiß sind, möchten wir, dass der Hintergrund eine andere Farbe nicht alles so hell ist. Ja. Ja, mal sehen, was, wenn wir diese durchsichtigen Fische nennen? Das können wir auch tun. Und auf diese Weise können wir uns viel mehr auf die Aufgaben selbst konzentrieren. ich zu diesem Text komme, denke ich, können wir ihn weiß färben? Vielleicht. Dann müssten wir das für die Lesbarkeit etwas dunkler machen für die Lesbarkeit etwas dunkler Aber jetzt müssen wir zu dieser Farbe zurückkehren und von dort aus weiterarbeiten weil ich immer noch klarstellen möchte , dass es sich um eine ähnliche Farbe Okay, das ist nicht so schlimm. Es ist etwas, mit dem du arbeiten kannst. Es ist richtig. Okay. Es funktioniert nicht perfekt mit diesem Blau, aber es ist richtig. Jetzt haben wir Aufgaben, aber wir werden ihnen verschiedene Namen geben. Also, wer sind die Teammitglieder, die wir hatten? Also werde ich in Betracht ziehen, dass ich der Projektmanager bin, also habe ich einen anderen Namen , der vielleicht Alan ist. Und dann werden wir John und Mary haben. Und dann haben wir offenbar noch einen John. Nein, das haben wir geändert. Was war das? Laurence. Also haben wir Laurence Also gut, ich kopiere das hier und füge es ein. Also haben wir Alan John, Mary Lawrence. Also können wir die Dinge ändern. Wir können dafür sorgen, dass alles einen Behälter füllt, dann haben wir eine Menge , die den Platz beansprucht. Aber um ehrlich zu sein, sieht es nicht so toll aus. Also lass uns das zurücknehmen. Wir können es auch zentriert machen, aber es sieht nicht gut aus, also werde ich es einfach hier lassen und es gibt dir die Möglichkeit , etwas anderes hinzuzufügen. Vielleicht können wir das tatsächlich zeigen, indem wir so etwas erstellen und dann ein Pluszeichen hineinsetzen. Also schneide das aus und füge es hier ein, und los geht's. Das haben wir gleich hier drüben. Wir können es etwas kleiner machen. In Ordnung. Lass es mich hier hinstellen. Perfekt. Also haben wir das. Es sieht wirklich toll aus. Was wir vielleicht tun müssen, ist, die Artikel hier zu ändern. Wir wollen nicht , dass alles gleich ist. Und eine andere Sache, die mir gerade aufgefallen ist, ist, dass dies zwei verschiedene Frames sind, die wir nicht wollen. Und deshalb werde ich einige davon tatsächlich löschen. Sie müssen nicht so viele Aufgaben haben, um ehrlich zu sein. Das ist also etwas, das man im Hinterkopf behalten sollte. Also werde ich die Basis kopieren und einfügen. Und dann, wie gesagt, Mary hat viel mehr Aufgaben als die anderen, und John hat nicht so viel zu tun. Stimmt das? Und eine Sache, auf die man achten sollte, ist auch zu sehen, welche Namen hier sind, welche Gesichter oder welche Bilder wir hier haben. Also sollte Mary die Karten mit ihrem Namen haben und so weiter. Aber darum können wir uns später kümmern. Ich meine, es ist momentan nicht nötig, sich zu sehr auf diese Dinge zu konzentrieren. Aber ja, jetzt haben wir dieses nette kleine Setup am Laufen. Denken Sie daran, dieser Lektion geht es nicht darum, den zweiten Bildschirm zu erstellen , sondern darum, wie man ihn verbindet. Um ihn mit dem Hauptmenü oder anderen Elementen zu verbinden , die Sie hier haben, damit Sie von diesem Bildschirm zu dem wechseln können. Jetzt, wo wir es eingerichtet haben, möchten Sie als Erstes zum Prototyp übergehen. Der erste Bildschirm hat Flow One. Nur der Einfachheit halber können Sie diesen Flow zwei erstellen, indem Sie zum Prototyp gehen und ihn zum Flow-Startpunkt machen. Auf diese Weise können Sie im Wesentlichen beide Seiten aufrufen. Okay, beide Bildschirme. Sie können diesen und jenen sehen und Sie können beurteilen, okay, es sieht toll aus, sieht nicht so toll aus , was auch immer. Und dann kannst du herkommen und dein Ding machen, ohne unterbrochen zu werden. Sie können also beide überprüfen, ohne auf das Menü klicken zu müssen auf das Menü klicken zu , denn genau das tun wir gerade. Um das zu tun, gehen wir zu Aufgaben und halten Strg, Alt und A um beide Symbole oder dasselbe Element instanzübergreifend auszuwählen, und dann halten Sie das Plus-Zeichen gedrückt und bringen es bis zum Ziel. Jetzt haben wir also onclick. Es wird zu Aufgaben navigieren. Ich würde empfehlen , dass Sie das sofort tun denn wenn Sie Websites erstellen, ist es wirklich schwierig, wirklich coole Animationen und Übergänge zu erstellen. Je nachdem, wozu Ihr Team bereit ist, klicken Sie die meiste Zeit auf eine Seite und sie wird einfach geladen. Es wird keine wirklich coole Animation geben es sei denn, Sie arbeiten an einer Web-App, das ist eine andere Geschichte. Aber normalerweise wird es sich einfach auflösen oder sofort ablaufen, um ehrlich zu sein. Es wird nur die Seite laden. Also lass es uns jetzt testen. Wir kommen her. Wir gehen zur Aufgabe, wir werden sie anklicken. Bam, wir sind da dran, okay? Einfach so Das ist leicht gesagt, aber vergiss nicht, geh dahin zurück, wo du warst. Das machen wir jetzt. Wir werden das Dashboard in beiden Fällen beibehalten und wir werden es hierher bringen, das Gleiche, jetzt schauen wir es uns an. Einfach so können wir zwischen den Seiten wechseln. Aber warte mal, es gibt ein Problem, es gibt ein winziges Detail. Es geht um das Highlight. Hier haben wir immer noch das Dashboard hervorgehoben und das wollen wir nicht. Ich werde wieder hierher kommen. Ich werde beide auswählen, indem ich Strg Al auf A halte, und ich werde es als Standard festlegen. Jetzt sind sie alle standardmäßig und ich gehe zu dieser Instanz auf dieser Seite und mache sie ausgewählt, ich komme hierher und wähle diese eine Aufgabe aus, und ich werde sie auch auswählen. Lassen Sie uns das jetzt testen. Okay. Jetzt haben wir ein Problem. Warte, lass uns das neu laden. Wir haben ein Dashboard, das Dashboard ist ausgewählt, ausgewählt, großartig. Jetzt gehen wir zur Aufgabe, die Aufgabe ist ausgewählt, wir öffnen sie. Moment mal, da steht Dashboard. Okay. Jetzt haben wir ein Problem, weil der ausgewählten Version nur Dashboard angezeigt wird, was eindeutig nicht das ist, was Sie sehen möchten. Hier haben wir anscheinend ein Problem. Dieses Problem entsteht normalerweise durch Benennung oder durch die Einrichtung dieser Versionen. Sie müssen es überprüfen. Lassen Sie uns das jetzt überprüfen. Das ist Standard und nein, kein Zusammenbruch. Dies ist „Aufheben, kein Zusammenklappen“, und die Option „ Kein Zusammenklappen“ ist ausgewählt Kommen wir nun zurück zu diesem Thema: Standard, Hover, ja, ausgewählt, ja Okay, hier gibt es also kein Problem. Lassen Sie uns jetzt hier nachsehen. Was könnte das Problem sein? Lass uns sehen. Okay? Das ist normal. Es heißt Standard, kein Zusammenbruch, Standard, kein Zusammenbruch, Standard, kein Zusammenbruch. Okay. Also ich denke, das Problem könnte die Tatsache der Benennung sein. Also manchmal haben die Namen hier ein Problem. Also, nur um auf Nummer sicher zu gehen, nenne ich diesen Aufgaben-Button. Okay? Und dann musst du jede Instanz benennen. Also zurück zu dieser Instanz, ich nenne sie Tasks-Schaltfläche. Es muss exakt dieselbe Schrift sein, okay? Also lass es uns jetzt überprüfen. Okay. Es gibt mir immer noch das gleiche Problem. Ordnung, ich habe die Seite gerade neu geladen und wir haben den Fehler nicht mehr Also, wenn du das öffnest, wird dir nichts hervorgehobenes angezeigt, okay? Sie sehen also diese Seite, wir sind auf dieser Seite, und wenn Sie sie öffnen, sehen Sie alle Optionen , die Sie öffnen können. Einfach so können Sie zum Dashboard gehen. Es gibt keine Probleme mit den Symbolen. Okay? So können Sie im Grunde sehr einfach zwei verschiedene Bildschirme miteinander verbinden. Und dieser Weg ist auch realistisch. Wir machen nichts Verrücktes. Es gibt Dinge , die man reparieren kann, wie zum Beispiel diesen Eckradius, furchtbar. Das ist viel besser, nicht perfekt, aber viel besser. Aber ja, so können Sie im Grunde genommen zwei verschiedene Bildschirme über ein Menü verbinden. Es geht nur um Prototyping, verschiedene Arten von Triggern , verschiedene Arten von Aktionen, aber am Ende verschiedene Arten von Triggern, verschiedene Arten von Aktionen, aber am Ende schaffen wir es und das ist wichtig. schaffen wir es und das ist wichtig Vielen Dank fürs Zuhören und wir sehen uns in der nächsten Lektion 18. Vorschau und Testen des Prototyps: Ordnung, jetzt kommt es zum wichtigsten Teil, nämlich dem Teilen deiner Arbeit Schließlich haben Sie viel harte Arbeit geleistet und jetzt müssen Sie sie mit der Welt teilen, mit Ihren Kollegen teilen, mit Ihren Kunden, wer auch immer es ist, Sie müssen Ihre Arbeit veröffentlichen. Es gibt verschiedene Möglichkeiten, das zu erledigen. Eine sehr einfache Möglichkeit besteht darin, auf die große blaue Schaltfläche zu klicken. Ich weiß, es ist ziemlich offensichtlich, also ist es einfach, aber ich muss es mir nur notieren. Es gibt zwei verschiedene Arten des Teilens. Sie können die Datei wie in dieser Designdatei teilen, oder Sie können den Prototyp teilen und es heißt, dass Sie den Prototyp teilen. Sie sehen sich sehr ähnlich, sind aber eigentlich verschiedene Dinge. Pass auf, wenn du das tust. In beiden Fällen können Sie dies tun, indem Sie so auf Copyink klicken, Sie haben einen Link Sie können auch jemanden einladen, indem Sie ihm eine E-Mail schreiben . Am wichtigsten ist jedoch, dass Sie, bevor Sie dies tun, auf Nur eingeladene Personen klicken und dort auf „ Alle“ umstellen Wenn Sie das tun, können Sie auch ein erforderliches Passwort hinzufügen. Aber wenn Sie das tun, benötigen Sie dafür ein professionelles Konto , nur um Sie darüber zu informieren. Aber wenn Sie das tun, können Sie es mit jedem teilen, der nur den Link benutzt. Wenn Sie mehrere Personen in einem Projekt haben, insbesondere wenn Sie die Datei, die Designdatei, gemeinsam nutzen können Sie auch entscheiden , wer der Eigentümer , wer der Bearbeiter, Kommentator usw. ist . Sie haben verschiedene Freigabeoptionen Sie können den DevMode-Link kopieren, um ihn einem Entwickler zu geben. Sie können den Prototyp-Link kopieren, was wir hier gemacht haben, und Sie können ihn in der Community veröffentlichen oder einen Einbettungscode abrufen Ordnung. Und es gibt noch eine weitere Möglichkeit, Ihren Prototyp mit anderen zu teilen , nämlich ihn zu exportieren. Sie können das tun, indem Sie direkt auf einen oder mehrere Frames klicken, zum Exportieren gehen und einen Export hinzufügen. Sie können entscheiden, ob Sie ein PNG-, JPEG-, SVG- oder PDF-Dokument sein möchten. Und es gibt noch mehr Einstellungen , die Sie erkunden können, oder Sie können es einfach von hier aus exportieren , indem Sie zur Datei, Registerkarte, Dateioption gehen und dann entweder Frames exportieren oder als PDF exportieren. So einfach ist das. Es ist nicht so kompliziert, aber Sie müssen sich nur fragen, die Datei am besten mit Ihren Kunden oder Ihren Kollegen oder mit welchen Personen Sie sie teilen, teilen können? Du musst dir diese Frage stellen und eine gute Antwort bekommen. Vielen Dank fürs Zuhören Wir sehen uns beim nächsten Mal. 19. Schulungsprojekt: Entwerfen Sie Ihr eigenes SaaS-Dashboard: Und jetzt sind Sie an der Reihe, Ihr eigenes Dashboard zu erstellen. Für dieses Kursprojekt werden Sie Ihre eigene Variante eines SAS-Dashboards entwerfen und dabei die Techniken und Workflows verwenden die Techniken und Workflows , die wir in diesem Kurs behandelt haben. Sie können wählen auf dem Dashboard aufbauen, das wir bereits erstellt haben , es weiter optimieren und noch besser machen möchten, oder Sie können Ihr eigenes Dashboard mit einer völlig anderen Branche oder völlig anderen Anwendungsfällen erstellen Ihr eigenes Dashboard mit einer völlig anderen Branche . Sie können beispielsweise ein Dashboard für Projektmanagement, Finanzen, für eine Fitness-App oder jedes andere SAS-Dashboard , das Sie erstellen möchten, erstellen. Definieren Sie zunächst den Zweck Ihres Dashboards und identifizieren Sie dann die verschiedenen Arten von Informationen, die Benutzer sehen müssen. Danach machen Sie weiter und erstellen Sie ein allgemeines Layout, wie das Design aussehen soll. Fangen Sie an, Ihre wiederverwendbaren Komponenten und verschiedene Abschnitte zu erstellen und zu verstehen, wie die Informationen angezeigt werden. Und vergessen Sie natürlich nicht, Ihrem Design einen einheitlichen Stil zu verleihen. Sobald Ihr Dashboard fertig ist, fügen Sie einige Interaktionen hinzu, möglicherweise einige Animationen, um zu demonstrieren, wie Benutzer Ihr Dashboard verwenden würden. Und stellen Sie natürlich sicher, es ein angenehmes Erlebnis wird, etwas, das die Leute gerne sehen und mit dem sie interagieren würden , von den großen Animationen und Funktionen bis hin zu den kleinsten Mikrointeraktionen. Wenn Sie fertig sind, laden einen Screenshot Ihres Dashboards hoch oder teilen Sie einen Figma-Prototyp-Link und platzieren Sie ihn einfach in der Projektgalerie. Natürlich können Sie auch gerne eine kurze Erklärung Ihrer Designentscheidungen oder Kommentare denen erklärt wird, welche Art von Dashboard Sie erstellen wollten Dieses Projekt ist Ihre Gelegenheit, alles , was wir gelernt haben, zu nutzen, zu üben und es so anzuwenden, dass Ihre eigenen einzigartigen Ideen und Kreativität zum Ausdruck kommen zu üben und es so anzuwenden, dass . Lassen Sie uns also mit dem Entwerfen beginnen. 20. Wir gratulieren!Was kommt als Nächstes?: Herzlichen Glückwunsch zum Abschluss des Kurses. Sie haben jetzt ein ganzes SAS-Dashboard-Projekt vom Konzept bis zum Prototyp abgeschlossen . Während des gesamten Kurses haben Sie Planung, Layoutdesign, Komponentenerstellung, visuelle Hierarchie, Schnittstellendesign und viele andere Fähigkeiten geübt Layoutdesign, Komponentenerstellung, visuelle Hierarchie, , die sich direkt auf echte IX-Projekte und -Fähigkeiten übertragen lassen. Wenn Sie weiter lernen, empfehle ich Ihnen dringend weitere Dashboard-Konzepte zu entwickeln, bestehende Produkte neu zu gestalten und verschiedene Branchen und Anwendungsfälle zu erkunden Jedes Projekt, das Sie gerade durchführen, wird nicht nur Ihr Portfolio erweitern , sondern auch Ihre Designfähigkeiten stärken Falls du es noch nicht getan hast, stelle bitte sicher, dass du dein Projekt als Screenshot oder als Link zur Projektgalerie hochgeladen hast dein Projekt als Screenshot oder . Ich würde wirklich gerne sehen, was ihr euch ausgedacht habt und wie ihr eure eigenen Projekte personalisiert Wie immer gilt: Wenn Ihnen dieser Kurs gefallen hat, denken Sie bitte darüber nach, eine Bewertung abzugeben Es hilft uns wirklich, zukünftige Kurse zu verbessern , und hilft auch anderen Schülern, diesen Kurs zu entdecken. Vielen Dank, dass Sie sich mir angeschlossen Wir sehen uns beim nächsten Projekt.