Lerne Mobile App Design in Figma: Komplettes Projekt

1. Willkommen beim Kurs!: Hallo, ich bin Chris. Und in diesem Kurs werde ich dir alles beibringen, was du über das Entwerfen von Lücken in Figma wissen musst. Figma ist ein kostenloses Designprogramm und ich werde Ihnen alles, was Sie darüber wissen müssen, von Grund auf ohne Vorkenntnisse oder Vorkenntnisse beibringen darüber wissen müssen, von Grund auf . Also, was ich tun werde, ist, Ihnen zu zeigen, wie Sie wunderschöne Android- und iOS-Apps entwerfen. Nummer zwei, ich werde Ihnen zeigen, wie sie prototypisch sind, was bedeutet, dass wir sie interaktiv machen werden. Sie werden aussehen, als wären sie bereits codiert worden. Und drittens die Prinzipien, die jedes App-Design großartig aussehen lassen. Nun, diese drei Teile sind absolut riesig, aber ich werde sie in leicht verständliche Konzepte aufteilen . Sie können sofort verwenden, was Sie benötigen ist Figma und jeden Desktop oder Laptop. Das ist es. Sonst nichts. Lass mich dir ein paar Dinge über mich erzählen. Ich bin ein von Adobe zertifizierter Dozent. Das heißt also, dass ich ein großartiger Lehrer bin, aber ein Diplom ist nichts ohne praktische Erfahrung, ohne praktische Fähigkeiten. Zu diesem Zweck war ich von 2013 bis 2018 Gründer einer sehr erfolgreichen AB-Designfirma. Ich hatte ein Team von ungefähr 25 Leuten. Design dieses Coders Desk macht Produktmanager, alle gleich großartig. Und wir haben es geschafft, über 200 Millionen Downloads in unserem Portfolio zu erhalten. Das bedeutet also, dass ich praktische Erfahrung habe und alles, was Sie gleich hören werden, bodenständig habe. Es sind Techniken und Prinzipien , die Sie sofort anwenden können. Wir konzentrieren uns nicht auf die Theorie des Internats, sondern nur auf Dinge, die Sie in Ihren eigenen Projekten anwenden und Geld verdienen können . Und glauben Sie mir, AB-Designprojekte zahlen sich sehr gut aus. Meiner Erfahrung nach verdient ein App-Designer mindestens dreimal so viel wie ein Webdesigner. Und das liegt daran, dass Unternehmen, die Apps benötigen, in der Regel über ein sehr großes Budget verfügen. Das absolute Minimum von 20.000 USD pro Projekt. Jetzt, wo es noch viel mehr zu sagen gibt. Kurz gesagt, dies ist ein sehr lukratives Feld. Und du musst nicht wissen , wie man codiert. Das ist das Tolle daran. Sie können es auszahlen und dann mit dem nächsten Projekt fortfahren. Also, Kinder, was ich von euch will, ich will, dass ihr engagiert seid, oder? Ich möchte, dass du mit mir zusammenarbeitest, an mich denkst, Fragen stellst, die Übungen machst und dich mit der Gemeinschaft von Schülern beschäftigst , die genau wie du sind. Bitte zweifle nicht an dir selbst. Sei verzeihend, wenn du es vermasselst , weil du es vermasseln wirst. Es wird manchmal schwierig sein, aber mach weiter. Versuche dein Bestes und gib nicht die paar Male auf, in denen du niedergeschlagen wirst. Wenn du weitermachst, wirst du irgendwann dort ankommen. Ich habe ein Sprichwort: Arbeite hart, arbeite, klug, arbeite lange genug, und Ergebnisse werden folgen. Das ist mein einziges Versprechen an dich. Und damit fangen wir an. Ich hoffe, du kannst bis zum Ende bei mir bleiben und wir können etwas Tolles bauen. Öffnen Sie zunächst Google, suchen Sie nach Figma, erstellen Sie ein kostenloses Konto, völlig kostenlos, und laden Sie es herunter. Ich werde diese Schritte nicht behandeln, da es so ist Anmeldung bei Gmail sehr einfach ist. Wir haben gerade Ihre E-Mail-Adresse eingegeben, Ihr Passwort und das war's. Also lade Figma herunter, habe es installiert und fertig. Wir sehen uns in der nächsten Lektion. Vielen Dank. 2. Gestalte deinen ersten app: Willkommen zurück. Lass uns anfangen. Öffne Figma. Du solltest es installiert haben. Wenn Sie das Video jedoch nicht anhalten, gehen Sie zur Google-Suche oder zu Figma und installieren Sie es dann auf Ihrem Computer. Wenn Sie bereit sind, haben Sie die Desktop-App gestartet. Einfach so, wir werden nicht in unserem Browser arbeiten, obwohl es in einem anderen Browser funktioniert, bleiben wir bei dem Programm. Okay, so sieht es aus. Und wir werden nach der Importdatei suchen. Das ist es, wonach wir suchen. Sie haben dieses Projekt an den Kurs angehängt. Nun, hier ist die Sache. Unsere Aufgabe ist es, dieses Grün für eine meiner Apps zu entwerfen. Und wir können uns von diesem Screenshot inspirieren lassen. Das ist eigentlich ein echtes Projekt. Also, auch wenn es einfach erscheinen mag, wird es dir viel beibringen. Bitte schauen Sie sich dieses Video zweimal an. Nur einmal, um zu verstehen , was vor sich geht. Und dann, beim zweiten Mal, kannst du mit mir zusammenarbeiten, indem so oft pausierst, wie du brauchst. Wiederhole. Bitte versuchen Sie nicht, bei Ihrer ersten Besichtigung mitzuarbeiten. Dies gilt für den gesamten Kurs. Okay, lass uns das Wort bekommen. Dies wird Frame genannt und alles innerhalb des Rahmens bildet einen Bildschirm, einen einzigen Bildschirm. Moment haben wir nur eine Sache, das Apps-Logo, den Tastaturatlas. Als erstes senden wir das Rot. Bitte klicken Sie darauf, um es auszuwählen. Oder als zweites können Sie klicken und es herausziehen ein Feld klicken und es herausziehen und alles in diesem Feld wird ausgewählt. Nun wieder, jetzt können wir diesen Befehl verwenden, um es einfach so in der Mitte des Bildschirms auszurichten. Tolles Zeug. Als Nächstes brauche ich etwas , das wie ein Hintergrund wirkt. Also schnappen wir uns dieses Werkzeug, das Ellipsenwerkzeug, der Hotkey ist 0. 0 für die Lippen macht nicht viel Sinn, aber es ist in Ordnung. Es ist das Kreissymbol oben links auf dem Bildschirm. Normalerweise sehen Sie das Rechteckwerkzeug, aber Sie können 0 drücken und Sie erhalten es direkt. Oder Sie können dies tun, indem Sie diesen Pfeil hier verwenden , um alle Tools anzuzeigen. Wir müssen ein bisschen herauszoomen. Also lass uns das machen. Halten Sie die Strg-Taste gedrückt, das ist die Befehlstaste auf dem Mac, und scrollen Sie dann mit der Maus. So zoomst du hinein oder heraus. Bitte nehmen Sie sich einen Moment Zeit, um sich mit diesem Konzept vertraut zu machen. also erneut die Strg-Taste gedrückt und scrollen Sie dann. Übrigens, wenn Sie hineinzoomen, fokussiert Figma Sie auf Ihre Maus. Wenn Sie es also auf die rechte Seite verschieben , werden Sie dort hineinzoomen. Im Grunde folgt es deiner Maus, bewege sie nach links. Das Gleiche. nun mit dem ausgewählten Ellipse-Werkzeug Lassen Sie uns nun mit dem ausgewählten Ellipse-Werkzeug eine Form zeichnen, die ungefähr so aussieht. Nun noch einmal, das Logo ist weg und das liegt daran, dass wir uns verstecken, das Fixat holen, zum Ebenenbedienfeld auf der linken Seite gehen und du wirst die Ebene finden , die Ellipse genannt wird. Eins. Klicken Sie darauf und ziehen Sie es unter das Logo. Wenn deine Lippen zu groß sind, könnte Mama sie hinter deinen Bildschirm legen. Das Fixierte, das es einfach über den Rahmen hin und her bewegt . Wenn Sie es nicht schaffen, erstellen Sie einfach eine kleinere Ellipse. Okay, zurück zu Atlas. Ändern Sie dafür die Farbe von Grau auf fast alles andere Wir müssen auf dieses Feld neben Phil klicken, um dieses Popup zu erhalten und Sie können fast jede Farbe auswählen. Ich suche etwas Helles, Gesättigtes, eine sehr moderne Farbe, vielleicht ein bisschen Violett, vielleicht etwas Ähnliches. Jetzt bin ich wieder zufrieden damit. Jetzt müssen wir es wieder zentrieren. Verwenden wir hier also genau den gleichen Befehl. Wenn Sie mit der Maus darüber fahren, sehen Sie, dass dort „Horizontal zentriert ausrichten“ steht. Fantastisch. Okay, lassen Sie uns nun die Strg-Taste gedrückt halten und etwas mehr hineinzoomen , damit wir besser sehen können, woran wir gerade arbeiten. Das schwarze Logo funktioniert nicht wirklich gut. Wechseln wir also zum Verschieben-Tool. Der Hotkey ist V, aber du kannst hier klicken und V verschieben. Auch hier macht es nicht wirklich Sinn, aber achte darauf, dass du ihn auswählst. Okay, jetzt schnapp dir das Logo, indem du darauf klickst, und lass es uns dann weiß machen. Ob Sie es glauben oder nicht, das ist ein guter Fortschritt. Für einige. Für manche mag es schwierig sein, es mag sehr einfach erscheinen, aber lassen Sie uns weitermachen. Weiter. Ich wollte eine Grafik hinzufügen, aber lassen Sie uns das Logo erhöhen, nur das Bett. Während Sie im Verschieben-Tool sind, klicken Sie darauf , um es auszuwählen, und ziehen Sie es dann oben, solange Sie Ihren Mausklick nicht loslassen. Sie werden sehen, dass die falsche Mutter Ihnen hilft, es zentriert zu halten. Das zeigt dir diese rote Linie. Figma hilft uns wirklich. Okay, jetzt möchte ich den Screenshot hinzufügen, aber zuerst fügen wir ein Rechteck hinzu, das uns sehr helfen wird. Funktioniert das Rechteck, und du kannst R drücken. Wo sind? Steht schließlich für Rechteck. Klicken Sie darauf und ziehen Sie eine heraus. Keine bestimmte Größe im Kopf, nur etwas, das ziemlich breit und ziemlich kurz ist. Okay, das können wir bei Bedarf jederzeit anpassen. Bitte zentrieren Sie wie immer genau denselben Befehl. Das ist ein wichtiger Schritt in fast jedem Designprojekt. In Ihrem Ressourcenordner haben Sie dann einige Designs zur Auswahl. Diese werden alle von meinem Team hergestellt. Übrigens werden wir einen von ihnen innerhalb dieses Rechtecks platzieren . Also so wird das laufen. Klicken Sie hier neben dem Rechteckwerkzeug, damit wir alle Tools sehen können. Wir suchen nach einem Ortsbild und als auch nach der Abkürzung. Control Shift K. Dadurch wird ein Browserfenster geöffnet und Sie können den Ordner finden , der all diese Screenshots enthält. Okay, großartig. Ich wähle nach dem Zufallsprinzip eine aus. Sobald das Bild geladen ist , wird neben dem Cursor eine Mini-Version angezeigt. Dies bedeutet, dass es bereit ist, innerhalb des Projekts platziert zu werden. Also, was wir tun werden, ist , über das Rechteck zu gehen und einfach darauf zu klicken. Und das ist Arbeit, gut gemacht. Eine Sache, die mir nicht gefällt diese quadratischen Kanten mit dem Rechteck sind immer noch ausgewählt. Sie werden dieses Feld hier sehen. Hier werden wir es also auf 0-30 Pixel ändern. Das wird uns viel mehr Glück bringen. Und damit bin ich sehr zufrieden. Um das Bild nun etwas besser zur Geltung zu bringen, klicken wir auf dieses Plus neben fx. Das wird uns einen schönen Schlagschatten geben. Um die Schatten anzupassen, schauen wir uns dieses Symbol an, wo Sie sehen werden, dass Effekteinstellungen angezeigt werden. Ich werde also hohe Werte verwenden, damit Sie es in der Aufnahme wirklich sehen können. Es sind 15 für das Y-Feld und 15 für Unschärfe. Das sind 15. Wir werden etwas später ausführlich über alles sprechen . Bitte folge vorerst einfach meinen Schritten und der obere Teil ist fertig. Jetzt fügen wir unseren ersten Button hinzu. Holen Sie sich die Tastenkombination für das Textwerkzeug t. Die erste Meldung lautet: Tastatur weniger wählen. Wählen Sie Tastatur. Wenn Sie mit dem Schreiben fertig sind, drücken Sie einfach die Escape-Taste , um die Sache zu beenden. Dann ändern wir die Schrift von der rechten Seite. Diese Schrift sieht also gar nicht so toll aus. Also werden wir diesen Bereich hier, der Text heißt, bei Seed ändern . Lassen Sie uns die Schriftart in etwas sehr Grundlegendes ändern. Sagen wir Arial Bold 24. Nimm dir Zeit damit. Du musst dich nicht beeilen. Wie gesagt, unterbrechen Sie das Video so oft wie nötig, wenn Sie bereit sind, zentrieren Sie es einfach so auf der Leinwand. Der wichtige Schritt wie dieser, bewegen Sie Ihre Maus darüber und klicken Sie mit der rechten Maustaste auf diese Liste. Wählen Sie Hinzufügen, automatisches Layout. Es ist irgendwo in der Nähe des Zentrums. Wenn du es nicht schaffst, benutze einfach diesen Hotkey, Shift a. Das macht also dasselbe. Es scheint, als wäre nichts passiert, aber jetzt haben wir diesen Bereich hier auf der rechten Seite , der Fell heißt. Drücken Sie das Plus-Symbol. Und wieder scheint sich nichts geändert zu haben. Aber beachte, dass wir genau hier Weiß haben. Wir lieben Weiß und die meisten AB-Designprojekte, aber jetzt müssen wir es auf etwas anderes umstellen. Also klicken wir hier, um den Farbwähler zu bekommen. Jetzt können wir fast jede Farbe auswählen, aber lassen Sie uns die vorherige verwenden. Und dann gehen wir, es ist jetzt auch verbal. Entkomme, um es zu schließen. Jetzt funktionieren Schwarz und Lila nicht wirklich. Beachten Sie jedoch diesen Bereich, der als Auswahlfarben bezeichnet wird. Das hilft uns also , dieses Schwarz in reines Weiß umzuwandeln. Drücken Sie einfach das schwarze Quadrat und Sie wissen, was zu tun ist, machen Sie es weiß. Denken Sie daran, die Escape-Taste zu verwenden, um das Fenster zu schließen. Und das ist auffallend. Die Schaltfläche ist etwas zu klein, also lassen Sie uns einige Änderungen vornehmen. Von dieser oberen rechten Seite. Lassen Sie uns den Koordinatenradius zwei gegen den austauschen, das ist dieses Feld genau hier. Dann eins runter und finde diese beiden Felder innerhalb von 80,20, und das ist alles, was dazu gehört. 80 bedeutet nun, dass wir 80 Pixel auf beiden Seiten dieses Textes haben werden. Und das sind die Kanten der Tasten im Grunde horizontal. Und dieser Teil ist für die andere Seite. Nun, noch einmal ein Cent auf den Knopf, und wir haben fast sie. Mache eine Kopie davon. Benutze die Steuerung jetzt, auch hier sieht es so aus, als ob nichts passiert ist. Aber wenn Sie damit fortfahren, mit der Maus klicken und ziehen, werden Sie sehen , dass wir eine Kopie erstellt haben. Also Control D oder Command D, D wie doppelt. Tolles Zeug. Lassen Sie uns die Texte ändern und dann können wir weitermachen. Doubleclick möchte in die Schaltfläche gehen. Doppelklicken Sie nun erneut , um diese Nachricht zu bearbeiten. Ändern Sie es, um die Tastatur zu aktivieren. Also aktiviere die Tastatur. Wenn Sie fertig sind, fahren Sie mit dem nächsten Video fort, in dem ich erkläre, warum wir so arbeiten, wie wir es gemacht haben. Vorerst. Dies ist dein erster App-Design-Bildschirm, herzlichen Glückwunsch, und wir sehen uns in einer Sekunde. Danke. 3. Das Wichtigste bei der Gestaltung von Apps: Willkommen zurück. Mal sehen, ob wir das Design ein wenig verbessern können. Vielleicht ändern Sie die Größe der Schaltflächen, fügen Sie vielleicht ein paar weitere Details z. B. fügen Sie die Website unten hinzu. Jetzt arbeiten Wildtiere im Hintergrund. Es ist dasselbe wie im vorherigen Video, dieselben Techniken. Lassen Sie mich Ihnen ein paar Dinge über das Entwerfen von Apps erzählen. Jetzt, in meinen mehr als fünf Jahren in diesem Bereich, fand ich, dass Einfachheit der Schlüssel ist. Was Sie hier sehen, ist aus technischer Sicht nicht schwer zu bewerkstelligen. Es ist nicht verrückt fortgeschritten. Wie Sie gesehen haben, verwenden wir ein paar Formen. Wir haben die wenigen Dinge zentriert, wir haben einige sehr grundlegende Effekte ausgewählt, wie zum Beispiel einen Schlagschatten. Das ist echtes Labordesign. Dies ist ein echtes Projekt und die meisten sind genau so, wie Sie es hier sehen. Mal 100, oder? Nun, einfach ist hier kein schlechtes Wort. Einfach ist in jedem AB-Design aufgrund ihrer Natur unverzichtbar , mobile Apps, die besten haben zumindest nur eine oder zwei grundlegende Funktionen. ZB der klassische Uber ruft dich ein Auto, und das war's. Die Benutzeroberfläche hat nicht viele Dekorationen oder Schaltflächen. Du wirst keine Kreativität sehen. Sie werden nicht viele Dinge sehen , die es unglaublich hervorheben. Das ist also nicht der Punkt. Die App muss sich intuitiv anfühlen, oder? Die Idee ist, die App so aussehen zu lassen dass ein Vierjähriger mit einem Tablet den Benutzer verwalten kann. Also nochmal, das ist ein echter Bildschirm von einer echten App. Es ist nicht kompliziert, es ist nicht schick, ist nicht beeindruckend. Es wird Ihnen nicht viele Likes in den sozialen Medien bringen, aber das brauchen Unternehmen. Klare, moderne und präzise Designs, die dem Benutzer helfen, seine Ziele zu erreichen. Foto, aber das gibt dir ein Auto für dieses Grün Es geht darum sicherzustellen, dass der Benutzer die Tastatur aktiviert. Die Sache ist, wenn Sie sich Designgalerien wie Dribble oder The Hands oder was auch immer ansehen, werden Sie wunderschöne, unglaubliche Designs finden. Aber die meisten von ihnen sind falsch. Diese sind für Designer gemacht und die Kumpel für Likes und Kommentare. Die Wahrheit ist, dass dies tatsächlich das ist, was Unternehmen brauchen. Nun, glaube nicht, dass das einfach ist. Es gibt einen Unterschied zwischen einfach und einfach. So einfach wie wenn Sie eine Flasche Wasser in die Hand nehmen, z. B. einfach ist es , wenn Sie wissen , dass Sie immer schwerere Hanteln verwenden müssen, wenn Sie im Fitnessstudio große Arme bekommen möchten Sie immer schwerere Hanteln verwenden müssen . Oder wenn du ein Sixpack willst , musst du eine Diät machen. Der Prozess ist einfach zu verstehen. Mit der Zeit mehr Gewicht hinzufügen, weniger essen, oder? Aber das eigentliche Heben dieser schweren Hanteln, das ist alles andere als einfach. Das ist also der Unterschied zwischen Easy und Cymbal. Eine andere Sichtweise ist, als würde man einem erfahrenen Koch beim Kochen zusehen, er macht es mit Anmut. Es scheint so einfach, so einfach. Aber hinter all dem steckt eine Menge Komplexität. Es gibt eine Menge Erfahrung. Also hier im AB-Design ist es dasselbe. Kommen Sie zu einem Punkt, an dem Sie einige Elemente schön aussehen lassen können . Es ist ziemlich schwer, aber genau das wirst du in diesem Kurs lernen. Ich werde Sie durch alle Designprinzipien führen, die Ihnen helfen werden , moderne, ansprechende Apps zu erstellen. Ich werde dir etwas über Kontrast, Symmetrie, Abstände, Hierarchie und vieles mehr beibringen . Sie sehen sie nicht, aber das sind die Prinzipien jeder erfolgreichen App. Eine letzte Sache, warum haben die meisten Unternehmen nicht großartige Apps wie die, die Sie auf Behance sehen, und sie sind langlebig, weil sie unglaublich teuer sind. Einfache, sehr einfache EPS erfordern ein Budget von mindestens 10.000 USD. Und das klang sehr, sehr niedrig. Die meisten Apps benötigen ein Budget von mindestens 50.000$. Aber sagen wir es anders. Angenommen, eine Stunde für das Erstellen einer App kostet insgesamt 200 Dollar, 200$. Würden Sie mehr Zeit damit verbringen, sicherzustellen, dass die App ordnungsgemäß funktioniert? Oder die Wahl von Farben, Effekten, ausgefallenen Animationen und dem Gesetz. Wie Sie sich vorstellen können, möchten die meisten Unternehmen, dass die App ordnungsgemäß funktioniert. Funktionalität steht an erster Stelle, oder? Design hat immer eine niedrige Priorität. Deshalb werden Sie keine dieser unglaublichen Animationen, unglaublichen Übergänge und Auswirkungen auf alle Bois sehen dieser unglaublichen Animationen, unglaublichen Übergänge und Auswirkungen auf , von den Kosten an Arm und Bein. Das kostet viel zu viel und ist dann das Geld nicht wert. Was ist also das Fazit? Nun, du musst lernen, wie man so designt. Einfach, modern, effektiv, was Sie in den Designgalerien sehen , ist dem, was Sie auf Instagram sehen, sehr ähnlich. Es ist größtenteils falsch. Die Leute sehen nicht wirklich so aus. Und ein Rückfall sieht auch nicht so aus. Einfachheit erfordert viel Wissen, Übung und kurz gesagt, eine Menge Erfahrung. Ich werde dir bei all dem helfen. Bleiben Sie beim Kurs und Sie werden alles lernen , was Sie über diesen Bereich wissen müssen. Speziell zu diesem Design habe ich beschlossen, den ersten Button durch Hinzufügen eines Schlagschattens hervorstechen zu lassen . Ich habe die zweite Schaltfläche grau gemacht um zu zeigen, dass sie nicht zum Anklicken bereit ist. Es ist auch nicht so breit. Nun, das ist das Prinzip der Hierarchie. Du spürst es in deinem Bauch , dass du auf diesen Knopf klicken musst, den lila, und nicht auf diesen anderen. Schließlich habe ich die Textebene unten hinzugefügt , um das Design auszugleichen. Jetzt, nachdem du diesen Kurs abgeschlossen hast, wirst du sogar in der Lage sein, viel mehr von diesen Dingen mit einer Menge Selbstvertrauen zu machen . Aber jetzt lass uns weitermachen. 4. Zwei grundlegende Fähigkeiten in Figma: Lassen Sie uns eine brandneue Datei erstellen, um Land zu kontrollieren, egal welche Methode Sie bevorzugen. Und lass uns an die Arbeit gehen. Anfangs weiß ich, dass alles so leer erscheint. Jedes Projekt beginnt mit einem Frame. Das ist das Erste, woran du dich erinnern musst. Ein Rahmen ist wie eine Kunsttafel oder eine Leinwand, aber es ist nur ein bisschen anders als Figma ist ein Ort, an dem du all deine Texte, Bilder, im Grunde deinen Inhalt hinzufügst Bilder, im Grunde deinen Inhalt Das ist alles innerhalb des Rahmens. Mach dir keine Sorgen über die Definition. Während wir arbeiten, wirst du es bald bekommen. Um den Rahmen hinzuzufügen. Bitte drücken Sie F, um das Frame-Werkzeug zu aktivieren , oder klicken Sie einfach hier. Übrigens gibt es hier ein anderes Tool namens Slice-Tool, aber das wollen wir nicht. Okay. Wir haben das Frame Tool ausgewählt und das rechte Panel hat sich gerade geändert. Sie haben viele Optionen , die sehr gut organisiert sind. Telefon, Tablet oder Desktop und so weiter. Sie können auf die Namen klicken , um sie zu öffnen oder zu schließen. Und wenn Sie auf einen von ihnen klicken, beispielsweise auf das iPad Mini, wird der Rahmen automatisch hinzugefügt. Sie können es auch im Ebenenfenster sehen. Sehen Sie sich dieses Symbol hier an, das wie ein Hashtag aussieht. Das ist ein Frame, um es zu löschen. Tippen Sie einfach auf die Löschtaste und fertig. Okay, gehen wir zum Desktop-Bereich über und wählen das erste Element aus dieser Liste aus, das auch Desktop genannt wird. Wir können die Größe genau hier sehen. Es ist 14, 40 mal 1024. Da hast du es. Das Problem ist nun, meisten Webdesign-Projekte mit einem Frame beginnen sollten , der 1920 mal 1080 groß ist. Das kann ich nur empfehlen. Die beste Möglichkeit, die Größe zu ändern, besteht darin, diesen Teil hier zu verwenden. W steht für die Breite und H steht für Höhe statt 14, 40. Klicken Sie hier. Und jetzt können Sie 1920 eingeben. Das Gleiche gilt für die Höhe, nach der wir suchen, dann AD. Jetzt wurde der Rahmen erweitert und wir können ihn sehr gut sehen. Folgendes müssen Sie tun, um die Ansicht zu vergrößern oder zu verkleinern. Bitte halten Sie die Strg-Taste gedrückt und benutzen Sie das Mausrad. Wenn du rückwärts scrollst, zoomst du heraus. Wenn du vorwärts scrollst, zoomst du hinein, nachdem du es ein paar Mal gemacht Es fühlt sich natürlich an. Bitte benutzen Sie Ihre linke Hand. Idealerweise haben Sie einen kleinen Finger, um die linke Steuertaste auf Ihrer Tastatur gedrückt zu halten. Benutze jetzt deine Schriftrolle. Bitte gehen Sie wie folgt vor. Bewegen Sie die Maus in die Bildkoordinate und zoomen Sie hinein. Wie Sie sehen, hilft Ihnen das wirklich, sich auf diesen Bereich zu konzentrieren. Verkleinern Sie nun die Ansicht und gehen Sie in eine andere Ecke. Ich weiß, das klingt nach sehr einfachen Dingen, aber glaub mir, es ist wichtig, dass du übst. Du kannst nicht weitermachen, bis du dieses Zeug beherrschst. Es gibt noch eine Sache, die Sie verwenden müssen, und das ist die Leertaste. Angenommen, wir sind in eine Ecke gezoomt und mit der Zoomstufe sehr zufrieden. Aber jetzt wollen wir in die andere Ecke gehen. Das nennt man Panning. Herumschwenken. Halten Sie die Leertaste gedrückt und Ihr Mauszeiger wird zu einer Hand. Wenn Sie die Leertaste loslassen, geht es zurück zu den Standarddaten, dem Verschiebewerkzeug. Halten Sie erneut die Leertaste gedrückt, klicken Sie auf Halten und bewegen Sie sich von Koordinate zu Koordinate von Seite zu Seite, nach oben und unten. Sie diese beiden einfachen Techniken beherrschen, schaffen Sie eine sehr solide Grundlage. Das ist dein Alphabet. Das ist deine grundlegende, grundlegende Mathematik. Bitte lerne es. Daran führt kein Weg vorbei. Um es noch einmal zusammenzufassen, halten Sie die Strg-Taste gedrückt und scrollen Sie mit der Maus hinein oder heraus, und halten Sie die Leertaste gedrückt, klicken und halten Sie, um sich von einer Seite zur anderen zu bewegen , um zu schwenken und zu schwenken. 5. Figma vs Adobe XD vs Sketch vs Photoshop: Willkommen zurück. In dieser Vorlesung möchte ich einen kurzen Vergleich zwischen diesen AB-Designprogrammen durchführen. Erstens scheint die Schlussfolgerung, Figma, der Industriestandard und das beste Designprogramm für die Zukunft zu sein . In diesem Sinne können Sie zur nächsten Vorlesung übergehen, wenn Sie nicht an allen Details interessiert sind, okay, vorausgesetzt, Sie sind noch hier, ich schaue mir den Markt oder den Designmarkt an und ich sehe vier große Säulen ist Photoshop, Adobe XD, Sketch und Figma. Lassen Sie uns zunächst über Sketch sprechen. Es ist ein anständiges App-Designprogramm , das ziemlich bekannt ist. Es kostet 9$ pro Monat, aber ich bin aus einem einfachen Grund nicht daran interessiert. Es ist unter Windows nicht verfügbar, daher kann ich es nicht verwenden. Soweit ich weiß, das Team dahinter nicht vor es unter Windows zum Laufen zu bringen. Aus diesem Grund kommt es für mich nicht in Frage. Mehr als das, es hat keine große Community. Vor diesem Hintergrund verliert Sketch ziemlich schnell an Boden. Es gibt es schon seit vielen Jahren, aber es verliert an Boden. Lassen Sie uns nun über Photoshop im Vergleich zu Adobe XD sprechen. Das ist, als würde man Äpfel mit Bäumen vergleichen. Es sind völlig unterschiedliche Programme , die unterschiedliche Zwecke haben. Adobe XD wurde von Grund auf für Webdesign-Projekte entwickelt , auch für Designprojekte. Das ist also einer der Hauptvorteile von Adobe XD. Es funktioniert mit Vektoren. Es ist sehr leicht, superschnell und hat tolle Funktionen, die Ihren Designprozess erheblich beschleunigen können . Schauen Sie sich einfach dieses Beispiel an in dem ich mit nur wenigen Klicks eine Liste füllen kann , mit der Sie wirklich schneller und intelligenter arbeiten können. Es ist nicht nur eine Spielerei. Ich verwende es ständig in all meinen Projekten. Geschwindigkeit ist hier das Schlüsselwort. Der Nachteil ist nun, dass sich Adobe XD noch in der Entwicklung befindet. Adobe arbeitet ständig daran und es wird immer besser. Aber einige Leute sagen, dass die Updates schnell genug kommen. Grundlegende Dinge wie eine dunkle Oberfläche oder die Möglichkeit, Ihr Layout zu ändern, z. B. diese sind nicht verfügbar. Nun, zum Zeitpunkt dieser Aufnahme sowieso nicht. Ein weiterer Nachteil. Bisher war Adobe XD ein kostenloses Programm. Jetzt sind es zehn Dollar pro Monat. Insgesamt herrscht also ein Gefühl der Frustration über Adobe XD, besonders wenn man es mit Figma vergleicht. Jetzt mehr dazu in einer Sekunde. Lassen Sie uns zunächst über Photoshop sprechen. Photoshop ist großartig. Es hat jede Menge Funktionen. Es ist vorhersehbar, komfortabel und Sie können damit wunderschöne Apps entwerfen. Es ist eines der bekanntesten Designprogramme der Welt. Jetzt könnte ich weiter und weiter darüber reden, von seinen positiven Seiten. Aber hier ist der Elefant im Zimmer. Das größte Einzelproblem von Photoshop für die AB-Designarbeit ist die Leistung. Bei der Arbeit an einem mittleren bis großen Projekt verlangsamt sich Photoshop dramatisch. Bei den meisten AB-Designprojekten selbst mit dem absolut besten Computer immer noch Probleme, habe ich selbst mit dem absolut besten Computer immer noch Probleme, mich zu bewegen. Es ist abgehackt, reagiert nicht und es ist ziemlich nervig. Und das ist eine 7.000-Dollar-Maschine, nicht die beste der Welt, aber immer noch 7.000 Dollar. Als ich nun versucht habe, die neue Textebene Photoshop hinzuzufügen , ist das der Ring? Es ist langsam wie ****, es stoppt und es denkt für ein paar Sekunden Hinzufügen einer einfachen Textebene Das Hinzufügen einer einfachen Textebene ist frustrierend und bei weitem der größte Nachteil gegenüber anderen, auch anderen. Aber das ist es, was mich wirklich jeden Tag betrifft. Und es ist ganz einfach. Photoshop wurde nicht für solche Dinge entwickelt. Wenn das Projekt insgesamt nur wenige Bildschirme hat , ist das völlig in Ordnung. Sie können Photoshop gut verwenden. Aber nach zehn oder 20 Bildschirmen wird es einfach viel zu langsam. Um es zusammenzufassen, zwischen Adobe XD und Photoshop gibt es keinen Kontext für ein anständiges App-Designprojekt. Einer ist unglaublich schnell, während der andere der Gigant der Designwelt ist. Aber es ist auch schmerzhaft langsam. Jetski, Adobe XD gegen Kreuzfahrtschiff. Nun zurück zu Figma, es wurde 2012 gestartet und auch 2018 es wirklich an Fahrt gewonnen. Die nächsten Jahre. Es verbreitet sich unglaublich schnell in der Design-Community. So sehr, dass Adobe, das riesige Unternehmen hinter Programmen wie Photoshop, Illustrator, Premiere Pro und natürlich Adobe XD, diese Seite von Figma für 20 Milliarden US-Dollar hat. Ja, Milliarden. Das ist also Ende 2022 passiert und es hat alle überrascht. Die Summe ist unglaublich, aber hier ist der Grund, warum Sie sich darum kümmern sollten. Adobe XD war also ein direkter Konkurrent von Figma, ein Anfänger, sie könnten sogar ähnlich aussehen. Adobe XD wurde genau wie Figma für Web- und App-Designprojekte entwickelt . Aber ein klarer Vorteil, der mir so wichtig war, war die Preisgestaltung. Es war völlig kostenlos. Adobe XD begann kostenlos, aber dann verdienten sie zehn Dollar pro Monat. Und das klingt vielleicht nicht nach viel, aber die meisten Unternehmen hassen es , ein neues Abrechnungssystem einzuführen. Wenn sie Designer sind, sich einfach schnell und problemlos anmelden könnten , wäre das der ideale Fall. Also Figma, eine gute Wahl für die meisten Unternehmen und Designer aller Art, gerne in Figma arbeiten und das nicht, weil es kostenlos war, sondern auch, weil es in Ihrem Browser funktioniert hat. Ja, ein komplettes Designprogramm , das in Ihrem Browser funktioniert. Alles in allem wurde Figma zu Designprogramm, nach dem alle gefragt haben. Adobe versuchte, Adobe XD zu verbessern, aber insgesamt schien Figma nicht aufzuhalten. Ich denke, deshalb haben sie beschlossen, es für einen so großen Betrag zu kaufen. Sie mussten etwas tun. Figma wurde immer stärker und sie zu kaufen war die einfachste Lösung. Die Hauptfrage nach dem Kauf des Figma durch Adobe lautete nun Kauf des Figma durch Adobe lautete Wird er kostenlos bleiben? Und die Antwort lautet ja. Aber die wichtigste Frage ist diese. Was wird Adobe tun, sowohl XD als auch Figma machen genau dasselbe. Es ergibt keinen Sinn. Die wichtigsten beiden Designprogramme, es ist einfach zu teuer. Die meisten Leute denken also, dass Adobe Figma sofort töten wird, da es einst ein Konkurrent war. Aber ich vermute, dass Adobe XD mit viel größerer Wahrscheinlichkeit beendet wird. Die Zeit wird es uns zeigen. Aber vorerst ist es am besten , wenn du Figma lernst und siehst, warum viele Designer angefangen haben, es zu verwenden. Und sie sind nie wieder zu Adobe XD oder einem anderen Designprogramm gewechselt . Bevor wir zum Schluss kommen, möchte ich noch etwas erwähnen. Adobe wird Figma sehr wahrscheinlich mehrmals aktualisieren. Dies bedeutet, dass Sie hier und da möglicherweise geringfügige Änderungen an der Benutzeroberfläche feststellen . Aber das Tolle an diesem Kurs ist, dass die Prinzipien, die Gestaltungsprinzipien, die wir behandeln, universell sind. Also, auch wenn Sie einen leichten Phasenwechsel sehen, machen sich keine Sorgen, Sie können trotzdem problemlos mitmachen. Und wenn du nicht weiterkommst, bitte bitte einfach um Hilfe und ich werde vorerst da sein, um einzuspringen. Lass uns weitermachen und wir sehen uns in einer Sekunde. Ich danke dir. 6. Wir verbessern unsere Geschwindigkeit: Willkommen zurück. Ich weiß, dass es über die Benutzeroberfläche von Figma und die Grundlagen des Programms viel zu besprechen gibt Was ich vorschlage, lassen Sie uns unsere Geschwindigkeit verbessern. Geschwindigkeit ist einer der wichtigsten Faktoren, die Ihren Erfolg im Laufe der Jahre bestimmen. Ich habe festgestellt, dass Volumen unglaublich wichtig ist. Einfach ausgedrückt, es ist eine Sache, wenn Sie entwerfen, dann Knöpfe, es ist eine andere Sache. Wenn Sie 1.000 entwerfen, Sie durch die bloße Wiederholung besser. Es geht nicht nur darum, schneller zu sein, es geht auch darum, sicher zu sein, die Grundlagen umzusetzen. Deshalb beginnen wir mit einer weiteren Übung. Obwohl Sie mit dem Programm nicht vertraut sind, sind Sie sich nicht sicher, ob es sich um die Benutzeroberfläche handelt und so weiter. Mach dir keine Sorgen. Nimm es mit, starte Sigma und wir erstellen ein neues Projekt, indem du hier klickst. Am Anfang wird ein völlig leerer Bildschirm angezeigt und das ist normal. Schnappen Sie sich das Frame-Werkzeug, Hotkey F. Sie können eine dieser Voreinstellungen verwenden, aber es ist einfach einfacher, auf ein Feld zu klicken und es herauszuziehen. Das ist ein Rahmen, auch bekannt als Bildschirm. Natürlich ist die Größe völlig falsch. Lassen Sie uns das beheben, indem wir mit diesem Eigenschaftenfenster hier auf der rechten Seite arbeiten . Kurz gesagt, W steht für das Netz und h steht für Höhe. Wir wollen 720 mal 12, 80, ein guter Ausgangspunkt für die meisten Apps. Geben Sie diese Werte ein und drücken Sie die Eingabetaste. Danach können Sie die Strg-Taste gedrückt halten und das Bett mit einem Mausrad verkleinern . Nun, hier ist alles objektiv. Ich möchte, dass du schnell ein Raster aus sechs Fotos mit sechs Dipolen erstellst . Das bedeutet, dass es zwei Spalten sein müssen. Das Ziel ist es, dies so schnell wie möglich zu tun. Und zu diesem Zweck werde ich dich bitten, es dreimal zu tun. Bitte notieren Sie jedes Mal, wenn Sie es tun, die Uhrzeit. Verwenden Sie eine Stoppuhr auf Ihrem Telefon. Ich wollte sehen, wie Sie sich jedes Mal verbessern , wenn Sie diese Schritte durchlaufen. So läuft das. Schnappen Sie sich das Rechteckwerkzeug, Hotkey und zeichnen Sie eine Form wie diese. Es gibt keine bestimmte Größe, aber sie sollte unter einhundert30 Pixeln liegen. Das ist aber einfach zu löschen. Sie haben also Platz für zwei von ihnen nebeneinander. Platzieren Sie es oben links und schon kann es losgehen. Als Nächstes greifen Sie zum Textwerkzeug, Hotkey d, d für die Art des Textes. Und lass uns etwas schreiben. Das kann zu diesem Zeitpunkt alles sein. Ich verwende einfach photo name1, nur zufällig. Drücken Sie Escape, wenn Sie damit fertig sind. Jetzt beginnt der Spaß. Wählen Sie sowohl das Rechteck auch die Textebene aus, indem Sie ein Feld wie folgt auszeichnen. Jetzt, wo du es erraten hast, müssen wir sie zentrieren. Jetzt. Das ist alles in Ordnung und gut, aber die Textebene ist ziemlich einfach. Nun, lassen Sie uns darauf klicken und zur rechten Seite des Bildschirms gehen und die Ausrichtung ändern. Zunächst gehen wir von der linken zur mittleren Ausrichtung über. Und warum? Weil wir die Größe erhöhen werden. Wir werden viele Dinge tun, aber es wird bleiben. Aber so hier, wie Sie sehen können, bleibt es z. B. hier, wie Sie sehen können, zentriert, obwohl ich die Größe geändert habe. Außerdem können wir auch die Schrift ändern , indem wir dieses Feld hier verwenden. Ich habe viele davon installiert. Also werde ich mich für einen von ihnen entscheiden, z. B. Poppins, bold 24, oder? Und weil wir die Ausrichtung von links zur Mitte ändern , bleibt der Text mit einem Rechteck zentriert. Ich werde dir später beibringen, wie man Schriften installiert, aber jetzt lass uns weitermachen. Im Moment können Sie jede andere Schriftart verwenden , die interessant aussieht. Gehen Sie diese Liste einfach hier durch. Okay, als nächstes wählen Sie beide Ebenen aus und machen eine Kopierbreite, steuern Sie den Schreibtisch Command D auf einem Mac, D wie doppelt. Und wie immer scheint nichts passiert zu sein. Aber das Ebenenfenster zeigt uns die Kopie zurück zum Bildschirm Klicken Sie darauf und ziehen Sie sie zur Seite. Es ist wichtig, dass du es gut ausrichtest, oder? Das ist es also, was es bedeutet. Stellen Sie sich eine horizontale Linie vor, die genau hier verläuft. Du musst es dir eigentlich nicht vorstellen , denn Figma hilft dir. Okay? Also eine Linie , die richtig ist und auf beiden Seiten etwas Platz lässt. Wählen Sie bei Bedarf alles aus und verschieben Sie es. Okay, das ist gutes Zeug. Lass uns das jetzt machen. Lassen Sie uns beide Einträge auswählen, indem wir ein noch größeres Kästchen herausziehen , das alles umfasst, oder? Duplizieren Sie nun erneut mit Strg-D und ziehen Sie die Kopien nach unten. Bitte lassen Sie ausreichend Platz zwischen den Reihen. Also so etwas wie das. Was ich vermeiden möchte, ist etwas, das überfüllt aussieht wie dieses hier. Das ist kein großes Glück. also erneut sicher, dass Sie genügend Atempause lassen , 0. Denken Sie daran, bei Bedarf ein - und auszuzoomen Das wird gesteuert und Ihre Maus scrollt. Okay, jetzt mach es bei Bedarf noch einmal, bis du sechs Fotos hast. Und obwohl sie großartig sein werden, wenn wir über Fotos sprechen, gehen wir zu unsplash.com. Und hier findest du eine riesige Bibliothek mit kostenlosen Bildern. Jetzt rate ich Ihnen, mir etwas Interessantes über Ihr Land zu zeigen . Du kannst verschiedene Städte zeigen, verschiedene Teile deiner Natur. Achte nur darauf, dass die Fotos gut zusammenpassen und dass die Namen deutlich gekennzeichnet sind. Nachdem Sie also sechs Bilder von Unsplash heruntergeladen haben, ist es an der Zeit, sie in das Projekt aufzunehmen. Verwenden wir dazu Control Shift K, um die Bilder zu platzieren. Oder wenn Ihnen der Hotkey nicht gefällt, gehen Sie zum Rechteckwerkzeug und klicken Sie hier auf diesen Abwärtspfeil, suchen, platzieren Sie Bilder und wählen Sie diese sechs Dateien aus. Diese sollten sich bewusst sein, dass unsplash.com Ihnen riesige Bilder bietet. Wenn du sie also hochlädst, wird sich Figma für eine Weile bedanken, nur für ein paar Sekunden, also musst du Geduld damit haben. Okay, großartig. Klicken Sie nun schnell auf alle Rechtecke, um diese Bilder in sie einzufügen. Wenn Sie fertig sind, möchte ich, dass Sie all diese Textebenen in etwas Passenderes umbenennen . Auch hier können es Städtenamen und Ihr Land oder etwas anderes sein. Du brauchst keine lange Beschreibung, halte es einfach kurz und bündig. Natürlich könnten Sie diesen Text auf eine andere Größe verkleinern . Du hast die volle Kontrolle über den Look. Machen Sie es größer, ändern Sie die Schrift, was auch immer Sie tun möchten, wenn Sie fertig sind, wählen Sie den gesamten Rahmen aus. Gehen Sie dann zu Exportieren und klicken Sie auf dieses Plus-Symbol. Und Sie werden einige Optionen sehen und die Standardoptionen sind völlig in Ordnung. Png in der Größe , in der Sie es eingerichtet haben. Klicken Sie auf diese Schaltfläche und Sie erhalten ein Browserfenster, speichern Sie es auf Ihrem Desktop und laden Sie es dann auf die Plattform hoch. Ich will es noch sehen, das ist dein Design. Ich möchte, dass du jetzt VP machst. Sie trainieren noch ein paar Mal, insgesamt dreimal. Das bedeutet also, dass Sie auf zwei Arten ein Rechteck am Titelcent des Titels erstellen . Einmal mit einem Rechteck und dann das zweite Mal die Ausrichtung von der linken Seite zur Mitte ändern . Suchen Sie dann nach den Titeln, dürfen Sie Kopien haben, fügen Sie Fotos hinzu und erkunden Sie. Erfahren Sie, wie Sie Ihre Zeit verbessern können. Aber eines: Denken Sie nicht an die Zeit, die Sie auf Unsplash verbringen , um nach den Fotos zu suchen. Das ist also ausgeschlossen, oder? Halte die Stoppuhr an. Was du suchst, die Geschwindigkeit in Figma, du solltest in der Lage sein, Rechtecke und Textebenen mit geschlossenen Augen hinzuzufügen . Fügen Sie die Fotos ein und stellen Sie sicher, dass alles zentriert ist. Bewege sie, zoome hinein und heraus. Das will ich von dir. Viel Glück und teile mir deine Zeiten mit. Lass mich wissen, wie du dich jedes Mal verbesserst. 7. Dieses mobile App-Design beheben: Willkommen zurück. Bitte starte Figma und wichtig für die folgende Datei. Repariere dieses App-Punkt-FIG-Ding. Dies ist dem Kurs beigefügt. Jetzt ist das Ziel einfach. Wir müssen dieses Design verbessern. Und das wird uns sehr helfen, zu lernen, wie wir eine App entwerfen müssen. Nun, hier ist der erste Fehler. Sie haben gesehen, dass wir unsere Artikel ziemlich zentriert haben. Beachten Sie diese linke Seite. Jetzt sollten Sie sich sofort die vertikale Linie vorstellen , die durch all diese Elemente verläuft. Wenn Sie alle auswählen, werden Sie feststellen, dass sie überall sind. Sie sind nicht aufeinander abgestimmt. Dadurch sieht die App chaotisch aus. Es ist ein Bauchgefühl, das dir sagt, dass etwas nicht stimmt. also all diese Elemente ausgewählt sind, verwenden wir diese Alignment-Befehlszeile links. Und das ist viel ähnlicher. Um fair zu sein, ist der Abstand auf der rechten Seite größer, eins zu eins gegenüber 82 auf der linken Seite. Das ist nicht korrekt. Nun, zunächst einmal, wenn du versucht hast, dieses Symbol für die Mittellinie zu verwenden, gibt uns figma nicht, was wir jetzt suchen, um fair zu sein Das sieht nicht schlecht aus, aber lass uns auf dem Laufenden bleiben. Jetzt wollen wir den Abstand auf der linken Seite mit dem auf der rechten Seite ausgleichen , oder? Wir wollen die gleiche Lücke. Wir können alles klicken, ziehen und verschieben bis wir diese Linie sehen. Dies ist der manuelle Weg, dies zu tun, und es ist nicht der schnellste Weg, um die Arbeit zu erledigen. Lass mich also die Steuerung Z rückgängig machen, das ist Command Z auf einem Mac. Wählen Sie nun alle Elemente aus , dass Sie Control G, G wie in der Gruppe verwenden können . Das ist Command G auf einem Mac. Konzentrieren Sie sich nun auf das Ebenenfenster. Wir haben hier etwas namens Gruppe oder Ordner. Kurz gesagt, Figma behandelt jetzt all diese Elemente als eins. Und aus diesem Grund können wir den zentralen Befehl einfach so verwenden , und wir haben auf beiden Seiten dieselbe Lücke. Also hast du das alles bekommen? Wir haben alle Ebenen gruppiert. Figma würde sie also alle als ein einziges Objekt betrachten. Dann können wir jetzt den zentralen Befehl verwenden, um die Gruppierung aufzuheben Klicken Sie einfach mit der rechten Maustaste hier oder im Ebenenbedienfeld. Und wir suchen die Gruppe aufheben. Oder sogar schnell, dass man die Hotkeys Control Shift G benutzen kann , aber ich mag es, mit der rechten Maustaste zu klicken. Also nochmal, das ist der erste Fehler, Dinge nicht richtig aufeinander abzustimmen. Das war in zwei Fällen, links ausgerichtet und dann in der Mitte bewegt. Nun, der zweite Fehler ist genau hier mit dieser Störung, dieses Grau ist viel zu hell, es ist zu verwaschen, also ist es zu schwer zu lesen. Stellen Sie sich vor, Sie sind an Ihrem Telefon und Ihre Helligkeit liegt bei 20 Prozent. Um Ihre Akkulaufzeit zu verlängern, können Sie das nicht lesen. Klicken Sie also darauf, um das auszuwählen, und ändern Sie dann die Füllung in etwas Dunkleres. Lesbarkeit ist entscheidend. Teilnahmeberechtigung ist das, was Sie benötigen , um Textebenen leicht lesen zu können. Eine sehr verwaschene Farbe ist also ein No-Go. Der nächste Fehler ist die Hauptaktion bei der Anmeldung auf diesem Bildschirm. Es ist so ein kleines Element und es ist leicht zu übersehen. Warum nicht eine große Taste mit einer großzügigen Oberfläche den Benutzer zwingen , die Schritte sehr präzise zu handhaben. Es ergibt keinen Sinn. Wählen Sie also den Text aus und verwenden Sie dann Shift a. Dies ist die Standardmethode, um eine Schaltfläche in Figma zu erstellen. Mehr als das, aber der letzte Punkt: Lassen Sie uns nun eine Füllung hinzufügen, indem Sie auf dieses Plus-Symbol klicken. Wenn es um Actionfarben geht, verwende etwas, das hell und gesättigt ist. Nehmen wir zum Beispiel an, wir möchten ein Grün verwenden. Du solltest dich niemals für so etwas entscheiden, z. B. so langweilig, langweilig und verwaschen. Das muss auffallen. Auf der anderen Seite möchten Sie keine Neonfarben verwenden, oder? also normalerweise ein Fehler, ganz oben rechts zu gehen ist also normalerweise ein Fehler, ganz oben rechts zu gehen. Stattdessen möchtest du hier in dieser Gegend bleiben. Dies ist eine moderne Farbe , mit der die meisten Kunden zufrieden sein werden. Natürlich funktioniert Schwarz nicht. Könnten Sie es nun möglicherweise lesen? Ja, natürlich, aber sieht es toll aus? Nein. Denken Sie also daran, wir können den Text von hier aus steuern , die Farben auswählen. Nun, mein Rat: Entscheiden Sie sich immer, immer für das reine Weiß. Sonst nichts, nicht gelb, nicht blaugrün, nicht grau, NAB, Gold. Nichts geht über reines Weiß. Okay, was die Kernnerven angeht, sehen quadratische Nerven etwas veraltet aus. Es ist kein Fehler, aber es ist nicht nett. Es ist ein bisschen 2010. Also dieser Schnabel. Verwenden wir also einen hohen Wert, etwa 60. Sie können hier einen beliebigen sehr hohen Wert eingeben Figma verwendet nur den maximal möglichen Wert für die Breite und Höhe der Schaltfläche, verwenden wir 160,20. Jetzt rate ich Ihnen, entweder den Button so zu gestalten , wie es die Felder tut, oder Sie verkleinern ihn erheblich. Zentriere es wie immer horizontal. Was zu vermeiden ist, sind die Werte, die ungefähr gleich, aber unterschiedlich zu sein scheinen . 200 ist ein Paradebeispiel. Es ist ungefähr so breit wie die Felder, aber nicht ganz. Das ist weniger ästhetisch ansprechend. Also mein Rat stiehlt davon ab. Entweder hast du es genau oder du hast es gar nicht getan. Nun, zurück zum Geist der Übung, wir können noch viel mehr tun, oder? Lassen Sie uns das vergessene Passwort an eine andere Stelle verschieben, die Anmeldeschaltfläche gedrückt haben und so weiter. Nun, das sind Feinabstimmungsdetails und Sie können es als optionale Schritte wählen oder belassen, oder? Es geht mehr um persönliche Vorlieben als darum , welche Fehler zu beheben, was ist klar, ist das Problem, ist dieses, das letzte aus dieser Übung? Ein gutes Passwort ist nicht richtig formatiert. Siehst du, das Einloggen ist eindeutig eine Aktion, oder? Melde dich unten an. Auch hier handelt es sich eindeutig um eine Aktion. Sie können sehen, dass es in einer anderen Farbe ist und es ist sogar fett gedruckt. Es fällt also etwas mehr auf, weil Gott, das Passwort scheint in keiner Weise besonders zu sein und das ist offensichtlich ein Fehler. Wählen Sie es aus und ändern Sie es, machen Sie es fett und ändern seine Farbe in eine vorhandene, z. B. dieses Blau. Nun, warum blau? Weil es eine sekundäre Reaktion ist, ähnlich wie bei der Anmeldung. Jetzt besteht die Hauptaktion oder die primäre Reaktion darin, sich anzumelden, was grün ist. Die sekundäre ist blau. Nun, das sind die Dinge, die Sie in diesem Kurs lernen werden. Lassen Sie uns das vorerst zusammenfassen. Wir haben also alles hinter uns gelassen, weil Präzision bei jedem App-Design-Projekt unerlässlich ist Wir ändern die Farbe der Beschreibung, um die Lesbarkeit und die Lesbarkeit zu verbessern . Wir haben das Rechteck für die Anmeldeaktion hinzugefügt , um die Verwendung zu vereinfachen. Und schließlich haben wir für den Gott ein Passwort gemacht, fett und blau. Es zeichnet sich also als Aktion aus, als etwas, das Sie antippen können. Und damit, mit Good to go, reparieren wir diese App. Ich danke dir. 8. Einführung in das Projekt: Willkommen zurück. Im nächsten Abschnitt werden wir eine App für die Lieferung von Lebensmitteln entwerfen, was ein ziemliches Projekt sein wird. Ziel ist es, sich mit allen Komponenten einer mobilen App vertraut zu machen und etwas zu erstellen, das gut aussieht. Bitte schauen Sie sich jedes Video zweimal an. Einmal, um zu verstehen , was vor sich geht. Arbeiten Sie nicht mit, schauen Sie einfach zu und sehen Sie, was passiert. Und dann ein zweites Mal. so oft Pause, wie Sie zur Mitarbeit benötigen. Okay, jetzt, wo wir jeden Bildschirm durchgehen, werde ich dir meinen Einblick geben. Ich werde Ihnen meinen Denkprozess darüber geben, wie ich schnell Designentscheidungen treffe. Allerdings müssen Sie sich darüber im Klaren sein, dass bestimmte Prinzipien , die hier gelten, einer eingehenden Analyse bedürfen. Wir werden später über all diese Dinge sprechen . Moment möchte ich, dass du so viel wie möglich arbeitest und den Großteil der Theorie für später überlässt. Jetzt kannst du Chris andere Dinge fragen , die wir lernen müssen. Warum stürzen wir uns in ein vollwertiges App-Design-Projekt, ein Projekt aus der realen Welt? Und das liegt daran, dass nichts besser ist als Erfahrung. Deshalb möchte ich, dass Sie mit Jumping Stray und dann weiter fortfahren auch Standardlayouts entwerfen denn genau darauf werden Sie in Ihren täglichen Projekten stoßen. Sicher. Es gibt jede Menge superkreativer Out-of-the-Box-Designs auf den Händen mit Dribbeln. Tatsache ist jedoch, dass die meisten Ihrer Kunden nicht das Glück haben , für App-Entwicklung, für Codons auszugeben. Also werden wir etwas schaffen , das tatsächlich ein Projekt aus der realen Welt ist. Etwas, das auf meiner Erfahrung aus über fünf Jahren Arbeit mit Codelabs basiert , mit Entwicklern rund um die Uhr. Das bedeutet, dass Sie bewährte Verfahren anwenden und relativ standardisierte Layouts verwenden. Sie müssen sich bewusst sein, dass jede Designentscheidung , die Sie treffen, die Entwicklungskosten und die Codierungskosten erhöhen oder senken kann . Obwohl etwas beeindruckend aussieht, besteht eine sehr gute Chance, dass der Entwickler extra hart daran arbeitet , dies zu erreichen, und der Kunde viel mehr bezahlen muss. Ich war schon oft auf diesem Weg. Aber hier ist die Sache. Ich war auch beim Kunden, wo ich zusätzliche Zahlungen genehmigen musste , da die endgültige Version mehr Arbeit erfordert, als wir ursprünglich erwartet hatten. Nun, nochmal, werde ich all dieses Wissen in diesen Kurs einbringen und dir beibringen, wie du deine Schlachten sorgfältig auswählst und etwas Fantastisches entwirfst, das nicht die Bank sprengt. Vorerst. Ich möchte, dass du neugierig bleibst und dein Bestes tust , um dir die gesamten Zitate bis zum Ende anzusehen. Bevor wir gehen, muss ich Sie um Ihr Verständnis für bestimmte Teile bitten , die beschleunigt werden. Jedes anständige App-Design-Projekt wird Tage, wenn nicht Wochen dauern. Ich versuche, es auf das Wesentliche zu reduzieren, es zu reduzieren, damit Sie im Handumdrehen eine großartige Lernerfahrung erhalten . Das bedeutet also, dass ich bestimmte Dinge herausschneiden muss. Wiederholte Aktionen , die ich 100 Mal gemacht habe , oder Dinge wie, wie man etwas googelt, weißt du, einen Iconsatz finden, eine Schriftart finden, Dinge dieser Art, Dinge, die Zeit sind... konsumierend, aber an ihnen ist nichts Besonderes. Wenn Sie Fragen haben, wenden Sie sich bitte an uns. Ich bin hier um zu helfen. Wenn du etwas nicht verstehst, poste bitte einfach eine Nachricht und ich werde es so schnell wie möglich beantworten. Okay, lass uns ein bisschen Spaß mit unserem ersten ernsthaften Projekt haben. Bitte habe Geduld mit dir selbst, falls du manchmal Probleme hast und bleib bis zum Ende bei mir. Lass es uns bei machen. 9. Den Kurzbericht erkunden: Willkommen zurück. Dies ist unser erstes seriöses App-Projekt. Dies wird eine App für die Lieferung von Lebensmitteln sein. Und wir werden diese Gelegenheit nutzen, um viele verschiedene Bildschirme und Szenarien durchzugehen . Dieses Projekt hat einen Auftrag, der etwa acht von zehn Punkten entspricht. Nicht toll, aber es sind bestimmt nicht ein paar Skizzen auf einer Serviette. Es ist zweifach, wie es sein sollte. Zum einen haben wir das Wireframe, das uns die wichtigsten Bildschirme zeigt und welche Inhalte enthalten sein müssen. Auf der anderen Seite haben wir ein Dokument, das beschreibt, was in der App vor sich geht , nur für den Fall es aus dem Wireframe nicht klar ist. Idealerweise sollten Sie immer beide haben , wenn Sie ein neues Projekt starten. Es ist nicht deine Aufgabe, sie dir auszudenken. Aber wenn der Kunde das möchte, sollten Sie Ihr Angebot erheblich erhöhen im Grunde mehr, ich würde sagen, mindestens mindestens weitere 1.000 USD in Rechnung stellen. Okay. Anhang zum Kurs finden Sie den Link für das Wireframe, das Logo und die Dokumentation. Jetzt heißt dieses Geschäft Live Short for Delivery und es ist im Grunde eine App, die Lebensmittel liefert. Und in einigen Städten müssen wir alle Restaurants auflisten, die Essen zum Mitnehmen anbieten, aber nur die, die ihr eigenes Lieferpersonal haben. Okay, gut zu wissen. Jetzt kümmert sich die Firma links nicht um die eigentliche Lieferung. Nun, dieser Bereich des Auftrags ist sehr verbreitet. Es ist die Essenz des Projekts und es ist ein guter Anfang wenn Sie eine allgemeine Vorstellung davon bekommen , was Sie entwerfen werden. Die nächste Phase ist entscheidend, die Zielgruppe. Und das wird das Erscheinungsbild der App bestimmen . Und es ist schön, zumindest eine Entzündung zu haben. Jetzt ist diese App für aktive Personen mit verfügbarem Einkommen. Beide Geschlechter, wahrscheinlich ledig, unverheiratet, Bürojob, unwahrscheinlich, obere Führungsebene. Wir haben zwei Zahlungspunkte, die Qualität des Essens und die Lieferzeit. Nun, dies sind nützliche Punkte, da sie uns helfen können, das Aussehen der App zu bestimmen. Wie wir LEP stylen sollten. Kontext ist alles. Jetzt hätte ich gerne noch ein paar Details, aber wie gesagt, das ist eine Acht Out-of-Band. Eine weitere Sache, die Sie in diesen Briefs finden sollten , ist der Wert der App. Jetzt haben wir die wichtigsten Probleme, also wissen wir, was behoben werden muss, aber wie macht die App das? Wie macht die App Menschen glücklich? Hier hat die App einige Stärken. Es sind die Aussichten, die tolle Lieferzeit und die echten Fotos der Produkte. Okay, ziemlich gut, vernünftig. In den nächsten Absätzen mit wichtigen Details, die den gesamten Ablauf der App prägen werden. Jetzt werde ich diesen Teil überspringen, aber bitte lesen Sie nach dieser Vorlesung alles selbst , soweit ich sehe. Ich denke, der Benutzer kann den Registrierungsprozess überspringen und dasselbe für die Adresse, er kann es einfach überspringen. In der Regel ist die Registrierung jetzt der allererste Schritt. Aber hier hat der Kunde, auch bekannt als Geschäftsinhaber, auch bekannt als Geschäftsinhaber, die kluge Wahl getroffen. Er möchte nicht, dass der Benutzer beim Ausfüllen von Formularen hängen bleibt, ohne den Wert der App zu erkennen. Deshalb geben wir dem Nutzer die Möglichkeit, mit der App zu interagieren Good tatsächlich zu nutzen. Und dass er überzeugt ist, dass er sich während des Bestellvorgangs anmelden kann . Das ist ein gutes Zeichen. Dies zeigt Ihnen, dass der Eigentümer oder der Projektmanager oder der Geschäftsinhaber, wer auch immer die Show leitet, über Dinge nachgedacht hat, die zu tun sind. Wir müssen das analysieren, weil uns das unsere Position im Projekt verrät. Sollen wir unsere eigenen Ideen teilen? Erlauben wir uns, lautstark zu sein und bestimmte Entscheidungen in Frage zu stellen? Nun, es hängt davon ab, wie gut das Projekt durchdacht ist und natürlich Ihre Rolle, Ihr Job in diesem Fall, das ist ein gutes Zeichen. Die Dinge sind unter Kontrolle und wir müssen den Auftrag nicht weiter erraten. Manchmal haben Kunden keine Ahnung. Dies ist keiner dieser Fälle. Falls der Benutzer angemeldet ist und der Standort nicht ausgefüllt ist, wird nur die Stadt mit den meisten Restaurants angezeigt . Aber er kann ein Drop-down-Menü verwenden , um das schnell zu ändern. Auch hier klingt es gut, ziemlich vernünftig. Falls der Benutzer registriert ist, wird im Drop-down-Menü offensichtlich seine Stadt angezeigt. Jetzt ist das Bewertungssystem prozentual, 1-100% statt der Fünf-Sterne-Bewertung, was für uns ein guter Ort ist, um etwas Persönlichkeit zu verleihen. Wir sehen das in unseren vier Kategorien von Bewertungen. Also müssen wir etwas entwerfen , das ein bisschen kreativ und interessant ist. Lassen Sie uns jetzt noch einmal eine Pause einlegen. Dies ist ein weiteres gutes Zeichen dafür , dass die Dinge von den Gehirnen der Operation sehr detailliert analysiert wurden . Bewertungssysteme verwenden den Standard-Fünf-Sterne-Ansatz, aber einige der größten Unternehmen der Welt haben auf ein Like-Dislike-System umgestellt. Dazu gehören YouTube, Netflix und in einigen Teilen der Welt Facebook. Jetzt ist die Liste der grundlegende Bildschirm in der App. Wir brauchen also ein klares Verständnis dafür, was aufgenommen werden muss und was an anderer Stelle ausgestellt werden kann. Nun, hier sehen wir, wir brauchen das Foto, einen Titel, eine Bewertung, die Art der Küche, die Lieferzeit des Lebensmittels. Ohne diese Entzündung können wir weitermachen. Die Sache ist, wir könnten z. B. eine Mindestbestellmenge angeben, oder? Oder die Liefergebühr. Wir könnten die Entfernung vom Restaurant zum Benutzer in Meilen oder Kilometern angeben. All dies würde die Struktur des Designs komplett verändern. Also nochmal, ich freue mich sehr , dass wir all diese Informationen haben und wir wissen, was enthalten sein muss und was optional ist. Wir haben hier und da noch ein paar Kleinigkeiten, aber lassen Sie uns zu den Wireframes übergehen. Wir müssen uns bewusst sein , dass die Anzahl der hier angezeigten Bildschirme nicht wirklich korrekt ist. Das Wireframe zeigt normalerweise die wichtigsten Bildschirme und wir müssen die Lücken mithilfe der Dokumentation füllen , z. B. Popups, Zwischenbildschirme und so weiter. Offensichtlich sind diese in den meisten Situationen nicht enthalten. Du wirst sie nicht finden, wenn du sie hast. Tolle Neuigkeiten, aber in diesem Fall glaube ich nicht, dass wir sie haben. Jetzt zurück dazu. Die Dinge sind ziemlich gut angelegt. Also ich denke, wir werden eine gute Zeit damit haben. Vereinfacht von Namen. Diese sind nummeriert, was großartig ist. Wir könnten also zum Beispiel über den Standortbildschirm sprechen, aber es könnte schneller sein, ihn einfach Bildschirm eins zu nennen. Wenn Sie etwas kommentieren möchten, geben Sie bitte die Nummer an. Das ist der beste Ansatz. Jetzt zurück dazu. Ich sehe, dass wir sowohl das linke als auch das rechte Menü einbeziehen müssen , was Google nicht empfiehlt. Ich denke jedoch, dass dies aufgrund dieser Filter erforderlich ist , die dem Benutzer helfen, ein bestimmtes Restaurant zu finden. Schließlich müssen wir vorsichtig mit den verschiedenen Abläufen der App sein. Wir haben mehrere Möglichkeiten. A, wenn der Benutzer registriert ist, ist das wichtig. Sei es, wenn er kein Konto hat und er den Standort überspringt, sodass wir keine Adresse haben und sehen, wenn er nicht registriert ist, aber er eine Adresse angibt. Das wird uns in der ersten Entwurfsphase nicht allzu sehr beeinflussen , aber in der Prototyping-Phase müssen wir all diese Szenarien klären. Wir müssen die App und die Direktive erstellen. Es wird also ziemlich schwierig, aber wir werden zu diesem Zeitpunkt in der Prototyping-Phase sehen . Alles in allem können wir den Designprozess beginnen, können wir den Designprozess beginnen indem wir uns die Konkurrenz in dieser Nische ansehen, wir haben um nach Inspiration zu suchen. Wir müssen sehen, was andere Leute tun. Lass uns im nächsten Clip weitermachen. 10. Die Konkurrenten der App analysieren – Teil 1: Willkommen zurück. An dieser Stelle sollte der Auftrag kein Mysterium sein. Wenn Sie noch nicht auf die Breite eingegangen sind, unterbrechen Sie das Video und analysieren es, sodass nur der nächste Schritt darin besteht, sich die Konkurrenz der App anzusehen , um zu sehen, was in diesem speziellen Sektor vor sich geht . Hier haben wir eine ziemlich gut etablierte Nische, die Lieferung von Lebensmitteln, die mehr als genug Apps sind , die wir analysieren können. Ein weiterer Grund: Verstehen Sie die Anforderungen des Projekts besser Verstehen Sie die Anforderungen des Projekts und lassen Sie sich vom Gesamtstil inspirieren . Bitte beachten Sie, dass diese Apps standortabhängig sind. Was ich dir zeigen werde, ist vielleicht in deinem Land nicht verfügbar, aber du hast mehrere Screenshots von jeder App, die dem Kurs beigefügt sind. Das Line-Up umfasst jedoch The Liver, Food Panda , the Live, eine App , die genau den gleichen Namen hat, aber das ist rein zufällig. Zum Mitnehmen und dann auf Menü klicken. Jetzt werden alle Labore ständig aktualisiert, sodass die Live-Versionen unterschiedlich sein können. Eigentlich bin ich mir ziemlich sicher, dass das anders ist. Dennoch werden die Screenshots der Bezugspunkt sein. Okay, lass uns mit dem Live beginnen , damit wir es aus dem Weg räumen können. Jetzt ist der erste Bildschirm ein großes Durcheinander. Wir haben Bankgelb, Marineblau und seltsamerweise ist der Hauptknopf auch gelb. Der Hintergrund scheint ein Bild der Stadt zu sein, aber es wird durch dieses feste Rechteck blockiert, was keinen Sinn ergibt. Wenn Sie suchen, obwohl Sie meine Sprache Rumänisch nicht verstehen, stellen Sie möglicherweise fest, dass dieser Text von ziemlich schlechter Qualität, sehr pixelig und etwas verzerrt ist . Und das liegt daran, dass diese eigentlich keine Textebenen haben, offiziell von Codons als Zeichenketten bezeichnet werden. Stattdessen ist dies ein Bild , das ausgestreckt wird. Das ist eine schlechte Praxis und es ist überhaupt nicht gut anzusehen. Okay, lass uns jetzt zur Angebotsseite wechseln. Hier sehen wir sofort die kleine Liebe zum Detail. Auf beiden Seiten gibt es keinen leeren Raum. Wenn wir also einige Linien herausziehen, können Sie sehen, dass die Ausrichtung aus dem Gleichgewicht geraten ist. Die Topographie ist bescheiden, die Schriften sind langweilig. In dieser Region gibt es keine Vielfalt. Es gibt keine bestimmte Hierarchie, die leicht zu erkennen ist. Insgesamt vier von zehn. Und ich bin großzügig. Wenn wir in das Restaurant gehen, können wir sehen, dass die Tabs diese vertikalen Trennwände haben, was ich in Android-Apps nicht oft gesehen habe. Obendrein gibt es nirgends eine Höhe. Sie können jeden Schlagschatten erkennen. Nun, das ist nicht gerade eine schlechte Sache, aber das hat in der Designabteilung zu kurz gegriffen. Schlimmer noch, die Wischgeste, die oft verwendet wird, um die Tupfer schnell zu wechseln. Nun, es funktioniert nicht wirklich. Das ist ein ziemlicher Schock. Stattdessen musst du manuell auf diese Elemente tippen, oder wir könnten diese Pfeile verwenden, die aus Windows XP-Zeiten stammen. Nun, ich habe ehrlich gesagt keine Ahnung, was diese Leute dachten. Dies ist ein Paradebeispiel für eine App, die von Entwicklern und Geschäftsleuten entwickelt wurde Entwicklern und Geschäftsleuten , Ich verspreche Ihnen, dass Sie oben rechts darauf achten, zu erraten, was dieses Symbol bewirkt. Handelt es sich um zusätzliche Informationen über das Restaurant, vielleicht eine Share-Funktion, Zu Favoriten hinzufügen? Und die Antwort ist, ich weiß es nicht. Wenn ich darauf tippe, passiert nichts. Es hat keinen Downstate, daher bin ich mir nicht sicher, ob es tatsächlich funktioniert. Aber weiter so, der Checkout ist auch lächerlich. Alles wird zufällig zusammengeworfen. Ich denke, sie wollten diese Textebenen zentrieren, aber alles ist aus. So sehr du es auch versuchst, du wirst nicht viele imaginäre Linien finden. Nichts ist aufeinander abgestimmt. Oh, und das liefert die Ikone, nimmt den Kuchen. Ich habe es mir anders überlegt. Es sind zwei von zehn, weitere vier. Okay. Lassen Sie uns zu takeaway.com übergehen , einem Unternehmen, das links und rechts Liefer-Apps kauft , was uns nichts blockiert. Wie im Fall von Lives, wo man nichts sehen konnte, es sei denn, man gab wo man nichts sehen konnte eine Adresse mit einem S für den Standort ein, für die GPS-Erlaubnis. Die App will also im Grunde unseren Standort und sofort wird eine Liste von Restaurants angezeigt. Jetzt habe ich persönlich viele Lebensmittel bestellt, also bin ich ein ziemlich starker Nutzer dieser Apps. Takeaway gehört nicht dazu. Ich mag es nicht und lass mich dir sagen warum. Alles ist verwirrend. Nichts ist dort, wo ich das erwarten würde. Sicher. Die Restaurantliste ist sehr schön. Schöne, saubere Logos auf der linken Seite. Löschen Sie die fett gedruckten Titel auf der rechten Seite. Interessante Symbole darunter. Aber dort hält der Happy Train. Kannst du mir sagen, welches dieser beiden Restaurants eine höhere Bewertung hat? Denn wenn Sie schon einmal booking.com genutzt haben, glaube ich, Sie wissen, dass es einen großen Qualitätsunterschied gibt. Zwischen einem 8,0 Hotel und einem 8,9 Hotel. Oder wie wäre es mit IMDB? Wenn du Filme magst, 6,1 Filme im Vergleich zu 6,91, Tag und Nacht. Was ich zu sagen versuche ist, dass 4,5 Sterne für zwei Restaurants mir nichts sagen. Ich benötige mehr Informationen, um eine Entscheidung treffen zu können. Sie daran, dass ich in meiner Gegend über 50 Restaurants habe. Dieses Sternensystem ist also ohne weitere Informationen ohne weitere Informationen nicht gut genug. Aber lassen Sie uns für den Moment zum Design zurückkehren. Ich habe die Orange geliebt. Es ist wirklich durchsichtig und hat ein schönes Zink, das man hinzufügen kann. Es ist frisch. Es ist Greife die Ikonen von Again, nice and lovely. Und wir haben einen interessanten Schalter , der die Funktionsweise der App verändert, entweder im Liberty-Modus oder im Pickup. Das ist gut ausgeführt. Die verwendeten Schriften sind nicht von dieser Welt. Und das Gleiche gilt für ihre Ikonen, anständig, aber nicht großartig. Im Restaurant ist alles gut verteilt. Aber seltsamerweise entschieden sie sich für diesen seltsamen Deal-Farbton für die Call-to-Action-Farbe. Das ist ziemlich seltsam. Jetzt gibt es ein Tab-System , mit dem Sie wie von jedem mobilen Benutzer erwartet, zwischen den Kategorien wechseln können. Einige Gerichte haben eine Beschreibung, andere jedoch nicht. Zu den Fotos des Gerichts. Dieselbe Geschichte. Jetzt ist der Checkout wirklich glanzlos. Viele Trennwände, viel Grau, wenig Liebe zum Detail in Bezug auf Typografie. Aber dann lassen Sie uns die Designseite unterbrechen. Das wäre in meinem Buch 6/7 von 10, das Problem ist, wie ich eingangs sagte , die Funktionalität. Schau dir einfach das Kartensystem an. Es ist irgendwo oben rechts, aber nicht in der Aktionsleiste. Nein, es ist eigentlich ein FAB einer schwebenden Aktionstaste, also bewegt sich der Mauszeiger einfach darüber. Das ist ziemlich ungewöhnlich. Das Deb-System hat Schriften , die viel zu groß sind, und das macht es für mich schwierig zu wissen was im Restaurant verfügbar ist. Das linke Menü befindet sich tatsächlich auf der rechten Seite. Es ist auch komplett benutzerdefiniert. Ich sage nicht, dass das schlecht ist, aber es ist eine andere Sache, an die ich mich gewöhnen muss. Diese vier Symbole über der Restaurantliste. Schon wieder ziemlich seltsam. Dies ist eine App, die nicht einmal die offiziellen Richtlinien der Materialgestaltung berücksichtigt hat . Es war ihnen überhaupt egal. Und insgesamt fühlt es sich so an, die App in meinen Händen, es fühlt sich klobig an. Es ist schwer in Worte zu fassen, aber es fühlt sich einfach nicht richtig an. Insgesamt ist dies ein viel besseres AB-Design als das Live-Design des vorherigen. Aber ich glaube nicht, dass ich es mit mehr als fünf von zehn bewerten würde , vielleicht mit sechs, wenn ich sehr großzügig wäre. Gehen wir nun zum Hilfemenü über, das einen völlig anderen Ansatz verfolgt. Erstens hat mir der Onboarding-Prozess gefallen, also die ersten paar ersten Bildschirme , die Sie über die App informieren. Nettes, sauberes Design. Und sobald Sie die App aufrufen, zeigt sie mir eine Liste von Restaurants basierend auf der Adresse , die ich eingegeben habe. Jetzt ist die Auflistung sehr einfach für das Auge. Es gibt jedoch ein Problem mit der Funktionalität. Sie haben keine Möglichkeit, diese Restaurants zu sortieren. Du musst jeden eingeben und sehen, was was ist. Und das ist die Atmosphäre in der gesamten App. Du musst viel tippen, um die Ziellinie zu erreichen. Kurz gesagt, viele Klicks, bei denen einige Apps möchten, dass Sie zur Checkout-Phase kommen und vier Tabs oder weniger. Hier lässt sich diese Zahl leicht verdoppeln. Du musst viel Arbeit investieren . Wenn Sie auf einen Eintrag tippen, erhalten Sie diesen. Nochmals, schönes Design. Dies ist eine Acht und mein Buch aus gestalterischer Sicht. Hier ist die Speisekarte des Restaurants. Wir haben einen zweispaltigen Ansatz, aber ich bin mir nicht sicher, ob dies die beste Wahl ist. Sollen wir mehr Artikel sehen? Aber das Glück ist wegen dieser Größe gar nicht so groß. Es fühlt sich zu klein an. Es scheint unnatürlich. Es fühlt sich an, als ob etwas nicht stimmt. Und die Schriften sind dort noch nicht fertig. Es scheint alles zusammengeworfen zu sein. Wenn Gerichte nun Fotos haben, ist das ein bisschen Erfahrung, aber insgesamt ist das eine gemischte Mischung. Die schwebende Aktionstaste ist ebenfalls verwirrend. Ich bin mir nicht sicher , was mit diesem Button los ist. Nach einigem Nachforschen glaube ich, dass ich dadurch eine Gruppe bilden kann, was auch immer das ist. Im Grunde geht es darum deinen Freunden zu bestellen. Aber warum sollte man es so vorne und mittig platzieren? Jedenfalls ist der Hintergrund etwas zu kräftig, das Grau etwas zu dunkel für meinen Geschmack. Es fällt zu sehr auf. Das Dapp-System sieht gut aus und die Icons aus der ActionBar sind auch interessant. Es ist schwierig, in einigen Teilen zu bewerten, es ist eine Sieben, vielleicht sogar eine Hilfe. bei anderen Anleihen es bei anderen Anleihen die anderen vier Fuß? Jetzt geben wir ihm 6,5 und gehen zur Leber über. Aber das machen wir im nächsten Clip. Ich danke dir. 11. Die Konkurrenten der App analysieren – Teil 2: Willkommen zurück. Wir sind jetzt an der Leber. Lassen Sie uns es analysieren und sehen ob dies eine Quelle der Inspiration ist. Der erste Eindruck ist großartig. Die Topographie ist perfekt, sie hat Charakter, sie verleiht dem Design einen Mehrwert. Es ist leicht zu lesen. Das nächste, was mir auffällt, ist das horizontale Kartensystem, das verwendet wird, um die Restaurants zu präsentieren. Der Schatten ist ziemlich stark, wenn man bedenkt, dass der Hintergrund rein weiß zu sein scheint, aber ich mag ihn. Oben. Wir haben eine Art von Anzeige, aber beachten Sie, wie schön sie über dieser diagonalen Linie steht . Ich schätze auch, wie sie dieses kleine Symbol in der Aktionsleiste verwendet haben . Sicher, es ist Platzverschwendung, aber es zeigt, dass sie sich darum kümmern. Es geht nur um Branding und darum , sicherzustellen, dass Sie wissen, dass Sie in ihrer App sind. Du bist dann aber die Leber. Was das Angebot selbst angeht, finde ich es toll, wie die Lieferzeit in das Foto eingraviert ist. Ich schätze die Hierarchie in der Liste. Ich denke, das ist sehr gut ausgeführt. Wir haben den Titel fett gedruckt, verschiedene Tags in einer kleineren verwaschenen Farbe. Die Lieferzeit ist eingeplant und wurde aufgrund ihrer Bedeutung ziemlich viel Immobilien zur Verfügung gestellt. Und schließlich haben wir das Bewertungssystem und die Prozentsätze. Aber was ich wirklich liebe, ist dieser Farbtupfer für das Emoji. Eine weitere Möglichkeit, das Hierarchieprinzip innerhalb der Liste zu übersetzen , ist diese. Weißt du, wo du Glück hast, kannst du ganz einfach verschiedene Bereiche scannen und weißt, was wichtig ist und was nicht. Das ist das Hierarchieprinzip. Der Inhalt ist leicht unterscheiden und das sorgt für ein großartiges Erlebnis. Es fühlt sich mühelos an. Wenn wir jetzt wieder zum Live wechseln, können wir sehen, dass im Grunde alles gebündelt ist . Das fühlt sich überfüllt und im Grunde langweilig an, langweilig ohne Geschmack, obwohl es fast die gleiche Menge an Elementen enthält. Nun, zurück zur Leber Diese App scheint nicht den Richtlinien für das Materialdesign zu folgen. Oben gibt es kein Tab-System, und auch die Aktionsleiste ist nicht unregelmäßig. Stattdessen kommen wir zu Dropdowns, die sehr ungewöhnlich sind. Im neuesten Update. Sie wurden sie los und ich freue mich, dass sie diese Änderung vorgenommen haben. Die Größe der Karten ist ziemlich großzügig. Nun, das verbessert die Wirkung der App. Sie können nur etwa zwei Restaurants auf einem Bildschirm anzeigen. Und der zweite ist etwas abgeschnitten. Nun, für die kleine Stadt macht das Sinn, oder? Aber für die größeren mit vielen Restaurants wird es ziemlich schwierig sein. Nach den sechs oder sieben Listings wirst du dich einfach langweilen. Jetzt machen die Fotos einen großen Eindruck und es ist definitiv die am besten aussehende Lücke aus der Reihe. Aber ich würde gerne sehen, wie dieser Raum ein wenig genutzt wird. werden sehen, was möglich ist , wenn wir mit dem Entwerfen beginnen. Wir sehen auch eine untere Leiste, die die Suchfunktion enthält. Nun, okay, ziemlich gut. Interessant ist das Farbschema, Weiß und Thiel, sonst nichts. Der Inhalt bleibt im Glänzen, wahrscheinlich weil die Bilder ziemlich detailreich sind. Das ist ziemlich schlau. Und wahrscheinlich werden wir dasselbe in unserem eigenen Design tun. Umso mehr, wenn man bedenkt , dass die meisten Restaurants keine großartigen Fotos des Essens haben. In den meisten Fällen sind die Fotos dunkel, die Teller sind voll und die Farben sind normalerweise nicht schmeichelhaft. Auch dafür kannst du sie live sehen . Der Unterschied ist Tag und Nacht. Zurück zum Startbildschirm haben wir eine erweiterte schwebende Aktionstaste , die Ihnen beim Ausfüllen hilft. Das ist gut ausgeführt, aber sobald Sie darauf tippen, werden Sie ein weiteres Zeichen sehen, das diese App auf neun von zehn, wenn nicht sogar mehr, großartigen Symbolen bringt wenn nicht sogar mehr, großartigen , die zur Bauchmuskelstimmung passen. Wir erhalten wunderschöne Icons, die zu den Apps von Vibe passen. Schöne Bilder darunter mit tollem Kontrast für Text. Löschen Sie die Call-to-Action-Schaltfläche. Auf der negativen Seite gibt es wenig zu sagen . in die Liste gehen, sehen wir oben das Foto des Restaurants und alle Menüpunkte befinden sich in der scrollbaren Liste. Kein nennenswertes Tab-System. Die verwendeten Schriften sind augenschonend, dann kann man leicht erkennen, was was ist. Ich mag es nicht. Die Tatsache, dass es keine Vorschaubilder für das Geschirr gibt, zumal auf der linken Seite genügend Platz ist. Auf der anderen Seite macht es es ziemlich luftig. Es fühlt sich an, als hätte es genug Leseraum. Okay, jetzt lass uns etwas in unseren Warenkorb legen und sehen, wie das geht. Okay, wir haben unten einen Haftbalken , der uns den aktuellen Korb zeigt, und er ist oben durch einen Schatten getrennt. Es ist merkwürdig, dass der Button auch einen Schatten hat. Ich bin mir nicht sicher, ob ich damit einverstanden bin. Wie auch immer, der Checkout ist eine weitere Stärke. Alles ist leicht zu verfolgen und sie haben diese Karten intelligent verwendet, ein bisschen schwermütig mit dem Schlag, aber immer noch gute Arbeit geleistet. Insgesamt sieht die App gut aus und das liegt daran, dass ihre Elemente gut verteilt sind. Ihre Schriften sind nett und interessant und der Inhalt bleibt erhalten. Starke Neun von zehn. Gehen wir zu Food Panda über, um eine weitere Ausbuchtung zum gleichen Thema zu sehen. Hier erkenne ich sofort denselben einfarbigen Stil, der verwendet wird, um die Aufmerksamkeit des Benutzers auf sich zu ziehen. Wenn du darauf tippen kannst, ist es rosafarben Schrägstrich. Ich mag diesen Stil, weil er den Benutzer leitet, ohne ihn zum Nachdenken anzuregen. Der erste Eindruck ist, dass dies die am besten gestaltete App von allen ist, 9,5 von zehn. Der Hauptunterschied zwischen ihm und dem Level ist die Atmosphäre. Das ist ein bisschen freundlicher, obwohl es etwas professioneller ist, konzentrieren wir uns aber auf die Auflistung. Unter dem Foto ist noch mehr los. Das sieht also etwas geschäftiger als die Leber der verwendeten Schriften, okay, aber ihnen fehlte spezielle Knoten , der sie auszeichnet. Lass uns schnell zur Leber zurückkehren und die Lieferzeit überprüfen. Beachten Sie, wie sich diese Zahlen abheben, insbesondere die. Im Idealfall ist das die Art von Persönlichkeit, nach der ich in meinen Schriften suche. Food Panda hat auch eine schwebende Aktionstaste, die dir wahrscheinlich beim Auschecken hilft. Es ist klar genug. Die ActionBar ist ein Grundpfeiler dafür, wie sie gemacht werden sollte. Es ist klar definiert, es hat eine richtige Hierarchie, gut verteilt. Wenn ich eine Sache hinzufügen würde, wäre die Tatsache, dass ich mir nicht gewünscht hätte , dass das Suchsymbol links mit dem Hamburger-Menü ausgerichtet wäre . Das hätte es perfekt gemacht. Insgesamt ist dies jedoch eine der besten, die ich bisher gesehen habe. Gehen wir zur Seite mit der Liste der Restaurants über. Hier sehen wir Tabs , die unter dem Hauptfoto des Restaurants platziert wurden . Das sieht nett aus. Es funktioniert, aber ich liebe das Sternensystem nicht , wie es hier gezeigt wird. Ich glaube, es geht verloren. Was die tatsächlichen Artikel betrifft, so ist dieses Spezifikationsverhältnis etwas seltsam. Die Fotos sind viel zu groß und das wird für die meisten Restaurants ein Problem sein. Wenn die anderen Antennen Miniaturbilder haben. Es ist eine andere Sache, aber man könnte argumentieren, dass dies ein Grundprinzip von Ebene zwei ist. Wir müssen in unserem Design eine gute Lösung finden , wenn es darauf ankommt Keine dieser Optionen funktioniert für mich. Liefern, das hieß, einfach die Idee aufgeben , ein Foto des Gerichts zu zeigen. In anderen Wireframes sehen wir dies jedoch als Anforderung an. Insgesamt. Dies ist jedoch gebunden oder vielleicht etwas hinter der Leber. Nennen wir es die Neun, vielleicht eine 8,5. Nun, die Sache ist, dass ich problemlos weitermachen könnte, aber ich möchte, dass Sie einige dieser Apps selbst erkunden oder ähnliche finden. Ziel ist es zu verstehen, wie sie versucht haben, verschiedene Probleme zu lösen. Ich möchte, dass du mir sagst, was du an ihnen magst und was nicht. Zusammenfassend lassen sich die Schlußfolgerungen dieser Vorlesung wie folgt zusammenfassen. Wir sollten in unserer App eine einzige schöne Farbe verwenden und den Inhalt zum Strahlen bringen. Wir müssen auf das Seitenverhältnis der Fotos in der Restaurantliste achten . Wir brauchen eine gut aussehende Schrift, die dem Design etwas verleiht , etwas mit Persönlichkeit. Schließlich sollten wir unser Bestes tun, um mindestens zwei komplette Restaurants in den ersten Angebotsbildschirm aufzunehmen mindestens zwei komplette Restaurants . Als Tipp: Je mehr Apps Sie sehen, desto mehr Entzündungen werden Sie bekommen. Dieser Vorgang sollte mindestens 2 h dauern. Aus Zeitgründen musste ich ihn jedoch unterbrechen. Bitte. Hab keine Angst davor, in deinen Kommentaren rücksichtslos zu sein. Ihr Ziel ist es, jede Komponente auseinanderzunehmen und zu prüfen ob Sie sie vermeiden sollten. Oder im Gegenteil, vielleicht nutzen Sie es als Inspiration. Machen Sie viele Screenshots und legen Sie sie nebeneinander, sodass Sie leicht hin und her wechseln können. Okay, lass uns weitermachen. 12. Das Layout für den ersten Bildschirm erstellen: Willkommen zurück. Hast du die Konkurrenz selbst erkundet? Hoffentlich hast du mehrere Labore auf deinem eigenen Handy durchlaufen , oder zumindest hast du dir die Screenshots angesehen , die ich der vorherigen Vorlesung beigefügt habe. Jetzt ist es an der Zeit, Figma zu starten und ein neues Projekt zu erstellen, indem Sie hier klicken . Wir werden es langsam angehen, aber falls Sie es immer noch schwierig finden, habe ich einen Anfängerfreundlicheren Kurs über Figma. Wenn du bei deinem zweiten Besuch nicht Schritt halten kannst, ist es vielleicht am besten, dir diesen Kurs anzusehen. Okay, lassen Sie uns hier klicken, wo Untitled steht , und benennen Sie es um, um Lieferung hinzuzufügen. Holen Sie sich jetzt das Frame Tool, Hotkey f, damit wir den ersten Bildschirm einrichten können. Nun, die Einstellungen basieren vom Materialdesign bis zur Eingabe, um die Dinge super einfach zu halten, um die Dinge super einfach zu halten, wählen Sie 720 mal 12, 80, egal ob diese Werte von, ja, im Grunde verdopple ich die Werte von den alten Samsung Galaxy S Dann. Warum jetzt Doublet? Es wird also besser aussehen, wenn Sie es überprüfen, wenn Sie es an Ihren Kunden, Ihren Kunden, den anderen Code dort senden . So kann man alles schön und knackig sehen , ohne eine goldene Brille zu bekommen. Das ist also der einzige Grund, warum wir uns verdoppeln. Es spielt wirklich keine Rolle für den Programmierer oder für den Kunden. Es ist nur eine visuelle Sache, oder? Der Codierungsprozess wird in keiner Weise beeinträchtigt. Dazu später mehr, aber vertrau mir, es hat keinen Einfluss. Es ist nur eine visuelle Präferenz für 2020, 320-20-4720 von 12 80 ist völlig in Ordnung. Suchen Sie als Nächstes einen breiteren Rahmen, der an den Kurs angehängt ist , und ziehen Sie ihn hinein, importieren Sie das Steuerelement Shift K oder was auch immer Sie tun möchten. Platzieren Sie es an der Seite des ersten Bildschirms. Idealerweise sollte das immer auf dem zweiten Display angezeigt werden, aber ich werde es während unseres schrittweisen Vorgangs hier belassen. Okay, also was ist das Ziel? Nun, wir wollen unser Layout, die Grundlage unseres Projekts, ohne Details einrichten . Ich wiederhole keine Einzelheiten. wollen wir Rechtecke und Textebenen in Nach den ersten Bildschirmen wollen wir Rechtecke und Textebenen in ihrer einfachsten Form haben, dann beginnen wir, mit verschiedenen Farben, Schriften und verschiedenen Details zu experimentieren . Fangen wir also mit dem ersten an, bei dem wir das Apps-Logo benötigen. Und natürlich gehört es zu den Gores. Das Symbol ist in keiner Weise gestylt hat auch keinen Text. Das wird uns also helfen, es mit dem Rest des Designs in Einklang zu bringen. Das ist also eine gute Sache. Ich werde es zentrieren und an keiner bestimmten Position oben auf dem Bildschirm platzieren . Als Nächstes fügen wir das Positionsfeld hinzu, um ein Rechteck zu erstellen. Tastenkombination, klicken und ziehen. Wenn wir nach den spezifischen Größen suchen, verwenden Sie das Eigenschaftenfenster auf der rechten Seite. Sagen wir für diesen, sagen 600 für die Breite, ungefähr so. Das ist das W hier. Und für die Höhe nehmen wir 80 Pixel, ungefähr so, grobe Schätzungen. Dies ist also nicht die endgültige Größe , da dies später in der Stylingphase erfolgt. Okay, ich werde immer alles im Rahmen nach dem Befehl Horizontale Mittelpunkte ausrichten zentrieren. Das ist es genau hier. Bitte gewöhnen Sie sich daran. Und diese anderen hier, diese Typen sind deine neuen besten Freunde. Wir werden sie fast jedes Mal, wenn wir etwas innerhalb des Frames tun, häufig verwenden . Denken Sie also daran, sie zu benutzen. Machen Sie das Rechteck sehr hellgrau indem Sie den Füllbereich im Eigenschaftenfenster verwenden. Wir wollen einen guten Kontrast für die Textebene. Wenn Sie einen Laptop oder eine niedrige Auflösung verwenden, denken Sie daran, dass dieses Fenster scrollbar ist. Okay, nehmen Sie die Tastenkombination D des Textwerkzeugs und schreiben Sie, geben Sie Ihren Standort ein. Das heißt, gib deinen Standort ein. Könnten wir jetzt erweiterte Funktionen verwenden , die figma zu bieten hat? Sicher, absolut. Aber auch hier ist dies nicht die richtige Phase für diese ausgefallenen Dinge. Wir werden die Grundschrift beibehalten, die Größe. Setzen wir es auf 20 und zentrieren es innerhalb dieses Feldes. Im Grunde ist die Idee, dass wir das Wireframe wirklich erstellen, aber wir können tatsächlich all diese Felder bearbeiten. Auf der rechten Seite. Fügen wir einen weiteren Text hinzu, der GPS sagt. Verwenden Sie Control D, um ein Duplikat zu erstellen. Platziere es auf der rechten Seite. Nun, warum nicht eine Ikone? Weil wir diesen Fluss nicht unterbrechen wollen. Eine Ikone ist ein kleines Designdetail. Und daran arbeiten wir gerade nicht. Okay, wir benötigen eine Schaltfläche zum Absenden, also geben wir nur das Senden ein. Verwenden wir Shift a, um dieses Mal ein Autolayout mit mindestens einer ausgefallenen Funktion hinzuzufügen , oder? Ich werde jede graue Füllung aktivieren. Nun fragen Sie sich vielleicht, hätten wir den Rahmen für das Positionsfeld im Autolayout verwenden können? Ja, natürlich. Aber da gibt es noch ein bisschen mehr zum Auspacken. Ich würde es lieber als Standardrechteck beibehalten, damit wir uns bei der Größe der Schaltfläche auf das Ganze konzentrieren können . Lassen Sie uns dieses Feld auf 90 ändern. Dadurch wird es viel breiter. Und für die Höhe 20, wenn Sie damit fertig sind, zentrieren Sie es innerhalb des Bildschirms. Ich kann mir vorstellen, dass der nächste Schritt überspringen ist, aber dafür können wir eine einfache Textebene haben. Denken Sie daran, Escape zu drücken, um die Bearbeitung Ihrer Textebene abzuschließen Dieses Objekt erhält keine Schaltfläche, es wird kein Rechteck angezeigt, da wir einen Laptop haben und einen weiteren für das Creighton-Konto benötigen. Gehen Sie über die Schaltfläche „Senden“, halten Sie die Alt-Taste gedrückt und ziehen Sie die Kopie heraus. Eines jedoch: Bitte achten Sie auf Ihrem Cursor nach diesem Symbol, nicht nach diesem. Das wird nicht helfen. Also das ist es , was du suchst. Ziehen Sie es nun nach unten und ändern Sie den Text , um einen Slash-Login für das Konto zu erstellen. Das ist also das Erstellen eines Benutzerkontos mit einem Slash-Login. Und wie üblich müssen Sie den Rahmen auswählen und zentrieren , nicht die Texte. Der Text ist übrigens Teil des Rahmens und er ist bereits zentriert. Nein. Stattdessen möchten Sie, dass dieser Rahmen innerhalb des großen Rahmens zentriert ist , den ich normalerweise Bildschirm nenne. Nun, wenn Sie es nicht zu 100 Prozent verstehen, sich keine Sorgen, das ist in Ordnung. Die Sache ist ganz einfach. Wenn Sie bei gedrückter Maustaste auf die Ebene klicken, können Sie diese Ausrichtungswerkzeuge nicht verwenden. Das ist also ein klares Zeichen dafür, dass Sie den Frame nicht ausgewählt haben. Aber jetzt, wenn ich das mache, leuchten sie auf. Wir können sie gebrauchen. Fantastisch. Insgesamt ist dies also unser erster Bildschirm, der bearbeitet wurde. Lass uns nach einer kurzen Pause weitermachen. 13. Die Grundlage für den Home-Bildschirm erstellen: Willkommen zurück. Sie können den zweiten Bildschirm, den Startbildschirm, aufrufen , weil er normalerweise angezeigt wird , wenn Sie die App öffnen. Vorausgesetzt, Ihr Protokoll wird dann verkleinert, indem Sie die Strg-Taste gedrückt halten und mit der Maus scrollen machen Sie dann Platz und duplizieren Sie den gesamten Bildschirm. Wenn es Platz hat, platziert Figma es automatisch auf der rechten Seite, wenn du control the awesome verwendest. Lösche nun alles darin außer dem Ortsfeld. Dies ist eine gute Gelegenheit, sich an unsere Proportionen zu erinnern. Die Statusleiste muss laut Google Material Design also 720 mal 48 sein. Holen Sie sich also das Rechteckwerkzeug und fügen Sie es hinzu. Auch hier ist 720 die doppelte Standardbreite, und 48 stammen aus dem offiziellen Leitfaden. Es sind 24 dB, aber auch hier haben wir es verdoppelt , also wo haben wir was? Wir lassen es leer, rechteckig jede beliebige Farbe und positionieren es korrekt oben. Für das Ortsfeld können wir dieses verwenden, um die Aktionsleiste zu erstellen, sie zusammen mit diesen Textebenen nach oben zu ziehen und wir werden die Größe natürlich auf 720 mal 112 ändern. Das sind also 112 Pixel. Bitte stellen Sie sicher, dass Sie die Farbe bei Bedarf ändern. Wir wollen sie als zwei verschiedene Dinge sehen. Auch wenn wir sie am Ende vielleicht dieselbe Farbe haben, wollen wir sie an dieser Stelle als zwei separate haben. Okay, jetzt kümmern wir uns um die Textebenen. Also brauchen wir den Stadtfilter und die Suche. Also Stadt filtern und suchen. Die erste ist für die linke Seite, die anderen beiden für die rechte Seite. Dies ist eine Situation, in der Sie sich befinden, die Geschwindigkeit ist sehr wichtig. Siehst du, es ist nicht allzu schwierig, hier vor sich zu gehen, aber es braucht Zeit. Deshalb musst du üben und diese Schritte ernst nehmen. Du kannst keine fortgeschrittenen Sachen machen, wenn du die Grundlagen wie diese hier nicht beherrschst. Verwenden wir für das Drop-down-Menü das Polygon-Werkzeug. Einer der wenigen Fälle, in denen Sie es tatsächlich zum Laufen bringen können, Umschalttaste gedrückt halten und mit dem Ziehen beginnen können. Nun, das ergibt ein perfektes Rechteck, wenn Sie die Umschalttaste gedrückt halten. Bewegen Sie dann den Cursor zur Seite, um ihn zu drehen. Im Grunde wollen wir den Punkt nach unten drehen. Ich habe keine bestimmte Größe im Sinn, nur ziemlich klein. Jetzt ok, sieht gut aus. Jetzt wird es interessant. Denken Sie daran, dass wir so viele Restaurants wie möglich anzeigen möchten , ohne alle Elemente zu quetschen und zu überladen. Beginnen wir also mit einem Rechteck , das 600 mal 400 Pixel groß ist. Da dies den größten Teil der Bildschirmbreite abdeckt. Und wir werden zunächst auch ein ordentliches Seitenverhältnis haben. Jetzt wird die tatsächliche Größe später festgelegt. Okay, platziere es direkt unter der Aktionsleiste. Für den Inhalt. Wir werden gefälschte verwenden, aber nicht Lorem Ipsum. Das ist also lateinischer Text. Lorem ipsum ist nur lateinische Fülltexte. Also werde ich mir selbst etwas für den Titel einfallen lassen. Lass uns mit dem Dessert weitermachen, das ich nebenan habe. Lass uns so etwas spielen. Lieferzeit, was auch immer, 30 min. Stimmt das? die Kategorie angeht, heißt es in dem Brief, dass es sich um eine doppelte Kategorie handelt. Es ist also eine für die Lebensmittelart und dann eine für die Art der Küche. Ich bin mir nicht sicher, ob das für mich Sinn macht, aber es ist was es ist. Also der erste sollte Desert sein und der zweite international, denke ich. Auch hier ist es wirklich egal. Wir wollen nur einige Informationen bereitstellen. Wir haben also etwas, mit dem wir für die Bewertung arbeiten können. Lass uns was auch immer machen, 92 Prozent von 24 Stimmen. Dies wird also alle Elemente gemäß dem Wireframe und dem Briefing abdecken . Wählen Sie also bitte alles wie folgt aus und prüfen Sie, ob wir mindestens zwei davon auf einem einzigen Bildschirm unterbringen können . Denken Sie daran, das ist eine wichtige Anforderung. Und tatsächlich können wir in diesem Fall zwei ganze Restaurants unterbringen, obwohl dies nur ein grober Entwurf ist. Daran ist nichts, es ist präzise. Also müssen wir es mit einem Körnchen Salz nehmen. Lassen Sie uns das nun zusammenfassen. Bisher haben wir die ersten beiden Bildschirme aus dem Wireframe nachgebaut aus dem Wireframe um etwas zu haben, mit dem wir arbeiten können. In den nächsten Vorlesungen haben wir darüber gesprochen, uns der Auswirkungen unserer Entscheidungen bewusst zu sein . Insbesondere darüber, wie die gesamte App aussehen wird, wenn wir Tonnen von Bildschirmen mit einem starken Ausgang haben werden. Ich sehe dich in einer Sekunde. 14. Den restaurant skizzieren: Willkommen zurück. Wir müssen zum Detailbildschirm des Restaurants mit der Bezeichnung Nummer drei übergehen, auf Detailbildschirm des Restaurants mit der Bezeichnung Nummer drei übergehen, dem alle Gerichte aufgeführt sind. Also, ohne weitere Umschweife, machen wir uns an die Arbeit. Also kopierte ich sie, aber tu es. Und beginnen wir mit einem Ansatz von oben nach unten, indem wir den Titel durch einen beliebigen Restaurantnamen ersetzen . Nennen wir es hauptsächlich Pizzalieferung. Das klingt italienisch genug, oder? Großteil der Pizzalieferungen, das Drop-down-Menü und der Filter müssen entfernt werden, aber wir behalten den letzten und benennen ihn um. Das sollte Entzündung heißen. Das wird auch eine Ikone sein, aber das ist zu einem späteren Zeitpunkt mehr. Wenn Sie darauf klicken, erhalten Sie den Adressbildschirm 15 des Restaurants und die Ansichten auf dem Bildschirm 16. Das wird also passieren, wenn Sie auf Entzündung klicken. Wie gesagt, wir brauchen derzeit kein Symbol weil wir uns noch in einem frühen Stadium befinden. Okay, wenn wir uns das Wireframe ansehen, können wir sehen, dass wir einige Tabs haben, aber es ist unklar, ob sich um feste oder scrollbare Tabs handelt. Wir beginnen mit einer festen Version und ich werde etwas wie Frühstück, Mittag- und Abendessen als meine Hauptbestandteile verwenden . Das bedeutet nun, dass Tab-Design, also 240 breite Rechtecke , für das aktive Element benötigt werden, denn auch das sind zwei für t mal 3720. Okay, lassen Sie uns die Aktionsleiste kopieren und auf 96 Pixel verkleinern. Natürlich ändern Sie bitte die Farbe, damit wir sehen können was jetzt vor sich geht, zurück zur Größe für den Moment. 96 ist also groß genug aus Sicht der Benutzerfreundlichkeit, aber klein genug, damit es nicht zu viel Platz beansprucht. Dies ist auch der empfohlene Wert und der offizielle Richtwert von 48 dB. Lassen Sie uns die folgenden Angebote entfernen , da wir sie nicht benötigen. Wir erstellen die erste Textebene, nachdem wir unser Rechteck festgelegt haben , das uns den aktiven Menüpunkt zeigt. Schnappen Sie sich also das Rechteckwerkzeug und klicken Sie auf eine Eingabe auf 40 mal vier Pixel. Verwenden Sie dafür das Eigenschaftenfenster. Es kann also vorerst leer gelassen werden, komplett schwarz, aber achte natürlich darauf, dass du es richtig am unteren Rand des Tab-Hintergrunds auf der linken Seite platzierst. Da dies ein fester Tab ist, müssen wir nun Ebenen in den visuellen Texten haben. Also nicht ein einziges mit drei, sondern die einzelnen, und das erste wird Frühstück sein. Es sollte in der Standardschrift geschrieben sein. Es ist wirklich egal, wie es aussieht. Aber bei Bedarf können Sie die Farbe ändern, damit Sie sehen können, was vor sich geht. Jetzt können wir es schnell ausrichten, indem es neben dieser Ebene darunter auswählen. Das kümmert sich also um die horizontale Ausrichtung. Einfach so. Die vertikale Ebene hebt die Auswahl nimmt dann die Textebene mit dem Haupthintergrund und verwendet dann einfach so den Befehl zur vertikalen Ausrichtung. Das wird uns also ein pixelgenaues Ergebnis geben, auch wenn Sie es nicht wirklich sehen können. Die Sache ist, ich habe die Textebene wegen dieser vierten Pixelebene hier nie versetzt die Textebene wegen dieser , das würde die Dinge ziemlich durcheinander bringen, also tu es bitte nie. Okay, die anderen Elemente werden ein Kinderspiel sein, duplizieren Sie sie mit Alt und Shift und dann erneut als sie dann erneut als Lunchcenter auf dem Bildschirm mit horizontalen Mitten aus. Fantastisch. Schließlich müssen wir zum Abendessen den Vorgang wiederholen, aber hier ist, was wir tun werden. Jetzt verschieben wir den aktiven Tab vorübergehend nach rechts. Wir werden es so ausrichten. Hier kommt der Rahmen also wirklich zum Einsatz. Wir können diesen Kerl ohne Probleme schnell bewegen, ohne etwas anderes auswählen zu müssen. Okay, jetzt können wir es natürlich bewegen und es dann seidenglatt ausrichten. Bisher. Denken Sie natürlich daran, bei Ihrer zweiten Besichtigung mitzuarbeiten , um die beste Lernerfahrung zu erzielen. Es gibt viel zu tun. Und wenn wir keine ordentliche Basis haben, wird das ein Maßstab sein. Okay, leg es wieder auf die linke Seite und dann können wir weitermachen. Schauen wir uns das Wireframe noch einmal an. Denken Sie daran, dass dies nicht das A und O unseres Designs ist. Wir können mit verschiedenen Protokollen experimentieren, wenn wir irgendwelche Ideen haben. Aber vorerst werden wir es beim ersten Versuch einfach halten . In diesem speziellen Bildschirm bedeutet das ein Ein-Karten-Layout. Wenn wir damit nicht zufrieden sind, können wir einen anderen Ansatz ausprobieren. Obwohl. zweispaltige Design, das wir im vorherigen Video gesehen haben, hat mir wirklich nicht gefallen . Jetzt müssen wir einen Image-Ordner erstellen. Fangen wir damit an. Ein Bildhalter oder ein Vorschaubild für jedes Objekt. Ich denke, das muss eine etwas quadratische Form haben, wahrscheinlich etwas breiter. Beginnen wir also mit einem normalen Rechteck mit der Größe von, sagen wir 225 mal 1AD. Wie ich schon sagte, es ist nicht quadratisch, aber es ist nicht zu hoch, weil wir gesehen haben, es sieht nicht so toll aus. Platziere es 30 Pixel von den Tupfern entfernt. Die Hauptsache bei diesem Bild ist das Seitenverhältnis. Verwenden Sie nicht zu extreme Dinge, die Restaurants dazu zwingen, Ihnen superbreite oder supergroße Fotos zu machen. Das wird ein Problem sein. Denken Sie jedoch daran, dass die Leber und der Futterpanda kein gutes System hatten. Warte auf den Titel und die Beschreibung. Ich habe etwas in einem Notizblock vorbereitet. Der Titel kann ein Airbag sein. Nun, für den Moment ist es wirklich egal, aber etwas Authentisches zu verwenden, macht etwas mehr Sinn. Die Beschreibung sollte eine Absatztextebene sein. Also klicken und ziehen. Weil wir den Inhalt vielleicht schnell ändern möchten. Die Zeilen sollten ausreichen aber wir könnten sie wiederverwenden, um sie nur zu tun. Wir werden sehen, ob Sie Dummy-Text verwenden möchten . Ich empfehle lipson.com. Das ist der beste Ort dafür. Das sind gefälschte lateinische Texte, die diesen Bereich einfach ausfüllen. Okay. Zurück zur Liste, wir benötigen einen Preis, sagen wir 14 Dollar. Das wird die dritte Zeile in dieser Liste sein. Wir haben also eine Titelbeschreibung und dann den Preis. neben dem Preis Geben wir neben dem Preis das Gewicht des Produkts an, das in der Kurzbeschreibung erwähnt wird. Also lass uns die 150 g schreiben, okay, und direkt daneben benötigen wir einen Text zum Hinzufügen in den Warenkorb. Obwohl das wahrscheinlich ein Button sein wird, vielleicht ein Symbol. Okay, gib mir eine Sekunde , um alles zu klären. Ich mag es, alles exakt auszurichten, auch wenn das an dieser Stelle nicht unbedingt erforderlich ist. Im Idealfall wollen wir den klaren imaginären Weg. Was wird der Benutzer tun, ist, sich das Vorschaubild anzusehen als den Preis, dann den Titel, dann das Produktgewicht, dann klickt er auf In den Warenkorb legen. Wahrscheinlich etwas in dieser Richtung. Also werden wir versuchen, das der Größe und Farbe zu erreichen. Auch wenn die Dinge so ziemlich gebündelt sind. Lassen Sie uns die Dinge mit einer Trennwand verpacken. Wir können den Hotkey L des Linientools verwenden Die Breite muss 656 betragen. Sie werden diesen Wert ziemlich oft hören. Und ich werde etwas später erklären , warum das der Fall ist. Die Höhe in Pixeln. Dies muss 30 Pixel vom Foto entfernt sein, vom Vorschaubild. Ok, das ist erledigt. Also lassen Sie uns es gruppieren und wir werden viele Kopien machen. Die Idee ist, den gesamten Bildschirm mit Klonen zu füllen , um zu sehen , wo wir uns befinden. Wir bekommen ein besseres Gefühl für die Dinge nur schauen, wie viele wir hineinpassen können. Idealerweise wollen wir Nebenprodukte, aber mit etwa vier und ein bisschen kann ich jetzt damit leben. Außerdem können wir möglicherweise mehr Platz gewinnen, wenn wir mit der Verfeinerung des Layouts beginnen. Lass uns in der Zwischenzeit eine kurze Pause einlegen. Ich danke dir. 15. Gestaltungskonzepte für den location (1): Willkommen zurück. für die Lieferung von Lebensmitteln ist es an der Zeit Ohne App-Design für die Lieferung von Lebensmitteln ist es an der Zeit, loszulegen . Wir haben ein paar solide Bildschirme, die auf etwas Aufmerksamkeit warten. Beginnen wir also mit dem Standortbildschirm Bezeichnung Nummer eins im Wireframe. Und die erste Idee möchte ich als vollständiges Hintergrundbild ausprobieren , was in dieser Nische eine beliebte Wahl ist. Um tolle, völlig kostenlose Fotos zu finden , benutze unsplash.com. Wenn das Projekt über ein angemessenes Budget verfügt, können Sie auch Adobe Stock verwenden, was absolut fantastisch ist. Bleiben wir aber bei der kostenlosen Version. Hier. Wir suchen nach dem Essen und wir werden alles herunterladen, was weckt oder interessiert. Im Idealfall sieht ein Bild von oben wahrscheinlich am besten aus, aber ich werde diesbezüglich offen bleiben . Sobald ich etwas Interessantes sehe, klicke ich auf die Download-Schaltfläche. Das Verfahren ist also einfach. Wählen Sie mehrere Fotos aus und speichern Sie sie auf Ihrem Computer. Ich habe bereits einige ausgewählt, also werde ich Ihre Zeit nicht verschwenden, aber ich verspreche Ihnen, dass ich sie genau so ausgewählt habe, wie ich es Ihnen gesagt habe. Ich habe sie mit 1—6 beschriftet, sodass wir bei Ihrer zweiten Besichtigung problemlos wieder zusammenarbeiten können. Jetzt könntest du sie in Figma hineinziehen, aber es wird riesig sein, das ist keine gute Art zu arbeiten. Also das schlage ich vor. Schnappen Sie sich das Rechteckwerkzeug und fügen Sie eines zum Rahmen hinzu, zufällige Größe, nichts Besonderes. dann im Eigenschaftenfenster Machen Sie es dann im Eigenschaftenfenster so groß wie der Rahmen, 720 mal 12 80, richten Sie es links und oben so aus, dass es alles bedeckt. Nun, das liegt daran, dass es über all den anderen Schichten liegt. Die Effekte, die im Ebenenbedienfeld und feststellen, dass sie hervorgehoben sind , sodass sie beim Klicken leichter ziehen und an die letzte Position nach unten verschieben können. Wir werden dieses Rechteck verwenden, um unsere Bilder darin zu platzieren. Dazu verwenden wir Control Shift K. Wenn Ihnen dieser Hotkey jedoch nicht gefällt, klicken Sie einfach hier. Das ist genau hier, Steuerung „Bild platzieren“ verschiebt das Tor. Dadurch wird ein Browserfenster geöffnet und Sie können nach den heruntergeladenen Fotos suchen. Ich speichere sie immer auf meinem Desktop, damit ich sie schnell finden kann. Okay, versuchen wir es mit Bild Nummer eins. Hier beginnt die Magie bei Suche nach einem interessanten Bild, das guten Kontrast für das Logo und alle anderen auf dem Bildschirm verfügbaren Aktionen bietet . Denken Sie also daran, dass das Wort mehrere Teller Spaghetti und ein paar Gläser Wein zeigt . Es steht also im Einklang mit der App, mit der Atmosphäre. Nun, die erste Frage ist, wäre das Logo weiß oder einfarbig? Wenn wir uns für Weiß entscheiden, müssen wir dieses Bild abdunkeln. Wenn wir es einfarbig machen wollen , muss der Hintergrund so einfach wie möglich sein. Mal sehen, was was ist. Zuerst machen wir sozusagen eine Farbüberlagerung für die Opazität, ich schätze etwa 50%, das sollte uns einen ordentlichen Kontrast geben. Denken Sie daran, die Idee ist , Dinge auszuprobieren, nicht, um Glück zu haben. Jetzt machen wir das Logo weiß. Dies ist ein anderes PNG, eher ein SVG. Kurz gesagt, das bedeutet, dass wir die Größe ändern können , ohne an Qualität zu verlieren. Außerdem können wir die Füllung direkt im Eigenschaftenbereich ändern . Wenn das ein PNG wäre, könnten wir das nicht tun. Also das ist nett. Okay, das ist ziemlich gut. Was die meisten Anfänger nicht verstehen, ist, dass Logos Ihnen nicht wie eine Tüte Ziegelsteine ins Gesicht schlagen müssen . Denken Sie nur daran, was wir gemacht haben, obwohl sie auf dem Bildschirm mit der ersten Liste die Mini-Version ihres Logos verwenden. Okay, also zurück zu unserem Design. Ein dunkler Hintergrund ist sinnvoll, zumal das Textfeld zumal das Textfeld wahrscheinlich weiß sein wird. Das macht Sinn. Also lassen Sie uns das geschehen lassen. Wir werden den Koordinatenradius der Rechtecke auf fünf Pixel erhöhen , damit es ein bisschen besser aussieht, ein bisschen moderneres Quadrat, die Koordinaten sind sehr 2005. Nun zu den Schaltflächen werden wir dieselben fünf Pixel machen , aber wir werden sie vielleicht hellgrün machen , etwa so. Nur um zu sehen, wie ein unregelmäßiger Call-to-Action aussehen würde. Nehmen Sie sich Zeit und versuchen Sie, einige Koordinaten zu schneiden , indem Sie hier und da Farben abtasten, indem Sie das Eigenschaftenfenster auf mehreren Ebenen verwenden. Die Idee ist, so schnell wie möglich zu sein, okay, mit den neuen Farben müssen wir die Textebenen auf Weiß ändern. Und bitte vergiss nicht, diesen Schritt zu überspringen. Es ist da, aber du siehst es vielleicht nicht so gut. Ändert also auch die Farbe, vielleicht die Position oder beides. Und dass der untere Bildschirmrand vielleicht etwas besser aussieht. Also lass uns das versuchen. Die Idee ist also, wir dieses Glück nicht beurteilen können , weil wir es mit etwas anderem vergleichen müssen. Ganz zu schweigen davon, dass es sich nur um breite Striche handelt, bei noch keine feinen Details gemacht wurden, nur schnelle Bewegungen. Also suchen wir nach der allgemeinen Richtung. Und wenn wir einmal etwas im Kopf haben, sehen wir, dass es ziemlich gut aussieht, können wir zurückkommen und es bis zur Perfektion verfeinern. Das Logo muss also möglicherweise etwas angehoben werden, aber nicht zu stark, dass es die obere Kante berührt. Schnappen Sie sich das Type Tool und lassen das Live direkt unter der Fed schreiben damit wir ein besseres Gefühl für die Formatierung bekommen . Behalten Sie die Standardschrift bei, aber machen Sie sie fett. Mal sehen, 60. Also ziemlich umwerfend. Okay, das kann funktionieren, aber zentrieren wir es und lassen Sie uns einige andere Bilder in dieser Version ausprobieren. Denken Sie daran, dass der Hotkey Control Shift gay ist. Aber zuerst möchten Sie vielleicht das untere Rechteck auswählen, die Strg-Taste gedrückt halten und darauf klicken. Einfach so. Wir können jetzt die Strg-Umschalttaste verwenden, um das zweite Bild auszuwählen. Okay, lassen Sie uns das zweite Foto einfügen und Sie werden feststellen, dass das schwarze Overlay verschwinden wird. Mach dir keine Sorgen. Wir können immer noch ein Gefühl dafür bekommen, was vor sich geht. Wir können es zu einem späteren Zeitpunkt wieder einsetzen. Also Foto Nummer zwei, es ist ein bisschen zu leer, um zu arbeiten. Wir brauchen etwas Reichhaltiges, Extravagantes und Interessantes zum Anschauen. Diese Lücke unten links wird nicht verschwinden , sie ist nicht gut. Gehen wir also zu Foto Nummer drei über. Okay, schauen wir uns das mal an. Das essen einige Freunde zusammen. Das ist also ein ziemlich gutes Konzept. Aber das Seitenverhältnis ist gar nicht so toll. Wir verlieren also ziemlich viel von dem Foto. Es ist nicht ganz klar, was vor sich geht. Es könnte funktionieren, aber ich bin mir nicht sicher. Versuchen wir es mit Bild Nummer vier. Mal sehen, was was ist. Das funktioniert auf jeden Fall. Und ich denke, es kreuzt alle richtigen Kästchen an. Ich denke, es ist eine gute Wahl und es fällt sofort auf. Es hat eine Ansicht von oben. Es bietet interessantes mehrfarbiges Essen. Holztisch fühlt sich angenehm gemütlich an. Ziemlich gut, ziemlich gut. Aber lassen Sie uns noch nicht aufhören. Lass uns weitermachen. Also Foto Nummer fünf. Okay. Das funktioniert gut. Auch hier ist es ziemlich gut, aber ich denke, das vorherige ist ein bisschen besser. Das Hauptproblem hier ist das abgebildete Essen. Es ist ein Eiersalat, bei dem viele gute Zuschauer qualitativ hochwertige Speisen erwarten. Wir sprechen nicht über das Management, nicht über gehobene Küche. Dieser Eiersalat ist also nicht der richtige Look dafür. Hamburger hinter solchen Dingen passen meiner Meinung nach ein bisschen besser. Als nächstes Bild Nummer sechs. Das sieht reichhaltig und reichlich aus, aber ich liebe das Essen selbst nicht . Es konzentriert sich zu sehr auf Desserts. Wir sehen zwar einige Eier auf der Oberseite, aber es scheint eher zu Wüsten zu tendieren , mehr zu Süßigkeiten. Wir können es als Backup behalten, aber Option für sieht bisher am besten aus. Also bringen wir es wieder rein. Okay, wenn du bereit bist, füge bitte das schwarze Overlay hinzu, indem du auf das Plus-Symbol drückst. Nochmals 50 Prozent. Ich finde es ziemlich gut. Wir haben hier einen ziemlich schönen Kontrast. Nun, das wirft die Frage auf, was könnten wir hier sonst tun? Nun, die einzige Idee, die mir in den Sinn kommt, ist ein rein weißer Hintergrund oder vielleicht ein subtiles Muster. Das ist vielleicht eine cremefarbene Farbe, vielleicht hellgrau. Nun, das werde ich nicht tun , weil Apps, die reichlich und weiß sind , normalerweise hochwertig sind. Denken Sie an das mit einem Michelin-Stern ausgezeichnete Restaurant mit einem großen Modenamen, ähnlichen Produkten. Das sind die Marken, die ein minimalistisches Design mit viel Weiß und nur einem Farbtupfer rocken können . Zusammenfassend lässt sich sagen, dass wir jetzt bei diesem Konzept bleiben , Foto Nummer vier, dann bei der 50-prozentigen Überlagerung, basierend auf dem, was auf den nächsten Bildschirmen passieren wird Wir können zurückkommen und es verfeinern Design. Ich sehe dich in einer Sekunde. 16. Gestaltungskonzepte für die Restaurantliste (2): Willkommen zurück. Lassen Sie uns mit dem Bildschirm mit der Restaurantliste fortfahren, der das zweite ist, was sie verwenden Es wird sehen, dass dies einer der wichtigsten Bildschirme in der App ist . Wir müssen also mit verschiedenen Looks experimentieren. Von Anfang an. Ich möchte eine Version ohne Hintergrund sehen, also reines Weiß und eine mit hellgrau, die einen guten Kontrast zu unserem Angebot bietet. Ich bin auf diese Ideen gekommen indem ich den Wettbewerb recherchiert habe. Und das sind zwei sehr verbreitete Stile. Also im Grunde weiß und hellgrau. Fangen wir mit dem eigentlichen Inhalt an. Ich habe dieses Bild von Bankeiern für das Titelbild des Restaurants vorbereitet . Ich werde es mit Control Shift K innerhalb dieses Rechtecks platzieren , aber wir müssen hier über Zahlen sprechen. Die offiziellen Materialdesign-Richtlinien besagen, dass wir auf beiden Seiten 16 dB benötigen, was in unserem Fall 32 Pexel bedeutet. Lass uns rechnen. 720, die Breite des Rahmens -64, die beiden auf beiden Seiten, das bedeutet 656 Pixel. Das sind also unsere Rechtecke mit den gleichen wie unsere Trennwände nach der EU, die Größen aus dem Eigenschaften-Panel bitte nochmal zentrieren, das ist immer ein dringend erforderlicher Schritt. wird es wahrscheinlich besser aussehen Mit leicht abgerundeten Koordinaten wird es wahrscheinlich besser aussehen. Nehmen wir also fünf Pixel für den Koordinatenradius. Drücken wir Shift R, damit wir einige Anleitungen hinzufügen können. Diese sind nicht unbedingt notwendig, aber ich denke, sie könnten helfen. Jetzt können wir Hilfslinien von der linken Seite des Bildschirms herausziehen . Einfach so. Wenn wir schon dabei sind, löschen wir den zweiten Eintrag. brauchen wir nicht. Okay, lass uns über Hierarchie sprechen. Wir haben hier ziemlich viele Artikel. Und die Frage ist, welche ist die wichtigste? Jetzt muss ich den Titel sagen, aber ganz nah dran ist die Bewertung , da dies der Hauptwert der App ist. Als nächstes kommt die Lieferzeit, die sicherlich ein entscheidender Faktor ist. Und schließlich, an vierter Stelle, wir wahrscheinlich die Etiketten haben , die sich auf die Lebensmittelart beziehen. So können diese schnell verwendet werden, um ähnliche Lebensmittelarten und Küchen zu filtern. Der Benutzer kann bei jedem von ihnen auf sie tippen, und die Liste würde wahrscheinlich neu geladen, wobei dieser spezielle Filter angewendet wird, um über die Wichtigkeit zu sprechen , da diese Elemente so gestaltet werden sollten und platziert, das wirkt sich wirklich darauf aus. Das ist also Hierarchie. Also für die erste Version, und ich wollte die erste Version betonen, werde ich den Titel und die Bewertung aufgrund dessen, was wir gerade besprochen haben, wegen ihrer Bedeutung auf dieselbe Zeile setzen. Die Tags können die zweite Zeile belegen. Und ich möchte versuchen, die Lieferzeit irgendwo auf dem Foto zu platzieren die Lieferzeit irgendwo auf dem , ähnlich wie wir es in der App von Food Bandar gesehen haben. Lassen Sie uns das gesamte Element auch um 32 Pixel aus der Aktionsleiste verschieben . Falls du es noch nicht getan hast. Jetzt, wo immer möglich Symmetrie anstrebt, sieht das Design einfach viel ausgefeilter aus. Kunden, ich werde Ihnen nie sagen, Hey, wissen Sie, die Entfernung auf beiden Seiten ist, dass die beiden, aber von oben, 44 sind. Aber glauben Sie mir, der Kunde wird das wissen. Okay, jetzt zum Titel Machen wir es vier D-Pixel und fett gedruckt, die Standardschrift ist völlig in die Standardschrift ist völlig Ordnung, wenn man nur nach der groben Idee sucht. Dies wird nicht die Hauptschrift sein. Ich kann Ihnen versichern, ich probiere nur Dinge aus, um zu sehen, ob diese Wichtigkeit Sinn macht. Richten Sie den Titel also an der linken Hilfslinie aus und lassen Sie etwa 20 Pixel zwischen ihm und dem Titelbild. Für die Lieferzeit glaube ich, dass ich oben links auf dem Titelbild ein schwarzes Rechteck platzieren werde . Seine Größe? Nun, etwa 140 50, weil ich nicht vorhabe diese Textebene so zu belassen, wie sie ist. Es ist viel zu breit, viel zu lang. Dies ist also ein Ort, an dem wir Dinge ändern können, um unser Leben ein bisschen besser zu machen. Ich werde es von Minuten auf 30 Minuten verkürzen. Und vielleicht füge ich zu einem späteren Zeitpunkt sogar das Uhrsymbol daneben hinzu. Jetzt können wir sicherstellen, dass dies gut positioniert und sortiert ist . Wir müssen die Dinge im Ebenenfenster ändern, damit wir die richtige Reihenfolge haben. Aber das ist ziemlich einfach. Sobald du dich etwas mehr an Figma gewöhnt hast, kannst du anfangen, mit Hotkeys zu spielen. Und das wird dir sehr helfen. Vorerst. Es manuell zu machen ist völlig in Ordnung. Als Nächstes verringern wir die Opazität der Rechtecke auf etwa 30%. Das wird uns wirklich helfen. Die Frage ist jedoch, ob dies weiß mit einem schwarzen Text darüber gehalten werden sollte oder umgekehrt. Nun, ich denke, ein schwarzes Rechteck, wo es ein bisschen besser Lass es uns ausprobieren. Also lass uns es von weiß auf schwarz ändern , offensichtlich kein Rand. Und dann wechseln wir zur Textebene. Es muss weiß sein, aber ändern Sie es auf vielleicht halbfett, damit es ein bisschen besser zur Geltung kommt. Wenn Sie fertig sind, wählen Sie beide aus, fördern Sie sie, falls Sie dies noch nicht getan , horizontal und vertikal, dieser Artikel sollte oben links platziert werden, rechts, aber warum dort und nicht woanders? Nun, ich habe gesehen, dass unzählige Apps diesen Standort verwenden, also werde ich einfach dieser Linie folgen. Ganz einfach, daran ist nichts Besonderes. Wenn die meisten Schritte auf diese Weise gemacht werden, machen wir es genauso. Jetzt können die Tags so bleiben, wie sie sind, aber wir werden sie links am Titel ausrichten. Das ist ziemlich einfach, weil wir diesen Leitfaden für den Abstand haben , wiederum 20 Pixel zwischen ihnen. Ich denke, das ist völlig in Ordnung. Lassen Sie uns sie eigentlich mittelgrau machen , etwa 777. Jetzt hat ein Hex-Code sechs Zeichen, aber wenn Sie die ersten drei eingeben, fügt das Programm die drei automatisch ein. die Bewertung angeht, möchte ich, dass etwas Ähnliches unentschieden abgeliefert wird. Ein Smiley-Gesicht ist in Ordnung. Der beste Ort für die Icons ist jetzt Lab icon.com. Beachten Sie jedoch, dass die meisten Icons ein Abonnement benötigen. Ich werde dir nicht zeigen, wie ich nach dem Smiley-Gesicht suche , weil es nichts besonderes gibt, aber du hast es an einem Tor befestigt. Hier ist das Endergebnis. Vielleicht möchtest du wissen, wie du fantastisch aussehende Icons auswählst, aber darauf kommen wir später zurück. Für die Größe ist 40 mal 40 ein guter Weg. Normalerweise würde ich die kleinere Größe nehmen, aber es ist ein ziemlich glücklicher Eigen. Ich mag es sehr. Also warum zeigst du es nicht? Sie sagten, zehn Pixel vom Text entfernt. Übrigens, ich denke, es ist am besten, wenn wir den Prozentsatz fett und grün machen , weil das der wichtigste Teil ist und die Auflistung, sie kommen da rein als die Zeile alles gut. Belassen Sie diese beiden in derselben Zeile wie der Titel, aber lassen Sie das Element die rechte Seite berühren. Okay, wir machen große Fortschritte. Aber es gibt noch nichts zu schreien. Denken Sie daran, dies ist nur die erste Version. Lassen Sie uns aber den oberen Teil erledigen, denn er wirft mich tatsächlich ab. Ich möchte das Kartendesign ohne Ablenkung beurteilen. Und diese grauen Rechtecke sehen nicht gut aus. Lassen Sie uns das im nächsten Video behandeln. 17. Richte die Statusleiste und die Aktionsleiste ein: Willkommen zurück. Mir gefiel der Designjuror im Kontext. Könnten wir nun alles isolieren und uns einfach auf diese Karte konzentrieren, das Darlehen in dieser Liste? Sicher. Das könnten wir, aber warum sollten wir das tun? Deshalb möchte ich mich mit der Aktionsleiste und der Statusleiste damit ich alles im Kontext sehen kann , damit ich das Design in seiner Gesamtheit beurteilen kann. Die erste Option ist ein sehr sauberes Aussehen. Beide Rechtecke sollten weiß sein, aber wir müssen den Schlagschatten zur Aktionsleiste hinzufügen , damit er nicht verloren geht. Das ist viel besser, als den Strich zu benutzen, also denk nicht einmal darüber nach. Um nun einen Schlagschatten zu aktivieren, gehen Sie in den Effektbereich und klicken Sie auf dieses Plus-Symbol. Verwenden Sie dann dieses Symbol , um das Aussehen zu ändern. Nun zu den Einstellungen 2.4, aber ich denke, die Standarddeckkraft von 25 ist ein bisschen viel. Lassen wir es fallen, sagen wir 15% und das war's. Gut zu gehen. Nichts besonderes. Im weiteren Verlauf fehlen uns wichtige Elemente in der Statusleiste. Also hier ist eine Datei, die uns helfen kann. Diese Ressource ist beigefügt und ich erwarte, dass Sie sie in all Ihren Projekten verwenden. Die Idee ist, dass die Statusleiste nichts Besonderes ist. Es ist einfach und super einfach. Wir sollten keine Zeit verschwenden, wo sie es einfach kopieren und einfügen und fertig damit sein. Okay, lassen Sie uns die Ebene mit den Stadttexten durch San Francisco ersetzen die Ebene mit den Stadttexten durch San Francisco , fett geschrieben, 40 Pixel, reines Schwarz. Dies ist der Mythos des Namens des Restaurants. Es sollte genauso aussehen. Zentrieren Sie es mit der Aktionsleiste. Links. Stimmen Sie das mit unserem Leitfaden ab und wir können weitermachen. Wenn Sie sich immer mehr mit Figma vertraut machen, schlage ich vor, dass Sie die Befehle zum horizontalen und vertikalen Ausrichten lernen . Sie helfen wirklich. Oh, verschieben Sie das Dropdown-Symbol auf, falls Sie dies noch nicht getan haben. Zum Schluss überspringe ich aus Zeitgründen und zeige Ihnen die Symbole, die ich für diese rechte Seite ausgewählt habe. Diese sollten ebenfalls 40 Pixel groß sein. Zentriert sie innerhalb des Rechtecks. Wie ich hoffe, Sie werden sehen, ist die Verwendung dieser Ausrichtungswerkzeuge wie Trinkwasser. Du musst es ziemlich oft machen, wenn du dich gut fühlen willst. Also beide Symbole für die Pixel und zentriert, aber was ist zwischen ihnen? Nun, lassen Sie uns noch einmal mit 40 beginnen, damit dicke Finger kein Problem sein werden. Versehentliche Klicks sind ziemlich nervig. Oh, übrigens, wir haben das Hamburger-Menü auf der linken Seite vergessen . Gib mir eine Sekunde, während ich mich darum kümmere. Warum heißt es Hamburger-Menü? Es sind drei Linien übereinander. Also ich denke, es sieht aus wie ein Hamburger. Keine Ahnung. Um die Magie der Bearbeitung zu nutzen, fügt er nun ein hübsches Symbol hinzu. Alles ist von flap icon.com übernommen und du hast sie angehängt, aber bitte verwende sie nicht für deine echten Projekte. Ich füge sie zu Bildungszwecken bei, damit Sie mitmachen können. Sie benötigen ein Abonnement, um Lab Icon für Ihre Kunden verwenden zu können. Jetzt verwende ich meinen Guide, um es richtig zu positionieren, und ich lasse 30 Pixel zwischen ihm und San Francisco. Vergewissern Sie sich auch hier, dass Sie die Option Vertikale Mittelpunkte darauf ausrichten. Sie fragen sich vielleicht, warum ich nicht die Pixel zwischen diesen beiden Elementen verwendet habe , um den Raum auf der rechten Seite widerzuspiegeln. Und das liegt daran, dass mir der Brief sagt, dass hier die Adresse des Benutzers angezeigt wird , wenn er angemeldet ist. Also werde ich so viel Platz wie möglich benötigen. Wir haben noch eine letzte Sache , die sortiert werden muss. Die Größe des Dropdown-Pfeils sollte auf etwa 20 mal zehn geändert werden. Und ich denke, wir sollten es so nah wie möglich an der Stadt platzieren . Nun, 30 Pixel würden besser aussehen, aber ich bleibe bei zehn Pixeln. Ja, damit bin ich sehr zufrieden. Nachdem alles gesagt und getan ist, wählen Sie bitte alle diese Elemente aus und zentrieren Sie sie in der Aktionsleiste. Wenn alles in Ordnung ist, sollte sich nichts bewegen. Nun, vielleicht ein oder zwei Pixel. Stimmt das? Nun, das ist unser erstes Design. Lass uns das Auto auswählen, dann machen wir ein paar Kopien. Wie gesagt, ich wollte es im Kontext beurteilen. Ich würde also gerne sehen, dass die gesamte Höhe von Restaurants eingenommen wird. Insgesamt. Es ist ein grober Entwurf, aber er enthält alle erforderlichen Elemente und wir können anfangen, mit ihnen zu spielen und mindestens zwei der Varianten auszudenken. Ich sehe dich in der nächsten Vorlesung , wo wir genau das machen werden. 18. Restaurant (2): Willkommen zurück. In diesem Video werden wir verschiedene Optionen für diese Karte untersuchen . Wir werden den gesamten Bildschirm duplizieren, also sorgen wir dafür, dass alles schön und sauber bleibt. Dies wird uns auch helfen, alle Versionen zu vergleichen. Bevor wir beginnen, gibt es eine Menge fortgeschrittener Dinge, die wir in Figma tun können. Dinge wie Komponenten, Varianz, automatisches Layout, die uns erstaunliche Flexibilität und Leistung bieten können . Das Problem mit ihnen ist für Anfänger so verwirrend. Wir könnten zwar ein paar Stunden damit verbringen , über sie zu sprechen und verschiedene kleine Übungen zu machen, die das App-Projekt ernsthaft verzögern würden. Also mein Rat ist dieser. Konzentrieren wir uns auf die wesentlichen Gestaltungsprinzipien. Später im Kurs werden wir über diese erweiterten Funktionen sprechen. Hört sich gut an. Lass uns loslegen. Okay, das erste, was wir ausprobieren sollten, ist ein sehr hellgrauer Hintergrund. Und ich habe tatsächlich die Farbe von Dribble probiert, die einen blauen Farbton hat. Und der Farbcode ist allerdings f, z, F1, F acht. Und es ist sehr subtil. Bitte beachten Sie, dass kein Rechteck als Hintergrund festgelegt ist. Dies ist die Farbe für den gesamten Rahmen. Der Text sieht auf diesem grauen Hintergrund nicht gut aus. Lassen Sie uns also das Grundrechteck für diese Karte erstellen. Hier ist der Vorgang, wählen Sie das Bild aus, indem Sie darauf klicken. Weiter Größeres Kopieren mit Control D, D wie in doppelter Ausführung. Gehen Sie zum Ebenenbedienfeld und wählen Sie das untere aus. Okay, jetzt erhöhen wir die Höhe auf 500. Im Moment macht das nicht viel Sinn. Aber hier ist die Sache. Entfernen Sie das Hintergrundbild als fehlgeschlagen, indem Sie das Minussymbol verwenden. Wenn das erledigt ist, können wir die normale, die Füllfarbe hinzufügen und es natürlich reinweiß machen. Und im Grunde ist es das. Wir haben jetzt eine Karte und der Kontrast ist viel besser. Nun sicher, dass der Text nicht passt und habe einige andere Dinge getan, um das zu korrigieren, aber das ist der Prozess. Duplizieren Sie also erneut, wählen Sie die unterste Ebene aus, erhöhen Sie die Höhe und spielen Sie dann mit der Füllfarbe. Okay, zurück an die Arbeit. Wählen wir das Bild aus und ändern den Koordinatenradius unten. Wir haben dieses Feld zuvor hier verwendet, aber um einzelne Ecken zu kontrollieren, müssen wir hier klicken. Mein Rat ist, dass Sie auf das erste klicken und das Symbol überprüfen. Dies wird Ihnen die Geschichte Ihrer Logistik erzählen. Kurz gesagt, wir wollen 5500. Jetzt können wir die Textebenen neu positionieren, diese beiden Elemente auswählen und sie um 30 Pixel nach innen verschieben. Was den Abstand auf der vertikalen Achse angeht , so spielt das im Moment keine große Rolle. Aber versuche sie irgendwo in der Mitte dieser Wache zu platzieren. Die rechte Seite, dasselbe, 30 Pixel, aber halte das in Einklang mit dem Titel, der nie davon gesendet wurde. In dieser Situation ist es wichtig zu wissen, wie man Control and Shift verwendet. Lass mich die Dinge klären. Halten Sie also die Strg-Taste gedrückt und klicken Sie auf den Titel. Jetzt ist das natürlich ausgewählt, vorausgesetzt, wir wollten auch Wüste nehmen, müssen wir die Strg-Taste und die Umschalttaste gedrückt halten , danach im Ebenen-Panel nachschauen. Denken Sie also daran, dass Sie bei gedrückter Ctrl-Taste eine einzelne Ebene auswählen können. Wenn Sie dann mehrere Ebenen aufnehmen möchten, klicken Sie bei gedrückter Strg-Taste bei gedrückter Umschalttaste. Einfach so. Denken Sie daran, dass wir all diese letzten Anpassungen überarbeiten werden, wenn wir zur Typografie-Vorlesung kommen, wenn wir tatsächlich Schriften auswählen werden. Okay, nach ein bisschen Basteln ist das unsere erste Narbe, das ist die erste Alternative. Wenn ich sie nun Seite an Seite betrachte, denke ich, dass es eine Verbesserung ist, aber insgesamt bin ich mit dieser Größe nicht zufrieden. Also lassen Sie uns den Bildschirm noch einmal duplizieren und etwas anderes versuchen. Stellen Sie sicher, dass Sie genug Platz haben. In Figma ist der Himmel die Grenze. Nehmen wir an, wir verkleinern das Auto , sagen wir, für die Pexels. Das bedeutet also, dass das Grundrechteck 60 sein muss und das innere Rechteck nur 360 sein muss. Geben Sie mir einen Moment Zeit, um das Eigenschaftenfenster zu verwenden. Ich bin schnell, aber so schnell bin ich nicht. Okay, wir sind startklar. Als Nächstes. Wir müssen mit diesen Textebenen umgehen. Und hier kommt Geschicklichkeit erst richtig ins Spiel. Also schnell, wählen Sie sie aus und verschieben Sie sie um 40 Pixel nach oben. Das sind also vier Typen von hier, der Aufwärtspfeiltaste, wenn Sie auch die Umschalttaste gedrückt halten. nun, während wir hier sind Lassen Sie uns nun, während wir hier sind, diesen Tags einen Farbtupfer hinzufügen. Sie sehen so langweilig aus, wie sie sind , und du wüsstest es nicht, du kannst sie tatsächlich anklicken. Schauen wir uns an, was wir tun können. Jede Farbe wäre in Ordnung, aber ich würde lieber nicht dasselbe Grün aus der Bewertung verwenden . Ich möchte jegliche Verwirrung vermeiden und sie ein bisschen mehr hervorheben. Rot oder Orange ist das komplette Gegenteil von Grün. Also lass uns mit so etwas weitermachen. Nun, der genaue Farbcode spielt wirklich keine Rolle da wir das Farbschema des Bettes später einrichten werden. Wir haben immer noch die erste Option in Bezug auf den Header. Okay? Stimmt. Ich bin zufrieden mit der neuen Karte. Und ich muss sagen, dass ich mit dem neuen Seitenverhältnis des Fotos ziemlich zufrieden bin. Es ist nicht mehr so groß wie zuvor, aber es ist trotzdem großzügig und es sieht ganz nett aus. Erinnert euch an das Level, in dem wir die beste Stimmung hatten. Und ich denke, ein Großteil davon war sein unheimliches Gefühl. Alles schien mehr als genug Platz zu haben. Nichts war überladen, nichts war besetzt. Also ich denke, wir werden es so belassen. Lassen Sie uns nun darüber nachdenken, was wir sonst noch tun können? Lass uns eine Kopie machen und weniger. Jetzt könnten wir den Tags eine einfarbige Hintergrundfarbe geben , um zu zeigen, dass Sie sie tatsächlich antippen können. Du kannst sie anklicken. Bedeutet, dass dem Benutzer eine Aktion zur Verfügung steht. Aber weil sie wollen, dass die Bewertung angemessen beachtet wird, denke ich, dass ich das über das Foto verschieben werde. Also lass uns loslegen. Verschieben Sie die Bewertung und die untere rechte Koordinate des Fotos. Etwas wie das hier. Natürlich können wir es nicht sehen, aber wir können eine Füllung hinzufügen, indem wir die automatische Layoutverschiebung verwenden. Sie schreiben den Text und das Emoji und wählen das richtige aus. Verwenden Sie Shift A, um ein Autolayout zu erstellen. Aktivieren Sie dann wie zuvor eine Füllung. Reines Weiß natürlich, quadratisch, es sieht nicht toll aus, aber das können wir ändern, indem wir hier einen großen Wert eingeben. Dann fügen wir die Polsterung von, sagen wir, sowohl horizontal als auch vertikal hinzu. Das sollte den Job machen. Nett und einfach All-in-do-Auto-Layout. Und falls Sie den Text ändern, ihn kürzer oder länger machen, ändert sich auch das Feld. Das ist eine Technik und Figma , die sich hier wirklich lohnt. Übrigens, mit einem weißen Hintergrund ist dies eine der einfachsten Möglichkeiten, eine gute Lesbarkeit zu erreichen, ohne Kompromisse einzugehen. Lassen Sie 30 Pixel vom unteren und rechten Rand entfernt. Wie Sie sehen, sobald ich einen Wert in meinem Kopf eingerichtet habe, in diesem Fall 30, behalte ich ihn bei. Okay. Nennen Sie es Bewertung im Ebenen-Panel, falls Sie organisiert bleiben möchten. Das ist beim Filmen etwas schwierig . Also entschuldige ich mich dafür. Ich habe mich wirklich darauf konzentriert , dir Dinge beizubringen , und mein Ebenen-Panel ist nicht so toll. Machen wir eine kurze Pause und wir werden gleich weitermachen. Ich danke dir. 19. Weitere Variationen für die Karte: Willkommen zurück. Kümmern wir uns um die Tags. Wir werden Autolayout verwenden. Auch hier wird die Breite je nach Länge des Wortes variieren. Aber wir wollen mindestens 20 Pixel auf jeder Seite. Seien wir also großzügig. Das ist ein Hotkey, den ich liebe. Stellen Sie also sicher, dass Sie sich daran erinnern. Okay, das sollte ein orangefarbener Schrägstrich sein. Aber mach dir nicht zu viele Sorgen um den Schatten. Stellen Sie einfach sicher, dass reinweißer Text wirklich knallt. Es wird wirklich auffallen. Jetzt werde ich ziemlich schnell vorankommen weil das Standardzeug ist. Sie sollten in der Lage sein , dem zu folgen. Aber natürlich musst du das Video oft pausieren. Die Koordinaten müssen auf das Maximum gerundet werden , damit sie der Bewertung entsprechen. Ich nehme langsam Fahrt auf, aber hoffentlich kannst du ohne Probleme mitmachen. Nun, hier ist die Sache. Die Höhe der Karte ist nicht gut genug. Wir können das einfach nicht zum Laufen bringen. Auch wenn wir den Titel nur ein bisschen erhöhen, schlage ich vor, dass wir das ändern. nun über die Größenbestimmung der Dinge spreche, denke ich, ich lasse 20 Pixel zwischen den Tags. Und nachdem alles gesagt und getan ist, denke ich, so sollte es aussehen. Die Sache ist, dass nicht alle deine Ideen großartig sein werden und das ist völlig in Ordnung. Was wichtig ist, ist, dass Sie sie so schnell wie möglich erstellen und sie dann beurteilen, indem Sie sie Seite an Seite betrachten. Lassen Sie uns die Lieferzeit aus der oberen linken Ecke entfernen. Dies sollte in derselben Zeile stehen wie der Titel des Restaurants für diese Variante. Lass uns die Leber schreiben, das Ende 30 Minuten. Die Standardschrift ist vorerst in Ordnung, was wir suchen, ist Ausgewogenheit. Diese, diese Karte sieht toll aus. Jetzt kann ich sagen, der Diamant liebt es. Ich kann sagen, dass diese Bewertung auf der rechten Seite perfekt ist. Lassen Sie uns am Ende des Tages die Ansicht verkleinern und uns alle Optionen ansehen. Um ihm die fünfte Chance zu geben, vergewissere dich, dass alles gut zugeknöpft ist. Wenn Sie viel mehr Zeit mit unserem Design verbringen, Sie natürlich eher geneigt sein, es besser zu mögen. Aber wir haben hier ohne Hintergrund und mit sehr großen Karten angefangen . Das ist eindeutig das Schlimmste. Die zweite Version sieht gut aus, aber die dritte ist aufgrund der kleineren Kartengröße definitiv besser . Mir hat auch dieser Schuss Orange gefallen. Aber wenn ich diese beiden vergleiche, denke ich, dass solide Tags ein Fehler waren, das ist zu beschäftigt und unausgewogen. Trotzdem hat es sich gelohnt, es zu tun, aber jetzt werde ich es nicht weiter verfolgen. Ich bin ziemlich zuversichtlich, dass es nicht okay ist. Mir gefällt das variable Rating, aber wir müssen noch etwas daran arbeiten. Machen wir also eine Pause und wir fahren mit unseren Variationen fort und nur ein paar Augenblicke. 20. Letzte restaurant (2): Willkommen zurück. Ich wünsche dir viel Spaß und dass du mit mir zusammenarbeitest. Aber bei Ihrem zweiten Besuch haben wir zu diesem Zeitpunkt natürlich mit verschiedenen Optionen herumgespielt und wir wissen mit Sicherheit, dass wir bei dieser Version bleiben wollen , aber ohne die Tags. Also lass uns das machen. Erstellen Sie eine weitere Kopie der neuesten Zeichenfläche und entfernen Sie die orangefarbenen Rechtecke. Am einfachsten ist es, mit der rechten Maustaste zu klicken und Autolayout entfernen zu wählen. Oder du könntest es einfach wiederholen, was immer du willst. Dies ist jedoch eine gute Gelegenheit für Sie zu wissen, dass Sie jederzeit alles oder das Layout entfernen können. Ich mag diese Farbe aber, lassen Sie uns sie auf diese Textebenen anwenden. Wir haben das automatische Layout entfernt, aber wir haben immer noch einen zusätzlichen Rahmen im Ebenenfenster, um ihn zu entfernen rechten Maustaste und wählen Sie Gruppierung aufheben. Das gilt für beide. Jetzt trennen wir sie durch einen Bindestrich und räumen die Dinge auf. Dieser Teiler kann schwarz oder so ähnlich sein. Was den Abstand zwischen ihnen angeht, naja, ich sage irgendwo zwischen 15 und 20 Pixeln. Die Frage ist, sollten wir diese Position beibehalten? Ich denke, wir können ein bisschen mehr damit spielen. Also hier ist meine Idee. Lassen Sie uns die Lieferzeit unter den Titel verschieben, da der Brief besagt, dass dies ein sehr wichtiger Faktor für die Apps der Benutzer ist . Das bedeutet nun, dass die Eier wie zuvor auf der rechten Seite liegen, 30 Pixel vom Rand entfernt. Schon bald werde ich anfangen, Schriften auszuwählen und das wird viel besser aussehen. Jetzt, in der Pause, habe ich mir die Zeit genommen, das Uhrsymbol zu allen anderen zu finden . Hier sind ihre und Sie können 30 mal 30 oder 40 mal 40 wählen, was auch immer Ihrer Meinung nach am besten funktioniert. Die kleinste Größe ist in Ordnung , weil es sich nicht um eine Aktion handelt, Sie können sie nicht wirklich antippen. 40 Pixel haben wir in der Aktionsleiste verwendet. Das ist aber angemessener weil Sie sie tatsächlich anklicken können. Du kannst sie antippen. Insgesamt werde ich aus diesem Grund den niedrigeren Wert wählen. Nehmen Sie sich also einen Moment Zeit und ordnen Sie alles zwischen der Uhr bitte alles zwischen der Uhr und der Uhrzeit zehn Pixel an. Alles muss vertikal zentriert sein. Das Uhrensymbol, der Lieferdiamant , endlich die Kategorien. Und als optionalen Schritt können wir die Texte bis zur Lieferung von 30 Minuten verkürzen , falls Sie dies noch nicht getan haben. Ich denke, das ist heute klar, dass es eine großartige Option ist. Es ist viel kürzer, es ist viel besser. Und wir könnten sogar die Lieferung entfernen , weil wir dieses Uhrsymbol haben. Ich denke, das macht immer noch Sinn. Einzeluhrsymbol und 30 Minuten, ich denke, es bringt den Punkt klar, aber wir werden es in dieser Version belassen. Schließlich ist das Bewertungsdesign ziemlich nett, aber es deckt einen erheblichen Teil des Fotos ab. Also hier ist, was ich vorschlage. Ich habe mich von The Liver Due inspirieren lassen. Ich möchte also, dass die Bewertung an diesem Rand liegt. Dies sollte auch die Dinge ausgleichen. Die Sache ist, wir werden den Schlagschatten brauchen , weil er weiß auf weiß ist. Das nennt man übrigens Pillenknopf, PEL, wie in der Medizin, weil er ziemlich rund ist. Sie haben einen guten Zeitpunkt, um es 30 Pixel vom rechten Rand entfernt zu platzieren. Aber hier ist die Sache. Auch wenn dies nicht die endgültige Schrift ist, denke ich, dass wir mit dem Padding spielen müssen. Ich habe nichts Konkretes im Sinn. Es ist eine Methode, Dinge auszuprobieren, wahrscheinlich ein bisschen breiter, wahrscheinlich ein bisschen kürzer. Schau, was dir gefällt, spiel damit und schau, was besser aussieht. Ich denke, es gibt zu viel Leerraum auf beiden Seiten. Also lass uns die Größe ändern, es zum Gebot machen, sie waren auch nicht gut damit. In der idealen Version ist diese Form so breit wie diese beiden Etiketten. Aber natürlich die Tags, die sich ändern werden, basierend auf den hier gezeigten tatsächlichen Wörtern. International ist ziemlich lang, aber andere Kategorien sind dort möglicherweise kurz. Aber ja, das wäre die ideale Situation bei gleicher Breite. Insgesamt denke ich, dass dies eine wunderbare Verbesserung gegenüber dem vorherigen Design ist. Es ist viel besser. Der Schatten mag zwar etwas zu stark sein, aber wenn wir ihn nicht runter haben, wird er ganz schön aussehen. Ich denke, sechs Prozent Opazität sind in Ordnung. Beachten Sie, dass die Opazität von dieser Stelle aus gesteuert wird. Sie könnten diesen Bereich auch verwenden, aber ich bevorzuge dieses Feld. Es ist einfacher. Okay, wenn ich mir die Dinge ansehe und herauszoomen, glaube ich, dass dies mit Abstand die beste Version ist . Was denkst du? Lass es mich im Kommentarbereich wissen. Und natürlich können Sie immer Ihre eigene Version erstellen. Denken Sie nun, wenn dies einmal poliert ist, werden es starke 8,5 von zehn sein, und das ist mehr als genug. Lass uns eine Pause machen. 21. Optionen für die action erstellen: Willkommen zurück. Gehen wir zurück zum oberen Bereich. Im Moment haben wir etwas sehr Sauberes geschaffen. Aber ist das der richtige Weg? Wir sind ziemlich schnell zur Breite gegangen, weil wir die darunter liegenden Karten analysieren wollten , ohne heruntergeworfen zu werden. Aber ich denke, wir können einige Optionen prüfen. Lass uns eine Kopie machen, Platz schaffen und lass uns anfangen. Das Erste, was mir in den Sinn kommt, und das ist sehr kreativ, ist, ein Foto für diese ganze, ihre Idee für die Aktionsleiste zu verwenden . Und es kann ein Bild von San Francisco sein, da dies die aktuelle Stadt ist. Lassen Sie uns also die Statusleiste entfernen und die Aktionsleiste und diese Region erweitern. Nun, warum müssen wir es entfernen? Weil es viel einfacher ist, ein Foto in ein einzelnes Rechteck einzufügen. Und wenn es uns gefällt, können wir mit einem Programmierer sprechen und sehen wie viel Aufwand erforderlich wäre, um es zu verwirklichen. Ich weiß, dass es möglich ist, dass ich es schon einmal gemacht habe, aber ich bin mir nicht sicher, wie schwierig es sein wird. Nun, wir werden diese Diskussion führen, wenn wir sie vorerst mögen Lassen Sie uns sie in Aktion sehen. Also unterbreche ich die Aufnahme und ging zu Unsplash, um mehrere Fotos von der Brücke zu machen. Hier sind sie und wir werden den Vorgang vom ersten Bildschirm aus wiederholen . Denken Sie an die Tastenkombination Shift-Taste , um das Foto in das Rechteck einzufügen. Also hier ist der erste. Wir haben eine ganze Reihe von Elementen, die auf farbigem Hintergrund nicht funktionieren. In diesem Fall müssen wir sie also bitte alle weiß machen . Sonst nichts. Nur in der Nähe das Gelb, Orange, Limettengrün, nichts dergleichen. Das sind die schlimmsten Betten des Teufels. Ich spiele nur herum, aber ich meine es ernst mit diesem Rat. Verwenden Sie nur Weiß. Also, das sieht gar nicht so schlecht aus. Wir können natürlich eine weitere Füllung mit geringer Opazität hinzufügen, um die Lesbarkeit dieses Textes zu verbessern und einen guten Kontrast zu erzielen. Aber lassen Sie uns vorerst die Fotos durchgehen. Übrigens, falls Sie einige schnelle Änderungen vornehmen möchten, können Sie dies tatsächlich von hier aus tun. Klicken Sie einfach auf das Vorschaubild und Sie haben viele Optionen oder doppelklicken Sie auf das Foto. Das ist nicht der Sinn dieser Vorlesung, also werde ich nicht näher darauf eingehen, aber nein, es ist eine Option. das Foto zu bearbeiten, können Sie also alles abwählen, dann das Foto auswählen und die Füllung überprüfen. Klicken Sie auf das Bild. Und dann bekommst du all diese Einstellungen. Kurz gesagt, Sie haben viel Freiheit. Das ist kein Photoshop. Wir haben noch eine ganze Reihe von Optionen. Okay, lass es uns kurz machen. Im Wesentlichen werde ich Bild Nummer sechs verwenden, aber Sie können sich die anderen selbst ansehen. Aber du musst über die Strategie nachdenken. Wollen wir der ActionBar wirklich viel Aufmerksamkeit schenken? Die Sache ist aber, wir lieben die Einfachheit der Leber, oder? Das bringt uns davon weg. Ich denke nicht, dass es das wert ist. Einige dieser Fotos sehen okay aus. Aber das ist es. Sie sind nicht fantastisch, sie sind nicht fantastisch. Also ich denke, wir sollten die Dinge nicht komplizieren. Lass uns diese Idee verwerfen. Lass es uns entfernen, weil wir wollen, dass der Fokus darunter bleibt, oder? Nicht oben, sondern unten. Aber trotzdem, lass es uns ausprobieren. Eine andere Option könnte sein, mit einer soliden Heather etwas anderes zu schreiben, nicht Weiß. Also werde ich bei einem neuen Exemplar anfangen, mit einigen kräftigen, leuchtenden Farben zu experimentieren , etwas Lebendiges. Ganz oben auf meiner Liste stehen Grün, Orange, Lila und Blau. Jetzt werde ich sie nebeneinander stapeln damit wir jedem von ihnen eine faire Chance geben können. Geben Sie mir jetzt einen Moment, während ich all diese Versionen durchgezoomt habe. Ich werde ziemlich viel beschleunigen. Aber im Wesentlichen geht hier nichts Besonderes vor sich. Außerdem habe ich keinen bestimmten Farbcode im Kopf. Was ich habe, ist eine Stelle im Farbwähler, und die ist etwas weiter unten in der oberen rechten Ecke. Also nicht ganz im Koordinator , weil das Neongebiet ist. Also keine Neonfarben, sondern nur ein bisschen weiter unten. Hier sind sie. Jetzt ist die Frage, hast du einen Favoriten? Denken Sie, dass jede Farbannahme besser ist als die reine weiße? Denn von meinem Standpunkt aus denke ich, dass es am besten ist, wenn wir es weiß lassen. Die Fotos sind farbenreich. Und im Grunde ist es nicht so, dass ich sie nicht mag, wenn ich hier um Probleme bitte , aber ich denke, warum ist eine viel bessere Option? Ich denke, es ist etwas raffinierter und entspricht mehr als dem Geist der App. Wenn Sie nun anders denken, fahren Sie fort, Sie haben die Wahl und zeigen Sie mir Ihr Endergebnis. Dies ist eine Geschmacksmethode, aber auch die Art und Weise, wie wir den Auftrag interpretieren. Damit ist die Vorlesung abgeschlossen. Machen Sie eine Verschnaufpause und wir sehen uns in einer Minute. 22. Gestaltungskonzepte für die Restaurantdetails (3) Bildschirm: Willkommen zurück. Wir sind bereit, mit der Gestaltung der Restaurantdetails fortzufahren. Mal sehen, welche Variante wir uns für dieses Grün einfallen lassen können. Aber lassen Sie uns das zuerst aktualisieren. Diese Rechtecke müssen weiß sein. Und der, der unsere Tabs hält, Knie, die Schatten fallen lassen. Bitte beachte jedoch, dass wir spezielle Einstellungen für den Share haben , und das sind 2.4. Was die Opazität angeht, eine Sache, die 15 Prozent betrug, aber vielleicht möchten Sie damit spielen. Dies ist sehr wichtig, wenn mit Schatten umgehen, da sie möglicherweise oben im Rechteck erscheinen, wenn Sie nicht vorsichtig sind. Stellen Sie also sicher, dass Sie die Einstellungen überprüfen. Okay, lass uns zur Statusleiste übergehen. In der Vergangenheit habe ich PNGs verwendet, also aktuelle Fotos für die Statusleiste, aber es ist am besten, wenn du ein Objekt verwendest, das anpassbar ist. Das Format, auf das Sie sich als SVG freuen. Oder Sie können diesen Artikel einfach aus einem beliebigen Werbegeschenk aus dem Internet kopieren und einfügen. Okay, jetzt, weiter, wir müssen einige Symbole hinzufügen. Ich habe mir etwas Zeit genommen, um den passenden Zurück-Pfeil und eine Information ALL zu finden , und diese müssen genau wie auf Bildschirm Nummer zwei platziert werden , alle in derselben Zeile mit einer angemessenen Menge von Rand. Ich denke, wir hätten es vielleicht übersprungen den Leitfaden zu dieser Zeichenfläche hinzuzufügen. Also lass uns das beheben. Fügen Sie ein beliebiges Rechteck hinzu , das 656 Pixel breit ist. Wie üblich ist das Eigenschaftenfenster die beste Wahl, wenn Sie nach der bestimmten Größe suchen. Ziehe dann deine Guides heraus. Wenn du diesen Teil nicht siehst, aktiviere bitte deine Lulas. Benutze diesen Hotkey. Okay, jetzt entferne diese zusätzliche Schicht. So einfach ist das. Das ist einer dieser Hacks , die ich absolut liebe. Es ist ziemlich einfach, aber es funktioniert. Diese Technik entstand aus der Notwendigkeit heraus und nur ein Freelancer , der seine Zeit wirklich schätzt , hat einen solchen Ansatz. Wenn Sie jemanden sehen, der mit dieser Maus Pixel für Pixel einen Führer bewegt , links, rechts, links, rechts. Dann weißt du, er ist viel zu entspannt. Wobei Geschäft. Platzieren Sie dieses Informationssymbol neben der Anleitung. Okay, wenn du fertig bist, wiederhole es bitte für die andere Seite, aber nimm dir Zeit damit und stelle sicher, dass du es richtig machst. Die einfachste Art, diese anzuordnen, besteht natürlich darin die große Kiste, die sie alle umfasst, auszutrocknen. Dann klicken Sie auf den Befehl Ausrichtung und Sie haben einen ziemlich großen Schritt gemacht. Lassen Sie 30 Pixel zwischen dem Pfeil und dem Titel. Es ist also nett und luftig. Die Standardschrift wird nicht ausgezeichnet. nächsten Vorlesung werden wir den letzten Schliff geben. Das ist ein bisschen riskant , weil es so groß ist, aber wir werden alles früh genug regeln. Nun, die Hauptidee hier ist, konsistent zu bleiben. Ich mag es nicht, unterschiedliche Werte auf verschiedenen Bildschirmen zu verwenden . Zum Schluss noch für die Tabs: Lass uns das machen. Wählen Sie alle auf einmal aus , da dies die intelligenteste Arbeitsweise ist. Ändern Sie dann die Ausrichtung in die Mitte. Dadurch bleiben sie an Ort und Stelle , weil ich vorhabe, diese Größe auf 24 Pixel zu erhöhen. Außerdem ändern wir das Gewicht von normal auf fett. Für die Farbe ist Schwarz im Moment völlig in Ordnung. Wir haben ziemlich viel Zeit damit verbracht, sie mithilfe der Zeile anzuordnen , in der der aktive Tab angezeigt wird. Ich möchte nicht, dass diese Anstrengung umsonst ist. Deshalb haben wir die Ausrichtung geändert. Okay, lass uns weitermachen. Wählen Sie die erste Wache aus und erstellen Sie ein paar Kopien. Das sieht also etwas realistischer aus. Nehmen wir die Linie als Beispiel. Wenn es nicht die richtige Größe hat, also 656 breit, können wir es schnell und präzise bearbeiten. Wählen Sie das aus und verwenden Sie das Eigenschaftenfenster, geben 656 ein und verschieben Sie es an die richtige Stelle. Dies ist übrigens eine großartige Gelegenheit, auch das X-Feld zu verwenden. Also ist x der horizontale Zugriff. Wenn wir hier also 32 Pixel eingeben, bedeutet das, dass die Ebene 32 Pixel vom linken Bildschirmrand entfernt platziert wird . Also beginnt x von der linken Seite, y von oben. Auch hier müssen wir einige manuelle Bearbeitungen vornehmen. Derzeit hat Figma keine großartige Funktion wie Adobe XD. Und das ist Repeat Grid. Nun, nicht zum Zeitpunkt dieser Aufnahme. Um all diesen Inhalt schnell zu ändern, müssen wir dies manuell tun. Gib mir eine Sekunde, während ich mich darum kümmere. Dies ist eine großartige Gelegenheit , dein Tempo zu üben. Bitte zeige dir niemals ein Design mit demselben Inhalt immer und immer wieder. Nicht für mich, nicht für Ihren Kunden, für niemanden. Das zeigt, dass du faul bist und vertrau mir, du willst dieses Label nicht. Das ist nicht schwer zu bewerkstelligen. Es geht darum, die Anträge durchzugehen. Nehmen Sie sich also Zeit und ersetzen Sie fast alles. Und wenn das geklärt ist , können wir weitermachen. Beispiel können wir uns auf In den Warenkorb legen konzentrieren, was die Hauptaktion in diesem Grün ist. Ich habe lange und genau gesucht und mich für dieses Pluszeichen entschieden. Das ist auch von Flat Icon. Soweit ich weiß, wird das Produkt automatisch in den Warenkorb gelegt, wenn Sie auf diese gesamte Region, also auf diesen gesamten Bereich tippen diese gesamte Region, also . Obwohl wir noch nicht in der Stylingphase sind, ändern Sie bitte die Farbe des Teilers, damit er nicht so ablenkt wie ein sehr helles Grau DDD sollte als vorübergehende Lösung sehr gut funktionieren . Und ja, übrigens, in diesem Bereich können Sie Leder hinzufügen , ein HEXACO, der Farbcode kann nicht nur Zahlen, sondern auch Buchstaben enthalten . DDD ist also ein aktueller Farbcode. Nun muss die Hierarchie vom Screening aber auch hier angezeigt werden. Also werde ich den Titel, den Preis und das Gewicht fett formatieren. Wir können sie auf 30 Pixel setzen. Obwohl das ein bisschen anstrengend sein mag. Sobald wir loslegen, können wir uns ein besseres Bild von den Abständen machen. Verschieben Sie den Titel übrigens bei Bedarf nach unten , dies ist jedoch ein optionaler Schritt. Idealerweise sollte der Titel oben mit dem Foto ausgerichtet sein, mit dem Vorschaubild auf der linken Seite. Der Preis wartet, ein Symbol sollte unten mit dem Vorschaubild ausgerichtet sein, aber als ganze Einheit, sodass alles auf derselben Linie liegt. In der Zwischenzeit wollte ich dich daran erinnern , dass ich zwei Designs von dir sehen möchte. Erstens, eine perfekte Replik mit genau den gleichen Symbolen, Schriftgrößen und Farben wie im Kurs. Und noch einer, der du allein bist. Das bedeutet neue Fotos, neue Schriften, neue Icons, neues Layout, die Werke. Ich möchte auch verschiedene Inhalte sehen. Poste deine Arbeit nicht genau so, wie du sie hier siehst. Wählen Sie verschiedene Restaurantnamen, ihre Eier, Preise, Rezepte usw. Bevor wir fortfahren, machen Sie bitte diese beiden Menüpunkte. Klasse 777 ist das, was wir bisher verwenden. liegt daran, dass wir zeigen wollten, dass sie nicht aktiv sind , sie sind nicht anklickbar. Okay, jetzt schauen wir mal, was wir hier tun können. Ich habe zwei große Richtungen. Eine Möglichkeit besteht also darin, ein Foto anstelle der Aktionsleiste zu verwenden, was möglicherweise besser funktioniert als auf Bildschirm Nummer zwei mit der San Francisco Bridge. Und die zweite Sache ist, dem Kunden eine scrollbare Tag-Version anstelle des festen Drei-Tab-Designs zur Verfügung zu stellen. Also lass uns das im nächsten Video machen. Nach einer kurzen Pause. 23. Variation für die Restaurantdetails: Willkommen zurück. Lassen Sie uns eine Kopie erstellen und an der ersten Variante für diesen Bildschirm arbeiten . Lassen Sie uns das Rechteck der Statusleiste entfernen und die Aktionsleiste anheben. Und das liegt daran, dass wir in dieser Region ein Bild hinzufügen möchten . Aber hier ist die Sache. Wir können dieses Gebiet noch vergrößern, obwohl es nicht so häufig ist. Wir haben diese Option. Aus meinen Tests. Eine Höhe von 270 Pixeln wird ziemlich gut funktionieren. Das sind also 270. Die Tabs müssen natürlich zusammen mit all unseren Gerichten darunter verschoben werden. Denken Sie daran, klug zu arbeiten, um besser zu sehen, woran wir arbeiten. Ändere die Hintergrundfarbe in etwas wie Grau. Auf diese Weise wissen wir, wo die Tabs beginnen müssen. Die Idee ist, etwas Ähnliches wie Food Panda zu kreieren. Sie könnten Zeit haben, weil es ziemlich viele Schichten gibt. Ich empfehle immer, dass Sie ein- und auszoomen , damit Sie ein besseres Gefühl dafür bekommen, was Sie tun. Mit dieser Änderung wird es nicht mehr möglich sein, fünf komplette Gerichte unterzubringen, aber ich denke, vier sind gut genug. Jetzt können wir mit dem Bauen auf dieser Ebene in der Aktionsleiste beginnen . Wir fügen die Restaurants hinzu, die das Foto abdecken. In diesem Fall ist es ein Bild einer Beta. Ich habe schon etwas vorbereitet. der Tastenkombination können Sie Shift K steuern, oder verwenden Sie den Befehl Bild platzieren unter dem Rechteckwerkzeug. Alles in diesem Bereich muss weiß gemacht werden, einschließlich der Symbole in der Statusleiste. Das wird eine Minute dauern, aber ich habe die Magie der Bearbeitung auf meiner Seite. Okay, jetzt, natürlich können wir den Text nicht lesen, aber lassen Sie uns eine weitere Füllung hinzufügen. Reines Schwarz, natürlich spiel mit der Opazität, vielleicht 40 Prozent, mehr oder weniger, 50 Prozent. Schau, was dir gefällt. Und da hast du es. Fantastisch. Das sieht ganz nett aus. Denken Sie daran, gerade jetzt im Iterationsmodus , nur Versionen herauszuholen Version zu erstellen. Obwohl die Aktionsleiste nicht per se vorhanden ist, benötigen wir trotzdem zwei Ebenen, und das sind der Rückwärtspfeil und der Dipol. Lassen Sie uns jetzt das Infosymbol fallen , da es im Mix verloren geht. Und lassen Sie uns die Bewertungselemente irgendwo in der Mitte dieses Teils verschieben . Das ist nicht zu 100% erforderlich. Aber ich finde, es ist eine nette Geste, oder? Weil das das Schrankfoto des Restaurants ist. Ich denke also, dass es Sinn macht, die Bewertung hier zu haben. Holen Sie sich die Bewertung von einem der zuvor erstellten Bildschirme. Der Schlagschatten muss möglicherweise verstärkt werden, aber das wird keinen großen Unterschied machen. Selbst wenn Sie es zu 50 Prozent machen, der Opazität des Schattens, wird es kaum sichtbar sein. Und denken Sie daran, wir benutzen unseren Computer, wir können ein Telefon vergrößern. Du wirst es nicht bemerken. Vertrau mir, wenn alles gesagt und getan ist. So wird die Variante aussehen. Ich persönlich mag es mehr als die saubere Version, aber es ist alles Geschmackssache. Ich lasse den Kunden gerne entscheiden, dass es wirklich ein Münzwurf ist. Also werde ich beide Versionen in meiner Tasche behalten und wir können zur scrollbaren Dab-Option übergehen. Lassen Sie uns das ursprüngliche Konzept dafür verwenden. Der scrollbare Tab ist also etwas von Google Material Design. Es ist im Grunde eine von zwei festen Optionen, die wir bereits haben. Dann machen wir jetzt den zweiten. Wenn Sie Kopien erstellen, sollten diese alle Seite an Seite sein. Hier besteht der Hauptunterschied darin, dass die Menüelemente auf einer einzigen Textebene platziert und dann nach rechts verschoben werden. Entferne diese beiden und überlege dir fünf oder sechs Lebensmittelkategorien. Ich habe etwas im Knoten schlecht vorbereitet, aber du kannst dir selbst etwas einfallen lassen. Ich werde einfach einfügen. Also hier sind, da gibt es, jetzt gibt es zwei Optionen für scrollbare Tabs. Möglicherweise könnten Sie sich das einfach nur annähern, es ausrichten und einfach alles so ausrichten, wie Sie es für richtig halten. Oder du könntest es mit den offiziellen Messungen machen, was ich tun werde. Zuerst werde ich die Breite des Rechtecks auf ein AD reduzieren , was laut Anleitung das Minimum ist. Also waren es 240. Jetzt wird es 1AD sein. Als nächstes muss dies auf 140 Pixeln vom linken Rand entfernt platziert werden , 10. sich daran zu erinnern, wie das geht, können Sie das X-Feld aus dem Eigenschaftenfenster verwenden. Nochmals, warum E104? Das ist aus den Materialdesign-Richtlinien. Exzellent. Nun, was die Vergangenheit betrifft, meinen ersten Tab, muss dieser horizontal mit dem Rechteck ausgerichtet sein . Aber das ist natürlich ein Problem, da die Ebene viele Menüelemente enthält. In diesem Fall müssen wir uns dem nur annähern. Jetzt könnten wir präzise sein, indem wir auf beiden Seiten ein Rechteck hinzufügen und manuell hin und her gehen. Aber es ist in Ordnung, es im Auge zu behalten. Ich habe viel Erfahrung, also werde ich es gut machen. Wenn Sie fertig sind, ändern Sie bitte die Farbe, die Wolga, die Tabs in ein verwaschenes Grau. Wir müssen zeigen, dass das inaktiv ist. Der Farbcode, für den wir uns entschieden haben, ist 777. Nun gibt es eine Sache , die ich ansprechen möchte. Du bist vielleicht neugierig auf den Hintergrund und warum ich ihn weiß gelassen habe. Wir könnten es mit einer cremefarbenen Farbe versuchen. Wir haben bereits eine Farbe, den Code, aber am Ende habe ich beschlossen, das nicht mit einzubeziehen. Ich habe es außerhalb der Kamera ausprobiert, als ich nicht aufgenommen habe, und es sah nicht richtig aus. Nur damit es keine Geheimnisse gibt. So würde das aussehen. Es ist schlammig, dreckig, geschäftig, weit entfernt von dem AV-Look , den wir kreieren wollen. Jetzt könnten wir möglicherweise einen Hintergrund hinzufügen, den weißen Hintergrund, eine Karte für jedes Gericht. Aber das ist eine andere Sache, die ich nicht getan habe. Die Argumentation ist einfach. Also Nummer eins, es wäre entweder Druckraum. Aber noch wichtiger, dies ist eine Liste, Karten gehören also nicht hierher. Laut dem offiziellen Material Design Guide gehören all diese Artikel zusammen. Deshalb werden wir sie nicht in separate Karten aufteilen. Am Ende des Tages sind dies die Optionen in Bezug auf Bildschirm Nummer drei. Wir müssen eine Schriftart oder ein Farbschema wählen und den letzten Schliff geben. Ich habe keine anderen Ideen, Variationen für dieses Grün. Ich denke, es ist Zeit, weiterzumachen. Wir sehen uns gleich. 24. Die beste Schriftart auswählen: Willkommen zurück. Es ist Zeit, über Topographie zu sprechen, und wir werden auf diesen wenigen Bildschirmen denselben iterativen Prozess verwenden . Wählen Sie also die besten Versionen aus und legen Sie sie nebeneinander, damit wir schnell zwischen ihnen hin und her wechseln können . Wenn du am Ende unentschlossen bist, ist das in Ordnung, aber wähle drei verschiedene Bildschirme, damit wir jede Verbindung in einer Reihe von Situationen untersuchen können . Ich habe meins hier schon getrennt und wir werden an Kopien arbeiten. Wir werden es einfach halten mit einer einzigen Schrift, die mindestens zwei Gewichte hat. Das ist also normal und mutig. Wenn es mehr hat, ist das großartig. Aber ein weiterer Faktor ist die Größe. Wir wollen also, dass die Schrift so klein wie möglich ist. Und ich spreche hier von Kilobytes. Wenn wir uns also über zwei ähnliche Schriften nicht sicher sind, entscheiden wir uns für die kleinere. Also 600 kb gegenüber 200, eindeutig 200. Was wir suchen, ist eine serifenlose Schrift, weil wir Glück haben wollen. Schließlich ist der wichtigste Suchpunkt die Persönlichkeit. Wir wollen also etwas Ähnliches wie das, was geliefert wurde, das abgerundet, interessant und ein bisschen Persönlichkeit hat, das dem Design einen Mehrwert verleiht. Vielleicht kratzen Sie sich deswegen am Kopf. Was bedeutet Persönlichkeit? Nun, sagen wir es mal so. Wenn wir Arial verwenden, werden wir keine Preise gewinnen. In meinem Buch entwickelte ich eine Liebe zu Schriften, die unter dem Radar fliegen. Sie sind sehr einfach, sie erregen in keiner Weise Aufmerksamkeit. Da, das langweilige, langweilige. Und das ist der Grund , warum sie vielseitig sind. Sie können unter allen Umständen verwendet werden. Im Rahmen eines AB-Designs. Wir möchten, dass unser Text ein bisschen hervorsticht. Die Entscheidungen, die wir in Bezug auf die Topographie treffen, könnten also das Design beeinflussen oder unterbrechen. Also habe ich schon Ariel, Leto erwähnt, bestimmte Gewichte von Open Sans Robo obwohl Source Sans Pro und vieles mehr in diese langweilige Kategorie fallen. Lassen Sie uns also Google-Schriften öffnen. Ich deaktiviere Sirup und handschriftlich. Und wir können nach unten gehen. Jetzt suchen wir nach mindestens vier oder fünf Optionen. Das erste, das meine Aufmerksamkeit erregt, ist Montserrat , ein Favorit von mir. Das ist also einer. Der zweite ist Ubunto. Es hat eine Menge Schichten. Das sind also zwei. New Nieto sieht toll aus und ich werde es auch hinzufügen, sagt, es ist ein schlechtes Licht, aber es hat ziemlich viel Gewicht. Das ist also ganz nett. Ich werde es behalten. Jetzt. Treibsand ist ein weiterer , der ziemlich interessant ist und ich liebe ihn. Um es kurz zu halten, werde ich hier aufhören. Aber wenn du das selbst machst, gehe bitte zu mehr Schriften. Dann würde ich nicht drüber gehen, aber mindestens fünf. Während du übst, wirst du anfangen, eine mentale Datenbank mit gut aussehenden Schriften zu entwickeln . Und Sie werden eine viel engere Wortliste für Ihr nächstes Projekt haben . Deshalb habe ich keine Zeit damit verschwendet, herumzuscrollen. Ich wusste bereits, wonach ich suchte. Okay. Laden Sie das entpackte Archiv herunter. Ich zeige Ihnen, wie ich sie schnell nach Größe sortiere, besonders wenn Sie viele ausgewählt haben. also in diesem Ordner Suchen Sie also in diesem Ordner nach dem TDF und Sie werden eine Menge davon bekommen. Und dann können Sie den Anzeigemodus auf Details ändern. Und du wirst die Größe in einer separaten Spalte erhalten. Dann sieht man sofort, dass Ubuntu viel schwerer ist als Treibsand, also werde ich es z.B. noch nicht von meiner Liste streichen. Ich möchte es entfernen, aber es muss absolut fantastisch aussehen , um es als Option zu behalten. Jeder, der Apps entwickelt, möchte eine sehr niedrige App-Größe. Die Dateigröße muss so gering wie möglich sein. Das bringt dir mehr als Stände und es ist großartig. In meiner Firma war das sehr wichtig. Wir würden absolut alles kürzen, auch wenn es 20 kb wären. Gehen wir nun zurück zu Figma und schauen wir uns an, was was ist. Also habe ich diese kopiert. Die Schriften sind installiert. Schauen wir uns Treibsand an. Nun, hier gibt es keine Magie, nur die Magie der Bearbeitung. Sie müssen alle Textebenen auswählen und ändern. Jetzt könnten wir eine erweiterte Funktion verwenden, aber das ist mit Absicht. Ich mache es manuell, weil ich möchte, dass du es auch manuell machst. Im zweiten Teil des Kurses werde ich Ihnen dann zeigen, wie Sie das automatisch tun können. Nun, so fast automatisch wie möglich. Dies ist ein sehr zeitintensiver Prozess, aber Sie müssen geduldig sein, wenn Sie so viele Schichten wechseln. Was ist nun dein erster Eindruck? Schauen Sie genau hin und denken Sie darüber nach. Nun, eine Sache: Wenn du eine Schrift änderst, ruinierst du deine vorherige Ausrichtung. Sie könnten also eine Überlaufaktion haben. Es ist kein Problem, dass einige Pods die Grenzen überschreiten. Wir werden alles noch einmal ausrichten müssen. Aber, äh, ja, das sieht ziemlich solide wenn man bedenkt, dass es ziemlich schnell durchgemacht wird. Jetzt könnten wir mit einer höheren Präzision arbeiten, aber auch hier geht es in diesem Schritt nicht darum. Lassen Sie uns nun mit der nächsten Schrift fortfahren , indem wir weitere Kopien erstellen. Nun Nieto, lass es uns sehen, oder? Bitte beachten Sie, dass es auch eine andere Version namens Nieto Sands gibt. Nun, so sieht es aus. Und mein erster Eindruck ist , dass er Treibsand ziemlich ähnlich ist, aber etwas runder ist. Das sieht man vor allem an der Lieferzeit, aber es ist ein knappes Rennen. Es hängt wirklich von deinem Geschmack ab. Okay, jetzt zoome ich weiter, um alles richtig zu sehen. Denken Sie daran, dass Sie dies alleine und auf der anderen Ebene nach Gesichtern tun müssen , die in Google-Schriften verfügbar sind Es gibt keine Alternative zu harter Arbeit. Versuche so effizient wie möglich zu sein. Sie könnten Fettgedruckte Textebenen auswählen und die Schrift direkt auf diese Stärke ändern. Das bedeutet, dass Sie mit Ihrer Control-Klick-Technik sehr schnell sein müssen. Nun, egal wie du es machst, es ist wichtig, dass du es tust. Außerdem müssen Sie eine gute Anzahl von Textebenen haben. Wenn wir diesen Schritt vielleicht auf dem Standortbildschirm gemacht hätten , als wir gerade angefangen haben, wäre er nicht relevant. Es ist, als würde man die Leute auf der Straße fragen , für wen sie stimmen. Sie sagen Kandidat X, oder? Und dann sagst du, hey, weißt du, eine Studie zeigt, dass 100 Prozent der Menschen, die für Kandidat X stimmen wollten , nur zwei Personen sind. Mach dir nichts vor. Verwenden Sie verschiedene Arten von Texten, Ebenen, Überschriften mit Text x Unterüberschriften, Zahlen, weißen Hintergrund, gemischten Beutel, runden usw. Aber wenn Sie zehn Bildschirme einbeziehen, steigt der Schwierigkeitsgrad natürlich erheblich. Deshalb haben wir nicht alle Screens erstellt und diesen Schritt am Ende belassen. Das ist zwar machbar, aber es ist viel besser, den Stil einer App in einem frühen Stadium zu bestimmen . Und drei Bildschirme sind in meinem Buch ideal. Okay, hier sind sie. Bei allen Schriften, die ich ausgewählt habe, haben Sie diese Datei angehängt und ich schlage vor, dass Sie sie öffnen. Aber Figma könnte dir einige Warnungen geben. Wenn Sie diese Schriftarten nicht haben, erhalten Sie möglicherweise einige Warnungen. Mach dir keine Sorgen. Okay, jede Schrift hat ihre eigenen Stärken. Aber was ich von Anfang an klar sagen kann , ist, dass Ubunto das nicht wert ist. Klar, es sieht nett aus, aber nicht 34 mal so schön wie die anderen. Denken Sie daran, es war in Bezug auf die Größe viel sperriger. Monster AB ist auch wunderschön, aber alles in allem denke ich, dass der neue Nieto am besten aussieht. Es hat viele Gewichte. Es ist ziemlich klein, sodass es die Größe der App nicht in die Höhe treibt. Und es hat diesen besonderen Reiz, der es auszeichnet, besonders wenn Sie es in der schwarzen Variante verwenden. Schwarz bedeutet also einfach mutige Zeiten für etwas Derartiges. In Anbetracht der Zielgruppe denke ich, dass dies eine großartige erste Wahl ist. Falls zu einem späteren Zeitpunkt im AB-Design etwas auftaucht , können wir die Schrift problemlos auf eine dieser Alternativen umstellen die Schrift problemlos auf eine dieser Alternativen und auch einige andere ausprobieren. Aber ja, damit ist diese Vorlesung abgeschlossen. Wir haben große Fortschritte gemacht und ich möchte Ihnen gratulieren, dass Sie bis zu diesem Zeitpunkt bei mir geblieben sind. Ich sehe dich gleich. 25. Den Look unserer App mit Stilen definieren und verfeinern: Willkommen zurück. Es ist Zeit, ein paar Minuten Zeit zu nehmen, damit wir den AP-Stil definieren können. Wir suchen nach Farben, Schriftgrößen, Zeilenhöhe usw. Und wir werden all dies auf den Rest der Bildschirme anwenden . Ich weiß, das mag beängstigend sein, aber wir haben eine lebensrettende Technik, die Stile verwendet. Fangen wir also mit dem einfachsten an, dem Farbschema, oder? Der Prozess läuft so ab. Wir wählen einen Titel, sagen wir San Francisco, oder? Wir haben den Farbwähler geöffnet und spielen mit verschiedenen Nuancen herum. War toll, dass wir die Veränderung in Echtzeit sehen können , oder? Also spielen wir damit herum. Und am Ende entschied ich mich für 212f. Was für neun, das ist ein dunkler Blauton. Das Gleiche gilt für 12 f49. Ich gebe dir die genauen Farbcodes damit du mitmachen kannst, aber ehrlich gesagt, spiel einfach mit dem Farbwähler, bis du zufrieden bist. Nun, das ist fast schwarz, aber es ist ideal für viele Textebenen. Wie wenden wir es nun auf viele Textebenen an? Zuerst müssen wir es als farbigen Stil einrichten. Klicken Sie hier auf diese vier Punkte, direkt neben dem Plus , um sie zu füllen. Es stehen farbige Stile, aber wir haben keine, was völlig in Ordnung ist. Wenn Sie auf dieses Plus klicken, wird ein Pop-up angezeigt, das uns nach dem Namen fragt. Nennen Sie es wie Sie wollen, wie Titel, Farbe, Hauptfarbe, Primärfarbe, was auch immer. Kopf schafft Stil. Um Ihnen die Palette der Farbstile zu zeigen. Hier ist ein kurzes Beispiel. Wählen Sie also den Titel Desert Heaven , der derzeit schwarz ist. Klicke nun auf diese vier Punkte neben Phil und du findest das Blau, das wir gerade hinzugefügt haben. Hier ist es, ein Klick und fertig. Nun, du könntest sagen: Okay Chris, also was wird, hier ist die Sache. Lass uns alles abwählen, oder? Beachten Sie etwas oben rechts Wir haben Farben und Stile genau dort mit einem einzigen Eintrag. Wir können mit der rechten Maustaste darauf klicken und natürlich können wir es löschen, aber wir können es auch bearbeiten. In diesem neuen Bereich möchten wir also die Farbe in den Eigenschaften ändern. Klicken Sie hier, um den Farbwähler zu öffnen und wir können in die Stadt gehen. Ich mache es rot oder grün oder so etwas Verrücktes. Und beachte, wie sich beide Titel ändern. Das ist die Macht der Stile. So ändern Sie schnell und mit nur wenigen Klicks ein ganzes Design. Kunden möchten immer mehr Optionen sehen oder vielleicht haben sie ihre Meinung mit dieser Funktion geändert. Du musst dir keine Sorgen machen. Ich drücke Control Z weil ich diesen blauen Farbton mag. Wenn Sie nun eine Farbe und einen Stil aufteilen möchten, wählen Sie einfach die Textebene aus und verwenden dieses Symbol mit unterbrochener Kette, das dieselbe blaue Farbe beibehält, aber nicht mehr an den Farbstil gebunden ist. Auch hier werde ich Control Z rückgängig machen , weil ich möchte, dass zwei Ebenen keine große Sache sind. Aber stellen Sie sich vor, wir hätten 100 Bildschirme und fast 1.000 Textebenen , da ist der Farbstil ein absolutes Muss. Um fortzufahren, wählen Sie bitte V-Bildschirme aus und verschieben Sie sie separat. Wir müssen die Dinge nur ein bisschen aufräumen. Meine Auswahl ist der Standortbildschirm, der Hauptbildschirm, auf dem der Hauptbildschirm, auf dem die Bewertung am Rand schwebt, oben rechts. Und schließlich The Virgin, wo wir scrollbare Tabs haben, insgesamt drei Bildschirme, und wir können unsere Stile weiterentwickeln. Konzentrieren wir uns auf den zweiten. Der Titel ist also blau in neuem Nieto-Schwarz dargestellt für die Größe, die wir für D wählen könnten . Aber ich denke, 34 ist die bessere Wahl. Das sind also drei für diese Wählweise, die auch auf den Restaurant-Dipol angewendet werden sollte . Aber hier ist die Sache. Wir haben auch Textstile. Anstatt also zu scheitern, werden Sie sehen, dass wir dieselben vier Punkte neben dem Text haben . Klicken Sie und Sie werden Textstile sehen, genau der gleiche Vorgang. Klicken Sie auf das Plus-Symbol, um es hinzuzufügen, ihm einen Namen zu geben, was auch immer Sie wollen. Stellen Sie einfach sicher, dass das Sinn macht wie bei einer großen Flut. Dann können wir es anwenden. Klicken Sie bei gedrückter Ctrl-Taste auf Desert Heaven und klicken Sie auf diesen Eintrag, um ihn zu testen. Lassen Sie uns eine dramatische Veränderung vornehmen. Also werden wir die Auswahl aufheben und dann auf Bearbeiten klicken. Und dann machen wir es 50 Pixel groß oder so etwas Verrücktes. Und ja, es funktioniert wie erwartet. Es entkommt und dann Control Z. Jetzt nehmen wir es von oben. Der Titel ist fertig. Was ist mit all diesen Ikonen? Ich mag diese Orange, also lass es uns ausprobieren. Schnappen Sie sich das Hamburger-Menü und stellen wir es auf das folgende farbige Gold ein. Aber hier ist die Sache. Dieses Symbol befindet sich im Rahmen. Die Details sind nicht wirklich wichtig. Aber hier ist der Sinn. Wenn Sie die Füllung von oben ändern , die derzeit weiß ist, wird sie nicht gut aussehen. Stattdessen müssen wir die Auswahlfarben ändern. Das ist derzeit schwarz. Das müssen wir ändern. Ffd sehe auch Nullen, was ein schönes intensives Orange ist, und füge es dann als Stil hinzu. Mein Plan ist es, es auf all diese anderen Symbole anzuwenden. Das Drop-down-Menü, Filter und Suche. Wählen Sie mit der Strg-Taste die erste Option aus, und fügen Sie dann Shift hinzu, um mehrere Optionen auszuwählen. Und das ist es da, das orange, schöne Zeug. Bitte wenden Sie dieselbe Farbänderung von unten rechts auf die Etiketten an. Wie Sie sehen, mit minimalem Aufwand das Design im Handumdrehen zu ändern. Was ist mit der Uhr? Ich denke, dasselbe Blau ist in Ordnung. Siehst du, hier habe ich es vermasselt. Ich habe den Rahmen ausgewählt und versehentlich die Füllung geändert. Es gibt viel zu besprechen, aber lassen Sie uns die Details im zweiten Teil des Kurses besprechen. Konzentrieren Sie sich vorerst auf das Wesentliche, die Farben der Auswahl. Wenn Sie ein Symbol im Rahmen haben, ist dies vorerst der beste Weg, dies zu tun. Nur als kleine Randnotiz, wir hätten das schon früher tun können, als wir verschiedene Schriften ausprobiert haben. Ich weiß, aber ich wollte, dass du manuell arbeitest. des Spiels ist es als Designer am wichtigsten, an Geschwindigkeit zu gewinnen In dieser Phase des Spiels ist es als Designer am wichtigsten, an Geschwindigkeit zu gewinnen. Okay, zurück zum Thema, was ist mit der Lieferzeit? Nun, das muss in neuen, regulären 24-Zoll-Pixeln von Nieto in einem ziemlich dunklen Grau angezeigt werden. Lass uns mit 777 weitermachen. Wir können sowohl die Farbe als auch den Charakterstil hinzufügen. Ich denke, es ist sehr wahrscheinlich, dass wir es als Haupttext verwenden werden, also als Beschreibung für jedes Gericht. Nennen wir es also Körper. Ich möchte betonen, dass ich mir nicht zu 100% sicher bin. Vielleicht ändere ich meine Meinung. Wir werden sehen, wie wir weitermachen. Aber weil wir Stile haben, können wir das schnell tun. Wir können unsere Meinung schnell ändern. Zum Lesen. Lass uns mit New Need TO 20 gehen, also ziemlich klein. Wir können es grau machen, das ist 777-farbiger Code. Wählen Sie dann den 92-prozentigen Teil aus und machen Sie ihn schwarz. Schwarz in Bezug auf das Gewicht. Was die Farbe angeht, können wir das Emoji ausprobieren, weil wir die Schrift geändert haben Die Ausrichtung ist vielleicht nicht perfekt, aber das ist eine schnelle Tatsache. Nun, vielleicht hast du eine Frage, Chris Wie hast du dich für den 34. Rückstand für die Titel entschieden? Warum nicht 30? Warum nicht 36? Warum nicht würdig? Die Antwort ist einfach. Ich habe sie ausprobiert. Ich habe das Design auf mein Handy hochgeladen. Ich habe mir mein Design für mein Handy angesehen und sie zuerst miteinander verglichen, dann vielen Apps, die ich zuvor analysiert habe. Das schien vorher die beste Wahl zu sein. Das Gleiche gilt für alle anderen. Es ist nicht etwas, das Google Material Design eingerichtet hat, etwas, das ich entschieden habe. Okay, schnell vorspulen, dann ist das unser Ergebnis. So sollte dein Projekt in dieser Phase des Spiels aussehen . Machen wir eine kurze Pause. 26. Deine Geschwindigkeit üben: Willkommen zurück. Wir schauen sie uns an, tun es aber und ich möchte diesen Dummy-Inhalt ersetzen. Hier sind alle Ressourcen, die ich für diesen Bildschirm vorbereitet habe. Zuerst die Fotos, ganz einfach, in der Konsolenschicht schwul. Ich weiß, dass man in einigen anderen Programmen Bilder einfach in Rechtecke ziehen und dort ablegen kann , aber nicht in Figma. Sie haben Spaß damit. Und wenn Sie dann riesige Fotos verwenden, seien Sie etwas geduldiger. einige Sekunden dauern, bis Figma sie verarbeitet. Okay, als nächstes machen wir die Titel eins nach dem anderen, nett und einfach. Als nächstes stehen die Abstimmungen an. Jetzt fragst du dich vielleicht, Chris, warum machst du all diese Dinge? Warum zeigst du es? Auf der einen Seite ist es einfach, es ist eine großartige Übung. Du musst Sport treiben. Sie enden und seien vorbereitet. Faul ist nichts, was mich jemals beschreiben kann. Zweitens ist es wichtig, dass wir dem Kunden und dem Entwickler etwas zeigen , auf das wir stolz sind, etwas, das sich echt anfühlt. Der Aufwand für die Realisierung eines Flugplatzes ist minimal, verbessert aber die Wirkung der App erheblich. Es fühlt sich viel, viel besser an. Nun, stell dir das vor. Du lädst ein paar Gäste ein, ein paar Freunde, oder? Und dann hast du dreckige Socken in der Mitte des Raumes. Alles andere ist nett und sauber, alles eingerichtet. Aber diese dreckigen Socken, Mann, die Ruine, alles. Obwohl es einen so kleinen Teil des gesamten Raums gibt, richten sie Ihre ganze Aufmerksamkeit auf sie. Es ist also keine großartige Sache, hier im Design ist es dasselbe. Gefälschte, sich wiederholende Inhalte zu haben, jede Menge Lorem Ipsum, macht einfach den Zauber kaputt. Deshalb müssen wir es tun. Und nur um das nach Hause zu bringen, verkleinern wir das Foto um 40 Pixel. Also Ctrl, klicken Sie darauf und lassen Sie uns nach ihnen suchen. 360, Lass uns mit den 20 weitermachen. Und für die Karte von 470 verschieben wir sie auf 430. Natürlich ist nichts mehr ausgerichtet, aber wir wissen, dass Shift uns hilft, Dinge in Schritten von zehn Pixeln zu bewegen . . Denken Sie also daran, Wählen Sie also innerhalb des Bedarfs nach Tiefen all diese Typen aus bei gedrückter Ctrl-Taste auf den ersten zu klicken und dann die Umschalttaste gedrückt zu halten, um mehrere Optionen auszuwählen. Und jetzt können wir den Aufwärtspfeil viermal benutzen , während wir die Umschalttaste gedrückt halten. Also, ist diese Größenänderung unbedingt erforderlich? Nein. Aber wie gesagt, ich möchte die harte Arbeit investieren und sehen, ob ich das Design verbessern kann. Und ich denke, es funktioniert. Vorher. Ich war ein bisschen zögerlich, aber jetzt denke ich, dass es gut aussieht. Wenn Sie nun bereit sind, gehen wir zu Bildschirm Nummer drei über. Beginne mit dem Titel, wähle ihn aus und wende den Zeichenstil , der genau dieser Titel heißt. Für den Zurück-Pfeil und das Informationssymbol müssen diese orange sein. Wenn Sie nach unten gehen, müssen die aktiven Tabs orange sein. Sie wissen also, was Sie mit diesem Rechteck machen müssen . Nun zu den Tupfern? Nun, um ehrlich zu sein, ich bin mir nicht sicher. Fangen wir mit dem Titeldesign an. Offensichtlich ist es zu groß, aber wir können es auf 26 Pixel reduzieren, z. B. müssen die inaktiven Tabs wie zuvor anders behandelt werden. Also lass uns das beheben. Jetzt. Wählen Sie alle anderen Elemente aus und legen Sie sie in einer separaten Textebene fest. Ich denke, das ist das Beste. Also benutze einfach Cut and Paste Control X. Okay. Dieser muss also wie zuvor in neonatal 26 eingestellt werden, aber in der regulären Form sollten Sie die Schriftgröße niemals ändern , sollten Sie die Schriftgröße niemals ändern auch wenn sie inaktiv ist. Dies ist keine gute Praxis. Was den aktiven betrifft, sollte dieser orange gemacht werden. Jetzt nochmal, hier ist ein Tipp. Sie wissen vielleicht nicht, wie viel Platz Sie zwischen den Pizzen zum Zeitvertreib lassen sollten. Schließlich wollen wir den Raum zwischen Pizza und Ergebnis freisetzen. Alles klar? Da es sich jedoch um eine einzelne Ebene handelt, können Sie die tatsächliche Entfernung nicht ermitteln. Nun, hier ist die Spitze am Rechteck zwischen diesen beiden und sieh dir die Breite an. Sobald wir diesen Wert im Hinterkopf haben, ist es ganz einfach , diese Ebene ausgewählt ist, die Alt-Taste gedrückt halten und das vorhandene Maß überprüfen. Dann die Feinabstimmung mit den Pfeiltasten und schon kann es losgehen. Okay, lass uns mit den Namen der Gerichte fortfahren. Nun, ich denke, diese sollten die gleichen sein wie die Tabs. Also Nieto schwarz, 26 Pixel, aber dieses Mal in Blau, wir müssen das auf alle Einträge anwenden. Tun Sie also, was Sie tun müssen, um das zu erreichen. Nun, offensichtlich ist der chemische Stil der beste Weg , dies zu tun. Stellen Sie also bitte sicher, dass Sie es sinnvoll nutzen. Ich versuche so schnell wie möglich zu gehen, aber ich möchte, dass du verstehst, was vor sich geht. Für die Beschreibung. Wir werden das Bodystyling verwenden müssen. Nieto ist eine größere Schrift, aber ich möchte die Textzeilen behalten, also ändere die Größe, falls nötig. Aber stell dir vor , wir wenden danach Stile auf absolut alles an, falls wir etwas ändern wollen , egal was es ist, Größe, Schrift, Zeilenhöhe, welche Farbe auch immer. Wir werden es leicht haben, wenn dieser Preis und das Gewicht auf das Design der 26-Titel angewendet und die Position überprüfen. Sie möchten, dass es unten auf das Vorschaubild ausgerichtet ist, obwohl Sie es möglicherweise mit einem Auge betrachten müssen. Diese Schrift hat oben und unten ziemlich viel zusätzlichen Platz. Und du kannst nichts dagegen tun. Wenn Sie darauf klicken, können Sie das Highlight sehen. Es ist ziemlich groß. Jetzt denke ich allerdings, dass der Preis orange angezeigt werden sollte. Ja, in der Tat, das ist meilenweit besser. Schließlich sollte das Add to Cart auch orange sein. Nun, ob Sie es glauben oder nicht, ich denke, wir sind fertig mit diesem Grün. Wenn es etwas gibt, das du drücken möchtest, ist jetzt die Zeit dafür. Ich bin mir nicht sicher, ob das so klobig sein muss. Es ist nicht so wichtig. Lassen Sie uns es also lieber fett als schwarz reduzieren. Die Sache ist absolut fabelhaft und man könnte für fast jede Kleinigkeit einen Eintrag machen. Wie Sie vielleicht bemerkt haben, habe ich jedoch nicht jedes einzelne Styling hinzugefügt , und das ist beabsichtigt. Ich möchte nicht zu viele hinzufügen und mich dann damit verwirren lassen. Es ist Zeit für die Pause. 27. Den ersten Bildschirm beenden: Willkommen zurück. Okay, lass uns zum Standortbildschirm gehen. Lassen Sie uns das von oben betrachten und sicherstellen, dass wir auf derselben Seite sind. Das Symbol muss 18180 sein und reinweiß sein. Dies muss in Pixeln vom oberen Rand entfernt platziert werden. Dies ist eine gute Gelegenheit , das Y-Feld zu verwenden. Denken Sie daran, y ist die vertikale Achse und sie beginnt von oben. X ist die horizontale und sie beginnt von links. Jetzt der Name der App, ist live da. Dann, wenn du es nicht hast und lass es uns stylen. Ich denke, du brauchst komplett schwarz. 70, reinweiß Oh, ich glaube nicht, dass ich Weiß als Stil hinzugefügt habe. Die Sache ist, wenn wir ständig mit der Maus über diese Region fahren, ist es am besten, auch hier Weiß zu haben. Zentriere es nun auf der Leinwand und platziere es etwa zehn Pixel vom Eigon entfernt, mehr oder weniger. Okay, jetzt ist das erledigt. Weiter. Ich denke, man kann mit Sicherheit sagen, dass Orange die Hauptaktionsfarbe sein wird. Wenden wir es also auf diese beiden Schaltflächen an. Denken Sie beim Umgang mit Schaltflächen daran, Sie es am besten für das automatische Layout verwenden und nicht ein Rechteck und die Textebene Dies ist nur die beste Vorgehensweise in Figma. Was ist mit dem Text? Nun, lassen Sie uns das ändern , um Restaurants zu zeigen. Fangen wir mit 26 Titeln an und schauen, was wert ist. Nun, die Größe selbst ist okay, aber sie ist ein bisschen zu groß, also lass es uns fett machen. Das macht einen großen Unterschied. Wenn du es im Video nicht siehst, vertrau mir. Überprüfe es auf deinem Handy und ich denke, du wirst mir zustimmen. Das Problem, das ich hier habe, ist die Hierarchie. Es ist nicht klar. Also lass uns darüber nachdenken. Wir haben drei verfügbare Aktionen. Wir haben einen Ort mit einer Schaltfläche zum Absenden eingegeben Überspringen Sie diesen Schritt und gehen Sie zum nächsten Bildschirm über oder erstellen Sie ein Konto mit dem Anmeldenamen. Im Allgemeinen können die Erstellung eines Kontos oder die Anmeldung als zwei verschiedene Dinge betrachtet werden . Aber ich werde sie kombinieren, um es einfach zu machen. Also, wie sollten wir vorgehen? Es ist zwar in Ordnung, zwei Buttons mit derselben Wichtigkeit zu haben , aber ich denke, es ist am besten, wenn wir ein anderes Design verwenden, um ein Konto zu erstellen. Soweit ich aus dem Brief verstehe, der Registrierungsprozess nicht allzu wichtig. Das heißt, Restaurants anzeigen ist die wichtigste Schaltfläche auf diesem Bildschirm. Lassen Sie uns es daher auf 656 Pixel vergrößern. Wir sollten auch die Höhe auf 90 Pixel ändern, damit sie etwas besser zur Geltung kommt. Nun, das ist eine Menge Bettwäsche, aber es ist keine große Sache. Konzentrieren Sie sich einfach auf das, was wichtig ist , und lassen Sie sich nicht von zu vielen Techniken verzaubern, die Felder müssen mit den Schaltflächen übereinstimmen wo es also 656 Pixel sind, dann ändern sich die Dinge schnell, Denken Sie jedoch daran, so oft zu pausieren , wie Sie den Text eingeben müssen. Dies wird offiziell die Hand genannt. Bitte tragen Sie das Körperstyling auf. Wenn der Benutzer das Feld berührt, verschwindet die Hand. Nun, hier ist die Technik, um ein Feld für das automatische Layout zu erstellen. Wählen Sie zunächst den Text aus und verwenden Shift a, nett und einfach. Dann füge die weiße Füllung hinzu. Nett und einfach. Ändern Sie den Koordinatenradius auf fünf Pixel, damit es etwas besser aussieht. Ich könnte das später auf zehn Pixel ändern, aber im Moment ist es in Ordnung. Oh, übrigens, wir brauchen das GPS-Symbol und du hast etwas an den Kurs angehängt. Ich ziehe es einfach in diesen Rahmen. Wenn Sie das tun, werden Sie feststellen, dass das Standardlayout nicht richtig ist, weil der Text nicht zentriert ist. Das ist aber nicht das Problem. Deaktivieren Sie das Symbol und klicken Sie auf den Rahmen. Bewege deinen Blick auf die rechte Seite. Das ist das Problem. Wir müssen die Ausrichtung ändern und los geht's. Okay, wir wollen, dass es 656 Pixel breit ist, also passt es zu allem. Beachten Sie jedoch, dass Breite und Höhe ausgegraut sind. Und das liegt an diesen Einstellungen, diese verärgerten, umwerfenden Inhalte. Und das bedeutet, dass die Form je nach dem, was darin enthalten ist, wächst. Weil wir wissen, dass wir eine bestimmte Größe brauchen. Lassen Sie uns das von Umarmung auf feste Breite ändern. Jetzt können wir 656 eingeben und das ist großartig. Die Höhe ist immer noch nicht verfügbar, aber jetzt wissen Sie, wie Sie sie wieder an die Stelle ändern können, an der wir das Suchsymbol nach rechts verschieben müssen . Es zu ziehen wird nicht funktionieren. Und das liegt daran, dass wir eine Einstellung ändern müssen. Klicken Sie auf diese drei Punkte und Sie erhalten ein neues Panel. Hier. Wir wollen den Abstandsmodus von Pakt ändern, was nahe beieinander bedeutet. Wir wollen einen Optionsraum dazwischen schaffen. Und einfach so fallen sie auseinander. Falls dir die Polsterung auf beiden Seiten nicht gefällt, kannst du sie von hier aus wechseln. Ich denke, das ist eine gute Wahl. Übrigens, wenn du nicht verstehst, was ich gerade mit Umarmungen gemacht habe, ist das in Ordnung. Sie müssen kein Autolayout verwenden. Du musst die Dinge nicht komplizieren. Aber zu diesem Zeitpunkt dachte ich, es wäre schön, einen Blick darauf zu werfen, wie das funktioniert. Oh, übrigens, bitte machen Sie das GPS-Symbol orange, weil Sie darauf tippen können Sie können darauf klicken, damit Ihre IP-Adresse automatisch abgerufen wird. Okay, lassen Sie uns nun denken, dass dies der wichtigste Teil auf diesem Bildschirm ist. Was kommt als Nächstes? Und das Ding, ein Konto erstellen, steht an zweiter Stelle. Jetzt könnten wir ihm auch einen orangefarbenen Knopf geben, aber es würde mit Showrestaurants konkurrieren. Ich denke, es ist am besten, wenn wir es am unteren Bildschirmrand verschieben. Aber lassen Sie uns zuerst diesen Schritt für das Styling überspringen . Lass uns das machen. Erhöhen Sie die Höhe auf 100 Pixel, damit sie nicht übersehen wird. Das ist nicht gerade riesig, aber es ist etwas größer als der Hauptaufruf. Machen Sie es rein schwarz, aber reduzieren Sie die Opazität auf 60 Prozent. keine Grenzen gesetzt, die Idee ist, ihm großzügig Platz zu geben, ohne ihn jedoch zu sehr hervorzuheben. Deshalb habe ich mich für Schwarz entschieden. Stellen Sie sicher, dass es sich über die gesamte Breite des Bildschirms erstreckt. Das bedeutet also 720 Pixel. Richten Sie es richtig aus. Und du solltest jetzt sehen , was ich versuche zu tun. Wenn du fertig bist, ändere den Text, um ein Konto zu erstellen, oder melde dich mit einem großen C an. Die kleinen Dinge am Ende des Tages wirklich wichtig. Insgesamt ist dies ein gutes Design für die Aktion im zweiten Jahr. Könnten wir hier auch Autolayout verwenden? Klar, das kannst du natürlich alleine machen. Schauen wir uns nun bei einem kurzen Greg unser Design genauer an. Danke. 28. Ein neuer Stil der Taste, der einen tollen Fluss hat: Willkommen zurück. Wir haben noch einen Hauptartikel übrig. Überspringen Sie diesen Schritt. Ich werde etwas Neues verwenden, etwas, das Ghost Button genannt wird. Beginnen Sie also mit einer automatischen Layout-Shift, aber anstatt eine Füllung hinzuzufügen, wie wir es immer getan haben, fügen wir stattdessen den Rand hinzu, sodass keine Füllung nur die Tafel, die weiße ziemlich dick ist. Ich denke an drei Pixel. Du solltest dich immer von Ein-Pixelstrichen fernhalten. Sie sehen super verschwommen und von geringer Qualität aus. Das ist also ein Ghost Button und er heißt so, weil er keinen Körper, keine Füllung, keinen Körper hat . Deshalb ist es ein Geist, oder? Jetzt. Achte übrigens darauf, dass du richtig buchstabierst und den ersten Buchstaben groß schreibst. Stellen Sie natürlich sicher, dass alles zentriert ist. Aber hier ist die Sache. Sie ausgewählt haben, ist möglicherweise nicht genügend Kontrast Je nachdem, was Sie ausgewählt haben, ist möglicherweise nicht genügend Kontrast zum Hintergrundbild vorhanden. Sollten wir ein Farb-Overlay haben, aber das reicht vielleicht nicht aus. Und wenn Sie keine Füllung haben, ist es ziemlich schwierig, diese Schaltflächen auszuwählen. Also hier ist, was ich vorschlage Aktiviere die Füllung und mache sie rein schwarz, aber senke dann die Opazität auf etwa 30%. Ich denke, das wird uns sehr helfen, sowohl beim Kontrast als auch bei der Breite, wenn Sie diese Taste auswählen. Lassen Sie uns nun die Dinge analysieren. Das Logo befindet sich oben. Sie werfen einen Blick darauf und bewegen sich genau in der Mitte nach unten. Sie haben diesen Hauptbereich, in den Sie Ihre Adresse, Ihren Standort eingeben müssen. Fantastisch. Es ist groß, es ist hell, es fällt auf. Die Frage ist nun, könnten wir zusätzliche Details hinzufügen? Und ich denke, wir könnten ein Symbol in die orangefarbene Schaltfläche einfügen . Aber hier ist, was ich stattdessen vorschlage, einen Blutungseffekt. Wählen Sie also das orangefarbene Rechteck aus und aktivieren einen Schlagschatten, falls Sie einen Rand deaktiviert haben. Für die Farbe. Wir wollen kein Schwarz. Stattdessen entscheiden wir uns für die Orange. Für die Einstellungen. Ich habe diesen Effekt oft verwendet. Und hier ist, was am besten funktioniert. Fünf für das Y-Feld, fünf für B. Und schließlich eine Opazität, die auf 30% eingestellt ist. Du könntest mehr gebrauchen. Denken Sie daran, die Ansicht zu vergrößern und zu verkleinern. In. Sobald Sie die Taste abgewählt haben, werden Sie sehen, was ich mit Blutungseffekt meine. Es sticht ziemlich hervor. Es ist, als würde es leuchten und es ist ein zusätzliches Detail, das einigen Kunden gefallen könnte. Jetzt schauen wir mal, was noch. Oh, der Koordinatenradius, natürlich fünf Pixel wie zuvor, vielleicht möchten Sie einen größeren Wert wie zehn oder 15 ausprobieren . Die Sache ist, mir gefällt die Position, diesen Schritt zu überspringen, nicht. Es schwebt einfach herum. Wir könnten es näher bringen, aber ich möchte lieber keine versehentlichen Klicks darauf bekommen . Also lass uns das machen. Holen Sie sich das Textwerkzeug und richtig, oder in neuem Nieto Bold 26 Pixel, natürlich in reinem Weiß. Jetzt horizontal zentriert und vielleicht 50 Pixel von der orangefarbenen Schaltfläche entfernt bewegen . Nun, hier ist das, was wir wollen Symmetrie ist etwas, das Sie immer anstreben sollten. Wenn wir also 50 Pixel oben haben, brauchen wir 50 Pixel dazwischen. Überspringe diesen Schritt und diesen Artikel hier. Halten Sie Alt gedrückt und messen Sie die Dinge ab. Verwenden Sie dann bei Bedarf die Pfeiltasten auf Ihrer Tastatur. Okay, großartig, aber das ist noch nicht das Ende. Bringen Sie die Zeile zu allen Hotkey L und lassen Sie uns rechnen. Wir wissen, dass diese Typen 656 Pixel breit sind. Und wir wollen dort spalten, aber ohne das Wort zu sagen, das ergibt keinen Sinn. Also ich denke, 50 Pixel reichen dafür aus. Also lass uns das machen. 656 -50, das ist 606/2, das ist 303. Okay. Lassen Sie uns eine Linie herausziehen und ihre Größe ändern. Verwenden Sie das Eigenschaftenfenster für die Tiefe und halten Sie beim Hinzufügen der Linie die Umschalttaste gedrückt, damit das reine Weiß perfekt gerade wird. Linien. Ich habe keine Füllungen, also suche nicht danach. Ändern Sie stattdessen die Dicke von hier auf Dekubitus. Okay, jetzt duplizieren wir es und legen es auf die andere Seite. Es sollte ziemlich einfach auszurichten sein. Sie haben diesen orangefarbenen Knopf oben, also benutzen Sie ihn bitte. Wenn du bereit bist, zentriere rot mit dem Wort und gruppiere es vielleicht , obwohl das optional ist Control G. Und ich finde wirklich, dass das toll aussieht. Es ist interessant und hilft dem Benutzer tatsächlich , durch seine Optionen zu navigieren. Lass uns eine Pause machen und danach werden wir einen kompletten Überblick geben. Ich danke dir vielmals. 29. Projektübersicht bis zu diesem Punkt: Willkommen zurück und herzlichen Glückwunsch, Sie haben gerade den ersten Teil über die App für die Lieferung von Lebensmitteln abgeschlossen . Ich weiß, es war eine ziemliche Reise, aber ich hoffe, du hast diesen Punkt mit minimalem Nägelkauen, Fluchen und Kopfkratzen erreicht diesen Punkt mit minimalem Nägelkauen, Fluchen und Kopfkratzen Der Prozess ist am Anfang etwas schwierig, sehr ähnlich einem 1.000-teiligen Puzzle. Aber während Sie sich bemühten, Schritt für Schritt Fortschritte zu erzielen, wird das gesamte Bild zu einem übergeordneten Element und Sie können an Geschwindigkeit gewinnen. Ich kann den Wert der Patienten und das Engagement nicht genug betonen . Diese Liefer-App ist ein Projekt aus der realen Welt, auf das Sie bei Ihrer Arbeit stoßen könnten. Sei es in einer Designagentur oder auf einer beliebigen Freelancing-Plattform. Das ist nicht meine Prahlerei, aber die meisten entworfenen Tutorials zeigen Ihnen keinen Rückfall. Es sind einfach schöne Fotos und das war's. Es steckt kein Gedanke an Funktionalität dahinter. Und das ist, als würde man Fahrrad fahren lernen , wenn die Welt voller Monster Trucks ist. Während du also lernst, mag es schwierig sein, ich bin fest davon überzeugt, dass der Kampf umso einfacher ist, je schwieriger das Training ist. heißt, wenn Sie den Job bekommen, können Sie wirklich glänzen. Und deshalb ist dieser Kurs so wie er ist. Jetzt haben wir noch einen langen Weg vor uns. Aber schauen Sie, wo fangen wir bei einem einfachen Wireframe an als beim Layout? Dann einige Designexperimente, wir wählten eine Schrift als ein Farbschema. Und wir lösen die eigentlichen Probleme , indem wir versuchen, so viele Restaurants und so viele Gerichte wie möglich auf einem einzigen Bildschirm so viele Gerichte wie möglich auf einem einzigen Bildschirm unterzubringen, ohne dass es überfüllt aussieht, ohne zu viel zu scrollen. Wir haben über das Seitenverhältnis gesprochen, das richtige Seitenverhältnis für diese Fotos, die Befehlskette, auch bekannt als die Kinoleinwand auf hoher Ebene. Wir verwenden Karten, Symbole, verschiedene Topographietechniken und haben gelernt, wie man das Asset-Panel benutzt. Also noch einmal, von ganzem Herzen, herzlichen Glückwunsch, dass Sie es so weit geschafft haben. Bleib bei mir und du wirst es noch besser machen. Das erste Grün war jedoch wahrscheinlich das schwierigste. Und das liegt daran, dass Sie Ihren Standort in das Feld eingeben können , aber Sie können auch das GPS Ihres Telefons verwenden und Ihre Adresse wird automatisch eingegeben. Sie können diesen Schritt auch überspringen. Und dann zeigt dir die App ein Restaurant aus der größten Stadt. Jetzt sind all diese Informationen in der Kurzfassung, und ich hoffe, dass Sie sie lesen. Schließlich können Sie sich registrieren oder anmelden. Die ganze Sache ist also, zu wissen, wie man diese vier verschiedenen Aktionen strukturiert , ist kein Witz. Wir haben sie nach ihrer Bedeutung sortiert und entsprechend Designentscheidungen getroffen. Deshalb verwenden wir z. B. den Ghost-Button. Deshalb haben wir die Opazität dieses Rechtecks verringert. Okay, insgesamt fantastische Arbeit. Und noch einmal herzlichen Glückwunsch , dass Sie hier angekommen sind. Wenn du das Ganze beenden willst, musst du es weiter ansehen. Vielen Dank. Hier meldet sich Chris für den Moment ab. Danke. 30. Anmelde- und register erstellen: Willkommen zurück. Beginnen wir mit einer Kopie des Startbildschirms, halten Sie die Alt-Taste gedrückt und ziehen Sie eine Kopie darunter. Dies werden wir verwenden, um die Anmelde- und Registrierungsfelder anzuzeigen . Im Grunde zeigen wir, was passiert, wenn Sie auf diese Schaltfläche am unteren Bildschirmrand klicken . Lassen Sie uns nun ein paar Dinge löschen oder diesen Schritt überspringen und dann ein Konto erstellen, Auswahl aufheben und auf der rechten Seite nachschauen , um alle bisherigen Styles zu sehen. Das sollten Sie also auch auf Ihrer Seite haben. Die Textilien sind jedoch nicht in Stein gemeißelt. Du könntest mehr haben, du könntest weniger haben. Okay, nun, ziehe das Feld und die Schaltfläche etwas weiter unten damit ein bisschen Raumanmeldung und Registrierung mithilfe von Tabs angezeigt werden können. Nehmen Sie also den Hotkey L des Linientools und ziehen Sie einen heraus. dem sechsten suchen, fünf-Sechs in Bezug auf das Internet, verwenden Sie dafür die obere rechte Seite. Das sind also 656, reines Weiß mit einer Dicke von zwei. Denken Sie daran, die Umschalttaste gedrückt zu halten, wenn Sie die Linie nach unten ziehen , wenn Sie möchten , dass sie perfekt gerade ist. Nun, oberhalb dieser Zeile, schreiben wir ein Register. Wir haben mehrere Stile, aber lassen Sie uns diesen Teil manuell erledigen. Dies sollte in der neuen Nieto Bold und ihrem Tag angezeigt werden. Das ist etwas , auf das wir in unserem Projekt ziemlich oft gestoßen sind. Okay, klicken Sie auf diese drei Punkte , um viele weitere Optionen zu erhalten. Jetzt möchte ich, dass alle meine Buchstaben in Großbuchstaben geschrieben werden, und das ist diese Option hier. Der Grund für diese Wahl ist ein ziemlich einfacher Blickwinkel, und das liegt an der Hierarchie. Dies hilft den Benutzern nun, zum Bildschirm zu navigieren , dazu etwas später mehr. Dies muss 20 Pixel von der Linie entfernt sein, mehr oder weniger. Natürlich benötigen wir einen weiteren Tab , der Login heißt. Schreiben Sie das bitte wie zuvor ein, machen Sie eine Kopie und ersetzen Sie Dinge. Um die Dinge intuitiv zu halten, werden wir das Gewicht von fett auf normal reduzieren. Jetzt könnten wir möglicherweise ein sehr helles Grau verwenden, wie ddd, um zu zeigen, dass dies nicht der aktive Tab ist, aber tatsächlich habe ich eine bessere Lösung. Nehmen Sie also die vorhandene Zeile von diesem Bildschirm und duplizieren Sie sie, Control D. Dann machen wir daraus ein Vier-Pixel-Deck, was der Standard gemäß Google Material Design ist . Nun zur Farbe werde ich Folgendes verwenden. Das sind f, d, d, d, z, diese sieben, was ein Gelbton ist, eigentlich Gold, was mir gefällt. Nun, das fällt auf, aber in der richtigen Menge ist es nicht Neon, aber es ist völlig in Ordnung. Okay, endlich können wir die Größe ändern, indem wir im W-Feld etwas Mathematik verwenden. Fügen Sie einfach einen Schrägstrich am Ende hinzu und drücken Sie dann die Eingabetaste. Und das wird uns 328 Pixel geben, das sind 328. Und mit diesem Element können wir jetzt die Dipole ausrichten. Erinnerst du dich, wie das gemacht wurde? Wählen Sie Register mit dem gelben Balken und der horizontalen Linie aus, dieses hier. Verschieben Sie dann den Login irgendwo in der Mitte des verbleibenden weißen Balkens, etwa so. Vielleicht möchten Sie für das nächste Bit die Ansicht vergrößern . Okay, nimm den aktiven Balken mit dem weißen, also wähle zwei Dinge aus und richte sie dann wieder rechts aus. Jetzt können wir Login zusammen mit dem gelben Balken auswählen. Im Grunde nehmen wir uns also ständig zwei Gegenstände gleichzeitig und stimmen sie ab. Spülen und wiederholen, auch an diese Leute geschickt. Wählen Sie abschließend beide Balken und verschieben Sie sie wieder an ihren Platz. Verschieben Sie das goldene Ding an seiner ursprünglichen Stelle nach links. Und im Grunde ist das das DAB-System wir ziemlich viel Platz für die anderen Felder benötigen unter dem wir ziemlich viel Platz für die anderen Felder benötigen. Platzieren Sie das also etwa 60 bis 70 Pixel vom Logo entfernt. Wir werden E-Mail, Passwort, Telefonnummer, Stadt usw. haben . Also werden wir so viel Platz brauchen, wie wir kriegen können. Und hier werden wir Komponenten benötigen. Jeder sich wiederholende Inhalt, z. B. ein Feld, sollte aus einem einfachen Grund in eine Komponente umgewandelt werden. Stellen Sie sich nun vor, wir haben 50 oder 100 Felder in diesem Projekt. Und dann entscheiden wir: Hey, weißt du was, vielleicht brauchen wir noch einen Blick, vielleicht einen anderen Koordinatenradius, ein anderes Styling. Was dann 100 Felder. Stell dir das vor. Nun, wie gesagt, wir könnten sie möglicherweise Bildschirm für Bildschirm manuell aktualisieren , aber ich verwende eine Komponente, die viel, viel intelligenter ist. In der Regel finden Sie Komponenten nun oben links, wenn Sie auf Assets klicken. Jetzt haben wir gerade keine, aber wir werden in einer Minute dazu kommen. Immer noch hier können wir unsere Seitenzahl sehen, das ist Nummer eins. Jetzt werden Komponenten im Allgemeinen auf einer anderen Seite gespeichert. Und warum ist das so? Weil es am besten ist, all Ihre Vermögenswerte separat zu sehen. Aber weil ich möchte, dass du das so einfach wie möglich befolgst, machen wir das, nehmen das Frame-Werkzeug, Hockey F, und ziehen eines hier auf der linken Seite heraus . Keine bestimmte Größe im Hinterkopf, nur eine zufällige. Wechselt dann, füllt sich von reinem Weiß auf vielleicht ein sehr helles Grau. Das liegt daran, dass die Felder sehr wahrscheinlich weiß sein werden. Und wir werden Weiß auf Weiß haben, also brauchen wir einen ordentlichen Kontrast. Daher der hellgraue Hintergrund. Jetzt können Sie diesen Frame umbenennen und um Rest oder Ressourcen, Ressourcen rahmen, was auch immer Sie wollen, nur damit er etwas hervorsticht und wir ihn identifizieren können. Schließlich können wir hier den ersten Artikel hinzufügen, das Logo. Wählen Sie beide Ebenen aus und verschieben Sie sie in diesen neuen Frame, den Resources-Frame. Dann sieh dir die Spitze des Stigmas in der Mitte dieses Balkens an. Dies ist das Symbol für die Suche nach der Komponente Create. Und Sie können erkennen, dass es sich um eine Komponente indem Sie im Ebenenbedienfeld nachschauen. Dies ist das Symbol für die Master-Komponente. Ein massives Bauteil bedeutet einfach das Original. Und weil wir das Original gut und sicher aufbewahren wollen , haben wir es hier in den Ressourcenrahmen verschoben. Natürlich benötigen wir das Logo auf diesen Bildschirmen. Ziehen Sie also eine Kopie mit allen heraus, um sie wie folgt zu ziehen. Nun wird dieser Klon, diese Kopie , eine Instanz genannt. Und wieder können Sie es sich als eine Kopie der Originalkomponente vorstellen . Beachten Sie dieses Symbol im Ebenenbedienfeld. Das ist ein bisschen anders. Dieser hier ist leeres Meer. Wenn wir jedoch auf die Originalkomponente klicken, die Masse der gefüllten Komponente, ist dies ein anderes Symbol. Falls dieser Ressourcenrahmen zu weit entfernt ist, können Sie dies jederzeit tun. Wechseln Sie zur Registerkarte „Assets“. Von hier aus haben Sie lokale Komponenten. Und dann unter dem Namen des Rahmens, das sind in meinem Fall Ressourcen. Von hier aus können Sie einfach eine Kopie herausziehen. Kein anderer Hotkey, einfach klicken und ziehen. Denken Sie immer daran, ihnen das Logo zu schicken. Dann können wir das Y-Feld verwenden, den Ort 80 Pixel vom oberen Bildschirmrand entfernt. Das ist aber richtig. Und im Grunde verwenden wir jetzt Komponenten. Jetzt fragst du dich vielleicht warum, Chris, warum sollten wir das tun? Weil wir vielleicht unsere Meinung ändern und das Logo z. B. gelb machen , oder? Oh, eigentlich glaube ich, dass wir diese Farbe nicht zu den Farbstilen hinzugefügt haben. Also lass uns das regeln. Das ist keine große Sache. Wählen Sie die aktive Registerkarte aus, verwenden Sie diese für Türen, um die Farbe des Stilmenüs zu öffnen , und fügen Sie dann diesen Eintrag hinzu, nennen Sie ihn Highlight oder was auch immer Sie wollen, Gold, Gelb, wo auch immer. Und dann können wir zurück zu Komponente hinzufügen gehen. Wie gesagt, es ist sehr nützlich, weil wir viele Instanzen, auch Kopien genannt, ändern können, indem wir mit der ursprünglichen Master-Komponente spielen. Einfach so, ändert die Farbe und alles wird aktualisiert. Aber offensichtlich brauchten wir Wide. Lass uns das mit Control Z rückgängig machen. Jetzt könntest du natürlich mit dem Text darunter spielen, vielleicht das Gewicht, die Ausrichtung, den Abstand, sogar die Schrift selbst ändern . Das ist also die Macht der Komponenten. Wir werden sie ziemlich oft benutzen. Also mach dir keine Sorgen, wenn du nicht 100 Prozent willst, hol es dir. Lassen Sie uns vorerst weitermachen. 31. Komponenten verwenden – Schritt-für-Schritt-Anleitung: Willkommen zurück. Wir müssen ziemlich viele Felder für dieses Anmeldeformular hinzufügen . Verschieben Sie nun zunächst die vorhandene Datei in den Resources-Frame. Wechseln wir auch zum Ebenenfenster, damit wir sehen können, woran wir gerade arbeiten. Das ist also ein automatisches Layout. Wir haben 20 Pixel auf beiden Seiten in Bezug die Polsterung und 15 oben und unten. Es hat eine feste Breite und die Höhe ist so eingestellt, dass sie dem Inhalt entspricht. Okay, das ist unser Ausgangspunkt. Zuallererst benötigen wir die Beschriftung der meisten Felder, keine Beschriftungen, damit Sie wissen, was sie sind. Geben Sie Ihren Standort ein, um einen Hinweis zu erhalten. Es ist etwas, das dir beim Format helfen soll, aber es ist nicht das eigentliche Etikett. Also schnappen Sie sich das Textwerkzeug, Hotkey D, und lassen Sie uns diese Bezeichnung hinzufügen. Nun zum Styling, das wird auf einem dunklen Hintergrund platziert. Also lass uns das machen. Neu Nieto, aber 30 in reinem Weiß. Und die meisten dieser Felder werden verpflichtend sein. Also sage ich, dass wir dieses um acht verschobene Symbol auf Ihrer Tastatur hinzufügen . Dies ist ein Stern oder ein Sternchen, wie es offiziell genannt wird. Und das sagt dem Benutzer, dass dieses Feld obligatorisch ist. Er muss es ausfüllen. Um es hervorzuheben, verwenden wir nun unsere Akzentfarbe, auch bekannt als unsere Highlight-Farbe, und das ist in diesem Fall Gelb. Bitte beachten Sie, dass ich nur den Stern ausgewählt habe, nicht die gesamte Ebene. Also so werde ich dieses Zeug in Farbqualität auftragen. Jetzt muss das Etikett links mit dem Feld ausgerichtet sein. Aber um alles zu behalten, wählen wir alles aus und drücken Shift a. Also haben wir ein weiteres hinzugefügt, das Autolayout. Dies hilft uns, die Beschriftung links ausgerichtet zu halten, aber wir können den Abstand zwischen dem Etikett und dem Feld auch schnell ändern , indem wir diesen Teil hier verwenden. Fantastisch. Lass uns jetzt erstmal mit ihnen gehen. Das wird ein Lebensretter sein, falls wir jemals unsere Meinung ändern, denken Sie an 2050, 100 Felder, das wird uns wirklich helfen. Lass uns jetzt weitermachen. Dieses GPS-Symbol könnte durch etwas anderes ersetzt werden, oder? Also hier ist, was ich vorschlage. Zuerst müssen wir diese beiden Möglichkeiten wählen. Die Schnelltaste besteht darin, die Strg-Taste gedrückt zu halten, sich darüber zu bewegen und darauf zu klicken. Überprüfe das Ebenen-Panel. Wir haben so tief wie möglich oder weniger nach unten gedrillt. Deaktivieren Sie einfach die Auswahl und machen Sie das. Doppelklicken Sie einmal und dann erneut. Und jetzt haben wir unser GPS, Saigon Dragon, von diesem VL entfernt weil die Wahrscheinlichkeit groß ist , dass wir es oft benutzen. Und wir könnten es durch ein gefülltes Symbol oder etwas anderes ändern , ein mehrfarbiges Symbol. Nun, da es getrennt ist, lassen Sie uns es wie gewohnt in eine Komponente umwandeln , indem Sie hier klicken. Tolles Zeug. Jetzt ziehe ich eine Instanz in diesem Autolayout in das Feld. Und warum? Denn als Nächstes werden wir das Ganze, das gesamte Feld, in eine Komponente verwandeln . Einfach so. Keine Sorge, wenn Sie es jetzt nicht verstehen, vertrauen Sie mir einfach, lassen Sie uns weitermachen. Moment haben wir also insgesamt drei Komponenten. Wir haben das Logo, das GPS und dieses Feld. Jetzt ist es an der Zeit, eine Instanz in diesen ersten Bildschirm über der Anzeige von Restaurants zu ziehen , aber wir benötigen das Label dort nicht. Was werden wir tun? Also im Anmeldeformular? Sicher. Wir brauchen ein Etikett, aber nicht oben. Das ist es also, was wir tun. Lass uns kontrollieren. Klicken Sie auf das Etikett. Konzentrieren Sie sich genau hier auf die rechte Seite des Bildschirms in der Mitte , wo Ebene steht. Beachten Sie, dass wir hier ein Symbol haben. Es heißt create Boolean property. Boolean bedeutet einfach, dass es eine Ja- oder Nein-Wahl ist, wahr oder falsch, aber eins oder z, binär. Klicken Sie darauf und Sie erhalten dieses neue Fenster. Der Standardwert sollte wahr sein. Und genau das klingt der Name show labeled genau richtig. Immobilien erstellen und nun, nichts scheint passiert zu sein. Wir sehen dieses lila Highlight hier. Und wenn wir die Auswahl aufheben, klicken Sie auf die Komponente im Startwert, diesen Eigenschaftenbereich, und zeigen Sie erneut die Bezeichnung an. Aber was macht es? Nun, lass es mich dir zeigen. Jetzt sollten Sie diese Option genau hier sehen, beschriftet anzeigen. Und natürlich können wir es umschalten und es geht weg oder es kommt zurück. Dies ist eine boolesche Eigenschaft. Wir haben Figma gesagt, dass wir das Label kontrollieren wollen , ob es auftaucht oder nicht. Beachten Sie jedoch, dass Sie diesen Schalter nicht haben, wenn Sie auf die Originalkomponente klicken . Und das ist normal. Der Schalter wird nur in Instanzen in Köln angezeigt , in Kopien. Die massive Komponente hat es nicht. Dieser hier. Schließlich könnten Sie enttäuscht sein, dass dieses Feld angezeigt wird, wenn das Etikett ausgeblendet ist. Schließlich wollen wir 20 Pixel zwischen dem Feld und der Schaltfläche, oder? Nun, lass uns das machen. Wählen Sie die Option Kopieren aus und verschieben Sie sie dann hierher, zwei Einschränkungen. Hier ist die Standardeinstellung auf links und oben gesetzt. Wir wollen, dass es links und unten steht. Um das zu ändern, klicken Sie einfach hier. So einfach ist das. Und jetzt kannst du verstecken, dass das Etikett erhalten bleibt, aber bitte sieh dir diesen Vortrag noch einmal an. Und wenn Sie bereit sind, können wir mit dem Symbol und den Registrierungsfeldern fortfahren . Ich danke dir vielmals. Und denken Sie daran, dass der Schalter nur in der Kopie angezeigt wird, nicht in der ursprünglichen Masterkomponente. Okay. Viel Glück damit. 32. instance verwenden, um Icons schnell zu ändern: Willkommen zurück. Ich hoffe, du schaffst es, hierher zu kommen. Jetzt benötigen wir viele Felder für dieses Formular, aber wir haben hier dieses Symbol , das wir eigentlich nicht benötigen. Wir haben natürlich die boolesche Texteigenschaft für die Texte gesehen, aber lassen Sie uns sie auch hier anwenden. in der Hauptkomponente Wählen Sie in der Hauptkomponente bitte das GPS-Symbol aus. Beachten Sie, dass dies eine Kopie ist. Das Original ist darüber. Den werden wir nicht anfassen. Okay, konzentriere dich noch einmal auf die Ebene. Das ist es, wonach wir suchen. Wenden Sie die boolesche Eigenschaft an. Warum steht dort nicht Create? Weil wir schon einen für das Label haben , aber keine Sorge. Wir werden hier klicken, um ein neues zu erstellen. Nennen Sie es Show-Symbol, obwohl der Name wirklich keine Rolle spielt. Was die Standardeinstellung betrifft, werden wir sie auf falsch ändern. Und das liegt daran, dass die meisten Felder kein Symbol haben werden. Gehen wir zurück, um sie mit einem zu überprüfen und es uns anzusehen. Da, keine Ikone. Und mit ziemlich guter Ankündigung gibt es ein kleines Problem und ich möchte keine Zeit damit verschwenden. In der Hauptkomponente ist der Hinweis jetzt zentriert und das ist nicht gut. Also hier ist was. Jetzt müssen wir Folgendes ändern. Wählen Sie das Auto-Layout-Gehirn für das Feld aus, dieses hier, und ändern Sie die Einstellung auf Pack. Dies wirkt sich natürlich auf den Bildschirm aus, aber bei dem, der von Bildschirm Nummer eins kopiert wird, befindet sich das GPS-Symbol zu nahe an der Hand. Das ist also nicht gut. Hier. Ich bin zu schnell gegangen und habe das Instanzfeld ausgewählt. Beachten Sie das Ebenenfenster, das ist ein Fehler. Ich kann es immer noch in Leerzeichen dazwischen ändern, aber es ist nicht das, was wir wollen. Verwenden Sie also Control Z und wählen Sie das Autolayout innerhalb der Instanz aus. Das wollen wir. Okay, jetzt ist es Zeit, viele Felder hinzuzufügen. Ziehen Sie also den ersten und zentrieren Sie ihn horizontal, etwa 40 Pixel vom gelben Balken entfernt, mehr oder weniger. Natürlich. Das erste Feld sollte FullName heißen. Ersetzen Sie das Etikett. Und ich denke, wir müssen dasselbe für die Hand tun. Darin können John Doe oder Christian stehen. Wann immer du willst, hast du einen Namen , was auch immer, drücke Escape und mit ihnen werden wir ziemlich viele Felder haben, und dieses muss nicht so breit sein. Also hier ist, was ich vorschlage. Wie die Instanz, diese hier, sollte sie so eingestellt sein, dass sie genau hier repariert wird. Also geben wir Zugriff auf das Internet, teilen dies durch zwei, indem wir in diesem Feld einen Schrägstrich hinzufügen, und das ist die 28. Nun, die Sache ist, dass wir auch einen leeren Raum zwischen den Feldern brauchen . Also lass uns 20 entfernen. Also das ist der, OH, jetzt könntest du -20 in das Feld hinzufügen oder einfach 308 eingeben. Nun, Sie werden überrascht sein zu sehen, dass sich dieses Feld nicht ändert. Und das liegt daran, dass wir das automatische Layout in dieser Instanz haben. Die Instanz selbst ist also auch nicht Ort, an dem Sie das lila Highlight hier sehen können. Jetzt müssen wir das Auto Layout auswählen, dieses hier. Anstatt das Problem zu beheben, müssen wir es ändern, um den Behälter zu füllen. Jetzt fragst du Chris vielleicht, warum Phil Container? Nun, die Instanz ist der Container, das blaue Highlight. Erinnerst du dich? Also sagen wir: Hey, dieses Feld muss so breit sein wie die Instanz. Wenn die Instanz, die der Klon ist, 308 ist sollte das Feld auch stimmen. Wenn die Instanz nun breiter wird, folgen Sie diesem Wert. Die einzige andere Option ist ihr Inhalt. Und das heißt einfach, hey, Figma, mach das Feld so, warum tut es der Inhalt selbst. Und der Inhalt in diesem Fall ist christlich unfruchtbar. Das würde in dieser speziellen Situation keinen Sinn machen. Also werden wir es natürlich nicht benutzen. Lass uns eine weitere Kopie machen und sie auf der rechten Seite platzieren. Auf dem Etikett sollte auch Stadt stehen, der Hinweis, lass uns etwas Grundlegendes wie Select City nehmen. Bei Wählen Sie eine Stadt aus. Ich glaube, es ist Select City. Das bedeutet nun, dass wir das Drop-down-Menü benötigen. Wir haben bereits einen auf dem Bildschirm, aber machen Sie ihn neben San Francisco. Wählen Sie es also aus und verschieben Sie es in die Ressource Regen. Dann machen wir daraus eine Komponente. Bitte nehmen Sie sich Zeit damit. Wenn Sie bereit sind, ziehen Sie eine Kopie zurück nach San Francisco. Da es ziemlich klein ist, sollten Sie dafür vielleicht das Asset-Panel verwenden, je nachdem, was für Sie am besten geeignet ist. Wenn du bereit bist, lass uns darüber nachdenken. Gehen Sie zurück zum Stadtfeld und aktivieren ein Symbol bei ausgewähltem Rahmen. Sie müssen den Abstand von gepackten Wählen Sie den Abstand zwischen gepackten Räumen ändern . Moment haben wir jedoch nur eine Ein - oder Aus-Option für das Symbol. Und das ist im Grunde nicht gut genug. Wir müssen also in der Lage sein, diese Symbole auszutauschen , um sie auszutauschen. Nun, zum Glück können wir das in Figma machen. Gehen Sie also zurück zur Hauptkomponente. Am einfachsten funktioniert es , das Ebenenfenster zu verwenden und das GPS Saigon zu finden. Hier ist es leicht ausgegraut. Okay, jetzt konzentriere deinen Fokus hier auf die rechte Seite. Hier haben wir ein weiteres Symbol, genau an dieser Position neben der Stelle, an der GPS steht. Klicken Sie darauf und wir werden einen Instanztausch durchführen. Ein Instanztausch bedeutet einfach , dass wir das Symbol ändern können. Wenn wir das abwählen und dann die Master-Komponente auswählen, sollten Sie insgesamt drei Eigenschaften haben. Das heißt, das Etikett einblenden oder ausblenden. Tauschen Sie das Symbol aus, dieses hier, und zeigen Sie schließlich, was für ein High-Di-Symbol. Gehen wir zurück, um die Stadt auszuwählen. Die beiden Schalter sind da, und dazwischen erledigen wir diesen Job. Wir haben also nur zwei Icon-Komponenten in diesem Projekt. Also klicken Sie hier und Sie sollten feststellen, dass die Daten ziemlich schnell werden. So einfach ist das. Aber hier ist die Sache. Der Größenunterschied macht das Symbol kaputt und das ist nicht gut. Aber wir haben eine einfache Lösung. Gehen Sie also zurück zur Hauptkomponente, dem Pfeil, und dann verwenden wir eine automatische Layout-Shift a. Jetzt ist die Größe völlig in Ordnung. Nun möchte ich dich nicht mit verschiedenen Erklärungen langweilen, aber denk dran, falls du bist, haben die Icons eine andere Größe und du möchtest sie austauschen können. Verwenden Sie einfach den Schichttag im Rahmen Ressourcen für die Masse der Komponente. Lassen Sie uns zusammenfassen. Deshalb haben wir in der Feldkomponente das GPS-Symbol ausgewählt und verwenden die Funktion Instanz-Swap-Eigenschaft. Sobald das angewendet ist, können wir zu einem Klon gehen. Zum Beispiel können wir die Symbole ändern, je nachdem , welche Komponenten wir in diesem Projekt verfügbar haben. In unserem Fall gibt es nur zwei Symbole, also ist das natürlich ziemlich einfach. Falls das Symbol jetzt nicht passt, müssen wir Shift a für das Originalsymbol verwenden, auch bekannt als Haupt- oder Masterkomponente. Okay, lass uns weitermachen. 33. Konzentriere dich auf deine Geschwindigkeit: Willkommen zurück. Von Zeit zu Zeit wirst du diese intensiven Sessions haben, diese intensiven Sessions haben bei denen es nur auf deine Geschwindigkeit ankommt, z. B. genau hier, wo wir ziemlich viele Felder brauchen. Machen wir uns an die Arbeit, indem wir eine Kopie des Namensfeldes erstellen und es nach unten ziehen, die Breite auf 656 ändern und das Feld sollte ohne weitere Einstellungen wachsen. Verschieben Sie den Hauptaufruf nach unten und machen Sie Platz und tun Sie Ihr Bestes, um diese Schritte durchzugehen , während ich im Hintergrund arbeite Lassen Sie mich Ihnen einige Dinge über meinen Denkprozess erzählen. Das ist also Teil des Spiels. Nun, egal wie viele ausgefallene Tricks du in Figma verwendest, das ist ein Teil davon. Jetzt ist es sicher, dass das Ziel darin besteht, so intelligent und effizient wie möglich zu arbeiten . Aber am Ende des Tages werden Sie sich wiederholende, langwierige Aufgaben haben , langweilige Aufgaben, und dies ist eine davon. Anstatt sich darüber zu beschweren, bekommen sie es als Übung, als Chance, deine Fähigkeiten zu verbessern. C macht nichts Schwieriges , was hier vor sich geht, aber es muss getan werden. So wie ich es sehe, fordere ich mich gerne heraus, es so schnell wie möglich zu tun. Während meiner Zeit als CEO meiner App-Design-Firma, insgesamt fünf Jahre, habe ich Hunderte von Designern interviewt und ihnen immer Fähigkeiten vermittelt. Klar, ich wollte, dass sie die Tastenkombinationen kennen und sich gut mit der Gestaltung des Programms auskennen. Aber ich habe immer nach Geschwindigkeit gesucht. Geschwindigkeit zeigt mir, dass du deine Zeit wertschätzt. Geschwindigkeit sagt mir, dass selbst wenn Sie etwas nicht wissen, Sie einmal gelernt haben, dass Sie großartige Arbeit leisten werden, wenn Sie einmal gefangen sind. Dies ist einer der wenigen Indikatoren , nach denen Arbeitgeber häufig suchen. Ihr Lebenslauf mag zwar schön sein, aber er reicht nicht aus, um einen guten Job zu bekommen. Normalerweise muss das eine Art von Fähigkeitstest sein. Und es ist leicht zu verstehen, warum. Weil einige Designer vielleicht 20 Minuten brauchen, um diese sich wiederholende Arbeit zu erledigen, tun sie das vielleicht und haben vielleicht noch weniger Schulden, oder? Das allein sagt viel über diesen bestimmten Designer aus. Konzentrieren Sie sich also auf Ihre Geschwindigkeit So werden Sie einen guten ersten Eindruck hinterlassen. Passwort Web und diese Felder sind fertig. Aber hier ist etwas, das Sie vielleicht bemerkt haben. Die Auswahl dieser Textfelder war gar nicht so toll, um es einfacher zu haben Du könntest das tun. Gehen wir also zurück zur Hauptkomponente und wählen das Label aus. Auf der rechten Seite. Sie werden diesen Teil finden, in dem Inhalt steht. Und Sie können sehen, dass dies ein Feld ist , in dem es uns den aktuellen Text zeigt. Und das ist offensichtlich ein Etikett. Direkt darüber. Wir haben dieses Symbol Aufschrift „ Texteigenschaft erstellen“. Klicken Sie darauf und Sie erhalten ein neues Fenster für den Namenstext ist völlig in Ordnung und der Wert ist auch in Ordnung. Also, was macht das? Nun, wähle ein beliebiges Feld aus. Und auf der rechten Seite, neben Label anzeigen, Symbol anzeigen, sollten Sie auch diese Option haben, um den Text direkt von dieser Stelle aus zu ändern . Also, spart dir das viel Zeit? Nun, es steht zur Diskussion. Ich habe Ihnen diese Funktion bewusst gezeigt nachdem wir all diese Felder manuell neu beschriftet haben. Weil Geschwindigkeit Übung erfordert. Es ist eine Sache, das zu verstehen, aber es ist eine andere Sache, es tatsächlich zurück zur Hauptkomponente zu machen . Wenn wir das Etikett bearbeiten können, können wir sicherlich dasselbe für die Hand tun. Klicken Sie einfach bei gedrückter Ctrl-Taste darauf, um es auszuwählen, und suchen Sie auf der rechten Seite nach dem Inhalt. Klicken Sie auf dasselbe Symbol und erstellen Sie eine neue Eigenschaft. Dieses Mal sollte das heißen, daher ist der Name wichtig, weil wir organisiert bleiben müssen. Jetzt haben wir den Griff, den Knopf, aber wir brauchen die Komponente. Ziehen Sie es nun vom registrierten Bildschirm. Wir müssen es im Ressourcenrahmen platzieren. Lassen Sie uns von hier aus eine solche Komponente machen. Wählen Sie dann den Text und wir werden dasselbe tun. Wir werden den Text bearbeitbar machen. Sie brauchen nichts anderes. Okay. Ziehen Sie nun eine Kopie heraus und lassen Sie den Text unverändert. Erstelle ein Konto. Achten Sie jedoch auf die Schreibweise. Der Abstand zum letzten Feld sollte der gleiche sein wie zum ersten Feld, dem gelben Balken. Ich empfehle 40 Pixel. Das ist allerdings für die Z, gib die Aufnahme natürlich auf. Wenn Sie bereit sind, weiterzumachen, erstellen Sie eine Kopie dieses Grüns und bei Ihren Aktionen so effizient wie möglich vor. Jetzt fange ich von unten an. Der Text sollte also lauten, gib dein Konto ein. Nochmals, achten Sie bitte auf Ihre Schreibweise. Das ist ziemlich wichtig. Entfernen Sie die Felder Name, CD und Telefonnummer. Öffnen Sie die E-Mail- und Passwortfelder und stellen Sie sicher, dass sie der Entfernung zum vorherigen Bildschirm entsprechen . Ich sagte, ich habe die Pixel umgedreht, also lass uns das auch hier verwenden. Dann hebe auch den orangefarbenen Knopf hoch. Lass uns am DAB arbeiten. Verschieben Sie den gelben Balken nach rechts, um das Gewicht für diese Ebenen zu erhöhen. Also registrieren Sie sich, das sollte regelmäßig angezeigt werden. Und dann logge dich ein. Das muss natürlich mutig sein. Zum Abschluss benötigen wir eine neue Ebene , die Passwort vergessen heißt. Erstellen Sie also eine Kopie des Etiketts und platzieren es auf der rechten Seite, wenn Sie möchten Sie können die Textausrichtung auch von links nach rechts ändern, nur für den Fall, dass wir das später bearbeiten könnten. Jetzt stellen Sie vielleicht fest, dass sich diese neue Ebene über der Instanz befindet und das ist völlig normal Sie sich also keine Sorgen , das ist in Ordnung. Okay. Mach es gelb. Und im Grunde denke ich, dass wir, wenn wir fast fertig sind, nicht nur zwei wunderschöne Bildschirme haben, sondern auch viel über die Verwendung von Komponenten und verschiedenen Eigenschaften wie Boolean, Icon Swap oder X gelernt haben Komponenten und verschiedenen Eigenschaften wie Boolean, Eigentum. Okay, sieh nach, ob es noch etwas gibt. Und wenn nicht, lass uns weitermachen. Ich danke dir vielmals. 34. Use verwenden – wie ein Profi!: Willkommen zurück. Wir wissen jetzt ziemlich gut, wie man Komponenten verwendet. Deshalb möchte ich weiter auf diesem Wissen aufbauen. Konzentrieren wir uns also auf die Aktionsleiste. Dies muss ebenfalls in eine Komponente umgewandelt werden. Also hier ist, was ich vorschlage. Wählen Sie alle Elemente wie folgt aus. Verwenden Sie jetzt Control C, Control V, um sie in den Resources-Frame einzufügen. Oder Sie ziehen einfach eine Kopie heraus, was für Sie am besten geeignet ist. Entferne jetzt das Rechteck , weil wir das nicht brauchen. Lass uns das jetzt machen. Wählen Sie diese drei Symbole, das Hamburger-Menü, den Filter und die Suche aus. Diese müssen alle zu Komponenten verarbeitet werden. Und wir haben genau hier eine Option , mit der wir mehrere Komponenten herstellen können. Hallo, ein einziger Klick. Einfach so. Fantastisch. Warum jetzt nicht das Drop-down-Menü? Weil wir es schon hier haben , falls Sie das nicht tun, kümmern Sie sich bitte darum. Okay, lassen Sie uns sie anheben, damit wir alle Originalkomponenten oben sehen können . Okay, jetzt zieh ein paar Kopien raus. Zuerst das Hamburger-Menü als die anderen beiden. Okay, es ist Zeit für ein paar Autolayouts. Verschieben Sie also nach rechts, um auf der linken Seite zu sein, und dann zwei Symbole auf der rechten Seite, wieder Shift a. Apropos, denken Sie daran, Shift a für die ursprüngliche Masse der Komponenten auf den Symbolen zu verwenden die ursprüngliche Masse der . sich selbst. Das ist super wichtig. Jetzt werden wir es einfach halten. Also brauchen wir 40 zwischen den Icons auf der rechten Seite und dann 20 für die links. Könnten wir nun verschiedene Ränder einrichten, z. B. zehn Pixel zwischen dem Drop-down-Menü und dem Stadtnamen mit Anführungszeichen. Diese Art von Details macht die Dinge etwas komplizierter als sie sein müssen. Also werde ich mich immer für Einfachheit entscheiden, wann immer sie können. Hab einen schönen Hintergrund, wir müssen beide Autolayouts auswählen und dann die Umschalttaste verwenden. Sie noch einmal, im Grunde ist dies jetzt ein einziges Element. Und aus diesem Grund können wir natürlich die Füllung hinzufügen. Andernfalls bitte, obwohl wir die Polsterung ändern müssen. Die Einstellungen sind allerdings ziemlich einfach. 32 Pixel auf beiden Seiten. Was die Höhe angeht, könntest du sie allerdings auf z einstellen. Und hier ist der Grund. Geh nach oben. Nun, hier sollten diese beiden Dropdowns auf Fixed gesetzt sein. Nun, warum behoben? Weil wir keine Flexibilität brauchen. Wir wollen 720 für die Breite und 112 für die Höhe. Könnten wir es nun flexibel, reaktionsschnell, kurz machen? Wir könnten, aber wie gesagt, lassen Sie es uns einfach halten, denn das ist nicht erforderlich. Schließlich müssen wir die Position des Inhalts in den Mittelpunkt stellen. Dies geschieht, indem Sie hier klicken, einfach genug. Und noch etwas: Wir müssen die Anordnung so ändern, dass der Abstand zwischen den Fakten uns nicht wirklich hilft, sie zu ändern. Im Wesentlichen ist dies erledigt und wir können daraus eine Komponente machen. Okay, tolles Zeug. Machen wir es nun bearbeitbar, wie wir es gerade gelernt haben. Fangen Sie also mit der Textsteuerung an. Klicken Sie, um es neben dem Inhalt auszuwählen. Klicken Sie auf diesen Pfeil, damit der Namenstext in Ordnung ist. Und für den Standardwert kann das San Francisco bleiben. Als nächstes das Dropdown. Hier möchte ich, dass du eine Pause einlegst, um zu sehen, ob du bei gedrückter Maustaste darauf klickst. Möglicherweise erhalten Sie diese Ebene, den eigentlichen Vektor. Und du könntest wütend werden , weil es hier keine Einstellungen gibt. Das einzige, was Sie sehen, ist dieses Symbol mit der Aufschrift Select instance. Und das ist eine berühmte Art, dir zu sagen, Hey, du hast tatsächlich das Falsche ausgewählt. Ich glaube nicht, dass du hier sein musst. Sie können nichts mit dem eigentlichen Vektor machen. Sie müssen an der Instanz arbeiten. Sie können also hier klicken oder einfach das Ebenenbedienfeld verwenden , um die Instanz tatsächlich auszuwählen. Sie erkennen es an diesem leeren Diamantsymbol. Okay, gutes Zeug. Lassen Sie uns nun einen booleschen Wert anwenden weil wir ihn vielleicht ausschalten möchten. Dazu verwenden Sie dieses Symbol hier aus dem Ebenenbereich. Lassen Sie uns den Namen so ändern , dass das Dropdownmenü angezeigt wird. Müssen wir nun eine Swap-Instance-Eigenschaft anwenden? Ich glaube nicht wirklich, für diesen Fall werden wir dieses Symbol wahrscheinlich behalten. Aber was ist mit dem Rest? 100 Prozent, das wollen wir. Fangen Sie also mit dem Hamburger-Menü an. Klicken Sie hier, um einen Instanz-Swap zu erstellen. Und wann dieses Mal, nennen Sie es bitte, sagen wir ICAM-1. Wählen Sie dann den Filter aus, nicht das Autolayout, sondern die Instanz des Filters, erstellen Sie den neuen und nennen wir ihn Icon, um schließlich das Suchsymbol zu erhalten, eine neue Eigenschaft, die Icon Three heißt. Und wir sind fertig, aber wir müssen es ausprobieren. Lassen Sie uns also eine Kopie dieser Aktionsleiste erstellen und versuchen, ein Symbol zu ersetzen. Lass uns mit dem Hamburger-Menü gehen. Sagen wir also zum Beispiel, dass wir es durch das GPS-Symbol ersetzen möchten. Also funktioniert es? Und ja, das tut es. Nun, hier ist die Sache. Falls das GPS-Symbol verzerrt ist, ermitteln Sie die Masse der Komponente und verwenden Sie dann Shift. Sie, das habe ich schon gemacht. Spielen Sie jetzt damit und sehen Sie, ob alles gut funktioniert. Wenn Sie ein Symbol austauschen, wird Ihnen hier möglicherweise ein Drop-down-Menü angezeigt. Sie haben lokale Komponenten und bevorzugen. Dieser zweite ist nützlich, falls Sie die riesige Bibliothek von Symbolen importieren möchten, Hunderte von Icons, vielleicht sogar Tausende. Was du also nicht tun willst, ist wie ein Verrückter zu scrollen. Sie wählen also einige Symbole aus, die größerer Wahrscheinlichkeit verwendet werden, um die bevorzugte Liste zu ändern. Bitte tun Sie dies, wählen Sie die Hauptkomponente aus, gehen Sie dann hierher und klicken Sie auf dieses Symbol, um es zu bearbeiten. Von hier aus erhalten Sie bevorzugte Werte. Und jetzt können Sie auf dieses Plus-Symbol klicken. Grundsätzlich können Sie die Komponenten, die Sie möglicherweise benötigen, öfter überprüfen als nicht. Falls Sie das nicht können, verwenden Sie einfach diesen Schalter, um den Anzeigemodus zu ändern. Und weil wir hier, lasst uns etwas ändern, weil ich 123 zähle, macht das keinen Sinn. Sie können also tatsächlich hier doppelklicken, um sie umzubenennen. ZB ist das Symbol links viel sinnvoller als das Symbol rechts eins und dann das Symbol rechts zwei. Und das ist viel besser, wenn es fast fertig ist. Ich glaube, wir haben etwas ganz Wichtiges vergessen. Was ist, wenn es keinen Titel gibt? Wählen Sie es also in der Hauptkomponente und lassen Sie uns auch dafür eine boolesche Eigenschaft anwenden, da dies passieren kann. dieses Mal also Show-Titel, Nennen Sie es dieses Mal also Show-Titel, weil sich die tatsächlichen Texte ändern könnten. Aber was ist mit den beiden Icons auf der rechten Seite? Werden wir sie immer brauchen? glaube ich nicht. Also lass uns dasselbe tun. Symbol anzeigen, richtig, eins. Und dann werden wir auch das Symbol richtig anzeigen lassen. Diese können also standardmäßig auf true gesetzt werden. Und wenn du fertig bist, gehe zurück zum Clone, zur Instanz. Und da fiel auf, dass wir keinen booleschen Wert auf das Hamburger-Menü anwenden werden, da in den meisten Apps das Back-Symbol immer vorhanden ist. Okay, du kannst den Titel entfernen, du kannst die richtigen Symbole entfernen. Nun, um ehrlich zu sein, ich bin sehr stolz auf dich, dass du es so weit geschafft hast. Vertrauen Sie mir, als ich anfing , etwas über diese Eigenschaften, diese Komponenten und so weiter zu lernen , hatte ich es schwer damit. Ich habe es Schritt für Schritt gelernt. Anfangs war es frustrierend. Ich habe nicht die richtigen Immobilien gefunden, aber ich freue mich sehr, sagen zu können, dass mit Patienten und Praxis ich sie mit Patienten und Praxis letztendlich bekommen habe. Und du auch. Lass uns eine Pause machen, damit du aufholen kannst. Ich danke dir. 35. So nutzt du Varianten: Willkommen zurück. Lassen Sie uns über die Varianz von Komponenten sprechen. Nehmen wir also die Statusleiste. Wir müssen es immer wieder verwenden. Aber was ist, wenn wir 200 Bildschirme haben und der Kunde dann sagt, hey, ich will es nicht in Weiß haben. Darauf sollten wir uns also vorbereiten. Ziehen Sie es also vom zweiten Bildschirm in den Resources-Frame und lassen Sie uns das machen. Ich werde also nicht mit dem automatischen Layout für die rechte Seite herumalbern . Ich werde es so lassen, wie es ist. Stattdessen werde ich es direkt zu einer Komponente machen. Nun, ich möchte, dass Sie oben etwas sehen, wo wir normalerweise die Komponente „ Erstellen“ verloren haben. Es ist nicht anders. Es heißt Variante erstellen. Also lass es uns benutzen. Wir können das jetzt zu dunkel oder bunt oder so nennen . Wechsle zum anderen und nenne es hell oder weiß oder was auch immer. Das wird uns helfen, sie zu erkennen. Beachten Sie, dass es um diese beiden Typen eine gepunktete Linie gibt. Das zeigt uns also, dass wir es mit Varianz zu tun haben. Welche Varianten? nun für die zweite Lassen Sie uns nun für die zweite Farbe die Auswahlfarben verwenden und alle Symbole weiß machen. Sie uns den Hintergrund dann Lassen Sie uns den Hintergrund dann mit einer anderen Farbe orange machen. Schau, was das ist. Im Grunde erstellen wir Optionen, auch bekannt als Varianz, für dasselbe Element. Wenn der Kunde also seine Meinung ändert, können wir einen Schalter umlegen und dann damit fertig sein. Gehen wir zurück zum zweiten Bildschirm und wechseln zum Bedienfeld „Assets“. Ich werde das machen, damit Sie sehen können wie das normalerweise abläuft. Sie können die Statusleiste wie jede andere Komponente herausziehen, der Hotkey hat auch nicht einfach geklickt und gezogen. Natürlich musst du es ausrichten, aber dann schau auf die rechte Seite und du kannst zwischen hell oder dunkel wählen. Und das ist total genial. Ziehen Sie eine weitere für den Bildschirm Nummer drei. Und jetzt ist hier eine weitere Situation für die Varianz. Angenommen, Sie haben auf dem Anmeldebildschirm kein Passwort eingegeben. Wir könnten zeigen, dass die Schaltfläche deaktiviert ist, oder? Wählen wir also die MainComponent aus und erstellen die Variante. Nennen wir es deaktiviert, was ein sehr gebräuchlicher Begriff ist. Dann lass uns das Styling ändern . Lassen Sie uns also den Schatten vollständig entfernen und dann die Farbe von leuchtendem Orange auf eine beliebige Stufe ändern von leuchtendem Orange auf , die Sie im Stilfenster festgelegt haben. Okay, jetzt gehe zu dieser Instanz und lass uns sie vom Standardstatus abschalten. Nun, die Benennung des Standardstatus macht nicht viel Sinn. Also lass uns es umbenennen. Lass es uns z. B. auf aktiv ändern und jetzt weißt du, welche Eigenschaft man auch nicht so toll klingt. Also lasst uns es in State umbenennen. Also der Status der Taste, aktiv oder deaktiviert. Dann wirst du dich mit der Zeit mit all diesen Begriffen vertraut machen . Entwickler und Programmierer kennen sich auch sehr gut mit ihnen aus. Und einfach so, mit großen Fortschritten bei der Varianz. Bevor wir fertig sind, lassen Sie uns den dritten Bildschirm behandeln. Hier ist mein Ansatz. Wählen Sie diese beiden Symbole aus, den Zurück-Pfeil und den Informationspfeil, und verschieben Sie sie dann in den Ressourcenrahmen. Sie können die Größe übrigens jederzeit ändern, falls Sie es größer haben möchten, als für jedes von ihnen automatische Layouts zu verwenden , nur gutem Grund. Fantastisch. Machen Sie sie zu einer Komponente. Gehen Sie nun zurück zu Bildschirm Nummer drei und etwas , das Sie beachten sollten, Sie können tatsächlich eine Kopie dieser anderen Aktionsleiste herausziehen . Sie müssen weder das Asset-Panel noch den Ressourcen-Frame verwenden . Es ist genau dasselbe, egal worauf Sie sich verlassen. Schritt für Schritt haben wir den Dropdown-Pfeil deaktiviert , das brauchen wir nicht. Die Titelbreite wurde ersetzt, ihre Pizzalieferung ausgereift. Tolles Zeug. Für das Symbol auf der linken Seite wollen wir den Zurück-Pfeil. Nimm dir Zeit damit. Möglicherweise haben Sie es nicht in Ihrer bevorzugten Liste, aber wir können es in einer Sekunde hinzufügen. Nimm dir einfach Zeit damit, dann solltest du startklar sein. Hallo Das Icon, richtig, Nummer eins, denn wir brauchen nur das Info-Icon. Richten Sie das ein und ich denke, wir sind fertig. Ja, insgesamt ist das ein ausgezeichneter Fortschritt und ich freue mich sehr darüber. Natürlich musst du üben. Sicher. Das mag völlig neu und vielleicht etwas verwirrend sein, aber wenn du es ein paar Mal gemacht hast, wirst du es bekommen. Vertrau mir, ich verspreche dir, du wirst es bekommen. Bleib einfach dabei. Wie gesagt, gehe zur Hauptkomponente und bearbeite das linke Icon im Backend allerdings in die bevorzugte Liste, da es sehr wahrscheinlich , dass wir es ziemlich oft verwenden werden. Und damit machen wir eine Pause. Ich danke dir vielmals. 36. Geschwindigkeit gewinnen: Willkommen zurück. Schauen wir uns das an und sehen wir, wie wir das Design verbessern können. Lassen Sie uns zunächst den Bildschirm mit dem Bewertungssystem befassen. Ziehen Sie es in den Ressourcenrahmen und verschieben Sie das Symbol neben die anderen. Okay, das ist perfekt. Machen Sie es jetzt zu einer Komponente. Und wenn das erledigt ist, zieht Lee eine Kopie heraus. Jetzt kann es auf der Leinwand selbst etwas schwierig sein, das Emoji wieder in den Autolayout-Rahmen zu setzen sein, das Emoji wieder in den Autolayout-Rahmen . Aber wenn Sie das nicht verwalten können, verwenden Sie einfach das Ebenenbedienfeld. Ziehen Sie es per Drag & Drop. Nun, okay, denk dran, lege niemals eine Hauptkomponente in eine andere, das funktioniert nicht. Okay, machen wir daraus eine Komponente und dann fügen wir das Ende hinzu. Jetzt könnten wir möglicherweise drei davon machen. Das steht in dem Brief, aber ich werde es etwas einfacher halten. Ziehe also noch ein MOG rein, ein wütendes, und du hast eins angehängt und es heißt genau so wütend. Das muss 40 mal 40 sein und die Farbe ist eindeutig schlecht. Jetzt habe ich keine bestimmte Farbe. Goldener Verstand, nimm einfach etwas, das anders aussieht als unsere Orange. Manche Leute könnten unser Orange oder Rot verwechseln, also achte darauf, dass du etwas verwendest , das anders genug ist. Okay, lass uns auch das wütende Emoji oder die Komponente machen. Dann ziehen Sie natürlich eine Kopie heraus. Übrigens, ich bin ständig dafür, eine Sache zu bekommen. Wenn Sie ein Symbol zu einer Komponente machen, stellen Sie bitte sicher, dass Sie das automatische Layout aktiviert haben. Also das ist Schicht sie, jede einzelne Ikone hier braucht diese Veränderung, eine Behandlung. Sonst wird es nicht gut aussehen. Schauen wir uns nun an, was was ist. Nun, das mag ein bisschen schwierig sein, aber ich möchte wirklich, dass du es so machst. Nachdem du also eine Variante der Originalkarte hast, entferne das grüne Emoji und lass es uns manuell gegen ein wütendes Emoji austauschen. Auch hier sollten Sie Ihr Ebenen-Panel für dieses Ding verwenden . Das ist der schwierigere Weg, aber ich denke wirklich, es ist ein nasses Bett. Denken Sie daran, immer mit Kölnern zu arbeiten, nicht mit Originalkomponenten. Ich werde das immer wieder sagen, weil es ziemlich wichtig ist. Okay? Sie können auch die Prozentsätze und die Anzahl der Stimmen ersetzen, falls Sie dies noch nicht getan haben. Sorgen Sie einfach dafür, dass es sich echt anfühlt. Und wenn alles gesagt und erledigt ist, können Sie eine Kopie aus dem Asset-Panel oder einer anderen Stelle ziehen und testen. Sie können die Eigenschaft, den Staat oder den Status oder etwas Ähnliches benennen . Was die Varianz selbst angeht, gut oder schlecht, positiv oder negativ, grün oder rot, was auch immer das Wort ist, am besten für Sie. Ich wiederhole, es interessiert wirklich niemanden. Es ist nur für dich. Was am wichtigsten ist dass Sie die Dinge einfach und intuitiv halten. Nehmen Sie sich Zeit und fügen Sie Klone zu Bildschirm Nummer zwei hinzu. Danach denke ich, dass wir damit fast fertig sind. Hätten wir nun Auto Layout und verschiedene andere Dinge für den Restauranteingang verwenden können? 100% ig sicher, dass wir das Ganze zu einer Komponente machen könnten, vielleicht ein paar Varianten für die Fälle denen das Restaurant an diesem Tag geschlossen ist, aber jetzt sprechen wir über Feintuning wird normalerweise am Ende eines teuren Projekts erledigt. Im Grunde sind es eher die gleichen Techniken. Also überspringe ich das und nenne es. Dann. Lass uns das stattdessen tun, um meine Geschwindigkeit zu üben. Ich werde die Anmeldung wiederholen und mich für Verben registrieren, aber mit einem weißen Hintergrund, einem sauberen. Also lass uns das machen. Beginnen wir mit einer Kopie von Bildschirm Nummer drei. Lassen Sie uns nun sehen, wie schnell wir mit den Dingen umgehen können. Für den Titeltausch. Bitte ändern Sie es mit, bitte melden Sie sich an oder registrieren Sie sich, dann kein Informationssymbol auf der rechten Seite. brauchen wir nicht. Und im Grunde ist das für den oberen Teil erledigt. Nun zu den Tabs: Lassen Sie uns die Größe des Balkens auf das sechste Jahr zurücksetzen. Es ist die Hälfte von 720, weil wir nur Eier legen müssen. Das ist Register. Und dann logge dich ein. Bitte ersetzen Sie den Text, aber wir können das Design beibehalten, wie es ist, orange und fett und dann normal und grau für den anderen, für den inaktiven. Was ich jedoch tun werde, ist, die All-Cap-Transformation zu aktivieren. Das ist in Figma ein bisschen versteckt, aber das ist völlig in Ordnung. Okay, das geht. Denken Sie daran, den V-Aktivbalken wie zuvor zu senden, aber bevor Sie das tun, möchten Sie vielleicht den Text so ändern, dass möchten Sie vielleicht den Text so ändern zentriert statt links ist. Das wird uns bei der ganzen Ausrichtung helfen. Okay. Nun, die Tabs selbst, sie dauern nur eine Minute, aber nun, das habe ich erledigt. Denk an die Felder. Sie sind weiß und das ist ein weißer Hintergrund und das wird Probleme bereiten. Also lass uns nachdenken. Jetzt könnten wir einen Schlagschatten aktivieren. Aber ich will wirklich keinen hässlichen. Ich bevorzuge sanfte Schatten , die nicht auffallen. Wirklich sichtbare sind ziemlich hässlich. Aus diesem Grund denke ich, dass wir einen farbigen Hintergrund verwenden werden. Wir werden es ändern. Also bis dahin, entferne alle Einträge. Hier ist der schnellste Weg zur Arbeit. Schnappen Sie sich alle Felder aus der anderen Version dieses Grüns und ziehen Sie dann eine Kopie hierher. Platziere nun alles 30 Pixel von oben und schon sollte es losgehen. Ich hoffe, Sie sehen das Problem mit Weiß auf Weiß. Es wird nicht funktionieren. nun das feste Set aus, wählen Sie die Zeichenfläche und lassen Sie uns dann die Farbe von der Leinwand mit du testen. Nun, der farbige Code für den Fall, dass Sie mitmachen ist allerdings f z, F11, F8. Aber es ist einfacher und schneller, es zu probieren. Das sind also vier Pipettenwerkzeuge. Lassen Sie uns es also sinnvoll nutzen, oder? Aber selbst vor dem Hintergrund fallen die Felder immer noch nicht auf. Außerdem ist das Etikett auch weiß. Also, was sollten wir tun? Nun, das erfordert das Ende. Gehen wir zurück zum Ressourcenrahmen und sehen, was wir tun können. Nimm dir immer die Zeit, all diese Leute richtig zu arrangieren. Im Allgemeinen würden Sie sie auf einer separaten Seite mit unendlichem Platz haben , aber ich wollte sie Nähe haben, damit Sie sie ständig sehen. Okay, lass uns die Variante erstellen und sie für das einfache BG nennen, für einfachen Hintergrund oder so etwas, das für dich Sinn macht. Jetzt muss das Etikett blau sein, das gleiche Gewicht haben, aber eine andere Farbe haben. Es sollte nett aussehen. Nun, was das Sternchen angeht, das wird ganz gut in Orange erscheinen, ich glaube, es wird auffallen. Jetzt. Wir werden in einer Minute sehen, ob es tatsächlich gut aussieht. Nun zum Feld selbst, lassen Sie uns mit einem Basisschatten fortfahren. Ich werde tatsächlich die Standardeinstellungen beibehalten. Nun, hier ist die Sache. Wir könnten sogar ein Board gebrauchen, das auch. Nun, das Ausprobieren, verschiedene andere Dinge. Aber alles in allem bin ich bis jetzt ziemlich zufrieden. Lass uns jetzt gehen und es ausprobieren. Dann. Du wirst etwas sehen. Wenn Sie all diese Felder ohne die Variante in das neue ändern , gilt nur der Schatten. Die Etikettenfarbe ändert sich nicht wirklich. Hier ist der Grund. Geh zurück bis zum Ende. Wenn Sie in der Lage sein möchten, Ihre Anzahl an Hühnern zu bearbeiten und dann die Variante in einen anderen Zustand zu ändern, insbesondere ändert sich die Farbe, müssen Sie einen Fehler verwenden. Hier haben wir zwei Farben. Aber um das einfacher zu machen, werden wir das tun. Ich werde das Sternchen entfernen, damit die Füllung nicht mehr gemischt wird. Das ist es, was die Probleme verursacht. Jetzt sollte es blau sein, die Hauptfarbe. Wenn wir es jetzt ausprobieren, werden Sie sehen , dass es ganz gut funktioniert. Wir können sogar den Inhalt des Labels ändern und dann zwischen den Staaten wechseln. Also ändern wir die eigentlichen Texte. Und dann, wenn wir den neuen Status anwenden und es funktioniert, ist alles in Ordnung und nun, das war das Problem, das wir gemischt hatten , und das Dinge für den Figma vermasselt. Aber was ist mit den Männern, die, obwohl das Symbol das Risiko ist? Nun, das Sternchen muss als weitere Textebene gesetzt werden. Lass uns das schaffen. Sobald Sie es haben, stellen Sie sicher, dass es richtig angeordnet ist, und richten Sie dann die Füllung ein. Nun zum ersten Mal, das muss natürlich gelb sein, weil es für einen farbigen Hintergrund ist. Wählen Sie das mit dem Label aus und verwenden Sie dann die Umschalttaste. Sie werden standardmäßig gestapelt. Aber Sie können die Ausrichtung von hier aus ändern, von vertikal zu horizontal. Und im Grunde sind wir startklar. Wiederhole dasselbe mit der Variante. Fügen Sie den Stern hinzu, ändert die Farbe zu unserem Orange und verwenden Sie dann zusammen mit dem Etikett ein automatisches Layout darauf. Okay, jetzt habe ich die Ausrichtung geändert. Und im Grunde sind wir startklar. Lassen Sie mich noch einmal zusammenfassen, da wir zwei verschiedene Farben im Etikett hatten zwei verschiedene Farben im , als wir die Varianz wechselten Wenn wir den Status wechseln, blieb das Etikett weiß. Figma wurde verwirrt. Die Feigen, die wir getrennt haben, haben das Sternchen getrennt und wir haben eine Farbe für das Etikett und eine andere für den Stern aufgetragen . Außerdem kannst du ein Textil einrichten, es Label nennen oder was auch immer das beschriftete ist, finde ich ziemlich in Ordnung. Nur für den Fall, dass Sie auf den vorherigen Bildschirmen einen Doppelstern bekommen. Das liegt nur daran, dass ich es manuell eingegeben habe, Sie haben wahrscheinlich dasselbe getan. Was Sie also tun müssen, ist, dass Sie es eins nach dem anderen entfernen müssen. Eine Sache, die ich beachten sollte, ist, dass ich das Sternchen nicht zu einer Komponente gemacht habe. Das ist nicht nötig, zumindest nicht jetzt. Okay. Ich denke, wir sind ziemlich gut. Bitte stellen Sie sicher, dass Sie sich diese Vorlesung mindestens zweimal ansehen . Ich wollte das unbedingt in den Kurs aufnehmen, weil es ein Fehler ist, den ich selbst gemacht habe, als ich mit Varianz angefangen habe. Und ich denke, es ist am besten, wenn Sie darüber Bescheid wissen , da ich im Hintergrund arbeite Lassen Sie mich Ihnen das Mitnehmen sagen. Wenn Sie es mit Schaltflächen oder Feldern zu tun haben. Denken Sie immer von Anfang an an die Staaten und erstellen Sie sie so schnell wie möglich. Sie wissen, die meisten Tasten müssen deaktiviert sein. Sie wissen, für die meisten Felder ist ein An- oder Aus-Label erforderlich. Das ist also Erfahrung für dich. Im nächsten Projekt können Sie sie also sofort erstellen. Und natürlich kannst du noch weiter gehen. Sie können über Schwebezustände nachdenken. Wenn es sich um eine Website oder einen aktiven Status für das Feld handelt, vielleicht eine Validierung, vielleicht ein roter Strich, wenn Sie das falsche Format für das Passwort eingegeben haben. Vielleicht ist das Passwort zu kurz, solche Dinge. Vielleicht ein grüner Strich auf dem Feld, wenn alles in Ordnung ist. Nun, all diese Dinge lassen sich am besten zu Beginn erledigen. Andernfalls könnten Probleme wie das, auf das wir gerade gestoßen sind, auftreten. Bevor wir fertig sind, möchte ich die Position der Tasten am unteren Rand ändern , 32 Pixel vom Rand entfernt. Ich habe das schon vor anderen Projekten gemacht, und ich denke, es macht für den Benutzer wirklich Sinn. Im Grunde gewöhnt man sich an diese Position und es ist einfacher für den Benutzer. Du weißt, dass es immer unten ist. Sind schwul. Damit. Lass uns weitermachen. 37. Felder genau verwenden: Willkommen zurück. Lassen Sie uns daran arbeiten, neue Adresse und meine Entzündung hinzuzufügen. Dies sind zwei Bildschirme, die auf Feldern basieren. Und das war's auch schon. Beginnen Sie also mit einer Kopie des letzten Bildschirms und lassen Sie uns ihn von oben betrachten. Lassen Sie uns die Bibelbreite ersetzen und die neue Adresse hinzufügen. Sie können die Tabs entfernen , da wir sie nicht benötigen. Aber das zeigt uns, dass wir hier keine klare Trennung haben. Also müssen wir etwas tun. Lassen Sie uns im Grunde den Schatten von Effects hinzufügen. Das ist der einfachste Weg, damit umzugehen. Jetzt sollten die Einstellungen für die Unschärfe sein. Und zwei für das Y. Das ist ein sehr, sehr weicher Schatten, aber so sollte man sie generell angehen. Wenn Sie einen Schatten deutlich sehen können, ist er wahrscheinlich übertrieben. Okay, jetzt ziehen wir ein paar neue Felder, die wir für Anekdoten benötigen. Mir gefiel die Tatsache, dass Figma nach dem Kopierer erkennt, dass du mehr willst. Wenn Sie also Strg D drücken, wird die nächste Kopie automatisch korrekt platziert. Das ist wunderbares Zeug. Gute Arbeit. Figma. Wenn Sie bereit sind, machen Sie sich an die Arbeit und ersetzen Sie all diese Etiketten. Und daher habe ich mein Wireframe auf dem anderen Display, sodass ich sie ganz einfach auslesen kann. Deshalb lohnt es sich wirklich, zwei Displays zu haben , seine Stadt. Und dann ist die Hand, wähle die Stadt aus. Als nächstes haben wir den Straßennamen und sie wählten einen Hinweis mit der Aufschrift Market Street. Soweit ich weiß, ist das eine echte Straße in San Francisco. Wenn der Kunde von dort kommt, wird es sich dadurch realer anfühlen. Nun, die Hausnummer, sagen wir 548 mit etwas für den Hinweis. Dann endlich die Postleitzahl, die ich gegoogelt habe, es ist 94104 Dash 5401 Spiel. Sie kommen damit klar und lassen sie niemals bei ihren Standardeinstellungen. Sich wiederholende Inhalte sind wahrscheinlich das Schlimmste, was Sie als Designer tun können. Nun, zumindest einer von ihnen. Für die Stadt benötigen wir nun das Dropdown-Symbol. Aktivieren Sie es also bitte von diesem Schalter aus und verwenden Sie dann das Drop-down-Menü , um das Dreieck auszuwählen. Der Abstand muss von gepackt der Zwischenraum geändert werden , aber wir haben es schon zehnmal gemacht. Also ich denke, du schaffst das. Nun zur Schaltfläche sollte sie Adresse erstellen lauten. Und ich denke, das war es auch schon. Jetzt zoome ich auf den anderen Bildschirm, meine Informationen, weil es im Grunde genau dasselbe ist, dieselben Techniken. In der Zwischenzeit denke ich, dass das aufregendste kommende Feature das Content Grid ist. Dies ist eine Funktion von Adobe XD, mit der Sie mühelos viele Inhalte einfügen können . Nehmen wir zum Beispiel an, Sie haben 20 Vorschaubilder und möchten 20 verschiedene Bilder. Nun, anstatt sie einzeln einzufügen, ziehen Sie sie einfach rüber. Und das ist so, dass das Programm diese Sache macht. Außerdem ist es dasselbe mit Textebenen. Das ist eines der beeindruckendsten Dinge an Adobe XD. Und jetzt, da Adobe Figma gekauft hat, hoffe ich, dass es nur eine Frage der Zeit ist, bis wir diese Funktion erhalten. Nun, da ich Adobe kenne, kann es Wochen oder Jahre dauern . Kurz gesagt, es wird für Sie etwas geben. Es ist ein riesiges, mächtiges Unternehmen, aber einige Dinge sind unglaublich langsam, insbesondere einige Funktionen. Wie dem auch sei, das sind alle Felder schön zugeknöpft. Bitte stellen Sie sicher, dass Sie alles selbst erledigen und fahren Sie erst dann mit der nächsten Vorlesung fort mit der nächsten Vorlesung fort, wenn Sie diesen Schritt gemacht haben. Vielen Dank und wir sehen uns in einer Sekunde. 38. Das linke Menü erstellen: Willkommen zurück. Lassen Sie uns ein schönes linkes Menü gemäß den Materialdesign-Richtlinien entwerfen Beginnen Sie mit einer Kopie des vorherigen Bildschirms, obwohl Sie fast alles löschen müssen . Nur die Statusleiste ist nützlich. Also werden wir dieses Menü von Grund auf neu erstellen. Wenn Sie mit dem linken Menü nicht vertraut sind, erhalten Sie, wenn Sie auf das Hamburger-Menü klicken , wie Sie zu Ihren Einstellungen, Ihren Zahlungsmethoden usw. gelangen . Beginnen wir mit einem Rechteck für den oberen Bereich. Dies muss 720 mal 288 x 288 Pixel sein. Das ist das doppelte Standard-DP von 144. Jetzt machen wir es orange, obwohl dies ein Farbverlauf oder sogar ein Foto sein kann. Deshalb gefällt mir dieses Layout, obwohl es von Google Material Design stammt, um es richtig zu platzieren. Und danach platzieren wir das Logo darüber. Jetzt könnte das Logo durch einen Avatar ersetzt werden. Und wieder, das ist eine nette Funktion des linken Menüs. Das macht es interessanter. Aber hier ist die Sache mit dem Logo. Wir wollen nicht den Text, nur das Symbol. Jetzt könnten wir möglicherweise eine boolesche Eigenschaft erstellen, aber lassen Sie es uns einfach halten. im Rahmen „Ressourcen Ziehen Sie im Rahmen „Ressourcen“ einfach das Symbol nach draußen. Wie Sie sich das als eigenständigen Vektor ansehen können , keine Komponente, nichts. Das ist völlig in Ordnung. Bringen Sie es auf einen neuen Bildschirm und wir werden die Größe ändern. Ich denke, eins zu fünf eins zu fünf ist genau das Richtige für dieses spezielle Rechteck. Und das liegt daran, dass wir dadurch genügend Platz haben, um einige Details wie den Namen des Benutzers und seine E-Mail-Adresse hinzuzufügen einige Details wie . Nun, du fragst dich vielleicht, Chris, könnten wir hier ein Autolayout verwenden? 100 Prozent? Natürlich. Müssen wir jetzt ein automatisches Layout hinzufügen? Nein, nicht wirklich. Deshalb werde ich es einfach halten. Spielt das Logo 32 Pixel von der linken Seite ab. Und dafür kannst du das X-Feld verwenden. Oder Sie könnten möglicherweise einfach die Alt-Taste gedrückt halten und die Dinge messen und dann auf Ihre Thatwill-Tasten tippen und das ist in Ordnung. Nun, die Entfernung von oben spielt in diesem speziellen Moment keine Rolle. Darunter schreiben wir meinen Namen Christian Baron Quest Barron. In Bezug auf das Styling sollte ein kleinerer Titel in Ordnung sein. Richten Sie es links am Symbol aus und lassen Sie etwa zehn Pixel Abstand, mehr oder weniger. Natürlich. Schließlich die E-Mail-Adresse, Chris baron@yahoo.com. Das ist nicht meine echte E-Mail, also benutze sie bitte nicht. mir eigentlich nicht generell eine E-Mail, nutzen Sie die Plattform, um schnell in den Griff zu kommen oder natürlich den Diskursserver. Ich bin immer da. Okay? Dies sollte im Karosseriestil gezeigt werden, aber in reinem Weiß. Und wenn alle drei Elemente ausgewählt sind, können wir sie jetzt nach oben oder unten verschieben, um sie in der Mitte des orangefarbenen Rechtecks zu platzieren . Könnten wir nun noch einmal ein Autolayout verwenden? Sicher, natürlich, aber ich bin damit einverstanden, so wie es aussieht. Wenn wir weiter nach unten gehen, benötigen einige Symbole und eine Textebene. Jetzt muss der Hintergrund selbst allerdings reinweiß sein. Wählen Sie den Rahmen aus und ändern Sie die Füllung wieder in reines Weiß. Eine Sache, die ich nicht erwähnt habe, ist die Tatsache, dass das linke Menü tatsächlich zwei Drittel der Bildschirmbreite ausmacht. Aber wir haben uns voll auf weil das im Moment keine Auswirkungen hat. Also können wir so weitermachen wie es ist. Jetzt. Es ist Zeit für ein paar Icons. Ich habe schon etwas vorbereitet. Diese sind von flat icon.com. Ich habe ziemlich viel Zeit damit verbracht, nach ihnen zu suchen. Sie haben sie angebracht und dann auch von oben nach unten nummeriert , damit Sie es einfacher haben. Bitte. Verwenden Sie sie jedoch nicht für kommerzielle Zwecke. Sie haben sie nur, damit Sie zusammenarbeiten können , wenn Sie sie für Ihre eigenen Projekte verwenden möchten Wir müssen dafür bezahlen. Okay? Wenn Sie jetzt viele Symbole hineinziehen, können Probleme mit ihnen auftreten. Wenn ich z. B. versucht habe, die ersten fünf auszuwählen , schauen Sie, was passiert. Das fünfte Symbol wird gerade nicht ausgewählt. Ich muss eine viel größere Kiste machen, um sie mir zu holen. Es kann also ein bisschen frustrierend sein , es mit ihnen einfacher zu haben. Ich schlage vor, dass du das tust. Sobald Sie es geschafft haben, alle fünf auszuwählen , um eine Box auszuwählen, verwenden Sie bitte Shift a ändern Sie dann den Layoutmodus von horizontal, in diesem Fall von zwei vertikal. Jetzt bleibt nur noch , den Abstand festzulegen. Ich sage etwa 60 oder so. Und das liegt daran, dass wir versehentliche Klicks vermeiden wollen. Wir müssen also großzügig sein, ohne Abstand zu nehmen. Natürlich immer zentriert die Icons. Das ist ein absolutes Muss. Sie könnten versucht sein, sie links auszurichten, aber bitte wählen Sie die Mitte. Sie können das tun, indem Sie hier klicken. Okay, in Bezug auf den leeren Raum dort, d2 Pixel wie zuvor. Bleiben wir konsistent. Sie können gerne das X-Feld verwenden solange wir das automatische Layout eingerichtet haben. Das Tolle daran ist, dass Sie das Autolayout jederzeit entfernen können. Einfach hier auf das Minusende klicken, was dann damit? Jetzt werden sie standardmäßig gruppiert, aber keine Sorge, klicken Sie einfach mit der rechten Maustaste und wählen Sie Gruppierung aufheben. Nun, warum würdest du das tun wollen? Weil wir einige Textebenen hinzufügen möchten und es uns möglicherweise schwer fällt, sie richtig auszurichten, wenn sie zusammen gruppiert werden. Okay. Lassen Sie mich nun den ersten Gegenstand hinzufügen oder der Trupp befiehlt nur allgemein. Ich möchte, dass das im Label-Stil angezeigt wird. Also das heißt neuer Nieto 30, mutig. Wenn Sie es nicht haben, richten Sie es bitte als Textil ein. Das ist es, was die Farbe Blau völlig in Ordnung ist. Bitte richten Sie es vertikal aus und Figma sollte Ihnen mit diesen roten Linien helfen. Aber hier ist das Problem. Die Symbole befinden sich nicht in diesem Bildschirm. Der Bildschirm wird Frame für genannt, aber die Icons selbst befinden sich viel weiter oben. Im Grunde ziehe ich sie in Figma, aber ich hatte wahrscheinlich keinen Frame für abgewählt. Also hat Figma sie nicht hineingelegt. Mach dir keine Sorgen. Wählen Sie alle aus und ziehen Sie sie in Frame 40. Das wird das Problem beheben. Okay. Das ist ziemlich gut. Fantastisch. Ich werde das Wort schnell vorspulen, während ich alle anderen mache, in der Reihenfolge, wir werden Folgendes haben. Also die erste, meine Bestellungen, dann die Entzündungsadressen, welche Adresse? Zahlungsmethoden und kontaktieren Sie uns. Diese Ikonen sind nett und elegant, aber sie sind ziemlich seriös. Du könntest nach denen suchen, die etwas interessanter, vielleicht ein bisschen verspielter sind. Farbige mögen zwar verlockend sein, aber du musst darauf achten, dass sie die App nicht kindisch aussehen lassen , weil die Schrift schon auf der verspielten Seite ist. Also musst du sicherstellen, dass du dich davon fernhältst. kinderfreundliches Gebiet zu gehen, könnte gefährlich sein. Du willst semiprofessionell bleiben. Okay, das sieht gut aus. Lassen Sie uns unten eine Schaltfläche zum Abmelden haben. Also lass es uns geschehen lassen. Fügen Sie also eine weitere Textebene hinzu. Und wir werden so etwas machen. Der Text selbst ist nichts Besonderes. Wir werden dafür ein separates Symbol haben. Nun, nur als Randnotiz, wir hätten hier und da ein paar Autolayouts verwenden können. So könnten wir den Abstand zwischen den Symbolen und dem Text sowie zwischen den einzelnen Zeilen anpassen . Aber weißt du was, eigentlich lasse ich dich das erledigen , weil es ziemlich einfach sein sollte. Um das Design abzuschließen, trennen wir den Abmeldebereich durch Hinzufügen einer Trennlinie. Holen Sie sich also den Hotkey L für das Linienwerkzeug und zeichnen Sie einen heraus, 720 mit einem einzigen Pixel für die Dicke. Wählen Sie nun die körpergraue Farbe. Sie sollten einen als farbigen Stil gespeichert haben. Und die Sache mit allem, was bereit ist. Hier ist die Sache. Dies ist ein modernes, sauberes und professionelles linkes Menü. Wir könnten etwas Interessanteres machen. Aber noch einmal, ich überlasse es dir , weil ich dich als Jungfrau sehen möchte und dir viele Optionen bieten wollte. Also nochmal, du musst dir etwas Interessanteres einfallen lassen . Vorerst können wir weitermachen. 39. Interaktive Checkboxen erstellen: Willkommen zurück. Wir müssen uns um das richtige Menü kümmern. Beginne mit einer Kopie der linken. Entfernen Sie das Abmeldesymbol und den Text sowie alle anderen Symbole. Jetzt können wir den Teiler und die Textebenen beibehalten. Dies wird ein Filtersystem sein, das es dem Benutzer ermöglicht, die Ergebnisliste zu ändern. Es ist das, was du bekommst, wenn du oben rechts im Bildschirm auf dieses Symbol klickst , aber tu es. Für die erste Auswahl geben wir nun diese Kategorien ein. Also werden wir Spanisch, Amerikanisch, International, Indisch haben . Und endlich ist es Valiant, kein Tor, nimm dir Zeit damit. Sie könnten möglicherweise noch ein paar hinzufügen oder einige davon entfernen, stellen Sie nur sicher, dass sie passen. Lassen Sie uns nun das Rechteckwerkzeug verwenden , um ein Kontrollkästchen zu erstellen. 48 mal 48 Blätter für den Koordinatenradius als Pixel sind in Ordnung. Okay, schauen wir uns die Einstellungen an. Lassen Sie uns die Füllung deaktivieren. brauchen wir nicht. Und lasst uns den Schlag aktivieren oder das Brett das Tor. Jetzt ist die Farbe des Randes ziemlich wichtig. Die Dicke, bitte drei Pixel. Nun zur Farbe, also die Sache ist, wenn sie zu hell ist, scheint sie möglicherweise deaktiviert oder inaktiv zu sein. Dunkelheit kann in deinem Gesicht auch als zu sehen sein. Also habe ich mich für diesen Farbcode entschieden, C3, C3, C3. Jetzt können Sie es gerne speichern. Dann färbst du Stile hellgrau oder so ähnlich wie diese Checkbox-Farbe ein. Jetzt denke ich, dass Grey ein bisschen besser funktioniert. Nun, das wird tatsächlich eine Komponente sein. Lassen Sie uns das konvertieren, indem wir hier klicken. Wenn Sie bereit sind, verschieben Sie es bitte in den Bereich Ressourcen. Sie haben Spaß damit. Du wirst ziemlich viel herumschwenken müssen. Denken Sie daran, die Ansicht zu verkleinern, die Strg-Taste zu drücken , die Maus zu scrollen und die Leertaste zu verwenden, um zu schwenken. Hier wollen wir die Variante erstellen. Sie sollten mit dem Prozess inzwischen vertraut sein . Hier ist die Sache. Lassen Sie uns den Rand entfernen und das gesamte Rechteck orange machen . Nochmals, nimm dir Zeit damit. Beeil dich nicht. Okay. Wenn du bereit bist, müssen wir das Häkchen hinzufügen. Und wie immer habe ich etwas vorbereitet. Sie haben dieses Symbol, den Stapel, ziehen Sie es hinein, aber hier ist die Sache. Wenn Sie es innerhalb dieses Quadrats ausrichten möchten, achten Sie bitte darauf, dass Sie sich das Ebenen-Panel ansehen. liegt daran, dass es ziemlich leicht ist, desorientiert zu werden. Und Sie wissen vielleicht nicht, warum die Ausrichtungstools nicht wie erwartet funktionieren. Das ist was du willst. Okay? Übrigens, bitte achten Sie darauf, die Immobilie umzubenennen. Und eigentlich auch die beiden Varianten. Nennen Sie sie als aktiviert und ungeprüft als das, was die Immobilie selbst ist. Das ist ein Zustand, wahrscheinlich denke ich, dass das in Ordnung ist. Status des Staates, was auch immer für Sie am besten funktioniert. Also nochmal, das ist aktiviert und deaktiviert. Okay, lass uns zurück zum Bildschirm gehen. Wir müssen dieses Kontrollkästchen aus dem Asset-Panel ziehen und einige Schritte ausführen , um sie korrekt auszurichten. Jetzt, da ich im Hintergrund arbeite, möchte ich sagen, dass es mir wirklich Spaß macht, AB-Design zu unterrichten. Dieser Prozess selbst basiert auf einigen Prinzipien und Techniken. Sobald Sie sie gemeistert haben, können Sie sich wirklich auf das Wesentliche konzentrieren. Und so sieht die App aus, fühlt sich an und funktioniert. Wie ich schon sagte, millionenfach interessiert es niemanden, wie du die App erstellt hast. Es geht sie nichts an , Komponenten, Varianz und Autolayouts zu erstellen. Das Endergebnis ist das, was zählt, wie es aussieht, wie es funktioniert. Darauf kommt es an. Es spielt keine Rolle, ob Sie es in Photoshop, Figma und Adobe XD gemacht haben . Nun, natürlich möchten Sie die besten Tools für den Job und die fortschrittlichsten Techniken verwenden . Aber auch hier der Fokus auf das, was wichtig ist. Okay, zurück dazu. Nur für den Fall, dass Sie hier etwas Flexibilität benötigen, wählen Sie bitte jedes Kontrollkästchen und tidal zusammen und verwenden Sie dann Shift a. Das tun Sie für jede einzelne Option. Wir werden sie alle auswählen. Und dann hast du es erraten, wir machen ein anderes, das Autolayout. Und hier ist die Sache. Wir brauchen sie, weil das erste den Abstand zwischen dem Feld und dem Text steuert, das Kontrollkästchen im Text. Angenommen, wir wollen 20, nun, wählen Sie einfach all diese Frames aus und Sie können diesen Abstand schnell ändern, ist ganz einfach. Und dann hilft uns der große , den vertikalen Abstand zu ändern. Wir wollen z. B. 40 oder? Nochmals, geben Sie das einfach ein. Fantastisch. Um dem Benutzer einen gewissen Kontext zu geben, fügen wir einen Text mit der Aufschrift Nur anzeigen hinzu. Das ändert zwar das Layout ein wenig, aber ich denke, es ist in Ordnung. Es benötigt das Textdesign für den Haupttext und Grau für den farbigen Code. Wir wollen nicht, dass es zu sehr auffällt. Denken Sie daran, dies ist nur ein kleiner Teil des Menüs. Wir haben tatsächlich zwei Arten von Filtern. Wir haben also den Küchentyp und dann den Lebensmitteltyp. Wenn Sie fertig sind, gehen Sie den Trennsteg von unten nach oben. Wir wollen ungefähr 30 Pixel von der letzten Checkbox über den Teiler bis zur Linie. Fantastisch. Nun geht es darum, sowohl dem Kunden als auch dem Entwickler zu zeigen , wie dieses Panel aussehen soll. Stellen Sie also sicher, dass Sie den Status von zwei oder drei Kontrollkästchen ändern . Machen Sie sie orange, dann machen Sie bitte dasselbe für den zugehörigen Text. Mach sie einfach orange. Wenn du bereit bist, weiterzumachen, schnapp dir einfach alles hier und mache unten eine Kopie. Lassen Sie mich die Dinge jetzt beschleunigen, während ich die Lebensmittelart ändere. Das werden also Pizza, Tacos, Burger, Kaffee, die Werke sein. Ein paar Elemente passen vielleicht nicht in den Bildschirm, aber das ist keine große Sache. Eigentlich. Es ist großartig, weil wir zeigen müssen, dass dies scrollbar ist. Okay, jetzt ist das Ding. Wir haben den oberen Bereich unverändert und das ist nicht cool. Wenn Sie nun mit Filtern zu tun haben, sollten Sie im Allgemeinen eine Möglichkeit haben, sie zu löschen. Wenn wir also z. B. vier Checkboxen haben, wäre es ziemlich nervig , sie manuell zu deaktivieren. Also lass uns das machen. Lassen Sie uns das Logo und die E-Mail-Adresse entfernen. uns die verbleibende Textebene Lassen Sie uns die verbleibende Textebene auf vier aktive Filter ändern. Und auf der rechten Seite möchte ich ein Symbol verwenden. Aber ich denke, diese Textebene könnte etwas besser funktionieren. Es wird etwas nützlicher sein, breiter zu sein. Geben Sie also klar und in Großbuchstaben ein, natürlich dieselbe Schrift. Eine Sache jedoch: Bitte lassen Sie auch 32 Pixel auf der rechten Seite. Auf der linken Seite. Das ist ziemlich einfach, weil wir das X-Feld haben, das uns sehr hilft. Jetzt hätten wir Anleitungen benutzen können, aber insgesamt ist es in Ordnung. Okay, lass uns die Größe des Rechtecks ändern. 2112 Pixel, 112 Pixel, die Standardhöhe. Okay, wenn du bereit bist, kannst du den Text zentrieren und ich denke, wir sind fertig damit. Nun, nicht zu 100% mit dem Intel-Bildschirm, aber wir werden es nach der kurzen Pause beenden. Bitte achten Sie darauf, diesen Punkt nachzuholen. Ich danke dir vielmals. 40. Umschaltschalter erstellen: Willkommen zurück. Das rechte Menü sieht gut aus, aber wir müssen ein paar Schalter erstellen. Dies alles basiert auf dem Brief. Ich zeige es während der Aufnahme nicht , weil es den gesamten Fortschritt verlangsamt. Aber stellen Sie sicher, dass ich es mir ständig ansehe und Sie dasselbe tun sollten. Okay. Lassen Sie mich eine Kopie der Sendung im Fernsehen sowie drei Einträge machen . Mach das. Erstellen Sie eine Kopie dieses Autolayouts, das große. Und dann musst du es entfernen. Denken Sie daran, verwenden Sie das Minussymbol auf der rechten Seite, dieses. Wenn das erledigt ist, haben Sie standardmäßig einen Frame. Ich kann sagen, dass ich das an Figma liebe, aber es ist was es ist. Wir müssen mit der rechten Maustaste klicken und dann Gruppierung aufheben wählen. Jetzt steht es Ihnen frei, diese Kopien anzufertigen. Hätten wir nun einige neue Textebenen manuell eingeben können? Ja, natürlich. Aber ich habe das Gefühl, dass wir uns damit vertraut machen müssen, uns die Hände schmutzig zu machen. Das Gleiche gilt für das Arrangieren von Dingen. Du wirst sehen, du wirst viele Ebenen verschieben müssen . Dies ist ein echtes Projekt , bei dem Sie eigenständig denken müssen. Wenn du dich nicht wohl dabei fühlst, Dinge so zu bewegen, wirst du ein großes Problem haben. Die meisten Projekte sind nicht nett und ordentlich. Je chaotischer sie sind, desto ungeschickt sind sie. meisten Fällen ist das, was Sie in einem Kurs sehen eine sehr aufgeräumte Version, die vorbereitet als einstudiert wurde. In diesem speziellen Fall habe ich dieses Projekt tatsächlich schon einmal in Photoshop und Adobe XD erstellt . Ich bin damit ziemlich vertraut, aber ich versuche trotzdem mein Bestes, um Ihnen ein authentisches Erlebnis zu bieten , indem einige Fehler und unordentliche Betten einfüge. Okay, hier sind wir. Ich habe die Kontrollkästchen entfernt und die gesamte Textebene sollte blau und linksbündig mit allem anderen ausgerichtet sein, schön und sauber. Lassen Sie uns nun einen Kippschalter erstellen. Beginne allerdings mit einem Rechteck , das 72 mal 33 z groß ist. Warum nun diese spezielle Größe, 72 mal 30? Nun, ich habe die anderen Messwerte gemessen und das scheint am Geld zu liegen. Mach es sehr abgerundet. Ich verwende gerne superhohe Werte. Nun zur Farbe, lass uns C3 verwenden. C3, C3. Du solltest es haben, dann gehst du zum Style-Panel. Okay, jetzt richte es bitte auf die rechte Seite aus. Sie können dafür die Klartextebene verwenden. Als nächstes auf der Liste müssen wir uns das Ellipsenwerkzeug schnappen und einen perfekten Kreis bilden. Der Hotkey ist 0, 0 von Circle. Ich denke, es ist so , dass es Sinn macht. Sie können die Umschalttaste gedrückt halten oder das Eigenschaftenfenster verwenden. Ich suche nach den 48 mal 48, die gleiche Größe wie die Checkboxen. Das muss weiß sein, aber natürlich können wir sehen was mit dem weißen Hintergrund vor sich geht. Dafür aktivieren wir also einen Schlagschatten. Nun, die Einstellungen , die ich festgestellt habe, funktionieren im Folgenden am besten. Es sind sechs für die Unschärfe und dann zwei für das Y-Feld, 25% Opazität. Jetzt muss der Kreis auf der linken Seite platziert werden , um zu zeigen , dass er ausgeschaltet ist. Stellt natürlich sicher, dass es vertikal zentriert ist. Wenn Sie bereit sind, verschieben Sie es in den Resources-Frame. Denken Sie daran, dass alles gut strukturiert ist, hervorragend funktioniert. Die Idee mit Seiten ist, dass Sie eine sehr schöne Präsentation erstellen können , sodass jeder es leicht haben kann, Ihr Projekt zu nutzen. In diesem speziellen Fall mache ich es zu Lernzwecken. Also werde ich es nicht in Seiten aufteilen , weil das nicht ideal ist. Ganz zum Schluss. Es ist eigentlich ganz einfach. Lass uns das machen. Jetzt. Bewege den Kreis nach rechts und ändere das Rechteck von unten nach orange. Jetzt sollte die Benennung einfach ein- oder ausgeschaltet sein. Und Sie können die Immobilie umbenennen, wenn Sie möchten. Nochmals Status State, so etwas. Jetzt ging der letzte Schliff zurück zum Bildschirm, und lassen Sie uns drei davon oben auf dem Bildschirm hinzufügen. Also lass uns die Zeile mit klarem Text schreiben. Aber hier ist die Sache. Es wird schwierig sein, sie richtig anzuordnen. Wenn Sie versuchen, sie vertikal am Text auszurichten, kann sich der Text aus verschiedenen Gründen verschieben. Darauf werde ich nicht eingehen. Also im Grunde tust du dir auf diese Weise keinen Gefallen. Aus diesem Grund werden wir das automatische Layout für jede einzelne Zeile anwenden. Dann machen wir es mit einem großen Autolayout, einfach so. Und wir werden den Abstand von unten messen. Ich glaube, wir haben es auf 40 gesetzt. Ja. Das sieht fast richtig aus. Bitte müssen Sie auf ein schalten und das ist das, was auf Aus gestellt ist. Ich finde, so sieht es interessanter aus. Aber die Etiketten selbst, naja, eine Sache, der Auftrag sagte etwas über die Vorlieferung aus. Akzeptiere Kreditkarten und 60 Minuten oder weniger. Oh, übrigens, das ist ein großartiger Unterrichtsmoment. Wenn Sie den Text ändern, kann Ihnen das automatische Layout einige Kopfschmerzen bereiten. Keine Sorge. Hier sind die Fakten. Ändern Sie die Breite auf fest. Das wird das Breitenfeld öffnen . Und hier kannst du 656 eingeben. Sie können sich diesen Wert aus dem Divider merken. Das ist die gesamte Bildschirmgröße -32 auf beiden Seiten, das sind also 64. Dann insgesamt. Schließlich wurde das Autolayout von gepackt zu Leerzeichen dazwischen geändert . Und eigentlich ist das ein Job, gut gemacht. Der gesamte Bildschirm sollte eingerichtet sein. Obwohl es nicht allzu kompliziert schien. Diese beiden Menüs haben uns zu guter Arbeit gebracht. Wenn Sie es schaffen, hierher zu kommen, herzlichen Glückwunsch, es war nicht einfach. Aber jetzt machen wir eine kurze Pause und wir werden in einer Sekunde weitermachen. Danke. 41. Design mit Komponenten: Willkommen zurück. Es ist Zeit, meine Zahlungsmethoden zu erstellen und ich denke, dass wir dafür eine Karte verwenden sollten. Und da ich weiß, dass es einen anderen Bildschirm gibt, der dasselbe Kartendesign verwenden wird , sind das meine Adressen. Dann sollten wir daraus eine Komponente machen. Okay, lass uns mit einer Kopie meiner Entzündung beginnen. Lassen Sie uns alle Felder entfernen, aber wir behalten die Schaltfläche bei. Hier sollte nun „Neue Karte hinzufügen“ stehen. In der Vergangenheit habe ich eine schwebende Aktionstaste und FAB verwendet, aber ich möchte, dass sich der Benutzer mit der Position dieser Taste sehr wohl fühlt . Also im Grunde sollte es immer unten sein. Also werden wir bei dieser Position bleiben. Nun zur Aktionsleiste Lassen Sie uns den Titel in Zahlungsmethoden ändern. Übrigens könntest du hier in der Aktionsleiste sogar ein Plus-Symbol haben , um eine neue Kreditkarte hinzuzufügen. Es liegt wirklich an dir. Diese Entscheidungen sollten darauf basieren, was für den Benutzer am besten ist. Ein Plus in der Aktionsleiste ist wahrscheinlich nicht ideal. Aber wenn man bedenkt, dass Sie es nicht allzu oft verwenden , wissen Sie, könnten Sie es möglicherweise insgesamt verwenden. Ich bin zufrieden mit dem orangefarbenen Knopf hier. Bevor wir nun etwas Ausgefallenes tun, fügen wir einfach die Textebenen hinzu, das Fundament. Die erste wird also die Primärkarte sein, was dem Benutzer hilft, zu wissen, welche Standardkarte, falls vorhanden, ist . ehrlich zu sein, sollten wir nun den Bildschirm einbeziehen , wenn keine Zahlungsmethode ausgewählt wurde. Aber darüber werden wir später sprechen. Kurz gesagt, wir werden einige grundlegende Bildschirme in den Medienbildschirmen überspringen einige grundlegende Bildschirme in den Medienbildschirmen weil sie nichts Besonderes sind. Wir könnten mindestens zehn weitere Bildschirme hinzufügen. Aber auch hier wird es nicht so aufregend sein , Knoten nützlich zu sein . Okay, als nächstes fügen wir Bearbeiten hinzu. Das ist dick. Was nun die Kartennummer angeht, verwende ich ein Dunkel, das mit Alt Z erzeugt wurde , das ist B9. Also nochmal, das ist, indem du Alt und die Zifferntasten auf deiner Tastatur benutzt, 0139. Und sobald Sie einen Punkt haben, kopieren Sie ihn einfach ein paar Mal und fügen Sie ihn ein paar Mal ein. Denken Sie daran, vier Charaktere pro Gruppe, das sind insgesamt vier. Wenn du mit einem Punkt nicht auskommst, benutze einfach einen Stern. Das ist Schicht acht. Okay, für die letzte Gruppe sollte das sichtbar sein, damit du die Karte identifizieren kannst. Fantastisch. Jetzt, zur Zeit keine Diskussion über das Styling. Lassen Sie uns zum Beispiel mit dem Verfallsdatum Null für den Schrägstrich 28 abschließen und jetzt können wir darüber sprechen, daraus eine wiederverwendbare Karte zu machen . Okay, also lass uns das für die erste Zeile machen. Lassen Sie uns das kleinere Titeldesign verwenden falls Sie es nicht haben. Das bedeutet neue Nadel schwarz, 26 Pixel. Aber die zweite Zeile, Lass uns das Körperstyling verwenden. New Nieto, unregelmäßig 24 Pixel. Farbe angeht, muss die Bearbeitung nun orange sein, da es sich um eine Aktion handelt. Sie muss zeigen, dass Sie darauf klicken können. Für den Rest. Wir verwenden einfach Blau. Es ist super einfach. Könnten wir möglicherweise Grau für die zweite Zeile verwenden? Ja, ich denke, das funktioniert auch. Es liegt wirklich an dir. Ich bleibe aber bei Blau. Für die Karte selbst benötigen wir eine Reihe von automatischen Layouts, um das zu vereinfachen. Ich werde eine weitere Aktion hinzufügen, primär machen. Das ist hier nicht nützlich, aber wir werden es für die Sekundärkarten benötigen. Stimmt das? Jetzt nehmen wir es eins nach dem anderen. Wählen Sie diese beiden Aktionen aus und richten Sie die automatische Layoutverschiebung ein. Weil wir in der Lage sein wollen, den Abstand zwischen ihnen zu kontrollieren. Sagen wir in diesem Fall wahrscheinlich 50. Okay, dann müssen alle drei Textebenen eine Zeile bilden. Also nochmal, schnapp sie dir und benutze dann Shift a. Jetzt können wir den Abstandsmodus von Pack ändern, was der Standardabstand zwischen ihnen ist, weil sie natürlich aufgeteilt werden müssen. Jetzt ist nichts passiert, aber das ist völlig in Ordnung. nun zur zweiten Reihe Nehmen Sie nun zur zweiten Reihe beide Ebenen und drücken Sie die Umschalttaste. Das Gleiche, wir wollen sie auf Abstand dazwischen statt auf Rücken setzen . Ich hoffe, bis jetzt macht alles Sinn. Um schließlich ein einziges Feld für all diese Leute hinzufügen zu können , wählen wir alles wie folgt aus und verwenden dann die Schicht ein letztes Mal. Dies gibt uns nicht nur die Möglichkeit schnell einen weißen Hintergrund zu erstellen, sondern wir können auch den vertikalen Abstand zwischen ihnen steuern . In diesem Fall, sagen wir zum Beispiel wir suchen 32 auf beiden Seiten und 16 für die obere und untere Seite. Das ist unsere Polsterung. Natürlich behalten wir keine quadratischen Kanten bei. Die waren nicht, ändere es z. B. auf zehn Pixel und ich denke, das sollte gut sein. Okay, zentriere es auf dem Bildschirm, falls du es noch nicht getan hast. Jetzt könnten wir das so flexibel wie möglich gestalten, aber ich versuche immer, die Dinge so einfach wie möglich zu halten. Wählen Sie also den größten Rahmen aus, den mit der weißen Füllung, und ändern Sie ihn auf eine feste Breite. Und das wird das W-Feld öffnen. Gib 656 ein. 656 Pixel, und das sollte es sein. Aber weißt du, was ich zu sagen habe, 40 Pixel zwischen diesen beiden Zeilen machen nicht viel Sinn wenn man bedenkt, dass wir eine so kleine Bettwäsche haben. Lassen Sie uns es also auf 20 reduzieren, aber die Polsterung für die obere und untere Kante auf 32 erhöht . Falls Sie das Gefühl haben, dass es zu viel ist, können Sie es leiser stellen. Aber insgesamt bin ich zufrieden damit. Okay, machen wir daraus eine Komponente. Ich mag den Hotkey nicht. Ich habe meine Maus immer in der Mitte des Bildschirms. Also ist es für mich einfacher , von oben auf das Symbol zu klicken. Okay, jetzt ziehen wir eine Kopie heraus und zentrieren sie horizontal. habe ich nicht erwähnt. Halten Sie jedoch 32, 32 Pixel von der ActionBar fern. Man muss wirklich konsistent bleiben , weil es tatsächlich hilft. Okay, jetzt muss für die gewählte Karte die primäre Karte entfernt werden, muss für die gewählte Karte die primäre Karte entfernt werden da es offensichtlich bereits die primäre Karte ist. Und um zu zeigen, dass es derzeit ausgewählt ist, machen wir das. Wir können ein dickes Brett hinzufügen. Die Pixel für die Farbe Orange wären etwas zu viel. Also lass uns mit Blau und Gelb weitermachen. Ich glaube nicht, dass es genug Kontrast hätte und es könnte in dieser Situation ein bisschen laut sein. Okay, jetzt ziehen wir die zweite Karte aus den Assets. Dieser hätte das Primary so lassen sollen, wie es ist. Und damit es sich echt anfühlt, ändern Sie bitte die letzten vier Ziffern der Kreditkarte sowie das Ablaufdatum. Mir gefiel die Tatsache, dass Stigma und weiß, dass ich mich im Textbearbeitungsmodus befinde. Ich muss also nur einmal klicken , um diese Textebenen zu ändern. Tolles Zeug. Okay, wenn du bereit bist, gehe bitte zu meinen Adressen. Ich werde ziemlich schnell ins Nasse zoomen. Und während ich im Hintergrund arbeite, möchte ich Ihnen ein wenig über Figma erzählen. Welche anderen Designprogramme gab es vor ein paar Jahren auf dem Markt, z.B. Affinity oder Sketch, figma, die Designwelt im Sturm. Sie produzieren großartige Inhalte und sie haben es wirklich geschafft, eine Community aufzubauen und all die kleinen Dinge, nach denen die Leute gefragt haben. Nun, Figma hat geliefert, obwohl Figma ein superkleines und das neue Unternehmen war Sie haben es im Vergleich zu Adobe geschafft, das im Grunde unbegrenztes Geld, unbegrenzte Gewinne, unbegrenzte Mitarbeiter und Talente hat . Nun, sie bewegten sich tatsächlich ziemlich langsam. Deshalb habe ich auch einige Leute eingeschlossen. Wir sind ein bisschen enttäuscht vom Zustand von Adobe XD. Die Updates kamen einfach nicht schnell genug. Ich bin mir nicht hundertprozentig sicher, aber wenn ich mich richtig erinnere war Adobe XD mindestens zwei Jahre in der Betaversion, mindestens länger, die Windows-Version, die erste kam heraus, ich glaube, es war nach dem Jahr, vielleicht anderthalb Jahre nach der Mac-Version, war ich wütend. Ich war so wütend. Siehst du, ich war schon immer ein Windows-Fan, aber ich denke ernsthaft darüber nach, mir einen Mac zuzulegen , nur um Adobe XD zu verwenden. Und als ich dann sah, dass Adobe Updates einfach nicht schnell genug herausbrachte, wuchs die Frustration. Und auch hier glaube ich nicht, dass ich der einzige bin , der sich so fühlt. Deshalb rufen Figma im Grunde wie Feuer an. Und damit sind wir bereit, weiterzumachen. Wir haben diese beiden Bildschirme in Rekordzeit fertiggestellt. Außerdem können wir jederzeit zurückkommen und Anpassungen an der Verwendung von Komponenten vornehmen. Danke. Ich sehe dich in einer Sekunde. 42. Hier ist, wie du einen schönen credit erstellen kannst: Willkommen zurück. Ich habe erwähnt, dass wir nicht jeden einzelnen Zwischenbildschirm entwerfen werden, wenn Sie beispielsweise keine Adresse haben oder keine Kreditkarte in das System eingegeben wurde. Aber wir sollten das Beste aus diesen wenigen Bildschirmen machen ein Benutzer seine Meinung ändern könnte , ob er z. B. den Kreditkartenbildschirm verlassen könnte, wenn er einen zur App hinzufügt. Beginnen wir damit, eine Kopie des letzten Bildschirms zu erstellen. Entferne diese beiden Karten , weil wir sie nicht brauchen werden. Etwas zusätzlicher Reinigungsservice. Lassen Sie uns den Call to Action ändern, um die Kreditkarte zu speichern , macht wahrscheinlich die wichtigste Aktion. In der Aktionsleiste selbst sollte hier Zahlungsmethode hinzufügen stehen. Übrigens, falls Sie schlau damit werden möchten, könnten Sie schickere Titel hinzufügen, z. B. wie werden Sie bezahlen? Jüngere Menschen wissen das sehr zu schätzen. Wenn der Kunde Ihnen nun ein Briefing gibt , das sich an ein jüngeres Publikum richtet, scheuen Sie sich bitte nicht, Ihr Exemplar aufzupeppen. Im schlimmsten Fall gefällt es dem Kunden nicht und du gehst zurück zu den langweiligen Sachen. Aber falls es ihm gefällt, könntest du dir einen Bonus holen oder zumindest einen sehr guten Eindruck hinterlassen. Also würzen Sie die Dinge auf, wann immer Sie können. Okay, kümmern wir uns um die Felder. Wussten Sie übrigens, dass Sie den Anzeigemodus im Asset-Panel ändern können ? Ich bevorzuge also die Thumbnail-Version, aber es gibt auch eine Liste , die mir zeigt, wie chaotisch ich mit meiner Benennung bin. Also würde ich den Schalter vorlesen , um diese Peinlichkeit zu verbergen. Okay, lassen Sie uns für die Felder hinzufügen, obwohl sie sich daran erinnern werden, sie zentriert auf der Leinwand zu platzieren. Der erste muss das in Pixeln von der Aktionsleiste entfernt sein. Ändern Sie den Status auf die einfache BG-Version. Bitte vergessen Sie nicht, einen passenden Titel und eine passende Hand hinzuzufügen. Das dauert zwar einige Zeit, aber es ist völlig okay. Nun, die ersten beiden Felder, ich bin die Kreditkartennummer und dann der Name auf dem Auto. Nun zur Kreditkartennummer, ich fand es am besten, 12345678 usw. zu verwenden. Um ehrlich zu sein, sieht es gar nicht so toll aus, die Z TO-Taste zu drücken. Nun, die anderen beiden Felder müssen ein Verfallsdatum und das V. V. sein ein Verfallsdatum und das V. V. V. Das CVD-Ding ist nun die Kurznummer auf der Rückseite der Karte. Da diese beiden Felder nicht die volle Breite haben müssen , weil sie ziemlich klein sind. Dies ist eine gute Gelegenheit, uns daran zu erinnern , wie wir sie herstellen, die es auch nicht waren. Und das geschieht durch die Verwendung einer festen Breite für die Instanz. Und dann gehe eine Ebene hinunter und richte das Feld selbst ein, um den Behälter zu füllen. Okay, ich hoffe, das macht langsam Sinn. Das Feld ist in irgendwas drin. Wenn das etwas größer ist und das Feld als Füllung gesetzt ist, dann wächst das Feld natürlich entsprechend und umgekehrt. Die Standardeinstellung in unserem Fall ist jedoch , dass das Feld auf fest gesetzt ist. Egal, wie sehr wir die Breite des Hauptcontainers ändern, das Feld selbst, es macht sein eigenes Ding. wollen wir nicht. Deshalb ändern wir es, um den Behälter zu füllen. Fantastisch. Jetzt ist alles in Ordnung mit diesen vier Feldern. Aber hier in diesem Grün gibt es nichts Neues oder Besonderes. diesem Grund nehmen wir uns die Zeit , etwas zu entwerfen, das über all diese Bereiche hinausgeht. Also schnapp sie dir alle und bewege sie nach unten. Beginne mit einem Rechteck , das 656 mal groß ist, sagen wir 350 oder etwas Ähnliches. Zentrieren Sie es und machen Sie es reinweiß. Die Idee ist, ein Kreditkartendesign zu erstellen, das Ihnen zeigt, was Sie von unten in diese Felder gesteckt haben. Während Sie also den Text eingeben, sehen Sie, wie sich das Auto ändert. Das ist ganz nett. Ich habe es in der Vergangenheit gemacht und es ist eine nette Geste. Also, ist das nötig? Nein, ist es nicht. Aber es macht den Bildschirm interessanter und er ist nicht schwer zu codieren, also ist er ziemlich billig. Runden Sie nun den Koordinatenradius ab, indem Sie zehn Pixel einfügen, und fügen wir dann den Standard, den Schatten, hinzu. Das wird also die Grundlage für unsere Wache sein. Holen wir uns das Tippwerkzeug und schreiben die Kreditkarte aus. Richten Sie dies als großen Dipol ein und ändern Sie ihn dann in Orange. Jetzt könnten wir möglicherweise Visa oder MasterCard schreiben, aber lassen wir es generisch bleiben. Dann verwenden Sie bitte dieses Symbol , das Sie angehängt haben. Das nennt man Chip. Es ist schon goldgelb und hat eine ziemlich gute Größe. Alles, was Sie tun müssen, ist 32 Pixel von beiden Rändern entfernt zu platzieren . Die linke Seite und die Oberseite. Halten Sie dafür die Alt-Taste gedrückt und tippen Sie auf Ihre Pfeiltasten. Ich bin mir sicher, dass es inzwischen zur zweiten Natur wird, während du mitarbeitest. Nun zur Zahl, wir werden genau dasselbe Format verwenden. Ziehen Sie also einfach eine Kopie heraus. Nun, hier ist die Sache. Wir müssen die Hand vom Feld aus messen. Aber das ist ein großartiger Moment für den Unterricht. Jetzt möchten Sie vielleicht kopieren und einfügen, oder? Aber wenn du das tust, bekommst du dieses spezielle Styling und Figma. Und das wollen wir natürlich nicht. Deshalb haben wir die Kopie gemacht. Wir wollen die vorherige Formatierung, oder? Der beste Weg, um jegliche Formatierung zu entfernen, selbst wenn Sie in Microsoft Word auf etwas von einer anderen Website stoßen, ist dieser. Verwenden Sie ein Standard-Notepad-Programm. Also füge es dort ein und kopiere es dann erneut und füge es im Word - oder Big-Modus ein, was auch immer. Und wenn Sie das tun, behalten Sie die vorherige Formatierung bei, in diesem Fall dieses klobige Format. Auch hier gehe ich immer zu Notepad, wenn ich Sachen in E-Mails oder Texteditoren kopiere und einfüge. Und jetzt weißt du, dass dies auch für Figma gilt. Zurück zu dem Punkt , an dem wir zwischen den einzelnen Gruppen ziemlich viel Freiraum lassen müssen . Der einfachste Weg, die manuelle Methode, das zu tun, hat die Leertaste gedrückt und dann zwischen jeder einzelnen Gruppe Copy & Paste verwendet. Die Frage ist nun, könnten wir ein automatisches Layout verwenden? Sicher, das sind 100%, aber so haben wir es zu Zeiten von Photoshop gemacht. Was ich nun in dieser manuellen Version machen werde, ich werde Alt verwenden, um den Abstand auf der rechten Seite zu überprüfen . Und solange du keinen großen Unterschied hast, werde ich damit einverstanden sein. Auch hier könnten wir die gesamte Karte mit Autolayout erstellen, aber ich weiß, dass einige Leute Autolayout hassen. Deshalb werde ich von Zeit zu Zeit die Dinge vereinfachen. In Bezug auf diese Dichte sollten 20 Pixel zwischen dem Chip und dieser Ebene gut sein. Aber die orange Farbe funktioniert nicht. Entscheiden wir uns stattdessen für Blau. Gelb könnte auch funktionieren, aber wir müssten das weiße Rechteck in etwas anderes ändern , das etwas dunkler ist. Und dann denke ich, das wäre zu viel Arbeit, zumal wir einen farbigen Haupthintergrund haben. Das wäre also ein bisschen schwierig. Okay, jetzt zum Ablaufdatum, lassen Sie uns die Textebene hinzufügen. Dies sollte sich im Körperstyling zeigen. Und dann für die Farbe, lass uns mit Grau weitermachen. Was den Namen angeht, bin ich ehrlich gesagt unentschlossen. Ich denke, das Label ist wahrscheinlich das Beste dafür. Der knifflige Teil ist nun, dass wir jede Menge Textebenen haben . Also müssen wir sicherstellen, dass sie nicht zwischen ihnen kollidieren. Aber ja, ich denke, das war es auch schon. Oh, etwas, das ich fast vergessen hätte. Wir haben ein weiteres Symbol für die rechte Seite. Schau dir die schlechten Dinge an, bevor wir enden. Und natürlich die Felder darunter anheben. Aber ja, das ist die Art von Dingen, die Kunden schätzen, wenn Sie die Extrameile gehen. Das war nicht im Briefing, es war nicht in den Wireframes. Ich habe es mir gerade ausgedacht. Manchmal lehnt der Kunde die Idee ab. Er mag es vielleicht nicht. Aber das war was, 10 Minuten Arbeit, vielleicht 20 Minuten, wenn du keine Symbole hast. Aber ist es aufgehoben für die Kunden, die wirklich etwas Besonderes wollen die etwas mit etwas Zink wollen, denke ich, ja, übrigens, alleine, bitte mach diese Karte neu mit Autolayout und mache es zu einer Komponente und teile es mit mir. Ich würde gerne sehen, wie du das schaffst, aber ehrlich gesagt sollte es gar nicht so schwer sein. Lass es mich im Kommentarbereich wissen. Aber ja, damit können wir weitermachen. Ich danke dir vielmals. 43. Gestalte eine schöne Bewertungsseite: Willkommen zurück. Wir müssen eine schöne Seite für Bewertungen erstellen. Also lass uns an die Arbeit gehen. Der Wire-Frame zeigt mir, dass dies mit der Adresse des Restaurants geteilt werden muss. Lassen Sie uns also eine Kopie des Anmeldebildschirms erstellen. Entferne die Felder, weil wir sie nicht benötigen. Und sie sind nicht der Meinung, dass wir hier einen Button haben sollten es auch eine Frage gibt , wie Bewertungen geschrieben werden sollen. Wenn es keinen Knopf gibt. In meinem eigenen Unternehmen versende ich z. B. an jeden einzelnen Kunden personalisierte E-Mails mit einer bestimmten Länge. Vielleicht macht das gleiche Verfahren hier. Wie auch immer, zurück zu nass. Lassen Sie uns den Titel umbenennen, um ihre Pizzalieferung, den Namen des Restaurants, die Tabs. Nun, stellen Sie sicher, dass der Text zentriert damit wir ihn nicht neu positionieren müssen gedrückter Maustaste ist der schnellste Weg. Das ist alles gut, alles vorbereitet. Die erste sollte also Bewertungen sein und dann die zweite natürlich Adresse. Letzteres ist nun nützlich, falls Sie sehen möchten, wie weit das Restaurant entfernt ist, oder wenn Sie die Bestellung vielleicht selbst abholen möchten. Es macht also Sinn. Lassen Sie uns nun diese beiden Anleitungen verwenden. Es ist also schwarz und orange. Und dann sollte das für den inaktiven normal und grau sein. Das klingt nach einem Hip-Hop-Song , von dem ich glaube, dass er schwarz-gelb war. Wie auch immer, zurück dazu. Fügen wir also das Chip-Design hinzu, das die Anzahl der Bewertungen und den Prozentsatz enthält die Anzahl der Bewertungen und , obwohl es eine Füllung hat, wir können es jederzeit entfernen. Außerdem können wir diese Polsterung loswerden. Um ehrlich zu sein, müssen wir das nicht wirklich tun, aber ich wollte dir so viele Situationen wie möglich zeigen, also habe ich es gemacht. Okay, jetzt stellen wir sicher , dass es richtig ausgerichtet ist. Apropos die unnötigen Dinge, dieses Grün ist eigentlich ein Pop-up. Frag mich nicht warum. Vertrau mir einfach, als solches brauchen wir ein X-Symbol, nicht den Zurück-Pfeil. Lassen Sie uns diese Gelegenheit nutzen, um es auszutauschen. Wenn du die Aktionsleiste auswählst, haben wir hier zwar ein Drop-down-Menü, einen Icon-Tausch, aber es gibt kein X in unserer Liste. Keine Sorge. Wie immer habe ich etwas vorbereitet. Es heißt x und ist angehängt. Ziehen Sie diesen Typ nun in den Resources-Frame und machen Sie daraus eine Komponente. Bitte vergiss nicht, ein automatisches Layout hinzuzufügen, damit es gut aussieht. Wenn du fertig bist, können wir zur Aktionsleiste zurückkehren. Standardmäßig werden uns die bevorzugten Symbole angezeigt, aber wir können sie ändern. Aber beachte, wie es Sinn macht. Wir haben hier langsam ziemlich viele Komponenten, und wir müssen ein bisschen scrollen. Deshalb ist Preferred sehr nützlich. Okay, zurück dazu. Wir brauchen noch ein paar Dinge. Zuerst geben einige Texte acht, positiv und dann negativ, ein. Diese sollten sich auf einzelnen Textebenen befinden. Und weil wir 8,2 haben, ändern wir den Text oben auf 80 Prozent und dann auf Stimmen. Und das liegt daran, dass ich das so real wie möglich machen möchte . Für das Styling. Lass uns mit dem Körper gehen. Wir werden das Grün aus dem Emoji für das positive, für die positiven Stimmen probieren dem Emoji für das positive, . Dann für die negativen Stimmen. Nun, wir können Farben aus dem Asset-Panel probieren. Also ich schätze, wir müssen ein wütendes Emoji reinziehen. Dann können wir es probieren, und jetzt kann ich es entfernen. Eine Sache, die ich an Photoshop geliebt habe, war die Tatsache, dass man Farben von absolut ausprobieren konnte. überall, auch außerhalb des Programms, Wählen Sie überall, auch außerhalb des Programms, solange Sie das Pipettenwerkzeug hatten, aus, dass Sie hier , zumindest in dieser Version von Figma , nach dem Öffnen des Farbwählers manuell auf die Pipettenwerkzeug und wählen Sie dann eine Farbe aus einem anderen Designprogramm. Dieser zusätzliche Klick scheint ein bisschen komisch. Außerdem können Sie von überall aus proben , z. B. von der Schnittstelle. Wie dem auch sei, lassen Sie uns darauf zurückkommen. Fügen wir ein weiteres Rechteck hinzu, das für die Höhe etwa 400 Pixel breit ist, lassen Sie uns mit 20 Pixeln gehen, z. B. das ist also der Balken, der uns visuell die Anzahl der guten Stimmen anzeigt. Mach es super abgerundet. Und für die Farbe Grün möchten Sie natürlich diese Farbe zu Ihren Stilen hinzufügen. Sei mein Gast. Lass uns jetzt weitermachen. Stellen Sie also sicher, dass Sie ein bisschen mit der Textebene gesendet haben. Und wenn Sie fertig sind, tun Sie bitte dasselbe für die negativen Stimmen. Aber dieses Mal ab 400. Teilen wir das durch vier und das sind 100. Warum haben wir es nun geteilt? Weil ich positive und zwei negative Stimmen habe. Also gib dir ein Verhältnis für das Hundert+101 , was mich stört. Und so sieht das auf diesem farbigen Hintergrund aus. Lassen Sie uns es also wieder in Weiß ändern, zumal wir unten ziemlich viele Texte haben . Oh, übrigens, zwischen dem Emoji und den positiven Stimmen lassen wir etwa 20 Pixel übrig. Dies ist im Grunde eine Zusammenfassung aller Stimmen, die unten angezeigt werden. Apropos, lassen Sie uns diesen Bereich mit einem Teiler trennen, das Ausrichtungswerkzeug verwenden und 720 Pixel hinzufügen. Bitte zentrieren Sie, falls erforderlich, und machen Sie es hellgrau. Eigentlich denke ich, dass wir in unserem Styles-Panel durch die Trennwand grasen müssen, diese sollte die leichtere sein. Aber hier ist die Sache. Wenn wir uns entscheiden, dass ein Teiler so aussehen sollte, müssen wir zurückgehen und die anderen von allen vorherigen Bildschirmen reparieren . Nun, hier ist die Sache. Ich werde nicht zu viel Zeit damit verbringen. Ich werde nur ein paar machen. Aber denken Sie daran, wir haben den Geschirrbildschirm, auf dem es ziemlich viele Trennwände gibt. Hier wäre eine Komponente ganz nett gewesen. Aber das ist ein guter Unterrichtsmoment wenn man auf die harte Tour lernt, man neigt dazu, sich daran zu erinnern. Stellen Sie also bitte sicher, dass Sie all diese Trennwände reparieren. Zum Abschluss werde ich die wenigen Textebenen hinzufügen, die die Bausteine für die eigentlichen Bewertungen sein werden. Und in der nächsten Vorlesung werden wir alles stylen. Zunächst mit dem Titel etwas, das, ich weiß nicht, ausgezeichnetes Essen oder so etwas sagt . Dann das Datum, der 14. Oktober 2023. Dann der Name des Autors in diesem Fall von Chris Barron. Dann vielleicht ein paar Worte. Der Kern der Bewertung, so etwas wie, ich habe alles an diesem Restaurant und dem Lieferprozess geliebt . Nett und einfach, sehr professionell. Und das klingt ziemlich gut. Okay, lass uns eine Pause machen. Und im nächsten Video werden wir das beenden. 44. Wie du eine Bewertungskarte erstellen: Willkommen zurück. Fangen wir an, diese Bewertung zu gestalten. Jetzt müssen wir vor allem darüber nachdenken wie der Benutzer zur Bewertung gehen wird. Nun, ich sage, dass der Titel der wichtigste Teil ist. Lassen Sie uns also kleiner von LDL in Bezug auf die Schriftformatierung wählen. Was die Farbe angeht, ist Blau die einzige Wahl, da Orange eine Art von Aktion bedeuten würde , die hier verfügbar ist , und das ist nicht der Fall. Als nächstes das Datum und der Name der Tochter, diese sind nicht allzu wichtig. Ich denke also, wir können uns für den Körper in Bezug auf das Schriftdesign und für die Farbe Grau entscheiden . Richten Sie sie übrigens unten aus, falls Sie dies noch nicht getan haben. Nun, das Wesentliche, die eigentliche Bewertung selbst. Nun sage ich, dass das auch als Körper gestylt werden kann, aber lass es uns blau machen, weil die Leute es vielleicht lesen wollen, im Vergleich zu Datum und Namen der Tochter, die im Grunde genommen zur Dekoration dienen Zwecke. Nun, es ist nicht gerade dekorativ, aber die Leute interessieren sich wirklich nicht für diese Dinge. Diese sind nur da, um die Glaubwürdigkeit zu stärken, oder? Sie können also sehen, dass es sich um eine tatsächliche Person handelt. Wir brauchen hier etwas Visuelles , weil es einfach zu viel Text ist. Und ich sage Daumen hoch oder so etwas. Jetzt könnten wir dasselbe Emoji verwenden, das lächelnde. Aber ich denke, das ist ein bisschen zu repetitiv. Also lasst es uns riskieren. Folgendes habe ich vorbereitet. Aber weißt du was? Anstatt es und diesen Bildschirm zu ziehen , als nach links zu schwenken. Lass uns das tatsächlich machen. Jetzt. Konzentrieren wir uns tatsächlich auf den Resources-Frame und ziehen das Symbol direkt dorthin, weil es hier wie gewohnt viel sinnvoller ist, daraus eine Komponente zu machen und dann ein Autolayout hinzuzufügen. Wie immer. Sie sollten jedoch wissen, dass, wenn es ein positives Symbol gibt, dieses immer ein negatives sein sollte. Und tatsächlich hast du einen beigefügt. Jetzt wiederhole ich, das ist ein bisschen riskant. Wir könnten einfach dieselben Smiley-Gesichter verwenden, aber du schon. Hier, ich versuche abzuweichen, macht etwas interessanter. Okay, wenn Sie mit diesen Ressourcen fertig sind, kehren wir zum Überprüfungsbildschirm zurück. Ziehe eine positive Stimme hinein. Und lass uns darüber nachdenken. Zuallererst denke ich, dass wir eine Menge Autolayout brauchen und weißt du, wie viele? Wenn nicht, lassen Sie uns das gemeinsam Schritt für Schritt durchgehen , Zeile für Zeile. Das ist also der erste, oder? Und dann ist das der zweite. Nun, brauchen wir den dritten für diesen Körpertext? Nein, nicht unbedingt. Also lass uns jetzt alles so schnappen. Und dann Shift a und das war's. Wir haben also insgesamt drei für die ersten 21 für jede Zeile. Natürlich müssen wir jetzt die Haupteinstellungen, den Abstand dazwischen, und dies dann so einrichten , dass der Behälter gefüllt wird. Jetzt. Okay, großartig. Danke, dass du Zeit damit verbracht hast. Übrigens, beeile dich nicht. Ich werde natürlich schneller, aber du kannst immer eine Pause machen. Jetzt wollen wir ziemlich viel Flexibilität, daher ist es sehr sinnvoll, den Füllbehälter zu wählen, der bisher großartig aussieht. Wählen wir nun den großen Frame, den Mainframe, und ändern wir seine Breite auf feste Größe , sodass wir ihn auf 656 Pixel einstellen können. 656 Pixel. Und im Grunde, ja, das ist aber gut gemacht. Um fair zu sein, wir brauchen noch etwas mehr Arbeit, bis wir fertig sind. Hauptsächlich müssen wir den Bildschirm mit anderen Einträgen füllen. Lassen Sie uns also eine Kopie dieses Teilers von oben machen und ihn nach unten legen. Beachten Sie keine spezifischen Abstände , da wir auch hier ein automatisches Layout erstellen werden. Und das ermöglicht es uns , einen bestimmten Wert einzugeben. Also lass uns erstmal mit 20 weitermachen. Dies hilft uns auch dabei, die zusätzlichen Linien hinzuzufügen oder zu entfernen , während der Teiler im exakt gleichen Abstand bleibt. Und damit machen wir daraus eine Komponente. Wie immer müssen wir den separaten Ressourcenrahmen verwenden. Vielleicht möchten Sie die Größe übrigens ändern, oder Sie möchten es näher an den Bildschirm heranrücken. Nun, es liegt ganz bei Ihnen, wie Sie es einrichten, aber Sie stellen sicher, dass Sie viel Spaß beim Hin- und Herbewegen haben . Die Hauptsache ist, dass du darin genug Platz hast. Denn nachdem wir daraus eine Komponente gemacht haben, können wir eine Variante nur für die **** davon erstellen. Das einzige, was ich jetzt ändern möchte , ist, das Symbol zu ersetzen, aber hier gibt es viel mehr Potenzial. Stellen Sie also sicher, dass Sie versucht haben, die anderen Designoptionen zu erkunden. Vielleicht eine andere Farbe für den Titel, vielleicht ein anderer farbiger Hintergrund. Verschiedene andere Dinge, die Sie hier tun können. Aber lassen Sie uns vorerst zu unserem Bildschirm zurückkehren und tatsächlich ein paar Kopien herausziehen. Ich denke, wir können uns an Ford und Total anpassen , obwohl der letzte vielleicht etwas abgeschnitten ist, aber das ist völlig in Ordnung. Sie können eine davon auf die negative Variante ändern, nur damit wir etwas Abwechslung haben. Aber bevor wir den eigentlichen Textinhalt ändern, Sie daran, dass der Teiler Position anhand des obigen Textes ändert, oder? Wenn es also länger oder kleiner ist, das die Züge geteilt, aber laut der nächsten Bewertung bewegt es sich nicht. Wie Sie sehen, funktioniert es nicht. Und das liegt daran, dass wir dazu keine Anweisungen gegeben haben . Aber hier ist die Sache. Wenn Sie alle diese Einträge auswählen und sie dann zu einem Autolayout hinzufügen. Das ist Arbeit, gut gemacht. Jetzt können Sie Textzeilen hinzufügen oder entfernen, und Sie sollten sehen, dass es einwandfrei funktioniert. Und das ist in der Tat richtig. Nun, hier ist die Sache. Wir könnten einen booleschen Wert für den Titel machen. Wir können eine Variante machen, bei der es keinen Kommentar, keine Optionen, keine Optionen gibt. Aber was diese Aufnahme angeht, bin ich mit dieser Flexibilität sehr zufrieden. Du kannst viel mehr tun, aber ja, es wird ein bisschen länger dauern. Im Moment denke ich, dass wir einfach weitermachen sollten. Ich danke dir vielmals. 45. Meine Fahrt auf der zusätzlichen Meile: Willkommen zurück. Lassen Sie mich schnell die Adressleiste erledigen , während ich im Hintergrund arbeite. Ich denke, es ist sehr wichtig dass ich Ihnen sage, was ich für die Perle halte, die Extrameile, die Extrameile, die Extrameile. Einige Kunden sagen Ihnen vielleicht , dass c auf der Registerkarte Ansicht, wir hätten etwas mehr Zeit damit verbringen können, verschiedene Eigenschaften für diese Komponente zu wir hätten etwas mehr Zeit damit verbringen erstellen. Die Bibel einschalten , einen booleschen Wert hinzufügen, eine Variante hinzufügen für die Fälle, in denen es nur einen Titel, aber keinen Textkörper gibt, Dinge. Nun, ich glaube nicht, dass das unbedingt einen Schritt weiter geht , nicht in dem Sinne, dass die Kunden das zu schätzen wissen würden. Siehst du, es ist eine Sache für dich, hart zu arbeiten. Und die Belohnung ist , dass Sie in Zukunft nicht mehr so hart arbeiten müssen. Dein Training ist schwierig, aber dann ist der eigentliche Kampf gar nicht so schwer. Das hätten wir also tun , um diese Invarianten zu stützen und so weiter. Aber es ist eine ganz andere Sache, ein Kreditkartendesign zu erstellen, z. B. oder sich eine schöne Kopie, einen schönen Text innerhalb des Projekts auszudenken. Nun, das sind die Dinge, die der Kunde schätzen würde. Achte also bitte darauf , dass du diese beiden Dinge nicht verwechselst. Ich bin also dafür, alles zu geben und nicht faul genannt zu werden, aber das muss man immer im Hinterkopf behalten. Wem hilft es? Hilft es meinem Ego? Hilft es mir, meine Fähigkeiten zu üben? Hilft es dem Entwickler oder hilft es dem Kunden? Denn wenn Sie der Lernpunkt sind, an dem Sie das Gefühl haben, dass Sie die ganze Praxis benötigen , um die Versicherung abzuschließen, erstellen Sie alle Varianten, machen Sie sie flexibel, machen Sie sie reaktionsschnell, was auch immer. Mach alles. Die Enttäuschung kommt jedoch, wenn Sie erwarten, dass der Kunde all diese Varianten und Reaktionsfähigkeit schätzt all diese Varianten und Reaktionsfähigkeit und so weiter, obwohl er tatsächlich keine Ahnung hat. Auch wenn Sie es ausführlich erklären, wird es mir egal sein. Die Chancen stehen gut, dass die Dinge so sind. Wissen Sie, der Kunde muss sich während der Bearbeitung dieses Kurses um andere Dinge kümmern . Ich hoffe, du verstehst es, ich hoffe, du merkst zumindest , warum ich dir diese Dinge am Anfang erzählt habe, oder? Es interessiert niemanden, wie hart du in Figma gearbeitet Du hättest deine eigene Schrift von Grund auf neu erstellen können, Buchstabe für Buchstabe, Zeichen für Zeichen. Niemand kümmert sich wirklich darum. Was ihnen wichtig ist, ist die Gesamtdarstellung und das war's. Ihr Einsatz rechtfertigt nicht Ihren Value Node. Du bist das Wort, der wahre Wert, den du als Designer mitbringen kannst , ist für sie eine Menge anderer Dinge. Fangen wir nun mit den grundlegenden an und können sowohl mit dem Kunden als auch mit dem Entwicklungsteam effektiv kommunizieren . Pünktlich sein, alles pünktlich liefern. Und nach all den Grundlagen haben Sie als Designer einen echten Wert, da ein App-Designer auf Ihrer Erfahrung beruht, die App zu optimieren effizienter zu gestalten. Dinge wie die Hierarchie auf dem ersten Bildschirm, auf der es viele Aktionen gibt. Sie müssen also Erfahrung haben und wissen, wie Sie Ihre IT abschalten können. Um es einfach auszudrücken, wenn Sie, indem Sie eine Taste bewegen und eine andere anders gestalten, machen Sie es kaputt. Und wenn das die Konversionsraten um zehn Prozent erhöht, ist das absolut riesig, riesig. Zehn Prozent Tag für Tag, Wochen und Monate. Das wird dem Unternehmen wirklich zum Wachstum verhelfen. Aber die Fähigkeit selbst, eine Taste zu bewegen oder eine Ghost-Taste auszuführen, eine Taste am unteren Bildschirmrand zu bewegen. Das ist nichts. Die Fähigkeit ist keine wertvolle Sache. Ich hoffe also, dass Sie erkennen, dass der größte Wert, den Sie dem Kunden bieten können nicht unbedingt in ausgefallenen Dingen in Figma, Varianzeigenschaften und Komponenten und so weiter liegt. Meiner Erfahrung nach habe ich es geschafft, meinen eigenen E-Commerce-Shop von 20.000 USD pro Monat auf 50.000 USD pro Monat zu erweitern meinen eigenen E-Commerce-Shop von . Nur das grundlegende Design ändert sich, Dinge wie das Verschieben des Titels nach oben, Reduzieren von Lücken und das Ändern der Größe von Miniaturbildern. Diese sind extrem einfach. Sie könnten sich diesen Kurs in Photoshop ansehen und Sie könnten diese Dinge wahrscheinlich immer noch erreichen. Für den eher technischen Standpunkt sind sie also nicht schwierig. Die Techniken selbst sind nicht der Wert, den Sie über die Erfahrung haben , um diese Änderungen vorzuschlagen. Du bist es und zu wissen, hey, wenn wir immer eine Schaltfläche am unteren Bildschirmrand haben, hilft dies dem Benutzer und Praktikanten, mehr Umsatz als Verkäufe zu erzielen, indem sie sagen, Hey, indem sie die Schaltfläche grau machen und deaktiviert und es leuchtet auf, wenn alle Felder ausgefüllt wurden. Das verbessert das Checkout-Erlebnis und das bringt mehr Umsatz. Das sollten Sie also an den Tisch bringen. Nicht besonders verrückte Prototypen sind superflexible Layouts. Die können helfen. Ich sage nicht, dass sie es nicht tun , aber meistens helfen sie Ihnen, nicht dem Kunden. Dann fragst du dich vielleicht, Chris, wie mache ich diese Erfahrung? Du bekommst es, indem du arbeitest, indem du so viele Projekte wie möglich durchführst. Es gibt hier eine ganze Reihe von Websites wie diese , die Sie wirklich nutzen können. Aber, ähm, wenn Sie wirklich Projekte im Wert von 20.30.000 Dollar für sich haben wollen , müssen Sie mit Projekten im Wert von 501.000 $ beginnen und dann die Statistiken überprüfen, ihre Analysen überprüfen. Schauen Sie nach der Fertigstellung dieses Projekts nach, bleiben Sie mit dem Kunden in Kontakt, bitten Sie ihn, seine Analysen zu sehen, schlagen Sie dann Änderungen vor, entwerfen Sie sie, lassen Sie seine Entwickler sie implementieren und dann überprüfe das Design. In ein paar Wochen. Zum Beispiel haben wir auf dem Startbildschirm ein 360 Pixel großes Foto. Nur als zufälliges Beispiel, probieren Sie es mit 300 Pixel eins aus, oder? Also mach es kleiner. Dann überprüfe die Konversionsraten. Wenn es zwischen 2 und 2,4 Prozent liegt. Das ist unglaublich, oder? Und dann spülst du aus und wiederholst es, bis das Geschäft wächst. Und all die kleinen Dinge, die du getestet hast, musst du dir daran erinnern. Und wenn du dann dein nächstes Projekt bekommst, können dir all diese Tracks helfen, viel mehr zu verdienen. Das ist also der Wert, den Sie bringen können. Es geht nicht um fortgeschrittene Techniken und Figma, es geht darum, was du weißt. Danke und viel Glück. 46. 18 Kasse p1Erstelle den Kassenbildschirm – Schritt 1: Willkommen zurück. Lassen Sie uns den Checkout-Bildschirm bearbeiten, mit der Kopie des Bildschirms mit der Zahlungsmethode beginnen und fast alles darin entfernen. Nun, bis auf den Knopf unten. Nun zum Titel in der Aktionsleiste Lass es uns einfach halten und auschecken. Halte es nett und einfach, denn diese Version wird unser Leben tatsächlich um einiges komplizierter machen unser Leben tatsächlich um einiges komplizierter , um dem Kunden zu helfen. In dieser Phase werden wir jetzt einen Checkout-Bildschirm erstellen, auf dem der Benutzer nicht angemeldet ist. Wenn Sie sich erinnern, bietet Screen1 die Möglichkeit, die Registrierung zu überspringen. Wenn Sie jedoch eine Bestellung aufgeben möchten, benötigen Sie natürlich ein Konto. Lass uns das machen. Erstellen Sie eine Kopie dieser Schaltfläche und heben Sie sie 32 Pixel von der Aktionsleiste für die Texte entfernt an. Schreiben wir etwas wie bitte melden Sie sich an oder registrieren Sie sich, Schreiben wir etwas wie bitte melden Sie um fortzufahren. Nun, das widerspricht, dass wir unten einen Button haben, aber ich schlage Folgendes vor. Lassen Sie uns den unteren Bereich belassen, ihn aber in den deaktivierten Zustand versetzen. Also mach es grau. Dann ändern wir den Text mit Lace oder dem Wort Thin Bucks. Die Idee ist nun, die Haupttaste bleibt unten. hat sich nichts geändert. Jetzt erwartet der Benutzer immer noch, dass es dort angezeigt wird, aber da Sie nicht angemeldet sind, erscheint oben eine neue Schaltfläche. Das ist also nur eine andere Art, das zu tun. Könnten wir nun eine einzige Schaltfläche unten verwenden , auf der „Anmelden“ steht? Klar, natürlich. Aber ich denke, dass das Sehen dieser Schaltfläche „Bestellung aufgeben“ dazu beiträgt, die Verwendung eines Long zu fördern. Es heißt im Grunde, oh, du bist so nah dran, komm schon, tu es einfach. Wenn Sie es zeigen, wird der Benutzer dazu verleitet, weiterzumachen. Das ist also mein Denkprozess. Jetzt müssen wir auch die Artikel im Warenkorb anzeigen. Also lass uns das machen. Schnappen Sie sich den Tastenkürzel D und schreiben Sie mir ihre Pizzalieferung aus, denn Sie müssen wissen, welches Restaurant Sie ausgewählt haben. Wählen Sie im Style-Bedienfeld den kleineren di Belle aus. Nun, was die Farbe angeht, ist Blau völlig in Ordnung, obwohl wir es möglicherweise orange machen könnten, um zu signalisieren, dass Sie zurückgehen und noch mehr Gerichte bestellen könnten . Ich denke, das macht eigentlich viel mehr Sinn. Okay, lass uns, lass es uns tatsächlich machen. Okay, als nächstes fügen wir ein paar Gerichte hinzu. Also habe ich etwas im Knoten schlecht vorbereitet. Also füge ich sie einfach ein. Insgesamt was wir raushaben wollen, drei Ebenen, die Textebenen, also die Menge, der Name des Gerichts und schließlich der Preis. Jetzt könnten Sie möglicherweise die Menge ausblenden und einfach diese klassischen Plus - und Minus-Tasten verwenden diese klassischen Plus - und Minus-Tasten , um einzustellen, wie viele Teile Sie möchten. Aber das nimmt leider eine Menge Platz in Anspruch. Das ist es, was ich denke. Sie können auf den Eintrag tippen und das Pop-up ermöglicht es Ihnen, Geschirr hinzuzufügen oder zu entfernen. Und das liegt daran, dass ich denke, dass es ziemlich unwahrscheinlich ist, dass Sie es so oft verwenden werden. Nun zum Styling selbst Lassen Sie uns für alle drei den Körper verwenden. Allerdings sollte der Preis etwas mehr auffallen. Das ist der klassische Ansatz. Also durchbrechen Sie die Kette und lassen Sie uns sie wahrscheinlich fett statt normal ändern . Nun, hier ist die Sache. Ich mag es nie, Größen zu mischen. Wenn also die links von 26 Pixeln sind, sollten die auf der rechten Seite identisch sein. Sie können das Gewicht oder die Farbe ändern, aber nicht die Größe. Aus welchem Grund auch immer, es fühlt sich einfach komisch an, wenn du das tust. Okay, sieht gut aus. Jetzt brauchen wir den Teiler. Sie können einen vom Bildschirm stehlen , der ziemlich leuchtet. Oder du könntest ein neues machen, was auch immer du willst. Nun, um ehrlich zu sein, ich habe es nicht zu einer Komponente gemacht, aber das können Sie auf jeden Fall tun. Es kann hilfreich sein. Okay, sechs mal sechs Pixel für die Breite der Blätter. Und jetzt ist es an der Zeit, automatische Layouts hinzuzufügen , damit wir ein gewisses Maß an Flexibilität haben. Zuallererst verschieben sich also die Menge und der Name des Gerichts für beide. Nun, okay, ändere jetzt den Abstand auf 20 Pixel. Weiter zum Autolayout mit dem Preis, okay, ändere das Layout auf Abstand zwischen den schönen Zeiten damit. Ich gehe natürlich ziemlich schnell, aber du musst dich nicht daran erinnern. Sie haben die Leertaste immer griffbereit, also verwenden Sie sie, wann immer Sie möchten. Als nächstes noch einer mit dem Divider Shift, sie, ich sage, ich will hier etwa 30 Pixel haben. Aber so einfach. Die Idee ist nun, dass Sie genügend Platz haben sollten , um diese Gerichte einzeln anzuklicken. Okay, wir haben nur einen, aber das wird sich in einer Sekunde ändern. Aus diesem Grund verwenden wir Autolayout , weil wir uns bei der Größe nicht sicher sind. Deshalb ist es am besten, wenn wir jetzt mit viel Flexibilität backen. Jetzt könnte der Teiler den Inhalt in die Mitte drängen , weil er breiter ist. Wenn das passiert, verwenden Sie bitte diesen Teil, um Dinge linksbündig auszurichten. Das ist also der erste von zwei Schritten. Die zweite besteht darin, das Autolayout mit beiden Elementen auszuwählen . Dieser hier, und jetzt richte ihn ein, um den Behälter zu füllen. Das sollte Ihnen ein gutes Ergebnis bringen. Dies ist unser erster Eintrag, aber wir wollen drei und machen ein paar Kopien. Ziehen Sie sie einfach mit Alt und Shift heraus oder verwenden Sie Control D. Keine besondere Lücke im Kopf. Platziere sie einfach, wo immer du willst. Schnapp dir jetzt alles, alle drei Ebenen und den Titel und verwende eine letzte Zeitschicht. Sie haben weniger Auto Layout gewonnen. Und jetzt können wir fast alles kontrollieren. Nehmen wir zum Beispiel D, für den vertikalen Abstand zwischen diesen Typen. Die Frage ist nun, fügen wir eine weiße Füllung hinzu? Ich glaube schon. Ich denke ja, aber das bedeutet, dass wir ein paar Dinge ändern müssen. Ich habe aber keine Angst, also lass uns loslegen. Fügen Sie also diese Füllung hinzu, die weiße Füllung, und für die Polsterung nehmen wir 32 für beide Seiten und dann 16 für die obere und untere Seite. Oh, übrigens, bitte runden Sie die Koordinaten auf zehn Pixel ab. Das ist eine Selbstverständlichkeit, okay? Dies wird natürlich von Seite zu Seite gehen, in voller Breite. Aber wollen wir das so lassen, wie es ist? Ich denke, wir könnten, aber ich denke, ein Klassiker ist hart, vielleicht ein bisschen besser. Außerdem sind es großartige Unterrichtsmomente. Lassen Sie uns dieses Szenario durchgehen. Wie reparieren wir das? Wählen wir also zunächst den großen Rahmen aus und ändern ihn auf fest. Damit können wir es jetzt auf 656 ändern. Auch dies ist der einfachste Weg, dies zu tun. Es garantiert keine maximale Flexibilität, aber das ist in meinem Buch völlig in Ordnung, die Preise und die Trennwände hängen davon ab. Und wenn Sie sie reparieren möchten, wählen Sie einfach alle drei Teiler mit Control Shift aus. Im Grunde sind dies die Schuldigen. Sie zwingen das Auto, breiter zu werden. Wenn wir also die Größe 2592 ändern, die ich auswendig kenne, weil ich schon einmal in dieser Position war, sollten wir jetzt eine ausgeglichene Karte haben. Also fünf Neuntel, und tatsächlich funktioniert es. Übrigens haben wir hier keine Komponente, aber wir benötigen die Komponente möglicherweise für später. Wir werden es vorerst sehen, lassen Sie uns Schritt für Schritt vorgehen. Die Sache ist, ich mag das Auto so, wie es gerade ist. Aber ich denke, für 40 ist ein bisschen viel. Also lass uns es für den vertikalen Raum auf 30 ändern, ich meine, aber weißt du was, der letzte Teiler, das macht es nicht für mich. Es macht nicht viel Sinn. Also lass uns bei gedrückter Ctrl-Taste darauf klicken und es entfernen. Aber das sieht auch nicht gut aus. Es gibt nicht genug Polsterung. Wir hatten also vorher 16, aber wir müssen es hochfahren. Es wird also genügend Höhe vorhanden sein, sodass der Benutzer einfach auf den letzten Eintrag klicken kann. Einige denken, 32 sollte gut funktionieren, und ich glaube, dass wir damit fast fertig sind. Platzieren Sie es sehr nahe an der oberen Taste, um genau zu sein, die beiden Pixel. Und ich denke, wir sind fertig. Jetzt. Könnten wir noch ein bisschen damit spielen? Sollen wir es 20 Prozent mehr als interessant machen . Aber weißt du was, lass uns eine letzte Sache tun. Lassen Sie uns einen Schlagschatten nur für **** davon hinzufügen. Aber ich verspreche dir, das ist es für den Moment. Aber in diesem speziellen Fall werden wir gleich zu den anderen Fällen übergehen, wenn Sie sich angemeldet haben. Das ist es für jetzt. Ich sehe dich in einer Sekunde. Ich danke dir. 47. Den checkout erstellen – Schritt 2: Willkommen zurück. Dies ist Schritt zwei des Prozesses. Angenommen, du hast dich gerade registriert, oder? Du hast ein Konto erstellt. Wem ist das Auto dann sehr ähnlich? Nun, lassen Sie uns zunächst eine Kopie machen. Der Knopf von oben verschwindet. Aber nehmen wir an, Sie haben nicht all Ihre Informationen wie Ihre Adresse, Ihre Kreditkarte usw. eingegeben, oder? Wir werden also immer noch ein paar Pfeile haben , ein paar Warnungen. Lass es uns von oben nehmen, denn wenn du dich angemeldet hast, hast du deinen Gesamtbetrag und die Möglichkeit, den Gutschein hinzuzufügen. Wählen Sie also die Gezeiten, reifen Sie ihre Pizzalieferung und erstellen Sie eine Kopie mit Steuerung Stellen Sie übrigens sicher, dass Sie den Text und nicht den großen Rahmen auswählen , da dies ein automatisches Layout ist Die Kopie wird darunter gelegt. Das Tolle ist, dass Sie auf Ihre Pfeiltasten und die Abwärtspfeiltaste tippen können , und das Layout wird sich einfach so ändern. Das ist total genial. Okay, jetzt habe ich etwas in meinem Notepad vorbereitet, also lass mich das einfach kopieren und einfügen. Kurz gesagt, es ist die Zwischensumme der Liefergebühr. Hast du einen Gutschein und die Gesamtsumme? Diese sind also alle in den meisten Liefer-Apps weit verbreitet. Das Styling ist offensichtlich aus, also lass es uns reparieren. Bitte entfernen Sie sowohl die Farbe als auch die Formatierung. Hier ist meine Meinung. Wir können bitte mit neuen Nieto Regular 26 Pixeln beginnen . Was die Gesamtsumme betrifft, fett und blau. Also im Grunde sind drei von vier Dingen blau. Der Gutschein sollte orange sein , da du ihn vor Ort anklicken kannst. Sie können das in Figma tun, Sie können verschiedene Farbstile wählen. Nehmen Sie sich jetzt Zeit damit. Am wichtigsten ist, dass Sie dem Benutzer all diese Einstellungen anleiten und sie Stück für Stück vornehmen. einem Schritt könnten Sie insgesamt Schwarz in Bezug auf das Gewicht machen, es dicker machen. Okay, wenn du fertig bist, erstelle eine Kopie mit Control D. Auch diese wird darunter platziert, aber wähle beide aus und verwende Shift a für ein automatisches Layout, du hast die Möglichkeit ändere die Ausrichtung. Okay? Es ist noch nicht einfach zu segeln , weil wir es so ändern müssen Abstand zwischen den Textausrichtungen gesetzt werden muss, um eine Zeile zu schreiben. Es sieht optisch etwas ansprechender aus. Navigieren Sie durch den Raum zwischen rechts ausgerichtetem Text. Und falls erforderlich, müssen Sie diese Einstellung möglicherweise von Hug Content, dem Füllbehälter, ändern , falls Sie sich immer noch nicht sicher sind, wie das funktioniert. Probiere einfach alles aus und schau, wie es dir geht, oder komm einfach zu diesem Akkord und bitte um Hilfe. Aber bitte poste immer Screenshots, damit ich sehen kann, was passiert. Aber ja, das ist es für die obere Leiste, 0, nur als optionalen Schritt, wählen Sie das letzte Produkt aus. Dieser spezielle Rahmen hier. Das ist ziemlich wichtig. Ziehen Sie nun mit Hilfe des Linienwerkzeugs einen weiteren Teiler heraus . Machen Sie es 59 bis 592 Pixel breit und ändern Sie die Farbe in dieses spezielle Hellgrau. Ich weiß, dass das vielleicht etwas schwierig ist. Also wenn du diesem speziellen Schritt nicht folgen kannst, einfach schlecht gehalten, oder du könntest den letzten Eintrag entfernen und den mittleren duplizieren, der einen Teiler hat, niemals nivelliert kleine Sache, halte dich zurück, die immer Optionen. Okay, lass uns die unterste Karte machen, nett und einfach. Beginnen Sie mit einer einfachen Kontaktinformationen auf Textebene. Beim nächsten Nässe, lass uns eine Warnung schreiben. Bitte fügen Sie Ihre Informationen in der Info hinzu. Das alles wird regelmäßig in Nieto geschrieben. Die linke sollte übrigens blau sein und die rechte, da es sich um eine Warnung handelt, sollte sie gelesen werden, um sicherzugehen, dass es so klar wie der Tag ist. Fügen wir den Chevron hinzu. Du könntest es auch Erwachsene nennen, aber du solltest es nicht mit dem Zurück-Pfeil verwechseln. Das ist etwas anderes. Okay? Jetzt sollten Sie sofort erkennen, dass wir es zu einer Komponente machen müssen, oder? Lassen Sie mich also weitermachen, während ich es in den Ressourcenrahmen verschiebe und die Schritte durchgehe. Denken Sie daran, dies muss gelesen werden und es muss ein automatisches Layout sein. Okay, lass uns zurück zum Bildschirm gehen. Aber die rechte Seite benutzt Shift A für diese beiden Typen. Lassen Sie 20 Pixel dazwischen. Aber wir können unsere Meinung jederzeit ändern. Fügen Sie dann ein weiteres hinzu, das automatische Layout für die gesamte Zeile. Ändere es in Leerzeichen dazwischen. Dann fügen wir eine Füllung mit weißem Hintergrund hinzu. Diese sollten alle mit Schnellfeuergeschwindigkeit kommen. Okay, reines Weiß. Dann füge deine Polsterung hinzu. 32.16. Tolles Zeug. Ich hoffe du hast Spaß. Zentrieren Sie es und ändern Sie die Breite auf 656. Und ob Sie es glauben oder nicht, das ist unsere Komponente. Jetzt müssen wir natürlich noch ein paar Dinge tun, aber keine Sorge, wir werden nass werden. Okay. Für den unteren Teil, lass uns sehen, was ist, was. Jetzt haben wir hier noch ein paar Dinge zu tun, aber lassen Sie uns eine wichtige Einstellung oben ändern. Also lasst uns diese Karte komprimieren, indem wir diesen Wert auf 20 ändern. Und das liegt daran, dass wir unten mehr Platz brauchen. Hat immer noch ausreichend Leseraum, aber jetzt haben wir hier tatsächlich die Liebe zum Weltraum. Sie zu unserem Glück Erhöhen Sie zu unserem Glück die Zeilenhöhe für diese letzten beiden Textebenen. Wir brauchen etwas Großzügigeres. Um diese Vorlesung abzuschließen, fügen Sie dem neuen Eintrag, den wir gerade eingerichtet haben, einen sehr hellgrauen Strich hinzu. Du solltest den grauen Speicher haben. Okay, wir haben noch ein paar Minuten und wir werden mit diesem Design fertig sein. Machen wir eine kurze Pause und wir sind im Handumdrehen fertig. Vielen Dank und herzlichen Glückwunsch, dass Sie es bis hierher geschafft haben. Ich danke dir vielmals. 48. Varianten im checkout verwenden: Willkommen zurück. Hier haben wir aufgehört. Lassen Sie uns die Texteigenschaft erstellen. Zuerst. Für den linken Text ist dies das Symbol, nach dem Sie suchen. Nenn es genau so links. Und auf der rechten Seite hast du dasselbe erraten, oder? Text. Jetzt können wir eine Variante erstellen, bei der wir einfach die Farbe des Textes ändern. Nun der Fairness halber, das ist nicht unbedingt erforderlich, aber die Variante eröffnet eine Menge Möglichkeiten. Du könntest eine Hintergrundfarbe für die rechte Seite hinzufügen, vielleicht ein Ausrufezeichen oder ein Symbol. Es gibt eine Menge Dinge, die Sie möglicherweise tun könnten, aber ich werde es aus Zeitgründen einfach halten. Nennt das eine normal, dann das andere wahrscheinlich immer. Nun, das sollte an dieser Stelle recht einfach zu verfolgen sein. Kehren wir zu unserem Design zurück und sehen uns Wordsworth an. Zunächst ziehen wir im Asset-Panel insgesamt vier Einträge hinein. Navigiere. Jetzt nehme ich mir die Zeit, den Inhalt nach Bedarf zu ersetzen. Ich brauche ein paar Sekunden, um das zu erledigen, also habe bitte etwas Geduld damit. Hier ist die Sache. Ich glaube, ich habe vergessen, das Gewicht der Texte auf der rechten Seite zu ändern, denn hier ist das Ding, es muss fett sein, damit es auffällt. Hier wird die Aufmerksamkeit des Benutzers standardmäßig gerichtet. Die Idee hier ist also, dass wir die Lieferzeit haben , die standardmäßig festgelegt ist. Auch dies ist sehr wichtig , da es standardmäßig auf SAP gesetzt ist, was für so bald wie möglich steht. Und wenn die Erwähnung nochmal 60 Minuten dauert, ist das ziemlich nützlich. Weiter unten haben wir die Lieferadresse und dann die Kontaktinformationen da wir natürlich die Telefonnummer und schließlich die Kreditkartennummer, die Zahlung benötigen . Die Idee ist also, dass der Benutzer registriert ist, oder? Aber erinnere dich an die Felder aus diesem Schritt. Es ging nicht um seine Telefonnummer, seine Adresse oder seine Zahlungsflucht. Deshalb zeigen wir es hier. Jetzt. Hätten wir das alles bei der Registrierung hinzufügen können? Ja, natürlich, aber das ist keine gute Praxis. Ein potenzieller Kunde möchte also zuerst die App sehen, alle Restaurants sehen. Und sobald wir seine Aufmerksamkeit haben, wir haben seine Interessen, dann können wir nach weiteren Informationen fragen. Aber wenn du 12 Felder vor ihm geschlafen hast, ohne ihm die App, die Restaurants, das Geschirr zu zeigen . Nun, das ist frustrierend und die meisten Leute werden das Wesentliche einer App verlassen. Es dient dazu, den Benutzer mit so wenig Reibung wie möglich zu führen. Die Leute sind nicht gezwungen , etwas zu kaufen. Sie haben Dutzende von Gründen, abzubrechen. Und das liegt nicht unbedingt an Ihrem Design. Vielleicht kommt es zu spät zur Arbeit. Vielleicht haben sie etwas auf dem Herd, was das Kind weint, oder jemand an der Tür und so weiter. Sobald Sie also verstehen , dass die Leute, die diese Apps verwenden , echte Menschen mit echten Problemen sind, dann macht alles Sinn. Das ist der Grund, warum wir alles so intuitiv und einfach machen . Du könntest diese App also auch verwenden, wenn du im Halbschlaf bist , weil niemand in seinem Leben einen zusätzlichen Bruchteil braucht. Deshalb fordern wir nur, dass der Westen am richtigen Punkt zu 100% benötigt wird. Der eine, das Register, kein Problem. Hab deine Karte nicht zur Hand. Kein Problem. Aber ja , insgesamt ist das das Design. Falls du den Schatten hinzufügen möchtest, schlage ich vor, dass du zuerst all diese Typen, alle vier, in ein Autolayout einwickelst . Und hier ist die Sache, um die Doppelgrenze zu vermeiden. Sie können hier einen negativen Wert minus eins verwenden. Das ist total genial, oder? Und wenn du wirklich Becky sein willst, kannst du, nachdem du einen Schlagschatten aktiviert hast, nachdem du einen Schlagschatten aktiviert hast, den ersten und den letzten Eintrag auswählen und den Koordinatenradius manuell ändern. Denken Sie daran, dass Sie sie individuell einrichten können. Bitte beachten Sie, dass ich den Koordinatenradius in meiner Masterkomponente oder meiner Variante nicht festgelegt habe. Das wäre für die mittleren Einträge ein Problem gewesen. Also entschied ich mich stattdessen, das zu kontrollieren, um den individuellen Koordinatenradius von diesem Ort aus zu kontrollieren . Okay, lass uns eine kurze Pause machen. 49. Denke an den Prototyp voraus: Willkommen zurück. Ich werde gleich wieder reinspringen und ein paar Kopien dieses Bildschirms erstellen. Und ich werde den Status der Variante Schritt für Schritt ändern . Ich werde auch den Text auf der rechten Seite so ändern , dass er etwas vernünftiger aussieht. Jetzt geht es darum, über den Prototyp nachzudenken. Wir könnten das interaktiv gestalten, damit sowohl der Kunde als auch der Entwickler es einfacher haben. Die Idee ist, dass Sie auf eine dieser Warnungen klicken und dann zu diesem speziellen Bildschirm weitergeleitet werden, die Zahlung, eine Adresse usw. , der auch alle Fehler oder Lücken aufdeckt. Also z. B. Bildschirme, die wir nicht aufgenommen haben, haben wir einfach vergessen, sie einzubeziehen. Popups oder verschiedene Bundesstaaten, die nicht im Briefing oder als im Wireframe enthalten waren . Falls Sie nun einen kompletten Prototyp erstellen möchten , müssen Sie diesen schrittweisen Ansatz verwenden , den wir hier Sie durch jeden einzelnen Bundesstaat führen. Nun, hier ist die Sache, komplizierte, hochmoderne Prototypen. Tun. Ich empfehle sie? Ich sage, es hängt davon ab? das Budget angeht, wenn Sie etwa 500 Dollar bezahlt bekommen, nein, ich würde wahrscheinlich keinen kompletten interaktiven Prototyp machen , oder? Stattdessen würde ich die grundlegendsten Interaktionen nur durchführen , um den Standardablauf der App zu zeigen. Aber wenn das 423 oder 5.000$ sind und Sie den Kunden beeindrucken möchten, sorgen sie dafür, dass Sie sich dafür entscheiden. Aber es gibt noch einen anderen Fall, den Sie vielleicht in Betracht ziehen sollten. Das ist vielleicht für dein Portfolio, oder? Dann, ja, absolut. Du könntest etwas Besonderes machen C, es geht nur darum, langfristig zu denken, oder? Wenn das ein 500-Dollar-Projekt ist, sicher, es ist das Geld nicht wert, wissen Sie, etwas Beeindruckendes zu tun, einen beeindruckenden Prototyp für den Kunden zu erstellen. Das ist es nicht wert. Aber wenn dies einer der wenigen Einträge in Ihrem Portfolio ist , dann nutzen Sie diese Gelegenheit, um etwas zu erstellen , das Ihre Fähigkeiten unter Beweis stellen kann, oder? Der Kunde bekommt etwas extra. Sicher. er vielleicht nicht zu schätzen. Er wird dich vielleicht nicht für diese zusätzliche Sache bezahlen. Aber was hier am wichtigsten ist, ist, dass Sie eine Strategie haben. , wenn jemand Ihr Portfolio besucht Was sollen sie sehen, wenn jemand Ihr Portfolio besucht? Solltest du bezahlt werden wollen? Das sind natürlich die Worte, aber zu Beginn deiner Karriere ist das immer Zeug. Sie sollten sich also wohl fühlen Sie wissen, dass Sie einen ziemlich guten Prototyp um eine Meile zu viel liefern einen ziemlich guten Prototyp um eine Meile , um all diese Bildschirme zu sehen, all diese zusätzlichen Schritte. Aber hier ist die Sache. Wenn Sie hohe Erwartungen haben , fallen die Dinge auseinander. Zum Beispiel, wenn Sie 500$ vereinbart haben, aber dann mit viel mehr Arbeit konfrontiert wären , als das Wireframe vorgeschlagen hat. Und du denkst: Hey, ich habe noch viel mehr Bildschirme gemacht. Ich bin mir sicher, dass er mir mehr zahlen wird . Oder, hey, weißt du, für diesen Prototyp brauchte ich mehr als Worte. Aber die Wahrheit ist, dass das nicht der Fall ist. Dem Kunden wird es egal sein. Der Kunde wird dir nicht mehr zahlen. Vielleicht gibt er dir einen kleinen Bonus, aber ja, im Grunde hast du 500 Dollar akzeptiert. Und wenn du Erwartungen hast, wenn du verärgert bist, dann wird das zu einem Albtraum. Nun, wenn Sie es umdrehen, wenn Sie verstehen , dass Sie all diese zusätzlichen Dinge in Ihrer Zukunft als Investition in Ihr Portfolio tun werden. Sie sorgen dafür, dass das Sinn macht. Für uns in diesem speziellen Fall ist dies ein Kurs über AB-Design und Figma, nicht darum, Ihre Karriere als Designer zu managen, aber ich denke trotzdem, dass ich diese Erkenntnisse mit Ihnen teilen sollte . Jetzt möchte ich vor allem, dass du glücklich bist und das kann passieren, wenn du nicht mit offenen Augen in diese Karriere eintrittst. also erneut sicher, dass Sie über Ihr Portfolio nachdenken. Du denkst über die lange Sicht nach, oder? Okay, lass mich den anderen Bildschirm beenden, meine Befehle, während wir über dies und das chatten. Hier ist die Sache. Nachdem Sie eine Bestellung aufgegeben haben, benötigen Sie den Bildschirm , der dies bestätigt, richtig. Vielleicht möchten Sie aber auch am nächsten Tag nachbestellen oder so. Also, was ich tun werde, ich werde mich hier um diese beiden Situationen kümmern . Ich hoffe, Sie werden überrascht sein wie schnell wir in nur wenigen Sekunden einen Bildschirm erstellen können, indem wir alles, was wir bisher gebaut haben, wiederverwenden. Wenn es einen letzten Ratschlag für Sie zu diesen Projekten gibt, dann sage ich, dass dieser lautet: Stellen Sie sicher, dass Sie genügend Zeit für sie einplanen. Sehen Sie sich diesen Teil an, in dem wir alleine arbeiten im Hintergrund gute Musik bei einer schönen Tasse Kaffee spielen . Das ist nicht der schwierige Teil. Solltest du lernen müssen, wie man Komponenten benutzt, Varianz, obwohl Layouts, dies und das. Aber das ist nicht der schwierige Teil. Das ist der gute Teil. Ich könnte das gesamte Projekt wahrscheinlich in weniger als einem Tag, vielleicht sogar in einem halben Tag abschließen das gesamte Projekt wahrscheinlich in weniger als einem Tag, . Wer weiß? Der knifflige Teil ist jedoch Umgang mit dem Kunden oder dem Projektmanager. Sie geben dir nicht genug Informationen, um weiterzumachen. Damals war man unentschlossen über dies und das, und das hat Figma zu dem gemacht, was es heute ist. Das ist der Grund, warum Designer oder sie so viel Flexibilität in ihre Designs einbauen , weil sie es satt haben , dass Kunden ihre Meinung ändern. Das Wichtigste, was Sie als Designer wollen , ist, zum nächsten Projekt überzugehen. Sie haben die Fähigkeiten, jedes Projekt in kürzester Zeit abzuschließen . Wenn Sie einfach mit einem umfassenden, kurzen und/oder einem guten Wireframe allein gelassen werden. Aber so ist es in der realen Welt nicht. Stellen Sie sich vor, der Kunde sagt, hey, wir wollen mehr Platz zwischen jeder Zeile oder größere Felder oder abgerundete Schaltflächen, eine andere Schrift, dieses andere Farbschema. Nun, deshalb verwenden wir all diese erweiterten Funktionen in Figma, um uns grundsätzlich davor zu schützen. Nun, klar, in diesem speziellen Fall wäre das Ändern der Schrift hier und da immer noch ein bisschen mühsam , weil wir nicht alles als Stil eingerichtet haben. Aber wenn Sie mehr Erfahrung sammeln, können Sie sich gegen alles versichern. Das ist die Sache, darum musst du dich kümmern. Okay. Lass uns eine kurze Pause machen. 50. Endliche Gedanken zum Projekt: Willkommen zurück. Ich muss noch die Kontaktseite erstellen, aber das ist eine sehr einfache Kopie meiner Bestellung. Also nehme ich mir ein paar Minuten Zeit , um die Anträge durchzugehen. Während ich jetzt im Hintergrund arbeite, lass mich dir sagen, wie glücklich ich bin, dass du es hier geschafft hast. Ich wollte das ernsthafte Projekt in diesen Kurs einbeziehen, kein einfaches, das auf ein paar Bildschirmen basiert, z. B. hätten wir in der ersten Hälfte des Kurses mit den ersten drei Bildschirmen aufhören können. Was ich wirklich wollte, dass das real ist, um dich auf die reale Welt vorzubereiten. Nun, die Wahrheit ist, es ist eine Menge sich wiederholender Arbeit. Es ist eine Menge Vorbereitung. Aber sobald Sie Ihre Komponenten eingerichtet haben, wenn Sie wissen, welche Schriften Sie verwenden möchten, welche Farben usw., passen die Dinge zusammen und hören Sie sich einige meiner Optionen an. Ich bin mit der Größe der Felder nicht hundertprozentig zufrieden. Ein gewisser Abstand ist hier und da, aber wir können uns immer die Zeit nehmen, damit zu spielen. Ab diesem Zeitpunkt ist der Himmel die Grenze. Sie können dieses Projekt in etwa 30 Minuten um 20 Prozent, vielleicht 50% besser aussehen lassen. Leg einfach etwas Solides an. Sie benötigen z. B. 10 h , um das Fundament zu bauen. Aber danach, innerhalb weniger Minuten, können Sie das Design in etwas viel Besseres verwandeln. Bitte nehmen Sie sich die Zeit, Ihre eigene Version zu erstellen , basierend auf dem, was Sie hier sehen Ich würde gerne neue Layouts, neue Schriftarten, bessere Icons mit verschiedenen Symbolstilen sehen neue Schriftarten, bessere Icons verschiedenen Symbolstilen , die den Lead eine andere Atmosphäre geschaffen haben ein anderes Farbschema. Mache es vielleicht professioneller, verspielter, was auch immer du dir einfallen lässt, mach es. Angenommen, Sie sind mit dem Projekt fertig und möchten es teilen, exportieren Sie bitte keine Bildschirme als PNGs, sondern klicken Sie von hier aus auf die Schaltfläche Teilen. Die Ansicht, die Details hier, kann jeder sehen, der den Link hat, das ist der Standard und ich empfehle dir, es so zu belassen. Sie könnten möglicherweise jemanden einladen , indem Sie diese E-Mail eingeben. Aber ich benutze diese Funktion gerne . Link kopieren und dann an wen auch immer du willst. Wenn Sie mir Ihre Version zeigen möchten, benutzen Sie bitte diesen Button und senden Sie mir Ihren Link. Um diesen Teil zu beenden, fragen Sie sich vielleicht, ob das zu 100% ist, dann wissen Sie, dass es immer Dinge gibt, die Sie tun können. Aber vorerst können wir das Design mit einem Lächeln im Gesicht beenden . Ich hoffe, dass du stolz auf dich bist. Das ist total großartig und ich danke dir, dass du bis zum Ende bei mir geblieben bist. Ich freue mich darauf, deine eigene Version zu sehen. Danke und schau weiter. Es werden noch mehr kommen.